├── .circleci
    └── config.yml
├── .codeclimate.yml
├── .csslintrc
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .travis.yml
├── DEV_NOTES.md
├── LICENSE
├── README.md
├── circle.yml
├── config
    ├── tests
    │   ├── karma-test-shim.js
    │   └── karma.conf.js
    └── webpack
    │   ├── postcss.config.js
    │   ├── util.js
    │   ├── webpack.common.js
    │   ├── webpack.dev.js
    │   └── webpack.prod.js
├── gulpfile.js
├── package.json
├── scripts
    └── deploy.sh
├── src
    ├── components
    │   ├── datepicker
    │   │   ├── README.md
    │   │   ├── datepicker.component.html
    │   │   ├── datepicker.component.spec.ts
    │   │   ├── datepicker.component.ts
    │   │   ├── datepicker.scss
    │   │   ├── datepicker.service.spec.ts
    │   │   ├── datepicker.service.ts
    │   │   ├── index.ts
    │   │   └── package.json
    │   ├── expansion-panel
    │   │   ├── README.md
    │   │   ├── expansion-panel.component.ts
    │   │   ├── expansion-panel.scss
    │   │   ├── expansion-panel.spec.ts
    │   │   ├── index.ts
    │   │   └── package.json
    │   ├── fab-menu
    │   │   ├── README.md
    │   │   ├── fab-menu-item.html
    │   │   ├── fab-menu-item.scss
    │   │   ├── fab-menu-item.ts
    │   │   ├── fab-menu.html
    │   │   ├── fab-menu.scss
    │   │   ├── fab-menu.spec.ts
    │   │   ├── fab-menu.ts
    │   │   ├── index.ts
    │   │   └── package.json
    │   ├── popover
    │   │   ├── README.md
    │   │   ├── index.ts
    │   │   ├── package.json
    │   │   ├── popover.html
    │   │   ├── popover.scss
    │   │   ├── popover.spec.ts
    │   │   └── popover.ts
    │   ├── select
    │   │   ├── README.md
    │   │   ├── index.ts
    │   │   ├── keyboard.ts
    │   │   ├── option.html
    │   │   ├── option.ts
    │   │   ├── package.json
    │   │   ├── select.html
    │   │   ├── select.scss
    │   │   ├── select.spec.ts
    │   │   └── select.ts
    │   ├── system-config-spec.ts
    │   ├── tsconfig-ngc.json
    │   └── tsconfig-spec.json
    └── e2e-app
    │   ├── 404.html
    │   ├── app
    │       ├── app.component.html
    │       ├── app.component.scss
    │       ├── app.component.ts
    │       ├── app.module.ts
    │       ├── datepicker
    │       │   ├── datepicker.component.html
    │       │   └── datepicker.component.ts
    │       ├── expansion-panel
    │       │   ├── expansion-panel.component.html
    │       │   └── expansion-panel.component.ts
    │       ├── fab-menu
    │       │   ├── fab-menu-demo.component.html
    │       │   ├── fab-menu-demo.component.scss
    │       │   └── fab-menu-demo.component.ts
    │       ├── home.html
    │       ├── popover
    │       │   ├── popover.component.html
    │       │   └── popover.component.ts
    │       └── select
    │       │   ├── matchSorter.pipe.ts
    │       │   ├── select.component.html
    │       │   └── select.component.ts
    │   ├── css
    │       ├── prism.scss
    │       └── style.scss
    │   ├── index.hbs
    │   ├── main.ts
    │   ├── polyfills.ts
    │   ├── tsconfig.json
    │   └── vendor.ts
├── tools
    └── gulp
    │   ├── constants.ts
    │   ├── gulpfile.ts
    │   ├── tasks
    │       ├── build.ts
    │       ├── clean.ts
    │       ├── dist.ts
    │       └── test.ts
    │   └── tsconfig.json
├── tsconfig.json
├── webpack.config.js
└── yarn.lock


/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | jobs:
 3 |   build:
 4 |     docker:
 5 |       - image: circleci/node:10-stretch-browsers
 6 |         environment:
 7 |           CHROME_BIN: "/usr/bin/google-chrome"
 8 |     steps:
 9 |       - checkout
10 | 
11 |       - restore_cache:
12 |           name: Restore Yarn Package Cache
13 |           keys:
14 |             - yarn-packages-{{ .Branch }}-{{ checksum "yarn.lock" }}
15 | 
16 |       - run: yarn install
17 | 
18 |       - save_cache:
19 |           name: Save Yarn Package Cache
20 |           key: yarn-packages-{{ .Branch }}-{{ checksum "yarn.lock" }}
21 |           paths:
22 |             - node_modules/
23 | 
24 |       - run: yarn test
25 |         # create a build - should test the tooling to create dist build
26 |       - run: yarn build-dist


--------------------------------------------------------------------------------
/.codeclimate.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | engines:
 3 |   csslint:
 4 |     enabled: true
 5 |   duplication:
 6 |     enabled: true
 7 |     config:
 8 |       languages:
 9 |       - javascript
10 |   eslint:
11 |     enabled: true
12 |   fixme:
13 |     enabled: true
14 | ratings:
15 |   paths:
16 |   - "**.css"
17 |   - "**.inc"
18 |   - "**.js"
19 |   - "**.jsx"
20 |   - "**.module"
21 |   - "**.php"
22 |   - "**.py"
23 |   - "**.rb"
24 |   - "**.ts"
25 | exclude_paths:
26 | - config/
27 | - scripts
28 | - src/e2e-app


--------------------------------------------------------------------------------
/.csslintrc:
--------------------------------------------------------------------------------
1 | --exclude-exts=.min.css
2 | --ignore=adjoining-classes,box-model,ids,order-alphabetical,unqualified-attributes
3 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | **/*{.,-}min.js
2 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
  1 | ecmaFeatures:
  2 |   modules: true
  3 |   jsx: true
  4 | 
  5 | env:
  6 |   amd: true
  7 |   browser: true
  8 |   es6: true
  9 |   jquery: true
 10 |   node: true
 11 | 
 12 | # http://eslint.org/docs/rules/
 13 | rules:
 14 |   # Possible Errors
 15 |   comma-dangle: [2, never]
 16 |   no-cond-assign: 2
 17 |   no-console: 0
 18 |   no-constant-condition: 2
 19 |   no-control-regex: 2
 20 |   no-debugger: 2
 21 |   no-dupe-args: 2
 22 |   no-dupe-keys: 2
 23 |   no-duplicate-case: 2
 24 |   no-empty: 2
 25 |   no-empty-character-class: 2
 26 |   no-ex-assign: 2
 27 |   no-extra-boolean-cast: 2
 28 |   no-extra-parens: 0
 29 |   no-extra-semi: 2
 30 |   no-func-assign: 2
 31 |   no-inner-declarations: [2, functions]
 32 |   no-invalid-regexp: 2
 33 |   no-irregular-whitespace: 2
 34 |   no-negated-in-lhs: 2
 35 |   no-obj-calls: 2
 36 |   no-regex-spaces: 2
 37 |   no-sparse-arrays: 2
 38 |   no-unexpected-multiline: 2
 39 |   no-unreachable: 2
 40 |   use-isnan: 2
 41 |   valid-jsdoc: 0
 42 |   valid-typeof: 2
 43 | 
 44 |   # Best Practices
 45 |   accessor-pairs: 2
 46 |   block-scoped-var: 0
 47 |   complexity: [2, 6]
 48 |   consistent-return: 0
 49 |   curly: 0
 50 |   default-case: 0
 51 |   dot-location: 0
 52 |   dot-notation: 0
 53 |   eqeqeq: 2
 54 |   guard-for-in: 2
 55 |   no-alert: 2
 56 |   no-caller: 2
 57 |   no-case-declarations: 2
 58 |   no-div-regex: 2
 59 |   no-else-return: 0
 60 |   no-empty-label: 2
 61 |   no-empty-pattern: 2
 62 |   no-eq-null: 2
 63 |   no-eval: 2
 64 |   no-extend-native: 2
 65 |   no-extra-bind: 2
 66 |   no-fallthrough: 2
 67 |   no-floating-decimal: 0
 68 |   no-implicit-coercion: 0
 69 |   no-implied-eval: 2
 70 |   no-invalid-this: 0
 71 |   no-iterator: 2
 72 |   no-labels: 0
 73 |   no-lone-blocks: 2
 74 |   no-loop-func: 2
 75 |   no-magic-number: 0
 76 |   no-multi-spaces: 0
 77 |   no-multi-str: 0
 78 |   no-native-reassign: 2
 79 |   no-new-func: 2
 80 |   no-new-wrappers: 2
 81 |   no-new: 2
 82 |   no-octal-escape: 2
 83 |   no-octal: 2
 84 |   no-proto: 2
 85 |   no-redeclare: 2
 86 |   no-return-assign: 2
 87 |   no-script-url: 2
 88 |   no-self-compare: 2
 89 |   no-sequences: 0
 90 |   no-throw-literal: 0
 91 |   no-unused-expressions: 2
 92 |   no-useless-call: 2
 93 |   no-useless-concat: 2
 94 |   no-void: 2
 95 |   no-warning-comments: 0
 96 |   no-with: 2
 97 |   radix: 2
 98 |   vars-on-top: 0
 99 |   wrap-iife: 2
100 |   yoda: 0
101 | 
102 |   # Strict
103 |   strict: 0
104 | 
105 |   # Variables
106 |   init-declarations: 0
107 |   no-catch-shadow: 2
108 |   no-delete-var: 2
109 |   no-label-var: 2
110 |   no-shadow-restricted-names: 2
111 |   no-shadow: 0
112 |   no-undef-init: 2
113 |   no-undef: 0
114 |   no-undefined: 0
115 |   no-unused-vars: 0
116 |   no-use-before-define: 0
117 | 
118 |   # Node.js and CommonJS
119 |   callback-return: 2
120 |   global-require: 2
121 |   handle-callback-err: 2
122 |   no-mixed-requires: 0
123 |   no-new-require: 0
124 |   no-path-concat: 2
125 |   no-process-exit: 2
126 |   no-restricted-modules: 0
127 |   no-sync: 0
128 | 
129 |   # Stylistic Issues
130 |   array-bracket-spacing: 0
131 |   block-spacing: 0
132 |   brace-style: 0
133 |   camelcase: 0
134 |   comma-spacing: 0
135 |   comma-style: 0
136 |   computed-property-spacing: 0
137 |   consistent-this: 0
138 |   eol-last: 0
139 |   func-names: 0
140 |   func-style: 0
141 |   id-length: 0
142 |   id-match: 0
143 |   indent: 0
144 |   jsx-quotes: 0
145 |   key-spacing: 0
146 |   linebreak-style: 0
147 |   lines-around-comment: 0
148 |   max-depth: 0
149 |   max-len: 0
150 |   max-nested-callbacks: 0
151 |   max-params: 0
152 |   max-statements: [2, 30]
153 |   new-cap: 0
154 |   new-parens: 0
155 |   newline-after-var: 0
156 |   no-array-constructor: 0
157 |   no-bitwise: 0
158 |   no-continue: 0
159 |   no-inline-comments: 0
160 |   no-lonely-if: 0
161 |   no-mixed-spaces-and-tabs: 0
162 |   no-multiple-empty-lines: 0
163 |   no-negated-condition: 0
164 |   no-nested-ternary: 0
165 |   no-new-object: 0
166 |   no-plusplus: 0
167 |   no-restricted-syntax: 0
168 |   no-spaced-func: 0
169 |   no-ternary: 0
170 |   no-trailing-spaces: 0
171 |   no-underscore-dangle: 0
172 |   no-unneeded-ternary: 0
173 |   object-curly-spacing: 0
174 |   one-var: 0
175 |   operator-assignment: 0
176 |   operator-linebreak: 0
177 |   padded-blocks: 0
178 |   quote-props: 0
179 |   quotes: 0
180 |   require-jsdoc: 0
181 |   semi-spacing: 0
182 |   semi: 0
183 |   sort-vars: 0
184 |   space-after-keywords: 0
185 |   space-before-blocks: 0
186 |   space-before-function-paren: 0
187 |   space-before-keywords: 0
188 |   space-in-parens: 0
189 |   space-infix-ops: 0
190 |   space-return-throw-case: 0
191 |   space-unary-ops: 0
192 |   spaced-comment: 0
193 |   wrap-regex: 0
194 | 
195 |   # ECMAScript 6
196 |   arrow-body-style: 0
197 |   arrow-parens: 0
198 |   arrow-spacing: 0
199 |   constructor-super: 0
200 |   generator-star-spacing: 0
201 |   no-arrow-condition: 0
202 |   no-class-assign: 0
203 |   no-const-assign: 0
204 |   no-dupe-class-members: 0
205 |   no-this-before-super: 0
206 |   no-var: 0
207 |   object-shorthand: 0
208 |   prefer-arrow-callback: 0
209 |   prefer-const: 0
210 |   prefer-reflect: 0
211 |   prefer-spread: 0
212 |   prefer-template: 0
213 |   require-yield: 0
214 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # compiled output
 2 | /dist
 3 | /tmp
 4 | /dist-npm
 5 | 
 6 | # dependencies
 7 | /node_modules
 8 | /bower_components
 9 | 
10 | # IDEs and editors
11 | /.idea
12 | /.vscode
13 | /*.iml
14 | 
15 | # misc
16 | /.sass-cache
17 | /connect.lock
18 | /coverage
19 | npm-debug.log
20 | 
21 | # e2e
22 | /e2e/*.js
23 | /e2e/*.map
24 | 
25 | #System Files
26 | .DS_Store
27 | Thumbs.db
28 | /package-lock.json
29 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | sudo: true
 3 | dist: trusty
 4 | 
 5 | node_js:
 6 |   - '10.6.0'
 7 | 
 8 | branches:
 9 |   except:
10 |   - gh-pages
11 | 
12 | before_install:
13 |  - export CHROME_BIN=/usr/bin/google-chrome
14 |  - export DISPLAY=:99.0
15 |  - sh -e /etc/init.d/xvfb start
16 |  - sudo apt-get update
17 |  - sudo apt-get install -y libappindicator1 fonts-liberation
18 |  - wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
19 | 
20 | after_success:
21 |   # Send coverage data to Coveralls
22 |   - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
23 |   # send code coverage to codeclimate
24 |   - npm run codeclimate
25 |   # create a dist build to check the toolchain
26 |   - npm run build-dist
27 | 
28 | after_script:
29 | 


--------------------------------------------------------------------------------
/DEV_NOTES.md:
--------------------------------------------------------------------------------
1 | - the components are tested with a system.js configuration
2 | - the demo/e2e app is build with webpack
3 | => both widly used dev configurations are used (system.js and webpack)


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Michael Seemann
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | All packages from this project have been moved to https://github.com/mseemann/angular2-mdl. The npm package names are the same.
 2 | 
 3 | **This project is deprecated and is in read only mode.**
 4 | 
 5 | # @angular-mdl/*
 6 | Additional components for @angular-mdl/core that are not part of material design lite
 7 | 
 8 | * current angular version: 6
 9 | * current angular-mdl version: 6
10 | 
11 | [![Build Status](https://travis-ci.org/mseemann/angular2-mdl-ext.svg?branch=master)](https://travis-ci.org/mseemann/angular2-mdl-ext)
12 | [![Coverage Status](https://coveralls.io/repos/github/mseemann/angular2-mdl-ext/badge.svg?branch=master)](https://coveralls.io/github/mseemann/angular2-mdl-ext?branch=master)
13 | [![Code Climate](https://codeclimate.com/github/mseemann/angular2-mdl-ext/badges/gpa.svg)](https://codeclimate.com/github/mseemann/angular2-mdl-ext)
14 | [![dependencies Status](https://david-dm.org/mseemann/angular2-mdl-ext/status.svg)](https://david-dm.org/mseemann/angular2-mdl-ext)
15 | [![devDependencies Status](https://david-dm.org/mseemann/angular2-mdl-ext/dev-status.svg)](https://david-dm.org/mseemann/angular2-mdl-ext?type=dev)
16 | 
17 | ## The components
18 | 
19 | | Name | Provided By | Description | npm | documentation | status | demo
20 | | --- | --- | --- | --- | --- | --- | --- |
21 | | datepicker | [mseemann](https://github.com/mseemann) | a simple date picker | [![npm version](https://badge.fury.io/js/@angular-mdl%2Fdatepicker.svg)](https://www.npmjs.com/package/@angular-mdl/datepicker)| [readme](https://github.com/mseemann/angular2-mdl-ext/tree/master/src/components/datepicker) | experimental | [demo](http://mseemann.io/angular2-mdl-ext/datepicker)
22 | | expansion-panel | [abdulqadir93](https://github.com/abdulqadir93) | organise arbitrary content in an expansion panel | [![npm version](https://badge.fury.io/js/@angular-mdl%2Fexpansion-panel.svg)](https://www.npmjs.com/package/@angular-mdl/expansion-panel)| [readme](https://github.com/mseemann/angular2-mdl-ext/tree/master/src/components/expansion-panel) | experimental | [demo](http://mseemann.io/angular2-mdl-ext/expansion-panel)
23 | | fab-menu | [leojpod](https://github.com/leojpod) | a fab menu component | [![npm version](https://badge.fury.io/js/@angular-mdl%2Ffab-menu.svg)](https://www.npmjs.com/package/@angular-mdl/fab-menu)| [readme](https://github.com/mseemann/angular2-mdl-ext/tree/master/src/components/fab-menu) | experimental | [demo](http://mseemann.io/angular2-mdl-ext/fab-menu)
24 | | popover | [tb](https://github.com/tb) | popover with arbitrary content | [![npm version](https://badge.fury.io/js/%40angular-mdl%2Fpopover.svg)](https://www.npmjs.com/package/@angular-mdl/popover)| [readme](https://github.com/mseemann/angular2-mdl-ext/tree/master/src/components/popover) | experimental | [demo](http://mseemann.io/angular2-mdl-ext/popover)
25 | | select | [tb](https://github.com/tb) | a select box | [![npm version](https://badge.fury.io/js/%40angular-mdl%2Fselect.svg)](https://www.npmjs.com/package/@angular-mdl/select)| [readme](https://github.com/mseemann/angular2-mdl-ext/tree/master/src/components/select) | experimental | [demo](http://mseemann.io/angular2-mdl-ext/select)
26 | 
27 | 
28 | These components support AOT and TreeShaking!
29 | 
30 | ### How to use the components
31 | Install the components via npm. Please check out the individual readme for each component from the table above.
32 | 
33 | Starting with version 0.2.0 the components each have no css styles imported by default. You need to setup your build pipeline
34 | to include the scss files from each component you want to use. This makes it possible to configure the theming for
35 | the components you want to use.
36 | 
37 | If you are using webpack you may use the special webpack import syntax for node_modules:
38 | 
39 | ```
40 | @import '~@angular-mdl/core/scss/color-definitions';
41 | 
42 | $color-primary: $palette-blue-500;
43 | $color-primary-dark: $palette-blue-700;
44 | $color-accent: $palette-amber-A200;
45 | $color-primary-contrast: $color-dark-contrast;
46 | $color-accent-contrast: $color-dark-contrast;
47 | 
48 | @import '~@angular-mdl/core/src/scss-mdl/material-design-lite';
49 | 
50 | @import '~@angular-mdl/popover/popover';
51 | @import '~@angular-mdl/select/select';
52 | ```
53 | 
54 | Another way is to include each component folder in the search path for your scss preprocessor. An example for webpack:
55 | 
56 | ```
57 | sassLoader: {
58 | 	includePaths: [
59 | 		'node_modules/@angular-mdl/popover',
60 | 		'node_modules/@angular-mdl/select'
61 | 	]
62 | }
63 | ```
64 | 
65 | ### Development
66 | 
67 | * npm start - local dev server
68 | * npm build - build a production release
69 | * npm test - run the unit tests
70 | 
71 | The coverage report is stored under: coverage/coverage-remap/index.html
72 | 


--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
1 | machine:
2 |   node:
3 |     version: 5.4.1
4 | 
5 | dependencies:
6 |   pre:
7 |     - npm install -g npm@3.6.0


--------------------------------------------------------------------------------
/config/tests/karma-test-shim.js:
--------------------------------------------------------------------------------
 1 | /*global jasmine, __karma__, window*/
 2 | Error.stackTraceLimit = Infinity;
 3 | jasmine.DEFAULT_TIMEOUT_INTERVAL = 2000;
 4 | 
 5 | __karma__.loaded = function () {
 6 | };
 7 | 
 8 | var distPath = '/base/dist/';
 9 | 
10 | function isJsFile(path) {
11 | 	return path.slice(-3) == '.js';
12 | }
13 | 
14 | function isSpecFile(path) {
15 | 	return path.slice(-8) == '.spec.js';
16 | }
17 | 
18 | function isMaterialFile(path) {
19 | 	return isJsFile(path) && path.indexOf('vendor') == -1;
20 | }
21 | 
22 | var allSpecFiles = Object.keys(window.__karma__.files)
23 | 	.filter(isSpecFile)
24 | 	.filter(isMaterialFile);
25 | 
26 | // Load our SystemJS configuration.
27 | System.config({
28 | 	baseURL: distPath
29 | });
30 | 
31 | System.import('@angular-mdl/system-config-spec.js').then(function() {
32 | 	// Load and configure the TestComponentBuilder.
33 | 	return Promise.all([
34 |     System.import('@angular/core/testing'),
35 |     System.import('@angular/platform-browser-dynamic/testing')
36 | 	]).then(function (providers) {
37 | 		var testing = providers[0];
38 | 		var testingBrowser = providers[1];
39 | 
40 |     try{
41 |       testing.TestBed.initTestEnvironment(
42 |         testingBrowser.BrowserDynamicTestingModule,
43 |         testingBrowser.platformBrowserDynamicTesting());
44 |     } catch (e) {
45 |       console.log(e)
46 |     }
47 | 	});
48 | }).then(function() {
49 | 	// Finally, load all spec files.
50 | 	// This will run the tests directly.
51 | 	return Promise.all(
52 | 		allSpecFiles.map(function (moduleName) {
53 | 			return System.import(moduleName).then(function(module) {
54 | 				return module;
55 | 			});
56 | 		}));
57 | }).then(__karma__.start, __karma__.error);
58 | 


--------------------------------------------------------------------------------
/config/tests/karma.conf.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (config) {
 2 | 
 3 |   config.set({
 4 |     basePath: '../..',
 5 |     frameworks: ['jasmine'],
 6 |     plugins: [
 7 |       require('karma-jasmine'),
 8 |       require('karma-chrome-launcher'),
 9 |       require('karma-coverage'),
10 |       require('karma-spec-reporter')
11 |     ],
12 |     customLaunchers: {
13 |       // chrome setup for travis CI using chromium
14 |       Chrome_travis_ci: {
15 |         base: 'Chrome',
16 |         flags: ['--no-sandbox']
17 |       }
18 |     },
19 |     files: [
20 |       { pattern: 'dist/vendor/core-js/client/core.js', included: true, watched: false},
21 |       { pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false},
22 |       { pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false},
23 | 
24 |       { pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false},
25 |       { pattern: 'dist/vendor/zone.js/dist/long-stack-trace-zone.js', included: true, watched: false},
26 |       { pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false},
27 |       { pattern: 'dist/vendor/zone.js/dist/fake-async-test.js', included: true, watched: false},
28 |       { pattern: 'dist/vendor/zone.js/dist/sync-test.js', included: true, watched: false},
29 |       { pattern: 'dist/vendor/zone.js/dist/proxy.js', included: true, watched: false},
30 |       { pattern: 'dist/vendor/zone.js/dist/jasmine-patch.js', included: true, watched: false},
31 |       { pattern: 'config/tests/karma-test-shim.js', included: true, watched: true },
32 | 
33 |       { pattern: 'dist/vendor/**/*', included: false, watched: false },
34 | 
35 |       { pattern: 'dist/@angular-mdl/**/*', included: false, watched: true }
36 | 
37 |     ],
38 |     exclude: [
39 |       // Vendor packages might include spec files. We don't want to use those.
40 |       'dist/vendor/**/*.spec.js'
41 |     ],
42 |     preprocessors: {
43 |       'dist/@angular-mdl/**/!(*spec|*vendor).js': ['coverage']
44 |     },
45 |     coverageReporter: {
46 |       dir : 'coverage/',
47 |       reporters: [
48 |         { type: 'html' },
49 |         { type: 'lcov' },
50 |         { type: 'json',
51 |           subdir: '.',
52 |           file: 'coverage-final.json'
53 |         }
54 |       ]
55 |     },
56 |     reporters: ['spec', 'coverage'],
57 |     port: 9876,
58 |     colors: true,
59 |     logLevel: config.LOG_ERROR,
60 |     autoWatch: true,
61 |     browsers: ['Chrome'],
62 |     singleRun: false
63 |   });
64 | };
65 | 


--------------------------------------------------------------------------------
/config/webpack/postcss.config.js:
--------------------------------------------------------------------------------
1 | 
2 | module.exports = {
3 |     plugins: [
4 |         require('autoprefixer')({ browsers: ['last 3 versions', '> 1%'] }),
5 |     ],
6 | };


--------------------------------------------------------------------------------
/config/webpack/util.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var _root = path.resolve(__dirname, '../..');
3 | 
4 | function root(args) {
5 | 	args = Array.prototype.slice.call(arguments, 0);
6 | 	return path.join.apply(path, [_root].concat(args));
7 | }
8 | exports.root = root;
9 | 


--------------------------------------------------------------------------------
/config/webpack/webpack.common.js:
--------------------------------------------------------------------------------
  1 | var webpack = require('webpack');
  2 | var HtmlWebpackPlugin = require('html-webpack-plugin');
  3 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
  4 | var util = require('./util');
  5 | var path = require('path');
  6 | 
  7 | const CSS_LOADERS = [
  8 |     'raw-loader',
  9 |     {
 10 |         loader: 'postcss-loader',
 11 |         options: {
 12 |             sourceMap: true,
 13 |             config: {
 14 |                 path: path.resolve(__dirname, './postcss.config.js'),
 15 |             },
 16 |         },
 17 |     },
 18 |     'sass-loader'
 19 | ];
 20 | 
 21 | module.exports = {
 22 | 	entry: {
 23 | 		'polyfills': './src/e2e-app/polyfills.ts',
 24 | 		'vendor': './src/e2e-app/vendor.ts',
 25 | 		'app': './src/e2e-app/main.ts'
 26 | 	},
 27 | 
 28 | 	resolve: {
 29 | 		extensions: ['.js', '.ts'],
 30 | 		mainFields: ["module", "main", "browser"]
 31 | 	},
 32 | 
 33 | 	// avoid errors like Error: Can't resolve 'net' in '...angular2-mdl-ext/node_modules/debug'
 34 | 	node: {
 35 | 		fs: 'empty',
 36 | 		net: 'empty'
 37 | 	},
 38 | 
 39 | 	module: {
 40 | 		rules: [
 41 | 			{
 42 | 				enforce: 'pre',
 43 | 				test: /.ts$/,
 44 | 				loader: 'string-replace-loader',
 45 | 				options: {
 46 | 					search: 'moduleId: module.id,',
 47 | 					replace: '',
 48 | 					flags: 'g'
 49 | 				}
 50 | 			},
 51 | 			{
 52 | 				test: /\.ts$/,
 53 | 				exclude: [
 54 | 					/\.(spec)\.ts$/
 55 | 				],
 56 | 				use: [
 57 | 					{
 58 | 						loader: 'awesome-typescript-loader',
 59 | 						options: {
 60 | 							configFileName: './src/e2e-app/tsconfig.json'
 61 | 						}
 62 | 					},
 63 | 					{
 64 | 						loader: 'angular2-template-loader'
 65 | 					}
 66 | 				]
 67 | 			},
 68 | 			{
 69 | 				test: /\.html$/,
 70 | 				loader: 'html-loader'
 71 | 			},
 72 | 			{
 73 | 				test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
 74 | 				loader: 'file-loader',
 75 | 				options: {
 76 | 					name: 'assets/[name].[hash].[ext]'
 77 | 				}
 78 | 			},
 79 | 			{
 80 | 				test: /\.scss$/,
 81 | 				exclude: [util.root('src', 'e2e-app', 'app'), util.root('src', 'components')],
 82 | 				use: ExtractTextPlugin.extract({
 83 | 					use: CSS_LOADERS,
 84 | 					// use style-loader in development
 85 | 					fallback: "style-loader"
 86 | 				})
 87 | 			},
 88 | 			{
 89 | 				test: /\.scss$/,
 90 | 				include: [util.root('src', 'e2e-app', 'app'), util.root('src', 'components')],
 91 | 				loaders: CSS_LOADERS
 92 | 			},
 93 | 			{
 94 | 				test: /\.hbs$/,
 95 | 				loader: 'handlebars-loader'
 96 | 			}
 97 | 		]
 98 | 	},
 99 |     optimization: {
100 | 		splitChunks: {
101 | 			// ['app', 'vendor', 'polyfills']
102 | 		}
103 | 	},
104 | 	plugins: [
105 | 		// avoid: WARNING in ./~/@angular/core/@angular/core.es5.js
106 | 		// 3702:272-293 Critical dependency: the request of a dependency is an expression
107 | 		new webpack.ContextReplacementPlugin(
108 | 			// The (\\|\/) piece accounts for path separators in *nix and Windows
109 | 			/@angular(\\|\/)core(\\|\/)fesm5/,
110 | 			util.root('src') // location of your src
111 | 		),
112 | 		new HtmlWebpackPlugin({
113 | 			template: '!!handlebars-loader!src/e2e-app/index.hbs',
114 | 			baseUrl: process.env.NODE_ENV == 'production' ? '/angular2-mdl-ext/' : '/',
115 | 			production: process.env.NODE_ENV == 'production' ? true : false
116 | 		})
117 | 	]
118 | };
119 | 


--------------------------------------------------------------------------------
/config/webpack/webpack.dev.js:
--------------------------------------------------------------------------------
 1 | var webpackMerge = require('webpack-merge');
 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 3 | var commonConfig = require('./webpack.common.js');
 4 | var util = require('./util');
 5 | 
 6 | module.exports = webpackMerge(commonConfig, {
 7 | 	devtool: 'cheap-module-eval-source-map',
 8 | 	mode: 'development',
 9 | 	output: {
10 | 		path: util.root('dist'),
11 | 		filename: '[name].js',
12 | 		chunkFilename: '[id].chunk.js'
13 | 	},
14 | 
15 | 	plugins: [
16 | 		new ExtractTextPlugin('[name].css')
17 | 	],
18 | 
19 | 	devServer: {
20 | 		historyApiFallback: true,
21 | 		stats: 'minimal',
22 | 		port: 4200
23 | 	}
24 | });
25 | 


--------------------------------------------------------------------------------
/config/webpack/webpack.prod.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var webpackMerge = require('webpack-merge');
 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 | var CopyWebpackPlugin = require('copy-webpack-plugin');
 5 | var commonConfig = require('./webpack.common.js');
 6 | var util = require('./util');
 7 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 8 | 
 9 | const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
10 | 
11 | module.exports = webpackMerge(commonConfig, {
12 | 	devtool: 'source-map',
13 | 	mode: 'production',
14 | 	output: {
15 | 		path: util.root('dist'),
16 | 		publicPath: '',
17 | 		filename: '[name].[hash].js',
18 | 		chunkFilename: '[id].[hash].chunk.js'
19 | 	},
20 |     optimization: {
21 |         minimizer: [
22 |         	new UglifyJsPlugin({
23 | 				cache: true,
24 | 				parallel: true,
25 | 				uglifyOptions: {
26 | 					compress: true,
27 | 					ecma: 5,
28 | 					mangle: true
29 | 				}
30 | 			})
31 | 		]
32 |     },
33 | 	plugins: [
34 | 		new CopyWebpackPlugin([{ from: util.root('src', 'e2e-app', '404.html') }], {copyUnmodified: true}),
35 | 		new webpack.NoEmitOnErrorsPlugin(),
36 | 		new ExtractTextPlugin('[name].[hash].css'),
37 | 		new webpack.DefinePlugin({
38 | 			'process.env': {
39 | 				'ENV': JSON.stringify(ENV)
40 | 			}
41 | 		})
42 | 	]
43 | });
44 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // Register TS compilation.
 6 | require('ts-node').register({
 7 |   project: path.join(__dirname, 'tools/gulp/tsconfig.json')
 8 | });
 9 | 
10 | require('./tools/gulp/gulpfile');
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "angular2-mdl-ext",
  3 |   "version": "0.0.0",
  4 |   "description": "Additional components for angular2-mdl that are not part of material design lite",
  5 |   "scripts": {
  6 |     "start": "webpack-dev-server --inline --progress --host 0.0.0.0",
  7 |     "test": "gulp test:single-run",
  8 |     "dist": "gulp dist",
  9 |     "build-dist": "gulp dist:build",
 10 |     "pre-commit": "npm run test && npm run build-dist",
 11 |     "posttest": "remap-istanbul -i coverage/coverage-final.json -o coverage/coverage-mapped.json -t lcovonly -o coverage/lcov.info; remap-istanbul -i coverage/coverage-final.json -o coverage/coverage-mapped.json -t html -o coverage/coverage-remap",
 12 |     "gulp": "gulp",
 13 |     "build": "rimraf dist && cross-env NODE_ENV=production webpack --config config/webpack/webpack.prod.js --progress --profile --bail",
 14 |     "codeclimate": "CODECLIMATE_REPO_TOKEN=162088e65c68b91563b5ca8e31de5cd5706ae99f4b8c8e76ed0cf4357170bec1 codeclimate-test-reporter < coverage/lcov.info",
 15 |     "deploy-gh-pages": "npm run build && ./scripts/deploy.sh --message \"Deploy gh-pages from commit $(git rev-parse HEAD)  [ci skip]\" -n"
 16 |   },
 17 |   "repository": {
 18 |     "type": "git",
 19 |     "url": "git+https://github.com/mseemann/angular2-mdl-ext.git"
 20 |   },
 21 |   "dependencies": {
 22 |     "@angular-mdl/core": "6.0.1",
 23 |     "@angular/animations": "6.1.8",
 24 |     "@angular/common": "6.1.8",
 25 |     "@angular/compiler": "6.1.8",
 26 |     "@angular/core": "6.1.8",
 27 |     "@angular/forms": "6.1.8",
 28 |     "@angular/http": "6.1.8",
 29 |     "@angular/platform-browser": "6.1.8",
 30 |     "@angular/platform-browser-dynamic": "6.1.8",
 31 |     "@angular/router": "6.1.8",
 32 |     "@mseemann/prism": "0.0.1",
 33 |     "core-js": "2.5.7",
 34 |     "custom-event-polyfill": "^1.0.0",
 35 |     "match-sorter": "2.3.0",
 36 |     "moment": "^2.22.0",
 37 |     "rxjs": "6.2.2",
 38 |     "systemjs": "0.21.5",
 39 |     "zone.js": "0.8.26"
 40 |   },
 41 |   "devDependencies": {
 42 |     "@angular/compiler-cli": "6.1.8",
 43 |     "@angular/platform-server": "6.1.8",
 44 |     "@types/chai": "4.1.4",
 45 |     "@types/core-js": "2.5.0",
 46 |     "@types/gulp": "4.0.3",
 47 |     "@types/jasmine": "2.8.9",
 48 |     "@types/merge2": "1.1.1",
 49 |     "@types/node": "10.12.0",
 50 |     "angular2-template-loader": "^0.6.2",
 51 |     "awesome-typescript-loader": "5.2.1",
 52 |     "codeclimate-test-reporter": "0.5.1",
 53 |     "copy-webpack-plugin": "^4.5.2",
 54 |     "coveralls": "3.0.1",
 55 |     "cross-env": "5.2.0",
 56 |     "css-loader": "1.0.0",
 57 |     "extract-text-webpack-plugin": "4.0.0-beta.0",
 58 |     "glob": "7.1.3",
 59 |     "gulp": "3.9.1",
 60 |     "gulp-autoprefixer": "6.0.0",
 61 |     "gulp-clean": "0.3.2",
 62 |     "gulp-clean-css": "3.10.0",
 63 |     "gulp-print": "2.0.1",
 64 |     "gulp-sass": "4.0.2",
 65 |     "gulp-sourcemaps": "^2.6.4",
 66 |     "gulp-string-replace": "1.1.2",
 67 |     "gulp-typescript": "^4.0.2",
 68 |     "handlebars-loader": "^1.7.0",
 69 |     "html-loader": "^0.5.5",
 70 |     "html-webpack-plugin": "^3.2.0",
 71 |     "jasmine-core": "2.8.0",
 72 |     "jasmine-spec-reporter": "4.2.1",
 73 |     "karma": "3.0.0",
 74 |     "karma-chrome-launcher": "2.2.0",
 75 |     "karma-cli": "1.0.1",
 76 |     "karma-coverage": "1.1.2",
 77 |     "karma-firefox-launcher": "^1.0.1",
 78 |     "karma-jasmine": "1.1.0",
 79 |     "karma-remap-istanbul": "0.6.0",
 80 |     "karma-spec-reporter": "0.0.31",
 81 |     "merge2": "1.2.3",
 82 |     "node-sass": "4.9.4",
 83 |     "postcss-loader": "3.0.0",
 84 |     "raw-loader": "0.5.1",
 85 |     "remap-istanbul": "0.12.0",
 86 |     "rimraf": "2.6.2",
 87 |     "run-sequence": "2.2.1",
 88 |     "sass-loader": "7.1.0",
 89 |     "string-replace-loader": "1.3.0",
 90 |     "style-loader": "0.23.1",
 91 |     "ts-helpers": "^1.1.2",
 92 |     "ts-node": "^7.0.0",
 93 |     "tslint": "5.8.0",
 94 |     "typescript": "2.7.2",
 95 |     "webpack": "4.22.0",
 96 |     "webpack-cli": "^3.0.8",
 97 |     "webpack-dev-server": "3.1.9",
 98 |     "webpack-merge": "^4.1.3"
 99 |   },
100 |   "keywords": [
101 |     "angular2",
102 |     "material design lite"
103 |   ],
104 |   "author": "michael seemann",
105 |   "license": "MIT",
106 |   "bugs": {
107 |     "url": "https://github.com/mseemann/angular2-mdl-ext/issues"
108 |   },
109 |   "homepage": "https://github.com/mseemann/angular2-mdl-ext#readme"
110 | }
111 | 


--------------------------------------------------------------------------------
/scripts/deploy.sh:
--------------------------------------------------------------------------------
  1 | #!/bin/bash
  2 | set -o errexit #abort if any command fails
  3 | me=$(basename "$0")
  4 | 
  5 | help_message="\
  6 | Usage: $me [-c FILE] [<options>]
  7 | Deploy generated files to a git branch.
  8 | 
  9 | Options:
 10 | 
 11 |   -h, --help               Show this help information.
 12 |   -v, --verbose            Increase verbosity. Useful for debugging.
 13 |   -e, --allow-empty        Allow deployment of an empty directory.
 14 |   -m, --message MESSAGE    Specify the message used when committing on the
 15 |                            deploy branch.
 16 |   -n, --no-hash            Don't append the source commit's hash to the deploy
 17 |                            commit's message.
 18 |   -c, --config-file PATH   Override default & environment variables' values
 19 |                            with those in set in the file at 'PATH'. Must be the
 20 |                            first option specified.
 21 | 
 22 | Variables:
 23 | 
 24 |   GIT_DEPLOY_DIR      Folder path containing the files to deploy.
 25 |   GIT_DEPLOY_BRANCH   Commit deployable files to this branch.
 26 |   GIT_DEPLOY_REPO     Push the deploy branch to this repository.
 27 | 
 28 | These variables have default values defined in the script. The defaults can be
 29 | overridden by environment variables. Any environment variables are overridden
 30 | by values set in a '.env' file (if it exists), and in turn by those set in a
 31 | file specified by the '--config-file' option."
 32 | 
 33 | parse_args() {
 34 | 	# Set args from a local environment file.
 35 | 	if [ -e ".env" ]; then
 36 | 		source .env
 37 | 	fi
 38 | 
 39 | 	# Set args from file specified on the command-line.
 40 | 	if [[ $1 = "-c" || $1 = "--config-file" ]]; then
 41 | 		source "$2"
 42 | 		shift 2
 43 | 	fi
 44 | 
 45 | 	# Parse arg flags
 46 | 	# If something is exposed as an environment variable, set/overwrite it
 47 | 	# here. Otherwise, set/overwrite the internal variable instead.
 48 | 	while : ; do
 49 | 		if [[ $1 = "-h" || $1 = "--help" ]]; then
 50 | 			echo "$help_message"
 51 | 			return 0
 52 | 		elif [[ $1 = "-v" || $1 = "--verbose" ]]; then
 53 | 			verbose=true
 54 | 			shift
 55 | 		elif [[ $1 = "-e" || $1 = "--allow-empty" ]]; then
 56 | 			allow_empty=true
 57 | 			shift
 58 | 		elif [[ ( $1 = "-m" || $1 = "--message" ) && -n $2 ]]; then
 59 | 			commit_message=$2
 60 | 			shift 2
 61 | 		elif [[ $1 = "-n" || $1 = "--no-hash" ]]; then
 62 | 			GIT_DEPLOY_APPEND_HASH=false
 63 | 			shift
 64 | 		else
 65 | 			break
 66 | 		fi
 67 | 	done
 68 | 
 69 | 	# Set internal option vars from the environment and arg flags. All internal
 70 | 	# vars should be declared here, with sane defaults if applicable.
 71 | 
 72 | 	# Source directory & target branch.
 73 | 	deploy_directory=${GIT_DEPLOY_DIR:-dist}
 74 | 	deploy_branch=${GIT_DEPLOY_BRANCH:-gh-pages}
 75 | 
 76 | 	#if no user identity is already set in the current git environment, use this:
 77 | 	default_username=${GIT_DEPLOY_USERNAME:-deploy.sh}
 78 | 	default_email=${GIT_DEPLOY_EMAIL:-}
 79 | 
 80 | 	#repository to deploy to. must be readable and writable.
 81 | 	repo=${GIT_DEPLOY_REPO:-origin}
 82 | 
 83 | 	#append commit hash to the end of message by default
 84 | 	append_hash=${GIT_DEPLOY_APPEND_HASH:-true}
 85 | }
 86 | 
 87 | main() {
 88 | 	parse_args "$@"
 89 | 
 90 | 	enable_expanded_output
 91 | 
 92 | 	if ! git diff --exit-code --quiet --cached; then
 93 | 		echo Aborting due to uncommitted changes in the index >&2
 94 | 		return 1
 95 | 	fi
 96 | 
 97 | 	commit_title=`git log -n 1 --format="%s" HEAD`
 98 | 	commit_hash=` git log -n 1 --format="%H" HEAD`
 99 | 
100 | 	#default commit message uses last title if a custom one is not supplied
101 | 	if [[ -z $commit_message ]]; then
102 | 		commit_message="publish: $commit_title"
103 | 	fi
104 | 
105 | 	#append hash to commit message unless no hash flag was found
106 | 	if [ $append_hash = true ]; then
107 | 		commit_message="$commit_message"$'\n\n'"generated from commit $commit_hash"
108 | 	fi
109 | 
110 | 	previous_branch=`git rev-parse --abbrev-ref HEAD`
111 | 
112 | 	if [ ! -d "$deploy_directory" ]; then
113 | 		echo "Deploy directory '$deploy_directory' does not exist. Aborting." >&2
114 | 		return 1
115 | 	fi
116 | 
117 | 	# must use short form of flag in ls for compatibility with OS X and BSD
118 | 	if [[ -z `ls -A "$deploy_directory" 2> /dev/null` && -z $allow_empty ]]; then
119 | 		echo "Deploy directory '$deploy_directory' is empty. Aborting. If you're sure you want to deploy an empty tree, use the --allow-empty / -e flag." >&2
120 | 		return 1
121 | 	fi
122 | 
123 | 	if git ls-remote --exit-code $repo "refs/heads/$deploy_branch" ; then
124 | 		# deploy_branch exists in $repo; make sure we have the latest version
125 | 
126 | 		disable_expanded_output
127 | 		git fetch --force $repo $deploy_branch:$deploy_branch
128 | 		enable_expanded_output
129 | 	fi
130 | 
131 | 	# check if deploy_branch exists locally
132 | 	if git show-ref --verify --quiet "refs/heads/$deploy_branch"
133 | 	then incremental_deploy
134 | 	else initial_deploy
135 | 	fi
136 | 
137 | 	restore_head
138 | }
139 | 
140 | initial_deploy() {
141 | 	git --work-tree "$deploy_directory" checkout --orphan $deploy_branch
142 | 	git --work-tree "$deploy_directory" add --all
143 | 	commit+push
144 | }
145 | 
146 | incremental_deploy() {
147 | 	#make deploy_branch the current branch
148 | 	git symbolic-ref HEAD refs/heads/$deploy_branch
149 | 	#put the previously committed contents of deploy_branch into the index
150 | 	git --work-tree "$deploy_directory" reset --mixed --quiet
151 | 	git --work-tree "$deploy_directory" add --all
152 | 
153 | 	set +o errexit
154 | 	diff=$(git --work-tree "$deploy_directory" diff --exit-code --quiet HEAD --)$?
155 | 	set -o errexit
156 | 	case $diff in
157 | 		0) echo No changes to files in $deploy_directory. Skipping commit.;;
158 | 		1) commit+push;;
159 | 		*)
160 | 			echo git diff exited with code $diff. Aborting. Staying on branch $deploy_branch so you can debug. To switch back to master, use: git symbolic-ref HEAD refs/heads/master && git reset --mixed >&2
161 | 			return $diff
162 | 			;;
163 | 	esac
164 | }
165 | 
166 | commit+push() {
167 | 	set_user_id
168 | 	git --work-tree "$deploy_directory" commit -m "$commit_message"
169 | 
170 | 	disable_expanded_output
171 | 	#--quiet is important here to avoid outputting the repo URL, which may contain a secret token
172 | 	git push --quiet $repo $deploy_branch
173 | 	enable_expanded_output
174 | }
175 | 
176 | #echo expanded commands as they are executed (for debugging)
177 | enable_expanded_output() {
178 | 	if [ $verbose ]; then
179 | 		set -o xtrace
180 | 		set +o verbose
181 | 	fi
182 | }
183 | 
184 | #this is used to avoid outputting the repo URL, which may contain a secret token
185 | disable_expanded_output() {
186 | 	if [ $verbose ]; then
187 | 		set +o xtrace
188 | 		set -o verbose
189 | 	fi
190 | }
191 | 
192 | set_user_id() {
193 | 	if [[ -z `git config user.name` ]]; then
194 | 		git config user.name "$default_username"
195 | 	fi
196 | 	if [[ -z `git config user.email` ]]; then
197 | 		git config user.email "$default_email"
198 | 	fi
199 | }
200 | 
201 | restore_head() {
202 | 	if [[ $previous_branch = "HEAD" ]]; then
203 | 		#we weren't on any branch before, so just set HEAD back to the commit it was on
204 | 		git update-ref --no-deref HEAD $commit_hash $deploy_branch
205 | 	else
206 | 		git symbolic-ref HEAD refs/heads/$previous_branch
207 | 	fi
208 | 
209 | 	git reset --mixed
210 | }
211 | 
212 | filter() {
213 | 	sed -e "s|$repo|\$repo|g"
214 | }
215 | 
216 | sanitize() {
217 | 	"$@" 2> >(filter 1>&2) | filter
218 | }
219 | 
220 | [[ $1 = --source-only ]] || main "$@"


--------------------------------------------------------------------------------
/src/components/datepicker/README.md:
--------------------------------------------------------------------------------
 1 | # DatePicker
 2 | 
 3 | ### Installing
 4 | 
 5 | Install the package and moment!
 6 | 
 7 |     npm i --save @angular-mdl/datepicker
 8 |     npm i --save moment
 9 | 
10 | import the MdlDatePickerModule and add it to your app.module imports:
11 |     
12 |     import { MdlDatePickerModule } from '@angular-mdl/datepicker';
13 | 
14 | import the scss file
15 | 
16 |     @import '~@angular-mdl/datepicker/datepicker';
17 |     
18 | ### Usage & API
19 | 
20 |     Visit [demo] for usage examples and API summary.
21 |     [demo]: http://mseemann.io/angular2-mdl-ext/datepicker
22 | 


--------------------------------------------------------------------------------
/src/components/datepicker/datepicker.component.html:
--------------------------------------------------------------------------------
 1 | <div class="mdl-datepicker-header">
 2 |   <div class="mdl-datepicker-header-year">{{mDate.format('YYYY')}}</div>
 3 |   <h3 class="mdl-datepicker-header-day-month">{{mDate.format('ddd, MMM DD')}}</h3>
 4 | </div>
 5 | 
 6 | <div class="mdl-dialog__content">
 7 |   <div class="mdl-datepicker-month-navigation-buttons">
 8 |     <button [disabled]="!prevEnabled" (click)="prevMonth()" class="mdl-datepicker-prev-month" mdl-button mdl-button-type="icon"><mdl-icon>keyboard_arrow_left</mdl-icon></button>
 9 |     <button [disabled]="!nextEnabled" (click)="nextMonth()" class="mdl-datepicker-next-month" mdl-button mdl-button-type="icon"><mdl-icon>keyboard_arrow_right</mdl-icon></button>
10 |   </div>
11 |   <div class="mdl-datepicker-month">
12 |     <div class="mdl-datepicker-month-title">{{mCurrentMonth.format('MMMM YYYY')}}</div>
13 |     <div class="mdl-datepicker-weekdays">
14 |        <div class="mdl-datepicker-weekday" *ngFor="let wd of monthGridWeekDays">{{wd}}</div>
15 |     </div>
16 |     <div class="mdl-datepicker-monthgrid">
17 | 
18 |       <div class="mdl-datepicker-weekdays" *ngFor="let week of monthGridDays">
19 |         <div class="mdl-datepicker-weekday"
20 |              *ngFor="let dayInfo of week.days">
21 |           <button
22 |                   [disabled]="!dayInfo.isCurrentMonth"
23 |                   mdl-button
24 |                   mdl-ripple
25 |                   mdl-button
26 |                   class="day"
27 |                   [ngClass]="{'actual': isActualDate(dayInfo.day)}"
28 |                   (click)="setCurrentDay(dayInfo.day)"
29 |           >{{dayInfo.day.date()}}</button>
30 |         </div>
31 |       </div>
32 | 
33 |     </div>
34 |   </div>
35 | 
36 | </div>
37 | <div class="mdl-dialog__actions">
38 |   <button #okButton
39 |           mdl-button mdl-colored="primary"
40 |           type="button"
41 |           (click)="onOk()"
42 |           class="close mdl-datepicker-ok-button">{{okLabel}}</button>
43 |   <button
44 |           mdl-button mdl-colored="primary"
45 |           type="button"
46 |           (click)="onCancel()"
47 |           class="mdl-datepicker-cancel-button">{{cancelLabel}}</button>
48 | </div>


--------------------------------------------------------------------------------
/src/components/datepicker/datepicker.component.spec.ts:
--------------------------------------------------------------------------------
  1 | 
  2 | import { CURRENT_DATE, DATEPICKER_CONFIG, DatePickerDialogComponent } from './datepicker.component';
  3 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  4 | import { CommonModule } from '@angular/common';
  5 | import {
  6 |   MdlButtonModule, MdlDialogModule, MdlDialogReference, MdlIconModule,
  7 |   MdlRippleModule
  8 | } from '@angular-mdl/core';
  9 | import { Subject } from 'rxjs';
 10 | import * as moment from 'moment';
 11 | 
 12 | class MdlDialogMockReference {
 13 | 
 14 |     onVisible() {
 15 |         return new Subject<any>().asObservable();
 16 |     }
 17 | 
 18 |     hide(date: Date) {}
 19 | }
 20 | 
 21 | describe('DatePickerDialogComponent', () => {
 22 | 
 23 | 
 24 |     let fixture: ComponentFixture<DatePickerDialogComponent>;
 25 | 
 26 |     beforeEach(async(() => {
 27 |         TestBed.configureTestingModule({
 28 |             imports: [
 29 |                 CommonModule,
 30 |                 MdlButtonModule,
 31 |                 MdlIconModule,
 32 |                 MdlRippleModule,
 33 |                 MdlDialogModule.forRoot()
 34 |             ],
 35 |             declarations: [DatePickerDialogComponent],
 36 |             providers: [
 37 |                 { provide: MdlDialogReference, useClass: MdlDialogMockReference },
 38 |                 { provide: CURRENT_DATE, useValue: null},
 39 |                 { provide: DATEPICKER_CONFIG, useValue: {}}
 40 |             ]
 41 |         });
 42 | 
 43 |         TestBed.compileComponents().then( () => {
 44 |             fixture = TestBed.createComponent(DatePickerDialogComponent);
 45 |             fixture.detectChanges();
 46 |         });
 47 |     }));
 48 | 
 49 |     it('should instantiate the component', async(() => {
 50 |         expect(fixture).toBeDefined();
 51 |     }));
 52 | 
 53 |     it('should call hide with null on cancel', async(() => {
 54 |         let dialogRef: MdlDialogReference = TestBed.get(MdlDialogReference);
 55 |         spyOn(dialogRef, 'hide');
 56 |         fixture.componentInstance.onCancel();
 57 |         expect(dialogRef.hide).toHaveBeenCalledWith(null);
 58 |     }));
 59 | 
 60 |     it('should call hide with null on esc', async(() => {
 61 |         let dialogRef: MdlDialogReference = TestBed.get(MdlDialogReference);
 62 |         spyOn(dialogRef, 'hide');
 63 |         fixture.componentInstance.onEsc();
 64 |         expect(dialogRef.hide).toHaveBeenCalledWith(null);
 65 |     }));
 66 | 
 67 |     it('should call hide with actual date on ok', async(() => {
 68 |         let dialogRef: MdlDialogReference = TestBed.get(MdlDialogReference);
 69 |         spyOn(dialogRef, 'hide');
 70 |         fixture.componentInstance.onOk();
 71 |         expect(dialogRef.hide).toHaveBeenCalledWith(fixture.componentInstance.mDate.toDate());
 72 |     }));
 73 | 
 74 |     it('should show the current date - because we did not provide a date', async(() => {
 75 |         expect(fixture.componentInstance.mDate.isSame(moment(), 'day')).toBeTruthy();
 76 |         expect(fixture.componentInstance.mCurrentMonth.isSame(fixture.componentInstance.mDate, 'day')).toBeTruthy();
 77 |     }));
 78 | 
 79 |     it('should be possible to set a specific date', async(() => {
 80 |         fixture.componentInstance.setCurrentDay(moment('2017-01-01'));
 81 |         expect(fixture.componentInstance.mDate.isSame(moment('2017-01-01'), 'day')).toBeTruthy();
 82 |     }));
 83 | 
 84 |     it('should be possible to go to the next month', async(() => {
 85 |         fixture.componentInstance.mCurrentMonth = moment('2017-01-01');
 86 |         fixture.componentInstance.nextMonth();
 87 | 
 88 |         expect(fixture.componentInstance.mCurrentMonth.isSame(moment('2017-02-01'), 'month')).toBeTruthy();
 89 | 
 90 |         // but this should not change the actual date
 91 |         expect(fixture.componentInstance.mDate.isSame(moment(), 'day')).toBeTruthy();
 92 |     }));
 93 | 
 94 |     it('should be possible to go to the prev month', async(() => {
 95 |         fixture.componentInstance.mCurrentMonth = moment('2017-01-01');
 96 |         fixture.componentInstance.prevMonth();
 97 | 
 98 |         expect(fixture.componentInstance.mCurrentMonth.isSame(moment('2016-12-01'), 'month')).toBeTruthy();
 99 | 
100 |         // but this should not change the actual date
101 |         expect(fixture.componentInstance.mDate.isSame(moment(), 'day')).toBeTruthy();
102 |     }));
103 | 
104 |     it('should create an array with the week days for en locale', async(() => {
105 |         fixture.componentInstance.mCurrentMonth = moment('2017-01-01');
106 |         expect(fixture.componentInstance.monthGridWeekDays).toEqual(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']);
107 |     }));
108 | 
109 |     it('should create an array with all days for the current month', async(() => {
110 | 
111 |         // LOOKS LIKE THE DEMO APP
112 |         moment.updateLocale('en', {
113 |             week : {
114 |                 dow: 1,
115 |                 doy : 4
116 |             }
117 |         });
118 | 
119 |         fixture.componentInstance.mDate = moment('2017-04-10');
120 |         fixture.componentInstance.mCurrentMonth = moment('2017-04-01');
121 | 
122 |         let gridWithDays = fixture.componentInstance.monthGridDays;
123 | 
124 |         // the first date should be 2017/3/25 - e.g. not the current month and not the actual date
125 |         let day1 = gridWithDays[0].days[0];
126 |         expect(day1.day.isSame(moment('2017-03-27'), 'day')).toBeTruthy('should be the 2017-03-27');
127 |         expect(fixture.componentInstance.isActualDate(day1.day)).toBeFalsy('first day is not the actual');
128 |         expect(day1.isCurrentMonth).toBeFalsy('first day is not in the current month');
129 | 
130 |         // the third week the 2snd day ist 2017-04-10
131 |         let dayActual = gridWithDays[2].days[0];
132 |         expect(dayActual.day.isSame(moment('2017-04-10'), 'day')).toBeTruthy('should be 2017-04-10');
133 |         expect(fixture.componentInstance.isActualDate(dayActual.day)).toBeTruthy('the 10. is the actual day');
134 |         expect(dayActual.isCurrentMonth).toBeTruthy('the 10 is in the current month');
135 | 
136 |         let lastDayOfTheMonth = gridWithDays[4].days[6];
137 |         expect(lastDayOfTheMonth.day.isSame(moment('2017-04-30'), 'day')).toBeTruthy('should be 2017-04-30');
138 |         expect(fixture.componentInstance.isActualDate(lastDayOfTheMonth.day)).toBeFalsy('30. is not the actual day');
139 |         expect(lastDayOfTheMonth.isCurrentMonth).toBeTruthy('the 30 is in the current month');
140 |     }));
141 | 
142 | 
143 |     it('should create an array with all days for the december 2018', async(() => {
144 | 
145 |         // LOOKS LIKE THE DEMO APP
146 |         moment.updateLocale('en', {
147 |             week : {
148 |                 dow: 1,
149 |                 doy : 4
150 |             }
151 |         });
152 | 
153 |         fixture.componentInstance.mCurrentMonth = moment('2018-12-01');
154 | 
155 |         let gridWithDays = fixture.componentInstance.monthGridDays;
156 | 
157 |         let day1 = gridWithDays[0].days[0];
158 |         expect(day1.day.isSame(moment('2018-11-26'), 'day')).toBeTruthy('should be the 2018-11-26');
159 | 
160 |         let lastDayOfTheMonth = gridWithDays[5].days[0];
161 |         expect(lastDayOfTheMonth.day.isSame(moment('2018-12-31'), 'day')).toBeTruthy('should be 2018-12-31');
162 |     }));
163 |     /**
164 |  [
165 |      {
166 |         "week": 13,
167 |         "days": [
168 |            {
169 |               "day": "2017-03-25T23:00:00.000Z",
170 |               "isActual": false,
171 |               "isCurrentMonth": false
172 |            },
173 | 
174 |         ]
175 |      },
176 |      {
177 |         "week": 14,
178 |         "days": [
179 | 
180 |         ]
181 |      },
182 |      {
183 |         "week": 15,
184 |         "days": [
185 |            {
186 |               "day": "2017-04-08T22:00:00.000Z",
187 |               "isActual": false,
188 |               "isCurrentMonth": true
189 |            },
190 |            {
191 |               "day": "2017-04-09T22:00:00.000Z",
192 |               "isActual": true,
193 |               "isCurrentMonth": true
194 |            },
195 | 
196 |         ]
197 |      },
198 |      {
199 |         "week": 16,
200 |         "days": [
201 | 
202 |         ]
203 |      },
204 |      {
205 |         "week": 17,
206 |         "days": [
207 | 
208 |         ]
209 |      },
210 |      {
211 |         "week": 18,
212 |         "days": [
213 |            {
214 |               "day": "2017-04-29T22:00:00.000Z",
215 |               "isActual": false,
216 |               "isCurrentMonth": true
217 |            },
218 |            {
219 |               "day": "2017-04-30T22:00:00.000Z",
220 |               "isActual": false,
221 |               "isCurrentMonth": false
222 |            },
223 | 
224 |         ]
225 |      }
226 |  ]
227 |  */
228 | 
229 | });


--------------------------------------------------------------------------------
/src/components/datepicker/datepicker.component.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Component, HostListener, Inject, InjectionToken, ViewChild,
  3 |   ViewEncapsulation
  4 | } from '@angular/core';
  5 | import { MdlButtonComponent, MdlDialogReference } from '@angular-mdl/core';
  6 | import * as moment from 'moment';
  7 | import { DatePickerOptions } from './datepicker.service';
  8 | 
  9 | export const CURRENT_DATE = new InjectionToken<Date>('current-date');
 10 | export const DATEPICKER_CONFIG = new InjectionToken<DatePickerOptions>('datepicker-options');
 11 | 
 12 | @Component({
 13 |   moduleId: module.id,
 14 |   selector: 'datepicker',
 15 |   templateUrl: 'datepicker.component.html',
 16 |   encapsulation: ViewEncapsulation.None
 17 | })
 18 | export class DatePickerDialogComponent {
 19 | 
 20 |   @ViewChild('okButton') public okButton: MdlButtonComponent;
 21 | 
 22 |   public okLabel: string;
 23 |   public cancelLabel: string;
 24 | 
 25 |   public mDate: moment.Moment;
 26 |   private _mCurrentMonth: moment.Moment;
 27 |   get mCurrentMonth() {
 28 |     return this._mCurrentMonth;
 29 |   }
 30 |   set mCurrentMonth(m) {
 31 |     this._mCurrentMonth = m;
 32 |     this.calculateMonthGrid();
 33 |   }
 34 | 
 35 |   public prevEnabled = true;
 36 |   public nextEnabled = true;
 37 | 
 38 |   public monthGridWeekDays: string[];
 39 |   public monthGridDays: any[];
 40 | 
 41 |   constructor(
 42 |     private dialog: MdlDialogReference,
 43 |     @Inject(CURRENT_DATE) private initialDate: Date,
 44 |     @Inject(DATEPICKER_CONFIG) private options: DatePickerOptions) {
 45 | 
 46 |     this.mDate = moment(initialDate || new Date());
 47 |     this.mCurrentMonth = this.mDate.clone();
 48 | 
 49 |     const startOfWeek = moment().startOf('week');
 50 |     const endOfWeek = moment().endOf('week');
 51 | 
 52 |     this.monthGridWeekDays = [];
 53 |     let day = startOfWeek;
 54 |     while (day <= endOfWeek) {
 55 |       this.monthGridWeekDays.push(moment.weekdaysMin(day.day()));
 56 |       day = day.clone().add(1, 'd');
 57 |     }
 58 | 
 59 | 
 60 |     this.okLabel = options.okLabel || 'Ok';
 61 |     this.cancelLabel = options.cancelLabel || 'Cancel';
 62 | 
 63 |     dialog.onVisible().subscribe( () => {
 64 |       this.okButton.elementRef.nativeElement.focus();
 65 |     })
 66 |   }
 67 | 
 68 |   @HostListener('keydown.esc')
 69 |   public onEsc(): void {
 70 |     this.dialog.hide(this.initialDate);
 71 |   }
 72 | 
 73 |   public onOk() {
 74 |     this.dialog.hide(this.mDate.toDate());
 75 |   }
 76 | 
 77 |   public onCancel() {
 78 |     this.dialog.hide(this.initialDate);
 79 |   }
 80 | 
 81 |   public prevMonth() {
 82 |     this.mCurrentMonth = this.mCurrentMonth.subtract(1, 'months');
 83 |   }
 84 | 
 85 |   public nextMonth() {
 86 |     this.mCurrentMonth = this.mCurrentMonth.add(1, 'months');
 87 |   }
 88 | 
 89 |   private calculateMonthGrid() {
 90 |     let startDateOfMonth = this.mCurrentMonth.clone().startOf('month').clone();
 91 |     const startWeek = startDateOfMonth.week();
 92 |     const endWeek = this.mCurrentMonth.clone().endOf('month').week();
 93 | 
 94 |     // caveat year switch
 95 |     // 52 - 5
 96 |     // 48 - 1
 97 |     //console.log(startWeek, endWeek);
 98 | 
 99 |     this.monthGridDays = [];
100 |     let week = startWeek;
101 | 
102 |     this.monthGridDays.push(this.createMonthRow(startDateOfMonth, week));
103 | 
104 |     do {
105 |       let firstDayInWeek = startDateOfMonth.add(1, 'week');
106 |       week = firstDayInWeek.week();
107 |       this.monthGridDays.push(this.createMonthRow(firstDayInWeek.clone(), week));
108 |     } while (week != endWeek);
109 |   }
110 | 
111 |   private createMonthRow(mDate: any, week: number) {
112 |     const startWeek = mDate.week(week).startOf('week');
113 |     return {
114 |       week: week,
115 |       days: Array(7).fill(0).map((n, i) => {
116 |         const mDay = startWeek.clone().add(i, 'day');
117 |         return {
118 |           day: mDay,
119 |           isCurrentMonth: this.isCurrentMonth(mDay)
120 |         };
121 |       })
122 |     }
123 |   }
124 | 
125 |   public isActualDate( day: moment.Moment ) : boolean {
126 |     return this.mDate.isSame(day, 'day');
127 |   }
128 | 
129 |   private isCurrentMonth(day: moment.Moment) : boolean {
130 |     return this.mCurrentMonth.isSame(day, 'month');
131 |   }
132 | 
133 |   public setCurrentDay(day: moment.Moment) {
134 |     this.mDate = day;
135 |   }
136 | }
137 | 


--------------------------------------------------------------------------------
/src/components/datepicker/datepicker.scss:
--------------------------------------------------------------------------------
 1 | @import "../../../node_modules/@angular-mdl/core/scss/color-definitions";
 2 | @import "../../../node_modules/@angular-mdl/core/scss/variables";
 3 | @import "../../../node_modules/@angular-mdl/core/scss/mixins";
 4 | 
 5 | .mdl-datepicker {
 6 |   padding: 0;
 7 | 
 8 |   .mdl-datepicker-header {
 9 |     background-color: unquote("rgb(#{$color-primary})");
10 |     color: unquote("rgb(#{$color-dark-contrast})");
11 |     padding: 1em 1em 0.25em 1em;
12 |   }
13 | 
14 |   .mdl-datepicker-header-day-month {
15 |     margin: 8px 0;
16 |   }
17 | 
18 |   .mdl-dialog__content {
19 |     padding: 8px 8px 0 8px;
20 |   }
21 | 
22 |   .mdl-datepicker-month-navigation-buttons {
23 |     position: relative;
24 | 
25 |     .mdl-datepicker-prev-month {
26 |       position: absolute;
27 |     }
28 | 
29 |     .mdl-datepicker-next-month {
30 |       position: absolute;
31 |       right: 0;
32 |     }
33 |   }
34 | 
35 |   .mdl-datepicker-month {
36 | 
37 |     // avoid flickering if the count of weeks per month changed
38 |     min-height: 21.5em;
39 | 
40 |     .mdl-datepicker-month-title {
41 |       font-weight: bold;
42 |       line-height: $button-height;
43 |       text-align: center;
44 |     }
45 | 
46 |     .mdl-datepicker-weekdays {
47 |       display: flex;
48 |       flex-direction: row;
49 |       align-items: stretch;
50 | 
51 |       .mdl-datepicker-weekday {
52 |         flex: 1;
53 |         text-align: center;
54 |       }
55 |     }
56 | 
57 |     .day {
58 |       border-radius: 50%;
59 |       margin: auto;
60 |       padding: 0;
61 |       overflow: hidden;
62 |       position: relative;
63 |       line-height: normal;
64 |       height: $button-fab-size-mini;
65 |       min-width: $button-fab-size-mini;
66 |       width: $button-fab-size-mini;
67 | 
68 |       & .mdl-ripple {
69 |         background: $button-fab-ripple-color-alt;
70 |       }
71 |     }
72 | 
73 |     .actual {
74 |       background-color: unquote("rgb(#{$color-primary})");
75 |       color: unquote("rgb(#{$color-dark-contrast})");
76 |       box-shadow: 0 1px 1.5px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
77 |     }
78 |   }
79 | }


--------------------------------------------------------------------------------
/src/components/datepicker/datepicker.service.spec.ts:
--------------------------------------------------------------------------------
  1 | import { async, TestBed } from '@angular/core/testing';
  2 | import { Component } from '@angular/core';
  3 | import { By } from '@angular/platform-browser';
  4 | import { MdlDatePickerModule } from './index';
  5 | import { CommonModule } from '@angular/common';
  6 | import {
  7 |   MdlButtonModule, MdlDialogModule, MdlDialogOutletModule, MdlIconModule,
  8 |   MdlRippleModule
  9 | } from '@angular-mdl/core';
 10 | import { MdlDatePickerService } from './datepicker.service';
 11 | import * as moment from 'moment'
 12 | 
 13 | describe('DatePickerService', () => {
 14 | 
 15 | 
 16 |   beforeEach(async(() => {
 17 |     TestBed.configureTestingModule({
 18 |       imports: [
 19 |         CommonModule,
 20 |         MdlButtonModule,
 21 |         MdlIconModule,
 22 |         MdlRippleModule,
 23 |         MdlDatePickerModule,
 24 |         MdlDialogModule.forRoot(),
 25 |         MdlDialogOutletModule
 26 |       ],
 27 |       declarations: [ MdlTestComponent ]
 28 |     });
 29 | 
 30 |     TestBed.compileComponents();
 31 |   }));
 32 | 
 33 |   it('should instantiate the service', async(() => {
 34 |     const service: MdlDatePickerService = TestBed.get(MdlDatePickerService);
 35 |     expect(service).toBeDefined();
 36 |   }));
 37 | 
 38 |   it('should open the date picker dialog', ( done: any) => {
 39 | 
 40 |     let fixture = TestBed.createComponent(MdlTestComponent);
 41 | 
 42 |     const service: MdlDatePickerService = TestBed.get(MdlDatePickerService);
 43 |     service.selectDate().subscribe( (date) => {
 44 |       expect(date).toBeDefined();
 45 |       done();
 46 |     });
 47 | 
 48 |     // render the dialog component
 49 |     fixture.detectChanges();
 50 | 
 51 |     // give the service time to subscribe to the dialog hide call.
 52 |     setTimeout( () => {
 53 | 
 54 |       let cancelButton = fixture.debugElement.query(By.css('.mdl-datepicker-cancel-button')).nativeElement;
 55 |       expect(cancelButton.textContent).toBe('Cancel');
 56 | 
 57 |       let okButton = fixture.debugElement.query(By.css('.mdl-datepicker-ok-button')).nativeElement;
 58 |       expect(okButton.textContent).toBe('Ok');
 59 |       okButton.click();
 60 | 
 61 |     });
 62 | 
 63 |   });
 64 | 
 65 |   it('should open the date picker dialog with a provided date', () => {
 66 |     let fixture = TestBed.createComponent(MdlTestComponent);
 67 | 
 68 |     const service: MdlDatePickerService = TestBed.get(MdlDatePickerService);
 69 |     service.selectDate(moment('2017-01-01').toDate());
 70 | 
 71 |     // render the dialog component
 72 |     fixture.detectChanges();
 73 | 
 74 |     let yearEl = fixture.debugElement.query(By.css('.mdl-datepicker-header-year')).nativeElement;
 75 |     expect(yearEl.textContent).toBe('2017');
 76 | 
 77 |     let dayEl = fixture.debugElement.query(By.css('.mdl-datepicker-header-day-month')).nativeElement;
 78 |     expect(dayEl.textContent).toBe('Sun, Jan 01');
 79 | 
 80 |   });
 81 | 
 82 |   it('should open the date picker dialog with a ok and cancel label', () => {
 83 |     let fixture = TestBed.createComponent(MdlTestComponent);
 84 | 
 85 |     const service: MdlDatePickerService = TestBed.get(MdlDatePickerService);
 86 |     service.selectDate(null, {okLabel: '1', cancelLabel: '2'});
 87 | 
 88 |     // render the dialog component
 89 |     fixture.detectChanges();
 90 | 
 91 | 
 92 |     let cancelButton = fixture.debugElement.query(By.css('.mdl-datepicker-cancel-button')).nativeElement;
 93 |     expect(cancelButton.textContent).toBe('2');
 94 | 
 95 |     let okButton = fixture.debugElement.query(By.css('.mdl-datepicker-ok-button')).nativeElement;
 96 |     expect(okButton.textContent).toBe('1');
 97 | 
 98 |   });
 99 | 
100 | });
101 | 
102 | @Component({
103 |   selector: 'test-component',
104 |   template: `      
105 |       <dialog-outlet></dialog-outlet>
106 |   `
107 | })
108 | class MdlTestComponent {
109 | 
110 | }


--------------------------------------------------------------------------------
/src/components/datepicker/datepicker.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { Observable } from 'rxjs';
 3 | import { Subject } from 'rxjs';
 4 | import { MdlDialogOutletModule, MdlDialogReference } from '@angular-mdl/core';
 5 | import { CURRENT_DATE, DATEPICKER_CONFIG, DatePickerDialogComponent } from './datepicker.component';
 6 | import { NgModule } from '@angular/core';
 7 | import { MdlButtonModule, MdlDialogModule, MdlDialogService, MdlIconModule, MdlRippleModule } from '@angular-mdl/core';
 8 | import { CommonModule } from '@angular/common';
 9 | 
10 | export interface DatePickerOptions {
11 |   openFrom?: MouseEvent;
12 |   okLabel?: string;
13 |   cancelLabel?: string;
14 | }
15 | 
16 | @Injectable()
17 | export class MdlDatePickerService {
18 | 
19 |   constructor( private dialogService: MdlDialogService) {}
20 | 
21 |   public selectDate(currentDate: Date = null, options: DatePickerOptions = {}) : Observable<Date> {
22 |     let subject = new Subject<Date>();
23 | 
24 |     let pDialog = this.dialogService.showCustomDialog({
25 |       classes: 'mdl-datepicker',
26 |       component: DatePickerDialogComponent,
27 |       providers: [
28 |         {provide: CURRENT_DATE, useValue: currentDate},
29 |         {provide: DATEPICKER_CONFIG, useValue: options}
30 |       ],
31 |       isModal: true,
32 |       styles: {'width': '320px'},
33 |       openFrom: options.openFrom
34 |     });
35 |     pDialog.subscribe( (dialogReference: MdlDialogReference) => {
36 |      dialogReference.onHide().subscribe( (date: Date) => {
37 |        subject.next(date);
38 |        subject.complete();
39 |      });
40 |     });
41 | 
42 |     return subject.asObservable();
43 |   }
44 | }
45 | 
46 | @NgModule({
47 |   imports: [
48 |     CommonModule,
49 |     MdlButtonModule,
50 |     MdlIconModule,
51 |     MdlRippleModule,
52 |     MdlDialogModule,
53 |     MdlDialogOutletModule
54 |   ],
55 |   exports: [],
56 |   declarations: [ DatePickerDialogComponent ],
57 |   entryComponents: [DatePickerDialogComponent],
58 |   providers: [
59 |     MdlDatePickerService
60 |   ]
61 | })
62 | export class MdlDatePickerModule {
63 | }


--------------------------------------------------------------------------------
/src/components/datepicker/index.ts:
--------------------------------------------------------------------------------
1 | export * from './datepicker.component';
2 | export * from './datepicker.service';
3 | 
4 | 
5 | 


--------------------------------------------------------------------------------
/src/components/datepicker/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@angular-mdl/datepicker",
 3 |   "version": "6.0.0",
 4 |   "description": "Angular Material Design Lite - Date Picker Component",
 5 |   "main": "./index.umd.js",
 6 |   "module": "./index.js",
 7 |   "typings": "./index.d.ts",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "git+https://github.com/mseemann/angular2-mdl-ext.git"
11 |   },
12 |   "keywords": [
13 |     "angular2",
14 |     "angular4",
15 |     "angular",
16 |     "material design lite",
17 |     "datepicker"
18 |   ],
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/mseemann/angular2-mdl-ext/issues"
22 |   },
23 |   "homepage": "https://github.com/mseemann/angular2-mdl-ext#readme",
24 |   "peerDependencies": {
25 |     "@angular-mdl/core": ">=4.0.0",
26 |     "moment": "^2.18.1"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/expansion-panel/README.md:
--------------------------------------------------------------------------------
 1 | # Expansion Panel
 2 | 
 3 | ### Installing
 4 | 
 5 |     npm i --save @angular-mdl/expansion-panel
 6 | 
 7 |     import { MdlExpansionPanelModule } from '@angular-mdl/expansion-panel';
 8 | 
 9 | ### Usage & API
10 | 
11 |     Visit [demo] for usage examples and API summary.
12 |     [demo]: http://mseemann.io/angular2-mdl-ext/expansion-panel
13 | 


--------------------------------------------------------------------------------
/src/components/expansion-panel/expansion-panel.component.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Component,
  3 |   NgModule,
  4 |   ModuleWithProviders,
  5 |   AfterContentInit,
  6 |   ContentChild,
  7 |   ContentChildren,
  8 |   EventEmitter,
  9 |   Output,
 10 |   Input,
 11 |   QueryList,
 12 |   HostListener,
 13 | } from '@angular/core';
 14 | import { CommonModule } from '@angular/common';
 15 | import {
 16 |   trigger,
 17 |   state,
 18 |   style,
 19 |   animate,
 20 |   transition, } from '@angular/animations';
 21 | 
 22 | @Component({
 23 |   selector: 'mdl-expansion-panel-header',
 24 |   template: `
 25 |     <ng-content></ng-content>
 26 |     <div class="mdl-expansion-panel__header--expand-icon" (click)="onClick()">
 27 |       <span *ngIf="!isExpanded" class="material-icons">expand_more</span>
 28 |       <span *ngIf="isExpanded" class="material-icons">expand_less</span>
 29 |     </div>
 30 |   `,
 31 |   host: {
 32 |     '[class.mdl-expansion-panel__header]': 'true'
 33 |   }
 34 | })
 35 | export class MdlExpansionPanelHeaderComponent {
 36 |   isExpanded: boolean = false;
 37 |   onChange: EventEmitter<null> = new EventEmitter<null>();
 38 | 
 39 |   onClick() {
 40 |     this.onChange.emit();
 41 |   }
 42 | }
 43 | 
 44 | @Component({
 45 |   selector: 'mdl-expansion-panel-header-list-content',
 46 |   template: '<ng-content></ng-content>',
 47 |   host: {
 48 |     '[class.mdl-expansion-panel__header--list-content]': 'true'
 49 |   }
 50 | })
 51 | export class MdlExpansionPanelHeaderListContentComponent { }
 52 | 
 53 | @Component({
 54 |   selector: 'mdl-expansion-panel-header-secondary-content',
 55 |   template: '<ng-content></ng-content>',
 56 |   host: {
 57 |     '[class.mdl-expansion-panel__header--secondary-content]': 'true'
 58 |   }
 59 | })
 60 | export class MdlExpansionPanelHeaderSecondaryContentComponent { }
 61 | 
 62 | @Component({
 63 |   selector: 'mdl-expansion-panel-content',
 64 |   template: '<ng-content></ng-content>',
 65 |   host: {
 66 |     '[class.mdl-expansion-panel__content]': 'true',
 67 |     '[@isExpanded]': 'isExpanded'
 68 |   },
 69 |   animations: [
 70 |     trigger('isExpanded', [
 71 |       state('true', style({ height: '*' })),
 72 |       state('false', style({ height: '0px' })),
 73 |       transition('* => *', animate('250ms ease-in'))
 74 |     ])
 75 |   ]
 76 | })
 77 | export class MdlExpansionPanelContentComponent {
 78 |   isExpanded: string = 'false';
 79 | }
 80 | 
 81 | @Component({
 82 |   selector: 'mdl-expansion-panel-body',
 83 |   template: '<ng-content></ng-content>',
 84 |   host: {
 85 |     '[class.mdl-expansion-panel__content--body]': 'true'
 86 |   }
 87 | })
 88 | export class MdlExpansionPanelBodyComponent { }
 89 | 
 90 | @Component({
 91 |   selector: 'mdl-expansion-panel-footer',
 92 |   template: '<ng-content></ng-content>',
 93 |   host: {
 94 |     '[class.mdl-expansion-panel__content--footer]': 'true'
 95 |   }
 96 | })
 97 | export class MdlExpansionPanelFooterComponent { }
 98 | 
 99 | @Component({
100 |   selector: 'mdl-expansion-panel',
101 |   template: '<ng-content></ng-content>',
102 |   host: {
103 |     '[class.mdl-expansion-panel]': 'true',
104 |     '[class.expanded]': 'expanded',
105 |     '[class.disabled]': 'disabled',
106 |     '[tabindex]': '0'
107 |   }
108 | })
109 | export class MdlExpansionPanelComponent implements AfterContentInit {
110 |   @ContentChild(MdlExpansionPanelHeaderComponent) header: MdlExpansionPanelHeaderComponent;
111 |   @ContentChild(MdlExpansionPanelContentComponent) content: MdlExpansionPanelContentComponent;
112 |   @Output() onChange: EventEmitter<boolean> = new EventEmitter<boolean>();
113 |   @Input() disabled: boolean = false;
114 | 
115 |   // expanded property is getter/setter for the internal 'isExpanded' flag
116 |   @Input() public set expanded(bool: boolean) {
117 |     this._toggle(bool);
118 |   };
119 |   private isExpanded: boolean = false;
120 |   public get expanded() {
121 |     return this.isExpanded;
122 |   }
123 | 
124 |   ngAfterContentInit() {
125 |     this.header.onChange.subscribe(() => {
126 |       if (!this.disabled) this._toggle(!this.isExpanded);
127 |     });
128 |   }
129 | 
130 |   @HostListener('keyup', ['$event'])
131 |   onKeyUp($event: any) {
132 |     if ($event.key === 'Enter' && !this.disabled) this.toggle();
133 |   }
134 | 
135 |   toggle() {
136 |     this._toggle(!this.isExpanded);
137 |   }
138 | 
139 |   expand() {
140 |     this._toggle(true);
141 |   }
142 | 
143 |   collapse() {
144 |     this._toggle(false);
145 |   }
146 | 
147 |   disableToggle() {
148 |     this.disabled = true;
149 |   }
150 | 
151 |   enableToggle() {
152 |     this.disabled = false;
153 |   }
154 | 
155 |   private _toggle(isExpanded: boolean) {
156 |     this.isExpanded = isExpanded;
157 |     this.content.isExpanded = `${isExpanded}`;
158 |     this.header.isExpanded = isExpanded;
159 |     this.onChange.emit(isExpanded);
160 |   }
161 | }
162 | 
163 | @Component({
164 |   selector: 'mdl-expansion-panel-group',
165 |   template: '<ng-content></ng-content>',
166 |   host: {
167 |     '[class.mdl-expansion-panel-group]': 'true'
168 |   }
169 | })
170 | export class MdlExpansionPanelGroupComponent implements AfterContentInit {
171 |   @ContentChildren(MdlExpansionPanelComponent) panels: QueryList<MdlExpansionPanelComponent>;
172 |   expandedIndex: number = -1;
173 | 
174 |   ngAfterContentInit() {
175 |     this.panels.forEach((panel, i) => {
176 |       /**
177 |        * Set the expanded index to the panel index which is initialized in expanded state
178 |        *
179 |        * Having more than one of the panels being initialized in expanded state
180 |        * is NOT supported
181 |        */
182 |       if (panel.expanded) {
183 |         if (this.expandedIndex > -1) {
184 |           const errorMessage = `
185 |             PanelGroup does not support more than one Panel to be expanded initially.
186 |             
187 |             Make sure only one <mdl-expansion-panel> receives input like [expanded]="true".
188 |             `;
189 |           this.throw(errorMessage);
190 |         }
191 |         this.expandedIndex = i;
192 |       }
193 | 
194 |       /**
195 |        * Expand the panel and collapse previously
196 |        * expanded panel when a panel is toggled.
197 |        * Save the new expanded panel index.
198 |        */
199 |       panel.onChange.subscribe((isExpanded: boolean) => {
200 |         if (isExpanded) {
201 |           if (i !== this.expandedIndex && this.expandedIndex >= 0) {
202 |             this.panels.toArray()[this.expandedIndex].collapse();
203 |           }
204 |           this.expandedIndex = i;
205 |         }
206 |         if (!isExpanded && i === this.expandedIndex) {
207 |           this.expandedIndex = -1;
208 |         }
209 |       });
210 |     });
211 |   }
212 | 
213 |   getExpanded(): number {
214 |     return this.expandedIndex;
215 |   }
216 | 
217 |   getPanel(index: number): MdlExpansionPanelComponent {
218 |     return this.panels.toArray()[index];
219 |   }
220 | 
221 |   private throw(message: string) {
222 |     throw new Error(message);
223 |   }
224 | }
225 | 
226 | const MDL_EXPANSION_PANEL_DIRECTIVES = [
227 |   MdlExpansionPanelGroupComponent,
228 |   MdlExpansionPanelComponent,
229 |   MdlExpansionPanelHeaderComponent,
230 |   MdlExpansionPanelHeaderListContentComponent,
231 |   MdlExpansionPanelHeaderSecondaryContentComponent,
232 |   MdlExpansionPanelContentComponent,
233 |   MdlExpansionPanelBodyComponent,
234 |   MdlExpansionPanelFooterComponent
235 | ];
236 | 
237 | @NgModule({
238 |   imports: [CommonModule],
239 |   exports: MDL_EXPANSION_PANEL_DIRECTIVES,
240 |   declarations: MDL_EXPANSION_PANEL_DIRECTIVES,
241 | })
242 | export class MdlExpansionPanelModule {
243 |   public static forRoot(): ModuleWithProviders {
244 |     return {
245 |       ngModule: MdlExpansionPanelModule,
246 |       providers: []
247 |     };
248 |   }
249 | }
250 | 


--------------------------------------------------------------------------------
/src/components/expansion-panel/expansion-panel.scss:
--------------------------------------------------------------------------------
  1 | @import "../../../node_modules/@angular-mdl/core/scss/color-definitions";
  2 | @import "../../../node_modules/@angular-mdl/core/scss/variables";
  3 | @import "../../../node_modules/@angular-mdl/core/scss/mixins";
  4 | 
  5 | $gutter-vertical: 16px;
  6 | $gutter-horizontal: 24px;
  7 | 
  8 | @mixin divider() {
  9 |   border-bottom: 1px solid rgba(#000, 0.12);
 10 | }
 11 | 
 12 | .mdl-expansion-panel {
 13 |   font-family: $preferred_font;
 14 |   background-color: unquote("rgb(#{$color-white})");
 15 |   display: block;
 16 |   outline: none;
 17 |   margin: $gutter-vertical 0px;
 18 |   @include shadow-2dp();
 19 |   &__header {
 20 |     display: flex;
 21 |     flex-direction: row;
 22 |     flex-wrap: nowrap;
 23 |     padding: 0px $gutter-horizontal;
 24 |     align-items: center;
 25 |     line-height: 48px;
 26 |     @include divider();
 27 |     &--list-content {
 28 |       flex-grow: 1;
 29 |       color: rgba(#000, 0.87);
 30 |     }
 31 |     &--secondary-content {
 32 |       padding-left: $gutter-vertical;
 33 |       flex-grow: 3;
 34 |       color: rgba(#000, 0.54);
 35 |     }
 36 |     &--expand-icon {
 37 |       padding-left: $gutter-vertical;
 38 |       color: rgba(#000, 0.38);
 39 |       cursor: pointer;
 40 |       .material-icons {
 41 |         vertical-align: middle;
 42 |       }
 43 |     }
 44 |   }
 45 |   &__content {
 46 |     display: block;
 47 |     overflow: hidden;
 48 |     &--body {
 49 |       display: block;
 50 |       padding: 0px $gutter-horizontal $gutter-vertical $gutter-horizontal;
 51 |       @include divider();
 52 |     }
 53 |     &--footer {
 54 |       display: flex;
 55 |       justify-content: flex-end;
 56 |       padding: $gutter-vertical $gutter-vertical/2 $gutter-vertical $gutter-horizontal;
 57 |       .mdl-button {
 58 |         padding: 0px $gutter-vertical/2;
 59 |       }
 60 |     }
 61 |   }
 62 |   &.expanded {
 63 |     .mdl-expansion-panel__header {
 64 |       line-height: 64px;
 65 |       border-bottom: none;
 66 |     }
 67 |   }
 68 |   &.disabled {
 69 |     .mdl-expansion-panel__header--expand-icon {
 70 |       cursor: default;
 71 |     }
 72 |   }
 73 | }
 74 | 
 75 | .mdl-expansion-panel-group {
 76 |   display: block;
 77 |   .mdl-expansion-panel {
 78 |     margin: 0px;
 79 |     &:focus {
 80 |       background-color: unquote("rgb(#{$palette-grey-200})");
 81 |       .mdl-expansion-panel__header--expand-icon {
 82 |         color: rgba(#000, 0.54);
 83 |       }
 84 |     }
 85 |     &.expanded {
 86 |       margin: $gutter-vertical 0px;
 87 |       background-color: unquote("rgb(#{$color-white})");
 88 |       .mdl-expansion.panel__header--expand-icon {
 89 |         color: rgba(#000, 0.38);
 90 |       }
 91 |       &:first-child {
 92 |         margin-top: 0;
 93 |       }
 94 |       &:last-child {
 95 |         margin-bottom: 0;
 96 |       }
 97 |     }
 98 |   }
 99 | }
100 | 


--------------------------------------------------------------------------------
/src/components/expansion-panel/expansion-panel.spec.ts:
--------------------------------------------------------------------------------
  1 | import { async, TestBed, ComponentFixture } from '@angular/core/testing';
  2 | import { Component, DebugElement } from '@angular/core';
  3 | import { MdlExpansionPanelModule } from './expansion-panel.component';
  4 | import { By } from '@angular/platform-browser';
  5 | import { NoopAnimationsModule } from '@angular/platform-browser/animations';
  6 | 
  7 | describe('MdlExpansionPanel', () => {
  8 | 
  9 |   describe('single', () => {
 10 | 
 11 |     let fixture: ComponentFixture<TestSinglePanelComponent>;
 12 | 
 13 |     beforeEach(async(() => {
 14 |       TestBed.configureTestingModule({
 15 |         imports: [MdlExpansionPanelModule.forRoot(), NoopAnimationsModule],
 16 |         declarations: [TestSinglePanelComponent],
 17 |       });
 18 | 
 19 |       TestBed.compileComponents().then( () => {
 20 |         fixture = TestBed.createComponent(TestSinglePanelComponent);
 21 |         fixture.detectChanges();
 22 |       });
 23 |     }));
 24 | 
 25 |     it('should be collapsed initially', async(() => {
 26 |       expect(fixture.debugElement.query(By.css('.expanded'))).toBeNull();
 27 |     }));
 28 | 
 29 |     it('should toggle on clicking expansion icon', async(() => {
 30 |       fixture.debugElement.nativeElement.querySelector('.mdl-expansion-panel__header--expand-icon').click();
 31 |       fixture.detectChanges();
 32 |       fixture.whenStable()
 33 |         .then(() => {
 34 |           expect(fixture.debugElement.query(By.css('.expanded'))).not.toBeNull();
 35 |           fixture.debugElement.nativeElement.querySelector('.mdl-expansion-panel__header--expand-icon').click();
 36 |           fixture.detectChanges();
 37 |           return fixture.whenStable();
 38 |         })
 39 |         .then(() => {
 40 |           expect(fixture.debugElement.query(By.css('.expanded'))).toBeNull();
 41 |         });
 42 |     }));
 43 | 
 44 |     it('should toggle on pressing enter if focused', async(() => {
 45 |       let e = new KeyboardEvent('keyup', {
 46 |         key: 'Enter'
 47 |       });
 48 |       fixture.debugElement.nativeElement.querySelector('.mdl-expansion-panel').dispatchEvent(e);
 49 |       fixture.detectChanges();
 50 |       fixture.whenStable().then(() => {
 51 |         expect(fixture.debugElement.query(By.css('.expanded'))).not.toBeNull();
 52 |       });
 53 |     }));
 54 | 
 55 |     it('should not toggle if disabled', async(() => {
 56 |       fixture.debugElement.nativeElement.querySelector('button').click();
 57 |       fixture.detectChanges();
 58 |       fixture.whenStable()
 59 |         .then(() => {
 60 |           fixture.debugElement.nativeElement.querySelector('.mdl-expansion-panel__header--expand-icon').click();
 61 |           fixture.detectChanges();
 62 |           return fixture.whenStable();
 63 |         })
 64 |         .then(() => {
 65 |           expect(fixture.debugElement.query(By.css('.expanded'))).toBeNull();
 66 |         });
 67 |     }));
 68 |   });
 69 | 
 70 |   describe('group', () => {
 71 |     let fixture: ComponentFixture<TestGroupPanelComponent>;
 72 |     let fixtureWithError: ComponentFixture<TestGroupPanelError>;
 73 | 
 74 |     beforeEach(async(() => {
 75 |       TestBed.configureTestingModule({
 76 |         imports: [MdlExpansionPanelModule.forRoot(), NoopAnimationsModule],
 77 |         declarations: [
 78 |           TestGroupPanelComponent,
 79 |           TestGroupPanelError
 80 |         ],
 81 |       });
 82 | 
 83 |       TestBed.compileComponents().then( () => {
 84 |         fixture = TestBed.createComponent(TestGroupPanelComponent);
 85 |         fixtureWithError = TestBed.createComponent(TestGroupPanelError);
 86 |         fixture.detectChanges();
 87 |       });
 88 |     }));
 89 | 
 90 |     it('should allow one panel which is initialized in expanded state', async(() => {
 91 |       fixture.detectChanges();
 92 |       fixture.whenStable().then(() => {
 93 |         expect(fixture.debugElement.nativeElement
 94 |           .querySelector('.mdl-expansion-panel:nth-child(1)').getAttribute('class'))
 95 |           .toContain('expanded');
 96 |         expect(fixture.debugElement.nativeElement
 97 |           .querySelector('.mdl-expansion-panel:nth-child(2)').getAttribute('class'))
 98 |           .not.toContain('expanded');
 99 |         expect(fixture.debugElement.nativeElement
100 |           .querySelector('.mdl-expansion-panel:nth-child(3)').getAttribute('class'))
101 |           .not.toContain('expanded');
102 |       });
103 |     }));
104 | 
105 |     it('should collapse previous panel', async(() => {
106 |       fixture
107 |         .debugElement
108 |         .nativeElement
109 |         .querySelector('.mdl-expansion-panel:nth-child(2) .mdl-expansion-panel__header--expand-icon')
110 |         .click();
111 |       fixture.detectChanges();
112 |       fixture.whenStable()
113 |         .then(() => {
114 |           expect(fixture.debugElement.nativeElement
115 |                   .querySelector('.mdl-expansion-panel:nth-child(1)').getAttribute('class'))
116 |                   .not.toContain('expanded');
117 |           expect(fixture.debugElement.nativeElement
118 |                   .querySelector('.mdl-expansion-panel:nth-child(2)').getAttribute('class'))
119 |                   .toContain('expanded');
120 |         });
121 |     }));
122 | 
123 |     it('throws if panel group panels are initialized incorrectly', () => {
124 |       let error;
125 |       try {
126 |         fixtureWithError.detectChanges();
127 |       } catch (e) {
128 |         error = e;
129 |       }
130 |       expect(error).toBeDefined();
131 |       expect(error instanceof Error).toBe(true);
132 |     })
133 |   });
134 | 
135 | 
136 |   describe("customized initialization", () => {
137 | 
138 |     let fixture: ComponentFixture<TestGroupPanelComponent>;
139 |     let panel: DebugElement;
140 | 
141 |     beforeEach(async(() => {
142 |       TestBed.configureTestingModule({
143 |         imports: [MdlExpansionPanelModule.forRoot(), NoopAnimationsModule],
144 |         declarations: [TestPanelHostComponent],
145 |       });
146 | 
147 |       TestBed.compileComponents().then(() => {
148 |         fixture = TestBed.createComponent(TestPanelHostComponent);
149 |         fixture.detectChanges();
150 | 
151 |         panel = fixture.debugElement.query(By.css("mdl-expansion-panel"));
152 |       });
153 |     }));
154 | 
155 |     it("should be disabled depending on input", () => {
156 |       expect(panel.classes).toEqual(
157 |         jasmine.objectContaining({disabled: true}),
158 |       );
159 |     });
160 | 
161 |     it("should be expanded depending on input", () => {
162 |       expect(panel.classes).toEqual(
163 |         jasmine.objectContaining({expanded: true}),
164 |       );
165 |     });
166 |   });
167 | });
168 | 
169 | @Component({
170 |   selector: 'test-component',
171 |   template: `
172 |     <mdl-expansion-panel #panel>
173 |       <mdl-expansion-panel-header></mdl-expansion-panel-header>
174 |       <mdl-expansion-panel-content><p>body</p></mdl-expansion-panel-content>
175 |     </mdl-expansion-panel>
176 |     <button (click)="panel.disabled = true"></button>
177 |   `
178 | })
179 | class TestSinglePanelComponent {}
180 | 
181 | @Component({
182 |   selector: 'test-group-component',
183 |   template: `
184 |     <mdl-expansion-panel-group #panelGroup>
185 |       <mdl-expansion-panel *ngFor="let i of [1,2,3]; let isFirst = first" [expanded]="isFirst">
186 |         <mdl-expansion-panel-header></mdl-expansion-panel-header>
187 |         <mdl-expansion-panel-content><p>body</p></mdl-expansion-panel-content>
188 |       </mdl-expansion-panel>
189 |     </mdl-expansion-panel-group>
190 |   `
191 | })
192 | class TestGroupPanelComponent {}
193 | 
194 | @Component({
195 |   selector: 'test-group-error',
196 |   template: `
197 |     <mdl-expansion-panel-group>
198 |       <mdl-expansion-panel *ngFor="let i of [1,2,3]" [expanded]="true">
199 |         <mdl-expansion-panel-header></mdl-expansion-panel-header>
200 |         <mdl-expansion-panel-content><p>body</p></mdl-expansion-panel-content>
201 |       </mdl-expansion-panel>
202 |     </mdl-expansion-panel-group>
203 |   `
204 | })
205 | class TestGroupPanelError {}
206 | 
207 | @Component({
208 |   selector: 'test-host-component',
209 |   template: `
210 |       <mdl-expansion-panel [disabled]="disabled" [expanded]="expanded">
211 |         <mdl-expansion-panel-header></mdl-expansion-panel-header>
212 |         <mdl-expansion-panel-content><p>body</p></mdl-expansion-panel-content>
213 |       </mdl-expansion-panel>
214 |   `
215 | })
216 | class TestPanelHostComponent {
217 |   public disabled: boolean = true;
218 |   public expanded: boolean = true;
219 | }
220 | 


--------------------------------------------------------------------------------
/src/components/expansion-panel/index.ts:
--------------------------------------------------------------------------------
1 | export * from './expansion-panel.component';


--------------------------------------------------------------------------------
/src/components/expansion-panel/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@angular-mdl/expansion-panel",
 3 |   "version": "6.0.0",
 4 |   "description": "Angular Material Design Lite - Extension Panel Component",
 5 |   "main": "./index.umd.js",
 6 |   "module": "./index.js",
 7 |   "typings": "./index.d.ts",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "git+https://github.com/mseemann/angular2-mdl-ext.git"
11 |   },
12 |   "keywords": [
13 |     "angular2",
14 |     "material design lite",
15 |     "expansion panel"
16 |   ],
17 |   "license": "MIT",
18 |   "bugs": {
19 |     "url": "https://github.com/mseemann/angular2-mdl-ext/issues"
20 |   },
21 |   "homepage": "https://github.com/mseemann/angular2-mdl-ext#readme",
22 |   "peerDependencies": {
23 |     "@angular-mdl/core": ">=4.0.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/fab-menu/README.md:
--------------------------------------------------------------------------------
 1 | # Select
 2 | 
 3 | ### Installing
 4 | 
 5 |     npm i --save @angular-mdl/popover @angular-mdl/fab-menu
 6 | 
 7 |     import { MdlSelectModule } from '@angular-mdl/fab-menu';
 8 | 
 9 | If you need to support IE11 please add https://www.npmjs.com/package/custom-event-polyfill
10 | to your polyfills.
11 | 
12 | ### Usage example
13 | 
14 | ```angular2html
15 | <mdl-fab-menu #mainFabMenu>
16 |     <mdl-fab-menu-item
17 |         [fabMenu]="mainFabMenu"
18 |         icon="note_add"
19 |         label="make a note"
20 |         (menu-clicked)="log('we need to do something here')">
21 |     </mdl-fab-menu-item>
22 |     <mdl-fab-menu-item
23 |         [fabMenu]="mainFabMenu"
24 |         icon="refresh"
25 |         label="refresh"
26 |         (menu-clicked)="/*do something here*/">
27 |     </mdl-fab-menu-item>
28 |     <mdl-fab-menu-item
29 |         [fabMenu]="mainFabMenu"
30 |         icon="refresh"
31 |         label="refresh"
32 |         (menu-clicked)="/*do something here*/">
33 |     </mdl-fab-menu-item>
34 | </mdl-fab-menu>
35 | ```
36 | #### forcing the tooltips to be displayed
37 | ```angular2html
38 | <mdl-fab-menu #mainFabMenu [alwaysShowTooltips]="true">
39 |     ...
40 | </mdl-fab-menu>
41 | ```
42 | 
43 | ### API Summary
44 | 
45 | #### mdl-fab-menu
46 | 
47 | | Name | Type | Description |
48 | | --- | --- | --- |
49 | | `[alwaysShowTooltips]` | boolean | decide if either or not the tooltips should always be displayed (let it unbinds to always display them on touch screens and on mouseover on "mouse-screen")
50 | 
51 | #### mdl-fab-menu-item
52 | 
53 | | Name | Type | Description |
54 | | --- | --- | --- |
55 | | `[fabMenu]` | MdlFabMenu | the enclosing menu
56 | | `[icon]` | string | mini-fab icon
57 | | `[label]` | string | tooltip content
58 | | `(menu-clicked)` | event<void> | the item has been clicked 
59 | 


--------------------------------------------------------------------------------
/src/components/fab-menu/fab-menu-item.html:
--------------------------------------------------------------------------------
1 | <button mdl-button mdl-button-type="mini-fab" (mouseover)="isHoovering = true" (mouseleave)="isHoovering = false" (click)="menuClick.emit()">
2 |   <mdl-icon>{{icon}}</mdl-icon>
3 | </button>
4 | <mdl-chip [mdl-label]="label" [hidden]="!(fabMenu.alwaysShowTooltips || isHoovering)"></mdl-chip>
5 | 
6 | 


--------------------------------------------------------------------------------
/src/components/fab-menu/fab-menu-item.scss:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: flex;
 3 |   flex-direction: row-reverse;
 4 |   margin-bottom: 1rem;
 5 | 
 6 |   .mdl-chip {
 7 |     display: inline-block;
 8 |   }
 9 |   .mdl-button {
10 |     margin: 0 0 0 2rem;
11 |     background: white;
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/fab-menu/fab-menu-item.ts:
--------------------------------------------------------------------------------
 1 | import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'
 2 | import {MdlFabMenuComponent} from './fab-menu'
 3 | 
 4 | @Component({
 5 |   moduleId: module.id,
 6 |   selector: 'mdl-fab-menu-item',
 7 |   templateUrl: 'fab-menu-item.html',
 8 |   styleUrls: ['fab-menu-item.scss']
 9 | })
10 | export class MdlFabMenuItemComponent implements OnInit {
11 | 
12 |   @Input()
13 |   label: string
14 |   @Input()
15 |   icon: string
16 |   @Input()
17 |   fabMenu: MdlFabMenuComponent
18 | 
19 |   @Output('menu-clicked')
20 |   menuClick: EventEmitter<any> = new EventEmitter()
21 | 
22 |   isHoovering: boolean = false
23 | 
24 |   constructor () {
25 |   }
26 | 
27 |   ngOnInit () {
28 |     this.isHoovering = false
29 |   }
30 | 
31 | }
32 | 


--------------------------------------------------------------------------------
/src/components/fab-menu/fab-menu.html:
--------------------------------------------------------------------------------
 1 | <button mdl-button
 2 |         mdl-button-type="fab"
 3 |         mdl-colored="primary"
 4 |         (click)="fabPopover.toggle($event)"
 5 |         (touchstart)="alwaysShowTooltips = true"
 6 | >
 7 |   <mdl-icon>add</mdl-icon>
 8 | </button>
 9 | <mdl-popover #fabPopover [hide-on-click]="true" [class.direction-up]="true">
10 |   <ng-content></ng-content>
11 | </mdl-popover>
12 | 


--------------------------------------------------------------------------------
/src/components/fab-menu/fab-menu.scss:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   position: fixed;
 3 |   right: 0.5rem;
 4 |   bottom: 0.5rem;
 5 |   z-index: 1000;
 6 | 
 7 |   .mdl-popover {
 8 |     background: none;
 9 |     &.direction-up {
10 |       bottom: 56px;
11 |     }
12 |     right: calc((56px - 40px)/2);
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/fab-menu/fab-menu.spec.ts:
--------------------------------------------------------------------------------
  1 | import {async, ComponentFixture, TestBed} from '@angular/core/testing'
  2 | import {MdlFabMenuComponent, MdlFabMenuModule} from './fab-menu'
  3 | import {Component, DebugElement} from '@angular/core'
  4 | import {By} from '@angular/platform-browser'
  5 | 
  6 | 
  7 | describe('MdlFabMenuComponent', () => {
  8 | 
  9 | 
 10 |   let fixture: ComponentFixture<TestMdlFabMenuComponent>;
 11 | 
 12 |   beforeEach(async(() => {
 13 |     TestBed.configureTestingModule({
 14 |       imports: [
 15 |         MdlFabMenuModule.forRoot()
 16 |       ],
 17 |       declarations: [TestMdlFabMenuComponent
 18 |       ],
 19 |       providers: []
 20 |     })
 21 | 
 22 |     TestBed.compileComponents().then(() => {
 23 |       fixture = TestBed.createComponent(TestMdlFabMenuComponent);
 24 |       fixture.detectChanges();
 25 |     });
 26 |   }));
 27 | 
 28 |   afterEach(() => {
 29 |     fixture = null
 30 |   })
 31 | 
 32 |   describe('FAB', () => {
 33 | 
 34 | 
 35 |     it('should instantiate the component', async(() => {
 36 |       expect(fixture).toBeDefined();
 37 |     }));
 38 | 
 39 |     it('should have the menu collapsed after the page loads', async(() => {
 40 |       let popoverComponent = fixture.debugElement.query(By.css('.mdl-popover'))
 41 |       let popoverComponentInstance = popoverComponent.componentInstance;
 42 | 
 43 |       expect(popoverComponentInstance.isVisible).toBeFalsy();
 44 | 
 45 |     }));
 46 | 
 47 |     it('should have the menu expanded after the user click once on the FAB', async(() => {
 48 |       let buttonComponent = fixture.debugElement.query(By.css('.mdl-button'))
 49 | 
 50 |       let popoverComponent = fixture.debugElement.query(By.css('.mdl-popover'))
 51 |       let popoverComponentInstance = popoverComponent.componentInstance;
 52 | 
 53 |       spyOn(popoverComponentInstance, 'toggle').and.callThrough();
 54 |       spyOn(popoverComponentInstance, 'show').and.callThrough();
 55 | 
 56 |       buttonComponent.nativeElement.click();
 57 | 
 58 |       expect(popoverComponentInstance.show)
 59 |           .toHaveBeenCalled();
 60 | 
 61 |       fixture.detectChanges();
 62 |       fixture.whenStable().then(() => {
 63 | 
 64 |         expect(popoverComponentInstance.isVisible).toBeTruthy();
 65 | 
 66 |       });
 67 | 
 68 | 
 69 |     }));
 70 | 
 71 |     it('should have the menu collapsed after the user click on one item', async(() => {
 72 | 
 73 |       let popoverComponent = fixture.debugElement.query(By.css('.mdl-popover'))
 74 | 
 75 |       let popoverNativeElement = popoverComponent.nativeElement;
 76 | 
 77 |       let buttonNativeElement = fixture.debugElement.query(By.css('.mdl-button')).nativeElement;
 78 | 
 79 |       let popoverComponentInstance = popoverComponent.componentInstance;
 80 | 
 81 |       let itemDebugElement: DebugElement = fixture.debugElement.query(By.css('#itemNotAlwaysTooltip > .mdl-button'))
 82 | 
 83 | 
 84 |       spyOn(popoverComponentInstance, 'toggle').and.callThrough();
 85 |       spyOn(popoverComponentInstance, 'hide').and.callThrough();
 86 | 
 87 |       buttonNativeElement.click();
 88 | 
 89 | 
 90 |       fixture.detectChanges();
 91 |       fixture.whenStable().then(() => {
 92 | 
 93 |         itemDebugElement.nativeElement.click()
 94 |         fixture.detectChanges();
 95 | 
 96 |         expect(popoverComponentInstance.hide)
 97 |             .toHaveBeenCalled();
 98 |         expect(popoverComponentInstance.isVisible)
 99 |             .toEqual(false, 'isVisible is not false');
100 | 
101 |         expect(popoverNativeElement.classList.contains('is-visible'))
102 |             .toBe(false, 'did has css class is-visible');
103 | 
104 |       });
105 | 
106 | 
107 |     }));
108 | 
109 | 
110 |     it('should toggle popover on button click', async(() => {
111 | 
112 |       let popoverComponent = fixture.debugElement.query(By.css('.mdl-popover'))
113 | 
114 |       let popoverNativeElement = popoverComponent.nativeElement;
115 | 
116 |       let buttonNativeElement = fixture.debugElement.query(By.css('.mdl-button')).nativeElement;
117 | 
118 |       let popoverComponentInstance = popoverComponent.componentInstance;
119 | 
120 |       expect(popoverComponentInstance.isVisible)
121 |           .toEqual(false, 'isVisible is not false');
122 | 
123 |       expect(popoverNativeElement.classList.contains('is-visible'))
124 |           .toBe(false, 'did has css class is-visible');
125 | 
126 |       spyOn(popoverComponentInstance, 'toggle').and.callThrough();
127 | 
128 |       spyOn(popoverComponentInstance, 'hideAllPopovers').and.callThrough();
129 | 
130 |       spyOn(popoverComponentInstance, 'updateDirection').and.callThrough();
131 | 
132 |       buttonNativeElement.click();
133 | 
134 |       expect(popoverComponentInstance.toggle).toHaveBeenCalled();
135 | 
136 |       expect(popoverComponentInstance.hideAllPopovers).toHaveBeenCalled();
137 | 
138 |       expect(popoverComponentInstance.updateDirection).toHaveBeenCalled();
139 | 
140 |       expect(popoverComponentInstance.isVisible)
141 |           .toEqual(true, 'toggle did not update isVisible to true');
142 | 
143 |       fixture.detectChanges();
144 |       fixture.whenStable().then(() => {
145 | 
146 |         expect(popoverNativeElement.classList.contains('is-visible'))
147 |             .toBe(true, 'did not has css class is-visible');
148 | 
149 |       });
150 | 
151 |     }));
152 | 
153 |   });
154 | 
155 |   describe('item tooltips', () => {
156 | 
157 | 
158 |     it('should not display tooltips after click on the FAB', async(() => {
159 | 
160 |       let buttonComponent = fixture.debugElement.query(By.css('.mdl-button'))
161 | 
162 |       let tooltipNotAlwaysElement: HTMLElement = fixture.debugElement.query(By.css('#itemNotAlwaysTooltip > mdl-chip')).nativeElement
163 |       //let el: HTMLElement = fixture.debugElement.query(By.directive(MdlChipComponent)).nativeElement;
164 | 
165 |       buttonComponent.nativeElement.click();
166 | 
167 |       fixture.detectChanges();
168 |       fixture.whenStable().then(() => {
169 | 
170 |         expect(tooltipNotAlwaysElement.hidden).toBe(true);
171 | 
172 |       });
173 | 
174 | 
175 |     }));
176 | 
177 |     it('should display tooltips on rollover', async(() => {
178 | 
179 |       let buttonComponent = fixture.debugElement.query(By.css('.mdl-button'))
180 | 
181 |       let tooltipNotAlwaysDebugElement: DebugElement = fixture.debugElement.query(By.css('#itemNotAlwaysTooltip > mdl-chip'))
182 | 
183 |       let tooltipNotAlwaysElement: HTMLElement = tooltipNotAlwaysDebugElement.nativeElement
184 | 
185 |       let itemDebugElement: HTMLElement = fixture.debugElement.query(By.css('#itemNotAlwaysTooltip > .mdl-button')).nativeElement
186 | 
187 |       buttonComponent.nativeElement.click();
188 | 
189 | 
190 |       fixture.detectChanges();
191 |       fixture.whenStable().then(() => {
192 | 
193 |         const eventover = new Event('mouseover')
194 |         itemDebugElement.dispatchEvent(eventover)
195 |         fixture.detectChanges()
196 |         expect(tooltipNotAlwaysElement.hidden).toBe(false);
197 |         const eventleave = new Event('mouseleave')
198 |         itemDebugElement.dispatchEvent(eventleave)
199 |         fixture.detectChanges()
200 |         expect(tooltipNotAlwaysElement.hidden).toBe(true);
201 | 
202 |       });
203 | 
204 | 
205 |     }));
206 | 
207 |     it('should display tooltips after click on the FAB', async(() => {
208 | 
209 |       let buttonComponent = fixture.debugElement.query(By.css('.mdl-button'))
210 | 
211 |       let tooltipAlwaysElement: HTMLElement = fixture.debugElement.query(By.css('#itemAlwaysTooltip > mdl-chip')).nativeElement
212 | 
213 |       buttonComponent.nativeElement.click();
214 | 
215 |       fixture.detectChanges();
216 |       fixture.whenStable().then(() => {
217 | 
218 |         expect(tooltipAlwaysElement.hidden).toBe(false);
219 | 
220 |       });
221 | 
222 | 
223 |     }));
224 | 
225 |     it('should display tooltips after touch start on the FAB', async(() => {
226 | 
227 |       let buttonElement = fixture.debugElement.query(By.css('.mdl-button')).nativeElement
228 | 
229 |       let tooltipAlwaysElement: HTMLElement = fixture.debugElement.query(By.css('#itemNotAlwaysTooltip > mdl-chip')).nativeElement
230 | 
231 |       const touchevent = new Event('touchstart')
232 |       buttonElement.dispatchEvent(touchevent)
233 |       fixture.detectChanges()
234 |       buttonElement.click();
235 | 
236 |       fixture.detectChanges();
237 |       fixture.whenStable().then(() => {
238 | 
239 |         expect(tooltipAlwaysElement.hidden).toBe(false);
240 | 
241 |       });
242 | 
243 | 
244 |     }));
245 | 
246 |   });
247 | 
248 | 
249 | });
250 | 
251 | 
252 | @Component({
253 |   template: `
254 |       <mdl-fab-menu #mainFabMenu>
255 |           <mdl-fab-menu-item id="itemNotAlwaysTooltip"
256 |                              [fabMenu]="mainFabMenu"
257 |                              icon="note_add"
258 |                              label="make a note"
259 |                              (menu-clicked)="logMessage('use want to make a note')">
260 |           </mdl-fab-menu-item>
261 |           <mdl-fab-menu-item
262 |                   [fabMenu]="mainFabMenu"
263 |                   icon="refresh"
264 |                   label="refresh"
265 |                   (menu-clicked)="logMessage('user elected to refresh!')">
266 |           </mdl-fab-menu-item>
267 |       </mdl-fab-menu>
268 |       <mdl-fab-menu #mainFabMenu2 [alwaysShowTooltips]="true">
269 |           <mdl-fab-menu-item id="itemAlwaysTooltip"
270 |                              [fabMenu]="mainFabMenu2"
271 |                              icon="note_add"
272 |                              label="make a note"
273 |                              (menu-clicked)="logMessage('use want to make a note')">
274 |           </mdl-fab-menu-item>
275 |           <mdl-fab-menu-item
276 |                   [fabMenu]="mainFabMenu2"
277 |                   icon="refresh"
278 |                   label="refresh"
279 |                   (menu-clicked)="logMessage('user elected to refresh!')">
280 |           </mdl-fab-menu-item>
281 |       </mdl-fab-menu>
282 |   `
283 | })
284 | class TestMdlFabMenuComponent {
285 |   logMessage (msg: string) {
286 |     console.log(msg)
287 |   }
288 | }
289 | 


--------------------------------------------------------------------------------
/src/components/fab-menu/fab-menu.ts:
--------------------------------------------------------------------------------
 1 | import {Component, Input, ModuleWithProviders, NgModule, OnInit} from '@angular/core'
 2 | import {CommonModule} from '@angular/common'
 3 | import {MdlPopoverModule} from '../popover/popover'
 4 | import {MdlFabMenuItemComponent} from './fab-menu-item'
 5 | import {MdlModule} from '@angular-mdl/core'
 6 | 
 7 | @Component({
 8 |   moduleId: module.id,
 9 |   selector: 'mdl-fab-menu',
10 |   templateUrl: 'fab-menu.html',
11 |   styleUrls: ['fab-menu.scss']
12 | })
13 | export class MdlFabMenuComponent implements OnInit {
14 | 
15 |   @Input()
16 |   alwaysShowTooltips: boolean
17 | 
18 |   constructor () {
19 |   }
20 | 
21 |   ngOnInit () {
22 |   }
23 | 
24 | }
25 | 
26 | @NgModule({
27 |   imports: [
28 |     CommonModule,
29 |     MdlModule,
30 |     MdlPopoverModule
31 |   ],
32 |   exports: [
33 |     MdlFabMenuComponent,
34 |     MdlFabMenuItemComponent
35 |   ],
36 |   declarations: [
37 |     MdlFabMenuComponent,
38 |     MdlFabMenuItemComponent
39 |   ]
40 | })
41 | export class MdlFabMenuModule {
42 |   static forRoot (): ModuleWithProviders {
43 |     return {
44 |       ngModule: MdlFabMenuModule,
45 |       providers: []
46 |     };
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/components/fab-menu/index.ts:
--------------------------------------------------------------------------------
1 | export * from './fab-menu-item';
2 | export * from './fab-menu';
3 | 


--------------------------------------------------------------------------------
/src/components/fab-menu/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@angular-mdl/fab-menu",
 3 |   "version": "6.0.0",
 4 |   "description": "Angular Material Design Lite - Fab menu Component",
 5 |   "main": "./index.umd.js",
 6 |   "module": "./index.js",
 7 |   "typings": "./index.d.ts",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "git+https://github.com/mseemann/angular2-mdl-ext.git"
11 |   },
12 |   "keywords": [
13 |     "angular2",
14 |     "material design lite",
15 |     "fab-menu"
16 |   ],
17 |   "license": "MIT",
18 |   "bugs": {
19 |     "url": "https://github.com/mseemann/angular2-mdl-ext/issues"
20 |   },
21 |   "homepage": "https://github.com/mseemann/angular2-mdl-ext#readme",
22 |   "peerDependencies": {
23 |     "@angular-mdl/core": ">=4.0.0",
24 |     "@angular-mdl/popover": ">=0.6.1"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/components/popover/README.md:
--------------------------------------------------------------------------------
 1 | # Popover
 2 | 
 3 | ### Installing
 4 | 
 5 |     npm i --save @angular-mdl/popover
 6 | 
 7 |     import { MdlPopoverModule } from '@angular-mdl/popover';
 8 | 
 9 | If you need to support IE11 please add https://www.npmjs.com/package/custom-event-polyfill
10 | to your polyfills.
11 | 
12 | ### Usage example
13 | 
14 |     <button
15 |         mdl-button
16 |         (click)="myPopover.toggle($event)"
17 |         mdl-button-type="icon"
18 |         mdl-ripple>
19 |       <mdl-icon>more_vert</mdl-icon>
20 |     </button>
21 |     
22 |     <mdl-popover #myPopover [style.width.px]="300">
23 |       <div mdl-shadow="6" style="padding: 1rem;">
24 |         <b>This is example popover</b> you can put any HTML content here.
25 |       </div>
26 |     </mdl-popover>
27 | 
28 | ### API Summary
29 | 
30 | #### mdl-popover
31 | 
32 | | Name | Type | Description |
33 | | --- | --- | --- |
34 | | `[hide-on-click]` | boolean | Hide popover on clicking inside it, default `false`
35 | | `[style.*]` | ... | Styling i.e. `[style.width.px]="300"`
36 | | `(onHide)` | ... | on hide event 
37 | | `(onShow)` | ... | on show event 
38 | 


--------------------------------------------------------------------------------
/src/components/popover/index.ts:
--------------------------------------------------------------------------------
1 | export * from './popover';


--------------------------------------------------------------------------------
/src/components/popover/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@angular-mdl/popover",
 3 |   "version": "6.0.0",
 4 |   "description": "Angular Material Design Lite - Popover Component",
 5 |   "main": "./index.umd.js",
 6 |   "module": "./index.js",
 7 |   "typings": "./index.d.ts",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "git+https://github.com/mseemann/angular2-mdl-ext.git"
11 |   },
12 |   "keywords": [
13 |     "angular2",
14 |     "material design lite",
15 |     "popover"
16 |   ],
17 |   "license": "MIT",
18 |   "bugs": {
19 |     "url": "https://github.com/mseemann/angular2-mdl-ext/issues"
20 |   },
21 |   "homepage": "https://github.com/mseemann/angular2-mdl-ext#readme",
22 |   "peerDependencies": {
23 |     "@angular-mdl/core": ">=4.0.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/popover/popover.html:
--------------------------------------------------------------------------------
1 | <ng-content></ng-content>
2 | 


--------------------------------------------------------------------------------
/src/components/popover/popover.scss:
--------------------------------------------------------------------------------
 1 | .mdl-popover {
 2 |   background: #fff;
 3 |   border: none;
 4 |   display: block;
 5 |   visibility: hidden;
 6 |   margin: 0;
 7 |   overflow: visible;
 8 |   padding: 0;
 9 |   position: absolute;
10 | 
11 |   &.is-visible,
12 |   &.is-animating {
13 |     visibility: visible;
14 |     z-index: 999;
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/popover/popover.spec.ts:
--------------------------------------------------------------------------------
  1 | import { TestBed, async, ComponentFixture } from '@angular/core/testing';
  2 | import { MdlPopoverModule, MdlPopoverComponent } from './popover';
  3 | import { Component } from '@angular/core';
  4 | import { By } from '@angular/platform-browser';
  5 | 
  6 | describe('MdlPopover', () => {
  7 | 
  8 |     let fixture: ComponentFixture<TestComponent>;
  9 | 
 10 |     beforeEach(async(() => {
 11 |         TestBed.configureTestingModule({
 12 |             imports: [MdlPopoverModule.forRoot()],
 13 |             declarations: [TestComponent],
 14 |         });
 15 | 
 16 |         TestBed.compileComponents().then(() => {
 17 |             fixture = TestBed.createComponent(TestComponent);
 18 |             fixture.detectChanges();
 19 |         });
 20 |     }));
 21 | 
 22 | 
 23 |     it('should create the component and add the mdl-popover css class', async(() => {
 24 | 
 25 |         let popoverComponent = fixture.debugElement.query(By.directive(MdlPopoverComponent));
 26 | 
 27 |         let popoverNativeElement = popoverComponent.nativeElement;
 28 | 
 29 |         expect(popoverNativeElement.classList.contains('mdl-popover'))
 30 |             .toBe(true, 'did not has css class mdl-popover')
 31 | 
 32 |     }));
 33 | 
 34 |     it('should hide on click outside of popover', async(() => {
 35 | 
 36 |         let popoverComponent = fixture.debugElement.query(By.directive(MdlPopoverComponent));
 37 | 
 38 |         let popoverComponentInstance = popoverComponent.componentInstance;
 39 | 
 40 |         popoverComponentInstance.isVisible = true;
 41 | 
 42 |         spyOn(popoverComponentInstance, 'hide').and.callThrough();
 43 | 
 44 |         spyOn(popoverComponentInstance.onHide, 'emit').and.callThrough();
 45 | 
 46 |         fixture.debugElement.nativeElement.click();
 47 | 
 48 |         expect(popoverComponentInstance.hide).toHaveBeenCalled();
 49 | 
 50 |         expect(popoverComponentInstance.onHide.emit).toHaveBeenCalled();
 51 |     }));
 52 | 
 53 |     it('should toggle popover on button click', async(() => {
 54 | 
 55 |         let popoverComponent = fixture.debugElement.query(By.directive(MdlPopoverComponent));
 56 | 
 57 |         let popoverNativeElement = popoverComponent.nativeElement;
 58 | 
 59 |         let buttonNativeElement = fixture.debugElement.query(By.css('button')).nativeElement;
 60 | 
 61 |         let popoverComponentInstance = popoverComponent.componentInstance;
 62 | 
 63 |         expect(popoverComponentInstance.isVisible)
 64 |             .toEqual(false, 'isVisible is not false');
 65 | 
 66 |         expect(popoverNativeElement.classList.contains('is-visible'))
 67 |             .toBe(false, 'did has css class is-visible');
 68 | 
 69 |         spyOn(popoverComponentInstance, 'toggle').and.callThrough();
 70 | 
 71 |         spyOn(popoverComponentInstance, 'show').and.callThrough();
 72 | 
 73 |         spyOn(popoverComponentInstance.onShow, 'emit').and.callThrough();
 74 | 
 75 |         spyOn(popoverComponentInstance, 'hideAllPopovers').and.callThrough();
 76 | 
 77 |         spyOn(popoverComponentInstance, 'updateDirection').and.callThrough();
 78 | 
 79 |         buttonNativeElement.click();
 80 | 
 81 |         expect(popoverComponentInstance.toggle).toHaveBeenCalled();
 82 | 
 83 |         expect(popoverComponentInstance.show).toHaveBeenCalled();
 84 | 
 85 |         expect(popoverComponentInstance.onShow.emit).toHaveBeenCalled();
 86 | 
 87 |         expect(popoverComponentInstance.hideAllPopovers).toHaveBeenCalled();
 88 | 
 89 |         expect(popoverComponentInstance.updateDirection).toHaveBeenCalled();
 90 | 
 91 |         expect(popoverComponentInstance.isVisible)
 92 |             .toEqual(true, 'toggle did not update isVisible to true');
 93 | 
 94 |         fixture.detectChanges();
 95 |         fixture.whenStable().then(() => {
 96 | 
 97 |             expect(popoverNativeElement.classList.contains('is-visible'))
 98 |                 .toBe(true, 'did not has css class is-visible');
 99 |         });
100 |     }));
101 | 
102 |     it('should toggle popover on another popover opening', async(() => {
103 | 
104 |         let popoverComponent = fixture.debugElement.query(By.directive(MdlPopoverComponent));
105 |         let popoverNativeElement = popoverComponent.nativeElement;
106 |         let buttonNativeElement = fixture.debugElement.query(By.css('button')).nativeElement;
107 |         let popoverComponentInstance = popoverComponent.componentInstance;
108 |         let anotherButtonNativeElement = fixture.debugElement.query(By.css('#anotherButton')).nativeElement;
109 |         let anotherPopoverComponentInstance = fixture.debugElement.query(By.css('#anotherPopover')).componentInstance;
110 | 
111 |         expect(popoverComponentInstance.isVisible)
112 |             .toEqual(false, 'isVisible is not false');
113 | 
114 |         expect(popoverNativeElement.classList.contains('is-visible'))
115 |             .toBe(false, 'did has css class is-visible');
116 | 
117 |         spyOn(popoverComponentInstance, 'toggle').and.callThrough();
118 | 
119 |         spyOn(popoverComponentInstance, 'hideAllPopovers').and.callThrough();
120 | 
121 |         spyOn(popoverComponentInstance, 'updateDirection').and.callThrough();
122 | 
123 |         buttonNativeElement.click();
124 | 
125 |         expect(popoverComponentInstance.toggle).toHaveBeenCalled();
126 | 
127 |         expect(popoverComponentInstance.hideAllPopovers).toHaveBeenCalled();
128 | 
129 |         expect(popoverComponentInstance.updateDirection).toHaveBeenCalled();
130 | 
131 |         expect(popoverComponentInstance.isVisible)
132 |             .toEqual(true, 'toggle did not update isVisible to true');
133 | 
134 |         fixture.detectChanges();
135 |         fixture.whenStable().then(() => {
136 | 
137 |             expect(popoverNativeElement.classList.contains('is-visible'))
138 |                 .toBe(true, 'did not has css class is-visible');
139 |         });
140 | 
141 |         let hideAllPopoversSpy = spyOn(anotherPopoverComponentInstance, 'hideAllPopovers').and.callThrough();
142 | 
143 |         anotherButtonNativeElement.click();
144 | 
145 |         fixture.whenStable().then(() => {
146 |             expect(hideAllPopoversSpy).toHaveBeenCalled();
147 |             expect(anotherPopoverComponentInstance.isVisible).toBe(true, 'second popover did not show');
148 |             expect(popoverComponentInstance.isVisible).toBe(false, 'main popover did not hide');
149 |         });
150 |     }));
151 | 
152 |     it('should use user specified popover position', async(async () => {
153 |         let popoverComponent = fixture.debugElement.query(By.css('#positionPopover'));
154 |         let popoverNativeElement = popoverComponent.nativeElement;
155 |         let popoverComponentInstance = popoverComponent.componentInstance;
156 | 
157 |         let buttonNativeElement = fixture.debugElement.query(By.css('#positionPopoverButton')).nativeElement;
158 | 
159 |         expect(popoverComponentInstance.isVisible)
160 |             .toEqual(false, 'isVisible is not false');
161 | 
162 |         expect(popoverNativeElement.classList.contains('is-visible'))
163 |             .toBe(false, 'has not css class is-visible');
164 | 
165 |         spyOn(popoverComponentInstance, 'toggle').and.callThrough();
166 | 
167 |         spyOn(popoverComponentInstance, 'hideAllPopovers').and.callThrough();
168 | 
169 |         spyOn(popoverComponentInstance, 'updateDirection').and.callThrough();
170 | 
171 |         buttonNativeElement.click();
172 | 
173 |         expect(popoverComponentInstance.toggle).toHaveBeenCalled();
174 | 
175 |         expect(popoverComponentInstance.hideAllPopovers).toHaveBeenCalled();
176 | 
177 |         expect(popoverComponentInstance.updateDirection).toHaveBeenCalled();
178 | 
179 |         expect(popoverComponentInstance.isVisible)
180 |             .toEqual(true, 'toggle did not update isVisible to true');
181 | 
182 |         fixture.detectChanges();
183 |         await fixture.whenStable();
184 |         expect(popoverNativeElement.classList.contains('is-visible'))
185 |             .toBe(true, 'did not has css class is-visible');
186 | 
187 |         spyOn(popoverComponentInstance, 'hide').and.callThrough();
188 |         popoverComponentInstance.hide();
189 | 
190 |         fixture.detectChanges();
191 |         await fixture.whenStable();
192 |         expect(popoverNativeElement.classList.contains('is-visible'))
193 |             .toBe(false, 'has not css class is-visible');
194 | 
195 |         const allOtherPositions = ['bottom-right', 'top-left', 'top-right', 'non-existent-one!'];
196 |         for (const position of allOtherPositions) {
197 |             popoverComponentInstance.position = position;
198 |             buttonNativeElement.click();
199 | 
200 |             fixture.detectChanges();
201 |             await fixture.whenStable();
202 |             expect(popoverNativeElement.classList.contains('is-visible'))
203 |                 .toBe(true, 'did not has css class is-visible');
204 | 
205 |             popoverComponentInstance.hide();
206 | 
207 |             fixture.detectChanges();
208 |             await fixture.whenStable();
209 |             expect(popoverNativeElement.classList.contains('is-visible'))
210 |                 .toBe(false, 'has not css class is-visible');
211 |         }
212 |     }));
213 | });
214 | 
215 | @Component({
216 |     selector: 'test-component',
217 |     template: `
218 |       <button id="mainButton" (click)="popover.toggle($event)">button</button>
219 |       <mdl-popover id="mainPopover" #popover>popover content</mdl-popover>
220 | 
221 |       <button (click)="anotherPopover.toggle($event)" id="anotherButton">button</button>
222 |       <mdl-popover id="anotherPopover" #anotherPopover>fubar</mdl-popover>
223 | 
224 |       <button id="positionPopoverButton" #positionPopoverButton (click)="positionPopover.toggle($event, positionPopoverButton)">button</button>
225 |       <mdl-popover id="positionPopover" #positionPopover mdl-popover-position="bottom-left">popover with position set</mdl-popover>
226 |     `
227 | })
228 | class TestComponent { }
229 | 


--------------------------------------------------------------------------------
/src/components/popover/popover.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |     ChangeDetectorRef,
  3 |     Component,
  4 |     ElementRef,
  5 |     EventEmitter,
  6 |     HostBinding,
  7 |     HostListener,
  8 |     Inject,
  9 |     Injectable,
 10 |     Input,
 11 |     ModuleWithProviders,
 12 |     NgModule,
 13 |     Output,
 14 |     ViewEncapsulation,
 15 | } from '@angular/core';
 16 | import { DOCUMENT } from '@angular/platform-browser';
 17 | import { MdlButtonComponent } from '@angular-mdl/core';
 18 | 
 19 | @Injectable()
 20 | export class MdlPopoverRegistry {
 21 |     private popoverComponents: any[] = [];
 22 | 
 23 |     constructor(@Inject(DOCUMENT) private doc: any) {
 24 |         this.doc.addEventListener('click', () => {
 25 |             this.popoverComponents
 26 |                 .filter((component: MdlPopoverComponent) => component.isVisible)
 27 |                 .forEach((component: MdlPopoverComponent) => component.hide());
 28 |         });
 29 |     };
 30 | 
 31 |     public add(popoverComponent: MdlPopoverComponent) {
 32 |         this.popoverComponents.push(popoverComponent);
 33 |     }
 34 | 
 35 |     public remove(popoverComponent: MdlPopoverComponent) {
 36 |         this.popoverComponents.slice(this.popoverComponents.indexOf(popoverComponent), 1);
 37 |     }
 38 | 
 39 |     public hideAllExcept(popoverComponent: MdlPopoverComponent) {
 40 |         this.popoverComponents.forEach((component) => {
 41 |             if (component !== popoverComponent) {
 42 |                 component.hide();
 43 |             }
 44 |         });
 45 |     }
 46 | }
 47 | 
 48 | const BOTTOM_LEFT = 'bottom-left'; // Below the element, aligned to its left.
 49 | const BOTTOM_RIGHT = 'bottom-right'; // Below the element, aligned to its right.
 50 | const TOP_LEFT = 'top-left'; // Above the element, aligned to its left.
 51 | const TOP_RIGHT = 'top-right'; // Above the element, aligned to its right.
 52 | 
 53 | export interface IPositionCoordinates {
 54 |     left: number;
 55 |     top: number;
 56 | }
 57 | 
 58 | @Injectable()
 59 | export class PopupPositionService {
 60 |     public updatePosition(forElement: HTMLElement, popoverElement: HTMLElement, position: string): void {
 61 |         const coordinates = this.calculateCoordinates(forElement, popoverElement, position);
 62 |         this.applyCoordinates(coordinates, popoverElement.style);
 63 |     }
 64 | 
 65 |     private applyCoordinates(coordinates: IPositionCoordinates, elementStyle: CSSStyleDeclaration) {
 66 |         if (!coordinates) {
 67 |             return;
 68 |         }
 69 | 
 70 |         elementStyle.right =
 71 |         elementStyle.bottom = '';
 72 | 
 73 |         elementStyle.left = coordinates.left + 'px';
 74 |         elementStyle.top = coordinates.top + 'px';
 75 |     }
 76 | 
 77 |     private calculateCoordinates(forElement: HTMLElement, popoverElement: HTMLElement, position: string): IPositionCoordinates {
 78 |         if (!forElement || !position) {
 79 |             return null;
 80 |         }
 81 | 
 82 |         switch (position) {
 83 |             case BOTTOM_RIGHT:
 84 |                 return {
 85 |                     top: forElement.offsetTop + forElement.offsetHeight,
 86 |                     left: forElement.offsetLeft + forElement.offsetWidth - popoverElement.offsetWidth
 87 |                 };
 88 |             case BOTTOM_LEFT:
 89 |                 return {
 90 |                     top: forElement.offsetTop + forElement.offsetHeight,
 91 |                     left: forElement.offsetLeft
 92 |                 };
 93 |             case TOP_LEFT:
 94 |                 return {
 95 |                     top: forElement.offsetTop - popoverElement.offsetHeight,
 96 |                     left: forElement.offsetLeft
 97 |                 };
 98 |             case TOP_RIGHT:
 99 |                 return {
100 |                     top: forElement.offsetTop - popoverElement.offsetHeight,
101 |                     left: forElement.offsetLeft + forElement.offsetWidth - popoverElement.offsetWidth
102 |                 };
103 |         }
104 |     }
105 | }
106 | 
107 | @Component({
108 |     moduleId: module.id,
109 |     selector: 'mdl-popover',
110 |     host: {
111 |         '[class.mdl-popover]': 'true'
112 |     },
113 |     templateUrl: 'popover.html',
114 |     encapsulation: ViewEncapsulation.None,
115 | })
116 | export class MdlPopoverComponent {
117 |     @Input('hide-on-click') public hideOnClick: boolean = false;
118 |     @Input('mdl-popover-position') public position: string;
119 |     @Output() onShow: EventEmitter<any> = new EventEmitter();
120 |     @Output() onHide: EventEmitter<any> = new EventEmitter();
121 |     @HostBinding('class.is-visible') public isVisible = false;
122 |     @HostListener('click', ['$event']) onClick(event: Event) {
123 |         if (!this.hideOnClick) {
124 |             event.stopPropagation();
125 |         }
126 |     }
127 | 
128 |     constructor(private changeDetectionRef: ChangeDetectorRef,
129 |         public elementRef: ElementRef,
130 |         private popoverRegistry: MdlPopoverRegistry,
131 |         private popupPositionService: PopupPositionService) {
132 |         this.popoverRegistry.add(this);
133 |     }
134 | 
135 |     public ngOnDestroy() {
136 |         this.popoverRegistry.remove(this);
137 |     }
138 | 
139 |     public toggle(event: Event, forElement: any = null) {
140 |         if (this.isVisible) {
141 |             this.hide();
142 |         } else {
143 |             this.show(event, forElement);
144 |         }
145 |     }
146 | 
147 |     public hide() {
148 |         if (this.isVisible) {
149 |             this.onHide.emit(null);
150 |             this.isVisible = false;
151 |             this.changeDetectionRef.markForCheck();
152 |         }
153 |     }
154 | 
155 |     private hideAllPopovers() {
156 |         this.popoverRegistry.hideAllExcept(this);
157 |     }
158 | 
159 |     public show(event: Event, forElement: any = null) {
160 |         this.hideAllPopovers();
161 |         event.stopPropagation();
162 |         if (!this.isVisible) {
163 |             this.onShow.emit(null);
164 |             this.isVisible = true;
165 |             this.updateDirection(event, forElement);
166 |         }
167 |     }
168 | 
169 |     private updateDirection(event: Event, forElement: any) {
170 |         if (forElement && this.position) {
171 |             const popoverElement = this.elementRef.nativeElement;
172 |             
173 |             const forHtmlElement = this.getHtmlElement(forElement);
174 |             this.popupPositionService.updatePosition(forHtmlElement, popoverElement, this.position);
175 |             this.changeDetectionRef.markForCheck();
176 |             return;
177 |         }
178 |     }
179 | 
180 |     private getHtmlElement(forElement: any): HTMLElement {
181 |         if (forElement instanceof MdlButtonComponent) {
182 |             const buttonComponent = <MdlButtonComponent>forElement;
183 |             return buttonComponent.elementRef.nativeElement;
184 |         }
185 | 
186 |         if (forElement instanceof ElementRef) {
187 |             const elementRef = <ElementRef>forElement;
188 |             return elementRef.nativeElement;
189 |         }
190 | 
191 |         return forElement;
192 |     }
193 | }
194 | 
195 | @NgModule({
196 |     imports: [],
197 |     exports: [MdlPopoverComponent],
198 |     declarations: [MdlPopoverComponent],
199 |     providers: [MdlPopoverRegistry, PopupPositionService],
200 | })
201 | export class MdlPopoverModule {
202 |     static forRoot(): ModuleWithProviders {
203 |         return {
204 |             ngModule: MdlPopoverModule,
205 |             providers: []
206 |         };
207 |     }
208 | }
209 | 


--------------------------------------------------------------------------------
/src/components/select/README.md:
--------------------------------------------------------------------------------
 1 | # Select
 2 | 
 3 | ### Installing
 4 | 
 5 |     npm i --save @angular-mdl/popover @angular-mdl/select
 6 | 
 7 |     import { MdlSelectModule } from '@angular-mdl/select';
 8 | 
 9 | If you need to support IE11 please add https://www.npmjs.com/package/custom-event-polyfill
10 | to your polyfills.
11 | 
12 | ### Usage example
13 | 
14 | ```js
15 | <mdl-select [(ngModel)]="personId">
16 |     <mdl-option *ngFor="let p of people" [value]="p.id">{{p.name}}</mdl-option>
17 | </mdl-select>
18 | ```
19 | #### using placeholder
20 | ```js
21 | <mdl-select placeholder="Person Name" [(ngModel)]="personId">
22 |     <mdl-option *ngFor="let p of people" [value]="p.id">{{p.name}}</mdl-option>
23 | </mdl-select>
24 | ```
25 | 
26 | #### using label with floating label
27 | ```js
28 | <mdl-select label="{{personLabel}}" floating-label [(ngModel)]="personId">
29 |     <mdl-option *ngFor="let p of people" [value]="p.id">{{p.name}}</mdl-option>
30 | </mdl-select>
31 | ```
32 | 
33 | ### API Summary
34 | 
35 | #### mdl-select
36 | 
37 | | Name | Type | Description |
38 | | --- | --- | --- |
39 | | `[ngModel]` | any | Select data binding
40 | | `[disabled]` | boolean | Whether or not the select is disabled
41 | | `[placeholder]` | string | Placeholder text
42 | | `[label]` | string | Label text
43 | | `[floating-label]` | any | If present or true the ```label``` will be floating on ```focus``` event
44 | | `[multiple]` | boolean | Multiselect mode
45 | | `[autocomplete]` | boolean | Autocomplete mode
46 | | `(blur)` | ... | on blur event
47 | | `(change)` | ... | on change event
48 | 
49 | #### mdl-option
50 | 
51 | | Name | Type | Description |
52 | | --- | --- | --- |
53 | | `[value]` | any | Option value
54 | | `[disabled]` | boolean | Whether or not the option is disabled
55 | | `<content>` | string | Option label
56 | 


--------------------------------------------------------------------------------
/src/components/select/index.ts:
--------------------------------------------------------------------------------
1 | export * from './option';
2 | export * from './select';
3 | 


--------------------------------------------------------------------------------
/src/components/select/keyboard.ts:
--------------------------------------------------------------------------------
 1 | export enum Key {
 2 |     Tab = 9,
 3 |     Enter = 13,
 4 |     Escape = 27,
 5 |     UpArrow = 38,
 6 |     DownArrow = 40,
 7 | 
 8 |     A = 65,
 9 |     B = 66,
10 |     C = 67,
11 |     D = 68,
12 |     E = 69,
13 |     F = 70,
14 |     G = 71,
15 |     H = 72,
16 |     I = 73,
17 |     J = 74,
18 |     K = 75,
19 |     L = 76,
20 |     M = 77,
21 |     N = 78,
22 |     O = 79,
23 |     P = 80,
24 |     Q = 81,
25 |     R = 82,
26 |     S = 83,
27 |     T = 84,
28 |     U = 85,
29 |     V = 86,
30 |     W = 87,
31 |     X = 88,
32 |     Y = 89,
33 |     Z = 90,
34 | }
35 | 
36 | export function keyboardEventKeyCode($event: KeyboardEvent) : number {
37 |     return ($event.which || $event.charCode || $event.keyCode);
38 | }
39 | 
40 | export function keyboardEventKey($event: KeyboardEvent) : string {
41 |     return $event.key || String.fromCharCode(keyboardEventKeyCode($event));
42 | }
43 | 
44 | export function isKey($event: KeyboardEvent, ...keys: Key[]) : boolean {
45 |     return keys.indexOf(keyboardEventKeyCode($event)) !== -1;
46 | }
47 | 
48 | export function isCharacterKey($event: KeyboardEvent) : boolean {
49 |     const keyCode = keyboardEventKeyCode($event);
50 |     return !!String.fromCharCode(keyCode) && keyCode >= 48 && keyCode <= 90;
51 | }
52 | 


--------------------------------------------------------------------------------
/src/components/select/option.html:
--------------------------------------------------------------------------------
 1 | <div
 2 |     class="mdl-list__item"
 3 |     (click)="select($event)"
 4 |     [class.is-active]="selected">
 5 | 
 6 |   <div *ngIf="multiple" class="mdl-list__item-secondary-action">
 7 |     <div class="mdl-checkbox is-upgraded" [class.is-checked]="selected">
 8 |       <input type="checkbox" class="mdl-checkbox__input">
 9 |       <span class="mdl-checkbox__label"></span>
10 |       <span class="mdl-checkbox__focus-helper"></span>
11 |       <span class="mdl-checkbox__box-outline">
12 |         <span class="mdl-checkbox__tick-outline"></span>
13 |       </span>
14 |     </div>
15 |   </div>
16 | 
17 |   <div #contentWrapper class="mdl-list__item-primary-content">
18 |     <ng-content></ng-content>
19 |   </div>
20 | 
21 | </div>
22 | 


--------------------------------------------------------------------------------
/src/components/select/option.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Component,
 3 |   ChangeDetectorRef,
 4 |   ElementRef,
 5 |   Input,
 6 |   ViewChild
 7 | } from '@angular/core';
 8 | 
 9 | @Component({
10 |   moduleId: module.id,
11 |   selector: 'mdl-option',
12 |   host: {
13 |     '[class.mdl-option__container]': 'true',
14 |     '[class.mdl-option--disabled]': 'disabled'
15 |   },
16 |   templateUrl: 'option.html'
17 | })
18 | export class MdlOptionComponent {
19 |   @Input('disabled') public disabled = false;
20 |   @Input('value') public value: any;
21 |   @ViewChild('contentWrapper') contentWrapper: ElementRef;
22 |   public text: any;
23 |   public multiple: boolean = false;
24 |   public selected: boolean = false;
25 |   public onSelect: any = Function.prototype;
26 | 
27 |   constructor(private changeDetectionRef: ChangeDetectorRef) {}
28 | 
29 |   public select(event: Event) {
30 |     if (this.disabled) {
31 |       event.stopPropagation();
32 |       event.preventDefault();
33 |     } else {
34 |       this.onSelect(this.value);
35 |     }
36 |   }
37 | 
38 |   public setMultiple(multiple: boolean) {
39 |     this.multiple = multiple;
40 |     this.changeDetectionRef.detectChanges();
41 |   }
42 | 
43 |   public updateSelected(value: any) {
44 |     if (this.multiple) {
45 |       this.selected = (value.map((v: any) => this.stringifyValue(v)).indexOf(this.stringValue) != -1);
46 |     } else {
47 |       this.selected = this.value == value;
48 |     }
49 |     if (!(<any>this.changeDetectionRef)['destroyed']) {
50 |         this.changeDetectionRef.detectChanges();
51 |     }
52 |   }
53 | 
54 |   ngAfterViewInit() {
55 |     this.text = this.contentWrapper.nativeElement.textContent.trim();
56 |   }
57 | 
58 |   get stringValue(): string {
59 |     return this.stringifyValue(this.value);
60 |   }
61 | 
62 |   private stringifyValue(value: any): string {
63 |     switch (typeof value) {
64 |       case 'number': return String(value);
65 |       case 'object': return JSON.stringify(value);
66 |       default: return (!!value) ? String(value) : '';
67 |     }
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/src/components/select/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@angular-mdl/select",
 3 |   "version": "6.0.0",
 4 |   "description": "Angular Material Design Lite - Select Component",
 5 |   "main": "./index.umd.js",
 6 |   "module": "./index.js",
 7 |   "typings": "./index.d.ts",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "git+https://github.com/mseemann/angular2-mdl-ext.git"
11 |   },
12 |   "keywords": [
13 |     "angular2",
14 |     "material design lite",
15 |     "select"
16 |   ],
17 |   "license": "MIT",
18 |   "bugs": {
19 |     "url": "https://github.com/mseemann/angular2-mdl-ext/issues"
20 |   },
21 |   "homepage": "https://github.com/mseemann/angular2-mdl-ext#readme",
22 |   "peerDependencies": {
23 |     "@angular-mdl/core": ">=4.0.0",
24 |     "@angular-mdl/popover": ">=0.8.0"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/components/select/select.html:
--------------------------------------------------------------------------------
 1 | <div
 2 |   class="mdl-textfield is-upgraded"
 3 |   [class.is-focused]="popoverComponent.isVisible || focused"
 4 |   [class.is-disabled]="disabled"
 5 |   [class.is-dirty]="isDirty()"
 6 | >
 7 |   <span
 8 |       [attr.tabindex]="!disabled ? 0 : null"
 9 |       (focus)="onFocus($event);">
10 |   </span>
11 |   <input #selectInput tabindex="-1"
12 |       [readonly]="disabled || !autocomplete"
13 |       class="mdl-textfield__input"
14 |       (click)="toggle($event)"
15 |       (change)="$event.stopPropagation()"
16 |       (focus)="onInputFocus($event);"
17 |       [placeholder]="placeholder ? placeholder : ''"
18 |       [attr.id]="textfieldId"
19 |       [value]="text">
20 |   <span
21 |       class="mdl-select__toggle material-icons"
22 |       (click)="toggle($event)">
23 |     keyboard_arrow_down
24 |   </span>
25 |   <label class="mdl-textfield__label" [attr.for]="textfieldId">{{ label }}</label>
26 |   <span class="mdl-textfield__error"></span>
27 |   <mdl-popover #popover tabindex="-1"
28 |                [class.direction-up]="directionUp"
29 |                [class.mdl-popover--above]="autocomplete"
30 |                [hide-on-click]="!multiple"
31 |                [style.minWidth.%]="100">
32 |     <div class="mdl-list mdl-shadow--6dp">
33 |       <ng-content *ngIf="popoverComponent.isVisible"></ng-content>
34 |     </div>
35 |   </mdl-popover>
36 | </div>
37 | 


--------------------------------------------------------------------------------
/src/components/select/select.scss:
--------------------------------------------------------------------------------
  1 | // the path must be absolute becase gulp-scss is not able to use the webpack shorthand!
  2 | @import "../../../node_modules/@angular-mdl/core/scss/variables";
  3 | $input-text-focus-border-width: 2px;
  4 | $popover-direction-up-bottom-offset: $input-text-vertical-spacing + $input-text-focus-border-width;
  5 | 
  6 | .mdl-select {
  7 |   &--floating-label {
  8 |     @extend .mdl-textfield--floating-label !optional;
  9 |     
 10 |     .mdl-textfield {
 11 |       &.is-dirty {
 12 |         @extend .mdl-textfield--floating-label.is-dirty !optional;
 13 |       }
 14 |     }
 15 | 
 16 |     padding: 0;
 17 | 
 18 |     .mdl-textfield__label {
 19 |       &:after {
 20 |         @extend .mdl-textfield__label:after !optional;
 21 |       }
 22 | 
 23 |       &.is-dirty {
 24 |         &:after {
 25 |           @extend .mdl-textfield__label.is-dirty:after !optional;
 26 |         }
 27 |       }
 28 |     }
 29 |   }
 30 | 
 31 |   .mdl-popover.direction-up {
 32 |     bottom: $popover-direction-up-bottom-offset;
 33 |     &.mdl-popover--above {
 34 |       bottom: $popover-direction-up-bottom-offset + $input-text-vertical-spacing + $input-text-font-size + $input-text-padding * 2;
 35 |     }
 36 |   }
 37 | 
 38 |   &__toggle {
 39 |     cursor: pointer;
 40 |     float: right;
 41 |     margin-top: -1.75rem;
 42 |   }
 43 | 
 44 |   .mdl-textfield {
 45 |     &__input {
 46 |       box-sizing: border-box;
 47 |       cursor: pointer;
 48 |       overflow: hidden;
 49 |       padding-right: 1.5rem;
 50 |       text-overflow: ellipsis;
 51 |       white-space: nowrap;
 52 | 
 53 |       &:focus {
 54 |         outline: none;
 55 |       }
 56 |     }
 57 | 
 58 |     &.is-focused {
 59 |       .mdl-select__toggle {
 60 |         color: $input-text-highlight-color;
 61 |       }
 62 |     }
 63 | 
 64 |     &.is-invalid {
 65 |       .mdl-select__toggle {
 66 |         color: $input-text-error-color;
 67 |       }
 68 |     }
 69 | 
 70 |     &.is-disabled {
 71 |       .mdl-select__toggle {
 72 |         color: $input-text-disabled-text-color;
 73 |       }
 74 |     }
 75 |   }
 76 | 
 77 |   .mdl-list {
 78 |     max-height: 280px;
 79 |     overflow-y: auto;
 80 |     padding: 0;
 81 | 
 82 |     &__item {
 83 |       cursor: pointer;
 84 | 
 85 |       &:hover {
 86 |         background-color: $default-item-hover-bg-color;
 87 |       }
 88 | 
 89 |       &.is-active {
 90 |         color: $checkbox-color;
 91 |         background-color: $default-item-active-bg-color;
 92 |       }
 93 |     }
 94 |   }
 95 | 
 96 |   .mdl-option--disabled {
 97 |     .mdl-list {
 98 |       &__item {
 99 |         cursor: default;
100 |         opacity: .5;
101 |       }
102 |     }
103 |   }
104 | }
105 | 


--------------------------------------------------------------------------------
/src/components/system-config-spec.ts:
--------------------------------------------------------------------------------
 1 | // here you need to add your component - e.g the name of the folder in the components directorty
 2 | const components = [
 3 |     'datepicker',
 4 |     'expansion-panel',
 5 |     'fab-menu',
 6 |     'popover',
 7 |     'select'
 8 | ];
 9 | 
10 | const angularPackages = [
11 |     'core',
12 |     'forms',
13 |     'common',
14 |     'compiler',
15 |     'platform-browser',
16 |     'platform-browser-dynamic',
17 |     'http',
18 |     'router',
19 |     'animations'
20 | ];
21 | 
22 | const vendorPackages: any = {};
23 | 
24 | angularPackages.forEach(name => {
25 |     vendorPackages[`@angular/${name}`] = { main: `bundles/${name}.umd.js` };
26 |     vendorPackages[`@angular/${name}/testing`] = { main: `../bundles/${name}-testing.umd.js` };
27 | });
28 | 
29 | vendorPackages[`@angular/platform-browser/animations`] = { main: `../bundles/platform-browser-animations.umd.js` };
30 | vendorPackages[`@angular/animations/browser`] = { main: `../bundles/animations-browser.umd.js` };
31 | vendorPackages[`@angular-mdl/core`] = { main: `bundle/core.js`};
32 | 
33 | vendorPackages['rxjs'] = { main: 'index.js'};
34 | vendorPackages['rxjs/operators'] = { main: 'index.js' };
35 | 
36 | vendorPackages['moment'] = { main: 'min/moment.min.js'};
37 | 
38 | /** Type declaration for ambient System. */
39 | declare var System: any;
40 | 
41 | // Apply the vendor package configuration
42 | System.config({
43 |     map: {
44 |         '@angular': 'vendor/@angular',
45 |         '@angular-mdl/core': 'vendor/@angular-mdl/core',
46 |         'rxjs': 'vendor/rxjs',
47 |         'moment': 'vendor/moment'
48 |     },
49 |     packages: vendorPackages
50 | });
51 | 
52 | 
53 | /** Map relative paths to URLs. */
54 | const map: any = {};
55 | /** User packages configuration. */
56 | const packages: any = {};
57 | 
58 | components.forEach(name => {
59 |     packages[`@angular-mdl/${name}`] = {
60 |         format: 'cjs',
61 |         defaultExtension: 'js',
62 |         main: 'index'
63 |     };
64 | });
65 | 
66 | 
67 | // Apply the user's configuration.
68 | System.config({ map, packages });
69 | 


--------------------------------------------------------------------------------
/src/components/tsconfig-ngc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "declaration": true,
 4 |     "emitDecoratorMetadata": true,
 5 |     "experimentalDecorators": true,
 6 |     "lib": ["es6", "es2015", "dom"],
 7 |     "sourceMap": true,
 8 |     "module": "es2015",
 9 |     "moduleResolution": "node",
10 |     "noEmitOnError": true,
11 |     "noImplicitAny": true,
12 |     "outDir": "../../dist/@angular-mdl",
13 |     "rootDir": ".",
14 |     "target": "es5",
15 |     "stripInternal": true,
16 |     "baseUrl": "",
17 |     "types": [
18 |       "node"
19 |     ]
20 |   },
21 |   "exclude": [
22 |     "**/*.spec.ts"
23 |   ],
24 |   "angularCompilerOptions": {
25 |     "strictMetadataEmit": true,
26 |     "genDir": "../../dist/@angular-mdl",
27 |     "skipTemplateCodegen": true,
28 |     "debug": true
29 |   }
30 | }


--------------------------------------------------------------------------------
/src/components/tsconfig-spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "declaration": true,
 4 |     "emitDecoratorMetadata": true,
 5 |     "experimentalDecorators": true,
 6 |     "lib": ["es6", "es2015", "dom"],
 7 |     "mapRoot": ".",
 8 |     "module": "commonjs",
 9 |     "moduleResolution": "node",
10 |     "noEmitOnError": true,
11 |     "noImplicitAny": true,
12 |     "outDir": "../../dist/@angular2-mdl-ext",
13 |     "rootDir": ".",
14 |     "target": "es5",
15 |     "inlineSources": true,
16 |     "stripInternal": true,
17 |     "baseUrl": "",
18 |     "types": [
19 |       "jasmine",
20 |       "node"
21 |     ]
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/e2e-app/404.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <script>
 4 |     sessionStorage.redirect = location.href;
 5 |   </script>
 6 |   <meta http-equiv="refresh" content="0;URL='http://mseemann.io/angular2-mdl-ext/'"></meta>
 7 | </head>
 8 |   <body>
 9 | 
10 |   Please navigate to <a href="http://mseemann.io/angular2-mdl-ext/">http://mseemann.io/angular2-mdl-ext/</a>.
11 | 
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/e2e-app/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <mdl-layout mdl-layout-fixed-header>
 2 |   <mdl-layout-header>
 3 |     <mdl-layout-header-row class="mdl-color--primary mdl-color-text--accent main-header">
 4 |       <div *ngIf="mainLayout.isSmallScreen" class="mdl-layout__drawer-button" (click)="mainLayout.toggleDrawer()">
 5 |         <mdl-icon>&#xE5D2;</mdl-icon>
 6 |       </div>
 7 |       <mdl-layout-title class="docs-layout-title">
 8 |         {{title}}
 9 |       </mdl-layout-title>
10 |       <mdl-layout-spacer></mdl-layout-spacer>
11 |       <div class="mdl-cell--hide-phone">
12 |         <a class="github-button mdl-color-text--primary" href="https://github.com/mseemann/angular2-mdl-ext" data-size="large" data-count-href="/mseemann/angular2-mdl-ext/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star mseemann/angular2-mdl-ext on GitHub">Star</a>
13 |       </div>
14 |     </mdl-layout-header-row>
15 |   </mdl-layout-header>
16 |   <mdl-layout-content>
17 |     <mdl-layout mdl-layout-fixed-drawer mdl-layout-no-drawer-button #mainLayout="mdlLayout">
18 |       <mdl-layout-drawer>
19 |         <nav class="mdl-navigation">
20 |           <a (click)="componentSelected(mainLayout)" class="mdl-navigation__link routerLink" routerLink="/" routerLinkActive="router-link-active" [routerLinkActiveOptions]="{exact:true}">Home</a>
21 |           <a (click)="componentSelected(mainLayout)" class="mdl-navigation__link routerLink" routerLink="/datepicker" routerLinkActive="router-link-active">Date Picker</a>
22 |           <a (click)="componentSelected(mainLayout)" class="mdl-navigation__link routerLink" routerLink="/popover" routerLinkActive="router-link-active">Popover</a>
23 |           <a (click)="componentSelected(mainLayout)" class="mdl-navigation__link routerLink" routerLink="/select" routerLinkActive="router-link-active">Select</a>
24 |           <a (click)="componentSelected(mainLayout)" class="mdl-navigation__link routerLink" routerLink="/expansion-panel" routerLinkActive="router-link-active">Expansion Panel</a>
25 |           <a (click)="componentSelected(mainLayout)" class="mdl-navigation__link routerLink" routerLink="/fab-menu" routerLinkActive="router-link-active">FAB menu</a>
26 |           <a class="mdl-navigation__link routerLink"  href="/angular2-mdl">angular2-mdl <mdl-icon class="mdl-color-text--primary">explore</mdl-icon></a>
27 |         </nav>
28 |       </mdl-layout-drawer>
29 |         <mdl-layout-content class="app-main-content">
30 |           <div class="main-content">
31 |             <div class="router-outlet">
32 |               <router-outlet></router-outlet>
33 |             </div>
34 |             <footer class="mdl-mini-footer">
35 |               <div class="mdl-mini-footer__right-section">
36 |                 <ul class="mdl-mini-footer__link-list">
37 |                   <li><a href="https://github.com/mseemann/angular2-mdl-ext" target="_blank"><span class="icon"><svg viewBox="0 0 16 16"><path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg></span> GitHub</a></li>
38 |                 </ul>
39 |               </div>
40 |             </footer>
41 |           </div>
42 |         </mdl-layout-content>
43 |     </mdl-layout>
44 |   </mdl-layout-content>
45 | </mdl-layout>
46 | 


--------------------------------------------------------------------------------
/src/e2e-app/app/app.component.scss:
--------------------------------------------------------------------------------
 1 | @import "../../../node_modules/@angular-mdl/core/scss/color-definitions";
 2 | 
 3 | $color-primary: $palette-blue-500;
 4 | $color-primary-dark: $palette-blue-700;
 5 | $color-accent: $palette-amber-A200;
 6 | $color-primary-contrast: $color-dark-contrast;
 7 | $color-accent-contrast: $color-dark-contrast;
 8 | 
 9 | .router-outlet {
10 |     flex-grow: 1;
11 |     flex-shrink: 0;
12 |     margin-left: 1rem;
13 |     margin-right: 1rem;
14 | }
15 | 
16 | main {
17 |     display: flex !important;
18 |     flex-direction: row;
19 | }
20 | 
21 | .main-footer {
22 |     flex-grow: 1;
23 | }
24 | 
25 | footer {
26 |     flex-shrink: 0;
27 | }
28 | nav {
29 | 
30 | a.routerLink {
31 |     padding: 8px 40px !important;
32 |     font-size: 18px !important;
33 |     color: unquote("rgb(#{$palette-grey-800})") !important;
34 | 
35 | &.router-link-active {
36 |      color: unquote("rgb(#{$color-primary})") !important;
37 |  }
38 | }
39 | }
40 | 
41 | h4{
42 |     text-transform: uppercase;
43 | }
44 | 
45 | .main-header {
46 |     padding-left: 40px;
47 | }
48 | 
49 | @media screen and (max-width: 1024px) {
50 |     .main-header {
51 |         padding-left: 72px;
52 |     }
53 | }
54 | 
55 | .app-main-content {
56 |     display: flex;
57 |     flex-direction: column;
58 | }
59 | 
60 | .main-content {
61 |     display: flex;
62 |     flex-direction: column;
63 |     align-items: stretch;
64 |     flex-grow: 1;
65 | }
66 | 
67 | [prism] {
68 |     background: #f5f2f0;
69 |     white-space: pre-wrap;
70 |     padding-left: 1rem;
71 | }
72 | 
73 | .icon svg {
74 |     display: inline-block;
75 |     width: 16px;
76 |     height: 16px;
77 |     vertical-align: middle;
78 | }
79 | 


--------------------------------------------------------------------------------
/src/e2e-app/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import {
 3 |   ActivatedRoute,
 4 |   Router, Routes
 5 | } from '@angular/router';
 6 | import '../css/style.scss';
 7 | import { PopoverDemo } from './popover/popover.component';
 8 | import { SelectDemo } from './select/select.component';
 9 | import { ExpansionPanelDemo } from './expansion-panel/expansion-panel.component';
10 | import { MdlLayoutComponent } from '@angular-mdl/core';
11 | import { DatepickerDemo } from './datepicker/datepicker.component';
12 | import {FabMenuDemo} from './fab-menu/fab-menu-demo.component';
13 | 
14 | 
15 | @Component({
16 |   selector: 'home',
17 |   templateUrl: 'home.html'
18 | })
19 | export class Home {
20 | }
21 | 
22 | 
23 | export const appRoutes: Routes = [
24 |   { path: '', component: Home, data: {title: 'Home'} },
25 |   { path: 'datepicker', component: DatepickerDemo, data: {title: 'Date Picker'} },
26 |   { path: 'popover', component: PopoverDemo, data: {title: 'Popover'} },
27 |   { path: 'select', component: SelectDemo, data: {title: 'Select'} },
28 |   { path: 'expansion-panel', component: ExpansionPanelDemo, data: {title: 'Expanion Panel'} },
29 |   { path: 'fab-menu', component: FabMenuDemo, data: {title: 'FAB Menu'} },
30 |   { path: '**', redirectTo: '' }
31 | ];
32 | 
33 | @Component({
34 |   selector: 'root-app',
35 |   templateUrl: './app.component.html',
36 |   styleUrls: ['./app.component.scss']
37 | })
38 | export class AppComponent {
39 | 
40 |   public title = 'Angular - Material Design Lite Extensions';
41 | 
42 |   public componentSelected(mainLayout: MdlLayoutComponent) {
43 |     mainLayout.closeDrawerOnSmallScreens();
44 |   }
45 | 
46 | }
47 | 


--------------------------------------------------------------------------------
/src/e2e-app/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule, ApplicationRef, ApplicationInitStatus } from '@angular/core';
 2 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 3 | import { BrowserModule }  from '@angular/platform-browser';
 4 | import { AppComponent, appRoutes, Home } from './app.component';
 5 | import { MdlModule } from '@angular-mdl/core';
 6 | import { RouterModule } from '@angular/router';
 7 | import { PopoverDemo } from './popover/popover.component';
 8 | import { SelectDemo } from './select/select.component';
 9 | import { MatchSorterPipe } from './select/matchSorter.pipe';
10 | import { ExpansionPanelDemo } from './expansion-panel/expansion-panel.component';
11 | import { MdlPopoverModule } from '../../components/popover/popover';
12 | import { MdlSelectModule } from '../../components/select/select';
13 | import { MdlFabMenuModule } from '../../components/fab-menu/fab-menu';
14 | import { MdlExpansionPanelModule } from '../../components/expansion-panel/expansion-panel.component';
15 | import { PrismDirective } from '@mseemann/prism';
16 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
17 | import { DatepickerDemo } from './datepicker/datepicker.component';
18 | import { MdlDatePickerModule } from '../../components/datepicker/index';
19 | import { FabMenuDemo } from './fab-menu/fab-menu-demo.component';
20 | 
21 | @NgModule({
22 |   imports: [
23 |     BrowserModule,
24 |     FormsModule,
25 |     ReactiveFormsModule,
26 |     MdlModule,
27 |     RouterModule.forRoot(appRoutes),
28 |     MdlPopoverModule,
29 |     MdlSelectModule,
30 |     MdlFabMenuModule,
31 |     MdlExpansionPanelModule,
32 |     BrowserAnimationsModule,
33 |     MdlDatePickerModule
34 |   ],
35 |   declarations: [
36 |     AppComponent,
37 |     FabMenuDemo,
38 |     Home,
39 |     DatepickerDemo,
40 |     PopoverDemo,
41 |     SelectDemo,
42 |     MatchSorterPipe,
43 |     ExpansionPanelDemo,
44 |     PrismDirective,
45 |   ],
46 |   entryComponents: [AppComponent],
47 |   bootstrap: []
48 | })
49 | export class AppModule {
50 | 
51 |   constructor(private appRef: ApplicationRef, private appStatus: ApplicationInitStatus) { }
52 | 
53 |   public ngDoBootstrap() {
54 |     this.appStatus.donePromise.then( () => {
55 |       let script = document.createElement('script');
56 |       script.innerHTML = '';
57 |       script.src = 'https://buttons.github.io/buttons.js';
58 |       let anyScriptTag = document.getElementsByTagName('script')[0];
59 |       anyScriptTag.parentNode.insertBefore(script, anyScriptTag);
60 |     });
61 |     this.appRef.bootstrap(AppComponent);
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/src/e2e-app/app/datepicker/datepicker.component.html:
--------------------------------------------------------------------------------
 1 | <h4>The Date Picker</h4>
 2 | 
 3 | <button
 4 |     mdl-button
 5 |     (click)="pickADate($event)"
 6 |     mdl-button-type="icon"
 7 |     mdl-ripple>
 8 |   <mdl-icon>event</mdl-icon>
 9 | </button>
10 | <span>{{ selectedDate?.format('LL') }}</span>
11 | 
12 | <pre prism ngNonBindable>
13 |   <![CDATA[
14 | <button
15 |         mdl-button
16 |         (click)="pickADate($event)"
17 |         mdl-button-type="icon"
18 |         mdl-ripple>
19 |   <mdl-icon>event</mdl-icon>
20 | </button>
21 | <span>{{ selectedDate?.format('LL') }}</span>
22 |   ]]>
23 | </pre>
24 | 
25 | <pre prism ngNonBindable>
26 |   <![CDATA[
27 | export class DatepickerDemo {
28 | 
29 |   public selectedDate: any;
30 | 
31 |   constructor(private datePicker: MdlDatePickerService) {}
32 | 
33 |   public pickADate($event: MouseEvent) {
34 |     this.datePicker.selectDate(this.selectedDate, {openFrom: $event}).subscribe( (selectedDate: Date) => {
35 |       this.selectedDate = selectedDate ? moment(selectedDate) : null;
36 |     });
37 |   }
38 | }
39 | 
40 |   ]]>
41 | </pre>
42 | 
43 | 


--------------------------------------------------------------------------------
/src/e2e-app/app/datepicker/datepicker.component.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ChangeDetectionStrategy,
 3 |   Component
 4 | } from '@angular/core';
 5 | import { MdlDatePickerService } from '../../../components/datepicker/datepicker.service';
 6 | import * as moment from 'moment';
 7 | import 'moment/locale/en-gb';
 8 | 
 9 | @Component({
10 |   selector: 'datepicker-demo',
11 |   templateUrl: 'datepicker.component.html'
12 | })
13 | export class DatepickerDemo {
14 | 
15 |   public selectedDate: any;
16 | 
17 |   constructor(private datePicker: MdlDatePickerService) {}
18 | 
19 |   public pickADate($event: MouseEvent) {
20 |     this.datePicker.selectDate(this.selectedDate, {openFrom: $event}).subscribe( (selectedDate: Date) => {
21 |       this.selectedDate = selectedDate ? moment(selectedDate) : null;
22 |     });
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/e2e-app/app/expansion-panel/expansion-panel.component.html:
--------------------------------------------------------------------------------
  1 | <h4>EXPANSION PANEL</h4>
  2 | 
  3 | <section>
  4 |   <h5>Single expansion panel</h5>
  5 |   <mdl-expansion-panel #panel>
  6 |     <mdl-expansion-panel-header>
  7 |       <mdl-expansion-panel-header-list-content>Primary Title</mdl-expansion-panel-header-list-content>
  8 |       <mdl-expansion-panel-header-secondary-content>Secondary value</mdl-expansion-panel-header-secondary-content>
  9 |     </mdl-expansion-panel-header>
 10 |     <mdl-expansion-panel-content>
 11 |       <mdl-expansion-panel-body>
 12 |         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 13 |       </mdl-expansion-panel-body>
 14 |       <mdl-expansion-panel-footer>
 15 |         <mdl-button>Cancel</mdl-button>
 16 |         <mdl-button>Save</mdl-button>
 17 |       </mdl-expansion-panel-footer>
 18 |     </mdl-expansion-panel-content>
 19 |   </mdl-expansion-panel>
 20 |   <button mdl-button mdl-button-type="raised"
 21 |           mdl-colored="primary"
 22 |           mdl-ripple
 23 |           (click)="panel.toggle()">Toggle</button>
 24 |   <button mdl-button mdl-button-type="raised"
 25 |           mdl-colored="primary"
 26 |           mdl-ripple
 27 |           (click)="panel.disabled ? panel.enableToggle() : panel.disableToggle()">
 28 |     <span *ngIf="!panel.disabled">Disable</span>
 29 |     <span *ngIf="panel.disabled">Enable</span>
 30 |     Toggle
 31 |   </button>
 32 |   <pre prism>
 33 |     <![CDATA[
 34 | <mdl-expansion-panel #panel>
 35 |   <mdl-expansion-panel-header>
 36 |     <mdl-expansion-panel-header-list-content>Primary Title</mdl-expansion-panel-header-list-content>
 37 |     <mdl-expansion-panel-header-secondary-content>Secondary value</mdl-expansion-panel-header-secondary-content>
 38 |   </mdl-expansion-panel-header>
 39 |   <mdl-expansion-panel-content>
 40 |     <mdl-expansion-panel-body>
 41 |       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 42 |     </mdl-expansion-panel-body>
 43 |     <mdl-expansion-panel-footer>
 44 |       <mdl-button>Cancel</mdl-button>
 45 |       <mdl-button>Save</mdl-button>
 46 |     </mdl-expansion-panel-footer>
 47 |   </mdl-expansion-panel-content>
 48 | </mdl-expansion-panel>
 49 | <mdl-button (click)="panel.toggle()">Toggle</mdl-button>
 50 | <mdl-button (click)="panel.disabled ? panel.enableToggle() : panel.disableToggle()">
 51 |   <span *ngIf="!panel.disabled">Disable</span>
 52 |   <span *ngIf="panel.disabled">Enable</span>
 53 |   Toggle
 54 | </mdl-button>
 55 |     ]]>
 56 |   </pre>
 57 | </section>
 58 | 
 59 | <section>
 60 |   <h5>Single expansion panel - expanded initially</h5>
 61 |   <mdl-expansion-panel [expanded]="true">
 62 |     <mdl-expansion-panel-header>
 63 |       <mdl-expansion-panel-header-list-content>Primary Title</mdl-expansion-panel-header-list-content>
 64 |       <mdl-expansion-panel-header-secondary-content>Secondary value</mdl-expansion-panel-header-secondary-content>
 65 |     </mdl-expansion-panel-header>
 66 |     <mdl-expansion-panel-content>
 67 |       <mdl-expansion-panel-body>
 68 |         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 69 |       </mdl-expansion-panel-body>
 70 |     </mdl-expansion-panel-content>
 71 |   </mdl-expansion-panel>
 72 |   <pre prism>
 73 |     <![CDATA[
 74 | <mdl-expansion-panel [expanded]="true">
 75 |   <mdl-expansion-panel-header>
 76 |     <mdl-expansion-panel-header-list-content>Primary Title</mdl-expansion-panel-header-list-content>
 77 |     <mdl-expansion-panel-header-secondary-content>Secondary value</mdl-expansion-panel-header-secondary-content>
 78 |   </mdl-expansion-panel-header>
 79 |   <mdl-expansion-panel-content>
 80 |     <mdl-expansion-panel-body>
 81 |       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 82 |     </mdl-expansion-panel-body>
 83 |   </mdl-expansion-panel-content>
 84 | </mdl-expansion-panel>
 85 |     ]]>
 86 |   </pre>
 87 | </section>
 88 | 
 89 | <section>
 90 |   <h5>Expansion panel group</h5>
 91 |   <p>Individual panel in a group can be focused by TAB key. Panels can be toggled by pressing ENTER key when focused.</p>
 92 |   <mdl-expansion-panel-group #panelGroup>
 93 |     <mdl-expansion-panel *ngFor="let i of [1,2,3]">
 94 |       <mdl-expansion-panel-header>
 95 |         <mdl-expansion-panel-header-list-content>Primary Title {{i}}</mdl-expansion-panel-header-list-content>
 96 |       </mdl-expansion-panel-header>
 97 |       <mdl-expansion-panel-content>
 98 |         <mdl-expansion-panel-body>
 99 |           <p>This is expansion panel {{i}}</p>
100 |         </mdl-expansion-panel-body>
101 |         <mdl-expansion-panel-footer>
102 |           <mdl-button>Cancel</mdl-button>
103 |           <mdl-button>Save</mdl-button>
104 |         </mdl-expansion-panel-footer>
105 |       </mdl-expansion-panel-content>
106 |     </mdl-expansion-panel>
107 |   </mdl-expansion-panel-group>
108 |   <section style="margin-top: 15px;">
109 |     <button mdl-button mdl-button-type="raised"
110 |             mdl-colored="primary"
111 |             mdl-ripple
112 |             (click)="panelGroup.getPanel(1).toggle()">Toggle Second</button>
113 |     <div style="display: inline-block; padding: 5px;">expanded: {{panelGroup.getExpanded()}}</div>
114 |   </section>
115 |   <pre prism>
116 |     <![CDATA[
117 | <mdl-expansion-panel-group #panelGroup>
118 |   <mdl-expansion-panel>
119 |     <mdl-expansion-panel-header>
120 |       <mdl-expansion-panel-header-list-content>Primary Title {x{i}}</mdl-expansion-panel-header-list-content>
121 |     </mdl-expansion-panel-header>
122 |     <mdl-expansion-panel-content>
123 |       <mdl-expansion-panel-body>
124 |         <p>This is expansion panel {x{i}}</p>
125 |       </mdl-expansion-panel-body>
126 |       <mdl-expansion-panel-footer>
127 |         <mdl-button>Cancel</mdl-button>
128 |         <mdl-button>Save</mdl-button>
129 |       </mdl-expansion-panel-footer>
130 |     </mdl-expansion-panel-content>
131 |   </mdl-expansion-panel>
132 | </mdl-expansion-panel-group>
133 | <button mdl-button mdl-button-type="raised"
134 |         mdl-colored="primary"
135 |         mdl-ripple
136 |         (click)="panelGroup.getPanel(1).toggle()">Toggle Second</button>
137 | <div>expanded: {x{panelGroup.getExpanded()}}</div>
138 |     ]]>
139 |   </pre>
140 | </section>
141 | 
142 | <section>
143 |   <h5>Expansion panel group - having one panel expanded initially</h5>
144 |   <p>Note: A Panel Group only supports initialization of ONE panel in expanded state.</p>
145 |   <mdl-expansion-panel-group>
146 |     <mdl-expansion-panel *ngFor="let i of [1,2,3]; let isFirst = first" [expanded]="isFirst">
147 |       <mdl-expansion-panel-header>
148 |         <mdl-expansion-panel-header-list-content>Primary Title {{i}}</mdl-expansion-panel-header-list-content>
149 |       </mdl-expansion-panel-header>
150 |       <mdl-expansion-panel-content>
151 |         <mdl-expansion-panel-body>
152 |           <p>This is expansion panel {{i}}</p>
153 |         </mdl-expansion-panel-body>
154 |       </mdl-expansion-panel-content>
155 |     </mdl-expansion-panel>
156 |   </mdl-expansion-panel-group>
157 |   <pre prism>
158 |     <![CDATA[
159 | <mdl-expansion-panel-group>
160 |   <mdl-expansion-panel *ngFor="let i of [1,2,3]; let isFirst = first" [expanded]="isFirst">
161 |     <mdl-expansion-panel-header>
162 |       <mdl-expansion-panel-header-list-content>Primary Title {x{i}}</mdl-expansion-panel-header-list-content>
163 |     </mdl-expansion-panel-header>
164 |     <mdl-expansion-panel-content>
165 |       <mdl-expansion-panel-body>
166 |         <p>This is expansion panel {x{i}}</p>
167 |       </mdl-expansion-panel-body>
168 |     </mdl-expansion-panel-content>
169 |   </mdl-expansion-panel>
170 | </mdl-expansion-panel-group>
171 |     ]]>
172 |   </pre>
173 | </section>
174 | 
175 | <section>
176 |   <h5>Components</h5>
177 |   <table class="docu" mdl-shadow="2">
178 |     <thead>
179 |       <tr>
180 |         <th>Component</th>
181 |         <th>Description</th>
182 |       </tr>
183 |     </thead>
184 |     <tbody>
185 |       <tr>
186 |         <td>mdl-expansion-panel-group</td>
187 |         <td>Container for grouping multiple panels.</td>
188 |       </tr>
189 |       <tr>
190 |         <td>mdl-expansion-panel</td>
191 |         <td>Defines a panel. It can exist on it's own or can be inside a group.</td>
192 |       </tr>
193 |       <tr>
194 |         <td>mdl-expansion-panel-header</td>
195 |         <td>Defines the header that is shown at the top of each panel. It has a toggle button which expands the panel.</td>
196 |       </tr>
197 |       <tr>
198 |         <td>mdl-expansion-panel-header-list-content</td>
199 |         <td>Defines title for the panel's header.</td>
200 |       </tr>
201 |       <tr>
202 |         <td>mdl-expansion-panel-header-secondary-content</td>
203 |         <td>Defines secondary title for the panel's header.</td>
204 |       </tr>
205 |       <tr>
206 |         <td>mdl-expansion-panel-content</td>
207 |         <td>Container for the expandable content inside the panel.</td>
208 |       </tr>
209 |       <tr>
210 |         <td>mdl-expansion-panel-body</td>
211 |         <td>Defines the collapsible content for the panel</td>
212 |       </tr>
213 |       <tr>
214 |         <td>mdl-expansion-panel-content-footer</td>
215 |         <td>Defines any action buttons for the panel.</td>
216 |       </tr>
217 |     </tbody>
218 |   </table>
219 | </section>
220 | 
221 | <section>
222 |   <h5>API for MdlExpansionPanelComponent</h5>
223 |   <table class="docu" mdl-shadow="2">
224 |     <thead>
225 |       <tr>
226 |         <th>Function</th>
227 |         <th>Params</th>
228 |         <th>Returns</th>
229 |       </tr>
230 |     </thead>
231 |     <tbody>
232 |       <tr>
233 |         <td>toggle</td>
234 |         <td>none</td>
235 |         <td>void</td>
236 |       </tr>
237 |       <tr>
238 |         <td>expand</td>
239 |         <td>none</td>
240 |         <td>void</td>
241 |       </tr>
242 |       <tr>
243 |         <td>collapse</td>
244 |         <td>none</td>
245 |         <td>void</td>
246 |       </tr>
247 |       <tr>
248 |         <td>disableToggle</td>
249 |         <td>none</td>
250 |         <td>void</td>
251 |       </tr>
252 |       <tr>
253 |         <td>enableToggle</td>
254 |         <td>none</td>
255 |         <td>void</td>
256 |       </tr>
257 |     </tbody>
258 |   </table>
259 | </section>
260 | 
261 | <section>
262 |   <h5>Inputs for MdlExpansionPanelComponent</h5>
263 |   <table class="docu" mdl-shadow="2">
264 |     <thead>
265 |     <tr>
266 |       <th>Property</th>
267 |       <th>Params</th>
268 |       <th>Explanation</th>
269 |     </tr>
270 |     </thead>
271 |     <tbody>
272 |     <tr>
273 |       <td>disabled</td>
274 |       <td>boolean</td>
275 |       <td>Panel initializes in disabled state</td>
276 |     </tr>
277 |     <tr>
278 |       <td>expanded</td>
279 |       <td>boolean</td>
280 |       <td>Panel initializes in expanded state</td>
281 |     </tr>
282 |     </tbody>
283 |   </table>
284 | </section>
285 | 
286 | <section>
287 |   <h5>API for MdlExpansionPanelGroupComponent</h5>
288 |   <table class="docu" mdl-shadow="2">
289 |     <thead>
290 |       <tr>
291 |         <th>Function</th>
292 |         <th>Params</th>
293 |         <th>Returns</th>
294 |       </tr>
295 |     </thead>
296 |     <tbody>
297 |       <tr>
298 |         <td>getExpanded</td>
299 |         <td>none</td>
300 |         <td>
301 |           <p>A number representing the index of expanded panel.</p>
302 |           <p>-1 if none of the panel is expanded.</p>
303 |         </td>
304 |       </tr>
305 |       <tr>
306 |         <td>getPanel</td>
307 |         <td>
308 |           number - index of the panel in the group (0-based)
309 |         </td>
310 |         <td>
311 |           an instance of MdlExpansionPanel at the specified index
312 |         </td>
313 |       </tr>
314 |     </tbody>
315 |   </table>
316 | </section>
317 | 


--------------------------------------------------------------------------------
/src/e2e-app/app/expansion-panel/expansion-panel.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |   selector: 'expansion-panel-demo',
5 |   templateUrl: 'expansion-panel.component.html'
6 | })
7 | export class ExpansionPanelDemo {}
8 | 


--------------------------------------------------------------------------------
/src/e2e-app/app/fab-menu/fab-menu-demo.component.html:
--------------------------------------------------------------------------------
  1 | <h4>FAB Menu</h4>
  2 | 
  3 | <section>
  4 |     <h5>Basic usage</h5>
  5 |     <mdl-fab-menu #mainFabMenu>
  6 |         <mdl-fab-menu-item
  7 |                 [fabMenu]="mainFabMenu"
  8 |                 icon="note_add"
  9 |                 label="make a note"
 10 |                 (menu-clicked)="alert('we need to do something here')">
 11 |         </mdl-fab-menu-item>
 12 |         <mdl-fab-menu-item
 13 |                 [fabMenu]="mainFabMenu"
 14 |                 icon="refresh"
 15 |                 label="refresh"
 16 |                 (menu-clicked)="alert('user elected to refresh!')">
 17 |         </mdl-fab-menu-item>
 18 |         <mdl-fab-menu-item
 19 |                 [fabMenu]="mainFabMenu"
 20 |                 icon="file_download"
 21 |                 label="download"
 22 |                 (menu-clicked)="alert('user elected to download ... but what exactly? ')">
 23 |         </mdl-fab-menu-item>
 24 |     </mdl-fab-menu>
 25 |     <pre prism>
 26 |     <![CDATA[
 27 |   <mdl-fab-menu #mainFabMenu>
 28 |     <mdl-fab-menu-item
 29 |             [fabMenu]="mainFabMenu"
 30 |             icon="note_add"
 31 |             label="make a note"
 32 |             (menu-clicked)="alert('we need to do something here')">
 33 |     </mdl-fab-menu-item>
 34 |     <mdl-fab-menu-item
 35 |             [fabMenu]="mainFabMenu"
 36 |             icon="refresh"
 37 |             label="refresh"
 38 |             (menu-clicked)="alert('user elected to refresh!')">
 39 |     </mdl-fab-menu-item>
 40 |     <mdl-fab-menu-item
 41 |             [fabMenu]="mainFabMenu"
 42 |             icon="file_download"
 43 |             label="download"
 44 |             (menu-clicked)="alert('user elected to download ... but what exactly? ')">
 45 |     </mdl-fab-menu-item>
 46 |   </mdl-fab-menu>
 47 |     ]]>
 48 |   </pre>
 49 | </section>
 50 | 
 51 | <section>
 52 |     <h5>Forcing the tooltip display</h5>
 53 |     <p>By default, the tooltip are always shown whenever the component is being used on a touch screen whereas they are
 54 |         only diplayed for the item being "mouse-overed" on mouse-based display.
 55 |         Nevertheless, you can for the tooltip display by setting the
 56 |     <code>alwaysShowTooltips</code>
 57 |     to
 58 |     <code>true</code>
 59 |     </p>
 60 | 
 61 |     <mdl-fab-menu #mainFabMenu2 [alwaysShowTooltips]="true">
 62 |         <mdl-fab-menu-item
 63 |                 [fabMenu]="mainFabMenu2"
 64 |                 icon="note_add"
 65 |                 label="make a note"
 66 |                 (menu-clicked)="alert('we need to do something here')">
 67 |         </mdl-fab-menu-item>
 68 |         <mdl-fab-menu-item
 69 |                 [fabMenu]="mainFabMenu2"
 70 |                 icon="file_download"
 71 |                 label="download"
 72 |                 (menu-clicked)="alert('user elected to download ... but what exactly? ')">
 73 |         </mdl-fab-menu-item>
 74 |     </mdl-fab-menu>
 75 |     <pre prism>
 76 |     <![CDATA[
 77 |   <mdl-fab-menu #mainFabMenu2 [alwaysShowTooltips]="true">
 78 |     ...
 79 |   </mdl-fab-menu>
 80 |     ]]>
 81 |   </pre>
 82 | </section>
 83 | 
 84 | <section>
 85 |     <h5>Components</h5>
 86 |     <table class="docu" mdl-shadow="2">
 87 |         <thead>
 88 |         <tr>
 89 |             <th>Component</th>
 90 |             <th>Description</th>
 91 |         </tr>
 92 |         </thead>
 93 |         <tbody>
 94 |         <tr>
 95 |             <td>mdl-fab-menu</td>
 96 |             <td>Container hosting the toggle button and the popover.</td>
 97 |         </tr>
 98 |         <tr>
 99 |             <td>mdl-fab-menu-item</td>
100 |             <td>Defines a single item of the fab-menu. It takes a reference to the enclosing menu, the name of the icon to be displayed on the mini-fab and a label for the tooltip.</td>
101 |         </tr>
102 |         </tbody>
103 |     </table>
104 | </section>
105 | 
106 | <section>
107 |     <h5>Inputs for MdlFabMenuComponent</h5>
108 |     <table class="docu" mdl-shadow="2">
109 |         <thead>
110 |         <tr>
111 |             <th>Property</th>
112 |             <th>Params</th>
113 |             <th>Explanation</th>
114 |         </tr>
115 |         </thead>
116 |         <tbody>
117 |         <tr>
118 |             <td>alwaysShowTooltips</td>
119 |             <td>boolean</td>
120 |             <td>Set if either or not the tooltip should always be displayed when the menu is up</td>
121 |         </tr>
122 |         </tbody>
123 |     </table>
124 | </section>
125 | <section>
126 |     <h5>Inputs for MdlFabMenuItemComponent</h5>
127 |     <table class="docu" mdl-shadow="2">
128 |         <thead>
129 |         <tr>
130 |             <th>Property</th>
131 |             <th>Params</th>
132 |             <th>Explanation</th>
133 |         </tr>
134 |         </thead>
135 |         <tbody>
136 |         <tr>
137 |             <td>icon</td>
138 |             <td>string</td>
139 |             <td>name of the icon to be used in the menu item</td>
140 |         </tr>
141 |         <tr>
142 |             <td>label</td>
143 |             <td>string</td>
144 |             <td>text of the tooltip</td>
145 |         </tr>
146 |         </tbody>
147 |     </table>
148 | </section>
149 | 
150 | <section>
151 |     <h5>Output for MdlFabMenuItemComponent</h5>
152 |     <table class="docu" mdl-shadow="2">
153 |         <thead>
154 |         <tr>
155 |             <th>Property</th>
156 |             <th>Params</th>
157 |             <th>Explanation</th>
158 |         </tr>
159 |         </thead>
160 |         <tbody>
161 |         <tr>
162 |             <td>menu-clicked</td>
163 |             <td>event&lt;void&gt;</td>
164 |             <td>event triggered when this item has been selected</td>
165 |         </tr>
166 |         </tbody>
167 |     </table>
168 | </section>


--------------------------------------------------------------------------------
/src/e2e-app/app/fab-menu/fab-menu-demo.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 |     mdl-fab-menu {
3 |       position: relative !important;
4 |       top: 0;
5 |       left: 50%;
6 |       right: 0;
7 |       bottom: 0;
8 |     }
9 | }


--------------------------------------------------------------------------------
/src/e2e-app/app/fab-menu/fab-menu-demo.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core'
 2 | 
 3 | @Component({
 4 |   selector: 'fab-menu-demo',
 5 |   templateUrl: 'fab-menu-demo.component.html',
 6 |   styleUrls: ['fab-menu-demo.component.scss']
 7 | })
 8 | export class FabMenuDemo {
 9 | 
10 |   alert(msg: string){
11 |     console.log(msg);
12 |   }
13 | 
14 | }
15 | 


--------------------------------------------------------------------------------
/src/e2e-app/app/home.html:
--------------------------------------------------------------------------------
 1 | <h4>Welcome to the e2e demos for Angular Material Design Lite Extensions</h4>
 2 | 
 3 | <h6>Checkout the <a href="https://github.com/mseemann/angular2-mdl-ext">GitHub</a> project on
 4 |   how to install and use the angular2-mdl-ext package.</h6>
 5 | 
 6 | <p>
 7 |   In this package you'll find components that are not part of material design lite (Verison 1).
 8 | </p>
 9 | 
10 | <p>
11 |   This package is open to PR's. Feel free to submit your own component!
12 | </p>


--------------------------------------------------------------------------------
/src/e2e-app/app/popover/popover.component.html:
--------------------------------------------------------------------------------
  1 | <h4>THE POPOVER</h4>
  2 | 
  3 | <h5>Custom popover</h5>
  4 | 
  5 | <button
  6 |     mdl-button
  7 |     (click)="myPopover.toggle($event)"
  8 |     mdl-button-type="icon"
  9 |     mdl-ripple>
 10 |   <mdl-icon>more_vert</mdl-icon>
 11 | </button>
 12 | 
 13 | <mdl-popover #myPopover
 14 |              (onShow)="onShow()"
 15 |              (onHide)="onHide()"
 16 |              [hide-on-click]="true"
 17 |              [style.width.px]="300">
 18 |   <div mdl-shadow="6" style="padding: 1rem;">
 19 |     <b>This is example popover</b> you can put any HTML content here.
 20 |   </div>
 21 | </mdl-popover>
 22 | 
 23 | 
 24 | <pre prism>
 25 |   <![CDATA[
 26 |   <button
 27 |     mdl-button
 28 |     (click)="myPopover.toggle($event)"
 29 |     mdl-button-type="icon"
 30 |     mdl-ripple>
 31 |   <mdl-icon>more_vert</mdl-icon>
 32 |   </button>
 33 | 
 34 |   <mdl-popover #myPopover
 35 |                (onShow)="onShow()"
 36 |                (onHide)="onHide()"
 37 |                [hide-on-click]="true"
 38 |                [style.width.px]="300">
 39 |     <div mdl-shadow="6" style="padding: 1rem;">
 40 |       <b>This is example popover</b> you can put any HTML content here.
 41 |     </div>
 42 |   </mdl-popover>
 43 |   ]]>
 44 | </pre>
 45 | 
 46 | <h5>Custom popover with user specified position</h5>
 47 | 
 48 | <div class="mdl-grid">
 49 |   <div class="mdl-cell mdl-cell--3-col">
 50 |      <div class="container" mdl-shadow="2">
 51 |         <div class="bar mdl-color--primary">
 52 |           <button #bottomLeftButton mdl-button (click)="bottomLeftPopover.toggle($event, bottomLeftButton)" mdl-button-type="icon" mdl-ripple>
 53 |             <mdl-icon>more_vert</mdl-icon>
 54 |           </button>
 55 |           
 56 |           <mdl-popover #bottomLeftPopover mdl-popover-position="bottom-left" [hide-on-click]="true" [style.width.px]="300">
 57 |             <div mdl-shadow="6" style="padding: 1rem;">
 58 |               <b>This is example popover</b> you can put any HTML content here.
 59 |             </div>
 60 |           </mdl-popover>
 61 |         </div>
 62 |         <div class="background"></div>
 63 |      </div>
 64 |   </div>
 65 |   <div class="mdl-cell mdl-cell--3-col">
 66 |      <div class="container" mdl-shadow="2">
 67 |         <div class="bar mdl-color--primary">
 68 |            <div class="top-right">
 69 |             <button #bottomRightButton mdl-button (click)="bottomRightPopover.toggle($event, bottomRightButton)" mdl-button-type="icon" mdl-ripple>
 70 |               <mdl-icon>more_vert</mdl-icon>
 71 |             </button>    
 72 |             <mdl-popover #bottomRightPopover mdl-popover-position="bottom-right" [hide-on-click]="true" [style.width.px]="300">
 73 |               <div mdl-shadow="6" style="padding: 1rem;">
 74 |                 <b>This is example popover</b> you can put any HTML content here.
 75 |               </div>
 76 |             </mdl-popover>
 77 |            </div>
 78 |         </div>
 79 |         <div class="background"></div>
 80 |      </div>
 81 |   </div>
 82 |   <div class="mdl-cell mdl-cell--3-col">
 83 |      <div class="container" mdl-shadow="2">
 84 |         <div class="background"></div>
 85 |         <div class="bar mdl-color--primary">
 86 |           <button #topLeftButton mdl-button (click)="topLeftPopover.toggle($event, topLeftButton)" mdl-button-type="icon" mdl-ripple>
 87 |             <mdl-icon>more_vert</mdl-icon>
 88 |           </button>     
 89 |           <mdl-popover #topLeftPopover mdl-popover-position="top-left" [hide-on-click]="true" [style.width.px]="300">
 90 |             <div mdl-shadow="6" style="padding: 1rem;">
 91 |               <b>This is example popover</b> you can put any HTML content here.
 92 |             </div>
 93 |           </mdl-popover>
 94 |         </div>
 95 |      </div>
 96 |   </div>
 97 |   <div class="mdl-cell mdl-cell--3-col">
 98 |      <div class="container" mdl-shadow="2">
 99 |         <div class="background"></div>
100 |         <div class="bar mdl-color--primary">
101 |            <div class="top-right">
102 |             <button #topRightButton mdl-button (click)="topRightPopover.toggle($event, topRightButton)" mdl-button-type="icon" mdl-ripple>
103 |               <mdl-icon>more_vert</mdl-icon>
104 |             </button>         
105 |             <mdl-popover #topRightPopover mdl-popover-position="top-right" [hide-on-click]="true" [style.width.px]="300">
106 |               <div mdl-shadow="6" style="padding: 1rem;">
107 |                 <b>This is example popover</b> you can put any HTML content here.
108 |               </div>
109 |             </mdl-popover>
110 |            </div>
111 |         </div>
112 |      </div>
113 |   </div>
114 | </div>
115 | 
116 | <pre prism>
117 |   <![CDATA[
118 |   <button #bottomLeftButton mdl-button (click)="bottomLeftPopover.toggle($event, bottomLeftButton)" mdl-button-type="icon" mdl-ripple><mdl-icon>more_vert</mdl-icon></button>
119 |   <mdl-popover #bottomLeftPopover mdl-popover-position="bottom-left" [hide-on-click]="true" [style.width.px]="300">
120 |     ...
121 |   </mdl-popover>
122 |   ]]>
123 | </pre>
124 | 
125 | <pre prism>
126 |   <![CDATA[
127 |   <button #bottomRightButton mdl-button (click)="bottomRightPopover.toggle($event, bottomRightButton)" mdl-button-type="icon" mdl-ripple><mdl-icon>more_vert</mdl-icon></button>  
128 |   <mdl-popover #bottomRightPopover mdl-popover-position="bottom-right" [hide-on-click]="true" [style.width.px]="300">
129 |     ...
130 |   </mdl-popover>
131 |   ]]>
132 | </pre>
133 | 
134 | <pre prism>
135 |   <![CDATA[
136 |   <button #topLeftButton mdl-button (click)="topLeftPopover.toggle($event, topLeftButton)" mdl-button-type="icon" mdl-ripple><mdl-icon>more_vert</mdl-icon></button> 
137 |   <mdl-popover #topLeftPopover mdl-popover-position="top-left" [hide-on-click]="true" [style.width.px]="300">
138 |     ...
139 |   </mdl-popover>
140 |   ]]>
141 | </pre>
142 | 
143 | <pre prism>
144 |   <![CDATA[
145 |   <button #topRightButton mdl-button (click)="topRightPopover.toggle($event, topRightButton)" mdl-button-type="icon" mdl-ripple><mdl-icon>more_vert</mdl-icon></button>         
146 |   <mdl-popover #topRightPopover mdl-popover-position="top-right" [hide-on-click]="true" [style.width.px]="300">
147 |     ...
148 |   </mdl-popover>
149 |   ]]>
150 | </pre>
151 | 
152 | <h5>Card popover</h5>
153 | 
154 | <button
155 |     mdl-button
156 |     (click)="card.toggle($event)"
157 |     mdl-button-type="icon"
158 |     mdl-ripple>
159 |   <mdl-icon>more_vert</mdl-icon>
160 | </button>
161 | 
162 | <mdl-popover #card>
163 |   <mdl-card mdl-shadow="6">
164 |     <mdl-card-title>
165 |       <h2 mdl-card-title-text>Welcome</h2>
166 |     </mdl-card-title>
167 |     <mdl-card-supporting-text>
168 |       This is example card popover content.
169 |       Clicking buttons inside popover will not close it.
170 |     </mdl-card-supporting-text>
171 |     <mdl-card-actions mdl-card-border>
172 |       <button mdl-button mdl-colored mdl-ripple>Get Started</button>
173 |     </mdl-card-actions>
174 |     <mdl-card-menu>
175 |       <button mdl-button mdl-button-type="icon" mdl-ripple>
176 |         <mdl-icon>share</mdl-icon>
177 |       </button>
178 |     </mdl-card-menu>
179 |   </mdl-card>
180 | </mdl-popover>
181 | 
182 | <pre prism>
183 |   <![CDATA[
184 | 
185 | <button
186 |         mdl-button
187 |         (click)="card.toggle($event)"
188 |         mdl-button-type="icon"
189 |         mdl-ripple>
190 |   <mdl-icon>more_vert</mdl-icon>
191 | </button>
192 | 
193 | <mdl-popover #card>
194 |   <mdl-card mdl-shadow="6">
195 |     <mdl-card-title>
196 |       <h2 mdl-card-title-text>Welcome</h2>
197 |     </mdl-card-title>
198 |     <mdl-card-supporting-text>
199 |       This is example card popover content.
200 |       Clicking buttons inside popover will not close it.
201 |     </mdl-card-supporting-text>
202 |     <mdl-card-actions mdl-card-border>
203 |       <button mdl-button mdl-colored mdl-ripple>Get Started</button>
204 |     </mdl-card-actions>
205 |     <mdl-card-menu>
206 |       <button mdl-button mdl-button-type="icon" mdl-ripple>
207 |         <mdl-icon>share</mdl-icon>
208 |       </button>
209 |     </mdl-card-menu>
210 |   </mdl-card>
211 | </mdl-popover>
212 |   ]]>
213 | </pre>


--------------------------------------------------------------------------------
/src/e2e-app/app/popover/popover.component.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ChangeDetectionStrategy,
 3 |   Component
 4 | } from '@angular/core';
 5 | import {
 6 |   Router,
 7 |   ActivatedRoute
 8 | } from '@angular/router';
 9 | 
10 | @Component({
11 |   selector: 'popover-demo',
12 |   templateUrl: 'popover.component.html',
13 |   changeDetection: ChangeDetectionStrategy.OnPush,
14 |   styles: [
15 |     `
16 |      :host {
17 |         flex-grow: 1;
18 |      }
19 |      .container {
20 |         width:200px;
21 |         height: 212px;
22 |         position: relative;
23 |         margin: auto;
24 |      }
25 |      .bar {
26 |         box-sizing: border-box;
27 |         width: 100%;
28 |         padding: 16px;
29 |         height: 64px;
30 |      }
31 |      .bar button {
32 |         color: white;
33 |      }
34 |      .top-right{
35 |         position:absolute;
36 |         box-sizing: border-box;
37 |         right: 16px;
38 |      }
39 |      .background {
40 |         background: white;
41 |         height: 148px;
42 |         width: 100%;
43 |      }
44 |     `
45 |   ]
46 | })
47 | export class PopoverDemo {
48 |     onShow() {
49 |       console.log('onShow');
50 |     }
51 | 
52 |     onHide() {
53 |         console.log('onHide');
54 |     }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/e2e-app/app/select/matchSorter.pipe.ts:
--------------------------------------------------------------------------------
 1 | import { Pipe, PipeTransform } from '@angular/core';
 2 | import matchSorter from 'match-sorter';
 3 | 
 4 | @Pipe({
 5 |     name: 'matchSorter',
 6 | })
 7 | export class MatchSorterPipe implements PipeTransform {
 8 |     transform(input: any[] = [], options: Object|string, value: string): any {
 9 |         return matchSorter(
10 |             input,
11 |             value,
12 |             typeof options === 'string' ? { keys: [options] } : options,
13 |         );
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/e2e-app/app/select/select.component.html:
--------------------------------------------------------------------------------
  1 | <h4>THE SELECT</h4>
  2 | 
  3 | <h5>Reactive form</h5>
  4 | 
  5 | <form [formGroup]="form">
  6 |   <mdl-select formControlName="personId">
  7 |     <mdl-option *ngFor="let p of people" [value]="p.id" [disabled]="p.disabled">{{p.name}}</mdl-option>
  8 |   </mdl-select>
  9 | </form>
 10 | 
 11 | <pre prism ngNonBindable>
 12 |   <![CDATA[
 13 | <form [formGroup]="form">
 14 |   <mdl-select formControlName="personId">
 15 |     <mdl-option *ngFor="let p of people" [value]="p.id" [disabled]="p.disabled">{{p.name}}</mdl-option>
 16 |   </mdl-select>
 17 | </form>
 18 |    ]]>
 19 | </pre>
 20 | 
 21 | <h5>autocomplete example</h5>
 22 | 
 23 | <mdl-select #autocompleteSelect label="{{countryLabel}}" floating-label
 24 |             [autocomplete]="true"
 25 |             (change)="onChange($event)"
 26 |             [(ngModel)]="autocompleteCountryCode">
 27 |   <mdl-option *ngFor="let c of countries | matchSorter:'name':autocompleteSelect.searchQuery" [value]="c.code">{{c.name}}</mdl-option>
 28 | </mdl-select>
 29 | 
 30 | <pre prism ngNonBindable>
 31 |   <![CDATA[
 32 | <mdl-select #autocompleteSelect label="{{countryLabel}}" floating-label
 33 |             [autocomplete]="true"
 34 |             (change)="onChange($event)"
 35 |             [(ngModel)]="autocompleteCountryCode">
 36 |   <mdl-option *ngFor="let c of countries | matchSorter:'name':autocompleteSelect.searchQuery" [value]="c.code">{{c.name}}</mdl-option>
 37 | </mdl-select>
 38 |    ]]>
 39 | </pre>
 40 | 
 41 | 
 42 | <h5>ngModel with floating label</h5>
 43 | 
 44 | <h6>without initial value</h6>
 45 | <mdl-select label="{{countryLabel}}" floating-label [(ngModel)]="otherCountryCode">
 46 |   <mdl-option *ngFor="let c of countries" [value]="c.code">{{c.name}}</mdl-option>
 47 | </mdl-select>
 48 | 
 49 | <pre prism ngNonBindable>
 50 |   <![CDATA[
 51 | <mdl-select label="{{countryLabel}}" floating-label [(ngModel)]="otherCountryCode">
 52 |   <mdl-option *ngFor="let c of countries" [value]="c.code">{{c.name}}</mdl-option>
 53 | </mdl-select>
 54 |    ]]>
 55 | </pre>
 56 | 
 57 | <h6>without initial value, with nullable option and placeholder</h6>
 58 | <p>By setting an option with a blank value, the select field will revert back to the placeholder text (similar to a textfield).</p>
 59 | <mdl-select [(ngModel)]="otherCountryCode2" placeholder="Country">
 60 |   <mdl-option [value]=""><em>-- Select a Country --</em></mdl-option>
 61 |   <mdl-option *ngFor="let c of countries" [value]="c.code">{{c.name}}</mdl-option>
 62 | </mdl-select>
 63 | 
 64 | <pre prism ngNonBindable>
 65 |   <![CDATA[
 66 | <mdl-select [(ngModel)]="otherCountryCode2" placeholder="Country">
 67 |   <mdl-option [value]=""><em>-- Select a Country --</em></mdl-option>
 68 |   <mdl-option *ngFor="let c of countries" [value]="c.code">{{c.name}}</mdl-option>
 69 | </mdl-select>
 70 |    ]]>
 71 | </pre>
 72 | 
 73 | <h6>With initial value, without nullable option</h6>
 74 | <mdl-select floating-label [(ngModel)]="color" placeholder="Filter by Color">
 75 |   <mdl-option value="all"><em>All</em></mdl-option>
 76 |   <mdl-option *ngFor="let c of colors" [value]="c.code">{{c.name}}</mdl-option>
 77 | </mdl-select>
 78 | 
 79 | <pre prism ngNonBindable>
 80 |   <![CDATA[
 81 | <mdl-select floating-label [(ngModel)]="color" placeholder="Country">
 82 |   <mdl-option value="all"><em>All</em></mdl-option>
 83 |   <mdl-option *ngFor="let c of colors" [value]="c.code">{{c.name}}</mdl-option>
 84 | </mdl-select>
 85 |    ]]>
 86 | </pre>
 87 | 
 88 | <h5>ngModel with initial value</h5>
 89 | 
 90 | <mdl-select [(ngModel)]="countryCode" placeholder="Select country">
 91 |   <mdl-option [value]=""><em>None</em></mdl-option>
 92 |   <mdl-option *ngFor="let c of countries" [value]="c.code">{{c.name}}</mdl-option>
 93 | </mdl-select>
 94 | 
 95 | <mdl-select [(ngModel)]="countryCode" placeholder="Select country" disabled="true">
 96 |   <mdl-option *ngFor="let c of countries" [value]="c.code">{{c.name}}</mdl-option>
 97 | </mdl-select>
 98 | 
 99 | 
100 | <pre prism ngNonBindable>
101 |   <![CDATA[
102 | <mdl-select [(ngModel)]="countryCode" placeholder="Select country">
103 |   <mdl-option [value]=""><em>None</em></mdl-option>
104 |   <mdl-option *ngFor="let c of countries" [value]="c.code">{{c.name}}</mdl-option>
105 | </mdl-select>
106 | 
107 | <mdl-select [(ngModel)]="countryCode" placeholder="Select country" disabled="true">
108 |   <mdl-option *ngFor="let c of countries" [value]="c.code">{{c.name}}</mdl-option>
109 | </mdl-select>
110 |    ]]>
111 | </pre>
112 | 
113 | <h5>Multiple with initial value</h5>
114 | 
115 | <mdl-select [(ngModel)]="countryCodes" [multiple]="true" placeholder="Select countries">
116 |   <mdl-option mdl-ripple *ngFor="let c of countries" [value]="c.code">{{c.name}}</mdl-option>
117 | </mdl-select>
118 | 
119 | <mdl-select [(ngModel)]="countryCodes" [multiple]="true" disabled="true" placeholder="Select countries">
120 |   <mdl-option *ngFor="let c of countries" [value]="c.code">{{c.name}}</mdl-option>
121 | </mdl-select>
122 | 
123 | 
124 | <pre prism ngNonBindable>
125 |   <![CDATA[
126 | <mdl-select [(ngModel)]="countryCodes" [multiple]="true" placeholder="Select countries">
127 |   <mdl-option mdl-ripple *ngFor="let c of countries" [value]="c.code">{{c.name}}</mdl-option>
128 | </mdl-select>
129 | 
130 | <mdl-select [(ngModel)]="countryCodes" [multiple]="true" disabled="true" placeholder="Select countries">
131 |   <mdl-option *ngFor="let c of countries" [value]="c.code">{{c.name}}</mdl-option>
132 | </mdl-select>
133 |    ]]>
134 | </pre>
135 | 
136 | 
137 | <h5>Dynamically generated selects with *ngFor</h5>
138 | 
139 | <div *ngFor="let countryCode of countryCodes; let i = index">
140 |   <mdl-select [(ngModel)]="countryCodes[i]" [placeholder]="'Select '+i">
141 |     <mdl-option *ngFor="let c of countries" [value]="c.code">{{c.name}}</mdl-option>
142 |   </mdl-select>
143 | </div>
144 | 
145 | <pre>countryCodes: {{ countryCodes | json }}</pre>
146 | 
147 | <pre prism ngNonBindable>
148 |   <![CDATA[
149 | <div *ngFor="let countryCode of countryCodes; let i = index">
150 |   <mdl-select [(ngModel)]="countryCodes[i]" [placeholder]="'Select '+i">
151 |     <mdl-option *ngFor="let c of countries" [value]="c.code">{{c.name}}</mdl-option>
152 |   </mdl-select>
153 | </div>
154 |    ]]>
155 | </pre>
156 | 
157 | 
158 | <h5>Dynamic multiselect</h5>
159 | 
160 | <p>
161 |   The <code>foodCategory</code> select has <code>(change)="foodSelect.reset()"</code>
162 |   that reloads multiselect options and resets its value.
163 | </p>
164 | 
165 | <mdl-select [(ngModel)]="foodCategory" placeholder="Select category" (change)="foodSelect.reset()">
166 |   <mdl-option *ngFor="let c of foodCategories" [value]="c.id">{{ c.name }}</mdl-option>
167 | </mdl-select>
168 | 
169 | <mdl-select #foodSelect [(ngModel)]="food" [multiple]="true" placeholder="Select food" (change)="onChange(food)">
170 |   <mdl-option mdl-ripple *ngFor="let foodName of foodByCategory[foodCategory]" [value]="foodName">{{ foodName }}</mdl-option>
171 | </mdl-select>
172 | 
173 | 
174 | 
175 | <pre prism ngNonBindable>
176 |   <![CDATA[
177 | <mdl-select [(ngModel)]="foodCategory" placeholder="Select category" (change)="foodSelect.reset()">
178 |   <mdl-option *ngFor="let c of foodCategories" [value]="c.id">{{ c.name }}</mdl-option>
179 | </mdl-select>
180 | 
181 | <mdl-select #foodSelect [(ngModel)]="food" [multiple]="true" placeholder="Select food" (change)="onChange(food)">
182 |   <mdl-option mdl-ripple *ngFor="let foodName of foodByCategory[foodCategory]" [value]="foodName">{{ foodName }}</mdl-option>
183 | </mdl-select>
184 |    ]]>
185 | </pre>
186 | 
187 | <h5>Object value</h5>
188 | 
189 | <p>
190 |   FormControl return array of coordinate object as value
191 | </p>
192 | <form [formGroup]="arrayForm">
193 |   <mdl-select [(ngModel)]="locations" formControlName="locations" [multiple]="true" placeholder="Select locations">
194 |     <mdl-option *ngFor="let c of cityCoordinates" [value]="{ latitude: c.latitude , longitude: c.longitude }">{{ c.name }}</mdl-option>
195 |   </mdl-select>
196 | </form>
197 | <p>
198 |   Locations: {{ locations | json }}
199 | </p>
200 | 
201 | <pre prism ngNonBindable>
202 |   <![CDATA[
203 | <form [formGroup]="arrayForm">
204 |   <mdl-select [(ngModel)]="locations" formControlName="locations" [multiple]="true" placeholder="Select locations">
205 |     <mdl-option *ngFor="let c of cityCoordinates" [value]="{ latitude: c.latitude , longitude: c.longitude }">{{ c.name }}</mdl-option>
206 |   </mdl-select>
207 | </form>
208 |    ]]>
209 | </pre>
210 | 


--------------------------------------------------------------------------------
/src/e2e-app/app/select/select.component.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Component,
  3 |   ChangeDetectionStrategy
  4 | } from '@angular/core';
  5 | import {
  6 |   Router,
  7 |   ActivatedRoute
  8 | } from '@angular/router';
  9 | import {
 10 |   FormGroup,
 11 |   FormControl
 12 | } from '@angular/forms';
 13 | 
 14 | @Component({
 15 |   selector: 'select-demo',
 16 |   templateUrl: 'select.component.html',
 17 |   changeDetection: ChangeDetectionStrategy.OnPush
 18 | })
 19 | export class SelectDemo {
 20 |   form: FormGroup;
 21 | 
 22 |   personId: FormControl = new FormControl(1);
 23 |   people: any[] = [
 24 |     {id: 1, name: 'Bryan Cranston'},
 25 |     {id: 2, name: 'Aaron Paul'},
 26 |     {id: 3, name: 'Bob Odenkirk'},
 27 |     {id: 4, name: 'Dean Norris'},
 28 |     {id: 5, name: 'Jonathan Banks'},
 29 |     {id: 6, name: 'Seal Henry Olusegun Olumide Adeola Samuel'},
 30 |     {id: 7, name: 'Rami Malek', disabled: true},
 31 |     {id: 8, name: 'Christian Slater'},
 32 |     {id: 9, name: 'Martin Wallström'},
 33 |     {id: 10, name: 'Angela Sarafyan'},
 34 |     {id: 11, name: 'Robert Pattinson'},
 35 |     {id: 12, name: 'Billy Bob Thornton', disabled: true}
 36 |   ];
 37 | 
 38 |   countryCode: string = 'FR';
 39 |   countryLabel: string = 'Country';
 40 |   autocompleteCountryCode: string = null;
 41 |   otherCountryCode: string = null;
 42 |   otherCountryCode2: string = null;
 43 |   countryCodes: string[] = ['FR', 'DE', 'IT'];
 44 |   countries: any = [
 45 |     {name: 'France', code: 'FR'},
 46 |     {name: 'Germany', code: 'DE'},
 47 |     {name: 'Italy', code: 'IT'},
 48 |     {name: 'Netherlands', code: 'NL'},
 49 |     {name: 'Poland', code: 'PL'},
 50 |     {name: 'Spain', code: 'ES'},
 51 |     {name: 'United Kingdom', code: 'UK'},
 52 |   ];
 53 | 
 54 |   color: string = "all";
 55 |   colors: any = [
 56 |     { name: "Red", code: "r"},
 57 |     { name: "Green", code: "g"},
 58 |     { name: "Blue", code: "b"}
 59 |   ];
 60 | 
 61 |   foodCategories: any[] = [
 62 |     {id: '1', name: 'Vegetables'},
 63 |     {id: '2', name: 'Fruits'},
 64 |   ];
 65 | 
 66 |   foodByCategory: any = {
 67 |     '1': [
 68 |       'Avocado', 'Beet', 'Broccoli', 'Carrot', 'Cucumber',
 69 |       'Onion', 'Potato', 'Pumpkin', 'Radish', 'Spinach'
 70 |     ],
 71 |     '2': [
 72 |       'Apple', 'Banana', 'Cherry', 'Grapes', 'Orange',
 73 |       'Peach', 'Pear', 'Pineapple', 'Plum', 'Strawberry'
 74 |     ]
 75 |   };
 76 |   food: string[];
 77 | 
 78 |   arrayForm: FormGroup;
 79 |   locationControl = new FormControl('');
 80 | 
 81 |   cityCoordinates: any = [
 82 |     {name: 'İstanbul', latitude:'41.0055005',longitude:'28.7319952'},
 83 |     {name: 'Paris', latitude:'48.8589507',longitude:'2.2770202'},
 84 |     {name: 'London', latitude:'51.5287718',longitude:'-0.2416813'},
 85 |     {name: 'New York', latitude:'40.6976701',longitude:'-74.2598654'},
 86 |     {name: 'San Francisco', latitude:'37.757815',longitude:'-122.50764'},
 87 |     {name: 'Sydney', latitude:'-33.8474027',longitude:'150.6517794'},
 88 |     {name: 'Shanghai', latitude:'31.2246325',longitude:'121.1965643'}
 89 |   ];
 90 |   locations: any[];
 91 | 
 92 |   ngOnInit() {
 93 |     this.form = new FormGroup({
 94 |       personId: this.personId
 95 |     });
 96 | 
 97 |     this.arrayForm = new FormGroup({
 98 |       locations: this.locationControl
 99 |     });
100 | 
101 |     this.locationControl.valueChanges
102 |       .subscribe((value: any) => {
103 |         console.log('locationControl.valueChanges', value);
104 |       });
105 | 
106 |     this.locationControl.setValue([
107 |       {latitude:'41.0055005',longitude:'28.7319952'},
108 |       {latitude:'37.757815',longitude:'-122.50764'}
109 |     ]);
110 | 
111 |     console.log('this.arrayForm.value',this.arrayForm.value);
112 | 
113 | 
114 |     this.personId.valueChanges
115 |       .subscribe((value: any) => {
116 |         console.log('personId.valueChanges', value);
117 |       });
118 |   }
119 | 
120 |   onChange(value: any) {
121 |     console.log('onChange', value);
122 |   }
123 | }
124 | 


--------------------------------------------------------------------------------
/src/e2e-app/css/prism.scss:
--------------------------------------------------------------------------------
  1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
  2 | /**
  3 |  * prism.js default theme for JavaScript, CSS and HTML
  4 |  * Based on dabblet (http://dabblet.com)
  5 |  * @author Lea Verou
  6 |  */
  7 | 
  8 | code[class*="language-"],
  9 | pre[class*="language-"] {
 10 | 	color: black;
 11 | 	background: none;
 12 | 	text-shadow: 0 1px white;
 13 | 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 14 | 	text-align: left;
 15 | 	white-space: pre;
 16 | 	word-spacing: normal;
 17 | 	word-break: normal;
 18 | 	word-wrap: normal;
 19 | 	line-height: 1.5;
 20 | 
 21 | 	-moz-tab-size: 4;
 22 | 	-o-tab-size: 4;
 23 | 	tab-size: 4;
 24 | 
 25 | 	-webkit-hyphens: none;
 26 | 	-moz-hyphens: none;
 27 | 	-ms-hyphens: none;
 28 | 	hyphens: none;
 29 | }
 30 | 
 31 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 32 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 33 | 	text-shadow: none;
 34 | 	background: #b3d4fc;
 35 | }
 36 | 
 37 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 38 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
 39 | 	text-shadow: none;
 40 | 	background: #b3d4fc;
 41 | }
 42 | 
 43 | @media print {
 44 | 	code[class*="language-"],
 45 | 	pre[class*="language-"] {
 46 | 		text-shadow: none;
 47 | 	}
 48 | }
 49 | 
 50 | /* Code blocks */
 51 | pre[class*="language-"] {
 52 | 	padding: 1em;
 53 | 	margin: .5em 0;
 54 | 	overflow: auto;
 55 | }
 56 | 
 57 | :not(pre) > code[class*="language-"],
 58 | pre[class*="language-"] {
 59 | 	background: #f5f2f0;
 60 | }
 61 | 
 62 | /* Inline code */
 63 | :not(pre) > code[class*="language-"] {
 64 | 	padding: .1em;
 65 | 	border-radius: .3em;
 66 | 	white-space: normal;
 67 | }
 68 | 
 69 | .token.comment,
 70 | .token.prolog,
 71 | .token.doctype,
 72 | .token.cdata {
 73 | 	color: slategray;
 74 | }
 75 | 
 76 | .token.punctuation {
 77 | 	color: #999;
 78 | }
 79 | 
 80 | .namespace {
 81 | 	opacity: .7;
 82 | }
 83 | 
 84 | .token.property,
 85 | .token.tag,
 86 | .token.boolean,
 87 | .token.number,
 88 | .token.constant,
 89 | .token.symbol,
 90 | .token.deleted {
 91 | 	color: #905;
 92 | }
 93 | 
 94 | .token.selector,
 95 | .token.attr-name,
 96 | .token.string,
 97 | .token.char,
 98 | .token.builtin,
 99 | .token.inserted {
100 | 	color: #690;
101 | }
102 | 
103 | .token.operator,
104 | .token.entity,
105 | .token.url,
106 | .language-css .token.string,
107 | .style .token.string {
108 | 	color: #a67f59;
109 | 	background: hsla(0, 0%, 100%, .5);
110 | }
111 | 
112 | .token.atrule,
113 | .token.attr-value,
114 | .token.keyword {
115 | 	color: #07a;
116 | }
117 | 
118 | .token.function {
119 | 	color: #DD4A68;
120 | }
121 | 
122 | .token.regex,
123 | .token.important,
124 | .token.variable {
125 | 	color: #e90;
126 | }
127 | 
128 | .token.important,
129 | .token.bold {
130 | 	font-weight: bold;
131 | }
132 | .token.italic {
133 | 	font-style: italic;
134 | }
135 | 
136 | .token.entity {
137 | 	cursor: help;
138 | }
139 | 
140 | 


--------------------------------------------------------------------------------
/src/e2e-app/css/style.scss:
--------------------------------------------------------------------------------
 1 | @import "../../../node_modules/@angular-mdl/core/scss/color-definitions";
 2 | 
 3 | $color-primary: $palette-blue-500;
 4 | $color-primary-dark: $palette-blue-700;
 5 | $color-accent: $palette-amber-A200;
 6 | $color-primary-contrast: $color-dark-contrast;
 7 | $color-accent-contrast: $color-dark-contrast;
 8 | 
 9 | @import "../../../node_modules/@angular-mdl/core/scss/material-design-lite";
10 | 
11 | @import '../../components/datepicker/datepicker';
12 | @import '../../components/popover/popover';
13 | @import '../../components/select/select';
14 | @import '../../components/expansion-panel/expansion-panel';
15 | 
16 | code {
17 |   background: #f5f2f0;
18 |   padding: 2px;
19 | }
20 | 
21 | @import "prism";
22 | 
23 | [prism] {
24 |   background: #f5f2f0;
25 |   white-space: pre-wrap;
26 |   padding-left: 1rem;
27 | }
28 | 
29 | table.docu {
30 |   width: 100%;
31 |   position: relative;
32 |   border: 1px solid rgba(0,0,0,.12);
33 |   border-collapse: collapse;
34 |   white-space: normal;
35 |   font-size: 13px;
36 |   background-color: #fff;
37 |   margin-bottom: 1rem;
38 | 
39 |   thead {
40 |     background-color: unquote("rgb(#{$color-primary})");
41 |     th {
42 |       position: relative;
43 |       vertical-align: bottom;
44 |       text-overflow: ellipsis;
45 |       font-weight: 500;
46 |       line-height: 24px;
47 |       letter-spacing: 0;
48 |       height: 48px;
49 |       font-size: 16px;
50 |       color: unquote("rgb(#{$color-accent})");
51 |       padding-bottom: 8px;
52 |       box-sizing: border-box;
53 |     }
54 |   }
55 | 
56 |   tbody {
57 |     td:first-child {
58 |       font-weight: bold;
59 |       max-width: 300px;
60 |     }
61 |     td {
62 |       vertical-align: top;
63 |       position: relative;
64 |       border-top: 1px solid rgba(0, 0, 0, .12);
65 |       border-bottom: 1px solid rgba(0, 0, 0, .12);
66 |       padding: 12px 18px;
67 |       box-sizing: border-box;
68 |       opacity: 0.8;
69 |       font-size: 16px;
70 |     }
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/src/e2e-app/index.hbs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <base href="{{htmlWebpackPlugin.options.baseUrl}}">
 5 |   <title>angular2-mdl-ext</title>
 6 |   <meta charset="UTF-8">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <meta name="description" content="Angular 2 Material Design Lite; Angular components
 9 |     for Material Design Lite; Popover, Select">
10 |   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
11 | </head>
12 | <body>
13 | <root-app>Loading...</root-app>
14 | <dialog-outlet></dialog-outlet>
15 | <script>
16 |   if (sessionStorage && history){
17 |     // simulate html5 mode server behavior on github pages - see 404.html
18 |     var redirect = sessionStorage.redirect;
19 |     delete sessionStorage.redirect;
20 |     if (redirect && redirect != location.href) {
21 |       history.replaceState(null, null, redirect);
22 |     }
23 |   }
24 | </script>
25 | 
26 | </body>
27 | </html>
28 | 
29 | 
30 | 


--------------------------------------------------------------------------------
/src/e2e-app/main.ts:
--------------------------------------------------------------------------------
 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 2 | import { enableProdMode } from '@angular/core';
 3 | import { AppModule } from './app/app.module';
 4 | 
 5 | if (process.env['ENV'] === 'production') {
 6 |   enableProdMode();
 7 | }
 8 | 
 9 | platformBrowserDynamic().bootstrapModule(AppModule);
10 | 


--------------------------------------------------------------------------------
/src/e2e-app/polyfills.ts:
--------------------------------------------------------------------------------
 1 | import 'core-js/es6';
 2 | import 'core-js/es7/reflect';
 3 | require('zone.js/dist/zone');
 4 | 
 5 | // IE 11 Support
 6 | import 'custom-event-polyfill';
 7 | 
 8 | if (process.env['ENV'] === 'production') {
 9 |   // Production
10 | } else {
11 |   // Development
12 |   Error['stackTraceLimit'] = Infinity;
13 |   require('zone.js/dist/long-stack-trace-zone');
14 | }
15 | 


--------------------------------------------------------------------------------
/src/e2e-app/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["es6", "dom"],
 5 |     "module": "es2015",
 6 |     "moduleResolution": "node",
 7 |     "sourceMap": true,
 8 |     "emitDecoratorMetadata": true,
 9 |     "experimentalDecorators": true,
10 |     "removeComments": false,
11 |     "noImplicitAny": false,
12 |     "suppressImplicitAnyIndexErrors": true,
13 |     "outDir": "../tmp/src",
14 |     "typeRoots": ["../../node_modules/@types"],
15 |     "types": [
16 |       "node",
17 |       "jasmine"
18 |     ]
19 |   },
20 |   "awesomeTypescriptLoaderOptions": {
21 |     "useWebpackText": true // Allows other loaders to be chained to awesome-typescript-loader.
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/e2e-app/vendor.ts:
--------------------------------------------------------------------------------
 1 | // Angular 2
 2 | import '@angular/platform-browser';
 3 | import '@angular/platform-browser-dynamic';
 4 | import '@angular/core';
 5 | import '@angular/common';
 6 | import '@angular/http';
 7 | import '@angular/router';
 8 | import '@angular/animations';
 9 | // RxJS
10 | import 'rxjs';
11 | // angular2-mdl
12 | import '@angular-mdl/core';
13 | import '@mseemann/prism';
14 | 


--------------------------------------------------------------------------------
/tools/gulp/constants.ts:
--------------------------------------------------------------------------------
1 | import { join } from 'path';
2 | 
3 | export const PROJECT_ROOT =  join(__dirname, '../..');
4 | export const SOURCE_ROOT = join(PROJECT_ROOT, 'src');
5 | 
6 | export const DIST_ROOT = join(PROJECT_ROOT, 'dist');
7 | export const DIST_COMPONENTS_ROOT = join(DIST_ROOT, '@angular-mdl');
8 | 


--------------------------------------------------------------------------------
/tools/gulp/gulpfile.ts:
--------------------------------------------------------------------------------
1 | import './tasks/clean';
2 | import './tasks/build';
3 | import './tasks/test';
4 | import './tasks/dist';


--------------------------------------------------------------------------------
/tools/gulp/tasks/build.ts:
--------------------------------------------------------------------------------
  1 | import * as gulp from 'gulp';
  2 | import { SOURCE_ROOT, DIST_COMPONENTS_ROOT, PROJECT_ROOT } from '../constants';
  3 | import * as path from 'path';
  4 | import * as gulpTs from 'gulp-typescript';
  5 | import WritableStream = NodeJS.WritableStream;
  6 | 
  7 | var exec = require('child_process').exec;
  8 | const gulpSourcemaps = require('gulp-sourcemaps');
  9 | const gulpMerge = require('merge2');
 10 | const print = require('gulp-print');
 11 | const gulpSass = require('gulp-sass');
 12 | const autoprefixer = require('gulp-autoprefixer');
 13 | var cleanCSS = require('gulp-clean-css');
 14 | const fs = require('fs');
 15 | const webpack = require("webpack");
 16 | 
 17 | const componentsDir = path.join(SOURCE_ROOT, 'components');
 18 | 
 19 | 
 20 | gulp.task(':watch:components:spec', () => {
 21 |     gulp.watch(path.join(componentsDir, '**/*.ts'), [':build:components:spec']);
 22 |     gulp.watch(path.join(componentsDir, '**/*.scss'), [':build:components:scss']);
 23 |     gulp.watch(path.join(componentsDir, '**/*.html'), [':build:components:assets']);
 24 | });
 25 | 
 26 | gulp.task(':build:components:assets', () => {
 27 | 
 28 |     return gulp.src([path.join(componentsDir, '**/*.*'), '!**/*.ts'])
 29 |         .pipe( <WritableStream> gulp.dest(DIST_COMPONENTS_ROOT));
 30 | 
 31 | });
 32 | 
 33 | 
 34 | gulp.task(':build:components:spec', () => {
 35 | 
 36 |     const tsConfigPath = path.join(componentsDir, 'tsconfig-spec.json');
 37 | 
 38 | 
 39 |     const tsProject = gulpTs.createProject(tsConfigPath, {
 40 |         typescript: require('typescript')
 41 |     });
 42 | 
 43 |     let pipe = tsProject.src()
 44 |         .pipe(gulpSourcemaps.init())
 45 |         .pipe(tsProject());
 46 |     let dts = pipe.dts.pipe(gulp.dest(DIST_COMPONENTS_ROOT));
 47 | 
 48 |     return gulpMerge([
 49 |         dts,
 50 |         pipe
 51 |             .pipe(gulpSourcemaps.write('.', {includeContent: false, sourceRoot: '../../src/components'}))
 52 |             .pipe(gulp.dest(DIST_COMPONENTS_ROOT))
 53 |     ]);
 54 | 
 55 | });
 56 | 
 57 | gulp.task(':build:components:ts', () => {
 58 | 
 59 |     const tsConfigPath = path.join(componentsDir, 'tsconfig-ngc.json');
 60 | 
 61 |     const tsProject = gulpTs.createProject(tsConfigPath, {
 62 |         typescript: require('typescript')
 63 |     });
 64 | 
 65 |     let pipe = gulp.src([path.join(componentsDir, '**/*.ts'), '!**/*.spec.ts'])
 66 |         .pipe(gulpSourcemaps.init())
 67 |         .pipe(tsProject());
 68 |     let dts = pipe.dts.pipe(gulp.dest(DIST_COMPONENTS_ROOT));
 69 | 
 70 |     return gulpMerge([
 71 |         dts,
 72 |         pipe
 73 |             .pipe(gulpSourcemaps.write('.', {includeContent: false}))
 74 |             .pipe(gulp.dest(DIST_COMPONENTS_ROOT))
 75 |     ]);
 76 | 
 77 | });
 78 | 
 79 | gulp.task(':build:components:ngc', (done: () => void) => {
 80 | 
 81 |     const tsConfigPath = path.join(componentsDir, 'tsconfig-ngc.json');
 82 | 
 83 |     exec('ngc -p '+tsConfigPath, (error: Error, stdout: Buffer, stderr: Buffer) => {
 84 |         if(error){
 85 |             console.log(`ngc error`, error);
 86 |         }
 87 |         done();
 88 |     });
 89 | });
 90 | 
 91 | gulp.task(':build:components:scss', () => {
 92 | 
 93 |     const mdlScss = path.join(PROJECT_ROOT, 'node_modules/@angular-mdl/core/scss');
 94 | 
 95 |     const sassOptions = {includePaths: [mdlScss]};
 96 | 
 97 |     return gulp.src(path.join(componentsDir, '**/*.scss'))
 98 |         .pipe(gulpSourcemaps.init())
 99 |         .pipe(gulpSass(sassOptions).on('error', gulpSass.logError))
100 |         .pipe(autoprefixer({
101 |             browsers: ['last 2 versions'],
102 |             cascade: false
103 |         }))
104 |         .pipe(cleanCSS())
105 |         .pipe(gulpSourcemaps.write('.'))
106 |         .pipe(gulp.dest(DIST_COMPONENTS_ROOT));
107 | });
108 | 
109 | 
110 | function createUmdBundleByWebpack(component: string) {
111 |     console.log(`create umd bundle for ${component}`);
112 | 
113 |     return new Promise( (resolve, reject)=>{
114 |         webpack({
115 |             entry: path.join(componentsDir, component,'index.ts'),
116 |             output: {
117 |                 path: path.join(DIST_COMPONENTS_ROOT, component),
118 |                 filename: 'index.umd.js',
119 |                 libraryTarget: 'umd',
120 |                 library: 'angularMdl.'+component.replace(/-/g, "")
121 |             },
122 |             resolve: {
123 |                 extensions: ['.ts', '.js']
124 |             },
125 |             externals: {
126 |                 '@angular/core': {
127 |                     root: ['ng', 'core'],
128 |                     commonjs: '@angular/core',
129 |                     commonjs2: '@angular/core',
130 |                     amd: '@angular/core'
131 |                 },
132 |                 '@angular/common': {
133 |                     root: ['ng', 'common'],
134 |                     commonjs: '@angular/common',
135 |                     commonjs2: '@angular/common',
136 |                     amd: '@angular/common'
137 |                 },
138 |                 '@angular/forms': {
139 |                     root: ['ng', 'forms'],
140 |                     commonjs: '@angular/forms',
141 |                     commonjs2: '@angular/forms',
142 |                     amd: '@angular/forms'
143 |                 },
144 |                 '@angular/platform-browser': {
145 |                     root: ['ng', 'platformBrowser'],
146 |                     commonjs: '@angular/platform-browser',
147 |                     commonjs2: '@angular/platform-browser',
148 |                     amd: '@angular/platform-browser'
149 |                 },
150 |                 '@angular/platform-browser-dynamic': {
151 |                     root: ['ng', 'platformBrowserDynamic'],
152 |                     commonjs: '@angular/platform-browser-dynamic',
153 |                     commonjs2: '@angular/platform-browser-dynamic',
154 |                     amd: '@angular/platform-browser-dynamic'
155 |                 },
156 |                 '@angular/animations': {
157 |                     root: ['ng', 'animations'],
158 |                     commonjs: '@angular/animations',
159 |                     commonjs2: '@angular/animations',
160 |                     amd: '@angular/animations'
161 |                 },
162 |                 '@angular/platform-browser/animations': {
163 |                     root: ['ng', 'platformBrowserAnimations'],
164 |                     commonjs: '@angular/platform-browser/animations',
165 |                     commonjs2: '@angular/platform-browser/animations',
166 |                     amd: '@angular/platform-browser/animations'
167 |                 },
168 |                 'rxjs/Subject': {
169 |                     root: ['rx', 'Subject'],
170 |                     commonjs: 'rxjs/Subject',
171 |                     commonjs2: 'rxjs/Subject',
172 |                     amd: 'rxjs/Subject'
173 |                 },
174 |                 'rxjs/Observable': {
175 |                     root: ['rx', 'Observable'],
176 |                     commonjs: 'rxjs/Observable',
177 |                     commonjs2: 'rxjs/Observable',
178 |                     amd: 'rxjs/Observable'
179 |                 },
180 |                 '@angular-mdl/core': {
181 |                     root: ['angularMdl', '@angular-mdl/core'],
182 |                     commonjs: '@angular-mdl/core',
183 |                     commonjs2: '@angular-mdl/core',
184 |                     amd: '@angular-mdl/core'
185 |                 },
186 |                 'moment': {
187 |                     root: ['moment', 'moment'],
188 |                     commonjs: 'moment',
189 |                     commonjs2: 'moment',
190 |                     amd: 'moment'
191 |                 }
192 |             },
193 |             module: {
194 | 
195 |                 rules: [
196 |                     {
197 |                         enforce: 'pre',
198 |                         test: /.ts$/,
199 |                         loader: 'string-replace-loader',
200 |                         options: {
201 |                             search: 'moduleId: module.id,',
202 |                             replace: '',
203 |                             flags: 'g'
204 |                         }
205 |                     },
206 |                     {
207 |                         test: /\.ts$/,
208 |                         exclude: [
209 |                             /\.(spec)\.ts$/
210 |                         ],
211 |                         use: [
212 |                             {
213 |                                 loader: 'awesome-typescript-loader',
214 |                                 options: {
215 |                                     configFileName:  path.join(componentsDir, 'tsconfig-ngc.json')
216 |                                 }
217 |                             },
218 |                             {
219 |                                 loader: 'angular2-template-loader'
220 |                             }
221 |                         ]
222 |                     },
223 |                     {
224 |                         test: /\.html$/,
225 |                         loader: 'html-loader'
226 |                     }
227 |                 ]
228 |             },
229 |             plugins: [
230 |                 new webpack.SourceMapDevToolPlugin({
231 |                     filename: component+'.js.map',
232 |                     test: /\.js($|\?)/i
233 |                 })
234 |             ]
235 | 
236 |         }, function(err: any, stats: any) {
237 |             if(err){
238 |                 reject(err);
239 |             } else {
240 |                 resolve();
241 |             }
242 |         });
243 |     });
244 | }
245 | 
246 | gulp.task(':build:components:umd', () => {
247 | 
248 |     const possiblyComponents = fs.readdirSync(componentsDir);
249 | 
250 |     // filter any non components
251 |     const components = possiblyComponents.filter( (fileOrDir: string) => {
252 |         const fullPath = path.join(componentsDir, fileOrDir);
253 |         const stat = fs.statSync(fullPath);
254 |         return stat.isDirectory() && fs.existsSync(path.join(fullPath, 'package.json'));
255 |     });
256 | 
257 |     let p = components.reduce(function(p: Promise<any>, component: string) {
258 |         return p.then( () => {return createUmdBundleByWebpack(component);});
259 |     }, Promise.resolve());
260 | 
261 |     return p;
262 | 
263 | });


--------------------------------------------------------------------------------
/tools/gulp/tasks/clean.ts:
--------------------------------------------------------------------------------
1 | import { task } from 'gulp';
2 | import * as gulp from 'gulp';
3 | 
4 | 
5 | const gulpClean = require('gulp-clean');
6 | 
7 | task('clean', [], (done:any) => {
8 |     return gulp.src('dist', { read: false }).pipe(gulpClean(null));
9 | });


--------------------------------------------------------------------------------
/tools/gulp/tasks/dist.ts:
--------------------------------------------------------------------------------
  1 | import * as gulp from 'gulp';
  2 | const runSequence = require('run-sequence');
  3 | var exec = require('child_process').exec;
  4 | import { DIST_COMPONENTS_ROOT } from '../constants';
  5 | import * as path from 'path';
  6 | const replace = require('gulp-string-replace');
  7 | const glob = require('glob');
  8 | const fs = require('fs');
  9 | 
 10 | // make sure the npm user is angular-mdl to publish all components
 11 | gulp.task(':dist:checknpmuser', (cb: (err?: any) => void) => {
 12 |   exec('npm whoami', (error: Error, stdout: Buffer, stderr: Buffer) => {
 13 |     if(error){
 14 |       cb(error);
 15 |     }
 16 |     const username = stdout.toString().replace(/^\s+|\s+$/g, '');
 17 |     if (username !== 'angular-mdl'){
 18 |       cb('not loged in as npm user angular-mdl');
 19 |     }
 20 |     console.log(`npm user is ${username}`);
 21 |     cb();
 22 |   });
 23 | });
 24 | 
 25 | gulp.task(':dist:removemoduleid', () => {
 26 |   return gulp.src(path.join(DIST_COMPONENTS_ROOT, '**/*.js'))
 27 |     .pipe(replace(/\s*moduleId:\s*module\.id\s*,?\s*/gm, '', {logs:{enabled:false}}))
 28 |     .pipe(gulp.dest(DIST_COMPONENTS_ROOT))
 29 | });
 30 | 
 31 | gulp.task(':dist:inlinehtml', ( done: (err?: any) => void ) => {
 32 | 
 33 |   const files = glob.sync(path.join(DIST_COMPONENTS_ROOT, '**/*.js'), {});
 34 |   files.forEach( (file: string) => {
 35 |     const content = fs.readFileSync(file, 'utf-8');
 36 |     const result = content.replace(/templateUrl:\s*'([^']+?\.html)'/g, (fullMatch: string, templateUrl: string) => {
 37 |       const templateFile = path.join(path.dirname(file), templateUrl);
 38 |       const templateContent = fs.readFileSync(templateFile, 'utf-8');
 39 |       const shortenedTemplate = templateContent
 40 |         .replace(/([\n\r]\s*)+/gm, ' ') // replace line feed
 41 |         .replace(/"/g, '\\"'); // escape "
 42 |       return `template: "${shortenedTemplate}"`;
 43 |     })
 44 |     fs.writeFileSync(file, result, 'utf-8');
 45 |   })
 46 | 
 47 |   done();
 48 | });
 49 | 
 50 | gulp.task(':dist:inlinecss', ( done: (err?: any) => void ) => {
 51 | 
 52 |   const files = glob.sync(path.join(DIST_COMPONENTS_ROOT, '**/*.js'), {});
 53 |   files.forEach( (file: string) => {
 54 |     const content = fs.readFileSync(file, 'utf-8');
 55 |     const result = content.replace(/styleUrls:\s*(\[[\s\S]*?\])/gm, (fullMatch: string, styleUrls: string) => {
 56 |       const urls = eval(styleUrls);
 57 |       return 'styles: ['
 58 |         + urls.map( (styleUrl: string) => {
 59 |           const styleFile = path.join(path.dirname(file), styleUrl);
 60 |           const styleContent = fs.readFileSync(styleFile, 'utf-8');
 61 |           const shortenedStyle = styleContent
 62 |             .replace(/([\n\r]\s*)+/gm, ' ') // remove line feeds
 63 |             .replace(/"/g, '\\"'); // escape "
 64 |           return `"${shortenedStyle}"`;
 65 |         })
 66 |           .join(',\n')
 67 |         + ']';
 68 |     })
 69 |     fs.writeFileSync(file, result, 'utf-8');
 70 |   })
 71 | 
 72 |   done();
 73 | });
 74 | 
 75 | /**
 76 |  * publish the package (determinde by the current working dir)
 77 |  */
 78 | function publishPackage() {
 79 |   var pJson = JSON.parse(fs.readFileSync('package.json', 'utf8'));
 80 | 
 81 |   console.log(`publish ${pJson.name}:${pJson.version}`);
 82 | 
 83 |   return new Promise<any>( (resolve, reject) => {
 84 |     exec('npm publish --access public', (error: Error, stdout: Buffer, stderr: Buffer) => {
 85 |       if (error) {
 86 |         console.log(`error publishing ${pJson.name}`, error);
 87 |         reject(error);
 88 |       }
 89 |       resolve();
 90 |     });
 91 |   });
 92 | }
 93 | /**
 94 |  * determine the published npm version of the component
 95 |  * @param componentDir
 96 |  * @returns {Promise<any>}
 97 |  */
 98 | function getPublishedVersion(componentDir: string) {
 99 | 
100 |   return new Promise<any>( (resolve, reject) => {
101 | 
102 |     var pJson = JSON.parse(fs.readFileSync(path.join(componentDir, 'package.json'), 'utf8'));
103 | 
104 |     exec(`npm show ${pJson.name} version`, (error: Error, stdout: Buffer, stderr: Buffer) => {
105 |       if (error){
106 |         reject(error);
107 |       }
108 |       const publishedVersion: string = stdout.toString().replace(/^\s+|\s+$/g, '');
109 |       resolve(publishedVersion);
110 |     });
111 |   });
112 | }
113 | 
114 | function publishComponent(dir: string) {
115 | 
116 |   const fullPath = path.join(DIST_COMPONENTS_ROOT, dir);
117 | 
118 |   return Promise.resolve()
119 |     .then ( () => {
120 |       process.chdir(fullPath);
121 |       return Promise.resolve();
122 |     })
123 |     .then( () => {
124 |       return getPublishedVersion(fullPath);
125 |     })
126 |     .then( (publishedVersion: any) => {
127 |       console.log(`published version of ${dir} is: ${publishedVersion}`);
128 | 
129 |       var pJson = JSON.parse(fs.readFileSync(path.join(fullPath, 'package.json'), 'utf8'));
130 |       console.log(`${dir}: version to publish is: ${pJson.version}`);
131 | 
132 |       return new Promise( (resolve, reject)=>{
133 |         if (publishedVersion != pJson.version) {
134 |           // publish that package
135 |           publishPackage().then( () => {
136 |             resolve();
137 |           })
138 | 
139 |         } else {
140 |           // nothing to do
141 |           console.log('not published');
142 |           resolve();
143 |         }
144 |       })
145 |     });
146 | }
147 | 
148 | gulp.task(':dist:publish', () => {
149 | 
150 |     // run through each component and publish it
151 |     // keep the current dir, because we need to cd to every component to publish the component
152 |     const currentDir = process.cwd();
153 |     const possiblyComponents = fs.readdirSync(DIST_COMPONENTS_ROOT);
154 | 
155 |     // filter any non components
156 |     const components = possiblyComponents.filter( (fileOrDir: string) => {
157 |       const fullPath = path.join(DIST_COMPONENTS_ROOT, fileOrDir);
158 |       const stat = fs.statSync(fullPath);
159 |       return stat.isDirectory() && fs.existsSync(path.join(fullPath, 'package.json'));
160 |     });
161 | 
162 |     let p = components.reduce(function(p: Promise<any>, item: string) {
163 |       return p.then( () => {return publishComponent(item);});
164 |     }, Promise.resolve());
165 | 
166 |     return p.then( () => {
167 |       // restore the working dir.
168 |       console.log(`set path to ${currentDir}`);
169 |       process.chdir(currentDir);
170 |       return Promise.resolve();
171 |     });
172 | 
173 | });
174 | 
175 | // creates a build. the publishing must be done manually cd into dist/component; npm publish
176 | gulp.task('dist:build', (done: () => void) => {
177 |   runSequence(
178 |     'clean',
179 |     [
180 |       ':build:components:assets',
181 |       ':build:components:scss',
182 |       ':build:components:ts',
183 |       ':build:components:ngc'
184 |     ],
185 |     ':dist:removemoduleid',
186 |     ':dist:inlinehtml',
187 |     ':dist:inlinecss',
188 |     ':build:components:umd',
189 |     done);
190 | });
191 | 
192 | //build and publis all
193 | gulp.task('dist', function(done: () => void) {
194 |   runSequence(
195 |     ':dist:checknpmuser',
196 |     'dist:build',
197 |     ':dist:publish',
198 |     done);
199 | });


--------------------------------------------------------------------------------
/tools/gulp/tasks/test.ts:
--------------------------------------------------------------------------------
 1 | import * as gulp from 'gulp';
 2 | const karma = require('karma');
 3 | import * as path from 'path';
 4 | import { PROJECT_ROOT } from '../constants';
 5 | const runSequence = require('run-sequence');
 6 | import gulpMerge = require('merge2');
 7 | 
 8 | gulp.task(':build:test:vendor', () => {
 9 | 
10 |     const npmVendorFiles = [
11 |         '@angular',
12 |         '@angular-mdl/core',
13 |         'core-js/client',
14 |         'rxjs',
15 |         'systemjs/dist',
16 |         'zone.js/dist',
17 |         'moment'
18 |     ];
19 | 
20 |     return gulpMerge(
21 |         npmVendorFiles.map(function(root: string) {
22 |             const inputs = path.join(root, '**/*.+(js|js.map)');
23 |             const destFolder = path.join('dist/vendor', root);
24 |             const dest = gulp.dest(destFolder);
25 |             return gulp.src(path.join('node_modules', inputs)).pipe( dest);
26 |         }));
27 | });
28 | 
29 | gulp.task(':test:deps', [], (done: any ) => {
30 |     runSequence('clean',
31 |         [
32 |             ':build:test:vendor',
33 |             ':build:components:assets',
34 |             ':build:components:scss',
35 |             ':build:components:spec'
36 |         ],
37 |         done);
38 | });
39 | 
40 | gulp.task('test', [':test:deps', ':watch:components:spec'], (done: any) => {
41 |     new karma.Server({
42 |         configFile: path.join(PROJECT_ROOT, 'config/tests/karma.conf.js')
43 |     }, done).start();
44 | });
45 | 
46 | gulp.task('test:single-run', [':test:deps'], (done: any) => {
47 |     new karma.Server({
48 |         configFile: path.join(PROJECT_ROOT, 'config/tests/karma.conf.js'),
49 |         singleRun: true
50 |     }, done).start();
51 | });
52 | 


--------------------------------------------------------------------------------
/tools/gulp/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "declaration": true,
 4 |     "emitDecoratorMetadata": true,
 5 |     "experimentalDecorators": true,
 6 |     "lib": ["es6", "es2015"],
 7 |     "module": "commonjs",
 8 |     "moduleResolution": "node",
 9 |     "noEmitOnError": true,
10 |     "noImplicitAny": true,
11 |     "outDir": "../../dist/gulp",
12 |     "rootDir": ".",
13 |     "sourceMap": true,
14 |     "target": "es5",
15 |     "inlineSources": true,
16 |     "stripInternal": true,
17 |     "baseUrl": "",
18 |     "typeRoots": [
19 |       "../../node_modules/@types"
20 |     ],
21 |     "types": [
22 |       "node"
23 |     ]
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "outDir": "./dist/out-tsc",
 5 |     "baseUrl": "src",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "moduleResolution": "node",
 9 |     "emitDecoratorMetadata": true,
10 |     "experimentalDecorators": true,
11 |     "target": "es5",
12 |     "typeRoots": [
13 |       "node_modules/@types"
14 |     ],
15 |     "lib": [
16 |       "es2016",
17 |       "dom"
18 |     ]
19 |   }
20 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./config/webpack/webpack.dev.js');
2 | 


--------------------------------------------------------------------------------