legalesign-document-viewer 0.1.3 → 0.1.7

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

@@ -1,20 +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: 'df0094f1092e955e6dd14b91a7e67e7c03b18ee2' }, h("div", { key: '93e2fc1e8d557cebcd9c898ed318a5c63b01719f', class: 'tabs-container' }, h("button", { key: '5ac877ef74986931e2f2c3d1521f14f09776dadd', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '10e426f98422863ce40b7026ad3af7fda567615f', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: 'a452edbb8356e27c53637d90bb30175c4ec78303', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: 'b91ec8aa31925a648ce5c94243e2056c05f4bbf1', 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: {
+        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("div", { key: '386d082d5cc813c9c195ecc7ece0855b86e0cd7c', class: 'button-footer' }, h("button", { key: '35d6174b961aa32db31047c7b401553ccb82f579', class: 'secondary' }, h("ls-icon", { key: 'f901fbf9aa48417f2ea0a2a8fc527fa6e90cca33', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: '8be34a33298fde349fa6a7d42e8c4d5c44eb756d', class: 'destructive' }, h("ls-icon", { key: 'a56208fc1ae308a1f8eace45c0a5c5d5d35a12d7', name: "trash", size: "20" }), "Delete")), h("slot", { key: '5facdb89f9df774f31a1218b268746b418f8e3c3' })));
+            } }, 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"; }
@@ -33,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; }",
@@ -49,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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAO1E,MAAM,OAAO,0BAA0B;IAC7B,QAAQ,CAAe;IACvB,QAAQ,GAA2C,SAAS,CAAC;IAErE,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;QAC9B,OAAO,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,CAAC,IAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAC5J,CAAC,CAAC;IACF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,+DAAQ,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,cAE1G;gBACT,+DAAQ,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,gBAE9G;gBACT,+DAAQ,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC,iBAEhH,CACL;YACN,4DAAK,KAAK,EAAE,qBAAqB,IAC9B,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,CAC/B,0BAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAChD,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,CACnC,WAAK,KAAK,EAAE,WAAW;gBACrB,2BAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5C,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAE,WAAW;gBACrB,WAAK,KAAK,EAAE,6BAA6B;oBACvC,WAAK,KAAK,EAAE,kCAAkC;wBAC5C,SAAG,KAAK,EAAE,mCAAmC,iBAAgB;wBAC7D,SAAG,KAAK,EAAE,yCAAyC,4CAA2C,CAC1F;oBACN,WACE,KAAK,EAAE,uBAAuB,EAC9B,KAAK,EAAE;4BACL,MAAM,EAAE,oBAAoB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;4BACzE,UAAU,EAAE,SAAS,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;yBACnE;wBAED,WAAK,KAAK,EAAE,qBAAqB;4BAC/B,WACE,KAAK,EAAE,oBAAoB,EAC3B,KAAK,EAAE;oCACL,MAAM,EAAE,mBAAmB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;oCACxE,KAAK,EAAE,SAAS,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;oCAC7D,UAAU,EAAE,SAAS,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;iCACnE;gCAED,eAAS,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,GAAG,CAClC;4BACN,SAAG,KAAK,EAAE,oBAAoB,gBAAe,CACzC,CACF,CACF;gBACN,WAAK,KAAK,EAAE,iCAAiC;oBAC3C,WAAK,KAAK,EAAE,kCAAkC;wBAC5C,SAAG,KAAK,EAAE,mCAAmC,qBAAoB,CAC7D;oBACN,oBAAa,CACT;gBAEN,WAAK,KAAK,EAAE,6BAA6B;oBACvC,WAAK,KAAK,EAAE,kCAAkC;wBAC5C,SAAG,KAAK,EAAE,mCAAmC,kBAAiB;wBAC9D,SAAG,KAAK,EAAE,yCAAyC,0EAAyE,CACxH;oBACN,aAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,EAAC,WAAW,EAAC,eAAe,GAAG,CACzE,CACF,CACP,CACG;YACN,4DAAK,KAAK,EAAE,eAAe;gBACzB,+DAAQ,KAAK,EAAE,WAAW;oBACxB,gEAAS,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,IAAI,GAAG;gCAErC;gBACT,+DAAQ,KAAK,EAAE,aAAa;oBAC1B,gEAAS,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG;6BAE3B,CACL;YAEN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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  @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  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        <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\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: 'a4db8b126a38153d494b6a2e4005d08b93455f21' }, h("div", { key: '220eac7c15bf25713e9d7688410fb7a19fd08a0e', class: "ls-field-properties-section" }, "Text Field"), h("div", { key: 'e93bac0aac9e1db6e73c59a5ccedc74ebc6112de' }, "Label: ", h("input", { key: '23fa2aaa09a4923ff6d15647b6ed5c868d769388', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '4bf078ffa799a5ca66f95de683957675d7dcb406', dataItem: this.dataItem }), h("slot", { key: '91fd6d676d88d718f84aca7a9b3742f8a5523053' })));
+        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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAO1E,MAAM,OAAO,qBAAqB;IACxB,QAAQ,CAAe;IACvB,QAAQ,GAA2C,SAAS,CAAC;IAErE,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;QAC9B,OAAO,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,CAAC,IAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAC5J,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,+DAAQ,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,cAE1G;gBACT,+DAAQ,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,gBAE9G;gBACT,+DAAQ,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC,iBAEhH,CACL;YACN,4DAAK,KAAK,EAAE,qBAAqB,IAC9B,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,CAC/B,0BAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAChD,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,CACnC,WAAK,KAAK,EAAE,WAAW;gBACrB,2BAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5C,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAE,WAAW;gBACrB,WAAK,KAAK,EAAE,6BAA6B;oBACvC,WAAK,KAAK,EAAE,kCAAkC;wBAC5C,SAAG,KAAK,EAAE,mCAAmC,iBAAgB;wBAC7D,SAAG,KAAK,EAAE,yCAAyC,4CAA2C,CAC1F;oBACN,WACE,KAAK,EAAE,uBAAuB,EAC9B,KAAK,EAAE;4BACL,MAAM,EAAE,oBAAoB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;4BACzE,UAAU,EAAE,SAAS,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;yBACnE;wBAED,WAAK,KAAK,EAAE,qBAAqB;4BAC/B,WACE,KAAK,EAAE,oBAAoB,EAC3B,KAAK,EAAE;oCACL,MAAM,EAAE,mBAAmB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;oCACxE,KAAK,EAAE,SAAS,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;oCAC7D,UAAU,EAAE,SAAS,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;iCACnE;gCAED,eAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC7B;4BACN,SAAG,KAAK,EAAE,oBAAoB,WAAU,CACpC,CACF,CACF;gBACN,WAAK,KAAK,EAAE,iCAAiC;oBAC3C,WAAK,KAAK,EAAE,kCAAkC;wBAC5C,SAAG,KAAK,EAAE,mCAAmC,qBAAoB,CAC7D;oBACN,oBAAa,CACT;gBAEN,WAAK,KAAK,EAAE,6BAA6B;oBACvC,WAAK,KAAK,EAAE,kCAAkC;wBAC5C,SAAG,KAAK,EAAE,mCAAmC,kBAAiB;wBAC9D,SAAG,KAAK,EAAE,yCAAyC,0EAAyE,CACxH;oBACN,aAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,EAAC,WAAW,EAAC,eAAe,GAAG,CACzE;gBAEN,WAAK,KAAK,EAAE,6BAA6B;oBACvC,WAAK,KAAK,EAAE,kCAAkC;wBAC5C,SAAG,KAAK,EAAE,mCAAmC,qBAAoB;wBACjE,SAAG,KAAK,EAAE,yCAAyC,mEAAkE,CACjH;oBACN,WAAK,KAAK,EAAE,eAAe;wBACzB,eAAS,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,GAAW;wBACrD,kBACG,eAAe;6BACb,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,MAAM,CAAC;6BACxC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACX,cAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,KAAK,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACvE,IAAI,CAAC,WAAW,CACV,CACV,CAAC,CACG,CACL,CACF,CACF,CACP,CACG;YACN,4DAAK,KAAK,EAAE,eAAe;gBACzB,+DAAQ,KAAK,EAAE,WAAW;oBACxB,gEAAS,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,IAAI,GAAG;gCAErC;gBACT,+DAAQ,KAAK,EAAE,aAAa;oBAC1B,gEAAS,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG;6BAE3B,CACL;YACN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}

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

@@ -1,23 +1,81 @@
 :host {
-  display: inline-block;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  position: relative;
 }
 
-button {
-  display: inline-flex;
-  background-color: transparent;
-  min-width: 24px;
-  min-height: 24px;
-  border-radius: 0.5rem;
-  margin: 0.25rem;
-  width: 27px;  
-  height: 27px;
-  justify-content: center;
-  vertical-align: middle;
-  border: 0;
+.ls-toolbar-numeric {
+  width: 45px;
+  max-height: 18px;
+  margin: 0px;
+  padding: 0px;
+}
+
+* {
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.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;
+}
+
+.multi-button-group-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.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% */
+}
+
+.input-row {
+  display: flex;
+  gap: 0.5rem;
 }
 
-button:hover {
-  background-color: rgb(219, 219, 219);
+.input-row .input-wrapper input {
+  width: 9.313rem;
+  max-width: 9.313rem;
 }
 
 /* Global Styles */
@@ -57,7 +115,7 @@ select {
 
 .input-wrapper {
   position: relative;
-  width: fit-content;
+  width: 100%;
 }
 
 #selectorIcon {
@@ -78,6 +136,15 @@ 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;
 }
@@ -101,25 +168,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);
 }
 
@@ -128,6 +195,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'] {
@@ -271,18 +340,25 @@ button.tertiaryGrey:hover {
   border: 1px solid var(--gray-30, #e0e2e5);
   background: var(--white, #ffffff);
   overflow: clip;
+  width: 100%;
 }
 
 .button-group button {
   display: flex;
+  width: 100%;
   background: transparent;
   border-radius: unset;
   padding: 0.25rem 0.75rem;
   min-width: 2.156rem;
-  min-height: unset;
   color: var(--gray-80, #6c6e73);
 }
 
+.button-group button:disabled {
+  background: var(--gray-10, #f7f8fa);
+  cursor: not-allowed;
+  color: var(--gray-50, #d8d9dc);
+}
+
 .button-group button:hover {
   background: var(--gray-10, #f7f8fa);
 }
@@ -298,4 +374,3 @@ button.tertiaryGrey:hover {
 .button-group > :not(:first-child) {
   border-left: 1px solid var(--gray-30, #e0e2e5);
 }
-

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

@@ -7,14 +7,14 @@ export class LsFieldSize {
     // The source of the chain fires the mutation
     alter(diff) {
         const diffs = this.dataItem.map(c => {
-            return { action: "update", data: { ...c, ...diff } };
+            return { action: 'update', data: { ...c, ...diff } };
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: '370469e2e9bbfb5d9c1b034aa5a6056c125b1563' }, h("div", { key: 'b5807f2770fd9cfd9fc257aec00c113ffb3e22b4', class: "flex rounded-[10px] focus:outline-hidden focus:ring-4 focus:ring-offset-0 focus:ring-primary-30" }, h("button", { key: '31f39a39290f7edf4669f30ffe20cd5056aa07e6', "aria-label": "Make selected fields the same width as the first selected field.", class: "ls-round-button", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same width as the first selected field.", "data-tooltip-place": "top" }, h("svg", { key: '50e12865b2fb41cce603a8017793dda5283efaef', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '281ec1021546c1701f6984c5d47f0812c11ecff7', d: "M14 9V6C14 5.44772 13.5523 5 13 5H11C10.4477 5 10 5.44772 10 6V9M14 15.0104V18C14 18.5523 13.5523 19 13 19H11C10.4477 19 10 18.5523 10 18V15.0104M6.00751 15.0104L4.00751 12M4.00751 12L6.00751 9M4.00751 12H20.0013M18.0013 15.0104L20.0013 12M20.0013 12L18.0013 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '2ddfd3aafb6d8f45f9807a71e892ff8faf2485b9', class: "ls-round-button", onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height as the first selected field.", "data-tooltip-place": "top" }, h("svg", { key: 'e39193ff14ed9dd817268fab706d662df75b68de', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a2d6c9aefe4da11be709b88d9745e646273885c9', d: "M9.00439 10.0042H6.00439C5.45211 10.0042 5.00439 10.4519 5.00439 11.0042V13.0042C5.00439 13.5565 5.45211 14.0042 6.00439 14.0042H9.00439M15.0148 10.0042H18.0044C18.5567 10.0042 19.0044 10.4519 19.0044 11.0042V13.0042C19.0044 13.5565 18.5567 14.0042 18.0044 14.0042H15.0148M15.0148 17.9967L12.0044 19.9967M12.0044 19.9967L9.00439 17.9968M12.0044 19.9967V4.00293M15.0148 6.00299L12.0044 4.00293M12.0044 4.00293L9.00439 6.00293", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '692649a6564f3df46d04360108fecf1bad055bb7', class: "ls-round-button", onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height and width as the first selected field.", "data-tooltip-place": "top" }, h("svg", { key: '7905e0ab8fd9d51fe6823ada2dbe50a6f5c0e51e', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '51fef530c0a273c0850cd859ae3db3af51213110', d: "M4 8V4M4 4H8M4 4L8 8M20 8V4M20 4H16M20 4L16 8M4 16V20M4 20H8M4 20L8 16M20 16V20M20 20H16M20 20L16 16M8 8H10M8 8V10M16 8H14M16 8V10M8 16H10M8 16V14M16 16V14M16 16H14", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: 'e5a1ccbd3d3fac7280a9273ca2c19ed672ca1d89' })));
+        return (h(Host, { key: '90092261b158a8c5417d7745b58b8e9a0feb8852' }, h("div", { key: '97b5accd42cf1301a50260f60722e977130952db', class: 'ls-field-properties-section' }, h("div", { key: '302a99cce209ab3435384649e22ded2f17ad8d4b', class: 'ls-field-properties-section-text' }, h("p", { key: 'c4ae8bfd79a563db422b5a9e70076fb6c13e49a7', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: '74911d50258b788e430c1b23171269d3a2aa8596', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: '665ac7372b6c2728c864de3be654a61677da70fa', class: 'button-group' }, h("button", { key: 'bac5011c1d6b61a6ee5eae3e262f3400fa1d4944', onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height and width as the first selected field.", "data-tooltip-place": "top" }, h("ls-icon", { key: '9599ead6bbdc0d994316b97fe9dc00a7875ed7a2', name: "field-scale" })), h("button", { key: '34a921f82812e5c3cf64a794d7ff1ae1f1661adb', "aria-label": "Make selected fields the same width as the first selected field.", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same width as the first selected field.", "data-tooltip-place": "top" }, h("ls-icon", { key: '597a69fb82f407187d7c5fde43e7144d17aa4be4', name: "field-match-width" })), h("button", { key: 'd05fbbd24ad75268bb64ec82a75fa878f7cbb1b3', onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height as the first selected field.", "data-tooltip-place": "top" }, h("ls-icon", { key: 'a3f3f8e51a70e0ba38607e0856718d5534c86456', name: "field-match-height" })))), h("slot", { key: '19e743f951e9ca9c6484941edce58248818052c7' })));
     }
     static get is() { return "ls-field-size"; }
     static get encapsulation() { return "shadow"; }