107 lines
2.7 KiB
TypeScript
107 lines
2.7 KiB
TypeScript
|
import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
|
||
|
|
import * as plugins from '../plugins.js';
|
||
|
|
|
||
|
|
declare global {
|
||
|
|
interface HTMLElementTagNameMap {
|
||
|
|
'sdig-signbox': SignBox;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@customElement('sdig-signbox')
|
||
|
|
export class SignBox extends DeesElement {
|
||
|
|
public static demo = () => html`
|
||
|
|
<sdig-signbox></sdig-signbox>
|
||
|
|
`;
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
}
|
||
|
|
|
||
|
|
public static styles = [
|
||
|
|
cssManager.defaultStyles,
|
||
|
|
css`
|
||
|
|
.mainbox {
|
||
|
|
position: relative;
|
||
|
|
background: ${cssManager.bdTheme('#eeeeeb', '#111111')};
|
||
|
|
border-radius: 16px;
|
||
|
|
max-width: 600px;
|
||
|
|
margin: auto;
|
||
|
|
overflow: hidden;
|
||
|
|
color: ${cssManager.bdTheme('#111111', '#eeeeeb')};
|
||
|
|
font-family: 'Roboto', sans-serif;
|
||
|
|
box-shadow: ${cssManager.bdTheme('0px 0px 8px 0px #00000040', 'none')};
|
||
|
|
}
|
||
|
|
|
||
|
|
.heading {
|
||
|
|
padding: 4px;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 12px;
|
||
|
|
margin-bottom: -20px;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
sdig-signpad {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.actions {
|
||
|
|
position: relative;
|
||
|
|
padding: 0px 24px;
|
||
|
|
font-size: 16px;
|
||
|
|
background: ${cssManager.bdTheme('#eeeeeb', '#000000')};
|
||
|
|
box-shadow: ${cssManager.bdTheme('0px 0px 8px 0px #00000040', 'none')};
|
||
|
|
z-index: 2;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button {
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 0px 16px;
|
||
|
|
padding: 16px 0px;
|
||
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button:hover {
|
||
|
|
color: ${cssManager.bdTheme('#111111', '#eeeeeb')};
|
||
|
|
}
|
||
|
|
`
|
||
|
|
];
|
||
|
|
|
||
|
|
public render(): TemplateResult {
|
||
|
|
return html`
|
||
|
|
<div class="mainbox">
|
||
|
|
<div class="heading">
|
||
|
|
You may sign below:
|
||
|
|
</div>
|
||
|
|
<sdig-signpad></sdig-signpad>
|
||
|
|
<div class="actions">
|
||
|
|
<div class="button" @click=${async () => {
|
||
|
|
await this.shadowRoot.querySelector('sdig-signpad').clear();
|
||
|
|
}}>
|
||
|
|
Clear
|
||
|
|
</div>
|
||
|
|
<div class="button" @click=${async () => {
|
||
|
|
await this.shadowRoot.querySelector('sdig-signpad').undo();
|
||
|
|
}}>
|
||
|
|
Undo
|
||
|
|
</div>
|
||
|
|
<div class="button" @click=${async () => {
|
||
|
|
const signature = await this.shadowRoot.querySelector('sdig-signpad').toData();
|
||
|
|
this.dispatchEvent(new CustomEvent('signature', {
|
||
|
|
detail: {
|
||
|
|
signature,
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
console.log(signature);
|
||
|
|
}}>
|
||
|
|
Submit Signature
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|