material-button-toggle.umd.js 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. (function (global, factory) {
  9. typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/a11y'), require('@angular/cdk/coercion'), require('@angular/cdk/collections'), require('@angular/core'), require('@angular/forms'), require('@angular/material/core')) :
  10. typeof define === 'function' && define.amd ? define('@angular/material/button-toggle', ['exports', '@angular/cdk/a11y', '@angular/cdk/coercion', '@angular/cdk/collections', '@angular/core', '@angular/forms', '@angular/material/core'], factory) :
  11. (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.cdk.collections,global.ng.core,global.ng.forms,global.ng.material.core));
  12. }(this, (function (exports,a11y,coercion,collections,core,forms,core$1) { 'use strict';
  13. /*! *****************************************************************************
  14. Copyright (c) Microsoft Corporation. All rights reserved.
  15. Licensed under the Apache License, Version 2.0 (the "License"); you may not use
  16. this file except in compliance with the License. You may obtain a copy of the
  17. License at http://www.apache.org/licenses/LICENSE-2.0
  18. THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  19. KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
  20. WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
  21. MERCHANTABLITY OR NON-INFRINGEMENT.
  22. See the Apache Version 2.0 License for specific language governing permissions
  23. and limitations under the License.
  24. ***************************************************************************** */
  25. /* global Reflect, Promise */
  26. var extendStatics = function(d, b) {
  27. extendStatics = Object.setPrototypeOf ||
  28. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  29. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  30. return extendStatics(d, b);
  31. };
  32. function __extends(d, b) {
  33. extendStatics(d, b);
  34. function __() { this.constructor = d; }
  35. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  36. }
  37. /**
  38. * @fileoverview added by tsickle
  39. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  40. */
  41. /**
  42. * Injection token that can be used to configure the
  43. * default options for all button toggles within an app.
  44. * @type {?}
  45. */
  46. var MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS = new core.InjectionToken('MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS');
  47. /**
  48. * Provider Expression that allows mat-button-toggle-group to register as a ControlValueAccessor.
  49. * This allows it to support [(ngModel)].
  50. * \@docs-private
  51. * @type {?}
  52. */
  53. var MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR = {
  54. provide: forms.NG_VALUE_ACCESSOR,
  55. useExisting: core.forwardRef((/**
  56. * @return {?}
  57. */
  58. function () { return MatButtonToggleGroup; })),
  59. multi: true
  60. };
  61. /**
  62. * @deprecated Use `MatButtonToggleGroup` instead.
  63. * \@breaking-change 8.0.0
  64. */
  65. var /**
  66. * @deprecated Use `MatButtonToggleGroup` instead.
  67. * \@breaking-change 8.0.0
  68. */
  69. MatButtonToggleGroupMultiple = /** @class */ (function () {
  70. function MatButtonToggleGroupMultiple() {
  71. }
  72. return MatButtonToggleGroupMultiple;
  73. }());
  74. /** @type {?} */
  75. var _uniqueIdCounter = 0;
  76. /**
  77. * Change event object emitted by MatButtonToggle.
  78. */
  79. var /**
  80. * Change event object emitted by MatButtonToggle.
  81. */
  82. MatButtonToggleChange = /** @class */ (function () {
  83. function MatButtonToggleChange(source, value) {
  84. this.source = source;
  85. this.value = value;
  86. }
  87. return MatButtonToggleChange;
  88. }());
  89. /**
  90. * Exclusive selection button toggle group that behaves like a radio-button group.
  91. */
  92. var MatButtonToggleGroup = /** @class */ (function () {
  93. function MatButtonToggleGroup(_changeDetector, defaultOptions) {
  94. this._changeDetector = _changeDetector;
  95. this._vertical = false;
  96. this._multiple = false;
  97. this._disabled = false;
  98. /**
  99. * The method to be called in order to update ngModel.
  100. * Now `ngModel` binding is not supported in multiple selection mode.
  101. */
  102. this._controlValueAccessorChangeFn = (/**
  103. * @return {?}
  104. */
  105. function () { });
  106. /**
  107. * onTouch function registered via registerOnTouch (ControlValueAccessor).
  108. */
  109. this._onTouched = (/**
  110. * @return {?}
  111. */
  112. function () { });
  113. this._name = "mat-button-toggle-group-" + _uniqueIdCounter++;
  114. /**
  115. * Event that emits whenever the value of the group changes.
  116. * Used to facilitate two-way data binding.
  117. * \@docs-private
  118. */
  119. this.valueChange = new core.EventEmitter();
  120. /**
  121. * Event emitted when the group's value changes.
  122. */
  123. this.change = new core.EventEmitter();
  124. this.appearance =
  125. defaultOptions && defaultOptions.appearance ? defaultOptions.appearance : 'standard';
  126. }
  127. Object.defineProperty(MatButtonToggleGroup.prototype, "name", {
  128. /** `name` attribute for the underlying `input` element. */
  129. get: /**
  130. * `name` attribute for the underlying `input` element.
  131. * @return {?}
  132. */
  133. function () { return this._name; },
  134. set: /**
  135. * @param {?} value
  136. * @return {?}
  137. */
  138. function (value) {
  139. var _this = this;
  140. this._name = value;
  141. if (this._buttonToggles) {
  142. this._buttonToggles.forEach((/**
  143. * @param {?} toggle
  144. * @return {?}
  145. */
  146. function (toggle) {
  147. toggle.name = _this._name;
  148. toggle._markForCheck();
  149. }));
  150. }
  151. },
  152. enumerable: true,
  153. configurable: true
  154. });
  155. Object.defineProperty(MatButtonToggleGroup.prototype, "vertical", {
  156. /** Whether the toggle group is vertical. */
  157. get: /**
  158. * Whether the toggle group is vertical.
  159. * @return {?}
  160. */
  161. function () { return this._vertical; },
  162. set: /**
  163. * @param {?} value
  164. * @return {?}
  165. */
  166. function (value) {
  167. this._vertical = coercion.coerceBooleanProperty(value);
  168. },
  169. enumerable: true,
  170. configurable: true
  171. });
  172. Object.defineProperty(MatButtonToggleGroup.prototype, "value", {
  173. /** Value of the toggle group. */
  174. get: /**
  175. * Value of the toggle group.
  176. * @return {?}
  177. */
  178. function () {
  179. /** @type {?} */
  180. var selected = this._selectionModel ? this._selectionModel.selected : [];
  181. if (this.multiple) {
  182. return selected.map((/**
  183. * @param {?} toggle
  184. * @return {?}
  185. */
  186. function (toggle) { return toggle.value; }));
  187. }
  188. return selected[0] ? selected[0].value : undefined;
  189. },
  190. set: /**
  191. * @param {?} newValue
  192. * @return {?}
  193. */
  194. function (newValue) {
  195. this._setSelectionByValue(newValue);
  196. this.valueChange.emit(this.value);
  197. },
  198. enumerable: true,
  199. configurable: true
  200. });
  201. Object.defineProperty(MatButtonToggleGroup.prototype, "selected", {
  202. /** Selected button toggles in the group. */
  203. get: /**
  204. * Selected button toggles in the group.
  205. * @return {?}
  206. */
  207. function () {
  208. /** @type {?} */
  209. var selected = this._selectionModel ? this._selectionModel.selected : [];
  210. return this.multiple ? selected : (selected[0] || null);
  211. },
  212. enumerable: true,
  213. configurable: true
  214. });
  215. Object.defineProperty(MatButtonToggleGroup.prototype, "multiple", {
  216. /** Whether multiple button toggles can be selected. */
  217. get: /**
  218. * Whether multiple button toggles can be selected.
  219. * @return {?}
  220. */
  221. function () { return this._multiple; },
  222. set: /**
  223. * @param {?} value
  224. * @return {?}
  225. */
  226. function (value) {
  227. this._multiple = coercion.coerceBooleanProperty(value);
  228. },
  229. enumerable: true,
  230. configurable: true
  231. });
  232. Object.defineProperty(MatButtonToggleGroup.prototype, "disabled", {
  233. /** Whether multiple button toggle group is disabled. */
  234. get: /**
  235. * Whether multiple button toggle group is disabled.
  236. * @return {?}
  237. */
  238. function () { return this._disabled; },
  239. set: /**
  240. * @param {?} value
  241. * @return {?}
  242. */
  243. function (value) {
  244. this._disabled = coercion.coerceBooleanProperty(value);
  245. if (this._buttonToggles) {
  246. this._buttonToggles.forEach((/**
  247. * @param {?} toggle
  248. * @return {?}
  249. */
  250. function (toggle) { return toggle._markForCheck(); }));
  251. }
  252. },
  253. enumerable: true,
  254. configurable: true
  255. });
  256. /**
  257. * @return {?}
  258. */
  259. MatButtonToggleGroup.prototype.ngOnInit = /**
  260. * @return {?}
  261. */
  262. function () {
  263. this._selectionModel = new collections.SelectionModel(this.multiple, undefined, false);
  264. };
  265. /**
  266. * @return {?}
  267. */
  268. MatButtonToggleGroup.prototype.ngAfterContentInit = /**
  269. * @return {?}
  270. */
  271. function () {
  272. var _a;
  273. (_a = this._selectionModel).select.apply(_a, this._buttonToggles.filter((/**
  274. * @param {?} toggle
  275. * @return {?}
  276. */
  277. function (toggle) { return toggle.checked; })));
  278. };
  279. /**
  280. * Sets the model value. Implemented as part of ControlValueAccessor.
  281. * @param value Value to be set to the model.
  282. */
  283. /**
  284. * Sets the model value. Implemented as part of ControlValueAccessor.
  285. * @param {?} value Value to be set to the model.
  286. * @return {?}
  287. */
  288. MatButtonToggleGroup.prototype.writeValue = /**
  289. * Sets the model value. Implemented as part of ControlValueAccessor.
  290. * @param {?} value Value to be set to the model.
  291. * @return {?}
  292. */
  293. function (value) {
  294. this.value = value;
  295. this._changeDetector.markForCheck();
  296. };
  297. // Implemented as part of ControlValueAccessor.
  298. // Implemented as part of ControlValueAccessor.
  299. /**
  300. * @param {?} fn
  301. * @return {?}
  302. */
  303. MatButtonToggleGroup.prototype.registerOnChange =
  304. // Implemented as part of ControlValueAccessor.
  305. /**
  306. * @param {?} fn
  307. * @return {?}
  308. */
  309. function (fn) {
  310. this._controlValueAccessorChangeFn = fn;
  311. };
  312. // Implemented as part of ControlValueAccessor.
  313. // Implemented as part of ControlValueAccessor.
  314. /**
  315. * @param {?} fn
  316. * @return {?}
  317. */
  318. MatButtonToggleGroup.prototype.registerOnTouched =
  319. // Implemented as part of ControlValueAccessor.
  320. /**
  321. * @param {?} fn
  322. * @return {?}
  323. */
  324. function (fn) {
  325. this._onTouched = fn;
  326. };
  327. // Implemented as part of ControlValueAccessor.
  328. // Implemented as part of ControlValueAccessor.
  329. /**
  330. * @param {?} isDisabled
  331. * @return {?}
  332. */
  333. MatButtonToggleGroup.prototype.setDisabledState =
  334. // Implemented as part of ControlValueAccessor.
  335. /**
  336. * @param {?} isDisabled
  337. * @return {?}
  338. */
  339. function (isDisabled) {
  340. this.disabled = isDisabled;
  341. };
  342. /** Dispatch change event with current selection and group value. */
  343. /**
  344. * Dispatch change event with current selection and group value.
  345. * @return {?}
  346. */
  347. MatButtonToggleGroup.prototype._emitChangeEvent = /**
  348. * Dispatch change event with current selection and group value.
  349. * @return {?}
  350. */
  351. function () {
  352. /** @type {?} */
  353. var selected = this.selected;
  354. /** @type {?} */
  355. var source = Array.isArray(selected) ? selected[selected.length - 1] : selected;
  356. /** @type {?} */
  357. var event = new MatButtonToggleChange((/** @type {?} */ (source)), this.value);
  358. this._controlValueAccessorChangeFn(event.value);
  359. this.change.emit(event);
  360. };
  361. /**
  362. * Syncs a button toggle's selected state with the model value.
  363. * @param toggle Toggle to be synced.
  364. * @param select Whether the toggle should be selected.
  365. * @param isUserInput Whether the change was a result of a user interaction.
  366. * @param deferEvents Whether to defer emitting the change events.
  367. */
  368. /**
  369. * Syncs a button toggle's selected state with the model value.
  370. * @param {?} toggle Toggle to be synced.
  371. * @param {?} select Whether the toggle should be selected.
  372. * @param {?=} isUserInput Whether the change was a result of a user interaction.
  373. * @param {?=} deferEvents Whether to defer emitting the change events.
  374. * @return {?}
  375. */
  376. MatButtonToggleGroup.prototype._syncButtonToggle = /**
  377. * Syncs a button toggle's selected state with the model value.
  378. * @param {?} toggle Toggle to be synced.
  379. * @param {?} select Whether the toggle should be selected.
  380. * @param {?=} isUserInput Whether the change was a result of a user interaction.
  381. * @param {?=} deferEvents Whether to defer emitting the change events.
  382. * @return {?}
  383. */
  384. function (toggle, select, isUserInput, deferEvents) {
  385. if (isUserInput === void 0) { isUserInput = false; }
  386. if (deferEvents === void 0) { deferEvents = false; }
  387. // Deselect the currently-selected toggle, if we're in single-selection
  388. // mode and the button being toggled isn't selected at the moment.
  389. if (!this.multiple && this.selected && !toggle.checked) {
  390. ((/** @type {?} */ (this.selected))).checked = false;
  391. }
  392. if (this._selectionModel) {
  393. if (select) {
  394. this._selectionModel.select(toggle);
  395. }
  396. else {
  397. this._selectionModel.deselect(toggle);
  398. }
  399. }
  400. else {
  401. deferEvents = true;
  402. }
  403. // We need to defer in some cases in order to avoid "changed after checked errors", however
  404. // the side-effect is that we may end up updating the model value out of sequence in others
  405. // The `deferEvents` flag allows us to decide whether to do it on a case-by-case basis.
  406. if (deferEvents) {
  407. }
  408. else {
  409. this._updateModelValue(isUserInput);
  410. }
  411. };
  412. /** Checks whether a button toggle is selected. */
  413. /**
  414. * Checks whether a button toggle is selected.
  415. * @param {?} toggle
  416. * @return {?}
  417. */
  418. MatButtonToggleGroup.prototype._isSelected = /**
  419. * Checks whether a button toggle is selected.
  420. * @param {?} toggle
  421. * @return {?}
  422. */
  423. function (toggle) {
  424. return this._selectionModel && this._selectionModel.isSelected(toggle);
  425. };
  426. /** Determines whether a button toggle should be checked on init. */
  427. /**
  428. * Determines whether a button toggle should be checked on init.
  429. * @param {?} toggle
  430. * @return {?}
  431. */
  432. MatButtonToggleGroup.prototype._isPrechecked = /**
  433. * Determines whether a button toggle should be checked on init.
  434. * @param {?} toggle
  435. * @return {?}
  436. */
  437. function (toggle) {
  438. if (typeof this._rawValue === 'undefined') {
  439. return false;
  440. }
  441. if (this.multiple && Array.isArray(this._rawValue)) {
  442. return this._rawValue.some((/**
  443. * @param {?} value
  444. * @return {?}
  445. */
  446. function (value) { return toggle.value != null && value === toggle.value; }));
  447. }
  448. return toggle.value === this._rawValue;
  449. };
  450. /** Updates the selection state of the toggles in the group based on a value. */
  451. /**
  452. * Updates the selection state of the toggles in the group based on a value.
  453. * @private
  454. * @param {?} value
  455. * @return {?}
  456. */
  457. MatButtonToggleGroup.prototype._setSelectionByValue = /**
  458. * Updates the selection state of the toggles in the group based on a value.
  459. * @private
  460. * @param {?} value
  461. * @return {?}
  462. */
  463. function (value) {
  464. var _this = this;
  465. this._rawValue = value;
  466. if (!this._buttonToggles) {
  467. return;
  468. }
  469. if (this.multiple && value) {
  470. if (!Array.isArray(value)) {
  471. throw Error('Value must be an array in multiple-selection mode.');
  472. }
  473. this._clearSelection();
  474. value.forEach((/**
  475. * @param {?} currentValue
  476. * @return {?}
  477. */
  478. function (currentValue) { return _this._selectValue(currentValue); }));
  479. }
  480. else {
  481. this._clearSelection();
  482. this._selectValue(value);
  483. }
  484. };
  485. /** Clears the selected toggles. */
  486. /**
  487. * Clears the selected toggles.
  488. * @private
  489. * @return {?}
  490. */
  491. MatButtonToggleGroup.prototype._clearSelection = /**
  492. * Clears the selected toggles.
  493. * @private
  494. * @return {?}
  495. */
  496. function () {
  497. this._selectionModel.clear();
  498. this._buttonToggles.forEach((/**
  499. * @param {?} toggle
  500. * @return {?}
  501. */
  502. function (toggle) { return toggle.checked = false; }));
  503. };
  504. /** Selects a value if there's a toggle that corresponds to it. */
  505. /**
  506. * Selects a value if there's a toggle that corresponds to it.
  507. * @private
  508. * @param {?} value
  509. * @return {?}
  510. */
  511. MatButtonToggleGroup.prototype._selectValue = /**
  512. * Selects a value if there's a toggle that corresponds to it.
  513. * @private
  514. * @param {?} value
  515. * @return {?}
  516. */
  517. function (value) {
  518. /** @type {?} */
  519. var correspondingOption = this._buttonToggles.find((/**
  520. * @param {?} toggle
  521. * @return {?}
  522. */
  523. function (toggle) {
  524. return toggle.value != null && toggle.value === value;
  525. }));
  526. if (correspondingOption) {
  527. correspondingOption.checked = true;
  528. this._selectionModel.select(correspondingOption);
  529. }
  530. };
  531. /** Syncs up the group's value with the model and emits the change event. */
  532. /**
  533. * Syncs up the group's value with the model and emits the change event.
  534. * @private
  535. * @param {?} isUserInput
  536. * @return {?}
  537. */
  538. MatButtonToggleGroup.prototype._updateModelValue = /**
  539. * Syncs up the group's value with the model and emits the change event.
  540. * @private
  541. * @param {?} isUserInput
  542. * @return {?}
  543. */
  544. function (isUserInput) {
  545. // Only emit the change event for user input.
  546. if (isUserInput) {
  547. this._emitChangeEvent();
  548. }
  549. // Note: we emit this one no matter whether it was a user interaction, because
  550. // it is used by Angular to sync up the two-way data binding.
  551. this.valueChange.emit(this.value);
  552. };
  553. MatButtonToggleGroup.decorators = [
  554. { type: core.Directive, args: [{
  555. selector: 'mat-button-toggle-group',
  556. providers: [
  557. MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR,
  558. { provide: MatButtonToggleGroupMultiple, useExisting: MatButtonToggleGroup },
  559. ],
  560. host: {
  561. 'role': 'group',
  562. 'class': 'mat-button-toggle-group',
  563. '[attr.aria-disabled]': 'disabled',
  564. '[class.mat-button-toggle-vertical]': 'vertical',
  565. '[class.mat-button-toggle-group-appearance-standard]': 'appearance === "standard"',
  566. },
  567. exportAs: 'matButtonToggleGroup',
  568. },] },
  569. ];
  570. /** @nocollapse */
  571. MatButtonToggleGroup.ctorParameters = function () { return [
  572. { type: core.ChangeDetectorRef },
  573. { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS,] }] }
  574. ]; };
  575. MatButtonToggleGroup.propDecorators = {
  576. _buttonToggles: [{ type: core.ContentChildren, args: [core.forwardRef((/**
  577. * @return {?}
  578. */
  579. function () { return MatButtonToggle; })),] }],
  580. appearance: [{ type: core.Input }],
  581. name: [{ type: core.Input }],
  582. vertical: [{ type: core.Input }],
  583. value: [{ type: core.Input }],
  584. valueChange: [{ type: core.Output }],
  585. multiple: [{ type: core.Input }],
  586. disabled: [{ type: core.Input }],
  587. change: [{ type: core.Output }]
  588. };
  589. return MatButtonToggleGroup;
  590. }());
  591. // Boilerplate for applying mixins to the MatButtonToggle class.
  592. /**
  593. * \@docs-private
  594. */
  595. var
  596. // Boilerplate for applying mixins to the MatButtonToggle class.
  597. /**
  598. * \@docs-private
  599. */
  600. MatButtonToggleBase = /** @class */ (function () {
  601. function MatButtonToggleBase() {
  602. }
  603. return MatButtonToggleBase;
  604. }());
  605. /** @type {?} */
  606. var _MatButtonToggleMixinBase = core$1.mixinDisableRipple(MatButtonToggleBase);
  607. /**
  608. * Single button inside of a toggle group.
  609. */
  610. var MatButtonToggle = /** @class */ (function (_super) {
  611. __extends(MatButtonToggle, _super);
  612. function MatButtonToggle(toggleGroup, _changeDetectorRef, _elementRef, _focusMonitor,
  613. // @breaking-change 8.0.0 `defaultTabIndex` to be made a required parameter.
  614. defaultTabIndex, defaultOptions) {
  615. var _this = _super.call(this) || this;
  616. _this._changeDetectorRef = _changeDetectorRef;
  617. _this._elementRef = _elementRef;
  618. _this._focusMonitor = _focusMonitor;
  619. _this._isSingleSelector = false;
  620. _this._checked = false;
  621. /**
  622. * Users can specify the `aria-labelledby` attribute which will be forwarded to the input element
  623. */
  624. _this.ariaLabelledby = null;
  625. _this._disabled = false;
  626. /**
  627. * Event emitted when the group value changes.
  628. */
  629. _this.change = new core.EventEmitter();
  630. /** @type {?} */
  631. var parsedTabIndex = Number(defaultTabIndex);
  632. _this.tabIndex = (parsedTabIndex || parsedTabIndex === 0) ? parsedTabIndex : null;
  633. _this.buttonToggleGroup = toggleGroup;
  634. _this.appearance =
  635. defaultOptions && defaultOptions.appearance ? defaultOptions.appearance : 'standard';
  636. return _this;
  637. }
  638. Object.defineProperty(MatButtonToggle.prototype, "buttonId", {
  639. /** Unique ID for the underlying `button` element. */
  640. get: /**
  641. * Unique ID for the underlying `button` element.
  642. * @return {?}
  643. */
  644. function () { return this.id + "-button"; },
  645. enumerable: true,
  646. configurable: true
  647. });
  648. Object.defineProperty(MatButtonToggle.prototype, "appearance", {
  649. /** The appearance style of the button. */
  650. get: /**
  651. * The appearance style of the button.
  652. * @return {?}
  653. */
  654. function () {
  655. return this.buttonToggleGroup ? this.buttonToggleGroup.appearance : this._appearance;
  656. },
  657. set: /**
  658. * @param {?} value
  659. * @return {?}
  660. */
  661. function (value) {
  662. this._appearance = value;
  663. },
  664. enumerable: true,
  665. configurable: true
  666. });
  667. Object.defineProperty(MatButtonToggle.prototype, "checked", {
  668. /** Whether the button is checked. */
  669. get: /**
  670. * Whether the button is checked.
  671. * @return {?}
  672. */
  673. function () {
  674. return this.buttonToggleGroup ? this.buttonToggleGroup._isSelected(this) : this._checked;
  675. },
  676. set: /**
  677. * @param {?} value
  678. * @return {?}
  679. */
  680. function (value) {
  681. /** @type {?} */
  682. var newValue = coercion.coerceBooleanProperty(value);
  683. if (newValue !== this._checked) {
  684. this._checked = newValue;
  685. if (this.buttonToggleGroup) {
  686. this.buttonToggleGroup._syncButtonToggle(this, this._checked);
  687. }
  688. this._changeDetectorRef.markForCheck();
  689. }
  690. },
  691. enumerable: true,
  692. configurable: true
  693. });
  694. Object.defineProperty(MatButtonToggle.prototype, "disabled", {
  695. /** Whether the button is disabled. */
  696. get: /**
  697. * Whether the button is disabled.
  698. * @return {?}
  699. */
  700. function () {
  701. return this._disabled || (this.buttonToggleGroup && this.buttonToggleGroup.disabled);
  702. },
  703. set: /**
  704. * @param {?} value
  705. * @return {?}
  706. */
  707. function (value) { this._disabled = coercion.coerceBooleanProperty(value); },
  708. enumerable: true,
  709. configurable: true
  710. });
  711. /**
  712. * @return {?}
  713. */
  714. MatButtonToggle.prototype.ngOnInit = /**
  715. * @return {?}
  716. */
  717. function () {
  718. this._isSingleSelector = this.buttonToggleGroup && !this.buttonToggleGroup.multiple;
  719. this._type = this._isSingleSelector ? 'radio' : 'checkbox';
  720. this.id = this.id || "mat-button-toggle-" + _uniqueIdCounter++;
  721. if (this._isSingleSelector) {
  722. this.name = this.buttonToggleGroup.name;
  723. }
  724. if (this.buttonToggleGroup && this.buttonToggleGroup._isPrechecked(this)) {
  725. this.checked = true;
  726. }
  727. this._focusMonitor.monitor(this._elementRef, true);
  728. };
  729. /**
  730. * @return {?}
  731. */
  732. MatButtonToggle.prototype.ngOnDestroy = /**
  733. * @return {?}
  734. */
  735. function () {
  736. /** @type {?} */
  737. var group = this.buttonToggleGroup;
  738. this._focusMonitor.stopMonitoring(this._elementRef);
  739. // Remove the toggle from the selection once it's destroyed. Needs to happen
  740. // on the next tick in order to avoid "changed after checked" errors.
  741. if (group && group._isSelected(this)) {
  742. group._syncButtonToggle(this, false, false, true);
  743. }
  744. };
  745. /** Focuses the button. */
  746. /**
  747. * Focuses the button.
  748. * @param {?=} options
  749. * @return {?}
  750. */
  751. MatButtonToggle.prototype.focus = /**
  752. * Focuses the button.
  753. * @param {?=} options
  754. * @return {?}
  755. */
  756. function (options) {
  757. this._buttonElement.nativeElement.focus(options);
  758. };
  759. /** Checks the button toggle due to an interaction with the underlying native button. */
  760. /**
  761. * Checks the button toggle due to an interaction with the underlying native button.
  762. * @return {?}
  763. */
  764. MatButtonToggle.prototype._onButtonClick = /**
  765. * Checks the button toggle due to an interaction with the underlying native button.
  766. * @return {?}
  767. */
  768. function () {
  769. /** @type {?} */
  770. var newChecked = this._isSingleSelector ? true : !this._checked;
  771. if (newChecked !== this._checked) {
  772. this._checked = newChecked;
  773. if (this.buttonToggleGroup) {
  774. this.buttonToggleGroup._syncButtonToggle(this, this._checked, true);
  775. this.buttonToggleGroup._onTouched();
  776. }
  777. }
  778. // Emit a change event when it's the single selector
  779. this.change.emit(new MatButtonToggleChange(this, this.value));
  780. };
  781. /**
  782. * Marks the button toggle as needing checking for change detection.
  783. * This method is exposed because the parent button toggle group will directly
  784. * update bound properties of the radio button.
  785. */
  786. /**
  787. * Marks the button toggle as needing checking for change detection.
  788. * This method is exposed because the parent button toggle group will directly
  789. * update bound properties of the radio button.
  790. * @return {?}
  791. */
  792. MatButtonToggle.prototype._markForCheck = /**
  793. * Marks the button toggle as needing checking for change detection.
  794. * This method is exposed because the parent button toggle group will directly
  795. * update bound properties of the radio button.
  796. * @return {?}
  797. */
  798. function () {
  799. // When the group value changes, the button will not be notified.
  800. // Use `markForCheck` to explicit update button toggle's status.
  801. this._changeDetectorRef.markForCheck();
  802. };
  803. MatButtonToggle.decorators = [
  804. { type: core.Component, args: [{selector: 'mat-button-toggle',
  805. template: "<button #button class=\"mat-button-toggle-button\" type=\"button\" [id]=\"buttonId\" [attr.tabindex]=\"disabled ? -1 : tabIndex\" [attr.aria-pressed]=\"checked\" [disabled]=\"disabled || null\" [attr.name]=\"name || null\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (click)=\"_onButtonClick()\"><div class=\"mat-button-toggle-label-content\"><ng-content></ng-content></div></button><div class=\"mat-button-toggle-focus-overlay\"></div><div class=\"mat-button-toggle-ripple\" matRipple [matRippleTrigger]=\"button\" [matRippleDisabled]=\"this.disableRipple || this.disabled\"></div>",
  806. styles: [".mat-button-toggle-group,.mat-button-toggle-standalone{position:relative;display:inline-flex;flex-direction:row;white-space:nowrap;overflow:hidden;border-radius:2px;-webkit-tap-highlight-color:transparent}@media (-ms-high-contrast:active){.mat-button-toggle-group,.mat-button-toggle-standalone{outline:solid 1px}}.mat-button-toggle-group-appearance-standard,.mat-button-toggle-standalone.mat-button-toggle-appearance-standard{border-radius:4px}@media (-ms-high-contrast:active){.mat-button-toggle-group-appearance-standard,.mat-button-toggle-standalone.mat-button-toggle-appearance-standard{outline:0}}.mat-button-toggle-vertical{flex-direction:column}.mat-button-toggle-vertical .mat-button-toggle-label-content{display:block}.mat-button-toggle{white-space:nowrap;position:relative}.mat-button-toggle .mat-icon svg{vertical-align:top}.mat-button-toggle.cdk-keyboard-focused .mat-button-toggle-focus-overlay{opacity:1}@media (-ms-high-contrast:active){.mat-button-toggle.cdk-keyboard-focused .mat-button-toggle-focus-overlay{opacity:.5}}.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay{opacity:.04}.mat-button-toggle-appearance-standard.cdk-keyboard-focused:not(.mat-button-toggle-disabled) .mat-button-toggle-focus-overlay{opacity:.12}@media (-ms-high-contrast:active){.mat-button-toggle-appearance-standard.cdk-keyboard-focused:not(.mat-button-toggle-disabled) .mat-button-toggle-focus-overlay{opacity:.5}}@media (hover:none){.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay{display:none}}.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;position:relative}.mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:48px;padding:0 12px}.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-checked .mat-button-toggle-focus-overlay{border-bottom:solid 36px}@media (-ms-high-contrast:active){.mat-button-toggle-checked .mat-button-toggle-focus-overlay{opacity:.5;height:0}}@media (-ms-high-contrast:active){.mat-button-toggle-checked.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay{border-bottom:solid 48px}}.mat-button-toggle .mat-button-toggle-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-button-toggle-button{border:0;background:0 0;color:inherit;padding:0;margin:0;font:inherit;outline:0;width:100%;cursor:pointer}.mat-button-toggle-disabled .mat-button-toggle-button{cursor:default}.mat-button-toggle-button::-moz-focus-inner{border:0}"],
  807. encapsulation: core.ViewEncapsulation.None,
  808. exportAs: 'matButtonToggle',
  809. changeDetection: core.ChangeDetectionStrategy.OnPush,
  810. inputs: ['disableRipple'],
  811. host: {
  812. '[class.mat-button-toggle-standalone]': '!buttonToggleGroup',
  813. '[class.mat-button-toggle-checked]': 'checked',
  814. '[class.mat-button-toggle-disabled]': 'disabled',
  815. '[class.mat-button-toggle-appearance-standard]': 'appearance === "standard"',
  816. 'class': 'mat-button-toggle',
  817. // Always reset the tabindex to -1 so it doesn't conflict with the one on the `button`,
  818. // but can still receive focus from things like cdkFocusInitial.
  819. '[attr.tabindex]': '-1',
  820. '[attr.id]': 'id',
  821. '[attr.name]': 'null',
  822. '(focus)': 'focus()',
  823. }
  824. },] },
  825. ];
  826. /** @nocollapse */
  827. MatButtonToggle.ctorParameters = function () { return [
  828. { type: MatButtonToggleGroup, decorators: [{ type: core.Optional }] },
  829. { type: core.ChangeDetectorRef },
  830. { type: core.ElementRef },
  831. { type: a11y.FocusMonitor },
  832. { type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] },
  833. { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS,] }] }
  834. ]; };
  835. MatButtonToggle.propDecorators = {
  836. ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
  837. ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
  838. _buttonElement: [{ type: core.ViewChild, args: ['button', { static: false },] }],
  839. id: [{ type: core.Input }],
  840. name: [{ type: core.Input }],
  841. value: [{ type: core.Input }],
  842. tabIndex: [{ type: core.Input }],
  843. appearance: [{ type: core.Input }],
  844. checked: [{ type: core.Input }],
  845. disabled: [{ type: core.Input }],
  846. change: [{ type: core.Output }]
  847. };
  848. return MatButtonToggle;
  849. }(_MatButtonToggleMixinBase));
  850. /**
  851. * @fileoverview added by tsickle
  852. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  853. */
  854. var MatButtonToggleModule = /** @class */ (function () {
  855. function MatButtonToggleModule() {
  856. }
  857. MatButtonToggleModule.decorators = [
  858. { type: core.NgModule, args: [{
  859. imports: [core$1.MatCommonModule, core$1.MatRippleModule],
  860. exports: [core$1.MatCommonModule, MatButtonToggleGroup, MatButtonToggle],
  861. declarations: [MatButtonToggleGroup, MatButtonToggle],
  862. },] },
  863. ];
  864. return MatButtonToggleModule;
  865. }());
  866. exports.MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS = MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS;
  867. exports.MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR = MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR;
  868. exports.MatButtonToggleGroupMultiple = MatButtonToggleGroupMultiple;
  869. exports.MatButtonToggleChange = MatButtonToggleChange;
  870. exports.MatButtonToggleGroup = MatButtonToggleGroup;
  871. exports.MatButtonToggle = MatButtonToggle;
  872. exports.MatButtonToggleModule = MatButtonToggleModule;
  873. Object.defineProperty(exports, '__esModule', { value: true });
  874. })));
  875. //# sourceMappingURL=material-button-toggle.umd.js.map