npm - legalesign-document-viewer - Versions diffs - 0.4.10 → 0.5.0 - Mend

legalesign-document-viewer 0.4.10 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (160) hide show

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

@@ -131,7 +131,6 @@ export class LsEditorField {
         this.labeltimer = setTimeout(() => {
             const diffs = [{ action: 'update', data }];
             this.mutate.emit(diffs);
-            this.update.emit(diffs);
         }, delay);
     }
     hexToRgba(hex, alpha) {
@@ -146,10 +145,10 @@ export class LsEditorField {
             ? { 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;
-        return (h(Host, { key: 'ee8bc802908d06d9cce6a1408353cade70328bde', id: this.dataItem ? 'ls-field-' + this.dataItem.id : undefined, style: hostStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '9b41c4cf8e31bc92eaa49b41abc890b355ae1031', class: {
+        return (h(Host, { key: '89a2f93e5353a2660bb262af4830b6911bd7ee64', id: this.dataItem ? 'ls-field-' + this.dataItem.id : undefined, style: hostStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '95decbf8fee094a5ac8e7f3e7314374b659b6579', class: {
                 'ls-editor-field': true,
                 'is-selected': this.selected,
-            } }, !this.dataItem?.optional && h("ls-icon", { key: 'a5b4e075c4f8c6f41db3246590d33dbb69e1213a', 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: '5e897ffb87aaf66f83f52a79f3bb1f8c97aff93d', 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: 'c66811189cbf828b1112631691fe9d807a981d8f', 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: '2d16a53bdd4ec75fa653964c7ccbd522b1ac0ac0', style: {
+            } }, !this.dataItem?.optional && h("ls-icon", { key: '14b5c38881517f955428bf35d31f4282aae1e286', 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: '404b2803acd1c74cfd8a8853623dad2c3ca74b20', 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: 'bb8c8de6ac5c3bce79b6bbf7df9a86da5084c572', 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: '21ebed73fd616a3655d55c10e3625592bdc6de64', style: {
                 position: 'absolute',
                 background: `${defaultRolePalette[this.dataItem?.signer % 100].s20}`,
                 color: `${defaultRolePalette[this.dataItem?.signer % 100].s80}`,
@@ -160,7 +159,7 @@ export class LsEditorField {
                 left: `-${2 * zoomValue}px`,
                 whiteSpace: 'nowrap',
                 width: 'fit-content',
-            } }, this.dataItem?.label)), (this.floatingActive || this.selected) && (h("p", { key: '0a0185ed50071d53c4e084e31cc9583ae0e0874e', style: {
+            } }, this.dataItem?.label)), (this.floatingActive || this.selected) && (h("p", { key: 'e14e6cce83af912df7de7464dca48f8a55c2867f', style: {
                 position: 'absolute',
                 color: 'var(--gray-80, #3a3a3a)',
                 bottom: `-${1.75 * zoomValue}rem`,
@@ -168,9 +167,9 @@ export class LsEditorField {
                 left: '0',
                 whiteSpace: 'nowrap',
                 width: 'fit-content',
-            } }, "Assigned to: ", this.assignee)), this.floatingActive && (h("button", { key: '49944bf86dd0f00136c7752c3344d80afe4bffc1', class: 'x-button', style: {
+            } }, "Assigned to: ", this.assignee)), this.floatingActive && (h("button", { key: '5e4ed8ed5bd08c555f203708544d24ac6a847f2d', class: 'x-button', style: {
                 padding: `${0.125 * zoomValue}rem`,
-            }, onClick: () => this.deleteField() }, h("ls-icon", { key: '9901ddb43f944d30659608c7e7e2c8fdae307a4d', name: "x", size: `${0.625 * zoomValue}rem` }))))));
+            }, onClick: () => this.deleteField() }, h("ls-icon", { key: 'c63cbfd8a4c71b8dfc6693a5bdd339e37414774a', name: "x", size: `${0.625 * zoomValue}rem` }))))));
     }
     static get is() { return "ls-editor-field"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +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() 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 e.stopPropagation();\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(e: MouseEvent) {\n if (this.readonly \|\| this.dataItem.formElementType === 'signature' \|\| this.dataItem.formElementType === 'initials') 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 e.preventDefault();\n e.stopPropagation();\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\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"]}
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() 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 e.stopPropagation();\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(e: MouseEvent) {\n if (this.readonly \|\| this.dataItem.formElementType === 'signature' \|\| this.dataItem.formElementType === 'initials') 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 e.preventDefault();\n e.stopPropagation();\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 }, 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\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-field-alignment/ls-field-alignment.js CHANGED Viewed

@@ -14,7 +14,6 @@ export class LsFieldAlignment {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     right() {
         const rightmost = this.dataItem.reduce((rightmost, current) => {
@@ -35,7 +34,6 @@ export class LsFieldAlignment {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     center() {
         const addcentres = this.dataItem.reduce((total, current) => {
@@ -60,7 +58,6 @@ export class LsFieldAlignment {
         console.log(diffs);
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     top() {
         const topmost = this.dataItem.reduce((most, current) => {
@@ -94,7 +91,6 @@ export class LsFieldAlignment {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     bottom() {
         const lowest = this.dataItem.reduce((acc, current) => {
@@ -114,15 +110,14 @@ export class LsFieldAlignment {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     componentDidLoad() {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        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: () => {
+        return (h(Host, { key: '400db25c25a36e1c2556bb4ec06724864b9bf83d' }, h("div", { key: '47e10979f5e40df74c8ee295f2e0f3c24f026215', class: 'ls-field-properties-section' }, h("div", { key: '9c101afb5812f8958f420f9e3f2b180085156f0c', class: 'ls-field-properties-section-text' }, h("p", { key: 'd2f6af742ae404699954d0a038e98553ca6de830', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: '1ad0db4521681851ad7d2ea04b54714033f8983e', 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: 'c8aa1676673aa7dd6272fe215c2b932c3cf7b31e', class: 'multi-button-group-row' }, h("div", { key: '0fdba69a2964a55718efd5d7c0c8084fbb3f3c5b', class: 'button-group' }, h("button", { key: 'bce8132bc2b3d2c932312b5f5ce7202936ba0372', onClick: () => this.left(), "aria-label": "Align selected fields vertically about their left edge.", "data-tooltip": "Align Left" }, h("ls-icon", { key: '4ecde43b70300205a93860415001744d24e9e31f', name: "field-alignment-left" })), h("button", { key: 'd7b62d1433ab7d98573774b2e8ba11dfc933f09e', onClick: () => this.center(), "aria-label": "Align selected fields vertically about their centre.", "data-tooltip": "Align Center" }, h("ls-icon", { key: '88af50eb18c0e5c9759c38785374a080e0c68889', name: "field-alignment-centre" })), h("button", { key: 'f6567ecc6bcf13c853a92985a6c8892fbf9e2360', onClick: () => {
                 this.right();
-            }, "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" })));
+            }, "aria-label": "Align selected fields vertically about their right edge.", "data-tooltip": "Align Right" }, h("ls-icon", { key: 'b4a316f3b22d598206e53b0aadc152af935a6c92', name: "field-alignment-right" }))), h("div", { key: 'ee1b1aaa94d60b6f8599c48cd41485699eaf8ec1', class: 'button-group' }, h("button", { key: '0533eb85453764ca44a586c7d189d09b9222fd03', onClick: () => this.top(), "aria-label": "Align selected fields by their top.", "data-tooltip": "Align Top" }, h("ls-icon", { key: '6baca0ef2df8e60749ca46f26fa614675aaabdaa', name: "field-alignment-top" })), h("button", { key: '1e2ef35fbe0f0b520091e40c3120ea6112f9b8b7', onClick: () => this.middle(), "aria-label": "Align selected fields by their middles.", "data-tooltip": "Align Middle" }, h("ls-icon", { key: 'b91876a9aec1e5c3f528ee679ac468298e8922f4', name: "field-alignment-middle" })), h("button", { key: 'ef6d7f773708d14ba4621ca900204dda6b5fb016', onClick: () => this.bottom(), "aria-label": "Align selected fields by their bottoms.", "data-tooltip": "Align Bottom" }, h("ls-icon", { key: 'b35d93c535bb179901af3c0a1fbb25a69bde5579', name: "field-alignment-bottom" }))))), h("slot", { key: 'be48e72ff93e6490eae685759d20d21cc0944745' }), h("ls-tooltip", { key: '8fe30e3b47397e4d9bdab32cce7629450bf4123e', id: "ls-tooltip-master" })));
     }
     static get is() { return "ls-field-alignment"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-field-alignment/ls-field-alignment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ls-field-alignment.js","sourceRoot":"","sources":["../../../src/components/ls-field-alignment/ls-field-alignment.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n tag: 'ls-field-alignment',\n styleUrl: 'ls-field-alignment.css',\n shadow: true,\n})\nexport class LsFieldAlignment {\n @Element() component: HTMLElement;\n @Prop({ mutable: true }) 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 // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n right() {\n const rightmost = this.dataItem.reduce((rightmost, current) => {\n return current.left + current.width < rightmost ? rightmost : current.left + current.width;\n }, 0);\n\n console.log(rightmost);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n const newLeft = rightmost - c.width;\n\n return {\n action: 'update',\n data: {\n ...c,\n left: newLeft,\n ax: newLeft,\n bx: newLeft + c.width,\n } as LSApiElement,\n };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n center() {\n const addcentres = this.dataItem.reduce((total, current) => {\n console.log(total + (current.left + current.width / 2));\n return total + (current.left + current.width / 2);\n }, 0);\n console.log(addcentres);\n\n const cp = addcentres / this.dataItem.length;\n console.log('centerposition', cp);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n const newLeft = c.left + (cp - (c.left + c.width / 2));\n return {\n action: 'update',\n data: {\n ...c,\n left: newLeft,\n ax: newLeft,\n bx: newLeft + c.width,\n } as LSApiElement,\n };\n });\n console.log(diffs);\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n top() {\n const topmost = this.dataItem.reduce((most, current) => {\n return current.top < most ? most : current.top;\n }, 0);\n\n this.alter({ top: topmost });\n }\n\n left() {\n const leftmost = this.dataItem.reduce((least, current) => {\n return current.left < least ? current.left : least;\n }, this.dataItem[0].left);\n\n this.alter({ left: leftmost });\n }\n\n middle() {\n const addmiddles = this.dataItem.reduce((total, current) => {\n console.log(total + (current.top + current.height / 2));\n return total + (current.top + current.height / 2);\n }, 0);\n\n const cp = addmiddles / this.dataItem.length;\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n const newTop = c.top + (cp - (c.top + c.height / 2));\n return {\n action: 'update',\n data: {\n ...c,\n top: newTop,\n ay: newTop,\n by: newTop + c.height,\n } as LSApiElement,\n };\n });\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n bottom() {\n const lowest = this.dataItem.reduce((acc, current) => {\n return acc > current.top + current.height ? acc : current.top + current.height;\n }, 0);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n const newTop = lowest - c.height;\n return {\n action: 'update',\n data: {\n ...c,\n top: newTop,\n ay: newTop,\n by: newTop + c.height,\n } as LSApiElement,\n };\n });\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n componentDidLoad() {\n attachAllTooltips(this.component.shadowRoot);\n }\n\n render() {\n return (\n <Host>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Alignment</p>\n <p class={'ls-field-properties-section-description'}>Align your Fields relative to the page or multi-select and align then to each other.</p>\n </div>\n <div class={'multi-button-group-row'}>\n <div class={'button-group'}>\n <button onClick={() => this.left()} aria-label=\"Align selected fields vertically about their left edge.\" data-tooltip=\"Align Left\">\n <ls-icon name=\"field-alignment-left\"></ls-icon>\n </button>\n <button onClick={() => this.center()} aria-label=\"Align selected fields vertically about their centre.\" data-tooltip=\"Align Center\">\n <ls-icon name=\"field-alignment-centre\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.right();\n }}\n aria-label=\"Align selected fields vertically about their right edge.\"\n data-tooltip=\"Align Right\"\n >\n <ls-icon name=\"field-alignment-right\"></ls-icon>\n </button>\n </div>\n <div class={'button-group'}>\n <button onClick={() => this.top()} aria-label=\"Align selected fields by their top.\" data-tooltip=\"Align Top\">\n <ls-icon name=\"field-alignment-top\"></ls-icon>\n </button>\n <button onClick={() => this.middle()} aria-label=\"Align selected fields by their middles.\" data-tooltip=\"Align Middle\">\n <ls-icon name=\"field-alignment-middle\"></ls-icon>\n </button>\n <button onClick={() => this.bottom()} aria-label=\"Align selected fields by their bottoms.\" data-tooltip=\"Align Bottom\">\n <ls-icon name=\"field-alignment-bottom\"></ls-icon>\n </button>\n </div>\n </div>\n </div>\n\n <slot></slot>\n <ls-tooltip id=\"ls-tooltip-master\" />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ls-field-alignment.js","sourceRoot":"","sources":["../../../src/components/ls-field-alignment/ls-field-alignment.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n tag: 'ls-field-alignment',\n styleUrl: 'ls-field-alignment.css',\n shadow: true,\n})\nexport class LsFieldAlignment {\n @Element() component: HTMLElement;\n @Prop({ mutable: true }) 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 // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n }\n\n right() {\n const rightmost = this.dataItem.reduce((rightmost, current) => {\n return current.left + current.width < rightmost ? rightmost : current.left + current.width;\n }, 0);\n\n console.log(rightmost);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n const newLeft = rightmost - c.width;\n\n return {\n action: 'update',\n data: {\n ...c,\n left: newLeft,\n ax: newLeft,\n bx: newLeft + c.width,\n } as LSApiElement,\n };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n }\n\n center() {\n const addcentres = this.dataItem.reduce((total, current) => {\n console.log(total + (current.left + current.width / 2));\n return total + (current.left + current.width / 2);\n }, 0);\n console.log(addcentres);\n\n const cp = addcentres / this.dataItem.length;\n console.log('centerposition', cp);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n const newLeft = c.left + (cp - (c.left + c.width / 2));\n return {\n action: 'update',\n data: {\n ...c,\n left: newLeft,\n ax: newLeft,\n bx: newLeft + c.width,\n } as LSApiElement,\n };\n });\n console.log(diffs);\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n }\n\n top() {\n const topmost = this.dataItem.reduce((most, current) => {\n return current.top < most ? most : current.top;\n }, 0);\n\n this.alter({ top: topmost });\n }\n\n left() {\n const leftmost = this.dataItem.reduce((least, current) => {\n return current.left < least ? current.left : least;\n }, this.dataItem[0].left);\n\n this.alter({ left: leftmost });\n }\n\n middle() {\n const addmiddles = this.dataItem.reduce((total, current) => {\n console.log(total + (current.top + current.height / 2));\n return total + (current.top + current.height / 2);\n }, 0);\n\n const cp = addmiddles / this.dataItem.length;\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n const newTop = c.top + (cp - (c.top + c.height / 2));\n return {\n action: 'update',\n data: {\n ...c,\n top: newTop,\n ay: newTop,\n by: newTop + c.height,\n } as LSApiElement,\n };\n });\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n }\n\n bottom() {\n const lowest = this.dataItem.reduce((acc, current) => {\n return acc > current.top + current.height ? acc : current.top + current.height;\n }, 0);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n const newTop = lowest - c.height;\n return {\n action: 'update',\n data: {\n ...c,\n top: newTop,\n ay: newTop,\n by: newTop + c.height,\n } as LSApiElement,\n };\n });\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n }\n\n componentDidLoad() {\n attachAllTooltips(this.component.shadowRoot);\n }\n\n render() {\n return (\n <Host>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Alignment</p>\n <p class={'ls-field-properties-section-description'}>Align your Fields relative to the page or multi-select and align then to each other.</p>\n </div>\n <div class={'multi-button-group-row'}>\n <div class={'button-group'}>\n <button onClick={() => this.left()} aria-label=\"Align selected fields vertically about their left edge.\" data-tooltip=\"Align Left\">\n <ls-icon name=\"field-alignment-left\"></ls-icon>\n </button>\n <button onClick={() => this.center()} aria-label=\"Align selected fields vertically about their centre.\" data-tooltip=\"Align Center\">\n <ls-icon name=\"field-alignment-centre\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.right();\n }}\n aria-label=\"Align selected fields vertically about their right edge.\"\n data-tooltip=\"Align Right\"\n >\n <ls-icon name=\"field-alignment-right\"></ls-icon>\n </button>\n </div>\n <div class={'button-group'}>\n <button onClick={() => this.top()} aria-label=\"Align selected fields by their top.\" data-tooltip=\"Align Top\">\n <ls-icon name=\"field-alignment-top\"></ls-icon>\n </button>\n <button onClick={() => this.middle()} aria-label=\"Align selected fields by their middles.\" data-tooltip=\"Align Middle\">\n <ls-icon name=\"field-alignment-middle\"></ls-icon>\n </button>\n <button onClick={() => this.bottom()} aria-label=\"Align selected fields by their bottoms.\" data-tooltip=\"Align Bottom\">\n <ls-icon name=\"field-alignment-bottom\"></ls-icon>\n </button>\n </div>\n </div>\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-content/ls-field-content.js CHANGED Viewed

@@ -20,7 +20,6 @@ export class LsFieldContent {
         this.labeltimer = setTimeout(() => {
             const diffs = [{ action: 'update', data }];
             this.mutate.emit(diffs);
-            this.update.emit(diffs);
         }, delay);
     }
     supportsValue() {
@@ -28,9 +27,9 @@ export class LsFieldContent {
         return !typesWithValue.includes(this.dataItem?.elementType);
     }
     render() {
-        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
+        return (h(Host, { key: '3aa145da2c93db6900ba96388d86c72472686aa3' }, h("ls-props-section", { key: '4d08885c91a113e3c58b79046abc18e0b57ac1e4', sectionTitle: "Field Type", sectionDescription: "The Field you currently have selected" }, h("ls-field-type-display", { key: '166c7438df51abd4ee13952444a9e0996dd3d1ac', fieldType: this.dataItem?.elementType, assignee: this.dataItem?.signer })), h("ls-props-section", { key: '7a8f379af5a5bcfd3317dcd143129e493e963b08', sectionTitle: "Required Field", row: true }, h("ls-toggle", { key: '48ff9c0929d5cc38303b33423c8af14ef41d402a', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: (ev) => this.alter({ optional: !ev.detail }) })), h("ls-props-section", { key: '589a7bf1ff07a9c0cccfc347d0d8e2ccd4292629', sectionTitle: "Field Label", sectionDescription: "Add a label to clarify the information required from the Recipient." }, h("input", { key: 'bfd8071a1f1f54b9b1c1ee7a44b29c126b8f481b', value: this.dataItem?.label, placeholder: "eg. Sign Here", onInput: (e) => this.alter({ label: e.target.value }) })), this.supportsValue() && (h("ls-props-section", { key: '1fc16d46a133d7f8724b7e89fec0430908a5d440', sectionTitle: "Value", sectionDescription: "A prefilled value that can be altered by the signer." }, h("input", { key: '5c891526edb6a685222cfbc8f322a089e7cd5279', 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: '681316a7a8e67745fd9bf1735dc5d282ce62e756', sectionTitle: "Options", sectionDescription: "Define the options available in the dropdown. One option per line." }, h("textarea", { key: 'c919685a5b466e8ff6fd4d7ee4dbbcf9c66bfcee', 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: '21d860e34e7a1715a5618b375c57c979acfb5dcb', sectionTitle: "Content Format", sectionDescription: "Select the specific format you want the Recipient to enter." }, h("ls-input-wrapper", { key: 'e4cc5533901b4a0842ea97bb6a97f4f55816d1cb', select: true }, h("select", { key: '4875147dbdcfdeadf4485f2b283bed89fe43c083', 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: 'c8983032bdf7d1ec86416810de22445987bd75b5' })));
+            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), h("slot", { key: 'de3eef5f0ea1297b43c3e92851935552f1fdcef9' })));
     }
     static get is() { return "ls-field-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-field-content/ls-field-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ls-field-content.js","sourceRoot":"","sources":["../../../src/components/ls-field-content/ls-field-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAOpE,MAAM,OAAO,cAAc;IACd,SAAS,CAAc;IACT,QAAQ,CAAe;IACxC,mBAAmB,GAAY,IAAI,CAAC;IAO5C,MAAM,CAAgC;IAOtC,MAAM,CAAgC;IAEtC,0CAA0C;IAC1C,6CAA6C;IAC7C,qDAAqD;IACrD,KAAK,CAAC,IAAY;QAChB,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,EAAE,CAAC;QAC9C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IACpC,CAAC;IAEO,UAAU,CAAC;IAEnB,QAAQ,CAAC,IAAI,EAAE,KAAK;QAClB,IAAI,IAAI,CAAC,UAAU;YAAE,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAEnD,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,GAAG,EAAE;YAChC,MAAM,KAAK,GAAoB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;YAC5D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;~~YACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;~~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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { validationTypes } from '../ls-document-viewer/editorUtils';\n\n@Component({\n tag: 'ls-field-content',\n styleUrl: 'ls-field-content.css',\n shadow: true,\n})\nexport class LsFieldContent {\n @Element() component: HTMLElement;\n @Prop({ mutable: true }) dataItem: LSApiElement;\n @Prop() showValidationTypes: boolean = true;\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 // 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, 500);\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 supportsValue() {\n const typesWithValue = [\"signature\", \"intials\", \"image\", \"file\", \"signing\", \"date\", \"autosign\", \"regex\"];\n \n return !typesWithValue.includes(this.dataItem?.elementType);\n }\n\n render() {\n return (\n <Host>\n <ls-props-section sectionTitle=\"Field Type\" sectionDescription=\"The Field you currently have selected\">\n <ls-field-type-display fieldType={this.dataItem?.elementType} assignee={this.dataItem?.signer} />\n </ls-props-section>\n <ls-props-section sectionTitle=\"Required Field\" row={true}>\n <ls-toggle id=\"toggle-required\" checked={!this.dataItem?.optional} onValueChange={(ev) => this.alter({ optional: !ev.detail })} />\n </ls-props-section>\n <ls-props-section sectionTitle=\"Field Label\" sectionDescription=\"Add a label to clarify the information required from the Recipient.\">\n <input value={this.dataItem?.label} placeholder=\"eg. Sign Here\" onInput={(e) => this.alter({ label: (e.target as HTMLInputElement).value })} />\n </ls-props-section>\n {this.supportsValue() && (\n <ls-props-section sectionTitle=\"Value\" sectionDescription=\"A prefilled value that can be altered by the signer.\">\n <input value={this.dataItem?.value} placeholder=\"e.g. Gordon Smith\" onInput={(e) => this.alter({ value: (e.target as HTMLInputElement).value })} />\n </ls-props-section>\n )}\n {this.dataItem.validation === 20 && (\n <ls-props-section sectionTitle=\"Options\" sectionDescription=\"Define the options available in the dropdown. One option per line.\">\n <textarea value={this.dataItem?.options} placeholder=\"Option 1 Option 2 Option 3\" onInput={(e) => this.alter({ options: (e.target as HTMLTextAreaElement).value })} />\n </ls-props-section>\n )}\n\n {this.showValidationTypes && (\n <ls-props-section sectionTitle=\"Content Format\" sectionDescription=\"Select the specific format you want the Recipient to enter.\">\n <ls-input-wrapper select>\n <select onChange={(ev) => this.alter({ validation: parseInt((ev.target as HTMLSelectElement).value) })} >\n {validationTypes\n .filter(type => type.formType === this.dataItem?.elementType)\n .map(type => (\n <option selected={this.dataItem?.validation === type.id} value={type.id}>\n {type.description}\n </option>\n ))}\n </select>\n </ls-input-wrapper>\n </ls-props-section>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ls-field-content.js","sourceRoot":"","sources":["../../../src/components/ls-field-content/ls-field-content.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { validationTypes } from '../ls-document-viewer/editorUtils';\n\n@Component({\n tag: 'ls-field-content',\n styleUrl: 'ls-field-content.css',\n shadow: true,\n})\nexport class LsFieldContent {\n @Element() component: HTMLElement;\n @Prop({ mutable: true }) dataItem: LSApiElement;\n @Prop() showValidationTypes: boolean = true;\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 // 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, 500);\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 }, delay);\n }\n\n supportsValue() {\n const typesWithValue = [\"signature\", \"intials\", \"image\", \"file\", \"signing\", \"date\", \"autosign\", \"regex\"];\n \n return !typesWithValue.includes(this.dataItem?.elementType);\n }\n\n render() {\n return (\n <Host>\n <ls-props-section sectionTitle=\"Field Type\" sectionDescription=\"The Field you currently have selected\">\n <ls-field-type-display fieldType={this.dataItem?.elementType} assignee={this.dataItem?.signer} />\n </ls-props-section>\n <ls-props-section sectionTitle=\"Required Field\" row={true}>\n <ls-toggle id=\"toggle-required\" checked={!this.dataItem?.optional} onValueChange={(ev) => this.alter({ optional: !ev.detail })} />\n </ls-props-section>\n <ls-props-section sectionTitle=\"Field Label\" sectionDescription=\"Add a label to clarify the information required from the Recipient.\">\n <input value={this.dataItem?.label} placeholder=\"eg. Sign Here\" onInput={(e) => this.alter({ label: (e.target as HTMLInputElement).value })} />\n </ls-props-section>\n {this.supportsValue() && (\n <ls-props-section sectionTitle=\"Value\" sectionDescription=\"A prefilled value that can be altered by the signer.\">\n <input value={this.dataItem?.value} placeholder=\"e.g. Gordon Smith\" onInput={(e) => this.alter({ value: (e.target as HTMLInputElement).value })} />\n </ls-props-section>\n )}\n {this.dataItem.validation === 20 && (\n <ls-props-section sectionTitle=\"Options\" sectionDescription=\"Define the options available in the dropdown. One option per line.\">\n <textarea value={this.dataItem?.options} placeholder=\"Option 1 Option 2 Option 3\" onInput={(e) => this.alter({ options: (e.target as HTMLTextAreaElement).value })} />\n </ls-props-section>\n )}\n\n {this.showValidationTypes && (\n <ls-props-section sectionTitle=\"Content Format\" sectionDescription=\"Select the specific format you want the Recipient to enter.\">\n <ls-input-wrapper select>\n <select onChange={(ev) => this.alter({ validation: parseInt((ev.target as HTMLSelectElement).value) })} >\n {validationTypes\n .filter(type => type.formType === this.dataItem?.elementType)\n .map(type => (\n <option selected={this.dataItem?.validation === type.id} value={type.id}>\n {type.description}\n </option>\n ))}\n </select>\n </ls-input-wrapper>\n </ls-props-section>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

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

@@ -27,32 +27,30 @@ export class LsFieldDimensions {
             });
             this.dataItem = diffs.map(d => d.data);
             this.mutate.emit(diffs);
-            this.update.emit(diffs);
         }
         else {
             const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } };
             this.dataItem = singleDiff.data;
             this.mutate.emit([singleDiff]);
-            this.update.emit([singleDiff]);
         }
     }
     componentDidLoad() {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: 'a8a6d6e6564a06a006db88e6ef836eefb52547f6' }, this.isMultiple(this.dataItem) && (h("div", { key: '934e5a504bdcf6a15c77c816787d381ba3dfec1a', class: 'ls-field-properties-section' }, h("div", { key: 'a9be6f39c294e09995a1e733776acf8120f950be', class: 'ls-field-properties-section-text' }, h("p", { key: 'cea338d1dae11abfa3b408e904aebd55d80acc9b', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: 'eda8caa2e3d69d57cbe9c7fa6b0056c16726baec', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: '91fa351bd9f997172f318a597ba340c17baba29f', class: 'input-row' }, h("div", { key: '459a717701dd8be278433b3638e7fd96e95c6dc2', class: 'input-wrapper', "data-tooltip": "Set field width in pixels" }, h("ls-icon", { key: '7a6c3dc0c40b7bde03b69c665a0e707967b07641', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: 'bc5cf4662ea81a501700a63c424ed5fcbf7e5dcf', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), h("div", { key: 'dc35b892fff0f244b1963272a2c867888eac97ff', class: 'input-wrapper', "data-tooltip": "Set field height in pixels" }, h("ls-icon", { key: '8c7d0e66054bc54bed027a25c6cdb4bd28263460', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: '2d084bc7a2bb0666bf2925c42817f9d01bac7cd5', 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: 'b8d18d8be187eac912d7b52ac9a31f935d6b85d2', class: 'field-set' }, h("div", { key: 'adce02171dad9a7dee22bfa1de2b4baf21dd4868', class: 'ls-field-properties-section' }, h("div", { key: '16fa2253cfa8ec487329ce9b96895285fbfb3347', class: 'ls-field-properties-section-text' }, h("p", { key: 'a429a31c69781290b903ff58e4c2ce53e5622bf6', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: 'a60d109f591cf286bb3b477e83de91d6bce94f17', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: 'e9484b8491e6d438562dad0ce3f434f01653499a', class: 'input-row' }, h("div", { key: '7a7ac0fc9f30725f6d876b7dc3d5f7411ff10760', class: 'input-wrapper', "data-tooltip": "Set field width in pixels" }, h("ls-icon", { key: 'a31fea1c5d5addb366e18c39e86b7e3dd4e764f5', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: '9ff7bebc397770df98dcef808694737ac2cd35de', type: "number", class: 'has-leading-icon', aria: "field-width", id: "field-width", min: 5, max: this.dataItem.pageDimensions.width - this.dataItem.width, value: this.dataItem?.width, onChange: e => {
+        return (h(Host, { key: 'd003ec4d22c43fdc9ff1b7d5c42847cb5d21fa58' }, this.isMultiple(this.dataItem) && (h("div", { key: 'c97175dfa0099066e8fd997fb7c732916a45dcad', class: 'ls-field-properties-section' }, h("div", { key: 'ff4bbd9b97f2035521472682e323bd6539453138', class: 'ls-field-properties-section-text' }, h("p", { key: 'a6ce84a435637f5844483a6199c3a7d1f0ffe5fa', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: 'f7b6c29969724037862c0ce90bc4c19b5d8a0b8d', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: '81cbc0cbe5a8d35cb1313b39fde5c42d268fabdc', class: 'input-row' }, h("div", { key: 'eaa01d8a7992511edd9f4cf45048069e37ab1701', class: 'input-wrapper', "data-tooltip": "Set field width in pixels" }, h("ls-icon", { key: 'd8993e0e168487aa14bebb340961940249961367', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: '7b769e44b527c088c4f62bae3259e755da0c7d88', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), h("div", { key: '17e100d57b703c0fbc401006e021df4049f55049', class: 'input-wrapper', "data-tooltip": "Set field height in pixels" }, h("ls-icon", { key: '0cfc394ae203d751300160247e31d6e27ea943f7', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: '619218eb16ea31fa460c31cc717edc1d74b94c19', 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: '9b7fd1db9c1ee0cd5e501190dab54c076e4d7bf0', class: 'field-set' }, h("div", { key: 'bdfea8edc67c3ccd17d9a59d6f9a8cf0a06fccba', class: 'ls-field-properties-section' }, h("div", { key: '3aa013fdf3dbdbd3631042a9159ab337054e9062', class: 'ls-field-properties-section-text' }, h("p", { key: '83d1f77ddecc1b06aa1a3e6e320babde8d64fb0f', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: '702d3ea7ab57828852e701d21fa45d07506a9ddb', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: '836c4e59244430a6e3f914a912b1fe699a79e1f1', class: 'input-row' }, h("div", { key: 'a893194799297e84bddd5726c5e86d61824532a5', class: 'input-wrapper', "data-tooltip": "Set field width in pixels" }, h("ls-icon", { key: '3dcbee06779a17a700d515973698b7041e7592f9', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: 'd7f64794d2880e9f0f444d8a98d5d7bd21c122cb', type: "number", class: 'has-leading-icon', aria: "field-width", id: "field-width", min: 5, max: this.dataItem.pageDimensions.width - this.dataItem.width, value: this.dataItem?.width, onChange: e => {
                 const di = this.getDataItem();
                 if (parseInt(e.target.value) > di.pageDimensions.width - di.left) {
                     return;
                 }
                 this.alter({ width: e.target.value });
-            } })), h("div", { key: 'dc457de5d2fe2d5d9c50ee0df889e78b8f096f86', class: 'input-wrapper', "data-tooltip": "Set field height in pixels" }, h("ls-icon", { key: 'c8ab1bf03ac858db6e0f6953847dfb25b5ef4d6f', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: '19f430ce0b7c8b3c987c4c5093c6a476f3706328', type: "number", class: 'has-leading-icon', aria: "field-height", id: "field-height", value: this.dataItem?.height, onChange: e => {
+            } })), h("div", { key: '1956af6a1d388ca243b9f2b18d687d067a856513', class: 'input-wrapper', "data-tooltip": "Set field height in pixels" }, h("ls-icon", { key: '9971388d6ac1441ed86730a8448c5b1187a7cbcd', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: '9162dadc492c6fc63e26ee85ab218bf7f6a4e0b2', type: "number", class: 'has-leading-icon', aria: "field-height", id: "field-height", value: this.dataItem?.height, onChange: e => {
                 const di = this.getDataItem();
                 if (parseInt(e.target.value) > di.pageDimensions.height - di.top) {
                     return;
                 }
                 this.alter({ height: e.target.value });
-            } })))), h("div", { key: 'cd60c7d571808994ff1133402f06df4e6c4e4565', class: 'ls-field-properties-section' }, h("div", { key: 'c68403eb936e469949df52bdd07fe113327cb5ab', class: 'ls-field-properties-section-text' }, h("p", { key: 'db378ca35f8370e92caaf6d47237dc8ec3f2d805', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: '6a44db4b4d20129cb9a2fc543d238cc37908addf', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: 'e3b53cdcd65f871c27c3504e7ca7b254ce55fb6c', class: 'button-group' }, h("button", { key: '1603c2bf1f7ae55b8d5e081c2187d0ce022c01ff', disabled: true, "data-tooltip": "Select multiple Fields to to access scale controls" }, h("ls-icon", { key: 'fe5674a6238589d825aecd553b10649a84a0f824', name: "field-scale" })), h("button", { key: '3c079c5e0e959a52ee6948e116159c6743adba1b', disabled: true, "data-tooltip": "Select multiple Fields to to access match width controls" }, h("ls-icon", { key: '0856e4910e355a6fa4e7f03f94665b278af32d48', name: "field-match-width" })), h("button", { key: '6b59beeba0f64fac6c2633a460d4af6181ba2ff5', disabled: true, "data-tooltip": "Select multiple Fields to to access match height controls" }, h("ls-icon", { key: '16a643fc9be0e79cd4f618b10971ed10592d1b9a', name: "field-match-height" })))))), h("ls-tooltip", { key: '262c907c27db759563af51413069fcc6a970571a', id: "ls-tooltip-master" })));
+            } })))), h("div", { key: '9e75e3ef36f663c4a2fdddcb3e2c208ddf6e656f', class: 'ls-field-properties-section' }, h("div", { key: 'a8c072b8487a51da788c06357ba3dc9e1303166c', class: 'ls-field-properties-section-text' }, h("p", { key: 'c0dfd34d92f34c4477987a4d2e038dc8110cff31', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: 'ff3b7ed6b10c183adb2a71a4d52c78054ed226f0', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: 'c165300dbd7e39554d7cbdf0df050b91dd0696c1', class: 'button-group' }, h("button", { key: '37c07a694dc7bf78a944746f6cdcae8a9f0ad310', disabled: true, "data-tooltip": "Select multiple Fields to to access scale controls" }, h("ls-icon", { key: '0c1732003117b1ba1baa92dc940e1975ad44a857', name: "field-scale" })), h("button", { key: 'de2248e7f9ed41276fe394bec2e55a114861ccd8', disabled: true, "data-tooltip": "Select multiple Fields to to access match width controls" }, h("ls-icon", { key: '08748b6107dbd25162dc15c45ff0686bf90e8d13', name: "field-match-width" })), h("button", { key: 'ffabf838749929cdc4795aed33618ecaf00f34f5', disabled: true, "data-tooltip": "Select multiple Fields to to access match height controls" }, h("ls-icon", { key: '595cafe4a70003633c037b8da411d151df287fd6', name: "field-match-height" })))))), h("ls-tooltip", { key: '1729af7c643432890b18d5f68fc7561494100c14', id: "ls-tooltip-master" })));
     }
     static get is() { return "ls-field-dimensions"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-field-dimensions/ls-field-dimensions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ls-field-dimensions.js","sourceRoot":"","sources":["../../../src/components/ls-field-dimensions/ls-field-dimensions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { Element } from '@stencil/core';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n tag: 'ls-field-dimensions',\n styleUrl: 'ls-field-dimensions.css',\n shadow: true,\n})\nexport class LsFieldDimensions {\n @Element() component: HTMLElement;\n @Prop({ mutable: true }) dataItem: LSApiElement \| LSApiElement[];\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n\n isSingle(dt: LSApiElement \| LSApiElement[]): dt is LSApiElement {\n return (dt as LSApiElement[]).length === undefined;\n }\n\n isMultiple(dt: LSApiElement \| LSApiElement[]): dt is LSApiElement[] {\n return typeof (dt as LSApiElement[]).length === 'number';\n }\n\n getDataItem(): LSApiElement {\n if (this.isSingle(this.dataItem)) {\n return this.dataItem;\n }\n return this.dataItem[0];\n }\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n if (this.isMultiple(this.dataItem)) {\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n } else {\n const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } as LSApiElement } as LSMutateEvent;\n this.dataItem = singleDiff.data as LSApiElement;\n this.mutate.emit([singleDiff]);\n this.update.emit([singleDiff]);\n }\n }\n\n componentDidLoad() {\n attachAllTooltips(this.component.shadowRoot);\n }\n\n render() {\n return (\n <Host>\n {this.isMultiple(this.dataItem) && (\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Height and Width</p>\n <p class={'ls-field-properties-section-description'}>Define the height and width of one or multiple fields</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'} data-tooltip=\"Set field width in pixels\">\n <ls-icon id=\"selectLeadingIcon\" name=\"field-match-width\"></ls-icon>\n <input class={'has-leading-icon'} aria=\"field-width\" id=\"field-width\" onChange={e => this.alter({ width: (e.target as HTMLInputElement).value })} />\n </div>\n <div class={'input-wrapper'} data-tooltip=\"Set field height in pixels\">\n <ls-icon id=\"selectLeadingIcon\" name=\"field-match-height\"></ls-icon>\n <input class={'has-leading-icon'} aria=\"field-height\" id=\"field-height\" onChange={e => this.alter({ height: (e.target as HTMLInputElement).value })} />\n </div>\n </div>\n\n {/* <div>\n Top: <input value={''} onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })} width=\"30\" />\n </div>\n <div>\n Left: <input value={''} onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })} width=\"30\" />\n </div> */}\n </div>\n )}\n {this.isSingle(this.dataItem) && (\n <div class={'field-set'}>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Height and Width</p>\n <p class={'ls-field-properties-section-description'}>Define the height and width of one or multiple fields</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'} data-tooltip=\"Set field width in pixels\">\n <ls-icon id=\"selectLeadingIcon\" name=\"field-match-width\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"field-width\"\n id=\"field-width\"\n min={5}\n max={this.dataItem.pageDimensions.width - this.dataItem.width}\n value={this.dataItem?.width}\n onChange={e => {\n const di = this.getDataItem();\n if (parseInt((e.target as HTMLInputElement).value) > di.pageDimensions.width - di.left) {\n return;\n }\n this.alter({ width: (e.target as HTMLInputElement).value })\n }}\n />\n </div>\n <div class={'input-wrapper'} data-tooltip=\"Set field height in pixels\">\n <ls-icon id=\"selectLeadingIcon\" name=\"field-match-height\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"field-height\"\n id=\"field-height\"\n value={this.dataItem?.height}\n onChange={e => {\n const di = this.getDataItem();\n if (parseInt((e.target as HTMLInputElement).value) > di.pageDimensions.height - di.top) {\n return;\n }\n\n this.alter({ height: (e.target as HTMLInputElement).value })\n }}\n />\n </div>\n </div>\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Scale and Resize</p>\n <p class={'ls-field-properties-section-description'}>Multi-select fields and match their dimensions</p>\n </div>\n <div class={'button-group'}>\n <button disabled data-tooltip=\"Select multiple Fields to to access scale controls\">\n <ls-icon name=\"field-scale\"></ls-icon>\n </button>\n <button disabled data-tooltip=\"Select multiple Fields to to access match width controls\">\n <ls-icon name=\"field-match-width\"></ls-icon>\n </button>\n <button disabled data-tooltip=\"Select multiple Fields to to access match height controls\">\n <ls-icon name=\"field-match-height\"></ls-icon>\n </button>\n </div>\n </div>\n </div>\n )}\n <ls-tooltip id=\"ls-tooltip-master\" />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ls-field-dimensions.js","sourceRoot":"","sources":["../../../src/components/ls-field-dimensions/ls-field-dimensions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { Element } from '@stencil/core';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n tag: 'ls-field-dimensions',\n styleUrl: 'ls-field-dimensions.css',\n shadow: true,\n})\nexport class LsFieldDimensions {\n @Element() component: HTMLElement;\n @Prop({ mutable: true }) dataItem: LSApiElement \| LSApiElement[];\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n\n isSingle(dt: LSApiElement \| LSApiElement[]): dt is LSApiElement {\n return (dt as LSApiElement[]).length === undefined;\n }\n\n isMultiple(dt: LSApiElement \| LSApiElement[]): dt is LSApiElement[] {\n return typeof (dt as LSApiElement[]).length === 'number';\n }\n\n getDataItem(): LSApiElement {\n if (this.isSingle(this.dataItem)) {\n return this.dataItem;\n }\n return this.dataItem[0];\n }\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n if (this.isMultiple(this.dataItem)) {\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n } else {\n const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } as LSApiElement } as LSMutateEvent;\n this.dataItem = singleDiff.data as LSApiElement;\n this.mutate.emit([singleDiff]);\n }\n }\n\n componentDidLoad() {\n attachAllTooltips(this.component.shadowRoot);\n }\n\n render() {\n return (\n <Host>\n {this.isMultiple(this.dataItem) && (\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Height and Width</p>\n <p class={'ls-field-properties-section-description'}>Define the height and width of one or multiple fields</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'} data-tooltip=\"Set field width in pixels\">\n <ls-icon id=\"selectLeadingIcon\" name=\"field-match-width\"></ls-icon>\n <input class={'has-leading-icon'} aria=\"field-width\" id=\"field-width\" onChange={e => this.alter({ width: (e.target as HTMLInputElement).value })} />\n </div>\n <div class={'input-wrapper'} data-tooltip=\"Set field height in pixels\">\n <ls-icon id=\"selectLeadingIcon\" name=\"field-match-height\"></ls-icon>\n <input class={'has-leading-icon'} aria=\"field-height\" id=\"field-height\" onChange={e => this.alter({ height: (e.target as HTMLInputElement).value })} />\n </div>\n </div>\n\n {/* <div>\n Top: <input value={''} onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })} width=\"30\" />\n </div>\n <div>\n Left: <input value={''} onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })} width=\"30\" />\n </div> */}\n </div>\n )}\n {this.isSingle(this.dataItem) && (\n <div class={'field-set'}>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Height and Width</p>\n <p class={'ls-field-properties-section-description'}>Define the height and width of one or multiple fields</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'} data-tooltip=\"Set field width in pixels\">\n <ls-icon id=\"selectLeadingIcon\" name=\"field-match-width\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"field-width\"\n id=\"field-width\"\n min={5}\n max={this.dataItem.pageDimensions.width - this.dataItem.width}\n value={this.dataItem?.width}\n onChange={e => {\n const di = this.getDataItem();\n if (parseInt((e.target as HTMLInputElement).value) > di.pageDimensions.width - di.left) {\n return;\n }\n this.alter({ width: (e.target as HTMLInputElement).value })\n }}\n />\n </div>\n <div class={'input-wrapper'} data-tooltip=\"Set field height in pixels\">\n <ls-icon id=\"selectLeadingIcon\" name=\"field-match-height\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"field-height\"\n id=\"field-height\"\n value={this.dataItem?.height}\n onChange={e => {\n const di = this.getDataItem();\n if (parseInt((e.target as HTMLInputElement).value) > di.pageDimensions.height - di.top) {\n return;\n }\n\n this.alter({ height: (e.target as HTMLInputElement).value })\n }}\n />\n </div>\n </div>\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Scale and Resize</p>\n <p class={'ls-field-properties-section-description'}>Multi-select fields and match their dimensions</p>\n </div>\n <div class={'button-group'}>\n <button disabled data-tooltip=\"Select multiple Fields to to access scale controls\">\n <ls-icon name=\"field-scale\"></ls-icon>\n </button>\n <button disabled data-tooltip=\"Select multiple Fields to to access match width controls\">\n <ls-icon name=\"field-match-width\"></ls-icon>\n </button>\n <button disabled data-tooltip=\"Select multiple Fields to to access match height controls\">\n <ls-icon name=\"field-match-height\"></ls-icon>\n </button>\n </div>\n </div>\n </div>\n )}\n <ls-tooltip id=\"ls-tooltip-master\" />\n </Host>\n );\n }\n}\n"]}

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

@@ -5,7 +5,6 @@ import { outOfBounds } from "../ls-document-viewer/mouseHandlers";
 export class LsFieldDistribute {
     dataItem;
     mutate;
-    update;
     component;
     // Send one or more mutations up the chain
     // The source of the chain fires the mutation
@@ -16,7 +15,6 @@ export class LsFieldDistribute {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     distributeHorizontal() {
         var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space');
@@ -37,7 +35,7 @@ export class LsFieldDistribute {
             avgspace = Math.floor(totalWidth / (sorted.length - 1));
         }
         const filtered = sorted.filter((c, index) => {
-            return outOfBounds({ ...c, left: Math.floor(leftmost - (c.width / 2) + avgspace * index) }) === false
+            return outOfBounds({ ...c, left: (Math.floor(leftmost - (c.width / 2) + avgspace * index)) }) === false
                 && index !== 0
                 && index !== sorted.length - 1;
         });
@@ -52,7 +50,6 @@ export class LsFieldDistribute {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     gapVertical(spacing) {
         const sorted = this.dataItem.sort((a, b) => a.top - b.top);
@@ -76,7 +73,6 @@ export class LsFieldDistribute {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     gapHorizontal(spacing) {
         const sorted = this.dataItem.sort((a, b) => a.top - b.top);
@@ -101,7 +97,6 @@ export class LsFieldDistribute {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     distributeVertical() {
         var spacing = this.component.shadowRoot.getElementById('ls-fix-vertical-space');
@@ -135,21 +130,20 @@ export class LsFieldDistribute {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     componentDidLoad() {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: 'c06b2987d2456ac90d5743e333d1094f06b23c65' }, h("div", { key: '8e78a3f2769b356591d86849e35afbb4537ce4ca', class: 'ls-field-properties-section' }, h("div", { key: '29329178494ef3a1482508c48a3bdc67e7f48d0f', class: 'ls-field-properties-section-text' }, h("p", { key: 'b94e6ff800bef85868f44ea69f3b03227168e199', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: '68be3703df94c04966d290125551997ea64705ef', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '65f35f606f0954a356020c35afa468630ebd4c79', class: 'button-group' }, h("button", { key: '0d54769aa654920c206255ccae116ef1e9166229', onClick: () => {
+        return (h(Host, { key: '9183c6d98eba74df69f024a583940a25c0f7547c' }, h("div", { key: 'efe9718b9b662956d0cf829d687df3d558cdad31', class: 'ls-field-properties-section' }, h("div", { key: '24e5a2d203432ee0b0894a517870a19e6081b9dc', class: 'ls-field-properties-section-text' }, h("p", { key: 'ced15352bbbdd00133d20de812fede32e1c281d6', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: 'a08ae1961bfbc738b1359b7c938ff80ece5ef4fe', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: 'a720baf91f2917458c47a0c8a2cc91bda6d9d92d', class: 'button-group' }, h("button", { key: 'e2303f2c8324e126ae5d8c5e3db65c6c04498ccc', onClick: () => {
                 this.distributeVertical();
-            }, "aria-label": "Distribute selected fields vertically.", "data-tooltip": "Distribute selected fields vertically" }, h("ls-icon", { key: '56dfda0e142e0dc28a86d8b9968344f86ecbbda9', name: "field-distribute-vertically" })), h("button", { key: '29253e7bfa3fb37c87a8b05edaf0178765eafc09', onClick: () => {
+            }, "aria-label": "Distribute selected fields vertically.", "data-tooltip": "Distribute selected fields vertically" }, h("ls-icon", { key: 'b3def31389be531f8d93b7a4aba31da1972573e1', name: "field-distribute-vertically" })), h("button", { key: 'fcfd3704ac035ee406b1b5579e9b6dfbf8f7eec0', onClick: () => {
                 this.distributeHorizontal();
-            }, "aria-label": "Distribute selected fields horizontally.", "data-tooltip": "Distribute selected fields horizontally" }, h("ls-icon", { key: 'ec6fe592e480488aab562788be6092d6c629313b', name: "field-distribute-horizontally" })))), h("div", { key: '2fd6de11f133e3a997cd2b8ac6c7be0c88c0eb2f', class: 'ls-field-properties-section' }, h("div", { key: '33b91c5f23ce5b0a91b3366b90b4efa8df80c683', class: 'ls-field-properties-section-text' }, h("p", { key: '0eca395004eadae20e0c354a07cd9a3cb0fe5f66', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: 'eb665ca6f80066a0b7875a087d06aa899c48f90d', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: 'e94ce80fdd7091c84722bf022bdf2942a96c19b4', class: 'input-row' }, h("div", { key: '77fac09300ea6d03447b84ba8c53332c16ca8412', class: 'input-wrapper', "data-tooltip": "Set vertical gap between selected fields" }, h("ls-icon", { key: '119c87513c2993b22c984a0fb002ff67068c5e74', id: "selectLeadingIcon", name: "field-distribute-vertically" }), h("input", { key: 'df3b3cb5ce81f09ad54ae30afeb4712838ddcdd6', 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: 'a8fe7f099ef6002e6459d6e0e85c3abb301f4d58', name: "field-distribute-horizontally" })))), h("div", { key: '2371a9653b583f97ad1df8a45a4145291b20ac21', class: 'ls-field-properties-section' }, h("div", { key: 'a6b4714f995ba5017e0cfb894a40c828676a764d', class: 'ls-field-properties-section-text' }, h("p", { key: 'efa830b42e36555694cd413c7faf85e9c81e4ff2', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: 'dfd54671699a6b8840b867a9a9635639a9b801aa', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '7a970651367e27007aaa57af06a1918efbc06889', class: 'input-row' }, h("div", { key: '4494e7585a4f4a41cccd5db632f917946e53a5f7', class: 'input-wrapper', "data-tooltip": "Set vertical gap between selected fields" }, h("ls-icon", { key: 'c4cf75483efe34297a283693413ea91a70dc3965', id: "selectLeadingIcon", name: "field-distribute-vertically" }), h("input", { key: '0480f8f9b0227599fc31658e8799ee999712d37f', 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: '0342792227c10946f906f961ff9a316c017f7dc0', class: 'input-wrapper', "data-tooltip": "Set horizontal gap between selected fields" }, h("ls-icon", { key: 'f2f3f13ecb113f7b4ab3bd41365859cd86f35f4f', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), h("input", { key: 'd79f7fb2f7b07fbbe2c2198a162734f5b996148b', type: "number", class: 'has-leading-icon', id: "ls-fix-horizontal-space", onChange: e => {
+            }, value: '', size: 4, min: 0, max: 9999 })), h("div", { key: 'c793ffb33e2892914bb546b8643628dce38f209a', class: 'input-wrapper', "data-tooltip": "Set horizontal gap between selected fields" }, h("ls-icon", { key: '726eda22cf535a5d760df8d5c2443e2a8d20c7f7', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), h("input", { key: 'd064bf24692fb0a6cdb4de546f9166115565b5d5', 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: '2c64922f26291845477b4d49456e9aa149368473', id: "ls-tooltip-master" }), h("slot", { key: '85aa5cc253055d868acfcef263d8d5f76d0fee03' })));
+            }, value: '', size: 4, min: 0, max: 9999 })))), h("ls-tooltip", { key: 'c699c7d28bc03981a8fdcd9960ce2b81bc7ed2f7', id: "ls-tooltip-master" }), h("slot", { key: 'e2bdf922af96349adfc40efba97dccb434a850eb' })));
     }
     static get is() { return "ls-field-distribute"; }
     static get encapsulation() { return "shadow"; }
@@ -212,27 +206,6 @@ export class LsFieldDistribute {
                         }
                     }
                 }
-            }, {
-                "method": "update",
-                "name": "update",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "LSMutateEvent[]",
-                    "resolved": "LSMutateEvent[]",
-                    "references": {
-                        "LSMutateEvent": {
-                            "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::LSMutateEvent"
-                        }
-                    }
-                }
             }];
     }
     static get elementRef() { return "component"; }