legalesign-document-viewer 0.0.7 → 0.0.8

package/dist/collection/components/ls-icon/ls-icon.js

@@ -0,0 +1,125 @@
+import { h } from "@stencil/core";
+import { icons } from "./icons";
+import { IconEnum, iconNames } from "../../types/Icon";
+export class LsIcon {
+    name;
+    solid = false;
+    size = "20";
+    customStyle;
+    // Added function to check that the Icon enum type has all the icons from the icons.ts file
+    arraysAreIdentical(arr1, arr2) {
+        const modifiedArr1 = arr1[0] === 'none' ? arr1.slice(1) : arr1;
+        const modifiedArr2 = arr2[0] === 'none' ? arr2.slice(1) : arr2;
+        if (modifiedArr1.length !== modifiedArr2.length) {
+            return false;
+        }
+        const sortedArr1 = [...modifiedArr1].sort();
+        const sortedArr2 = [...modifiedArr2].sort();
+        return sortedArr1.every((value, index) => value === sortedArr2[index]);
+    }
+    iconNamesFromEnum = Object.values(IconEnum);
+    componentDidLoad() {
+        const areIdentical = this.arraysAreIdentical(iconNames, this.iconNamesFromEnum);
+        if (!areIdentical)
+            console.warn('Icons in src/components/ls-icon/icons.ts should be identical to the enum type in src/types/Icon.ts. Please add all icons to the enum type.');
+    }
+    render() {
+        return (h("host", { key: '7dc573913267ee893f933db2d2c52bd73e4ac87b' }, icons
+            ?.filter((icon) => icon.name === this.name)
+            ?.map((icon) => (h("div", { key: icon?.name, class: 'iconContainer', style: {
+                height: `${this.size}px`,
+                width: `${this.size}px`,
+                ...this.customStyle,
+            } }, this.solid ? (h("div", { innerHTML: icon.svgSolid })) : (h("div", { innerHTML: icon.svgOutline })))))));
+    }
+    static get is() { return "ls-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "Icon",
+                    "resolved": "\"expand\" | \"filter\" | \"map\" | \"document\" | \"code\" | \"link\" | \"menu\" | \"table\" | \"stop\" | \"text\" | \"download\" | \"target\" | \"key\" | \"required\" | \"terminal\" | \"scale\" | \"x\" | \"y\" | \"collection\" | \"translate\" | \"signature\" | \"search\" | \"template\" | \"dropdown\" | \"initials\" | \"pause\" | \"play\" | \"mail\" | \"bell\" | \"home\" | \"briefcase\" | \"shield-check\" | \"shield-exclamation\" | \"cog\" | \"check\" | \"cash\" | \"location-marker\" | \"user\" | \"users\" | \"user-group\" | \"office-building\" | \"pencil-alt\" | \"pencil\" | \"eye\" | \"bookmark\" | \"color-swatch\" | \"inbox\" | \"inbox-in\" | \"archive\" | \"clock\" | \"photograph\" | \"tag\" | \"phone\" | \"phone-incoming\" | \"phone-outgoing\" | \"menu-alt-1\" | \"menu-alt-2\" | \"menu-alt-3\" | \"menu-alt-4\" | \"switch-vertical\" | \"switch-horizontal\" | \"plus\" | \"refresh\" | \"question-mark-circle\" | \"exclamation\" | \"cloud-upload\" | \"cloud-download\" | \"chart-pie\" | \"document-download\" | \"document-add\" | \"document-remove\" | \"calender\" | \"globe-alt\" | \"duplicate\" | \"share\" | \"heart\" | \"globe\" | \"volume-up\" | \"volume-off\" | \"adjustments\" | \"mail-open\" | \"document-duplicate\" | \"credit-card\" | \"lock-closed\" | \"trending-up\" | \"trending-down\" | \"camera\" | \"at-symbol\" | \"trash\" | \"information-circle\" | \"arrow-up\" | \"arrow-right\" | \"arrow-down\" | \"arrow-left\" | \"arrow-circle-right\" | \"arrow-circle-down\" | \"arrow-circle-left\" | \"arrow-circle-up\" | \"sort-ascending\" | \"sort-descending\" | \"x-circle\" | \"check-circle\" | \"exclamation-circle\" | \"plus-circle\" | \"minus-circle\" | \"user-circle\" | \"zoom-in\" | \"zoom-out\" | \"user-add\" | \"dots-horizontal\" | \"dots-vertical\" | \"upload\" | \"view-list\" | \"view-boards\" | \"paper-clip\" | \"emoji-happy\" | \"emoji-sad\" | \"printer\" | \"currency-dollar\" | \"currency-yen\" | \"currency-euro\" | \"currency-pound\" | \"currency-rupee\" | \"chevron-down\" | \"chevron-right\" | \"chevron-up\" | \"chevron-left\" | \"selector\" | \"chat\" | \"receipt-refund\" | \"ticket\" | \"lock-open\" | \"dots-circle-horizontal\" | \"hashtag\" | \"qrcode\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard\" | \"external-link\" | \"sun\" | \"moon\" | \"clipboard-copy\" | \"annotation\" | \"flag\" | \"book-open\" | \"lightning-bolt\" | \"folder\" | \"sparkles\" | \"user-remove\" | \"arrow-narrow-up\" | \"arrow-narrow-right\" | \"arrow-narrow-down\" | \"arrow-narrow-left\" | \"reply\" | \"light-bulb\" | \"chat-alt\" | \"document-report\" | \"logout\" | \"ban\" | \"shopping-cart\" | \"cursor-click\" | \"microphone\" | \"speakerphone\" | \"badge-check\" | \"desktop-computer\" | \"chat-alt-2\" | \"support\" | \"newspaper\" | \"bookmark-alt\" | \"view-grid-add\" | \"library\" | \"star\" | \"chart-square-bar\" | \"eye-off\" | \"chart-bar\" | \"fire\" | \"shopping-bag\" | \"thumb-up\" | \"thumb-down\" | \"hand\" | \"arrows-expand\" | \"view-grid\" | \"puzzle\" | \"folder-download\" | \"folder-add\" | \"folder-remove\" | \"identification\" | \"rss\" | \"scissors\" | \"music-note\" | \"film\" | \"database\" | \"server\" | \"login\" | \"wifi\" | \"backspace\" | \"paper-airplane\" | \"device-mobile\" | \"device-tablet\" | \"chevron-double-right\" | \"chevron-double-down\" | \"chevron-double-left\" | \"chevron-double-up\" | \"finger-print\" | \"cube\" | \"folder-open\" | \"save\" | \"save-as\" | \"document-text\" | \"calculator\" | \"beaker\" | \"gift\" | \"truck\" | \"currency-bangladeshi\" | \"video-camera\" | \"cloud\" | \"cube-transparent\" | \"cake\" | \"phone-missed-call\" | \"plus-sm\" | \"minus-sm\" | \"receipt-tax\" | \"status-online\" | \"status-offline\" | \"presentation-chart-line\" | \"presentation-chart-bar\" | \"fast-forward\" | \"rewind\" | \"chip\" | \"academic-cap\" | \"variable\" | \"document-search\" | \"search-circle\" | \"minus\" | \"arrow-sm-up\" | \"arrow-sm-right\" | \"arrow-sm-down\" | \"arrow-sm-left\" | \"base-circle\" | \"drag-vertical\" | \"menu-alt-5\" | \"text-size\" | \"pin\" | \"keyboard\" | \"move-vertical\" | \"move-horizontal\" | \"rotate-left\" | \"rotate-right\" | \"undo\" | \"redo\" | \"drag-horizontal\" | \"side-panel-close-left\" | \"side-panel-close-right\" | \"side-panel-open-left\" | \"side-panel-open-right\" | \"contacts\" | \"arrow-up-link-out\" | \"device-lock\" | \"auto-date\" | \"revert\" | \"guides\" | \"bulk-send\" | \"field-alignment-left\" | \"field-alignment-centre\" | \"field-alignment-right\" | \"accessibility\" | \"arrows-minimise\" | \"document-info\" | \"document-import-fields\" | \"document-merge-alt2\" | \"document-combine\" | \"field-alignment-top\" | \"field-alignment-middle\" | \"field-alignment-bottom\" | \"box-empty\" | \"box-ticked\" | \"box-crossed\" | \"sort-alphabetically-a-z\" | \"sort-alphabetically-z-a\" | \"linked-document\" | \"document-replace\" | \"field-scale\" | \"field-match-width\" | \"field-match-height\" | \"recipient-link\" | \"recipient-link-broken\" | \"witness-arrow\" | \"branch\" | \"variant\" | \"recipient-details-card\" | \"recipient-details\" | \"field-distribute-vertically\" | \"field-distribute-horizontally\" | \"field-duplicate\" | \"pre-filled-content\" | \"typing-input\" | \"table-split\" | \"add-column-left\" | \"add-column-right\" | \"recipient-links\" | \"list-order\" | \"field-scaling-off\" | \"fit-width\" | \"fit-height\" | \"table-quick-edit\" | \"table-columns\" | \"table-rows\" | \"apply-all-rows\" | \"pagescroll-preview\" | \"page-insert-vertical\" | \"page-insert-horizontal\" | \"circle-quarter\" | \"circle-half\" | \"circle-three-quarter\" | \"time-sort-ascending\" | \"time-sort-descending\" | \"date-sort-ascending\" | \"date-sort-descending\" | \"side-panel-closed\" | \"side-panel-open\" | \"date-sent-sort-ascending\" | \"date-sent-sort-descending\" | \"sort-alphabetically-a-z-alt\" | \"sort-alphabetically-z-a-alt\" | \"template-sent\" | \"template-not-sent\" | \"grid\" | \"linked\" | \"link-broken\" | \"user-assign\" | \"x-letter\" | \"field-selected\" | \"designation\" | \"text-alignment\" | \"field-placement\" | \"typeface\" | \"page-layout\" | \"field-special\" | \"link-value\" | \"field-order\" | \"send-arrow\" | \"sent-progress\" | \"circle-filled-quarter\" | \"circle-filled-half\" | \"circle-filled-three-quarter\" | \"document-viewed\" | \"collapse\" | \"logo\"",
+                    "references": {
+                        "Icon": {
+                            "location": "import",
+                            "path": "../../types/Icon",
+                            "id": "src/types/Icon.ts::Icon"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "solid": {
+                "type": "boolean",
+                "attribute": "solid",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"20\""
+            },
+            "customStyle": {
+                "type": "unknown",
+                "attribute": "custom-style",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string }",
+                    "resolved": "{ [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=ls-icon.js.map

package/dist/collection/components/ls-icon/ls-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-icon.js","sourceRoot":"","sources":["../../../src/components/ls-icon/ls-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAQ,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAM7D,MAAM,OAAO,MAAM;IACT,IAAI,CAAQ;IACZ,KAAK,GAAa,KAAK,CAAC;IACxB,IAAI,GAAY,IAAI,CAAC;IACrB,WAAW,CAA6B;IAEhD,2FAA2F;IACnF,kBAAkB,CAAC,IAAc,EAAE,IAAc;QACvD,MAAM,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC/D,MAAM,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAE/D,IAAI,YAAY,CAAC,MAAM,KAAK,YAAY,CAAC,MAAM,EAAE,CAAC;YAChD,OAAO,KAAK,CAAC;QACf,CAAC;QACD,MAAM,UAAU,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC;QAC5C,MAAM,UAAU,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC;QAE5C,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;IACzE,CAAC;IACD,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC5C,gBAAgB;QACd,MAAM,YAAY,GAAG,IAAI,CAAC,kBAAkB,CAC1C,SAAS,EACT,IAAI,CAAC,iBAAiB,CACvB,CAAC;QACF,IAAI,CAAC,YAAY;YACf,OAAO,CAAC,IAAI,CACV,4IAA4I,CAC7I,CAAC;IACN,CAAC;IAED,MAAM;QACJ,OAAO,CACL,+DACG,KAAK;YACJ,EAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC;YAC3C,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,WACE,GAAG,EAAE,IAAI,EAAE,IAAI,EACf,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;gBACL,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;gBACxB,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;gBACvB,GAAG,IAAI,CAAC,WAAW;aACpB,IAEA,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,WAAK,SAAS,EAAE,IAAI,CAAC,QAAQ,GAAI,CAClC,CAAC,CAAC,CAAC,CACF,WAAK,SAAS,EAAE,IAAI,CAAC,UAAU,GAAI,CACpC,CACG,CACP,CAAC,CACC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { icons } from './icons';\nimport { Icon, IconEnum, iconNames } from '../../types/Icon';\n\n@Component({\n  tag: 'ls-icon',\n  shadow: true,\n})\nexport class LsIcon {\n  @Prop() name?: Icon;\n  @Prop() solid?: boolean = false;\n  @Prop() size?: string = \"20\";\n  @Prop() customStyle?: { [key: string]: string };\n\n  // Added function to check that the Icon enum type has all the icons from the icons.ts file\n  private arraysAreIdentical(arr1: string[], arr2: string[]): boolean {\n    const modifiedArr1 = arr1[0] === 'none' ? arr1.slice(1) : arr1;\n    const modifiedArr2 = arr2[0] === 'none' ? arr2.slice(1) : arr2;\n\n    if (modifiedArr1.length !== modifiedArr2.length) {\n      return false;\n    }\n    const sortedArr1 = [...modifiedArr1].sort();\n    const sortedArr2 = [...modifiedArr2].sort();\n\n    return sortedArr1.every((value, index) => value === sortedArr2[index]);\n  }\n  iconNamesFromEnum = Object.values(IconEnum);\n  componentDidLoad() {\n    const areIdentical = this.arraysAreIdentical(\n      iconNames,\n      this.iconNamesFromEnum,\n    );\n    if (!areIdentical)\n      console.warn(\n        'Icons in src/components/ls-icon/icons.ts should be identical to the enum type in src/types/Icon.ts. Please add all icons to the enum type.',\n      );\n  }\n\n  render() {\n    return (\n      <host>\n        {icons\n          ?.filter((icon) => icon.name === this.name)\n          ?.map((icon) => (\n            <div\n              key={icon?.name}\n              class='iconContainer'\n              style={{\n                height: `${this.size}px`,\n                width: `${this.size}px`,\n                ...this.customStyle,\n              }}\n            >\n              {this.solid ? (\n                <div innerHTML={icon.svgSolid} />\n              ) : (\n                <div innerHTML={icon.svgOutline} />\n              )}\n            </div>\n          ))}\n      </host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-participant-manager/ls-participant-manager.css

@@ -0,0 +1,54 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid black
+}
+
+.label-span {
+  position: absolute;
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  line-height: 1rem;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+h1 {
+  font-size: 19px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.card {
+  display: flex;
+  padding-right: 4px;
+  padding-left: 4px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  margin: 4px;
+  border-radius: 0.55rem;
+  gap: 4px;
+  border: 0;
+}
+
+.innerButton {
+  margin: 0px;
+  padding: 0px;
+  background-color: transparent;
+  border: none;
+
+}
+
+.titleButton {
+  width: 100%;
+  text-align: left;
+  background-color: transparent;
+  border: none;
+
+}
+

package/dist/collection/components/ls-participant-manager/ls-participant-manager.js

@@ -0,0 +1,155 @@
+import { Host, h } from "@stencil/core";
+export class LsParticipantManager {
+    /**
+   * The base template information (as JSON).
+   * {LSDocumentViewer}
+   */
+    editor;
+    /**
+     * The base template information (as JSON).
+     * {LSApiTemplate}
+     */
+    template;
+    mutate;
+    update;
+    selectedHandler(_role) {
+        //console.log(role, 'participant manager')
+    }
+    deleteHandler(role) {
+        this.update.emit([{ action: 'delete', data: role }]);
+    }
+    swapHandler(role1, role2) {
+        this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);
+    }
+    createHandler() {
+        this.update.emit([{
+                action: 'create', data: {
+                    id: btoa('rol' + crypto.randomUUID()),
+                    name: 'Signer ' + this.template.roles.length,
+                    roleType: 'SIGNER',
+                    signerIndex: 1,
+                    ordinal: this.template.roles.length,
+                    signerParent: null,
+                    experience: ''
+                }
+            }]);
+    }
+    render() {
+        return (h(Host, { key: 'ed728f73ef8a9197e547149d4c5cd35b2112f920' }, h("h1", { key: 'c23f0fa76c2b945c8cd3c1caab2494f80c6a446b' }, "Participants"), this.template?.roles.map((r, index) => {
+            return h("div", { class: "card", style: {
+                    backgroundColor: this.editor.roleColors[index].faded,
+                    border: "1px solid " + this.editor.roleColors[index].primary
+                } }, h("button", { class: "titleButton", onClick: () => { this.selectedHandler(r); } }, r?.name || 'Signer ' + index), h("button", { class: "innerButton", onClick: () => { this.deleteHandler(r); } }, h("ls-icon", { name: "trash", size: "18" })), index !== 0 ? h("button", { class: "innerButton", onClick: () => { this.swapHandler(r, this.template.roles[index - 1]); } }, h("ls-icon", { name: "arrow-up", size: "18" })) : h(h.Fragment, null), index < this.template.roles.length - 1 ? h("button", { class: "innerButton", onClick: () => { this.swapHandler(r, this.template.roles[index + 1]); } }, h("ls-icon", { name: "arrow-down", size: "18" })) : h(h.Fragment, null));
+        }), h("button", { key: '828789c30c2fb340a7bf02c4f275e1ae5f09ca07', onClick: () => this.createHandler() }, "Add Participant"), h("slot", { key: '5624d9c4cf3dd1d38cda2d9239cbde5a611e4258' })));
+    }
+    static get is() { return "ls-participant-manager"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-participant-manager.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-participant-manager.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "editor": {
+                "type": "unknown",
+                "attribute": "editor",
+                "mutable": false,
+                "complexType": {
+                    "original": "LsDocumentViewer",
+                    "resolved": "LsDocumentViewer",
+                    "references": {
+                        "LsDocumentViewer": {
+                            "location": "import",
+                            "path": "../ls-document-viewer/ls-document-viewer",
+                            "id": "src/components/ls-document-viewer/ls-document-viewer.tsx::LsDocumentViewer"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The base template information (as JSON).\n{LSDocumentViewer}"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "template": {
+                "type": "unknown",
+                "attribute": "template",
+                "mutable": false,
+                "complexType": {
+                    "original": "LSApiTemplate",
+                    "resolved": "{ id: string; title: string; pageCount: number; fileName: string; link: string; autoArchive: boolean; valid: boolean; locked: boolean; tags: string[]; groupId: string; roles: LSApiRole[]; canOpenSign: boolean; directLinks: []; elementConnection: { templateElements: LSApiElement[]; totalCount: number; }; elements: LSApiElement[]; createdBy: string; created: Date; modified: Date; lastSent: Date; pageDimensionArray: [number, number][]; pageDimensions: string; fixSignatureScale?: boolean; }",
+                    "references": {
+                        "LSApiTemplate": {
+                            "location": "import",
+                            "path": "../../types/LSApiTemplate",
+                            "id": "src/types/LSApiTemplate.ts::LSApiTemplate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The base template information (as JSON).\n{LSApiTemplate}"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mutate",
+                "name": "mutate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSMutateEvent[]",
+                    "resolved": "LSMutateEvent[]",
+                    "references": {
+                        "LSMutateEvent": {
+                            "location": "import",
+                            "path": "../../types/LSMutateEvent",
+                            "id": "src/types/LSMutateEvent.ts::LSMutateEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "update",
+                "name": "update",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSMutateEvent[]",
+                    "resolved": "LSMutateEvent[]",
+                    "references": {
+                        "LSMutateEvent": {
+                            "location": "import",
+                            "path": "../../types/LSMutateEvent",
+                            "id": "src/types/LSMutateEvent.ts::LSMutateEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=ls-participant-manager.js.map

package/dist/collection/components/ls-participant-manager/ls-participant-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-participant-manager.js","sourceRoot":"","sources":["../../../src/components/ls-participant-manager/ls-participant-manager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { LSApiRole } from '../../types/LSApiRole';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\n\n@Component({\n  tag: 'ls-participant-manager',\n  styleUrl: 'ls-participant-manager.css',\n  shadow: true,\n})\n\nexport class LsParticipantManager {\n\n  /**\n * The base template information (as JSON).\n * {LSDocumentViewer}\n */\n  @Prop() editor: LsDocumentViewer;\n\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() template: LSApiTemplate;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) update: EventEmitter<LSMutateEvent[]>;\n\n  selectedHandler(_role) {\n    //console.log(role, 'participant manager')\n  }\n\n  deleteHandler(role: LSApiRole) {\n    this.update.emit([{ action: 'delete', data: role }])\n  }\n\n  swapHandler(role1, role2) {\n    this.update.emit([{ action: 'swap', data: role1, data2: role2 }])\n  }\n  createHandler() {\n    this.update.emit([{\n      action: 'create', data: {\n        id: btoa('rol' + crypto.randomUUID()),\n        name: 'Signer ' + this.template.roles.length,\n        roleType: 'SIGNER',\n        signerIndex: 1,\n        ordinal: this.template.roles.length,\n        signerParent: null,\n        experience: ''\n      }\n    }])\n  }\n\n  render() {\n    return (\n      <Host>\n        <h1>Participants</h1>\n        {this.template?.roles.map((r, index) => {\n          return <div class=\"card\" style={{\n            backgroundColor: this.editor.roleColors[index].faded,\n            border: \"1px solid \" + this.editor.roleColors[index].primary\n          }}>\n            <button class=\"titleButton\" onClick={() => { this.selectedHandler(r) }}>{r?.name || 'Signer ' + index}</button>\n            <button class=\"innerButton\" onClick={() => { this.deleteHandler(r) }}><ls-icon name=\"trash\" size=\"18\" /></button>\n            {index !== 0 ? <button class=\"innerButton\" onClick={() => { this.swapHandler(r, this.template.roles[index - 1]) }}><ls-icon name=\"arrow-up\" size=\"18\" /></button> : <></>}\n            {index < this.template.roles.length - 1 ? <button class=\"innerButton\" onClick={() => { this.swapHandler(r, this.template.roles[index + 1]) }}><ls-icon name=\"arrow-down\" size=\"18\" /></button> : <></>}\n          </div>\n        })}\n        <button onClick={() => this.createHandler()}>Add Participant</button>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-participant-select/ls-participant-select.css

@@ -0,0 +1,3 @@
+:host {
+  display: inline-block;
+}

package/dist/collection/components/ls-participant-select/ls-participant-select.js

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class LsParticipantSelect {
+    render() {
+        return (h(Host, { key: '796b001b3ec0d4d5f421a53e6c3243afda1be102' }, h("select", { key: '0eaa4fa7739944099215669fa6b07539e7a436f2' }, h("option", { key: '700196dfeaafd44e89ea698d31b6e9cfc8e164e7', value: "0" }, "Sender"), h("option", { key: '472aa6a843fd8531287e5b52bb26ff841ef81fed', value: "1" }, "Signer 1")), h("slot", { key: 'd9abfba2bb54dfb8876acea407818a678916b922' })));
+    }
+    static get is() { return "ls-participant-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-participant-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-participant-select.css"]
+        };
+    }
+}
+//# sourceMappingURL=ls-participant-select.js.map

package/dist/collection/components/ls-participant-select/ls-participant-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-participant-select.js","sourceRoot":"","sources":["../../../src/components/ls-participant-select/ls-participant-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,mBAAmB;IAC9B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH;gBACE,+DAAQ,KAAK,EAAC,GAAG,aAAgB;gBACjC,+DAAQ,KAAK,EAAC,GAAG,eAAkB,CAC5B;YACT,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-participant-select',\n  styleUrl: 'ls-participant-select.css',\n  shadow: true,\n})\nexport class LsParticipantSelect {\n  render() {\n    return (\n      <Host>\n        <select>\n          <option value=\"0\">Sender</option>\n          <option value=\"1\">Signer 1</option>\n        </select>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-statusbar/ls-statusbar.css

@@ -0,0 +1,14 @@
+:host {
+  display: flex;
+  flex-direction: row;
+  bottom: 0px;
+  height: 47px;
+  min-height: 47px;
+  width: 100%;
+  background-color: rgb(205, 205, 205);
+  border-top: 2px outset rgb(208, 208, 208);
+}
+
+button {
+  border: 0;
+}

package/dist/collection/components/ls-statusbar/ls-statusbar.js

@@ -0,0 +1,99 @@
+import { Host, h } from "@stencil/core";
+import { debounce } from "../ls-document-viewer/editorUtils";
+export class LsStatusbar {
+    component;
+    /**
+  * The zoom or scale level 100 === 100%.
+  * {number}
+  */
+    zoom;
+    /**
+  * The parent editor control.
+  * {LsDocumentViewer}
+  */
+    editor;
+    setZoom(value) {
+        this.editor.setZoom(value);
+        this.zoom = value;
+    }
+    handleZoomInput() {
+        const zoomInput = this.component.shadowRoot.getElementById("zoomRange");
+        console.log(Math.floor(parseInt(zoomInput.value) / 100));
+        debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700);
+    }
+    fitWidth() {
+        const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');
+        this.setZoom(frame.clientWidth / this.editor.pageDimensions[0].width);
+    }
+    fitHeight() {
+        const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');
+        this.setZoom(frame.clientHeight / this.editor.pageDimensions[0].height);
+    }
+    componentDidLoad() {
+        this.zoom = this.editor.zoom;
+    }
+    render() {
+        return (h(Host, { key: 'b95446e09483c187ae18323659cb15fbaa556628' }, h("button", { key: '6619aae12a619b9839ca8d0869024bba1d30437a', onClick: () => this.editor.displayTable = true }, h("ls-icon", { key: '43d64cc63e88fac42eaf8a0a17ea4c15ca7e15cb', name: "table" })), h("button", { key: '76913cf3cab4a47c3e72df2bc927c9e2112247cd', onClick: () => this.editor.displayTable = false }, h("ls-icon", { key: '0ba35b608484dc842bbc76c83af8d1b017f61adc', name: "template" })), h("button", { key: '85cf6a4497bef5bc9757836788931e2c52da3462', onClick: () => this.fitWidth() }, h("ls-icon", { key: '410104a377ae387b5cd70a08b92073c2eb3cbe46', name: "fit-width" })), h("button", { key: '9095791508b75cd8604e2f2a154ac74d3a5fac63', onClick: () => this.fitHeight() }, h("ls-icon", { key: 'edae7ec77d581ed7c7091718aab021c81c826da5', name: "fit-height" })), h("button", { key: '9f61c8f22845ba438ca24e34c5750ad5911c9e6d', onClick: () => { this.editor.pagePrev(); } }, h("ls-icon", { key: '51742295b1b81900cad284e31a2cd7211da1cb48', name: "arrow-left" })), h("button", { key: '92b8b0f942b0922beb018f30b4591df96a0886ec', onClick: () => { this.editor.pageNext(); } }, h("ls-icon", { key: '19314267df935920db7f9281d3e5b9a36fd7f439', name: "arrow-right" })), h("button", { key: '3c375b0d1d1dcaed55ded87c606e6e3abfba8834', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: '88c4ee79ba4b8f082d273b72f7be14d0f3526845', name: "zoom-out" })), h("div", { key: '7e264fd6daa06f546c7bb19b3f34caa570705899' }, h("input", { key: '95392f84583a468376f28b80e39fabef7f527008', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: '791824a0052eb32f3152ba1202add301abbd1312', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: '889fb5b382d8c328ba9f583b913477df3d172104', name: "zoom-in" })), h("slot", { key: '3e45fac107893f17c0f3e6e18757173577c5afe5' })));
+    }
+    static get is() { return "ls-statusbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-statusbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-statusbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "zoom": {
+                "type": "number",
+                "attribute": "zoom",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The zoom or scale level 100 === 100%.\n{number}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "editor": {
+                "type": "unknown",
+                "attribute": "editor",
+                "mutable": false,
+                "complexType": {
+                    "original": "LsDocumentViewer",
+                    "resolved": "LsDocumentViewer",
+                    "references": {
+                        "LsDocumentViewer": {
+                            "location": "import",
+                            "path": "../ls-document-viewer/ls-document-viewer",
+                            "id": "src/components/ls-document-viewer/ls-document-viewer.tsx::LsDocumentViewer"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The parent editor control.\n{LsDocumentViewer}"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get elementRef() { return "component"; }
+}
+//# sourceMappingURL=ls-statusbar.js.map

package/dist/collection/components/ls-statusbar/ls-statusbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-statusbar.js","sourceRoot":"","sources":["../../../src/components/ls-statusbar/ls-statusbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { debounce } from '../ls-document-viewer/editorUtils';\n\n@Component({\n  tag: 'ls-statusbar',\n  styleUrl: 'ls-statusbar.css',\n  shadow: true,\n})\nexport class LsStatusbar {\n  @Element() component: HTMLElement;\n  /**\n* The zoom or scale level 100 === 100%.\n* {number}\n*/\n  @Prop({ mutable: true }) zoom: number\n\n  /**\n* The parent editor control.\n* {LsDocumentViewer}\n*/\n  @Prop() editor: LsDocumentViewer;\n\n  setZoom(value: number) {\n    this.editor.setZoom(value)\n    this.zoom = value\n  }\n\n  handleZoomInput() {\n    const zoomInput = this.component.shadowRoot.getElementById(\"zoomRange\") as HTMLInputElement\n    console.log(Math.floor(parseInt(zoomInput.value) / 100))\n    debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700)\n\n  }\n\n  fitWidth() {\n    const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame')\n    this.setZoom(frame.clientWidth / this.editor.pageDimensions[0].width)\n  }\n\n\n  fitHeight() {\n    const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame')\n    this.setZoom(frame.clientHeight / this.editor.pageDimensions[0].height)\n  }\n\n  componentDidLoad() {\n    this.zoom = this.editor.zoom\n  }\n\n  render() {\n    return (\n      <Host>\n\n        <button onClick={() => this.editor.displayTable = true}><ls-icon name=\"table\" /></button>\n        <button onClick={() => this.editor.displayTable = false}><ls-icon name=\"template\" /></button>\n\n\n        <button onClick={() => this.fitWidth()}><ls-icon name=\"fit-width\" /></button>\n        <button onClick={() => this.fitHeight()}><ls-icon name=\"fit-height\" /></button>\n        <button onClick={() => { this.editor.pagePrev() }}><ls-icon name=\"arrow-left\" /></button>\n        <button onClick={() => { this.editor.pageNext() }}><ls-icon name=\"arrow-right\" /></button>\n\n\n        <button onClick={() => this.setZoom(this.editor.zoom * 0.8)}><ls-icon name=\"zoom-out\" /></button>\n        <div><input type=\"range\" min=\"1\" max=\"300\" value={this.zoom * 100} class=\"slider\" id=\"zoomRange\" onInput={() => this.handleZoomInput()} /></div>\n        <button onClick={() => this.setZoom(this.editor.zoom / 0.8)}><ls-icon name=\"zoom-in\" /></button>\n\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-toolbar/ls-toolbar.css

@@ -0,0 +1,13 @@
+:host {
+  display: flex;
+  flex-direction: row;
+  height: 32px;
+  width: 100%;
+  background-color: rgb(205, 205, 205);
+}
+
+.rowbox {
+  display: flex;
+  flex-direction: row;
+    vertical-align: middle;
+}