component.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. /**
  2. * @license
  3. * Copyright 2016 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 * as tslib_1 from "tslib";
  24. import { getCorrectEventName } from '@material/animation/util';
  25. import { MDCComponent } from '@material/base/component';
  26. import { applyPassive } from '@material/dom/events';
  27. import { matches } from '@material/dom/ponyfill';
  28. import { MDCRipple } from '@material/ripple/component';
  29. import { MDCRippleFoundation } from '@material/ripple/foundation';
  30. import { MDCCheckboxFoundation } from './foundation';
  31. var CB_PROTO_PROPS = ['checked', 'indeterminate'];
  32. var MDCCheckbox = /** @class */ (function (_super) {
  33. tslib_1.__extends(MDCCheckbox, _super);
  34. function MDCCheckbox() {
  35. var _this = _super !== null && _super.apply(this, arguments) || this;
  36. _this.ripple_ = _this.createRipple_();
  37. return _this;
  38. }
  39. MDCCheckbox.attachTo = function (root) {
  40. return new MDCCheckbox(root);
  41. };
  42. Object.defineProperty(MDCCheckbox.prototype, "ripple", {
  43. get: function () {
  44. return this.ripple_;
  45. },
  46. enumerable: true,
  47. configurable: true
  48. });
  49. Object.defineProperty(MDCCheckbox.prototype, "checked", {
  50. get: function () {
  51. return this.nativeControl_.checked;
  52. },
  53. set: function (checked) {
  54. this.nativeControl_.checked = checked;
  55. },
  56. enumerable: true,
  57. configurable: true
  58. });
  59. Object.defineProperty(MDCCheckbox.prototype, "indeterminate", {
  60. get: function () {
  61. return this.nativeControl_.indeterminate;
  62. },
  63. set: function (indeterminate) {
  64. this.nativeControl_.indeterminate = indeterminate;
  65. },
  66. enumerable: true,
  67. configurable: true
  68. });
  69. Object.defineProperty(MDCCheckbox.prototype, "disabled", {
  70. get: function () {
  71. return this.nativeControl_.disabled;
  72. },
  73. set: function (disabled) {
  74. this.foundation_.setDisabled(disabled);
  75. },
  76. enumerable: true,
  77. configurable: true
  78. });
  79. Object.defineProperty(MDCCheckbox.prototype, "value", {
  80. get: function () {
  81. return this.nativeControl_.value;
  82. },
  83. set: function (value) {
  84. this.nativeControl_.value = value;
  85. },
  86. enumerable: true,
  87. configurable: true
  88. });
  89. MDCCheckbox.prototype.initialSyncWithDOM = function () {
  90. var _this = this;
  91. this.handleChange_ = function () { return _this.foundation_.handleChange(); };
  92. this.handleAnimationEnd_ = function () { return _this.foundation_.handleAnimationEnd(); };
  93. this.nativeControl_.addEventListener('change', this.handleChange_);
  94. this.listen(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
  95. this.installPropertyChangeHooks_();
  96. };
  97. MDCCheckbox.prototype.destroy = function () {
  98. this.ripple_.destroy();
  99. this.nativeControl_.removeEventListener('change', this.handleChange_);
  100. this.unlisten(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
  101. this.uninstallPropertyChangeHooks_();
  102. _super.prototype.destroy.call(this);
  103. };
  104. MDCCheckbox.prototype.getDefaultFoundation = function () {
  105. var _this = this;
  106. // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
  107. // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
  108. var adapter = {
  109. addClass: function (className) { return _this.root_.classList.add(className); },
  110. forceLayout: function () { return _this.root_.offsetWidth; },
  111. hasNativeControl: function () { return !!_this.nativeControl_; },
  112. isAttachedToDOM: function () { return Boolean(_this.root_.parentNode); },
  113. isChecked: function () { return _this.checked; },
  114. isIndeterminate: function () { return _this.indeterminate; },
  115. removeClass: function (className) { return _this.root_.classList.remove(className); },
  116. removeNativeControlAttr: function (attr) { return _this.nativeControl_.removeAttribute(attr); },
  117. setNativeControlAttr: function (attr, value) { return _this.nativeControl_.setAttribute(attr, value); },
  118. setNativeControlDisabled: function (disabled) { return _this.nativeControl_.disabled = disabled; },
  119. };
  120. return new MDCCheckboxFoundation(adapter);
  121. };
  122. MDCCheckbox.prototype.createRipple_ = function () {
  123. var _this = this;
  124. // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
  125. // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
  126. var adapter = tslib_1.__assign({}, MDCRipple.createAdapter(this), { deregisterInteractionHandler: function (evtType, handler) { return _this.nativeControl_.removeEventListener(evtType, handler, applyPassive()); }, isSurfaceActive: function () { return matches(_this.nativeControl_, ':active'); }, isUnbounded: function () { return true; }, registerInteractionHandler: function (evtType, handler) { return _this.nativeControl_.addEventListener(evtType, handler, applyPassive()); } });
  127. return new MDCRipple(this.root_, new MDCRippleFoundation(adapter));
  128. };
  129. MDCCheckbox.prototype.installPropertyChangeHooks_ = function () {
  130. var _this = this;
  131. var nativeCb = this.nativeControl_;
  132. var cbProto = Object.getPrototypeOf(nativeCb);
  133. CB_PROTO_PROPS.forEach(function (controlState) {
  134. var desc = Object.getOwnPropertyDescriptor(cbProto, controlState);
  135. // We have to check for this descriptor, since some browsers (Safari) don't support its return.
  136. // See: https://bugs.webkit.org/show_bug.cgi?id=49739
  137. if (!validDescriptor(desc)) {
  138. return;
  139. }
  140. // Type cast is needed for compatibility with Closure Compiler.
  141. var nativeGetter = desc.get;
  142. var nativeCbDesc = {
  143. configurable: desc.configurable,
  144. enumerable: desc.enumerable,
  145. get: nativeGetter,
  146. set: function (state) {
  147. desc.set.call(nativeCb, state);
  148. _this.foundation_.handleChange();
  149. },
  150. };
  151. Object.defineProperty(nativeCb, controlState, nativeCbDesc);
  152. });
  153. };
  154. MDCCheckbox.prototype.uninstallPropertyChangeHooks_ = function () {
  155. var nativeCb = this.nativeControl_;
  156. var cbProto = Object.getPrototypeOf(nativeCb);
  157. CB_PROTO_PROPS.forEach(function (controlState) {
  158. var desc = Object.getOwnPropertyDescriptor(cbProto, controlState);
  159. if (!validDescriptor(desc)) {
  160. return;
  161. }
  162. Object.defineProperty(nativeCb, controlState, desc);
  163. });
  164. };
  165. Object.defineProperty(MDCCheckbox.prototype, "nativeControl_", {
  166. get: function () {
  167. var NATIVE_CONTROL_SELECTOR = MDCCheckboxFoundation.strings.NATIVE_CONTROL_SELECTOR;
  168. var el = this.root_.querySelector(NATIVE_CONTROL_SELECTOR);
  169. if (!el) {
  170. throw new Error("Checkbox component requires a " + NATIVE_CONTROL_SELECTOR + " element");
  171. }
  172. return el;
  173. },
  174. enumerable: true,
  175. configurable: true
  176. });
  177. return MDCCheckbox;
  178. }(MDCComponent));
  179. export { MDCCheckbox };
  180. function validDescriptor(inputPropDesc) {
  181. return !!inputPropDesc && typeof inputPropDesc.set === 'function';
  182. }
  183. //# sourceMappingURL=component.js.map