@angular/material
Version:
Angular Material
678 lines (670 loc) • 25.3 kB
JavaScript
/**
* @license
* Copyright Google LLC 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 { __extends } from 'tslib';
import * as tslib_1 from 'tslib';
import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { UNIQUE_SELECTION_DISPATCHER_PROVIDER, UniqueSelectionDispatcher } from '@angular/cdk/collections';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, Directive, ElementRef, EventEmitter, Input, NgModule, Optional, Output, ViewChild, ViewEncapsulation, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { MatCommonModule, mixinDisabled } from '@angular/material/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var MatButtonToggleGroupBase = /** @class */ (function () {
function MatButtonToggleGroupBase() {
}
return MatButtonToggleGroupBase;
}());
var _MatButtonToggleGroupMixinBase = mixinDisabled(MatButtonToggleGroupBase);
/**
* Provider Expression that allows mat-button-toggle-group to register as a ControlValueAccessor.
* This allows it to support [(ngModel)].
* \@docs-private
*/
var MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return MatButtonToggleGroup; }),
multi: true
};
var _uniqueIdCounter = 0;
/**
* Change event object emitted by MatButtonToggle.
*/
var MatButtonToggleChange = /** @class */ (function () {
function MatButtonToggleChange() {
}
return MatButtonToggleChange;
}());
/**
* Exclusive selection button toggle group that behaves like a radio-button group.
*/
var MatButtonToggleGroup = /** @class */ (function (_super) {
__extends(MatButtonToggleGroup, _super);
function MatButtonToggleGroup(_changeDetector) {
var _this = _super.call(this) || this;
_this._changeDetector = _changeDetector;
/**
* The method to be called in order to update ngModel.
* Now `ngModel` binding is not supported in multiple selection mode.
*/
_this._controlValueAccessorChangeFn = function () { };
/**
* onTouch function registered via registerOnTouch (ControlValueAccessor).
*/
_this._onTouched = function () { };
_this._name = "mat-button-toggle-group-" + _uniqueIdCounter++;
_this._vertical = false;
_this._value = null;
/**
* Event that emits whenever the value of the group changes.
* Used to facilitate two-way data binding.
* \@docs-private
*/
_this.valueChange = new EventEmitter();
_this._selected = null;
/**
* Event emitted when the group's value changes.
*/
_this.change = new EventEmitter();
return _this;
}
Object.defineProperty(MatButtonToggleGroup.prototype, "name", {
get: /**
* `name` attribute for the underlying `input` element.
* @return {?}
*/
function () { return this._name; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._name = value;
this._updateButtonToggleNames();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatButtonToggleGroup.prototype, "vertical", {
get: /**
* Whether the toggle group is vertical.
* @return {?}
*/
function () { return this._vertical; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) { this._vertical = coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatButtonToggleGroup.prototype, "value", {
get: /**
* Value of the toggle group.
* @return {?}
*/
function () { return this._value; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this._value != value) {
this._value = value;
this.valueChange.emit(value);
this._updateSelectedButtonToggleFromValue();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatButtonToggleGroup.prototype, "selected", {
get: /**
* The currently selected button toggle, should match the value.
* @return {?}
*/
function () { return this._selected; },
set: /**
* @param {?} selected
* @return {?}
*/
function (selected) {
this._selected = selected;
this.value = selected ? selected.value : null;
if (selected && !selected.checked) {
selected.checked = true;
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatButtonToggleGroup.prototype._updateButtonToggleNames = /**
* @return {?}
*/
function () {
var _this = this;
if (this._buttonToggles) {
this._buttonToggles.forEach(function (toggle) {
toggle.name = _this._name;
});
}
};
/**
* @return {?}
*/
MatButtonToggleGroup.prototype._updateSelectedButtonToggleFromValue = /**
* @return {?}
*/
function () {
var _this = this;
var /** @type {?} */ isAlreadySelected = this._selected != null && this._selected.value == this._value;
if (this._buttonToggles != null && !isAlreadySelected) {
var /** @type {?} */ 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. */
/**
* Dispatch change event with current selection and group value.
* @return {?}
*/
MatButtonToggleGroup.prototype._emitChangeEvent = /**
* Dispatch change event with current selection and group value.
* @return {?}
*/
function () {
var /** @type {?} */ event = new MatButtonToggleChange();
event.source = this._selected;
event.value = this._value;
this._controlValueAccessorChangeFn(event.value);
this.change.emit(event);
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} value
* @return {?}
*/
MatButtonToggleGroup.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.value = value;
this._changeDetector.markForCheck();
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
MatButtonToggleGroup.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._controlValueAccessorChangeFn = fn;
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
MatButtonToggleGroup.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} isDisabled
* @return {?}
*/
MatButtonToggleGroup.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
this._markButtonTogglesForCheck();
};
/**
* @return {?}
*/
MatButtonToggleGroup.prototype._markButtonTogglesForCheck = /**
* @return {?}
*/
function () {
if (this._buttonToggles) {
this._buttonToggles.forEach(function (toggle) { return toggle._markForCheck(); });
}
};
MatButtonToggleGroup.decorators = [
{ type: Directive, args: [{
selector: 'mat-button-toggle-group:not([multiple])',
providers: [MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR],
inputs: ['disabled'],
host: {
'role': 'radiogroup',
'class': 'mat-button-toggle-group',
'[class.mat-button-toggle-vertical]': 'vertical'
},
exportAs: 'matButtonToggleGroup',
},] },
];
/** @nocollapse */
MatButtonToggleGroup.ctorParameters = function () { return [
{ type: ChangeDetectorRef, },
]; };
MatButtonToggleGroup.propDecorators = {
"_buttonToggles": [{ type: ContentChildren, args: [forwardRef(function () { return MatButtonToggle; }),] },],
"name": [{ type: Input },],
"vertical": [{ type: Input },],
"value": [{ type: Input },],
"valueChange": [{ type: Output },],
"selected": [{ type: Input },],
"change": [{ type: Output },],
};
return MatButtonToggleGroup;
}(_MatButtonToggleGroupMixinBase));
/**
* Multiple selection button-toggle group. `ngModel` is not supported in this mode.
*/
var MatButtonToggleGroupMultiple = /** @class */ (function (_super) {
__extends(MatButtonToggleGroupMultiple, _super);
function MatButtonToggleGroupMultiple() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._vertical = false;
return _this;
}
Object.defineProperty(MatButtonToggleGroupMultiple.prototype, "vertical", {
get: /**
* Whether the toggle group is vertical.
* @return {?}
*/
function () { return this._vertical; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) { this._vertical = coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
MatButtonToggleGroupMultiple.decorators = [
{ type: Directive, args: [{
selector: 'mat-button-toggle-group[multiple]',
exportAs: 'matButtonToggleGroup',
inputs: ['disabled'],
host: {
'class': 'mat-button-toggle-group',
'[class.mat-button-toggle-vertical]': 'vertical',
'role': 'group'
}
},] },
];
/** @nocollapse */
MatButtonToggleGroupMultiple.ctorParameters = function () { return []; };
MatButtonToggleGroupMultiple.propDecorators = {
"vertical": [{ type: Input },],
};
return MatButtonToggleGroupMultiple;
}(_MatButtonToggleGroupMixinBase));
/**
* Single button inside of a toggle group.
*/
var MatButtonToggle = /** @class */ (function () {
function MatButtonToggle(toggleGroup, toggleGroupMultiple, _changeDetectorRef, _buttonToggleDispatcher, _elementRef, _focusMonitor) {
var _this = this;
this._changeDetectorRef = _changeDetectorRef;
this._buttonToggleDispatcher = _buttonToggleDispatcher;
this._elementRef = _elementRef;
this._focusMonitor = _focusMonitor;
/**
* 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;
/**
* Whether or not the button toggle is a single selection.
*/
this._isSingleSelector = false;
/**
* Unregister function for _buttonToggleDispatcher
*/
this._removeUniqueSelectionListener = function () { };
this._checked = false;
this._value = null;
this._disabled = false;
/**
* Event emitted when the group value changes.
*/
this.change = new EventEmitter();
this.buttonToggleGroup = toggleGroup;
this.buttonToggleGroupMultiple = toggleGroupMultiple;
if (this.buttonToggleGroup) {
this._removeUniqueSelectionListener =
_buttonToggleDispatcher.listen(function (id, name) {
if (id != _this.id && name == _this.name) {
_this.checked = false;
_this._changeDetectorRef.markForCheck();
}
});
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(MatButtonToggle.prototype, "inputId", {
/** Unique ID for the underlying `input` element. */
get: /**
* Unique ID for the underlying `input` element.
* @return {?}
*/
function () { return this.id + "-input"; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatButtonToggle.prototype, "checked", {
get: /**
* Whether the button is checked.
* @return {?}
*/
function () { return this._checked; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this._isSingleSelector && value) {
// Notify all button toggles with the same name (in the same group) to un-check.
this._buttonToggleDispatcher.notify(this.id, this.name);
this._changeDetectorRef.markForCheck();
}
this._checked = value;
if (value && this._isSingleSelector && this.buttonToggleGroup.value != this.value) {
this.buttonToggleGroup.selected = this;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatButtonToggle.prototype, "value", {
get: /**
* MatButtonToggleGroup reads this to assign its own value.
* @return {?}
*/
function () { return this._value; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this._value != value) {
if (this.buttonToggleGroup != null && this.checked) {
this.buttonToggleGroup.value = value;
}
this._value = value;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatButtonToggle.prototype, "disabled", {
get: /**
* Whether the button is disabled.
* @return {?}
*/
function () {
return this._disabled || (this.buttonToggleGroup != null && this.buttonToggleGroup.disabled) ||
(this.buttonToggleGroupMultiple != null && this.buttonToggleGroupMultiple.disabled);
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) { this._disabled = coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatButtonToggle.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.id == null) {
this.id = "mat-button-toggle-" + _uniqueIdCounter++;
}
if (this.buttonToggleGroup && this._value == this.buttonToggleGroup.value) {
this._checked = true;
}
this._focusMonitor.monitor(this._elementRef.nativeElement, true);
};
/** Focuses the button. */
/**
* Focuses the button.
* @return {?}
*/
MatButtonToggle.prototype.focus = /**
* Focuses the button.
* @return {?}
*/
function () {
this._inputElement.nativeElement.focus();
};
/**
* Toggle the state of the current button toggle.
* @return {?}
*/
MatButtonToggle.prototype._toggle = /**
* Toggle the state of the current button toggle.
* @return {?}
*/
function () {
this.checked = !this.checked;
};
/** Checks the button toggle due to an interaction with the underlying native input. */
/**
* Checks the button toggle due to an interaction with the underlying native input.
* @param {?} event
* @return {?}
*/
MatButtonToggle.prototype._onInputChange = /**
* Checks the button toggle due to an interaction with the underlying native input.
* @param {?} event
* @return {?}
*/
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.
var /** @type {?} */ groupValueChanged = this.buttonToggleGroup.selected != this;
this.checked = true;
this.buttonToggleGroup.selected = this;
this.buttonToggleGroup._onTouched();
if (groupValueChanged) {
this.buttonToggleGroup._emitChangeEvent();
}
}
else {
this._toggle();
}
// Emit a change event when the native input does.
this._emitChangeEvent();
};
/**
* @param {?} event
* @return {?}
*/
MatButtonToggle.prototype._onInputClick = /**
* @param {?} event
* @return {?}
*/
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 `slide-toggle` 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();
};
/**
* Dispatch change event with current value.
* @return {?}
*/
MatButtonToggle.prototype._emitChangeEvent = /**
* Dispatch change event with current value.
* @return {?}
*/
function () {
var /** @type {?} */ event = new MatButtonToggleChange();
event.source = this;
event.value = this._value;
this.change.emit(event);
};
// Unregister buttonToggleDispatcherListener on destroy
/**
* @return {?}
*/
MatButtonToggle.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._removeUniqueSelectionListener();
};
/**
* Marks the button toggle as needing checking for change detection.
* This method is exposed because the parent button toggle group will directly
* update bound properties of the radio button.
*/
/**
* Marks the button toggle as needing checking for change detection.
* This method is exposed because the parent button toggle group will directly
* update bound properties of the radio button.
* @return {?}
*/
MatButtonToggle.prototype._markForCheck = /**
* Marks the button toggle as needing checking for change detection.
* This method is exposed because the parent button toggle group will directly
* update bound properties of the radio button.
* @return {?}
*/
function () {
// When group value changes, the button will not be notified. Use `markForCheck` to explicit
// update button toggle's status
this._changeDetectorRef.markForCheck();
};
MatButtonToggle.decorators = [
{ type: Component, args: [{selector: 'mat-button-toggle',
template: "<label [attr.for]=\"inputId\" class=\"mat-button-toggle-label\"><input #input class=\"mat-button-toggle-input cdk-visually-hidden\" [type]=\"_type\" [id]=\"inputId\" [checked]=\"checked\" [disabled]=\"disabled || null\" [attr.name]=\"name\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (change)=\"_onInputChange($event)\" (click)=\"_onInputClick($event)\"><div class=\"mat-button-toggle-label-content\"><ng-content></ng-content></div></label><div class=\"mat-button-toggle-focus-overlay\"></div>",
styles: [".mat-button-toggle-group,.mat-button-toggle-standalone{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);position:relative;display:inline-flex;flex-direction:row;border-radius:2px;cursor:pointer;white-space:nowrap;overflow:hidden}.mat-button-toggle-vertical{flex-direction:column}.mat-button-toggle-vertical .mat-button-toggle-label-content{display:block}.mat-button-toggle-disabled .mat-button-toggle-label-content{cursor:default}.mat-button-toggle{white-space:nowrap;position:relative}.mat-button-toggle.cdk-keyboard-focused .mat-button-toggle-focus-overlay,.mat-button-toggle.cdk-program-focused .mat-button-toggle-focus-overlay{opacity:1}.mat-button-toggle-label-content{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;line-height:36px;padding:0 16px;cursor:pointer}.mat-button-toggle-label-content>*{vertical-align:middle}.mat-button-toggle-focus-overlay{border-radius:inherit;pointer-events:none;opacity:0;top:0;left:0;right:0;bottom:0;position:absolute}"],
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
exportAs: 'matButtonToggle',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class.mat-button-toggle-standalone]': '!buttonToggleGroup && !buttonToggleGroupMultiple',
'[class.mat-button-toggle-checked]': 'checked',
'[class.mat-button-toggle-disabled]': 'disabled',
'class': 'mat-button-toggle',
'[attr.id]': 'id',
}
},] },
];
/** @nocollapse */
MatButtonToggle.ctorParameters = function () { return [
{ type: MatButtonToggleGroup, decorators: [{ type: Optional },] },
{ type: MatButtonToggleGroupMultiple, decorators: [{ type: Optional },] },
{ type: ChangeDetectorRef, },
{ type: UniqueSelectionDispatcher, },
{ type: ElementRef, },
{ type: FocusMonitor, },
]; };
MatButtonToggle.propDecorators = {
"ariaLabel": [{ type: Input, args: ['aria-label',] },],
"ariaLabelledby": [{ type: Input, args: ['aria-labelledby',] },],
"_inputElement": [{ type: ViewChild, args: ['input',] },],
"id": [{ type: Input },],
"name": [{ type: Input },],
"checked": [{ type: Input },],
"value": [{ type: Input },],
"disabled": [{ type: Input },],
"change": [{ type: Output },],
};
return MatButtonToggle;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatButtonToggleModule = /** @class */ (function () {
function MatButtonToggleModule() {
}
MatButtonToggleModule.decorators = [
{ type: NgModule, args: [{
imports: [MatCommonModule, A11yModule],
exports: [
MatButtonToggleGroup,
MatButtonToggleGroupMultiple,
MatButtonToggle,
MatCommonModule,
],
declarations: [MatButtonToggleGroup, MatButtonToggleGroupMultiple, MatButtonToggle],
providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER]
},] },
];
/** @nocollapse */
MatButtonToggleModule.ctorParameters = function () { return []; };
return MatButtonToggleModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Generated bundle index. Do not edit.
*/
export { MatButtonToggleGroupBase, _MatButtonToggleGroupMixinBase, MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, MatButtonToggleChange, MatButtonToggleGroup, MatButtonToggleGroupMultiple, MatButtonToggle, MatButtonToggleModule };
//# sourceMappingURL=button-toggle.es5.js.map