diff --git a/DEBUG-merge/button-toggle/button-toggle-demo.d.ts b/DEBUG-merge/button-toggle/button-toggle-demo.d.ts new file mode 100644 index 000000000000..aab0087d5232 --- /dev/null +++ b/DEBUG-merge/button-toggle/button-toggle-demo.d.ts @@ -0,0 +1,2 @@ +export declare class ButtonToggleDemo { +} diff --git a/DEBUG-merge/button-toggle/button-toggle-demo.html b/DEBUG-merge/button-toggle/button-toggle-demo.html new file mode 100644 index 000000000000..982f87e5a203 --- /dev/null +++ b/DEBUG-merge/button-toggle/button-toggle-demo.html @@ -0,0 +1,39 @@ +

Exclusive Selection

+ +
+ + format_align_left + format_align_center + format_align_right + format_align_justify + +
+ +

Disabled Group

+ +
+ + + format_bold + + + format_italic + + + format_underline + + +
+ +

Multiple Selection

+
+ + Flour + Eggs + Sugar + Milk (disabled) + +
+ +

Single Toggle

+Yes diff --git a/DEBUG-merge/button-toggle/button-toggle-demo.js b/DEBUG-merge/button-toggle/button-toggle-demo.js new file mode 100644 index 000000000000..6d01b79d7f84 --- /dev/null +++ b/DEBUG-merge/button-toggle/button-toggle-demo.js @@ -0,0 +1,31 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var button_toggle_1 = require('@angular2-material/button-toggle/button-toggle'); +var unique_selection_dispatcher_1 = require('@angular2-material/core/coordination/unique-selection-dispatcher'); +var icon_1 = require('@angular2-material/icon/icon'); +var ButtonToggleDemo = (function () { + function ButtonToggleDemo() { + } + ButtonToggleDemo = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'button-toggle-demo', + templateUrl: 'button-toggle-demo.html', + providers: [unique_selection_dispatcher_1.MdUniqueSelectionDispatcher], + directives: [button_toggle_1.MD_BUTTON_TOGGLE_DIRECTIVES, icon_1.MdIcon] + }), + __metadata('design:paramtypes', []) + ], ButtonToggleDemo); + return ButtonToggleDemo; +}()); +exports.ButtonToggleDemo = ButtonToggleDemo; +//# sourceMappingURL=../../../button-toggle/button-toggle-demo.js.map \ No newline at end of file diff --git a/DEBUG-merge/button-toggle/button-toggle-demo.js.map b/DEBUG-merge/button-toggle/button-toggle-demo.js.map new file mode 100644 index 000000000000..64b8c4c623ed --- /dev/null +++ b/DEBUG-merge/button-toggle/button-toggle-demo.js.map @@ -0,0 +1 @@ +{"version":3,"file":"button-toggle-demo.js","sourceRoot":"","sources":["../src/demo-app/button-toggle/button-toggle-demo.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAAwB,eAAe,CAAC,CAAA;AACxC,8BAA0C,gDAAgD,CAAC,CAAA;AAC3F,4CAEO,kEAAkE,CAAC,CAAA;AAC1E,qBAAqB,8BAA8B,CAAC,CAAA;AASpD;IAAA;IAAgC,CAAC;IAPjC;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,oBAAoB;YAC9B,WAAW,EAAE,yBAAyB;YACtC,SAAS,EAAE,CAAC,yDAA2B,CAAC;YACxC,UAAU,EAAE,CAAC,2CAA2B,EAAE,aAAM,CAAC;SAClD,CAAC;;wBAAA;IAC8B,uBAAC;AAAD,CAAC,AAAjC,IAAiC;AAApB,wBAAgB,mBAAI,CAAA","sourcesContent":["import {Component} from '@angular/core';\nimport {MD_BUTTON_TOGGLE_DIRECTIVES} from '@angular2-material/button-toggle/button-toggle';\nimport {\n MdUniqueSelectionDispatcher\n} from '@angular2-material/core/coordination/unique-selection-dispatcher';\nimport {MdIcon} from '@angular2-material/icon/icon';\n\n@Component({\n moduleId: module.id,\n selector: 'button-toggle-demo',\n templateUrl: 'button-toggle-demo.html',\n providers: [MdUniqueSelectionDispatcher],\n directives: [MD_BUTTON_TOGGLE_DIRECTIVES, MdIcon]\n})\nexport class ButtonToggleDemo { }\n"]} \ No newline at end of file diff --git a/DEBUG-merge/button/button-demo.css b/DEBUG-merge/button/button-demo.css new file mode 100644 index 000000000000..31dcc69dc6ac --- /dev/null +++ b/DEBUG-merge/button/button-demo.css @@ -0,0 +1,12 @@ +.demo-button button, .demo-button a { + margin: 8px; + text-transform: uppercase; } + +.demo-button section { + display: flex; + align-items: center; + background-color: #f7f7f7; + margin: 8px; } + +.demo-button p { + padding: 5px 15px; } diff --git a/DEBUG-merge/button/button-demo.d.ts b/DEBUG-merge/button/button-demo.d.ts new file mode 100644 index 000000000000..8c534c49c5c9 --- /dev/null +++ b/DEBUG-merge/button/button-demo.d.ts @@ -0,0 +1,4 @@ +export declare class ButtonDemo { + isDisabled: boolean; + clickCounter: number; +} diff --git a/DEBUG-merge/button/button-demo.html b/DEBUG-merge/button/button-demo.html new file mode 100644 index 000000000000..3b4d4beeffa3 --- /dev/null +++ b/DEBUG-merge/button/button-demo.html @@ -0,0 +1,91 @@ +
+
+ + + + +
+ +
+ link + link + + check + + + check + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + + + +
+ +
+
+

isDisabled: {{isDisabled}}, clickCounter: {{clickCounter}}

+ +
+ + + off + + + + +
+
+ Link + link + Button + +
+
+ Link + link + Button + +
+
diff --git a/DEBUG-merge/button/button-demo.js b/DEBUG-merge/button/button-demo.js new file mode 100644 index 000000000000..8e628244aa14 --- /dev/null +++ b/DEBUG-merge/button/button-demo.js @@ -0,0 +1,32 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var button_1 = require('@angular2-material/button/button'); +var icon_1 = require('@angular2-material/icon/icon'); +var ButtonDemo = (function () { + function ButtonDemo() { + this.isDisabled = false; + this.clickCounter = 0; + } + ButtonDemo = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'button-demo', + templateUrl: 'button-demo.html', + styleUrls: ['button-demo.css'], + directives: [button_1.MdButton, button_1.MdAnchor, icon_1.MdIcon] + }), + __metadata('design:paramtypes', []) + ], ButtonDemo); + return ButtonDemo; +}()); +exports.ButtonDemo = ButtonDemo; +//# sourceMappingURL=../../../button/button-demo.js.map \ No newline at end of file diff --git a/DEBUG-merge/button/button-demo.js.map b/DEBUG-merge/button/button-demo.js.map new file mode 100644 index 000000000000..2d5c3dcfcea0 --- /dev/null +++ b/DEBUG-merge/button/button-demo.js.map @@ -0,0 +1 @@ +{"version":3,"file":"button-demo.js","sourceRoot":"","sources":["../src/demo-app/button/button-demo.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAAwB,eAAe,CAAC,CAAA;AACxC,uBAAiC,kCAAkC,CAAC,CAAA;AACpE,qBAAqB,8BAA8B,CAAC,CAAA;AASpD;IAAA;QACE,eAAU,GAAY,KAAK,CAAC;QAC5B,iBAAY,GAAW,CAAC,CAAC;IAC3B,CAAC;IAVD;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,aAAa;YACvB,WAAW,EAAE,kBAAkB;YAC/B,SAAS,EAAE,CAAC,iBAAiB,CAAC;YAC9B,UAAU,EAAE,CAAC,iBAAQ,EAAE,iBAAQ,EAAE,aAAM,CAAC;SACzC,CAAC;;kBAAA;IAIF,iBAAC;AAAD,CAAC,AAHD,IAGC;AAHY,kBAAU,aAGtB,CAAA","sourcesContent":["import {Component} from '@angular/core';\nimport {MdButton, MdAnchor} from '@angular2-material/button/button';\nimport {MdIcon} from '@angular2-material/icon/icon';\n\n@Component({\n moduleId: module.id,\n selector: 'button-demo',\n templateUrl: 'button-demo.html',\n styleUrls: ['button-demo.css'],\n directives: [MdButton, MdAnchor, MdIcon]\n})\nexport class ButtonDemo {\n isDisabled: boolean = false;\n clickCounter: number = 0;\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/card/card-demo.css b/DEBUG-merge/card/card-demo.css new file mode 100644 index 000000000000..302a938ebb51 --- /dev/null +++ b/DEBUG-merge/card/card-demo.css @@ -0,0 +1,14 @@ +.demo-card-container { + display: flex; + flex-flow: column nowrap; } + .demo-card-container md-card { + margin: 0 16px 16px 0; + width: 350px; } + .demo-card-container img { + background-color: gray; } + +.demo-card-blue { + background-color: #B0BECC; } + .demo-card-blue md-card-actions { + display: flex; + flex-direction: column; } diff --git a/DEBUG-merge/card/card-demo.d.ts b/DEBUG-merge/card/card-demo.d.ts new file mode 100644 index 000000000000..f6c666e1586e --- /dev/null +++ b/DEBUG-merge/card/card-demo.d.ts @@ -0,0 +1,2 @@ +export declare class CardDemo { +} diff --git a/DEBUG-merge/card/card-demo.html b/DEBUG-merge/card/card-demo.html new file mode 100644 index 000000000000..12617c5f74d1 --- /dev/null +++ b/DEBUG-merge/card/card-demo.html @@ -0,0 +1,54 @@ +
+ + + Card with title + Subtitle + + + + + + Subtitle + Card with title + +

This is supporting text.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ + + + + + + + + + Content Title + +

Here is some content

+ + + + + + + + + + + Header title + Header subtitle + + + +

Here is some content

+ + + + + Easily customizable + + + + + +
diff --git a/DEBUG-merge/card/card-demo.js b/DEBUG-merge/card/card-demo.js new file mode 100644 index 000000000000..76124d31298b --- /dev/null +++ b/DEBUG-merge/card/card-demo.js @@ -0,0 +1,30 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var button_1 = require('@angular2-material/button/button'); +var card_1 = require('@angular2-material/card/card'); +var CardDemo = (function () { + function CardDemo() { + } + CardDemo = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'card-demo', + templateUrl: 'card-demo.html', + styleUrls: ['card-demo.css'], + directives: [card_1.MD_CARD_DIRECTIVES, button_1.MdButton] + }), + __metadata('design:paramtypes', []) + ], CardDemo); + return CardDemo; +}()); +exports.CardDemo = CardDemo; +//# sourceMappingURL=../../../card/card-demo.js.map \ No newline at end of file diff --git a/DEBUG-merge/card/card-demo.js.map b/DEBUG-merge/card/card-demo.js.map new file mode 100644 index 000000000000..d0b5d0c2beec --- /dev/null +++ b/DEBUG-merge/card/card-demo.js.map @@ -0,0 +1 @@ +{"version":3,"file":"card-demo.js","sourceRoot":"","sources":["../src/demo-app/card/card-demo.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAAwB,eAAe,CAAC,CAAA;AACxC,uBAAuB,kCAAkC,CAAC,CAAA;AAC1D,qBAAiC,8BAA8B,CAAC,CAAA;AAShE;IAAA;IAAuB,CAAC;IAPxB;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,WAAW;YACrB,WAAW,EAAE,gBAAgB;YAC7B,SAAS,EAAE,CAAC,eAAe,CAAC;YAC5B,UAAU,EAAE,CAAC,yBAAkB,EAAE,iBAAQ,CAAC;SAC3C,CAAC;;gBAAA;IACqB,eAAC;AAAD,CAAC,AAAxB,IAAwB;AAAX,gBAAQ,WAAG,CAAA","sourcesContent":["import {Component} from '@angular/core';\nimport {MdButton} from '@angular2-material/button/button';\nimport {MD_CARD_DIRECTIVES} from '@angular2-material/card/card';\n\n@Component({\n moduleId: module.id,\n selector: 'card-demo',\n templateUrl: 'card-demo.html',\n styleUrls: ['card-demo.css'],\n directives: [MD_CARD_DIRECTIVES, MdButton]\n})\nexport class CardDemo {}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/checkbox/checkbox-demo.css b/DEBUG-merge/checkbox/checkbox-demo.css new file mode 100644 index 000000000000..699bff39cb3b --- /dev/null +++ b/DEBUG-merge/checkbox/checkbox-demo.css @@ -0,0 +1,2 @@ +.demo-checkboxes { + margin: 8px 0; } diff --git a/DEBUG-merge/checkbox/checkbox-demo.d.ts b/DEBUG-merge/checkbox/checkbox-demo.d.ts new file mode 100644 index 000000000000..6d2b9f38bac4 --- /dev/null +++ b/DEBUG-merge/checkbox/checkbox-demo.d.ts @@ -0,0 +1,7 @@ +export declare class CheckboxDemo { + isIndeterminate: boolean; + isChecked: boolean; + isDisabled: boolean; + alignment: string; + printResult(): string; +} diff --git a/DEBUG-merge/checkbox/checkbox-demo.html b/DEBUG-merge/checkbox/checkbox-demo.html new file mode 100644 index 000000000000..f7629fc9345c --- /dev/null +++ b/DEBUG-merge/checkbox/checkbox-demo.html @@ -0,0 +1,45 @@ +

md-checkbox: Basic Example

+
+ + Do you want to foobar the bazquux? + + - {{printResult()}} +
+
+ + + + +
+
+

Alignment:

+
+ + +
+
+ + +
+
+ +

Application Example: Nested Checklist

+

Caution: WIP!

+ diff --git a/DEBUG-merge/checkbox/checkbox-demo.js b/DEBUG-merge/checkbox/checkbox-demo.js new file mode 100644 index 000000000000..fae64d4569bb --- /dev/null +++ b/DEBUG-merge/checkbox/checkbox-demo.js @@ -0,0 +1,88 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var common_1 = require('@angular/common'); +var checkbox_1 = require('@angular2-material/checkbox/checkbox'); +var MdCheckboxDemoNestedChecklist = (function () { + function MdCheckboxDemoNestedChecklist() { + this.tasks = [ + { + name: 'Reminders', + completed: false, + subtasks: [ + { name: 'Cook Dinner', completed: false }, + { name: 'Read the Material Design Spec', completed: false }, + { name: 'Upgrade Application to Angular2', completed: false } + ] + }, + { + name: 'Groceries', + completed: false, + subtasks: [ + { name: 'Organic Eggs', completed: false }, + { name: 'Protein Powder', completed: false }, + { name: 'Almond Meal Flour', completed: false } + ] + } + ]; + } + MdCheckboxDemoNestedChecklist.prototype.allComplete = function (task) { + var subtasks = task.subtasks; + return subtasks.every(function (t) { return t.completed; }) ? true + : subtasks.every(function (t) { return !t.completed; }) ? false + : task.completed; + }; + MdCheckboxDemoNestedChecklist.prototype.someComplete = function (tasks) { + var numComplete = tasks.filter(function (t) { return t.completed; }).length; + return numComplete > 0 && numComplete < tasks.length; + }; + MdCheckboxDemoNestedChecklist.prototype.setAllCompleted = function (tasks, completed) { + tasks.forEach(function (t) { return t.completed = completed; }); + }; + MdCheckboxDemoNestedChecklist = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-checkbox-demo-nested-checklist', + styles: ["\n li {\n margin-bottom: 4px;\n }\n "], + templateUrl: 'nested-checklist.html', + directives: [checkbox_1.MdCheckbox] + }), + __metadata('design:paramtypes', []) + ], MdCheckboxDemoNestedChecklist); + return MdCheckboxDemoNestedChecklist; +}()); +var CheckboxDemo = (function () { + function CheckboxDemo() { + this.isIndeterminate = false; + this.isChecked = false; + this.isDisabled = false; + this.alignment = 'start'; + } + CheckboxDemo.prototype.printResult = function () { + if (this.isIndeterminate) { + return 'Maybe!'; + } + return this.isChecked ? 'Yes!' : 'No!'; + }; + CheckboxDemo = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-checkbox-demo', + templateUrl: 'checkbox-demo.html', + styleUrls: ['checkbox-demo.css'], + directives: [checkbox_1.MdCheckbox, MdCheckboxDemoNestedChecklist, common_1.FORM_DIRECTIVES] + }), + __metadata('design:paramtypes', []) + ], CheckboxDemo); + return CheckboxDemo; +}()); +exports.CheckboxDemo = CheckboxDemo; +//# sourceMappingURL=../../../checkbox/checkbox-demo.js.map \ No newline at end of file diff --git a/DEBUG-merge/checkbox/checkbox-demo.js.map b/DEBUG-merge/checkbox/checkbox-demo.js.map new file mode 100644 index 000000000000..53eae4a5bb61 --- /dev/null +++ b/DEBUG-merge/checkbox/checkbox-demo.js.map @@ -0,0 +1 @@ +{"version":3,"file":"checkbox-demo.js","sourceRoot":"","sources":["../src/demo-app/checkbox/checkbox-demo.ts"],"names":[],"mappings":"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","sourcesContent":["import {Component} from '@angular/core';\nimport {FORM_DIRECTIVES} from '@angular/common';\nimport {MdCheckbox} from '@angular2-material/checkbox/checkbox';\n\ninterface Task {\n name: string;\n completed: boolean;\n subtasks?: Task[];\n}\n\n@Component({\n moduleId: module.id,\n selector: 'md-checkbox-demo-nested-checklist',\n styles: [`\n li {\n margin-bottom: 4px;\n }\n `],\n templateUrl: 'nested-checklist.html',\n directives: [MdCheckbox]\n})\nclass MdCheckboxDemoNestedChecklist {\n tasks: Task[] = [\n {\n name: 'Reminders',\n completed: false,\n subtasks: [\n { name: 'Cook Dinner', completed: false },\n { name: 'Read the Material Design Spec', completed: false },\n { name: 'Upgrade Application to Angular2', completed: false }\n ]\n },\n {\n name: 'Groceries',\n completed: false,\n subtasks: [\n { name: 'Organic Eggs', completed: false },\n { name: 'Protein Powder', completed: false },\n { name: 'Almond Meal Flour', completed: false }\n ]\n }\n ];\n\n allComplete(task: Task): boolean {\n let subtasks = task.subtasks;\n return subtasks.every(t => t.completed) ? true\n : subtasks.every(t => !t.completed) ? false\n : task.completed;\n }\n\n someComplete(tasks: Task[]): boolean {\n const numComplete = tasks.filter(t => t.completed).length;\n return numComplete > 0 && numComplete < tasks.length;\n }\n\n setAllCompleted(tasks: Task[], completed: boolean) {\n tasks.forEach(t => t.completed = completed);\n }\n}\n\n@Component({\n moduleId: module.id,\n selector: 'md-checkbox-demo',\n templateUrl: 'checkbox-demo.html',\n styleUrls: ['checkbox-demo.css'],\n directives: [MdCheckbox, MdCheckboxDemoNestedChecklist, FORM_DIRECTIVES]\n})\nexport class CheckboxDemo {\n isIndeterminate: boolean = false;\n isChecked: boolean = false;\n isDisabled: boolean = false;\n alignment: string = 'start';\n\n printResult() {\n if (this.isIndeterminate) {\n return 'Maybe!';\n }\n return this.isChecked ? 'Yes!' : 'No!';\n }\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/checkbox/nested-checklist.html b/DEBUG-merge/checkbox/nested-checklist.html new file mode 100644 index 000000000000..4b721ab99759 --- /dev/null +++ b/DEBUG-merge/checkbox/nested-checklist.html @@ -0,0 +1,18 @@ +

Tasks

+ diff --git a/DEBUG-merge/components/button-toggle/button-toggle.css b/DEBUG-merge/components/button-toggle/button-toggle.css new file mode 100644 index 000000000000..9ceddcc950a5 --- /dev/null +++ b/DEBUG-merge/components/button-toggle/button-toggle.css @@ -0,0 +1,102 @@ +/** + * A collection of mixins and CSS classes that can be used to apply elevation to a material + * element. + * See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html + * Examples: + * + * + * .md-foo { + * @include $md-elevation(2); + * + * &:active { + * @include $md-elevation(8); + * } + * } + * + *

Some content

+ * + * For an explanation of the design behind how elevation is implemented, see the design doc at + * https://goo.gl/Kq0k9Z. + */ +/** + * The css property used for elevation. In most cases this should not be changed. It is exposed + * as a variable for abstraction / easy use when needing to reference the property directly, for + * example in a will-change rule. + */ +/** The default duration value for elevation transitions. */ +/** The default easing value for elevation transitions. */ +/** + * Applies the correct css rules to an element to give it the elevation specified by $zValue. + * The $zValue must be between 0 and 24. + */ +/** + * Returns a string that can be used as the value for a transition property for elevation. + * Calling this function directly is useful in situations where a component needs to transition + * more than one property. + * + * .foo { + * transition: md-elevation-transition-property-value(), opacity 100ms ease; + * will-change: $md-elevation-property, opacity; + * } + */ +/** + * Applies the correct css rules needed to have an element transition between elevations. + * This mixin should be applied to elements whose elevation values will change depending on their + * context (e.g. when active or disabled). + */ +/** + * Mixin that creates a new stacking context. + * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + */ +/** + * This mixin hides an element visually. + * That means it's still accessible for screen-readers but not visible in view. + */ +/** + * Forces an element to grow to fit floated contents; used as as an alternative to + * `overflow: hidden;` because it doesn't cut off contents. + */ +/** + * A mixin, which generates temporary ink ripple on a given component. + * When $bindToParent is set to true, it will check for the focused class on the same selector as you included + * that mixin. + * It is also possible to specify the color palette of the temporary ripple. By default it uses the + * accent palette for its background. + */ +md-button-toggle-group { + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + position: relative; + display: inline-flex; + border-radius: 3px; + cursor: pointer; + white-space: nowrap; } + +.md-button-toggle-checked .md-button-toggle-label-content { + background-color: #e0e0e0; } + +.md-button-toggle-disabled .md-button-toggle-label-content { + background-color: rgba(0, 0, 0, 0.38); + cursor: not-allowed; } + +md-button-toggle { + white-space: nowrap; } + +.md-button-toggle-input { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + text-transform: none; + width: 1px; } + +.md-button-toggle-label-content { + display: inline-block; + line-height: 36px; + padding: 0 16px; + cursor: pointer; } + +.md-button-toggle-label-content > * { + vertical-align: middle; } diff --git a/DEBUG-merge/components/button-toggle/button-toggle.d.ts b/DEBUG-merge/components/button-toggle/button-toggle.d.ts new file mode 100644 index 000000000000..b51141de47a3 --- /dev/null +++ b/DEBUG-merge/components/button-toggle/button-toggle.d.ts @@ -0,0 +1,72 @@ +import { OnInit } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; +import { MdUniqueSelectionDispatcher } from '@angular2-material/core/coordination/unique-selection-dispatcher'; +export declare type ToggleType = 'checkbox' | 'radio'; +/** A simple change event emitted by either MdButtonToggle or MdButtonToggleGroup. */ +export declare class MdButtonToggleChange { + source: MdButtonToggle; + value: any; +} +/** Exclusive selection button toggle group that behaves like a radio-button group. */ +export declare class MdButtonToggleGroup { + /** The value for the button toggle group. Should match currently selected button toggle. */ + private _value; + /** The HTML name attribute applied to toggles in this group. */ + private _name; + /** Disables all toggles in the group. */ + private _disabled; + /** The currently selected button toggle, should match the value. */ + private _selected; + /** Event emitted when the group's value changes. */ + private _change; + change: Observable; + /** Child button toggle buttons. */ + private _buttonToggles; + name: string; + disabled: boolean; + value: any; + selected: MdButtonToggle; + private _updateButtonToggleNames(); + private _updateSelectedButtonToggleFromValue(); + /** Dispatch change event with current selection and group value. */ + private _emitChangeEvent(); +} +/** Multiple selection button-toggle group. */ +export declare class MdButtonToggleGroupMultiple { + /** Disables all toggles in the group. */ + private _disabled; + disabled: boolean; +} +export declare class MdButtonToggle implements OnInit { + buttonToggleDispatcher: MdUniqueSelectionDispatcher; + /** Whether or not this button toggle is checked. */ + private _checked; + /** The unique ID for this button toggle. */ + id: string; + /** HTML's 'name' attribute used to group radios for unique selection. */ + name: string; + /** Whether or not this button toggle is disabled. */ + private _disabled; + /** Value assigned to this button toggle. */ + private _value; + /** Whether or not the button toggle is a single selection. */ + private _isSingleSelector; + /** The parent button toggle group (exclusive selection). Optional. */ + buttonToggleGroup: MdButtonToggleGroup; + /** The parent button toggle group (multiple selection). Optional. */ + buttonToggleGroupMultiple: MdButtonToggleGroupMultiple; + /** Event emitted when the group value changes. */ + private _change; + change: Observable; + constructor(toggleGroup: MdButtonToggleGroup, toggleGroupMultiple: MdButtonToggleGroupMultiple, buttonToggleDispatcher: MdUniqueSelectionDispatcher); + inputId: string; + checked: boolean; + /** MdButtonToggleGroup reads this to assign its own value. */ + value: any; + /** Dispatch change event with current value. */ + private _emitChangeEvent(); + disabled: boolean; + /** Toggle the state of the current button toggle. */ + private _toggle(); +} +export declare const MD_BUTTON_TOGGLE_DIRECTIVES: (typeof MdButtonToggleGroup | typeof MdButtonToggleGroupMultiple | typeof MdButtonToggle)[]; diff --git a/DEBUG-merge/components/button-toggle/button-toggle.html b/DEBUG-merge/components/button-toggle/button-toggle.html new file mode 100644 index 000000000000..e2e919838945 --- /dev/null +++ b/DEBUG-merge/components/button-toggle/button-toggle.html @@ -0,0 +1,13 @@ + diff --git a/DEBUG-merge/components/button-toggle/button-toggle.js b/DEBUG-merge/components/button-toggle/button-toggle.js new file mode 100644 index 000000000000..6e573cba2676 --- /dev/null +++ b/DEBUG-merge/components/button-toggle/button-toggle.js @@ -0,0 +1,371 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var __param = (this && this.__param) || function (paramIndex, decorator) { + return function (target, key) { decorator(target, key, paramIndex); } +}; +var core_1 = require('@angular/core'); +var Observable_1 = require('rxjs/Observable'); +var unique_selection_dispatcher_1 = require('@angular2-material/core/coordination/unique-selection-dispatcher'); +var field_value_1 = require('@angular2-material/core/annotations/field-value'); +var _uniqueIdCounter = 0; +/** A simple change event emitted by either MdButtonToggle or MdButtonToggleGroup. */ +var MdButtonToggleChange = (function () { + function MdButtonToggleChange() { + } + return MdButtonToggleChange; +}()); +exports.MdButtonToggleChange = MdButtonToggleChange; +/** Exclusive selection button toggle group that behaves like a radio-button group. */ +var MdButtonToggleGroup = (function () { + function MdButtonToggleGroup() { + /** The value for the button toggle group. Should match currently selected button toggle. */ + this._value = null; + /** The HTML name attribute applied to toggles in this group. */ + this._name = "md-radio-group-" + _uniqueIdCounter++; + /** Disables all toggles in the group. */ + this._disabled = null; + /** The currently selected button toggle, should match the value. */ + this._selected = null; + /** Event emitted when the group's value changes. */ + this._change = new core_1.EventEmitter(); + /** Child button toggle buttons. */ + this._buttonToggles = null; + } + Object.defineProperty(MdButtonToggleGroup.prototype, "change", { + get: function () { + return this._change.asObservable(); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdButtonToggleGroup.prototype, "name", { + get: function () { + return this._name; + }, + set: function (value) { + this._name = value; + this._updateButtonToggleNames(); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdButtonToggleGroup.prototype, "disabled", { + get: function () { + return this._disabled; + }, + set: function (value) { + this._disabled = (value != null && value !== false) ? true : null; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdButtonToggleGroup.prototype, "value", { + get: function () { + return this._value; + }, + set: function (newValue) { + if (this._value != newValue) { + this._value = newValue; + this._updateSelectedButtonToggleFromValue(); + this._emitChangeEvent(); + } + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdButtonToggleGroup.prototype, "selected", { + get: function () { + return this._selected; + }, + set: function (selected) { + this._selected = selected; + this.value = selected ? selected.value : null; + if (selected && !selected.checked) { + selected.checked = true; + } + }, + enumerable: true, + configurable: true + }); + MdButtonToggleGroup.prototype._updateButtonToggleNames = function () { + var _this = this; + (this._buttonToggles || []).forEach(function (toggle) { + toggle.name = _this._name; + }); + }; + // TODO: Refactor into shared code with radio. + MdButtonToggleGroup.prototype._updateSelectedButtonToggleFromValue = function () { + var _this = this; + var isAlreadySelected = this._selected != null && this._selected.value == this._value; + if (this._buttonToggles != null && !isAlreadySelected) { + var matchingButtonToggle = this._buttonToggles.filter(function (buttonToggle) { return buttonToggle.value == _this._value; })[0]; + if (matchingButtonToggle) { + this.selected = matchingButtonToggle; + } + else if (this.value == null) { + this.selected = null; + this._buttonToggles.forEach(function (buttonToggle) { buttonToggle.checked = false; }); + } + } + }; + /** Dispatch change event with current selection and group value. */ + MdButtonToggleGroup.prototype._emitChangeEvent = function () { + var event = new MdButtonToggleChange(); + event.source = this._selected; + event.value = this._value; + this._change.emit(event); + }; + __decorate([ + core_1.Output(), + __metadata('design:type', Observable_1.Observable) + ], MdButtonToggleGroup.prototype, "change", null); + __decorate([ + core_1.ContentChildren(core_1.forwardRef(function () { return MdButtonToggle; })), + __metadata('design:type', core_1.QueryList) + ], MdButtonToggleGroup.prototype, "_buttonToggles", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdButtonToggleGroup.prototype, "name", null); + __decorate([ + core_1.Input(), + field_value_1.BooleanFieldValue(), + __metadata('design:type', Boolean) + ], MdButtonToggleGroup.prototype, "disabled", null); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdButtonToggleGroup.prototype, "value", null); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdButtonToggleGroup.prototype, "selected", null); + MdButtonToggleGroup = __decorate([ + core_1.Directive({ + selector: 'md-button-toggle-group:not([multiple])', + host: { + 'role': 'radiogroup', + }, + }), + __metadata('design:paramtypes', []) + ], MdButtonToggleGroup); + return MdButtonToggleGroup; +}()); +exports.MdButtonToggleGroup = MdButtonToggleGroup; +/** Multiple selection button-toggle group. */ +var MdButtonToggleGroupMultiple = (function () { + function MdButtonToggleGroupMultiple() { + /** Disables all toggles in the group. */ + this._disabled = null; + } + Object.defineProperty(MdButtonToggleGroupMultiple.prototype, "disabled", { + get: function () { + return this._disabled; + }, + set: function (value) { + this._disabled = (value != null && value !== false) ? true : null; + }, + enumerable: true, + configurable: true + }); + __decorate([ + core_1.Input(), + __metadata('design:type', Boolean) + ], MdButtonToggleGroupMultiple.prototype, "disabled", null); + MdButtonToggleGroupMultiple = __decorate([ + core_1.Directive({ + selector: 'md-button-toggle-group[multiple]', + }), + __metadata('design:paramtypes', []) + ], MdButtonToggleGroupMultiple); + return MdButtonToggleGroupMultiple; +}()); +exports.MdButtonToggleGroupMultiple = MdButtonToggleGroupMultiple; +var MdButtonToggle = (function () { + function MdButtonToggle(toggleGroup, toggleGroupMultiple, buttonToggleDispatcher) { + var _this = this; + this.buttonToggleDispatcher = buttonToggleDispatcher; + /** Whether or not this button toggle is checked. */ + this._checked = false; + /** Whether or not this button toggle is disabled. */ + this._disabled = null; + /** Value assigned to this button toggle. */ + this._value = null; + /** Whether or not the button toggle is a single selection. */ + this._isSingleSelector = null; + /** Event emitted when the group value changes. */ + this._change = new core_1.EventEmitter(); + this.buttonToggleGroup = toggleGroup; + this.buttonToggleGroupMultiple = toggleGroupMultiple; + if (this.buttonToggleGroup) { + buttonToggleDispatcher.listen(function (id, name) { + if (id != _this.id && name == _this.name) { + _this.checked = false; + } + }); + this.type = 'radio'; + this.name = this.buttonToggleGroup.name; + this._isSingleSelector = true; + } + else { + // Even if there is no group at all, treat the button toggle as a checkbox so it can be + // toggled on or off. + this.type = 'checkbox'; + this._isSingleSelector = false; + } + } + Object.defineProperty(MdButtonToggle.prototype, "change", { + get: function () { + return this._change.asObservable(); + }, + enumerable: true, + configurable: true + }); + /** @internal */ + MdButtonToggle.prototype.ngOnInit = function () { + if (this.id == null) { + this.id = "md-button-toggle-" + _uniqueIdCounter++; + } + if (this.buttonToggleGroup && this._value == this.buttonToggleGroup.value) { + this._checked = true; + } + }; + Object.defineProperty(MdButtonToggle.prototype, "inputId", { + get: function () { + return this.id + "-input"; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdButtonToggle.prototype, "checked", { + get: function () { + return this._checked; + }, + set: function (newCheckedState) { + if (this._isSingleSelector) { + if (newCheckedState) { + // Notify all button toggles with the same name (in the same group) to un-check. + this.buttonToggleDispatcher.notify(this.id, this.name); + } + if (newCheckedState != this._checked) { + this._emitChangeEvent(); + } + } + this._checked = newCheckedState; + if (newCheckedState && this._isSingleSelector && this.buttonToggleGroup.value != this.value) { + this.buttonToggleGroup.selected = this; + } + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdButtonToggle.prototype, "value", { + /** MdButtonToggleGroup reads this to assign its own value. */ + get: function () { + return this._value; + }, + set: function (value) { + if (this._value != value) { + if (this.buttonToggleGroup != null && this.checked) { + this.buttonToggleGroup.value = value; + } + this._value = value; + } + }, + enumerable: true, + configurable: true + }); + /** Dispatch change event with current value. */ + MdButtonToggle.prototype._emitChangeEvent = function () { + var event = new MdButtonToggleChange(); + event.source = this; + event.value = this._value; + this._change.emit(event); + }; + Object.defineProperty(MdButtonToggle.prototype, "disabled", { + get: function () { + return this._disabled || (this.buttonToggleGroup != null && this.buttonToggleGroup.disabled) || + (this.buttonToggleGroupMultiple != null && this.buttonToggleGroupMultiple.disabled); + }, + set: function (value) { + this._disabled = (value != null && value !== false) ? true : null; + }, + enumerable: true, + configurable: true + }); + /** Toggle the state of the current button toggle. */ + MdButtonToggle.prototype._toggle = function () { + this.checked = !this.checked; + }; + /** + * Checks the button toggle due to an interaction with the underlying native input. + * @internal + */ + MdButtonToggle.prototype.onInputChange = function (event) { + event.stopPropagation(); + if (this._isSingleSelector) { + // Propagate the change one-way via the group, which will in turn mark this + // button toggle as checked. + this.checked = true; + this.buttonToggleGroup.selected = this; + } + else { + this._toggle(); + } + }; + __decorate([ + core_1.HostBinding(), + core_1.Input(), + __metadata('design:type', String) + ], MdButtonToggle.prototype, "id", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdButtonToggle.prototype, "name", void 0); + __decorate([ + core_1.Output(), + __metadata('design:type', Observable_1.Observable) + ], MdButtonToggle.prototype, "change", null); + __decorate([ + core_1.HostBinding('class.md-button-toggle-checked'), + core_1.Input(), + __metadata('design:type', Boolean) + ], MdButtonToggle.prototype, "checked", null); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdButtonToggle.prototype, "value", null); + __decorate([ + core_1.HostBinding('class.md-button-toggle-disabled'), + core_1.Input(), + __metadata('design:type', Boolean) + ], MdButtonToggle.prototype, "disabled", null); + MdButtonToggle = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-button-toggle', + templateUrl: 'button-toggle.html', + styleUrls: ['button-toggle.css'], + encapsulation: core_1.ViewEncapsulation.None, + }), + __param(0, core_1.Optional()), + __param(1, core_1.Optional()), + __metadata('design:paramtypes', [MdButtonToggleGroup, MdButtonToggleGroupMultiple, unique_selection_dispatcher_1.MdUniqueSelectionDispatcher]) + ], MdButtonToggle); + return MdButtonToggle; +}()); +exports.MdButtonToggle = MdButtonToggle; +exports.MD_BUTTON_TOGGLE_DIRECTIVES = [ + MdButtonToggleGroup, + MdButtonToggleGroupMultiple, + MdButtonToggle +]; +//# sourceMappingURL=../../../../components/button-toggle/button-toggle.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/button-toggle/button-toggle.js.map b/DEBUG-merge/components/button-toggle/button-toggle.js.map new file mode 100644 index 000000000000..4fa17e2d8bc9 --- /dev/null +++ b/DEBUG-merge/components/button-toggle/button-toggle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"button-toggle.js","sourceRoot":"","sources":["../../src/demo-app/components/button-toggle/button-toggle.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ContentChildren,\n Directive,\n EventEmitter,\n HostBinding,\n Input,\n OnInit,\n Optional,\n Output,\n QueryList,\n ViewEncapsulation,\n forwardRef\n} from '@angular/core';\nimport {Observable} from 'rxjs/Observable';\nimport {\n MdUniqueSelectionDispatcher\n} from '@angular2-material/core/coordination/unique-selection-dispatcher';\nimport {BooleanFieldValue} from '@angular2-material/core/annotations/field-value';\n\nexport type ToggleType = 'checkbox' | 'radio';\n\n\nvar _uniqueIdCounter = 0;\n\n/** A simple change event emitted by either MdButtonToggle or MdButtonToggleGroup. */\nexport class MdButtonToggleChange {\n source: MdButtonToggle;\n value: any;\n}\n\n/** Exclusive selection button toggle group that behaves like a radio-button group. */\n@Directive({\n selector: 'md-button-toggle-group:not([multiple])',\n host: {\n 'role': 'radiogroup',\n },\n})\nexport class MdButtonToggleGroup {\n /** The value for the button toggle group. Should match currently selected button toggle. */\n private _value: any = null;\n\n /** The HTML name attribute applied to toggles in this group. */\n private _name: string = `md-radio-group-${_uniqueIdCounter++}`;\n\n /** Disables all toggles in the group. */\n private _disabled: boolean = null;\n\n /** The currently selected button toggle, should match the value. */\n private _selected: MdButtonToggle = null;\n\n /** Event emitted when the group's value changes. */\n private _change: EventEmitter = new EventEmitter();\n @Output() get change(): Observable {\n return this._change.asObservable();\n }\n\n /** Child button toggle buttons. */\n @ContentChildren(forwardRef(() => MdButtonToggle))\n private _buttonToggles: QueryList = null;\n\n @Input()\n get name(): string {\n return this._name;\n }\n\n set name(value: string) {\n this._name = value;\n\n this._updateButtonToggleNames();\n }\n\n @Input()\n @BooleanFieldValue()\n get disabled(): boolean {\n return this._disabled;\n }\n\n set disabled(value) {\n this._disabled = (value != null && value !== false) ? true : null;\n }\n\n @Input()\n get value(): any {\n return this._value;\n }\n\n set value(newValue: any) {\n if (this._value != newValue) {\n this._value = newValue;\n\n this._updateSelectedButtonToggleFromValue();\n this._emitChangeEvent();\n }\n }\n\n @Input()\n get selected() {\n return this._selected;\n }\n\n set selected(selected: MdButtonToggle) {\n this._selected = selected;\n this.value = selected ? selected.value : null;\n\n if (selected && !selected.checked) {\n selected.checked = true;\n }\n }\n\n private _updateButtonToggleNames(): void {\n (this._buttonToggles || []).forEach((toggle) => {\n toggle.name = this._name;\n });\n }\n\n // TODO: Refactor into shared code with radio.\n private _updateSelectedButtonToggleFromValue(): void {\n let isAlreadySelected = this._selected != null && this._selected.value == this._value;\n\n if (this._buttonToggles != null && !isAlreadySelected) {\n let matchingButtonToggle = this._buttonToggles.filter(\n buttonToggle => buttonToggle.value == this._value)[0];\n\n if (matchingButtonToggle) {\n this.selected = matchingButtonToggle;\n } else if (this.value == null) {\n this.selected = null;\n this._buttonToggles.forEach(buttonToggle => {buttonToggle.checked = false; });\n }\n }\n }\n\n /** Dispatch change event with current selection and group value. */\n private _emitChangeEvent(): void {\n let event = new MdButtonToggleChange();\n event.source = this._selected;\n event.value = this._value;\n this._change.emit(event);\n }\n}\n\n/** Multiple selection button-toggle group. */\n@Directive({\n selector: 'md-button-toggle-group[multiple]',\n})\nexport class MdButtonToggleGroupMultiple {\n /** Disables all toggles in the group. */\n private _disabled: boolean = null;\n\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n\n set disabled(value) {\n this._disabled = (value != null && value !== false) ? true : null;\n }\n}\n\n@Component({\n moduleId: module.id,\n selector: 'md-button-toggle',\n templateUrl: 'button-toggle.html',\n styleUrls: ['button-toggle.css'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class MdButtonToggle implements OnInit {\n /** Whether or not this button toggle is checked. */\n private _checked: boolean = false;\n\n /**\n * Type of the button toggle. Either 'radio' or 'checkbox'.\n * @internal\n */\n type: ToggleType;\n\n /** The unique ID for this button toggle. */\n @HostBinding()\n @Input()\n id: string;\n\n /** HTML's 'name' attribute used to group radios for unique selection. */\n @Input()\n name: string;\n\n /** Whether or not this button toggle is disabled. */\n private _disabled: boolean = null;\n\n /** Value assigned to this button toggle. */\n private _value: any = null;\n\n /** Whether or not the button toggle is a single selection. */\n private _isSingleSelector: boolean = null;\n\n /** The parent button toggle group (exclusive selection). Optional. */\n buttonToggleGroup: MdButtonToggleGroup;\n\n /** The parent button toggle group (multiple selection). Optional. */\n buttonToggleGroupMultiple: MdButtonToggleGroupMultiple;\n\n /** Event emitted when the group value changes. */\n private _change: EventEmitter = new EventEmitter();\n @Output() get change(): Observable {\n return this._change.asObservable();\n }\n\n constructor(@Optional() toggleGroup: MdButtonToggleGroup,\n @Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,\n public buttonToggleDispatcher: MdUniqueSelectionDispatcher) {\n this.buttonToggleGroup = toggleGroup;\n\n this.buttonToggleGroupMultiple = toggleGroupMultiple;\n\n if (this.buttonToggleGroup) {\n buttonToggleDispatcher.listen((id: string, name: string) => {\n if (id != this.id && name == this.name) {\n this.checked = false;\n }\n });\n\n this.type = 'radio';\n this.name = this.buttonToggleGroup.name;\n this._isSingleSelector = true;\n } else {\n // Even if there is no group at all, treat the button toggle as a checkbox so it can be\n // toggled on or off.\n this.type = 'checkbox';\n this._isSingleSelector = false;\n }\n }\n\n /** @internal */\n ngOnInit() {\n if (this.id == null) {\n this.id = `md-button-toggle-${_uniqueIdCounter++}`;\n }\n\n if (this.buttonToggleGroup && this._value == this.buttonToggleGroup.value) {\n this._checked = true;\n }\n\n }\n\n get inputId(): string {\n return `${this.id}-input`;\n }\n\n @HostBinding('class.md-button-toggle-checked')\n @Input()\n get checked(): boolean {\n return this._checked;\n }\n\n set checked(newCheckedState: boolean) {\n if (this._isSingleSelector) {\n if (newCheckedState) {\n // Notify all button toggles with the same name (in the same group) to un-check.\n this.buttonToggleDispatcher.notify(this.id, this.name);\n }\n\n if (newCheckedState != this._checked) {\n this._emitChangeEvent();\n }\n }\n\n this._checked = newCheckedState;\n\n if (newCheckedState && this._isSingleSelector && this.buttonToggleGroup.value != this.value) {\n this.buttonToggleGroup.selected = this;\n }\n }\n\n /** MdButtonToggleGroup reads this to assign its own value. */\n @Input()\n get value(): any {\n return this._value;\n }\n\n set value(value: any) {\n if (this._value != value) {\n if (this.buttonToggleGroup != null && this.checked) {\n this.buttonToggleGroup.value = value;\n }\n this._value = value;\n }\n }\n\n /** Dispatch change event with current value. */\n private _emitChangeEvent(): void {\n let event = new MdButtonToggleChange();\n event.source = this;\n event.value = this._value;\n this._change.emit(event);\n }\n\n @HostBinding('class.md-button-toggle-disabled')\n @Input()\n get disabled(): boolean {\n return this._disabled || (this.buttonToggleGroup != null && this.buttonToggleGroup.disabled) ||\n (this.buttonToggleGroupMultiple != null && this.buttonToggleGroupMultiple.disabled);\n }\n\n set disabled(value: boolean) {\n this._disabled = (value != null && value !== false) ? true : null;\n }\n\n /** Toggle the state of the current button toggle. */\n private _toggle(): void {\n this.checked = !this.checked;\n }\n\n /**\n * Checks the button toggle due to an interaction with the underlying native input.\n * @internal\n */\n onInputChange(event: Event) {\n event.stopPropagation();\n\n if (this._isSingleSelector) {\n // Propagate the change one-way via the group, which will in turn mark this\n // button toggle as checked.\n this.checked = true;\n this.buttonToggleGroup.selected = this;\n } else {\n this._toggle();\n }\n }\n}\n\nexport const MD_BUTTON_TOGGLE_DIRECTIVES = [\n MdButtonToggleGroup,\n MdButtonToggleGroupMultiple,\n MdButtonToggle\n];\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/button/README.md b/DEBUG-merge/components/button/README.md new file mode 100644 index 000000000000..0f3d3bec6fbc --- /dev/null +++ b/DEBUG-merge/components/button/README.md @@ -0,0 +1,113 @@ +# md-button + +`md-button` is an HTML ` + + + + + ``` + +Output: + + + +### Theming + +All button types can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the `color` attribute. +Simply pass in the palette name. + +In flat buttons, the palette chosen will affect the text color, while in other buttons, it affects the background. + +Example: + + ```html + + + + ``` + +Output: + + + +### Disabling + +You can disable any button type through the native `disabled` property. You can add it directly, or bind it to a property on your +component class. + +```html + + + +``` + +Output: + + + +### Accessibility + + * In high contrast mode, a strong border is added to the button to make it easier to see. + * Button focus events originating from the keyboard will retain focus styles, while button focus events from the mouse will not. + * As `md-button` is added to an existing `button` or `a` tag, it enjoys all the accessibility natively built into these elements. + + +### Upcoming work + +We will also be adding ink ripples to buttons in an upcoming milestone. + +### API Summary + +Properties: + +| Name | Type | Description | +| --- | --- | --- | +| `color` | `"primary"|"accent"|"warn"` | The color palette of the button +| `disabled` | boolean | Whether or not the button is disabled diff --git a/DEBUG-merge/components/button/_button-base.css b/DEBUG-merge/components/button/_button-base.css new file mode 100644 index 000000000000..85f20b10132d --- /dev/null +++ b/DEBUG-merge/components/button/_button-base.css @@ -0,0 +1,48 @@ +/** + * A collection of mixins and CSS classes that can be used to apply elevation to a material + * element. + * See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html + * Examples: + * + * + * .md-foo { + * @include $md-elevation(2); + * + * &:active { + * @include $md-elevation(8); + * } + * } + * + *

Some content

+ * + * For an explanation of the design behind how elevation is implemented, see the design doc at + * https://goo.gl/Kq0k9Z. + */ +/** + * The css property used for elevation. In most cases this should not be changed. It is exposed + * as a variable for abstraction / easy use when needing to reference the property directly, for + * example in a will-change rule. + */ +/** The default duration value for elevation transitions. */ +/** The default easing value for elevation transitions. */ +/** + * Applies the correct css rules to an element to give it the elevation specified by $zValue. + * The $zValue must be between 0 and 24. + */ +/** + * Returns a string that can be used as the value for a transition property for elevation. + * Calling this function directly is useful in situations where a component needs to transition + * more than one property. + * + * .foo { + * transition: md-elevation-transition-property-value(), opacity 100ms ease; + * will-change: $md-elevation-property, opacity; + * } + */ +/** + * Applies the correct css rules needed to have an element transition between elevations. + * This mixin should be applied to elements whose elevation values will change depending on their + * context (e.g. when active or disabled). + */ +/** Applies a property to an md-button element for each of the supported palettes. */ +/** Applies a focus style to an md-button element for each of the supported palettes. */ diff --git a/DEBUG-merge/components/button/_button-theme.css b/DEBUG-merge/components/button/_button-theme.css new file mode 100644 index 000000000000..9f17749f6262 --- /dev/null +++ b/DEBUG-merge/components/button/_button-theme.css @@ -0,0 +1,2 @@ +/** Applies a property to an md-button element for each of the supported palettes. */ +/** Applies a focus style to an md-button element for each of the supported palettes. */ diff --git a/DEBUG-merge/components/button/button.css b/DEBUG-merge/components/button/button.css new file mode 100644 index 000000000000..8bb9a37dc665 --- /dev/null +++ b/DEBUG-merge/components/button/button.css @@ -0,0 +1,181 @@ +/** + * A collection of mixins and CSS classes that can be used to apply elevation to a material + * element. + * See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html + * Examples: + * + * + * .md-foo { + * @include $md-elevation(2); + * + * &:active { + * @include $md-elevation(8); + * } + * } + * + *

Some content

+ * + * For an explanation of the design behind how elevation is implemented, see the design doc at + * https://goo.gl/Kq0k9Z. + */ +/** + * The css property used for elevation. In most cases this should not be changed. It is exposed + * as a variable for abstraction / easy use when needing to reference the property directly, for + * example in a will-change rule. + */ +/** The default duration value for elevation transitions. */ +/** The default easing value for elevation transitions. */ +/** + * Applies the correct css rules to an element to give it the elevation specified by $zValue. + * The $zValue must be between 0 and 24. + */ +/** + * Returns a string that can be used as the value for a transition property for elevation. + * Calling this function directly is useful in situations where a component needs to transition + * more than one property. + * + * .foo { + * transition: md-elevation-transition-property-value(), opacity 100ms ease; + * will-change: $md-elevation-property, opacity; + * } + */ +/** + * Applies the correct css rules needed to have an element transition between elevations. + * This mixin should be applied to elements whose elevation values will change depending on their + * context (e.g. when active or disabled). + */ +/** Applies a property to an md-button element for each of the supported palettes. */ +/** Applies a focus style to an md-button element for each of the supported palettes. */ +[md-raised-button], [md-fab], [md-mini-fab], [md-button], [md-icon-button] { + box-sizing: border-box; + position: relative; + background: transparent; + text-align: center; + cursor: pointer; + user-select: none; + outline: none; + border: none; + display: inline-block; + white-space: nowrap; + text-decoration: none; + vertical-align: baseline; + font-size: 14px; + font-family: Roboto, "Helvetica Neue", sans-serif; + font-weight: 500; + color: currentColor; + margin: 0; + min-width: 88px; + line-height: 36px; + padding: 0 16px; + border-radius: 3px; } + .md-primary[md-raised-button], .md-primary[md-fab], .md-primary[md-mini-fab], .md-primary[md-button], .md-primary[md-icon-button] { + color: #009688; } + .md-accent[md-raised-button], .md-accent[md-fab], .md-accent[md-mini-fab], .md-accent[md-button], .md-accent[md-icon-button] { + color: #9c27b0; } + .md-warn[md-raised-button], .md-warn[md-fab], .md-warn[md-mini-fab], .md-warn[md-button], .md-warn[md-icon-button] { + color: #f44336; } + .md-primary[disabled][md-raised-button], .md-primary[disabled][md-fab], .md-primary[disabled][md-mini-fab], .md-primary[disabled][md-button], .md-primary[disabled][md-icon-button], .md-accent[disabled][md-raised-button], .md-accent[disabled][md-fab], .md-accent[disabled][md-mini-fab], .md-accent[disabled][md-button], .md-accent[disabled][md-icon-button], .md-warn[disabled][md-raised-button], .md-warn[disabled][md-fab], .md-warn[disabled][md-mini-fab], .md-warn[disabled][md-button], .md-warn[disabled][md-icon-button], [disabled][disabled][md-raised-button], [disabled][disabled][md-fab], [disabled][disabled][md-mini-fab], [disabled][disabled][md-button], [disabled][disabled][md-icon-button] { + color: rgba(0, 0, 0, 0.38); } + [disabled][md-raised-button], [disabled][md-fab], [disabled][md-mini-fab], [disabled][md-button], [disabled][md-icon-button] { + cursor: default; } + .md-button-focus[md-raised-button]::after, .md-button-focus[md-fab]::after, .md-button-focus[md-mini-fab]::after, .md-button-focus[md-button]::after, .md-button-focus[md-icon-button]::after { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + content: ''; + background-color: rgba(0, 0, 0, 0.12); + border-radius: inherit; + pointer-events: none; } + .md-button-focus.md-primary[md-raised-button]::after, .md-button-focus.md-primary[md-fab]::after, .md-button-focus.md-primary[md-mini-fab]::after, .md-button-focus.md-primary[md-button]::after, .md-button-focus.md-primary[md-icon-button]::after { + background-color: rgba(0, 150, 136, 0.12); } + .md-button-focus.md-accent[md-raised-button]::after, .md-button-focus.md-accent[md-fab]::after, .md-button-focus.md-accent[md-mini-fab]::after, .md-button-focus.md-accent[md-button]::after, .md-button-focus.md-accent[md-icon-button]::after { + background-color: rgba(156, 39, 176, 0.12); } + .md-button-focus.md-warn[md-raised-button]::after, .md-button-focus.md-warn[md-fab]::after, .md-button-focus.md-warn[md-mini-fab]::after, .md-button-focus.md-warn[md-button]::after, .md-button-focus.md-warn[md-icon-button]::after { + background-color: rgba(244, 67, 54, 0.12); } + +[md-raised-button], [md-fab], [md-mini-fab] { + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + background-color: #fafafa; + transform: translate3d(0, 0, 0); + transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); } + .md-primary[md-raised-button], .md-primary[md-fab], .md-primary[md-mini-fab] { + color: white; } + .md-accent[md-raised-button], .md-accent[md-fab], .md-accent[md-mini-fab] { + color: rgba(255, 255, 255, 0.870588); } + .md-warn[md-raised-button], .md-warn[md-fab], .md-warn[md-mini-fab] { + color: white; } + .md-primary[disabled][md-raised-button], .md-primary[disabled][md-fab], .md-primary[disabled][md-mini-fab], .md-accent[disabled][md-raised-button], .md-accent[disabled][md-fab], .md-accent[disabled][md-mini-fab], .md-warn[disabled][md-raised-button], .md-warn[disabled][md-fab], .md-warn[disabled][md-mini-fab], [disabled][disabled][md-raised-button], [disabled][disabled][md-fab], [disabled][disabled][md-mini-fab] { + color: rgba(0, 0, 0, 0.38); } + .md-primary[md-raised-button], .md-primary[md-fab], .md-primary[md-mini-fab] { + background-color: #009688; } + .md-accent[md-raised-button], .md-accent[md-fab], .md-accent[md-mini-fab] { + background-color: #9c27b0; } + .md-warn[md-raised-button], .md-warn[md-fab], .md-warn[md-mini-fab] { + background-color: #f44336; } + .md-primary[disabled][md-raised-button], .md-primary[disabled][md-fab], .md-primary[disabled][md-mini-fab], .md-accent[disabled][md-raised-button], .md-accent[disabled][md-fab], .md-accent[disabled][md-mini-fab], .md-warn[disabled][md-raised-button], .md-warn[disabled][md-fab], .md-warn[disabled][md-mini-fab], [disabled][disabled][md-raised-button], [disabled][disabled][md-fab], [disabled][disabled][md-mini-fab] { + background-color: rgba(0, 0, 0, 0.12); } + [md-raised-button]:active, [md-fab]:active, [md-mini-fab]:active { + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } + [disabled][md-raised-button], [disabled][md-fab], [disabled][md-mini-fab] { + box-shadow: none; } + +[md-button][disabled]:hover.md-primary, [md-button][disabled]:hover.md-accent, [md-button][disabled]:hover.md-warn, [md-button][disabled]:hover:hover { + background-color: transparent; } + +[md-fab] { + min-width: 0; + border-radius: 50%; + background-color: #9c27b0; + color: rgba(255, 255, 255, 0.870588); + width: 56px; + height: 56px; + padding: 0; } + [md-fab] i, [md-fab] md-icon { + padding: 16px 0; } + +[md-mini-fab] { + min-width: 0; + border-radius: 50%; + background-color: #9c27b0; + color: rgba(255, 255, 255, 0.870588); + width: 40px; + height: 40px; + padding: 0; } + [md-mini-fab] i, [md-mini-fab] md-icon { + padding: 8px 0; } + +[md-icon-button] { + min-width: 0; + padding: 0; + width: 40px; + height: 40px; + line-height: 24px; + border-radius: 50%; } + [md-icon-button] .md-button-wrapper > * { + vertical-align: middle; } + +[md-button]:hover::after, [md-icon-button]:hover::after { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + content: ''; + background-color: rgba(0, 0, 0, 0.12); + border-radius: inherit; + pointer-events: none; } + +[md-button]:hover.md-primary::after, [md-icon-button]:hover.md-primary::after { + background-color: rgba(0, 150, 136, 0.12); } + +[md-button]:hover.md-accent::after, [md-icon-button]:hover.md-accent::after { + background-color: rgba(156, 39, 176, 0.12); } + +[md-button]:hover.md-warn::after, [md-icon-button]:hover.md-warn::after { + background-color: rgba(244, 67, 54, 0.12); } + +@media screen and (-ms-high-contrast: active) { + .md-raised-button, .md-fab, .md-mini-fab { + border: 1px solid #fff; } } diff --git a/DEBUG-merge/components/button/button.d.ts b/DEBUG-merge/components/button/button.d.ts new file mode 100644 index 000000000000..a8819a09db36 --- /dev/null +++ b/DEBUG-merge/components/button/button.d.ts @@ -0,0 +1,22 @@ +import { ElementRef, Renderer, Type } from '@angular/core'; +export declare class MdButton { + private elementRef; + private renderer; + private _color; + /** Whether the button has focus from the keyboard (not the mouse). Used for class binding. */ + isKeyboardFocused: boolean; + /** Whether a mousedown has occurred on this element in the last 100ms. */ + isMouseDown: boolean; + constructor(elementRef: ElementRef, renderer: Renderer); + color: string; + _updateColor(newColor: string): void; + _setElementColor(color: string, isAdd: boolean): void; +} +export declare class MdAnchor extends MdButton { + _disabled: boolean; + constructor(elementRef: ElementRef, renderer: Renderer); + tabIndex: number; + isAriaDisabled: string; + disabled: boolean; +} +export declare const MD_BUTTON_DIRECTIVES: Type[]; diff --git a/DEBUG-merge/components/button/button.html b/DEBUG-merge/components/button/button.html new file mode 100644 index 000000000000..4e3df0e22666 --- /dev/null +++ b/DEBUG-merge/components/button/button.html @@ -0,0 +1 @@ + diff --git a/DEBUG-merge/components/button/button.js b/DEBUG-merge/components/button/button.js new file mode 100644 index 000000000000..a5bc4242b29b --- /dev/null +++ b/DEBUG-merge/components/button/button.js @@ -0,0 +1,161 @@ +"use strict"; +var __extends = (this && this.__extends) || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +}; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +// TODO(jelbourn): Ink ripples. +// TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener. +// TODO(kara): Convert attribute selectors to classes when attr maps become available +var MdButton = (function () { + function MdButton(elementRef, renderer) { + this.elementRef = elementRef; + this.renderer = renderer; + /** Whether the button has focus from the keyboard (not the mouse). Used for class binding. */ + this.isKeyboardFocused = false; + /** Whether a mousedown has occurred on this element in the last 100ms. */ + this.isMouseDown = false; + } + Object.defineProperty(MdButton.prototype, "color", { + get: function () { + return this._color; + }, + set: function (value) { + this._updateColor(value); + }, + enumerable: true, + configurable: true + }); + /** @internal */ + MdButton.prototype.setMousedown = function () { + var _this = this; + // We only *show* the focus style when focus has come to the button via the keyboard. + // The Material Design spec is silent on this topic, and without doing this, the + // button continues to look :active after clicking. + // @see http://marcysutton.com/button-focus-hell/ + this.isMouseDown = true; + setTimeout(function () { _this.isMouseDown = false; }, 100); + }; + MdButton.prototype._updateColor = function (newColor) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; + }; + MdButton.prototype._setElementColor = function (color, isAdd) { + if (color != null && color != '') { + this.renderer.setElementClass(this.elementRef.nativeElement, "md-" + color, isAdd); + } + }; + /** @internal */ + MdButton.prototype.setKeyboardFocus = function () { + this.isKeyboardFocused = !this.isMouseDown; + }; + /** @internal */ + MdButton.prototype.removeKeyboardFocus = function () { + this.isKeyboardFocused = false; + }; + MdButton = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'button[md-button], button[md-raised-button], button[md-icon-button], ' + + 'button[md-fab], button[md-mini-fab]', + inputs: ['color'], + host: { + '[class.md-button-focus]': 'isKeyboardFocused', + '(mousedown)': 'setMousedown()', + '(focus)': 'setKeyboardFocus()', + '(blur)': 'removeKeyboardFocus()', + }, + templateUrl: 'button.html', + styleUrls: ['button.css'], + encapsulation: core_1.ViewEncapsulation.None, + changeDetection: core_1.ChangeDetectionStrategy.OnPush, + }), + __metadata('design:paramtypes', [core_1.ElementRef, core_1.Renderer]) + ], MdButton); + return MdButton; +}()); +exports.MdButton = MdButton; +var MdAnchor = (function (_super) { + __extends(MdAnchor, _super); + function MdAnchor(elementRef, renderer) { + _super.call(this, elementRef, renderer); + this._disabled = null; + } + Object.defineProperty(MdAnchor.prototype, "tabIndex", { + get: function () { + return this.disabled ? -1 : 0; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdAnchor.prototype, "isAriaDisabled", { + get: function () { + return this.disabled ? 'true' : 'false'; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdAnchor.prototype, "disabled", { + get: function () { return this._disabled; }, + set: function (value) { + // The presence of *any* disabled value makes the component disabled, *except* for false. + this._disabled = (value != null && value != false) ? true : null; + }, + enumerable: true, + configurable: true + }); + /** @internal */ + MdAnchor.prototype.haltDisabledEvents = function (event) { + // A disabled button shouldn't apply any actions + if (this.disabled) { + event.preventDefault(); + event.stopImmediatePropagation(); + } + }; + __decorate([ + core_1.HostBinding('tabIndex'), + __metadata('design:type', Number) + ], MdAnchor.prototype, "tabIndex", null); + __decorate([ + core_1.HostBinding('attr.aria-disabled'), + __metadata('design:type', String) + ], MdAnchor.prototype, "isAriaDisabled", null); + __decorate([ + core_1.HostBinding('attr.disabled'), + core_1.Input('disabled'), + __metadata('design:type', Object) + ], MdAnchor.prototype, "disabled", null); + MdAnchor = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'a[md-button], a[md-raised-button], a[md-icon-button], a[md-fab], a[md-mini-fab]', + inputs: ['color'], + host: { + '[class.md-button-focus]': 'isKeyboardFocused', + '(mousedown)': 'setMousedown()', + '(focus)': 'setKeyboardFocus()', + '(blur)': 'removeKeyboardFocus()', + '(click)': 'haltDisabledEvents($event)', + }, + templateUrl: 'button.html', + styleUrls: ['button.css'], + encapsulation: core_1.ViewEncapsulation.None + }), + __metadata('design:paramtypes', [core_1.ElementRef, core_1.Renderer]) + ], MdAnchor); + return MdAnchor; +}(MdButton)); +exports.MdAnchor = MdAnchor; +exports.MD_BUTTON_DIRECTIVES = [MdButton, MdAnchor]; +//# sourceMappingURL=../../../../components/button/button.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/button/button.js.map b/DEBUG-merge/components/button/button.js.map new file mode 100644 index 000000000000..dc345b5aa605 --- /dev/null +++ b/DEBUG-merge/components/button/button.js.map @@ -0,0 +1 @@ +{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/demo-app/components/button/button.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ViewEncapsulation,\n Input,\n HostBinding,\n ChangeDetectionStrategy,\n ElementRef,\n Renderer,\n Type,\n} from '@angular/core';\n\n// TODO(jelbourn): Ink ripples.\n// TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.\n// TODO(kara): Convert attribute selectors to classes when attr maps become available\n\n\n@Component({\n moduleId: module.id,\n selector: 'button[md-button], button[md-raised-button], button[md-icon-button], ' +\n 'button[md-fab], button[md-mini-fab]',\n inputs: ['color'],\n host: {\n '[class.md-button-focus]': 'isKeyboardFocused',\n '(mousedown)': 'setMousedown()',\n '(focus)': 'setKeyboardFocus()',\n '(blur)': 'removeKeyboardFocus()',\n },\n templateUrl: 'button.html',\n styleUrls: ['button.css'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MdButton {\n private _color: string;\n\n /** Whether the button has focus from the keyboard (not the mouse). Used for class binding. */\n isKeyboardFocused: boolean = false;\n\n /** Whether a mousedown has occurred on this element in the last 100ms. */\n isMouseDown: boolean = false;\n\n constructor(private elementRef: ElementRef, private renderer: Renderer) { }\n\n get color(): string {\n return this._color;\n }\n\n set color(value: string) {\n this._updateColor(value);\n }\n\n /** @internal */\n setMousedown() {\n // We only *show* the focus style when focus has come to the button via the keyboard.\n // The Material Design spec is silent on this topic, and without doing this, the\n // button continues to look :active after clicking.\n // @see http://marcysutton.com/button-focus-hell/\n this.isMouseDown = true;\n setTimeout(() => { this.isMouseDown = false; }, 100);\n }\n\n _updateColor(newColor: string) {\n this._setElementColor(this._color, false);\n this._setElementColor(newColor, true);\n this._color = newColor;\n }\n\n _setElementColor(color: string, isAdd: boolean) {\n if (color != null && color != '') {\n this.renderer.setElementClass(this.elementRef.nativeElement, `md-${color}`, isAdd);\n }\n }\n\n /** @internal */\n setKeyboardFocus() {\n this.isKeyboardFocused = !this.isMouseDown;\n }\n\n /** @internal */\n removeKeyboardFocus() {\n this.isKeyboardFocused = false;\n }\n}\n\n@Component({\n moduleId: module.id,\n selector: 'a[md-button], a[md-raised-button], a[md-icon-button], a[md-fab], a[md-mini-fab]',\n inputs: ['color'],\n host: {\n '[class.md-button-focus]': 'isKeyboardFocused',\n '(mousedown)': 'setMousedown()',\n '(focus)': 'setKeyboardFocus()',\n '(blur)': 'removeKeyboardFocus()',\n '(click)': 'haltDisabledEvents($event)',\n },\n templateUrl: 'button.html',\n styleUrls: ['button.css'],\n encapsulation: ViewEncapsulation.None\n})\nexport class MdAnchor extends MdButton {\n _disabled: boolean = null;\n\n constructor(elementRef: ElementRef, renderer: Renderer) {\n super(elementRef, renderer);\n }\n\n @HostBinding('tabIndex')\n get tabIndex(): number {\n return this.disabled ? -1 : 0;\n }\n\n @HostBinding('attr.aria-disabled')\n /** Gets the aria-disabled value for the component, which must be a string for Dart. */\n get isAriaDisabled(): string {\n return this.disabled ? 'true' : 'false';\n }\n\n @HostBinding('attr.disabled')\n @Input('disabled')\n get disabled() { return this._disabled; }\n\n set disabled(value: boolean) {\n // The presence of *any* disabled value makes the component disabled, *except* for false.\n this._disabled = (value != null && value != false) ? true : null;\n }\n\n /** @internal */\n haltDisabledEvents(event: Event) {\n // A disabled button shouldn't apply any actions\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n}\n\n\nexport const MD_BUTTON_DIRECTIVES: Type[] = [MdButton, MdAnchor];\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/button/package.json b/DEBUG-merge/components/button/package.json new file mode 100644 index 000000000000..778b8a8dbeb2 --- /dev/null +++ b/DEBUG-merge/components/button/package.json @@ -0,0 +1,28 @@ +{ + "name": "@angular2-material/button", + "version": "2.0.0-alpha.5-2", + "description": "Angular 2 Material button", + "main": "./button.js", + "typings": "./button.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components", + "button", + "anchor", + "linkbutton" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "@angular2-material/core": "2.0.0-alpha.5-2" + } +} diff --git a/DEBUG-merge/components/card/README.md b/DEBUG-merge/components/card/README.md new file mode 100644 index 000000000000..14c28409ac0c --- /dev/null +++ b/DEBUG-merge/components/card/README.md @@ -0,0 +1,116 @@ +# md-card + +`md-card` is a content container component that conforms to the spec of a Material Design card. + +See plunker example [here](http://plnkr.co/edit/pkUNGMXPcf8RXKapXNXQ?p=preview). + +## Usage + +Simply add your content between `md-card` tags to consume basic card styles like box-shadow and default padding. + +```html + + Basic card. + +``` + +Output: + + + +### Preset sections + +We also provide a number of preset sections that you can mix and match within the `md-card` tags. + + * ``: adds styles for a title + * ``: adds styles for a subtitle + * ``: main content section, intended for blocks of text + * ``: stretches image to container width + * ``: wraps and styles buttons + * ``: anchors section to bottom of card + +Example markup for a card with section presets: + +```html + + Subtitle first + Card with title + +

This is supporting text.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad

+ + + + + + +``` + +Output: + + + +#### Preset shortcuts + +`md-card-actions` has a few layout shortcuts. You can add `align="end"` to align the buttons at the end of +the main axis (flex-end). The default is `align="start"` (flex-start). + +### Preset layouts + +You can also leverage preset layouts that format some of the sections together. + +#### `` + +Formats the following sections into a header: + + * ``: title to format within header + * ``: subtitle to format within header + * ``: image to use for avatar + +Example markup for a card with a header: + +```html + + + + Header title + Header subtitle + + + +

Here is some more content

+ + +``` + +Output: + + + +#### `` + +Groups the following sections together: + + * ``: title to format within group + * ``: subtitle to format within group + * One of the following image sizes: + * `` + * `` + * `` + +Example markup for a card with title-group layout: + +```html + + + + Card with title + Subtitle + + +``` + +Output: + + \ No newline at end of file diff --git a/DEBUG-merge/components/card/card-header.html b/DEBUG-merge/components/card/card-header.html new file mode 100644 index 000000000000..efaa67b2ac87 --- /dev/null +++ b/DEBUG-merge/components/card/card-header.html @@ -0,0 +1,5 @@ + +
+ +
+ diff --git a/DEBUG-merge/components/card/card-title-group.html b/DEBUG-merge/components/card/card-title-group.html new file mode 100644 index 000000000000..150dd99ce08f --- /dev/null +++ b/DEBUG-merge/components/card/card-title-group.html @@ -0,0 +1,5 @@ +
+ +
+ + diff --git a/DEBUG-merge/components/card/card.css b/DEBUG-merge/components/card/card.css new file mode 100644 index 000000000000..2463b2e023cc --- /dev/null +++ b/DEBUG-merge/components/card/card.css @@ -0,0 +1,187 @@ +/** + * A collection of mixins and CSS classes that can be used to apply elevation to a material + * element. + * See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html + * Examples: + * + * + * .md-foo { + * @include $md-elevation(2); + * + * &:active { + * @include $md-elevation(8); + * } + * } + * + *

Some content

+ * + * For an explanation of the design behind how elevation is implemented, see the design doc at + * https://goo.gl/Kq0k9Z. + */ +/** + * The css property used for elevation. In most cases this should not be changed. It is exposed + * as a variable for abstraction / easy use when needing to reference the property directly, for + * example in a will-change rule. + */ +/** The default duration value for elevation transitions. */ +/** The default easing value for elevation transitions. */ +/** + * Applies the correct css rules to an element to give it the elevation specified by $zValue. + * The $zValue must be between 0 and 24. + */ +/** + * Returns a string that can be used as the value for a transition property for elevation. + * Calling this function directly is useful in situations where a component needs to transition + * more than one property. + * + * .foo { + * transition: md-elevation-transition-property-value(), opacity 100ms ease; + * will-change: $md-elevation-property, opacity; + * } + */ +/** + * Applies the correct css rules needed to have an element transition between elevations. + * This mixin should be applied to elements whose elevation values will change depending on their + * context (e.g. when active or disabled). + */ +md-card { + box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); + will-change: box-shadow; + display: block; + position: relative; + padding: 24px; + border-radius: 2px; + font-family: Roboto, "Helvetica Neue", sans-serif; + background: white; } + +md-card:hover { + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + +.md-card-flat { + box-shadow: none; } + +md-card-title, md-card-subtitle, md-card-content, md-card-actions { + display: block; + margin-bottom: 16px; } + +md-card-title { + font-size: 24px; + font-weight: 400; } + +md-card-subtitle { + font-size: 14px; + color: rgba(0, 0, 0, 0.54); } + +md-card-content { + font-size: 14px; } + +md-card-actions { + margin-left: -16px; + margin-right: -16px; + padding: 8px 0; } + md-card-actions[align='end'] { + display: flex; + justify-content: flex-end; } + +[md-card-image] { + width: calc(100% + 48px); + margin: 0 -24px 16px -24px; } + +[md-card-xl-image] { + width: 240px; + height: 240px; + margin: -8px; } + +md-card-footer { + position: absolute; + bottom: 0; } + +md-card-actions [md-button], md-card-actions [md-raised-button] { + margin: 0 4px; } + +/* HEADER STYLES */ +md-card-header { + display: flex; + flex-direction: row; + height: 40px; + margin: -8px 0 16px 0; } + +.md-card-header-text { + height: 40px; + margin: 0 8px; } + +[md-card-avatar] { + height: 40px; + width: 40px; + border-radius: 50%; } + +md-card-header md-card-title { + font-size: 14px; } + +/* TITLE-GROUP STYLES */ +[md-card-sm-image], [md-card-md-image], [md-card-lg-image] { + margin: -8px 0; } + +md-card-title-group { + display: flex; + justify-content: space-between; + margin: 0 -8px; } + +[md-card-sm-image] { + width: 80px; + height: 80px; } + +[md-card-md-image] { + width: 112px; + height: 112px; } + +[md-card-lg-image] { + width: 152px; + height: 152px; } + +/* MEDIA QUERIES */ +@media (max-width: 600px) { + md-card { + padding: 24px 16px; } + [md-card-image] { + width: calc(100% + 32px); + margin: 16px -16px; } + md-card-title-group { + margin: 0; } + [md-card-xl-image] { + margin-left: 0; + margin-right: 0; } + md-card-header { + margin: -8px 0 0 0; } } + +/* FIRST/LAST CHILD ADJUSTMENTS */ +.md-card > :first-child, md-card-content > :first-child { + margin-top: 0; } + +.md-card > :last-child, md-card-content > :last-child { + margin-bottom: 0; } + +[md-card-image]:first-child { + margin-top: -24px; } + +.md-card > md-card-actions:last-child { + margin-bottom: -16px; + padding-bottom: 0; } + +md-card-actions [md-button]:first-child, +md-card-actions [md-raised-button]:first-child { + margin-left: 0; + margin-right: 0; } + +md-card-title:not(:first-child), md-card-subtitle:not(:first-child) { + margin-top: -4px; } + +md-card-header md-card-subtitle:not(:first-child) { + margin-top: -8px; } + +.md-card > [md-card-xl-image]:first-child { + margin-top: -8px; } + +.md-card > [md-card-xl-image]:last-child { + margin-bottom: -8px; } diff --git a/DEBUG-merge/components/card/card.d.ts b/DEBUG-merge/components/card/card.d.ts new file mode 100644 index 000000000000..9bf0694c6527 --- /dev/null +++ b/DEBUG-merge/components/card/card.d.ts @@ -0,0 +1,7 @@ +export declare class MdCard { +} +export declare class MdCardHeader { +} +export declare class MdCardTitleGroup { +} +export declare const MD_CARD_DIRECTIVES: any[]; diff --git a/DEBUG-merge/components/card/card.html b/DEBUG-merge/components/card/card.html new file mode 100644 index 000000000000..d8084700e762 --- /dev/null +++ b/DEBUG-merge/components/card/card.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/DEBUG-merge/components/card/card.js b/DEBUG-merge/components/card/card.js new file mode 100644 index 000000000000..47a7a118652c --- /dev/null +++ b/DEBUG-merge/components/card/card.js @@ -0,0 +1,103 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +/* + + is a basic content container component that adds the styles of a material design card. + +While you can use this component alone, +it also provides a number of preset styles for common card sections, including: + - md-card-title + - md-card-subtitle + - md-card-content + - md-card-actions + - md-card-footer + + You can see some examples of cards here: + http://embed.plnkr.co/s5O4YcyvbLhIApSrIhtj/ + + TODO(kara): update link to demo site when it exists + +*/ +var MdCard = (function () { + function MdCard() { + } + MdCard = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-card', + templateUrl: 'card.html', + styleUrls: ['card.css'], + encapsulation: core_1.ViewEncapsulation.None, + changeDetection: core_1.ChangeDetectionStrategy.OnPush, + }), + __metadata('design:paramtypes', []) + ], MdCard); + return MdCard; +}()); +exports.MdCard = MdCard; +/* The following components don't have any behavior. + They simply use content projection to wrap user content + for flex layout purposes in (and thus allow a cleaner, boilerplate-free API). + + + is a component intended to be used within the component. +It adds styles for a preset header section (i.e. a title, subtitle, and avatar layout). + +You can see an example of a card with a header here: +http://embed.plnkr.co/tvJl19z3gZTQd6WmwkIa/ + +TODO(kara): update link to demo site when it exists +*/ +var MdCardHeader = (function () { + function MdCardHeader() { + } + MdCardHeader = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-card-header', + templateUrl: 'card-header.html', + encapsulation: core_1.ViewEncapsulation.None, + changeDetection: core_1.ChangeDetectionStrategy.OnPush, + }), + __metadata('design:paramtypes', []) + ], MdCardHeader); + return MdCardHeader; +}()); +exports.MdCardHeader = MdCardHeader; +/* + + is a component intended to be used within the component. +It adds styles for a preset layout that groups an image with a title section. + +You can see an example of a card with a title-group section here: +http://embed.plnkr.co/EDfgCF9eKcXjini1WODm/ + +TODO(kara): update link to demo site when it exists +*/ +var MdCardTitleGroup = (function () { + function MdCardTitleGroup() { + } + MdCardTitleGroup = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-card-title-group', + templateUrl: 'card-title-group.html', + encapsulation: core_1.ViewEncapsulation.None, + changeDetection: core_1.ChangeDetectionStrategy.OnPush, + }), + __metadata('design:paramtypes', []) + ], MdCardTitleGroup); + return MdCardTitleGroup; +}()); +exports.MdCardTitleGroup = MdCardTitleGroup; +exports.MD_CARD_DIRECTIVES = [MdCard, MdCardHeader, MdCardTitleGroup]; +//# sourceMappingURL=../../../../components/card/card.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/card/card.js.map b/DEBUG-merge/components/card/card.js.map new file mode 100644 index 000000000000..7e8280737684 --- /dev/null +++ b/DEBUG-merge/components/card/card.js.map @@ -0,0 +1 @@ +{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/demo-app/components/card/card.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAAoE,eAAe,CAAC,CAAA;AAGpF;;;;;;;;;;;;;;;;;EAiBE;AAUF;IAAA;IAAqB,CAAC;IARtB;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,SAAS;YACnB,WAAW,EAAE,WAAW;YACxB,SAAS,EAAE,CAAC,UAAU,CAAC;YACvB,aAAa,EAAE,wBAAiB,CAAC,IAAI;YACrC,eAAe,EAAE,8BAAuB,CAAC,MAAM;SAChD,CAAC;;cAAA;IACmB,aAAC;AAAD,CAAC,AAAtB,IAAsB;AAAT,cAAM,SAAG,CAAA;AAGtB;;;;;;;;;;;;EAYE;AASF;IAAA;IAA2B,CAAC;IAP5B;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,gBAAgB;YAC1B,WAAW,EAAE,kBAAkB;YAC/B,aAAa,EAAE,wBAAiB,CAAC,IAAI;YACrC,eAAe,EAAE,8BAAuB,CAAC,MAAM;SAChD,CAAC;;oBAAA;IACyB,mBAAC;AAAD,CAAC,AAA5B,IAA4B;AAAf,oBAAY,eAAG,CAAA;AAE5B;;;;;;;;;EASE;AASF;IAAA;IAA+B,CAAC;IAPhC;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,qBAAqB;YAC/B,WAAW,EAAE,uBAAuB;YACpC,aAAa,EAAE,wBAAiB,CAAC,IAAI;YACrC,eAAe,EAAE,8BAAuB,CAAC,MAAM;SAChD,CAAC;;wBAAA;IAC6B,uBAAC;AAAD,CAAC,AAAhC,IAAgC;AAAnB,wBAAgB,mBAAG,CAAA;AAEnB,0BAAkB,GAAU,CAAC,MAAM,EAAE,YAAY,EAAE,gBAAgB,CAAC,CAAC","sourcesContent":["import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';\n\n\n/*\n\n is a basic content container component that adds the styles of a material design card.\n\nWhile you can use this component alone,\nit also provides a number of preset styles for common card sections, including:\n - md-card-title\n - md-card-subtitle\n - md-card-content\n - md-card-actions\n - md-card-footer\n\n You can see some examples of cards here:\n http://embed.plnkr.co/s5O4YcyvbLhIApSrIhtj/\n\n TODO(kara): update link to demo site when it exists\n\n*/\n\n@Component({\n moduleId: module.id,\n selector: 'md-card',\n templateUrl: 'card.html',\n styleUrls: ['card.css'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MdCard {}\n\n\n/* The following components don't have any behavior.\n They simply use content projection to wrap user content\n for flex layout purposes in (and thus allow a cleaner, boilerplate-free API).\n\n\n is a component intended to be used within the component.\nIt adds styles for a preset header section (i.e. a title, subtitle, and avatar layout).\n\nYou can see an example of a card with a header here:\nhttp://embed.plnkr.co/tvJl19z3gZTQd6WmwkIa/\n\nTODO(kara): update link to demo site when it exists\n*/\n\n@Component({\n moduleId: module.id,\n selector: 'md-card-header',\n templateUrl: 'card-header.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MdCardHeader {}\n\n/*\n\n is a component intended to be used within the component.\nIt adds styles for a preset layout that groups an image with a title section.\n\nYou can see an example of a card with a title-group section here:\nhttp://embed.plnkr.co/EDfgCF9eKcXjini1WODm/\n\nTODO(kara): update link to demo site when it exists\n*/\n\n@Component({\n moduleId: module.id,\n selector: 'md-card-title-group',\n templateUrl: 'card-title-group.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MdCardTitleGroup {}\n\nexport const MD_CARD_DIRECTIVES: any[] = [MdCard, MdCardHeader, MdCardTitleGroup];\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/card/package.json b/DEBUG-merge/components/card/package.json new file mode 100644 index 000000000000..9d7c2da5ac42 --- /dev/null +++ b/DEBUG-merge/components/card/package.json @@ -0,0 +1,26 @@ +{ + "name": "@angular2-material/card", + "version": "2.0.0-alpha.5-2", + "description": "Angular 2 Material card", + "main": "./card.js", + "typings": "./card.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components", + "card" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "@angular2-material/core": "2.0.0-alpha.5-2" + } +} diff --git a/DEBUG-merge/components/checkbox/README.md b/DEBUG-merge/components/checkbox/README.md new file mode 100644 index 000000000000..e7cfc28a36d4 --- /dev/null +++ b/DEBUG-merge/components/checkbox/README.md @@ -0,0 +1,79 @@ +# md-checkbox + +`md-checkbox` is a Material Design selection control that allows users to make a binary choice for +a predetermined conditioned. It is modeled after the browser's native checkbox element, and behaves +in the same way. Similar to the native checkbox element, it supports an indeterminate state for +"mixed" checkboxes. + +A demo of the checkbox can be found at https://plnkr.co/edit/P7qce8lN9n2flS6kBhDy?p=preview. + +## Usage + +### Basic Usage + +`md-checkbox` can be used anywhere a normal checkbox would be used, and in the same way. + +```html +
    +
  • + + {{todo.name}} + +
    • +
+``` + +### Usage within Forms + +In addition to supporting native checkbox functionality, `md-checkbox` also supports `[(ngModel)]` +and `ngControl` for use within forms. + +```html +
+ +
+ + I have read and agree to the terms of service. + +
+ +
+``` + +### Indeterminate Checkboxes + +Indeterminate checkboxes are useful when a checkbox needs to be in a "mixed" state + +```html + + Click the Button Below to Make Me Indeterminate. + + +``` + +### Alignment + +Note that checkboxes can be aligned to come at the "start" or the "end" of its corresponding label. + +```html + + I come after my label. + +``` + +Note that this alignment is preserved within RTL layouts. + +### Accessibility + +By default, `md-checkbox` provides all the accessibility attributes needed. It also supports +keyboard navigation and toggling via the spacebar. However, you can provide an `aria-label` to the +checkbox if you do not wish to have any label text. + +```html + +``` diff --git a/DEBUG-merge/components/checkbox/checkbox.css b/DEBUG-merge/components/checkbox/checkbox.css new file mode 100644 index 000000000000..9f96ecb35e57 --- /dev/null +++ b/DEBUG-merge/components/checkbox/checkbox.css @@ -0,0 +1,335 @@ +/** + * Mixin that creates a new stacking context. + * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + */ +/** + * This mixin hides an element visually. + * That means it's still accessible for screen-readers but not visible in view. + */ +/** + * Forces an element to grow to fit floated contents; used as as an alternative to + * `overflow: hidden;` because it doesn't cut off contents. + */ +/** + * A mixin, which generates temporary ink ripple on a given component. + * When $bindToParent is set to true, it will check for the focused class on the same selector as you included + * that mixin. + * It is also possible to specify the color palette of the temporary ripple. By default it uses the + * accent palette for its background. + */ +/** The width/height of the checkbox element. */ +/** The width of the line used to draw the checkmark / mixedmark. */ +/** The width of the checkbox border shown when the checkbox is unchecked. */ +/** The color of the checkbox border. */ +/** The color of the checkbox's checkmark / mixedmark. */ +/** The color that is used as the checkbox background when it is checked. */ +/** The base duration used for the majority of transitions for the checkbox. */ +/** The amount of spacing between the checkbox and its label. */ +/** + * Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}. + */ +@keyframes md-checkbox-fade-in-background { + 0% { + opacity: 0; } + 50% { + opacity: 1; } } + +/** + * Fades out the background of the checkbox when it goes from {checked,indeterminate} -> unchecked. + */ +@keyframes md-checkbox-fade-out-background { + 0%, 50% { + opacity: 1; } + 100% { + opacity: 0; } } + +/** + * "Draws" in the checkmark when the checkbox goes from unchecked -> checked. + */ +@keyframes md-checkbox-unchecked-checked-checkmark-path { + 0%, 50% { + stroke-dashoffset: 22.91026; } + 50% { + animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); } + 100% { + stroke-dashoffset: 0; } } + +/** + * Horizontally expands the mixedmark when the checkbox goes from unchecked -> indeterminate. + */ +@keyframes md-checkbox-unchecked-indeterminate-mixedmark { + 0%, 68.2% { + transform: scaleX(0); } + 68.2% { + animation-timing-function: cubic-bezier(0, 0, 0, 1); } + 100% { + transform: scaleX(1); } } + +/** + * "Erases" the checkmark when the checkbox goes from checked -> unchecked. + */ +@keyframes md-checkbox-checked-unchecked-checkmark-path { + from { + animation-timing-function: cubic-bezier(0.4, 0, 1, 1); + stroke-dashoffset: 0; } + to { + stroke-dashoffset: -22.91026; } } + +/** + * Rotates and fades out the checkmark when the checkbox goes from checked -> indeterminate. This + * animation helps provide the illusion of the checkmark "morphing" into the mixedmark. + */ +@keyframes md-checkbox-checked-indeterminate-checkmark { + from { + animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); + opacity: 1; + transform: rotate(0deg); } + to { + opacity: 0; + transform: rotate(45deg); } } + +/** + * Rotates and fades the checkmark back into position when the checkbox goes from indeterminate -> + * checked. This animation helps provide the illusion that the mixedmark is "morphing" into the + * checkmark. + */ +@keyframes md-checkbox-indeterminate-checked-checkmark { + from { + animation-timing-function: cubic-bezier(0.14, 0, 0, 1); + opacity: 0; + transform: rotate(45deg); } + to { + opacity: 1; + transform: rotate(360deg); } } + +/** + * Rotates and fades in the mixedmark when the checkbox goes from checked -> indeterminate. This + * animation, similar to md-checkbox-checked-indeterminate-checkmark, helps provide an illusion + * of "morphing" from checkmark -> mixedmark. + */ +@keyframes md-checkbox-checked-indeterminate-mixedmark { + from { + animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); + opacity: 0; + transform: rotate(-45deg); } + to { + opacity: 1; + transform: rotate(0deg); } } + +/** + * Rotates and fades out the mixedmark when the checkbox goes from indeterminate -> checked. This + * animation, similar to md-checkbox-indeterminate-checked-checkmark, helps provide an illusion + * of "morphing" from mixedmark -> checkmark. + */ +@keyframes md-checkbox-indeterminate-checked-mixedmark { + from { + animation-timing-function: cubic-bezier(0.14, 0, 0, 1); + opacity: 1; + transform: rotate(0deg); } + to { + opacity: 0; + transform: rotate(315deg); } } + +/** + * Horizontally collapses and fades out the mixedmark when the checkbox goes from indeterminate -> + * unchecked. + */ +@keyframes md-checkbox-indeterminate-unchecked-mixedmark { + 0% { + animation-timing-function: linear; + opacity: 1; + transform: scaleX(1); } + 32.8%, 100% { + opacity: 0; + transform: scaleX(0); } } + +/** + * Applied to elements that cover the checkbox's entire inner container. + */ +.md-checkbox-frame, .md-checkbox-background, .md-checkbox-checkmark { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; } + +/** + * Applied to elements that are considered "marks" within the checkbox, e.g. the checkmark and + * the mixedmark. + */ +.md-checkbox-checkmark, .md-checkbox-mixedmark { + width: calc(100% - 4px); } + +/** + * Applied to elements that appear to make up the outer box of the checkmark, such as the frame + * that contains the border and the actual background element that contains the marks. + */ +.md-checkbox-frame, .md-checkbox-background { + border-radius: 2px; + box-sizing: border-box; + pointer-events: none; } + +md-checkbox, md-checkbox label { + cursor: pointer; } + +.md-checkbox-layout { + align-items: baseline; + display: inline-flex; } + +.md-checkbox-inner-container { + display: inline-block; + height: 20px; + line-height: 0; + margin: auto; + margin-right: 8px; + order: 0; + position: relative; + vertical-align: middle; + white-space: nowrap; + width: 20px; } + [dir="rtl"] .md-checkbox-inner-container { + margin-left: 8px; + margin-right: auto; } + +.md-checkbox-layout .md-checkbox-label { + line-height: 24px; } + +.md-checkbox-frame { + background-color: transparent; + border: 2px solid rgba(0, 0, 0, 0.54); + transition: border-color 90ms cubic-bezier(0, 0, 0.2, 0.1); + will-change: border-color; } + +.md-checkbox-background { + align-items: center; + display: inline-flex; + justify-content: center; + transition: background-color 90ms cubic-bezier(0, 0, 0.2, 0.1), opacity 90ms cubic-bezier(0, 0, 0.2, 0.1); + will-change: background-color, opacity; } + +.md-checkbox-checkmark { + fill: #fafafa; + width: 100%; } + +.md-checkbox-checkmark-path { + stroke: #fafafa !important; + stroke-dashoffset: 22.91026; + stroke-dasharray: 22.91026; + stroke-width: 2.66667px; } + +.md-checkbox-mixedmark { + background-color: #fafafa; + height: 2px; + opacity: 0; + transform: scaleX(0) rotate(0deg); } + +.md-checkbox-align-end .md-checkbox-inner-container { + order: 1; + margin-left: 8px; + margin-right: auto; } + [dir="rtl"] .md-checkbox-align-end .md-checkbox-inner-container { + margin-left: auto; + margin-right: 8px; } + +.md-checkbox-checked .md-checkbox-checkmark { + opacity: 1; } + +.md-checkbox-checked .md-checkbox-checkmark-path { + stroke-dashoffset: 0; } + +.md-checkbox-checked .md-checkbox-mixedmark { + transform: scaleX(1) rotate(-45deg); } + +.md-checkbox-checked .md-checkbox-background { + background-color: #9c27b0; } + +.md-checkbox-indeterminate .md-checkbox-background { + background-color: #9c27b0; } + +.md-checkbox-indeterminate .md-checkbox-checkmark { + opacity: 0; + transform: rotate(45deg); } + +.md-checkbox-indeterminate .md-checkbox-checkmark-path { + stroke-dashoffset: 0; } + +.md-checkbox-indeterminate .md-checkbox-mixedmark { + opacity: 1; + transform: scaleX(1) rotate(0deg); } + +.md-checkbox-unchecked .md-checkbox-background { + background-color: transparent; } + +.md-checkbox-disabled { + cursor: default; } + .md-checkbox-disabled.md-checkbox-checked .md-checkbox-background, .md-checkbox-disabled.md-checkbox-indeterminate .md-checkbox-background { + background-color: #b0b0b0; } + .md-checkbox-disabled:not(.md-checkbox-checked) .md-checkbox-frame { + border-color: #b0b0b0; } + +.md-checkbox-anim-unchecked-checked .md-checkbox-background { + animation: 180ms linear 0s md-checkbox-fade-in-background; } + +.md-checkbox-anim-unchecked-checked .md-checkbox-checkmark-path { + animation: 180ms linear 0s md-checkbox-unchecked-checked-checkmark-path; } + +.md-checkbox-anim-unchecked-indeterminate .md-checkbox-background { + animation: 180ms linear 0s md-checkbox-fade-in-background; } + +.md-checkbox-anim-unchecked-indeterminate .md-checkbox-mixedmark { + animation: 90ms linear 0s md-checkbox-unchecked-indeterminate-mixedmark; } + +.md-checkbox-anim-checked-unchecked .md-checkbox-background { + animation: 180ms linear 0s md-checkbox-fade-out-background; } + +.md-checkbox-anim-checked-unchecked .md-checkbox-checkmark-path { + animation: 90ms linear 0s md-checkbox-checked-unchecked-checkmark-path; } + +.md-checkbox-anim-checked-indeterminate .md-checkbox-checkmark { + animation: 90ms linear 0s md-checkbox-checked-indeterminate-checkmark; } + +.md-checkbox-anim-checked-indeterminate .md-checkbox-mixedmark { + animation: 90ms linear 0s md-checkbox-checked-indeterminate-mixedmark; } + +.md-checkbox-anim-indeterminate-checked .md-checkbox-checkmark { + animation: 500ms linear 0s md-checkbox-indeterminate-checked-checkmark; } + +.md-checkbox-anim-indeterminate-checked .md-checkbox-mixedmark { + animation: 500ms linear 0s md-checkbox-indeterminate-checked-mixedmark; } + +.md-checkbox-anim-indeterminate-unchecked .md-checkbox-background { + animation: 180ms linear 0s md-checkbox-fade-out-background; } + +.md-checkbox-anim-indeterminate-unchecked .md-checkbox-mixedmark { + animation: 300ms linear 0s md-checkbox-indeterminate-unchecked-mixedmark; } + +.md-checkbox-input { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + text-transform: none; + width: 1px; } + +.md-ink-ripple { + border-radius: 50%; + opacity: 0; + height: 48px; + left: 50%; + overflow: hidden; + pointer-events: none; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + transition: opacity ease 0.28s, background-color ease 0.28s; + width: 48px; } + +.md-checkbox-focused .md-ink-ripple { + opacity: 1; + background-color: rgba(156, 39, 176, 0.26); } + +.md-checkbox-disabled .md-ink-ripple { + background-color: #000; } diff --git a/DEBUG-merge/components/checkbox/checkbox.d.ts b/DEBUG-merge/components/checkbox/checkbox.d.ts new file mode 100644 index 000000000000..0ef76a2ee00e --- /dev/null +++ b/DEBUG-merge/components/checkbox/checkbox.d.ts @@ -0,0 +1,98 @@ +import { ElementRef, EventEmitter, Renderer, AfterContentInit } from '@angular/core'; +import { ControlValueAccessor } from '@angular/common'; +export declare class MdCheckboxChange { + source: MdCheckbox; + checked: boolean; +} +/** + * A material design checkbox component. Supports all of the functionality of an HTML5 checkbox, + * and exposes a similar API. An MdCheckbox can be either checked, unchecked, indeterminate, or + * disabled. Note that all additional accessibility attributes are taken care of by the component, + * so there is no need to provide them yourself. However, if you want to omit a label and still + * have the checkbox be accessible, you may supply an [aria-label] input. + * See: https://www.google.com/design/spec/components/selection-controls.html + */ +export declare class MdCheckbox implements AfterContentInit, ControlValueAccessor { + private _renderer; + private _elementRef; + /** + * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will + * take precedence so this may be omitted. + */ + ariaLabel: string; + /** + * Users can specify the `aria-labelledby` attribute which will be forwarded to the input element + */ + ariaLabelledby: string; + /** A unique id for the checkbox. If one is not supplied, it is auto-generated. */ + id: string; + /** ID to be applied to the `input` element */ + inputId: string; + /** Whether or not the checkbox should come before or after the label. */ + align: 'start' | 'end'; + /** + * Whether the checkbox is disabled. When the checkbox is disabled it cannot be interacted with. + * The correct ARIA attributes are applied to denote this to assistive technology. + */ + disabled: boolean; + /** + * The tabindex attribute for the checkbox. Note that when the checkbox is disabled, the attribute + * on the host element will be removed. It will be placed back when the checkbox is re-enabled. + */ + tabindex: number; + /** Name value will be applied to the input element if present */ + name: string; + /** Event emitted when the checkbox's `checked` value changes. */ + change: EventEmitter; + /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */ + onTouched: () => any; + /** Whether the `checked` state has been set to its initial value. */ + private _isInitialized; + private _currentAnimationClass; + private _currentCheckState; + private _checked; + private _indeterminate; + private _changeSubscription; + hasFocus: boolean; + constructor(_renderer: Renderer, _elementRef: ElementRef); + /** + * Whether the checkbox is checked. Note that setting `checked` will immediately set + * `indeterminate` to false. + */ + checked: boolean; + /** TODO: internal */ + ngAfterContentInit(): void; + /** + * Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to + * represent a checkbox with three states, e.g. a checkbox that represents a nested list of + * checkable items. Note that whenever `checked` is set, indeterminate is immediately set to + * false. This differs from the web platform in that indeterminate state on native + * checkboxes is only remove when the user manually checks the checkbox (rather than setting the + * `checked` property programmatically). However, we feel that this behavior is more accommodating + * to the way consumers would envision using this component. + */ + indeterminate: boolean; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + writeValue(value: any): void; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + registerOnChange(fn: any): void; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + registerOnTouched(fn: any): void; + private _transitionCheckState(newState); + private _emitChangeEvent(); + /** + * Toggles the `checked` value between true and false + */ + toggle(): void; + private _getAnimationClassForCheckStateTransition(oldState, newState); +} +export declare const MD_CHECKBOX_DIRECTIVES: typeof MdCheckbox[]; diff --git a/DEBUG-merge/components/checkbox/checkbox.html b/DEBUG-merge/components/checkbox/checkbox.html new file mode 100644 index 000000000000..c1fff754de90 --- /dev/null +++ b/DEBUG-merge/components/checkbox/checkbox.html @@ -0,0 +1,35 @@ + diff --git a/DEBUG-merge/components/checkbox/checkbox.js b/DEBUG-merge/components/checkbox/checkbox.js new file mode 100644 index 000000000000..dbde0c6b9cdb --- /dev/null +++ b/DEBUG-merge/components/checkbox/checkbox.js @@ -0,0 +1,327 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var common_1 = require('@angular/common'); +/** + * Monotonically increasing integer used to auto-generate unique ids for checkbox components. + */ +var nextId = 0; +/** + * Provider Expression that allows md-checkbox to register as a ControlValueAccessor. This allows it + * to support [(ngModel)] and ngControl. + */ +var MD_CHECKBOX_CONTROL_VALUE_ACCESSOR = new core_1.Provider(common_1.NG_VALUE_ACCESSOR, { + useExisting: core_1.forwardRef(function () { return MdCheckbox; }), + multi: true +}); +/** + * Represents the different states that require custom transitions between them. + */ +var TransitionCheckState; +(function (TransitionCheckState) { + /** The initial state of the component before any user interaction. */ + TransitionCheckState[TransitionCheckState["Init"] = 0] = "Init"; + /** The state representing the component when it's becoming checked. */ + TransitionCheckState[TransitionCheckState["Checked"] = 1] = "Checked"; + /** The state representing the component when it's becoming unchecked. */ + TransitionCheckState[TransitionCheckState["Unchecked"] = 2] = "Unchecked"; + /** The state representing the component when it's becoming indeterminate. */ + TransitionCheckState[TransitionCheckState["Indeterminate"] = 3] = "Indeterminate"; +})(TransitionCheckState || (TransitionCheckState = {})); +// A simple change event emitted by the MdCheckbox component. +var MdCheckboxChange = (function () { + function MdCheckboxChange() { + } + return MdCheckboxChange; +}()); +exports.MdCheckboxChange = MdCheckboxChange; +/** + * A material design checkbox component. Supports all of the functionality of an HTML5 checkbox, + * and exposes a similar API. An MdCheckbox can be either checked, unchecked, indeterminate, or + * disabled. Note that all additional accessibility attributes are taken care of by the component, + * so there is no need to provide them yourself. However, if you want to omit a label and still + * have the checkbox be accessible, you may supply an [aria-label] input. + * See: https://www.google.com/design/spec/components/selection-controls.html + */ +var MdCheckbox = (function () { + function MdCheckbox(_renderer, _elementRef) { + this._renderer = _renderer; + this._elementRef = _elementRef; + /** + * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will + * take precedence so this may be omitted. + */ + this.ariaLabel = ''; + /** + * Users can specify the `aria-labelledby` attribute which will be forwarded to the input element + */ + this.ariaLabelledby = null; + /** A unique id for the checkbox. If one is not supplied, it is auto-generated. */ + this.id = "md-checkbox-" + ++nextId; + /** Whether or not the checkbox should come before or after the label. */ + this.align = 'start'; + /** + * Whether the checkbox is disabled. When the checkbox is disabled it cannot be interacted with. + * The correct ARIA attributes are applied to denote this to assistive technology. + */ + this.disabled = false; + /** + * The tabindex attribute for the checkbox. Note that when the checkbox is disabled, the attribute + * on the host element will be removed. It will be placed back when the checkbox is re-enabled. + */ + this.tabindex = 0; + /** Name value will be applied to the input element if present */ + this.name = null; + /** Event emitted when the checkbox's `checked` value changes. */ + this.change = new core_1.EventEmitter(); + /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */ + this.onTouched = function () { }; + /** Whether the `checked` state has been set to its initial value. */ + this._isInitialized = false; + this._currentAnimationClass = ''; + this._currentCheckState = TransitionCheckState.Init; + this._checked = false; + this._indeterminate = false; + this._changeSubscription = null; + this.hasFocus = false; + } + Object.defineProperty(MdCheckbox.prototype, "inputId", { + /** ID to be applied to the `input` element */ + get: function () { + return "input-" + this.id; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdCheckbox.prototype, "checked", { + /** + * Whether the checkbox is checked. Note that setting `checked` will immediately set + * `indeterminate` to false. + */ + get: function () { + return this._checked; + }, + set: function (checked) { + if (checked != this.checked) { + this._indeterminate = false; + this._checked = checked; + this._transitionCheckState(this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked); + // Only fire a change event if this isn't the first time the checked property is ever set. + if (this._isInitialized) { + this._emitChangeEvent(); + } + } + }, + enumerable: true, + configurable: true + }); + /** TODO: internal */ + MdCheckbox.prototype.ngAfterContentInit = function () { + this._isInitialized = true; + }; + Object.defineProperty(MdCheckbox.prototype, "indeterminate", { + /** + * Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to + * represent a checkbox with three states, e.g. a checkbox that represents a nested list of + * checkable items. Note that whenever `checked` is set, indeterminate is immediately set to + * false. This differs from the web platform in that indeterminate state on native + * checkboxes is only remove when the user manually checks the checkbox (rather than setting the + * `checked` property programmatically). However, we feel that this behavior is more accommodating + * to the way consumers would envision using this component. + */ + get: function () { + return this._indeterminate; + }, + set: function (indeterminate) { + this._indeterminate = indeterminate; + if (this._indeterminate) { + this._transitionCheckState(TransitionCheckState.Indeterminate); + } + else { + this._transitionCheckState(this.checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked); + } + }, + enumerable: true, + configurable: true + }); + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + MdCheckbox.prototype.writeValue = function (value) { + this.checked = !!value; + }; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + MdCheckbox.prototype.registerOnChange = function (fn) { + if (this._changeSubscription) { + this._changeSubscription.unsubscribe(); + } + this._changeSubscription = this.change.subscribe(fn); + }; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + MdCheckbox.prototype.registerOnTouched = function (fn) { + this.onTouched = fn; + }; + MdCheckbox.prototype._transitionCheckState = function (newState) { + var oldState = this._currentCheckState; + var renderer = this._renderer; + var elementRef = this._elementRef; + if (oldState === newState) { + return; + } + if (this._currentAnimationClass.length > 0) { + renderer.setElementClass(elementRef.nativeElement, this._currentAnimationClass, false); + } + this._currentAnimationClass = this._getAnimationClassForCheckStateTransition(oldState, newState); + this._currentCheckState = newState; + if (this._currentAnimationClass.length > 0) { + renderer.setElementClass(elementRef.nativeElement, this._currentAnimationClass, true); + } + }; + MdCheckbox.prototype._emitChangeEvent = function () { + var event = new MdCheckboxChange(); + event.source = this; + event.checked = this.checked; + this.change.emit(event); + }; + /** + * Informs the component when the input has focus so that we can style accordingly + * @internal + */ + MdCheckbox.prototype.onInputFocus = function () { + this.hasFocus = true; + }; + /** + * Informs the component when we lose focus in order to style accordingly + * @internal + */ + MdCheckbox.prototype.onInputBlur = function () { + this.hasFocus = false; + this.onTouched(); + }; + /** + * Toggles the `checked` value between true and false + */ + MdCheckbox.prototype.toggle = function () { + this.checked = !this.checked; + }; + /** + * Event handler for checkbox input element. + * Toggles checked state if element is not disabled. + * @param event + * @internal + */ + MdCheckbox.prototype.onInteractionEvent = function (event) { + // We always have to stop propagation on the change event. + // Otherwise the change event, from the input element, will bubble up and + // emit its event object to the `change` output. + event.stopPropagation(); + if (!this.disabled) { + this.toggle(); + } + }; + MdCheckbox.prototype._getAnimationClassForCheckStateTransition = function (oldState, newState) { + var animSuffix; + switch (oldState) { + case TransitionCheckState.Init: + // Handle edge case where user interacts with checkbox that does not have [(ngModel)] or + // [checked] bound to it. + if (newState === TransitionCheckState.Checked) { + animSuffix = 'unchecked-checked'; + } + else { + return ''; + } + break; + case TransitionCheckState.Unchecked: + animSuffix = newState === TransitionCheckState.Checked ? + 'unchecked-checked' : 'unchecked-indeterminate'; + break; + case TransitionCheckState.Checked: + animSuffix = newState === TransitionCheckState.Unchecked ? + 'checked-unchecked' : 'checked-indeterminate'; + break; + case TransitionCheckState.Indeterminate: + animSuffix = newState === TransitionCheckState.Checked ? + 'indeterminate-checked' : 'indeterminate-unchecked'; + } + return "md-checkbox-anim-" + animSuffix; + }; + __decorate([ + core_1.Input('aria-label'), + __metadata('design:type', String) + ], MdCheckbox.prototype, "ariaLabel", void 0); + __decorate([ + core_1.Input('aria-labelledby'), + __metadata('design:type', String) + ], MdCheckbox.prototype, "ariaLabelledby", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdCheckbox.prototype, "id", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdCheckbox.prototype, "align", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Boolean) + ], MdCheckbox.prototype, "disabled", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Number) + ], MdCheckbox.prototype, "tabindex", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdCheckbox.prototype, "name", void 0); + __decorate([ + core_1.Output(), + __metadata('design:type', core_1.EventEmitter) + ], MdCheckbox.prototype, "change", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdCheckbox.prototype, "checked", null); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdCheckbox.prototype, "indeterminate", null); + MdCheckbox = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-checkbox', + templateUrl: 'checkbox.html', + styleUrls: ['checkbox.css'], + host: { + '[class.md-checkbox-indeterminate]': 'indeterminate', + '[class.md-checkbox-checked]': 'checked', + '[class.md-checkbox-disabled]': 'disabled', + '[class.md-checkbox-align-end]': 'align == "end"', + '[class.md-checkbox-focused]': 'hasFocus', + }, + providers: [MD_CHECKBOX_CONTROL_VALUE_ACCESSOR], + encapsulation: core_1.ViewEncapsulation.None, + changeDetection: core_1.ChangeDetectionStrategy.OnPush + }), + __metadata('design:paramtypes', [core_1.Renderer, core_1.ElementRef]) + ], MdCheckbox); + return MdCheckbox; +}()); +exports.MdCheckbox = MdCheckbox; +exports.MD_CHECKBOX_DIRECTIVES = [MdCheckbox]; +//# sourceMappingURL=../../../../components/checkbox/checkbox.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/checkbox/checkbox.js.map b/DEBUG-merge/components/checkbox/checkbox.js.map new file mode 100644 index 000000000000..400b33137c46 --- /dev/null +++ b/DEBUG-merge/components/checkbox/checkbox.js.map @@ -0,0 +1 @@ +{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/demo-app/components/checkbox/checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n Provider,\n Renderer,\n ViewEncapsulation,\n forwardRef,\n AfterContentInit\n} from '@angular/core';\nimport {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/common';\n\n/**\n * Monotonically increasing integer used to auto-generate unique ids for checkbox components.\n */\nlet nextId = 0;\n\n/**\n * Provider Expression that allows md-checkbox to register as a ControlValueAccessor. This allows it\n * to support [(ngModel)] and ngControl.\n */\nconst MD_CHECKBOX_CONTROL_VALUE_ACCESSOR = new Provider(\n NG_VALUE_ACCESSOR, {\n useExisting: forwardRef(() => MdCheckbox),\n multi: true\n });\n\n/**\n * Represents the different states that require custom transitions between them.\n */\nenum TransitionCheckState {\n /** The initial state of the component before any user interaction. */\n Init,\n /** The state representing the component when it's becoming checked. */\n Checked,\n /** The state representing the component when it's becoming unchecked. */\n Unchecked,\n /** The state representing the component when it's becoming indeterminate. */\n Indeterminate\n}\n\n// A simple change event emitted by the MdCheckbox component.\nexport class MdCheckboxChange {\n source: MdCheckbox;\n checked: boolean;\n}\n\n/**\n * A material design checkbox component. Supports all of the functionality of an HTML5 checkbox,\n * and exposes a similar API. An MdCheckbox can be either checked, unchecked, indeterminate, or\n * disabled. Note that all additional accessibility attributes are taken care of by the component,\n * so there is no need to provide them yourself. However, if you want to omit a label and still\n * have the checkbox be accessible, you may supply an [aria-label] input.\n * See: https://www.google.com/design/spec/components/selection-controls.html\n */\n@Component({\n moduleId: module.id,\n selector: 'md-checkbox',\n templateUrl: 'checkbox.html',\n styleUrls: ['checkbox.css'],\n host: {\n '[class.md-checkbox-indeterminate]': 'indeterminate',\n '[class.md-checkbox-checked]': 'checked',\n '[class.md-checkbox-disabled]': 'disabled',\n '[class.md-checkbox-align-end]': 'align == \"end\"',\n '[class.md-checkbox-focused]': 'hasFocus',\n },\n providers: [MD_CHECKBOX_CONTROL_VALUE_ACCESSOR],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MdCheckbox implements AfterContentInit, ControlValueAccessor {\n /**\n * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will\n * take precedence so this may be omitted.\n */\n @Input('aria-label') ariaLabel: string = '';\n\n /**\n * Users can specify the `aria-labelledby` attribute which will be forwarded to the input element\n */\n @Input('aria-labelledby') ariaLabelledby: string = null;\n\n /** A unique id for the checkbox. If one is not supplied, it is auto-generated. */\n @Input() id: string = `md-checkbox-${++nextId}`;\n\n /** ID to be applied to the `input` element */\n get inputId(): string {\n return `input-${this.id}`;\n }\n\n /** Whether or not the checkbox should come before or after the label. */\n @Input() align: 'start' | 'end' = 'start';\n\n /**\n * Whether the checkbox is disabled. When the checkbox is disabled it cannot be interacted with.\n * The correct ARIA attributes are applied to denote this to assistive technology.\n */\n @Input() disabled: boolean = false;\n\n /**\n * The tabindex attribute for the checkbox. Note that when the checkbox is disabled, the attribute\n * on the host element will be removed. It will be placed back when the checkbox is re-enabled.\n */\n @Input() tabindex: number = 0;\n\n /** Name value will be applied to the input element if present */\n @Input() name: string = null;\n\n /** Event emitted when the checkbox's `checked` value changes. */\n @Output() change: EventEmitter = new EventEmitter();\n\n /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */\n onTouched: () => any = () => {};\n\n /** Whether the `checked` state has been set to its initial value. */\n private _isInitialized: boolean = false;\n\n private _currentAnimationClass: string = '';\n\n private _currentCheckState: TransitionCheckState = TransitionCheckState.Init;\n\n private _checked: boolean = false;\n\n private _indeterminate: boolean = false;\n\n private _changeSubscription: {unsubscribe: () => any} = null;\n\n hasFocus: boolean = false;\n\n constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}\n\n /**\n * Whether the checkbox is checked. Note that setting `checked` will immediately set\n * `indeterminate` to false.\n */\n @Input() get checked() {\n return this._checked;\n }\n\n set checked(checked: boolean) {\n if (checked != this.checked) {\n this._indeterminate = false;\n this._checked = checked;\n this._transitionCheckState(\n this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);\n\n // Only fire a change event if this isn't the first time the checked property is ever set.\n if (this._isInitialized) {\n this._emitChangeEvent();\n }\n }\n }\n\n /** TODO: internal */\n ngAfterContentInit() {\n this._isInitialized = true;\n }\n\n /**\n * Whether the checkbox is indeterminate. This is also known as \"mixed\" mode and can be used to\n * represent a checkbox with three states, e.g. a checkbox that represents a nested list of\n * checkable items. Note that whenever `checked` is set, indeterminate is immediately set to\n * false. This differs from the web platform in that indeterminate state on native\n * checkboxes is only remove when the user manually checks the checkbox (rather than setting the\n * `checked` property programmatically). However, we feel that this behavior is more accommodating\n * to the way consumers would envision using this component.\n */\n @Input() get indeterminate() {\n return this._indeterminate;\n }\n\n set indeterminate(indeterminate: boolean) {\n this._indeterminate = indeterminate;\n if (this._indeterminate) {\n this._transitionCheckState(TransitionCheckState.Indeterminate);\n } else {\n this._transitionCheckState(\n this.checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);\n }\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n * TODO: internal\n */\n writeValue(value: any) {\n this.checked = !!value;\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n * TODO: internal\n */\n registerOnChange(fn: any) {\n if (this._changeSubscription) {\n this._changeSubscription.unsubscribe();\n }\n this._changeSubscription = <{unsubscribe: () => any}>this.change.subscribe(fn);\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n * TODO: internal\n */\n registerOnTouched(fn: any) {\n this.onTouched = fn;\n }\n\n private _transitionCheckState(newState: TransitionCheckState) {\n let oldState = this._currentCheckState;\n let renderer = this._renderer;\n let elementRef = this._elementRef;\n\n if (oldState === newState) {\n return;\n }\n if (this._currentAnimationClass.length > 0) {\n renderer.setElementClass(elementRef.nativeElement, this._currentAnimationClass, false);\n }\n\n this._currentAnimationClass = this._getAnimationClassForCheckStateTransition(\n oldState, newState);\n this._currentCheckState = newState;\n\n if (this._currentAnimationClass.length > 0) {\n renderer.setElementClass(elementRef.nativeElement, this._currentAnimationClass, true);\n }\n }\n\n private _emitChangeEvent() {\n let event = new MdCheckboxChange();\n event.source = this;\n event.checked = this.checked;\n\n this.change.emit(event);\n }\n\n /**\n * Informs the component when the input has focus so that we can style accordingly\n * @internal\n */\n onInputFocus() {\n this.hasFocus = true;\n }\n\n /**\n * Informs the component when we lose focus in order to style accordingly\n * @internal\n */\n onInputBlur() {\n this.hasFocus = false;\n this.onTouched();\n }\n\n /**\n * Toggles the `checked` value between true and false\n */\n toggle() {\n this.checked = !this.checked;\n }\n\n /**\n * Event handler for checkbox input element.\n * Toggles checked state if element is not disabled.\n * @param event\n * @internal\n */\n onInteractionEvent(event: Event) {\n // We always have to stop propagation on the change event.\n // Otherwise the change event, from the input element, will bubble up and\n // emit its event object to the `change` output.\n event.stopPropagation();\n\n if (!this.disabled) {\n this.toggle();\n }\n }\n\n private _getAnimationClassForCheckStateTransition(\n oldState: TransitionCheckState, newState: TransitionCheckState): string {\n var animSuffix: string;\n\n switch (oldState) {\n case TransitionCheckState.Init:\n // Handle edge case where user interacts with checkbox that does not have [(ngModel)] or\n // [checked] bound to it.\n if (newState === TransitionCheckState.Checked) {\n animSuffix = 'unchecked-checked';\n } else {\n return '';\n }\n break;\n case TransitionCheckState.Unchecked:\n animSuffix = newState === TransitionCheckState.Checked ?\n 'unchecked-checked' : 'unchecked-indeterminate';\n break;\n case TransitionCheckState.Checked:\n animSuffix = newState === TransitionCheckState.Unchecked ?\n 'checked-unchecked' : 'checked-indeterminate';\n break;\n case TransitionCheckState.Indeterminate:\n animSuffix = newState === TransitionCheckState.Checked ?\n 'indeterminate-checked' : 'indeterminate-unchecked';\n }\n\n return `md-checkbox-anim-${animSuffix}`;\n }\n}\n\nexport const MD_CHECKBOX_DIRECTIVES = [MdCheckbox];\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/checkbox/package.json b/DEBUG-merge/components/checkbox/package.json new file mode 100644 index 000000000000..d62dbba0995d --- /dev/null +++ b/DEBUG-merge/components/checkbox/package.json @@ -0,0 +1,26 @@ +{ + "name": "@angular2-material/checkbox", + "version": "2.0.0-alpha.5-2", + "description": "Angular 2 Material checkbox", + "main": "./checkbox.js", + "typings": "./checkbox.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components", + "checkbox" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "@angular2-material/core": "2.0.0-alpha.5-2" + } +} diff --git a/DEBUG-merge/components/grid-list/README.md b/DEBUG-merge/components/grid-list/README.md new file mode 100644 index 000000000000..2562565dd788 --- /dev/null +++ b/DEBUG-merge/components/grid-list/README.md @@ -0,0 +1,115 @@ +# md-grid-list + +`md-grid-list` is an alternative list view that arranges cells into grid-based layout. +See Material Design spec [here](https://www.google.com/design/spec/components/grid-lists.html). + +## Usage + +### Simple grid list + +To use `md-grid-list`, first import the grid list directives and add them to your component's directives +array: + +```javascript +@Component({ + ... + directives: [MD_GRID_LIST_DIRECTIVES] +}) +``` + +In your template, create an `md-grid-list` element and specify the number of columns you want for +your grid using the `cols` property (this is the only mandatory attribute). + +You can define each tile using an `md-grid-tile` element, passing any tile content between its tags. + +Tiles are greedily placed in the first position of the grid that fits them, so row count depends on +how many tiles can fit in each row, given the col count and the colspan/rowspan of each tile. + +```html + + One + Two + Three + Four + +``` + +Output: + + + +## Grid list config + +####`cols` + +The `cols` property controls the number of columns displayed in your grid. It must be set or the +grid list will not be able to generate your layout. + +Ex: `...` + +Default: There is no reasonable default value for this, so if it is unspecified, the grid list will +throw an error. + +####`rowHeight` + +Row height for the list can be calculated in three ways: + +1. **Fixed height**: The height can be in `px`, `em`, or `rem`. If no units are specified, `px` +units are assumed. + + Ex: `...` + +2. **Ratio**: This ratio is width:height, and must be passed in with a colon, not a decimal. + + Ex: `...`. + +3. **Fit**: This mode automatically divides the available height by the number of rows. Please note +the height of the grid-list or its container must be set. + + Ex: `...` + +Defaults to a 1:1 ratio of width:height. + +####`gutterSize` + +Gutter size can be set to any `px`, `em`, or `rem` value with the `gutterSize` property. If no +units are specified, `px` units are assumed. + +Ex: `...` + +Defaults to `1px`. + +## Grid tile config + +You can set the rowspan and colspan of each tile individually, using the `rowspan` and `colspan` +properties. If not set, they both default to `1`. + +```html + + + {{tile.text}} + + +``` + +```javascript +... +export class MyComp { + tiles: any[] = [ + {text: 'One', cols: 3, rows: 1, color: 'lightblue'}, + {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'}, + {text: 'Three', cols: 1, rows: 1, color: 'lightpink'}, + {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'}, + ]; +} +``` + +Output: + + + +## TODO + +- Grid tile headers and footers +- Responsive sizing support \ No newline at end of file diff --git a/DEBUG-merge/components/grid-list/grid-list-errors.d.ts b/DEBUG-merge/components/grid-list/grid-list-errors.d.ts new file mode 100644 index 000000000000..21d1c759a538 --- /dev/null +++ b/DEBUG-merge/components/grid-list/grid-list-errors.d.ts @@ -0,0 +1,19 @@ +import { MdError } from '@angular2-material/core/errors/error'; +/** + * Exception thrown when cols property is missing from grid-list + */ +export declare class MdGridListColsError extends MdError { + constructor(); +} +/** + * Exception thrown when a tile's colspan is longer than the number of cols in list + */ +export declare class MdGridTileTooWideError extends MdError { + constructor(cols: number, listLength: number); +} +/** + * Exception thrown when an invalid ratio is passed in as a rowHeight + */ +export declare class MdGridListBadRatioError extends MdError { + constructor(value: string); +} diff --git a/DEBUG-merge/components/grid-list/grid-list-errors.js b/DEBUG-merge/components/grid-list/grid-list-errors.js new file mode 100644 index 000000000000..fd285b815c2d --- /dev/null +++ b/DEBUG-merge/components/grid-list/grid-list-errors.js @@ -0,0 +1,41 @@ +"use strict"; +var __extends = (this && this.__extends) || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +}; +var error_1 = require('@angular2-material/core/errors/error'); +/** + * Exception thrown when cols property is missing from grid-list + */ +var MdGridListColsError = (function (_super) { + __extends(MdGridListColsError, _super); + function MdGridListColsError() { + _super.call(this, "md-grid-list: must pass in number of columns. Example: "); + } + return MdGridListColsError; +}(error_1.MdError)); +exports.MdGridListColsError = MdGridListColsError; +/** + * Exception thrown when a tile's colspan is longer than the number of cols in list + */ +var MdGridTileTooWideError = (function (_super) { + __extends(MdGridTileTooWideError, _super); + function MdGridTileTooWideError(cols, listLength) { + _super.call(this, "md-grid-list: tile with colspan " + cols + " is wider than grid with cols=\"" + listLength + "\"."); + } + return MdGridTileTooWideError; +}(error_1.MdError)); +exports.MdGridTileTooWideError = MdGridTileTooWideError; +/** + * Exception thrown when an invalid ratio is passed in as a rowHeight + */ +var MdGridListBadRatioError = (function (_super) { + __extends(MdGridListBadRatioError, _super); + function MdGridListBadRatioError(value) { + _super.call(this, "md-grid-list: invalid ratio given for row-height: \"" + value + "\""); + } + return MdGridListBadRatioError; +}(error_1.MdError)); +exports.MdGridListBadRatioError = MdGridListBadRatioError; +//# sourceMappingURL=../../../../components/grid-list/grid-list-errors.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/grid-list/grid-list-errors.js.map b/DEBUG-merge/components/grid-list/grid-list-errors.js.map new file mode 100644 index 000000000000..3a12659bb7ee --- /dev/null +++ b/DEBUG-merge/components/grid-list/grid-list-errors.js.map @@ -0,0 +1 @@ +{"version":3,"file":"grid-list-errors.js","sourceRoot":"","sources":["../../src/demo-app/components/grid-list/grid-list-errors.ts"],"names":[],"mappings":";;;;;;AAAA,sBAAsB,sCAAsC,CAAC,CAAA;AAE7D;;GAEG;AACH;IAAyC,uCAAO;IAC9C;QACE,kBAAM,kFAAgF,CAAC,CAAC;IAC1F,CAAC;IACH,0BAAC;AAAD,CAAC,AAJD,CAAyC,eAAO,GAI/C;AAJY,2BAAmB,sBAI/B,CAAA;AAED;;GAEG;AACH;IAA4C,0CAAO;IACjD,gCAAY,IAAY,EAAE,UAAkB;QAC1C,kBAAM,qCAAmC,IAAI,wCAAkC,UAAU,QAAI,CAAC,CAAC;IACjG,CAAC;IACH,6BAAC;AAAD,CAAC,AAJD,CAA4C,eAAO,GAIlD;AAJY,8BAAsB,yBAIlC,CAAA;AAED;;GAEG;AACH;IAA6C,2CAAO;IAClD,iCAAY,KAAa;QACvB,kBAAM,yDAAsD,KAAK,OAAG,CAAC,CAAC;IACxE,CAAC;IACH,8BAAC;AAAD,CAAC,AAJD,CAA6C,eAAO,GAInD;AAJY,+BAAuB,0BAInC,CAAA","sourcesContent":["import {MdError} from '@angular2-material/core/errors/error';\n\n/**\n * Exception thrown when cols property is missing from grid-list\n */\nexport class MdGridListColsError extends MdError {\n constructor() {\n super(`md-grid-list: must pass in number of columns. Example: `);\n }\n}\n\n/**\n * Exception thrown when a tile's colspan is longer than the number of cols in list\n */\nexport class MdGridTileTooWideError extends MdError {\n constructor(cols: number, listLength: number) {\n super(`md-grid-list: tile with colspan ${cols} is wider than grid with cols=\"${listLength}\".`);\n }\n}\n\n/**\n * Exception thrown when an invalid ratio is passed in as a rowHeight\n */\nexport class MdGridListBadRatioError extends MdError {\n constructor(value: string) {\n super(`md-grid-list: invalid ratio given for row-height: \"${value}\"`);\n }\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/grid-list/grid-list-measure.d.ts b/DEBUG-merge/components/grid-list/grid-list-measure.d.ts new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/DEBUG-merge/components/grid-list/grid-list-measure.js b/DEBUG-merge/components/grid-list/grid-list-measure.js new file mode 100644 index 000000000000..ef26dd3e5fce --- /dev/null +++ b/DEBUG-merge/components/grid-list/grid-list-measure.js @@ -0,0 +1,18 @@ +"use strict"; +/** + * Converts values into strings. Falsy values become empty strings. + * @internal + */ +function coerceToString(value) { + return "" + (value || ''); +} +exports.coerceToString = coerceToString; +/** + * Converts a value that might be a string into a number. + * @internal + */ +function coerceToNumber(value) { + return typeof value === 'string' ? parseInt(value, 10) : value; +} +exports.coerceToNumber = coerceToNumber; +//# sourceMappingURL=../../../../components/grid-list/grid-list-measure.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/grid-list/grid-list-measure.js.map b/DEBUG-merge/components/grid-list/grid-list-measure.js.map new file mode 100644 index 000000000000..f6e2743aa5ea --- /dev/null +++ b/DEBUG-merge/components/grid-list/grid-list-measure.js.map @@ -0,0 +1 @@ +{"version":3,"file":"grid-list-measure.js","sourceRoot":"","sources":["../../src/demo-app/components/grid-list/grid-list-measure.ts"],"names":[],"mappings":";AACA;;;GAGG;AACH,wBAA+B,KAAsB;IACnD,MAAM,CAAC,MAAG,KAAK,IAAI,EAAE,CAAE,CAAC;AAC1B,CAAC;AAFe,sBAAc,iBAE7B,CAAA;AAED;;;GAGG;AACH,wBAA+B,KAAsB;IACnD,MAAM,CAAC,OAAO,KAAK,KAAK,QAAQ,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC;AACjE,CAAC;AAFe,sBAAc,iBAE7B,CAAA","sourcesContent":["\n/**\n * Converts values into strings. Falsy values become empty strings.\n * @internal\n */\nexport function coerceToString(value: string | number): string {\n return `${value || ''}`;\n}\n\n/**\n * Converts a value that might be a string into a number.\n * @internal\n */\nexport function coerceToNumber(value: string | number): number {\n return typeof value === 'string' ? parseInt(value, 10) : value;\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/grid-list/grid-list.css b/DEBUG-merge/components/grid-list/grid-list.css new file mode 100644 index 000000000000..ff693d796870 --- /dev/null +++ b/DEBUG-merge/components/grid-list/grid-list.css @@ -0,0 +1,90 @@ +/** + * This mixin provides all md-line styles, changing secondary font size + * based on whether the list is in dense mode. + */ +/** + * This mixin provides base styles for the wrapper around md-line + * elements in a list. + */ +/** + * This mixin normalizes default element styles, e.g. font weight for heading text. + */ +/* height of tile header or footer if it has one line */ +/* height of tile header or footer if it has two lines */ +/* side padding for text in tile headers and footers */ +/* font styles for text in tile headers and footers */ +md-grid-list { + display: block; + position: relative; } + +md-grid-tile { + display: block; + position: absolute; } + md-grid-tile figure { + display: flex; + position: absolute; + align-items: center; + justify-content: center; + height: 100%; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: 0; + margin: 0; } + md-grid-tile md-grid-tile-header, + md-grid-tile md-grid-tile-footer { + display: flex; + align-items: center; + height: 48px; + color: #fff; + background: rgba(0, 0, 0, 0.18); + overflow: hidden; + padding: 0 16px; + font-size: 16px; + position: absolute; + left: 0; + right: 0; } + md-grid-tile md-grid-tile-header [md-line], + md-grid-tile md-grid-tile-footer [md-line] { + display: block; + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; + box-sizing: border-box; } + md-grid-tile md-grid-tile-header [md-line]:nth-child(n+2), + md-grid-tile md-grid-tile-footer [md-line]:nth-child(n+2) { + font-size: 12px; } + md-grid-tile md-grid-tile-header > *, + md-grid-tile md-grid-tile-footer > * { + margin: 0; + padding: 0; + font-weight: normal; + font-size: inherit; } + md-grid-tile md-grid-tile-header.md-2-line, + md-grid-tile md-grid-tile-footer.md-2-line { + height: 68px; } + md-grid-tile .md-grid-list-text { + display: flex; + flex-direction: column; + width: 100%; + box-sizing: border-box; + overflow: hidden; } + md-grid-tile .md-grid-list-text > * { + margin: 0; + padding: 0; + font-weight: normal; + font-size: inherit; } + md-grid-tile .md-grid-list-text:empty { + display: none; } + md-grid-tile md-grid-tile-header { + top: 0; } + md-grid-tile md-grid-tile-footer { + bottom: 0; } + md-grid-tile [md-grid-avatar] { + padding-right: 16px; } + [dir='rtl'] md-grid-tile [md-grid-avatar] { + padding-right: 0; + padding-left: 16px; } + md-grid-tile [md-grid-avatar]:empty { + display: none; } diff --git a/DEBUG-merge/components/grid-list/grid-list.d.ts b/DEBUG-merge/components/grid-list/grid-list.d.ts new file mode 100644 index 000000000000..1bd68ad1d26c --- /dev/null +++ b/DEBUG-merge/components/grid-list/grid-list.d.ts @@ -0,0 +1,44 @@ +import { AfterContentChecked, OnInit, Renderer, ElementRef } from '@angular/core'; +import { Dir } from '@angular2-material/core/rtl/dir'; +export declare class MdGridList implements OnInit, AfterContentChecked { + private _renderer; + private _element; + private _dir; + /** Number of columns being rendered. */ + private _cols; + /** + * Row height value passed in by user. This can be one of three types: + * - Number value (ex: "100px"): sets a fixed row height to that value + * - Ratio value (ex: "4:3"): sets the row height based on width:height ratio + * - "Fit" mode (ex: "fit"): sets the row height to total height divided by number of rows + */ + private _rowHeight; + /** The amount of space between tiles. This will be something like '5px' or '2em'. */ + private _gutter; + /** Sets position and size styles for a tile */ + private _tileStyler; + /** Query list of tiles that are being rendered. */ + private _tiles; + constructor(_renderer: Renderer, _element: ElementRef, _dir: Dir); + cols: any; + gutterSize: any; + /** Set internal representation of row height from the user-provided value. */ + rowHeight: string | number; + /** TODO: internal */ + ngOnInit(): void; + /** + * The layout calculation is fairly cheap if nothing changes, so there's little cost + * to run it frequently. + * TODO: internal + */ + ngAfterContentChecked(): void; + /** Throw a friendly error if cols property is missing */ + private _checkCols(); + /** Default to equal width:height if rowHeight property is missing */ + private _checkRowHeight(); + /** Creates correct Tile Styler subtype based on rowHeight passed in by user */ + private _setTileStyler(); + /** Computes and applies the size and position for all children grid tiles. */ + private _layoutTiles(); +} +export declare const MD_GRID_LIST_DIRECTIVES: any[]; diff --git a/DEBUG-merge/components/grid-list/grid-list.html b/DEBUG-merge/components/grid-list/grid-list.html new file mode 100644 index 000000000000..68ebf7c55c5f --- /dev/null +++ b/DEBUG-merge/components/grid-list/grid-list.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/DEBUG-merge/components/grid-list/grid-list.js b/DEBUG-merge/components/grid-list/grid-list.js new file mode 100644 index 000000000000..1f6cb42e9878 --- /dev/null +++ b/DEBUG-merge/components/grid-list/grid-list.js @@ -0,0 +1,154 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var __param = (this && this.__param) || function (paramIndex, decorator) { + return function (target, key) { decorator(target, key, paramIndex); } +}; +var core_1 = require('@angular/core'); +var grid_tile_1 = require('./grid-tile'); +var tile_coordinator_1 = require('./tile-coordinator'); +var tile_styler_1 = require('./tile-styler'); +var grid_list_errors_1 = require('./grid-list-errors'); +var dir_1 = require('@angular2-material/core/rtl/dir'); +var line_1 = require('@angular2-material/core/line/line'); +var grid_list_measure_1 = require('./grid-list-measure'); +// TODO(kara): Conditional (responsive) column count / row size. +// TODO(kara): Re-layout on window resize / media change (debounced). +// TODO(kara): gridTileHeader and gridTileFooter. +var MD_FIT_MODE = 'fit'; +var MdGridList = (function () { + function MdGridList(_renderer, _element, _dir) { + this._renderer = _renderer; + this._element = _element; + this._dir = _dir; + /** The amount of space between tiles. This will be something like '5px' or '2em'. */ + this._gutter = '1px'; + } + Object.defineProperty(MdGridList.prototype, "cols", { + get: function () { + return this._cols; + }, + set: function (value) { + this._cols = grid_list_measure_1.coerceToNumber(value); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdGridList.prototype, "gutterSize", { + get: function () { + return this._gutter; + }, + set: function (value) { + this._gutter = grid_list_measure_1.coerceToString(value); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdGridList.prototype, "rowHeight", { + /** Set internal representation of row height from the user-provided value. */ + set: function (value) { + this._rowHeight = grid_list_measure_1.coerceToString(value); + this._setTileStyler(); + }, + enumerable: true, + configurable: true + }); + /** TODO: internal */ + MdGridList.prototype.ngOnInit = function () { + this._checkCols(); + this._checkRowHeight(); + }; + /** + * The layout calculation is fairly cheap if nothing changes, so there's little cost + * to run it frequently. + * TODO: internal + */ + MdGridList.prototype.ngAfterContentChecked = function () { + this._layoutTiles(); + }; + /** Throw a friendly error if cols property is missing */ + MdGridList.prototype._checkCols = function () { + if (!this.cols) { + throw new grid_list_errors_1.MdGridListColsError(); + } + }; + /** Default to equal width:height if rowHeight property is missing */ + MdGridList.prototype._checkRowHeight = function () { + if (!this._rowHeight) { + this._tileStyler = new tile_styler_1.RatioTileStyler('1:1'); + } + }; + /** Creates correct Tile Styler subtype based on rowHeight passed in by user */ + MdGridList.prototype._setTileStyler = function () { + if (this._rowHeight === MD_FIT_MODE) { + this._tileStyler = new tile_styler_1.FitTileStyler(); + } + else if (this._rowHeight && this._rowHeight.match(/:/g)) { + this._tileStyler = new tile_styler_1.RatioTileStyler(this._rowHeight); + } + else { + this._tileStyler = new tile_styler_1.FixedTileStyler(this._rowHeight); + } + }; + /** Computes and applies the size and position for all children grid tiles. */ + MdGridList.prototype._layoutTiles = function () { + var tiles = this._tiles.toArray(); + var tracker = new tile_coordinator_1.TileCoordinator(this.cols, tiles); + var direction = this._dir ? this._dir.value : 'ltr'; + this._tileStyler.init(this.gutterSize, tracker, this.cols, direction); + for (var i = 0; i < tiles.length; i++) { + var pos = tracker.positions[i]; + var tile = tiles[i]; + this._tileStyler.setStyle(tile, pos.row, pos.col); + } + this.setListStyle(this._tileStyler.getComputedHeight()); + }; + /** + * Sets style on the main grid-list element, given the style name and value. + * @internal + */ + MdGridList.prototype.setListStyle = function (style) { + if (style) { + this._renderer.setElementStyle(this._element.nativeElement, style[0], style[1]); + } + }; + __decorate([ + core_1.ContentChildren(grid_tile_1.MdGridTile), + __metadata('design:type', core_1.QueryList) + ], MdGridList.prototype, "_tiles", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdGridList.prototype, "cols", null); + __decorate([ + core_1.Input('gutterSize'), + __metadata('design:type', Object) + ], MdGridList.prototype, "gutterSize", null); + __decorate([ + core_1.Input(), + __metadata('design:type', Object), + __metadata('design:paramtypes', [Object]) + ], MdGridList.prototype, "rowHeight", null); + MdGridList = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-grid-list', + templateUrl: 'grid-list.html', + styleUrls: ['grid-list.css'], + encapsulation: core_1.ViewEncapsulation.None, + }), + __param(2, core_1.Optional()), + __metadata('design:paramtypes', [core_1.Renderer, core_1.ElementRef, dir_1.Dir]) + ], MdGridList); + return MdGridList; +}()); +exports.MdGridList = MdGridList; +exports.MD_GRID_LIST_DIRECTIVES = [MdGridList, grid_tile_1.MdGridTile, line_1.MdLine, grid_tile_1.MdGridTileText]; +//# sourceMappingURL=../../../../components/grid-list/grid-list.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/grid-list/grid-list.js.map b/DEBUG-merge/components/grid-list/grid-list.js.map new file mode 100644 index 000000000000..6c2fed300c06 --- /dev/null +++ b/DEBUG-merge/components/grid-list/grid-list.js.map @@ -0,0 +1 @@ +{"version":3,"file":"grid-list.js","sourceRoot":"","sources":["../../src/demo-app/components/grid-list/grid-list.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ViewEncapsulation,\n AfterContentChecked,\n OnInit,\n Input,\n ContentChildren,\n QueryList,\n Renderer,\n ElementRef,\n Optional\n} from '@angular/core';\nimport {MdGridTile, MdGridTileText} from './grid-tile';\nimport {TileCoordinator} from './tile-coordinator';\nimport {\n TileStyler,\n FitTileStyler,\n RatioTileStyler,\n FixedTileStyler\n} from './tile-styler';\nimport {MdGridListColsError} from './grid-list-errors';\nimport {Dir} from '@angular2-material/core/rtl/dir';\nimport {MdLine} from '@angular2-material/core/line/line';\nimport {coerceToString, coerceToNumber} from './grid-list-measure';\n\n// TODO(kara): Conditional (responsive) column count / row size.\n// TODO(kara): Re-layout on window resize / media change (debounced).\n// TODO(kara): gridTileHeader and gridTileFooter.\n\nconst MD_FIT_MODE = 'fit';\n\n@Component({\n moduleId: module.id,\n selector: 'md-grid-list',\n templateUrl: 'grid-list.html',\n styleUrls: ['grid-list.css'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class MdGridList implements OnInit, AfterContentChecked {\n /** Number of columns being rendered. */\n private _cols: number;\n\n /**\n * Row height value passed in by user. This can be one of three types:\n * - Number value (ex: \"100px\"): sets a fixed row height to that value\n * - Ratio value (ex: \"4:3\"): sets the row height based on width:height ratio\n * - \"Fit\" mode (ex: \"fit\"): sets the row height to total height divided by number of rows\n */\n private _rowHeight: string;\n\n /** The amount of space between tiles. This will be something like '5px' or '2em'. */\n private _gutter: string = '1px';\n\n /** Sets position and size styles for a tile */\n private _tileStyler: TileStyler;\n\n /** Query list of tiles that are being rendered. */\n @ContentChildren(MdGridTile) private _tiles: QueryList;\n\n constructor(\n private _renderer: Renderer,\n private _element: ElementRef,\n @Optional() private _dir: Dir) {}\n\n @Input()\n get cols() {\n return this._cols;\n }\n\n set cols(value: any) {\n this._cols = coerceToNumber(value);\n }\n\n @Input('gutterSize')\n get gutterSize() {\n return this._gutter;\n }\n\n set gutterSize(value: any) {\n this._gutter = coerceToString(value);\n }\n\n /** Set internal representation of row height from the user-provided value. */\n @Input()\n set rowHeight(value: string | number) {\n this._rowHeight = coerceToString(value);\n this._setTileStyler();\n }\n\n /** TODO: internal */\n ngOnInit() {\n this._checkCols();\n this._checkRowHeight();\n }\n\n /**\n * The layout calculation is fairly cheap if nothing changes, so there's little cost\n * to run it frequently.\n * TODO: internal\n */\n ngAfterContentChecked() {\n this._layoutTiles();\n }\n\n /** Throw a friendly error if cols property is missing */\n private _checkCols() {\n if (!this.cols) {\n throw new MdGridListColsError();\n }\n }\n\n /** Default to equal width:height if rowHeight property is missing */\n private _checkRowHeight(): void {\n if (!this._rowHeight) {\n this._tileStyler = new RatioTileStyler('1:1');\n }\n }\n\n /** Creates correct Tile Styler subtype based on rowHeight passed in by user */\n private _setTileStyler(): void {\n if (this._rowHeight === MD_FIT_MODE) {\n this._tileStyler = new FitTileStyler();\n } else if (this._rowHeight && this._rowHeight.match(/:/g)) {\n this._tileStyler = new RatioTileStyler(this._rowHeight);\n } else {\n this._tileStyler = new FixedTileStyler(this._rowHeight);\n }\n }\n\n /** Computes and applies the size and position for all children grid tiles. */\n private _layoutTiles(): void {\n let tiles = this._tiles.toArray();\n let tracker = new TileCoordinator(this.cols, tiles);\n let direction = this._dir ? this._dir.value : 'ltr';\n this._tileStyler.init(this.gutterSize, tracker, this.cols, direction);\n\n for (let i = 0; i < tiles.length; i++) {\n let pos = tracker.positions[i];\n let tile = tiles[i];\n this._tileStyler.setStyle(tile, pos.row, pos.col);\n }\n this.setListStyle(this._tileStyler.getComputedHeight());\n }\n\n /**\n * Sets style on the main grid-list element, given the style name and value.\n * @internal\n */\n setListStyle(style: [string, string]): void {\n if (style) {\n this._renderer.setElementStyle(this._element.nativeElement, style[0], style[1]);\n }\n }\n}\n\n\nexport const MD_GRID_LIST_DIRECTIVES: any[] = [MdGridList, MdGridTile, MdLine, MdGridTileText];\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/grid-list/grid-tile-text.html b/DEBUG-merge/components/grid-list/grid-tile-text.html new file mode 100644 index 000000000000..9946619e7f13 --- /dev/null +++ b/DEBUG-merge/components/grid-list/grid-tile-text.html @@ -0,0 +1,3 @@ + +
+ \ No newline at end of file diff --git a/DEBUG-merge/components/grid-list/grid-tile.d.ts b/DEBUG-merge/components/grid-list/grid-tile.d.ts new file mode 100644 index 000000000000..d21f76849df5 --- /dev/null +++ b/DEBUG-merge/components/grid-list/grid-tile.d.ts @@ -0,0 +1,23 @@ +import { Renderer, ElementRef, QueryList, AfterContentInit } from '@angular/core'; +import { MdLine, MdLineSetter } from '@angular2-material/core/line/line'; +export declare class MdGridTile { + private _renderer; + private _element; + _rowspan: number; + _colspan: number; + constructor(_renderer: Renderer, _element: ElementRef); + rowspan: number; + colspan: number; +} +export declare class MdGridTileText implements AfterContentInit { + private _renderer; + private _element; + /** + * Helper that watches the number of lines in a text area and sets + * a class on the host element that matches the line count. + */ + _lineSetter: MdLineSetter; + _lines: QueryList; + constructor(_renderer: Renderer, _element: ElementRef); + ngAfterContentInit(): void; +} diff --git a/DEBUG-merge/components/grid-list/grid-tile.html b/DEBUG-merge/components/grid-list/grid-tile.html new file mode 100644 index 000000000000..cadd734bc6ab --- /dev/null +++ b/DEBUG-merge/components/grid-list/grid-tile.html @@ -0,0 +1,4 @@ + +
+ +
\ No newline at end of file diff --git a/DEBUG-merge/components/grid-list/grid-tile.js b/DEBUG-merge/components/grid-list/grid-tile.js new file mode 100644 index 000000000000..ac0acd888433 --- /dev/null +++ b/DEBUG-merge/components/grid-list/grid-tile.js @@ -0,0 +1,93 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var line_1 = require('@angular2-material/core/line/line'); +var grid_list_measure_1 = require('./grid-list-measure'); +var MdGridTile = (function () { + function MdGridTile(_renderer, _element) { + this._renderer = _renderer; + this._element = _element; + this._rowspan = 1; + this._colspan = 1; + } + Object.defineProperty(MdGridTile.prototype, "rowspan", { + get: function () { + return this._rowspan; + }, + set: function (value) { + this._rowspan = grid_list_measure_1.coerceToNumber(value); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdGridTile.prototype, "colspan", { + get: function () { + return this._colspan; + }, + set: function (value) { + this._colspan = grid_list_measure_1.coerceToNumber(value); + }, + enumerable: true, + configurable: true + }); + /** Sets the style of the grid-tile element. Needs to be set manually to avoid + * "Changed after checked" errors that would occur with HostBinding. + * @internal + */ + MdGridTile.prototype.setStyle = function (property, value) { + this._renderer.setElementStyle(this._element.nativeElement, property, value); + }; + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdGridTile.prototype, "rowspan", null); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdGridTile.prototype, "colspan", null); + MdGridTile = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-grid-tile', + host: { 'role': 'listitem' }, + templateUrl: 'grid-tile.html', + styleUrls: ['grid-list.css'], + encapsulation: core_1.ViewEncapsulation.None, + }), + __metadata('design:paramtypes', [core_1.Renderer, core_1.ElementRef]) + ], MdGridTile); + return MdGridTile; +}()); +exports.MdGridTile = MdGridTile; +var MdGridTileText = (function () { + function MdGridTileText(_renderer, _element) { + this._renderer = _renderer; + this._element = _element; + } + MdGridTileText.prototype.ngAfterContentInit = function () { + this._lineSetter = new line_1.MdLineSetter(this._lines, this._renderer, this._element); + }; + __decorate([ + core_1.ContentChildren(line_1.MdLine), + __metadata('design:type', core_1.QueryList) + ], MdGridTileText.prototype, "_lines", void 0); + MdGridTileText = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-grid-tile-header, md-grid-tile-footer', + templateUrl: 'grid-tile-text.html' + }), + __metadata('design:paramtypes', [core_1.Renderer, core_1.ElementRef]) + ], MdGridTileText); + return MdGridTileText; +}()); +exports.MdGridTileText = MdGridTileText; +//# sourceMappingURL=../../../../components/grid-list/grid-tile.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/grid-list/grid-tile.js.map b/DEBUG-merge/components/grid-list/grid-tile.js.map new file mode 100644 index 000000000000..8cab5710ee7d --- /dev/null +++ b/DEBUG-merge/components/grid-list/grid-tile.js.map @@ -0,0 +1 @@ +{"version":3,"file":"grid-tile.js","sourceRoot":"","sources":["../../src/demo-app/components/grid-list/grid-tile.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBASO,eAAe,CAAC,CAAA;AACvB,qBAAqC,mCAAmC,CAAC,CAAA;AACzE,kCAA6B,qBAAqB,CAAC,CAAA;AAUnD;IAIE,oBAAoB,SAAmB,EAAU,QAAoB;QAAjD,cAAS,GAAT,SAAS,CAAU;QAAU,aAAQ,GAAR,QAAQ,CAAY;QAHrE,aAAQ,GAAW,CAAC,CAAC;QACrB,aAAQ,GAAW,CAAC,CAAC;IAEmD,CAAC;IAGzE,sBAAI,+BAAO;aAAX;YACE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;QACvB,CAAC;aAOD,UAAY,KAAK;YACf,IAAI,CAAC,QAAQ,GAAG,kCAAc,CAAC,KAAK,CAAC,CAAC;QACxC,CAAC;;;OATA;IAGD,sBAAI,+BAAO;aAAX;YACE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;QACvB,CAAC;aAMD,UAAY,KAAK;YACf,IAAI,CAAC,QAAQ,GAAG,kCAAc,CAAC,KAAK,CAAC,CAAC;QACxC,CAAC;;;OARA;IAUD;;;OAGG;IACH,6BAAQ,GAAR,UAAS,QAAgB,EAAE,KAAa;QACtC,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC/E,CAAC;IAxBD;QAAC,YAAK,EAAE;;6CAAA;IAKR;QAAC,YAAK,EAAE;;6CAAA;IAnBV;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,cAAc;YACxB,IAAI,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE;YAC5B,WAAW,EAAE,gBAAgB;YAC7B,SAAS,EAAE,CAAC,eAAe,CAAC;YAC5B,aAAa,EAAE,wBAAiB,CAAC,IAAI;SACtC,CAAC;;kBAAA;IAiCF,iBAAC;AAAD,CAAC,AAhCD,IAgCC;AAhCY,kBAAU,aAgCtB,CAAA;AAOD;IAQE,wBAAoB,SAAmB,EAAU,QAAoB;QAAjD,cAAS,GAAT,SAAS,CAAU;QAAU,aAAQ,GAAR,QAAQ,CAAY;IAAG,CAAC;IAEzE,2CAAkB,GAAlB;QACE,IAAI,CAAC,WAAW,GAAG,IAAI,mBAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAClF,CAAC;IAND;QAAC,sBAAe,CAAC,aAAM,CAAC;;kDAAA;IAX1B;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,0CAA0C;YACpD,WAAW,EAAE,qBAAqB;SACnC,CAAC;;sBAAA;IAcF,qBAAC;AAAD,CAAC,AAbD,IAaC;AAbY,sBAAc,iBAa1B,CAAA","sourcesContent":["import {\n Component,\n ViewEncapsulation,\n Renderer,\n ElementRef,\n Input,\n ContentChildren,\n QueryList,\n AfterContentInit\n} from '@angular/core';\nimport { MdLine, MdLineSetter } from '@angular2-material/core/line/line';\nimport {coerceToNumber} from './grid-list-measure';\n\n@Component({\n moduleId: module.id,\n selector: 'md-grid-tile',\n host: { 'role': 'listitem' },\n templateUrl: 'grid-tile.html',\n styleUrls: ['grid-list.css'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class MdGridTile {\n _rowspan: number = 1;\n _colspan: number = 1;\n\n constructor(private _renderer: Renderer, private _element: ElementRef) {}\n\n @Input()\n get rowspan() {\n return this._rowspan;\n }\n\n @Input()\n get colspan() {\n return this._colspan;\n }\n\n set rowspan(value) {\n this._rowspan = coerceToNumber(value);\n }\n\n set colspan(value) {\n this._colspan = coerceToNumber(value);\n }\n\n /** Sets the style of the grid-tile element. Needs to be set manually to avoid\n * \"Changed after checked\" errors that would occur with HostBinding.\n * @internal\n */\n setStyle(property: string, value: string): void {\n this._renderer.setElementStyle(this._element.nativeElement, property, value);\n }\n\n}\n\n@Component({\n moduleId: module.id,\n selector: 'md-grid-tile-header, md-grid-tile-footer',\n templateUrl: 'grid-tile-text.html'\n})\nexport class MdGridTileText implements AfterContentInit {\n /**\n * Helper that watches the number of lines in a text area and sets\n * a class on the host element that matches the line count.\n */\n _lineSetter: MdLineSetter;\n @ContentChildren(MdLine) _lines: QueryList;\n\n constructor(private _renderer: Renderer, private _element: ElementRef) {}\n\n ngAfterContentInit() {\n this._lineSetter = new MdLineSetter(this._lines, this._renderer, this._element);\n }\n}\n\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/grid-list/package.json b/DEBUG-merge/components/grid-list/package.json new file mode 100644 index 000000000000..77dae32d6c1c --- /dev/null +++ b/DEBUG-merge/components/grid-list/package.json @@ -0,0 +1,28 @@ +{ + "name": "@angular2-material/grid-list", + "version": "2.0.0-alpha.5-2", + "description": "Angular 2 Material grid list", + "main": "./grid-list.js", + "typings": "./grid-list.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components", + "grid-list", + "list", + "tiles" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "@angular2-material/core": "2.0.0-alpha.5-2" + } +} diff --git a/DEBUG-merge/components/grid-list/tile-coordinator.d.ts b/DEBUG-merge/components/grid-list/tile-coordinator.d.ts new file mode 100644 index 000000000000..7795f9719c61 --- /dev/null +++ b/DEBUG-merge/components/grid-list/tile-coordinator.d.ts @@ -0,0 +1,45 @@ +import { MdGridTile } from './grid-tile'; +/** + * Class for determining, from a list of tiles, the (row, col) position of each of those tiles + * in the grid. This is necessary (rather than just rendering the tiles in normal document flow) + * because the tiles can have a rowspan. + * + * The positioning algorithm greedily places each tile as soon as it encounters a gap in the grid + * large enough to accommodate it so that the tiles still render in the same order in which they + * are given. + * + * The basis of the algorithm is the use of an array to track the already placed tiles. Each + * element of the array corresponds to a column, and the value indicates how many cells in that + * column are already occupied; zero indicates an empty cell. Moving "down" to the next row + * decrements each value in the tracking array (indicating that the column is one cell closer to + * being free). + */ +export declare class TileCoordinator { + /** Tracking array (see class description). */ + tracker: number[]; + /** Index at which the search for the next gap will start. */ + columnIndex: number; + /** The current row index. */ + rowIndex: number; + /** Gets the total number of rows occupied by tiles */ + rowCount: number; + /** Gets the total span of rows occupied by tiles. + * Ex: A list with 1 row that contains a tile with rowspan 2 will have a total rowspan of 2. */ + rowspan: number; + /** The computed (row, col) position of each tile (the output). */ + positions: TilePosition[]; + constructor(numColumns: number, tiles: MdGridTile[]); + /** Calculates the row and col position of a tile. */ + private _trackTile(tile); + /** Finds the next available space large enough to fit the tile. */ + private _findMatchingGap(tileCols); + /** Move "down" to the next row. */ + private _nextRow(); + /** + * Finds the end index (exclusive) of a gap given the index from which to start looking. + * The gap ends when a non-zero value is found. + */ + private _findGapEndIndex(gapStartIndex); + /** Update the tile tracker to account for the given tile in the given space. */ + private _markTilePosition(start, tile); +} diff --git a/DEBUG-merge/components/grid-list/tile-coordinator.js b/DEBUG-merge/components/grid-list/tile-coordinator.js new file mode 100644 index 000000000000..c3caf182fe8f --- /dev/null +++ b/DEBUG-merge/components/grid-list/tile-coordinator.js @@ -0,0 +1,128 @@ +"use strict"; +var grid_list_errors_1 = require('./grid-list-errors'); +/** + * Class for determining, from a list of tiles, the (row, col) position of each of those tiles + * in the grid. This is necessary (rather than just rendering the tiles in normal document flow) + * because the tiles can have a rowspan. + * + * The positioning algorithm greedily places each tile as soon as it encounters a gap in the grid + * large enough to accommodate it so that the tiles still render in the same order in which they + * are given. + * + * The basis of the algorithm is the use of an array to track the already placed tiles. Each + * element of the array corresponds to a column, and the value indicates how many cells in that + * column are already occupied; zero indicates an empty cell. Moving "down" to the next row + * decrements each value in the tracking array (indicating that the column is one cell closer to + * being free). + */ +var TileCoordinator = (function () { + function TileCoordinator(numColumns, tiles) { + var _this = this; + /** Index at which the search for the next gap will start. */ + this.columnIndex = 0; + /** The current row index. */ + this.rowIndex = 0; + this.tracker = new Array(numColumns); + this.tracker.fill(0, 0, this.tracker.length); + this.positions = tiles.map(function (tile) { return _this._trackTile(tile); }); + } + Object.defineProperty(TileCoordinator.prototype, "rowCount", { + /** Gets the total number of rows occupied by tiles */ + get: function () { return this.rowIndex + 1; }, + enumerable: true, + configurable: true + }); + Object.defineProperty(TileCoordinator.prototype, "rowspan", { + /** Gets the total span of rows occupied by tiles. + * Ex: A list with 1 row that contains a tile with rowspan 2 will have a total rowspan of 2. */ + get: function () { + var lastRowMax = Math.max.apply(Math, this.tracker); + // if any of the tiles has a rowspan that pushes it beyond the total row count, + // add the difference to the rowcount + return lastRowMax > 1 ? this.rowCount + lastRowMax - 1 : this.rowCount; + }, + enumerable: true, + configurable: true + }); + /** Calculates the row and col position of a tile. */ + TileCoordinator.prototype._trackTile = function (tile) { + // Find a gap large enough for this tile. + var gapStartIndex = this._findMatchingGap(tile.colspan); + // Place tile in the resulting gap. + this._markTilePosition(gapStartIndex, tile); + // The next time we look for a gap, the search will start at columnIndex, which should be + // immediately after the tile that has just been placed. + this.columnIndex = gapStartIndex + tile.colspan; + return new TilePosition(this.rowIndex, gapStartIndex); + }; + /** Finds the next available space large enough to fit the tile. */ + TileCoordinator.prototype._findMatchingGap = function (tileCols) { + if (tileCols > this.tracker.length) { + throw new grid_list_errors_1.MdGridTileTooWideError(tileCols, this.tracker.length); + } + // Start index is inclusive, end index is exclusive. + var gapStartIndex = -1; + var gapEndIndex = -1; + // Look for a gap large enough to fit the given tile. Empty spaces are marked with a zero. + do { + // If we've reached the end of the row, go to the next row. + if (this.columnIndex + tileCols > this.tracker.length) { + this._nextRow(); + continue; + } + gapStartIndex = this.tracker.indexOf(0, this.columnIndex); + // If there are no more empty spaces in this row at all, move on to the next row. + if (gapStartIndex == -1) { + this._nextRow(); + continue; + } + gapEndIndex = this._findGapEndIndex(gapStartIndex); + // If a gap large enough isn't found, we want to start looking immediately after the current + // gap on the next iteration. + this.columnIndex = gapStartIndex + 1; + } while (gapEndIndex - gapStartIndex < tileCols); + return gapStartIndex; + }; + /** Move "down" to the next row. */ + TileCoordinator.prototype._nextRow = function () { + this.columnIndex = 0; + this.rowIndex++; + // Decrement all spaces by one to reflect moving down one row. + for (var i = 0; i < this.tracker.length; i++) { + this.tracker[i] = Math.max(0, this.tracker[i] - 1); + } + }; + /** + * Finds the end index (exclusive) of a gap given the index from which to start looking. + * The gap ends when a non-zero value is found. + */ + TileCoordinator.prototype._findGapEndIndex = function (gapStartIndex) { + for (var i = gapStartIndex + 1; i < this.tracker.length; i++) { + if (this.tracker[i] != 0) { + return i; + } + } + // The gap ends with the end of the row. + return this.tracker.length; + }; + /** Update the tile tracker to account for the given tile in the given space. */ + TileCoordinator.prototype._markTilePosition = function (start, tile) { + for (var i = 0; i < tile.colspan; i++) { + this.tracker[start + i] = tile.rowspan; + } + }; + return TileCoordinator; +}()); +exports.TileCoordinator = TileCoordinator; +/** Simple data structure for tile position (row, col). + * @internal + */ +var TilePosition = (function () { + function TilePosition(row, col) { + this.row = row; + this.col = col; + } + return TilePosition; +}()); +exports.TilePosition = TilePosition; +//# sourceMappingURL=../../../../components/grid-list/tile-coordinator.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/grid-list/tile-coordinator.js.map b/DEBUG-merge/components/grid-list/tile-coordinator.js.map new file mode 100644 index 000000000000..1eea765265de --- /dev/null +++ b/DEBUG-merge/components/grid-list/tile-coordinator.js.map @@ -0,0 +1 @@ +{"version":3,"file":"tile-coordinator.js","sourceRoot":"","sources":["../../src/demo-app/components/grid-list/tile-coordinator.ts"],"names":[],"mappings":"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","sourcesContent":["import {MdGridTile} from './grid-tile';\nimport {MdGridTileTooWideError} from './grid-list-errors';\n\n/**\n * Class for determining, from a list of tiles, the (row, col) position of each of those tiles\n * in the grid. This is necessary (rather than just rendering the tiles in normal document flow)\n * because the tiles can have a rowspan.\n *\n * The positioning algorithm greedily places each tile as soon as it encounters a gap in the grid\n * large enough to accommodate it so that the tiles still render in the same order in which they\n * are given.\n *\n * The basis of the algorithm is the use of an array to track the already placed tiles. Each\n * element of the array corresponds to a column, and the value indicates how many cells in that\n * column are already occupied; zero indicates an empty cell. Moving \"down\" to the next row\n * decrements each value in the tracking array (indicating that the column is one cell closer to\n * being free).\n */\nexport class TileCoordinator {\n /** Tracking array (see class description). */\n tracker: number[];\n\n /** Index at which the search for the next gap will start. */\n columnIndex: number = 0;\n\n /** The current row index. */\n rowIndex: number = 0;\n\n /** Gets the total number of rows occupied by tiles */\n get rowCount(): number { return this.rowIndex + 1; }\n\n /** Gets the total span of rows occupied by tiles.\n * Ex: A list with 1 row that contains a tile with rowspan 2 will have a total rowspan of 2. */\n get rowspan() {\n let lastRowMax = Math.max(...this.tracker);\n // if any of the tiles has a rowspan that pushes it beyond the total row count,\n // add the difference to the rowcount\n return lastRowMax > 1 ? this.rowCount + lastRowMax - 1 : this.rowCount;\n }\n\n /** The computed (row, col) position of each tile (the output). */\n positions: TilePosition[];\n\n constructor(numColumns: number, tiles: MdGridTile[]) {\n this.tracker = new Array(numColumns);\n this.tracker.fill(0, 0, this.tracker.length);\n\n this.positions = tiles.map(tile => this._trackTile(tile));\n }\n\n /** Calculates the row and col position of a tile. */\n private _trackTile(tile: MdGridTile): TilePosition {\n // Find a gap large enough for this tile.\n let gapStartIndex = this._findMatchingGap(tile.colspan);\n\n // Place tile in the resulting gap.\n this._markTilePosition(gapStartIndex, tile);\n\n // The next time we look for a gap, the search will start at columnIndex, which should be\n // immediately after the tile that has just been placed.\n this.columnIndex = gapStartIndex + tile.colspan;\n\n return new TilePosition(this.rowIndex, gapStartIndex);\n }\n\n /** Finds the next available space large enough to fit the tile. */\n private _findMatchingGap(tileCols: number): number {\n if (tileCols > this.tracker.length) {\n throw new MdGridTileTooWideError(tileCols, this.tracker.length);\n }\n\n // Start index is inclusive, end index is exclusive.\n let gapStartIndex = -1;\n let gapEndIndex = -1;\n\n // Look for a gap large enough to fit the given tile. Empty spaces are marked with a zero.\n do {\n // If we've reached the end of the row, go to the next row.\n if (this.columnIndex + tileCols > this.tracker.length) {\n this._nextRow();\n continue;\n }\n\n gapStartIndex = this.tracker.indexOf(0, this.columnIndex);\n\n // If there are no more empty spaces in this row at all, move on to the next row.\n if (gapStartIndex == -1) {\n this._nextRow();\n continue;\n }\n\n gapEndIndex = this._findGapEndIndex(gapStartIndex);\n\n // If a gap large enough isn't found, we want to start looking immediately after the current\n // gap on the next iteration.\n this.columnIndex = gapStartIndex + 1;\n\n // Continue iterating until we find a gap wide enough for this tile.\n } while (gapEndIndex - gapStartIndex < tileCols);\n return gapStartIndex;\n }\n\n /** Move \"down\" to the next row. */\n private _nextRow(): void {\n this.columnIndex = 0;\n this.rowIndex++;\n\n // Decrement all spaces by one to reflect moving down one row.\n for (let i = 0; i < this.tracker.length; i++) {\n this.tracker[i] = Math.max(0, this.tracker[i] - 1);\n }\n }\n\n /**\n * Finds the end index (exclusive) of a gap given the index from which to start looking.\n * The gap ends when a non-zero value is found.\n */\n private _findGapEndIndex(gapStartIndex: number): number {\n for (let i = gapStartIndex + 1; i < this.tracker.length; i++) {\n if (this.tracker[i] != 0) {\n return i;\n }\n }\n\n // The gap ends with the end of the row.\n return this.tracker.length;\n }\n\n /** Update the tile tracker to account for the given tile in the given space. */\n private _markTilePosition(start: number, tile: MdGridTile): void {\n for (let i = 0; i < tile.colspan; i++) {\n this.tracker[start + i] = tile.rowspan;\n }\n }\n}\n\n/** Simple data structure for tile position (row, col).\n * @internal\n */\nexport class TilePosition {\n constructor(public row: number, public col: number) {}\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/grid-list/tile-styler.d.ts b/DEBUG-merge/components/grid-list/tile-styler.d.ts new file mode 100644 index 000000000000..ec7f2a7c512e --- /dev/null +++ b/DEBUG-merge/components/grid-list/tile-styler.d.ts @@ -0,0 +1,19 @@ +export declare class TileStyler { + _gutterSize: string; + _rows: number; + _rowspan: number; + _cols: number; + _direction: string; +} +export declare class FixedTileStyler extends TileStyler { + fixedRowHeight: string; + constructor(fixedRowHeight: string); +} +export declare class RatioTileStyler extends TileStyler { + /** Ratio width:height given by user to determine row height.*/ + rowHeightRatio: number; + baseTileHeight: string; + constructor(value: string); +} +export declare class FitTileStyler extends TileStyler { +} diff --git a/DEBUG-merge/components/grid-list/tile-styler.js b/DEBUG-merge/components/grid-list/tile-styler.js new file mode 100644 index 000000000000..8c01d1d96dac --- /dev/null +++ b/DEBUG-merge/components/grid-list/tile-styler.js @@ -0,0 +1,207 @@ +"use strict"; +var __extends = (this && this.__extends) || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +}; +var grid_list_errors_1 = require('./grid-list-errors'); +/* Sets the style properties for an individual tile, given the position calculated by the +* Tile Coordinator. */ +var TileStyler = (function () { + function TileStyler() { + this._rows = 0; + this._rowspan = 0; + } + /** Adds grid-list layout info once it is available. Cannot be processed in the constructor + * because these properties haven't been calculated by that point. + * @internal + * */ + TileStyler.prototype.init = function (_gutterSize, tracker, cols, direction) { + this._gutterSize = normalizeUnits(_gutterSize); + this._rows = tracker.rowCount; + this._rowspan = tracker.rowspan; + this._cols = cols; + this._direction = direction; + }; + /** + * Computes the amount of space a single 1x1 tile would take up (width or height). + * Used as a basis for other calculations. + * @internal + * @param sizePercent Percent of the total grid-list space that one 1x1 tile would take up. + * @param gutterFraction Fraction of the gutter size taken up by one 1x1 tile. + * @return The size of a 1x1 tile as an expression that can be evaluated via CSS calc(). + */ + TileStyler.prototype.getBaseTileSize = function (sizePercent, gutterFraction) { + // Take the base size percent (as would be if evenly dividing the size between cells), + // and then subtracting the size of one gutter. However, since there are no gutters on the + // edges, each tile only uses a fraction (gutterShare = numGutters / numCells) of the gutter + // size. (Imagine having one gutter per tile, and then breaking up the extra gutter on the + // edge evenly among the cells). + return "(" + sizePercent + "% - ( " + this._gutterSize + " * " + gutterFraction + " ))"; + }; + /** + * Gets The horizontal or vertical position of a tile, e.g., the 'top' or 'left' property value. + * @internal + * @param offset Number of tiles that have already been rendered in the row/column. + * @param baseSize Base size of a 1x1 tile (as computed in getBaseTileSize). + * @return Position of the tile as a CSS calc() expression. + */ + TileStyler.prototype.getTilePosition = function (baseSize, offset) { + // The position comes the size of a 1x1 tile plus gutter for each previous tile in the + // row/column (offset). + return calc("(" + baseSize + " + " + this._gutterSize + ") * " + offset); + }; + /** + * Gets the actual size of a tile, e.g., width or height, taking rowspan or colspan into account. + * @internal + * @param baseSize Base size of a 1x1 tile (as computed in getBaseTileSize). + * @param span The tile's rowspan or colspan. + * @return Size of the tile as a CSS calc() expression. + */ + TileStyler.prototype.getTileSize = function (baseSize, span) { + return "(" + baseSize + " * " + span + ") + (" + (span - 1) + " * " + this._gutterSize + ")"; + }; + /** Gets the style properties to be applied to a tile for the given row and column index. + * @internal + */ + TileStyler.prototype.setStyle = function (tile, rowIndex, colIndex) { + // Percent of the available horizontal space that one column takes up. + var percentWidthPerTile = 100 / this._cols; + // Fraction of the vertical gutter size that each column takes up. + // For example, if there are 5 columns, each column uses 4/5 = 0.8 times the gutter width. + var gutterWidthFractionPerTile = (this._cols - 1) / this._cols; + this.setColStyles(tile, colIndex, percentWidthPerTile, gutterWidthFractionPerTile); + this.setRowStyles(tile, rowIndex, percentWidthPerTile, gutterWidthFractionPerTile); + }; + /** Sets the horizontal placement of the tile in the list. + * @internal + */ + TileStyler.prototype.setColStyles = function (tile, colIndex, percentWidth, gutterWidth) { + // Base horizontal size of a column. + var baseTileWidth = this.getBaseTileSize(percentWidth, gutterWidth); + // The width and horizontal position of each tile is always calculated the same way, but the + // height and vertical position depends on the rowMode. + var side = this._direction === 'ltr' ? 'left' : 'right'; + tile.setStyle(side, this.getTilePosition(baseTileWidth, colIndex)); + tile.setStyle('width', calc(this.getTileSize(baseTileWidth, tile.colspan))); + }; + /** Calculates the total size taken up by gutters across one axis of a list. + * @internal + */ + TileStyler.prototype.getGutterSpan = function () { + return this._gutterSize + " * (" + this._rowspan + " - 1)"; + }; + /** Calculates the total size taken up by tiles across one axis of a list. + * @internal + */ + TileStyler.prototype.getTileSpan = function (tileHeight) { + return this._rowspan + " * " + this.getTileSize(tileHeight, 1); + }; + /** Sets the vertical placement of the tile in the list. + * This method will be implemented by each type of TileStyler. + * @internal + */ + TileStyler.prototype.setRowStyles = function (tile, rowIndex, percentWidth, gutterWidth) { }; + /** Calculates the computed height and returns the correct style property to set. + * This method will be implemented by each type of TileStyler. + * @internal + */ + TileStyler.prototype.getComputedHeight = function () { return null; }; + return TileStyler; +}()); +exports.TileStyler = TileStyler; +/* This type of styler is instantiated when the user passes in a fixed row height +* Example */ +var FixedTileStyler = (function (_super) { + __extends(FixedTileStyler, _super); + function FixedTileStyler(fixedRowHeight) { + _super.call(this); + this.fixedRowHeight = fixedRowHeight; + } + /** @internal */ + FixedTileStyler.prototype.init = function (gutterSize, tracker, cols, direction) { + _super.prototype.init.call(this, gutterSize, tracker, cols, direction); + this.fixedRowHeight = normalizeUnits(this.fixedRowHeight); + }; + /** @internal */ + FixedTileStyler.prototype.setRowStyles = function (tile, rowIndex, percentWidth, gutterWidth) { + tile.setStyle('top', this.getTilePosition(this.fixedRowHeight, rowIndex)); + tile.setStyle('height', calc(this.getTileSize(this.fixedRowHeight, tile.rowspan))); + }; + /** @internal */ + FixedTileStyler.prototype.getComputedHeight = function () { + return [ + 'height', calc(this.getTileSpan(this.fixedRowHeight) + " + " + this.getGutterSpan()) + ]; + }; + return FixedTileStyler; +}(TileStyler)); +exports.FixedTileStyler = FixedTileStyler; +/* This type of styler is instantiated when the user passes in a width:height ratio + * for the row height. Example */ +var RatioTileStyler = (function (_super) { + __extends(RatioTileStyler, _super); + function RatioTileStyler(value) { + _super.call(this); + this._parseRatio(value); + } + /** @internal */ + RatioTileStyler.prototype.setRowStyles = function (tile, rowIndex, percentWidth, gutterWidth) { + var percentHeightPerTile = percentWidth / this.rowHeightRatio; + this.baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterWidth); + // Use paddingTop and marginTop to maintain the given aspect ratio, as + // a percentage-based value for these properties is applied versus the *width* of the + // containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties + tile.setStyle('marginTop', this.getTilePosition(this.baseTileHeight, rowIndex)); + tile.setStyle('paddingTop', calc(this.getTileSize(this.baseTileHeight, tile.rowspan))); + }; + /** @internal */ + RatioTileStyler.prototype.getComputedHeight = function () { + return [ + 'paddingBottom', calc(this.getTileSpan(this.baseTileHeight) + " + " + this.getGutterSpan()) + ]; + }; + /** @internal */ + RatioTileStyler.prototype._parseRatio = function (value) { + var ratioParts = value.split(':'); + if (ratioParts.length !== 2) { + throw new grid_list_errors_1.MdGridListBadRatioError(value); + } + this.rowHeightRatio = parseFloat(ratioParts[0]) / parseFloat(ratioParts[1]); + }; + return RatioTileStyler; +}(TileStyler)); +exports.RatioTileStyler = RatioTileStyler; +/* This type of styler is instantiated when the user selects a "fit" row height mode. + * In other words, the row height will reflect the total height of the container divided + * by the number of rows. Example */ +var FitTileStyler = (function (_super) { + __extends(FitTileStyler, _super); + function FitTileStyler() { + _super.apply(this, arguments); + } + /** @internal */ + FitTileStyler.prototype.setRowStyles = function (tile, rowIndex, percentWidth, gutterWidth) { + // Percent of the available vertical space that one row takes up. + var percentHeightPerTile = 100 / this._rowspan; + // Fraction of the horizontal gutter size that each column takes up. + var gutterHeightPerTile = (this._rows - 1) / this._rows; + // Base vertical size of a column. + var baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterHeightPerTile); + tile.setStyle('top', this.getTilePosition(baseTileHeight, rowIndex)); + tile.setStyle('height', calc(this.getTileSize(baseTileHeight, tile.rowspan))); + }; + return FitTileStyler; +}(TileStyler)); +exports.FitTileStyler = FitTileStyler; +/** Wraps a CSS string in a calc function + * @internal + */ +function calc(exp) { return "calc(" + exp + ")"; } +/** Appends pixels to a CSS string if no units are given. + * @internal + */ +function normalizeUnits(value) { + return (value.match(/px|em|rem/)) ? value : value + 'px'; +} +//# sourceMappingURL=../../../../components/grid-list/tile-styler.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/grid-list/tile-styler.js.map b/DEBUG-merge/components/grid-list/tile-styler.js.map new file mode 100644 index 000000000000..1fb6afc3e30f --- /dev/null +++ b/DEBUG-merge/components/grid-list/tile-styler.js.map @@ -0,0 +1 @@ +{"version":3,"file":"tile-styler.js","sourceRoot":"","sources":["../../src/demo-app/components/grid-list/tile-styler.ts"],"names":[],"mappings":"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","sourcesContent":["import {MdGridTile} from './grid-tile';\nimport {TileCoordinator} from './tile-coordinator';\nimport {MdGridListBadRatioError} from './grid-list-errors';\n\n/* Sets the style properties for an individual tile, given the position calculated by the\n* Tile Coordinator. */\nexport class TileStyler {\n _gutterSize: string;\n _rows: number = 0;\n _rowspan: number = 0;\n _cols: number;\n _direction: string;\n\n /** Adds grid-list layout info once it is available. Cannot be processed in the constructor\n * because these properties haven't been calculated by that point.\n * @internal\n * */\n init(_gutterSize: string, tracker: TileCoordinator, cols: number, direction: string): void {\n this._gutterSize = normalizeUnits(_gutterSize);\n this._rows = tracker.rowCount;\n this._rowspan = tracker.rowspan;\n this._cols = cols;\n this._direction = direction;\n }\n\n /**\n * Computes the amount of space a single 1x1 tile would take up (width or height).\n * Used as a basis for other calculations.\n * @internal\n * @param sizePercent Percent of the total grid-list space that one 1x1 tile would take up.\n * @param gutterFraction Fraction of the gutter size taken up by one 1x1 tile.\n * @return The size of a 1x1 tile as an expression that can be evaluated via CSS calc().\n */\n getBaseTileSize(sizePercent: number, gutterFraction: number): string {\n // Take the base size percent (as would be if evenly dividing the size between cells),\n // and then subtracting the size of one gutter. However, since there are no gutters on the\n // edges, each tile only uses a fraction (gutterShare = numGutters / numCells) of the gutter\n // size. (Imagine having one gutter per tile, and then breaking up the extra gutter on the\n // edge evenly among the cells).\n return `(${sizePercent}% - ( ${this._gutterSize} * ${gutterFraction} ))`;\n }\n\n\n /**\n * Gets The horizontal or vertical position of a tile, e.g., the 'top' or 'left' property value.\n * @internal\n * @param offset Number of tiles that have already been rendered in the row/column.\n * @param baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).\n * @return Position of the tile as a CSS calc() expression.\n */\n getTilePosition(baseSize: string, offset: number): string {\n // The position comes the size of a 1x1 tile plus gutter for each previous tile in the\n // row/column (offset).\n return calc(`(${baseSize} + ${this._gutterSize}) * ${offset}`);\n }\n\n\n /**\n * Gets the actual size of a tile, e.g., width or height, taking rowspan or colspan into account.\n * @internal\n * @param baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).\n * @param span The tile's rowspan or colspan.\n * @return Size of the tile as a CSS calc() expression.\n */\n getTileSize(baseSize: string, span: number): string {\n return `(${baseSize} * ${span}) + (${span - 1} * ${this._gutterSize})`;\n }\n\n\n /** Gets the style properties to be applied to a tile for the given row and column index.\n * @internal\n */\n setStyle(tile: MdGridTile, rowIndex: number, colIndex: number): void {\n // Percent of the available horizontal space that one column takes up.\n let percentWidthPerTile = 100 / this._cols;\n\n // Fraction of the vertical gutter size that each column takes up.\n // For example, if there are 5 columns, each column uses 4/5 = 0.8 times the gutter width.\n let gutterWidthFractionPerTile = (this._cols - 1) / this._cols;\n\n this.setColStyles(tile, colIndex, percentWidthPerTile, gutterWidthFractionPerTile);\n this.setRowStyles(tile, rowIndex, percentWidthPerTile, gutterWidthFractionPerTile);\n }\n\n /** Sets the horizontal placement of the tile in the list.\n * @internal\n */\n setColStyles(tile: MdGridTile, colIndex: number, percentWidth: number,\n gutterWidth: number) {\n // Base horizontal size of a column.\n let baseTileWidth = this.getBaseTileSize(percentWidth, gutterWidth);\n\n // The width and horizontal position of each tile is always calculated the same way, but the\n // height and vertical position depends on the rowMode.\n let side = this._direction === 'ltr' ? 'left' : 'right';\n tile.setStyle(side, this.getTilePosition(baseTileWidth, colIndex));\n tile.setStyle('width', calc(this.getTileSize(baseTileWidth, tile.colspan)));\n }\n\n /** Calculates the total size taken up by gutters across one axis of a list.\n * @internal\n */\n getGutterSpan(): string {\n return `${this._gutterSize} * (${this._rowspan} - 1)`;\n }\n\n /** Calculates the total size taken up by tiles across one axis of a list.\n * @internal\n */\n getTileSpan(tileHeight: string): string {\n return `${this._rowspan} * ${this.getTileSize(tileHeight, 1)}`;\n }\n\n /** Sets the vertical placement of the tile in the list.\n * This method will be implemented by each type of TileStyler.\n* @internal\n*/\n setRowStyles(tile: MdGridTile, rowIndex: number, percentWidth: number, gutterWidth: number) {}\n\n /** Calculates the computed height and returns the correct style property to set.\n * This method will be implemented by each type of TileStyler.\n* @internal\n*/\n getComputedHeight(): [string, string] { return null; }\n}\n\n\n/* This type of styler is instantiated when the user passes in a fixed row height\n* Example */\nexport class FixedTileStyler extends TileStyler {\n\n constructor(public fixedRowHeight: string) { super(); }\n\n /** @internal */\n init(gutterSize: string, tracker: TileCoordinator, cols: number, direction: string) {\n super.init(gutterSize, tracker, cols, direction);\n this.fixedRowHeight = normalizeUnits(this.fixedRowHeight);\n }\n\n /** @internal */\n setRowStyles(tile: MdGridTile, rowIndex: number, percentWidth: number,\n gutterWidth: number): void {\n tile.setStyle('top', this.getTilePosition(this.fixedRowHeight, rowIndex));\n tile.setStyle('height', calc(this.getTileSize(this.fixedRowHeight, tile.rowspan)));\n }\n\n /** @internal */\n getComputedHeight(): [string, string] {\n return [\n 'height', calc(`${this.getTileSpan(this.fixedRowHeight)} + ${this.getGutterSpan()}`)\n ];\n }\n}\n\n/* This type of styler is instantiated when the user passes in a width:height ratio\n * for the row height. Example */\nexport class RatioTileStyler extends TileStyler {\n\n /** Ratio width:height given by user to determine row height.*/\n rowHeightRatio: number;\n baseTileHeight: string;\n\n constructor(value: string) {\n super();\n this._parseRatio(value);\n }\n\n /** @internal */\n setRowStyles(tile: MdGridTile, rowIndex: number, percentWidth: number,\n gutterWidth: number): void {\n let percentHeightPerTile = percentWidth / this.rowHeightRatio;\n this.baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterWidth);\n\n // Use paddingTop and marginTop to maintain the given aspect ratio, as\n // a percentage-based value for these properties is applied versus the *width* of the\n // containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties\n tile.setStyle('marginTop', this.getTilePosition(this.baseTileHeight, rowIndex));\n tile.setStyle('paddingTop', calc(this.getTileSize(this.baseTileHeight, tile.rowspan)));\n }\n\n /** @internal */\n getComputedHeight(): [string, string] {\n return [\n 'paddingBottom', calc(`${this.getTileSpan(this.baseTileHeight)} + ${this.getGutterSpan()}`)\n ];\n }\n\n /** @internal */\n private _parseRatio(value: string): void {\n let ratioParts = value.split(':');\n\n if (ratioParts.length !== 2) {\n throw new MdGridListBadRatioError(value);\n }\n\n this.rowHeightRatio = parseFloat(ratioParts[0]) / parseFloat(ratioParts[1]);\n }\n}\n\n/* This type of styler is instantiated when the user selects a \"fit\" row height mode.\n * In other words, the row height will reflect the total height of the container divided\n * by the number of rows. Example */\nexport class FitTileStyler extends TileStyler {\n\n /** @internal */\n setRowStyles(tile: MdGridTile, rowIndex: number, percentWidth: number,\n gutterWidth: number): void {\n // Percent of the available vertical space that one row takes up.\n let percentHeightPerTile = 100 / this._rowspan;\n\n // Fraction of the horizontal gutter size that each column takes up.\n let gutterHeightPerTile = (this._rows - 1) / this._rows;\n\n // Base vertical size of a column.\n let baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterHeightPerTile);\n\n tile.setStyle('top', this.getTilePosition(baseTileHeight, rowIndex));\n tile.setStyle('height', calc(this.getTileSize(baseTileHeight, tile.rowspan)));\n }\n}\n\n/** Wraps a CSS string in a calc function\n * @internal\n */\nfunction calc(exp: string): string { return `calc(${exp})`; }\n\n/** Appends pixels to a CSS string if no units are given.\n * @internal\n */\nfunction normalizeUnits(value: string): string {\n return (value.match(/px|em|rem/)) ? value : value + 'px';\n}\n\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/icon/README.md b/DEBUG-merge/components/icon/README.md new file mode 100644 index 000000000000..920d7d299e3a --- /dev/null +++ b/DEBUG-merge/components/icon/README.md @@ -0,0 +1,116 @@ +# md-icon + +`md-icon` is a component that displays an icon, which can be a font glyph or an SVG image. + +## MdIconRegistry + +`MdIconRegistry` is an injectable service that allows you to associate icon names with SVG URLs and define aliases for CSS font classes. Its methods are discussed below and listed in the API summary. + +## Font icons + +### Ligatures + +Some fonts are designed to show icons by using [ligatures](https://en.wikipedia.org/wiki/Typographic_ligature), for example by rendering the text "home" as a home image. To use a ligature icon, put its text in the content of the `md-icon` component, for example: +```html +home +``` + +By default the [Material icons font](http://google.github.io/material-design-icons/#icon-font-for-the-web) is used. (You will still need to include the HTML to load the font and its CSS, as described in the link). You can specify a different font by setting the `fontSet` input to either the CSS class to apply to use the desired font, or to an alias previously registered with `MdIconRegistry.registerFontClassAlias`, for example: +```javascript +mdIconRegistry.registerFontClassAlias('myfont', 'my-icon-font-class'); +``` + +```html +help +``` + +### Font icons via CSS + +Fonts can also display icons by defining a CSS class for each icon glyph, which typically uses a :before selector to cause the icon to appear. [FontAwesome](https://fortawesome.github.io/Font-Awesome/examples/) uses this approach to display its icons. To use such a font, set the `fontSet` input to the font's CSS class (either the class itself or an alias registered with `MdIconRegistry.registerFontClassAlias`), and set the `fontIcon` input to the class for the specific icon to show. Example: + +```html + +``` + +For both types of font icons, you can specify the default font class to use when `fontSet` is not explicitly set by calling `MdIconRegistry.setDefaultFontSetClass`. + +## SVG icons + +When an `md-icon` component displays an SVG icon, it does so by directly inlining the SVG content into the page as a child of the component. (Rather than using an tag or a div background image). This makes it easier to apply CSS styles to SVG icons. For example, the default color of the SVG content is the CSS [currentColor](http://www.quirksmode.org/css/color/currentcolor.html) value. This makes SVG icons by default have the same color as surrounding text, and allows you to change the color by setting the "color" style on the `md-icon` element. + +### Icons from URLs + +SVG icons can be used either by directly specifying the icon's URL, or by associating an icon name with a URL and then referring to the name. To use a URL directly, set the `svgSrc` input: +```html + +``` + +### Named icons + +To associate a name with an icon URL, use the `addSvgIcon` or `addSvgIconInNamespace` methods of `MdIconRegistry`. After registering an icon, it can be displayed by setting the `svgIcon` input. For an icon in the default namespace, use the name directly. For a non-default namespace, use the format `[namespace]:[name]`. Examples: +```javascript +mdIconRegistry.addSvgIcon('moon', '/assets/moon.svg'); +mdIconRegistry.addSvgIconInNamespace('animals', 'cat', '/assets/cat.svg'); +``` + +```html + + +``` + +### Icon sets + +Icon sets allow grouping multiple icons into a single SVG file. The content of an icon set file looks like this, where each nested `` tag defines an individual icon, and is identified with a unique "id" attribute. +``` + + + ... + ... + ... + ... + + +``` + +Icon sets are registered using the `addSvgIconSet` or `addSvgIconSetInNamespace` methods of `MdIconRegistry`. After an icon set is registered, each of its embedded icons can be accessed by their "id" attributes. To display an icon from an icon set, use the `svgIcon` input in the same way as for individually registered icons. Example: +```javascript +mdIconRegistry.addSvgIconSetInNamespace('planets', '/assets/planets.svg'); +``` + +```html + +``` + +Multiple icon sets can be registered in the same namespace. If you request an icon whose id appears in more than one icon set, the icon from the most recently registered set will be used. + +Note that all SVG icons are fetched via XmlHttpRequest, and due to the same-origin policy their URLs must be on the same domain as the containing page, or their servers must be configured to allow cross-domain access. + +### Accessibility + +If you set an "aria-label" attribute on the md-icon element, its value will be used as-is. If you do not, the md-icon component will attempt to set the aria-label value from one of these sources: +* The `alt` attribute +* The `fontIcon` input +* The name of the icon from the `svgIcon` input (not including any namespace) +* The text content of the component (for ligature icons) + +### API Summary + +md-icon Properties: + +| Name | Type | Description | +| --- | --- | --- | +| `svgSrc` | string | The URL of the SVG icon to display | +| `svgIcon` | string | The name (and possibly namespace) of an icon previously registered with `MdIconRegistry.addSvgIcon` or `MdIconRegistry.addSvgIconInNamespace` | +| `fontSet` | string | The font to use to display an icon glyph. The value can be either a CSS class name, or an alias previously defined with `MdIconRegistry.registerFontClassAlias` | +| `fontIcon` | string | The CSS class that identifies the specific icon to use from an icon font | + +MdIconRegistry methods (all methods return `this` for chaining): + +| Signature | Description | +| --- | --- | +| addSvgIcon(name: string, url: string): MdIconProvider | Associates an icon name with a URL in the default namespace. When an `md-icon` component has its `svgIcon` input set to this name, the icon will be loaded from this URL. | +| addSvgIconInNamespace(namespace: string, iconName: string, url: string): MdIconProvider | Associates an icon name with a URL in the specified namespace. | +| addSvgIconSet(url: string): MdIconProvider | Makes the icons contained in the icon set from a URL available in the default namespace. | +| addSvgIconSetInNamespace(namespace: string, url: string): MdIconProvider | Makes the icons contained in the icon set from a URL available in the specified namespace. | +| registerFontClassAlias(alias: string, className: string): MdIconProvider | Associates a font alias with a CSS class. When an `md-icon` component has its `fontSet` input set to the alias, the CSS class will be added to the component's element. It is assumed that the user has defined a corresponding CSS rule to set the desired font. | +| setDefaultFontSetClass(className: string): MdIconProvider | Sets the default CSS class to apply to font icons when mdFontSet is not set. | diff --git a/DEBUG-merge/components/icon/fake-svgs.d.ts b/DEBUG-merge/components/icon/fake-svgs.d.ts new file mode 100644 index 000000000000..6490cfaa6f00 --- /dev/null +++ b/DEBUG-merge/components/icon/fake-svgs.d.ts @@ -0,0 +1,5 @@ +import { Response } from '@angular/http'; +/** + * Returns an HTTP response for a fake SVG URL. + */ +export declare function getFakeSvgHttpResponse(url: string): Response; diff --git a/DEBUG-merge/components/icon/fake-svgs.js b/DEBUG-merge/components/icon/fake-svgs.js new file mode 100644 index 000000000000..1b61251cade3 --- /dev/null +++ b/DEBUG-merge/components/icon/fake-svgs.js @@ -0,0 +1,30 @@ +"use strict"; +var http_1 = require('@angular/http'); +/** + * Fake URLs and associated SVG documents used by tests. + */ +var FAKE_SVGS = (function () { + var svgs = new Map(); + svgs.set('cat.svg', ''); + svgs.set('dog.svg', ''); + svgs.set('farm-set-1.svg', "\n \n \n \n \n \n \n "); + svgs.set('farm-set-2.svg', "\n \n \n \n \n \n \n "); + svgs.set('arrow-set.svg', "\n \n \n \n \n \n \n "); + return svgs; +})(); +/** + * Returns an HTTP response for a fake SVG URL. + */ +function getFakeSvgHttpResponse(url) { + if (FAKE_SVGS.has(url)) { + return new http_1.Response(new http_1.ResponseOptions({ + status: 200, + body: FAKE_SVGS.get(url), + })); + } + else { + return new http_1.Response(new http_1.ResponseOptions({ status: 404 })); + } +} +exports.getFakeSvgHttpResponse = getFakeSvgHttpResponse; +//# sourceMappingURL=../../../../components/icon/fake-svgs.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/icon/fake-svgs.js.map b/DEBUG-merge/components/icon/fake-svgs.js.map new file mode 100644 index 000000000000..0aab1d4fc834 --- /dev/null +++ b/DEBUG-merge/components/icon/fake-svgs.js.map @@ -0,0 +1 @@ +{"version":3,"file":"fake-svgs.js","sourceRoot":"","sources":["../../src/demo-app/components/icon/fake-svgs.ts"],"names":[],"mappings":";AAAA,qBAEwB,eAAe,CAAC,CAAA;AAExC;;GAEG;AACH,IAAM,SAAS,GAAG,CAAC;IACjB,IAAM,IAAI,GAAG,IAAI,GAAG,EAAkB,CAAC;IACvC,IAAI,CAAC,GAAG,CAAC,SAAS,EACd,oCAAoC,CAAC,CAAC;IAE1C,IAAI,CAAC,GAAG,CAAC,SAAS,EACd,oCAAoC,CAAC,CAAC;IAE1C,IAAI,CAAC,GAAG,CAAC,gBAAgB,EAAE,+KAO1B,CAAC,CAAC;IAEH,IAAI,CAAC,GAAG,CAAC,gBAAgB,EAAE,oLAO1B,CAAC,CAAC;IAEH,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,wMAOzB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC;AACd,CAAC,CAAC,EAAE,CAAC;AAEL;;GAEG;AACH,gCAAuC,GAAW;IAChD,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACvB,MAAM,CAAC,IAAI,eAAQ,CAAC,IAAI,sBAAe,CAAC;YACtC,MAAM,EAAE,GAAG;YACX,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC;SACzB,CAAC,CAAC,CAAC;IACN,CAAC;IAAC,IAAI,CAAC,CAAC;QACN,MAAM,CAAC,IAAI,eAAQ,CAAC,IAAI,sBAAe,CAAC,EAAC,MAAM,EAAE,GAAG,EAAC,CAAC,CAAC,CAAC;IAC1D,CAAC;AACH,CAAC;AATe,8BAAsB,yBASrC,CAAA","sourcesContent":["import {\n Response,\n ResponseOptions} from '@angular/http';\n\n/**\n * Fake URLs and associated SVG documents used by tests.\n */\nconst FAKE_SVGS = (() => {\n const svgs = new Map();\n svgs.set('cat.svg',\n '');\n\n svgs.set('dog.svg',\n '');\n\n svgs.set('farm-set-1.svg', `\n \n \n \n \n \n \n `);\n\n svgs.set('farm-set-2.svg', `\n \n \n \n \n \n \n `);\n\n svgs.set('arrow-set.svg', `\n \n \n \n \n \n \n `);\n\n return svgs;\n})();\n\n/**\n * Returns an HTTP response for a fake SVG URL.\n */\nexport function getFakeSvgHttpResponse(url: string) {\n if (FAKE_SVGS.has(url)) {\n return new Response(new ResponseOptions({\n status: 200,\n body: FAKE_SVGS.get(url),\n }));\n } else {\n return new Response(new ResponseOptions({status: 404}));\n }\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/icon/icon-registry.d.ts b/DEBUG-merge/components/icon/icon-registry.d.ts new file mode 100644 index 000000000000..5a236530285b --- /dev/null +++ b/DEBUG-merge/components/icon/icon-registry.d.ts @@ -0,0 +1,148 @@ +import { Http } from '@angular/http'; +import { MdError } from '@angular2-material/core/errors/error'; +import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/observable/forkJoin'; +import 'rxjs/add/observable/of'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/filter'; +import 'rxjs/add/operator/do'; +import 'rxjs/add/operator/share'; +import 'rxjs/add/operator/finally'; +import 'rxjs/add/operator/catch'; +/** Exception thrown when attempting to load an icon with a name that cannot be found. */ +export declare class MdIconNameNotFoundError extends MdError { + constructor(iconName: string); +} +/** + * Exception thrown when attempting to load SVG content that does not contain the expected + * tag. + */ +export declare class MdIconSvgTagNotFoundError extends MdError { + constructor(); +} +/** + * Service to register and display icons used by the component. + * - Registers icon URLs by namespace and name. + * - Registers icon set URLs by namespace. + * - Registers aliases for CSS classes, for use with icon fonts. + * - Loads icons from URLs and extracts individual icons from icon sets. + */ +export declare class MdIconRegistry { + private _http; + /** + * URLs and cached SVG elements for individual icons. Keys are of the format "[namespace]:[icon]". + */ + private _svgIconConfigs; + /** + * SvgIconConfig objects and cached SVG elements for icon sets, keyed by namespace. + * Multiple icon sets can be registered under the same namespace. + */ + private _iconSetConfigs; + /** Cache for icons loaded by direct URLs. */ + private _cachedIconsByUrl; + /** In-progress icon fetches. Used to coalesce multiple requests to the same URL. */ + private _inProgressUrlFetches; + /** Map from font identifiers to their CSS class names. Used for icon fonts. */ + private _fontCssClassesByAlias; + /** + * The CSS class to apply when an component has no icon name, url, or font specified. + * The default 'material-icons' value assumes that the material icon font has been loaded as + * described at http://google.github.io/material-design-icons/#icon-font-for-the-web + */ + private _defaultFontSetClass; + constructor(_http: Http); + /** Registers an icon by URL in the default namespace. */ + addSvgIcon(iconName: string, url: string): this; + /** Registers an icon by URL in the specified namespace. */ + addSvgIconInNamespace(namespace: string, iconName: string, url: string): this; + /** Registers an icon set by URL in the default namespace. */ + addSvgIconSet(url: string): this; + /** Registers an icon set by URL in the specified namespace. */ + addSvgIconSetInNamespace(namespace: string, url: string): this; + /** + * Defines an alias for a CSS class name to be used for icon fonts. Creating an mdIcon + * component with the alias as the fontSet input will cause the class name to be applied + * to the element. + */ + registerFontClassAlias(alias: string, className?: string): this; + /** + * Returns the CSS class name associated with the alias by a previous call to + * registerFontClassAlias. If no CSS class has been associated, returns the alias unmodified. + */ + classNameForFontAlias(alias: string): string; + /** + * Sets the CSS class name to be used for icon fonts when an component does not + * have a fontSet input value, and is not loading an icon by name or URL. + */ + setDefaultFontSetClass(className: string): this; + /** + * Returns the CSS class name to be used for icon fonts when an component does not + * have a fontSet input value, and is not loading an icon by name or URL. + */ + getDefaultFontSetClass(): string; + /** + * Returns an Observable that produces the icon (as an DOM element) from the given URL. + * The response from the URL may be cached so this will not always cause an HTTP request, but + * the produced element will always be a new copy of the originally fetched icon. (That is, + * it will not contain any modifications made to elements previously returned). + */ + getSvgIconFromUrl(url: string): Observable; + /** + * Returns an Observable that produces the icon (as an DOM element) with the given name + * and namespace. The icon must have been previously registered with addIcon or addIconSet; + * if not, the Observable will throw an MdIconNameNotFoundError. + */ + getNamedSvgIcon(name: string, namespace?: string): Observable; + /** + * Returns the cached icon for a SvgIconConfig if available, or fetches it from its URL if not. + */ + private _getSvgFromConfig(config); + /** + * Attempts to find an icon with the specified name in any of the SVG icon sets. + * First searches the available cached icons for a nested element with a matching name, and + * if found copies the element to a new element. If not found, fetches all icon sets + * that have not been cached, and searches again after all fetches are completed. + * The returned Observable produces the SVG element if possible, and throws + * MdIconNameNotFoundError if no icon with the specified name can be found. + */ + private _getSvgFromIconSetConfigs(name, iconSetConfigs); + /** + * Searches the cached SVG elements for the given icon sets for a nested icon element whose "id" + * tag matches the specified name. If found, copies the nested element to a new SVG element and + * returns it. Returns null if no matching element is found. + */ + private _extractIconWithNameFromAnySet(iconName, iconSetConfigs); + /** + * Loads the content of the icon URL specified in the SvgIconConfig and creates an SVG element + * from it. + */ + private _loadSvgIconFromConfig(config); + /** + * Loads the content of the icon set URL specified in the SvgIconConfig and creates an SVG element + * from it. + */ + private _loadSvgIconSetFromConfig(config); + /** + * Creates a DOM element from the given SVG string, and adds default attributes. + */ + private _createSvgElementForSingleIcon(responseText, config); + /** + * Searches the cached element of the given SvgIconConfig for a nested icon element whose "id" + * tag matches the specified name. If found, copies the nested element to a new SVG element and + * returns it. Returns null if no matching element is found. + */ + private _extractSvgIconFromSet(iconSet, iconName, config); + /** + * Creates a DOM element from the given SVG string. + */ + private _svgElementFromString(str); + /** + * Sets the default attributes for an SVG element to be used as an icon. + */ + private _setSvgAttributes(svg, config); + /** + * Returns an Observable which produces the string contents of the given URL. Results may be + * cached, so future calls with the same URL may not cause another HTTP request. + */ + private _fetchUrl(url); +} diff --git a/DEBUG-merge/components/icon/icon-registry.js b/DEBUG-merge/components/icon/icon-registry.js new file mode 100644 index 000000000000..5aae60ff5894 --- /dev/null +++ b/DEBUG-merge/components/icon/icon-registry.js @@ -0,0 +1,381 @@ +"use strict"; +var __extends = (this && this.__extends) || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +}; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var http_1 = require('@angular/http'); +var error_1 = require('@angular2-material/core/errors/error'); +var Observable_1 = require('rxjs/Observable'); +require('rxjs/add/observable/forkJoin'); +require('rxjs/add/observable/of'); +require('rxjs/add/operator/map'); +require('rxjs/add/operator/filter'); +require('rxjs/add/operator/do'); +require('rxjs/add/operator/share'); +require('rxjs/add/operator/finally'); +require('rxjs/add/operator/catch'); +/** Exception thrown when attempting to load an icon with a name that cannot be found. */ +var MdIconNameNotFoundError = (function (_super) { + __extends(MdIconNameNotFoundError, _super); + function MdIconNameNotFoundError(iconName) { + _super.call(this, "Unable to find icon with the name \"" + iconName + "\""); + } + return MdIconNameNotFoundError; +}(error_1.MdError)); +exports.MdIconNameNotFoundError = MdIconNameNotFoundError; +/** + * Exception thrown when attempting to load SVG content that does not contain the expected + * tag. + */ +var MdIconSvgTagNotFoundError = (function (_super) { + __extends(MdIconSvgTagNotFoundError, _super); + function MdIconSvgTagNotFoundError() { + _super.call(this, ' tag not found'); + } + return MdIconSvgTagNotFoundError; +}(error_1.MdError)); +exports.MdIconSvgTagNotFoundError = MdIconSvgTagNotFoundError; +/** + * Configuration for an icon, including the URL and possibly the cached SVG element. + * @internal + */ +var SvgIconConfig = (function () { + function SvgIconConfig(url) { + this.url = url; + this.svgElement = null; + } + return SvgIconConfig; +}()); +/** Returns the cache key to use for an icon namespace and name. */ +var iconKey = function (namespace, name) { return namespace + ':' + name; }; +/** + * Service to register and display icons used by the component. + * - Registers icon URLs by namespace and name. + * - Registers icon set URLs by namespace. + * - Registers aliases for CSS classes, for use with icon fonts. + * - Loads icons from URLs and extracts individual icons from icon sets. + */ +var MdIconRegistry = (function () { + function MdIconRegistry(_http) { + this._http = _http; + /** + * URLs and cached SVG elements for individual icons. Keys are of the format "[namespace]:[icon]". + */ + this._svgIconConfigs = new Map(); + /** + * SvgIconConfig objects and cached SVG elements for icon sets, keyed by namespace. + * Multiple icon sets can be registered under the same namespace. + */ + this._iconSetConfigs = new Map(); + /** Cache for icons loaded by direct URLs. */ + this._cachedIconsByUrl = new Map(); + /** In-progress icon fetches. Used to coalesce multiple requests to the same URL. */ + this._inProgressUrlFetches = new Map(); + /** Map from font identifiers to their CSS class names. Used for icon fonts. */ + this._fontCssClassesByAlias = new Map(); + /** + * The CSS class to apply when an component has no icon name, url, or font specified. + * The default 'material-icons' value assumes that the material icon font has been loaded as + * described at http://google.github.io/material-design-icons/#icon-font-for-the-web + */ + this._defaultFontSetClass = 'material-icons'; + } + /** Registers an icon by URL in the default namespace. */ + MdIconRegistry.prototype.addSvgIcon = function (iconName, url) { + return this.addSvgIconInNamespace('', iconName, url); + }; + /** Registers an icon by URL in the specified namespace. */ + MdIconRegistry.prototype.addSvgIconInNamespace = function (namespace, iconName, url) { + var key = iconKey(namespace, iconName); + this._svgIconConfigs.set(key, new SvgIconConfig(url)); + return this; + }; + /** Registers an icon set by URL in the default namespace. */ + MdIconRegistry.prototype.addSvgIconSet = function (url) { + return this.addSvgIconSetInNamespace('', url); + }; + /** Registers an icon set by URL in the specified namespace. */ + MdIconRegistry.prototype.addSvgIconSetInNamespace = function (namespace, url) { + var config = new SvgIconConfig(url); + if (this._iconSetConfigs.has(namespace)) { + this._iconSetConfigs.get(namespace).push(config); + } + else { + this._iconSetConfigs.set(namespace, [config]); + } + return this; + }; + /** + * Defines an alias for a CSS class name to be used for icon fonts. Creating an mdIcon + * component with the alias as the fontSet input will cause the class name to be applied + * to the element. + */ + MdIconRegistry.prototype.registerFontClassAlias = function (alias, className) { + if (className === void 0) { className = alias; } + this._fontCssClassesByAlias.set(alias, className); + return this; + }; + /** + * Returns the CSS class name associated with the alias by a previous call to + * registerFontClassAlias. If no CSS class has been associated, returns the alias unmodified. + */ + MdIconRegistry.prototype.classNameForFontAlias = function (alias) { + return this._fontCssClassesByAlias.get(alias) || alias; + }; + /** + * Sets the CSS class name to be used for icon fonts when an component does not + * have a fontSet input value, and is not loading an icon by name or URL. + */ + MdIconRegistry.prototype.setDefaultFontSetClass = function (className) { + this._defaultFontSetClass = className; + return this; + }; + /** + * Returns the CSS class name to be used for icon fonts when an component does not + * have a fontSet input value, and is not loading an icon by name or URL. + */ + MdIconRegistry.prototype.getDefaultFontSetClass = function () { + return this._defaultFontSetClass; + }; + /** + * Returns an Observable that produces the icon (as an DOM element) from the given URL. + * The response from the URL may be cached so this will not always cause an HTTP request, but + * the produced element will always be a new copy of the originally fetched icon. (That is, + * it will not contain any modifications made to elements previously returned). + */ + MdIconRegistry.prototype.getSvgIconFromUrl = function (url) { + var _this = this; + if (this._cachedIconsByUrl.has(url)) { + return Observable_1.Observable.of(cloneSvg(this._cachedIconsByUrl.get(url))); + } + return this._loadSvgIconFromConfig(new SvgIconConfig(url)) + .do(function (svg) { return _this._cachedIconsByUrl.set(url, svg); }) + .map(function (svg) { return cloneSvg(svg); }); + }; + /** + * Returns an Observable that produces the icon (as an DOM element) with the given name + * and namespace. The icon must have been previously registered with addIcon or addIconSet; + * if not, the Observable will throw an MdIconNameNotFoundError. + */ + MdIconRegistry.prototype.getNamedSvgIcon = function (name, namespace) { + if (namespace === void 0) { namespace = ''; } + // Return (copy of) cached icon if possible. + var key = iconKey(namespace, name); + if (this._svgIconConfigs.has(key)) { + return this._getSvgFromConfig(this._svgIconConfigs.get(key)); + } + // See if we have any icon sets registered for the namespace. + var iconSetConfigs = this._iconSetConfigs.get(namespace); + if (iconSetConfigs) { + return this._getSvgFromIconSetConfigs(name, iconSetConfigs); + } + return Observable_1.Observable.throw(new MdIconNameNotFoundError(key)); + }; + /** + * Returns the cached icon for a SvgIconConfig if available, or fetches it from its URL if not. + */ + MdIconRegistry.prototype._getSvgFromConfig = function (config) { + if (config.svgElement) { + // We already have the SVG element for this icon, return a copy. + return Observable_1.Observable.of(cloneSvg(config.svgElement)); + } + else { + // Fetch the icon from the config's URL, cache it, and return a copy. + return this._loadSvgIconFromConfig(config) + .do(function (svg) { return config.svgElement = svg; }) + .map(function (svg) { return cloneSvg(svg); }); + } + }; + /** + * Attempts to find an icon with the specified name in any of the SVG icon sets. + * First searches the available cached icons for a nested element with a matching name, and + * if found copies the element to a new element. If not found, fetches all icon sets + * that have not been cached, and searches again after all fetches are completed. + * The returned Observable produces the SVG element if possible, and throws + * MdIconNameNotFoundError if no icon with the specified name can be found. + */ + MdIconRegistry.prototype._getSvgFromIconSetConfigs = function (name, iconSetConfigs) { + var _this = this; + // For all the icon set SVG elements we've fetched, see if any contain an icon with the + // requested name. + var namedIcon = this._extractIconWithNameFromAnySet(name, iconSetConfigs); + if (namedIcon) { + // We could cache namedIcon in _svgIconConfigs, but since we have to make a copy every + // time anyway, there's probably not much advantage compared to just always extracting + // it from the icon set. + return Observable_1.Observable.of(namedIcon); + } + // Not found in any cached icon sets. If there are icon sets with URLs that we haven't + // fetched, fetch them now and look for iconName in the results. + var iconSetFetchRequests = iconSetConfigs + .filter(function (iconSetConfig) { return !iconSetConfig.svgElement; }) + .map(function (iconSetConfig) { + return _this._loadSvgIconSetFromConfig(iconSetConfig) + .catch(function (err, caught) { + // Swallow errors fetching individual URLs so the combined Observable won't + // necessarily fail. + console.log("Loading icon set URL: " + iconSetConfig.url + " failed: " + err); + return Observable_1.Observable.of(null); + }) + .do(function (svg) { + // Cache SVG element. + if (svg) { + iconSetConfig.svgElement = svg; + } + }); + }); + // Fetch all the icon set URLs. When the requests complete, every IconSet should have a + // cached SVG element (unless the request failed), and we can check again for the icon. + return Observable_1.Observable.forkJoin(iconSetFetchRequests) + .map(function (ignoredResults) { + var foundIcon = _this._extractIconWithNameFromAnySet(name, iconSetConfigs); + if (!foundIcon) { + throw new MdIconNameNotFoundError(name); + } + return foundIcon; + }); + }; + /** + * Searches the cached SVG elements for the given icon sets for a nested icon element whose "id" + * tag matches the specified name. If found, copies the nested element to a new SVG element and + * returns it. Returns null if no matching element is found. + */ + MdIconRegistry.prototype._extractIconWithNameFromAnySet = function (iconName, iconSetConfigs) { + // Iterate backwards, so icon sets added later have precedence. + for (var i = iconSetConfigs.length - 1; i >= 0; i--) { + var config = iconSetConfigs[i]; + if (config.svgElement) { + var foundIcon = this._extractSvgIconFromSet(config.svgElement, iconName, config); + if (foundIcon) { + return foundIcon; + } + } + } + return null; + }; + /** + * Loads the content of the icon URL specified in the SvgIconConfig and creates an SVG element + * from it. + */ + MdIconRegistry.prototype._loadSvgIconFromConfig = function (config) { + var _this = this; + return this._fetchUrl(config.url) + .map(function (svgText) { return _this._createSvgElementForSingleIcon(svgText, config); }); + }; + /** + * Loads the content of the icon set URL specified in the SvgIconConfig and creates an SVG element + * from it. + */ + MdIconRegistry.prototype._loadSvgIconSetFromConfig = function (config) { + var _this = this; + // TODO: Document that icons should only be loaded from trusted sources. + return this._fetchUrl(config.url) + .map(function (svgText) { return _this._svgElementFromString(svgText); }); + }; + /** + * Creates a DOM element from the given SVG string, and adds default attributes. + */ + MdIconRegistry.prototype._createSvgElementForSingleIcon = function (responseText, config) { + var svg = this._svgElementFromString(responseText); + this._setSvgAttributes(svg, config); + return svg; + }; + /** + * Searches the cached element of the given SvgIconConfig for a nested icon element whose "id" + * tag matches the specified name. If found, copies the nested element to a new SVG element and + * returns it. Returns null if no matching element is found. + */ + MdIconRegistry.prototype._extractSvgIconFromSet = function (iconSet, iconName, config) { + var iconNode = iconSet.querySelector('#' + iconName); + if (!iconNode) { + return null; + } + // If the icon node is itself an node, clone and return it directly. If not, set it as + // the content of a new node. + if (iconNode.tagName.toLowerCase() == 'svg') { + return this._setSvgAttributes(iconNode.cloneNode(true), config); + } + // createElement('SVG') doesn't work as expected; the DOM ends up with + // the correct nodes, but the SVG content doesn't render. Instead we + // have to create an empty SVG node using innerHTML and append its content. + // Elements created using DOMParser.parseFromString have the same problem. + // http://stackoverflow.com/questions/23003278/svg-innerhtml-in-firefox-can-not-display + var svg = this._svgElementFromString(''); + // Clone the node so we don't remove it from the parent icon set element. + svg.appendChild(iconNode.cloneNode(true)); + return this._setSvgAttributes(svg, config); + }; + /** + * Creates a DOM element from the given SVG string. + */ + MdIconRegistry.prototype._svgElementFromString = function (str) { + // TODO: Is there a better way than innerHTML? Renderer doesn't appear to have a method for + // creating an element from an HTML string. + var div = document.createElement('DIV'); + div.innerHTML = str; + var svg = div.querySelector('svg'); + if (!svg) { + throw new MdIconSvgTagNotFoundError(); + } + return svg; + }; + /** + * Sets the default attributes for an SVG element to be used as an icon. + */ + MdIconRegistry.prototype._setSvgAttributes = function (svg, config) { + if (!svg.getAttribute('xmlns')) { + svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); + } + svg.setAttribute('fit', ''); + svg.setAttribute('height', '100%'); + svg.setAttribute('width', '100%'); + svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); + svg.setAttribute('focusable', 'false'); // Disable IE11 default behavior to make SVGs focusable. + return svg; + }; + /** + * Returns an Observable which produces the string contents of the given URL. Results may be + * cached, so future calls with the same URL may not cause another HTTP request. + */ + MdIconRegistry.prototype._fetchUrl = function (url) { + var _this = this; + // Store in-progress fetches to avoid sending a duplicate request for a URL when there is + // already a request in progress for that URL. It's necessary to call share() on the + // Observable returned by http.get() so that multiple subscribers don't cause multiple XHRs. + if (this._inProgressUrlFetches.has(url)) { + return this._inProgressUrlFetches.get(url); + } + // TODO(jelbourn): for some reason, the `finally` operator "loses" the generic type on the + // Observable. Figure out why and fix it. + var req = this._http.get(url) + .map(function (response) { return response.text(); }) + .finally(function () { + _this._inProgressUrlFetches.delete(url); + }) + .share(); + this._inProgressUrlFetches.set(url, req); + return req; + }; + MdIconRegistry = __decorate([ + core_1.Injectable(), + __metadata('design:paramtypes', [http_1.Http]) + ], MdIconRegistry); + return MdIconRegistry; +}()); +exports.MdIconRegistry = MdIconRegistry; +/** Clones an SVGElement while preserving type information. */ +function cloneSvg(svg) { + return svg.cloneNode(true); +} +//# sourceMappingURL=../../../../components/icon/icon-registry.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/icon/icon-registry.js.map b/DEBUG-merge/components/icon/icon-registry.js.map new file mode 100644 index 000000000000..de3fc4590e18 --- /dev/null +++ b/DEBUG-merge/components/icon/icon-registry.js.map @@ -0,0 +1 @@ +{"version":3,"file":"icon-registry.js","sourceRoot":"","sources":["../../src/demo-app/components/icon/icon-registry.ts"],"names":[],"mappings":"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","sourcesContent":["import {Injectable} from '@angular/core';\nimport {Http} from '@angular/http';\nimport {MdError} from '@angular2-material/core/errors/error';\nimport {Observable} from 'rxjs/Observable';\nimport 'rxjs/add/observable/forkJoin';\nimport 'rxjs/add/observable/of';\nimport 'rxjs/add/operator/map';\nimport 'rxjs/add/operator/filter';\nimport 'rxjs/add/operator/do';\nimport 'rxjs/add/operator/share';\nimport 'rxjs/add/operator/finally';\nimport 'rxjs/add/operator/catch';\n\n\n/** Exception thrown when attempting to load an icon with a name that cannot be found. */\nexport class MdIconNameNotFoundError extends MdError {\n constructor(iconName: string) {\n super(`Unable to find icon with the name \"${iconName}\"`);\n }\n}\n\n/**\n * Exception thrown when attempting to load SVG content that does not contain the expected\n * tag.\n */\nexport class MdIconSvgTagNotFoundError extends MdError {\n constructor() {\n super(' tag not found');\n }\n}\n\n/**\n * Configuration for an icon, including the URL and possibly the cached SVG element.\n * @internal\n */\nclass SvgIconConfig {\n svgElement: SVGElement = null;\n constructor(public url: string) {\n }\n}\n\n/** Returns the cache key to use for an icon namespace and name. */\nconst iconKey = (namespace: string, name: string) => namespace + ':' + name;\n\n/**\n * Service to register and display icons used by the component.\n * - Registers icon URLs by namespace and name.\n * - Registers icon set URLs by namespace.\n * - Registers aliases for CSS classes, for use with icon fonts.\n * - Loads icons from URLs and extracts individual icons from icon sets.\n */\n@Injectable()\nexport class MdIconRegistry {\n /**\n * URLs and cached SVG elements for individual icons. Keys are of the format \"[namespace]:[icon]\".\n */\n private _svgIconConfigs = new Map();\n\n /**\n * SvgIconConfig objects and cached SVG elements for icon sets, keyed by namespace.\n * Multiple icon sets can be registered under the same namespace.\n */\n private _iconSetConfigs = new Map();\n\n /** Cache for icons loaded by direct URLs. */\n private _cachedIconsByUrl = new Map();\n\n /** In-progress icon fetches. Used to coalesce multiple requests to the same URL. */\n private _inProgressUrlFetches = new Map>();\n\n /** Map from font identifiers to their CSS class names. Used for icon fonts. */\n private _fontCssClassesByAlias = new Map();\n\n /**\n * The CSS class to apply when an component has no icon name, url, or font specified.\n * The default 'material-icons' value assumes that the material icon font has been loaded as\n * described at http://google.github.io/material-design-icons/#icon-font-for-the-web\n */\n private _defaultFontSetClass = 'material-icons';\n\n constructor(private _http: Http) {}\n\n /** Registers an icon by URL in the default namespace. */\n addSvgIcon(iconName: string, url: string): this {\n return this.addSvgIconInNamespace('', iconName, url);\n }\n\n /** Registers an icon by URL in the specified namespace. */\n addSvgIconInNamespace(namespace: string, iconName: string, url: string): this {\n const key = iconKey(namespace, iconName);\n this._svgIconConfigs.set(key, new SvgIconConfig(url));\n return this;\n }\n\n /** Registers an icon set by URL in the default namespace. */\n addSvgIconSet(url: string): this {\n return this.addSvgIconSetInNamespace('', url);\n }\n\n /** Registers an icon set by URL in the specified namespace. */\n addSvgIconSetInNamespace(namespace: string, url: string): this {\n const config = new SvgIconConfig(url);\n if (this._iconSetConfigs.has(namespace)) {\n this._iconSetConfigs.get(namespace).push(config);\n } else {\n this._iconSetConfigs.set(namespace, [config]);\n }\n return this;\n }\n\n /**\n * Defines an alias for a CSS class name to be used for icon fonts. Creating an mdIcon\n * component with the alias as the fontSet input will cause the class name to be applied\n * to the element.\n */\n registerFontClassAlias(alias: string, className = alias): this {\n this._fontCssClassesByAlias.set(alias, className);\n return this;\n }\n\n /**\n * Returns the CSS class name associated with the alias by a previous call to\n * registerFontClassAlias. If no CSS class has been associated, returns the alias unmodified.\n */\n classNameForFontAlias(alias: string): string {\n return this._fontCssClassesByAlias.get(alias) || alias;\n }\n\n /**\n * Sets the CSS class name to be used for icon fonts when an component does not\n * have a fontSet input value, and is not loading an icon by name or URL.\n */\n setDefaultFontSetClass(className: string): this {\n this._defaultFontSetClass = className;\n return this;\n }\n\n /**\n * Returns the CSS class name to be used for icon fonts when an component does not\n * have a fontSet input value, and is not loading an icon by name or URL.\n */\n getDefaultFontSetClass(): string {\n return this._defaultFontSetClass;\n }\n\n /**\n * Returns an Observable that produces the icon (as an DOM element) from the given URL.\n * The response from the URL may be cached so this will not always cause an HTTP request, but\n * the produced element will always be a new copy of the originally fetched icon. (That is,\n * it will not contain any modifications made to elements previously returned).\n */\n getSvgIconFromUrl(url: string): Observable {\n if (this._cachedIconsByUrl.has(url)) {\n return Observable.of(cloneSvg(this._cachedIconsByUrl.get(url)));\n }\n return this._loadSvgIconFromConfig(new SvgIconConfig(url))\n .do(svg => this._cachedIconsByUrl.set(url, svg))\n .map(svg => cloneSvg(svg));\n }\n\n /**\n * Returns an Observable that produces the icon (as an DOM element) with the given name\n * and namespace. The icon must have been previously registered with addIcon or addIconSet;\n * if not, the Observable will throw an MdIconNameNotFoundError.\n */\n getNamedSvgIcon(name: string, namespace = ''): Observable {\n // Return (copy of) cached icon if possible.\n const key = iconKey(namespace, name);\n if (this._svgIconConfigs.has(key)) {\n return this._getSvgFromConfig(this._svgIconConfigs.get(key));\n }\n // See if we have any icon sets registered for the namespace.\n const iconSetConfigs = this._iconSetConfigs.get(namespace);\n if (iconSetConfigs) {\n return this._getSvgFromIconSetConfigs(name, iconSetConfigs);\n }\n return Observable.throw(new MdIconNameNotFoundError(key));\n }\n\n /**\n * Returns the cached icon for a SvgIconConfig if available, or fetches it from its URL if not.\n */\n private _getSvgFromConfig(config: SvgIconConfig): Observable {\n if (config.svgElement) {\n // We already have the SVG element for this icon, return a copy.\n return Observable.of(cloneSvg(config.svgElement));\n } else {\n // Fetch the icon from the config's URL, cache it, and return a copy.\n return this._loadSvgIconFromConfig(config)\n .do(svg => config.svgElement = svg)\n .map(svg => cloneSvg(svg));\n }\n }\n\n /**\n * Attempts to find an icon with the specified name in any of the SVG icon sets.\n * First searches the available cached icons for a nested element with a matching name, and\n * if found copies the element to a new element. If not found, fetches all icon sets\n * that have not been cached, and searches again after all fetches are completed.\n * The returned Observable produces the SVG element if possible, and throws\n * MdIconNameNotFoundError if no icon with the specified name can be found.\n */\n private _getSvgFromIconSetConfigs(name: string, iconSetConfigs: SvgIconConfig[]):\n Observable {\n // For all the icon set SVG elements we've fetched, see if any contain an icon with the\n // requested name.\n const namedIcon = this._extractIconWithNameFromAnySet(name, iconSetConfigs);\n if (namedIcon) {\n // We could cache namedIcon in _svgIconConfigs, but since we have to make a copy every\n // time anyway, there's probably not much advantage compared to just always extracting\n // it from the icon set.\n return Observable.of(namedIcon);\n }\n // Not found in any cached icon sets. If there are icon sets with URLs that we haven't\n // fetched, fetch them now and look for iconName in the results.\n const iconSetFetchRequests: Observable[] = iconSetConfigs\n .filter(iconSetConfig => !iconSetConfig.svgElement)\n .map(iconSetConfig =>\n this._loadSvgIconSetFromConfig(iconSetConfig)\n .catch((err: any, caught: Observable): Observable => {\n // Swallow errors fetching individual URLs so the combined Observable won't\n // necessarily fail.\n console.log(`Loading icon set URL: ${iconSetConfig.url} failed: ${err}`);\n return Observable.of(null);\n })\n .do(svg => {\n // Cache SVG element.\n if (svg) {\n iconSetConfig.svgElement = svg;\n }\n }));\n // Fetch all the icon set URLs. When the requests complete, every IconSet should have a\n // cached SVG element (unless the request failed), and we can check again for the icon.\n return Observable.forkJoin(iconSetFetchRequests)\n .map((ignoredResults: any) => {\n const foundIcon = this._extractIconWithNameFromAnySet(name, iconSetConfigs);\n if (!foundIcon) {\n throw new MdIconNameNotFoundError(name);\n }\n return foundIcon;\n });\n }\n\n /**\n * Searches the cached SVG elements for the given icon sets for a nested icon element whose \"id\"\n * tag matches the specified name. If found, copies the nested element to a new SVG element and\n * returns it. Returns null if no matching element is found.\n */\n private _extractIconWithNameFromAnySet(iconName: string, iconSetConfigs: SvgIconConfig[]):\n SVGElement {\n // Iterate backwards, so icon sets added later have precedence.\n for (let i = iconSetConfigs.length - 1; i >= 0; i--) {\n const config = iconSetConfigs[i];\n if (config.svgElement) {\n const foundIcon = this._extractSvgIconFromSet(config.svgElement, iconName, config);\n if (foundIcon) {\n return foundIcon;\n }\n }\n }\n return null;\n }\n\n /**\n * Loads the content of the icon URL specified in the SvgIconConfig and creates an SVG element\n * from it.\n */\n private _loadSvgIconFromConfig(config: SvgIconConfig): Observable {\n return this._fetchUrl(config.url)\n .map(svgText => this._createSvgElementForSingleIcon(svgText, config));\n }\n\n /**\n * Loads the content of the icon set URL specified in the SvgIconConfig and creates an SVG element\n * from it.\n */\n private _loadSvgIconSetFromConfig(config: SvgIconConfig): Observable {\n // TODO: Document that icons should only be loaded from trusted sources.\n return this._fetchUrl(config.url)\n .map((svgText) => this._svgElementFromString(svgText));\n }\n\n /**\n * Creates a DOM element from the given SVG string, and adds default attributes.\n */\n private _createSvgElementForSingleIcon(responseText: string, config: SvgIconConfig): SVGElement {\n const svg = this._svgElementFromString(responseText);\n this._setSvgAttributes(svg, config);\n return svg;\n }\n\n /**\n * Searches the cached element of the given SvgIconConfig for a nested icon element whose \"id\"\n * tag matches the specified name. If found, copies the nested element to a new SVG element and\n * returns it. Returns null if no matching element is found.\n */\n private _extractSvgIconFromSet(\n iconSet: SVGElement, iconName: string, config: SvgIconConfig): SVGElement {\n const iconNode = iconSet.querySelector('#' + iconName);\n if (!iconNode) {\n return null;\n }\n // If the icon node is itself an node, clone and return it directly. If not, set it as\n // the content of a new node.\n if (iconNode.tagName.toLowerCase() == 'svg') {\n return this._setSvgAttributes(iconNode.cloneNode(true), config);\n }\n // createElement('SVG') doesn't work as expected; the DOM ends up with\n // the correct nodes, but the SVG content doesn't render. Instead we\n // have to create an empty SVG node using innerHTML and append its content.\n // Elements created using DOMParser.parseFromString have the same problem.\n // http://stackoverflow.com/questions/23003278/svg-innerhtml-in-firefox-can-not-display\n const svg = this._svgElementFromString('');\n // Clone the node so we don't remove it from the parent icon set element.\n svg.appendChild(iconNode.cloneNode(true));\n return this._setSvgAttributes(svg, config);\n }\n\n /**\n * Creates a DOM element from the given SVG string.\n */\n private _svgElementFromString(str: string): SVGElement {\n // TODO: Is there a better way than innerHTML? Renderer doesn't appear to have a method for\n // creating an element from an HTML string.\n const div = document.createElement('DIV');\n div.innerHTML = str;\n const svg = div.querySelector('svg');\n if (!svg) {\n throw new MdIconSvgTagNotFoundError();\n }\n return svg;\n }\n\n /**\n * Sets the default attributes for an SVG element to be used as an icon.\n */\n private _setSvgAttributes(svg: SVGElement, config: SvgIconConfig): SVGElement {\n if (!svg.getAttribute('xmlns')) {\n svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n }\n svg.setAttribute('fit', '');\n svg.setAttribute('height', '100%');\n svg.setAttribute('width', '100%');\n svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');\n svg.setAttribute('focusable', 'false'); // Disable IE11 default behavior to make SVGs focusable.\n return svg;\n }\n\n /**\n * Returns an Observable which produces the string contents of the given URL. Results may be\n * cached, so future calls with the same URL may not cause another HTTP request.\n */\n private _fetchUrl(url: string): Observable {\n // Store in-progress fetches to avoid sending a duplicate request for a URL when there is\n // already a request in progress for that URL. It's necessary to call share() on the\n // Observable returned by http.get() so that multiple subscribers don't cause multiple XHRs.\n if (this._inProgressUrlFetches.has(url)) {\n return this._inProgressUrlFetches.get(url);\n }\n\n // TODO(jelbourn): for some reason, the `finally` operator \"loses\" the generic type on the\n // Observable. Figure out why and fix it.\n const req = > this._http.get(url)\n .map(response => response.text())\n .finally(() => {\n this._inProgressUrlFetches.delete(url);\n })\n .share();\n this._inProgressUrlFetches.set(url, req);\n return req;\n }\n}\n\n\n/** Clones an SVGElement while preserving type information. */\nfunction cloneSvg(svg: SVGElement) {\n return svg.cloneNode(true);\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/icon/icon.css b/DEBUG-merge/components/icon/icon.css new file mode 100644 index 000000000000..04dc84ba51af --- /dev/null +++ b/DEBUG-merge/components/icon/icon.css @@ -0,0 +1,11 @@ +/** The width/height of the icon element. */ +/** +This works because we're using ViewEncapsulation.None. If we used the default +encapsulation, the selector would need to be ":host". +*/ +md-icon { + background-repeat: no-repeat; + display: inline-block; + fill: currentColor; + height: 24px; + width: 24px; } diff --git a/DEBUG-merge/components/icon/icon.d.ts b/DEBUG-merge/components/icon/icon.d.ts new file mode 100644 index 000000000000..c9f352d5530a --- /dev/null +++ b/DEBUG-merge/components/icon/icon.d.ts @@ -0,0 +1,83 @@ +import { ElementRef, OnChanges, OnInit, Renderer, SimpleChange, AfterViewChecked } from '@angular/core'; +import { MdError } from '@angular2-material/core/errors/error'; +import { MdIconRegistry } from './icon-registry'; +export { MdIconRegistry } from './icon-registry'; +/** Exception thrown when an invalid icon name is passed to an md-icon component. */ +export declare class MdIconInvalidNameError extends MdError { + constructor(iconName: string); +} +/** + * Component to display an icon. It can be used in the following ways: + * - Specify the svgSrc input to load an SVG icon from a URL. The SVG content is directly inlined + * as a child of the component, so that CSS styles can easily be applied to it. + * The URL is loaded via an XMLHttpRequest, so it must be on the same domain as the page or its + * server must be configured to allow cross-domain requests. + * Example: + * + * + * - Specify the svgIcon input to load an SVG icon from a URL previously registered with the + * addSvgIcon, addSvgIconInNamespace, addSvgIconSet, or addSvgIconSetInNamespace methods of + * MdIconRegistry. If the svgIcon value contains a colon it is assumed to be in the format + * "[namespace]:[name]", if not the value will be the name of an icon in the default namespace. + * Examples: + * + * + * + * - Use a font ligature as an icon by putting the ligature text in the content of the + * component. By default the Material icons font is used as described at + * http://google.github.io/material-design-icons/#icon-font-for-the-web. You can specify an + * alternate font by setting the fontSet input to either the CSS class to apply to use the + * desired font, or to an alias previously registered with MdIconRegistry.registerFontClassAlias. + * Examples: + * home + * sun + * + * - Specify a font glyph to be included via CSS rules by setting the fontSet input to specify the + * font, and the fontIcon input to specify the icon. Typically the fontIcon will specify a + * CSS class which causes the glyph to be displayed via a :before selector, as in + * https://fortawesome.github.io/Font-Awesome/examples/ + * Example: + * + */ +export declare class MdIcon implements OnChanges, OnInit, AfterViewChecked { + private _element; + private _renderer; + private _mdIconRegistry; + svgSrc: string; + svgIcon: string; + fontSet: string; + fontIcon: string; + alt: string; + hostAriaLabel: string; + private _previousFontSetClass; + private _previousFontIconClass; + constructor(_element: ElementRef, _renderer: Renderer, _mdIconRegistry: MdIconRegistry); + /** + * Splits an svgIcon binding value into its icon set and icon name components. + * Returns a 2-element array of [(icon set), (icon name)]. + * The separator for the two fields is ':'. If there is no separator, an empty + * string is returned for the icon set and the entire value is returned for + * the icon name. If the argument is falsy, returns an array of two empty strings. + * Throws a MdIconInvalidNameError if the name contains two or more ':' separators. + * Examples: + * 'social:cake' -> ['social', 'cake'] + * 'penguin' -> ['', 'penguin'] + * null -> ['', ''] + * 'a:b:c' -> (throws MdIconInvalidNameError) + */ + private _splitIconName(iconName); + /** TODO: internal */ + ngOnChanges(changes: { + [propertyName: string]: SimpleChange; + }): void; + /** TODO: internal */ + ngOnInit(): void; + /** TODO: internal */ + ngAfterViewChecked(): void; + private _updateAriaLabel(); + private _getAriaLabel(); + private _usingFontIcon(); + private _setSvgElement(svg); + private _updateFontIconClasses(); +} +export declare const MD_ICON_DIRECTIVES: typeof MdIcon[]; diff --git a/DEBUG-merge/components/icon/icon.js b/DEBUG-merge/components/icon/icon.js new file mode 100644 index 000000000000..228075e7a7e8 --- /dev/null +++ b/DEBUG-merge/components/icon/icon.js @@ -0,0 +1,238 @@ +"use strict"; +var __extends = (this && this.__extends) || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +}; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var error_1 = require('@angular2-material/core/errors/error'); +var icon_registry_1 = require('./icon-registry'); +var icon_registry_2 = require('./icon-registry'); +exports.MdIconRegistry = icon_registry_2.MdIconRegistry; +/** Exception thrown when an invalid icon name is passed to an md-icon component. */ +var MdIconInvalidNameError = (function (_super) { + __extends(MdIconInvalidNameError, _super); + function MdIconInvalidNameError(iconName) { + _super.call(this, "Invalid icon name: \"" + name + "\""); + } + return MdIconInvalidNameError; +}(error_1.MdError)); +exports.MdIconInvalidNameError = MdIconInvalidNameError; +/** + * Component to display an icon. It can be used in the following ways: + * - Specify the svgSrc input to load an SVG icon from a URL. The SVG content is directly inlined + * as a child of the component, so that CSS styles can easily be applied to it. + * The URL is loaded via an XMLHttpRequest, so it must be on the same domain as the page or its + * server must be configured to allow cross-domain requests. + * Example: + * + * + * - Specify the svgIcon input to load an SVG icon from a URL previously registered with the + * addSvgIcon, addSvgIconInNamespace, addSvgIconSet, or addSvgIconSetInNamespace methods of + * MdIconRegistry. If the svgIcon value contains a colon it is assumed to be in the format + * "[namespace]:[name]", if not the value will be the name of an icon in the default namespace. + * Examples: + * + * + * + * - Use a font ligature as an icon by putting the ligature text in the content of the + * component. By default the Material icons font is used as described at + * http://google.github.io/material-design-icons/#icon-font-for-the-web. You can specify an + * alternate font by setting the fontSet input to either the CSS class to apply to use the + * desired font, or to an alias previously registered with MdIconRegistry.registerFontClassAlias. + * Examples: + * home + * sun + * + * - Specify a font glyph to be included via CSS rules by setting the fontSet input to specify the + * font, and the fontIcon input to specify the icon. Typically the fontIcon will specify a + * CSS class which causes the glyph to be displayed via a :before selector, as in + * https://fortawesome.github.io/Font-Awesome/examples/ + * Example: + * + */ +var MdIcon = (function () { + function MdIcon(_element, _renderer, _mdIconRegistry) { + this._element = _element; + this._renderer = _renderer; + this._mdIconRegistry = _mdIconRegistry; + this.hostAriaLabel = ''; + } + /** + * Splits an svgIcon binding value into its icon set and icon name components. + * Returns a 2-element array of [(icon set), (icon name)]. + * The separator for the two fields is ':'. If there is no separator, an empty + * string is returned for the icon set and the entire value is returned for + * the icon name. If the argument is falsy, returns an array of two empty strings. + * Throws a MdIconInvalidNameError if the name contains two or more ':' separators. + * Examples: + * 'social:cake' -> ['social', 'cake'] + * 'penguin' -> ['', 'penguin'] + * null -> ['', ''] + * 'a:b:c' -> (throws MdIconInvalidNameError) + */ + MdIcon.prototype._splitIconName = function (iconName) { + if (!iconName) { + return ['', '']; + } + var parts = iconName.split(':'); + switch (parts.length) { + case 1: + // Use default namespace. + return ['', parts[0]]; + case 2: + return parts; + default: + throw new MdIconInvalidNameError(iconName); + } + }; + /** TODO: internal */ + MdIcon.prototype.ngOnChanges = function (changes) { + var _this = this; + var changedInputs = Object.keys(changes); + // Only update the inline SVG icon if the inputs changed, to avoid unnecessary DOM operations. + if (changedInputs.indexOf('svgIcon') != -1 || changedInputs.indexOf('svgSrc') != -1) { + if (this.svgIcon) { + var _a = this._splitIconName(this.svgIcon), namespace = _a[0], iconName = _a[1]; + this._mdIconRegistry.getNamedSvgIcon(iconName, namespace).subscribe(function (svg) { return _this._setSvgElement(svg); }, function (err) { return console.log("Error retrieving icon: " + err); }); + } + else if (this.svgSrc) { + this._mdIconRegistry.getSvgIconFromUrl(this.svgSrc).subscribe(function (svg) { return _this._setSvgElement(svg); }, function (err) { return console.log("Error retrieving icon: " + err); }); + } + } + if (this._usingFontIcon()) { + this._updateFontIconClasses(); + } + this._updateAriaLabel(); + }; + /** TODO: internal */ + MdIcon.prototype.ngOnInit = function () { + // Update font classes because ngOnChanges won't be called if none of the inputs are present, + // e.g. arrow. In this case we need to add a CSS class for the default font. + if (this._usingFontIcon()) { + this._updateFontIconClasses(); + } + }; + /** TODO: internal */ + MdIcon.prototype.ngAfterViewChecked = function () { + // Update aria label here because it may depend on the projected text content. + // (e.g. home should use 'home'). + this._updateAriaLabel(); + }; + MdIcon.prototype._updateAriaLabel = function () { + var ariaLabel = this._getAriaLabel(); + if (ariaLabel) { + this._renderer.setElementAttribute(this._element.nativeElement, 'aria-label', ariaLabel); + } + }; + MdIcon.prototype._getAriaLabel = function () { + // If the parent provided an aria-label attribute value, use it as-is. Otherwise look for a + // reasonable value from the alt attribute, font icon name, SVG icon name, or (for ligatures) + // the text content of the directive. + var label = this.hostAriaLabel || + this.alt || + this.fontIcon || + this._splitIconName(this.svgIcon)[1]; + if (label) { + return label; + } + // The "content" of an SVG icon is not a useful label. + if (this._usingFontIcon()) { + var text = this._element.nativeElement.textContent; + if (text) { + return text; + } + } + // TODO: Warn here in dev mode. + return null; + }; + MdIcon.prototype._usingFontIcon = function () { + return !(this.svgIcon || this.svgSrc); + }; + MdIcon.prototype._setSvgElement = function (svg) { + var layoutElement = this._element.nativeElement; + // Remove existing child nodes and add the new SVG element. + // We would use renderer.detachView(Array.from(layoutElement.childNodes)) here, + // but it fails in IE11: https://github.com/angular/angular/issues/6327 + layoutElement.innerHTML = ''; + this._renderer.projectNodes(layoutElement, [svg]); + }; + MdIcon.prototype._updateFontIconClasses = function () { + if (!this._usingFontIcon()) { + return; + } + var elem = this._element.nativeElement; + var fontSetClass = this.fontSet ? + this._mdIconRegistry.classNameForFontAlias(this.fontSet) : + this._mdIconRegistry.getDefaultFontSetClass(); + if (fontSetClass != this._previousFontSetClass) { + if (this._previousFontSetClass) { + this._renderer.setElementClass(elem, this._previousFontSetClass, false); + } + if (fontSetClass) { + this._renderer.setElementClass(elem, fontSetClass, true); + } + this._previousFontSetClass = fontSetClass; + } + if (this.fontIcon != this._previousFontIconClass) { + if (this._previousFontIconClass) { + this._renderer.setElementClass(elem, this._previousFontIconClass, false); + } + if (this.fontIcon) { + this._renderer.setElementClass(elem, this.fontIcon, true); + } + this._previousFontIconClass = this.fontIcon; + } + }; + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdIcon.prototype, "svgSrc", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdIcon.prototype, "svgIcon", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdIcon.prototype, "fontSet", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdIcon.prototype, "fontIcon", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdIcon.prototype, "alt", void 0); + __decorate([ + core_1.Input('aria-label'), + __metadata('design:type', String) + ], MdIcon.prototype, "hostAriaLabel", void 0); + MdIcon = __decorate([ + core_1.Component({ + moduleId: module.id, + template: '', + selector: 'md-icon', + styleUrls: ['icon.css'], + host: { + 'role': 'img', + }, + encapsulation: core_1.ViewEncapsulation.None, + changeDetection: core_1.ChangeDetectionStrategy.OnPush, + }), + __metadata('design:paramtypes', [core_1.ElementRef, core_1.Renderer, icon_registry_1.MdIconRegistry]) + ], MdIcon); + return MdIcon; +}()); +exports.MdIcon = MdIcon; +exports.MD_ICON_DIRECTIVES = [MdIcon]; +//# sourceMappingURL=../../../../components/icon/icon.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/icon/icon.js.map b/DEBUG-merge/components/icon/icon.js.map new file mode 100644 index 000000000000..d1ce3aad7789 --- /dev/null +++ b/DEBUG-merge/components/icon/icon.js.map @@ -0,0 +1 @@ +{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../src/demo-app/components/icon/icon.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Input,\n OnChanges,\n OnInit,\n Renderer,\n SimpleChange,\n ViewEncapsulation,\n AfterViewChecked\n} from '@angular/core';\nimport {MdError} from '@angular2-material/core/errors/error';\nimport {MdIconRegistry} from './icon-registry';\nexport {MdIconRegistry} from './icon-registry';\n\n\n/** Exception thrown when an invalid icon name is passed to an md-icon component. */\nexport class MdIconInvalidNameError extends MdError {\n constructor(iconName: string) {\n super(`Invalid icon name: \"${name}\"`);\n }\n}\n\n/**\n * Component to display an icon. It can be used in the following ways:\n * - Specify the svgSrc input to load an SVG icon from a URL. The SVG content is directly inlined\n * as a child of the component, so that CSS styles can easily be applied to it.\n * The URL is loaded via an XMLHttpRequest, so it must be on the same domain as the page or its\n * server must be configured to allow cross-domain requests.\n * Example:\n * \n *\n * - Specify the svgIcon input to load an SVG icon from a URL previously registered with the\n * addSvgIcon, addSvgIconInNamespace, addSvgIconSet, or addSvgIconSetInNamespace methods of\n * MdIconRegistry. If the svgIcon value contains a colon it is assumed to be in the format\n * \"[namespace]:[name]\", if not the value will be the name of an icon in the default namespace.\n * Examples:\n * \n * \n *\n * - Use a font ligature as an icon by putting the ligature text in the content of the \n * component. By default the Material icons font is used as described at\n * http://google.github.io/material-design-icons/#icon-font-for-the-web. You can specify an\n * alternate font by setting the fontSet input to either the CSS class to apply to use the\n * desired font, or to an alias previously registered with MdIconRegistry.registerFontClassAlias.\n * Examples:\n * home\n * sun\n *\n * - Specify a font glyph to be included via CSS rules by setting the fontSet input to specify the\n * font, and the fontIcon input to specify the icon. Typically the fontIcon will specify a\n * CSS class which causes the glyph to be displayed via a :before selector, as in\n * https://fortawesome.github.io/Font-Awesome/examples/\n * Example:\n * \n */\n@Component({\n moduleId: module.id,\n template: '',\n selector: 'md-icon',\n styleUrls: ['icon.css'],\n host: {\n 'role': 'img',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MdIcon implements OnChanges, OnInit, AfterViewChecked {\n @Input() svgSrc: string;\n @Input() svgIcon: string;\n @Input() fontSet: string;\n @Input() fontIcon: string;\n @Input() alt: string;\n\n @Input('aria-label') hostAriaLabel: string = '';\n\n private _previousFontSetClass: string;\n private _previousFontIconClass: string;\n\n constructor(\n private _element: ElementRef,\n private _renderer: Renderer,\n private _mdIconRegistry: MdIconRegistry) { }\n\n /**\n * Splits an svgIcon binding value into its icon set and icon name components.\n * Returns a 2-element array of [(icon set), (icon name)].\n * The separator for the two fields is ':'. If there is no separator, an empty\n * string is returned for the icon set and the entire value is returned for\n * the icon name. If the argument is falsy, returns an array of two empty strings.\n * Throws a MdIconInvalidNameError if the name contains two or more ':' separators.\n * Examples:\n * 'social:cake' -> ['social', 'cake']\n * 'penguin' -> ['', 'penguin']\n * null -> ['', '']\n * 'a:b:c' -> (throws MdIconInvalidNameError)\n */\n private _splitIconName(iconName: string): [string, string] {\n if (!iconName) {\n return ['', ''];\n }\n const parts = iconName.split(':');\n switch (parts.length) {\n case 1:\n // Use default namespace.\n return ['', parts[0]];\n case 2:\n return <[string, string]>parts;\n default:\n throw new MdIconInvalidNameError(iconName);\n }\n }\n\n /** TODO: internal */\n ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {\n const changedInputs = Object.keys(changes);\n // Only update the inline SVG icon if the inputs changed, to avoid unnecessary DOM operations.\n if (changedInputs.indexOf('svgIcon') != -1 || changedInputs.indexOf('svgSrc') != -1) {\n if (this.svgIcon) {\n const [namespace, iconName] = this._splitIconName(this.svgIcon);\n this._mdIconRegistry.getNamedSvgIcon(iconName, namespace).subscribe(\n svg => this._setSvgElement(svg),\n (err: any) => console.log(`Error retrieving icon: ${err}`));\n } else if (this.svgSrc) {\n this._mdIconRegistry.getSvgIconFromUrl(this.svgSrc).subscribe(\n svg => this._setSvgElement(svg),\n (err: any) => console.log(`Error retrieving icon: ${err}`));\n }\n }\n if (this._usingFontIcon()) {\n this._updateFontIconClasses();\n }\n this._updateAriaLabel();\n }\n\n /** TODO: internal */\n ngOnInit() {\n // Update font classes because ngOnChanges won't be called if none of the inputs are present,\n // e.g. arrow. In this case we need to add a CSS class for the default font.\n if (this._usingFontIcon()) {\n this._updateFontIconClasses();\n }\n }\n\n /** TODO: internal */\n ngAfterViewChecked() {\n // Update aria label here because it may depend on the projected text content.\n // (e.g. home should use 'home').\n this._updateAriaLabel();\n }\n\n private _updateAriaLabel() {\n const ariaLabel = this._getAriaLabel();\n if (ariaLabel) {\n this._renderer.setElementAttribute(this._element.nativeElement, 'aria-label', ariaLabel);\n }\n }\n\n private _getAriaLabel() {\n // If the parent provided an aria-label attribute value, use it as-is. Otherwise look for a\n // reasonable value from the alt attribute, font icon name, SVG icon name, or (for ligatures)\n // the text content of the directive.\n const label =\n this.hostAriaLabel ||\n this.alt ||\n this.fontIcon ||\n this._splitIconName(this.svgIcon)[1];\n if (label) {\n return label;\n }\n // The \"content\" of an SVG icon is not a useful label.\n if (this._usingFontIcon()) {\n const text = this._element.nativeElement.textContent;\n if (text) {\n return text;\n }\n }\n // TODO: Warn here in dev mode.\n return null;\n }\n\n private _usingFontIcon(): boolean {\n return !(this.svgIcon || this.svgSrc);\n }\n\n private _setSvgElement(svg: SVGElement) {\n const layoutElement = this._element.nativeElement;\n // Remove existing child nodes and add the new SVG element.\n // We would use renderer.detachView(Array.from(layoutElement.childNodes)) here,\n // but it fails in IE11: https://github.com/angular/angular/issues/6327\n layoutElement.innerHTML = '';\n this._renderer.projectNodes(layoutElement, [svg]);\n }\n\n private _updateFontIconClasses() {\n if (!this._usingFontIcon()) {\n return;\n }\n const elem = this._element.nativeElement;\n const fontSetClass = this.fontSet ?\n this._mdIconRegistry.classNameForFontAlias(this.fontSet) :\n this._mdIconRegistry.getDefaultFontSetClass();\n if (fontSetClass != this._previousFontSetClass) {\n if (this._previousFontSetClass) {\n this._renderer.setElementClass(elem, this._previousFontSetClass, false);\n }\n if (fontSetClass) {\n this._renderer.setElementClass(elem, fontSetClass, true);\n }\n this._previousFontSetClass = fontSetClass;\n }\n\n if (this.fontIcon != this._previousFontIconClass) {\n if (this._previousFontIconClass) {\n this._renderer.setElementClass(elem, this._previousFontIconClass, false);\n }\n if (this.fontIcon) {\n this._renderer.setElementClass(elem, this.fontIcon, true);\n }\n this._previousFontIconClass = this.fontIcon;\n }\n }\n}\n\nexport const MD_ICON_DIRECTIVES = [MdIcon];\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/icon/package.json b/DEBUG-merge/components/icon/package.json new file mode 100644 index 000000000000..8742e5cab13d --- /dev/null +++ b/DEBUG-merge/components/icon/package.json @@ -0,0 +1,27 @@ +{ + "name": "@angular2-material/icon", + "version": "2.0.0-alpha.5-2", + "description": "Angular 2 Material icon", + "main": "./icon.js", + "typings": "./icon.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components", + "icon" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "@angular/http": "2.0.0-rc.1", + "@angular2-material/core": "2.0.0-alpha.5-2" + } +} diff --git a/DEBUG-merge/components/input/README.md b/DEBUG-merge/components/input/README.md new file mode 100644 index 000000000000..6e3ab7ac4616 --- /dev/null +++ b/DEBUG-merge/components/input/README.md @@ -0,0 +1,121 @@ +# mdInput + +Inputs are the basic input component of Material 2. The spec can be found [here](https://www.google.com/design/spec/components/text-fields.html). + + + +## Notes +* The `` component fully support two-way binding of `ngModel`, as if it was a normal `$  + .00 + +``` + +Will result in this: + + + + + +## Hint Labels + +Hint labels are the labels that shows the underline. You can have up to two hint labels; one on the `start` of the line (left in an LTR language, right in RTL), or one on the `end`. + +You specify a hint-label in one of two ways; either using the `hintLabel` attribute, or using an `` directive in the ``, which takes an `align` attribute containing the side. The attribute version is assumed to be at the `start`. + +Specifying a side twice will result in an exception during initialization. + +#### Example + +A simple character counter can be made like the following: + +```html + + {{characterCountHintExample.characterCount}} / 100 + +``` + + + + + +## Divider Color + +The divider (line under the content) color can be changed by using the `dividerColor` attribute. A value of `primary` is the default and will correspond to your theme primary color. Alternatively, you can specify `accent` or `warn`. + +#### Example + +^((please not that this example has been doctored to show the colors; they would normally show only on focus)^) + + + + + +## Labelling + +You can label the `` as you would a regular ``. + + + +## Full Forms + +You can make a full form using inputs, and it will support autofill natively. + +#### Example + +```html + + Basic + +
+ + + + + + +
+

+ + +

+ + + + +
+ {{postalCode.characterCount}} / 5 +
+
+ + +``` + +Will result in this: + + diff --git a/DEBUG-merge/components/input/input.css b/DEBUG-merge/components/input/input.css new file mode 100644 index 000000000000..d6dbd389e88d --- /dev/null +++ b/DEBUG-merge/components/input/input.css @@ -0,0 +1,141 @@ +/** + * Mixin that creates a new stacking context. + * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + */ +/** + * This mixin hides an element visually. + * That means it's still accessible for screen-readers but not visible in view. + */ +/** + * Forces an element to grow to fit floated contents; used as as an alternative to + * `overflow: hidden;` because it doesn't cut off contents. + */ +/** + * A mixin, which generates temporary ink ripple on a given component. + * When $bindToParent is set to true, it will check for the focused class on the same selector as you included + * that mixin. + * It is also possible to specify the color palette of the temporary ripple. By default it uses the + * accent palette for its background. + */ +/** + * Undo the red box-shadow glow added by Firefox on invalid inputs. + * See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid + */ +:-moz-ui-invalid { + box-shadow: none; } + +/** + * Applies a floating placeholder above the input itself. + */ +:host { + display: inline-block; + position: relative; + font-family: Roboto, "Helvetica Neue", sans-serif; + text-align: left; } + :host .md-input-wrapper { + margin: 16px 0; } + :host .md-input-table { + display: inline-table; + flex-flow: column; + vertical-align: bottom; + width: 100%; } + :host .md-input-table > * { + display: table-cell; } + :host .md-input-element { + font: inherit; + background: transparent; + border: none; + outline: none; + padding: 0; + width: 100%; } + :host .md-input-element.md-end { + text-align: right; } + :host .md-input-infix { + position: relative; } + :host .md-input-placeholder { + position: absolute; + left: 0; + top: 0; + visibility: hidden; + font-size: 100%; + pointer-events: none; + color: rgba(0, 0, 0, 0.38); + z-index: 1; + width: 100%; + display: block; + white-space: nowrap; + text-overflow: ellipsis; + overflow-x: hidden; + transform: translateY(0); + transform-origin: bottom left; + transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } + :host .md-input-placeholder.md-empty { + visibility: visible; + cursor: text; } + :host .md-input-placeholder.md-float:not(.md-empty), :host .md-input-placeholder.md-float.md-focused { + visibility: visible; + padding-bottom: 5px; + transform: translateY(-100%) scale(0.75); } + :host .md-input-placeholder.md-float:not(.md-empty) .md-placeholder-required, :host .md-input-placeholder.md-float.md-focused .md-placeholder-required { + color: #9c27b0; } + :host .md-input-placeholder.md-focused { + color: #009688; } + :host .md-input-placeholder.md-focused.md-accent { + color: #9c27b0; } + :host .md-input-placeholder.md-focused.md-warn { + color: #f44336; } + :host input:-webkit-autofill + .md-input-placeholder { + visibility: visible; + padding-bottom: 5px; + transform: translateY(-100%) scale(0.75); } + :host input:-webkit-autofill + .md-input-placeholder .md-placeholder-required { + color: #9c27b0; } + :host .md-input-underline { + position: absolute; + height: 1px; + width: 100%; + margin-top: 4px; + border-top: 1px solid rgba(0, 0, 0, 0.38); } + :host .md-input-underline.md-disabled { + border-top: 0; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%); + background-position: 0; + background-size: 4px 1px; + background-repeat: repeat-x; } + :host .md-input-underline .md-input-ripple { + position: absolute; + height: 2px; + z-index: 1; + background-color: #009688; + top: -1px; + width: 100%; + transform-origin: top; + opacity: 0; + transform: scaleY(0); + transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } + :host .md-input-underline .md-input-ripple.md-accent { + background-color: #9c27b0; } + :host .md-input-underline .md-input-ripple.md-warn { + background-color: #f44336; } + :host .md-input-underline .md-input-ripple.md-focused { + opacity: 1; + transform: scaleY(1); } + :host .md-hint { + position: absolute; + font-size: 75%; + bottom: -0.5em; } + :host .md-hint.md-right { + right: 0; } + +:host-context([dir="rtl"]) { + text-align: right; } + :host-context([dir="rtl"]) .md-input-placeholder { + transform-origin: bottom right; } + :host-context([dir="rtl"]) .md-input-element.md-end { + text-align: left; } + :host-context([dir="rtl"]) .md-hint { + right: 0; + left: auto; } + :host-context([dir="rtl"]) .md-hint.md-right { + right: auto; + left: 0; } diff --git a/DEBUG-merge/components/input/input.d.ts b/DEBUG-merge/components/input/input.d.ts new file mode 100644 index 000000000000..7d927fb561e8 --- /dev/null +++ b/DEBUG-merge/components/input/input.d.ts @@ -0,0 +1,125 @@ +import { AfterContentInit, SimpleChange, OnChanges } from '@angular/core'; +import { ControlValueAccessor } from '@angular/common'; +import { MdError } from '@angular2-material/core/errors/error'; +import { Observable } from 'rxjs/Observable'; +export declare class MdInputPlaceholderConflictError extends MdError { + constructor(); +} +export declare class MdInputUnsupportedTypeError extends MdError { + constructor(type: string); +} +export declare class MdInputDuplicatedHintError extends MdError { + constructor(align: string); +} +/** + * The placeholder directive. The content can declare this to implement more + * complex placeholders. + */ +export declare class MdPlaceholder { +} +/** The hint directive, used to tag content as hint labels (going under the input). */ +export declare class MdHint { + align: 'start' | 'end'; +} +/** + * Component that represents a text input. It encapsulates the HTMLElement and + * improve on its behaviour, along with styling it according to the Material Design. + */ +export declare class MdInput implements ControlValueAccessor, AfterContentInit, OnChanges { + private _focused; + private _value; + /** Callback registered via registerOnTouched (ControlValueAccessor) */ + private _onTouchedCallback; + /** Callback registered via registerOnChange (ControlValueAccessor) */ + private _onChangeCallback; + /** + * Aria related inputs. + */ + ariaLabel: string; + ariaLabelledBy: string; + ariaDisabled: boolean; + ariaRequired: boolean; + ariaInvalid: boolean; + /** + * Content directives. + */ + private _placeholderChild; + private _hintChildren; + /** Readonly properties. */ + focused: boolean; + empty: boolean; + characterCount: number; + inputId: string; + /** + * Bindings. + */ + align: 'start' | 'end'; + dividerColor: 'primary' | 'accent' | 'warn'; + floatingPlaceholder: boolean; + hintLabel: string; + autoComplete: string; + autoFocus: boolean; + disabled: boolean; + id: string; + list: string; + max: string; + maxLength: number; + min: string; + minLength: number; + placeholder: string; + readOnly: boolean; + required: boolean; + spellCheck: boolean; + step: number; + tabIndex: number; + type: string; + name: string; + private _blurEmitter; + private _focusEmitter; + onBlur: Observable; + onFocus: Observable; + value: any; + private _align; + private _inputElement; + /** Set focus on input */ + focus(): void; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + writeValue(value: any): void; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + registerOnChange(fn: any): void; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + registerOnTouched(fn: any): void; + /** TODO: internal */ + ngAfterContentInit(): void; + /** TODO: internal */ + ngOnChanges(changes: { + [key: string]: SimpleChange; + }): void; + /** + * Convert the value passed in to a value that is expected from the type of the md-input. + * This is normally performed by the *_VALUE_ACCESSOR in forms, but since the type is bound + * on our internal input it won't work locally. + * @private + */ + private _convertValueForInputType(v); + /** + * Ensure that all constraints defined by the API are validated, or throw errors otherwise. + * Constraints for now: + * - placeholder attribute and are mutually exclusive. + * - type attribute is not one of the forbidden types (see constant at the top). + * - Maximum one of each `` alignment specified, with the attribute being + * considered as align="start". + * @private + */ + private _validateConstraints(); +} +export declare const MD_INPUT_DIRECTIVES: typeof MdPlaceholder[]; diff --git a/DEBUG-merge/components/input/input.html b/DEBUG-merge/components/input/input.html new file mode 100644 index 000000000000..b6dcb63bf32e --- /dev/null +++ b/DEBUG-merge/components/input/input.html @@ -0,0 +1,63 @@ +
+
+
+ +
+ + + +
+ +
+
+ +
+ +
+ +
{{hintLabel}}
+ +
diff --git a/DEBUG-merge/components/input/input.js b/DEBUG-merge/components/input/input.js new file mode 100644 index 000000000000..6197fca25ee0 --- /dev/null +++ b/DEBUG-merge/components/input/input.js @@ -0,0 +1,455 @@ +"use strict"; +var __extends = (this && this.__extends) || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +}; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var common_1 = require('@angular/common'); +var field_value_1 = require('@angular2-material/core/annotations/field-value'); +var error_1 = require('@angular2-material/core/errors/error'); +var Observable_1 = require('rxjs/Observable'); +var noop = function () { }; +var MD_INPUT_CONTROL_VALUE_ACCESSOR = new core_1.Provider(common_1.NG_VALUE_ACCESSOR, { + useExisting: core_1.forwardRef(function () { return MdInput; }), + multi: true +}); +// Invalid input type. Using one of these will throw an MdInputUnsupportedTypeError. +var MD_INPUT_INVALID_INPUT_TYPE = [ + 'file', + 'radio', + 'checkbox', +]; +var nextUniqueId = 0; +var MdInputPlaceholderConflictError = (function (_super) { + __extends(MdInputPlaceholderConflictError, _super); + function MdInputPlaceholderConflictError() { + _super.call(this, 'Placeholder attribute and child element were both specified.'); + } + return MdInputPlaceholderConflictError; +}(error_1.MdError)); +exports.MdInputPlaceholderConflictError = MdInputPlaceholderConflictError; +var MdInputUnsupportedTypeError = (function (_super) { + __extends(MdInputUnsupportedTypeError, _super); + function MdInputUnsupportedTypeError(type) { + _super.call(this, "Input type \"" + type + "\" isn't supported by md-input."); + } + return MdInputUnsupportedTypeError; +}(error_1.MdError)); +exports.MdInputUnsupportedTypeError = MdInputUnsupportedTypeError; +var MdInputDuplicatedHintError = (function (_super) { + __extends(MdInputDuplicatedHintError, _super); + function MdInputDuplicatedHintError(align) { + _super.call(this, "A hint was already declared for 'align=\"" + align + "\"'."); + } + return MdInputDuplicatedHintError; +}(error_1.MdError)); +exports.MdInputDuplicatedHintError = MdInputDuplicatedHintError; +/** + * The placeholder directive. The content can declare this to implement more + * complex placeholders. + */ +var MdPlaceholder = (function () { + function MdPlaceholder() { + } + MdPlaceholder = __decorate([ + core_1.Directive({ + selector: 'md-placeholder' + }), + __metadata('design:paramtypes', []) + ], MdPlaceholder); + return MdPlaceholder; +}()); +exports.MdPlaceholder = MdPlaceholder; +/** The hint directive, used to tag content as hint labels (going under the input). */ +var MdHint = (function () { + function MdHint() { + // Whether to align the hint label at the start or end of the line. + this.align = 'start'; + } + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdHint.prototype, "align", void 0); + MdHint = __decorate([ + core_1.Directive({ + selector: 'md-hint', + host: { + '[class.md-right]': 'align == "end"', + '[class.md-hint]': 'true' + } + }), + __metadata('design:paramtypes', []) + ], MdHint); + return MdHint; +}()); +exports.MdHint = MdHint; +/** + * Component that represents a text input. It encapsulates the HTMLElement and + * improve on its behaviour, along with styling it according to the Material Design. + */ +var MdInput = (function () { + function MdInput() { + this._focused = false; + this._value = ''; + /** Callback registered via registerOnTouched (ControlValueAccessor) */ + this._onTouchedCallback = noop; + /** Callback registered via registerOnChange (ControlValueAccessor) */ + this._onChangeCallback = noop; + /** + * Bindings. + */ + this.align = 'start'; + this.dividerColor = 'primary'; + this.floatingPlaceholder = true; + this.hintLabel = ''; + this.autoFocus = false; + this.disabled = false; + this.id = "md-input-" + nextUniqueId++; + this.list = null; + this.max = null; + this.maxLength = null; + this.min = null; + this.minLength = null; + this.placeholder = null; + this.readOnly = false; + this.required = false; + this.spellCheck = false; + this.step = null; + this.tabIndex = null; + this.type = 'text'; + this.name = null; + this._blurEmitter = new core_1.EventEmitter(); + this._focusEmitter = new core_1.EventEmitter(); + } + Object.defineProperty(MdInput.prototype, "focused", { + /** Readonly properties. */ + get: function () { return this._focused; }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdInput.prototype, "empty", { + get: function () { return this._value == null || this._value === ''; }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdInput.prototype, "characterCount", { + get: function () { + return this.empty ? 0 : ('' + this._value).length; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdInput.prototype, "inputId", { + get: function () { return this.id + "-input"; }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdInput.prototype, "onBlur", { + get: function () { + return this._blurEmitter.asObservable(); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdInput.prototype, "onFocus", { + get: function () { + return this._focusEmitter.asObservable(); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdInput.prototype, "value", { + get: function () { return this._value; }, + set: function (v) { + v = this._convertValueForInputType(v); + if (v !== this._value) { + this._value = v; + this._onChangeCallback(v); + } + }, + enumerable: true, + configurable: true + }); + ; + Object.defineProperty(MdInput.prototype, "_align", { + // This is to remove the `align` property of the `md-input` itself. Otherwise HTML5 + // might place it as RTL when we don't want to. We still want to use `align` as an + // Input though, so we use HostBinding. + get: function () { return null; }, + enumerable: true, + configurable: true + }); + /** Set focus on input */ + MdInput.prototype.focus = function () { + this._inputElement.nativeElement.focus(); + }; + /** @internal */ + MdInput.prototype.handleFocus = function (event) { + this._focused = true; + this._focusEmitter.emit(event); + }; + /** @internal */ + MdInput.prototype.handleBlur = function (event) { + this._focused = false; + this._onTouchedCallback(); + this._blurEmitter.emit(event); + }; + /** @internal */ + MdInput.prototype.handleChange = function (event) { + this.value = event.target.value; + this._onTouchedCallback(); + }; + /** @internal */ + MdInput.prototype.hasPlaceholder = function () { + return !!this.placeholder || this._placeholderChild != null; + }; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + MdInput.prototype.writeValue = function (value) { + this._value = value; + }; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + MdInput.prototype.registerOnChange = function (fn) { + this._onChangeCallback = fn; + }; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + MdInput.prototype.registerOnTouched = function (fn) { + this._onTouchedCallback = fn; + }; + /** TODO: internal */ + MdInput.prototype.ngAfterContentInit = function () { + var _this = this; + this._validateConstraints(); + // Trigger validation when the hint children change. + this._hintChildren.changes.subscribe(function () { + _this._validateConstraints(); + }); + }; + /** TODO: internal */ + MdInput.prototype.ngOnChanges = function (changes) { + this._validateConstraints(); + }; + /** + * Convert the value passed in to a value that is expected from the type of the md-input. + * This is normally performed by the *_VALUE_ACCESSOR in forms, but since the type is bound + * on our internal input it won't work locally. + * @private + */ + MdInput.prototype._convertValueForInputType = function (v) { + switch (this.type) { + case 'number': return parseFloat(v); + default: return v; + } + }; + /** + * Ensure that all constraints defined by the API are validated, or throw errors otherwise. + * Constraints for now: + * - placeholder attribute and are mutually exclusive. + * - type attribute is not one of the forbidden types (see constant at the top). + * - Maximum one of each `` alignment specified, with the attribute being + * considered as align="start". + * @private + */ + MdInput.prototype._validateConstraints = function () { + var _this = this; + if (this.placeholder != '' && this.placeholder != null && this._placeholderChild != null) { + throw new MdInputPlaceholderConflictError(); + } + if (MD_INPUT_INVALID_INPUT_TYPE.indexOf(this.type) != -1) { + throw new MdInputUnsupportedTypeError(this.type); + } + if (this._hintChildren) { + // Validate the hint labels. + var startHint_1 = null; + var endHint_1 = null; + this._hintChildren.forEach(function (hint) { + if (hint.align == 'start') { + if (startHint_1 || _this.hintLabel) { + throw new MdInputDuplicatedHintError('start'); + } + startHint_1 = hint; + } + else if (hint.align == 'end') { + if (endHint_1) { + throw new MdInputDuplicatedHintError('end'); + } + endHint_1 = hint; + } + }); + } + }; + __decorate([ + core_1.Input('aria-label'), + __metadata('design:type', String) + ], MdInput.prototype, "ariaLabel", void 0); + __decorate([ + core_1.Input('aria-labelledby'), + __metadata('design:type', String) + ], MdInput.prototype, "ariaLabelledBy", void 0); + __decorate([ + core_1.Input('aria-disabled'), + field_value_1.BooleanFieldValue(), + __metadata('design:type', Boolean) + ], MdInput.prototype, "ariaDisabled", void 0); + __decorate([ + core_1.Input('aria-required'), + field_value_1.BooleanFieldValue(), + __metadata('design:type', Boolean) + ], MdInput.prototype, "ariaRequired", void 0); + __decorate([ + core_1.Input('aria-invalid'), + field_value_1.BooleanFieldValue(), + __metadata('design:type', Boolean) + ], MdInput.prototype, "ariaInvalid", void 0); + __decorate([ + core_1.ContentChild(MdPlaceholder), + __metadata('design:type', MdPlaceholder) + ], MdInput.prototype, "_placeholderChild", void 0); + __decorate([ + core_1.ContentChildren(MdHint), + __metadata('design:type', core_1.QueryList) + ], MdInput.prototype, "_hintChildren", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdInput.prototype, "align", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdInput.prototype, "dividerColor", void 0); + __decorate([ + core_1.Input(), + field_value_1.BooleanFieldValue(), + __metadata('design:type', Boolean) + ], MdInput.prototype, "floatingPlaceholder", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdInput.prototype, "hintLabel", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdInput.prototype, "autoComplete", void 0); + __decorate([ + core_1.Input(), + field_value_1.BooleanFieldValue(), + __metadata('design:type', Boolean) + ], MdInput.prototype, "autoFocus", void 0); + __decorate([ + core_1.Input(), + field_value_1.BooleanFieldValue(), + __metadata('design:type', Boolean) + ], MdInput.prototype, "disabled", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdInput.prototype, "id", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdInput.prototype, "list", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdInput.prototype, "max", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Number) + ], MdInput.prototype, "maxLength", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdInput.prototype, "min", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Number) + ], MdInput.prototype, "minLength", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdInput.prototype, "placeholder", void 0); + __decorate([ + core_1.Input(), + field_value_1.BooleanFieldValue(), + __metadata('design:type', Boolean) + ], MdInput.prototype, "readOnly", void 0); + __decorate([ + core_1.Input(), + field_value_1.BooleanFieldValue(), + __metadata('design:type', Boolean) + ], MdInput.prototype, "required", void 0); + __decorate([ + core_1.Input(), + field_value_1.BooleanFieldValue(), + __metadata('design:type', Boolean) + ], MdInput.prototype, "spellCheck", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Number) + ], MdInput.prototype, "step", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Number) + ], MdInput.prototype, "tabIndex", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdInput.prototype, "type", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdInput.prototype, "name", void 0); + __decorate([ + core_1.Output('blur'), + __metadata('design:type', Observable_1.Observable) + ], MdInput.prototype, "onBlur", null); + __decorate([ + core_1.Output('focus'), + __metadata('design:type', Observable_1.Observable) + ], MdInput.prototype, "onFocus", null); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdInput.prototype, "value", null); + __decorate([ + core_1.HostBinding('attr.align'), + __metadata('design:type', Object) + ], MdInput.prototype, "_align", null); + __decorate([ + core_1.ViewChild('input'), + __metadata('design:type', core_1.ElementRef) + ], MdInput.prototype, "_inputElement", void 0); + MdInput = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-input', + templateUrl: 'input.html', + styleUrls: ['input.css'], + providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR], + host: { '(click)': 'focus()' } + }), + __metadata('design:paramtypes', []) + ], MdInput); + return MdInput; +}()); +exports.MdInput = MdInput; +exports.MD_INPUT_DIRECTIVES = [MdPlaceholder, MdInput, MdHint]; +//# sourceMappingURL=../../../../components/input/input.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/input/input.js.map b/DEBUG-merge/components/input/input.js.map new file mode 100644 index 000000000000..51ecb793bb6f --- /dev/null +++ b/DEBUG-merge/components/input/input.js.map @@ -0,0 +1 @@ +{"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/demo-app/components/input/input.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n Component,\n HostBinding,\n Input,\n Provider,\n Directive,\n AfterContentInit,\n ContentChild,\n SimpleChange,\n ContentChildren,\n ViewChild,\n ElementRef,\n QueryList,\n OnChanges,\n EventEmitter,\n Output,\n} from '@angular/core';\nimport {\n NG_VALUE_ACCESSOR,\n ControlValueAccessor\n} from '@angular/common';\nimport {BooleanFieldValue} from '@angular2-material/core/annotations/field-value';\nimport {MdError} from '@angular2-material/core/errors/error';\nimport {Observable} from 'rxjs/Observable';\n\n\nconst noop = () => {};\n\nconst MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(NG_VALUE_ACCESSOR, {\n useExisting: forwardRef(() => MdInput),\n multi: true\n});\n\n// Invalid input type. Using one of these will throw an MdInputUnsupportedTypeError.\nconst MD_INPUT_INVALID_INPUT_TYPE = [\n 'file',\n 'radio',\n 'checkbox',\n];\n\n\nlet nextUniqueId = 0;\n\n\nexport class MdInputPlaceholderConflictError extends MdError {\n constructor() {\n super('Placeholder attribute and child element were both specified.');\n }\n}\n\nexport class MdInputUnsupportedTypeError extends MdError {\n constructor(type: string) {\n super(`Input type \"${type}\" isn't supported by md-input.`);\n }\n}\n\nexport class MdInputDuplicatedHintError extends MdError {\n constructor(align: string) {\n super(`A hint was already declared for 'align=\"${align}\"'.`);\n }\n}\n\n\n\n/**\n * The placeholder directive. The content can declare this to implement more\n * complex placeholders.\n */\n@Directive({\n selector: 'md-placeholder'\n})\nexport class MdPlaceholder {}\n\n\n/** The hint directive, used to tag content as hint labels (going under the input). */\n@Directive({\n selector: 'md-hint',\n host: {\n '[class.md-right]': 'align == \"end\"',\n '[class.md-hint]': 'true'\n }\n})\nexport class MdHint {\n // Whether to align the hint label at the start or end of the line.\n @Input() align: 'start' | 'end' = 'start';\n}\n\n\n/**\n * Component that represents a text input. It encapsulates the HTMLElement and\n * improve on its behaviour, along with styling it according to the Material Design.\n */\n@Component({\n moduleId: module.id,\n selector: 'md-input',\n templateUrl: 'input.html',\n styleUrls: ['input.css'],\n providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],\n host: {'(click)' : 'focus()'}\n})\nexport class MdInput implements ControlValueAccessor, AfterContentInit, OnChanges {\n private _focused: boolean = false;\n private _value: any = '';\n\n /** Callback registered via registerOnTouched (ControlValueAccessor) */\n private _onTouchedCallback: () => void = noop;\n /** Callback registered via registerOnChange (ControlValueAccessor) */\n private _onChangeCallback: (_: any) => void = noop;\n\n /**\n * Aria related inputs.\n */\n @Input('aria-label') ariaLabel: string;\n @Input('aria-labelledby') ariaLabelledBy: string;\n @Input('aria-disabled') @BooleanFieldValue() ariaDisabled: boolean;\n @Input('aria-required') @BooleanFieldValue() ariaRequired: boolean;\n @Input('aria-invalid') @BooleanFieldValue() ariaInvalid: boolean;\n\n /**\n * Content directives.\n */\n @ContentChild(MdPlaceholder) private _placeholderChild: MdPlaceholder;\n @ContentChildren(MdHint) private _hintChildren: QueryList;\n\n /** Readonly properties. */\n get focused() { return this._focused; }\n get empty() { return this._value == null || this._value === ''; }\n get characterCount(): number {\n return this.empty ? 0 : ('' + this._value).length;\n }\n get inputId(): string { return `${this.id}-input`; }\n\n /**\n * Bindings.\n */\n @Input() align: 'start' | 'end' = 'start';\n @Input() dividerColor: 'primary' | 'accent' | 'warn' = 'primary';\n @Input() @BooleanFieldValue() floatingPlaceholder: boolean = true;\n @Input() hintLabel: string = '';\n\n @Input() autoComplete: string;\n @Input() @BooleanFieldValue() autoFocus: boolean = false;\n @Input() @BooleanFieldValue() disabled: boolean = false;\n @Input() id: string = `md-input-${nextUniqueId++}`;\n @Input() list: string = null;\n @Input() max: string = null;\n @Input() maxLength: number = null;\n @Input() min: string = null;\n @Input() minLength: number = null;\n @Input() placeholder: string = null;\n @Input() @BooleanFieldValue() readOnly: boolean = false;\n @Input() @BooleanFieldValue() required: boolean = false;\n @Input() @BooleanFieldValue() spellCheck: boolean = false;\n @Input() step: number = null;\n @Input() tabIndex: number = null;\n @Input() type: string = 'text';\n @Input() name: string = null;\n\n private _blurEmitter: EventEmitter = new EventEmitter();\n private _focusEmitter: EventEmitter = new EventEmitter();\n\n @Output('blur')\n get onBlur(): Observable {\n return this._blurEmitter.asObservable();\n }\n\n @Output('focus')\n get onFocus(): Observable {\n return this._focusEmitter.asObservable();\n }\n\n get value(): any { return this._value; };\n @Input() set value(v: any) {\n v = this._convertValueForInputType(v);\n if (v !== this._value) {\n this._value = v;\n this._onChangeCallback(v);\n }\n }\n\n // This is to remove the `align` property of the `md-input` itself. Otherwise HTML5\n // might place it as RTL when we don't want to. We still want to use `align` as an\n // Input though, so we use HostBinding.\n @HostBinding('attr.align') private get _align(): any { return null; }\n\n\n @ViewChild('input') private _inputElement: ElementRef;\n\n /** Set focus on input */\n focus() {\n this._inputElement.nativeElement.focus();\n }\n\n /** @internal */\n handleFocus(event: FocusEvent) {\n this._focused = true;\n this._focusEmitter.emit(event);\n }\n\n /** @internal */\n handleBlur(event: FocusEvent) {\n this._focused = false;\n this._onTouchedCallback();\n this._blurEmitter.emit(event);\n }\n\n /** @internal */\n handleChange(event: Event) {\n this.value = (event.target).value;\n this._onTouchedCallback();\n }\n\n /** @internal */\n hasPlaceholder(): boolean {\n return !!this.placeholder || this._placeholderChild != null;\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n * TODO: internal\n */\n writeValue(value: any) {\n this._value = value;\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n * TODO: internal\n */\n registerOnChange(fn: any) {\n this._onChangeCallback = fn;\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n * TODO: internal\n */\n registerOnTouched(fn: any) {\n this._onTouchedCallback = fn;\n }\n\n /** TODO: internal */\n ngAfterContentInit() {\n this._validateConstraints();\n\n // Trigger validation when the hint children change.\n this._hintChildren.changes.subscribe(() => {\n this._validateConstraints();\n });\n }\n\n /** TODO: internal */\n ngOnChanges(changes: {[key: string]: SimpleChange}) {\n this._validateConstraints();\n }\n\n /**\n * Convert the value passed in to a value that is expected from the type of the md-input.\n * This is normally performed by the *_VALUE_ACCESSOR in forms, but since the type is bound\n * on our internal input it won't work locally.\n * @private\n */\n private _convertValueForInputType(v: any): any {\n switch (this.type) {\n case 'number': return parseFloat(v);\n default: return v;\n }\n }\n\n /**\n * Ensure that all constraints defined by the API are validated, or throw errors otherwise.\n * Constraints for now:\n * - placeholder attribute and are mutually exclusive.\n * - type attribute is not one of the forbidden types (see constant at the top).\n * - Maximum one of each `` alignment specified, with the attribute being\n * considered as align=\"start\".\n * @private\n */\n private _validateConstraints() {\n if (this.placeholder != '' && this.placeholder != null && this._placeholderChild != null) {\n throw new MdInputPlaceholderConflictError();\n }\n if (MD_INPUT_INVALID_INPUT_TYPE.indexOf(this.type) != -1) {\n throw new MdInputUnsupportedTypeError(this.type);\n }\n\n if (this._hintChildren) {\n // Validate the hint labels.\n let startHint: MdHint = null;\n let endHint: MdHint = null;\n this._hintChildren.forEach((hint: MdHint) => {\n if (hint.align == 'start') {\n if (startHint || this.hintLabel) {\n throw new MdInputDuplicatedHintError('start');\n }\n startHint = hint;\n } else if (hint.align == 'end') {\n if (endHint) {\n throw new MdInputDuplicatedHintError('end');\n }\n endHint = hint;\n }\n });\n }\n }\n}\n\nexport const MD_INPUT_DIRECTIVES = [MdPlaceholder, MdInput, MdHint];\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/input/package.json b/DEBUG-merge/components/input/package.json new file mode 100644 index 000000000000..156874f40cb3 --- /dev/null +++ b/DEBUG-merge/components/input/package.json @@ -0,0 +1,28 @@ +{ + "name": "@angular2-material/input", + "version": "2.0.0-alpha.5-2", + "description": "Angular 2 Material input", + "main": "./input.js", + "typings": "./input.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components", + "input", + "text", + "textarea" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "@angular2-material/core": "2.0.0-alpha.5-2" + } +} diff --git a/DEBUG-merge/components/list/README.md b/DEBUG-merge/components/list/README.md new file mode 100644 index 000000000000..ae7dc01adbed --- /dev/null +++ b/DEBUG-merge/components/list/README.md @@ -0,0 +1,163 @@ +# md-list + +`md-list` is a container component that wraps and formats a series of line items. As the base list component, + it provides Material Design styling, but no behavior of its own. + +## Usage + +### Simple list + +To use `md-list`, first import the list directives and add them to your component's directives array: + +```javascript +@Component({ + ... + directives: [MD_LIST_DIRECTIVES] +}) +``` + +In your template, create an `md-list` element and wrap each of your items in an `md-list-item` tag. + +```html + + Pepper + Salt + Paprika + +``` + +Output: + + + +### Multi-line lists + +If your list requires multiple lines per list item, annotate each line with an `md-line` attribute. +You can use whichever heading tag is appropriate for your DOM hierarchy (doesn't have to be `h3`), +as long as the `md-line` attribute is included. + +```html + + + +

{{message.from}}

+

+ {{message.subject}} + -- {{message.message}} +

+ + + + + + +

{{message.from}}

+

{{message.subject}}

+

{{message.message}}

+ + +``` + +Two line list output: + + + +Three line list output: + + + +### Lists with avatars + +To include an avatar, add an image tag with an `md-list-avatar` attribute. + +```html + + + ... +

{{message.from}}

+

+ {{message.subject}} + -- {{message.message}} +

+ + +``` + +Output: + + + +### Dense lists +Lists are also available in "dense layout" mode, which shrinks the font size and height of the list +to suit UIs that may need to display more information. To enable this mode, add a `dense` attribute +to the main `md-list` tag. + + +```html + + Pepper + Salt + Paprika + +``` + +Output: + + + +### Lists with multiple sections + +You can add a subheader to a list by annotating a heading tag with an `md-subheader` attribute. To add a divider, +use `` tags. + +```html + +

Folders

+ + folder +

{{folder.name}}

+

{{folder.updated}}

+ + +

Notes

+ + note +

{{note.name}}

+

{{note.updated}}

+ + +``` + +Output: + + + +### Navigation lists + +Use `md-nav-list` tags for navigation lists (i.e. lists that have anchor tags). + +Simple nav lists can tack an `md-list-item` attribute onto the anchor tag itself: + +```html + + {{ link }} + +``` + +If you require a more complex nav list (e.g. with more than one target per item), wrap your anchor tag in an `md-list-item` element. + +```html + + + {{ link }} + + + +``` + +### Lists with secondary text +Secondary text styling will be part of a broader typography module to +[come later](https://github.com/angular/material2/issues/205), and won’t be implemented as part of this component +specifically. Gray text in the examples above comes from a "demo-2" class added manually by the demo. diff --git a/DEBUG-merge/components/list/list-item.html b/DEBUG-merge/components/list/list-item.html new file mode 100644 index 000000000000..630fd1d910b5 --- /dev/null +++ b/DEBUG-merge/components/list/list-item.html @@ -0,0 +1,5 @@ +
+ +
+ +
diff --git a/DEBUG-merge/components/list/list.css b/DEBUG-merge/components/list/list.css new file mode 100644 index 000000000000..358d1c2c6516 --- /dev/null +++ b/DEBUG-merge/components/list/list.css @@ -0,0 +1,161 @@ +/** + * This mixin provides all md-line styles, changing secondary font size + * based on whether the list is in dense mode. + */ +/** + * This mixin provides base styles for the wrapper around md-line + * elements in a list. + */ +/** + * This mixin normalizes default element styles, e.g. font weight for heading text. + */ +/* Normal list variables */ +/* Dense list variables */ +/* +This mixin provides all list-item styles, changing font size and height +based on whether the list is in dense mode. +*/ +/* +This mixin provides all subheader styles, adjusting heights and padding +based on whether the list is in dense mode. +*/ +md-list, md-nav-list { + padding-top: 8px; + display: block; } + md-list [md-subheader], md-nav-list [md-subheader] { + display: block; + box-sizing: border-box; + height: 48px; + padding: 16px; + margin: 0; + font-size: 14px; + font-weight: 500; + color: rgba(0, 0, 0, 0.54); } + md-list [md-subheader]:first-child, md-nav-list [md-subheader]:first-child { + margin-top: -8px; } + md-list md-list-item .md-list-item, md-list a[md-list-item] .md-list-item, md-nav-list md-list-item .md-list-item, md-nav-list a[md-list-item] .md-list-item { + display: flex; + flex-direction: row; + align-items: center; + font-family: Roboto, "Helvetica Neue", sans-serif; + box-sizing: border-box; + font-size: 16px; + height: 48px; + padding: 0 16px; } + md-list md-list-item.md-list-avatar .md-list-item, md-list a[md-list-item].md-list-avatar .md-list-item, md-nav-list md-list-item.md-list-avatar .md-list-item, md-nav-list a[md-list-item].md-list-avatar .md-list-item { + height: 56px; } + md-list md-list-item.md-2-line .md-list-item, md-list a[md-list-item].md-2-line .md-list-item, md-nav-list md-list-item.md-2-line .md-list-item, md-nav-list a[md-list-item].md-2-line .md-list-item { + height: 72px; } + md-list md-list-item.md-3-line .md-list-item, md-list a[md-list-item].md-3-line .md-list-item, md-nav-list md-list-item.md-3-line .md-list-item, md-nav-list a[md-list-item].md-3-line .md-list-item { + height: 88px; } + md-list md-list-item .md-list-text, md-list a[md-list-item] .md-list-text, md-nav-list md-list-item .md-list-text, md-nav-list a[md-list-item] .md-list-text { + display: flex; + flex-direction: column; + width: 100%; + box-sizing: border-box; + overflow: hidden; + padding: 0 16px; } + md-list md-list-item .md-list-text > *, md-list a[md-list-item] .md-list-text > *, md-nav-list md-list-item .md-list-text > *, md-nav-list a[md-list-item] .md-list-text > * { + margin: 0; + padding: 0; + font-weight: normal; + font-size: inherit; } + md-list md-list-item .md-list-text:empty, md-list a[md-list-item] .md-list-text:empty, md-nav-list md-list-item .md-list-text:empty, md-nav-list a[md-list-item] .md-list-text:empty { + display: none; } + md-list md-list-item .md-list-text:first-child, md-list a[md-list-item] .md-list-text:first-child, md-nav-list md-list-item .md-list-text:first-child, md-nav-list a[md-list-item] .md-list-text:first-child { + padding: 0; } + md-list md-list-item [md-list-avatar], md-list a[md-list-item] [md-list-avatar], md-nav-list md-list-item [md-list-avatar], md-nav-list a[md-list-item] [md-list-avatar] { + width: 40px; + height: 40px; + border-radius: 50%; } + md-list md-list-item [md-list-icon], md-list a[md-list-item] [md-list-icon], md-nav-list md-list-item [md-list-icon], md-nav-list a[md-list-item] [md-list-icon] { + width: 24px; + height: 24px; + border-radius: 50%; + padding: 4px; } + md-list md-list-item [md-line], md-list a[md-list-item] [md-line], md-nav-list md-list-item [md-line], md-nav-list a[md-list-item] [md-line] { + display: block; + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; + box-sizing: border-box; } + md-list md-list-item [md-line]:nth-child(n+2), md-list a[md-list-item] [md-line]:nth-child(n+2), md-nav-list md-list-item [md-line]:nth-child(n+2), md-nav-list a[md-list-item] [md-line]:nth-child(n+2) { + font-size: 14px; } + +md-list[dense], md-nav-list[dense] { + padding-top: 4px; + display: block; } + md-list[dense] [md-subheader], md-nav-list[dense] [md-subheader] { + display: block; + box-sizing: border-box; + height: 40px; + padding: 16px; + margin: 0; + font-size: 13px; + font-weight: 500; + color: rgba(0, 0, 0, 0.54); } + md-list[dense] [md-subheader]:first-child, md-nav-list[dense] [md-subheader]:first-child { + margin-top: -4px; } + md-list[dense] md-list-item .md-list-item, md-list[dense] a[md-list-item] .md-list-item, md-nav-list[dense] md-list-item .md-list-item, md-nav-list[dense] a[md-list-item] .md-list-item { + display: flex; + flex-direction: row; + align-items: center; + font-family: Roboto, "Helvetica Neue", sans-serif; + box-sizing: border-box; + font-size: 13px; + height: 40px; + padding: 0 16px; } + md-list[dense] md-list-item.md-list-avatar .md-list-item, md-list[dense] a[md-list-item].md-list-avatar .md-list-item, md-nav-list[dense] md-list-item.md-list-avatar .md-list-item, md-nav-list[dense] a[md-list-item].md-list-avatar .md-list-item { + height: 48px; } + md-list[dense] md-list-item.md-2-line .md-list-item, md-list[dense] a[md-list-item].md-2-line .md-list-item, md-nav-list[dense] md-list-item.md-2-line .md-list-item, md-nav-list[dense] a[md-list-item].md-2-line .md-list-item { + height: 60px; } + md-list[dense] md-list-item.md-3-line .md-list-item, md-list[dense] a[md-list-item].md-3-line .md-list-item, md-nav-list[dense] md-list-item.md-3-line .md-list-item, md-nav-list[dense] a[md-list-item].md-3-line .md-list-item { + height: 76px; } + md-list[dense] md-list-item .md-list-text, md-list[dense] a[md-list-item] .md-list-text, md-nav-list[dense] md-list-item .md-list-text, md-nav-list[dense] a[md-list-item] .md-list-text { + display: flex; + flex-direction: column; + width: 100%; + box-sizing: border-box; + overflow: hidden; + padding: 0 16px; } + md-list[dense] md-list-item .md-list-text > *, md-list[dense] a[md-list-item] .md-list-text > *, md-nav-list[dense] md-list-item .md-list-text > *, md-nav-list[dense] a[md-list-item] .md-list-text > * { + margin: 0; + padding: 0; + font-weight: normal; + font-size: inherit; } + md-list[dense] md-list-item .md-list-text:empty, md-list[dense] a[md-list-item] .md-list-text:empty, md-nav-list[dense] md-list-item .md-list-text:empty, md-nav-list[dense] a[md-list-item] .md-list-text:empty { + display: none; } + md-list[dense] md-list-item .md-list-text:first-child, md-list[dense] a[md-list-item] .md-list-text:first-child, md-nav-list[dense] md-list-item .md-list-text:first-child, md-nav-list[dense] a[md-list-item] .md-list-text:first-child { + padding: 0; } + md-list[dense] md-list-item [md-list-avatar], md-list[dense] a[md-list-item] [md-list-avatar], md-nav-list[dense] md-list-item [md-list-avatar], md-nav-list[dense] a[md-list-item] [md-list-avatar] { + width: 40px; + height: 40px; + border-radius: 50%; } + md-list[dense] md-list-item [md-list-icon], md-list[dense] a[md-list-item] [md-list-icon], md-nav-list[dense] md-list-item [md-list-icon], md-nav-list[dense] a[md-list-item] [md-list-icon] { + width: 24px; + height: 24px; + border-radius: 50%; + padding: 4px; } + md-list[dense] md-list-item [md-line], md-list[dense] a[md-list-item] [md-line], md-nav-list[dense] md-list-item [md-line], md-nav-list[dense] a[md-list-item] [md-line] { + display: block; + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; + box-sizing: border-box; } + md-list[dense] md-list-item [md-line]:nth-child(n+2), md-list[dense] a[md-list-item] [md-line]:nth-child(n+2), md-nav-list[dense] md-list-item [md-line]:nth-child(n+2), md-nav-list[dense] a[md-list-item] [md-line]:nth-child(n+2) { + font-size: 13px; } + +md-divider { + display: block; + border-top: 1px solid rgba(0, 0, 0, 0.12); + margin: 0; } + +md-nav-list a { + text-decoration: none; + color: inherit; } + +md-nav-list .md-list-item { + cursor: pointer; } + md-nav-list .md-list-item:hover, md-nav-list .md-list-item.md-list-item-focus { + outline: none; + background: rgba(0, 0, 0, 0.04); } diff --git a/DEBUG-merge/components/list/list.d.ts b/DEBUG-merge/components/list/list.d.ts new file mode 100644 index 000000000000..b08d4648ea65 --- /dev/null +++ b/DEBUG-merge/components/list/list.d.ts @@ -0,0 +1,17 @@ +import { QueryList, ElementRef, Renderer, AfterContentInit } from '@angular/core'; +import { MdLine, MdLineSetter } from '@angular2-material/core/line/line'; +export declare class MdList { +} +export declare class MdListAvatar { +} +export declare class MdListItem implements AfterContentInit { + private _renderer; + private _element; + _lineSetter: MdLineSetter; + _lines: QueryList; + private _hasAvatar; + constructor(_renderer: Renderer, _element: ElementRef); + /** TODO: internal */ + ngAfterContentInit(): void; +} +export declare const MD_LIST_DIRECTIVES: (typeof MdList | typeof MdListItem)[]; diff --git a/DEBUG-merge/components/list/list.js b/DEBUG-merge/components/list/list.js new file mode 100644 index 000000000000..1fdc2207e14f --- /dev/null +++ b/DEBUG-merge/components/list/list.js @@ -0,0 +1,94 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var line_1 = require('@angular2-material/core/line/line'); +var MdList = (function () { + function MdList() { + } + MdList = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-list, md-nav-list', + host: { 'role': 'list' }, + template: '', + styleUrls: ['list.css'], + encapsulation: core_1.ViewEncapsulation.None + }), + __metadata('design:paramtypes', []) + ], MdList); + return MdList; +}()); +exports.MdList = MdList; +/* Need directive for a ContentChild query in list-item */ +var MdListAvatar = (function () { + function MdListAvatar() { + } + MdListAvatar = __decorate([ + core_1.Directive({ selector: '[md-list-avatar]' }), + __metadata('design:paramtypes', []) + ], MdListAvatar); + return MdListAvatar; +}()); +exports.MdListAvatar = MdListAvatar; +var MdListItem = (function () { + function MdListItem(_renderer, _element) { + this._renderer = _renderer; + this._element = _element; + /** @internal */ + this.hasFocus = false; + } + Object.defineProperty(MdListItem.prototype, "_hasAvatar", { + set: function (avatar) { + this._renderer.setElementClass(this._element.nativeElement, 'md-list-avatar', avatar != null); + }, + enumerable: true, + configurable: true + }); + /** TODO: internal */ + MdListItem.prototype.ngAfterContentInit = function () { + this._lineSetter = new line_1.MdLineSetter(this._lines, this._renderer, this._element); + }; + /** @internal */ + MdListItem.prototype.handleFocus = function () { + this.hasFocus = true; + }; + /** @internal */ + MdListItem.prototype.handleBlur = function () { + this.hasFocus = false; + }; + __decorate([ + core_1.ContentChildren(line_1.MdLine), + __metadata('design:type', core_1.QueryList) + ], MdListItem.prototype, "_lines", void 0); + __decorate([ + core_1.ContentChild(MdListAvatar), + __metadata('design:type', MdListAvatar), + __metadata('design:paramtypes', [MdListAvatar]) + ], MdListItem.prototype, "_hasAvatar", null); + MdListItem = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-list-item, a[md-list-item]', + host: { + 'role': 'listitem', + '(focus)': 'handleFocus()', + '(blur)': 'handleBlur()', + }, + templateUrl: 'list-item.html', + encapsulation: core_1.ViewEncapsulation.None + }), + __metadata('design:paramtypes', [core_1.Renderer, core_1.ElementRef]) + ], MdListItem); + return MdListItem; +}()); +exports.MdListItem = MdListItem; +exports.MD_LIST_DIRECTIVES = [MdList, MdListItem, line_1.MdLine, MdListAvatar]; +//# sourceMappingURL=../../../../components/list/list.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/list/list.js.map b/DEBUG-merge/components/list/list.js.map new file mode 100644 index 000000000000..7487a07accac --- /dev/null +++ b/DEBUG-merge/components/list/list.js.map @@ -0,0 +1 @@ +{"version":3,"file":"list.js","sourceRoot":"","sources":["../../src/demo-app/components/list/list.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAUO,eAAe,CAAC,CAAA;AACvB,qBAAqC,mCAAmC,CAAC,CAAA;AAUzE;IAAA;IAAqB,CAAC;IARtB;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,sBAAsB;YAChC,IAAI,EAAE,EAAC,MAAM,EAAE,MAAM,EAAC;YACtB,QAAQ,EAAE,2BAA2B;YACrC,SAAS,EAAE,CAAC,UAAU,CAAC;YACvB,aAAa,EAAE,wBAAiB,CAAC,IAAI;SACtC,CAAC;;cAAA;IACmB,aAAC;AAAD,CAAC,AAAtB,IAAsB;AAAT,cAAM,SAAG,CAAA;AAEtB,0DAA0D;AAE1D;IAAA;IAA2B,CAAC;IAD5B;QAAC,gBAAS,CAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,CAAC;;oBAAA;IACjB,mBAAC;AAAD,CAAC,AAA5B,IAA4B;AAAf,oBAAY,eAAG,CAAA;AAa5B;IAaE,oBAAoB,SAAmB,EAAU,QAAoB;QAAjD,cAAS,GAAT,SAAS,CAAU;QAAU,aAAQ,GAAR,QAAQ,CAAY;QAZrE,gBAAgB;QAChB,aAAQ,GAAY,KAAK,CAAC;IAW8C,CAAC;IAJzE,sBAAY,kCAAU;aAAtB,UAAuB,MAAoB;YACzC,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,gBAAgB,EAAE,MAAM,IAAI,IAAI,CAAC,CAAC;QAChG,CAAC;;;OAAA;IAID,qBAAqB;IACrB,uCAAkB,GAAlB;QACE,IAAI,CAAC,WAAW,GAAG,IAAI,mBAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAClF,CAAC;IAED,gBAAgB;IAChB,gCAAW,GAAX;QACE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC;IAED,gBAAgB;IAChB,+BAAU,GAAV;QACE,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAtBD;QAAC,sBAAe,CAAC,aAAM,CAAC;;8CAAA;IAExB;QAAC,mBAAY,CAAC,YAAY,CAAC;;;gDAAA;IAnB7B;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,+BAA+B;YACzC,IAAI,EAAE;gBACJ,MAAM,EAAE,UAAU;gBAClB,SAAS,EAAE,eAAe;gBAC1B,QAAQ,EAAE,cAAc;aACzB;YACD,WAAW,EAAE,gBAAgB;YAC7B,aAAa,EAAE,wBAAiB,CAAC,IAAI;SACtC,CAAC;;kBAAA;IA8BF,iBAAC;AAAD,CAAC,AA7BD,IA6BC;AA7BY,kBAAU,aA6BtB,CAAA;AAEY,0BAAkB,GAAG,CAAC,MAAM,EAAE,UAAU,EAAE,aAAM,EAAE,YAAY,CAAC,CAAC","sourcesContent":["import {\n Component,\n ViewEncapsulation,\n ContentChildren,\n ContentChild,\n QueryList,\n Directive,\n ElementRef,\n Renderer,\n AfterContentInit,\n} from '@angular/core';\nimport { MdLine, MdLineSetter } from '@angular2-material/core/line/line';\n\n@Component({\n moduleId: module.id,\n selector: 'md-list, md-nav-list',\n host: {'role': 'list'},\n template: '',\n styleUrls: ['list.css'],\n encapsulation: ViewEncapsulation.None\n})\nexport class MdList {}\n\n/* Need directive for a ContentChild query in list-item */\n@Directive({ selector: '[md-list-avatar]' })\nexport class MdListAvatar {}\n\n@Component({\n moduleId: module.id,\n selector: 'md-list-item, a[md-list-item]',\n host: {\n 'role': 'listitem',\n '(focus)': 'handleFocus()',\n '(blur)': 'handleBlur()',\n },\n templateUrl: 'list-item.html',\n encapsulation: ViewEncapsulation.None\n})\nexport class MdListItem implements AfterContentInit {\n /** @internal */\n hasFocus: boolean = false;\n\n _lineSetter: MdLineSetter;\n\n @ContentChildren(MdLine) _lines: QueryList;\n\n @ContentChild(MdListAvatar)\n private set _hasAvatar(avatar: MdListAvatar) {\n this._renderer.setElementClass(this._element.nativeElement, 'md-list-avatar', avatar != null);\n }\n\n constructor(private _renderer: Renderer, private _element: ElementRef) {}\n\n /** TODO: internal */\n ngAfterContentInit() {\n this._lineSetter = new MdLineSetter(this._lines, this._renderer, this._element);\n }\n\n /** @internal */\n handleFocus() {\n this.hasFocus = true;\n }\n\n /** @internal */\n handleBlur() {\n this.hasFocus = false;\n }\n}\n\nexport const MD_LIST_DIRECTIVES = [MdList, MdListItem, MdLine, MdListAvatar];\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/list/package.json b/DEBUG-merge/components/list/package.json new file mode 100644 index 000000000000..d6c99727f752 --- /dev/null +++ b/DEBUG-merge/components/list/package.json @@ -0,0 +1,26 @@ +{ + "name": "@angular2-material/list", + "version": "2.0.0-alpha.5-2", + "description": "Angular 2 Material list", + "main": "./list.js", + "typings": "./list.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components", + "list" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "@angular2-material/core": "2.0.0-alpha.5-2" + } +} diff --git a/DEBUG-merge/components/progress-bar/README.md b/DEBUG-merge/components/progress-bar/README.md new file mode 100644 index 000000000000..9c1cb3706094 --- /dev/null +++ b/DEBUG-merge/components/progress-bar/README.md @@ -0,0 +1,54 @@ +# md-progress-bar + +`md-progress-bar` is a component for indicating progress and activity, matching the spec of +[Material Design Progress & Activity](https://www.google.com/design/spec/components/progress-activity.html). + +### Progress Modes + +There are four modes: + 1. Determinate - `` + * Indicates how long an operation will take when the percentage complete is detectable. + 2. Indeterminate - `` + * Indicates the user must wait while something finishes when it’s not necessary or possible to indicate how long it will take. + 3. Buffer - `` + * Indicates how long an operation will take when the percentage complete is detectable, also provides a value of the preloading for the operation. + 4. Query - `` + * Indicates the user must wait while something finishes when it is not yet possible to indicate how long it will take, but will be possible. Once possible, the progress mode should be moved to buffer or determinate. + + +Example: + + ```html + + + + + ``` + +### Theming + +All progress indicators can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the appropriate class. + +Example: + + ```html + + + + ``` + +### Accessibility + + * ARIA attributes are applied to the indicator defining the valuemin, valuemax and valuenow attributes. + + +### API Summary + +Properties: + +| Name | Type | Description | +| --- | --- | --- | +| `color` | `"primary" | "accent" | "warn"` | The color palette of the progress indicator | +| `mode` | `"determinate" | "indeterminate" | "buffer" | "query"` | The mode of the progress indicator | +| `value` | number | The current progress percentage for determinate indicators | +| `bufferValue` | number | The current progress percentage for buffer secondary indicators | diff --git a/DEBUG-merge/components/progress-bar/package.json b/DEBUG-merge/components/progress-bar/package.json new file mode 100644 index 000000000000..5c57f9dd5e3b --- /dev/null +++ b/DEBUG-merge/components/progress-bar/package.json @@ -0,0 +1,28 @@ +{ + "name": "@angular2-material/progress-bar", + "version": "2.0.0-alpha.5-2", + "description": "Angular 2 Material progress-bar", + "main": "./progress-bar.js", + "typings": "./progress-bar.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components", + "progress", + "progressbar", + "loading" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "@angular2-material/core": "2.0.0-alpha.5-2" + } +} diff --git a/DEBUG-merge/components/progress-bar/progress-bar.css b/DEBUG-merge/components/progress-bar/progress-bar.css new file mode 100644 index 000000000000..0b437356601f --- /dev/null +++ b/DEBUG-merge/components/progress-bar/progress-bar.css @@ -0,0 +1,178 @@ +/** In buffer mode a repeated SVG object is used as a background. Each of the following defines the SVG object for each + of the class defined colors. + + Each string is a URL encoded version of: + + + + + + */ +:host { + display: block; + height: 5px; + overflow: hidden; + position: relative; + transform: translateZ(0); + transition: opacity 250ms linear; + width: 100%; + /** + * The progress bar buffer is the bar indicator showing the buffer value and is only visible beyond the current value + * of the primary progress bar. + */ + /** + * The secondary progress bar is only used in the indeterminate animation, because of this it is hidden in other uses. + */ + /** + * The progress bar fill fills the progress bar with the indicator color. + */ + /** + * A pseudo element is created for each progress bar bar that fills with the indicator color. + */ } + :host .md-progress-bar-background { + background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27#b2dfdb%27%2F%3E%3C%2Fsvg%3E"); + background-repeat: repeat-x; + background-size: 10px 4px; + height: 100%; + position: absolute; + visibility: hidden; + width: 100%; } + :host .md-progress-bar-buffer { + background-color: #b2dfdb; + height: 100%; + position: absolute; + transform-origin: top left; + transition: transform 250ms ease; + width: 100%; } + :host .md-progress-bar-secondary { + visibility: hidden; } + :host .md-progress-bar-fill { + animation: none; + height: 100%; + position: absolute; + transform-origin: top left; + transition: transform 250ms ease; + width: 100%; } + :host .md-progress-bar-fill::after { + animation: none; + background-color: #00897b; + content: ''; + display: inline-block; + height: 100%; + position: absolute; + width: 100%; } + :host[color="accent"] .md-progress-bar-background { + background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27#e1bee7%27%2F%3E%3C%2Fsvg%3E"); + background-repeat: repeat-x; + background-size: 10px 4px; } + :host[color="accent"] .md-progress-bar-buffer { + background-color: #e1bee7; } + :host[color="accent"] .md-progress-bar-fill::after { + background-color: #8e24aa; } + :host[color="warn"] .md-progress-bar-background { + background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27#ffcdd2%27%2F%3E%3C%2Fsvg%3E"); + background-repeat: repeat-x; + background-size: 10px 4px; } + :host[color="warn"] .md-progress-bar-buffer { + background-color: #ffcdd2; } + :host[color="warn"] .md-progress-bar-fill::after { + background-color: #e53935; } + :host[mode="query"] { + transform: rotateZ(180deg); } + :host[mode="indeterminate"] .md-progress-bar-fill, :host[mode="query"] .md-progress-bar-fill { + transition: none; } + :host[mode="indeterminate"] .md-progress-bar-primary, :host[mode="query"] .md-progress-bar-primary { + animation: md-progress-bar-primary-indeterminate-translate 2s infinite linear; + left: -145.166611%; } + :host[mode="indeterminate"] .md-progress-bar-primary.md-progress-bar-fill::after, :host[mode="query"] .md-progress-bar-primary.md-progress-bar-fill::after { + animation: md-progress-bar-primary-indeterminate-scale 2s infinite linear; } + :host[mode="indeterminate"] .md-progress-bar-secondary, :host[mode="query"] .md-progress-bar-secondary { + animation: md-progress-bar-secondary-indeterminate-translate 2s infinite linear; + left: -54.888891%; + visibility: visible; } + :host[mode="indeterminate"] .md-progress-bar-secondary.md-progress-bar-fill::after, :host[mode="query"] .md-progress-bar-secondary.md-progress-bar-fill::after { + animation: md-progress-bar-secondary-indeterminate-scale 2s infinite linear; } + :host[mode="buffer"] .md-progress-bar-background { + animation: md-progress-bar-background-scroll 250ms infinite linear; + visibility: visible; } + +:host-context([dir="rtl"]) { + transform: rotateY(180deg); } + +/** The values used for animations in md-progress-bar, both timing and transformation, can be considered magic values. + They are sourced from the Material Design example spec and duplicate the values of the original designers + definitions. + + + The indeterminate state is essentially made up of two progress bars, one primary (the one that is shown in both the + determinate and indeterminate states) and one secondary, which essentially mirrors the primary progress bar in + appearance but is only shown to assist with the indeterminate animations. + + + KEYFRAME BLOCK DESCRIPTION + primary-indeterminate-translate Translation of the primary progressbar across the screen + primary-indeterminate-scale Scaling of the primary progressbar as it's being translated across the screen + secondary-indeterminate-translate Translation of the secondary progressbar across the screen + secondary-indeterminate-scale Scaling of the secondary progressbar as it's being translated across the screen + + Because two different transform animations need to be applied at once, the translation is applied to the outer + element and the scaling is applied to the inner element, which provides the illusion necessary to make the animation + work. +*/ +/** Animations for indeterminate and query mode. */ +@keyframes md-progress-bar-primary-indeterminate-translate { + 0% { + transform: translateX(0px); } + 20% { + animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); + transform: translateX(0px); } + 59.15% { + animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); + transform: translateX(83.67142%); } + 100% { + transform: translateX(200.61106%); } } + +@keyframes md-progress-bar-primary-indeterminate-scale { + 0% { + transform: scaleX(0.08); } + 36.65% { + animation-timing-function: cubic-bezier(0.33473, 0.12482, 0.78584, 1); + transform: scaleX(0.08); } + 69.15% { + animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1); + transform: scaleX(0.66148); } + 100% { + transform: scaleX(0.08); } } + +@keyframes md-progress-bar-secondary-indeterminate-translate { + 0% { + animation-timing-function: cubic-bezier(0.15, 0, 0.51506, 0.40969); + transform: translateX(0px); } + 25% { + animation-timing-function: cubic-bezier(0.31033, 0.28406, 0.8, 0.73371); + transform: translateX(37.65191%); } + 48.35% { + animation-timing-function: cubic-bezier(0.4, 0.62704, 0.6, 0.90203); + transform: translateX(84.38617%); } + 100% { + transform: translateX(160.27778%); } } + +@keyframes md-progress-bar-secondary-indeterminate-scale { + 0% { + animation-timing-function: cubic-bezier(0.15, 0, 0.51506, 0.40969); + transform: scaleX(0.08); } + 19.15% { + animation-timing-function: cubic-bezier(0.31033, 0.28406, 0.8, 0.73371); + transform: scaleX(0.4571); } + 44.15% { + animation-timing-function: cubic-bezier(0.4, 0.62704, 0.6, 0.90203); + transform: scaleX(0.72796); } + 100% { + transform: scaleX(0.08); } } + +/** Animation for buffer mode. */ +@keyframes md-progress-bar-background-scroll { + to { + transform: translateX(-10px); } } diff --git a/DEBUG-merge/components/progress-bar/progress-bar.d.ts b/DEBUG-merge/components/progress-bar/progress-bar.d.ts new file mode 100644 index 000000000000..f354a7b6f939 --- /dev/null +++ b/DEBUG-merge/components/progress-bar/progress-bar.d.ts @@ -0,0 +1,20 @@ +/** + * component. + */ +export declare class MdProgressBar { + /** Value of the progressbar. Defaults to zero. Mirrored to aria-valuenow. */ + private _value; + value: number; + /** Buffer value of the progress bar. Defaults to zero. */ + private _bufferValue; + bufferValue: number; + /** + * Mode of the progress bar. + * + * Input must be one of these values: determinate, indeterminate, buffer, query, defaults to + * 'determinate'. + * Mirrored to mode attribute. + */ + mode: 'determinate' | 'indeterminate' | 'buffer' | 'query'; +} +export declare const MD_PROGRESS_BAR_DIRECTIVES: typeof MdProgressBar[]; diff --git a/DEBUG-merge/components/progress-bar/progress-bar.html b/DEBUG-merge/components/progress-bar/progress-bar.html new file mode 100644 index 000000000000..282bbe0d8db7 --- /dev/null +++ b/DEBUG-merge/components/progress-bar/progress-bar.html @@ -0,0 +1,5 @@ + +
+
+
+
diff --git a/DEBUG-merge/components/progress-bar/progress-bar.js b/DEBUG-merge/components/progress-bar/progress-bar.js new file mode 100644 index 000000000000..6e58ffea9e46 --- /dev/null +++ b/DEBUG-merge/components/progress-bar/progress-bar.js @@ -0,0 +1,110 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +// TODO(josephperrott): Benchpress tests. +// TODO(josephperrott): Add ARIA attributes for progressbar "for". +/** + * component. + */ +var MdProgressBar = (function () { + function MdProgressBar() { + /** Value of the progressbar. Defaults to zero. Mirrored to aria-valuenow. */ + this._value = 0; + /** Buffer value of the progress bar. Defaults to zero. */ + this._bufferValue = 0; + /** + * Mode of the progress bar. + * + * Input must be one of these values: determinate, indeterminate, buffer, query, defaults to + * 'determinate'. + * Mirrored to mode attribute. + */ + this.mode = 'determinate'; + } + Object.defineProperty(MdProgressBar.prototype, "value", { + get: function () { + return this._value; + }, + set: function (v) { + this._value = clamp(v || 0); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdProgressBar.prototype, "bufferValue", { + get: function () { + return this._bufferValue; + }, + set: function (v) { + this._bufferValue = clamp(v || 0); + }, + enumerable: true, + configurable: true + }); + /** + * Gets the current transform value for the progress bar's primary indicator. + * @internal + */ + MdProgressBar.prototype.primaryTransform = function () { + var scale = this.value / 100; + return { transform: "scaleX(" + scale + ")" }; + }; + /** + * Gets the current transform value for the progress bar's buffer indicator. Only used if the + * progress mode is set to buffer, otherwise returns an undefined, causing no transformation. + * @internal + */ + MdProgressBar.prototype.bufferTransform = function () { + if (this.mode == 'buffer') { + var scale = this.bufferValue / 100; + return { transform: "scaleX(" + scale + ")" }; + } + }; + __decorate([ + core_1.Input(), + core_1.HostBinding('attr.aria-valuenow'), + __metadata('design:type', Object) + ], MdProgressBar.prototype, "value", null); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdProgressBar.prototype, "bufferValue", null); + __decorate([ + core_1.Input(), + core_1.HostBinding('attr.mode'), + __metadata('design:type', Object) + ], MdProgressBar.prototype, "mode", void 0); + MdProgressBar = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-progress-bar', + host: { + 'role': 'progressbar', + 'aria-valuemin': '0', + 'aria-valuemax': '100', + }, + templateUrl: 'progress-bar.html', + styleUrls: ['progress-bar.css'], + changeDetection: core_1.ChangeDetectionStrategy.OnPush, + }), + __metadata('design:paramtypes', []) + ], MdProgressBar); + return MdProgressBar; +}()); +exports.MdProgressBar = MdProgressBar; +/** Clamps a value to be between two numbers, by default 0 and 100. */ +function clamp(v, min, max) { + if (min === void 0) { min = 0; } + if (max === void 0) { max = 100; } + return Math.max(min, Math.min(max, v)); +} +exports.MD_PROGRESS_BAR_DIRECTIVES = [MdProgressBar]; +//# sourceMappingURL=../../../../components/progress-bar/progress-bar.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/progress-bar/progress-bar.js.map b/DEBUG-merge/components/progress-bar/progress-bar.js.map new file mode 100644 index 000000000000..af52069651dd --- /dev/null +++ b/DEBUG-merge/components/progress-bar/progress-bar.js.map @@ -0,0 +1 @@ +{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../src/demo-app/components/progress-bar/progress-bar.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAKO,eAAe,CAAC,CAAA;AAGvB,yCAAyC;AACzC,kEAAkE;AAGlE;;GAEG;AAaH;IAAA;QACE,6EAA6E;QACrE,WAAM,GAAW,CAAC,CAAC;QAY3B,0DAA0D;QAClD,iBAAY,GAAW,CAAC,CAAC;QAWjC;;;;;;WAMG;QAGH,SAAI,GAAyD,aAAa,CAAC;IAsB7E,CAAC;IAnDC,sBAAI,gCAAK;aAAT;YACE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;QACrB,CAAC;aAED,UAAU,CAAS;YACjB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9B,CAAC;;;OAJA;IAUD,sBAAI,sCAAW;aAAf;YACE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;QAC3B,CAAC;aAED,UAAgB,CAAS;YACvB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QACpC,CAAC;;;OAJA;IAiBD;;;OAGG;IACH,wCAAgB,GAAhB;QACE,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;QAC7B,MAAM,CAAC,EAAC,SAAS,EAAE,YAAU,KAAK,MAAG,EAAC,CAAC;IACzC,CAAC;IAED;;;;OAIG;IACH,uCAAe,GAAf;QACE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC;YAC1B,IAAI,KAAK,GAAG,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;YACnC,MAAM,CAAC,EAAC,SAAS,EAAE,YAAU,KAAK,MAAG,EAAC,CAAC;QACzC,CAAC;IACH,CAAC;IApDD;QAAC,YAAK,EAAE;QACP,kBAAW,CAAC,oBAAoB,CAAC;;8CAAA;IAYlC;QAAC,YAAK,EAAE;;oDAAA;IAgBR;QAAC,YAAK,EAAE;QACP,kBAAW,CAAC,WAAW,CAAC;;+CAAA;IA9C3B;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,iBAAiB;YAC3B,IAAI,EAAE;gBACJ,MAAM,EAAE,aAAa;gBACrB,eAAe,EAAE,GAAG;gBACpB,eAAe,EAAE,KAAK;aACvB;YACD,WAAW,EAAE,mBAAmB;YAChC,SAAS,EAAE,CAAC,kBAAkB,CAAC;YAC/B,eAAe,EAAE,8BAAuB,CAAC,MAAM;SAChD,CAAC;;qBAAA;IA0DF,oBAAC;AAAD,CAAC,AAzDD,IAyDC;AAzDY,qBAAa,gBAyDzB,CAAA;AAED,sEAAsE;AACtE,eAAe,CAAS,EAAE,GAAO,EAAE,GAAS;IAAlB,mBAAO,GAAP,OAAO;IAAE,mBAAS,GAAT,SAAS;IAC1C,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC;AACzC,CAAC;AAEY,kCAA0B,GAAG,CAAC,aAAa,CAAC,CAAC","sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n HostBinding,\n Input,\n} from '@angular/core';\n\n\n// TODO(josephperrott): Benchpress tests.\n// TODO(josephperrott): Add ARIA attributes for progressbar \"for\".\n\n\n/**\n * component.\n */\n@Component({\n moduleId: module.id,\n selector: 'md-progress-bar',\n host: {\n 'role': 'progressbar',\n 'aria-valuemin': '0',\n 'aria-valuemax': '100',\n },\n templateUrl: 'progress-bar.html',\n styleUrls: ['progress-bar.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MdProgressBar {\n /** Value of the progressbar. Defaults to zero. Mirrored to aria-valuenow. */\n private _value: number = 0;\n\n @Input()\n @HostBinding('attr.aria-valuenow')\n get value() {\n return this._value;\n }\n\n set value(v: number) {\n this._value = clamp(v || 0);\n }\n\n /** Buffer value of the progress bar. Defaults to zero. */\n private _bufferValue: number = 0;\n\n @Input()\n get bufferValue() {\n return this._bufferValue;\n }\n\n set bufferValue(v: number) {\n this._bufferValue = clamp(v || 0);\n }\n\n /**\n * Mode of the progress bar.\n *\n * Input must be one of these values: determinate, indeterminate, buffer, query, defaults to\n * 'determinate'.\n * Mirrored to mode attribute.\n */\n @Input()\n @HostBinding('attr.mode')\n mode: 'determinate' | 'indeterminate' | 'buffer' | 'query' = 'determinate';\n\n /**\n * Gets the current transform value for the progress bar's primary indicator.\n * @internal\n */\n primaryTransform() {\n let scale = this.value / 100;\n return {transform: `scaleX(${scale})`};\n }\n\n /**\n * Gets the current transform value for the progress bar's buffer indicator. Only used if the\n * progress mode is set to buffer, otherwise returns an undefined, causing no transformation.\n * @internal\n */\n bufferTransform() {\n if (this.mode == 'buffer') {\n let scale = this.bufferValue / 100;\n return {transform: `scaleX(${scale})`};\n }\n }\n}\n\n/** Clamps a value to be between two numbers, by default 0 and 100. */\nfunction clamp(v: number, min = 0, max = 100) {\n return Math.max(min, Math.min(max, v));\n}\n\nexport const MD_PROGRESS_BAR_DIRECTIVES = [MdProgressBar];\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/progress-circle/README.md b/DEBUG-merge/components/progress-circle/README.md new file mode 100644 index 000000000000..fa1296d3d198 --- /dev/null +++ b/DEBUG-merge/components/progress-circle/README.md @@ -0,0 +1,51 @@ +# md-progress-circle + +`md-progress-circle` is a component for indicating progress and activity, matching the spec of +[Material Design Progress & Activity](https://www.google.com/design/spec/components/progress-activity.html). + +### Progress Modes + +There are two modes: + 1. Determinate - `` + * Indicates how long an operation will take when the percentage complete is detectable. + 2. Indeterminate - `` or `` + * Indicates the user must wait while something finishes when it’s not necessary or possible to indicate how long it + will take. + +Example: + + ```html + + + + ``` + +### Theming + +All progress indicators can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the appropriate class. + +Example: + + ```html + + + + ``` + +### Accessibility + + * ARIA attributes are applied to the indicator defining the valuemin, valuemax and valuenow attributes. + +### Upcoming work + + * Adding ARIA attribute for progressbar "for". + +### API Summary + +Properties: + +| Name | Type | Description | +| --- | --- | --- | +| `color` | `"primary"|"accent"|"warn"` | The color palette of the progress indicator | +| `mode` | `"determinate"|"indeterminate"` | The mode of the progress indicator | +| `value` | number | The current progress percentage for determinate indicators | diff --git a/DEBUG-merge/components/progress-circle/package.json b/DEBUG-merge/components/progress-circle/package.json new file mode 100644 index 000000000000..fc600437c1ef --- /dev/null +++ b/DEBUG-merge/components/progress-circle/package.json @@ -0,0 +1,27 @@ +{ + "name": "@angular2-material/progress-circle", + "version": "2.0.0-alpha.5-2", + "description": "Angular 2 Material progress-circle", + "main": "./progress-circle.js", + "typings": "./progress-circle.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components", + "progress", + "spinner" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "@angular2-material/core": "2.0.0-alpha.5-2" + } +} diff --git a/DEBUG-merge/components/progress-circle/progress-circle.css b/DEBUG-merge/components/progress-circle/progress-circle.css new file mode 100644 index 000000000000..2cba501456f8 --- /dev/null +++ b/DEBUG-merge/components/progress-circle/progress-circle.css @@ -0,0 +1,56 @@ +/* Animation Durations */ +/** Component sizing */ +:host { + display: block; + /** Height and width are provided for md-progress-circle to act as a default. + The height and width are expected to be overwritten by application css. */ + height: 100px; + width: 100px; + /** SVG's viewBox is defined as 0 0 100 100, this means that all SVG children will placed + based on a 100px by 100px box. Additionally all SVG sizes and locations are in reference to + this viewBox. + */ } + :host svg { + height: 100%; + width: 100%; + transform-origin: center; } + :host path { + fill: transparent; + stroke: #00897b; + /** Stroke width of 10px defines stroke as 10% of the viewBox */ + stroke-width: 10px; } + :host[color="accent"] path { + stroke: #8e24aa; } + :host[color="warn"] path { + stroke: #e53935; } + :host[mode="indeterminate"] { + animation-duration: 5.25s, 2.8875s; + animation-name: md-progress-circle-sporadic-rotate, md-progress-circle-linear-rotate; + animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1), linear; + animation-iteration-count: infinite; + transition: none; } + +/** Animations for indeterminate mode */ +@keyframes md-progress-circle-linear-rotate { + 0% { + transform: rotate(0deg); } + 100% { + transform: rotate(360deg); } } + +@keyframes md-progress-circle-sporadic-rotate { + 12.5% { + transform: rotate(135deg); } + 25% { + transform: rotate(270deg); } + 37.5% { + transform: rotate(405deg); } + 50% { + transform: rotate(540deg); } + 62.5% { + transform: rotate(675deg); } + 75% { + transform: rotate(810deg); } + 87.5% { + transform: rotate(945deg); } + 100% { + transform: rotate(1080deg); } } diff --git a/DEBUG-merge/components/progress-circle/progress-circle.d.ts b/DEBUG-merge/components/progress-circle/progress-circle.d.ts new file mode 100644 index 000000000000..49da46f92136 --- /dev/null +++ b/DEBUG-merge/components/progress-circle/progress-circle.d.ts @@ -0,0 +1,63 @@ +import { ChangeDetectorRef, OnDestroy } from '@angular/core'; +export declare type ProgressCircleMode = 'determinate' | 'indeterminate'; +/** + * component. + */ +export declare class MdProgressCircle implements OnDestroy { + private _changeDetectorRef; + /** The id of the last requested animation. */ + private _lastAnimationId; + /** The id of the indeterminate interval. */ + private _interdeterminateInterval; + /** The current path value, representing the progres circle. */ + private _currentPath; + currentPath: string; + /** Clean up any animations that were running. */ + ngOnDestroy(): void; + /** + * Value of the progress circle. + * + * Input:number, defaults to 0. + * _value is bound to the host as the attribute aria-valuenow. + */ + private _value; + value: number; + /** + * Mode of the progress circle + * + * Input must be one of the values from ProgressMode, defaults to 'determinate'. + * mode is bound to the host as the attribute host. + */ + mode: ProgressCircleMode; + private _mode; + constructor(_changeDetectorRef: ChangeDetectorRef); + /** + * Animates the circle from one percentage value to another. + * + * @param animateFrom The percentage of the circle filled starting the animation. + * @param animateTo The percentage of the circle filled ending the animation. + * @param ease The easing function to manage the pace of change in the animation. + * @param duration The length of time to show the animation, in milliseconds. + * @param rotation The starting angle of the circle fill, with 0° represented at the top center + * of the circle. + */ + private _animateCircle(animateFrom, animateTo, ease, duration, rotation); + /** + * Starts the indeterminate animation interval, if it is not already running. + */ + private _startIndeterminateAnimation(); + /** + * Removes interval, ending the animation. + */ + private _cleanupIndeterminateAnimation(); +} +/** + * component. + * + * This is a component definition to be used as a convenience reference to create an + * indeterminate instance. + */ +export declare class MdSpinner extends MdProgressCircle { + constructor(changeDetectorRef: ChangeDetectorRef); +} +export declare const MD_PROGRESS_CIRCLE_DIRECTIVES: typeof MdProgressCircle[]; diff --git a/DEBUG-merge/components/progress-circle/progress-circle.html b/DEBUG-merge/components/progress-circle/progress-circle.html new file mode 100644 index 000000000000..6c5b5be3fada --- /dev/null +++ b/DEBUG-merge/components/progress-circle/progress-circle.html @@ -0,0 +1,9 @@ + + + + diff --git a/DEBUG-merge/components/progress-circle/progress-circle.js b/DEBUG-merge/components/progress-circle/progress-circle.js new file mode 100644 index 000000000000..158959b36a14 --- /dev/null +++ b/DEBUG-merge/components/progress-circle/progress-circle.js @@ -0,0 +1,297 @@ +"use strict"; +var __extends = (this && this.__extends) || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +}; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +// TODO(josephperrott): Benchpress tests. +/** A single degree in radians. */ +var DEGREE_IN_RADIANS = Math.PI / 180; +/** Duration of the indeterminate animation. */ +var DURATION_INDETERMINATE = 667; +/** Duration of the indeterminate animation. */ +var DURATION_DETERMINATE = 225; +/** Start animation value of the indeterminate animation */ +var startIndeterminate = 3; +/** End animation value of the indeterminate animation */ +var endIndeterminate = 80; +/** + * component. + */ +var MdProgressCircle = (function () { + function MdProgressCircle(_changeDetectorRef) { + this._changeDetectorRef = _changeDetectorRef; + /** The id of the last requested animation. */ + this._lastAnimationId = 0; + /** + * Value of the progress circle. + * + * Input:number, defaults to 0. + * _value is bound to the host as the attribute aria-valuenow. + */ + this._value = 0; + this._mode = 'determinate'; + } + Object.defineProperty(MdProgressCircle.prototype, "interdeterminateInterval", { + /** @internal */ + get: function () { + return this._interdeterminateInterval; + }, + /** @internal */ + set: function (interval) { + clearInterval(this._interdeterminateInterval); + this._interdeterminateInterval = interval; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdProgressCircle.prototype, "currentPath", { + get: function () { + return this._currentPath; + }, + set: function (path) { + this._currentPath = path; + // Mark for check as our ChangeDetectionStrategy is OnPush, when changes come from within the + // component, change detection must be called for. + this._changeDetectorRef.markForCheck(); + }, + enumerable: true, + configurable: true + }); + /** Clean up any animations that were running. */ + MdProgressCircle.prototype.ngOnDestroy = function () { + this._cleanupIndeterminateAnimation(); + }; + Object.defineProperty(MdProgressCircle.prototype, "value", { + get: function () { + return this._value; + }, + set: function (v) { + if (v) { + var newValue = clamp(v); + this._animateCircle(this.value, newValue, linearEase, DURATION_DETERMINATE, 0); + this._value = newValue; + } + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdProgressCircle.prototype, "mode", { + /** + * Mode of the progress circle + * + * Input must be one of the values from ProgressMode, defaults to 'determinate'. + * mode is bound to the host as the attribute host. + */ + get: function () { + return this._mode; + }, + set: function (m) { + if (m == 'indeterminate') { + this._startIndeterminateAnimation(); + } + else { + this._cleanupIndeterminateAnimation(); + } + this._mode = m; + }, + enumerable: true, + configurable: true + }); + /** + * Animates the circle from one percentage value to another. + * + * @param animateFrom The percentage of the circle filled starting the animation. + * @param animateTo The percentage of the circle filled ending the animation. + * @param ease The easing function to manage the pace of change in the animation. + * @param duration The length of time to show the animation, in milliseconds. + * @param rotation The starting angle of the circle fill, with 0° represented at the top center + * of the circle. + */ + MdProgressCircle.prototype._animateCircle = function (animateFrom, animateTo, ease, duration, rotation) { + var _this = this; + var id = ++this._lastAnimationId; + var startTime = now(); + var changeInValue = animateTo - animateFrom; + // No need to animate it if the values are the same + if (animateTo === animateFrom) { + this.currentPath = getSvgArc(animateTo, rotation); + } + else { + var animation_1 = function (currentTime) { + var elapsedTime = Math.max(0, Math.min((currentTime || now()) - startTime, duration)); + _this.currentPath = getSvgArc(ease(elapsedTime, animateFrom, changeInValue, duration), rotation); + // Prevent overlapping animations by checking if a new animation has been called for and + // if the animation has lasted long than the animation duration. + if (id === _this._lastAnimationId && elapsedTime < duration) { + requestAnimationFrame(animation_1); + } + }; + requestAnimationFrame(animation_1); + } + }; + /** + * Starts the indeterminate animation interval, if it is not already running. + */ + MdProgressCircle.prototype._startIndeterminateAnimation = function () { + var _this = this; + var rotationStartPoint = 0; + var start = startIndeterminate; + var end = endIndeterminate; + var duration = DURATION_INDETERMINATE; + var animate = function () { + _this._animateCircle(start, end, materialEase, duration, rotationStartPoint); + // Prevent rotation from reaching Number.MAX_SAFE_INTEGER. + rotationStartPoint = (rotationStartPoint + end) % 100; + var temp = start; + start = -end; + end = -temp; + }; + if (!this.interdeterminateInterval) { + this.interdeterminateInterval = setInterval(animate, duration + 50, 0, false); + animate(); + } + }; + /** + * Removes interval, ending the animation. + */ + MdProgressCircle.prototype._cleanupIndeterminateAnimation = function () { + this.interdeterminateInterval = null; + }; + __decorate([ + core_1.Input(), + core_1.HostBinding('attr.aria-valuenow'), + __metadata('design:type', Object) + ], MdProgressCircle.prototype, "value", null); + __decorate([ + core_1.HostBinding('attr.mode'), + core_1.Input(), + __metadata('design:type', Object) + ], MdProgressCircle.prototype, "mode", null); + MdProgressCircle = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-progress-circle', + host: { + 'role': 'progressbar', + 'aria-valuemin': '0', + 'aria-valuemax': '100', + }, + templateUrl: 'progress-circle.html', + styleUrls: ['progress-circle.css'], + changeDetection: core_1.ChangeDetectionStrategy.OnPush, + }), + __metadata('design:paramtypes', [core_1.ChangeDetectorRef]) + ], MdProgressCircle); + return MdProgressCircle; +}()); +exports.MdProgressCircle = MdProgressCircle; +/** + * component. + * + * This is a component definition to be used as a convenience reference to create an + * indeterminate instance. + */ +var MdSpinner = (function (_super) { + __extends(MdSpinner, _super); + function MdSpinner(changeDetectorRef) { + _super.call(this, changeDetectorRef); + this.mode = 'indeterminate'; + } + MdSpinner = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-spinner', + host: { + 'role': 'progressbar', + }, + templateUrl: 'progress-circle.html', + styleUrls: ['progress-circle.css'], + }), + __metadata('design:paramtypes', [core_1.ChangeDetectorRef]) + ], MdSpinner); + return MdSpinner; +}(MdProgressCircle)); +exports.MdSpinner = MdSpinner; +/** + * Module functions. + */ +/** Clamps a value to be between 0 and 100. */ +function clamp(v) { + return Math.max(0, Math.min(100, v)); +} +/** + * Returns the current timestamp either based on the performance global or a date object. + */ +function now() { + if (typeof performance !== 'undefined' && performance.now) { + return performance.now(); + } + return Date.now(); +} +/** + * Converts Polar coordinates to Cartesian. + */ +function polarToCartesian(radius, pathRadius, angleInDegrees) { + var angleInRadians = (angleInDegrees - 90) * DEGREE_IN_RADIANS; + return (radius + (pathRadius * Math.cos(angleInRadians))) + + ',' + (radius + (pathRadius * Math.sin(angleInRadians))); +} +/** + * Easing function for linear animation. + */ +function linearEase(currentTime, startValue, changeInValue, duration) { + return changeInValue * currentTime / duration + startValue; +} +/** + * Easing function to match material design indeterminate animation. + */ +function materialEase(currentTime, startValue, changeInValue, duration) { + var time = currentTime / duration; + var timeCubed = Math.pow(time, 3); + var timeQuad = Math.pow(time, 4); + var timeQuint = Math.pow(time, 5); + return startValue + changeInValue * ((6 * timeQuint) + (-15 * timeQuad) + (10 * timeCubed)); +} +/** + * Determines the path value to define the arc. Converting percentage values to to polar + * coordinates on the circle, and then to cartesian coordinates in the viewport. + * + * @param currentValue The current percentage value of the progress circle, the percentage of the + * circle to fill. + * @param rotation The starting point of the circle with 0 being the 0 degree point. + * @return A string for an SVG path representing a circle filled from the starting point to the + * percentage value provided. + */ +function getSvgArc(currentValue, rotation) { + // The angle can't be exactly 360, because the arc becomes hidden. + var maximumAngle = 359.99 / 100; + var startPoint = rotation || 0; + var radius = 50; + var pathRadius = 40; + var startAngle = startPoint * maximumAngle; + var endAngle = currentValue * maximumAngle; + var start = polarToCartesian(radius, pathRadius, startAngle); + var end = polarToCartesian(radius, pathRadius, endAngle + startAngle); + var arcSweep = endAngle < 0 ? 0 : 1; + var largeArcFlag; + if (endAngle < 0) { + largeArcFlag = endAngle >= -180 ? 0 : 1; + } + else { + largeArcFlag = endAngle <= 180 ? 0 : 1; + } + return "M" + start + "A" + pathRadius + "," + pathRadius + " 0 " + largeArcFlag + "," + arcSweep + " " + end; +} +exports.MD_PROGRESS_CIRCLE_DIRECTIVES = [MdProgressCircle, MdSpinner]; +//# sourceMappingURL=../../../../components/progress-circle/progress-circle.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/progress-circle/progress-circle.js.map b/DEBUG-merge/components/progress-circle/progress-circle.js.map new file mode 100644 index 000000000000..feab3ff111fe --- /dev/null +++ b/DEBUG-merge/components/progress-circle/progress-circle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"progress-circle.js","sourceRoot":"","sources":["../../src/demo-app/components/progress-circle/progress-circle.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n HostBinding,\n ChangeDetectorRef,\n ChangeDetectionStrategy,\n OnDestroy,\n Input\n} from '@angular/core';\n\n// TODO(josephperrott): Benchpress tests.\n\n/** A single degree in radians. */\nconst DEGREE_IN_RADIANS = Math.PI / 180;\n/** Duration of the indeterminate animation. */\nconst DURATION_INDETERMINATE = 667;\n/** Duration of the indeterminate animation. */\nconst DURATION_DETERMINATE = 225;\n/** Start animation value of the indeterminate animation */\nlet startIndeterminate = 3;\n/** End animation value of the indeterminate animation */\nlet endIndeterminate = 80;\n\n\nexport type ProgressCircleMode = 'determinate' | 'indeterminate';\n\ntype EasingFn = (currentTime: number, startValue: number,\n changeInValue: number, duration: number) => number\n\n\n/**\n * component.\n */\n@Component({\n moduleId: module.id,\n selector: 'md-progress-circle',\n host: {\n 'role': 'progressbar',\n 'aria-valuemin': '0',\n 'aria-valuemax': '100',\n },\n templateUrl: 'progress-circle.html',\n styleUrls: ['progress-circle.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MdProgressCircle implements OnDestroy {\n /** The id of the last requested animation. */\n private _lastAnimationId: number = 0;\n\n /** The id of the indeterminate interval. */\n private _interdeterminateInterval: number;\n\n /** @internal */\n get interdeterminateInterval() {\n return this._interdeterminateInterval;\n }\n /** @internal */\n set interdeterminateInterval(interval: number) {\n clearInterval(this._interdeterminateInterval);\n this._interdeterminateInterval = interval;\n }\n\n /** The current path value, representing the progres circle. */\n private _currentPath: string;\n get currentPath() {\n return this._currentPath;\n }\n set currentPath(path: string) {\n this._currentPath = path;\n // Mark for check as our ChangeDetectionStrategy is OnPush, when changes come from within the\n // component, change detection must be called for.\n this._changeDetectorRef.markForCheck();\n }\n\n /** Clean up any animations that were running. */\n ngOnDestroy() {\n this._cleanupIndeterminateAnimation();\n }\n\n /**\n * Value of the progress circle.\n *\n * Input:number, defaults to 0.\n * _value is bound to the host as the attribute aria-valuenow.\n */\n private _value: number = 0;\n @Input()\n @HostBinding('attr.aria-valuenow')\n get value() {\n return this._value;\n }\n set value(v: number) {\n if (v) {\n let newValue = clamp(v);\n this._animateCircle(this.value, newValue, linearEase, DURATION_DETERMINATE, 0);\n this._value = newValue;\n }\n }\n\n /**\n * Mode of the progress circle\n *\n * Input must be one of the values from ProgressMode, defaults to 'determinate'.\n * mode is bound to the host as the attribute host.\n */\n @HostBinding('attr.mode')\n @Input()\n get mode() {\n return this._mode;\n }\n set mode(m: ProgressCircleMode) {\n if (m == 'indeterminate') {\n this._startIndeterminateAnimation();\n } else {\n this._cleanupIndeterminateAnimation();\n }\n this._mode = m;\n }\n private _mode: ProgressCircleMode = 'determinate';\n\n constructor(private _changeDetectorRef: ChangeDetectorRef) {\n }\n\n\n /**\n * Animates the circle from one percentage value to another.\n *\n * @param animateFrom The percentage of the circle filled starting the animation.\n * @param animateTo The percentage of the circle filled ending the animation.\n * @param ease The easing function to manage the pace of change in the animation.\n * @param duration The length of time to show the animation, in milliseconds.\n * @param rotation The starting angle of the circle fill, with 0° represented at the top center\n * of the circle.\n */\n private _animateCircle(animateFrom: number, animateTo: number, ease: EasingFn,\n duration: number, rotation: number) {\n let id = ++this._lastAnimationId;\n let startTime = now();\n let changeInValue = animateTo - animateFrom;\n\n // No need to animate it if the values are the same\n if (animateTo === animateFrom) {\n this.currentPath = getSvgArc(animateTo, rotation);\n } else {\n let animation = (currentTime: number) => {\n let elapsedTime = Math.max(\n 0, Math.min((currentTime || now()) - startTime, duration));\n\n this.currentPath = getSvgArc(\n ease(elapsedTime, animateFrom, changeInValue, duration),\n rotation\n );\n\n // Prevent overlapping animations by checking if a new animation has been called for and\n // if the animation has lasted long than the animation duration.\n if (id === this._lastAnimationId && elapsedTime < duration) {\n requestAnimationFrame(animation);\n }\n };\n requestAnimationFrame(animation);\n }\n }\n\n\n /**\n * Starts the indeterminate animation interval, if it is not already running.\n */\n private _startIndeterminateAnimation() {\n let rotationStartPoint = 0;\n let start = startIndeterminate;\n let end = endIndeterminate;\n let duration = DURATION_INDETERMINATE;\n let animate = () => {\n this._animateCircle(start, end, materialEase, duration, rotationStartPoint);\n // Prevent rotation from reaching Number.MAX_SAFE_INTEGER.\n rotationStartPoint = (rotationStartPoint + end) % 100;\n let temp = start;\n start = -end;\n end = -temp;\n };\n\n if (!this.interdeterminateInterval) {\n this.interdeterminateInterval = setInterval(\n animate, duration + 50, 0, false);\n animate();\n }\n }\n\n\n /**\n * Removes interval, ending the animation.\n */\n private _cleanupIndeterminateAnimation() {\n this.interdeterminateInterval = null;\n }\n}\n\n\n/**\n * component.\n *\n * This is a component definition to be used as a convenience reference to create an\n * indeterminate instance.\n */\n@Component({\n moduleId: module.id,\n selector: 'md-spinner',\n host: {\n 'role': 'progressbar',\n },\n templateUrl: 'progress-circle.html',\n styleUrls: ['progress-circle.css'],\n})\nexport class MdSpinner extends MdProgressCircle {\n constructor(changeDetectorRef: ChangeDetectorRef) {\n super(changeDetectorRef);\n this.mode = 'indeterminate';\n }\n}\n\n\n/**\n * Module functions.\n */\n\n/** Clamps a value to be between 0 and 100. */\nfunction clamp(v: number) {\n return Math.max(0, Math.min(100, v));\n}\n\n\n/**\n * Returns the current timestamp either based on the performance global or a date object.\n */\nfunction now() {\n if (typeof performance !== 'undefined' && performance.now) {\n return performance.now();\n }\n return Date.now();\n}\n\n\n/**\n * Converts Polar coordinates to Cartesian.\n */\nfunction polarToCartesian(radius: number, pathRadius: number, angleInDegrees: number) {\n let angleInRadians = (angleInDegrees - 90) * DEGREE_IN_RADIANS;\n\n return (radius + (pathRadius * Math.cos(angleInRadians))) +\n ',' + (radius + (pathRadius * Math.sin(angleInRadians)));\n}\n\n\n/**\n * Easing function for linear animation.\n */\nfunction linearEase(currentTime: number, startValue: number,\n changeInValue: number, duration: number) {\n return changeInValue * currentTime / duration + startValue;\n}\n\n\n/**\n * Easing function to match material design indeterminate animation.\n */\nfunction materialEase(currentTime: number, startValue: number,\n changeInValue: number, duration: number) {\n let time = currentTime / duration;\n let timeCubed = Math.pow(time, 3);\n let timeQuad = Math.pow(time, 4);\n let timeQuint = Math.pow(time, 5);\n return startValue + changeInValue * ((6 * timeQuint) + (-15 * timeQuad) + (10 * timeCubed));\n\n}\n\n\n/**\n * Determines the path value to define the arc. Converting percentage values to to polar\n * coordinates on the circle, and then to cartesian coordinates in the viewport.\n *\n * @param currentValue The current percentage value of the progress circle, the percentage of the\n * circle to fill.\n * @param rotation The starting point of the circle with 0 being the 0 degree point.\n * @return A string for an SVG path representing a circle filled from the starting point to the\n * percentage value provided.\n */\nfunction getSvgArc(currentValue: number, rotation: number) {\n // The angle can't be exactly 360, because the arc becomes hidden.\n let maximumAngle = 359.99 / 100;\n let startPoint = rotation || 0;\n let radius = 50;\n let pathRadius = 40;\n\n let startAngle = startPoint * maximumAngle;\n let endAngle = currentValue * maximumAngle;\n let start = polarToCartesian(radius, pathRadius, startAngle);\n let end = polarToCartesian(radius, pathRadius, endAngle + startAngle);\n let arcSweep = endAngle < 0 ? 0 : 1;\n let largeArcFlag: number;\n\n if (endAngle < 0) {\n largeArcFlag = endAngle >= -180 ? 0 : 1;\n } else {\n largeArcFlag = endAngle <= 180 ? 0 : 1;\n }\n\n return `M${start}A${pathRadius},${pathRadius} 0 ${largeArcFlag},${arcSweep} ${end}`;\n}\n\nexport const MD_PROGRESS_CIRCLE_DIRECTIVES = [MdProgressCircle, MdSpinner];\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/radio/README.md b/DEBUG-merge/components/radio/README.md new file mode 100644 index 000000000000..7c30a1f812ac --- /dev/null +++ b/DEBUG-merge/components/radio/README.md @@ -0,0 +1,64 @@ +# MdRadio +Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side. + +![Preview](https://material.angularjs.org/material2_assets/radio/radios.png) + +### Examples +A basic radio group would have the following markup. +```html + + 1 + 2 + +``` + +A dynamic example, populated from a `data` variable: +```html + + + {{d.label}} + + +``` + +A dynamic example for use inside a form showing support for `[(ngModel)]`: +```html + + + {{o.label}} + + +``` + +## `` +### Properties + +| Name | Type | Description | +| --- | --- | --- | +| `selected` | `MdRadioButton` | The currently selected button. | +| `value` | `any` | The current value for this group. | +| `disabled` | `boolean` | Whether the group is disabled. | + +When selection is changed, an event is emitted from the `change` EventEmitter property. + +### Notes +The `md-radio-group` component has no button initially selected. + +## `` +### Properties + +| Name (attribute) | Type | Description | +| --- | --- | --- | +| `id` | `string` | The unique ID of this radio button. | +| `name` | `string` | Group name, defaults to parent radio group if present. | +| `value` | `any` | The value of this radio button. | +| `checked` | `boolean` | Whether the radio is checked. | +| `disabled` | `boolean` | Whether the radio is disabled. | +| `aria-label` | `string` | Used to set the `aria-label` attribute of the underlying input element. | +| `aria-labelledby` | `string` | Used to set the `aria-labelledby` attribute of the underlying input element. + If provided, this attribute takes precedence as the element's text alternative. | + +When checked, an event is emitted from the `change` EventEmitter property. + +### Notes +* The `md-radio-button` component by default uses the accent color from the theme palette. diff --git a/DEBUG-merge/components/radio/package.json b/DEBUG-merge/components/radio/package.json new file mode 100644 index 000000000000..de83cec18695 --- /dev/null +++ b/DEBUG-merge/components/radio/package.json @@ -0,0 +1,26 @@ +{ + "name": "@angular2-material/radio", + "version": "2.0.0-alpha.5-2", + "description": "Angular 2 Material radio", + "main": "./radio.js", + "typings": "./radio.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components", + "radio" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "@angular2-material/core": "2.0.0-alpha.5-2" + } +} diff --git a/DEBUG-merge/components/radio/radio.css b/DEBUG-merge/components/radio/radio.css new file mode 100644 index 000000000000..cc9cac084a5b --- /dev/null +++ b/DEBUG-merge/components/radio/radio.css @@ -0,0 +1,112 @@ +/** + * Mixin that creates a new stacking context. + * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + */ +/** + * This mixin hides an element visually. + * That means it's still accessible for screen-readers but not visible in view. + */ +/** + * Forces an element to grow to fit floated contents; used as as an alternative to + * `overflow: hidden;` because it doesn't cut off contents. + */ +/** + * A mixin, which generates temporary ink ripple on a given component. + * When $bindToParent is set to true, it will check for the focused class on the same selector as you included + * that mixin. + * It is also possible to specify the color palette of the temporary ripple. By default it uses the + * accent palette for its background. + */ +md-radio-button { + display: inline-block; } + +.md-radio-label { + cursor: pointer; + display: block; + white-space: nowrap; } + +.md-radio-container { + box-sizing: border-box; + display: inline-block; + height: 20px; + position: relative; + top: 2px; + width: 20px; } + +.md-radio-outer-circle { + border-color: rgba(0, 0, 0, 0.54); + border: solid 2px; + border-radius: 50%; + box-sizing: border-box; + height: 20px; + left: 0; + position: absolute; + top: 0; + transition: border-color ease 0.28s; + width: 20px; } + .md-radio-checked .md-radio-outer-circle { + border-color: #9c27b0; } + .md-radio-disabled .md-radio-outer-circle { + border-color: rgba(0, 0, 0, 0.38); } + +.md-radio-inner-circle { + background-color: #9c27b0; + border-radius: 50%; + box-sizing: border-box; + height: 20px; + left: 0; + position: absolute; + top: 0; + transition: transform ease 0.28s, background-color ease 0.28s; + transform: scale(0); + width: 20px; } + .md-radio-checked .md-radio-inner-circle { + transform: scale(0.5); } + .md-radio-disabled .md-radio-inner-circle { + background-color: rgba(0, 0, 0, 0.38); } + +.md-radio-label-content { + display: inline-block; + float: right; + line-height: 24px; + padding-left: 8px; + position: relative; + vertical-align: top; } + [dir='rtl'] .md-radio-label-content { + float: left; + padding-right: 8px; + padding-left: 0; } + +.md-radio-input { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + text-transform: none; + width: 1px; } + +.md-radio-disabled, .md-radio-disabled .md-radio-label { + cursor: default; } + +.md-ink-ripple { + border-radius: 50%; + opacity: 0; + height: 48px; + left: 50%; + overflow: hidden; + pointer-events: none; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + transition: opacity ease 0.28s, background-color ease 0.28s; + width: 48px; } + +.md-radio-focused .md-ink-ripple { + opacity: 1; + background-color: rgba(156, 39, 176, 0.26); } + +.md-radio-disabled .md-ink-ripple { + background-color: #000; } diff --git a/DEBUG-merge/components/radio/radio.d.ts b/DEBUG-merge/components/radio/radio.d.ts new file mode 100644 index 000000000000..820df17e72d1 --- /dev/null +++ b/DEBUG-merge/components/radio/radio.d.ts @@ -0,0 +1,97 @@ +import { AfterContentInit, EventEmitter, OnInit } from '@angular/core'; +import { ControlValueAccessor } from '@angular/common'; +import { MdUniqueSelectionDispatcher } from '@angular2-material/core/coordination/unique-selection-dispatcher'; +export { MdUniqueSelectionDispatcher } from '@angular2-material/core/coordination/unique-selection-dispatcher'; +/** A simple change event emitted by either MdRadioButton or MdRadioGroup. */ +export declare class MdRadioChange { + source: MdRadioButton; + value: any; +} +export declare class MdRadioGroup implements AfterContentInit, ControlValueAccessor { + /** + * Selected value for group. Should equal the value of the selected radio button if there *is* + * a corresponding radio button with a matching value. If there is *not* such a corresponding + * radio button, this value persists to be applied in case a new radio button is added with a + * matching value. + */ + private _value; + /** The HTML name attribute applied to radio buttons in this group. */ + private _name; + /** Disables all individual radio buttons assigned to this group. */ + private _disabled; + /** The currently selected radio button. Should match value. */ + private _selected; + /** Whether the `value` has been set to its initial value. */ + private _isInitialized; + /** The method to be called in order to update ngModel */ + private _controlValueAccessorChangeFn; + /** onTouch function registered via registerOnTouch (ControlValueAccessor). */ + onTouched: () => any; + /** Event emitted when the group value changes. */ + change: EventEmitter; + /** Child radio buttons. */ + private _radios; + name: string; + disabled: boolean; + value: any; + selected: MdRadioButton; + /** + * Initialize properties once content children are available. + * This allows us to propagate relevant attributes to associated buttons. + * TODO: internal + */ + ngAfterContentInit(): void; + private _updateRadioButtonNames(); + /** Updates the `selected` radio button from the internal _value state. */ + private _updateSelectedRadioFromValue(); + /** Dispatch change event with current selection and group value. */ + private _emitChangeEvent(); + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + writeValue(value: any): void; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + registerOnChange(fn: (value: any) => void): void; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + registerOnTouched(fn: any): void; +} +export declare class MdRadioButton implements OnInit { + radioDispatcher: MdUniqueSelectionDispatcher; + private _isFocused; + /** Whether this radio is checked. */ + private _checked; + /** The unique ID for the radio button. */ + id: string; + /** Analog to HTML 'name' attribute used to group radios for unique selection. */ + name: string; + /** Used to set the 'aria-label' attribute on the underlying input element. */ + ariaLabel: string; + /** The 'aria-labelledby' attribute takes precedence as the element's text alternative. */ + ariaLabelledby: string; + /** Whether this radio is disabled. */ + private _disabled; + /** Value assigned to this radio.*/ + private _value; + /** The parent radio group. May or may not be present. */ + radioGroup: MdRadioGroup; + /** Event emitted when the group value changes. */ + change: EventEmitter; + constructor(radioGroup: MdRadioGroup, radioDispatcher: MdUniqueSelectionDispatcher); + inputId: string; + checked: boolean; + /** MdRadioGroup reads this to assign its own value. */ + value: any; + disabled: boolean; + /** TODO: internal */ + ngOnInit(): void; + /** Dispatch change event with current value. */ + private _emitChangeEvent(); +} +export declare const MD_RADIO_DIRECTIVES: (typeof MdRadioGroup | typeof MdRadioButton)[]; diff --git a/DEBUG-merge/components/radio/radio.html b/DEBUG-merge/components/radio/radio.html new file mode 100644 index 000000000000..249e35f67b43 --- /dev/null +++ b/DEBUG-merge/components/radio/radio.html @@ -0,0 +1,26 @@ + + + diff --git a/DEBUG-merge/components/radio/radio.js b/DEBUG-merge/components/radio/radio.js new file mode 100644 index 000000000000..29fd0312bdee --- /dev/null +++ b/DEBUG-merge/components/radio/radio.js @@ -0,0 +1,427 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var __param = (this && this.__param) || function (paramIndex, decorator) { + return function (target, key) { decorator(target, key, paramIndex); } +}; +var core_1 = require('@angular/core'); +var common_1 = require('@angular/common'); +var unique_selection_dispatcher_1 = require('@angular2-material/core/coordination/unique-selection-dispatcher'); +// Re-exports. +var unique_selection_dispatcher_2 = require('@angular2-material/core/coordination/unique-selection-dispatcher'); +exports.MdUniqueSelectionDispatcher = unique_selection_dispatcher_2.MdUniqueSelectionDispatcher; +/** + * Provider Expression that allows md-radio-group to register as a ControlValueAccessor. This + * allows it to support [(ngModel)] and ngControl. + */ +var MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = new core_1.Provider(common_1.NG_VALUE_ACCESSOR, { + useExisting: core_1.forwardRef(function () { return MdRadioGroup; }), + multi: true +}); +// TODO(mtlin): +// Ink ripple is currently placeholder. +// Determine motion spec for button transitions. +// Design review. +// RTL +// Support forms API. +// Use ChangeDetectionStrategy.OnPush +var _uniqueIdCounter = 0; +/** A simple change event emitted by either MdRadioButton or MdRadioGroup. */ +var MdRadioChange = (function () { + function MdRadioChange() { + } + return MdRadioChange; +}()); +exports.MdRadioChange = MdRadioChange; +var MdRadioGroup = (function () { + function MdRadioGroup() { + /** + * Selected value for group. Should equal the value of the selected radio button if there *is* + * a corresponding radio button with a matching value. If there is *not* such a corresponding + * radio button, this value persists to be applied in case a new radio button is added with a + * matching value. + */ + this._value = null; + /** The HTML name attribute applied to radio buttons in this group. */ + this._name = "md-radio-group-" + _uniqueIdCounter++; + /** Disables all individual radio buttons assigned to this group. */ + this._disabled = false; + /** The currently selected radio button. Should match value. */ + this._selected = null; + /** Whether the `value` has been set to its initial value. */ + this._isInitialized = false; + /** The method to be called in order to update ngModel */ + this._controlValueAccessorChangeFn = function (value) { }; + /** onTouch function registered via registerOnTouch (ControlValueAccessor). */ + this.onTouched = function () { }; + /** Event emitted when the group value changes. */ + this.change = new core_1.EventEmitter(); + /** Child radio buttons. */ + this._radios = null; + } + Object.defineProperty(MdRadioGroup.prototype, "name", { + get: function () { + return this._name; + }, + set: function (value) { + this._name = value; + this._updateRadioButtonNames(); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdRadioGroup.prototype, "disabled", { + get: function () { + return this._disabled; + }, + set: function (value) { + // The presence of *any* disabled value makes the component disabled, *except* for false. + this._disabled = (value != null && value !== false) ? true : null; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdRadioGroup.prototype, "value", { + get: function () { + return this._value; + }, + set: function (newValue) { + if (this._value != newValue) { + // Set this before proceeding to ensure no circular loop occurs with selection. + this._value = newValue; + this._updateSelectedRadioFromValue(); + // Only fire a change event if this isn't the first time the value is ever set. + if (this._isInitialized) { + this._emitChangeEvent(); + } + } + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdRadioGroup.prototype, "selected", { + get: function () { + return this._selected; + }, + set: function (selected) { + this._selected = selected; + this.value = selected ? selected.value : null; + if (selected && !selected.checked) { + selected.checked = true; + } + }, + enumerable: true, + configurable: true + }); + /** + * Initialize properties once content children are available. + * This allows us to propagate relevant attributes to associated buttons. + * TODO: internal + */ + MdRadioGroup.prototype.ngAfterContentInit = function () { + // Mark this component as initialized in AfterContentInit because the initial value can + // possibly be set by NgModel on MdRadioGroup, and it is possible that the OnInit of the + // NgModel occurs *after* the OnInit of the MdRadioGroup. + this._isInitialized = true; + }; + /** + * Mark this group as being "touched" (for ngModel). Meant to be called by the contained + * radio buttons upon their blur. + * @internal + */ + MdRadioGroup.prototype.touch = function () { + if (this.onTouched) { + this.onTouched(); + } + }; + MdRadioGroup.prototype._updateRadioButtonNames = function () { + var _this = this; + (this._radios || []).forEach(function (radio) { + radio.name = _this.name; + }); + }; + /** Updates the `selected` radio button from the internal _value state. */ + MdRadioGroup.prototype._updateSelectedRadioFromValue = function () { + var _this = this; + // If the value already matches the selected radio, do nothing. + var isAlreadySelected = this._selected != null && this._selected.value == this._value; + if (this._radios != null && !isAlreadySelected) { + var matchingRadio = this._radios.filter(function (radio) { return radio.value == _this._value; })[0]; + if (matchingRadio) { + this.selected = matchingRadio; + } + else if (this.value == null) { + this.selected = null; + this._radios.forEach(function (radio) { radio.checked = false; }); + } + } + }; + /** Dispatch change event with current selection and group value. */ + MdRadioGroup.prototype._emitChangeEvent = function () { + var event = new MdRadioChange(); + event.source = this._selected; + event.value = this._value; + this._controlValueAccessorChangeFn(event.value); + this.change.emit(event); + }; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + MdRadioGroup.prototype.writeValue = function (value) { + this.value = value; + }; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + MdRadioGroup.prototype.registerOnChange = function (fn) { + this._controlValueAccessorChangeFn = fn; + }; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + MdRadioGroup.prototype.registerOnTouched = function (fn) { + this.onTouched = fn; + }; + __decorate([ + core_1.Output(), + __metadata('design:type', core_1.EventEmitter) + ], MdRadioGroup.prototype, "change", void 0); + __decorate([ + core_1.ContentChildren(core_1.forwardRef(function () { return MdRadioButton; })), + __metadata('design:type', core_1.QueryList) + ], MdRadioGroup.prototype, "_radios", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdRadioGroup.prototype, "name", null); + __decorate([ + core_1.Input(), + __metadata('design:type', Boolean) + ], MdRadioGroup.prototype, "disabled", null); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdRadioGroup.prototype, "value", null); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdRadioGroup.prototype, "selected", null); + MdRadioGroup = __decorate([ + core_1.Directive({ + selector: 'md-radio-group', + providers: [MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR], + host: { + 'role': 'radiogroup', + }, + }), + __metadata('design:paramtypes', []) + ], MdRadioGroup); + return MdRadioGroup; +}()); +exports.MdRadioGroup = MdRadioGroup; +var MdRadioButton = (function () { + function MdRadioButton(radioGroup, radioDispatcher) { + // Assertions. Ideally these should be stripped out by the compiler. + // TODO(jelbourn): Assert that there's no name binding AND a parent radio group. + var _this = this; + this.radioDispatcher = radioDispatcher; + /** Whether this radio is checked. */ + this._checked = false; + /** The unique ID for the radio button. */ + this.id = "md-radio-" + _uniqueIdCounter++; + /** Value assigned to this radio.*/ + this._value = null; + /** Event emitted when the group value changes. */ + this.change = new core_1.EventEmitter(); + this.radioGroup = radioGroup; + radioDispatcher.listen(function (id, name) { + if (id != _this.id && name == _this.name) { + _this.checked = false; + } + }); + } + Object.defineProperty(MdRadioButton.prototype, "inputId", { + get: function () { + return this.id + "-input"; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdRadioButton.prototype, "checked", { + get: function () { + return this._checked; + }, + set: function (newCheckedState) { + if (newCheckedState) { + // Notify all radio buttons with the same name to un-check. + this.radioDispatcher.notify(this.id, this.name); + } + if (newCheckedState != this._checked) { + this._emitChangeEvent(); + } + this._checked = newCheckedState; + if (newCheckedState && this.radioGroup && this.radioGroup.value != this.value) { + this.radioGroup.selected = this; + } + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdRadioButton.prototype, "value", { + /** MdRadioGroup reads this to assign its own value. */ + get: function () { + return this._value; + }, + set: function (value) { + if (this._value != value) { + if (this.radioGroup != null && this.checked) { + this.radioGroup.value = value; + } + this._value = value; + } + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdRadioButton.prototype, "disabled", { + get: function () { + return this._disabled || (this.radioGroup != null && this.radioGroup.disabled); + }, + set: function (value) { + // The presence of *any* disabled value makes the component disabled, *except* for false. + this._disabled = (value != null && value !== false) ? true : null; + }, + enumerable: true, + configurable: true + }); + /** TODO: internal */ + MdRadioButton.prototype.ngOnInit = function () { + if (this.radioGroup) { + // If the radio is inside a radio group, determine if it should be checked + this.checked = this.radioGroup.value === this._value; + // Copy name from parent radio group + this.name = this.radioGroup.name; + } + }; + /** Dispatch change event with current value. */ + MdRadioButton.prototype._emitChangeEvent = function () { + var event = new MdRadioChange(); + event.source = this; + event.value = this._value; + this.change.emit(event); + }; + /** @internal */ + MdRadioButton.prototype.onClick = function (event) { + if (this.disabled) { + event.preventDefault(); + event.stopPropagation(); + return; + } + if (this.radioGroup != null) { + // Propagate the change one-way via the group, which will in turn mark this + // button as checked. + this.radioGroup.selected = this; + this.radioGroup.touch(); + } + else { + this.checked = true; + } + }; + /** + * We use a hidden native input field to handle changes to focus state via keyboard navigation, + * with visual rendering done separately. The native element is kept in sync with the overall + * state of the component. + * @internal + */ + MdRadioButton.prototype.onInputFocus = function () { + this._isFocused = true; + }; + /** @internal */ + MdRadioButton.prototype.onInputBlur = function () { + this._isFocused = false; + if (this.radioGroup) { + this.radioGroup.touch(); + } + }; + /** + * Checks the radio due to an interaction with the underlying native + * @internal + */ + MdRadioButton.prototype.onInputChange = function (event) { + // We always have to stop propagation on the change event. + // Otherwise the change event, from the input element, will bubble up and + // emit its event object to the `change` output. + event.stopPropagation(); + this.checked = true; + if (this.radioGroup) { + this.radioGroup.touch(); + } + }; + __decorate([ + core_1.HostBinding('class.md-radio-focused'), + __metadata('design:type', Boolean) + ], MdRadioButton.prototype, "_isFocused", void 0); + __decorate([ + core_1.HostBinding('id'), + core_1.Input(), + __metadata('design:type', String) + ], MdRadioButton.prototype, "id", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdRadioButton.prototype, "name", void 0); + __decorate([ + core_1.Input('aria-label'), + __metadata('design:type', String) + ], MdRadioButton.prototype, "ariaLabel", void 0); + __decorate([ + core_1.Input('aria-labelledby'), + __metadata('design:type', String) + ], MdRadioButton.prototype, "ariaLabelledby", void 0); + __decorate([ + core_1.Output(), + __metadata('design:type', core_1.EventEmitter) + ], MdRadioButton.prototype, "change", void 0); + __decorate([ + core_1.HostBinding('class.md-radio-checked'), + core_1.Input(), + __metadata('design:type', Boolean) + ], MdRadioButton.prototype, "checked", null); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdRadioButton.prototype, "value", null); + __decorate([ + core_1.HostBinding('class.md-radio-disabled'), + core_1.Input(), + __metadata('design:type', Boolean) + ], MdRadioButton.prototype, "disabled", null); + MdRadioButton = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-radio-button', + templateUrl: 'radio.html', + styleUrls: ['radio.css'], + encapsulation: core_1.ViewEncapsulation.None, + host: { + '(click)': 'onClick($event)' + } + }), + __param(0, core_1.Optional()), + __metadata('design:paramtypes', [MdRadioGroup, unique_selection_dispatcher_1.MdUniqueSelectionDispatcher]) + ], MdRadioButton); + return MdRadioButton; +}()); +exports.MdRadioButton = MdRadioButton; +exports.MD_RADIO_DIRECTIVES = [MdRadioGroup, MdRadioButton]; +//# sourceMappingURL=../../../../components/radio/radio.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/radio/radio.js.map b/DEBUG-merge/components/radio/radio.js.map new file mode 100644 index 000000000000..368cd72f0b51 --- /dev/null +++ b/DEBUG-merge/components/radio/radio.js.map @@ -0,0 +1 @@ +{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/demo-app/components/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n AfterContentInit,\n Component,\n ContentChildren,\n Directive,\n EventEmitter,\n HostBinding,\n Input,\n OnInit,\n Optional,\n Output,\n Provider,\n QueryList,\n ViewEncapsulation,\n forwardRef\n} from '@angular/core';\nimport {\n NG_VALUE_ACCESSOR,\n ControlValueAccessor\n} from '@angular/common';\nimport {\n MdUniqueSelectionDispatcher\n} from '@angular2-material/core/coordination/unique-selection-dispatcher';\n\n\n// Re-exports.\nexport {\n MdUniqueSelectionDispatcher\n} from '@angular2-material/core/coordination/unique-selection-dispatcher';\n\n\n\n/**\n * Provider Expression that allows md-radio-group to register as a ControlValueAccessor. This\n * allows it to support [(ngModel)] and ngControl.\n */\nconst MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = new Provider(\n NG_VALUE_ACCESSOR, {\n useExisting: forwardRef(() => MdRadioGroup),\n multi: true\n });\n\n// TODO(mtlin):\n// Ink ripple is currently placeholder.\n// Determine motion spec for button transitions.\n// Design review.\n// RTL\n// Support forms API.\n// Use ChangeDetectionStrategy.OnPush\n\nvar _uniqueIdCounter = 0;\n\n/** A simple change event emitted by either MdRadioButton or MdRadioGroup. */\nexport class MdRadioChange {\n source: MdRadioButton;\n value: any;\n}\n\n@Directive({\n selector: 'md-radio-group',\n providers: [MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR],\n host: {\n 'role': 'radiogroup',\n },\n})\nexport class MdRadioGroup implements AfterContentInit, ControlValueAccessor {\n /**\n * Selected value for group. Should equal the value of the selected radio button if there *is*\n * a corresponding radio button with a matching value. If there is *not* such a corresponding\n * radio button, this value persists to be applied in case a new radio button is added with a\n * matching value.\n */\n private _value: any = null;\n\n /** The HTML name attribute applied to radio buttons in this group. */\n private _name: string = `md-radio-group-${_uniqueIdCounter++}`;\n\n /** Disables all individual radio buttons assigned to this group. */\n private _disabled: boolean = false;\n\n /** The currently selected radio button. Should match value. */\n private _selected: MdRadioButton = null;\n\n /** Whether the `value` has been set to its initial value. */\n private _isInitialized: boolean = false;\n\n /** The method to be called in order to update ngModel */\n private _controlValueAccessorChangeFn: (value: any) => void = (value) => {};\n\n /** onTouch function registered via registerOnTouch (ControlValueAccessor). */\n onTouched: () => any = () => {};\n\n /** Event emitted when the group value changes. */\n @Output()\n change: EventEmitter = new EventEmitter();\n\n /** Child radio buttons. */\n @ContentChildren(forwardRef(() => MdRadioButton))\n private _radios: QueryList = null;\n\n @Input()\n get name(): string {\n return this._name;\n }\n\n set name(value: string) {\n this._name = value;\n this._updateRadioButtonNames();\n }\n\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n\n set disabled(value) {\n // The presence of *any* disabled value makes the component disabled, *except* for false.\n this._disabled = (value != null && value !== false) ? true : null;\n }\n\n @Input()\n get value(): any {\n return this._value;\n }\n\n set value(newValue: any) {\n if (this._value != newValue) {\n // Set this before proceeding to ensure no circular loop occurs with selection.\n this._value = newValue;\n\n this._updateSelectedRadioFromValue();\n\n // Only fire a change event if this isn't the first time the value is ever set.\n if (this._isInitialized) {\n this._emitChangeEvent();\n }\n }\n }\n\n @Input()\n get selected() {\n return this._selected;\n }\n\n set selected(selected: MdRadioButton) {\n this._selected = selected;\n this.value = selected ? selected.value : null;\n\n if (selected && !selected.checked) {\n selected.checked = true;\n }\n }\n\n /**\n * Initialize properties once content children are available.\n * This allows us to propagate relevant attributes to associated buttons.\n * TODO: internal\n */\n ngAfterContentInit() {\n // Mark this component as initialized in AfterContentInit because the initial value can\n // possibly be set by NgModel on MdRadioGroup, and it is possible that the OnInit of the\n // NgModel occurs *after* the OnInit of the MdRadioGroup.\n this._isInitialized = true;\n }\n\n /**\n * Mark this group as being \"touched\" (for ngModel). Meant to be called by the contained\n * radio buttons upon their blur.\n * @internal\n */\n touch() {\n if (this.onTouched) {\n this.onTouched();\n }\n }\n\n private _updateRadioButtonNames(): void {\n (this._radios || []).forEach(radio => {\n radio.name = this.name;\n });\n }\n\n /** Updates the `selected` radio button from the internal _value state. */\n private _updateSelectedRadioFromValue(): void {\n // If the value already matches the selected radio, do nothing.\n let isAlreadySelected = this._selected != null && this._selected.value == this._value;\n\n if (this._radios != null && !isAlreadySelected) {\n let matchingRadio = this._radios.filter(radio => radio.value == this._value)[0];\n\n if (matchingRadio) {\n this.selected = matchingRadio;\n } else if (this.value == null) {\n this.selected = null;\n this._radios.forEach(radio => { radio.checked = false; });\n }\n }\n }\n\n /** Dispatch change event with current selection and group value. */\n private _emitChangeEvent(): void {\n let event = new MdRadioChange();\n event.source = this._selected;\n event.value = this._value;\n this._controlValueAccessorChangeFn(event.value);\n this.change.emit(event);\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n * TODO: internal\n */\n writeValue(value: any) {\n this.value = value;\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n * TODO: internal\n */\n registerOnChange(fn: (value: any) => void) {\n this._controlValueAccessorChangeFn = fn;\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n * TODO: internal\n */\n registerOnTouched(fn: any) {\n this.onTouched = fn;\n }\n}\n\n\n@Component({\n moduleId: module.id,\n selector: 'md-radio-button',\n templateUrl: 'radio.html',\n styleUrls: ['radio.css'],\n encapsulation: ViewEncapsulation.None,\n host: {\n '(click)': 'onClick($event)'\n }\n})\nexport class MdRadioButton implements OnInit {\n @HostBinding('class.md-radio-focused')\n private _isFocused: boolean;\n\n /** Whether this radio is checked. */\n private _checked: boolean = false;\n\n /** The unique ID for the radio button. */\n @HostBinding('id')\n @Input()\n id: string = `md-radio-${_uniqueIdCounter++}`;\n\n /** Analog to HTML 'name' attribute used to group radios for unique selection. */\n @Input()\n name: string;\n\n /** Used to set the 'aria-label' attribute on the underlying input element. */\n @Input('aria-label') ariaLabel: string;\n\n /** The 'aria-labelledby' attribute takes precedence as the element's text alternative. */\n @Input('aria-labelledby') ariaLabelledby: string;\n\n /** Whether this radio is disabled. */\n private _disabled: boolean;\n\n /** Value assigned to this radio.*/\n private _value: any = null;\n\n /** The parent radio group. May or may not be present. */\n radioGroup: MdRadioGroup;\n\n /** Event emitted when the group value changes. */\n @Output()\n change: EventEmitter = new EventEmitter();\n\n constructor(@Optional() radioGroup: MdRadioGroup,\n public radioDispatcher: MdUniqueSelectionDispatcher) {\n // Assertions. Ideally these should be stripped out by the compiler.\n // TODO(jelbourn): Assert that there's no name binding AND a parent radio group.\n\n this.radioGroup = radioGroup;\n\n radioDispatcher.listen((id: string, name: string) => {\n if (id != this.id && name == this.name) {\n this.checked = false;\n }\n });\n }\n\n get inputId(): string {\n return `${this.id}-input`;\n }\n\n @HostBinding('class.md-radio-checked')\n @Input()\n get checked(): boolean {\n return this._checked;\n }\n\n set checked(newCheckedState: boolean) {\n if (newCheckedState) {\n // Notify all radio buttons with the same name to un-check.\n this.radioDispatcher.notify(this.id, this.name);\n }\n\n if (newCheckedState != this._checked) {\n this._emitChangeEvent();\n }\n\n this._checked = newCheckedState;\n\n if (newCheckedState && this.radioGroup && this.radioGroup.value != this.value) {\n this.radioGroup.selected = this;\n }\n }\n\n /** MdRadioGroup reads this to assign its own value. */\n @Input()\n get value(): any {\n return this._value;\n }\n\n set value(value: any) {\n if (this._value != value) {\n if (this.radioGroup != null && this.checked) {\n this.radioGroup.value = value;\n }\n this._value = value;\n }\n }\n\n @HostBinding('class.md-radio-disabled')\n @Input()\n get disabled(): boolean {\n return this._disabled || (this.radioGroup != null && this.radioGroup.disabled);\n }\n\n set disabled(value: boolean) {\n // The presence of *any* disabled value makes the component disabled, *except* for false.\n this._disabled = (value != null && value !== false) ? true : null;\n }\n\n /** TODO: internal */\n ngOnInit() {\n if (this.radioGroup) {\n // If the radio is inside a radio group, determine if it should be checked\n this.checked = this.radioGroup.value === this._value;\n // Copy name from parent radio group\n this.name = this.radioGroup.name;\n }\n }\n\n /** Dispatch change event with current value. */\n private _emitChangeEvent(): void {\n let event = new MdRadioChange();\n event.source = this;\n event.value = this._value;\n this.change.emit(event);\n }\n\n /** @internal */\n onClick(event: Event) {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n if (this.radioGroup != null) {\n // Propagate the change one-way via the group, which will in turn mark this\n // button as checked.\n this.radioGroup.selected = this;\n this.radioGroup.touch();\n } else {\n this.checked = true;\n }\n }\n\n /**\n * We use a hidden native input field to handle changes to focus state via keyboard navigation,\n * with visual rendering done separately. The native element is kept in sync with the overall\n * state of the component.\n * @internal\n */\n onInputFocus() {\n this._isFocused = true;\n }\n\n /** @internal */\n onInputBlur() {\n this._isFocused = false;\n if (this.radioGroup) {\n this.radioGroup.touch();\n }\n }\n\n /**\n * Checks the radio due to an interaction with the underlying native \n * @internal\n */\n onInputChange(event: Event) {\n // We always have to stop propagation on the change event.\n // Otherwise the change event, from the input element, will bubble up and\n // emit its event object to the `change` output.\n event.stopPropagation();\n\n this.checked = true;\n if (this.radioGroup) {\n this.radioGroup.touch();\n }\n }\n}\n\nexport const MD_RADIO_DIRECTIVES = [MdRadioGroup, MdRadioButton];\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/sidenav/README.md b/DEBUG-merge/components/sidenav/README.md new file mode 100644 index 000000000000..73194bbe73a9 --- /dev/null +++ b/DEBUG-merge/components/sidenav/README.md @@ -0,0 +1,83 @@ +# MdSidenav + +MdSidenav is the side navigation component for Material 2. It is composed of two components; `` and ``. + +## Screenshots + + + + +## `` + +The parent component. Contains the code necessary to coordinate one or two sidenav and the backdrop. + +### Properties + +| Name | Description | +| --- | --- | +| `start` | The start aligned `MdSidenav` instance, or `null` if none is specified. In LTR direction, this is the sidenav shown on the left side. In RTL direction, it will show on the right. There can only be one sidenav on either side. | +| `end` | The end aligned `MdSidenav` instance, or `null` if none is specified. This is the sidenav opposing the `start` sidenav. There can only be one sidenav on either side. | + +## `` + +The sidenav panel. + +### Bound Properties + +| Name | Type | Description | +| --- | --- | --- | +| `align` | `"start"|"end"` | The alignment of this sidenav. In LTR direction, `"start"` will be shown on the left, `"end"` on the right. In RTL, it is reversed. `"start"` is used by default. An exception will be thrown if there are more than 1 sidenav on either side. | +| `mode` | `"over"|"push"|"side"` | The mode or styling of the sidenav, default being `"over"`. With `"over"` the sidenav will appear above the content, and a backdrop will be shown. With `"push"` the sidenav will push the content of the `` to the side, and show a backdrop over it. `"side"` will resize the content and keep the sidenav opened. Clicking the backdrop will close sidenavs that do not have `mode="side"`. | +| `opened` | `boolean` | Whether or not the sidenav is opened. Use this binding to open/close the sidenav. | + +### Events + +| Name | Description | +| --- | --- | +| `open-start` | Emitted when the sidenav is starting opening. This should only be used to coordinate animations. | +| `close-start` | Emitted when the sidenav is starting closing. This should only be used to coordinate animations. | +| `open` | Emitted when the sidenav is done opening. Use this for, e.g., setting focus on controls or updating state. | +| `close` | Emitted when the sidenav is done closing. | + +### Methods + +| Signature | Description | +| --- | --- | +| `open(): Promise` | Open the sidenav. Equivalent to `opened = true`. Returns a promise that will resolve when the animation completes, or be rejected if the animation was cancelled. | +| `close(): Promise` | Close the sidenav. Equivalent to `opened = false`. Returns a promise that will resolve when the animation completes, or be rejected if the animation was cancelled. | +| `toggle(): Promise` | Toggle the sidenav. This is equivalent to `opened = !opened`. Returns a promise that will resolve when the animation completes, or be rejected if the animation was cancelled. | + +### Notes + +The `` will resize based on its content. You can also set its width in CSS, like so: + +```css +md-sidenav { + width: 200px; +} +``` + +Try to avoid percent based width as `resize` events are not (yet) supported. + +## Examples + +Here's a simple example of using the sidenav: + +```html + + + + Start Sidenav. +
+ + + + End Sidenav. + + + + My regular content. This will be moved into the proper DOM at runtime. + + +``` + diff --git a/DEBUG-merge/components/sidenav/package.json b/DEBUG-merge/components/sidenav/package.json new file mode 100644 index 000000000000..b20e52c80d30 --- /dev/null +++ b/DEBUG-merge/components/sidenav/package.json @@ -0,0 +1,29 @@ +{ + "name": "@angular2-material/sidenav", + "version": "2.0.0-alpha.5-2", + "description": "Angular 2 Material sidenav", + "main": "./sidenav.js", + "typings": "./sidenav.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components", + "sidenav", + "sidepane", + "navigation", + "drawer" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "@angular2-material/core": "2.0.0-alpha.5-2" + } +} diff --git a/DEBUG-merge/components/sidenav/sidenav-transitions.css b/DEBUG-merge/components/sidenav/sidenav-transitions.css new file mode 100644 index 000000000000..29fb6eb420e4 --- /dev/null +++ b/DEBUG-merge/components/sidenav/sidenav-transitions.css @@ -0,0 +1,11 @@ +/** + * We separate transitions to be able to disable them in unit tests, by simply not loading this file. + */ +:host > .md-sidenav-backdrop.md-sidenav-shown { + transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } + +:host > md-content { + transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } + +:host > md-sidenav { + transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } diff --git a/DEBUG-merge/components/sidenav/sidenav.css b/DEBUG-merge/components/sidenav/sidenav.css new file mode 100644 index 000000000000..4e3ad2c3bd10 --- /dev/null +++ b/DEBUG-merge/components/sidenav/sidenav.css @@ -0,0 +1,181 @@ +/** + * Mixin that creates a new stacking context. + * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + */ +/** + * This mixin hides an element visually. + * That means it's still accessible for screen-readers but not visible in view. + */ +/** + * Forces an element to grow to fit floated contents; used as as an alternative to + * `overflow: hidden;` because it doesn't cut off contents. + */ +/** + * A mixin, which generates temporary ink ripple on a given component. + * When $bindToParent is set to true, it will check for the focused class on the same selector as you included + * that mixin. + * It is also possible to specify the color palette of the temporary ripple. By default it uses the + * accent palette for its background. + */ +/** + * A collection of mixins and CSS classes that can be used to apply elevation to a material + * element. + * See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html + * Examples: + * + * + * .md-foo { + * @include $md-elevation(2); + * + * &:active { + * @include $md-elevation(8); + * } + * } + * + *

Some content

+ * + * For an explanation of the design behind how elevation is implemented, see the design doc at + * https://goo.gl/Kq0k9Z. + */ +/** + * The css property used for elevation. In most cases this should not be changed. It is exposed + * as a variable for abstraction / easy use when needing to reference the property directly, for + * example in a will-change rule. + */ +/** The default duration value for elevation transitions. */ +/** The default easing value for elevation transitions. */ +/** + * Applies the correct css rules to an element to give it the elevation specified by $zValue. + * The $zValue must be between 0 and 24. + */ +/** + * Returns a string that can be used as the value for a transition property for elevation. + * Calling this function directly is useful in situations where a component needs to transition + * more than one property. + * + * .foo { + * transition: md-elevation-transition-property-value(), opacity 100ms ease; + * will-change: $md-elevation-property, opacity; + * } + */ +/** + * Applies the correct css rules needed to have an element transition between elevations. + * This mixin should be applied to elements whose elevation values will change depending on their + * context (e.g. when active or disabled). + */ +/** + * Mixin to help with defining LTR/RTL 'transform: translate3d()' values. + * @param $open The translation value when the sidenav is opened. + * @param $close The translation value when the sidenav is closed. + */ +/* This mixin ensures a sidenav element spans the whole viewport.*/ +:host { + position: relative; + transform: translate3D(0, 0, 0); + box-sizing: border-box; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + display: block; + overflow-x: hidden; } + :host[fullscreen] { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; } + :host[fullscreen].md-sidenav-opened { + overflow: hidden; } + :host > .md-sidenav-backdrop { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: block; + z-index: 2; + visibility: hidden; } + :host > .md-sidenav-backdrop.md-sidenav-shown { + visibility: visible; + background-color: rgba(0, 0, 0, 0.6); } + :host > md-content { + position: relative; + transform: translate3D(0, 0, 0); + display: block; } + :host > md-sidenav { + position: relative; + transform: translate3D(0, 0, 0); + display: block; + position: fixed; + top: 0; + bottom: 0; + z-index: 3; + min-width: 5%; + overflow-y: auto; + background-color: white; + transform: translate3d(-100%, 0, 0); } + :host > md-sidenav.md-sidenav-closed { + visibility: hidden; } + :host > md-sidenav.md-sidenav-closing { + transform: translate3d(-100%, 0, 0); + will-change: transform; } + :host > md-sidenav.md-sidenav-opening { + box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + visibility: visible; + transform: translate3d(0, 0, 0); + will-change: transform; } + :host > md-sidenav.md-sidenav-opened { + box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + transform: translate3d(0, 0, 0); } + :host > md-sidenav.md-sidenav-push { + background-color: white; } + :host > md-sidenav.md-sidenav-side { + z-index: 1; } + :host > md-sidenav.md-sidenav-end { + right: 0; + transform: translate3d(100%, 0, 0); } + :host > md-sidenav.md-sidenav-end.md-sidenav-closed { + visibility: hidden; } + :host > md-sidenav.md-sidenav-end.md-sidenav-closing { + transform: translate3d(100%, 0, 0); + will-change: transform; } + :host > md-sidenav.md-sidenav-end.md-sidenav-opening { + box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + visibility: visible; + transform: translate3d(0, 0, 0); + will-change: transform; } + :host > md-sidenav.md-sidenav-end.md-sidenav-opened { + box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + transform: translate3d(0, 0, 0); } + +:host-context([dir="rtl"]) > md-sidenav { + transform: translate3d(100%, 0, 0); } + :host-context([dir="rtl"]) > md-sidenav.md-sidenav-closed { + visibility: hidden; } + :host-context([dir="rtl"]) > md-sidenav.md-sidenav-closing { + transform: translate3d(100%, 0, 0); + will-change: transform; } + :host-context([dir="rtl"]) > md-sidenav.md-sidenav-opening { + box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + visibility: visible; + transform: translate3d(0, 0, 0); + will-change: transform; } + :host-context([dir="rtl"]) > md-sidenav.md-sidenav-opened { + box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + transform: translate3d(0, 0, 0); } + :host-context([dir="rtl"]) > md-sidenav.md-sidenav-end { + left: 0; + right: auto; + transform: translate3d(-100%, 0, 0); } + :host-context([dir="rtl"]) > md-sidenav.md-sidenav-end.md-sidenav-closed { + visibility: hidden; } + :host-context([dir="rtl"]) > md-sidenav.md-sidenav-end.md-sidenav-closing { + transform: translate3d(-100%, 0, 0); + will-change: transform; } + :host-context([dir="rtl"]) > md-sidenav.md-sidenav-end.md-sidenav-opening { + box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + visibility: visible; + transform: translate3d(0, 0, 0); + will-change: transform; } + :host-context([dir="rtl"]) > md-sidenav.md-sidenav-end.md-sidenav-opened { + box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + transform: translate3d(0, 0, 0); } diff --git a/DEBUG-merge/components/sidenav/sidenav.d.ts b/DEBUG-merge/components/sidenav/sidenav.d.ts new file mode 100644 index 000000000000..a70fec2496ed --- /dev/null +++ b/DEBUG-merge/components/sidenav/sidenav.d.ts @@ -0,0 +1,110 @@ +import { AfterContentInit, ElementRef, EventEmitter, Renderer } from '@angular/core'; +import { Dir } from '@angular2-material/core/rtl/dir'; +import { MdError } from '@angular2-material/core/errors/error'; +/** Exception thrown when two MdSidenav are matching the same side. */ +export declare class MdDuplicatedSidenavError extends MdError { + constructor(align: string); +} +/** + * component. + * + * This component corresponds to the drawer of the sidenav. + * + * Please refer to README.md for examples on how to use it. + */ +export declare class MdSidenav { + private _elementRef; + /** Alignment of the sidenav (direction neutral); whether 'start' or 'end'. */ + align: 'start' | 'end'; + /** Mode of the sidenav; whether 'over' or 'side'. */ + mode: 'over' | 'push' | 'side'; + /** Whether the sidenav is opened. */ + private _opened; + /** Event emitted when the sidenav is being opened. Use this to synchronize animations. */ + onOpenStart: EventEmitter; + /** Event emitted when the sidenav is fully opened. */ + onOpen: EventEmitter; + /** Event emitted when the sidenav is being closed. Use this to synchronize animations. */ + onCloseStart: EventEmitter; + /** Event emitted when the sidenav is fully closed. */ + onClose: EventEmitter; + /** + * @param _elementRef The DOM element reference. Used for transition and width calculation. + * If not available we do not hook on transitions. + */ + constructor(_elementRef: ElementRef); + /** + * Whether the sidenav is opened. We overload this because we trigger an event when it + * starts or end. + */ + opened: boolean; + /** Open this sidenav, and return a Promise that will resolve when it's fully opened (or get + * rejected if it didn't). */ + open(): Promise; + /** + * Close this sidenav, and return a Promise that will resolve when it's fully closed (or get + * rejected if it didn't). + */ + close(): Promise; + /** + * Toggle this sidenav. This is equivalent to calling open() when it's already opened, or + * close() when it's closed. + * @param isOpen + */ + toggle(isOpen?: boolean): Promise; + private _isClosing; + private _isOpening; + private _isClosed; + private _isOpened; + private _isEnd; + private _modeSide; + private _modeOver; + private _modePush; + private _transition; + private _openPromise; + private _openPromiseResolve; + private _openPromiseReject; + private _closePromise; + private _closePromiseResolve; + private _closePromiseReject; +} +/** + * component. + * + * This is the parent component to one or two s that validates the state internally + * and coordinate the backdrop and content styling. + */ +export declare class MdSidenavLayout implements AfterContentInit { + private _dir; + private _element; + private _renderer; + private _sidenavs; + start: MdSidenav; + end: MdSidenav; + /** The sidenav at the start/end alignment, independent of direction. */ + private _start; + private _end; + /** + * The sidenav at the left/right. When direction changes, these will change as well. + * They're used as aliases for the above to set the left/right style properly. + * In LTR, _left == _start and _right == _end. + * In RTL, _left == _end and _right == _start. + */ + private _left; + private _right; + constructor(_dir: Dir, _element: ElementRef, _renderer: Renderer); + /** TODO: internal */ + ngAfterContentInit(): void; + private _setLayoutClass(sidenav, bool); + /** Validate the state of the sidenav children components. */ + private _validateDrawers(); + private _isSidenavOpen(side); + /** + * Return the width of the sidenav, if it's in the proper mode and opened. + * This may relayout the view, so do not call this often. + * @param sidenav + * @param mode + */ + private _getSidenavEffectiveWidth(sidenav, mode); +} +export declare const MD_SIDENAV_DIRECTIVES: (typeof MdSidenavLayout | typeof MdSidenav)[]; diff --git a/DEBUG-merge/components/sidenav/sidenav.html b/DEBUG-merge/components/sidenav/sidenav.html new file mode 100644 index 000000000000..0eb71a98edd6 --- /dev/null +++ b/DEBUG-merge/components/sidenav/sidenav.html @@ -0,0 +1,8 @@ +
+ + + + + + diff --git a/DEBUG-merge/components/sidenav/sidenav.js b/DEBUG-merge/components/sidenav/sidenav.js new file mode 100644 index 000000000000..6b07cb6008cf --- /dev/null +++ b/DEBUG-merge/components/sidenav/sidenav.js @@ -0,0 +1,481 @@ +"use strict"; +var __extends = (this && this.__extends) || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +}; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var __param = (this && this.__param) || function (paramIndex, decorator) { + return function (target, key) { decorator(target, key, paramIndex); } +}; +var core_1 = require('@angular/core'); +var dir_1 = require('@angular2-material/core/rtl/dir'); +var promise_completer_1 = require('@angular2-material/core/async/promise-completer'); +var error_1 = require('@angular2-material/core/errors/error'); +var field_value_1 = require('@angular2-material/core/annotations/field-value'); +/** Exception thrown when two MdSidenav are matching the same side. */ +var MdDuplicatedSidenavError = (function (_super) { + __extends(MdDuplicatedSidenavError, _super); + function MdDuplicatedSidenavError(align) { + _super.call(this, "A sidenav was already declared for 'align=\"" + align + "\"'"); + } + return MdDuplicatedSidenavError; +}(error_1.MdError)); +exports.MdDuplicatedSidenavError = MdDuplicatedSidenavError; +/** + * component. + * + * This component corresponds to the drawer of the sidenav. + * + * Please refer to README.md for examples on how to use it. + */ +var MdSidenav = (function () { + /** + * @param _elementRef The DOM element reference. Used for transition and width calculation. + * If not available we do not hook on transitions. + */ + function MdSidenav(_elementRef) { + this._elementRef = _elementRef; + /** Alignment of the sidenav (direction neutral); whether 'start' or 'end'. */ + this.align = 'start'; + /** Mode of the sidenav; whether 'over' or 'side'. */ + this.mode = 'over'; + /** Whether the sidenav is opened. */ + this._opened = false; + /** Event emitted when the sidenav is being opened. Use this to synchronize animations. */ + this.onOpenStart = new core_1.EventEmitter(); + /** Event emitted when the sidenav is fully opened. */ + this.onOpen = new core_1.EventEmitter(); + /** Event emitted when the sidenav is being closed. Use this to synchronize animations. */ + this.onCloseStart = new core_1.EventEmitter(); + /** Event emitted when the sidenav is fully closed. */ + this.onClose = new core_1.EventEmitter(); + this._transition = false; + } + Object.defineProperty(MdSidenav.prototype, "opened", { + /** + * Whether the sidenav is opened. We overload this because we trigger an event when it + * starts or end. + */ + get: function () { return this._opened; }, + set: function (v) { + this.toggle(v); + }, + enumerable: true, + configurable: true + }); + /** Open this sidenav, and return a Promise that will resolve when it's fully opened (or get + * rejected if it didn't). */ + MdSidenav.prototype.open = function () { + return this.toggle(true); + }; + /** + * Close this sidenav, and return a Promise that will resolve when it's fully closed (or get + * rejected if it didn't). + */ + MdSidenav.prototype.close = function () { + return this.toggle(false); + }; + /** + * Toggle this sidenav. This is equivalent to calling open() when it's already opened, or + * close() when it's closed. + * @param isOpen + */ + MdSidenav.prototype.toggle = function (isOpen) { + if (isOpen === void 0) { isOpen = !this.opened; } + // Shortcut it if we're already opened. + if (isOpen === this.opened) { + if (!this._transition) { + return Promise.resolve(null); + } + else { + return isOpen ? this._openPromise : this._closePromise; + } + } + this._opened = isOpen; + this._transition = true; + if (isOpen) { + this.onOpenStart.emit(null); + } + else { + this.onCloseStart.emit(null); + } + if (isOpen) { + if (this._openPromise == null) { + var completer = new promise_completer_1.PromiseCompleter(); + this._openPromise = completer.promise; + this._openPromiseReject = completer.reject; + this._openPromiseResolve = completer.resolve; + } + return this._openPromise; + } + else { + if (this._closePromise == null) { + var completer = new promise_completer_1.PromiseCompleter(); + this._closePromise = completer.promise; + this._closePromiseReject = completer.reject; + this._closePromiseResolve = completer.resolve; + } + return this._closePromise; + } + }; + /** + * When transition has finished, set the internal state for classes and emit the proper event. + * The event passed is actually of type TransitionEvent, but that type is not available in + * Android so we use any. + * @internal + */ + MdSidenav.prototype.onTransitionEnd = function (transitionEvent) { + if (transitionEvent.target == this._elementRef.nativeElement + && transitionEvent.propertyName.endsWith('transform')) { + this._transition = false; + if (this._opened) { + if (this._openPromise != null) { + this._openPromiseResolve(); + } + if (this._closePromise != null) { + this._closePromiseReject(); + } + this.onOpen.emit(null); + } + else { + if (this._closePromise != null) { + this._closePromiseResolve(); + } + if (this._openPromise != null) { + this._openPromiseReject(); + } + this.onClose.emit(null); + } + this._openPromise = null; + this._closePromise = null; + } + }; + Object.defineProperty(MdSidenav.prototype, "_isClosing", { + get: function () { + return !this._opened && this._transition; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdSidenav.prototype, "_isOpening", { + get: function () { + return this._opened && this._transition; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdSidenav.prototype, "_isClosed", { + get: function () { + return !this._opened && !this._transition; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdSidenav.prototype, "_isOpened", { + get: function () { + return this._opened && !this._transition; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdSidenav.prototype, "_isEnd", { + get: function () { + return this.align == 'end'; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdSidenav.prototype, "_modeSide", { + get: function () { + return this.mode == 'side'; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdSidenav.prototype, "_modeOver", { + get: function () { + return this.mode == 'over'; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdSidenav.prototype, "_modePush", { + get: function () { + return this.mode == 'push'; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdSidenav.prototype, "width", { + /** + * This is public because we need it from MdSidenavLayout, but it's undocumented and should + * not be used outside. + * @internal + */ + get: function () { + if (this._elementRef.nativeElement) { + return this._elementRef.nativeElement.offsetWidth; + } + return 0; + }, + enumerable: true, + configurable: true + }); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdSidenav.prototype, "align", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdSidenav.prototype, "mode", void 0); + __decorate([ + core_1.Input('opened'), + field_value_1.BooleanFieldValue(), + __metadata('design:type', Boolean) + ], MdSidenav.prototype, "_opened", void 0); + __decorate([ + core_1.Output('open-start'), + __metadata('design:type', Object) + ], MdSidenav.prototype, "onOpenStart", void 0); + __decorate([ + core_1.Output('open'), + __metadata('design:type', Object) + ], MdSidenav.prototype, "onOpen", void 0); + __decorate([ + core_1.Output('close-start'), + __metadata('design:type', Object) + ], MdSidenav.prototype, "onCloseStart", void 0); + __decorate([ + core_1.Output('close'), + __metadata('design:type', Object) + ], MdSidenav.prototype, "onClose", void 0); + __decorate([ + core_1.HostBinding('class.md-sidenav-closing'), + __metadata('design:type', Object) + ], MdSidenav.prototype, "_isClosing", null); + __decorate([ + core_1.HostBinding('class.md-sidenav-opening'), + __metadata('design:type', Object) + ], MdSidenav.prototype, "_isOpening", null); + __decorate([ + core_1.HostBinding('class.md-sidenav-closed'), + __metadata('design:type', Object) + ], MdSidenav.prototype, "_isClosed", null); + __decorate([ + core_1.HostBinding('class.md-sidenav-opened'), + __metadata('design:type', Object) + ], MdSidenav.prototype, "_isOpened", null); + __decorate([ + core_1.HostBinding('class.md-sidenav-end'), + __metadata('design:type', Object) + ], MdSidenav.prototype, "_isEnd", null); + __decorate([ + core_1.HostBinding('class.md-sidenav-side'), + __metadata('design:type', Object) + ], MdSidenav.prototype, "_modeSide", null); + __decorate([ + core_1.HostBinding('class.md-sidenav-over'), + __metadata('design:type', Object) + ], MdSidenav.prototype, "_modeOver", null); + __decorate([ + core_1.HostBinding('class.md-sidenav-push'), + __metadata('design:type', Object) + ], MdSidenav.prototype, "_modePush", null); + MdSidenav = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-sidenav', + template: '', + host: { + '(transitionend)': 'onTransitionEnd($event)', + }, + changeDetection: core_1.ChangeDetectionStrategy.OnPush, + }), + __metadata('design:paramtypes', [core_1.ElementRef]) + ], MdSidenav); + return MdSidenav; +}()); +exports.MdSidenav = MdSidenav; +/** + * component. + * + * This is the parent component to one or two s that validates the state internally + * and coordinate the backdrop and content styling. + */ +var MdSidenavLayout = (function () { + function MdSidenavLayout(_dir, _element, _renderer) { + var _this = this; + this._dir = _dir; + this._element = _element; + this._renderer = _renderer; + // If a `Dir` directive exists up the tree, listen direction changes and update the left/right + // properties to point to the proper start/end. + if (_dir != null) { + _dir.dirChange.subscribe(function () { return _this._validateDrawers(); }); + } + } + Object.defineProperty(MdSidenavLayout.prototype, "start", { + get: function () { return this._start; }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdSidenavLayout.prototype, "end", { + get: function () { return this._end; }, + enumerable: true, + configurable: true + }); + /** TODO: internal */ + MdSidenavLayout.prototype.ngAfterContentInit = function () { + var _this = this; + // On changes, assert on consistency. + this._sidenavs.changes.subscribe(function () { return _this._validateDrawers(); }); + this._sidenavs.forEach(function (sidenav) { return _this._watchSidenavToggle(sidenav); }); + this._validateDrawers(); + }; + /* + * Subscribes to sidenav events in order to set a class on the main layout element when the sidenav + * is open and the backdrop is visible. This ensures any overflow on the layout element is properly + * hidden. + * @internal + */ + MdSidenavLayout.prototype._watchSidenavToggle = function (sidenav) { + var _this = this; + if (!sidenav || sidenav.mode === 'side') { + return; + } + sidenav.onOpen.subscribe(function () { return _this._setLayoutClass(sidenav, true); }); + sidenav.onClose.subscribe(function () { return _this._setLayoutClass(sidenav, false); }); + }; + /* Toggles the 'md-sidenav-opened' class on the main 'md-sidenav-layout' element. */ + MdSidenavLayout.prototype._setLayoutClass = function (sidenav, bool) { + this._renderer.setElementClass(this._element.nativeElement, 'md-sidenav-opened', bool); + }; + /** Validate the state of the sidenav children components. */ + MdSidenavLayout.prototype._validateDrawers = function () { + var _this = this; + this._start = this._end = null; + // Ensure that we have at most one start and one end sidenav. + this._sidenavs.forEach(function (sidenav) { + if (sidenav.align == 'end') { + if (_this._end != null) { + throw new MdDuplicatedSidenavError('end'); + } + _this._end = sidenav; + } + else { + if (_this._start != null) { + throw new MdDuplicatedSidenavError('start'); + } + _this._start = sidenav; + } + }); + this._right = this._left = null; + // Detect if we're LTR or RTL. + if (this._dir == null || this._dir.value == 'ltr') { + this._left = this._start; + this._right = this._end; + } + else { + this._left = this._end; + this._right = this._start; + } + }; + /** @internal */ + MdSidenavLayout.prototype.closeModalSidenav = function () { + if (this._start != null && this._start.mode != 'side') { + this._start.close(); + } + if (this._end != null && this._end.mode != 'side') { + this._end.close(); + } + }; + /** @internal */ + MdSidenavLayout.prototype.isShowingBackdrop = function () { + return (this._isSidenavOpen(this._start) && this._start.mode != 'side') + || (this._isSidenavOpen(this._end) && this._end.mode != 'side'); + }; + MdSidenavLayout.prototype._isSidenavOpen = function (side) { + return side != null && side.opened; + }; + /** + * Return the width of the sidenav, if it's in the proper mode and opened. + * This may relayout the view, so do not call this often. + * @param sidenav + * @param mode + */ + MdSidenavLayout.prototype._getSidenavEffectiveWidth = function (sidenav, mode) { + return (this._isSidenavOpen(sidenav) && sidenav.mode == mode) ? sidenav.width : 0; + }; + /** @internal */ + MdSidenavLayout.prototype.getMarginLeft = function () { + return this._getSidenavEffectiveWidth(this._left, 'side'); + }; + /** @internal */ + MdSidenavLayout.prototype.getMarginRight = function () { + return this._getSidenavEffectiveWidth(this._right, 'side'); + }; + /** @internal */ + MdSidenavLayout.prototype.getPositionLeft = function () { + return this._getSidenavEffectiveWidth(this._left, 'push'); + }; + /** @internal */ + MdSidenavLayout.prototype.getPositionRight = function () { + return this._getSidenavEffectiveWidth(this._right, 'push'); + }; + /** + * Returns the horizontal offset for the content area. There should never be a value for both + * left and right, so by subtracting the right value from the left value, we should always get + * the appropriate offset. + * @internal + */ + MdSidenavLayout.prototype.getPositionOffset = function () { + return this.getPositionLeft() - this.getPositionRight(); + }; + /** + * This is using [ngStyle] rather than separate [style...] properties because [style.transform] + * doesn't seem to work right now. + * @internal + */ + MdSidenavLayout.prototype.getStyles = function () { + return { + marginLeft: this.getMarginLeft() + "px", + marginRight: this.getMarginRight() + "px", + transform: "translate3d(" + this.getPositionOffset() + "px, 0, 0)" + }; + }; + __decorate([ + core_1.ContentChildren(MdSidenav), + __metadata('design:type', core_1.QueryList) + ], MdSidenavLayout.prototype, "_sidenavs", void 0); + MdSidenavLayout = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-sidenav-layout', + // Do not use ChangeDetectionStrategy.OnPush. It does not work for this component because + // technically it is a sibling of MdSidenav (on the content tree) and isn't updated when MdSidenav + // changes its state. + directives: [MdSidenav], + templateUrl: 'sidenav.html', + styleUrls: [ + 'sidenav.css', + 'sidenav-transitions.css', + ], + }), + __param(0, core_1.Optional()), + __metadata('design:paramtypes', [dir_1.Dir, core_1.ElementRef, core_1.Renderer]) + ], MdSidenavLayout); + return MdSidenavLayout; +}()); +exports.MdSidenavLayout = MdSidenavLayout; +exports.MD_SIDENAV_DIRECTIVES = [MdSidenavLayout, MdSidenav]; +//# sourceMappingURL=../../../../components/sidenav/sidenav.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/sidenav/sidenav.js.map b/DEBUG-merge/components/sidenav/sidenav.js.map new file mode 100644 index 000000000000..7630abe08828 --- /dev/null +++ b/DEBUG-merge/components/sidenav/sidenav.js.map @@ -0,0 +1 @@ +{"version":3,"file":"sidenav.js","sourceRoot":"","sources":["../../src/demo-app/components/sidenav/sidenav.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n AfterContentInit,\n Component,\n ContentChildren,\n ElementRef,\n HostBinding,\n Input,\n Optional,\n Output,\n QueryList,\n ChangeDetectionStrategy,\n EventEmitter,\n Renderer\n} from '@angular/core';\nimport {Dir} from '@angular2-material/core/rtl/dir';\nimport {PromiseCompleter} from '@angular2-material/core/async/promise-completer';\nimport {MdError} from '@angular2-material/core/errors/error';\nimport { BooleanFieldValue } from '@angular2-material/core/annotations/field-value';\n\n/** Exception thrown when two MdSidenav are matching the same side. */\nexport class MdDuplicatedSidenavError extends MdError {\n constructor(align: string) {\n super(`A sidenav was already declared for 'align=\"${align}\"'`);\n }\n}\n\n/**\n * component.\n *\n * This component corresponds to the drawer of the sidenav.\n *\n * Please refer to README.md for examples on how to use it.\n */\n@Component({\n moduleId: module.id,\n selector: 'md-sidenav',\n template: '',\n host: {\n '(transitionend)': 'onTransitionEnd($event)',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MdSidenav {\n /** Alignment of the sidenav (direction neutral); whether 'start' or 'end'. */\n @Input() align: 'start' | 'end' = 'start';\n\n /** Mode of the sidenav; whether 'over' or 'side'. */\n @Input() mode: 'over' | 'push' | 'side' = 'over';\n\n /** Whether the sidenav is opened. */\n @Input('opened') @BooleanFieldValue() private _opened: boolean = false;\n\n /** Event emitted when the sidenav is being opened. Use this to synchronize animations. */\n @Output('open-start') onOpenStart = new EventEmitter();\n\n /** Event emitted when the sidenav is fully opened. */\n @Output('open') onOpen = new EventEmitter();\n\n /** Event emitted when the sidenav is being closed. Use this to synchronize animations. */\n @Output('close-start') onCloseStart = new EventEmitter();\n\n /** Event emitted when the sidenav is fully closed. */\n @Output('close') onClose = new EventEmitter();\n\n\n /**\n * @param _elementRef The DOM element reference. Used for transition and width calculation.\n * If not available we do not hook on transitions.\n */\n constructor(private _elementRef: ElementRef) {}\n\n /**\n * Whether the sidenav is opened. We overload this because we trigger an event when it\n * starts or end.\n */\n get opened(): boolean { return this._opened; }\n set opened(v: boolean) {\n this.toggle(v);\n }\n\n\n /** Open this sidenav, and return a Promise that will resolve when it's fully opened (or get\n * rejected if it didn't). */\n open(): Promise {\n return this.toggle(true);\n }\n\n /**\n * Close this sidenav, and return a Promise that will resolve when it's fully closed (or get\n * rejected if it didn't).\n */\n close(): Promise {\n return this.toggle(false);\n }\n\n /**\n * Toggle this sidenav. This is equivalent to calling open() when it's already opened, or\n * close() when it's closed.\n * @param isOpen\n */\n toggle(isOpen: boolean = !this.opened): Promise {\n // Shortcut it if we're already opened.\n if (isOpen === this.opened) {\n if (!this._transition) {\n return Promise.resolve(null);\n } else {\n return isOpen ? this._openPromise : this._closePromise;\n }\n }\n\n this._opened = isOpen;\n this._transition = true;\n\n if (isOpen) {\n this.onOpenStart.emit(null);\n } else {\n this.onCloseStart.emit(null);\n }\n\n if (isOpen) {\n if (this._openPromise == null) {\n let completer = new PromiseCompleter();\n this._openPromise = completer.promise;\n this._openPromiseReject = completer.reject;\n this._openPromiseResolve = completer.resolve;\n }\n return this._openPromise;\n } else {\n if (this._closePromise == null) {\n let completer = new PromiseCompleter();\n this._closePromise = completer.promise;\n this._closePromiseReject = completer.reject;\n this._closePromiseResolve = completer.resolve;\n }\n return this._closePromise;\n }\n }\n\n\n /**\n * When transition has finished, set the internal state for classes and emit the proper event.\n * The event passed is actually of type TransitionEvent, but that type is not available in\n * Android so we use any.\n * @internal\n */\n onTransitionEnd(transitionEvent: TransitionEvent) {\n if (transitionEvent.target == this._elementRef.nativeElement\n // Simpler version to check for prefixes.\n && transitionEvent.propertyName.endsWith('transform')) {\n this._transition = false;\n if (this._opened) {\n if (this._openPromise != null) {\n this._openPromiseResolve();\n }\n if (this._closePromise != null) {\n this._closePromiseReject();\n }\n\n this.onOpen.emit(null);\n } else {\n if (this._closePromise != null) {\n this._closePromiseResolve();\n }\n if (this._openPromise != null) {\n this._openPromiseReject();\n }\n\n this.onClose.emit(null);\n }\n\n this._openPromise = null;\n this._closePromise = null;\n }\n }\n\n @HostBinding('class.md-sidenav-closing') private get _isClosing() {\n return !this._opened && this._transition;\n }\n @HostBinding('class.md-sidenav-opening') private get _isOpening() {\n return this._opened && this._transition;\n }\n @HostBinding('class.md-sidenav-closed') private get _isClosed() {\n return !this._opened && !this._transition;\n }\n @HostBinding('class.md-sidenav-opened') private get _isOpened() {\n return this._opened && !this._transition;\n }\n @HostBinding('class.md-sidenav-end') private get _isEnd() {\n return this.align == 'end';\n }\n @HostBinding('class.md-sidenav-side') private get _modeSide() {\n return this.mode == 'side';\n }\n @HostBinding('class.md-sidenav-over') private get _modeOver() {\n return this.mode == 'over';\n }\n @HostBinding('class.md-sidenav-push') private get _modePush() {\n return this.mode == 'push';\n }\n\n /**\n * This is public because we need it from MdSidenavLayout, but it's undocumented and should\n * not be used outside.\n * @internal\n */\n get width() {\n if (this._elementRef.nativeElement) {\n return this._elementRef.nativeElement.offsetWidth;\n }\n return 0;\n }\n\n private _transition: boolean = false;\n private _openPromise: Promise;\n private _openPromiseResolve: () => void;\n private _openPromiseReject: () => void;\n private _closePromise: Promise;\n private _closePromiseResolve: () => void;\n private _closePromiseReject: () => void;\n}\n\n/**\n * component.\n *\n * This is the parent component to one or two s that validates the state internally\n * and coordinate the backdrop and content styling.\n */\n@Component({\n moduleId: module.id,\n selector: 'md-sidenav-layout',\n // Do not use ChangeDetectionStrategy.OnPush. It does not work for this component because\n // technically it is a sibling of MdSidenav (on the content tree) and isn't updated when MdSidenav\n // changes its state.\n directives: [MdSidenav],\n templateUrl: 'sidenav.html',\n styleUrls: [\n 'sidenav.css',\n 'sidenav-transitions.css',\n ],\n})\nexport class MdSidenavLayout implements AfterContentInit {\n @ContentChildren(MdSidenav) private _sidenavs: QueryList;\n\n get start() { return this._start; }\n get end() { return this._end; }\n\n /** The sidenav at the start/end alignment, independent of direction. */\n private _start: MdSidenav;\n private _end: MdSidenav;\n\n /**\n * The sidenav at the left/right. When direction changes, these will change as well.\n * They're used as aliases for the above to set the left/right style properly.\n * In LTR, _left == _start and _right == _end.\n * In RTL, _left == _end and _right == _start.\n */\n private _left: MdSidenav;\n private _right: MdSidenav;\n\n constructor(@Optional() private _dir: Dir, private _element: ElementRef,\n private _renderer: Renderer) {\n // If a `Dir` directive exists up the tree, listen direction changes and update the left/right\n // properties to point to the proper start/end.\n if (_dir != null) {\n _dir.dirChange.subscribe(() => this._validateDrawers());\n }\n }\n\n /** TODO: internal */\n ngAfterContentInit() {\n // On changes, assert on consistency.\n this._sidenavs.changes.subscribe(() => this._validateDrawers());\n this._sidenavs.forEach((sidenav: MdSidenav) => this._watchSidenavToggle(sidenav));\n this._validateDrawers();\n }\n\n /*\n * Subscribes to sidenav events in order to set a class on the main layout element when the sidenav\n * is open and the backdrop is visible. This ensures any overflow on the layout element is properly\n * hidden.\n * @internal\n */\n private _watchSidenavToggle(sidenav: MdSidenav): void {\n if (!sidenav || sidenav.mode === 'side') { return; }\n sidenav.onOpen.subscribe(() => this._setLayoutClass(sidenav, true));\n sidenav.onClose.subscribe(() => this._setLayoutClass(sidenav, false));\n }\n\n /* Toggles the 'md-sidenav-opened' class on the main 'md-sidenav-layout' element. */\n private _setLayoutClass(sidenav: MdSidenav, bool: boolean): void {\n this._renderer.setElementClass(this._element.nativeElement, 'md-sidenav-opened', bool);\n }\n\n /** Validate the state of the sidenav children components. */\n private _validateDrawers() {\n this._start = this._end = null;\n\n // Ensure that we have at most one start and one end sidenav.\n this._sidenavs.forEach(sidenav => {\n if (sidenav.align == 'end') {\n if (this._end != null) {\n throw new MdDuplicatedSidenavError('end');\n }\n this._end = sidenav;\n } else {\n if (this._start != null) {\n throw new MdDuplicatedSidenavError('start');\n }\n this._start = sidenav;\n }\n });\n\n this._right = this._left = null;\n\n // Detect if we're LTR or RTL.\n if (this._dir == null || this._dir.value == 'ltr') {\n this._left = this._start;\n this._right = this._end;\n } else {\n this._left = this._end;\n this._right = this._start;\n }\n }\n\n /** @internal */\n closeModalSidenav() {\n if (this._start != null && this._start.mode != 'side') {\n this._start.close();\n }\n if (this._end != null && this._end.mode != 'side') {\n this._end.close();\n }\n }\n\n /** @internal */\n isShowingBackdrop(): boolean {\n return (this._isSidenavOpen(this._start) && this._start.mode != 'side')\n || (this._isSidenavOpen(this._end) && this._end.mode != 'side');\n }\n\n private _isSidenavOpen(side: MdSidenav): boolean {\n return side != null && side.opened;\n }\n\n /**\n * Return the width of the sidenav, if it's in the proper mode and opened.\n * This may relayout the view, so do not call this often.\n * @param sidenav\n * @param mode\n */\n private _getSidenavEffectiveWidth(sidenav: MdSidenav, mode: string): number {\n return (this._isSidenavOpen(sidenav) && sidenav.mode == mode) ? sidenav.width : 0;\n }\n\n /** @internal */\n getMarginLeft() {\n return this._getSidenavEffectiveWidth(this._left, 'side');\n }\n\n /** @internal */\n getMarginRight() {\n return this._getSidenavEffectiveWidth(this._right, 'side');\n }\n\n /** @internal */\n getPositionLeft() {\n return this._getSidenavEffectiveWidth(this._left, 'push');\n }\n\n /** @internal */\n getPositionRight() {\n return this._getSidenavEffectiveWidth(this._right, 'push');\n }\n\n /**\n * Returns the horizontal offset for the content area. There should never be a value for both\n * left and right, so by subtracting the right value from the left value, we should always get\n * the appropriate offset.\n * @internal\n */\n getPositionOffset() {\n return this.getPositionLeft() - this.getPositionRight();\n }\n\n /**\n * This is using [ngStyle] rather than separate [style...] properties because [style.transform]\n * doesn't seem to work right now.\n * @internal\n */\n getStyles() {\n return {\n marginLeft: `${this.getMarginLeft()}px`,\n marginRight: `${this.getMarginRight()}px`,\n transform: `translate3d(${this.getPositionOffset()}px, 0, 0)`\n };\n }\n}\n\n\nexport const MD_SIDENAV_DIRECTIVES = [MdSidenavLayout, MdSidenav];\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/slide-toggle/README.md b/DEBUG-merge/components/slide-toggle/README.md new file mode 100644 index 000000000000..0095e3c0be8a --- /dev/null +++ b/DEBUG-merge/components/slide-toggle/README.md @@ -0,0 +1,66 @@ +# MdSlideToggle +`MdSlideToggle` is a two-state control, which can be also called `switch` + +### Screenshots +![image](https://material.angularjs.org/material2_assets/slide-toggle/toggles.png) + +## `` +### Bound Properties + +| Name | Type | Description | +| --- | --- | --- | +| `disabled` | boolean | Disables the `slide-toggle` | +| `color` | `"primary" | "accent" | "warn"` | The color palette of the `slide-toggle` | +| `checked` | boolean | Sets the value of the `slide-toggle` | + +### Events +| Name | Type | Description | +| --- | --- | --- | +| `change` | boolean | Event will be emitted on every value change.
It emits the new `checked` value. | + +### Examples +A basic slide-toggle would have the following markup. +```html + + Default Slide Toggle + +``` + +Slide toggle can be also disabled. +```html + + Disabled Slide Toggle + +``` + +The `slide-toggle` can be also set to checked without a `ngModel` +```html + + Input Binding + +``` + +You may also want to listen on changes of the `slide-toggle`
+The `slide-toggle` always emits the new value to the event binding `(change)` +```html + + Prints Value on Change + +``` + +## Theming +A slide-toggle is default using the `accent` palette for its styling. + +Modifying the color on a `slide-toggle` can be easily done, by using the following markup. +```html + + Primary Slide Toggle + +``` + +The color can be also set dynamically by using a property binding. +```html + + Dynamic Color + +``` \ No newline at end of file diff --git a/DEBUG-merge/components/slide-toggle/package.json b/DEBUG-merge/components/slide-toggle/package.json new file mode 100644 index 000000000000..1627d9557f2b --- /dev/null +++ b/DEBUG-merge/components/slide-toggle/package.json @@ -0,0 +1,28 @@ +{ + "name": "@angular2-material/slide-toggle", + "version": "2.0.0-alpha.5-2", + "description": "Angular 2 Material Slide Toggle", + "main": "./slide-toggle.js", + "typings": "./slide-toggle.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components", + "slide-toggle", + "switch", + "toggle" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "@angular2-material/core": "2.0.0-alpha.5-2" + } +} diff --git a/DEBUG-merge/components/slide-toggle/slide-toggle.css b/DEBUG-merge/components/slide-toggle/slide-toggle.css new file mode 100644 index 000000000000..f8d6924c5649 --- /dev/null +++ b/DEBUG-merge/components/slide-toggle/slide-toggle.css @@ -0,0 +1,210 @@ +/** + * Mixin that creates a new stacking context. + * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + */ +/** + * This mixin hides an element visually. + * That means it's still accessible for screen-readers but not visible in view. + */ +/** + * Forces an element to grow to fit floated contents; used as as an alternative to + * `overflow: hidden;` because it doesn't cut off contents. + */ +/** + * A mixin, which generates temporary ink ripple on a given component. + * When $bindToParent is set to true, it will check for the focused class on the same selector as you included + * that mixin. + * It is also possible to specify the color palette of the temporary ripple. By default it uses the + * accent palette for its background. + */ +/** + * A collection of mixins and CSS classes that can be used to apply elevation to a material + * element. + * See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html + * Examples: + * + * + * .md-foo { + * @include $md-elevation(2); + * + * &:active { + * @include $md-elevation(8); + * } + * } + * + *

Some content

+ * + * For an explanation of the design behind how elevation is implemented, see the design doc at + * https://goo.gl/Kq0k9Z. + */ +/** + * The css property used for elevation. In most cases this should not be changed. It is exposed + * as a variable for abstraction / easy use when needing to reference the property directly, for + * example in a will-change rule. + */ +/** The default duration value for elevation transitions. */ +/** The default easing value for elevation transitions. */ +/** + * Applies the correct css rules to an element to give it the elevation specified by $zValue. + * The $zValue must be between 0 and 24. + */ +/** + * Returns a string that can be used as the value for a transition property for elevation. + * Calling this function directly is useful in situations where a component needs to transition + * more than one property. + * + * .foo { + * transition: md-elevation-transition-property-value(), opacity 100ms ease; + * will-change: $md-elevation-property, opacity; + * } + */ +/** + * Applies the correct css rules needed to have an element transition between elevations. + * This mixin should be applied to elements whose elevation values will change depending on their + * context (e.g. when active or disabled). + */ +:host { + display: flex; + height: 24px; + margin: 16px 0; + line-height: 24px; + white-space: nowrap; + user-select: none; + outline: none; } + :host.md-checked .md-slide-toggle-thumb-container { + transform: translate3d(100%, 0, 0); } + :host.md-checked .md-slide-toggle-thumb { + background-color: #9c27b0; } + :host.md-checked .md-slide-toggle-bar { + background-color: rgba(156, 39, 176, 0.5); } + :host .md-ink-ripple { + border-radius: 50%; + opacity: 0; + height: 48px; + left: 50%; + overflow: hidden; + pointer-events: none; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + transition: opacity ease 0.28s, background-color ease 0.28s; + width: 48px; } + :host.md-slide-toggle-focused .md-ink-ripple { + opacity: 1; + background-color: rgba(156, 39, 176, 0.26); } + :host.md-slide-toggle-disabled .md-ink-ripple { + background-color: #000; } + :host.md-slide-toggle-focused:not(.md-checked) .md-ink-ripple { + background-color: rgba(0, 0, 0, 0.12); } + :host.md-primary.md-checked .md-slide-toggle-thumb { + background-color: #009688; } + :host.md-primary.md-checked .md-slide-toggle-bar { + background-color: rgba(0, 150, 136, 0.5); } + :host.md-primary .md-ink-ripple { + border-radius: 50%; + opacity: 0; + height: 48px; + left: 50%; + overflow: hidden; + pointer-events: none; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + transition: opacity ease 0.28s, background-color ease 0.28s; + width: 48px; } + :host.md-primary.md-slide-toggle-focused .md-ink-ripple { + opacity: 1; + background-color: rgba(0, 150, 136, 0.26); } + :host.md-primary.md-slide-toggle-disabled .md-ink-ripple { + background-color: #000; } + :host.md-primary.md-slide-toggle-focused:not(.md-checked) .md-ink-ripple { + background-color: rgba(0, 0, 0, 0.12); } + :host.md-warn.md-checked .md-slide-toggle-thumb { + background-color: #f44336; } + :host.md-warn.md-checked .md-slide-toggle-bar { + background-color: rgba(244, 67, 54, 0.5); } + :host.md-warn .md-ink-ripple { + border-radius: 50%; + opacity: 0; + height: 48px; + left: 50%; + overflow: hidden; + pointer-events: none; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + transition: opacity ease 0.28s, background-color ease 0.28s; + width: 48px; } + :host.md-warn.md-slide-toggle-focused .md-ink-ripple { + opacity: 1; + background-color: rgba(244, 67, 54, 0.26); } + :host.md-warn.md-slide-toggle-disabled .md-ink-ripple { + background-color: #000; } + :host.md-warn.md-slide-toggle-focused:not(.md-checked) .md-ink-ripple { + background-color: rgba(0, 0, 0, 0.12); } + :host.md-disabled .md-slide-toggle-label, :host.md-disabled .md-slide-toggle-container { + cursor: default; } + :host.md-disabled .md-slide-toggle-thumb { + background-color: #bdbdbd; } + :host.md-disabled .md-slide-toggle-bar { + background-color: rgba(0, 0, 0, 0.12); } + +.md-slide-toggle-label { + display: flex; + flex: 1; + cursor: pointer; } + +.md-slide-toggle-container { + cursor: grab; + width: 36px; + height: 24px; + position: relative; + user-select: none; + margin-right: 8px; } + +.md-slide-toggle-thumb-container { + position: absolute; + top: 2px; + left: 0; + z-index: 1; + width: 16px; + transform: translate3d(0, 0, 0); + transition: all 0.08s linear; + transition-property: transform; } + +.md-slide-toggle-thumb { + position: absolute; + margin: 0; + left: 0; + top: 0; + height: 20px; + width: 20px; + border-radius: 50%; + background-color: #fafafa; + box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); } + +.md-slide-toggle-bar { + position: absolute; + left: 1px; + top: 5px; + width: 34px; + height: 14px; + background-color: #9e9e9e; + border-radius: 8px; } + +.md-slide-toggle-checkbox { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + text-transform: none; + width: 1px; } + +.md-slide-toggle-bar, +.md-slide-toggle-thumb { + transition: all 0.08s linear; + transition-property: background-color; + transition-delay: 0.05s; } diff --git a/DEBUG-merge/components/slide-toggle/slide-toggle.d.ts b/DEBUG-merge/components/slide-toggle/slide-toggle.d.ts new file mode 100644 index 000000000000..f4b5a9476018 --- /dev/null +++ b/DEBUG-merge/components/slide-toggle/slide-toggle.d.ts @@ -0,0 +1,51 @@ +import { ElementRef, Renderer } from '@angular/core'; +import { ControlValueAccessor } from '@angular/common'; +import { Observable } from 'rxjs/Observable'; +export declare const MD_SLIDE_TOGGLE_VALUE_ACCESSOR: any; +export declare class MdSlideToggleChange { + source: MdSlideToggle; + checked: boolean; +} +export declare class MdSlideToggle implements ControlValueAccessor { + private _elementRef; + private _renderer; + private onChange; + private onTouched; + private _uniqueId; + private _checked; + private _color; + private _hasFocus; + private _isMousedown; + disabled: boolean; + name: string; + id: string; + tabIndex: number; + ariaLabel: string; + ariaLabelledby: string; + private _change; + change: Observable; + getInputId: () => string; + constructor(_elementRef: ElementRef, _renderer: Renderer); + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + writeValue(value: any): void; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + registerOnChange(fn: any): void; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + registerOnTouched(fn: any): void; + checked: boolean; + color: string; + toggle(): void; + private _updateColor(newColor); + private _setElementColor(color, isAdd); + private _emitChangeEvent(); +} +export declare const MD_SLIDE_TOGGLE_DIRECTIVES: typeof MdSlideToggle[]; diff --git a/DEBUG-merge/components/slide-toggle/slide-toggle.html b/DEBUG-merge/components/slide-toggle/slide-toggle.html new file mode 100644 index 000000000000..595ea61e265a --- /dev/null +++ b/DEBUG-merge/components/slide-toggle/slide-toggle.html @@ -0,0 +1,25 @@ + \ No newline at end of file diff --git a/DEBUG-merge/components/slide-toggle/slide-toggle.js b/DEBUG-merge/components/slide-toggle/slide-toggle.js new file mode 100644 index 000000000000..5755b73feebf --- /dev/null +++ b/DEBUG-merge/components/slide-toggle/slide-toggle.js @@ -0,0 +1,214 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var common_1 = require('@angular/common'); +var field_value_1 = require('@angular2-material/core/annotations/field-value'); +var Observable_1 = require('rxjs/Observable'); +exports.MD_SLIDE_TOGGLE_VALUE_ACCESSOR = { + provide: common_1.NG_VALUE_ACCESSOR, + useExisting: core_1.forwardRef(function () { return MdSlideToggle; }), + multi: true +}; +// A simple change event emitted by the MdSlideToggle component. +var MdSlideToggleChange = (function () { + function MdSlideToggleChange() { + } + return MdSlideToggleChange; +}()); +exports.MdSlideToggleChange = MdSlideToggleChange; +// Increasing integer for generating unique ids for slide-toggle components. +var nextId = 0; +var MdSlideToggle = (function () { + function MdSlideToggle(_elementRef, _renderer) { + var _this = this; + this._elementRef = _elementRef; + this._renderer = _renderer; + this.onChange = function (_) { }; + this.onTouched = function () { }; + // A unique id for the slide-toggle. By default the id is auto-generated. + this._uniqueId = "md-slide-toggle-" + ++nextId; + this._checked = false; + this._hasFocus = false; + this._isMousedown = false; + this.disabled = false; + this.name = null; + this.id = this._uniqueId; + this.tabIndex = 0; + this.ariaLabel = null; + this.ariaLabelledby = null; + this._change = new core_1.EventEmitter(); + this.change = this._change.asObservable(); + // Returns the unique id for the visual hidden input. + this.getInputId = function () { return ((_this.id || _this._uniqueId) + "-input"); }; + } + /** + * The onChangeEvent method will be also called on click. + * This is because everything for the slide-toggle is wrapped inside of a label, + * which triggers a onChange event on click. + * @internal + */ + MdSlideToggle.prototype.onChangeEvent = function (event) { + // We always have to stop propagation on the change event. + // Otherwise the change event, from the input element, will bubble up and + // emit its event object to the component's `change` output. + event.stopPropagation(); + if (!this.disabled) { + this.toggle(); + } + }; + /** @internal */ + MdSlideToggle.prototype.setMousedown = function () { + var _this = this; + // We only *show* the focus style when focus has come to the button via the keyboard. + // The Material Design spec is silent on this topic, and without doing this, the + // button continues to look :active after clicking. + // @see http://marcysutton.com/button-focus-hell/ + this._isMousedown = true; + setTimeout(function () { return _this._isMousedown = false; }, 100); + }; + /** @internal */ + MdSlideToggle.prototype.onInputFocus = function () { + // Only show the focus / ripple indicator when the focus was not triggered by a mouse + // interaction on the component. + if (!this._isMousedown) { + this._hasFocus = true; + } + }; + /** @internal */ + MdSlideToggle.prototype.onInputBlur = function () { + this._hasFocus = false; + this.onTouched(); + }; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + MdSlideToggle.prototype.writeValue = function (value) { + this.checked = value; + }; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + MdSlideToggle.prototype.registerOnChange = function (fn) { + this.onChange = fn; + }; + /** + * Implemented as part of ControlValueAccessor. + * TODO: internal + */ + MdSlideToggle.prototype.registerOnTouched = function (fn) { + this.onTouched = fn; + }; + Object.defineProperty(MdSlideToggle.prototype, "checked", { + get: function () { + return !!this._checked; + }, + set: function (value) { + if (this.checked !== !!value) { + this._checked = value; + this.onChange(this._checked); + this._emitChangeEvent(); + } + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdSlideToggle.prototype, "color", { + get: function () { + return this._color; + }, + set: function (value) { + this._updateColor(value); + }, + enumerable: true, + configurable: true + }); + MdSlideToggle.prototype.toggle = function () { + this.checked = !this.checked; + }; + MdSlideToggle.prototype._updateColor = function (newColor) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; + }; + MdSlideToggle.prototype._setElementColor = function (color, isAdd) { + if (color != null && color != '') { + this._renderer.setElementClass(this._elementRef.nativeElement, "md-" + color, isAdd); + } + }; + MdSlideToggle.prototype._emitChangeEvent = function () { + var event = new MdSlideToggleChange(); + event.source = this; + event.checked = this.checked; + this._change.emit(event); + }; + __decorate([ + core_1.Input(), + field_value_1.BooleanFieldValue(), + __metadata('design:type', Boolean) + ], MdSlideToggle.prototype, "disabled", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdSlideToggle.prototype, "name", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdSlideToggle.prototype, "id", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Number) + ], MdSlideToggle.prototype, "tabIndex", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdSlideToggle.prototype, "ariaLabel", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdSlideToggle.prototype, "ariaLabelledby", void 0); + __decorate([ + core_1.Output(), + __metadata('design:type', Observable_1.Observable) + ], MdSlideToggle.prototype, "change", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MdSlideToggle.prototype, "checked", null); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdSlideToggle.prototype, "color", null); + MdSlideToggle = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-slide-toggle', + host: { + '[class.md-checked]': 'checked', + '[class.md-disabled]': 'disabled', + // This md-slide-toggle prefix will change, once the temporary ripple is removed. + '[class.md-slide-toggle-focused]': '_hasFocus', + '(click)': 'onTouched()', + '(mousedown)': 'setMousedown()' + }, + templateUrl: 'slide-toggle.html', + styleUrls: ['slide-toggle.css'], + providers: [exports.MD_SLIDE_TOGGLE_VALUE_ACCESSOR], + changeDetection: core_1.ChangeDetectionStrategy.OnPush + }), + __metadata('design:paramtypes', [core_1.ElementRef, core_1.Renderer]) + ], MdSlideToggle); + return MdSlideToggle; +}()); +exports.MdSlideToggle = MdSlideToggle; +exports.MD_SLIDE_TOGGLE_DIRECTIVES = [MdSlideToggle]; +//# sourceMappingURL=../../../../components/slide-toggle/slide-toggle.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/slide-toggle/slide-toggle.js.map b/DEBUG-merge/components/slide-toggle/slide-toggle.js.map new file mode 100644 index 000000000000..9fbccad72faa --- /dev/null +++ b/DEBUG-merge/components/slide-toggle/slide-toggle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"slide-toggle.js","sourceRoot":"","sources":["../../src/demo-app/components/slide-toggle/slide-toggle.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n ElementRef,\r\n Renderer,\r\n forwardRef,\r\n ChangeDetectionStrategy,\r\n Input,\r\n Output,\r\n EventEmitter\r\n} from '@angular/core';\r\nimport {\r\n ControlValueAccessor,\r\n NG_VALUE_ACCESSOR\r\n} from '@angular/common';\r\nimport { BooleanFieldValue } from '@angular2-material/core/annotations/field-value';\r\nimport { Observable } from 'rxjs/Observable';\r\n\r\nexport const MD_SLIDE_TOGGLE_VALUE_ACCESSOR: any = {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => MdSlideToggle),\r\n multi: true\r\n};\r\n\r\n// A simple change event emitted by the MdSlideToggle component.\r\nexport class MdSlideToggleChange {\r\n source: MdSlideToggle;\r\n checked: boolean;\r\n}\r\n\r\n// Increasing integer for generating unique ids for slide-toggle components.\r\nlet nextId = 0;\r\n\r\n@Component({\r\n moduleId: module.id,\r\n selector: 'md-slide-toggle',\r\n host: {\r\n '[class.md-checked]': 'checked',\r\n '[class.md-disabled]': 'disabled',\r\n // This md-slide-toggle prefix will change, once the temporary ripple is removed.\r\n '[class.md-slide-toggle-focused]': '_hasFocus',\r\n '(click)': 'onTouched()',\r\n '(mousedown)': 'setMousedown()'\r\n },\r\n templateUrl: 'slide-toggle.html',\r\n styleUrls: ['slide-toggle.css'],\r\n providers: [MD_SLIDE_TOGGLE_VALUE_ACCESSOR],\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class MdSlideToggle implements ControlValueAccessor {\r\n\r\n private onChange = (_: any) => {};\r\n private onTouched = () => {};\r\n\r\n // A unique id for the slide-toggle. By default the id is auto-generated.\r\n private _uniqueId = `md-slide-toggle-${++nextId}`;\r\n private _checked: boolean = false;\r\n private _color: string;\r\n private _hasFocus: boolean = false;\r\n private _isMousedown: boolean = false;\r\n\r\n @Input() @BooleanFieldValue() disabled: boolean = false;\r\n @Input() name: string = null;\r\n @Input() id: string = this._uniqueId;\r\n @Input() tabIndex: number = 0;\r\n @Input() ariaLabel: string = null;\r\n @Input() ariaLabelledby: string = null;\r\n\r\n private _change: EventEmitter = new EventEmitter();\r\n @Output() change: Observable = this._change.asObservable();\r\n\r\n // Returns the unique id for the visual hidden input.\r\n getInputId = () => `${this.id || this._uniqueId}-input`;\r\n\r\n constructor(private _elementRef: ElementRef,\r\n private _renderer: Renderer) {\r\n }\r\n\r\n /**\r\n * The onChangeEvent method will be also called on click.\r\n * This is because everything for the slide-toggle is wrapped inside of a label,\r\n * which triggers a onChange event on click.\r\n * @internal\r\n */\r\n onChangeEvent(event: Event) {\r\n // We always have to stop propagation on the change event.\r\n // Otherwise the change event, from the input element, will bubble up and\r\n // emit its event object to the component's `change` output.\r\n event.stopPropagation();\r\n\r\n if (!this.disabled) {\r\n this.toggle();\r\n }\r\n }\r\n\r\n /** @internal */\r\n setMousedown() {\r\n // We only *show* the focus style when focus has come to the button via the keyboard.\r\n // The Material Design spec is silent on this topic, and without doing this, the\r\n // button continues to look :active after clicking.\r\n // @see http://marcysutton.com/button-focus-hell/\r\n this._isMousedown = true;\r\n setTimeout(() => this._isMousedown = false, 100);\r\n }\r\n\r\n /** @internal */\r\n onInputFocus() {\r\n // Only show the focus / ripple indicator when the focus was not triggered by a mouse\r\n // interaction on the component.\r\n if (!this._isMousedown) {\r\n this._hasFocus = true;\r\n }\r\n }\r\n\r\n /** @internal */\r\n onInputBlur() {\r\n this._hasFocus = false;\r\n this.onTouched();\r\n }\r\n\r\n /**\r\n * Implemented as part of ControlValueAccessor.\r\n * TODO: internal\r\n */\r\n writeValue(value: any): void {\r\n this.checked = value;\r\n }\r\n\r\n /**\r\n * Implemented as part of ControlValueAccessor.\r\n * TODO: internal\r\n */\r\n registerOnChange(fn: any): void {\r\n this.onChange = fn;\r\n }\r\n\r\n /**\r\n * Implemented as part of ControlValueAccessor.\r\n * TODO: internal\r\n */\r\n registerOnTouched(fn: any): void {\r\n this.onTouched = fn;\r\n }\r\n\r\n @Input()\r\n get checked() {\r\n return !!this._checked;\r\n }\r\n\r\n set checked(value) {\r\n if (this.checked !== !!value) {\r\n this._checked = value;\r\n this.onChange(this._checked);\r\n this._emitChangeEvent();\r\n }\r\n }\r\n\r\n @Input()\r\n get color(): string {\r\n return this._color;\r\n }\r\n\r\n set color(value: string) {\r\n this._updateColor(value);\r\n }\r\n\r\n toggle() {\r\n this.checked = !this.checked;\r\n }\r\n\r\n private _updateColor(newColor: string) {\r\n this._setElementColor(this._color, false);\r\n this._setElementColor(newColor, true);\r\n this._color = newColor;\r\n }\r\n\r\n private _setElementColor(color: string, isAdd: boolean) {\r\n if (color != null && color != '') {\r\n this._renderer.setElementClass(this._elementRef.nativeElement, `md-${color}`, isAdd);\r\n }\r\n }\r\n\r\n private _emitChangeEvent() {\r\n let event = new MdSlideToggleChange();\r\n event.source = this;\r\n event.checked = this.checked;\r\n this._change.emit(event);\r\n }\r\n\r\n}\r\n\r\nexport const MD_SLIDE_TOGGLE_DIRECTIVES = [MdSlideToggle];\r\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/tabs/README.md b/DEBUG-merge/components/tabs/README.md new file mode 100644 index 000000000000..cf9865dfe76c --- /dev/null +++ b/DEBUG-merge/components/tabs/README.md @@ -0,0 +1,30 @@ +# MdTabGroup +Tab groups allow the user to organize their content by labels such that only one tab is visible at any given time. + +### Examples +A basic tab group would have the following markup. +```html + + + + + + + + + + +``` + +## `` +### Properties + +| Name | Type | Description | +| --- | --- | --- | +| `selectedIndex` | `number` | The index of the currently active tab. | diff --git a/DEBUG-merge/components/tabs/ink-bar.d.ts b/DEBUG-merge/components/tabs/ink-bar.d.ts new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/DEBUG-merge/components/tabs/ink-bar.js b/DEBUG-merge/components/tabs/ink-bar.js new file mode 100644 index 000000000000..5387057cd29a --- /dev/null +++ b/DEBUG-merge/components/tabs/ink-bar.js @@ -0,0 +1,54 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +/** + * The ink-bar is used to display and animate the line underneath the current active tab label. + * @internal + */ +var MdInkBar = (function () { + function MdInkBar(_renderer, _elementRef) { + this._renderer = _renderer; + this._elementRef = _elementRef; + } + /** + * Calculates the styles from the provided element in order to align the ink-bar to that element. + * @param element + */ + MdInkBar.prototype.alignToElement = function (element) { + this._renderer.setElementStyle(this._elementRef.nativeElement, 'left', this._getLeftPosition(element)); + this._renderer.setElementStyle(this._elementRef.nativeElement, 'width', this._getElementWidth(element)); + }; + /** + * Generates the pixel distance from the left based on the provided element in string format. + * @param element + * @returns {string} + */ + MdInkBar.prototype._getLeftPosition = function (element) { + return element.offsetLeft + 'px'; + }; + /** + * Generates the pixel width from the provided element in string format. + * @param element + * @returns {string} + */ + MdInkBar.prototype._getElementWidth = function (element) { + return element.offsetWidth + 'px'; + }; + MdInkBar = __decorate([ + core_1.Directive({ + selector: 'md-ink-bar', + }), + __metadata('design:paramtypes', [core_1.Renderer, core_1.ElementRef]) + ], MdInkBar); + return MdInkBar; +}()); +exports.MdInkBar = MdInkBar; +//# sourceMappingURL=../../../../components/tabs/ink-bar.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/tabs/ink-bar.js.map b/DEBUG-merge/components/tabs/ink-bar.js.map new file mode 100644 index 000000000000..1a10f0d87d9c --- /dev/null +++ b/DEBUG-merge/components/tabs/ink-bar.js.map @@ -0,0 +1 @@ +{"version":3,"file":"ink-bar.js","sourceRoot":"","sources":["../../src/demo-app/components/tabs/ink-bar.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA8C,eAAe,CAAC,CAAA;AAE9D;;;GAGG;AAIH;IACE,kBAAoB,SAAmB,EAAU,WAAuB;QAApD,cAAS,GAAT,SAAS,CAAU;QAAU,gBAAW,GAAX,WAAW,CAAY;IAAG,CAAC;IAE5E;;;OAGG;IACH,iCAAc,GAAd,UAAe,OAAoB;QACjC,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,MAAM,EACjE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;QACpC,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,OAAO,EAClE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;IACtC,CAAC;IAED;;;;OAIG;IACK,mCAAgB,GAAxB,UAAyB,OAAoB;QAC3C,MAAM,CAAC,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC;IACnC,CAAC;IAED;;;;OAIG;IACK,mCAAgB,GAAxB,UAAyB,OAAoB;QAC3C,MAAM,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC;IACpC,CAAC;IAjCH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,YAAY;SACvB,CAAC;;gBAAA;IAgCF,eAAC;AAAD,CAAC,AA/BD,IA+BC;AA/BY,gBAAQ,WA+BpB,CAAA","sourcesContent":["import {Directive, Renderer, ElementRef} from '@angular/core';\n\n/**\n * The ink-bar is used to display and animate the line underneath the current active tab label.\n * @internal\n */\n@Directive({\n selector: 'md-ink-bar',\n})\nexport class MdInkBar {\n constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}\n\n /**\n * Calculates the styles from the provided element in order to align the ink-bar to that element.\n * @param element\n */\n alignToElement(element: HTMLElement) {\n this._renderer.setElementStyle(this._elementRef.nativeElement, 'left',\n this._getLeftPosition(element));\n this._renderer.setElementStyle(this._elementRef.nativeElement, 'width',\n this._getElementWidth(element));\n }\n\n /**\n * Generates the pixel distance from the left based on the provided element in string format.\n * @param element\n * @returns {string}\n */\n private _getLeftPosition(element: HTMLElement): string {\n return element.offsetLeft + 'px';\n }\n\n /**\n * Generates the pixel width from the provided element in string format.\n * @param element\n * @returns {string}\n */\n private _getElementWidth(element: HTMLElement): string {\n return element.offsetWidth + 'px';\n }\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/tabs/package.json b/DEBUG-merge/components/tabs/package.json new file mode 100644 index 000000000000..f4908d91e710 --- /dev/null +++ b/DEBUG-merge/components/tabs/package.json @@ -0,0 +1,26 @@ +{ + "name": "@angular2-material/tabs", + "version": "2.0.0-alpha.5-2", + "description": "Angular 2 Material Tabs", + "main": "./tabs.js", + "typings": "./tabs.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components", + "tabs" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "@angular2-material/core": "2.0.0-alpha.5-2" + } +} diff --git a/DEBUG-merge/components/tabs/tab-content.d.ts b/DEBUG-merge/components/tabs/tab-content.d.ts new file mode 100644 index 000000000000..2d305125d62f --- /dev/null +++ b/DEBUG-merge/components/tabs/tab-content.d.ts @@ -0,0 +1,6 @@ +import { TemplateRef, ViewContainerRef } from '@angular/core'; +import { TemplatePortalDirective } from '@angular2-material/core/portal/portal-directives'; +/** Used to flag tab contents for use with the portal directive */ +export declare class MdTabContent extends TemplatePortalDirective { + constructor(templateRef: TemplateRef, viewContainerRef: ViewContainerRef); +} diff --git a/DEBUG-merge/components/tabs/tab-content.js b/DEBUG-merge/components/tabs/tab-content.js new file mode 100644 index 000000000000..0529c73faa74 --- /dev/null +++ b/DEBUG-merge/components/tabs/tab-content.js @@ -0,0 +1,33 @@ +"use strict"; +var __extends = (this && this.__extends) || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +}; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var portal_directives_1 = require('@angular2-material/core/portal/portal-directives'); +/** Used to flag tab contents for use with the portal directive */ +var MdTabContent = (function (_super) { + __extends(MdTabContent, _super); + function MdTabContent(templateRef, viewContainerRef) { + _super.call(this, templateRef, viewContainerRef); + } + MdTabContent = __decorate([ + core_1.Directive({ + selector: '[md-tab-content]' + }), + __metadata('design:paramtypes', [core_1.TemplateRef, core_1.ViewContainerRef]) + ], MdTabContent); + return MdTabContent; +}(portal_directives_1.TemplatePortalDirective)); +exports.MdTabContent = MdTabContent; +//# sourceMappingURL=../../../../components/tabs/tab-content.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/tabs/tab-content.js.map b/DEBUG-merge/components/tabs/tab-content.js.map new file mode 100644 index 000000000000..89c9261233d6 --- /dev/null +++ b/DEBUG-merge/components/tabs/tab-content.js.map @@ -0,0 +1 @@ +{"version":3,"file":"tab-content.js","sourceRoot":"","sources":["../../src/demo-app/components/tabs/tab-content.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,qBAAuD,eAAe,CAAC,CAAA;AACvE,kCAAsC,kDAAkD,CAAC,CAAA;AAEzF,kEAAkE;AAIlE;IAAkC,gCAAuB;IACvD,sBAAY,WAA6B,EAAE,gBAAkC;QAC3E,kBAAM,WAAW,EAAE,gBAAgB,CAAC,CAAC;IACvC,CAAC;IANH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,kBAAkB;SAC7B,CAAC;;oBAAA;IAKF,mBAAC;AAAD,CAAC,AAJD,CAAkC,2CAAuB,GAIxD;AAJY,oBAAY,eAIxB,CAAA","sourcesContent":["import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';\nimport {TemplatePortalDirective} from '@angular2-material/core/portal/portal-directives';\n\n/** Used to flag tab contents for use with the portal directive */\n@Directive({\n selector: '[md-tab-content]'\n})\nexport class MdTabContent extends TemplatePortalDirective {\n constructor(templateRef: TemplateRef, viewContainerRef: ViewContainerRef) {\n super(templateRef, viewContainerRef);\n }\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/tabs/tab-group.css b/DEBUG-merge/components/tabs/tab-group.css new file mode 100644 index 000000000000..f19585768e07 --- /dev/null +++ b/DEBUG-merge/components/tabs/tab-group.css @@ -0,0 +1,58 @@ +:host { + display: flex; + flex-direction: column; + font-family: Roboto, "Helvetica Neue", sans-serif; + min-height: 248px; } + +/** The top section of the view; contains the tab labels */ +.md-tab-header { + overflow: hidden; + position: relative; + display: flex; + flex-direction: row; + border-bottom: 1px solid #e0e0e0; + flex-shrink: 0; } + +/** Wraps each tab label */ +.md-tab-label { + line-height: 48px; + height: 48px; + padding: 0 12px; + font-size: 14px; + font-family: Roboto, "Helvetica Neue", sans-serif; + font-weight: 500; + cursor: pointer; + box-sizing: border-box; + color: currentColor; + opacity: 0.6; + min-width: 160px; + text-align: center; } + .md-tab-label:focus { + outline: none; + opacity: 1; + background-color: rgba(178, 223, 219, 0.3); } + +/** The bottom section of the view; contains the tab bodies */ +.md-tab-body-wrapper { + position: relative; + overflow: hidden; + flex-grow: 1; + display: flex; } + +/** Wraps each tab body */ +.md-tab-body { + display: none; + overflow: auto; + box-sizing: border-box; + flex-grow: 1; + flex-shrink: 1; } + .md-tab-body.md-active { + display: block; } + +/** The colored bar that underlines the active tab */ +md-ink-bar { + position: absolute; + bottom: 0; + height: 2px; + background-color: #009688; + transition: 0.35s ease-out; } diff --git a/DEBUG-merge/components/tabs/tab-group.html b/DEBUG-merge/components/tabs/tab-group.html new file mode 100644 index 000000000000..d9acaef078e8 --- /dev/null +++ b/DEBUG-merge/components/tabs/tab-group.html @@ -0,0 +1,25 @@ +
+ + +
+
+
+ +
+
diff --git a/DEBUG-merge/components/tabs/tab-label-wrapper.d.ts b/DEBUG-merge/components/tabs/tab-label-wrapper.d.ts new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/DEBUG-merge/components/tabs/tab-label-wrapper.js b/DEBUG-merge/components/tabs/tab-label-wrapper.js new file mode 100644 index 000000000000..4e0c4d04c184 --- /dev/null +++ b/DEBUG-merge/components/tabs/tab-label-wrapper.js @@ -0,0 +1,35 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +/** + * Used in the `md-tab-group` view to display tab labels + * @internal + */ +var MdTabLabelWrapper = (function () { + function MdTabLabelWrapper(elementRef) { + this.elementRef = elementRef; + } + /** + * Sets focus on the wrapper element + */ + MdTabLabelWrapper.prototype.focus = function () { + this.elementRef.nativeElement.focus(); + }; + MdTabLabelWrapper = __decorate([ + core_1.Directive({ + selector: '[md-tab-label-wrapper]' + }), + __metadata('design:paramtypes', [core_1.ElementRef]) + ], MdTabLabelWrapper); + return MdTabLabelWrapper; +}()); +exports.MdTabLabelWrapper = MdTabLabelWrapper; +//# sourceMappingURL=../../../../components/tabs/tab-label-wrapper.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/tabs/tab-label-wrapper.js.map b/DEBUG-merge/components/tabs/tab-label-wrapper.js.map new file mode 100644 index 000000000000..58feb06441b3 --- /dev/null +++ b/DEBUG-merge/components/tabs/tab-label-wrapper.js.map @@ -0,0 +1 @@ +{"version":3,"file":"tab-label-wrapper.js","sourceRoot":"","sources":["../../src/demo-app/components/tabs/tab-label-wrapper.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAAoC,eAAe,CAAC,CAAA;AAEpD;;;GAGG;AAIH;IACE,2BAAmB,UAAsB;QAAtB,eAAU,GAAV,UAAU,CAAY;IAAG,CAAC;IAE7C;;OAEG;IACH,iCAAK,GAAL;QACE,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;IACxC,CAAC;IAXH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,wBAAwB;SACnC,CAAC;;yBAAA;IAUF,wBAAC;AAAD,CAAC,AATD,IASC;AATY,yBAAiB,oBAS7B,CAAA","sourcesContent":["import {Directive, ElementRef} from '@angular/core';\n\n/**\n * Used in the `md-tab-group` view to display tab labels\n * @internal\n */\n@Directive({\n selector: '[md-tab-label-wrapper]'\n})\nexport class MdTabLabelWrapper {\n constructor(public elementRef: ElementRef) {}\n\n /**\n * Sets focus on the wrapper element\n */\n focus(): void {\n this.elementRef.nativeElement.focus();\n }\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/tabs/tab-label.d.ts b/DEBUG-merge/components/tabs/tab-label.d.ts new file mode 100644 index 000000000000..e550f8b15140 --- /dev/null +++ b/DEBUG-merge/components/tabs/tab-label.d.ts @@ -0,0 +1,6 @@ +import { TemplateRef, ViewContainerRef } from '@angular/core'; +import { TemplatePortalDirective } from '@angular2-material/core/portal/portal-directives'; +/** Used to flag tab labels for use with the portal directive */ +export declare class MdTabLabel extends TemplatePortalDirective { + constructor(templateRef: TemplateRef, viewContainerRef: ViewContainerRef); +} diff --git a/DEBUG-merge/components/tabs/tab-label.js b/DEBUG-merge/components/tabs/tab-label.js new file mode 100644 index 000000000000..13b85dedd9ea --- /dev/null +++ b/DEBUG-merge/components/tabs/tab-label.js @@ -0,0 +1,33 @@ +"use strict"; +var __extends = (this && this.__extends) || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +}; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var portal_directives_1 = require('@angular2-material/core/portal/portal-directives'); +/** Used to flag tab labels for use with the portal directive */ +var MdTabLabel = (function (_super) { + __extends(MdTabLabel, _super); + function MdTabLabel(templateRef, viewContainerRef) { + _super.call(this, templateRef, viewContainerRef); + } + MdTabLabel = __decorate([ + core_1.Directive({ + selector: '[md-tab-label]', + }), + __metadata('design:paramtypes', [core_1.TemplateRef, core_1.ViewContainerRef]) + ], MdTabLabel); + return MdTabLabel; +}(portal_directives_1.TemplatePortalDirective)); +exports.MdTabLabel = MdTabLabel; +//# sourceMappingURL=../../../../components/tabs/tab-label.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/tabs/tab-label.js.map b/DEBUG-merge/components/tabs/tab-label.js.map new file mode 100644 index 000000000000..ba5158408c18 --- /dev/null +++ b/DEBUG-merge/components/tabs/tab-label.js.map @@ -0,0 +1 @@ +{"version":3,"file":"tab-label.js","sourceRoot":"","sources":["../../src/demo-app/components/tabs/tab-label.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,qBAAuD,eAAe,CAAC,CAAA;AACvE,kCAAsC,kDAAkD,CAAC,CAAA;AAEzF,gEAAgE;AAIhE;IAAgC,8BAAuB;IACrD,oBAAY,WAA6B,EAAE,gBAAkC;QAC3E,kBAAM,WAAW,EAAE,gBAAgB,CAAC,CAAC;IACvC,CAAC;IANH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,gBAAgB;SAC3B,CAAC;;kBAAA;IAKF,iBAAC;AAAD,CAAC,AAJD,CAAgC,2CAAuB,GAItD;AAJY,kBAAU,aAItB,CAAA","sourcesContent":["import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';\nimport {TemplatePortalDirective} from '@angular2-material/core/portal/portal-directives';\n\n/** Used to flag tab labels for use with the portal directive */\n@Directive({\n selector: '[md-tab-label]',\n})\nexport class MdTabLabel extends TemplatePortalDirective {\n constructor(templateRef: TemplateRef, viewContainerRef: ViewContainerRef) {\n super(templateRef, viewContainerRef);\n }\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/tabs/tabs.d.ts b/DEBUG-merge/components/tabs/tabs.d.ts new file mode 100644 index 000000000000..226e7b2bb960 --- /dev/null +++ b/DEBUG-merge/components/tabs/tabs.d.ts @@ -0,0 +1,37 @@ +import { NgZone } from '@angular/core'; +import { MdTabLabel } from './tab-label'; +/** + * Material design tab-group component. Supports basic tab pairs (label + content) and includes + * animated ink-bar, keyboard navigation, and screen reader. + * See: https://www.google.com/design/spec/components/tabs.html + */ +export declare class MdTabGroup { + private _zone; + private _labelWrappers; + private _inkBar; + selectedIndex: number; + private _focusIndex; + private _groupId; + constructor(_zone: NgZone); + /** + * Waits one frame for the view to update, then upates the ink bar + * Note: This must be run outside of the zone or it will create an infinite change detection loop + * TODO: internal + */ + ngAfterViewChecked(): void; + /** Tells the ink-bar to align itself to the current label wrapper */ + private _updateInkBar(); + /** + * Reference to the current label wrapper; defaults to null for initial render before the + * ViewChildren references are ready. + */ + private _currentLabelWrapper; + /** Tracks which element has focus; used for keyboard navigation */ + /** When the focus index is set, we must manually send focus to the correct label */ + focusIndex: number; + /** Increment the focus index by 1; prevent going over the number of tabs */ + focusNextTab(): void; + /** Decrement the focus index by 1; prevent going below 0 */ + focusPreviousTab(): void; +} +export declare const MD_TABS_DIRECTIVES: (typeof MdTabGroup | typeof MdTabLabel)[]; diff --git a/DEBUG-merge/components/tabs/tabs.js b/DEBUG-merge/components/tabs/tabs.js new file mode 100644 index 000000000000..6a92ca37055b --- /dev/null +++ b/DEBUG-merge/components/tabs/tabs.js @@ -0,0 +1,138 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var core_2 = require('@angular/core'); +var core_3 = require('@angular/core'); +var portal_directives_1 = require('@angular2-material/core/portal/portal-directives'); +var tab_label_1 = require('./tab-label'); +var tab_content_1 = require('./tab-content'); +var tab_label_wrapper_1 = require('./tab-label-wrapper'); +var ink_bar_1 = require('./ink-bar'); +/** Used to generate unique ID's for each tab component */ +var nextId = 0; +/** + * Material design tab-group component. Supports basic tab pairs (label + content) and includes + * animated ink-bar, keyboard navigation, and screen reader. + * See: https://www.google.com/design/spec/components/tabs.html + */ +var MdTabGroup = (function () { + function MdTabGroup(_zone) { + this._zone = _zone; + this.selectedIndex = 0; + this._focusIndex = 0; + this._groupId = nextId++; + } + /** + * Waits one frame for the view to update, then upates the ink bar + * Note: This must be run outside of the zone or it will create an infinite change detection loop + * TODO: internal + */ + MdTabGroup.prototype.ngAfterViewChecked = function () { + var _this = this; + this._zone.runOutsideAngular(function () { + window.requestAnimationFrame(function () { + _this._updateInkBar(); + }); + }); + }; + /** Tells the ink-bar to align itself to the current label wrapper */ + MdTabGroup.prototype._updateInkBar = function () { + this._inkBar.toArray()[0].alignToElement(this._currentLabelWrapper); + }; + Object.defineProperty(MdTabGroup.prototype, "_currentLabelWrapper", { + /** + * Reference to the current label wrapper; defaults to null for initial render before the + * ViewChildren references are ready. + */ + get: function () { + return this._labelWrappers + ? this._labelWrappers.toArray()[this.selectedIndex].elementRef.nativeElement + : null; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(MdTabGroup.prototype, "focusIndex", { + /** Tracks which element has focus; used for keyboard navigation */ + get: function () { + return this._focusIndex; + }, + /** When the focus index is set, we must manually send focus to the correct label */ + set: function (value) { + this._focusIndex = value; + if (this._labelWrappers && this._labelWrappers.length) { + this._labelWrappers.toArray()[value].focus(); + } + }, + enumerable: true, + configurable: true + }); + /** + * Returns a unique id for each tab label element + * @internal + */ + MdTabGroup.prototype.getTabLabelId = function (i) { + return "md-tab-label-" + this._groupId + "-" + i; + }; + /** + * Returns a unique id for each tab content element + * @internal + */ + MdTabGroup.prototype.getTabContentId = function (i) { + return "md-tab-content-" + this._groupId + "-" + i; + }; + /** Increment the focus index by 1; prevent going over the number of tabs */ + MdTabGroup.prototype.focusNextTab = function () { + if (this._labelWrappers && this.focusIndex < this._labelWrappers.length - 1) { + this.focusIndex++; + } + }; + /** Decrement the focus index by 1; prevent going below 0 */ + MdTabGroup.prototype.focusPreviousTab = function () { + if (this.focusIndex > 0) { + this.focusIndex--; + } + }; + __decorate([ + core_3.ContentChildren(tab_label_1.MdTabLabel), + __metadata('design:type', core_2.QueryList) + ], MdTabGroup.prototype, "labels", void 0); + __decorate([ + core_3.ContentChildren(tab_content_1.MdTabContent), + __metadata('design:type', core_2.QueryList) + ], MdTabGroup.prototype, "contents", void 0); + __decorate([ + core_1.ViewChildren(tab_label_wrapper_1.MdTabLabelWrapper), + __metadata('design:type', core_2.QueryList) + ], MdTabGroup.prototype, "_labelWrappers", void 0); + __decorate([ + core_1.ViewChildren(ink_bar_1.MdInkBar), + __metadata('design:type', core_2.QueryList) + ], MdTabGroup.prototype, "_inkBar", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Number) + ], MdTabGroup.prototype, "selectedIndex", void 0); + MdTabGroup = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-tab-group', + templateUrl: 'tab-group.html', + styleUrls: ['tab-group.css'], + directives: [portal_directives_1.PortalHostDirective, tab_label_wrapper_1.MdTabLabelWrapper, ink_bar_1.MdInkBar], + }), + __metadata('design:paramtypes', [core_1.NgZone]) + ], MdTabGroup); + return MdTabGroup; +}()); +exports.MdTabGroup = MdTabGroup; +exports.MD_TABS_DIRECTIVES = [MdTabGroup, tab_label_1.MdTabLabel, tab_content_1.MdTabContent]; +//# sourceMappingURL=../../../../components/tabs/tabs.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/tabs/tabs.js.map b/DEBUG-merge/components/tabs/tabs.js.map new file mode 100644 index 000000000000..d7d4878d72e9 --- /dev/null +++ b/DEBUG-merge/components/tabs/tabs.js.map @@ -0,0 +1 @@ +{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/demo-app/components/tabs/tabs.ts"],"names":[],"mappings":"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","sourcesContent":["import {Component, Input, ViewChildren, NgZone} from '@angular/core';\nimport {QueryList} from '@angular/core';\nimport {ContentChildren} from '@angular/core';\nimport {PortalHostDirective} from '@angular2-material/core/portal/portal-directives';\nimport {MdTabLabel} from './tab-label';\nimport {MdTabContent} from './tab-content';\nimport {MdTabLabelWrapper} from './tab-label-wrapper';\nimport {MdInkBar} from './ink-bar';\n\n/** Used to generate unique ID's for each tab component */\nlet nextId = 0;\n\n/**\n * Material design tab-group component. Supports basic tab pairs (label + content) and includes\n * animated ink-bar, keyboard navigation, and screen reader.\n * See: https://www.google.com/design/spec/components/tabs.html\n */\n@Component({\n moduleId: module.id,\n selector: 'md-tab-group',\n templateUrl: 'tab-group.html',\n styleUrls: ['tab-group.css'],\n directives: [PortalHostDirective, MdTabLabelWrapper, MdInkBar],\n})\nexport class MdTabGroup {\n /** @internal */\n @ContentChildren(MdTabLabel) labels: QueryList;\n\n /** @internal */\n @ContentChildren(MdTabContent) contents: QueryList;\n\n @ViewChildren(MdTabLabelWrapper) private _labelWrappers: QueryList;\n @ViewChildren(MdInkBar) private _inkBar: QueryList;\n\n @Input() selectedIndex: number = 0;\n\n private _focusIndex: number = 0;\n private _groupId: number;\n\n constructor(private _zone: NgZone) {\n this._groupId = nextId++;\n }\n\n /**\n * Waits one frame for the view to update, then upates the ink bar\n * Note: This must be run outside of the zone or it will create an infinite change detection loop\n * TODO: internal\n */\n ngAfterViewChecked(): void {\n this._zone.runOutsideAngular(() => {\n window.requestAnimationFrame(() => {\n this._updateInkBar();\n });\n });\n }\n\n /** Tells the ink-bar to align itself to the current label wrapper */\n private _updateInkBar(): void {\n this._inkBar.toArray()[0].alignToElement(this._currentLabelWrapper);\n }\n\n /**\n * Reference to the current label wrapper; defaults to null for initial render before the\n * ViewChildren references are ready.\n */\n private get _currentLabelWrapper(): HTMLElement {\n return this._labelWrappers\n ? this._labelWrappers.toArray()[this.selectedIndex].elementRef.nativeElement\n : null;\n }\n\n /** Tracks which element has focus; used for keyboard navigation */\n get focusIndex(): number {\n return this._focusIndex;\n }\n\n /** When the focus index is set, we must manually send focus to the correct label */\n set focusIndex(value: number) {\n this._focusIndex = value;\n if (this._labelWrappers && this._labelWrappers.length) {\n this._labelWrappers.toArray()[value].focus();\n }\n }\n\n /**\n * Returns a unique id for each tab label element\n * @internal\n */\n getTabLabelId(i: number): string {\n return `md-tab-label-${this._groupId}-${i}`;\n }\n\n /**\n * Returns a unique id for each tab content element\n * @internal\n */\n getTabContentId(i: number): string {\n return `md-tab-content-${this._groupId}-${i}`;\n }\n\n /** Increment the focus index by 1; prevent going over the number of tabs */\n focusNextTab(): void {\n if (this._labelWrappers && this.focusIndex < this._labelWrappers.length - 1) {\n this.focusIndex++;\n }\n }\n\n /** Decrement the focus index by 1; prevent going below 0 */\n focusPreviousTab(): void {\n if (this.focusIndex > 0) {\n this.focusIndex--;\n }\n }\n}\n\nexport const MD_TABS_DIRECTIVES = [MdTabGroup, MdTabLabel, MdTabContent];\n"]} \ No newline at end of file diff --git a/DEBUG-merge/components/toolbar/README.md b/DEBUG-merge/components/toolbar/README.md new file mode 100644 index 000000000000..90b150975664 --- /dev/null +++ b/DEBUG-merge/components/toolbar/README.md @@ -0,0 +1,68 @@ +# MdToolbar +`MdToolbar` is a vertical aligned bar, which can hold the application title or actions. + +### Screenshots +![Preview](https://cloud.githubusercontent.com/assets/4987015/13727769/6d952c78-e900-11e5-890a-ccfd46996812.png) + +## `` +### Bound Properties + +| Name | Type | Description | +| --- | --- | --- | +| `color` | `"primary" | "accent" | "warn"` | The color palette for the toolbar | + +### Notes +The `md-toolbar` component will use by default the background palette. + +### Examples +A basic toolbar would have the following markup. +```html + + My Application Title + +``` + +Toolbars can also have multiple rows.
+Multiple rows inside of a `md-toolbar` can be added by appending as many as needed `` elements. + +```html + + First Row + + + Second Row + + + + Third Row + + +``` + +### Alignment +The alignment inside of a toolbar row can be easily done by using the flexbox layout.
+For example, the following markup aligns the items on the `right`. + +Custom HTML +```html + + Application Title + + + + + Right Aligned Text + +``` + +Custom SCSS +```scss +.example-fill-remaining-space { + // This fills the remaining space, by using flexbox. + // Every toolbar row uses a flexbox row layout. + flex: 1 1 auto; +} +``` + +Output +![image](https://cloud.githubusercontent.com/assets/4987015/13730760/0864894e-e959-11e5-9312-7f3cb990d80a.png) diff --git a/DEBUG-merge/components/toolbar/package.json b/DEBUG-merge/components/toolbar/package.json new file mode 100644 index 000000000000..ba3b0c1aac63 --- /dev/null +++ b/DEBUG-merge/components/toolbar/package.json @@ -0,0 +1,27 @@ +{ + "name": "@angular2-material/toolbar", + "version": "2.0.0-alpha.5-2", + "description": "Angular 2 Material toolbar", + "main": "./toolbar.js", + "typings": "./toolbar.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components", + "toolbar", + "header" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "@angular2-material/core": "2.0.0-alpha.5-2" + } +} diff --git a/DEBUG-merge/components/toolbar/toolbar.css b/DEBUG-merge/components/toolbar/toolbar.css new file mode 100644 index 000000000000..a90c5f5b17cb --- /dev/null +++ b/DEBUG-merge/components/toolbar/toolbar.css @@ -0,0 +1,47 @@ +/** + * Mixin that creates a new stacking context. + * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + */ +/** + * This mixin hides an element visually. + * That means it's still accessible for screen-readers but not visible in view. + */ +/** + * Forces an element to grow to fit floated contents; used as as an alternative to + * `overflow: hidden;` because it doesn't cut off contents. + */ +/** + * A mixin, which generates temporary ink ripple on a given component. + * When $bindToParent is set to true, it will check for the focused class on the same selector as you included + * that mixin. + * It is also possible to specify the color palette of the temporary ripple. By default it uses the + * accent palette for its background. + */ +:host { + display: flex; + box-sizing: border-box; + width: 100%; + min-height: 64px; + font-size: 20px; + font-weight: 400; + font-family: Roboto, "Helvetica Neue", sans-serif; + padding: 0 16px; + flex-direction: column; + background: whitesmoke; + color: rgba(0, 0, 0, 0.87); } + :host.md-primary { + background: #009688; + color: white; } + :host.md-accent { + background: #9c27b0; + color: rgba(255, 255, 255, 0.870588); } + :host.md-warn { + background: #f44336; + color: white; } + :host md-toolbar-row { + display: flex; + box-sizing: border-box; + width: 100%; + height: 64px; + flex-direction: row; + align-items: center; } diff --git a/DEBUG-merge/components/toolbar/toolbar.d.ts b/DEBUG-merge/components/toolbar/toolbar.d.ts new file mode 100644 index 000000000000..a369fd9e77c7 --- /dev/null +++ b/DEBUG-merge/components/toolbar/toolbar.d.ts @@ -0,0 +1,12 @@ +import { Renderer } from '@angular/core'; +import { ElementRef } from '@angular/core'; +export declare class MdToolbar { + private elementRef; + private renderer; + private _color; + constructor(elementRef: ElementRef, renderer: Renderer); + color: string; + private _updateColor(newColor); + private _setElementColor(color, isAdd); +} +export declare const MD_TOOLBAR_DIRECTIVES: typeof MdToolbar[]; diff --git a/DEBUG-merge/components/toolbar/toolbar.html b/DEBUG-merge/components/toolbar/toolbar.html new file mode 100644 index 000000000000..9a0b3df0b388 --- /dev/null +++ b/DEBUG-merge/components/toolbar/toolbar.html @@ -0,0 +1,6 @@ +
+ + + + +
\ No newline at end of file diff --git a/DEBUG-merge/components/toolbar/toolbar.js b/DEBUG-merge/components/toolbar/toolbar.js new file mode 100644 index 000000000000..c189d6c5ca98 --- /dev/null +++ b/DEBUG-merge/components/toolbar/toolbar.js @@ -0,0 +1,57 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var core_2 = require('@angular/core'); +var core_3 = require('@angular/core'); +var MdToolbar = (function () { + function MdToolbar(elementRef, renderer) { + this.elementRef = elementRef; + this.renderer = renderer; + } + Object.defineProperty(MdToolbar.prototype, "color", { + get: function () { + return this._color; + }, + set: function (value) { + this._updateColor(value); + }, + enumerable: true, + configurable: true + }); + MdToolbar.prototype._updateColor = function (newColor) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; + }; + MdToolbar.prototype._setElementColor = function (color, isAdd) { + if (color != null && color != '') { + this.renderer.setElementClass(this.elementRef.nativeElement, "md-" + color, isAdd); + } + }; + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MdToolbar.prototype, "color", null); + MdToolbar = __decorate([ + core_1.Component({ + moduleId: module.id, + selector: 'md-toolbar', + templateUrl: 'toolbar.html', + styleUrls: ['toolbar.css'], + changeDetection: core_1.ChangeDetectionStrategy.OnPush, + }), + __metadata('design:paramtypes', [core_3.ElementRef, core_2.Renderer]) + ], MdToolbar); + return MdToolbar; +}()); +exports.MdToolbar = MdToolbar; +exports.MD_TOOLBAR_DIRECTIVES = [MdToolbar]; +//# sourceMappingURL=../../../../components/toolbar/toolbar.js.map \ No newline at end of file diff --git a/DEBUG-merge/components/toolbar/toolbar.js.map b/DEBUG-merge/components/toolbar/toolbar.js.map new file mode 100644 index 000000000000..783a39953c28 --- /dev/null +++ b/DEBUG-merge/components/toolbar/toolbar.js.map @@ -0,0 +1 @@ +{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../src/demo-app/components/toolbar/toolbar.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAIO,eAAe,CAAC,CAAA;AACvB,qBAAuB,eAAe,CAAC,CAAA;AACvC,qBAAyB,eAAe,CAAC,CAAA;AASzC;IAIE,mBAAoB,UAAsB,EAAU,QAAkB;QAAlD,eAAU,GAAV,UAAU,CAAY;QAAU,aAAQ,GAAR,QAAQ,CAAU;IAAI,CAAC;IAG3E,sBAAI,4BAAK;aAAT;YACE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;QACrB,CAAC;aAED,UAAU,KAAa;YACrB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;;;OAJA;IAMO,gCAAY,GAApB,UAAqB,QAAgB;QACnC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QACtC,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;IACzB,CAAC;IAEO,oCAAgB,GAAxB,UAAyB,KAAa,EAAE,KAAc;QACpD,EAAE,CAAC,CAAC,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC;YACjC,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,QAAM,KAAO,EAAE,KAAK,CAAC,CAAC;QACrF,CAAC;IACH,CAAC;IAnBD;QAAC,YAAK,EAAE;;0CAAA;IAbV;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,YAAY;YACtB,WAAW,EAAE,cAAc;YAC3B,SAAS,EAAE,CAAC,aAAa,CAAC;YAC1B,eAAe,EAAE,8BAAuB,CAAC,MAAM;SAChD,CAAC;;iBAAA;IA4BF,gBAAC;AAAD,CAAC,AA3BD,IA2BC;AA3BY,iBAAS,YA2BrB,CAAA;AAEY,6BAAqB,GAAG,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n Input\n} from '@angular/core';\nimport {Renderer} from '@angular/core';\nimport {ElementRef} from '@angular/core';\n\n@Component({\n moduleId: module.id,\n selector: 'md-toolbar',\n templateUrl: 'toolbar.html',\n styleUrls: ['toolbar.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MdToolbar {\n\n private _color: string;\n\n constructor(private elementRef: ElementRef, private renderer: Renderer) { }\n\n @Input()\n get color(): string {\n return this._color;\n }\n\n set color(value: string) {\n this._updateColor(value);\n }\n\n private _updateColor(newColor: string) {\n this._setElementColor(this._color, false);\n this._setElementColor(newColor, true);\n this._color = newColor;\n }\n\n private _setElementColor(color: string, isAdd: boolean) {\n if (color != null && color != '') {\n this.renderer.setElementClass(this.elementRef.nativeElement, `md-${color}`, isAdd);\n }\n }\n\n}\n\nexport const MD_TOOLBAR_DIRECTIVES = [MdToolbar];\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/README.md b/DEBUG-merge/core/README.md new file mode 100644 index 000000000000..fca159182db0 --- /dev/null +++ b/DEBUG-merge/core/README.md @@ -0,0 +1,2 @@ +Core library code for other `@angular2-material` components. +This should be added as a dependency for any project using the components. diff --git a/DEBUG-merge/core/a11y/README.md b/DEBUG-merge/core/a11y/README.md new file mode 100644 index 000000000000..9c2e99a6e441 --- /dev/null +++ b/DEBUG-merge/core/a11y/README.md @@ -0,0 +1,30 @@ +# MdLiveAnnouncer +`MdLiveAnnouncer` is a service, which announces messages to several screenreaders. + +### Methods + +| Name | Description | +| --- | --- | +| `announce(message, politeness)` | This announces a text message to the supported screenreaders.

The politeness parameter sets the `aria-live` attribute on the announcer element | + +### Examples +The service can be injected in a component. +```ts +@Component({ + selector: 'my-component' + providers: [MdLiveAnnouncer] +}) +export class MyComponent { + + constructor(live: MdLiveAnnouncer) { + live.announce("Hey Google"); + } + +} +``` + +### Supported Screenreaders +- JAWS (Windows) +- NVDA (Windows) +- VoiceOver (OSX and iOS) +- TalkBack (Android) diff --git a/DEBUG-merge/core/a11y/live-announcer.css b/DEBUG-merge/core/a11y/live-announcer.css new file mode 100644 index 000000000000..3b5771e9d4b4 --- /dev/null +++ b/DEBUG-merge/core/a11y/live-announcer.css @@ -0,0 +1,29 @@ +/** + * Mixin that creates a new stacking context. + * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + */ +/** + * This mixin hides an element visually. + * That means it's still accessible for screen-readers but not visible in view. + */ +/** + * Forces an element to grow to fit floated contents; used as as an alternative to + * `overflow: hidden;` because it doesn't cut off contents. + */ +/** + * A mixin, which generates temporary ink ripple on a given component. + * When $bindToParent is set to true, it will check for the focused class on the same selector as you included + * that mixin. + * It is also possible to specify the color palette of the temporary ripple. By default it uses the + * accent palette for its background. + */ +.md-live-announcer { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + text-transform: none; + width: 1px; } diff --git a/DEBUG-merge/core/a11y/live-announcer.d.ts b/DEBUG-merge/core/a11y/live-announcer.d.ts new file mode 100644 index 000000000000..6e4725ba0374 --- /dev/null +++ b/DEBUG-merge/core/a11y/live-announcer.d.ts @@ -0,0 +1,13 @@ +import { OpaqueToken } from '@angular/core'; +export declare const LIVE_ANNOUNCER_ELEMENT_TOKEN: OpaqueToken; +export declare type AriaLivePoliteness = 'off' | 'polite' | 'assertive'; +export declare class MdLiveAnnouncer { + private _liveElement; + constructor(elementToken: Element); + /** + * @param message Message to be announced to the screenreader + * @param politeness The politeness of the announcer element. + */ + announce(message: string, politeness?: AriaLivePoliteness): void; + private _createLiveElement(); +} diff --git a/DEBUG-merge/core/a11y/live-announcer.js b/DEBUG-merge/core/a11y/live-announcer.js new file mode 100644 index 000000000000..e4539eb0f205 --- /dev/null +++ b/DEBUG-merge/core/a11y/live-announcer.js @@ -0,0 +1,54 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var __param = (this && this.__param) || function (paramIndex, decorator) { + return function (target, key) { decorator(target, key, paramIndex); } +}; +var core_1 = require('@angular/core'); +exports.LIVE_ANNOUNCER_ELEMENT_TOKEN = new core_1.OpaqueToken('mdLiveAnnouncerElement'); +var MdLiveAnnouncer = (function () { + function MdLiveAnnouncer(elementToken) { + this._liveElement = elementToken || this._createLiveElement(); + } + /** + * @param message Message to be announced to the screenreader + * @param politeness The politeness of the announcer element. + */ + MdLiveAnnouncer.prototype.announce = function (message, politeness) { + var _this = this; + if (politeness === void 0) { politeness = 'polite'; } + this._liveElement.textContent = ''; + // TODO: ensure changing the politeness works on all environments we support. + this._liveElement.setAttribute('aria-live', politeness); + // This 100ms timeout is necessary for some browser + screen-reader combinations: + // - Both JAWS and NVDA over IE11 will not announce anything without a non-zero timeout. + // - With Chrome and IE11 with NVDA or JAWS, a repeated (identical) message won't be read a + // second time without clearing and then using a non-zero delay. + // (using JAWS 17 at time of this writing). + setTimeout(function () { return _this._liveElement.textContent = message; }, 100); + }; + MdLiveAnnouncer.prototype._createLiveElement = function () { + var liveEl = document.createElement('div'); + liveEl.classList.add('md-live-announcer'); + liveEl.setAttribute('aria-atomic', 'true'); + liveEl.setAttribute('aria-live', 'polite'); + document.body.appendChild(liveEl); + return liveEl; + }; + MdLiveAnnouncer = __decorate([ + core_1.Injectable(), + __param(0, core_1.Optional()), + __param(0, core_1.Inject(exports.LIVE_ANNOUNCER_ELEMENT_TOKEN)), + __metadata('design:paramtypes', [Element]) + ], MdLiveAnnouncer); + return MdLiveAnnouncer; +}()); +exports.MdLiveAnnouncer = MdLiveAnnouncer; +//# sourceMappingURL=../../../../core/a11y/live-announcer.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/a11y/live-announcer.js.map b/DEBUG-merge/core/a11y/live-announcer.js.map new file mode 100644 index 000000000000..bf2a83355e28 --- /dev/null +++ b/DEBUG-merge/core/a11y/live-announcer.js.map @@ -0,0 +1 @@ +{"version":3,"file":"live-announcer.js","sourceRoot":"","sources":["../../src/demo-app/core/a11y/live-announcer.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,qBAKO,eAAe,CAAC,CAAA;AAEV,oCAA4B,GAAI,IAAI,kBAAW,CAAC,wBAAwB,CAAC,CAAC;AAKvF;IAIE,yBAA8D,YAAqB;QACjF,IAAI,CAAC,YAAY,GAAG,YAAY,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAChE,CAAC;IAED;;;OAGG;IACH,kCAAQ,GAAR,UAAS,OAAe,EAAE,UAAyC;QAAnE,iBAYC;QAZyB,0BAAyC,GAAzC,qBAAyC;QACjE,IAAI,CAAC,YAAY,CAAC,WAAW,GAAG,EAAE,CAAC;QAEnC,6EAA6E;QAC7E,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;QAExD,iFAAiF;QACjF,wFAAwF;QACxF,2FAA2F;QAC3F,kEAAkE;QAClE,2CAA2C;QAC3C,UAAU,CAAC,cAAM,OAAA,KAAI,CAAC,YAAY,CAAC,WAAW,GAAG,OAAO,EAAvC,CAAuC,EAAE,GAAG,CAAC,CAAC;IACjE,CAAC;IAEO,4CAAkB,GAA1B;QACE,IAAI,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE3C,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAC1C,MAAM,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QAC3C,MAAM,CAAC,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QAE3C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAElC,MAAM,CAAC,MAAM,CAAC;IAChB,CAAC;IArCH;QAAC,iBAAU,EAAE;mBAKE,eAAQ,EAAE;mBAAE,aAAM,CAAC,oCAA4B,CAAC;;uBALlD;IAuCb,sBAAC;AAAD,CAAC,AAtCD,IAsCC;AAtCY,uBAAe,kBAsC3B,CAAA","sourcesContent":["import {\n Injectable,\n OpaqueToken,\n Optional,\n Inject\n} from '@angular/core';\n\nexport const LIVE_ANNOUNCER_ELEMENT_TOKEN = new OpaqueToken('mdLiveAnnouncerElement');\n\nexport type AriaLivePoliteness = 'off' | 'polite' | 'assertive';\n\n@Injectable()\nexport class MdLiveAnnouncer {\n\n private _liveElement: Element;\n\n constructor(@Optional() @Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN) elementToken: Element) {\n this._liveElement = elementToken || this._createLiveElement();\n }\n\n /**\n * @param message Message to be announced to the screenreader\n * @param politeness The politeness of the announcer element.\n */\n announce(message: string, politeness: AriaLivePoliteness = 'polite'): void {\n this._liveElement.textContent = '';\n\n // TODO: ensure changing the politeness works on all environments we support.\n this._liveElement.setAttribute('aria-live', politeness);\n\n // This 100ms timeout is necessary for some browser + screen-reader combinations:\n // - Both JAWS and NVDA over IE11 will not announce anything without a non-zero timeout.\n // - With Chrome and IE11 with NVDA or JAWS, a repeated (identical) message won't be read a\n // second time without clearing and then using a non-zero delay.\n // (using JAWS 17 at time of this writing).\n setTimeout(() => this._liveElement.textContent = message, 100);\n }\n\n private _createLiveElement(): Element {\n let liveEl = document.createElement('div');\n\n liveEl.classList.add('md-live-announcer');\n liveEl.setAttribute('aria-atomic', 'true');\n liveEl.setAttribute('aria-live', 'polite');\n\n document.body.appendChild(liveEl);\n\n return liveEl;\n }\n\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/annotations/field-value.d.ts b/DEBUG-merge/core/annotations/field-value.d.ts new file mode 100644 index 000000000000..496892f7693c --- /dev/null +++ b/DEBUG-merge/core/annotations/field-value.d.ts @@ -0,0 +1,15 @@ +/** + * Annotation Factory that allows HTML style boolean attributes. For example, + * a field declared like this: + + * @Directive({ selector: 'component' }) class MyComponent { + * @Input() @BooleanFieldValueFactory() myField: boolean; + * } + * + * You could set it up this way: + * + * or: + * + */ +declare function booleanFieldValueFactory(): (target: any, key: string) => void; +export { booleanFieldValueFactory as BooleanFieldValue }; diff --git a/DEBUG-merge/core/annotations/field-value.js b/DEBUG-merge/core/annotations/field-value.js new file mode 100644 index 000000000000..46092bf9cc31 --- /dev/null +++ b/DEBUG-merge/core/annotations/field-value.js @@ -0,0 +1,29 @@ +"use strict"; +/** + * Annotation Factory that allows HTML style boolean attributes. For example, + * a field declared like this: + + * @Directive({ selector: 'component' }) class MyComponent { + * @Input() @BooleanFieldValueFactory() myField: boolean; + * } + * + * You could set it up this way: + * + * or: + * + */ +function booleanFieldValueFactory() { + return function booleanFieldValueMetadata(target, key) { + var defaultValue = target[key]; + var localKey = "__md_private_symbol_" + key; + target[localKey] = defaultValue; + Object.defineProperty(target, key, { + get: function () { return this[localKey]; }, + set: function (value) { + this[localKey] = value != null && "" + value !== 'false'; + } + }); + }; +} +exports.BooleanFieldValue = booleanFieldValueFactory; +//# sourceMappingURL=../../../../core/annotations/field-value.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/annotations/field-value.js.map b/DEBUG-merge/core/annotations/field-value.js.map new file mode 100644 index 000000000000..eec3024222a9 --- /dev/null +++ b/DEBUG-merge/core/annotations/field-value.js.map @@ -0,0 +1 @@ +{"version":3,"file":"field-value.js","sourceRoot":"","sources":["../../src/demo-app/core/annotations/field-value.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;GAYG;AACH;IACE,MAAM,CAAC,mCAAmC,MAAW,EAAE,GAAW;QAChE,IAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QACjC,IAAM,QAAQ,GAAG,yBAAuB,GAAK,CAAC;QAC9C,MAAM,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC;QAEhC,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,GAAG,EAAE;YACjC,GAAG,gBAAK,MAAM,CAAO,IAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;YACvC,GAAG,YAAC,KAAc;gBACV,IAAK,CAAC,QAAQ,CAAC,GAAG,KAAK,IAAI,IAAI,IAAI,KAAG,KAAO,KAAK,OAAO,CAAC;YAClE,CAAC;SACF,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC;AAGoC,yBAAiB,4BAHrD;AAGwD","sourcesContent":["/**\n * Annotation Factory that allows HTML style boolean attributes. For example,\n * a field declared like this:\n\n * @Directive({ selector: 'component' }) class MyComponent {\n * @Input() @BooleanFieldValueFactory() myField: boolean;\n * }\n *\n * You could set it up this way:\n * \n * or:\n * \n */\nfunction booleanFieldValueFactory() {\n return function booleanFieldValueMetadata(target: any, key: string): void {\n const defaultValue = target[key];\n const localKey = `__md_private_symbol_${key}`;\n target[localKey] = defaultValue;\n\n Object.defineProperty(target, key, {\n get() { return (this)[localKey]; },\n set(value: boolean) {\n (this)[localKey] = value != null && `${value}` !== 'false';\n }\n });\n };\n}\n\n\nexport { booleanFieldValueFactory as BooleanFieldValue };\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/async/promise-completer.d.ts b/DEBUG-merge/core/async/promise-completer.d.ts new file mode 100644 index 000000000000..db377c97c40d --- /dev/null +++ b/DEBUG-merge/core/async/promise-completer.d.ts @@ -0,0 +1,6 @@ +export declare class PromiseCompleter { + promise: Promise; + resolve: (value?: R | PromiseLike) => void; + reject: (error?: any, stackTrace?: string) => void; + constructor(); +} diff --git a/DEBUG-merge/core/async/promise-completer.js b/DEBUG-merge/core/async/promise-completer.js new file mode 100644 index 000000000000..49fece6323d5 --- /dev/null +++ b/DEBUG-merge/core/async/promise-completer.js @@ -0,0 +1,13 @@ +"use strict"; +var PromiseCompleter = (function () { + function PromiseCompleter() { + var _this = this; + this.promise = new Promise(function (res, rej) { + _this.resolve = res; + _this.reject = rej; + }); + } + return PromiseCompleter; +}()); +exports.PromiseCompleter = PromiseCompleter; +//# sourceMappingURL=../../../../core/async/promise-completer.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/async/promise-completer.js.map b/DEBUG-merge/core/async/promise-completer.js.map new file mode 100644 index 000000000000..253db6153e5c --- /dev/null +++ b/DEBUG-merge/core/async/promise-completer.js.map @@ -0,0 +1 @@ +{"version":3,"file":"promise-completer.js","sourceRoot":"","sources":["../../src/demo-app/core/async/promise-completer.ts"],"names":[],"mappings":";AACA;IAKE;QALF,iBAWC;QALG,IAAI,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,UAAC,GAAG,EAAE,GAAG;YAClC,KAAI,CAAC,OAAO,GAAG,GAAG,CAAC;YACnB,KAAI,CAAC,MAAM,GAAG,GAAG,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC;IACH,uBAAC;AAAD,CAAC,AAXD,IAWC;AAXY,wBAAgB,mBAW5B,CAAA","sourcesContent":["\nexport class PromiseCompleter {\n promise: Promise;\n resolve: (value?: R | PromiseLike) => void;\n reject: (error?: any, stackTrace?: string) => void;\n\n constructor() {\n this.promise = new Promise((res, rej) => {\n this.resolve = res;\n this.reject = rej;\n });\n }\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/coordination/unique-selection-dispatcher.d.ts b/DEBUG-merge/core/coordination/unique-selection-dispatcher.d.ts new file mode 100644 index 000000000000..94ecb5469189 --- /dev/null +++ b/DEBUG-merge/core/coordination/unique-selection-dispatcher.d.ts @@ -0,0 +1,17 @@ +export declare type MdUniqueSelectionDispatcherListener = (id: string, name: string) => void; +/** + * Class to coordinate unique selection based on name. + * Intended to be consumed as an Angular service. + * This service is needed because native radio change events are only fired on the item currently + * being selected, and we still need to uncheck the previous selection. + * + * This service does not *store* any IDs and names because they may change at any time, so it is + * less error-prone if they are simply passed through when the events occur. + */ +export declare class MdUniqueSelectionDispatcher { + private _listeners; + /** Notify other items that selection for the given name has been set. */ + notify(id: string, name: string): void; + /** Listen for future changes to item selection. */ + listen(listener: MdUniqueSelectionDispatcherListener): void; +} diff --git a/DEBUG-merge/core/coordination/unique-selection-dispatcher.js b/DEBUG-merge/core/coordination/unique-selection-dispatcher.js new file mode 100644 index 000000000000..ada0b9b6b298 --- /dev/null +++ b/DEBUG-merge/core/coordination/unique-selection-dispatcher.js @@ -0,0 +1,43 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +/** + * Class to coordinate unique selection based on name. + * Intended to be consumed as an Angular service. + * This service is needed because native radio change events are only fired on the item currently + * being selected, and we still need to uncheck the previous selection. + * + * This service does not *store* any IDs and names because they may change at any time, so it is + * less error-prone if they are simply passed through when the events occur. + */ +var MdUniqueSelectionDispatcher = (function () { + function MdUniqueSelectionDispatcher() { + this._listeners = []; + } + /** Notify other items that selection for the given name has been set. */ + MdUniqueSelectionDispatcher.prototype.notify = function (id, name) { + for (var _i = 0, _a = this._listeners; _i < _a.length; _i++) { + var listener = _a[_i]; + listener(id, name); + } + }; + /** Listen for future changes to item selection. */ + MdUniqueSelectionDispatcher.prototype.listen = function (listener) { + this._listeners.push(listener); + }; + MdUniqueSelectionDispatcher = __decorate([ + core_1.Injectable(), + __metadata('design:paramtypes', []) + ], MdUniqueSelectionDispatcher); + return MdUniqueSelectionDispatcher; +}()); +exports.MdUniqueSelectionDispatcher = MdUniqueSelectionDispatcher; +//# sourceMappingURL=../../../../core/coordination/unique-selection-dispatcher.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/coordination/unique-selection-dispatcher.js.map b/DEBUG-merge/core/coordination/unique-selection-dispatcher.js.map new file mode 100644 index 000000000000..3def78c0bfd4 --- /dev/null +++ b/DEBUG-merge/core/coordination/unique-selection-dispatcher.js.map @@ -0,0 +1 @@ +{"version":3,"file":"unique-selection-dispatcher.js","sourceRoot":"","sources":["../../src/demo-app/core/coordination/unique-selection-dispatcher.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAAyB,eAAe,CAAC,CAAA;AAMzC;;;;;;;;GAQG;AAEH;IAAA;QACU,eAAU,GAA0C,EAAE,CAAC;IAajE,CAAC;IAXC,yEAAyE;IACzE,4CAAM,GAAN,UAAO,EAAU,EAAE,IAAY;QAC7B,GAAG,CAAC,CAAiB,UAAe,EAAf,KAAA,IAAI,CAAC,UAAU,EAAf,cAAe,EAAf,IAAe,CAAC;YAAhC,IAAI,QAAQ,SAAA;YACf,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;SACpB;IACH,CAAC;IAED,mDAAmD;IACnD,4CAAM,GAAN,UAAO,QAA6C;QAClD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC;IAdH;QAAC,iBAAU,EAAE;;mCAAA;IAeb,kCAAC;AAAD,CAAC,AAdD,IAcC;AAdY,mCAA2B,8BAcvC,CAAA","sourcesContent":["import {Injectable} from '@angular/core';\n\n\n// Users of the Dispatcher never need to see this type, but TypeScript requires it to be exported.\nexport type MdUniqueSelectionDispatcherListener = (id: string, name: string) => void;\n\n/**\n * Class to coordinate unique selection based on name.\n * Intended to be consumed as an Angular service.\n * This service is needed because native radio change events are only fired on the item currently\n * being selected, and we still need to uncheck the previous selection.\n *\n * This service does not *store* any IDs and names because they may change at any time, so it is\n * less error-prone if they are simply passed through when the events occur.\n */\n@Injectable()\nexport class MdUniqueSelectionDispatcher {\n private _listeners: MdUniqueSelectionDispatcherListener[] = [];\n\n /** Notify other items that selection for the given name has been set. */\n notify(id: string, name: string) {\n for (let listener of this._listeners) {\n listener(id, name);\n }\n }\n\n /** Listen for future changes to item selection. */\n listen(listener: MdUniqueSelectionDispatcherListener) {\n this._listeners.push(listener);\n }\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/core.d.ts b/DEBUG-merge/core/core.d.ts new file mode 100644 index 000000000000..871424e6e68d --- /dev/null +++ b/DEBUG-merge/core/core.d.ts @@ -0,0 +1,10 @@ +export { Dir, LayoutDirection } from './rtl/dir'; +export { Portal, PortalHost, BasePortalHost, ComponentPortal, TemplatePortal } from './portal/portal'; +export { PortalHostDirective, TemplatePortalDirective, PORTAL_DIRECTIVES } from './portal/portal-directives'; +export { DomPortalHost } from './portal/dom-portal-host'; +export { Overlay, OVERLAY_CONTAINER_TOKEN, OVERLAY_PROVIDERS } from './overlay/overlay'; +export { OverlayRef } from './overlay/overlay-ref'; +export { OverlayState } from './overlay/overlay-state'; +export { ConnectedOverlayDirective, OverlayOrigin, OVERLAY_DIRECTIVES } from './overlay/overlay-directives'; +export { MdGestureConfig } from './gestures/MdGestureConfig'; +export { AriaLivePoliteness, MdLiveAnnouncer, LIVE_ANNOUNCER_ELEMENT_TOKEN } from './a11y/live-announcer'; diff --git a/DEBUG-merge/core/core.js b/DEBUG-merge/core/core.js new file mode 100644 index 000000000000..fe3006c48551 --- /dev/null +++ b/DEBUG-merge/core/core.js @@ -0,0 +1,37 @@ +"use strict"; +// RTL +var dir_1 = require('./rtl/dir'); +exports.Dir = dir_1.Dir; +// Portals +var portal_1 = require('./portal/portal'); +exports.Portal = portal_1.Portal; +exports.BasePortalHost = portal_1.BasePortalHost; +exports.ComponentPortal = portal_1.ComponentPortal; +exports.TemplatePortal = portal_1.TemplatePortal; +var portal_directives_1 = require('./portal/portal-directives'); +exports.PortalHostDirective = portal_directives_1.PortalHostDirective; +exports.TemplatePortalDirective = portal_directives_1.TemplatePortalDirective; +exports.PORTAL_DIRECTIVES = portal_directives_1.PORTAL_DIRECTIVES; +var dom_portal_host_1 = require('./portal/dom-portal-host'); +exports.DomPortalHost = dom_portal_host_1.DomPortalHost; +// Overlay +var overlay_1 = require('./overlay/overlay'); +exports.Overlay = overlay_1.Overlay; +exports.OVERLAY_CONTAINER_TOKEN = overlay_1.OVERLAY_CONTAINER_TOKEN; +exports.OVERLAY_PROVIDERS = overlay_1.OVERLAY_PROVIDERS; +var overlay_ref_1 = require('./overlay/overlay-ref'); +exports.OverlayRef = overlay_ref_1.OverlayRef; +var overlay_state_1 = require('./overlay/overlay-state'); +exports.OverlayState = overlay_state_1.OverlayState; +var overlay_directives_1 = require('./overlay/overlay-directives'); +exports.ConnectedOverlayDirective = overlay_directives_1.ConnectedOverlayDirective; +exports.OverlayOrigin = overlay_directives_1.OverlayOrigin; +exports.OVERLAY_DIRECTIVES = overlay_directives_1.OVERLAY_DIRECTIVES; +// Gestures +var MdGestureConfig_1 = require('./gestures/MdGestureConfig'); +exports.MdGestureConfig = MdGestureConfig_1.MdGestureConfig; +// a11y +var live_announcer_1 = require('./a11y/live-announcer'); +exports.MdLiveAnnouncer = live_announcer_1.MdLiveAnnouncer; +exports.LIVE_ANNOUNCER_ELEMENT_TOKEN = live_announcer_1.LIVE_ANNOUNCER_ELEMENT_TOKEN; +//# sourceMappingURL=../../../core/core.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/core.js.map b/DEBUG-merge/core/core.js.map new file mode 100644 index 000000000000..b7d6fcb34f31 --- /dev/null +++ b/DEBUG-merge/core/core.js.map @@ -0,0 +1 @@ +{"version":3,"file":"core.js","sourceRoot":"","sources":["../src/demo-app/core/core.ts"],"names":[],"mappings":";AAAA,MAAM;AACN,oBAAmC,WAAW,CAAC;AAAvC,wBAAuC;AAE/C,UAAU;AACV,uBAMO,iBAAiB,CAAC;AALvB,iCAAM;AAEN,iDAAc;AACd,mDAAe;AACf,iDACuB;AACzB,kCAIO,4BAA4B,CAAC;AAHlC,sEAAmB;AACnB,8EAAuB;AACvB,kEACkC;AACpC,gCAA4B,0BAA0B,CAAC;AAA/C,wDAA+C;AAEvD,UAAU;AACV,wBAAkE,mBAAmB,CAAC;AAA9E,oCAAO;AAAE,oEAAuB;AAAE,wDAA4C;AACtF,4BAAyB,uBAAuB,CAAC;AAAzC,8CAAyC;AACjD,8BAA2B,yBAAyB,CAAC;AAA7C,oDAA6C;AACrD,mCAIO,8BAA8B,CAAC;AAHpC,mFAAyB;AACzB,2DAAa;AACb,qEACoC;AAEtC,WAAW;AACX,gCAA8B,4BAA4B,CAAC;AAAnD,4DAAmD;AAE3D,OAAO;AACP,+BAIO,uBAAuB,CAAC;AAF7B,2DAAe;AACf,qFAC6B","sourcesContent":["// RTL\nexport {Dir, LayoutDirection} from './rtl/dir';\n\n// Portals\nexport {\n Portal,\n PortalHost,\n BasePortalHost,\n ComponentPortal,\n TemplatePortal\n} from './portal/portal';\nexport {\n PortalHostDirective,\n TemplatePortalDirective,\n PORTAL_DIRECTIVES\n} from './portal/portal-directives';\nexport {DomPortalHost} from './portal/dom-portal-host';\n\n// Overlay\nexport {Overlay, OVERLAY_CONTAINER_TOKEN, OVERLAY_PROVIDERS} from './overlay/overlay';\nexport {OverlayRef} from './overlay/overlay-ref';\nexport {OverlayState} from './overlay/overlay-state';\nexport {\n ConnectedOverlayDirective,\n OverlayOrigin,\n OVERLAY_DIRECTIVES\n} from './overlay/overlay-directives';\n\n// Gestures\nexport {MdGestureConfig} from './gestures/MdGestureConfig';\n\n// a11y\nexport {\n AriaLivePoliteness,\n MdLiveAnnouncer,\n LIVE_ANNOUNCER_ELEMENT_TOKEN\n} from './a11y/live-announcer';\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/errors/error.d.ts b/DEBUG-merge/core/errors/error.d.ts new file mode 100644 index 000000000000..b679f54c6637 --- /dev/null +++ b/DEBUG-merge/core/errors/error.d.ts @@ -0,0 +1,6 @@ +/** + * Wrapper around Error that sets the error message. + */ +export declare class MdError extends Error { + constructor(value: string); +} diff --git a/DEBUG-merge/core/errors/error.js b/DEBUG-merge/core/errors/error.js new file mode 100644 index 000000000000..a15f7fa1a9db --- /dev/null +++ b/DEBUG-merge/core/errors/error.js @@ -0,0 +1,20 @@ +// TODO(kara): Revisit why error messages are not being properly set. +"use strict"; +var __extends = (this && this.__extends) || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +}; +/** + * Wrapper around Error that sets the error message. + */ +var MdError = (function (_super) { + __extends(MdError, _super); + function MdError(value) { + _super.call(this); + _super.prototype.message = value; + } + return MdError; +}(Error)); +exports.MdError = MdError; +//# sourceMappingURL=../../../../core/errors/error.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/errors/error.js.map b/DEBUG-merge/core/errors/error.js.map new file mode 100644 index 000000000000..d3f2b64f4f56 --- /dev/null +++ b/DEBUG-merge/core/errors/error.js.map @@ -0,0 +1 @@ +{"version":3,"file":"error.js","sourceRoot":"","sources":["../../src/demo-app/core/errors/error.ts"],"names":[],"mappings":"AAAA,qEAAqE;;;;;;;AAErE;;GAEG;AACH;IAA6B,2BAAK;IAChC,iBAAY,KAAa;QACvB,iBAAO,CAAC;QACR,gBAAK,CAAC,OAAO,GAAG,KAAK,CAAC;IACxB,CAAC;IACH,cAAC;AAAD,CAAC,AALD,CAA6B,KAAK,GAKjC;AALY,eAAO,UAKnB,CAAA","sourcesContent":["// TODO(kara): Revisit why error messages are not being properly set.\n\n/**\n * Wrapper around Error that sets the error message.\n */\nexport class MdError extends Error {\n constructor(value: string) {\n super();\n super.message = value;\n }\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/gestures/MdGestureConfig.d.ts b/DEBUG-merge/core/gestures/MdGestureConfig.d.ts new file mode 100644 index 000000000000..b4cb2039aa0a --- /dev/null +++ b/DEBUG-merge/core/gestures/MdGestureConfig.d.ts @@ -0,0 +1,5 @@ +import { HammerGestureConfig } from '@angular/platform-browser'; +export declare class MdGestureConfig extends HammerGestureConfig { + events: string[]; + buildHammer(element: HTMLElement): HammerManager; +} diff --git a/DEBUG-merge/core/gestures/MdGestureConfig.js b/DEBUG-merge/core/gestures/MdGestureConfig.js new file mode 100644 index 000000000000..ed4e3f8fe71c --- /dev/null +++ b/DEBUG-merge/core/gestures/MdGestureConfig.js @@ -0,0 +1,69 @@ +"use strict"; +var __extends = (this && this.__extends) || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +}; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var platform_browser_1 = require('@angular/platform-browser'); +/* Adjusts configuration of our gesture library, Hammer. */ +var MdGestureConfig = (function (_super) { + __extends(MdGestureConfig, _super); + function MdGestureConfig() { + _super.apply(this, arguments); + /* List of new event names to add to the gesture support list */ + this.events = [ + 'drag', + 'dragstart', + 'dragend', + 'dragright', + 'dragleft', + 'longpress', + ]; + } + /* + * Builds Hammer instance manually to add custom recognizers that match the Material Design spec. + * + * Our gesture names come from the Material Design gestures spec: + * https://www.google.com/design/spec/patterns/gestures.html#gestures-touch-mechanics + * + * More information on default recognizers can be found in Hammer docs: + * http://hammerjs.github.io/recognizer-pan/ + * http://hammerjs.github.io/recognizer-press/ + * + * TODO: Confirm threshold numbers with Material Design UX Team + * */ + MdGestureConfig.prototype.buildHammer = function (element) { + var mc = new Hammer(element); + // create custom gesture recognizers + var drag = new Hammer.Pan({ event: 'drag', threshold: 6 }); + var longpress = new Hammer.Press({ event: 'longpress', time: 500 }); + // ensure custom recognizers can coexist with the default gestures (i.e. pan, press, swipe) + var pan = new Hammer.Pan(); + var press = new Hammer.Press(); + var swipe = new Hammer.Swipe(); + drag.recognizeWith(pan); + drag.recognizeWith(swipe); + pan.recognizeWith(swipe); + longpress.recognizeWith(press); + // add customized gestures to Hammer manager + mc.add([drag, pan, swipe, press, longpress]); + return mc; + }; + MdGestureConfig = __decorate([ + core_1.Injectable(), + __metadata('design:paramtypes', []) + ], MdGestureConfig); + return MdGestureConfig; +}(platform_browser_1.HammerGestureConfig)); +exports.MdGestureConfig = MdGestureConfig; +//# sourceMappingURL=../../../../core/gestures/MdGestureConfig.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/gestures/MdGestureConfig.js.map b/DEBUG-merge/core/gestures/MdGestureConfig.js.map new file mode 100644 index 000000000000..646cb55b59be --- /dev/null +++ b/DEBUG-merge/core/gestures/MdGestureConfig.js.map @@ -0,0 +1 @@ +{"version":3,"file":"MdGestureConfig.js","sourceRoot":"","sources":["../../src/demo-app/core/gestures/MdGestureConfig.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,qBAAyB,eAAe,CAAC,CAAA;AACzC,iCAAkC,2BAA2B,CAAC,CAAA;AAE9D,2DAA2D;AAE3D;IAAqC,mCAAmB;IAAxD;QAAqC,8BAAmB;QACtD,gEAAgE;QAChE,WAAM,GAAa;YACjB,MAAM;YACN,WAAW;YACX,SAAS;YACT,WAAW;YACX,UAAU;YACV,WAAW;SACZ,CAAC;IAmCJ,CAAC;IAjCC;;;;;;;;;;;SAWK;IACL,qCAAW,GAAX,UAAY,OAAoB;QAC9B,IAAI,EAAE,GAAG,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC;QAE7B,oCAAoC;QACpC,IAAI,IAAI,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,EAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EAAC,CAAC,CAAC;QACzD,IAAI,SAAS,GAAG,IAAI,MAAM,CAAC,KAAK,CAAC,EAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,EAAC,CAAC,CAAC;QAElE,2FAA2F;QAC3F,IAAI,GAAG,GAAG,IAAI,MAAM,CAAC,GAAG,EAAE,CAAC;QAC3B,IAAI,KAAK,GAAG,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,KAAK,GAAG,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACxB,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1B,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzB,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE/B,4CAA4C;QAC5C,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;QAC7C,MAAM,CAAC,EAAE,CAAC;IACZ,CAAC;IA3CH;QAAC,iBAAU,EAAE;;uBAAA;IA6Cb,sBAAC;AAAD,CAAC,AA5CD,CAAqC,sCAAmB,GA4CvD;AA5CY,uBAAe,kBA4C3B,CAAA","sourcesContent":["import {Injectable} from '@angular/core';\nimport {HammerGestureConfig} from '@angular/platform-browser';\n\n/* Adjusts configuration of our gesture library, Hammer. */\n@Injectable()\nexport class MdGestureConfig extends HammerGestureConfig {\n /* List of new event names to add to the gesture support list */\n events: string[] = [\n 'drag',\n 'dragstart',\n 'dragend',\n 'dragright',\n 'dragleft',\n 'longpress',\n ];\n\n /*\n * Builds Hammer instance manually to add custom recognizers that match the Material Design spec.\n *\n * Our gesture names come from the Material Design gestures spec:\n * https://www.google.com/design/spec/patterns/gestures.html#gestures-touch-mechanics\n *\n * More information on default recognizers can be found in Hammer docs:\n * http://hammerjs.github.io/recognizer-pan/\n * http://hammerjs.github.io/recognizer-press/\n *\n * TODO: Confirm threshold numbers with Material Design UX Team\n * */\n buildHammer(element: HTMLElement) {\n var mc = new Hammer(element);\n\n // create custom gesture recognizers\n var drag = new Hammer.Pan({event: 'drag', threshold: 6});\n var longpress = new Hammer.Press({event: 'longpress', time: 500});\n\n // ensure custom recognizers can coexist with the default gestures (i.e. pan, press, swipe)\n var pan = new Hammer.Pan();\n var press = new Hammer.Press();\n var swipe = new Hammer.Swipe();\n drag.recognizeWith(pan);\n drag.recognizeWith(swipe);\n pan.recognizeWith(swipe);\n longpress.recognizeWith(press);\n\n // add customized gestures to Hammer manager\n mc.add([drag, pan, swipe, press, longpress]);\n return mc;\n }\n\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/line/line.d.ts b/DEBUG-merge/core/line/line.d.ts new file mode 100644 index 000000000000..262455f4ee62 --- /dev/null +++ b/DEBUG-merge/core/line/line.d.ts @@ -0,0 +1,17 @@ +import { Renderer, ElementRef, QueryList } from '@angular/core'; +/** + * Shared directive to count lines inside a text area, such as a list item. + * Line elements can be extracted with a @ContentChildren(MdLine) query, then + * counted by checking the query list's length. + */ +export declare class MdLine { +} +export declare class MdLineSetter { + private _lines; + private _renderer; + private _element; + constructor(_lines: QueryList, _renderer: Renderer, _element: ElementRef); + private _setLineClass(count); + private _resetClasses(); + private _setClass(className, bool); +} diff --git a/DEBUG-merge/core/line/line.js b/DEBUG-merge/core/line/line.js new file mode 100644 index 000000000000..235415dde2ca --- /dev/null +++ b/DEBUG-merge/core/line/line.js @@ -0,0 +1,55 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +/** + * Shared directive to count lines inside a text area, such as a list item. + * Line elements can be extracted with a @ContentChildren(MdLine) query, then + * counted by checking the query list's length. + */ +var MdLine = (function () { + function MdLine() { + } + MdLine = __decorate([ + core_1.Directive({ selector: '[md-line]' }), + __metadata('design:paramtypes', []) + ], MdLine); + return MdLine; +}()); +exports.MdLine = MdLine; +/* Helper that takes a query list of lines and sets the correct class on the host */ +var MdLineSetter = (function () { + function MdLineSetter(_lines, _renderer, _element) { + var _this = this; + this._lines = _lines; + this._renderer = _renderer; + this._element = _element; + this._setLineClass(this._lines.length); + this._lines.changes.subscribe(function () { + _this._setLineClass(_this._lines.length); + }); + } + MdLineSetter.prototype._setLineClass = function (count) { + this._resetClasses(); + if (count === 2 || count === 3) { + this._setClass("md-" + count + "-line", true); + } + }; + MdLineSetter.prototype._resetClasses = function () { + this._setClass('md-2-line', false); + this._setClass('md-3-line', false); + }; + MdLineSetter.prototype._setClass = function (className, bool) { + this._renderer.setElementClass(this._element.nativeElement, className, bool); + }; + return MdLineSetter; +}()); +exports.MdLineSetter = MdLineSetter; +//# sourceMappingURL=../../../../core/line/line.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/line/line.js.map b/DEBUG-merge/core/line/line.js.map new file mode 100644 index 000000000000..17ad5c5e3ff4 --- /dev/null +++ b/DEBUG-merge/core/line/line.js.map @@ -0,0 +1 @@ +{"version":3,"file":"line.js","sourceRoot":"","sources":["../../src/demo-app/core/line/line.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAKO,eAAe,CAAC,CAAA;AAEvB;;;;GAIG;AAEH;IAAA;IAAqB,CAAC;IADtB;QAAC,gBAAS,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;;cAAA;IAChB,aAAC;AAAD,CAAC,AAAtB,IAAsB;AAAT,cAAM,SAAG,CAAA;AAEtB,oFAAoF;AACpF;IACE,sBAAoB,MAAyB,EAAU,SAAmB,EACtD,QAAoB;QAF1C,iBA2BC;QA1BqB,WAAM,GAAN,MAAM,CAAmB;QAAU,cAAS,GAAT,SAAS,CAAU;QACtD,aAAQ,GAAR,QAAQ,CAAY;QACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAEvC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC;YAC5B,KAAI,CAAC,aAAa,CAAC,KAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC;IAGO,oCAAa,GAArB,UAAsB,KAAa;QACjC,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC;YAC/B,IAAI,CAAC,SAAS,CAAC,QAAM,KAAK,UAAO,EAAE,IAAI,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAEO,oCAAa,GAArB;QACE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QACnC,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IACrC,CAAC;IAEO,gCAAS,GAAjB,UAAkB,SAAiB,EAAE,IAAa;QAChD,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;IAC/E,CAAC;IAEH,mBAAC;AAAD,CAAC,AA3BD,IA2BC;AA3BY,oBAAY,eA2BxB,CAAA","sourcesContent":["import {\n Directive,\n Renderer,\n ElementRef,\n QueryList\n} from '@angular/core';\n\n/**\n * Shared directive to count lines inside a text area, such as a list item.\n * Line elements can be extracted with a @ContentChildren(MdLine) query, then\n * counted by checking the query list's length.\n */\n@Directive({ selector: '[md-line]' })\nexport class MdLine {}\n\n/* Helper that takes a query list of lines and sets the correct class on the host */\nexport class MdLineSetter {\n constructor(private _lines: QueryList, private _renderer: Renderer,\n private _element: ElementRef) {\n this._setLineClass(this._lines.length);\n\n this._lines.changes.subscribe(() => {\n this._setLineClass(this._lines.length);\n });\n }\n\n\n private _setLineClass(count: number): void {\n this._resetClasses();\n if (count === 2 || count === 3) {\n this._setClass(`md-${count}-line`, true);\n }\n }\n\n private _resetClasses(): void {\n this._setClass('md-2-line', false);\n this._setClass('md-3-line', false);\n }\n\n private _setClass(className: string, bool: boolean): void {\n this._renderer.setElementClass(this._element.nativeElement, className, bool);\n }\n\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/overlay-container.d.ts b/DEBUG-merge/core/overlay/overlay-container.d.ts new file mode 100644 index 000000000000..d702c379e75e --- /dev/null +++ b/DEBUG-merge/core/overlay/overlay-container.d.ts @@ -0,0 +1,5 @@ +/** + * Create the overlay container element, which is simply a div + * with the 'md-overlay-container' class on the document body. + */ +export declare function createOverlayContainer(): Element; diff --git a/DEBUG-merge/core/overlay/overlay-container.js b/DEBUG-merge/core/overlay/overlay-container.js new file mode 100644 index 000000000000..0ac1e2f449bc --- /dev/null +++ b/DEBUG-merge/core/overlay/overlay-container.js @@ -0,0 +1,13 @@ +"use strict"; +/** + * Create the overlay container element, which is simply a div + * with the 'md-overlay-container' class on the document body. + */ +function createOverlayContainer() { + var container = document.createElement('div'); + container.classList.add('md-overlay-container'); + document.body.appendChild(container); + return container; +} +exports.createOverlayContainer = createOverlayContainer; +//# sourceMappingURL=../../../../core/overlay/overlay-container.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/overlay-container.js.map b/DEBUG-merge/core/overlay/overlay-container.js.map new file mode 100644 index 000000000000..ad703bf10bab --- /dev/null +++ b/DEBUG-merge/core/overlay/overlay-container.js.map @@ -0,0 +1 @@ +{"version":3,"file":"overlay-container.js","sourceRoot":"","sources":["../../src/demo-app/core/overlay/overlay-container.ts"],"names":[],"mappings":";AAEA;;;GAGG;AACH;IACE,IAAI,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;IAChD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACrC,MAAM,CAAC,SAAS,CAAC;AACnB,CAAC;AALe,8BAAsB,yBAKrC,CAAA","sourcesContent":["\n\n/**\n * Create the overlay container element, which is simply a div\n * with the 'md-overlay-container' class on the document body.\n */\nexport function createOverlayContainer(): Element {\n let container = document.createElement('div');\n container.classList.add('md-overlay-container');\n document.body.appendChild(container);\n return container;\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/overlay-directives.d.ts b/DEBUG-merge/core/overlay/overlay-directives.d.ts new file mode 100644 index 000000000000..35efb6af90d3 --- /dev/null +++ b/DEBUG-merge/core/overlay/overlay-directives.d.ts @@ -0,0 +1,34 @@ +import { TemplateRef, ViewContainerRef, OnInit, OnDestroy, ElementRef } from '@angular/core'; +import { Overlay } from './overlay'; +import { OverlayRef } from './overlay-ref'; +import { ConnectionPositionPair } from './position/connected-position'; +/** + * Directive to facilitate declarative creation of an Overlay using a ConnectedPositionStrategy. + */ +export declare class ConnectedOverlayDirective implements OnInit, OnDestroy { + private _overlay; + private _overlayRef; + private _templatePortal; + origin: OverlayOrigin; + positions: ConnectionPositionPair[]; + constructor(_overlay: Overlay, templateRef: TemplateRef, viewContainerRef: ViewContainerRef); + overlayRef: OverlayRef; + /** TODO: internal */ + ngOnInit(): void; + /** TODO: internal */ + ngOnDestroy(): void; + /** Creates an overlay and attaches this directive's template to it. */ + private _createOverlay(); + /** Destroys the overlay created by this directive. */ + private _destroyOverlay(); +} +/** + * Directive applied to an element to make it usable as an origin for an Overlay using a + * ConnectedPositionStrategy. + */ +export declare class OverlayOrigin { + private _elementRef; + constructor(_elementRef: ElementRef); + elementRef: ElementRef; +} +export declare const OVERLAY_DIRECTIVES: (typeof ConnectedOverlayDirective | typeof OverlayOrigin)[]; diff --git a/DEBUG-merge/core/overlay/overlay-directives.js b/DEBUG-merge/core/overlay/overlay-directives.js new file mode 100644 index 000000000000..f0e4fa9a6763 --- /dev/null +++ b/DEBUG-merge/core/overlay/overlay-directives.js @@ -0,0 +1,106 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +var overlay_1 = require('./overlay'); +var portal_1 = require('../portal/portal'); +var overlay_state_1 = require('./overlay-state'); +var connected_position_1 = require('./position/connected-position'); +/** Default set of positions for the overlay. Follows the behavior of a dropdown. */ +var defaultPositionList = [ + new connected_position_1.ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }), + new connected_position_1.ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }), +]; +/** + * Directive to facilitate declarative creation of an Overlay using a ConnectedPositionStrategy. + */ +var ConnectedOverlayDirective = (function () { + // TODO(jelbourn): inputs for size, scroll behavior, animation, etc. + function ConnectedOverlayDirective(_overlay, templateRef, viewContainerRef) { + this._overlay = _overlay; + this._templatePortal = new portal_1.TemplatePortal(templateRef, viewContainerRef); + } + Object.defineProperty(ConnectedOverlayDirective.prototype, "overlayRef", { + get: function () { + return this._overlayRef; + }, + enumerable: true, + configurable: true + }); + /** TODO: internal */ + ConnectedOverlayDirective.prototype.ngOnInit = function () { + this._createOverlay(); + }; + /** TODO: internal */ + ConnectedOverlayDirective.prototype.ngOnDestroy = function () { + this._destroyOverlay(); + }; + /** Creates an overlay and attaches this directive's template to it. */ + ConnectedOverlayDirective.prototype._createOverlay = function () { + var _this = this; + if (!this.positions || !this.positions.length) { + this.positions = defaultPositionList; + } + var overlayConfig = new overlay_state_1.OverlayState(); + overlayConfig.positionStrategy = + this._overlay.position().connectedTo(this.origin.elementRef, { originX: this.positions[0].overlayX, originY: this.positions[0].originY }, { overlayX: this.positions[0].overlayX, overlayY: this.positions[0].overlayY }); + this._overlay.create(overlayConfig).then(function (ref) { + _this._overlayRef = ref; + _this._overlayRef.attach(_this._templatePortal); + }); + }; + /** Destroys the overlay created by this directive. */ + ConnectedOverlayDirective.prototype._destroyOverlay = function () { + this._overlayRef.dispose(); + }; + __decorate([ + core_1.Input(), + __metadata('design:type', OverlayOrigin) + ], ConnectedOverlayDirective.prototype, "origin", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Array) + ], ConnectedOverlayDirective.prototype, "positions", void 0); + ConnectedOverlayDirective = __decorate([ + core_1.Directive({ + selector: '[connected-overlay]' + }), + __metadata('design:paramtypes', [overlay_1.Overlay, core_1.TemplateRef, core_1.ViewContainerRef]) + ], ConnectedOverlayDirective); + return ConnectedOverlayDirective; +}()); +exports.ConnectedOverlayDirective = ConnectedOverlayDirective; +/** + * Directive applied to an element to make it usable as an origin for an Overlay using a + * ConnectedPositionStrategy. + */ +var OverlayOrigin = (function () { + function OverlayOrigin(_elementRef) { + this._elementRef = _elementRef; + } + Object.defineProperty(OverlayOrigin.prototype, "elementRef", { + get: function () { + return this._elementRef; + }, + enumerable: true, + configurable: true + }); + OverlayOrigin = __decorate([ + core_1.Directive({ + selector: '[overlay-origin]', + exportAs: 'overlayOrigin', + }), + __metadata('design:paramtypes', [core_1.ElementRef]) + ], OverlayOrigin); + return OverlayOrigin; +}()); +exports.OverlayOrigin = OverlayOrigin; +exports.OVERLAY_DIRECTIVES = [ConnectedOverlayDirective, OverlayOrigin]; +//# sourceMappingURL=../../../../core/overlay/overlay-directives.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/overlay-directives.js.map b/DEBUG-merge/core/overlay/overlay-directives.js.map new file mode 100644 index 000000000000..668674783cb3 --- /dev/null +++ b/DEBUG-merge/core/overlay/overlay-directives.js.map @@ -0,0 +1 @@ +{"version":3,"file":"overlay-directives.js","sourceRoot":"","sources":["../../src/demo-app/core/overlay/overlay-directives.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Directive,\n TemplateRef,\n ViewContainerRef,\n OnInit,\n Input,\n OnDestroy,\n ElementRef\n} from '@angular/core';\nimport {Overlay} from './overlay';\nimport {OverlayRef} from './overlay-ref';\nimport {TemplatePortal} from '../portal/portal';\nimport {OverlayState} from './overlay-state';\nimport {ConnectionPositionPair} from './position/connected-position';\n\n/** Default set of positions for the overlay. Follows the behavior of a dropdown. */\nlet defaultPositionList = [\n new ConnectionPositionPair(\n {originX: 'start', originY: 'bottom'},\n {overlayX: 'start', overlayY: 'top'}),\n new ConnectionPositionPair(\n {originX: 'start', originY: 'top'},\n {overlayX: 'start', overlayY: 'bottom'}),\n];\n\n\n/**\n * Directive to facilitate declarative creation of an Overlay using a ConnectedPositionStrategy.\n */\n@Directive({\n selector: '[connected-overlay]'\n})\nexport class ConnectedOverlayDirective implements OnInit, OnDestroy {\n private _overlayRef: OverlayRef;\n private _templatePortal: TemplatePortal;\n\n @Input() origin: OverlayOrigin;\n @Input() positions: ConnectionPositionPair[];\n\n // TODO(jelbourn): inputs for size, scroll behavior, animation, etc.\n\n constructor(\n private _overlay: Overlay,\n templateRef: TemplateRef,\n viewContainerRef: ViewContainerRef) {\n this._templatePortal = new TemplatePortal(templateRef, viewContainerRef);\n }\n\n get overlayRef() {\n return this._overlayRef;\n }\n\n /** TODO: internal */\n ngOnInit() {\n this._createOverlay();\n }\n\n /** TODO: internal */\n ngOnDestroy() {\n this._destroyOverlay();\n }\n\n /** Creates an overlay and attaches this directive's template to it. */\n private _createOverlay() {\n if (!this.positions || !this.positions.length) {\n this.positions = defaultPositionList;\n }\n\n let overlayConfig = new OverlayState();\n overlayConfig.positionStrategy =\n this._overlay.position().connectedTo(\n this.origin.elementRef,\n {originX: this.positions[0].overlayX, originY: this.positions[0].originY},\n {overlayX: this.positions[0].overlayX, overlayY: this.positions[0].overlayY});\n\n this._overlay.create(overlayConfig).then(ref => {\n this._overlayRef = ref;\n this._overlayRef.attach(this._templatePortal);\n });\n }\n\n /** Destroys the overlay created by this directive. */\n private _destroyOverlay() {\n this._overlayRef.dispose();\n }\n}\n\n\n/**\n * Directive applied to an element to make it usable as an origin for an Overlay using a\n * ConnectedPositionStrategy.\n */\n@Directive({\n selector: '[overlay-origin]',\n exportAs: 'overlayOrigin',\n})\nexport class OverlayOrigin {\n constructor(private _elementRef: ElementRef) { }\n\n get elementRef() {\n return this._elementRef;\n }\n}\n\n\nexport const OVERLAY_DIRECTIVES = [ConnectedOverlayDirective, OverlayOrigin];\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/overlay-ref.d.ts b/DEBUG-merge/core/overlay/overlay-ref.d.ts new file mode 100644 index 000000000000..587144813f08 --- /dev/null +++ b/DEBUG-merge/core/overlay/overlay-ref.d.ts @@ -0,0 +1,20 @@ +import { PortalHost, Portal } from '../portal/portal'; +import { OverlayState } from './overlay-state'; +/** + * Reference to an overlay that has been created with the Overlay service. + * Used to manipulate or dispose of said overlay. + */ +export declare class OverlayRef implements PortalHost { + private _portalHost; + private _pane; + private _state; + constructor(_portalHost: PortalHost, _pane: HTMLElement, _state: OverlayState); + attach(portal: Portal): Promise; + detach(): Promise; + dispose(): void; + hasAttached(): boolean; + /** Gets the current state config of the overlay. */ + getState(): OverlayState; + /** Updates the position of the overlay based on the position strategy. */ + private _updatePosition(); +} diff --git a/DEBUG-merge/core/overlay/overlay-ref.js b/DEBUG-merge/core/overlay/overlay-ref.js new file mode 100644 index 000000000000..d9006d5fe082 --- /dev/null +++ b/DEBUG-merge/core/overlay/overlay-ref.js @@ -0,0 +1,40 @@ +"use strict"; +/** + * Reference to an overlay that has been created with the Overlay service. + * Used to manipulate or dispose of said overlay. + */ +var OverlayRef = (function () { + function OverlayRef(_portalHost, _pane, _state) { + this._portalHost = _portalHost; + this._pane = _pane; + this._state = _state; + } + OverlayRef.prototype.attach = function (portal) { + var _this = this; + return this._portalHost.attach(portal).then(function () { + _this._updatePosition(); + }); + }; + OverlayRef.prototype.detach = function () { + return this._portalHost.detach(); + }; + OverlayRef.prototype.dispose = function () { + this._portalHost.dispose(); + }; + OverlayRef.prototype.hasAttached = function () { + return this._portalHost.hasAttached(); + }; + /** Gets the current state config of the overlay. */ + OverlayRef.prototype.getState = function () { + return this._state; + }; + /** Updates the position of the overlay based on the position strategy. */ + OverlayRef.prototype._updatePosition = function () { + if (this._state.positionStrategy) { + this._state.positionStrategy.apply(this._pane); + } + }; + return OverlayRef; +}()); +exports.OverlayRef = OverlayRef; +//# sourceMappingURL=../../../../core/overlay/overlay-ref.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/overlay-ref.js.map b/DEBUG-merge/core/overlay/overlay-ref.js.map new file mode 100644 index 000000000000..228a296d660d --- /dev/null +++ b/DEBUG-merge/core/overlay/overlay-ref.js.map @@ -0,0 +1 @@ +{"version":3,"file":"overlay-ref.js","sourceRoot":"","sources":["../../src/demo-app/core/overlay/overlay-ref.ts"],"names":[],"mappings":";AAGA;;;GAGG;AACH;IACE,oBACY,WAAuB,EACvB,KAAkB,EAClB,MAAoB;QAFpB,gBAAW,GAAX,WAAW,CAAY;QACvB,UAAK,GAAL,KAAK,CAAa;QAClB,WAAM,GAAN,MAAM,CAAc;IAAI,CAAC;IAErC,2BAAM,GAAN,UAAO,MAAmB;QAA1B,iBAIC;QAHC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC;YAC1C,KAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,2BAAM,GAAN;QACE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;IACnC,CAAC;IAED,4BAAO,GAAP;QACE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;IAC7B,CAAC;IAED,gCAAW,GAAX;QACE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;IACxC,CAAC;IAED,oDAAoD;IACpD,6BAAQ,GAAR;QACE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,0EAA0E;IAClE,oCAAe,GAAvB;QACE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC;YACjC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;IAGH,iBAAC;AAAD,CAAC,AArCD,IAqCC;AArCY,kBAAU,aAqCtB,CAAA","sourcesContent":["import {PortalHost, Portal} from '../portal/portal';\nimport {OverlayState} from './overlay-state';\n\n/**\n * Reference to an overlay that has been created with the Overlay service.\n * Used to manipulate or dispose of said overlay.\n */\nexport class OverlayRef implements PortalHost {\n constructor(\n private _portalHost: PortalHost,\n private _pane: HTMLElement,\n private _state: OverlayState) { }\n\n attach(portal: Portal): Promise {\n return this._portalHost.attach(portal).then(() => {\n this._updatePosition();\n });\n }\n\n detach(): Promise {\n return this._portalHost.detach();\n }\n\n dispose(): void {\n this._portalHost.dispose();\n }\n\n hasAttached(): boolean {\n return this._portalHost.hasAttached();\n }\n\n /** Gets the current state config of the overlay. */\n getState() {\n return this._state;\n }\n\n /** Updates the position of the overlay based on the position strategy. */\n private _updatePosition() {\n if (this._state.positionStrategy) {\n this._state.positionStrategy.apply(this._pane);\n }\n }\n\n // TODO(jelbourn): add additional methods for manipulating the overlay.\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/overlay-state.d.ts b/DEBUG-merge/core/overlay/overlay-state.d.ts new file mode 100644 index 000000000000..fbd82a427c09 --- /dev/null +++ b/DEBUG-merge/core/overlay/overlay-state.d.ts @@ -0,0 +1,9 @@ +import { PositionStrategy } from './position/position-strategy'; +/** + * OverlayState is a bag of values for either the initial configuration or current state of an + * overlay. + */ +export declare class OverlayState { + /** Strategy with which to position the overlay. */ + positionStrategy: PositionStrategy; +} diff --git a/DEBUG-merge/core/overlay/overlay-state.js b/DEBUG-merge/core/overlay/overlay-state.js new file mode 100644 index 000000000000..63772c5fb63c --- /dev/null +++ b/DEBUG-merge/core/overlay/overlay-state.js @@ -0,0 +1,12 @@ +"use strict"; +/** + * OverlayState is a bag of values for either the initial configuration or current state of an + * overlay. + */ +var OverlayState = (function () { + function OverlayState() { + } + return OverlayState; +}()); +exports.OverlayState = OverlayState; +//# sourceMappingURL=../../../../core/overlay/overlay-state.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/overlay-state.js.map b/DEBUG-merge/core/overlay/overlay-state.js.map new file mode 100644 index 000000000000..06fe75c8b1a5 --- /dev/null +++ b/DEBUG-merge/core/overlay/overlay-state.js.map @@ -0,0 +1 @@ +{"version":3,"file":"overlay-state.js","sourceRoot":"","sources":["../../src/demo-app/core/overlay/overlay-state.ts"],"names":[],"mappings":";AAGA;;;GAGG;AACH;IAAA;IASA,CAAC;IAAD,mBAAC;AAAD,CAAC,AATD,IASC;AATY,oBAAY,eASxB,CAAA","sourcesContent":["import {PositionStrategy} from './position/position-strategy';\n\n\n/**\n * OverlayState is a bag of values for either the initial configuration or current state of an\n * overlay.\n */\nexport class OverlayState {\n /** Strategy with which to position the overlay. */\n positionStrategy: PositionStrategy;\n\n // TODO(jelbourn): configuration still to add\n // - overlay size\n // - focus trap\n // - disable pointer events\n // - z-index\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/overlay.css b/DEBUG-merge/core/overlay/overlay.css new file mode 100644 index 000000000000..4194cfb85083 --- /dev/null +++ b/DEBUG-merge/core/overlay/overlay.css @@ -0,0 +1,14 @@ +/** The overlay-container is an invisible element which contains all individual overlays. */ +.md-overlay-container { + position: absolute; + pointer-events: none; + top: 0; + left: 0; + height: 100%; + width: 100%; } + +/** A single overlay pane. */ +.md-overlay-pane { + position: absolute; + pointer-events: auto; + box-sizing: border-box; } diff --git a/DEBUG-merge/core/overlay/overlay.d.ts b/DEBUG-merge/core/overlay/overlay.d.ts new file mode 100644 index 000000000000..d06a5ba688a7 --- /dev/null +++ b/DEBUG-merge/core/overlay/overlay.d.ts @@ -0,0 +1,52 @@ +import { ComponentResolver, OpaqueToken } from '@angular/core'; +import { OverlayState } from './overlay-state'; +import { OverlayRef } from './overlay-ref'; +import { OverlayPositionBuilder } from './position/overlay-position-builder'; +import { ViewportRuler } from './position/viewport-ruler'; +/** Token used to inject the DOM element that serves as the overlay container. */ +export declare const OVERLAY_CONTAINER_TOKEN: OpaqueToken; +/** + * Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be + * used as a low-level building building block for other components. Dialogs, tooltips, menus, + * selects, etc. can all be built using overlays. The service should primarily be used by authors + * of re-usable components rather than developers building end-user applications. + * + * An overlay *is* a PortalHost, so any kind of Portal can be loaded into one. + */ +export declare class Overlay { + private _overlayContainerElement; + private _componentResolver; + private _positionBuilder; + constructor(_overlayContainerElement: HTMLElement, _componentResolver: ComponentResolver, _positionBuilder: OverlayPositionBuilder); + /** + * Creates an overlay. + * @param state State to apply to the overlay. + * @returns A reference to the created overlay. + */ + create(state?: OverlayState): Promise; + /** + * Returns a position builder that can be used, via fluent API, + * to construct and configure a position strategy. + */ + position(): OverlayPositionBuilder; + /** + * Creates the DOM element for an overlay and appends it to the overlay container. + * @returns Promise resolving to the created element. + */ + private _createPaneElement(); + /** + * Create a DomPortalHost into which the overlay content can be loaded. + * @param pane The DOM element to turn into a portal host. + * @returns A portal host for the given DOM element. + */ + private _createPortalHost(pane); + /** + * Creates an OverlayRef for an overlay in the given DOM element. + * @param pane DOM element for the overlay + * @param state + * @returns {OverlayRef} + */ + private _createOverlayRef(pane, state); +} +/** Providers for Overlay and its related injectables. */ +export declare const OVERLAY_PROVIDERS: (typeof ViewportRuler | typeof OverlayPositionBuilder | typeof Overlay)[]; diff --git a/DEBUG-merge/core/overlay/overlay.js b/DEBUG-merge/core/overlay/overlay.js new file mode 100644 index 000000000000..1babdac6bc28 --- /dev/null +++ b/DEBUG-merge/core/overlay/overlay.js @@ -0,0 +1,99 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var __param = (this && this.__param) || function (paramIndex, decorator) { + return function (target, key) { decorator(target, key, paramIndex); } +}; +var core_1 = require('@angular/core'); +var overlay_state_1 = require('./overlay-state'); +var dom_portal_host_1 = require('../portal/dom-portal-host'); +var overlay_ref_1 = require('./overlay-ref'); +var overlay_position_builder_1 = require('./position/overlay-position-builder'); +var viewport_ruler_1 = require('./position/viewport-ruler'); +/** Token used to inject the DOM element that serves as the overlay container. */ +exports.OVERLAY_CONTAINER_TOKEN = new core_1.OpaqueToken('overlayContainer'); +/** Next overlay unique ID. */ +var nextUniqueId = 0; +/** The default state for newly created overlays. */ +var defaultState = new overlay_state_1.OverlayState(); +/** + * Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be + * used as a low-level building building block for other components. Dialogs, tooltips, menus, + * selects, etc. can all be built using overlays. The service should primarily be used by authors + * of re-usable components rather than developers building end-user applications. + * + * An overlay *is* a PortalHost, so any kind of Portal can be loaded into one. + */ +var Overlay = (function () { + function Overlay(_overlayContainerElement, _componentResolver, _positionBuilder) { + this._overlayContainerElement = _overlayContainerElement; + this._componentResolver = _componentResolver; + this._positionBuilder = _positionBuilder; + } + /** + * Creates an overlay. + * @param state State to apply to the overlay. + * @returns A reference to the created overlay. + */ + Overlay.prototype.create = function (state) { + var _this = this; + if (state === void 0) { state = defaultState; } + return this._createPaneElement().then(function (pane) { return _this._createOverlayRef(pane, state); }); + }; + /** + * Returns a position builder that can be used, via fluent API, + * to construct and configure a position strategy. + */ + Overlay.prototype.position = function () { + return this._positionBuilder; + }; + /** + * Creates the DOM element for an overlay and appends it to the overlay container. + * @returns Promise resolving to the created element. + */ + Overlay.prototype._createPaneElement = function () { + var pane = document.createElement('div'); + pane.id = "md-overlay-" + nextUniqueId++; + pane.classList.add('md-overlay-pane'); + this._overlayContainerElement.appendChild(pane); + return Promise.resolve(pane); + }; + /** + * Create a DomPortalHost into which the overlay content can be loaded. + * @param pane The DOM element to turn into a portal host. + * @returns A portal host for the given DOM element. + */ + Overlay.prototype._createPortalHost = function (pane) { + return new dom_portal_host_1.DomPortalHost(pane, this._componentResolver); + }; + /** + * Creates an OverlayRef for an overlay in the given DOM element. + * @param pane DOM element for the overlay + * @param state + * @returns {OverlayRef} + */ + Overlay.prototype._createOverlayRef = function (pane, state) { + return new overlay_ref_1.OverlayRef(this._createPortalHost(pane), pane, state); + }; + Overlay = __decorate([ + core_1.Injectable(), + __param(0, core_1.Inject(exports.OVERLAY_CONTAINER_TOKEN)), + __metadata('design:paramtypes', [HTMLElement, core_1.ComponentResolver, overlay_position_builder_1.OverlayPositionBuilder]) + ], Overlay); + return Overlay; +}()); +exports.Overlay = Overlay; +/** Providers for Overlay and its related injectables. */ +exports.OVERLAY_PROVIDERS = [ + viewport_ruler_1.ViewportRuler, + overlay_position_builder_1.OverlayPositionBuilder, + Overlay, +]; +//# sourceMappingURL=../../../../core/overlay/overlay.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/overlay.js.map b/DEBUG-merge/core/overlay/overlay.js.map new file mode 100644 index 000000000000..87ea4ee52b71 --- /dev/null +++ b/DEBUG-merge/core/overlay/overlay.js.map @@ -0,0 +1 @@ +{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../../src/demo-app/core/overlay/overlay.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,qBAKO,eAAe,CAAC,CAAA;AACvB,8BAA2B,iBAAiB,CAAC,CAAA;AAC7C,gCAA4B,2BAA2B,CAAC,CAAA;AACxD,4BAAyB,eAAe,CAAC,CAAA;AAEzC,yCAAqC,qCAAqC,CAAC,CAAA;AAC3E,+BAA4B,2BAA2B,CAAC,CAAA;AAGxD,iFAAiF;AACpE,+BAAuB,GAAG,IAAI,kBAAW,CAAC,kBAAkB,CAAC,CAAC;AAE3E,8BAA8B;AAC9B,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB,oDAAoD;AACpD,IAAI,YAAY,GAAG,IAAI,4BAAY,EAAE,CAAC;AAGtC;;;;;;;GAOG;AAEH;IACE,iBAC6C,wBAAqC,EACtE,kBAAqC,EACrC,gBAAwC;QAFP,6BAAwB,GAAxB,wBAAwB,CAAa;QACtE,uBAAkB,GAAlB,kBAAkB,CAAmB;QACrC,qBAAgB,GAAhB,gBAAgB,CAAwB;IACpD,CAAC;IAED;;;;OAIG;IACH,wBAAM,GAAN,UAAO,KAAkC;QAAzC,iBAEC;QAFM,qBAAkC,GAAlC,oBAAkC;QACvC,MAAM,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,UAAA,IAAI,IAAI,OAAA,KAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,EAAnC,CAAmC,CAAC,CAAC;IACrF,CAAC;IAED;;;OAGG;IACH,0BAAQ,GAAR;QACE,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;IAED;;;OAGG;IACK,oCAAkB,GAA1B;QACE,IAAI,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,EAAE,GAAG,gBAAc,YAAY,EAAI,CAAC;QACzC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;QAEtC,IAAI,CAAC,wBAAwB,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAEhD,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED;;;;OAIG;IACK,mCAAiB,GAAzB,UAA0B,IAAiB;QACzC,MAAM,CAAC,IAAI,+BAAa,CACpB,IAAI,EACJ,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC/B,CAAC;IAED;;;;;OAKG;IACK,mCAAiB,GAAzB,UAA0B,IAAiB,EAAE,KAAmB;QAC9D,MAAM,CAAC,IAAI,wBAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACnE,CAAC;IA1DF;QAAC,iBAAU,EAAE;mBAGP,aAAM,CAAC,+BAAuB,CAAC;;eAHxB;IA2Dd,cAAC;AAAD,CAAC,AA1DD,IA0DC;AA1DY,eAAO,UA0DnB,CAAA;AAGD,yDAAyD;AAC5C,yBAAiB,GAAG;IAC/B,8BAAa;IACb,iDAAsB;IACtB,OAAO;CACR,CAAC","sourcesContent":["import {\n ComponentResolver,\n OpaqueToken,\n Inject,\n Injectable,\n} from '@angular/core';\nimport {OverlayState} from './overlay-state';\nimport {DomPortalHost} from '../portal/dom-portal-host';\nimport {OverlayRef} from './overlay-ref';\n\nimport {OverlayPositionBuilder} from './position/overlay-position-builder';\nimport {ViewportRuler} from './position/viewport-ruler';\n\n\n/** Token used to inject the DOM element that serves as the overlay container. */\nexport const OVERLAY_CONTAINER_TOKEN = new OpaqueToken('overlayContainer');\n\n/** Next overlay unique ID. */\nlet nextUniqueId = 0;\n\n/** The default state for newly created overlays. */\nlet defaultState = new OverlayState();\n\n\n/**\n * Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be\n * used as a low-level building building block for other components. Dialogs, tooltips, menus,\n * selects, etc. can all be built using overlays. The service should primarily be used by authors\n * of re-usable components rather than developers building end-user applications.\n *\n * An overlay *is* a PortalHost, so any kind of Portal can be loaded into one.\n */\n @Injectable()\nexport class Overlay {\n constructor(\n @Inject(OVERLAY_CONTAINER_TOKEN) private _overlayContainerElement: HTMLElement,\n private _componentResolver: ComponentResolver,\n private _positionBuilder: OverlayPositionBuilder) {\n }\n\n /**\n * Creates an overlay.\n * @param state State to apply to the overlay.\n * @returns A reference to the created overlay.\n */\n create(state: OverlayState = defaultState): Promise {\n return this._createPaneElement().then(pane => this._createOverlayRef(pane, state));\n }\n\n /**\n * Returns a position builder that can be used, via fluent API,\n * to construct and configure a position strategy.\n */\n position() {\n return this._positionBuilder;\n }\n\n /**\n * Creates the DOM element for an overlay and appends it to the overlay container.\n * @returns Promise resolving to the created element.\n */\n private _createPaneElement(): Promise {\n var pane = document.createElement('div');\n pane.id = `md-overlay-${nextUniqueId++}`;\n pane.classList.add('md-overlay-pane');\n\n this._overlayContainerElement.appendChild(pane);\n\n return Promise.resolve(pane);\n }\n\n /**\n * Create a DomPortalHost into which the overlay content can be loaded.\n * @param pane The DOM element to turn into a portal host.\n * @returns A portal host for the given DOM element.\n */\n private _createPortalHost(pane: HTMLElement): DomPortalHost {\n return new DomPortalHost(\n pane,\n this._componentResolver);\n }\n\n /**\n * Creates an OverlayRef for an overlay in the given DOM element.\n * @param pane DOM element for the overlay\n * @param state\n * @returns {OverlayRef}\n */\n private _createOverlayRef(pane: HTMLElement, state: OverlayState): OverlayRef {\n return new OverlayRef(this._createPortalHost(pane), pane, state);\n }\n}\n\n\n/** Providers for Overlay and its related injectables. */\nexport const OVERLAY_PROVIDERS = [\n ViewportRuler,\n OverlayPositionBuilder,\n Overlay,\n];\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/position/connected-position-strategy.d.ts b/DEBUG-merge/core/overlay/position/connected-position-strategy.d.ts new file mode 100644 index 000000000000..0dac4fdf3348 --- /dev/null +++ b/DEBUG-merge/core/overlay/position/connected-position-strategy.d.ts @@ -0,0 +1,69 @@ +import { PositionStrategy } from './position-strategy'; +import { ElementRef } from '@angular/core'; +import { ViewportRuler } from './viewport-ruler'; +import { ConnectionPositionPair, OriginConnectionPosition, OverlayConnectionPosition } from './connected-position'; +/** + * A strategy for positioning overlays. Using this strategy, an overlay is given an + * implict position relative some origin element. The relative position is defined in terms of + * a point on the origin element that is connected to a point on the overlay element. For example, + * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner + * of the overlay. + */ +export declare class ConnectedPositionStrategy implements PositionStrategy { + private _connectedTo; + private _originPos; + private _overlayPos; + private _viewportRuler; + /** Whether the we're dealing with an RTL context */ + _isRtl: boolean; + /** Ordered list of preferred positions, from most to least desirable. */ + _preferredPositions: ConnectionPositionPair[]; + /** The origin element against which the overlay will be positioned. */ + private _origin; + constructor(_connectedTo: ElementRef, _originPos: OriginConnectionPosition, _overlayPos: OverlayConnectionPosition, _viewportRuler: ViewportRuler); + positions: ConnectionPositionPair[]; + /** + * Updates the position of the overlay element, using whichever preferred position relative + * to the origin fits on-screen. + * TODO: internal + */ + apply(element: HTMLElement): Promise; + withFallbackPosition(originPos: OriginConnectionPosition, overlayPos: OverlayConnectionPosition): this; + /** + * Gets the horizontal (x) "start" dimension based on whether the overlay is in an RTL context. + * @param rect + */ + private _getStartX(rect); + /** + * Gets the horizontal (x) "end" dimension based on whether the overlay is in an RTL context. + * @param rect + */ + private _getEndX(rect); + /** + * Gets the (x, y) coordinate of a connection point on the origin based on a relative position. + * @param originRect + * @param pos + */ + private _getOriginConnectionPoint(originRect, pos); + /** + * Gets the (x, y) coordinate of the top-left corner of the overlay given a given position and + * origin point to which the overlay should be connected. + * @param originPoint + * @param overlayRect + * @param pos + */ + private _getOverlayPoint(originPoint, overlayRect, pos); + /** + * Gets whether the overlay positioned at the given point will fit on-screen. + * @param overlayPoint The top-left coordinate of the overlay. + * @param overlayRect Bounding rect of the overlay, used to get its size. + * @param viewportRect The bounding viewport. + */ + private _willOverlayFitWithinViewport(overlayPoint, overlayRect, viewportRect); + /** + * Physically positions the overlay element to the given coordinate. + * @param element + * @param overlayPoint + */ + private _setElementPosition(element, overlayPoint); +} diff --git a/DEBUG-merge/core/overlay/position/connected-position-strategy.js b/DEBUG-merge/core/overlay/position/connected-position-strategy.js new file mode 100644 index 000000000000..e848db8393a7 --- /dev/null +++ b/DEBUG-merge/core/overlay/position/connected-position-strategy.js @@ -0,0 +1,165 @@ +"use strict"; +var apply_transform_1 = require('@angular2-material/core/style/apply-transform'); +var connected_position_1 = require('./connected-position'); +/** + * A strategy for positioning overlays. Using this strategy, an overlay is given an + * implict position relative some origin element. The relative position is defined in terms of + * a point on the origin element that is connected to a point on the overlay element. For example, + * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner + * of the overlay. + */ +var ConnectedPositionStrategy = (function () { + function ConnectedPositionStrategy(_connectedTo, _originPos, _overlayPos, _viewportRuler) { + this._connectedTo = _connectedTo; + this._originPos = _originPos; + this._overlayPos = _overlayPos; + this._viewportRuler = _viewportRuler; + // TODO(jelbourn): set RTL to the actual value from the app. + /** Whether the we're dealing with an RTL context */ + this._isRtl = false; + /** Ordered list of preferred positions, from most to least desirable. */ + this._preferredPositions = []; + this._origin = this._connectedTo.nativeElement; + this.withFallbackPosition(_originPos, _overlayPos); + } + Object.defineProperty(ConnectedPositionStrategy.prototype, "positions", { + get: function () { + return this._preferredPositions; + }, + enumerable: true, + configurable: true + }); + /** + * Updates the position of the overlay element, using whichever preferred position relative + * to the origin fits on-screen. + * TODO: internal + */ + ConnectedPositionStrategy.prototype.apply = function (element) { + // We need the bounding rects for the origin and the overlay to determine how to position + // the overlay relative to the origin. + var originRect = this._origin.getBoundingClientRect(); + var overlayRect = element.getBoundingClientRect(); + // We use the viewport rect to determine whether a position would go off-screen. + var viewportRect = this._viewportRuler.getViewportRect(); + var firstOverlayPoint = null; + // We want to place the overlay in the first of the preferred positions such that the + // overlay fits on-screen. + for (var _i = 0, _a = this._preferredPositions; _i < _a.length; _i++) { + var pos = _a[_i]; + // Get the (x, y) point of connection on the origin, and then use that to get the + // (top, left) coordinate for the overlay at `pos`. + var originPoint = this._getOriginConnectionPoint(originRect, pos); + var overlayPoint = this._getOverlayPoint(originPoint, overlayRect, pos); + firstOverlayPoint = firstOverlayPoint || overlayPoint; + // If the overlay in the calculated position fits on-screen, put it there and we're done. + if (this._willOverlayFitWithinViewport(overlayPoint, overlayRect, viewportRect)) { + this._setElementPosition(element, overlayPoint); + return Promise.resolve(null); + } + } + // TODO(jelbourn): fallback behavior for when none of the preferred positions fit on-screen. + // For now, just stick it in the first position and let it go off-screen. + this._setElementPosition(element, firstOverlayPoint); + return Promise.resolve(null); + }; + ConnectedPositionStrategy.prototype.withFallbackPosition = function (originPos, overlayPos) { + this._preferredPositions.push(new connected_position_1.ConnectionPositionPair(originPos, overlayPos)); + return this; + }; + /** + * Gets the horizontal (x) "start" dimension based on whether the overlay is in an RTL context. + * @param rect + */ + ConnectedPositionStrategy.prototype._getStartX = function (rect) { + return this._isRtl ? rect.right : rect.left; + }; + /** + * Gets the horizontal (x) "end" dimension based on whether the overlay is in an RTL context. + * @param rect + */ + ConnectedPositionStrategy.prototype._getEndX = function (rect) { + return this._isRtl ? rect.left : rect.right; + }; + /** + * Gets the (x, y) coordinate of a connection point on the origin based on a relative position. + * @param originRect + * @param pos + */ + ConnectedPositionStrategy.prototype._getOriginConnectionPoint = function (originRect, pos) { + var originStartX = this._getStartX(originRect); + var originEndX = this._getEndX(originRect); + var x; + if (pos.originX == 'center') { + x = originStartX + (originRect.width / 2); + } + else { + x = pos.originX == 'start' ? originStartX : originEndX; + } + var y; + if (pos.originY == 'center') { + y = originRect.top + (originRect.height / 2); + } + else { + y = pos.originY == 'top' ? originRect.top : originRect.bottom; + } + return { x: x, y: y }; + }; + /** + * Gets the (x, y) coordinate of the top-left corner of the overlay given a given position and + * origin point to which the overlay should be connected. + * @param originPoint + * @param overlayRect + * @param pos + */ + ConnectedPositionStrategy.prototype._getOverlayPoint = function (originPoint, overlayRect, pos) { + // Calculate the (overlayStartX, overlayStartY), the start of the potential overlay position + // relative to the origin point. + var overlayStartX; + if (pos.overlayX == 'center') { + overlayStartX = -overlayRect.width / 2; + } + else { + overlayStartX = pos.overlayX == 'start' ? 0 : -overlayRect.width; + } + var overlayStartY; + if (pos.overlayY == 'center') { + overlayStartY = -overlayRect.height / 2; + } + else { + overlayStartY = pos.overlayY == 'top' ? 0 : -overlayRect.height; + } + return { + x: originPoint.x + overlayStartX, + y: originPoint.y + overlayStartY + }; + }; + /** + * Gets whether the overlay positioned at the given point will fit on-screen. + * @param overlayPoint The top-left coordinate of the overlay. + * @param overlayRect Bounding rect of the overlay, used to get its size. + * @param viewportRect The bounding viewport. + */ + ConnectedPositionStrategy.prototype._willOverlayFitWithinViewport = function (overlayPoint, overlayRect, viewportRect) { + // TODO(jelbourn): probably also want some space between overlay edge and viewport edge. + return overlayPoint.x >= viewportRect.left && + overlayPoint.x + overlayRect.width <= viewportRect.right && + overlayPoint.y >= viewportRect.top && + overlayPoint.y + overlayRect.height <= viewportRect.bottom; + }; + /** + * Physically positions the overlay element to the given coordinate. + * @param element + * @param overlayPoint + */ + ConnectedPositionStrategy.prototype._setElementPosition = function (element, overlayPoint) { + var scrollPos = this._viewportRuler.getViewportScrollPosition(); + var x = overlayPoint.x + scrollPos.left; + var y = overlayPoint.y + scrollPos.top; + // TODO(jelbourn): we don't want to always overwrite the transform property here, + // because it will need to be used for animations. + apply_transform_1.applyCssTransform(element, "translateX(" + x + "px) translateY(" + y + "px)"); + }; + return ConnectedPositionStrategy; +}()); +exports.ConnectedPositionStrategy = ConnectedPositionStrategy; +//# sourceMappingURL=../../../../../core/overlay/position/connected-position-strategy.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/position/connected-position-strategy.js.map b/DEBUG-merge/core/overlay/position/connected-position-strategy.js.map new file mode 100644 index 000000000000..cba9feb8b4df --- /dev/null +++ b/DEBUG-merge/core/overlay/position/connected-position-strategy.js.map @@ -0,0 +1 @@ +{"version":3,"file":"connected-position-strategy.js","sourceRoot":"","sources":["../../../src/demo-app/core/overlay/position/connected-position-strategy.ts"],"names":[],"mappings":";AAGA,gCAAgC,+CAA+C,CAAC,CAAA;AAChF,mCAIO,sBAAsB,CAAC,CAAA;AAG9B;;;;;;GAMG;AACH;IAYE,mCACY,YAAwB,EACxB,UAAoC,EACpC,WAAsC,EACtC,cAA6B;QAH7B,iBAAY,GAAZ,YAAY,CAAY;QACxB,eAAU,GAAV,UAAU,CAA0B;QACpC,gBAAW,GAAX,WAAW,CAA2B;QACtC,mBAAc,GAAd,cAAc,CAAe;QAfzC,4DAA4D;QAC5D,oDAAoD;QACpD,WAAM,GAAY,KAAK,CAAC;QAExB,yEAAyE;QACzE,wBAAmB,GAA6B,EAAE,CAAC;QAWjD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC;QAC/C,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;IACrD,CAAC;IAED,sBAAI,gDAAS;aAAb;YACE,MAAM,CAAC,IAAI,CAAC,mBAAmB,CAAC;QAClC,CAAC;;;OAAA;IAED;;;;OAIG;IACH,yCAAK,GAAL,UAAM,OAAoB;QACxB,yFAAyF;QACzF,sCAAsC;QACtC,IAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QACxD,IAAM,WAAW,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAEpD,gFAAgF;QAChF,IAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,EAAE,CAAC;QAC3D,IAAI,iBAAiB,GAAU,IAAI,CAAC;QAEpC,qFAAqF;QACrF,0BAA0B;QAC1B,GAAG,CAAC,CAAY,UAAwB,EAAxB,KAAA,IAAI,CAAC,mBAAmB,EAAxB,cAAwB,EAAxB,IAAwB,CAAC;YAApC,IAAI,GAAG,SAAA;YACV,iFAAiF;YACjF,mDAAmD;YACnD,IAAI,WAAW,GAAG,IAAI,CAAC,yBAAyB,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;YAClE,IAAI,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,EAAE,GAAG,CAAC,CAAC;YACxE,iBAAiB,GAAG,iBAAiB,IAAI,YAAY,CAAC;YAEtD,yFAAyF;YACzF,EAAE,CAAC,CAAC,IAAI,CAAC,6BAA6B,CAAC,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;gBAChF,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;gBAChD,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAC/B,CAAC;SACF;QAED,4FAA4F;QAC5F,yEAAyE;QACzE,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;QACrD,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,wDAAoB,GAApB,UACI,SAAmC,EACnC,UAAqC;QACvC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,2CAAsB,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;QACjF,MAAM,CAAC,IAAI,CAAC;IACd,CAAC;IAGD;;;OAGG;IACK,8CAAU,GAAlB,UAAmB,IAAgB;QACjC,MAAM,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;IAC9C,CAAC;IAED;;;OAGG;IACK,4CAAQ,GAAhB,UAAiB,IAAgB;QAC/B,MAAM,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;IAC9C,CAAC;IAGD;;;;OAIG;IACK,6DAAyB,GAAjC,UAAkC,UAAsB,EAAE,GAA2B;QACnF,IAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;QACjD,IAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;QAE7C,IAAI,CAAS,CAAC;QACd,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC;YAC5B,CAAC,GAAG,YAAY,GAAG,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAC5C,CAAC;QAAC,IAAI,CAAC,CAAC;YACN,CAAC,GAAG,GAAG,CAAC,OAAO,IAAI,OAAO,GAAG,YAAY,GAAG,UAAU,CAAC;QACzD,CAAC;QAED,IAAI,CAAS,CAAC;QACd,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC;YAC5B,CAAC,GAAG,UAAU,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC/C,CAAC;QAAC,IAAI,CAAC,CAAC;YACN,CAAC,GAAG,GAAG,CAAC,OAAO,IAAI,KAAK,GAAG,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC;QAChE,CAAC;QAED,MAAM,CAAC,EAAC,GAAA,CAAC,EAAE,GAAA,CAAC,EAAC,CAAC;IAChB,CAAC;IAGD;;;;;;OAMG;IACK,oDAAgB,GAAxB,UACI,WAAkB,EAClB,WAAuB,EACvB,GAA2B;QAC7B,4FAA4F;QAC5F,gCAAgC;QAChC,IAAI,aAAqB,CAAC;QAC1B,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC;YAC7B,aAAa,GAAG,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC;QACzC,CAAC;QAAC,IAAI,CAAC,CAAC;YACN,aAAa,GAAG,GAAG,CAAC,QAAQ,IAAI,OAAO,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC;QACnE,CAAC;QAED,IAAI,aAAqB,CAAC;QAC1B,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC;YAC7B,aAAa,GAAG,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;QAC1C,CAAC;QAAC,IAAI,CAAC,CAAC;YACN,aAAa,GAAG,GAAG,CAAC,QAAQ,IAAI,KAAK,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC;QAClE,CAAC;QAED,MAAM,CAAC;YACL,CAAC,EAAE,WAAW,CAAC,CAAC,GAAG,aAAa;YAChC,CAAC,EAAE,WAAW,CAAC,CAAC,GAAG,aAAa;SACjC,CAAC;IACJ,CAAC;IAGD;;;;;OAKG;IACK,iEAA6B,GAArC,UACI,YAAmB,EACnB,WAAuB,EACvB,YAAwB;QAE1B,wFAAwF;QACxF,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,YAAY,CAAC,IAAI;YACtC,YAAY,CAAC,CAAC,GAAG,WAAW,CAAC,KAAK,IAAI,YAAY,CAAC,KAAK;YACxD,YAAY,CAAC,CAAC,IAAI,YAAY,CAAC,GAAG;YAClC,YAAY,CAAC,CAAC,GAAG,WAAW,CAAC,MAAM,IAAI,YAAY,CAAC,MAAM,CAAC;IACjE,CAAC;IAGD;;;;OAIG;IACK,uDAAmB,GAA3B,UAA4B,OAAoB,EAAE,YAAmB;QACnE,IAAI,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,yBAAyB,EAAE,CAAC;QAEhE,IAAI,CAAC,GAAG,YAAY,CAAC,CAAC,GAAG,SAAS,CAAC,IAAI,CAAC;QACxC,IAAI,CAAC,GAAG,YAAY,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,CAAC;QAEvC,iFAAiF;QACjF,kDAAkD;QAClD,mCAAiB,CAAC,OAAO,EAAE,gBAAc,CAAC,uBAAkB,CAAC,QAAK,CAAC,CAAC;IACtE,CAAC;IACH,gCAAC;AAAD,CAAC,AAtLD,IAsLC;AAtLY,iCAAyB,4BAsLrC,CAAA","sourcesContent":["import {PositionStrategy} from './position-strategy';\nimport {ElementRef} from '@angular/core';\nimport {ViewportRuler} from './viewport-ruler';\nimport {applyCssTransform} from '@angular2-material/core/style/apply-transform';\nimport {\n ConnectionPositionPair,\n OriginConnectionPosition,\n OverlayConnectionPosition\n} from './connected-position';\n\n\n/**\n * A strategy for positioning overlays. Using this strategy, an overlay is given an\n * implict position relative some origin element. The relative position is defined in terms of\n * a point on the origin element that is connected to a point on the overlay element. For example,\n * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner\n * of the overlay.\n */\nexport class ConnectedPositionStrategy implements PositionStrategy {\n // TODO(jelbourn): set RTL to the actual value from the app.\n /** Whether the we're dealing with an RTL context */\n _isRtl: boolean = false;\n\n /** Ordered list of preferred positions, from most to least desirable. */\n _preferredPositions: ConnectionPositionPair[] = [];\n\n /** The origin element against which the overlay will be positioned. */\n private _origin: HTMLElement;\n\n\n constructor(\n private _connectedTo: ElementRef,\n private _originPos: OriginConnectionPosition,\n private _overlayPos: OverlayConnectionPosition,\n private _viewportRuler: ViewportRuler) {\n this._origin = this._connectedTo.nativeElement;\n this.withFallbackPosition(_originPos, _overlayPos);\n }\n\n get positions() {\n return this._preferredPositions;\n }\n\n /**\n * Updates the position of the overlay element, using whichever preferred position relative\n * to the origin fits on-screen.\n * TODO: internal\n */\n apply(element: HTMLElement): Promise {\n // We need the bounding rects for the origin and the overlay to determine how to position\n // the overlay relative to the origin.\n const originRect = this._origin.getBoundingClientRect();\n const overlayRect = element.getBoundingClientRect();\n\n // We use the viewport rect to determine whether a position would go off-screen.\n const viewportRect = this._viewportRuler.getViewportRect();\n let firstOverlayPoint: Point = null;\n\n // We want to place the overlay in the first of the preferred positions such that the\n // overlay fits on-screen.\n for (let pos of this._preferredPositions) {\n // Get the (x, y) point of connection on the origin, and then use that to get the\n // (top, left) coordinate for the overlay at `pos`.\n let originPoint = this._getOriginConnectionPoint(originRect, pos);\n let overlayPoint = this._getOverlayPoint(originPoint, overlayRect, pos);\n firstOverlayPoint = firstOverlayPoint || overlayPoint;\n\n // If the overlay in the calculated position fits on-screen, put it there and we're done.\n if (this._willOverlayFitWithinViewport(overlayPoint, overlayRect, viewportRect)) {\n this._setElementPosition(element, overlayPoint);\n return Promise.resolve(null);\n }\n }\n\n // TODO(jelbourn): fallback behavior for when none of the preferred positions fit on-screen.\n // For now, just stick it in the first position and let it go off-screen.\n this._setElementPosition(element, firstOverlayPoint);\n return Promise.resolve(null);\n }\n\n withFallbackPosition(\n originPos: OriginConnectionPosition,\n overlayPos: OverlayConnectionPosition): this {\n this._preferredPositions.push(new ConnectionPositionPair(originPos, overlayPos));\n return this;\n }\n\n\n /**\n * Gets the horizontal (x) \"start\" dimension based on whether the overlay is in an RTL context.\n * @param rect\n */\n private _getStartX(rect: ClientRect): number {\n return this._isRtl ? rect.right : rect.left;\n }\n\n /**\n * Gets the horizontal (x) \"end\" dimension based on whether the overlay is in an RTL context.\n * @param rect\n */\n private _getEndX(rect: ClientRect): number {\n return this._isRtl ? rect.left : rect.right;\n }\n\n\n /**\n * Gets the (x, y) coordinate of a connection point on the origin based on a relative position.\n * @param originRect\n * @param pos\n */\n private _getOriginConnectionPoint(originRect: ClientRect, pos: ConnectionPositionPair): Point {\n const originStartX = this._getStartX(originRect);\n const originEndX = this._getEndX(originRect);\n\n let x: number;\n if (pos.originX == 'center') {\n x = originStartX + (originRect.width / 2);\n } else {\n x = pos.originX == 'start' ? originStartX : originEndX;\n }\n\n let y: number;\n if (pos.originY == 'center') {\n y = originRect.top + (originRect.height / 2);\n } else {\n y = pos.originY == 'top' ? originRect.top : originRect.bottom;\n }\n\n return {x, y};\n }\n\n\n /**\n * Gets the (x, y) coordinate of the top-left corner of the overlay given a given position and\n * origin point to which the overlay should be connected.\n * @param originPoint\n * @param overlayRect\n * @param pos\n */\n private _getOverlayPoint(\n originPoint: Point,\n overlayRect: ClientRect,\n pos: ConnectionPositionPair): Point {\n // Calculate the (overlayStartX, overlayStartY), the start of the potential overlay position\n // relative to the origin point.\n let overlayStartX: number;\n if (pos.overlayX == 'center') {\n overlayStartX = -overlayRect.width / 2;\n } else {\n overlayStartX = pos.overlayX == 'start' ? 0 : -overlayRect.width;\n }\n\n let overlayStartY: number;\n if (pos.overlayY == 'center') {\n overlayStartY = -overlayRect.height / 2;\n } else {\n overlayStartY = pos.overlayY == 'top' ? 0 : -overlayRect.height;\n }\n\n return {\n x: originPoint.x + overlayStartX,\n y: originPoint.y + overlayStartY\n };\n }\n\n\n /**\n * Gets whether the overlay positioned at the given point will fit on-screen.\n * @param overlayPoint The top-left coordinate of the overlay.\n * @param overlayRect Bounding rect of the overlay, used to get its size.\n * @param viewportRect The bounding viewport.\n */\n private _willOverlayFitWithinViewport(\n overlayPoint: Point,\n overlayRect: ClientRect,\n viewportRect: ClientRect): boolean {\n\n // TODO(jelbourn): probably also want some space between overlay edge and viewport edge.\n return overlayPoint.x >= viewportRect.left &&\n overlayPoint.x + overlayRect.width <= viewportRect.right &&\n overlayPoint.y >= viewportRect.top &&\n overlayPoint.y + overlayRect.height <= viewportRect.bottom;\n }\n\n\n /**\n * Physically positions the overlay element to the given coordinate.\n * @param element\n * @param overlayPoint\n */\n private _setElementPosition(element: HTMLElement, overlayPoint: Point) {\n let scrollPos = this._viewportRuler.getViewportScrollPosition();\n\n let x = overlayPoint.x + scrollPos.left;\n let y = overlayPoint.y + scrollPos.top;\n\n // TODO(jelbourn): we don't want to always overwrite the transform property here,\n // because it will need to be used for animations.\n applyCssTransform(element, `translateX(${x}px) translateY(${y}px)`);\n }\n}\n\n\n/** A simple (x, y) coordinate. */\ntype Point = {x: number, y: number};\n\n\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/position/connected-position.d.ts b/DEBUG-merge/core/overlay/position/connected-position.d.ts new file mode 100644 index 000000000000..2709e5f4228e --- /dev/null +++ b/DEBUG-merge/core/overlay/position/connected-position.d.ts @@ -0,0 +1,22 @@ +/** Horizontal dimension of a connection point on the perimeter of the origin or overlay element. */ +export declare type HorizontalConnectionPos = 'start' | 'center' | 'end'; +/** Vertical dimension of a connection point on the perimeter of the origin or overlay element. */ +export declare type VerticalConnectionPos = 'top' | 'center' | 'bottom'; +/** A connection point on the origin element. */ +export interface OriginConnectionPosition { + originX: HorizontalConnectionPos; + originY: VerticalConnectionPos; +} +/** A connection point on the overlay element. */ +export interface OverlayConnectionPosition { + overlayX: HorizontalConnectionPos; + overlayY: VerticalConnectionPos; +} +/** The points of the origin element and the overlay element to connect. */ +export declare class ConnectionPositionPair { + originX: HorizontalConnectionPos; + originY: VerticalConnectionPos; + overlayX: HorizontalConnectionPos; + overlayY: VerticalConnectionPos; + constructor(origin: OriginConnectionPosition, overlay: OverlayConnectionPosition); +} diff --git a/DEBUG-merge/core/overlay/position/connected-position.js b/DEBUG-merge/core/overlay/position/connected-position.js new file mode 100644 index 000000000000..fac710c9f32b --- /dev/null +++ b/DEBUG-merge/core/overlay/position/connected-position.js @@ -0,0 +1,13 @@ +"use strict"; +/** The points of the origin element and the overlay element to connect. */ +var ConnectionPositionPair = (function () { + function ConnectionPositionPair(origin, overlay) { + this.originX = origin.originX; + this.originY = origin.originY; + this.overlayX = overlay.overlayX; + this.overlayY = overlay.overlayY; + } + return ConnectionPositionPair; +}()); +exports.ConnectionPositionPair = ConnectionPositionPair; +//# sourceMappingURL=../../../../../core/overlay/position/connected-position.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/position/connected-position.js.map b/DEBUG-merge/core/overlay/position/connected-position.js.map new file mode 100644 index 000000000000..e49d78a865d7 --- /dev/null +++ b/DEBUG-merge/core/overlay/position/connected-position.js.map @@ -0,0 +1 @@ +{"version":3,"file":"connected-position.js","sourceRoot":"","sources":["../../../src/demo-app/core/overlay/position/connected-position.ts"],"names":[],"mappings":";AAmBA,2EAA2E;AAC3E;IAME,gCAAY,MAAgC,EAAE,OAAkC;QAC9E,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAC9B,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAC9B,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;IACnC,CAAC;IACH,6BAAC;AAAD,CAAC,AAZD,IAYC;AAZY,8BAAsB,yBAYlC,CAAA","sourcesContent":["/** Horizontal dimension of a connection point on the perimeter of the origin or overlay element. */\nexport type HorizontalConnectionPos = 'start' | 'center' | 'end';\n\n/** Vertical dimension of a connection point on the perimeter of the origin or overlay element. */\nexport type VerticalConnectionPos = 'top' | 'center' | 'bottom';\n\n\n/** A connection point on the origin element. */\nexport interface OriginConnectionPosition {\n originX: HorizontalConnectionPos;\n originY: VerticalConnectionPos;\n}\n\n/** A connection point on the overlay element. */\nexport interface OverlayConnectionPosition {\n overlayX: HorizontalConnectionPos;\n overlayY: VerticalConnectionPos;\n}\n\n/** The points of the origin element and the overlay element to connect. */\nexport class ConnectionPositionPair {\n originX: HorizontalConnectionPos;\n originY: VerticalConnectionPos;\n overlayX: HorizontalConnectionPos;\n overlayY: VerticalConnectionPos;\n\n constructor(origin: OriginConnectionPosition, overlay: OverlayConnectionPosition) {\n this.originX = origin.originX;\n this.originY = origin.originY;\n this.overlayX = overlay.overlayX;\n this.overlayY = overlay.overlayY;\n }\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/position/global-position-strategy.d.ts b/DEBUG-merge/core/overlay/position/global-position-strategy.d.ts new file mode 100644 index 000000000000..5346572af699 --- /dev/null +++ b/DEBUG-merge/core/overlay/position/global-position-strategy.d.ts @@ -0,0 +1,45 @@ +import { PositionStrategy } from './position-strategy'; +/** + * A strategy for positioning overlays. Using this strategy, an overlay is given an + * explicit position relative to the browser's viewport. + */ +export declare class GlobalPositionStrategy implements PositionStrategy { + private _cssPosition; + private _top; + private _bottom; + private _left; + private _right; + /** Array of individual applications of translateX(). Currently only for centering. */ + private _translateX; + /** Array of individual applications of translateY(). Currently only for centering. */ + private _translateY; + /** Sets the element to usee CSS position: fixed */ + fixed(): this; + /** Sets the element to usee CSS position: absolute. This is the default. */ + absolute(): this; + /** Sets the top position of the overlay. Clears any previously set vertical position. */ + top(value: string): this; + /** Sets the left position of the overlay. Clears any previously set horizontal position. */ + left(value: string): this; + /** Sets the bottom position of the overlay. Clears any previously set vertical position. */ + bottom(value: string): this; + /** Sets the right position of the overlay. Clears any previously set horizontal position. */ + right(value: string): this; + /** + * Centers the overlay horizontally with an optional offset. + * Clears any previously set horizontal position. + */ + centerHorizontally(offset?: string): this; + /** + * Centers the overlay vertically with an optional offset. + * Clears any previously set vertical position. + */ + centerVertically(offset?: string): this; + /** + * Apply the position to the element. + * TODO: internal + */ + apply(element: HTMLElement): Promise; + /** Reduce a list of translate values to a string that can be used in the transform property */ + private _reduceTranslateValues(translateFn, values); +} diff --git a/DEBUG-merge/core/overlay/position/global-position-strategy.js b/DEBUG-merge/core/overlay/position/global-position-strategy.js new file mode 100644 index 000000000000..31ac3f4ee5ac --- /dev/null +++ b/DEBUG-merge/core/overlay/position/global-position-strategy.js @@ -0,0 +1,103 @@ +"use strict"; +var apply_transform_1 = require('@angular2-material/core/style/apply-transform'); +/** + * A strategy for positioning overlays. Using this strategy, an overlay is given an + * explicit position relative to the browser's viewport. + */ +var GlobalPositionStrategy = (function () { + function GlobalPositionStrategy() { + this._cssPosition = 'absolute'; + this._top = ''; + this._bottom = ''; + this._left = ''; + this._right = ''; + /** Array of individual applications of translateX(). Currently only for centering. */ + this._translateX = []; + /** Array of individual applications of translateY(). Currently only for centering. */ + this._translateY = []; + } + /** Sets the element to usee CSS position: fixed */ + GlobalPositionStrategy.prototype.fixed = function () { + this._cssPosition = 'fixed'; + return this; + }; + /** Sets the element to usee CSS position: absolute. This is the default. */ + GlobalPositionStrategy.prototype.absolute = function () { + this._cssPosition = 'absolute'; + return this; + }; + /** Sets the top position of the overlay. Clears any previously set vertical position. */ + GlobalPositionStrategy.prototype.top = function (value) { + this._bottom = ''; + this._translateY = []; + this._top = value; + return this; + }; + /** Sets the left position of the overlay. Clears any previously set horizontal position. */ + GlobalPositionStrategy.prototype.left = function (value) { + this._right = ''; + this._translateX = []; + this._left = value; + return this; + }; + /** Sets the bottom position of the overlay. Clears any previously set vertical position. */ + GlobalPositionStrategy.prototype.bottom = function (value) { + this._top = ''; + this._translateY = []; + this._bottom = value; + return this; + }; + /** Sets the right position of the overlay. Clears any previously set horizontal position. */ + GlobalPositionStrategy.prototype.right = function (value) { + this._left = ''; + this._translateX = []; + this._right = value; + return this; + }; + /** + * Centers the overlay horizontally with an optional offset. + * Clears any previously set horizontal position. + */ + GlobalPositionStrategy.prototype.centerHorizontally = function (offset) { + if (offset === void 0) { offset = '0px'; } + this._left = '50%'; + this._right = ''; + this._translateX = ['-50%', offset]; + return this; + }; + /** + * Centers the overlay vertically with an optional offset. + * Clears any previously set vertical position. + */ + GlobalPositionStrategy.prototype.centerVertically = function (offset) { + if (offset === void 0) { offset = '0px'; } + this._top = '50%'; + this._bottom = ''; + this._translateY = ['-50%', offset]; + return this; + }; + /** + * Apply the position to the element. + * TODO: internal + */ + GlobalPositionStrategy.prototype.apply = function (element) { + element.style.position = this._cssPosition; + element.style.top = this._top; + element.style.left = this._left; + element.style.bottom = this._bottom; + element.style.right = this._right; + // TODO(jelbourn): we don't want to always overwrite the transform property here, + // because it will need to be used for animations. + var tranlateX = this._reduceTranslateValues('translateX', this._translateX); + var translateY = this._reduceTranslateValues('translateY', this._translateY); + apply_transform_1.applyCssTransform(element, tranlateX + " " + translateY); + return Promise.resolve(null); + }; + /** Reduce a list of translate values to a string that can be used in the transform property */ + GlobalPositionStrategy.prototype._reduceTranslateValues = function (translateFn, values) { + return values.map(function (t) { return (translateFn + "(" + t + ")"); }).join(' '); + }; + return GlobalPositionStrategy; +}()); +exports.GlobalPositionStrategy = GlobalPositionStrategy; +//# sourceMappingURL=../../../../../core/overlay/position/global-position-strategy.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/position/global-position-strategy.js.map b/DEBUG-merge/core/overlay/position/global-position-strategy.js.map new file mode 100644 index 000000000000..d9c79741ad30 --- /dev/null +++ b/DEBUG-merge/core/overlay/position/global-position-strategy.js.map @@ -0,0 +1 @@ +{"version":3,"file":"global-position-strategy.js","sourceRoot":"","sources":["../../../src/demo-app/core/overlay/position/global-position-strategy.ts"],"names":[],"mappings":"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","sourcesContent":["import {applyCssTransform} from '@angular2-material/core/style/apply-transform';\nimport {PositionStrategy} from './position-strategy';\n\n\n/**\n * A strategy for positioning overlays. Using this strategy, an overlay is given an\n * explicit position relative to the browser's viewport.\n */\nexport class GlobalPositionStrategy implements PositionStrategy {\n private _cssPosition: string = 'absolute';\n private _top: string = '';\n private _bottom: string = '';\n private _left: string = '';\n private _right: string = '';\n\n /** Array of individual applications of translateX(). Currently only for centering. */\n private _translateX: string[] = [];\n\n /** Array of individual applications of translateY(). Currently only for centering. */\n private _translateY: string[] = [];\n\n /** Sets the element to usee CSS position: fixed */\n fixed() {\n this._cssPosition = 'fixed';\n return this;\n }\n\n /** Sets the element to usee CSS position: absolute. This is the default. */\n absolute() {\n this._cssPosition = 'absolute';\n return this;\n }\n\n /** Sets the top position of the overlay. Clears any previously set vertical position. */\n top(value: string) {\n this._bottom = '';\n this._translateY = [];\n this._top = value;\n return this;\n }\n\n /** Sets the left position of the overlay. Clears any previously set horizontal position. */\n left(value: string) {\n this._right = '';\n this._translateX = [];\n this._left = value;\n return this;\n }\n\n /** Sets the bottom position of the overlay. Clears any previously set vertical position. */\n bottom(value: string) {\n this._top = '';\n this._translateY = [];\n this._bottom = value;\n return this;\n }\n\n /** Sets the right position of the overlay. Clears any previously set horizontal position. */\n right(value: string) {\n this._left = '';\n this._translateX = [];\n this._right = value;\n return this;\n }\n\n /**\n * Centers the overlay horizontally with an optional offset.\n * Clears any previously set horizontal position.\n */\n centerHorizontally(offset = '0px') {\n this._left = '50%';\n this._right = '';\n this._translateX = ['-50%', offset];\n return this;\n }\n\n /**\n * Centers the overlay vertically with an optional offset.\n * Clears any previously set vertical position.\n */\n centerVertically(offset = '0px') {\n this._top = '50%';\n this._bottom = '';\n this._translateY = ['-50%', offset];\n return this;\n }\n\n /**\n * Apply the position to the element.\n * TODO: internal\n */\n apply(element: HTMLElement): Promise {\n element.style.position = this._cssPosition;\n element.style.top = this._top;\n element.style.left = this._left;\n element.style.bottom = this._bottom;\n element.style.right = this._right;\n\n // TODO(jelbourn): we don't want to always overwrite the transform property here,\n // because it will need to be used for animations.\n let tranlateX = this._reduceTranslateValues('translateX', this._translateX);\n let translateY = this._reduceTranslateValues('translateY', this._translateY);\n\n applyCssTransform(element, `${tranlateX} ${translateY}`);\n\n return Promise.resolve(null);\n }\n\n /** Reduce a list of translate values to a string that can be used in the transform property */\n private _reduceTranslateValues(translateFn: string, values: string[]) {\n return values.map(t => `${translateFn}(${t})`).join(' ');\n }\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/position/overlay-position-builder.d.ts b/DEBUG-merge/core/overlay/position/overlay-position-builder.d.ts new file mode 100644 index 000000000000..b9816ffe7ebc --- /dev/null +++ b/DEBUG-merge/core/overlay/position/overlay-position-builder.d.ts @@ -0,0 +1,14 @@ +import { ViewportRuler } from './viewport-ruler'; +import { ConnectedPositionStrategy } from './connected-position-strategy'; +import { ElementRef } from '@angular/core'; +import { GlobalPositionStrategy } from './global-position-strategy'; +import { OverlayConnectionPosition, OriginConnectionPosition } from './connected-position'; +/** Builder for overlay position strategy. */ +export declare class OverlayPositionBuilder { + private _viewportRuler; + constructor(_viewportRuler: ViewportRuler); + /** Creates a global position strategy. */ + global(): GlobalPositionStrategy; + /** Creates a relative position strategy. */ + connectedTo(elementRef: ElementRef, originPos: OriginConnectionPosition, overlayPos: OverlayConnectionPosition): ConnectedPositionStrategy; +} diff --git a/DEBUG-merge/core/overlay/position/overlay-position-builder.js b/DEBUG-merge/core/overlay/position/overlay-position-builder.js new file mode 100644 index 000000000000..4d2acb1ccfe1 --- /dev/null +++ b/DEBUG-merge/core/overlay/position/overlay-position-builder.js @@ -0,0 +1,35 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var viewport_ruler_1 = require('./viewport-ruler'); +var connected_position_strategy_1 = require('./connected-position-strategy'); +var core_1 = require('@angular/core'); +var global_position_strategy_1 = require('./global-position-strategy'); +/** Builder for overlay position strategy. */ +var OverlayPositionBuilder = (function () { + function OverlayPositionBuilder(_viewportRuler) { + this._viewportRuler = _viewportRuler; + } + /** Creates a global position strategy. */ + OverlayPositionBuilder.prototype.global = function () { + return new global_position_strategy_1.GlobalPositionStrategy(); + }; + /** Creates a relative position strategy. */ + OverlayPositionBuilder.prototype.connectedTo = function (elementRef, originPos, overlayPos) { + return new connected_position_strategy_1.ConnectedPositionStrategy(elementRef, originPos, overlayPos, this._viewportRuler); + }; + OverlayPositionBuilder = __decorate([ + core_1.Injectable(), + __metadata('design:paramtypes', [viewport_ruler_1.ViewportRuler]) + ], OverlayPositionBuilder); + return OverlayPositionBuilder; +}()); +exports.OverlayPositionBuilder = OverlayPositionBuilder; +//# sourceMappingURL=../../../../../core/overlay/position/overlay-position-builder.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/position/overlay-position-builder.js.map b/DEBUG-merge/core/overlay/position/overlay-position-builder.js.map new file mode 100644 index 000000000000..bf92f28c46a8 --- /dev/null +++ b/DEBUG-merge/core/overlay/position/overlay-position-builder.js.map @@ -0,0 +1 @@ +{"version":3,"file":"overlay-position-builder.js","sourceRoot":"","sources":["../../../src/demo-app/core/overlay/position/overlay-position-builder.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,+BAA4B,kBAAkB,CAAC,CAAA;AAC/C,4CAAwC,+BAA+B,CAAC,CAAA;AACxE,qBAAqC,eAAe,CAAC,CAAA;AACrD,yCAAqC,4BAA4B,CAAC,CAAA;AAKlE,6CAA6C;AAE7C;IACE,gCAAoB,cAA6B;QAA7B,mBAAc,GAAd,cAAc,CAAe;IAAI,CAAC;IAEtD,0CAA0C;IAC1C,uCAAM,GAAN;QACE,MAAM,CAAC,IAAI,iDAAsB,EAAE,CAAC;IACtC,CAAC;IAED,4CAA4C;IAC5C,4CAAW,GAAX,UACI,UAAsB,EACtB,SAAmC,EACnC,UAAqC;QACvC,MAAM,CAAC,IAAI,uDAAyB,CAAC,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC/F,CAAC;IAfH;QAAC,iBAAU,EAAE;;8BAAA;IAgBb,6BAAC;AAAD,CAAC,AAfD,IAeC;AAfY,8BAAsB,yBAelC,CAAA","sourcesContent":["import {ViewportRuler} from './viewport-ruler';\nimport {ConnectedPositionStrategy} from './connected-position-strategy';\nimport {ElementRef, Injectable} from '@angular/core';\nimport {GlobalPositionStrategy} from './global-position-strategy';\nimport {OverlayConnectionPosition, OriginConnectionPosition} from './connected-position';\n\n\n\n/** Builder for overlay position strategy. */\n@Injectable()\nexport class OverlayPositionBuilder {\n constructor(private _viewportRuler: ViewportRuler) { }\n\n /** Creates a global position strategy. */\n global() {\n return new GlobalPositionStrategy();\n }\n\n /** Creates a relative position strategy. */\n connectedTo(\n elementRef: ElementRef,\n originPos: OriginConnectionPosition,\n overlayPos: OverlayConnectionPosition) {\n return new ConnectedPositionStrategy(elementRef, originPos, overlayPos, this._viewportRuler);\n }\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/position/position-strategy.d.ts b/DEBUG-merge/core/overlay/position/position-strategy.d.ts new file mode 100644 index 000000000000..9e800ce19c2e --- /dev/null +++ b/DEBUG-merge/core/overlay/position/position-strategy.d.ts @@ -0,0 +1,5 @@ +/** Strategy for setting the position on an overlay. */ +export interface PositionStrategy { + /** Updates the position of the overlay element. */ + apply(element: Element): Promise; +} diff --git a/DEBUG-merge/core/overlay/position/position-strategy.js b/DEBUG-merge/core/overlay/position/position-strategy.js new file mode 100644 index 000000000000..dab58341cda3 --- /dev/null +++ b/DEBUG-merge/core/overlay/position/position-strategy.js @@ -0,0 +1,2 @@ +"use strict"; +//# sourceMappingURL=../../../../../core/overlay/position/position-strategy.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/position/position-strategy.js.map b/DEBUG-merge/core/overlay/position/position-strategy.js.map new file mode 100644 index 000000000000..62cb031bb1ac --- /dev/null +++ b/DEBUG-merge/core/overlay/position/position-strategy.js.map @@ -0,0 +1 @@ +{"version":3,"file":"position-strategy.js","sourceRoot":"","sources":["../../../src/demo-app/core/overlay/position/position-strategy.ts"],"names":[],"mappings":"","sourcesContent":["/** Strategy for setting the position on an overlay. */\nexport interface PositionStrategy {\n\n /** Updates the position of the overlay element. */\n apply(element: Element): Promise;\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/position/relative-position-strategy.d.ts b/DEBUG-merge/core/overlay/position/relative-position-strategy.d.ts new file mode 100644 index 000000000000..29911b8b71b5 --- /dev/null +++ b/DEBUG-merge/core/overlay/position/relative-position-strategy.d.ts @@ -0,0 +1,7 @@ +import { PositionStrategy } from './position-strategy'; +import { ElementRef } from '@angular/core'; +export declare class RelativePositionStrategy implements PositionStrategy { + private _relativeTo; + constructor(_relativeTo: ElementRef); + apply(element: Element): Promise; +} diff --git a/DEBUG-merge/core/overlay/position/relative-position-strategy.js b/DEBUG-merge/core/overlay/position/relative-position-strategy.js new file mode 100644 index 000000000000..ae6ee08c3709 --- /dev/null +++ b/DEBUG-merge/core/overlay/position/relative-position-strategy.js @@ -0,0 +1,13 @@ +"use strict"; +var RelativePositionStrategy = (function () { + function RelativePositionStrategy(_relativeTo) { + this._relativeTo = _relativeTo; + } + RelativePositionStrategy.prototype.apply = function (element) { + // Not yet implemented. + return null; + }; + return RelativePositionStrategy; +}()); +exports.RelativePositionStrategy = RelativePositionStrategy; +//# sourceMappingURL=../../../../../core/overlay/position/relative-position-strategy.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/position/relative-position-strategy.js.map b/DEBUG-merge/core/overlay/position/relative-position-strategy.js.map new file mode 100644 index 000000000000..9929571cd7cc --- /dev/null +++ b/DEBUG-merge/core/overlay/position/relative-position-strategy.js.map @@ -0,0 +1 @@ +{"version":3,"file":"relative-position-strategy.js","sourceRoot":"","sources":["../../../src/demo-app/core/overlay/position/relative-position-strategy.ts"],"names":[],"mappings":";AAGA;IACE,kCAAoB,WAAuB;QAAvB,gBAAW,GAAX,WAAW,CAAY;IAAI,CAAC;IAEhD,wCAAK,GAAL,UAAM,OAAgB;QACpB,uBAAuB;QACvB,MAAM,CAAC,IAAI,CAAC;IACd,CAAC;IACH,+BAAC;AAAD,CAAC,AAPD,IAOC;AAPY,gCAAwB,2BAOpC,CAAA","sourcesContent":["import {PositionStrategy} from './position-strategy';\nimport {ElementRef} from '@angular/core';\n\nexport class RelativePositionStrategy implements PositionStrategy {\n constructor(private _relativeTo: ElementRef) { }\n\n apply(element: Element): Promise {\n // Not yet implemented.\n return null;\n }\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/position/viewport-ruler.d.ts b/DEBUG-merge/core/overlay/position/viewport-ruler.d.ts new file mode 100644 index 000000000000..a97166e528cf --- /dev/null +++ b/DEBUG-merge/core/overlay/position/viewport-ruler.d.ts @@ -0,0 +1,16 @@ +/** + * Simple utility for getting the bounds of the browser viewport. + * TODO: internal + */ +export declare class ViewportRuler { + /** Gets a ClientRect for the viewport's bounds. */ + getViewportRect(): ClientRect; + /** + * Gets the (top, left) scroll position of the viewport. + * @param documentRect + */ + getViewportScrollPosition(documentRect?: ClientRect): { + top: number; + left: number; + }; +} diff --git a/DEBUG-merge/core/overlay/position/viewport-ruler.js b/DEBUG-merge/core/overlay/position/viewport-ruler.js new file mode 100644 index 000000000000..c86364b15670 --- /dev/null +++ b/DEBUG-merge/core/overlay/position/viewport-ruler.js @@ -0,0 +1,72 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('@angular/core'); +/** + * Simple utility for getting the bounds of the browser viewport. + * TODO: internal + */ +var ViewportRuler = (function () { + function ViewportRuler() { + } + // TODO(jelbourn): cache the document's bounding rect and only update it when the window + // is resized (debounced). + /** Gets a ClientRect for the viewport's bounds. */ + ViewportRuler.prototype.getViewportRect = function () { + // Use the document element's bounding rect rather than the window scroll properties + // (e.g. pageYOffset, scrollY) due to in issue in Chrome and IE where window scroll + // properties and client coordinates (boundingClientRect, clientX/Y, etc.) are in different + // conceptual viewports. Under most circumstances these viewports are equivalent, but they + // can disagree when the page is pinch-zoomed (on devices that support touch). + // See https://bugs.chromium.org/p/chromium/issues/detail?id=489206#c4 + // We use the documentElement instead of the body because, by default (without a css reset) + // browsers typically give the document body an 8px margin, which is not included in + // getBoundingClientRect(). + var documentRect = document.documentElement.getBoundingClientRect(); + var scrollPosition = this.getViewportScrollPosition(documentRect); + var height = window.innerHeight; + var width = window.innerWidth; + return { + top: scrollPosition.top, + left: scrollPosition.left, + bottom: scrollPosition.top + height, + right: scrollPosition.left + width, + height: height, + width: width, + }; + }; + /** + * Gets the (top, left) scroll position of the viewport. + * @param documentRect + */ + ViewportRuler.prototype.getViewportScrollPosition = function (documentRect) { + if (documentRect === void 0) { documentRect = document.documentElement.getBoundingClientRect(); } + // The top-left-corner of the viewport is determined by the scroll position of the document + // body, normally just (scrollLeft, scrollTop). However, Chrome and Firefox disagree about + // whether `document.body` or `document.documentElement` is the scrolled element, so reading + // `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding rect of + // `document.documentElement` works consistently, where the `top` and `left` values will + // equal negative the scroll position. + var top = documentRect.top < 0 && document.body.scrollTop == 0 ? + -documentRect.top : + document.body.scrollTop; + var left = documentRect.left < 0 && document.body.scrollLeft == 0 ? + -documentRect.left : + document.body.scrollLeft; + return { top: top, left: left }; + }; + ViewportRuler = __decorate([ + core_1.Injectable(), + __metadata('design:paramtypes', []) + ], ViewportRuler); + return ViewportRuler; +}()); +exports.ViewportRuler = ViewportRuler; +//# sourceMappingURL=../../../../../core/overlay/position/viewport-ruler.js.map \ No newline at end of file diff --git a/DEBUG-merge/core/overlay/position/viewport-ruler.js.map b/DEBUG-merge/core/overlay/position/viewport-ruler.js.map new file mode 100644 index 000000000000..04586e256343 --- /dev/null +++ b/DEBUG-merge/core/overlay/position/viewport-ruler.js.map @@ -0,0 +1 @@ +{"version":3,"file":"viewport-ruler.js","sourceRoot":"","sources":["../../../src/demo-app/core/overlay/position/viewport-ruler.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAAyB,eAAe,CAAC,CAAA;AAIzC;;;GAGG;AAEH;IAAA;IAoDA,CAAC;IAnDC,wFAAwF;IACxF,0BAA0B;IAG1B,mDAAmD;IACnD,uCAAe,GAAf;QACE,oFAAoF;QACpF,mFAAmF;QACnF,2FAA2F;QAC3F,0FAA0F;QAC1F,8EAA8E;QAC9E,sEAAsE;QACtE,2FAA2F;QAC3F,oFAAoF;QACpF,2BAA2B;QAC3B,IAAM,YAAY,GAAG,QAAQ,CAAC,eAAe,CAAC,qBAAqB,EAAE,CAAC;QACtE,IAAM,cAAc,GAAG,IAAI,CAAC,yBAAyB,CAAC,YAAY,CAAC,CAAC;QACpE,IAAM,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC;QAClC,IAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC;QAEhC,MAAM,CAAC;YACL,GAAG,EAAE,cAAc,CAAC,GAAG;YACvB,IAAI,EAAE,cAAc,CAAC,IAAI;YACzB,MAAM,EAAE,cAAc,CAAC,GAAG,GAAG,MAAM;YACnC,KAAK,EAAE,cAAc,CAAC,IAAI,GAAG,KAAK;YAClC,QAAA,MAAM;YACN,OAAA,KAAK;SACN,CAAC;IACJ,CAAC;IAGD;;;OAGG;IACH,iDAAyB,GAAzB,UAA0B,YAA+D;QAA/D,4BAA+D,GAA/D,eAAe,QAAQ,CAAC,eAAe,CAAC,qBAAqB,EAAE;QACvF,2FAA2F;QAC3F,0FAA0F;QAC1F,4FAA4F;QAC5F,oFAAoF;QACpF,wFAAwF;QACxF,sCAAsC;QACtC,IAAM,GAAG,GAAI,YAAY,CAAC,GAAG,GAAG,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC;YAC7D,CAAC,YAAY,CAAC,GAAG;YACjB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;QAC5B,IAAM,IAAI,GAAG,YAAY,CAAC,IAAI,GAAG,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC;YAC/D,CAAC,YAAY,CAAC,IAAI;YAClB,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;QAE7B,MAAM,CAAC,EAAC,KAAA,GAAG,EAAE,MAAA,IAAI,EAAC,CAAC;IACrB,CAAC;IApDH;QAAC,iBAAU,EAAE;;qBAAA;IAqDb,oBAAC;AAAD,CAAC,AApDD,IAoDC;AApDY,qBAAa,gBAoDzB,CAAA","sourcesContent":["import {Injectable} from '@angular/core';\n\n\n\n/**\n * Simple utility for getting the bounds of the browser viewport.\n * TODO: internal\n */\n@Injectable()\nexport class ViewportRuler {\n // TODO(jelbourn): cache the document's bounding rect and only update it when the window\n // is resized (debounced).\n\n\n /** Gets a ClientRect for the viewport's bounds. */\n getViewportRect(): ClientRect {\n // Use the document element's bounding rect rather than the window scroll properties\n // (e.g. pageYOffset, scrollY) due to in issue in Chrome and IE where window scroll\n // properties and client coordinates (boundingClientRect, clientX/Y, etc.) are in different\n // conceptual viewports. Under most circumstances these viewports are equivalent, but they\n // can disagree when the page is pinch-zoomed (on devices that support touch).\n // See https://bugs.chromium.org/p/chromium/issues/detail?id=489206#c4\n // We use the documentElement instead of the body because, by default (without a css reset)\n // browsers typically give the document body an 8px margin, which is not included in\n // getBoundingClientRect().\n const documentRect = document.documentElement.getBoundingClientRect();\n const scrollPosition = this.getViewportScrollPosition(documentRect);\n const height = window.innerHeight;\n const width = window.innerWidth;\n\n return {\n top: scrollPosition.top,\n left: scrollPosition.left,\n bottom: scrollPosition.top + height,\n right: scrollPosition.left + width,\n height,\n width,\n };\n }\n\n\n /**\n * Gets the (top, left) scroll position of the viewport.\n * @param documentRect\n */\n getViewportScrollPosition(documentRect = document.documentElement.getBoundingClientRect()) {\n // The top-left-corner of the viewport is determined by the scroll position of the document\n // body, normally just (scrollLeft, scrollTop). However, Chrome and Firefox disagree about\n // whether `document.body` or `document.documentElement` is the scrolled element, so reading\n // `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding rect of\n // `document.documentElement` works consistently, where the `top` and `left` values will\n // equal negative the scroll position.\n const top = documentRect.top < 0 && document.body.scrollTop == 0 ?\n -documentRect.top :\n document.body.scrollTop;\n const left = documentRect.left < 0 && document.body.scrollLeft == 0 ?\n -documentRect.left :\n document.body.scrollLeft;\n\n return {top, left};\n }\n}\n"]} \ No newline at end of file diff --git a/DEBUG-merge/core/package.json b/DEBUG-merge/core/package.json new file mode 100644 index 000000000000..1f865de620fe --- /dev/null +++ b/DEBUG-merge/core/package.json @@ -0,0 +1,26 @@ +{ + "name": "@angular2-material/core", + "version": "2.0.0-alpha.5-2", + "description": "Angular 2 Material core", + "main": "./core.js", + "typings": "./core.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "@angular/core": "^2.0.0-rc.1", + "@angular/common": "^2.0.0-rc.1" + } +} diff --git a/DEBUG-merge/core/portal/README.md b/DEBUG-merge/core/portal/README.md new file mode 100644 index 000000000000..dadd650f3978 --- /dev/null +++ b/DEBUG-merge/core/portal/README.md @@ -0,0 +1,72 @@ +# Portals + +### Overview + +A `Portal `is a piece of UI that can be dynamically rendered to an open slot on the page. + +The "piece of UI" can be either a `Component` or a `TemplateRef`. + +The "open slot" is a `PortalHost`. + +Portals and PortalHosts are low-level building blocks that other concepts, such as overlays, can +be built upon. + +##### `Portal` +| Method | Description | +| --- | --- | +| `attach(PortalHost): Promise` | Attaches the portal to a host. | +| `detach(): Promise` | Detaches the portal from its host. | +| `isAttached: boolean` | Whether the portal is attached. | + +##### `PortalHost` +| Method | Description | +| --- | --- | +| `attach(Portal): Promise` | Attaches a portal to the host. | +| `detach(): Promise` | Detaches the portal from the host. | +| `dispose(): Promise` | Permanently dispose the host. | +| `hasAttached: boolean` | Whether a portal is attached to the host. | + + + + +### Using portals + + + +##### `TemplatePortalDirective` +Used to get a portal from a `