material-slide-toggle.umd.js 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666
  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/core'), require('@angular/cdk/a11y'), require('@angular/cdk/bidi'), require('@angular/cdk/coercion'), require('@angular/forms'), require('@angular/material/core'), require('@angular/platform-browser/animations'), require('@angular/cdk/observers'), require('@angular/platform-browser')) :
  10. typeof define === 'function' && define.amd ? define('@angular/material/slide-toggle', ['exports', '@angular/core', '@angular/cdk/a11y', '@angular/cdk/bidi', '@angular/cdk/coercion', '@angular/forms', '@angular/material/core', '@angular/platform-browser/animations', '@angular/cdk/observers', '@angular/platform-browser'], factory) :
  11. (factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.slideToggle = {}),global.ng.core,global.ng.cdk.a11y,global.ng.cdk.bidi,global.ng.cdk.coercion,global.ng.forms,global.ng.material.core,global.ng.platformBrowser.animations,global.ng.cdk.observers,global.ng.platformBrowser));
  12. }(this, (function (exports,core,a11y,bidi,coercion,forms,core$1,animations,observers,platformBrowser) { '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 to be used to override the default options for `mat-slide-toggle`.
  43. * @type {?}
  44. */
  45. var MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS = new core.InjectionToken('mat-slide-toggle-default-options', {
  46. providedIn: 'root',
  47. factory: (/**
  48. * @return {?}
  49. */
  50. function () { return ({ disableToggleValue: false, disableDragValue: false }); })
  51. });
  52. /**
  53. * @fileoverview added by tsickle
  54. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  55. */
  56. // Increasing integer for generating unique ids for slide-toggle components.
  57. /** @type {?} */
  58. var nextUniqueId = 0;
  59. /**
  60. * \@docs-private
  61. * @type {?}
  62. */
  63. var MAT_SLIDE_TOGGLE_VALUE_ACCESSOR = {
  64. provide: forms.NG_VALUE_ACCESSOR,
  65. useExisting: core.forwardRef((/**
  66. * @return {?}
  67. */
  68. function () { return MatSlideToggle; })),
  69. multi: true
  70. };
  71. /**
  72. * Change event object emitted by a MatSlideToggle.
  73. */
  74. var /**
  75. * Change event object emitted by a MatSlideToggle.
  76. */
  77. MatSlideToggleChange = /** @class */ (function () {
  78. function MatSlideToggleChange(source, checked) {
  79. this.source = source;
  80. this.checked = checked;
  81. }
  82. return MatSlideToggleChange;
  83. }());
  84. // Boilerplate for applying mixins to MatSlideToggle.
  85. /**
  86. * \@docs-private
  87. */
  88. var
  89. // Boilerplate for applying mixins to MatSlideToggle.
  90. /**
  91. * \@docs-private
  92. */
  93. MatSlideToggleBase = /** @class */ (function () {
  94. function MatSlideToggleBase(_elementRef) {
  95. this._elementRef = _elementRef;
  96. }
  97. return MatSlideToggleBase;
  98. }());
  99. /** @type {?} */
  100. var _MatSlideToggleMixinBase = core$1.mixinTabIndex(core$1.mixinColor(core$1.mixinDisableRipple(core$1.mixinDisabled(MatSlideToggleBase)), 'accent'));
  101. /**
  102. * Represents a slidable "switch" toggle that can be moved between on and off.
  103. */
  104. var MatSlideToggle = /** @class */ (function (_super) {
  105. __extends(MatSlideToggle, _super);
  106. function MatSlideToggle(elementRef, _focusMonitor, _changeDetectorRef, tabIndex, _ngZone, defaults, _animationMode, _dir) {
  107. var _this = _super.call(this, elementRef) || this;
  108. _this._focusMonitor = _focusMonitor;
  109. _this._changeDetectorRef = _changeDetectorRef;
  110. _this._ngZone = _ngZone;
  111. _this.defaults = defaults;
  112. _this._animationMode = _animationMode;
  113. _this._dir = _dir;
  114. _this._onChange = (/**
  115. * @param {?} _
  116. * @return {?}
  117. */
  118. function (_) { });
  119. _this._onTouched = (/**
  120. * @return {?}
  121. */
  122. function () { });
  123. _this._uniqueId = "mat-slide-toggle-" + ++nextUniqueId;
  124. _this._required = false;
  125. _this._checked = false;
  126. /**
  127. * Whether the thumb is currently being dragged.
  128. */
  129. _this._dragging = false;
  130. /**
  131. * Name value will be applied to the input element if present.
  132. */
  133. _this.name = null;
  134. /**
  135. * A unique id for the slide-toggle input. If none is supplied, it will be auto-generated.
  136. */
  137. _this.id = _this._uniqueId;
  138. /**
  139. * Whether the label should appear after or before the slide-toggle. Defaults to 'after'.
  140. */
  141. _this.labelPosition = 'after';
  142. /**
  143. * Used to set the aria-label attribute on the underlying input element.
  144. */
  145. _this.ariaLabel = null;
  146. /**
  147. * Used to set the aria-labelledby attribute on the underlying input element.
  148. */
  149. _this.ariaLabelledby = null;
  150. /**
  151. * An event will be dispatched each time the slide-toggle changes its value.
  152. */
  153. _this.change = new core.EventEmitter();
  154. /**
  155. * An event will be dispatched each time the slide-toggle input is toggled.
  156. * This event is always emitted when the user toggles the slide toggle, but this does not mean
  157. * the slide toggle's value has changed. The event does not fire when the user drags to change
  158. * the slide toggle value.
  159. */
  160. _this.toggleChange = new core.EventEmitter();
  161. /**
  162. * An event will be dispatched each time the slide-toggle is dragged.
  163. * This event is always emitted when the user drags the slide toggle to make a change greater
  164. * than 50%. It does not mean the slide toggle's value is changed. The event is not emitted when
  165. * the user toggles the slide toggle to change its value.
  166. */
  167. _this.dragChange = new core.EventEmitter();
  168. _this.tabIndex = parseInt(tabIndex) || 0;
  169. return _this;
  170. }
  171. Object.defineProperty(MatSlideToggle.prototype, "required", {
  172. /** Whether the slide-toggle is required. */
  173. get: /**
  174. * Whether the slide-toggle is required.
  175. * @return {?}
  176. */
  177. function () { return this._required; },
  178. set: /**
  179. * @param {?} value
  180. * @return {?}
  181. */
  182. function (value) { this._required = coercion.coerceBooleanProperty(value); },
  183. enumerable: true,
  184. configurable: true
  185. });
  186. Object.defineProperty(MatSlideToggle.prototype, "checked", {
  187. /** Whether the slide-toggle element is checked or not. */
  188. get: /**
  189. * Whether the slide-toggle element is checked or not.
  190. * @return {?}
  191. */
  192. function () { return this._checked; },
  193. set: /**
  194. * @param {?} value
  195. * @return {?}
  196. */
  197. function (value) {
  198. this._checked = coercion.coerceBooleanProperty(value);
  199. this._changeDetectorRef.markForCheck();
  200. },
  201. enumerable: true,
  202. configurable: true
  203. });
  204. Object.defineProperty(MatSlideToggle.prototype, "inputId", {
  205. /** Returns the unique id for the visual hidden input. */
  206. get: /**
  207. * Returns the unique id for the visual hidden input.
  208. * @return {?}
  209. */
  210. function () { return (this.id || this._uniqueId) + "-input"; },
  211. enumerable: true,
  212. configurable: true
  213. });
  214. /**
  215. * @return {?}
  216. */
  217. MatSlideToggle.prototype.ngAfterContentInit = /**
  218. * @return {?}
  219. */
  220. function () {
  221. var _this = this;
  222. this._focusMonitor
  223. .monitor(this._elementRef, true)
  224. .subscribe((/**
  225. * @param {?} focusOrigin
  226. * @return {?}
  227. */
  228. function (focusOrigin) {
  229. if (!focusOrigin) {
  230. // When a focused element becomes disabled, the browser *immediately* fires a blur event.
  231. // Angular does not expect events to be raised during change detection, so any state
  232. // change (such as a form control's 'ng-touched') will cause a changed-after-checked
  233. // error. See https://github.com/angular/angular/issues/17793. To work around this,
  234. // we defer telling the form control it has been touched until the next tick.
  235. Promise.resolve().then((/**
  236. * @return {?}
  237. */
  238. function () { return _this._onTouched(); }));
  239. }
  240. }));
  241. };
  242. /**
  243. * @return {?}
  244. */
  245. MatSlideToggle.prototype.ngOnDestroy = /**
  246. * @return {?}
  247. */
  248. function () {
  249. this._focusMonitor.stopMonitoring(this._elementRef);
  250. };
  251. /** Method being called whenever the underlying input emits a change event. */
  252. /**
  253. * Method being called whenever the underlying input emits a change event.
  254. * @param {?} event
  255. * @return {?}
  256. */
  257. MatSlideToggle.prototype._onChangeEvent = /**
  258. * Method being called whenever the underlying input emits a change event.
  259. * @param {?} event
  260. * @return {?}
  261. */
  262. function (event) {
  263. // We always have to stop propagation on the change event.
  264. // Otherwise the change event, from the input element, will bubble up and
  265. // emit its event object to the component's `change` output.
  266. event.stopPropagation();
  267. if (!this._dragging) {
  268. this.toggleChange.emit();
  269. }
  270. // Releasing the pointer over the `<label>` element while dragging triggers another
  271. // click event on the `<label>` element. This means that the checked state of the underlying
  272. // input changed unintentionally and needs to be changed back. Or when the slide toggle's config
  273. // disabled toggle change event by setting `disableToggleValue: true`, the slide toggle's value
  274. // does not change, and the checked state of the underlying input needs to be changed back.
  275. if (this._dragging || this.defaults.disableToggleValue) {
  276. this._inputElement.nativeElement.checked = this.checked;
  277. return;
  278. }
  279. // Sync the value from the underlying input element with the component instance.
  280. this.checked = this._inputElement.nativeElement.checked;
  281. // Emit our custom change event only if the underlying input emitted one. This ensures that
  282. // there is no change event, when the checked state changes programmatically.
  283. this._emitChangeEvent();
  284. };
  285. /** Method being called whenever the slide-toggle has been clicked. */
  286. /**
  287. * Method being called whenever the slide-toggle has been clicked.
  288. * @param {?} event
  289. * @return {?}
  290. */
  291. MatSlideToggle.prototype._onInputClick = /**
  292. * Method being called whenever the slide-toggle has been clicked.
  293. * @param {?} event
  294. * @return {?}
  295. */
  296. function (event) {
  297. // We have to stop propagation for click events on the visual hidden input element.
  298. // By default, when a user clicks on a label element, a generated click event will be
  299. // dispatched on the associated input element. Since we are using a label element as our
  300. // root container, the click event on the `slide-toggle` will be executed twice.
  301. // The real click event will bubble up, and the generated click event also tries to bubble up.
  302. // This will lead to multiple click events.
  303. // Preventing bubbling for the second event will solve that issue.
  304. event.stopPropagation();
  305. };
  306. /** Implemented as part of ControlValueAccessor. */
  307. /**
  308. * Implemented as part of ControlValueAccessor.
  309. * @param {?} value
  310. * @return {?}
  311. */
  312. MatSlideToggle.prototype.writeValue = /**
  313. * Implemented as part of ControlValueAccessor.
  314. * @param {?} value
  315. * @return {?}
  316. */
  317. function (value) {
  318. this.checked = !!value;
  319. };
  320. /** Implemented as part of ControlValueAccessor. */
  321. /**
  322. * Implemented as part of ControlValueAccessor.
  323. * @param {?} fn
  324. * @return {?}
  325. */
  326. MatSlideToggle.prototype.registerOnChange = /**
  327. * Implemented as part of ControlValueAccessor.
  328. * @param {?} fn
  329. * @return {?}
  330. */
  331. function (fn) {
  332. this._onChange = fn;
  333. };
  334. /** Implemented as part of ControlValueAccessor. */
  335. /**
  336. * Implemented as part of ControlValueAccessor.
  337. * @param {?} fn
  338. * @return {?}
  339. */
  340. MatSlideToggle.prototype.registerOnTouched = /**
  341. * Implemented as part of ControlValueAccessor.
  342. * @param {?} fn
  343. * @return {?}
  344. */
  345. function (fn) {
  346. this._onTouched = fn;
  347. };
  348. /** Implemented as a part of ControlValueAccessor. */
  349. /**
  350. * Implemented as a part of ControlValueAccessor.
  351. * @param {?} isDisabled
  352. * @return {?}
  353. */
  354. MatSlideToggle.prototype.setDisabledState = /**
  355. * Implemented as a part of ControlValueAccessor.
  356. * @param {?} isDisabled
  357. * @return {?}
  358. */
  359. function (isDisabled) {
  360. this.disabled = isDisabled;
  361. this._changeDetectorRef.markForCheck();
  362. };
  363. /** Focuses the slide-toggle. */
  364. /**
  365. * Focuses the slide-toggle.
  366. * @param {?=} options
  367. * @return {?}
  368. */
  369. MatSlideToggle.prototype.focus = /**
  370. * Focuses the slide-toggle.
  371. * @param {?=} options
  372. * @return {?}
  373. */
  374. function (options) {
  375. this._focusMonitor.focusVia(this._inputElement, 'keyboard', options);
  376. };
  377. /** Toggles the checked state of the slide-toggle. */
  378. /**
  379. * Toggles the checked state of the slide-toggle.
  380. * @return {?}
  381. */
  382. MatSlideToggle.prototype.toggle = /**
  383. * Toggles the checked state of the slide-toggle.
  384. * @return {?}
  385. */
  386. function () {
  387. this.checked = !this.checked;
  388. this._onChange(this.checked);
  389. };
  390. /**
  391. * Emits a change event on the `change` output. Also notifies the FormControl about the change.
  392. */
  393. /**
  394. * Emits a change event on the `change` output. Also notifies the FormControl about the change.
  395. * @private
  396. * @return {?}
  397. */
  398. MatSlideToggle.prototype._emitChangeEvent = /**
  399. * Emits a change event on the `change` output. Also notifies the FormControl about the change.
  400. * @private
  401. * @return {?}
  402. */
  403. function () {
  404. this._onChange(this.checked);
  405. this.change.emit(new MatSlideToggleChange(this, this.checked));
  406. };
  407. /** Retrieves the percentage of thumb from the moved distance. Percentage as fraction of 100. */
  408. /**
  409. * Retrieves the percentage of thumb from the moved distance. Percentage as fraction of 100.
  410. * @private
  411. * @param {?} distance
  412. * @return {?}
  413. */
  414. MatSlideToggle.prototype._getDragPercentage = /**
  415. * Retrieves the percentage of thumb from the moved distance. Percentage as fraction of 100.
  416. * @private
  417. * @param {?} distance
  418. * @return {?}
  419. */
  420. function (distance) {
  421. /** @type {?} */
  422. var percentage = (distance / this._thumbBarWidth) * 100;
  423. // When the toggle was initially checked, then we have to start the drag at the end.
  424. if (this._previousChecked) {
  425. percentage += 100;
  426. }
  427. return Math.max(0, Math.min(percentage, 100));
  428. };
  429. /**
  430. * @return {?}
  431. */
  432. MatSlideToggle.prototype._onDragStart = /**
  433. * @return {?}
  434. */
  435. function () {
  436. if (!this.disabled && !this._dragging) {
  437. /** @type {?} */
  438. var thumbEl = this._thumbEl.nativeElement;
  439. this._thumbBarWidth = this._thumbBarEl.nativeElement.clientWidth - thumbEl.clientWidth;
  440. thumbEl.classList.add('mat-dragging');
  441. this._previousChecked = this.checked;
  442. this._dragging = true;
  443. }
  444. };
  445. /**
  446. * @param {?} event
  447. * @return {?}
  448. */
  449. MatSlideToggle.prototype._onDrag = /**
  450. * @param {?} event
  451. * @return {?}
  452. */
  453. function (event) {
  454. if (this._dragging) {
  455. /** @type {?} */
  456. var direction = this._dir && this._dir.value === 'rtl' ? -1 : 1;
  457. this._dragPercentage = this._getDragPercentage(event.deltaX * direction);
  458. // Calculate the moved distance based on the thumb bar width.
  459. /** @type {?} */
  460. var dragX = (this._dragPercentage / 100) * this._thumbBarWidth * direction;
  461. this._thumbEl.nativeElement.style.transform = "translate3d(" + dragX + "px, 0, 0)";
  462. }
  463. };
  464. /**
  465. * @return {?}
  466. */
  467. MatSlideToggle.prototype._onDragEnd = /**
  468. * @return {?}
  469. */
  470. function () {
  471. var _this = this;
  472. if (this._dragging) {
  473. /** @type {?} */
  474. var newCheckedValue = this._dragPercentage > 50;
  475. if (newCheckedValue !== this.checked) {
  476. this.dragChange.emit();
  477. if (!this.defaults.disableDragValue) {
  478. this.checked = newCheckedValue;
  479. this._emitChangeEvent();
  480. }
  481. }
  482. // The drag should be stopped outside of the current event handler, otherwise the
  483. // click event will be fired before it and will revert the drag change.
  484. this._ngZone.runOutsideAngular((/**
  485. * @return {?}
  486. */
  487. function () { return setTimeout((/**
  488. * @return {?}
  489. */
  490. function () {
  491. if (_this._dragging) {
  492. _this._dragging = false;
  493. _this._thumbEl.nativeElement.classList.remove('mat-dragging');
  494. // Reset the transform because the component will take care
  495. // of the thumb position after drag.
  496. _this._thumbEl.nativeElement.style.transform = '';
  497. }
  498. })); }));
  499. }
  500. };
  501. /** Method being called whenever the label text changes. */
  502. /**
  503. * Method being called whenever the label text changes.
  504. * @return {?}
  505. */
  506. MatSlideToggle.prototype._onLabelTextChange = /**
  507. * Method being called whenever the label text changes.
  508. * @return {?}
  509. */
  510. function () {
  511. // Since the event of the `cdkObserveContent` directive runs outside of the zone, the
  512. // slide-toggle component will be only marked for check, but no actual change detection runs
  513. // automatically. Instead of going back into the zone in order to trigger a change detection
  514. // which causes *all* components to be checked (if explicitly marked or not using OnPush),
  515. // we only trigger an explicit change detection for the slide-toggle view and it's children.
  516. this._changeDetectorRef.detectChanges();
  517. };
  518. MatSlideToggle.decorators = [
  519. { type: core.Component, args: [{selector: 'mat-slide-toggle',
  520. exportAs: 'matSlideToggle',
  521. host: {
  522. 'class': 'mat-slide-toggle',
  523. '[id]': 'id',
  524. // Needs to be `-1` so it can still receive programmatic focus.
  525. '[attr.tabindex]': 'disabled ? null : -1',
  526. '[class.mat-checked]': 'checked',
  527. '[class.mat-disabled]': 'disabled',
  528. '[class.mat-slide-toggle-label-before]': 'labelPosition == "before"',
  529. '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
  530. '(focus)': '_inputElement.nativeElement.focus()',
  531. },
  532. template: "<label [attr.for]=\"inputId\" class=\"mat-slide-toggle-label\" #label><div #toggleBar class=\"mat-slide-toggle-bar\" [class.mat-slide-toggle-bar-no-side-margin]=\"!labelContent.textContent || !labelContent.textContent.trim()\"><input #input class=\"mat-slide-toggle-input cdk-visually-hidden\" type=\"checkbox\" role=\"switch\" [id]=\"inputId\" [required]=\"required\" [tabIndex]=\"tabIndex\" [checked]=\"checked\" [disabled]=\"disabled\" [attr.name]=\"name\" [attr.aria-checked]=\"checked.toString()\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (change)=\"_onChangeEvent($event)\" (click)=\"_onInputClick($event)\"><div class=\"mat-slide-toggle-thumb-container\" #thumbContainer (slidestart)=\"_onDragStart()\" (slide)=\"_onDrag($event)\" (slideend)=\"_onDragEnd()\"><div class=\"mat-slide-toggle-thumb\"></div><div class=\"mat-slide-toggle-ripple\" mat-ripple [matRippleTrigger]=\"label\" [matRippleDisabled]=\"disableRipple || disabled\" [matRippleCentered]=\"true\" [matRippleRadius]=\"20\" [matRippleAnimation]=\"{enterDuration: 150}\"><div class=\"mat-ripple-element mat-slide-toggle-persistent-ripple\"></div></div></div></div><span class=\"mat-slide-toggle-content\" #labelContent (cdkObserveContent)=\"_onLabelTextChange()\"><span style=\"display:none\">&nbsp;</span><ng-content></ng-content></span></label>",
  533. styles: [".mat-slide-toggle{display:inline-block;height:24px;max-width:100%;line-height:24px;white-space:nowrap;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(16px,0,0)}[dir=rtl] .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(-16px,0,0)}.mat-slide-toggle.mat-disabled{opacity:.38}.mat-slide-toggle.mat-disabled .mat-slide-toggle-label,.mat-slide-toggle.mat-disabled .mat-slide-toggle-thumb-container{cursor:default}.mat-slide-toggle-label{display:flex;flex:1;flex-direction:row;align-items:center;height:inherit;cursor:pointer}.mat-slide-toggle-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-slide-toggle-label-before .mat-slide-toggle-label{order:1}.mat-slide-toggle-label-before .mat-slide-toggle-bar{order:2}.mat-slide-toggle-bar,[dir=rtl] .mat-slide-toggle-label-before .mat-slide-toggle-bar{margin-right:8px;margin-left:0}.mat-slide-toggle-label-before .mat-slide-toggle-bar,[dir=rtl] .mat-slide-toggle-bar{margin-left:8px;margin-right:0}.mat-slide-toggle-bar-no-side-margin{margin-left:0;margin-right:0}.mat-slide-toggle-thumb-container{position:absolute;z-index:1;width:20px;height:20px;top:-3px;left:0;transform:translate3d(0,0,0);transition:all 80ms linear;transition-property:transform;cursor:-webkit-grab;cursor:grab}.mat-slide-toggle-thumb-container.mat-dragging{transition-duration:0s}.mat-slide-toggle-thumb-container:active{cursor:-webkit-grabbing;cursor:grabbing}._mat-animation-noopable .mat-slide-toggle-thumb-container{transition:none}[dir=rtl] .mat-slide-toggle-thumb-container{left:auto;right:0}.mat-slide-toggle-thumb{height:20px;width:20px;border-radius:50%}.mat-slide-toggle-bar{position:relative;width:36px;height:14px;flex-shrink:0;border-radius:8px}.mat-slide-toggle-input{bottom:0;left:10px}[dir=rtl] .mat-slide-toggle-input{left:auto;right:10px}.mat-slide-toggle-bar,.mat-slide-toggle-thumb{transition:all 80ms linear;transition-property:background-color;transition-delay:50ms}._mat-animation-noopable .mat-slide-toggle-bar,._mat-animation-noopable .mat-slide-toggle-thumb{transition:none}.mat-slide-toggle .mat-slide-toggle-ripple{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);height:40px;width:40px;z-index:1;pointer-events:none}.mat-slide-toggle .mat-slide-toggle-ripple .mat-ripple-element:not(.mat-slide-toggle-persistent-ripple){opacity:.12}.mat-slide-toggle-persistent-ripple{width:100%;height:100%;transform:none}.mat-slide-toggle-bar:hover .mat-slide-toggle-persistent-ripple{opacity:.04}.mat-slide-toggle:not(.mat-disabled).cdk-keyboard-focused .mat-slide-toggle-persistent-ripple{opacity:.12}.mat-slide-toggle-persistent-ripple,.mat-slide-toggle.mat-disabled .mat-slide-toggle-bar:hover .mat-slide-toggle-persistent-ripple{opacity:0}@media (hover:none){.mat-slide-toggle-bar:hover .mat-slide-toggle-persistent-ripple{display:none}}@media (-ms-high-contrast:active){.mat-slide-toggle-thumb{background:#fff;border:1px solid #000}.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{background:#000;border:1px solid #fff}.mat-slide-toggle-bar{background:#fff}.mat-slide-toggle.cdk-keyboard-focused .mat-slide-toggle-bar{outline:1px dotted;outline-offset:5px}}@media (-ms-high-contrast:black-on-white){.mat-slide-toggle-bar{border:1px solid #000}}"],
  534. providers: [MAT_SLIDE_TOGGLE_VALUE_ACCESSOR],
  535. inputs: ['disabled', 'disableRipple', 'color', 'tabIndex'],
  536. encapsulation: core.ViewEncapsulation.None,
  537. changeDetection: core.ChangeDetectionStrategy.OnPush,
  538. },] },
  539. ];
  540. /** @nocollapse */
  541. MatSlideToggle.ctorParameters = function () { return [
  542. { type: core.ElementRef },
  543. { type: a11y.FocusMonitor },
  544. { type: core.ChangeDetectorRef },
  545. { type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] },
  546. { type: core.NgZone },
  547. { type: undefined, decorators: [{ type: core.Inject, args: [MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS,] }] },
  548. { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] },
  549. { type: bidi.Directionality, decorators: [{ type: core.Optional }] }
  550. ]; };
  551. MatSlideToggle.propDecorators = {
  552. _thumbEl: [{ type: core.ViewChild, args: ['thumbContainer', { static: false },] }],
  553. _thumbBarEl: [{ type: core.ViewChild, args: ['toggleBar', { static: false },] }],
  554. name: [{ type: core.Input }],
  555. id: [{ type: core.Input }],
  556. labelPosition: [{ type: core.Input }],
  557. ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
  558. ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
  559. required: [{ type: core.Input }],
  560. checked: [{ type: core.Input }],
  561. change: [{ type: core.Output }],
  562. toggleChange: [{ type: core.Output }],
  563. dragChange: [{ type: core.Output }],
  564. _inputElement: [{ type: core.ViewChild, args: ['input', { static: false },] }]
  565. };
  566. return MatSlideToggle;
  567. }(_MatSlideToggleMixinBase));
  568. /**
  569. * @fileoverview added by tsickle
  570. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  571. */
  572. /** @type {?} */
  573. var MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR = {
  574. provide: forms.NG_VALIDATORS,
  575. useExisting: core.forwardRef((/**
  576. * @return {?}
  577. */
  578. function () { return MatSlideToggleRequiredValidator; })),
  579. multi: true
  580. };
  581. /**
  582. * Validator for Material slide-toggle components with the required attribute in a
  583. * template-driven form. The default validator for required form controls asserts
  584. * that the control value is not undefined but that is not appropriate for a slide-toggle
  585. * where the value is always defined.
  586. *
  587. * Required slide-toggle form controls are valid when checked.
  588. */
  589. var MatSlideToggleRequiredValidator = /** @class */ (function (_super) {
  590. __extends(MatSlideToggleRequiredValidator, _super);
  591. function MatSlideToggleRequiredValidator() {
  592. return _super !== null && _super.apply(this, arguments) || this;
  593. }
  594. MatSlideToggleRequiredValidator.decorators = [
  595. { type: core.Directive, args: [{
  596. selector: "mat-slide-toggle[required][formControlName],\n mat-slide-toggle[required][formControl], mat-slide-toggle[required][ngModel]",
  597. providers: [MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR],
  598. },] },
  599. ];
  600. return MatSlideToggleRequiredValidator;
  601. }(forms.CheckboxRequiredValidator));
  602. /**
  603. * @fileoverview added by tsickle
  604. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  605. */
  606. /**
  607. * This module is used by both original and MDC-based slide-toggle implementations.
  608. */
  609. var _MatSlideToggleRequiredValidatorModule = /** @class */ (function () {
  610. function _MatSlideToggleRequiredValidatorModule() {
  611. }
  612. _MatSlideToggleRequiredValidatorModule.decorators = [
  613. { type: core.NgModule, args: [{
  614. exports: [MatSlideToggleRequiredValidator],
  615. declarations: [MatSlideToggleRequiredValidator],
  616. },] },
  617. ];
  618. return _MatSlideToggleRequiredValidatorModule;
  619. }());
  620. var MatSlideToggleModule = /** @class */ (function () {
  621. function MatSlideToggleModule() {
  622. }
  623. MatSlideToggleModule.decorators = [
  624. { type: core.NgModule, args: [{
  625. imports: [
  626. _MatSlideToggleRequiredValidatorModule,
  627. core$1.MatRippleModule,
  628. core$1.MatCommonModule,
  629. observers.ObserversModule,
  630. ],
  631. exports: [
  632. _MatSlideToggleRequiredValidatorModule,
  633. MatSlideToggle,
  634. core$1.MatCommonModule
  635. ],
  636. declarations: [MatSlideToggle],
  637. providers: [
  638. { provide: platformBrowser.HAMMER_GESTURE_CONFIG, useClass: core$1.GestureConfig }
  639. ],
  640. },] },
  641. ];
  642. return MatSlideToggleModule;
  643. }());
  644. exports._MatSlideToggleRequiredValidatorModule = _MatSlideToggleRequiredValidatorModule;
  645. exports.MatSlideToggleModule = MatSlideToggleModule;
  646. exports.MAT_SLIDE_TOGGLE_VALUE_ACCESSOR = MAT_SLIDE_TOGGLE_VALUE_ACCESSOR;
  647. exports.MatSlideToggleChange = MatSlideToggleChange;
  648. exports.MatSlideToggle = MatSlideToggle;
  649. exports.MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS = MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS;
  650. exports.MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR = MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR;
  651. exports.MatSlideToggleRequiredValidator = MatSlideToggleRequiredValidator;
  652. Object.defineProperty(exports, '__esModule', { value: true });
  653. })));
  654. //# sourceMappingURL=material-slide-toggle.umd.js.map