npm - legalesign-document-viewer - Versions diffs - 0.0.9 → 0.0.11 - Mend

legalesign-document-viewer 0.0.9 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

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

@@ -97,10 +97,10 @@ export class LsEditorField {
             this.component.style.border = "1px solid black";
     }
     render() {
-        return (h(Host, { key: '1768aa1f0591c1094aee697e8d8a99c5bb769369', class: {
+        return (h(Host, { key: 'f75b043455d8d893cfd695a1861a5fab7bafa1c1', class: {
                 'ls-editor-field': true,
                 'is-selected': this.selected
-            } }, h("input", { key: 'ce5806dd692551c27d270f6bac41e038016f8067', 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: '1a102290f8e8a860e8d72c2af6505facd8cf821b', id: "field-info", class: this.isEditing ? "hidden-field" : "ls-editor-field-draggable" }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType)));
+            } }, h("input", { key: '60990dd57f8f3a24865653e45d6ace95755a5087', 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: '54c7a0a6fdb3fbb7a5aac80289ae2c510c340b72', 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"; }
@@ -187,8 +187,9 @@ export class LsEditorField {
                     "resolved": "RoleColor[]",
                     "references": {
                         "RoleColor": {
-                            "location": "global",
-                            "id": "global::RoleColor"
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::RoleColor"
                         }
                     }
                 },

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

	@@ -1 +1 @@
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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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Host, h, Element, State, Prop, Watch, Listen } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { getInputType } from '../ls-document-viewer/editorUtils';\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: RoleColor[];\n\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(\"application/json\", JSON.stringify({\n type: this.type\n }));\n event.dataTransfer.dropEffect = \"move\";\n }\n\n @Watch('selected')\n watchSelectedHandler(_newValue: boolean, _oldValue: boolean) {\n if (_newValue) this.component.style.border = \"1px dotted red\";\n else this.component.style.border = \"1px solid black\";\n }\n\n onInputChange(e) {\n // console.log(\"INPUT CHANGE\", e);\n this.innerValue = e.target.value;\n }\n\n componentDidLoad() {\n\n this.sizeObserver = new ResizeObserver((entries) => {\n\n for (const entry of entries) {\n if (entry.contentRect) {\n\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\n this.sizeObserver.observe(this.component)\n\n // New dropped components automatically need selecting.\n if (this.selected) this.component.style.border = \"1px dotted red\";\n else this.component.style.border = \"1px solid black\";\n }\n\n\n\n render() {\n return (\n <Host class={{\n 'ls-editor-field': true,\n 'is-selected': this.selected\n }}>\n <input 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 </Host>\n );\n }\n}\n"]}
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, RoleColor } from '../../components';\nimport { getInputType } from '../ls-document-viewer/editorUtils';\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: RoleColor[];\n\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(\"application/json\", JSON.stringify({\n type: this.type\n }));\n event.dataTransfer.dropEffect = \"move\";\n }\n\n @Watch('selected')\n watchSelectedHandler(_newValue: boolean, _oldValue: boolean) {\n if (_newValue) this.component.style.border = \"1px dotted red\";\n else this.component.style.border = \"1px solid black\";\n }\n\n onInputChange(e) {\n // console.log(\"INPUT CHANGE\", e);\n this.innerValue = e.target.value;\n }\n\n componentDidLoad() {\n\n this.sizeObserver = new ResizeObserver((entries) => {\n\n for (const entry of entries) {\n if (entry.contentRect) {\n\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\n this.sizeObserver.observe(this.component)\n\n // New dropped components automatically need selecting.\n if (this.selected) this.component.style.border = \"1px dotted red\";\n else this.component.style.border = \"1px solid black\";\n }\n\n\n\n render() {\n return (\n <Host class={{\n 'ls-editor-field': true,\n 'is-selected': this.selected\n }}>\n <input 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 </Host>\n );\n }\n}\n"]}

package/dist/components/ls-document-viewer.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-B_usMQbd.js';
 import { a as alter, o as oob, g as getApiType } from './p-CJEpfA7P.js';
 import { d as defineCustomElement$k } from './p-DuPQi9Ya.js';
-import { d as defineCustomElement$j } from './p-DRATqnWY.js';
+import { d as defineCustomElement$j } from './p-Cko2LAX4.js';
 import { d as defineCustomElement$i } from './p-YNFsm7tC.js';
 import { d as defineCustomElement$h } from './p-OVI9RIs8.js';
 import { d as defineCustomElement$g } from './p-DiIhIGnw.js';

package/dist/components/ls-editor-field.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { L as LsEditorField$1, d as defineCustomElement$1 } from './p-DRATqnWY.js';
+import { L as LsEditorField$1, d as defineCustomElement$1 } from './p-Cko2LAX4.js';
 const LsEditorField = LsEditorField$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-DRATqnWY.js → p-Cko2LAX4.js} RENAMED Viewed

@@ -105,10 +105,10 @@ const LsEditorField = /*@__PURE__*/ proxyCustomElement(class LsEditorField exten
             this.component.style.border = "1px solid black";
     }
     render() {
-        return (h(Host, { key: '1768aa1f0591c1094aee697e8d8a99c5bb769369', class: {
+        return (h(Host, { key: 'f75b043455d8d893cfd695a1861a5fab7bafa1c1', class: {
                 'ls-editor-field': true,
                 'is-selected': this.selected
-            } }, h("input", { key: 'ce5806dd692551c27d270f6bac41e038016f8067', 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: '1a102290f8e8a860e8d72c2af6505facd8cf821b', id: "field-info", class: this.isEditing ? "hidden-field" : "ls-editor-field-draggable" }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType)));
+            } }, h("input", { key: '60990dd57f8f3a24865653e45d6ace95755a5087', 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: '54c7a0a6fdb3fbb7a5aac80289ae2c510c340b72', id: "field-info", class: this.isEditing ? "hidden-field" : "ls-editor-field-draggable" }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType)));
     }
     static get watchers() { return {
         "selected": ["watchSelectedHandler"]
@@ -144,6 +144,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { LsEditorField as L, defineCustomElement as d };
-//# sourceMappingURL=p-DRATqnWY.js.map
+//# sourceMappingURL=p-Cko2LAX4.js.map
-//# sourceMappingURL=p-DRATqnWY.js.map
+//# sourceMappingURL=p-Cko2LAX4.js.map

package/dist/components/{p-DRATqnWY.js.map → p-Cko2LAX4.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~DRATqnWY~~.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,qzBAAqzB;;MCSj0B,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;AAEC,IAAA,QAAQ;AACzB,IAAA,QAAQ;AACR,IAAA,QAAQ;AACR,IAAA,OAAO;AAEP,IAAA,IAAI;AACJ,IAAA,IAAI;IACH,SAAS,GAAY,KAAK;IAC1B,QAAQ,GAAW,IAAI;IACvB,cAAc,GAAY,KAAK;AAC/B,IAAA,UAAU;AACX,IAAA,YAAY;AAGpB,IAAA,WAAW,CAAC,CAAgB,EAAA;AAC1B,QAAA,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE;AACtB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;;;AAKrF,IAAA,eAAe,CAAC,CAAC,EAAA;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE;QACnB,IAAI,CAAC,CAAC,CAAC,OAAO;YAAE;;QAGhB,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC3B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW;;AACpC,aAAA,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE;YAC/D,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW;;aACpC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAClC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW;;AACpC,aAAA,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE;YAChE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW;;aACpC;YACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;;;;IAKxC,iBAAiB,GAAA;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAC3B,QAAA,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE;QAC9B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,EAAE,KAAK;AAE1E,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,eAAe,CAAqB;AAC7F,QAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;QAEpB,IAAG,OAAO,EAAE;AACV,YAAA,OAAO,CAAC,SAAS,GAAG,0BAA0B;YAC9C,OAAO,CAAC,KAAK,EAAE;;;AAKnB,IAAA,eAAe,CAAC,KAAK,EAAA;QACnB,OAAO,CAAC,GAAG,CAAC,2BAA2B,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC;;QAE1D,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,kBAAkB,EAAE,IAAI,CAAC,SAAS,CAAC;YAC5D,IAAI,EAAE,IAAI,CAAC;AACZ,SAAA,CAAC,CAAC;AACH,QAAA,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM;;IAIxC,oBAAoB,CAAC,SAAkB,EAAE,SAAkB,EAAA;AACzD,QAAA,IAAI,SAAS;YAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,gBAAgB;;YACxD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,iBAAiB;;AAGtD,IAAA,aAAa,CAAC,CAAC,EAAA;;QAEb,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;;IAGlC,gBAAgB,GAAA;QAEd,IAAI,CAAC,YAAY,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,KAAI;AAEjD,YAAA,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;AAC3B,gBAAA,IAAI,KAAK,CAAC,WAAW,EAAE;;AAGrB,oBAAA,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,YAAY,CAAgB;;;;AAKrF,oBAAA,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI;AACtD,oBAAA,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI;;;AAI1D,SAAC,CAAC;QAEF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;;QAGzC,IAAI,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,gBAAgB;;YAC5D,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,iBAAiB;;IAKtD,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE;AACX,gBAAA,iBAAiB,EAAE,IAAI;gBACvB,aAAa,EAAE,IAAI,CAAC;aACrB,EAAA,EACG,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,0BAA0B,GAAG,cAAc,EACnE,IAAI,EAAE,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,SAAS,EACtD,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,EAC9C,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EACtC,CAAA,EACF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,EAAE,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,cAAc,GAAG,2BAA2B,EAAA,EACtF,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,eAAe,CACtE,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-editor-field/ls-editor-field.css?tag=ls-editor-field&encapsulation=shadow","src/components/ls-editor-field/ls-editor-field.tsx"],"sourcesContent":[":host {\n display: block;\n position: absolute;\n border: 1px solid rgb(49, 49, 49);\n margin: 0px;\n padding: 0px 0px 0px 0px;\n isolation: isolate;\n}\n\n.ls-editor-field-editable {\n display: block;\n font-family: inherit;\n font-size: inherit;\n overflow: hidden;\n\n /* no extra spaces /\n white-space: nowrap;\n border: 0px solid #000;\n margin: 0;\n padding: 0px 0px 0px 0px;\n / default widths /\n min-width: 2em;\n background-color: white;\n height: 100%;\n width: 100%;\n}\n\n.ls-editor-field-editable:focus {\n outline: none;\n}\n\n.ls-editor-field-draggable {\n display: block;\n font-family: inherit;\n font-size: inherit;\n\n overflow: hidden;\n\n / no extra spaces /\n white-space: nowrap;\n background-color: white;\n\n / default widths */\n min-width: 2px;\n height: 98%;\n width: 98%;\n}\n\n.is-selected {\n border: 1px dotted rgb(193, 26, 26);\n}\n\n.hidden-field {\n display: none;\n}\n\n.draggable-input {\n font-family: inherit;\n font-size: inherit;\n position: relative;\n height: 95%;\n width: 95%;\n}\n\n.editing-input {\n caret-color: rgb(15 23 42);\n caret-shape: auto;\n height: 100%;\n width: 100%;\n}","import { Component, Host, h, Element, State, Prop, Watch, Listen } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { getInputType } from '../ls-document-viewer/editorUtils';\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: RoleColor[];\n\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(\"application/json\", JSON.stringify({\n type: this.type\n }));\n event.dataTransfer.dropEffect = \"move\";\n }\n\n @Watch('selected')\n watchSelectedHandler(_newValue: boolean, _oldValue: boolean) {\n if (_newValue) this.component.style.border = \"1px dotted red\";\n else this.component.style.border = \"1px solid black\";\n }\n\n onInputChange(e) {\n // console.log(\"INPUT CHANGE\", e);\n this.innerValue = e.target.value;\n }\n\n componentDidLoad() {\n\n this.sizeObserver = new ResizeObserver((entries) => {\n\n for (const entry of entries) {\n if (entry.contentRect) {\n\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\n this.sizeObserver.observe(this.component)\n\n // New dropped components automatically need selecting.\n if (this.selected) this.component.style.border = \"1px dotted red\";\n else this.component.style.border = \"1px solid black\";\n }\n\n\n\n render() {\n return (\n <Host class={{\n 'ls-editor-field': true,\n 'is-selected': this.selected\n }}>\n <input 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 </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-Cko2LAX4.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,qzBAAqzB;;MCSj0B,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;AAEC,IAAA,QAAQ;AACzB,IAAA,QAAQ;AACR,IAAA,QAAQ;AACR,IAAA,OAAO;AAEP,IAAA,IAAI;AACJ,IAAA,IAAI;IACH,SAAS,GAAY,KAAK;IAC1B,QAAQ,GAAW,IAAI;IACvB,cAAc,GAAY,KAAK;AAC/B,IAAA,UAAU;AACX,IAAA,YAAY;AAGpB,IAAA,WAAW,CAAC,CAAgB,EAAA;AAC1B,QAAA,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE;AACtB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;;;AAKrF,IAAA,eAAe,CAAC,CAAC,EAAA;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE;QACnB,IAAI,CAAC,CAAC,CAAC,OAAO;YAAE;;QAGhB,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC3B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW;;AACpC,aAAA,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE;YAC/D,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW;;aACpC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAClC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW;;AACpC,aAAA,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE;YAChE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW;;aACpC;YACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;;;;IAKxC,iBAAiB,GAAA;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAC3B,QAAA,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE;QAC9B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,EAAE,KAAK;AAE1E,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,eAAe,CAAqB;AAC7F,QAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;QAEpB,IAAG,OAAO,EAAE;AACV,YAAA,OAAO,CAAC,SAAS,GAAG,0BAA0B;YAC9C,OAAO,CAAC,KAAK,EAAE;;;AAKnB,IAAA,eAAe,CAAC,KAAK,EAAA;QACnB,OAAO,CAAC,GAAG,CAAC,2BAA2B,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC;;QAE1D,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,kBAAkB,EAAE,IAAI,CAAC,SAAS,CAAC;YAC5D,IAAI,EAAE,IAAI,CAAC;AACZ,SAAA,CAAC,CAAC;AACH,QAAA,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM;;IAIxC,oBAAoB,CAAC,SAAkB,EAAE,SAAkB,EAAA;AACzD,QAAA,IAAI,SAAS;YAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,gBAAgB;;YACxD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,iBAAiB;;AAGtD,IAAA,aAAa,CAAC,CAAC,EAAA;;QAEb,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;;IAGlC,gBAAgB,GAAA;QAEd,IAAI,CAAC,YAAY,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,KAAI;AAEjD,YAAA,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;AAC3B,gBAAA,IAAI,KAAK,CAAC,WAAW,EAAE;;AAGrB,oBAAA,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,YAAY,CAAgB;;;;AAKrF,oBAAA,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI;AACtD,oBAAA,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI;;;AAI1D,SAAC,CAAC;QAEF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;;QAGzC,IAAI,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,gBAAgB;;YAC5D,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,iBAAiB;;IAKtD,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE;AACX,gBAAA,iBAAiB,EAAE,IAAI;gBACvB,aAAa,EAAE,IAAI,CAAC;aACrB,EAAA,EACG,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,0BAA0B,GAAG,cAAc,EACnE,IAAI,EAAE,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,SAAS,EACtD,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,EAC9C,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EACtC,CAAA,EACF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,EAAE,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,cAAc,GAAG,2BAA2B,EAAA,EACtF,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,eAAe,CACtE,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-editor-field/ls-editor-field.css?tag=ls-editor-field&encapsulation=shadow","src/components/ls-editor-field/ls-editor-field.tsx"],"sourcesContent":[":host {\n display: block;\n position: absolute;\n border: 1px solid rgb(49, 49, 49);\n margin: 0px;\n padding: 0px 0px 0px 0px;\n isolation: isolate;\n}\n\n.ls-editor-field-editable {\n display: block;\n font-family: inherit;\n font-size: inherit;\n overflow: hidden;\n\n /* no extra spaces /\n white-space: nowrap;\n border: 0px solid #000;\n margin: 0;\n padding: 0px 0px 0px 0px;\n / default widths /\n min-width: 2em;\n background-color: white;\n height: 100%;\n width: 100%;\n}\n\n.ls-editor-field-editable:focus {\n outline: none;\n}\n\n.ls-editor-field-draggable {\n display: block;\n font-family: inherit;\n font-size: inherit;\n\n overflow: hidden;\n\n / no extra spaces /\n white-space: nowrap;\n background-color: white;\n\n / default widths */\n min-width: 2px;\n height: 98%;\n width: 98%;\n}\n\n.is-selected {\n border: 1px dotted rgb(193, 26, 26);\n}\n\n.hidden-field {\n display: none;\n}\n\n.draggable-input {\n font-family: inherit;\n font-size: inherit;\n position: relative;\n height: 95%;\n width: 95%;\n}\n\n.editing-input {\n caret-color: rgb(15 23 42);\n caret-shape: auto;\n height: 100%;\n width: 100%;\n}","import { Component, Host, h, Element, State, Prop, Watch, Listen } from '@stencil/core';\nimport { LSApiElement, RoleColor } from '../../components';\nimport { getInputType } from '../ls-document-viewer/editorUtils';\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: RoleColor[];\n\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(\"application/json\", JSON.stringify({\n type: this.type\n }));\n event.dataTransfer.dropEffect = \"move\";\n }\n\n @Watch('selected')\n watchSelectedHandler(_newValue: boolean, _oldValue: boolean) {\n if (_newValue) this.component.style.border = \"1px dotted red\";\n else this.component.style.border = \"1px solid black\";\n }\n\n onInputChange(e) {\n // console.log(\"INPUT CHANGE\", e);\n this.innerValue = e.target.value;\n }\n\n componentDidLoad() {\n\n this.sizeObserver = new ResizeObserver((entries) => {\n\n for (const entry of entries) {\n if (entry.contentRect) {\n\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\n this.sizeObserver.observe(this.component)\n\n // New dropped components automatically need selecting.\n if (this.selected) this.component.style.border = \"1px dotted red\";\n else this.component.style.border = \"1px solid black\";\n }\n\n\n\n render() {\n return (\n <Host class={{\n 'ls-editor-field': true,\n 'is-selected': this.selected\n }}>\n <input 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 </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ls-document-options_28.entry.js CHANGED Viewed

@@ -46424,10 +46424,10 @@ const LsEditorField = class {
             this.component.style.border = "1px solid black";
     }
     render() {
-        return (h(Host, { key: '1768aa1f0591c1094aee697e8d8a99c5bb769369', class: {
+        return (h(Host, { key: 'f75b043455d8d893cfd695a1861a5fab7bafa1c1', class: {
                 'ls-editor-field': true,
                 'is-selected': this.selected
-            } }, h("input", { key: 'ce5806dd692551c27d270f6bac41e038016f8067', 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: '1a102290f8e8a860e8d72c2af6505facd8cf821b', id: "field-info", class: this.isEditing ? "hidden-field" : "ls-editor-field-draggable" }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType)));
+            } }, h("input", { key: '60990dd57f8f3a24865653e45d6ace95755a5087', 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: '54c7a0a6fdb3fbb7a5aac80289ae2c510c340b72', id: "field-info", class: this.isEditing ? "hidden-field" : "ls-editor-field-draggable" }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType)));
     }
     static get watchers() { return {
         "selected": ["watchSelectedHandler"]