legalesign-document-viewer 0.10.2 → 0.10.4

package/dist/cjs/ls-field-alignment_3.cjs.entry.js

@@ -0,0 +1,315 @@
+'use strict';
+
+var index = require('./index-DFeU0FNc.js');
+var i18n = require('./i18n-B8sub13B.js');
+var editorUtils = require('./editorUtils-f8cxkqvC.js');
+var mouseHandlers = require('./mouseHandlers-D3r6xq7p.js');
+require('./fieldDefaults-BbJ3qf1E.js');
+require('./defaultPalette-Dt4FmPno.js');
+
+const lsFieldAlignmentCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.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-multi-button-group-row{display:flex;gap:0.5rem}.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-input-row{display:flex;gap:0.5rem}.ls-dv-input-row .ls-dv-input-wrapper input{width:9.313rem;max-width:9.313rem}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: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)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #c8c9cc)}.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:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){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:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #c8c9cc);box-shadow:none}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;width:100%}.ls-dv-button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6f7176)}.ls-dv-button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #c8c9cc)}.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 LsFieldAlignment = 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); }
+    dataItem;
+    readonly = false;
+    mutate;
+    update;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    alter(diff) {
+        console.log(diff);
+        const diffs = this.dataItem.map(c => {
+            return { action: 'update', data: { ...c, ...diff } };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    // Get the top-left-most control (anchor for all alignments)
+    getAnchorControl() {
+        return this.dataItem.reduce((topLeftMost, current) => {
+            // Prioritize top position first, then left if tops are equal
+            if (current.top < topLeftMost.top) {
+                return current;
+            }
+            else if (current.top === topLeftMost.top && current.left < topLeftMost.left) {
+                return current;
+            }
+            return topLeftMost;
+        }, this.dataItem[0]);
+    }
+    right() {
+        const anchor = this.getAnchorControl();
+        const alignTo = anchor.left + anchor.width;
+        const diffs = this.dataItem.map(c => {
+            const newLeft = alignTo - c.width;
+            return {
+                action: 'update',
+                data: {
+                    ...c,
+                    left: newLeft,
+                    ax: newLeft,
+                    bx: newLeft + c.width,
+                },
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    center() {
+        const anchor = this.getAnchorControl();
+        const alignTo = anchor.left + anchor.width / 2;
+        const diffs = this.dataItem.map(c => {
+            const newLeft = alignTo - c.width / 2;
+            return {
+                action: 'update',
+                data: {
+                    ...c,
+                    left: newLeft,
+                    ax: newLeft,
+                    bx: newLeft + c.width,
+                },
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    top() {
+        const anchor = this.getAnchorControl();
+        this.alter({ top: anchor.top });
+    }
+    left() {
+        const anchor = this.getAnchorControl();
+        this.alter({ left: anchor.left });
+    }
+    middle() {
+        const anchor = this.getAnchorControl();
+        const alignTo = anchor.top + anchor.height / 2;
+        const diffs = this.dataItem.map(c => {
+            const newTop = alignTo - c.height / 2;
+            return {
+                action: 'update',
+                data: {
+                    ...c,
+                    top: newTop,
+                    ay: newTop,
+                    by: newTop + c.height,
+                },
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    bottom() {
+        const anchor = this.getAnchorControl();
+        const alignTo = anchor.top + anchor.height;
+        const diffs = this.dataItem.map(c => {
+            const newTop = alignTo - c.height;
+            return {
+                action: 'update',
+                data: {
+                    ...c,
+                    top: newTop,
+                    ay: newTop,
+                    by: newTop + c.height,
+                },
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    componentDidLoad() {
+    }
+    render() {
+        return (index.h(index.Host, { key: '02ac835613930a103b3327bc8b44c693be7c3695' }, index.h("div", { key: 'c80492f5506b8ba1c0f810c3bee227bb1bf65f48', class: 'ls-dv-field-properties-section' }, index.h("div", { key: 'c05fe5b8cc6a0dbe35b18779726564ead67cbe22', class: 'ls-dv-field-properties-section-text' }, index.h("p", { key: '8e1ef32725a00be3b7d33512081d8b3b809a3bd0', class: 'ls-dv-field-properties-section-title' }, i18n.dvI18n.t('placement.alignment')), index.h("p", { key: '2ef6497e8dfe8f2ae77239427e53b8203434b825', class: 'ls-dv-field-properties-section-description' }, i18n.dvI18n.t('placement.alignmentdescription'))), index.h("div", { key: 'a7f190dbf99d1fc4b560c0e419c5b6b7d8037018', class: 'ls-dv-multi-button-group-row' }, index.h("div", { key: 'af92d6c29a55da64ff46fe49fc6dfd7b2023211d', class: 'ls-dv-button-group' }, index.h("button", { key: '9609aaf2d21515717145fb6b1993d51e564775b8', onClick: () => this.left(), "aria-label": i18n.dvI18n.t('alignment.alignleft'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.alignleft'), disabled: this.readonly }, index.h("ls-icon", { key: '9617202d5d3846d8d981a7c2b14f4a5fe06c5142', name: "field-alignment-left-icon" })), index.h("button", { key: '73694691f4ae5d40a6c31788160915e78c19d817', onClick: () => this.center(), "aria-label": i18n.dvI18n.t('alignment.aligncenter'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.aligncenter'), disabled: this.readonly }, index.h("ls-icon", { key: 'ed8c0aef6b3d61bf2496e9218a39e2a0a13f8830', name: "field-alignment-centre-icon" })), index.h("button", { key: '38196f4f24650c383c3d0aa1168d48b91572d2e8', onClick: () => {
+                this.right();
+            }, "aria-label": i18n.dvI18n.t('alignment.alignright'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.alignright'), disabled: this.readonly }, index.h("ls-icon", { key: '1a41ca820b0a31bb815221c001b38bd9a8ea4527', name: "field-alignment-right-icon" }))), index.h("div", { key: '46a48c47465425ae35daeb23587547ebfaf3ee62', class: 'ls-dv-button-group' }, index.h("button", { key: '5ee86692c5d311a3cd71868b61d81977a05dc16b', onClick: () => this.top(), "aria-label": i18n.dvI18n.t('alignment.aligntop'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.aligntop'), disabled: this.readonly }, index.h("ls-icon", { key: '3394b53ece7f773f7b821df8a1b30417d065f734', name: "field-alignment-top-icon" })), index.h("button", { key: '5c74d482ecdc9ae892540e4c2b86392d65413263', onClick: () => this.middle(), "aria-label": i18n.dvI18n.t('alignment.alignmiddle'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.alignmiddle'), disabled: this.readonly }, index.h("ls-icon", { key: '10400075e7e02e58042ecdfe16542531eaf0ed97', name: "field-alignment-middle-icon" })), index.h("button", { key: '73a7d430e28d1d466c4ae1a4cb6e522d98779066', onClick: () => this.bottom(), "aria-label": i18n.dvI18n.t('alignment.alignbottom'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.alignbottom'), disabled: this.readonly }, index.h("ls-icon", { key: '80febff05c3efa8fd24ee5c0b15032c1f86e946a', name: "field-alignment-bottom-icon" }))))), index.h("slot", { key: '96da2c8b313277db464db2c5dfe002ea292ad8ef' }), index.h("ls-tooltip", { key: 'de33d7977d4d68839c673bcbe9f3be547e4ac643', tooltipId: "ls-dv-tooltip" })));
+    }
+};
+LsFieldAlignment.style = lsFieldAlignmentCss();
+
+const lsFieldDistributeCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}.ls-dv-toolbar-numeric{width:2.813rem;max-height:1.125rem;margin:0px;padding:0px}*{margin:0;box-sizing:border-box}.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-multi-button-group-row{display:flex;gap:0.5rem}.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-input-row{display:flex;gap:0.5rem}.ls-dv-input-row .ls-dv-input-wrapper input{width:9.313rem;max-width:9.313rem}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:36px}.ls-dv-input-wrapper{position:relative;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)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #c8c9cc)}.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:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){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:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #c8c9cc);box-shadow:none}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;width:100%}.ls-dv-button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6f7176)}.ls-dv-button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #c8c9cc)}.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 LsFieldDistribute = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate", 7);
+    }
+    dataItem;
+    readonly = false;
+    mutate;
+    get component() { return index.getElement(this); }
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    alter(diff) {
+        console.log(diff);
+        const diffs = this.dataItem.map(c => {
+            return { action: 'update', data: { ...c, ...diff } };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    distributeHorizontal() {
+        if (!this.dataItem || this.dataItem.length < 3)
+            return;
+        var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space');
+        const sorted = this.dataItem.sort((a, b) => a.left - b.left);
+        var avgspace = 0;
+        const leftmost = sorted[0].left + sorted[0].width / 2;
+        const rightmost = sorted.reduce((acc, cur) => {
+            return cur.left + (cur.width / 2) > acc ? cur.left + (cur.width / 2) : acc;
+        }, leftmost);
+        // find total width between centre first and centre last
+        const totalWidth = rightmost - leftmost;
+        if (spacing.value !== '') {
+            avgspace = parseInt(spacing.value);
+        }
+        else {
+            avgspace = Math.floor(totalWidth / (sorted.length - 1));
+        }
+        const filtered = sorted.filter((c, index) => {
+            return mouseHandlers.outOfBounds({ ...c, left: (Math.floor(leftmost - (c.width / 2) + avgspace * index)) }) === false
+                && index !== 0
+                && index !== sorted.length - 1;
+        });
+        const diffs = filtered.map((c, index) => {
+            return {
+                action: 'update',
+                data: {
+                    ...c,
+                    left: Math.floor(leftmost - (c.width / 2) + (avgspace * (index + 1))),
+                },
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    gapVertical(spacing) {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return;
+        const sorted = this.dataItem.sort((a, b) => a.top - b.top);
+        var buffer = sorted[0].top;
+        const diffs = sorted.map(c => {
+            const newTop = buffer;
+            buffer = buffer + c.height + spacing;
+            const target = {
+                ...c,
+                top: newTop,
+            };
+            return {
+                action: 'update',
+                data: editorUtils.oob(target)
+                    ? {
+                        ...c,
+                        left: c.pageDimensions.height - c.height - 1,
+                    }
+                    : target,
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    gapHorizontal(spacing) {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return;
+        const sorted = this.dataItem.sort((a, b) => a.top - b.top);
+        var buffer = sorted[0].left;
+        const diffs = sorted.map(c => {
+            const newLeft = buffer;
+            buffer = buffer + c.width + spacing;
+            const target = {
+                ...c,
+                left: newLeft,
+            };
+            console.log(target, editorUtils.oob(target));
+            return {
+                action: 'update',
+                data: editorUtils.oob(target)
+                    ? {
+                        ...c,
+                        left: c.pageDimensions.width - c.width - 1,
+                    }
+                    : target,
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    distributeVertical() {
+        if (!this.dataItem || this.dataItem.length < 3)
+            return;
+        const sorted = this.dataItem.sort((a, b) => a.top - b.top);
+        const firstBottom = sorted[0].top + sorted[0].height;
+        const lastTop = sorted[sorted.length - 1].top;
+        const availableSpace = lastTop - firstBottom;
+        const middleFieldsHeight = sorted.slice(1, -1).reduce((sum, field) => sum + field.height, 0);
+        const numGaps = sorted.length - 1;
+        const gap = Math.max(0, (availableSpace - middleFieldsHeight) / numGaps);
+        let currentTop = sorted[0].top + sorted[0].height + gap;
+        const diffs = sorted.slice(1, -1).map((c) => {
+            const newTop = Math.floor(currentTop);
+            currentTop += c.height + gap;
+            return {
+                action: 'update',
+                data: {
+                    ...c,
+                    top: newTop,
+                },
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    componentDidLoad() {
+    }
+    render() {
+        return (index.h(index.Host, { key: '57be31baf13ebcc0f22a87fb357c1e909a2f2f92' }, index.h("div", { key: '913ccc6218e4b1f5a62209efce83071d4ff9fafc', class: 'ls-dv-field-properties-section' }, index.h("div", { key: '7f102602755314f06e1c3b47e14e84231a735eef', class: 'ls-dv-field-properties-section-text' }, index.h("p", { key: '187c445e9f1e48614584346318feb52e2fff8556', class: 'ls-dv-field-properties-section-title' }, i18n.dvI18n.t('placement.distribution')), index.h("p", { key: '6a6383b9df8541c41d862f68c9f6c78013a0b73c', class: 'ls-dv-field-properties-section-description' }, i18n.dvI18n.t('placement.distributiondescription'))), index.h("div", { key: 'a5d0e949746bae9ab910c80f2a6e8c9dce75dbd5', class: 'ls-dv-button-group' }, index.h("button", { key: 'a3726734b194b794bb977a4efd309f7143d9bb69', onClick: () => {
+                this.distributeVertical();
+            }, "aria-label": i18n.dvI18n.t('alignment.distributevertically'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.distributevertically'), disabled: this.readonly }, index.h("ls-icon", { key: '96c4ce2b7b5352a99ed26787c85f0505ae4fcc6b', name: "field-distribute-vertically-icon" })), index.h("button", { key: 'b9a96c6b3289ddd237179063e085c23bc6eb3663', onClick: () => {
+                this.distributeHorizontal();
+            }, "aria-label": i18n.dvI18n.t('alignment.distributehorizontally'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.distributehorizontally'), disabled: this.readonly }, index.h("ls-icon", { key: '27a9f65617e16a07d601de53e5570e2d9831960c', name: "field-distribute-horizontally-icon" })))), index.h("div", { key: '3cfec98f4de47bd4f7f106aabaea219b40482564', class: 'ls-dv-field-properties-section' }, index.h("div", { key: '31c5bd2ed10f7c7e5203d1cece96a9aecd6a59f0', class: 'ls-dv-field-properties-section-text' }, index.h("p", { key: '5fe76aabfdfae6f4c0251ed2d23a472ba6b9daee', class: 'ls-dv-field-properties-section-title' }, i18n.dvI18n.t('placement.gap')), index.h("p", { key: '87cc8c0961ede86283d413813e96d42ffb41765f', class: 'ls-dv-field-properties-section-description' }, i18n.dvI18n.t('placement.gapdescription'))), index.h("div", { key: 'dc033f1b292825bf64b06e3c0c8f09d3fa78830c', class: 'ls-dv-input-row' }, index.h("div", { key: 'cafaa3f295fb0c24f6d67cfd4ee8a743a9f73cb1', class: 'ls-dv-input-wrapper', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('placement.setverticalgap') }, index.h("ls-icon", { key: '889436667ef89ad9e9d0fca9a8e3666720036783', id: "selectLeadingIcon", name: "field-distribute-vertically-icon" }), index.h("input", { key: 'f753f53b100450b872581d2bbc7fd66b6062d479', type: "number", class: 'ls-dv-has-leading-icon', id: "ls-fix-vertical-space", onChange: e => {
+                this.gapVertical(parseInt(e.target.value));
+            }, min: 0, max: 9999, value: '', size: 4, disabled: this.readonly })), index.h("div", { key: '191371a18ff9ddb71e800220c50af942d83e4630', class: 'ls-dv-input-wrapper', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('placement.sethorizontalgap') }, index.h("ls-icon", { key: 'f860ecf1213034604e410a43febb7f95f675d387', id: "selectLeadingIcon", name: "field-distribute-horizontally-icon" }), index.h("input", { key: '56f64b5e2548de9772831d925b1f99f1038e8514', type: "number", class: 'ls-dv-has-leading-icon', id: "ls-fix-horizontal-space", onChange: e => {
+                this.gapHorizontal(parseInt(e.target.value));
+            }, min: 0, max: 9999, value: '', size: 4, disabled: this.readonly })))), index.h("ls-tooltip", { key: 'c75fba59ca3fb9e50a108f153ecd2353cfefb8fe', tooltipId: "ls-dv-tooltip" }), index.h("slot", { key: '987d6eb4a9990f7ce0a8ba7b9a1a8b489bd4c5a1' })));
+    }
+};
+LsFieldDistribute.style = lsFieldDistributeCss();
+
+const lsFieldSizeCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}.ls-dv-toolbar-numeric{width:2.813rem;max-height:1.25rem;margin:0px;padding:0px}*{margin:0;box-sizing:border-box}.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-multi-button-group-row{display:flex;gap:0.5rem}.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-input-row{display:flex;gap:0.5rem}.ls-dv-input-row .ls-dv-input-wrapper input{width:9.313rem;max-width:9.313rem}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:36px}.ls-dv-input-wrapper{position:relative;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)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #c8c9cc)}.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:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){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:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #c8c9cc);box-shadow:none}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;width:100%}.ls-dv-button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6f7176)}.ls-dv-button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #c8c9cc)}.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 LsFieldSize = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate", 7);
+    }
+    get component() { return index.getElement(this); }
+    dataItem;
+    readonly = false;
+    mutate;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    alter(diff) {
+        const diffs = this.dataItem.map(c => {
+            return { action: 'update', data: { ...c, ...diff } };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    componentDidLoad() {
+    }
+    render() {
+        return (index.h(index.Host, { key: '8a1a4f549779a7a5eaa06a29d23de90855a4aaab' }, index.h("div", { key: '5e2079915445e0b39fa1df7fa6fb8af4a3ecc6b0', class: 'ls-dv-field-properties-section' }, index.h("div", { key: 'e0c7e9b9b0dbaad52990f389c8604b8f5f65df6c', class: 'ls-dv-field-properties-section-text' }, index.h("p", { key: '924fb80665763289bbf9b36db43c01c4050ea1a0', class: 'ls-dv-field-properties-section-title' }, i18n.dvI18n.t('dimensions.scaleandresize')), index.h("p", { key: 'c4ccd876a787d30451816441c9cb6a9b5d2a6be9', class: 'ls-dv-field-properties-section-description' }, i18n.dvI18n.t('dimensions.scaleandresizedescription'))), index.h("div", { key: 'fc38926113269ae12bead44bb3117207d838d672', class: 'ls-dv-button-group' }, index.h("button", { key: '0d9bb21db38a51db86fb17e5bfdde52555a1ccc4', onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": i18n.dvI18n.t('alignment.matchsize'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.matchsize'), disabled: this.readonly }, index.h("ls-icon", { key: '573a3fcdda31e92b3870781c338d3774227631d7', name: "field-scale-icon" })), index.h("button", { key: 'd2391789e2b7fb186bfa2ad266074230a551f96d', "aria-label": i18n.dvI18n.t('alignment.matchwidth'), onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.matchwidth'), disabled: this.readonly }, index.h("ls-icon", { key: 'c6f330be93bccfea2dd4c3c989eabae0370a12b9', name: "field-match-width-icon" })), index.h("button", { key: '4b7c49de3522fc98ef4fa0f36e61865ff9f5a634', onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": i18n.dvI18n.t('alignment.matchheight'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.matchheight'), disabled: this.readonly }, index.h("ls-icon", { key: '8d77f6aa945f9cfedaef085509ecb5db8e34dd93', name: "field-match-height-icon" })))), index.h("slot", { key: '89ab04b6c45bc12a8841db3ac62f7744b0ac9543' }), index.h("ls-tooltip", { key: '8bd5545bdc127cbd974aea4ad8c52f8ddf1b2eb1', tooltipId: "ls-dv-tooltip" })));
+    }
+};
+LsFieldSize.style = lsFieldSizeCss();
+
+exports.ls_field_alignment = LsFieldAlignment;
+exports.ls_field_distribute = LsFieldDistribute;
+exports.ls_field_size = LsFieldSize;
+//# sourceMappingURL=ls-field-alignment.ls-field-distribute.ls-field-size.entry.cjs.js.map

package/dist/cjs/ls-field-format_2.cjs.entry.js

@@ -0,0 +1,218 @@
+'use strict';
+
+var index = require('./index-DFeU0FNc.js');
+var i18n = require('./i18n-B8sub13B.js');
+var defaultPalette = require('./defaultPalette-Dt4FmPno.js');
+
+const lsFieldFormatCss = () => `:host{display:flex;flex-direction:row}.ls-dv-field-format-bar{display:flex;flex-direction:row;gap:0.5rem}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=number]{width:max-content;max-width:3rem}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 button.ls-dv-active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6);cursor:default;pointer-events:none}.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 LsFieldFormat = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate", 7);
+    }
+    dataItem;
+    mutate;
+    get component() { return index.getElement(this); }
+    handleKeyDown = (event) => {
+        event.stopPropagation();
+    };
+    handleKeyUp = (event) => {
+        event.stopPropagation();
+    };
+    // Send selection changes to bars and panels if in use.
+    selectFieldsHandler() {
+        if (this.dataItem.length > 0) {
+            var selFont = this.component.shadowRoot.getElementById('ls-toolbar-font-select');
+            if (selFont)
+                selFont.value = this.allElementsSame()?.fontName;
+            var selFontSize = this.component.shadowRoot.getElementById('ls-toolbar-font-size');
+            if (selFontSize)
+                selFontSize.value = this.allElementsSame()?.fontSize.toString();
+        }
+    }
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    alter(diff) {
+        console.log(diff);
+        const diffs = this.dataItem.map(c => {
+            return { action: 'update', data: { ...c, ...diff } };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    componentDidLoad() {
+    }
+    allElementsSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return;
+        const firstFontName = this.dataItem[0].fontName;
+        const allFontsSame = this.dataItem.every(item => item.fontName === firstFontName);
+        const firstFontSize = this.dataItem[0].fontSize;
+        const allFontSizesSame = this.dataItem.every(item => item.fontSize === firstFontSize);
+        return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed' };
+    };
+    render() {
+        return (index.h(index.Host, { key: 'a30cfc986e0ffb27427cceb442475cf4555e4413', onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, this.dataItem && this.dataItem.length > 1 && (index.h("div", { key: '52fac60e65e1d4cc6fc7b1c880ab18bdc9b15209', class: 'ls-dv-field-format-bar' }, index.h("div", { key: 'a2a8c49a08a5fb178f1b1e33d04bbeaf7685c6b1', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.fontfamily') }, index.h("ls-icon", { key: '3ca17f5993952362605535e56166ecde5bde0478', id: "selectLeadingIcon", name: "typeface-icon" }), index.h("select", { key: '1b043cc3013f7f6e80dddccd23dc54aae11688d0', id: "ls-toolbar-font-select", onChange: input => {
+                this.alter({ fontName: input.target.value });
+            }, class: 'ls-dv-has-leading-icon' }, index.h("option", { key: '67cf7d2fe34fc980065c73ea8f31fa53737bce82', disabled: true, selected: this.allElementsSame()?.fontName === 'mixed', value: 'mixed' }, "Mixed"), index.h("option", { key: '6874d63750b95da6078128b758060a5a5b7027b0', value: "arial" }, "Arial"), index.h("option", { key: 'bd6ad75adf8b0b3c627eebead981bb70e6552576', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: '701df08cbb9304ba133a5a22859fcf2969ed346b', value: "courier" }, "Courier"), index.h("option", { key: '2e6543181136d996999414f7417c0975c6f3f241', value: "helvetica" }, "Helvetica"), index.h("option", { key: '6899f4e88c3e961ecf44825d88f597338c8299a6', value: "verdana" }, "Verdana")), index.h("ls-icon", { key: '2c23e090ada507f25a8cfd28f008490928fb2d6d', id: "selectorIcon", name: "selector-icon" })), index.h("div", { key: '7c78dbd2488e7d1d4160023fbf0e7841a098e4b1', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.fontsize') }, index.h("ls-icon", { key: '2950ad5c3a4fae0b8ef561207506fc8a08fa63b6', id: "selectLeadingIcon", name: "text-size-icon" }), index.h("input", { key: '366854e50d871a9f28e8794dd055e18f628b6a1d', id: "ls-toolbar-font-size", type: 'number', min: "4", value: this.allElementsSame()?.fontSize, onChange: input => {
+                if (input.target.value === '')
+                    return;
+                this.alter({ fontSize: input.target.value });
+            }, class: 'ls-dv-has-leading-icon' })), index.h("div", { key: '27ee621bbc68e397ef17f8b47aaa58af14ff35c4', class: 'ls-dv-button-group' }, index.h("button", { key: '32115e771209bd271e8a84e67be8bc737569235e', onClick: () => {
+                this.alter({ align: 'left' });
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextleft') }, index.h("ls-icon", { key: 'edb58e9b830825d44965b49c7afe2a8ac53f0294', name: "menu-alt-2-icon" })), index.h("button", { key: '5f915c921b9be965707ab89224d070246f9883a8', onClick: () => {
+                this.alter({ align: 'center' });
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextcenter') }, index.h("ls-icon", { key: '25f88a7a103ae302ea5dd9b93400cda22b388498', name: "menu-alt-5-icon" })), index.h("button", { key: '62787902f13ec6f870ae1e533416b58f5553ebd7', onClick: () => {
+                this.alter({ align: 'right' });
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextright') }, index.h("ls-icon", { key: '6930b9223a758a6f8b42c466739612ef3d6b67d5', name: "menu-alt-3-icon" }))))), this.dataItem && this.dataItem.length === 1 && (index.h("div", { key: '93faac03f2360ffdb2b9108ad867a667c1c286ad', class: 'ls-dv-field-format-bar' }, index.h("div", { key: '64132c9d4eab4ae39e44fe47d8054589d23cd382', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.fontfamily') }, index.h("ls-icon", { key: '294ff2c8f5ec22da2667616f3ca9c976475a95a3', id: "selectorIcon", name: "selector-icon" }), index.h("ls-icon", { key: 'bc8f8e348c5d80a5e9685e5daa305f160216fb19', id: "selectLeadingIcon", name: "typeface-icon" }), index.h("select", { key: '5107e3ee8eaab44b4e86483bd2350ea63c20e6bc', id: "ls-toolbar-font-select", onChange: input => {
+                this.alter({ fontName: input.target.value });
+            }, class: 'ls-dv-has-leading-icon' }, index.h("option", { key: '920297ef5b4aebe491a443ce49d1d5e562af6a45', value: "arial" }, "Arial"), index.h("option", { key: '88e02f1c303035268adeafaa7d41b4e55c363244', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: '60d38b842f30969235e6d17ed4a9394ea1d5f481', value: "courier" }, "Courier"), index.h("option", { key: '94f13f530eed3b58557cc8f21a29bcd9faf48ddd', value: "helvetica" }, "Helvetica"), index.h("option", { key: '5ed34e08ce75ad09eae4a13b0f7954777cbd80a2', value: "verdana" }, "Verdana"))), index.h("div", { key: '3cc803cb4fc197f49c1f013707b51d8dd777fc88', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.fontsize') }, index.h("ls-icon", { key: '17d2bd94b28f40fd3d99958f78599f46b670b0f5', id: "selectLeadingIcon", name: "text-size-icon" }), index.h("input", { key: 'd3da7becaae40a614e3830d7e0b8fe1ae0862a9e', id: "ls-toolbar-font-size", type: "number", min: "4", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
+                if (input.target.value === '')
+                    return;
+                this.alter({ fontSize: input.target.value });
+            }, class: 'ls-dv-has-leading-icon' })), index.h("div", { key: '89671bf2c0be560096f7a4c30f34560835ba474f', class: 'ls-dv-button-group' }, index.h("button", { key: 'bb600958b5d2523a3e2f1ab48148e8841d6a3eeb', class: { 'ls-dv-active': this.dataItem[0].align === 'left' || !this.dataItem[0].align }, onClick: () => {
+                this.alter({ align: 'left' });
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextleft') }, index.h("ls-icon", { key: '928054d34f47cfdac57bd6a7ef42be66c28c53cf', name: "menu-alt-2-icon" })), index.h("button", { key: '2b54607e0254a1b95a19af7204904ba5dd02ec7b', class: { 'ls-dv-active': this.dataItem[0].align === 'center' }, onClick: () => {
+                this.alter({ align: 'center' });
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextcenter') }, index.h("ls-icon", { key: '8a26b01330ca4e77cbf6b747a8e2283df9ad49f3', name: "menu-alt-5-icon" })), index.h("button", { key: '5b1bb4eec78cc3ecd6a3b86eeeff04511a8b5a5f', class: { 'ls-dv-active': this.dataItem[0].align === 'right' }, onClick: () => {
+                this.alter({ align: 'right' });
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextright') }, index.h("ls-icon", { key: 'fbf223c5cb58ee34da29747c885bed72fab521bd', name: "menu-alt-3-icon" }))))), index.h("ls-tooltip", { key: 'cac08b2c91f39dee1738b9dfe15e185ee0b7a875', tooltipId: "ls-dv-tooltip" })));
+    }
+    static get watchers() { return {
+        "dataItem": ["selectFieldsHandler"]
+    }; }
+};
+LsFieldFormat.style = lsFieldFormatCss();
+
+const lsParticipantSelectCss = () => `:host{display:inline-block}*{margin:0}.ls-dv-dropdown{display:flex;align-items:center;position:relative}.ls-dv-dropdown-header{border-radius:0.75rem;border:1px solid var(--gray-20, #edeff2);background:var(--gray-10, #f7f8fa);display:flex;padding:0.125rem 0.125rem 0.125rem 0.5rem;align-items:center;gap:0.5rem}.ls-dv-placing-fields-text{color:var(--gray-90, #5e6066);text-align:center;font-size:0.875rem;font-style:normal;font-weight:500;margin:0}.ls-dv-selected-role-label{display:flex;padding:0.125rem 0.375rem;align-items:center;gap:0.25rem;border-radius:0.25rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;max-width:10rem}.ls-dv-selected-role-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ls-dv-dropdown-list{position:absolute;top:3rem;left:50%;transform:translateX(-50%);display:flex;width:18.5625rem;padding:0.25rem;flex-direction:column;gap:0.25rem;border-radius:1rem;border:1px solid var(--gray-30, #e0e2e5);background:white;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);max-height:40vh}.ls-dv-dropdown-list-items{display:flex;flex-direction:column;gap:0.25rem;overflow-y:auto;min-height:0}.ls-dv-dropdown-item{display:flex;padding:0.5rem 0.875rem 0.5rem 0.5rem;align-items:center;gap:0.75rem;align-self:stretch;border-radius:0.75rem}.ls-dv-dropdown-item.ls-dv-selected,.ls-dv-dropdown-item.ls-dv-selected:hover{background:var(--background-selected, #e0e2e5)}.ls-dv-dropdown-item:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-add-participant-row{all:unset;flex-shrink:0;display:flex;padding:0.5rem 0.875rem 0.5rem 0.5rem;align-items:center;gap:0.75rem;align-self:stretch;border-radius:0.75rem;border:1px dashed var(--gray-30, #e0e2e5);cursor:pointer}.ls-dv-add-participant-row:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-plus-icon{color:var(--gray-40, #d8d9dc)}.ls-dv-role-icon{display:flex;padding:0.5rem;border-radius:0.625rem}.ls-dv-add-participant-icon{display:flex;padding:0.5rem;border-radius:0.625rem;color:white;background:var(--primary-60, #4456f6)}.ls-dv-role-text{display:flex;flex-direction:column;width:100%;min-width:0}.ls-dv-dropdown-item .ls-dv-check-icon{color:var(--gray-40, #d8d9dc)}.ls-dv-dropdown-item.ls-dv-selected .ls-dv-check-icon{color:var(--check-icon-selected)}.ls-dv-role-name{color:var(--gray-100, #45484d);font-size:0.75rem;font-style:normal;font-weight:500;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ls-dv-role-type{color:var(--gray-80, #6f7176);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}.ls-dv-dropdown-item.ls-dv-selected .ls-dv-role-name{color:var(--role-name-selected)}.ls-dv-dropdown-item.ls-dv-selected .ls-dv-role-type{color:var(--role-type-selected)}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)}.ls-dv-expand-button{border:0;cursor:pointer;display:inline-flex;align-items:center;border-radius:0.625rem;justify-content:center;text-transform:capitalize;min-height:2rem;min-width:2rem;max-height:2rem;max-width:2rem}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 LsParticipantSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.roleChange = index.createEvent(this, "roleChange", 7);
+        this.addParticipant = index.createEvent(this, "addParticipant", 7);
+    }
+    get el() { return index.getElement(this); }
+    /**
+   * The id of the currently selected role.
+   * {string}
+   */
+    selected;
+    /**
+     * The currently active signer index (controlled externally).
+     * {number}
+     */
+    signer;
+    /**
+     * The currently selected role.
+     * {number}
+     */
+    selectedRole = { signerIndex: 1, name: '', roleType: 'SIGNER', default: true };
+    handleSignerChange(newSigner) {
+        this.syncSelectedRole(newSigner);
+    }
+    scrollToBottom = false;
+    handleRoleLoad() {
+        this.syncSelectedRole(this.signer);
+        if (this.scrollToBottom) {
+            this.scrollToBottom = false;
+            requestAnimationFrame(() => {
+                const list = this.el.shadowRoot?.querySelector('.ls-dv-dropdown-list-items');
+                if (list)
+                    list.scrollTo({ top: list.scrollHeight, behavior: 'smooth' });
+            });
+        }
+    }
+    componentWillLoad() {
+        this.syncSelectedRole(this.signer);
+    }
+    syncSelectedRole(signerIndex) {
+        if (signerIndex === 0) {
+            this.selectedRole = { signerIndex: 0, name: 'Sender', roleType: 'SENDER', default: false };
+        }
+        else if (this.roles?.length > 0) {
+            const role = this.roles.find(r => r.signerIndex === signerIndex);
+            if (role) {
+                this.selectedRole = { ...role, default: false };
+            }
+        }
+    }
+    /**
+     * The current template roles.
+     * {LSApiRole}
+     */
+    roles = [];
+    isOpen = false;
+    handleWindowClick(event) {
+        if (this.isOpen && !this.el.shadowRoot.contains(event.composedPath()[0])) {
+            this.isOpen = false;
+        }
+    }
+    toggleDropdown = () => {
+        this.isOpen = !this.isOpen;
+    };
+    roleChange;
+    addParticipant;
+    selectRole(role) {
+        this.selectedRole = { ...role, default: false };
+        this.isOpen = false;
+        this.roleChange.emit(role.signerIndex);
+    }
+    createHandler() {
+        this.scrollToBottom = true;
+        this.addParticipant.emit({ type: 'SIGNER' });
+    }
+    render() {
+        return (index.h(index.Host, { key: '715ad6d83d2687486b0af6c2f77316a3d841e0f3' }, index.h("div", { key: 'c445f9cfdd30737253dd50b45083b61386a44f02', class: "ls-dv-dropdown" }, index.h("div", { key: 'cdd7fad732aeacbd13f708e8cc2047b4f52d5835', class: "ls-dv-dropdown-header", onClick: this.toggleDropdown }, index.h("svg", { key: 'c4065804696ff8122ef4411c83b277936835a8b9', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '3e616a7efe1ca94b8a0c876c2feb5be543856c62', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), index.h("path", { key: 'cf7e6d467774f4e61ab4aac511ecc17e8df0ed38', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), index.h("path", { key: '4b434b62aefcfa45f81beec86c885657a621d835', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), index.h("path", { key: '6bf79aed9318c81a444ad9bc9f51b1e6c5ca5c5a', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), index.h("p", { key: '2439ea59800ed645f14d8e1342d7c8a14ba18936', class: 'ls-dv-placing-fields-text' }, i18n.dvI18n.t('toolbar.placingfieldsfor')), index.h("div", { key: '189b52c4d538b5b779c4cdeedca3b151226fa254', class: 'ls-dv-selected-role-label', style: {
+                background: defaultPalette.defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,
+                color: defaultPalette.defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,
+            } }, index.h("ls-icon", { key: '65c00386603794bc5c192c910c336c663bb85e1e', size: 18, name: this.selectedRole?.roleType === 'SENDER'
+                ? 'user-icon'
+                : this.selectedRole?.roleType === 'APPROVER'
+                    ? 'check-circle-icon'
+                    : this.selectedRole?.roleType === 'WITNESS'
+                        ? 'eye-icon'
+                        : 'signature-icon' }), index.h("span", { key: '979904cc0fbb58c52dea958ba4c45f52e6fa1109', class: "ls-dv-selected-role-text" }, this.selectedRole.name ||
+            (this.selectedRole.roleType === 'WITNESS' ? i18n.dvI18n.t('participants.witness') : i18n.dvI18n.t('participants.participant', { index: this.selectedRole.signerIndex })))), index.h("button", { key: 'b309af4daf7e76a0bf42dfa046b3e3ae02bc689a', class: 'ls-dv-tertiary-grey ls-dv-expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("ls-icon", { key: 'c13d87fcaf93cee424d76e03cc03649c9fc459f6', name: "chevron-down-icon" }))), this.isOpen && (index.h("div", { key: 'b01ddd170bd9a31e7499514120a399ce35811b59', class: "ls-dv-dropdown-list" }, index.h("div", { key: 'a50fab07069425eb97fe3d5ca2c22e9a70c774a6', class: "ls-dv-dropdown-list-items" }, index.h("div", { key: '72d781a71c60d346c4bf50e3bad096d3c605bd6e', class: this.selectedRole?.signerIndex === 0 ? 'ls-dv-dropdown-item ls-dv-selected' : 'ls-dv-dropdown-item', style: {
+                '--background-selected': defaultPalette.defaultRolePalette[0].s10,
+                '--check-icon-selected': defaultPalette.defaultRolePalette[0].s50,
+            }, onClick: () => this.selectRole({ signerIndex: 0, name: i18n.dvI18n.t('toolbar.sender'), roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.ls-dv-check-icon')?.setAttribute('name', 'check-circle-icon'), onMouseLeave: e => e.currentTarget.querySelector('.ls-dv-check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle-icon' : 'check-circle-icon') }, index.h("div", { key: '4dc75a50eb63539d69274f0196b32c2e2b4ff772', class: 'ls-dv-role-icon', style: {
+                background: defaultPalette.defaultRolePalette[0].s50,
+                color: defaultPalette.defaultRolePalette[0].s80,
+            } }, index.h("ls-icon", { key: '8fd37877b5ebf279131681f3a025c43e9fa0afe4', name: "user-icon" })), index.h("div", { key: '06213acb7e1a8e4f600677c555967897ae79ff24', class: 'ls-dv-role-text' }, index.h("p", { key: 'dfa59392dbc88567edfd9266bf894b646a8c94da', class: 'ls-dv-role-name', style: {
+                '--role-name-selected': defaultPalette.defaultRolePalette[0].s80,
+            } }, i18n.dvI18n.t('toolbar.sender')), index.h("p", { key: 'fcb40e6af7d85ee4ad9e4648e0d5a6789527b3d4', class: 'ls-dv-role-type', style: {
+                '--role-type-selected': defaultPalette.defaultRolePalette[0].s80,
+            } }, i18n.dvI18n.t('toolbar.you'))), index.h("ls-icon", { key: '0a8263bdf3471c875df8f0c3eb4f3a0d2cc61f3b', class: 'ls-dv-check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle-icon' : 'base-circle-icon', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (index.h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'ls-dv-dropdown-item ls-dv-selected' : 'ls-dv-dropdown-item', style: {
+                '--background-selected': defaultPalette.defaultRolePalette[r?.signerIndex % 100].s10,
+                '--check-icon-selected': defaultPalette.defaultRolePalette[r?.signerIndex % 100].s50,
+            }, onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.ls-dv-check-icon')?.setAttribute('name', 'check-circle-icon'), onMouseLeave: e => e.currentTarget
+                .querySelector('.ls-dv-check-icon')
+                ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle-icon' : 'check-circle-icon') }, index.h("div", { class: 'ls-dv-role-icon', style: {
+                background: r.signerIndex > 100 ? defaultPalette.defaultRolePalette[r?.signerIndex % 100].s30 : defaultPalette.defaultRolePalette[r?.signerIndex % 100].s40,
+                color: defaultPalette.defaultRolePalette[r?.signerIndex % 100].s90,
+            } }, index.h("ls-icon", { name: r.roleType === 'WITNESS' ? 'eye-icon' : r.roleType === 'APPROVER' ? 'check-circle-icon' : 'signature-icon' })), index.h("div", { class: 'ls-dv-role-text' }, index.h("p", { class: 'ls-dv-role-name', style: {
+                '--role-name-selected': defaultPalette.defaultRolePalette[r?.signerIndex % 100].s100,
+            }, "data-tooltip-id": "ls-dv-select-tooltip", "data-tooltip-html": `<span style="white-space:normal;word-break:break-word">${r.name || (r.signerIndex > 100 ? i18n.dvI18n.t('participants.participantwitness', { index: r.signerIndex - 100 }) : i18n.dvI18n.t('participants.participant', { index: r.signerIndex }))}</span>`, onMouseEnter: (e) => {
+                const el = e.currentTarget;
+                if (el.scrollWidth <= el.clientWidth) {
+                    el.removeAttribute('data-tooltip-html');
+                }
+            } }, r.name || (r.signerIndex > 100 ? i18n.dvI18n.t('participants.participantwitness', { index: r.signerIndex - 100 }) : i18n.dvI18n.t('participants.participant', { index: r.signerIndex }))), index.h("p", { class: 'ls-dv-role-type', style: {
+                '--role-type-selected': defaultPalette.defaultRolePalette[r?.signerIndex % 100].s80,
+            } }, r.roleType === 'WITNESS' ? i18n.dvI18n.t('participants.witness') : r.roleType === 'APPROVER' ? i18n.dvI18n.t('participants.approver') : i18n.dvI18n.t('participants.signer'))), index.h("ls-icon", { class: 'ls-dv-check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle-icon' : 'base-circle-icon', solid: r.signerIndex === this.selectedRole?.signerIndex }))))), index.h("button", { key: 'dbb7667dff39421ae6de4f5c86e9384e0ad68495', onClick: () => this.createHandler(), class: 'ls-dv-add-participant-row', style: {
+                '--background-selected': defaultPalette.defaultRolePalette[1].s10,
+                '--check-icon-selected': defaultPalette.defaultRolePalette[1].s50,
+            } }, index.h("div", { key: '320a0b771f6ed42e4f7feef9b60d347278fa2b7a', class: 'ls-dv-add-participant-icon' }, index.h("ls-icon", { key: '2e6c337d525a91ab395fc9dcdb62e5626a913df4', name: "user-add-icon" })), index.h("div", { key: 'b11077d92cb2665eef9367ab69a8fe3409fd985c', class: 'ls-dv-role-text' }, index.h("p", { key: '84458606a8cf3dc8951741c94772f1d552a33d74', class: 'ls-dv-role-name' }, i18n.dvI18n.t('participants.addparticipant')), index.h("p", { key: '0cda26ceca7a559cbbb5a48d702fa6eb217f3c5f', class: 'ls-dv-role-type' }, i18n.dvI18n.t('toolbar.addnewsigner'))), index.h("ls-icon", { key: '2ea312b7791fd854f05d0308483d66177e7fd23a', class: 'ls-dv-plus-icon', name: "plus-icon" }))))), index.h("ls-tooltip", { key: 'ad5797a69bf593c3450e1401c0632a023315c9be', tooltipId: "ls-dv-select-tooltip" }), index.h("slot", { key: '2e5587b444beb13388b9841b9e97b95b39188fad' })));
+    }
+    static get watchers() { return {
+        "signer": ["handleSignerChange"],
+        "roles": ["handleRoleLoad"]
+    }; }
+};
+LsParticipantSelect.style = lsParticipantSelectCss();
+
+exports.ls_field_format = LsFieldFormat;
+exports.ls_participant_select = LsParticipantSelect;
+//# sourceMappingURL=ls-field-format.ls-participant-select.entry.cjs.js.map