auto-converted by polymer-modulizer

PolymerElements · Jun 23, 2018 · 9ee4851 · 9ee4851
1 parent b8cb7ae
commit 9ee4851
Show file tree

Hide file tree

Showing 11 changed files with 838 additions and 1,007 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,31 +1,19 @@
 language: node_js
 sudo: 'false'
-before_script:
-  - npm install -g polymer-cli
-  - polymer install --variants
-  - >-
-    npm run update-types && git diff --exit-code || (echo -e
-    '\n\033[31mERROR:\033[0m Typings are stale. Please run "npm run
-    update-types".' && false)
-  - >-
-    npm run format && git diff --exit-code || (echo -e '\n\033[31mERROR:\033[0m
-    Project is not formatted. Please run "npm run format".' && false)
+before_script: npm install -g polymer-cli
 env:
   global:
-    - secure: >-
-        bS/K6VaNmFe29US/L/DyVggFf0oJF71OvhdMCYwhm9aaxatKwKpXJjBYjyuiDASxf9fLlyVWh/5wkIKXw3uMCs4AESf2iqPvFl8f9CdhvE6mj8xjQ8KjrF6rsm7vbJdAgKzw3mg7M8s5VS+3acC7hospm/n0LX5z2wUyvWy0EWo=
-    - secure: >-
-        SesBHWzkY+KIPS4cg75+1tG4RdP+2y1ihOj1ib1YmjhVXJ+tiCc9B5GBxR/ARfYOePyhamJ2qT29qG47lr/ACagv33CHK5cRl7YZTLT9euYBYCzMSZxDRgXr1jfbKkbVCBKBC2S6it/1Y3QhA/QPiLIt0w/Wk8d/6s4mydvyh7U=
+    - secure: bS/K6VaNmFe29US/L/DyVggFf0oJF71OvhdMCYwhm9aaxatKwKpXJjBYjyuiDASxf9fLlyVWh/5wkIKXw3uMCs4AESf2iqPvFl8f9CdhvE6mj8xjQ8KjrF6rsm7vbJdAgKzw3mg7M8s5VS+3acC7hospm/n0LX5z2wUyvWy0EWo=
+    - secure: SesBHWzkY+KIPS4cg75+1tG4RdP+2y1ihOj1ib1YmjhVXJ+tiCc9B5GBxR/ARfYOePyhamJ2qT29qG47lr/ACagv33CHK5cRl7YZTLT9euYBYCzMSZxDRgXr1jfbKkbVCBKBC2S6it/1Y3QhA/QPiLIt0w/Wk8d/6s4mydvyh7U=
 node_js: '9'
 addons:
   firefox: latest
   chrome: stable
 script:
-  - xvfb-run polymer test
-  - >-
-    if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default';
-    fi
+  - xvfb-run polymer test --module-resolution=node --npm
+  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test --module-resolution=node --npm -s ''default''; fi'
 dist: trusty
 cache:
   directories:
     - node_modules
+
diff --git a/bower.json b/bower.json
diff --git a/demo/index.html b/demo/index.html
@@ -17,14 +17,25 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
 
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
 
-    <link rel="import" href="../../polymer/polymer.html">
-    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
-    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
-    <link rel="import" href="../iron-image.html">
+    <script type="module" src="../../polymer/polymer-legacy.js"></script>
+    <script type="module" src="../../iron-demo-helpers/demo-pages-shared-styles.js"></script>
+    <script type="module" src="../../iron-demo-helpers/demo-snippet.js"></script>
+    <script type="module" src="../iron-image.js"></script>
 
-    <custom-style>
+    <!-- FIXME(polymer-modulizer):
+        These imperative modules that innerHTML your HTML are
+        a hacky way to be sure that any mixins in included style
+        modules are ready before any elements that reference them are
+        instantiated, otherwise the CSS @apply mixin polyfill won't be
+        able to expand the underlying CSS custom properties.
+        See: https://github.com/Polymer/polymer-modulizer/issues/154
+        -->
+    <script type="module">
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<custom-style>
       <style is="custom-style" include="demo-pages-shared-styles">
         .example {
           margin: 4px;
@@ -35,18 +46,28 @@
           white-space: nowrap;
         }
       </style>
-    </custom-style>
+    </custom-style>`;
+
+document.body.appendChild($_documentContainer.content);
+</script>
 
-    <script>
-      function load(id) {
-        document.getElementById(id).src = './polymer.svg?' + Math.random();
-      }
-    </script>
+    <script type="module">
+import '@polymer/polymer/polymer-legacy.js';
+import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
+import '@polymer/iron-demo-helpers/demo-snippet.js';
+import '../iron-image.js';
+function load(id) {
+  document.getElementById(id).src = './polymer.svg?' + Math.random();
+}
+</script>
 
   </head>
   <body unresolved>
 
-    <div class="vertical-section-container centered">
+    <script type="module">
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<div class="vertical-section-container centered">
 
       <h3>A plain <code>iron-image</code>.</h3>
       <demo-snippet class="centered-demo">
@@ -72,7 +93,7 @@ <h3>
           <custom-style>
 
           <iron-image sizing="cover" id="example-sizing-cover" alt="The Polymer logo." src="./polymer.svg"></iron-image>
-        </template>
+        </custom-style></custom-style></template>
       </demo-snippet>
 
       <h3>
@@ -219,7 +240,7 @@ <h3>
               Load image
             </button>
             <br>
-            <iron-image preload id="example-preload-1" alt="The Polymer logo." class="sized" sizing="contain"></iron-image>
+            <iron-image preload="" id="example-preload-1" alt="The Polymer logo." class="sized" sizing="contain"></iron-image>
             <br>
             Without the <code>fade</code> attribute, the placeholder element is
             hidden with no transition when the image loads.
@@ -229,7 +250,7 @@ <h3>
               Load image
             </button>
             <br>
-            <iron-image preload fade id="example-preload-2" alt="The Polymer logo." class="sized" sizing="contain"></iron-image>
+            <iron-image preload="" fade="" id="example-preload-2" alt="The Polymer logo." class="sized" sizing="contain"></iron-image>
             <br>
             With the <code>fade</code> attribute, the placeholder element is
             fades away when the image loads.
@@ -258,7 +279,7 @@ <h3>
               Load image
             </button>
             <br>
-            <iron-image preload placeholder="./loading.png" id="example-preload-image-1" alt="The Polymer logo." class="sized" sizing="contain"></iron-image>
+            <iron-image preload="" placeholder="./loading.png" id="example-preload-image-1" alt="The Polymer logo." class="sized" sizing="contain"></iron-image>
             <br>
             (without <code>fade</code> attribute)
           </div>
@@ -267,14 +288,17 @@ <h3>
               Load image
             </button>
             <br>
-            <iron-image preload placeholder="./loading.png" fade id="example-preload-image-2" alt="The Polymer logo." class="sized" sizing="contain"></iron-image>
+            <iron-image preload="" placeholder="./loading.png" fade="" id="example-preload-image-2" alt="The Polymer logo." class="sized" sizing="contain"></iron-image>
             <br>
             (with <code>fade</code> attribute)
           </div>
         </template>
       </demo-snippet>
 
-    </div>
+    </div>`;
+
+document.body.appendChild($_documentContainer.content);
+</script>
 
   </body>
 </html>
diff --git a/index.html b/index.html
@@ -12,8 +12,8 @@
 <head>
 
   <title>iron-image</title>
-  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../iron-component-page/iron-component-page.html">
+  <script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+  <script type="module" src="../iron-component-page/iron-component-page.js"></script>
 
 </head>
 <body>

diff --git a/iron-image.d.ts b/iron-image.d.ts