UNPKG

@angular/material

Version:
720 lines (709 loc) 28.4 kB
/** * @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 */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/a11y'), require('@angular/cdk/coercion'), require('@angular/core'), require('@angular/forms'), require('@angular/material/core'), require('@angular/cdk/collections')) : typeof define === 'function' && define.amd ? define('@angular/material/buttonToggle', ['exports', '@angular/cdk/a11y', '@angular/cdk/coercion', '@angular/core', '@angular/forms', '@angular/material/core', '@angular/cdk/collections'], factory) : (factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.buttonToggle = {}),global.ng.cdk.a11y,global.ng.cdk.coercion,global.ng.core,global.ng.forms,global.ng.material.core,global.ng.cdk.collections)); }(this, (function (exports,a11y,coercion,core,forms,core$1,collections) { 'use strict'; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT. See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. ***************************************************************************** */ /* global Reflect, Promise */ var extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; function __extends(d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); } /** * @fileoverview added by tsickle * @suppress {checkTypes} checked by tsc */ /** * \@docs-private */ var /** * \@docs-private */ MatButtonToggleGroupBase = /** @class */ (function () { function MatButtonToggleGroupBase() { } return MatButtonToggleGroupBase; }()); var /** @type {?} */ _MatButtonToggleGroupMixinBase = core$1.mixinDisabled(MatButtonToggleGroupBase); /** * Provider Expression that allows mat-button-toggle-group to register as a ControlValueAccessor. * This allows it to support [(ngModel)]. * \@docs-private */ var /** @type {?} */ MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR = { provide: forms.NG_VALUE_ACCESSOR, useExisting: core.forwardRef(function () { return MatButtonToggleGroup; }), multi: true }; /** * @deprecated Use `MatButtonToggleGroup` instead. * \@deletion-target 7.0.0 */ var /** * @deprecated Use `MatButtonToggleGroup` instead. * \@deletion-target 7.0.0 */ MatButtonToggleGroupMultiple = /** @class */ (function () { function MatButtonToggleGroupMultiple() { } return MatButtonToggleGroupMultiple; }()); var /** @type {?} */ _uniqueIdCounter = 0; /** * Change event object emitted by MatButtonToggle. */ var /** * Change event object emitted by MatButtonToggle. */ MatButtonToggleChange = /** @class */ (function () { function MatButtonToggleChange(source, value) { this.source = source; this.value = value; } 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; _this._vertical = false; _this._multiple = false; /** * 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++; /** * Event that emits whenever the value of the group changes. * Used to facilitate two-way data binding. * \@docs-private */ _this.valueChange = new core.EventEmitter(); /** * Event emitted when the group's value changes. */ _this.change = new core.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) { var _this = this; this._name = value; if (this._buttonToggles) { this._buttonToggles.forEach(function (toggle) { return toggle.name = _this._name; }); } }, 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 = coercion.coerceBooleanProperty(value); }, enumerable: true, configurable: true }); Object.defineProperty(MatButtonToggleGroup.prototype, "value", { get: /** * Value of the toggle group. * @return {?} */ function () { var /** @type {?} */ selected = this._selectionModel ? this._selectionModel.selected : []; if (this.multiple) { return selected.map(function (toggle) { return toggle.value; }); } return selected[0] ? selected[0].value : undefined; }, set: /** * @param {?} newValue * @return {?} */ function (newValue) { this._setSelectionByValue(newValue); this.valueChange.emit(this.value); }, enumerable: true, configurable: true }); Object.defineProperty(MatButtonToggleGroup.prototype, "selected", { /** Selected button toggles in the group. */ get: /** * Selected button toggles in the group. * @return {?} */ function () { var /** @type {?} */ selected = this._selectionModel.selected; return this.multiple ? selected : (selected[0] || null); }, enumerable: true, configurable: true }); Object.defineProperty(MatButtonToggleGroup.prototype, "multiple", { get: /** * Whether multiple button toggles can be selected. * @return {?} */ function () { return this._multiple; }, set: /** * @param {?} value * @return {?} */ function (value) { this._multiple = coercion.coerceBooleanProperty(value); }, enumerable: true, configurable: true }); /** * @return {?} */ MatButtonToggleGroup.prototype.ngOnInit = /** * @return {?} */ function () { this._selectionModel = new collections.SelectionModel(this.multiple, undefined, false); }; /** * @return {?} */ MatButtonToggleGroup.prototype.ngAfterContentInit = /** * @return {?} */ function () { (_a = this._selectionModel).select.apply(_a, this._buttonToggles.filter(function (toggle) { return toggle.checked; })); this._tempValue = undefined; var _a; }; /** * Sets the model value. Implemented as part of ControlValueAccessor. * @param value Value to be set to the model. */ /** * Sets the model value. Implemented as part of ControlValueAccessor. * @param {?} value Value to be set to the model. * @return {?} */ MatButtonToggleGroup.prototype.writeValue = /** * Sets the model value. Implemented as part of ControlValueAccessor. * @param {?} value Value to be set to the model. * @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; if (this._buttonToggles) { this._buttonToggles.forEach(function (toggle) { return toggle._markForCheck(); }); } }; /** 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 {?} */ selected = this.selected; var /** @type {?} */ source = Array.isArray(selected) ? selected[selected.length - 1] : selected; var /** @type {?} */ event = new MatButtonToggleChange(/** @type {?} */ ((source)), this.value); this._controlValueAccessorChangeFn(event.value); this.change.emit(event); }; /** * Syncs a button toggle's selected state with the model value. * @param toggle Toggle to be synced. * @param select Whether the toggle should be selected. * @param isUserInput Whether the change was a result of a user interaction. */ /** * Syncs a button toggle's selected state with the model value. * @param {?} toggle Toggle to be synced. * @param {?} select Whether the toggle should be selected. * @param {?=} isUserInput Whether the change was a result of a user interaction. * @return {?} */ MatButtonToggleGroup.prototype._syncButtonToggle = /** * Syncs a button toggle's selected state with the model value. * @param {?} toggle Toggle to be synced. * @param {?} select Whether the toggle should be selected. * @param {?=} isUserInput Whether the change was a result of a user interaction. * @return {?} */ function (toggle, select, isUserInput) { if (isUserInput === void 0) { isUserInput = false; } // Deselect the currently-selected toggle, if we're in single-selection // mode and the button being toggled isn't selected at the moment. if (!this.multiple && this.selected && !toggle.checked) { (/** @type {?} */ (this.selected)).checked = false; } if (select) { this._selectionModel.select(toggle); } else { this._selectionModel.deselect(toggle); } // Only emit the change event for user input. if (isUserInput) { this._emitChangeEvent(); } // Note: we emit this one no matter whether it was a user interaction, because // it is used by Angular to sync up the two-way data binding. this.valueChange.emit(this.value); }; /** Checks whether a button toggle is selected. */ /** * Checks whether a button toggle is selected. * @param {?} toggle * @return {?} */ MatButtonToggleGroup.prototype._isSelected = /** * Checks whether a button toggle is selected. * @param {?} toggle * @return {?} */ function (toggle) { return this._selectionModel.isSelected(toggle); }; /** Determines whether a button toggle should be checked on init. */ /** * Determines whether a button toggle should be checked on init. * @param {?} toggle * @return {?} */ MatButtonToggleGroup.prototype._isPrechecked = /** * Determines whether a button toggle should be checked on init. * @param {?} toggle * @return {?} */ function (toggle) { if (typeof this._tempValue === 'undefined') { return false; } if (this.multiple && Array.isArray(this._tempValue)) { return !!this._tempValue.find(function (value) { return toggle.value != null && value === toggle.value; }); } return toggle.value === this._tempValue; }; /** * Updates the selection state of the toggles in the group based on a value. * @param {?} value * @return {?} */ MatButtonToggleGroup.prototype._setSelectionByValue = /** * Updates the selection state of the toggles in the group based on a value. * @param {?} value * @return {?} */ function (value) { var _this = this; // If the toggles haven't been initialized yet, save the value for later. if (!this._buttonToggles) { this._tempValue = value; return; } if (this.multiple && value) { if (!Array.isArray(value)) { throw Error('Value must be an array in multiple-selection mode.'); } this._clearSelection(); value.forEach(function (currentValue) { return _this._selectValue(currentValue); }); } else { this._clearSelection(); this._selectValue(value); } }; /** * Clears the selected toggles. * @return {?} */ MatButtonToggleGroup.prototype._clearSelection = /** * Clears the selected toggles. * @return {?} */ function () { this._selectionModel.clear(); this._buttonToggles.forEach(function (toggle) { return toggle.checked = false; }); }; /** * Selects a value if there's a toggle that corresponds to it. * @param {?} value * @return {?} */ MatButtonToggleGroup.prototype._selectValue = /** * Selects a value if there's a toggle that corresponds to it. * @param {?} value * @return {?} */ function (value) { var /** @type {?} */ correspondingOption = this._buttonToggles.find(function (toggle) { return toggle.value != null && toggle.value === value; }); if (correspondingOption) { correspondingOption.checked = true; this._selectionModel.select(correspondingOption); } }; MatButtonToggleGroup.decorators = [ { type: core.Directive, args: [{ selector: 'mat-button-toggle-group', providers: [ MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, { provide: MatButtonToggleGroupMultiple, useExisting: MatButtonToggleGroup }, ], inputs: ['disabled'], host: { '[attr.role]': 'multiple ? "group" : "radiogroup"', 'class': 'mat-button-toggle-group', '[class.mat-button-toggle-vertical]': 'vertical' }, exportAs: 'matButtonToggleGroup', },] }, ]; /** @nocollapse */ MatButtonToggleGroup.ctorParameters = function () { return [ { type: core.ChangeDetectorRef, }, ]; }; MatButtonToggleGroup.propDecorators = { "_buttonToggles": [{ type: core.ContentChildren, args: [core.forwardRef(function () { return MatButtonToggle; }),] },], "name": [{ type: core.Input },], "vertical": [{ type: core.Input },], "value": [{ type: core.Input },], "valueChange": [{ type: core.Output },], "multiple": [{ type: core.Input },], "change": [{ type: core.Output },], }; return MatButtonToggleGroup; }(_MatButtonToggleGroupMixinBase)); /** * \@docs-private */ var /** * \@docs-private */ MatButtonToggleBase = /** @class */ (function () { function MatButtonToggleBase() { } return MatButtonToggleBase; }()); var /** @type {?} */ _MatButtonToggleMixinBase = core$1.mixinDisableRipple(MatButtonToggleBase); /** * Single button inside of a toggle group. */ var MatButtonToggle = /** @class */ (function (_super) { __extends(MatButtonToggle, _super); function MatButtonToggle(toggleGroup, _changeDetectorRef, _elementRef, _focusMonitor) { var _this = _super.call(this) || this; _this._changeDetectorRef = _changeDetectorRef; _this._elementRef = _elementRef; _this._focusMonitor = _focusMonitor; _this._isSingleSelector = false; _this._checked = false; /** * Users can specify the `aria-labelledby` attribute which will be forwarded to the input element */ _this.ariaLabelledby = null; _this._disabled = false; /** * Event emitted when the group value changes. */ _this.change = new core.EventEmitter(); _this.buttonToggleGroup = toggleGroup; return _this; } 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.buttonToggleGroup ? this.buttonToggleGroup._isSelected(this) : this._checked; }, set: /** * @param {?} value * @return {?} */ function (value) { var /** @type {?} */ newValue = coercion.coerceBooleanProperty(value); if (newValue !== this._checked) { this._checked = newValue; if (this.buttonToggleGroup) { this.buttonToggleGroup._syncButtonToggle(this, this._checked); } this._changeDetectorRef.markForCheck(); } }, enumerable: true, configurable: true }); Object.defineProperty(MatButtonToggle.prototype, "disabled", { get: /** * Whether the button is disabled. * @return {?} */ function () { return this._disabled || (this.buttonToggleGroup && this.buttonToggleGroup.disabled); }, set: /** * @param {?} value * @return {?} */ function (value) { this._disabled = coercion.coerceBooleanProperty(value); }, enumerable: true, configurable: true }); /** * @return {?} */ MatButtonToggle.prototype.ngOnInit = /** * @return {?} */ function () { this._isSingleSelector = this.buttonToggleGroup && !this.buttonToggleGroup.multiple; this._type = this._isSingleSelector ? 'radio' : 'checkbox'; this.id = this.id || "mat-button-toggle-" + _uniqueIdCounter++; if (this._isSingleSelector) { this.name = this.buttonToggleGroup.name; } if (this.buttonToggleGroup && this.buttonToggleGroup._isPrechecked(this)) { 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(); }; /** 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(); this._checked = this._isSingleSelector ? true : !this._checked; if (this.buttonToggleGroup) { this.buttonToggleGroup._syncButtonToggle(this, this._checked, true); this.buttonToggleGroup._onTouched(); } // Emit a change event when the native input does. this.change.emit(new MatButtonToggleChange(this, this.value)); }; /** * @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(); }; /** * 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 the group value changes, the button will not be notified. // Use `markForCheck` to explicit update button toggle's status. this._changeDetectorRef.markForCheck(); }; MatButtonToggle.decorators = [ { type: core.Component, args: [{selector: 'mat-button-toggle', template: "<label [attr.for]=\"inputId\" class=\"mat-button-toggle-label\" #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><div class=\"mat-button-toggle-ripple\" matRipple [matRippleTrigger]=\"label\" [matRippleDisabled]=\"this.disableRipple || this.disabled\"></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{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}.mat-button-toggle-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}"], encapsulation: core.ViewEncapsulation.None, exportAs: 'matButtonToggle', changeDetection: core.ChangeDetectionStrategy.OnPush, inputs: ['disableRipple'], host: { '[class.mat-button-toggle-standalone]': '!buttonToggleGroup', '[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: core.Optional },] }, { type: core.ChangeDetectorRef, }, { type: core.ElementRef, }, { type: a11y.FocusMonitor, }, ]; }; MatButtonToggle.propDecorators = { "ariaLabel": [{ type: core.Input, args: ['aria-label',] },], "ariaLabelledby": [{ type: core.Input, args: ['aria-labelledby',] },], "_inputElement": [{ type: core.ViewChild, args: ['input',] },], "id": [{ type: core.Input },], "name": [{ type: core.Input },], "value": [{ type: core.Input },], "checked": [{ type: core.Input },], "disabled": [{ type: core.Input },], "change": [{ type: core.Output },], }; return MatButtonToggle; }(_MatButtonToggleMixinBase)); /** * @fileoverview added by tsickle * @suppress {checkTypes} checked by tsc */ var MatButtonToggleModule = /** @class */ (function () { function MatButtonToggleModule() { } MatButtonToggleModule.decorators = [ { type: core.NgModule, args: [{ imports: [core$1.MatCommonModule, core$1.MatRippleModule], exports: [core$1.MatCommonModule, MatButtonToggleGroup, MatButtonToggle], declarations: [MatButtonToggleGroup, MatButtonToggle], },] }, ]; return MatButtonToggleModule; }()); exports.MatButtonToggleGroupBase = MatButtonToggleGroupBase; exports._MatButtonToggleGroupMixinBase = _MatButtonToggleGroupMixinBase; exports.MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR = MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR; exports.MatButtonToggleGroupMultiple = MatButtonToggleGroupMultiple; exports.MatButtonToggleChange = MatButtonToggleChange; exports.MatButtonToggleGroup = MatButtonToggleGroup; exports.MatButtonToggleBase = MatButtonToggleBase; exports._MatButtonToggleMixinBase = _MatButtonToggleMixinBase; exports.MatButtonToggle = MatButtonToggle; exports.MatButtonToggleModule = MatButtonToggleModule; Object.defineProperty(exports, '__esModule', { value: true }); }))); //# sourceMappingURL=material-button-toggle.umd.js.map