npm - legalesign-document-viewer - Versions diffs - 0.2.19 → 0.3.1 - Mend

legalesign-document-viewer 0.2.19 → 0.3.1

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 (286) hide show

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

@@ -29,7 +29,7 @@ export class LsFieldDimensions {
         }
     }
     render() {
-        return (h(Host, { key: '19d830f9e2acf0125befaaa5386613da819d5f0e' }, this.isMultiple(this.dataItem) && (h("div", { key: '629f80415218ade978ce45a9fbeea38f136a1b33', class: 'ls-field-properties-section' }, h("div", { key: 'a027cc20ae591f94ed54d9e6e93b7826a87dd583', class: 'ls-field-properties-section-text' }, h("p", { key: '24270cee4bdecc6c06a06efb34169827dc0aa96e', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: '8558ee8920871270943edbda0392c21eae948c94', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: 'fd8b5281f3a25de363bcbb1ff93189dbadfe7b15', class: 'input-row' }, h("div", { key: '6f6d9205a2b1a14c8b0618d8f097290edb43690f', class: 'input-wrapper' }, h("ls-icon", { key: '2eb580572a2be6ea8cc204447f760da63d06807f', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: '2bc5d6f1c7f725ecb6ca82c4081ed5b42b7ee56e', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), h("div", { key: '6affcfc83bc4cde7a9fed80415c9d21495e1466c', class: 'input-wrapper' }, h("ls-icon", { key: '634b0e72778978116b39cf15869884bbe51eabdc', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: '762fdbd4b3ff084d7d136f4536d592bf07cf8342', 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: 'aa4c66751db7f2d3dfca151edc1cb23cbfdbfce1', class: 'field-set' }, h("div", { key: 'b2e86370878a977450c3057d7892f96a5f3f7dcb', class: 'ls-field-properties-section' }, h("div", { key: 'e3c5d394149132da170e7c61b70d6739924b9f52', class: 'ls-field-properties-section-text' }, h("p", { key: '52f5b30d62cfc5541952be0650411df7c6d51c42', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: '7b7c280d971473115859f8fb7f274b9e3a028fa1', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: 'ad761e6552cf41cab1abe005a084c68ead82175c', class: 'input-row' }, h("div", { key: '3666540cd6533c6d2698cb6b2bd722d7749f930e', class: 'input-wrapper' }, h("ls-icon", { key: '0d27684b779b5bcdc69bbc22402615706590c94b', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: '88b451a53d36ef023545ff0b6cc59ceab85b714c', 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: 'ecca70d84553d8f39cba8c4c5915761e30adf0ab', class: 'input-wrapper' }, h("ls-icon", { key: 'c867638bc065ae5702b3e7887cc4f0a42b9e13e3', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: '44dc86a42a13de363dce31fe99151183da4411aa', 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: 'fc9f465fb17869fcdf129ddbdcc9e3a2d293ef8f', class: 'ls-field-properties-section' }, h("div", { key: 'ff59482f02e40b4c2b36ff8bc3e6e2bd6cf2f3e7', class: 'ls-field-properties-section-text' }, h("p", { key: 'ff4ab1e6fddcd3acb152986da22d0578b95379de', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: 'e421512109ff01779b429be7bef8d94e7aede922', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: 'f73d48bf4e11b750e76bdb19f7c42edd272c0825', class: 'button-group' }, h("button", { key: '401b1544201acb638e9370ffa11d18423adb5b4a', disabled: true }, h("ls-icon", { key: '54d6007197fff3ea5786af142affcc1a7a68f12e', name: "field-scale" })), h("button", { key: '688a49435f72a6b940f5bc1a743465d90ce70079', disabled: true }, h("ls-icon", { key: '5b29da650220c305d3cd4a10a36c773ffd8484e5', name: "field-match-width" })), h("button", { key: 'ddc295463cae884a14c3391c369af08d406ce575', disabled: true }, h("ls-icon", { key: 'd21cca2e51d9556c187fd8688983aef92e09c2dc', name: "field-match-height" }))))))));
+        return (h(Host, { key: '53678e7fc68e795616c51e7cb7325a5cd45761de' }, this.isMultiple(this.dataItem) && (h("div", { key: 'f5a073c2039858e3b69162a1d1e599ae559dc2d6', class: 'ls-field-properties-section' }, h("div", { key: 'f707c71fc9623bf6fc290ab3bb14451ba98e5454', class: 'ls-field-properties-section-text' }, h("p", { key: 'c000b0fb97cb50712463b4973b8d395df30f0704', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: '4443d09dd3358da331437d83db4080e7b7a6407b', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: 'efa8b8ec8030846f073c147879dfab93ba135a02', class: 'input-row' }, h("div", { key: 'c6e3345f3fc87d539ac35a85c0b8c47042795b59', class: 'input-wrapper' }, h("ls-icon", { key: '9033883167f51a83f41039dc9da682de3954cd17', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: 'a18a60327e5766e2c109af6dd95f080a5d0aa3b9', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), h("div", { key: '7d3464a547cdf5938311a5f9ffc2995be604035e', class: 'input-wrapper' }, h("ls-icon", { key: '0e413fc72b08cf785b33c56041fe0c638b86bc70', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: 'bb8a36bfe49680bbe7183d8cc524d1be95f6d87c', 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: '5f73b3b84f25b2072374fc6ca27d0b59dfc3314e', class: 'field-set' }, h("div", { key: 'ee6d5b21c0957acee288252e35165868cc0db0ba', class: 'ls-field-properties-section' }, h("div", { key: '5edddb346091bb34859f258630ea959492c64ac4', class: 'ls-field-properties-section-text' }, h("p", { key: '3a90f8a2e72a099fe297dfbcc0b269bd61268ad6', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: '0c336dc47d35dd3a629b766e87046463e19a9522', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: '494929a5bbb6eae61c2d82aa1e3442ca2c1dabb1', class: 'input-row' }, h("div", { key: 'ce3002cfcf8344556895ed9d237e8dfb359a27a4', class: 'input-wrapper' }, h("ls-icon", { key: 'dca359e82e3733fec34ee138006ef8d63cd7025c', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: '421cd8faa380b84cb57d0dc0e76d92a3abd38162', 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: '90b66ca4284e84ddb8b22de8d144ae24e757c74c', class: 'input-wrapper' }, h("ls-icon", { key: '438f4022c0b55db6f6131bcf57c957fd644f4661', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: 'd936659987860f79cba8e5ada8f28a437eaba4f5', 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: '6b1bafdcf631c2ec00acc7afe7fdfe03b0b6600e', class: 'ls-field-properties-section' }, h("div", { key: '70731c167c84621672059ab5a8ab28c266029525', class: 'ls-field-properties-section-text' }, h("p", { key: '81fbb63a29e0f432765f00beedc4683d3f464a03', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: '1ba477c5b9076364870cdd5f6106a4d40f74189f', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: '62ba3006a435142653751e81b153b833dafa9801', class: 'button-group' }, h("button", { key: '9dec26a9e8ed19d2c21ea273afd2e655a0e1b6cc', disabled: true }, h("ls-icon", { key: '04777dc3bfdc0b81bce904d4f56108749e0c47c8', name: "field-scale" })), h("button", { key: '709baed52decc30ffebd96b14b02a54466ac7824', disabled: true }, h("ls-icon", { key: 'cf6b733cb6fcda50b39faf12b208cc1d5fa4a8b0', name: "field-match-width" })), h("button", { key: '6ef87f9641f2cc45a679afc73eb49920abdc7822', disabled: true }, h("ls-icon", { key: '28ee6b1d779df43ad15f4041271ec85ac9e95903', name: "field-match-height" }))))))));
     }
     static get is() { return "ls-field-dimensions"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { oob } from "../ls-document-viewer/editorUtils";
 export class LsFieldDistribute {
     dataItem;
     mutate;
@@ -39,9 +40,7 @@ export class LsFieldDistribute {
                 action: 'update',
                 data: {
                     ...c,
-                    left: newLeft,
-                    ax: newLeft,
-                    bx: newLeft + c.width,
+                    left: newLeft
                 },
             };
         });
@@ -49,6 +48,51 @@ export class LsFieldDistribute {
         this.mutate.emit(diffs);
         this.update.emit(diffs);
     }
+    gapVertical(spacing) {
+        const sorted = this.dataItem.sort((a, b) => a.top - b.top);
+        var buffer = sorted[0].top;
+        const diffs = sorted.map(c => {
+            const newTop = buffer;
+            buffer = buffer + c.height + spacing;
+            const target = {
+                ...c,
+                top: newTop
+            };
+            return {
+                action: 'update',
+                data: oob(target) ? {
+                    ...c,
+                    left: c.pageDimensions.height - c.height - 1
+                } : target
+            };
+        });
+        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);
+        var buffer = sorted[0].left;
+        const diffs = sorted.map(c => {
+            const newLeft = buffer;
+            buffer = buffer + c.width + spacing;
+            const target = {
+                ...c,
+                left: newLeft
+            };
+            console.log(target, oob(target));
+            return {
+                action: 'update',
+                data: oob(target) ? {
+                    ...c,
+                    left: c.pageDimensions.width - c.width - 1
+                } : target
+            };
+        });
+        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');
         var avgspace = 0;
@@ -68,14 +112,16 @@ export class LsFieldDistribute {
         const diffs = sorted.map(c => {
             const newTop = buffer;
             buffer = buffer + c.height + avgspace;
+            const target = {
+                ...c,
+                top: newTop
+            };
             return {
                 action: 'update',
-                data: {
+                data: oob(target) ? {
                     ...c,
-                    top: newTop,
-                    ay: newTop,
-                    by: newTop + c.height,
-                },
+                    top: c.pageDimensions.height - c.height
+                } : target
             };
         });
         this.dataItem = diffs.map(d => d.data);
@@ -83,11 +129,15 @@ export class LsFieldDistribute {
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: '1da6e89c29b012402fb855b09d6f89412b7fffff' }, h("div", { key: '13a5e1dfededc5e857f85d731fb23f59b6b8f64b', class: 'ls-field-properties-section' }, h("div", { key: 'af4c4a1dc679bff814e0996a56169db0d65c0a52', class: 'ls-field-properties-section-text' }, h("p", { key: 'afcd55f8ea2c8000ddaba5bcd516a1926a3f103a', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: 'db559e60e145234f95497eca284ccf241fc5f094', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '4a8433efc339fc1a995ef964abbda61234a00f52', class: 'button-group' }, h("button", { key: 'd91bb4652162d97ad921ec91c9c0261f617a518f', onClick: () => {
+        return (h(Host, { key: '6b56e29ef6606020392f6345eeab99a79201ca39' }, h("div", { key: 'dd54237204e0a3cb3e5e7106fa3c217f1bd4783c', class: 'ls-field-properties-section' }, h("div", { key: '4211d0435d809c161875ec80ed36c8c3fe6e2d09', class: 'ls-field-properties-section-text' }, h("p", { key: '9f6bf5f1c684a17fb20fb5e8b44e2fd193e1c428', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: '7b8da49375a5bc764b3f910a8e625569911aa7b7', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '618ac328f320cd4299289fa072d62640964e6b5f', class: 'button-group' }, h("button", { key: 'ae5e15c9947486772f978e028b71d1f0901cb4ef', onClick: () => {
                 this.distributeVertical();
-            }, "aria-label": "Distribute selected fields vertically.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields vertically.", "data-tooltip-place": "top" }, h("ls-icon", { key: '4c7935424e784dc1fc3ebfe996101c492c8cb4de', name: "field-distribute-vertically" })), h("button", { key: '0ac25cb0252642f565af0e43d8e3d62c8869469d', onClick: () => {
+            }, "aria-label": "Distribute selected fields vertically.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields vertically.", "data-tooltip-place": "top" }, h("ls-icon", { key: '30452ccd64d0e2a3d0ebcf7125a37abfa2996610', name: "field-distribute-vertically" })), h("button", { key: 'ced0890fec909ecd9d6c42426eeb5f291303b6b9', onClick: () => {
                 this.distributeHorizontal();
-            }, "aria-label": "Distribute selected fields horizontally.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields horizontally.", "data-tooltip-place": "top" }, h("ls-icon", { key: '00d5b191557e95b6dd8f7c9866ade809c5392046', name: "field-distribute-horizontally" })))), h("div", { key: 'd21c0297023873f7d752163fb06557504ca3ce91', class: 'ls-field-properties-section' }, h("div", { key: '5d29996d6e3c25621ba760bca38a0b76a02c1099', class: 'ls-field-properties-section-text' }, h("p", { key: '00ab146d74a0446aad281a46fdafaae20384674c', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: '968370f8ece75d442fa8b1adc2809a289653b295', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '2819ad7513258f7c3c4096f171578d5c704d3fc8', class: 'input-row' }, h("div", { key: 'a8d5d086e974b911490df419059a82b43cc566de', class: 'input-wrapper' }, h("ls-icon", { key: 'fa72a36c4da15a210ee486477b0c362741002940', id: "selectLeadingIcon", name: "field-distribute-vertically" }), h("input", { key: '52853aa1afe326391b735f534ff0987dab350037', type: "number", class: 'has-leading-icon', id: "ls-fix-vertical-space", value: '', size: 4, min: 0, max: 9999 })), h("div", { key: '57a5adfb1675e7fd5ab71c71ce0d239fc5777c2b', class: 'input-wrapper' }, h("ls-icon", { key: '6114732c75cf3499985d80b718578bd6140bd801', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), h("input", { key: '729381797b69aca62402451473b3ac2507e21a5c', type: "number", class: 'has-leading-icon', id: "ls-fix-horizontal-space", value: '', size: 4, min: 0, max: 9999 })))), h("slot", { key: 'ca7b442e1395376563a47d5377eb9962ace34f38' })));
+            }, "aria-label": "Distribute selected fields horizontally.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields horizontally.", "data-tooltip-place": "top" }, h("ls-icon", { key: '8c4925974e0f22a0222f0e403a913a03bef27475', name: "field-distribute-horizontally" })))), h("div", { key: '6080eed10a0a7f7b8bc1566936df072ad67c5437', class: 'ls-field-properties-section' }, h("div", { key: '261f4b45dec8cc55bebe5aa9e58524f4077a756a', class: 'ls-field-properties-section-text' }, h("p", { key: '9702708febe79b8f20179dd90fb1b4d839876862', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: '226c8c2508c1540aa20ac806522c57e6c374dc98', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '857724c65a60b251df274c41ef3167cb9ce39fa9', class: 'input-row' }, h("div", { key: 'e90426b59b908488a8d456fa2cd43984e0da5253', class: 'input-wrapper' }, h("ls-icon", { key: '1977d4be8956afc9de41ead5b6957e4fe3669c4f', id: "selectLeadingIcon", name: "field-distribute-vertically" }), h("input", { key: '2e61592539c3453cf345a2798f75e979ed17fa75', 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: '9384373f0bb26414c1375f8786624c7aff12ed36', class: 'input-wrapper' }, h("ls-icon", { key: '31e062fb69c324d2571df1d62e2ba3549245acc4', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), h("input", { key: '20352f4de63216cc737f7cf469493381282bef32', 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("slot", { key: '33b53eb78125407c869e7ae32eba9a23ac77001b' })));
     }
     static get is() { return "ls-field-distribute"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ls-field-distribute.js","sourceRoot":"","sources":["../../../src/components/ls-field-distribute/ls-field-distribute.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n tag: 'ls-field-distribute',\n styleUrl: 'ls-field-distribute.css',\n shadow: true,\n})\nexport class LsFieldDistribute {\n @Prop({\n mutable: true,\n })\n dataItem: 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 @Element() component: HTMLElement;\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 distributeHorizontal() {\n var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space') as HTMLInputElement;\n var avgspace = 0;\n const sorted = this.dataItem.sort((a, b) => a.left - b.left);\n\n if (spacing.value !== '') {\n avgspace = parseInt(spacing.value);\n } else {\n var space = 0;\n for (var i = 1; i < sorted.length; i++) {\n const c1 = sorted[i - 1];\n const c2 = sorted[i];\n space = space + (c2.left - c1.left - c1.width <= 0 ? 0 : c2.left - c1.left - c1.width);\n }\n avgspace = Math.floor(space / sorted.length);\n }\n\n var nextleft = sorted[0].left;\n\n const diffs: LSMutateEvent[] = sorted.map(c => {\n const newLeft = nextleft;\n nextleft = nextleft + c.width + avgspace;\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 distributeVertical() {\n var spacing = this.component.shadowRoot.getElementById('ls-fix-vertical-space') as HTMLInputElement;\n var avgspace = 0;\n const sorted = this.dataItem.sort((a, b) => a.top - b.top);\n\n if (spacing.value !== '') avgspace = parseInt(spacing.value);\n else {\n var space = 0;\n for (var i = 1; i < sorted.length; i++) {\n const c1 = sorted[i - 1];\n const c2 = sorted[i];\n space = space + (c2.top - c1.top - c1.height <= 0 ? 0 : c2.top - c1.top - c1.height);\n }\n avgspace = Math.floor(space / sorted.length);\n }\n\n var buffer = sorted[0].top;\n\n const diffs: LSMutateEvent[] = sorted.map(c => {\n const newTop = buffer;\n buffer = buffer + c.height + avgspace;\n\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\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\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'}>Distribution</p>\n <p class={'ls-field-properties-section-description'}>Multi-select fields and evenly space them out</p>\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.distributeVertical();\n }}\n aria-label=\"Distribute selected fields vertically.\"\n data-tooltip-id=\"le-tooltip\"\n data-tooltip-content=\"Distribute selected fields vertically.\"\n data-tooltip-place=\"top\"\n >\n <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.distributeHorizontal();\n }}\n aria-label=\"Distribute selected fields horizontally.\"\n data-tooltip-id=\"le-tooltip\"\n data-tooltip-content=\"Distribute selected fields horizontally.\"\n data-tooltip-place=\"top\"\n >\n <ls-icon name=\"field-distribute-horizontally\"></ls-icon>\n </button>\n </div>\n </div>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Gap</p>\n <p class={'ls-field-properties-section-description'}>Define the exact gap between multi-select fields.</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"field-distribute-vertically\"></ls-icon>\n <input type=\"number\" class={'has-leading-icon'} id=\"ls-fix-vertical-space\" value={''} size={4} min={0} max={9999} />\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"field-distribute-horizontally\"></ls-icon>\n <input type=\"number\" class={'has-leading-icon'} id=\"ls-fix-horizontal-space\" value={''} size={4} min={0} max={9999} />\n </div>\n </div>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ls-field-distribute.js","sourceRoot":"","sources":["../../../src/components/ls-field-distribute/ls-field-distribute.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 { oob } from '../ls-document-viewer/editorUtils';\n\n@Component({\n tag: 'ls-field-distribute',\n styleUrl: 'ls-field-distribute.css',\n shadow: true,\n})\nexport class LsFieldDistribute {\n @Prop({\n mutable: true,\n })\n dataItem: 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 @Element() component: HTMLElement;\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 distributeHorizontal() {\n var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space') as HTMLInputElement;\n var avgspace = 0;\n const sorted = this.dataItem.sort((a, b) => a.left - b.left);\n\n if (spacing.value !== '') {\n avgspace = parseInt(spacing.value);\n } else {\n var space = 0;\n for (var i = 1; i < sorted.length; i++) {\n const c1 = sorted[i - 1];\n const c2 = sorted[i];\n space = space + (c2.left - c1.left - c1.width <= 0 ? 0 : c2.left - c1.left - c1.width);\n }\n avgspace = Math.floor(space / sorted.length);\n }\n\n var nextleft = sorted[0].left;\n\n const diffs: LSMutateEvent[] = sorted.map(c => {\n const newLeft = nextleft;\n nextleft = nextleft + c.width + avgspace;\n\n return {\n action: 'update',\n data: {\n ...c,\n left: newLeft\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 gapVertical(spacing: number) {\n const sorted = this.dataItem.sort((a, b) => a.top - b.top);\n\n var buffer = sorted[0].top;\n\n const diffs: LSMutateEvent[] = sorted.map(c => {\n const newTop = buffer;\n buffer = buffer + c.height + spacing;\n const target = {\n ...c,\n top: newTop\n } as LSApiElement\n\n return {\n action: 'update',\n data: oob(target) ? {\n ...c,\n left: c.pageDimensions.height - c.height - 1\n } as LSApiElement : target\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 gapHorizontal(spacing: number) {\n const sorted = this.dataItem.sort((a, b) => a.top - b.top);\n\n var buffer = sorted[0].left;\n\n const diffs: LSMutateEvent[] = sorted.map(c => {\n const newLeft = buffer;\n buffer = buffer + c.width + spacing;\n const target = {\n ...c,\n left: newLeft\n } as LSApiElement\n\n console.log(target, oob(target));\n\n return {\n action: 'update',\n data: oob(target) ? {\n ...c,\n left: c.pageDimensions.width - c.width - 1\n } as LSApiElement : target\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 distributeVertical() {\n var spacing = this.component.shadowRoot.getElementById('ls-fix-vertical-space') as HTMLInputElement;\n var avgspace = 0;\n const sorted = this.dataItem.sort((a, b) => a.top - b.top);\n\n if (spacing.value !== '') avgspace = parseInt(spacing.value);\n else {\n var space = 0;\n for (var i = 1; i < sorted.length; i++) {\n const c1 = sorted[i - 1];\n const c2 = sorted[i];\n space = space + (c2.top - c1.top - c1.height <= 0 ? 0 : c2.top - c1.top - c1.height);\n }\n avgspace = Math.floor(space / sorted.length);\n }\n\n var buffer = sorted[0].top;\n\n const diffs: LSMutateEvent[] = sorted.map(c => {\n const newTop = buffer;\n buffer = buffer + c.height + avgspace;\n const target = {\n ...c,\n top: newTop\n } as LSApiElement\n\n return {\n action: 'update',\n data: oob(target) ? {\n ...c,\n top: c.pageDimensions.height - c.height\n } as LSApiElement : target\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 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'}>Distribution</p>\n <p class={'ls-field-properties-section-description'}>Multi-select fields and evenly space them out</p>\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.distributeVertical();\n }}\n aria-label=\"Distribute selected fields vertically.\"\n data-tooltip-id=\"le-tooltip\"\n data-tooltip-content=\"Distribute selected fields vertically.\"\n data-tooltip-place=\"top\"\n >\n <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.distributeHorizontal();\n }}\n aria-label=\"Distribute selected fields horizontally.\"\n data-tooltip-id=\"le-tooltip\"\n data-tooltip-content=\"Distribute selected fields horizontally.\"\n data-tooltip-place=\"top\"\n >\n <ls-icon name=\"field-distribute-horizontally\"></ls-icon>\n </button>\n </div>\n </div>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Gap</p>\n <p class={'ls-field-properties-section-description'}>Define the exact gap between multi-select fields.</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"field-distribute-vertically\"></ls-icon>\n <input type=\"number\" class={'has-leading-icon'} id=\"ls-fix-vertical-space\" onChange={(e) => {\n this.gapVertical(parseInt((e.target as HTMLInputElement).value));\n }} value={''} size={4} min={0} max={9999} />\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"field-distribute-horizontally\"></ls-icon>\n <input type=\"number\" class={'has-leading-icon'} id=\"ls-fix-horizontal-space\" onChange={(e) => {\n this.gapHorizontal(parseInt((e.target as HTMLInputElement).value));\n }} value={''} size={4} min={0} max={9999} />\n </div>\n </div>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

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

@@ -7,16 +7,23 @@ export class LsFieldFooter {
     dataItem;
     mutate;
     update;
+    selectFields;
     deleteField = () => {
         this.update.emit([{ action: 'delete', data: this.dataItem }]);
         this.mutate.emit([{ action: 'delete', data: this.dataItem }]);
     };
     duplicateField = () => {
-        this.update.emit([{ action: 'create', data: { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) } }]);
-        this.mutate.emit([{ action: 'create', data: { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) } }]);
+        const newItem = { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) };
+        const newTop = this.dataItem.top + this.dataItem.height;
+        if (newTop + this.dataItem.height < this.dataItem.pageDimensions.height) {
+            newItem.top = newTop;
+        }
+        this.update.emit([{ action: 'create', data: newItem, select: 'clear' }]);
+        this.mutate.emit([{ action: 'create', data: newItem }]);
+        // this.selectFields.emit([newItem]);
     };
     render() {
-        return (h(Host, { key: '71d3ecbf124d31efdd15641f46406cc19ef2fad9' }, h("div", { key: '9e44d8fa9c1b18199d49ff59f7d9e89cb596a360', class: 'button-footer' }, h("button", { key: '3e9fc08011e29e1efd6803f9a03b85dc1209c242', class: 'secondary', onClick: () => this.duplicateField() }, h("ls-icon", { key: '9a457d4bca28dcdbe708b32864a66bf690a7212c', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: '05743aea386445a51c808baced5dc540f9c323a1', class: 'destructive', onClick: () => this.deleteField() }, h("ls-icon", { key: '7be1455b97f1768ce615474794e0b7dd75a4ecf3', name: "trash", size: "20" }), "Delete")), h("slot", { key: '54a62065f104f644ab6454a801a0ed913205009e' })));
+        return (h(Host, { key: '8cb31207e999dc865fb83cb472d77519cd957fdb' }, h("div", { key: 'cdb9ade290c3c1cbe613d5c2f04698d16cf2131e', class: 'button-footer' }, h("button", { key: '6f8db1780d9f860a7d3fa407355fde33cd48c11c', class: 'secondary', onClick: () => this.duplicateField() }, h("ls-icon", { key: '7b01415cc8b7be376445c97e4d2b24788afb3e3a', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: '0447898646ae162dd58ca46befcd468b39af2a1a', class: 'destructive', onClick: () => this.deleteField() }, h("ls-icon", { key: '65074ed995a57053602d665f036fd7280708860d', name: "trash", size: "20" }), "Delete")), h("slot", { key: 'c786084652dfac87fad5ada66808496a3b1aa1dd' })));
     }
     static get is() { return "ls-field-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -101,6 +108,27 @@ export class LsFieldFooter {
                         }
                     }
                 }
+            }, {
+                "method": "selectFields",
+                "name": "selectFields",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSApiElement[]",
+                    "resolved": "LSApiElement[]",
+                    "references": {
+                        "LSApiElement": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::LSApiElement"
+                        }
+                    }
+                }
             }];
     }
 }

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

	@@ -1 +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;~~IAEtC~~,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,IAAI,CAAC,~~MAAM~~,~~CAAC~~,IAAI,CAAC,~~CAAC~~,~~EAAE~~,MAAM,~~EAAE~~,~~QAAQ~~,EAAE,~~IAAI~~,EAAE,~~EAAE~~,GAAG,IAAI,CAAC,QAAQ,~~EAAE~~,~~EAAE~~,~~EAAE~~,IAAI,CAAC,~~KAAK~~,GAAG,MAAM,CAAC,~~UAAU~~,~~EAAE~~,CAAC,~~EAAE~~,EAAE,CAAC,CAAC,CAAC;~~QAC5G~~,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,~~GAAG~~,~~IAAI~~,CAAC,~~QAAQ~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,IAAI,CAAC,~~KAAK~~,~~GAAG~~,MAAM,~~CAAC~~,~~UAAU~~,EAAE,~~CAAC~~,EAAE,EAAE,CAAC,CAAC,CAAC;~~IAC9G~~,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 deleteField = () => {\n this.update.emit([{ action: 'delete', data: this.dataItem }]);\n this.mutate.emit([{ action: 'delete', data: this.dataItem }]);\n }\n\n duplicateField = () => {\n ~~this.update.emit([{~~ ~~action:~~ ~~'create',~~ ~~data:~~ { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) } }]);\n this.~~mutate~~.emit([{ action: 'create', data: { ~~...~~this.~~dataItem,~~ id: ~~btoa(~~'~~ele~~' + ~~crypto.randomUUID())~~ } }]);\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"]}
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"]}

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

@@ -4,6 +4,17 @@ export class LsFieldFormat {
     mutate;
     update;
     component;
+    // Send selection changes to bars and panels if in use.
+    selectFieldsHandler() {
+        if (this.dataItem.length > 0) {
+            var selFont = this.component.shadowRoot.getElementById('ls-toolbar-font-select');
+            if (selFont)
+                selFont.value = this.dataItem[0].fontName;
+            var selFontSize = this.component.shadowRoot.getElementById('ls-toolbar-font-size');
+            if (selFontSize)
+                selFontSize.value = this.dataItem[0].fontSize.toString();
+        }
+    }
     // Send one or more mutations up the chain
     // The source of the chain fires the mutation
     alter(diff) {
@@ -16,25 +27,25 @@ export class LsFieldFormat {
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: '9830d08c3b141b3180280179ba118f2aff5172f0' }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: 'f125719127e3f8b014cff454bce8fa432dba8570', class: 'ls-field-format-bar' }, h("div", { key: '66e387c55b1d9ce916e6944938fbedec7b60df8c', class: " input-wrapper" }, h("ls-icon", { key: 'ca4b833a2507e878c35ebf5940beef0ecd2c7776', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: 'fcba8b29e969fac7a9acbbeb855d28eeed20ea1f', onChange: input => {
+        return (h(Host, { key: 'db560de41ff6135ddfc7cd24bee0428393612506' }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: '4ea46f8e884a76f7683707f02fd175bbb841a7c4', class: 'ls-field-format-bar' }, h("div", { key: '8004f0b99e69619878b40a4f6a25ccffb76f64cc', class: " input-wrapper" }, h("ls-icon", { key: '8c2a1ecc4b2895217b1a5fbc06b765ee640f57f6', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: 'e9d63ce0c9bf0f807f8843a546615663f6fe0810', id: 'ls-toolbar-font-select', onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, h("option", { key: '33bab119c584bbd70959f01c0a86f47a8472304c', value: "arial" }, "Arial"), h("option", { key: '2665a63ab41a4bab8ef59b85dd944495585aba6b', value: "liberation sans" }, "Liberation Sans"), h("option", { key: 'dc387a4e0ddd99d2344ef27feef9628286cc1cc3', value: "courier" }, "Courier"), h("option", { key: 'c00614f48ddea8e534b14c25880d3a7563f88558', value: "helvetica" }, "Helvetica"), h("option", { key: '0558b3283a7654bf6101cd3e31ff633ed4ad7c02', value: "verdana" }, "Verdana")), h("ls-icon", { key: '0db075666eaf2ebfba3d24cf15c8607907d568fe', id: "selectorIcon", name: "selector" })), h("div", { key: 'ac4632fa34024e3576a882c257e2b633dd39ca23', class: "input-wrapper" }, h("ls-icon", { key: '49f56b4031bac85b8d3f240ca38b45e6016517f8', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: '6f1c5fbcbe572c49d4343ea7cba63cfe15511404', width: "30", size: 4, class: 'has-leading-icon' })), h("div", { key: '3b7c4400dd7bb04751decbf8ad8ea49154c9094f', class: 'button-group' }, h("button", { key: 'd0421795af81429299836e36993534b71d094cc4', onClick: () => {
+            }, class: 'has-leading-icon' }, h("option", { key: '57414b268d83f98ba372970a44b01e6564e3f204', value: "arial" }, "Arial"), h("option", { key: '0ea33343c8b48361730103a0f57b451ce9e2b082', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '41594d03ec8bfb0d30374ab12f524ef083982ab0', value: "courier" }, "Courier"), h("option", { key: '266d0e85da5f80b73fedbadb2c1d049bff226036', value: "helvetica" }, "Helvetica"), h("option", { key: '75078832a92fb69d4e6dbe175f9fefb6ba7b36b8', value: "verdana" }, "Verdana")), h("ls-icon", { key: '82e48e668a00ab951a5ab0a8cc8f4704a19d7a08', id: "selectorIcon", name: "selector" })), h("div", { key: 'c017c1fb108b13f531efcf75264a4d7a4871d6e1', class: "input-wrapper" }, h("ls-icon", { key: '84bd33a74b0332b795d921b481f805a57ef2cfef', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: 'f5e5ac7505bef63d6dc46ab6b6839bac1f8cd74b', id: 'ls-toolbar-font-size', width: "30", size: 4, class: 'has-leading-icon' })), h("div", { key: '9e662def8efd6e8bace2f279ea4b5b15a2fe94ca', class: 'button-group' }, h("button", { key: '3d4ad30a8ec41eb4a1d525eeb53bc8f8757f0c69', onClick: () => {
                 this.alter({ align: 'left' });
-            } }, h("ls-icon", { key: '10b2b34fdf03fdab5f9938b1352a617ff1a8979d', name: "menu-alt-2" })), h("button", { key: '5965c9b86e64cd39a81d1334992daf63b08dcadd', onClick: () => {
+            } }, h("ls-icon", { key: '338e02bcf2b1ee58167fb54a1cf0c168a45ab80d', name: "menu-alt-2" })), h("button", { key: '594f8af91b7a82b3c67c5e86e0d41307beeb2e71', onClick: () => {
                 this.alter({ align: 'center' });
-            } }, h("ls-icon", { key: '95ada12f033106a1b5ff8381a21ab2f4751b8b2d', name: "menu-alt-5" })), h("button", { key: '12c263cf73c90f58f202e99eb28863b7fa44b6c3', onClick: () => {
+            } }, h("ls-icon", { key: '00eb405987271237bf93ec03df7b37cc0d1bdd53', name: "menu-alt-5" })), h("button", { key: 'a27269a2a51b8fe5bccc15f83628d68251006f70', onClick: () => {
                 this.alter({ align: 'right' });
-            } }, h("ls-icon", { key: 'deac6371af9a07eac83385bf769af33f3ac895d7', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: '4d6bb447542540466b47736e2cdd9278f5fb9166', class: 'ls-field-format-bar' }, h("div", { key: 'f33f4da0a2e044cdb19b67e58e458f6bea84a882', class: "input-wrapper" }, h("ls-icon", { key: 'f6af8ec3739e7bce77c1c87a40d02f6696a32613', id: "selectorIcon", name: "selector" }), h("ls-icon", { key: '739d045a9dd6ce8dbb4dd7b67cfe37dd9eb5e638', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: 'e678cccd1b544d4a271bdf099ee546e614acdb33', onChange: input => {
+            } }, h("ls-icon", { key: 'b4403cf793697fa578ba4948339959bced93a936', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: 'c71a0a7dbf4965db5083c2e31892c7d5376ee512', class: 'ls-field-format-bar' }, h("div", { key: 'c182854d46457e7fce5806042bb81ad2a9e2a0cd', class: "input-wrapper" }, h("ls-icon", { key: 'c37ea1cf1fea476864a869aac0ac69147d33e5b6', id: "selectorIcon", name: "selector" }), h("ls-icon", { key: '499ef3629da6bb05dc85bfad4e22f778a1df00a6', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: 'fc9fbf6d744d2e255c252494a8666e461704cb63', id: 'ls-toolbar-font-select', onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, h("option", { key: '8f980c08ba53d7ec68b24205c570fd1d51d2879b', value: "arial" }, "Arial"), h("option", { key: '9ac51a1f5b47745065ab11047381c21c000147b7', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '51625f9069b8a7f9f050a596baaea41026e60e14', value: "courier" }, "Courier"), h("option", { key: '87cfc98d3f120474d5d94800df81371163bdc1c6', value: "helvetica" }, "Helvetica"), h("option", { key: '297c02916456ab9b4ee0534170f18293ffc7022d', value: "verdana" }, "Verdana"))), h("div", { key: '615054d6fad85ed88a0f614d05d217e95a3ed69b', class: "input-wrapper" }, h("ls-icon", { key: 'dbe200893041354ea6d4b0e43903aecd9829cccb', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: '7140be312d065e352cc801dc5355f795f9052df3', width: "30", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
+            }, class: 'has-leading-icon' }, h("option", { key: '40bb53d54f3b5f62ec744ae52bea51d7d5e3ffd1', value: "arial" }, "Arial"), h("option", { key: '0883cd66f56fd0ed76f48c36203cf4e50f5af980', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '72187239ec4a7c296b5ab277d0f19253fc1ac0b6', value: "courier" }, "Courier"), h("option", { key: 'cd43e5e9858a58ed2a4f1b99924c5746c75c438d', value: "helvetica" }, "Helvetica"), h("option", { key: '3a20de6b6937525ae0ec6208888d3956d39bf598', value: "verdana" }, "Verdana"))), h("div", { key: '85d7ee0da79d69fcb24495bff20d6683670f0240', class: "input-wrapper" }, h("ls-icon", { key: '4c9ca20bf707f7a0a7dbebda0cdb7db36db0b289', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: '2489d93094f314de173a1a466f0a4d13a0d34373', id: 'ls-toolbar-font-size', width: "30", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
                 this.alter({ fontSize: input.target.value });
-            }, class: 'has-leading-icon' })), h("div", { key: '1d71bd91f2423f24a9b6ae2768a091ba88b9fac0', class: 'button-group' }, h("button", { key: '591012d14dd298aa6ef60de1026a8fda55947669', onClick: () => {
+            }, class: 'has-leading-icon' })), h("div", { key: 'f8e5d4822460f11eca96b422a5e9d72191421afc', class: 'button-group' }, h("button", { key: '547af4eb1d1c0872dd1dbc3ca68eb92621476ae1', onClick: () => {
                 this.alter({ align: 'left' });
-            } }, h("ls-icon", { key: '8e12a1e29b2bf2c2549aa224c0e189e79635c954', name: "menu-alt-2" })), h("button", { key: '67e49dc4631e3390da677fd35acc830aff2fa4db', onClick: () => {
+            } }, h("ls-icon", { key: '8ba5aecb7fc976ef40aea370d00da31e333566c3', name: "menu-alt-2" })), h("button", { key: 'c1bd4b5bf403e2b88a0a2169b4123aa9d143aa22', onClick: () => {
                 this.alter({ align: 'center' });
-            } }, h("ls-icon", { key: 'e44c688f14e317dc36187e63103cc471da7e7bcd', name: "menu-alt-5" })), h("button", { key: 'a1b000dbce0011ec0da15ce6bfbd414a5020ab22', onClick: () => {
+            } }, h("ls-icon", { key: '598a82c0edc4997d22d9decae45286877c43f136', name: "menu-alt-5" })), h("button", { key: '9f39d1337f27b0d74ef557836d4bcd86eb508696', onClick: () => {
                 this.alter({ align: 'right' });
-            } }, h("ls-icon", { key: '0181dc2fef0afa5b0412234f15363db2f4b33283', name: "menu-alt-3" })))))));
+            } }, h("ls-icon", { key: 'c3518f2e0f2fa51592660a94a1fd49037422a8eb', name: "menu-alt-3" })))))));
     }
     static get is() { return "ls-field-format"; }
     static get encapsulation() { return "shadow"; }
@@ -122,5 +133,11 @@ export class LsFieldFormat {
             }];
     }
     static get elementRef() { return "component"; }
+    static get watchers() {
+        return [{
+                "propName": "dataItem",
+                "methodName": "selectFieldsHandler"
+            }];
+    }
 }
 //# sourceMappingURL=ls-field-format.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ls-field-format.js","sourceRoot":"","sources":["../../../src/components/ls-field-format/ls-field-format.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Host, Prop, h, Element, Event } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n tag: 'ls-field-format',\n styleUrl: 'ls-field-format.css',\n shadow: true,\n})\nexport class LsFieldFormat {\n @Prop({\n mutable: true,\n })\n dataItem: 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 @Element() component: HTMLElement;\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 render() {\n return (\n <Host>\n {this.dataItem && this.dataItem.length > 1 && (\n <div class={'ls-field-format-bar'}>\n <div class=\" input-wrapper\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n <select\n onChange={input => {\n this.alter({ fontName: (input.target as HTMLSelectElement).value });\n }}\n class={'has-leading-icon'}\n >\n <option value=\"arial\">Arial</option>\n <option value=\"liberation sans\">Liberation Sans</option>\n <option value=\"courier\">Courier</option>\n <option value=\"helvetica\">Helvetica</option>\n <option value=\"verdana\">Verdana</option>\n </select>\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n </div>\n <div class=\"input-wrapper\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n <input width=\"30\" size={4} class={'has-leading-icon'} />\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.alter({ align: 'left' });\n }}\n >\n <ls-icon name=\"menu-alt-2\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'center' });\n }}\n >\n <ls-icon name=\"menu-alt-5\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'right' });\n }}\n >\n <ls-icon name=\"menu-alt-3\"></ls-icon>\n </button>\n </div>\n </div>\n )}\n {this.dataItem && this.dataItem.length === 1 && (\n <div class={'ls-field-format-bar'}>\n <div class=\"input-wrapper\">\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n <select\n onChange={input => {\n this.alter({ fontName: (input.target as HTMLSelectElement).value });\n }}\n class={'has-leading-icon'}\n >\n <option value=\"arial\">Arial</option>\n <option value=\"liberation sans\">Liberation Sans</option>\n <option value=\"courier\">Courier</option>\n <option value=\"helvetica\">Helvetica</option>\n <option value=\"verdana\">Verdana</option>\n </select>\n </div>\n <div class=\"input-wrapper\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n <input\n width=\"30\"\n size={4}\n value={this.dataItem[0].fontSize}\n onChange={input => {\n this.alter({ fontSize: (input.target as HTMLInputElement).value });\n }}\n class={'has-leading-icon'}\n />\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.alter({ align: 'left' });\n }}\n >\n <ls-icon name=\"menu-alt-2\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'center' });\n }}\n >\n <ls-icon name=\"menu-alt-5\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'right' });\n }}\n >\n <ls-icon name=\"menu-alt-3\"></ls-icon>\n </button>\n </div>\n\n {/* <select\n onChange={input => {\n this.alter({ align: (input.target as HTMLSelectElement).value });\n }}\n >\n <option value=\"left\">Left</option>\n <option value=\"center\">Center</option>\n <option value=\"right\">Right</option>\n </select> */}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ls-field-format.js","sourceRoot":"","sources":["../../../src/components/ls-field-format/ls-field-format.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Host, Prop, h, Element, Event, Watch } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n tag: 'ls-field-format',\n styleUrl: 'ls-field-format.css',\n shadow: true,\n})\nexport class LsFieldFormat {\n @Prop({\n mutable: true,\n })\n dataItem: 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 @Element() component: HTMLElement;\n\n // Send selection changes to bars and panels if in use.\n @Watch('dataItem')\n selectFieldsHandler() {\n if (this.dataItem.length > 0) {\n var selFont = this.component.shadowRoot.getElementById('ls-toolbar-font-select') as HTMLSelectElement;\n if (selFont) selFont.value = this.dataItem[0].fontName;\n var selFontSize = this.component.shadowRoot.getElementById('ls-toolbar-font-size') as HTMLInputElement;\n if (selFontSize) selFontSize.value = this.dataItem[0].fontSize.toString();\n }\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\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 render() {\n return (\n <Host>\n {this.dataItem && this.dataItem.length > 1 && (\n <div class={'ls-field-format-bar'}>\n <div class=\" input-wrapper\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n <select\n id='ls-toolbar-font-select'\n onChange={input => {\n this.alter({ fontName: (input.target as HTMLSelectElement).value });\n }}\n class={'has-leading-icon'}\n >\n <option value=\"arial\">Arial</option>\n <option value=\"liberation sans\">Liberation Sans</option>\n <option value=\"courier\">Courier</option>\n <option value=\"helvetica\">Helvetica</option>\n <option value=\"verdana\">Verdana</option>\n </select>\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n </div>\n <div class=\"input-wrapper\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n <input id='ls-toolbar-font-size' width=\"30\" size={4} class={'has-leading-icon'} />\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.alter({ align: 'left' });\n }}\n >\n <ls-icon name=\"menu-alt-2\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'center' });\n }}\n >\n <ls-icon name=\"menu-alt-5\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'right' });\n }}\n >\n <ls-icon name=\"menu-alt-3\"></ls-icon>\n </button>\n </div>\n </div>\n )}\n {this.dataItem && this.dataItem.length === 1 && (\n <div class={'ls-field-format-bar'}>\n <div class=\"input-wrapper\">\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n <select\n id='ls-toolbar-font-select'\n\n onChange={input => {\n this.alter({ fontName: (input.target as HTMLSelectElement).value });\n }}\n class={'has-leading-icon'}\n >\n <option value=\"arial\">Arial</option>\n <option value=\"liberation sans\">Liberation Sans</option>\n <option value=\"courier\">Courier</option>\n <option value=\"helvetica\">Helvetica</option>\n <option value=\"verdana\">Verdana</option>\n </select>\n </div>\n <div class=\"input-wrapper\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n <input\n id='ls-toolbar-font-size'\n width=\"30\"\n size={4}\n value={this.dataItem[0].fontSize}\n onChange={input => {\n this.alter({ fontSize: (input.target as HTMLInputElement).value });\n }}\n class={'has-leading-icon'}\n />\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.alter({ align: 'left' });\n }}\n >\n <ls-icon name=\"menu-alt-2\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'center' });\n }}\n >\n <ls-icon name=\"menu-alt-5\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'right' });\n }}\n >\n <ls-icon name=\"menu-alt-3\"></ls-icon>\n </button>\n </div>\n\n {/* <select\n onChange={input => {\n this.alter({ align: (input.target as HTMLSelectElement).value });\n }}\n >\n <option value=\"left\">Left</option>\n <option value=\"center\">Center</option>\n <option value=\"right\">Right</option>\n </select> */}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

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

@@ -49,7 +49,7 @@ export class LsFieldPlacement {
         return this.dataItem[0].pageDimensions[this.dataItem[0].page].height - this.dataItem[0].height;
     }
     render() {
-        return (h(Host, { key: 'bf165db185ff27a97747d35c439acc36f320cec0' }, this.isMultiple(this.dataItem) && (h("div", { key: '28da50141d7f991f3bf1ee51849ca425eaf25a91', class: 'ls-field-properties-section' }, h("div", { key: '9d66acfc9a2c7eed9d4f52d250586c1942e7a3ae', class: 'ls-field-properties-section-text' }, h("p", { key: '7c3d63ca77a43cfddd265d08d12a68b04e899c11', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '6b974149ab31cc52caaddf785d8a151660d11044', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '4ea32eb6799737a8e5962bd814d6e270adfc5a24', class: 'input-row' }, h("div", { key: '60303ebaafc5ea7dcc0bea71a029ef443decad51', class: 'input-wrapper' }, h("ls-icon", { key: 'b55c508d607d9eddec4e870c00c6e2398f724ce4', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: '41c9e975d7050364a5b3f0cca93b002057694645', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: 'ed8258c26042213514cc13f3b2ec5504694de514', class: 'input-wrapper' }, h("ls-icon", { key: '28871226f68e0cb9c547cb3e60347ecb2ab91b92', id: "selectLeadingIcon", name: "y" }), h("input", { key: '90bd7547481fbab4a2bf19d7675b69e67e99b128', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", onChange: e => this.alter({ top: e.target.value }) }))))), this.isSingle(this.dataItem) && (h("div", { key: 'd59db0069032eb21d95be7e7e00fe13a55855b6c', class: 'field-set' }, h("div", { key: '3da316b826b05ca5c40e86c20ac94a041c9e397b', class: 'ls-field-properties-section' }, h("div", { key: '3f25d6a85a54154f7d98b7a8297ea457f3c1d913', class: 'ls-field-properties-section-text' }, h("p", { key: 'efa3e1f4e90cf9b84dc6fae89ed555a8afbe2ef9', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: 'a4cc37bf9765f780e0acc534c881d2a8637285cd', 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: '6694fe7630c8b20a0491d1af1a151a75aeb3eec7', class: 'multi-button-group-row' }, h("div", { key: '29fff0131a1003e441b85f341981e206cb1ee3da', class: 'button-group' }, h("button", { key: '0d551642e5ee2fa1eca06f5b86b61159d906fd0f', onClick: () => { this.alter({ left: 0 }); } }, h("ls-icon", { key: 'a36f8771e366de820758bfee744da9bde4c9e3ae', name: "field-alignment-left" })), h("button", { key: '6a05dafda45385eb977f33427aeb8c7a7d798149', onClick: () => { this.alter({ left: this.center() }); } }, h("ls-icon", { key: '3fda591e0cb4920c20206fa6d8ae2352bd742448', name: "field-alignment-centre" })), h("button", { key: '99a609d8e76626e46f34bf4fcc6542cd16027d46', onClick: () => { this.alter({ left: this.right() }); } }, h("ls-icon", { key: 'e1ff627dccf82333f8f425ab1153cc260f095552', name: "field-alignment-right" }))), h("div", { key: 'bafa35fe910a001ccd76935ab68f37ea83b270e9', class: 'button-group' }, h("button", { key: '4b1de1698106e5accee226cdc7cd7cd2ede94c3c', onClick: () => this.alter({ top: 0 }) }, h("ls-icon", { key: 'bb55c8594838517aca3eb553cd4cb2581c8a1b2e', name: "field-alignment-top" })), h("button", { key: '937656e3a4c586480bdadf187966181585693698', onClick: () => { this.alter({ top: this.middle() }); } }, h("ls-icon", { key: '4b98a2548231d5c5039e1ac5828eac1d98f468d9', name: "field-alignment-middle" })), h("button", { key: 'e805d719c5f88cca065d15fc2ff51d603d0c5d4d', onClick: () => { this.alter({ top: this.bottom() }); } }, h("ls-icon", { key: '7dad1351fbb73624b1d507d8ffee1346ad0f35c6', name: "field-alignment-bottom" }))))), h("div", { key: 'eb263b6ec37c7bcf57d31573c430e0d87db8cc63', class: 'ls-field-properties-section' }, h("div", { key: '79106d27e3afa8cbe58cc1b0d24a9a691f3631e4', class: 'ls-field-properties-section-text' }, h("p", { key: '1d6f966bbc0e560654ff10ab116b58bd657efeb8', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '2ec6eba189500c660d982b61b6cd9c642f9b1495', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: 'f05b96e1b921964dd71f68887441aa7433cf6eba', class: 'input-row' }, h("div", { key: 'abd5ed8c84c17023a69cc6efa7365fde3c740dd7', class: 'input-wrapper' }, h("ls-icon", { key: 'f4674ea809efbb46dc5bbf32b3c2d050341cf2f8', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: '2f34f8e1f424f58d16b81d0323df2c5f429a6015', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: '42889a206d59f970040f95d34f0c4804797fb846', class: 'input-wrapper' }, h("ls-icon", { key: '05687fb70acbb665a96fe5f5a246a102b65f743f', id: "selectLeadingIcon", name: "y" }), h("input", { key: '46367dbecf5f7177391f942279a7a7d58b7d8e28', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }), width: "30" })))), h("div", { key: 'ff92c96808e8ab1f5e9f1d12f945cf3b50617d00', class: 'ls-field-properties-section' }, h("div", { key: 'b5cc48867cf12657186c938ae0827202b7700d40', class: 'ls-field-properties-section-text' }, h("p", { key: '3b09f573e94322e972e36f0486d92a279b68a28f', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: 'fe759b355b5ce3f24a9ee70c94bc3b40daffa418', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '8fc1f92da89df534a867c3d44e4d63a904803baa', class: 'button-group' }, h("button", { key: '6717e349f2f0c4eeb21d6256a1d1cb39faf8f770', disabled: true }, h("ls-icon", { key: '72fc889318415749f805db95ceca3487cb26eb98', name: "field-distribute-vertically" })), h("button", { key: '55a4fde0120b963ed9f07dd8490f1abbf44b5540', disabled: true }, h("ls-icon", { key: 'c3a7a795d6d9da295fd4c7aaef5bf1843b13a26e', name: "field-distribute-horizontally" })))), h("div", { key: '57184185505c6dfe16322b8d6b59c3fedf30ef65', class: 'ls-field-properties-section' }, h("div", { key: 'd0522de83bfa4a5b6bef87072658f511600c9aa7', class: 'ls-field-properties-section-text' }, h("p", { key: 'cd7880e2f53b6452c5fb136d6a4eaecee7f4403c', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: '019e02dcdb5fe4ae4c4aad9f3deacab084c2b306', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '8e566f1e91410ee3cb82b4e4c0a0c27e34ffac03', class: 'input-row' }, h("div", { key: '811db7eb6e7b3edf49015440814c222a04e88f45', class: 'input-wrapper' }, h("ls-icon", { key: '1b7b4c849995b07da7125b4f9e8d95d20430e043', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), h("input", { key: '2a61868d165b84d85064d5ce30d60502ef702610', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), h("div", { key: 'c174ddc8fde35fdef12602d22c0f4330392372fa', class: 'input-wrapper' }, h("ls-icon", { key: 'e540dbbae07e64eb0bae816a54775d939a588e82', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), h("input", { key: '8b3d0cf223379a4ed8fd7561af482b5a7b2731c3', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true }))))))));
+        return (h(Host, { key: 'c9dc68e4e38efb9c800c3162750fda48a679f24d' }, this.isMultiple(this.dataItem) && (h("div", { key: 'b8000d7a209d1b48483c567b9476d264df95cfb8', class: 'ls-field-properties-section' }, h("div", { key: '63b627e957a7cc4e498f4d647d7f097ab46447d0', class: 'ls-field-properties-section-text' }, h("p", { key: 'b2b4d8cabf3b4136bfd8f24a971e37915f831130', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '39036ea300acacb68af52a8a7f3c74bfab636ca9', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '406a42a6eba6512b4a0aab8af66c7f6c3dba7389', class: 'input-row' }, h("div", { key: '3c1f0599222c5105f345202a453dbe47459e3d08', class: 'input-wrapper' }, h("ls-icon", { key: '1b72436b61075143fcf71aa25c560dda48729b93', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: 'dbc911eb99b0fb11f618b853610ea61501f248e4', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: '6f805235eedb1ed975a1dd124ed306785cfbc738', class: 'input-wrapper' }, h("ls-icon", { key: 'a09edcec36df6f3541bb99744c1c03b9ac25809d', id: "selectLeadingIcon", name: "y" }), h("input", { key: 'aafc5b2376c78ac269f3bcbec76f654132a1ed31', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", onChange: e => this.alter({ top: e.target.value }) }))))), this.isSingle(this.dataItem) && (h("div", { key: 'e6aefc1f92c9052740ef11a7b68cd437e6cacb62', class: 'field-set' }, h("div", { key: '998c00036ff931841dbee535816d70cc1c13f341', class: 'ls-field-properties-section' }, h("div", { key: '859c5e6195da6aae05f212325cc887a9e6d98b5a', class: 'ls-field-properties-section-text' }, h("p", { key: 'fe1e0776b11bc989a025c598910ab3881876de5a', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: '43a1ae930fd8e07e99af9e03adc82d4032a33fd2', 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: '7a95a01f785eb50a9287457906a6889b7d6a3033', class: 'multi-button-group-row' }, h("div", { key: '504071b40528fd4399755a0af9b1a9ff4f279c5f', class: 'button-group' }, h("button", { key: 'efd3e2aa445a03fce18474c28a07fa7b8687a0c7', onClick: () => { this.alter({ left: 0 }); } }, h("ls-icon", { key: 'e11ff3e4dbe3d6677e117e9b683ee9840f870c26', name: "field-alignment-left" })), h("button", { key: '258b9fb3c78c835fd1e281df90e2984cfb08ef40', onClick: () => { this.alter({ left: this.center() }); } }, h("ls-icon", { key: 'f22b23fd59c5c74baeb42bf60614a06cb4483178', name: "field-alignment-centre" })), h("button", { key: '0b80020e7d7d775c48634d5cb5754f3edce44008', onClick: () => { this.alter({ left: this.right() }); } }, h("ls-icon", { key: 'd8ae12c4670eb1e6e1cf65cfa5c2a5e9f123c261', name: "field-alignment-right" }))), h("div", { key: '2519a99c8563e99c118a250da6747f2b6076de61', class: 'button-group' }, h("button", { key: '6d92cb364078ad0f33e3d22e8753d43d49c96663', onClick: () => this.alter({ top: 0 }) }, h("ls-icon", { key: '21468552b013129c3df35c09871ba9132fb91873', name: "field-alignment-top" })), h("button", { key: 'f040000cfca80f27a5e0bb6169a2111c71a8f1d4', onClick: () => { this.alter({ top: this.middle() }); } }, h("ls-icon", { key: 'b6c5d151dda019ea8d6d912a9fe2677646b7374b', name: "field-alignment-middle" })), h("button", { key: 'a9246e1659fe5e4e0fdd0a03ed5772408bbc7c02', onClick: () => { this.alter({ top: this.bottom() }); } }, h("ls-icon", { key: '1f7933380d6fbfc524cdebc7f86fa1f74ebf1395', name: "field-alignment-bottom" }))))), h("div", { key: '8bf879e9ce04d81f0f5b6df99566a41be51ed470', class: 'ls-field-properties-section' }, h("div", { key: 'a7fee5248dab7322aa5fef2ff2f1dcf91728ee33', class: 'ls-field-properties-section-text' }, h("p", { key: 'b8eb47ce94ec9d00e776ac505686666c430aac61', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '17f950776fa0207b9c66a6d6a911e67b1b66c86d', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: 'da01c959b6265147ed9d90a050401f36228a283d', class: 'input-row' }, h("div", { key: '4dac7c60fdaa4493de9b42401dfacdb031c38a25', class: 'input-wrapper' }, h("ls-icon", { key: '11e8d9bacb897bb04f12b818448eeb039bbf7a47', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: '24b67407ed28079cf4f5d873c2c771b8f15d8a9c', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: 'f80ae951bd8f5e8e219aa480a4a16ff55f46d8ab', class: 'input-wrapper' }, h("ls-icon", { key: 'b86661a641e357a9b0867d65b4ccee62bea4e44e', id: "selectLeadingIcon", name: "y" }), h("input", { key: 'd2357ca6884f20d72bfb3dbbaa1a14ed797f646b', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }), width: "30" })))), h("div", { key: '5a10ba1fa5515601b24343d0b1bf54a97ca29bb3', class: 'ls-field-properties-section' }, h("div", { key: '4b23811405359d00533810851c817939258e7e25', class: 'ls-field-properties-section-text' }, h("p", { key: '328d03492253d0aa58e1155b02fc29efb057c9f8', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: 'e2fecc82d431ee3756d502d45b143b900313ac15', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '2c8ba1520ce6aad2c6d96c97b00c3f54e6820b51', class: 'button-group' }, h("button", { key: '69187c8725b6b545ae9cb724b1deaf74e8d9cc88', disabled: true }, h("ls-icon", { key: 'c3d9cdccfb4fb61acd39d941f4d8a4cec449f075', name: "field-distribute-vertically" })), h("button", { key: '72bdb68d15e0e10233dd763c1428cad730a744c7', disabled: true }, h("ls-icon", { key: '1d07a51d8b73bf486f286bfc2d6adfa09038305d', name: "field-distribute-horizontally" })))), h("div", { key: '0776885c8c491e8717548a2e4287403a96488cc4', class: 'ls-field-properties-section' }, h("div", { key: '3ba1d1ea93a606de7b7a533326465e18487e5560', class: 'ls-field-properties-section-text' }, h("p", { key: 'c31cba25f48fdcfe8883443ddecc82e7be4378f4', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: '5f6998f21adb8803857a79e6da129022905a8c87', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '194a8a16e88493b7b4960fa7ab5ceba6e95b78d9', class: 'input-row' }, h("div", { key: '19862c6084d6fd681ce71bf0e5ba6c2141807d49', class: 'input-wrapper' }, h("ls-icon", { key: 'fc168bd1174daddec9d761b1d8692b69d37cf331', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), h("input", { key: '9ce4fe9e1ea759eb867adde5d5360dd3534ebbd0', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), h("div", { key: '54eea8b43335fe796755f36f66ce6828479c137f', class: 'input-wrapper' }, h("ls-icon", { key: '9f94c55ced5a9d3fe43b472a7fcc9f9d7c830fad', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), h("input", { key: 'eb65a84f010fc9f5abfa8fd5fd369cdad2b9670d', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true }))))))));
     }
     static get is() { return "ls-field-placement"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ export class LsFieldProperties {
             return h("ls-field-properties-multiple", { dataItem: this.dataItem });
     }
     render() {
-        return (h(Host, { key: '81a4f69d51691f6bb43ad01c130207fa0bdb71c7' }, this.dataItem && this.renderFields(), h("slot", { key: '53546d9623461dcc729c2fcd838fc0b885f19df8' })));
+        return (h(Host, { key: '343f2bcd85679323218afc9d2db60127c6f12189' }, this.dataItem && this.renderFields(), h("slot", { key: '455d1ddc501882eaf00e864174e5f867f3a96c13' })));
     }
     static get is() { return "ls-field-properties"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,7 +37,7 @@ export class LsFieldPropertiesAdvanced {
         return '';
     }
     render() {
-        return (h(Host, { key: '92737a84b80d8010a6287f30945f9df9952fe550' }, h("div", { key: 'e5f3a70117500194d06dcca2517a6d80456958dc', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, h("ls-icon", { key: 'f1d233d3156888ecacb0e1f479e2bfbce6d3abb9', name: this.expanded ? 'expand' : 'collapse', size: "20", solid: true }), h("p", { key: '79a344a0919ce2bea99dbe479f6bfc94f40e64a0' }, "Advanced Properties")), this.expanded && (h("div", { key: '19ed81c0c6d5eec89f7ed791a54e72ac9d28df85', class: 'field-set' }, h("ls-props-section", { key: '2874e24e5c14103feddec461b705d14947d94e90', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, h("input", { key: '244706dccaf95e064329dbce846bf095e74305b4', value: this.getValue('fieldOrder'), type: "text", placeholder: "eg. 1", onChange: e => this.alter({ fieldOrder: e.target.value }) })), h("ls-props-section", { key: 'cc12de5c345f5fe2eacc578a20e9fc29c9bdc53a', sectionTitle: "Ref. Name" }, h("input", { key: '75ec554e0527e4e86bc431d8e11a48e21bb797d4', value: this.getValue('link'), placeholder: "eg. checkbox group", onChange: e => this.alter({ link: e.target.value }) })), h("ls-props-section", { key: '0c1c05a72edf3f40cf1ab4376245de848f2ba3ab', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, h("select", { key: '01f06a4736e7e84bb9450390d4e67483c57ec76c', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, h("option", { key: '0a460d22381e54bf3e51127ddfd9f99173b2c30c', value: "0", selected: this.getValue('linkType') === '0' }, "None"), h("option", { key: '9c9eed5cfb5567137f20470ac0fa906d2497fc4b', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), h("option", { key: '2cbc05b68dd4c6c2ae06b14eb450d37b3862b1b8', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), h("option", { key: '693934edcc5fd525a6db7112c4b9f5891c286cd5', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), h("ls-props-section", { key: '8cff7358763a8673a435596ceb8e2fe72e05d634', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, h("input", { key: '06606d2f951fd737ac14bb74fa49eeedb082c1a4', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
+        return (h(Host, { key: '24a4b2e3c09727279e41c27327baea962cdcb890' }, h("div", { key: 'd30d9fcbf06c72ffa6401c0eca4d0519478c831a', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, h("ls-icon", { key: 'b1efd67b7585db8fe2e411ef06a0b8441aa9e1b1', name: this.expanded ? 'expand' : 'collapse', size: "20", solid: true }), h("p", { key: 'd08068f7153f435dc3a2a9fa0615caddf00e8535' }, "Advanced Properties")), this.expanded && (h("div", { key: '59f04073ef608af89f5208be35a6641701449123', class: 'field-set' }, h("ls-props-section", { key: '15d9123478373bb244069627c33ea8033475f8d0', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, h("input", { key: '79298a0173c339135c508cf9e2f9b0d74d2ce192', value: this.getValue('fieldOrder'), type: "text", placeholder: "eg. 1", onChange: e => this.alter({ fieldOrder: e.target.value }) })), h("ls-props-section", { key: '42a97b7f82ec0fba718f3f20858d9f006eef1c96', sectionTitle: "Ref. Name" }, h("input", { key: '597a243802fa0d9d14f9686dcb6c53c5bd60026f', value: this.getValue('link'), placeholder: "eg. checkbox group", onChange: e => this.alter({ link: e.target.value }) })), h("ls-props-section", { key: '8d07374186f3d10621fbb19e14d1c95eb79d3c61', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, h("select", { key: '30b04fd609f6e301e090bec1b063ba06d821e768', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, h("option", { key: '937e2ab3ee370623e22e3f2da8aff7aa9824cf2a', value: "0", selected: this.getValue('linkType') === '0' }, "None"), h("option", { key: 'b69255b06207a1748ff9ce54f380e21b0f87b456', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), h("option", { key: 'b27aecfc5e9814aa5e1cd29154721decd98a907d', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), h("option", { key: '463e6556da3a8b81a7f9612830157b8e53491bd0', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), h("ls-props-section", { key: '9056d087b11e42dd5cd4809b560989f77f67d6df', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, h("input", { key: '3dcf0a33eecffe721849b4f3ea1c95cdbf6f545e', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
     }
     static get is() { return "ls-field-properties-advanced"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class LsFieldPropertiesAutosign {
     dataItem;
     render() {
-        return (h(Host, { key: '1370a689bd756a7b3322b8a0b79eaf2ca8daef97' }, h("div", { key: '7f9c66dd492d817a9ca731eb439ebae63542de03', class: "ls-field-properties-section" }, "Self Sign Field"), h("div", { key: 'd4b7a971288792aa196c7fd86ff4ae34359b9400' }, "Label: ", h("input", { key: '741c908b66ce73466ef3d8554b1259b1dfb9ad99', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: 'efc52c57c322088a72c40440eb1d564687f0d3fe', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: '5c96421fce1126fd6c6c618155cc8f5ed41e2ca7', dataItem: this.dataItem }), h("ls-field-footer", { key: '1806381c74a36eecfd1a2db9df7294fb0ca1b58f', dataItem: this.dataItem }), h("slot", { key: 'a0047935845af09666dde9a82076bb4141b9eb55' })));
+        return (h(Host, { key: 'df46931c369890f5abf0d25bd9fa8a8ad85ad68c' }, h("div", { key: '2f0d8d99305c136efd368327b8fd333435f068dd', class: "ls-field-properties-section" }, "Self Sign Field"), h("div", { key: 'bd70079d45b70bd3a2c18a148507757bee9f5973' }, "Label: ", h("input", { key: '108a5cc6158af4cb6a37c8f5678039bb354ec591', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '3952b6ca0af4d444243f3c1d821ff72b74ad0100', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: '95df9502c26ca62a8ad46f946742c84555e9c40a', dataItem: this.dataItem }), h("ls-field-footer", { key: '8394977015e41a56d4896d6810e96c4df13c2ae2', dataItem: this.dataItem }), h("slot", { key: 'c6974754a07f99372795a71d9ec370bcbd345a08' })));
     }
     static get is() { return "ls-field-properties-autosign"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ export class LsFieldPropertiesContainer {
         }
     }
     render() {
-        return (h(Host, { key: 'bd5cdce632c977e1fc528c9dc019957d693faf94' }, this.tabs.length > 1 && (h("div", { key: '971328b1f38c3693934665bcefb84133da76d04f', class: 'tabs-container', style: { gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` } }, this.tabs.map(tab => (h("button", { class: tab === this.selectedTab ? 'ls-tab active' : 'ls-tab', onClick: () => (this.selectedTab = tab) }, tab))))), h("div", { key: '096910732325077d5d22526d4928ad7ce9c9d7d8', class: 'scrolling-container' }, h("slot", { key: '0d5a8ae8dfc46e2e469d46140e2d6b2a5ecd3aad', name: this.selectedTab }))));
+        return (h(Host, { key: '0603644fbc51f89389ddc25dd5b1371730feaeef' }, this.tabs.length > 1 && (h("div", { key: '602100153a470e329145e69bd38d200cc62daa7b', class: 'tabs-container', style: { gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` } }, this.tabs.map(tab => (h("button", { class: tab === this.selectedTab ? 'ls-tab active' : 'ls-tab', onClick: () => (this.selectedTab = tab) }, tab))))), h("div", { key: '2e63a3beabdcbaa4e7b15651ecdd0c583229d44f', class: 'scrolling-container' }, h("slot", { key: '4e891478873ea12a5c91e7ba4e45cbfc1398f149', name: this.selectedTab }))));
     }
     static get is() { return "ls-field-properties-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class LsFieldPropertiesDate {
     dataItem;
     render() {
-        return (h(Host, { key: 'c5f6d6f13a8420c7db262219a47dd8546a44fbba' }, h("ls-field-properties-container", { key: '1913c379eee8558d303bc72dad7a73a2c39f9810', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: '7aff7b10b7ec6b52cb3772853812a2e30539677f', class: 'field-set', slot: "content" }, h("ls-field-content", { key: '01361d60d1ad587f3db804e0758d1ced9bd46452', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: '64269c2cb83224a402bfa870d11c098a24f5b513', dataItem: this.dataItem })), h("div", { key: 'a927e9e6813aaebcd133c229da7fb29ad18587b6', class: 'field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: '48cf4bc0db59aace10a15c04a3d05d7cabe418e1', dataItem: this.dataItem })), h("div", { key: '52c47bc5b278587c507c365bc431e85202d3d84d', class: 'field-set', slot: "placement" }, h("ls-field-placement", { key: 'df3137d33d4184f6e2cbb80d963ca3a7e568e74c', dataItem: this.dataItem }))), h("ls-field-footer", { key: '6a69a59eddc45ec3210272c1ff17eed12fdbbde7', dataItem: this.dataItem })));
+        return (h(Host, { key: '36e129289aa11e64e2bd75fd1309439b3a520457' }, h("ls-field-properties-container", { key: '809c2b386857b610fd9e871e6579eb84e7d9feeb', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: 'ac2c345789f21e600ecbd4f55d2b55801a8e5a80', class: 'field-set', slot: "content" }, h("ls-field-content", { key: '2a1aa657a4f802f4ad34baac2031b71330f2ab82', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: '6032597ec4c0a36c12b044acc27da1373ede3348', dataItem: this.dataItem })), h("div", { key: '2becaa0335ce5a94dddc5f7c8dde19821801c520', class: 'field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: '5af127cb268acdd44e08845339fb33b8656aca96', dataItem: this.dataItem })), h("div", { key: 'b35e78ff494db8e0688b7ce1c1a75f21ed176e13', class: 'field-set', slot: "placement" }, h("ls-field-placement", { key: '067d2bdf244f537716d6916663357636bd551e00', dataItem: this.dataItem }))), h("ls-field-footer", { key: '53cbced3ec835b84dcd23c91ceef8345f6a040de', dataItem: this.dataItem })));
     }
     static get is() { return "ls-field-properties-date"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class LsFieldPropertiesDropdown {
     dataItem;
     render() {
-        return (h(Host, { key: 'c1ab59ad6b79b2fecaae2fffd5108d602ec14ceb' }, h("ls-field-properties-container", { key: '3c86ce478880b23bb8771d591faeffb14ff2db7c', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: '884057f73adceaaae582ec594bf117affe441f02', class: 'field-set', slot: "content" }, h("ls-field-content", { key: '13bb7892a21cd977575ea46c6e645a56d5242bb9', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: 'cdfe2d4524e7293bf93f6f6a2c5816a219a4a128', dataItem: this.dataItem })), h("div", { key: '968daa4add075ff079900e533ce0f5a0db99881b', class: 'field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: '8378a43361273604de3fbbef31da3c04db10f174', dataItem: this.dataItem })), h("div", { key: 'ed173795d8e58099ec9d2a82c1e34480972b82e0', class: 'field-set', slot: "placement" }, h("ls-field-placement", { key: '3420ef7f284592438cc5199d21cd7aecd6b37936', dataItem: this.dataItem }))), h("ls-field-footer", { key: '55f04ce7d1bd8a150cd9eae25ed212ffcf46e012', dataItem: this.dataItem })));
+        return (h(Host, { key: '2814d90b98031f52b7318897e14f98fec3228c12' }, h("ls-field-properties-container", { key: '6915ed5bad2f05a7c3b7e0af81750d6c8f9bfe97', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: '456c31361aacb5aa57a4ee4953d150681f93fdca', class: 'field-set', slot: "content" }, h("ls-field-content", { key: '16d0bfb3f17f534ee4006bd8883dc0cd0b775ffd', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: 'f363b12119a77378eba81d5221491860e5dfa40f', dataItem: this.dataItem })), h("div", { key: '7a860cd99bcc749608e2c9ef9e06340896f64b82', class: 'field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: 'f489461f00ebc8f040ba3f20c0f2dadc0214b936', dataItem: this.dataItem })), h("div", { key: 'c3517702b32c387fd0732cb9eff6035d658ad909', class: 'field-set', slot: "placement" }, h("ls-field-placement", { key: '2818dfa478278557b24533eec549896bdc71d1ec', dataItem: this.dataItem }))), h("ls-field-footer", { key: '343540780beaca0a388b3b87e7955fec4edaa7a5', dataItem: this.dataItem })));
     }
     static get is() { return "ls-field-properties-dropdown"; }
     static get encapsulation() { return "shadow"; }