1.0.59

changelog.md

@@ -0,0 +1,13 @@
+# Changelog
+
+## 2024-12-19 - 1.0.59 - fix(dependencies)
+Update package dependencies and project metadata
+
+- Updated package dependencies to the latest versions in package.json
+- Synchronized project description and keywords in npmextra.json with package.json
+
+## 2023-11-28 - 1.0.55 to 1.0.58 - core updates
+Main changes include fixing and updating core functionalities.
+
+- Fixed core issues and updated core functionalities in versions 1.0.55, 1.0.56, and 1.0.57.
+- Further updates and improvements were carried out in version 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';

npmextra.json

@@ -5,10 +5,25 @@
       "githost": "gitlab.com",
       "gitscope": "signature.digital_private",
       "gitrepo": "catalog",
-      "description": "a catalog containing components for e-signing",
+      "description": "A comprehensive catalog of customizable web components designed for building and managing e-signature applications.",
       "npmPackagename": "@signature.digital_private/catalog",
       "license": "UNLICENSED",
-      "projectDomain": "signature.digital"
+      "projectDomain": "signature.digital",
+      "keywords": [
+        "e-signature",
+        "web components",
+        "digital signature",
+        "signature capture",
+        "ECMAScript Modules",
+        "typescript",
+        "component library",
+        "contract management",
+        "frontend development",
+        "signature pad",
+        "custom elements",
+        "electronic signing",
+        "npm package"
+      ]
     }
   },
   "npmci": {

package.json

@@ -1,10 +1,11 @@
 {
-  "name": "@signature.digital_private/catalog",
-  "version": "1.0.56",
+  "name": "@signature.digital/catalog",
+  "version": "1.0.59",
   "private": false,
-  "description": "a catalog containing components for e-signing",
-  "main": "dist_ts_web/index.js",
-  "typings": "dist_ts_web/index.d.ts",
+  "description": "A comprehensive catalog of customizable web components designed for building and managing e-signature applications.",
+  "exports": {
+    ".": "./dist_ts_web/index.ts"
+  },
   "type": "module",
   "scripts": {
     "test": "npm run build",
@@ -12,21 +13,21 @@
     "watch": "tswatch element"
   },
   "author": "Task Venture Capital GmbH",
-  "license": "UNLICENSED",
+  "license": "MIT",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.41",
-    "@designestate/dees-element": "^1.0.26",
-    "@designestate/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"
+    "@design.estate/dees-catalog": "^1.3.3",
+    "@design.estate/dees-domtools": "^2.0.65",
+    "@design.estate/dees-element": "^2.0.39",
+    "@design.estate/dees-wcctools": "^1.0.90",
+    "@git.zone/tsrun": "^1.3.3",
+    "@signature.digital/tools": "^1.1.0",
+    "signature_pad": "^5.0.4"
   },
   "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/tsbuild": "^2.2.0",
+    "@git.zone/tsbundle": "^2.1.0",
+    "@git.zone/tswatch": "^2.0.37",
+    "@push.rocks/projectinfo": "^5.0.2"
   },
   "files": [
     "ts/**/*",
@@ -42,5 +43,20 @@
   ],
   "browserslist": [
     "last 1 Chrome versions"
+  ],
+  "keywords": [
+    "e-signature",
+    "web components",
+    "digital signature",
+    "signature capture",
+    "ECMAScript Modules",
+    "typescript",
+    "component library",
+    "contract management",
+    "frontend development",
+    "signature pad",
+    "custom elements",
+    "electronic signing",
+    "npm package"
   ]
 }

readme.md

@@ -1,31 +1,164 @@
-# @signature.digital_private/catalog
-a catalog containing components for e-signing
+# @signature.digital/catalog
+A catalog containing components for e-signing, built using modern web technologies for seamless integration and functionality.
 
-## Availabililty and Links
-* [npmjs.org (npm package)](https://www.npmjs.com/package/@signature.digital_private/catalog)
-* [gitlab.com (source)](https://gitlab.com/signature.digital_private/catalog)
-* [github.com (source mirror)](https://github.com/signature.digital_private/catalog)
-* [docs (typedoc)](https://signature.digital_private.gitlab.io/catalog/)
+## Install
+To add `@signature.digital/catalog` to your project, run the following command in your terminal:
 
-## Status for master
+```shell
+npm install @signature.digital/catalog
+```
 
-Status Category | Status Badge
--- | --
-GitLab Pipelines | [![pipeline status](https://gitlab.com/signature.digital_private/catalog/badges/master/pipeline.svg)](https://lossless.cloud)
-GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/signature.digital_private/catalog/badges/master/coverage.svg)](https://lossless.cloud)
-npm | [![npm downloads per month](https://badgen.net/npm/dy/@signature.digital_private/catalog)](https://lossless.cloud)
-Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/signature.digital_private/catalog)](https://lossless.cloud)
-TypeScript Support | [![TypeScript](https://badgen.net/badge/TypeScript/>=%203.x/blue?icon=typescript)](https://lossless.cloud)
-node Support | [![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
-Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](https://lossless.cloud)
-PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@signature.digital_private/catalog)](https://lossless.cloud)
-PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@signature.digital_private/catalog)](https://lossless.cloud)
-BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@signature.digital_private/catalog)](https://lossless.cloud)
+This command will install `@signature.digital/catalog` along with its required peer dependencies. Ensure that your project is set up for ECMAScript Modules (ESM).
 
 ## Usage
-Use TypeScript for best in class intellisense
-For further information read the linked docs at the top of this readme.
 
-## Legal
-> UNLICENSED licensed | **©** [Task Venture Capital GmbH](https://task.vc)
-| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
+The `@signature.digital/catalog` package provides a set of web components specifically designed for building e-signature applications. These components can be used for capturing, displaying, and managing electronic signatures. The primary components offered in this package include `SignPad`, `SignBox`, and `ContractEditor`.
+
+### Setting Up the Environment
+
+To make the most of `@signature.digital/catalog`, you'll want to ensure you have your environment ready to use web components. If you're using a standard web setup with a module bundler like Webpack, Rollup, or Vite, make sure your build process supports ECMAScript modules.
+
+### Basic Example of `SignPad`
+
+The `SignPad` component is a customizable signature pad that can be used to capture user signatures. Here's how to implement it in your HTML:
+
+```typescript
+import '@signature.digital/catalog/element';
+
+class MySignatureComponent extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = '<sdig-signpad></sdig-signpad>';
+  }
+}
+
+customElements.define('my-signature-component', MySignatureComponent);
+```
+
+In this example, a simple HTML element is constructed that includes the `sdig-signpad` custom element. This signature pad allows users to draw their signatures directly in the browser.
+
+### Advanced Usage with `SignBox`
+
+The `SignBox` component wraps `SignPad` with additional controls for signing actions like clear and undo. This provides a complete signing interface out of the box.
+
+```typescript
+import '@signature.digital/catalog/element';
+
+class MyCompleteSignatureBox extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `<sdig-signbox></sdig-signbox>`;
+    this.querySelector('sdig-signbox').addEventListener('signature', (e) => {
+      const signatureData = e.detail.signature;
+      console.log('Signature data:', signatureData);
+    });
+  }
+}
+
+customElements.define('my-complete-signature-box', MyCompleteSignatureBox);
+```
+
+In this setup, `SignBox` also manages the signature data and emits a custom event once the signature is submitted. You can listen for this event to gather the signature data for storage or further processing.
+
+### Integrating `ContractEditor`
+
+ContractEditor allows for manipulating contract details and integrating signature capabilities directly into documents. This component communicates with its state using Smartstate, an inbuilt state management system.
+
+```typescript
+import '@signature.digital/catalog/element';
+import { IPortableContract } from '@signature.digital/tools/interfaces';
+
+class MyContractEditor extends HTMLElement {
+  editContract(contract: IPortableContract) {
+    const editor = this.querySelector('sdig-contracteditor');
+    editor.contract = contract;
+  }
+  
+  connectedCallback() {
+    this.innerHTML = `<sdig-contracteditor></sdig-contracteditor>`;
+  }
+}
+
+customElements.define('my-contract-editor', MyContractEditor);
+```
+
+`ContractEditor` can be dynamically updated by changing the `contract` property. This component expects contract definitions compatible with the `IPortableContract` interface, offering an adaptable and customizable editing solution.
+
+### Example Application
+
+Below is an integrated example showing how all of these components can be put together to form a basic signature application.
+
+```typescript
+import '@signature.digital/catalog/element';
+import { IPortableContract } from '@signature.digital/tools/interfaces';
+import { demoContract } from '@signature.digital/tools/demodata';
+
+class CombinedSignatureApp extends HTMLElement {
+
+  private contract: IPortableContract = demoContract;
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    this.innerHTML = `
+      <my-complete-signature-box></my-complete-signature-box>
+      <my-contract-editor></my-contract-editor>
+    `;
+    this.querySelector('my-contract-editor').editContract(this.contract);
+  }
+  
+  connectedCallback() {
+    this.render();
+  }
+}
+
+customElements.define('combined-signature-app', CombinedSignatureApp);
+```
+
+In a real-world scenario, `CombinedSignatureApp` could be binding multiple processes around collecting and displaying signatures, including validation logic, storage mechanisms, and user feedback systems.
+
+### Handling Signatures
+
+Once you have a user signature, you can convert it between different formats like `Data`, `SVG` or simply clear or undo modifications. Here is how you can handle these activities within your JavaScript:
+
+```typescript
+document.querySelector('sdig-signpad').addEventListener('signature', async (event) => {
+  const signaturePad = event.target as SignPad;
+  
+  console.log(await signaturePad.toData()); // Get signature data
+  console.log(await signaturePad.toSVG());  // Convert to SVG
+
+  await signaturePad.undo(); // Undo last action
+  await signaturePad.clear(); // Clear the signature pad
+});
+```
+
+This versatile use of `sdig-signpad` demonstrates how diverse use case scenarios for signatures can be developed, be it collecting, transforming, or editing current user inputs.
+
+### Responsive Design Considerations
+
+When building applications that include e-signature capabilities, you must ensure your components respond well to different screen sizes. Components in `@signature.digital/catalog` are designed with CSS variables and flexible dimensions, but specific implementations can benefit from additional CSS media queries.
+
+### Custom Styling
+
+Each component is styled using Light DOM scoped styles. Components like `sdig-signpad` come with default styles, but they are capable of overriding these styles for consistent design alignment within your project. For example:
+
+```typescript
+const style = document.createElement('style');
+style.textContent = `
+  sdig-signpad, sdig-signbox {
+    --main-background-color: #fff;
+    --line-color: #000;
+    --button-color: #007bff;
+  }
+`;
+
+document.head.appendChild(style);
+```
+
+These CSS custom properties modify component styles, from appearance to behavior, creating a cohesive look with the rest of your site's aesthetics.
+
+### Conclusion
+
+With `@signature.digital/catalog`, developers have a comprehensive toolkit for integrating sophisticated e-signature functionalities into their web applications. Its wide array of customizable components, flexibility, and ease of use out of the box makes it an indispensable inclusion for building modern digital signature workflows. Whether for simple signature capture or complex contract management, this package has you covered. Explore more advanced topics and extend the capabilities to fit unique business needs in your applications.
+undefined

ts_web/00_commitinfo_data.ts

@@ -1,8 +1,8 @@
 /**
- * autocreated commitinfo by @pushrocks/commitinfo
+ * autocreated commitinfo by @push.rocks/commitinfo
  */
 export const commitinfo = {
-  name: '@signature.digital_private/catalog',
-  version: '1.0.56',
-  description: 'a catalog containing components for e-signing'
+  name: '@signature.digital/catalog',
+  version: '1.0.59',
+  description: 'A comprehensive catalog of customizable web components designed for building and managing e-signature applications.'
 }

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 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=${plugins.sdDemodata.demoContract}
+  ></sdig-contracteditor> `;
+
+  // INSTANCE
+  public localStateInstance = new domtools.plugins.smartstate.Smartstate();
+  public contractState =
+    this.localStateInstance.getStatePart<plugins.sdInterfaces.IPortableContract>('contract');
+
+  @property({ type: Object })
+  public contract: plugins.sdInterfaces.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,26 @@
+// @signature.digital scope
+import * as sdDemodata from '@signature.digital/tools/demodata';
+import * as sdInterfaces from '@signature.digital/tools/interfaces';
+import * as sdTools from '@signature.digital/tools';
+
+export {
+  sdDemodata,
+  sdInterfaces,
+  sdTools,
+}
+
+// @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,
+}