auto-converted by polymer-modulizer

Author: Elliott Marquez

.travis.yml

@@ -2,31 +2,20 @@ language: node_js
 sudo: 'false'
 before_script:
   - npm install -g polymer-cli
-  - polymer install --variants
   - git checkout package-lock.json
-  - >-
-    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)
 env:
   global:
-    - secure: >-
-        PlKMLY9ofkSDxO7t1V0MUTiUiyyhrI6AOWVneAxpGrvyU1WDd9nCbh+e8wRvLw+4BHYNlrLUTemrnbquh7cyOV2a5ZKSAmXqkaA/4ISWIy+XD2AgLpoDl9ptl+VOSmxND4aTD5ErnueXLUMUI96v50Kj4jDYuTZsy/2q38861tk=
-    - secure: >-
-        aV25bA3RceITQ0MOQAh20XDibw067hY5N9BmIHiNi0WN6pEmxicr0535EVZyFHmhvJL2VMCPcVr+YNaRAySCeXTDQ6Mn7uMQ7KfllIoqPEdLjlF3mTW+fhz8pOgrwUDza6FS2tVS7jXscE8CTKfU6rjOxIEnUNBn33UdMyXWotk=
+    - secure: PlKMLY9ofkSDxO7t1V0MUTiUiyyhrI6AOWVneAxpGrvyU1WDd9nCbh+e8wRvLw+4BHYNlrLUTemrnbquh7cyOV2a5ZKSAmXqkaA/4ISWIy+XD2AgLpoDl9ptl+VOSmxND4aTD5ErnueXLUMUI96v50Kj4jDYuTZsy/2q38861tk=
+    - secure: aV25bA3RceITQ0MOQAh20XDibw067hY5N9BmIHiNi0WN6pEmxicr0535EVZyFHmhvJL2VMCPcVr+YNaRAySCeXTDQ6Mn7uMQ7KfllIoqPEdLjlF3mTW+fhz8pOgrwUDza6FS2tVS7jXscE8CTKfU6rjOxIEnUNBn33UdMyXWotk=
 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
+

all-imports.d.ts

@@ -8,5 +8,5 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
-<link rel="import" href="paper-input.html">
-<link rel="import" href="paper-textarea.html">
+<script type="module" src="./paper-input.js"></script>
+<script type="module" src="./paper-textarea.js"></script>

all-imports.html

@@ -16,22 +16,33 @@
 
   <title>paper-input demo</title>
 
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-
-  <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-icon/iron-icon.html">
-  <link rel="import" href="../../iron-icons/iron-icons.html">
-  <link rel="import" href="../../iron-input/iron-input.html">
-  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
-  <link rel="import" href="../../paper-styles/color.html">
-  <link rel="import" href="../paper-input-container.html">
-  <link rel="import" href="../paper-input-error.html">
-  <link rel="import" href="../paper-input.html">
-  <link rel="import" href="../paper-textarea.html">
-  <link rel="import" href="ssn-input.html">
-
-  <custom-style>
+  <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.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-icon/iron-icon.js"></script>
+  <script type="module" src="../../iron-icons/iron-icons.js"></script>
+  <script type="module" src="../../iron-input/iron-input.js"></script>
+  <script type="module" src="../../paper-icon-button/paper-icon-button.js"></script>
+  <script type="module" src="../../paper-styles/color.js"></script>
+  <script type="module" src="../paper-input-container.js"></script>
+  <script type="module" src="../paper-input-error.js"></script>
+  <script type="module" src="../paper-input.js"></script>
+  <script type="module" src="../paper-textarea.js"></script>
+  <script type="module" src="./ssn-input.js"></script>
+
+  <!-- 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">
       paper-input {
         display: block;
@@ -69,47 +80,53 @@
         display: inline-block;
       }
     </style>
-  </custom-style>
+  </custom-style>`;
+
+document.body.appendChild($_documentContainer.content);
+</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>Inputs can have different types, and be disabled</h3>
     <demo-snippet>
       <template>
         <paper-input label="text input"></paper-input>
         <paper-input label="text input" value="pre-filled"></paper-input>
         <paper-textarea label="autoresizing textarea input"></paper-textarea>
         <paper-input label="password input" type="password"></paper-input>
-        <paper-input label="disabled input" disabled value="batman"></paper-input>
+        <paper-input label="disabled input" disabled="" value="batman"></paper-input>
       </template>
     </demo-snippet>
 
     <h3>Inputs can have character counters</h3>
     <demo-snippet>
       <template>
-        <paper-input label="simple character counter" char-counter></paper-input>
-        <paper-input label="input with at most 10 characters" char-counter maxlength="10"></paper-input>
+        <paper-input label="simple character counter" char-counter=""></paper-input>
+        <paper-input label="input with at most 10 characters" char-counter="" maxlength="10"></paper-input>
       </template>
     </demo-snippet>
 
     <h3>The label can have different floating states</h3>
     <demo-snippet>
       <template>
         <paper-input label="this label floats after typing"></paper-input>
-        <paper-input label="this label is always floating" always-float-label></paper-input>
-        <paper-input label="this label never floats" no-label-float></paper-input>
-        <paper-input label="this label is always floating" always-float-label placeholder="placeholder text"></paper-input>
+        <paper-input label="this label is always floating" always-float-label=""></paper-input>
+        <paper-input label="this label never floats" no-label-float=""></paper-input>
+        <paper-input label="this label is always floating" always-float-label="" placeholder="placeholder text"></paper-input>
       </template>
     </demo-snippet>
 
     <h3>Inputs can validate automatically or on demand, and can have custom error messages</h3>
     <demo-snippet>
       <template>
-        <paper-input label="this input requires some text" required auto-validate error-message="needs some text!"></paper-input>
-        <paper-input label="this input requires letters only" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
-        <paper-input label="this input requires letters only" auto-validate pattern="[a-zA-Z]*" error-message="letters only!" value="pre-filled 123"></paper-input>
-        <paper-input label="this input will only let you type letters" auto-validate allowed-pattern="[a-zA-Z]"></paper-input>
-        <paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
+        <paper-input label="this input requires some text" required="" auto-validate="" error-message="needs some text!"></paper-input>
+        <paper-input label="this input requires letters only" auto-validate="" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
+        <paper-input label="this input requires letters only" auto-validate="" pattern="[a-zA-Z]*" error-message="letters only!" value="pre-filled 123"></paper-input>
+        <paper-input label="this input will only let you type letters" auto-validate="" allowed-pattern="[a-zA-Z]"></paper-input>
+        <paper-input id="inputForValidation" required="" label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
 
         <button onclick="validate()">Validate!</button>
       </template>
@@ -119,14 +136,13 @@ <h3>Inputs can have prefixes and suffixes</h3>
     <demo-snippet class="horizontal">
       <template>
         <paper-input label="total" type="number">
-          <div slot="prefix">$</div>
+          <div slot="prefix">\$</div>
         </paper-input>
 
         <paper-input label="username" id="inputWithButton">
           <iron-icon icon="mail" slot="prefix"></iron-icon>
           <div slot="suffix">@email.com</div>
-          <paper-icon-button slot="suffix" onclick="clearInput()"
-              icon="clear" alt="clear" title="clear">
+          <paper-icon-button slot="suffix" onclick="clearInput()" icon="clear" alt="clear" title="clear">
           </paper-icon-button>
         </paper-input>
       </template>
@@ -135,7 +151,7 @@ <h3>Inputs can have prefixes and suffixes</h3>
     <h3>Inputs can have custom logic</h3>
     <demo-snippet>
       <template>
-        <paper-input-container always-float-label auto-validate attr-for-value="value">
+        <paper-input-container always-float-label="" auto-validate="" attr-for-value="value">
           <label slot="label">Social Security Number</label>
           <ssn-input class="paper-input-input" slot="input"></ssn-input>
           <paper-input-error slot="add-on">SSN invalid!</paper-input-error>
@@ -214,24 +230,38 @@ <h3>Inputs can be completely restyled</h3>
           </style>
         </custom-style>
         <div class="custom-parent">
-          <paper-input class="custom" label="Name" value="Batman" always-float-label>
+          <paper-input class="custom" label="Name" value="Batman" always-float-label="">
           </paper-input>
-          <paper-input class="custom" label="Address (letters only, will autovalidate)"
-              always-float-label auto-validate pattern="[a-zA-Z]*">
+          <paper-input class="custom" label="Address (letters only, will autovalidate)" always-float-label="" auto-validate="" pattern="[a-zA-Z]*">
           </paper-input>
         </div>
       </template>
     </demo-snippet>
-  </div>
+  </div>`;
+
+document.body.appendChild($_documentContainer.content);
+</script>
 
-  <script>
-    function validate() {
-      document.getElementById('inputForValidation').validate();
-    }
+  <script type="module">
+import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
+import '@polymer/iron-demo-helpers/demo-snippet.js';
+import '@polymer/iron-icon/iron-icon.js';
+import '@polymer/iron-icons/iron-icons.js';
+import '@polymer/iron-input/iron-input.js';
+import '@polymer/paper-icon-button/paper-icon-button.js';
+import '@polymer/paper-styles/color.js';
+import '../paper-input-container.js';
+import '../paper-input-error.js';
+import '../paper-input.js';
+import '../paper-textarea.js';
+import './ssn-input.js';
+function validate() {
+  document.getElementById('inputForValidation').validate();
+}
 
-    function clearInput() {
-      document.getElementById('inputWithButton').value = '';
-    }
-  </script>
+function clearInput() {
+  document.getElementById('inputWithButton').value = '';
+}
+</script>
 </body>
 </html>