74 lines
1.4 KiB
TypeScript
74 lines
1.4 KiB
TypeScript
import { demoFunc } from './dees-form-submit.demo.js';
|
|
import {
|
|
customElement,
|
|
html,
|
|
DeesElement,
|
|
css,
|
|
cssManager,
|
|
property,
|
|
} from '@design.estate/dees-element';
|
|
import type { DeesForm } from './dees-form.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'dees-form-submit': DeesFormSubmit;
|
|
}
|
|
}
|
|
|
|
@customElement('dees-form-submit')
|
|
export class DeesFormSubmit extends DeesElement {
|
|
public static demo = demoFunc;
|
|
|
|
@property({
|
|
type: Boolean,
|
|
reflect: true,
|
|
})
|
|
public disabled = false;
|
|
|
|
@property({
|
|
type: String,
|
|
})
|
|
public text: string;
|
|
|
|
@property({
|
|
type: String,
|
|
})
|
|
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
public static styles = [cssManager.defaultStyles, css``];
|
|
|
|
public render() {
|
|
return html`
|
|
<dees-button
|
|
status="${this.status}"
|
|
@click="${this.submit}"
|
|
?disabled="${this.disabled}"
|
|
>
|
|
${this.text || html`<slot></slot>`}
|
|
</dees-button>
|
|
`;
|
|
}
|
|
|
|
public async submit() {
|
|
if (this.disabled) {
|
|
return;
|
|
}
|
|
const parentElement: DeesForm = this.parentElement as DeesForm;
|
|
if (parentElement && parentElement.gatherAndDispatch) {
|
|
parentElement.gatherAndDispatch();
|
|
}
|
|
}
|
|
|
|
public async focus() {
|
|
const domtools = await this.domtoolsPromise;
|
|
if (!this.disabled) {
|
|
await domtools.convenience.smartdelay.delayFor(0);
|
|
this.submit();
|
|
}
|
|
}
|
|
}
|