legalesign-document-viewer 0.1.2 → 0.1.4

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

@@ -3,6 +3,7 @@
   flex-direction: column;
   gap: 1rem;
   width: 100%;
+  height: 100%;
   position: relative;
 }
 
@@ -21,7 +22,7 @@
   flex-direction: column;
   gap: 1rem;
   width: 100%;
-} 
+}
 
 .ls-field-properties-section {
   display: flex;
@@ -115,7 +116,7 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem;
   border-radius: 0.625rem;
   font-size: 0.875rem;
   font-style: normal;
@@ -132,6 +133,15 @@
 .ls-tab:not(.active):hover {
   background: var(--gray-10, #f7f8fa);
 }
+
+
+.scrolling-container {
+  overflow-y: auto;
+  padding: 0 1rem;
+  margin: 0 -1rem;
+  height: calc(100% - 10.938rem);
+}
+
 /* Global Styles */
 
 p {
@@ -356,6 +366,8 @@ input[type='checkbox']:disabled:checked {
 }
 
 button {
+  display: flex;
+  gap: 0.5rem;
   border: 0;
   appearance: button;
   cursor: pointer;
@@ -365,6 +377,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;
@@ -381,6 +394,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;
@@ -414,5 +452,3 @@ button.tertiaryGrey:hover {
 .button-group > :not(:first-child) {
   border-left: 1px solid var(--gray-30, #e0e2e5);
 }
-
-

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

@@ -1,9 +1,24 @@
 import { Host, h } from "@stencil/core";
+import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
 export class LsFieldPropertiesSignature {
+    /**
+     * The selected items information (as JSON).
+     * {LSApiElement[]}
+     */
     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: '902b7e4b85508cec60977d4e40bbc070d9ef1839' }, h("div", { key: '081bcf381484c555f8960d484ed40630dfdb6162', class: 'tabs-container' }, h("button", { key: '3f92e00c092e813542eab9a3ed7d859ccd4af855', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '3f197a95a8ae4cc55c9ea2502fe492cd2d0cc882', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '5e7bb07611cf2665b1df1c4de10afb8886281e20', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), 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' }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon' }, h("ls-icon", { name: "signature", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Signature")))), 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, h("option", { value: "text" }, "Text"), h("option", { value: "email" }, "Email"), h("option", { value: "signature" }, "Signature")))))), h("div", { key: 'c3c1222873d5185d387c9b1f6d8a25c0df6913bf', class: 'button-footer' }, h("button", { key: '2b3782d9c79e352943cc63ee90a055d0947989c1' }, "Duplicate"), h("button", { key: '6c2423657ed456ebadb8e235e231e14cc13ca809' }, "Delete")), h("slot", { key: 'a7132e286834c21b1a7f0762ae398ae6ab6c3456' })));
+        return (h(Host, { key: 'bba78cf458f70fbc544cb60f680da3caaeb75dc2' }, h("div", { key: '0872f0b8f0ef07c26e5057dff8063a7585cbe209', class: 'tabs-container' }, h("button", { key: 'f70b0321dc59359a1b940d9c9c2bfc23c945e0f4', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '835388d8c1a7c9f196254f75cbe4ff19d1a12dbe', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '95cfe797b9abf9f90580a29e607c132295590719', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: 'a0b2c962acefbe939c3c41303f9def72bf10a0ed', 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: "signature", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Signature")))), 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("ls-field-footer", { key: '9a506f882be185fa072f577de42300275e7c6237', dataItem: this.dataItem }), h("slot", { key: '3c992d87c93531c50a6160f82c66b0ae83020ae3' })));
     }
     static get is() { return "ls-field-properties-signature"; }
     static get encapsulation() { return "shadow"; }
@@ -22,7 +37,7 @@ export class LsFieldPropertiesSignature {
             "dataItem": {
                 "type": "unknown",
                 "attribute": "data-item",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "LSApiElement",
                     "resolved": "{ id: string; align: string; ax?: number; ay?: number; bx?: number; by?: number; left?: number; top?: number; height?: number; width?: number; elementType: string; fieldOrder?: number; fontName: string; fontSize: number; hideBorder?: boolean; label?: string; labelExtra?: string; helpText?: string; optional?: boolean; options?: string; page?: number; role?: LSApiRole; substantive?: boolean; validation?: number; value?: string; logicGroup?: string; logicAction?: number; mapTo?: string; signer: number; link?: string; formElementType?: \"number\" | \"image\" | \"text\" | \"signature\" | \"date\" | \"regex\" | \"file\" | \"autodate\" | \"autosign\" | \"initials\" | \"email\" | \"checkbox\"; roleObject?: LSApiRole; cstyle?: any; divStyle?: any; objectHeight?: string; pageDimensions?: { height: number; width: number; }; templateId?: string; }",
@@ -38,7 +53,7 @@ export class LsFieldPropertiesSignature {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The selected items information (as JSON).\n{LSApiElement[]}"
                 },
                 "getter": false,
                 "setter": false

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

@@ -1 +1 @@
-{"version":3,"file":"ls-field-properties-signature.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-signature/ls-field-properties-signature.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-signature',\n  styleUrl: 'ls-field-properties-signature.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesSignature {\n  @Prop() dataItem: LSApiElement;\n  @Prop() fieldSet: 'content' | 'placement' | 'dimensions' = 'content';\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        {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 class={'ls-field-type-wrapper'}>\n                <div class={'ls-field-type-inner'}>\n                  <div class={'ls-field-type-icon'}>\n                    <ls-icon name=\"signature\" size=\"20\" />\n                  </div>\n                  <p class={'ls-field-type-name'}>Signature</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                  <option value=\"text\">Text</option>\n                  <option value=\"email\">Email</option>\n                  <option value=\"signature\">Signature</option>\n                </select>\n              </div>\n            </div>\n          </div>\n        )}\n        <div class={'button-footer'}>\n          <button>Duplicate</button>\n          <button>Delete</button>\n        </div>\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-field-properties-signature.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-signature/ls-field-properties-signature.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';\n\n@Component({\n  tag: 'ls-field-properties-signature',\n  styleUrl: 'ls-field-properties-signature.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesSignature {\n   /**\n    * The selected items information (as JSON).\n    * {LSApiElement[]}\n    */\n   @Prop({\n     mutable: true,\n   })\n   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  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=\"signature\" size=\"20\" />\n                    </div>\n                    <p class={'ls-field-type-name'}>Signature</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            </div>\n          )}\n        </div>\n\n        <ls-field-footer dataItem={this.dataItem} />\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,7 +1,150 @@
 :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 */
 
@@ -36,11 +179,15 @@ a:hover {
 select {
   appearance: none;
   height: 36px;
+  width: 100%;
 }
 
 .input-wrapper {
   position: relative;
-  width: fit-content;
+}
+
+.full-width {
+  width: 100%;
 }
 
 #selectorIcon {
@@ -223,6 +370,8 @@ input[type='checkbox']:disabled:checked {
 }
 
 button {
+  display: flex;
+  gap: 0.5rem;
   border: 0;
   appearance: button;
   cursor: pointer;
@@ -232,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;
@@ -248,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;
@@ -281,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-text/ls-field-properties-text.js

@@ -1,8 +1,23 @@
 import { Host, h } from "@stencil/core";
+import { validationTypes } from "../ls-document-viewer/editorUtils";
+import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
 export class LsFieldPropertiesText {
     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: '1295bbae1e4a761e63a934e3feee2b9aa9a0da8e' }, h("div", { key: 'dd54b3014616de7b86f4d4eb24441b1b439b8d45', class: "ls-field-properties-section" }, "Text Field"), h("div", { key: '1a64abccc0e69cdc8373dd71b154459975c8fb9a' }, "Label: ", h("input", { key: '256315c9510b4044130fd1d8c15267c54019231f', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '99d0de4df00dee8f3fa23f9981125b1418d2444d', dataItem: this.dataItem }), h("slot", { key: '66371315995cca39a712832028cf524818b8ccb4' })));
+        return (h(Host, { key: '3c866e6f227934dff07ee9d2a26d65ed1c9afa82' }, h("div", { key: 'f0348081e8a5ffc70d6888e41ecd88c948150a60', class: 'tabs-container' }, h("button", { key: '0499e9d95ea152b86bd4e6440646de92b94d59df', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: 'd6fa7d56ee8c7700b4395ade178ce577367d1b69', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '1449b28a226629068439b9f7277f3fa00549f273', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: '4863f52297c424990c72d1aff181fa72c3f4d03b', 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: "text", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Text")))), 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 === 'text')
+            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: 'a437d78978c9937a48278a46f4a3998a88a9f638', class: 'button-footer' }, h("button", { key: '7dd5225d65d6dfa5fc2c8f0ebf6b921877aaa75f', class: 'secondary' }, h("ls-icon", { key: '764bc166996b128c8861bb82a7545814851ad162', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: '9e0d8e4d4fa8374d85ad62e1530344b20aea9bfa', class: 'destructive' }, h("ls-icon", { key: 'ce98729c0518cb7df746418e86a2bde57fb58efc', name: "trash", size: "20" }), "Delete")), h("slot", { key: '68766f87c0fb2705681f5b255cab2b089324dcad' })));
     }
     static get is() { return "ls-field-properties-text"; }
     static get encapsulation() { return "shadow"; }
@@ -41,6 +56,26 @@ export class LsFieldPropertiesText {
                 },
                 "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-text/ls-field-properties-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-field-properties-text.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-text/ls-field-properties-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,qBAAqB;IACxB,QAAQ,CAAe;IAC/B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,6BAA6B,iBAAkB;YAC3D;;gBAAY,8DAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,GAAE,CAAM;YAClE,4EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG;YAC/C,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-text',\n  styleUrl: 'ls-field-properties-text.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesText {\n  @Prop() dataItem: LSApiElement;\n  render() {\n    return (\n      <Host>\n        <div class={\"ls-field-properties-section\"}>Text 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-text.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-text/ls-field-properties-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { validationTypes } from '../ls-document-viewer/editorUtils';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-field-properties-text',\n  styleUrl: 'ls-field-properties-text.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesText {\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=\"text\" size=\"20\" />\n                    </div>\n                    <p class={'ls-field-type-name'}>Text</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 === 'text')\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"]}