[NIFI-5164]
upgrade to angular v5.2.0, angular-material v5.2.0, covalent v1.0.1
remove package-lock file from .gitignore and remove author info
update pull request template
add package-lock.json, update version number to indicate current version, update pr template to simplify reviewer process
include webapp in src to facilitate local build and review process
update gh-pages deploy process
create src/
This closes #1
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..06d8a85
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,28 @@
+Thank you for submitting a contribution to Apache NiFi Fluid Design System.
+
+In order to streamline the review of the contribution we ask you
+to ensure the following steps have been taken:
+
+### For all changes:
+- [ ] Is there a JIRA ticket associated with this PR? Is it referenced
+ in the commit message?
+
+- [ ] Does your PR title start with either NIFI-XXXX where XXXX is the JIRA number you are trying to resolve? Pay particular attention to the hyphen "-" character.
+
+- [ ] Has your PR been rebased against the latest commit within the target branch (typically master)?
+
+- [ ] Is your initial contribution a single, squashed commit?
+
+### For code changes:
+- [ ] Have you written or updated unit tests to verify your changes?
+- [ ] Have you ensured that a full build and that the full suite of unit tests is executed via npm run clean:install at the root nifi-fds folder?
+- [ ] Have you written or updated the Apache NiFi Fluid Design System demo application to demonstrate any new functionality, provide examples of usage, and to verify your changes via npm start at the nifi-fds/target folder?
+- [ ] If adding new dependencies to the code, are these dependencies licensed in a way that is compatible for inclusion under [ASF 2.0](http://www.apache.org/legal/resolved.html#category-a)?
+- [ ] If applicable, have you updated the LICENSE file, including the main LICENSE file under nifi-fds?
+- [ ] If applicable, have you updated the NOTICE file, including the main NOTICE file found under nifi-fds?
+
+### For documentation related changes:
+- [ ] Have you ensured that format looks appropriate for the output in which it is rendered?
+
+### Note:
+Please ensure that once the PR is submitted, you check travis-ci for build issues and submit an update to your PR as soon as possible.
diff --git a/.gitignore b/.gitignore
index 1b63b48..e3a849c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,5 @@
-node_modules/
-coverage/
+target/
npm-debug.log*
-webapp/
-package-lock.json
# Intellij
.idea/
diff --git a/Gruntfile.js b/Gruntfile.js
index f4f8ae7..4f69a8f 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -29,6 +29,11 @@
files: [{
'./platform/core/common/styles/css/fluid-design-system.min.css': ['./platform/core/common/styles/fluid-design-system.scss']
}]
+ },
+ minifyFdsDemo: {
+ files: [{
+ './demo-app/css/fds-demo.min.css': ['./demo-app/theming/fds-demo.scss']
+ }]
}
},
compress: {
@@ -42,6 +47,14 @@
dest: './',
ext: '.min.css.gz'
}]
+ },
+ fdsDemoStyles: {
+ files: [{
+ expand: true,
+ src: ['./demo-app/css/fds-demo.min.css'],
+ dest: './',
+ ext: '.min.css.gz'
+ }]
}
},
bump: {
@@ -65,4 +78,5 @@
}
});
grunt.registerTask('compile-fds-styles', ['sass:minifyFds', 'compress:fdsStyles']);
+ grunt.registerTask('compile-fds-demo-styles', ['sass:minifyFdsDemo', 'compress:fdsDemoStyles']);
};
diff --git a/README.md b/README.md
index 5ac1f90..bf4825f 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,10 @@
# Apache NiFi Fluid Design System
-The Apache NiFi Fluid Design System module is an atomic reusable platform providing consistent set of UI/UX components for open source friendly web applications to consume. Checkout the demo web application on the `gh-pages` branch to see a complete example of an Angular application that leverages this NGModule. This demo application allows users to interact with and provides sample code for the available UI/UX components: [https://apache.github.io/nifi-fds/](https://apache.github.io/nifi-fds/).
+The Apache NiFi Fluid Design System module is an atomic reusable platform providing consistent set of UI/UX components for open source friendly web applications to consume. Users can interact with this design system by running the demo-app locally or by visiting: [https://apache.github.io/nifi-fds/](https://apache.github.io/nifi-fds/). This demo application also provides an example of how an Angular application would leverage the nifi-fds NgModule.
#### npm
-For developers not interested in building the FDS NgModule you can use **npm** to install the distribution files.
+For developers not interested in building the FDS NgModule you can use **npm** to install the distribution files. (TBD: awaiting 0.1 release)
```bash
npm install nifi-fds
@@ -12,7 +12,7 @@
## Setup
-Import the **Fluid Design System** NgModule into your angular application:
+Import the **Apache NiFi Fluid Design System** NgModule into your angular application:
```javascript
var fdsCore = require('fluid-design-system/core');
@@ -62,67 +62,57 @@
@include fds-theme($fds-theme);
```
-NiFi Fluid Design System UI/UX Platform comes with a base CSS file `node_modules/fluid-design-system/core/common/styles/css/fluid-design-system.min.css` (includes icons).
+The Apache NiFi Fluid Design System UI/UX Platform comes with a base CSS file `node_modules/fluid-design-system/core/common/styles/css/fluid-design-system.min.css` (includes icons) that should be included in the head of your HTML document.
## Building
-Developers can easily build this project using **npm**.
-
-First install or update your local project's **npm** tools:
+Developers can easily build this project using **npm** from the root nifi-fds directory via:
```bash
-npm install
+npm run clean:install
```
-Next run:
+or to run without unit tests run:
```bash
-npm run build
+npm run clean:install:skipTests
```
-## Testing
+## Developing
-Developers can easily test this project using **npm**.
+Developers can easily skip the re-instalation of node_modules and run unit tests in development mode using **npm**.
```bash
-npm test
+npm run dev:install
```
-Or, during development:
+or to run without unit tests run:
```bash
-npm run test:dev
+npm run dev:install:skipTests
```
-## Release Managment
+## Running locally
-For developers with permissions releasing a new version of the NiFi Fluid Design System is simple with [grunt bump](https://github.com/vojtajina/grunt-bump)
-
-## Running the demo locally
-
-For developers that would like to contribute to the demo please checkout the `gh-pages` branch:
+Once built you can start the application from the target directory via:
```bash
-git checkout gh-pages
-```
-
-Next, you will need to update the base url. To do this simply edit the index.html file on line 21:
-
-```bash
-<base href='/fluid-design-system/'>
-```
-
-should be:
-
-```bash
-<base href='/'>
-```
-
-Finally, start the application:
-
-```bash
+cd target
npm start
```
-The demo application should now be availalbe at: [http://127.0.0.1:8080/](http://127.0.0.1:8080/).
+The demo application should now be availalbe at: [http://127.0.0.1:8080/](http://127.0.0.1:8080/). The port may differ if there is a conflict on 8080. See the output of the start command for the
+available URLs.
+
+## Release Managment
+
+For developers with permissions releasing a new version of the NiFi Fluid Design System is simple with [grunt bump](https://github.com/vojtajina/grunt-bump).
+
+## Deploying github.io demo
+
+The nifi-fds github.io demo can be deployed from the root nifi-fds directory via: (TBD: awaiting 0.1 release)
+
+```bash
+npm run deploy:ghpages
+```
diff --git a/package-lock.json b/package-lock.json
index 973c80c..4a44e34 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,101 +1,109 @@
{
"name": "nifi-fds",
- "version": "0.0.1",
+ "version": "0.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@angular/animations": {
- "version": "4.4.6",
- "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.6.tgz",
- "integrity": "sha1-+mYYmaik44y3xYPHpcl85l1ZKjU=",
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.2.0.tgz",
+ "integrity": "sha512-JLR42YHiJppO4ruAkFxgbzghUDtHkXHkKPM8udd2qyt16T7e1OX7EEOrrmldUu59CC56tZnJ/32p4SrYmxyBSA==",
"requires": {
"tslib": "1.9.0"
}
},
"@angular/cdk": {
- "version": "2.0.0-beta.12",
- "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.12.tgz",
- "integrity": "sha1-OiQ8tiuT9OA5EgunD5ANyeI1Yi4=",
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.2.0.tgz",
+ "integrity": "sha1-Q2j2dJ6RXNzHXTJa4z/bP4WogQg=",
"requires": {
"tslib": "1.9.0"
}
},
"@angular/common": {
- "version": "4.4.6",
- "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.6.tgz",
- "integrity": "sha1-S4FCByTggooOg5uVpV6xp+g5GPI=",
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/@angular/common/-/common-5.2.0.tgz",
+ "integrity": "sha512-yMFn2isC7/XOs56/2Kzzbb1AASHiwipAPOVFtKe7TdZQClO8fJXwCnk326rzr615+CG0eSBNQWeiFGyWN2riBA==",
"requires": {
"tslib": "1.9.0"
}
},
"@angular/compiler": {
- "version": "4.4.6",
- "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.6.tgz",
- "integrity": "sha1-LuH68lt1fh0SiXkHS+f65SmzvCA=",
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.2.0.tgz",
+ "integrity": "sha512-RfYa4ESgjGX0T0ob/Xz00IF7nd2xZkoyRy6oKgL82q42uzB3xZUDMrFNgeGxAUs3H22IkL46/5SSPOMOTMZ0NA==",
"requires": {
"tslib": "1.9.0"
}
},
"@angular/core": {
- "version": "4.4.6",
- "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.6.tgz",
- "integrity": "sha1-EwMf0Q3P5DiHVBmzjyESCVi8I1Q=",
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/@angular/core/-/core-5.2.0.tgz",
+ "integrity": "sha512-s2ne45DguNUubhC1YgybGECC4Tyx3G4EZCntUiRMDWWkmKXSK+6dgHMesyDo8R5Oat8VfN4Anf8l3JHS1He8kg==",
"requires": {
"tslib": "1.9.0"
}
},
"@angular/flex-layout": {
- "version": "2.0.0-beta.9",
- "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-2.0.0-beta.9.tgz",
- "integrity": "sha1-PlT4mOgF0LFCbRXmE520FdBO518=",
+ "version": "5.0.0-beta.14",
+ "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-5.0.0-beta.14.tgz",
+ "integrity": "sha512-/fsOqXFUKdCmzzZx0bZ0HCYwcV+BSbVuIgOhaCrZKHj2rqiWKKPgj1ErU3HMT68bBBGag0u0skTdLGtrBorRIA==",
"requires": {
"tslib": "1.9.0"
}
},
"@angular/forms": {
- "version": "4.4.6",
- "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.6.tgz",
- "integrity": "sha1-/mSs5CQ1wbgPSQNLfEHOjK8UpEo=",
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.2.0.tgz",
+ "integrity": "sha512-g1/SF9lY0ZwzJ0w4NXbFsTGGEuUdgtaZny8DmkaqtmA7idby3FW398X0tv25KQfVYKtL+p9Jp1Y8EI0CvrIsvw==",
"requires": {
"tslib": "1.9.0"
}
},
"@angular/http": {
- "version": "4.4.6",
- "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.6.tgz",
- "integrity": "sha1-CvaAxnEL3AJtlA4iXP0PalwAXQw=",
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/@angular/http/-/http-5.2.0.tgz",
+ "integrity": "sha512-V5Cl24dP3rCXTTQvDc0TIKoWqBRAa0DWAQbtr7iuDAt5a1vPGdKz5K1sEiiV6ziwX6gzjiwHjUvL+B+WbIUrQA==",
"requires": {
"tslib": "1.9.0"
}
},
"@angular/material": {
- "version": "2.0.0-beta.12",
- "resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.12.tgz",
- "integrity": "sha1-cbbQt7AhiR5dDjaIwdS9eMdFf1g=",
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/@angular/material/-/material-5.2.0.tgz",
+ "integrity": "sha1-hZnjFJ1ISH4+kulB+p3FUXbjoM8=",
"requires": {
"tslib": "1.9.0"
}
},
"@angular/platform-browser": {
- "version": "4.4.6",
- "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.6.tgz",
- "integrity": "sha1-qYOcVH4bZU+h0kqJeAyLpquNzOA=",
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.0.tgz",
+ "integrity": "sha512-c6cR15MfopPwGZ097HdRuAi9+R9BhA3bRRFpP2HmrSSB/BW4ZNovUYwB2QUMSYbd9s0lYTtnavqGm6DKcyF2QA==",
"requires": {
"tslib": "1.9.0"
}
},
"@angular/platform-browser-dynamic": {
- "version": "4.4.6",
- "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.6.tgz",
- "integrity": "sha1-TT2aanvyzz3kBYphWuBZ7/ZB+jY=",
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.2.0.tgz",
+ "integrity": "sha512-xG1eNoi8sm4Jcly2y98r5mqYVe3XV8sUJCtOhvGBYtvt4dKEQ5tOns6fWQ0nUbl6Vv3Y0xgGUS1JCtfut3DuaQ==",
"requires": {
"tslib": "1.9.0"
}
},
"@angular/router": {
- "version": "4.4.6",
- "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.4.6.tgz",
- "integrity": "sha1-D2rSmuD/jSyeo3m9MgRHIXt+yGY=",
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/@angular/router/-/router-5.2.0.tgz",
+ "integrity": "sha512-VXDXtp2A1GQEUEhXg0ZzqHdTUERLgDSo3/Mmpzt+dgLMKlXDSCykcm4gINwE5VQLGD1zQvDFCCRv3seGRNfrqA==",
+ "requires": {
+ "tslib": "1.9.0"
+ }
+ },
+ "@covalent/core": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@covalent/core/-/core-1.0.0.tgz",
+ "integrity": "sha512-qUGL6CtyHNa3ttKGrvuQY0lJyQR9Dxp04vP0vrXmYrKapVbfYZ82qwJ2+PrX1EcWAQ6b/B2giFe0Q83ePin04g==",
"requires": {
"tslib": "1.9.0"
}
@@ -107,9 +115,9 @@
"dev": true
},
"@types/node": {
- "version": "6.0.103",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.103.tgz",
- "integrity": "sha512-EHU5B9OlENiGEziLiC2XjhjBoVTiX6s4JwZrMHkLQzrzOA0bfZKfcT3fZaalgujcrs2O97VgKaxqguwV+12UJQ==",
+ "version": "6.0.106",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.106.tgz",
+ "integrity": "sha512-U4Zv5fx7letrisRv6HgSSPSY00FZM4NMIkilt+IAExvQLuNa6jYVwCKcnSs2NqTN4+KDl9PskvcCiMce9iePCA==",
"dev": true
},
"@types/q": {
@@ -237,8 +245,8 @@
"async": "2.6.0",
"buffer-crc32": "0.2.13",
"glob": "7.1.2",
- "lodash": "4.17.5",
- "readable-stream": "2.3.5",
+ "lodash": "4.17.10",
+ "readable-stream": "2.3.6",
"tar-stream": "1.5.5",
"walkdir": "0.0.11",
"zip-stream": "1.2.0"
@@ -250,7 +258,7 @@
"integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==",
"dev": true,
"requires": {
- "lodash": "4.17.5"
+ "lodash": "4.17.10"
}
},
"glob": {
@@ -268,9 +276,9 @@
}
},
"lodash": {
- "version": "4.17.5",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
- "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==",
+ "version": "4.17.10",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+ "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
"dev": true
},
"minimatch": {
@@ -293,9 +301,9 @@
"glob": "7.1.2",
"graceful-fs": "4.1.11",
"lazystream": "1.0.0",
- "lodash": "4.17.5",
+ "lodash": "4.17.10",
"normalize-path": "2.1.1",
- "readable-stream": "2.3.5"
+ "readable-stream": "2.3.6"
},
"dependencies": {
"glob": {
@@ -312,10 +320,16 @@
"path-is-absolute": "1.0.1"
}
},
+ "graceful-fs": {
+ "version": "4.1.11",
+ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+ "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+ "dev": true
+ },
"lodash": {
- "version": "4.17.5",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
- "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==",
+ "version": "4.17.10",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+ "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
"dev": true
},
"minimatch": {
@@ -336,7 +350,7 @@
"dev": true,
"requires": {
"delegates": "1.0.0",
- "readable-stream": "2.3.5"
+ "readable-stream": "2.3.6"
}
},
"argparse": {
@@ -466,9 +480,9 @@
"dev": true
},
"aws4": {
- "version": "1.6.0",
- "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
- "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz",
+ "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==",
"dev": true
},
"backo2": {
@@ -526,7 +540,7 @@
"integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==",
"dev": true,
"requires": {
- "readable-stream": "2.3.5",
+ "readable-stream": "2.3.6",
"safe-buffer": "5.1.1"
}
},
@@ -561,7 +575,7 @@
"content-type": "1.0.4",
"debug": "2.6.9",
"depd": "1.1.2",
- "http-errors": "1.6.2",
+ "http-errors": "1.6.3",
"iconv-lite": "0.4.19",
"on-finished": "2.3.0",
"qs": "6.5.1",
@@ -685,7 +699,7 @@
"requires": {
"anymatch": "1.3.2",
"async-each": "1.0.1",
- "fsevents": "1.1.3",
+ "fsevents": "1.2.2",
"glob-parent": "2.0.0",
"inherits": "2.0.3",
"is-binary-path": "1.0.1",
@@ -742,13 +756,13 @@
"integrity": "sha1-RYwH4J4NkA/Ci3Cj/sLazR0st/Y=",
"dev": true,
"requires": {
- "lodash": "4.17.5"
+ "lodash": "4.17.10"
},
"dependencies": {
"lodash": {
- "version": "4.17.5",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
- "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==",
+ "version": "4.17.10",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+ "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
"dev": true
}
}
@@ -795,7 +809,7 @@
"buffer-crc32": "0.2.13",
"crc32-stream": "2.0.0",
"normalize-path": "2.1.1",
- "readable-stream": "2.3.5"
+ "readable-stream": "2.3.6"
}
},
"concat-map": {
@@ -835,9 +849,9 @@
"dev": true
},
"core-js": {
- "version": "2.5.4",
- "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.4.tgz",
- "integrity": "sha1-8si/GB8qgLkvNgEhQpzmOi8K6uA=",
+ "version": "2.5.5",
+ "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
+ "integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs=",
"dev": true
},
"core-util-is": {
@@ -859,7 +873,7 @@
"dev": true,
"requires": {
"crc": "3.5.0",
- "readable-stream": "2.3.5"
+ "readable-stream": "2.3.6"
}
},
"cross-spawn": {
@@ -881,6 +895,15 @@
"pseudomap": "1.0.2",
"yallist": "2.1.2"
}
+ },
+ "which": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
+ "integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==",
+ "dev": true,
+ "requires": {
+ "isexe": "2.0.0"
+ }
}
}
},
@@ -984,7 +1007,7 @@
"object-assign": "4.1.1",
"pify": "2.3.0",
"pinkie-promise": "2.0.1",
- "rimraf": "2.6.2"
+ "rimraf": "2.2.8"
}
},
"delayed-stream": {
@@ -1242,9 +1265,9 @@
"dev": true
},
"eventemitter3": {
- "version": "1.2.0",
- "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-1.2.0.tgz",
- "integrity": "sha1-HIaZHYFq0eUEdQ5zh0Ik7PO+xQg=",
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.0.1.tgz",
+ "integrity": "sha512-QOCPu979MMWX9XNlfRZoin+Wm+bK1SP7vv3NGUniYwuSJK/+cPA10blMaeRgzg31RvoSFk6FsCDVa4vNryBTGA==",
"dev": true
},
"exit": {
@@ -1423,11 +1446,51 @@
"lodash": "2.4.2"
},
"dependencies": {
+ "glob": {
+ "version": "3.2.11",
+ "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
+ "integrity": "sha1-Spc/Y1uRkPcV0QmH1cAP0oFevj0=",
+ "dev": true,
+ "requires": {
+ "inherits": "2.0.3",
+ "minimatch": "0.3.0"
+ }
+ },
"lodash": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz",
"integrity": "sha1-+t2DS5aDBz2hebPq5tnA0VBT9z4=",
"dev": true
+ },
+ "minimatch": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
+ "integrity": "sha1-J12O2qxPG7MyZHIInnlJyDlGmd0=",
+ "dev": true,
+ "requires": {
+ "lru-cache": "2.7.3",
+ "sigmund": "1.0.1"
+ }
+ }
+ }
+ },
+ "follow-redirects": {
+ "version": "1.4.1",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.4.1.tgz",
+ "integrity": "sha512-uxYePVPogtya1ktGnAAXOacnbIuRMB4dkvqeNz2qTtTQsuzSfbDolV+wMMKxAmCx0bLgAKLbBOkjItMbbkR1vg==",
+ "dev": true,
+ "requires": {
+ "debug": "3.1.0"
+ },
+ "dependencies": {
+ "debug": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+ "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+ "dev": true,
+ "requires": {
+ "ms": "2.0.0"
+ }
}
}
},
@@ -1479,39 +1542,29 @@
"dev": true
},
"fsevents": {
- "version": "1.1.3",
- "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.3.tgz",
- "integrity": "sha512-WIr7iDkdmdbxu/Gh6eKEZJL6KPE74/5MEsf2whTOFNxbIoIixogroLdKYqB6FDav4Wavh/lZdzzd3b2KxIXC5Q==",
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.2.tgz",
+ "integrity": "sha512-iownA+hC4uHFp+7gwP/y5SzaiUo7m2vpa0dhpzw8YuKtiZsz7cIXsFbXpLEeBM6WuCQyw1MH4RRe6XI8GFUctQ==",
"dev": true,
"optional": true,
"requires": {
"nan": "2.10.0",
- "node-pre-gyp": "0.6.39"
+ "node-pre-gyp": "0.9.1"
},
"dependencies": {
"abbrev": {
- "version": "1.1.0",
+ "version": "1.1.1",
"bundled": true,
"dev": true,
"optional": true
},
- "ajv": {
- "version": "4.11.8",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "co": "4.6.0",
- "json-stable-stringify": "1.0.1"
- }
- },
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
},
"aproba": {
- "version": "1.1.1",
+ "version": "1.2.0",
"bundled": true,
"dev": true,
"optional": true
@@ -1523,91 +1576,25 @@
"optional": true,
"requires": {
"delegates": "1.0.0",
- "readable-stream": "2.2.9"
+ "readable-stream": "2.3.6"
}
},
- "asn1": {
- "version": "0.2.3",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "assert-plus": {
- "version": "0.2.0",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "asynckit": {
- "version": "0.4.0",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "aws-sign2": {
- "version": "0.6.0",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "aws4": {
- "version": "1.6.0",
- "bundled": true,
- "dev": true,
- "optional": true
- },
"balanced-match": {
- "version": "0.4.2",
- "bundled": true,
- "dev": true
- },
- "bcrypt-pbkdf": {
- "version": "1.0.1",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "tweetnacl": "0.14.5"
- }
- },
- "block-stream": {
- "version": "0.0.9",
- "bundled": true,
- "dev": true,
- "requires": {
- "inherits": "2.0.3"
- }
- },
- "boom": {
- "version": "2.10.1",
- "bundled": true,
- "dev": true,
- "requires": {
- "hoek": "2.16.3"
- }
- },
- "brace-expansion": {
- "version": "1.1.7",
- "bundled": true,
- "dev": true,
- "requires": {
- "balanced-match": "0.4.2",
- "concat-map": "0.0.1"
- }
- },
- "buffer-shims": {
"version": "1.0.0",
"bundled": true,
"dev": true
},
- "caseless": {
- "version": "0.12.0",
+ "brace-expansion": {
+ "version": "1.1.11",
"bundled": true,
"dev": true,
- "optional": true
+ "requires": {
+ "balanced-match": "1.0.0",
+ "concat-map": "0.0.1"
+ }
},
- "co": {
- "version": "4.6.0",
+ "chownr": {
+ "version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
@@ -1617,14 +1604,6 @@
"bundled": true,
"dev": true
},
- "combined-stream": {
- "version": "1.0.5",
- "bundled": true,
- "dev": true,
- "requires": {
- "delayed-stream": "1.0.0"
- }
- },
"concat-map": {
"version": "0.0.1",
"bundled": true,
@@ -1638,35 +1617,11 @@
"core-util-is": {
"version": "1.0.2",
"bundled": true,
- "dev": true
- },
- "cryptiles": {
- "version": "2.0.5",
- "bundled": true,
"dev": true,
- "requires": {
- "boom": "2.10.1"
- }
- },
- "dashdash": {
- "version": "1.14.1",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "assert-plus": "1.0.0"
- },
- "dependencies": {
- "assert-plus": {
- "version": "1.0.0",
- "bundled": true,
- "dev": true,
- "optional": true
- }
- }
+ "optional": true
},
"debug": {
- "version": "2.6.8",
+ "version": "2.6.9",
"bundled": true,
"dev": true,
"optional": true,
@@ -1680,11 +1635,6 @@
"dev": true,
"optional": true
},
- "delayed-stream": {
- "version": "1.0.0",
- "bundled": true,
- "dev": true
- },
"delegates": {
"version": "1.0.0",
"bundled": true,
@@ -1692,74 +1642,25 @@
"optional": true
},
"detect-libc": {
- "version": "1.0.2",
+ "version": "1.0.3",
"bundled": true,
"dev": true,
"optional": true
},
- "ecc-jsbn": {
- "version": "0.1.1",
+ "fs-minipass": {
+ "version": "1.2.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
- "jsbn": "0.1.1"
- }
- },
- "extend": {
- "version": "3.0.1",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "extsprintf": {
- "version": "1.0.2",
- "bundled": true,
- "dev": true
- },
- "forever-agent": {
- "version": "0.6.1",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "form-data": {
- "version": "2.1.4",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "asynckit": "0.4.0",
- "combined-stream": "1.0.5",
- "mime-types": "2.1.15"
+ "minipass": "2.2.4"
}
},
"fs.realpath": {
"version": "1.0.0",
"bundled": true,
- "dev": true
- },
- "fstream": {
- "version": "1.0.11",
- "bundled": true,
"dev": true,
- "requires": {
- "graceful-fs": "4.1.11",
- "inherits": "2.0.3",
- "mkdirp": "0.5.1",
- "rimraf": "2.6.1"
- }
- },
- "fstream-ignore": {
- "version": "1.0.5",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "fstream": "1.0.11",
- "inherits": "2.0.3",
- "minimatch": "3.0.4"
- }
+ "optional": true
},
"gauge": {
"version": "2.7.4",
@@ -1767,7 +1668,7 @@
"dev": true,
"optional": true,
"requires": {
- "aproba": "1.1.1",
+ "aproba": "1.2.0",
"console-control-strings": "1.1.0",
"has-unicode": "2.0.1",
"object-assign": "4.1.1",
@@ -1777,27 +1678,11 @@
"wide-align": "1.1.2"
}
},
- "getpass": {
- "version": "0.1.7",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "assert-plus": "1.0.0"
- },
- "dependencies": {
- "assert-plus": {
- "version": "1.0.0",
- "bundled": true,
- "dev": true,
- "optional": true
- }
- }
- },
"glob": {
"version": "7.1.2",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"fs.realpath": "1.0.0",
"inflight": "1.0.6",
@@ -1807,64 +1692,35 @@
"path-is-absolute": "1.0.1"
}
},
- "graceful-fs": {
- "version": "4.1.11",
- "bundled": true,
- "dev": true
- },
- "har-schema": {
- "version": "1.0.5",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "har-validator": {
- "version": "4.2.1",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "ajv": "4.11.8",
- "har-schema": "1.0.5"
- }
- },
"has-unicode": {
"version": "2.0.1",
"bundled": true,
"dev": true,
"optional": true
},
- "hawk": {
- "version": "3.1.3",
- "bundled": true,
- "dev": true,
- "requires": {
- "boom": "2.10.1",
- "cryptiles": "2.0.5",
- "hoek": "2.16.3",
- "sntp": "1.0.9"
- }
- },
- "hoek": {
- "version": "2.16.3",
- "bundled": true,
- "dev": true
- },
- "http-signature": {
- "version": "1.1.1",
+ "iconv-lite": {
+ "version": "0.4.21",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
- "assert-plus": "0.2.0",
- "jsprim": "1.4.0",
- "sshpk": "1.13.0"
+ "safer-buffer": "2.1.2"
+ }
+ },
+ "ignore-walk": {
+ "version": "3.0.1",
+ "bundled": true,
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "minimatch": "3.0.4"
}
},
"inflight": {
"version": "1.0.6",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"once": "1.4.0",
"wrappy": "1.0.2"
@@ -1876,7 +1732,7 @@
"dev": true
},
"ini": {
- "version": "1.3.4",
+ "version": "1.3.5",
"bundled": true,
"dev": true,
"optional": true
@@ -1889,104 +1745,18 @@
"number-is-nan": "1.0.1"
}
},
- "is-typedarray": {
- "version": "1.0.0",
- "bundled": true,
- "dev": true,
- "optional": true
- },
"isarray": {
"version": "1.0.0",
"bundled": true,
- "dev": true
- },
- "isstream": {
- "version": "0.1.2",
- "bundled": true,
"dev": true,
"optional": true
},
- "jodid25519": {
- "version": "1.0.2",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "jsbn": "0.1.1"
- }
- },
- "jsbn": {
- "version": "0.1.1",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "json-schema": {
- "version": "0.2.3",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "json-stable-stringify": {
- "version": "1.0.1",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "jsonify": "0.0.0"
- }
- },
- "json-stringify-safe": {
- "version": "5.0.1",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "jsonify": {
- "version": "0.0.0",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "jsprim": {
- "version": "1.4.0",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "assert-plus": "1.0.0",
- "extsprintf": "1.0.2",
- "json-schema": "0.2.3",
- "verror": "1.3.6"
- },
- "dependencies": {
- "assert-plus": {
- "version": "1.0.0",
- "bundled": true,
- "dev": true,
- "optional": true
- }
- }
- },
- "mime-db": {
- "version": "1.27.0",
- "bundled": true,
- "dev": true
- },
- "mime-types": {
- "version": "2.1.15",
- "bundled": true,
- "dev": true,
- "requires": {
- "mime-db": "1.27.0"
- }
- },
"minimatch": {
"version": "3.0.4",
"bundled": true,
"dev": true,
"requires": {
- "brace-expansion": "1.1.7"
+ "brace-expansion": "1.1.11"
}
},
"minimist": {
@@ -1994,6 +1764,24 @@
"bundled": true,
"dev": true
},
+ "minipass": {
+ "version": "2.2.4",
+ "bundled": true,
+ "dev": true,
+ "requires": {
+ "safe-buffer": "5.1.1",
+ "yallist": "3.0.2"
+ }
+ },
+ "minizlib": {
+ "version": "1.1.0",
+ "bundled": true,
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "minipass": "2.2.4"
+ }
+ },
"mkdirp": {
"version": "0.5.1",
"bundled": true,
@@ -2008,23 +1796,33 @@
"dev": true,
"optional": true
},
- "node-pre-gyp": {
- "version": "0.6.39",
+ "needle": {
+ "version": "2.2.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
- "detect-libc": "1.0.2",
- "hawk": "3.1.3",
+ "debug": "2.6.9",
+ "iconv-lite": "0.4.21",
+ "sax": "1.2.4"
+ }
+ },
+ "node-pre-gyp": {
+ "version": "0.9.1",
+ "bundled": true,
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "detect-libc": "1.0.3",
"mkdirp": "0.5.1",
+ "needle": "2.2.0",
"nopt": "4.0.1",
- "npmlog": "4.1.0",
- "rc": "1.2.1",
- "request": "2.81.0",
- "rimraf": "2.6.1",
- "semver": "5.3.0",
- "tar": "2.2.1",
- "tar-pack": "3.4.0"
+ "npm-packlist": "1.1.10",
+ "npmlog": "4.1.2",
+ "rc": "1.2.6",
+ "rimraf": "2.6.2",
+ "semver": "5.5.0",
+ "tar": "4.4.1"
}
},
"nopt": {
@@ -2033,12 +1831,28 @@
"dev": true,
"optional": true,
"requires": {
- "abbrev": "1.1.0",
- "osenv": "0.1.4"
+ "abbrev": "1.1.1",
+ "osenv": "0.1.5"
+ }
+ },
+ "npm-bundled": {
+ "version": "1.0.3",
+ "bundled": true,
+ "dev": true,
+ "optional": true
+ },
+ "npm-packlist": {
+ "version": "1.1.10",
+ "bundled": true,
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "ignore-walk": "3.0.1",
+ "npm-bundled": "1.0.3"
}
},
"npmlog": {
- "version": "4.1.0",
+ "version": "4.1.2",
"bundled": true,
"dev": true,
"optional": true,
@@ -2054,12 +1868,6 @@
"bundled": true,
"dev": true
},
- "oauth-sign": {
- "version": "0.8.2",
- "bundled": true,
- "dev": true,
- "optional": true
- },
"object-assign": {
"version": "4.1.1",
"bundled": true,
@@ -2087,7 +1895,7 @@
"optional": true
},
"osenv": {
- "version": "0.1.4",
+ "version": "0.1.5",
"bundled": true,
"dev": true,
"optional": true,
@@ -2099,39 +1907,23 @@
"path-is-absolute": {
"version": "1.0.1",
"bundled": true,
- "dev": true
- },
- "performance-now": {
- "version": "0.2.0",
- "bundled": true,
"dev": true,
"optional": true
},
"process-nextick-args": {
- "version": "1.0.7",
- "bundled": true,
- "dev": true
- },
- "punycode": {
- "version": "1.4.1",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "qs": {
- "version": "6.4.0",
+ "version": "2.0.0",
"bundled": true,
"dev": true,
"optional": true
},
"rc": {
- "version": "1.2.1",
+ "version": "1.2.6",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"deep-extend": "0.4.2",
- "ini": "1.3.4",
+ "ini": "1.3.5",
"minimist": "1.2.0",
"strip-json-comments": "2.0.1"
},
@@ -2145,64 +1937,48 @@
}
},
"readable-stream": {
- "version": "2.2.9",
- "bundled": true,
- "dev": true,
- "requires": {
- "buffer-shims": "1.0.0",
- "core-util-is": "1.0.2",
- "inherits": "2.0.3",
- "isarray": "1.0.0",
- "process-nextick-args": "1.0.7",
- "string_decoder": "1.0.1",
- "util-deprecate": "1.0.2"
- }
- },
- "request": {
- "version": "2.81.0",
+ "version": "2.3.6",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
- "aws-sign2": "0.6.0",
- "aws4": "1.6.0",
- "caseless": "0.12.0",
- "combined-stream": "1.0.5",
- "extend": "3.0.1",
- "forever-agent": "0.6.1",
- "form-data": "2.1.4",
- "har-validator": "4.2.1",
- "hawk": "3.1.3",
- "http-signature": "1.1.1",
- "is-typedarray": "1.0.0",
- "isstream": "0.1.2",
- "json-stringify-safe": "5.0.1",
- "mime-types": "2.1.15",
- "oauth-sign": "0.8.2",
- "performance-now": "0.2.0",
- "qs": "6.4.0",
- "safe-buffer": "5.0.1",
- "stringstream": "0.0.5",
- "tough-cookie": "2.3.2",
- "tunnel-agent": "0.6.0",
- "uuid": "3.0.1"
+ "core-util-is": "1.0.2",
+ "inherits": "2.0.3",
+ "isarray": "1.0.0",
+ "process-nextick-args": "2.0.0",
+ "safe-buffer": "5.1.1",
+ "string_decoder": "1.1.1",
+ "util-deprecate": "1.0.2"
}
},
"rimraf": {
- "version": "2.6.1",
+ "version": "2.6.2",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"glob": "7.1.2"
}
},
"safe-buffer": {
- "version": "5.0.1",
+ "version": "5.1.1",
"bundled": true,
"dev": true
},
+ "safer-buffer": {
+ "version": "2.1.2",
+ "bundled": true,
+ "dev": true,
+ "optional": true
+ },
+ "sax": {
+ "version": "1.2.4",
+ "bundled": true,
+ "dev": true,
+ "optional": true
+ },
"semver": {
- "version": "5.3.0",
+ "version": "5.5.0",
"bundled": true,
"dev": true,
"optional": true
@@ -2219,39 +1995,6 @@
"dev": true,
"optional": true
},
- "sntp": {
- "version": "1.0.9",
- "bundled": true,
- "dev": true,
- "requires": {
- "hoek": "2.16.3"
- }
- },
- "sshpk": {
- "version": "1.13.0",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "asn1": "0.2.3",
- "assert-plus": "1.0.0",
- "bcrypt-pbkdf": "1.0.1",
- "dashdash": "1.14.1",
- "ecc-jsbn": "0.1.1",
- "getpass": "0.1.7",
- "jodid25519": "1.0.2",
- "jsbn": "0.1.1",
- "tweetnacl": "0.14.5"
- },
- "dependencies": {
- "assert-plus": {
- "version": "1.0.0",
- "bundled": true,
- "dev": true,
- "optional": true
- }
- }
- },
"string-width": {
"version": "1.0.2",
"bundled": true,
@@ -2263,19 +2006,14 @@
}
},
"string_decoder": {
- "version": "1.0.1",
+ "version": "1.1.1",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
- "safe-buffer": "5.0.1"
+ "safe-buffer": "5.1.1"
}
},
- "stringstream": {
- "version": "0.0.5",
- "bundled": true,
- "dev": true,
- "optional": true
- },
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
@@ -2291,81 +2029,26 @@
"optional": true
},
"tar": {
- "version": "2.2.1",
- "bundled": true,
- "dev": true,
- "requires": {
- "block-stream": "0.0.9",
- "fstream": "1.0.11",
- "inherits": "2.0.3"
- }
- },
- "tar-pack": {
- "version": "3.4.0",
+ "version": "4.4.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
- "debug": "2.6.8",
- "fstream": "1.0.11",
- "fstream-ignore": "1.0.5",
- "once": "1.4.0",
- "readable-stream": "2.2.9",
- "rimraf": "2.6.1",
- "tar": "2.2.1",
- "uid-number": "0.0.6"
+ "chownr": "1.0.1",
+ "fs-minipass": "1.2.5",
+ "minipass": "2.2.4",
+ "minizlib": "1.1.0",
+ "mkdirp": "0.5.1",
+ "safe-buffer": "5.1.1",
+ "yallist": "3.0.2"
}
},
- "tough-cookie": {
- "version": "2.3.2",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "punycode": "1.4.1"
- }
- },
- "tunnel-agent": {
- "version": "0.6.0",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "safe-buffer": "5.0.1"
- }
- },
- "tweetnacl": {
- "version": "0.14.5",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "uid-number": {
- "version": "0.0.6",
- "bundled": true,
- "dev": true,
- "optional": true
- },
"util-deprecate": {
"version": "1.0.2",
"bundled": true,
- "dev": true
- },
- "uuid": {
- "version": "3.0.1",
- "bundled": true,
"dev": true,
"optional": true
},
- "verror": {
- "version": "1.3.6",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "extsprintf": "1.0.2"
- }
- },
"wide-align": {
"version": "1.1.2",
"bundled": true,
@@ -2379,6 +2062,11 @@
"version": "1.0.2",
"bundled": true,
"dev": true
+ },
+ "yallist": {
+ "version": "3.0.2",
+ "bundled": true,
+ "dev": true
}
}
},
@@ -2391,7 +2079,15 @@
"graceful-fs": "4.1.11",
"inherits": "2.0.3",
"mkdirp": "0.5.1",
- "rimraf": "2.6.2"
+ "rimraf": "2.2.8"
+ },
+ "dependencies": {
+ "graceful-fs": {
+ "version": "4.1.11",
+ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+ "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+ "dev": true
+ }
}
},
"gauge": {
@@ -2469,13 +2165,22 @@
"optional": true
},
"glob": {
- "version": "3.2.11",
- "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
- "integrity": "sha1-Spc/Y1uRkPcV0QmH1cAP0oFevj0=",
+ "version": "3.1.21",
+ "resolved": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
+ "integrity": "sha1-0p4KBV3qUTj00H7UDomC6DwgZs0=",
"dev": true,
"requires": {
- "inherits": "2.0.3",
- "minimatch": "0.3.0"
+ "graceful-fs": "1.2.3",
+ "inherits": "1.0.2",
+ "minimatch": "0.2.14"
+ },
+ "dependencies": {
+ "inherits": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.2.tgz",
+ "integrity": "sha1-ykMJ2t7mtUzAuNJH6NfHoJdb3Js=",
+ "dev": true
+ }
}
},
"glob-base": {
@@ -2543,7 +2248,7 @@
"dev": true,
"requires": {
"glob": "7.1.2",
- "lodash": "4.17.5",
+ "lodash": "4.17.10",
"minimatch": "3.0.4"
},
"dependencies": {
@@ -2562,9 +2267,9 @@
}
},
"lodash": {
- "version": "4.17.5",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
- "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==",
+ "version": "4.17.10",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+ "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
"dev": true
},
"minimatch": {
@@ -2579,9 +2284,9 @@
}
},
"graceful-fs": {
- "version": "4.1.11",
- "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
- "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+ "version": "1.2.3",
+ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz",
+ "integrity": "sha1-FaSAaldUfLLS2/J/QuiajDRRs2Q=",
"dev": true
},
"grunt": {
@@ -2610,62 +2315,6 @@
"rimraf": "2.2.8",
"underscore.string": "2.2.1",
"which": "1.0.9"
- },
- "dependencies": {
- "glob": {
- "version": "3.1.21",
- "resolved": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
- "integrity": "sha1-0p4KBV3qUTj00H7UDomC6DwgZs0=",
- "dev": true,
- "requires": {
- "graceful-fs": "1.2.3",
- "inherits": "1.0.2",
- "minimatch": "0.2.14"
- }
- },
- "graceful-fs": {
- "version": "1.2.3",
- "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz",
- "integrity": "sha1-FaSAaldUfLLS2/J/QuiajDRRs2Q=",
- "dev": true
- },
- "inherits": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.2.tgz",
- "integrity": "sha1-ykMJ2t7mtUzAuNJH6NfHoJdb3Js=",
- "dev": true
- },
- "minimatch": {
- "version": "0.2.14",
- "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
- "integrity": "sha1-x054BXT2PG+aCQ6Q775u9TpqdWo=",
- "dev": true,
- "requires": {
- "lru-cache": "2.7.3",
- "sigmund": "1.0.1"
- }
- },
- "nopt": {
- "version": "1.0.10",
- "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
- "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
- "dev": true,
- "requires": {
- "abbrev": "1.1.1"
- }
- },
- "rimraf": {
- "version": "2.2.8",
- "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
- "integrity": "sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI=",
- "dev": true
- },
- "which": {
- "version": "1.0.9",
- "resolved": "https://registry.npmjs.org/which/-/which-1.0.9.tgz",
- "integrity": "sha1-RgwdoPgQED0DIam2M6+eV15kSG8=",
- "dev": true
- }
}
},
"grunt-bump": {
@@ -2719,6 +2368,15 @@
"requires": {
"brace-expansion": "1.1.11"
}
+ },
+ "nopt": {
+ "version": "3.0.6",
+ "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+ "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+ "dev": true,
+ "requires": {
+ "abbrev": "1.1.1"
+ }
}
}
},
@@ -2731,15 +2389,15 @@
"archiver": "1.3.0",
"chalk": "1.1.3",
"iltorb": "1.3.10",
- "lodash": "4.17.5",
+ "lodash": "4.17.10",
"pretty-bytes": "4.0.2",
"stream-buffers": "2.2.0"
},
"dependencies": {
"lodash": {
- "version": "4.17.5",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
- "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==",
+ "version": "4.17.10",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+ "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
"dev": true
}
}
@@ -2815,14 +2473,6 @@
"lodash": "0.9.2",
"underscore.string": "2.2.1",
"which": "1.0.9"
- },
- "dependencies": {
- "which": {
- "version": "1.0.9",
- "resolved": "https://registry.npmjs.org/which/-/which-1.0.9.tgz",
- "integrity": "sha1-RgwdoPgQED0DIam2M6+eV15kSG8=",
- "dev": true
- }
}
},
"grunt-sass": {
@@ -2947,32 +2597,25 @@
"dev": true
},
"http-errors": {
- "version": "1.6.2",
- "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz",
- "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=",
+ "version": "1.6.3",
+ "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+ "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
"dev": true,
"requires": {
- "depd": "1.1.1",
+ "depd": "1.1.2",
"inherits": "2.0.3",
- "setprototypeof": "1.0.3",
+ "setprototypeof": "1.1.0",
"statuses": "1.5.0"
- },
- "dependencies": {
- "depd": {
- "version": "1.1.1",
- "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz",
- "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=",
- "dev": true
- }
}
},
"http-proxy": {
- "version": "1.16.2",
- "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.16.2.tgz",
- "integrity": "sha1-Bt/ykpUr9k2+hHH6nfcwZtTzd0I=",
+ "version": "1.17.0",
+ "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.17.0.tgz",
+ "integrity": "sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==",
"dev": true,
"requires": {
- "eventemitter3": "1.2.0",
+ "eventemitter3": "3.0.1",
+ "follow-redirects": "1.4.1",
"requires-port": "1.0.0"
}
},
@@ -3014,7 +2657,7 @@
"detect-libc": "0.2.0",
"nan": "2.10.0",
"node-gyp": "3.6.2",
- "prebuild-install": "2.5.1"
+ "prebuild-install": "2.5.3"
}
},
"in-publish": {
@@ -3354,6 +2997,15 @@
"brace-expansion": "1.1.11"
}
},
+ "nopt": {
+ "version": "3.0.6",
+ "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+ "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+ "dev": true,
+ "requires": {
+ "abbrev": "1.0.9"
+ }
+ },
"supports-color": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
@@ -3363,6 +3015,15 @@
"has-flag": "1.0.0"
}
},
+ "which": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
+ "integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==",
+ "dev": true,
+ "requires": {
+ "isexe": "2.0.0"
+ }
+ },
"wordwrap": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
@@ -3504,13 +3165,13 @@
"colors": "1.2.1",
"combine-lists": "1.0.1",
"connect": "3.6.6",
- "core-js": "2.5.4",
+ "core-js": "2.5.5",
"di": "0.0.1",
"dom-serialize": "2.2.1",
"expand-braces": "0.1.2",
"glob": "7.1.2",
"graceful-fs": "4.1.11",
- "http-proxy": "1.16.2",
+ "http-proxy": "1.17.0",
"isbinaryfile": "3.0.2",
"lodash": "3.10.1",
"log4js": "0.6.38",
@@ -3547,6 +3208,12 @@
"path-is-absolute": "1.0.1"
}
},
+ "graceful-fs": {
+ "version": "4.1.11",
+ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+ "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+ "dev": true
+ },
"lodash": {
"version": "3.10.1",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
@@ -3562,6 +3229,15 @@
"brace-expansion": "1.1.11"
}
},
+ "rimraf": {
+ "version": "2.6.2",
+ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
+ "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
+ "dev": true,
+ "requires": {
+ "glob": "7.1.2"
+ }
+ },
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -3578,6 +3254,17 @@
"requires": {
"fs-access": "1.0.1",
"which": "1.3.0"
+ },
+ "dependencies": {
+ "which": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
+ "integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==",
+ "dev": true,
+ "requires": {
+ "isexe": "2.0.0"
+ }
+ }
}
},
"karma-cli": {
@@ -3689,7 +3376,7 @@
"integrity": "sha1-9plf4PggOS9hOWvolGJAe7dxaOQ=",
"dev": true,
"requires": {
- "readable-stream": "2.3.5"
+ "readable-stream": "2.3.6"
}
},
"lcid": {
@@ -3734,6 +3421,14 @@
"pify": "2.3.0",
"pinkie-promise": "2.0.1",
"strip-bom": "2.0.0"
+ },
+ "dependencies": {
+ "graceful-fs": {
+ "version": "4.1.11",
+ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+ "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+ "dev": true
+ }
}
},
"lodash": {
@@ -3912,9 +3607,9 @@
"optional": true
},
"minimatch": {
- "version": "0.3.0",
- "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
- "integrity": "sha1-J12O2qxPG7MyZHIInnlJyDlGmd0=",
+ "version": "0.2.14",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
+ "integrity": "sha1-x054BXT2PG+aCQ6Q775u9TpqdWo=",
"dev": true,
"requires": {
"lru-cache": "2.7.3",
@@ -3978,9 +3673,9 @@
"dev": true
},
"node-abi": {
- "version": "2.3.0",
- "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.3.0.tgz",
- "integrity": "sha512-zwm6vU3SsVgw3e9fu48JBaRBCJGIvAgysDsqtf5+vEexFE71bEOtaMWb5zr/zODZNzTPtQlqUUpC79k68Hspow==",
+ "version": "2.4.0",
+ "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.4.0.tgz",
+ "integrity": "sha512-hRUz0vG+eJfSqwU6rOgW6wNyX85ec8OEE9n4A+u+eoiE8oTePhCkUFTNmwQ+86Kyu429PCLNNyI2P2jL9qKXhw==",
"dev": true,
"optional": true,
"requires": {
@@ -4002,10 +3697,10 @@
"npmlog": "4.1.2",
"osenv": "0.1.5",
"request": "2.85.0",
- "rimraf": "2.6.2",
+ "rimraf": "2.2.8",
"semver": "5.3.0",
"tar": "2.2.1",
- "which": "1.3.0"
+ "which": "1.0.9"
},
"dependencies": {
"glob": {
@@ -4022,6 +3717,12 @@
"path-is-absolute": "1.0.1"
}
},
+ "graceful-fs": {
+ "version": "4.1.11",
+ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+ "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+ "dev": true
+ },
"minimatch": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -4031,6 +3732,15 @@
"brace-expansion": "1.1.11"
}
},
+ "nopt": {
+ "version": "3.0.6",
+ "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+ "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+ "dev": true,
+ "requires": {
+ "abbrev": "1.1.1"
+ }
+ },
"semver": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
@@ -4190,7 +3900,7 @@
"dev": true,
"requires": {
"aws-sign2": "0.6.0",
- "aws4": "1.6.0",
+ "aws4": "1.7.0",
"caseless": "0.11.0",
"combined-stream": "1.0.6",
"extend": "3.0.1",
@@ -4236,9 +3946,9 @@
"optional": true
},
"nopt": {
- "version": "3.0.6",
- "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
- "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+ "version": "1.0.10",
+ "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+ "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
"dev": true,
"requires": {
"abbrev": "1.1.1"
@@ -4494,6 +4204,14 @@
"graceful-fs": "4.1.11",
"pify": "2.3.0",
"pinkie-promise": "2.0.1"
+ },
+ "dependencies": {
+ "graceful-fs": {
+ "version": "4.1.11",
+ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+ "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+ "dev": true
+ }
}
},
"performance-now": {
@@ -4533,9 +4251,9 @@
}
},
"prebuild-install": {
- "version": "2.5.1",
- "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-2.5.1.tgz",
- "integrity": "sha512-3DX9L6pzwc1m1ksMkW3Ky2WLgPQUBiySOfXVl3WZyAeJSyJb4wtoH9OmeRGcubAWsMlLiL8BTHbwfm/jPQE9Ag==",
+ "version": "2.5.3",
+ "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-2.5.3.tgz",
+ "integrity": "sha512-/rI36cN2g7vDQnKWN8Uzupi++KjyqS9iS+/fpwG4Ea8d0Pip0PQ5bshUNzVwt+/D2MRfhVAplYMMvWLqWrCF/g==",
"dev": true,
"optional": true,
"requires": {
@@ -4544,13 +4262,13 @@
"github-from-package": "0.0.0",
"minimist": "1.2.0",
"mkdirp": "0.5.1",
- "node-abi": "2.3.0",
+ "node-abi": "2.4.0",
"noop-logger": "0.1.1",
"npmlog": "4.1.2",
"os-homedir": "1.0.2",
"pump": "2.0.1",
"rc": "1.2.6",
- "simple-get": "2.7.0",
+ "simple-get": "2.8.1",
"tar-fs": "1.16.0",
"tunnel-agent": "0.6.0",
"which-pm-runs": "1.0.0"
@@ -4603,7 +4321,7 @@
"dev": true,
"requires": {
"@types/jasmine": "2.8.6",
- "@types/node": "6.0.103",
+ "@types/node": "6.0.106",
"@types/q": "0.0.32",
"@types/selenium-webdriver": "2.53.37",
"adm-zip": "0.4.7",
@@ -4648,6 +4366,15 @@
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
},
+ "rimraf": {
+ "version": "2.6.2",
+ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
+ "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
+ "dev": true,
+ "requires": {
+ "glob": "7.1.2"
+ }
+ },
"webdriver-manager": {
"version": "10.3.0",
"resolved": "https://registry.npmjs.org/webdriver-manager/-/webdriver-manager-10.3.0.tgz",
@@ -4768,11 +4495,35 @@
"unpipe": "1.0.0"
},
"dependencies": {
+ "depd": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz",
+ "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=",
+ "dev": true
+ },
+ "http-errors": {
+ "version": "1.6.2",
+ "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz",
+ "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=",
+ "dev": true,
+ "requires": {
+ "depd": "1.1.1",
+ "inherits": "2.0.3",
+ "setprototypeof": "1.0.3",
+ "statuses": "1.5.0"
+ }
+ },
"iconv-lite": {
"version": "0.4.19",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
"integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==",
"dev": true
+ },
+ "setprototypeof": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz",
+ "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=",
+ "dev": true
}
}
},
@@ -4820,9 +4571,9 @@
}
},
"readable-stream": {
- "version": "2.3.5",
- "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.5.tgz",
- "integrity": "sha512-tK0yDhrkygt/knjowCUiWP9YdV7c5R+8cR0r/kt9ZhBU906Fs6RpQJCEilamRJj1Nx2rWI6LkW9gKqjTkshhEw==",
+ "version": "2.3.6",
+ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+ "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
"dev": true,
"requires": {
"core-util-is": "1.0.2",
@@ -4830,7 +4581,7 @@
"isarray": "1.0.0",
"process-nextick-args": "2.0.0",
"safe-buffer": "5.1.1",
- "string_decoder": "1.0.3",
+ "string_decoder": "1.1.1",
"util-deprecate": "1.0.2"
}
},
@@ -4842,10 +4593,16 @@
"requires": {
"graceful-fs": "4.1.11",
"minimatch": "3.0.4",
- "readable-stream": "2.3.5",
+ "readable-stream": "2.3.6",
"set-immediate-shim": "1.0.1"
},
"dependencies": {
+ "graceful-fs": {
+ "version": "4.1.11",
+ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+ "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+ "dev": true
+ },
"minimatch": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -4910,7 +4667,7 @@
"dev": true,
"requires": {
"aws-sign2": "0.7.0",
- "aws4": "1.6.0",
+ "aws4": "1.7.0",
"caseless": "0.12.0",
"combined-stream": "1.0.6",
"extend": "3.0.1",
@@ -4983,38 +4740,10 @@
}
},
"rimraf": {
- "version": "2.6.2",
- "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
- "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
- "dev": true,
- "requires": {
- "glob": "7.1.2"
- },
- "dependencies": {
- "glob": {
- "version": "7.1.2",
- "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
- "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
- "dev": true,
- "requires": {
- "fs.realpath": "1.0.0",
- "inflight": "1.0.6",
- "inherits": "2.0.3",
- "minimatch": "3.0.4",
- "once": "1.4.0",
- "path-is-absolute": "1.0.1"
- }
- },
- "minimatch": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
- "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
- "dev": true,
- "requires": {
- "brace-expansion": "1.1.11"
- }
- }
- }
+ "version": "2.2.8",
+ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
+ "integrity": "sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI=",
+ "dev": true
},
"roboto-fontface": {
"version": "0.7.0",
@@ -5022,11 +4751,11 @@
"integrity": "sha1-LzZGTlyZNT6EJ/VfH8p74aikF9k="
},
"rxjs": {
- "version": "5.4.3",
- "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.4.3.tgz",
- "integrity": "sha512-fSNi+y+P9ss+EZuV0GcIIqPUK07DEaMRUtLJvdcvMyFjc9dizuDjere+A4V7JrLGnm9iCc+nagV/4QdMTkqC4A==",
+ "version": "5.5.6",
+ "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.6.tgz",
+ "integrity": "sha512-v4Q5HDC0FHAQ7zcBX7T2IL6O5ltl1a2GX4ENjPXg6SjDY69Cmx9v4113C99a4wGF16ClPv5Z8mghuYorVkg/kg==",
"requires": {
- "symbol-observable": "1.2.0"
+ "symbol-observable": "1.0.1"
}
},
"safe-buffer": {
@@ -5042,7 +4771,7 @@
"dev": true,
"requires": {
"glob": "7.1.2",
- "lodash": "4.17.5",
+ "lodash": "4.17.10",
"scss-tokenizer": "0.2.3",
"yargs": "7.1.0"
},
@@ -5062,9 +4791,9 @@
}
},
"lodash": {
- "version": "4.17.5",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
- "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==",
+ "version": "4.17.10",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+ "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
"dev": true
},
"minimatch": {
@@ -5110,7 +4839,7 @@
"dev": true,
"requires": {
"adm-zip": "0.4.4",
- "rimraf": "2.6.2",
+ "rimraf": "2.2.8",
"tmp": "0.0.24",
"ws": "1.1.2",
"xml2js": "0.4.4"
@@ -5149,9 +4878,9 @@
"dev": true
},
"setprototypeof": {
- "version": "1.0.3",
- "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz",
- "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=",
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+ "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
"dev": true
},
"sigmund": {
@@ -5174,9 +4903,9 @@
"optional": true
},
"simple-get": {
- "version": "2.7.0",
- "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-2.7.0.tgz",
- "integrity": "sha512-RkE9rGPHcxYZ/baYmgJtOSM63vH0Vyq+ma5TijBcLla41SWlh8t6XYIGMR/oeZcmr+/G8k+zrClkkVrtnQ0esg==",
+ "version": "2.8.1",
+ "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-2.8.1.tgz",
+ "integrity": "sha512-lSSHRSw3mQNUGPAYRqo7xy9dhKmxFXIjLjp4KHpf99GEH2VH7C3AM+Qfx6du6jhfUi6Vm7XnbEVEf7Wb6N8jRw==",
"dev": true,
"optional": true,
"requires": {
@@ -5428,7 +5157,7 @@
"integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=",
"dev": true,
"requires": {
- "readable-stream": "2.3.5"
+ "readable-stream": "2.3.6"
}
},
"stream-buffers": {
@@ -5449,9 +5178,9 @@
}
},
"string_decoder": {
- "version": "1.0.3",
- "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
- "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+ "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
"safe-buffer": "5.1.1"
@@ -5504,9 +5233,9 @@
"dev": true
},
"symbol-observable": {
- "version": "1.2.0",
- "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
- "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
+ "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ="
},
"systemjs": {
"version": "0.20.17",
@@ -5563,7 +5292,7 @@
"requires": {
"bl": "1.2.2",
"end-of-stream": "1.4.1",
- "readable-stream": "2.3.5",
+ "readable-stream": "2.3.6",
"xtend": "4.0.1"
}
},
@@ -5835,13 +5564,10 @@
"dev": true
},
"which": {
- "version": "1.3.0",
- "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
- "integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==",
- "dev": true,
- "requires": {
- "isexe": "2.0.0"
- }
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/which/-/which-1.0.9.tgz",
+ "integrity": "sha1-RgwdoPgQED0DIam2M6+eV15kSG8=",
+ "dev": true
},
"which-module": {
"version": "1.0.0",
@@ -6010,22 +5736,22 @@
"requires": {
"archiver-utils": "1.3.0",
"compress-commons": "1.2.2",
- "lodash": "4.17.5",
- "readable-stream": "2.3.5"
+ "lodash": "4.17.10",
+ "readable-stream": "2.3.6"
},
"dependencies": {
"lodash": {
- "version": "4.17.5",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
- "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==",
+ "version": "4.17.10",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+ "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
"dev": true
}
}
},
"zone.js": {
- "version": "0.8.7",
- "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.7.tgz",
- "integrity": "sha1-FMNguWL/hu/E9QfzRCg5HrGyj7k="
+ "version": "0.8.17",
+ "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.17.tgz",
+ "integrity": "sha1-TF5RhahX2o2nk9rzkZNxxaNrKgs="
}
}
}
diff --git a/package.json b/package.json
index b1738a1..aed8a48 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,15 @@
{
"name": "nifi-fds",
- "version": "0.0.1",
+ "version": "0.0.0",
"scripts": {
- "build": "./node_modules/grunt-cli/bin/grunt compile-fds-styles",
+ "start": "./node_modules/http-server/bin/http-server .",
+ "build:demo-app": "./node_modules/grunt-cli/bin/grunt compile-fds-demo-styles",
+ "build:platform": "./node_modules/grunt-cli/bin/grunt compile-fds-styles",
+ "clean:install": "bash ./scripts/clean-install",
+ "clean:install:skipTests": "bash ./scripts/clean-install-skipTests",
+ "dev:install": "bash ./scripts/dev-install",
+ "dev:install:skipTests": "bash ./scripts/dev-install-skipTests",
+ "deploy:ghpages": "bash ./scripts/deploy-gh-pages",
"test": "./node_modules/protractor/bin/webdriver-manager update --gecko false && karma start karma.conf.js --single-run",
"test:dev": "./node_modules/protractor/bin/webdriver-manager update --gecko false && karma start karma.conf.js"
},
@@ -24,37 +31,38 @@
"bugs": {
"url": "https://github.com/apache/nifi-fds/issues"
},
- "license": "Apache License, Version 2.0",
- "author": "Scott Aslan",
- "contributors": [
- "Scott Aslan <scottyaslan@gmail.com>"
- ],
+ "license": "Apache-2.0",
"dependencies": {
"jquery": "3.2.1",
- "rxjs": "5.4.3",
+ "rxjs": "5.5.6",
"systemjs": "0.20.17",
"systemjs-plugin-text": "0.0.11",
- "zone.js": "0.8.7",
- "@angular/animations": "4.4.6",
- "@angular/cdk": "2.0.0-beta.12",
- "@angular/common": "4.4.6",
- "@angular/compiler": "4.4.6",
- "@angular/core": "4.4.6",
- "@angular/flex-layout": "2.0.0-beta.9",
- "@angular/forms": "4.4.6",
- "@angular/http": "4.4.6",
- "@angular/material": "2.0.0-beta.12",
- "@angular/platform-browser": "4.4.6",
- "@angular/platform-browser-dynamic": "4.4.6",
- "@angular/router": "4.4.6",
+ "zone.js": "0.8.17",
+ "@angular/animations": "5.2.0",
+ "@angular/cdk": "5.2.0",
+ "@angular/common": "5.2.0",
+ "@angular/compiler": "5.2.0",
+ "@angular/core": "5.2.0",
+ "@angular/flex-layout": "5.0.0-beta.14",
+ "@angular/forms": "5.2.0",
+ "@angular/http": "5.2.0",
+ "@angular/material": "5.2.0",
+ "@angular/platform-browser": "5.2.0",
+ "@angular/platform-browser-dynamic": "5.2.0",
+ "@angular/router": "5.2.0",
+ "@covalent/core": "1.0.0",
+ "detect-libc": "1.0.3",
+ "font-awesome": "4.7.0",
+ "hammerjs": "2.0.8",
"roboto-fontface": "0.7.0"
},
"devDependencies": {
"grunt": "0.4.5",
- "grunt-bump": "^0.8.0",
+ "grunt-bump": "0.8.0",
"grunt-cli": "1.2.0",
"grunt-contrib-compress": "1.4.3",
"grunt-sass": "2.0.0",
+ "http-server": "0.11.1",
"jasmine-core": "2.8.0",
"karma": "1.7.1",
"karma-chrome-launcher": "2.2.0",
diff --git a/platform/core/common/styles/css/fluid-design-system.min.css b/platform/core/common/styles/css/fluid-design-system.min.css
deleted file mode 100644
index 09d81be..0000000
--- a/platform/core/common/styles/css/fluid-design-system.min.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url("../../../../../../../node_modules/roboto-fontface/fonts/Roboto/Roboto-Light.ttf") format("truetype")}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:local("Roboto LightItalic"),local("Roboto-LightItalic"),url("../../../../../../../node_modules/roboto-fontface/fonts/Roboto/Roboto-LightItalic.ttf") format("truetype")}@font-face{font-family:'Roboto';font-style:normal;font-weight:normal;src:local("Roboto Regular"),local("Roboto-Regular"),url("../../../../../../../node_modules/roboto-fontface/fonts/Roboto/Roboto-Regular.ttf") format("truetype")}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium"),url("../../../../../../../node_modules/roboto-fontface/fonts/Roboto/Roboto-Medium.ttf") format("truetype")}@font-face{font-family:'Roboto';font-style:normal;font-weight:bold;src:local("Roboto Bold"),local("Roboto-Bold"),url("../../../../../../../node_modules/roboto-fontface/fonts/Roboto/Roboto-Bold.ttf") format("truetype")}@font-face{font-family:'Roboto';font-style:italic;font-weight:normal;src:local("Roboto Italic"),local("Roboto-Italic"),url("../../../../../../../node_modules/roboto-fontface/fonts/Roboto/Roboto-RegularItalic.ttf") format("truetype")}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:normal;src:local("RobotoSlab Regular"),local("RobotoSlab-Regular"),url("../../../../../../../node_modules/roboto-fontface/fonts/Roboto-Slab/Roboto-Slab-Regular.ttf") format("truetype")}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:bold;src:local("RobotoSlab Bold"),local("RobotoSlab-Bold"),url("../../../../../../../node_modules/roboto-fontface/fonts/Roboto-Slab/Roboto-Slab-Bold.ttf") format("truetype")}body,html{height:100%}body,button,input,label,select,td,textarea{font-family:"Roboto",sans-serif;font-size:14px}body{color:#333}strong{font-weight:bold}pre{overflow-x:auto}em{font-style:italic}h1,h2,h3,h4,h5,h6{font-family:"Roboto",sans-serif;font-weight:normal;font-style:normal;background:#FFFFFF}h1{color:#333}h2{color:#666}table{font-family:"Roboto",sans-serif;font-size:13px;color:#666}.camel-case{text-transform:capitalize}.header{font-family:"Roboto Medium",sans-serif;font-size:16px;color:#333;padding-bottom:10px}.help-icon{font-size:12px;color:#1491C1}.details-header{height:92px}.details-header-container{position:relative;top:22px;left:10px}.description{font-family:"Roboto Light",sans-serif;font-size:12px;color:#666}.description i{padding-right:5px}.label{font-family:"Roboto Medium",sans-serif;font-size:14px;color:#333;text-transform:uppercase}.units{font-family:"Roboto Light",sans-serif;font-size:14px;color:#333}.align-vertical{margin-top:auto;margin-bottom:auto}.align-horizontal{margin-left:auto;margin-right:auto}.fill-available-width{width:100%}.pointer{cursor:pointer}body[fds] .expansion-panel-filter-toggle-group{box-shadow:none !important}body[fds] .expansion-panel-filter-toggle-group .mat-button-toggle{height:75px;width:125px;border:1px solid #ccc}body[fds] .expansion-panel-filter-toggle-group .mat-button-toggle-label-content{height:100%;width:100%;padding:0;line-height:63px;text-align:center}body[fds] .expansion-panel-filter-toggle-group .mat-button-toggle-checked{background-color:#6B8791;color:white}body[fds] .expansion-panel-filter-toggle-group .mat-button-toggle-checked .md-display-1{color:white}body[fds] .expansion-panel-filter-toggle-group .md-display-1{color:#6B8791}body[fds] .expansion-panel-filter-toggle-group div{line-height:normal}body[fds] .tab-toggle-group{box-shadow:none !important}body[fds] .tab-toggle-group .mat-button-toggle-label-content{border-bottom:2px solid #eee}body[fds] .tab-toggle-group .mat-button-toggle-checked{background:transparent}body[fds] .tab-toggle-group .mat-button-toggle-checked .mat-button-toggle-label-content{border-bottom:2px solid #6B8791;background:transparent}body[fds] .on-off-toggle-group{box-shadow:none !important}body[fds] .on-off-toggle-group .mat-button-toggle{height:20px;width:35px;border:1px solid #ccc}body[fds] .on-off-toggle-group .mat-button-toggle-label-content{height:100%;width:100%;padding:0;line-height:20px;text-align:center}body[fds] .on-off-toggle-group .mat-button-toggle-checked{background-color:#6B8791;color:white;border:1px solid #6B8791}body[fds] .off-toggle.mat-button-toggle-checked{background-color:#ccc;color:#333;border:1px solid #ccc}body[fds] .mat-checkbox-inner-container{height:10px !important;width:10px !important}body[fds] .mat-checkbox-frame{height:10px;width:10px;border-color:#ddd}body[fds] .mat-checkbox-ripple{left:-7px;top:-7px;right:-7px;bottom:-7px}body[fds] .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,body[fds] .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#6B8791}body[fds] .mat-checkbox-inner-container:hover{background-color:#6B8791;border-radius:2px}body[fds] .mat-checkbox-background{height:10px;width:10px}body[fds] .mat-pseudo-checkbox{height:10px !important;width:10px !important;border:1px solid #ddd}body[fds] .mat-pseudo-checkbox:hover{background-color:#6B8791;border:1px solid #6B8791}body[fds] .mat-pseudo-checkbox-checked::after{content:'\f00c';font-size:8px;font-family:fontawesome;margin-top:-9px;margin-left:-1px;border:none;transform:initial}body[fds] .mat-pseudo-checkbox-checked,body[fds] .mat-pseudo-checkbox-indeterminate{background-color:#6B8791;border:1px solid #6B8791;height:10px;width:10px}body[fds] .mat-checkbox-disabled{cursor:not-allowed}body[fds] .mat-radio-container{height:12px;width:12px}body[fds] .mat-radio-outer-circle{height:12px;width:12px;background-color:#FFFFFF;border:1px solid #ddd}body[fds] .mat-radio-outer-circle:hover{background-color:#6B8791;border-color:#6B8791}body[fds] .mat-radio-checked .mat-radio-outer-circle{border:1px solid #6B8791;background-color:#6B8791}body[fds] .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#6B8791}body[fds] .mat-radio-inner-circle{height:10px;width:10px;left:1px;top:1px;background-color:#FFFFFF}body[fds] .mat-radio-checked .mat-radio-inner-circle{background-color:#FFFFFF}body[fds] .mat-chip{border-radius:2px;font-size:10px;font-family:"Roboto",sans-serif;font-style:normal;font-weight:normal;padding:4px 12px 4px 12px}body[fds] .mat-chip i{margin-left:10px;float:right;margin-top:2px}body[fds] .mat-basic-chip{color:#666;height:24px;margin:22px 8px 0 0}body[fds] .mat-basic-chip.td-chip-after-pad{padding:4px 12px 4px 12px}body[fds] .mat-basic-chip i{margin-left:10px;float:right;margin-top:2px}body[fds] .mat-basic-chip .td-chip{font-size:10px;min-height:unset;line-height:20px;position:relative;top:-2px}body[fds] .td-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:65px}body[fds] .td-chip-disabled .td-chip{padding:0px 0px 0px 12px}body[fds] .mat-basic-chip mat-icon.td-chip-removal{font-size:15px;margin-bottom:7px}body[fds] .mat-dialog-container{padding:20px;width:400px}body[fds] .mat-tab-label{line-height:72px;text-transform:uppercase;color:#666}body[fds] .mat-tab-label:hover:not([disabled]){color:#333}body[fds] .mat-tab-label:focus:not([disabled]){background-color:#FFFFFF}body[fds] .mat-tab-label-active{color:#333}body[fds] .mat-tab-nav-bar,body[fds] .mat-tab-header{border-bottom:0px}body[fds] .mat-input-container{min-width:200px}body[fds] .mat-input-wrapper{margin:0;padding-bottom:0}body[fds] input.mat-input-element,body[fds] textarea.mat-input-element{border-radius:2px;color:#666;border:1px solid #CFD3D7;height:32px;padding:0px 10px;width:calc(100% - 26px)}body[fds] textarea.mat-input-element{padding:10px 10px}body[fds] input.mat-input-element[disabled],body[fds] textarea.mat-input-element[disabled]{background:#b2b8c1;color:#dbdee2;border:1px solid #b2b8c1}body[fds] .mat-input-subscript-wrapper{margin-top:18px;width:calc(100% - 23px)}body[fds] input.mat-input-element:focus,body[fds] textarea.mat-input-element:focus{border-color:#6B8791}body[fds] .mat-input-underline{display:none}body[fds] .mat-input-placeholder{font-size:14px;color:#999;font-weight:300}body[fds] .mat-input-placeholder{top:29px;left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:calc(100% - 44px)}body[fds] mat-input-container.mat-focused .mat-input-placeholder{transform:translateY(-26px) translateX(-10px) scale(0.75)}body[fds] .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-placeholder{transform:translateY(-26px) translateX(-10px) scale(0.75)}body[fds] .mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-placeholder-wrapper .mat-form-field-placeholder{transform:translateY(-26px) translateX(-10px) scale(0.75)}body[fds] .input-button{top:5px;left:-4px;border-left:none !important}body[fds] .input-button.mat-raised-button[disabled]{opacity:1}body[fds] td-chips .mat-input-placeholder-wrapper::after{content:'\f0b0';display:inline-table;font-family:FontAwesome;float:right;margin:12px 10px 0px 0px;color:#999}body[fds] .mat-hint{color:#999}body[fds] .md-card-title{font-size:20px;color:#333;margin-bottom:0px}body[fds] md-card-title{padding-top:20px;padding-left:20px;padding-right:20px}body[fds] .md-card-subtitle{padding-left:20px;padding-right:20px;padding-top:10px;margin-bottom:0px}body[fds] .md-card-content{color:#666;padding:10px 20px 20px 20px;margin:0px}body[fds] .md-card .md-card-actions:last-child,body[fds] .md-card .md-card .md-card-actions:last-child{padding:0px 20px 20px 20px;margin:0px}body[fds] .fds-panel-menu-button{position:absolute;right:0px;z-index:2}body[fds] .mat-progress-bar-buffer{background-color:#ccc}body[fds] .link{color:#6B8791;font-size:14px;text-decoration:none;line-height:24px;cursor:pointer}body[fds] .link:hover{text-decoration:underline}body[fds] .link .disabled{color:#333;text-decoration:none}body[fds] .mat-sidenav-container{height:100%}.td-step-header span{display:none}body[fds] .mat-tooltip{background:#666;opacity:.9;box-shadow:inset 0px 0px 3px 0px #1391c1}body[fds] .td-data-table-cell{font-size:13px;color:#666;padding:0 28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;line-height:30px}body[fds] .td-data-table-column{color:#999;font-weight:normal}body[fds] .td-data-table-row{height:34px;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #eee}body[fds] .td-data-table-row.selected{background-color:#eee;border:1px solid #eee}body[fds] .td-data-table-row:hover{background-color:#F8F9F9;border:1px solid #B2C1C6}body[fds] .td-data-table-cell .mat-icon-button{color:#6B8791}body[fds] .td-data-table-cell .mat-icon-button:disabled{color:#808793;cursor:not-allowed}body[fds] .td-data-table-cell .mat-button,body[fds] .td-data-table-cell .mat-icon-button,body[fds] .td-data-table-cell .mat-raised-button{height:24px;width:24px;line-height:0}body[fds] .td-data-table-cell .mat-icon-button.badge{border-top-left-radius:0px;border-top-right-radius:0px}body[fds] .td-data-table-cell .mat-icon-button.badge[disabled]{opacity:.3}body[fds] .td-data-table-column{font-size:12px;color:#999;height:34px;line-height:34px;padding:0 28px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}body[fds] .td-data-table-column .fa-caret-up,body[fds] .td-data-table-column .fa-caret-down{color:#6B8791;font-size:12px;margin-bottom:2px}body[fds] td-paging-bar{color:#999}body[fds] td-paging-bar mat-select .mat-select-value,body[fds] td-paging-bar mat-select .mat-select-arrow{color:#6B8791}body[fds] .table-title{font-size:20px;color:#333;min-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%;margin-right:10px}body[fds] div .td-data-table{border-bottom:2px solid #ddd;border-right:1px transparent;border-left:1px transparent}.fds-dialog-title{margin-top:0;margin-bottom:20px}body[fds] snack-bar-container{background:#FFFFFF;padding:0;box-shadow:0px 0px 3px 0px #1391c1}fds-snackbar-title mat-icon.mat-icon.mat-primary.material-icons{font-size:10px;height:10px;width:10px;line-height:10px;color:#999}.fds-coaster-message{font-size:12px}.fds-snackbar-title{font-size:14px}.fds-snackbar-title i{font-size:24px}.fds-coaster-icon{position:absolute;top:24px;left:15px}.coaster-close-icon{height:10px !important;width:10px !important;line-height:10px !important;right:10px;position:absolute !important;top:10px}.fds-snackbar-wrapper{border-radius:2px;border-width:1px;border-style:solid}
-
-/*# sourceMappingURL=fluid-design-system.min.css.map */
\ No newline at end of file
diff --git a/platform/core/common/styles/css/fluid-design-system.min.css.gz b/platform/core/common/styles/css/fluid-design-system.min.css.gz
deleted file mode 100644
index b878c9b..0000000
--- a/platform/core/common/styles/css/fluid-design-system.min.css.gz
+++ /dev/null
Binary files differ
diff --git a/platform/core/common/styles/css/fluid-design-system.min.css.map b/platform/core/common/styles/css/fluid-design-system.min.css.map
deleted file mode 100644
index a8f8911..0000000
--- a/platform/core/common/styles/css/fluid-design-system.min.css.map
+++ /dev/null
@@ -1,28 +0,0 @@
-{
- "version": 3,
- "file": "fluid-design-system.min.css",
- "sources": [
- "../fluid-design-system.scss",
- "../_globalVars.scss",
- "../_basicElements.scss",
- "../_helperClasses.scss",
- "../_buttonToggles.scss",
- "../_checkboxes.scss",
- "../_radios.scss",
- "../_chips.scss",
- "../_modals.scss",
- "../_tabs.scss",
- "../_inputs.scss",
- "../_panels.scss",
- "../_progress-bar.scss",
- "../_links.scss",
- "../_sideNav.scss",
- "../_stepper.scss",
- "../_tooltips.scss",
- "../_tables.scss",
- "../../../dialogs/_fds-dialog-component.scss",
- "../../../snackbars/coaster/_coaster.component.scss"
- ],
- "names": [],
- "mappings": "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"
-}
\ No newline at end of file
diff --git a/scripts/clean-install b/scripts/clean-install
new file mode 100644
index 0000000..01cc520
--- /dev/null
+++ b/scripts/clean-install
@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+set -e
+
+# build
+bash ./scripts/clean-install-skipTests
+cd ./target
+
+# test
+npm test
diff --git a/scripts/clean-install-skipTests b/scripts/clean-install-skipTests
new file mode 100644
index 0000000..1d4e4d7
--- /dev/null
+++ b/scripts/clean-install-skipTests
@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+set -e
+
+# build
+rm -rf ./target
+mkdir target
+cp -R ./src/demo-app/ ./target/demo-app
+cp -R ./src/platform/ ./target/platform
+cp package.json ./target/package.json
+cp ./src/demo-app/index.html ./target/index.html
+cp ./test/karma.conf.js ./target/karma.conf.js
+cp ./test/karma-test-shim.js ./target/karma-test-shim.js
+cp Gruntfile.js ./target/Gruntfile.js
+cp ./src/demo-app/gh-pages.* ./target/
+cd ./target
+npm install
+npm run build:demo-app
+npm run build:platform
diff --git a/scripts/deploy-gh-pages b/scripts/deploy-gh-pages
new file mode 100644
index 0000000..2c0ec13
--- /dev/null
+++ b/scripts/deploy-gh-pages
@@ -0,0 +1,19 @@
+#!/bin/bash
+npm run clean:install
+echo 'Build Complete'
+git checkout gh-pages
+echo 'Created and Checked out gh-pages branch'
+
+cp -f ./target/gh-pages.package.json ./package.json
+npm install
+mkdir ./node_modules/nifi-fds
+cp -Rf ./target/platform/ ./node_modules/nifi-fds/platform
+cp -Rf ./target/demo-app/ ./demo-app
+cp -f ./target/gh-pages.index.html ./index.html
+cp -f ./target/gh-pages.systemjs.config.js ./demo-app/systemjs.config.js
+echo 'Tracking files'
+git add -A .
+echo 'Commiting files'
+git commit -m 'gh-pages update'
+echo 'Pushing files into gh-pages branch'
+git push apache gh-pages:gh-pages
diff --git a/scripts/dev-install b/scripts/dev-install
new file mode 100644
index 0000000..fe286ef
--- /dev/null
+++ b/scripts/dev-install
@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+set -e
+
+# build
+bash ./scripts/dev-install-skipTests
+cd ./target
+
+# test
+npm run test:dev
diff --git a/scripts/dev-install-skipTests b/scripts/dev-install-skipTests
new file mode 100644
index 0000000..a5c6aa6
--- /dev/null
+++ b/scripts/dev-install-skipTests
@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+set -e
+
+# build
+cp -R ./src/demo-app/ ./target/demo-app
+cp -R ./src/platform/ ./target/platform
+cp package.json ./target/package.json
+cp ./src/demo-app/index.html ./target/index.html
+cp ./test/karma.conf.js ./target/karma.conf.js
+cp ./test/karma-test-shim.js ./target/karma-test-shim.js
+cp Gruntfile.js ./target/Gruntfile.js
+cp ./src/demo-app/gh-pages.* ./target/
+cd ./target
+npm install
+npm run build:demo-app
+npm run build:platform
diff --git a/src/demo-app/components/fluid-design-system/dialogs/demo/fds-demo-dialog.html b/src/demo-app/components/fluid-design-system/dialogs/demo/fds-demo-dialog.html
new file mode 100644
index 0000000..c283684
--- /dev/null
+++ b/src/demo-app/components/fluid-design-system/dialogs/demo/fds-demo-dialog.html
@@ -0,0 +1,18 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div>Hello Dialog!</div>
diff --git a/src/demo-app/components/fluid-design-system/dialogs/demo/fds-demo-dialog.js b/src/demo-app/components/fluid-design-system/dialogs/demo/fds-demo-dialog.js
new file mode 100644
index 0000000..d3ead2b
--- /dev/null
+++ b/src/demo-app/components/fluid-design-system/dialogs/demo/fds-demo-dialog.js
@@ -0,0 +1,59 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var ngMaterial = require('@angular/material');
+var ngCore = require('@angular/core');
+
+/**
+ * NfRegistryEditBucketPolicy constructor.
+ *
+ * @param nfRegistryApi The api service.
+ * @param nfRegistryService The nf-registry.service module.
+ * @param activatedRoute The angular route module.
+ * @param matDialogRef The angular material dialog ref.
+ * @param data The data passed into this component.
+ * @constructor
+ */
+function FdsDemoDialog(matDialogRef, data) {
+ // Services
+ this.dialogRef = matDialogRef;
+ this.data = data;
+};
+
+FdsDemoDialog.prototype = {
+ constructor: FdsDemoDialog,
+
+ /**
+ * Cancel creation of a new policy and close dialog.
+ */
+ cancel: function () {
+ this.dialogRef.close();
+ }
+};
+
+FdsDemoDialog.annotations = [
+ new ngCore.Component({
+ template: require('./fds-demo-dialog.html!text')
+ })
+];
+
+FdsDemoDialog.parameters = [
+ ngMaterial.MatDialogRef,
+ ngMaterial.MAT_DIALOG_DATA
+];
+
+module.exports = FdsDemoDialog;
diff --git a/src/demo-app/components/fluid-design-system/fds-demo.html b/src/demo-app/components/fluid-design-system/fds-demo.html
new file mode 100644
index 0000000..7875daa
--- /dev/null
+++ b/src/demo-app/components/fluid-design-system/fds-demo.html
@@ -0,0 +1,2980 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<mat-sidenav-container>
+ <mat-sidenav #sidenav mode="over" align="end" opened="false">
+ <div fxLayout="column" fxLayoutAlign="space-between center">
+ <p>You can also open a dialog from a side nav.</p>
+ <button mat-raised-button color="fds-primary" (click)="openDialog()">Show simple dialog</button>
+ </div>
+ </mat-sidenav>
+ <div id="fds-demo">
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Apache NiFi Fluid Design System</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content class="pad-top-sm">
+ <p>With the Apache NiFi Fluid Design System module, we get an atomic, reusable component platform for Apache NiFi and Apache NiFi Registry to consume, while collaborating in an open source model. This module packages the <a class="link" href="https://material.angular.io/components" target="_blank">Angular Material</a> module as well as the <a class="link" href="https://teradata.github.io/covalent/#/components" target="_blank">Teradata Covalent</a> module. These modules have been themed to match the FDS color palette.</p>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Setup</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <p>Import the FDS Core NgModule into your AppModule</p>
+ <p>HTML:</p>
+ <pre lang="javascript">
+ <![CDATA[
+ var ngCore = require('@angular/core');
+ var fdsCore = require('fluid-design-system/core');
+ // other imports
+ ...
+ new ngCore.NgModule({
+ imports: [
+ fdsCore,
+ // (optional) Additional imports
+ ],
+ ...
+ })
+ ]]>
+ </pre>
+ <p>The core FDS styles also need to be included in your `index.html` like:</p>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <link href="../node_modules/fluid-design-system/core/common/styles/css/fluid-design-system.css" rel="stylesheet">
+ ]]>
+ </pre>
+ <p>Or, if you are using the Angular CLI you will need to add a new entry to the "styles" list in .angular-cli.json.</p>
+ <p>JSON:</p>
+ <pre lang="json">
+ <![CDATA[
+ "styles": [
+ "../node_modules/fluid-design-system/core/common/styles/fluid-design-system.scss"
+ ]
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Typography</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <p class="mat-body-1">Angular Material provides <a class="link" href="https://material.io/guidelines/style/typography.html" target="_blank">typography</a> CSS classes you can use to create visual consistency across your application.</p>
+ <p class="mat-body-1">
+ <strong>Note:</strong>
+ <span>Base font size is 10px for easy rem units (1.2rem = 12px). Body font size is 14px. sp = scalable pixels.</span>
+ </p>
+ <h3 class="mat-title">Header Styles</h3>
+ <p class="mat-body-1">To preserve semantic structures, you can optionally style the <code><h1></code> - <code><h6></code> heading tags with the styling classes shown below:</p>
+ <p>CSS:</p>
+ <div layout-align="center end">
+ <div layout="row" layout-align="start center">
+ <code flex="15">.mat-display-4</code>
+ <span class="mat-display-4">Light 112px</span>
+ </div>
+ <div layout="row" layout-align="start center">
+ <code flex="15">.mat-display-3</code>
+ <span class="mat-display-3">Regular 56px</span>
+ </div>
+ <div layout="row" layout-align="start center">
+ <code flex="15">.mat-display-2</code>
+ <span class="mat-display-2">Regular 45px</span>
+ </div>
+ <div layout="row" layout-align="start center">
+ <code flex="15">.mat-display-1</code>
+ <span class="mat-display-1">Regular 34px</span>
+ </div>
+ <div layout="row" layout-align="start center">
+ <code flex="15">.mat-headline</code>
+ <span class="mat-headline">Regular 24px</span>
+ </div>
+ <div layout="row" layout-align="start center">
+ <code flex="15">.mat-title</code>
+ <span class="mat-title">Medium 20px</span>
+ </div>
+ <div layout="row" layout-align="start center">
+ <code flex="15">.md-subhead</code>
+ <span class="md-subhead">Regular 16px</span>
+ </div>
+ </div>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- Large Heading -->
+ <h1 class="mat-display-4">Roboto is the standard typeface on Android.</h1>
+ <h2 class="mat-display-3">Roboto and Noto are the standard typefaces on Android and Chrome.</h2>
+ <h3 class="mat-display-2">Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto.</h3>
+ <!-- Medium Heading -->
+ <h1 class="mat-display-1">Roboto is the standard typeface on Android.</h1>
+ <h2 class="mat-headline">Roboto and Noto are the standard typefaces on Android and Chrome.</h2>
+ <h3 class="md-subhead">Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto.</h3>
+ ]]>
+ </pre>
+ <h3 class="mat-title">Body Copy</h3>
+ <p>CSS:</p>
+ <div class="mat-body-1" layout-align="center end">
+ <div layout="row" layout-align="start center">
+ <code flex="15">.mat-body-1</code>
+ <span class="mat-body-1">Regular 14px</span>
+ </div>
+ <div layout="row" layout-align="start center">
+ <code flex="15">.mat-body-2</code>
+ <span class="mat-body-2">Medium 14px</span>
+ </div>
+ <div layout="row" layout-align="start center">
+ <code flex="15">.mat-button</code>
+ <span class="mat-button mat-raised">Medium 14px</span>
+ </div>
+ <div layout="row" layout-align="start center">
+ <code flex="15">.mat-caption</code>
+ <span class="mat-caption">Regular 12px</span>
+ </div>
+ </div>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- body copy -->
+ <p class="mat-body-1">Roboto is the standard typeface on Android.</p>
+ <p class="mat-body-2">Roboto and Noto are the standard typefaces on Android and Chrome.</p>
+ <p class="mat-button">Roboto and Noto are the standard typefaces on Android and Chrome.</p>
+ <p class="mat-caption">Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto.</p>
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Raised Buttons</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <p>Tip: Use UPPERCASE text for 1-2 words, and Titlecase text for 3+ words.</p>
+ <button mat-raised-button color="primary">Primary</button>
+ <button mat-raised-button color="accent">Accent</button>
+ <button mat-raised-button color="warn">Warn</button>
+ <button mat-raised-button color="fds-primary">FDS Primary</button>
+ <button mat-raised-button color="fds-secondary">FDS Secondary</button>
+ <button mat-raised-button color="fds-regular">FDS regular</button>
+ <button mat-raised-button color="fds-warn">FDS warn</button>
+ <button mat-raised-button color="fds-critical">FDS critical</button>
+ <button mat-raised-button disabled color="primary">Primary</button>
+ <button mat-raised-button disabled color="accent">Accent</button>
+ <button mat-raised-button disabled color="warn">Warn</button>
+ <button mat-raised-button disabled color="fds-primary">FDS primary</button>
+ <button mat-raised-button disabled color="fds-secondary">FDS Secondary</button>
+ <button mat-raised-button disabled color="fds-regular">FDS regular</button>
+ <button mat-raised-button disabled color="fds-warn">FDS warn</button>
+ <button mat-raised-button disabled color="fds-critical">FDS critical</button>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- Themed Raised Buttons -->
+ <button mat-raised-button color="primary">Primary</button>
+ <button mat-raised-button color="accent">Secondary</button>
+ <button mat-raised-button color="warn">warn</button>
+ <button mat-raised-button color="fds-primary">FDS Primary</button>
+ <button mat-raised-button color="fds-secondary">FDS Secondary</button>
+ <button mat-raised-button color="fds-regular">FDS regular</button>
+ <button mat-raised-button color="fds-warn">FDS warn</button>
+ <button mat-raised-button color="fds-critical">FDS critical</button>
+ <!-- Disabled Raised Buttons -->
+ <button mat-raised-button disabled color="primary">Primary</button>
+ <button mat-raised-button disabled color="accent">Secondary</button>
+ <button mat-raised-button disabled color="warn">warn</button>
+ <button mat-raised-button disabled color="fds-primary">FDS primary</button>
+ <button mat-raised-button disabled color="fds-secondary">FDS Secondary</button>
+ <button mat-raised-button disabled color="fds-regular">FDS regular</button>
+ <button mat-raised-button disabled color="fds-warn">FDS warn</button>
+ <button mat-raised-button disabled color="fds-critical">FDS critical</button>
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Links</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <a class="link" href="https://material.angular.io" target="_blank">Angular Material</a>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <a class="link" href="https://material.angular.io" target="_blank">Angular Material</a>
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Flat Buttons</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <mat-card-actions>
+ <button mat-button>Default</button>
+ <button mat-button color="primary">Primary</button>
+ <button mat-button color="accent">Secondary</button>
+ <button mat-button color="warn">Warn</button>
+ <button mat-button disabled>Disabled Default</button>
+ <button mat-button disabled color="primary">Disabled Primary</button>
+ <button mat-button disabled color="accent">Disabled Secondary</button>
+ <button mat-button disabled color="warn">Disabled Warn</button>
+ </mat-card-actions>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- Themed Flat Buttons -->
+ <button mat-button>Default</button>
+ <button mat-button color="primary">Primary</button>
+ <button mat-button color="accent">Secondary</button>
+ <button mat-button color="warn">warn</button>
+ <!-- Disabled Flat Buttons -->
+ <button mat-button disabled>disabled Default</button>
+ <button mat-button disabled color="primary">disabled primary</button>
+ <button mat-button disabled color="accent">disabled Secondary</button>
+ <button mat-button disabled color="warn">disabled warn</button>
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Fab Buttons</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <mat-card-actions class="pad-left-sm">
+ <button mat-mini-fab color="primary">P</button>
+ <button mat-mini-fab color="accent">A</button>
+ <button mat-mini-fab color="warn">W</button>
+ <button mat-mini-fab disabled color="primary">P</button>
+ <button mat-mini-fab disabled color="accent">A</button>
+ <button mat-mini-fab disabled color="warn">W</button>
+ </mat-card-actions>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- Themed Fab Buttons -->
+ <button mat-mini-fab color="primary">P</button>
+ <button mat-mini-fab color="accent">A</button>
+ <button mat-mini-fab color="warn">W</button>
+ <!-- Disabled Fab Buttons -->
+ <button mat-mini-fab disabled color="primary">P</button>
+ <button mat-mini-fab disabled color="accent">A</button>
+ <button mat-mini-fab disabled color="warn">W</button>
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Button Toggles</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <mat-button-toggle-group name="alignment">
+ <mat-button-toggle value="left">
+ <mat-icon>format_align_left</mat-icon>
+ </mat-button-toggle>
+ <mat-button-toggle value="center">
+ <mat-icon>format_align_center</mat-icon>
+ </mat-button-toggle>
+ <mat-button-toggle value="right">
+ <mat-icon>format_align_right</mat-icon>
+ </mat-button-toggle>
+ <mat-button-toggle value="justify">
+ <mat-icon>format_align_justify</mat-icon>
+ </mat-button-toggle>
+ </mat-button-toggle-group>
+ <div fxLayout="row" class="pad-top-md pad-bot-md"></div>
+ <mat-button-toggle-group name="onOffToggle" class="on-off-toggle-group">
+ <mat-button-toggle value="on" [checked]="true">
+ ON
+ </mat-button-toggle>
+ <mat-button-toggle value="off" class="off-toggle">
+ OFF
+ </mat-button-toggle>
+ </mat-button-toggle-group>
+ <div fxLayout="row" class="pad-top-md pad-bot-md"></div>
+ <mat-button-toggle-group fxLayout="row" fxLayoutAlign="space-between center" class="expansion-panel-filter-toggle-group" multiple>
+ <mat-button-toggle>
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">34</div>
+ <div class="pad-top-sm" fxFlex="45">Assets</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle>
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">300</div>
+ <div class="pad-top-sm" fxFlex="45">Extensions</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle>
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">5000</div>
+ <div class="pad-top-sm" fxFlex="45">Flows</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle>
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">0</div>
+ <div class="pad-top-sm" fxFlex="45">Certifications</div>
+ </div>
+ </mat-button-toggle>
+ </mat-button-toggle-group>
+ <div fxLayout="row" class="pad-top-md pad-bot-md"></div>
+ <mat-button-toggle-group name="fds-administration-perspective" fxLayout="row" class="tab-toggle-group">
+ <mat-button-toggle value="general" class="uppercase">
+ general
+ </mat-button-toggle>
+ <div fxLayout="row" class="pad-left-md"></div>
+ <mat-button-toggle value="users" class="uppercase">
+ Users
+ </mat-button-toggle>
+ <div fxLayout="row" class="pad-left-md"></div>
+ <mat-button-toggle value="workflow" class="uppercase">
+ Workflow
+ </mat-button-toggle>
+ </mat-button-toggle-group>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <mat-button-toggle-group name="alignment">
+ <mat-button-toggle value="left">
+ <mat-icon>format_align_left</mat-icon>
+ </mat-button-toggle>
+ <mat-button-toggle value="center">
+ <mat-icon>format_align_center</mat-icon>
+ </mat-button-toggle>
+ <mat-button-toggle value="right">
+ <mat-icon>format_align_right</mat-icon>
+ </mat-button-toggle>
+ <mat-button-toggle value="justify">
+ <mat-icon>format_align_justify</mat-icon>
+ </mat-button-toggle>
+ </mat-button-toggle-group>
+ <div fxLayout="row" class="pad-top-md pad-bot-md"></div>
+ <mat-button-toggle-group name="onOffToggle" class="on-off-toggle-group">
+ <mat-button-toggle value="on" [checked]="true">
+ ON
+ </mat-button-toggle>
+ <mat-button-toggle value="off" class="off-toggle">
+ OFF
+ </mat-button-toggle>
+ </mat-button-toggle-group>
+ <div fxLayout="row" class="pad-top-md pad-bot-md"></div>
+ <mat-button-toggle-group fxLayout="row" fxLayoutAlign="space-between center" class="expansion-panel-filter-toggle-group" multiple>
+ <mat-button-toggle>
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">34</div>
+ <div class="pad-top-sm" fxFlex="45">Assets</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle>
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">300</div>
+ <div class="pad-top-sm" fxFlex="45">Extensions</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle>
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">5000</div>
+ <div class="pad-top-sm" fxFlex="45">Flows</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle>
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">0</div>
+ <div class="pad-top-sm" fxFlex="45">Certifications</div>
+ </div>
+ </mat-button-toggle>
+ </mat-button-toggle-group>
+ <div fxLayout="row" class="pad-top-md pad-bot-md"></div>
+ <mat-button-toggle-group name="fds-administration-perspective" fxLayout="row" class="tab-toggle-group">
+ <mat-button-toggle value="general" class="uppercase">
+ general
+ </mat-button-toggle>
+ <div fxLayout="row" class="pad-left-md"></div>
+ <mat-button-toggle value="users" class="uppercase">
+ Users
+ </mat-button-toggle>
+ <div fxLayout="row" class="pad-left-md"></div>
+ <mat-button-toggle value="workflow" class="uppercase">
+ Workflow
+ </mat-button-toggle>
+ </mat-button-toggle-group>
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Input</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <form>
+ <div layout="row" layout-margin>
+ <mat-input-container floatPlaceholder="always" flex>
+ <input matInput placeholder="Company (disabled)" disabled value="Google">
+ </mat-input-container>
+ </div>
+ <div layout="row" layout-margin>
+ <mat-input-container floatPlaceholder="always" flex>
+ <input matInput disabled placeholder="First name">
+ </mat-input-container>
+ <mat-input-container flex>
+ <input matInput placeholder="Long Last Name That Will Be Truncated">
+ </mat-input-container>
+ </div>
+ <div layout="row" layout-margin>
+ <div flex fxLayoutAlign="start center">
+ <mat-input-container flex>
+ <input matInput placeholder="Button Addon with dropdown">
+ </mat-input-container>
+ <button class="input-button" color="fds-regular" mat-raised-button [matMenuTriggerFor]="inputButtonDropdownAddonMenu">
+ Select<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ <mat-menu xPosition="before" #inputButtonDropdownAddonMenu="matMenu" [overlapTrigger]="false">
+ <button mat-menu-item> Refresh </button>
+ <button mat-menu-item> Settings </button>
+ <button mat-menu-item> Help </button>
+ <button mat-menu-item disabled> Sign Out </button>
+ </mat-menu>
+ </div>
+ <div flex fxLayoutAlign="start center">
+ <mat-input-container floatPlaceholder="always" flex>
+ <input matInput placeholder="Button Addon">
+ </mat-input-container>
+ <button class="input-button" color="fds-regular" mat-raised-button>
+ Search
+ </button>
+ </div>
+ </div>
+ <div layout="row" layout-margin>
+ <div flex fxLayoutAlign="start center">
+ <mat-input-container floatPlaceholder="always" flex>
+ <input disabled matInput placeholder="Button Addon with dropdown">
+ </mat-input-container>
+ <button disabled class="input-button" color="fds-regular" mat-raised-button>
+ Select<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ </div>
+ <div flex fxLayoutAlign="start center">
+ <mat-input-container floatPlaceholder="always" flex>
+ <input disabled matInput placeholder="Button Addon">
+ </mat-input-container>
+ <button disabled class="input-button" color="fds-regular" mat-raised-button>
+ Search
+ </button>
+ </div>
+ </div>
+ <div layout="row" layout-margin>
+ <mat-input-container flex>
+ <textarea matInput placeholder="Address" value="1600 Amphitheatre Pkway"></textarea>
+ </mat-input-container>
+ </div>
+ <div layout="row" layout-margin>
+ <mat-input-container floatPlaceholder="always" flex>
+ <textarea disabled value="Address 2 Value" matInput placeholder="Address 2"></textarea>
+ </mat-input-container>
+ </div>
+ <div layout="row" layout-margin>
+ <mat-input-container floatPlaceholder="always" flex>
+ <input matInput placeholder="City">
+ </mat-input-container>
+ <mat-input-container floatPlaceholder="always" flex>
+ <input matInput placeholder="State">
+ </mat-input-container>
+ <mat-input-container floatPlaceholder="always" flex>
+ <input matInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
+ <mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
+ </mat-input-container>
+ </div>
+ </form>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- Inputs -->
+ <form>
+ <div layout="row" layout-margin>
+ <mat-input-container floatPlaceholder="always" flex>
+ <input matInput placeholder="Company (disabled)" disabled value="Google">
+ </mat-input-container>
+ </div>
+ <div layout="row" layout-margin>
+ <mat-input-container floatPlaceholder="always" flex>
+ <input matInput disabled placeholder="First name">
+ </mat-input-container>
+ <mat-input-container flex>
+ <input matInput placeholder="Long Last Name That Will Be Truncated">
+ </mat-input-container>
+ </div>
+ <div layout="row" layout-margin>
+ <div flex fxLayoutAlign="start center">
+ <mat-input-container flex>
+ <input matInput placeholder="Button Addon with dropdown">
+ </mat-input-container>
+ <button class="input-button" color="fds-regular" mat-raised-button [matMenuTriggerFor]="inputButtonDropdownAddonMenu">
+ Select<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ <mat-menu xPosition="before" #inputButtonDropdownAddonMenu="matMenu" [overlapTrigger]="false">
+ <button mat-menu-item> Refresh </button>
+ <button mat-menu-item> Settings </button>
+ <button mat-menu-item> Help </button>
+ <button mat-menu-item disabled> Sign Out </button>
+ </mat-menu>
+ </div>
+ <div flex fxLayoutAlign="start center">
+ <mat-input-container floatPlaceholder="always" flex>
+ <input matInput placeholder="Button Addon">
+ </mat-input-container>
+ <button class="input-button" color="fds-regular" mat-raised-button>
+ Search
+ </button>
+ </div>
+ </div>
+ <div layout="row" layout-margin>
+ <div flex fxLayoutAlign="start center">
+ <mat-input-container floatPlaceholder="always" flex>
+ <input disabled matInput placeholder="Button Addon with dropdown">
+ </mat-input-container>
+ <button disabled class="input-button" color="fds-regular" mat-raised-button>
+ Select<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ </div>
+ <div flex fxLayoutAlign="start center">
+ <mat-input-container floatPlaceholder="always" flex>
+ <input disabled matInput placeholder="Button Addon">
+ </mat-input-container>
+ <button disabled class="input-button" color="fds-regular" mat-raised-button>
+ Search
+ </button>
+ </div>
+ </div>
+ <div layout="row" layout-margin>
+ <mat-input-container flex>
+ <textarea matInput placeholder="Address" value="1600 Amphitheatre Pkway"></textarea>
+ </mat-input-container>
+ </div>
+ <div layout="row" layout-margin>
+ <mat-input-container floatPlaceholder="always" flex>
+ <textarea disabled value="Address 2 Value" matInput placeholder="Address 2"></textarea>
+ </mat-input-container>
+ </div>
+ <div layout="row" layout-margin>
+ <mat-input-container floatPlaceholder="always" flex>
+ <input matInput placeholder="City">
+ </mat-input-container>
+ <mat-input-container floatPlaceholder="always" flex>
+ <input matInput placeholder="State">
+ </mat-input-container>
+ <mat-input-container floatPlaceholder="always" flex>
+ <input matInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
+ <mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
+ </mat-input-container>
+ </div>
+ </form>
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Tabs</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <mat-tab-group dynamicHeight>
+ <mat-tab>
+ <ng-template mat-tab-label>One</ng-template>
+ <h3 class="mat-title">First tab content</h3>
+ <p>Plaid echo park knausgaard normcore franzen cronut. Pickled humblebrag tofu hoodie, umami salvia farm-to-table schlitz try-hard food truck knausgaard pabst. Yuccie portland jean shorts, authentic mixtape waistcoat gentrify blue bottle. Fixie kickstarter church-key small batch seitan, shabby chic vegan listicle before they sold out. Hammock raw denim flannel tousled seitan you probably haven't heard of them. Trust fund man bun pug, kickstarter artisan selvage letterpress cornhole tote bag butcher locavore. Affogato try-hard kickstarter seitan, DIY pickled hella godard pork belly four loko ugh.</p>
+ </mat-tab>
+ <mat-tab>
+ <ng-template mat-tab-label>Two</ng-template>
+ <h3 class="mat-title">Second tab content</h3>
+ <p>Hashtag distillery skateboard man bun gochujang, salvia man braid art party meggings heirloom kitsch farm-to-table. Franzen beard fingerstache gentrify, heirloom portland ennui XOXO microdosing kitsch plaid. Chicharrones bushwick chia, banh mi irony tattooed hammock butcher shabby chic taxidermy semiotics marfa post-ironic. Blue bottle keffiyeh farm-to-table ennui, chambray pitchfork art party pinterest artisan pop-up. Etsy banjo marfa, blue bottle kombucha crucifix XOXO tousled beard. Tilde disrupt kale chips bicycle rights skateboard master cleanse hella shoreditch, meditation retro shabby chic vice heirloom. Etsy listicle vice actually, iPhone chia hoodie four loko.</p>
+ </mat-tab>
+ </mat-tab-group>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <mat-tab-group dynamicHeight>
+ <mat-tab>
+ <ng-template mat-tab-label>First tab content</ng-template>
+ <h1>First content</h1>
+ <p>...</p>
+ </mat-tab>
+ <mat-tab>
+ <ng-template mat-tab-label>Second tab content</ng-template>
+ <h1>Second tab content</h1>
+ <p>...</p>
+ </mat-tab>
+ </mat-tab-group>
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Autocomplete</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <div class="pad-top-sm" layout="row">
+ <mat-input-container flex="50">
+ <input matInput placeholder="State" [matAutocomplete]="tdAuto" [(ngModel)]="currentState" #modelDir="ngModel" (ngModelChange)="this.tdStates = filterStates(currentState)" [disabled]="tdDisabled">
+ </mat-input-container>
+ </div>
+ <div class="push-top">
+ <button mat-button (click)="modelDir.reset()" class="text-upper">Reset</button>
+ <button mat-button (click)="currentState='California'" class="text-upper">Set value</button>
+ <button mat-button (click)="tdDisabled=!tdDisabled" class="text-upper">Toggle disabled</button>
+ </div>
+ <mat-autocomplete #tdAuto="matAutocomplete">
+ <mat-option *ngFor="let state of tdStates" [value]="state.name">
+ <span>{{ state.name }}</span>
+ <span class="demo-secondary-text"> ({{state.code}}) </span>
+ </mat-option>
+ </mat-autocomplete>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <div class="pad-top-sm" layout="row">
+ <mat-input-container flex="50">
+ <input matInput placeholder="State" [matAutocomplete]="tdAuto" [(ngModel)]="currentState" #modelDir="ngModel" (ngModelChange)="this.tdStates = filterStates(currentState)" [disabled]="tdDisabled">
+ </mat-input-container>
+ </div>
+ <div class="push-top">
+ <button mat-button (click)="modelDir.reset()" class="text-upper">Reset</button>
+ <button mat-button (click)="currentState='California'" class="text-upper">Set value</button>
+ <button mat-button (click)="tdDisabled=!tdDisabled" class="text-upper">Toggle disabled</button>
+ </div>
+ <mat-autocomplete #tdAuto="matAutocomplete">
+ <mat-option *ngFor="let state of tdStates" [value]="state.name">
+ <span>{ { state.name } }</span>
+ <span class="demo-secondary-text"> ({ {state.code} }) </span>
+ </mat-option>
+ </mat-autocomplete>
+ ]]>
+ </pre>
+ <p>Javascript:</p>
+ <pre lang="javascript">
+ <![CDATA[
+ this.currentState = '';
+ this.reactiveStates = '';
+ this.tdStates = [];
+ this.tdDisabled = false;
+ this.states = [
+ { code: 'AL', name: 'Alabama' },
+ { code: 'AK', name: 'Alaska' },
+ { code: 'AZ', name: 'Arizona' },
+ { code: 'AR', name: 'Arkansas' },
+ { code: 'CA', name: 'California' },
+ { code: 'CO', name: 'Colorado' },
+ { code: 'CT', name: 'Connecticut' },
+ { code: 'DE', name: 'Delaware' },
+ { code: 'FL', name: 'Florida' },
+ { code: 'GA', name: 'Georgia' },
+ { code: 'HI', name: 'Hawaii' },
+ { code: 'ID', name: 'Idaho' },
+ { code: 'IL', name: 'Illinois' },
+ { code: 'IN', name: 'Indiana' },
+ { code: 'IA', name: 'Iowa' },
+ { code: 'KS', name: 'Kansas' },
+ { code: 'KY', name: 'Kentucky' },
+ { code: 'LA', name: 'Louisiana' },
+ { code: 'ME', name: 'Maine' },
+ { code: 'MD', name: 'Maryland' },
+ { code: 'MA', name: 'Massachusetts' },
+ { code: 'MI', name: 'Michigan' },
+ { code: 'MN', name: 'Minnesota' },
+ { code: 'MS', name: 'Mississippi' },
+ { code: 'MO', name: 'Missouri' },
+ { code: 'MT', name: 'Montana' },
+ { code: 'NE', name: 'Nebraska' },
+ { code: 'NV', name: 'Nevada' },
+ { code: 'NH', name: 'New Hampshire' },
+ { code: 'NJ', name: 'New Jersey' },
+ { code: 'NM', name: 'New Mexico' },
+ { code: 'NY', name: 'New York' },
+ { code: 'NC', name: 'North Carolina' },
+ { code: 'ND', name: 'North Dakota' },
+ { code: 'OH', name: 'Ohio' },
+ { code: 'OK', name: 'Oklahoma' },
+ { code: 'OR', name: 'Oregon' },
+ { code: 'PA', name: 'Pennsylvania' },
+ { code: 'RI', name: 'Rhode Island' },
+ { code: 'SC', name: 'South Carolina' },
+ { code: 'SD', name: 'South Dakota' },
+ { code: 'TN', name: 'Tennessee' },
+ { code: 'TX', name: 'Texas' },
+ { code: 'UT', name: 'Utah' },
+ { code: 'VT', name: 'Vermont' },
+ { code: 'VA', name: 'Virginia' },
+ { code: 'WA', name: 'Washington' },
+ { code: 'WV', name: 'West Virginia' },
+ { code: 'WI', name: 'Wisconsin' },
+ { code: 'WY', name: 'Wyoming' },
+ ];
+
+ ...
+
+ displayFn: function(value) {
+ return value && typeof value === 'object' ? value.name : value;
+ },
+
+ filterStates: function(val) {
+ return val ? this.states.filter((s) => s.name.match(new RegExp(val, 'gi'))) : this.states;
+ },
+
+ ...
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Filter</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <h3 class="mat-title">Autocomplete with chips and no custom inputs</h3>
+ <mat-divider></mat-divider>
+ <mat-tab-group mat-stretch-tabs dynamicHeight>
+ <mat-tab>
+ <ng-template mat-tab-label>Demo</ng-template>
+ <div class="push">
+ <div class="mat-body-1">Type and select a preset option:</div>
+ <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [disabled]="readOnly" requireMatch></td-chips>
+ </div>
+ </mat-tab>
+ <mat-tab>
+ <ng-template mat-tab-label>Code</ng-template>
+ <mat-card-content>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [disabled]="readOnly" requireMatch></td-chips>
+ ]]>
+ </pre>
+ <p>Javascript:</p>
+ <pre lang="javascript">
+ <![CDATA[
+ this.readOnly = false;
+
+ this.items = [
+ 'stepper',
+ 'expansion-panel',
+ 'markdown',
+ 'highlight',
+ 'loading',
+ 'media',
+ 'chips',
+ 'http',
+ 'json-formatter',
+ 'pipes',
+ 'need more?',
+ ];
+
+ this.itemsRequireMatch = this.items.slice(0, 6);
+
+ ...
+
+ toggleReadOnly: function() {
+ this.readOnly = !this.readOnly;
+ },
+
+ ...
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-tab>
+ </mat-tab-group>
+ <mat-divider></mat-divider>
+ <mat-card-actions>
+ <button mat-button color="primary" (click)="toggleReadOnly()" class="text-upper">Toggle ReadOnly</button>
+ </mat-card-actions>
+ </mat-card-content>
+ <mat-card-content>
+ <h3 class="mat-title">Autocomplete with custom inputs</h3>
+ <mat-divider></mat-divider>
+ <mat-tab-group mat-stretch-tabs dynamicHeight>
+ <mat-tab>
+ <ng-template mat-tab-label>Demo</ng-template>
+ <div class="push">
+ <div class="mat-body-1">Type and select option or enter custom text and press enter:</div>
+ <td-chips [items]="items" placeholder="Enter any string"></td-chips>
+ </div>
+ </mat-tab>
+ <mat-tab>
+ <ng-template mat-tab-label>Code</ng-template>
+ <mat-card-content>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <td-chips [items]="items" placeholder="Enter any string"></td-chips>
+ ]]>
+ </pre>
+ <p>Javascript:</p>
+ <pre lang="javascript">
+ <![CDATA[
+ this.items = [
+ 'stepper',
+ 'expansion-panel',
+ 'markdown',
+ 'highlight',
+ 'loading',
+ 'media',
+ 'chips',
+ 'http',
+ 'json-formatter',
+ 'pipes',
+ 'need more?',
+ ];
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-tab>
+ </mat-tab-group>
+ </mat-card-content>
+ <mat-card-content>
+ <h3 class="mat-title">Demo allowing custom inputs for tags</h3>
+ <mat-divider></mat-divider>
+ <mat-tab-group mat-stretch-tabs dynamicHeight>
+ <mat-tab>
+ <ng-template mat-tab-label>Demo</ng-template>
+ <div class="push">
+ <div class="mat-body-1">Type any test and press enter:</div>
+ <td-chips placeholder="Enter any string"></td-chips>
+ </div>
+ </mat-tab>
+ <mat-tab>
+ <ng-template mat-tab-label>Code</ng-template>
+ <mat-card-content>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <td-chips placeholder="Enter any string"></td-chips>
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-tab>
+ </mat-tab-group>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Searchable/Filterable Expansion Panels</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <mat-tab-group mat-stretch-tabs>
+ <mat-tab>
+ <ng-template mat-tab-label>Demo</ng-template>
+ <div class="pad-top-md pad-bottom-md pad-right-xxl pad-left-xxl">
+ <div class="pad-top-md pad-bottom-sm">
+ <mat-button-toggle-group fxLayout="row" fxLayoutAlign="space-between center" class="expansion-panel-filter-toggle-group" multiple>
+ <mat-button-toggle (change)="toggleDropletsFilter('type:asset')" [checked]="isDropletFilterChecked('type:asset')">
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">{{getDropletTypeCount('asset')}}</div>
+ <div class="pad-top-sm" fxFlex="45">Assets</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle (change)="toggleDropletsFilter('type:extension')" [checked]="isDropletFilterChecked('type:extension')">
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">{{getDropletTypeCount('extension')}}</div>
+ <div class="pad-top-sm" fxFlex="45">Extensions</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle (change)="toggleDropletsFilter('type:flow')" [checked]="isDropletFilterChecked('type:flow')">
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">{{getDropletTypeCount('flow')}}</div>
+ <div class="pad-top-sm" fxFlex="45">Flows</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle (change)="toggleDropletsFilter('compliant.label:Compliant')" [checked]="isDropletFilterChecked('compliant.label:Compliant')">
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">{{getDropletCertificationCount('compliant')}}</div>
+ <div class="pad-top-sm" fxFlex="45">Compliant</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle (change)="toggleDropletsFilter('fleet.label:Fleet')" [checked]="isDropletFilterChecked('fleet.label:Fleet')">
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">{{getDropletCertificationCount('fleet')}}</div>
+ <div class="pad-top-sm" fxFlex="45">Fleet</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle (change)="toggleDropletsFilter('prod.label:Production Ready')" [checked]="isDropletFilterChecked('prod.label:Production Ready')">
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">{{getDropletCertificationCount('prod')}}</div>
+ <div class="pad-top-sm" fxFlex="45">Production Ready</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle (change)="toggleDropletsFilter('secure.label:Secure')" [checked]="isDropletFilterChecked('secure.label:Secure')">
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">{{getDropletCertificationCount('secure')}}</div>
+ <div class="pad-top-sm" fxFlex="45">Secure</div>
+ </div>
+ </mat-button-toggle>
+ </mat-button-toggle-group>
+ <div id="fds-droplet-filter-clear-grouping-button-container">
+ <span *ngIf="dropletsSearchTerms.length > 0" (click)="dropletsSearchTerms = [];filterDroplets(activeDropletColumn.name, activeDropletColumn.sortOrder);"><i class="fa fa-plus-circle fa-rotate-45" aria-hidden="true"></i><span class="pad-left-sm link">Clear Grouping</span></span>
+ </div>
+ </div>
+ <div layout="row" layout-align="space-between center">
+ <div flex fxLayout="row" fxLayoutAlign="end center">
+ <td-chips [(ngModel)]="dropletsSearchTerms" [items]="autoCompleteDroplets" (add)="filterDroplets(activeDropletColumn.name, activeDropletColumn.sortOrder);" (remove)="filterDroplets(activeDropletColumn.name, activeDropletColumn.sortOrder);" class="push-right-sm"></td-chips>
+ <span class="push-top-sm pad-right-sm">Sort by:</span>
+ <button class="push-top-sm" color="fds-primary" mat-raised-button [matMenuTriggerFor]="dropletGridSortMenu">
+ {{getSortBy()}}<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ </div>
+ <mat-menu class="fds-primary-dropdown-button-menu" #dropletGridSortMenu="matMenu" [overlapTrigger]="false">
+ <div *ngFor="let column of dropletColumns">
+ <button mat-menu-item *ngIf="column.sortable" (click)="sortDroplets(column);">{{column.label}} {{(column.sortOrder === 'ASC') ? 'DESC' : 'ASC'}}</button>
+ </div>
+ </mat-menu>
+ </div>
+ </div>
+ <div class="pad-right-xxl pad-left-xxl">
+ <div *ngFor="let droplet of filteredDroplets">
+ <td-expansion-panel class="mat-elevation-z5" label={{droplet.label}} sublabel={{droplet.sublabel}} [disabled]="disabled">
+ <ng-template td-expansion-panel-label>
+ <div fxLayout="column" fxLayoutAlign="space-between start">
+ <span class="mat-title capitalize">{{droplet.displayName}}</span>
+ <span class="md-subhead">{{droplet.type}}</span>
+ </div>
+ </ng-template>
+ <ng-template td-expansion-panel-sublabel>
+ <div fxLayout="row" fxLayoutAlign="space-between center">
+ <div class="pad-right-xxl pad-left-xxl" fxLayout="column" fxLayoutAlign="space-between start">
+ <span class="uppercase">Versions</span> {{droplet.versions.length}}
+ </div>
+ <div class="pad-right-xxl pad-left-xxl" fxLayout="column" fxLayoutAlign="space-between start">
+ <span class="uppercase">Flows</span> {{droplet.flows.length}}
+ </div>
+ <div class="pad-right-xxl pad-left-xxl" fxLayout="column" fxLayoutAlign="space-between start">
+ <span class="uppercase">Extensions</span> {{droplet.extensions.length}}
+ </div>
+ <div class="pad-right-xxl pad-left-xxl" fxLayout="column" fxLayoutAlign="space-between start">
+ <span class="uppercase">Assests</span> {{droplet.assets.length}}
+ </div>
+ </div>
+ </ng-template>
+ <div class="mat-padding">
+ <div fxLayout="column" fxLayoutAlign="space-between stretch">
+ <div class="pad-bottom-sm" fxLayout="row" fxLayoutAlign="end center">
+ <button color="fds-primary" [matMenuTriggerFor]="primaryButtonDropdownMenu" mat-raised-button>
+ Actions<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ <mat-menu class="fds-primary-dropdown-button-menu" #primaryButtonDropdownMenu="matMenu" [overlapTrigger]="false">
+ <button mat-menu-item *ngFor="let action of droplet.actions">
+ <span>{{action.name}}</span>
+ </button>
+ </mat-menu>
+ </div>
+ <div fxLayout="row">
+ <div fxFlex="25">
+ <span class="uppercase">Description</span>
+ <p>Blah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah bla</p>
+ </div>
+ <div fxFlex="50">
+ <mat-card fxFlex>
+ <mat-card-content class="pad-top-sm">
+ <img src="{{droplet.img}}">
+ </mat-card-content>
+ </mat-card>
+ </div>
+ <div fxFlex="25">
+ <span class="uppercase">Change Log</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </td-expansion-panel>
+ <div class="pad-bottom-sm"></div>
+ </div>
+ </div>
+ </mat-tab>
+ <mat-tab>
+ <ng-template mat-tab-label>Code</ng-template>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <div class="pad-top-md pad-bottom-md pad-right-xxl pad-left-xxl">
+ <div class="pad-top-md pad-bottom-sm">
+ <mat-button-toggle-group fxLayout="row" fxLayoutAlign="space-between center" class="expansion-panel-filter-toggle-group" multiple>
+ <mat-button-toggle (change)="toggleDropletsFilter('type:asset')" [checked]="isDropletFilterChecked('type:asset')">
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">{ {getDropletTypeCount('asset')} }</div>
+ <div class="pad-top-sm" fxFlex="45">Assets</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle (change)="toggleDropletsFilter('type:extension')" [checked]="isDropletFilterChecked('type:extension')">
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">{ {getDropletTypeCount('extension')} }</div>
+ <div class="pad-top-sm" fxFlex="45">Extensions</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle (change)="toggleDropletsFilter('type:flow')" [checked]="isDropletFilterChecked('type:flow')">
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">{ {getDropletTypeCount('flow')} }</div>
+ <div class="pad-top-sm" fxFlex="45">Flows</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle (change)="toggleDropletsFilter('compliant.label:Compliant')" [checked]="isDropletFilterChecked('compliant.label:Compliant')">
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">{ {getDropletCertificationCount('compliant')} }</div>
+ <div class="pad-top-sm" fxFlex="45">Compliant</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle (change)="toggleDropletsFilter('fleet.label:Fleet')" [checked]="isDropletFilterChecked('fleet.label:Fleet')">
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">{ {getDropletCertificationCount('fleet')} }</div>
+ <div class="pad-top-sm" fxFlex="45">Fleet</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle (change)="toggleDropletsFilter('prod.label:Production Ready')" [checked]="isDropletFilterChecked('prod.label:Production Ready')">
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">{ {getDropletCertificationCount('prod')} }</div>
+ <div class="pad-top-sm" fxFlex="45">Production Ready</div>
+ </div>
+ </mat-button-toggle>
+ <mat-button-toggle (change)="toggleDropletsFilter('secure.label:Secure')" [checked]="isDropletFilterChecked('secure.label:Secure')">
+ <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch">
+ <div class="md-display-1 pad-top-sm" fxFlex="55">{ {getDropletCertificationCount('secure')} }</div>
+ <div class="pad-top-sm" fxFlex="45">Secure</div>
+ </div>
+ </mat-button-toggle>
+ </mat-button-toggle-group>
+ <button *ngIf="activeDropletColumn" mat-button color="primary" (click)="dropletsSearchTerms = [];filterDroplets(activeDropletColumn.name, activeDropletColumn.sortOrder);">Clear Grouping</button>
+ </div>
+ <div layout="row" layout-align="space-between center">
+ <div flex fxLayout="row" fxLayoutAlign="end center">
+ <td-chips [(ngModel)]="dropletsSearchTerms" [items]="autoCompleteDroplets" (add)="filterDroplets(activeDropletColumn.name, activeDropletColumn.sortOrder);" (remove)="filterDroplets(activeDropletColumn.name, activeDropletColumn.sortOrder);" class="push-right-sm"></td-chips>
+ <span class="pad-right-sm">Sort by:</span>
+ <button color="fds-primary" mat-raised-button [matMenuTriggerFor]="dropletGridSortMenu">
+ { {getSortBy()} }<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ </div>
+ <mat-menu class="fds-primary-dropdown-button-menu" #dropletGridSortMenu="matMenu" [overlapTrigger]="false">
+ <div *ngFor="let column of dropletColumns">
+ <button mat-menu-item *ngIf="column.sortable" (click)="sortDroplets(column);">{ {column.label} } { {(column.sortOrder === 'ASC') ? 'DESC' : 'ASC'} }</button>
+ </div>
+ </mat-menu>
+ </div>
+ </div>
+ <div class="pad-right-xxl pad-left-xxl">
+ <div *ngFor="let droplet of filteredDroplets">
+ <td-expansion-panel class="mat-elevation-z5" label={ {droplet.label} } sublabel={ {droplet.sublabel} } [disabled]="disabled">
+ <ng-template td-expansion-panel-label>
+ <div fxLayout="column" fxLayoutAlign="space-between start">
+ <span class="mat-title capitalize">{ {droplet.displayName} }</span>
+ <span class="md-subhead">{ {droplet.type} }</span>
+ </div>
+ </ng-template>
+ <ng-template td-expansion-panel-sublabel>
+ <div fxLayout="row" fxLayoutAlign="space-between center">
+ <div class="pad-right-xxl pad-left-xxl" fxLayout="column" fxLayoutAlign="space-between start">
+ <span class="uppercase">Versions</span> { {droplet.versions.length} }
+ </div>
+ <div class="pad-right-xxl pad-left-xxl" fxLayout="column" fxLayoutAlign="space-between start">
+ <span class="uppercase">Flows</span> { {droplet.flows.length} }
+ </div>
+ <div class="pad-right-xxl pad-left-xxl" fxLayout="column" fxLayoutAlign="space-between start">
+ <span class="uppercase">Extensions</span> { {droplet.extensions.length} }
+ </div>
+ <div class="pad-right-xxl pad-left-xxl" fxLayout="column" fxLayoutAlign="space-between start">
+ <span class="uppercase">Assests</span> { {droplet.assets.length} }
+ </div>
+ </div>
+ </ng-template>
+ <div class="mat-padding">
+ <div fxLayout="column" fxLayoutAlign="space-between stretch">
+ <div class="pad-bottom-sm" fxLayout="row" fxLayoutAlign="end center">
+ <button color="fds-primary" [matMenuTriggerFor]="primaryButtonDropdownMenu" mat-raised-button>
+ Actions<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ <mat-menu class="fds-primary-dropdown-button-menu" #primaryButtonDropdownMenu="matMenu" [overlapTrigger]="false">
+ <button mat-menu-item *ngFor="let action of droplet.actions">
+ <span>{ {action.name} }</span>
+ </button>
+ </mat-menu>
+ </div>
+ <div fxLayout="row">
+ <div fxFlex="25">
+ <span class="uppercase">Description</span>
+ <p>Blah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah bla</p>
+ </div>
+ <div fxFlex="50">
+ <mat-card fxFlex>
+ <mat-card-content class="pad-top-sm">
+ <img src="{ {droplet.img} }">
+ </mat-card-content>
+ </mat-card>
+ </div>
+ <div fxFlex="25">
+ <span class="uppercase">Change Log</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </td-expansion-panel>
+ <div class="pad-bottom-sm"></div>
+ </div>
+ </div>
+ ]]>
+ </pre>
+ <p>Javascript:</p>
+ <pre lang="javascript">
+ <![CDATA[
+ this.dataTableService = TdDataTableService;
+
+ this.droplets = [{
+ id: '23f6cc59-0156-1000-09b4-2b0610089090',
+ name: "Decompression_Circular_Flow",
+ displayName: 'Decompressed Circular flow',
+ type: 'flow',
+ sublabel: 'A sublabel',
+ compliant: {
+ id: '25fd6vv87-3549-0001-05g6-4d4567890765',
+ label: 'Compliant',
+ type: 'certification'
+ },
+ fleet: {
+ id: '23f6cc59-3549-0001-05g6-4d4567890765',
+ label: 'Fleet',
+ type: 'certification'
+ },
+ prod: {
+ id: '52fd6vv87-3549-0001-05g6-4d4567890765',
+ label: 'Production Ready',
+ type: 'certification'
+ },
+ secure: {
+ id: '32f6cc59-3549-0001-05g6-4d4567890765',
+ label: 'Secure',
+ type: 'certification'
+ },
+ versions: [{
+ id: '23f6cc59-0156-1000-06b4-2b0810089090',
+ revision: '1',
+ dependentFlows: [{
+ id: '25fd6vv87-3549-0001-05g6-4d4567890765'
+ }],
+ created: date.setDate(date.getDate() - 1),
+ updated: new Date()
+ }, {
+ id: '25fd6vv87-3549-0001-05g6-4d4567890765',
+ revision: '2',
+ dependentFlows: [{
+ id: '23f6cc59-0156-1000-06b4-2b0810089090'
+ }],
+ created: new Date(),
+ updated: new Date()
+ }],
+ flows: [],
+ extensions: [],
+ assets: [],
+ actions: [{
+ 'name': 'Delete',
+ 'icon': 'fa fa-close',
+ 'tooltip': 'Delete User'
+ }, {
+ 'name': 'Manage',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage User'
+ }, {
+ 'name': 'Action 3',
+ 'icon': 'fa fa-question',
+ 'tooltip': 'Whatever else we want to do...'
+ }]
+ }, {
+ id: '25fd6vv87-3249-0001-05g6-4d4767890765',
+ name: "DateConversion",
+ displayName: 'Date conversion',
+ type: 'asset',
+ sublabel: 'A sublabel',
+ compliant: {
+ id: '25fd6vv34-3549-0001-05g6-4d4567890765',
+ label: 'Compliant',
+ type: 'certification'
+ },
+ prod: {
+ id: '52vn6vv87-3549-0001-05g6-4d4567890765',
+ label: 'Production Ready',
+ type: 'certification'
+ },
+ versions: [{
+ id: '23f6ic59-0156-1000-06b4-2b0810089090',
+ revision: '1',
+ dependentFlows: [{
+ id: '23f6cc19-0156-1000-06b4-2b0810089090'
+ }],
+ created: new Date(),
+ updated: new Date()
+ }],
+ flows: [],
+ extensions: [],
+ assets: [],
+ actions: [{
+ 'name': 'Delete',
+ 'icon': 'fa fa-close',
+ 'tooltip': 'Delete User'
+ }]
+ }, {
+ id: '52fd6vv87-3294-0001-05g6-4d4767890765',
+ name: "nifi-email-bundle",
+ displayName: 'nifi-email-bundle',
+ type: 'extension',
+ sublabel: 'A sublabel',
+ compliant: {
+ id: '33fd6vv87-3549-0001-05g6-4d4567890765',
+ label: 'Compliant',
+ test: {
+ label: 'test'
+ },
+ type: 'certification'
+ },
+ versions: [{
+ id: '23d3cc59-0156-1000-06b4-2b0810089090',
+ revision: '1',
+ dependentFlows: [{
+ id: '23f6cc89-0156-1000-06b4-2b0810089090'
+ }],
+ created: new Date(),
+ updated: new Date()
+ }],
+ flows: [],
+ extensions: [],
+ assets: [],
+ actions: [{
+ 'name': 'Delete',
+ 'icon': 'fa fa-close',
+ 'tooltip': 'Delete User'
+ }, {
+ 'name': 'Manage',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage User'
+ }, ]
+ }];
+
+ this.filteredDroplets = [];
+
+ this.dropletColumns = [
+ { name: 'id', label: 'ID', sortable: true },
+ { name: 'name', label: 'Name', sortable: true },
+ { name: 'displayName', label: 'Display Name', sortable: true },
+ { name: 'sublabel', label: 'Label', sortable: true },
+ { name: 'type', label: 'Type', sortable: true }
+ ];
+
+ this.autoCompleteDroplets = [];
+ this.dropletsSearchTerms = [];
+
+ ...
+
+ isDropletFilterChecked: function(term) {
+ return (this.dropletsSearchTerms.indexOf(term) > -1);
+ },
+
+ getDropletTypeCount: function(type) {
+ return this.filteredDroplets.filter(function(droplet) {
+ return droplet.type === type;
+ }).length;
+ },
+
+ getDropletCertificationCount: function(certification) {
+ return this.filteredDroplets.filter(droplet => {
+ return Object.keys(droplet).find((key) => {
+ if (key === certification && droplet[certification].type === 'certification') {
+ return droplet;
+ }
+ });
+ }).length;
+ },
+
+ getSortBy: function() {
+ var sortByColumnLabel;
+ var arrayLength = this.dropletColumns.length;
+ for (var i = 0; i < arrayLength; i++) {
+ if (this.dropletColumns[i].active === true) {
+ sortByColumnLabel = this.dropletColumns[i].label;
+ break;
+ }
+ }
+ return sortByColumnLabel;
+ },
+
+ sortDroplets: function(column) {
+ if (column.sortable === true) {
+ // toggle column sort order
+ var sortOrder = column.sortOrder = (column.sortOrder === 'ASC') ? 'DESC' : 'ASC';
+ this.filterDroplets(column.name, sortOrder);
+ //only one column can be actively sorted so we reset all to inactive
+ this.dropletColumns.forEach(function (c) {
+ c.active = false;
+ });
+ //and set this column as the actively sorted column
+ column.active = true;
+ this.activeDropletColumn = column;
+ }
+ },
+
+ toggleDropletsFilter: function(searchTerm) {
+ var applySearchTerm = true;
+ // check if the search term is already applied and remove it if true
+ if (this.dropletsSearchTerms.length > 0) {
+ var arrayLength = this.dropletsSearchTerms.length;
+ for (var i = 0; i < arrayLength; i++) {
+ var index = this.dropletsSearchTerms.indexOf(searchTerm);
+ if (index > -1) {
+ this.dropletsSearchTerms.splice(index, 1);
+ applySearchTerm = false;
+ }
+ }
+ }
+
+ // if we just removed the search term do NOT apply it again
+ if (applySearchTerm) {
+ this.dropletsSearchTerms.push(searchTerm);
+ }
+
+ this.filterDroplets(this.activeDropletColumn.name, this.activeDropletColumn.sortOrder);
+ },
+
+ filterDroplets: function(sortBy, sortOrder) {
+ // if `sortBy` is `undefined` then find the first sortable column in this.dropletColumns
+ if (sortBy === undefined) {
+ var arrayLength = this.dropletColumns.length;
+ for (var i = 0; i < arrayLength; i++) {
+ if (this.dropletColumns[i].sortable === true) {
+ sortBy = this.dropletColumns[i].name;
+ this.activeDropletColumn = this.dropletColumns[i];
+ //only one column can be actively sorted so we reset all to inactive
+ this.dropletColumns.forEach(c => c.active = false);
+ //and set this column as the actively sorted column
+ this.dropletColumns[i].active = true;
+ break;
+ }
+ }
+ }
+
+ // if `sortOrder` is `undefined` then use 'ASC'
+ if (sortOrder === undefined) {
+ sortOrder = 'ASC'
+ }
+
+ var newData = this.droplets;
+
+ for (var i = 0; i < this.dropletsSearchTerms.length; i++) {
+ newData = this.filterData(newData, this.dropletsSearchTerms[i], true, this.activeDropletColumn.name);
+ }
+
+ newData = this.dataTableService.sortData(newData, sortBy, sortOrder);
+ this.filteredDroplets = newData;
+ this.getAutoCompleteDroplets();
+ },
+
+ getAutoCompleteDroplets: function() {
+ this.autoCompleteDroplets = [];
+ this.dropletColumns.forEach(c => this.filteredDroplets.forEach(r => (r[c.name.toLowerCase()]) ? this.autoCompleteDroplets.push(r[c.name.toLowerCase()].toString()) : ''));
+ },
+
+ filterData: function(data, searchTerm, ignoreCase) {
+ var field = '';
+ if (searchTerm.indexOf(":") > -1) {
+ field = searchTerm.split(':')[0].trim();
+ searchTerm = searchTerm.split(':')[1].trim();
+ }
+ var filter = searchTerm ? (ignoreCase ? searchTerm.toLowerCase() : searchTerm) : '';
+
+ if (filter) {
+ data = data.filter(item => {
+ var res = Object.keys(item).find((key) => {
+ if (field.indexOf(".") > -1) {
+ var objArray = field.split(".");
+ var obj = item;
+ var arrayLength = objArray.length;
+ for (var i = 0; i < arrayLength; i++) {
+ try {
+ obj = obj[objArray[i]];
+ } catch (e) {
+ return false;
+ }
+ }
+ var preItemValue = ('' + obj);
+ var itemValue = ignoreCase ? preItemValue.toLowerCase() : preItemValue;
+ return itemValue.indexOf(filter) > -1;
+ } else {
+ if (key !== field && field !== '') {
+ return false;
+ }
+ var preItemValue = ('' + item[key]);
+ var itemValue = ignoreCase ? preItemValue.toLowerCase() : preItemValue;
+ return itemValue.indexOf(filter) > -1;
+ }
+ });
+ return !(typeof res === 'undefined');
+ });
+ }
+ return data;
+ },
+
+ ...
+ ]]>
+ </pre>
+ </mat-tab>
+ </mat-tab-group>
+ </mat-card-content>
+ <mat-divider></mat-divider>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Table</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <p>Example table with: Paging Bar / Filter / Sortable Columns / Multi-select with available Actions</p>
+ <mat-tab-group mat-stretch-tabs>
+ <mat-tab>
+ <ng-template mat-tab-label>Demo</ng-template>
+ <div layout="row" layout-align="space-between center" class="pad-top-md pad-bottom-sm pad-left-md pad-right-md">
+ <span class="table-title">
+ <span>Table title</span>
+ </span>
+ <div flex class="push-right-sm" fxLayout="row" fxLayoutAlign="end center">
+ <td-chips [items]="autoCompleteData" (add)="searchAdd($event)" (remove)="searchRemove($event)"></td-chips>
+ <button class="push-top-sm" color="fds-primary" mat-raised-button [matMenuTriggerFor]="dataTableActionMenu">
+ Actions<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ </div>
+ <mat-menu class="fds-primary-dropdown-button-menu" #dataTableActionMenu="matMenu" [overlapTrigger]="false">
+ <button mat-menu-item> Option 1 </button>
+ <button mat-menu-item> Option 2 </button>
+ </mat-menu>
+ </div>
+ <div class="pad-left-md pad-right-md">
+ <div fxLayout="row" fxLayoutAlign="space-between center" class="td-data-table">
+ <div class="td-data-table-column" (click)="sort($event, column)" [matTooltip]="column.tooltip" *ngFor="let column of columns" fxFlex="{{column.width}}">
+ <i *ngIf="column.active && column.sortable && column.sortOrder === 'ASC'" class="fa fa-caret-up" aria-hidden="true"></i>
+ <i *ngIf="column.active && column.sortable && column.sortOrder === 'DESC'" class="fa fa-caret-down" aria-hidden="true"></i>
+ {{column.label}}
+ </div>
+ <div class="td-data-table-column" fxFlex=10>
+ <div fxLayout="row" fxLayoutAlign="end center">
+ <mat-checkbox class="pad-left-sm" [(ngModel)]="allRowsSelected" (checked)="allRowsSelected" (change)="toggleSelectAll()"></mat-checkbox>
+ </div>
+ </div>
+ </div>
+ <div>
+ <div fxLayout="row" fxLayoutAlign="space-between center" class="td-data-table-row" [ngClass]="{'selected' : row.checked}" *ngFor="let row of filteredData" (click)="row.checked = !row.checked;toggleSelect(row)">
+ <div class="td-data-table-cell" *ngFor="let column of columns" fxFlex="{{column.width}}">
+ <div *ngIf="column.name !== 'comments' || row['comments']">
+ {{column.format ? column.format(row[column.name]) : row[column.name]}}
+ </div>
+ </div>
+ <div class="td-data-table-cell" fxFlex=10>
+ <div *ngIf="row.actions">
+ <div *ngIf="row.actions.length <= 4" fxLayout="row" fxLayoutAlign="end center">
+ <button (click)="row.checked = !row.checked" *ngFor="let action of row.actions" matTooltip="{{action.tooltip}}" mat-icon-button color="accent" [disabled]="action.disabled ? '' : null">
+ <i class="{{action.icon}}" aria-hidden="true"></i>
+ </button>
+ <mat-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked" (change)="toggleSelect(row)" (click)="row.checked = !row.checked;toggleSelect(row)"></mat-checkbox>
+ </div>
+ <div *ngIf="row.actions.length > 4" fxLayout="row" fxLayoutAlign="end center">
+ <button (click)="row.checked = !row.checked" matTooltip="Actions" mat-icon-button color="accent" [matMenuTriggerFor]="tableActionMenu">
+ <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
+ </button>
+ <mat-menu #tableActionMenu="matMenu" [overlapTrigger]="false">
+ <button *ngFor="let action of row.actions" matTooltip="{{action.tooltip}}" mat-menu-item [disabled]="action.disabled ? '' : null">
+ <i class="{{action.icon}}" aria-hidden="true"></i>
+ <span>{{action.name}}</span>
+ </button>
+ </mat-menu>
+ <mat-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked" (change)="toggleSelect(row)" (click)="row.checked = !row.checked;toggleSelect(row)"></mat-checkbox>
+ </div>
+ </div>
+ <div *ngIf="!row.actions" fxLayout="row" fxLayoutAlign="end center">
+ <mat-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked" (change)="toggleSelect(row)" (click)="row.checked = !row.checked;toggleSelect(row)"></mat-checkbox>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="mat-padding" *ngIf="!filteredData.length > 0" layout="row" layout-align="center center">
+ <h3>No results to display.</h3>
+ </div>
+ <td-paging-bar #pagingBar [initialPage]="1" [pageSize]="pageSize" [total]="pageCount" (change)="page($event)">
+ <span hide-xs>Row per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
+ </td-paging-bar>
+ </div>
+ </mat-tab>
+ <mat-tab>
+ <ng-template mat-tab-label>Code</ng-template>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <div layout="row" layout-align="space-between center" class="pad-top-md pad-bottom-sm pad-left-md pad-right-md">
+ <span class="table-title">
+ <span>Table title</span>
+ </span>
+ <div flex class="push-right-sm" fxLayout="row" fxLayoutAlign="end center">
+ <td-chips [items]="autoCompleteData" (add)="searchAdd($event)" (remove)="searchRemove($event)"></td-chips>
+ <button color="fds-primary" mat-raised-button [matMenuTriggerFor]="dataTableActionMenu">
+ Actions<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ </div>
+ <mat-menu class="fds-primary-dropdown-button-menu" #dataTableActionMenu="matMenu" [overlapTrigger]="false">
+ <button mat-menu-item> Option 1 </button>
+ <button mat-menu-item> Option 2 </button>
+ </mat-menu>
+ </div>
+ <div class="pad-left-md pad-right-md">
+ <div fxLayout="row" fxLayoutAlign="space-between center" class="td-data-table">
+ <div class="td-data-table-column" (click)="sort($event, column)" [matTooltip]="column.tooltip" *ngFor="let column of columns" fxFlex="{ { column.width } }">
+ { { column.label } }
+ <i *ngIf="column.active && column.sortable && column.sortOrder === 'ASC'" class="fa fa-caret-up" aria-hidden="true"></i>
+ <i *ngIf="column.active && column.sortable && column.sortOrder === 'DESC'" class="fa fa-caret-down" aria-hidden="true"></i>
+ </div>
+ <div class="td-data-table-column" fxFlex=10>
+ <div fxLayout="row" fxLayoutAlign="end center">
+ <mat-checkbox class="pad-left-sm" [(ngModel)]="allRowsSelected" (checked)="allRowsSelected" (change)="toggleSelectAll()"></mat-checkbox>
+ </div>
+ </div>
+ </div>
+ <div>
+ <div fxLayout="row" fxLayoutAlign="space-between center" class="td-data-table-row" [ngClass]="{'selected' : row.checked}" *ngFor="let row of filteredData" (click)="row.checked = !row.checked;toggleSelect(row)">
+ <div class="td-data-table-cell" *ngFor="let column of columns" fxFlex="{ { column.width } }">
+ <div *ngIf="column.name !== 'comments' || row['comments']">
+ { { column.format ? column.format(row[column.name]) : row[column.name] } }
+ </div>
+ </div>
+ <div class="td-data-table-cell" fxFlex=10>
+ <div *ngIf="row.actions">
+ <div *ngIf="row.actions.length <= 4" fxLayout="row" fxLayoutAlign="end center">
+ <button (click)="row.checked = !row.checked" *ngFor="let action of row.actions" matTooltip="{ { action.tooltip } }" mat-icon-button color="accent" [disabled]="action.disabled ? '' : null">
+ <i class="{ { action.icon } }" aria-hidden="true"></i>
+ </button>
+ <mat-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked" (change)="toggleSelect(row)" (click)="row.checked = !row.checked;toggleSelect(row)"></mat-checkbox>
+ </div>
+ <div *ngIf="row.actions.length > 4" fxLayout="row" fxLayoutAlign="end center">
+ <button (click)="row.checked = !row.checked" matTooltip="Actions" mat-icon-button color="accent" [matMenuTriggerFor]="tableActionMenu">
+ <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
+ </button>
+ <mat-menu #tableActionMenu="matMenu" [overlapTrigger]="false">
+ <button *ngFor="let action of row.actions" matTooltip="{ { action.tooltip } }" mat-menu-item [disabled]="action.disabled ? '' : null">
+ <i class="{ { action.icon } }" aria-hidden="true"></i>
+ <span>{ { action.name } }</span>
+ </button>
+ </mat-menu>
+ <mat-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked" (change)="toggleSelect(row)" (click)="row.checked = !row.checked;toggleSelect(row)"></mat-checkbox>
+ </div>
+ </div>
+ <div *ngIf="!row.actions" fxLayout="row" fxLayoutAlign="end center">
+ <mat-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked" (change)="toggleSelect(row)" (click)="row.checked = !row.checked;toggleSelect(row)"></mat-checkbox>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="mat-padding" *ngIf="!filteredData.length > 0" layout="row" layout-align="center center">
+ <h3>No results to display.</h3>
+ </div>
+ <td-paging-bar #pagingBar [initialPage]="1" [pageSize]="pageSize" [total]="pageCount" (change)="page($event)">
+ <span hide-xs>Row per page:</span> { { pagingBar.range } } <span hide-xs>of { { pagingBar.total } }</span>
+ </td-paging-bar>
+ </div>
+ ]]>
+ </pre>
+ <p>Javascript:</p>
+ <pre lang="javascript">
+ <![CDATA[
+ this.dataTableService = TdDataTableService;
+
+ this.data = [{
+ 'id': 1,
+ 'name': 'Frozen yogurt',
+ 'type': 'Ice cream',
+ 'calories': 159.0,
+ 'fat': 6.0,
+ 'carbs': 24.0,
+ 'protein': 4.0,
+ 'sodium': 87.0,
+ 'calcium': 14.0,
+ 'iron': 1.0,
+ 'comments': 'I love froyo!',
+ 'actions': [{
+ 'name': 'Action 1',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage Users'
+ }, {
+ 'name': 'Action 2',
+ 'icon': 'fa fa-key',
+ 'tooltip': 'Manage Permissions'
+ }]
+ }, {
+ 'id': 2,
+ 'name': 'Ice cream sandwich',
+ 'type': 'Ice cream',
+ 'calories': 237.0,
+ 'fat': 9.0,
+ 'carbs': 37.0,
+ 'protein': 4.3,
+ 'sodium': 129.0,
+ 'calcium': 8.0,
+ 'iron': 1.0,
+ 'actions': [{
+ 'name': 'Action 1',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage Users'
+ }, {
+ 'name': 'Action 2',
+ 'icon': 'fa fa-key',
+ 'tooltip': 'Manage Permissions'
+ }, {
+ 'name': 'Action 3',
+ 'tooltip': 'Action 3'
+ }, {
+ 'name': 'Action 4',
+ 'disabled': true,
+ 'tooltip': 'Action 4'
+ }, {
+ 'name': 'Action 5',
+ 'tooltip': 'Action 5'
+ }]
+ }, {
+ 'id': 3,
+ 'name': 'Eclair',
+ 'type': 'Pastry',
+ 'calories': 262.0,
+ 'fat': 16.0,
+ 'carbs': 24.0,
+ 'protein': 6.0,
+ 'sodium': 337.0,
+ 'calcium': 6.0,
+ 'iron': 7.0,
+ 'actions': [{
+ 'name': 'Action 1',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage Users'
+ }, {
+ 'name': 'Action 2',
+ 'icon': 'fa fa-key',
+ 'tooltip': 'Manage Permissions'
+ }, {
+ 'name': 'Action 3',
+ 'tooltip': 'Action 3'
+ }, {
+ 'name': 'Action 4',
+ 'disabled': true,
+ 'tooltip': 'Action 4'
+ }, {
+ 'name': 'Action 5',
+ 'tooltip': 'Action 5'
+ }],
+ }, {
+ 'id': 4,
+ 'name': 'Cupcake',
+ 'type': 'Pastry',
+ 'calories': 305.0,
+ 'fat': 3.7,
+ 'carbs': 67.0,
+ 'protein': 4.3,
+ 'sodium': 413.0,
+ 'calcium': 3.0,
+ 'iron': 8.0,
+ 'actions': [{
+ 'name': 'Action 1',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage Users'
+ }, {
+ 'name': 'Action 2',
+ 'icon': 'fa fa-key',
+ 'tooltip': 'Manage Permissions'
+ }, {
+ 'name': 'Action 3',
+ 'tooltip': 'Action 3'
+ }, {
+ 'name': 'Action 4',
+ 'disabled': true,
+ 'tooltip': 'Action 4'
+ }, {
+ 'name': 'Action 5',
+ 'tooltip': 'Action 5'
+ }],
+ }, {
+ 'id': 5,
+ 'name': 'Jelly bean',
+ 'type': 'Candy',
+ 'calories': 375.0,
+ 'fat': 0.0,
+ 'carbs': 94.0,
+ 'protein': 0.0,
+ 'sodium': 50.0,
+ 'calcium': 0.0,
+ 'iron': 0.0,
+ }, {
+ 'id': 6,
+ 'name': 'Lollipop',
+ 'type': 'Candy',
+ 'calories': 392.0,
+ 'fat': 0.2,
+ 'carbs': 98.0,
+ 'protein': 0.0,
+ 'sodium': 38.0,
+ 'calcium': 0.0,
+ 'iron': 2.0,
+ }, {
+ 'id': 7,
+ 'name': 'Honeycomb',
+ 'type': 'Other',
+ 'calories': 408.0,
+ 'fat': 3.2,
+ 'carbs': 87.0,
+ 'protein': 6.5,
+ 'sodium': 562.0,
+ 'calcium': 0.0,
+ 'iron': 45.0,
+ }, {
+ 'id': 8,
+ 'name': 'Donut',
+ 'type': 'Pastry',
+ 'calories': 452.0,
+ 'fat': 25.0,
+ 'carbs': 51.0,
+ 'protein': 4.9,
+ 'sodium': 326.0,
+ 'calcium': 2.0,
+ 'iron': 22.0,
+ }, {
+ 'id': 9,
+ 'name': 'KitKat',
+ 'type': 'Candy',
+ 'calories': 518.0,
+ 'fat': 26.0,
+ 'carbs': 65.0,
+ 'protein': 7.0,
+ 'sodium': 54.0,
+ 'calcium': 12.0,
+ 'iron': 6.0,
+ }, {
+ 'id': 10,
+ 'name': 'Chocolate',
+ 'type': 'Candy',
+ 'calories': 518.0,
+ 'fat': 26.0,
+ 'carbs': 65.0,
+ 'protein': 7.0,
+ 'sodium': 54.0,
+ 'calcium': 12.0,
+ 'iron': 6.0,
+ }, {
+ 'id': 11,
+ 'name': 'Chamoy',
+ 'type': 'Candy',
+ 'calories': 518.0,
+ 'fat': 26.0,
+ 'carbs': 65.0,
+ 'protein': 7.0,
+ 'sodium': 54.0,
+ 'calcium': 12.0,
+ 'iron': 6.0,
+ }, ];
+
+ this.filteredData = this.data;
+ this.filteredTotal = this.data.length;
+
+ this.columns = [
+ { name: 'comments', label: 'Comments' },
+ { name: 'name', label: 'Dessert (100g serving)', sortable: true },
+ { name: 'type', label: 'Type', sortable: true },
+ { name: 'calories', label: 'Calories', numeric: true, format: NUMBER_FORMAT, sortable: true },
+ { name: 'fat', label: 'Fat (g)', numeric: true, format: DECIMAL_FORMAT, sortable: true },
+ { name: 'carbs', label: 'Carbs (g)', numeric: true, format: NUMBER_FORMAT, sortable: true },
+ { name: 'protein', label: 'Protein (g)', numeric: true, format: DECIMAL_FORMAT, sortable: true },
+ { name: 'sodium', label: 'Sodium (mg)', numeric: true, format: NUMBER_FORMAT, sortable: true },
+ { name: 'calcium', label: 'Calcium (%)', numeric: true, format: NUMBER_FORMAT, sortable: true },
+ { name: 'iron', label: 'Iron (%)', numeric: true, format: NUMBER_FORMAT },
+ ];
+
+ this.allRowsSelected = false;
+ this.autoCompleteData = [];
+ this.selectedRows = [];
+
+ this.searchTerm = [];
+ this.fromRow = 1;
+ this.currentPage = 1;
+ this.pageSize = 5;
+
+ ...
+
+ sort: function(sortEvent, column) {
+ if (column.sortable) {
+ var sortBy = column.name;
+ var sortOrder = column.sortOrder = (column.sortOrder === 'ASC') ? 'DESC' : 'ASC';
+ this.filter(sortBy, sortOrder);
+
+ //only one column can be actively sorted so we reset all to inactive
+ this.columns.forEach(c => c.active = false);
+ //and set this column as the actively sorted column
+ column.active = true;
+ }
+ },
+
+ searchRemove: function(searchTerm) {
+ //only remove the first occurrence of the search term
+ var index = this.searchTerm.indexOf(searchTerm);
+ if (index !== -1) {
+ this.searchTerm.splice(index, 1);
+ }
+ this.filter();
+ },
+
+ searchAdd: function(searchTerm) {
+ this.searchTerm.push(searchTerm);
+ this.filter();
+ },
+
+ page: function(pagingEvent) {
+ this.fromRow = pagingEvent.fromRow;
+ this.currentPage = pagingEvent.page;
+ this.pageSize = pagingEvent.pageSize;
+ this.filter();
+ },
+
+ filterData: function(data, searchTerm, ignoreCase) {
+ var field = '';
+ if (searchTerm.indexOf(":") > -1) {
+ field = searchTerm.split(':')[0].trim();
+ searchTerm = searchTerm.split(':')[1].trim();
+ }
+ var filter = searchTerm ? (ignoreCase ? searchTerm.toLowerCase() : searchTerm) : '';
+
+ if (filter) {
+ data = data.filter(item => {
+ var res = Object.keys(item).find((key) => {
+ if (field.indexOf(".") > -1) {
+ var objArray = field.split(".");
+ var obj = item;
+ var arrayLength = objArray.length;
+ for (var i = 0; i < arrayLength; i++) {
+ try {
+ obj = obj[objArray[i]];
+ } catch (e) {
+ return false;
+ }
+ }
+ var preItemValue = ('' + obj);
+ var itemValue = ignoreCase ? preItemValue.toLowerCase() : preItemValue;
+ return itemValue.indexOf(filter) > -1;
+ } else {
+ if (key !== field && field !== '') {
+ return false;
+ }
+ var preItemValue = ('' + item[key]);
+ var itemValue = ignoreCase ? preItemValue.toLowerCase() : preItemValue;
+ return itemValue.indexOf(filter) > -1;
+ }
+ });
+ return !(typeof res === 'undefined');
+ });
+ }
+ return data;
+ },
+
+ filter: function(sortBy, sortOrder) {
+ if (this.allRowsSelected) {
+ this.toggleSelectAll();
+ }
+ this.deselectAll();
+ var newData = this.data;
+
+ if (this.searchTerm.length > 0) {
+ for (var i = 0; i < this.searchTerm.length; i++) {
+ //account for column/field name specific search syntax
+ if (this.searchTerm[i].indexOf(":") > -1) {
+ newData = this.filterData(newData, this.searchTerm[i].split(':')[1].trim(), true, this.searchTerm[i].split(':')[0].trim());
+ } else { //otherwise search all cells
+ newData = this.filterData(newData, this.searchTerm[i], true);
+ }
+ }
+ } else {
+ newData = this.dataTableService.filterData(newData, '', true);
+ }
+ this.filteredTotal = newData.length;
+ newData = this.dataTableService.sortData(newData, sortBy, sortOrder);
+ newData = this.dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
+ this.filteredData = newData;
+ this.getAutoCompleteData();
+ },
+
+ toggleSelect: function(row) {
+ if (!row.checked) {
+ this.allRowsSelected = false;
+ } else {
+ if (this.allFilteredRowsSelected()) {
+ this.allRowsSelected = true;
+ } else {
+ this.allRowsSelected = false;
+ }
+ }
+ },
+
+ toggleSelectAll: function() {
+ this.allRowsSelected = !this.allRowsSelected;
+ if (this.allRowsSelected) {
+ this.selectAll();
+ } else {
+ this.deselectAll();
+ }
+ },
+
+ selectAll: function() {
+ this.filteredData.forEach(c => c.checked = true);
+ },
+
+ deselectAll: function() {
+ this.filteredData.forEach(c => c.checked = false);
+ },
+
+ allFilteredRowsSelected: function() {
+ var allFilteredRowsSelected = true;
+ this.filteredData.forEach(function(c) {
+ if (c.checked === undefined || c.checked === false) {
+ allFilteredRowsSelected = false;
+ }
+ });
+
+ return allFilteredRowsSelected;
+ },
+
+ areTooltipsOn: function() {
+ return this.columns[0].hasOwnProperty('tooltip');
+ },
+
+ toggleTooltips: function() {
+ if (this.columns[0].tooltip) {
+ this.columns.forEach(c => delete c.tooltip);
+ } else {
+ this.columns.forEach(c => c.tooltip = `This is ${c.label}!`);
+ }
+ },
+
+ openDataTablePrompt: function(row, name) {
+ this.dialogService.openPrompt({
+ message: 'Enter comment?',
+ value: row[name],
+ }).afterClosed().subscribe(value => {
+ if (value !== undefined) {
+ row[name] = value;
+ }
+ })
+ },
+
+ getAutoCompleteData: function() {
+ this.autoCompleteData = [];
+ this.columns.forEach(c => this.filteredData.forEach(r => (r[c.name.toLowerCase()]) ? this.autoCompleteData.push(r[c.name.toLowerCase()].toString()):''));
+ },
+
+ ...
+ ]]>
+ </pre>
+ </mat-tab>
+ </mat-tab-group>
+ </mat-card-content>
+ <mat-divider></mat-divider>
+ <mat-card-actions>
+ <button matTooltip="Column field name tooltips toggle." mat-button color="primary" (click)="toggleTooltips()" class="text-upper">
+ Tooltips ({{areTooltipsOn() ? 'ON' : 'OFF'}})
+ </button>
+ </mat-card-actions>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Checkbox</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <h3 class="mat-title">Basic Usage</h3>
+ <mat-divider></mat-divider>
+ <mat-list>
+ <mat-list-item *ngFor="let grocery of groceries">
+ <mat-checkbox [checked]="grocery.bought">
+ {{grocery.name}}
+ </mat-checkbox>
+ </mat-list-item>
+ </mat-list>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- Basic Usage -->
+ <mat-checkbox [checked]="grocery.bought">
+ { {grocery.name} }
+ </mat-checkbox>
+ ]]>
+ </pre>
+ <p>Javascript:</p>
+ <pre lang="javascript">
+ <![CDATA[
+ this.groceries = [{
+ bought: true,
+ name: 'Seitan',
+ }, {
+ bought: false,
+ name: 'Almond Meal Flour',
+ }, {
+ bought: false,
+ name: 'Organic Eggs',
+ }, ];
+ ]]>
+ </pre>
+ <h3 class="mat-title">Usage within Forms</h3>
+ <mat-divider></mat-divider>
+ <form>
+ <div layout="row" layout-align="start center">
+ <mat-checkbox flex="initial" [(ngModel)]="user.agreesToTOS" name="agreesToTOS">
+ I agree to the terms
+ </mat-checkbox>
+ <button mat-raised-button color="fds-secondary" [disabled]="!user.agreesToTOS" class="pad-right-sm" class="text-upper">Sign Up</button>
+ </div>
+ <mat-divider></mat-divider>
+ <mat-checkbox labelPosition="after">
+ I come after my label.
+ </mat-checkbox>
+ <mat-divider></mat-divider>
+ <mat-checkbox labelPosition="before">I come before my label</mat-checkbox>
+ </form>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- Usage within Forms -->
+ <form>
+ <div layout="row" layout-align="start center">
+ <mat-checkbox flex="initial" [(ngModel)]="user.agreesToTOS" name="agreesToTOS">
+ I agree to the terms
+ </mat-checkbox>
+ <button mat-raised-button color="fds-secondary" [disabled]="!user.agreesToTOS" class="pad-right-sm" class="text-upper">Sign Up</button>
+ </div>
+ <mat-divider></mat-divider>
+ <mat-checkbox labelPosition="after">
+ I come after my label.
+ </mat-checkbox>
+ <mat-divider></mat-divider>
+ <mat-checkbox labelPosition="before">I come before my label</mat-checkbox>
+ </form>
+ ]]>
+ </pre>
+ <p>Javascript:</p>
+ <pre lang="javascript">
+ <![CDATA[
+ this.user = {
+ agreesToTOS: false
+ };
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Radios</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content layout="row">
+ <div flex="48" class="pad-right">
+ <!-- Basic Radios -->
+ <h3 class="mat-title">Basic Radios</h3>
+ <mat-radio-group name="group1">
+ <mat-radio-button class="pad-right-sm" name="group1">Option 1 </mat-radio-button>
+ <mat-radio-button class="pad-right-sm" name="group1">Option 2 </mat-radio-button>
+ <mat-radio-button class="pad-right-sm" name="group1" disabled="true">Option 3 (disabled) </mat-radio-button>
+ </mat-radio-group>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- Basic Radios -->
+ <mat-radio-group name="group1">
+ <mat-radio-button class="pad-right-sm" name="group1">Option 1 </mat-radio-button>
+ <mat-radio-button class="pad-right-sm" name="group1">Option 2 </mat-radio-button>
+ <mat-radio-button class="pad-right-sm" name="group1" disabled="true">Option 3 (disabled) </mat-radio-button>
+ </mat-radio-group>
+ ]]>
+ </pre>
+ </div>
+ <div flex="48">
+ <!-- Dynamic Radios -->
+ <h3 class="mat-title">Dynamic Radios</h3>
+ <mat-radio-group name="more_options" [(ngModel)]="favoriteSeason">
+ <mat-radio-button class="fds-radio pad-right-sm" *ngFor="let season of seasonOptions" name="more_options" [value]="season">
+ {{season}}
+ </mat-radio-button>
+ </mat-radio-group>
+ <p>Your favorite season is: <strong>{{favoriteSeason}}</strong></p>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- Dynamic Radios -->
+ <mat-radio-group name="more_options" [(ngModel)]="favoriteSeason">
+ <mat-radio-button class="fds-radio" *ngFor="let season of seasonOptions" name="more_options" [value]="season">
+ { {season} }
+ </mat-radio-button>
+ </mat-radio-group>
+ <p>Your favorite season is: <strong>{ { favoriteSeason } }</strong></p>
+ ]]>
+ </pre>
+ <p>Javascript:</p>
+ <pre lang="javascript">
+ <![CDATA[
+
+ this.favoriteSeason = 'Autumn';
+
+ this.seasonOptions = [
+ 'Winter',
+ 'Spring',
+ 'Summer',
+ 'Autumn',
+ ];
+ ]]>
+ </pre>
+ </div>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Tooltips</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <button mat-raised-button color="fds-primary" matTooltip="I show above" matTooltipPosition="above" class="text-upper">Above Tooltip</button>
+ <button mat-raised-button color="fds-primary" matTooltip="I show after" matTooltipPosition="after" class="text-upper">After Tooltip</button>
+ <button mat-raised-button color="fds-primary" matTooltip="I show below" matTooltipPosition="below" class="text-upper">Below Tooltip</button>
+ <button mat-raised-button color="fds-primary" matTooltip="I show before" matTooltipPosition="before" class="text-upper">Before Tooltip</button>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <button mat-raised-button color="fds-primary" matTooltip="I show above" matTooltipPosition="above" class="text-upper">Bottom Tooltip</button>
+ <button mat-raised-button color="fds-primary" matTooltip="I show after" matTooltipPosition="after" class="text-upper">Bottom Tooltip</button>
+ <button mat-raised-button color="fds-primary" matTooltip="I show below" matTooltipPosition="below" class="text-upper">Bottom Tooltip</button>
+ <button mat-raised-button color="fds-primary" matTooltip="I show before" matTooltipPosition="before" class="text-upper">Bottom Tooltip</button>
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Panels</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <h3 class="mat-title">Standard Card</h3>
+ <mat-card>
+ <button class="fds-panel-menu-button" matTooltip="Standard Card Menu" mat-icon-button [matMenuTriggerFor]="standardCardMenu">
+ <i class="fa fa-ellipsis-v " aria-hidden="true"></i>
+ </button>
+ <mat-menu class="primary-icon-button-menu" #standardCardMenu="matMenu" [overlapTrigger]="false">
+ <button mat-menu-item>
+ <span>Option1</span>
+ </button>
+ <button mat-menu-item>
+ <span>Option2</span>
+ </button>
+ </mat-menu>
+ <mat-card-title class="pad-bottom-sm">
+ <span>Title</span>
+ </mat-card-title>
+ <mat-card-content>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
+ </mat-card-content>
+ <mat-card-actions fxLayout="row" fxLayoutAlign="end center">
+ <button mat-raised-button color="fds-primary" class="text-upper">Action</button>
+ </mat-card-actions>
+ </mat-card>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- Basic Card -->
+ <mat-card>
+ <button class="fds-panel-menu-button" matTooltip="Standard Card Menu" mat-icon-button [matMenuTriggerFor]="standardCardMenu">
+ <i class="fa fa-ellipsis-v " aria-hidden="true"></i>
+ </button>
+ <mat-menu class="primary-icon-button-menu" #standardCardMenu="matMenu" [overlapTrigger]="false">
+ <button mat-menu-item>
+ <span>Option1</span>
+ </button>
+ <button mat-menu-item>
+ <span>Option2</span>
+ </button>
+ </mat-menu>
+ <mat-card-title class="pad-bottom-sm">
+ <span>Title</span>
+ </mat-card-title>
+ <mat-card-content>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
+ </mat-card-content>
+ <mat-card-actions fxLayout="row" fxLayoutAlign="end center">
+ <button mat-raised-button color="fds-primary" class="text-upper">Action</button>
+ </mat-card-actions>
+ </mat-card>
+ ]]>
+ </pre>
+ <h3 class="mat-title">Tabbed Card</h3>
+ <mat-card>
+ <button class="fds-panel-menu-button" matTooltip="Standard Card Menu" mat-icon-button [matMenuTriggerFor]="standardCardMenu">
+ <i class="fa fa-ellipsis-v " aria-hidden="true"></i>
+ </button>
+ <mat-menu class="primary-icon-button-menu" #standardCardMenu="matMenu" [overlapTrigger]="false">
+ <button mat-menu-item>
+ <span>Option1</span>
+ </button>
+ <button mat-menu-item>
+ <span>Option2</span>
+ </button>
+ </mat-menu>
+ <mat-card-content>
+ <mat-tab-group dynamicHeight>
+ <mat-tab>
+ <ng-template mat-tab-label>One</ng-template>
+ <h3 class="mat-title">First tab content</h3>
+ <p>Plaid echo park knausgaard normcore franzen cronut. Pickled humblebrag tofu hoodie, umami salvia farm-to-table schlitz try-hard food truck knausgaard pabst. Yuccie portland jean shorts, authentic mixtape waistcoat gentrify blue bottle. Fixie kickstarter church-key small batch seitan, shabby chic vegan listicle before they sold out. Hammock raw denim flannel tousled seitan you probably haven't heard of them. Trust fund man bun pug, kickstarter artisan selvage letterpress cornhole tote bag butcher locavore. Affogato try-hard kickstarter seitan, DIY pickled hella godard pork belly four loko ugh.</p>
+ </mat-tab>
+ <mat-tab>
+ <ng-template mat-tab-label>Two</ng-template>
+ <h3 class="mat-title">Second tab content</h3>
+ <p>Hashtag distillery skateboard man bun gochujang, salvia man braid art party meggings heirloom kitsch farm-to-table. Franzen beard fingerstache gentrify, heirloom portland ennui XOXO microdosing kitsch plaid. Chicharrones bushwick chia, banh mi irony tattooed hammock butcher shabby chic taxidermy semiotics marfa post-ironic. Blue bottle keffiyeh farm-to-table ennui, chambray pitchfork art party pinterest artisan pop-up. Etsy banjo marfa, blue bottle kombucha crucifix XOXO tousled beard. Tilde disrupt kale chips bicycle rights skateboard master cleanse hella shoreditch, meditation retro shabby chic vice heirloom. Etsy listicle vice actually, iPhone chia hoodie four loko.</p>
+ </mat-tab>
+ </mat-tab-group>
+ </mat-card-content>
+ <mat-card-actions fxLayout="row" fxLayoutAlign="end center">
+ <button mat-raised-button color="fds-primary" class="text-upper">Action</button>
+ </mat-card-actions>
+ </mat-card>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- Basic Card -->
+ <mat-card>
+ <button class="fds-panel-menu-button" matTooltip="Standard Card Menu" mat-icon-button [matMenuTriggerFor]="standardCardMenu">
+ <i class="fa fa-ellipsis-v " aria-hidden="true"></i>
+ </button>
+ <mat-menu class="primary-icon-button-menu" #standardCardMenu="matMenu" [overlapTrigger]="false">
+ <button mat-menu-item>
+ <span>Option1</span>
+ </button>
+ <button mat-menu-item>
+ <span>Option2</span>
+ </button>
+ </mat-menu>
+ <mat-card-content>
+ <mat-tab-group dynamicHeight>
+ <mat-tab>
+ <ng-template mat-tab-label>One</ng-template>
+ <h3 class="mat-title">First tab content</h3>
+ <p>Plaid echo park knausgaard normcore franzen cronut. Pickled humblebrag tofu hoodie, umami salvia farm-to-table schlitz try-hard food truck knausgaard pabst. Yuccie portland jean shorts, authentic mixtape waistcoat gentrify blue bottle. Fixie kickstarter church-key small batch seitan, shabby chic vegan listicle before they sold out. Hammock raw denim flannel tousled seitan you probably haven't heard of them. Trust fund man bun pug, kickstarter artisan selvage letterpress cornhole tote bag butcher locavore. Affogato try-hard kickstarter seitan, DIY pickled hella godard pork belly four loko ugh.</p>
+ </mat-tab>
+ <mat-tab>
+ <ng-template mat-tab-label>Two</ng-template>
+ <h3 class="mat-title">Second tab content</h3>
+ <p>Hashtag distillery skateboard man bun gochujang, salvia man braid art party meggings heirloom kitsch farm-to-table. Franzen beard fingerstache gentrify, heirloom portland ennui XOXO microdosing kitsch plaid. Chicharrones bushwick chia, banh mi irony tattooed hammock butcher shabby chic taxidermy semiotics marfa post-ironic. Blue bottle keffiyeh farm-to-table ennui, chambray pitchfork art party pinterest artisan pop-up. Etsy banjo marfa, blue bottle kombucha crucifix XOXO tousled beard. Tilde disrupt kale chips bicycle rights skateboard master cleanse hella shoreditch, meditation retro shabby chic vice heirloom. Etsy listicle vice actually, iPhone chia hoodie four loko.</p>
+ </mat-tab>
+ </mat-tab-group>
+ </mat-card-content>
+ <mat-card-actions fxLayout="row" fxLayoutAlign="end center">
+ <button mat-raised-button color="fds-primary" class="text-upper">Action</button>
+ </mat-card-actions>
+ </mat-card>
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Select</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <form>
+ <div layout="row" layout-margin>
+ <mat-select color="accent" floatPlaceholder="never" placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
+ <mat-option *ngFor="let food of foods" [value]="food.value">
+ {{food.viewValue}}
+ </mat-option>
+ </mat-select>
+ </div>
+ <div layout="row" layout-margin>
+ <div flex> Selected food value: {{selectedValue}} </div>
+ </div>
+ </form>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <form>
+ <div layout="row" layout-margin>
+ <mat-select color="accent" floatPlaceholder="never" placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
+ <mat-option *ngFor="let food of foods" [value]="food.value">
+ { {food.viewValue} }
+ </mat-option>
+ </mat-select>
+ </div>
+ <div layout="row" layout-margin>
+ <div flex> Selected food value: { {selectedValue} } </div>
+ </div>
+ </form>
+ ]]>
+ </pre>
+ <p>Javascript:</p>
+ <pre lang="javascript">
+ <![CDATA[
+ this.selectedValue = '';
+
+ this.foods = [
+ { value: 'steak-0', viewValue: 'Steak' },
+ { value: 'pizza-1', viewValue: 'Pizza' },
+ { value: 'tacos-2', viewValue: 'Tacos' },
+ ];
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Menus (dropdowns)</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <button mat-icon-button [matMenuTriggerFor]="menu">
+ <mat-icon>more_vert</mat-icon>
+ </button>
+ <mat-menu #menu="matMenu">
+ <button mat-menu-item> Refresh </button>
+ <button mat-menu-item> Settings </button>
+ <button mat-menu-item> Help </button>
+ <button mat-menu-item disabled> Sign Out </button>
+ </mat-menu>
+ <button color="fds-regular" mat-raised-button [matMenuTriggerFor]="posXMenu">
+ Before<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ <mat-menu xPosition="before" #posXMenu="matMenu">
+ <button mat-menu-item> Refresh </button>
+ <button mat-menu-item> Settings </button>
+ <button mat-menu-item> Help </button>
+ <button mat-menu-item disabled> Sign Out </button>
+ </mat-menu>
+ <button color="fds-regular" mat-raised-button [matMenuTriggerFor]="aboveMenu">
+ Above<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ <mat-menu yPosition="above" #aboveMenu="matMenu">
+ <button mat-menu-item> Refresh </button>
+ <button mat-menu-item> Settings </button>
+ <button mat-menu-item> Help </button>
+ <button mat-menu-item disabled> Sign Out </button>
+ </mat-menu>
+ <button color="fds-regular" mat-raised-button [matMenuTriggerFor]="iconsMenu">
+ Icons in Menu<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ <mat-menu #iconsMenu="matMenu" [overlapTrigger]="false">
+ <button mat-menu-item>
+ <mat-icon>dialpad</mat-icon>
+ <span>Redial</span>
+ </button>
+ <button mat-menu-item disabled>
+ <mat-icon>voicemail</mat-icon>
+ <span>Check voicemail</span>
+ </button>
+ <button mat-menu-item>
+ <mat-icon>notifications_off</mat-icon>
+ <span>Disable alerts</span>
+ </button>
+ </mat-menu>
+ <button color="fds-primary" [matMenuTriggerFor]="primaryButtonDropdownMenu" mat-raised-button>
+ FDS Primary<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ <mat-menu class="fds-primary-dropdown-button-menu" #primaryButtonDropdownMenu="matMenu" [overlapTrigger]="false">
+ <button mat-menu-item>
+ <span>Option 1</span>
+ </button>
+ <button mat-menu-item disabled>
+ <span>Option 2</span>
+ </button>
+ </mat-menu>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <button mat-icon-button [matMenuTriggerFor]="menu">
+ <mat-icon>more_vert</mat-icon>
+ </button>
+ <mat-menu #menu="matMenu">
+ <button mat-menu-item> Refresh </button>
+ <button mat-menu-item> Settings </button>
+ <button mat-menu-item> Help </button>
+ <button mat-menu-item disabled> Sign Out </button>
+ </mat-menu>
+ <button color="fds-regular" mat-raised-button [matMenuTriggerFor]="posXMenu">
+ Before<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ <mat-menu xPosition="before" #posXMenu="matMenu">
+ <button mat-menu-item> Refresh </button>
+ <button mat-menu-item> Settings </button>
+ <button mat-menu-item> Help </button>
+ <button mat-menu-item disabled> Sign Out </button>
+ </mat-menu>
+ <button color="fds-regular" mat-raised-button [matMenuTriggerFor]="aboveMenu">
+ Above<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ <mat-menu yPosition="above" #aboveMenu="matMenu">
+ <button mat-menu-item> Refresh </button>
+ <button mat-menu-item> Settings </button>
+ <button mat-menu-item> Help </button>
+ <button mat-menu-item disabled> Sign Out </button>
+ </mat-menu>
+ <button color="fds-regular" mat-raised-button [matMenuTriggerFor]="iconsMenu">
+ Icons in Menu<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ <mat-menu #iconsMenu="matMenu" [overlapTrigger]="false">
+ <button mat-menu-item>
+ <mat-icon>dialpad</mat-icon>
+ <span>Redial</span>
+ </button>
+ <button mat-menu-item disabled>
+ <mat-icon>voicemail</mat-icon>
+ <span>Check voicemail</span>
+ </button>
+ <button mat-menu-item>
+ <mat-icon>notifications_off</mat-icon>
+ <span>Disable alerts</span>
+ </button>
+ </mat-menu>
+ <button color="fds-primary" [matMenuTriggerFor]="primaryButtonDropdownMenu" mat-raised-button>
+ FDS Primary<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ <mat-menu class="fds-primary-dropdown-button-menu" #primaryButtonDropdownMenu="matMenu" [overlapTrigger]="false">
+ <button mat-menu-item>
+ <span>Option 1</span>
+ </button>
+ <button mat-menu-item disabled>
+ <span>Option 2</span>
+ </button>
+ </mat-menu>
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Dialog</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <button mat-raised-button color="fds-primary" (click)="openDialog()">Show simple dialog</button>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <button mat-raised-button color="fds-primary" (click)="openDialog()">Show simple dialog</button>
+ ]]>
+ </pre>
+ <p>Javascript:</p>
+ <pre lang="javascript">
+ <![CDATA[
+ var ngCore = require('@angular/core');
+ function DialogComponent() {};
+
+ DialogComponent.prototype = {
+ constructor: DialogComponent
+ };
+
+ DialogComponent.annotations = [
+ new ngCore.Component({
+ template: 'Hello Dialog'
+ })];
+
+ ...
+
+ constructor(MatDialog) {
+ this.dialog = MatDialog;
+ }
+
+ ...
+
+ openDialog: function() {
+ this.dialog.open(DialogComponent, {
+ height: '50%', // can be px or %
+ width: '60%', // can be px or %
+ });
+ }
+
+ ...
+
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Simple Dialogs</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <div class="pad-left-sm">
+ <button mat-raised-button color="fds-primary" (click)="openConfirm()" class="text-upper">Open Confirm</button>
+ </div>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <button mat-button color="primary" (click)="openConfirm()" class="text-upper">Open Confirm</button>
+ ]]>
+ </pre>
+ <p>Javascript:</p>
+ <pre lang="javascript">
+ <![CDATA[
+ ...
+
+ constructor(TdDialogService) {
+ this.dialogService = TdDialogService
+ }
+
+ ...
+
+ openConfirm: function() {
+ this.dialogService.openConfirm({
+ title: 'Confirm',
+ message: 'This is how simple it is to create a confirm with this wrapper service. Do you agree?',
+ cancelButton: 'Disagree',
+ acceptButton: 'Agree',
+ });
+ },
+
+ ...
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Snack Bars</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <button mat-raised-button color="fds-primary" (click)="showSuccessSnackBar()">Success Snack Bar</button>
+ <button mat-raised-button color="fds-primary" (click)="showWarnSnackBar()">Warning Snack Bar</button>
+ <button mat-raised-button color="fds-primary" (click)="showErrorSnackBar()">Error Snack Bar</button>
+ <button mat-raised-button color="fds-primary" (click)="showRegularSnackBar()">Regular Snack Bar</button>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <button mat-raised-button color="fds-primary" (click)="showSuccessSnackBar()">Success Snack Bar</button>
+ <button mat-raised-button color="fds-primary" (click)="showWarnSnackBar()">Warning Snack Bar</button>
+ <button mat-raised-button color="fds-primary" (click)="showErrorSnackBar()">Error Snack Bar</button>
+ <button mat-raised-button color="fds-primary" (click)="showRegularSnackBar()">Regular Snack Bar</button>
+ ]]>
+ </pre>
+ <p>Javascript:</p>
+ <pre lang="javascript">
+ <![CDATA[
+ ...
+
+ constructor(FdsSnackBarService) {
+ this.snackBarService = FdsSnackBarService;
+ },
+
+ ...
+
+ /** Possible values for horizontalPosition on MatSnackBarConfig are 'start' | 'center' | 'end' | 'left' | 'right'. */
+ /** Possible values for verticalPosition on MatSnackBarConfig are 'top' | 'bottom'. */
+ /** Possible values for icon on MatSnackBarConfig are any available icons loaded on the page. */
+
+ showSuccessSnackBar: function () {
+ var snackBarRef = this.snackBarService.openCoaster({
+ title: 'Success',
+ message: 'Some help text regarding the successful event.',
+ verticalPosition: 'top',
+ horizontalPosition: 'right',
+ icon: 'fa fa-check-circle-o',
+ color: '#1EB475',
+ duration: 3000
+ });
+ },
+
+ showWarnSnackBar: function () {
+ var snackBarRef = this.snackBarService.openCoaster({
+ title: 'Warning',
+ message: 'Some help text regarding the warning.',
+ verticalPosition: 'top',
+ horizontalPosition: 'left',
+ icon: 'fa fa-exclamation-triangle',
+ color: '#E98A40',
+ duration: 3000
+ });
+ },
+
+ showErrorSnackBar: function () {
+ var snackBarRef = this.snackBarService.openCoaster({
+ title: 'Error',
+ message: 'Some help text regarding the critical error. This coaster will stay open until closed with the `x` or if another coaster is created.',
+ verticalPosition: 'bottom',
+ horizontalPosition: 'right',
+ icon: 'fa fa-times-circle-o',
+ color: '#EF6162'
+ });
+ },
+
+ showRegularSnackBar: function () {
+ var snackBarRef = this.snackBarService.openCoaster({
+ title: 'Regular',
+ message: 'Something interesting.',
+ verticalPosition: 'bottom',
+ horizontalPosition: 'left',
+ color: '#808793',
+ duration: 3000
+ });
+ },
+
+ ...
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Expansion Panels</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <p>Expand/Collapse Event for Expansion 1: {{expandCollapseExpansion1Msg}}</p>
+ <div>
+ <button mat-button color="primary" (click)="toggleDisabled()" class="text-upper">Toggle disable</button>
+ <button mat-button color="primary" (click)="toggleExpansion1()" class="text-upper">Toggle first</button>
+ </div>
+ <div layout-gt-xs="row" layout-align-gt-xs="center start">
+ <div flex-gt-xs="90">
+ <td-expansion-panel label="Google" sublabel="1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA" [expand]="expansion1" [disabled]="disabled" (expanded)="expandExpansion1Event()" (collapsed)="collapseExpansion1Event()">
+ <td-expansion-summary>
+ <mat-list>
+ <mat-list-item>
+ <mat-icon mat-list-avatar>pin_drop</mat-icon>
+ <h3 mat-line>Google</h3>
+ <h4 mat-line>Headquarters</h4>
+ <p mat-line>
+ 1600 Amphitheatre Pkwy
+ <br/>Mountain View, CA 94043, USA
+ </p>
+ </mat-list-item>
+ </mat-list>
+ </td-expansion-summary>
+ <div class="mat-padding">
+ <form class="mat-padding" layout="column">
+ <mat-input-container flex>
+ <input matInput placeholder="Company (disabled)" disabled value="Google" />
+ </mat-input-container>
+ <mat-input-container flex>
+ <textarea matInput placeholder="Description" rows="4"></textarea>
+ </mat-input-container>
+ </form>
+ <div layout="row" layout-margin layout-align="end center">
+ <button mat-button class="text-upper">Cancel</button>
+ <button mat-button color="accent" class="text-upper">Save</button>
+ </div>
+ </div>
+ </td-expansion-panel>
+ </div>
+ </div>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <td-expansion-panel label="Google" sublabel="1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA" [expand]="expansion1" [disabled]="disabled" (expanded)="expandExpansion1Event()" (collapsed)="collapseExpansion1Event()">
+ <td-expansion-summary>
+ <mat-list>
+ <mat-list-item>
+ <mat-icon mat-list-avatar>pin_drop</mat-icon>
+ <h3 mat-line>Google</h3>
+ <h4 mat-line>Headquarters</h4>
+ <p mat-line>
+ 1600 Amphitheatre Pkwy
+ <br/>Mountain View, CA 94043, USA
+ </p>
+ </mat-list-item>
+ </mat-list>
+ </td-expansion-summary>
+ <div class="mat-padding">
+ <form class="mat-padding" layout="column">
+ <mat-input-container flex>
+ <input matInput placeholder="Company (disabled)" disabled value="Google" />
+ </mat-input-container>
+ <mat-input-container flex>
+ <textarea matInput placeholder="Description" rows="4"></textarea>
+ </mat-input-container>
+ </form>
+ <mat-divider></mat-divider>
+ <div layout="row" layout-margin layout-align="end center">
+ <button mat-button class="text-upper">Cancel</button>
+ <button mat-button color="accent" class="text-upper">Save</button>
+ </div>
+ </div>
+ </td-expansion-panel>
+ ]]>
+ </pre>
+ <p>Javascript:</p>
+ <pre lang="javascript">
+ <![CDATA[
+ this.expandCollapseExpansion1Msg = 'No expanded/collapsed detected yet';
+ this.expansion1 = false;
+ this.disabled = false;
+
+ ...
+
+ toggleExpansion1: function() {
+ if (!this.disabled) {
+ this.expansion1 = !this.expansion1;
+ }
+ },
+
+ toggleDisabled: function() {
+ this.disabled = !this.disabled;
+ },
+
+ expandExpansion1Event: function() {
+ this.expandCollapseExpansion1Msg = 'Expand event emitted.';
+ },
+
+ collapseExpansion1Event: function() {
+ this.expandCollapseExpansion1Msg = 'Collapse event emitted.';
+ },
+
+ ...
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Progress</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content layout="row">
+ <div flex="48" class="pad-right">
+ <h3 class="mat-title">Progress Bars</h3>
+ <h4>Determinate</h4>
+ <mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
+ <h4>Indeterminate</h4>
+ <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+ <h4>Buffer</h4>
+ <mat-progress-bar mode="buffer" value="15" bufferValue="15"></mat-progress-bar>
+ <h4>Query</h4>
+ <mat-progress-bar mode="query"></mat-progress-bar>
+ <h4>Colors</h4>
+ <mat-progress-bar mode="indeterminate" color="primary"></mat-progress-bar>
+ <mat-progress-bar mode="indeterminate" color="accent"></mat-progress-bar>
+ <mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- Determinate-->
+ <mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
+
+ <!-- Indeterminate-->
+ <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+
+ <!-- Buffer-->
+ <mat-progress-bar mode="buffer" value="15" bufferValue="15"></mat-progress-bar>
+
+ <!-- Query-->
+ <mat-progress-bar mode="query"></mat-progress-bar>
+
+ <!-- Colors-->
+ <mat-progress-bar mode="indeterminate" color="primary"></mat-progress-bar>
+
+ <mat-progress-bar mode="indeterminate" color="accent"></mat-progress-bar>
+
+ <mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar>
+ ]]>
+ </pre>
+ </div>
+ <div flex="48">
+ <!-- Progress circles-->
+ <h3 class="mat-title">Progress Spinner</h3>
+ <div layout="row">
+ <div>
+ <h4>Determinate</h4>
+ <mat-progress-spinner mode="determinate" value="66"></mat-progress-spinner>
+ </div>
+ <div>
+ <h4>indeterminate</h4>
+ <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
+ </div>
+ <div>
+ <h4>Spinner</h4>
+ <mat-spinner></mat-spinner>
+ </div>
+ </div>
+ <div>
+ <h4>Colors</h4>
+ <div layout="row">
+ <mat-progress-spinner mode="indeterminate" color="primary"></mat-progress-spinner>
+ <mat-progress-spinner mode="indeterminate" color="accent"></mat-progress-spinner>
+ <mat-progress-spinner mode="indeterminate" color="warn"></mat-progress-spinner>
+ </div>
+ </div>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- Determinate -->
+ <mat-progress-spinner mode="determinate" value="66"></mat-progress-spinner>
+ <!-- Indeterminate -->
+ <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
+ <!-- Spinner -->
+ <mat-spinner></mat-spinner>
+ <!-- Colors -->
+ <mat-progress-spinner mode="indeterminate" color="primary"></mat-progress-spinner>
+ <mat-progress-spinner mode="indeterminate" color="accent"></mat-progress-spinner>
+ <mat-progress-spinner mode="indeterminate" color="warn"></mat-progress-spinner>
+ ]]>
+ </pre>
+ </div>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Side Nav</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <p>The side nav can be opened at the `start` or `end` of a container and can be displayed in `over`, `side`, or `push` mode. You can also define its width.</p>
+ <button matTooltip="Open side nav" mat-raised-button color="fds-primary" (click)="sidenav.toggle()">
+ Open
+ </button>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- Basic Usage -->
+ <mat-sidenav #sidenav mode="over" align="end" opened="false">
+ ...
+ </mat-sidenav>
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Slide Toggle</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <h3 class="mat-title">Basic Usage</h3>
+ <mat-divider></mat-divider>
+ <mat-list>
+ <mat-list-item *ngFor="let system of systems">
+ <mat-slide-toggle [color]="system.color" [(ngModel)]="system.on">
+ {{system.name}}
+ </mat-slide-toggle>
+ </mat-list-item>
+ </mat-list>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- Basic Usage -->
+ <mat-list>
+ <mat-list-item *ngFor="let system of systems">
+ <mat-slide-toggle [color]="system.color" [(ngModel)]="system.on">
+ { {system.name} }
+ </mat-slide-toggle>
+ </mat-list-item>
+ </mat-list>
+ ]]>
+ </pre>
+ <p>Javascript:</p>
+ <pre lang="javascript">
+ <![CDATA[
+ this.systems = [{
+ name: 'Lights',
+ on: false,
+ color: 'primary',
+ }, {
+ name: 'Surround Sound',
+ on: true,
+ color: 'accent',
+ }, {
+ name: 'T.V.',
+ on: true,
+ color: 'warn',
+ }, ];
+ ]]>
+ </pre>
+ <h3 class="mat-title">Usage within Forms</h3>
+ <form>
+ <mat-list>
+ <mat-list-item>
+ <mat-slide-toggle color="accent" [(ngModel)]="house.lockHouse" name="lockHouse">
+ Lock?
+ </mat-slide-toggle>
+ <mat-icon *ngIf="house.lockHouse" class="pad-right-sm">lock</mat-icon>
+ </mat-list-item>
+ <mat-list-item>
+ <mat-slide-toggle disabled>
+ I am disabled.
+ </mat-slide-toggle>
+ </mat-list-item>
+ </mat-list>
+ </form>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <!-- Usage within Forms -->
+ <form>
+ <mat-list>
+ <mat-list-item>
+ <mat-slide-toggle color="accent" [(ngModel)]="house.lockHouse" name="lockHouse">
+ Lock?
+ </mat-slide-toggle>
+ <mat-icon *ngIf="house.lockHouse" class="pad-right-sm">lock</mat-icon>
+ </mat-list-item>
+ <mat-list-item>
+ <mat-slide-toggle disabled>
+ I am disabled.
+ </mat-slide-toggle>
+ </mat-list-item>
+ </mat-list>
+ </form>
+ ]]>
+ </pre>
+ <p>Javascript:</p>
+ <pre lang="javascript">
+ <![CDATA[
+ this.house = {
+ lockHouse: false,
+ };
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
+ <mat-card-title class="pad-bottom-sm">Slider</mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <h3 class="mat-title">Horizontal Slider</h3>
+ <mat-slider min="1" max="5" thumbLabel tickInterval="1" value="2" color="primary"></mat-slider>
+ <mat-slider step="5" thumbLabel tickInterval="5" value="20" color="accent"></mat-slider>
+ <mat-slider thumbLabel tick-interval="auto" value="2" color="warn"></mat-slider>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <mat-slider min="1" max="5" thumbLabel tickInterval="1" value="2" color="primary"></mat-slider>
+ <mat-slider step="5" thumbLabel tickInterval="5" value="20" color="accent"></mat-slider>
+ <mat-slider thumbLabel tick-interval="auto" value="2" color="warn"></mat-slider>
+ ]]>
+ </pre>
+ <h3 class="mat-title">Vertical Slider</h3>
+ <mat-slider vertical min="1" max="100" thumbLabel tickInterval="10" value="2"></mat-slider>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <mat-slider vertical min="1" max="100" thumbLabel tickInterval="10" value="2"></mat-slider>
+ ]]>
+ </pre>
+ <h3 class="mat-title">Inverted Slider</h3>
+ <mat-slider invert min="1" max="100" thumbLabel tickInterval="10" value="2"></mat-slider>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <mat-slider invert min="1" max="100" thumbLabel tickInterval="10" value="2"></mat-slider>
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ </div>
+</mat-sidenav-container>
diff --git a/src/demo-app/components/fluid-design-system/fds-demo.js b/src/demo-app/components/fluid-design-system/fds-demo.js
new file mode 100644
index 0000000..dcb3d14
--- /dev/null
+++ b/src/demo-app/components/fluid-design-system/fds-demo.js
@@ -0,0 +1,1066 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var ngCore = require('@angular/core');
+var covalentCore = require('@covalent/core');
+var ngRouter = require('@angular/router');
+var ngMaterial = require('@angular/material');
+var fdsAnimations = require('demo-app/fds.animations.js');
+var fdsDialogsModule = require('@fluid-design-system/dialogs');
+var fdsSnackBarsModule = require('@fluid-design-system/snackbars');
+var FdsService = require('demo-app/services/fds.service.js');
+var FdsDemoDialog = require('demo-app/components/fluid-design-system/dialogs/demo/fds-demo-dialog.js');
+
+var NUMBER_FORMAT = function (v) {
+ return v;
+};
+var DECIMAL_FORMAT = function (v) {
+ return v.toFixed(2);
+};
+var date = new Date();
+
+/**
+ * FdsDemo constructor.
+ *
+ * @param FdsSnackBarService The FDS snack bar service module.
+ * @param FdsService The FDS service module.
+ * @param dialog The angular material dialog module.
+ * @param TdDialogService The covalent dialog service module.
+ * @param TdDataTableService The covalent data table service module.
+ * @constructor
+ */
+function FdsDemo(FdsSnackBarService, FdsService, dialog, TdDataTableService, FdsDialogService) {
+
+ this.fdsService = FdsService;
+
+ //<editor-fold desc="Snack Bars">
+
+ this.snackBarService = FdsSnackBarService;
+
+ //</editor-fold>
+
+ //<editor-fold desc="Dialog">
+
+ this.dialog = dialog;
+
+ //</editor-fold>
+
+ //<editor-fold desc="Simple Dialogs">
+
+ this.dialogService = FdsDialogService;
+
+ //</editor-fold>
+
+ //<editor-fold desc="Expansion Panel">
+
+ this.expandCollapseExpansion1Msg = 'No expanded/collapsed detected yet';
+ this.expansion1 = false;
+ this.disabled = false;
+
+ //</editor-fold>
+
+ //<editor-fold desc="Autocomplete">
+
+ this.currentState = '';
+ this.reactiveStates = '';
+ this.tdStates = [];
+ this.tdDisabled = false;
+ this.states = [
+ {code: 'AL', name: 'Alabama'},
+ {code: 'AK', name: 'Alaska'},
+ {code: 'AZ', name: 'Arizona'},
+ {code: 'AR', name: 'Arkansas'},
+ {code: 'CA', name: 'California'},
+ {code: 'CO', name: 'Colorado'},
+ {code: 'CT', name: 'Connecticut'},
+ {code: 'DE', name: 'Delaware'},
+ {code: 'FL', name: 'Florida'},
+ {code: 'GA', name: 'Georgia'},
+ {code: 'HI', name: 'Hawaii'},
+ {code: 'ID', name: 'Idaho'},
+ {code: 'IL', name: 'Illinois'},
+ {code: 'IN', name: 'Indiana'},
+ {code: 'IA', name: 'Iowa'},
+ {code: 'KS', name: 'Kansas'},
+ {code: 'KY', name: 'Kentucky'},
+ {code: 'LA', name: 'Louisiana'},
+ {code: 'ME', name: 'Maine'},
+ {code: 'MD', name: 'Maryland'},
+ {code: 'MA', name: 'Massachusetts'},
+ {code: 'MI', name: 'Michigan'},
+ {code: 'MN', name: 'Minnesota'},
+ {code: 'MS', name: 'Mississippi'},
+ {code: 'MO', name: 'Missouri'},
+ {code: 'MT', name: 'Montana'},
+ {code: 'NE', name: 'Nebraska'},
+ {code: 'NV', name: 'Nevada'},
+ {code: 'NH', name: 'New Hampshire'},
+ {code: 'NJ', name: 'New Jersey'},
+ {code: 'NM', name: 'New Mexico'},
+ {code: 'NY', name: 'New York'},
+ {code: 'NC', name: 'North Carolina'},
+ {code: 'ND', name: 'North Dakota'},
+ {code: 'OH', name: 'Ohio'},
+ {code: 'OK', name: 'Oklahoma'},
+ {code: 'OR', name: 'Oregon'},
+ {code: 'PA', name: 'Pennsylvania'},
+ {code: 'RI', name: 'Rhode Island'},
+ {code: 'SC', name: 'South Carolina'},
+ {code: 'SD', name: 'South Dakota'},
+ {code: 'TN', name: 'Tennessee'},
+ {code: 'TX', name: 'Texas'},
+ {code: 'UT', name: 'Utah'},
+ {code: 'VT', name: 'Vermont'},
+ {code: 'VA', name: 'Virginia'},
+ {code: 'WA', name: 'Washington'},
+ {code: 'WV', name: 'West Virginia'},
+ {code: 'WI', name: 'Wisconsin'},
+ {code: 'WY', name: 'Wyoming'},
+ ];
+
+ //</editor-fold>
+
+ //<editor-fold desc="Searchable Expansion Panels">
+
+ this.dataTableService = TdDataTableService;
+
+ this.droplets = [{
+ id: '23f6cc59-0156-1000-09b4-2b0610089090',
+ name: "Decompression_Circular_Flow",
+ displayName: 'Decompressed Circular flow',
+ type: 'flow',
+ sublabel: 'A sublabel',
+ compliant: {
+ id: '25fd6vv87-3549-0001-05g6-4d4567890765',
+ label: 'Compliant',
+ type: 'certification'
+ },
+ fleet: {
+ id: '23f6cc59-3549-0001-05g6-4d4567890765',
+ label: 'Fleet',
+ type: 'certification'
+ },
+ prod: {
+ id: '52fd6vv87-3549-0001-05g6-4d4567890765',
+ label: 'Production Ready',
+ type: 'certification'
+ },
+ secure: {
+ id: '32f6cc59-3549-0001-05g6-4d4567890765',
+ label: 'Secure',
+ type: 'certification'
+ },
+ versions: [{
+ id: '23f6cc59-0156-1000-06b4-2b0810089090',
+ revision: '1',
+ dependentFlows: [{
+ id: '25fd6vv87-3549-0001-05g6-4d4567890765'
+ }],
+ created: date.setDate(date.getDate() - 1),
+ updated: new Date()
+ }, {
+ id: '25fd6vv87-3549-0001-05g6-4d4567890765',
+ revision: '2',
+ dependentFlows: [{
+ id: '23f6cc59-0156-1000-06b4-2b0810089090'
+ }],
+ created: new Date(),
+ updated: new Date()
+ }],
+ flows: [],
+ extensions: [],
+ assets: [],
+ actions: [{
+ 'name': 'Delete',
+ 'icon': 'fa fa-close',
+ 'tooltip': 'Delete User'
+ }, {
+ 'name': 'Manage',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage User'
+ }, {
+ 'name': 'Action 3',
+ 'icon': 'fa fa-question',
+ 'tooltip': 'Whatever else we want to do...'
+ }]
+ }, {
+ id: '25fd6vv87-3249-0001-05g6-4d4767890765',
+ name: "DateConversion",
+ displayName: 'Date conversion',
+ type: 'asset',
+ sublabel: 'A sublabel',
+ compliant: {
+ id: '25fd6vv34-3549-0001-05g6-4d4567890765',
+ label: 'Compliant',
+ type: 'certification'
+ },
+ prod: {
+ id: '52vn6vv87-3549-0001-05g6-4d4567890765',
+ label: 'Production Ready',
+ type: 'certification'
+ },
+ versions: [{
+ id: '23f6ic59-0156-1000-06b4-2b0810089090',
+ revision: '1',
+ dependentFlows: [{
+ id: '23f6cc19-0156-1000-06b4-2b0810089090'
+ }],
+ created: new Date(),
+ updated: new Date()
+ }],
+ flows: [],
+ extensions: [],
+ assets: [],
+ actions: [{
+ 'name': 'Delete',
+ 'icon': 'fa fa-close',
+ 'tooltip': 'Delete User'
+ }]
+ }, {
+ id: '52fd6vv87-3294-0001-05g6-4d4767890765',
+ name: "nifi-email-bundle",
+ displayName: 'nifi-email-bundle',
+ type: 'extension',
+ sublabel: 'A sublabel',
+ compliant: {
+ id: '33fd6vv87-3549-0001-05g6-4d4567890765',
+ label: 'Compliant',
+ test: {
+ label: 'test'
+ },
+ type: 'certification'
+ },
+ versions: [{
+ id: '23d3cc59-0156-1000-06b4-2b0810089090',
+ revision: '1',
+ dependentFlows: [{
+ id: '23f6cc89-0156-1000-06b4-2b0810089090'
+ }],
+ created: new Date(),
+ updated: new Date()
+ }],
+ flows: [],
+ extensions: [],
+ assets: [],
+ actions: [{
+ 'name': 'Delete',
+ 'icon': 'fa fa-close',
+ 'tooltip': 'Delete User'
+ }, {
+ 'name': 'Manage',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage User'
+ },]
+ }];
+
+ this.filteredDroplets = [];
+
+ this.dropletColumns = [
+ {name: 'id', label: 'ID', sortable: true},
+ {name: 'name', label: 'Name', sortable: true,},
+ {name: 'displayName', label: 'Display Name', sortable: true},
+ {name: 'sublabel', label: 'Label', sortable: true},
+ {name: 'type', label: 'Type', sortable: true}
+ ];
+ this.activeDropletColumn = this.dropletColumns[0];
+
+ this.autoCompleteDroplets = [];
+ this.dropletsSearchTerms = [];
+
+ //</editor-fold>
+
+ //<editor-fold desc="Data Tables">
+
+ this.data = [{
+ 'id': 1,
+ 'name': 'Frozen yogurt',
+ 'type': 'Ice cream',
+ 'calories': 159.0,
+ 'fat': 6.0,
+ 'carbs': 24.0,
+ 'protein': 4.0,
+ 'sodium': 87.0,
+ 'calcium': 14.0,
+ 'iron': 1.0,
+ 'comments': 'I love froyo!',
+ 'actions': [{
+ 'name': 'Action 1',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage Users'
+ }, {
+ 'name': 'Action 2',
+ 'icon': 'fa fa-key',
+ 'tooltip': 'Manage Permissions'
+ }]
+ }, {
+ 'id': 2,
+ 'name': 'Ice cream sandwich',
+ 'type': 'Ice cream',
+ 'calories': 237.0,
+ 'fat': 9.0,
+ 'carbs': 37.0,
+ 'protein': 4.3,
+ 'sodium': 129.0,
+ 'calcium': 8.0,
+ 'iron': 1.0,
+ 'actions': [{
+ 'name': 'Action 1',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage Users'
+ }, {
+ 'name': 'Action 2',
+ 'icon': 'fa fa-key',
+ 'tooltip': 'Manage Permissions'
+ }, {
+ 'name': 'Action 3',
+ 'tooltip': 'Action 3'
+ }, {
+ 'name': 'Action 4',
+ 'disabled': true,
+ 'tooltip': 'Action 4'
+ }, {
+ 'name': 'Action 5',
+ 'tooltip': 'Action 5'
+ }]
+ }, {
+ 'id': 3,
+ 'name': 'Eclair',
+ 'type': 'Pastry',
+ 'calories': 262.0,
+ 'fat': 16.0,
+ 'carbs': 24.0,
+ 'protein': 6.0,
+ 'sodium': 337.0,
+ 'calcium': 6.0,
+ 'iron': 7.0,
+ 'actions': [{
+ 'name': 'Action 1',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage Users'
+ }, {
+ 'name': 'Action 2',
+ 'icon': 'fa fa-key',
+ 'tooltip': 'Manage Permissions'
+ }, {
+ 'name': 'Action 3',
+ 'tooltip': 'Action 3'
+ }, {
+ 'name': 'Action 4',
+ 'disabled': true,
+ 'tooltip': 'Action 4'
+ }, {
+ 'name': 'Action 5',
+ 'tooltip': 'Action 5'
+ }],
+ }, {
+ 'id': 4,
+ 'name': 'Cupcake',
+ 'type': 'Pastry',
+ 'calories': 305.0,
+ 'fat': 3.7,
+ 'carbs': 67.0,
+ 'protein': 4.3,
+ 'sodium': 413.0,
+ 'calcium': 3.0,
+ 'iron': 8.0,
+ 'actions': [{
+ 'name': 'Action 1',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage Users'
+ }, {
+ 'name': 'Action 2',
+ 'icon': 'fa fa-key',
+ 'tooltip': 'Manage Permissions'
+ }, {
+ 'name': 'Action 3',
+ 'tooltip': 'Action 3'
+ }, {
+ 'name': 'Action 4',
+ 'disabled': true,
+ 'tooltip': 'Action 4'
+ }, {
+ 'name': 'Action 5',
+ 'tooltip': 'Action 5'
+ }],
+ }, {
+ 'id': 5,
+ 'name': 'Jelly bean',
+ 'type': 'Candy',
+ 'calories': 375.0,
+ 'fat': 0.0,
+ 'carbs': 94.0,
+ 'protein': 0.0,
+ 'sodium': 50.0,
+ 'calcium': 0.0,
+ 'iron': 0.0,
+ }, {
+ 'id': 6,
+ 'name': 'Lollipop',
+ 'type': 'Candy',
+ 'calories': 392.0,
+ 'fat': 0.2,
+ 'carbs': 98.0,
+ 'protein': 0.0,
+ 'sodium': 38.0,
+ 'calcium': 0.0,
+ 'iron': 2.0,
+ }, {
+ 'id': 7,
+ 'name': 'Honeycomb',
+ 'type': 'Other',
+ 'calories': 408.0,
+ 'fat': 3.2,
+ 'carbs': 87.0,
+ 'protein': 6.5,
+ 'sodium': 562.0,
+ 'calcium': 0.0,
+ 'iron': 45.0,
+ }, {
+ 'id': 8,
+ 'name': 'Donut',
+ 'type': 'Pastry',
+ 'calories': 452.0,
+ 'fat': 25.0,
+ 'carbs': 51.0,
+ 'protein': 4.9,
+ 'sodium': 326.0,
+ 'calcium': 2.0,
+ 'iron': 22.0,
+ }, {
+ 'id': 9,
+ 'name': 'KitKat',
+ 'type': 'Candy',
+ 'calories': 518.0,
+ 'fat': 26.0,
+ 'carbs': 65.0,
+ 'protein': 7.0,
+ 'sodium': 54.0,
+ 'calcium': 12.0,
+ 'iron': 6.0,
+ }, {
+ 'id': 10,
+ 'name': 'Chocolate',
+ 'type': 'Candy',
+ 'calories': 518.0,
+ 'fat': 26.0,
+ 'carbs': 65.0,
+ 'protein': 7.0,
+ 'sodium': 54.0,
+ 'calcium': 12.0,
+ 'iron': 6.0,
+ }, {
+ 'id': 11,
+ 'name': 'Chamoy',
+ 'type': 'Candy',
+ 'calories': 518.0,
+ 'fat': 26.0,
+ 'carbs': 65.0,
+ 'protein': 7.0,
+ 'sodium': 54.0,
+ 'calcium': 12.0,
+ 'iron': 6.0,
+ },];
+
+ this.filteredData = this.data;
+ this.filteredTotal = this.data.length;
+
+ this.columns = [
+ {name: 'comments', label: 'Comments', width: 10},
+ {name: 'name', label: 'Dessert (100g serving)', sortable: true, width: 10},
+ {name: 'type', label: 'Type', sortable: true, width: 10},
+ {name: 'calories', label: 'Calories', numeric: true, format: NUMBER_FORMAT, sortable: true, width: 10},
+ {name: 'fat', label: 'Fat (g)', numeric: true, format: DECIMAL_FORMAT, sortable: true, width: 10},
+ {name: 'carbs', label: 'Carbs (g)', numeric: true, format: NUMBER_FORMAT, sortable: true, width: 10},
+ {name: 'protein', label: 'Protein (g)', numeric: true, format: DECIMAL_FORMAT, sortable: true, width: 10},
+ {name: 'sodium', label: 'Sodium (mg)', numeric: true, format: NUMBER_FORMAT, sortable: true, width: 10},
+ {name: 'calcium', label: 'Calcium (%)', numeric: true, format: NUMBER_FORMAT, sortable: true, width: 10},
+ {name: 'iron', label: 'Iron (%)', numeric: true, format: NUMBER_FORMAT, width: 10},
+ ];
+
+ this.allRowsSelected = false;
+ this.autoCompleteData = [];
+ this.selectedRows = [];
+
+ this.searchTerm = [];
+ this.fromRow = 1;
+ this.currentPage = 1;
+ this.pageSize = 5;
+ this.pageCount = 0;
+
+ //</editor-fold>
+
+ //<editor-fold desc="Chips $ Autocomplete">
+
+ this.readOnly = false;
+
+ this.items = [
+ 'stepper',
+ 'expansion-panel',
+ 'markdown',
+ 'highlight',
+ 'loading',
+ 'media',
+ 'chips',
+ 'http',
+ 'json-formatter',
+ 'pipes',
+ 'need more?',
+ ];
+
+ this.itemsRequireMatch = this.items.slice(0, 6);
+
+ //</editor-fold>
+
+ //<editor-fold desc="Radios">
+
+ this.favoriteSeason = 'Autumn';
+
+ this.seasonOptions = [
+ 'Winter',
+ 'Spring',
+ 'Summer',
+ 'Autumn',
+ ];
+
+ //</editor-fold>
+
+ //<editor-fold desc="Select">
+
+ this.selectedValue = '';
+
+ this.foods = [
+ {value: 'steak-0', viewValue: 'Steak'},
+ {value: 'pizza-1', viewValue: 'Pizza'},
+ {value: 'tacos-2', viewValue: 'Tacos'},
+ ];
+
+ //</editor-fold>
+
+ //<editor-fold desc="Checkbox">
+
+ this.user = {
+ agreesToTOS: false
+ };
+
+ this.groceries = [{
+ bought: true,
+ name: 'Seitan',
+ }, {
+ bought: false,
+ name: 'Almond Meal Flour',
+ }, {
+ bought: false,
+ name: 'Organic Eggs',
+ },];
+
+ //</editor-fold>
+
+ //<editor-fold desc="Slide Toggle">
+
+ this.systems = [{
+ name: 'Lights',
+ on: false,
+ color: 'primary',
+ }, {
+ name: 'Surround Sound',
+ on: true,
+ color: 'accent',
+ }, {
+ name: 'T.V.',
+ on: true,
+ color: 'warn',
+ },];
+
+ this.house = {
+ lockHouse: false,
+ };
+
+ //</editor-fold>
+};
+
+FdsDemo.prototype = {
+ constructor: FdsDemo,
+
+ //<editor-fold desc="Autocomplete">
+
+ displayFn: function (value) {
+ return value && typeof value === 'object' ? value.name : value;
+ },
+
+ filterStates: function (val) {
+ return val ? this.states.filter(function (s) {
+ return s.name.match(new RegExp(val, 'gi'));
+ }) : this.states;
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Snack Bars">
+
+ showSuccessSnackBar: function () {
+ var snackBarRef = this.snackBarService.openCoaster({
+ title: 'Success',
+ message: 'Some help text regarding the successful event.',
+ verticalPosition: 'top',
+ horizontalPosition: 'right',
+ icon: 'fa fa-check-circle-o',
+ color: '#1EB475',
+ duration: 3000
+ });
+ },
+
+ showWarnSnackBar: function () {
+ var snackBarRef = this.snackBarService.openCoaster({
+ title: 'Warning',
+ message: 'Some help text regarding the warning.',
+ verticalPosition: 'top',
+ horizontalPosition: 'left',
+ icon: 'fa fa-exclamation-triangle',
+ color: '#E98A40',
+ duration: 3000
+ });
+ },
+
+ showErrorSnackBar: function () {
+ var snackBarRef = this.snackBarService.openCoaster({
+ title: 'Error',
+ message: 'Some help text regarding the critical error. This coaster will stay open until closed with the `x` or if another coaster is created.',
+ verticalPosition: 'bottom',
+ horizontalPosition: 'right',
+ icon: 'fa fa-times-circle-o',
+ color: '#EF6162'
+ });
+ },
+
+ showRegularSnackBar: function () {
+ var snackBarRef = this.snackBarService.openCoaster({
+ title: 'Regular',
+ message: 'Something interesting.',
+ verticalPosition: 'bottom',
+ horizontalPosition: 'left',
+ color: '#808793',
+ duration: 3000
+ });
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Dialog">
+
+ openDialog: function () {
+ this.dialog.open(FdsDemoDialog);
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Expansion Panel">
+
+ toggleExpansion1: function () {
+ if (!this.disabled) {
+ this.expansion1 = !this.expansion1;
+ }
+ },
+
+ toggleDisabled: function () {
+ this.disabled = !this.disabled;
+ },
+
+ expandExpansion1Event: function () {
+ this.expandCollapseExpansion1Msg = 'Expand event emitted.';
+ },
+
+ collapseExpansion1Event: function () {
+ this.expandCollapseExpansion1Msg = 'Collapse event emitted.';
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Simple Dialogs">
+
+ openAlert: function () {
+ this.dialogService.openAlert({
+ title: 'Alert',
+ disableClose: true,
+ message: 'This is how simple it is to create an alert with this wrapper service.',
+ });
+ },
+
+ openConfirm: function () {
+ this.dialogService.openConfirm({
+ title: 'Confirm',
+ message: 'This is how simple it is to create a confirm with this wrapper service. Do you agree?',
+ cancelButton: 'Disagree',
+ acceptButton: 'Agree',
+ });
+ },
+
+ openPrompt: function () {
+ this.dialogService.openPrompt({
+ title: 'Prompt',
+ message: 'This is how simple it is to create a prompt with this wrapper service. Prompt something.',
+ value: 'Populated value',
+ cancelButton: 'Cancel',
+ acceptButton: 'Ok',
+ });
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Searchable Expansion Panels">
+
+ isDropletFilterChecked: function (term) {
+ return (this.dropletsSearchTerms.indexOf(term) > -1);
+ },
+
+ getDropletTypeCount: function (type) {
+ return this.filteredDroplets.filter(function (droplet) {
+ return droplet.type === type;
+ }).length;
+ },
+
+ getDropletCertificationCount: function (certification) {
+ return this.filteredDroplets.filter(function (droplet) {
+ return Object.keys(droplet).find(function (key) {
+ if (key === certification && droplet[certification].type === 'certification') {
+ return droplet;
+ }
+ });
+ }).length;
+ },
+
+ getSortBy: function () {
+ var sortByColumnLabel;
+ var arrayLength = this.dropletColumns.length;
+ for (var i = 0; i < arrayLength; i++) {
+ if (this.dropletColumns[i].active === true) {
+ sortByColumnLabel = this.dropletColumns[i].label;
+ break;
+ }
+ }
+ return sortByColumnLabel;
+ },
+
+ sortDroplets: function (column) {
+ if (column.sortable === true) {
+ // toggle column sort order
+ var sortOrder = column.sortOrder = (column.sortOrder === 'ASC') ? 'DESC' : 'ASC';
+ this.filterDroplets(column.name, sortOrder);
+ //only one column can be actively sorted so we reset all to inactive
+ this.dropletColumns.forEach(function (c) {
+ c.active = false;
+ });
+ //and set this column as the actively sorted column
+ column.active = true;
+ this.activeDropletColumn = column;
+ }
+ },
+
+ toggleDropletsFilter: function (searchTerm) {
+ var applySearchTerm = true;
+ // check if the search term is already applied and remove it if true
+ if (this.dropletsSearchTerms.length > 0) {
+ var arrayLength = this.dropletsSearchTerms.length;
+ for (var i = 0; i < arrayLength; i++) {
+ var index = this.dropletsSearchTerms.indexOf(searchTerm);
+ if (index > -1) {
+ this.dropletsSearchTerms.splice(index, 1);
+ applySearchTerm = false;
+ }
+ }
+ }
+
+ // if we just removed the search term do NOT apply it again
+ if (applySearchTerm) {
+ this.dropletsSearchTerms.push(searchTerm);
+ }
+
+ this.filterDroplets(this.activeDropletColumn.name, this.activeDropletColumn.sortOrder);
+ },
+
+ filterDroplets: function (sortBy, sortOrder) {
+ // if `sortOrder` is `undefined` then use 'ASC'
+ if (sortOrder === undefined) {
+ sortOrder = 'ASC'
+ }
+ // if `sortBy` is `undefined` then find the first sortable column in this.dropletColumns
+ if (sortBy === undefined) {
+ var arrayLength = this.dropletColumns.length;
+ for (var i = 0; i < arrayLength; i++) {
+ if (this.dropletColumns[i].sortable === true) {
+ sortBy = this.dropletColumns[i].name;
+ this.activeDropletColumn = this.dropletColumns[i];
+ //only one column can be actively sorted so we reset all to inactive
+ this.dropletColumns.forEach(function (c) {
+ c.active = false;
+ });
+ //and set this column as the actively sorted column
+ this.dropletColumns[i].active = true;
+ this.dropletColumns[i].sortOrder = sortOrder;
+ break;
+ }
+ }
+ }
+
+ var newData = this.droplets;
+
+ for (var i = 0; i < this.dropletsSearchTerms.length; i++) {
+ newData = this.filterData(newData, this.dropletsSearchTerms[i], true, this.activeDropletColumn.name);
+ }
+
+ newData = this.dataTableService.sortData(newData, sortBy, sortOrder);
+ this.filteredDroplets = newData;
+ this.getAutoCompleteDroplets();
+ },
+
+ getAutoCompleteDroplets: function () {
+ var self = this;
+ this.autoCompleteDroplets = [];
+ this.dropletColumns.forEach(function (c) {
+ self.filteredDroplets.forEach(function (r) {
+ (r[c.name.toLowerCase()]) ? self.autoCompleteDroplets.push(r[c.name.toLowerCase()].toString()) : '';
+ });
+ });
+ },
+
+ //</editor-fold>
+
+ filterData: function (data, searchTerm, ignoreCase) {
+ var field = '';
+ if (searchTerm.indexOf(":") > -1) {
+ field = searchTerm.split(':')[0].trim();
+ searchTerm = searchTerm.split(':')[1].trim();
+ }
+ var filter = searchTerm ? (ignoreCase ? searchTerm.toLowerCase() : searchTerm) : '';
+
+ if (filter) {
+ data = data.filter(function (item) {
+ var res = Object.keys(item).find(function (key) {
+ if (field.indexOf(".") > -1) {
+ var objArray = field.split(".");
+ var obj = item;
+ var arrayLength = objArray.length;
+ for (var i = 0; i < arrayLength; i++) {
+ try {
+ obj = obj[objArray[i]];
+ } catch (e) {
+ return false;
+ }
+ }
+ var preItemValue = ('' + obj);
+ var itemValue = ignoreCase ? preItemValue.toLowerCase() : preItemValue;
+ return itemValue.indexOf(filter) > -1;
+ } else {
+ if (key !== field && field !== '') {
+ return false;
+ }
+ var preItemValue = ('' + item[key]);
+ var itemValue = ignoreCase ? preItemValue.toLowerCase() : preItemValue;
+ return itemValue.indexOf(filter) > -1;
+ }
+ });
+ return !(typeof res === 'undefined');
+ });
+ }
+ return data;
+ },
+
+ //<editor-fold desc="Data Tables">
+
+ sort: function (sortEvent, column) {
+ if (column.sortable) {
+ var sortBy = column.name;
+ var sortOrder = column.sortOrder = (column.sortOrder === 'ASC') ? 'DESC' : 'ASC';
+ this.filter(sortBy, sortOrder);
+
+ //only one column can be actively sorted so we reset all to inactive
+ this.columns.forEach(function (c) {
+ c.active = false;
+ });
+ //and set this column as the actively sorted column
+ column.active = true;
+ }
+ },
+
+ searchRemove: function (searchTerm) {
+ //only remove the first occurrence of the search term
+ var index = this.searchTerm.indexOf(searchTerm);
+ if (index !== -1) {
+ this.searchTerm.splice(index, 1);
+ }
+ this.fromRow = 1;
+ this.currentPage = 1;
+ this.filter();
+ },
+
+ searchAdd: function (searchTerm) {
+ this.searchTerm.push(searchTerm);
+ this.fromRow = 1;
+ this.currentPage = 1;
+ this.filter();
+ },
+
+ page: function (pagingEvent) {
+ this.fromRow = pagingEvent.fromRow;
+ this.currentPage = pagingEvent.page;
+ this.pageSize = pagingEvent.pageSize;
+ this.allRowsSelected = false;
+ this.filter();
+ },
+
+ filter: function (sortBy, sortOrder) {
+ if (this.allRowsSelected) {
+ this.toggleSelectAll();
+ }
+ this.deselectAll();
+ var newData = this.data;
+
+ for (var i = 0; i < this.searchTerm.length; i++) {
+ newData = this.filterData(newData, this.searchTerm[i], true);
+ }
+ this.filteredTotal = newData.length;
+ newData = this.dataTableService.sortData(newData, sortBy, sortOrder);
+ this.pageCount = newData.length;
+ newData = this.dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
+ this.filteredData = newData;
+ this.getAutoCompleteData();
+ },
+
+ toggleSelect: function (row) {
+ if (this.allFilteredRowsSelected()) {
+ this.allRowsSelected = true;
+ } else {
+ this.allRowsSelected = false;
+ }
+ },
+
+ toggleSelectAll: function () {
+ if (this.allRowsSelected) {
+ this.selectAll();
+ } else {
+ this.deselectAll();
+ }
+ },
+
+ selectAll: function () {
+ this.filteredData.forEach(function (c) {
+ c.checked = true;
+ });
+ },
+
+ deselectAll: function () {
+ this.filteredData.forEach(function (c) {
+ c.checked = false;
+ });
+ },
+
+ allFilteredRowsSelected: function () {
+ var allFilteredRowsSelected = true;
+ this.filteredData.forEach(function (c) {
+ if (c.checked === undefined || c.checked === false) {
+ allFilteredRowsSelected = false;
+ }
+ });
+
+ return allFilteredRowsSelected;
+ },
+
+ areTooltipsOn: function () {
+ return this.columns[0].hasOwnProperty('tooltip');
+ },
+
+ toggleTooltips: function () {
+ if (this.columns[0].tooltip) {
+ this.columns.forEach(function (c) {
+ delete c.tooltip;
+ });
+ } else {
+ this.columns.forEach(function (c) {
+ c.tooltip = 'This is ' + c.label + '!';
+ });
+ }
+ },
+
+ openDataTablePrompt: function (row, name) {
+ this.dialogService.openPrompt({
+ message: 'Enter comment?',
+ value: row[name],
+ }).afterClosed().subscribe(function (value) {
+ if (value !== undefined) {
+ row[name] = value;
+ }
+ })
+ },
+
+ getAutoCompleteData: function () {
+ var self = this;
+ this.autoCompleteData = [];
+ this.columns.forEach(function (c) {
+ self.filteredData.forEach(function (r) {
+ (r[c.name.toLowerCase()]) ? self.autoCompleteData.push(r[c.name.toLowerCase()].toString()) : '';
+ });
+ });
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Chips $ Autocomplete">
+
+ toggleReadOnly: function () {
+ this.readOnly = !this.readOnly;
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Life Cycle Listeners">
+
+ /**
+ * Initialize the component
+ */
+ ngOnInit: function () {
+ this.filter();
+ this.filterDroplets();
+ },
+
+ /**
+ * Respond after Angular checks the component's views and child views
+ */
+ ngAfterViewChecked: function () {
+ this.fdsService.inProgress = false;
+ }
+
+ //</editor-fold>
+};
+
+FdsDemo.annotations = [
+ new ngCore.Component({
+ template: require('./fds-demo.html!text'),
+ animations: [fdsAnimations.slideInLeftAnimation],
+ host: {
+ '[@routeAnimation]': 'routeAnimation'
+ }
+ })
+];
+
+FdsDemo.parameters = [
+ fdsSnackBarsModule.FdsSnackBarService,
+ FdsService,
+ ngMaterial.MatDialog,
+ covalentCore.TdDataTableService,
+ fdsDialogsModule.FdsDialogService
+];
+
+module.exports = FdsDemo;
diff --git a/src/demo-app/fds-bootstrap.js b/src/demo-app/fds-bootstrap.js
new file mode 100644
index 0000000..6129c70
--- /dev/null
+++ b/src/demo-app/fds-bootstrap.js
@@ -0,0 +1,53 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+require('core-js');
+require('zone.js');
+require('hammerjs');
+var $ = require('jquery');
+var FdsModule = require('demo-app/fds.module.js');
+var ngPlatformBrowserDynamic = require('@angular/platform-browser-dynamic');
+var ngCore = require('@angular/core');
+
+// Comment out this line when developing to assert for unidirectional data flow
+ngCore.enableProdMode();
+
+// Get the locale id from the global
+var locale = navigator.language;
+
+var providers = [];
+
+// No locale or U.S. English: no translation providers so go ahead and bootstrap the app
+if (!locale || locale === 'en-US') {
+ ngPlatformBrowserDynamic.platformBrowserDynamic().bootstrapModule(FdsModule, {providers: providers});
+} else { //load the translation providers and bootstrap the module
+ var translationFile = './demo-app/messages.' + locale + '.xlf';
+
+ $.ajax({
+ url: translationFile
+ }).done(function (translations) {
+ // add providers if translation file for locale is loaded
+ if (translations) {
+ providers.push({provide: ngCore.TRANSLATIONS, useValue: translations});
+ providers.push({provide: ngCore.TRANSLATIONS_FORMAT, useValue: 'xlf'});
+ providers.push({provide: ngCore.LOCALE_ID, useValue: locale});
+ }
+ ngPlatformBrowserDynamic.platformBrowserDynamic().bootstrapModule(FdsModule, {providers: providers});
+ }).fail(function () {
+ ngPlatformBrowserDynamic.platformBrowserDynamic().bootstrapModule(FdsModule, {providers: providers});
+ });
+}
diff --git a/src/demo-app/fds.animations.js b/src/demo-app/fds.animations.js
new file mode 100644
index 0000000..5f7d0cb
--- /dev/null
+++ b/src/demo-app/fds.animations.js
@@ -0,0 +1,133 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var ngAnimate = require('@angular/animations');
+
+/**
+ * NfAnimations constructor.
+ *
+ * @constructor
+ */
+function NfAnimations() {
+};
+
+NfAnimations.prototype = {
+ constructor: NfAnimations,
+
+ /**
+ * Fade animation
+ */
+ fadeAnimation: ngAnimate.trigger('routeAnimation', [
+ ngAnimate.state('*',
+ ngAnimate.style({
+ opacity: 1
+ })
+ ),
+ ngAnimate.transition(':enter', [
+ ngAnimate.style({
+ opacity: 0
+ }),
+ ngAnimate.animate('0.5s ease-in')
+ ]),
+ ngAnimate.transition(':leave', [
+ ngAnimate.animate('0.5s ease-out', ngAnimate.style({
+ opacity: 0
+ }))
+ ])
+ ]),
+
+ /**
+ * Slide in from the left animation
+ */
+ slideInLeftAnimation: ngAnimate.trigger('routeAnimation', [
+ ngAnimate.state('*',
+ ngAnimate.style({
+ opacity: 1,
+ transform: 'translateX(0)'
+ })
+ ),
+ ngAnimate.transition(':enter', [
+ ngAnimate.style({
+ opacity: 0,
+ transform: 'translateX(-100%)'
+ }),
+ ngAnimate.animate('0.5s ease-in')
+ ]),
+ ngAnimate.transition(':leave', [
+ ngAnimate.animate('0.5s ease-out', ngAnimate.style({
+ opacity: 0,
+ transform: 'translateX(100%)'
+ }))
+ ])
+ ]),
+
+ /**
+ * Slide in from the top animation
+ */
+ slideInDownAnimation: ngAnimate.trigger('routeAnimation', [
+ ngAnimate.state('*',
+ ngAnimate.style({
+ opacity: 1,
+ transform: 'translateY(0)'
+ })
+ ),
+ ngAnimate.transition(':enter', [
+ ngAnimate.style({
+ opacity: 0,
+ transform: 'translateY(-100%)'
+ }),
+ ngAnimate.animate('0.5s ease-in')
+ ]),
+ ngAnimate.transition(':leave', [
+ ngAnimate.animate('0.5s ease-out', ngAnimate.style({
+ opacity: 0,
+ transform: 'translateY(100%)'
+ }))
+ ])
+ ]),
+
+ /**
+ * Fly in/out animation
+ */
+ flyInOutAnimation: ngAnimate.trigger('flyInOut', [
+ ngAnimate.state('in',
+ ngAnimate.style({transform: 'translateX(0)'})
+ ),
+ ngAnimate.transition('void => *', [
+ ngAnimate.style({transform: 'translateX(100%)'}),
+ ngAnimate.animate('0.4s 0.1s ease-in')
+ ]),
+ ngAnimate.transition('* => void', ngAnimate.animate('0.2s ease-out', ngAnimate.style({transform: 'translateX(-100%)'})))
+ ]),
+
+ /**
+ * Fly in/out animation
+ */
+ fadeInOutAnimation: ngAnimate.trigger('fadeInOut', [
+ ngAnimate.state('in',
+ ngAnimate.style({opacity: 1})
+ ),
+ ngAnimate.transition('void => *', [
+ ngAnimate.style({opacity: 0}),
+ ngAnimate.animate('0.5s 0.1s ease-in')
+ ]),
+ ngAnimate.transition('* => void', ngAnimate.animate('0.5s ease-out', ngAnimate.style({opacity: 0})))
+ ])
+
+};
+
+module.exports = new NfAnimations();
diff --git a/src/demo-app/fds.html b/src/demo-app/fds.html
new file mode 100644
index 0000000..98a3f58
--- /dev/null
+++ b/src/demo-app/fds.html
@@ -0,0 +1,34 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<mat-progress-spinner id="loading-spinner" *ngIf="fdsService.inProgress" mode="indeterminate"></mat-progress-spinner>
+<mat-sidenav-container>
+ <mat-sidenav #sidenav mode="over" align="end" opened="false" disableClose="true">
+ <router-outlet name="sidenav"></router-outlet>
+ </mat-sidenav>
+ <div id="fds-app-container">
+ <mat-toolbar id="fds-toolbar">
+ <!-- <img id="fds-logo" src="fds/images/fds-logo-web-app.svg"> -->
+ <div *ngIf="fdsService.perspective !== 'login' && fdsService.perspective !== 'not-found'" fxFlex="1 1 auto" class="pad-left-xl" [@flyInOut]="fdsService.breadCrumbState">
+ <span class="pointer">{{fdsService.title}}</span>
+ </div>
+ </mat-toolbar>
+ <div id="fds-perspectives-container">
+ <router-outlet></router-outlet>
+ </div>
+ </div>
+</mat-sidenav-container>
diff --git a/src/demo-app/fds.js b/src/demo-app/fds.js
new file mode 100644
index 0000000..fc58a0e
--- /dev/null
+++ b/src/demo-app/fds.js
@@ -0,0 +1,74 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var ngCore = require('@angular/core');
+var ngCommonHttp = require('@angular/common/http');
+var FdsService = require('demo-app/services/fds.service.js');
+var fdsAnimations = require('demo-app/fds.animations.js');
+var ngRouter = require('@angular/router');
+var MILLIS_PER_SECOND = 1000;
+
+/**
+ * Fds constructor.
+ *
+ * @param fdsService The fds service.
+ * @param changeDetectorRef The change detector ref.
+ * @constructor
+ */
+function Fds(fdsService, changeDetectorRef) {
+ this.fdsService = fdsService;
+ this.cd = changeDetectorRef;
+};
+
+Fds.prototype = {
+ constructor: Fds,
+
+ /**
+ * Initialize the component
+ */
+ ngOnInit: function () {
+ var self = this;
+ this.fdsService.sidenav = this.sidenav; //ngCore.ViewChild
+ },
+
+ /**
+ * Since the child views are updating the fdsService values that are used to display
+ * the breadcrumbs in this component's view we need to manually detect changes at the correct
+ * point in the lifecycle.
+ */
+ ngAfterViewChecked: function () {
+ this.cd.detectChanges();
+ }
+};
+
+Fds.annotations = [
+ new ngCore.Component({
+ selector: 'fds-app',
+ template: require('./fds.html!text'),
+ queries: {
+ sidenav: new ngCore.ViewChild('sidenav')
+ },
+ animations: [fdsAnimations.flyInOutAnimation]
+ })
+];
+
+Fds.parameters = [
+ FdsService,
+ ngCore.ChangeDetectorRef
+];
+
+module.exports = Fds;
diff --git a/src/demo-app/fds.module.js b/src/demo-app/fds.module.js
new file mode 100644
index 0000000..c9d695d
--- /dev/null
+++ b/src/demo-app/fds.module.js
@@ -0,0 +1,55 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var ngCore = require('@angular/core');
+var FdsRoutes = require('demo-app/fds.routes.js');
+var fdsCore = require('@fluid-design-system/core');
+var Fds = require('demo-app/fds.js');
+var FdsDemo = require('demo-app/components/fluid-design-system/fds-demo.js');
+var FdsDemoDialog = require('demo-app/components/fluid-design-system/dialogs/demo/fds-demo-dialog.js');
+var FdsService = require('demo-app/services/fds.service.js');
+var ngCommonHttp = require('@angular/common/http');
+
+function FdsModule() {
+};
+
+FdsModule.prototype = {
+ constructor: FdsModule
+};
+
+FdsModule.annotations = [
+ new ngCore.NgModule({
+ imports: [
+ fdsCore,
+ FdsRoutes
+ ],
+ declarations: [
+ Fds,
+ FdsDemo,
+ FdsDemoDialog
+ ],
+ entryComponents: [
+ FdsDemoDialog
+ ],
+ providers: [
+ FdsService
+ ],
+ bootstrap: [Fds]
+ })
+];
+
+module.exports = FdsModule;
diff --git a/src/demo-app/fds.routes.js b/src/demo-app/fds.routes.js
new file mode 100644
index 0000000..fe81c4f
--- /dev/null
+++ b/src/demo-app/fds.routes.js
@@ -0,0 +1,26 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var ngRouter = require('@angular/router');
+var FdsDemo = require('demo-app/components/fluid-design-system/fds-demo.js');
+
+var FdsRoutes = new ngRouter.RouterModule.forRoot([{
+ path: '',
+ component: FdsDemo
+}]);
+
+module.exports = FdsRoutes;
diff --git a/src/demo-app/gh-pages.index.html b/src/demo-app/gh-pages.index.html
new file mode 100644
index 0000000..c2be05b
--- /dev/null
+++ b/src/demo-app/gh-pages.index.html
@@ -0,0 +1,36 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the 'License'); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an 'AS IS' BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Apache NiFi Fluid Design System Demo</title>
+ <base href='/nifi-fds/'>
+ <meta charset='UTF-8'>
+ <meta name='viewport' content='width=device-width, initial-scale=1'>
+ <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
+ <link rel="stylesheet" href="node_modules/@covalent/core/common/platform.css">
+ <link rel="stylesheet" href='node_modules/nifi-fds/platform/core/common/styles/css/fluid-design-system.min.css'/>
+ <link rel="stylesheet" href='demo-app/css/fds-demo.min.css'/>
+ <link rel='stylesheet' href='node_modules/font-awesome/css/font-awesome.css'/>
+</head>
+<body>
+<fds-app></fds-app>
+</body>
+<script src="node_modules/systemjs/dist/system.src.js"></script>
+<script src="demo-app/systemjs.config.js?"></script>
+<script>
+ System.import('demo-app/fds-bootstrap.js').catch(function(err) {console.error(err);});
+</script>
+</html>
diff --git a/src/demo-app/gh-pages.package.json b/src/demo-app/gh-pages.package.json
new file mode 100644
index 0000000..17db578
--- /dev/null
+++ b/src/demo-app/gh-pages.package.json
@@ -0,0 +1,57 @@
+{
+ "name": "nifi-fds-demo",
+ "version": "0.0.0",
+ "scripts": {
+ "start": "./node_modules/http-server/bin/http-server ."
+ },
+ "description": "The Apache NiFi Fluid Design System demo provides users with an example web application that consumes the NgModule and allows users to interact with the UI/UX components.",
+ "keywords": [
+ "fluid design system",
+ "angular",
+ "material",
+ "material design",
+ "components",
+ "reusable",
+ "covalent"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/apache/nifi-fds.git"
+ },
+ "bugs": {
+ "url": "https://github.com/apache/nifi-fds/issues"
+ },
+ "license": "Apache-2.0",
+ "dependencies": {
+ "core-js": "2.5.5",
+ "jquery": "3.2.1",
+ "rxjs": "5.5.6",
+ "systemjs": "0.20.17",
+ "systemjs-plugin-text": "0.0.11",
+ "zone.js": "0.8.17",
+ "@angular/animations": "5.2.0",
+ "@angular/cdk": "5.2.0",
+ "@angular/common": "5.2.0",
+ "@angular/compiler": "5.2.0",
+ "@angular/core": "5.2.0",
+ "@angular/flex-layout": "5.0.0-beta.14",
+ "@angular/forms": "5.2.0",
+ "@angular/http": "5.2.0",
+ "@angular/material": "5.2.0",
+ "@angular/platform-browser": "5.2.0",
+ "@angular/platform-browser-dynamic": "5.2.0",
+ "@angular/router": "5.2.0",
+ "@covalent/core": "1.0.0",
+ "detect-libc": "1.0.3",
+ "font-awesome": "4.7.0",
+ "hammerjs": "2.0.8",
+ "roboto-fontface": "0.7.0"
+ },
+ "devDependencies": {
+ "grunt": "0.4.5",
+ "grunt-cli": "1.2.0",
+ "grunt-contrib-compress": "1.4.3",
+ "grunt-sass": "2.0.0",
+ "load-grunt-tasks": "3.5.2"
+ }
+}
diff --git a/src/demo-app/gh-pages.systemjs.config.js b/src/demo-app/gh-pages.systemjs.config.js
new file mode 100644
index 0000000..3b6b6ae
--- /dev/null
+++ b/src/demo-app/gh-pages.systemjs.config.js
@@ -0,0 +1,129 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function (global) {
+ System.config({
+ paths: {
+ // paths serve as alias
+ 'npm:': 'node_modules/'
+ },
+ // map tells the System loader where to look for things
+ map: {
+ 'text': 'npm:systemjs-plugin-text/text.js',
+ 'app': './demo-app',
+
+ // jquery
+ 'jquery': 'npm:jquery/dist/jquery.min.js',
+
+ // Angular
+ '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+ '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+ '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
+ '@angular/common/http/testing': 'npm:@angular/common/bundles/common-http-testing.umd.js',
+ '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+ '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+ '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+ '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+ '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+ '@angular/flex-layout': 'npm:@angular/flex-layout/bundles/flex-layout.umd.js',
+ '@angular/flex-layout/core': 'npm:@angular/flex-layout/bundles/flex-layout-core.umd.js',
+ '@angular/flex-layout/extended': 'npm:@angular/flex-layout/bundles/flex-layout-extended.umd.js',
+ '@angular/flex-layout/flex': 'npm:@angular/flex-layout/bundles/flex-layout-flex.umd.js',
+ '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+ '@angular/material/core': 'npm:@angular/material/bundles/material-core.umd.js',
+ '@angular/material/card': 'npm:@angular/material/bundles/material-card.umd.js',
+ '@angular/material/divider': 'npm:@angular/material/bundles/material-divider.umd.js',
+ '@angular/material/progress-bar': 'npm:@angular/material/bundles/material-progress-bar.umd.js',
+ '@angular/material/progress-spinner': 'npm:@angular/material/bundles/material-progress-spinner.umd.js',
+ '@angular/material/chips': 'npm:@angular/material/bundles/material-chips.umd.js',
+ '@angular/material/input': 'npm:@angular/material/bundles/material-input.umd.js',
+ '@angular/material/icon': 'npm:@angular/material/bundles/material-icon.umd.js',
+ '@angular/material/button': 'npm:@angular/material/bundles/material-button.umd.js',
+ '@angular/material/checkbox': 'npm:@angular/material/bundles/material-checkbox.umd.js',
+ '@angular/material/tooltip': 'npm:@angular/material/bundles/material-tooltip.umd.js',
+ '@angular/material/dialog': 'npm:@angular/material/bundles/material-dialog.umd.js',
+ '@angular/material/sidenav': 'npm:@angular/material/bundles/material-sidenav.umd.js',
+ '@angular/material/menu': 'npm:@angular/material/bundles/material-menu.umd.js',
+ '@angular/material/form-field': 'npm:@angular/material/bundles/material-form-field.umd.js',
+ '@angular/material/toolbar': 'npm:@angular/material/bundles/material-toolbar.umd.js',
+ '@angular/material/autocomplete': 'npm:@angular/material/bundles/material-autocomplete.umd.js',
+ '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
+ '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
+ '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
+ '@angular/cdk/accordion': 'npm:@angular/cdk/bundles/cdk-accordion.umd.js',
+ '@angular/cdk/layout': 'npm:@angular/cdk/bundles/cdk-layout.umd.js',
+ '@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
+ '@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
+ '@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
+ '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
+ '@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
+ '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
+ '@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
+ '@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
+ '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
+ '@angular/cdk/rxjs': 'npm:@angular/cdk/bundles/cdk-rxjs.umd.js',
+ '@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',
+ '@angular/cdk/stepper': 'npm:@angular/cdk/bundles/cdk-stepper.umd.js',
+ '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
+ '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
+ '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+
+ // needed to support gestures for angular material
+ 'hammerjs': 'npm:hammerjs/hammer.min.js',
+
+ // Covalent
+ '@covalent/core': 'npm:@covalent/core/bundles/covalent-core.umd.min.js',
+ '@covalent/core/common': 'npm:@covalent/core/bundles/covalent-core-common.umd.min.js',
+
+ // other libraries
+ 'rxjs': 'npm:rxjs',
+ 'zone.js': 'npm:zone.js/dist/zone.js',
+ 'core-js': 'npm:core-js/client/shim.min.js',
+ 'superagent': 'npm:superagent/superagent.js',
+ 'querystring': 'npm:querystring',
+ 'tslib': 'npm:tslib/tslib.js',
+
+ // Fluid Design System
+ '@fluid-design-system/core': 'npm:nifi-fds/platform/core/fluid-design-system.module.js',
+ '@fluid-design-system/dialogs': 'npm:nifi-fds/platform/core/dialogs/fds-dialogs.module.js',
+ '@fluid-design-system/dialog-component': 'npm:nifi-fds/platform/core/dialogs/fds-dialog.component.js',
+ '@fluid-design-system/dialog-service': 'npm:nifi-fds/platform/core/dialogs/services/dialog.service.js',
+ '@fluid-design-system/confirm-dialog-component': 'npm:nifi-fds/platform/core/dialogs/confirm-dialog/confirm-dialog.component.js',
+ '@fluid-design-system/snackbars': 'npm:nifi-fds/platform/core/snackbars/fds-snackbars.module.js',
+ '@fluid-design-system/snackbar-component': 'npm:nifi-fds/platform/core/snackbars/fds-snackbar.component.js',
+ '@fluid-design-system/snackbar-service': 'npm:nifi-fds/platform/core/snackbars/services/snackbar.service.js',
+ '@fluid-design-system/coaster-component': 'npm:nifi-fds/platform/core/snackbars/coaster/coaster.component.js'
+ },
+ // packages tells the System loader how to load when no filename and/or no extension
+ packages: {
+ app: {
+ defaultExtension: 'js',
+ meta: {
+ './*.js': {
+ loader: 'demo-app/systemjs-angular-loader.js'
+ }
+ }
+ },
+ 'demo-app/systemjs-angular-loader.js': {
+ loader: false
+ },
+ 'rxjs': {
+ defaultExtension: 'js'
+ }
+ }
+ });
+})(this);
diff --git a/src/demo-app/index.html b/src/demo-app/index.html
new file mode 100644
index 0000000..3eb8f4f
--- /dev/null
+++ b/src/demo-app/index.html
@@ -0,0 +1,36 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the 'License'); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an 'AS IS' BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Apache NiFi Fluid Design System Demo</title>
+ <base href='/'>
+ <meta charset='UTF-8'>
+ <meta name='viewport' content='width=device-width, initial-scale=1'>
+ <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
+ <link rel="stylesheet" href="node_modules/@covalent/core/common/platform.css">
+ <link rel="stylesheet" href='platform/core/common/styles/css/fluid-design-system.min.css'/>
+ <link rel="stylesheet" href='demo-app/css/fds-demo.min.css'/>
+ <link rel='stylesheet' href='node_modules/font-awesome/css/font-awesome.css'/>
+</head>
+<body>
+<fds-app></fds-app>
+</body>
+<script src="node_modules/systemjs/dist/system.src.js"></script>
+<script src="demo-app/systemjs.config.js?"></script>
+<script>
+ System.import('demo-app/fds-bootstrap.js').catch(function(err) {console.error(err);});
+</script>
+</html>
diff --git a/src/demo-app/services/fds.service.js b/src/demo-app/services/fds.service.js
new file mode 100644
index 0000000..26e6686
--- /dev/null
+++ b/src/demo-app/services/fds.service.js
@@ -0,0 +1,52 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var covalentCore = require('@covalent/core');
+var fdsDialogsModule = require('@fluid-design-system/dialogs');
+var fdsSnackBarsModule = require('@fluid-design-system/snackbars');
+
+/**
+ * FdsService constructor.
+ *
+ * @param tdDataTableService The covalent data table service module.
+ * @param fdsDialogService The FDS dialog service.
+ * @param fdsSnackBarService The FDS snack bar service module.
+ * @constructor
+ */
+function FdsService(tdDataTableService, fdsDialogService, fdsSnackBarService) {
+ // Services
+ this.dialogService = fdsDialogService;
+ this.snackBarService = fdsSnackBarService;
+ this.dataTableService = tdDataTableService;
+
+ // General
+ this.title = "Apache NiFi Fluid Design System Demo";
+ this.inProgress = true;
+ this.perspective = '';
+};
+
+FdsService.prototype = {
+ constructor: FdsService,
+};
+
+FdsService.parameters = [
+ covalentCore.TdDataTableService,
+ fdsDialogsModule.FdsDialogService,
+ fdsSnackBarsModule.FdsSnackBarService
+];
+
+module.exports = FdsService;
diff --git a/platform/systemjs-angular-loader.js b/src/demo-app/systemjs-angular-loader.js
similarity index 100%
rename from platform/systemjs-angular-loader.js
rename to src/demo-app/systemjs-angular-loader.js
diff --git a/src/demo-app/systemjs.config.extras.js b/src/demo-app/systemjs.config.extras.js
new file mode 100644
index 0000000..e2a256a
--- /dev/null
+++ b/src/demo-app/systemjs.config.extras.js
@@ -0,0 +1,27 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Add barrels and stuff
+ */
+(function (global) {
+ System.config({
+ packages: {
+ // add packages here
+ }
+ });
+})(this);
diff --git a/platform/systemjs.spec.config.js b/src/demo-app/systemjs.config.js
similarity index 63%
copy from platform/systemjs.spec.config.js
copy to src/demo-app/systemjs.config.js
index 2888d96..a3afaf3 100644
--- a/platform/systemjs.spec.config.js
+++ b/src/demo-app/systemjs.config.js
@@ -19,12 +19,12 @@
System.config({
paths: {
// paths serve as alias
- 'npm:': 'fds/node_modules/'
+ 'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'text': 'npm:systemjs-plugin-text/text.js',
- 'app': './platform',
+ 'app': './demo-app',
// jquery
'jquery': 'npm:jquery/dist/jquery.min.js',
@@ -40,7 +40,27 @@
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/flex-layout': 'npm:@angular/flex-layout/bundles/flex-layout.umd.js',
+ '@angular/flex-layout/core': 'npm:@angular/flex-layout/bundles/flex-layout-core.umd.js',
+ '@angular/flex-layout/extended': 'npm:@angular/flex-layout/bundles/flex-layout-extended.umd.js',
+ '@angular/flex-layout/flex': 'npm:@angular/flex-layout/bundles/flex-layout-flex.umd.js',
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+ '@angular/material/core': 'npm:@angular/material/bundles/material-core.umd.js',
+ '@angular/material/card': 'npm:@angular/material/bundles/material-card.umd.js',
+ '@angular/material/divider': 'npm:@angular/material/bundles/material-divider.umd.js',
+ '@angular/material/progress-bar': 'npm:@angular/material/bundles/material-progress-bar.umd.js',
+ '@angular/material/progress-spinner': 'npm:@angular/material/bundles/material-progress-spinner.umd.js',
+ '@angular/material/chips': 'npm:@angular/material/bundles/material-chips.umd.js',
+ '@angular/material/input': 'npm:@angular/material/bundles/material-input.umd.js',
+ '@angular/material/icon': 'npm:@angular/material/bundles/material-icon.umd.js',
+ '@angular/material/button': 'npm:@angular/material/bundles/material-button.umd.js',
+ '@angular/material/checkbox': 'npm:@angular/material/bundles/material-checkbox.umd.js',
+ '@angular/material/tooltip': 'npm:@angular/material/bundles/material-tooltip.umd.js',
+ '@angular/material/dialog': 'npm:@angular/material/bundles/material-dialog.umd.js',
+ '@angular/material/sidenav': 'npm:@angular/material/bundles/material-sidenav.umd.js',
+ '@angular/material/menu': 'npm:@angular/material/bundles/material-menu.umd.js',
+ '@angular/material/form-field': 'npm:@angular/material/bundles/material-form-field.umd.js',
+ '@angular/material/toolbar': 'npm:@angular/material/bundles/material-toolbar.umd.js',
+ '@angular/material/autocomplete': 'npm:@angular/material/bundles/material-autocomplete.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
'@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
@@ -62,16 +82,20 @@
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+ // needed to support gestures for angular material
+ 'hammerjs': 'npm:hammerjs/hammer.min.js',
+
// Covalent
- '@covalent/core': 'npm:@covalent/core/bundles/core.umd.min.js',
+ '@covalent/core': 'npm:@covalent/core/bundles/covalent-core.umd.min.js',
+ '@covalent/core/common': 'npm:@covalent/core/bundles/covalent-core-common.umd.min.js',
// other libraries
'rxjs': 'npm:rxjs',
'zone.js': 'npm:zone.js/dist/zone.js',
- // 'core-js': 'npm:core-js/client/shim.min.js',
- // 'superagent': 'npm:superagent/superagent.js',
- // 'querystring': 'npm:querystring',
- // 'tslib': 'npm:tslib/tslib.js',
+ 'core-js': 'npm:core-js/client/shim.min.js',
+ 'superagent': 'npm:superagent/superagent.js',
+ 'querystring': 'npm:querystring',
+ 'tslib': 'npm:tslib/tslib.js',
// Fluid Design System
'@fluid-design-system/core': 'platform/core/fluid-design-system.module.js',
@@ -91,15 +115,27 @@
defaultExtension: 'js',
meta: {
'./*.js': {
- loader: 'fds/systemjs-angular-loader.js'
+ loader: 'demo-app/systemjs-angular-loader.js'
}
}
},
- 'fds/systemjs-angular-loader.js': {
+ 'demo-app/systemjs-angular-loader.js': {
loader: false
},
'rxjs': {
defaultExtension: 'js'
+ },
+ 'querystring': {
+ main: './index.js',
+ defaultExtension: 'js'
+ },
+ 'moment': {
+ main: './moment.js',
+ defaultExtension: 'js'
+ },
+ 'angular2-moment': {
+ main: './index.js',
+ defaultExtension: 'js'
}
}
});
diff --git a/src/demo-app/theming/_helperClasses.scss b/src/demo-app/theming/_helperClasses.scss
new file mode 100644
index 0000000..6918db4
--- /dev/null
+++ b/src/demo-app/theming/_helperClasses.scss
@@ -0,0 +1,78 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the 'License'); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.fa-rotate-45 {
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+
+.capitalize {
+ text-transform: capitalize;
+}
+
+.uppercase {
+ text-transform: uppercase;
+}
+
+.ellipsis {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: block !important;
+}
+
+.info {
+ color: $blue8;
+}
+
+.authorized {
+ color: $red2;
+}
+
+.suspended {
+ color: $green3;
+}
+
+.nonconfigurable {
+ background: $grey9;
+}
+
+.selected-nonconfigurable {
+ background: repeating-linear-gradient(-45deg, $grey5, $grey5 10px, #fff 10px, #fff 20px) !important;
+}
+
+.fds-button-container {
+ position: absolute;
+ bottom: 0px;
+ height: 64px;
+ left: 0px;
+ right: 0px;
+ border-top: 1px solid $grey4;
+}
+
+.fds-button-container .done-button {
+ float: right;
+ margin-right: 15px;
+ margin-top: 15px;
+}
+
+.td-expansion-content {
+ background: $grey6;
+}
diff --git a/src/demo-app/theming/_structureElements.scss b/src/demo-app/theming/_structureElements.scss
new file mode 100644
index 0000000..b84c60a
--- /dev/null
+++ b/src/demo-app/theming/_structureElements.scss
@@ -0,0 +1,84 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+body {
+ background: $grey12;
+ background-size: 40%;
+}
+
+#fds-app-container {
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+#fds-toolbar {
+ min-width: 1045px;
+ background-color: #FFFFFF;
+ position: absolute;
+ z-index: 1000;
+ background: $grey11;
+}
+
+#fds-toolbar .mat-icon-button {
+ color: $grey5;
+ font-size: 20px;
+ margin: 0;
+}
+
+#fds-toolbar .mat-select-value-text, #fds-toolbar .mat-select-arrow {
+ color: white;
+}
+
+#fds-toolbar span, #fds-toolbar .link {
+ color: $grey5;
+ font-weight: lighter;
+}
+
+#fds-perspectives-container {
+ position: absolute;
+ top: 64px;
+ left: 0px;
+ right: 0px;
+ bottom: 0px;
+ min-height: 370px;
+ min-width: 1045px;
+ overflow: auto;
+ background: $grey12;
+ background-size: 40%;
+}
+
+#loading-spinner {
+ position: absolute;
+ top: calc(50% - 50px);
+ left: calc(50% - 50px);
+ z-index: 2;
+}
+
+mat-sidenav {
+ width: 40%;
+ min-width: 418px;
+}
+
+.sidenav-content {
+ position: absolute;
+ bottom: 60px;
+ top: 80px;
+ right: 0px;
+ left: 0px;
+ overflow: auto;
+}
diff --git a/src/demo-app/theming/fds-demo.scss b/src/demo-app/theming/fds-demo.scss
new file mode 100644
index 0000000..3668229
--- /dev/null
+++ b/src/demo-app/theming/fds-demo.scss
@@ -0,0 +1,49 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the 'License'); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* Welcome to Compass.
+ * In this file you should centralize your imports. After compilation simply import this file using the following HTML or equivalent:
+ * <link href='demo-app/css/fds-demo.min.css' media='screen, projection' rel='stylesheet' type='text/css' /> */
+
+@import '../../platform/core/common/styles/globalVars';
+@import '../../platform/core/theming/all-theme';
+@import 'structureElements';
+@import 'helperClasses';
+
+//Change these
+$primaryColor: $rose1;
+$primaryColorHover: $rose2;
+$accentColor: $blue7;
+$accentColorHover: $grey4;
+
+// Include the base styles for Angular Material core. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+@include mat-core;
+
+// Define the palettes
+$fds-base-palette: (50: #89df79, 100: $primaryColorHover, 200: #65d550, 300: #53d03b, 400: #46c32f, 500: $primaryColor, 600: $primaryColor, 700: #89df79, 800: #29701b, 900: #215c16, A100: #9be48d, A200: #ade9a2, A400: #bfedb6, A700: #1a4711, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
+$fds-accent-palette: (50: #89df79, 100: $accentColorHover, 200: #65d550, 300: #53d03b, 400: #46c32f, 500: $accentColor, 600: $accentColor, 700: #89df79, 800: #29701b, 900: #215c16, A100: #9be48d, A200: #ade9a2, A400: #bfedb6, A700: #1a4711, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
+$fds-warn-palette: (50: #81410f, 100: #D14A50, 200: #af5814, 300: #c66317, 400: #dd6f19, 500: $warnColor, 600: $warnColor, 700: #eea66e, 800: #f1b485, 900: #f4c29b, A100: #ec9857, A200: #89df79, A400: #89df79, A700: #f6d0b2, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
+$fds-primary: mat-palette($fds-base-palette, 500, 100, 500);
+$fds-accent: mat-palette($fds-accent-palette, 500, 100, 500);
+$fds-warn: mat-palette($fds-warn-palette, 500, 100, 500);
+
+// Define the theme (Optionally specify a default, lighter, and darker hue.)
+$fds-theme: mat-light-theme($fds-primary, $fds-accent, $fds-warn);
+
+// FDS theme mixin
+@include fds-theme($fds-theme);
diff --git a/platform/core/common/fds-common.module.js b/src/platform/core/common/fds-common.module.js
similarity index 100%
rename from platform/core/common/fds-common.module.js
rename to src/platform/core/common/fds-common.module.js
diff --git a/platform/core/common/fds.animations.js b/src/platform/core/common/fds.animations.js
similarity index 100%
rename from platform/core/common/fds.animations.js
rename to src/platform/core/common/fds.animations.js
diff --git a/platform/core/common/services/fds-storage.service.js b/src/platform/core/common/services/fds-storage.service.js
similarity index 100%
rename from platform/core/common/services/fds-storage.service.js
rename to src/platform/core/common/services/fds-storage.service.js
diff --git a/platform/core/common/services/fds-storage.service.spec.js b/src/platform/core/common/services/fds-storage.service.spec.js
similarity index 100%
rename from platform/core/common/services/fds-storage.service.spec.js
rename to src/platform/core/common/services/fds-storage.service.spec.js
diff --git a/platform/core/common/styles/_basicElements.scss b/src/platform/core/common/styles/_basicElements.scss
similarity index 100%
rename from platform/core/common/styles/_basicElements.scss
rename to src/platform/core/common/styles/_basicElements.scss
diff --git a/platform/core/common/styles/_buttonToggles.scss b/src/platform/core/common/styles/_buttonToggles.scss
similarity index 100%
rename from platform/core/common/styles/_buttonToggles.scss
rename to src/platform/core/common/styles/_buttonToggles.scss
diff --git a/platform/core/common/styles/_buttons.scss b/src/platform/core/common/styles/_buttons.scss
similarity index 99%
rename from platform/core/common/styles/_buttons.scss
rename to src/platform/core/common/styles/_buttons.scss
index a9c9627..db6461f 100644
--- a/platform/core/common/styles/_buttons.scss
+++ b/src/platform/core/common/styles/_buttons.scss
@@ -67,7 +67,7 @@
body[fds] .mat-raised-button {
height: 34px;
font-family: $fontPrimary;
- font-weight: normal;
+ font-weight: lighter;
font-size: 14px;
text-transform: uppercase;
line-height: normal;
@@ -211,4 +211,4 @@
color: $buttonFontPrimaryColorSelected;
background-color: $buttonBgColorPrimarySelected;
}
-}
\ No newline at end of file
+}
diff --git a/platform/core/common/styles/_checkboxes.scss b/src/platform/core/common/styles/_checkboxes.scss
similarity index 100%
rename from platform/core/common/styles/_checkboxes.scss
rename to src/platform/core/common/styles/_checkboxes.scss
diff --git a/platform/core/common/styles/_chips.scss b/src/platform/core/common/styles/_chips.scss
similarity index 100%
rename from platform/core/common/styles/_chips.scss
rename to src/platform/core/common/styles/_chips.scss
diff --git a/platform/core/common/styles/_expansionPanels.scss b/src/platform/core/common/styles/_expansionPanels.scss
similarity index 100%
rename from platform/core/common/styles/_expansionPanels.scss
rename to src/platform/core/common/styles/_expansionPanels.scss
diff --git a/platform/core/common/styles/_globalVars.scss b/src/platform/core/common/styles/_globalVars.scss
similarity index 100%
rename from platform/core/common/styles/_globalVars.scss
rename to src/platform/core/common/styles/_globalVars.scss
diff --git a/platform/core/common/styles/_helperClasses.scss b/src/platform/core/common/styles/_helperClasses.scss
similarity index 100%
rename from platform/core/common/styles/_helperClasses.scss
rename to src/platform/core/common/styles/_helperClasses.scss
diff --git a/platform/core/common/styles/_inputs.scss b/src/platform/core/common/styles/_inputs.scss
similarity index 98%
rename from platform/core/common/styles/_inputs.scss
rename to src/platform/core/common/styles/_inputs.scss
index 392f5cb..cbcd08e 100644
--- a/platform/core/common/styles/_inputs.scss
+++ b/src/platform/core/common/styles/_inputs.scss
@@ -65,7 +65,7 @@
}
body[fds] .mat-input-placeholder {
- top: 29px;
+ top: 27px;
left: 10px;
white-space: nowrap;
overflow: hidden;
@@ -100,7 +100,7 @@
display: inline-table;
font-family: FontAwesome;
float: right;
- margin: 12px 10px 0px 0px;
+ margin: 15px 10px 0px 0px;
color: $grey3;
}
diff --git a/platform/core/common/styles/_links.scss b/src/platform/core/common/styles/_links.scss
similarity index 100%
rename from platform/core/common/styles/_links.scss
rename to src/platform/core/common/styles/_links.scss
diff --git a/platform/core/common/styles/_menus.scss b/src/platform/core/common/styles/_menus.scss
similarity index 100%
rename from platform/core/common/styles/_menus.scss
rename to src/platform/core/common/styles/_menus.scss
diff --git a/platform/core/common/styles/_modals.scss b/src/platform/core/common/styles/_modals.scss
similarity index 100%
rename from platform/core/common/styles/_modals.scss
rename to src/platform/core/common/styles/_modals.scss
diff --git a/platform/core/common/styles/_panels.scss b/src/platform/core/common/styles/_panels.scss
similarity index 100%
rename from platform/core/common/styles/_panels.scss
rename to src/platform/core/common/styles/_panels.scss
diff --git a/platform/core/common/styles/_progress-bar.scss b/src/platform/core/common/styles/_progress-bar.scss
similarity index 100%
rename from platform/core/common/styles/_progress-bar.scss
rename to src/platform/core/common/styles/_progress-bar.scss
diff --git a/platform/core/common/styles/_radios.scss b/src/platform/core/common/styles/_radios.scss
similarity index 100%
rename from platform/core/common/styles/_radios.scss
rename to src/platform/core/common/styles/_radios.scss
diff --git a/platform/core/common/styles/_sideNav.scss b/src/platform/core/common/styles/_sideNav.scss
similarity index 100%
rename from platform/core/common/styles/_sideNav.scss
rename to src/platform/core/common/styles/_sideNav.scss
diff --git a/platform/core/common/styles/_stepper.scss b/src/platform/core/common/styles/_stepper.scss
similarity index 100%
rename from platform/core/common/styles/_stepper.scss
rename to src/platform/core/common/styles/_stepper.scss
diff --git a/platform/core/common/styles/_tables.scss b/src/platform/core/common/styles/_tables.scss
similarity index 100%
rename from platform/core/common/styles/_tables.scss
rename to src/platform/core/common/styles/_tables.scss
diff --git a/platform/core/common/styles/_tabs.scss b/src/platform/core/common/styles/_tabs.scss
similarity index 100%
rename from platform/core/common/styles/_tabs.scss
rename to src/platform/core/common/styles/_tabs.scss
diff --git a/platform/core/common/styles/_tooltips.scss b/src/platform/core/common/styles/_tooltips.scss
similarity index 100%
rename from platform/core/common/styles/_tooltips.scss
rename to src/platform/core/common/styles/_tooltips.scss
diff --git a/platform/core/common/styles/fluid-design-system.scss b/src/platform/core/common/styles/fluid-design-system.scss
similarity index 100%
rename from platform/core/common/styles/fluid-design-system.scss
rename to src/platform/core/common/styles/fluid-design-system.scss
diff --git a/platform/core/dialogs/_fds-dialog-component.scss b/src/platform/core/dialogs/_fds-dialog-component.scss
similarity index 100%
rename from platform/core/dialogs/_fds-dialog-component.scss
rename to src/platform/core/dialogs/_fds-dialog-component.scss
diff --git a/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html b/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html
similarity index 100%
rename from platform/core/dialogs/confirm-dialog/confirm-dialog.component.html
rename to src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html
diff --git a/platform/core/dialogs/confirm-dialog/confirm-dialog.component.js b/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.js
similarity index 100%
rename from platform/core/dialogs/confirm-dialog/confirm-dialog.component.js
rename to src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.js
diff --git a/platform/core/dialogs/confirm-dialog/confirm-dialog.component.spec.js b/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.spec.js
similarity index 100%
rename from platform/core/dialogs/confirm-dialog/confirm-dialog.component.spec.js
rename to src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.spec.js
diff --git a/platform/core/dialogs/fds-dialog.component.html b/src/platform/core/dialogs/fds-dialog.component.html
similarity index 100%
rename from platform/core/dialogs/fds-dialog.component.html
rename to src/platform/core/dialogs/fds-dialog.component.html
diff --git a/platform/core/dialogs/fds-dialog.component.js b/src/platform/core/dialogs/fds-dialog.component.js
similarity index 76%
rename from platform/core/dialogs/fds-dialog.component.js
rename to src/platform/core/dialogs/fds-dialog.component.js
index e52bd5b..43eba47 100644
--- a/platform/core/dialogs/fds-dialog.component.js
+++ b/src/platform/core/dialogs/fds-dialog.component.js
@@ -17,21 +17,38 @@
var ngCore = require('@angular/core');
-var FdsDialogTitleDirective = new ngCore.Class({
- extends: ngCore.Directive({selector: 'fds-dialog-title'}),
- constructor: function () {
- }
-});
-var FdsDialogContentDirective = new ngCore.Class({
- extends: ngCore.Directive({selector: 'fds-dialog-content'}),
- constructor: function () {
- }
-});
-var FdsDialogActionsDirective = new ngCore.Class({
- extends: ngCore.Directive({selector: 'fds-dialog-actions'}),
- constructor: function () {
- }
-});
+function FdsDialogTitleDirective() {
+}
+
+FdsDialogTitleDirective.prototype = {
+ contstructor: FdsDialogTitleDirective
+}
+
+FdsDialogTitleDirective.decorators = [
+ { type: ngCore.Directive, args: [{ selector: 'fds-dialog-title' },] },
+];
+
+function FdsDialogContentDirective() {
+}
+
+FdsDialogContentDirective.prototype = {
+ contstructor: FdsDialogContentDirective
+}
+
+FdsDialogContentDirective.decorators = [
+ { type: ngCore.Directive, args: [{ selector: 'fds-dialog-content' },] },
+];
+
+function FdsDialogActionsDirective() {
+}
+
+FdsDialogActionsDirective.prototype = {
+ contstructor: FdsDialogActionsDirective
+}
+
+FdsDialogActionsDirective.decorators = [
+ { type: ngCore.Directive, args: [{ selector: 'fds-dialog-actions' },] },
+];
/**
* FdsDialogComponent constructor
diff --git a/platform/core/dialogs/fds-dialogs.component.spec.js b/src/platform/core/dialogs/fds-dialogs.component.spec.js
similarity index 100%
rename from platform/core/dialogs/fds-dialogs.component.spec.js
rename to src/platform/core/dialogs/fds-dialogs.component.spec.js
diff --git a/platform/core/dialogs/fds-dialogs.module.js b/src/platform/core/dialogs/fds-dialogs.module.js
similarity index 100%
rename from platform/core/dialogs/fds-dialogs.module.js
rename to src/platform/core/dialogs/fds-dialogs.module.js
diff --git a/platform/core/dialogs/services/dialog.service.js b/src/platform/core/dialogs/services/dialog.service.js
similarity index 87%
rename from platform/core/dialogs/services/dialog.service.js
rename to src/platform/core/dialogs/services/dialog.service.js
index 9bf1ee9..985baf5 100644
--- a/platform/core/dialogs/services/dialog.service.js
+++ b/src/platform/core/dialogs/services/dialog.service.js
@@ -19,26 +19,32 @@
var ngMaterial = require('@angular/material');
var FdsConfirmDialogComponent = require('@fluid-design-system/confirm-dialog-component');
-var IDialogConfig = new ngCore.Class({
- extends: ngMaterial.MatDialogConfig,
- constructor: function () {
- this.title = '';
- this.message = '';
- this.dialogRef = undefined;
- this.viewContainerRef = undefined;
- this.disableClose = true;
- }
-});
+function IDialogConfig() {
+ this.title = '';
+ this.message = '';
+ this.dialogRef = undefined;
+ this.viewContainerRef = undefined;
+ this.disableClose = true;
+}
-var IConfirmConfig = new ngCore.Class({
- extends: IDialogConfig,
- constructor: function () {
- this.acceptButton = 'ACCEPT';
- this.acceptButtonColor = 'fds-primary';
- this.cancelButton = 'CANCEL';
- this.cancelButtonColor = 'fds-secondary';
- }
-});
+IDialogConfig.prototype = {
+ contstructor: IDialogConfig
+}
+
+$.extend(IDialogConfig, ngMaterial.MatDialogConfig);
+
+function IConfirmConfig() {
+ this.acceptButton = 'ACCEPT';
+ this.acceptButtonColor = 'fds-primary';
+ this.cancelButton = 'CANCEL';
+ this.cancelButtonColor = 'fds-secondary';
+}
+
+IConfirmConfig.prototype = {
+ contstructor: IConfirmConfig
+}
+
+$.extend(IConfirmConfig, IDialogConfig);
function createConfig(config) {
var dialogConfig = new IConfirmConfig();
@@ -131,4 +137,4 @@
IDialogConfig: IDialogConfig,
IConfirmConfig: IConfirmConfig,
FdsDialogService: FdsDialogService
-};
\ No newline at end of file
+};
diff --git a/platform/core/fluid-design-system.module.js b/src/platform/core/fluid-design-system.module.js
similarity index 100%
rename from platform/core/fluid-design-system.module.js
rename to src/platform/core/fluid-design-system.module.js
diff --git a/platform/core/snackbars/coaster/_coaster.component.scss b/src/platform/core/snackbars/coaster/_coaster.component.scss
similarity index 100%
rename from platform/core/snackbars/coaster/_coaster.component.scss
rename to src/platform/core/snackbars/coaster/_coaster.component.scss
diff --git a/platform/core/snackbars/coaster/coaster.component.html b/src/platform/core/snackbars/coaster/coaster.component.html
similarity index 100%
rename from platform/core/snackbars/coaster/coaster.component.html
rename to src/platform/core/snackbars/coaster/coaster.component.html
diff --git a/platform/core/snackbars/coaster/coaster.component.js b/src/platform/core/snackbars/coaster/coaster.component.js
similarity index 100%
rename from platform/core/snackbars/coaster/coaster.component.js
rename to src/platform/core/snackbars/coaster/coaster.component.js
diff --git a/platform/core/snackbars/coaster/coaster.component.spec.js b/src/platform/core/snackbars/coaster/coaster.component.spec.js
similarity index 100%
rename from platform/core/snackbars/coaster/coaster.component.spec.js
rename to src/platform/core/snackbars/coaster/coaster.component.spec.js
diff --git a/platform/core/snackbars/fds-snackbar.component.html b/src/platform/core/snackbars/fds-snackbar.component.html
similarity index 100%
rename from platform/core/snackbars/fds-snackbar.component.html
rename to src/platform/core/snackbars/fds-snackbar.component.html
diff --git a/platform/core/snackbars/fds-snackbar.component.js b/src/platform/core/snackbars/fds-snackbar.component.js
similarity index 75%
rename from platform/core/snackbars/fds-snackbar.component.js
rename to src/platform/core/snackbars/fds-snackbar.component.js
index 88974b8..959f6dc 100644
--- a/platform/core/snackbars/fds-snackbar.component.js
+++ b/src/platform/core/snackbars/fds-snackbar.component.js
@@ -17,21 +17,38 @@
var ngCore = require('@angular/core');
-var FdsSnackBarTitleDirective = new ngCore.Class({
- extends: ngCore.Directive({selector: 'fds-snackbar-title'}),
- constructor: function () {
- }
-});
-var FdsSnackBarContentDirective = new ngCore.Class({
- extends: ngCore.Directive({selector: 'fds-snackbar-content'}),
- constructor: function () {
- }
-});
-var FdsSnackBarActionsDirective = new ngCore.Class({
- extends: ngCore.Directive({selector: 'fds-snackbar-actions'}),
- constructor: function () {
- }
-});
+function FdsSnackBarTitleDirective() {
+}
+
+FdsSnackBarTitleDirective.prototype = {
+ contstructor: FdsSnackBarTitleDirective
+}
+
+FdsSnackBarTitleDirective.decorators = [
+ { type: ngCore.Directive, args: [{ selector: 'fds-snackbar-title' },] },
+];
+
+function FdsSnackBarContentDirective() {
+}
+
+FdsSnackBarContentDirective.prototype = {
+ contstructor: FdsSnackBarContentDirective
+}
+
+FdsSnackBarContentDirective.decorators = [
+ { type: ngCore.Directive, args: [{ selector: 'fds-snackbar-content' },] },
+];
+
+function FdsSnackBarActionsDirective() {
+}
+
+FdsSnackBarActionsDirective.prototype = {
+ contstructor: FdsSnackBarActionsDirective
+}
+
+FdsSnackBarActionsDirective.decorators = [
+ { type: ngCore.Directive, args: [{ selector: 'fds-snackbar-actions' },] },
+];
/**
* FdsSnackBarComponent constructor
diff --git a/platform/core/snackbars/fds-snackbar.component.spec.js b/src/platform/core/snackbars/fds-snackbar.component.spec.js
similarity index 100%
rename from platform/core/snackbars/fds-snackbar.component.spec.js
rename to src/platform/core/snackbars/fds-snackbar.component.spec.js
diff --git a/platform/core/snackbars/fds-snackbars.module.js b/src/platform/core/snackbars/fds-snackbars.module.js
similarity index 100%
rename from platform/core/snackbars/fds-snackbars.module.js
rename to src/platform/core/snackbars/fds-snackbars.module.js
diff --git a/platform/core/snackbars/services/snackbar.service.js b/src/platform/core/snackbars/services/snackbar.service.js
similarity index 90%
rename from platform/core/snackbars/services/snackbar.service.js
rename to src/platform/core/snackbars/services/snackbar.service.js
index 433db11..e02e505 100644
--- a/platform/core/snackbars/services/snackbar.service.js
+++ b/src/platform/core/snackbars/services/snackbar.service.js
@@ -20,23 +20,29 @@
var FdsCoasterComponent = require('@fluid-design-system/coaster-component');
var $ = require('jquery');
-var ISnackBarConfig = new ngCore.Class({
- extends: ngMaterial.MatSnackBarConfig,
- constructor: function () {
- this.title = '';
- this.message = '';
- this.snackBarRef = undefined;
- this.viewContainerRef = undefined;
- }
-});
+function ISnackBarConfig() {
+ this.title = '';
+ this.message = '';
+ this.snackBarRef = undefined;
+ this.viewContainerRef = undefined;
+}
-var ICoasterConfig = new ngCore.Class({
- extends: ISnackBarConfig,
- constructor: function () {
- this.icon = '';
- this.color = '';
- }
-});
+ISnackBarConfig.prototype = {
+ contstructor: ISnackBarConfig
+}
+
+$.extend(ISnackBarConfig, ngMaterial.MatSnackBarConfig);
+
+function ICoasterConfig() {
+ this.icon = '';
+ this.color = '';
+}
+
+ICoasterConfig.prototype = {
+ contstructor: ICoasterConfig
+}
+
+$.extend(ICoasterConfig, ISnackBarConfig);
/**
* FdsSnackBarService constructor.
@@ -129,4 +135,4 @@
ISnackBarConfig: ISnackBarConfig,
ICoasterConfig: ICoasterConfig,
FdsSnackBarService: FdsSnackBarService
-};
\ No newline at end of file
+};
diff --git a/platform/core/theming/_all-theme.scss b/src/platform/core/theming/_all-theme.scss
similarity index 91%
rename from platform/core/theming/_all-theme.scss
rename to src/platform/core/theming/_all-theme.scss
index 66bd9f9..747ab8b 100644
--- a/platform/core/theming/_all-theme.scss
+++ b/src/platform/core/theming/_all-theme.scss
@@ -15,8 +15,8 @@
* limitations under the License.
*/
-@import '../../../../@angular/material/theming';
-@import '../../../../@covalent/core/theming/all-theme';
+@import '../../../node_modules/@angular/material/theming';
+@import '../../../node_modules/@covalent/core/theming/all-theme';
@import '../common/styles/buttons';
@import '../common/styles/expansionPanels';
@import '../common/styles/menus';
diff --git a/platform/systemjs.spec.config.js b/src/platform/systemjs.spec.config.js
similarity index 70%
rename from platform/systemjs.spec.config.js
rename to src/platform/systemjs.spec.config.js
index 2888d96..1f51a7a 100644
--- a/platform/systemjs.spec.config.js
+++ b/src/platform/systemjs.spec.config.js
@@ -40,7 +40,27 @@
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/flex-layout': 'npm:@angular/flex-layout/bundles/flex-layout.umd.js',
+ '@angular/flex-layout/core': 'npm:@angular/flex-layout/bundles/flex-layout-core.umd.js',
+ '@angular/flex-layout/extended': 'npm:@angular/flex-layout/bundles/flex-layout-extended.umd.js',
+ '@angular/flex-layout/flex': 'npm:@angular/flex-layout/bundles/flex-layout-flex.umd.js',
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+ '@angular/material/core': 'npm:@angular/material/bundles/material-core.umd.js',
+ '@angular/material/card': 'npm:@angular/material/bundles/material-card.umd.js',
+ '@angular/material/divider': 'npm:@angular/material/bundles/material-divider.umd.js',
+ '@angular/material/progress-bar': 'npm:@angular/material/bundles/material-progress-bar.umd.js',
+ '@angular/material/progress-spinner': 'npm:@angular/material/bundles/material-progress-spinner.umd.js',
+ '@angular/material/chips': 'npm:@angular/material/bundles/material-chips.umd.js',
+ '@angular/material/input': 'npm:@angular/material/bundles/material-input.umd.js',
+ '@angular/material/icon': 'npm:@angular/material/bundles/material-icon.umd.js',
+ '@angular/material/button': 'npm:@angular/material/bundles/material-button.umd.js',
+ '@angular/material/checkbox': 'npm:@angular/material/bundles/material-checkbox.umd.js',
+ '@angular/material/tooltip': 'npm:@angular/material/bundles/material-tooltip.umd.js',
+ '@angular/material/dialog': 'npm:@angular/material/bundles/material-dialog.umd.js',
+ '@angular/material/sidenav': 'npm:@angular/material/bundles/material-sidenav.umd.js',
+ '@angular/material/menu': 'npm:@angular/material/bundles/material-menu.umd.js',
+ '@angular/material/form-field': 'npm:@angular/material/bundles/material-form-field.umd.js',
+ '@angular/material/toolbar': 'npm:@angular/material/bundles/material-toolbar.umd.js',
+ '@angular/material/autocomplete': 'npm:@angular/material/bundles/material-autocomplete.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
'@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
@@ -62,16 +82,16 @@
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+ // needed to support gestures for angular material
+ 'hammerjs': 'npm:hammerjs/hammer.min.js',
+
// Covalent
- '@covalent/core': 'npm:@covalent/core/bundles/core.umd.min.js',
+ '@covalent/core': 'npm:@covalent/core/bundles/covalent-core.umd.min.js',
+ '@covalent/core/common': 'npm:@covalent/core/bundles/covalent-core-common.umd.min.js',
// other libraries
'rxjs': 'npm:rxjs',
'zone.js': 'npm:zone.js/dist/zone.js',
- // 'core-js': 'npm:core-js/client/shim.min.js',
- // 'superagent': 'npm:superagent/superagent.js',
- // 'querystring': 'npm:querystring',
- // 'tslib': 'npm:tslib/tslib.js',
// Fluid Design System
'@fluid-design-system/core': 'platform/core/fluid-design-system.module.js',
@@ -87,17 +107,6 @@
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
- app: {
- defaultExtension: 'js',
- meta: {
- './*.js': {
- loader: 'fds/systemjs-angular-loader.js'
- }
- }
- },
- 'fds/systemjs-angular-loader.js': {
- loader: false
- },
'rxjs': {
defaultExtension: 'js'
}
diff --git a/karma-test-shim.js b/test/karma-test-shim.js
similarity index 100%
rename from karma-test-shim.js
rename to test/karma-test-shim.js
diff --git a/karma.conf.js b/test/karma.conf.js
similarity index 95%
rename from karma.conf.js
rename to test/karma.conf.js
index 4b0f692..19f0125 100644
--- a/karma.conf.js
+++ b/test/karma.conf.js
@@ -91,9 +91,7 @@
// Proxied base paths for loading assets
proxies: {
// required for modules fetched by SystemJS
- '/base/fds/node_modules/': '/base/node_modules/',
- '/base/systemjs-angular-loader.js': '/base/platform/systemjs-angular-loader.js',
- '/base/fds/': '/base/platform/'
+ '/base/fds/node_modules/': '/base/node_modules/'
},
exclude: [],
