blob: 680c077453c674973c6d03c49aa7cf92d6c2f391 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
/**
@license
Copyright (c) 2018 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
*/
import { LitElement, html } from '@polymer/lit-element';
// These are the elements needed by this element.
import { plusIcon, minusIcon } from './my-icons.js';
// These are the shared styles needed by this element.
import { ButtonSharedStyles } from './button-shared-styles.js';
// This is a reusable element. It is not connected to the store. You can
// imagine that it could just as well be a third-party element that you
// got from someone else.
class CounterElement extends LitElement {
_render(props) {
return html`
${ButtonSharedStyles}
<style>
span { width: 20px; display: inline-block; text-align: center; font-weight: bold;}
</style>
<div>
<p>
Clicked: <span>${props.clicks}</span> times.
Value is <span>${props.value}</span>.
<button on-click="${() => this._onIncrement()}" title="Add 1">${plusIcon}</button>
<button on-click="${() => this._onDecrement()}" title="Minus 1">${minusIcon}</button>
</p>
</div>
`;
}
static get properties() { return {
/* The total number of clicks you've done. */
clicks: Number,
/* The current value of the counter. */
value: Number
}};
constructor() {
super();
this.clicks = 0;
this.value = 0;
}
_onIncrement() {
this.value++;
this.clicks++;
this.dispatchEvent(new CustomEvent('counter-incremented'));
}
_onDecrement() {
this.value--;
this.clicks++;
this.dispatchEvent(new CustomEvent('counter-decremented'));
}
}
window.customElements.define('counter-element', CounterElement);
|
