UNPKG

@angular/material

Version:
787 lines (782 loc) 30.3 kB
/** * @license * Copyright Google Inc. All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, Directive, ElementRef, EventEmitter, Input, NgModule, Optional, Output, Renderer2, ViewChild, ViewEncapsulation, forwardRef } from '@angular/core'; import { CommonModule } from '@angular/common'; import { VIEWPORT_RULER_PROVIDER } from '@angular/cdk/overlay'; import { MatCommonModule, MatRipple, MatRippleModule, mixinColor, mixinDisableRipple, mixinDisabled } from '@angular/material/core'; import { __extends } from 'tslib'; import * as tslib_1 from 'tslib'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { UNIQUE_SELECTION_DISPATCHER_PROVIDER, UniqueSelectionDispatcher } from '@angular/cdk/collections'; import { A11yModule, FocusMonitor } from '@angular/cdk/a11y'; // Increasing integer for generating unique ids for radio components. var nextUniqueId = 0; /** * Provider Expression that allows mat-radio-group to register as a ControlValueAccessor. This * allows it to support [(ngModel)] and ngControl. * \@docs-private */ var MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(function () { return MatRadioGroup; }), multi: true }; /** * Change event object emitted by MatRadio and MatRadioGroup. */ var MatRadioChange = (function () { function MatRadioChange() { } return MatRadioChange; }()); /** * \@docs-private */ var MatRadioGroupBase = (function () { function MatRadioGroupBase() { } return MatRadioGroupBase; }()); var _MatRadioGroupMixinBase = mixinDisabled(MatRadioGroupBase); /** * A group of radio buttons. May contain one or more `<mat-radio-button>` elements. */ var MatRadioGroup = (function (_super) { __extends(MatRadioGroup, _super); /** * @param {?} _changeDetector */ function MatRadioGroup(_changeDetector) { var _this = _super.call(this) || this; _this._changeDetector = _changeDetector; /** * 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 = "mat-radio-group-" + nextUniqueId++; /** * The currently selected radio button. Should match value. */ _this._selected = null; /** * Whether the `value` has been set to its initial value. */ _this._isInitialized = false; /** * Whether the labels should appear after or before the radio-buttons. Defaults to 'after' */ _this._labelPosition = 'after'; /** * Whether the radio group is disabled. */ _this._disabled = false; /** * Whether the radio group is required. */ _this._required = false; /** * The method to be called in order to update ngModel */ _this._controlValueAccessorChangeFn = function () { }; /** * onTouch function registered via registerOnTouch (ControlValueAccessor). * \@docs-private */ _this.onTouched = function () { }; /** * Event emitted when the group value changes. * Change events are only emitted when the value changes due to user interaction with * a radio button (the same behavior as `<input type-"radio">`). */ _this.change = new EventEmitter(); return _this; } Object.defineProperty(MatRadioGroup.prototype, "name", { /** * Name of the radio button group. All radio buttons inside this group will use this name. * @return {?} */ get: function () { return this._name; }, /** * @param {?} value * @return {?} */ set: function (value) { this._name = value; this._updateRadioButtonNames(); }, enumerable: true, configurable: true }); Object.defineProperty(MatRadioGroup.prototype, "align", { /** * Alignment of the radio-buttons relative to their labels. Can be 'before' or 'after'. * @deprecated * @return {?} */ get: function () { // align refers to the checkbox relative to the label, while labelPosition refers to the // label relative to the checkbox. As such, they are inverted. return this.labelPosition == 'after' ? 'start' : 'end'; }, /** * @param {?} v * @return {?} */ set: function (v) { this.labelPosition = (v == 'start') ? 'after' : 'before'; }, enumerable: true, configurable: true }); Object.defineProperty(MatRadioGroup.prototype, "labelPosition", { /** * Whether the labels should appear after or before the radio-buttons. Defaults to 'after' * @return {?} */ get: function () { return this._labelPosition; }, /** * @param {?} v * @return {?} */ set: function (v) { this._labelPosition = (v == 'before') ? 'before' : 'after'; this._markRadiosForCheck(); }, enumerable: true, configurable: true }); Object.defineProperty(MatRadioGroup.prototype, "value", { /** * Value of the radio button. * @return {?} */ get: function () { return this._value; }, /** * @param {?} newValue * @return {?} */ set: function (newValue) { if (this._value != newValue) { // Set this before proceeding to ensure no circular loop occurs with selection. this._value = newValue; this._updateSelectedRadioFromValue(); this._checkSelectedRadioButton(); } }, enumerable: true, configurable: true }); /** * @return {?} */ MatRadioGroup.prototype._checkSelectedRadioButton = function () { if (this._selected && !this._selected.checked) { this._selected.checked = true; } }; Object.defineProperty(MatRadioGroup.prototype, "selected", { /** * Whether the radio button is selected. * @return {?} */ get: function () { return this._selected; }, /** * @param {?} selected * @return {?} */ set: function (selected) { this._selected = selected; this.value = selected ? selected.value : null; this._checkSelectedRadioButton(); }, enumerable: true, configurable: true }); Object.defineProperty(MatRadioGroup.prototype, "disabled", { /** * Whether the radio group is disabled * @return {?} */ get: function () { return this._disabled; }, /** * @param {?} value * @return {?} */ set: function (value) { this._disabled = coerceBooleanProperty(value); this._markRadiosForCheck(); }, enumerable: true, configurable: true }); Object.defineProperty(MatRadioGroup.prototype, "required", { /** * Whether the radio group is required * @return {?} */ get: function () { return this._required; }, /** * @param {?} value * @return {?} */ set: function (value) { this._required = coerceBooleanProperty(value); this._markRadiosForCheck(); }, enumerable: true, configurable: true }); /** * Initialize properties once content children are available. * This allows us to propagate relevant attributes to associated buttons. * @return {?} */ MatRadioGroup.prototype.ngAfterContentInit = function () { // Mark this component as initialized in AfterContentInit because the initial value can // possibly be set by NgModel on MatRadioGroup, and it is possible that the OnInit of the // NgModel occurs *after* the OnInit of the MatRadioGroup. this._isInitialized = true; }; /** * Mark this group as being "touched" (for ngModel). Meant to be called by the contained * radio buttons upon their blur. * @return {?} */ MatRadioGroup.prototype._touch = function () { if (this.onTouched) { this.onTouched(); } }; /** * @return {?} */ MatRadioGroup.prototype._updateRadioButtonNames = function () { var _this = this; if (this._radios) { this._radios.forEach(function (radio) { radio.name = _this.name; }); } }; /** * Updates the `selected` radio button from the internal _value state. * @return {?} */ MatRadioGroup.prototype._updateSelectedRadioFromValue = function () { var _this = this; // If the value already matches the selected radio, do nothing. var /** @type {?} */ isAlreadySelected = this._selected != null && this._selected.value == this._value; if (this._radios != null && !isAlreadySelected) { this._selected = null; this._radios.forEach(function (radio) { radio.checked = _this.value == radio.value; if (radio.checked) { _this._selected = radio; } }); } }; /** * Dispatch change event with current selection and group value. * @return {?} */ MatRadioGroup.prototype._emitChangeEvent = function () { if (this._isInitialized) { var /** @type {?} */ event_1 = new MatRadioChange(); event_1.source = this._selected; event_1.value = this._value; this.change.emit(event_1); } }; /** * @return {?} */ MatRadioGroup.prototype._markRadiosForCheck = function () { if (this._radios) { this._radios.forEach(function (radio) { return radio._markForCheck(); }); } }; /** * Sets the model value. Implemented as part of ControlValueAccessor. * @param {?} value * @return {?} */ MatRadioGroup.prototype.writeValue = function (value) { this.value = value; this._changeDetector.markForCheck(); }; /** * Registers a callback to be triggered when the model value changes. * Implemented as part of ControlValueAccessor. * @param {?} fn Callback to be registered. * @return {?} */ MatRadioGroup.prototype.registerOnChange = function (fn) { this._controlValueAccessorChangeFn = fn; }; /** * Registers a callback to be triggered when the control is touched. * Implemented as part of ControlValueAccessor. * @param {?} fn Callback to be registered. * @return {?} */ MatRadioGroup.prototype.registerOnTouched = function (fn) { this.onTouched = fn; }; /** * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor. * @param {?} isDisabled Whether the control should be disabled. * @return {?} */ MatRadioGroup.prototype.setDisabledState = function (isDisabled) { this.disabled = isDisabled; this._changeDetector.markForCheck(); }; MatRadioGroup.decorators = [ { type: Directive, args: [{ selector: 'mat-radio-group', exportAs: 'matRadioGroup', providers: [MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR], host: { 'role': 'radiogroup', 'class': 'mat-radio-group', }, inputs: ['disabled'], },] }, ]; /** * @nocollapse */ MatRadioGroup.ctorParameters = function () { return [ { type: ChangeDetectorRef, }, ]; }; MatRadioGroup.propDecorators = { 'change': [{ type: Output },], '_radios': [{ type: ContentChildren, args: [forwardRef(function () { return MatRadioButton; }),] },], 'name': [{ type: Input },], 'align': [{ type: Input },], 'labelPosition': [{ type: Input },], 'value': [{ type: Input },], 'selected': [{ type: Input },], 'disabled': [{ type: Input },], 'required': [{ type: Input },], }; return MatRadioGroup; }(_MatRadioGroupMixinBase)); /** * \@docs-private */ var MatRadioButtonBase = (function () { /** * @param {?} _renderer * @param {?} _elementRef */ function MatRadioButtonBase(_renderer, _elementRef) { this._renderer = _renderer; this._elementRef = _elementRef; } return MatRadioButtonBase; }()); // As per Material design specifications the selection control radio should use the accent color // palette by default. https://material.io/guidelines/components/selection-controls.html var _MatRadioButtonMixinBase = mixinColor(mixinDisableRipple(MatRadioButtonBase), 'accent'); /** * A radio-button. May be inside of */ var MatRadioButton = (function (_super) { __extends(MatRadioButton, _super); /** * @param {?} radioGroup * @param {?} elementRef * @param {?} renderer * @param {?} _changeDetector * @param {?} _focusMonitor * @param {?} _radioDispatcher */ function MatRadioButton(radioGroup, elementRef, renderer, _changeDetector, _focusMonitor, _radioDispatcher) { var _this = _super.call(this, renderer, elementRef) || this; _this._changeDetector = _changeDetector; _this._focusMonitor = _focusMonitor; _this._radioDispatcher = _radioDispatcher; _this._uniqueId = "mat-radio-" + ++nextUniqueId; /** * The unique ID for the radio button. */ _this.id = _this._uniqueId; /** * Event emitted when the checked state of this radio button changes. * Change events are only emitted when the value changes due to user interaction with * the radio button (the same behavior as `<input type-"radio">`). */ _this.change = new EventEmitter(); /** * Whether this radio is checked. */ _this._checked = false; /** * Value assigned to this radio. */ _this._value = null; /** * Unregister function for _radioDispatcher * */ _this._removeUniqueSelectionListener = function () { }; // Assertions. Ideally these should be stripped out by the compiler. // TODO(jelbourn): Assert that there's no name binding AND a parent radio group. _this.radioGroup = radioGroup; _this._removeUniqueSelectionListener = _radioDispatcher.listen(function (id, name) { if (id != _this.id && name == _this.name) { _this.checked = false; } }); return _this; } Object.defineProperty(MatRadioButton.prototype, "checked", { /** * Whether this radio button is checked. * @return {?} */ get: function () { return this._checked; }, /** * @param {?} newCheckedState * @return {?} */ set: function (newCheckedState) { if (this._checked != newCheckedState) { this._checked = newCheckedState; if (newCheckedState && this.radioGroup && this.radioGroup.value != this.value) { this.radioGroup.selected = this; } else if (!newCheckedState && this.radioGroup && this.radioGroup.value == this.value) { // When unchecking the selected radio button, update the selected radio // property on the group. this.radioGroup.selected = null; } if (newCheckedState) { // Notify all radio buttons with the same name to un-check. this._radioDispatcher.notify(this.id, this.name); } this._changeDetector.markForCheck(); } }, enumerable: true, configurable: true }); Object.defineProperty(MatRadioButton.prototype, "value", { /** * The value of this radio button. * @return {?} */ get: function () { return this._value; }, /** * @param {?} value * @return {?} */ set: function (value) { if (this._value != value) { this._value = value; if (this.radioGroup != null) { if (!this.checked) { // Update checked when the value changed to match the radio group's value this.checked = this.radioGroup.value == value; } if (this.checked) { this.radioGroup.selected = this; } } } }, enumerable: true, configurable: true }); Object.defineProperty(MatRadioButton.prototype, "align", { /** * Whether or not the radio-button should appear before or after the label. * @deprecated * @return {?} */ get: function () { // align refers to the checkbox relative to the label, while labelPosition refers to the // label relative to the checkbox. As such, they are inverted. return this.labelPosition == 'after' ? 'start' : 'end'; }, /** * @param {?} v * @return {?} */ set: function (v) { this.labelPosition = (v == 'start') ? 'after' : 'before'; }, enumerable: true, configurable: true }); Object.defineProperty(MatRadioButton.prototype, "labelPosition", { /** * Whether the label should appear after or before the radio button. Defaults to 'after' * @return {?} */ get: function () { return this._labelPosition || (this.radioGroup && this.radioGroup.labelPosition) || 'after'; }, /** * @param {?} value * @return {?} */ set: function (value) { this._labelPosition = value; }, enumerable: true, configurable: true }); Object.defineProperty(MatRadioButton.prototype, "disabled", { /** * Whether the radio button is disabled. * @return {?} */ get: function () { return this._disabled || (this.radioGroup != null && this.radioGroup.disabled); }, /** * @param {?} value * @return {?} */ set: function (value) { this._disabled = coerceBooleanProperty(value); }, enumerable: true, configurable: true }); Object.defineProperty(MatRadioButton.prototype, "required", { /** * Whether the radio button is required. * @return {?} */ get: function () { return this._required || (this.radioGroup && this.radioGroup.required); }, /** * @param {?} value * @return {?} */ set: function (value) { this._required = coerceBooleanProperty(value); }, enumerable: true, configurable: true }); Object.defineProperty(MatRadioButton.prototype, "inputId", { /** * ID of the native input element inside `<mat-radio-button>` * @return {?} */ get: function () { return (this.id || this._uniqueId) + "-input"; }, enumerable: true, configurable: true }); /** * Focuses the radio button. * @return {?} */ MatRadioButton.prototype.focus = function () { this._focusMonitor.focusVia(this._inputElement.nativeElement, 'keyboard'); }; /** * Marks the radio button as needing checking for change detection. * This method is exposed because the parent radio group will directly * update bound properties of the radio button. * @return {?} */ MatRadioButton.prototype._markForCheck = function () { // When group value changes, the button will not be notified. Use `markForCheck` to explicit // update radio button's status this._changeDetector.markForCheck(); }; /** * @return {?} */ MatRadioButton.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; } }; /** * @return {?} */ MatRadioButton.prototype.ngAfterViewInit = function () { var _this = this; this._focusMonitor .monitor(this._inputElement.nativeElement, this._renderer, false) .subscribe(function (focusOrigin) { return _this._onInputFocusChange(focusOrigin); }); }; /** * @return {?} */ MatRadioButton.prototype.ngOnDestroy = function () { this._focusMonitor.stopMonitoring(this._inputElement.nativeElement); this._removeUniqueSelectionListener(); }; /** * Dispatch change event with current value. * @return {?} */ MatRadioButton.prototype._emitChangeEvent = function () { var /** @type {?} */ event = new MatRadioChange(); event.source = this; event.value = this._value; this.change.emit(event); }; /** * @return {?} */ MatRadioButton.prototype._isRippleDisabled = function () { return this.disableRipple || this.disabled; }; /** * @param {?} event * @return {?} */ MatRadioButton.prototype._onInputClick = function (event) { // We have to stop propagation for click events on the visual hidden input element. // By default, when a user clicks on a label element, a generated click event will be // dispatched on the associated input element. Since we are using a label element as our // root container, the click event on the `radio-button` will be executed twice. // The real click event will bubble up, and the generated click event also tries to bubble up. // This will lead to multiple click events. // Preventing bubbling for the second event will solve that issue. event.stopPropagation(); }; /** * Triggered when the radio button received a click or the input recognized any change. * Clicking on a label element, will trigger a change event on the associated input. * @param {?} event * @return {?} */ MatRadioButton.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(); var /** @type {?} */ groupValueChanged = this.radioGroup && this.value != this.radioGroup.value; this.checked = true; this._emitChangeEvent(); if (this.radioGroup) { this.radioGroup._controlValueAccessorChangeFn(this.value); this.radioGroup._touch(); if (groupValueChanged) { this.radioGroup._emitChangeEvent(); } } }; /** * Function is called whenever the focus changes for the input element. * @param {?} focusOrigin * @return {?} */ MatRadioButton.prototype._onInputFocusChange = function (focusOrigin) { if (!this._focusRipple && focusOrigin === 'keyboard') { this._focusRipple = this._ripple.launch(0, 0, { persistent: true, centered: true }); } else if (!focusOrigin) { if (this.radioGroup) { this.radioGroup._touch(); } if (this._focusRipple) { this._focusRipple.fadeOut(); this._focusRipple = null; } } }; MatRadioButton.decorators = [ { type: Component, args: [{selector: 'mat-radio-button', template: "<label [attr.for]=\"inputId\" class=\"mat-radio-label\" #label><div class=\"mat-radio-container\"><div class=\"mat-radio-outer-circle\"></div><div class=\"mat-radio-inner-circle\"></div><div mat-ripple class=\"mat-radio-ripple\" [matRippleTrigger]=\"label\" [matRippleDisabled]=\"_isRippleDisabled()\" [matRippleCentered]=\"true\"></div></div><input #input class=\"mat-radio-input cdk-visually-hidden\" type=\"radio\" [id]=\"inputId\" [checked]=\"checked\" [disabled]=\"disabled\" [attr.name]=\"name\" [required]=\"required\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (change)=\"_onInputChange($event)\" (click)=\"_onInputClick($event)\"><div class=\"mat-radio-label-content\" [class.mat-radio-label-before]=\"labelPosition == 'before'\"><span style=\"display:none\">&nbsp;</span><ng-content></ng-content></div></label>", styles: [".mat-radio-button{display:inline-block}.mat-radio-label{cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap;vertical-align:middle}.mat-radio-container{box-sizing:border-box;display:inline-block;position:relative;width:20px;height:20px;flex-shrink:0}.mat-radio-outer-circle{box-sizing:border-box;height:20px;left:0;position:absolute;top:0;transition:border-color ease 280ms;width:20px;border-width:2px;border-style:solid;border-radius:50%}.mat-radio-inner-circle{border-radius:50%;box-sizing:border-box;height:20px;left:0;position:absolute;top:0;transition:transform ease 280ms,background-color ease 280ms;width:20px;transform:scale(.001)}.mat-radio-checked .mat-radio-inner-circle{transform:scale(.5)}.mat-radio-label-content{display:inline-block;order:0;line-height:inherit;padding-left:8px;padding-right:0}[dir=rtl] .mat-radio-label-content{padding-right:8px;padding-left:0}.mat-radio-label-content.mat-radio-label-before{order:-1;padding-left:0;padding-right:8px}[dir=rtl] .mat-radio-label-content.mat-radio-label-before{padding-right:0;padding-left:8px}.mat-radio-disabled,.mat-radio-disabled .mat-radio-label{cursor:default}.mat-radio-ripple{position:absolute;left:-15px;top:-15px;right:-15px;bottom:-15px;border-radius:50%;z-index:1;pointer-events:none}"], inputs: ['color', 'disableRipple'], encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, exportAs: 'matRadioButton', host: { 'class': 'mat-radio-button', '[class.mat-radio-checked]': 'checked', '[class.mat-radio-disabled]': 'disabled', '[attr.id]': 'id', // Note: under normal conditions focus shouldn't land on this element, however it may be // programmatically set, for example inside of a focus trap, in this case we want to forward // the focus to the native element. '(focus)': '_inputElement.nativeElement.focus()', }, changeDetection: ChangeDetectionStrategy.OnPush, },] }, ]; /** * @nocollapse */ MatRadioButton.ctorParameters = function () { return [ { type: MatRadioGroup, decorators: [{ type: Optional },] }, { type: ElementRef, }, { type: Renderer2, }, { type: ChangeDetectorRef, }, { type: FocusMonitor, }, { type: UniqueSelectionDispatcher, }, ]; }; MatRadioButton.propDecorators = { 'id': [{ type: Input },], 'name': [{ type: Input },], 'ariaLabel': [{ type: Input, args: ['aria-label',] },], 'ariaLabelledby': [{ type: Input, args: ['aria-labelledby',] },], 'checked': [{ type: Input },], 'value': [{ type: Input },], 'align': [{ type: Input },], 'labelPosition': [{ type: Input },], 'disabled': [{ type: Input },], 'required': [{ type: Input },], 'change': [{ type: Output },], '_ripple': [{ type: ViewChild, args: [MatRipple,] },], '_inputElement': [{ type: ViewChild, args: ['input',] },], }; return MatRadioButton; }(_MatRadioButtonMixinBase)); var MatRadioModule = (function () { function MatRadioModule() { } MatRadioModule.decorators = [ { type: NgModule, args: [{ imports: [CommonModule, MatRippleModule, MatCommonModule, A11yModule], exports: [MatRadioGroup, MatRadioButton, MatCommonModule], providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER, VIEWPORT_RULER_PROVIDER], declarations: [MatRadioGroup, MatRadioButton], },] }, ]; /** * @nocollapse */ MatRadioModule.ctorParameters = function () { return []; }; return MatRadioModule; }()); /** * Generated bundle index. Do not edit. */ export { MatRadioModule, MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR, MatRadioChange, MatRadioGroupBase, _MatRadioGroupMixinBase, MatRadioGroup, MatRadioButtonBase, _MatRadioButtonMixinBase, MatRadioButton }; //# sourceMappingURL=radio.es5.js.map