legalesign-document-viewer 0.10.2 → 0.10.4

package/dist/esm/ls-label.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-MftqtSf2.js';
+import { r as registerInstance, h, a as getElement } from './index-CItPoq74.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
 
 const lsLabelCss = () => `.label-span{position:relative;display:inline-flex;align-items:center;line-height:1rem;font-weight:var(--font-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.size-sm{padding:0.125rem 0.25rem;font-size:0.75rem;gap:0.25rem;border-radius:0.25rem}.size-md{padding:0.25rem 0.375rem;font-size:0.875rem;gap:0.25rem;border-radius:0.25rem}.size-lg{padding:0.375rem 0.5rem;font-size:0.875rem;}`;

package/dist/esm/ls-list-card-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-MftqtSf2.js';
+import { r as registerInstance, h, a as getElement } from './index-CItPoq74.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
 
 const lsListCardButtonCss = () => `.container {

package/dist/esm/ls-loading_2.entry.js

@@ -0,0 +1,34 @@
+import { r as registerInstance, h, a as getElement } from './index-CItPoq74.js';
+import { c as clsx } from './clsx-ChV9xqsO.js';
+
+const lsLoadingCss$1 = () => `.container{display:flex;align-items:center;line-height:1rem}div{line-height:0}.text{margin-left:0.5rem}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}`;
+
+const LsLoading = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        const classes = clsx('container');
+        return (h("div", { key: '82f6d5fb973d1722115d23196b452d37858fa4fd', class: classes, style: this.customStyle }, h("ls-loading-icon", { key: '8571fdec066bb1742520d229110b64d37784204f', default: this.defaultIcon, size: this.iconSize }), this.text && h("div", { key: '37c8166db1fc67529a41b74eb9d15d98dfd3d9f5', class: 'text' }, this.text)));
+    }
+    get el() { return getElement(this); }
+};
+LsLoading.style = lsLoadingCss$1();
+
+const lsLoadingCss = () => `.container{display:flex;align-items:center;line-height:1rem}div{line-height:0}.text{margin-left:0.5rem}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}`;
+
+const LsLoadingIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.default = true;
+        this.size = 20;
+    }
+    render() {
+        const loadingClass = clsx('loadingIcon', 'animate-spin');
+        return (h("div", { key: 'dc21ad882fdd44c6eed3dff86209efafc330d0bc' }, this.default ? (h("svg", { width: this.size, height: this.size, viewBox: '0 0 24 24', class: loadingClass, fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, h("g", { "clip-path": 'url(#clip0_5402_116)' }, h("path", { opacity: '0.2', d: 'M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z', stroke: 'currentColor', "stroke-width": '4', "stroke-miterlimit": '10' }), h("path", { d: 'M20 12C20 14.2044 19.1022 16.2044 17.6622 17.6533', stroke: 'currentColor', "stroke-width": '4', "stroke-miterlimit": '10' }), h("path", { opacity: '0.8', d: 'M17.6533 6.34692C19.1022 7.79581 20 9.79581 20 12.0003', stroke: 'currentColor', "stroke-width": '4', "stroke-miterlimit": '10' }), h("path", { opacity: '0.6', d: 'M12 4C14.2133 4 16.2133 4.89778 17.6533 6.34667', stroke: 'currentColor', "stroke-width": '4', "stroke-miterlimit": '10' }), h("path", { opacity: '0.4', d: 'M6.33777 6.34667C7.78666 4.89778 9.78666 4 12 4', stroke: 'currentColor', "stroke-width": '4', "stroke-miterlimit": '10' }), h("path", { opacity: '0.2', d: 'M4 12.0003C4 9.79581 4.89778 7.79581 6.33778 6.34692', stroke: 'currentColor', "stroke-width": '4', "stroke-miterlimit": '10' })), h("defs", null, h("clipPath", { id: 'clip0_5402_116' }, h("rect", { width: '20', height: '20', fill: 'white', transform: 'translate(2 2)' }))))) : (h("svg", { width: this.size, height: this.size, viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', class: loadingClass }, h("path", { d: 'M12.0433 3V6.46154M12.0433 17.5385V21M17.5385 12.1812H21M3 12.1812H6.46154M16.1538 8.08933L18.6015 5.64166M5.39624 5.64213L7.84392 8.0898M15.908 15.6752L18.3556 18.1229M5.64213 18.6011L8.0898 16.1534', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round' }), h("defs", null, h("radialGradient", { id: 'paint0_angular_2161_284876', cx: '0', cy: '0', r: '1', gradientUnits: 'userSpaceOnUse', gradientTransform: 'translate(12 12) rotate(-123.69) scale(9.01388)' }, h("stop", { "stop-opacity": '0' }), h("stop", { offset: '1' })))))));
+    }
+};
+LsLoadingIcon.style = lsLoadingCss();
+
+export { LsLoading as ls_loading, LsLoadingIcon as ls_loading_icon };
+//# sourceMappingURL=ls-loading.ls-loading-icon.entry.js.map

package/dist/esm/ls-navbar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-MftqtSf2.js';
+import { r as registerInstance, h } from './index-CItPoq74.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
 
 const lsNavbarCss = () => `.title{font-weight:var(--font-semibold);font-size:0.875rem;line-height:1.5rem;color:var(--gray-70);text-transform:uppercase;padding-top:10px;padding-bottom:0.625rem;padding-left:1.5rem;padding-right:1rem;margin-top:0;margin-bottom:0}ul{padding-left:0;margin-bottom:0;margin-top:0}li{list-style-type:none}button{background-color:transparent;border:none;cursor:pointer;padding:0;margin:0;width:100%}.item{display:flex;justify-content:space-between;border-right:3px solid transparent;padding-top:10px;padding-bottom:10px;padding-left:2.75rem;padding-right:1rem;color:var(--gray-100);text-transform:capitalize;font-size:1rem;text-decoration:none}.item:hover{background-color:var(--primary-10);border-right-color:var(--primary-60);color:var(--primary-100)}.item:hover .icon{color:var(--primary-100)}.selected{background-color:var(--primary-60);color:white}.selected .icon{color:white}.selected:hover .icon{color:white}.selected:hover{background-color:var(--primary-70);color:white;border-right-color:var(--primary-70)}.icon{color:var(--gray-80)}.itemLeft{display:flex;align-items:center;gap:0.5rem}.itemRight{display:flex;align-items:center;gap:0.5rem}.dot{display:inline-block;width:0.5rem;height:0.5rem;background-color:var(--red-50);border-radius:50%}`;

package/dist/esm/ls-notification.entry.js

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

package/dist/esm/ls-radio-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-MftqtSf2.js';
+import { r as registerInstance, c as createEvent, h } from './index-CItPoq74.js';
 
 const lsRadioGroupCss = () => `.host{display:flex;flex-direction:column;gap:0.5rem}.title{font-weight:var(--font-semibold);color:var(--gray-100)}.subTitle{color:var(--gray-80);margin-top:-0.5rem}.horizontal{flex-direction:row;gap:1rem;flex-wrap:wrap}`;
 

package/dist/esm/ls-radio-input.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-MftqtSf2.js';
+import { r as registerInstance, h } from './index-CItPoq74.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
 
 const lsRadioInputCss = () => `.radioLabel{display:flex;align-items:center;gap:0.75rem;border-radius:0.5rem;padding:0.5rem 0.75rem}.radioLabel.checked{background-color:var(--primary-10);border-color:var(--primary-20);color:var(--primary-90)}.radioLabel:not(checked){color:var(--gray-90);background-color:var(--gray-10);border:1px solid var(--gray-20)}.radioLabel.checked:hover{border-color:var(--primary-30);color:var(--primary-100)}.radioLabel:not(.checked):not(.disabled):hover{border-color:var(--gray-50);color:var(--gray-100)}.radioLabel:focus:not(.disabled){box-shadow:var(--focus-box-shadow);outline-offset:var(--focus-outline-offset);outline:none}.radioLabel.disabled{cursor:not-allowed}.radioLabel.disabled.checked{background-color:var(--primary-10);color:var(--primary-40);border-color:var(--primary-40)}.radioLabel.disabled:not(.checked){background-color:var(--gray-10);color:var(--gray-60)}.inputClass{margin-top:0px}.inputClass:focus{outline:none}.inputClass:disabled{cursor:not-allowed}.spanContainer{display:flex;gap:0.25rem;align-items:center}`;

package/dist/esm/ls-tabs.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-MftqtSf2.js';
+import { r as registerInstance, h } from './index-CItPoq74.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
 
 const lsTabsCss = () => `.container{background-color:var(--gray-10);height:2.25rem;display:flex;gap:0.25rem;justify-content:center;padding:0.25rem;border-radius:0.625rem}.size-sm{height:1.75rem}.size-md{height:2.25rem}.size-lg{height:2.75rem}.tab{display:flex;align-items:center;gap:0.325rem;justify-content:center;width:100%;border-radius:0.375rem;border:none;flex:1 0 0}.tab.selected{color:var(--primary-100);background-color:var(--white)}.tab.selected:not(:focus){box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 3px 0px rgba(0, 0, 0, 0.10);border:1px solid var(--gray-20)}.tab.selected:hover{cursor:pointer}.tab.not-selected{color:var(--gray-80);background-color:transparent}.tab.not-selected:not(:focus){border:1px solid transparent}.tab.not-selected:hover{color:var(--gray-100);background-color:var(--gray-20);cursor:pointer}button:focus{box-shadow:var(--focus-box-shadow);outline-offset:var(--focus-outline-offset);border:1px solid var(--primary-60)}.tab.disabled:disabled{color:var(--gray-50);background-color:var(--gray-10);cursor:not-allowed}.dot{width:0.375rem;height:0.375rem;border-radius:50%;background-color:var(--red-50);margin-top:0.5rem;align-self:flex-start}.counter{display:flex;justify-content:center;align-items:center;color:var(--white);background-color:var(--red-60);padding:0 0.25rem;border-radius:0.75rem}`;

package/dist/esm/ls-tag.entry.js

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

package/dist/esm/ls-text.entry.js

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

package/dist/esm/ls-timeline-step.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-MftqtSf2.js';
+import { r as registerInstance, h } from './index-CItPoq74.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
 
 const lsTimelineStepCss = () => `.disk{box-sizing:border-box;display:flex;width:1rem;height:1rem;padding:0.125rem;margin:0;border-radius:999px}.container{width:100%;display:flex;gap:0.5rem;align-items:center}.disk-scheduled{color:var(--gray-60);background-color:var(--gray-20);outline:solid 1px var(--gray-80)}.disk-bounced{color:var(--yellow-60);background-color:var(--yellow-20);outline:solid 1px var(--yellow-80)}.disk-emailed{color:var(--gray-60);background-color:var(--gray-20);outline:solid 1px var(--gray-80)}.disk-opened{color:var(--blue-60);background-color:var(--blue-20);outline:solid 1px var(--blue-80)}.disk-viewed{color:var(--purple-60);background-color:var(--purple-20);outline:solid 1px var(--purple-80)}.disk-complete{color:var(--green-60);background-color:var(--green-20);outline:solid 1px var(--green-80)}.disk-rejected{color:var(--red-60);background-color:var(--red-20);outline:solid 1px var(--red-80)}.disk-withdrawn{color:var(--gray-40);background-color:var(--gray-10);outline:solid 1px var(--gray-30)}.disk-incomplete{outline:dashed 1px var(--gray-40)}.text-and-disk{display:flex;gap:0.5rem;align-items:center;width:fit-content}p{color:var(--Grey-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:var(--font-medium)}.text-complete{color:var(--Grey-100, #45484d);font-weight:var(--font-medium)}.text-incomplete{color:var(--Grey-50, #c8c9cc)}.bounced-text-width{width:3.75rem}.emailed-text-width{width:3.75rem}.opened-text-width{width:3.125rem}.viewed-text-width{width:3.125rem}.complete-text-width{width:4.25rem}.rejected-text-width{width:4.25rem}.line{height:1px;width:100%;padding:0;margin:0;border-radius:999px}.line-opened{background:linear-gradient(90deg, var(--gray-80) 0%, var(--blue-80) 100%)}.line-viewed{background:linear-gradient(90deg, var(--blue-80) 0%, var(--purple-80) 100%)}.line-complete{background:linear-gradient(90deg, var(--purple-80) 0%, var(--green-80) 100%)}.line-rejected{background:linear-gradient(90deg, var(--purple-80) 0%, var(--red-80) 100%)}.line-incomplete{background:repeating-linear-gradient(

package/dist/esm/ls-timeline.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-MftqtSf2.js';
+import { r as registerInstance, h } from './index-CItPoq74.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
 
 const lsTimelineCss = () => `*{box-sizing:border-box;line-height:1}.timeline-wrapper{display:flex;align-items:center;gap:0.75rem;width:100%}.recipient{display:flex;align-items:center;gap:0.5rem;flex-shrink:0}.recipient-icon{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:0.625rem;flex-shrink:0}.recipient-details{display:flex;flex-direction:column;width:7.75rem}.recipient-name{color:var(--gray-100);font-size:0.75rem;font-weight:var(--font-medium);line-height:1rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recipient-email{color:var(--gray-80);font-size:0.75rem;line-height:1rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.divider{width:1px;height:1rem;background-color:var(--gray-20);flex-shrink:0}.mobile{display:flex;align-items:center;justify-content:flex-end;width:100%}.mobile-tag{display:flex;align-items:center;gap:0.25rem;height:1.5rem;padding:0.25rem 0.5rem;border-radius:9999px;font-size:0.875rem;font-weight:var(--font-medium);white-space:nowrap;width:fit-content}.desktop{display:none;align-items:center;justify-content:space-evenly;gap:0.625rem;width:100%}@media (min-width: 1024px){.mobile{display:none}.desktop{display:flex}}.step-group{display:flex;align-items:center;gap:0.5rem;flex-shrink:0;position:relative}.step[data-tooltip]{cursor:default}.step[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 0.5rem);left:50%;transform:translateX(-50%);background:var(--gray-90);color:white;font-size:0.75rem;padding:0.375rem 0.5rem;border-radius:0.375rem;white-space:nowrap;z-index:10;pointer-events:none;line-height:1}.step[data-tooltip='']:hover::after{display:none}.step{width:1.125rem;height:1.125rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;flex-shrink:0;position:relative}.step--empty{background:transparent;border:1px dashed var(--gray-40)}.step--bypassed{background:var(--gray-10);border:1px solid var(--gray-40)}.step--emailed{background:var(--gray-20);border:1px solid var(--gray-80)}.step--bounced{background:var(--yellow-10);border:1px solid var(--yellow-80)}.step--expired{background:var(--red-10);border:1px solid var(--red-80)}.step--opened{background:var(--blue-20);border:1px solid var(--blue-80)}.step--viewed{background:var(--purple-20);border:1px solid var(--purple-80)}.step--signed{background:var(--green-20);border:1px solid var(--green-80)}.step--rejected{background:var(--red-20);border:1px solid var(--red-80)}.step-dash{background:var(--gray-40);border-radius:9999px;width:0.5rem;height:0.125rem;overflow:hidden}.label{font-size:0.875rem;font-weight:var(--font-medium);white-space:nowrap;margin:0;color:var(--gray-100)}.label--emailed{width:4.375rem}.label--opened{width:3.938rem}.label--viewed{width:3.938rem}.label--inactive{color:var(--gray-50)}.connector{width:100%;height:1px;border-radius:9999px;margin:0 0.25rem;flex-shrink:1}.connector--inactive{background:repeating-linear-gradient(

package/dist/esm/ls-title-input.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-MftqtSf2.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-CItPoq74.js';
 
 const lsTitleInputCss = () => `*{box-sizing:border-box;margin:0;padding:0}:host{display:block}.ls-dv-template-title{border-radius:0.625rem;padding:0 0.25rem;color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;cursor:pointer}.ls-dv-template-title:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-edit-button{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)}`;
 
@@ -28,7 +28,7 @@ const LsTitleInput = class {
         }, delay);
     }
     render() {
-        return (h(Host, { key: '7c80161609400517e506a871872d54bf43c3937f' }, this.editTitle ? (h("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("input", { value: this.template?.title, style: { height: '1.25rem', padding: '0 0.25rem', width: 'fit-content' }, onInput: e => {
+        return (h(Host, { key: '75206cc51e3fb549f0f0ccc893db270e4d66e323' }, this.editTitle ? (h("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("input", { value: this.template?.title, style: { height: '1.25rem', padding: '0 0.25rem', width: 'fit-content' }, onInput: e => {
                 e.preventDefault();
                 this.alter({ title: e.target.value });
             }, onKeyUp: e => {

package/dist/esm/ls-toolbox-field.entry.js

@@ -0,0 +1,94 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-CItPoq74.js';
+import { d as defaultRolePalette } from './defaultPalette-CwCWCxsI.js';
+
+const lsToolboxFieldCss = () => `.ls-dv-toolbox-field{display:flex;padding:0.5rem;align-items:center;justify-content:center;gap:0.875rem;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:white;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);cursor:grab}:host(.ls-dv-dragging) .ls-dv-toolbox-field,:host(.ls-dv-dragging) .ls-dv-toolbox-field *{cursor:grabbing !important}.ls-dv-toolbox-field:active{cursor:grabbing}.ls-dv-toolbox-field:hover{background:var(--gray-10, #f7f8fa);box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);border:1px solid var(--gray-30, #e0e2e5)}.ls-dv-warning-box{display:flex;padding:0.38rem;align-items:center;justify-content:center;border-radius:0.625rem;border:1px solid var(--red-40, #ffa19e);background:var(--red-10, #fff0f0);color:var(--red-60, #f64a44)}.ls-dv-toolbox-field-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.625rem;border:1px solid var(--signer-color);background:var(--signer-color-light);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--signer-color)}.ls-dv-toolbox-field-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;width:100%;margin:0}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 LsToolboxField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.fieldTypeSelected = createEvent(this, "fieldTypeSelected", 7);
+        this.toolboxDragStart = createEvent(this, "toolboxDragStart", 7);
+    }
+    get component() { return getElement(this); }
+    /**
+     * The field type of this toolbox item, e.g. 'signature'. Note these should always be lowercase.
+     */
+    formElementType;
+    elementType;
+    validation = 0;
+    fixedAspect = null;
+    redDot = false;
+    /**
+     * The text to display for this field type.
+     */
+    label;
+    /**
+     * The icon to display for this field type.
+     */
+    icon;
+    /**
+     * The tooltip hint to describe to the field type
+     */
+    tooltip;
+    /**
+     * The starting height of this control type in pixels.
+     */
+    defaultHeight;
+    /**
+     * The starting width of this control type in pixels.
+     */
+    defaultWidth;
+    /**
+     * The signer color of the element
+     */
+    signer = 0;
+    isSelected = false;
+    fieldTypeSelected;
+    toolboxDragStart;
+    handleMouseDown(event) {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        // Always select this field type
+        this.fieldTypeSelected.emit({
+            label: this.label,
+            formElementType: this.formElementType,
+            elementType: this.elementType,
+            validation: this.validation,
+            defaultHeight: this.defaultHeight,
+            defaultWidth: this.defaultWidth,
+            fixedAspect: this.fixedAspect,
+        });
+        // Also start dragging
+        this.toolboxDragStart.emit({
+            label: this.label,
+            formElementType: this.formElementType,
+            elementType: this.elementType,
+            validation: this.validation,
+            defaultHeight: this.defaultHeight,
+            defaultWidth: this.defaultWidth,
+            fixedAspect: this.fixedAspect,
+        });
+    }
+    handleKeyDown(event) {
+        if (event.key === 'ArrowDown') {
+            console.log('down arrow pressed');
+        }
+    }
+    componentDidLoad() {
+    }
+    render() {
+        return (h(Host, { key: '5eb3a6f89ccf710b77c3e483f45eba2f61864526' }, h("div", { key: 'f6d76d87ba82428e034e1afe72e43b6f3c0c38aa', class: 'ls-dv-toolbox-field', style: this.isSelected && {
+                background: defaultRolePalette[this.signer % 100].s10,
+                border: `1px solid ${defaultRolePalette[this.signer % 100].s60}`,
+                color: defaultRolePalette[this.signer % 100].s80,
+                boxShadow: `0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);`,
+            } }, h("div", { key: '7799d28220afcd1d147413c587f471b5dc8c68eb', class: "ls-dv-toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": this.tooltip, "data-tooltip-place": "right" }, h("ls-icon", { key: '0eef21c559e2d1680b08dd9122f49fa1a4bd4d12', name: this.icon, size: 20 })), h("p", { key: 'b891f8d75de4eb59fc4fcc4c3bfa038094768595', class: "ls-dv-toolbox-field-label", style: this.isSelected && {
+                color: defaultRolePalette[this.signer % 100].s80,
+            } }, this.label), this.redDot && (h("div", { key: '11a4bb6640b0e416412301f20f7f0a18856d49bc', class: 'ls-dv-warning-box', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": `${this.label} Field Required`, "data-tooltip-place": "left" }, h("ls-icon", { key: '51c02ca8369793eb14f285e43149331878bb4bb7', name: "exclamation-circle-icon", size: 18, solid: true }))), h("ls-icon", { key: '112f2300a14b12e1979c4650bceebf64762695e9', name: "drag-vertical-icon", size: 16, customStyle: { color: this.isSelected ? defaultRolePalette[this.signer % 100].s60 : '#787a80' } })), h("ls-tooltip", { key: 'f3f61da3c58bd4bc350de745389f3c27a852ebde', tooltipId: "ls-dv-tooltip" })));
+    }
+};
+LsToolboxField.style = lsToolboxFieldCss();
+
+export { LsToolboxField as ls_toolbox_field };
+//# sourceMappingURL=ls-toolbox-field.entry.js.map

package/dist/esm/ls-toolbox-field.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-toolbox-field.entry.js","sources":["src/components/ls-toolbox-field/ls-toolbox-field.scss?tag=ls-toolbox-field&encapsulation=shadow","src/components/ls-toolbox-field/ls-toolbox-field.tsx"],"sourcesContent":[".ls-dv-toolbox-field {\n  display: flex;\n  padding: 0.5rem;\n  align-items: center;\n  justify-content: center;\n  gap: 0.875rem;\n  border-radius: 1rem;\n  border: 1px solid $gray-20;\n  background: white;\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n  cursor: grab;\n}\n\n:host(.ls-dv-dragging) .ls-dv-toolbox-field,\n:host(.ls-dv-dragging) .ls-dv-toolbox-field * {\n  cursor: grabbing !important;\n}\n\n.ls-dv-toolbox-field:active {\n  cursor: grabbing;\n}\n\n.ls-dv-toolbox-field:hover {\n  background: $gray-10;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  border: 1px solid $gray-30;\n}\n\n.ls-dv-warning-box {\n  display: flex;\n  padding: 0.38rem;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.625rem;\n  border: 1px solid $red-40;\n  background: $red-10;\n  color: $red-60;\n}\n\n\n\n.ls-dv-toolbox-field-icon {\n  display: flex;\n  padding: 0.5rem;\n  align-items: center;\n  border-radius: 0.625rem;\n  border: 1px solid var(--signer-color);\n  background: var(--signer-color-light);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n  color: var(--signer-color);\n}\n\n.ls-dv-toolbox-field-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  width: 100%;\n  margin: 0;\n}\n\n/* Global Styles */\n\np {\n  color: $gray-80;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: $primary-60;\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: $primary-70;\n}\n\n.ls-dv-button-link,\n.ls-dv-button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 2.25rem;\n}\n\n.ls-dv-input-wrapper {\n  position: relative;\n  width: fit-content;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: $gray-80;\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: $gray-80;\n}\n\n.ls-dv-has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid $gray-40;\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.625rem;\n  color: $gray-100;\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: $gray-60;\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: $gray-50;\n  background-color: $white;\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem $primary-40;\n  border-color: $primary-60;\n  background-color: $white;\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: $primary-50;\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: $gray-10;\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].ls-dv-indeterminate {\n  background-color: $primary-60;\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].ls-dv-indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].ls-dv-indeterminate:hover {\n  background-color: $primary-70;\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem $primary-20;\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.ls-dv-checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.ls-dv-checkbox-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.ls-dv-form-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.ls-dv-form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.ls-dv-loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: $primary-60;\n}\n\nbutton {\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: $primary-60;\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.ls-dv-tertiary-grey {\n  border: 1px solid $gray-40;\n  background-color: white;\n  color: $gray-80;\n}\n\nbutton.ls-dv-tertiary-grey:hover {\n  border: 1px solid $gray-50;\n  background: $gray-10;\n}\n\n.ls-dv-button-group {\n  display: flex;\n  border-radius: 0.625rem;\n  border: 1px solid $gray-30;\n  background: $white;\n  overflow: clip;\n}\n\n.ls-dv-button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: $gray-80;\n}\n\n.ls-dv-button-group button:hover {\n  background: $gray-10;\n}\n\n.ls-dv-button-group > :first-child {\n  border-radius: 0.625rem 0 0 0.625rem;\n}\n\n.ls-dv-button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.ls-dv-button-group > :not(:first-child) {\n  border-left: 1px solid $gray-30;\n}\n","import { Component, Event, Host, Listen, Prop, Element, h, EventEmitter } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { IToolboxField } from '../interfaces/IToolboxField';\n\n@Component({\n  tag: 'ls-toolbox-field',\n  styleUrl: 'ls-toolbox-field.scss',\n  shadow: true,\n})\nexport class LsToolboxField {\n  @Element() component: HTMLElement;\n  /**\n   * The field type of this toolbox item, e.g. 'signature'. Note these should always be lowercase.\n   */\n  @Prop() formElementType: string;\n  @Prop() elementType: 'text' | 'signature' | 'initials' | 'admin';\n  @Prop() validation: number = 0;\n  @Prop() fixedAspect: number | null = null;\n  @Prop() redDot: boolean = false;\n\n  /**\n   * The text to display for this field type.\n   */\n  @Prop() label: string;\n\n  /**\n   * The icon to display for this field type.\n   */\n  @Prop() icon: Icon;\n  /**\n   * The tooltip hint to describe to the field type\n   */\n  @Prop() tooltip: string;\n\n  /**\n   * The starting height of this control type in pixels.\n   */\n  @Prop() defaultHeight: number;\n  /**\n   * The starting width of this control type in pixels.\n   */\n  @Prop() defaultWidth: number;\n\n  /**\n   * The signer color of the element\n   */\n  @Prop() signer: number = 0;\n\n  @Prop({ mutable: true }) isSelected: boolean = false;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  fieldTypeSelected: EventEmitter<{\n    label: string;\n    elementType: string;\n    defaultHeight: number;\n    defaultWidth: number;\n    formElementType: string;\n    validation: number;\n    fixedAspect: number | null;\n  }>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  toolboxDragStart: EventEmitter<IToolboxField>;\n\n  @Listen('mousedown')\n  handleMouseDown(event: MouseEvent) {\n    if (event.button !== 0) return;\n    event.preventDefault();\n\n    // Always select this field type\n    this.fieldTypeSelected.emit({\n      label: this.label,\n      formElementType: this.formElementType,\n      elementType: this.elementType,\n      validation: this.validation,\n      defaultHeight: this.defaultHeight,\n      defaultWidth: this.defaultWidth,\n      fixedAspect: this.fixedAspect,\n    });\n\n    // Also start dragging\n    this.toolboxDragStart.emit({\n      label: this.label,\n      formElementType: this.formElementType,\n      elementType: this.elementType,\n      validation: this.validation,\n      defaultHeight: this.defaultHeight,\n      defaultWidth: this.defaultWidth,\n      fixedAspect: this.fixedAspect,\n    });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'ArrowDown') {\n      console.log('down arrow pressed');\n    }\n  }\n\n  componentDidLoad() {\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={'ls-dv-toolbox-field'}\n          style={\n            this.isSelected && {\n              background: defaultRolePalette[this.signer % 100].s10,\n              border: `1px solid ${defaultRolePalette[this.signer % 100].s60}`,\n              color: defaultRolePalette[this.signer % 100].s80,\n              boxShadow: `0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);`,\n            }\n          }\n        >\n          <div\n            class=\"ls-dv-toolbox-field-icon\"\n            style={{ '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }}\n            data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={this.tooltip}\n            data-tooltip-place=\"right\"\n          >\n            <ls-icon name={this.icon as any} size={20} />\n          </div>\n          <p\n            class=\"ls-dv-toolbox-field-label\"\n            style={\n              this.isSelected && {\n                color: defaultRolePalette[this.signer % 100].s80,\n              }\n            }\n          >\n            {this.label}\n          </p>\n          {this.redDot && (\n            <div class={'ls-dv-warning-box'} data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={`${this.label} Field Required`} data-tooltip-place=\"left\">\n              <ls-icon name=\"exclamation-circle-icon\" size={18} solid />\n            </div>\n          )}\n          <ls-icon name=\"drag-vertical-icon\" size={16} customStyle={{ color: this.isSelected ? defaultRolePalette[this.signer % 100].s60 : '#787a80' }} />\n        </div>\n        <ls-tooltip tooltipId=\"ls-dv-tooltip\" />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ls-tooltip.entry.js

@@ -0,0 +1,245 @@
+import { r as registerInstance, a as getElement } from './index-CItPoq74.js';
+
+const LsTooltip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** The tooltip id to match against data-tooltip-id attributes */
+        this.tooltipId = 'le-tooltip';
+        this.floatHandler = null;
+        this.floatTarget = null;
+        this.attachedElements = new WeakSet();
+        this.show = (target) => {
+            const content = target.getAttribute('data-tooltip-content') || '';
+            const html = target.getAttribute('data-tooltip-html') || '';
+            if (!content && !html)
+                return;
+            const place = target.getAttribute('data-tooltip-place') || 'top';
+            const variant = target.getAttribute('data-tooltip-variant') || 'dark';
+            const delayShow = parseInt(target.getAttribute('data-tooltip-delay-show') || '0', 10);
+            const isFloat = target.hasAttribute('data-tooltip-float');
+            const doShow = () => {
+                const rect = target.getBoundingClientRect();
+                const pos = this.computePosition(rect, place);
+                if (html) {
+                    this.contentDiv.innerHTML = html;
+                }
+                else {
+                    this.contentDiv.textContent = content;
+                }
+                this.tooltipDiv.style.left = `${pos.x}px`;
+                this.tooltipDiv.style.top = `${pos.y}px`;
+                this.applyVariant(variant);
+                this.applyPlacement(place);
+                this.tooltipDiv.style.opacity = '1';
+            };
+            if (isFloat) {
+                this.floatHandler = (e) => {
+                    if (html) {
+                        this.contentDiv.innerHTML = html;
+                    }
+                    else {
+                        this.contentDiv.textContent = content;
+                    }
+                    this.tooltipDiv.style.left = `${e.clientX}px`;
+                    this.tooltipDiv.style.top = `${e.clientY - 10}px`;
+                    this.applyVariant(variant);
+                    this.applyPlacement('top');
+                    this.tooltipDiv.style.opacity = '1';
+                };
+                this.floatTarget = target;
+                target.addEventListener('mousemove', this.floatHandler);
+            }
+            this.clearTimers();
+            if (delayShow > 0) {
+                this.delayTimer = setTimeout(doShow, delayShow);
+            }
+            else {
+                doShow();
+            }
+        };
+        this.hide = () => {
+            this.clearTimers();
+            this.tooltipDiv.style.opacity = '0';
+            if (this.floatTarget && this.floatHandler) {
+                this.floatTarget.removeEventListener('mousemove', this.floatHandler);
+                this.floatTarget = null;
+                this.floatHandler = null;
+            }
+        };
+        this.handleEnter = (e) => {
+            this.show(e.currentTarget);
+        };
+        this.handleLeave = () => {
+            this.hide();
+        };
+    }
+    clearTimers() {
+        if (this.delayTimer)
+            clearTimeout(this.delayTimer);
+    }
+    createTooltipDiv() {
+        const div = document.createElement('div');
+        div.role = 'tooltip';
+        div.style.cssText = `
+      position: fixed;
+      pointer-events: none;
+      z-index: 99999;
+      max-width: 25vw;
+      padding: 0.5rem 0.75rem;
+      border-radius: 0.375rem;
+      font-family: var(--font-family, 'IBM Plex Sans', sans-serif);
+      font-size: 0.8125rem;
+      line-height: 1.4;
+      white-space: nowrap;
+      opacity: 0;
+      overflow: visible;
+      transition: opacity 0.15s ease-in-out;
+      background: var(--gray-90, #222);
+      color: #fff;
+      transform: translateX(-50%) translateY(-100%);
+    `;
+        const content = document.createElement('div');
+        div.appendChild(content);
+        this.contentDiv = content;
+        const arrow = document.createElement('div');
+        arrow.style.cssText = `
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      background: var(--gray-90, #222);
+      transform: rotate(45deg);
+    `;
+        div.appendChild(arrow);
+        this.arrowDiv = arrow;
+        document.body.appendChild(div);
+        return div;
+    }
+    applyVariant(variant) {
+        const div = this.tooltipDiv;
+        let bg;
+        switch (variant) {
+            case 'light':
+                bg = '#fff';
+                div.style.background = bg;
+                div.style.color = 'var(--gray-90, #222)';
+                div.style.border = '1px solid var(--gray-20, #e5e7eb)';
+                div.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
+                break;
+            case 'warning':
+                bg = 'var(--yellow-90, #78350f)';
+                div.style.background = bg;
+                div.style.color = '#fff';
+                div.style.border = 'none';
+                div.style.boxShadow = 'none';
+                break;
+            case 'error':
+                bg = 'var(--red-60, #dc2626)';
+                div.style.background = bg;
+                div.style.color = '#fff';
+                div.style.border = 'none';
+                div.style.boxShadow = 'none';
+                break;
+            case 'info':
+                bg = 'var(--blue-60, #2563eb)';
+                div.style.background = bg;
+                div.style.color = '#fff';
+                div.style.border = 'none';
+                div.style.boxShadow = 'none';
+                break;
+            default:
+                bg = 'var(--gray-90, #222)';
+                div.style.background = bg;
+                div.style.color = '#fff';
+                div.style.border = 'none';
+                div.style.boxShadow = 'none';
+        }
+        this.arrowDiv.style.background = bg;
+    }
+    applyPlacement(place) {
+        switch (place) {
+            case 'bottom':
+                this.tooltipDiv.style.transform = 'translateX(-50%)';
+                this.arrowDiv.style.top = '-4px';
+                this.arrowDiv.style.bottom = '';
+                this.arrowDiv.style.left = '50%';
+                this.arrowDiv.style.right = '';
+                this.arrowDiv.style.marginLeft = '-4px';
+                break;
+            case 'left':
+                this.tooltipDiv.style.transform = 'translateX(-100%) translateY(-50%)';
+                this.arrowDiv.style.top = '50%';
+                this.arrowDiv.style.bottom = '';
+                this.arrowDiv.style.right = '-4px';
+                this.arrowDiv.style.left = '';
+                this.arrowDiv.style.marginTop = '-4px';
+                this.arrowDiv.style.marginLeft = '';
+                break;
+            case 'right':
+                this.tooltipDiv.style.transform = 'translateY(-50%)';
+                this.arrowDiv.style.top = '50%';
+                this.arrowDiv.style.bottom = '';
+                this.arrowDiv.style.left = '-4px';
+                this.arrowDiv.style.right = '';
+                this.arrowDiv.style.marginTop = '-4px';
+                this.arrowDiv.style.marginLeft = '';
+                break;
+            default:
+                this.tooltipDiv.style.transform = 'translateX(-50%) translateY(-100%)';
+                this.arrowDiv.style.bottom = '-4px';
+                this.arrowDiv.style.top = '';
+                this.arrowDiv.style.left = '50%';
+                this.arrowDiv.style.right = '';
+                this.arrowDiv.style.marginLeft = '-4px';
+                this.arrowDiv.style.marginTop = '';
+        }
+    }
+    computePosition(rect, place) {
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        switch (place) {
+            case 'bottom': return { x: cx, y: rect.bottom + 10 };
+            case 'left': return { x: rect.left - 10, y: cy };
+            case 'right': return { x: rect.right + 10, y: cy };
+            default: return { x: cx, y: rect.top - 10 };
+        }
+    }
+    attach(el) {
+        if (this.attachedElements.has(el))
+            return;
+        this.attachedElements.add(el);
+        el.addEventListener('mouseenter', this.handleEnter);
+        el.addEventListener('mouseleave', this.handleLeave);
+    }
+    scan() {
+        const hostRoot = this.el.getRootNode();
+        const selector = `[data-tooltip-id="${this.tooltipId}"]`;
+        hostRoot.querySelectorAll(selector).forEach((el) => this.attach(el));
+    }
+    componentDidLoad() {
+        this.tooltipDiv = this.createTooltipDiv();
+        this.scan();
+        const hostRoot = this.el.getRootNode();
+        const observeTarget = hostRoot === document ? document.body : hostRoot;
+        this.observer = new MutationObserver(() => this.scan());
+        this.observer.observe(observeTarget, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.observer)
+            this.observer.disconnect();
+        this.clearTimers();
+        if ((_a = this.tooltipDiv) === null || _a === void 0 ? void 0 : _a.parentNode) {
+            this.tooltipDiv.parentNode.removeChild(this.tooltipDiv);
+        }
+    }
+    render() {
+        return null;
+    }
+    get el() { return getElement(this); }
+};
+
+export { LsTooltip as ls_tooltip };
+//# sourceMappingURL=ls-tooltip.entry.js.map

package/dist/esm/ls-tooltip.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-tooltip.entry.js","sources":["node_modules/.pnpm/legalesign-ui@0.0.45/node_modules/legalesign-ui/dist/collection/components/ls-tooltip/ls-tooltip.js"],"sourcesContent":["export class LsTooltip {\n    constructor() {\n        /** The tooltip id to match against data-tooltip-id attributes */\n        this.tooltipId = 'le-tooltip';\n        this.floatHandler = null;\n        this.floatTarget = null;\n        this.attachedElements = new WeakSet();\n        this.show = (target) => {\n            const content = target.getAttribute('data-tooltip-content') || '';\n            const html = target.getAttribute('data-tooltip-html') || '';\n            if (!content && !html)\n                return;\n            const place = target.getAttribute('data-tooltip-place') || 'top';\n            const variant = target.getAttribute('data-tooltip-variant') || 'dark';\n            const delayShow = parseInt(target.getAttribute('data-tooltip-delay-show') || '0', 10);\n            const isFloat = target.hasAttribute('data-tooltip-float');\n            const doShow = () => {\n                const rect = target.getBoundingClientRect();\n                const pos = this.computePosition(rect, place);\n                if (html) {\n                    this.contentDiv.innerHTML = html;\n                }\n                else {\n                    this.contentDiv.textContent = content;\n                }\n                this.tooltipDiv.style.left = `${pos.x}px`;\n                this.tooltipDiv.style.top = `${pos.y}px`;\n                this.applyVariant(variant);\n                this.applyPlacement(place);\n                this.tooltipDiv.style.opacity = '1';\n            };\n            if (isFloat) {\n                this.floatHandler = (e) => {\n                    if (html) {\n                        this.contentDiv.innerHTML = html;\n                    }\n                    else {\n                        this.contentDiv.textContent = content;\n                    }\n                    this.tooltipDiv.style.left = `${e.clientX}px`;\n                    this.tooltipDiv.style.top = `${e.clientY - 10}px`;\n                    this.applyVariant(variant);\n                    this.applyPlacement('top');\n                    this.tooltipDiv.style.opacity = '1';\n                };\n                this.floatTarget = target;\n                target.addEventListener('mousemove', this.floatHandler);\n            }\n            this.clearTimers();\n            if (delayShow > 0) {\n                this.delayTimer = setTimeout(doShow, delayShow);\n            }\n            else {\n                doShow();\n            }\n        };\n        this.hide = () => {\n            this.clearTimers();\n            this.tooltipDiv.style.opacity = '0';\n            if (this.floatTarget && this.floatHandler) {\n                this.floatTarget.removeEventListener('mousemove', this.floatHandler);\n                this.floatTarget = null;\n                this.floatHandler = null;\n            }\n        };\n        this.handleEnter = (e) => {\n            this.show(e.currentTarget);\n        };\n        this.handleLeave = () => {\n            this.hide();\n        };\n    }\n    clearTimers() {\n        if (this.delayTimer)\n            clearTimeout(this.delayTimer);\n    }\n    createTooltipDiv() {\n        const div = document.createElement('div');\n        div.role = 'tooltip';\n        div.style.cssText = `\n      position: fixed;\n      pointer-events: none;\n      z-index: 99999;\n      max-width: 25vw;\n      padding: 0.5rem 0.75rem;\n      border-radius: 0.375rem;\n      font-family: var(--font-family, 'IBM Plex Sans', sans-serif);\n      font-size: 0.8125rem;\n      line-height: 1.4;\n      white-space: nowrap;\n      opacity: 0;\n      overflow: visible;\n      transition: opacity 0.15s ease-in-out;\n      background: var(--gray-90, #222);\n      color: #fff;\n      transform: translateX(-50%) translateY(-100%);\n    `;\n        const content = document.createElement('div');\n        div.appendChild(content);\n        this.contentDiv = content;\n        const arrow = document.createElement('div');\n        arrow.style.cssText = `\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: var(--gray-90, #222);\n      transform: rotate(45deg);\n    `;\n        div.appendChild(arrow);\n        this.arrowDiv = arrow;\n        document.body.appendChild(div);\n        return div;\n    }\n    applyVariant(variant) {\n        const div = this.tooltipDiv;\n        let bg;\n        switch (variant) {\n            case 'light':\n                bg = '#fff';\n                div.style.background = bg;\n                div.style.color = 'var(--gray-90, #222)';\n                div.style.border = '1px solid var(--gray-20, #e5e7eb)';\n                div.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';\n                break;\n            case 'warning':\n                bg = 'var(--yellow-90, #78350f)';\n                div.style.background = bg;\n                div.style.color = '#fff';\n                div.style.border = 'none';\n                div.style.boxShadow = 'none';\n                break;\n            case 'error':\n                bg = 'var(--red-60, #dc2626)';\n                div.style.background = bg;\n                div.style.color = '#fff';\n                div.style.border = 'none';\n                div.style.boxShadow = 'none';\n                break;\n            case 'info':\n                bg = 'var(--blue-60, #2563eb)';\n                div.style.background = bg;\n                div.style.color = '#fff';\n                div.style.border = 'none';\n                div.style.boxShadow = 'none';\n                break;\n            default:\n                bg = 'var(--gray-90, #222)';\n                div.style.background = bg;\n                div.style.color = '#fff';\n                div.style.border = 'none';\n                div.style.boxShadow = 'none';\n        }\n        this.arrowDiv.style.background = bg;\n    }\n    applyPlacement(place) {\n        switch (place) {\n            case 'bottom':\n                this.tooltipDiv.style.transform = 'translateX(-50%)';\n                this.arrowDiv.style.top = '-4px';\n                this.arrowDiv.style.bottom = '';\n                this.arrowDiv.style.left = '50%';\n                this.arrowDiv.style.right = '';\n                this.arrowDiv.style.marginLeft = '-4px';\n                break;\n            case 'left':\n                this.tooltipDiv.style.transform = 'translateX(-100%) translateY(-50%)';\n                this.arrowDiv.style.top = '50%';\n                this.arrowDiv.style.bottom = '';\n                this.arrowDiv.style.right = '-4px';\n                this.arrowDiv.style.left = '';\n                this.arrowDiv.style.marginTop = '-4px';\n                this.arrowDiv.style.marginLeft = '';\n                break;\n            case 'right':\n                this.tooltipDiv.style.transform = 'translateY(-50%)';\n                this.arrowDiv.style.top = '50%';\n                this.arrowDiv.style.bottom = '';\n                this.arrowDiv.style.left = '-4px';\n                this.arrowDiv.style.right = '';\n                this.arrowDiv.style.marginTop = '-4px';\n                this.arrowDiv.style.marginLeft = '';\n                break;\n            default:\n                this.tooltipDiv.style.transform = 'translateX(-50%) translateY(-100%)';\n                this.arrowDiv.style.bottom = '-4px';\n                this.arrowDiv.style.top = '';\n                this.arrowDiv.style.left = '50%';\n                this.arrowDiv.style.right = '';\n                this.arrowDiv.style.marginLeft = '-4px';\n                this.arrowDiv.style.marginTop = '';\n        }\n    }\n    computePosition(rect, place) {\n        const cx = rect.left + rect.width / 2;\n        const cy = rect.top + rect.height / 2;\n        switch (place) {\n            case 'bottom': return { x: cx, y: rect.bottom + 10 };\n            case 'left': return { x: rect.left - 10, y: cy };\n            case 'right': return { x: rect.right + 10, y: cy };\n            default: return { x: cx, y: rect.top - 10 };\n        }\n    }\n    attach(el) {\n        if (this.attachedElements.has(el))\n            return;\n        this.attachedElements.add(el);\n        el.addEventListener('mouseenter', this.handleEnter);\n        el.addEventListener('mouseleave', this.handleLeave);\n    }\n    scan() {\n        const hostRoot = this.el.getRootNode();\n        const selector = `[data-tooltip-id=\"${this.tooltipId}\"]`;\n        hostRoot.querySelectorAll(selector).forEach((el) => this.attach(el));\n    }\n    componentDidLoad() {\n        this.tooltipDiv = this.createTooltipDiv();\n        this.scan();\n        const hostRoot = this.el.getRootNode();\n        const observeTarget = hostRoot === document ? document.body : hostRoot;\n        this.observer = new MutationObserver(() => this.scan());\n        this.observer.observe(observeTarget, {\n            childList: true,\n            subtree: true,\n        });\n    }\n    disconnectedCallback() {\n        var _a;\n        if (this.observer)\n            this.observer.disconnect();\n        this.clearTimers();\n        if ((_a = this.tooltipDiv) === null || _a === void 0 ? void 0 : _a.parentNode) {\n            this.tooltipDiv.parentNode.removeChild(this.tooltipDiv);\n        }\n    }\n    render() {\n        return null;\n    }\n    static get is() { return \"ls-tooltip\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get properties() {\n        return {\n            \"tooltipId\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The tooltip id to match against data-tooltip-id attributes\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": false,\n                \"attribute\": \"tooltip-id\",\n                \"defaultValue\": \"'le-tooltip'\"\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n}\n"],"names":[],"mappings":"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","x_google_ignoreList":[0]}