polymer dialog not working

Question

My problem is same as an already question as Polymer paper-dialog.open() is not defined

My imports include

 <link rel="import" src="../bower_components/paper-date-picker/paper-date-picker.html">
 <link rel="import" src="../bower_components/paper-styles/demo-pages.html">
 <link rel="import" src="../bower_components/paper-dialog/paper-dialog.html">
 <link rel="import" src="../bower_components/paper-date-picker/paper-date-picker-dialog-style.html">
 <link rel="import" href="../bower_components/paper-button/paper-button.html">

Dialog HTML Section

 <paper-button class="btn" on-tap="showDialog" raised>Change Date</paper-button>
  <paper-dialog id="dialog1" class="paper-date-picker-dialog"  modal on-iron-overlay-closed="dismissDialog">
    <paper-date-picker id="picker1" date="[[appuser.date]]"></paper-date-picker>
      <div class="buttons">
        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button dialog-confirm>OK</paper-button>
      </div>
   </paper-dialog>

Code

Polymer({
    is: "cp-login",
    properties: {
        appuser: {
            type: Object,
            value: {}
        }
    },
    saveAPPUSER: function() {
        if (!this.$.formappuser.validate()) return;
        this.$.submitAPPUSER.url = "http://localhost:3000/app/appuser";
        this.$.submitAPPUSER.body = this.appuser;
        this.$.submitAPPUSER.generateRequest();
    },
    submitAPPUSERSuccess: function(data) {
        console.log(data)
    },
    submitAPPUSERError: function(err) {
        console.log(err)
    },
    showDialog : function(){
         this.$.dialog1.open();
    },
    ready : function(){
      this.appuser.date = new Date(2017, 3, 13);
      this.showDialog();
    }
})

For me here none of the functionality toggles, open either works via code or directly in html as dialog1.open().

Any idea what I'm doing wrong ?