legalesign-document-viewer 0.1.1 → 0.1.2

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

@@ -24,7 +24,7 @@ export class LsIcon {
             console.warn('Icons in src/components/ls-icon/icons.ts should be identical to the enum type in src/types/Icon.ts. Please add all icons to the enum type.');
     }
     render() {
-        return (h("host", { key: '4e5e981962b704150b8f7e0c43fe4bbf9ab7f31c' }, icons
+        return (h("host", { key: '524961e24d0d8496a0a78e69965f3e231ea06c73' }, icons
             ?.filter((icon) => icon.name === this.name)
             ?.map((icon) => (h("div", { key: icon?.name, class: 'iconContainer', style: {
                 height: `${this.size}px`,
@@ -42,7 +42,7 @@ export class LsIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "Icon",
-                    "resolved": "\"expand\" | \"filter\" | \"map\" | \"document\" | \"code\" | \"link\" | \"menu\" | \"table\" | \"stop\" | \"text\" | \"download\" | \"target\" | \"key\" | \"required\" | \"terminal\" | \"scale\" | \"x\" | \"y\" | \"collection\" | \"translate\" | \"signature\" | \"initials\" | \"search\" | \"template\" | \"dropdown\" | \"pause\" | \"play\" | \"mail\" | \"bell\" | \"home\" | \"briefcase\" | \"shield-check\" | \"shield-exclamation\" | \"cog\" | \"check\" | \"cash\" | \"location-marker\" | \"user\" | \"users\" | \"user-group\" | \"office-building\" | \"pencil-alt\" | \"pencil\" | \"eye\" | \"bookmark\" | \"color-swatch\" | \"inbox\" | \"inbox-in\" | \"archive\" | \"clock\" | \"photograph\" | \"tag\" | \"phone\" | \"phone-incoming\" | \"phone-outgoing\" | \"menu-alt-1\" | \"menu-alt-2\" | \"menu-alt-3\" | \"menu-alt-4\" | \"switch-vertical\" | \"switch-horizontal\" | \"plus\" | \"refresh\" | \"question-mark-circle\" | \"exclamation\" | \"cloud-upload\" | \"cloud-download\" | \"chart-pie\" | \"document-download\" | \"document-add\" | \"document-remove\" | \"calender\" | \"globe-alt\" | \"duplicate\" | \"share\" | \"heart\" | \"globe\" | \"volume-up\" | \"volume-off\" | \"adjustments\" | \"mail-open\" | \"document-duplicate\" | \"credit-card\" | \"lock-closed\" | \"trending-up\" | \"trending-down\" | \"camera\" | \"at-symbol\" | \"trash\" | \"information-circle\" | \"arrow-up\" | \"arrow-right\" | \"arrow-down\" | \"arrow-left\" | \"arrow-circle-right\" | \"arrow-circle-down\" | \"arrow-circle-left\" | \"arrow-circle-up\" | \"sort-ascending\" | \"sort-descending\" | \"x-circle\" | \"check-circle\" | \"exclamation-circle\" | \"plus-circle\" | \"minus-circle\" | \"user-circle\" | \"zoom-in\" | \"zoom-out\" | \"user-add\" | \"dots-horizontal\" | \"dots-vertical\" | \"upload\" | \"view-list\" | \"view-boards\" | \"paper-clip\" | \"emoji-happy\" | \"emoji-sad\" | \"printer\" | \"currency-dollar\" | \"currency-yen\" | \"currency-euro\" | \"currency-pound\" | \"currency-rupee\" | \"chevron-down\" | \"chevron-right\" | \"chevron-up\" | \"chevron-left\" | \"selector\" | \"chat\" | \"receipt-refund\" | \"ticket\" | \"lock-open\" | \"dots-circle-horizontal\" | \"hashtag\" | \"qrcode\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard\" | \"external-link\" | \"sun\" | \"moon\" | \"clipboard-copy\" | \"annotation\" | \"flag\" | \"book-open\" | \"lightning-bolt\" | \"folder\" | \"sparkles\" | \"user-remove\" | \"arrow-narrow-up\" | \"arrow-narrow-right\" | \"arrow-narrow-down\" | \"arrow-narrow-left\" | \"reply\" | \"light-bulb\" | \"chat-alt\" | \"document-report\" | \"logout\" | \"ban\" | \"shopping-cart\" | \"cursor-click\" | \"microphone\" | \"speakerphone\" | \"badge-check\" | \"desktop-computer\" | \"chat-alt-2\" | \"support\" | \"newspaper\" | \"bookmark-alt\" | \"view-grid-add\" | \"library\" | \"star\" | \"chart-square-bar\" | \"eye-off\" | \"chart-bar\" | \"fire\" | \"shopping-bag\" | \"thumb-up\" | \"thumb-down\" | \"hand\" | \"arrows-expand\" | \"view-grid\" | \"puzzle\" | \"folder-download\" | \"folder-add\" | \"folder-remove\" | \"identification\" | \"rss\" | \"scissors\" | \"music-note\" | \"film\" | \"database\" | \"server\" | \"login\" | \"wifi\" | \"backspace\" | \"paper-airplane\" | \"device-mobile\" | \"device-tablet\" | \"chevron-double-right\" | \"chevron-double-down\" | \"chevron-double-left\" | \"chevron-double-up\" | \"finger-print\" | \"cube\" | \"folder-open\" | \"save\" | \"save-as\" | \"document-text\" | \"calculator\" | \"beaker\" | \"gift\" | \"truck\" | \"currency-bangladeshi\" | \"video-camera\" | \"cloud\" | \"cube-transparent\" | \"cake\" | \"phone-missed-call\" | \"plus-sm\" | \"minus-sm\" | \"receipt-tax\" | \"status-online\" | \"status-offline\" | \"presentation-chart-line\" | \"presentation-chart-bar\" | \"fast-forward\" | \"rewind\" | \"chip\" | \"academic-cap\" | \"variable\" | \"document-search\" | \"search-circle\" | \"minus\" | \"arrow-sm-up\" | \"arrow-sm-right\" | \"arrow-sm-down\" | \"arrow-sm-left\" | \"base-circle\" | \"drag-vertical\" | \"menu-alt-5\" | \"text-size\" | \"pin\" | \"keyboard\" | \"move-vertical\" | \"move-horizontal\" | \"rotate-left\" | \"rotate-right\" | \"undo\" | \"redo\" | \"drag-horizontal\" | \"side-panel-close-left\" | \"side-panel-close-right\" | \"side-panel-open-left\" | \"side-panel-open-right\" | \"contacts\" | \"arrow-up-link-out\" | \"device-lock\" | \"auto-date\" | \"revert\" | \"guides\" | \"bulk-send\" | \"field-alignment-left\" | \"field-alignment-centre\" | \"field-alignment-right\" | \"accessibility\" | \"arrows-minimise\" | \"document-info\" | \"document-import-fields\" | \"document-merge-alt2\" | \"document-combine\" | \"field-alignment-top\" | \"field-alignment-middle\" | \"field-alignment-bottom\" | \"box-empty\" | \"box-ticked\" | \"box-crossed\" | \"sort-alphabetically-a-z\" | \"sort-alphabetically-z-a\" | \"linked-document\" | \"document-replace\" | \"field-scale\" | \"field-match-width\" | \"field-match-height\" | \"recipient-link\" | \"recipient-link-broken\" | \"witness-arrow\" | \"branch\" | \"variant\" | \"recipient-details-card\" | \"recipient-details\" | \"field-distribute-vertically\" | \"field-distribute-horizontally\" | \"field-duplicate\" | \"pre-filled-content\" | \"typing-input\" | \"table-split\" | \"add-column-left\" | \"add-column-right\" | \"recipient-links\" | \"list-order\" | \"field-scaling-off\" | \"fit-width\" | \"fit-height\" | \"table-quick-edit\" | \"table-columns\" | \"table-rows\" | \"apply-all-rows\" | \"pagescroll-preview\" | \"page-insert-vertical\" | \"page-insert-horizontal\" | \"circle-quarter\" | \"circle-half\" | \"circle-three-quarter\" | \"time-sort-ascending\" | \"time-sort-descending\" | \"date-sort-ascending\" | \"date-sort-descending\" | \"side-panel-closed\" | \"side-panel-open\" | \"date-sent-sort-ascending\" | \"date-sent-sort-descending\" | \"sort-alphabetically-a-z-alt\" | \"sort-alphabetically-z-a-alt\" | \"template-sent\" | \"template-not-sent\" | \"grid\" | \"linked\" | \"link-broken\" | \"user-assign\" | \"x-letter\" | \"field-selected\" | \"designation\" | \"text-alignment\" | \"field-placement\" | \"typeface\" | \"page-layout\" | \"field-special\" | \"link-value\" | \"field-order\" | \"send-arrow\" | \"sent-progress\" | \"circle-filled-quarter\" | \"circle-filled-half\" | \"circle-filled-three-quarter\" | \"document-viewed\" | \"collapse\" | \"logo\"",
+                    "resolved": "\"expand\" | \"filter\" | \"map\" | \"document\" | \"code\" | \"link\" | \"menu\" | \"table\" | \"stop\" | \"text\" | \"download\" | \"target\" | \"key\" | \"required\" | \"terminal\" | \"scale\" | \"x\" | \"y\" | \"collection\" | \"translate\" | \"signature\" | \"initials\" | \"search\" | \"template\" | \"dropdown\" | \"pause\" | \"play\" | \"mail\" | \"bell\" | \"home\" | \"briefcase\" | \"shield-check\" | \"shield-exclamation\" | \"cog\" | \"check\" | \"cash\" | \"location-marker\" | \"user\" | \"users\" | \"user-group\" | \"office-building\" | \"pencil-alt\" | \"pencil\" | \"eye\" | \"bookmark\" | \"color-swatch\" | \"inbox\" | \"inbox-in\" | \"archive\" | \"clock\" | \"photograph\" | \"tag\" | \"phone\" | \"phone-incoming\" | \"phone-outgoing\" | \"menu-alt-1\" | \"menu-alt-2\" | \"menu-alt-3\" | \"menu-alt-4\" | \"switch-vertical\" | \"switch-horizontal\" | \"plus\" | \"refresh\" | \"question-mark-circle\" | \"exclamation\" | \"cloud-upload\" | \"cloud-download\" | \"chart-pie\" | \"document-download\" | \"document-add\" | \"document-remove\" | \"calender\" | \"camera\" | \"globe-alt\" | \"duplicate\" | \"share\" | \"heart\" | \"globe\" | \"volume-up\" | \"volume-off\" | \"adjustments\" | \"mail-open\" | \"document-duplicate\" | \"credit-card\" | \"lock-closed\" | \"trending-up\" | \"trending-down\" | \"at-symbol\" | \"trash\" | \"information-circle\" | \"arrow-up\" | \"arrow-right\" | \"arrow-down\" | \"arrow-left\" | \"arrow-circle-right\" | \"arrow-circle-down\" | \"arrow-circle-left\" | \"arrow-circle-up\" | \"sort-ascending\" | \"sort-descending\" | \"x-circle\" | \"check-circle\" | \"exclamation-circle\" | \"plus-circle\" | \"minus-circle\" | \"user-circle\" | \"zoom-in\" | \"zoom-out\" | \"user-add\" | \"dots-horizontal\" | \"dots-vertical\" | \"upload\" | \"view-list\" | \"view-boards\" | \"paper-clip\" | \"emoji-happy\" | \"emoji-sad\" | \"printer\" | \"currency-dollar\" | \"currency-yen\" | \"currency-euro\" | \"currency-pound\" | \"currency-rupee\" | \"chevron-down\" | \"chevron-right\" | \"chevron-up\" | \"chevron-left\" | \"selector\" | \"chat\" | \"receipt-refund\" | \"ticket\" | \"lock-open\" | \"dots-circle-horizontal\" | \"hashtag\" | \"qrcode\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard\" | \"external-link\" | \"sun\" | \"moon\" | \"clipboard-copy\" | \"annotation\" | \"flag\" | \"book-open\" | \"lightning-bolt\" | \"folder\" | \"sparkles\" | \"user-remove\" | \"arrow-narrow-up\" | \"arrow-narrow-right\" | \"arrow-narrow-down\" | \"arrow-narrow-left\" | \"reply\" | \"light-bulb\" | \"chat-alt\" | \"document-report\" | \"logout\" | \"ban\" | \"shopping-cart\" | \"cursor-click\" | \"microphone\" | \"speakerphone\" | \"badge-check\" | \"desktop-computer\" | \"chat-alt-2\" | \"support\" | \"newspaper\" | \"bookmark-alt\" | \"view-grid-add\" | \"library\" | \"star\" | \"chart-square-bar\" | \"eye-off\" | \"chart-bar\" | \"fire\" | \"shopping-bag\" | \"thumb-up\" | \"thumb-down\" | \"hand\" | \"arrows-expand\" | \"view-grid\" | \"puzzle\" | \"folder-download\" | \"folder-add\" | \"folder-remove\" | \"identification\" | \"rss\" | \"scissors\" | \"music-note\" | \"film\" | \"database\" | \"server\" | \"login\" | \"wifi\" | \"backspace\" | \"paper-airplane\" | \"device-mobile\" | \"device-tablet\" | \"chevron-double-right\" | \"chevron-double-down\" | \"chevron-double-left\" | \"chevron-double-up\" | \"finger-print\" | \"cube\" | \"folder-open\" | \"save\" | \"save-as\" | \"document-text\" | \"calculator\" | \"beaker\" | \"gift\" | \"truck\" | \"currency-bangladeshi\" | \"video-camera\" | \"cloud\" | \"cube-transparent\" | \"cake\" | \"phone-missed-call\" | \"plus-sm\" | \"minus-sm\" | \"receipt-tax\" | \"status-online\" | \"status-offline\" | \"presentation-chart-line\" | \"presentation-chart-bar\" | \"fast-forward\" | \"rewind\" | \"chip\" | \"academic-cap\" | \"variable\" | \"document-search\" | \"search-circle\" | \"minus\" | \"arrow-sm-up\" | \"arrow-sm-right\" | \"arrow-sm-down\" | \"arrow-sm-left\" | \"base-circle\" | \"drag-vertical\" | \"menu-alt-5\" | \"text-size\" | \"pin\" | \"keyboard\" | \"move-vertical\" | \"move-horizontal\" | \"rotate-left\" | \"rotate-right\" | \"undo\" | \"redo\" | \"drag-horizontal\" | \"side-panel-close-left\" | \"side-panel-close-right\" | \"side-panel-open-left\" | \"side-panel-open-right\" | \"contacts\" | \"arrow-up-link-out\" | \"device-lock\" | \"auto-date\" | \"revert\" | \"guides\" | \"bulk-send\" | \"field-alignment-left\" | \"field-alignment-centre\" | \"field-alignment-right\" | \"accessibility\" | \"arrows-minimise\" | \"document-info\" | \"document-import-fields\" | \"document-merge-alt2\" | \"document-combine\" | \"field-alignment-top\" | \"field-alignment-middle\" | \"field-alignment-bottom\" | \"box-empty\" | \"box-ticked\" | \"box-crossed\" | \"sort-alphabetically-a-z\" | \"sort-alphabetically-z-a\" | \"linked-document\" | \"document-replace\" | \"field-scale\" | \"field-match-width\" | \"field-match-height\" | \"recipient-link\" | \"recipient-link-broken\" | \"witness-arrow\" | \"branch\" | \"variant\" | \"recipient-details-card\" | \"recipient-details\" | \"field-distribute-vertically\" | \"field-distribute-horizontally\" | \"field-duplicate\" | \"pre-filled-content\" | \"typing-input\" | \"table-split\" | \"add-column-left\" | \"add-column-right\" | \"recipient-links\" | \"list-order\" | \"field-scaling-off\" | \"fit-width\" | \"fit-height\" | \"table-quick-edit\" | \"table-columns\" | \"table-rows\" | \"apply-all-rows\" | \"pagescroll-preview\" | \"page-insert-vertical\" | \"page-insert-horizontal\" | \"circle-quarter\" | \"circle-half\" | \"circle-three-quarter\" | \"time-sort-ascending\" | \"time-sort-descending\" | \"date-sort-ascending\" | \"date-sort-descending\" | \"side-panel-closed\" | \"side-panel-open\" | \"date-sent-sort-ascending\" | \"date-sent-sort-descending\" | \"sort-alphabetically-a-z-alt\" | \"sort-alphabetically-z-a-alt\" | \"template-sent\" | \"template-not-sent\" | \"grid\" | \"linked\" | \"link-broken\" | \"user-assign\" | \"x-letter\" | \"field-selected\" | \"designation\" | \"text-alignment\" | \"field-placement\" | \"typeface\" | \"typesize\" | \"page-layout\" | \"field-special\" | \"link-value\" | \"field-order\" | \"send-arrow\" | \"sent-progress\" | \"circle-filled-quarter\" | \"circle-filled-half\" | \"circle-filled-three-quarter\" | \"document-viewed\" | \"collapse\" | \"logo\"",
                     "references": {
                         "Icon": {
                             "location": "import",

package/dist/collection/components/ls-participant-manager/ls-participant-manager.css

@@ -1,9 +1,3 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid black
-}
-
 .label-span {
   position: absolute;
   font-family: inherit;
@@ -16,32 +10,73 @@
   white-space: nowrap;
 }
 
-h1 {
-  font-size: 19px;
-}
-
 * {
   box-sizing: border-box;
+  margin: 0;
+}
+
+.hidden {
+  visibility: hidden;
+  display: none;
 }
 
-.card {
+.participant-list {
+  position: relative;
   display: flex;
-  padding-right: 4px;
-  padding-left: 4px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  margin: 4px;
-  border-radius: 0.55rem;
-  gap: 4px;
-  border: 0;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.participant-card {
+  display: flex;
+  padding: 0.625rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  align-self: stretch;
+  border-radius: 1rem;
+}
+
+.role-label {
+  display: flex;
+  padding: 0.125rem 0.375rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
 }
 
 .innerButton {
   margin: 0px;
   padding: 0px;
+  max-height: 1.25rem !important;
+  max-width: 1.25rem !important;
   background-color: transparent;
   border: none;
+}
+
+.participant-card-top-items {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.participant-text-description {
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+}
 
+.participant-text-type {
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.25rem; /* 142.857% */
 }
 
 .titleButton {
@@ -49,6 +84,330 @@ h1 {
   text-align: left;
   background-color: transparent;
   border: none;
+}
+
+.ls-editor-infobox {
+  padding: 2px 8px 2px 8px;
+}
+
+.toolbox-section-title {
+  color: var(--gray-100, #45484d);
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.75rem; /* 155.556% */
+}
+
+.toolbox-section-description {
+  color: var(--gray-80, #5e6066);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.add-participant-button {
+  position: sticky;
+  display: flex;
+  padding: 0.75rem 0;
+  margin-bottom: -0.75rem;
+  margin-top: -0.75rem;
+  bottom: -0.75rem;
+  background-image: linear-gradient(to top, var(--gray-10, #f7f8fa) 0%, var(--gray-10, #f7f8fa) 80%, transparent 100%);
+}
+
+.add-participant-button button {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  border: 2px dashed var(--gray-20, #edeff2);
+  background: var(--white, #fff);
+  color: var(--gray-80, #6c6e73);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+}
+
+
+/* Global Styles */
+
+p {
+  color: var(--gray-80, #6c6e73);
+  font-family: var(--font-family);
+  font-size: var(--text-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-sm-line-height);
+}
+
+a {
+  color: var(--primary-60, #4456f6);
+  font-size: var(--text-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-sm-line-height);
+  cursor: pointer;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: var(--primary-70, #2134dc);
+}
+
+.button-link,
+.button-link:hover {
+  all: unset;
+}
+
+select {
+  appearance: none;
+  height: 36px;
+}
+
+.input-wrapper {
+  position: relative;
+  width: fit-content;
+}
+
+#selectorIcon {
+  position: absolute;
+  top: 50%;
+  right: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-80, #6c6e73);
+}
+
+#selectLeadingIcon {
+  position: absolute;
+  top: 50%;
+  left: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-80, #6c6e73);
+}
+
+.has-leading-icon {
+  padding-left: 2.5rem;
+}
+
+input,
+select,
+textarea {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);
+  padding: 0.5rem 0.75rem;
+  font-family: var(--font-family);
+  font-size: var(--text-sm);
+  border-radius: 0.5rem;
+  color: var(--gray-100, #45484d);
+  font-weight: 400;
+}
+
+input::placeholder,
+select::placeholder,
+textarea::placeholder {
+  color: var(--gray-60, #afb0b2);
+}
+
+input:hover,
+select:hover,
+textarea:hover {
+  border-color: var(--gray-50, #c8c9cc);
+  background-color: var(--white, #fff);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);
+  border-color: var(--primary-60, #4456f6);
+  background-color: var(--white, #fff);
+}
+
+input:active,
+select:active,
+textarea:active {
+  border-color: var(--primary-50, #5185ff);
+}
+
+input:disabled,
+select:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  background-color: var(--gray-10, #f7f8fa);
+}
+
+input[type='checkbox'] {
+  appearance: none;
+  position: relative;
+  height: 1rem;
+  width: 1rem;
+  padding: 0.25rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid #d1d5db;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+input[type='checkbox']:checked,
+input[type='checkbox'].indeterminate {
+  background-color: var(--primary-60, #4456f6);
+  border: none;
+}
+
+input[type='checkbox']:checked::after {
+  content: '';
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);
+  width: 0.5rem;
+  height: 0.25rem;
+  border-bottom: 0.125rem solid white;
+  border-right: 0.125rem solid white;
+}
+
+input[type='checkbox'].indeterminate::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.5rem;
+  height: 0.125rem;
+  background-color: white;
+}
+
+input[type='checkbox']:checked:hover,
+input[type='checkbox'].indeterminate:hover {
+  background-color: var(--primary-70, #2134dc);
+  border: none;
+}
+
+input[type='checkbox']:hover {
+  border: 1px solid #9ca3af;
+}
+
+input[type='checkbox']:focus,
+input[type='checkbox']:active {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);
+  background-color: #f0f4f8;
+}
+
+input[type='checkbox']:disabled {
+  background-color: #f3f4f6;
+  outline: none;
+  cursor: not-allowed;
+}
+
+input[type='checkbox']:disabled:checked {
+  background-color: #e5e7eb;
+  border: none;
+  outline: none;
+  cursor: not-allowed;
+}
+
+.checkbox-container {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.checkbox-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.form-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.loading-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  color: var(--primary-60, #0c7cba);
+}
+
+button {
+  border: 0;
+  appearance: button;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-lg);
+  background-color: var(--primary-60, #4456f6);
+  color: white;
+  text-transform: capitalize;
+  min-height: 2.25rem;
+  min-width: 2.25rem;
+}
+
+button.tertiaryGrey {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background-color: white;
+  color: var(--gray-80, #787a80);
+}
+
+button.tertiaryGrey:hover {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--gray-10, #f7f8fa);
+}
+
+.button-group {
+  display: flex;
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-30, #e0e2e5);
+  background: var(--white, #ffffff);
+  overflow: clip;
+}
+
+.button-group button {
+  display: flex;
+  background: transparent;
+  border-radius: unset;
+  padding: 0.25rem 0.75rem;
+  min-width: 2.156rem;
+  min-height: unset;
+  color: var(--gray-80, #6c6e73);
+}
+
+.button-group button:hover {
+  background: var(--gray-10, #f7f8fa);
+}
+
+.button-group > :first-child {
+  border-radius: 0.5rem 0 0 0.5rem;
+}
+
+.button-group > :last-child {
+  border-radius: 0 0.5rem 0.5rem 0;
+}
 
+.button-group > :not(:first-child) {
+  border-left: 1px solid var(--gray-30, #e0e2e5);
 }
 

package/dist/collection/components/ls-participant-manager/ls-participant-manager.js

@@ -1,9 +1,10 @@
 import { Host, h } from "@stencil/core";
+import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
 export class LsParticipantManager {
     /**
-   * The base template information (as JSON).
-   * {LSDocumentViewer}
-   */
+     * The base template information (as JSON).
+     * {LSDocumentViewer}
+     */
     editor;
     /**
      * The base template information (as JSON).
@@ -22,25 +23,47 @@ export class LsParticipantManager {
         this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);
     }
     createHandler() {
-        this.update.emit([{
-                action: 'create', data: {
+        const data = [
+            {
+                action: 'create',
+                data: {
                     id: btoa('rol' + crypto.randomUUID()),
                     name: 'Signer ' + this.template.roles.length,
                     roleType: 'SIGNER',
-                    signerIndex: 1,
+                    signerIndex: this.template.roles.length,
                     ordinal: this.template.roles.length,
                     signerParent: null,
-                    experience: ''
-                }
-            }]);
+                    experience: '',
+                },
+            },
+        ];
+        this.update.emit(data);
+        this.mutate.emit(data);
     }
+    participantColor = (index) => {
+        return index > 200 ? 'gray' : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+    };
     render() {
-        return (h(Host, { key: '92d092847e7eaf1ce62a18ca241fa5e700fcf62a' }, h("h1", { key: '2c6598a55f8363a76659848f3b7afb48d1734a29' }, "Participants"), this.template?.roles.map((r, index) => {
-            return h("div", { class: "card", style: {
-                    backgroundColor: this.editor.roleColors[index].faded,
-                    border: "1px solid " + this.editor.roleColors[index].primary
-                } }, h("button", { class: "titleButton", onClick: () => { this.selectedHandler(r); } }, r?.name || 'Signer ' + index), h("button", { class: "innerButton", onClick: () => { this.deleteHandler(r); } }, h("ls-icon", { name: "trash", size: "18" })), index !== 0 ? h("button", { class: "innerButton", onClick: () => { this.swapHandler(r, this.template.roles[index - 1]); } }, h("ls-icon", { name: "arrow-up", size: "18" })) : h(h.Fragment, null), index < this.template.roles.length - 1 ? h("button", { class: "innerButton", onClick: () => { this.swapHandler(r, this.template.roles[index + 1]); } }, h("ls-icon", { name: "arrow-down", size: "18" })) : h(h.Fragment, null));
-        }), h("button", { key: 'cb5611801cc242e1f520fd5d01315c24f96c9d8e', onClick: () => this.createHandler() }, "Add Participant"), h("slot", { key: '48c0500567aa2f2fad82cd649dd7d6d38c543ff5' })));
+        return (h(Host, { key: '5410e94b861138ea9ad1723c11acdbd0035eed21' }, h("div", { key: 'ae5b41faab6087917c8f19e53ab457f1514f7dbb', class: "ls-editor-infobox" }, h("h2", { key: '0499354c9a207d1d395fd05ffaf99f8bc3bfe5ab', class: "toolbox-section-title" }, "Participants"), h("p", { key: 'ce76df4d92e82768ca0d3bfaff94d21bb0ccfc72', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: '96c91f99af48fd06041b9cada12092ba6b2d7d06', class: "participant-list" }, this.template?.roles.map((r, index) => {
+            return (h("div", { class: "participant-card", onClick: () => {
+                    this.selectedHandler(r);
+                }, style: {
+                    background: `var(--${this.participantColor(r?.signerIndex)}-10)`,
+                    border: '1px solid ' + `var(--${this.participantColor(r?.signerIndex)}-60)`,
+                    marginTop: r.signerIndex > 100 && '-0.813rem',
+                }, onMouseEnter: e => e.currentTarget.querySelector('.innerButton')?.classList.remove('hidden'), onMouseLeave: e => e.currentTarget.querySelector('.innerButton')?.classList.add('hidden') }, h("div", { class: 'participant-card-top-items' }, ' ', h("div", { class: 'role-label', style: {
+                    background: `var(--${this.participantColor(r?.signerIndex)}-20)`,
+                    color: `var(--${this.participantColor(r?.signerIndex)}-90)`,
+                } }, h("ls-icon", { name: r?.signerIndex > 100 ? 'eye' : 'signature' }), 'Participant ' + (index + 1)), h("div", { class: "innerButton hidden", onClick: () => {
+                    this.deleteHandler(r);
+                } }, h("ls-icon", { name: "trash", size: "18", style: {
+                    color: `var(--${this.participantColor(r?.signerIndex)}-40)`,
+                } }))), h("div", { class: 'participant-card-text' }, h("p", { class: "participant-text-description", style: {
+                    color: `var(--${this.participantColor(r?.signerIndex)}-100)`,
+                } }, r.name || `${r.signerIndex > 100 ? 'Witness' : 'Signer'} ${index + 1}`), h("p", { class: "participant-text-type", style: {
+                    color: `var(--${this.participantColor(r?.signerIndex)}-80)`,
+                } }, r.signerIndex > 100 ? 'Witness' : 'Signer'))));
+        })), h("div", { key: 'a672fcda086d600b58938fdd5ab9c66854d81b7a', class: 'add-participant-button' }, h("button", { key: '7a742d4a99b9129c738edc571fc7c35633fc2371', onClick: () => this.createHandler() }, h("ls-icon", { key: '04d51087a6a8c592ac2e51a0ab3602a9c6d214ba', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: '3185f42a372c38495d011c62c7c35ff1610ae6e1' }, "Add Participant"))), h("slot", { key: 'bf619899ce807ca4743c27795cc118ce19b3dd65' })));
     }
     static get is() { return "ls-participant-manager"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-participant-manager/ls-participant-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-participant-manager.js","sourceRoot":"","sources":["../../../src/components/ls-participant-manager/ls-participant-manager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { LSApiRole } from '../../types/LSApiRole';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\n\n@Component({\n  tag: 'ls-participant-manager',\n  styleUrl: 'ls-participant-manager.css',\n  shadow: true,\n})\n\nexport class LsParticipantManager {\n\n  /**\n * The base template information (as JSON).\n * {LSDocumentViewer}\n */\n  @Prop() editor: LsDocumentViewer;\n\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() template: LSApiTemplate;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) update: EventEmitter<LSMutateEvent[]>;\n\n  selectedHandler(_role) {\n    //console.log(role, 'participant manager')\n  }\n\n  deleteHandler(role: LSApiRole) {\n    this.update.emit([{ action: 'delete', data: role }])\n  }\n\n  swapHandler(role1, role2) {\n    this.update.emit([{ action: 'swap', data: role1, data2: role2 }])\n  }\n  createHandler() {\n    this.update.emit([{\n      action: 'create', data: {\n        id: btoa('rol' + crypto.randomUUID()),\n        name: 'Signer ' + this.template.roles.length,\n        roleType: 'SIGNER',\n        signerIndex: 1,\n        ordinal: this.template.roles.length,\n        signerParent: null,\n        experience: ''\n      }\n    }])\n  }\n\n  render() {\n    return (\n      <Host>\n        <h1>Participants</h1>\n        {this.template?.roles.map((r, index) => {\n          return <div class=\"card\" style={{\n            backgroundColor: this.editor.roleColors[index].faded,\n            border: \"1px solid \" + this.editor.roleColors[index].primary\n          }}>\n            <button class=\"titleButton\" onClick={() => { this.selectedHandler(r) }}>{r?.name || 'Signer ' + index}</button>\n            <button class=\"innerButton\" onClick={() => { this.deleteHandler(r) }}><ls-icon name=\"trash\" size=\"18\" /></button>\n            {index !== 0 ? <button class=\"innerButton\" onClick={() => { this.swapHandler(r, this.template.roles[index - 1]) }}><ls-icon name=\"arrow-up\" size=\"18\" /></button> : <></>}\n            {index < this.template.roles.length - 1 ? <button class=\"innerButton\" onClick={() => { this.swapHandler(r, this.template.roles[index + 1]) }}><ls-icon name=\"arrow-down\" size=\"18\" /></button> : <></>}\n          </div>\n        })}\n        <button onClick={() => this.createHandler()}>Add Participant</button>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-participant-manager.js","sourceRoot":"","sources":["../../../src/components/ls-participant-manager/ls-participant-manager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { LSApiRole } from '../../types/LSApiRole';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-participant-manager',\n  styleUrl: 'ls-participant-manager.css',\n  shadow: true,\n})\nexport class LsParticipantManager {\n  /**\n   * The base template information (as JSON).\n   * {LSDocumentViewer}\n   */\n  @Prop() editor: LsDocumentViewer;\n\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() template: LSApiTemplate;\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  selectedHandler(_role) {\n    //console.log(role, 'participant manager')\n  }\n\n  deleteHandler(role: LSApiRole) {\n    this.update.emit([{ action: 'delete', data: role }]);\n  }\n\n  swapHandler(role1, role2) {\n    this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);\n  }\n  createHandler() {\n    const data: LSMutateEvent[] = [\n      {\n        action: 'create',\n        data: {\n          id: btoa('rol' + crypto.randomUUID()),\n          name: 'Signer ' + this.template.roles.length,\n          roleType: 'SIGNER',\n          signerIndex: this.template.roles.length,\n          ordinal: this.template.roles.length,\n          signerParent: null,\n          experience: '',\n        },\n      },\n    ]\n    this.update.emit(data);\n    this.mutate.emit(data);\n  }\n\n  participantColor = (index: number) => {\n    return index > 200 ? 'gray' : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"ls-editor-infobox\">\n          <h2 class=\"toolbox-section-title\">Participants</h2>\n          <p class=\"toolbox-section-description\">Select and Click to place Signature fields where you’d like on the Document.</p>\n        </div>\n        <div class=\"participant-list\">\n          {this.template?.roles.map((r, index) => {\n            return (\n              <div\n                class=\"participant-card\"\n                onClick={() => {\n                  this.selectedHandler(r);\n                }}\n                style={{\n                  background: `var(--${this.participantColor(r?.signerIndex)}-10)`,\n                  border: '1px solid ' + `var(--${this.participantColor(r?.signerIndex)}-60)`,\n                  marginTop: r.signerIndex > 100 && '-0.813rem',\n                }}\n                onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.innerButton')?.classList.remove('hidden')}\n                onMouseLeave={e => (e.currentTarget as HTMLElement).querySelector('.innerButton')?.classList.add('hidden')}\n              >\n                <div class={'participant-card-top-items'}>\n                  {' '}\n                  <div\n                    class={'role-label'}\n                    style={{\n                      background: `var(--${this.participantColor(r?.signerIndex)}-20)`,\n                      color: `var(--${this.participantColor(r?.signerIndex)}-90)`,\n                    }}\n                  >\n                    <ls-icon name={r?.signerIndex > 100 ? 'eye' : 'signature'} />\n                    {'Participant ' + (index + 1)}\n                  </div>\n                  <div\n                    class=\"innerButton hidden\"\n                    onClick={() => {\n                      this.deleteHandler(r);\n                    }}\n                  >\n                    <ls-icon\n                      name=\"trash\"\n                      size=\"18\"\n                      style={{\n                        color: `var(--${this.participantColor(r?.signerIndex)}-40)`,\n                      }}\n                    />\n                  </div>\n                </div>\n                <div class={'participant-card-text'}>\n                  <p\n                    class=\"participant-text-description\"\n                    style={{\n                      color: `var(--${this.participantColor(r?.signerIndex)}-100)`,\n                    }}\n                  >\n                    {r.name || `${r.signerIndex > 100 ? 'Witness' : 'Signer'} ${index + 1}`}\n                  </p>\n                  <p\n                    class=\"participant-text-type\"\n                    style={{\n                      color: `var(--${this.participantColor(r?.signerIndex)}-80)`,\n                    }}\n                  >\n                    {r.signerIndex > 100 ? 'Witness' : 'Signer'}\n                  </p>\n                </div>\n\n                {/* {index !== 0 ? (\n                <button\n                  class=\"innerButton\"\n                  onClick={() => {\n                    this.swapHandler(r, this.template.roles[index - 1]);\n                  }}\n                >\n                  <ls-icon name=\"arrow-up\" size=\"18\" />\n                </button>\n              ) : (\n                <></>\n              )}\n              {index < this.template.roles.length - 1 ? (\n                <button\n                  class=\"innerButton\"\n                  onClick={() => {\n                    this.swapHandler(r, this.template.roles[index + 1]);\n                  }}\n                >\n                  <ls-icon name=\"arrow-down\" size=\"18\" />\n                </button>\n              ) : (\n                <></>\n              )} */}\n              </div>\n            );\n          })}\n        </div>\n        <div class={'add-participant-button'}>\n          <button onClick={() => this.createHandler()}>\n            <ls-icon name=\"user-add\" size=\"20\" color=\"var(--gray-100, #45484D);\" />\n            <p>Add Participant</p>\n          </button>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}