component.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  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 { __assign, __extends, __values } 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 { strings } from './constants';
  31. import { MDCCheckboxFoundation } from './foundation';
  32. var CB_PROTO_PROPS = ['checked', 'indeterminate'];
  33. /** MDC Checkbox */
  34. var MDCCheckbox = /** @class */ (function (_super) {
  35. __extends(MDCCheckbox, _super);
  36. function MDCCheckbox() {
  37. var _this = _super !== null && _super.apply(this, arguments) || this;
  38. _this.rippleSurface = _this.createRipple();
  39. return _this;
  40. }
  41. MDCCheckbox.attachTo = function (root) {
  42. return new MDCCheckbox(root);
  43. };
  44. Object.defineProperty(MDCCheckbox.prototype, "ripple", {
  45. get: function () {
  46. return this.rippleSurface;
  47. },
  48. enumerable: false,
  49. configurable: true
  50. });
  51. Object.defineProperty(MDCCheckbox.prototype, "checked", {
  52. get: function () {
  53. return this.getNativeControl().checked;
  54. },
  55. set: function (checked) {
  56. this.getNativeControl().checked = checked;
  57. },
  58. enumerable: false,
  59. configurable: true
  60. });
  61. Object.defineProperty(MDCCheckbox.prototype, "indeterminate", {
  62. get: function () {
  63. return this.getNativeControl().indeterminate;
  64. },
  65. set: function (indeterminate) {
  66. this.getNativeControl().indeterminate = indeterminate;
  67. },
  68. enumerable: false,
  69. configurable: true
  70. });
  71. Object.defineProperty(MDCCheckbox.prototype, "disabled", {
  72. get: function () {
  73. return this.getNativeControl().disabled;
  74. },
  75. set: function (disabled) {
  76. this.foundation.setDisabled(disabled);
  77. },
  78. enumerable: false,
  79. configurable: true
  80. });
  81. Object.defineProperty(MDCCheckbox.prototype, "value", {
  82. get: function () {
  83. return this.getNativeControl().value;
  84. },
  85. set: function (value) {
  86. this.getNativeControl().value = value;
  87. },
  88. enumerable: false,
  89. configurable: true
  90. });
  91. MDCCheckbox.prototype.initialize = function () {
  92. var DATA_INDETERMINATE_ATTR = strings.DATA_INDETERMINATE_ATTR;
  93. this.getNativeControl().indeterminate =
  94. this.getNativeControl().getAttribute(DATA_INDETERMINATE_ATTR) ===
  95. 'true';
  96. this.getNativeControl().removeAttribute(DATA_INDETERMINATE_ATTR);
  97. };
  98. MDCCheckbox.prototype.initialSyncWithDOM = function () {
  99. var _this = this;
  100. this.handleChange = function () {
  101. _this.foundation.handleChange();
  102. };
  103. this.handleAnimationEnd = function () {
  104. _this.foundation.handleAnimationEnd();
  105. };
  106. this.getNativeControl().addEventListener('change', this.handleChange);
  107. this.listen(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd);
  108. this.installPropertyChangeHooks();
  109. };
  110. MDCCheckbox.prototype.destroy = function () {
  111. this.rippleSurface.destroy();
  112. this.getNativeControl().removeEventListener('change', this.handleChange);
  113. this.unlisten(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd);
  114. this.uninstallPropertyChangeHooks();
  115. _super.prototype.destroy.call(this);
  116. };
  117. MDCCheckbox.prototype.getDefaultFoundation = function () {
  118. var _this = this;
  119. // DO NOT INLINE this variable. For backward compatibility, foundations take
  120. // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
  121. // methods, we need a separate, strongly typed adapter variable.
  122. var adapter = {
  123. addClass: function (className) {
  124. _this.root.classList.add(className);
  125. },
  126. forceLayout: function () { return _this.root.offsetWidth; },
  127. hasNativeControl: function () { return !!_this.getNativeControl(); },
  128. isAttachedToDOM: function () { return Boolean(_this.root.parentNode); },
  129. isChecked: function () { return _this.checked; },
  130. isIndeterminate: function () { return _this.indeterminate; },
  131. removeClass: function (className) {
  132. _this.root.classList.remove(className);
  133. },
  134. removeNativeControlAttr: function (attr) {
  135. _this.getNativeControl().removeAttribute(attr);
  136. },
  137. setNativeControlAttr: function (attr, value) {
  138. _this.safeSetAttribute(_this.getNativeControl(), attr, value);
  139. },
  140. setNativeControlDisabled: function (disabled) {
  141. _this.getNativeControl().disabled = disabled;
  142. },
  143. };
  144. return new MDCCheckboxFoundation(adapter);
  145. };
  146. MDCCheckbox.prototype.createRipple = function () {
  147. var _this = this;
  148. // DO NOT INLINE this variable. For backward compatibility, foundations take
  149. // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
  150. // methods, we need a separate, strongly typed adapter variable.
  151. var adapter = __assign(__assign({}, MDCRipple.createAdapter(this)), { deregisterInteractionHandler: function (evtType, handler) {
  152. _this.getNativeControl().removeEventListener(evtType, handler, applyPassive());
  153. }, isSurfaceActive: function () { return matches(_this.getNativeControl(), ':active'); }, isUnbounded: function () { return true; }, registerInteractionHandler: function (evtType, handler) {
  154. _this.getNativeControl().addEventListener(evtType, handler, applyPassive());
  155. } });
  156. return new MDCRipple(this.root, new MDCRippleFoundation(adapter));
  157. };
  158. MDCCheckbox.prototype.installPropertyChangeHooks = function () {
  159. var e_1, _a;
  160. var _this = this;
  161. var nativeCb = this.getNativeControl();
  162. var cbProto = Object.getPrototypeOf(nativeCb);
  163. var _loop_1 = function (controlState) {
  164. var desc = Object.getOwnPropertyDescriptor(cbProto, controlState);
  165. // We have to check for this descriptor, since some browsers (Safari)
  166. // don't support its return. See:
  167. // https://bugs.webkit.org/show_bug.cgi?id=49739
  168. if (!validDescriptor(desc)) {
  169. return { value: void 0 };
  170. }
  171. var nativeGetter = desc.get;
  172. var nativeCbDesc = {
  173. configurable: desc.configurable,
  174. enumerable: desc.enumerable,
  175. get: nativeGetter,
  176. set: function (state) {
  177. desc.set.call(nativeCb, state);
  178. _this.foundation.handleChange();
  179. },
  180. };
  181. Object.defineProperty(nativeCb, controlState, nativeCbDesc);
  182. };
  183. try {
  184. for (var CB_PROTO_PROPS_1 = __values(CB_PROTO_PROPS), CB_PROTO_PROPS_1_1 = CB_PROTO_PROPS_1.next(); !CB_PROTO_PROPS_1_1.done; CB_PROTO_PROPS_1_1 = CB_PROTO_PROPS_1.next()) {
  185. var controlState = CB_PROTO_PROPS_1_1.value;
  186. var state_1 = _loop_1(controlState);
  187. if (typeof state_1 === "object")
  188. return state_1.value;
  189. }
  190. }
  191. catch (e_1_1) { e_1 = { error: e_1_1 }; }
  192. finally {
  193. try {
  194. if (CB_PROTO_PROPS_1_1 && !CB_PROTO_PROPS_1_1.done && (_a = CB_PROTO_PROPS_1.return)) _a.call(CB_PROTO_PROPS_1);
  195. }
  196. finally { if (e_1) throw e_1.error; }
  197. }
  198. };
  199. MDCCheckbox.prototype.uninstallPropertyChangeHooks = function () {
  200. var e_2, _a;
  201. var nativeCb = this.getNativeControl();
  202. var cbProto = Object.getPrototypeOf(nativeCb);
  203. try {
  204. for (var CB_PROTO_PROPS_2 = __values(CB_PROTO_PROPS), CB_PROTO_PROPS_2_1 = CB_PROTO_PROPS_2.next(); !CB_PROTO_PROPS_2_1.done; CB_PROTO_PROPS_2_1 = CB_PROTO_PROPS_2.next()) {
  205. var controlState = CB_PROTO_PROPS_2_1.value;
  206. var desc = Object.getOwnPropertyDescriptor(cbProto, controlState);
  207. if (!validDescriptor(desc)) {
  208. return;
  209. }
  210. Object.defineProperty(nativeCb, controlState, desc);
  211. }
  212. }
  213. catch (e_2_1) { e_2 = { error: e_2_1 }; }
  214. finally {
  215. try {
  216. if (CB_PROTO_PROPS_2_1 && !CB_PROTO_PROPS_2_1.done && (_a = CB_PROTO_PROPS_2.return)) _a.call(CB_PROTO_PROPS_2);
  217. }
  218. finally { if (e_2) throw e_2.error; }
  219. }
  220. };
  221. MDCCheckbox.prototype.getNativeControl = function () {
  222. var NATIVE_CONTROL_SELECTOR = strings.NATIVE_CONTROL_SELECTOR;
  223. var el = this.root.querySelector(NATIVE_CONTROL_SELECTOR);
  224. if (!el) {
  225. throw new Error("Checkbox component requires a " + NATIVE_CONTROL_SELECTOR + " element");
  226. }
  227. return el;
  228. };
  229. return MDCCheckbox;
  230. }(MDCComponent));
  231. export { MDCCheckbox };
  232. function validDescriptor(inputPropDesc) {
  233. return !!inputPropDesc && typeof inputPropDesc.set === 'function';
  234. }
  235. //# sourceMappingURL=component.js.map