UNPKG

73.2 kBJavaScriptView Raw
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") module.exports = factory(); else if (typeof define === "function" && define.amd) define([], factory); else if (typeof exports === "object") exports["toolbar"] = factory(); else root["mdc"] = root["mdc"] || {},
10 root["mdc"]["toolbar"] = factory();
11})(this, function() {
12 return function(modules) {
13 var installedModules = {};
14 function __webpack_require__(moduleId) {
15 if (installedModules[moduleId]) {
16 return installedModules[moduleId].exports;
17 }
18 var module = installedModules[moduleId] = {
19 i: moduleId,
20 l: false,
21 exports: {}
22 };
23 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
24 module.l = true;
25 return module.exports;
26 }
27 __webpack_require__.m = modules;
28 __webpack_require__.c = installedModules;
29 __webpack_require__.d = function(exports, name, getter) {
30 if (!__webpack_require__.o(exports, name)) {
31 Object.defineProperty(exports, name, {
32 configurable: false,
33 enumerable: true,
34 get: getter
35 });
36 }
37 };
38 __webpack_require__.n = function(module) {
39 var getter = module && module.__esModule ? function getDefault() {
40 return module["default"];
41 } : function getModuleExports() {
42 return module;
43 };
44 __webpack_require__.d(getter, "a", getter);
45 return getter;
46 };
47 __webpack_require__.o = function(object, property) {
48 return Object.prototype.hasOwnProperty.call(object, property);
49 };
50 __webpack_require__.p = "";
51 return __webpack_require__(__webpack_require__.s = 173);
52 }({
53 0: function(module, exports, __webpack_require__) {
54 "use strict";
55 Object.defineProperty(exports, "__esModule", {
56 value: true
57 });
58 var MDCFoundation = function() {
59 function MDCFoundation(adapter) {
60 if (adapter === void 0) {
61 adapter = {};
62 }
63 this.adapter_ = adapter;
64 }
65 Object.defineProperty(MDCFoundation, "cssClasses", {
66 get: function get() {
67 return {};
68 },
69 enumerable: true,
70 configurable: true
71 });
72 Object.defineProperty(MDCFoundation, "strings", {
73 get: function get() {
74 return {};
75 },
76 enumerable: true,
77 configurable: true
78 });
79 Object.defineProperty(MDCFoundation, "numbers", {
80 get: function get() {
81 return {};
82 },
83 enumerable: true,
84 configurable: true
85 });
86 Object.defineProperty(MDCFoundation, "defaultAdapter", {
87 get: function get() {
88 return {};
89 },
90 enumerable: true,
91 configurable: true
92 });
93 MDCFoundation.prototype.init = function() {};
94 MDCFoundation.prototype.destroy = function() {};
95 return MDCFoundation;
96 }();
97 exports.MDCFoundation = MDCFoundation;
98 exports.default = MDCFoundation;
99 },
100 1: function(module, exports, __webpack_require__) {
101 "use strict";
102 var __read = this && this.__read || function(o, n) {
103 var m = typeof Symbol === "function" && o[Symbol.iterator];
104 if (!m) return o;
105 var i = m.call(o), r, ar = [], e;
106 try {
107 while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
108 ar.push(r.value);
109 }
110 } catch (error) {
111 e = {
112 error: error
113 };
114 } finally {
115 try {
116 if (r && !r.done && (m = i["return"])) m.call(i);
117 } finally {
118 if (e) throw e.error;
119 }
120 }
121 return ar;
122 };
123 var __spread = this && this.__spread || function() {
124 for (var ar = [], i = 0; i < arguments.length; i++) {
125 ar = ar.concat(__read(arguments[i]));
126 }
127 return ar;
128 };
129 Object.defineProperty(exports, "__esModule", {
130 value: true
131 });
132 var foundation_1 = __webpack_require__(0);
133 var MDCComponent = function() {
134 function MDCComponent(root, foundation) {
135 var args = [];
136 for (var _i = 2; _i < arguments.length; _i++) {
137 args[_i - 2] = arguments[_i];
138 }
139 this.root_ = root;
140 this.initialize.apply(this, __spread(args));
141 this.foundation_ = foundation === undefined ? this.getDefaultFoundation() : foundation;
142 this.foundation_.init();
143 this.initialSyncWithDOM();
144 }
145 MDCComponent.attachTo = function(root) {
146 return new MDCComponent(root, new foundation_1.MDCFoundation({}));
147 };
148 MDCComponent.prototype.initialize = function() {
149 var _args = [];
150 for (var _i = 0; _i < arguments.length; _i++) {
151 _args[_i] = arguments[_i];
152 }
153 };
154 MDCComponent.prototype.getDefaultFoundation = function() {
155 throw new Error("Subclasses must override getDefaultFoundation to return a properly configured " + "foundation class");
156 };
157 MDCComponent.prototype.initialSyncWithDOM = function() {};
158 MDCComponent.prototype.destroy = function() {
159 this.foundation_.destroy();
160 };
161 MDCComponent.prototype.listen = function(evtType, handler) {
162 this.root_.addEventListener(evtType, handler);
163 };
164 MDCComponent.prototype.unlisten = function(evtType, handler) {
165 this.root_.removeEventListener(evtType, handler);
166 };
167 MDCComponent.prototype.emit = function(evtType, evtData, shouldBubble) {
168 if (shouldBubble === void 0) {
169 shouldBubble = false;
170 }
171 var evt;
172 if (typeof CustomEvent === "function") {
173 evt = new CustomEvent(evtType, {
174 bubbles: shouldBubble,
175 detail: evtData
176 });
177 } else {
178 evt = document.createEvent("CustomEvent");
179 evt.initCustomEvent(evtType, shouldBubble, false, evtData);
180 }
181 this.root_.dispatchEvent(evt);
182 };
183 return MDCComponent;
184 }();
185 exports.MDCComponent = MDCComponent;
186 exports.default = MDCComponent;
187 },
188 107: function(module, exports, __webpack_require__) {
189 "use strict";
190 var __extends = this && this.__extends || function() {
191 var _extendStatics = function extendStatics(d, b) {
192 _extendStatics = Object.setPrototypeOf || {
193 __proto__: []
194 } instanceof Array && function(d, b) {
195 d.__proto__ = b;
196 } || function(d, b) {
197 for (var p in b) {
198 if (b.hasOwnProperty(p)) d[p] = b[p];
199 }
200 };
201 return _extendStatics(d, b);
202 };
203 return function(d, b) {
204 _extendStatics(d, b);
205 function __() {
206 this.constructor = d;
207 }
208 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
209 };
210 }();
211 var __assign = this && this.__assign || function() {
212 __assign = Object.assign || function(t) {
213 for (var s, i = 1, n = arguments.length; i < n; i++) {
214 s = arguments[i];
215 for (var p in s) {
216 if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
217 }
218 }
219 return t;
220 };
221 return __assign.apply(this, arguments);
222 };
223 Object.defineProperty(exports, "__esModule", {
224 value: true
225 });
226 var foundation_1 = __webpack_require__(0);
227 var constants_1 = __webpack_require__(108);
228 var MDCToolbarFoundation = function(_super) {
229 __extends(MDCToolbarFoundation, _super);
230 function MDCToolbarFoundation(adapter) {
231 var _this = _super.call(this, __assign({}, MDCToolbarFoundation.defaultAdapter, adapter)) || this;
232 _this.checkRowHeightFrame_ = 0;
233 _this.scrollFrame_ = 0;
234 _this.executedLastChange_ = false;
235 _this.isFixed_ = false;
236 _this.isFixedLastRow_ = false;
237 _this.hasFlexibleFirstRow_ = false;
238 _this.useFlexDefaultBehavior_ = false;
239 _this.calculations_ = {
240 flexibleExpansionHeight: 0,
241 flexibleExpansionRatio: 0,
242 maxTranslateYDistance: 0,
243 maxTranslateYRatio: 0,
244 scrollThreshold: 0,
245 scrollThresholdRatio: 0,
246 toolbarHeight: 0,
247 toolbarRatio: 0,
248 toolbarRowHeight: 0
249 };
250 return _this;
251 }
252 Object.defineProperty(MDCToolbarFoundation, "cssClasses", {
253 get: function get() {
254 return constants_1.cssClasses;
255 },
256 enumerable: true,
257 configurable: true
258 });
259 Object.defineProperty(MDCToolbarFoundation, "strings", {
260 get: function get() {
261 return constants_1.strings;
262 },
263 enumerable: true,
264 configurable: true
265 });
266 Object.defineProperty(MDCToolbarFoundation, "numbers", {
267 get: function get() {
268 return constants_1.numbers;
269 },
270 enumerable: true,
271 configurable: true
272 });
273 Object.defineProperty(MDCToolbarFoundation, "defaultAdapter", {
274 get: function get() {
275 return {
276 hasClass: function hasClass() {
277 return false;
278 },
279 addClass: function addClass() {
280 return undefined;
281 },
282 removeClass: function removeClass() {
283 return undefined;
284 },
285 registerScrollHandler: function registerScrollHandler() {
286 return undefined;
287 },
288 deregisterScrollHandler: function deregisterScrollHandler() {
289 return undefined;
290 },
291 registerResizeHandler: function registerResizeHandler() {
292 return undefined;
293 },
294 deregisterResizeHandler: function deregisterResizeHandler() {
295 return undefined;
296 },
297 getViewportWidth: function getViewportWidth() {
298 return 0;
299 },
300 getViewportScrollY: function getViewportScrollY() {
301 return 0;
302 },
303 getOffsetHeight: function getOffsetHeight() {
304 return 0;
305 },
306 getFirstRowElementOffsetHeight: function getFirstRowElementOffsetHeight() {
307 return 0;
308 },
309 notifyChange: function notifyChange() {
310 return undefined;
311 },
312 setStyle: function setStyle() {
313 return undefined;
314 },
315 setStyleForTitleElement: function setStyleForTitleElement() {
316 return undefined;
317 },
318 setStyleForFlexibleRowElement: function setStyleForFlexibleRowElement() {
319 return undefined;
320 },
321 setStyleForFixedAdjustElement: function setStyleForFixedAdjustElement() {
322 return undefined;
323 }
324 };
325 },
326 enumerable: true,
327 configurable: true
328 });
329 MDCToolbarFoundation.prototype.init = function() {
330 var _this = this;
331 this.isFixed_ = this.adapter_.hasClass(constants_1.cssClasses.FIXED);
332 this.isFixedLastRow_ = this.adapter_.hasClass(constants_1.cssClasses.FIXED_LASTROW) && this.isFixed_;
333 this.hasFlexibleFirstRow_ = this.adapter_.hasClass(constants_1.cssClasses.TOOLBAR_ROW_FLEXIBLE);
334 if (this.hasFlexibleFirstRow_) {
335 this.useFlexDefaultBehavior_ = this.adapter_.hasClass(constants_1.cssClasses.FLEXIBLE_DEFAULT_BEHAVIOR);
336 }
337 this.resizeHandler_ = function() {
338 return _this.checkRowHeight_();
339 };
340 this.scrollHandler_ = function() {
341 return _this.updateToolbarStyles_();
342 };
343 this.adapter_.registerResizeHandler(this.resizeHandler_);
344 this.adapter_.registerScrollHandler(this.scrollHandler_);
345 this.initKeyRatio_();
346 this.setKeyHeights_();
347 };
348 MDCToolbarFoundation.prototype.destroy = function() {
349 this.adapter_.deregisterResizeHandler(this.resizeHandler_);
350 this.adapter_.deregisterScrollHandler(this.scrollHandler_);
351 };
352 MDCToolbarFoundation.prototype.updateAdjustElementStyles = function() {
353 if (this.isFixed_) {
354 this.adapter_.setStyleForFixedAdjustElement("margin-top", this.calculations_.toolbarHeight + "px");
355 }
356 };
357 MDCToolbarFoundation.prototype.getFlexibleExpansionRatio_ = function(scrollTop) {
358 var delta = 1e-4;
359 return Math.max(0, 1 - scrollTop / (this.calculations_.flexibleExpansionHeight + delta));
360 };
361 MDCToolbarFoundation.prototype.checkRowHeight_ = function() {
362 var _this = this;
363 cancelAnimationFrame(this.checkRowHeightFrame_);
364 this.checkRowHeightFrame_ = requestAnimationFrame(function() {
365 return _this.setKeyHeights_();
366 });
367 };
368 MDCToolbarFoundation.prototype.setKeyHeights_ = function() {
369 var newToolbarRowHeight = this.getRowHeight_();
370 if (newToolbarRowHeight !== this.calculations_.toolbarRowHeight) {
371 this.calculations_.toolbarRowHeight = newToolbarRowHeight;
372 this.calculations_.toolbarHeight = this.calculations_.toolbarRatio * this.calculations_.toolbarRowHeight;
373 this.calculations_.flexibleExpansionHeight = this.calculations_.flexibleExpansionRatio * this.calculations_.toolbarRowHeight;
374 this.calculations_.maxTranslateYDistance = this.calculations_.maxTranslateYRatio * this.calculations_.toolbarRowHeight;
375 this.calculations_.scrollThreshold = this.calculations_.scrollThresholdRatio * this.calculations_.toolbarRowHeight;
376 this.updateAdjustElementStyles();
377 this.updateToolbarStyles_();
378 }
379 };
380 MDCToolbarFoundation.prototype.updateToolbarStyles_ = function() {
381 var _this = this;
382 cancelAnimationFrame(this.scrollFrame_);
383 this.scrollFrame_ = requestAnimationFrame(function() {
384 var scrollTop = _this.adapter_.getViewportScrollY();
385 var hasScrolledOutOfThreshold = _this.scrolledOutOfThreshold_(scrollTop);
386 if (hasScrolledOutOfThreshold && _this.executedLastChange_) {
387 return;
388 }
389 var flexibleExpansionRatio = _this.getFlexibleExpansionRatio_(scrollTop);
390 _this.updateToolbarFlexibleState_(flexibleExpansionRatio);
391 if (_this.isFixedLastRow_) {
392 _this.updateToolbarFixedState_(scrollTop);
393 }
394 if (_this.hasFlexibleFirstRow_) {
395 _this.updateFlexibleRowElementStyles_(flexibleExpansionRatio);
396 }
397 _this.executedLastChange_ = hasScrolledOutOfThreshold;
398 _this.adapter_.notifyChange({
399 flexibleExpansionRatio: flexibleExpansionRatio
400 });
401 });
402 };
403 MDCToolbarFoundation.prototype.scrolledOutOfThreshold_ = function(scrollTop) {
404 return scrollTop > this.calculations_.scrollThreshold;
405 };
406 MDCToolbarFoundation.prototype.initKeyRatio_ = function() {
407 var toolbarRowHeight = this.getRowHeight_();
408 var firstRowMaxRatio = this.adapter_.getFirstRowElementOffsetHeight() / toolbarRowHeight;
409 this.calculations_.toolbarRatio = this.adapter_.getOffsetHeight() / toolbarRowHeight;
410 this.calculations_.flexibleExpansionRatio = firstRowMaxRatio - 1;
411 this.calculations_.maxTranslateYRatio = this.isFixedLastRow_ ? this.calculations_.toolbarRatio - firstRowMaxRatio : 0;
412 this.calculations_.scrollThresholdRatio = (this.isFixedLastRow_ ? this.calculations_.toolbarRatio : firstRowMaxRatio) - 1;
413 };
414 MDCToolbarFoundation.prototype.getRowHeight_ = function() {
415 var breakpoint = constants_1.numbers.TOOLBAR_MOBILE_BREAKPOINT;
416 return this.adapter_.getViewportWidth() < breakpoint ? constants_1.numbers.TOOLBAR_ROW_MOBILE_HEIGHT : constants_1.numbers.TOOLBAR_ROW_HEIGHT;
417 };
418 MDCToolbarFoundation.prototype.updateToolbarFlexibleState_ = function(flexibleExpansionRatio) {
419 this.adapter_.removeClass(constants_1.cssClasses.FLEXIBLE_MAX);
420 this.adapter_.removeClass(constants_1.cssClasses.FLEXIBLE_MIN);
421 if (flexibleExpansionRatio === 1) {
422 this.adapter_.addClass(constants_1.cssClasses.FLEXIBLE_MAX);
423 } else if (flexibleExpansionRatio === 0) {
424 this.adapter_.addClass(constants_1.cssClasses.FLEXIBLE_MIN);
425 }
426 };
427 MDCToolbarFoundation.prototype.updateToolbarFixedState_ = function(scrollTop) {
428 var translateDistance = Math.max(0, Math.min(scrollTop - this.calculations_.flexibleExpansionHeight, this.calculations_.maxTranslateYDistance));
429 this.adapter_.setStyle("transform", "translateY(" + -translateDistance + "px)");
430 if (translateDistance === this.calculations_.maxTranslateYDistance) {
431 this.adapter_.addClass(constants_1.cssClasses.FIXED_AT_LAST_ROW);
432 } else {
433 this.adapter_.removeClass(constants_1.cssClasses.FIXED_AT_LAST_ROW);
434 }
435 };
436 MDCToolbarFoundation.prototype.updateFlexibleRowElementStyles_ = function(flexibleExpansionRatio) {
437 if (this.isFixed_) {
438 var height = this.calculations_.flexibleExpansionHeight * flexibleExpansionRatio;
439 this.adapter_.setStyleForFlexibleRowElement("height", height + this.calculations_.toolbarRowHeight + "px");
440 }
441 if (this.useFlexDefaultBehavior_) {
442 this.updateElementStylesDefaultBehavior_(flexibleExpansionRatio);
443 }
444 };
445 MDCToolbarFoundation.prototype.updateElementStylesDefaultBehavior_ = function(flexibleExpansionRatio) {
446 var maxTitleSize = constants_1.numbers.MAX_TITLE_SIZE;
447 var minTitleSize = constants_1.numbers.MIN_TITLE_SIZE;
448 var currentTitleSize = (maxTitleSize - minTitleSize) * flexibleExpansionRatio + minTitleSize;
449 this.adapter_.setStyleForTitleElement("font-size", currentTitleSize + "rem");
450 };
451 return MDCToolbarFoundation;
452 }(foundation_1.MDCFoundation);
453 exports.MDCToolbarFoundation = MDCToolbarFoundation;
454 exports.default = MDCToolbarFoundation;
455 },
456 108: function(module, exports, __webpack_require__) {
457 "use strict";
458 Object.defineProperty(exports, "__esModule", {
459 value: true
460 });
461 exports.cssClasses = {
462 FIXED: "mdc-toolbar--fixed",
463 FIXED_AT_LAST_ROW: "mdc-toolbar--fixed-at-last-row",
464 FIXED_LASTROW: "mdc-toolbar--fixed-lastrow-only",
465 FLEXIBLE_DEFAULT_BEHAVIOR: "mdc-toolbar--flexible-default-behavior",
466 FLEXIBLE_MAX: "mdc-toolbar--flexible-space-maximized",
467 FLEXIBLE_MIN: "mdc-toolbar--flexible-space-minimized",
468 TOOLBAR_ROW_FLEXIBLE: "mdc-toolbar--flexible"
469 };
470 exports.strings = {
471 CHANGE_EVENT: "MDCToolbar:change",
472 FIRST_ROW_SELECTOR: ".mdc-toolbar__row:first-child",
473 ICON_SELECTOR: ".mdc-toolbar__icon",
474 TITLE_SELECTOR: ".mdc-toolbar__title"
475 };
476 exports.numbers = {
477 MAX_TITLE_SIZE: 2.125,
478 MIN_TITLE_SIZE: 1.25,
479 TOOLBAR_MOBILE_BREAKPOINT: 600,
480 TOOLBAR_ROW_HEIGHT: 64,
481 TOOLBAR_ROW_MOBILE_HEIGHT: 56
482 };
483 },
484 173: function(module, exports, __webpack_require__) {
485 "use strict";
486 function __export(m) {
487 for (var p in m) {
488 if (!exports.hasOwnProperty(p)) exports[p] = m[p];
489 }
490 }
491 Object.defineProperty(exports, "__esModule", {
492 value: true
493 });
494 __export(__webpack_require__(174));
495 __export(__webpack_require__(108));
496 __export(__webpack_require__(107));
497 },
498 174: function(module, exports, __webpack_require__) {
499 "use strict";
500 var __extends = this && this.__extends || function() {
501 var _extendStatics = function extendStatics(d, b) {
502 _extendStatics = Object.setPrototypeOf || {
503 __proto__: []
504 } 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 Object.defineProperty(exports, "__esModule", {
522 value: true
523 });
524 var component_1 = __webpack_require__(1);
525 var component_2 = __webpack_require__(6);
526 var foundation_1 = __webpack_require__(107);
527 var strings = foundation_1.MDCToolbarFoundation.strings;
528 var MDCToolbar = function(_super) {
529 __extends(MDCToolbar, _super);
530 function MDCToolbar() {
531 return _super !== null && _super.apply(this, arguments) || this;
532 }
533 MDCToolbar.attachTo = function(root) {
534 return new MDCToolbar(root);
535 };
536 MDCToolbar.prototype.initialize = function() {
537 var _this = this;
538 this.ripples_ = [];
539 this.fixedAdjustElement_ = null;
540 this.titleElement_ = this.root_.querySelector(strings.TITLE_SELECTOR);
541 var firstRowElement = this.root_.querySelector(strings.FIRST_ROW_SELECTOR);
542 if (!firstRowElement) {
543 throw new Error("MDCToolbar: Required sub-element '" + strings.FIRST_ROW_SELECTOR + "' is missing");
544 }
545 this.firstRowElement_ = firstRowElement;
546 [].forEach.call(this.root_.querySelectorAll(strings.ICON_SELECTOR), function(icon) {
547 var ripple = component_2.MDCRipple.attachTo(icon);
548 ripple.unbounded = true;
549 _this.ripples_.push(ripple);
550 });
551 };
552 MDCToolbar.prototype.destroy = function() {
553 this.ripples_.forEach(function(ripple) {
554 ripple.destroy();
555 });
556 _super.prototype.destroy.call(this);
557 };
558 Object.defineProperty(MDCToolbar.prototype, "fixedAdjustElement", {
559 get: function get() {
560 return this.fixedAdjustElement_;
561 },
562 set: function set(element) {
563 this.fixedAdjustElement_ = element;
564 this.foundation_.updateAdjustElementStyles();
565 },
566 enumerable: true,
567 configurable: true
568 });
569 MDCToolbar.prototype.getDefaultFoundation = function() {
570 var _this = this;
571 var adapter = {
572 hasClass: function hasClass(className) {
573 return _this.root_.classList.contains(className);
574 },
575 addClass: function addClass(className) {
576 return _this.root_.classList.add(className);
577 },
578 removeClass: function removeClass(className) {
579 return _this.root_.classList.remove(className);
580 },
581 registerScrollHandler: function registerScrollHandler(handler) {
582 return window.addEventListener("scroll", handler);
583 },
584 deregisterScrollHandler: function deregisterScrollHandler(handler) {
585 return window.removeEventListener("scroll", handler);
586 },
587 registerResizeHandler: function registerResizeHandler(handler) {
588 return window.addEventListener("resize", handler);
589 },
590 deregisterResizeHandler: function deregisterResizeHandler(handler) {
591 return window.removeEventListener("resize", handler);
592 },
593 getViewportWidth: function getViewportWidth() {
594 return window.innerWidth;
595 },
596 getViewportScrollY: function getViewportScrollY() {
597 return window.pageYOffset;
598 },
599 getOffsetHeight: function getOffsetHeight() {
600 return _this.root_.offsetHeight;
601 },
602 getFirstRowElementOffsetHeight: function getFirstRowElementOffsetHeight() {
603 return _this.firstRowElement_.offsetHeight;
604 },
605 notifyChange: function notifyChange(evtData) {
606 return _this.emit(strings.CHANGE_EVENT, evtData);
607 },
608 setStyle: function setStyle(property, value) {
609 return _this.root_.style.setProperty(property, value);
610 },
611 setStyleForTitleElement: function setStyleForTitleElement(property, value) {
612 if (_this.titleElement_) {
613 _this.titleElement_.style.setProperty(property, value);
614 }
615 },
616 setStyleForFlexibleRowElement: function setStyleForFlexibleRowElement(property, value) {
617 return _this.firstRowElement_.style.setProperty(property, value);
618 },
619 setStyleForFixedAdjustElement: function setStyleForFixedAdjustElement(property, value) {
620 if (_this.fixedAdjustElement) {
621 _this.fixedAdjustElement.style.setProperty(property, value);
622 }
623 }
624 };
625 return new foundation_1.MDCToolbarFoundation(adapter);
626 };
627 return MDCToolbar;
628 }(component_1.MDCComponent);
629 exports.MDCToolbar = MDCToolbar;
630 },
631 2: function(module, exports, __webpack_require__) {
632 "use strict";
633 Object.defineProperty(exports, "__esModule", {
634 value: true
635 });
636 function closest(element, selector) {
637 if (element.closest) {
638 return element.closest(selector);
639 }
640 var el = element;
641 while (el) {
642 if (matches(el, selector)) {
643 return el;
644 }
645 el = el.parentElement;
646 }
647 return null;
648 }
649 exports.closest = closest;
650 function matches(element, selector) {
651 var nativeMatches = element.matches || element.webkitMatchesSelector || element.msMatchesSelector;
652 return nativeMatches.call(element, selector);
653 }
654 exports.matches = matches;
655 },
656 3: function(module, exports, __webpack_require__) {
657 "use strict";
658 Object.defineProperty(exports, "__esModule", {
659 value: true
660 });
661 var supportsCssVariables_;
662 var supportsPassive_;
663 function detectEdgePseudoVarBug(windowObj) {
664 var document = windowObj.document;
665 var node = document.createElement("div");
666 node.className = "mdc-ripple-surface--test-edge-var-bug";
667 document.body.appendChild(node);
668 var computedStyle = windowObj.getComputedStyle(node);
669 var hasPseudoVarBug = computedStyle !== null && computedStyle.borderTopStyle === "solid";
670 if (node.parentNode) {
671 node.parentNode.removeChild(node);
672 }
673 return hasPseudoVarBug;
674 }
675 function supportsCssVariables(windowObj, forceRefresh) {
676 if (forceRefresh === void 0) {
677 forceRefresh = false;
678 }
679 var CSS = windowObj.CSS;
680 var supportsCssVars = supportsCssVariables_;
681 if (typeof supportsCssVariables_ === "boolean" && !forceRefresh) {
682 return supportsCssVariables_;
683 }
684 var supportsFunctionPresent = CSS && typeof CSS.supports === "function";
685 if (!supportsFunctionPresent) {
686 return false;
687 }
688 var explicitlySupportsCssVars = CSS.supports("--css-vars", "yes");
689 var weAreFeatureDetectingSafari10plus = CSS.supports("(--css-vars: yes)") && CSS.supports("color", "#00000000");
690 if (explicitlySupportsCssVars || weAreFeatureDetectingSafari10plus) {
691 supportsCssVars = !detectEdgePseudoVarBug(windowObj);
692 } else {
693 supportsCssVars = false;
694 }
695 if (!forceRefresh) {
696 supportsCssVariables_ = supportsCssVars;
697 }
698 return supportsCssVars;
699 }
700 exports.supportsCssVariables = supportsCssVariables;
701 function applyPassive(globalObj, forceRefresh) {
702 if (globalObj === void 0) {
703 globalObj = window;
704 }
705 if (forceRefresh === void 0) {
706 forceRefresh = false;
707 }
708 if (supportsPassive_ === undefined || forceRefresh) {
709 var isSupported_1 = false;
710 try {
711 globalObj.document.addEventListener("test", function() {
712 return undefined;
713 }, {
714 get passive() {
715 isSupported_1 = true;
716 return isSupported_1;
717 }
718 });
719 } catch (e) {}
720 supportsPassive_ = isSupported_1;
721 }
722 return supportsPassive_ ? {
723 passive: true
724 } : false;
725 }
726 exports.applyPassive = applyPassive;
727 function getNormalizedEventCoords(evt, pageOffset, clientRect) {
728 if (!evt) {
729 return {
730 x: 0,
731 y: 0
732 };
733 }
734 var x = pageOffset.x, y = pageOffset.y;
735 var documentX = x + clientRect.left;
736 var documentY = y + clientRect.top;
737 var normalizedX;
738 var normalizedY;
739 if (evt.type === "touchstart") {
740 var touchEvent = evt;
741 normalizedX = touchEvent.changedTouches[0].pageX - documentX;
742 normalizedY = touchEvent.changedTouches[0].pageY - documentY;
743 } else {
744 var mouseEvent = evt;
745 normalizedX = mouseEvent.pageX - documentX;
746 normalizedY = mouseEvent.pageY - documentY;
747 }
748 return {
749 x: normalizedX,
750 y: normalizedY
751 };
752 }
753 exports.getNormalizedEventCoords = getNormalizedEventCoords;
754 },
755 4: function(module, exports, __webpack_require__) {
756 "use strict";
757 var __extends = this && this.__extends || function() {
758 var _extendStatics = function extendStatics(d, b) {
759 _extendStatics = Object.setPrototypeOf || {
760 __proto__: []
761 } instanceof Array && function(d, b) {
762 d.__proto__ = b;
763 } || function(d, b) {
764 for (var p in b) {
765 if (b.hasOwnProperty(p)) d[p] = b[p];
766 }
767 };
768 return _extendStatics(d, b);
769 };
770 return function(d, b) {
771 _extendStatics(d, b);
772 function __() {
773 this.constructor = d;
774 }
775 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
776 };
777 }();
778 var __assign = this && this.__assign || function() {
779 __assign = Object.assign || function(t) {
780 for (var s, i = 1, n = arguments.length; i < n; i++) {
781 s = arguments[i];
782 for (var p in s) {
783 if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
784 }
785 }
786 return t;
787 };
788 return __assign.apply(this, arguments);
789 };
790 Object.defineProperty(exports, "__esModule", {
791 value: true
792 });
793 var foundation_1 = __webpack_require__(0);
794 var constants_1 = __webpack_require__(5);
795 var util_1 = __webpack_require__(3);
796 var ACTIVATION_EVENT_TYPES = [ "touchstart", "pointerdown", "mousedown", "keydown" ];
797 var POINTER_DEACTIVATION_EVENT_TYPES = [ "touchend", "pointerup", "mouseup", "contextmenu" ];
798 var activatedTargets = [];
799 var MDCRippleFoundation = function(_super) {
800 __extends(MDCRippleFoundation, _super);
801 function MDCRippleFoundation(adapter) {
802 var _this = _super.call(this, __assign({}, MDCRippleFoundation.defaultAdapter, adapter)) || this;
803 _this.activationAnimationHasEnded_ = false;
804 _this.activationTimer_ = 0;
805 _this.fgDeactivationRemovalTimer_ = 0;
806 _this.fgScale_ = "0";
807 _this.frame_ = {
808 width: 0,
809 height: 0
810 };
811 _this.initialSize_ = 0;
812 _this.layoutFrame_ = 0;
813 _this.maxRadius_ = 0;
814 _this.unboundedCoords_ = {
815 left: 0,
816 top: 0
817 };
818 _this.activationState_ = _this.defaultActivationState_();
819 _this.activationTimerCallback_ = function() {
820 _this.activationAnimationHasEnded_ = true;
821 _this.runDeactivationUXLogicIfReady_();
822 };
823 _this.activateHandler_ = function(e) {
824 return _this.activate_(e);
825 };
826 _this.deactivateHandler_ = function() {
827 return _this.deactivate_();
828 };
829 _this.focusHandler_ = function() {
830 return _this.handleFocus();
831 };
832 _this.blurHandler_ = function() {
833 return _this.handleBlur();
834 };
835 _this.resizeHandler_ = function() {
836 return _this.layout();
837 };
838 return _this;
839 }
840 Object.defineProperty(MDCRippleFoundation, "cssClasses", {
841 get: function get() {
842 return constants_1.cssClasses;
843 },
844 enumerable: true,
845 configurable: true
846 });
847 Object.defineProperty(MDCRippleFoundation, "strings", {
848 get: function get() {
849 return constants_1.strings;
850 },
851 enumerable: true,
852 configurable: true
853 });
854 Object.defineProperty(MDCRippleFoundation, "numbers", {
855 get: function get() {
856 return constants_1.numbers;
857 },
858 enumerable: true,
859 configurable: true
860 });
861 Object.defineProperty(MDCRippleFoundation, "defaultAdapter", {
862 get: function get() {
863 return {
864 addClass: function addClass() {
865 return undefined;
866 },
867 browserSupportsCssVars: function browserSupportsCssVars() {
868 return true;
869 },
870 computeBoundingRect: function computeBoundingRect() {
871 return {
872 top: 0,
873 right: 0,
874 bottom: 0,
875 left: 0,
876 width: 0,
877 height: 0
878 };
879 },
880 containsEventTarget: function containsEventTarget() {
881 return true;
882 },
883 deregisterDocumentInteractionHandler: function deregisterDocumentInteractionHandler() {
884 return undefined;
885 },
886 deregisterInteractionHandler: function deregisterInteractionHandler() {
887 return undefined;
888 },
889 deregisterResizeHandler: function deregisterResizeHandler() {
890 return undefined;
891 },
892 getWindowPageOffset: function getWindowPageOffset() {
893 return {
894 x: 0,
895 y: 0
896 };
897 },
898 isSurfaceActive: function isSurfaceActive() {
899 return true;
900 },
901 isSurfaceDisabled: function isSurfaceDisabled() {
902 return true;
903 },
904 isUnbounded: function isUnbounded() {
905 return true;
906 },
907 registerDocumentInteractionHandler: function registerDocumentInteractionHandler() {
908 return undefined;
909 },
910 registerInteractionHandler: function registerInteractionHandler() {
911 return undefined;
912 },
913 registerResizeHandler: function registerResizeHandler() {
914 return undefined;
915 },
916 removeClass: function removeClass() {
917 return undefined;
918 },
919 updateCssVariable: function updateCssVariable() {
920 return undefined;
921 }
922 };
923 },
924 enumerable: true,
925 configurable: true
926 });
927 MDCRippleFoundation.prototype.init = function() {
928 var _this = this;
929 var supportsPressRipple = this.supportsPressRipple_();
930 this.registerRootHandlers_(supportsPressRipple);
931 if (supportsPressRipple) {
932 var _a = MDCRippleFoundation.cssClasses, ROOT_1 = _a.ROOT, UNBOUNDED_1 = _a.UNBOUNDED;
933 requestAnimationFrame(function() {
934 _this.adapter_.addClass(ROOT_1);
935 if (_this.adapter_.isUnbounded()) {
936 _this.adapter_.addClass(UNBOUNDED_1);
937 _this.layoutInternal_();
938 }
939 });
940 }
941 };
942 MDCRippleFoundation.prototype.destroy = function() {
943 var _this = this;
944 if (this.supportsPressRipple_()) {
945 if (this.activationTimer_) {
946 clearTimeout(this.activationTimer_);
947 this.activationTimer_ = 0;
948 this.adapter_.removeClass(MDCRippleFoundation.cssClasses.FG_ACTIVATION);
949 }
950 if (this.fgDeactivationRemovalTimer_) {
951 clearTimeout(this.fgDeactivationRemovalTimer_);
952 this.fgDeactivationRemovalTimer_ = 0;
953 this.adapter_.removeClass(MDCRippleFoundation.cssClasses.FG_DEACTIVATION);
954 }
955 var _a = MDCRippleFoundation.cssClasses, ROOT_2 = _a.ROOT, UNBOUNDED_2 = _a.UNBOUNDED;
956 requestAnimationFrame(function() {
957 _this.adapter_.removeClass(ROOT_2);
958 _this.adapter_.removeClass(UNBOUNDED_2);
959 _this.removeCssVars_();
960 });
961 }
962 this.deregisterRootHandlers_();
963 this.deregisterDeactivationHandlers_();
964 };
965 MDCRippleFoundation.prototype.activate = function(evt) {
966 this.activate_(evt);
967 };
968 MDCRippleFoundation.prototype.deactivate = function() {
969 this.deactivate_();
970 };
971 MDCRippleFoundation.prototype.layout = function() {
972 var _this = this;
973 if (this.layoutFrame_) {
974 cancelAnimationFrame(this.layoutFrame_);
975 }
976 this.layoutFrame_ = requestAnimationFrame(function() {
977 _this.layoutInternal_();
978 _this.layoutFrame_ = 0;
979 });
980 };
981 MDCRippleFoundation.prototype.setUnbounded = function(unbounded) {
982 var UNBOUNDED = MDCRippleFoundation.cssClasses.UNBOUNDED;
983 if (unbounded) {
984 this.adapter_.addClass(UNBOUNDED);
985 } else {
986 this.adapter_.removeClass(UNBOUNDED);
987 }
988 };
989 MDCRippleFoundation.prototype.handleFocus = function() {
990 var _this = this;
991 requestAnimationFrame(function() {
992 return _this.adapter_.addClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);
993 });
994 };
995 MDCRippleFoundation.prototype.handleBlur = function() {
996 var _this = this;
997 requestAnimationFrame(function() {
998 return _this.adapter_.removeClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);
999 });
1000 };
1001 MDCRippleFoundation.prototype.supportsPressRipple_ = function() {
1002 return this.adapter_.browserSupportsCssVars();
1003 };
1004 MDCRippleFoundation.prototype.defaultActivationState_ = function() {
1005 return {
1006 activationEvent: undefined,
1007 hasDeactivationUXRun: false,
1008 isActivated: false,
1009 isProgrammatic: false,
1010 wasActivatedByPointer: false,
1011 wasElementMadeActive: false
1012 };
1013 };
1014 MDCRippleFoundation.prototype.registerRootHandlers_ = function(supportsPressRipple) {
1015 var _this = this;
1016 if (supportsPressRipple) {
1017 ACTIVATION_EVENT_TYPES.forEach(function(evtType) {
1018 _this.adapter_.registerInteractionHandler(evtType, _this.activateHandler_);
1019 });
1020 if (this.adapter_.isUnbounded()) {
1021 this.adapter_.registerResizeHandler(this.resizeHandler_);
1022 }
1023 }
1024 this.adapter_.registerInteractionHandler("focus", this.focusHandler_);
1025 this.adapter_.registerInteractionHandler("blur", this.blurHandler_);
1026 };
1027 MDCRippleFoundation.prototype.registerDeactivationHandlers_ = function(evt) {
1028 var _this = this;
1029 if (evt.type === "keydown") {
1030 this.adapter_.registerInteractionHandler("keyup", this.deactivateHandler_);
1031 } else {
1032 POINTER_DEACTIVATION_EVENT_TYPES.forEach(function(evtType) {
1033 _this.adapter_.registerDocumentInteractionHandler(evtType, _this.deactivateHandler_);
1034 });
1035 }
1036 };
1037 MDCRippleFoundation.prototype.deregisterRootHandlers_ = function() {
1038 var _this = this;
1039 ACTIVATION_EVENT_TYPES.forEach(function(evtType) {
1040 _this.adapter_.deregisterInteractionHandler(evtType, _this.activateHandler_);
1041 });
1042 this.adapter_.deregisterInteractionHandler("focus", this.focusHandler_);
1043 this.adapter_.deregisterInteractionHandler("blur", this.blurHandler_);
1044 if (this.adapter_.isUnbounded()) {
1045 this.adapter_.deregisterResizeHandler(this.resizeHandler_);
1046 }
1047 };
1048 MDCRippleFoundation.prototype.deregisterDeactivationHandlers_ = function() {
1049 var _this = this;
1050 this.adapter_.deregisterInteractionHandler("keyup", this.deactivateHandler_);
1051 POINTER_DEACTIVATION_EVENT_TYPES.forEach(function(evtType) {
1052 _this.adapter_.deregisterDocumentInteractionHandler(evtType, _this.deactivateHandler_);
1053 });
1054 };
1055 MDCRippleFoundation.prototype.removeCssVars_ = function() {
1056 var _this = this;
1057 var rippleStrings = MDCRippleFoundation.strings;
1058 var keys = Object.keys(rippleStrings);
1059 keys.forEach(function(key) {
1060 if (key.indexOf("VAR_") === 0) {
1061 _this.adapter_.updateCssVariable(rippleStrings[key], null);
1062 }
1063 });
1064 };
1065 MDCRippleFoundation.prototype.activate_ = function(evt) {
1066 var _this = this;
1067 if (this.adapter_.isSurfaceDisabled()) {
1068 return;
1069 }
1070 var activationState = this.activationState_;
1071 if (activationState.isActivated) {
1072 return;
1073 }
1074 var previousActivationEvent = this.previousActivationEvent_;
1075 var isSameInteraction = previousActivationEvent && evt !== undefined && previousActivationEvent.type !== evt.type;
1076 if (isSameInteraction) {
1077 return;
1078 }
1079 activationState.isActivated = true;
1080 activationState.isProgrammatic = evt === undefined;
1081 activationState.activationEvent = evt;
1082 activationState.wasActivatedByPointer = activationState.isProgrammatic ? false : evt !== undefined && (evt.type === "mousedown" || evt.type === "touchstart" || evt.type === "pointerdown");
1083 var hasActivatedChild = evt !== undefined && activatedTargets.length > 0 && activatedTargets.some(function(target) {
1084 return _this.adapter_.containsEventTarget(target);
1085 });
1086 if (hasActivatedChild) {
1087 this.resetActivationState_();
1088 return;
1089 }
1090 if (evt !== undefined) {
1091 activatedTargets.push(evt.target);
1092 this.registerDeactivationHandlers_(evt);
1093 }
1094 activationState.wasElementMadeActive = this.checkElementMadeActive_(evt);
1095 if (activationState.wasElementMadeActive) {
1096 this.animateActivation_();
1097 }
1098 requestAnimationFrame(function() {
1099 activatedTargets = [];
1100 if (!activationState.wasElementMadeActive && evt !== undefined && (evt.key === " " || evt.keyCode === 32)) {
1101 activationState.wasElementMadeActive = _this.checkElementMadeActive_(evt);
1102 if (activationState.wasElementMadeActive) {
1103 _this.animateActivation_();
1104 }
1105 }
1106 if (!activationState.wasElementMadeActive) {
1107 _this.activationState_ = _this.defaultActivationState_();
1108 }
1109 });
1110 };
1111 MDCRippleFoundation.prototype.checkElementMadeActive_ = function(evt) {
1112 return evt !== undefined && evt.type === "keydown" ? this.adapter_.isSurfaceActive() : true;
1113 };
1114 MDCRippleFoundation.prototype.animateActivation_ = function() {
1115 var _this = this;
1116 var _a = MDCRippleFoundation.strings, VAR_FG_TRANSLATE_START = _a.VAR_FG_TRANSLATE_START, VAR_FG_TRANSLATE_END = _a.VAR_FG_TRANSLATE_END;
1117 var _b = MDCRippleFoundation.cssClasses, FG_DEACTIVATION = _b.FG_DEACTIVATION, FG_ACTIVATION = _b.FG_ACTIVATION;
1118 var DEACTIVATION_TIMEOUT_MS = MDCRippleFoundation.numbers.DEACTIVATION_TIMEOUT_MS;
1119 this.layoutInternal_();
1120 var translateStart = "";
1121 var translateEnd = "";
1122 if (!this.adapter_.isUnbounded()) {
1123 var _c = this.getFgTranslationCoordinates_(), startPoint = _c.startPoint, endPoint = _c.endPoint;
1124 translateStart = startPoint.x + "px, " + startPoint.y + "px";
1125 translateEnd = endPoint.x + "px, " + endPoint.y + "px";
1126 }
1127 this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_START, translateStart);
1128 this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_END, translateEnd);
1129 clearTimeout(this.activationTimer_);
1130 clearTimeout(this.fgDeactivationRemovalTimer_);
1131 this.rmBoundedActivationClasses_();
1132 this.adapter_.removeClass(FG_DEACTIVATION);
1133 this.adapter_.computeBoundingRect();
1134 this.adapter_.addClass(FG_ACTIVATION);
1135 this.activationTimer_ = setTimeout(function() {
1136 return _this.activationTimerCallback_();
1137 }, DEACTIVATION_TIMEOUT_MS);
1138 };
1139 MDCRippleFoundation.prototype.getFgTranslationCoordinates_ = function() {
1140 var _a = this.activationState_, activationEvent = _a.activationEvent, wasActivatedByPointer = _a.wasActivatedByPointer;
1141 var startPoint;
1142 if (wasActivatedByPointer) {
1143 startPoint = util_1.getNormalizedEventCoords(activationEvent, this.adapter_.getWindowPageOffset(), this.adapter_.computeBoundingRect());
1144 } else {
1145 startPoint = {
1146 x: this.frame_.width / 2,
1147 y: this.frame_.height / 2
1148 };
1149 }
1150 startPoint = {
1151 x: startPoint.x - this.initialSize_ / 2,
1152 y: startPoint.y - this.initialSize_ / 2
1153 };
1154 var endPoint = {
1155 x: this.frame_.width / 2 - this.initialSize_ / 2,
1156 y: this.frame_.height / 2 - this.initialSize_ / 2
1157 };
1158 return {
1159 startPoint: startPoint,
1160 endPoint: endPoint
1161 };
1162 };
1163 MDCRippleFoundation.prototype.runDeactivationUXLogicIfReady_ = function() {
1164 var _this = this;
1165 var FG_DEACTIVATION = MDCRippleFoundation.cssClasses.FG_DEACTIVATION;
1166 var _a = this.activationState_, hasDeactivationUXRun = _a.hasDeactivationUXRun, isActivated = _a.isActivated;
1167 var activationHasEnded = hasDeactivationUXRun || !isActivated;
1168 if (activationHasEnded && this.activationAnimationHasEnded_) {
1169 this.rmBoundedActivationClasses_();
1170 this.adapter_.addClass(FG_DEACTIVATION);
1171 this.fgDeactivationRemovalTimer_ = setTimeout(function() {
1172 _this.adapter_.removeClass(FG_DEACTIVATION);
1173 }, constants_1.numbers.FG_DEACTIVATION_MS);
1174 }
1175 };
1176 MDCRippleFoundation.prototype.rmBoundedActivationClasses_ = function() {
1177 var FG_ACTIVATION = MDCRippleFoundation.cssClasses.FG_ACTIVATION;
1178 this.adapter_.removeClass(FG_ACTIVATION);
1179 this.activationAnimationHasEnded_ = false;
1180 this.adapter_.computeBoundingRect();
1181 };
1182 MDCRippleFoundation.prototype.resetActivationState_ = function() {
1183 var _this = this;
1184 this.previousActivationEvent_ = this.activationState_.activationEvent;
1185 this.activationState_ = this.defaultActivationState_();
1186 setTimeout(function() {
1187 return _this.previousActivationEvent_ = undefined;
1188 }, MDCRippleFoundation.numbers.TAP_DELAY_MS);
1189 };
1190 MDCRippleFoundation.prototype.deactivate_ = function() {
1191 var _this = this;
1192 var activationState = this.activationState_;
1193 if (!activationState.isActivated) {
1194 return;
1195 }
1196 var state = __assign({}, activationState);
1197 if (activationState.isProgrammatic) {
1198 requestAnimationFrame(function() {
1199 return _this.animateDeactivation_(state);
1200 });
1201 this.resetActivationState_();
1202 } else {
1203 this.deregisterDeactivationHandlers_();
1204 requestAnimationFrame(function() {
1205 _this.activationState_.hasDeactivationUXRun = true;
1206 _this.animateDeactivation_(state);
1207 _this.resetActivationState_();
1208 });
1209 }
1210 };
1211 MDCRippleFoundation.prototype.animateDeactivation_ = function(_a) {
1212 var wasActivatedByPointer = _a.wasActivatedByPointer, wasElementMadeActive = _a.wasElementMadeActive;
1213 if (wasActivatedByPointer || wasElementMadeActive) {
1214 this.runDeactivationUXLogicIfReady_();
1215 }
1216 };
1217 MDCRippleFoundation.prototype.layoutInternal_ = function() {
1218 var _this = this;
1219 this.frame_ = this.adapter_.computeBoundingRect();
1220 var maxDim = Math.max(this.frame_.height, this.frame_.width);
1221 var getBoundedRadius = function getBoundedRadius() {
1222 var hypotenuse = Math.sqrt(Math.pow(_this.frame_.width, 2) + Math.pow(_this.frame_.height, 2));
1223 return hypotenuse + MDCRippleFoundation.numbers.PADDING;
1224 };
1225 this.maxRadius_ = this.adapter_.isUnbounded() ? maxDim : getBoundedRadius();
1226 this.initialSize_ = Math.floor(maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE);
1227 this.fgScale_ = "" + this.maxRadius_ / this.initialSize_;
1228 this.updateLayoutCssVars_();
1229 };
1230 MDCRippleFoundation.prototype.updateLayoutCssVars_ = function() {
1231 var _a = MDCRippleFoundation.strings, VAR_FG_SIZE = _a.VAR_FG_SIZE, VAR_LEFT = _a.VAR_LEFT, VAR_TOP = _a.VAR_TOP, VAR_FG_SCALE = _a.VAR_FG_SCALE;
1232 this.adapter_.updateCssVariable(VAR_FG_SIZE, this.initialSize_ + "px");
1233 this.adapter_.updateCssVariable(VAR_FG_SCALE, this.fgScale_);
1234 if (this.adapter_.isUnbounded()) {
1235 this.unboundedCoords_ = {
1236 left: Math.round(this.frame_.width / 2 - this.initialSize_ / 2),
1237 top: Math.round(this.frame_.height / 2 - this.initialSize_ / 2)
1238 };
1239 this.adapter_.updateCssVariable(VAR_LEFT, this.unboundedCoords_.left + "px");
1240 this.adapter_.updateCssVariable(VAR_TOP, this.unboundedCoords_.top + "px");
1241 }
1242 };
1243 return MDCRippleFoundation;
1244 }(foundation_1.MDCFoundation);
1245 exports.MDCRippleFoundation = MDCRippleFoundation;
1246 exports.default = MDCRippleFoundation;
1247 },
1248 5: function(module, exports, __webpack_require__) {
1249 "use strict";
1250 Object.defineProperty(exports, "__esModule", {
1251 value: true
1252 });
1253 exports.cssClasses = {
1254 BG_FOCUSED: "mdc-ripple-upgraded--background-focused",
1255 FG_ACTIVATION: "mdc-ripple-upgraded--foreground-activation",
1256 FG_DEACTIVATION: "mdc-ripple-upgraded--foreground-deactivation",
1257 ROOT: "mdc-ripple-upgraded",
1258 UNBOUNDED: "mdc-ripple-upgraded--unbounded"
1259 };
1260 exports.strings = {
1261 VAR_FG_SCALE: "--mdc-ripple-fg-scale",
1262 VAR_FG_SIZE: "--mdc-ripple-fg-size",
1263 VAR_FG_TRANSLATE_END: "--mdc-ripple-fg-translate-end",
1264 VAR_FG_TRANSLATE_START: "--mdc-ripple-fg-translate-start",
1265 VAR_LEFT: "--mdc-ripple-left",
1266 VAR_TOP: "--mdc-ripple-top"
1267 };
1268 exports.numbers = {
1269 DEACTIVATION_TIMEOUT_MS: 225,
1270 FG_DEACTIVATION_MS: 150,
1271 INITIAL_ORIGIN_SCALE: .6,
1272 PADDING: 10,
1273 TAP_DELAY_MS: 300
1274 };
1275 },
1276 6: function(module, exports, __webpack_require__) {
1277 "use strict";
1278 var __extends = this && this.__extends || function() {
1279 var _extendStatics = function extendStatics(d, b) {
1280 _extendStatics = Object.setPrototypeOf || {
1281 __proto__: []
1282 } instanceof Array && function(d, b) {
1283 d.__proto__ = b;
1284 } || function(d, b) {
1285 for (var p in b) {
1286 if (b.hasOwnProperty(p)) d[p] = b[p];
1287 }
1288 };
1289 return _extendStatics(d, b);
1290 };
1291 return function(d, b) {
1292 _extendStatics(d, b);
1293 function __() {
1294 this.constructor = d;
1295 }
1296 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
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 }
1305 result["default"] = mod;
1306 return result;
1307 };
1308 Object.defineProperty(exports, "__esModule", {
1309 value: true
1310 });
1311 var component_1 = __webpack_require__(1);
1312 var ponyfill_1 = __webpack_require__(2);
1313 var foundation_1 = __webpack_require__(4);
1314 var util = __importStar(__webpack_require__(3));
1315 var MDCRipple = function(_super) {
1316 __extends(MDCRipple, _super);
1317 function MDCRipple() {
1318 var _this = _super !== null && _super.apply(this, arguments) || this;
1319 _this.disabled = false;
1320 return _this;
1321 }
1322 MDCRipple.attachTo = function(root, opts) {
1323 if (opts === void 0) {
1324 opts = {
1325 isUnbounded: undefined
1326 };
1327 }
1328 var ripple = new MDCRipple(root);
1329 if (opts.isUnbounded !== undefined) {
1330 ripple.unbounded = opts.isUnbounded;
1331 }
1332 return ripple;
1333 };
1334 MDCRipple.createAdapter = function(instance) {
1335 return {
1336 addClass: function addClass(className) {
1337 return instance.root_.classList.add(className);
1338 },
1339 browserSupportsCssVars: function browserSupportsCssVars() {
1340 return util.supportsCssVariables(window);
1341 },
1342 computeBoundingRect: function computeBoundingRect() {
1343 return instance.root_.getBoundingClientRect();
1344 },
1345 containsEventTarget: function containsEventTarget(target) {
1346 return instance.root_.contains(target);
1347 },
1348 deregisterDocumentInteractionHandler: function deregisterDocumentInteractionHandler(evtType, handler) {
1349 return document.documentElement.removeEventListener(evtType, handler, util.applyPassive());
1350 },
1351 deregisterInteractionHandler: function deregisterInteractionHandler(evtType, handler) {
1352 return instance.root_.removeEventListener(evtType, handler, util.applyPassive());
1353 },
1354 deregisterResizeHandler: function deregisterResizeHandler(handler) {
1355 return window.removeEventListener("resize", handler);
1356 },
1357 getWindowPageOffset: function getWindowPageOffset() {
1358 return {
1359 x: window.pageXOffset,
1360 y: window.pageYOffset
1361 };
1362 },
1363 isSurfaceActive: function isSurfaceActive() {
1364 return ponyfill_1.matches(instance.root_, ":active");
1365 },
1366 isSurfaceDisabled: function isSurfaceDisabled() {
1367 return Boolean(instance.disabled);
1368 },
1369 isUnbounded: function isUnbounded() {
1370 return Boolean(instance.unbounded);
1371 },
1372 registerDocumentInteractionHandler: function registerDocumentInteractionHandler(evtType, handler) {
1373 return document.documentElement.addEventListener(evtType, handler, util.applyPassive());
1374 },
1375 registerInteractionHandler: function registerInteractionHandler(evtType, handler) {
1376 return instance.root_.addEventListener(evtType, handler, util.applyPassive());
1377 },
1378 registerResizeHandler: function registerResizeHandler(handler) {
1379 return window.addEventListener("resize", handler);
1380 },
1381 removeClass: function removeClass(className) {
1382 return instance.root_.classList.remove(className);
1383 },
1384 updateCssVariable: function updateCssVariable(varName, value) {
1385 return instance.root_.style.setProperty(varName, value);
1386 }
1387 };
1388 };
1389 Object.defineProperty(MDCRipple.prototype, "unbounded", {
1390 get: function get() {
1391 return Boolean(this.unbounded_);
1392 },
1393 set: function set(unbounded) {
1394 this.unbounded_ = Boolean(unbounded);
1395 this.setUnbounded_();
1396 },
1397 enumerable: true,
1398 configurable: true
1399 });
1400 MDCRipple.prototype.activate = function() {
1401 this.foundation_.activate();
1402 };
1403 MDCRipple.prototype.deactivate = function() {
1404 this.foundation_.deactivate();
1405 };
1406 MDCRipple.prototype.layout = function() {
1407 this.foundation_.layout();
1408 };
1409 MDCRipple.prototype.getDefaultFoundation = function() {
1410 return new foundation_1.MDCRippleFoundation(MDCRipple.createAdapter(this));
1411 };
1412 MDCRipple.prototype.initialSyncWithDOM = function() {
1413 var root = this.root_;
1414 this.unbounded = "mdcRippleIsUnbounded" in root.dataset;
1415 };
1416 MDCRipple.prototype.setUnbounded_ = function() {
1417 this.foundation_.setUnbounded(Boolean(this.unbounded_));
1418 };
1419 return MDCRipple;
1420 }(component_1.MDCComponent);
1421 exports.MDCRipple = MDCRipple;
1422 }
1423 });
1424});
1425//# sourceMappingURL=mdc.toolbar.js.map
\No newline at end of file