legalesign-document-viewer 0.1.2 → 0.1.4

package/dist/collection/components/ls-field-placement/ls-field-placement.css

@@ -31,6 +31,11 @@
   justify-content: space-between;
 }
 
+.multi-button-group-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
 .ls-field-properties-section-text {
   display: flex;
   flex-direction: column;
@@ -124,6 +129,16 @@ select {
   color: var(--gray-80, #6c6e73);
 }
 
+#selectLeadingIconDisabled {
+  position: absolute;
+  top: 50%;
+  left: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-50, #d8d9dc);
+}
+
+
 .has-leading-icon {
   padding-left: 2.5rem;
 }
@@ -147,25 +162,25 @@ textarea::placeholder {
   color: var(--gray-60, #afb0b2);
 }
 
-input:hover,
-select:hover,
-textarea:hover {
+input:hover:not(:disabled),
+select:hover:not(:disabled),
+textarea:hover:not(:disabled) {
   border-color: var(--gray-50, #c8c9cc);
   background-color: var(--white, #fff);
 }
 
-input:focus,
-select:focus,
-textarea:focus {
+input:focus:not(:disabled),
+select:focus:not(:disabled),
+textarea:focus:not(:disabled) {
   outline: none;
   box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);
   border-color: var(--primary-60, #4456f6);
   background-color: var(--white, #fff);
 }
 
-input:active,
-select:active,
-textarea:active {
+input:active:not(:disabled),
+select:active:not(:disabled),
+textarea:active:not(:disabled) {
   border-color: var(--primary-50, #5185ff);
 }
 
@@ -174,6 +189,8 @@ select:disabled,
 textarea:disabled {
   cursor: not-allowed;
   background-color: var(--gray-10, #f7f8fa);
+  color: var(--gray-50, #d8d9dc);
+  box-shadow: none;
 }
 
 input[type='checkbox'] {
@@ -317,6 +334,7 @@ button.tertiaryGrey:hover {
   border: 1px solid var(--gray-30, #e0e2e5);
   background: var(--white, #ffffff);
   overflow: clip;
+  width: 100%;
 }
 
 .button-group button {

package/dist/collection/components/ls-field-placement/ls-field-placement.js

@@ -29,7 +29,7 @@ export class LsFieldPlacement {
         }
     }
     render() {
-        return (h(Host, { key: 'c38e749ed70fbec06710f1842f6a4a9d098f85b2' }, this.isMultiple(this.dataItem) && (h("div", { key: '9b6c2574cac07b37cebf5cabe2c14e9c03747ff6', class: 'ls-field-properties-section' }, h("div", { key: 'ad445360db70d5ae6f99df12f0b0e11caf079115' }, "Height: ", h("input", { key: 'e7095cd297a757619db208599495818831810d51', value: '', onChange: e => this.alter({ height: e.target.value }), width: "30" })), h("div", { key: '857a4248fc0be62c2de1496cc46777477cc7ab34' }, "Width: ", h("input", { key: '64766dcbcf2e4ff5bc18148a3d559320e8768a59', value: '', onChange: e => this.alter({ width: e.target.value }), width: "30" })), h("div", { key: 'c8fd6e434f645ef256cab36aea1eb9f2c792d602' }, "Top: ", h("input", { key: '523cd4e7ef778206040e61de23881c68cd83764f', value: '', onChange: e => this.alter({ top: e.target.value }), width: "30" })), h("div", { key: '8123153cc00b5ad6dfd1962644716d88afe3fd50' }, "Left: ", h("input", { key: '292224f465f7a5492e1e6c53fe05eba1b958068f', value: '', onChange: e => this.alter({ left: e.target.value }), width: "30" })))), this.isSingle(this.dataItem) && (h("div", { key: '3e8dab366e5f0b03a917d2dd5df5297324834a31', class: 'field-set' }, h("div", { key: 'bfe027f0be2444246e64b28705be24a8b3983f1c', class: 'ls-field-properties-section' }, h("div", { key: '5e26da9efc1a46c0f7d51d8af6c4f360adb217c7', class: 'ls-field-properties-section-text' }, h("p", { key: '2ff018f921da3820578ba7ce116e2f4bf3beeb12', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: '92ec4d9c3a839964c049c218ea2e3096e9f8416c', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: '8e090fdba7956c47176cb2e208bab978d9db574b', class: 'input-row' }, h("div", { key: '0454d313992a5d3cba41b177d5e2f383e79760d3', class: 'input-wrapper' }, h("ls-icon", { key: 'd06422f06d4d9e3db801005d440b1b419ef99596', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: 'bc688f5479fb3e4d118af31a0c06fb18f4df8c7f', class: 'has-leading-icon', aria: "field-width", id: "field-width", value: this.dataItem?.width, onChange: e => this.alter({ width: e.target.value }) })), h("div", { key: '6739deb4c2a592de6c49b62da73b976889974cb2', class: 'input-wrapper' }, h("ls-icon", { key: '84f3f46cb645ebfb559f93615b354735e5d3ea68', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: 'ca64de782e04b9854715c97dcccfae638e39a5d8', class: 'has-leading-icon', aria: "field-height", id: "field-height", value: this.dataItem?.height, onChange: e => this.alter({ height: e.target.value }) })))), h("div", { key: '548b2fa676f1c7f1423487d8122ed4fbbc5643aa', class: 'ls-field-properties-section' }, h("div", { key: '3c95021d94b59e35f71a1394a96f2ecba6830ea3', class: 'ls-field-properties-section-text' }, h("p", { key: 'f2998db5a8f3b74d93a64d00934014da39a86d12', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: '28532bcde4770d9c5a1ec242bb62f45f8daf9082', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: '089ab35ef48a8edf701eb3c0f46b0848d3dfb792', class: 'button-group' }, h("button", { key: 'ec313d99c1f9bff5d6d950855a9398c61ad7fbfd', disabled: true }, h("ls-icon", { key: '612ca8d573b699ebee86be53f3ed1b01a19423c1', name: "field-scale" })), h("button", { key: 'd4b2f23e97ecc77c1c2f078640651d10b23e3576', disabled: true }, h("ls-icon", { key: '902d890ed20e4d558475019c0cac0e71e96af29f', name: "field-match-width" })), h("button", { key: '846578af26854723a618210cdb9326028df305bc', disabled: true }, h("ls-icon", { key: '11390d2dd057fc8f53f814752368da1f3cc6ca9d', name: "field-match-height" })))), h("div", { key: 'bf2413d0db983afd7d027ff83974c989498dc9f6' }, "Top: ", h("input", { key: 'b303dac5c9642abae9d9153de0ddf42dfb4de10e', value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }), width: "30" })), h("div", { key: 'f619f27989365109b7ed1c3ad5e9c0a830f248d7' }, "Left: ", h("input", { key: 'cf4566c32111ca92b3da4be25e4c57ff5ab53ca3', value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }), width: "30" }))))));
+        return (h(Host, { key: 'b177a99ffcb4fde8408326148b8ce77d6e67182e' }, this.isMultiple(this.dataItem) && (h("div", { key: '2115059af55775f217c258a2b1325ec301aef124', class: 'ls-field-properties-section' }, h("div", { key: '1796203332bc3bed40ed9cd1476b46bca79157fc', class: 'ls-field-properties-section-text' }, h("p", { key: '3369ba18dd537732bfc1a647aaa0bcc7a4f9f4b2', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '631b396d7e8eca43eeda1e4e5c30f4007dd50269', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '36a66f3f2dd69f97135d31a24c3ca17652772d5a', class: 'input-row' }, h("div", { key: '54a3f6ca14bbdf2b4854e716fc8edb03c3a0377e', class: 'input-wrapper' }, h("ls-icon", { key: 'e37871622caa8811130b0e70d3132e1372d008cc', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: '6d1db1d3756e0ff25c7c0553dee26f6d0a3e3305', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ top: e.target.value }) })), h("div", { key: 'db6c1b3c235a4aa3604778123131cb7c9a669cc4', class: 'input-wrapper' }, h("ls-icon", { key: '998b63539de46fe19ced6ce8db40513823abd03b', id: "selectLeadingIcon", name: "y" }), h("input", { key: 'dad95a2bfb80c74af431d9a1bc2223486fea05e1', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", onChange: e => this.alter({ left: e.target.value }) }))))), this.isSingle(this.dataItem) && (h("div", { key: '6a015090146c812554e7864c8c5d5f0a58c8dae4', class: 'field-set' }, h("div", { key: '3bec1b9351ab94a597de4558353aac392482c4ef', class: 'ls-field-properties-section' }, h("div", { key: '4ae7786982a6f9ca8268dac593ab65461ea4c0f9', class: 'ls-field-properties-section-text' }, h("p", { key: 'fb26f97aa12fab8758976ea4723e450f338fc7d9', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: '67b2561850d59c1d34b672d7c8f317ee297f2dd7', class: 'ls-field-properties-section-description' }, "Align your Fields relative to the page or multi-select and align then to each other.")), h("div", { key: '03f959b41d217a68916df6d7094c766666f4b1f8', class: 'multi-button-group-row' }, h("div", { key: '22c542d77db67527b930b90cedfae90432f8ae41', class: 'button-group' }, h("button", { key: '24523466ae0dbfc17f4c51fe1088abb479626e53', onClick: () => this.alter({ left: 0 }) }, h("ls-icon", { key: '0b5d94181a4d0c4b87bf9f61052de5acbc3f2517', name: "field-alignment-left" })), h("button", { key: '9d262c51db3f4b2bd3264fb8697833bb36441d8b', disabled: true }, h("ls-icon", { key: '36bc7b3753a71e1963556567701b96ac6efbf9e4', name: "field-alignment-centre" })), h("button", { key: '2dec2561166ea581dc419934f08dda30caa29112', disabled: true }, h("ls-icon", { key: '70392cfecfa647c8e88295a3cdee08d59bc400d1', name: "field-alignment-right" }))), h("div", { key: 'a64537fc954be0c87d36f3ec448257de3548ae0f', class: 'button-group' }, h("button", { key: 'e8721c8ddaafe17893e8d6115e64bc5df83b4653', onClick: () => this.alter({ top: 0 }) }, h("ls-icon", { key: '16b47f99fe18db4ecb4bb2b711b9147d5721f428', name: "field-alignment-top" })), h("button", { key: 'cac48fe4d53f9aeb76f1a3f8b3fbcbcdd1afb224', disabled: true }, h("ls-icon", { key: 'bc0297d6b222886e09bb190678695f24e0f52b23', name: "field-alignment-middle" })), h("button", { key: '44d54b27d2f72e0769f399652fcc51e00b2a1b8f', disabled: true }, h("ls-icon", { key: '367a5ac69cf643cea71d730dc32059ef767dc940', name: "field-alignment-bottom" }))))), h("div", { key: 'd6c3bee8c8edfee5454e5595c14c3771497b00ef', class: 'ls-field-properties-section' }, h("div", { key: '2e619fb98e2d37e408b20ab38e2755ec5134e5f9', class: 'ls-field-properties-section-text' }, h("p", { key: '15971e94cc90e90c3d4a9480242ac3129206074f', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: 'ff46cf459b2cdcec46a77a44c5070d59cca08e85', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '69f7338e979e01c33cea42a15ee56a94fffd35d4', class: 'input-row' }, h("div", { key: '5ced6739a14b500d5f05e33040e245827ba86d42', class: 'input-wrapper' }, h("ls-icon", { key: 'a928d8ce74e00c1588b4e35e005da430dc87e4f3', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: '4630c6e449e82499261338aff773b01aafa89888', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }) })), h("div", { key: 'ba26998241290de17a1f1c7b922187b10a24690c', class: 'input-wrapper' }, h("ls-icon", { key: '5ca0b818449a648cb53e3292f95d060b4bd17538', id: "selectLeadingIcon", name: "y" }), h("input", { key: 'af8839028d5310e5bfd6e211f8513f5db69bf30c', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }), width: "30" })))), h("div", { key: '4619be4c5a343dd024a81529c1377b1f17c7e5bc', class: 'ls-field-properties-section' }, h("div", { key: '3b5425469e865b161045d8d451adf85729cd9960', class: 'ls-field-properties-section-text' }, h("p", { key: '789cf6f38966a01eae08a566e0e4163531309dc4', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: 'f9d30a98d11d7fbbe186ca8e2d9b42befb302b8b', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '546ca427edb7ef8ca783ab61365923906955555f', class: 'button-group' }, h("button", { key: 'acc5401214b558744f1b66067d25aeae383d4ca6', disabled: true }, h("ls-icon", { key: '92170916ae903395fbac9850f76ff6151df9d4ad', name: "field-distribute-vertically" })), h("button", { key: 'acff43cbf2d8bf66844f54e3c584f7b3eabba6d7', disabled: true }, h("ls-icon", { key: 'f6340d50fe90bb86aa45dbe7a92d230b67958dc9', name: "field-distribute-horizontally" })))), h("div", { key: '8ee2e97e0eda589a2a5970069a4532dc6d40ce22', class: 'ls-field-properties-section' }, h("div", { key: '0ea4d3aa27f12f78dac7bc64c77e08ba026bfe7c', class: 'ls-field-properties-section-text' }, h("p", { key: 'cfe6e505e258ead4404a1f335fbfe34ca828d111', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: 'a0f84726326a04905b449af09e34a8c3ddb961b4', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '122dfcefeb52bd58b8cfd8bf2bbc2973c48a92eb', class: 'input-row' }, h("div", { key: '544e80a1935f4785f85283bbca238cdac6a47503', class: 'input-wrapper' }, h("ls-icon", { key: '5e53109292e2bc395dcebde922afde3092dc3aeb', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), h("input", { key: '01119934f6ca27eaed198e8d20e7e019925b62a6', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), h("div", { key: '7c90de7b3865bef2149cd35d5c6047dedec56303', class: 'input-wrapper' }, h("ls-icon", { key: '3507bca1a8243a48913c76e87a63382f9e132c66', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), h("input", { key: '5400cad90eaae4849227a76bb732afd623cb54fa', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true }))))))));
     }
     static get is() { return "ls-field-placement"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-field-placement/ls-field-placement.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-field-placement.js","sourceRoot":"","sources":["../../../src/components/ls-field-placement/ls-field-placement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-placement',\n  styleUrl: 'ls-field-placement.css',\n  shadow: true,\n})\nexport class LsFieldPlacement {\n  @Prop({ mutable: true }) dataItem: LSApiElement | LSApiElement[];\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n    return (dt as LSApiElement[]).length === undefined;\n  }\n\n  isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n    return typeof (dt as LSApiElement[]).length === 'number';\n  }\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  alter(diff: object) {\n    console.log(diff);\n    if (this.isMultiple(this.dataItem)) {\n      const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n        return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n      });\n\n      this.dataItem = diffs.map(d => d.data as LSApiElement);\n      this.mutate.emit(diffs);\n      this.update.emit(diffs);\n    } else {\n      const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } as LSApiElement } as LSMutateEvent;\n      this.dataItem = singleDiff.data as LSApiElement;\n      this.mutate.emit([singleDiff]);\n      this.update.emit([singleDiff]);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.isMultiple(this.dataItem) && (\n          <div class={'ls-field-properties-section'}>\n            <div>\n              Height: <input value={''} onChange={e => this.alter({ height: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n            <div>\n              Width: <input value={''} onChange={e => this.alter({ width: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n            <div>\n              Top: <input value={''} onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n            <div>\n              Left: <input value={''} onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n          </div>\n        )}\n        {this.isSingle(this.dataItem) && (\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'}>Height and Width</p>\n                <p class={'ls-field-properties-section-description'}>Define the height and width of one or multiple fields</p>\n              </div>\n              <div class={'input-row'}>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIcon\" name=\"field-match-width\"></ls-icon>\n                  <input\n                    class={'has-leading-icon'}\n                    aria=\"field-width\"\n                    id=\"field-width\"\n                    value={this.dataItem?.width}\n                    onChange={e => this.alter({ width: (e.target as HTMLInputElement).value })}\n                  />\n                </div>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIcon\" name=\"field-match-height\"></ls-icon>\n                  <input\n                    class={'has-leading-icon'}\n                    aria=\"field-height\"\n                    id=\"field-height\"\n                    value={this.dataItem?.height}\n                    onChange={e => this.alter({ height: (e.target as HTMLInputElement).value })}\n                  />\n                </div>\n              </div>\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'}>Scale and Resize</p>\n                <p class={'ls-field-properties-section-description'}>Multi-select fields and match their dimensions</p>\n              </div>\n              <div class={'button-group'}>\n                <button disabled>\n                  <ls-icon name=\"field-scale\"></ls-icon>\n                </button>\n                <button disabled>\n                  <ls-icon name=\"field-match-width\"></ls-icon>\n                </button>\n                <button disabled>\n                  <ls-icon name=\"field-match-height\"></ls-icon>\n                </button>\n              </div>\n            </div>\n\n            {/* <div>\n              Height: <input value={this.dataItem?.height} onChange={e => this.alter({ height: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n            <div>\n              Width: <input value={this.dataItem?.width} onChange={e => this.alter({ width: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div> */}\n            <div>\n              Top: <input value={this.dataItem?.top} onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n            <div>\n              Left: <input value={this.dataItem?.left} onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-field-placement.js","sourceRoot":"","sources":["../../../src/components/ls-field-placement/ls-field-placement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-placement',\n  styleUrl: 'ls-field-placement.css',\n  shadow: true,\n})\nexport class LsFieldPlacement {\n  @Prop({ mutable: true }) dataItem: LSApiElement | LSApiElement[];\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n    return (dt as LSApiElement[]).length === undefined;\n  }\n\n  isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n    return typeof (dt as LSApiElement[]).length === 'number';\n  }\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  alter(diff: object) {\n    console.log(diff);\n    if (this.isMultiple(this.dataItem)) {\n      const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n        return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n      });\n\n      this.dataItem = diffs.map(d => d.data as LSApiElement);\n      this.mutate.emit(diffs);\n      this.update.emit(diffs);\n    } else {\n      const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } as LSApiElement } as LSMutateEvent;\n      this.dataItem = singleDiff.data as LSApiElement;\n      this.mutate.emit([singleDiff]);\n      this.update.emit([singleDiff]);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.isMultiple(this.dataItem) && (\n          <div class={'ls-field-properties-section'}>\n            <div class={'ls-field-properties-section-text'}>\n              <p class={'ls-field-properties-section-title'}>Location</p>\n              <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n            </div>\n            <div class={'input-row'}>\n              <div class={'input-wrapper'}>\n                <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n                <input type=\"number\" class={'has-leading-icon'} aria=\"top-location\" id=\"top-location\" onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })} />\n              </div>\n              <div class={'input-wrapper'}>\n                <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n                <input\n                  type=\"number\"\n                  class={'has-leading-icon'}\n                  aria=\"left-location\"\n                  id=\"left-location\"\n                  onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })}\n                />\n              </div>\n            </div>\n          </div>\n        )}\n        {this.isSingle(this.dataItem) && (\n          <div class={'field-set'}>\n            {/* @Alex I couldn't get this to work?? Only Top and Left */}\n\n            <div class={'ls-field-properties-section'}>\n              <div class={'ls-field-properties-section-text'}>\n                <p class={'ls-field-properties-section-title'}>Alignment</p>\n                <p class={'ls-field-properties-section-description'}>Align your Fields relative to the page or multi-select and align then to each other.</p>\n              </div>\n              <div class={'multi-button-group-row'}>\n                <div class={'button-group'}>\n                  <button onClick={() => this.alter({ left: 0 })}>\n                    <ls-icon name=\"field-alignment-left\"></ls-icon>\n                  </button>\n                  <button disabled>\n                    <ls-icon name=\"field-alignment-centre\"></ls-icon>\n                  </button>\n                  <button disabled>\n                    <ls-icon name=\"field-alignment-right\"></ls-icon>\n                  </button>\n                </div>\n                <div class={'button-group'}>\n                  <button onClick={() => this.alter({ top: 0 })}>\n                    <ls-icon name=\"field-alignment-top\"></ls-icon>\n                  </button>\n                  <button disabled>\n                    <ls-icon name=\"field-alignment-middle\"></ls-icon>\n                  </button>\n                  <button disabled>\n                    <ls-icon name=\"field-alignment-bottom\"></ls-icon>\n                  </button>\n                </div>\n              </div>\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'}>Location</p>\n                <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n              </div>\n              <div class={'input-row'}>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n                  <input\n                    type=\"number\"\n                    class={'has-leading-icon'}\n                    aria=\"top-location\"\n                    id=\"top-location\"\n                    value={this.dataItem?.top}\n                    onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })}\n                  />\n                </div>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n                  <input\n                    type=\"number\"\n                    class={'has-leading-icon'}\n                    aria=\"left-location\"\n                    id=\"left-location\"\n                    value={this.dataItem?.left}\n                    onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })}\n                    width=\"30\"\n                  />\n                </div>\n              </div>\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'}>Distribution</p>\n                <p class={'ls-field-properties-section-description'}>Multi-select fields and evenly space them out</p>\n              </div>\n              <div class={'button-group'}>\n                <button disabled>\n                  <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n                </button>\n                <button disabled>\n                  <ls-icon name=\"field-distribute-horizontally\"></ls-icon>\n                </button>\n              </div>\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'}>Gap</p>\n                <p class={'ls-field-properties-section-description'}>Define the exact gap between multi-select fields.</p>\n              </div>\n              <div class={'input-row'}>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-vertically\"></ls-icon>\n                  <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"vertical-gap\" id=\"vertical-gap\" disabled />\n                </div>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-horizontally\"></ls-icon>\n                  <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"horizontal-gap\" id=\"horizontal-gap\" disabled />\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -4,6 +4,7 @@
   padding: 1rem;
 }
 
+
 /* Global Styles */
 
 p {

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

@@ -30,7 +30,7 @@ export class LsFieldProperties {
             return h("ls-field-properties-multiple", { dataItem: this.dataItem });
     }
     render() {
-        return (h(Host, { key: '9896a32cfd8d2a9eb4abddff21bb9e4ea84dcdf7' }, this.dataItem && this.renderFields(), h("slot", { key: 'a55449c4637fc60efc6ab67b4f192eeb4b85b804' })));
+        return (h(Host, { key: '4f0c36a7bde5177369e905868caff830a71af2ff' }, this.dataItem && this.renderFields(), h("slot", { key: '80fc4787efdadb306ba926f895f45eaf84717d39' })));
     }
     static get is() { return "ls-field-properties"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class LsFieldPropertiesAutosign {
     dataItem;
     render() {
-        return (h(Host, { key: 'ef859b2117bdedccae56214ddd7b375f8ada8e87' }, h("div", { key: '37cdf936c339386dd2307b4bcb39e6fc52aeecf3', class: "ls-field-properties-section" }, "Self Sign Field"), h("div", { key: 'fc221640e08436c16cdd4515119dc07456245f3d' }, "Label: ", h("input", { key: '54b60ba302a743592c6179a8dd6be9af3446b7d1', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '34595223e6d6bdddb325adaa6f3580a72802e12f', dataItem: this.dataItem }), h("slot", { key: 'f7bc363dc0246a2050514db7438924b4a1f47bfe' })));
+        return (h(Host, { key: '14e8816d8a1b469e277e7af51b2141e4338ba1e2' }, h("div", { key: '59f5e6ab5aa858f59082e36e7e74b60002e331ed', class: "ls-field-properties-section" }, "Self Sign Field"), h("div", { key: '14d7513183cbca4d203ce99b95d4e41f585d9b71' }, "Label: ", h("input", { key: '345895e5c19328992ae43a69c0b8e5eb2449b1ac', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '6b783594d4167a01a4deaf022d3f04d84a6897b7', dataItem: this.dataItem }), h("slot", { key: '5e05f3cee5def0994e9c9b7421d7ebbd34eb88e7' })));
     }
     static get is() { return "ls-field-properties-autosign"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-field-properties-date/ls-field-properties-date.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-date/ls-field-properties-date.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 LsFieldPropertiesDate {
     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: '5f36efcbdbf004aa947fa25fc9159243576a5e42' }, h("div", { key: 'b6e62fcd4c300ade79b3e5695f08da6d2cd3a2a5', class: "ls-field-properties-section" }, "Date Field"), h("div", { key: 'f43166063cfd066d302977ca543edfb6a9ab2d91' }, "Label: ", h("input", { key: '123c7cc4ea9f9ca3329251c72115df2b926a4e51', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '4996ee02f38bc8d698f582b9ffaca18c4cd3691c', dataItem: this.dataItem }), h("slot", { key: 'cec0eca70cca852ab6c432c4e09ac410b9f0c675' })));
+        return (h(Host, { key: 'b06a05273c080fa2adc6f509d119a0da69ddf46a' }, h("div", { key: '230e127b70cb0970e25d6ab2093c0638b23c36fa', class: 'tabs-container' }, h("button", { key: 'da64c8dbbe138e2f0a7642ac5f15b785aa37f642', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '1a5dd9d8d793a9fbe38c743b5be061017c7e5cfc', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '74535a6f94e51d3ff5476a7b8aea87ed5638931a', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: 'be04d97b8543b8c16c1845651893018fca388b4b', 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: "calender", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Date")))), 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 === 'date')
+            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: 'd0f4de7d4aaefd389eaf32c828b2a546ac9dda60', class: 'button-footer' }, h("button", { key: 'cfdb665c27629f9ea5cdff3d6eb0727a55049b08', class: 'secondary' }, h("ls-icon", { key: 'e8f40090edd72678f25137f6ec642ee778780680', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: '6e4cd8e4729ddf9ecb26432edae07d934f247f1a', class: 'destructive' }, h("ls-icon", { key: '12ba0890b9ef7a3cc697eacbae237317c6238600', name: "trash", size: "20" }), "Delete")), h("slot", { key: 'c5705c26d5bd0eb3af5ffc06c1857ff9d64257de' })));
     }
     static get is() { return "ls-field-properties-date"; }
     static get encapsulation() { return "shadow"; }
@@ -41,6 +56,26 @@ export class LsFieldPropertiesDate {
                 },
                 "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-date/ls-field-properties-date.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-field-properties-date.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-date/ls-field-properties-date.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,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-date',\n  styleUrl: 'ls-field-properties-date.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesDate {\n  @Prop() dataItem: LSApiElement;\n  render() {\n    return (\n      <Host>\n        <div class={\"ls-field-properties-section\"}>Date 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-date.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-date/ls-field-properties-date.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-date',\n  styleUrl: 'ls-field-properties-date.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesDate {\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=\"calender\" size=\"20\" />\n                    </div>\n                    <p class={'ls-field-type-name'}>Date</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 === 'date')\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"]}