npm - legalesign-document-viewer - Versions diffs - 0.4.6 → 0.4.8 - Mend

legalesign-document-viewer 0.4.6 → 0.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (280) hide show

package/dist/collection/components/ls-participant-select/ls-participant-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ls-participant-select.js","sourceRoot":"","sources":["../../../src/components/ls-participant-select/ls-participant-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\nimport { LSApiRole, LSApiRoleType } from '../../types/LSApiRole';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-participant-select',\n styleUrl: 'ls-participant-select.css',\n shadow: true,\n})\nexport class LsParticipantSelect {\n /*\n The id of the currently selected role.\n * {string}\n /\n @Prop({ mutable: true}) selected: string;\n \n /\n The currently selected role.\n * {number}\n /\n @State() selectedRole: { signerIndex: number; name: string; roleType?: string; default: boolean } = { signerIndex: 0, name: 'Sender', roleType: 'SENDER', default: true };\n\n @Watch('roles')\n handleRoleLoad() {\n if(this.selectedRole.default) {\n if(this.roles.length > 0) {\n const initialRole = this.roles.find(r => r.signerIndex === 1);\n if(initialRole) {\n this.selectedRole = { ...initialRole, default: false };\n }\n }\n } else {\n const updatedRole = this.roles.find(r => r.signerIndex === this.selectedRole.signerIndex);\n if(updatedRole) {\n this.selectedRole = { ...updatedRole, default: false };\n }\n }\n }\n /\n The current template roles.\n * {LSApiRole}\n */\n @Prop() roles?: LSApiRole[] = [];\n\n @State() isOpen: boolean = false;\n\n\n toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n };\n\n @Event() roleChange: EventEmitter<number>;\n\n @Event({\n bubbles: true,\n composed: true,\n }) addParticipant: EventEmitter<{type: LSApiRoleType, parent?: string \| null}>;\n\n\n selectRole(role: { signerIndex: number; name: string; roleType?: string }) {\n this.selectedRole = { ...role, default: false };\n this.isOpen = false;\n this.roleChange.emit(role.signerIndex);\n }\n\n createHandler() {\n this.addParticipant.emit({type: 'SIGNER'});\n }\n\n render() {\n return (\n <Host>\n <div class=\"dropdown\">\n <div class=\"dropdown-header\" onClick={this.toggleDropdown}>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" />\n <path\n 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\"\n fill=\"#46DBAA\"\n stroke=\"#F7F8FA\"\n />\n <path\n 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\"\n fill=\"#FAD232\"\n stroke=\"#F7F8FA\"\n />\n <path\n d=\"M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75\"\n stroke=\"#939599\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <p class={'placing-fields-text'}>Placing Fields for</p>\n <div\n class={'selected-role-label'}\n style={{\n background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,\n color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,\n }}\n >\n <ls-icon\n size=\"18\"\n name={\n this.selectedRole?.roleType === 'SENDER'\n ? 'user'\n : this.selectedRole?.roleType === 'APPROVER'\n ? 'check-circle'\n : this.selectedRole?.roleType === 'WITNESS'\n ? 'eye'\n : 'signature'\n }\n />\n {this.selectedRole.name \|\|\n (this.selectedRole.roleType === 'WITNESS' ? `Witness` : `Participant ${this.selectedRole.signerIndex}`)}\n </div>\n <button class={'tertiaryGrey expand-button'} aria-haspopup=\"listbox\" aria-expanded={this.isOpen}>\n <ls-icon name=\"chevron-down\"></ls-icon>\n </button>\n </div>\n {this.isOpen && (\n <div class=\"dropdown-list\">\n \n <div\n class={this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item'}\n style={{\n '--background-selected': defaultRolePalette[0].s10,\n '--check-icon-selected': defaultRolePalette[0].s50,\n }}\n onClick={() => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' })}\n onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', 'check-circle')}\n onMouseLeave={e =>\n (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle')\n }\n >\n <div\n class={'role-icon'}\n style={{\n background: defaultRolePalette[0].s50,\n color: defaultRolePalette[0].s80,\n }}\n >\n <ls-icon name=\"user\" />\n </div>\n <div class={'role-text'}>\n <p\n class={'role-name'}\n style={{\n '--role-name-selected': defaultRolePalette[0].s80,\n }}\n >\n {'Sender'}\n </p>\n <p\n class={'role-type'}\n style={{\n '--role-type-selected': defaultRolePalette[0].s80,\n }}\n >\n You\n </p>\n </div>\n\n <ls-icon class={'check-icon'} name={this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle'} solid={this.selectedRole?.signerIndex === 0} />\n </div>\n {this.roles.map(r => (\n <div\n class={r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item'}\n style={{\n '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,\n '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,\n }}\n onClick={() => this.selectRole(r)}\n onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', 'check-circle')}\n onMouseLeave={e =>\n (e.currentTarget as HTMLElement)\n .querySelector('.check-icon')\n ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle')\n }\n >\n <div\n class={'role-icon'}\n style={{\n background: r.signerIndex > 100 ? defaultRolePalette[r?.signerIndex % 100].s30 : defaultRolePalette[r?.signerIndex % 100].s40,\n color: defaultRolePalette[r?.signerIndex % 100].s90,\n }}\n >\n <ls-icon name={r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature'} />\n </div>\n <div class={'role-text'}>\n <p\n class={'role-name'}\n style={{\n '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,\n }}\n >\n {r.name \|\| (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)}\n </p>\n <p\n class={'role-type'}\n style={{\n '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,\n }}\n >\n {r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer'}\n </p>\n </div>\n <ls-icon\n class={'check-icon'}\n name={r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle'}\n solid={r.signerIndex === this.selectedRole?.signerIndex}\n />\n </div>\n ))}\n <button\n onClick={() => this.createHandler()}\n class={'add-participant-row'}\n style={{\n '--background-selected': defaultRolePalette[1].s10,\n '--check-icon-selected': defaultRolePalette[1].s50,\n }}\n >\n <div\n class={'add-participant-icon'}\n >\n <ls-icon name=\"user-add\" />\n </div>\n <div class={'role-text'}>\n <p class={'role-name'}>Add Participant</p>\n <p class={'role-type'}>Add a new Signer</p>\n </div>\n <ls-icon class={'plus-icon'} name=\"plus\" />\n </button>\n </div>\n )}\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ls-participant-select.js","sourceRoot":"","sources":["../../../src/components/ls-participant-select/ls-participant-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\nimport { LSApiRole, LSApiRoleType } from '../../types/LSApiRole';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-participant-select',\n styleUrl: 'ls-participant-select.css',\n shadow: true,\n})\nexport class LsParticipantSelect {\n /*\n The id of the currently selected role.\n * {string}\n /\n @Prop({ mutable: true}) selected: string;\n \n /\n The currently selected role.\n * {number}\n /\n @State() selectedRole: { signerIndex: number; name: string; roleType?: string; default: boolean } = { signerIndex: 0, name: 'Sender', roleType: 'SENDER', default: true };\n\n @Watch('roles')\n handleRoleLoad() {\n if(this.selectedRole.default) {\n if(this.roles.length > 0) {\n const initialRole = this.roles.find(r => r.signerIndex === 1);\n if(initialRole) {\n this.selectedRole = { ...initialRole, default: false };\n }\n }\n } else {\n const updatedRole = this.roles.find(r => r.signerIndex === this.selectedRole.signerIndex);\n if(updatedRole) {\n this.selectedRole = { ...updatedRole, default: false };\n }\n }\n }\n /\n The current template roles.\n * {LSApiRole}\n */\n @Prop() roles?: LSApiRole[] = [];\n\n @State() isOpen: boolean = false;\n\n\n toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n };\n\n @Event() roleChange: EventEmitter<number>;\n\n @Event({\n bubbles: true,\n composed: true,\n }) addParticipant: EventEmitter<{type: LSApiRoleType, parent?: string \| null}>;\n\n\n selectRole(role: { signerIndex: number; name: string; roleType?: string }) {\n this.selectedRole = { ...role, default: false };\n this.isOpen = false;\n this.roleChange.emit(role.signerIndex);\n }\n\n createHandler() {\n this.addParticipant.emit({type: 'SIGNER'});\n }\n\n render() {\n return (\n <Host>\n <div class=\"dropdown\">\n <div class=\"dropdown-header\" onClick={this.toggleDropdown}>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" />\n <path\n 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\"\n fill=\"#46DBAA\"\n stroke=\"#F7F8FA\"\n />\n <path\n 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\"\n fill=\"#FAD232\"\n stroke=\"#F7F8FA\"\n />\n <path\n d=\"M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75\"\n stroke=\"#939599\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <p class={'placing-fields-text'}>Placing Fields for</p>\n <div\n class={'selected-role-label'}\n style={{\n background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,\n color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,\n }}\n >\n <ls-icon\n size=\"1.125rem\"\n name={\n this.selectedRole?.roleType === 'SENDER'\n ? 'user'\n : this.selectedRole?.roleType === 'APPROVER'\n ? 'check-circle'\n : this.selectedRole?.roleType === 'WITNESS'\n ? 'eye'\n : 'signature'\n }\n />\n {this.selectedRole.name \|\|\n (this.selectedRole.roleType === 'WITNESS' ? `Witness` : `Participant ${this.selectedRole.signerIndex}`)}\n </div>\n <button class={'tertiaryGrey expand-button'} aria-haspopup=\"listbox\" aria-expanded={this.isOpen}>\n <ls-icon name=\"chevron-down\"></ls-icon>\n </button>\n </div>\n {this.isOpen && (\n <div class=\"dropdown-list\">\n \n <div\n class={this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item'}\n style={{\n '--background-selected': defaultRolePalette[0].s10,\n '--check-icon-selected': defaultRolePalette[0].s50,\n }}\n onClick={() => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' })}\n onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', 'check-circle')}\n onMouseLeave={e =>\n (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle')\n }\n >\n <div\n class={'role-icon'}\n style={{\n background: defaultRolePalette[0].s50,\n color: defaultRolePalette[0].s80,\n }}\n >\n <ls-icon name=\"user\" />\n </div>\n <div class={'role-text'}>\n <p\n class={'role-name'}\n style={{\n '--role-name-selected': defaultRolePalette[0].s80,\n }}\n >\n {'Sender'}\n </p>\n <p\n class={'role-type'}\n style={{\n '--role-type-selected': defaultRolePalette[0].s80,\n }}\n >\n You\n </p>\n </div>\n\n <ls-icon class={'check-icon'} name={this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle'} solid={this.selectedRole?.signerIndex === 0} />\n </div>\n {this.roles.map(r => (\n <div\n class={r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item'}\n style={{\n '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,\n '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,\n }}\n onClick={() => this.selectRole(r)}\n onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', 'check-circle')}\n onMouseLeave={e =>\n (e.currentTarget as HTMLElement)\n .querySelector('.check-icon')\n ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle')\n }\n >\n <div\n class={'role-icon'}\n style={{\n background: r.signerIndex > 100 ? defaultRolePalette[r?.signerIndex % 100].s30 : defaultRolePalette[r?.signerIndex % 100].s40,\n color: defaultRolePalette[r?.signerIndex % 100].s90,\n }}\n >\n <ls-icon name={r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature'} />\n </div>\n <div class={'role-text'}>\n <p\n class={'role-name'}\n style={{\n '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,\n }}\n >\n {r.name \|\| (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)}\n </p>\n <p\n class={'role-type'}\n style={{\n '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,\n }}\n >\n {r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer'}\n </p>\n </div>\n <ls-icon\n class={'check-icon'}\n name={r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle'}\n solid={r.signerIndex === this.selectedRole?.signerIndex}\n />\n </div>\n ))}\n <button\n onClick={() => this.createHandler()}\n class={'add-participant-row'}\n style={{\n '--background-selected': defaultRolePalette[1].s10,\n '--check-icon-selected': defaultRolePalette[1].s50,\n }}\n >\n <div\n class={'add-participant-icon'}\n >\n <ls-icon name=\"user-add\" />\n </div>\n <div class={'role-text'}>\n <p class={'role-name'}>Add Participant</p>\n <p class={'role-type'}>Add a new Signer</p>\n </div>\n <ls-icon class={'plus-icon'} name=\"plus\" />\n </button>\n </div>\n )}\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ls-recipient-card/ls-recipient-card.css CHANGED Viewed

@@ -14,7 +14,7 @@
   align-items: flex-start;
   gap: 0.5rem;
   align-self: stretch;
-  max-height: 100px;
+  max-height: 6.25rem;
   transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
   transform-origin: top;
@@ -28,7 +28,7 @@
 }
 .participant-card.expanded {
-  max-height: 2000px; /* large enough for any content */
+  max-height: 125rem; /* large enough for any content */
 }
 .dot {
@@ -180,7 +180,7 @@ a:hover {
 select {
   appearance: none;
-  height: 36px;
+  height: 2.25rem;
   width: 100%;
 }

package/dist/collection/components/ls-recipient-card/ls-recipient-card.js CHANGED Viewed

@@ -55,12 +55,12 @@ export class LsRecipientCard {
         }
         else {
             // Collapse
-            this.cardRef.style.maxHeight = '96px';
+            this.cardRef.style.maxHeight = '6rem';
         }
     }
     componentDidLoad() {
         const isActive = this.activeRecipient === this.recipient.signerIndex;
-        this.cardRef.style.maxHeight = isActive ? this.cardRef.scrollHeight + 'px' : '96px';
+        this.cardRef.style.maxHeight = isActive ? this.cardRef.scrollHeight + 'px' : '6rem';
     }
     render() {
         const recipientFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.recipient.signerIndex) || [];
@@ -80,11 +80,11 @@ export class LsRecipientCard {
             } }, h("div", { key: 'ee10c615fc5de2c2b438763b258469102f547ece', class: 'participant-card-inner' }, h("div", { key: '63a3c7940d80ba6327ac8772787ac4d87087441c', class: 'participant-card-top-items' }, h("div", { key: '2ff71e60be37836581f9a19f336567e89489aacd', class: 'role-label', style: {
                 background: defaultRolePalette[this.recipient?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.recipient?.signerIndex % 100].s90,
-            } }, h("ls-icon", { key: '1d9017abf990e181fb7eb0481f9e4287d8a89703', name: this.recipient?.roleType === 'APPROVER' ? 'check-circle' : this.recipient?.roleType === 'WITNESS' ? 'eye' : 'signature' }), this.recipient?.roleType || 'Signer'), h("ls-icon", { key: '28f04b755f00dd7ce2d3d6b2c73947aabd6f5a24', name: "cursor-click", size: "16", customStyle: { color: defaultRolePalette[this.recipient?.signerIndex % 100].s70 }, solid: true, style: { display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? 'block' : 'none' } }), h("div", { key: '17ac7609fe2c48bcc4eea8f88f1e9b197af59ed0', class: "dot", style: { display: (!this.isHovered || this.recipient.signerIndex === this.activeRecipient) && recipientSignatures.length === 0 ? 'block' : 'none' } })), h("div", { key: '5259283b4a7ac86f616bea5eaf47c637ca5e73be', class: 'participant-card-text' }, h("p", { key: 'd81fd2e7cf9e1e789b69f3d7ca3c17ae7e71bc0f', class: "participant-text-description", style: {
+            } }, h("ls-icon", { key: 'a3166dc0869f0e80cd7760df4a8affaf159d930d', name: this.recipient?.roleType === 'APPROVER' ? 'check-circle' : this.recipient?.roleType === 'WITNESS' ? 'eye' : 'signature', size: '1rem' }), this.recipient?.roleType || 'Signer'), h("ls-icon", { key: '538560a7210cc2bc808a052c92604926b713c589', name: "cursor-click", size: "1rem", customStyle: { color: defaultRolePalette[this.recipient?.signerIndex % 100].s70 }, solid: true, style: { display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? 'block' : 'none' } }), h("div", { key: '9cfa1fc270c0b317aff093dba3703af201afe249', class: "dot", style: { display: (!this.isHovered || this.recipient.signerIndex === this.activeRecipient) && recipientSignatures.length === 0 ? 'block' : 'none' } })), h("div", { key: '50e9dfee3480213b8dac424d824e2e9da45e91c3', class: 'participant-card-text' }, h("p", { key: '82359c07689d75b03c1093acb33f152197a08c31', class: "participant-text-description", style: {
                 color: defaultRolePalette[this.recipient?.signerIndex % 100].s100,
-            } }, this.recipient?.firstname + ' ' + this.recipient?.lastname), h("p", { key: '6bede06a967317c9c9b3e0c044069ed3030cc465', class: "participant-text-type", style: {
+            } }, this.recipient?.firstname + ' ' + this.recipient?.lastname), h("p", { key: '7626ea4908b8265cf9863515aa022a617d0ffeda', class: "participant-text-type", style: {
                 color: defaultRolePalette[this.recipient?.signerIndex % 100].s80,
-            } }, this.recipient.email)), h("div", { key: '3b0823766ff4eab8a79c64153aced7afe6354fcd', class: "fields-box", style: { display: this.recipient.signerIndex === this.activeRecipient ? 'flex' : 'hidden' } }, this.recipient.signerIndex > 0 && this.showTool('signature') && (h("ls-toolbox-field", { key: '68a462523309baf6463617cb838d9dd9afbb9283', elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", tooltip: "Use this field to collect Signatures from Participants", signer: this.recipient.signerIndex, redDot: recipientSignatures.length === 0 })), this.recipient.signerIndex === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { key: 'd6d7406d435f6db64db7a856c89c6a7f4ec4be6d', elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", tooltip: "Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending", signer: this.recipient.signerIndex })), this.showTool('text') && (h("ls-toolbox-field", { key: '66217bfbac4b9bdaa781a26761072d451cf67c57', elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", tooltip: "A field for collecting any plain text values such as: names, addresses or descriptions", signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('signing date') && (h("ls-toolbox-field", { key: '854a3813508fb7f6bdfa55670609052b4a183800', elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", tooltip: "Automatically inserts the date upon completion by the assigned Participant", signer: this.recipient.signerIndex })), this.showTool('date') && (h("ls-toolbox-field", { key: '05d3117fd3dc160fb1ef3f44775eea519d34b400', elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", tooltip: "A field for collecting dates with built-in date formatting options", signer: this.recipient.signerIndex })), this.showTool('email') && (h("ls-toolbox-field", { key: '05c119fc4bc5a76f0803064aeed60e563099c381', elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", tooltip: "A Field to only accept entries formatted as an email address (e.g., example@example.com)", signer: this.recipient.signerIndex })), this.showTool('initials') && (h("ls-toolbox-field", { key: '6c1a195fbee0725c86bb979ecf7c0ea50ff1853d', elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", tooltip: "Use this field anywhere Participants are required to Initial your document", signer: this.recipient.signerIndex })), this.showTool('number') && (h("ls-toolbox-field", { key: '0ce8e9937c16e86340e0f59b497c0bb9c97dc98f', elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", tooltip: "A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)", signer: this.recipient.signerIndex })), this.showTool('dropdown') && (h("ls-toolbox-field", { key: '7641ce8f738b3f35796e1d9187dbac1010ebc60d', elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "dropdown", tooltip: "Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes", signer: this.recipient.signerIndex })), this.showTool('checkbox') && (h("ls-toolbox-field", { key: 'f13fdcedbafd7cccd447016d4bcc1b9060b24331', elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", tooltip: "Places a checkbox on your document. Handy for T&Cs or  \u2714/\u2717 sections", signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('regex') && (h("ls-toolbox-field", { key: '1487f8ab3e44f453afcabd93069b72ca61370c3a', elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", tooltip: "Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need", signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('image') && (h("ls-toolbox-field", { key: '7085a45d4a7fa4a59622b9f1c24dae2dac629651', elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", tooltip: "Use when you need Participants to upload their own images during the signing process", signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('file') && (h("ls-toolbox-field", { key: '4b726e38bc88a0454e3485cdee5cd8e625a3283f', elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", tooltip: "Use when you need Participants to upload their own documents during the signing process", signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('drawn') && (h("ls-toolbox-field", { key: '49aa2607cfcd5ff00d99ebf5cc0853513702010c', elementType: "drawn", formElementType: "drawn", label: "Drawn", defaultHeight: 120, defaultWidth: 120, validation: 90, icon: "pencil", tooltip: "Allow users to draw on the document using their mouse or touchscreen", signer: this.recipient.signerIndex }))))), h("slot", { key: 'e1bd76d9e08b0e2673907664fc199c081ec8b33c' }), h("ls-tooltip", { key: 'faed848d927f5715be150c0803b5b1fd49c34739', id: "ls-tooltip-master" })));
+            } }, this.recipient.email)), h("div", { key: 'ad48ea0ced45aff786e3c4ebf09ff4fb5c139a70', class: "fields-box", style: { display: this.recipient.signerIndex === this.activeRecipient ? 'flex' : 'hidden' } }, this.recipient.signerIndex > 0 && this.showTool('signature') && (h("ls-toolbox-field", { key: 'a157117b363235f63c4aeeec6f53a61debabf4b5', elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", tooltip: "Use this field to collect Signatures from Participants", signer: this.recipient.signerIndex, redDot: recipientSignatures.length === 0 })), this.recipient.signerIndex === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { key: 'c35835b44207036f86711f21970297393e0592c7', elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", tooltip: "Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending", signer: this.recipient.signerIndex })), this.showTool('text') && (h("ls-toolbox-field", { key: 'b4e61285e20b00e9e30caed38eb69fb18ec54b13', elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", tooltip: "A field for collecting any plain text values such as: names, addresses or descriptions", signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('signing date') && (h("ls-toolbox-field", { key: '948d200b0ec0b64424d7a2f87b0c3ca84d660f08', elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", tooltip: "Automatically inserts the date upon completion by the assigned Participant", signer: this.recipient.signerIndex })), this.showTool('date') && (h("ls-toolbox-field", { key: 'd5ca66a12059af8d07b2fdcf1e26cdab4b5594b0', elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", tooltip: "A field for collecting dates with built-in date formatting options", signer: this.recipient.signerIndex })), this.showTool('email') && (h("ls-toolbox-field", { key: '1b6dc3da6e12d85743bdafc70c0eac7a9daff307', elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", tooltip: "A Field to only accept entries formatted as an email address (e.g., example@example.com)", signer: this.recipient.signerIndex })), this.showTool('initials') && (h("ls-toolbox-field", { key: '75fa5155a14c7d1bac867d5fc866e5a9eb73e0fa', elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", tooltip: "Use this field anywhere Participants are required to Initial your document", signer: this.recipient.signerIndex })), this.showTool('number') && (h("ls-toolbox-field", { key: '92f677423aa7ddd9916e8ec26699a3a37e9418cc', elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", tooltip: "A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)", signer: this.recipient.signerIndex })), this.showTool('dropdown') && (h("ls-toolbox-field", { key: '90f8fca76bc2e209ea79bf7aa3ddcad9ff5d0e81', elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "dropdown", tooltip: "Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes", signer: this.recipient.signerIndex })), this.showTool('checkbox') && (h("ls-toolbox-field", { key: '5c00b34d43d9fb59ea8cc02ef07c4206a84252ca', elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", tooltip: "Places a checkbox on your document. Handy for T&Cs or  \u2714/\u2717 sections", signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('regex') && (h("ls-toolbox-field", { key: '8ef093fcd41fb60b5adb579d1be25917747638b1', elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", tooltip: "Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need", signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('image') && (h("ls-toolbox-field", { key: 'c6d8ece08563f7cf7165d7e524dcd0fb040f6ccb', elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", tooltip: "Use when you need Participants to upload their own images during the signing process", signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('file') && (h("ls-toolbox-field", { key: '17771c03e7d35384312cc5a21541bec709121836', elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", tooltip: "Use when you need Participants to upload their own documents during the signing process", signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('drawn') && (h("ls-toolbox-field", { key: '310aa9610a5e6f950de3e41a1efc42cb62f9cffe', elementType: "drawn", formElementType: "drawn", label: "Drawn", defaultHeight: 120, defaultWidth: 120, validation: 90, icon: "pencil", tooltip: "Allow users to draw on the document using their mouse or touchscreen", signer: this.recipient.signerIndex }))))), h("slot", { key: '0b42e749e43c6bf2d88cc1528ef9467ccfd4fce8' }), h("ls-tooltip", { key: '29610e97a48eab7813d122ffd3b3261d9d467660', id: "ls-tooltip-master" })));
     }
     static get is() { return "ls-recipient-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-recipient-card/ls-recipient-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ls-recipient-card.js","sourceRoot":"","sources":["../../../src/components/ls-recipient-card/ls-recipient-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State, Listen, Element, Watch } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { LSApiRecipient } from '../../types/LSApiRecipient';\nimport { LSApiTemplate } from '../../components';\nimport { ValidationError } from '../../types/ValidationError';\nimport { IToolboxField } from '../interfaces/IToolboxField';\n\n@Component({\n tag: 'ls-recipient-card',\n styleUrl: 'ls-recipient-card.css',\n shadow: true,\n})\nexport class LsRecipientCard {\n @Element() component: HTMLElement;\n /*\n The initial template data, including the link for background PDF. See README and\n * example for correct GraphQL query and data structure.\n * {LSApiTemplate}\n /\n @Prop() recipient: LSApiRecipient;\n @Prop() activeRecipient: number;\n @Prop() fieldTypeSelected: IToolboxField = {\n label: 'Signature',\n formElementType: 'signature',\n elementType: 'signature',\n validation: 0,\n defaultHeight: 27,\n defaultWidth: 120,\n };\n @Prop() template: LSApiTemplate;\n @State() isHovered: boolean = false;\n\n private setIsHovered(value: boolean) {\n this.isHovered = value;\n }\n @Prop() validationErrors: ValidationError[] = [];\n\n /\n Allows the selection of fields in the toolbox to be limited to a \| (pipe) delimited list.\n * {string}\n /\n @Prop() filtertoolbox?: string = null;\n\n // Send an internal event to be processed\n @Event() changeSigner: EventEmitter<number>;\n\n // Send an internal event to be processed\n @Event() fieldSelected: EventEmitter<IToolboxField>;\n\n @Listen('fieldTypeSelected')\n handleFieldTypeSelected(event) {\n console.log(event);\n const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');\n\n console.log(fields);\n\n fields.forEach(element => {\n element.isSelected = element.formElementType === event.detail.formElementType;\n });\n\n this.fieldTypeSelected = event.detail;\n }\n\n showTool(fieldFormType: string): boolean {\n return this.filtertoolbox === null \|\| this.filtertoolbox.split('\|').includes(fieldFormType);\n }\n\n private cardRef!: HTMLElement;\n\n @Watch('activeRecipient')\n handleExpandCollapse() {\n if (!this.cardRef) return;\n\n const isActive = this.activeRecipient === this.recipient.signerIndex;\n\n if (isActive) {\n // Expand\n this.cardRef.style.maxHeight = this.cardRef.scrollHeight + 'px';\n } else {\n // Collapse\n this.cardRef.style.maxHeight = '96px';\n }\n }\n\n componentDidLoad() {\n const isActive = this.activeRecipient === this.recipient.signerIndex;\n this.cardRef.style.maxHeight = isActive ? this.cardRef.scrollHeight + 'px' : '96px';\n }\n\n render() {\n const recipientFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.recipient.signerIndex) \|\| [];\n const recipientSignatures = recipientFields.filter(f => f.elementType === 'signature' \|\| f.elementType === 'auto sign');\n return (\n <Host>\n <div\n ref={el => (this.cardRef = el)}\n class={`participant-card top-card full-card ${this.activeRecipient === this.recipient.signerIndex ? 'expanded' : ''}`}\n style={{\n background: defaultRolePalette[this.recipient?.signerIndex % 100].s10,\n border: `1px solid ${defaultRolePalette[this.recipient?.signerIndex % 100].s60}`,\n outline: `${this.recipient.signerIndex === this.activeRecipient ? '4px solid ' + defaultRolePalette[this.recipient?.signerIndex % 100].s40 : 'none'}`,\n marginTop: this.recipient.roleType === 'WITNESS' ? '-0.813rem' : '0',\n cursor: 'pointer',\n }}\n onClick={() => {\n this.changeSigner.emit(this.recipient.signerIndex);\n }}\n onMouseEnter={() => {\n this.setIsHovered(true);\n }}\n onMouseLeave={() => {\n this.setIsHovered(false);\n }}\n >\n <div class={'participant-card-inner'}>\n <div class={'participant-card-top-items'}>\n <div\n class={'role-label'}\n style={{\n background: defaultRolePalette[this.recipient?.signerIndex % 100].s20,\n color: defaultRolePalette[this.recipient?.signerIndex % 100].s90,\n }}\n >\n <ls-icon name={this.recipient?.roleType === 'APPROVER' ? 'check-circle' : this.recipient?.roleType === 'WITNESS' ? 'eye' : 'signature'} />\n {this.recipient?.roleType \|\| 'Signer'}\n </div>\n <ls-icon\n name=\"cursor-click\"\n size=\"16\"\n customStyle={{ color: defaultRolePalette[this.recipient?.signerIndex % 100].s70 }}\n solid\n style={{ display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? 'block' : 'none' }}\n />\n <div\n class=\"dot\"\n style={{ display: (!this.isHovered \|\| this.recipient.signerIndex === this.activeRecipient) && recipientSignatures.length === 0 ? 'block' : 'none' }}\n />\n </div>\n\n <div class={'participant-card-text'}>\n <p\n class=\"participant-text-description\"\n style={{\n color: defaultRolePalette[this.recipient?.signerIndex % 100].s100,\n }}\n >\n {this.recipient?.firstname + ' ' + this.recipient?.lastname}\n </p>\n <p\n class=\"participant-text-type\"\n style={{\n color: defaultRolePalette[this.recipient?.signerIndex % 100].s80,\n }}\n >\n {this.recipient.email}\n </p>\n {/ {this.recipient?.roleType !== 'APPROVER' && (\n <div\n class={'role-label fields'}\n style={{\n background:\n recipientFields.length === 0 ? defaultRolePalette[this.recipient?.signerIndex % 100].s60 : defaultRolePalette[this.recipient?.signerIndex % 100].s20,\n color: recipientFields.length === 0 ? 'white' : defaultRolePalette[this.recipient?.signerIndex % 100].s90,\n // display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? '' : 'none',\n }}\n >\n {recipientSignatures.length === 0 && <ls-icon name=\"exclamation-circle\" size=\"16\" style={{ marginRight: '0.125rem' }} />}\n {recipientSignatures.length === 0 ? 'Signature Required' : `${recipientFields.length} ${recipientFields.length === 1 ? 'Field' : 'Fields'}`}\n </div>\n )} */}\n </div>\n\n <div class=\"fields-box\" style={{ display: this.recipient.signerIndex === this.activeRecipient ? 'flex' : 'hidden' }}>\n {this.recipient.signerIndex > 0 && this.showTool('signature') && (\n <ls-toolbox-field\n elementType=\"signature\"\n formElementType=\"signature\"\n label=\"Signature\"\n defaultHeight={27}\n defaultWidth={120}\n validation={0}\n icon=\"signature\"\n tooltip=\"Use this field to collect Signatures from Participants\"\n signer={this.recipient.signerIndex}\n redDot={recipientSignatures.length === 0}\n />\n )}\n\n {this.recipient.signerIndex === 0 && this.showTool('auto sign') && (\n <ls-toolbox-field\n elementType=\"auto sign\"\n formElementType=\"auto sign\"\n label=\"Auto Sign\"\n defaultHeight={27}\n defaultWidth={120}\n validation={3000}\n icon=\"auto-sign\"\n tooltip=\"Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending\"\n signer={this.recipient.signerIndex}\n />\n )}\n {this.showTool('text') && (\n <ls-toolbox-field\n elementType=\"text\"\n formElementType=\"text\"\n label=\"Text\"\n defaultHeight={27}\n defaultWidth={100}\n validation={0}\n icon=\"text\"\n tooltip=\"A field for collecting any plain text values such as: names, addresses or descriptions\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.recipient.signerIndex > 0 && this.showTool('signing date') && (\n <ls-toolbox-field\n elementType=\"signing date\"\n formElementType=\"signing date\"\n label=\"Signing Date\"\n defaultHeight={27}\n defaultWidth={120}\n validation={30}\n icon=\"auto-date\"\n tooltip=\"Automatically inserts the date upon completion by the assigned Participant\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.showTool('date') && (\n <ls-toolbox-field\n elementType=\"date\"\n formElementType=\"date\"\n label=\"Date\"\n defaultHeight={27}\n defaultWidth={80}\n validation={2}\n icon=\"calender\"\n tooltip=\"A field for collecting dates with built-in date formatting options\"\n signer={this.recipient.signerIndex}\n />\n )}\n {this.showTool('email') && (\n <ls-toolbox-field\n elementType=\"email\"\n formElementType=\"email\"\n label=\"Email\"\n defaultHeight={27}\n defaultWidth={120}\n validation={1}\n icon=\"at-symbol\"\n tooltip=\"A Field to only accept entries formatted as an email address (e.g., example@example.com)\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.showTool('initials') && (\n <ls-toolbox-field\n elementType=\"initials\"\n formElementType=\"initials\"\n label=\"Initials\"\n defaultHeight={27}\n defaultWidth={120}\n validation={2000}\n icon=\"initials\"\n tooltip=\"Use this field anywhere Participants are required to Initial your document\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.showTool('number') && (\n <ls-toolbox-field\n elementType=\"number\"\n formElementType=\"number\"\n label=\"Number\"\n defaultHeight={27}\n defaultWidth={80}\n validation={50}\n icon=\"hashtag\"\n tooltip=\"A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.showTool('dropdown') && (\n <ls-toolbox-field\n elementType=\"dropdown\"\n formElementType=\"dropdown\"\n label=\"Dropdown\"\n defaultHeight={27}\n defaultWidth={80}\n validation={20}\n icon=\"dropdown\"\n tooltip=\"Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.showTool('checkbox') && (\n <ls-toolbox-field\n elementType=\"checkbox\"\n formElementType=\"checkbox\"\n label=\"Checkbox\"\n defaultHeight={27}\n defaultWidth={27}\n validation={25}\n icon=\"check\"\n tooltip=\"Places a checkbox on your document. Handy for T&Cs or ✔/✗ sections\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.recipient.signerIndex > 0 && this.showTool('regex') && (\n <ls-toolbox-field\n elementType=\"regex\"\n formElementType=\"regex\"\n label=\"Regex\"\n defaultHeight={27}\n defaultWidth={120}\n validation={93}\n icon=\"code\"\n tooltip=\"Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need\"\n signer={this.recipient.signerIndex}\n />\n )}\n {this.recipient.signerIndex > 0 && this.showTool('image') && (\n <ls-toolbox-field\n elementType=\"image\"\n formElementType=\"image\"\n label=\"Image\"\n defaultHeight={27}\n defaultWidth={120}\n validation={90}\n icon=\"photograph\"\n tooltip=\"Use when you need Participants to upload their own images during the signing process\"\n signer={this.recipient.signerIndex}\n />\n )}\n {this.recipient.signerIndex > 0 && this.showTool('file') && (\n <ls-toolbox-field\n elementType=\"file\"\n formElementType=\"file\"\n label=\"File\"\n defaultHeight={27}\n defaultWidth={120}\n validation={74}\n icon=\"upload\"\n tooltip=\"Use when you need Participants to upload their own documents during the signing process\"\n signer={this.recipient.signerIndex}\n />\n )}\n {this.recipient.signerIndex > 0 && this.showTool('drawn') && (\n <ls-toolbox-field\n elementType=\"drawn\"\n formElementType=\"drawn\"\n label=\"Drawn\"\n defaultHeight={120}\n defaultWidth={120}\n validation={90}\n icon=\"pencil\"\n tooltip=\"Allow users to draw on the document using their mouse or touchscreen\"\n signer={this.recipient.signerIndex}\n />\n )}\n </div>\n </div>\n </div>\n <slot></slot>\n <ls-tooltip id=\"ls-tooltip-master\" />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ls-recipient-card.js","sourceRoot":"","sources":["../../../src/components/ls-recipient-card/ls-recipient-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State, Listen, Element, Watch } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { LSApiRecipient } from '../../types/LSApiRecipient';\nimport { LSApiTemplate } from '../../components';\nimport { ValidationError } from '../../types/ValidationError';\nimport { IToolboxField } from '../interfaces/IToolboxField';\n\n@Component({\n tag: 'ls-recipient-card',\n styleUrl: 'ls-recipient-card.css',\n shadow: true,\n})\nexport class LsRecipientCard {\n @Element() component: HTMLElement;\n /*\n The initial template data, including the link for background PDF. See README and\n * example for correct GraphQL query and data structure.\n * {LSApiTemplate}\n /\n @Prop() recipient: LSApiRecipient;\n @Prop() activeRecipient: number;\n @Prop() fieldTypeSelected: IToolboxField = {\n label: 'Signature',\n formElementType: 'signature',\n elementType: 'signature',\n validation: 0,\n defaultHeight: 27,\n defaultWidth: 120,\n };\n @Prop() template: LSApiTemplate;\n @State() isHovered: boolean = false;\n\n private setIsHovered(value: boolean) {\n this.isHovered = value;\n }\n @Prop() validationErrors: ValidationError[] = [];\n\n /\n Allows the selection of fields in the toolbox to be limited to a \| (pipe) delimited list.\n * {string}\n /\n @Prop() filtertoolbox?: string = null;\n\n // Send an internal event to be processed\n @Event() changeSigner: EventEmitter<number>;\n\n // Send an internal event to be processed\n @Event() fieldSelected: EventEmitter<IToolboxField>;\n\n @Listen('fieldTypeSelected')\n handleFieldTypeSelected(event) {\n console.log(event);\n const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');\n\n console.log(fields);\n\n fields.forEach(element => {\n element.isSelected = element.formElementType === event.detail.formElementType;\n });\n\n this.fieldTypeSelected = event.detail;\n }\n\n showTool(fieldFormType: string): boolean {\n return this.filtertoolbox === null \|\| this.filtertoolbox.split('\|').includes(fieldFormType);\n }\n\n private cardRef!: HTMLElement;\n\n @Watch('activeRecipient')\n handleExpandCollapse() {\n if (!this.cardRef) return;\n\n const isActive = this.activeRecipient === this.recipient.signerIndex;\n\n if (isActive) {\n // Expand\n this.cardRef.style.maxHeight = this.cardRef.scrollHeight + 'px';\n } else {\n // Collapse\n this.cardRef.style.maxHeight = '6rem';\n }\n }\n\n componentDidLoad() {\n const isActive = this.activeRecipient === this.recipient.signerIndex;\n this.cardRef.style.maxHeight = isActive ? this.cardRef.scrollHeight + 'px' : '6rem';\n }\n\n render() {\n const recipientFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.recipient.signerIndex) \|\| [];\n const recipientSignatures = recipientFields.filter(f => f.elementType === 'signature' \|\| f.elementType === 'auto sign');\n return (\n <Host>\n <div\n ref={el => (this.cardRef = el)}\n class={`participant-card top-card full-card ${this.activeRecipient === this.recipient.signerIndex ? 'expanded' : ''}`}\n style={{\n background: defaultRolePalette[this.recipient?.signerIndex % 100].s10,\n border: `1px solid ${defaultRolePalette[this.recipient?.signerIndex % 100].s60}`,\n outline: `${this.recipient.signerIndex === this.activeRecipient ? '4px solid ' + defaultRolePalette[this.recipient?.signerIndex % 100].s40 : 'none'}`,\n marginTop: this.recipient.roleType === 'WITNESS' ? '-0.813rem' : '0',\n cursor: 'pointer',\n }}\n onClick={() => {\n this.changeSigner.emit(this.recipient.signerIndex);\n }}\n onMouseEnter={() => {\n this.setIsHovered(true);\n }}\n onMouseLeave={() => {\n this.setIsHovered(false);\n }}\n >\n <div class={'participant-card-inner'}>\n <div class={'participant-card-top-items'}>\n <div\n class={'role-label'}\n style={{\n background: defaultRolePalette[this.recipient?.signerIndex % 100].s20,\n color: defaultRolePalette[this.recipient?.signerIndex % 100].s90,\n }}\n >\n <ls-icon name={this.recipient?.roleType === 'APPROVER' ? 'check-circle' : this.recipient?.roleType === 'WITNESS' ? 'eye' : 'signature'} size='1rem' />\n {this.recipient?.roleType \|\| 'Signer'}\n </div>\n <ls-icon\n name=\"cursor-click\"\n size=\"1rem\"\n customStyle={{ color: defaultRolePalette[this.recipient?.signerIndex % 100].s70 }}\n solid\n style={{ display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? 'block' : 'none' }}\n />\n <div\n class=\"dot\"\n style={{ display: (!this.isHovered \|\| this.recipient.signerIndex === this.activeRecipient) && recipientSignatures.length === 0 ? 'block' : 'none' }}\n />\n </div>\n\n <div class={'participant-card-text'}>\n <p\n class=\"participant-text-description\"\n style={{\n color: defaultRolePalette[this.recipient?.signerIndex % 100].s100,\n }}\n >\n {this.recipient?.firstname + ' ' + this.recipient?.lastname}\n </p>\n <p\n class=\"participant-text-type\"\n style={{\n color: defaultRolePalette[this.recipient?.signerIndex % 100].s80,\n }}\n >\n {this.recipient.email}\n </p>\n {/ {this.recipient?.roleType !== 'APPROVER' && (\n <div\n class={'role-label fields'}\n style={{\n background:\n recipientFields.length === 0 ? defaultRolePalette[this.recipient?.signerIndex % 100].s60 : defaultRolePalette[this.recipient?.signerIndex % 100].s20,\n color: recipientFields.length === 0 ? 'white' : defaultRolePalette[this.recipient?.signerIndex % 100].s90,\n // display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? '' : 'none',\n }}\n >\n {recipientSignatures.length === 0 && <ls-icon name=\"exclamation-circle\" size=\"16\" style={{ marginRight: '0.125rem' }} />}\n {recipientSignatures.length === 0 ? 'Signature Required' : `${recipientFields.length} ${recipientFields.length === 1 ? 'Field' : 'Fields'}`}\n </div>\n )} */}\n </div>\n\n <div class=\"fields-box\" style={{ display: this.recipient.signerIndex === this.activeRecipient ? 'flex' : 'hidden' }}>\n {this.recipient.signerIndex > 0 && this.showTool('signature') && (\n <ls-toolbox-field\n elementType=\"signature\"\n formElementType=\"signature\"\n label=\"Signature\"\n defaultHeight={27}\n defaultWidth={120}\n validation={0}\n icon=\"signature\"\n tooltip=\"Use this field to collect Signatures from Participants\"\n signer={this.recipient.signerIndex}\n redDot={recipientSignatures.length === 0}\n />\n )}\n\n {this.recipient.signerIndex === 0 && this.showTool('auto sign') && (\n <ls-toolbox-field\n elementType=\"auto sign\"\n formElementType=\"auto sign\"\n label=\"Auto Sign\"\n defaultHeight={27}\n defaultWidth={120}\n validation={3000}\n icon=\"auto-sign\"\n tooltip=\"Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending\"\n signer={this.recipient.signerIndex}\n />\n )}\n {this.showTool('text') && (\n <ls-toolbox-field\n elementType=\"text\"\n formElementType=\"text\"\n label=\"Text\"\n defaultHeight={27}\n defaultWidth={100}\n validation={0}\n icon=\"text\"\n tooltip=\"A field for collecting any plain text values such as: names, addresses or descriptions\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.recipient.signerIndex > 0 && this.showTool('signing date') && (\n <ls-toolbox-field\n elementType=\"signing date\"\n formElementType=\"signing date\"\n label=\"Signing Date\"\n defaultHeight={27}\n defaultWidth={120}\n validation={30}\n icon=\"auto-date\"\n tooltip=\"Automatically inserts the date upon completion by the assigned Participant\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.showTool('date') && (\n <ls-toolbox-field\n elementType=\"date\"\n formElementType=\"date\"\n label=\"Date\"\n defaultHeight={27}\n defaultWidth={80}\n validation={2}\n icon=\"calender\"\n tooltip=\"A field for collecting dates with built-in date formatting options\"\n signer={this.recipient.signerIndex}\n />\n )}\n {this.showTool('email') && (\n <ls-toolbox-field\n elementType=\"email\"\n formElementType=\"email\"\n label=\"Email\"\n defaultHeight={27}\n defaultWidth={120}\n validation={1}\n icon=\"at-symbol\"\n tooltip=\"A Field to only accept entries formatted as an email address (e.g., example@example.com)\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.showTool('initials') && (\n <ls-toolbox-field\n elementType=\"initials\"\n formElementType=\"initials\"\n label=\"Initials\"\n defaultHeight={27}\n defaultWidth={120}\n validation={2000}\n icon=\"initials\"\n tooltip=\"Use this field anywhere Participants are required to Initial your document\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.showTool('number') && (\n <ls-toolbox-field\n elementType=\"number\"\n formElementType=\"number\"\n label=\"Number\"\n defaultHeight={27}\n defaultWidth={80}\n validation={50}\n icon=\"hashtag\"\n tooltip=\"A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.showTool('dropdown') && (\n <ls-toolbox-field\n elementType=\"dropdown\"\n formElementType=\"dropdown\"\n label=\"Dropdown\"\n defaultHeight={27}\n defaultWidth={80}\n validation={20}\n icon=\"dropdown\"\n tooltip=\"Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.showTool('checkbox') && (\n <ls-toolbox-field\n elementType=\"checkbox\"\n formElementType=\"checkbox\"\n label=\"Checkbox\"\n defaultHeight={27}\n defaultWidth={27}\n validation={25}\n icon=\"check\"\n tooltip=\"Places a checkbox on your document. Handy for T&Cs or ✔/✗ sections\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.recipient.signerIndex > 0 && this.showTool('regex') && (\n <ls-toolbox-field\n elementType=\"regex\"\n formElementType=\"regex\"\n label=\"Regex\"\n defaultHeight={27}\n defaultWidth={120}\n validation={93}\n icon=\"code\"\n tooltip=\"Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need\"\n signer={this.recipient.signerIndex}\n />\n )}\n {this.recipient.signerIndex > 0 && this.showTool('image') && (\n <ls-toolbox-field\n elementType=\"image\"\n formElementType=\"image\"\n label=\"Image\"\n defaultHeight={27}\n defaultWidth={120}\n validation={90}\n icon=\"photograph\"\n tooltip=\"Use when you need Participants to upload their own images during the signing process\"\n signer={this.recipient.signerIndex}\n />\n )}\n {this.recipient.signerIndex > 0 && this.showTool('file') && (\n <ls-toolbox-field\n elementType=\"file\"\n formElementType=\"file\"\n label=\"File\"\n defaultHeight={27}\n defaultWidth={120}\n validation={74}\n icon=\"upload\"\n tooltip=\"Use when you need Participants to upload their own documents during the signing process\"\n signer={this.recipient.signerIndex}\n />\n )}\n {this.recipient.signerIndex > 0 && this.showTool('drawn') && (\n <ls-toolbox-field\n elementType=\"drawn\"\n formElementType=\"drawn\"\n label=\"Drawn\"\n defaultHeight={120}\n defaultWidth={120}\n validation={90}\n icon=\"pencil\"\n tooltip=\"Allow users to draw on the document using their mouse or touchscreen\"\n signer={this.recipient.signerIndex}\n />\n )}\n </div>\n </div>\n </div>\n <slot></slot>\n <ls-tooltip id=\"ls-tooltip-master\" />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ls-recipient-manager/ls-recipient-manager.css CHANGED Viewed

@@ -7,7 +7,7 @@
 }
 .ls-editor-infobox {
-  padding: 4px;
+  padding: 0.25rem;
 }
 .toolbox-section-title {

package/dist/collection/components/ls-statusbar/ls-statusbar.css CHANGED Viewed

@@ -55,9 +55,9 @@ button:disabled {
 input[type="range"] {
   -webkit-appearance: none; /* Remove default styling */
   width: 100%;
-  height: 8px;
+  height: 0.5rem;
   background: var(--gray-20, #EDEFF2);
-  border-radius: 5px;
+  border-radius: 0.25rem;
   outline: none;
 }
@@ -65,8 +65,8 @@ input[type="range"] {
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 8px;
-  height: 8px;
+  width: 0.5rem;
+  height: 0.5rem;
   background: var(--gray-70, #4a4c51); /* Custom thumb color */
   border-radius: 50%;
   cursor: pointer;
@@ -74,8 +74,8 @@ input[type="range"]::-webkit-slider-thumb {
 /* Firefox */
 input[type="range"]::-moz-range-thumb {
-  width: 8px;
-  height: 8%;
+  width: 0.5rem;
+  height: 0.5rem;
   background: var(--gray-70, #4a4c51); /* Custom thumb color */
   border: none;
   border-radius: 50%;
@@ -85,15 +85,15 @@ input[type="range"]::-moz-range-thumb {
 /* Track color for Firefox */
 input[type="range"]::-moz-range-track {
   background: var(--gray-20, #EDEFF2);
-  height: 8px;
-  border-radius: 5px;
+  height: 0.5rem;
+  border-radius: 0.25rem;
 }
 /* Track color for Chrome, Safari, Edge */
 input[type="range"]::-webkit-slider-runnable-track {
   background: var(--gray-20, #EDEFF2);
-  height: 8px;
-  border-radius: 5px;
+  height: 0.5rem;
+  border-radius: 0.25rem;
 }
@@ -130,7 +130,7 @@ a:hover {
 select {
   appearance: none;
-  height: 36px;
+  height: 2.25rem;
 }
 .input-wrapper {

package/dist/collection/components/ls-title-input/ls-title-input.css CHANGED Viewed

@@ -71,7 +71,7 @@ a:hover {
 select {
   appearance: none;
-  height: 36px;
+  height: 2.25rem;
 }
 .input-wrapper {

package/dist/collection/components/ls-title-input/ls-title-input.js CHANGED Viewed

@@ -29,7 +29,7 @@ export class LsTitleInput {
             }, onKeyUp: e => {
                 if (e.key === 'Enter' || e.keyCode === 13)
                     this.editTitle = false;
-            } }), h("ls-icon", { name: "check", size: "16", class: 'editButton', onClick: () => {
+            } }), h("ls-icon", { name: "check", size: "1rem", class: 'editButton', onClick: () => {
                 this.editTitle = false;
             } }))) : (h("div", { class: "template-title", onClick: () => {
                 this.editTitle = !this.editTitle;

package/dist/collection/components/ls-title-input/ls-title-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ls-title-input.js","sourceRoot":"","sources":["../../../src/components/ls-title-input/ls-title-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAS9F,MAAM,OAAO,YAAY;IACZ,SAAS,CAAc;IACM,QAAQ,CAAgB;IAEvD,SAAS,GAAY,KAAK,CAAC;IAOpC,MAAM,CAAgC;IAOtC,MAAM,CAAgC;IAEtC,0CAA0C;IAC1C,6CAA6C;IAC7C,qDAAqD;IACrD,KAAK,CAAC,IAAY;QAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAC3B,CAAC;IAEO,UAAU,CAAC;IAEnB,QAAQ,CAAC,IAAI,EAAE,KAAK;QAClB,IAAI,IAAI,CAAC,UAAU;YAAE,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAEnD,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,GAAG,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,EAAE,CAAC;YAC9C,MAAM,KAAK,GAAoB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC3E,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC,EAAE,KAAK,CAAC,CAAC;IACZ,CAAC;IAGD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE;YAClE,aACE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAC3B,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,EAAE,EACxE,OAAO,EAAE,CAAC,CAAC,EAAE;oBACX,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,CAAC;gBAC9D,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE;oBACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE;wBAAE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACpE,CAAC,GACD;YACF,eACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,~~IAAI~~,~~EACT~~,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACzB,CAAC,GACD,CACE,CACP,CAAC,CAAC,CAAC,CACF,WACE,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;YACnC,CAAC;YAED,aAAI,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAK,CACzB,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\n\n@Component({\n tag: 'ls-title-input',\n styleUrl: 'ls-title-input.css',\n shadow: true,\n})\nexport class LsTitleInput {\n @Element() component: HTMLElement;\n @Prop({ mutable: true, reflect: true }) template: LSApiTemplate;\n\n @State() editTitle: boolean = false;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n // NOTE this alter is debounced to account for typing\n alter(diff: object) {\n this.debounce(diff, 500);\n }\n\n private titletimer;\n\n debounce(diff, delay) {\n if (this.titletimer) clearTimeout(this.titletimer);\n\n this.titletimer = setTimeout(() => {\n this.template = { ...this.template, ...diff };\n const diffs: LSMutateEvent[] = [{ action: 'update', data: this.template }];\n this.update.emit(diffs);\n this.mutate.emit(diffs);\n }, delay);\n }\n\n\n render() {\n return (\n <Host>\n {this.editTitle ? (\n <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n <input\n value={this.template?.title}\n style={{ height: '1.25rem', padding: '0 0.25rem', width: 'fit-content' }}\n onInput={e => {\n e.preventDefault();\n this.alter({ title: (e.target as HTMLInputElement).value });\n }}\n onKeyUp={e => {\n if (e.key === 'Enter' \|\| e.keyCode === 13) this.editTitle = false;\n }}\n />\n <ls-icon\n name=\"check\"\n size=\"16\"\n class='editButton'\n onClick={() => {\n this.editTitle = false;\n }}\n />\n </div>\n ) : (\n <div\n class=\"template-title\"\n onClick={() => {\n this.editTitle = !this.editTitle;\n }}\n >\n <p>{this.template?.title}</p>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ls-title-input.js","sourceRoot":"","sources":["../../../src/components/ls-title-input/ls-title-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAS9F,MAAM,OAAO,YAAY;IACZ,SAAS,CAAc;IACM,QAAQ,CAAgB;IAEvD,SAAS,GAAY,KAAK,CAAC;IAOpC,MAAM,CAAgC;IAOtC,MAAM,CAAgC;IAEtC,0CAA0C;IAC1C,6CAA6C;IAC7C,qDAAqD;IACrD,KAAK,CAAC,IAAY;QAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAC3B,CAAC;IAEO,UAAU,CAAC;IAEnB,QAAQ,CAAC,IAAI,EAAE,KAAK;QAClB,IAAI,IAAI,CAAC,UAAU;YAAE,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAEnD,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,GAAG,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,EAAE,CAAC;YAC9C,MAAM,KAAK,GAAoB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC3E,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC,EAAE,KAAK,CAAC,CAAC;IACZ,CAAC;IAGD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE;YAClE,aACE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAC3B,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,EAAE,EACxE,OAAO,EAAE,CAAC,CAAC,EAAE;oBACX,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,CAAC;gBAC9D,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE;oBACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE;wBAAE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACpE,CAAC,GACD;YACF,eACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACzB,CAAC,GACD,CACE,CACP,CAAC,CAAC,CAAC,CACF,WACE,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;YACnC,CAAC;YAED,aAAI,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAK,CACzB,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\n\n@Component({\n tag: 'ls-title-input',\n styleUrl: 'ls-title-input.css',\n shadow: true,\n})\nexport class LsTitleInput {\n @Element() component: HTMLElement;\n @Prop({ mutable: true, reflect: true }) template: LSApiTemplate;\n\n @State() editTitle: boolean = false;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n // NOTE this alter is debounced to account for typing\n alter(diff: object) {\n this.debounce(diff, 500);\n }\n\n private titletimer;\n\n debounce(diff, delay) {\n if (this.titletimer) clearTimeout(this.titletimer);\n\n this.titletimer = setTimeout(() => {\n this.template = { ...this.template, ...diff };\n const diffs: LSMutateEvent[] = [{ action: 'update', data: this.template }];\n this.update.emit(diffs);\n this.mutate.emit(diffs);\n }, delay);\n }\n\n\n render() {\n return (\n <Host>\n {this.editTitle ? (\n <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n <input\n value={this.template?.title}\n style={{ height: '1.25rem', padding: '0 0.25rem', width: 'fit-content' }}\n onInput={e => {\n e.preventDefault();\n this.alter({ title: (e.target as HTMLInputElement).value });\n }}\n onKeyUp={e => {\n if (e.key === 'Enter' \|\| e.keyCode === 13) this.editTitle = false;\n }}\n />\n <ls-icon\n name=\"check\"\n size=\"1rem\"\n class='editButton'\n onClick={() => {\n this.editTitle = false;\n }}\n />\n </div>\n ) : (\n <div\n class=\"template-title\"\n onClick={() => {\n this.editTitle = !this.editTitle;\n }}\n >\n <p>{this.template?.title}</p>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ls-toggle/ls-toggle.css CHANGED Viewed

@@ -71,7 +71,7 @@ input:checked + .slider {
 input:focus + .slider {
   box-shadow: 0 0 1px var(--primary-60, #4456f6);
-  outline: 4px solid var(--primary-20, #e3e6ff);
+  outline: 0.25rem solid var(--primary-20, #e3e6ff);
 }
 input:checked + .slider:before {
@@ -82,7 +82,7 @@ input:checked + .slider:before {
 /* Rounded sliders */
 .slider.round, .indeterminate.round {
-  border-radius: 34px;
+  border-radius: 2.125rem;
 }
 .slider.round:before {

package/dist/collection/components/ls-toolbar/ls-toolbar.css CHANGED Viewed

@@ -50,7 +50,7 @@ a:hover {
 select {
   appearance: none;
-  height: 36px;
+  height: 2.25rem;
 }
 .input-wrapper {

package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.css CHANGED Viewed

@@ -81,7 +81,7 @@ a:hover {
 select {
   appearance: none;
-  height: 36px;
+  height: 2.25rem;
 }
 .input-wrapper {

package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.js CHANGED Viewed

@@ -84,9 +84,9 @@ export class LsToolboxField {
                     defaultWidth: this.defaultWidth,
                     fixedAspect: this.fixedAspect,
                 });
-            } }, h("div", { key: '111f63ac4327ccda47ac6db32ca48ec9e2f9161d', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }, "data-tooltip": this.tooltip, "data-tooltip-placement": "right" }, h("ls-icon", { key: '51a32e37745f9caa55018ce04ebc69efa83b45f0', name: this.icon, size: "20" })), h("p", { key: '20cca3db62b33e7993fee5e3a0f5317a8445ca56', class: "toolbox-field-label", style: this.isSelected && {
+            } }, h("div", { key: '111f63ac4327ccda47ac6db32ca48ec9e2f9161d', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }, "data-tooltip": this.tooltip, "data-tooltip-placement": "right" }, h("ls-icon", { key: '440c1ca0974d682d0b8b1de16b80c955688ea25f', name: this.icon, size: "1.25rem" })), h("p", { key: 'fcf6090878b314f5af0626168af946dda3809a89', class: "toolbox-field-label", style: this.isSelected && {
                 color: defaultRolePalette[this.signer % 100].s80,
-            } }, this.label), this.redDot && (h("div", { key: '725fc1bc7c95e0b1074f2c6c31e0414b5787ea47', class: 'warning-box', "data-tooltip": `${this.label} Field Required`, "data-tooltip-placement": "left" }, h("ls-icon", { key: '6e8ece4baa10be9fc3a1fd4163d9d5e927b0279a', name: "exclamation-circle", size: "18", solid: true }))), h("ls-icon", { key: '47097268cf0db6a0edcde55a2fea0760164a7a23', name: "drag-vertical", size: "16", color: "#787a80" })), h("ls-tooltip", { key: '494be0b07a6ba735061f751d8681cdfbc59c79d8', id: "ls-tooltip-master", tooltipText: "Something" })));
+            } }, this.label), this.redDot && (h("div", { key: '9d4834774b6bd44982f3a4b8e9a43695c119afbd', class: 'warning-box', "data-tooltip": `${this.label} Field Required`, "data-tooltip-placement": "left" }, h("ls-icon", { key: 'a2c311cdffd65861e0629f9fca541b4276131337', name: "exclamation-circle", size: "1.125rem", solid: true }))), h("ls-icon", { key: '0b598a9a37ecd85c8dea68ccd03917bc4321f065', name: "drag-vertical", size: "1rem", color: "#787a80" })), h("ls-tooltip", { key: '7546842ee7d03ee8a532403dfcb457c9f405b1de', id: "ls-tooltip-master", tooltipText: "Something" })));
     }
     static get is() { return "ls-toolbox-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ls-toolbox-field.js","sourceRoot":"","sources":["../../../src/components/ls-toolbox-field/ls-toolbox-field.tsx"],"names":[],"mappings":"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~~IAAI~~,GAAG,~~CAClC~~;gBACN,0DACE,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EACH,IAAI,CAAC,UAAU,IAAI;wBACjB,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG;qBACjD,IAGF,IAAI,CAAC,KAAK,CACT;gBACH,IAAI,CAAC,MAAM,IAAI,CACd,4DAAK,KAAK,EAAE,aAAa,kBAAgB,GAAG,IAAI,CAAC,KAAK,iBAAiB,4BAAyB,MAAM;oBACpG,gEAAS,IAAI,EAAC,oBAAoB,EAAC,IAAI,EAAC,~~IAAI~~,EAAC,KAAK,SAAG,~~CACjD~~,CACP;gBACD,gEAAS,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,~~IAAI~~,EAAC,KAAK,EAAC,SAAS,GAAG,~~CACtD~~;YACN,mEAAY,EAAE,EAAC,mBAAmB,EAAC,WAAW,EAAC,WAAW,GAAG,CACxD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n tag: 'ls-toolbox-field',\n styleUrl: 'ls-toolbox-field.css',\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: string;\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 @Listen('dragstart')\n handleDragStart(event) {\n\n var canvas = document.createElement('div');\n canvas.style.position = 'absolute';\n canvas.style.left = '-100%';\n canvas.style.zIndex = '-100';\n canvas.style.height = this.defaultHeight +'px';\n canvas.style.width = this.defaultWidth +'px';\n canvas.style.backgroundColor = 'rgba(255, 255, 255, 1)';\n canvas.style.border = `1px dashed ${defaultRolePalette[this.signer % 100].s60}`;\n canvas.innerHTML = this.formElementType;\n document.body.appendChild(canvas); \n\n event.dataTransfer.setDragImage(canvas, -50, -20);\n\n // Add the target element's id to the data transfer object\n event.dataTransfer.setData(\n 'application/json',\n JSON.stringify({\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 event.dataTransfer.dropEffect = 'copy';\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 attachAllTooltips(this.component.shadowRoot);\n }\n\n render() {\n return (\n <Host draggable=\"true\">\n <div\n class={'ls-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 onClick={() => {\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 >\n <div\n class=\"toolbox-field-icon\"\n style={{ '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }}\n data-tooltip={this.tooltip}\n data-tooltip-placement=\"right\"\n >\n <ls-icon name={this.icon} size=\"20\" />\n </div>\n <p\n class=\"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={'warning-box'} data-tooltip={`${this.label} Field Required`} data-tooltip-placement=\"left\">\n <ls-icon name=\"exclamation-circle\" size=\"18\" solid />\n </div>\n )}\n <ls-icon name=\"drag-vertical\" size=\"16\" color=\"#787a80\" />\n </div>\n <ls-tooltip id=\"ls-tooltip-master\" tooltipText=\"Something\" />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ls-toolbox-field.js","sourceRoot":"","sources":["../../../src/components/ls-toolbox-field/ls-toolbox-field.tsx"],"names":[],"mappings":"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","sourcesContent":["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 { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n tag: 'ls-toolbox-field',\n styleUrl: 'ls-toolbox-field.css',\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: string;\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 @Listen('dragstart')\n handleDragStart(event) {\n\n var canvas = document.createElement('div');\n canvas.style.position = 'absolute';\n canvas.style.left = '-100%';\n canvas.style.zIndex = '-100';\n canvas.style.height = this.defaultHeight +'px';\n canvas.style.width = this.defaultWidth +'px';\n canvas.style.backgroundColor = 'rgba(255, 255, 255, 1)';\n canvas.style.border = `1px dashed ${defaultRolePalette[this.signer % 100].s60}`;\n canvas.innerHTML = this.formElementType;\n document.body.appendChild(canvas); \n\n event.dataTransfer.setDragImage(canvas, -50, -20);\n\n // Add the target element's id to the data transfer object\n event.dataTransfer.setData(\n 'application/json',\n JSON.stringify({\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 event.dataTransfer.dropEffect = 'copy';\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 attachAllTooltips(this.component.shadowRoot);\n }\n\n render() {\n return (\n <Host draggable=\"true\">\n <div\n class={'ls-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 onClick={() => {\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 >\n <div\n class=\"toolbox-field-icon\"\n style={{ '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }}\n data-tooltip={this.tooltip}\n data-tooltip-placement=\"right\"\n >\n <ls-icon name={this.icon} size=\"1.25rem\" />\n </div>\n <p\n class=\"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={'warning-box'} data-tooltip={`${this.label} Field Required`} data-tooltip-placement=\"left\">\n <ls-icon name=\"exclamation-circle\" size=\"1.125rem\" solid />\n </div>\n )}\n <ls-icon name=\"drag-vertical\" size=\"1rem\" color=\"#787a80\" />\n </div>\n <ls-tooltip id=\"ls-tooltip-master\" tooltipText=\"Something\" />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ls-validation-manager/ls-validation-manager.css CHANGED Viewed

@@ -25,7 +25,7 @@
 .valid-label {
   display: flex;
-  padding: 2px 0.5rem;
+  padding: 0.125rem 0.5rem;
   justify-content: center;
   align-items: center;
   gap: 0.25rem;
@@ -130,7 +130,7 @@
 .role-label {
   display: flex;
-  padding: 2px 3px;
+  padding: 0.125rem 0.1875rem;
   justify-content: center;
   align-items: center;
   border-radius: 0.25rem;