dees-catalog/ts_web/elements/dees-form-submit.ts

58 lines
1.1 KiB
TypeScript
Raw Normal View History

2021-08-25 15:34:15 +00:00
import {
customElement,
html,
DeesElement,
css,
cssManager,
property,
} from '@designestate/dees-element';
2021-05-05 20:55:49 +00:00
import { DeesForm } from './dees-form';
2020-09-13 16:24:48 +00:00
2021-02-13 21:52:36 +00:00
declare global {
interface HTMLElementTagNameMap {
'dees-form-submit': DeesFormSubmit;
}
}
2020-09-13 16:24:48 +00:00
@customElement('dees-form-submit')
2021-05-05 20:55:49 +00:00
export class DeesFormSubmit extends DeesElement {
2021-08-25 15:34:15 +00:00
public static demo = () => html`<dees-form-submit>This is a sloted text</dees-form-submit>`;
2021-08-25 11:51:55 +00:00
@property({
2021-08-25 15:34:15 +00:00
type: Boolean,
2021-08-25 11:51:55 +00:00
})
public disabled = false;
2021-08-25 14:09:52 +00:00
@property({
2021-08-25 15:34:15 +00:00
type: String,
2021-08-25 14:09:52 +00:00
})
public text: string;
2021-08-27 11:38:08 +00:00
@property({
type: String
})
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
2021-05-05 20:55:49 +00:00
constructor() {
super();
}
2020-09-13 16:24:48 +00:00
2021-05-05 20:55:49 +00:00
public static styles = [cssManager.defaultStyles, css``];
2020-09-13 16:24:48 +00:00
public render() {
2021-08-25 15:34:15 +00:00
return html`
2021-08-27 11:38:08 +00:00
<dees-button status=${this.status} @click=${this.submit} .disabled=${this.disabled}>
2021-08-25 15:34:15 +00:00
${this.text ? this.text : html`<slot></slot>`}
</dees-button>
`;
2020-09-13 16:24:48 +00:00
}
public async submit() {
2021-08-25 15:34:15 +00:00
if (this.disabled) {
2021-08-25 11:51:55 +00:00
return;
}
2020-09-13 16:24:48 +00:00
const parentElement: DeesForm = this.parentElement as DeesForm;
parentElement.gatherAndDispatch();
}
}