legalesign-document-viewer 0.1.0 → 0.1.2

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

@@ -0,0 +1,292 @@
+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;
+    readonly;
+    palette;
+    type;
+    page;
+    isEditing = false;
+    heldEdge = null;
+    isEdgeDragging = false;
+    innerValue;
+    sizeObserver;
+    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(editbox);
+        if (editbox) {
+            editbox.className = 'ls-editor-field-editable';
+            editbox.focus();
+        }
+    }
+    handleDragStart(event) {
+        console.log('dragstart ls-editor-field', event, this.type);
+        // 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 = `var(--${this.participantColor(this.dataItem?.signer)}-20)`;
+            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 = 'transparent';
+        }
+    }
+    onInputChange(e) {
+        // console.log("INPUT CHANGE", e);
+        this.innerValue = e.target.value;
+    }
+    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 = `var(--${this.participantColor(this.dataItem?.signer)}-20)`;
+            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 = `transparent`;
+    }
+    participantColor = (index) => {
+        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+    };
+    render() {
+        console.log('Rendering ls-editor-field', this.dataItem);
+        return (h(Host, { key: 'b9e35f54e8852fcdd156c1f092e5c3dc0b099e01', style: { border: `2px solid var(--${this.participantColor(this.dataItem?.signer)}-60)` } }, h("div", { key: '51e3a6f60ea26ba6987bfde2ec290675ab36ff4b', class: {
+                'ls-editor-field': true,
+                'is-selected': this.selected,
+            } }, h("input", { key: 'eb04f44ee432c774410ef9e977f4783c093fb3ca', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value || this.innerValue, onChange: e => this.onInputChange(e) }), h("div", { key: '572479a0869f845fc40537c5eadd48fc64d30119', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.innerValue || 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\"; 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
+            },
+            "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
+            },
+            "palette": {
+                "type": "unknown",
+                "attribute": "palette",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": 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 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 } from '@stencil/core';\nimport { LSApiElement } from '../../components';\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;\n  @Prop() readonly: boolean;\n  @Prop() palette: string[];\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  @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(editbox);\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    console.log('dragstart ls-editor-field', event, this.type);\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 = `var(--${this.participantColor(this.dataItem?.signer)}-20)`;\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 {this.component.style.background = 'transparent';}\n  }\n\n  onInputChange(e) {\n    // console.log(\"INPUT CHANGE\", e);\n    this.innerValue = e.target.value;\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 = `var(--${this.participantColor(this.dataItem?.signer)}-20)`;\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 this.component.style.background = `transparent`;\n  }\n\n  participantColor = (index: number) => {\n    return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n  };\n\n  render() {\n    console.log('Rendering ls-editor-field', this.dataItem);\n    return (\n      <Host style={{ border: `2px solid var(--${this.participantColor(this.dataItem?.signer)}-60)` }}>\n        <div\n          class={{\n            'ls-editor-field': true,\n            'is-selected': this.selected,\n          }}\n        >\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 || this.innerValue}\n            onChange={e => this.onInputChange(e)}\n          />\n          <div id=\"field-info\" class={this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable'}>\n            {this.innerValue || 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: 'ffe897428c34a78dc5ba8da43fe72414f67393cb' }, h("table", { key: 'ae2af258372dec94b87db132bcecff4223cd1ead', id: "ls-editor-table" }), h("slot", { key: 'ef198fa73001fec2d580e6b0c5d2979fd984b70a' })));
+    }
+    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,78 @@
+import { Host, h } from "@stencil/core";
+export class LsFeatureColoumn {
+    /**
+     * Determines / sets which of the far left 'managers' is active.
+     * {'document' | 'toolbox' | 'participant' }
+     */
+    manager = 'toolbox';
+    // Send an manager change up the DOM
+    manage;
+    render() {
+        return (h(Host, { key: 'aebd8c74fa175f911dacb77740c787c564049e7b' }, h("div", { key: 'cfd4c5438341e029807e26dd7a6e513c16cead1e', class: this.manager === 'document' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                console.log('document');
+                this.manage.emit('document');
+                this.manager = 'document';
+            } }, h("ls-icon", { key: 'cd7dad83c7b45fbbd73a734e6d45b8f74bcad5db', name: "document", size: "24" })), h("div", { key: '86f2370a984220a01aafd8d0b0bcad6bb083586c', class: this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                this.manage.emit('toolbox');
+                this.manager = 'toolbox';
+            } }, h("ls-icon", { key: 'a4ce3440b682ee0890ef5a4111a6f478007aa963', name: "typing-input", size: "24" })), h("div", { key: '30deca23fcadc0e3f8c8b9c2d912842a4e3b5b06', class: this.manager === 'participant' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                this.manage.emit('participant');
+                this.manager = 'participant';
+            } }, h("ls-icon", { key: 'f192ca05928ef54523b9bf36d4627667e6490da2', name: "user-group", size: "24" })), h("slot", { key: '69bf66c9594d5cff7cb117aa309f8b58bbef77c2' })));
+    }
+    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": {}
+                }
+            }];
+    }
+}
+//# 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,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,gBAAgB;IAC3B;;;OAGG;IACsB,OAAO,GAA2C,SAAS,CAAC;IAErF,oCAAoC;IAC3B,MAAM,CAAuD;IAEtE,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;gBAED,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;gBAED,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;gBAED,gEAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAG,CACnC;YAEN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, EventEmitter, Event } from '@stencil/core';\n\n@Component({\n  tag: 'ls-feature-column',\n  styleUrl: 'ls-feature-column.css',\n  shadow: true,\n})\nexport class LsFeatureColoumn {\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  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        >\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        >\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        >\n          <ls-icon name=\"user-group\" size=\"24\" />\n        </div>\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}