legalesign-document-viewer 0.10.2 → 0.10.4

package/dist/esm/ls-compose-loader_6.entry.js

@@ -0,0 +1,374 @@
+import { r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-CItPoq74.js';
+import { d as dvI18n } from './i18n-Bp8hmhrC.js';
+import { F as FIELD_DEFAULTS } from './fieldDefaults-B3gB_457.js';
+import { d as defaultRolePalette } from './defaultPalette-CwCWCxsI.js';
+
+const lsComposeLoaderCss = () => `:host{position:fixed;display:flex;top:0;left:0;height:100%;width:100%;z-index:3000}:host>*{box-sizing:border-box;margin:0;padding:0}.ls-dv-compose-loader{display:flex;flex-direction:column;background:var(--gray-10, #f7f8fa);width:100vw;height:100vh}.ls-dv-compose-loader__header{border-bottom:1px solid var(--gray-20, #edeff2);pointer-events:none;height:2rem;background:white;display:flex;align-items:center;justify-content:center}.ls-dv-compose-loader__header-skeleton{width:10rem;height:0.75rem;background:linear-gradient(90deg, var(--gray-30, #e0e2e5) 25%, transparent 100%);border-radius:0.625rem;animation:pulse 1.5s infinite}.ls-dv-compose-loader__header-bar{padding:1rem;display:flex;align-items:center}.ls-dv-compose-loader__header-title{font-weight:bold;font-size:1.1rem}.ls-dv-compose-loader__header-docname{margin-left:1rem;color:var(--gray-100, #45484d)}.ls-dv-compose-loader__main{display:flex;padding:1rem;gap:1.5rem;height:calc(100vh - 2.375rem);position:relative}.ls-dv-compose-loader__sidebar{position:absolute;height:100%;width:19rem}.ls-dv-compose-loader__card{display:flex;flex-direction:column;gap:0.75rem;padding:1rem;background:var(--white, #ffffff);border-radius:1.5rem;border:1px solid var(--gray-30, #e0e2e5);width:100%;height:100%;max-height:calc(100vh - 5rem);overflow:hidden}.ls-dv-compose-loader__skeleton,.ls-dv-compose-loader__icon-skeleton{background:linear-gradient(90deg, var(--gray-30, #e0e2e5) 25%, transparent 100%);border-radius:0.625rem;animation:pulse 1.5s infinite}.ls-dv-skeleton-title{width:12.5rem;min-height:1.25rem}.ls-dv-skeleton-line--blue,.ls-dv-skeleton-line--green,.ls-dv-skeleton-line--gray,.ls-dv-skeleton-line{width:12.5rem;height:0.75rem}.ls-dv-skeleton-short--blue,.ls-dv-skeleton-short--green,.ls-dv-skeleton-short--gray,.ls-dv-skeleton-short{width:5rem;height:0.75rem}.ls-dv-skeleton-medium{width:4rem;height:0.75rem}.ls-dv-skeleton-icon{width:1rem;height:1rem}.ls-dv-skeleton-btn{width:7rem;height:0.75rem;background:linear-gradient(90deg, var(white) 25%, transparent 100%)}.ls-dv-skeleton-btn-icon{width:1rem;height:1rem;background:linear-gradient(90deg, var(white) 25%, transparent 100%)}.ls-dv-skeleton-line--blue,.ls-dv-skeleton-short--blue{background:linear-gradient(90deg, var(--blue-50, #78a3fa) 25%, transparent 100%)}.ls-dv-compose-loader__skeleton-box--blue{background:linear-gradient(90deg, var(--blue-30, #bed4fa) 25%, transparent 100%)}.ls-dv-skeleton-line--green,.ls-dv-skeleton-short--green{background:linear-gradient(90deg, var(--green-50, #57e5b1) 25%, transparent 100%)}.ls-dv-compose-loader__skeleton-box--green{background:linear-gradient(90deg, var(--green-30, #9df5d4) 25%, transparent 100%)}.ls-dv-skeleton-line--gray,.ls-dv-skeleton-short--gray{background:linear-gradient(90deg, var(--gray-50, #c8c9cc) 25%, transparent 100%)}.ls-dv-compose-loader__skeleton-box--gray{background:linear-gradient(90deg, var(--gray-30, #e0e2e5) 25%, transparent 100%)}.ls-dv-compose-loader__skeleton-group{display:flex;flex-direction:column;gap:0.5rem}.ls-dv-compose-loader__section{display:flex;flex-direction:column;gap:0.75rem;border:1px solid var(--gray-30, #e0e2e5);padding:0.75rem;border-radius:1.5rem;background:var(--gray-10, #f7f8fa);margin-top:0.25rem;box-shadow:0 1px 2px rgba(0, 0, 0, 0.03)}.ls-dv-compose-loader__section--blue{border-color:var(--blue-30, #bed4fa);background:var(--blue-10, #f0f6ff)}.ls-dv-compose-loader__section--green{border-color:var(--green-30, #9df5d4);background:var(--green-10, #effff9)}.ls-dv-compose-loader__skeleton-box--green,.ls-dv-compose-loader__skeleton-box--blue,.ls-dv-compose-loader__skeleton-box--gray{display:flex;align-items:center;width:5rem;height:1.15rem;border-radius:0.375rem}.ls-dv-compose-loader__row{display:flex;gap:0.75rem;background:var(--white, #ffffff);border:1px solid var(--gray-20, #edeff2);padding:0.5rem 1rem 0.5rem 0.5rem;border-radius:0.625rem;align-items:center}.ls-dv-compose-loader__icon-skeleton--blue{display:flex;align-items:center;justify-content:center;min-width:2.375rem;min-height:2.375rem;background:var(--blue-10, #f0f6ff);border:1px solid var(--blue-30, #bed4fa);border-radius:0.625rem}.ls-dv-compose-loader__icon--blue{width:1.25rem;height:1.25rem;background:linear-gradient(90deg, var(--blue-30, #bed4fa) 25%, transparent 100%);border-radius:0.625rem}.ls-dv-compose-loader__icon-skeleton--green{display:flex;align-items:center;justify-content:center;min-width:2.375rem;min-height:2.375rem;background:var(--green-10, #effff9);border:1px solid var(--green-30, #9df5d4);border-radius:0.625rem}.ls-dv-compose-loader__icon--green{width:1.25rem;height:1.25rem;background:linear-gradient(90deg, var(--green-30, #9df5d4) 25%, transparent 100%);border-radius:0.625rem}.ls-dv-compose-loader__row-content{display:flex;width:100%;align-items:center;justify-content:space-between}.ls-dv-compose-loader__preview{display:flex;justify-content:center;align-items:center;width:100vw;height:100%}.ls-dv-compose-loader__preview-box{background:var(--white, #ffffff);border:1px solid var(--gray-30, #e0e2e5);aspect-ratio:1/1.414;height:100%;margin-top:7rem;min-width:40vw;box-shadow:0 4px 24px rgba(0, 0, 0, 0.12)}.ls-dv-compose-loader__button{position:absolute;top:1rem;right:1rem;border-radius:1rem;padding:0.25rem;background:var(--white, #ffffff)}.ls-dv-compose-loader__action-btn{border-radius:1rem;padding:1rem;display:flex;align-items:center;gap:0.75rem;border:none;background:var(--primary-60, #4456f6);cursor:not-allowed}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}`;
+
+const LsComposeLoader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: 'e1f99582d58d99abd5809ba05b5d9ed7309287c8' }, h("div", { key: '5077337c9190f19f5e82d416db40e2fcb71f1072', class: "ls-dv-compose-loader" }, h("div", { key: '838d9f1e0eba318cadccf510cd4444d309ba557c', class: "ls-dv-compose-loader__header" }, h("div", { key: '9e60e37ec52aa6c6a014589378f0b63cbf71c721', class: "ls-dv-compose-loader__header-skeleton" })), h("div", { key: 'ffbff3e9252c796df5d113a912e583b7516f4075', class: "ls-dv-compose-loader__main" }, h("div", { key: '000931802c93209a2a068ece5740fa2762f7a132', class: "ls-dv-compose-loader__sidebar" }, h("div", { key: '0091adf1e5409b114d855e03d84bc0334bc2a50c', class: "ls-dv-compose-loader__card" }, h("div", { key: '209841818cd824ba2a50dc60e112c091c2dd99d8', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-title" }), h("div", { key: '717dd261cee0e1b9b37988777d62d3ea7c36f665', class: "ls-dv-compose-loader__skeleton-group" }, h("div", { key: '5141c21a1890e1899755de5064c30aa29358f223', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-line" }), h("div", { key: '407c853907c1966b48312a68cc53f61a143d1104', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-short" })), h("div", { key: '9cbc0365214b110c19ff647660c5a621bd562290', class: "ls-dv-compose-loader__section ls-dv-compose-loader__section--gray" }, h("div", { key: '3564315d58632a63667d0cd1aab0947257aa0b8d', class: "ls-dv-compose-loader__skeleton-box--gray" }), h("div", { key: '80bc729e6bc82561a56c4e9c4db8d3584e9d6d4b', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-line--gray" }), h("div", { key: 'f2ac5094cc413afbeb3f5d33790b48f4471b7357', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-short--gray" })), h("div", { key: '6b68d31bb6e2d813d945673d19035021900aafe6', class: "ls-dv-compose-loader__section ls-dv-compose-loader__section--blue" }, h("div", { key: 'c0f07211738a0aaf8efbde0658acf0fef834ae5c', class: "ls-dv-compose-loader__skeleton-box--blue" }), h("div", { key: 'cbf5f89d6677c3cadbda46abcfdc9ac2da69bd67', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-line--blue" }), h("div", { key: '69f74c5b87d625a8d839b53a67d0c7c98cdaaaee', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-short--blue" }), h("div", { key: '8228e6f35fc27b311e690816b10e101b8f814316', class: "ls-dv-compose-loader__row" }, h("div", { key: 'c28d870411e9a4d5438496fccd1bf403641e22ce', class: "ls-dv-compose-loader__icon-skeleton--blue" }, h("div", { key: '58a9a6ebbc5da9287aaca305c0db2f8709c6ee42', class: "ls-dv-compose-loader__icon--blue" })), h("div", { key: 'cd55e4c219796abeb97f8abe11be47762db2aa30', class: "ls-dv-compose-loader__row-content" }, h("div", { key: 'dfb966b89d74369cd9c2409e2084bf34fbbd3ae5', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-medium" }), h("div", { key: '264506cd827e9370930682ec27e9a45ad6f493b4', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-icon" }))), h("div", { key: 'a9bdef4b1f2c7c169644c794140d09d43a3b8a9c', class: "ls-dv-compose-loader__row" }, h("div", { key: 'aa4234eb3263b5c87d46026d537c89f464bcc63f', class: "ls-dv-compose-loader__icon-skeleton--blue" }, h("div", { key: 'd801a8580ea210663725a956bb0ba9adba3c226d', class: "ls-dv-compose-loader__icon--blue" })), h("div", { key: 'e1a1292261f410358f0ebcebdce22da7931bd7ef', class: "ls-dv-compose-loader__row-content" }, h("div", { key: '9800d10a84e73f17770cb186ac5bad592d5ba549', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-medium" }), h("div", { key: '31a802e67f7b659b254205650766a3114fa9934d', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-icon" }))), h("div", { key: '8a4b7cfb2e311a5ad77402273aa1e047ec054db5', class: "ls-dv-compose-loader__row" }, h("div", { key: '340a2126847902df9fe35c06f19addd0f579c911', class: "ls-dv-compose-loader__icon-skeleton--blue" }, h("div", { key: 'be37b9eed83119110e1c5734ca161e8b2e1d077a', class: "ls-dv-compose-loader__icon--blue" })), h("div", { key: '63246c32466ed678757a1e0321b7f3e0e22e2d44', class: "ls-dv-compose-loader__row-content" }, h("div", { key: 'f73213a151c31592f8c8fc604bd184db0eac4644', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-medium" }), h("div", { key: '63cd439ed31fb8083895bc1712a87c8279af5245', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-icon" })))), h("div", { key: '94645fcc19aa0f9c318fde24edeeb1fc5b1d3551', class: "ls-dv-compose-loader__section ls-dv-compose-loader__section--green" }, h("div", { key: '0d4b691a22942ab01149fe1692856b1877addf0a', class: "ls-dv-compose-loader__skeleton-box--green" }), h("div", { key: '1ca7d6f49b5f76a6f3d6625a411ad5b185dbec39', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-line--green" }), h("div", { key: '57f4278240b711603f9ee27ddcb3cfd0fb099b02', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-short--green" }), h("div", { key: '32cc8caccae045615108ce298df29549eb3c91ab', class: "ls-dv-compose-loader__row" }, h("div", { key: 'e9fba84a085a280cbdabf3b0e8d5a19a6c114c55', class: "ls-dv-compose-loader__icon-skeleton--green" }, h("div", { key: 'ca6c29a8ba24fb4e11869bcacc34f296e4405f8a', class: "ls-dv-compose-loader__icon--green" })), h("div", { key: '1bd970ca47b350c7c56213aeba26695a5dd33373', class: "ls-dv-compose-loader__row-content" }, h("div", { key: '563a435de608bca43419fedb003d9ee36bead59d', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-medium" }), h("div", { key: '0db03863266d9cf880ff375d54015fceb668477b', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-icon" }))), h("div", { key: '287e68288171445ae0161c1f21b3c6bed847a2a8', class: "ls-dv-compose-loader__row" }, h("div", { key: 'adc382c2c0084d683551189a1c5ce5423dd85c7f', class: "ls-dv-compose-loader__icon-skeleton--green" }, h("div", { key: '130e387fb2e50c770ecec69d432f6cade1b6db14', class: "ls-dv-compose-loader__icon--green" })), h("div", { key: '83ecc674440bcd05d2bc34bdcc10105a72ecb4aa', class: "ls-dv-compose-loader__row-content" }, h("div", { key: '427902b4201c4f99adce38a1e3f1497fdd1c9522', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-medium" }), h("div", { key: '49b470a57864a5095b9f96de56ddafc931c6ae59', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-icon" }))), h("div", { key: 'a2e367cbfd60a81793504fd174bf130ecf45981b', class: "ls-dv-compose-loader__row" }, h("div", { key: '4d8723551ecce9779a81ebd1f9fee4bc046fe8b9', class: "ls-dv-compose-loader__icon-skeleton--green" }, h("div", { key: '1112d8fdcd72fc5d388f3867f2123073faedcd55', class: "ls-dv-compose-loader__icon--green" })), h("div", { key: '677bff37d1832517e9fc680982362993daed4e24', class: "ls-dv-compose-loader__row-content" }, h("div", { key: 'c7887edd9e3d29c3608ff8e54a2739cd2beb9c51', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-medium" }), h("div", { key: '956827f8e2d38347fa4dc038074ca2538f65cb47', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-icon" })))))), h("div", { key: '88aff9b29f6890ce91f5e2fc8665397a9371b6cf', class: "ls-dv-compose-loader__preview" }, h("div", { key: '84eb813a4d2aa99974dcaf84d24d4b89bc4af557', class: "ls-dv-compose-loader__preview-box" })), h("div", { key: '3282bb62faa374a02db961be5dbb76467e6336bd', class: "ls-dv-compose-loader__button" }, h("button", { key: '39d7c028d6a718fe2c1137662b68e3b70c4b2c19', class: "ls-dv-compose-loader__action-btn", "aria-hidden": "true", tabindex: -1 }, h("div", { key: '76ac55a38a3544d8684a4f5610488385d0aece1b', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-btn" }), h("div", { key: '300ed45995c635df8ee925b37da42e8f05290d86', class: "ls-dv-compose-loader__skeleton ls-dv-skeleton-btn-icon" })))))));
+    }
+};
+LsComposeLoader.style = lsComposeLoaderCss();
+
+const lsEditorTableCss = () => `: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}`;
+
+const LsEditorTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get component() { return getElement(this); }
+    /**
+  * 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: '465bf3765c06cf044bacd292a712c06290ac3770' }, h("table", { key: '906c3270a0758c8eb589d4d4dab85bdfedbfdded', id: "ls-editor-table" }), h("slot", { key: 'c1b68a6e6ab42c27a81b7557600d09fc057a2338' })));
+    }
+};
+LsEditorTable.style = lsEditorTableCss();
+
+const lsLeftBarCss = () => `*,*::before,*::after{box-sizing:border-box}*{margin:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}:host{display:flex;height:100%;max-height:100%;overflow:hidden}:host *{scrollbar-width:none}:host *::-webkit-scrollbar{display:none}.ls-dv-hidden{visibility:hidden;display:none;width:0px}#my-field-panel{position:relative;height:calc(100% - 4.313rem)}.ls-dv-left-box{position:relative;border-radius:1.75rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);width:21.25rem;margin:1rem;min-width:21.25rem;height:calc(100% - 2rem);max-height:calc(100% - 2rem);overflow:hidden;z-index:1000;left:0;top:0}.ls-dv-left-box-inner{position:relative;display:flex;height:100%;max-height:100%;overflow:hidden;padding:0.75rem;gap:0.75rem}.ls-dv-toolbox{display:flex;flex-direction:column;width:100%;height:100%;border-radius:1.25rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--gray-10, #f7f8fa);padding:0.75rem;gap:1rem;overflow-y:auto}.ls-dv-compose-toolbox{display:flex;flex-direction:column;width:100%;height:100%;overflow:none;border-radius:0;border:none;background:white;padding:0.25rem}.ls-dv-recipients-box{position:relative;display:flex;flex-direction:column;gap:0.75rem;overflow-y:auto;padding:0.75rem 0.25rem 0.25rem 0.25rem;height:100%}.ls-dv-scroll-gradient-top{position:absolute;top:5.9375rem;left:0;width:100%;height:1rem;background:linear-gradient(to bottom, white, rgba(255, 255, 255, 0));pointer-events:none;z-index:100}.ls-dv-scroll-gradient-bottom{position:absolute;bottom:1rem;left:0.75rem;width:calc(100% - 1.5rem);height:1rem;background:linear-gradient(to top, white, rgba(255, 255, 255, 0));pointer-events:none;z-index:100}.ls-dv-editor-infobox{padding:0.125rem 0.5rem 0.125rem 0.5rem}.ls-dv-toolbox-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;}.ls-dv-toolbox-section-description{color:var(--gray-80, #6f7176);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem}.ls-dv-fields-box{display:flex;flex-direction:column;gap:0.75rem}.ls-dv-field-properties-outer{position:relative;height:100%}.ls-dv-properties-header{display:flex;padding:1rem;gap:0.75rem;align-items:center;border-bottom:1px solid var(--gray-20, #edeff2)}.ls-dv-properties-header-title{color:var(--gray-100, #45484d);width:100%;font-size:1.5rem;font-style:normal;font-weight:500;line-height:2rem;}.ls-dv-properties-header-icon{display:flex;padding:0.5rem;border-radius:0.625rem;background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}p{color:var(--gray-80, #6f7176);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.ls-dv-tertiary-grey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #6f7176)}button.ls-dv-tertiary-grey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}`;
+
+const LsLeftBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.managerChange = createEvent(this, "managerChange", 7);
+        this.clearSelected = createEvent(this, "clearSelected", 7);
+    }
+    get el() { return getElement(this); }
+    mode = 'editor';
+    selected = [];
+    manager;
+    signer;
+    filtertoolbox = null;
+    template;
+    recipients;
+    validationErrors = [];
+    fieldTypeSelected;
+    displayTable = false;
+    busy = false;
+    selectedDataItems = [];
+    managerChange;
+    clearSelected;
+    managerWatchHandler(newManager) {
+        if (newManager === 'document') {
+            const dm = this.el.shadowRoot.getElementById('ls-document-options');
+            if (dm)
+                dm.template = this.template;
+        }
+        else if (newManager === 'participant') {
+            const pm = this.el.shadowRoot.getElementById('ls-participant-manager');
+            if (pm)
+                pm.template = this.template;
+        }
+        else if (newManager === 'validation') {
+            const vm = this.el.shadowRoot.getElementById('ls-validation-manager');
+            if (vm)
+                vm.validationErrors = this.validationErrors;
+        }
+    }
+    componentDidLoad() {
+        const leftBox = this.el.shadowRoot.getElementById('ls-left-box');
+        if (leftBox) {
+            leftBox.addEventListener('mousedown', e => e.stopPropagation());
+            leftBox.addEventListener('mouseup', e => e.stopPropagation());
+            leftBox.addEventListener('mousemove', e => e.stopPropagation());
+        }
+    }
+    signerChanged() {
+        try {
+            const recipientManager = this.el.shadowRoot.getElementById('ls-recipient-manager');
+            if (recipientManager) {
+                const recipientsBox = recipientManager.querySelector('.ls-dv-recipients-box');
+                if (recipientsBox) {
+                    recipientsBox.scrollTo({ top: 0, behavior: 'smooth' });
+                }
+            }
+        }
+        catch (e) {
+            // fail silently
+        }
+    }
+    showTool(fieldFormType) {
+        return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
+    }
+    checkType(type) {
+        if (this.mode === 'compose' && this.recipients) {
+            return this.recipients.find(r => r.roleType === type && r.signerIndex === this.signer) !== undefined;
+        }
+        else if (this.template) {
+            return this.template.roles.find(r => r.roleType === type && r.signerIndex === this.signer) !== undefined;
+        }
+        return false;
+    }
+    renderFieldProperties() {
+        if (this.displayTable || this.selected.length === 0)
+            return null;
+        return (h("div", { class: "ls-dv-field-properties-outer" }, h("div", { class: "ls-dv-properties-header" }, h("div", { class: "ls-dv-properties-header-icon" }, h("ls-icon", { name: "pre-filled-content-icon" })), h("h1", { class: "ls-dv-properties-header-title" }, dvI18n.t('viewer.fieldproperties')), h("button", { class: "ls-dv-tertiary-grey", onClick: e => {
+                this.clearSelected.emit();
+                e.preventDefault();
+            }, style: { borderRadius: '0.75rem' }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('viewer.closepropertiespanel') }, h("ls-icon", { name: "x-icon", size: 20 }))), h("ls-field-properties", { id: "my-field-panel", dataItem: this.selectedDataItems, template: this.template, readonly: this.template?.locked || false })));
+    }
+    renderToolbox() {
+        return (h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'ls-dv-toolbox' : 'ls-dv-hidden' }, h("div", { class: "ls-dv-editor-infobox" }, h("h2", { class: "ls-dv-toolbox-section-title" }, dvI18n.t('toolbox.title')), h("p", { class: "ls-dv-toolbox-section-description" }, dvI18n.t('toolbox.description'))), h("div", { class: "ls-dv-fields-box" }, this.signer > 0 && this.showTool('signature') && !this.checkType('APPROVER') && (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: dvI18n.t('toolbox.signature'), defaultHeight: FIELD_DEFAULTS['signature'].defaultHeight, defaultWidth: FIELD_DEFAULTS['signature'].defaultWidth, validation: 0, icon: "signature-icon", tooltip: dvI18n.t('toolbox.signaturetooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'signature' })), this.signer === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { elementType: "admin", formElementType: "auto sign", label: dvI18n.t('toolbox.autosign'), defaultHeight: FIELD_DEFAULTS['auto sign'].defaultHeight, defaultWidth: FIELD_DEFAULTS['auto sign'].defaultWidth, validation: 3000, icon: "auto-sign-icon", tooltip: dvI18n.t('toolbox.autosigntooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'auto sign' })), this.showTool('text') && (h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: dvI18n.t('toolbox.text'), defaultHeight: FIELD_DEFAULTS['text'].defaultHeight, defaultWidth: FIELD_DEFAULTS['text'].defaultWidth, validation: 0, icon: "text-icon", tooltip: dvI18n.t('toolbox.texttooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'text' })), this.signer > 0 && this.showTool('signing date') && (h("ls-toolbox-field", { elementType: "text", formElementType: "signing date", label: dvI18n.t('toolbox.signingdate'), defaultHeight: FIELD_DEFAULTS['signing date'].defaultHeight, defaultWidth: FIELD_DEFAULTS['signing date'].defaultWidth, validation: 32, icon: "auto-date-icon", tooltip: dvI18n.t('toolbox.signingdatetooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'signing date' })), this.showTool('date') && (h("ls-toolbox-field", { elementType: "text", formElementType: "date", label: dvI18n.t('toolbox.date'), defaultHeight: FIELD_DEFAULTS['date'].defaultHeight, defaultWidth: FIELD_DEFAULTS['date'].defaultWidth, validation: 4, icon: "calender-icon", tooltip: dvI18n.t('toolbox.datetooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'date' })), this.showTool('email') && (h("ls-toolbox-field", { elementType: "text", formElementType: "email", label: dvI18n.t('toolbox.email'), defaultHeight: FIELD_DEFAULTS['email'].defaultHeight, defaultWidth: FIELD_DEFAULTS['email'].defaultWidth, validation: 1, icon: "at-symbol-icon", tooltip: dvI18n.t('toolbox.emailtooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'email' })), this.showTool('initials') && (h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: dvI18n.t('toolbox.initials'), defaultHeight: FIELD_DEFAULTS['initials'].defaultHeight, defaultWidth: FIELD_DEFAULTS['initials'].defaultWidth, validation: 2000, icon: "initials-icon", tooltip: dvI18n.t('toolbox.initialstooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'initials' })), this.showTool('number') && (h("ls-toolbox-field", { elementType: "text", formElementType: "number", label: dvI18n.t('toolbox.number'), defaultHeight: FIELD_DEFAULTS['number'].defaultHeight, defaultWidth: FIELD_DEFAULTS['number'].defaultWidth, validation: 50, icon: "hashtag-icon", tooltip: dvI18n.t('toolbox.numbertooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'number' })), this.showTool('dropdown') && (h("ls-toolbox-field", { elementType: "text", formElementType: "dropdown", label: dvI18n.t('toolbox.dropdown'), defaultHeight: FIELD_DEFAULTS['dropdown'].defaultHeight, defaultWidth: FIELD_DEFAULTS['dropdown'].defaultWidth, validation: 20, icon: "dropdown-icon", tooltip: dvI18n.t('toolbox.dropdowntooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'dropdown' })), this.showTool('checkbox') && (h("ls-toolbox-field", { elementType: "text", formElementType: "checkbox", label: dvI18n.t('toolbox.checkbox'), defaultHeight: FIELD_DEFAULTS['checkbox'].defaultHeight, defaultWidth: FIELD_DEFAULTS['checkbox'].defaultWidth, validation: 25, icon: "check-icon", tooltip: dvI18n.t('toolbox.checkboxtooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'checkbox' })), this.signer > 0 && this.showTool('regex') && (h("ls-toolbox-field", { elementType: "text", formElementType: "regex", label: dvI18n.t('toolbox.regex'), defaultHeight: FIELD_DEFAULTS['regex'].defaultHeight, defaultWidth: FIELD_DEFAULTS['regex'].defaultWidth, validation: 93, icon: "code-icon", tooltip: dvI18n.t('toolbox.regextooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'regex' })), this.signer > 0 && this.showTool('image') && (h("ls-toolbox-field", { elementType: "text", formElementType: "image", label: dvI18n.t('toolbox.image'), defaultHeight: FIELD_DEFAULTS['image'].defaultHeight, defaultWidth: FIELD_DEFAULTS['image'].defaultWidth, validation: 90, icon: "photograph-icon", tooltip: dvI18n.t('toolbox.imagetooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'image' })), this.signer > 0 && this.showTool('file') && (h("ls-toolbox-field", { elementType: "text", formElementType: "file", label: dvI18n.t('toolbox.file'), defaultHeight: FIELD_DEFAULTS['file'].defaultHeight, defaultWidth: FIELD_DEFAULTS['file'].defaultWidth, validation: 74, icon: "upload-icon", tooltip: dvI18n.t('toolbox.filetooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'file' })), this.signer > 0 && this.showTool('drawn') && (h("ls-toolbox-field", { elementType: "text", formElementType: "drawn", label: dvI18n.t('toolbox.drawn'), defaultHeight: FIELD_DEFAULTS['drawn'].defaultHeight, defaultWidth: FIELD_DEFAULTS['drawn'].defaultWidth, validation: 90, icon: "pencil-icon", tooltip: dvI18n.t('toolbox.drawntooltip'), signer: this.signer, isSelected: this.fieldTypeSelected?.formElementType === 'drawn' })))));
+    }
+    renderEditor() {
+        return (h("div", { id: "ls-left-box", class: "ls-dv-left-box" }, h("div", { class: !this.selected || this.selected.length === 0 ? 'ls-dv-left-box-inner' : 'ls-dv-hidden' }, h("ls-feature-column", { mode: this.mode, manager: this.manager, onManage: manager => this.managerChange.emit(manager.detail) }), this.renderToolbox(), h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'ls-dv-toolbox' : 'ls-dv-hidden', activeSigner: this.signer, template: this.template, busy: this.busy }), h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'ls-dv-toolbox' : 'ls-dv-hidden' }), h("ls-validation-manager", { id: "ls-validation-manager", class: this.manager === 'validation' ? 'ls-dv-toolbox' : 'ls-dv-hidden' })), this.renderFieldProperties()));
+    }
+    renderCompose() {
+        return (h("div", { id: "ls-left-box", class: "ls-dv-left-box" }, h("div", { class: !this.selected || this.selected.length === 0 ? 'ls-dv-left-box-inner' : 'ls-dv-hidden' }, h("ls-recipient-manager", { id: "ls-recipient-manager", class: "ls-dv-compose-toolbox" }, h("div", { class: "ls-dv-scroll-gradient-top" }), h("div", { class: "ls-dv-scroll-gradient-bottom" }), h("ls-validation-tag", { validationErrors: this.validationErrors, style: { position: 'absolute', top: '1.125rem', right: '1rem' }, type: "compose" }), h("div", { class: "ls-dv-recipients-box" }, this.recipients &&
+            this.recipients.map(recipient => (h("ls-recipient-card", { recipient: recipient, activeRecipient: this.signer, filtertoolbox: this.filtertoolbox, template: this.template, validationErrors: this.validationErrors, fieldTypeSelected: this.fieldTypeSelected, "data-signer-index": recipient.signerIndex })))), h("slot", { name: "recipient-panel" }))), this.renderFieldProperties()));
+    }
+    render() {
+        return this.mode === 'editor' ? this.renderEditor() : this.mode === 'compose' ? this.renderCompose() : null;
+    }
+    static get watchers() { return {
+        "manager": ["managerWatchHandler"],
+        "signer": ["signerChanged"]
+    }; }
+};
+LsLeftBar.style = lsLeftBarCss();
+
+const lsLoadingLogoCss = () => `.container{display:block;line-height:0}.logo-svg{display:block;width:100%;height:100%}@keyframes sequential-back{0%{opacity:0;transform:scale(0.3)}2%{opacity:0.3;transform:scale(0.5)}4%{opacity:0.6;transform:scale(0.7)}6%{opacity:0.8;transform:scale(0.85)}8%{opacity:1;transform:scale(1)}22%{opacity:1;transform:scale(1)}55%{opacity:1;transform:scale(1)}64%{opacity:1;transform:scale(1)}65%{opacity:0.9;transform:scale(0.95)}66.2%{opacity:0.75;transform:scale(0.88)}67.2%{opacity:0.6;transform:scale(0.8)}68%{opacity:0.4;transform:scale(0.7)}68.8%{opacity:0.25;transform:scale(0.6)}69.5%{opacity:0.1;transform:scale(0.45)}70%{opacity:0.05;transform:scale(0.35)}71%{opacity:0;transform:scale(0.3)}100%{opacity:0;transform:scale(0.3)}}@keyframes sequential-middle{0%,16%{opacity:0;transform:scale(0.3)}18%{opacity:0.3;transform:scale(0.5)}20%{opacity:0.6;transform:scale(0.7)}22%{opacity:0.8;transform:scale(0.85)}24%{opacity:1;transform:scale(1)}36%,65%,70%{opacity:1;transform:scale(1)}71%{opacity:0.9;transform:scale(0.95)}72.2%{opacity:0.75;transform:scale(0.88)}73.2%{opacity:0.6;transform:scale(0.8)}74%{opacity:0.4;transform:scale(0.7)}74.8%{opacity:0.25;transform:scale(0.6)}75.5%{opacity:0.1;transform:scale(0.45)}76%{opacity:0.05;transform:scale(0.35)}77%,100%{opacity:0;transform:scale(0.3)}}@keyframes sequential-front{0%,32%{opacity:0;transform:scale(0.3)}34%{opacity:0.3;transform:scale(0.5)}36%{opacity:0.6;transform:scale(0.7)}38%{opacity:0.8;transform:scale(0.85)}40%{opacity:1;transform:scale(1)}60%,76%{opacity:1;transform:scale(1)}77%{opacity:0.9;transform:scale(0.95)}78.2%{opacity:0.75;transform:scale(0.88)}79.2%{opacity:0.6;transform:scale(0.8)}80%{opacity:0.4;transform:scale(0.7)}80.8%{opacity:0.25;transform:scale(0.6)}81.5%{opacity:0.1;transform:scale(0.45)}82%{opacity:0.05;transform:scale(0.35)}83%,100%{opacity:0;transform:scale(0.3)}}.sequential-back{animation:sequential-back 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;transform-origin:center}.sequential-middle{animation:sequential-middle 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;transform-origin:center}.sequential-front{animation:sequential-front 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;transform-origin:center}`;
+
+const LsLoadingLogo = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.size = 48;
+    }
+    render() {
+        const style = { width: `${this.size}px`, height: `${this.size}px` };
+        if (this.colour && this.colour !== 'none') {
+            style.color = this.colour.startsWith('var(') || this.colour.startsWith('#') || this.colour.startsWith('rgb')
+                ? this.colour
+                : `var(--${this.colour}-50)`;
+        }
+        return (h("div", { key: 'aea250a8239e436e11b450717d2307b4513f1ef6', class: "container", style: style }, h("svg", { key: 'ce9d36c3305a8006a0df2316d370038d3cbcd44c', class: "logo-svg", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 20 20" }, h("path", { key: '7717fcbb570cd9d413dd413d72e0473ec9aa52ca', class: "sequential-front", d: "M9.11077 0.940012C8.98702 0.868406 8.83446 0.868297 8.71061 0.939725C8.58675 1.01115 8.51044 1.14326 8.51044 1.28623V2.34625C8.51044 2.48927 8.5868 2.62141 8.71071 2.69282L14.6321 6.10546C14.818 6.21257 14.9325 6.41078 14.9325 6.6253V13.4621C14.9325 13.6044 15.0081 13.7359 15.131 13.8076L16.0285 14.3311C16.1522 14.4033 16.305 14.4038 16.4292 14.3325C16.5534 14.2611 16.63 14.1288 16.63 13.9856V5.52152C16.63 5.37876 16.5539 5.24681 16.4303 5.17531L9.11077 0.940012Z", fill: "currentColor" }), h("path", { key: 'cbd622c3b157465c471d4b999feb0548a4098f6d', class: "sequential-middle", d: "M6.35621 2.52413C6.23246 2.45251 6.07989 2.45239 5.95603 2.52381C5.83217 2.59524 5.75585 2.72735 5.75585 2.87033V3.94156C5.75585 4.08504 5.83269 4.21752 5.95722 4.28876L8.20838 5.57659C8.39518 5.68345 8.51044 5.88218 8.51044 6.09739V9.75268C8.51044 9.89534 8.58642 10.0272 8.70984 10.0987L11.8717 11.9316C12.0569 12.0389 12.1708 12.2367 12.1708 12.4507V16.1015C12.1708 16.2434 12.2461 16.3747 12.3685 16.4465L13.2784 16.9801C13.4021 17.0526 13.5552 17.0534 13.6796 16.9821C13.804 16.9108 13.8808 16.7784 13.8808 16.635V7.10976C13.8808 6.96701 13.8047 6.83507 13.6811 6.76356L6.35621 2.52413Z", fill: "currentColor" }), h("path", { key: 'f48f2302c0e6fc4ef123647cd6c3b56bad69f974', class: "sequential-back", d: "M3.60419 4.12505C3.48039 4.05421 3.32824 4.05465 3.20486 4.1262C3.08147 4.19776 3.00552 4.3296 3.00552 4.47223V15.0385C3.00552 15.1812 3.08151 15.3131 3.20494 15.3846L10.5339 19.6323C10.6576 19.704 10.8102 19.7042 10.9341 19.6328C11.0581 19.5614 11.1344 19.4293 11.1344 19.2862V12.9374C11.1344 12.795 11.0587 12.6634 10.9357 12.5917L7.78047 10.7551C7.59587 10.6476 7.48232 10.4501 7.48232 10.2365V6.57621C7.48232 6.43276 7.40549 6.30029 7.28098 6.22904L3.60419 4.12505Z", fill: "currentColor" }))));
+    }
+};
+LsLoadingLogo.style = lsLoadingLogoCss();
+
+const version = "0.10.4";
+
+const lsStatusbarCss = () => `:host{position:fixed;z-index:1000;right:1rem;bottom:1rem;display:flex;flex-direction:row;gap:0.5rem;align-items:end;height:2.25rem;overflow:visible}.ls-dv-controls-bar{display:flex;flex-direction:row;background-color:white;border:1px solid var(--gray-30, #e0e2e5);box-shadow:0px 4px 16px rgba(0, 0, 0, 0.1);border-radius:1.125rem}*{margin:0;padding:0;box-sizing:border-box}.ls-dv-status-bar-section{display:flex;flex-direction:row;align-items:center;gap:0.75rem;padding:0.5rem 0.75rem}.ls-dv-controls-bar>:not(:nth-child(1)){border-left:1px solid var(--gray-30, #e0e2e5)}button{border:0}button:hover{color:var(--gray-100, #45484d);border-radius:0.625rem}button:disabled{color:var(--gray-40, #d8d9dc);cursor:not-allowed}input[type=range]{-webkit-appearance:none;width:100%;height:0.5rem;background:var(--gray-20, #edeff2);border-radius:0.25rem;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0.5rem;height:0.5rem;background:var(--gray-70, #939599);border-radius:50%;cursor:pointer}input[type=range]::-moz-range-thumb{width:0.5rem;height:0.5rem;background:var(--gray-70, #939599);border:none;border-radius:50%;cursor:pointer}input[type=range]::-moz-range-track{background:var(--gray-20, #edeff2);height:0.5rem;border-radius:0.25rem}input[type=range]::-webkit-slider-runnable-track{background:var(--gray-20, #edeff2);height:0.5rem;border-radius:0.25rem}p{color:var(--gray-80, #6f7176);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}span{color:var(--gray-80, #6f7176);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.ls-dv-button-link,.ls-dv-button-link:hover{all:unset}select{appearance:none;height:2.25rem}.ls-dv-input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}.ls-dv-has-leading-icon{padding-left:2.5rem}button{all:unset;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-80, #6f7176);text-transform:capitalize}button.ls-dv-tertiary-grey:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-group{display:flex;border-radius:0.625rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.ls-dv-button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6f7176)}.ls-dv-button-group button:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-group>:first-child{border-radius:0.625rem 0 0 0.625rem}.ls-dv-button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.ls-dv-button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}.ls-dv-thumbnail-popover{position:absolute;bottom:3rem;right:0;background:white;border:1px solid var(--gray-30, #e0e2e5);border-radius:1.75rem;box-shadow:0px 8px 24px rgba(0, 0, 0, 0.15);padding:0.75rem;z-index:1001;max-height:80vh;overflow:hidden;display:flex;flex-direction:column}.ls-dv-thumbnail-grid{background:var(--gray-10, #f7f8fa);padding:0.75rem;border-radius:1rem;border:1px solid var(--gray-30, #e0e2e5);display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:1rem;overflow-y:auto;max-height:100%}.ls-dv-thumbnail-wrapper{display:flex;flex-direction:column;align-items:center;gap:0.25rem;cursor:pointer}.ls-dv-thumbnail-wrapper>span:last-child{font-size:var(--text-xs, 0.75rem);color:var(--gray-80, #6f7176);font-weight:500}.ls-dv-thumbnail{border:1px solid var(--gray-30, #e0e2e5);border-radius:0.5rem;cursor:pointer;transition:border-color 0.15s}.ls-dv-thumbnail:hover{border-color:var(--primary-40, #79adfc);box-shadow:0 0 0 2px rgba(163, 180, 249, 0.3)}.ls-dv-thumbnail.active{border-color:var(--primary-60, #4456f6);outline:0.25rem solid var(--primary-30, #9dc3fc);box-shadow:var(--shadow-md)}.ls-dv-thumbnail-dots{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;margin-top:0.25rem}.ls-dv-thumbnail-dot{width:0.5rem;height:0.5rem;border-radius:50%;display:inline-block;border:2px solid var(--dot-color-60);background-color:var(--dot-color-40)}.ls-dv-version{position:absolute;bottom:100%;right:0;color:var(--gray-50, #afb0b2);font-size:0.625rem;padding-bottom:0.25rem}`;
+
+const LsStatusbar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get component() { return getElement(this); }
+    /**
+     * The zoom or scale level 100 === 100%.
+     * {number}
+     */
+    zoom;
+    page;
+    pageCount;
+    showThumbnails = false;
+    /**
+     * The parent editor control.
+     * {LsDocumentViewer}
+     */
+    editor;
+    setZoom(value) {
+        this.editor.setZoom(value);
+        this.zoom = value;
+    }
+    fitWidth() {
+        const wrapper = this.editor.component.shadowRoot.getElementById('document-frame-wrapper');
+        const scale = (wrapper.clientWidth - 396) / this.editor.pageDimensions[this.editor.pageNum - 1].width;
+        this.setZoom(Math.round(scale * 1e2) / 1e2);
+    }
+    fitHeight() {
+        const wrapper = this.editor.component.shadowRoot.getElementById('document-frame-wrapper');
+        const scale = (wrapper.clientHeight - 94) / this.editor.pageDimensions[this.editor.pageNum - 1].height;
+        this.setZoom(Math.round(scale * 1e2) / 1e2);
+    }
+    goToPage(pageNum) {
+        const diff = pageNum - this.editor.pageNum;
+        if (diff > 0) {
+            for (let i = 0; i < diff; i++)
+                this.editor.pageNext();
+        }
+        else {
+            for (let i = 0; i < Math.abs(diff); i++)
+                this.editor.pagePrev();
+        }
+        this.page = pageNum;
+        this.renderThumbnails();
+    }
+    getPageFieldColors(pageNum) {
+        const template = this.editor._template;
+        if (!template?.elementConnection?.templateElements)
+            return [];
+        const signers = new Set();
+        template.elementConnection.templateElements.filter(el => el.page === pageNum).forEach(el => signers.add(el.signer));
+        return Array.from(signers).map(s => ({
+            s40: defaultRolePalette[s]?.s40 || defaultRolePalette[0].s40,
+            s60: defaultRolePalette[s]?.s60 || defaultRolePalette[0].s60,
+        }));
+    }
+    renderThumbnails() {
+        const pdfDoc = this.editor.pdfDocument;
+        if (!pdfDoc)
+            return;
+        const container = this.component.shadowRoot.getElementById('ls-thumbnail-container');
+        if (!container)
+            return;
+        container.innerHTML = '';
+        for (let i = 1; i <= this.pageCount; i++) {
+            pdfDoc.getPage(i).then(page => {
+                const viewport = page.getViewport({ scale: 0.2 });
+                const canvas = document.createElement('canvas');
+                canvas.width = viewport.width;
+                canvas.height = viewport.height;
+                canvas.className = i === this.page ? 'ls-dv-thumbnail active' : 'ls-dv-thumbnail';
+                canvas.addEventListener('click', () => this.goToPage(i));
+                const wrapper = document.createElement('div');
+                wrapper.className = 'ls-dv-thumbnail-wrapper';
+                wrapper.addEventListener('click', () => this.goToPage(i));
+                const dots = document.createElement('div');
+                dots.className = 'ls-dv-thumbnail-dots';
+                this.getPageFieldColors(i).forEach(color => {
+                    const dot = document.createElement('span');
+                    dot.className = 'ls-dv-thumbnail-dot';
+                    dot.style.setProperty('--dot-color-40', color.s40);
+                    dot.style.setProperty('--dot-color-60', color.s60);
+                    dots.appendChild(dot);
+                });
+                const label = document.createElement('span');
+                label.textContent = `${i}`;
+                wrapper.appendChild(canvas);
+                wrapper.appendChild(dots);
+                wrapper.appendChild(label);
+                container.appendChild(wrapper);
+                // Render after appending to DOM — Safari requires the canvas to be
+                // in the visible tree before getContext/render produces output.
+                const ctx = canvas.getContext('2d');
+                page.render({ canvasContext: ctx, viewport }).promise.then(() => {
+                    // Force Safari to composit the canvas by toggling a style property
+                    canvas.style.opacity = '0.99';
+                    requestAnimationFrame(() => { canvas.style.opacity = '1'; });
+                });
+            });
+        }
+    }
+    outsideClickHandler = (e) => {
+        const path = e.composedPath();
+        if (!path.includes(this.component)) {
+            this.showThumbnails = false;
+            document.removeEventListener('click', this.outsideClickHandler);
+        }
+    };
+    componentDidLoad() {
+        this.zoom = this.editor.zoom;
+    }
+    render() {
+        return (h(Host, { key: '72abf1693b9925ef89f1d09fface712686272034' }, h("div", { key: 'f9400ddce2d944c7f3ae4b2a0e525c008f1af8bc', class: 'ls-dv-controls-bar' }, h("div", { key: 'da761188c1a0b2dd439d386d253a727a5918a4cc', class: 'ls-dv-status-bar-section' }, h("button", { key: '254a7107f688265ab0d453feac4d6925714283d3', onClick: () => this.setZoom(this.editor.zoom * 0.8), id: "zoom-out-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.zoomout') }, h("ls-icon", { key: '6aae9eb5c92a17720a5d8ce70806f1d14abe38fa', name: "zoom-out-icon" })), h("span", { key: 'e3beb4716277e3b1c37dc16951c45e5581e76161' }, Math.round(this.zoom * 100), "%"), h("button", { key: 'e115bc77ecb7a85dc698ae37cbf8a9a6729f7294', onClick: () => this.setZoom(this.editor.zoom / 0.8), id: "zoom-in-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.zoomin') }, h("ls-icon", { key: '9995f22729c5cda845af517a49a7f831e0b90ae9', name: "zoom-in-icon" }))), h("div", { key: '235de8f5fa5897fbda95e767e5b3901e56de85ee', class: 'ls-dv-status-bar-section' }, h("button", { key: 'fd23d81c5aa1e3ea6fb61f7bac2c8bd92f2d8b95', onClick: () => this.fitWidth(), id: "fit-width-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.fitwidth') }, h("ls-icon", { key: '2cbf6228420f7681aed5eca63007336bf455779f', name: "fit-width-icon" })), h("button", { key: 'f3f7aa25fe9d1bc09d0b01ed065ecf2e2ea85f11', onClick: () => this.fitHeight(), id: "fit-height-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.fitheight') }, h("ls-icon", { key: 'c5847fe102ddea1a5d789ca5b9618b755c6a45bc', name: "fit-height-icon" }))), h("div", { key: '4a05e3e22e676b90a7805f545f50162a2665a05f', class: 'ls-dv-status-bar-section', style: this.pageCount === 1 && { display: 'none' } }, h("button", { key: '58648dc5f1eacb111101b2ac8be7007639b0fb43', onClick: () => {
+                this.editor.pagePrev();
+            }, disabled: this.page === 1, id: "prev-page-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": this.page === 1 ? dvI18n.t('statusbar.nopreviouspage') : dvI18n.t('statusbar.previouspage') }, h("ls-icon", { key: '363b528d177ae6fdce60b1aa8ef2bafc946a8fe0', name: "chevron-left-icon" })), h("p", { key: '815cd100404d05d8333b9a9d4fa638db8bc29206' }, this.page, " / ", this.pageCount), h("button", { key: '8baaba2c8da7b9de58aed1a7bf15919d0253737c', onClick: () => {
+                this.editor.pageNext();
+            }, disabled: this.page === this.pageCount, id: "next-page-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": this.page === this.pageCount ? dvI18n.t('statusbar.nonextpage') : dvI18n.t('statusbar.nextpage') }, h("ls-icon", { key: '442a710ed4edf1e36aec2094ebbc895dd4958446', name: "chevron-right-icon" }))), h("div", { key: '5102aa9e2e17b0749d76fbe89fa65e661603464f', class: 'ls-dv-status-bar-section', style: this.pageCount === 1 ? { display: 'none' } : {} }, h("button", { key: 'a42499a591668fb0f83b8fc866f02f383e347b51', onClick: () => {
+                this.showThumbnails = !this.showThumbnails;
+                if (this.showThumbnails) {
+                    requestAnimationFrame(() => {
+                        requestAnimationFrame(() => {
+                            this.renderThumbnails();
+                            document.addEventListener('click', this.outsideClickHandler);
+                        });
+                    });
+                }
+                else {
+                    document.removeEventListener('click', this.outsideClickHandler);
+                }
+            }, id: "page-thumbnails-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('statusbar.pagethumbnails') }, h("ls-icon", { key: '1bd5de1139031f1760e1bb45c149d373445469a5', name: !this.showThumbnails ? 'side-panel-open-right-icon' : 'side-panel-close-right-icon' }))), this.showThumbnails && (h("div", { key: '8e6c48e98f6e301e15bb1b554849a14e163bcef7', class: "ls-dv-thumbnail-popover" }, h("div", { key: '66daba54e6f3d204a0847d21b5b76e4d5d2121ac', id: "ls-thumbnail-container", class: "ls-dv-thumbnail-grid" })))), h("ls-helper-bar", { key: '4606d6cdaf1ce978cd987e4cf10638de42a439d6' }), h("span", { key: 'a895f55bb6447d950856d9287c39b872409394fb', class: "ls-dv-version" }, "v", version), h("ls-tooltip", { key: '8b3ceed70502ded7e9b7bff54322fc9508e62e29', tooltipId: "ls-dv-tooltip" }), h("slot", { key: 'cd767786f5129c5508ade7be538ce7f39c7f10dd' })));
+    }
+};
+LsStatusbar.style = lsStatusbarCss();
+
+const lsToolbarCss = () => `.ls-dv-toolbar{position:absolute;top:1rem;left:50%;transform:translateX(-50%);display:flex;width:100%;align-items:center;justify-content:center;padding:0.375rem;gap:0.5rem;width:fit-content;border-radius:1.125rem;border:1px solid var(--gray-20, #edeff2);background:var(--white, #ffffff);z-index:1000;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}.ls-dv-invisible{display:none}p{color:var(--gray-80, #6f7176);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.ls-dv-button-link,.ls-dv-button-link:hover{all:unset}select{appearance:none;height:2.25rem}.ls-dv-input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}.ls-dv-has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.625rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #ffffff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #ffffff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type=checkbox]{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type=checkbox]:checked,input[type=checkbox].ls-dv-indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type=checkbox]:checked::after{content:"";position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type=checkbox].ls-dv-indeterminate::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type=checkbox]:checked:hover,input[type=checkbox].ls-dv-indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type=checkbox]:hover{border:1px solid #9ca3af}input[type=checkbox]:focus,input[type=checkbox]:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type=checkbox]:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type=checkbox]:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.ls-dv-checkbox-container{display:flex;gap:0.5rem;width:100%}.ls-dv-checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.ls-dv-form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.ls-dv-form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.ls-dv-loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #4456f6)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.ls-dv-tertiary-grey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #6f7176)}button.ls-dv-tertiary-grey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.ls-dv-button-group{display:flex;border-radius:0.625rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.ls-dv-button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6f7176)}.ls-dv-button-group button:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-group>:first-child{border-radius:0.625rem 0 0 0.625rem}.ls-dv-button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.ls-dv-button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
+
+const LsToolbar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.mutate = createEvent(this, "mutate", 7);
+        this.update = createEvent(this, "update", 7);
+    }
+    get component() { return getElement(this); }
+    /**
+     * The selected items information (as JSON).
+     * {LSApiElement[]}
+     */
+    dataItem;
+    /**
+     * The group and experience information.
+     * {object}
+     */
+    groupInfo;
+    /**
+     * The base template information (as JSON).
+     * {LSApiTemplate}
+     */
+    template;
+    /**
+     * The main editor.
+     * {LSDocumentViewer}
+     */
+    editor;
+    mode;
+    signer;
+    mutate;
+    update;
+    // @Element() component: HTMLElement;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    alter(diff) {
+        const diffs = this.dataItem.map(c => {
+            return { action: 'update', data: { ...c, ...diff } };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    componentDidLoad() {
+        ['mousedown', 'mouseup', 'mousemove', 'mouseenter', 'mouseleave', 'mouseover', 'mouseout', 'click', 'dblclick', 'contextmenu'].forEach(eventType => {
+            this.component.addEventListener(eventType, e => {
+                e.stopPropagation();
+            });
+        });
+    }
+    renderEditor() {
+        return (h("div", { class: "ls-dv-toolbar" }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: "rowbox" }, h("ls-field-format", { dataItem: this.dataItem }))) : (h("div", { class: "rowbox" }, h("ls-field-format", { dataItem: this.dataItem }), h("ls-participant-select", { id: "ls-participant-select", roles: this.template?.roles, signer: this.signer, style: { display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' } }), h("ls-tooltip", { tooltipId: "ls-dv-tooltip" }))), h("slot", null)));
+    }
+    renderCompose() {
+        return (h("div", { class: this.dataItem && this.dataItem.length > 0 ? 'ls-dv-toolbar' : '' }, h("div", { class: "rowbox" }, h("ls-field-format", { dataItem: this.dataItem }), h("ls-tooltip", { tooltipId: "ls-dv-tooltip" })), h("slot", null)));
+    }
+    render() {
+        return this.mode === 'editor' ? this.renderEditor() : this.mode === 'compose' ? this.renderCompose() : null;
+    }
+};
+LsToolbar.style = lsToolbarCss();
+
+export { LsComposeLoader as ls_compose_loader, LsEditorTable as ls_editor_table, LsLeftBar as ls_left_bar, LsLoadingLogo as ls_loading_logo, LsStatusbar as ls_statusbar, LsToolbar as ls_toolbar };
+//# sourceMappingURL=ls-compose-loader.ls-editor-table.ls-left-bar.ls-loading-logo.ls-statusbar.ls-toolbar.entry.js.map

package/dist/esm/ls-compose-manager.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-MftqtSf2.js';
-import { d as dvI18n } from './i18n-B8VmBxFg.js';
+import { r as registerInstance, h, H as Host } from './index-CItPoq74.js';
+import { d as dvI18n } from './i18n-Bp8hmhrC.js';
 
 const lsComposeManagerCss = () => `:host{display:block}`;
 
@@ -13,10 +13,10 @@ const LsComposeManager = class {
      */
     template;
     render() {
-        return (h(Host, { key: '4c01cfad6839a68792dcefeb51784b7f9a4178b1' }, h("div", { key: '1b110053efe9289f720c0a9f8cee8670c2c82692', class: "ls-dv-editor-infobox" }, h("h2", { key: '8dd76d663bab8b6c3a916dfa20065ea2cdca1278', class: "ls-dv-toolbox-section-title" }, dvI18n.t('recipients.recipientfields')), h("p", { key: '7e2c26c7c157b285188a8faeec55d770f14cc509', class: "ls-dv-toolbox-section-description" }, dvI18n.t('recipients.recipientfieldsdescription'))), h("div", { key: '60574f5421dc3f924f23fe841648653b585bfd7e', class: "ls-dv-participant-list" }, this.template &&
+        return (h(Host, { key: 'b5eac34c357dffeb6bcf55d900118345449702a6' }, h("div", { key: 'd52b046167046ab05d83cecf2f4dfaf6e9f641a3', class: "ls-dv-editor-infobox" }, h("h2", { key: 'f16a4ceb7feba75cc59ab5bbcbf64081d3512c61', class: "ls-dv-toolbox-section-title" }, dvI18n.t('recipients.recipientfields')), h("p", { key: '28392d6f0322c1554a54618c5a017e3ebbb6eb4e', class: "ls-dv-toolbox-section-description" }, dvI18n.t('recipients.recipientfieldsdescription'))), h("div", { key: '5baa88c3558ac24e96ef44eccc4e33b70df08dbb', class: "ls-dv-participant-list" }, this.template &&
             this.template?.roles.map(() => {
                 return (h("div", null));
-            })), h("slot", { key: '20f91e542450d6aa4b8e3cfef3a2b0757a35c08f' })));
+            })), h("slot", { key: '6c679fe1e5473958d320817d3f123fd23b4b8a9c' })));
     }
 };
 LsComposeManager.style = lsComposeManagerCss();

package/dist/esm/ls-details-section.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-MftqtSf2.js';
+import { r as registerInstance, h, H as Host } from './index-CItPoq74.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
 
 const lsDetailsSectionCss = () => `* {