legalesign-document-viewer 0.1.3 → 0.1.7

package/dist/collection/components/ls-field-properties-general/ls-field-properties-general.css

@@ -1,17 +1,149 @@
 :host {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+* {
+  margin: 0;
+}
+
+.properties-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.field-set {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
 }
 
 .ls-field-properties-section {
-   display: flex;
-   flex-direction: column;
-  min-width: 110px;
-  background-color: white;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.row {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ls-field-properties-section-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem;
+}
+
+.ls-field-properties-section-title {
+  color: var(--gray-90, #5e6066);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+}
+
+.ls-field-properties-section-description {
+  overflow: hidden;
+  color: var(--gray-80, #6c6e73);
+  text-overflow: ellipsis;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 0.75rem; /* 120% */
+}
+
+.ls-field-type-wrapper {
+  position: relative;
+  border-radius: 0.875rem;
+  padding: 0.25rem;
+}
+
+.ls-field-type-inner {
+  border-radius: 0.625rem;
+  background: var(--white, #fff);
+  display: flex;
+  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
+  align-items: center;
+  gap: 0.875rem;
+  align-self: stretch;
+}
+
+.ls-field-type-icon {
+  display: flex;
+  padding: 0.5rem;
+  align-items: center;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.ls-field-type-name {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5rem; /* 150% */
+}
+
+.tabs-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  width: 100%;
+  gap: 0.125rem;
+  padding: 0.125rem;
+  border: 1px solid var(--gray-30, #e0e2e5);
   border-radius: 0.75rem;
-  border: 1px solid var(--gray-20, #EDEFF2);
-  background: var(--white, #FFF);
-  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+  background: var(--white, #ffffff);
+}
 
+.ls-tab {
+  all: unset;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 0.625rem;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+  color: var(--gray-80, #6c6e73);
+}
+
+.ls-tab.active {
+  background: var(--primary-10, #eff4ff);
+  color: var(--primary-60, #4456f6);
+}
+
+.ls-tab:not(.active):hover {
+  background: var(--gray-10, #f7f8fa);
+}
+
+.button-footer {
+  display: flex;
+  padding-top: 1rem;
+  border-top: 1px solid var(--gray-20, #f0f1f2);
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: auto;
+}
+
+.scrolling-container {
+  overflow-y: auto;
+  padding: 0 1rem;
+  margin: 0 -1rem;
+  height: calc(100% - 10.938rem);
 }
 
 /* Global Styles */
@@ -47,11 +179,15 @@ a:hover {
 select {
   appearance: none;
   height: 36px;
+  width: 100%;
 }
 
 .input-wrapper {
   position: relative;
-  width: fit-content;
+}
+
+.full-width {
+  width: 100%;
 }
 
 #selectorIcon {
@@ -234,6 +370,8 @@ input[type='checkbox']:disabled:checked {
 }
 
 button {
+  display: flex;
+  gap: 0.5rem;
   border: 0;
   appearance: button;
   cursor: pointer;
@@ -243,6 +381,7 @@ button {
   border-radius: var(--radius-lg);
   background-color: var(--primary-60, #4456f6);
   color: white;
+  font-weight: 500;
   text-transform: capitalize;
   min-height: 2.25rem;
   min-width: 2.25rem;
@@ -259,6 +398,31 @@ button.tertiaryGrey:hover {
   background: var(--gray-10, #f7f8fa);
 }
 
+button.secondary {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--white, #fff);
+  color: var(--gray-90, #5e6066);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+button.secondary:hover {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--gray-10, #f7f8fa);
+}
+
+button.destructive {
+  border: 1px solid var(--red-60, #f04438);
+  background-color: white;
+  color: var(--red-60);
+}
+
+button.destructive:hover {
+  border: 1px solid var(--red-70, #d92d20);
+  background: var(--red-10, #fff1f0);
+}
+
+
+
 .button-group {
   display: flex;
   border-radius: 0.5rem;
@@ -292,4 +456,3 @@ button.tertiaryGrey:hover {
 .button-group > :not(:first-child) {
   border-left: 1px solid var(--gray-30, #e0e2e5);
 }
-

package/dist/collection/components/ls-field-properties-general/ls-field-properties-general.js

@@ -1,8 +1,21 @@
 import { Host, h } from "@stencil/core";
+import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
+import { validationTypes } from "../ls-document-viewer/editorUtils";
 export class LsFieldPropertiesGeneral {
     dataItem;
+    fieldSet = 'content';
+    signerColor = (index) => {
+        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+    };
     render() {
-        return (h(Host, { key: 'e87b03ad929cc1dea1d030fd612a310d5173c838' }, h("div", { key: 'cf2d750d5aa86e737e54b2c7175e0f9af84b5fde', class: "ls-field-properties-section" }, "General Field"), h("div", { key: '4f18444c661c88c4b79510d5b0b7258285c15858' }, "Label: ", h("input", { key: '532c0119c5bbbda70844d91616c4ee50b8d783f7', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '9f38fd900b3133eec3bcb0f8d36cc576f33dfa41', dataItem: this.dataItem }), h("slot", { key: '15467859e256ec22ec6201002cce2605bf4d3f27' })));
+        return (h(Host, { key: '66c7c1e07a4d46fe9272b8de3084c2446a7df45e' }, h("div", { key: '5656760e45235dc200c67a23029c6b46083ccd13', class: 'tabs-container' }, h("button", { key: '9784275994038a7fdee05ab1d32dd2c04746d243', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '85f90b1461e68df6bc363fb58430d79b79a67842', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '4ac939867be3e021852fcecf195a7e0f3908de4e', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: '7e7029e78a0ff86e61823eecbc955a15772f00da', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (h("div", { class: 'field-set' }, h("ls-field-dimensions", { dataItem: this.dataItem }))) : (h("div", { class: 'field-set' }, h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), h("div", { class: 'ls-field-type-wrapper', style: {
+                border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
+                background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
+            } }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
+                border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
+                color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
+                background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
+            } }, h("ls-icon", { name: "field-placement", size: "20" })), h("p", { class: 'ls-field-type-name' }, "General Field")))), h("div", { class: 'ls-field-properties-section row' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), h("ls-toggle", null)), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" })), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Content Format"), h("p", { class: 'ls-field-properties-section-description' }, "Select the specific format you want the Recipient to enter..")), h("div", { class: 'input-wrapper' }, h("ls-icon", { id: "selectorIcon", name: "selector" }), h("select", null, validationTypes.map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: 'bae5baaa40a845115568677631f393393354312e', class: 'button-footer' }, h("button", { key: 'c47c6ce5b6104a9c53e2e8376abf92b29a6385d2', class: 'secondary' }, h("ls-icon", { key: '8a53d65c2060cb3bdc9143403d7250cbefdfdac6', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: 'a0fa01929abbacec569bd449320cd9d720597e3d', class: 'destructive' }, h("ls-icon", { key: '4c6bb00579832f8e44c82b516cf3e47200d1ad71', name: "trash", size: "20" }), "Delete")), h("slot", { key: 'b18c96fbcac26a8e5c73bd1d5f97f3d58f839d73' })));
     }
     static get is() { return "ls-field-properties-general"; }
     static get encapsulation() { return "shadow"; }
@@ -41,6 +54,26 @@ export class LsFieldPropertiesGeneral {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "fieldSet": {
+                "type": "string",
+                "attribute": "field-set",
+                "mutable": false,
+                "complexType": {
+                    "original": "'content' | 'placement' | 'dimensions'",
+                    "resolved": "\"content\" | \"dimensions\" | \"placement\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'content'"
             }
         };
     }

package/dist/collection/components/ls-field-properties-general/ls-field-properties-general.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-field-properties-general.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-general/ls-field-properties-general.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,wBAAwB;IAC3B,QAAQ,CAAe;IAE/B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,6BAA6B,oBAAqB;YAC9D;;gBAAY,8DAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,GAAE,CAAM;YAClE,4EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YAChD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-general',\n  styleUrl: 'ls-field-properties-general.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesGeneral {\n  @Prop() dataItem: LSApiElement;\n\n  render() {\n    return (\n      <Host>\n        <div class={\"ls-field-properties-section\"}>General Field</div>\n        <div>Label: <input value={this.dataItem?.label} width=\"30\"/></div>\n        <ls-field-dimensions dataItem={this.dataItem} />\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-field-properties-general.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-general/ls-field-properties-general.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { validationTypes } from '../ls-document-viewer/editorUtils';\n\n@Component({\n  tag: 'ls-field-properties-general',\n  styleUrl: 'ls-field-properties-general.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesGeneral {\n  @Prop() dataItem: LSApiElement;\n  @Prop() fieldSet: 'content' | 'placement' | 'dimensions' = 'content';\n    \n      signerColor = (index: number) => {\n        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n      };\n\n  render() {\n    return (\n      <Host>\n        <div class={'tabs-container'}>\n                  <button class={this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'content')}>\n                    Content\n                  </button>\n                  <button class={this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'placement')}>\n                    Placement\n                  </button>\n                  <button class={this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'dimensions')}>\n                    Dimensions\n                  </button>\n                </div>\n                <div class={'scrolling-container'}>\n                  {this.fieldSet === 'placement' ? (\n                    <ls-field-placement dataItem={this.dataItem} />\n                  ) : this.fieldSet === 'dimensions' ? (\n                    <div class={'field-set'}>\n                      <ls-field-dimensions dataItem={this.dataItem} />\n                    </div>\n                  ) : (\n                    <div class={'field-set'}>\n                      <div class={'ls-field-properties-section'}>\n                        <div class={'ls-field-properties-section-text'}>\n                          <p class={'ls-field-properties-section-title'}>Field Type</p>\n                          <p class={'ls-field-properties-section-description'}>The Field you currently have selected</p>\n                        </div>\n                        <div\n                          class={'ls-field-type-wrapper'}\n                          style={{\n                            border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,\n                            background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n                          }}\n                        >\n                          <div class={'ls-field-type-inner'}>\n                            <div\n                              class={'ls-field-type-icon'}\n                              style={{\n                                border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n                                color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n                                background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n                              }}\n                            >\n                              <ls-icon name=\"field-placement\" size=\"20\" />\n                            </div>\n                            <p class={'ls-field-type-name'}>General Field</p>\n                          </div>\n                        </div>\n                      </div>\n                      <div class={'ls-field-properties-section row'}>\n                        <div class={'ls-field-properties-section-text'}>\n                          <p class={'ls-field-properties-section-title'}>Required Field</p>\n                        </div>\n                        <ls-toggle />\n                      </div>\n        \n                      <div class={'ls-field-properties-section'}>\n                        <div class={'ls-field-properties-section-text'}>\n                          <p class={'ls-field-properties-section-title'}>Field Label</p>\n                          <p class={'ls-field-properties-section-description'}>Add a label to clarify the information required from the Recipient.</p>\n                        </div>\n                        <input value={this.dataItem?.label} width=\"30\" placeholder=\"eg. Sign Here\" />\n                      </div>\n        \n                      <div class={'ls-field-properties-section'}>\n                        <div class={'ls-field-properties-section-text'}>\n                          <p class={'ls-field-properties-section-title'}>Content Format</p>\n                          <p class={'ls-field-properties-section-description'}>Select the specific format you want the Recipient to enter..</p>\n                        </div>\n                        <div class={'input-wrapper'}>\n                          <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n                          <select>\n                            {validationTypes.map(type => (\n                                <option selected={this.dataItem?.validation === type.id} value={type.value}>\n                                  {type.description}\n                                </option>\n                              ))}\n                          </select>\n                        </div>\n                      </div>\n                    </div>\n                  )}\n                </div>\n                <div class={'button-footer'}>\n                  <button class={'secondary'}>\n                    <ls-icon name=\"field-duplicate\" size=\"20\" />\n                    Duplicate\n                  </button>\n                  <button class={'destructive'}>\n                    <ls-icon name=\"trash\" size=\"20\" />\n                    Delete\n                  </button>\n                </div>\n                <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-field-properties-image/ls-field-properties-image.css

@@ -1,5 +1,149 @@
 :host {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+* {
+  margin: 0;
+}
+
+.properties-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.field-set {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+}
+
+.ls-field-properties-section {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.row {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ls-field-properties-section-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem;
+}
+
+.ls-field-properties-section-title {
+  color: var(--gray-90, #5e6066);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+}
+
+.ls-field-properties-section-description {
+  overflow: hidden;
+  color: var(--gray-80, #6c6e73);
+  text-overflow: ellipsis;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 0.75rem; /* 120% */
+}
+
+.ls-field-type-wrapper {
+  position: relative;
+  border-radius: 0.875rem;
+  padding: 0.25rem;
+}
+
+.ls-field-type-inner {
+  border-radius: 0.625rem;
+  background: var(--white, #fff);
+  display: flex;
+  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
+  align-items: center;
+  gap: 0.875rem;
+  align-self: stretch;
+}
+
+.ls-field-type-icon {
+  display: flex;
+  padding: 0.5rem;
+  align-items: center;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.ls-field-type-name {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5rem; /* 150% */
+}
+
+.tabs-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  width: 100%;
+  gap: 0.125rem;
+  padding: 0.125rem;
+  border: 1px solid var(--gray-30, #e0e2e5);
+  border-radius: 0.75rem;
+  background: var(--white, #ffffff);
+}
+
+.ls-tab {
+  all: unset;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 0.625rem;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+  color: var(--gray-80, #6c6e73);
+}
+
+.ls-tab.active {
+  background: var(--primary-10, #eff4ff);
+  color: var(--primary-60, #4456f6);
+}
+
+.ls-tab:not(.active):hover {
+  background: var(--gray-10, #f7f8fa);
+}
+
+.button-footer {
+  display: flex;
+  padding-top: 1rem;
+  border-top: 1px solid var(--gray-20, #f0f1f2);
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: auto;
+}
+
+.scrolling-container {
+  overflow-y: auto;
+  padding: 0 1rem;
+  margin: 0 -1rem;
+  height: calc(100% - 10.938rem);
 }
 
 /* Global Styles */
@@ -35,11 +179,15 @@ a:hover {
 select {
   appearance: none;
   height: 36px;
+  width: 100%;
 }
 
 .input-wrapper {
   position: relative;
-  width: fit-content;
+}
+
+.full-width {
+  width: 100%;
 }
 
 #selectorIcon {
@@ -222,6 +370,8 @@ input[type='checkbox']:disabled:checked {
 }
 
 button {
+  display: flex;
+  gap: 0.5rem;
   border: 0;
   appearance: button;
   cursor: pointer;
@@ -231,6 +381,7 @@ button {
   border-radius: var(--radius-lg);
   background-color: var(--primary-60, #4456f6);
   color: white;
+  font-weight: 500;
   text-transform: capitalize;
   min-height: 2.25rem;
   min-width: 2.25rem;
@@ -247,6 +398,31 @@ button.tertiaryGrey:hover {
   background: var(--gray-10, #f7f8fa);
 }
 
+button.secondary {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--white, #fff);
+  color: var(--gray-90, #5e6066);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+button.secondary:hover {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--gray-10, #f7f8fa);
+}
+
+button.destructive {
+  border: 1px solid var(--red-60, #f04438);
+  background-color: white;
+  color: var(--red-60);
+}
+
+button.destructive:hover {
+  border: 1px solid var(--red-70, #d92d20);
+  background: var(--red-10, #fff1f0);
+}
+
+
+
 .button-group {
   display: flex;
   border-radius: 0.5rem;
@@ -280,4 +456,3 @@ button.tertiaryGrey:hover {
 .button-group > :not(:first-child) {
   border-left: 1px solid var(--gray-30, #e0e2e5);
 }
-

package/dist/collection/components/ls-field-properties-image/ls-field-properties-image.js

@@ -1,8 +1,23 @@
 import { Host, h } from "@stencil/core";
+import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
+import { validationTypes } from "../ls-document-viewer/editorUtils";
 export class LsFieldPropertiesImage {
     dataItem;
+    fieldSet = 'content';
+    signerColor = (index) => {
+        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+    };
     render() {
-        return (h(Host, { key: 'c690e84f0aaa5c21f912350d9edf2ff1805ee7c8' }, h("div", { key: 'bb1c3cd8c3a50f62010689e22b043bcce518a365', class: "ls-field-properties-section" }, "Image Properties"), h("div", { key: '8805a1f3f16fcd8a662622af4c153a40cd9fa113' }, "Label: ", h("input", { key: 'fdacaeeb623483d8ff9a1485223eb2e88d3a6f47', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: 'f666dd08fe2c5d1e013bb36bf441e32be69b0b04', dataItem: this.dataItem }), h("slot", { key: 'fda720e8f6e3cdabd50a9e41e40172a34681c300' })));
+        return (h(Host, { key: '635907f2562fd34d194247189529350ce08472c1' }, h("div", { key: '29ebc137c3e2e94ef51d65a338feefdb5568e6f2', class: 'tabs-container' }, h("button", { key: '2589dd19e0cc82ae107a4cd7d59686a4d36650c0', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: 'c783bd7b3fc67ef709d09b3edcb1dea4ee4964f8', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: 'fd264269a617d7aada8808121566524bdff64ae6', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: 'a7f3daddab93c4dd0e5558c1ce6cbff94a49d0e6', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (h("div", { class: 'field-set' }, h("ls-field-dimensions", { dataItem: this.dataItem }))) : (h("div", { class: 'field-set' }, h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), h("div", { class: 'ls-field-type-wrapper', style: {
+                border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
+                background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
+            } }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
+                border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
+                color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
+                background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
+            } }, h("ls-icon", { name: "photograph", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Image")))), h("div", { class: 'ls-field-properties-section row' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), h("ls-toggle", null)), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" })), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Content Format"), h("p", { class: 'ls-field-properties-section-description' }, "Select the specific format you want the Recipient to enter..")), h("div", { class: 'input-wrapper' }, h("ls-icon", { id: "selectorIcon", name: "selector" }), h("select", null, validationTypes
+            .filter(type => type.formType === 'image')
+            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: '7a865a32f7df9ba68e422d8fed59ad2dc9da8390', class: 'button-footer' }, h("button", { key: '808702e7bbdaae99f009f1bee44055e6d251f2ff', class: 'secondary' }, h("ls-icon", { key: '378f763114db8cb053b78dc09c6e72423104b14c', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: '8e59f7c362245d958b1438d27ec0b825e561f0d2', class: 'destructive' }, h("ls-icon", { key: 'e093ee2b95bb0f7e2212f3fb8d2291833c788cb6', name: "trash", size: "20" }), "Delete")), h("slot", { key: '95136c1553098b6146b1f67ed17a38b30e727c2d' })));
     }
     static get is() { return "ls-field-properties-image"; }
     static get encapsulation() { return "shadow"; }
@@ -41,6 +56,26 @@ export class LsFieldPropertiesImage {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "fieldSet": {
+                "type": "string",
+                "attribute": "field-set",
+                "mutable": false,
+                "complexType": {
+                    "original": "'content' | 'placement' | 'dimensions'",
+                    "resolved": "\"content\" | \"dimensions\" | \"placement\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'content'"
             }
         };
     }

package/dist/collection/components/ls-field-properties-image/ls-field-properties-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-field-properties-image.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-image/ls-field-properties-image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,sBAAsB;IACzB,QAAQ,CAAe;IAE/B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,6BAA6B,uBAAwB;YACjE;;gBAAY,8DAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,GAAE,CAAM;YAClE,4EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YAChD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-image',\n  styleUrl: 'ls-field-properties-image.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesImage {\n  @Prop() dataItem: LSApiElement;\n\n  render() {\n    return (\n      <Host>\n        <div class={\"ls-field-properties-section\"}>Image Properties</div>\n        <div>Label: <input value={this.dataItem?.label} width=\"30\"/></div>\n        <ls-field-dimensions dataItem={this.dataItem} />\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-field-properties-image.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-image/ls-field-properties-image.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { validationTypes } from '../ls-document-viewer/editorUtils';\n\n@Component({\n  tag: 'ls-field-properties-image',\n  styleUrl: 'ls-field-properties-image.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesImage {\n  @Prop() dataItem: LSApiElement;\n  @Prop() fieldSet: 'content' | 'placement' | 'dimensions' = 'content';\n\n  signerColor = (index: number) => {\n    return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class={'tabs-container'}>\n          <button class={this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'content')}>\n            Content\n          </button>\n          <button class={this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'placement')}>\n            Placement\n          </button>\n          <button class={this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'dimensions')}>\n            Dimensions\n          </button>\n        </div>\n        <div class={'scrolling-container'}>\n          {this.fieldSet === 'placement' ? (\n            <ls-field-placement dataItem={this.dataItem} />\n          ) : this.fieldSet === 'dimensions' ? (\n            <div class={'field-set'}>\n              <ls-field-dimensions dataItem={this.dataItem} />\n            </div>\n          ) : (\n            <div class={'field-set'}>\n              <div class={'ls-field-properties-section'}>\n                <div class={'ls-field-properties-section-text'}>\n                  <p class={'ls-field-properties-section-title'}>Field Type</p>\n                  <p class={'ls-field-properties-section-description'}>The Field you currently have selected</p>\n                </div>\n                <div\n                  class={'ls-field-type-wrapper'}\n                  style={{\n                    border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,\n                    background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n                  }}\n                >\n                  <div class={'ls-field-type-inner'}>\n                    <div\n                      class={'ls-field-type-icon'}\n                      style={{\n                        border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n                        color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n                        background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n                      }}\n                    >\n                      <ls-icon name=\"photograph\" size=\"20\" />\n                    </div>\n                    <p class={'ls-field-type-name'}>Image</p>\n                  </div>\n                </div>\n              </div>\n              <div class={'ls-field-properties-section row'}>\n                <div class={'ls-field-properties-section-text'}>\n                  <p class={'ls-field-properties-section-title'}>Required Field</p>\n                </div>\n                <ls-toggle />\n              </div>\n\n              <div class={'ls-field-properties-section'}>\n                <div class={'ls-field-properties-section-text'}>\n                  <p class={'ls-field-properties-section-title'}>Field Label</p>\n                  <p class={'ls-field-properties-section-description'}>Add a label to clarify the information required from the Recipient.</p>\n                </div>\n                <input value={this.dataItem?.label} width=\"30\" placeholder=\"eg. Sign Here\" />\n              </div>\n\n              <div class={'ls-field-properties-section'}>\n                <div class={'ls-field-properties-section-text'}>\n                  <p class={'ls-field-properties-section-title'}>Content Format</p>\n                  <p class={'ls-field-properties-section-description'}>Select the specific format you want the Recipient to enter..</p>\n                </div>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n                  <select>\n                    {validationTypes\n                      .filter(type => type.formType === 'image')\n                      .map(type => (\n                        <option selected={this.dataItem?.validation === type.id} value={type.value}>\n                          {type.description}\n                        </option>\n                      ))}\n                  </select>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n        <div class={'button-footer'}>\n          <button class={'secondary'}>\n            <ls-icon name=\"field-duplicate\" size=\"20\" />\n            Duplicate\n          </button>\n          <button class={'destructive'}>\n            <ls-icon name=\"trash\" size=\"20\" />\n            Delete\n          </button>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}