1.0.58

html/index.ts

@@ -1,6 +1,6 @@
 // dees tools
-import * as deesWccTools from '@designestate/dees-wcctools';
-import * as deesDomTools from '@designestate/dees-domtools';
+import * as deesWccTools from '@design.estate/dees-wcctools';
+import * as deesDomTools from '@design.estate/dees-domtools';
 
 // elements and pages
 import * as elements from '../ts_web/elements/index.js';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signature.digital_private/catalog",
-  "version": "1.0.56",
+  "version": "1.0.58",
   "private": false,
   "description": "a catalog containing components for e-signing",
   "main": "dist_ts_web/index.js",
@@ -14,19 +14,20 @@
   "author": "Task Venture Capital GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.41",
-    "@designestate/dees-element": "^1.0.26",
-    "@designestate/dees-wcctools": "^1.0.37",
+    "@design.estate/dees-catalog": "^1.0.230",
+    "@design.estate/dees-domtools": "^2.0.55",
+    "@design.estate/dees-element": "^2.0.33",
+    "@design.estate/dees-wcctools": "^1.0.37",
     "@git.zone/tsrun": "^1.2.12",
     "@losslessone_private/loint-pubapi": "^1.0.9",
-    "@pushrocks/smartexpress": "^3.0.76",
-    "typescript": "^4.4.3"
+    "@signature.digital/portablecontract": "^1.0.4",
+    "signature_pad": "^4.1.7"
   },
   "devDependencies": {
     "@git.zone/tsbuild": "^2.1.24",
-    "@git.zone/tsbundle": "^1.0.72",
-    "@git.zone/tswatch": "^1.0.50",
-    "@pushrocks/projectinfo": "^4.0.5"
+    "@git.zone/tsbundle": "^2.0.10",
+    "@git.zone/tswatch": "^2.0.13",
+    "@push.rocks/projectinfo": "^5.0.2"
   },
   "files": [
     "ts/**/*",

ts_iso/democontract.ts

@@ -0,0 +1,49 @@
+import * as plugins from './plugins.js';
+
+export const demoContract: plugins.portablecontract.IPortableContract = {
+  "title": "Minijob Employment Contract",
+  "context": "This contract is for a Minijob position under German law.",
+  "availableRoles": [
+    {
+      "id": "employer",
+      "name": "Employer",
+      "description": "The party offering the Minijob position."
+    },
+    {
+      "id": "employee",
+      "name": "Employee",
+      "description": "The party accepting the Minijob position."
+    }
+  ],
+  "involvedParties": [
+    {
+      "role": "employer",
+      "contact": null
+    },
+    {
+      "role": "employee",
+      "contact": null
+    }
+  ],
+  "priorContracts": [],
+  "paragraphs": [
+    {
+      "uniqueId": "1",
+      "parent": null,
+      "title": "Introduction",
+      "content": "This contract outlines the terms of employment for a Minijob position between [Employer Name] and [Employee Name]."
+    },
+    {
+      "uniqueId": "2",
+      "parent": null,
+      "title": "Scope of Work",
+      "content": "The employee will perform the following duties: [List of Duties]."
+    },
+    {
+      "uniqueId": "3",
+      "parent": null,
+      "title": "Compensation",
+      "content": "The employee will be compensated with a monthly salary of [Salary Amount], in accordance with Minijob regulations."
+    }
+  ]
+};

ts_iso/index.ts

@@ -0,0 +1 @@
+export * from './democontract.js';

ts_iso/plugins.ts

@@ -0,0 +1,5 @@
+import * as portablecontract from '@signature.digital/portablecontract';
+
+export {
+  portablecontract,
+}

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@signature.digital_private/catalog',
-  version: '1.0.56',
+  version: '1.0.58',
   description: 'a catalog containing components for e-signing'
 }

ts_web/elements/first-element.ts

@@ -1,47 +0,0 @@
-import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element';
-import * as domtools from '@designestate/dees-domtools';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'first-element': FirstElement;
-  }
-}
-
-@customElement('first-element')
-export class FirstElement extends DeesElement {
-  public static demo = () => html`
-    <first-element .aProp="${'test'}"></first-element>
-  `;
-
-  @property({
-    type: String
-  })
-  public aProp: string = 'loading...';
-
-
-  constructor() {
-    super();
-    domtools.DomTools.setupDomTools();
-  }
-
-  public static styles = [
-    domtools.elementBasic.staticStyles,
-    css`
-      :host {
-        display: block;
-        background: blue;
-        color: white;
-        padding: 10px;
-        text-align: center;
-      }
-    `
-  ]
-
-  public render(): TemplateResult {
-    return html`
-      <div class="mainbox">
-        ${this.aProp}
-      </div>
-    `;
-  }
-}

ts_web/elements/index.ts

@@ -1 +1,3 @@
-export * from './first-element.js';
+export * from './sdig-contracteditor.js';
+export * from './sdig-signbox.js';
+export * from './sdig-signpad.js';

ts_web/elements/sdig-contracteditor.ts

@@ -0,0 +1,42 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+  domtools,
+} from '@design.estate/dees-element';
+import * as tsIso from '../../ts_iso/index.js';
+import * as plugins from '../plugins.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sdig-contracteditor': ContractEditor;
+  }
+}
+
+@customElement('sdig-contracteditor')
+export class ContractEditor extends DeesElement {
+  public static demo = () => html` <sdig-contracteditor
+    .contract=${tsIso.demoContract}
+  ></sdig-contracteditor> `;
+
+  // INSTANCE
+  public localStateInstance = new domtools.plugins.smartstate.Smartstate();
+  public contractState =
+    this.localStateInstance.getStatePart<plugins.portablecontract.IPortableContract>('contract');
+
+  @property({ type: Object })
+  public contract: plugins.portablecontract.IPortableContract;
+
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    super.firstUpdated(_changedProperties);
+    
+  }
+
+  public render(): TemplateResult {
+    return html` <div class="mainbox"></div> `;
+  }
+}

ts_web/elements/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>
+    `;
+  }
+}

ts_web/elements/sdig-signpad.ts

@@ -0,0 +1,110 @@
+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-signpad': SignPad;
+  }
+}
+
+@customElement('sdig-signpad')
+export class SignPad extends DeesElement {
+  public static demo = () => html`
+    <sdig-signpad></sdig-signpad>
+  `;
+
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        color: white;
+        position: relative;
+        max-width: 600px;
+        min-height: 280px;
+        max-height: 400px;
+      }
+
+      .mainbox {
+        position: relative;
+        width: 600px;
+        height: 280px;
+      }
+
+      .signline {
+        position: absolute;
+        bottom: 30%;
+        width: 80%;
+        left: 10%;
+        border-top: 1px dashed ${cssManager.bdTheme('#00000040', '#ffffff20')};
+        pointer-events: none;
+      }
+
+      canvas {
+        filter: ${cssManager.bdTheme('invert(0)', 'invert(1)')};
+      }
+    `
+  ]
+
+  public render(): TemplateResult {
+    return html`
+      <div class="mainbox">
+        <div class="signline"></div>
+      </div>
+    `;
+  }
+
+  public signaturePad: typeof plugins.signaturePad.prototype;
+  public async firstUpdated() {
+    const domtools = await this.domtoolsPromise;
+    const canvas = document.createElement('canvas');
+    this.shadowRoot.querySelector('.mainbox').appendChild(canvas);
+    await this.resizeCanvas();
+    this.signaturePad = new plugins.signaturePad(canvas, {
+      
+    });
+    this.signaturePad.on();
+  }
+
+  public async resizeCanvas() {
+    const mainbox = this.shadowRoot.querySelector('.mainbox');
+    const mainboxWidth = mainbox.clientWidth;
+    const mainboxHeight = mainbox.clientHeight;
+    const canvas = this.shadowRoot.querySelector('canvas');
+    canvas.width = mainboxWidth;
+    canvas.height = mainboxHeight;
+    if (this.signaturePad) {
+      this.signaturePad.clear();
+    }
+  }
+
+  public async clear() {
+    this.signaturePad.clear();
+  }
+
+  public async toData() {
+    const returnData =  this.signaturePad.toData();
+    return returnData;
+  }
+
+  public async fromData(dataArrayArg: any[]) {
+    this.signaturePad.fromData(dataArrayArg);
+  }
+
+  public async toSVG() {
+    return this.signaturePad.toSVG({
+      includeBackgroundColor: false,
+    });
+  }
+
+  public async undo() {
+    const data = await this.toData();
+    data.pop();
+    await this.fromData(data);
+  }
+}

ts_web/plugins.ts

@@ -0,0 +1,22 @@
+// @signature.digital scope
+import * as portablecontract from '@signature.digital/portablecontract';
+
+export {
+  portablecontract,
+}
+
+// @design.estate scope
+import * as deesCatalog from '@design.estate/dees-catalog';
+
+export {
+  deesCatalog,
+}
+
+// third party
+import signaturePadMod from 'signature_pad';
+type signaturePadType = (typeof import('signature_pad'))['default'];
+const signaturePad = signaturePadMod as any as signaturePadType;
+
+export {
+  signaturePad,
+}