button-toggle.es5.js 33 KB

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