legalesign-document-viewer 0.3.5 → 0.3.7

package/dist/collection/components/ls-editor-field/ls-editor-field.css

@@ -0,0 +1,80 @@
+:host {
+  display: block;
+  position: absolute;
+  margin: 0px;
+  padding: 0px 0px 0px 0px;
+  isolation: isolate;
+}
+
+.ls-editor-field-editable {
+  display: block;
+  font-family: inherit;
+  font-size: inherit;
+  overflow: hidden;
+
+  /* no extra spaces */
+  white-space: nowrap;
+  margin: 0;
+  padding: 0px 0px 0px 0px;
+  /* default widths */
+  min-width: 2em;
+  height: 100%;
+  width: 100%;
+}
+
+.ls-editor-field {
+  opacity: 0.7;
+}
+
+.ls-editor-field-editable:focus {
+  outline: none;
+}
+
+.ls-editor-field-draggable {
+  display: block;
+  font-family: inherit;
+  font-size: inherit;
+  overflow: hidden;
+
+  /* no extra spaces */
+  white-space: nowrap;
+
+  /* default widths */
+  min-width: 2px;
+  height: 98%;
+  width: 98%;
+}
+
+/* .is-selected {
+    border: 1px dotted rgb(193, 26, 26);
+} */
+
+.hidden-field {
+  display: none;
+}
+
+input {
+  all: unset;
+}
+
+.draggable-input {
+  font-family: inherit;
+  font-size: inherit;
+  position: relative;
+  height: 95%;
+  width: 95%;
+}
+
+.editing-input {
+  caret-color: rgb(15 23 42);
+  caret-shape: auto;
+  height: 100%;
+  width: 100%;
+}
+
+.required-icon {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  color: var(--red-60, #f64a44);
+}

package/dist/collection/components/ls-editor-field/ls-editor-field.js

@@ -0,0 +1,334 @@
+import { Host, h } from "@stencil/core";
+import { getInputType } from "../ls-document-viewer/editorUtils";
+import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
+export class LsEditorField {
+    component;
+    dataItem;
+    selected = false;
+    readonly;
+    type;
+    page;
+    isEditing = false;
+    heldEdge = null;
+    isEdgeDragging = false;
+    innerValue;
+    sizeObserver;
+    mutate;
+    update;
+    handleInput(e) {
+        if (e.code === 'Enter') {
+            this.isEditing = false;
+            this.sizeObserver.observe(this.component.shadowRoot.getElementById('field-info'));
+        }
+    }
+    handleMouseMove(e) {
+        if (this.readonly)
+            return;
+        if (!e.clientX)
+            return;
+        // Determine which edge is being moved over and what cursor to show.
+        if (Math.abs(e.offsetX) < 5) {
+            this.component.style.cursor = 'ew-resize';
+        }
+        else if (Math.abs(e.offsetX - this.component.clientWidth) < 5) {
+            this.component.style.cursor = 'ew-resize';
+        }
+        else if (Math.abs(e.offsetY) < 5) {
+            this.component.style.cursor = 'ns-resize';
+        }
+        else if (Math.abs(e.offsetY - this.component.clientHeight) < 5) {
+            this.component.style.cursor = 'ns-resize';
+        }
+        else {
+            this.component.style.cursor = 'move';
+        }
+    }
+    handleDoubleClick() {
+        if (this.readonly)
+            return;
+        this.isEditing = true;
+        this.heldEdge = null;
+        this.isEdgeDragging = false;
+        this.sizeObserver.disconnect();
+        this.innerValue = this.innerValue ? this.innerValue : this.dataItem?.value;
+        const editbox = this.component.shadowRoot.getElementById('editing-input');
+        console.log(this.dataItem);
+        if (editbox) {
+            editbox.className = 'ls-editor-field-editable';
+            editbox.focus();
+        }
+    }
+    handleDragStart(event) {
+        // Add the target element's id to the data transfer object
+        event.dataTransfer.setData('application/json', JSON.stringify({
+            type: this.type,
+        }));
+        event.dataTransfer.dropEffect = 'move';
+    }
+    watchSelectedHandler(_newValue, _oldValue) {
+        if (_newValue) {
+            this.component.style.background = defaultRolePalette[this.dataItem?.signer % 100].s20;
+            this.component.style.opacity = '0.7';
+            this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
+        }
+        else {
+            this.component.style.background = '#ffffff';
+            this.component.style.opacity = '0.7';
+            this.component.style.boxShadow = 'none';
+        }
+    }
+    componentDidLoad() {
+        this.sizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                if (entry.contentRect) {
+                    //          const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLElement;
+                    const movebox = this.component.shadowRoot.getElementById('field-info');
+                    // console.log(editbox)
+                    // editbox.style.height = entry.contentRect.height + "px"
+                    // editbox.style.width = entry.contentRect.width + "px"
+                    movebox.style.height = entry.contentRect.height + 'px';
+                    movebox.style.width = entry.contentRect.width + 'px';
+                }
+            }
+        });
+        this.sizeObserver.observe(this.component);
+        // New dropped components automatically need selecting.
+        if (this.selected) {
+            this.component.style.background = defaultRolePalette[this.dataItem?.signer % 100].s20;
+            this.component.style.opacity = '0.7';
+            this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
+        }
+        else {
+            this.component.style.background = '#ffffff';
+            this.component.style.opacity = '0.7';
+            this.component.style.boxShadow = 'none';
+        }
+    }
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    // NOTE this alter is debounced to account for typing
+    alter(diff) {
+        this.dataItem = { ...this.dataItem, ...diff };
+        this.debounce(this.dataItem, 900);
+    }
+    labeltimer;
+    debounce(data, delay) {
+        if (this.labeltimer)
+            clearTimeout(this.labeltimer);
+        this.labeltimer = setTimeout(() => {
+            const diffs = [{ action: 'update', data }];
+            this.mutate.emit(diffs);
+            this.update.emit(diffs);
+        }, delay);
+    }
+    render() {
+        return (h(Host, { key: '3ad1a3a7480b3fc1394db18a60acc7af63f7df98', style: { border: `2px ${defaultRolePalette[this.dataItem?.signer % 100].s60} solid` } }, h("div", { key: '16fe59242c50fd50bb96d65c6b3ffa2fa47c5e54', class: {
+                'ls-editor-field': true,
+                'is-selected': this.selected,
+            } }, !this.dataItem?.optional && h("ls-icon", { key: '47c188b577ab99a83b9d84b5401a20a51865f10a', name: "required", size: "12", class: "required-icon", customStyle: { verticalAlign: 'top' } }), h("input", { key: 'ffc948a18ace160ce07f8400ee5cf49b33062b00', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value, checked: this.dataItem?.value ? true : false, onInput: e => this.alter({ value: e.target.value }) }), h("div", { key: '1d0bec72edda583a92fff8d23c8a57c0c2433347', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.dataItem.value.length && this.dataItem.value || this.dataItem?.label || this.dataItem?.formElementType))));
+    }
+    static get is() { return "ls-editor-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-editor-field.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-editor-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dataItem": {
+                "type": "unknown",
+                "attribute": "data-item",
+                "mutable": true,
+                "complexType": {
+                    "original": "LSApiElement",
+                    "resolved": "{ id: string; align: string; ax?: number; ay?: number; bx?: number; by?: number; left?: number; top?: number; height?: number; width?: number; elementType: string; fieldOrder?: number; fontName: string; fontSize: number; hideBorder?: boolean; label?: string; labelExtra?: string; helpText?: string; optional?: boolean; options?: string; page?: number; role?: LSApiRole; substantive?: boolean; validation?: number; value?: string; logicGroup?: string; logicAction?: number; mapTo?: string; signer: number; link?: string; formElementType?: \"number\" | \"image\" | \"text\" | \"signature\" | \"date\" | \"regex\" | \"file\" | \"autodate\" | \"autosign\" | \"initials\" | \"email\" | \"checkbox\" | \"dropdown\"; roleObject?: LSApiRole; cstyle?: any; divStyle?: any; objectHeight?: string; pageDimensions?: { height: number; width: number; }; templateId?: string; }",
+                    "references": {
+                        "LSApiElement": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::LSApiElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "selected": {
+                "type": "boolean",
+                "attribute": "selected",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'signature' | 'date' | 'regex' | 'file' | 'number' | 'autodate'",
+                    "resolved": "\"autodate\" | \"date\" | \"file\" | \"number\" | \"regex\" | \"signature\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "page": {
+                "type": "unknown",
+                "attribute": "page",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ height: number; width: number }",
+                    "resolved": "{ height: number; width: number; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isEditing": {},
+            "heldEdge": {},
+            "isEdgeDragging": {},
+            "innerValue": {}
+        };
+    }
+    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"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "component"; }
+    static get watchers() {
+        return [{
+                "propName": "selected",
+                "methodName": "watchSelectedHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleInput",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "mousemove",
+                "method": "handleMouseMove",
+                "target": undefined,
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "dblclick",
+                "method": "handleDoubleClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "dragstart",
+                "method": "handleDragStart",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=ls-editor-field.js.map

package/dist/collection/components/ls-editor-field/ls-editor-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-editor-field.js","sourceRoot":"","sources":["../../../src/components/ls-editor-field/ls-editor-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, State, Prop, Watch, Listen, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { getInputType } from '../ls-document-viewer/editorUtils';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-editor-field',\n  styleUrl: 'ls-editor-field.css',\n  shadow: true,\n})\nexport class LsEditorField {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true }) dataItem: LSApiElement;\n  @Prop() selected: boolean = false;\n  @Prop() readonly: boolean;\n  @Prop() type: 'text' | 'signature' | 'date' | 'regex' | 'file' | 'number' | 'autodate';\n  @Prop() page: { height: number; width: number };\n  @State() isEditing: boolean = false;\n  @State() heldEdge: string = null;\n  @State() isEdgeDragging: boolean = false;\n  @State() innerValue: string;\n  private sizeObserver: ResizeObserver;\n\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  @Listen('keydown')\n  handleInput(e: KeyboardEvent) {\n    if (e.code === 'Enter') {\n      this.isEditing = false;\n      this.sizeObserver.observe(this.component.shadowRoot.getElementById('field-info'));\n    }\n  }\n\n  @Listen('mousemove', { capture: true })\n  handleMouseMove(e) {\n    if (this.readonly) return;\n    if (!e.clientX) return;\n\n    // Determine which edge is being moved over and what cursor to show.\n    if (Math.abs(e.offsetX) < 5) {\n      this.component.style.cursor = 'ew-resize';\n    } else if (Math.abs(e.offsetX - this.component.clientWidth) < 5) {\n      this.component.style.cursor = 'ew-resize';\n    } else if (Math.abs(e.offsetY) < 5) {\n      this.component.style.cursor = 'ns-resize';\n    } else if (Math.abs(e.offsetY - this.component.clientHeight) < 5) {\n      this.component.style.cursor = 'ns-resize';\n    } else {\n      this.component.style.cursor = 'move';\n    }\n  }\n\n  @Listen('dblclick', { capture: true })\n  handleDoubleClick() {\n    if (this.readonly) return;\n    this.isEditing = true;\n    this.heldEdge = null;\n    this.isEdgeDragging = false;\n    this.sizeObserver.disconnect();\n    this.innerValue = this.innerValue ? this.innerValue : this.dataItem?.value;\n\n    const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLInputElement;\n    console.log(this.dataItem);\n\n    if (editbox) {\n      editbox.className = 'ls-editor-field-editable';\n      editbox.focus();\n    }\n  }\n\n  @Listen('dragstart', { capture: false, passive: false })\n  handleDragStart(event) {\n    // Add the target element's id to the data transfer object\n    event.dataTransfer.setData(\n      'application/json',\n      JSON.stringify({\n        type: this.type,\n      }),\n    );\n    event.dataTransfer.dropEffect = 'move';\n  }\n\n  @Watch('selected')\n  watchSelectedHandler(_newValue: boolean, _oldValue: boolean) {\n    if (_newValue) {\n      this.component.style.background = defaultRolePalette[this.dataItem?.signer % 100].s20;\n      this.component.style.opacity = '0.7';\n      this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';\n    } else {\n      this.component.style.background = '#ffffff';\n      this.component.style.opacity = '0.7';\n      this.component.style.boxShadow = 'none';\n    }\n  }\n\n  componentDidLoad() {\n    this.sizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        if (entry.contentRect) {\n          //          const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLElement;\n          const movebox = this.component.shadowRoot.getElementById('field-info') as HTMLElement;\n          // console.log(editbox)\n          // editbox.style.height = entry.contentRect.height + \"px\"\n          // editbox.style.width = entry.contentRect.width + \"px\"\n\n          movebox.style.height = entry.contentRect.height + 'px';\n          movebox.style.width = entry.contentRect.width + 'px';\n        }\n      }\n    });\n\n    this.sizeObserver.observe(this.component);\n\n    // New dropped components automatically need selecting.\n    if (this.selected) {\n      this.component.style.background = defaultRolePalette[this.dataItem?.signer % 100].s20;\n      this.component.style.opacity = '0.7';\n      this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';\n    } else {\n      this.component.style.background = '#ffffff';\n      this.component.style.opacity = '0.7';\n      this.component.style.boxShadow = 'none';\n    }\n  }\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object) {\n    this.dataItem = { ...this.dataItem, ...diff };\n    this.debounce(this.dataItem, 900);\n  }\n\n  private labeltimer;\n\n  debounce(data, delay) {\n    if (this.labeltimer) clearTimeout(this.labeltimer);\n\n    this.labeltimer = setTimeout(() => {\n      const diffs: LSMutateEvent[] = [{ action: 'update', data }];\n      this.mutate.emit(diffs);\n      this.update.emit(diffs);\n    }, delay);\n  }\n\n  render() {\n    return (\n      <Host style={{ border: `2px ${defaultRolePalette[this.dataItem?.signer % 100].s60} solid` }}>\n        <div\n          class={{\n            'ls-editor-field': true,\n            'is-selected': this.selected,\n          }}\n        >\n          {!this.dataItem?.optional && <ls-icon name=\"required\" size=\"12\" class=\"required-icon\" customStyle={{ verticalAlign: 'top'}}/>}\n          <input\n            id=\"editing-input\"\n            class={this.isEditing ? 'ls-editor-field-editable' : 'hidden-field'}\n            type={getInputType(this.dataItem.validation).inputType}\n            value={this.dataItem?.value}\n            checked={this.dataItem?.value ? true : false}\n            onInput={e => this.alter({ value: (e.target as HTMLInputElement).value })}\n          />\n\n          <div id=\"field-info\" class={this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable'}>\n            {this.dataItem.value.length && this.dataItem.value  || this.dataItem?.label || this.dataItem?.formElementType}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-editor-table/ls-editor-table.css

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+  z-index: 100;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+
+table {
+  background-color: azure;
+  border: 1px solid black
+}
+
+td {
+  border: 1px solid black
+}

package/dist/collection/components/ls-editor-table/ls-editor-table.js

@@ -0,0 +1,70 @@
+import { Host, h } from "@stencil/core";
+export class LsEditorTable {
+    component;
+    /**
+  * The parent editor control.
+  * {LsDocumentViewer}
+  */
+    editor;
+    componentDidLoad() {
+        var dataTable = this.component.shadowRoot.getElementById('ls-editor-table');
+        Array.from(this.editor.component.shadowRoot.querySelectorAll('ls-editor-field')).forEach(fx => {
+            const rowNode = document.createElement('tr');
+            const idCellNode = document.createElement('td');
+            idCellNode.innerText = fx.dataItem.id;
+            rowNode.appendChild(idCellNode);
+            const valueCellNode = document.createElement('td');
+            valueCellNode.innerText = fx.dataItem.value;
+            rowNode.appendChild(valueCellNode);
+            const labelCellNode = document.createElement('td');
+            labelCellNode.innerText = fx.dataItem.label;
+            rowNode.appendChild(labelCellNode);
+            dataTable.appendChild(rowNode);
+        });
+    }
+    render() {
+        return (h(Host, { key: '126032b55f6bb30ab2dd1b164e6f85ed4b29062d' }, h("table", { key: '03f13566a1c1ec6b0c214ce9bfeb13825d8f4be1', id: "ls-editor-table" }), h("slot", { key: 'e33ba6a318a2a6569dbb8659bffa542e9a71bcd1' })));
+    }
+    static get is() { return "ls-editor-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-editor-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-editor-table.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 parent editor control.\n{LsDocumentViewer}"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get elementRef() { return "component"; }
+}
+//# sourceMappingURL=ls-editor-table.js.map

package/dist/collection/components/ls-editor-table/ls-editor-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-editor-table.js","sourceRoot":"","sources":["../../../src/components/ls-editor-table/ls-editor-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQlE,MAAM,OAAO,aAAa;IACb,SAAS,CAAc;IAClC;;;IAGA;IACQ,MAAM,CAAmB;IAEjC,gBAAgB;QACd,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,iBAAiB,CAAsB,CAAC;QACjG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;YAE5F,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YAC7C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YAChD,UAAU,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAA;YACrC,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAEhC,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACnD,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAA;YAC3C,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;YAEnC,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACnD,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAA;YAC3C,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;YAEnC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QAChC,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,EAAE,EAAC,iBAAiB,GACnB;YACR,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\n\n@Component({\n  tag: 'ls-editor-table',\n  styleUrl: 'ls-editor-table.css',\n  shadow: true,\n})\nexport class LsEditorTable {\n  @Element() component: HTMLElement;\n  /**\n* The parent editor control.\n* {LsDocumentViewer}\n*/\n  @Prop() editor: LsDocumentViewer;\n\n  componentDidLoad() {\n    var dataTable = this.component.shadowRoot.getElementById('ls-editor-table') as HTMLCanvasElement;\n    Array.from(this.editor.component.shadowRoot.querySelectorAll('ls-editor-field')).forEach(fx => {\n\n      const rowNode = document.createElement('tr');\n      const idCellNode = document.createElement('td');\n      idCellNode.innerText = fx.dataItem.id\n      rowNode.appendChild(idCellNode);\n\n      const valueCellNode = document.createElement('td');\n      valueCellNode.innerText = fx.dataItem.value\n      rowNode.appendChild(valueCellNode);\n\n      const labelCellNode = document.createElement('td');\n      labelCellNode.innerText = fx.dataItem.label\n      rowNode.appendChild(labelCellNode);\n\n      dataTable.appendChild(rowNode)\n    })\n  }\n\n  render() {\n    return (\n      <Host>\n        <table id=\"ls-editor-table\">\n        </table>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-feature-column/ls-feature-column.css

@@ -0,0 +1,23 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+}
+
+.activeIcon, .defaultIcon {
+  padding: 0.75rem;
+  border-radius: 0.75rem;
+  color: var(--gray-80, #787A80);
+}
+
+.defaultIcon:hover {
+  background-color: var(--primary-10, #EFF4FF);
+  color: var(--primary-100, #0C1457);
+  cursor: pointer;
+}
+
+.activeIcon {
+  background-color: var(--primary-60, #4456F6);
+  color: var(--white, #fff);
+}

package/dist/collection/components/ls-feature-column/ls-feature-column.js

@@ -0,0 +1,84 @@
+import { Host, h } from "@stencil/core";
+import { attachAllTooltips } from "../../utils/tooltip";
+export class LsFeatureColoumn {
+    component;
+    /**
+     * Determines / sets which of the far left 'managers' is active.
+     * {'document' | 'toolbox' | 'participant' }
+     */
+    manager = 'toolbox';
+    // Send an manager change up the DOM
+    manage;
+    componentDidLoad() {
+        attachAllTooltips(this.component.shadowRoot);
+    }
+    render() {
+        return (h(Host, { key: 'f8397442545d0e798a66f31035311cae3bf41c9d' }, h("div", { key: '4db303dd905925d47d2dd28170a56cd8e7f8c2d4', class: this.manager === 'document' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                console.log('document');
+                this.manage.emit('document');
+                this.manager = 'document';
+            }, "data-tooltip-title": "Template Details", "data-tooltip": "View and edit Template properties", "data-tooltip-placement": "right" }, h("ls-icon", { key: 'b5043c55eddec92dca33ef147c11df9bd48fd6fe', name: "document", size: "24" })), h("div", { key: 'e02c5613c1dbd96b7ddb968972a522abec80fbf3', class: this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                this.manage.emit('toolbox');
+                this.manager = 'toolbox';
+            }, "data-tooltip-title": "Field Types", "data-tooltip": "Select and place Form Field Elements", "data-tooltip-placement": "right" }, h("ls-icon", { key: '9ff52bec37456480b5741ea3bbedf0d56881b0e7', name: "typing-input", size: "24" })), h("div", { key: '364765ec9efe822ddc67f6e75df5b10d195f9f01', class: this.manager === 'participant' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                this.manage.emit('participant');
+                this.manager = 'participant';
+            }, "data-tooltip-title": "Participants", "data-tooltip": "Manage Signers, Witnesses and Approvers", "data-tooltip-placement": "right" }, h("ls-icon", { key: 'f8e16dc093e911319df9e4970469ab76abbe7c78', name: "user-group", size: "24" })), h("slot", { key: '3caabbffd188f76168904ffe2d08445f4a009389' }), h("ls-tooltip", { key: '5a645c4907a67e0fb3d82705d751b4dd82953505', id: "ls-tooltip-master" })));
+    }
+    static get is() { return "ls-feature-column"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-feature-column.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-feature-column.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "manager": {
+                "type": "string",
+                "attribute": "manager",
+                "mutable": true,
+                "complexType": {
+                    "original": "'document' | 'toolbox' | 'participant'",
+                    "resolved": "\"document\" | \"participant\" | \"toolbox\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines / sets which of the far left 'managers' is active.\n{'document' | 'toolbox' | 'participant' }"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'toolbox'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "manage",
+                "name": "manage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "'document' | 'toolbox' | 'participant'",
+                    "resolved": "\"document\" | \"participant\" | \"toolbox\"",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "component"; }
+}
+//# sourceMappingURL=ls-feature-column.js.map

package/dist/collection/components/ls-feature-column/ls-feature-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-feature-column.js","sourceRoot":"","sources":["../../../src/components/ls-feature-column/ls-feature-column.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAgB,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAOxD,MAAM,OAAO,gBAAgB;IAChB,SAAS,CAAc;IAClC;;;OAGG;IACsB,OAAO,GAA2C,SAAS,CAAC;IAErF,oCAAoC;IAC3B,MAAM,CAAuD;IAEtE,gBAAgB;QACd,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC/C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACjE,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;oBACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;oBAC7B,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;gBAC5B,CAAC,wBACkB,kBAAkB,kBACxB,mCAAmC,4BACzB,OAAO;gBAE9B,gEAAS,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC;YACN,4DACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EAChE,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;oBAC5B,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;gBAC3B,CAAC,wBACkB,aAAa,kBACnB,sCAAsC,4BAC5B,OAAO;gBAE9B,gEAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACrC;YACN,4DACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACpE,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;oBAChC,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;gBAC/B,CAAC,wBACkB,cAAc,kBACpB,yCAAyC,4BAC/B,OAAO;gBAE9B,gEAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAG,CACnC;YAEN,8DAAa;YACb,mEAAY,EAAE,EAAC,mBAAmB,GAAG,CAChC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, EventEmitter, Event, Element } from '@stencil/core';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-feature-column',\n  styleUrl: 'ls-feature-column.css',\n  shadow: true,\n})\nexport class LsFeatureColoumn {\n  @Element() component: HTMLElement;\n  /**\n   * Determines / sets which of the far left 'managers' is active.\n   * {'document' | 'toolbox' | 'participant' }\n   */\n  @Prop({ mutable: true }) manager: 'document' | 'toolbox' | 'participant' = 'toolbox';\n\n  // Send an manager change up the DOM\n  @Event() manage: EventEmitter<'document' | 'toolbox' | 'participant'>;\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.manager === 'document' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            console.log('document');\n            this.manage.emit('document');\n            this.manager = 'document';\n          }}\n          data-tooltip-title=\"Template Details\"\n          data-tooltip=\"View and edit Template properties\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"document\" size=\"24\" />\n        </div>\n        <div\n          class={this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('toolbox');\n            this.manager = 'toolbox';\n          }}\n          data-tooltip-title=\"Field Types\"\n          data-tooltip=\"Select and place Form Field Elements\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"typing-input\" size=\"24\" />\n        </div>\n        <div\n          class={this.manager === 'participant' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('participant');\n            this.manager = 'participant';\n          }}\n          data-tooltip-title=\"Participants\"\n          data-tooltip=\"Manage Signers, Witnesses and Approvers\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"user-group\" size=\"24\" />\n        </div>\n\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}