legalesign-document-viewer 0.1.3 → 0.1.7

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

@@ -1,5 +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% */
+  text-transform: capitalize;
+}
+
+.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 +180,15 @@ a:hover {
 select {
   appearance: none;
   height: 36px;
+  width: 100%;
 }
 
 .input-wrapper {
   position: relative;
-  width: fit-content;
+}
+
+.full-width {
+  width: 100%;
 }
 
 #selectorIcon {
@@ -222,6 +371,8 @@ input[type='checkbox']:disabled:checked {
 }
 
 button {
+  display: flex;
+  gap: 0.5rem;
   border: 0;
   appearance: button;
   cursor: pointer;
@@ -231,6 +382,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 +399,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 +457,3 @@ button.tertiaryGrey:hover {
 .button-group > :not(:first-child) {
   border-left: 1px solid var(--gray-30, #e0e2e5);
 }
-

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

@@ -1,8 +1,42 @@
 import { Host, h } from "@stencil/core";
+import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
+import { getFieldIcon } from "../ls-document-viewer/defaultFieldIcons";
 export class LsFieldPropertiesMultiple {
     dataItem;
+    fieldSet = 'content';
+    signerColor = (index) => {
+        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+    };
+    allSignersSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, signer: undefined };
+        const firstSigner = this.dataItem[0].signer;
+        const allSame = this.dataItem.every(item => item.signer === firstSigner);
+        return { isSame: allSame, signer: allSame ? firstSigner : 13 };
+    };
+    allLabelsSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, label: undefined };
+        const firstLabel = this.dataItem[0].label;
+        const allSame = this.dataItem.every(item => item.label === firstLabel);
+        return { isSame: allSame, label: allSame ? firstLabel : undefined };
+    };
+    allElementsSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, elementType: 'mixed' };
+        const firstElementType = this.dataItem[0].elementType;
+        const allSame = this.dataItem.every(item => item.elementType === firstElementType);
+        return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };
+    };
     render() {
-        return (h(Host, { key: 'b4efff7bf847390c74406f2cdb74ce1494760913' }, h("div", { key: 'bab7582267affd8d2869f1644c277cafbf7193ca' }, this.dataItem.length, " items"), h("ls-field-dimensions", { key: '0b49d95f9a49b3a5f99b8ce03c7f7b9761507d9e', dataItem: this.dataItem }), h("slot", { key: 'acb018458e9772db9107c024f982a3b575976c06' })));
+        return (h(Host, { key: 'd47418c11bf08918bbc5de9815c9ed0060637730' }, h("div", { key: 'ffbe7dddad76d40c13d394b94f560bc28f0efd49', class: 'tabs-container' }, h("button", { key: '215fa1ffeb0fc0e7e5f5f74268245a0bfc24b578', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '38cbd8b91dc129be1398ba79384c316bee79eedc', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '8ca2cb33b774b93d2a9ca2dd84dab64c5f757fec', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: '584ff1cce354ad1f7326a73c3d2d6729dbaccac7', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (h("div", { class: 'field-set' }, h("ls-field-alignment", { dataItem: this.dataItem }), h("ls-field-placement", { dataItem: this.dataItem }), h("ls-field-distribute", { dataItem: this.dataItem }))) : this.fieldSet === 'dimensions' ? (h("div", { class: 'field-set' }, h("ls-field-dimensions", { dataItem: this.dataItem }), h("ls-field-size", { 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 Fields you currently have selected")), h("div", { class: 'ls-field-type-wrapper', style: {
+                border: `1px dashed var(--${this.signerColor(this.allSignersSame().signer)}-30)`,
+                background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,
+            } }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
+                border: `1px solid var(--${this.signerColor(this.allSignersSame().signer)}-60)`,
+                color: `var(--${this.signerColor(this.allSignersSame().signer)}-60)`,
+                background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,
+            } }, h("ls-icon", { name: getFieldIcon(this.allElementsSame().elementType), size: "20" })), h("p", { class: 'ls-field-type-name' }, this.dataItem.length, " ", this.allElementsSame().elementType, " ", 'Fields')))), 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.allLabelsSame().label, width: "30", placeholder: "eg. Sign Here" }))))), h("ls-field-footer", { key: '4ac7b3459381ce8b58dbed6aa0de6612e26ecbb4' }), h("slot", { key: 'c07eed0aa02861a7cc12939dcb11c16ccfebb58c' })));
     }
     static get is() { return "ls-field-properties-multiple"; }
     static get encapsulation() { return "shadow"; }
@@ -41,6 +75,26 @@ export class LsFieldPropertiesMultiple {
                 },
                 "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-multiple/ls-field-properties-multiple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-field-properties-multiple.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-multiple/ls-field-properties-multiple.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,yBAAyB;IAC5B,QAAQ,CAAiB;IAEjC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH;gBAAM,IAAI,CAAC,QAAQ,CAAC,MAAM;yBAAa;YACvC,4EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YAEhD,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-multiple',\n  styleUrl: 'ls-field-properties-multiple.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesMultiple {\n  @Prop() dataItem: LSApiElement[];\n\n  render() {\n    return (\n      <Host>\n        <div>{this.dataItem.length} items</div>\n        <ls-field-dimensions dataItem={this.dataItem} />\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-field-properties-multiple.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-multiple/ls-field-properties-multiple.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 { getFieldIcon } from '../ls-document-viewer/defaultFieldIcons';\n\n@Component({\n  tag: 'ls-field-properties-multiple',\n  styleUrl: 'ls-field-properties-multiple.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesMultiple {\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  allSignersSame = () => {\n    if (!this.dataItem || this.dataItem.length === 0) return { isSame: true, signer: undefined };\n    const firstSigner = this.dataItem[0].signer;\n    const allSame = this.dataItem.every(item => item.signer === firstSigner);\n    return { isSame: allSame, signer: allSame ? firstSigner : 13 };\n  };\n\n  allLabelsSame = () => {\n    if (!this.dataItem || this.dataItem.length === 0) return { isSame: true, label: undefined };\n    const firstLabel = this.dataItem[0].label;\n    const allSame = this.dataItem.every(item => item.label === firstLabel);\n    return { isSame: allSame, label: allSame ? firstLabel : undefined };\n  };\n\n  allElementsSame = () => {\n    if (!this.dataItem || this.dataItem.length === 0) return { isSame: true, elementType: 'mixed' };\n    const firstElementType = this.dataItem[0].elementType;\n    const allSame = this.dataItem.every(item => item.elementType === firstElementType);\n    return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };\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            <div class={'field-set'}>\n              <ls-field-alignment dataItem={this.dataItem} />\n              <ls-field-placement dataItem={this.dataItem} />\n              <ls-field-distribute dataItem={this.dataItem} />\n\n            </div>\n          ) : this.fieldSet === 'dimensions' ? (\n            <div class={'field-set'}>\n              <ls-field-dimensions dataItem={this.dataItem} />\n              <ls-field-size 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 Fields 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.allSignersSame().signer)}-30)`,\n                    background: `var(--${this.signerColor(this.allSignersSame().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.allSignersSame().signer)}-60)`,\n                        color: `var(--${this.signerColor(this.allSignersSame().signer)}-60)`,\n                        background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,\n                      }}\n                    >\n                      <ls-icon name={getFieldIcon(this.allElementsSame().elementType)} size=\"20\" />\n                    </div>\n                    <p class={'ls-field-type-name'}>\n                      {this.dataItem.length} {this.allElementsSame().elementType} {'Fields'}\n                    </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.allLabelsSame().label} width=\"30\" placeholder=\"eg. Sign Here\" />\n              </div>\n            </div>\n          )}\n        </div>\n        <ls-field-footer />\n        \n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-field-properties-number/ls-field-properties-number.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-number/ls-field-properties-number.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 LsFieldPropertiesNumber {
     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: '38689e88511a48f76700b6690b6f16bbdcf5c275' }, h("div", { key: 'e0256e1b6323656b6f8b7b088a1ef11ba5c64bf5', class: "ls-field-properties-section" }, "Number Field"), h("div", { key: '5c7465ccfd35e26ac079ad9daf55a53aefd46e26' }, "Label: ", h("input", { key: '62437f98d0d2998c304caeb5dd86f1c750d13681', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: 'c023c4022d367594fe0ccc564343f8190327300d', dataItem: this.dataItem }), h("slot", { key: '29dfa45d57e3b9b6532dbf2730567b71fd1c0096' })));
+        return (h(Host, { key: 'e50acbaa72b3d4f4e71a1948d3de757583362b8b' }, h("div", { key: '09dd8369b976fe3cf3bcc84bc91ac4c1f553e454', class: 'tabs-container' }, h("button", { key: '41157341ca616277c51a6787cf6eec75b234600e', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: 'cc649303cc7a4bec0322f9cd6e9f2b68418b86b5', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: 'e84e1bae951d8a200fb0f93796a1e2a0069783d2', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: '2f5621dbc686dcb5613f42537adcf6733809ed70', 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: "hashtag", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Number")))), 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 === 'number')
+            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: '7eb13a8e3801d7e9a9908d9efa21703b47cbbeb9', class: 'button-footer' }, h("button", { key: '8376532dd6f07807bf824515146e4f6cd39f47fb', class: 'secondary' }, h("ls-icon", { key: '8a5b3635ba8ef24b4fedfb72b48681f672a9a5f1', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: 'c2af55b4f3f3dbf24ef8ea592812d98501d8d948', class: 'destructive' }, h("ls-icon", { key: 'befbf4e7e625d4bc26bfaadfc1f8c6b9494e9346', name: "trash", size: "20" }), "Delete")), h("slot", { key: '9323c591f57fe3e110a9850c0f6ae1fcc14ffc0d' })));
     }
     static get is() { return "ls-field-properties-number"; }
     static get encapsulation() { return "shadow"; }
@@ -41,6 +56,26 @@ export class LsFieldPropertiesNumber {
                 },
                 "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-number/ls-field-properties-number.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-field-properties-number.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-number/ls-field-properties-number.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,uBAAuB;IAC1B,QAAQ,CAAe;IAE/B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,6BAA6B,mBAAoB;YAC7D;;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-number',\n  styleUrl: 'ls-field-properties-number.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesNumber {\n  @Prop() dataItem: LSApiElement;\n\n  render() {\n    return (\n      <Host>\n        <div class={\"ls-field-properties-section\"}>Number 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-number.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-number/ls-field-properties-number.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-number',\n  styleUrl: 'ls-field-properties-number.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesNumber {\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=\"hashtag\" size=\"20\" />\n                    </div>\n                    <p class={'ls-field-type-name'}>Number</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 === 'number')\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"]}

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

@@ -134,15 +134,6 @@
   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;