2 |
6 |
7 |
12 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/material/docs/app/js/scripts.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | DocsApp
3 | .factory('$demoAngularScripts', ['BUILDCONFIG', DemoAngularScripts]);
4 |
5 | function DemoAngularScripts(BUILDCONFIG) {
6 | var scripts = [
7 | 'angular.js',
8 | 'angular-animate.min.js',
9 | 'angular-route.min.js',
10 | 'angular-aria.min.js',
11 | 'angular-messages.min.js'
12 | ];
13 |
14 | return {
15 | all: allAngularScripts
16 | };
17 |
18 | function allAngularScripts() {
19 | return scripts.map(fullPathToScript);
20 | };
21 |
22 | function fullPathToScript(script) {
23 | return "https://ajax.googleapis.com/ajax/libs/angularjs/" + BUILDCONFIG.ngVersion + "/" + script;
24 | };
25 | };
26 | })();
27 |
--------------------------------------------------------------------------------
/material/src/components/icon/demoUsingTemplateCache/index.html:
--------------------------------------------------------------------------------
1 | {{tile.title}}
2 |
3 |
16 |
--------------------------------------------------------------------------------
/shower-bright/Readme.md:
--------------------------------------------------------------------------------
1 | # Bright theme for Shower
2 |
3 | Follow [@shower_me](https://twitter.com/shower_me) for support and updates
4 |
5 | To see Bright theme for Shower in action:
6 |
7 | - Open [shwr.me/shower/themes/bright](http://shwr.me/shower/themes/bright/)
8 | - Click any slide to enter presentation mode
9 | - Use arrow keys or presenter remote to navigate
10 | - Press `Esc` to exit presentation mode
11 |
12 | Part of [Shower presentation template](https://github.com/shower/shower/). See [Wiki](https://github.com/shower/shower/wiki) for more information how to use Shower.
13 |
14 | ---
15 | Licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License), see [license page](https://github.com/shower/shower/wiki/MIT-License) for details.
16 |
--------------------------------------------------------------------------------
/material/docs/app/img/icons/tabs-arrow.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
17 |
--------------------------------------------------------------------------------
/material/src/components/fabSpeedDial/demoTooltips/script.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | 'use strict';
3 |
4 | angular.module('fabSpeedDialModalDemo', ['ngMaterial'])
5 | .controller('DemoCtrl', function($mdDialog) {
6 | this.openDialog = function($event) {
7 | $mdDialog.show({
8 | clickOutsideToClose: true,
9 | controller: function($mdDialog) {
10 | this.close = function() {
11 | $mdDialog.cancel();
12 | };
13 | this.submit = function() {
14 | $mdDialog.hide();
15 | };
16 | },
17 | controllerAs: 'dialog',
18 | templateUrl: 'dialog.html',
19 | targetEvent: $event
20 | });
21 | }
22 | });
23 | })();
24 |
--------------------------------------------------------------------------------
/material/src/components/select/demoOptionsWithAsyncSearch/index.html:
--------------------------------------------------------------------------------
1 |
4 | Pre-fetch with $http & cache SVG icons using $templateCache.
5 | NOTE: Show the Source views for details...
6 |
9 |
2 |
10 |
--------------------------------------------------------------------------------
/material/config/ngModuleData.js:
--------------------------------------------------------------------------------
1 | // Regex adapted from https://github.com/ceymard/gulp-ngcompile
2 |
3 | module.exports = function processContent(fileContent) {
4 | var NG_MODULE_REGEX = /\.module\(('[^']*'|"[^"]*")\s*,(?:\s*\[([^\]]+)\])?/g;
5 | var match = NG_MODULE_REGEX.exec(fileContent || '');
6 | var module = match && match[1] && match[1].slice(1, -1); //remove quotes
7 | var depsMatch = match && match[2] && match[2].trim();
8 |
9 | var dependencies = [];
10 | if (depsMatch) {
11 | dependencies = depsMatch.split(/\s*,\s*/).map(function(dep) {
12 | dep = dep.slice(1, -1); //remove quotes
13 | return dep;
14 | });
15 | }
16 |
17 | return {
18 | module: module || '',
19 | dependencies: dependencies
20 | };
21 | };
22 |
--------------------------------------------------------------------------------
/material/gulp/tasks/watch-demo.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var gutil = require('gulp-util');
3 | var util = require('../util');
4 |
5 | exports.dependencies = ['build-demo'];
6 |
7 | exports.task = function() {
8 | var module = util.readModuleArg();
9 | var name = module.split('.').pop();
10 | var dir = "/dist/demos/"+name.trim();
11 | gutil.log('\n',
12 | '-- Rebuilding', dir, 'when source files change...\n',
13 | '--', gutil.colors.green('Hint:'), 'Run',
14 | gutil.colors.cyan('`gulp server`'),
15 | 'to start a livereload server in root, then navigate to\n',
16 | '--', gutil.colors.green('"dist/demos/' + name + '/"'), 'in your browser to develop.'
17 | );
18 |
19 | return gulp.watch('src/**/*', ['build-demo']);
20 | };
21 |
--------------------------------------------------------------------------------
/material/src/components/chips/demoStaticChips/index.html:
--------------------------------------------------------------------------------
1 | Select can call an arbitrary function on show. If this function returns a promise, it will display a loading indicator while it is being resolved:
3 |
4 |
5 | {{user.name}}
6 |
7 |
9 | You have assigned the task to: {{ user ? user.name : 'No one yet' }}
8 |
2 |
3 |
4 |
7 | Hockey
8 | Lacrosse
9 | Baseball
10 |
11 |
12 | {{ctrl.chipText}}
13 |
14 |
20 |
21 |
--------------------------------------------------------------------------------
/material/src/components/card/card.spec.js:
--------------------------------------------------------------------------------
1 | describe('mdCard directive', function() {
2 |
3 | beforeEach(module('material.components.card'));
4 |
5 | it('should have the default theme class when the md-theme attribute is not defined', inject(function($compile, $rootScope) {
6 | var card = $compile('Display a set of items as chips.
5 | 6 |
15 | Static chips cannot be selected, removed or edited, and are not part of any model.
16 | If no ng-model is provided, there are no input elements in md-chips.
17 |
2 |
22 |
--------------------------------------------------------------------------------
/shower-core/Readme.md:
--------------------------------------------------------------------------------
1 | # Core for Shower [](https://travis-ci.org/shower/core)
2 |
3 | Follow [@shower_me](https://twitter.com/shower_me) for support and updates
4 |
5 | To see Shower in action:
6 |
7 | - Open [shwr.me](http://shwr.me/)
8 | - Click any slide to enter presentation mode
9 | - Use arrow keys or presenter remote to navigate
10 | - Press `Esc` to exit presentation mode
11 |
12 | Part of [Shower presentation template](https://github.com/shower/shower/). See [Wiki](https://github.com/shower/shower/wiki) for more information how to use Shower.
13 |
14 | ---
15 | Licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License), see [license page](https://github.com/shower/shower/wiki/MIT-License) for details.
16 |
--------------------------------------------------------------------------------
/material/docs/app/partials/menu-toggle.tmpl.html:
--------------------------------------------------------------------------------
1 |
3 |
21 | Enter an address
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | {{state.abbrev}}
17 |
18 |
19 |
20 |
6 | {{section.name}}
7 |
8 |
12 |
13 |
14 | Toggle {{isOpen()? 'expanded' : 'collapsed'}}
15 |
16 |
2 |
16 |
17 |
--------------------------------------------------------------------------------
/material/src/components/progressLinear/demoBasicUsage/script.js:
--------------------------------------------------------------------------------
1 | angular.module('progressLinearDemo1', ['ngMaterial'])
2 | .config(function($mdThemingProvider) {
3 | })
4 | .controller('AppCtrl', ['$scope', '$interval', function($scope, $interval) {
5 | $scope.mode = 'query';
6 | $scope.determinateValue = 30;
7 | $scope.determinateValue2 = 30;
8 |
9 | $interval(function() {
10 | $scope.determinateValue += 1;
11 | $scope.determinateValue2 += 1.5;
12 | if ($scope.determinateValue > 100) {
13 | $scope.determinateValue = 30;
14 | $scope.determinateValue2 = 30;
15 | }
16 | }, 100, 0, true);
17 |
18 | $interval(function() {
19 | $scope.mode = ($scope.mode == 'query' ? 'determinate' : 'query');
20 | }, 7200, 0, true);
21 | }]);
22 |
--------------------------------------------------------------------------------
/material/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: false
3 | node_js:
4 | - '0.12'
5 | env:
6 | global:
7 | secure: TWmpBzRG68b9e5wbJ7I6ox8TrZTnU/XpOkBvggJyuMgvUz27accp92Y9U7DWUPiXYXcWnoc7pqVAvEbwd1/ykHKCqezmyEXsrzZo6POg2lNFXkI9vSuDukL8A4Ct9zANVmr+5Y+kEBtQ/viyO5Rxc5H9bZskSeMaegqR60ZT2E8=
8 |
9 | branches:
10 | only:
11 | - master
12 |
13 | before_script:
14 | - export DISPLAY=:99.0 # firefox virtual screen
15 | - sh -e /etc/init.d/xvfb start # firefox virtual screen
16 | - git config --global user.email "ngmaterial@googlegroups.com"
17 | - git config --global user.name "ngMaterial Bot"
18 |
19 | script:
20 | - gulp karma
21 |
22 | after_success:
23 | - ./scripts/travis-build-init.sh --sha=$TRAVIS_COMMIT
24 |
25 | notifications:
26 | flowdock: ca58afe1354053b15fe75a763138829d
27 |
--------------------------------------------------------------------------------
/material/src/core/services/ripple/ripple.spec.js:
--------------------------------------------------------------------------------
1 | describe('mdInkRipple diretive', function() {
2 |
3 | beforeEach(module('material.core'));
4 |
5 | it('should support custom colors via md-ink-ripple', inject(function ($timeout, $compile, $rootScope) {
6 | var elem = $compile('')($rootScope.$new()),
7 | container, ripple;
8 |
9 | expect(elem.children('.md-ripple-container').length).toBe(0);
10 |
11 | elem.controller('mdInkRipple').createRipple(0, 0);
12 | container = elem.children('.md-ripple-container');
13 | expect(container.length).toBe(1);
14 |
15 | ripple = container.children('.md-ripple');
16 | expect(ripple.length).toBe(1);
17 | expect(ripple.css('backgroundColor')).toBe('rgb(187, 187, 187)');
18 | }));
19 |
20 | });
21 |
--------------------------------------------------------------------------------
/material/docs/config/template/ngdoc/api/object.template.html:
--------------------------------------------------------------------------------
1 | {% include "lib/macros.html" %}
2 | {% extends "api/api.template.html" %}
3 |
4 | {% block additional %}
5 |
6 | {% if doc.usage %}
7 | The simplest way to display a single SVG icon is by referencing it by URL:
3 |
4 |
Style the icon size and color with CSS:
10 |
11 |
Usage
9 | {$ doc.usage | marked $} 10 |
13 |
16 |
17 |
18 |
21 |
22 | Done
23 |
24 |
25 | 3 | {%- if doc.title -%} 4 | {$ doc.title $} 5 | {%- elif doc.module -%} 6 | {$ doc.groupType | title $} components in {$ doc.module | code $} 7 | {%- else -%} 8 | Pages 9 | {%- endif -%} 10 |
11 | 12 | {$ doc.description | marked $} 13 | 14 |
15 |
30 |
31 | {% endblock %}
32 |
--------------------------------------------------------------------------------
/material/src/components/list/list-theme.scss:
--------------------------------------------------------------------------------
1 | md-list.md-THEME_NAME-theme {
2 | md-list-item.md-2-line .md-list-item-text,
3 | md-list-item.md-3-line .md-list-item-text {
4 | h3, h4 {
5 | color: '{{foreground-1}}';
6 | }
7 | p {
8 | color: '{{foreground-2}}';
9 | }
10 | }
11 | .md-proxy-focus.md-focused div.md-no-style {
12 | background-color: '{{background-100}}';
13 | }
14 |
15 | md-list-item > md-icon {
16 | color: '{{foreground-2}}';
17 |
18 | &.md-highlight {
19 | color: '{{primary-color}}';
20 | &.md-accent {
21 | color: '{{accent-color}}';
22 | }
23 | }
24 | }
25 | md-list-item button {
26 | background-color: '{{background-color}}';
27 |
28 | &.md-button:not([disabled]):hover {
29 | background-color: '{{background-color}}';
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/material/src/components/chips/js/contactChipsController.js:
--------------------------------------------------------------------------------
1 | angular
2 | .module('material.components.chips')
3 | .controller('MdContactChipsCtrl', MdContactChipsCtrl);
4 |
5 |
6 |
7 | /**
8 | * Controller for the MdContactChips component
9 | * @constructor
10 | */
11 | function MdContactChipsCtrl () {
12 | /** @type {Object} */
13 | this.selectedItem = null;
14 |
15 | /** @type {string} */
16 | this.searchText = '';
17 | }
18 |
19 |
20 | MdContactChipsCtrl.prototype.queryContact = function(searchText) {
21 | var results = this.contactQuery({'$query': searchText});
22 | return this.filterSelected ?
23 | results.filter(angular.bind(this, this.filterSelectedContacts)) : results;
24 | };
25 |
26 |
27 | MdContactChipsCtrl.prototype.filterSelectedContacts = function(contact) {
28 | return this.contacts.indexOf(contact) == -1;
29 | };
30 |
--------------------------------------------------------------------------------
/material/src/components/icon/demoFontIconsWithLigatures/script.js:
--------------------------------------------------------------------------------
1 |
2 | angular
3 | .module('appDemoFontIconsWithLigatures', ['ngMaterial'])
4 | .controller('DemoCtrl', function( $scope ) {
5 | // Specify a list of font-icons with ligatures and color overrides
6 | var iconData = [
7 | {name: 'accessibility' , color: "#777" },
8 | {name: 'question_answer', color: "rgb(89, 226, 168)" },
9 | {name: 'backup' , color: "#A00" },
10 | {name: 'email' , color: "#00A" }
11 | ];
12 |
13 | $scope.fonts = [].concat(iconData);
14 |
15 | // Create a set of sizes...
16 | $scope.sizes = [
17 | {size:"md-18",padding:0},
18 | {size:"md-24",padding:2},
19 | {size:"md-36",padding:6},
20 | {size:"md-48",padding:10}
21 | ];
22 |
23 | });
24 |
--------------------------------------------------------------------------------
/material/src/components/toolbar/demoScrollShrink/index.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
28 |
29 | | Name | 19 |Description | 20 |
|---|---|
| {$ page.id | link(page.name, page) $} | 24 |{$ page.description | firstParagraph | marked $} | 25 |
2 |
3 |
4 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | ![{{item.who}}]()
17 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/material/docs/config/template/ngdoc/lib/events.template.html:
--------------------------------------------------------------------------------
1 | {%- if doc.events %}
2 |
18 |
24 | {{item.what}}
19 |{{item.who}}
20 |21 | {{item.notes}} 22 |
23 |Events
4 |-
5 | {%- for event in doc.events %}
6 |
-
7 |
{$ event.name $}
8 |{$ event.description | marked $}9 | {%- if event.eventType == 'listen' %} 10 |11 |13 | {%- else %} 14 |Listen on: {$ event.eventTarget $}
12 |15 |18 |Type:
16 |{$ event.eventType $}17 |19 |22 | {% endif -%} 23 |Target:
20 |{$ event.eventTarget $}21 |
24 | {% endfor -%}
25 |
2 |
3 |
4 | .md-whiteframe-z1
5 |
6 |
7 |
8 | .md-whiteframe-z2
9 |
10 |
11 |
12 | .md-whiteframe-z3
13 |
14 |
15 |
16 | .md-whiteframe-z4
17 |
18 |
19 |
20 | .md-whiteframe-z5
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/material/docs/config/template/ngdoc/api/filter.template.html:
--------------------------------------------------------------------------------
1 | {% include "lib/macros.html" -%}
2 | {% extends "api/api.template.html" %}
3 |
4 | {% block additional %}
5 | In HTML Template Binding
6 | {% if doc.usage %} 7 | {$ doc.usage | code $} 8 | {% else %} 9 | {% code -%} 10 | {{ {$ doc.name $}_expression | {$ doc.name $} 11 | {%- for param in doc.params %}{% if not loop.first %} : {$ param.name $}{% endif %}{% endfor -%} 12 | }} 13 | {%- endcode %} 14 | {% endif %} 15 | 16 |In JavaScript
17 | {% code -%} 18 | {%- set sep = joiner(', ') -%} 19 | $filter('{$ doc.name $}')({% for param in doc.params %}{$ sep() $}{$ param.name $}{% endfor -%}) 20 | {%- endcode %} 21 | 22 | {% include "lib/params.template.html" %} 23 | {% include "lib/this.template.html" %} 24 | {% include "lib/returns.template.html" %} 25 | {% endblock %} 26 | -------------------------------------------------------------------------------- /material/src/components/virtualRepeat/demoVerticalUsage/index.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
12 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/material/src/components/tabs/demoDynamicTabs/style.scss:
--------------------------------------------------------------------------------
1 | md-content {
2 | background-color: transparent !important;
3 | md-tabs {
4 | border: 1px solid #e1e1e1;
5 | md-tab-content {
6 | background: #f6f6f6;
7 | }
8 | md-tabs-canvas {
9 | background: white;
10 | }
11 | }
12 | h1:first-child {
13 | margin-top: 0;
14 | }
15 | }
16 | md-input-container {
17 | padding-bottom: 0;
18 | }
19 | .remove-tab {
20 | margin-bottom: 40px;
21 | }
22 | .demo-tab > div > div {
23 | padding: 25px;
24 | box-sizing: border-box;
25 | }
26 | .edit-form input {
27 | width: 100%;
28 | }
29 | md-tabs {
30 | border-bottom: 1px solid rgba(0,0,0,0.12);
31 | }
32 | md-tab[disabled] {
33 | opacity: 0.5;
34 | }
35 | label {
36 | text-align: left;
37 | }
38 |
39 | .long > input {
40 | width: 264px;
41 | }
42 | .md-button.add-tab {
43 | transform: translateY(5px);
44 | }
45 |
--------------------------------------------------------------------------------
/material/src/components/card/card.scss:
--------------------------------------------------------------------------------
1 | $card-padding: 16px !default;
2 | $card-box-shadow: $whiteframe-shadow-z1 !default;
3 |
4 | md-card {
5 | box-sizing: border-box;
6 | display: flex;
7 | flex-direction: column;
8 | margin: $baseline-grid;
9 |
10 | box-shadow: $card-box-shadow;
11 |
12 | > img,
13 | > :not(md-card-content) img {
14 | width: 100%;
15 | }
16 |
17 | md-card-content {
18 | padding: $card-padding;
19 | }
20 | .md-actions {
21 | margin: 0;
22 |
23 | .md-button {
24 | margin-bottom: $baseline-grid;
25 | margin-top: $baseline-grid;
26 | margin-right: $baseline-grid * .5;
27 | margin-left: $baseline-grid * .5;
28 | }
29 | }
30 | md-card-footer {
31 | padding: $card-padding;
32 | }
33 | }
34 |
35 | @media screen and (-ms-high-contrast: active) {
36 | md-card {
37 | border: 1px solid #fff;
38 | }
39 | }
40 |
41 |
--------------------------------------------------------------------------------
/shower-bright/images/grid-16x10.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/material/docs/app/img/icons/ic_play_arrow_24px.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
24 |
--------------------------------------------------------------------------------
/material/docs/app/img/icons/ic_chevron_right_24px.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
24 |
--------------------------------------------------------------------------------
/material/src/components/tabs/tabs.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @ngdoc module
3 | * @name material.components.tabs
4 | * @description
5 | *
6 | * Tabs, created with the `
4 | Display 1000 item in a virtual-list with viewport of only 7 rows (height=40px).
5 |
6 | This demo shows scroll and rendering performance gains when using md-virtual-repeat;
7 | achieved with the dynamic reuse of rows visible in the viewport area. Developers are required to
8 | explicitly use md-virtual-repeat-container as a wrapping parent container.
9 |
15 | {{item}}
16 |
17 |
2 |
19 |
--------------------------------------------------------------------------------
/material/src/components/menu/demoBasicUsage/script.js:
--------------------------------------------------------------------------------
1 | angular.module('menuDemoBasic', ['ngMaterial'])
2 | .config(function($mdIconProvider) {
3 | $mdIconProvider
4 | .iconSet("call", 'img/icons/sets/communication-icons.svg', 24)
5 | .iconSet("social", 'img/icons/sets/social-icons.svg', 24);
6 | })
7 | .controller('BasicDemoCtrl', DemoCtrl);
8 |
9 | function DemoCtrl($mdDialog) {
10 | var vm = this;
11 | vm.notificationsEnabled = true;
12 | vm.toggleNotifications = function() {
13 | vm.notificationsEnabled = !vm.notificationsEnabled;
14 | };
15 |
16 | vm.redial = function(e) {
17 | $mdDialog.show(
18 | $mdDialog.alert()
19 | .title('Suddenly, a redial')
20 | .content('You just called someone back. They told you the most amazing story that has ever been told. Have a cookie.')
21 | .ok('That was easy')
22 | );
23 | };
24 |
25 | vm.checkVoicemail = function() {
26 | // This never happens.
27 | };
28 | }
29 |
--------------------------------------------------------------------------------
/material/src/components/chips/demoBasicUsage/script.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | 'use strict';
3 | angular
4 | .module('chipsDemo', ['ngMaterial'])
5 | .controller('BasicDemoCtrl', DemoCtrl);
6 |
7 | function DemoCtrl ($timeout, $q) {
8 | var self = this;
9 |
10 | self.readonly = false;
11 |
12 | // Lists of fruit names and Vegetable objects
13 | self.fruitNames = ['Apple', 'Banana', 'Orange'];
14 | self.roFruitNames = angular.copy(self.fruitNames);
15 | self.tags = [];
16 | self.vegObjs = [
17 | {
18 | 'name' : 'Broccoli',
19 | 'type' : 'Brassica'
20 | },
21 | {
22 | 'name' : 'Cabbage',
23 | 'type' : 'Brassica'
24 | },
25 | {
26 | 'name' : 'Carrot',
27 | 'type' : 'Umbelliferous'
28 | }
29 | ];
30 |
31 | self.newVeg = function(chip) {
32 | return {
33 | name: chip,
34 | type: 'unknown'
35 | };
36 | };
37 | }
38 | })();
39 |
--------------------------------------------------------------------------------
/material/src/components/dialog/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 | Usage
3 |Bottom sheets can be displayed by clicking one of the buttons below. Once shown, it can be 4 | dismissed by either swiping down or clicking in the shaded area.
5 |Actions
6 |Use one of the following buttons to display a bottom sheet.
7 |
8 | Show as List
9 | Show as Grid
10 |
11 |
12 |
13 |
14 | 15 | {{alert}} 16 | 17 |
18 | 14 | 15 | {{alert}} 16 | 17 |
2 |
26 |
--------------------------------------------------------------------------------
/material/docs/guides/component/_name_/_name_.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | 'use strict';
3 |
4 | /**
5 | * @ngdoc module
6 | * @name material.components._name_list
7 | */
8 | angular.module('material.components._name_list', ['material.core'])
9 | .directive('md_name_list', _name_listDirective);
10 |
11 | /**
12 | * @ngdoc directive
13 | * @name md_name_list
14 | * @module material.components._name_list
15 | * @restrict E
16 | * @description
17 | *
18 | * @usage
19 | *
20 | */
21 | function _name_listDirective() {
22 | return {
23 | scope: {},
24 | require: [],
25 | controller: _name_listController,
26 | link: postLink
27 | };
28 |
29 | function postLink(scope, element, attr, ctrls) {
30 |
31 | }
32 | }
33 |
34 | /**
35 | * We use a controller for all the logic so that we can expose a few
36 | * things to unit tests
37 | */
38 | function _name_listController($scope, $element, $attrs, $mdAria, $mdUtil, $mdConstant) {
39 |
40 | }
41 |
42 | })();
43 |
--------------------------------------------------------------------------------
/material/docs/app/img/icons/ic_launch_24px.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
25 |
--------------------------------------------------------------------------------
/shower-bright/images/grid-4x3.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/material/docs/app/img/icons/ic_photo_24px.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
25 |
--------------------------------------------------------------------------------
/material/docs/app/img/icons/ic_label_24px.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
24 |
--------------------------------------------------------------------------------
/material/docs/config/template/demo-index.template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 3 | Open a dialog over the app's content. Press escape or click outside to close the dialog and 4 | send focus back to the triggering button. 5 |
6 | 7 |
8 |
9 | Alert Dialog
10 |
11 |
12 | Confirm Dialog
13 |
14 |
15 | Custom Dialog
16 |
17 |
18 |
19 |
20 |
21 | 22 | {{alert}} 23 | 24 |
25 | 21 | 22 | {{alert}} 23 | 24 |
Methods
4 |5 |
-
6 | {%- for method in doc.methods %}
7 |
-
8 |
9 |
11 |{$ doc.name $}.{$ functionSyntax(method) $}10 |{$ method.description | marked $}12 | 13 |14 | 15 | {% if method.params %} 16 | {$ paramTable(method.params) $} 17 | {% endif %} 18 | 19 | {% if method.this %} 20 |29 | 30 |Method's {% code %}this{% endcode %}
21 | {$ method.this | marked $} 22 | {% endif %} 23 | 24 | {% if method.returns %} 25 | {$ returnTable(method.returns) $} 26 | {% endif %} 27 | 28 |
31 | {% endfor -%}
32 |
2 |
19 |
20 |
--------------------------------------------------------------------------------
/material/src/components/switch/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Switch 1: {{ data.cb1 }}
4 |
5 |
6 |
7 | Switch 2 (md-warn): {{ data.cb2 }}
8 |
9 |
10 |
11 | Switch (Disabled)
12 |
13 |
14 |
15 | Switch (Disabled, Active)
16 |
17 |
18 |
19 | Switch (md-primary): No Ink
20 |
21 |
22 |
23 | Switch 6 message: {{ message }}
24 |
25 |
26 |
--------------------------------------------------------------------------------
/material/gulp/tasks/build-all-modules.js:
--------------------------------------------------------------------------------
1 | var BUILD_MODE = require('../const').BUILD_MODE;
2 |
3 | var gulp = require('gulp');
4 | var path = require('path');
5 | var through2 = require('through2');
6 | var series = require('stream-series');
7 | var util = require('../util');
8 | var gulpif = require('gulp-if');
9 | var utils = require('../../scripts/gulp-utils.js');
10 |
11 | exports.task = function() {
12 | return gulp.src(['src/core/', 'src/components/*' ])
13 | .pipe(through2.obj(function(folder, enc, next) {
14 | var moduleId = folder.path.indexOf('components') > -1
15 | ? 'material.components.' + path.basename(folder.path)
16 | : 'material.' + path.basename(folder.path);
17 | var stream = BUILD_MODE.useBower
18 | ? series(util.buildModule(moduleId, true), util.buildModule(moduleId, false))
19 | : util.buildModule(moduleId, false);
20 | stream.on('end', function() { next(); });
21 | }))
22 | .pipe(BUILD_MODE.transform());
23 |
24 | };
25 |
--------------------------------------------------------------------------------
/material/docs/app/img/icons/ic_comment_24px.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
25 |
--------------------------------------------------------------------------------
/react-a11y/src/app.js:
--------------------------------------------------------------------------------
1 | var a11y = require('react-a11y');
2 | var React = require('react');
3 |
4 | a11y(React);
5 |
6 | var btnStyle = {
7 | backgroundColor: '#DB762D',
8 | display: 'inline-block',
9 | borderRadius: 2,
10 | color: '#fafafa',
11 | fontSize: 24,
12 | fontFamily: 'sans-serif',
13 | border: '4px solid rgba(0, 0, 0, 0.15)',
14 | boxSizing: 'border-box',
15 | width: 240,
16 | height: 76,
17 | textAlign: 'center',
18 | margin: 'auto',
19 | position: 'absolute',
20 | top: 0,
21 | left: 0,
22 | right: 0,
23 | bottom: 0,
24 | lineHeight: '70px'
25 | };
26 |
27 | var Button = React.createClass({
28 |
29 | getInitialState() {
30 |
31 | return { title: 'I\'m a button!' };
32 | },
33 |
34 | _onClick() {
35 |
36 | this.setState({ title: 'That\'s right' });
37 | },
38 |
39 | render() {
40 |
41 | return {this.state.title}
;
43 | }
44 | });
45 |
46 | React.render(, document.body);
47 |
--------------------------------------------------------------------------------
/material/docs/app/img/icons/ic_refresh_24px.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
25 |
--------------------------------------------------------------------------------
/material/docs/app/img/icons/ic_visibility_24px.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
25 |
--------------------------------------------------------------------------------
/material/src/components/chips/demoBasicUsage/style.scss:
--------------------------------------------------------------------------------
1 | .custom-chips {
2 | .md-chip {
3 | position: relative;
4 | padding-right: 35px;
5 | .md-chip-remove-container {
6 | position: absolute;
7 | right: 4px;
8 | top: 4px;
9 | margin-right: 0;
10 | height: 24px;
11 | button.vegetablechip {
12 | position: relative;
13 | height: 24px;
14 | width: 24px;
15 | line-height: 30px;
16 | text-align: center;
17 | background: rgba(black, 0.3);
18 | border-radius: 50%;
19 | border: none;
20 | box-shadow: none;
21 | padding: 0;
22 | margin: 0;
23 | transition: background 0.15s linear;
24 | display: block;
25 | md-icon {
26 | position: absolute;
27 | top: 50%;
28 | left: 50%;
29 | transform: translate3d(-50%, -50%, 0) scale(0.7);
30 | color: white;
31 | fill: white;
32 | }
33 | &:hover, &:focus {
34 | background: rgba(red, 0.8);
35 | }
36 | }
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/material/src/core/services/ripple/checkbox_ripple.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | 'use strict';
3 |
4 | /**
5 | * @ngdoc service
6 | * @name $mdCheckboxInkRipple
7 | * @module material.core
8 | *
9 | * @description
10 | * Provides ripple effects for md-checkbox. See $mdInkRipple service for all possible configuration options.
11 | *
12 | * @param {object=} scope Scope within the current context
13 | * @param {object=} element The element the ripple effect should be applied to
14 | * @param {object=} options (Optional) Configuration options to override the defaultripple configuration
15 | */
16 |
17 | angular.module('material.core')
18 | .factory('$mdCheckboxInkRipple', MdCheckboxInkRipple);
19 |
20 | function MdCheckboxInkRipple($mdInkRipple) {
21 | return {
22 | attach: attach
23 | };
24 |
25 | function attach(scope, element, options) {
26 | return $mdInkRipple.attach(scope, element, angular.extend({
27 | center: true,
28 | dimBackground: false,
29 | fitRipple: true
30 | }, options));
31 | };
32 | };
33 | })();
34 |
--------------------------------------------------------------------------------
/material/docs/app/img/icons/ic_more_vert_24px.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
25 |
--------------------------------------------------------------------------------
/material/src/core/services/ripple/list_ripple.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | 'use strict';
3 |
4 | /**
5 | * @ngdoc service
6 | * @name $mdListInkRipple
7 | * @module material.core
8 | *
9 | * @description
10 | * Provides ripple effects for md-list. See $mdInkRipple service for all possible configuration options.
11 | *
12 | * @param {object=} scope Scope within the current context
13 | * @param {object=} element The element the ripple effect should be applied to
14 | * @param {object=} options (Optional) Configuration options to override the defaultripple configuration
15 | */
16 |
17 | angular.module('material.core')
18 | .factory('$mdListInkRipple', MdListInkRipple);
19 |
20 | function MdListInkRipple($mdInkRipple) {
21 | return {
22 | attach: attach
23 | };
24 |
25 | function attach(scope, element, options) {
26 | return $mdInkRipple.attach(scope, element, angular.extend({
27 | center: false,
28 | dimBackground: true,
29 | outline: false,
30 | rippleSize: 'full'
31 | }, options));
32 | };
33 | };
34 | })();
35 |
--------------------------------------------------------------------------------
/material/src/core/services/ripple/tab_ripple.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | 'use strict';
3 |
4 | /**
5 | * @ngdoc service
6 | * @name $mdTabInkRipple
7 | * @module material.core
8 | *
9 | * @description
10 | * Provides ripple effects for md-tabs. See $mdInkRipple service for all possible configuration options.
11 | *
12 | * @param {object=} scope Scope within the current context
13 | * @param {object=} element The element the ripple effect should be applied to
14 | * @param {object=} options (Optional) Configuration options to override the defaultripple configuration
15 | */
16 |
17 | angular.module('material.core')
18 | .factory('$mdTabInkRipple', MdTabInkRipple);
19 |
20 | function MdTabInkRipple($mdInkRipple) {
21 | return {
22 | attach: attach
23 | };
24 |
25 | function attach(scope, element, options) {
26 | return $mdInkRipple.attach(scope, element, angular.extend({
27 | center: false,
28 | dimBackground: true,
29 | outline: false,
30 | rippleSize: 'full'
31 | }, options));
32 | };
33 | };
34 | })();
35 |
--------------------------------------------------------------------------------
/material/src/components/backdrop/backdrop.scss:
--------------------------------------------------------------------------------
1 | md-backdrop {
2 | z-index: $z-index-backdrop;
3 | &.md-menu-backdrop {
4 | z-index: $z-index-menu - 1;
5 | }
6 | &.md-select-backdrop {
7 | z-index: $z-index-dialog + 1;
8 | }
9 | &.md-dialog-backdrop {
10 | z-index: $z-index-dialog - 1;
11 | }
12 | &.md-bottom-sheet-backdrop {
13 | z-index: $z-index-bottom-sheet - 1;
14 | }
15 | &.md-sidenav-backdrop {
16 | z-index: $z-index-sidenav - 1;
17 | }
18 |
19 | background-color: rgba(0,0,0,0);
20 |
21 | position: absolute;
22 | height: 100%;
23 | left: 0;
24 | right: 0;
25 |
26 | &.md-click-catcher {
27 | top: 0;
28 | position: fixed;
29 | }
30 |
31 | &.ng-enter {
32 | animation: $swift-ease-out-timing-function mdBackdropFadeIn 0.5s both;
33 | }
34 | &.ng-leave {
35 | animation: $swift-ease-in-timing-function mdBackdropFadeOut 0.2s both;
36 | }
37 | }
38 |
39 | @keyframes mdBackdropFadeIn {
40 | from { opacity: 0; }
41 | to { opacity: 1; }
42 | }
43 | @keyframes mdBackdropFadeOut {
44 | from { opacity: 1; }
45 | to { opacity: 0; }
46 | }
47 |
--------------------------------------------------------------------------------
/material/docs/app/img/icons/github-icon.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/material/src/components/progressLinear/progressLinear-theme.scss:
--------------------------------------------------------------------------------
1 | md-progress-linear.md-THEME_NAME-theme {
2 | .md-container {
3 | background-color: '{{primary-100}}';
4 | }
5 |
6 | .md-bar {
7 | background-color: '{{primary-color}}';
8 | }
9 |
10 | &.md-warn .md-container {
11 | background-color: '{{warn-100}}';
12 | }
13 |
14 | &.md-warn .md-bar {
15 | background-color: '{{warn-color}}';
16 | }
17 |
18 | &.md-accent .md-container {
19 | background-color: '{{accent-100}}';
20 | }
21 |
22 | &.md-accent .md-bar {
23 | background-color: '{{accent-color}}';
24 | }
25 |
26 | &[md-mode=buffer] {
27 | &.md-warn {
28 | .md-bar1 {
29 | background-color: '{{warn-100}}';
30 | }
31 | .md-dashed:before {
32 | background: radial-gradient('{{warn-100}}' 0%, '{{warn-100}}' 16%, transparent 42%);
33 | }
34 | }
35 | &.md-accent {
36 | .md-bar1 {
37 | background-color: '{{accent-100}}';
38 | }
39 | .md-dashed:before {
40 | background: radial-gradient('{{accent-100}}' 0%, '{{accent-100}}' 16%, transparent 42%);
41 | }
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/material/gulp/config.js:
--------------------------------------------------------------------------------
1 | var args = require('minimist')(process.argv.slice(2));
2 | var VERSION = args.version || require('../package.json').version;
3 |
4 | module.exports = {
5 | banner:
6 | '/*!\n' +
7 | ' * Angular Material Design\n' +
8 | ' * https://github.com/angular/material\n' +
9 | ' * @license MIT\n' +
10 | ' * v' + VERSION + '\n' +
11 | ' */\n',
12 | jsBaseFiles: [
13 | 'src/core/**/*.js'
14 | ],
15 | jsFiles: [
16 | 'src/**/*.js',
17 | '!src/**/*.spec.js'
18 | ],
19 | mockFiles : [
20 | 'test/angular-material-mocks.js'
21 | ],
22 | themeBaseFiles: [
23 | 'src/core/style/variables.scss',
24 | 'src/core/style/mixins.scss'
25 | ],
26 | scssBaseFiles: [
27 | 'src/core/style/color-palette.scss',
28 | 'src/core/style/variables.scss',
29 | 'src/core/style/mixins.scss',
30 | 'src/core/style/structure.scss',
31 | 'src/core/style/typography.scss',
32 | 'src/core/style/layout.scss'
33 | ],
34 | scssStandaloneFiles: [
35 | 'src/core/style/layout.scss'
36 | ],
37 | paths: 'src/{components,services}/**',
38 | outputDir: 'dist/',
39 | demoFolder: 'demo-partials'
40 | };
41 |
42 |
43 |
--------------------------------------------------------------------------------
/material/src/components/icon/demoFontIconsWithLigatures/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
31 |
--------------------------------------------------------------------------------
/material/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License
2 |
3 | Copyright (c) 2014-2015 Google, Inc. http://angularjs.org
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
13 | all 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
21 | THE SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/material/src/components/select/demoOptionGroups/index.html:
--------------------------------------------------------------------------------
1 |
4 | Display 4 Material Design font-icons using ligatures [instead of CSS names]; each with different sizes and colors
5 |
9 |
21 |
22 |
10 |
11 |
20 |
12 |
16 | {{ font.name }}
17 |
18 |
19 | 23 | Cool Tip: 24 | Copy an icon and then paste in a text editor to see its textual name! 25 |
26 | 27 | 29 | 30 |
2 |
26 |
--------------------------------------------------------------------------------
/material/src/components/toast/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 |
3 |
25 | Pick your pizza below
4 |
5 |
6 |
7 |
8 | {{size}}
9 |
10 |
11 |
12 |
13 |
14 |
15 | {{topping.name}}
16 |
17 |
18 | {{topping.name}}
19 |
20 |
21 |
22 |
23 | You ordered a {{size.toLowerCase()}} pizza with {{topping.toLowerCase()}}.
24 |
2 |
34 |
--------------------------------------------------------------------------------
/material/docs/app/img/icons/ic_access_time_24px.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
28 |
--------------------------------------------------------------------------------
/material/src/components/divider/demoBasicUsage/script.js:
--------------------------------------------------------------------------------
1 | angular.module('dividerDemo1', ['ngMaterial'])
2 | .controller('AppCtrl', function($scope) {
3 | var imagePath = 'img/list/60.jpeg';
4 | $scope.messages = [{
5 | face : imagePath,
6 | what: 'Brunch this weekend?',
7 | who: 'Min Li Chan',
8 | when: '3:08PM',
9 | notes: " I'll be in your neighborhood doing errands"
10 | }, {
11 | face : imagePath,
12 | what: 'Brunch this weekend?',
13 | who: 'Min Li Chan',
14 | when: '3:08PM',
15 | notes: " I'll be in your neighborhood doing errands"
16 | }, {
17 | face : imagePath,
18 | what: 'Brunch this weekend?',
19 | who: 'Min Li Chan',
20 | when: '3:08PM',
21 | notes: " I'll be in your neighborhood doing errands"
22 | }, {
23 | face : imagePath,
24 | what: 'Brunch this weekend?',
25 | who: 'Min Li Chan',
26 | when: '3:08PM',
27 | notes: " I'll be in your neighborhood doing errands"
28 | }, {
29 | face : imagePath,
30 | what: 'Brunch this weekend?',
31 | who: 'Min Li Chan',
32 | when: '3:08PM',
33 | notes: " I'll be in your neighborhood doing errands"
34 | }];
35 | });
36 |
--------------------------------------------------------------------------------
/material/docs/config/template/ngdoc/api/api.template.html:
--------------------------------------------------------------------------------
1 | {% extends "base.template.html" %}
2 |
3 | {% block content %}
4 |
5 | {% block header %}
6 | Toast can be dismissed with a swipe, a timer, or a button.
3 | 4 |
5 |
6 |
7 | Show Custom
8 |
9 |
10 | Show Simple
11 |
12 |
13 | Show With Action
14 |
15 |
16 |
17 |
18 |
19 |
20 | Toast Position: "{{getToastPosition()}}" 21 |
22 |
24 | {{name}}
25 |
26 |
27 | FAB
28 |
29 |
30 | FAB
31 |
32 |
33 | 20 | Toast Position: "{{getToastPosition()}}" 21 |
22 |
API Reference
8 | {% block related_components %}{% endblock %} 9 |
17 | {$ doc.description | marked $}
18 |
19 | {% endblock %}
20 |
21 |
22 | {% block dependencies %}
23 | {%- if doc.requires %}
24 |
25 |
28 | {% endif -%}
29 | {% endblock %}
30 |
31 | {% block additional %}
32 | {% endblock %}
33 |
34 | {% block examples %}
35 | {%- if doc.examples %}
36 |
37 |
42 | {% endif -%}
43 | {% endblock %}
44 |
45 |
46 | {% endblock %}
47 |
--------------------------------------------------------------------------------
/material/scripts/bower-material-release.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | ARG_DEFS=(
4 | "--version=(.*)"
5 | )
6 |
7 | function run {
8 | cd ../
9 |
10 | echo "-- Building release..."
11 | rm -rf dist
12 | gulp build --release --version=$VERSION
13 | gulp build-all-modules --release --mode=default --version=$VERSION
14 | gulp build-all-modules --release --mode=closure --version=$VERSION
15 | rm -rf dist/demos
16 |
17 | echo "-- Cloning bower-material..."
18 | rm -rf bower-material
19 | git clone https://angular:$GH_TOKEN@github.com/angular/bower-material \
20 | bower-material --depth=2
21 |
22 | echo "-- Copying in build files..."
23 | cp -Rf dist/* bower-material/
24 |
25 | cd bower-material
26 |
27 | echo "-- Committing and tagging..."
28 | replaceJsonProp "bower.json" "version" "$VERSION"
29 | replaceJsonProp "package.json" "version" "$VERSION"
30 |
31 | git add -A
32 | git commit -am "release: version $VERSION"
33 | git tag -f v$VERSION
34 |
35 | echo "-- Pushing to bower-material..."
36 | git push -q origin master
37 | git push -q origin v$VERSION
38 |
39 | echo "-- Version $VERSION pushed successfully to angular/bower-material!"
40 |
41 | cd ../
42 | }
43 |
44 | source $(dirname $0)/utils.inc
45 |
--------------------------------------------------------------------------------
/material/docs/README.md:
--------------------------------------------------------------------------------
1 | Documentation
2 | -------------
3 |
4 | The Angular Material **Live Docs** are generated from the source code and demos; and, in fact, the
5 | Live Docs actually use the Angular Material components and themes.
6 |
7 | > Our build process uses **[dgeni](https://github.com/angular/dgeni)**, the wonderful documentation
8 | generator built by [Pete Bacon Darwin](https://github.com/petebacondarwin).
9 |
10 | To view the Live Docs (locally):
11 |
12 | 1. Install the dependencies using `npm install`
13 | 2. Install the dependencies using `bower install`
14 | 3. Build the docs using `gulp docs`
15 | 4. Run `gulp watch` to auto-rebuild docs (optional)
16 | 5. Start an HTTP Server; the example below uses port 8080
17 | 6. Open browser at `http://localhost:8080`
18 |
19 | ```bash
20 | # Build & deploy docs to `dist/docs`
21 | gulp docs
22 |
23 | # Watch source dirs for changes and rebuild
24 | gulp watch
25 |
26 | # Use the built-in gulp server with live reload
27 | gulp server
28 |
29 | # Alternatively, install httpster globally; if not already installed
30 | npm install -g httpster
31 |
32 | # And then launch the webserver
33 | # NOTE: unlike `gulp server` this will not auto-reload the HTML
34 | httpster -p 8080 -d ./dist/docs
35 | ```
36 |
--------------------------------------------------------------------------------
/material/docs/app/img/icons/ic_people_24px.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
28 |
--------------------------------------------------------------------------------
/material/scripts/snapshot-docs-site.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | ARG_DEFS=(
4 | "--version=(.*)"
5 | )
6 |
7 | function run {
8 | cd ../
9 |
10 | echo "-- Building docs site release..."
11 | rm -rf dist
12 | gulp docs --release
13 |
14 | echo "-- Cloning code.material.angularjs.org..."
15 | rm -rf code.material.angularjs.org
16 | git clone https://angular:$GH_TOKEN@github.com/angular/code.material.angularjs.org.git --depth=1
17 |
18 | echo "-- Remove previous snapshot..."
19 | rm -rf code.material.angularjs.org/HEAD
20 |
21 | echo "-- Copying docs site to snapshot..."
22 | sed -i "s,http://localhost:8080/angular-material,https://gitcdn.xyz/repo/angular/bower-material/v$VERSION/angular-material,g" dist/docs/docs.js
23 |
24 |
25 | cp -Rf dist/docs code.material.angularjs.org/HEAD
26 |
27 | cd code.material.angularjs.org
28 |
29 | echo "-- Commiting snapshot..."
30 | git add -A
31 | git commit -m "snapshot: $VERSION"
32 |
33 | echo "-- Pushing snapshot..."
34 | git push -q origin master
35 |
36 | cd ../
37 |
38 | echo "-- Cleanup..."
39 | rm -rf code.material.angularjs.org
40 |
41 | echo "-- Successfully pushed the snapshot to angular/code.material.angularjs.org!!"
42 | }
43 |
44 | source $(dirname $0)/utils.inc
45 |
--------------------------------------------------------------------------------
/material/src/components/autocomplete/js/highlightController.js:
--------------------------------------------------------------------------------
1 | angular
2 | .module('material.components.autocomplete')
3 | .controller('MdHighlightCtrl', MdHighlightCtrl);
4 |
5 | function MdHighlightCtrl ($scope, $element, $interpolate) {
6 | this.init = init;
7 |
8 | return init();
9 |
10 | function init (term) {
11 | var unsafeText = $interpolate($element.html())($scope),
12 | text = angular.element('Dependencies
26 |- {% for require in doc.requires %}
- {$ require | link $} {% endfor %}
Example
38 | {%- for example in doc.examples -%} 39 | {$ example | marked $} 40 | {%- endfor -%} 41 |').text(unsafeText).html(),
13 | flags = $element.attr('md-highlight-flags') || '',
14 | watcher = $scope.$watch(term, function (term) {
15 | var regex = getRegExp(term, flags),
16 | html = text.replace(regex, '$&');
17 | $element.html(html);
18 | });
19 | $element.on('$destroy', function () { watcher(); });
20 | }
21 |
22 | function sanitize (term) {
23 | if (!term) return term;
24 | return term.replace(/[\\\^\$\*\+\?\.\(\)\|\{\}\[\]]/g, '\\$&');
25 | }
26 |
27 | function getRegExp (text, flags) {
28 | var str = '';
29 | if (flags.indexOf('^') >= 1) str += '^';
30 | str += text;
31 | if (flags.indexOf('$') >= 1) str += '$';
32 | return new RegExp(sanitize(str), flags.replace(/[\$\^]/g, ''));
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/material/src/components/icon/demoFontIconsWithClassnames/script.js:
--------------------------------------------------------------------------------
1 |
2 | angular
3 | .module('appDemoFontIconsWithClassnames', ['ngMaterial'])
4 | .controller('DemoCtrl', function( $scope ) {
5 | // Create list of font-icon names with color overrides
6 | var iconData = [
7 | {name: 'icon-home' , color: "#777" },
8 | {name: 'icon-user-plus' , color: "rgb(89, 226, 168)" },
9 | {name: 'icon-google-plus2', color: "#A00" },
10 | {name: 'icon-youtube4' , color:"#00A" },
11 | // Use theming to color the font-icon
12 | {name: 'icon-settings' , color:"#A00", theme:"md-warn md-hue-5"}
13 | ];
14 |
15 | // Create a set of sizes...
16 | $scope.sizes = [
17 | {size:48,padding:10},
18 | {size:36,padding:6},
19 | {size:21,padding:2},
20 | {size:12,padding:0}
21 | ];
22 |
23 | $scope.fonts = [].concat(iconData);
24 |
25 |
26 |
27 | })
28 | .config(function($mdThemingProvider){
29 | // Update the theme colors to use themes on font-icons
30 | $mdThemingProvider.theme('default')
31 | .primaryPalette("red")
32 | .accentPalette('green')
33 | .warnPalette('blue');
34 | });
35 |
--------------------------------------------------------------------------------
/material/docs/app/partials/layout-container.tmpl.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
16 |
24 |
33 |
34 |
38 |
--------------------------------------------------------------------------------
/material/gulp/const.js:
--------------------------------------------------------------------------------
1 | var config = require('./config');
2 | var path = require('path');
3 | var args = require('minimist')(process.argv.slice(2));
4 | var utils = require('../scripts/gulp-utils.js');
5 |
6 | exports.ROOT = path.normalize(__dirname + '/..');
7 | exports.VERSION = args.version || require('../package.json').version;
8 | exports.LR_PORT = args.port || args.p || 8080;
9 | exports.IS_DEV = args.dev;
10 | exports.SHA = args.sha;
11 | exports.BUILD_MODE = getBuildMode();
12 |
13 | function getBuildMode () {
14 | var mode = (args.module || args.m || args.c) ? 'demos' : args.mode;
15 | switch (mode) {
16 | case 'closure': return {
17 | name: 'closure',
18 | transform: utils.addClosurePrefixes,
19 | outputDir: path.join(config.outputDir, 'modules/closure') + path.sep,
20 | useBower: false
21 | };
22 | case 'demos': return {
23 | name: 'demos',
24 | transform: utils.addJsWrapper,
25 | outputDir: path.join(config.outputDir, 'demos') + path.sep,
26 | useBower: false
27 | };
28 | default: return {
29 | name: 'default',
30 | transform: utils.addJsWrapper,
31 | outputDir: path.join(config.outputDir, 'modules/js') + path.sep,
32 | useBower: true
33 | };
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/material/src/components/divider/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 | Overview
4 |5 | Angular Material's responsive CSS layout is built on 6 | flexbox. 7 |
8 | 9 |
10 | The layout system is based upon element attributes rather than CSS classes.
11 | Attributes provide an easy way to set a value (eg layout="row"), and additionally
12 | helps us separate concerns: attributes define layout, and classes define styling.
13 |
16 |
Layout Attribute
17 |
18 | Use the layout attribute on an element to arrange its children
19 | horizontally in a row (layout="row"), or vertically in
20 | a column (layout="column").
21 |
25 |
28 | I'm left.
26 | I'm right.
27 |
29 |
32 | I'm above.
30 | I'm below.
31 | 35 | See Layout Options for information on responsive layouts and other options. 36 |
37 |
2 |
3 |
4 |
8 |
9 |
10 |
11 |
12 |
19 |
20 |
21 |
22 |
23 |
27 |
28 |
29 |
30 |
31 | ![{{item.who}}]()
32 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/material/src/components/input/demoIcons/index.html:
--------------------------------------------------------------------------------
1 | 5 | Full Bleed 6 |
7 |
13 |
17 | {{item.what}}
14 |{{item.who}}
15 |{{item.notes}}
16 |24 | Inset 25 |
26 |
33 |
37 | {{item.what}}
34 |{{item.who}}
35 |{{item.notes}}
36 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
12 |
13 |
14 |
17 |
18 |
19 |
20 |
23 |
24 |
25 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/material/src/core/services/ripple/checkbox_ripple.spec.js:
--------------------------------------------------------------------------------
1 | describe('MdCheckboxInkRipple', function() {
2 |
3 | beforeEach(module('material.core'));
4 |
5 | var $element, $rootScope, $mdCheckboxInkRipple, $mdInkRipple;
6 | beforeEach(inject(function(_$rootScope_, _$mdCheckboxInkRipple_, _$mdInkRipple_) {
7 | $rootScope = _$rootScope_;
8 | $mdCheckboxInkRipple = _$mdCheckboxInkRipple_;
9 | $mdInkRipple = _$mdInkRipple_;
10 |
11 | $element = jasmine.createSpy('element');
12 | spyOn($mdInkRipple, 'attach');
13 | }));
14 |
15 | it('applies the correct ripple configuration', function() {
16 | $mdCheckboxInkRipple.attach($rootScope, $element);
17 |
18 | var expected = {
19 | center: true,
20 | dimBackground: false,
21 | fitRipple: true
22 | };
23 |
24 | expect($mdInkRipple.attach).toHaveBeenCalledWith($rootScope, $element, expected);
25 | });
26 |
27 | it('allows ripple configuration to be overridden', function() {
28 | $mdCheckboxInkRipple.attach($rootScope, $element, { center: false, fitRipple: false });
29 |
30 | var expected = {
31 | center: false,
32 | dimBackground: false,
33 | fitRipple: false
34 | };
35 |
36 | expect($mdInkRipple.attach).toHaveBeenCalledWith($rootScope, $element, expected);
37 | });
38 | });
39 |
--------------------------------------------------------------------------------
/material/docs/app/img/icons/angular-logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/material/src/core/services/ripple/tab_ripple.spec.js:
--------------------------------------------------------------------------------
1 | describe('MdTabInkRipple', function() {
2 |
3 | beforeEach(module('material.core'));
4 |
5 | var $element, $rootScope, $mdTabInkRipple, $mdInkRipple;
6 | beforeEach(inject(function(_$rootScope_, _$mdTabInkRipple_, _$mdInkRipple_) {
7 | $rootScope = _$rootScope_;
8 | $mdTabInkRipple = _$mdTabInkRipple_;
9 | $mdInkRipple = _$mdInkRipple_;
10 |
11 | $element = jasmine.createSpy('element');
12 | spyOn($mdInkRipple, 'attach');
13 | }));
14 |
15 | it('applies the correct ripple configuration', function() {
16 | $mdTabInkRipple.attach($rootScope, $element);
17 |
18 | var expected = {
19 | center: false,
20 | dimBackground: true,
21 | outline: false,
22 | rippleSize: 'full'
23 | };
24 |
25 | expect($mdInkRipple.attach).toHaveBeenCalledWith($rootScope, $element, expected);
26 | });
27 |
28 | it('allows ripple configuration to be overridden', function() {
29 | $mdTabInkRipple.attach($rootScope, $element, { center: true, outline: true });
30 |
31 | var expected = {
32 | center: true,
33 | dimBackground: true,
34 | outline: true,
35 | rippleSize: 'full'
36 | };
37 |
38 | expect($mdInkRipple.attach).toHaveBeenCalledWith($rootScope, $element, expected);
39 | });
40 | });
41 |
--------------------------------------------------------------------------------
/material/src/components/tabs/js/templateDirective.js:
--------------------------------------------------------------------------------
1 | angular
2 | .module('material.components.tabs')
3 | .directive('mdTemplate', MdTemplate);
4 |
5 | function MdTemplate ($compile, $mdUtil, $timeout) {
6 | return {
7 | restrict: 'A',
8 | link: link,
9 | scope: {
10 | template: '=mdTemplate',
11 | compileScope: '=mdScope',
12 | connected: '=?mdConnectedIf'
13 | },
14 | require: '^?mdTabs'
15 | };
16 | function link (scope, element, attr, ctrl) {
17 | if (!ctrl) return;
18 | var compileScope = scope.compileScope.$new();
19 | element.html(scope.template);
20 | $compile(element.contents())(compileScope);
21 | element.on('DOMSubtreeModified', function () {
22 | ctrl.updatePagination();
23 | ctrl.updateInkBarStyles();
24 | });
25 | return $timeout(handleScope);
26 | function handleScope () {
27 | scope.$watch('connected', function (value) { value === false ? disconnect() : reconnect(); });
28 | scope.$on('$destroy', reconnect);
29 | }
30 | function disconnect () {
31 | if (ctrl.scope.noDisconnect) return;
32 | $mdUtil.disconnectScope(compileScope);
33 | }
34 | function reconnect () {
35 | if (ctrl.scope.noDisconnect) return;
36 | $mdUtil.reconnectScope(compileScope);
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/material/src/core/services/ripple/list_ripple.spec.js:
--------------------------------------------------------------------------------
1 | describe('MdListInkRipple', function() {
2 |
3 | beforeEach(module('material.core'));
4 |
5 | var $element, $rootScope, $mdListInkRipple, $mdInkRipple;
6 | beforeEach(inject(function(_$rootScope_, _$mdListInkRipple_, _$mdInkRipple_) {
7 | $rootScope = _$rootScope_;
8 | $mdListInkRipple = _$mdListInkRipple_;
9 | $mdInkRipple = _$mdInkRipple_;
10 |
11 | $element = jasmine.createSpy('element');
12 | spyOn($mdInkRipple, 'attach');
13 | }));
14 |
15 | it('applies the correct ripple configuration', function() {
16 | $mdListInkRipple.attach($rootScope, $element);
17 |
18 | var expected = {
19 | center: false,
20 | dimBackground: true,
21 | outline: false,
22 | rippleSize: 'full'
23 | };
24 |
25 | expect($mdInkRipple.attach).toHaveBeenCalledWith($rootScope, $element, expected);
26 | });
27 |
28 | it('allows ripple configuration to be overridden', function() {
29 | $mdListInkRipple.attach($rootScope, $element, { center: true, outline: true });
30 |
31 | var expected = {
32 | center: true,
33 | dimBackground: true,
34 | outline: true,
35 | rippleSize: 'full'
36 | };
37 |
38 | expect($mdInkRipple.attach).toHaveBeenCalledWith($rootScope, $element, expected);
39 | });
40 | });
41 |
--------------------------------------------------------------------------------
/material/src/components/radioButton/demoBasicUsage/script.js:
--------------------------------------------------------------------------------
1 |
2 | angular
3 | .module('radioDemo1', ['ngMaterial'])
4 | .controller('AppCtrl', function($scope) {
5 |
6 | $scope.data = {
7 | group1 : 'Banana',
8 | group2 : '2',
9 | group3 : 'avatar-1'
10 | };
11 |
12 | $scope.avatarData = [{
13 | id: "avatars:svg-1",
14 | title: 'avatar 1',
15 | value: 'avatar-1'
16 | },{
17 | id: "avatars:svg-2",
18 | title: 'avatar 2',
19 | value: 'avatar-2'
20 | },{
21 | id: "avatars:svg-3",
22 | title: 'avatar 3',
23 | value: 'avatar-3'
24 | }];
25 |
26 | $scope.radioData = [
27 | { label: '1', value: 1 },
28 | { label: '2', value: 2 },
29 | { label: '3', value: '3', isDisabled: true },
30 | { label: '4', value: '4' }
31 | ];
32 |
33 |
34 | $scope.submit = function() {
35 | alert('submit');
36 | };
37 |
38 | $scope.addItem = function() {
39 | var r = Math.ceil(Math.random() * 1000);
40 | $scope.radioData.push({ label: r, value: r });
41 | };
42 |
43 | $scope.removeItem = function() {
44 | $scope.radioData.pop();
45 | };
46 |
47 | })
48 | .config(function($mdIconProvider) {
49 | $mdIconProvider.iconSet("avatars", 'icons/avatar-icons.svg',128);
50 | });
51 |
--------------------------------------------------------------------------------
/material/src/components/sidenav/demoBasicUsage/script.js:
--------------------------------------------------------------------------------
1 | angular
2 | .module('sidenavDemo1', ['ngMaterial'])
3 | .controller('AppCtrl', function ($scope, $timeout, $mdSidenav, $mdUtil, $log) {
4 |
5 | $scope.toggleLeft = buildToggler('left');
6 | $scope.toggleRight = buildToggler('right');
7 |
8 | /**
9 | * Build handler to open/close a SideNav; when animation finishes
10 | * report completion in console
11 | */
12 | function buildToggler(navID) {
13 | var debounceFn = $mdUtil.debounce(function(){
14 | $mdSidenav(navID)
15 | .toggle()
16 | .then(function () {
17 | $log.debug("toggle " + navID + " is done");
18 | });
19 | },300);
20 |
21 | return debounceFn;
22 | }
23 |
24 | })
25 | .controller('LeftCtrl', function ($scope, $timeout, $mdSidenav, $log) {
26 | $scope.close = function () {
27 | $mdSidenav('left').close()
28 | .then(function () {
29 | $log.debug("close LEFT is done");
30 | });
31 |
32 | };
33 | })
34 | .controller('RightCtrl', function ($scope, $timeout, $mdSidenav, $log) {
35 | $scope.close = function () {
36 | $mdSidenav('right').close()
37 | .then(function () {
38 | $log.debug("close RIGHT is done");
39 | });
40 | };
41 | });
42 |
--------------------------------------------------------------------------------
4 |