43 lines
994 B
TypeScript
43 lines
994 B
TypeScript
|
import { html, LitElement } from 'lit'
|
||
|
import { repeat } from 'lit-html/directives/repeat.js'
|
||
|
import { customElement, property } from 'lit/decorators.js'
|
||
|
|
||
|
|
||
|
@customElement('channel-configuration')
|
||
|
export class ChannelConfigurationElement extends LitElement {
|
||
|
|
||
|
@property()
|
||
|
public list: string[] = ["foo", "bar", "baz"]
|
||
|
|
||
|
@property()
|
||
|
public newEl: string = 'change_me'
|
||
|
|
||
|
createRenderRoot = () => {
|
||
|
return this
|
||
|
}
|
||
|
|
||
|
render() {
|
||
|
return html`
|
||
|
<ul>
|
||
|
${repeat(this.list, (el: string, index) => html`<li>${el}<button @click=${this._removeFromList(index)}>remove</button></li>`
|
||
|
)}
|
||
|
<li><input .value=${this.newEl}/><button @click=${this._addToList(this.newEl)}>add</button></li>
|
||
|
</ul>
|
||
|
`
|
||
|
}
|
||
|
|
||
|
private _addToList(newEl: string) {
|
||
|
return () => {
|
||
|
this.list.push(newEl)
|
||
|
this.requestUpdate('list')
|
||
|
}
|
||
|
}
|
||
|
|
||
|
private _removeFromList(index: number) {
|
||
|
return () => {
|
||
|
this.list.splice(index, 1)
|
||
|
this.requestUpdate('list')
|
||
|
}
|
||
|
}
|
||
|
}
|