Skip to content

Commit

Permalink
Update to Polymer 3.x via Polymer modulizer
Browse files Browse the repository at this point in the history
  • Loading branch information
@dejan9393
dejan9393 committed Nov 19, 2018
1 parent 367f074 commit 3cb2865
Show file tree
Hide file tree
Showing 10 changed files with 442 additions and 474 deletions.
3 changes: 2 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
bower_components
node_modules
yarn.lock
206 changes: 89 additions & 117 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,127 +6,99 @@

<title>paper-number-input demo</title>

<script src="../../webcomponentsjs/webcomponents-loader.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="../../paper-input/paper-input.html">
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../paper-number-input.html">
<script src="../../../@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

<script type="module" src="../../../@polymer/iron-demo-helpers/demo-pages-shared-styles.js"></script>
<script type="module" src="../../../@polymer/iron-demo-helpers/demo-snippet.js"></script>
<script type="module" src="../../../@polymer/paper-input/paper-input.js"></script>
<script type="module" src="../../../@polymer/iron-flex-layout/iron-flex-layout.js"></script>
<script type="module" src="../../../@polymer/paper-checkbox/paper-checkbox.js"></script>
<script type="module" src="../paper-number-input.js"></script>

<!--
For icons to appear, you can:
- just import the iron-icons/iron-icons.js Polymer element,
- create your own icon set and specify `stepDownIcon` and `stepUpIcon` properties according.
- import paper-number-input/paper-number-input-icons and define
`stepDownIcon` as 'integer-input:step-down' and `stepUpIcon` as 'integer-input:step-up'
-->
<script type="module" src="../../../@polymer/iron-icons/iron-icons.js"></script>
</head>

<body>
<script type="module">
const $_documentContainer = document.createElement('template');

<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
</style>
</custom-style>

<div class="vertical-section-container centered">

<demo-snippet>
<template>

<dom-bind id="scope">
<template>

<!--
For icons to appear, you can:
- just import the iron-icons/iron-icons.html Polymer element,
- create your own icon set and specify `stepDownIcon` and `stepUpIcon` properties according.
- import paper-number-input/paper-number-input-icons and define
`stepDownIcon` as 'integer-input:step-down' and `stepUpIcon` as 'integer-input:step-up'
-->
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../../polymer/lib/elements/custom-style.html">

<custom-style>
<style>
paper-number-input {
max-width: 150px;
margin: auto;
}
</style>
</custom-style>

<paper-input
label="Label"
value="{{label}}"
></paper-input>

<paper-input
type="number"
label="min"
value="{{min}}"
></paper-input>

<paper-input
type="number"
label="max"
value="{{max}}"
></paper-input>

<paper-input
type="number"
label="Value"
value="{{value}}"
></paper-input>

<paper-input
type="number"
label="Step"
value="{{step}}"
></paper-input>

<paper-input
type="number"
label="Fallback value"
value="{{fallbackValue}}"
></paper-input>

<paper-checkbox
checked="{{disabled}}"
>Disabled</paper-checkbox>

<paper-checkbox
checked="{{alwaysFloatLabel}}"
>Always label float</paper-checkbox>

<paper-number-input
always-float-label="{{alwaysFloatLabel}}"
label="[[label]]"
min="[[min]]"
max="[[max]]"
value="{{value}}"
disabled="[[disabled]]"
step="{{step}}"
fallback-value="[[fallbackValue]]"
>
<!--
<div slot="prefix"></div>
<div slot="suffix"></div>
-->
</paper-number-input>

<script>
var scope = document.getElementById('scope');

scope.label = 'Number';
scope.min = 1;
scope.max = 10;
scope.value = 5;
scope.fallbackValue = 0;
scope.alwaysFloatLabel = true;
</script>

</template>
</dom-bind>

</template>
</demo-snippet>

</div>
$_documentContainer.innerHTML = `<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
</style>
</custom-style>`;

document.body.appendChild($_documentContainer.content);
</script>

<script type="module">
const $_documentContainer = document.createElement('template');

$_documentContainer.innerHTML = `<div class="vertical-section-container centered">
<demo-snippet>
<template>
<dom-bind id="scope">
<template>
<custom-style>
<style>
paper-number-input {
max-width: 150px;
margin: auto;
}
</style>
</custom-style>
<paper-input label="Label" value="{{label}}"></paper-input>
<paper-input type="number" label="min" value="{{min}}"></paper-input>
<paper-input type="number" label="max" value="{{max}}"></paper-input>
<paper-input type="number" label="Value" value="{{value}}"></paper-input>
<paper-input type="number" label="Step" value="{{step}}"></paper-input>
<paper-input type="number" label="Fallback value" value="{{fallbackValue}}"></paper-input>
<paper-checkbox checked="{{disabled}}">Disabled</paper-checkbox>
<paper-checkbox checked="{{alwaysFloatLabel}}">Always label float</paper-checkbox>
<paper-number-input always-float-label="{{alwaysFloatLabel}}" label="[[label]]" min="[[min]]" max="[[max]]" value="{{value}}" disabled="[[disabled]]" step="{{step}}" fallback-value="[[fallbackValue]]">
</paper-number-input>
</template>
</dom-bind>
</template>
</demo-snippet>
</div>`;

document.body.appendChild($_documentContainer.content);
</script>

<script>
customElements.whenDefined('paper-number-input').then(() => {
requestAnimationFrame(() => {
const scope = document.getElementById('scope');

scope.label = 'Number';
scope.min = 1;
scope.max = 10;
scope.value = 5;
scope.fallbackValue = 0;
scope.alwaysFloatLabel = true;
});
});
</script>
</body>
</html>
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@

<title>paper-number-input</title>

<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>

<link rel="import" href="../iron-component-page/iron-component-page.html">
<script type="module" src="../../@polymer/iron-component-page/iron-component-page.js"></script>
</head>
<body>
<iron-component-page src="paper-number-input.html"></iron-component-page>
Expand Down
44 changes: 44 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
{
"description": "A Material Design input field for relative integer with step up/down buttons (Polymer 1.9 - 2.x)",
"keywords": [
"web-components",
"polymer",
"input",
"number",
"integer"
],
"repository": {
"type": "git",
"url": "git://github.com/Zecat/paper-number-input.git"
},
"homepage": "https://github.com/Zecat/paper-number-input",
"name": "@zecat/paper-number-input",
"version": "1.0.0",
"resolutions": {
"inherits": "2.0.3",
"samsam": "1.1.3",
"supports-color": "3.1.2",
"type-detect": "1.0.0"
},
"main": "paper-number-input.js",
"author": "Zecat <[email protected]>",
"license": "MIT",
"dependencies": {
"@polymer/polymer": "^3.0.0",
"@polymer/paper-button": "^3.0.0-pre.18",
"@polymer/paper-input": "^3.0.0-pre.18",
"@polymer/iron-flex-layout": "^3.0.0-pre.18",
"@polymer/iron-icon": "^3.0.0-pre.18",
"@polymer/iron-icons": "^3.0.0-pre.18",
"@polymer/iron-form-element-behavior": "^3.0.0-pre.18",
"@polymer/iron-input": "^3.0.0-pre.18",
"@polymer/iron-iconset-svg": "^3.0.0-pre.18"
},
"devDependencies": {
"@polymer/iron-component-page": "^3.0.0-pre.18",
"@polymer/iron-demo-helpers": "^3.0.0-pre.18",
"@polymer/paper-checkbox": "^3.0.0-pre.18",
"wct-browser-legacy": "^1.0.1",
"@webcomponents/webcomponentsjs": "^2.0.0"
}
}
10 changes: 0 additions & 10 deletions paper-number-input-icons.html
View file

This file was deleted.

13 changes: 13 additions & 0 deletions paper-number-input-icons.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
import '@polymer/iron-iconset-svg/iron-iconset-svg.js';

const template = html`<iron-iconset-svg size="24" name="integer-input">
<svg>
<defs>
<g id="step-up"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g>
<g id="step-down"><path d="M19 13H5v-2h14v2z"></path></g>
</defs>
</svg>
</iron-iconset-svg>`;

document.head.appendChild(template.content);
Loading

0 comments on commit 3cb2865

Please sign in to comment.