legalesign-document-viewer 0.4.5 → 0.4.7

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

@@ -3,6 +3,7 @@ import { getInputType } from "../ls-document-viewer/editorUtils";
 import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
 export class LsEditorField {
     component;
+    assignee;
     dataItem;
     selected = false;
     readonly;
@@ -13,9 +14,21 @@ export class LsEditorField {
     heldEdge = null;
     isEdgeDragging = false;
     innerValue;
+    zoom;
     sizeObserver;
     mutate;
     update;
+    /**
+     * Controls whether floating elements are visible. Set by mouse enter/leave events.
+     */
+    floatingActive = false;
+    // Set floatingActive true on mouse enter, false on mouse leave
+    handleMouseEnter = () => {
+        this.floatingActive = true;
+    };
+    handleMouseLeave = () => {
+        this.floatingActive = false;
+    };
     handleInput(e) {
         if (e.code === 'Enter') {
             this.isEditing = false;
@@ -68,25 +81,23 @@ export class LsEditorField {
     }
     watchSelectedHandler(_newValue, _oldValue) {
         if (_newValue) {
-            this.component.style.background = defaultRolePalette[this.dataItem?.signer % 100].s20;
-            this.component.style.opacity = '0.7';
+            this.component.style.background = this.hexToRgba(defaultRolePalette[this.dataItem?.signer % 100].s20, 0.5);
             this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
         }
         else {
-            this.component.style.background = '#ffffff';
-            this.component.style.opacity = '0.7';
+            this.component.style.background = 'rgba(255,255,255,0.5)';
             this.component.style.boxShadow = 'none';
         }
     }
+    deleteField = () => {
+        this.mutate.emit([{ action: 'delete', data: this.dataItem }]);
+        this.update.emit([{ action: 'delete', data: this.dataItem }]);
+    };
     componentDidLoad() {
         this.sizeObserver = new ResizeObserver(entries => {
             for (const entry of entries) {
                 if (entry.contentRect) {
-                    //          const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLElement;
                     const movebox = this.component.shadowRoot.getElementById('field-info');
-                    // console.log(editbox)
-                    // editbox.style.height = entry.contentRect.height + "px"
-                    // editbox.style.width = entry.contentRect.width + "px"
                     movebox.style.height = entry.contentRect.height + 'px';
                     movebox.style.width = entry.contentRect.width + 'px';
                 }
@@ -95,13 +106,11 @@ export class LsEditorField {
         this.sizeObserver.observe(this.component);
         // New dropped components automatically need selecting.
         if (this.selected) {
-            this.component.style.background = defaultRolePalette[this.dataItem?.signer % 100].s20;
-            this.component.style.opacity = '0.7';
+            this.component.style.background = this.hexToRgba(defaultRolePalette[this.dataItem?.signer % 100].s20, 0.5);
             this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
         }
         else {
-            this.component.style.background = '#ffffff';
-            this.component.style.opacity = '0.7';
+            this.component.style.background = this.hexToRgba('ffffff', 0.7);
             this.component.style.boxShadow = 'none';
         }
     }
@@ -122,11 +131,44 @@ export class LsEditorField {
             this.update.emit(diffs);
         }, delay);
     }
+    hexToRgba(hex, alpha) {
+        hex = hex.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        return `rgba(${r},${g},${b},${alpha})`;
+    }
     render() {
-        return (h(Host, { key: '9b7bb4209e9f43796d9a64215e19427de80ad28d', style: { border: `2px ${defaultRolePalette[this.dataItem?.signer % 100].s60} solid` } }, h("div", { key: '910d5ce39ef7a62091e4e22446c7570e2a7a860a', class: {
+        const hostStyle = this.floatingActive
+            ? { border: `2px ${defaultRolePalette[this.dataItem?.signer % 100].s60} solid`, boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)' }
+            : { border: `2px ${defaultRolePalette[this.dataItem?.signer % 100].s60} solid` };
+        const zoomValue = parseFloat(this.zoom) || 1;
+        console.log('Zoom value in field:', zoomValue);
+        return (h(Host, { key: 'a4f5875c197571704825a994065e5c11f5138a1e', id: this.dataItem ? 'ls-field-' + this.dataItem.id : undefined, style: hostStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '8385e522e50335d6c5ab517bbf782f964683ca6b', class: {
                 'ls-editor-field': true,
                 'is-selected': this.selected,
-            } }, !this.dataItem?.optional && h("ls-icon", { key: '38d64178f8e4591052b72d85f4898a24b480fc02', name: "required", size: "12", class: "required-icon", customStyle: { verticalAlign: 'top' } }), h("input", { key: '3cc4e2b39d6991520a9f5bee92948e28932410eb', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value, checked: this.dataItem?.value ? true : false, onInput: e => this.alter({ value: e.target.value }) }), h("div", { key: '240611a6bf588d6d25062dcfaca8fa9484bd4a2f', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.dataItem.value.length && this.dataItem.value || this.dataItem?.label || this.dataItem?.formElementType))));
+            } }, !this.dataItem?.optional && h("ls-icon", { key: '902e5a17e75945c13b06eab2c003488f2e9a90fe', name: "required", size: `${0.75 * zoomValue}rem`, class: "required-icon", customStyle: { position: 'absolute', verticalAlign: 'top', top: `${0.125 * zoomValue}rem`, right: `${0.125 * zoomValue}rem` } }), h("input", { key: 'f4ee949c3c00671241433f80244a502cabf404bf', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value, checked: this.dataItem?.value ? true : false, onInput: e => this.alter({ value: e.target.value }) }), h("div", { key: '680784b3c815ae5a3a53d291466dd58d3d9045cf', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable', style: { color: `${defaultRolePalette[this.dataItem?.signer % 100].s100}` } }, (this.dataItem.value.length && this.dataItem.value) || this.dataItem?.formElementType), (this.floatingActive || this.selected) && this.dataItem?.label && (h("div", { key: '1a597889f65850e1b0437f1cc259e3aa965888c0', style: {
+                position: 'absolute',
+                background: `${defaultRolePalette[this.dataItem?.signer % 100].s20}`,
+                color: `${defaultRolePalette[this.dataItem?.signer % 100].s80}`,
+                borderRadius: `${0.25 * zoomValue}rem`,
+                padding: `${0.125 * zoomValue}rem ${0.25 * zoomValue}rem`,
+                top: `-${1.375 * zoomValue}rem`,
+                fontWeight: '500',
+                left: `-${2 * zoomValue}px`,
+                whiteSpace: 'nowrap',
+                width: 'fit-content',
+            } }, this.dataItem?.label)), (this.floatingActive || this.selected) && (h("p", { key: '3ffbb7becbcb267715b0f1e9ac3dbf10c1be53ef', style: {
+                position: 'absolute',
+                color: 'var(--gray-80, #3a3a3a)',
+                bottom: `-${1.75 * zoomValue}rem`,
+                fontSize: `${0.625 * zoomValue}rem`,
+                left: '0',
+                whiteSpace: 'nowrap',
+                width: 'fit-content',
+            } }, "Assigned to: ", this.assignee)), this.floatingActive && (h("button", { key: '9e9d0eb0e0f6addcab70db80f94e49fb0cc768e2', class: 'x-button', style: {
+                padding: `${0.125 * zoomValue}rem`,
+            }, onClick: () => this.deleteField() }, h("ls-icon", { key: '0df2ef57c7cdf417e98810d673d3e8f42df43d3c', name: "x", size: `${0.625 * zoomValue}rem` }))))));
     }
     static get is() { return "ls-editor-field"; }
     static get encapsulation() { return "shadow"; }
@@ -142,6 +184,25 @@ export class LsEditorField {
     }
     static get properties() {
         return {
+            "assignee": {
+                "type": "string",
+                "attribute": "assignee",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "dataItem": {
                 "type": "unknown",
                 "attribute": "data-item",
@@ -261,6 +322,45 @@ export class LsEditorField {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "null"
+            },
+            "zoom": {
+                "type": "string",
+                "attribute": "zoom",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "floatingActive": {
+                "type": "boolean",
+                "attribute": "floating-active",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether floating elements are visible. Set by mouse enter/leave events."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }
@@ -277,7 +377,7 @@ export class LsEditorField {
                 "method": "mutate",
                 "name": "mutate",
                 "bubbles": true,
-                "cancelable": true,
+                "cancelable": false,
                 "composed": true,
                 "docs": {
                     "tags": [],
@@ -298,7 +398,7 @@ export class LsEditorField {
                 "method": "update",
                 "name": "update",
                 "bubbles": true,
-                "cancelable": true,
+                "cancelable": false,
                 "composed": true,
                 "docs": {
                     "tags": [],

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

@@ -1 +1 @@
-{"version":3,"file":"ls-editor-field.js","sourceRoot":"","sources":["../../../src/components/ls-editor-field/ls-editor-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, State, Prop, Watch, Listen, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { getInputType } from '../ls-document-viewer/editorUtils';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-editor-field',\n  styleUrl: 'ls-editor-field.css',\n  shadow: true,\n})\nexport class LsEditorField {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true }) dataItem: LSApiElement;\n  @Prop() selected: boolean = false;\n  @Prop() readonly: boolean;\n  @Prop() type: 'text' | 'signature' | 'date' | 'regex' | 'file' | 'number' | 'autodate';\n  @Prop() page: { height: number; width: number };\n  @Prop() fixedAspect: number | null = null;\n  @State() isEditing: boolean = false;\n  @State() heldEdge: string = null;\n  @State() isEdgeDragging: boolean = false;\n  @State() innerValue: string;\n  private sizeObserver: ResizeObserver;\n\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  @Listen('keydown')\n  handleInput(e: KeyboardEvent) {\n    if (e.code === 'Enter') {\n      this.isEditing = false;\n      this.sizeObserver.observe(this.component.shadowRoot.getElementById('field-info'));\n    }\n  }\n\n  @Listen('mousemove', { capture: true })\n  handleMouseMove(e) {\n    if (this.readonly) return;\n    if (!e.clientX) return;\n\n    // Determine which edge is being moved over and what cursor to show.\n    if (Math.abs(e.offsetX) < 5) {\n      this.component.style.cursor = 'ew-resize';\n    } else if (Math.abs(e.offsetX - this.component.clientWidth) < 5) {\n      this.component.style.cursor = 'ew-resize';\n    } else if (Math.abs(e.offsetY) < 5) {\n      this.component.style.cursor = 'ns-resize';\n    } else if (Math.abs(e.offsetY - this.component.clientHeight) < 5) {\n      this.component.style.cursor = 'ns-resize';\n    } else {\n      this.component.style.cursor = 'move';\n    }\n  }\n\n  @Listen('dblclick', { capture: true })\n  handleDoubleClick() {\n    if (this.readonly) return;\n    this.isEditing = true;\n    this.heldEdge = null;\n    this.isEdgeDragging = false;\n    this.sizeObserver.disconnect();\n    this.innerValue = this.innerValue ? this.innerValue : this.dataItem?.value;\n\n    const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLInputElement;\n    console.log(this.dataItem);\n\n    if (editbox) {\n      editbox.className = 'ls-editor-field-editable';\n      editbox.focus();\n    }\n  }\n\n  @Listen('dragstart', { capture: false, passive: false })\n  handleDragStart(event) {\n    // Add the target element's id to the data transfer object\n    event.dataTransfer.setData(\n      'application/json',\n      JSON.stringify({\n        type: this.type,\n      }),\n    );\n    event.dataTransfer.dropEffect = 'move';\n  }\n\n  @Watch('selected')\n  watchSelectedHandler(_newValue: boolean, _oldValue: boolean) {\n    if (_newValue) {\n      this.component.style.background = defaultRolePalette[this.dataItem?.signer % 100].s20;\n      this.component.style.opacity = '0.7';\n      this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';\n    } else {\n      this.component.style.background = '#ffffff';\n      this.component.style.opacity = '0.7';\n      this.component.style.boxShadow = 'none';\n    }\n  }\n\n  componentDidLoad() {\n    this.sizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        if (entry.contentRect) {\n          //          const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLElement;\n          const movebox = this.component.shadowRoot.getElementById('field-info') as HTMLElement;\n          // console.log(editbox)\n          // editbox.style.height = entry.contentRect.height + \"px\"\n          // editbox.style.width = entry.contentRect.width + \"px\"\n\n          movebox.style.height = entry.contentRect.height + 'px';\n          movebox.style.width = entry.contentRect.width + 'px';\n        }\n      }\n    });\n\n    this.sizeObserver.observe(this.component);\n\n    // New dropped components automatically need selecting.\n    if (this.selected) {\n      this.component.style.background = defaultRolePalette[this.dataItem?.signer % 100].s20;\n      this.component.style.opacity = '0.7';\n      this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';\n    } else {\n      this.component.style.background = '#ffffff';\n      this.component.style.opacity = '0.7';\n      this.component.style.boxShadow = 'none';\n    }\n  }\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object) {\n    this.dataItem = { ...this.dataItem, ...diff };\n    this.debounce(this.dataItem, 900);\n  }\n\n  private labeltimer;\n\n  debounce(data, delay) {\n    if (this.labeltimer) clearTimeout(this.labeltimer);\n\n    this.labeltimer = setTimeout(() => {\n      const diffs: LSMutateEvent[] = [{ action: 'update', data }];\n      this.mutate.emit(diffs);\n      this.update.emit(diffs);\n    }, delay);\n  }\n\n  render() {\n    return (\n      <Host style={{ border: `2px ${defaultRolePalette[this.dataItem?.signer % 100].s60} solid` }}>\n        <div\n          class={{\n            'ls-editor-field': true,\n            'is-selected': this.selected,\n          }}\n        >\n          {!this.dataItem?.optional && <ls-icon name=\"required\" size=\"12\" class=\"required-icon\" customStyle={{ verticalAlign: 'top'}}/>}\n          <input\n            id=\"editing-input\"\n            class={this.isEditing ? 'ls-editor-field-editable' : 'hidden-field'}\n            type={getInputType(this.dataItem.validation).inputType}\n            value={this.dataItem?.value}\n            checked={this.dataItem?.value ? true : false}\n            onInput={e => this.alter({ value: (e.target as HTMLInputElement).value })}\n          />\n\n          <div id=\"field-info\" class={this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable'}>\n            {this.dataItem.value.length && this.dataItem.value  || this.dataItem?.label || this.dataItem?.formElementType}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-editor-field.js","sourceRoot":"","sources":["../../../src/components/ls-editor-field/ls-editor-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, State, Prop, Watch, Listen, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { getInputType } from '../ls-document-viewer/editorUtils';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-editor-field',\n  styleUrl: 'ls-editor-field.css',\n  shadow: true,\n})\nexport class LsEditorField {\n  @Element() component: HTMLElement;\n  @Prop() assignee: string;\n  @Prop({ mutable: true }) dataItem: LSApiElement;\n  @Prop() selected: boolean = false;\n  @Prop() readonly: boolean;\n  @Prop() type: 'text' | 'signature' | 'date' | 'regex' | 'file' | 'number' | 'autodate';\n  @Prop() page: { height: number; width: number };\n  @Prop() fixedAspect: number | null = null;\n  @State() isEditing: boolean = false;\n  @State() heldEdge: string = null;\n  @State() isEdgeDragging: boolean = false;\n  @State() innerValue: string;\n  @Prop() zoom: string;\n  \n  private sizeObserver: ResizeObserver;\n\n  @Event({\n    bubbles: true,\n    cancelable: false,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: false,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  /**\n   * Controls whether floating elements are visible. Set by mouse enter/leave events.\n   */\n  @Prop({ mutable: true, reflect: true }) floatingActive: boolean = false;\n\n  // Set floatingActive true on mouse enter, false on mouse leave\n  private handleMouseEnter = () => {\n    this.floatingActive = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.floatingActive = false;\n  };\n\n  @Listen('keydown')\n  handleInput(e: KeyboardEvent) {\n    if (e.code === 'Enter') {\n      this.isEditing = false;\n      this.sizeObserver.observe(this.component.shadowRoot.getElementById('field-info'));\n    }\n  }\n\n  @Listen('mousemove', { capture: true })\n  handleMouseMove(e) {\n    if (this.readonly) return;\n    if (!e.clientX) return;\n\n    // Determine which edge is being moved over and what cursor to show.\n    if (Math.abs(e.offsetX) < 5) {\n      this.component.style.cursor = 'ew-resize';\n    } else if (Math.abs(e.offsetX - this.component.clientWidth) < 5) {\n      this.component.style.cursor = 'ew-resize';\n    } else if (Math.abs(e.offsetY) < 5) {\n      this.component.style.cursor = 'ns-resize';\n    } else if (Math.abs(e.offsetY - this.component.clientHeight) < 5) {\n      this.component.style.cursor = 'ns-resize';\n    } else {\n      this.component.style.cursor = 'move';\n    }\n  }\n\n  @Listen('dblclick', { capture: true })\n  handleDoubleClick() {\n    if (this.readonly) return;\n    this.isEditing = true;\n    this.heldEdge = null;\n    this.isEdgeDragging = false;\n    this.sizeObserver.disconnect();\n    this.innerValue = this.innerValue ? this.innerValue : this.dataItem?.value;\n\n    const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLInputElement;\n    console.log(this.dataItem);\n\n    if (editbox) {\n      editbox.className = 'ls-editor-field-editable';\n      editbox.focus();\n    }\n  }\n\n  @Listen('dragstart', { capture: false, passive: false })\n  handleDragStart(event) {\n    // Add the target element's id to the data transfer object\n    event.dataTransfer.setData(\n      'application/json',\n      JSON.stringify({\n        type: this.type,\n      }),\n    );\n    event.dataTransfer.dropEffect = 'move';\n  }\n\n  @Watch('selected')\n  watchSelectedHandler(_newValue: boolean, _oldValue: boolean) {\n    if (_newValue) {\n      this.component.style.background = this.hexToRgba(defaultRolePalette[this.dataItem?.signer % 100].s20, 0.5);\n      this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';\n    } else {\n      this.component.style.background = 'rgba(255,255,255,0.5)';\n      this.component.style.boxShadow = 'none';\n    }\n  }\n\n  deleteField = () => {\n    this.mutate.emit([{ action: 'delete', data: this.dataItem }]);\n    this.update.emit([{ action: 'delete', data: this.dataItem }]);\n  };\n\n  componentDidLoad() {\n    this.sizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        if (entry.contentRect) {\n          const movebox = this.component.shadowRoot.getElementById('field-info') as HTMLElement;\n\n          movebox.style.height = entry.contentRect.height + 'px';\n          movebox.style.width = entry.contentRect.width + 'px';\n        }\n      }\n    });\n\n    this.sizeObserver.observe(this.component);\n\n    // New dropped components automatically need selecting.\n    if (this.selected) {\n      this.component.style.background = this.hexToRgba(defaultRolePalette[this.dataItem?.signer % 100].s20, 0.5);\n      this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';\n    } else {\n      this.component.style.background = this.hexToRgba('ffffff', 0.7);\n      this.component.style.boxShadow = 'none';\n    }\n  }\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object) {\n    this.dataItem = { ...this.dataItem, ...diff };\n    this.debounce(this.dataItem, 900);\n  }\n\n  private labeltimer;\n\n  debounce(data, delay) {\n    if (this.labeltimer) clearTimeout(this.labeltimer);\n\n    this.labeltimer = setTimeout(() => {\n      const diffs: LSMutateEvent[] = [{ action: 'update', data }];\n      this.mutate.emit(diffs);\n      this.update.emit(diffs);\n    }, delay);\n  }\n\n  hexToRgba(hex: string, alpha: number): string {\n    hex = hex.replace('#', '');\n    const r = parseInt(hex.substring(0, 2), 16);\n    const g = parseInt(hex.substring(2, 4), 16);\n    const b = parseInt(hex.substring(4, 6), 16);\n    return `rgba(${r},${g},${b},${alpha})`;\n  }\n\n  render() {\n    const hostStyle = this.floatingActive\n      ? { border: `2px ${defaultRolePalette[this.dataItem?.signer % 100].s60} solid`, boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)' }\n      : { border: `2px ${defaultRolePalette[this.dataItem?.signer % 100].s60} solid` };\n\n    const zoomValue = parseFloat(this.zoom) || 1;\n    console.log('Zoom value in field:', zoomValue);\n\n    return (\n      <Host id={this.dataItem ? 'ls-field-' + this.dataItem.id : undefined} style={hostStyle} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>\n        <div\n          class={{\n            'ls-editor-field': true,\n            'is-selected': this.selected,\n          }}\n        >\n          {!this.dataItem?.optional && <ls-icon name=\"required\" size={`${0.75 * zoomValue}rem`} class=\"required-icon\" customStyle={{ position: 'absolute', verticalAlign: 'top', top: `${0.125 * zoomValue}rem`, right: `${0.125 * zoomValue}rem` }} />}\n          <input\n            id=\"editing-input\"\n            class={this.isEditing ? 'ls-editor-field-editable' : 'hidden-field'}\n            type={getInputType(this.dataItem.validation).inputType}\n            value={this.dataItem?.value}\n            checked={this.dataItem?.value ? true : false}\n            onInput={e => this.alter({ value: (e.target as HTMLInputElement).value })}\n          />\n\n          <div id=\"field-info\" class={this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable'} style={{ color: `${defaultRolePalette[this.dataItem?.signer % 100].s100}` }}>\n            {(this.dataItem.value.length && this.dataItem.value) || this.dataItem?.formElementType}\n          </div>\n          {(this.floatingActive || this.selected) && this.dataItem?.label && (\n            <div\n              style={{\n                position: 'absolute',\n                background: `${defaultRolePalette[this.dataItem?.signer % 100].s20}`,\n                color: `${defaultRolePalette[this.dataItem?.signer % 100].s80}`,\n                borderRadius: `${0.25 * zoomValue}rem`,\n                padding: `${0.125 * zoomValue}rem ${0.25 * zoomValue}rem`,\n                top: `-${1.375 * zoomValue}rem`,\n                fontWeight: '500',\n                left: `-${2 * zoomValue}px`,\n                whiteSpace: 'nowrap',\n                width: 'fit-content',\n              }}\n            >\n              {this.dataItem?.label}\n            </div>\n          )}\n          {(this.floatingActive || this.selected) && (\n            <p\n              style={{\n                position: 'absolute',\n                color: 'var(--gray-80, #3a3a3a)',\n                bottom: `-${1.75 * zoomValue}rem`,\n                fontSize: `${0.625 * zoomValue}rem`,\n                left: '0',\n                whiteSpace: 'nowrap',\n                width: 'fit-content',\n              }}\n            >\n              Assigned to: {this.assignee}\n            </p>\n          )}\n          {this.floatingActive && (\n            <button\n              class={'x-button'}\n              style={{\n                padding: `${0.125 * zoomValue}rem`,\n              }}\n              onClick={() => this.deleteField()}\n            >\n              <ls-icon name=\"x\" size={`${0.625 * zoomValue}rem`} />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-editor-table/ls-editor-table.js

@@ -23,7 +23,7 @@ export class LsEditorTable {
         });
     }
     render() {
-        return (h(Host, { key: 'ffe897428c34a78dc5ba8da43fe72414f67393cb' }, h("table", { key: 'ae2af258372dec94b87db132bcecff4223cd1ead', id: "ls-editor-table" }), h("slot", { key: 'ef198fa73001fec2d580e6b0c5d2979fd984b70a' })));
+        return (h(Host, { key: '55c508ab25969ad8649fb15ef7a0e20d3e212bde' }, h("table", { key: '8b9154ecc83d4a09b67a83441c6e73692380c72a', id: "ls-editor-table" }), h("slot", { key: 'f3eea5f381266897fcf5df9d08959076b5ba4385' })));
     }
     static get is() { return "ls-editor-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-feature-column/ls-feature-column.js

@@ -18,22 +18,22 @@ export class LsFeatureColoumn {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: '4fd2314ce9b9461709932c09b77c2aae76b48d3b' }, h("div", { key: '164ded248f4b21510a9c0dad300454932a7ac626', class: this.mode !== "editor" ? 'hidden' : this.manager === 'document' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+        return (h(Host, { key: '17fde441c344fb5fe9f147f570bdf656fc1a249d' }, h("div", { key: '1fc695cd618684eb128ad6bd1e1e3445f5209403', class: this.mode !== "editor" ? 'hidden' : this.manager === 'document' ? 'activeIcon' : 'defaultIcon', onClick: () => {
                 this.manage.emit('document');
                 this.manager = 'document';
-            }, "data-tooltip-title": "Template Details", "data-tooltip": "View and edit Template properties", "data-tooltip-placement": "right" }, h("ls-icon", { key: '87179deb691675be659b0cb29d084c2be916a70b', name: "document", size: "24" })), h("div", { key: '82c8446a337944b9b0d23fbae4560d5ab33c82fa', class: this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+            }, "data-tooltip-title": "Template Details", "data-tooltip": "View and edit Template properties", "data-tooltip-placement": "right" }, h("ls-icon", { key: '07b3066d434e909713449062ab152842fdcbf8f3', name: "document", size: "1.5rem" })), h("div", { key: '5406ccbb29eb6da9c9ca1518692d861774eb797f', class: this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon', onClick: () => {
                 this.manage.emit('toolbox');
                 this.manager = 'toolbox';
-            }, "data-tooltip-title": "Field Types", "data-tooltip": "Select and place Form Field Elements", "data-tooltip-placement": "right" }, h("ls-icon", { key: 'b2fa80b83b525533060ab3018cf0af9d69e3f4fb', name: "typing-input", size: "24" })), h("div", { key: 'c7026f640638638a5526fb641063756e188b4be6', class: this.mode !== "editor" ? 'hidden' : this.manager === 'participant' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+            }, "data-tooltip-title": "Field Types", "data-tooltip": "Select and place Form Field Elements", "data-tooltip-placement": "right" }, h("ls-icon", { key: 'b6a2b7bca1260f42aeab773cd364b63231a05a7f', name: "typing-input", size: "1.5rem" })), h("div", { key: '4f23c06b497942bffd2ad943bf59f135e8575397', class: this.mode !== "editor" ? 'hidden' : this.manager === 'participant' ? 'activeIcon' : 'defaultIcon', onClick: () => {
                 this.manage.emit('participant');
                 this.manager = 'participant';
-            }, "data-tooltip-title": "Participants", "data-tooltip": "Manage Signers, Witnesses and Approvers", "data-tooltip-placement": "right" }, h("ls-icon", { key: '99239c87618b2a164f35c8d48ef3f8a4ab2c2fda', name: "user-group", size: "24" })), h("div", { key: 'fdd1db3a219676dcae045c84050dfe7c7469c8b1', class: this.mode !== "compose" ? 'hidden' : this.manager === 'recipient' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+            }, "data-tooltip-title": "Participants", "data-tooltip": "Manage Signers, Witnesses and Approvers", "data-tooltip-placement": "right" }, h("ls-icon", { key: '07b6f9f1cc11ede4d05c21593296421399cd58be', name: "user-group", size: "1.5rem" })), h("div", { key: '1f916a0c4821825557c0cc2569318445d89bc9ee', class: this.mode !== "compose" ? 'hidden' : this.manager === 'recipient' ? 'activeIcon' : 'defaultIcon', onClick: () => {
                 this.manage.emit('recipient');
                 this.manager = 'recipient';
-            }, "data-tooltip-title": "Recipients", "data-tooltip": "View the list of Recipients for this document", "data-tooltip-placement": "right" }, h("ls-icon", { key: '5c1f9ad51ce582d368d1e68d6d13645a3ec76056', name: "user-group", size: "24" })), h("div", { key: '688205cb35217107f70d09917e2922b60cf4f124', class: this.mode !== "preview" ? 'hidden' : this.manager === 'validation' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+            }, "data-tooltip-title": "Recipients", "data-tooltip": "View the list of Recipients for this document", "data-tooltip-placement": "right" }, h("ls-icon", { key: '52c8442130d4af3837989b83ec309ddaebb7ba8e', name: "user-group", size: "1.5rem" })), h("div", { key: 'c1b0abfae52baecec9515a040010fd7aa405ff51', class: this.mode !== "preview" ? 'hidden' : this.manager === 'validation' ? 'activeIcon' : 'defaultIcon', onClick: () => {
                 this.manage.emit('validation');
                 this.manager = 'validation';
-            }, "data-tooltip-title": "Validation", "data-tooltip": "View the list of Recipients for this document", "data-tooltip-placement": "right" }, h("ls-icon", { key: '30a2f14f246333c809e6dcaa5c0173f9704abc74', name: "adjustments", size: "24" })), h("slot", { key: 'bc159f07100a29564ee74328c2bc2f7196f84f47' }), h("ls-tooltip", { key: '856f0f1f6b5dbbbf461788ae940719bf57876206', id: "ls-tooltip-master" })));
+            }, "data-tooltip-title": "Validation", "data-tooltip": "View the list of Recipients for this document", "data-tooltip-placement": "right" }, h("ls-icon", { key: 'ccc4c347af1232c5c7539fb4f1e414e1492a50dc', name: "adjustments", size: "1.5rem" })), h("slot", { key: '8d6803ab3eb7aaddb47d6728013ad39d90fc4bfa' }), h("ls-tooltip", { key: 'b47081c7ec71610af9d617b88f7fd9282d0c17aa', id: "ls-tooltip-master" })));
     }
     static get is() { return "ls-feature-column"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-feature-column/ls-feature-column.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-feature-column.js","sourceRoot":"","sources":["../../../src/components/ls-feature-column/ls-feature-column.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, EventEmitter, Event, Element } from '@stencil/core';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-feature-column',\n  styleUrl: 'ls-feature-column.css',\n  shadow: true,\n})\nexport class LsFeatureColoumn {\n  @Element() component: HTMLElement;\n  /**\n   * Determines / sets which of the far left 'managers' is active.\n   * {'document' | 'toolbox' | 'participant' }\n   */\n  @Prop({ mutable: true }) manager: 'document' | 'toolbox' | 'participant'| 'recipient' | 'validation' = 'toolbox';\n\n\n  /**\n   * The mode that document viewer is being used in.\n   * {'preview' | 'editor' | 'custom'}\n   */\n  @Prop() mode: 'preview' | 'editor' | 'compose' = 'editor';\n\n  // Send an manager change up the DOM\n  @Event() manage: EventEmitter<'document' | 'toolbox' | 'participant' | 'recipient' | 'validation'>;\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.mode !== \"editor\" ? 'hidden' : this.manager === 'document' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('document');\n            this.manager = 'document';\n          }}\n          data-tooltip-title=\"Template Details\"\n          data-tooltip=\"View and edit Template properties\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"document\" size=\"24\" />\n        </div>\n        <div\n          class={this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('toolbox');\n            this.manager = 'toolbox';\n          }}\n          data-tooltip-title=\"Field Types\"\n          data-tooltip=\"Select and place Form Field Elements\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"typing-input\" size=\"24\" />\n        </div>\n        \n        <div\n          class={this.mode !== \"editor\" ? 'hidden' : this.manager === 'participant' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('participant');\n            this.manager = 'participant';\n          }}\n          data-tooltip-title=\"Participants\"\n          data-tooltip=\"Manage Signers, Witnesses and Approvers\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"user-group\" size=\"24\" />\n        </div>\n\n        <div\n          class={this.mode !== \"compose\" ? 'hidden' : this.manager === 'recipient' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('recipient');\n            this.manager = 'recipient';\n          }}\n          data-tooltip-title=\"Recipients\"\n          data-tooltip=\"View the list of Recipients for this document\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"user-group\" size=\"24\" />\n        </div>\n\n        <div\n          class={this.mode !== \"preview\" ? 'hidden' : this.manager === 'validation' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('validation');\n            this.manager = 'validation';\n          }}\n          data-tooltip-title=\"Validation\"\n          data-tooltip=\"View the list of Recipients for this document\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"adjustments\" size=\"24\" />\n        </div>\n\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-feature-column.js","sourceRoot":"","sources":["../../../src/components/ls-feature-column/ls-feature-column.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, EventEmitter, Event, Element } from '@stencil/core';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-feature-column',\n  styleUrl: 'ls-feature-column.css',\n  shadow: true,\n})\nexport class LsFeatureColoumn {\n  @Element() component: HTMLElement;\n  /**\n   * Determines / sets which of the far left 'managers' is active.\n   * {'document' | 'toolbox' | 'participant' }\n   */\n  @Prop({ mutable: true }) manager: 'document' | 'toolbox' | 'participant'| 'recipient' | 'validation' = 'toolbox';\n\n\n  /**\n   * The mode that document viewer is being used in.\n   * {'preview' | 'editor' | 'custom'}\n   */\n  @Prop() mode: 'preview' | 'editor' | 'compose' = 'editor';\n\n  // Send an manager change up the DOM\n  @Event() manage: EventEmitter<'document' | 'toolbox' | 'participant' | 'recipient' | 'validation'>;\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.mode !== \"editor\" ? 'hidden' : this.manager === 'document' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('document');\n            this.manager = 'document';\n          }}\n          data-tooltip-title=\"Template Details\"\n          data-tooltip=\"View and edit Template properties\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"document\" size=\"1.5rem\" />\n        </div>\n        <div\n          class={this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('toolbox');\n            this.manager = 'toolbox';\n          }}\n          data-tooltip-title=\"Field Types\"\n          data-tooltip=\"Select and place Form Field Elements\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"typing-input\" size=\"1.5rem\" />\n        </div>\n        \n        <div\n          class={this.mode !== \"editor\" ? 'hidden' : this.manager === 'participant' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('participant');\n            this.manager = 'participant';\n          }}\n          data-tooltip-title=\"Participants\"\n          data-tooltip=\"Manage Signers, Witnesses and Approvers\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"user-group\" size=\"1.5rem\" />\n        </div>\n\n        <div\n          class={this.mode !== \"compose\" ? 'hidden' : this.manager === 'recipient' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('recipient');\n            this.manager = 'recipient';\n          }}\n          data-tooltip-title=\"Recipients\"\n          data-tooltip=\"View the list of Recipients for this document\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"user-group\" size=\"1.5rem\" />\n        </div>\n\n        <div\n          class={this.mode !== \"preview\" ? 'hidden' : this.manager === 'validation' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('validation');\n            this.manager = 'validation';\n          }}\n          data-tooltip-title=\"Validation\"\n          data-tooltip=\"View the list of Recipients for this document\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"adjustments\" size=\"1.5rem\" />\n        </div>\n\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -103,7 +103,7 @@ a:hover {
 
 select {
   appearance: none;
-  height: 36px;
+  height: 2.25rem;
 }
 
 .input-wrapper {

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

@@ -120,9 +120,9 @@ export class LsFieldAlignment {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: 'ff91106055b553840ec7cea1879831b4c67386ab' }, h("div", { key: '74d6d92db343203f303c0f15b2374e0a9c845b77', class: 'ls-field-properties-section' }, h("div", { key: 'bfd04b955977341041dcf7c843c6357c84161dc7', class: 'ls-field-properties-section-text' }, h("p", { key: 'c0f2cca8fedf5cfa7c834794f587c88c6a1aa960', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: 'e25aafb98356cb281c218c2d749b9965046cf079', 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: '423dd85ddf396fa13f222eeddf1df1180bd4bf51', class: 'multi-button-group-row' }, h("div", { key: '5e1adbaa0bc58934af572aef687fdd833f4738ec', class: 'button-group' }, h("button", { key: 'e4e6d565781f0455e26b10360fa7ac73aa205203', onClick: () => this.left(), "aria-label": "Align selected fields vertically about their left edge.", "data-tooltip": "Align Left" }, h("ls-icon", { key: '355a0590e97eecd9284d87ff06234a74d7af631d', name: "field-alignment-left" })), h("button", { key: 'c33adc4c659ce5d7580febfde642bcfd5941d51e', onClick: () => this.center(), "aria-label": "Align selected fields vertically about their centre.", "data-tooltip": "Align Center" }, h("ls-icon", { key: '1d809c339e1a3a3bccf5dce4b39e7f54727879fa', name: "field-alignment-centre" })), h("button", { key: 'd07eb6abeb1c6fd448baa766c44b4a67d6958169', onClick: () => {
+        return (h(Host, { key: '63398a2ccc1bc4cbd98d2858c2e2557cc7b37890' }, h("div", { key: '9e18ed6648be04c04c8d31a2141c282f95405e0b', class: 'ls-field-properties-section' }, h("div", { key: 'cdc65651627eab57be294950db80971aac9ab633', class: 'ls-field-properties-section-text' }, h("p", { key: 'ea997551b75b54f994a2b099369926183dfb164c', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: 'fef2f6130de37727e29ffbdd8e6c1d39347758ea', 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: '58f910381243daf9987373ca73cb850643457fae', class: 'multi-button-group-row' }, h("div", { key: 'a928ef05dc1a41bf172854be6de6e43d754ff215', class: 'button-group' }, h("button", { key: '0fd393359c52d53fc5acf0148cf45c35ff9a787f', onClick: () => this.left(), "aria-label": "Align selected fields vertically about their left edge.", "data-tooltip": "Align Left" }, h("ls-icon", { key: 'eb751025f62ce1482974e5244d36560ef6d652e2', name: "field-alignment-left" })), h("button", { key: '2ea4e049759d7bab322b09bf37006c9aca7d550a', onClick: () => this.center(), "aria-label": "Align selected fields vertically about their centre.", "data-tooltip": "Align Center" }, h("ls-icon", { key: '12e1e084e55992e5e8dcb3c616d354e813db4bc2', name: "field-alignment-centre" })), h("button", { key: '50820a4dbb9fe2ee520e6bfd18cd5c3c8798e485', onClick: () => {
                 this.right();
-            }, "aria-label": "Align selected fields vertically about their right edge.", "data-tooltip": "Align Right" }, h("ls-icon", { key: 'd9fcb4753b7528d334774badca2b3721aa618eb6', name: "field-alignment-right" }))), h("div", { key: '8bc6e5c74c3257b6cf0cf1972a9ac1575f81858c', class: 'button-group' }, h("button", { key: '4fa65b94f2337d08c2f38a46a525f96d30f02531', onClick: () => this.top(), "aria-label": "Align selected fields by their top.", "data-tooltip": "Align Top" }, h("ls-icon", { key: '8fbe38a0ea22e0ca50eb0625d66fafa73e0f8588', name: "field-alignment-top" })), h("button", { key: '15b2b3fbfdfa3998edb0fd3ddee0e0c45e5688b8', onClick: () => this.middle(), "aria-label": "Align selected fields by their middles.", "data-tooltip": "Align Middle" }, h("ls-icon", { key: 'e5a0c30844cd64171f67339fa6a981ff63aec1de', name: "field-alignment-middle" })), h("button", { key: 'a98cb23b87a3b55864b24f1451fdd57bbd2c4554', onClick: () => this.bottom(), "aria-label": "Align selected fields by their bottoms.", "data-tooltip": "Align Bottom" }, h("ls-icon", { key: 'd022dfe301b8e04cbb4f6dd3143e2db1cade82e5', name: "field-alignment-bottom" }))))), h("slot", { key: 'd88145120dd088adcd12b9e40d8c85c623447d99' }), h("ls-tooltip", { key: '46d836e0b43cd99f4784fc2eeec48f726916059a', id: "ls-tooltip-master" })));
+            }, "aria-label": "Align selected fields vertically about their right edge.", "data-tooltip": "Align Right" }, h("ls-icon", { key: '020ce69f599c1dd7ca53f00b48dd605c0c85da08', name: "field-alignment-right" }))), h("div", { key: '6b89b279eb02636d907dccc34c14a346850d774e', class: 'button-group' }, h("button", { key: '49a49d4ec2b27337b8e094926cdef9961c13d848', onClick: () => this.top(), "aria-label": "Align selected fields by their top.", "data-tooltip": "Align Top" }, h("ls-icon", { key: '1821a377171df23e2fa3d62204370023e03231eb', name: "field-alignment-top" })), h("button", { key: '03f2aac11c4c379782e3ec9b557ad9f76a8bb756', onClick: () => this.middle(), "aria-label": "Align selected fields by their middles.", "data-tooltip": "Align Middle" }, h("ls-icon", { key: 'df0d8013b46142216c431b5b13d3f329cf3f2bd2', name: "field-alignment-middle" })), h("button", { key: '122cdaa9caf98cc3d0bd06ed4cefb670c6095053', onClick: () => this.bottom(), "aria-label": "Align selected fields by their bottoms.", "data-tooltip": "Align Bottom" }, h("ls-icon", { key: 'a516854348931f5c64a52f3fc4ee9b902378c916', name: "field-alignment-bottom" }))))), h("slot", { key: 'a21b40bc260e0516f212908b6fdf37984f1e6303' }), h("ls-tooltip", { key: 'd2b66a3db33c6bb4b092a306326d9881c51eb05e', id: "ls-tooltip-master" })));
     }
     static get is() { return "ls-field-alignment"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,7 +37,7 @@ a:hover {
 
 select {
   appearance: none;
-  height: 36px;
+  height: 2.2rem;
   width: 100%;
 }
 .has-leading-icon {

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

@@ -28,9 +28,9 @@ export class LsFieldContent {
         return !typesWithValue.includes(this.dataItem?.elementType);
     }
     render() {
-        return (h(Host, { key: 'ea54ac72a01daec82ce341886b234c645aa60db1' }, h("ls-props-section", { key: '60df9d1bae753c9ab040e47c01d7ee8855610153', sectionTitle: "Field Type", sectionDescription: "The Field you currently have selected" }, h("ls-field-type-display", { key: 'ea9af34cb06da7ed83bb4739783e6302aa266b01', fieldType: this.dataItem?.elementType, assignee: this.dataItem?.signer })), h("ls-props-section", { key: 'eca42ca34e5a5e97cdea9de46bc70f41756a0aa6', sectionTitle: "Required Field", row: true }, h("ls-toggle", { key: 'cebf77f8c11e04b915cf2b5c7c150ed20bed1438', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: (ev) => this.alter({ optional: !ev.detail }) })), h("ls-props-section", { key: 'ec954a15b94a426b8c2ee4cc2f039e90b138404c', sectionTitle: "Field Label", sectionDescription: "Add a label to clarify the information required from the Recipient." }, h("input", { key: '903c214ba08295790ef1d215c6b0076de29f9e86', value: this.dataItem?.label, placeholder: "eg. Sign Here", onInput: (e) => this.alter({ label: e.target.value }) })), this.supportsValue() && (h("ls-props-section", { key: '8426bf506f0094574883c4fcfd2423fbbe6f99bb', sectionTitle: "Value", sectionDescription: "A prefilled value that can be altered by the signer." }, h("input", { key: '914992f012a9feace4e23083be3bbaa8512cd3bc', value: this.dataItem?.value, placeholder: "e.g. Gordon Smith", onInput: (e) => this.alter({ value: e.target.value }) }))), this.dataItem.validation === 20 && (h("ls-props-section", { key: 'dd69da6537735e5564162805a3b2f36787ea5323', sectionTitle: "Options", sectionDescription: "Define the options available in the dropdown. One option per line." }, h("textarea", { key: '05180642ab28a84e81614a142e68c36402bebc31', value: this.dataItem?.options, placeholder: "Option 1\nOption 2\nOption 3", onInput: (e) => this.alter({ options: e.target.value }) }))), this.showValidationTypes && (h("ls-props-section", { key: '4ba34bb716a3559c8731a067de1cecaefcc41740', sectionTitle: "Content Format", sectionDescription: "Select the specific format you want the Recipient to enter." }, h("ls-input-wrapper", { key: 'd9f2abcb55f28bee04e360cf90e3d1d0fd68990a', select: true }, h("select", { key: '89c33d60decbc4788a8c3ccdec1930513fa7dc6d', onChange: (ev) => this.alter({ validation: parseInt(ev.target.value) }) }, validationTypes
+        return (h(Host, { key: '734ec935c3012ca203927537a917e43bbf51bd29' }, h("ls-props-section", { key: '8e9b9f1cc340517f3b7f3255dc87e8801d73b5ec', sectionTitle: "Field Type", sectionDescription: "The Field you currently have selected" }, h("ls-field-type-display", { key: '9b01edd6f83f4a060d00bb780322ce138fb7dea4', fieldType: this.dataItem?.elementType, assignee: this.dataItem?.signer })), h("ls-props-section", { key: '3e3995526461f108576b7d22cbb1b2846d995e27', sectionTitle: "Required Field", row: true }, h("ls-toggle", { key: 'bec526155b82b50a64f9b1b5b74aadb7e3c6abad', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: (ev) => this.alter({ optional: !ev.detail }) })), h("ls-props-section", { key: '1575b64c8c8381205c13c3fe70a32b97699b595f', sectionTitle: "Field Label", sectionDescription: "Add a label to clarify the information required from the Recipient." }, h("input", { key: '320dd9b0427f7ca277134c1d0739a82a5e155f27', value: this.dataItem?.label, placeholder: "eg. Sign Here", onInput: (e) => this.alter({ label: e.target.value }) })), this.supportsValue() && (h("ls-props-section", { key: 'aa879cb5deca3ce965dc998116966ef77e118a89', sectionTitle: "Value", sectionDescription: "A prefilled value that can be altered by the signer." }, h("input", { key: 'd6c22af8098d61cc7af5e8abb9e23b9d046771d6', value: this.dataItem?.value, placeholder: "e.g. Gordon Smith", onInput: (e) => this.alter({ value: e.target.value }) }))), this.dataItem.validation === 20 && (h("ls-props-section", { key: '2ef0f7da035529ce618803d0c6b74b447b922555', sectionTitle: "Options", sectionDescription: "Define the options available in the dropdown. One option per line." }, h("textarea", { key: 'ce22a03c08f2d1f98feb0125912e053ef62c7226', value: this.dataItem?.options, placeholder: "Option 1\nOption 2\nOption 3", onInput: (e) => this.alter({ options: e.target.value }) }))), this.showValidationTypes && (h("ls-props-section", { key: '0f6e53e8261eb4c6b8db6fd5f828a42724f27ffd', sectionTitle: "Content Format", sectionDescription: "Select the specific format you want the Recipient to enter." }, h("ls-input-wrapper", { key: '3005c64a70fd13264666ad5e4e014000d820c630', select: true }, h("select", { key: 'f319bc0e3d1987ff3bebe363051c6756cb1b56cf', onChange: (ev) => this.alter({ validation: parseInt(ev.target.value) }) }, validationTypes
             .filter(type => type.formType === this.dataItem?.elementType)
-            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), h("slot", { key: 'a2dc5760ad030b2aee4254f9aba78e916d326ac5' })));
+            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), h("slot", { key: 'c8983032bdf7d1ec86416810de22445987bd75b5' })));
     }
     static get is() { return "ls-field-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -98,7 +98,7 @@ a:hover {
 
 select {
   appearance: none;
-  height: 36px;
+  height: 2.25rem;
 }
 
 .input-wrapper {

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

@@ -34,7 +34,7 @@ export class LsFieldDimensions {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: '33579f54ee4ea80fcfe74694597cbe046eeaa87f' }, this.isMultiple(this.dataItem) && (h("div", { key: '7a101d3396be251cd8749d353bc241f096aec914', class: 'ls-field-properties-section' }, h("div", { key: 'cac711c2d9b1d8f2374bfd32885a1dc7e3f9163b', class: 'ls-field-properties-section-text' }, h("p", { key: 'b816d4ac4e7cadfa65c0c804af4ada6076a31379', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: '96f0213da2d04c64fc0e3bf86acbcd6c3a36be1d', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: 'd4687b42e8088f2f1eb9677e75e272e1ad1ce959', class: 'input-row' }, h("div", { key: '720e0823fc8587086d1ac0f43d90d051d6caa8fe', class: 'input-wrapper', "data-tooltip": "Set field width in pixels" }, h("ls-icon", { key: '3d6e310b920031bfa8edb3c4adfac5d68697c8f4', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: 'c20b328c11c45d3edac7d4c65f5b5d015d20662d', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), h("div", { key: '95b69d2ee2729e64e6bb436683a6b7f680826f7c', class: 'input-wrapper', "data-tooltip": "Set field height in pixels" }, h("ls-icon", { key: 'f0ca45ce64c4d755ddc9520b266732cf83ab5895', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: 'd71eb9d329024ecfda33d7b8250be5d5e2aa560c', class: 'has-leading-icon', aria: "field-height", id: "field-height", onChange: e => this.alter({ height: e.target.value }) }))))), this.isSingle(this.dataItem) && (h("div", { key: 'b6302ab188570fd27fcda8792a79390c35952ca1', class: 'field-set' }, h("div", { key: '226bec5f9fe17232e426b90c38cfb58aabef8c69', class: 'ls-field-properties-section' }, h("div", { key: '51a67e29166ae49a39a0bc34cdbfe42ec19b33f8', class: 'ls-field-properties-section-text' }, h("p", { key: 'e8d050055f282e521e57126df0a5a4fe1572e06c', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: '5080e801f5b421179b0a921a32effe44250720fa', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: '5332e942f03a3e49b97de9ff8da730a4262464ef', class: 'input-row' }, h("div", { key: 'b71901cef0176c508f69f5d4ae243227382aaa1a', class: 'input-wrapper', "data-tooltip": "Set field width in pixels" }, h("ls-icon", { key: 'e3760f612e014a65ce1d77c071fe32d16e601e2f', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: 'daccd33e44b07f81e9803754cdb98255f5440299', type: "number", 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: '758fb5c95a621b6a00d56df0b9b19a10e8a11e4e', class: 'input-wrapper', "data-tooltip": "Set field height in pixels" }, h("ls-icon", { key: '1ddb453f3deeb8ad10f3515084270645a7cee4db', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: 'bdcc41257dfaabf722de6d659a161f663ebf5480', type: "number", 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: '4573550b0cf5e3d0177423d01f8e24ad9e9696cd', class: 'ls-field-properties-section' }, h("div", { key: 'b7aba2228f5680987444faef112357bb4429a9d2', class: 'ls-field-properties-section-text' }, h("p", { key: '2b02d3952d9fe4c32c749a27a10eb89e42bf0464', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: '410961d4d006fb6b129641f9ab38e0788d9f63a6', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: '9a12372bccf8aab4744744cd7d5d50f40ff596a3', class: 'button-group' }, h("button", { key: 'ee2fdd6a760117dfa4646d03050ea0f7fd48edfd', disabled: true, "data-tooltip": "Select multiple Fields to to access scale controls" }, h("ls-icon", { key: '86d5c41b3cf232946ff80ffa240d2098bfc5579e', name: "field-scale" })), h("button", { key: '30241bd561165cf02f2b6560738c55032489a9b1', disabled: true, "data-tooltip": "Select multiple Fields to to access match width controls" }, h("ls-icon", { key: '7416c03def8311f90dad7ef12bdb8bb253a1f0a3', name: "field-match-width" })), h("button", { key: 'ee0820d337d7f401d5cbecedc3e06ed5ba317f2a', disabled: true, "data-tooltip": "Select multiple Fields to to access match height controls" }, h("ls-icon", { key: '6d72b1d4cc65059b033bb268345024361d358df7', name: "field-match-height" })))))), h("ls-tooltip", { key: 'b20549bc97e99eb1cbcbffd10a20e85c3dc3cd4b', id: "ls-tooltip-master" })));
+        return (h(Host, { key: '703a903db877ebc294ac3e2b957a29e031ef1a89' }, this.isMultiple(this.dataItem) && (h("div", { key: '5003976f90bd1abf305e7fdf49f5bdb2c8ac1175', class: 'ls-field-properties-section' }, h("div", { key: 'c701aeff233fd6909fe092180bf4e178ef836596', class: 'ls-field-properties-section-text' }, h("p", { key: '24bed1a118880004098274aa6fe322e50ba6bcb4', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: '0004e228fccc0e8862de68b8a20c325c51783755', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: '54b5c2c34e71c2d89792563bb8a91ce91979425b', class: 'input-row' }, h("div", { key: '4ec93aba8780d313a231c3e373b72070d3cc8538', class: 'input-wrapper', "data-tooltip": "Set field width in pixels" }, h("ls-icon", { key: 'd1dc6e887a70faa598c69f49b79f82bd171c9e7b', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: 'f30017f0d1c416c0fb2dc7dd12637da92b25f299', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), h("div", { key: '45c33926a667cd78d421d74f9a352614f8d853cc', class: 'input-wrapper', "data-tooltip": "Set field height in pixels" }, h("ls-icon", { key: 'dc4ad448b52fd19ef42bd9f81edd597fba232914', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: 'b257839bf8395a4a7e4c46b4e8bda31f8a688088', class: 'has-leading-icon', aria: "field-height", id: "field-height", onChange: e => this.alter({ height: e.target.value }) }))))), this.isSingle(this.dataItem) && (h("div", { key: '880ee0a38cfa375a4bd8a0d8e6bd8651918be68e', class: 'field-set' }, h("div", { key: '661e3eadf9c75bc174a00fe463efaad733f19c17', class: 'ls-field-properties-section' }, h("div", { key: '69fa81433bf7d90d74b6d99afa6f96b6b4bb3b87', class: 'ls-field-properties-section-text' }, h("p", { key: '43aa0a76668e227c65e4ea36f7e9b5d04f68a46b', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: 'aae729ee5421bf2b487c98b36adbae66eb9df344', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: '65da437f5b256a12487ba35bcb9c39376139287b', class: 'input-row' }, h("div", { key: '780b5587d9d066b816540d3e5d494b0100068c07', class: 'input-wrapper', "data-tooltip": "Set field width in pixels" }, h("ls-icon", { key: '94a6fcfd4df9ec9f45bd0aaad7854061eb6362c1', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: '245e8b5c172c9e81996518cdb80ccc86461c485a', type: "number", 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: 'cb4e9a06b6eae5992c4a3d5ca69fa23d405c1c1b', class: 'input-wrapper', "data-tooltip": "Set field height in pixels" }, h("ls-icon", { key: '6122800c5cf670479ea0befb9a07454595ac5912', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: 'fa15e1f81dc05f2234bac95a25cb609160aa5403', type: "number", 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: '49a7ffea99dea746084b94414d9b3251de398a9e', class: 'ls-field-properties-section' }, h("div", { key: 'c78c62f08d282a3a529ba8338a42bbb444917783', class: 'ls-field-properties-section-text' }, h("p", { key: 'd18f1fe5a21bdd20a5e892cbe588eb297231b649', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: 'af6e63b9235f1e59ade06038f09db0390893673d', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: '87123ee7df1fa48be4c2674baa40373f603cf634', class: 'button-group' }, h("button", { key: '5d03b2ad33e65d8fc51a18db6f25d90d907a0b00', disabled: true, "data-tooltip": "Select multiple Fields to to access scale controls" }, h("ls-icon", { key: '400caf2fc05248f2cde1a2175352ffc7a8d7c7b6', name: "field-scale" })), h("button", { key: 'ea84ecc2b43b2ebd1fbd1191ac785c5e8b3692a6', disabled: true, "data-tooltip": "Select multiple Fields to to access match width controls" }, h("ls-icon", { key: 'bf78211f51a4319e441cf956bf58344ecdaa66c6', name: "field-match-width" })), h("button", { key: 'a29160eb0320e88fdfd02f3a8502f82ee59ffd26', disabled: true, "data-tooltip": "Select multiple Fields to to access match height controls" }, h("ls-icon", { key: '8a1001f7d8a2f44d111447e222ba25c8cbe0085c', name: "field-match-height" })))))), h("ls-tooltip", { key: '2ff0d8ba9ce5ef8f6932a5062a88cd243485b71c', id: "ls-tooltip-master" })));
     }
     static get is() { return "ls-field-dimensions"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,8 +7,8 @@
 }
 
 .ls-toolbar-numeric {
-  width: 45px;
-  max-height: 18px;
+  width: 2.813rem;
+  max-height: 1.125rem;
   margin: 0px;
   padding: 0px;
 }

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

@@ -139,15 +139,15 @@ export class LsFieldDistribute {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: '59048599a1e37b88e7badb22082e6e6081a8b111' }, h("div", { key: 'c4031a27356d60ce690bea54743898deea973bb8', class: 'ls-field-properties-section' }, h("div", { key: 'f85a158b0b80b2606daac10a10da18f5ea67c3bf', class: 'ls-field-properties-section-text' }, h("p", { key: '1222eb8d6d940d3bec5927ad7ad969a390dde235', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: 'f8ad9958b46185515711d032e2acd7e9903e0b54', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '8d2d50a1e516ac954017ea13a630a11e3e676df5', class: 'button-group' }, h("button", { key: '382a8695ddb78b177d10389f4d096892eb24d2e2', onClick: () => {
+        return (h(Host, { key: 'e609fa9e40889179615dd0994c6b60633a650e08' }, h("div", { key: '9bd095b900e305b7622f0973fdbfce980343970b', class: 'ls-field-properties-section' }, h("div", { key: '216b665c83f42a879b8dd2d0533080811e7feee2', class: 'ls-field-properties-section-text' }, h("p", { key: 'bf614585ce212feea625cfe2afe271e3dfb3dd61', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: 'a96e61b2016feb32ee68720bdd4da5e2b6b44c94', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: 'b717e2acebf9794fdf294bbaab1d47bff20523ee', class: 'button-group' }, h("button", { key: 'c51308c1daf5793770cead8f2f9997406b3d5a43', onClick: () => {
                 this.distributeVertical();
-            }, "aria-label": "Distribute selected fields vertically.", "data-tooltip": "Distribute selected fields vertically" }, h("ls-icon", { key: '7ddc6ac479e424277332f90b384870628b90158a', name: "field-distribute-vertically" })), h("button", { key: '8ab9a9a772ca63f73d28407d2ef35ca1d4e86b3c', onClick: () => {
+            }, "aria-label": "Distribute selected fields vertically.", "data-tooltip": "Distribute selected fields vertically" }, h("ls-icon", { key: '0a6852f37bdacd568ff4b9595d55fa8ce6a0f820', name: "field-distribute-vertically" })), h("button", { key: '2587d0c9e87765c4aef7a1d94f4003729eac7d9c', onClick: () => {
                 this.distributeHorizontal();
-            }, "aria-label": "Distribute selected fields horizontally.", "data-tooltip": "Distribute selected fields horizontally" }, h("ls-icon", { key: '4f91aecee5ec3230176e61b791771f4fa4b8524a', name: "field-distribute-horizontally" })))), h("div", { key: '2ad325847587990f8280456373cd94bfa0bf4890', class: 'ls-field-properties-section' }, h("div", { key: '59fcde4b64e86eeeece1f9a2e69a360d3762e23f', class: 'ls-field-properties-section-text' }, h("p", { key: '5ab744d8783ba4eaf86aee1575341325dea435ce', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: '58cc8ce5cb15a81383d37c78914927dea4982c42', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '16f31fdfdbf4fd051d776da9196e613ec343f9fb', class: 'input-row' }, h("div", { key: 'd08f3225de705e36f3aec87405ac7de020b138a0', class: 'input-wrapper', "data-tooltip": "Set vertical gap between selected fields" }, h("ls-icon", { key: '860b1bda1c40824cb8b5fec757f626677760e5c0', id: "selectLeadingIcon", name: "field-distribute-vertically" }), h("input", { key: '94b41cb6ca0c4c9312a206f94c81039d361079e8', type: "number", class: 'has-leading-icon', id: "ls-fix-vertical-space", onChange: e => {
+            }, "aria-label": "Distribute selected fields horizontally.", "data-tooltip": "Distribute selected fields horizontally" }, h("ls-icon", { key: '97fdb980861622cdde04e34b632c69e7b6d701d1', name: "field-distribute-horizontally" })))), h("div", { key: '9242167e2f2770f72d931aa9bd1befdba1154d0a', class: 'ls-field-properties-section' }, h("div", { key: 'c19451338fdbc1691f8999462bcb68494d282f0b', class: 'ls-field-properties-section-text' }, h("p", { key: 'c3c492e747cb79ce80abc29edca0b2d9f6416870', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: '4c36b3a346d322d52713b2bd576cd653f5eb535a', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '8c161810aaf366e8e34080a8214d0851edf4e042', class: 'input-row' }, h("div", { key: '199f11fa50657c258b62e285f59a861381f0140c', class: 'input-wrapper', "data-tooltip": "Set vertical gap between selected fields" }, h("ls-icon", { key: '684ff4ae3e551819f1e0fbbd38dcff5c4ada7bf9', id: "selectLeadingIcon", name: "field-distribute-vertically" }), h("input", { key: 'a8e007de6b1d39aab12ed5d00e3547914b276e6e', type: "number", class: 'has-leading-icon', id: "ls-fix-vertical-space", onChange: e => {
                 this.gapVertical(parseInt(e.target.value));
-            }, value: '', size: 4, min: 0, max: 9999 })), h("div", { key: 'e5ad73ae44a263aacebf207ad2d84401b0c9b4a3', class: 'input-wrapper', "data-tooltip": "Set horizontal gap between selected fields" }, h("ls-icon", { key: '4a716b0aa37048e1086f52242da95dd33499ae8c', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), h("input", { key: '3ce5e41259cbfc38fcf528e324a8771630d92a9d', type: "number", class: 'has-leading-icon', id: "ls-fix-horizontal-space", onChange: e => {
+            }, value: '', size: 4, min: 0, max: 9999 })), h("div", { key: '4c1a5f93be77a515548a7b188754fa8d7fce6c7b', class: 'input-wrapper', "data-tooltip": "Set horizontal gap between selected fields" }, h("ls-icon", { key: 'd5f9b3f19a80310ded792b9298e556dfc126d526', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), h("input", { key: 'd38b4475ef2252ee154afdbffdb7cfdc21b98bd5', type: "number", class: 'has-leading-icon', id: "ls-fix-horizontal-space", onChange: e => {
                 this.gapHorizontal(parseInt(e.target.value));
-            }, value: '', size: 4, min: 0, max: 9999 })))), h("ls-tooltip", { key: '31b08e72a9d47b65ba78fa9b631e154342956f3c', id: "ls-tooltip-master" }), h("slot", { key: '7e5507606832d343a15f11d8a7cc5ebcce0aff7f' })));
+            }, value: '', size: 4, min: 0, max: 9999 })))), h("ls-tooltip", { key: '517251c8fe81db16a4b65aa9129e6f7b9715e6e6', id: "ls-tooltip-master" }), h("slot", { key: '377fb518aba986f087af436e64fb4c9eb76cb4fe' })));
     }
     static get is() { return "ls-field-distribute"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,7 @@ export class LsFieldFooter {
         // this.selectFields.emit([newItem]);
     };
     render() {
-        return (h(Host, { key: 'da4f1c828b80134ae2403ca2be1aa2ee84a76e9d' }, h("div", { key: '32894e6120275c76f38e9d6cd6b359e0dfef6ebf', class: 'button-footer' }, h("button", { key: 'a63924c5a7911db1d5427d7a9b2fd4df66f96dd8', class: 'secondary', onClick: () => this.duplicateField() }, h("ls-icon", { key: '8007f022d9c3109d58b5b4acdf1badeb5d84c42c', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: 'c32a9e070f4e7109a8a57322aa42435c07a25cf7', class: 'destructive', onClick: () => this.deleteField() }, h("ls-icon", { key: '1de10eabdd1b3d902f890121c0ee44c79e07eb39', name: "trash", size: "20" }), "Delete")), h("slot", { key: 'b0e99a1fc8aa193e3104c4fe64a421c541451114' })));
+        return (h(Host, { key: 'ad5bcbff8ba0e0e8c485029195401793a3d44947' }, h("div", { key: '5122544f2c7bcd02af2acbff8da7dd466e74d813', class: 'button-footer' }, h("button", { key: '7f82dfccee2e4d673305f5863534b80a1ad4e358', class: 'secondary', onClick: () => this.duplicateField() }, h("ls-icon", { key: 'b30334400042a8fc7881d2a05ced2f397cd61a4e', name: "field-duplicate", size: "1.25rem" }), "Duplicate"), h("button", { key: '43be4c1016e2f7e50ceb40546e92933099be5400', class: 'destructive', onClick: () => this.deleteField() }, h("ls-icon", { key: 'dbbc47115c04eb8f29dcb10a60178d55c256242c', name: "trash", size: "1.25rem", color: 'var(--red-60)' }), "Delete")), h("slot", { key: 'da837305b7587c89e70abbb31563b1a5c161086e' })));
     }
     static get is() { return "ls-field-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"ls-field-footer.js","sourceRoot":"","sources":["../../../src/components/ls-field-footer/ls-field-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,aAAa;IACxB;;;OAGG;IAIH,QAAQ,CAAe;IAMvB,MAAM,CAAgC;IAOtC,MAAM,CAAgC;IAOtC,YAAY,CAA+B;IAE3C,WAAW,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;QAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IAChE,CAAC,CAAA;IAED,cAAc,GAAG,GAAG,EAAE;QACpB,MAAM,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC;QAC5E,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;QACxD,IAAG,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;YACvE,OAAO,CAAC,GAAG,GAAG,MAAM,CAAC;QACvB,CAAC;QACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QACzE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QACxD,qCAAqC;IACvC,CAAC,CAAA;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,eAAe;gBACzB,+DAAQ,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;oBAC9D,gEAAS,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,IAAI,GAAG;gCAErC;gBACT,+DAAQ,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;oBAC7D,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, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-footer',\n  styleUrl: 'ls-field-footer.css',\n  shadow: true,\n})\nexport class LsFieldFooter {\n  /**\n   * The selected items information (as JSON).\n   * {LSApiElement[]}\n   */\n  @Prop({\n    mutable: true,\n  })\n  dataItem: LSApiElement;\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   @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  selectFields: EventEmitter<LSApiElement[]>;\n\n  deleteField = () => {\n    this.update.emit([{ action: 'delete', data: this.dataItem }]);\n    this.mutate.emit([{ action: 'delete', data: this.dataItem }]);\n  }\n\n  duplicateField = () => {\n    const newItem = { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) };\n    const newTop = this.dataItem.top + this.dataItem.height;\n    if(newTop + this.dataItem.height < this.dataItem.pageDimensions.height) {\n      newItem.top = newTop;\n    }\n    this.update.emit([{ action: 'create', data: newItem, select: 'clear' }]);\n    this.mutate.emit([{ action: 'create', data: newItem }]);\n    // this.selectFields.emit([newItem]);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'button-footer'}>\n          <button class={'secondary'} onClick={() => this.duplicateField()}>\n            <ls-icon name=\"field-duplicate\" size=\"20\" />\n            Duplicate\n          </button>\n          <button class={'destructive'} onClick={() => this.deleteField()}>\n            <ls-icon name=\"trash\" size=\"20\" />\n            Delete\n          </button>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-field-footer.js","sourceRoot":"","sources":["../../../src/components/ls-field-footer/ls-field-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,aAAa;IACxB;;;OAGG;IAIH,QAAQ,CAAe;IAMvB,MAAM,CAAgC;IAOtC,MAAM,CAAgC;IAOtC,YAAY,CAA+B;IAE3C,WAAW,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;QAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IAChE,CAAC,CAAA;IAED,cAAc,GAAG,GAAG,EAAE;QACpB,MAAM,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC;QAC5E,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;QACxD,IAAG,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;YACvE,OAAO,CAAC,GAAG,GAAG,MAAM,CAAC;QACvB,CAAC;QACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QACzE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QACxD,qCAAqC;IACvC,CAAC,CAAA;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,eAAe;gBACzB,+DAAQ,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;oBAC9D,gEAAS,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,SAAS,GAAG;gCAE1C;gBACT,+DAAQ,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;oBAC7D,gEAAS,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,eAAe,GAAG;6BAEtD,CACL;YACN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-footer',\n  styleUrl: 'ls-field-footer.css',\n  shadow: true,\n})\nexport class LsFieldFooter {\n  /**\n   * The selected items information (as JSON).\n   * {LSApiElement[]}\n   */\n  @Prop({\n    mutable: true,\n  })\n  dataItem: LSApiElement;\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   @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  selectFields: EventEmitter<LSApiElement[]>;\n\n  deleteField = () => {\n    this.update.emit([{ action: 'delete', data: this.dataItem }]);\n    this.mutate.emit([{ action: 'delete', data: this.dataItem }]);\n  }\n\n  duplicateField = () => {\n    const newItem = { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) };\n    const newTop = this.dataItem.top + this.dataItem.height;\n    if(newTop + this.dataItem.height < this.dataItem.pageDimensions.height) {\n      newItem.top = newTop;\n    }\n    this.update.emit([{ action: 'create', data: newItem, select: 'clear' }]);\n    this.mutate.emit([{ action: 'create', data: newItem }]);\n    // this.selectFields.emit([newItem]);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'button-footer'}>\n          <button class={'secondary'} onClick={() => this.duplicateField()}>\n            <ls-icon name=\"field-duplicate\" size=\"1.25rem\" />\n            Duplicate\n          </button>\n          <button class={'destructive'} onClick={() => this.deleteField()}>\n            <ls-icon name=\"trash\" size=\"1.25rem\" color='var(--red-60)' />\n            Delete\n          </button>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -41,7 +41,7 @@ a:hover {
 
 select {
   appearance: none;
-  height: 36px;
+  height: 2.25rem;
 }
 
 .input-wrapper {