1 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
2 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
3 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
4 | 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;
|
5 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
6 | };
|
7 | var __metadata = (this && this.__metadata) || function (k, v) {
|
8 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
9 | };
|
10 | var __param = (this && this.__param) || function (paramIndex, decorator) {
|
11 | return function (target, key) { decorator(target, key, paramIndex); }
|
12 | };
|
13 | import { Component, ContentChildren, Directive, EventEmitter, HostBinding, Input, Optional, Output, QueryList, ViewEncapsulation, forwardRef, NgModule } from '@angular/core';
|
14 | import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
15 | import { MdUniqueSelectionDispatcher } from '@angular2-material/core';
|
16 |
|
17 | export { MdUniqueSelectionDispatcher } from '@angular2-material/core';
|
18 |
|
19 |
|
20 |
|
21 |
|
22 | export var MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = {
|
23 | provide: NG_VALUE_ACCESSOR,
|
24 | useExisting: forwardRef(function () { return MdRadioGroup; }),
|
25 | multi: true
|
26 | };
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 | var _uniqueIdCounter = 0;
|
35 |
|
36 | export var MdRadioChange = (function () {
|
37 | function MdRadioChange() {
|
38 | }
|
39 | return MdRadioChange;
|
40 | }());
|
41 | export var MdRadioGroup = (function () {
|
42 | function MdRadioGroup() {
|
43 | |
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 | this._value = null;
|
50 |
|
51 | this._name = "md-radio-group-" + _uniqueIdCounter++;
|
52 |
|
53 | this._disabled = false;
|
54 |
|
55 | this._selected = null;
|
56 |
|
57 | this._isInitialized = false;
|
58 |
|
59 | this._controlValueAccessorChangeFn = function (value) { };
|
60 |
|
61 | this.onTouched = function () { };
|
62 |
|
63 | this.change = new EventEmitter();
|
64 |
|
65 | this._radios = null;
|
66 | }
|
67 | Object.defineProperty(MdRadioGroup.prototype, "name", {
|
68 | get: function () {
|
69 | return this._name;
|
70 | },
|
71 | set: function (value) {
|
72 | this._name = value;
|
73 | this._updateRadioButtonNames();
|
74 | },
|
75 | enumerable: true,
|
76 | configurable: true
|
77 | });
|
78 | Object.defineProperty(MdRadioGroup.prototype, "disabled", {
|
79 | get: function () {
|
80 | return this._disabled;
|
81 | },
|
82 | set: function (value) {
|
83 |
|
84 | this._disabled = (value != null && value !== false) ? true : null;
|
85 | },
|
86 | enumerable: true,
|
87 | configurable: true
|
88 | });
|
89 | Object.defineProperty(MdRadioGroup.prototype, "value", {
|
90 | get: function () {
|
91 | return this._value;
|
92 | },
|
93 | set: function (newValue) {
|
94 | if (this._value != newValue) {
|
95 |
|
96 | this._value = newValue;
|
97 | this._updateSelectedRadioFromValue();
|
98 |
|
99 | if (this._isInitialized) {
|
100 | this._emitChangeEvent();
|
101 | }
|
102 | }
|
103 | },
|
104 | enumerable: true,
|
105 | configurable: true
|
106 | });
|
107 | Object.defineProperty(MdRadioGroup.prototype, "selected", {
|
108 | get: function () {
|
109 | return this._selected;
|
110 | },
|
111 | set: function (selected) {
|
112 | this._selected = selected;
|
113 | this.value = selected ? selected.value : null;
|
114 | if (selected && !selected.checked) {
|
115 | selected.checked = true;
|
116 | }
|
117 | },
|
118 | enumerable: true,
|
119 | configurable: true
|
120 | });
|
121 | |
122 |
|
123 |
|
124 |
|
125 |
|
126 | MdRadioGroup.prototype.ngAfterContentInit = function () {
|
127 |
|
128 |
|
129 |
|
130 | this._isInitialized = true;
|
131 | };
|
132 | |
133 |
|
134 |
|
135 |
|
136 | MdRadioGroup.prototype._touch = function () {
|
137 | if (this.onTouched) {
|
138 | this.onTouched();
|
139 | }
|
140 | };
|
141 | MdRadioGroup.prototype._updateRadioButtonNames = function () {
|
142 | var _this = this;
|
143 | if (this._radios) {
|
144 | this._radios.forEach(function (radio) {
|
145 | radio.name = _this.name;
|
146 | });
|
147 | }
|
148 | };
|
149 |
|
150 | MdRadioGroup.prototype._updateSelectedRadioFromValue = function () {
|
151 | var _this = this;
|
152 |
|
153 | var isAlreadySelected = this._selected != null && this._selected.value == this._value;
|
154 | if (this._radios != null && !isAlreadySelected) {
|
155 | var matchingRadio = this._radios.filter(function (radio) { return radio.value == _this._value; })[0];
|
156 | if (matchingRadio) {
|
157 | this.selected = matchingRadio;
|
158 | }
|
159 | else if (this.value == null) {
|
160 | this.selected = null;
|
161 | this._radios.forEach(function (radio) { radio.checked = false; });
|
162 | }
|
163 | }
|
164 | };
|
165 |
|
166 | MdRadioGroup.prototype._emitChangeEvent = function () {
|
167 | var event = new MdRadioChange();
|
168 | event.source = this._selected;
|
169 | event.value = this._value;
|
170 | this._controlValueAccessorChangeFn(event.value);
|
171 | this.change.emit(event);
|
172 | };
|
173 | |
174 |
|
175 |
|
176 |
|
177 | MdRadioGroup.prototype.writeValue = function (value) {
|
178 | this.value = value;
|
179 | };
|
180 | |
181 |
|
182 |
|
183 |
|
184 | MdRadioGroup.prototype.registerOnChange = function (fn) {
|
185 | this._controlValueAccessorChangeFn = fn;
|
186 | };
|
187 | |
188 |
|
189 |
|
190 |
|
191 | MdRadioGroup.prototype.registerOnTouched = function (fn) {
|
192 | this.onTouched = fn;
|
193 | };
|
194 | __decorate([
|
195 | Output(),
|
196 | __metadata('design:type', EventEmitter)
|
197 | ], MdRadioGroup.prototype, "change", void 0);
|
198 | __decorate([
|
199 | ContentChildren(forwardRef(function () { return MdRadioButton; })),
|
200 | __metadata('design:type', QueryList)
|
201 | ], MdRadioGroup.prototype, "_radios", void 0);
|
202 | __decorate([
|
203 | Input(),
|
204 | __metadata('design:type', String)
|
205 | ], MdRadioGroup.prototype, "name", null);
|
206 | __decorate([
|
207 | Input(),
|
208 | __metadata('design:type', Object)
|
209 | ], MdRadioGroup.prototype, "align", void 0);
|
210 | __decorate([
|
211 | Input(),
|
212 | __metadata('design:type', Boolean)
|
213 | ], MdRadioGroup.prototype, "disabled", null);
|
214 | __decorate([
|
215 | Input(),
|
216 | __metadata('design:type', Object)
|
217 | ], MdRadioGroup.prototype, "value", null);
|
218 | __decorate([
|
219 | Input(),
|
220 | __metadata('design:type', Object)
|
221 | ], MdRadioGroup.prototype, "selected", null);
|
222 | MdRadioGroup = __decorate([
|
223 | Directive({
|
224 | selector: 'md-radio-group',
|
225 | providers: [MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR],
|
226 | host: {
|
227 | 'role': 'radiogroup',
|
228 | },
|
229 | }),
|
230 | __metadata('design:paramtypes', [])
|
231 | ], MdRadioGroup);
|
232 | return MdRadioGroup;
|
233 | }());
|
234 | export var MdRadioButton = (function () {
|
235 | function MdRadioButton(radioGroup, radioDispatcher) {
|
236 |
|
237 |
|
238 | var _this = this;
|
239 | this.radioDispatcher = radioDispatcher;
|
240 |
|
241 | this._checked = false;
|
242 |
|
243 | this.id = "md-radio-" + _uniqueIdCounter++;
|
244 |
|
245 | this._value = null;
|
246 |
|
247 | this.change = new EventEmitter();
|
248 | this.radioGroup = radioGroup;
|
249 | radioDispatcher.listen(function (id, name) {
|
250 | if (id != _this.id && name == _this.name) {
|
251 | _this.checked = false;
|
252 | }
|
253 | });
|
254 | }
|
255 | Object.defineProperty(MdRadioButton.prototype, "inputId", {
|
256 | get: function () {
|
257 | return this.id + "-input";
|
258 | },
|
259 | enumerable: true,
|
260 | configurable: true
|
261 | });
|
262 | Object.defineProperty(MdRadioButton.prototype, "checked", {
|
263 | get: function () {
|
264 | return this._checked;
|
265 | },
|
266 | set: function (newCheckedState) {
|
267 | if (newCheckedState) {
|
268 |
|
269 | this.radioDispatcher.notify(this.id, this.name);
|
270 | }
|
271 | this._checked = newCheckedState;
|
272 | if (newCheckedState && this.radioGroup && this.radioGroup.value != this.value) {
|
273 | this.radioGroup.selected = this;
|
274 | }
|
275 | },
|
276 | enumerable: true,
|
277 | configurable: true
|
278 | });
|
279 | Object.defineProperty(MdRadioButton.prototype, "value", {
|
280 |
|
281 | get: function () {
|
282 | return this._value;
|
283 | },
|
284 | set: function (value) {
|
285 | if (this._value != value) {
|
286 | if (this.radioGroup != null && this.checked) {
|
287 | this.radioGroup.value = value;
|
288 | }
|
289 | this._value = value;
|
290 | }
|
291 | },
|
292 | enumerable: true,
|
293 | configurable: true
|
294 | });
|
295 | Object.defineProperty(MdRadioButton.prototype, "align", {
|
296 | get: function () {
|
297 | return this._align || (this.radioGroup != null && this.radioGroup.align) || 'start';
|
298 | },
|
299 | set: function (value) {
|
300 | this._align = value;
|
301 | },
|
302 | enumerable: true,
|
303 | configurable: true
|
304 | });
|
305 | Object.defineProperty(MdRadioButton.prototype, "disabled", {
|
306 | get: function () {
|
307 | return this._disabled || (this.radioGroup != null && this.radioGroup.disabled);
|
308 | },
|
309 | set: function (value) {
|
310 |
|
311 | this._disabled = (value != null && value !== false) ? true : null;
|
312 | },
|
313 | enumerable: true,
|
314 | configurable: true
|
315 | });
|
316 |
|
317 | MdRadioButton.prototype.ngOnInit = function () {
|
318 | if (this.radioGroup) {
|
319 |
|
320 | this.checked = this.radioGroup.value === this._value;
|
321 |
|
322 | this.name = this.radioGroup.name;
|
323 | }
|
324 | };
|
325 |
|
326 | MdRadioButton.prototype._emitChangeEvent = function () {
|
327 | var event = new MdRadioChange();
|
328 | event.source = this;
|
329 | event.value = this._value;
|
330 | this.change.emit(event);
|
331 | };
|
332 | |
333 |
|
334 |
|
335 |
|
336 |
|
337 | MdRadioButton.prototype._onInputFocus = function () {
|
338 | this._isFocused = true;
|
339 | };
|
340 |
|
341 | MdRadioButton.prototype._onInputBlur = function () {
|
342 | this._isFocused = false;
|
343 | if (this.radioGroup) {
|
344 | this.radioGroup._touch();
|
345 | }
|
346 | };
|
347 |
|
348 | MdRadioButton.prototype._onInputClick = function (event) {
|
349 |
|
350 |
|
351 |
|
352 |
|
353 |
|
354 |
|
355 |
|
356 | event.stopPropagation();
|
357 | };
|
358 | |
359 |
|
360 |
|
361 |
|
362 |
|
363 | MdRadioButton.prototype._onInputChange = function (event) {
|
364 |
|
365 |
|
366 |
|
367 | event.stopPropagation();
|
368 | this.checked = true;
|
369 | this._emitChangeEvent();
|
370 | if (this.radioGroup) {
|
371 | this.radioGroup._touch();
|
372 | }
|
373 | };
|
374 | __decorate([
|
375 | HostBinding('class.md-radio-focused'),
|
376 | __metadata('design:type', Boolean)
|
377 | ], MdRadioButton.prototype, "_isFocused", void 0);
|
378 | __decorate([
|
379 | HostBinding('id'),
|
380 | Input(),
|
381 | __metadata('design:type', String)
|
382 | ], MdRadioButton.prototype, "id", void 0);
|
383 | __decorate([
|
384 | Input(),
|
385 | __metadata('design:type', String)
|
386 | ], MdRadioButton.prototype, "name", void 0);
|
387 | __decorate([
|
388 | Input('aria-label'),
|
389 | __metadata('design:type', String)
|
390 | ], MdRadioButton.prototype, "ariaLabel", void 0);
|
391 | __decorate([
|
392 | Input('aria-labelledby'),
|
393 | __metadata('design:type', String)
|
394 | ], MdRadioButton.prototype, "ariaLabelledby", void 0);
|
395 | __decorate([
|
396 | Output(),
|
397 | __metadata('design:type', EventEmitter)
|
398 | ], MdRadioButton.prototype, "change", void 0);
|
399 | __decorate([
|
400 | HostBinding('class.md-radio-checked'),
|
401 | Input(),
|
402 | __metadata('design:type', Boolean)
|
403 | ], MdRadioButton.prototype, "checked", null);
|
404 | __decorate([
|
405 | Input(),
|
406 | __metadata('design:type', Object)
|
407 | ], MdRadioButton.prototype, "value", null);
|
408 | __decorate([
|
409 | Input(),
|
410 | __metadata('design:type', Object)
|
411 | ], MdRadioButton.prototype, "align", null);
|
412 | __decorate([
|
413 | HostBinding('class.md-radio-disabled'),
|
414 | Input(),
|
415 | __metadata('design:type', Boolean)
|
416 | ], MdRadioButton.prototype, "disabled", null);
|
417 | MdRadioButton = __decorate([
|
418 | Component({selector: 'md-radio-button',
|
419 | template: "<!-- TODO(jelbourn): render the radio on either side of the content --> <!-- TODO(mtlin): Evaluate trade-offs of using native radio vs. cost of additional bindings. --> <label [attr.for]=\"inputId\" class=\"md-radio-label\"> <!-- The actual 'radio' part of the control. --> <div class=\"md-radio-container\"> <div class=\"md-radio-outer-circle\"></div> <div class=\"md-radio-inner-circle\"></div> <div class=\"md-ink-ripple\"></div> </div> <input #input class=\"md-radio-input\" type=\"radio\" [id]=\"inputId\" [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (change)=\"_onInputChange($event)\" (focus)=\"_onInputFocus()\" (blur)=\"_onInputBlur()\" (click)=\"_onInputClick($event)\"> <!-- The label content for radio control. --> <div class=\"md-radio-label-content\" [class.md-radio-align-end]=\"align == 'end'\"> <ng-content></ng-content> </div> </label> ",
|
420 | 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. */ md-radio-button { display: inline-block; } .md-radio-label { cursor: pointer; display: inline-flex; align-items: baseline; white-space: nowrap; } .md-radio-container { box-sizing: border-box; display: inline-block; height: 20px; position: relative; width: 20px; top: 2px; } .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 280ms; 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 280ms, background-color ease 280ms; 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; order: 0; line-height: inherit; padding-left: 8px; padding-right: 0; } [dir='rtl'] .md-radio-label-content { padding-right: 8px; padding-left: 0; } .md-radio-label-content.md-radio-align-end { order: -1; padding-left: 0; padding-right: 8px; } [dir='rtl'] .md-radio-label-content.md-radio-align-end { padding-right: 0; padding-left: 8px; } .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 280ms, background-color ease 280ms; 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; } /*# sourceMappingURL=radio.css.map */ "],
|
421 | encapsulation: ViewEncapsulation.None
|
422 | }),
|
423 | __param(0, Optional()),
|
424 | __metadata('design:paramtypes', [MdRadioGroup, MdUniqueSelectionDispatcher])
|
425 | ], MdRadioButton);
|
426 | return MdRadioButton;
|
427 | }());
|
428 | export var MdRadioModule = (function () {
|
429 | function MdRadioModule() {
|
430 | }
|
431 | MdRadioModule.forRoot = function () {
|
432 | return {
|
433 | ngModule: MdRadioModule,
|
434 | providers: [MdUniqueSelectionDispatcher],
|
435 | };
|
436 | };
|
437 | MdRadioModule = __decorate([
|
438 | NgModule({
|
439 | exports: [MdRadioGroup, MdRadioButton],
|
440 | declarations: [MdRadioGroup, MdRadioButton],
|
441 | }),
|
442 | __metadata('design:paramtypes', [])
|
443 | ], MdRadioModule);
|
444 | return MdRadioModule;
|
445 | }());
|
446 |
|
447 |
|