api-console-assets
Version:
This repo only exists to publish api console components to npm
72 lines (61 loc) • 4.23 kB
HTML
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>files-payload-editor 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="../files-payload-editor.html">
<style is="custom-style" include="demo-pages-shared-styles">
.vertical-section-container {
max-width: 600px;
}
pre {
white-space: pre-wrap;
word-break: break-all;
}
</style>
</head>
<body unresolved>
<div class="vertical-section-container centered">
<h3>The `files-payload-editor`</h3>
<demo-snippet>
<template is="dom-bind">
<files-payload-editor value="{{file}}"></files-payload-editor>
<pre>[[file]]</pre>
</template>
</demo-snippet>
<h3>Base64 encoded</h3>
<demo-snippet>
<template is="dom-bind">
<files-payload-editor value="{{file}}" base64-encode></files-payload-editor>
<pre>[[file]]</pre>
</template>
</demo-snippet>
<h3>With Base64 encoded value (with content type)</h3>
<demo-snippet>
<template is="dom-bind">
<files-payload-editor base64-encode value="data:text/html;base64,PCEtLQpVc2UgYGNocm9tZS1ibHVldG9vdGgtc29ja2V0YCBlbGVtZW50IHRvIGNyZWF0ZSBhIHNvY2tldCBjb25uZWN0aW9uIHRvIGEKQmx1ZXRvb3RoIGRldmljZS4KCldoZW4geW91IGNvbm5lY3QgdG8gYSBzb2NrZXQgeW91IGNhbiBzZW5kIG1lc3NhZ2UgdG8gYSBkZXZpY2UgYW5kIApyZWNlaXZlIGRhdGEgZnJvbSBpdC4KCiMjIyBFeGFtcGxlCmBgYAo8Y2hyb21lLWJsdWV0b290aC1zb2NrZXQgaWQ9InNvY2tldCIKICB1dWlkPSIwYjg3MzY3Yy1mMTg4LTQ3Y2QtYmMyMC1hNWY0ZjcwOTczYzYiCiAgYWRkcmVzcz0iW1tzb2NrZXRBZGRyZXNzXV0iCiAgb24tY29ubmVjdGVkPSJfb25Db25uZWN0ZWQiCiAgb24tbWVzc2FnZT0iX29uTWVzc2FnZSIKICBsYXN0LW1lc3NhZ2U9IltbbGFzdFNvY2tldE1lc3NhZ2VdXSI+PC9jaHJvbWUtYmx1ZXRvb3RoLXNvY2tldD4KYGBgCi0tPgo8bGluayByZWw9ImltcG9ydCIgaHJlZj0iY2hyb21lLWJsdWV0b290aC1zb2NrZXQtYmVoYXZpb3IuaHRtbCI+Cjxkb20tbW9kdWxlIGlkPSJjaHJvbWUtYmx1ZXRvb3RoLXNvY2tldCI+CiAgPHRlbXBsYXRlPgogICAgPHN0eWxlPgogICAgICA6aG9zdCB7CiAgICAgICAgZGlzcGxheTogbm9uZTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L3RlbXBsYXRlPgogIDxzY3JpcHQgc3JjPSJjaHJvbWUtYmx1ZXRvb3RoLXNvY2tldC5qcyI+PC9zY3JpcHQ+CjwvZG9tLW1vZHVsZT4K"></files-payload-editor>
</template>
</demo-snippet>
<h3>With Base64 encoded value (without content type)</h3>
<demo-snippet>
<template is="dom-bind">
<files-payload-editor base64-encode value="PCEtLQpVc2UgYGNocm9tZS1ibHVldG9vdGgtc29ja2V0YCBlbGVtZW50IHRvIGNyZWF0ZSBhIHNvY2tldCBjb25uZWN0aW9uIHRvIGEKQmx1ZXRvb3RoIGRldmljZS4KCldoZW4geW91IGNvbm5lY3QgdG8gYSBzb2NrZXQgeW91IGNhbiBzZW5kIG1lc3NhZ2UgdG8gYSBkZXZpY2UgYW5kIApyZWNlaXZlIGRhdGEgZnJvbSBpdC4KCiMjIyBFeGFtcGxlCmBgYAo8Y2hyb21lLWJsdWV0b290aC1zb2NrZXQgaWQ9InNvY2tldCIKICB1dWlkPSIwYjg3MzY3Yy1mMTg4LTQ3Y2QtYmMyMC1hNWY0ZjcwOTczYzYiCiAgYWRkcmVzcz0iW1tzb2NrZXRBZGRyZXNzXV0iCiAgb24tY29ubmVjdGVkPSJfb25Db25uZWN0ZWQiCiAgb24tbWVzc2FnZT0iX29uTWVzc2FnZSIKICBsYXN0LW1lc3NhZ2U9IltbbGFzdFNvY2tldE1lc3NhZ2VdXSI+PC9jaHJvbWUtYmx1ZXRvb3RoLXNvY2tldD4KYGBgCi0tPgo8bGluayByZWw9ImltcG9ydCIgaHJlZj0iY2hyb21lLWJsdWV0b290aC1zb2NrZXQtYmVoYXZpb3IuaHRtbCI+Cjxkb20tbW9kdWxlIGlkPSJjaHJvbWUtYmx1ZXRvb3RoLXNvY2tldCI+CiAgPHRlbXBsYXRlPgogICAgPHN0eWxlPgogICAgICA6aG9zdCB7CiAgICAgICAgZGlzcGxheTogbm9uZTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L3RlbXBsYXRlPgogIDxzY3JpcHQgc3JjPSJjaHJvbWUtYmx1ZXRvb3RoLXNvY2tldC5qcyI+PC9zY3JpcHQ+CjwvZG9tLW1vZHVsZT4K"></files-payload-editor>
</template>
</demo-snippet>
</div>
</body>
</html>