@@ -13,18 +14,22 @@ Covalent is a reusable UI platform from Teradata for building web applications w
## Setup
-* Ensure you have Node 4.4 and NPM 3+ installed.
+* Ensure you have Node 5.5.0 - 6.9.1 and NPM 3+ installed.
* Install Angular CLI `npm i -g angular-cli@latest`
-* Install Typescript 2.0 `npm i -g typescript`
+* Install Typescript `npm i -g typescript`
* Install TSLint `npm install -g tslint`
* Install Protractor for e2e testing `npm install -g protractor`
* Install Node packages `npm i`
* Update Webdriver `webdriver-manager update` and `./node_modules/.bin/webdriver-manager update`
-* Run local build `ng serve`
+* Run local build `ng serve` or `ng serve --aot`
---
+* [Getting Started](docs/GETTING_STARTED.md)
* [Contributing Guidelines](docs/CONTRIBUTING.md)
* [Developer Guide](docs/DEVELOPER_GUIDE.md)
+* [Upgrading](docs/UPGRADE.md)
* [Releasing](docs/RELEASE.md)
* [Changelog](docs/CHANGELOG.md)
+* [Quickstart Repo](https://github.com/teradata/covalent-quickstart)
+* [Plunker Template](http://plnkr.co/edit/7uZQn4mLNJkL6XN9WSNd)
diff --git a/angular-cli.json b/angular-cli.json
index d0a197be2e..dd835feaef 100644
--- a/angular-cli.json
+++ b/angular-cli.json
@@ -9,6 +9,7 @@
"outDir": "dist",
"assets": [
"app/assets",
+ "platform",
"favicon.ico"
],
"index": "index.html",
@@ -20,7 +21,8 @@
"styles": [
"styles.scss",
"theme.scss",
- "platform/core/styles/platform.scss"
+ "platform/core/common/platform.scss",
+ "../node_modules/@swimlane/ngx-charts/release/ngx-charts.css"
],
"scripts": [
"../node_modules/hammerjs/hammer.min.js",
diff --git a/build.conf.js b/build.conf.js
index e716b87f75..6d5abe38d9 100644
--- a/build.conf.js
+++ b/build.conf.js
@@ -6,16 +6,6 @@ module.exports = {
'src/**/**/package.json'
],
deployed: 'deploy/platform/',
- tsfiles: [
- 'src/typings.d.ts',
- '!src/main.ts',
- '!src/polyfills.ts',
- '!src/test.ts',
- 'src/**/**.ts',
- '!src/**/**/**spec.ts',
- '!src/app/**/**.ts',
- '!src/environments/**/**.ts'
- ],
styles: [
'!src/theme.scss',
'!src/styles.scss',
@@ -38,9 +28,19 @@ module.exports = {
'src/**/**.html',
'src/**/**.md',
'src/**/**.js',
+ 'src/**/**.ts',
+ '!src/**/**.spec.ts',
'src/**/**/package.json',
+ 'src/**/tsconfig-aot.json',
+ '!src/tests/**/**.ts',
'!src/app/**/**.html',
'!src/app/**/**.js',
+ '!src/app/**/**.ts',
+ '!src/environments/**/**.ts',
+ '!src/polyfills.ts',
+ '!src/main.ts',
+ '!src/test.ts',
+ 'src/typings.d.ts',
'!src/index.html'
]
}
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 8f6975d380..bb5ecb4e77 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -1,3 +1,462 @@
+
+# [1.0.0-beta.1 Purple Rain](https://github.com/Teradata/covalent/tree/v1.0.0-beta.1) (2017-01-30)
+
+## Breaking Changes
+* **layout:** `td-layout` removal of `(logout)` event and `[displayName]`, `[logo]`, `[icon]` and `[sidenavTitle]` inputs. ([026520cc346721d72c815b0d09fbd469fd3f2ad5](https://github.com/Teradata/covalent/commit/026520cc346721d72c815b0d09fbd469fd3f2ad5))
+
+* **layout:** deprecation of `layout` module selectors to make more sense in the context used and `td` preffixed. ([026520cc346721d72c815b0d09fbd469fd3f2ad5](https://github.com/Teradata/covalent/commit/026520cc346721d72c815b0d09fbd469fd3f2ad5))
+
+### td-layout
+Before (deprecated):
+```html
+` in content. ([988940253db3df545f1e19ee119cc2c4dee19605](https://github.com/Teradata/covalent/commit/988940253db3df545f1e19ee119cc2c4dee19605))
+* **markdown:** Added `[content]` input to `td-markdown` to load content dynamically. ([988940253db3df545f1e19ee119cc2c4dee19605](https://github.com/Teradata/covalent/commit/988940253db3df545f1e19ee119cc2c4dee19605))
+* **layout:** All components that have proxy methods like `open`, `close` and `toggle` return the underlying `Promise`. ([026520cc346721d72c815b0d09fbd469fd3f2ad5](https://github.com/Teradata/covalent/commit/026520cc346721d72c815b0d09fbd469fd3f2ad5))
+* **layout:** `td-layout` is now a blank sidenav that gets hooked into the layouts so you can set custom content. ([026520cc346721d72c815b0d09fbd469fd3f2ad5](https://github.com/Teradata/covalent/commit/026520cc346721d72c815b0d09fbd469fd3f2ad5))
+* **layout:** Added `td-nagivation-drawer` component as a `td-layout` addon and following the MD spec better. ([026520cc346721d72c815b0d09fbd469fd3f2ad5](https://github.com/Teradata/covalent/commit/026520cc346721d72c815b0d09fbd469fd3f2ad5))
+
+Usage:
+```html
+
+
+ Main Content
+
+ Menu Content
+
+
+ .. rest of the app
+
+```
+
+* **layout:** `td-layout-nav-list` and `td-layout-nav` can be used as standalone without a `td-layout` parent (which will hide/show the menu button depending on that). ([026520cc346721d72c815b0d09fbd469fd3f2ad5](https://github.com/Teradata/covalent/commit/026520cc346721d72c815b0d09fbd469fd3f2ad5))
+* **layout:** Removed fixed breakpoint for mobile in `td-layout-nav-list` and `td-layout-manage-list`. ([026520cc346721d72c815b0d09fbd469fd3f2ad5](https://github.com/Teradata/covalent/commit/026520cc346721d72c815b0d09fbd469fd3f2ad5)), closes [#265] (https://github.com/Teradata/covalent/issues/265)
+* **layout:** `td-layout-nav-list` and `td-layout-manage-list` new inputs `[opened]`, `[mode]` and `[sidenavWidth]` to allow more flexibility. ([026520cc346721d72c815b0d09fbd469fd3f2ad5](https://github.com/Teradata/covalent/commit/026520cc346721d72c815b0d09fbd469fd3f2ad5)), closes [#180] (https://github.com/Teradata/covalent/issues/180)
+
+Usage:
+```html
+
+
+```
+
+```html
+
+
+```
+
+```typescript
+constructor(public media: TdMediaService) {}
+
+ngAfterViewInit(): void {
+ // broadcast to all listener observables when loading the page
+ this.media.broadcast();
+}
+```
+
+* **loading:** Added `[tdLoadingStrategy]` input to change between overlay and replace strat. ([d87aa65f18af6081ebcff7fe21cb44ac9a0be00f](https://github.com/Teradata/covalent/commit/d87aa65f18af6081ebcff7fe21cb44ac9a0be00f)), closes [#84](https://github.com/Teradata/covalent/issues/84)
+* **loading:** Added `[tdLoadingColor]` input for `primary` , `accent` or `warn`. ([d87aa65f18af6081ebcff7fe21cb44ac9a0be00f](https://github.com/Teradata/covalent/commit/d87aa65f18af6081ebcff7fe21cb44ac9a0be00f)), closes [#255] (https://github.com/Teradata/covalent/issues/255)
+* **loading:** Use `tdFadeInOut` animation instead of `tdFade` directive. ([d87aa65f18af6081ebcff7fe21cb44ac9a0be00f](https://github.com/Teradata/covalent/commit/d87aa65f18af6081ebcff7fe21cb44ac9a0be00f))
+* **loading:** Easier fullscreen `tdLoading` component instantiation with `create()` method + default fullscreen mask. ([d87aa65f18af6081ebcff7fe21cb44ac9a0be00f](https://github.com/Teradata/covalent/commit/d87aa65f18af6081ebcff7fe21cb44ac9a0be00f))
+* **loading:** Better efficiency with `OnPush` strategy. ([d87aa65f18af6081ebcff7fe21cb44ac9a0be00f](https://github.com/Teradata/covalent/commit/d87aa65f18af6081ebcff7fe21cb44ac9a0be00f))
+* **media:** Optimize resize event handling on `TdMediaService`. ([026520cc346721d72c815b0d09fbd469fd3f2ad5](https://github.com/Teradata/covalent/commit/026520cc346721d72c815b0d09fbd469fd3f2ad5))
+* **media:** Added `broadcast` method in `TdMediaService` to explicitly trigger the media query checkup on subscribers. ([026520cc346721d72c815b0d09fbd469fd3f2ad5](https://github.com/Teradata/covalent/commit/026520cc346721d72c815b0d09fbd469fd3f2ad5))
+* **pattern:** Added `management data-list` design pattern. ([3a15e7ad8ed8f9a83b072524d4054569ead92de2](https://github.com/Teradata/covalent/commit/3a15e7ad8ed8f9a83b072524d4054569ead92de2))
+* **plnkr:** Covalent now has a `plnkr` (Plunker) template for easier `bug` replication, `demo` and `idea sharing`. Go to [plnkr](http://plnkr.co/edit/7uZQn4mLNJkL6XN9WSNd). closes [#47](https://github.com/Teradata/covalent/issues/47)
+* **theming:** Added prebuilt themes `orange-light-blue`, `blue-grey-deep-orange`, `blue-orange`, `indigo-pink` and `teal-orange`. ([45d4c1b35c6e2a23d19ac73273cfbd817acb6686](https://github.com/Teradata/covalent/commit/45d4c1b35c6e2a23d19ac73273cfbd817acb6686))
+
+## Internal
+* **build:** Upgraded `gulp-sass` and added custom `importer` into the `compile-sass` to handle `~` imports like `sass-loader`. ([45d4c1b35c6e2a23d19ac73273cfbd817acb6686](https://github.com/Teradata/covalent/commit/45d4c1b35c6e2a23d19ac73273cfbd817acb6686))
+* **build:** Leverage `skipTemplateCodegen` from the `angularCompilerOptions`. ([2b605831c501b743189dc7d24a91c3dc5445b8b7](https://github.com/Teradata/covalent/commit/2b605831c501b743189dc7d24a91c3dc5445b8b7))
+* **build:** leverage the `ngc` to generate our `ts` complation from the `tsconfig-aot.json` and removed usage of `gulp-typescript`. ([2b605831c501b743189dc7d24a91c3dc5445b8b7](https://github.com/Teradata/covalent/commit/2b605831c501b743189dc7d24a91c3dc5445b8b7))
+* **build:** Added a preparation step to replace `.scss` extensions for `.css` so aot loads precompiled files. ([2b605831c501b743189dc7d24a91c3dc5445b8b7](https://github.com/Teradata/covalent/commit/2b605831c501b743189dc7d24a91c3dc5445b8b7))
+* **code-health:** Initial unit tests for `file` module. ([48cdbcaa56ac8cc679e9d36b7f4e65fabad039c0](https://github.com/Teradata/covalent/commit/48cdbcaa56ac8cc679e9d36b7f4e65fabad039c0))
+* **code-health:** Added initial unit tests for json-formatter. ([da4db7fbc6efbe5e3379cd377b2826e25c2b2ea1](https://github.com/Teradata/covalent/commit/da4db7fbc6efbe5e3379cd377b2826e25c2b2ea1))
+* **code-health:** Initial unit tests for `TdLoadingDirective` and `TdLoadingService`. ([d87aa65f18af6081ebcff7fe21cb44ac9a0be00f](https://github.com/Teradata/covalent/commit/d87aa65f18af6081ebcff7fe21cb44ac9a0be00f))
+* **code-health:** Initial unit tests for `td-expansion-panel`. ([5e5a7efbb3ef1a13b602edeeb3fbe6318fd977e2](https://github.com/Teradata/covalent/commit/5e5a7efbb3ef1a13b602edeeb3fbe6318fd977e2))
+* **code-health:** Initial unit tests for `td-highlight`. ([3311d4a942849e72a2952200ac24043ab9849ecb](https://github.com/Teradata/covalent/commit/3311d4a942849e72a2952200ac24043ab9849ecb))
+* **code-health:** Initial unit tests for `td-markdown`. ([988940253db3df545f1e19ee119cc2c4dee19605](https://github.com/Teradata/covalent/commit/988940253db3df545f1e19ee119cc2c4dee19605))
+* **dependencies:** Upgrade `tslint` and `codelyzer` to support `typescript@2.1.5` ([48cdbcaa56ac8cc679e9d36b7f4e65fabad039c0](https://github.com/Teradata/covalent/commit/48cdbcaa56ac8cc679e9d36b7f4e65fabad039c0))
+* **dependencies:** Upgrade to `angular-cli@1.0.0-beta.26`. ([fd0f32a79616a086444a90de853ba30d6ced01a3](https://github.com/Teradata/covalent/commit/fd0f32a79616a086444a90de853ba30d6ced01a3))
+* **dependencies:** Upgrade to `typescript@2.1.5`. ([fd0f32a79616a086444a90de853ba30d6ced01a3](https://github.com/Teradata/covalent/commit/fd0f32a79616a086444a90de853ba30d6ced01a3))
+* **documentation-tools:** New internal module `documentation-tools` for doc components and utilities. ([2570fa4ecb6a6cc72e308993d9dd9747eb053897](https://github.com/Teradata/covalent/commit/2570fa4ecb6a6cc72e308993d9dd9747eb053897))
+* **documentation-tools:** New internal `td-pretty-markdown` (name not final) component which leverages `md-checkbox`, `td-data-table`, `td-highlight` and `td-markdown` components to render GitHub markdown in a more visually attractive way in docs app. ([2570fa4ecb6a6cc72e308993d9dd9747eb053897](https://github.com/Teradata/covalent/commit/2570fa4ecb6a6cc72e308993d9dd9747eb053897))
+* **documentation-tools:** New internal `td-readme-loader` component which uses `http` and `pretty-markdown` to load `README.md` files simpler. ([2570fa4ecb6a6cc72e308993d9dd9747eb053897](https://github.com/Teradata/covalent/commit/2570fa4ecb6a6cc72e308993d9dd9747eb053897))
+* **layout:** Removed internal `TdLayoutService`. ([026520cc346721d72c815b0d09fbd469fd3f2ad5](https://github.com/Teradata/covalent/commit/026520cc346721d72c815b0d09fbd469fd3f2ad5))
+* **layout:** Removal of `(openMenu)` method since it not documented or needed in `td-layout-nav` and `td-layout-nav-list` ([026520cc346721d72c815b0d09fbd469fd3f2ad5](https://github.com/Teradata/covalent/commit/026520cc346721d72c815b0d09fbd469fd3f2ad5))
+* **loading:** Leverage `TemplatePortal` and `Overlay` from `@angular/material`. ([d87aa65f18af6081ebcff7fe21cb44ac9a0be00f](https://github.com/Teradata/covalent/commit/d87aa65f18af6081ebcff7fe21cb44ac9a0be00f))
+* **loading:** Separated code into creation (factory) and execution (service), and made `TdLoadingFactory` for internal usage only. ([d87aa65f18af6081ebcff7fe21cb44ac9a0be00f](https://github.com/Teradata/covalent/commit/d87aa65f18af6081ebcff7fe21cb44ac9a0be00f))
+* **loading:** Better error messages. ([d87aa65f18af6081ebcff7fe21cb44ac9a0be00f](https://github.com/Teradata/covalent/commit/d87aa65f18af6081ebcff7fe21cb44ac9a0be00f))
+* **tooling:** Fixed `ng lint` usage. ([e382f16bcb5c5530d0a0fc92d49a15e078352813](https://github.com/Teradata/covalent/commit/e382f16bcb5c5530d0a0fc92d49a15e078352813))
+* **serve:** Exclude spec test files when running `ng serve --aot`. ([2b9172eb653920e8cd7114f6ee751b0e43e20dfc](https://github.com/Teradata/covalent/pull/269/commits/2b9172eb653920e8cd7114f6ee751b0e43e20dfc)), closes [#267](https://github.com/Teradata/covalent/issues/267)
+
+
+
+# [0.10.2](https://github.com/Teradata/covalent/tree/v0.10.0) (2017-1-3)
+
+## Bug Fixes
+* **http:** `interceptors` instead of `inteceptors` typo in `HttpConfig`. closes [#233](https://github.com/Teradata/covalent/issues/233)
+
+
+
+# [0.10.1](https://github.com/Teradata/covalent/tree/v0.10.0) (2017-1-2)
+
+## Bug Fixes
+* **animations:** Depending on the tsconfig.json, setTimeout could be either window.setTimeout or NodeJS.setTimeout. ([1cd3e49c62a3cc8b03f3f153fc3bb554061e495e](https://github.com/Teradata/covalent/commit/1cd3e49c62a3cc8b03f3f153fc3bb554061e495e)), closes [#225](https://github.com/Teradata/covalent/issues/225)
+* **http:** `rxjs` upgrade caused concurrent request failure. ([31a60cd0e322f2ab9190325381c08b4872414caa](https://github.com/Teradata/covalent/commit/31a60cd0e322f2ab9190325381c08b4872414caa))
+
+
+
+# [0.10.0 Bedlington Cummerbund](https://github.com/Teradata/covalent/tree/v0.10.0) (2016-12-30)
+
+
+## Breaking Changes
+* **deploy:** Single core package. ([81901b23eca8e02330260b5831c64da3005a39fd](https://github.com/Teradata/covalent/commit/81901b23eca8e02330260b5831c64da3005a39fd)), closes [#166](https://github.com/Teradata/covalent/issues/166) and [#93](https://github.com/Teradata/covalent/issues/93)
+
+ - Created submodules of all core modules which are wrapped by one parent module CovalentCoreModule (`@covalent/core`)
+ - CovalentCommonModule
+ - CovalentChipsModule
+ - CovalentDataTableModule
+ - CovalentDialogsModule
+ - CovalentExpansionPanelModule
+ - CovalentFileModule
+ - CovalentJsonFormatterModule
+ - CovalentLayoutModule
+ - CovalentLoadingModule
+ - CovalentMediaModule
+ - CovalentMenuModule
+ - CovalentNofiticationsModule
+ - CovalentPagingModule
+ - CovalentSearchModule
+ - CovalentStepsModule
+
+ - Stand alone modules:
+ - CovalentHttpModule (`@covalent/http`)
+ - CovalentDynamicFormsModule (`@covalent/dynamic-forms`)
+ - CovalentHighlightModule (`@covalent/highlight`)
+ - CovalentMarkdownModule (`@covalent/markdown`)
+
+ - `markdown` is a separate module and its theme needs to be imported separatly `@import ~@covalent/markdown/markdown-theme'` and included `@include covalent-markdown-theme($theme);`
+ - `highlight` is a separate module and its theme needs to be imported separatly `@import ~@covalent/highlight/highlight-theme'` and included `@include covalent-highlight-theme();`
+
+ - `all-theme` and `platform.css` changed directories.
+
+ Before:
+
+ ```scss
+ `~@covalent/core/styles/platform.css`
+ `~@covalent/core/styles/theming/all-theme';`
+ ```
+
+ After:
+
+ ```scss
+ `@covalent/core/common/platform.css`
+ `~@covalent/core/theming/all-theme';`
+ ```
+
+* **http:** Path interceptors configuration. ([7db377e62254f6add6995065f09f4b5528bd0c16](https://github.com/Teradata/covalent/commit/7db377e62254f6add6995065f09f4b5528bd0c16)), closes [#194](https://github.com/Teradata/covalent/issues/194)
+
+ Before:
+
+ ```typescript
+ CovalentHttpModule.forRoot([Interceptor1, Interceptor2]),
+ ```
+
+ After:
+
+ ```typescript
+ const httpInterceptorProviders: Type[] = [
+ Interceptor1,
+ Interceptor2,
+ ...
+ ];
+ ...
+ imports: [
+ CovalentHttpModule.forRoot({
+ interceptors: [{
+ interceptor: Interceptor1, paths: ['**'],
+ }, {
+ interceptor: Interceptor2, paths: ['**'],
+ }],
+ }),
+ ...
+ ],
+ providers: [
+ httpInterceptorProviders,
+ ...
+ ],
+ ```
+
+* **steps:** (stepChange) event now returns the step objects instead of the step number. ([6486eb527ae845224a170b8c7dda2dc92a089c3a](https://github.com/Teradata/covalent/commit/6486eb527ae845224a170b8c7dda2dc92a089c3a))
+
+ Before:
+
+ ```typescript
+ export interface IStepChangeEvent {
+ newStep: number;
+ prevStep: number;
+ }
+ ```
+
+ After:
+
+ ```typescript
+ export interface IStepChangeEvent {
+ newStep: TdStepComponent;
+ prevStep: TdStepComponent;
+ }
+ ```
+
+* **layouts:** `logo` expects an `svgIcon` value now from an `MdIconRegistry` svg. (breaking change from `@angular/material`). ([6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15](https://github.com/Teradata/covalent/commit/6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15))
+
+ Before:
+
+ ```html
+
+ ```
+
+ After (once at any toplevel component):
+
+ ```typescript
+ import { DomSanitizer } from '@angular/platform-browser';
+ import { MdIconRegistry } from '@angular/material';
+ ...
+ ...
+ constructor(iconRegistry: MdIconRegistry, domSanitizer: DomSanitizer) {
+ iconRegistry.addSvgIconInNamespace('assets', 'icon1', domSanitizer.bypassSecurityTrustResourceUrl('/assets/route/to/icon1.svg'));
+ }
+ ```
+
+ ```html
+
+ ```
+
+* **charts (deprecated):** `CovalentChartModule` is being deprecated in favor of [ngx-charts](https://github.com/swimlane/ngx-charts) `@swimlane/ngx-charts`.
+
+
+## Bug Fixes
+* **search:** Use enter event instead of search event so it works in IE and firefox ([16b28a68fa0143f2e00e76199eb71c1ba949426d](https://github.com/Teradata/covalent/commit/16b28a68fa0143f2e00e76199eb71c1ba949426d))
+* **data-table:** Format columns correctly when displaying them. ([66ab3f6c02c6e70b404c3a6beb26d659390555be](https://github.com/Teradata/covalent/commit/66ab3f6c02c6e70b404c3a6beb26d659390555be)), closes [#187](https://github.com/Teradata/covalent/issues/187)
+* **data-table:** Handle undefined data array propertly. ([66ab3f6c02c6e70b404c3a6beb26d659390555be](https://github.com/Teradata/covalent/commit/66ab3f6c02c6e70b404c3a6beb26d659390555be))
+* **layouts:** Nav-list and manage-list removal of non-spec box-shadow. ([a61ff1d16aeec05cdd4737ef5f4d366f4fcd03ef](https://github.com/Teradata/covalent/commit/a61ff1d16aeec05cdd4737ef5f4d366f4fcd03ef))
+* **http:** Updated `module` to support AoT compilation. ([7db377e62254f6add6995065f09f4b5528bd0c16](https://github.com/Teradata/covalent/commit/7db377e62254f6add6995065f09f4b5528bd0c16)), closes [#195](https://github.com/Teradata/covalent/issues/195)
+* **paging:** Show proper range `0-0` when total is `0`. ([6403262e7e05cd54cf98928c165468f029976752](https://github.com/Teradata/covalent/commit/6403262e7e05cd54cf98928c165468f029976752))
+* **paging:** Able to re-navigate to page 1 when explicitly done with `navigateTo()`. ([6403262e7e05cd54cf98928c165468f029976752](https://github.com/Teradata/covalent/commit/6403262e7e05cd54cf98928c165468f029976752))
+* **file-upload:** Stop submit when enter is pressed for `file-upload`, `search` & `paging` inside a `form` element. ([3eb363873f11b5929655ec4c5ffa822a91fbc5e0](https://github.com/Teradata/covalent/commit/3eb363873f11b5929655ec4c5ffa822a91fbc5e0)), closes [#210](https://github.com/Teradata/covalent/issues/210)
+
+
+## Features
+* **docs:** Added `GETTING_STARTED.md`. ([48dcbc21f10d1a8233cb3835bc4fe20644a00a6d](https://github.com/Teradata/covalent/commit/48dcbc21f10d1a8233cb3835bc4fe20644a00a6d)), closes [#178](https://github.com/Teradata/covalent/issues/178)
+* **dialogs:** Better a11y ([f6bc8292538bfe0468ee698f23f9911ff3a5ddaf](https://github.com/Teradata/covalent/commit/f6bc8292538bfe0468ee698f23f9911ff3a5ddaf)), closes [#170](https://github.com/Teradata/covalent/issues/170)
+* **dialogs:** Exposed open/closeAll methods from MdDialog. ([f6bc8292538bfe0468ee698f23f9911ff3a5ddaf](https://github.com/Teradata/covalent/commit/f6bc8292538bfe0468ee698f23f9911ff3a5ddaf)), closes [#171](https://github.com/Teradata/covalent/issues/171)
+* **http:** Adding an extra parameter for a `transform` callback in the RESTService methods. ([d73badbe62e7ed5a81be9b3279325b5b46ffc266](https://github.com/Teradata/covalent/commit/d73badbe62e7ed5a81be9b3279325b5b46ffc266)), closes [#179](https://github.com/Teradata/covalent/issues/179)
+* **http:** Added onRequestError interceptor hook. ([d73badbe62e7ed5a81be9b3279325b5b46ffc266](https://github.com/Teradata/covalent/commit/d73badbe62e7ed5a81be9b3279325b5b46ffc266))
+* **http:** Request URL path interceptors. ([7db377e62254f6add6995065f09f4b5528bd0c16](https://github.com/Teradata/covalent/commit/7db377e62254f6add6995065f09f4b5528bd0c16)), closes [#194](https://github.com/Teradata/covalent/issues/194)
+* **data-table:** Added `selectAll` event when clicking select/deselect all checkbox. ([1d59af9a2def99eac1bf9dc8696efc00f974418c](https://github.com/Teradata/covalent/commit/1d59af9a2def99eac1bf9dc8696efc00f974418c)), closes [#172](https://github.com/Teradata/covalent/issues/172)
+* **data-table:** Support for nested object rendering. ([91ab4735df96d1cfa539c0ce8be8a25ff5cb3b4f](https://github.com/Teradata/covalent/commit/91ab4735df96d1cfa539c0ce8be8a25ff5cb3b4f)), closes [#189](https://github.com/Teradata/covalent/issues/189)
+* **data-table:** Improved efficiency by changing its change detection to `OnPush`. ([91ab4735df96d1cfa539c0ce8be8a25ff5cb3b4f](https://github.com/Teradata/covalent/commit/91ab4735df96d1cfa539c0ce8be8a25ff5cb3b4f))
+* **data-table:** Added `refresh()` method to explicitly throw a change detection check when the data or columns objects are updated internally. ([91ab4735df96d1cfa539c0ce8be8a25ff5cb3b4f](https://github.com/Teradata/covalent/commit/91ab4735df96d1cfa539c0ce8be8a25ff5cb3b4f))
+* **steps:** Support for ngFor and ngIf usage on td-step components and register/de-register steps automatically. ([6486eb527ae845224a170b8c7dda2dc92a089c3a](https://github.com/Teradata/covalent/commit/6486eb527ae845224a170b8c7dda2dc92a089c3a)), closes [#200](https://github.com/Teradata/covalent/issues/200)
+* **dependencies:** Upgrade to @angular@2.4.1 and @material@beta.1. ([6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15](https://github.com/Teradata/covalent/commit/6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15))
+* **deployment:** Initial AoT support. ([6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15](https://github.com/Teradata/covalent/commit/6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15)), closes [#149](https://github.com/Teradata/covalent/issues/149)
+* **paging:** Usage of `md-select` as `perPage` selection insteaf of `md-icon-button` and `md-menu`. ([63a0ca3d4acaebeb5b19eac826da0f8d2c4dfd1e](https://github.com/Teradata/covalent/commit/63a0ca3d4acaebeb5b19eac826da0f8d2c4dfd1e))
+* **layouts:** Added optional sticky footer (and footer-inner). ([59253bef91c354cb85ddd9f1d9622ec76241d13e](https://github.com/Teradata/covalent/commit/59253bef91c354cb85ddd9f1d9622ec76241d13e))
+
+ Usage:
+
+ ```html
+
+ ...
+
+ ```
+
+* **dynamic-forms:** Introducing `dynamic-forms` module. ([3eb363873f11b5929655ec4c5ffa822a91fbc5e0](https://github.com/Teradata/covalent/commit/3eb363873f11b5929655ec4c5ffa822a91fbc5e0)), closes [#8](https://github.com/Teradata/covalent/issues/8)
+
+ - Supported TdDynamicType
+
+ - TdDynamicType.Text (renders md-input-container input type="text")
+ - TdDynamicType.Number (renders md-input-container input type="number")
+ - TdDynamicType.Boolean (renders md-slide-toggle)
+ - TdDynamicType.Array (renders md-select)
+
+ - Supported TdDynamicElement
+
+ - TdDynamicElement.Input (renders md-input-container input type="text")
+ - TdDynamicElement.Textarea (renders md-input-container textarea)
+ - TdDynamicElement.Slider (renders md-slider)
+ - TdDynamicElement.SlideToggle (renders md-slide-toggle)
+ - TdDynamicElement.Checkbox (renders md-checkbox)
+ - TdDynamicElement.Select (renders md-select)
+
+* **notifications:** Introducing `notifications` module. ([746fe3caec62a77bc69b50a2fc0bfcf9b0a9a695](https://github.com/Teradata/covalent/commit/746fe3caec62a77bc69b50a2fc0bfcf9b0a9a695)), closes [#148](https://github.com/Teradata/covalent/issues/148)
+
+ Usage:
+
+ ```html
+
+ ... // could be an icon notifications or empty
+
+ ```
+
+* **notifications:** Added examples and demo for a `notifications` menu usage. ([746fe3caec62a77bc69b50a2fc0bfcf9b0a9a695](https://github.com/Teradata/covalent/commit/746fe3caec62a77bc69b50a2fc0bfcf9b0a9a695))
+
+
+## Internal
+* **dependencies:** Upgrade to `zone.js@^0.7.2` ([8d2d0845f47d5d8a67f78e81ac449c6013a7e4ab](https://github.com/Teradata/covalent/commit/8d2d0845f47d5d8a67f78e81ac449c6013a7e4ab))
+* **dependencies:** Upgrade to `rxjs@5.0.1`. ([6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15](https://github.com/Teradata/covalent/commit/6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15))
+* **dependencies:** Upgrade to `angular-cli@2.0.0-beta.24`. ([6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15](https://github.com/Teradata/covalent/commit/6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15))
+* **animations:** Added `collapse` animation and used in `steps` and `expansion-panel` ([fe0182285ffa505be42892c235eed295e2814e59](https://github.com/Teradata/covalent/commit/fe0182285ffa505be42892c235eed295e2814e59))
+* **security:** Sanitized and registered svg icons from assets into the `MdIconRegistry`. ([6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15](https://github.com/Teradata/covalent/commit/6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15))
+* **material:** Remove usage of deprecated `@angular/material` directives. ([6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15](https://github.com/Teradata/covalent/commit/6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15))
+* **scripts:** Make `npm run test` do an `ng test` with generated code coverage. ([6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15](https://github.com/Teradata/covalent/commit/6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15))
+* **docs:** Added animation transitions in doc route components. ([334edbdaa518a7e171b0e749ea8fb8c85ab83b09](https://github.com/Teradata/covalent/commit/334edbdaa518a7e171b0e749ea8fb8c85ab83b09))
+* **docs:** Updated version dependency in github docs. ([48dcbc21f10d1a8233cb3835bc4fe20644a00a6d](https://github.com/Teradata/covalent/commit/48dcbc21f10d1a8233cb3835bc4fe20644a00a6d)), closes [#178](https://github.com/Teradata/covalent/issues/178)
+
+
+## Code Health
+
+* **travis:** Fix to run unit tests in chrome 55 and travis CI ([de393fd091b1c312df096c5d326bfbe0cd367274](https://github.com/Teradata/covalent/commit/de393fd091b1c312df096c5d326bfbe0cd367274))
+* **http:** Added `RESTService` unit tests. ([d73badbe62e7ed5a81be9b3279325b5b46ffc266](https://github.com/Teradata/covalent/commit/d73badbe62e7ed5a81be9b3279325b5b46ffc266))
+* **http:** Added `HttpInterceptorService` unit tests. ([7db377e62254f6add6995065f09f4b5528bd0c16](https://github.com/Teradata/covalent/commit/7db377e62254f6add6995065f09f4b5528bd0c16))
+* **steps:** Added `TdStepsComponent` unit tests. ([6486eb527ae845224a170b8c7dda2dc92a089c3a](https://github.com/Teradata/covalent/commit/6486eb527ae845224a170b8c7dda2dc92a089c3a))
+* **dynamic-forms:** Added `TdDynamicFormsComponent` and `TdDynamicFormsService` unit tests. ([3eb363873f11b5929655ec4c5ffa822a91fbc5e0](https://github.com/Teradata/covalent/commit/3eb363873f11b5929655ec4c5ffa822a91fbc5e0))
+* **notifications:** Added `TdNotificationCountComponent` unit tests. ([746fe3caec62a77bc69b50a2fc0bfcf9b0a9a695](https://github.com/Teradata/covalent/commit/746fe3caec62a77bc69b50a2fc0bfcf9b0a9a695))
+
+
# [0.9.0 Pallettown Cummerbund](https://github.com/Teradata/covalent/tree/v0.9.0) (2016-11-21)
diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
index a4e65bd868..fbb7c87276 100644
--- a/docs/CONTRIBUTING.md
+++ b/docs/CONTRIBUTING.md
@@ -4,6 +4,7 @@ Make sure you have setup your environment based on the [Developer Guide](DEVELOP
### Development Guidelines
+* **Always ask before creating a PR.** To avoid duplication efforts, its better to discuss it with us first or create an issue.
* **All code must be reviewed via a pull request.** Before anything can be merged, it must be reviewed by at least 2 others.
* ** Use git flow processes.** Start a feature, release, or hotfix branch, and you should never commit and push directly to `master` or `develop`.
* **Squash commits into a single commit for your PR.** We want to keep a clean git history.
diff --git a/docs/DEVELOPER_GUIDE.md b/docs/DEVELOPER_GUIDE.md
index 02b2ee40a5..649cd9cfaf 100644
--- a/docs/DEVELOPER_GUIDE.md
+++ b/docs/DEVELOPER_GUIDE.md
@@ -13,7 +13,7 @@ The source has two parts, the platform and a documentation app.
/src/platform - Contains the platform assets
```
-## Adding a new platform component
+## Adding a new platform module
Add a new directory based on the name to `src/platform/[name]` and it should contain a folder structure that has the following:
@@ -25,8 +25,6 @@ Add a new directory based on the name to `src/platform/[name]` and it should con
* `package.json` - configurations used for npm to publish it (name[@covalent/name], version, dependencies, etc)
* `README.md` - readme file with documentation for github and npm registry.
-Then you will need to add a path `src/system-config.ts` under the library barrels that points to your new component directory, such as `'platform/[name]',`.
-
## Adding a new documentation component
You can use the `ng generate component components/[name]` and it will generate the new component stub in `src/app/components/[name]`.
diff --git a/docs/GETTING_STARTED.md b/docs/GETTING_STARTED.md
new file mode 100644
index 0000000000..63c5234e2e
--- /dev/null
+++ b/docs/GETTING_STARTED.md
@@ -0,0 +1,134 @@
+Get started with Covalent using the Angular CLI.
+
+See the [material2 getting started](https://github.com/angular/material2/blob/master/guides/getting-started.md) for instructions.
+
+## Install the CLI
+
+ ```bash
+ npm install -g angular-cli
+ ```
+
+## Create a new project
+
+ ```bash
+ ng new my-project
+ ```
+
+The new command creates a project with a build system for your Angular app.
+
+## Install Covalent Core module
+
+```bash
+npm install --save @covalent/core
+## (optional) Additional Covalent Modules installs
+npm install --save @covalent/http @covalent/highlight @covalent/markdown @covalent/dynamic-forms
+```
+
+## Import the Covalent Core NgModule
+
+**src/app/app.module.ts**
+```ts
+import { CovalentCoreModule } from '@covalent/core';
+// (optional) Additional Covalent Modules imports
+import { CovalentHttpModule } from '@covalent/http';
+import { CovalentHighlightModule } from '@covalent/highlight';
+import { CovalentMarkdownModule } from '@covalent/markdown';
+import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms';
+// other imports
+@NgModule({
+ imports: [
+ CovalentCoreModule.forRoot(),
+ // (optional) Additional Covalent Modules imports
+ CovalentHttpModule.forRoot(),
+ CovalentHighlightModule.forRoot(),
+ CovalentMarkdownModule.forRoot(),
+ CovalentDynamicFormsModule.forRoot(),
+ ],
+ ...
+})
+export class AppModule { }
+```
+
+## Include the core and theme styles:
+This is **required** to apply all of the core and theme styles to your application.
+
+See the [material2 theming guide](https://github.com/angular/material2/blob/master/guides/theming.md) for instructions.
+
+A theme file is a simple Sass file that defines your palettes and passes them to mixins that output the corresponding styles. A typical theme file will look something like this:
+
+```css
+@import '~@angular/material/core/theming/all-theme';
+@import '~@covalent/core/theming/all-theme';
+
+// (optional) Additional themes
+@import '~@covalent/markdown/markdown-theme';
+@import '~@covalent/highlight/highlight-theme';\
+
+@include md-core();
+
+$primary: md-palette($md-orange, 800);
+$accent: md-palette($md-light-blue, 600, A100, A400);
+
+$warn: md-palette($md-red, 600);
+
+$theme: md-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+@include covalent-theme($theme);
+
+// (optional) Additional themes
+@include covalent-markdown-theme($theme);
+@include covalent-highlight-theme();
+```
+
+You only need this single Sass file; you do not need to use Sass to style the rest of your app.
+
+If you are using the Angular CLI, support for compiling Sass to css is built-in; you only have to add a new entry to the "styles" list in angular-cli.json pointing to the theme file (e.g., themes.scss).
+
+If you're not using the Angular CLI, you can use any existing Sass tooling to build the file (such as gulp-sass or grunt-sass). The simplest approach is to use the node-sass CLI; you simply run:
+
+node-sass src/themes.scss dist/themes.css
+and then include the output file in your application.
+
+The theme file can be concatenated and minified with the rest of the application's css.
+
+## Configuring SystemJS
+If your project is using SystemJS for module loading, you will need to add `@covalent/core`
+to the SystemJS configuration:
+
+```js
+System.config({
+ // existing configuration options
+ map: {
+ ...,
+ '@covalent/core': 'npm:@covalent/core/core.umd.js',
+ // (optional) Additional configuration options
+ '@covalent/http': 'npm:@covalent/http/http.umd.js',
+ '@covalent/highlight': 'npm:@covalent/highlight/highlight.umd.js',
+ '@covalent/markdown': 'npm:@covalent/markdown/markdown.umd.js',
+ '@covalent/dynamic-forms': 'npm:@covalent/dynamic-forms/dynamic-forms.umd.js'
+ }
+});
+```
+
+### Using platform.scss:
+
+- The core covalent styles need to be included either in your `index.html` or as a new entry to the "styles" list in angular-cli.json
+load the Material Design font in your `index.html`.
+
+**src/index.html**
+```html
+
+```
+
+or
+
+**angular-cli.json**
+```json
+"styles": [
+ "../node_modules/@covalent/core/common/platform.scss"
+],
+```
+
+## Sample Covalent projects
+- [Covalent Quickstart](https://github.com/Teradata/covalent-quickstart)
\ No newline at end of file
diff --git a/docs/RELEASE.md b/docs/RELEASE.md
index f90c4e5ad1..e372a7aed5 100644
--- a/docs/RELEASE.md
+++ b/docs/RELEASE.md
@@ -11,7 +11,7 @@ Execute `npm run start-release -- [version]` to start the automatic release proc
1. Creating a `release/v[version]` branch using `git flow release`.
2. Bumping its version to [version] release and commiting bumped version files.
3. Publishing `release/v[version]` branch into repository.
- 4. Executes `npm run tslint` and `npm run test`.
+ 4. Executes `npm run lint` and `npm run test`.
The release is published in case there is a need for any additional tests, version fixes or bug fixes. This can be added before it is actually released.
diff --git a/docs/UPGRADE.md b/docs/UPGRADE.md
new file mode 100644
index 0000000000..767148cf84
--- /dev/null
+++ b/docs/UPGRADE.md
@@ -0,0 +1,26 @@
+## Upgrade from 0.10 to 1.0.0-beta.1
+
+Upgraded dependencies:
+ - angular@2.4.1 to 2.4.5
+ - angular-cli@1.0.0-beta.24 to 1.0.0-beta.26
+ - typescript@2.0.10 to 2.1.5
+
+[1.0.0-beta.1 Upgrade Steps](https://github.com/Teradata/covalent-quickstart/pull/34/commits) and [Changelog](https://github.com/Teradata/covalent/blob/v1.0.0-beta.1/docs/CHANGELOG.md#100-beta1-purple-rain-2017-01-30)
+
+## Upgrade from 0.9 to 0.10
+
+Upgraded dependencies:
+ - angular@2.2.1 to 2.4.1
+ - material@2.0.0-alpha.10 to 2.0.0-beta.1
+ - angular-cli@1.0.0-beta.19-3 to 1.0.0-beta.24
+
+[0.10 Upgrade Steps](https://github.com/Teradata/covalent-quickstart/pull/26/commits) and [Changelog](https://github.com/Teradata/covalent/blob/v0.10.0/docs/CHANGELOG.md#0100-bedlington-cummerbund-2016-12-30)
+
+## Upgrade from 0.8 to 0.9
+
+Upgraded dependencies:
+ - angular@2.0.0 to 2.2.1
+ - material@2.0.0-alpha.9-3 to 2.0.0-alpha-10
+ - angular-cli@1.0.0-beta.15 to 1.0.0-beta.19-3
+
+[0.9 Upgrade Steps](https://github.com/Teradata/covalent-quickstart/pull/20/commits) and [Changelog](https://github.com/Teradata/covalent/blob/develop/docs/CHANGELOG.md#090-pallettown-cummerbund-2016-11-21)
diff --git a/karma.conf.js b/karma.conf.js
index f7d18105f7..7342d7e5ef 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -8,6 +8,7 @@ module.exports = function (config) {
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
+ require('karma-firefox-launcher'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma')
],
@@ -34,6 +35,9 @@ module.exports = function (config) {
config: './angular-cli.json',
environment: 'dev'
},
+ mime: {
+ 'text/x-typescript': ['ts','tsx']
+ },
reporters: ['progress', 'karma-remap-istanbul'],
port: 9876,
colors: true,
diff --git a/package.json b/package.json
index a10e425bb9..04a0d24bdc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "covalent",
- "version": "0.9.0",
+ "version": "1.0.0-beta.1",
"private": true,
"description": "Teradata UI Platform built on Angular Material 2",
"keywords": [
@@ -11,19 +11,22 @@
"scripts": {
"e2e": "protractor",
"e2e-test": "protractor ./protractor.conf.js",
- "tslint": "tslint -c ./tslint.json \"./src/**/*.ts\" -e \"./src/**/typings.d.ts\" -e \"./src/environments/**\"",
+ "lint": "tslint --format codeFrame -c ./tslint.json \"./src/**/*.ts\" -e \"./src/**/typings.d.ts\" -e \"./src/environments/**\"",
"postinstall": "webdriver-manager update",
+ "reinstall": "rm -rf node_modules tmp deploy dist && npm i",
"webdriver-update": "bash ./node_modules/.bin/webdriver-manager update",
- "pretest": "rm -rf ./dist && ng build",
- "test": "npm run karma",
- "karma": "karma start ./karma.conf.js --single-run",
+ "test": "ng test --code-coverage --single-run",
+ "coverage-win": "start chrome ./coverage/index.html",
+ "coverage-mac": "open -a \"Google Chrome\" coverage/index.html",
+ "coveralls": "cat ./coverage/coverage.lcov | node ./node_modules/coveralls/bin/coveralls.js",
"bump-dev": "gulp bump-version",
"bump-patch": "gulp bump-version --ver patch",
"bump-minor": "gulp bump-version --ver minor",
"bump-major": "gulp bump-version --ver major",
+ "aot": "./node_modules/.bin/ngc -p deploy/platform/tsconfig-aot.json",
"build": "bash scripts/build-release",
"publish": "bash scripts/publish-release",
- "ghpages-deploy": "bash scripts/ghpages-deploy",
+ "ghpages-deploy": "./node_modules/.bin/ng build --base-href /covalent/ --aot -prod && bash scripts/ghpages-deploy",
"start-release": "bash scripts/start-release",
"finish-release": "bash scripts/finish-release"
},
@@ -46,55 +49,57 @@
"Ed Morales ",
"Jason Weaver ",
"Jeremy Wilken ",
- "Jeremy Smartt "
+ "Jeremy Smartt ",
+ "Ilsun Park "
],
"dependencies": {
- "@angular/common": "^2.2.1",
- "@angular/compiler": "^2.2.1",
- "@angular/core": "^2.2.1",
- "@angular/forms": "^2.2.1",
- "@angular/http": "^2.2.1",
- "@angular/material": "2.0.0-alpha.10",
- "@angular/platform-browser": "^2.2.1",
- "@angular/platform-browser-dynamic": "^2.2.1",
- "@angular/platform-server": "^2.2.1",
- "@angular/router": "^3.2.1",
+ "@angular/common": "^2.4.4",
+ "@angular/compiler": "^2.4.4",
+ "@angular/core": "^2.4.4",
+ "@angular/forms": "^2.4.4",
+ "@angular/http": "^2.4.4",
+ "@angular/material": "2.0.0-beta.1",
+ "@angular/platform-browser": "^2.4.4",
+ "@angular/platform-browser-dynamic": "^2.4.4",
+ "@angular/platform-server": "^2.4.4",
+ "@angular/router": "^3.4.4",
+ "@swimlane/ngx-charts": "^3.1.2",
+ "moment": "^2.17.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
- "highlight.js": "9.6.0",
- "rxjs": "5.0.0-beta.12",
- "showdown": "1.4.2",
- "zone.js": "^0.6.25",
- "d3": "^4.2.1"
+ "highlight.js": "9.9.0",
+ "rxjs": "^5.0.1",
+ "showdown": "1.6.0",
+ "zone.js": "^0.7.2",
+ "d3": "^4.4.0"
},
"devDependencies": {
- "@angular/compiler-cli": "^2.2.1",
+ "@angular/compiler-cli": "^2.4.4",
"@types/hammerjs": "^2.0.30",
"@types/jasmine": "^2.2.31",
"@types/node": "^6.0.34",
"@types/selenium-webdriver": "^2.52.0",
- "angular-cli": "1.0.0-beta.19-3",
- "codelyzer": "~0.0.26",
- "awesome-typescript-loader": "^2.2.4",
- "ember-cli-inject-live-reload": "1.4.0",
+ "angular-cli": "1.0.0-beta.26",
+ "codelyzer": "2.0.0-beta.4",
+ "coveralls": "^2.11.15",
"glob": "^6.0.4",
"gulp": "3.9.1",
"gulp-bump": "2.1.0",
"gulp-help": "1.6.1",
"gulp-if": "2.0.1",
- "gulp-sass": "2.3.2",
+ "gulp-sass": "3.1.0",
"gulp-sourcemaps": "1.6.0",
- "gulp-typescript": "3.0.1",
+ "gulp-typescript": "3.1.4",
"gulp-util": "3.0.7",
"jasmine-core": "^2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
- "karma-jasmine": "^1.0.2",
- "karma-remap-istanbul": "^0.2.1",
"karma-firefox-launcher": "^1.0.0",
+ "karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "1.0.1",
+ "karma-remap-istanbul": "^0.2.1",
"merge2": "1.0.2",
"node-sass": "3.8.0",
"phantomjs-prebuilt": "2.1.7",
@@ -106,7 +111,7 @@
"sass-loader": "^4.0.2",
"semver": "5.2.0",
"ts-node": "1.2.1",
- "tslint": "^3.15.1",
- "typescript": "2.0.2"
+ "tslint": "^4.3.1",
+ "typescript": "2.1.5"
}
-}
+}
\ No newline at end of file
diff --git a/public/.npmignore b/public/.npmignore
index e69de29bb2..84d292728a 100644
--- a/public/.npmignore
+++ b/public/.npmignore
@@ -0,0 +1,4 @@
+# compiled aot output
+*.ngsummary.json
+*.ngfactory.ts
+*.shim.ngstyle.ts
\ No newline at end of file
diff --git a/scripts/build-release b/scripts/build-release
index 2886adbb60..d64750d128 100644
--- a/scripts/build-release
+++ b/scripts/build-release
@@ -5,10 +5,20 @@ rm -rf ./deploy
# Perform a build.
gulp build
-echo "Platform compiled..."
+echo "SASS compiled..."
+
+# Prepare for aot
+gulp prepare-aot
+echo "Preparing files for AoT build"
+
+# AoT compilation
+npm run aot
+echo "Compiled TS and generated *.metadata.json files..."
+
# Inline the css and html into the component files.
gulp inline-resource-files
-echo "Files inlined..."
+echo "Resources inlined..."
+
# Bundle
gulp rollup-code
echo "Bundled..."
diff --git a/scripts/build.js b/scripts/build.js
index 542f57ef10..6111f30574 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -2,8 +2,7 @@
var gulp = require('gulp-help')(require('gulp'));
-gulp.task('build', 'Compile the code', [
- 'compile-ts',
+gulp.task('build', 'Compile the SASS and move required files', [
'compile-sass',
'move-required-files'
]);
diff --git a/scripts/compile-sass.js b/scripts/compile-sass.js
index c567c4af48..d6dd9b7cd8 100644
--- a/scripts/compile-sass.js
+++ b/scripts/compile-sass.js
@@ -2,6 +2,7 @@
var gulp = require('gulp-help')(require('gulp'));
var sass = require('gulp-sass');
+var path = require("path");
var sourcemaps = require('gulp-sourcemaps');
var config = require('../build.conf');
@@ -10,7 +11,14 @@ gulp.task('compile-sass', 'Build the module styles', function() {
.src(config.paths.styles)
//.pipe(sourcemaps.init()) // add later on when not using relative routes for node_modules scss
.pipe(sass({
- errLogToConsole: true
+ errLogToConsole: true,
+ importer: function(url, prev, done) {
+ if (url.indexOf('~') === 0) {
+ url = 'node_modules/' + url.substring(1, url.length);
+ return {file: path.relative(path.dirname(prev), url)};
+ }
+ return {file: url};
+ }
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('deploy/'));
diff --git a/scripts/compile-ts.js b/scripts/compile-ts.js
deleted file mode 100644
index d1b7439a7b..0000000000
--- a/scripts/compile-ts.js
+++ /dev/null
@@ -1,41 +0,0 @@
-'use strict';
-
-var gulp = require('gulp-help')(require('gulp'));
-var sourcemaps = require('gulp-sourcemaps');
-var ts = require('gulp-typescript');
-var config = require('../build.conf');
-var merge = require('merge2');
-
-var tsProject = ts.createProject({
- declaration: true,
- emitDecoratorMetadata: true,
- experimentalDecorators: true,
- mapRoot: "./",
- lib: ["es6", "dom"],
- module: "es6",
- moduleResolution: "node",
- noEmitOnError: true,
- noImplicitAny: false,
- target: "ES5",
- typescript: require('typescript'),
- typeRoots: [
- "../node_modules/@types"
- ],
- types: [
- "hammerjs"
- ]
- });
-
-gulp.task('compile-ts', 'Build the UDA scripts', function() {
- var tsResult = gulp
- .src(config.paths.tsfiles)
- .pipe(sourcemaps.init())
- .pipe(tsProject());
-
- return merge(tsResult.dts
- .pipe(gulp.dest('deploy/')),
- tsResult.js
- .pipe(sourcemaps.write('.'))
- .pipe(gulp.dest('deploy/'))
- );
-});
diff --git a/scripts/ghpages-deploy b/scripts/ghpages-deploy
index a26c8b34c2..9ffc745c32 100644
--- a/scripts/ghpages-deploy
+++ b/scripts/ghpages-deploy
@@ -1,10 +1,4 @@
#!/bin/bash
-echo 'Checking out develop branch to base deployment from it.'
-git checkout develop
-
-echo 'Started building process.'
-ng build -prod
-
git branch -f gh-pages
git checkout gh-pages
echo 'Created and Checked out gh-pages branch'
@@ -12,7 +6,6 @@ echo 'Created and Checked out gh-pages branch'
git reset --hard origin/develop
cp -r dist/* .
-sed -i '' 's:
-
- {{item.icon}} {{item.title}}
-
+
+
+
+ {{item.icon}} {{item.title}}
+
+
+
\ No newline at end of file
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index c3e100c3a0..494047a124 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -3,8 +3,4 @@
// :host /deep/ lets you travel down the Shadow DOM tree to change web component styles
:host /deep/ {
- // md-divider has a bug in angular-material that doesn't apply color
- md-divider {
- border-top-color: rgba(black, 0.12);
- }
}
\ No newline at end of file
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
deleted file mode 100644
index eea1a340e5..0000000000
--- a/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import {
- TestBed,
- inject,
- async,
- ComponentFixture,
-} from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { XHRBackend, Response, ResponseOptions } from '@angular/http';
-import { MockBackend } from '@angular/http/testing';
-import { CovalentCoreModule } from '../platform/core';
-import { DocsAppComponent } from './app.component';
-
-describe('Component: App', () => {
-
- let generalResponses: Map = new Map();
- generalResponses.set('app/assets/icons/teradata.svg', new Response(new ResponseOptions({
- status: 200, body: '',
- })));
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- imports: [
- CovalentCoreModule.forRoot(),
- RouterTestingModule,
- ],
- declarations: [
- DocsAppComponent,
- ],
- providers: [
- MockBackend,
- { provide: XHRBackend, useExisting: MockBackend },
- ],
- });
- TestBed.compileComponents();
- }));
-
- it('should create the component', async(inject([MockBackend], (mockBackend: MockBackend) => {
- let responses: Map = new Map(generalResponses);
- mockBackend.connections.subscribe((connection: any) => {
- connection.mockRespond(responses.get(connection.request.url));
- });
-
- let fixture: ComponentFixture = TestBed.createComponent(DocsAppComponent);
- let testComponent: DocsAppComponent = fixture.debugElement.componentInstance;
- let element: HTMLElement = fixture.nativeElement;
-
- expect(element.querySelector('[sidenavTitle="Covalent"]')).toBeTruthy();
- fixture.detectChanges();
- fixture.whenStable().then(() => {
- expect(element.querySelectorAll('md-nav-list[menu-items] a[md-list-item]').length)
- .toBe(testComponent.routes.length);
- });
- })));
-});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 83f111a571..0154d8fc94 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,9 +1,11 @@
import { Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MdIconRegistry } from '@angular/material';
@Component({
selector: 'docs-covalent',
- templateUrl: 'app.component.html',
- styleUrls: ['app.component.scss'],
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.scss'],
})
export class DocsAppComponent {
@@ -29,4 +31,22 @@ export class DocsAppComponent {
title: 'Components & Addons',
},
];
+
+ constructor(private _iconRegistry: MdIconRegistry,
+ private _domSanitizer: DomSanitizer) {
+ this._iconRegistry.addSvgIconInNamespace('assets', 'teradata',
+ this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/teradata.svg'));
+ this._iconRegistry.addSvgIconInNamespace('assets', 'github',
+ this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/github.svg'));
+ this._iconRegistry.addSvgIconInNamespace('assets', 'covalent',
+ this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/covalent.svg'));
+ this._iconRegistry.addSvgIconInNamespace('assets', 'teradata-ux',
+ this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/teradata-ux.svg'));
+ this._iconRegistry.addSvgIconInNamespace('assets', 'appcenter',
+ this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/appcenter.svg'));
+ this._iconRegistry.addSvgIconInNamespace('assets', 'listener',
+ this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/listener.svg'));
+ this._iconRegistry.addSvgIconInNamespace('assets', 'querygrid',
+ this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/querygrid.svg'));
+ }
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 323d7d1efc..f7ea6a1867 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,17 +9,14 @@ import { LayoutsModule } from './components/layouts/';
import { StyleGuideModule } from './components/style-guide/';
import { appRoutes, appRoutingProviders } from './app.routes';
-import { CovalentCoreModule, TD_LOADING_ENTRY_COMPONENTS } from '../platform/core';
-import { CovalentFileModule } from '../platform/file-upload';
+import { CovalentCoreModule } from '../platform/core';
import { CovalentHighlightModule } from '../platform/highlight';
import { CovalentHttpModule } from '../platform/http';
import { CovalentMarkdownModule } from '../platform/markdown';
-import { CovalentJsonFormatterModule } from '../platform/json-formatter';
-import { CovalentChipsModule } from '../platform/chips';
import { CovalentChartsModule } from '../platform/charts';
-import { CovalentDataTableModule } from '../platform/data-table';
-import { CovalentPagingModule } from '../platform/paging';
-import { CovalentSearchModule } from '../platform/search';
+import { CovalentDynamicFormsModule } from '../platform/dynamic-forms';
+
+import { GitHubService } from './services';
@NgModule({
declarations: [
@@ -33,22 +30,18 @@ import { CovalentSearchModule } from '../platform/search';
LayoutsModule,
StyleGuideModule,
CovalentCoreModule.forRoot(),
- CovalentFileModule.forRoot(),
CovalentHttpModule.forRoot(),
CovalentHighlightModule.forRoot(),
CovalentMarkdownModule.forRoot(),
- CovalentJsonFormatterModule.forRoot(),
- CovalentChipsModule.forRoot(),
CovalentChartsModule.forRoot(),
- CovalentDataTableModule.forRoot(),
- CovalentPagingModule.forRoot(),
- CovalentSearchModule.forRoot(),
+ CovalentDynamicFormsModule.forRoot(),
appRoutes,
], // modules needed to run this module
providers: [
appRoutingProviders,
+ GitHubService,
], // additional providers needed for this module
- entryComponents: [ TD_LOADING_ENTRY_COMPONENTS ],
+ entryComponents: [ ],
bootstrap: [ DocsAppComponent ],
})
export class AppModule {}
diff --git a/src/app/components/components/charts/charts.component.ts b/src/app/components/components/charts/charts.component.ts
index ed76b3e992..d51ee1c9a1 100644
--- a/src/app/components/components/charts/charts.component.ts
+++ b/src/app/components/components/charts/charts.component.ts
@@ -1,12 +1,18 @@
-import { Component} from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
+
+import { slideInDownAnimation } from '../../../app.animations';
@Component({
selector: 'charts-demo',
- styleUrls: ['charts.component.scss'],
- templateUrl: 'charts.component.html',
+ styleUrls: ['./charts.component.scss'],
+ templateUrl: './charts.component.html',
+ animations: [slideInDownAnimation],
})
export class ChartsDemoComponent {
+ @HostBinding('@routeAnimation') routeAnimation: boolean = true;
+ @HostBinding('class.td-route-animation') classAnimation: boolean = true;
+
chartsAttr: Object[] = [{
description: 'Sets the Chart Title',
name: 'title?',
diff --git a/src/app/components/components/chips/chips.component.html b/src/app/components/components/chips/chips.component.html
index d8aec4c62f..b9ae016a41 100644
--- a/src/app/components/components/chips/chips.component.html
+++ b/src/app/components/components/chips/chips.component.html
@@ -71,10 +71,10 @@ Setup:
Import the [CovalentChipsModule] using the forRoot() method in your NgModule:
-
+
+
+ Core Components
-
- {{item.icon}}
- {{item.title}}
- {{item.description}}
-
- {{item.icon}}
+ {{item.title}}
+ {{item.description}}
+
+ Optional Components
+
+
+ {{item.icon}}
+ {{item.title}}
+ {{item.description}}
+
+ External Components
+
+
+ {{item.icon}}
+ {{item.title}}
+ {{item.description}}
+
+
-
+
Covalent Components & Addons
diff --git a/src/app/components/components/components.component.ts b/src/app/components/components/components.component.ts
index b9cfb1dca1..1fa5a8857d 100644
--- a/src/app/components/components/components.component.ts
+++ b/src/app/components/components/components.component.ts
@@ -1,11 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding, AfterViewInit } from '@angular/core';
+import { TdMediaService } from '@covalent/core';
+
+import { fadeAnimation } from '../../app.animations';
@Component({
selector: 'app-components',
- styleUrls: ['components.component.scss'],
- templateUrl: 'components.component.html',
+ styleUrls: ['./components.component.scss'],
+ templateUrl: './components.component.html',
+ animations: [fadeAnimation],
})
-export class ComponentsComponent {
+export class ComponentsComponent implements AfterViewInit {
+
+ @HostBinding('@routeAnimation') routeAnimation: boolean = true;
+ @HostBinding('class.td-route-animation') classAnimation: boolean = true;
items: Object[] = [{
description: 'Components, Directives, Pipes & more',
@@ -52,31 +59,21 @@ export class ComponentsComponent {
icon: 'grid_on',
route: 'data-table',
title: 'Data Table',
- }, {
- description: 'Highlighting your code snippets',
- icon: 'code',
- route: 'syntax-highlighting',
- title: 'Syntax Highlighting',
}, {
description: 'JSON object tree with collapsible nodes',
icon: 'format_indent_increase',
route: 'json-formatter',
title: 'JSON Formatter',
- }, {
- description: 'Parse markdown code',
- icon: 'chrome_reader_mode',
- route: 'markdown',
- title: 'Markdown',
- }, {
- description: 'Responsive Charts',
- icon: 'show_chart',
- route: 'charts',
- title: 'Charts',
}, {
description: 'Paging for lists and tables',
icon: 'swap_horiz',
route: 'paging',
title: 'Paging',
+ }, {
+ description: 'Notification count & menu',
+ icon: 'notifications',
+ route: 'notifications',
+ title: 'Notifications',
}, {
description: 'Search and filter items',
icon: 'search',
@@ -87,11 +84,6 @@ export class ComponentsComponent {
icon: 'devices',
route: 'media',
title: 'Media Queries',
- }, {
- description: 'Http wrappers and helpers',
- icon: 'http',
- route: 'http',
- title: 'Http',
}, {
description: 'Core directives & utilities',
icon: 'wb_iridescent',
@@ -104,4 +96,44 @@ export class ComponentsComponent {
title: 'Pipes',
}];
+ optional: Object[] = [{
+ description: 'Highlighting your code snippets',
+ icon: 'code',
+ route: 'syntax-highlighting',
+ title: 'Syntax Highlighting',
+ }, {
+ description: 'Parse markdown code',
+ icon: 'chrome_reader_mode',
+ route: 'markdown',
+ title: 'Markdown',
+ }, {
+ description: 'Build forms from a JS object',
+ icon: 'format_align_center',
+ route: 'dynamic-forms',
+ title: 'Dynamic Forms',
+ }, {
+ description: 'Http wrappers and helpers',
+ icon: 'http',
+ route: 'http',
+ title: 'HTTP Service',
+ }, {
+ description: 'Simple responsive charts',
+ icon: 'show_chart',
+ route: 'charts',
+ title: 'TD Charts',
+ }];
+
+ external: Object[] = [{
+ description: 'Declarative D3 framework for ng2',
+ icon: 'insert_chart',
+ route: 'ngx-charts',
+ title: 'NGX-Charts',
+ }];
+
+ constructor(public media: TdMediaService) {}
+
+ ngAfterViewInit(): void {
+ // broadcast to all listener observables when loading the page
+ this.media.broadcast();
+ }
}
diff --git a/src/app/components/components/components.module.ts b/src/app/components/components/components.module.ts
index 4f805963d5..21fdb86ec3 100644
--- a/src/app/components/components/components.module.ts
+++ b/src/app/components/components/components.module.ts
@@ -18,21 +18,24 @@ import { DialogsDemoComponent } from './dialogs/dialogs.component';
import { DirectivesComponent } from './directives/directives.component';
import { PipesComponent } from './pipes/pipes.component';
import { ChartsDemoComponent } from './charts/charts.component';
+import { NgxChartsDemoComponent } from './ngx-charts/ngx-charts.component';
import { DataTableDemoComponent } from './data-table/data-table.component';
import { PagingDemoComponent } from './paging/paging.component';
import { SearchDemoComponent } from './search/search.component';
-import { MaterialComponentsComponent } from './material-components/material-components.component';
+import { DynamicFormsDemoComponent } from './dynamic-forms/dynamic-forms.component';
+import { MaterialComponentsComponent, DialogComponent } from './material-components/material-components.component';
+import { NotificationsDemoComponent } from './notifications/notifications.component';
+
+// External Dependencies
+import { NgxChartsModule } from '@swimlane/ngx-charts';
import { CovalentCoreModule } from '../../../platform/core';
-import { CovalentFileModule } from '../../../platform/file-upload';
import { CovalentHighlightModule } from '../../../platform/highlight';
import { CovalentMarkdownModule } from '../../../platform/markdown';
-import { CovalentJsonFormatterModule } from '../../../platform/json-formatter';
-import { CovalentChipsModule } from '../../../platform/chips';
import { CovalentChartsModule } from '../../../platform/charts';
-import { CovalentDataTableModule } from '../../../platform/data-table';
-import { CovalentPagingModule } from '../../../platform/paging';
-import { CovalentSearchModule } from '../../../platform/search';
+import { CovalentDynamicFormsModule } from '../../../platform/dynamic-forms';
+
+import { DocumentationToolsModule } from '../../documentation-tools';
@NgModule({
declarations: [
@@ -55,20 +58,23 @@ import { CovalentSearchModule } from '../../../platform/search';
DataTableDemoComponent,
PagingDemoComponent,
SearchDemoComponent,
+ DynamicFormsDemoComponent,
MaterialComponentsComponent,
+ DialogComponent,
+ NotificationsDemoComponent,
+ // External Dependencies
+ NgxChartsDemoComponent,
],
imports: [
CovalentCoreModule.forRoot(),
- CovalentFileModule.forRoot(),
CovalentHighlightModule.forRoot(),
CovalentMarkdownModule.forRoot(),
- CovalentJsonFormatterModule.forRoot(),
- CovalentChipsModule.forRoot(),
CovalentChartsModule.forRoot(),
- CovalentDataTableModule.forRoot(),
- CovalentPagingModule.forRoot(),
- CovalentSearchModule.forRoot(),
+ CovalentDynamicFormsModule.forRoot(),
+ DocumentationToolsModule.forRoot(),
componentsRoutes,
+ NgxChartsModule,
],
+ entryComponents: [ DialogComponent ],
})
export class ComponentsModule {}
diff --git a/src/app/components/components/components.routes.ts b/src/app/components/components/components.routes.ts
index 1e7df13da4..c1b3e1893c 100644
--- a/src/app/components/components/components.routes.ts
+++ b/src/app/components/components/components.routes.ts
@@ -16,10 +16,13 @@ import { DialogsDemoComponent } from './dialogs/dialogs.component';
import { DirectivesComponent } from './directives/directives.component';
import { PipesComponent } from './pipes/pipes.component';
import { ChartsDemoComponent } from './charts/charts.component';
+import { NgxChartsDemoComponent } from './ngx-charts/ngx-charts.component';
import { DataTableDemoComponent } from './data-table/data-table.component';
import { PagingDemoComponent } from './paging/paging.component';
import { SearchDemoComponent } from './search/search.component';
+import { DynamicFormsDemoComponent } from './dynamic-forms/dynamic-forms.component';
import { MaterialComponentsComponent } from './material-components/material-components.component';
+import { NotificationsDemoComponent } from './notifications/notifications.component';
const routes: Routes = [{
children: [{
@@ -73,12 +76,21 @@ const routes: Routes = [{
}, {
component: ChartsDemoComponent,
path: 'charts',
+ }, {
+ component: NgxChartsDemoComponent,
+ path: 'ngx-charts',
}, {
component: DataTableDemoComponent,
path: 'data-table',
}, {
component: PagingDemoComponent,
path: 'paging',
+ }, {
+ component: NotificationsDemoComponent,
+ path: 'notifications',
+ }, {
+ component: DynamicFormsDemoComponent,
+ path: 'dynamic-forms',
},
],
component: ComponentsComponent,
diff --git a/src/app/components/components/data-table/data-table.component.html b/src/app/components/components/data-table/data-table.component.html
index b30455c5f8..7403151e9e 100644
--- a/src/app/components/components/data-table/data-table.component.html
+++ b/src/app/components/components/data-table/data-table.component.html
@@ -6,7 +6,7 @@
Custom Data Table
with custom headings, columns, and inline editing
+
Demo
@@ -25,7 +25,7 @@ with custom headings, columns, and inline editing
- {{row[column.name]}}
+ {{column.format ? column.format(row[column.name]) : row[column.name]}}
@@ -51,7 +51,7 @@ with custom headings, columns, and inline editing
- { {row[column.name]}}
+ { {column.format ? column.format(row[column.name]) : row[column.name]}}
@@ -60,8 +60,7 @@ with custom headings, columns, and inline editing
Typescript:
with custom headings, columns, and inline editing
{ name: 'price', label 'Price (US$)', numeric: true, format: v => v.toFixed(2) },
];
- constructor(private _dialogService: TdDialogService,
- private _viewContainerRef: ViewContainerRef) {}
+ constructor(private _dialogService: TdDialogService) {}
openPrompt(row: any, name: string): void {
this._dialogService.openPrompt({
message: 'Enter comment?',
value: row[name],
- viewContainerRef: this._viewContainerRef,
}).afterClosed().subscribe((value: any) => {
if (value !== undefined) {
row[name] = value;
@@ -100,8 +97,9 @@ with custom headings, columns, and inline editing
Basic Data Table
+ with nested data, formatting, and templates
+
Demo
Basic Data Table
Typescript:
Basic Data Table
basicData: any[] = [
{
'id': 1,
- 'name': 'Frozen yogurt',
- 'type': 'Ice cream',
+ 'food': {
+ 'name': 'Frozen yogurt',
+ 'type': 'Ice cream',
+ },
'calories': 159.0,
'fat': 6.0,
'carbs': 24.0,
@@ -166,8 +166,10 @@ Basic Data Table
'comments': 'I love froyo!',
}, {
'id': 2,
- 'name': 'Ice cream sandwich',
- 'type': 'Ice cream',
+ 'food': {
+ 'name': 'Ice cream sandwich',
+ 'type': 'Ice cream',
+ },
'calories': 237.0,
'fat': 9.0,
'carbs': 37.0,
@@ -177,8 +179,10 @@ Basic Data Table
'iron': 1.0,
}, {
'id': 3,
- 'name': 'Eclair',
- 'type': 'Pastry',
+ 'food': {
+ 'name': 'Eclair',
+ 'type': 'Pastry',
+ },
'calories': 262.0,
'fat': 16.0,
'carbs': 24.0,
@@ -200,7 +204,7 @@ Basic Data Table
Data Table with components
Paging Bar / Search Box / Sortable components
+
Demo
@@ -259,8 +263,8 @@ Paging Bar / Search Box / Sortable components
Typescript:
Example:
[sortBy]="sortBy"
[sortOrder]="'ASC'|'DESC'"
(sortChange)="sortEvent($event)"
- (rowSelect)="selectEvent($event)">
+ (rowSelect)="selectEvent($event)"
+ (selectAll)="selectAllEvent($event)">
]]>
Typescript:
Setup:
Import the [CovalentDataTableModule] using the forRoot() method in your NgModule:
v;
-const DECIMAL_FORMAT: any = (v: number) => v.toFixed(2);
+const NUMBER_FORMAT: (v: any) => any = (v: number) => v;
+const DECIMAL_FORMAT: (v: any) => any = (v: number) => v.toFixed(2);
@Component({
selector: 'data-table-demo',
- styleUrls: ['data-table.component.scss'],
- templateUrl: 'data-table.component.html',
+ styleUrls: ['./data-table.component.scss'],
+ templateUrl: './data-table.component.html',
+ animations: [slideInDownAnimation],
})
export class DataTableDemoComponent implements OnInit {
+ @HostBinding('@routeAnimation') routeAnimation: boolean = true;
+ @HostBinding('class.td-route-animation') classAnimation: boolean = true;
+
dataTableAttrs: Object[] = [{
description: `Rows of data to be displayed`,
name: 'data',
@@ -54,6 +60,16 @@ export class DataTableDemoComponent implements OnInit {
Emits an [ITdDataTableSelectEvent] implemented object.`,
name: 'rowSelect',
type: `function()`,
+ }, {
+ description: `Event emitted when all rows are selected/deselected by the all checkbox.
+ [selectable] needs to be enabled.
+ Emits an [ITdDataTableSelectAllEvent] implemented object.`,
+ name: 'selectAll',
+ type: `function()`,
+ }, {
+ description: `Refreshes data table and updates [data] and [columns]`,
+ name: 'refresh',
+ type: `function()`,
}];
cellAttrs: Object[] = [{
@@ -116,7 +132,7 @@ export class DataTableDemoComponent implements OnInit {
];
data: any[] = [
- {
+ {
'id': 1,
'name': 'Frozen yogurt',
'type': 'Ice cream',
@@ -256,14 +272,12 @@ export class DataTableDemoComponent implements OnInit {
sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending;
constructor(private _dataTableService: TdDataTableService,
- private _dialogService: TdDialogService,
- private _viewContainerRef: ViewContainerRef) {}
+ private _dialogService: TdDialogService) {}
openPrompt(row: any, name: string): void {
this._dialogService.openPrompt({
message: 'Enter comment?',
value: row[name],
- viewContainerRef: this._viewContainerRef,
}).afterClosed().subscribe((value: any) => {
if (value !== undefined) {
row[name] = value;
diff --git a/src/app/components/components/dialogs/dialogs.component.html b/src/app/components/components/dialogs/dialogs.component.html
index 0d6a91e0ee..b3607bfdd5 100644
--- a/src/app/components/components/dialogs/dialogs.component.html
+++ b/src/app/components/components/dialogs/dialogs.component.html
@@ -89,14 +89,14 @@ Example(after setup):
]]>
Setup:
- Import the [CovalentCoreModule] using the forRoot() method:
+ Import the [CovalentDialogsModule] using the forRoot() method:
',
+ }, {
+ description: `Wrapper function over the open() method in MdDialog.
+ Opens a modal dialog containing the given component.`,
+ name: 'open',
+ type: 'function(component: ComponentType, config: MdDialogConfig): MdDialogRef',
+ }, {
+ description: `Wrapper function over the closeAll() method in MdDialog.
+ Closes all of the currently-open dialogs.`,
+ name: 'closeAll',
+ type: 'function()',
}];
constructor(private _dialogService: TdDialogService) {}
diff --git a/src/app/components/components/directives/directives.component.html b/src/app/components/components/directives/directives.component.html
index 5b266ef91a..b0ffc8253a 100644
--- a/src/app/components/components/directives/directives.component.html
+++ b/src/app/components/components/directives/directives.component.html
@@ -22,12 +22,16 @@
Use tdAutoTrim on an input to automatically trim the characters.
Try entering white spaces before or after a word this input:
-
+
+
Usage:
+
+
+
]]>
@@ -114,14 +118,18 @@
Example enter lower than 5 or higher than 10:
-
+
+
Errors:
{{el?.errors | json}}
HTML:
+
+
+
]]>
diff --git a/src/app/components/components/directives/directives.component.ts b/src/app/components/components/directives/directives.component.ts
index ebf9a44233..b85783d6b9 100644
--- a/src/app/components/components/directives/directives.component.ts
+++ b/src/app/components/components/directives/directives.component.ts
@@ -1,12 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
+
+import { slideInDownAnimation } from '../../../app.animations';
@Component({
selector: 'directives-demo',
- styleUrls: [ 'directives.component.scss' ],
- templateUrl: 'directives.component.html',
+ styleUrls: ['./directives.component.scss' ],
+ templateUrl: './directives.component.html',
+ animations: [slideInDownAnimation],
})
export class DirectivesComponent {
+ @HostBinding('@routeAnimation') routeAnimation: boolean = true;
+ @HostBinding('class.td-route-animation') classAnimation: boolean = true;
+
toggleDiv: boolean = true;
fadeDiv: boolean = true;
diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.html b/src/app/components/components/dynamic-forms/dynamic-forms.component.html
new file mode 100644
index 0000000000..081fd707d1
--- /dev/null
+++ b/src/app/components/components/dynamic-forms/dynamic-forms.component.html
@@ -0,0 +1,193 @@
+
+ Dynamic Forms
+ Build forms from a JS object
+
+ Dynamic Text Elements
+
+
+ Demo
+
+
+
+
+ Code
+ HTML:
+
+
+
+ ]]>
+
+ Typescript:
+
+ {{textElements | json}}
+
+
+
+
+
+
+
+ Dynamic Number Elements
+
+
+ Demo
+
+
+
+
+ Code
+ HTML:
+
+
+
+ ]]>
+
+ Typescript:
+
+ {{numberElements | json}}
+
+
+
+
+
+
+
+ Dynamic Boolean Elements
+
+
+ Demo
+
+
+
+
+ Code
+ HTML:
+
+
+
+ ]]>
+
+ Typescript:
+
+ {{booleanElements | json}}
+
+
+
+
+
+
+
+ Dynamic Array Elements
+
+
+ Demo
+
+
+
+
+ Code
+ HTML:
+
+
+
+ ]]>
+
+ Typescript:
+
+ {{arrayElements | json}}
+
+
+
+
+
+
+ TdDynamicFormsComponent
+ How to use this component
+
+ ]]>
+ Use ]]> element to generate a form dynamically.
+ Pass an array of javascript objects that implement [ITdDynamicElementConfig] with the information to be rendered to the [elements] attribute.
+
+
+
+ Properties:
+ The ]]> component has {{dynamicFormsAttrs.length}} properties:
+
+
+
+ {{attr.name}}: {{attr.type}}
+ {{attr.description}}
+
+
+ Example:
+ HTML:
+
+
+
+ ]]>
+
+ Typescript:
+
+
+
+ Setup:
+ Import the [CovalentDynamicFormsModule] using the forRoot() method in your NgModule:
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.scss b/src/app/components/components/dynamic-forms/dynamic-forms.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.ts b/src/app/components/components/dynamic-forms/dynamic-forms.component.ts
new file mode 100644
index 0000000000..9ca7bedcbf
--- /dev/null
+++ b/src/app/components/components/dynamic-forms/dynamic-forms.component.ts
@@ -0,0 +1,102 @@
+import { Component, HostBinding } from '@angular/core';
+import { slideInDownAnimation } from '../../../app.animations';
+import { TdDynamicType, ITdDynamicElementConfig, TdDynamicElement } from '@covalent/dynamic-forms';
+
+@Component({
+ selector: 'dynamic-forms-demo',
+ styleUrls: [ './dynamic-forms.component.scss' ],
+ templateUrl: './dynamic-forms.component.html',
+ animations: [slideInDownAnimation],
+})
+export class DynamicFormsDemoComponent {
+
+ @HostBinding('@routeAnimation') routeAnimation: boolean = true;
+ @HostBinding('class.td-route-animation') classAnimation: boolean = true;
+
+ dynamicFormsAttrs: any[] = [{
+ description: `JS Object that will render the elements depending on its config.
+ [name] property is required.`,
+ name: 'elements',
+ type: 'ITdDynamicElementConfig[]',
+ }, {
+ description: `Getter property for dynamic [FormGroup].`,
+ name: 'form',
+ type: 'get(): FormGroup',
+ }, {
+ description: `Getter property for [valid] of dynamic [FormGroup].`,
+ name: 'valid',
+ type: 'get(): boolean',
+ }, {
+ description: `Getter property for [value] of dynamic [FormGroup].`,
+ name: 'value',
+ type: 'get(): any',
+ }, {
+ description: `Getter property for [errors] of dynamic [FormGroup].`,
+ name: 'errors',
+ type: 'get(): {[name: string]: any}',
+ }, {
+ description: `Getter property for [controls] of dynamic [FormGroup].`,
+ name: 'controls',
+ type: 'get(): {[key: string]: AbstractControl}',
+ }];
+
+ textElements: ITdDynamicElementConfig[] = [{
+ name: 'input',
+ type: TdDynamicElement.Input,
+ required: false,
+ }, {
+ name: 'required-input',
+ label: 'Input Label',
+ type: TdDynamicElement.Input,
+ required: true,
+ }, {
+ name: 'textarea',
+ type: TdDynamicElement.Textarea,
+ required: false,
+ }, {
+ name: 'text',
+ type: TdDynamicType.Text,
+ required: false,
+ default: 'Default',
+ }];
+
+ numberElements: ITdDynamicElementConfig[] = [{
+ name: 'number',
+ label: 'Number (coming soon)',
+ type: TdDynamicType.Number,
+ required: true,
+ min: 18,
+ max: 70,
+ }, {
+ name: 'slider',
+ type: TdDynamicElement.Slider,
+ min: 18,
+ max: 70,
+ }];
+
+ booleanElements: ITdDynamicElementConfig[] = [{
+ name: 'boolean',
+ label: 'Boolean Label',
+ type: TdDynamicType.Boolean,
+ default: false,
+ }, {
+ name: 'slide-toggle',
+ type: TdDynamicElement.SlideToggle,
+ default: true,
+ }, {
+ name: 'checkbox',
+ type: TdDynamicElement.Checkbox,
+ }];
+
+ arrayElements: ITdDynamicElementConfig[] = [{
+ name: 'array',
+ type: TdDynamicType.Array,
+ selections: ['Test1', 'Test2', 'Test3', 'Test4'],
+ default: 'Test1',
+ }, {
+ name: 'required-select',
+ type: TdDynamicElement.Select,
+ selections: ['Test1', 'Test2', 'Test3', 'Test4'],
+ required: true,
+ }];
+}
diff --git a/src/app/components/components/expansion-panel/expansion-panel.component.html b/src/app/components/components/expansion-panel/expansion-panel.component.html
index 01bcbbed25..6b8c58155a 100644
--- a/src/app/components/components/expansion-panel/expansion-panel.component.html
+++ b/src/app/components/components/expansion-panel/expansion-panel.component.html
@@ -24,32 +24,19 @@ Headquarters
-
+
@@ -232,13 +219,13 @@ Example:
]]>
Setup:
- Import the [CovalentCoreModule] using the forRoot() method in your NgModule:
+ Import the [CovalentExpansionPanelModule] using the forRoot() method in your NgModule:
Setup:
Example:
Typescript:
Highlighting your code snippets
- Simply wrap your code snippets in ]]>
- To use HTML brackets < and > wrap the code with <![CDATA[ and ]]> or replace with HTMLs character entities
- Also, to display model binding, add spaces between curly braces like:{{ '{' }} {{ '{' }} } } and wrap them with <![CDATA[ and ]]>
Example:
+ HTML usage:
-
hello world!
{ {property} }
- ]]>
+ ]]>
here's what CSS looks like:
-
- pre {{'{'}}
- display: block;
- overflow-x: auto;
- padding: 0;
- margin: 0;
- background: #002451;
- color: white;
- font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
- line-height: 1.45;
- tab-size: 2;
- -webkit-font-smoothing: auto;
- -webkit-text-size-adjust: none;
- position: relative;
- border-radius: 2px;
- }
+
+
- and JavaScript (typescript):
+ and TypeScript (javascript):
} = {};
- private _observables: {[key: string]: Observable} = {};
+ private _sources: {[key : string]: Subject} = {};
+ private _observables: {[key: string]: Observable} = {};
- constructor(){
+ constructor(){
- }
+ }
- public register(name) : Observable {
- this._sources[name] = new Subject();
- this._observables[name] = this._sources[name].asObservable();
- return this._observables[name];
- }
+ public register(name) : Observable {
+ this._sources[name] = new Subject();
+ this._observables[name] = this._sources[name].asObservable();
+ return this._observables[name];
+ }
- public emit(name: string): void {
- if(this._sources[name]){
- this._sources[name].next(null);
+ public emit(name: string): void {
+ if(this._sources[name]){
+ this._sources[name].next(null);
+ }
}
}
- }
- ]]>
-
- Setup:
- highlight.js needs to be added as vendor (installed as a highlight.js dependency).
-
-
-
- Reference the module in the system-config.js file.
-
-
-
- Then, import the [CovalentHighlightModule] using the forRoot() method in your NgModule:
-
-
+
+HttpInterceptorService
Service provided with methods that wrap the ng2 [Http] service and provide an easier experience for interceptor implementation.
To add a desired interceptor, it needs to implement the [IHttpInterceptor] interface.
- export interface IHttpInterceptor {{'{'}}
- onRequest?: (requestOptions: RequestOptionsArgs) => RequestOptionsArgs;
- onResponse?: (response: Response) => Response;
- onResponseError?: (error: Response) => Response;
- }
+ RequestOptionsArgs;
+ onRequestError?: (requestOptions: RequestOptionsArgs) => RequestOptionsArgs;
+ onResponse?: (response: Response) => Response;
+ onResponseError?: (error: Response) => Response;
+ }
+ ]]>
Methods:
The [HttpInterceptorService] service has {{interceptorServiceMethods.length}} properties:
@@ -35,7 +38,23 @@ Setup:
export class CustomInterceptor implements IHttpInterceptor {
onRequest(requestOptions: RequestOptionsArgs): RequestOptionsArgs {
- ... // do something to requestOptions
+ ... // do something to requestOptions before a request
+ ... // if something is wrong, throw an error to execute
+ ... // onRequestError (if there is an onRequestError hook)
+ if (/*somethingWrong*/) {
+ throw new Error('error message for subscription error callback');
+ }
+ return requestOptions;
+ }
+
+ onRequestError(requestOptions: RequestOptionsArgs): RequestOptionsArgs {
+ ... // do something to try and recover from an error thrown `onRequest`
+ ... // and return the requestOptions needed for the request
+ ... // else return 'undefined' or throw an error to execute the
+ ... // error callback of the subscription
+ if (cantRecover) {
+ throw new Error('error message for subscription error callback'); // or return undefined;
+ }
return requestOptions;
}
@@ -51,17 +70,31 @@ Setup:
}
]]>
- Then, import the [CovalentHttpModule] using the forRoot() method with the desired interceptors in your NgModule:
+ Then, import the [CovalentHttpModule] using the forRoot() method with the desired interceptors and paths to intercept in your NgModule:
[] = [
+ CustomInterceptor,
+ ...
+ ];
+
@NgModule({
imports: [
HttpModule, /* or CovalentCoreModule.forRoot() */
- CovalentHttpModule.forRoot([CustomInterceptor]),
+ CovalentHttpModule.forRoot({
+ interceptors: [{
+ interceptor: CustomInterceptor, paths: ['**'],
+ }],
+ }),
+ ...
+ ],
+ providers: [
+ httpInterceptorProviders,
...
],
...
@@ -70,6 +103,63 @@ Setup:
]]>
After that, just inject [HttpInterceptorService] and use it for your requests.
+ Paths:
+ The following characters are accepted as a path to intercept:
+
+
+- `**` is a wildcard for `[a-zA-Z0-9-_]` (including `/`)
+- `*` is a wildcard for `[a-zA-Z0-9-_]` (excluding `/`)
+- `[a-zA-Z0-9-_]`
+
+
+ Examples:
+
+
+Example 1
+
+`/users/*/groups` intercepts:
+- `www.url.com/users/id-of-user/groups`
+- `www.url.com/users/id/groups`
+
+`/users/*/groups` DOES NOT intercept:
+- `www.url.com/users/id-of-user/groups/path`
+- `www.url.com/users/id-of-user/path/groups`
+- `www.url.com/users/groups`
+
+Example 2
+
+`/users/**/groups` intercepts:
+- `www.url.com/users/id-of-user/groups`
+- `www.url.com/users/id/groups`
+- `www.url.com/users/id-of-user/path/groups`
+
+`/users/**/groups` DOES NOT intercept:
+- `www.url.com/users/id-of-user/groups/path`
+- `www.url.com/users/groups`
+
+Example 3
+
+`/users/**` intercepts:
+- `www.url.com/users/id-of-user/groups`
+- `www.url.com/users/id/groups`
+- `www.url.com/users/id-of-user/path/groups`
+- `www.url.com/users/id-of-user/groups/path`
+- `www.url.com/users/groups`
+
+`/users/**` DOES NOT intercept:
+- `www.url.com/users`
+
+Example 4
+
+`/users**` intercepts:
+- `www.url.com/users/id-of-user/groups`
+- `www.url.com/users/id/groups`
+- `www.url.com/users/id-of-user/path/groups`
+- `www.url.com/users/id-of-user/groups/path`
+- `www.url.com/users/groups`
+- `www.url.com/users`
+
+
@@ -95,7 +185,7 @@ Example:
Example:
super(_http, {
baseUrl: 'www.api.com',
path: '/path/to/endpoint',
+ headers: new Headers(),
+ dynamicHeaders: () => new Headers(),
transform: (res: Response): any => res.json(),
});
}
diff --git a/src/app/components/components/http/http.component.ts b/src/app/components/components/http/http.component.ts
index fb7562ae54..0d37e102c1 100644
--- a/src/app/components/components/http/http.component.ts
+++ b/src/app/components/components/http/http.component.ts
@@ -1,12 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
+
+import { slideInDownAnimation } from '../../../app.animations';
@Component({
selector: 'http-demo',
- styleUrls: [ 'http.component.scss' ],
- templateUrl: 'http.component.html',
+ styleUrls: ['./http.component.scss' ],
+ templateUrl: './http.component.html',
+ animations: [slideInDownAnimation],
})
export class HttpDemoComponent {
+ @HostBinding('@routeAnimation') routeAnimation: boolean = true;
+ @HostBinding('class.td-route-animation') classAnimation: boolean = true;
+
interceptorServiceMethods: Object[] = [{
description: `Uses underlying ng2 [http] to request a DELETE method to a URL,
executing the interceptors as part of the request pipeline.`,
@@ -47,23 +53,23 @@ export class HttpDemoComponent {
restServiceMethods: Object[] = [{
description: `Creates a GET request to the generated endpoint URL.`,
name: 'query',
- type: 'function(query?: IRestQuery)',
+ type: 'function(query?: IRestQuery, transform?: IRestTransform)',
}, {
description: `Creates a GET request to the generated endpoint URL, adding the ID at the end.`,
name: 'get',
- type: 'function(id: string | number)',
+ type: 'function(id: string | number, transform?: IRestTransform)',
}, {
description: `Creates a POST request to the generated endpoint URL.`,
name: 'create',
- type: 'function(obj: T)',
+ type: 'function(obj: T, transform?: IRestTransform)',
}, {
description: `Creates a PATCH request to the generated endpoint URL, adding the ID at the end.`,
name: 'update',
- type: 'function(id: string | number, obj: T)',
+ type: 'function(id: string | number, obj: T, transform?: IRestTransform)',
}, {
description: `Creates a DELETE request to the generated endpoint URL, adding the ID at the end.`,
name: 'delete',
- type: 'function(id: string | number)',
+ type: 'function(id: string | number, transform?: IRestTransform)',
}, {
description: `Builds the endpoint URL with the configured properties and arguments passed in the method.`,
name: 'buildUrl',
diff --git a/src/app/components/components/json-formatter/json-formatter.component.html b/src/app/components/components/json-formatter/json-formatter.component.html
index 5c98b9ca58..c8f3f6bf29 100644
--- a/src/app/components/components/json-formatter/json-formatter.component.html
+++ b/src/app/components/components/json-formatter/json-formatter.component.html
@@ -58,10 +58,10 @@ Setup:
Import the [CovalentJsonFormatterModule] using the forRoot() method in your NgModule:
Circular or linear progress loader
-
-
- timer_off Indeterminatetimer Determinate
-
- Loading Registered: {{replaceRegistered}} times
-
- Indeterminate Mode
- Circular Type
-
-
-
-
-
-
+ [tdLoading] directive with (*) syntax
+ with indetederminate [tdLoadingMode], circular [tdLoadingType], overlay [tdLoadingStrategy], accent [tdLoadingColor]
+
+
+ Demo
+
+
+
+
+
+
+
+
+
-
- Linear Type
-
-
-
-
-
-
+
+
-
-
-
- Determinate Mode
- Circular Type
-
-
-
-
-
-
+
+
+ Code
+ HTML:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+ Typescript:
+
+
+
+
+
+
+
+
+
+ [tdLoading] directive with template syntax
+ with determinate [tdLoadingMode], linear [tdLoadingType], replace [tdLoadingStrategy], warn [tdLoadingColor]
+
+
+ Demo
+
+
+
+
+
+
+ Demo 1
+ Demo 2
+
+
+
+
+
+
+
+
-
- Linear Type
-
-
-
-
-
-
+
+
+ Code
+ HTML:
+
+
+
+
+
+
+
+ Demo 1
+ Demo 2
+
+
+
+
+
+
+
+
+
+ ]]>
+
+ Typescript:
+
+ {
+ this._loadingService.setValue('replaceTemplateSyntax', value);
+ value = value + 10;
+ if (value > 100) {
+ clearInterval(interval);
+ }
+ }, 250);
+ setTimeout(() => {
+ this._loadingService.resolve('replaceTemplateSyntax');
+ }, 3000);
+ }
+ }
+ ]]>
+
+
+
+
+
+
+
+ Preloaded [TdLoading] fullscreen mask
+ with indeterminate [mode], circular [type], primary [color] by default
+
+
+ Demo
+
+
-
-
+
+
+ Code
+ HTML:
+
+
+
+
+ ]]>
+
+ Typescript:
+
+ {
+ this._loadingService.resolve();
+ }, 1500);
+ }
+ }
+ ]]>
+
+
+
+
+
+
+
+ Custom [TdLoading] fullscreen mask
+ with indeterminate [mode], linear [type], accent [color]
+
+
+ Demo
+
+
+
+
+
+ Code
+ HTML:
+
+
+
+
+ ]]>
+
+ Typescript:
+
+ {
+ this._loadingService.resolve('configFullscreenDemo');
+ }, 1500);
+ }
+ }
+ ]]>
+
+
+
-
-
-
-
-
-
TdLoadingDirective
@@ -86,7 +269,7 @@ Example(after setup):
HTML (*) syntax:
+
...
]]>
@@ -94,7 +277,7 @@ Example(after setup):
HTML ]]> syntax
+
...
]]>
@@ -125,17 +308,16 @@ Example(after setup):
]]>
Setup:
- Import the [CovalentCoreModule] using the forRoot() method and set [TD_LOADING_ENTRY_COMPONENTS] as 'entryComponents' in your NgModule:
+ Import the [CovalentLoadingModule] using the forRoot() method in your NgModule:
Setup:
TdLoadingService
This service is designed to be a factory of loading masks and serves as a facade for their usage.
Simply add this service as a provider to be able to use it in a component.
- TdLoadingService.createOverlayComponent() method recieves as parameter an object that implements the [ILoadingOptions] interface.
+ TdLoadingService.create() method recieves as parameter an object that implements the [ITdLoadingConfig] interface.
- interface ILoadingOptions {{'{'}}
+ interface ITdLoadingConfig {{'{'}}
name: string;
type?: LoadingType;
mode?: LoadingMode;
+ color?: 'primary' | 'accent' | 'warn';
}
Methods:
@@ -174,17 +357,16 @@ Example(after setup):
Typescript:
0) {
- this.resolveLoadingDirective();
- }
- clearInterval(this._intervalForDirective);
+ ngAfterViewInit(): void {
+ this.startDirectives();
}
- registerCircleLoadingMain(): void {
- if (this.determinate) {
- this._loadingService.register('test.overlay.determinate');
- this.mockValuesForLoadingMain(LoadingType.Circular);
- setTimeout(() => {
- this._loadingService.resolve('test.overlay.determinate');
- }, 3000);
- } else {
- this._loadingService.register('test.overlay.indeterminate');
- setTimeout(() => {
- this._loadingService.resolve('test.overlay.indeterminate');
- }, 3000);
- }
+ toggleDefaultFullscreenDemo(): void {
+ this._loadingService.register();
+ setTimeout(() => {
+ this._loadingService.resolve();
+ }, 1500);
}
- registerLinearLoadingMain(): void {
- if (this.determinate) {
- this._loadingService.register('test2.overlay.determinate');
- this.mockValuesForLoadingMain(LoadingType.Linear);
- setTimeout(() => {
- this._loadingService.resolve('test2.overlay.determinate');
- }, 3000);
- } else {
- this._loadingService.register('test2.overlay.indeterminate');
- setTimeout(() => {
- this._loadingService.resolve('test2.overlay.indeterminate');
- }, 3000);
- }
+ toggleConfigFullscreenDemo(): void {
+ this._loadingService.register('configFullscreenDemo');
+ setTimeout(() => {
+ this._loadingService.resolve('configFullscreenDemo');
+ }, 1500);
}
- registerLoadingDirective(): void {
- clearInterval(this._intervalForDirective);
- if (this.determinate) {
- this._loadingService.register('test.determinate');
- this._loadingService.register('test2.determinate');
- this.mockValuesForLoadingDirective();
+ toggleOverlayStarSyntax(): void {
+ if (this.overlayStarSyntax) {
+ this._loadingService.register('overlayStarSyntax');
} else {
- this._loadingService.register('test.indeterminate');
- this._loadingService.register('test2.indeterminate');
+ this._loadingService.resolve('overlayStarSyntax');
}
- this.replaceRegistered++;
+ this.overlayStarSyntax = !this.overlayStarSyntax;
}
- resolveLoadingDirective(): void {
- clearInterval(this._intervalForDirective);
- if (this.replaceRegistered > 0) {
- this.replaceRegistered--;
- }
- if (this.determinate) {
- this._loadingService.resolve('test.determinate');
- this._loadingService.resolve('test2.determinate');
- } else {
- this._loadingService.resolve('test.indeterminate');
- this._loadingService.resolve('test2.indeterminate');
- }
- }
-
- mockValuesForLoadingDirective(): void {
+ toggleReplaceTemplateSyntax(): void {
+ this._loadingService.register('replaceTemplateSyntax');
let value: number = 0;
- this._intervalForDirective = setInterval(() => {
- this._loadingService.setValue('test.determinate', value);
- this._loadingService.setValue('test2.determinate', value);
+ let interval: number = setInterval(() => {
+ this._loadingService.setValue('replaceTemplateSyntax', value);
value = value + 10;
if (value > 100) {
- clearInterval(this._intervalForDirective);
+ clearInterval(interval);
}
}, 250);
+ setTimeout(() => {
+ this._loadingService.resolve('replaceTemplateSyntax');
+ }, 3000);
}
- mockValuesForLoadingMain(loadingType: LoadingType): void {
- let value: number = 0;
- this._intervalForMain = setInterval(() => {
- if (loadingType === LoadingType.Circular) {
- this._loadingService.setValue('test.overlay.determinate', value);
- } else {
- this._loadingService.setValue('test2.overlay.determinate', value);
- }
- value = value + 10;
- if (value > 100) {
- clearInterval(this._intervalForMain);
- }
- }, 250);
+ startDirectives(): void {
+ this._loadingService.register('overlayStarSyntax');
}
}
diff --git a/src/app/components/components/markdown/markdown.component.html b/src/app/components/components/markdown/markdown.component.html
index f660c62eda..763cd2f387 100644
--- a/src/app/components/components/markdown/markdown.component.html
+++ b/src/app/components/components/markdown/markdown.component.html
@@ -3,252 +3,240 @@
Parse markdown code
-
- Imporant Note:
You must wrap all markdown in <pre><code></code></pre> and maintain whitespace.
- Basic Markdown
-
-
-# Heading (H1)
-
-## Sub Heading (H2)
-
-### Steps (H3)
-
-###List Items
-
-* One
-* Two
-* Three
-
-Emphasis, aka italics, with *asterisks* or _underscores_.
-
-Strong emphasis, aka bold, with **asterisks** or __underscores__.
-
-Combined emphasis with **asterisks and _underscores_**.
-
-
-
-
+
+
+ Basic example
+ Headings, lists & paragraphs
+
+
+
+ Demo
-
- # Heading (H1)
-
- ## Sub Heading (H2)
+ # Heading (H1)
- ### Steps (H3)
-
- ###List Items
+ ## Sub Heading (H2)
- * One
- * Two
- * Three
+ ### Steps (H3)
- Emphasis, aka italics, with *asterisks* or _underscores_.
+ ###List Items
- Strong emphasis, aka bold, with **asterisks** or __underscores__.
+ * One
+ * Two
+ * Three
+ * 4 extra spaces for nested lists
+ * Another 4 spaces for a nested list
- Combined emphasis with **asterisks and _underscores_**.
-
+ Emphasis, aka italics, with *asterisks* or _underscores_.
+
+ Strong emphasis, aka bold, with **asterisks** or __underscores__.
+
+ Combined emphasis with **asterisks and _underscores_**.
- ]]>
-
- Links & Images
- There are two ways to create links. Inline & reference:
-
-
-[I'm an inline-style link](https://teradata.github.io/)
+
+
+ Code
+
+
+ # Heading (H1)
+
+ ## Sub Heading (H2)
+
+ ### Steps (H3)
+
+ ###List Items
+
+ * One
+ * Two
+ * Three
+ * 4 extra spaces for nested lists
+ * Another 4 spaces for a nested list
+
+ Emphasis, aka italics, with *asterisks* or _underscores_.
+
+ Strong emphasis, aka bold, with **asterisks** or __underscores__.
+
+ Combined emphasis with **asterisks and _underscores_**.
+
+ ]]>
+
+
+
+
+
+
+ Links & Images
+ There are two ways to create links, inline & reference
+
+
+
+ Demo
+ Links & Images
+ There are two ways to create links. Inline & reference:
+
+ [I'm an inline-style link](https://teradata.github.io/)
-[I'm a reference-style link case does not matter][Teradata Github Landing]
+ [I'm a reference-style link case does not matter][Teradata Github Landing]
-[teradata github Landing]: https://teradata.github.io/
+ [teradata github Landing]: https://teradata.github.io/
-Inline image
-
+ Inline image
+ 
-Reference-style image:
-![alt text][logo]
+ Reference-style image:
+ ![alt text][logo]
-[logo]: app/assets/icons/teradata.svg "Teradata Labs"
-
-
-
-
-
- [I'm an inline-style link](https://teradata.github.io/)
+ [logo]: app/assets/icons/teradata.svg "Teradata Labs"
+
+
+
+ Code
+
+
+ [I'm an inline-style link](https://teradata.github.io/)
- [I'm a reference-style link case does not matter][Teradata Github Landing]
+ [I'm a reference-style link case does not matter][Teradata Github Landing]
- [teradata github Landing]: https://teradata.github.io/
+ [teradata github Landing]: https://teradata.github.io/
- Inline image
- 
+ Inline image
+ 
- Reference-style image:
- ![alt text][logo]
+ Reference-style image:
+ ![alt text][logo]
- [logo]: app/assets/icons/teradata.svg "Teradata Labs"
-
-
- ]]>
-
- Inline Code & Snippets
- Inline has `back-ticks` around it.
- Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces.
-
-
-`this is an inline code snippet`
-
-```javascript
-var s = "JavaScript syntax highlighting";
-alert(s);
-```
-
-```python
-s = "Python syntax highlighting"
-print s
-```
-
-
-
-
+ ]]>
+
+
+
+
+
+
+
+ Inline Code & Snippets
+ Code blocks
+
+
+
+ Demo
+ Inline has `back-ticks` around it.
+ Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces.
-
- `this is an inline code snippet`
-
- ```javascript
- var s = "JavaScript syntax highlighting";
- alert(s);
- ```
-
- ```python
- s = "Python syntax highlighting"
- print s
- ```
-
+ `this is an inline code snippet`
+
+ ```javascript
+ var s = "JavaScript syntax highlighting";
+ alert(s);
+ ```
+
+ ```python
+ s = "Python syntax highlighting"
+ print s
+ ```
- ]]>
-
- Blockquotes
-
-
-> Blockquotes are very handy in email to emulate reply text.
-> This line is part of the same quote.
-
-Quote break.
-
-> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
-
-
-
-
+
+ Code
+
+
+ `this is an inline code snippet`
+
+ ```javascript
+ var s = "JavaScript syntax highlighting";
+ alert(s);
+ ```
+
+ ```python
+ s = "Python syntax highlighting"
+ print s
+ ```
+
+ ]]>
+
+
+
+
+
+
+
+ Block Quotes & Dividers
+
+
+
+ Demo
+ Blockquotes
-
- > Blockquotes are very handy in email to emulate reply text.
- > This line is part of the same quote.
+ > Blockquotes are very handy in email to emulate reply text.
+ > This line is part of the same quote.
- Quote break.
+ Quote break.
- > This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
-
+ > This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
- ]]>
-
- Dividers
-
-
-Three or more...
+ Dividers
+
+ Three or more...
----
+ ---
-Hyphens
+ Hyphens
-***
+ ***
-Asterisks
+ Asterisks
-___
+ ___
-Underscores
-
-
-
-
-
- Three or more...
+ Underscores
+
+
+
+ Code
+
+
+ > Blockquotes are very handy in email to emulate reply text.
+ > This line is part of the same quote.
+
+ Quote break.
+
+ > This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
+
+ ]]>
+
+
+
+
+ Three or more...
- ---
+ ---
- Hyphens
+ Hyphens
- ***
+ ***
- Asterisks
+ Asterisks
- ___
+ ___
- Underscores
-
-
- ]]>
-
-
-
-
- TdMarkdownComponent
- How to use this component
-
- ]]>
- Use ]]> element to parse the markdown files
- Wrap your code snippets in ]]>
- Example:
- HTML
-
-
-
- # Heading
- ## Sub Heading (H2)
- ### Steps (H2)
-
-
+ Underscores
+
]]>
-
- Setup:
- showdown.js needs to be added as vendor and referenced in `index.html`.
-
- module.exports = function(defaults) {{'{'}}
- return new Angular2App(defaults, {{'{'}}
- vendorNpmFiles: [
- ...
- 'showdown/dist/showdown.js'
- ]
- });
- };
-
- Reference the script in the `index.html` file.
-
-
- ]]>
-
- Then, import the [CovalentMarkdownModule] using the forRoot() method in your NgModule:
-
-
-
+
+
+
-
+
+