mdc.ripple.js 60 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423
  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://github.com/material-components/material-components-web/blob/master/LICENSE
  7. */
  8. (function webpackUniversalModuleDefinition(root, factory) {
  9. if(typeof exports === 'object' && typeof module === 'object')
  10. module.exports = factory();
  11. else if(typeof define === 'function' && define.amd)
  12. define([], factory);
  13. else if(typeof exports === 'object')
  14. exports["ripple"] = factory();
  15. else
  16. root["mdc"] = root["mdc"] || {}, root["mdc"]["ripple"] = factory();
  17. })(this, function() {
  18. return /******/ (function(modules) { // webpackBootstrap
  19. /******/ // The module cache
  20. /******/ var installedModules = {};
  21. /******/
  22. /******/ // The require function
  23. /******/ function __webpack_require__(moduleId) {
  24. /******/
  25. /******/ // Check if module is in cache
  26. /******/ if(installedModules[moduleId]) {
  27. /******/ return installedModules[moduleId].exports;
  28. /******/ }
  29. /******/ // Create a new module (and put it into the cache)
  30. /******/ var module = installedModules[moduleId] = {
  31. /******/ i: moduleId,
  32. /******/ l: false,
  33. /******/ exports: {}
  34. /******/ };
  35. /******/
  36. /******/ // Execute the module function
  37. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  38. /******/
  39. /******/ // Flag the module as loaded
  40. /******/ module.l = true;
  41. /******/
  42. /******/ // Return the exports of the module
  43. /******/ return module.exports;
  44. /******/ }
  45. /******/
  46. /******/
  47. /******/ // expose the modules object (__webpack_modules__)
  48. /******/ __webpack_require__.m = modules;
  49. /******/
  50. /******/ // expose the module cache
  51. /******/ __webpack_require__.c = installedModules;
  52. /******/
  53. /******/ // define getter function for harmony exports
  54. /******/ __webpack_require__.d = function(exports, name, getter) {
  55. /******/ if(!__webpack_require__.o(exports, name)) {
  56. /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
  57. /******/ }
  58. /******/ };
  59. /******/
  60. /******/ // define __esModule on exports
  61. /******/ __webpack_require__.r = function(exports) {
  62. /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  63. /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  64. /******/ }
  65. /******/ Object.defineProperty(exports, '__esModule', { value: true });
  66. /******/ };
  67. /******/
  68. /******/ // create a fake namespace object
  69. /******/ // mode & 1: value is a module id, require it
  70. /******/ // mode & 2: merge all properties of value into the ns
  71. /******/ // mode & 4: return value when already ns object
  72. /******/ // mode & 8|1: behave like require
  73. /******/ __webpack_require__.t = function(value, mode) {
  74. /******/ if(mode & 1) value = __webpack_require__(value);
  75. /******/ if(mode & 8) return value;
  76. /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  77. /******/ var ns = Object.create(null);
  78. /******/ __webpack_require__.r(ns);
  79. /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  80. /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  81. /******/ return ns;
  82. /******/ };
  83. /******/
  84. /******/ // getDefaultExport function for compatibility with non-harmony modules
  85. /******/ __webpack_require__.n = function(module) {
  86. /******/ var getter = module && module.__esModule ?
  87. /******/ function getDefault() { return module['default']; } :
  88. /******/ function getModuleExports() { return module; };
  89. /******/ __webpack_require__.d(getter, 'a', getter);
  90. /******/ return getter;
  91. /******/ };
  92. /******/
  93. /******/ // Object.prototype.hasOwnProperty.call
  94. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  95. /******/
  96. /******/ // __webpack_public_path__
  97. /******/ __webpack_require__.p = "";
  98. /******/
  99. /******/
  100. /******/ // Load entry module and return exports
  101. /******/ return __webpack_require__(__webpack_require__.s = "./packages/mdc-ripple/index.ts");
  102. /******/ })
  103. /************************************************************************/
  104. /******/ ({
  105. /***/ "./packages/mdc-base/component.ts":
  106. /*!****************************************!*\
  107. !*** ./packages/mdc-base/component.ts ***!
  108. \****************************************/
  109. /*! no static exports found */
  110. /***/ (function(module, exports, __webpack_require__) {
  111. "use strict";
  112. /**
  113. * @license
  114. * Copyright 2016 Google Inc.
  115. *
  116. * Permission is hereby granted, free of charge, to any person obtaining a copy
  117. * of this software and associated documentation files (the "Software"), to deal
  118. * in the Software without restriction, including without limitation the rights
  119. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  120. * copies of the Software, and to permit persons to whom the Software is
  121. * furnished to do so, subject to the following conditions:
  122. *
  123. * The above copyright notice and this permission notice shall be included in
  124. * all copies or substantial portions of the Software.
  125. *
  126. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  127. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  128. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  129. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  130. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  131. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  132. * THE SOFTWARE.
  133. */
  134. var __read = this && this.__read || function (o, n) {
  135. var m = typeof Symbol === "function" && o[Symbol.iterator];
  136. if (!m) return o;
  137. var i = m.call(o),
  138. r,
  139. ar = [],
  140. e;
  141. try {
  142. while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
  143. ar.push(r.value);
  144. }
  145. } catch (error) {
  146. e = { error: error };
  147. } finally {
  148. try {
  149. if (r && !r.done && (m = i["return"])) m.call(i);
  150. } finally {
  151. if (e) throw e.error;
  152. }
  153. }
  154. return ar;
  155. };
  156. var __spread = this && this.__spread || function () {
  157. for (var ar = [], i = 0; i < arguments.length; i++) {
  158. ar = ar.concat(__read(arguments[i]));
  159. }return ar;
  160. };
  161. Object.defineProperty(exports, "__esModule", { value: true });
  162. var foundation_1 = __webpack_require__(/*! ./foundation */ "./packages/mdc-base/foundation.ts");
  163. var MDCComponent = /** @class */function () {
  164. function MDCComponent(root, foundation) {
  165. var args = [];
  166. for (var _i = 2; _i < arguments.length; _i++) {
  167. args[_i - 2] = arguments[_i];
  168. }
  169. this.root_ = root;
  170. this.initialize.apply(this, __spread(args));
  171. // Note that we initialize foundation here and not within the constructor's default param so that
  172. // this.root_ is defined and can be used within the foundation class.
  173. this.foundation_ = foundation === undefined ? this.getDefaultFoundation() : foundation;
  174. this.foundation_.init();
  175. this.initialSyncWithDOM();
  176. }
  177. MDCComponent.attachTo = function (root) {
  178. // Subclasses which extend MDCBase should provide an attachTo() method that takes a root element and
  179. // returns an instantiated component with its root set to that element. Also note that in the cases of
  180. // subclasses, an explicit foundation class will not have to be passed in; it will simply be initialized
  181. // from getDefaultFoundation().
  182. return new MDCComponent(root, new foundation_1.MDCFoundation({}));
  183. };
  184. /* istanbul ignore next: method param only exists for typing purposes; it does not need to be unit tested */
  185. MDCComponent.prototype.initialize = function () {
  186. var _args = [];
  187. for (var _i = 0; _i < arguments.length; _i++) {
  188. _args[_i] = arguments[_i];
  189. }
  190. // Subclasses can override this to do any additional setup work that would be considered part of a
  191. // "constructor". Essentially, it is a hook into the parent constructor before the foundation is
  192. // initialized. Any additional arguments besides root and foundation will be passed in here.
  193. };
  194. MDCComponent.prototype.getDefaultFoundation = function () {
  195. // Subclasses must override this method to return a properly configured foundation class for the
  196. // component.
  197. throw new Error('Subclasses must override getDefaultFoundation to return a properly configured ' + 'foundation class');
  198. };
  199. MDCComponent.prototype.initialSyncWithDOM = function () {
  200. // Subclasses should override this method if they need to perform work to synchronize with a host DOM
  201. // object. An example of this would be a form control wrapper that needs to synchronize its internal state
  202. // to some property or attribute of the host DOM. Please note: this is *not* the place to perform DOM
  203. // reads/writes that would cause layout / paint, as this is called synchronously from within the constructor.
  204. };
  205. MDCComponent.prototype.destroy = function () {
  206. // Subclasses may implement this method to release any resources / deregister any listeners they have
  207. // attached. An example of this might be deregistering a resize event from the window object.
  208. this.foundation_.destroy();
  209. };
  210. MDCComponent.prototype.listen = function (evtType, handler, options) {
  211. this.root_.addEventListener(evtType, handler, options);
  212. };
  213. MDCComponent.prototype.unlisten = function (evtType, handler, options) {
  214. this.root_.removeEventListener(evtType, handler, options);
  215. };
  216. /**
  217. * Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.
  218. */
  219. MDCComponent.prototype.emit = function (evtType, evtData, shouldBubble) {
  220. if (shouldBubble === void 0) {
  221. shouldBubble = false;
  222. }
  223. var evt;
  224. if (typeof CustomEvent === 'function') {
  225. evt = new CustomEvent(evtType, {
  226. bubbles: shouldBubble,
  227. detail: evtData
  228. });
  229. } else {
  230. evt = document.createEvent('CustomEvent');
  231. evt.initCustomEvent(evtType, shouldBubble, false, evtData);
  232. }
  233. this.root_.dispatchEvent(evt);
  234. };
  235. return MDCComponent;
  236. }();
  237. exports.MDCComponent = MDCComponent;
  238. // tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
  239. exports.default = MDCComponent;
  240. /***/ }),
  241. /***/ "./packages/mdc-base/foundation.ts":
  242. /*!*****************************************!*\
  243. !*** ./packages/mdc-base/foundation.ts ***!
  244. \*****************************************/
  245. /*! no static exports found */
  246. /***/ (function(module, exports, __webpack_require__) {
  247. "use strict";
  248. /**
  249. * @license
  250. * Copyright 2016 Google Inc.
  251. *
  252. * Permission is hereby granted, free of charge, to any person obtaining a copy
  253. * of this software and associated documentation files (the "Software"), to deal
  254. * in the Software without restriction, including without limitation the rights
  255. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  256. * copies of the Software, and to permit persons to whom the Software is
  257. * furnished to do so, subject to the following conditions:
  258. *
  259. * The above copyright notice and this permission notice shall be included in
  260. * all copies or substantial portions of the Software.
  261. *
  262. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  263. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  264. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  265. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  266. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  267. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  268. * THE SOFTWARE.
  269. */
  270. Object.defineProperty(exports, "__esModule", { value: true });
  271. var MDCFoundation = /** @class */function () {
  272. function MDCFoundation(adapter) {
  273. if (adapter === void 0) {
  274. adapter = {};
  275. }
  276. this.adapter_ = adapter;
  277. }
  278. Object.defineProperty(MDCFoundation, "cssClasses", {
  279. get: function get() {
  280. // Classes extending MDCFoundation should implement this method to return an object which exports every
  281. // CSS class the foundation class needs as a property. e.g. {ACTIVE: 'mdc-component--active'}
  282. return {};
  283. },
  284. enumerable: true,
  285. configurable: true
  286. });
  287. Object.defineProperty(MDCFoundation, "strings", {
  288. get: function get() {
  289. // Classes extending MDCFoundation should implement this method to return an object which exports all
  290. // semantic strings as constants. e.g. {ARIA_ROLE: 'tablist'}
  291. return {};
  292. },
  293. enumerable: true,
  294. configurable: true
  295. });
  296. Object.defineProperty(MDCFoundation, "numbers", {
  297. get: function get() {
  298. // Classes extending MDCFoundation should implement this method to return an object which exports all
  299. // of its semantic numbers as constants. e.g. {ANIMATION_DELAY_MS: 350}
  300. return {};
  301. },
  302. enumerable: true,
  303. configurable: true
  304. });
  305. Object.defineProperty(MDCFoundation, "defaultAdapter", {
  306. get: function get() {
  307. // Classes extending MDCFoundation may choose to implement this getter in order to provide a convenient
  308. // way of viewing the necessary methods of an adapter. In the future, this could also be used for adapter
  309. // validation.
  310. return {};
  311. },
  312. enumerable: true,
  313. configurable: true
  314. });
  315. MDCFoundation.prototype.init = function () {
  316. // Subclasses should override this method to perform initialization routines (registering events, etc.)
  317. };
  318. MDCFoundation.prototype.destroy = function () {
  319. // Subclasses should override this method to perform de-initialization routines (de-registering events, etc.)
  320. };
  321. return MDCFoundation;
  322. }();
  323. exports.MDCFoundation = MDCFoundation;
  324. // tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
  325. exports.default = MDCFoundation;
  326. /***/ }),
  327. /***/ "./packages/mdc-dom/events.ts":
  328. /*!************************************!*\
  329. !*** ./packages/mdc-dom/events.ts ***!
  330. \************************************/
  331. /*! no static exports found */
  332. /***/ (function(module, exports, __webpack_require__) {
  333. "use strict";
  334. /**
  335. * @license
  336. * Copyright 2019 Google Inc.
  337. *
  338. * Permission is hereby granted, free of charge, to any person obtaining a copy
  339. * of this software and associated documentation files (the "Software"), to deal
  340. * in the Software without restriction, including without limitation the rights
  341. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  342. * copies of the Software, and to permit persons to whom the Software is
  343. * furnished to do so, subject to the following conditions:
  344. *
  345. * The above copyright notice and this permission notice shall be included in
  346. * all copies or substantial portions of the Software.
  347. *
  348. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  349. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  350. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  351. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  352. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  353. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  354. * THE SOFTWARE.
  355. */
  356. Object.defineProperty(exports, "__esModule", { value: true });
  357. /**
  358. * Determine whether the current browser supports passive event listeners, and
  359. * if so, use them.
  360. */
  361. function applyPassive(globalObj) {
  362. if (globalObj === void 0) {
  363. globalObj = window;
  364. }
  365. return supportsPassiveOption(globalObj) ? { passive: true } : false;
  366. }
  367. exports.applyPassive = applyPassive;
  368. function supportsPassiveOption(globalObj) {
  369. if (globalObj === void 0) {
  370. globalObj = window;
  371. }
  372. // See
  373. // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
  374. var passiveSupported = false;
  375. try {
  376. var options = {
  377. // This function will be called when the browser
  378. // attempts to access the passive property.
  379. get passive() {
  380. passiveSupported = true;
  381. return false;
  382. }
  383. };
  384. var handler = function handler() {};
  385. globalObj.document.addEventListener('test', handler, options);
  386. globalObj.document.removeEventListener('test', handler, options);
  387. } catch (err) {
  388. passiveSupported = false;
  389. }
  390. return passiveSupported;
  391. }
  392. /***/ }),
  393. /***/ "./packages/mdc-dom/ponyfill.ts":
  394. /*!**************************************!*\
  395. !*** ./packages/mdc-dom/ponyfill.ts ***!
  396. \**************************************/
  397. /*! no static exports found */
  398. /***/ (function(module, exports, __webpack_require__) {
  399. "use strict";
  400. /**
  401. * @license
  402. * Copyright 2018 Google Inc.
  403. *
  404. * Permission is hereby granted, free of charge, to any person obtaining a copy
  405. * of this software and associated documentation files (the "Software"), to deal
  406. * in the Software without restriction, including without limitation the rights
  407. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  408. * copies of the Software, and to permit persons to whom the Software is
  409. * furnished to do so, subject to the following conditions:
  410. *
  411. * The above copyright notice and this permission notice shall be included in
  412. * all copies or substantial portions of the Software.
  413. *
  414. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  415. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  416. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  417. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  418. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  419. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  420. * THE SOFTWARE.
  421. */
  422. Object.defineProperty(exports, "__esModule", { value: true });
  423. /**
  424. * @fileoverview A "ponyfill" is a polyfill that doesn't modify the global prototype chain.
  425. * This makes ponyfills safer than traditional polyfills, especially for libraries like MDC.
  426. */
  427. function closest(element, selector) {
  428. if (element.closest) {
  429. return element.closest(selector);
  430. }
  431. var el = element;
  432. while (el) {
  433. if (matches(el, selector)) {
  434. return el;
  435. }
  436. el = el.parentElement;
  437. }
  438. return null;
  439. }
  440. exports.closest = closest;
  441. function matches(element, selector) {
  442. var nativeMatches = element.matches || element.webkitMatchesSelector || element.msMatchesSelector;
  443. return nativeMatches.call(element, selector);
  444. }
  445. exports.matches = matches;
  446. /**
  447. * Used to compute the estimated scroll width of elements. When an element is
  448. * hidden due to display: none; being applied to a parent element, the width is
  449. * returned as 0. However, the element will have a true width once no longer
  450. * inside a display: none context. This method computes an estimated width when
  451. * the element is hidden or returns the true width when the element is visble.
  452. * @param {Element} element the element whose width to estimate
  453. */
  454. function estimateScrollWidth(element) {
  455. // Check the offsetParent. If the element inherits display: none from any
  456. // parent, the offsetParent property will be null (see
  457. // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent).
  458. // This check ensures we only clone the node when necessary.
  459. var htmlEl = element;
  460. if (htmlEl.offsetParent !== null) {
  461. return htmlEl.scrollWidth;
  462. }
  463. var clone = htmlEl.cloneNode(true);
  464. clone.style.setProperty('position', 'absolute');
  465. clone.style.setProperty('transform', 'translate(-9999px, -9999px)');
  466. document.documentElement.appendChild(clone);
  467. var scrollWidth = clone.scrollWidth;
  468. document.documentElement.removeChild(clone);
  469. return scrollWidth;
  470. }
  471. exports.estimateScrollWidth = estimateScrollWidth;
  472. /***/ }),
  473. /***/ "./packages/mdc-ripple/component.ts":
  474. /*!******************************************!*\
  475. !*** ./packages/mdc-ripple/component.ts ***!
  476. \******************************************/
  477. /*! no static exports found */
  478. /***/ (function(module, exports, __webpack_require__) {
  479. "use strict";
  480. /**
  481. * @license
  482. * Copyright 2016 Google Inc.
  483. *
  484. * Permission is hereby granted, free of charge, to any person obtaining a copy
  485. * of this software and associated documentation files (the "Software"), to deal
  486. * in the Software without restriction, including without limitation the rights
  487. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  488. * copies of the Software, and to permit persons to whom the Software is
  489. * furnished to do so, subject to the following conditions:
  490. *
  491. * The above copyright notice and this permission notice shall be included in
  492. * all copies or substantial portions of the Software.
  493. *
  494. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  495. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  496. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  497. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  498. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  499. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  500. * THE SOFTWARE.
  501. */
  502. var __extends = this && this.__extends || function () {
  503. var _extendStatics = function extendStatics(d, b) {
  504. _extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function (d, b) {
  505. d.__proto__ = b;
  506. } || function (d, b) {
  507. for (var p in b) {
  508. if (b.hasOwnProperty(p)) d[p] = b[p];
  509. }
  510. };
  511. return _extendStatics(d, b);
  512. };
  513. return function (d, b) {
  514. _extendStatics(d, b);
  515. function __() {
  516. this.constructor = d;
  517. }
  518. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  519. };
  520. }();
  521. var __importStar = this && this.__importStar || function (mod) {
  522. if (mod && mod.__esModule) return mod;
  523. var result = {};
  524. if (mod != null) for (var k in mod) {
  525. if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
  526. }result["default"] = mod;
  527. return result;
  528. };
  529. Object.defineProperty(exports, "__esModule", { value: true });
  530. var component_1 = __webpack_require__(/*! @material/base/component */ "./packages/mdc-base/component.ts");
  531. var events_1 = __webpack_require__(/*! @material/dom/events */ "./packages/mdc-dom/events.ts");
  532. var ponyfill_1 = __webpack_require__(/*! @material/dom/ponyfill */ "./packages/mdc-dom/ponyfill.ts");
  533. var foundation_1 = __webpack_require__(/*! ./foundation */ "./packages/mdc-ripple/foundation.ts");
  534. var util = __importStar(__webpack_require__(/*! ./util */ "./packages/mdc-ripple/util.ts"));
  535. var MDCRipple = /** @class */function (_super) {
  536. __extends(MDCRipple, _super);
  537. function MDCRipple() {
  538. var _this = _super !== null && _super.apply(this, arguments) || this;
  539. _this.disabled = false;
  540. return _this;
  541. }
  542. MDCRipple.attachTo = function (root, opts) {
  543. if (opts === void 0) {
  544. opts = { isUnbounded: undefined };
  545. }
  546. var ripple = new MDCRipple(root);
  547. // Only override unbounded behavior if option is explicitly specified
  548. if (opts.isUnbounded !== undefined) {
  549. ripple.unbounded = opts.isUnbounded;
  550. }
  551. return ripple;
  552. };
  553. MDCRipple.createAdapter = function (instance) {
  554. return {
  555. addClass: function addClass(className) {
  556. return instance.root_.classList.add(className);
  557. },
  558. browserSupportsCssVars: function browserSupportsCssVars() {
  559. return util.supportsCssVariables(window);
  560. },
  561. computeBoundingRect: function computeBoundingRect() {
  562. return instance.root_.getBoundingClientRect();
  563. },
  564. containsEventTarget: function containsEventTarget(target) {
  565. return instance.root_.contains(target);
  566. },
  567. deregisterDocumentInteractionHandler: function deregisterDocumentInteractionHandler(evtType, handler) {
  568. return document.documentElement.removeEventListener(evtType, handler, events_1.applyPassive());
  569. },
  570. deregisterInteractionHandler: function deregisterInteractionHandler(evtType, handler) {
  571. return instance.root_.removeEventListener(evtType, handler, events_1.applyPassive());
  572. },
  573. deregisterResizeHandler: function deregisterResizeHandler(handler) {
  574. return window.removeEventListener('resize', handler);
  575. },
  576. getWindowPageOffset: function getWindowPageOffset() {
  577. return { x: window.pageXOffset, y: window.pageYOffset };
  578. },
  579. isSurfaceActive: function isSurfaceActive() {
  580. return ponyfill_1.matches(instance.root_, ':active');
  581. },
  582. isSurfaceDisabled: function isSurfaceDisabled() {
  583. return Boolean(instance.disabled);
  584. },
  585. isUnbounded: function isUnbounded() {
  586. return Boolean(instance.unbounded);
  587. },
  588. registerDocumentInteractionHandler: function registerDocumentInteractionHandler(evtType, handler) {
  589. return document.documentElement.addEventListener(evtType, handler, events_1.applyPassive());
  590. },
  591. registerInteractionHandler: function registerInteractionHandler(evtType, handler) {
  592. return instance.root_.addEventListener(evtType, handler, events_1.applyPassive());
  593. },
  594. registerResizeHandler: function registerResizeHandler(handler) {
  595. return window.addEventListener('resize', handler);
  596. },
  597. removeClass: function removeClass(className) {
  598. return instance.root_.classList.remove(className);
  599. },
  600. updateCssVariable: function updateCssVariable(varName, value) {
  601. return instance.root_.style.setProperty(varName, value);
  602. }
  603. };
  604. };
  605. Object.defineProperty(MDCRipple.prototype, "unbounded", {
  606. get: function get() {
  607. return Boolean(this.unbounded_);
  608. },
  609. set: function set(unbounded) {
  610. this.unbounded_ = Boolean(unbounded);
  611. this.setUnbounded_();
  612. },
  613. enumerable: true,
  614. configurable: true
  615. });
  616. MDCRipple.prototype.activate = function () {
  617. this.foundation_.activate();
  618. };
  619. MDCRipple.prototype.deactivate = function () {
  620. this.foundation_.deactivate();
  621. };
  622. MDCRipple.prototype.layout = function () {
  623. this.foundation_.layout();
  624. };
  625. MDCRipple.prototype.getDefaultFoundation = function () {
  626. return new foundation_1.MDCRippleFoundation(MDCRipple.createAdapter(this));
  627. };
  628. MDCRipple.prototype.initialSyncWithDOM = function () {
  629. var root = this.root_;
  630. this.unbounded = 'mdcRippleIsUnbounded' in root.dataset;
  631. };
  632. /**
  633. * Closure Compiler throws an access control error when directly accessing a
  634. * protected or private property inside a getter/setter, like unbounded above.
  635. * By accessing the protected property inside a method, we solve that problem.
  636. * That's why this function exists.
  637. */
  638. MDCRipple.prototype.setUnbounded_ = function () {
  639. this.foundation_.setUnbounded(Boolean(this.unbounded_));
  640. };
  641. return MDCRipple;
  642. }(component_1.MDCComponent);
  643. exports.MDCRipple = MDCRipple;
  644. /***/ }),
  645. /***/ "./packages/mdc-ripple/constants.ts":
  646. /*!******************************************!*\
  647. !*** ./packages/mdc-ripple/constants.ts ***!
  648. \******************************************/
  649. /*! no static exports found */
  650. /***/ (function(module, exports, __webpack_require__) {
  651. "use strict";
  652. /**
  653. * @license
  654. * Copyright 2016 Google Inc.
  655. *
  656. * Permission is hereby granted, free of charge, to any person obtaining a copy
  657. * of this software and associated documentation files (the "Software"), to deal
  658. * in the Software without restriction, including without limitation the rights
  659. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  660. * copies of the Software, and to permit persons to whom the Software is
  661. * furnished to do so, subject to the following conditions:
  662. *
  663. * The above copyright notice and this permission notice shall be included in
  664. * all copies or substantial portions of the Software.
  665. *
  666. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  667. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  668. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  669. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  670. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  671. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  672. * THE SOFTWARE.
  673. */
  674. Object.defineProperty(exports, "__esModule", { value: true });
  675. exports.cssClasses = {
  676. // Ripple is a special case where the "root" component is really a "mixin" of sorts,
  677. // given that it's an 'upgrade' to an existing component. That being said it is the root
  678. // CSS class that all other CSS classes derive from.
  679. BG_FOCUSED: 'mdc-ripple-upgraded--background-focused',
  680. FG_ACTIVATION: 'mdc-ripple-upgraded--foreground-activation',
  681. FG_DEACTIVATION: 'mdc-ripple-upgraded--foreground-deactivation',
  682. ROOT: 'mdc-ripple-upgraded',
  683. UNBOUNDED: 'mdc-ripple-upgraded--unbounded'
  684. };
  685. exports.strings = {
  686. VAR_FG_SCALE: '--mdc-ripple-fg-scale',
  687. VAR_FG_SIZE: '--mdc-ripple-fg-size',
  688. VAR_FG_TRANSLATE_END: '--mdc-ripple-fg-translate-end',
  689. VAR_FG_TRANSLATE_START: '--mdc-ripple-fg-translate-start',
  690. VAR_LEFT: '--mdc-ripple-left',
  691. VAR_TOP: '--mdc-ripple-top'
  692. };
  693. exports.numbers = {
  694. DEACTIVATION_TIMEOUT_MS: 225,
  695. FG_DEACTIVATION_MS: 150,
  696. INITIAL_ORIGIN_SCALE: 0.6,
  697. PADDING: 10,
  698. TAP_DELAY_MS: 300
  699. };
  700. /***/ }),
  701. /***/ "./packages/mdc-ripple/foundation.ts":
  702. /*!*******************************************!*\
  703. !*** ./packages/mdc-ripple/foundation.ts ***!
  704. \*******************************************/
  705. /*! no static exports found */
  706. /***/ (function(module, exports, __webpack_require__) {
  707. "use strict";
  708. /**
  709. * @license
  710. * Copyright 2016 Google Inc.
  711. *
  712. * Permission is hereby granted, free of charge, to any person obtaining a copy
  713. * of this software and associated documentation files (the "Software"), to deal
  714. * in the Software without restriction, including without limitation the rights
  715. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  716. * copies of the Software, and to permit persons to whom the Software is
  717. * furnished to do so, subject to the following conditions:
  718. *
  719. * The above copyright notice and this permission notice shall be included in
  720. * all copies or substantial portions of the Software.
  721. *
  722. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  723. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  724. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  725. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  726. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  727. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  728. * THE SOFTWARE.
  729. */
  730. var __extends = this && this.__extends || function () {
  731. var _extendStatics = function extendStatics(d, b) {
  732. _extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function (d, b) {
  733. d.__proto__ = b;
  734. } || function (d, b) {
  735. for (var p in b) {
  736. if (b.hasOwnProperty(p)) d[p] = b[p];
  737. }
  738. };
  739. return _extendStatics(d, b);
  740. };
  741. return function (d, b) {
  742. _extendStatics(d, b);
  743. function __() {
  744. this.constructor = d;
  745. }
  746. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  747. };
  748. }();
  749. var __assign = this && this.__assign || function () {
  750. __assign = Object.assign || function (t) {
  751. for (var s, i = 1, n = arguments.length; i < n; i++) {
  752. s = arguments[i];
  753. for (var p in s) {
  754. if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
  755. }
  756. }
  757. return t;
  758. };
  759. return __assign.apply(this, arguments);
  760. };
  761. Object.defineProperty(exports, "__esModule", { value: true });
  762. var foundation_1 = __webpack_require__(/*! @material/base/foundation */ "./packages/mdc-base/foundation.ts");
  763. var constants_1 = __webpack_require__(/*! ./constants */ "./packages/mdc-ripple/constants.ts");
  764. var util_1 = __webpack_require__(/*! ./util */ "./packages/mdc-ripple/util.ts");
  765. // Activation events registered on the root element of each instance for activation
  766. var ACTIVATION_EVENT_TYPES = ['touchstart', 'pointerdown', 'mousedown', 'keydown'];
  767. // Deactivation events registered on documentElement when a pointer-related down event occurs
  768. var POINTER_DEACTIVATION_EVENT_TYPES = ['touchend', 'pointerup', 'mouseup', 'contextmenu'];
  769. // simultaneous nested activations
  770. var activatedTargets = [];
  771. var MDCRippleFoundation = /** @class */function (_super) {
  772. __extends(MDCRippleFoundation, _super);
  773. function MDCRippleFoundation(adapter) {
  774. var _this = _super.call(this, __assign({}, MDCRippleFoundation.defaultAdapter, adapter)) || this;
  775. _this.activationAnimationHasEnded_ = false;
  776. _this.activationTimer_ = 0;
  777. _this.fgDeactivationRemovalTimer_ = 0;
  778. _this.fgScale_ = '0';
  779. _this.frame_ = { width: 0, height: 0 };
  780. _this.initialSize_ = 0;
  781. _this.layoutFrame_ = 0;
  782. _this.maxRadius_ = 0;
  783. _this.unboundedCoords_ = { left: 0, top: 0 };
  784. _this.activationState_ = _this.defaultActivationState_();
  785. _this.activationTimerCallback_ = function () {
  786. _this.activationAnimationHasEnded_ = true;
  787. _this.runDeactivationUXLogicIfReady_();
  788. };
  789. _this.activateHandler_ = function (e) {
  790. return _this.activate_(e);
  791. };
  792. _this.deactivateHandler_ = function () {
  793. return _this.deactivate_();
  794. };
  795. _this.focusHandler_ = function () {
  796. return _this.handleFocus();
  797. };
  798. _this.blurHandler_ = function () {
  799. return _this.handleBlur();
  800. };
  801. _this.resizeHandler_ = function () {
  802. return _this.layout();
  803. };
  804. return _this;
  805. }
  806. Object.defineProperty(MDCRippleFoundation, "cssClasses", {
  807. get: function get() {
  808. return constants_1.cssClasses;
  809. },
  810. enumerable: true,
  811. configurable: true
  812. });
  813. Object.defineProperty(MDCRippleFoundation, "strings", {
  814. get: function get() {
  815. return constants_1.strings;
  816. },
  817. enumerable: true,
  818. configurable: true
  819. });
  820. Object.defineProperty(MDCRippleFoundation, "numbers", {
  821. get: function get() {
  822. return constants_1.numbers;
  823. },
  824. enumerable: true,
  825. configurable: true
  826. });
  827. Object.defineProperty(MDCRippleFoundation, "defaultAdapter", {
  828. get: function get() {
  829. return {
  830. addClass: function addClass() {
  831. return undefined;
  832. },
  833. browserSupportsCssVars: function browserSupportsCssVars() {
  834. return true;
  835. },
  836. computeBoundingRect: function computeBoundingRect() {
  837. return { top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 };
  838. },
  839. containsEventTarget: function containsEventTarget() {
  840. return true;
  841. },
  842. deregisterDocumentInteractionHandler: function deregisterDocumentInteractionHandler() {
  843. return undefined;
  844. },
  845. deregisterInteractionHandler: function deregisterInteractionHandler() {
  846. return undefined;
  847. },
  848. deregisterResizeHandler: function deregisterResizeHandler() {
  849. return undefined;
  850. },
  851. getWindowPageOffset: function getWindowPageOffset() {
  852. return { x: 0, y: 0 };
  853. },
  854. isSurfaceActive: function isSurfaceActive() {
  855. return true;
  856. },
  857. isSurfaceDisabled: function isSurfaceDisabled() {
  858. return true;
  859. },
  860. isUnbounded: function isUnbounded() {
  861. return true;
  862. },
  863. registerDocumentInteractionHandler: function registerDocumentInteractionHandler() {
  864. return undefined;
  865. },
  866. registerInteractionHandler: function registerInteractionHandler() {
  867. return undefined;
  868. },
  869. registerResizeHandler: function registerResizeHandler() {
  870. return undefined;
  871. },
  872. removeClass: function removeClass() {
  873. return undefined;
  874. },
  875. updateCssVariable: function updateCssVariable() {
  876. return undefined;
  877. }
  878. };
  879. },
  880. enumerable: true,
  881. configurable: true
  882. });
  883. MDCRippleFoundation.prototype.init = function () {
  884. var _this = this;
  885. var supportsPressRipple = this.supportsPressRipple_();
  886. this.registerRootHandlers_(supportsPressRipple);
  887. if (supportsPressRipple) {
  888. var _a = MDCRippleFoundation.cssClasses,
  889. ROOT_1 = _a.ROOT,
  890. UNBOUNDED_1 = _a.UNBOUNDED;
  891. requestAnimationFrame(function () {
  892. _this.adapter_.addClass(ROOT_1);
  893. if (_this.adapter_.isUnbounded()) {
  894. _this.adapter_.addClass(UNBOUNDED_1);
  895. // Unbounded ripples need layout logic applied immediately to set coordinates for both shade and ripple
  896. _this.layoutInternal_();
  897. }
  898. });
  899. }
  900. };
  901. MDCRippleFoundation.prototype.destroy = function () {
  902. var _this = this;
  903. if (this.supportsPressRipple_()) {
  904. if (this.activationTimer_) {
  905. clearTimeout(this.activationTimer_);
  906. this.activationTimer_ = 0;
  907. this.adapter_.removeClass(MDCRippleFoundation.cssClasses.FG_ACTIVATION);
  908. }
  909. if (this.fgDeactivationRemovalTimer_) {
  910. clearTimeout(this.fgDeactivationRemovalTimer_);
  911. this.fgDeactivationRemovalTimer_ = 0;
  912. this.adapter_.removeClass(MDCRippleFoundation.cssClasses.FG_DEACTIVATION);
  913. }
  914. var _a = MDCRippleFoundation.cssClasses,
  915. ROOT_2 = _a.ROOT,
  916. UNBOUNDED_2 = _a.UNBOUNDED;
  917. requestAnimationFrame(function () {
  918. _this.adapter_.removeClass(ROOT_2);
  919. _this.adapter_.removeClass(UNBOUNDED_2);
  920. _this.removeCssVars_();
  921. });
  922. }
  923. this.deregisterRootHandlers_();
  924. this.deregisterDeactivationHandlers_();
  925. };
  926. /**
  927. * @param evt Optional event containing position information.
  928. */
  929. MDCRippleFoundation.prototype.activate = function (evt) {
  930. this.activate_(evt);
  931. };
  932. MDCRippleFoundation.prototype.deactivate = function () {
  933. this.deactivate_();
  934. };
  935. MDCRippleFoundation.prototype.layout = function () {
  936. var _this = this;
  937. if (this.layoutFrame_) {
  938. cancelAnimationFrame(this.layoutFrame_);
  939. }
  940. this.layoutFrame_ = requestAnimationFrame(function () {
  941. _this.layoutInternal_();
  942. _this.layoutFrame_ = 0;
  943. });
  944. };
  945. MDCRippleFoundation.prototype.setUnbounded = function (unbounded) {
  946. var UNBOUNDED = MDCRippleFoundation.cssClasses.UNBOUNDED;
  947. if (unbounded) {
  948. this.adapter_.addClass(UNBOUNDED);
  949. } else {
  950. this.adapter_.removeClass(UNBOUNDED);
  951. }
  952. };
  953. MDCRippleFoundation.prototype.handleFocus = function () {
  954. var _this = this;
  955. requestAnimationFrame(function () {
  956. return _this.adapter_.addClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);
  957. });
  958. };
  959. MDCRippleFoundation.prototype.handleBlur = function () {
  960. var _this = this;
  961. requestAnimationFrame(function () {
  962. return _this.adapter_.removeClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);
  963. });
  964. };
  965. /**
  966. * We compute this property so that we are not querying information about the client
  967. * until the point in time where the foundation requests it. This prevents scenarios where
  968. * client-side feature-detection may happen too early, such as when components are rendered on the server
  969. * and then initialized at mount time on the client.
  970. */
  971. MDCRippleFoundation.prototype.supportsPressRipple_ = function () {
  972. return this.adapter_.browserSupportsCssVars();
  973. };
  974. MDCRippleFoundation.prototype.defaultActivationState_ = function () {
  975. return {
  976. activationEvent: undefined,
  977. hasDeactivationUXRun: false,
  978. isActivated: false,
  979. isProgrammatic: false,
  980. wasActivatedByPointer: false,
  981. wasElementMadeActive: false
  982. };
  983. };
  984. /**
  985. * supportsPressRipple Passed from init to save a redundant function call
  986. */
  987. MDCRippleFoundation.prototype.registerRootHandlers_ = function (supportsPressRipple) {
  988. var _this = this;
  989. if (supportsPressRipple) {
  990. ACTIVATION_EVENT_TYPES.forEach(function (evtType) {
  991. _this.adapter_.registerInteractionHandler(evtType, _this.activateHandler_);
  992. });
  993. if (this.adapter_.isUnbounded()) {
  994. this.adapter_.registerResizeHandler(this.resizeHandler_);
  995. }
  996. }
  997. this.adapter_.registerInteractionHandler('focus', this.focusHandler_);
  998. this.adapter_.registerInteractionHandler('blur', this.blurHandler_);
  999. };
  1000. MDCRippleFoundation.prototype.registerDeactivationHandlers_ = function (evt) {
  1001. var _this = this;
  1002. if (evt.type === 'keydown') {
  1003. this.adapter_.registerInteractionHandler('keyup', this.deactivateHandler_);
  1004. } else {
  1005. POINTER_DEACTIVATION_EVENT_TYPES.forEach(function (evtType) {
  1006. _this.adapter_.registerDocumentInteractionHandler(evtType, _this.deactivateHandler_);
  1007. });
  1008. }
  1009. };
  1010. MDCRippleFoundation.prototype.deregisterRootHandlers_ = function () {
  1011. var _this = this;
  1012. ACTIVATION_EVENT_TYPES.forEach(function (evtType) {
  1013. _this.adapter_.deregisterInteractionHandler(evtType, _this.activateHandler_);
  1014. });
  1015. this.adapter_.deregisterInteractionHandler('focus', this.focusHandler_);
  1016. this.adapter_.deregisterInteractionHandler('blur', this.blurHandler_);
  1017. if (this.adapter_.isUnbounded()) {
  1018. this.adapter_.deregisterResizeHandler(this.resizeHandler_);
  1019. }
  1020. };
  1021. MDCRippleFoundation.prototype.deregisterDeactivationHandlers_ = function () {
  1022. var _this = this;
  1023. this.adapter_.deregisterInteractionHandler('keyup', this.deactivateHandler_);
  1024. POINTER_DEACTIVATION_EVENT_TYPES.forEach(function (evtType) {
  1025. _this.adapter_.deregisterDocumentInteractionHandler(evtType, _this.deactivateHandler_);
  1026. });
  1027. };
  1028. MDCRippleFoundation.prototype.removeCssVars_ = function () {
  1029. var _this = this;
  1030. var rippleStrings = MDCRippleFoundation.strings;
  1031. var keys = Object.keys(rippleStrings);
  1032. keys.forEach(function (key) {
  1033. if (key.indexOf('VAR_') === 0) {
  1034. _this.adapter_.updateCssVariable(rippleStrings[key], null);
  1035. }
  1036. });
  1037. };
  1038. MDCRippleFoundation.prototype.activate_ = function (evt) {
  1039. var _this = this;
  1040. if (this.adapter_.isSurfaceDisabled()) {
  1041. return;
  1042. }
  1043. var activationState = this.activationState_;
  1044. if (activationState.isActivated) {
  1045. return;
  1046. }
  1047. // Avoid reacting to follow-on events fired by touch device after an already-processed user interaction
  1048. var previousActivationEvent = this.previousActivationEvent_;
  1049. var isSameInteraction = previousActivationEvent && evt !== undefined && previousActivationEvent.type !== evt.type;
  1050. if (isSameInteraction) {
  1051. return;
  1052. }
  1053. activationState.isActivated = true;
  1054. activationState.isProgrammatic = evt === undefined;
  1055. activationState.activationEvent = evt;
  1056. activationState.wasActivatedByPointer = activationState.isProgrammatic ? false : evt !== undefined && (evt.type === 'mousedown' || evt.type === 'touchstart' || evt.type === 'pointerdown');
  1057. var hasActivatedChild = evt !== undefined && activatedTargets.length > 0 && activatedTargets.some(function (target) {
  1058. return _this.adapter_.containsEventTarget(target);
  1059. });
  1060. if (hasActivatedChild) {
  1061. // Immediately reset activation state, while preserving logic that prevents touch follow-on events
  1062. this.resetActivationState_();
  1063. return;
  1064. }
  1065. if (evt !== undefined) {
  1066. activatedTargets.push(evt.target);
  1067. this.registerDeactivationHandlers_(evt);
  1068. }
  1069. activationState.wasElementMadeActive = this.checkElementMadeActive_(evt);
  1070. if (activationState.wasElementMadeActive) {
  1071. this.animateActivation_();
  1072. }
  1073. requestAnimationFrame(function () {
  1074. // Reset array on next frame after the current event has had a chance to bubble to prevent ancestor ripples
  1075. activatedTargets = [];
  1076. if (!activationState.wasElementMadeActive && evt !== undefined && (evt.key === ' ' || evt.keyCode === 32)) {
  1077. // If space was pressed, try again within an rAF call to detect :active, because different UAs report
  1078. // active states inconsistently when they're called within event handling code:
  1079. // - https://bugs.chromium.org/p/chromium/issues/detail?id=635971
  1080. // - https://bugzilla.mozilla.org/show_bug.cgi?id=1293741
  1081. // We try first outside rAF to support Edge, which does not exhibit this problem, but will crash if a CSS
  1082. // variable is set within a rAF callback for a submit button interaction (#2241).
  1083. activationState.wasElementMadeActive = _this.checkElementMadeActive_(evt);
  1084. if (activationState.wasElementMadeActive) {
  1085. _this.animateActivation_();
  1086. }
  1087. }
  1088. if (!activationState.wasElementMadeActive) {
  1089. // Reset activation state immediately if element was not made active.
  1090. _this.activationState_ = _this.defaultActivationState_();
  1091. }
  1092. });
  1093. };
  1094. MDCRippleFoundation.prototype.checkElementMadeActive_ = function (evt) {
  1095. return evt !== undefined && evt.type === 'keydown' ? this.adapter_.isSurfaceActive() : true;
  1096. };
  1097. MDCRippleFoundation.prototype.animateActivation_ = function () {
  1098. var _this = this;
  1099. var _a = MDCRippleFoundation.strings,
  1100. VAR_FG_TRANSLATE_START = _a.VAR_FG_TRANSLATE_START,
  1101. VAR_FG_TRANSLATE_END = _a.VAR_FG_TRANSLATE_END;
  1102. var _b = MDCRippleFoundation.cssClasses,
  1103. FG_DEACTIVATION = _b.FG_DEACTIVATION,
  1104. FG_ACTIVATION = _b.FG_ACTIVATION;
  1105. var DEACTIVATION_TIMEOUT_MS = MDCRippleFoundation.numbers.DEACTIVATION_TIMEOUT_MS;
  1106. this.layoutInternal_();
  1107. var translateStart = '';
  1108. var translateEnd = '';
  1109. if (!this.adapter_.isUnbounded()) {
  1110. var _c = this.getFgTranslationCoordinates_(),
  1111. startPoint = _c.startPoint,
  1112. endPoint = _c.endPoint;
  1113. translateStart = startPoint.x + "px, " + startPoint.y + "px";
  1114. translateEnd = endPoint.x + "px, " + endPoint.y + "px";
  1115. }
  1116. this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_START, translateStart);
  1117. this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_END, translateEnd);
  1118. // Cancel any ongoing activation/deactivation animations
  1119. clearTimeout(this.activationTimer_);
  1120. clearTimeout(this.fgDeactivationRemovalTimer_);
  1121. this.rmBoundedActivationClasses_();
  1122. this.adapter_.removeClass(FG_DEACTIVATION);
  1123. // Force layout in order to re-trigger the animation.
  1124. this.adapter_.computeBoundingRect();
  1125. this.adapter_.addClass(FG_ACTIVATION);
  1126. this.activationTimer_ = setTimeout(function () {
  1127. return _this.activationTimerCallback_();
  1128. }, DEACTIVATION_TIMEOUT_MS);
  1129. };
  1130. MDCRippleFoundation.prototype.getFgTranslationCoordinates_ = function () {
  1131. var _a = this.activationState_,
  1132. activationEvent = _a.activationEvent,
  1133. wasActivatedByPointer = _a.wasActivatedByPointer;
  1134. var startPoint;
  1135. if (wasActivatedByPointer) {
  1136. startPoint = util_1.getNormalizedEventCoords(activationEvent, this.adapter_.getWindowPageOffset(), this.adapter_.computeBoundingRect());
  1137. } else {
  1138. startPoint = {
  1139. x: this.frame_.width / 2,
  1140. y: this.frame_.height / 2
  1141. };
  1142. }
  1143. // Center the element around the start point.
  1144. startPoint = {
  1145. x: startPoint.x - this.initialSize_ / 2,
  1146. y: startPoint.y - this.initialSize_ / 2
  1147. };
  1148. var endPoint = {
  1149. x: this.frame_.width / 2 - this.initialSize_ / 2,
  1150. y: this.frame_.height / 2 - this.initialSize_ / 2
  1151. };
  1152. return { startPoint: startPoint, endPoint: endPoint };
  1153. };
  1154. MDCRippleFoundation.prototype.runDeactivationUXLogicIfReady_ = function () {
  1155. var _this = this;
  1156. // This method is called both when a pointing device is released, and when the activation animation ends.
  1157. // The deactivation animation should only run after both of those occur.
  1158. var FG_DEACTIVATION = MDCRippleFoundation.cssClasses.FG_DEACTIVATION;
  1159. var _a = this.activationState_,
  1160. hasDeactivationUXRun = _a.hasDeactivationUXRun,
  1161. isActivated = _a.isActivated;
  1162. var activationHasEnded = hasDeactivationUXRun || !isActivated;
  1163. if (activationHasEnded && this.activationAnimationHasEnded_) {
  1164. this.rmBoundedActivationClasses_();
  1165. this.adapter_.addClass(FG_DEACTIVATION);
  1166. this.fgDeactivationRemovalTimer_ = setTimeout(function () {
  1167. _this.adapter_.removeClass(FG_DEACTIVATION);
  1168. }, constants_1.numbers.FG_DEACTIVATION_MS);
  1169. }
  1170. };
  1171. MDCRippleFoundation.prototype.rmBoundedActivationClasses_ = function () {
  1172. var FG_ACTIVATION = MDCRippleFoundation.cssClasses.FG_ACTIVATION;
  1173. this.adapter_.removeClass(FG_ACTIVATION);
  1174. this.activationAnimationHasEnded_ = false;
  1175. this.adapter_.computeBoundingRect();
  1176. };
  1177. MDCRippleFoundation.prototype.resetActivationState_ = function () {
  1178. var _this = this;
  1179. this.previousActivationEvent_ = this.activationState_.activationEvent;
  1180. this.activationState_ = this.defaultActivationState_();
  1181. // Touch devices may fire additional events for the same interaction within a short time.
  1182. // Store the previous event until it's safe to assume that subsequent events are for new interactions.
  1183. setTimeout(function () {
  1184. return _this.previousActivationEvent_ = undefined;
  1185. }, MDCRippleFoundation.numbers.TAP_DELAY_MS);
  1186. };
  1187. MDCRippleFoundation.prototype.deactivate_ = function () {
  1188. var _this = this;
  1189. var activationState = this.activationState_;
  1190. // This can happen in scenarios such as when you have a keyup event that blurs the element.
  1191. if (!activationState.isActivated) {
  1192. return;
  1193. }
  1194. var state = __assign({}, activationState);
  1195. if (activationState.isProgrammatic) {
  1196. requestAnimationFrame(function () {
  1197. return _this.animateDeactivation_(state);
  1198. });
  1199. this.resetActivationState_();
  1200. } else {
  1201. this.deregisterDeactivationHandlers_();
  1202. requestAnimationFrame(function () {
  1203. _this.activationState_.hasDeactivationUXRun = true;
  1204. _this.animateDeactivation_(state);
  1205. _this.resetActivationState_();
  1206. });
  1207. }
  1208. };
  1209. MDCRippleFoundation.prototype.animateDeactivation_ = function (_a) {
  1210. var wasActivatedByPointer = _a.wasActivatedByPointer,
  1211. wasElementMadeActive = _a.wasElementMadeActive;
  1212. if (wasActivatedByPointer || wasElementMadeActive) {
  1213. this.runDeactivationUXLogicIfReady_();
  1214. }
  1215. };
  1216. MDCRippleFoundation.prototype.layoutInternal_ = function () {
  1217. var _this = this;
  1218. this.frame_ = this.adapter_.computeBoundingRect();
  1219. var maxDim = Math.max(this.frame_.height, this.frame_.width);
  1220. // Surface diameter is treated differently for unbounded vs. bounded ripples.
  1221. // Unbounded ripple diameter is calculated smaller since the surface is expected to already be padded appropriately
  1222. // to extend the hitbox, and the ripple is expected to meet the edges of the padded hitbox (which is typically
  1223. // square). Bounded ripples, on the other hand, are fully expected to expand beyond the surface's longest diameter
  1224. // (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via
  1225. // `overflow: hidden`.
  1226. var getBoundedRadius = function getBoundedRadius() {
  1227. var hypotenuse = Math.sqrt(Math.pow(_this.frame_.width, 2) + Math.pow(_this.frame_.height, 2));
  1228. return hypotenuse + MDCRippleFoundation.numbers.PADDING;
  1229. };
  1230. this.maxRadius_ = this.adapter_.isUnbounded() ? maxDim : getBoundedRadius();
  1231. // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
  1232. var initialSize = Math.floor(maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE);
  1233. // Unbounded ripple size should always be even number to equally center align.
  1234. if (this.adapter_.isUnbounded() && initialSize % 2 !== 0) {
  1235. this.initialSize_ = initialSize - 1;
  1236. } else {
  1237. this.initialSize_ = initialSize;
  1238. }
  1239. this.fgScale_ = "" + this.maxRadius_ / this.initialSize_;
  1240. this.updateLayoutCssVars_();
  1241. };
  1242. MDCRippleFoundation.prototype.updateLayoutCssVars_ = function () {
  1243. var _a = MDCRippleFoundation.strings,
  1244. VAR_FG_SIZE = _a.VAR_FG_SIZE,
  1245. VAR_LEFT = _a.VAR_LEFT,
  1246. VAR_TOP = _a.VAR_TOP,
  1247. VAR_FG_SCALE = _a.VAR_FG_SCALE;
  1248. this.adapter_.updateCssVariable(VAR_FG_SIZE, this.initialSize_ + "px");
  1249. this.adapter_.updateCssVariable(VAR_FG_SCALE, this.fgScale_);
  1250. if (this.adapter_.isUnbounded()) {
  1251. this.unboundedCoords_ = {
  1252. left: Math.round(this.frame_.width / 2 - this.initialSize_ / 2),
  1253. top: Math.round(this.frame_.height / 2 - this.initialSize_ / 2)
  1254. };
  1255. this.adapter_.updateCssVariable(VAR_LEFT, this.unboundedCoords_.left + "px");
  1256. this.adapter_.updateCssVariable(VAR_TOP, this.unboundedCoords_.top + "px");
  1257. }
  1258. };
  1259. return MDCRippleFoundation;
  1260. }(foundation_1.MDCFoundation);
  1261. exports.MDCRippleFoundation = MDCRippleFoundation;
  1262. // tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
  1263. exports.default = MDCRippleFoundation;
  1264. /***/ }),
  1265. /***/ "./packages/mdc-ripple/index.ts":
  1266. /*!**************************************!*\
  1267. !*** ./packages/mdc-ripple/index.ts ***!
  1268. \**************************************/
  1269. /*! no static exports found */
  1270. /***/ (function(module, exports, __webpack_require__) {
  1271. "use strict";
  1272. /**
  1273. * @license
  1274. * Copyright 2019 Google Inc.
  1275. *
  1276. * Permission is hereby granted, free of charge, to any person obtaining a copy
  1277. * of this software and associated documentation files (the "Software"), to deal
  1278. * in the Software without restriction, including without limitation the rights
  1279. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  1280. * copies of the Software, and to permit persons to whom the Software is
  1281. * furnished to do so, subject to the following conditions:
  1282. *
  1283. * The above copyright notice and this permission notice shall be included in
  1284. * all copies or substantial portions of the Software.
  1285. *
  1286. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  1287. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  1288. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  1289. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  1290. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  1291. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  1292. * THE SOFTWARE.
  1293. */
  1294. function __export(m) {
  1295. for (var p in m) {
  1296. if (!exports.hasOwnProperty(p)) exports[p] = m[p];
  1297. }
  1298. }
  1299. var __importStar = this && this.__importStar || function (mod) {
  1300. if (mod && mod.__esModule) return mod;
  1301. var result = {};
  1302. if (mod != null) for (var k in mod) {
  1303. if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
  1304. }result["default"] = mod;
  1305. return result;
  1306. };
  1307. Object.defineProperty(exports, "__esModule", { value: true });
  1308. var util = __importStar(__webpack_require__(/*! ./util */ "./packages/mdc-ripple/util.ts"));
  1309. exports.util = util;
  1310. __export(__webpack_require__(/*! ./component */ "./packages/mdc-ripple/component.ts"));
  1311. __export(__webpack_require__(/*! ./constants */ "./packages/mdc-ripple/constants.ts"));
  1312. __export(__webpack_require__(/*! ./foundation */ "./packages/mdc-ripple/foundation.ts"));
  1313. /***/ }),
  1314. /***/ "./packages/mdc-ripple/util.ts":
  1315. /*!*************************************!*\
  1316. !*** ./packages/mdc-ripple/util.ts ***!
  1317. \*************************************/
  1318. /*! no static exports found */
  1319. /***/ (function(module, exports, __webpack_require__) {
  1320. "use strict";
  1321. Object.defineProperty(exports, "__esModule", { value: true });
  1322. /**
  1323. * Stores result from supportsCssVariables to avoid redundant processing to
  1324. * detect CSS custom variable support.
  1325. */
  1326. var supportsCssVariables_;
  1327. function supportsCssVariables(windowObj, forceRefresh) {
  1328. if (forceRefresh === void 0) {
  1329. forceRefresh = false;
  1330. }
  1331. var CSS = windowObj.CSS;
  1332. var supportsCssVars = supportsCssVariables_;
  1333. if (typeof supportsCssVariables_ === 'boolean' && !forceRefresh) {
  1334. return supportsCssVariables_;
  1335. }
  1336. var supportsFunctionPresent = CSS && typeof CSS.supports === 'function';
  1337. if (!supportsFunctionPresent) {
  1338. return false;
  1339. }
  1340. var explicitlySupportsCssVars = CSS.supports('--css-vars', 'yes');
  1341. // See: https://bugs.webkit.org/show_bug.cgi?id=154669
  1342. // See: README section on Safari
  1343. var weAreFeatureDetectingSafari10plus = CSS.supports('(--css-vars: yes)') && CSS.supports('color', '#00000000');
  1344. supportsCssVars = explicitlySupportsCssVars || weAreFeatureDetectingSafari10plus;
  1345. if (!forceRefresh) {
  1346. supportsCssVariables_ = supportsCssVars;
  1347. }
  1348. return supportsCssVars;
  1349. }
  1350. exports.supportsCssVariables = supportsCssVariables;
  1351. function getNormalizedEventCoords(evt, pageOffset, clientRect) {
  1352. if (!evt) {
  1353. return { x: 0, y: 0 };
  1354. }
  1355. var x = pageOffset.x,
  1356. y = pageOffset.y;
  1357. var documentX = x + clientRect.left;
  1358. var documentY = y + clientRect.top;
  1359. var normalizedX;
  1360. var normalizedY;
  1361. // Determine touch point relative to the ripple container.
  1362. if (evt.type === 'touchstart') {
  1363. var touchEvent = evt;
  1364. normalizedX = touchEvent.changedTouches[0].pageX - documentX;
  1365. normalizedY = touchEvent.changedTouches[0].pageY - documentY;
  1366. } else {
  1367. var mouseEvent = evt;
  1368. normalizedX = mouseEvent.pageX - documentX;
  1369. normalizedY = mouseEvent.pageY - documentY;
  1370. }
  1371. return { x: normalizedX, y: normalizedY };
  1372. }
  1373. exports.getNormalizedEventCoords = getNormalizedEventCoords;
  1374. /***/ })
  1375. /******/ });
  1376. });
  1377. //# sourceMappingURL=mdc.ripple.js.map