slide-toggle.es5.js 29 KB

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