Polymer 1.x/2.x hybrid element support

HISTORY.md

@@ -1,3 +1,7 @@
+v4.1.0
+==================
+* Polymer 1.x/2.x hybrid element support
+
 v4.0.18
 ==================
 * fix demo

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "px-dropdown",
-  "version": "4.0.18",
+  "version": "4.1.0",
   "main": [
     "px-dropdown.html"
   ],
@@ -43,7 +43,8 @@
     "px-colors-design": "^1.0.0",
     "px-box-sizing-design": "^1.0.0",
     "px-helpers-design": "^1.0.0",
-    "web-component-tester": "^6.0.0"
+    "web-component-tester": "^6.0.0",
+    "px-demo": "^3.0.0"
   },
   "resolutions": {
     "webcomponentsjs": "^1.0.0"

demo/px-dropdown-demo.html

@@ -28,16 +28,16 @@
     <!-- Interactive -->
     <px-demo-interactive>
       <!-- Configs -->
-      <px-demo-configs configs="[[configs]]" props="{{props}}" chosen-config="{{chosenConfig}}"></px-demo-configs>
+      <px-demo-configs slot="px-demo-configs" configs="[[configs]]" props="{{props}}" chosen-config="{{chosenConfig}}"></px-demo-configs>
 
       <!-- Props -->
-      <px-demo-props props="{{props}}" config="[[chosenConfig]]"></px-demo-props>
+      <px-demo-props slot="px-demo-props" props="{{props}}" config="[[chosenConfig]]"></px-demo-props>
 
       <!-- Code Editor -->
-      <px-demo-code-editor props="{{props}}"></px-demo-code-editor>
+      <px-demo-code-editor slot="px-demo-code-editor" props="{{props}}"></px-demo-code-editor>
 
       <!-- Component ---------------------------------------------------------->
-      <px-demo-component style="width:250px;">
+      <px-demo-component slot="px-demo-component" style="width:250px;">
         <px-dropdown
           items="{{props.items.value}}"
           display-value="{{props.displayValue.value}}"
@@ -55,6 +55,7 @@
       <!-- END Component ------------------------------------------------------>
 
       <px-demo-component-snippet
+        slot="px-demo-component-snippet"
         element-properties="{{props}}"
         element-name="px-dropdown">
       </px-demo-component-snippet>

gulpfile.js

@@ -11,6 +11,7 @@ const gulpif = require('gulp-if');
 const combiner = require('stream-combiner2');
 const bump = require('gulp-bump');
 const argv = require('yargs').argv;
+const exec = require('child_process').exec;
 
 const sassOptions = {
   importer: importOnce,
@@ -44,13 +45,8 @@ function buildCSS(){
 }
 
 gulp.task('sass', function() {
-  return gulp.src(['./sass/*.scss', '!./sass/*sketch.scss', '!./sass/*-demo.scss'])
+  return gulp.src(['./sass/*.scss'])
     .pipe(buildCSS())
-    .pipe(gulpif(/.*predix/,
-      $.rename(function(path){
-        path.basename = new RegExp('.+?(?=\-predix)').exec(path.basename)[0];
-      })
-    ))
     .pipe(stylemod({
       moduleId: function(file) {
         return path.basename(file.path, path.extname(file.path)) + '-styles';
@@ -60,16 +56,17 @@ gulp.task('sass', function() {
     .pipe(browserSync.stream({match: 'css/*.html'}));
 });
 
-gulp.task('demosass', function() {
-  return gulp.src(['./sass/*-demo.scss'])
-    .pipe(buildCSS())
-    .pipe(gulp.dest('css'))
-    .pipe(browserSync.stream({match: '**/*.css'}));
+gulp.task('generate-api', function (cb) {
+  exec(`node_modules/.bin/polymer analyze ${pkg.name}.html > ${pkg.name}-api.json`, function (err, stdout, stderr) {
+    console.log(stdout);
+    console.log(stderr);
+    cb(err);
+  });
 });
 
+
 gulp.task('watch', function() {
-  gulp.watch(['!sass/*-demo.scss', 'sass/*.scss'], ['sass']);
-  gulp.watch('sass/*-demo.scss', ['demosass']);
+  gulp.watch(['sass/*.scss'], ['sass']);
 });
 
 gulp.task('serve', function() {
@@ -82,9 +79,8 @@ gulp.task('serve', function() {
     server: ['./', 'bower_components'],
   });
 
-  gulp.watch(['css/*-styles.html', 'css/*-demo.css', '*.html', '*.js']).on('change', browserSync.reload);
-  gulp.watch(['sass/*.scss', '!sass/*-demo.scss'], ['sass']);
-  gulp.watch('sass/*-demo.scss', ['demosass']);
+  gulp.watch(['css/*-styles.html', '*.html', '*.js', 'demo/*.html']).on('change', browserSync.reload);
+  gulp.watch(['sass/*.scss'], ['sass']);
 
 });
 
@@ -107,5 +103,5 @@ gulp.task('bump:major', function(){
 });
 
 gulp.task('default', function(callback) {
-  gulpSequence('clean', 'sass', 'demosass')(callback);
+  gulpSequence('clean', 'sass', 'generate-api')(callback);
 });

index.html

@@ -30,7 +30,7 @@
       if (!webComponentsSupported) {
         var script = document.createElement('script');
         script.async = true;
-        script.src = '../webcomponentsjs/webcomponents-lite.min.js';
+        script.src = '../webcomponentsjs/webcomponents-lite.js';
         script.onload = onload;
         document.head.appendChild(script);
       } else {
@@ -48,7 +48,9 @@
       Load theme files, apply default theme.
     -->
     <link rel="import" href="../px-theme/px-theme-styles.html">
-    <style include="px-theme-styles" is="custom-style"></style>
+    <custom-style>
+      <style include="px-theme-styles" is="custom-style"></style>
+    </custom-style>
 
     <!--
       Load dark theme files for later use. Stamp dynamic theme switcher, which

package.json

@@ -2,7 +2,7 @@
     "name": "px-dropdown",
     "author": "General Electric",
     "description": "A Predix UI Dropdown component",
-    "version": "4.0.18",
+    "version": "4.1.0",
     "extName": null,
     "repository": {
         "type": "git",
@@ -25,6 +25,7 @@
         "gulp-sequence": "^0.4.5",
         "gulp-style-modules": "^0.1.0",
         "node-sass-import-once": "^1.2.0",
+        "polymer-cli": "^1.5.7",
         "stream-combiner2": "^1.1.1",
         "yargs": "^6.0.0"
     }