feat(catalog): add ContractEditor and many editor subcomponents; implement SignPad and SignBox; update README and bump dependencies

ts_web/elements/sdig-signbox/sdig-signbox.ts

@@ -0,0 +1,107 @@
+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>
+    `;
+  }
+}