component.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. /**
  2. * @license
  3. * Copyright 2018 Google Inc.
  4. *
  5. * Permission is hereby granted, free of charge, to any person obtaining a copy
  6. * of this software and associated documentation files (the "Software"), to deal
  7. * in the Software without restriction, including without limitation the rights
  8. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  9. * copies of the Software, and to permit persons to whom the Software is
  10. * furnished to do so, subject to the following conditions:
  11. *
  12. * The above copyright notice and this permission notice shall be included in
  13. * all copies or substantial portions of the Software.
  14. *
  15. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  16. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  17. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  18. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  19. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  20. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  21. * THE SOFTWARE.
  22. */
  23. import { __assign, __extends, __makeTemplateObject, __read, __spreadArray } from "tslib";
  24. import { MDCComponent } from '@material/base/component';
  25. import { applyPassive } from '@material/dom/events';
  26. import { matches } from '@material/dom/ponyfill';
  27. import { MDCRipple } from '@material/ripple/component';
  28. import { MDCRippleFoundation } from '@material/ripple/foundation';
  29. import { safeAttrPrefix } from 'safevalues';
  30. import { safeElement } from 'safevalues/dom';
  31. import { MDCSwitchFoundation } from './foundation';
  32. /** MDC Switch */
  33. var MDCSwitch = /** @class */ (function (_super) {
  34. __extends(MDCSwitch, _super);
  35. function MDCSwitch() {
  36. var _this = _super !== null && _super.apply(this, arguments) || this;
  37. _this.rippleSurface = _this.createRipple();
  38. return _this;
  39. }
  40. MDCSwitch.attachTo = function (root) {
  41. return new MDCSwitch(root);
  42. };
  43. MDCSwitch.prototype.destroy = function () {
  44. _super.prototype.destroy.call(this);
  45. this.rippleSurface.destroy();
  46. this.nativeControl.removeEventListener('change', this.changeHandler);
  47. };
  48. MDCSwitch.prototype.initialSyncWithDOM = function () {
  49. var _this = this;
  50. this.changeHandler = function () {
  51. var _a;
  52. var args = [];
  53. for (var _i = 0; _i < arguments.length; _i++) {
  54. args[_i] = arguments[_i];
  55. }
  56. (_a = _this.foundation).handleChange.apply(_a, __spreadArray([], __read(args)));
  57. };
  58. this.nativeControl.addEventListener('change', this.changeHandler);
  59. // Sometimes the checked state of the input element is saved in the history.
  60. // The switch styling should match the checked state of the input element.
  61. // Do an initial sync between the native control and the foundation.
  62. this.checked = this.checked;
  63. };
  64. MDCSwitch.prototype.getDefaultFoundation = function () {
  65. var _this = this;
  66. // DO NOT INLINE this variable. For backward compatibility, foundations take
  67. // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
  68. // methods, we need a separate, strongly typed adapter variable.
  69. var adapter = {
  70. addClass: function (className) {
  71. _this.root.classList.add(className);
  72. },
  73. removeClass: function (className) {
  74. _this.root.classList.remove(className);
  75. },
  76. setNativeControlChecked: function (checked) { return _this.nativeControl.checked =
  77. checked; },
  78. setNativeControlDisabled: function (disabled) { return _this.nativeControl.disabled =
  79. disabled; },
  80. setNativeControlAttr: function (attr, value) {
  81. safeElement.setPrefixedAttribute([safeAttrPrefix(templateObject_1 || (templateObject_1 = __makeTemplateObject(["aria-"], ["aria-"])))], _this.nativeControl, attr, value);
  82. },
  83. };
  84. return new MDCSwitchFoundation(adapter);
  85. };
  86. Object.defineProperty(MDCSwitch.prototype, "ripple", {
  87. get: function () {
  88. return this.rippleSurface;
  89. },
  90. enumerable: false,
  91. configurable: true
  92. });
  93. Object.defineProperty(MDCSwitch.prototype, "checked", {
  94. get: function () {
  95. return this.nativeControl.checked;
  96. },
  97. set: function (checked) {
  98. this.foundation.setChecked(checked);
  99. },
  100. enumerable: false,
  101. configurable: true
  102. });
  103. Object.defineProperty(MDCSwitch.prototype, "disabled", {
  104. get: function () {
  105. return this.nativeControl.disabled;
  106. },
  107. set: function (disabled) {
  108. this.foundation.setDisabled(disabled);
  109. },
  110. enumerable: false,
  111. configurable: true
  112. });
  113. MDCSwitch.prototype.createRipple = function () {
  114. var _this = this;
  115. var RIPPLE_SURFACE_SELECTOR = MDCSwitchFoundation.strings.RIPPLE_SURFACE_SELECTOR;
  116. var rippleSurface = this.root.querySelector(RIPPLE_SURFACE_SELECTOR);
  117. // DO NOT INLINE this variable. For backward compatibility, foundations take
  118. // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
  119. // methods, we need a separate, strongly typed adapter variable.
  120. var adapter = __assign(__assign({}, MDCRipple.createAdapter(this)), { addClass: function (className) {
  121. rippleSurface.classList.add(className);
  122. }, computeBoundingRect: function () { return rippleSurface.getBoundingClientRect(); }, deregisterInteractionHandler: function (evtType, handler) {
  123. _this.nativeControl.removeEventListener(evtType, handler, applyPassive());
  124. }, isSurfaceActive: function () { return matches(_this.nativeControl, ':active'); }, isUnbounded: function () { return true; }, registerInteractionHandler: function (evtType, handler) {
  125. _this.nativeControl.addEventListener(evtType, handler, applyPassive());
  126. }, removeClass: function (className) {
  127. rippleSurface.classList.remove(className);
  128. }, updateCssVariable: function (varName, value) {
  129. rippleSurface.style.setProperty(varName, value);
  130. } });
  131. return new MDCRipple(this.root, new MDCRippleFoundation(adapter));
  132. };
  133. Object.defineProperty(MDCSwitch.prototype, "nativeControl", {
  134. get: function () {
  135. var NATIVE_CONTROL_SELECTOR = MDCSwitchFoundation.strings.NATIVE_CONTROL_SELECTOR;
  136. return this.root.querySelector(NATIVE_CONTROL_SELECTOR);
  137. },
  138. enumerable: false,
  139. configurable: true
  140. });
  141. return MDCSwitch;
  142. }(MDCComponent));
  143. export { MDCSwitch };
  144. var templateObject_1;
  145. //# sourceMappingURL=component.js.map