legalesign-document-viewer 0.3.1 → 0.3.2

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ var index = require('./index-DruwRbfl.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["ls-document-options_39.cjs",[[257,"ls-document-viewer",{"template":[1],"token":[1],"userpool":[1],"endpoint":[1],"templateid":[1],"zoom":[1026],"pageNum":[1026,"page-num"],"signer":[1026],"groupInfo":[1032,"group-info"],"mode":[1],"manager":[1025],"displayTable":[1028,"display-table"],"showtoolbox":[4],"showtoolbar":[4],"showstatusbar":[4],"showpagepreview":[4],"expandfields":[4],"readonly":[4],"showtableview":[4],"toolboxFilter":[1,"toolbox-filter"],"_template":[32],"validationErrors":[32],"status":[32],"selected":[32],"isLoading":[32],"pageNext":[64],"pagePrev":[64],"unselect":[64],"setZoom":[64]},[[0,"mutate","mutateHandler"],[0,"update","updateHandler"],[0,"addParticipant","addParticpantHandler"],[0,"selectFields","selectFieldsHandler"],[0,"roleChange","roleHandler"]],{"mode":["modeHandler"],"displayTable":["tableViewHandler"]}],[257,"ls-field-properties",{"dataItem":[16,"data-item"]}],[257,"ls-participant-manager",{"editor":[16],"template":[16]}],[257,"ls-toolbar",{"dataItem":[1040,"data-item"],"groupInfo":[16,"group-info"],"template":[16],"editor":[1040]}],[257,"ls-document-options",{"template":[16],"editTitle":[32]},null,{"template":["selectedHandler"]}],[257,"ls-editor-field",{"dataItem":[1040,"data-item"],"selected":[4],"readonly":[4],"type":[1],"page":[16],"isEditing":[32],"heldEdge":[32],"isEdgeDragging":[32],"innerValue":[32]},[[0,"keydown","handleInput"],[3,"mousemove","handleMouseMove"],[2,"dblclick","handleDoubleClick"],[0,"dragstart","handleDragStart"]],{"selected":["watchSelectedHandler"]}],[257,"ls-feature-column",{"manager":[1025]}],[257,"ls-statusbar",{"zoom":[1026],"editor":[16]}],[257,"ls-toolbox-field",{"formElementType":[1,"form-element-type"],"elementType":[1,"element-type"],"validation":[2],"label":[1],"icon":[1],"defaultHeight":[2,"default-height"],"defaultWidth":[2,"default-width"],"signer":[2],"isSelected":[1028,"is-selected"]},[[1,"dragstart","handleDragStart"],[0,"keydown","handleKeyDown"]],{"isSelected":["modeHandler"]}],[257,"ls-validation-tag",{"status":[1025],"validationErrors":[1040,"validation-errors"],"isExpanded":[1028,"is-expanded"]}],[257,"ls-editor-table",{"editor":[16]}],[257,"ls-page-loader"],[257,"ls-field-properties-date",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-email",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-file",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-general",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-image",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-number",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-signature",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-text",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-multiple",{"dataItem":[1040,"data-item"]}],[257,"ls-field-properties-autosign",{"dataItem":[16,"data-item"]}],[257,"ls-participant-card",{"signer":[16],"index":[2],"editable":[1028],"template":[16]},null,{"editable":["modeHandler"]}],[257,"ls-field-format",{"dataItem":[1040,"data-item"]},null,{"dataItem":["selectFieldsHandler"]}],[257,"ls-participant-select",{"selected":[1025],"roles":[16],"selectedRole":[32],"isOpen":[32]},null,{"roles":["handleRoleLoad"]}],[257,"ls-field-alignment",{"dataItem":[1040,"data-item"]}],[257,"ls-field-distribute",{"dataItem":[1040,"data-item"]}],[257,"ls-field-size",{"dataItem":[1040,"data-item"]}],[257,"ls-field-content",{"dataItem":[1040,"data-item"],"showValidationTypes":[4,"show-validation-types"]}],[257,"ls-field-properties-advanced",{"dataItem":[1040,"data-item"],"expanded":[1028]}],[257,"ls-field-placement",{"dataItem":[1040,"data-item"]}],[257,"ls-field-type-display",{"assignee":[2],"fieldType":[1,"field-type"]}],[257,"ls-field-properties-container",{"dataItem":[16,"data-item"],"tabs":[16],"selectedTab":[1537,"selected-tab"]}],[257,"ls-field-dimensions",{"dataItem":[1040,"data-item"]}],[257,"ls-field-footer",{"dataItem":[1040,"data-item"]}],[257,"ls-input-wrapper",{"leadingIcon":[1,"leading-icon"],"select":[4]}],[257,"ls-props-section",{"sectionTitle":[1,"section-title"],"sectionDescription":[1,"section-description"],"row":[4]}],[260,"ls-toggle",{"checked":[1028],"indeterminate":[4]}],[257,"ls-icon",{"name":[1],"solid":[4],"size":[1],"customStyle":[16,"custom-style"]}]]],["ls-field-properties-dropdown.cjs",[[257,"ls-field-properties-dropdown",{"dataItem":[16,"data-item"]}]]],["ls-formfield.cjs",[[260,"ls-formfield",{"name":[1],"fieldId":[1,"field-id"],"label":[1],"as":[1],"value":[1032],"placeholder":[1],"descriptionText":[1,"description-text"],"errorText":[1,"error-text"],"aria":[1],"inputRef":[1,"input-ref"],"infoTooltipText":[1,"info-tooltip-text"],"hoverTooltipText":[1,"hover-tooltip-text"],"disabled":[4],"extraLabel":[1,"extra-label"],"required":[4],"valid":[4],"dirty":[4],"count":[4],"countMax":[2,"count-max"],"buttonClick":[16,"button-click"],"buttonIcon":[1,"button-icon"],"labelIcon":[1,"label-icon"],"fieldIcon":[1,"field-icon"],"_value":[32]},null,{"value":["valueWatcher"]}]]],["ls-tooltip.cjs",[[260,"ls-tooltip",{"reference":[16],"placement":[1],"visible":[32]}]]],["ls-number-input_5.cjs",[[257,"ls-number-input",{"type":[1],"name":[1],"value":[1026],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[256,"ls-radio-input",{"radioId":[1,"radio-id"],"label":[1],"icon":[1],"name":[1],"checked":[4],"disabled":[4],"customStyle":[16,"custom-style"]}],[260,"ls-select-input",{"name":[1],"value":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[257,"ls-text-input",{"type":[1],"name":[1],"value":[1025],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"],"showPassword":[32]}],[257,"ls-textarea-input",{"name":[1],"value":[1],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}]]]], options);
+  return index.bootstrapLazy([["ls-document-options_39.cjs",[[257,"ls-document-viewer",{"template":[1],"token":[1],"userpool":[1],"endpoint":[1],"templateid":[1],"zoom":[1026],"pageNum":[1026,"page-num"],"signer":[1026],"groupInfo":[1032,"group-info"],"mode":[1],"manager":[1025],"displayTable":[1028,"display-table"],"showtoolbox":[4],"showtoolbar":[4],"showstatusbar":[4],"showpagepreview":[4],"expandfields":[4],"readonly":[4],"showtableview":[4],"toolboxFilter":[1,"toolbox-filter"],"_template":[32],"validationErrors":[32],"status":[32],"selected":[32],"isLoading":[32],"pageNext":[64],"pagePrev":[64],"unselect":[64],"setZoom":[64]},[[0,"mutate","mutateHandler"],[0,"update","updateHandler"],[0,"addParticipant","addParticpantHandler"],[0,"selectFields","selectFieldsHandler"],[0,"roleChange","roleHandler"]],{"mode":["modeHandler"],"displayTable":["tableViewHandler"]}],[257,"ls-field-properties",{"dataItem":[16,"data-item"]}],[257,"ls-participant-manager",{"editor":[16],"template":[16]}],[257,"ls-toolbar",{"dataItem":[1040,"data-item"],"groupInfo":[16,"group-info"],"template":[16],"editor":[1040]}],[257,"ls-document-options",{"template":[1040],"editTitle":[32]},null,{"template":["selectedHandler"]}],[257,"ls-editor-field",{"dataItem":[1040,"data-item"],"selected":[4],"readonly":[4],"type":[1],"page":[16],"isEditing":[32],"heldEdge":[32],"isEdgeDragging":[32],"innerValue":[32]},[[0,"keydown","handleInput"],[3,"mousemove","handleMouseMove"],[2,"dblclick","handleDoubleClick"],[0,"dragstart","handleDragStart"]],{"selected":["watchSelectedHandler"]}],[257,"ls-feature-column",{"manager":[1025]}],[257,"ls-statusbar",{"zoom":[1026],"editor":[16]}],[257,"ls-toolbox-field",{"formElementType":[1,"form-element-type"],"elementType":[1,"element-type"],"validation":[2],"label":[1],"icon":[1],"defaultHeight":[2,"default-height"],"defaultWidth":[2,"default-width"],"signer":[2],"isSelected":[1028,"is-selected"]},[[1,"dragstart","handleDragStart"],[0,"keydown","handleKeyDown"]],{"isSelected":["modeHandler"]}],[257,"ls-validation-tag",{"status":[1025],"validationErrors":[1040,"validation-errors"],"isExpanded":[1028,"is-expanded"]}],[257,"ls-editor-table",{"editor":[16]}],[257,"ls-page-loader"],[257,"ls-field-properties-date",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-email",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-file",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-general",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-image",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-number",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-signature",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-text",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-multiple",{"dataItem":[1040,"data-item"]}],[257,"ls-field-properties-autosign",{"dataItem":[16,"data-item"]}],[257,"ls-participant-card",{"signer":[16],"index":[2],"editable":[1028],"template":[16]},null,{"editable":["modeHandler"]}],[257,"ls-field-format",{"dataItem":[1040,"data-item"]},null,{"dataItem":["selectFieldsHandler"]}],[257,"ls-participant-select",{"selected":[1025],"roles":[16],"selectedRole":[32],"isOpen":[32]},null,{"roles":["handleRoleLoad"]}],[257,"ls-field-alignment",{"dataItem":[1040,"data-item"]}],[257,"ls-field-distribute",{"dataItem":[1040,"data-item"]}],[257,"ls-field-size",{"dataItem":[1040,"data-item"]}],[257,"ls-field-content",{"dataItem":[1040,"data-item"],"showValidationTypes":[4,"show-validation-types"]}],[257,"ls-field-properties-advanced",{"dataItem":[1040,"data-item"],"expanded":[1028]}],[257,"ls-field-placement",{"dataItem":[1040,"data-item"]}],[257,"ls-field-type-display",{"assignee":[2],"fieldType":[1,"field-type"]}],[257,"ls-field-properties-container",{"dataItem":[16,"data-item"],"tabs":[16],"selectedTab":[1537,"selected-tab"]}],[257,"ls-field-dimensions",{"dataItem":[1040,"data-item"]}],[257,"ls-field-footer",{"dataItem":[1040,"data-item"]}],[257,"ls-input-wrapper",{"leadingIcon":[1,"leading-icon"],"select":[4]}],[257,"ls-props-section",{"sectionTitle":[1,"section-title"],"sectionDescription":[1,"section-description"],"row":[4]}],[260,"ls-toggle",{"checked":[1028],"indeterminate":[4]}],[257,"ls-icon",{"name":[1],"solid":[4],"size":[1],"customStyle":[16,"custom-style"]}]]],["ls-field-properties-dropdown.cjs",[[257,"ls-field-properties-dropdown",{"dataItem":[16,"data-item"]}]]],["ls-formfield.cjs",[[260,"ls-formfield",{"name":[1],"fieldId":[1,"field-id"],"label":[1],"as":[1],"value":[1032],"placeholder":[1],"descriptionText":[1,"description-text"],"errorText":[1,"error-text"],"aria":[1],"inputRef":[1,"input-ref"],"infoTooltipText":[1,"info-tooltip-text"],"hoverTooltipText":[1,"hover-tooltip-text"],"disabled":[4],"extraLabel":[1,"extra-label"],"required":[4],"valid":[4],"dirty":[4],"count":[4],"countMax":[2,"count-max"],"buttonClick":[16,"button-click"],"buttonIcon":[1,"button-icon"],"labelIcon":[1,"label-icon"],"fieldIcon":[1,"field-icon"],"_value":[32]},null,{"value":["valueWatcher"]}]]],["ls-tooltip.cjs",[[260,"ls-tooltip",{"reference":[16],"placement":[1],"visible":[32]}]]],["ls-number-input_5.cjs",[[257,"ls-number-input",{"type":[1],"name":[1],"value":[1026],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[256,"ls-radio-input",{"radioId":[1,"radio-id"],"label":[1],"icon":[1],"name":[1],"checked":[4],"disabled":[4],"customStyle":[16,"custom-style"]}],[260,"ls-select-input",{"name":[1],"value":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[257,"ls-text-input",{"type":[1],"name":[1],"value":[1025],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"],"showPassword":[32]}],[257,"ls-textarea-input",{"name":[1],"value":[1],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/ls-document-options_39.cjs.entry.js

@@ -22,9 +22,22 @@ const LsDocumentOptions = class {
     }
     mutate;
     update;
-    alter(changedDetails) {
-        this.update.emit([{ action: 'update', data: { ...this.template, ...changedDetails } }]);
-        this.mutate.emit([{ action: 'update', data: { ...this.template, ...changedDetails } }]);
+    // 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.debounce(diff, 500);
+    }
+    titletimer;
+    debounce(diff, delay) {
+        if (this.titletimer)
+            clearTimeout(this.titletimer);
+        this.titletimer = setTimeout(() => {
+            this.template = { ...this.template, ...diff };
+            const diffs = [{ action: 'update', data: this.template }];
+            this.update.emit(diffs);
+            this.mutate.emit(diffs);
+        }, delay);
     }
     render() {
         function formatDate(isoString) {
@@ -38,7 +51,10 @@ const LsDocumentOptions = class {
         }
         return (index.h(index.Host, null, index.h("div", { class: "ls-editor-infobox" }, index.h("h2", { class: "toolbox-section-title" }, "Template Details"), index.h("p", { class: "toolbox-section-description" }, "Details and insights about the Template.")), index.h("div", { class: 'template-details' }, index.h("div", { class: 'template-detail-section column' }, index.h("p", { class: "template-detail-section-title" }, "Name"), index.h("div", { class: "editButton", onClick: () => {
                 this.editTitle = !this.editTitle;
-            } }, index.h("ls-icon", { name: this.editTitle ? 'check' : 'pencil-alt', size: "18" })), this.editTitle ? (index.h("input", { value: this.template?.title, style: { width: '100%' }, onInput: e => this.alter({ title: e.detail }), onKeyUp: e => {
+            } }, index.h("ls-icon", { name: this.editTitle ? 'check' : 'pencil-alt', size: "18" })), this.editTitle ? (index.h("input", { value: this.template?.title, style: { width: '100%' }, onInput: e => {
+                e.preventDefault();
+                this.alter({ title: e.target.value });
+            }, onKeyUp: e => {
                 if (e.key === 'Enter' || e.keyCode === 13)
                     this.editTitle = false;
             } })) : (index.h("p", null, this.template?.title))), index.h("div", { class: 'template-detail-section' }, index.h("div", null, index.h("p", { class: "template-detail-section-title" }, "Auto Archive"), index.h("p", { class: 'template-detail-section-info' }, "After Sending the Template will be automatically archived.")), index.h("ls-toggle", { checked: this.template?.autoArchive, onValueChange: e => {
@@ -20054,6 +20070,9 @@ function matchData(data) {
     if (prefix === 'rol') {
         syncRoles.bind(this)();
     }
+    if (prefix === 'tpl') {
+        this._template = { ...this._template, ...data.obj };
+    }
 }
 async function syncRoles() {
     var participantManager = this.component.shadowRoot.getElementById('ls-participant-manager');
@@ -24937,6 +24956,7 @@ const LsDocumentViewer = class {
     mutateHandler(event) {
         if (this.token && this.adapter)
             event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => matchData.bind(this)(result)));
+        this.validationErrors = validate.bind(this)(this._template);
     }
     // Updates are internal event between LS controls not to be confused with mutate
     updateHandler(event) {
@@ -25248,7 +25268,7 @@ const LsDocumentViewer = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'ba98f503028b8060b6d7de59ebec65543bf5d34f' }, index.h(index.h.Fragment, null, this.isLoading && index.h("ls-page-loader", { key: 'da33facea5a874f2c372e6929c792223cd1d774f' }), index.h("div", { key: 'ed01cec72df4e2343b2fba0fd0e11078c09db240', class: 'validation-tag-wrapper' }, index.h("ls-validation-tag", { key: 'dec9e222a7235a55b0b7d6742ed942bf3af15e31', validationErrors: this.validationErrors })), index.h("div", { key: '7d6b631c38281c856824897813d1b627d5af17bc', class: "page-header" }, index.h("p", { key: '1137422244e4fa7f62e6ddf3447a6948198f4f77', class: "header-text-1" }, "Template Creation"), index.h("p", { key: '9202737314df5c2238f74bd897a23c892facd100' }, "/"), index.h("p", { key: '8572833ade9d180ad8f39ca7e4bfb3352f3cecc0', class: "header-text-2" }, this._template?.title)), index.h("form", { key: '84a6e0219e003051bbf200527ed275d05a9b1a40', id: "ls-editor-form" }, this.showtoolbox === true ? (index.h("div", { class: "leftBox" }, index.h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, index.h("ls-feature-column", { onManage: manager => {
+        return (index.h(index.Host, { key: '8406b3185fb442e9cc8db99f2e41d12a4fb86e32' }, index.h(index.h.Fragment, null, this.isLoading && index.h("ls-page-loader", { key: 'c9ec4715fbf17ab0fa3e83aa95eef13d805e26d1' }), index.h("div", { key: '3489b169eefc455c24de83364fae56edf9402559', class: 'validation-tag-wrapper' }, index.h("ls-validation-tag", { key: '8dbacf34cd6429887f6ab38338a6d414a9687d26', validationErrors: this.validationErrors })), index.h("div", { key: '8733e49ee8d0cc505685ebbf2d7958a0d23e6418', class: "page-header" }, index.h("p", { key: 'a2c76cc30525f0f50276584f6056eb4f2b2e8c4b', class: "header-text-1" }, "Template Creation"), index.h("p", { key: '2dc05f7b78d33a23360175e6eda7d54c72432164' }, "/"), index.h("p", { key: '5b359ea0c34af996ef03f9b4efdb0ffd1e0cf2c8', class: "header-text-2" }, this._template?.title)), index.h("form", { key: 'b6e6156c94b8e61e297f2ccfe6668e035b758293', id: "ls-editor-form" }, this.showtoolbox === true ? (index.h("div", { id: "ls-left-box", class: "leftBox" }, index.h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, index.h("ls-feature-column", { onManage: manager => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -25287,7 +25307,7 @@ const LsDocumentViewer = class {
             } }))))), index.h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), index.h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' })), !this.displayTable && (index.h("div", { class: this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, index.h("div", { class: 'properties-header' }, index.h("div", { class: 'properties-header-icon' }, index.h("ls-icon", { name: "pre-filled-content" })), index.h("h1", { class: 'properties-header-title' }, "Field Properties"), index.h("button", { class: 'tertiaryGrey', onClick: e => {
                 this.selected = [];
                 e.preventDefault();
-            } }, index.h("ls-icon", { name: "x", size: "20" }))), index.h("ls-field-properties", { id: "my-field-panel" }), index.h("slot", null))))) : (index.h(index.h.Fragment, null)), index.h("ls-toolbar", { key: '300a112fbe7e1b6acfd6ce0ec54cb3a752f55815', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), index.h("div", { key: '92700d27b2be0e8c74952dd1dd4225cd6449f550', id: "ls-mid-area" }, index.h("div", { key: 'a52bf847bd9eb219a0b470ce4e36fc97e315c6c8', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, index.h("div", { key: '9edf12e09ccea929e531ee52a4354c389d055629', id: "ls-document-frame" }, index.h("canvas", { key: '167c02485f5484e32576749c9ffd90ea478ecfcb', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), index.h("ls-editor-table", { key: 'ed899a22082224f5f7cc294b68e4c6b56d60d0d3', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: 'ccf62d6787987a90426cc79139e517c7ac27502c', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: 'afe98039104214aaecf7b5b77497becbe04b830c', editor: this }))))));
+            } }, index.h("ls-icon", { name: "x", size: "20" }))), index.h("ls-field-properties", { id: "my-field-panel" }), index.h("slot", null))))) : (index.h(index.h.Fragment, null)), index.h("ls-toolbar", { key: '0c393716919e6d4bb9c23bd0195ce7323945a173', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), index.h("div", { key: 'dd628626d6f640fec02ecb23cf4a11071f7d1758', id: "ls-mid-area" }, index.h("div", { key: '74242aaf4fb4c793597fc68fb95a654c5b0ff06d', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, index.h("div", { key: '596c3ef95c0160d1ca2a5e582b5b0acf452c4111', id: "ls-document-frame" }, index.h("canvas", { key: 'e4d63148c79927790a45a08731c5d2be6f011b95', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), index.h("ls-editor-table", { key: 'ce85606c532a9c71d4323e81b8d7838d763aef03', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: 'fd1f97abbc0513ae59d9d57544ea40dc195f8768', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: '0667e2279abbe34dbabc8beaf62cfc0161e06893', editor: this }))))));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],
@@ -26271,8 +26291,14 @@ const LsFieldProperties = class {
         else if (this.dataItem && this.dataItem?.length > 1)
             return index.h("ls-field-properties-multiple", { dataItem: this.dataItem });
     }
+    handleKeyDown = (event) => {
+        event.stopPropagation();
+    };
+    handleKeyUp = (event) => {
+        event.stopPropagation();
+    };
     render() {
-        return (index.h(index.Host, { key: '343f2bcd85679323218afc9d2db60127c6f12189' }, this.dataItem && this.renderFields(), index.h("slot", { key: '455d1ddc501882eaf00e864174e5f867f3a96c13' })));
+        return (index.h(index.Host, { key: '1e03ad4e124276ccfa66cea66dce135720ae6f53', onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, this.dataItem && this.renderFields(), index.h("slot", { key: 'af5b649c1263811b7e6ccd7780d102eab5cb57f8' })));
     }
 };
 LsFieldProperties.style = lsFieldPropertiesCss;
@@ -26295,7 +26321,11 @@ const LsFieldPropertiesAdvanced = class {
     isMultiple(dt) {
         return typeof dt.length === 'number';
     }
-    alter(diff) {
+    // 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, bounceDelay = 0) {
+        console.log('Altering advanced props:', diff);
         let diffs = [];
         if (this.isMultiple(this.dataItem)) {
             this.dataItem = this.dataItem.map(di => {
@@ -26305,12 +26335,26 @@ const LsFieldPropertiesAdvanced = class {
                 return { action: 'update', data: { ...di, ...diff } };
             });
         }
-        else if (this.isMultiple(this.dataItem)) {
+        else if (this.isSingle(this.dataItem)) {
             this.dataItem = { ...this.dataItem, ...diff };
             diffs = [{ action: 'update', data: { ...this.dataItem, ...diff } }];
         }
-        this.mutate.emit(diffs);
-        this.update.emit(diffs);
+        if (bounceDelay === 0) {
+            this.update.emit(diffs);
+            this.mutate.emit(diffs);
+        }
+        else {
+            this.debounce(diffs, bounceDelay);
+        }
+    }
+    titletimer;
+    debounce(diffs, delay) {
+        if (this.titletimer)
+            clearTimeout(this.titletimer);
+        this.titletimer = setTimeout(() => {
+            this.update.emit(diffs);
+            this.mutate.emit(diffs);
+        }, delay);
     }
     getValue(key) {
         if (this.isMultiple(this.dataItem)) {
@@ -26322,7 +26366,10 @@ const LsFieldPropertiesAdvanced = class {
         return '';
     }
     render() {
-        return (index.h(index.Host, { key: '24a4b2e3c09727279e41c27327baea962cdcb890' }, index.h("div", { key: 'd30d9fcbf06c72ffa6401c0eca4d0519478c831a', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, index.h("ls-icon", { key: 'b1efd67b7585db8fe2e411ef06a0b8441aa9e1b1', name: this.expanded ? 'expand' : 'collapse', size: "20", solid: true }), index.h("p", { key: 'd08068f7153f435dc3a2a9fa0615caddf00e8535' }, "Advanced Properties")), this.expanded && (index.h("div", { key: '59f04073ef608af89f5208be35a6641701449123', class: 'field-set' }, index.h("ls-props-section", { key: '15d9123478373bb244069627c33ea8033475f8d0', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, index.h("input", { key: '79298a0173c339135c508cf9e2f9b0d74d2ce192', value: this.getValue('fieldOrder'), type: "text", placeholder: "eg. 1", onChange: e => this.alter({ fieldOrder: e.target.value }) })), index.h("ls-props-section", { key: '42a97b7f82ec0fba718f3f20858d9f006eef1c96', sectionTitle: "Ref. Name" }, index.h("input", { key: '597a243802fa0d9d14f9686dcb6c53c5bd60026f', value: this.getValue('link'), placeholder: "eg. checkbox group", onChange: e => this.alter({ link: e.target.value }) })), index.h("ls-props-section", { key: '8d07374186f3d10621fbb19e14d1c95eb79d3c61', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, index.h("select", { key: '30b04fd609f6e301e090bec1b063ba06d821e768', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, index.h("option", { key: '937e2ab3ee370623e22e3f2da8aff7aa9824cf2a', value: "0", selected: this.getValue('linkType') === '0' }, "None"), index.h("option", { key: 'b69255b06207a1748ff9ce54f380e21b0f87b456', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), index.h("option", { key: 'b27aecfc5e9814aa5e1cd29154721decd98a907d', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), index.h("option", { key: '463e6556da3a8b81a7f9612830157b8e53491bd0', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), index.h("ls-props-section", { key: '9056d087b11e42dd5cd4809b560989f77f67d6df', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, index.h("input", { key: '3dcf0a33eecffe721849b4f3ea1c95cdbf6f545e', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
+        return (index.h(index.Host, { key: 'b41038d099fa8bfead03ceb60f847a5ccd709ca7' }, index.h("div", { key: 'f445b43700361da1e2c24f48a4fe5e75d970496f', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, index.h("ls-icon", { key: 'e971c83d54da07adb10c054d18771571039afb57', name: this.expanded ? 'expand' : 'collapse', size: "20", solid: true }), index.h("p", { key: '9964a2e018d92ed41f3c2582496e3d6a3e3ef1ae' }, "Advanced Properties")), this.expanded && (index.h("div", { key: '1082b8d65cd9a8d7b534057d950934c8220aaee7', class: 'field-set' }, index.h("ls-props-section", { key: 'b87b473dd3b58d970fe99c31023183cda2c3c812', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, index.h("input", { key: '65a71d05074ba7f81efa37c501f3ec896b808ea7', value: this.getValue('fieldOrder'), type: "number", placeholder: "eg. 1", onInput: e => {
+                console.log(e);
+                this.alter({ fieldOrder: e.target.value }, 100);
+            }, onChange: () => { console.log('onchange'); } })), index.h("ls-props-section", { key: '7cb8a2f4b7f52654ab545973f47bb1817f029d42', sectionTitle: "Ref. Name" }, index.h("input", { key: 'c78bc57e27a15cca0ca3f5882cbb026c664b4367', value: this.getValue('link'), placeholder: "eg. checkbox group", onInput: e => this.alter({ link: e.target.value }, 300) })), index.h("ls-props-section", { key: '77ade8f9d070dc35cf4967b09e57d886b6330549', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, index.h("select", { key: '538ffba753725e206b29cbba37cc31798a8aed43', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, index.h("option", { key: '4e91e476d038bd2c36cd32d7d2aefe81bba5c5be', value: "0", selected: this.getValue('linkType') === '0' }, "None"), index.h("option", { key: '41960a580f6776a8d7b3cadf21c2fe94487389cf', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), index.h("option", { key: '23a0a2b5f6e081247e4d816aa3e506baa570d242', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), index.h("option", { key: 'f9e20adc34266415b8851ee63b774b7e6bf7d3b5', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), index.h("ls-props-section", { key: 'd4656287b628b8c6cdfcc11e1edef07b328ca5ee', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, index.h("input", { key: 'ec571add5025c9767d738f84d9033492279472d6', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
     }
 };
 LsFieldPropertiesAdvanced.style = lsFieldPropertiesAdvancedCss;
@@ -34063,24 +34110,27 @@ const LsStatusbar = class {
         debounce$1(this.setZoom(parseInt(zoomInput.value) / 100), 700);
     }
     fitWidth() {
-        const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');
-        const scale = frame.clientWidth / this.editor.pageDimensions[0].width;
+        const leftBox = this.editor.component.shadowRoot.getElementById('ls-left-box');
+        const space = window.screen.width - leftBox.clientWidth - 60; // 40 for padding/margin
+        console.log('Space width:', space, 'Page width:', this.editor.pageDimensions[0].width);
+        const scale = space / this.editor.pageDimensions[0].width;
+        console.log(Math.round(scale * 1e2) / 1e2);
         this.setZoom(Math.round(scale * 1e2) / 1e2);
     }
     fitHeight() {
-        const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');
-        const scale = frame.clientHeight / this.editor.pageDimensions[0].height;
+        const space = window.screen.height - 40; // 40 for padding/margin
+        const scale = space / this.editor.pageDimensions[0].height;
         this.setZoom(Math.round(scale * 1e2) / 1e2);
     }
     componentDidLoad() {
         this.zoom = this.editor.zoom;
     }
     render() {
-        return (index.h(index.Host, { key: '5175633d8514ec641b81d161dfbafeaeb90e3dbd' }, index.h("div", { key: '6ee5ab35d555e4685d3434538238b53169db8d34', class: 'status-bar-section' }, index.h("button", { key: '678f92a156d291e903a897af50f219b5e161ef41', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, index.h("ls-icon", { key: 'b8e122bb9aaec0688312b0e6c1c6daf35d46d59e', name: "zoom-out" })), index.h("div", { key: 'bef53222c3b56c3bb532eeda88eae41400bd1599' }, index.h("input", { key: '4edd5b23b7bddca49a33399bf8820e2ec89b6243', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), index.h("button", { key: 'f1762721abfc2888d83575e755a39091042a43b1', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, index.h("ls-icon", { key: 'c71fcecc620fd255f872f5a7b0252414ac7eaac1', name: "zoom-in" }))), index.h("div", { key: '188426f1b5a7201fcdaf7ee83727b5e8f4435713', class: 'status-bar-section' }, index.h("button", { key: '9dd5cd5327d5ab8031233a2b33ec957e0184850c', onClick: () => this.fitWidth() }, index.h("ls-icon", { key: 'b8bd58c1ac2b2a7d760516a01ea2677997ba1b22', name: "fit-width" })), index.h("button", { key: '69c3a81d15b2f56922d730c164097616ca2cf7d3', onClick: () => this.fitHeight() }, index.h("ls-icon", { key: 'ae3ce4a1ae0c5d90080733a4b24bad4e1b1cdd14', name: "fit-height" }))), this.editor?._template?.pageCount > 1 && (index.h("div", { key: '0dfb2b2be045929e185d67670aa2a48c9007757b', class: 'status-bar-section' }, index.h("button", { key: 'db482d9a60eee5772e49dbe83273246c1a2acadb', onClick: () => {
+        return (index.h(index.Host, { key: '15a8b80e0369f9cdc3aff504f55bd07532b4e84f' }, index.h("div", { key: '8751d694e48ad6a50884e7e3f5e0df0c6701a038', class: 'status-bar-section' }, index.h("button", { key: 'f4e0fefd2cf41b69cb43275b25f075433df458cc', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, index.h("ls-icon", { key: 'f1ae6d4f151224ea7eb2b5dfa95561800170b7de', name: "zoom-out" })), index.h("div", { key: '4e77bc96db5d08d97f055b495322e7b686d407ca' }, index.h("input", { key: 'b830130e346460f996ddc47b4ef4b15552168bcd', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), index.h("button", { key: '4370bd3b174429b1d042f0d39679f063c7580f95', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, index.h("ls-icon", { key: 'dbc5d848170851a631e17ae481804f21e9f29a21', name: "zoom-in" }))), index.h("div", { key: 'df68e41014aa2c5580cfcf1fa6e6338603865d9c', class: 'status-bar-section' }, index.h("button", { key: '40a8cade12b425c7802c6e4b6f89f8b91e7bc4aa', onClick: () => this.fitWidth() }, index.h("ls-icon", { key: '09fba9f625fc24c11264a1654d018e67bbd8529b', name: "fit-width" })), index.h("button", { key: '85e20a709e23259bf56b0c2e282ba83571dec6b4', onClick: () => this.fitHeight() }, index.h("ls-icon", { key: '63d499fc88f5714628ba9057c7ac40e8ea1cd315', name: "fit-height" }))), this.editor?._template?.pageCount > 1 && (index.h("div", { key: 'bdebf6dc045d3251039a354b781c6dd972296b25', class: 'status-bar-section' }, index.h("button", { key: 'cd173c3857786e946ec125f1ac9adf9621ea6863', onClick: () => {
                 this.editor.pagePrev();
-            } }, index.h("ls-icon", { key: '7759f954bddc55e06dd870560295abd7d82c62bc', name: "chevron-left" })), index.h("p", { key: 'cc5b3bd1faa52b15865754da73ee107c4dc2a613' }, this.editor?.pageNum, " / ", this.editor?._template?.pageCount), index.h("button", { key: 'd45ab960fb57260719584388a2dffedf883f62b2', onClick: () => {
+            } }, index.h("ls-icon", { key: '8cd55d22e01c8d9c89dadcb205194e04fba1118c', name: "chevron-left" })), index.h("p", { key: '21de4f4cfdd2cb567e99d8d676da10303c245245' }, this.editor?.pageNum, " / ", this.editor?._template?.pageCount), index.h("button", { key: '71786b066ad6e4287a12f20873845d3bc28de90a', onClick: () => {
                 this.editor.pageNext();
-            } }, index.h("ls-icon", { key: 'f23a3ee83510ee41165b720459915a97af0c6061', name: "chevron-right" })))), index.h("slot", { key: '75f3d128912a26f76fa0c1b043668259a3d028f4' })));
+            } }, index.h("ls-icon", { key: '139c259fe653ea229c2d099f467f9b67bfbe28de', name: "chevron-right" })))), index.h("slot", { key: '4b09d328c1f6be78b858cfa832eb1e6849df49d9' })));
     }
 };
 LsStatusbar.style = lsStatusbarCss;