Nuxeo-preview-button not working in a Standalone Polymer Application

Use case : Building a list of documents from a folder with the preview option on the documents. 

I added the Nuxeo-preview-button on the nuxeo-data-table.

For an office file, clicking on the preview button downloads the file instead of pop up a preview. with the following warning in the WebBrowser (chrome) console "Resource interpreted as Document but transferred with MIME type application/vnd.openxmlformats-officedocument.wordprocessingml.document: "http://localhost:8080/nuxeo/nxfile/default/b8530104-789b-43b2-b147-5ad2cc847229/file:content/rfx_template_2.docx?changeToken=1-0"."

For a PDF File, clicking on the preview is clipped within the nuxeo-data-table.

Information:

To build this I followed this tutorial https://doc.nuxeo.com/nxdoc/nuxeo-elements-tutorial/

See attached the screenshots for this 2 cases.

See below the Code:

<!-- my-doc-reader.html -->

<link rel="import" href="../bower_components/nuxeo-elements/nuxeo-connection.html">
<link rel="import" href="../bower_components/nuxeo-elements/nuxeo-document.html">
<link rel="import" href="../bower_components/nuxeo-elements/nuxeo-page-provider.html">

<link rel="import" href="../bower_components/nuxeo-ui-elements/nuxeo-path-suggestion/nuxeo-path-suggestion.html">
<link rel="import" href="../bower_components/nuxeo-ui-elements/nuxeo-data-table/iron-data-table.html">
<link rel="import" href="../bower_components/nuxeo-ui-elements/widgets/nuxeo-file.html">
<link rel="import" href="../bower_components/nuxeo-ui-elements/actions/nuxeo-preview-button.html">

<!-- <link rel="import" href="../bower_components/nuxeo-ui-elements/actions/nuxeo-delete-document-button.html"> -->
<!-- <link rel="import" href="../bower_components/nuxeo-drive/nuxeo-drive-edit-button.html"> -->

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">

<dom-module id="doc-reader">
<template>
<style include="shared-styles">
:host

{ display: block; padding: 10px; }

nuxeo-data-table

{ height: 220px; }

</style>
<nuxeo-connection id="nxcon" url="http://localhost:8080/nuxeo" username="Administrator" password="Administrator" user="user"></nuxeo-connection>
<!-- <nuxeo-document auto doc-path="/default-domain/workspaces/test6/rfx_template_2.docx" response="document"></nuxeo-document> -->
<!-- <nuxeo-document id="doc" auto doc-path="/default-domain/" response="document"></nuxeo-document> -->
<nuxeo-document id="doc" auto doc-path="[[targetPath]]" response=document></nuxeo-document>

<nuxeo-page-provider auto
provider="advanced_document_content"
params="[[_computeParams(document)]]"
current-page="children">
</nuxeo-page-provider>

<div class="card">
<div class="circle">4</div>
<h1>Doc Reader</h1>
</div>
<div class="card">
<!-- <h3>Upload files:</h3>
<nuxeo-file id="file" value="blob"></nuxeo-file>
<h2>Title: [[document.title]]</h2>
<p>ID: [[document.uid]]</p>
<p>Repository: [[document.repository]]</p>
<p>State: [[document.state]]</p>
<h3>preview</h3> -->

<!-- <nuxeo-preview-button document="[[document]]"></nuxeo-preview-button> -->

<!--
<h3>Contributors:</h3>
<ul>
<template is="dom-repeat" items="[[document.properties.dc:contributors]]" as="contributor">
<li>[[contributor]]</li>
</template>
</ul>
<h3>Children:</h3>
<ul>

<template is="dom-repeat" items="[[children]]" as="child">
<li>[[child.title]]</li>
</template>
</ul> -->
<nuxeo-path-suggestion label="document path" value="targetPath"></nuxeo-path-suggestion>

<h3>doc list:</h3>
<nuxeo-data-table items=[[children]]>
<nuxeo-data-table-column name="Icon">
<template>
<iron-icon src="[[_thumbnail(item)]]">
</template>
</nuxeo-data-table-column>
<nuxeo-data-table-column name="Title">
<template>[[item.title]]</template>
</nuxeo-data-table-column>
<nuxeo-data-table-column name="Preview">
<template>
<nuxeo-preview-button document="[[item]]"></nuxeo-preview-button>
</template>
</nuxeo-data-table-column>
<!-- <nuxeo-data-table-column name="Edit">
<template>
<nuxeo-drive-edit-button user="[[user]]" document="[[item]]" blob="[[item.value]]"></nuxeo-drive-edit-button>
</template>
</nuxeo-data-table-column>

<nuxeo-data-table-column name="Delete">
<template>
<nuxeo-delete-document-button document="[[item]]"></nuxeo-delete-document-button>
</template>
</nuxeo-data-table-column> -->
<nuxeo-data-table-column name="Last Modified">
<template>[[item.lastModified]]</template>
</nuxeo-data-table-column>
</nuxeo-data-table>
</div>
</template>

<script>
Polymer({
is: 'doc-reader',
properties: {
targetPath:

{ type: String, value: '/default-domain/workspaces/test6/' }

,
// blob:

{ // type: Object, // value: null, // observer: '_blobChanged' // }

},

_computeParams: function (document)

{ return document ? \{ ecm_parentId: this.document.uid }

: {};
},

_thumbnail: function (doc) {
if (doc && doc.uid)

{ var baseUrl = this.$.nxcon.url; return baseUrl + '/api/v1/id/' + doc.uid + '/@rendition/thumbnail'; }

},

// _blobChanged: function () {
// if (this.blob) {
// this.$.file.batchExecute('FileManager.Import', {
// context:

{ // currentDocument: this.targetPath // }

// }, { nx_es_sync: 'true' }).then(function ()

{ // this.$.doc.get(); // this.set('blob', null); // }

.bind(this));
// }
// }
});
</script>
</dom-module>