generated from garrettmills/template-npm-typescript
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.6 KiB
64 lines
1.6 KiB
import {ExComponent} from '../ExComponent.js'
|
|
import {Attribute, Component, Element} from '../decorators.js'
|
|
|
|
@Component('ex-submit')
|
|
export class SubmitButtonComponent extends ExComponent {
|
|
protected static styles = `
|
|
<style>
|
|
button {
|
|
display: inline-block;
|
|
padding: 7px 12px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
|
|
background-color: var(--color-accent);
|
|
color: var(--color-text-on-accent);
|
|
border: 1px solid var(--color-accent-darkened);
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
border-radius: 7px;
|
|
|
|
transition: background-color 0.1s linear;
|
|
width: unset;
|
|
font-size: 1em;
|
|
}
|
|
|
|
button:active {
|
|
background-color: var(--color-accent-darkened);
|
|
}
|
|
|
|
.container {
|
|
padding: 0 20px;
|
|
text-align: right;
|
|
}
|
|
</style>
|
|
`
|
|
|
|
protected static html = `
|
|
<div class="container">
|
|
<button type="submit"></button>
|
|
</div>
|
|
`
|
|
|
|
@Attribute()
|
|
public label = 'Submit'
|
|
|
|
@Element('button[type=submit]')
|
|
protected buttonEl!: HTMLButtonElement
|
|
|
|
mount() {
|
|
super.mount()
|
|
|
|
this.buttonEl.addEventListener('click', () => {
|
|
this.dispatchCustom('onSubmit', {})
|
|
})
|
|
}
|
|
|
|
render() {
|
|
super.render()
|
|
|
|
this.buttonEl.innerText = this.label
|
|
}
|
|
}
|