legalesign-document-viewer 0.3.3 → 0.3.5

package/dist/collection/components/ls-tooltip/ls-tooltip.js

@@ -1,130 +0,0 @@
-import { arrow, computePosition, flip, offset, shift } from "@floating-ui/dom";
-import { h } from "@stencil/core";
-export class LsTooltip {
-    el;
-    referenceElement;
-    placement = 'top';
-    tooltipEl;
-    tooltipLocked = false;
-    componentDidLoad() {
-        this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip');
-        const arrowElement = this.el.shadowRoot.querySelector('#arrow'); // use shadowRoot for internal elements
-        if (!this.tooltipEl || !this.referenceElement)
-            return;
-        const update = () => {
-            computePosition(this.referenceElement, this.tooltipEl, {
-                placement: this.placement,
-                middleware: [offset(6), flip(), shift({ padding: 5 }), arrow({ element: arrowElement })],
-            }).then(({ x, y, placement, middlewareData }) => {
-                Object.assign(this.tooltipEl.style, {
-                    left: `${x}px`,
-                    top: `${y}px`,
-                });
-                const { x: arrowX, y: arrowY } = middlewareData.arrow || {};
-                const staticSide = {
-                    top: 'bottom',
-                    right: 'left',
-                    bottom: 'top',
-                    left: 'right',
-                }[placement.split('-')[0]];
-                Object.assign(arrowElement.style, {
-                    left: arrowX != null ? `${arrowX}px` : '',
-                    top: arrowY != null ? `${arrowY}px` : '',
-                    right: '',
-                    bottom: '',
-                    [staticSide]: '-4px',
-                });
-            });
-        };
-        const showTooltip = () => {
-            if (this.tooltipLocked)
-                return;
-            this.tooltipEl.style.display = 'block';
-            update();
-        };
-        const hideTooltip = () => {
-            if (this.tooltipLocked)
-                return;
-            this.tooltipEl.style.display = 'none';
-        };
-        [
-            ['mouseenter', showTooltip],
-            ['mouseleave', hideTooltip],
-            ['focus', showTooltip],
-            ['blur', hideTooltip],
-        ].forEach(([event, listener]) => {
-            this.referenceElement.addEventListener(event, listener);
-        });
-        this.referenceElement.addEventListener('click', () => {
-            hideTooltip();
-            this.tooltipLocked = true;
-            setTimeout(() => {
-                this.tooltipLocked = false;
-            }, 500);
-        });
-    }
-    render() {
-        return (h("div", { key: '9daf5991d54ab56094ae8a28203d7b896ce2dd81', class: "tooltip", role: "tooltip" }, h("div", { key: 'e483907ce2f3ca0ee927f9b1fc116c3d957a575e', id: "arrow" }), h("slot", { key: '176202c5c2d38da7236e6b4519f93cf1d7cc1e87' })));
-    }
-    static get is() { return "ls-tooltip"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ls-tooltip.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ls-tooltip.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "referenceElement": {
-                "type": "unknown",
-                "attribute": "reference-element",
-                "mutable": false,
-                "complexType": {
-                    "original": "HTMLElement",
-                    "resolved": "HTMLElement",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "placement": {
-                "type": "string",
-                "attribute": "placement",
-                "mutable": false,
-                "complexType": {
-                    "original": "'top' | 'bottom' | 'left' | 'right'",
-                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'top'"
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=ls-tooltip.js.map

package/dist/collection/components/ls-tooltip/ls-tooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ls-tooltip.js","sourceRoot":"","sources":["../../../src/components/ls-tooltip/ls-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO5D,MAAM,OAAO,SAAS;IACT,EAAE,CAAc;IACnB,gBAAgB,CAAc;IAC9B,SAAS,GAAwC,KAAK,CAAC;IAEvD,SAAS,CAAc;IACvB,aAAa,GAAG,KAAK,CAAC;IAE9B,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAC9D,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,uCAAuC;QAExG,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAEtD,MAAM,MAAM,GAAG,GAAG,EAAE;YAClB,eAAe,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,SAAS,EAAE;gBACrD,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,UAAU,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC;aACzF,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE;gBAC9C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;oBAClC,IAAI,EAAE,GAAG,CAAC,IAAI;oBACd,GAAG,EAAE,GAAG,CAAC,IAAI;iBACd,CAAC,CAAC;gBAEH,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,KAAK,IAAI,EAAE,CAAC;gBAC5D,MAAM,UAAU,GAAG;oBACjB,GAAG,EAAE,QAAQ;oBACb,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,KAAK;oBACb,IAAI,EAAE,OAAO;iBACd,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAE3B,MAAM,CAAC,MAAM,CAAE,YAA4B,CAAC,KAAK,EAAE;oBACjD,IAAI,EAAE,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,EAAE;oBACzC,GAAG,EAAE,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,EAAE;oBACxC,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,EAAE;oBACV,CAAC,UAAU,CAAC,EAAE,MAAM;iBACrB,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,IAAI,IAAI,CAAC,aAAa;gBAAE,OAAO;YAC/B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;YACvC,MAAM,EAAE,CAAC;QACX,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,IAAI,IAAI,CAAC,aAAa;gBAAE,OAAO;YAC/B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACxC,CAAC,CAAC;QAEF;YACE,CAAC,YAAY,EAAE,WAAW,CAAC;YAC3B,CAAC,YAAY,EAAE,WAAW,CAAC;YAC3B,CAAC,OAAO,EAAE,WAAW,CAAC;YACtB,CAAC,MAAM,EAAE,WAAW,CAAC;SACtB,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE,EAAE;YAC9B,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,KAAe,EAAE,QAAyB,CAAC,CAAC;QACrF,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YACnD,WAAW,EAAE,CAAC;YACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC7B,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;YACjC,4DAAK,EAAE,EAAC,OAAO,GAAO;YACtB,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, Element, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-tooltip',\n  styleUrl: 'ls-tooltip.css',\n  shadow: true,\n})\nexport class LsTooltip {\n  @Element() el: HTMLElement;\n  @Prop() referenceElement: HTMLElement;\n  @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n\n  private tooltipEl: HTMLElement;\n  private tooltipLocked = false;\n\n  componentDidLoad() {\n    this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip');\n    const arrowElement = this.el.shadowRoot.querySelector('#arrow'); // use shadowRoot for internal elements\n\n    if (!this.tooltipEl || !this.referenceElement) return;\n\n    const update = () => {\n      computePosition(this.referenceElement, this.tooltipEl, {\n        placement: this.placement,\n        middleware: [offset(6), flip(), shift({ padding: 5 }), arrow({ element: arrowElement })],\n      }).then(({ x, y, placement, middlewareData }) => {\n        Object.assign(this.tooltipEl.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        });\n\n        const { x: arrowX, y: arrowY } = middlewareData.arrow || {};\n        const staticSide = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        Object.assign((arrowElement as HTMLElement).style, {\n          left: arrowX != null ? `${arrowX}px` : '',\n          top: arrowY != null ? `${arrowY}px` : '',\n          right: '',\n          bottom: '',\n          [staticSide]: '-4px',\n        });\n      });\n    };\n\n    const showTooltip = () => {\n      if (this.tooltipLocked) return;\n      this.tooltipEl.style.display = 'block';\n      update();\n    };\n\n    const hideTooltip = () => {\n      if (this.tooltipLocked) return;\n      this.tooltipEl.style.display = 'none';\n    };\n\n    [\n      ['mouseenter', showTooltip],\n      ['mouseleave', hideTooltip],\n      ['focus', showTooltip],\n      ['blur', hideTooltip],\n    ].forEach(([event, listener]) => {\n      this.referenceElement.addEventListener(event as string, listener as EventListener);\n    });\n    this.referenceElement.addEventListener('click', () => {\n      hideTooltip();\n      this.tooltipLocked = true;\n      setTimeout(() => {\n        this.tooltipLocked = false;\n      }, 500);\n    });\n  }\n\n  render() {\n    return (\n      <div class=\"tooltip\" role=\"tooltip\">\n        <div id=\"arrow\"></div>\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-validation-tag/ls-validation-tag.css

@@ -1,143 +0,0 @@
-:host {
-  position: relative;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-}
-
-.valid-label {
-  display: flex;
-  padding: 2px 0.5rem;
-  justify-content: center;
-  align-items: center;
-  gap: 0.25rem;
-  border-radius: 1rem;
-  font-size: 0.75rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 1.25rem; /* 142.857% */
-  width: fit-content;
-}
-
-.valid {
-  background-color: var(--green-30, #9df5d4);
-  color: var(--green-100, #125241);
-}
-
-.invalid {
-  background: var(--yellow-20, #fff3c2);
-  color: var(--yellow-90, #8a3f0e);
-}
-
-.field-counter {
-  display: flex;
-  padding: 0.125rem;
-  justify-content: center;
-  align-items: center;
-  border-radius: 1rem;
-  font-size: 0.625rem;
-  line-height: 0.75rem;
-  font-style: normal;
-  font-weight: 500;
-  color: var(--yellow-20, #fff3c2);
-  background: #e17100;
-  min-width: 1rem;
-}
-
-.field-dropdown {
-  position: absolute;
-  top: 2rem;
-  right: 0;
-  background: white;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  width: 20rem;
-  padding: 1rem;
-  border-radius: 1rem;
-  border: 1px solid #e5e7eb;
-  background: #fff;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-  max-height: 20rem;
-  overflow-y: auto;
-  flex-direction: column;
-  align-items: flex-start;
-  z-index: 1000;
-}
-
-.required-field {
-  position: relative;
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
-  border-radius: 0.75rem;
-  padding: 0.5rem 0.5rem 0.5rem 1rem;
-  background: var(--field-background);
-  color: var(--field-text-color);
-  border: 1px solid var(--field-border-color);
-  transition: all 0.1s ease-in-out;
-}
-
-.required-field:hover {
-  background: var(--field-background-hover);
-  color: var(--field-text-color-hover);
-  border: 1px solid var(--field-border-color-hover);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-
-.required-field-items-left {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  width: 100%;
-}
-
-.required-field-items-left p {
-  font-size: 0.875rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 0.875rem; /* 142.857% */
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dot {
-  height: 0.5rem;
-  width: 0.5rem;
-  border-radius: 50%;
-}
-
-.role-label {
-  display: flex;
-  padding: 2px 3px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1rem; /* 133.333% */
-  text-transform: capitalize;
-}
-
-.dropdown-header h2 {
-  color: var(--gray-100, #45484d);
-  font-size: 0.875rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 1.25rem; /* 142.857% */
-  margin-bottom: 0.125rem;
-}
-
-.dropdown-header p {
-  color: var(--gray-80, #6c6e73);
-  font-size: 0.75rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1rem; /* 133.333% */
-}

package/dist/collection/components/ls-validation-tag/ls-validation-tag.js

@@ -1,112 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
-export class LsValidationTag {
-    status = 'Invalid';
-    validationErrors = [];
-    isExpanded = false;
-    validateChange(newValue) {
-        console.log(newValue);
-    }
-    render() {
-        return (h(Host, { key: '81f7243eb9ac2099bac672ce98f26e4da6bb8fed' }, h("div", { key: '33e7174b2032cc6282f84b26a4f943e1baac6dd9', class: `valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`, onClick: this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`, this.validationErrors.length > 0 && h("div", { key: '6b820c6a30a090d656c5a6a06b66c8c3cda8fa2c', class: 'field-counter' }, this.validationErrors.length), this.validationErrors.length > 0 && (h("ls-icon", { key: 'b4404382dea2c84c042dd1b330b2f0be823b643e', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } }))), this.isExpanded && this.validationErrors.length !== 0 && (h("div", { key: 'eca209963d0acadbef0764909f15bb4a0350f4c6', class: 'field-dropdown' }, h("div", { key: '5a57240e85f7826049b12bda0f2cbfc72599c6b9', class: 'dropdown-header' }, h("h2", { key: '34bb3c2fac8a092cc424a4ebdce49137d6dcd384' }, "Signature Fields Required"), h("p", { key: 'cedda6d0383cd029efdd33fa7edfcd22c0cf65e2' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => {
-            const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
-            const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];
-            return (h("div", { key: idx, class: 'required-field', style: {
-                    '--field-background': pallette.s10,
-                    '--field-border-color': pallette.s10,
-                    '--field-background-hover': pallette.s20,
-                    '--field-text-color': pallette.s70,
-                    '--field-text-color-hover': pallette.s80,
-                    '--field-border-color-hover': pallette.s60,
-                } }, h("div", { class: 'required-field-items-left' }, h("div", { class: 'dot', style: { background: pallette.s60 } }), field?.role && (h("div", { class: 'required-field-items-left' }, h("p", { style: { color: pallette.s80 } }, field.role?.name || `Signer ${field?.role?.signerIndex + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`))), field?.element && (h(h.Fragment, null, h("p", { style: { color: pallette.s80 } }, field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.description))))));
-        })))));
-    }
-    static get is() { return "ls-validation-tag"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ls-validation-tag.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ls-validation-tag.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "status": {
-                "type": "string",
-                "attribute": "status",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'Invalid'"
-            },
-            "validationErrors": {
-                "type": "unknown",
-                "attribute": "validation-errors",
-                "mutable": true,
-                "complexType": {
-                    "original": "ValidationError[]",
-                    "resolved": "ValidationError[]",
-                    "references": {
-                        "ValidationError": {
-                            "location": "import",
-                            "path": "../../types/ValidationError",
-                            "id": "src/types/ValidationError.ts::ValidationError"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "isExpanded": {
-                "type": "boolean",
-                "attribute": "is-expanded",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get watchers() {
-        return [{
-                "propName": "validationErrors",
-                "methodName": "validateChange"
-            }];
-    }
-}
-//# sourceMappingURL=ls-validation-tag.js.map

package/dist/collection/components/ls-validation-tag/ls-validation-tag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ls-validation-tag.js","sourceRoot":"","sources":["../../../src/components/ls-validation-tag/ls-validation-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Watch, h } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { ValidationError } from '../../types/ValidationError';\n\n@Component({\n  tag: 'ls-validation-tag',\n  styleUrl: 'ls-validation-tag.css',\n  shadow: true,\n})\nexport class LsValidationTag {\n  @Prop({ mutable: true }) status: string = 'Invalid';\n  @Prop({ mutable: true }) validationErrors: ValidationError[] = [];\n  @Prop({ mutable: true }) isExpanded: boolean = false;\n\n    @Watch('validationErrors')\n  validateChange(newValue: ValidationError[]) {\n    console.log(newValue);  \n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`}\n          onClick={this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded))}\n        >\n          {this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`}\n          {this.validationErrors.length > 0 && <div class={'field-counter'}>{this.validationErrors.length}</div>}\n          {this.validationErrors.length > 0 && (\n            <ls-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'} style={{ cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' }} />\n          )}\n        </div>\n        {this.isExpanded && this.validationErrors.length !== 0 && (\n          <div class={'field-dropdown'}>\n            <div class={'dropdown-header'}>\n              <h2>Signature Fields Required</h2>\n              <p>\n                {this.validationErrors.length} {this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields'} placed for them\n              </p>\n            </div>\n            {this.validationErrors.map((field, idx) => {\n              const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n              const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n\n              return (\n                <div\n                  key={idx}\n                  class={'required-field'}\n                  style={{\n                    '--field-background': pallette.s10,\n                    '--field-border-color': pallette.s10,\n                    '--field-background-hover': pallette.s20,\n                    '--field-text-color': pallette.s70,\n                    '--field-text-color-hover': pallette.s80,\n                    '--field-border-color-hover': pallette.s60,\n                  }}\n                >\n                  <div class={'required-field-items-left'}>\n                    <div class={'dot'} style={{ background: pallette.s60 }} />\n                    {field?.role && (\n                      <div class={'required-field-items-left'}>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `Signer ${field?.role?.signerIndex + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`}\n                        </div>\n                      </div>\n                    )}\n                    {field?.element && (\n                      <>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.description}\n                        </div>\n                      </>\n                    )}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/index.js

@@ -1,11 +0,0 @@
-/**
- * @fileoverview entry point for your component library
- *
- * This is the entry point for your component library. Use this file to export utilities,
- * constants or data structure that accompany your components.
- *
- * DO NOT use this file to export your components. Instead, use the recommended approaches
- * to consume components of this package as outlined in the `README.md`.
- */
-export { format } from './utils/utils';
-//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport { format } from './utils/utils';\nexport type * from './components.d.ts';\n"]}