Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/mdl-ext/src/demo/etc/buildpages.js b/node_modules/mdl-ext/src/demo/etc/buildpages.js
new file mode 100644
index 0000000..4671609
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/etc/buildpages.js
@@ -0,0 +1,15 @@
+'use strict';
+
+// TODO: Automate this. Use Gulp
+const posthtml = require('posthtml');
+const html = require('fs').readFileSync('partials/lightbox.html').toString();
+
+posthtml()
+ .use(require('posthtml-include')({ encoding: 'utf-8', root: 'partials/' }))
+ .process(html /*, options */)
+ .then(function(result) {
+ console.log(result.html);
+ })
+ .catch(function(error) {
+ console.error(error);
+ });
diff --git a/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.html b/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.html
new file mode 100644
index 0000000..cd4d22f
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>A basic MDL component</title>
+ <link rel="stylesheet" href="../node_modules/material-design-lite/material.css" />
+</head>
+<body>
+ <div id="mount">
+ <div class="mdl-basic mdl-js-basic mdl-js-ripple-effect">
+ <p>My basic MDL component</p>
+ </div>
+ </div>
+ <script type="text/javascript" src="../node_modules/material-design-lite/material.js" charset="utf-8"></script>
+ <script type="text/javascript" src="./mdl-basic-component.js" charset="utf-8"></script>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.js b/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.js
new file mode 100644
index 0000000..05db9c1
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.js
@@ -0,0 +1,79 @@
+(function() {
+ 'use strict';
+
+ /**
+ * https://github.com/google/material-design-lite/issues/4205
+ * @constructor
+ * @param {Element} element The element that will be upgraded.
+ */
+ const MaterialBasic = function MaterialBasic(element) {
+ // Stores the element.
+ this.element_ = element;
+
+ console.log('***** ctor', this.element_.classList, 'data-upgraded', this.element_.getAttribute('data-upgraded'));
+
+ // Initialize instance.
+ this.init();
+ };
+ window['MaterialBasic'] = MaterialBasic;
+
+ /**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string}
+ * @private
+ */
+ MaterialBasic.prototype.Constant_ = {
+ RIPPLE_COMPONENT: 'MaterialRipple'
+ };
+
+ /**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+ MaterialBasic.prototype.CssClasses_ = {
+ IS_UPGRADED: 'is-upgraded',
+ JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
+ };
+
+ /**
+ * Initialize component
+ */
+ MaterialBasic.prototype.init = function() {
+ console.log('***** init', this.element_.classList, 'data-upgraded', this.element_.getAttribute('data-upgraded'));
+
+ if (this.element_) {
+ if (this.element_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
+ this.element_.classList.add(this.CssClasses_.JS_RIPPLE_EFFECT_IGNORE_EVENTS);
+ }
+
+ // Do the init required for this component to work
+
+ // Set upgraded flag
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+ }
+ };
+
+ /**
+ * Downgrade component
+ * E.g remove listeners and clean up resources
+ */
+ MaterialBasic.prototype.mdlDowngrade_ = function() {
+ 'use strict';
+ };
+
+ // The component registers itself. It can assume componentHandler is available
+ // in the global scope.
+ /* eslint no-undef: 0 */
+ /* jshint undef:false */
+ componentHandler.register({
+ constructor: MaterialBasic,
+ classAsString: 'MaterialBasic',
+ cssClass: 'mdl-js-basic'
+ });
+})();
diff --git a/node_modules/mdl-ext/src/demo/etc/mdl-iframe-loader.js b/node_modules/mdl-ext/src/demo/etc/mdl-iframe-loader.js
new file mode 100644
index 0000000..abade92
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/etc/mdl-iframe-loader.js
@@ -0,0 +1,100 @@
+'use strict';
+
+/**
+ * Inject required CSS and JS into html fragment loaded into an <iframe>
+ * @type {{}}
+ */
+var mdlIframeLoader = {};
+(function(self) {
+
+ // The CSS and JS needed to run MDL snippets in an <iframe>
+
+ // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
+ try {
+ new window.CustomEvent('test');
+ } catch(e) {
+ var CustomEvent = function(event, params) {
+ var evt;
+ params = params || {
+ bubbles: false,
+ cancelable: false,
+ detail: undefined
+ };
+
+ evt = document.createEvent('CustomEvent');
+ evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+ return evt;
+ };
+
+ CustomEvent.prototype = window.Event.prototype;
+ window.CustomEvent = CustomEvent; // expose definition to window
+ }
+
+ var docs = [
+ { 'type': 'css', 'id': 'font-roboto-css', 'src': 'https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' },
+ { 'type': 'css', 'id': 'material-icon-css', 'src': 'https://fonts.googleapis.com/icon?family=Material+Icons' },
+ { 'type': 'css', 'id': 'dialog-polyfill-css', 'src': 'demo/styles/dialog-polyfill.css' },
+ { 'type': 'css', 'id': 'material-css', 'src': 'https://code.getmdl.io/1.1.3/material.grey-orange.min.css' },
+ { 'type': 'css', 'id': 'mdlext-css', 'src': 'lib/mdl-ext-eqjs.css' },
+ { 'type': 'css', 'id': 'demo-css', 'src': 'demo/styles/demo.css' },
+ { 'type': 'js', 'id': 'dialog-polyfill-js', 'src': 'demo/scripts/dialog-polyfill.js' },
+ { 'type': 'js', 'id': 'material-js', 'src': 'https://code.getmdl.io/1.1.3/material.min.js' },
+ { 'type': 'js', 'id': 'eq-js', 'src': 'demo/scripts/eq.min.js' },
+ { 'type': 'js', 'id': 'mdlext-js', 'src': 'lib/index.js' }
+ ];
+
+ var joinOrigin = function(origin, src) {
+ return src.startsWith('http') ? src : origin.concat(src);
+ };
+
+ var loadResources = function( origin, loadCompleted ) {
+ var expectToLoad = docs.length;
+ var filesLoaded = 0;
+
+ for (var i = 0; i < docs.length; i++) {
+ if (document.getElementById(docs[i].id) === null) {
+ var el;
+ var src = joinOrigin(origin, docs[i].src);
+
+ if (docs[i].type === 'css') {
+ el = document.createElement('link');
+ el.href = src;
+ el.rel = 'stylesheet';
+ el.type = 'text/css';
+ }
+ else {
+ el = document.createElement('script');
+ el.src = src;
+ el.type = 'text/javascript';
+ el.async = false;
+ el.charset = 'utf-8';
+ }
+ el.id = docs[i].id;
+ el.onload = function () {
+ filesLoaded++;
+ if(filesLoaded >= expectToLoad) {
+ loadCompleted();
+ }
+ };
+ document.head.appendChild(el);
+ }
+ else {
+ expectToLoad--;
+ }
+ }
+ };
+
+ /**
+ * Inject required CSS and JS into html fragment loaded into an <iframe>
+ * @param origin path relative to root of this project, e.g. "../../../
+ */
+ self.load = function( origin ) {
+ loadResources( origin, function () {
+ if(window.componentHandler) {
+ window.componentHandler.upgradeDom();
+ }
+ });
+ };
+
+ return self;
+})(mdlIframeLoader);