UNPKG

26.5 kBJavaScriptView Raw
1(function (global, factory) {
2 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms')) :
3 typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/forms'], factory) :
4 (factory((global.md = global.md || {}, global.md.checkbox = global.md.checkbox || {}),global.ng.core,global.ng.forms));
5}(this, (function (exports,_angular_core,_angular_forms) { 'use strict';
6
7var __decorate = (window && window.__decorate) || function (decorators, target, key, desc) {
8 var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9 if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10 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;
11 return c > 3 && r && Object.defineProperty(target, key, r), r;
12};
13var __metadata = (window && window.__metadata) || function (k, v) {
14 if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
15};
16/**
17 * Monotonically increasing integer used to auto-generate unique ids for checkbox components.
18 */
19var nextId = 0;
20/**
21 * Provider Expression that allows md-checkbox to register as a ControlValueAccessor. This allows it
22 * to support [(ngModel)].
23 */
24var MD_CHECKBOX_CONTROL_VALUE_ACCESSOR = {
25 provide: _angular_forms.NG_VALUE_ACCESSOR,
26 useExisting: _angular_core.forwardRef(function () { return MdCheckbox; }),
27 multi: true
28};
29/**
30 * Represents the different states that require custom transitions between them.
31 */
32(function (TransitionCheckState) {
33 /** The initial state of the component before any user interaction. */
34 TransitionCheckState[TransitionCheckState["Init"] = 0] = "Init";
35 /** The state representing the component when it's becoming checked. */
36 TransitionCheckState[TransitionCheckState["Checked"] = 1] = "Checked";
37 /** The state representing the component when it's becoming unchecked. */
38 TransitionCheckState[TransitionCheckState["Unchecked"] = 2] = "Unchecked";
39 /** The state representing the component when it's becoming indeterminate. */
40 TransitionCheckState[TransitionCheckState["Indeterminate"] = 3] = "Indeterminate";
41})(exports.TransitionCheckState || (exports.TransitionCheckState = {}));
42// A simple change event emitted by the MdCheckbox component.
43var MdCheckboxChange = (function () {
44 function MdCheckboxChange() {
45 }
46 return MdCheckboxChange;
47}());
48/**
49 * A material design checkbox component. Supports all of the functionality of an HTML5 checkbox,
50 * and exposes a similar API. An MdCheckbox can be either checked, unchecked, indeterminate, or
51 * disabled. Note that all additional accessibility attributes are taken care of by the component,
52 * so there is no need to provide them yourself. However, if you want to omit a label and still
53 * have the checkbox be accessible, you may supply an [aria-label] input.
54 * See: https://www.google.com/design/spec/components/selection-controls.html
55 */
56var MdCheckbox = (function () {
57 function MdCheckbox(_renderer, _elementRef) {
58 this._renderer = _renderer;
59 this._elementRef = _elementRef;
60 /**
61 * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
62 * take precedence so this may be omitted.
63 */
64 this.ariaLabel = '';
65 /**
66 * Users can specify the `aria-labelledby` attribute which will be forwarded to the input element
67 */
68 this.ariaLabelledby = null;
69 /** A unique id for the checkbox. If one is not supplied, it is auto-generated. */
70 this.id = "md-checkbox-" + ++nextId;
71 /** Whether or not the checkbox should come before or after the label. */
72 this.align = 'start';
73 /**
74 * Whether the checkbox is disabled. When the checkbox is disabled it cannot be interacted with.
75 * The correct ARIA attributes are applied to denote this to assistive technology.
76 */
77 this.disabled = false;
78 /**
79 * The tabindex attribute for the checkbox. Note that when the checkbox is disabled, the attribute
80 * on the host element will be removed. It will be placed back when the checkbox is re-enabled.
81 */
82 this.tabindex = 0;
83 /** Name value will be applied to the input element if present */
84 this.name = null;
85 /** Event emitted when the checkbox's `checked` value changes. */
86 this.change = new _angular_core.EventEmitter();
87 /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
88 this.onTouched = function () { };
89 this._currentAnimationClass = '';
90 this._currentCheckState = exports.TransitionCheckState.Init;
91 this._checked = false;
92 this._indeterminate = false;
93 this._controlValueAccessorChangeFn = function (value) { };
94 this.hasFocus = false;
95 }
96 Object.defineProperty(MdCheckbox.prototype, "inputId", {
97 /** ID to be applied to the `input` element */
98 get: function () {
99 return "input-" + this.id;
100 },
101 enumerable: true,
102 configurable: true
103 });
104 Object.defineProperty(MdCheckbox.prototype, "checked", {
105 /**
106 * Whether the checkbox is checked. Note that setting `checked` will immediately set
107 * `indeterminate` to false.
108 */
109 get: function () {
110 return this._checked;
111 },
112 set: function (checked) {
113 if (checked != this.checked) {
114 this._indeterminate = false;
115 this._checked = checked;
116 this._transitionCheckState(this._checked ? exports.TransitionCheckState.Checked : exports.TransitionCheckState.Unchecked);
117 }
118 },
119 enumerable: true,
120 configurable: true
121 });
122 Object.defineProperty(MdCheckbox.prototype, "indeterminate", {
123 /**
124 * Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to
125 * represent a checkbox with three states, e.g. a checkbox that represents a nested list of
126 * checkable items. Note that whenever `checked` is set, indeterminate is immediately set to
127 * false. This differs from the web platform in that indeterminate state on native
128 * checkboxes is only remove when the user manually checks the checkbox (rather than setting the
129 * `checked` property programmatically). However, we feel that this behavior is more accommodating
130 * to the way consumers would envision using this component.
131 */
132 get: function () {
133 return this._indeterminate;
134 },
135 set: function (indeterminate) {
136 this._indeterminate = indeterminate;
137 if (this._indeterminate) {
138 this._transitionCheckState(exports.TransitionCheckState.Indeterminate);
139 }
140 else {
141 this._transitionCheckState(this.checked ? exports.TransitionCheckState.Checked : exports.TransitionCheckState.Unchecked);
142 }
143 },
144 enumerable: true,
145 configurable: true
146 });
147 /**
148 * Implemented as part of ControlValueAccessor.
149 * TODO: internal
150 */
151 MdCheckbox.prototype.writeValue = function (value) {
152 this.checked = !!value;
153 };
154 /**
155 * Implemented as part of ControlValueAccessor.
156 * TODO: internal
157 */
158 MdCheckbox.prototype.registerOnChange = function (fn) {
159 this._controlValueAccessorChangeFn = fn;
160 };
161 /**
162 * Implemented as part of ControlValueAccessor.
163 * TODO: internal
164 */
165 MdCheckbox.prototype.registerOnTouched = function (fn) {
166 this.onTouched = fn;
167 };
168 MdCheckbox.prototype._transitionCheckState = function (newState) {
169 var oldState = this._currentCheckState;
170 var renderer = this._renderer;
171 var elementRef = this._elementRef;
172 if (oldState === newState) {
173 return;
174 }
175 if (this._currentAnimationClass.length > 0) {
176 renderer.setElementClass(elementRef.nativeElement, this._currentAnimationClass, false);
177 }
178 this._currentAnimationClass = this._getAnimationClassForCheckStateTransition(oldState, newState);
179 this._currentCheckState = newState;
180 if (this._currentAnimationClass.length > 0) {
181 renderer.setElementClass(elementRef.nativeElement, this._currentAnimationClass, true);
182 }
183 };
184 MdCheckbox.prototype._emitChangeEvent = function () {
185 var event = new MdCheckboxChange();
186 event.source = this;
187 event.checked = this.checked;
188 this._controlValueAccessorChangeFn(this.checked);
189 this.change.emit(event);
190 };
191 /** Informs the component when the input has focus so that we can style accordingly */
192 MdCheckbox.prototype._onInputFocus = function () {
193 this.hasFocus = true;
194 };
195 /** Informs the component when we lose focus in order to style accordingly */
196 MdCheckbox.prototype._onInputBlur = function () {
197 this.hasFocus = false;
198 this.onTouched();
199 };
200 /**
201 * Toggles the `checked` value between true and false
202 */
203 MdCheckbox.prototype.toggle = function () {
204 this.checked = !this.checked;
205 };
206 /**
207 * Event handler for checkbox input element.
208 * Toggles checked state if element is not disabled.
209 * @param event
210 */
211 MdCheckbox.prototype._onInteractionEvent = function (event) {
212 // We always have to stop propagation on the change event.
213 // Otherwise the change event, from the input element, will bubble up and
214 // emit its event object to the `change` output.
215 event.stopPropagation();
216 if (!this.disabled) {
217 this.toggle();
218 // Emit our custom change event if the native input emitted one.
219 // It is important to only emit it, if the native input triggered one, because
220 // we don't want to trigger a change event, when the `checked` variable changes for example.
221 this._emitChangeEvent();
222 }
223 };
224 MdCheckbox.prototype._onInputClick = function (event) {
225 // We have to stop propagation for click events on the visual hidden input element.
226 // By default, when a user clicks on a label element, a generated click event will be
227 // dispatched on the associated input element. Since we are using a label element as our
228 // root container, the click event on the `checkbox` will be executed twice.
229 // The real click event will bubble up, and the generated click event also tries to bubble up.
230 // This will lead to multiple click events.
231 // Preventing bubbling for the second event will solve that issue.
232 event.stopPropagation();
233 };
234 MdCheckbox.prototype._getAnimationClassForCheckStateTransition = function (oldState, newState) {
235 var animSuffix;
236 switch (oldState) {
237 case exports.TransitionCheckState.Init:
238 // Handle edge case where user interacts with checkbox that does not have [(ngModel)] or
239 // [checked] bound to it.
240 if (newState === exports.TransitionCheckState.Checked) {
241 animSuffix = 'unchecked-checked';
242 }
243 else {
244 return '';
245 }
246 break;
247 case exports.TransitionCheckState.Unchecked:
248 animSuffix = newState === exports.TransitionCheckState.Checked ?
249 'unchecked-checked' : 'unchecked-indeterminate';
250 break;
251 case exports.TransitionCheckState.Checked:
252 animSuffix = newState === exports.TransitionCheckState.Unchecked ?
253 'checked-unchecked' : 'checked-indeterminate';
254 break;
255 case exports.TransitionCheckState.Indeterminate:
256 animSuffix = newState === exports.TransitionCheckState.Checked ?
257 'indeterminate-checked' : 'indeterminate-unchecked';
258 }
259 return "md-checkbox-anim-" + animSuffix;
260 };
261 __decorate([
262 _angular_core.Input('aria-label'),
263 __metadata('design:type', String)
264 ], MdCheckbox.prototype, "ariaLabel", void 0);
265 __decorate([
266 _angular_core.Input('aria-labelledby'),
267 __metadata('design:type', String)
268 ], MdCheckbox.prototype, "ariaLabelledby", void 0);
269 __decorate([
270 _angular_core.Input(),
271 __metadata('design:type', String)
272 ], MdCheckbox.prototype, "id", void 0);
273 __decorate([
274 _angular_core.Input(),
275 __metadata('design:type', Object)
276 ], MdCheckbox.prototype, "align", void 0);
277 __decorate([
278 _angular_core.Input(),
279 __metadata('design:type', Boolean)
280 ], MdCheckbox.prototype, "disabled", void 0);
281 __decorate([
282 _angular_core.Input(),
283 __metadata('design:type', Number)
284 ], MdCheckbox.prototype, "tabindex", void 0);
285 __decorate([
286 _angular_core.Input(),
287 __metadata('design:type', String)
288 ], MdCheckbox.prototype, "name", void 0);
289 __decorate([
290 _angular_core.Output(),
291 __metadata('design:type', _angular_core.EventEmitter)
292 ], MdCheckbox.prototype, "change", void 0);
293 __decorate([
294 _angular_core.Input(),
295 __metadata('design:type', Object)
296 ], MdCheckbox.prototype, "checked", null);
297 __decorate([
298 _angular_core.Input(),
299 __metadata('design:type', Object)
300 ], MdCheckbox.prototype, "indeterminate", null);
301 MdCheckbox = __decorate([
302 _angular_core.Component({selector: 'md-checkbox',
303 template: "<label class=\"md-checkbox-layout\"> <div class=\"md-checkbox-inner-container\"> <input class=\"md-checkbox-input\" type=\"checkbox\" [id]=\"inputId\" [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" [tabIndex]=\"tabindex\" [indeterminate]=\"indeterminate\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (focus)=\"_onInputFocus()\" (blur)=\"_onInputBlur()\" (change)=\"_onInteractionEvent($event)\" (click)=\"_onInputClick($event)\"> <div class=\"md-ink-ripple\"></div> <div class=\"md-checkbox-frame\"></div> <div class=\"md-checkbox-background\"> <svg version=\"1.1\" class=\"md-checkbox-checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" xml:space=\"preserve\"> <path class=\"md-checkbox-checkmark-path\" fill=\"none\" stroke=\"white\" d=\"M4.1,12.7 9,17.6 20.3,6.3\"/> </svg> <!-- Element for rendering the indeterminate state checkbox. --> <div class=\"md-checkbox-mixedmark\"></div> </div> </div> <span class=\"md-checkbox-label\"> <ng-content></ng-content> </span> </label> ",
304 styles: ["/** * 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 { cursor: pointer; } .md-checkbox-layout { cursor: inherit; 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 0ms md-checkbox-fade-in-background; } .md-checkbox-anim-unchecked-checked .md-checkbox-checkmark-path { animation: 180ms linear 0ms md-checkbox-unchecked-checked-checkmark-path; } .md-checkbox-anim-unchecked-indeterminate .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-in-background; } .md-checkbox-anim-unchecked-indeterminate .md-checkbox-mixedmark { animation: 90ms linear 0ms md-checkbox-unchecked-indeterminate-mixedmark; } .md-checkbox-anim-checked-unchecked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-out-background; } .md-checkbox-anim-checked-unchecked .md-checkbox-checkmark-path { animation: 90ms linear 0ms md-checkbox-checked-unchecked-checkmark-path; } .md-checkbox-anim-checked-indeterminate .md-checkbox-checkmark { animation: 90ms linear 0ms md-checkbox-checked-indeterminate-checkmark; } .md-checkbox-anim-checked-indeterminate .md-checkbox-mixedmark { animation: 90ms linear 0ms md-checkbox-checked-indeterminate-mixedmark; } .md-checkbox-anim-indeterminate-checked .md-checkbox-checkmark { animation: 500ms linear 0ms md-checkbox-indeterminate-checked-checkmark; } .md-checkbox-anim-indeterminate-checked .md-checkbox-mixedmark { animation: 500ms linear 0ms md-checkbox-indeterminate-checked-mixedmark; } .md-checkbox-anim-indeterminate-unchecked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-out-background; } .md-checkbox-anim-indeterminate-unchecked .md-checkbox-mixedmark { animation: 300ms linear 0ms 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 280ms, background-color ease 280ms; 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; } /*# sourceMappingURL=checkbox.css.map */ "],
305 host: {
306 '[class.md-checkbox-indeterminate]': 'indeterminate',
307 '[class.md-checkbox-checked]': 'checked',
308 '[class.md-checkbox-disabled]': 'disabled',
309 '[class.md-checkbox-align-end]': 'align == "end"',
310 '[class.md-checkbox-focused]': 'hasFocus',
311 },
312 providers: [MD_CHECKBOX_CONTROL_VALUE_ACCESSOR],
313 encapsulation: _angular_core.ViewEncapsulation.None,
314 changeDetection: _angular_core.ChangeDetectionStrategy.OnPush
315 }),
316 __metadata('design:paramtypes', [_angular_core.Renderer, _angular_core.ElementRef])
317 ], MdCheckbox);
318 return MdCheckbox;
319}());
320var MdCheckboxModule = (function () {
321 function MdCheckboxModule() {
322 }
323 MdCheckboxModule.forRoot = function () {
324 return {
325 ngModule: MdCheckboxModule,
326 providers: []
327 };
328 };
329 MdCheckboxModule = __decorate([
330 _angular_core.NgModule({
331 exports: [MdCheckbox],
332 declarations: [MdCheckbox],
333 }),
334 __metadata('design:paramtypes', [])
335 ], MdCheckboxModule);
336 return MdCheckboxModule;
337}());
338
339exports.MD_CHECKBOX_CONTROL_VALUE_ACCESSOR = MD_CHECKBOX_CONTROL_VALUE_ACCESSOR;
340exports.MdCheckboxChange = MdCheckboxChange;
341exports.MdCheckbox = MdCheckbox;
342exports.MdCheckboxModule = MdCheckboxModule;
343
344Object.defineProperty(exports, '__esModule', { value: true });
345
346})));
\No newline at end of file