legalesign-document-viewer 0.10.2 → 0.10.4

package/dist/cjs/ls-add-new-button_20.cjs.entry.js

@@ -0,0 +1,1035 @@
+'use strict';
+
+var index = require('./index-DFeU0FNc.js');
+var clsx = require('./clsx-BtxeOLZW.js');
+var i18n = require('./i18n-B8sub13B.js');
+var defaultPalette = require('./defaultPalette-Dt4FmPno.js');
+var defaultFieldIcons = require('./defaultFieldIcons-ByvDN5ag.js');
+var fieldDefaults = require('./fieldDefaults-BbJ3qf1E.js');
+
+const lsAddNewButtonCss = () => `
+.button {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  text-transform: capitalize;
+  transition: all 0.3s;
+  padding: 0.5rem 0.375rem;
+  border-radius: 0.5rem;
+  text-decoration-line: none;
+  background-color: var(--white);
+}
+
+.button.destructive {
+  border: 2px dashed var(--red-20);
+  color: var(--red-60);
+}
+
+.button:not(.destructive) {
+  border: 2px dashed var(--gray-20);
+  color: var(--gray-80);
+}
+
+.button:hover {
+
+  cursor: pointer;
+}
+
+.button.destructive:hover:not(:disabled) {
+  background-color: var(--red-10);
+  color: var(--red-80);
+
+  .icon {
+    color: var(--red-80)
+  }
+}
+
+
+.button:hover:not(:disabled):not(.destructive) {
+  color: var(--primary-50);
+  background-color: var(--primary-10);
+  border-color: var(--primary-20);
+
+  .icon {
+    color: var(--primary-50);
+  }
+}
+
+
+.button:focus {
+  box-shadow: var(--focus-box-shadow);
+  outline-offset: var(--focus-outline-offset);
+  outline: none;
+}
+
+.button:disabled {
+  background-color: var(--gray-10);
+  color: var(--gray-50);
+  border-color: var(--gray-20);
+  cursor: not-allowed;
+}
+
+.button:not(:disabled):not(.destructive) {
+  .icon {
+    color: var(--gray-80);
+  }
+}
+
+.button.destructive:not(:disabled) {
+  .icon {
+    color: var(--red-60);
+  }
+}`;
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const LsAddNewButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.text = '';
+        this.loading = false;
+        this.disabled = false;
+        this.destructive = false;
+    }
+    render() {
+        const _a = this, { text, icon, loading, disabled, destructive, customStyle } = _a, rest = __rest(_a, ["text", "icon", "loading", "disabled", "destructive", "customStyle"]);
+        const buttonClass = clsx.clsx('button', disabled && 'disabled', destructive && 'destructive');
+        return (index.h("host", { key: '2a7c7aac19eaf12a3a6f086c98742f9b8060d38e' }, index.h("button", Object.assign({ key: 'bc2b817560e0b0c299a72bf22ef6b07e10da94e2', type: 'button', disabled: disabled || loading, class: buttonClass, style: customStyle }, rest), icon && !loading && (index.h("ls-icon", { key: 'b680fed0f0622a91d894aaea7871bff8911655a1', name: icon, solid: false, size: 20, class: 'icon' })), loading && (index.h("div", { key: '05fecd907228278d9f1fbc2f5dc3c56c204e0afc' }, index.h("ls-loading", { key: 'aa871b1ed5becd6fb1e4eedd335647951f4dcbab', iconSize: 20 }))), text && !loading && index.h("span", { key: 'ff60357b611378d8481c7f76de4013b999658b7a', class: 'text' }, text), loading && index.h("span", { key: '554b44264128c84f94649efe888a3769d3f977dd', class: 'text' }, "loading..."))));
+    }
+    get el() { return index.getElement(this); }
+};
+LsAddNewButton.style = lsAddNewButtonCss();
+
+const lsDocumentOptionsCss = () => `*{box-sizing:border-box;margin:0;padding:0}:host{display:block}.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-template-details{display:flex;flex-direction:column;gap:0.75rem}.ls-dv-template-detail-section{position:relative;display:flex;padding:0.75rem;align-items:center;gap:0.5rem;border-radius:1rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff)}.ls-dv-template-detail-section-title{color:var(--gray-80, #6f7176);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;width:100%}.ls-dv-template-detail-section-info{color:var(--gray-70, #939599);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;width:100%}.ls-dv-template-title{border-radius:0.625rem;padding:0.25rem;color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem;cursor:pointer;width:100%;margin-top:-0.125rem}.ls-dv-template-title:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-column{display:flex;flex-direction:column;align-items:flex-start}.ls-dv-edit-button{position:absolute;top:0.75rem;right:0.75rem;margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none;cursor:pointer;color:var(--gray-70, #939599)}.ls-dv-edit-button:hover{color:var(--gray-80, #6f7176)}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 LsDocumentOptions = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate", 7);
+        this.update = index.createEvent(this, "update", 7);
+    }
+    get component() { return index.getElement(this); }
+    /**
+     * The base template information (as JSON).
+     * {LSApiTemplate}
+     */
+    template;
+    editTitle = false;
+    selectedHandler(newSelected, _oldSelected) {
+        console.log(newSelected, 'document manager');
+    }
+    mutate;
+    update;
+    // 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.mutate.emit(diffs);
+        }, delay);
+    }
+    componentDidLoad() {
+    }
+    render() {
+        function formatDate(isoString) {
+            const date = new Date(isoString);
+            const day = String(date.getDate()).padStart(2, '0');
+            const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
+            const year = date.getFullYear();
+            const hours = String(date.getHours()).padStart(2, '0');
+            const minutes = String(date.getMinutes()).padStart(2, '0');
+            return `${day}/${month}/${year} at ${hours}:${minutes}`;
+        }
+        return (index.h(index.Host, null, index.h("div", { class: "ls-dv-editor-infobox" }, index.h("h2", { class: "ls-dv-toolbox-section-title" }, i18n.dvI18n.t('documentoptions.title')), index.h("p", { class: "ls-dv-toolbox-section-description" }, i18n.dvI18n.t('documentoptions.description'))), index.h("div", { class: 'ls-dv-template-details' }, index.h("div", { class: 'ls-dv-template-detail-section ls-dv-column' }, index.h("p", { class: "ls-dv-template-detail-section-title" }, i18n.dvI18n.t('documentoptions.name')), index.h("div", { class: "ls-dv-edit-button", onClick: () => {
+                this.editTitle = !this.editTitle;
+            } }, index.h("ls-icon", { name: this.editTitle ? 'check-icon' : 'pencil-alt-icon', size: 20, id: "edit-name-btn", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": this.editTitle ? i18n.dvI18n.t('common.save') : i18n.dvI18n.t('documentoptions.editname') })), 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("div", { class: "ls-dv-template-title", onClick: () => {
+                this.editTitle = !this.editTitle;
+            } }, index.h("p", null, this.template?.title)))), index.h("div", { class: 'ls-dv-template-detail-section' }, index.h("div", null, index.h("p", { class: "ls-dv-template-detail-section-title" }, i18n.dvI18n.t('documentoptions.autoarchive')), index.h("p", { class: 'ls-dv-template-detail-section-info' }, i18n.dvI18n.t('documentoptions.autoarchivedescription'))), index.h("ls-toggle", { checked: this.template?.autoArchive, onValueChange: e => {
+                this.alter({ autoArchive: e.detail });
+            } })), index.h("div", { class: 'ls-dv-template-detail-section' }, index.h("div", null, index.h("p", { class: "ls-dv-template-detail-section-title" }, i18n.dvI18n.t('documentoptions.locktemplate')), index.h("p", { class: 'ls-dv-template-detail-section-info' }, i18n.dvI18n.t('documentoptions.locktemplatedescription'))), index.h("ls-toggle", { checked: this.template?.locked, onValueChange: e => {
+                this.alter({ locked: e.detail });
+            } })), index.h("div", { class: 'ls-dv-template-detail-section' }, index.h("div", null, index.h("p", { class: "ls-dv-template-detail-section-title", "tooltip-data": "Fixes the aspect ratio of all signatures on the document. This allows Participants to re-use the same signature throughout the signing process. If this setting is turned on after several signature fields have been placed, fields will automatically re-size to match the aspect ratio of the first signature on the Template." }, i18n.dvI18n.t('documentoptions.fixedsignatureaspect')), index.h("p", { class: 'ls-dv-template-detail-section-info' }, i18n.dvI18n.t('documentoptions.fixedsignatureaspectdescription'))), index.h("ls-toggle", { checked: this.template?.fixSignatureScale, onValueChange: e => {
+                this.alter({ fixSignatureScale: e.detail });
+            } })), index.h("div", { class: 'ls-dv-template-detail-section ls-dv-column' }, index.h("p", { class: "ls-dv-template-detail-section-title" }, i18n.dvI18n.t('documentoptions.documentretention')), index.h("p", null, index.h("input", { value: this.template?.documentRetentionDays, style: { width: '100%' }, type: 'number', onInput: e => {
+                e.preventDefault();
+                this.alter({ documentRetentionDays: e.target.value });
+            } }))), index.h("div", { class: 'ls-dv-template-detail-section ls-dv-column' }, index.h("p", { class: "ls-dv-template-detail-section-title" }, i18n.dvI18n.t('documentoptions.pages')), index.h("p", null, this.template?.pageCount)), index.h("div", { class: 'ls-dv-template-detail-section ls-dv-column' }, index.h("p", { class: "ls-dv-template-detail-section-title" }, i18n.dvI18n.t('documentoptions.datecreated')), " ", index.h("p", null, formatDate(this.template?.created))), index.h("div", { class: 'ls-dv-template-detail-section ls-dv-column' }, index.h("p", { class: "ls-dv-template-detail-section-title" }, i18n.dvI18n.t('documentoptions.createdby')), " ", index.h("p", null, this.template?.createdBy))), index.h("slot", null), index.h("ls-tooltip", { tooltipId: "ls-dv-tooltip" })));
+    }
+    static get watchers() { return {
+        "template": ["selectedHandler"]
+    }; }
+};
+LsDocumentOptions.style = lsDocumentOptionsCss();
+
+const lsFeatureColumnCss = () => `:host{display:flex;flex-direction:column;gap:0.75rem;padding:0.25rem}.ls-dv-active-icon,.ls-dv-default-icon{padding:0.75rem;border-radius:1rem;color:var(--gray-80, #6f7176)}.ls-dv-default-icon:hover{background-color:var(--primary-10, #eff4ff);color:var(--primary-100, #0c1457);cursor:pointer}.ls-dv-active-icon{background-color:var(--primary-60, #4456f6);color:var(--white, #ffffff)}.ls-dv-hidden{display:none}`;
+
+const LsFeatureColoumn = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.manage = index.createEvent(this, "manage", 7);
+    }
+    get component() { return index.getElement(this); }
+    /**
+     * Determines / sets which of the far left 'managers' is active.
+     * {'document' | 'toolbox' | 'participant' }
+     */
+    manager = 'toolbox';
+    /**
+     * The mode that document viewer is being used in.
+     * {'preview' | 'editor' | 'custom'}
+     */
+    mode = 'editor';
+    // Send an manager change up the DOM
+    manage;
+    componentDidLoad() {
+    }
+    render() {
+        return (index.h(index.Host, { key: '9d04bb0991d2b703f9d3aae1bbeaba1e4435244f' }, index.h("div", { key: '87c0a840f6ee79737187d49cdab70c1628392551', class: this.mode !== "editor" ? 'ls-dv-hidden' : this.manager === 'document' ? 'ls-dv-active-icon' : 'ls-dv-default-icon', onClick: () => {
+                this.manage.emit('document');
+                this.manager = 'document';
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-html": `<strong>${i18n.dvI18n.t('featurecolumn.templatedetails')}</strong><br/>${i18n.dvI18n.t('featurecolumn.templatedetailstooltip')}`, "data-tooltip-place": "right" }, index.h("ls-icon", { key: '2c394fa1d93840f9aa389df613795cb12cd46a12', name: "document-icon", size: 24 })), index.h("div", { key: '3159f85bb836b1cc99c2f22057b78cbf1feef509', class: this.manager === 'toolbox' ? 'ls-dv-active-icon' : 'ls-dv-default-icon', onClick: () => {
+                this.manage.emit('toolbox');
+                this.manager = 'toolbox';
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-html": `<strong>${i18n.dvI18n.t('featurecolumn.fieldtypes')}</strong><br/>${i18n.dvI18n.t('featurecolumn.fieldtypestooltip')}`, "data-tooltip-place": "right" }, index.h("ls-icon", { key: '67b8eede3eaf341ea1d13e4968b1ec959cdf4431', name: "typing-input-icon", size: 24 })), index.h("div", { key: 'af82b8e8d330de072f3e43924c780bc022956823', class: this.mode !== "editor" ? 'ls-dv-hidden' : this.manager === 'participant' ? 'ls-dv-active-icon' : 'ls-dv-default-icon', onClick: () => {
+                this.manage.emit('participant');
+                this.manager = 'participant';
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-html": `<strong>${i18n.dvI18n.t('featurecolumn.participants')}</strong><br/>${i18n.dvI18n.t('featurecolumn.participantstooltip')}`, "data-tooltip-place": "right" }, index.h("ls-icon", { key: '21432806a27193222886b07220fa579780e5239c', name: "user-group-icon", size: 24 })), index.h("div", { key: 'bb0c623d9cfe2e1579c434e1bd5220fe62e101c3', class: this.mode !== "compose" ? 'ls-dv-hidden' : this.manager === 'recipient' ? 'ls-dv-active-icon' : 'ls-dv-default-icon', onClick: () => {
+                this.manage.emit('recipient');
+                this.manager = 'recipient';
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-html": `<strong>${i18n.dvI18n.t('featurecolumn.recipients')}</strong><br/>${i18n.dvI18n.t('featurecolumn.recipientstooltip')}`, "data-tooltip-place": "right" }, index.h("ls-icon", { key: 'f595f2426bc6392c7f18157ea6fddfa97e87a477', name: "user-group-icon", size: 24 })), index.h("div", { key: '5a28cf31a458908f221b3c1120793a36fa843a88', class: this.mode !== "preview" ? 'ls-dv-hidden' : this.manager === 'validation' ? 'ls-dv-active-icon' : 'ls-dv-default-icon', onClick: () => {
+                this.manage.emit('validation');
+                this.manager = 'validation';
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-html": `<strong>${i18n.dvI18n.t('featurecolumn.validation')}</strong><br/>${i18n.dvI18n.t('featurecolumn.validationtooltip')}`, "data-tooltip-place": "right" }, index.h("ls-icon", { key: 'bc9036e2e27513a9f89b597997ba906096648744', name: "adjustments-icon", size: 24 })), index.h("slot", { key: 'ba34f0ac0354779dcf958097faa29b0e3278eda6' }), index.h("ls-tooltip", { key: '6238d20870825e456b4253135640942b079b8ea4', tooltipId: "ls-dv-tooltip" })));
+    }
+};
+LsFeatureColoumn.style = lsFeatureColumnCss();
+
+const lsFieldPropertiesCss = () => `:host{display:block;width:100%;padding:1rem}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 LsFieldProperties = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    dataItem;
+    template; // LSApiTemplate
+    readonly = false;
+    renderFields() {
+        if (this.dataItem && this.dataItem?.length === 1) {
+            switch (this.dataItem[0].formElementType) {
+                case 'signature':
+                    return index.h("ls-field-properties-signature", { dataItem: this.dataItem[0], template: this.template, readonly: this.readonly });
+                case 'date':
+                    return index.h("ls-field-properties-date", { dataItem: this.dataItem[0], readonly: this.readonly });
+                case 'signing date':
+                    return index.h("ls-field-properties-date", { dataItem: this.dataItem[0], readonly: this.readonly });
+                case 'text':
+                    return index.h("ls-field-properties-text", { dataItem: this.dataItem[0], readonly: this.readonly });
+                case 'number':
+                    return index.h("ls-field-properties-number", { dataItem: this.dataItem[0], readonly: this.readonly });
+                case 'autosign':
+                    return index.h("ls-field-properties-autosign", { dataItem: this.dataItem[0], readonly: this.readonly });
+                case 'email':
+                    return index.h("ls-field-properties-email", { dataItem: this.dataItem[0], readonly: this.readonly });
+                case 'image':
+                    return index.h("ls-field-properties-image", { dataItem: this.dataItem[0], readonly: this.readonly });
+                case 'file':
+                    return index.h("ls-field-properties-file", { dataItem: this.dataItem[0], readonly: this.readonly });
+                case 'dropdown':
+                    return index.h("ls-field-properties-file", { dataItem: this.dataItem[0], readonly: this.readonly });
+                default:
+                    return index.h("ls-field-properties-general", { dataItem: this.dataItem[0], readonly: this.readonly });
+            }
+        }
+        else if (this.dataItem && this.dataItem?.length > 1)
+            return index.h("ls-field-properties-multiple", { dataItem: this.dataItem, readonly: this.readonly });
+    }
+    handleKeyDown = (event) => {
+        event.stopPropagation();
+    };
+    handleKeyUp = (event) => {
+        event.stopPropagation();
+    };
+    render() {
+        return (index.h(index.Host, { key: '8a711d56d7c988d3ded4153dbd1a8b5d8b82d458', onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, this.dataItem && this.renderFields(), index.h("slot", { key: 'e3e5dc0fc41d78c5fca1ddbae4fbd68f4145e628' })));
+    }
+};
+LsFieldProperties.style = lsFieldPropertiesCss();
+
+const lsFieldPropertiesAutosignCss = () => `:host{display:block}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 LsFieldPropertiesAutosign = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    dataItem;
+    readonly = false;
+    render() {
+        return (index.h(index.Host, { key: '796d793a5890e9c1ba9a1ab8ead252129a2d6567' }, index.h("div", { key: '4b4e6361dfba1c768e87d4eed987e86ad81f9046', class: "ls-dv-field-properties-section" }, "Self Sign Field"), index.h("div", { key: '6a239ae5e86d40da6af79b9bedcbda082fe0b8e3' }, "Label: ", index.h("input", { key: '320f6751bbf1c10cd29f147bcbe974f233a5a538', value: this.dataItem?.label, width: "30" })), index.h("ls-field-dimensions", { key: 'a3ac441f17dcfa1f57aa7d7014153289495f4406', dataItem: this.dataItem, readonly: this.readonly }), index.h("ls-field-properties-advanced", { key: 'fa3573d8ff9ba637fa5dd658dd2b2b5cf7eb392b', dataItem: this.dataItem, readonly: this.readonly }), index.h("ls-field-footer", { key: 'd33377ecafc922d8d115c539e557fd39b0c75804', dataItem: this.dataItem, readonly: this.readonly }), index.h("slot", { key: 'fb402b881e4089672c6fcdfb5db64db8b4c5e73d' })));
+    }
+};
+LsFieldPropertiesAutosign.style = lsFieldPropertiesAutosignCss();
+
+const lsFieldPropertiesDateCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.ls-dv-field-set{display:flex;flex-direction:column;gap:1rem;width:100%}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;width:100%}.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{display:flex;gap:0.5rem;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;font-weight:500;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)}button.ls-dv-secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #ffffff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.ls-dv-secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.ls-dv-destructive{border:1px solid var(--red-60, #f64a44);background-color:white;color:var(--red-60, #f64a44)}button.ls-dv-destructive:hover{border:1px solid var(--red-70, #dc2721);background:var(--red-10, #fff0f0)}.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 LsFieldPropertiesDate = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    dataItem;
+    readonly = false;
+    render() {
+        return (index.h(index.Host, { key: '69ad973b207cbf0c1b3f86ab2d75f9fe2ec3323d' }, index.h("ls-field-properties-container", { key: 'c448b123695b2f24e5baac38827593347d2fedd8', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '03a55608eb31dde85b30d98ae46d54593b6719f3', class: 'ls-dv-field-set', slot: "content" }, index.h("ls-field-content", { key: '386fab75cc620a80594ce37a9c3ef0640c32fd16', dataItem: this.dataItem, readonly: this.readonly }), index.h("ls-field-properties-advanced", { key: 'bc47ff53d32201fe5ae27c28f26f9e0ee814ff1e', dataItem: this.dataItem, readonly: this.readonly })), index.h("div", { key: 'a8d7ef77b11bb0a2d9126e1b4966b7dac1cd4bd0', class: 'ls-dv-field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'd48b3dce87d46fe27adfffee3d5a80a9317cf518', dataItem: this.dataItem, readonly: this.readonly })), index.h("div", { key: '6a0f11512f0e28f91e381119f2db69223ab9f49d', class: 'ls-dv-field-set', slot: "placement" }, index.h("ls-field-placement", { key: '237536b600b7bf428a5bf5b829cf806884e0e891', dataItem: this.dataItem, readonly: this.readonly }))), index.h("ls-field-footer", { key: '29b0d40c3cf3213b54341d2bb256fc66729a72a3', dataItem: this.dataItem, readonly: this.readonly })));
+    }
+};
+LsFieldPropertiesDate.style = lsFieldPropertiesDateCss();
+
+const lsFieldPropertiesEmailCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.ls-dv-field-set{display:flex;flex-direction:column;gap:1rem;width:100%}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;width:100%}.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{display:flex;gap:0.5rem;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;font-weight:500;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)}button.ls-dv-secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #ffffff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.ls-dv-secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.ls-dv-destructive{border:1px solid var(--red-60, #f64a44);background-color:white;color:var(--red-60, #f64a44)}button.ls-dv-destructive:hover{border:1px solid var(--red-70, #dc2721);background:var(--red-10, #fff0f0)}.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 LsFieldPropertiesEmail = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    dataItem;
+    readonly = false;
+    render() {
+        return (index.h(index.Host, { key: '3b4d2155764de3bdeec0f02de4119ca4f0abbcff' }, index.h("ls-field-properties-container", { key: '2c67d7445d17e2440b437e72f5d457c8c1d6dbd2', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'f1befef1ad6d9ac7694bc6b685050667bbf319f3', class: 'ls-dv-field-set', slot: "content" }, index.h("ls-field-content", { key: '1d84a5dae44d9e532ed423ec12e039ed97a63fba', dataItem: this.dataItem, readonly: this.readonly }), index.h("ls-field-properties-advanced", { key: '232b1b3a1de2d306860c3fa9146646bf33ff0b24', dataItem: this.dataItem, readonly: this.readonly })), index.h("div", { key: '94dc8fb660a9260fe4350a0e7dd2e2b35f38424e', class: 'ls-dv-field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'c94152abb49cc46030893411f11fa69f3c5c6043', dataItem: this.dataItem, readonly: this.readonly })), index.h("div", { key: 'fdc3ebfbb77ec53b6d2b4678b941d7d1f974bdb8', class: 'ls-dv-field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'dbe5208fb0c12561dd4c0722a1989606d7a8d23a', dataItem: this.dataItem, readonly: this.readonly }))), index.h("ls-field-footer", { key: '216a5b8216439cf7fcbf4b467a0461c5c6e5028d', dataItem: this.dataItem, readonly: this.readonly })));
+    }
+};
+LsFieldPropertiesEmail.style = lsFieldPropertiesEmailCss();
+
+const lsFieldPropertiesFileCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.ls-dv-field-set{display:flex;flex-direction:column;gap:1rem;width:100%}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;width:100%}.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{display:flex;gap:0.5rem;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;font-weight:500;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)}button.ls-dv-secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #ffffff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.ls-dv-secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.ls-dv-destructive{border:1px solid var(--red-60, #f64a44);background-color:white;color:var(--red-60, #f64a44)}button.ls-dv-destructive:hover{border:1px solid var(--red-70, #dc2721);background:var(--red-10, #fff0f0)}.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 LsFieldPropertiesFile = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    dataItem;
+    readonly = false;
+    render() {
+        return (index.h(index.Host, { key: 'b27de84229ca63eb19de6c845e6182c4e90526d3' }, index.h("ls-field-properties-container", { key: '8a4e28b41567239b1880b952b650f52d17b3d513', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'e74993366420f2185c2414756e7a2ea1c07719fa', class: 'ls-dv-field-set', slot: "content" }, index.h("ls-field-content", { key: '14b8adda4ea918dddfe2d5ad55ebe2f67d6b0553', dataItem: this.dataItem, readonly: this.readonly }), index.h("ls-field-properties-advanced", { key: '0098d039bf061542d949837225fed65170413da1', dataItem: this.dataItem, readonly: this.readonly })), index.h("div", { key: '3ceae547b879471f36a236a951f8746a0fef957a', class: 'ls-dv-field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '3224ef586fb9c767800a87d2850f2fe35319a906', dataItem: this.dataItem, readonly: this.readonly })), index.h("div", { key: 'c5635b01d0a142bdbee08720679aaf21ef0fcf5a', class: 'ls-dv-field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'a049c5c3997ad42ea05323ba071045e8d7cecec8', dataItem: this.dataItem, readonly: this.readonly }))), index.h("ls-field-footer", { key: 'cf3c7d0f2cf380631e2319f18f96f54cdff73592', dataItem: this.dataItem, readonly: this.readonly })));
+    }
+};
+LsFieldPropertiesFile.style = lsFieldPropertiesFileCss();
+
+const lsFieldPropertiesGeneralCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.ls-dv-field-set{display:flex;flex-direction:column;gap:1rem;width:100%}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;width:100%}.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{display:flex;gap:0.5rem;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;font-weight:500;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)}button.ls-dv-secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #ffffff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.ls-dv-secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.ls-dv-destructive{border:1px solid var(--red-60, #f64a44);background-color:white;color:var(--red-60, #f64a44)}button.ls-dv-destructive:hover{border:1px solid var(--red-70, #dc2721);background:var(--red-10, #fff0f0)}.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 LsFieldPropertiesGeneral = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    dataItem;
+    readonly = false;
+    render() {
+        return (index.h(index.Host, { key: 'cad381380937e12a412ece7255aa32c5b957d341' }, index.h("ls-field-properties-container", { key: '271d9a757e93791371dc87a35b9b88db11a9073b', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'aa0275b878ca52d85e06ee027019eaee0f88d72f', class: 'ls-dv-field-set', slot: "content" }, index.h("ls-field-content", { key: '6245220b2068a05d05f0bf559ca2112f7b05d989', dataItem: this.dataItem, readonly: this.readonly }), index.h("ls-field-properties-advanced", { key: '38cf9305d208ef12f77694f8f44e6b37594e9055', dataItem: this.dataItem, readonly: this.readonly })), index.h("div", { key: '46541217824afeba61c8bf66ae038c5720f75114', class: 'ls-dv-field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '0774f0e6753b676c12fe80cc3c09e9c784d9530b', dataItem: this.dataItem, readonly: this.readonly })), index.h("div", { key: 'd7ac97520e031cd7e88983de6fd1913c80b016cb', class: 'ls-dv-field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'b18bd7ef8727a39727be7f439cbc48c8534d324f', dataItem: this.dataItem, readonly: this.readonly }))), index.h("ls-field-footer", { key: 'cce6f2def47b39ebb36ac5a36c83e0cfa9ec33f5', dataItem: this.dataItem, readonly: this.readonly })));
+    }
+};
+LsFieldPropertiesGeneral.style = lsFieldPropertiesGeneralCss();
+
+const lsFieldPropertiesImageCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.ls-dv-field-set{display:flex;flex-direction:column;gap:1rem;width:100%}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;width:100%}.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{display:flex;gap:0.5rem;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;font-weight:500;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)}button.ls-dv-secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #ffffff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.ls-dv-secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.ls-dv-destructive{border:1px solid var(--red-60, #f64a44);background-color:white;color:var(--red-60, #f64a44)}button.ls-dv-destructive:hover{border:1px solid var(--red-70, #dc2721);background:var(--red-10, #fff0f0)}.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 LsFieldPropertiesImage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    dataItem;
+    readonly = false;
+    render() {
+        return (index.h(index.Host, { key: 'e4667e666bdf4f1219025bdbc83014815e3395a3' }, index.h("ls-field-properties-container", { key: '51c522e89d11e8a9c7d60a0516b220b2868cd3db', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '0623e45e5b42e784cad4a9e135687f9ab9ed4d97', class: 'ls-dv-field-set', slot: "content" }, index.h("ls-field-content", { key: 'e8dae21cc8cc82bdbcf7335fee57662efac8f082', dataItem: this.dataItem, readonly: this.readonly }), index.h("ls-field-properties-advanced", { key: '4b6c9fc26dd05066db690ac38e6c17d4176ea0b7', dataItem: this.dataItem, readonly: this.readonly })), index.h("div", { key: 'e3242a50f93a4523d82be92170122231e04526f8', class: 'ls-dv-field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'e905ed1d5058ed5a6838ca39f5796f3a3711bef2', dataItem: this.dataItem, readonly: this.readonly })), index.h("div", { key: '3348b728451efab4759e836c876132f1fb816490', class: 'ls-dv-field-set', slot: "placement" }, index.h("ls-field-placement", { key: '726509f7fd32bb2e3c06b3eff421d3a53604767f', dataItem: this.dataItem, readonly: this.readonly }))), index.h("ls-field-footer", { key: '8eb07e3f53678cf8a2d7fc11092b3439d2bb5d8c', dataItem: this.dataItem, readonly: this.readonly })));
+    }
+};
+LsFieldPropertiesImage.style = lsFieldPropertiesImageCss();
+
+const lsFieldPropertiesMultipleCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.ls-dv-properties-container{display:flex;flex-direction:column;height:100%}.ls-dv-field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-dv-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.ls-dv-row{flex-direction:row;align-items:center;justify-content:space-between}.ls-dv-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-dv-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-dv-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6f7176);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-dv-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-dv-field-type-inner{border-radius:0.625rem;background:var(--white, #ffffff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-dv-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.625rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-dv-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;text-transform:capitalize}.ls-dv-tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-dv-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6f7176)}.ls-dv-tab.ls-dv-active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-dv-tab:not(.ls-dv-active):hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #edeff2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.ls-dv-scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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;width:100%}.ls-dv-input-wrapper{position:relative}.ls-dv-full-width{width:100%}#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{display:flex;gap:0.5rem;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;font-weight:500;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)}button.ls-dv-secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #ffffff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.ls-dv-secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.ls-dv-destructive{border:1px solid var(--red-60, #f64a44);background-color:white;color:var(--red-60, #f64a44)}button.ls-dv-destructive:hover{border:1px solid var(--red-70, #dc2721);background:var(--red-10, #fff0f0)}.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 fieldTypeKeyMap = {
+    'signature': 'toolbox.signature',
+    'auto sign': 'toolbox.autosign',
+    'text': 'toolbox.text',
+    'signing date': 'toolbox.signingdate',
+    'date': 'toolbox.date',
+    'initials': 'toolbox.initials',
+    'checkbox': 'toolbox.checkbox',
+    'email': 'toolbox.email',
+    'number': 'toolbox.number',
+    'image': 'toolbox.image',
+    'dropdown': 'toolbox.dropdown',
+    'file': 'toolbox.file',
+    'drawn field': 'toolbox.drawn',
+    'drawn': 'toolbox.drawn',
+    'regular expression': 'toolbox.regex',
+    'regex': 'toolbox.regex',
+    'mixed': 'common.fields',
+};
+const LsFieldPropertiesMultiple = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate", 7);
+        this.update = index.createEvent(this, "update", 7);
+    }
+    dataItem;
+    readonly = false;
+    mutate;
+    update;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    // NOTE this alter is debounced to account for typing
+    alter(diff) {
+        this.dataItem = this.dataItem.map(item => ({ ...item, ...diff }));
+        this.debounce(diff, 500);
+    }
+    labeltimer;
+    debounce(diff, delay) {
+        if (this.labeltimer)
+            clearTimeout(this.labeltimer);
+        this.labeltimer = setTimeout(() => {
+            const evs = this.dataItem.map(item => ({ action: 'update', data: { ...item, ...diff } }));
+            this.mutate.emit(evs);
+            this.update.emit(evs);
+        }, delay);
+    }
+    allSignersSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, signer: undefined };
+        const firstSigner = this.dataItem[0].signer;
+        const allSame = this.dataItem.every(item => item.signer === firstSigner);
+        return { isSame: allSame, signer: allSame ? firstSigner : 13 };
+    };
+    allLabelsSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, label: undefined };
+        const firstLabel = this.dataItem[0].label;
+        const allSame = this.dataItem.every(item => item.label === firstLabel);
+        return { isSame: allSame, label: allSame ? firstLabel : undefined };
+    };
+    allElementsSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, elementType: 'mixed' };
+        const firstElementType = this.dataItem[0].elementType;
+        const allSame = this.dataItem.every(item => item.elementType === firstElementType);
+        return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };
+    };
+    allFieldsOptional = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, optional: false };
+        const firstElementOptional = this.dataItem[0].optional;
+        const allSame = this.dataItem.every(item => item.optional === firstElementOptional);
+        return { isSame: allSame, optional: allSame ? firstElementOptional : false };
+    };
+    render() {
+        return (index.h(index.Host, { key: '21c331d8e6726fd2177a6259dc83a4c1d72013d0' }, index.h("ls-field-properties-container", { key: '70103075b20b765cd3e2fa4e9b41faa52a7dbfbb', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '7d52c91405b3c410ae3bd26dbee9bbc9940440ff', class: 'ls-dv-field-set', slot: "content" }, index.h("div", { key: '2d369e4c21337ac0adf1c33145191f28e4a8a4f5', class: 'ls-dv-field-properties-section' }, index.h("div", { key: 'caa1f0fe955a2cadf75356b36024345ab9ac3e90', class: 'ls-dv-field-properties-section-text' }, index.h("p", { key: '2806214cafdaf6501e29d460e70385eb0431fadc', class: 'ls-dv-field-properties-section-title' }, i18n.dvI18n.t('fieldproperties.fieldtype')), index.h("p", { key: '7ca6e9ba018ac200c70423e3a8f576f55870ad63', class: 'ls-dv-field-properties-section-description' }, i18n.dvI18n.t('fieldproperties.fieldtypedescriptionmultiple'))), index.h("div", { key: '8d6f5ad752ba70785ed14af7b33eaeb7d791325a', class: 'ls-dv-field-type-wrapper', style: {
+                border: `1px dashed ${defaultPalette.defaultRolePalette[this.allSignersSame().signer % 100].s30}`,
+                background: defaultPalette.defaultRolePalette[this.allSignersSame().signer % 100].s10,
+            } }, index.h("div", { key: 'aa096db2fe07ed0b295dda267c58069f151822cd', class: 'ls-dv-field-type-inner' }, index.h("div", { key: 'b48617804728615d7aa5152b6c6bacd5b51a0199', class: 'ls-dv-field-type-icon', style: {
+                border: `1px solid ${defaultPalette.defaultRolePalette[this.allSignersSame().signer % 100].s60}`,
+                color: defaultPalette.defaultRolePalette[this.allSignersSame().signer % 100].s60,
+                background: defaultPalette.defaultRolePalette[this.allSignersSame().signer % 100].s10,
+            } }, index.h("ls-icon", { key: 'a9a821363a12baf57e50b53c7239cebd14898011', name: defaultFieldIcons.getFieldIcon(this.allElementsSame().elementType), size: 20 })), index.h("p", { key: 'b55bcc2d0884eedf62cf33da3b97afebacad6a7a', class: 'ls-dv-field-type-name' }, this.dataItem.length, " ", i18n.dvI18n.t(fieldTypeKeyMap[this.allElementsSame().elementType] || 'common.fields'), " ", i18n.dvI18n.t('common.fields'))))), index.h("div", { key: '2c055703e9a17c16911057ae6f7ba8c4925757af', class: 'ls-dv-field-properties-section ls-dv-row' }, index.h("div", { key: '0678fae2efeae45c06b7edc1f80ccc6f583ad094', class: 'ls-dv-field-properties-section-text' }, index.h("p", { key: 'cb30c383c726d6760cfff19d9ad1c1d5ad684cea', class: 'ls-dv-field-properties-section-title' }, i18n.dvI18n.t('fieldproperties.requiredfield'))), index.h("ls-toggle", { key: '6e4686c4f54d25f7ec05d64589f489dc8b79f533', onValueChange: (ev) => !this.readonly && this.alter({ optional: !ev.detail }), checked: !this.allFieldsOptional().optional, indeterminate: this.allFieldsOptional().isSame === false })), index.h("div", { key: 'c2e52f759c785dae73e4bf8096f89ed1b249d117', class: 'ls-dv-field-properties-section' }, index.h("div", { key: '639bc44d6d497da687a6f5868762c2fe1f7d3fee', class: 'ls-dv-field-properties-section-text' }, index.h("p", { key: 'b70f4912691f080ef3cfcfb4e071d6eb798070c4', class: 'ls-dv-field-properties-section-title' }, i18n.dvI18n.t('fieldproperties.fieldlabel')), index.h("p", { key: '89361a9e5477ad2190561732472cd1fdc62c3fe0', class: 'ls-dv-field-properties-section-description' }, i18n.dvI18n.t('fieldproperties.fieldlabeldescription'))), index.h("input", { key: '744b79734e886ac76137abc20207401a9a0b46a5', value: this.allLabelsSame().label, onInput: (e) => this.alter({ label: e.target.value }), width: "30", placeholder: i18n.dvI18n.t('fieldproperties.placeholdersignhere'), disabled: this.readonly }))), index.h("div", { key: 'e1455fb17cd28a435f48e6608bb57972127e7575', class: 'ls-dv-field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'c56248424553b41b587f446a5fcdacfee3ea0244', dataItem: this.dataItem, readonly: this.readonly }), index.h("ls-field-size", { key: '32cfdd4e812b65e181cca2550c9ef91b0f7306c0', dataItem: this.dataItem, readonly: this.readonly })), index.h("div", { key: 'd6daf145e13da19b1ba0a35b021b618e03e2755e', class: 'ls-dv-field-set', slot: "placement" }, index.h("ls-field-alignment", { key: 'cdafb88b10495193c2bf0f38a664967dd8c6d0f1', dataItem: this.dataItem, readonly: this.readonly }), index.h("ls-field-placement", { key: 'f56e3363bc98d09690715b31758cc3df4ecc7113', dataItem: this.dataItem, readonly: this.readonly }), index.h("ls-field-distribute", { key: '76e83f04c3d3973f5753b9038bbca92ff2ea2fde', dataItem: this.dataItem, readonly: this.readonly }))), index.h("ls-field-footer", { key: 'ff252944fabbfcdf90cae306ea9381575a334b9e', dataItem: this.dataItem, readonly: this.readonly }), index.h("slot", { key: '806c119839f28abcf4befe2dea5dc28591de5afc' })));
+    }
+};
+LsFieldPropertiesMultiple.style = lsFieldPropertiesMultipleCss();
+
+const lsFieldPropertiesNumberCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.ls-dv-field-set{display:flex;flex-direction:column;gap:1rem;width:100%}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;width:100%}.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{display:flex;gap:0.5rem;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;font-weight:500;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)}button.ls-dv-secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #ffffff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.ls-dv-secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.ls-dv-destructive{border:1px solid var(--red-60, #f64a44);background-color:white;color:var(--red-60, #f64a44)}button.ls-dv-destructive:hover{border:1px solid var(--red-70, #dc2721);background:var(--red-10, #fff0f0)}.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 LsFieldPropertiesNumber = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    dataItem;
+    readonly = false;
+    render() {
+        return (index.h(index.Host, { key: '5544d8eb23254af289b388dee34d8a592bb7f4b6' }, index.h("ls-field-properties-container", { key: 'b0d84298e9b5c5812e80114676c3818fc6a084b3', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '83aa4a8b80d717a979c7e971b22ac5f7464bb71b', class: 'ls-dv-field-set', slot: "content" }, index.h("ls-field-content", { key: '8aed8b9920fa2cc940babdf791db98873407470a', dataItem: this.dataItem, readonly: this.readonly }), index.h("ls-field-properties-advanced", { key: '5319a3c09c2989825f39c7a74866ad7d57aa3f81', dataItem: this.dataItem, readonly: this.readonly })), index.h("div", { key: '5abbb75f57a91561e928e7fe852ce24510fcdafc', class: 'ls-dv-field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'be91cbce65ad4b7383c7b9f5ec9fde98bae4f5c4', dataItem: this.dataItem, readonly: this.readonly })), index.h("div", { key: '4dbdd4f74ac3c6497dff88ce5bc20d1d47e7d284', class: 'ls-dv-field-set', slot: "placement" }, index.h("ls-field-placement", { key: '68fdecac847c636ed8e428a1ddcb29f4140f9837', dataItem: this.dataItem, readonly: this.readonly }))), index.h("ls-field-footer", { key: 'c63e164173ae3be09a68b6d166d3277ad405e443', dataItem: this.dataItem, readonly: this.readonly })));
+    }
+};
+LsFieldPropertiesNumber.style = lsFieldPropertiesNumberCss();
+
+const lsFieldPropertiesSignatureCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.ls-dv-field-set{display:flex;flex-direction:column;gap:1rem;width:100%}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;width:100%}.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{display:flex;gap:0.5rem;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;font-weight:500;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)}button.ls-dv-secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #ffffff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.ls-dv-secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.ls-dv-destructive{border:1px solid var(--red-60, #f64a44);background-color:white;color:var(--red-60, #f64a44)}button.ls-dv-destructive:hover{border:1px solid var(--red-70, #dc2721);background:var(--red-10, #fff0f0)}.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 LsFieldPropertiesSignature = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    dataItem;
+    template; // LSApiTemplate
+    readonly = false;
+    render() {
+        return (index.h(index.Host, { key: '93042c9fc3181dbd7cc31ad9f94617e386497aa4' }, index.h("ls-field-properties-container", { key: 'fa83ca5fb99c882246e77d44e246d4511e643484', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'e78f8d84515d7c3708b04b99493a32876b45ef6a', class: 'ls-dv-field-set', slot: "content" }, index.h("ls-field-content", { key: 'c7cc6753c87af46c7934ab7b3629560aa0ef3241', dataItem: this.dataItem, showValidationTypes: false, readonly: this.readonly }), index.h("ls-field-properties-advanced", { key: '589c129e896eb59f97185bc6ba059e524a013fee', dataItem: this.dataItem, readonly: this.readonly })), index.h("div", { key: '7872c27031cd6f501dfdbc8fc4874af678334564', class: 'ls-dv-field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '565f84d2fbea5b41aa862406a23d2df291f7f8f2', dataItem: this.dataItem, template: this.template, readonly: this.readonly })), index.h("div", { key: '657bcbfc4051cda08225e3a16120b74972ee1e28', class: 'ls-dv-field-set', slot: "placement" }, index.h("ls-field-placement", { key: '9c6d41d28abad21256757ef1236892d7d11ce779', dataItem: this.dataItem, readonly: this.readonly }))), index.h("ls-field-footer", { key: '54146052a4d10cb72d3dac21437c9830707a551b', dataItem: this.dataItem, readonly: this.readonly })));
+    }
+};
+LsFieldPropertiesSignature.style = lsFieldPropertiesSignatureCss();
+
+const lsFieldPropertiesTextCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.ls-dv-field-set{display:flex;flex-direction:column;gap:1rem;width:100%}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;width:100%}.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{display:flex;gap:0.5rem;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;font-weight:500;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)}button.ls-dv-secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #ffffff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.ls-dv-secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.ls-dv-destructive{border:1px solid var(--red-60, #f64a44);background-color:white;color:var(--red-60, #f64a44)}button.ls-dv-destructive:hover{border:1px solid var(--red-70, #dc2721);background:var(--red-10, #fff0f0)}.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 LsFieldPropertiesText = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    dataItem;
+    readonly = false;
+    render() {
+        return (index.h(index.Host, { key: '69d5bea954ed859f7590a767c4f6c843d75d1a39' }, index.h("ls-field-properties-container", { key: '103791254cf8170d7ae6eddf2908af77b0702d24', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'a15e2d32b0e216f264eea798986a9b3f2f20b2a0', class: 'ls-dv-field-set', slot: "content" }, index.h("ls-field-content", { key: 'fbecb6614bfcda0f179e335caa1e39a42d9c6f48', dataItem: this.dataItem, readonly: this.readonly }), index.h("ls-field-properties-advanced", { key: '3c43748d69d50f5e24597c7c4da23276582b8e30', dataItem: this.dataItem, readonly: this.readonly })), index.h("div", { key: '2d91e7563025d3e6232767f9cbd5320a3df086df', class: 'ls-dv-field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '5a9188e1586218fcd12ea4ae21e1b8700b022d79', dataItem: this.dataItem, readonly: this.readonly })), index.h("div", { key: 'b0bc42db750d544ec69a1b165a5945f6c1f7ccfa', class: 'ls-dv-field-set', slot: "placement" }, index.h("ls-field-placement", { key: '5b55324eb6ae03a7b1962ad4920fd71789ae6433', dataItem: this.dataItem, readonly: this.readonly }))), index.h("ls-field-footer", { key: '0a6f79e656aedc74c429d6400d50548d1005942b', dataItem: this.dataItem, readonly: this.readonly })));
+    }
+};
+LsFieldPropertiesText.style = lsFieldPropertiesTextCss();
+
+const lsParticipantCardCss = () => `:host{display:block}*{box-sizing:border-box;margin:0}.ls-dv-participant-card{display:flex;padding:0.625rem;flex-direction:column;align-items:flex-start;gap:0.5rem;align-self:stretch;cursor:pointer}.ls-dv-participant-card-active,.ls-dv-participant-card:hover{outline:2px solid var(--active-outline-colour);outline-offset:-2px}.ls-dv-top-card{border-radius:1rem 1rem 0 0}.ls-dv-full-card{border-radius:1rem}.ls-dv-bottom-card{border-radius:0 0 1rem 1rem}.ls-dv-participant-card-inner{width:100%;min-width:0;display:flex;flex-direction:column;gap:0.5rem}.ls-dv-hidden{visibility:hidden;display:none}.ls-dv-form-button-set{display:flex;gap:0.5rem}.ls-dv-role-label{display:flex;padding:0.125rem 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-dv-role-label.ls-dv-fields{border-radius:1rem;margin-top:0.5rem}.ls-dv-inner-button{margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none;cursor:pointer;color:var(--default-button-colour)}.ls-dv-inner-button:hover{color:var(--hover-button-colour)}.ls-dv-inner-button-disabled{pointer-events:none;opacity:0.4}.ls-dv-participant-card-top-items{display:flex;width:100%;justify-content:space-between;align-items:center}.ls-dv-button-set{display:flex;gap:0.125rem}.ls-dv-participant-text-description{font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ls-dv-participant-text-type{font-style:normal;font-weight:400;line-height:1.25rem;}.ls-dv-title-button{width:100%;text-align:left;background-color:transparent;border:none}.ls-dv-full-width{width:100%}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;width:100%}.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:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){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)}button.ls-dv-tertiary{border:1px solid var(--primary-60, #4456f6);background:transparent;color:var(--primary-70, #2134dc)}button.ls-dv-tertiary:hover{border:1px solid var(--primary-70, #2134dc);border:1px solid var(--primary-80, #0e20c1)}button.ls-dv-destructive{border:1px solid var(--red-60, #f64a44);background:transparent;color:var(--red-60, #f64a44)}button.ls-dv-destructive:hover{border:1px solid var(--red-70, #dc2721);background:var(--red-10, #fff0f0);background-color:var(--red-10, #fff0f0)}button.ls-dv-secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #ffffff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.ls-dv-secondary: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 LsParticipantCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate", 7);
+        this.opened = index.createEvent(this, "opened", 7);
+        this.roleChange = index.createEvent(this, "roleChange", 7);
+        this.addParticipant = index.createEvent(this, "addParticipant", 7);
+    }
+    get component() { return index.getElement(this); }
+    signer;
+    index;
+    editable = false;
+    template;
+    active = false;
+    mutate;
+    opened;
+    roleChange;
+    // 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.signer = { ...this.signer, ...diff };
+        this.debounce(this.signer, 500);
+    }
+    labeltimer;
+    debounce(data, delay) {
+        if (this.labeltimer)
+            clearTimeout(this.labeltimer);
+        this.labeltimer = setTimeout(() => {
+            const diffs = [{ action: 'update', data }];
+            this.mutate.emit(diffs);
+        }, delay);
+    }
+    deleteHandler(role) {
+        this.mutate.emit([{ action: 'delete', data: role }]);
+    }
+    swapHandler(role1, role2) {
+        this.mutate.emit([{ action: 'swap', data: role1, data2: role2 }]);
+    }
+    modeHandler(_editable) {
+        // When opened fire an event to let the parent handle closing other controls
+        if (_editable) {
+            this.opened.emit(this.signer);
+        }
+    }
+    addParticipant;
+    busy = false;
+    swapUpBtn;
+    swapDownBtn;
+    editBtn;
+    deleteParticipantBtn;
+    addingWitness = false;
+    templateChanged() {
+        this.addingWitness = false;
+    }
+    componentDidLoad() { }
+    render() {
+        const participantFields = this.template.elementConnection.templateElements.filter(f => Number(f.signer) === this.signer.signerIndex) || [];
+        const child = this.template.roles.find(r => r.signerParent === this.signer.id);
+        // Find previous and next non-witness roles for swapping
+        const getPreviousNonWitness = () => {
+            for (let i = this.index - 1; i >= 0; i--) {
+                if (this.template.roles[i].roleType !== 'WITNESS') {
+                    return this.template.roles[i];
+                }
+            }
+            return null;
+        };
+        const getNextNonWitness = () => {
+            for (let i = this.index + 1; i < this.template.roles.length; i++) {
+                if (this.template.roles[i].roleType !== 'WITNESS') {
+                    return this.template.roles[i];
+                }
+            }
+            return null;
+        };
+        const previousRole = getPreviousNonWitness();
+        const nextRole = getNextNonWitness();
+        const formatRoleName = (signer) => {
+            if (signer.roleType == 'WITNESS')
+                return i18n.dvI18n.t('participants.participantwitness', { index: signer.signerIndex % 100 });
+            return i18n.dvI18n.t('participants.participant', { index: signer.signerIndex });
+        };
+        return (index.h(index.Host, null, index.h("div", { class: 'ls-dv-participant-card' +
+                (this.active ? ' ls-dv-participant-card-active' : '') +
+                (child ? ' ls-dv-top-card' : this.signer?.signerParent ? ' ls-dv-bottom-card' : ' ls-dv-full-card'), style: {
+                'background': defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s10,
+                'border': `1px solid ${defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s60}`,
+                'marginTop': this.signer.roleType === 'WITNESS' ? '-0.813rem' : '0',
+                '--active-outline-colour': defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s60,
+            }, onMouseEnter: e => e.currentTarget.querySelector('.ls-dv-button-set')?.classList.remove('ls-dv-hidden'), onMouseLeave: e => e.currentTarget.querySelector('.ls-dv-button-set')?.classList.add('ls-dv-hidden'), onClick: () => this.roleChange.emit(this.signer.signerIndex), onDblClick: () => {
+                this.editable = true;
+            } }, index.h("div", { class: 'ls-dv-participant-card-inner' }, index.h("div", { class: 'ls-dv-participant-card-top-items' }, index.h("div", { class: 'ls-dv-role-label', style: {
+                background: defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s20,
+                color: defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s90,
+            } }, index.h("ls-icon", { name: this.signer?.roleType === 'APPROVER' ? 'check-circle-icon' : this.signer?.roleType === 'SIGNER' ? 'signature-icon' : 'eye-icon' }), this.signer?.ordinal || ''), index.h("div", { class: 'ls-dv-button-set ls-dv-hidden' }, previousRole && this.signer.roleType !== 'WITNESS' && (index.h("div", { class: `ls-dv-inner-button${this.busy ? ' ls-dv-inner-button-disabled' : ''}`, onClick: () => {
+                if (this.busy)
+                    return;
+                this.swapHandler(this.signer, previousRole);
+            }, style: {
+                '--default-button-colour': defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s40,
+                '--hover-button-colour': defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s60,
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('participants.moveup') }, index.h("ls-icon", { name: "arrow-up-icon", size: 18 }))), nextRole && this.signer.roleType !== 'WITNESS' && (index.h("div", { class: `ls-dv-inner-button${this.busy ? ' ls-dv-inner-button-disabled' : ''}`, onClick: () => {
+                if (this.busy)
+                    return;
+                this.swapHandler(this.signer, nextRole);
+            }, style: {
+                '--default-button-colour': defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s40,
+                '--hover-button-colour': defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s60,
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('participants.movedown') }, index.h("ls-icon", { name: "arrow-down-icon", size: 18 }))), index.h("div", { class: `ls-dv-inner-button${this.busy ? ' ls-dv-inner-button-disabled' : ''}`, onClick: () => {
+                if (this.busy)
+                    return;
+                this.editable = !this.editable;
+            }, style: {
+                '--default-button-colour': defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s40,
+                '--hover-button-colour': defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s60,
+            } }, index.h("ls-icon", { name: this.editable ? 'check-icon' : 'pencil-alt-icon', size: 18, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": this.editable ? i18n.dvI18n.t('participants.savechanges') : i18n.dvI18n.t('participants.editparticipant') })), index.h("div", { class: `ls-dv-inner-button${this.busy ? ' ls-dv-inner-button-disabled' : ''}`, onClick: () => {
+                if (this.busy)
+                    return;
+                this.deleteHandler(this.signer);
+            }, style: {
+                '--default-button-colour': defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s40,
+                '--hover-button-colour': defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s60,
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('participants.deleteparticipant'), "data-tooltip-place": "top-end" }, index.h("ls-icon", { name: "trash-icon", size: 18 })))), this.editable ? (index.h("div", { class: 'ls-dv-participant-card-inner' }, this.signer?.roleType !== 'WITNESS' ? (index.h("ls-input-wrapper", { select: true, leadingIcon: this.signer?.roleType === 'APPROVER' ? 'check-circle-icon' : 'signature-icon' }, index.h("select", { name: "roleType", id: "role-type", class: 'ls-dv-has-leading-icon', onChange: e => this.alter({ roleType: e.target.value }), disabled: child ? true : false }, index.h("option", { value: "APPROVER", selected: this.signer?.roleType === 'APPROVER' }, i18n.dvI18n.t('participants.approver')), index.h("option", { value: "SIGNER", selected: this.signer?.roleType === 'SIGNER' }, i18n.dvI18n.t('participants.signer'))))) : (index.h("ls-input-wrapper", { leadingIcon: "eye-icon" }, index.h("input", { name: "roleType", id: "role-type", class: 'ls-dv-has-leading-icon', disabled: true, value: "Witness", style: { wdith: '100%' } }))), index.h("input", { type: "text", id: "participant-description", name: "participantDescription", placeholder: i18n.dvI18n.t('participants.placeholder'), defaultValue: this.signer.name, onInput: e => this.alter({ name: e.target.value }), onKeyUp: e => {
+                if (e.key === 'Enter' || e.keyCode === 13)
+                    this.editable = false;
+            } }), this.signer?.roleType === 'SIGNER' && !child ? (index.h("ls-button", { variant: "tertiary", outline: true, size: "sm", fullWidth: true, text: i18n.dvI18n.t('participants.addwitness'), leadingIcon: "plus-icon", loading: this.busy || this.addingWitness, disabled: this.busy || this.addingWitness, onClick: () => {
+                if (this.busy || this.addingWitness)
+                    return;
+                this.addingWitness = true;
+                this.addParticipant.emit({ type: 'WITNESS', parent: this.signer.id, signerIndex: this.signer.signerIndex + 100 });
+            } })) : this.signer?.roleType === 'SIGNER' && child ? (index.h("ls-button", { variant: "destructiveTertiary", outline: true, size: "sm", fullWidth: true, text: i18n.dvI18n.t('participants.removewitness'), leadingIcon: "minus-sm-icon", loading: this.busy, disabled: this.busy, onClick: () => {
+                if (this.busy)
+                    return;
+                this.deleteHandler(child);
+            } })) : this.signer?.roleType === 'WITNESS' ? (index.h("ls-button", { variant: "destructiveTertiary", outline: true, size: "sm", fullWidth: true, text: i18n.dvI18n.t('participants.removewitness'), leadingIcon: "minus-sm-icon", loading: this.busy, disabled: this.busy, onClick: () => {
+                if (this.busy)
+                    return;
+                this.deleteHandler(this.signer);
+            } })) : null)) : (index.h("div", { class: 'ls-dv-participant-card-text' }, index.h("p", { class: "ls-dv-participant-text-description", style: {
+                color: defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s100,
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-html": `<span style="white-space:normal;word-break:break-word">${this.signer.name || formatRoleName(this.signer)}</span>`, onMouseEnter: (e) => {
+                const el = e.currentTarget;
+                if (el.scrollWidth <= el.clientWidth) {
+                    el.removeAttribute('data-tooltip-html');
+                }
+            } }, this.signer.name || formatRoleName(this.signer)), index.h("p", { class: "ls-dv-participant-text-type", style: {
+                color: defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s80,
+                textTransform: 'capitalize',
+            } }, i18n.dvI18n.t(`participants.${this.signer.roleType.toLowerCase()}`)), this.signer?.roleType !== 'APPROVER' && (index.h("div", { class: 'ls-dv-role-label ls-dv-fields', style: {
+                background: participantFields.length === 0 ? defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s60 : defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s20,
+                color: participantFields.length === 0 ? 'white' : defaultPalette.defaultRolePalette[this.signer?.signerIndex % 100].s90,
+            } }, participantFields.length === 0 && index.h("ls-icon", { name: "exclamation-circle-icon", size: 16, style: { marginRight: '0.125rem' } }), participantFields.length === 0
+            ? i18n.dvI18n.t('participants.signaturerequired')
+            : `${participantFields.length} ${participantFields.length === 1 ? i18n.dvI18n.t('common.field') : i18n.dvI18n.t('common.fields')}`)))))), index.h("slot", null), index.h("ls-tooltip", { tooltipId: "ls-dv-tooltip" })));
+    }
+    static get watchers() { return {
+        "editable": ["modeHandler"],
+        "template": ["templateChanged"]
+    }; }
+};
+LsParticipantCard.style = lsParticipantCardCss();
+
+const lsParticipantManagerCss = () => `.ls-dv-label-span{position:absolute;font-family:inherit;display:inline-flex;align-items:center;line-height:1rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ls-dv-participant-list{position:relative;display:flex;flex-direction:column;gap:0.75rem}.ls-dv-sender-card{display:flex;padding:0.625rem;flex-direction:column;align-items:flex-start;align-self:stretch;cursor:pointer;border-radius:1rem;background:#f7f8fa;border:1px solid #afb0b2}.ls-dv-sender-card-active,.ls-dv-sender-card:hover{outline:2px solid #afb0b2;outline-offset:-2px}.ls-dv-sender-card-inner{display:flex;flex-direction:column;gap:0.5rem;width:100%;min-width:0}.ls-dv-sender-card-top-items{display:flex;width:100%;justify-content:space-between;align-items:center}.ls-dv-role-label{display:flex;padding:0.125rem 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.625rem;font-size:0.875rem;font-weight:500;line-height:1.25rem}.ls-dv-role-label.ls-dv-fields{border-radius:1rem}.ls-dv-sender-card-text{display:flex;flex-direction:column;min-width:0}.ls-dv-sender-name{font-size:0.875rem;font-weight:500;line-height:1.25rem;color:#45484d}.ls-dv-sender-type{font-size:0.75rem;font-weight:400;line-height:1rem;color:#6f7176;text-transform:capitalize}*{box-sizing:border-box;margin:0}.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-add-participant-button{position:sticky;display:flex;padding:0.75rem 0;margin-bottom:-0.75rem;margin-top:-0.75rem;bottom:-0.75rem;background-image:linear-gradient(to top, var(--gray-10, #f7f8fa) 0%, var(--gray-10, #f7f8fa) 80%, transparent 100%)}.ls-dv-add-participant-button ls-add-new-button{width:100%}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 LsParticipantManager = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate", 7);
+        this.update = index.createEvent(this, "update", 7);
+        this.addParticipant = index.createEvent(this, "addParticipant", 7);
+        this.roleChange = index.createEvent(this, "roleChange", 7);
+    }
+    get element() { return index.getElement(this); }
+    /**
+     * The base editor.
+     * {LSDocumentViewer}
+     */
+    editor;
+    /**
+     * The base template information (as JSON).
+     * {LSApiTemplate}
+     */
+    template;
+    /**
+     * The currently active signer index.
+     * {number}
+     */
+    activeSigner;
+    /**
+     * Whether a mutation is currently in progress.
+     * {boolean}
+     */
+    busy = false;
+    addingParticipant = false;
+    templateChanged() {
+        this.addingParticipant = false;
+    }
+    mutate;
+    update;
+    addParticipant;
+    selectedHandler(_role) {
+        //console.log(role, 'participant manager')
+    }
+    deleteHandler(role) {
+        this.update.emit([{ action: 'delete', data: role }]);
+        this.mutate.emit([{ action: 'delete', data: role }]);
+    }
+    swapHandler(role1, role2) {
+        this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);
+    }
+    handleOpened(event) {
+        const participants = this.element.shadowRoot.querySelectorAll('ls-participant-card');
+        participants.forEach(element => {
+            const isTarget = element.signer?.id === event.detail.id;
+            element.editable = isTarget;
+            if (isTarget) {
+                element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+    }
+    handleOpenNewWitness(event) {
+        const { parent } = event.detail;
+        const observer = new MutationObserver(() => {
+            const participants = this.element.shadowRoot.querySelectorAll('ls-participant-card');
+            participants.forEach(element => {
+                const isTarget = element.signer?.signerParent === parent;
+                element.editable = isTarget;
+                if (isTarget) {
+                    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            });
+            observer.disconnect();
+        });
+        observer.observe(this.element.shadowRoot, { childList: true, subtree: true });
+    }
+    roleChange;
+    render() {
+        return (index.h(index.Host, { key: 'a114a065d2508292fe982757651f35c5d5958e8a' }, index.h("div", { key: 'e36ee2b089bce6561f82273347e20d121642cc05', class: "ls-dv-editor-infobox" }, index.h("h2", { key: '3d107661610b31f493cc7afb032d2e7aec62465d', class: "ls-dv-toolbox-section-title" }, i18n.dvI18n.t('participants.title')), index.h("p", { key: '0420a0d6b572062ac64c6718c2883cd81cf78343', class: "ls-dv-toolbox-section-description" }, i18n.dvI18n.t('participants.description'))), index.h("div", { key: '95833f5d2e443372735c78098d01e631f2e6e3bb', class: "ls-dv-participant-list" }, index.h("div", { key: 'b8d93fff31cd1bdeeb74e8e6926d9807700028d6', class: 'ls-dv-sender-card' + (this.activeSigner === 0 ? ' ls-dv-sender-card-active' : ''), onClick: () => this.roleChange.emit(0) }, index.h("div", { key: 'f391b2bd058c2820f16955fbd1fc033db4655e71', class: "ls-dv-sender-card-inner" }, index.h("div", { key: '3c8f4b3f13440e34dff9ae52cf6e4ebcd0e07a1f', class: "ls-dv-sender-card-top-items" }, index.h("div", { key: '8dbac88b1d79b8d1bd68db851c450e964d3ca65d', class: "ls-dv-role-label", style: { background: '#edeff2', color: '#5e6066' } }, index.h("ls-icon", { key: '0276927d29ef0d71f676322b9b3a50767a2892a0', name: "user-icon" }))), index.h("div", { key: 'c255dd02beb2bfc78857d2cd30d3439623786cfc', class: "ls-dv-sender-card-text" }, index.h("p", { key: '3737054240b2ecc25e1819f5a66535e7c928b3ff', class: "ls-dv-sender-name" }, i18n.dvI18n.t('toolbar.sender')), index.h("p", { key: 'ec3a992eda47b9194c123616997600bf40130645', class: "ls-dv-sender-type" }, i18n.dvI18n.t('toolbar.you'))), this.template &&
+            (() => {
+                const senderFields = this.template.elementConnection.templateElements.filter(f => Number(f.signer) === 0) || [];
+                return senderFields.length > 0 ? (index.h("div", { class: "ls-dv-role-label ls-dv-fields", style: { background: '#edeff2', color: '#5e6066' } }, `${senderFields.length} ${senderFields.length === 1 ? i18n.dvI18n.t('common.field') : i18n.dvI18n.t('common.fields')}`)) : null;
+            })())), this.template &&
+            this.template?.roles.map((r, index$1) => {
+                return (index.h("ls-participant-card", { signer: r, index: index$1, template: this.template, active: r.signerIndex === this.activeSigner, busy: this.busy, onOpened: event => {
+                        this.handleOpened.bind(this)(event);
+                    }, onAddParticipant: event => this.handleOpenNewWitness(event) }));
+            })), index.h("div", { key: 'bd417aa83cf9af5342f943c4b5e49c3c30e50a7d', class: "ls-dv-add-participant-button" }, index.h("ls-add-new-button", { key: 'f37c41f95433e9fe11fab9adc291337f3528cfd0', text: i18n.dvI18n.t('participants.addparticipant'), icon: "user-add-icon", loading: this.addingParticipant, disabled: this.addingParticipant, onClick: () => {
+                if (this.addingParticipant)
+                    return;
+                this.addingParticipant = true;
+                this.addParticipant.emit({ type: 'SIGNER' });
+            } })), index.h("slot", { key: 'e7d36f1636e0271667751508550178402fb01f63' })));
+    }
+    static get watchers() { return {
+        "template": ["templateChanged"]
+    }; }
+};
+LsParticipantManager.style = lsParticipantManagerCss();
+
+const lsRecipientCardCss = () => `:host{display:block}*{box-sizing:border-box;margin:0}.ls-dv-participant-card{display:flex;padding:0.75rem;flex-direction:column;align-items:flex-start;gap:0.5rem;align-self:stretch;max-height:6.25rem;transition:max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;transform-origin:top}.ls-dv-participant-card.ls-dv-expand-up{transform-origin:bottom}.ls-dv-participant-card.ls-dv-expand-down{transform-origin:top}.ls-dv-participant-card.ls-dv-expanded{max-height:125rem;}.ls-dv-dot{width:0.5rem;height:0.5rem;background:var(--red-50, #ff706b);border-radius:50%;margin-right:0.25rem}.ls-dv-top-card{border-radius:1rem 1rem 0 0}.ls-dv-full-card{border-radius:1.5rem}.ls-dv-bottom-card{border-radius:0 0 1rem 1rem}.ls-dv-participant-card-inner{width:100%;display:flex;flex-direction:column;gap:0.5rem}.ls-dv-hidden{visibility:hidden;display:none}.ls-dv-form-button-set{display:flex;gap:0.5rem}.ls-dv-role-label{display:flex;padding:0.125rem 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;text-transform:capitalize}.ls-dv-fields-box{display:flex;flex-direction:column;gap:0.5rem;width:100%}.ls-dv-role-label.ls-dv-fields{border-radius:1rem;margin-top:0.5rem}.ls-dv-inner-button{margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none;cursor:pointer;color:var(--default-button-colour)}.ls-dv-inner-button:hover{color:var(--hover-button-colour)}.ls-dv-participant-card-top-items{display:flex;width:100%;justify-content:space-between;align-items:center}.ls-dv-button-set{display:flex;gap:0.125rem}.ls-dv-participant-text-description{font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-dv-participant-text-type{font-style:normal;font-weight:400;line-height:1.25rem;}.ls-dv-title-button{width:100%;text-align:left;background-color:transparent;border:none}.ls-dv-full-width{width:100%}.ls-dv-participant-card-text{padding:0 0.125rem 0.125rem 0.125rem}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;width:100%}.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:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){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)}button.ls-dv-tertiary{border:1px solid var(--primary-60, #4456f6);background:transparent;color:var(--primary-70, #2134dc)}button.ls-dv-tertiary:hover{border:1px solid var(--primary-70, #2134dc);border:1px solid var(--primary-80, #0e20c1)}button.ls-dv-destructive{border:1px solid var(--red-60, #f64a44);background:transparent;color:var(--red-60, #f64a44)}button.ls-dv-destructive:hover{border:1px solid var(--red-70, #dc2721);background:var(--red-10, #fff0f0);background-color:var(--red-10, #fff0f0)}button.ls-dv-secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #ffffff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.ls-dv-secondary: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 LsRecipientCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.changeSigner = index.createEvent(this, "changeSigner", 7);
+        this.fieldSelected = index.createEvent(this, "fieldSelected", 7);
+    }
+    get component() { return index.getElement(this); }
+    /**
+     * The initial template data, including the link for background PDF. See README and
+     * example for correct GraphQL query and data structure.
+     * {LSApiTemplate}
+     */
+    recipient;
+    activeRecipient;
+    fieldTypeSelected = {
+        label: 'Signature',
+        formElementType: 'signature',
+        elementType: 'signature',
+        validation: 0,
+        defaultHeight: fieldDefaults.FIELD_DEFAULTS['signature'].defaultHeight,
+        defaultWidth: fieldDefaults.FIELD_DEFAULTS['signature'].defaultWidth,
+    };
+    template;
+    isHovered = false;
+    setIsHovered(value) {
+        this.isHovered = value;
+    }
+    validationErrors = [];
+    /**
+     * Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list.
+     * {string}
+     */
+    filtertoolbox = null;
+    // Send an internal event to be processed
+    changeSigner;
+    // Send an internal event to be processed
+    fieldSelected;
+    handleFieldTypeSelected(event) {
+        const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
+        console.log(fields);
+        fields.forEach(element => {
+            element.isSelected = element.formElementType === event.detail.formElementType;
+        });
+        this.fieldTypeSelected = event.detail;
+    }
+    showTool(fieldFormType) {
+        return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
+    }
+    cardRef;
+    handleExpandCollapse() {
+        if (!this.cardRef)
+            return;
+        const isActive = this.activeRecipient === this.recipient.signerIndex;
+        if (isActive) {
+            // Expand
+            this.cardRef.style.maxHeight = this.cardRef.scrollHeight + 2 + 'px';
+        }
+        else {
+            // Collapse
+            this.cardRef.style.maxHeight = '6rem';
+        }
+    }
+    componentDidLoad() {
+        const isActive = this.activeRecipient === this.recipient.signerIndex;
+        this.cardRef.style.maxHeight = isActive ? this.cardRef.scrollHeight + 2 + 'px' : '6rem';
+    }
+    render() {
+        const recipientFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.recipient.signerIndex) || [];
+        const recipientSignatures = recipientFields.filter(f => f.elementType === 'signature' || f.elementType === 'auto sign');
+        const dropdownsMissingOptions = recipientFields.filter(f => f.validation === 20 && (!f.options || f.options.length === 0));
+        return (index.h(index.Host, { key: 'b6aa3783830f95dbf259641f8dac1e2e18212379' }, index.h("div", { key: 'f4072e791b9cb7688980bb4311990d6b9db57988', ref: el => (this.cardRef = el), class: `ls-dv-participant-card ls-dv-top-card ls-dv-full-card ${this.activeRecipient === this.recipient.signerIndex ? 'ls-dv-expanded' : ''}`, style: {
+                background: defaultPalette.defaultRolePalette[this.recipient?.signerIndex % 100].s10,
+                border: `1px ${this.recipient.roleType === 'WITNESS' ? 'dashed' : 'solid'} ${defaultPalette.defaultRolePalette[this.recipient?.signerIndex % 100].s60}`,
+                outline: `${this.recipient.signerIndex === this.activeRecipient ? '4px solid ' + defaultPalette.defaultRolePalette[this.recipient?.signerIndex % 100].s40 : 'none'}`,
+                marginTop: '0',
+                cursor: 'pointer',
+            }, onClick: () => {
+                this.changeSigner.emit(this.recipient.signerIndex);
+            }, onMouseEnter: () => {
+                this.setIsHovered(true);
+            }, onMouseLeave: () => {
+                this.setIsHovered(false);
+            } }, index.h("div", { key: 'bf498a3424755635f71c0bb3be7c9c8bac11a0c7', class: 'ls-dv-participant-card-inner' }, index.h("div", { key: '6e0fca72dc3e11df31a1531c4be1f10c0d143e20', class: 'ls-dv-participant-card-top-items' }, index.h("div", { key: '6101fed339799c0084afd2e56ea4b2a3f487a806', class: 'ls-dv-role-label', style: {
+                background: defaultPalette.defaultRolePalette[this.recipient?.signerIndex % 100].s20,
+                color: defaultPalette.defaultRolePalette[this.recipient?.signerIndex % 100].s90,
+            } }, index.h("ls-icon", { key: '28b53eefe446614172302f9a4ec5d8db89d9fa21', name: this.recipient?.roleType === 'APPROVER' ? 'check-circle-icon' : this.recipient?.roleType === 'WITNESS' ? 'eye-icon' : 'signature-icon', size: 16 }), i18n.dvI18n.t(`participants.${(this.recipient?.roleType || 'SIGNER').toLowerCase()}`)), index.h("ls-icon", { key: '7fe9557a3e078fc31a5b55b145e5a99422262491', name: "cursor-click-icon", size: 16, customStyle: { color: defaultPalette.defaultRolePalette[this.recipient?.signerIndex % 100].s70 }, solid: true, style: { display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? 'block' : 'none' } }), index.h("div", { key: 'a11f57938c0e28d1ed7e2bb77e1f0654d932997f', class: "ls-dv-dot", style: { display: (!this.isHovered || this.recipient.signerIndex === this.activeRecipient) && this.validationErrors.filter(v => v?.signerIndex === this.recipient.signerIndex).length > 0 ? 'block' : 'none' } })), index.h("div", { key: 'f39af8cd6b58783d176f7ed0ebe939cdccdf7bbf', class: 'ls-dv-participant-card-text' }, index.h("p", { key: '3c8381bff8bb981b75431655c13e858cdc7ae32c', class: "ls-dv-participant-text-description", style: {
+                color: defaultPalette.defaultRolePalette[this.recipient?.signerIndex % 100].s100,
+            } }, this.recipient?.previousRecipientDecides ? i18n.dvI18n.t('common.tobedecided') : this.recipient?.firstName + ' ' + this.recipient?.lastName), index.h("p", { key: '6d94b72b6017f1d7b8896a5b34b2cebf6d75a195', class: "ls-dv-participant-text-type", style: {
+                color: defaultPalette.defaultRolePalette[this.recipient?.signerIndex % 100].s80,
+            } }, this.recipient?.previousRecipientDecides ? i18n.dvI18n.t('common.previousrecipientdecidesdetails') : this.recipient.email)), index.h("div", { key: '0501ea0e548375077146e08248d83e905ba1ea9e', class: "ls-dv-fields-box", style: { display: this.recipient.signerIndex === this.activeRecipient ? 'flex' : 'hidden' } }, this.recipient.signerIndex > 0 && this.showTool('signature') && this.recipient?.roleType !== 'APPROVER' && (index.h("ls-toolbox-field", { key: 'ae702f9affae9c2484b5b2fa7ce0391060d5692b', elementType: "signature", formElementType: "signature", label: i18n.dvI18n.t('toolbox.signature'), defaultHeight: fieldDefaults.FIELD_DEFAULTS['signature'].defaultHeight, defaultWidth: fieldDefaults.FIELD_DEFAULTS['signature'].defaultWidth, validation: 0, icon: "signature-icon", tooltip: i18n.dvI18n.t('toolbox.signaturetooltip'), signer: this.recipient.signerIndex, redDot: recipientSignatures.length === 0 })), this.recipient.signerIndex === 0 && this.showTool('auto sign') && (index.h("ls-toolbox-field", { key: '955ecda601ed5ecdcdb6e9e51a9e20d48396efbc', elementType: "admin", formElementType: "auto sign", label: i18n.dvI18n.t('toolbox.autosign'), defaultHeight: fieldDefaults.FIELD_DEFAULTS['auto sign'].defaultHeight, defaultWidth: fieldDefaults.FIELD_DEFAULTS['auto sign'].defaultWidth, validation: 3000, icon: "auto-sign-icon", tooltip: i18n.dvI18n.t('toolbox.autosigntooltip'), signer: this.recipient.signerIndex })), this.showTool('text') && (index.h("ls-toolbox-field", { key: 'ce50d66114c181ee99dfdecfb7277d4f7709064f', elementType: "text", formElementType: "text", label: i18n.dvI18n.t('toolbox.text'), defaultHeight: fieldDefaults.FIELD_DEFAULTS['text'].defaultHeight, defaultWidth: fieldDefaults.FIELD_DEFAULTS['text'].defaultWidth, validation: 0, icon: "text-icon", tooltip: i18n.dvI18n.t('toolbox.texttooltip'), signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('signing date') && (index.h("ls-toolbox-field", { key: 'bef5cccafb176bfd5a5cf0b67b43773777e5c681', elementType: "text", formElementType: "signing date", label: i18n.dvI18n.t('toolbox.signingdate'), defaultHeight: fieldDefaults.FIELD_DEFAULTS['signing date'].defaultHeight, defaultWidth: fieldDefaults.FIELD_DEFAULTS['signing date'].defaultWidth, validation: 32, icon: "auto-date-icon", tooltip: i18n.dvI18n.t('toolbox.signingdatetooltip'), signer: this.recipient.signerIndex })), this.showTool('date') && (index.h("ls-toolbox-field", { key: '3f0750e1833d7ec4586ce999b02499968f6f9aa1', elementType: "text", formElementType: "date", label: i18n.dvI18n.t('toolbox.date'), defaultHeight: fieldDefaults.FIELD_DEFAULTS['date'].defaultHeight, defaultWidth: fieldDefaults.FIELD_DEFAULTS['date'].defaultWidth, validation: 4, icon: "calender-icon", tooltip: i18n.dvI18n.t('toolbox.datetooltip'), signer: this.recipient.signerIndex })), this.showTool('email') && (index.h("ls-toolbox-field", { key: '2f261aa2e679eb68cba57d00e2d83c36d33dddc6', elementType: "text", formElementType: "email", label: i18n.dvI18n.t('toolbox.email'), defaultHeight: fieldDefaults.FIELD_DEFAULTS['email'].defaultHeight, defaultWidth: fieldDefaults.FIELD_DEFAULTS['email'].defaultWidth, validation: 1, icon: "at-symbol-icon", tooltip: i18n.dvI18n.t('toolbox.emailtooltip'), signer: this.recipient.signerIndex })), this.showTool('initials') && (index.h("ls-toolbox-field", { key: '1ffe2cbf293619bf1d7cc08a1c4ff92809757c1e', elementType: "initials", formElementType: "initials", label: i18n.dvI18n.t('toolbox.initials'), defaultHeight: fieldDefaults.FIELD_DEFAULTS['initials'].defaultHeight, defaultWidth: fieldDefaults.FIELD_DEFAULTS['initials'].defaultWidth, validation: 2000, icon: "initials-icon", tooltip: i18n.dvI18n.t('toolbox.initialstooltip'), signer: this.recipient.signerIndex })), this.showTool('number') && (index.h("ls-toolbox-field", { key: 'a5f72ad406b0ebabe02be1c2d34298f975a63704', elementType: "text", formElementType: "number", label: i18n.dvI18n.t('toolbox.number'), defaultHeight: fieldDefaults.FIELD_DEFAULTS['number'].defaultHeight, defaultWidth: fieldDefaults.FIELD_DEFAULTS['number'].defaultWidth, validation: 50, icon: "hashtag-icon", tooltip: i18n.dvI18n.t('toolbox.numbertooltip'), signer: this.recipient.signerIndex })), this.showTool('dropdown') && (index.h("ls-toolbox-field", { key: '52ab8d8ee9bb6503c5e7a7d44550e655860d15ff', elementType: "text", formElementType: "dropdown", label: i18n.dvI18n.t('toolbox.dropdown'), defaultHeight: fieldDefaults.FIELD_DEFAULTS['dropdown'].defaultHeight, defaultWidth: fieldDefaults.FIELD_DEFAULTS['dropdown'].defaultWidth, validation: 20, icon: "dropdown-icon", tooltip: i18n.dvI18n.t('toolbox.dropdowntooltip'), signer: this.recipient.signerIndex, redDot: dropdownsMissingOptions.length > 0 })), this.showTool('checkbox') && (index.h("ls-toolbox-field", { key: '6d49f2e0fc216b3e9388714e162c64c6b616b71f', elementType: "text", formElementType: "checkbox", label: i18n.dvI18n.t('toolbox.checkbox'), defaultHeight: fieldDefaults.FIELD_DEFAULTS['checkbox'].defaultHeight, defaultWidth: fieldDefaults.FIELD_DEFAULTS['checkbox'].defaultWidth, validation: 25, icon: "check-icon", tooltip: i18n.dvI18n.t('toolbox.checkboxtooltip'), signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('regex') && (index.h("ls-toolbox-field", { key: 'c3d8605e42bdf7b45018bb1f555e631211231d9b', elementType: "text", formElementType: "regex", label: i18n.dvI18n.t('toolbox.regex'), defaultHeight: fieldDefaults.FIELD_DEFAULTS['regex'].defaultHeight, defaultWidth: fieldDefaults.FIELD_DEFAULTS['regex'].defaultWidth, validation: 93, icon: "code-icon", tooltip: i18n.dvI18n.t('toolbox.regextooltip'), signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('image') && (index.h("ls-toolbox-field", { key: '0d6dd8e0c947cc478d6153dade2418e0e341bcf5', elementType: "text", formElementType: "image", label: i18n.dvI18n.t('toolbox.image'), defaultHeight: fieldDefaults.FIELD_DEFAULTS['image'].defaultHeight, defaultWidth: fieldDefaults.FIELD_DEFAULTS['image'].defaultWidth, validation: 90, icon: "photograph-icon", tooltip: i18n.dvI18n.t('toolbox.imagetooltip'), signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('file') && (index.h("ls-toolbox-field", { key: '0223678ff267f8595c2c0a8653d759666135568a', elementType: "text", formElementType: "file", label: i18n.dvI18n.t('toolbox.file'), defaultHeight: fieldDefaults.FIELD_DEFAULTS['file'].defaultHeight, defaultWidth: fieldDefaults.FIELD_DEFAULTS['file'].defaultWidth, validation: 74, icon: "upload-icon", tooltip: i18n.dvI18n.t('toolbox.filetooltip'), signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('drawn') && (index.h("ls-toolbox-field", { key: '9feee72008c599f0d4737e04bb237f5f303b4c95', elementType: "text", formElementType: "drawn", label: i18n.dvI18n.t('toolbox.drawn'), defaultHeight: fieldDefaults.FIELD_DEFAULTS['drawn'].defaultHeight, defaultWidth: fieldDefaults.FIELD_DEFAULTS['drawn'].defaultWidth, validation: 90, icon: "pencil-icon", tooltip: i18n.dvI18n.t('toolbox.drawntooltip'), signer: this.recipient.signerIndex }))))), index.h("slot", { key: '3845c8a98da44674f9427b31fd042e35400545b8' }), index.h("ls-tooltip", { key: '433e9d5c8052b1d1a5ff3abf406157271f64bd1d', tooltipId: "ls-dv-tooltip" })));
+    }
+    static get watchers() { return {
+        "activeRecipient": ["handleExpandCollapse"]
+    }; }
+};
+LsRecipientCard.style = lsRecipientCardCss();
+
+const lsRecipientManagerCss = () => `:host{display:block}*{margin:0}.ls-dv-editor-infobox{padding:0.25rem}.ls-dv-toolbox-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;margin-bottom:0.375rem}.ls-dv-toolbox-section-description{color:var(--gray-80, #6f7176);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;margin-bottom:0.375rem}`;
+
+const LsRecipientManager = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '6ce7f9f730062923ed200956aef0a2333358702b' }, index.h("div", { key: '47977192bff6c16e37d69147f505d5e096e101d6', class: 'ls-dv-editor-infobox' }, index.h("h2", { key: 'f4934dd2d4805e3e6dde0eb09cb5cd276c7252d3', class: "ls-dv-toolbox-section-title" }, i18n.dvI18n.t('recipients.title')), index.h("p", { key: '4d9c0cf9fad882541ae4d9099dfb91cb3ddbbfd9', class: "ls-dv-toolbox-section-description" }, i18n.dvI18n.t('recipients.description'))), index.h("slot", { key: 'd9cd07d2a29fb009fd157acc7a95c16ff67baf6c' })));
+    }
+};
+LsRecipientManager.style = lsRecipientManagerCss();
+
+const lsValidationManagerCss = () => `:host{display:block}*{box-sizing:border-box;margin:0}.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-validation-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;}.ls-dv-valid-label{display:flex;padding:0.125rem 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:1rem;font-size:0.75rem;font-style:normal;font-weight:500;line-height:1.25rem;width:fit-content}.ls-dv-valid{background-color:var(--green-30, #9df5d4);color:var(--green-100, #125241)}.ls-dv-invalid{background:var(--yellow-20, #fff3c2);color:var(--yellow-90, #8a3f0e)}.ls-dv-field-counter{display:flex;padding:0.125rem;justify-content:center;align-items:center;border-radius:1rem;font-size:0.625rem;line-height:0.75rem;font-style:normal;font-weight:500;color:var(--yellow-20, #fff3c2);background:#e17100;min-width:1rem}.ls-dv-field-dropdown{position:absolute;top:2rem;right:0;background:white;display:flex;flex-direction:column;gap:0.75rem;width:20rem;padding:1rem;border-radius:1rem;border:1px solid #e5e7eb;background:#fff;box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);max-height:20rem;overflow-y:auto;flex-direction:column;align-items:flex-start;z-index:1000}.ls-dv-required-field{position:relative;display:flex;width:100%;justify-content:space-between;align-items:center;gap:0.5rem;border-radius:0.625rem;padding:0.5rem 0.5rem 0.5rem 1rem;background:var(--field-background);color:var(--field-text-color);border:1px solid var(--field-border-color);transition:all 0.1s ease-in-out}.ls-dv-required-field:hover{background:var(--field-background-hover);color:var(--field-text-color-hover);border:1px solid var(--field-border-color-hover);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)}.ls-dv-required-field-items-left{display:flex;gap:0.5rem;align-items:center;width:100%}.ls-dv-required-field-items-left p{font-size:0.875rem;font-style:normal;font-weight:500;line-height:0.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ls-dv-dot{height:0.5rem;width:0.5rem;border-radius:50%}.ls-dv-role-label{display:flex;padding:0.125rem 0.1875rem;justify-content:center;align-items:center;border-radius:0.25rem;font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;text-transform:capitalize}.ls-dv-dropdown-header h2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;margin-bottom:0.125rem}.ls-dv-dropdown-header p{color:var(--gray-80, #6f7176);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}`;
+
+const LsValidationManager = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.selectFields = index.createEvent(this, "selectFields", 7);
+    }
+    /**
+     * The template information (as JSON).
+     * {LSApiTemplate}
+     */
+    validationErrors;
+    selectFields;
+    render() {
+        return (index.h(index.Host, { key: '32ab9876adf798a57088daa7a3da6ce8ed2400a3' }, index.h("div", { key: '427e01b54239e3c618fcdc9f89d6855d65995871' }, index.h("div", { key: 'f5365722377c112fc6f2eb45d9a2ad32a3288476' }, index.h("div", { key: '77effee6fa7304392e5e262a0cde588c6296822d', class: 'ls-dv-validation-section-title' }, i18n.dvI18n.t('common.actionrequired')), index.h("p", { key: '198bb6953b73bc07bceacee9a9d713a6373b64d1', class: "ls-dv-toolbox-section-description" }, i18n.dvI18n.t('validation.description'))), this.validationErrors && this.validationErrors.map((field, idx) => {
+            const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
+            const pallette = defaultPalette.defaultRolePalette[signerIndex || field?.element?.signer || 0];
+            return (index.h("div", { key: idx, class: 'ls-dv-required-field', style: {
+                    '--field-background': pallette.s10,
+                    '--field-border-color': pallette.s10,
+                    '--field-background-hover': pallette.s20,
+                    '--field-text-color': pallette.s70,
+                    '--field-text-color-hover': pallette.s80,
+                    '--field-border-color-hover': pallette.s60,
+                    cursor: field?.element ? 'pointer' : 'default',
+                }, onClick: () => {
+                    if (field?.element) {
+                        this.selectFields.emit([field.element]);
+                    }
+                } }, index.h("div", { class: 'ls-dv-required-field-items-left' }, index.h("div", { class: 'ls-dv-dot', style: { background: pallette.s60 } }), field?.role && (index.h("div", { class: 'ls-dv-required-field-items-left' }, index.h("p", { style: { color: pallette.s80 } }, field.role?.name || `Signer ${field?.role?.signerIndex + 1}`), index.h("div", { class: 'ls-dv-role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.role?.roleType ? i18n.dvI18n.t(`participants.${field.role.roleType.toLowerCase()}`) : `Signer ${field.role?.signerIndex + 1}`))), field?.element && (index.h(index.h.Fragment, null, index.h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: i18n.dvI18n.t('toolbox.signature'), defaultHeight: fieldDefaults.FIELD_DEFAULTS['signature'].defaultHeight, defaultWidth: fieldDefaults.FIELD_DEFAULTS['signature'].defaultWidth, validation: 0, icon: "signature-icon", tooltip: i18n.dvI18n.t('toolbox.signaturetooltip'), signer: field.element.signer }), index.h("p", { style: { color: pallette.s80 } }, field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`), index.h("div", { class: 'ls-dv-role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.description))))));
+        })), index.h("slot", { key: 'b76c2775368b4af043b994580518fdba2a205c8a' })));
+    }
+};
+LsValidationManager.style = lsValidationManagerCss();
+
+const lsValidationTagCss = () => `:host{position:relative}*{box-sizing:border-box;margin:0}.ls-dv-valid-label{display:flex;padding:0.125rem 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:1rem;font-size:0.75rem;font-style:normal;font-weight:500;line-height:1.25rem;width:fit-content}.ls-dv-valid-label-wrapper{display:flex;padding:0.25rem;border-radius:0.5rem;border:1px solid var(--gray-20, #edeff2);justify-content:center;align-items:center;border-radius:0.825rem;font-size:0.75rem;font-style:normal;font-weight:500;line-height:1.25rem;width:fit-content;gap:0.25rem}.ls-dv-valid-label-wrapper:hover{background:var(--gray-10, #f7f8fa);border:1px solid var(--gray-30, #e0e2e5)}.ls-dv-valid-label-icon-only{display:flex;padding:0.25rem;justify-content:center;align-items:center;border-radius:0.625rem}.ls-dv-valid{background-color:var(--green-30, #9df5d4);color:var(--green-100, #125241)}.ls-dv-valid.ls-dv-compose{border:1px solid var(--green-50, #57e5b1)}.ls-dv-valid.ls-dv-compose:hover{box-shadow:none}.ls-dv-invalid.ls-dv-default{background:var(--yellow-20, #fff3c2);color:var(--yellow-90, #8a3f0e)}.ls-dv-invalid.ls-dv-compose{border:1px solid var(--red-40, #ffa19e);background:var(--red-10, #fff0f0);color:var(--red-80, #c1140e)}.ls-dv-field-counter{display:flex;padding:0.125rem;justify-content:center;align-items:center;border-radius:1rem;font-size:0.625rem;line-height:0.75rem;font-style:normal;font-weight:500;color:var(--yellow-20, #fff3c2);background:#e17100;min-width:1rem}.ls-field-counter-floating{position:absolute;top:-0.125rem;right:-0.125rem}.ls-dv-field-counter.ls-dv-compose{color:var(--red-10, #fff0f0);background:var(--red-60, #f64a44)}.ls-dv-field-dropdown{position:absolute;top:2rem;right:0;background:white;display:flex;flex-direction:column;gap:0.75rem;width:20rem;padding:1rem;border-radius:1rem;border:1px solid #e5e7eb;background:#fff;box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);max-height:20rem;overflow-y:auto;flex-direction:column;align-items:flex-start;z-index:1000}.ls-dv-field-dropdown.ls-dv-field-dropdown-success{background:linear-gradient(var(--green-10, #effff9) 0%, rgb(255, 255, 255) 100%);width:fit-content;padding:2rem;align-items:center;justify-content:center}.ls-dv-field-dropdown.ls-dv-field-dropdown-success *{text-align:center;white-space:nowrap}.ls-dv-dropdown-success-icon-outer{display:flex;justify-content:center;align-items:center;border-radius:9999px;background:var(--green-20, #c5fde8);padding:0.5rem}.ls-dv-dropdown-success-icon-inner{display:flex;justify-content:center;align-items:center;border-radius:9999px;background:var(--green-40, #72f0c2);padding:0.75rem;color:var(--green-100, #125241)}.ls-dv-field-dropdown.ls-dv-compose{width:14rem;padding:0.75rem;gap:0.5rem}.ls-dv-field-dropdown.ls-dv-compose>*{width:100%}.ls-dv-validation-section{width:100%;display:flex;flex-direction:column;gap:0.5rem}.ls-dv-required-field{position:relative;display:flex;width:100%;justify-content:space-between;align-items:center;gap:0.5rem;border-radius:0.625rem;padding:0.5rem 0.5rem 0.5rem 1rem;background:var(--field-background);color:var(--field-text-color);border:1px solid var(--field-border-color);transition:all 0.1s ease-in-out;cursor:pointer}.ls-dv-required-field:hover{background:var(--field-background-hover);color:var(--field-text-color-hover);border:1px solid var(--field-border-color-hover);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)}.ls-dv-required-field-items-left{display:flex;gap:0.5rem;align-items:center;width:100%}.ls-dv-required-field-items-left p{font-size:0.875rem;font-style:normal;font-weight:500;line-height:0.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ls-dv-dot{height:0.5rem;width:0.5rem;border-radius:50%}.ls-dv-role-label{display:flex;padding:0.125rem 0.1875rem;justify-content:center;align-items:center;border-radius:0.25rem;font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;text-transform:capitalize}.ls-dv-dropdown-header h2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;margin-bottom:0.125rem}.ls-dv-dropdown-header p{color:var(--gray-80, #6f7176);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}.ls-dv-validation-tag-container{padding:0.75rem;display:flex;flex-direction:column;gap:0.5rem}.ls-dv-validation-tag-header{padding-bottom:0.5rem;border-bottom:1px solid #edeff2}.ls-dv-validation-tag-title{font-family:"IBM Plex Sans Medium", "IBM Plex Sans", sans-serif;font-size:0.875rem;color:#45484d;line-height:1.5rem}.ls-dv-validation-tag-row{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;border-radius:0.625rem;cursor:pointer;transition:background-color 0.2s}.ls-dv-validation-tag-row:hover{background-color:var(--gray-10, #f7f8fa)}.ls-dv-validation-tag-bar{width:0.25rem;height:2rem;border-radius:9999px;flex-shrink:0}.ls-dv-validation-tag-details{flex:1 1 0%;min-width:0}.ls-dv-validation-tag-name{font-family:"IBM Plex Sans Medium", "IBM Plex Sans", sans-serif;font-size:0.875rem;color:#45484d;line-height:1.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ls-dv-validation-tag-email{font-family:"IBM Plex Sans Light", "IBM Plex Sans", sans-serif;font-size:0.75rem;color:#5e6066;line-height:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;
+
+const LsValidationTag = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.changeSigner = index.createEvent(this, "changeSigner", 7);
+        this.selectFieldForPlacement = index.createEvent(this, "selectFieldForPlacement", 7);
+        this.selectFields = index.createEvent(this, "selectFields", 7);
+    }
+    status = 'Invalid';
+    validationErrors = [];
+    isExpanded = false;
+    type = 'default';
+    showDropDown = true;
+    changeSigner;
+    selectFieldForPlacement;
+    selectFields;
+    handleClickOutside = (event) => {
+        const path = event.composedPath();
+        if (path.includes(this.el))
+            return;
+        if (this.isExpanded) {
+            this.isExpanded = false;
+        }
+    };
+    el;
+    componentDidLoad() {
+        this.el = this.host || this.el || this.component;
+        document.addEventListener('mousedown', this.handleClickOutside);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.handleClickOutside);
+    }
+    render() {
+        return (index.h(index.Host, { key: '0a288719fe0c4633f25add33194bb00600c3a184', ref: el => (this.el = el) }, this.type === 'compose' ? (index.h("div", { class: `ls-dv-valid-label ls-dv-compose ${this.validationErrors.length === 0 ? 'ls-dv-valid' : 'ls-dv-invalid'}`, onClick: this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length > 0 && index.h("div", { class: "ls-dv-field-counter ls-dv-compose" }, this.validationErrors.length), this.validationErrors.length === 0 ? i18n.dvI18n.t('common.ready') : i18n.dvI18n.t('common.required'), this.validationErrors.length > 0 && index.h("ls-icon", { name: "cursor-click-icon", solid: true, size: 16, customStyle: { color: 'var(--red-70, #DC2721);' } }), this.validationErrors.length === 0 && index.h("ls-icon", { name: "check-icon", solid: true, size: 16, customStyle: { marginRight: '-0.125rem' } }))) : (index.h("div", { class: `ls-dv-valid-label-wrapper`, onClick: () => (this.isExpanded = !this.isExpanded) }, index.h("div", { class: `ls-dv-valid-label-icon-only ls-dv-default ${this.validationErrors.length === 0 ? 'ls-dv-valid' : 'ls-dv-invalid'}` }, index.h("ls-icon", { name: this.validationErrors.length > 0 ? 'clipboard-list-icon' : 'check-icon', size: 20 })), this.validationErrors.length > 0 && index.h("div", { class: "ls-dv-field-counter ls-field-counter-floating ls-dv-default" }, this.validationErrors.length), this.validationErrors.length > 0 && this.showDropDown && (index.h("ls-icon", { name: this.isExpanded ? 'chevron-up-icon' : 'chevron-down-icon', customStyle: { color: 'var(--gray-70, #4B5563)', marginRight: '0.25rem' } })))), this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type !== 'compose' && (index.h("div", { key: '2da705d7b851a26d66c6877602d5488c8bf54ca6', class: 'ls-dv-field-dropdown', style: { top: '3.5rem' } }, (() => {
+            const signatureErrors = this.validationErrors.filter(f => f?.role && !f?.element);
+            const elementErrors = this.validationErrors.filter(f => f?.element);
+            return [
+                signatureErrors.length > 0 && (index.h("div", { class: "ls-dv-validation-section" }, index.h("div", { class: 'ls-dv-dropdown-header' }, index.h("h2", null, i18n.dvI18n.t('common.fieldsrequired')), index.h("p", null, signatureErrors.length, " ", signatureErrors.length === 1 ? i18n.dvI18n.t('validation.recipientneedsignature') : i18n.dvI18n.t('validation.recipientsneedsignatures'))), signatureErrors.map((field, idx) => {
+                    const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
+                    const pallette = defaultPalette.defaultRolePalette[signerIndex || 0];
+                    return (index.h("div", { key: `sig-${idx}`, class: 'ls-dv-required-field', style: {
+                            '--field-background': pallette.s10,
+                            '--field-border-color': pallette.s10,
+                            '--field-background-hover': pallette.s20,
+                            '--field-text-color': pallette.s70,
+                            '--field-text-color-hover': pallette.s80,
+                            '--field-border-color-hover': pallette.s60,
+                        }, onMouseDown: e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            const fieldType = field?.element?.formElementType || 'signature';
+                            this.selectFieldForPlacement.emit({
+                                signerIndex: field.role.signerIndex,
+                                fieldType: fieldType,
+                            });
+                            this.isExpanded = false;
+                        } }, index.h("div", { class: 'ls-dv-required-field-items-left' }, index.h("div", { class: 'ls-dv-dot', style: { background: pallette.s60 } }), index.h("div", { class: 'ls-dv-required-field-items-left' }, index.h("p", { style: { color: pallette.s80 } }, field.role?.name || `Signer ${field?.role?.signerIndex + 1}`), index.h("ls-label", { text: field.role?.roleType ? i18n.dvI18n.t(`participants.${field.role.roleType.toLowerCase()}`) : `Signer ${field.role?.signerIndex + 1}`, colour: pallette.description, type: "low", size: "sm" })))));
+                }))),
+                elementErrors.length > 0 && (index.h("div", { class: "ls-dv-validation-section" }, index.h("div", { class: 'ls-dv-dropdown-header' }, index.h("h2", null, i18n.dvI18n.t('validation.optionsrequired')), index.h("p", null, elementErrors.length, " ", elementErrors.length === 1 ? i18n.dvI18n.t('validation.fieldneedsoptions') : i18n.dvI18n.t('validation.fieldsneedoptions'))), elementErrors.map((field, idx) => {
+                    const signerIndex = field?.element?.signer ? field?.element?.signer % 100 : 0;
+                    const pallette = defaultPalette.defaultRolePalette[signerIndex];
+                    return (index.h("div", { key: `el-${idx}`, class: 'ls-dv-required-field', style: {
+                            '--field-background': pallette.s10,
+                            '--field-border-color': pallette.s10,
+                            '--field-background-hover': pallette.s20,
+                            '--field-text-color': pallette.s70,
+                            '--field-text-color-hover': pallette.s80,
+                            '--field-border-color-hover': pallette.s60,
+                        }, onMouseDown: e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            this.selectFields.emit([field.element]);
+                            this.isExpanded = false;
+                        } }, index.h("div", { class: 'ls-dv-required-field-items-left' }, index.h("div", { class: 'ls-dv-dot', style: { background: pallette.s60 } }), index.h("div", { class: 'ls-dv-required-field-items-left' }, index.h("p", { style: { color: pallette.s80 } }, field.title), index.h("ls-label", { text: field.description, colour: pallette.description, type: "low", size: "sm" })))));
+                }))),
+            ];
+        })())), this.isExpanded && this.validationErrors.length === 0 && this.type !== 'compose' && this.showDropDown && (index.h("div", { key: 'bec5c70a45c0a8e48d52b23d6468376347229f3a', class: 'ls-dv-field-dropdown ls-dv-field-dropdown-success', style: { top: '3.5rem' } }, index.h("div", { key: 'a681ac7256b1b19a00e9fb3b2b595235c104a610', class: "ls-dv-dropdown-success-icon-outer" }, index.h("div", { key: '059b00d57cb5f42172b3a942001e889e66af6627', class: "ls-dv-dropdown-success-icon-inner" }, index.h("ls-icon", { key: '4dc815096c6dfb2200cc8700f9ea383953952a01', name: "check-icon", solid: true, size: 28 }))), index.h("div", { key: '5e644880c37ef41aa1f00263603861084945bd2b', class: 'ls-dv-dropdown-header' }, index.h("h2", { key: '4d9a95e4310b92d4c69ba560bc420943e5db926b' }, i18n.dvI18n.t('common.templatereadytosend')), index.h("p", { key: 'c5f2d24f36bcc7d934798ef2c612c231e8e90b33' }, i18n.dvI18n.t('common.allfieldsplaced'))))), this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type === 'compose' && (index.h("div", { key: '3852a720b5d8469d9e24da056798fca55f36715b', class: 'ls-dv-field-dropdown ls-dv-compose' }, (() => {
+            const signatureErrors = this.validationErrors.filter(f => f?.role && !f?.element);
+            const elementErrors = this.validationErrors.filter(f => f?.element);
+            return [
+                signatureErrors.length > 0 && (index.h("div", { class: "ls-dv-validation-section" }, index.h("div", { class: "ls-dv-validation-tag-header" }, index.h("p", { class: "ls-dv-validation-tag-title" }, i18n.dvI18n.t('common.fieldsrequired'))), signatureErrors.map((field, idx) => {
+                    const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
+                    const pallette = defaultPalette.defaultRolePalette[signerIndex || 0];
+                    return (index.h("div", { class: "ls-dv-validation-tag-row", key: `sig-${idx}`, onClick: () => {
+                            this.selectFieldForPlacement.emit({
+                                signerIndex: field.role.signerIndex,
+                                fieldType: 'signature',
+                            });
+                            this.isExpanded = false;
+                        } }, index.h("div", { class: "ls-dv-validation-tag-bar", style: { background: pallette.s60 } }), index.h("div", { class: "ls-dv-validation-tag-details" }, index.h("p", { class: "ls-dv-validation-tag-name" }, field?.role?.previousRecipientDecides ? `Recipient ${field?.role?.signerIndex + 1}` : `${field?.role?.firstName} ${field?.role?.lastName}`), index.h("p", { class: "ls-dv-validation-tag-email" }, field?.role?.previousRecipientDecides ? i18n.dvI18n.t('common.detailstobedecided') : field?.role?.email))));
+                }))),
+                elementErrors.length > 0 && (index.h("div", { class: "ls-dv-validation-section" }, index.h("div", { class: "ls-dv-validation-tag-header" }, index.h("p", { class: "ls-dv-validation-tag-title" }, i18n.dvI18n.t('validation.optionsrequired'))), elementErrors.map((field, idx) => {
+                    const signerIndex = field?.element?.signer ? field?.element?.signer % 100 : 0;
+                    const pallette = defaultPalette.defaultRolePalette[signerIndex];
+                    return (index.h("div", { class: "ls-dv-validation-tag-row", key: `el-${idx}`, onClick: () => {
+                            this.selectFields.emit([field.element]);
+                            this.isExpanded = false;
+                        } }, index.h("div", { class: "ls-dv-validation-tag-bar", style: { background: pallette.s60 } }), index.h("div", { class: "ls-dv-validation-tag-details" }, index.h("p", { class: "ls-dv-validation-tag-name" }, field.title), index.h("p", { class: "ls-dv-validation-tag-email" }, field.description))));
+                }))),
+            ];
+        })()))));
+    }
+};
+LsValidationTag.style = lsValidationTagCss();
+
+exports.ls_add_new_button = LsAddNewButton;
+exports.ls_document_options = LsDocumentOptions;
+exports.ls_feature_column = LsFeatureColoumn;
+exports.ls_field_properties = LsFieldProperties;
+exports.ls_field_properties_autosign = LsFieldPropertiesAutosign;
+exports.ls_field_properties_date = LsFieldPropertiesDate;
+exports.ls_field_properties_email = LsFieldPropertiesEmail;
+exports.ls_field_properties_file = LsFieldPropertiesFile;
+exports.ls_field_properties_general = LsFieldPropertiesGeneral;
+exports.ls_field_properties_image = LsFieldPropertiesImage;
+exports.ls_field_properties_multiple = LsFieldPropertiesMultiple;
+exports.ls_field_properties_number = LsFieldPropertiesNumber;
+exports.ls_field_properties_signature = LsFieldPropertiesSignature;
+exports.ls_field_properties_text = LsFieldPropertiesText;
+exports.ls_participant_card = LsParticipantCard;
+exports.ls_participant_manager = LsParticipantManager;
+exports.ls_recipient_card = LsRecipientCard;
+exports.ls_recipient_manager = LsRecipientManager;
+exports.ls_validation_manager = LsValidationManager;
+exports.ls_validation_tag = LsValidationTag;
+//# sourceMappingURL=ls-add-new-button.ls-document-options.ls-feature-column.ls-field-properties.ls-field-properties-autosign.ls-field-properties-date.ls-field-properties-email.ls-field-properties-file.ls-field-properties-general.ls-field-properties-image.ls-field-properties-multiple.ls-field-properties-number.ls-field-properties-signature.ls-field-properties-text.ls-participant-card.ls-participant-manager.ls-recipient-card.ls-recipient-manager.ls-validation-manager.ls-validation-tag.entry.cjs.js.map