legalesign-document-viewer 0.4.9 → 0.5.0

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

@@ -3,7 +3,6 @@ import { attachAllTooltips } from "../../utils/tooltip";
 export class LsFieldFormat {
     dataItem;
     mutate;
-    update;
     component;
     handleKeyDown = (event) => {
         event.stopPropagation();
@@ -32,7 +31,6 @@ export class LsFieldFormat {
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
-        this.update.emit(diffs);
     }
     componentDidLoad() {
         attachAllTooltips(this.component.shadowRoot);
@@ -47,31 +45,31 @@ export class LsFieldFormat {
         return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed' };
     };
     render() {
-        return (h(Host, { key: 'f09669b903371ee341bcad9d0c690c73564796fc', onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: 'c88a63694f4c7badef501d1d6e6065e1e2f8b0c1', class: 'ls-field-format-bar' }, h("div", { key: '14b3550fa16813865c4640bf789ec59de23f9841', class: "input-wrapper", "data-tooltip": "Font Family" }, h("ls-icon", { key: 'cb1c66047558d46587d5ed10858e5de853930d2f', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '467779af8ae5de655a3f94eaa1d93401c8c21b6e', id: "ls-toolbar-font-select", onChange: input => {
+        return (h(Host, { key: '2febff4877dec0adfb5d71c5f98064739e1cb048', onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: '40ecbca3f11893001206f172fdcc095dcbb8cc80', class: 'ls-field-format-bar' }, h("div", { key: '50365c3d96ece24129314ed7362a12732c90adf8', class: "input-wrapper", "data-tooltip": "Font Family" }, h("ls-icon", { key: '7abb18b79ce54cd10d03ae2b6bf7755210c87e75', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '10dc6add8b33c982dec5807a711bb9c6bab69d65', id: "ls-toolbar-font-select", onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, h("option", { key: 'ab2adc71db5cb0304d3ef0e88cd39f9c3b0695ff', disabled: true, selected: this.allElementsSame()?.fontName === 'mixed', value: 'mixed' }, "Mixed"), h("option", { key: 'b87685950342e18f67136c15b626ecddf594f9f1', value: "arial" }, "Arial"), h("option", { key: '23c3c6f267862f66649517e165fbd3b4168fb12b', value: "liberation sans" }, "Liberation Sans"), h("option", { key: 'd5df1c563bff199141bb1e3abe57aeaac20e680a', value: "courier" }, "Courier"), h("option", { key: 'd9e693b2a601ae8373e7bed6f6f63b5176f0f53f', value: "helvetica" }, "Helvetica"), h("option", { key: '53ff1c000a0a20c574ae4a0efe783a297a5a3e9e', value: "verdana" }, "Verdana")), h("ls-icon", { key: '56b5f263672aabc30b7a4fecdaf0b29dd645e239', id: "selectorIcon", name: "selector" })), h("div", { key: '1fe61ed2c6e16e2c9a58c1a349a7991dfed9bc5b', class: "input-wrapper", "data-tooltip": "Font Size" }, h("ls-icon", { key: '80a2dfae58c432af9860811270ef14887ef1dba9', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: '5b662354c0bfaa6cdc9d6c085f2732b238a9a675', id: "ls-toolbar-font-size", type: 'number', min: "4", value: this.allElementsSame()?.fontSize, onChange: input => {
+            }, class: 'has-leading-icon' }, h("option", { key: '095097496e0a5570943ad483b628e35aae980ae7', disabled: true, selected: this.allElementsSame()?.fontName === 'mixed', value: 'mixed' }, "Mixed"), h("option", { key: 'bdec564e84e8856ba2a76a954c8619e265ace754', value: "arial" }, "Arial"), h("option", { key: 'fbd43ae7332189f128c56f92eb2533733680cd80', value: "liberation sans" }, "Liberation Sans"), h("option", { key: 'd0335e99d771789f722aaadf4230ccc31ea8a5df', value: "courier" }, "Courier"), h("option", { key: 'd9cc11757352ab6be9878b88b1c549c791c82779', value: "helvetica" }, "Helvetica"), h("option", { key: '3375f3d30fddd0d7de6b5b7f2ab9febd23166680', value: "verdana" }, "Verdana")), h("ls-icon", { key: '5188818c50510b4cc8da9bd7c98cde7f5b505642', id: "selectorIcon", name: "selector" })), h("div", { key: '4db7c26767369994c1d95100fc5f21751efd84b0', class: "input-wrapper", "data-tooltip": "Font Size" }, h("ls-icon", { key: 'e8c0eee85932d18bc845769e1e8ef6d5747cc347', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: 'a3d24673e0a2dec7b6b1d54002c4cfd7015323d0', id: "ls-toolbar-font-size", type: 'number', min: "4", value: this.allElementsSame()?.fontSize, onChange: input => {
                 if (input.target.value === '')
                     return;
                 this.alter({ fontSize: input.target.value });
-            }, class: 'has-leading-icon' })), h("div", { key: 'bdc70a6f70ac24ede3e375da95a31b09fc6e0cab', class: 'button-group' }, h("button", { key: '93bd2e0f321a7630e4a5203c607b9ae97896820a', onClick: () => {
+            }, class: 'has-leading-icon' })), h("div", { key: '118011caf609420d103dca5aedec499d0303eeda', class: 'button-group' }, h("button", { key: '5eed2838a98ede95838bf3133f8642b6ff60aecb', onClick: () => {
                 this.alter({ align: 'left' });
-            }, "data-tooltip": "Align Text Left" }, h("ls-icon", { key: '75ceda811a343eb024c8eacfa863d7d1ec0fa538', name: "menu-alt-2" })), h("button", { key: '1fbfcfdfe4b60992ad507f87c281bde9e1cfb6ac', onClick: () => {
+            }, "data-tooltip": "Align Text Left" }, h("ls-icon", { key: 'a06ba7d34c0ae7f44b02434b5deb1258d55f5a83', name: "menu-alt-2" })), h("button", { key: 'b9e6efe9f6320301386f64b8b1256eea01a142ab', onClick: () => {
                 this.alter({ align: 'center' });
-            }, "data-tooltip": "Align Text Center" }, h("ls-icon", { key: '225df89a538e7e67c4bc95a309afd5167b67b6ce', name: "menu-alt-5" })), h("button", { key: 'b8cbc695c18f0a556ab6a83e00b2cf0da78ce8f5', onClick: () => {
+            }, "data-tooltip": "Align Text Center" }, h("ls-icon", { key: 'bd8a286ea76add2e60093a245869d40785b6e2d4', name: "menu-alt-5" })), h("button", { key: '81cb6def72ee8d51e455291f93d349dc5eed4315', onClick: () => {
                 this.alter({ align: 'right' });
-            }, "data-tooltip": "Align Text Right" }, h("ls-icon", { key: 'd3d569ce70e69c8425449549b6563eb1d966de18', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: '93cea0ccee515f28a1464bb86847998866ff28c9', class: 'ls-field-format-bar' }, h("div", { key: '8bf4b19264ec43d4880c0f1afd49bc0e95653ccb', class: "input-wrapper", "data-tooltip": "Font Family" }, h("ls-icon", { key: '00fc36a118fed88906b6dc6f10d4c5b572c9415a', id: "selectorIcon", name: "selector" }), h("ls-icon", { key: '631f24095b4735af86670d4464dc0dfe82722160', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '1ec3611079e764e9e052fafa18ed73bd2879a3b2', id: "ls-toolbar-font-select", onChange: input => {
+            }, "data-tooltip": "Align Text Right" }, h("ls-icon", { key: 'f11af16c93bad521bba0e1b4c0f4d5343e42d853', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: '642496b309e0ea729063daa7f90d665a4b79e622', class: 'ls-field-format-bar' }, h("div", { key: '058d36a9258d3a839aecfd6e6a263fc3fa86d637', class: "input-wrapper", "data-tooltip": "Font Family" }, h("ls-icon", { key: '757aecdbe113df3391046735295e94eb762bfa7a', id: "selectorIcon", name: "selector" }), h("ls-icon", { key: '7dbc085ec4583952acc129d7bf90d0454a9593db', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '7bd9b7527286ff946aeef9ef6822f63efbfb51d9', id: "ls-toolbar-font-select", onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, h("option", { key: 'b4e20742209d89cf2f81724e56cf4e271b242efe', value: "arial" }, "Arial"), h("option", { key: '90e07a1b1642602cb82a17d55c47fa151dd042cc', value: "liberation sans" }, "Liberation Sans"), h("option", { key: 'a1be70434a95b0032f7e0bd742a5493f4191e552', value: "courier" }, "Courier"), h("option", { key: 'cf58305e89c6cd764563564b4b8c4c97d3148837', value: "helvetica" }, "Helvetica"), h("option", { key: 'aee06cd107c49e5efccdc188439e51b341aef443', value: "verdana" }, "Verdana"))), h("div", { key: 'd96af2693b5160f090877ae272235e6e4c199be0', class: "input-wrapper", "data-tooltip": "Font Size" }, h("ls-icon", { key: '054ac7cfdca186932b67186e1af9b4fc207ac8af', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: '25e2bc4275d0f94a09b1dcccb62521c2aa2c33c2', id: "ls-toolbar-font-size", type: "number", min: "4", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
+            }, class: 'has-leading-icon' }, h("option", { key: '8360b7525a706d83fbb71c6360d720ecc7665c9f', value: "arial" }, "Arial"), h("option", { key: 'bb4b4aba366ed7b28cd30c8d09f6955443f21547', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '1a25159c21514bbf65bccb351d366a8d8ddc4d6c', value: "courier" }, "Courier"), h("option", { key: 'f63e8cb76ea72af5ad5d2e947cbc34ef13cbf818', value: "helvetica" }, "Helvetica"), h("option", { key: 'f5c81a38eacce8c0e059a7b53d7c8b8b7f24524d', value: "verdana" }, "Verdana"))), h("div", { key: '9dd75e7f634664d54f227f8a14c02776ae77baa6', class: "input-wrapper", "data-tooltip": "Font Size" }, h("ls-icon", { key: '68b63c5e021facce3e62cd1e8dc6b61f28fb5be2', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: '444572a1f8620c21e03570c5efbbde5938fb0882', id: "ls-toolbar-font-size", type: "number", min: "4", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
                 if (input.target.value === '')
                     return;
                 this.alter({ fontSize: input.target.value });
-            }, class: 'has-leading-icon' })), h("div", { key: 'e7b8af56e32c8cc09e5090391c164edab53de5a6', class: 'button-group' }, h("button", { key: 'abf70e78272b06353a074b093f0a316bb4bb4188', onClick: () => {
+            }, class: 'has-leading-icon' })), h("div", { key: '1e44265fe1d9584b064dd80cd1c99efd631ee05b', class: 'button-group' }, h("button", { key: '9eb6dcba91bc226f8e8b0096fb8e3195058710ff', onClick: () => {
                 this.alter({ align: 'left' });
-            }, "data-tooltip": "Align Text Left" }, h("ls-icon", { key: 'f7dd25decd2cd245141f8e00cc79096c283323ac', name: "menu-alt-2" })), h("button", { key: '5c68ddd64a36d8a8b486db63fa4831522a021c8d', onClick: () => {
+            }, "data-tooltip": "Align Text Left" }, h("ls-icon", { key: '20414ba17f91b462979b78017d8af7180a33c34b', name: "menu-alt-2" })), h("button", { key: '6321ba075e9059a2c1ef3a4b052783686b265f03', onClick: () => {
                 this.alter({ align: 'center' });
-            }, "data-tooltip": "Align Text Center" }, h("ls-icon", { key: '023ad09061b00186dca7da21df38a5a478cdeed1', name: "menu-alt-5" })), h("button", { key: 'db06134b4512dbdb1d8de66975e6aca1496a24c4', onClick: () => {
+            }, "data-tooltip": "Align Text Center" }, h("ls-icon", { key: '55cfc3f4653c6ca86d5fd7dbfe57c1076363552b', name: "menu-alt-5" })), h("button", { key: '35f0b7b03c2293f48f84bb011833be7514de46f7', onClick: () => {
                 this.alter({ align: 'right' });
-            }, "data-tooltip": "Align Text Right" }, h("ls-icon", { key: 'ddc4dfb005babf7dfe1d7cf9cc95d8ccd80c9031', name: "menu-alt-3" }))))), h("ls-tooltip", { key: 'd1f71302cf1ad18577e416d6cbca86a1c442c4c8', id: "ls-tooltip-master" })));
+            }, "data-tooltip": "Align Text Right" }, h("ls-icon", { key: '1d389afb29a9f96cb0ffe16bf129b3e5e7e153e9', name: "menu-alt-3" }))))), h("ls-tooltip", { key: '1453c1f8b125c9caf780bdcfb378878fd2cbbe27', id: "ls-tooltip-master" })));
     }
     static get is() { return "ls-field-format"; }
     static get encapsulation() { return "shadow"; }
@@ -89,7 +87,6 @@ export class LsFieldFormat {
         return {
             "dataItem": {
                 "type": "unknown",
-                "attribute": "data-item",
                 "mutable": true,
                 "complexType": {
                     "original": "LSApiElement[]",
@@ -135,27 +132,6 @@ export class LsFieldFormat {
                         }
                     }
                 }
-            }, {
-                "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"; }

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

@@ -1 +1 @@
-{"version":3,"file":"ls-field-format.js","sourceRoot":"","sources":["../../../src/components/ls-field-format/ls-field-format.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE9F,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAOxD,MAAM,OAAO,aAAa;IAIxB,QAAQ,CAAiB;IAOzB,MAAM,CAAgC;IAOtC,MAAM,CAAgC;IAC3B,SAAS,CAAc;IAE1B,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC/C,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEM,WAAW,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,uDAAuD;IAEvD,mBAAmB;QACjB,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC7B,IAAI,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,wBAAwB,CAAsB,CAAC;YACtG,IAAI,OAAO;gBAAE,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,CAAC;YAC9D,IAAI,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,sBAAsB,CAAqB,CAAC;YACvG,IAAI,WAAW;gBAAE,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC;QACnF,CAAC;QACD,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC/C,CAAC;IAED,0CAA0C;IAC1C,6CAA6C;IAC7C,KAAK,CAAC,IAAY;QAChB,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAElB,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YACnD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,EAAkB,EAAE,CAAC;QACvE,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAoB,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,gBAAgB;QACd,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC/C,CAAC;IAED,eAAe,GAAG,GAAG,EAAE;QACrB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QACzD,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAChD,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC;QAClF,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAChD,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC;QACtF,OAAO,EAAE,MAAM,EAAE,YAAY,IAAI,gBAAgB,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;IAC9J,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW;YAC3D,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5C,4DAAK,KAAK,EAAE,qBAAqB;gBAC/B,4DAAK,KAAK,EAAC,eAAe,kBAAc,aAAa;oBACnD,gEAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,GAAW;oBAC1D,+DACE,EAAE,EAAC,wBAAwB,EAC3B,QAAQ,EAAE,KAAK,CAAC,EAAE;4BAChB,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA4B,CAAC,KAAK,EAAE,CAAC,CAAC;wBACtE,CAAC,EACD,KAAK,EAAE,kBAAkB;wBAEzB,+DAAQ,QAAQ,QAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,KAAK,OAAO,EAAE,KAAK,EAAE,OAAO,YAE9E;wBACT,+DAAQ,KAAK,EAAC,OAAO,YAAe;wBACpC,+DAAQ,KAAK,EAAC,iBAAiB,sBAAyB;wBACxD,+DAAQ,KAAK,EAAC,SAAS,cAAiB;wBACxC,+DAAQ,KAAK,EAAC,WAAW,gBAAmB;wBAC5C,+DAAQ,KAAK,EAAC,SAAS,cAAiB,CACjC;oBACT,gEAAS,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,GAAW,CACjD;gBACN,4DAAK,KAAK,EAAC,eAAe,kBAAc,WAAW;oBACjD,gEAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,GAAW;oBAC1D,8DACE,EAAE,EAAC,sBAAsB,EACzB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,GAAG,EACP,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,EACvC,QAAQ,EAAE,KAAK,CAAC,EAAE;4BAChB,IAAK,KAAK,CAAC,MAA2B,CAAC,KAAK,KAAK,EAAE;gCAAE,OAAO;4BAC5D,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,CAAC;wBACrE,CAAC,EACD,KAAK,EAAE,kBAAkB,GACzB,CACE;gBACN,4DAAK,KAAK,EAAE,cAAc;oBACxB,+DACE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;wBAChC,CAAC,kBACY,iBAAiB;wBAE9B,gEAAS,IAAI,EAAC,YAAY,GAAW,CAC9B;oBACT,+DACE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;wBAClC,CAAC,kBACY,mBAAmB;wBAEhC,gEAAS,IAAI,EAAC,YAAY,GAAW,CAC9B;oBACT,+DACE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;wBACjC,CAAC,kBACY,kBAAkB;wBAE/B,gEAAS,IAAI,EAAC,YAAY,GAAW,CAC9B,CACL,CACF,CACP;YACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,CAC9C,4DAAK,KAAK,EAAE,qBAAqB;gBAC/B,4DAAK,KAAK,EAAC,eAAe,kBAAc,aAAa;oBACnD,gEAAS,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,GAAW;oBACrD,gEAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,GAAW;oBAC1D,+DACE,EAAE,EAAC,wBAAwB,EAC3B,QAAQ,EAAE,KAAK,CAAC,EAAE;4BAChB,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA4B,CAAC,KAAK,EAAE,CAAC,CAAC;wBACtE,CAAC,EACD,KAAK,EAAE,kBAAkB;wBAEzB,+DAAQ,KAAK,EAAC,OAAO,YAAe;wBACpC,+DAAQ,KAAK,EAAC,iBAAiB,sBAAyB;wBACxD,+DAAQ,KAAK,EAAC,SAAS,cAAiB;wBACxC,+DAAQ,KAAK,EAAC,WAAW,gBAAmB;wBAC5C,+DAAQ,KAAK,EAAC,SAAS,cAAiB,CACjC,CACL;gBACN,4DAAK,KAAK,EAAC,eAAe,kBAAc,WAAW;oBACjD,gEAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,GAAW;oBAC1D,8DACE,EAAE,EAAC,sBAAsB,EACzB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,GAAG,EACP,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,EAChC,QAAQ,EAAE,KAAK,CAAC,EAAE;4BAChB,IAAK,KAAK,CAAC,MAA2B,CAAC,KAAK,KAAK,EAAE;gCAAE,OAAO;4BAC5D,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,CAAC;wBACrE,CAAC,EACD,KAAK,EAAE,kBAAkB,GACzB,CACE;gBACN,4DAAK,KAAK,EAAE,cAAc;oBACxB,+DACE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;wBAChC,CAAC,kBACY,iBAAiB;wBAE9B,gEAAS,IAAI,EAAC,YAAY,GAAW,CAC9B;oBACT,+DACE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;wBAClC,CAAC,kBACY,mBAAmB;wBAEhC,gEAAS,IAAI,EAAC,YAAY,GAAW,CAC9B;oBACT,+DACE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;wBACjC,CAAC,kBACY,kBAAkB;wBAE/B,gEAAS,IAAI,EAAC,YAAY,GAAW,CAC9B,CACL,CAWF,CACP;YACD,mEAAY,EAAE,EAAC,mBAAmB,GAAG,CAChC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, EventEmitter, Host, Prop, h, Element, Event, Watch } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { attachAllTooltips } from '../../utils/tooltip';\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  private handleKeyDown = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  };\n\n  private handleKeyUp = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  };\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.allElementsSame()?.fontName;\n      var selFontSize = this.component.shadowRoot.getElementById('ls-toolbar-font-size') as HTMLInputElement;\n      if (selFontSize) selFontSize.value = this.allElementsSame()?.fontSize.toString();\n    }\n    attachAllTooltips(this.component.shadowRoot);\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\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  allElementsSame = () => {\n    if (!this.dataItem || this.dataItem.length === 0) return;\n    const firstFontName = this.dataItem[0].fontName;\n    const allFontsSame = this.dataItem.every(item => item.fontName === firstFontName);\n    const firstFontSize = this.dataItem[0].fontSize;\n    const allFontSizesSame = this.dataItem.every(item => item.fontSize === firstFontSize);\n    return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed' };\n  };\n\n  render() {\n    return (\n      <Host onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp}>\n        {this.dataItem && this.dataItem.length > 1 && (\n          <div class={'ls-field-format-bar'}>\n            <div class=\"input-wrapper\" data-tooltip=\"Font Family\">\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 disabled selected={this.allElementsSame()?.fontName === 'mixed'} value={'mixed'}>\n                  Mixed\n                </option>\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\" data-tooltip=\"Font Size\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n              <input\n                id=\"ls-toolbar-font-size\"\n                type='number'\n                min=\"4\"\n                value={this.allElementsSame()?.fontSize}\n                onChange={input => {\n                  if ((input.target as HTMLInputElement).value === '') return;\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                data-tooltip=\"Align Text Left\"\n              >\n                <ls-icon name=\"menu-alt-2\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n                data-tooltip=\"Align Text Center\"\n              >\n                <ls-icon name=\"menu-alt-5\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\n                data-tooltip=\"Align Text Right\"\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\" data-tooltip=\"Font Family\">\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                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\" data-tooltip=\"Font Size\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n              <input\n                id=\"ls-toolbar-font-size\"\n                type=\"number\"\n                min=\"4\"\n                size={4}\n                value={this.dataItem[0].fontSize}\n                onChange={input => {\n                  if ((input.target as HTMLInputElement).value === '') return;\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                data-tooltip=\"Align Text Left\"\n              >\n                <ls-icon name=\"menu-alt-2\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n                data-tooltip=\"Align Text Center\"\n              >\n                <ls-icon name=\"menu-alt-5\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\n                data-tooltip=\"Align Text Right\"\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        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}
+{"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';\nimport { attachAllTooltips } from '../../utils/tooltip';\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  @Element() component: HTMLElement;\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  };\n\n  private handleKeyUp = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  };\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.allElementsSame()?.fontName;\n      var selFontSize = this.component.shadowRoot.getElementById('ls-toolbar-font-size') as HTMLInputElement;\n      if (selFontSize) selFontSize.value = this.allElementsSame()?.fontSize.toString();\n    }\n    attachAllTooltips(this.component.shadowRoot);\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  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  allElementsSame = () => {\n    if (!this.dataItem || this.dataItem.length === 0) return;\n    const firstFontName = this.dataItem[0].fontName;\n    const allFontsSame = this.dataItem.every(item => item.fontName === firstFontName);\n    const firstFontSize = this.dataItem[0].fontSize;\n    const allFontSizesSame = this.dataItem.every(item => item.fontSize === firstFontSize);\n    return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed' };\n  };\n\n  render() {\n    return (\n      <Host onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp}>\n        {this.dataItem && this.dataItem.length > 1 && (\n          <div class={'ls-field-format-bar'}>\n            <div class=\"input-wrapper\" data-tooltip=\"Font Family\">\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 disabled selected={this.allElementsSame()?.fontName === 'mixed'} value={'mixed'}>\n                  Mixed\n                </option>\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\" data-tooltip=\"Font Size\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n              <input\n                id=\"ls-toolbar-font-size\"\n                type='number'\n                min=\"4\"\n                value={this.allElementsSame()?.fontSize}\n                onChange={input => {\n                  if ((input.target as HTMLInputElement).value === '') return;\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                data-tooltip=\"Align Text Left\"\n              >\n                <ls-icon name=\"menu-alt-2\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n                data-tooltip=\"Align Text Center\"\n              >\n                <ls-icon name=\"menu-alt-5\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\n                data-tooltip=\"Align Text Right\"\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\" data-tooltip=\"Font Family\">\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                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\" data-tooltip=\"Font Size\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n              <input\n                id=\"ls-toolbar-font-size\"\n                type=\"number\"\n                min=\"4\"\n                size={4}\n                value={this.dataItem[0].fontSize}\n                onChange={input => {\n                  if ((input.target as HTMLInputElement).value === '') return;\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                data-tooltip=\"Align Text Left\"\n              >\n                <ls-icon name=\"menu-alt-2\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n                data-tooltip=\"Align Text Center\"\n              >\n                <ls-icon name=\"menu-alt-5\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\n                data-tooltip=\"Align Text Right\"\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        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -4,7 +4,6 @@ export class LsFieldPlacement {
     component;
     dataItem;
     mutate;
-    update;
     isSingle(dt) {
         return dt.length === undefined;
     }
@@ -29,13 +28,11 @@ export class LsFieldPlacement {
             });
             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]);
         }
     }
     center() {
@@ -54,7 +51,7 @@ export class LsFieldPlacement {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: '2891a22cc782d26e8019f621139dbb9cfa7912ae' }, this.isMultiple(this.dataItem) && (h("div", { key: 'fca4cfba664c7dcc850247145a19155359778fd6', class: 'ls-field-properties-section' }, h("div", { key: '6840302fca04a9512675d308a0faf89f588e4c92', class: 'ls-field-properties-section-text' }, h("p", { key: 'f148990ba318730ecd8f63dc2a1e07dbfe2e0758', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: 'b6e3392804efacfa479b8352fe9220aa202386ac', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '7c23a0dc256c248870b945337ff3699ee34faca3', class: 'input-row' }, h("div", { key: 'eb3c8491792b11452959601a11d0bb45576112ce', class: 'input-wrapper' }, h("ls-icon", { key: 'e0ef76fb7b4209ea9fca1f69ca063d9db54cab3e', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: '366b808ac6308e7a4c753473db2a906bfb81fe5c', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: 'cc27cf6674efd760f0bf72ba0879750bd3ec58d5', class: 'input-wrapper' }, h("ls-icon", { key: '215d388859634b7ba8bae7772bc2f123bf5072e4', id: "selectLeadingIcon", name: "y" }), h("input", { key: '2679e4e35dcb2529dceab7628e51a06ebf2cb084', 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: '36051ca4885a6f000e62b98e93a8cee9275cec56', class: 'field-set' }, h("div", { key: '71f569f20e1cc8a1afdd07979d277cb046832d02', class: 'ls-field-properties-section' }, h("div", { key: 'c3221f6b321a2fe37bb5950bfed9c17d89b4ec06', class: 'ls-field-properties-section-text' }, h("p", { key: 'cac50315a0bf1e69fcda4836b294aded0b9c5b38', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: '57d46a199248986056fa2283a3f983f788ca015f', 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: '600507c665204c312ec88d7dae69f1fd943492e0', class: 'multi-button-group-row' }, h("div", { key: 'bddd2f75ef7695d6f8e8eaebdd8cee1bf3e6f838', class: 'button-group' }, h("button", { key: '00e1849e66a0852577a94889839efe43c1b1c81a', onClick: () => { this.alter({ left: 0 }); }, "data-tooltip": "Align Left" }, h("ls-icon", { key: '9f54b7db1137cef47089564d53e36b3e95a130ee', name: "field-alignment-left" })), h("button", { key: 'c32102532ba8914bfe3ef7345d9a542f5fb3a61b', onClick: () => { this.alter({ left: this.center() }); }, "data-tooltip": "Align Center" }, h("ls-icon", { key: 'b4c4383eadcef61117f3b048bd2b3178b3c0a038', name: "field-alignment-centre" })), h("button", { key: 'bb859c7f759609101af575a282c5f64dabe69c09', onClick: () => { this.alter({ left: this.right() }); }, "data-tooltip": "Align Right" }, h("ls-icon", { key: '688b723605ec157fae2b659bd4d88b08fd897353', name: "field-alignment-right" }))), h("div", { key: 'ed944060fff8351aaa7fd42649cd6447a3961004', class: 'button-group' }, h("button", { key: '808bc6db4bd34934b4aa2f6b7fe47bc561041d7c', onClick: () => this.alter({ top: 0 }), "data-tooltip": "Align Top" }, h("ls-icon", { key: '7215638df9c08fac87e730b9db6963bdaabb6679', name: "field-alignment-top" })), h("button", { key: '740fb0baef8a931ff8f9e3998a048e57e1f73868', onClick: () => { this.alter({ top: this.middle() }); }, "data-tooltip": "Align Middle" }, h("ls-icon", { key: '75151df5e47d9a6f2bdccfcc9de925fd19e7274d', name: "field-alignment-middle" })), h("button", { key: 'd92b4595a17ce95ed97d116a8ec1f1ac848cf45e', onClick: () => { this.alter({ top: this.bottom() }); }, "data-tooltip": "Align Bottom" }, h("ls-icon", { key: '4b46bcab1783eae38c8135cb435123ebf635678b', name: "field-alignment-bottom" }))))), h("div", { key: '3ab3f3ba7a84f9e10590b3e74441f11115fcfcca', class: 'ls-field-properties-section' }, h("div", { key: '2d2bc1642911a36943f543aaea4e1113f6d90468', class: 'ls-field-properties-section-text' }, h("p", { key: '2716c6bd177cee3a74b57f27fceb802f99d00153', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '12b0116cf566e8fbd8c716ce30ff50547f075eeb', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '7c9d57d5988ac74a052d1e8b48891b9e49689f18', class: 'input-row' }, h("div", { key: '80f2dc6d84b2460f9119a4ad6c38cd23754b3f95', class: 'input-wrapper' }, h("ls-icon", { key: 'b5ce0258e81146a5e69ee892db47026af0e4b857', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: 'e1364c47bb93b6486e6a43e1c8375646cc90b19e', 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: 'd1785c7797954a99563205073b080fecd91ae9cd', class: 'input-wrapper' }, h("ls-icon", { key: '1c4a39e9dbf1b538c1c5330799d73749421efe40', id: "selectLeadingIcon", name: "y" }), h("input", { key: '1577cc2f618217940a68522e511be25906f93af1', 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: 'e07c33f5a5a0076f9e9d4762280deda6acb70c13', class: 'ls-field-properties-section' }, h("div", { key: '2164bb922476bb458aadb653ddf56811afd6bada', class: 'ls-field-properties-section-text' }, h("p", { key: 'deb4e93fe9730ad60df1ead15d6fd1125e5f1c7b', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: '85be0bf98871e745aeab85a7b3d5e7c7679bbbc1', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '5ea831b28aac09f5379e9fb227f6331ccb496682', class: 'button-group' }, h("button", { key: '8ed8a6be64facd93648d027fde2916a67f42c29c', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, h("ls-icon", { key: '136027ff733b7a222ecbe244bd0fb36ff3652427', name: "field-distribute-vertically" })), h("button", { key: '3408c19d67284f7ea72d73281315be8d8d233f5e', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, h("ls-icon", { key: '0360b37978f388df95806681c652f535e0eeafdb', name: "field-distribute-horizontally" })))), h("div", { key: '44bcfa853a0eaa54b06923d31706d2fa9734e866', class: 'ls-field-properties-section' }, h("div", { key: '7d5949bcc965f4ed677fb6296f541587ad2d78f0', class: 'ls-field-properties-section-text' }, h("p", { key: '4c19bf6ad558044ccd57f959b95cfaf9137d80fe', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: '293c1c62bbf46e56b2ab4cbe95926c8baec55a9c', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: 'c27747a77cce6f8e59f297c68e58c0ad3844a4a7', class: 'input-row' }, h("div", { key: '26961c543f14fe3cc3fab27264c1900e85540e95', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, h("ls-icon", { key: '960ecb65e5729f20baa8e6c3ca091ee8e64d880b', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), h("input", { key: '43057c9c211ab5e6b9d6c0df9867cc6a64b2729b', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), h("div", { key: '5ffd08a406bac946193b108a8ff7cf215b0d1d1a', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, h("ls-icon", { key: '84979d224cbeead196f6e06cd1e1ec0de3b92fb4', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), h("input", { key: '1f1b03545533e57fad828649407e14ede6f41fbe', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true })))))), h("ls-tooltip", { key: 'f04cdce03dae2e63bec8d9588eff9f2e15ad16ff', id: "ls-tooltip-master" })));
+        return (h(Host, { key: 'c634a96d87d02843dbe72f677aa6e7b14694f581' }, this.isMultiple(this.dataItem) && (h("div", { key: '044ff815e3f26547f78bb2482e7e47b796066b3e', class: 'ls-field-properties-section' }, h("div", { key: 'cf68b63b5038dc0dcd7b415b14753772768cb20e', class: 'ls-field-properties-section-text' }, h("p", { key: '309b54d667bcfcd0d82fd0601836d9020bc1c549', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '933ef9c922d40f5ec67369d2935c7470fc7a1d98', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: 'fad7b3df23e164bc0ac188e795a4cd5c34b21035', class: 'input-row' }, h("div", { key: '42bd70ecfbeee0532ab121ed3313450c65b2ec8b', class: 'input-wrapper' }, h("ls-icon", { key: '4bf6f52036de2c329cd3d1ad286fa01a4ec8f990', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: 'd81850eb0e5b7a7f95c36625a77a1410cd880ce7', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: '9ac1ceae38f27ccd59da01eda945fceedd267c0d', class: 'input-wrapper' }, h("ls-icon", { key: 'd967fac0657315ad403ef0068beab8d69df89cd7', id: "selectLeadingIcon", name: "y" }), h("input", { key: '58250555187ab6fab6e646c5b491e02126eb1d94', 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: '5eb0b5f2e221377d12cb9c4dae3e62dfa375f56a', class: 'field-set' }, h("div", { key: '074e855bae1efabd0608f679b17f744c29d2c13c', class: 'ls-field-properties-section' }, h("div", { key: 'bbb011ac0c0e891254a356fcb27768a5f12ac551', class: 'ls-field-properties-section-text' }, h("p", { key: '6bf7a08225bf1ea325781fd9e5ad353d268a93d3', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: '28e764426c670d4d77ade31d225acf06e948fb96', 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: '5279c5a19011d2e3e10027d5ed252fe14b3c78a7', class: 'multi-button-group-row' }, h("div", { key: '8e89191e1f792dd1ee2aaee7b36730232d573c4e', class: 'button-group' }, h("button", { key: '3b3f60acb8a82eb8a551d52fae1e7c9162fefc2e', onClick: () => { this.alter({ left: 0 }); }, "data-tooltip": "Align Left" }, h("ls-icon", { key: '4e228bb4c09c9b00bab056bb496c12572f6b151a', name: "field-alignment-left" })), h("button", { key: '7a05f93a649be5f222c498edbbb93e32b725537c', onClick: () => { this.alter({ left: this.center() }); }, "data-tooltip": "Align Center" }, h("ls-icon", { key: 'b7a1d02377861f25d78f2d69586a5cf5b021ac5e', name: "field-alignment-centre" })), h("button", { key: 'ad8bc98aa32bea2be3da0d8374a5c8fd84448378', onClick: () => { this.alter({ left: this.right() }); }, "data-tooltip": "Align Right" }, h("ls-icon", { key: '7ea2cb0d65a64050cac2e06746a3044567f8ef30', name: "field-alignment-right" }))), h("div", { key: '276a46d5023fb0581c68b995f1ba990049b1707f', class: 'button-group' }, h("button", { key: '639559ce5ed812963a3c44e10d3afcc3f0b8ddd2', onClick: () => this.alter({ top: 0 }), "data-tooltip": "Align Top" }, h("ls-icon", { key: '699da10bf15c17cb15c4557aad53fbb8fed66852', name: "field-alignment-top" })), h("button", { key: '1b39193438fa81f8a49a8f312762060614de60df', onClick: () => { this.alter({ top: this.middle() }); }, "data-tooltip": "Align Middle" }, h("ls-icon", { key: 'ce845282439d102477a1a05910cd6bd15775942a', name: "field-alignment-middle" })), h("button", { key: 'b162767b02693c5961dfc84fafdcfb85912ea09e', onClick: () => { this.alter({ top: this.bottom() }); }, "data-tooltip": "Align Bottom" }, h("ls-icon", { key: '4ace10a21e3264b4236ff3618d4db5129bc6329a', name: "field-alignment-bottom" }))))), h("div", { key: 'e5f446913a0790e9e048c1343507b64c17572790', class: 'ls-field-properties-section' }, h("div", { key: '75d1af4c23dd81ee0c4db9cd92752c8d27cde953', class: 'ls-field-properties-section-text' }, h("p", { key: 'edb2296be70eb3daebb56266e421592957b6c37b', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '6315f4791e5a5ad707dba570417308e65b4e9a9e', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '2c9dfe5c74dcad282fd216d3e300571722204a2a', class: 'input-row' }, h("div", { key: '6562ff2e2d84f36f709b69fd2f5b09eba8f36bc8', class: 'input-wrapper' }, h("ls-icon", { key: 'e845b49ad34a27e84bbeb33ab8bcd87d80fdda29', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: 'ff42359ab105d12a8a6580972e0c974714c64a87', 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: '7e6d15ebe386d96d0f13b555f3bdf917e1fd0831', class: 'input-wrapper' }, h("ls-icon", { key: 'a98e37e9fa71467ab4d13cbd8d38357311f1f225', id: "selectLeadingIcon", name: "y" }), h("input", { key: 'ad3c14a161a8f7624f6afe122f65f0140db17391', 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: 'cbe1a006c7963f3848f86321f5938426c8a6f066', class: 'ls-field-properties-section' }, h("div", { key: '661acc6cbc0a5e51bed406e20746e0b290af3768', class: 'ls-field-properties-section-text' }, h("p", { key: 'a0d739ef2e67b863340f091322f233594938a1b6', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: '1991851f81de9de4431fd61d84e6b51eb484f96b', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '8d44dfaf9fb36a3353e678fcda20d6e521bedcc0', class: 'button-group' }, h("button", { key: '169c38f14e14d0a7e35742a878ff992f1203265c', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, h("ls-icon", { key: '602ffcf4bc0abc0f78b841071833387a3b3db2ea', name: "field-distribute-vertically" })), h("button", { key: '81cbf088282c93b47e5aa367ce38fbea83a86b28', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, h("ls-icon", { key: '9b45920bd267d4b846475d3cd5196c27310d3482', name: "field-distribute-horizontally" })))), h("div", { key: '7ee0dbb4a04f2c85231c7a1e2abea068158dc679', class: 'ls-field-properties-section' }, h("div", { key: 'c9ad0439b1497431f6b6de46aad5edeee84842eb', class: 'ls-field-properties-section-text' }, h("p", { key: '50de6dcd1cad58aa989030b37aeb0e997963db05', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: '7add4b16b05b484c4033309286ad1eae9770de45', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '529a5c5a0f098f4f46a0025836ec75cf5553336a', class: 'input-row' }, h("div", { key: '2784028e38a8bcac7e0527b8fe2a727a35204056', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, h("ls-icon", { key: '1daf9dba08891570496a039667a007d7b0f6c113', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), h("input", { key: '8fbba7e8ac95e7b060003d735021a3fcfe4ee1fe', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), h("div", { key: 'dafd6d4add86fb81ef89b57c1761dd685577924b', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, h("ls-icon", { key: '45e20ce1cb261cfbaa3566bf407affb6d2630dd0', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), h("input", { key: 'a8711242e79a07b3a31eb53464304607dbb45607', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true })))))), h("ls-tooltip", { key: 'e852290e234a73d02f5307dab93b5c94ff401c83', id: "ls-tooltip-master" })));
     }
     static get is() { return "ls-field-placement"; }
     static get encapsulation() { return "shadow"; }
@@ -72,7 +69,6 @@ export class LsFieldPlacement {
         return {
             "dataItem": {
                 "type": "unknown",
-                "attribute": "data-item",
                 "mutable": true,
                 "complexType": {
                     "original": "LSApiElement | LSApiElement[]",
@@ -118,27 +114,6 @@ export class LsFieldPlacement {
                         }
                     }
                 }
-            }, {
-                "method": "update",
-                "name": "update",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "LSMutateEvent[]",
-                    "resolved": "LSMutateEvent[]",
-                    "references": {
-                        "LSMutateEvent": {
-                            "location": "import",
-                            "path": "../../types/LSMutateEvent",
-                            "id": "src/types/LSMutateEvent.ts::LSMutateEvent"
-                        }
-                    }
-                }
             }];
     }
     static get elementRef() { return "component"; }

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

@@ -1 +1 @@
-{"version":3,"file":"ls-field-placement.js","sourceRoot":"","sources":["../../../src/components/ls-field-placement/ls-field-placement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-field-placement',\n  styleUrl: 'ls-field-placement.css',\n  shadow: true,\n})\nexport class LsFieldPlacement {\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  getValue(key) {\n    if (this.isMultiple(this.dataItem)) {\n      return \"\";\n    } else if (this.isSingle(this.dataItem)) {\n      return this.dataItem[key]\n    }\n    return ''\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    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  center() {\n    return this.dataItem[0].pageDimensions[this.dataItem[0].page].width / 2 - this.dataItem[0].width / 2;\n  }\n\n  right() {\n    return this.dataItem[0].pageDimensions[this.dataItem[0].page].width - this.dataItem[0].width;\n  }\n\n  middle() {\n    return this.dataItem[0].pageDimensions[this.dataItem[0].page].height / 2 - this.dataItem[0].height / 2;\n  }\n\n  bottom() {\n    return this.dataItem[0].pageDimensions[this.dataItem[0].page].height - this.dataItem[0].height;\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'}>Location</p>\n              <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n            </div>\n            <div class={'input-row'}>\n              <div class={'input-wrapper'}>\n                <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n                <input type=\"number\" class={'has-leading-icon'} aria=\"top-location\" id=\"top-location\" onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })} />\n              </div>\n              <div class={'input-wrapper'}>\n                <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n                <input\n                  type=\"number\"\n                  class={'has-leading-icon'}\n                  aria=\"left-location\"\n                  id=\"left-location\"\n                  onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })}\n                />\n              </div>\n            </div>\n          </div>\n        )}\n        {this.isSingle(this.dataItem) && (\n          <div class={'field-set'}>\n            {/* @Alex I couldn't get this to work?? Only Top and Left */}\n\n            <div class={'ls-field-properties-section'}>\n              <div class={'ls-field-properties-section-text'}>\n                <p class={'ls-field-properties-section-title'}>Alignment</p>\n                <p class={'ls-field-properties-section-description'}>Align your Fields relative to the page or multi-select and align then to each other.</p>\n              </div>\n              <div class={'multi-button-group-row'}>\n                <div class={'button-group'}>\n                  <button onClick={() => { this.alter({ left: 0 }) }} data-tooltip=\"Align Left\">\n                    <ls-icon name=\"field-alignment-left\"></ls-icon>\n                  </button>\n                  <button onClick={() => { this.alter({ left: this.center() }) }} data-tooltip=\"Align Center\">\n                    <ls-icon name=\"field-alignment-centre\"></ls-icon>\n                  </button>\n                  <button onClick={() => { this.alter({ left: this.right() }) }} data-tooltip=\"Align Right\">\n                    <ls-icon name=\"field-alignment-right\"></ls-icon>\n                  </button>\n                </div>\n                <div class={'button-group'}>\n                  <button onClick={() => this.alter({ top: 0 })} data-tooltip=\"Align Top\">\n                    <ls-icon name=\"field-alignment-top\"></ls-icon>\n                  </button>\n                  <button onClick={() => { this.alter({ top: this.middle() }) }} data-tooltip=\"Align Middle\">\n                    <ls-icon name=\"field-alignment-middle\"></ls-icon>\n                  </button>\n                  <button onClick={() => { this.alter({ top: this.bottom() }) }} data-tooltip=\"Align Bottom\">\n                    <ls-icon name=\"field-alignment-bottom\"></ls-icon>\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class={'ls-field-properties-section'}>\n              <div class={'ls-field-properties-section-text'}>\n                <p class={'ls-field-properties-section-title'}>Location</p>\n                <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n              </div>\n              <div class={'input-row'}>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n                  <input\n                    type=\"number\"\n                    class={'has-leading-icon'}\n                    aria=\"top-location\"\n                    id=\"top-location\"\n                    value={this.dataItem?.left}\n                    onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })}\n                  />\n                </div>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n                  <input\n                    type=\"number\"\n                    class={'has-leading-icon'}\n                    aria=\"left-location\"\n                    id=\"left-location\"\n                    value={this.dataItem?.top}\n                    onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })}\n                    width=\"30\"\n                  />\n                </div>\n              </div>\n            </div>\n\n            <div class={'ls-field-properties-section'}>\n              <div class={'ls-field-properties-section-text'}>\n                <p class={'ls-field-properties-section-title'}>Distribution</p>\n                <p class={'ls-field-properties-section-description'}>Multi-select fields and evenly space them out</p>\n              </div>\n              <div class={'button-group'}>\n                <button disabled data-tooltip=\"Select multiple Fields to to access distribution controls\">\n                  <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n                </button>\n                <button disabled data-tooltip=\"Select multiple Fields to to access distribution controls\">\n                  <ls-icon name=\"field-distribute-horizontally\"></ls-icon>\n                </button>\n              </div>\n            </div>\n\n            <div class={'ls-field-properties-section'}>\n              <div class={'ls-field-properties-section-text'}>\n                <p class={'ls-field-properties-section-title'}>Gap</p>\n                <p class={'ls-field-properties-section-description'}>Define the exact gap between multi-select fields.</p>\n              </div>\n              <div class={'input-row'}>\n                <div class={'input-wrapper'} data-tooltip=\"Select multiple Fields to to access gap controls\">\n                  <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-vertically\"></ls-icon>\n                  <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"vertical-gap\" id=\"vertical-gap\" disabled />\n                </div>\n                <div class={'input-wrapper'} data-tooltip=\"Select multiple Fields to to access gap controls\">\n                  <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-horizontally\"></ls-icon>\n                  <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"horizontal-gap\" id=\"horizontal-gap\" disabled />\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-field-placement.js","sourceRoot":"","sources":["../../../src/components/ls-field-placement/ls-field-placement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-field-placement',\n  styleUrl: 'ls-field-placement.css',\n  shadow: true,\n})\nexport class LsFieldPlacement {\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  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  getValue(key) {\n    if (this.isMultiple(this.dataItem)) {\n      return \"\";\n    } else if (this.isSingle(this.dataItem)) {\n      return this.dataItem[key]\n    }\n    return ''\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    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  center() {\n    return this.dataItem[0].pageDimensions[this.dataItem[0].page].width / 2 - this.dataItem[0].width / 2;\n  }\n\n  right() {\n    return this.dataItem[0].pageDimensions[this.dataItem[0].page].width - this.dataItem[0].width;\n  }\n\n  middle() {\n    return this.dataItem[0].pageDimensions[this.dataItem[0].page].height / 2 - this.dataItem[0].height / 2;\n  }\n\n  bottom() {\n    return this.dataItem[0].pageDimensions[this.dataItem[0].page].height - this.dataItem[0].height;\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'}>Location</p>\n              <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n            </div>\n            <div class={'input-row'}>\n              <div class={'input-wrapper'}>\n                <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n                <input type=\"number\" class={'has-leading-icon'} aria=\"top-location\" id=\"top-location\" onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })} />\n              </div>\n              <div class={'input-wrapper'}>\n                <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n                <input\n                  type=\"number\"\n                  class={'has-leading-icon'}\n                  aria=\"left-location\"\n                  id=\"left-location\"\n                  onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })}\n                />\n              </div>\n            </div>\n          </div>\n        )}\n        {this.isSingle(this.dataItem) && (\n          <div class={'field-set'}>\n            {/* @Alex I couldn't get this to work?? Only Top and Left */}\n\n            <div class={'ls-field-properties-section'}>\n              <div class={'ls-field-properties-section-text'}>\n                <p class={'ls-field-properties-section-title'}>Alignment</p>\n                <p class={'ls-field-properties-section-description'}>Align your Fields relative to the page or multi-select and align then to each other.</p>\n              </div>\n              <div class={'multi-button-group-row'}>\n                <div class={'button-group'}>\n                  <button onClick={() => { this.alter({ left: 0 }) }} data-tooltip=\"Align Left\">\n                    <ls-icon name=\"field-alignment-left\"></ls-icon>\n                  </button>\n                  <button onClick={() => { this.alter({ left: this.center() }) }} data-tooltip=\"Align Center\">\n                    <ls-icon name=\"field-alignment-centre\"></ls-icon>\n                  </button>\n                  <button onClick={() => { this.alter({ left: this.right() }) }} data-tooltip=\"Align Right\">\n                    <ls-icon name=\"field-alignment-right\"></ls-icon>\n                  </button>\n                </div>\n                <div class={'button-group'}>\n                  <button onClick={() => this.alter({ top: 0 })} data-tooltip=\"Align Top\">\n                    <ls-icon name=\"field-alignment-top\"></ls-icon>\n                  </button>\n                  <button onClick={() => { this.alter({ top: this.middle() }) }} data-tooltip=\"Align Middle\">\n                    <ls-icon name=\"field-alignment-middle\"></ls-icon>\n                  </button>\n                  <button onClick={() => { this.alter({ top: this.bottom() }) }} data-tooltip=\"Align Bottom\">\n                    <ls-icon name=\"field-alignment-bottom\"></ls-icon>\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class={'ls-field-properties-section'}>\n              <div class={'ls-field-properties-section-text'}>\n                <p class={'ls-field-properties-section-title'}>Location</p>\n                <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n              </div>\n              <div class={'input-row'}>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n                  <input\n                    type=\"number\"\n                    class={'has-leading-icon'}\n                    aria=\"top-location\"\n                    id=\"top-location\"\n                    value={this.dataItem?.left}\n                    onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })}\n                  />\n                </div>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n                  <input\n                    type=\"number\"\n                    class={'has-leading-icon'}\n                    aria=\"left-location\"\n                    id=\"left-location\"\n                    value={this.dataItem?.top}\n                    onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })}\n                    width=\"30\"\n                  />\n                </div>\n              </div>\n            </div>\n\n            <div class={'ls-field-properties-section'}>\n              <div class={'ls-field-properties-section-text'}>\n                <p class={'ls-field-properties-section-title'}>Distribution</p>\n                <p class={'ls-field-properties-section-description'}>Multi-select fields and evenly space them out</p>\n              </div>\n              <div class={'button-group'}>\n                <button disabled data-tooltip=\"Select multiple Fields to to access distribution controls\">\n                  <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n                </button>\n                <button disabled data-tooltip=\"Select multiple Fields to to access distribution controls\">\n                  <ls-icon name=\"field-distribute-horizontally\"></ls-icon>\n                </button>\n              </div>\n            </div>\n\n            <div class={'ls-field-properties-section'}>\n              <div class={'ls-field-properties-section-text'}>\n                <p class={'ls-field-properties-section-title'}>Gap</p>\n                <p class={'ls-field-properties-section-description'}>Define the exact gap between multi-select fields.</p>\n              </div>\n              <div class={'input-row'}>\n                <div class={'input-wrapper'} data-tooltip=\"Select multiple Fields to to access gap controls\">\n                  <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-vertically\"></ls-icon>\n                  <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"vertical-gap\" id=\"vertical-gap\" disabled />\n                </div>\n                <div class={'input-wrapper'} data-tooltip=\"Select multiple Fields to to access gap controls\">\n                  <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-horizontally\"></ls-icon>\n                  <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"horizontal-gap\" id=\"horizontal-gap\" disabled />\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -56,7 +56,6 @@ export class LsFieldProperties {
         return {
             "dataItem": {
                 "type": "unknown",
-                "attribute": "data-item",
                 "mutable": false,
                 "complexType": {
                     "original": "LSApiElement[]",

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

@@ -1 +1 @@
-{"version":3,"file":"ls-field-properties.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties/ls-field-properties.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,iBAAiB;IACpB,QAAQ,CAAiB;IAEjC,YAAY;QACV,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,MAAM,KAAK,CAAC,EAAE,CAAC;YACjD,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;gBACzC,KAAK,WAAW;oBACd,OAAO,qCAA+B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACtE,KAAK,MAAM;oBACT,OAAO,gCAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACjE,KAAK,UAAU;oBACb,OAAO,gCAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACjE,KAAK,MAAM;oBACT,OAAO,gCAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACjE,KAAK,QAAQ;oBACX,OAAO,kCAA4B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACnE,KAAK,UAAU;oBACb,OAAO,oCAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACrE,KAAK,OAAO;oBACV,OAAO,iCAA2B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBAClE,KAAK,OAAO;oBACV,OAAO,iCAA2B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBAClE,KAAK,MAAM;oBACT,OAAO,gCAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACjE,KAAK,UAAU;oBACb,OAAO,gCAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACjE;oBACE,OAAO,mCAA6B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;YAEtE,CAAC;QACH,CAAC;aAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC;YACnD,OAAO,oCAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAAA;IAEpE,CAAC;IAEO,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC/C,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAA;IAEO,WAAW,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAA;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW;YAC3D,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;YACrC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\n\n@Component({\n  tag: 'ls-field-properties',\n  styleUrl: 'ls-field-properties.css',\n  shadow: true,\n})\nexport class LsFieldProperties {\n  @Prop() dataItem: LSApiElement[];\n\n  renderFields() {\n    if (this.dataItem && this.dataItem?.length === 1) {\n      switch (this.dataItem[0].formElementType) {\n        case 'signature':\n          return <ls-field-properties-signature dataItem={this.dataItem[0]} />\n        case 'date':\n          return <ls-field-properties-date dataItem={this.dataItem[0]} />\n        case 'autodate':\n          return <ls-field-properties-date dataItem={this.dataItem[0]} />\n        case 'text':\n          return <ls-field-properties-text dataItem={this.dataItem[0]} />\n        case 'number':\n          return <ls-field-properties-number dataItem={this.dataItem[0]} />\n        case 'autosign':\n          return <ls-field-properties-autosign dataItem={this.dataItem[0]} />\n        case 'email':\n          return <ls-field-properties-email dataItem={this.dataItem[0]} />\n        case 'image':\n          return <ls-field-properties-image dataItem={this.dataItem[0]} />\n        case 'file':\n          return <ls-field-properties-file dataItem={this.dataItem[0]} />\n        case 'dropdown':\n          return <ls-field-properties-file dataItem={this.dataItem[0]} />\n        default:\n          return <ls-field-properties-general dataItem={this.dataItem[0]} />\n\n      }\n    } else if (this.dataItem && this.dataItem?.length > 1)\n      return <ls-field-properties-multiple dataItem={this.dataItem} />\n\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  }\n\n  private handleKeyUp = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  }\n\n  render() {\n    return (\n      <Host onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp}>\n        {this.dataItem && this.renderFields()}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-field-properties.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties/ls-field-properties.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,iBAAiB;IACpB,QAAQ,CAAiB;IAEjC,YAAY;QACV,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,MAAM,KAAK,CAAC,EAAE,CAAC;YACjD,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;gBACzC,KAAK,WAAW;oBACd,OAAO,qCAA+B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACtE,KAAK,MAAM;oBACT,OAAO,gCAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACjE,KAAK,UAAU;oBACb,OAAO,gCAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACjE,KAAK,MAAM;oBACT,OAAO,gCAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACjE,KAAK,QAAQ;oBACX,OAAO,kCAA4B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACnE,KAAK,UAAU;oBACb,OAAO,oCAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACrE,KAAK,OAAO;oBACV,OAAO,iCAA2B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBAClE,KAAK,OAAO;oBACV,OAAO,iCAA2B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBAClE,KAAK,MAAM;oBACT,OAAO,gCAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACjE,KAAK,UAAU;oBACb,OAAO,gCAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACjE;oBACE,OAAO,mCAA6B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;YAEtE,CAAC;QACH,CAAC;aAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC;YACnD,OAAO,oCAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAAA;IAEpE,CAAC;IAEO,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC/C,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAA;IAEO,WAAW,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAA;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW;YAC3D,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;YACrC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\n\n@Component({\n  tag: 'ls-field-properties',\n  styleUrl: 'ls-field-properties.css',\n  shadow: true,\n})\nexport class LsFieldProperties {\n  @Prop() dataItem: LSApiElement[];\n\n  renderFields() {\n    if (this.dataItem && this.dataItem?.length === 1) {\n      switch (this.dataItem[0].formElementType) {\n        case 'signature':\n          return <ls-field-properties-signature dataItem={this.dataItem[0]} />\n        case 'date':\n          return <ls-field-properties-date dataItem={this.dataItem[0]} />\n        case 'autodate':\n          return <ls-field-properties-date dataItem={this.dataItem[0]} />\n        case 'text':\n          return <ls-field-properties-text dataItem={this.dataItem[0]} />\n        case 'number':\n          return <ls-field-properties-number dataItem={this.dataItem[0]} />\n        case 'autosign':\n          return <ls-field-properties-autosign dataItem={this.dataItem[0]} />\n        case 'email':\n          return <ls-field-properties-email dataItem={this.dataItem[0]} />\n        case 'image':\n          return <ls-field-properties-image dataItem={this.dataItem[0]} />\n        case 'file':\n          return <ls-field-properties-file dataItem={this.dataItem[0]} />\n        case 'dropdown':\n          return <ls-field-properties-file dataItem={this.dataItem[0]} />\n        default:\n          return <ls-field-properties-general dataItem={this.dataItem[0]} />\n\n      }\n    } else if (this.dataItem && this.dataItem?.length > 1)\n      return <ls-field-properties-multiple dataItem={this.dataItem} />\n\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  }\n\n  private handleKeyUp = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  }\n\n  render() {\n    return (\n      <Host onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp}>\n        {this.dataItem && this.renderFields()}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -3,7 +3,6 @@ export class LsFieldPropertiesAdvanced {
     dataItem;
     expanded = false;
     mutate;
-    update;
     isSingle(dt) {
         return dt.length === undefined;
     }
@@ -29,7 +28,6 @@ export class LsFieldPropertiesAdvanced {
             diffs = [{ action: 'update', data: { ...this.dataItem, ...diff } }];
         }
         if (bounceDelay === 0) {
-            this.update.emit(diffs);
             this.mutate.emit(diffs);
         }
         else {
@@ -41,7 +39,6 @@ export class LsFieldPropertiesAdvanced {
         if (this.titletimer)
             clearTimeout(this.titletimer);
         this.titletimer = setTimeout(() => {
-            this.update.emit(diffs);
             this.mutate.emit(diffs);
         }, delay);
     }
@@ -55,10 +52,10 @@ export class LsFieldPropertiesAdvanced {
         return '';
     }
     render() {
-        return (h(Host, { key: 'adc2b87c39dbe48a990e310d319488193fa4363f' }, h("div", { key: 'afe76dc7c97f20a5d02c468749efc624f8a5bd2f', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, h("ls-icon", { key: 'd90e8d469d9e4243f28fbb98725be48589546193', name: this.expanded ? 'expand' : 'collapse', size: "1.25rem", solid: true }), h("p", { key: 'd856a8c15b922468197d35e4b6aee05530a08699' }, "Advanced Properties")), this.expanded && (h("div", { key: '005a9eee056ecfa5c580a719cc80515795dddefc', class: 'field-set' }, h("ls-props-section", { key: 'ffc3a6ce7ba2b75d4b1dfaf92e2a75a451f55988', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, h("input", { key: '0c0486fa164da4f0b38bebbd18d94dd53ebd9181', value: this.getValue('fieldOrder'), type: "number", placeholder: "eg. 1", onInput: e => {
+        return (h(Host, { key: 'e9ac5dd173d35533caa4cd5db2f49b39839619ba' }, h("div", { key: 'af379f38f2482561d4f9ad20261ba2283b902084', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, h("ls-icon", { key: 'a512c02d85d63df763ba2fe7c20ef235f1c1ff5e', name: this.expanded ? 'expand' : 'collapse', size: "1.25rem", solid: true }), h("p", { key: '4e5fd01f51c5afe298712e0335b3aba3aa1d703c' }, "Advanced Properties")), this.expanded && (h("div", { key: '1bf64e8cad73f6a2c1eaae417b33199d050b3313', class: 'field-set' }, h("ls-props-section", { key: '909312980807fd6ca0919147e6e4739f0b3ec44e', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, h("input", { key: '4f970be565a2a38076def87d0c1b21db197ba9ba', value: this.getValue('fieldOrder'), type: "number", placeholder: "eg. 1", onInput: e => {
                 console.log(e);
                 this.alter({ fieldOrder: e.target.value }, 100);
-            }, onChange: () => { console.log('onchange'); } })), h("ls-props-section", { key: 'ba15bc93246434122c4fb2643b2219f3b7d34d83', sectionTitle: "Ref. Name" }, h("input", { key: 'f6863eb4dda557936717be368a3bb97aa66a743a', value: this.getValue('link'), placeholder: "eg. checkbox group", onInput: e => this.alter({ link: e.target.value }, 300) })), h("ls-props-section", { key: '92abbd7166def72c7022722c1ce974176715002f', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, h("select", { key: '7bdcb137b35ec05b952cb20794e18805ec044285', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, h("option", { key: 'f2d2fc0434936e4bff0f73cec02b7b691374530f', value: "0", selected: this.getValue('linkType') === '0' }, "None"), h("option", { key: 'e2b51d08c8919fce07fb9c59cf8d00d7b79faa9e', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), h("option", { key: '6d490150eaab50b67ffc5cd0f598d72da8367d1b', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), h("option", { key: 'c08d94ebd13055167b1e1e5ae914007213cbabfc', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), h("ls-props-section", { key: '22170d401110443ff1559b3b937a6e64e01ffec1', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, h("input", { key: '3f561f9faf0924e8c4bc853dcc0cbcb41211a358', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
+            }, onChange: () => { console.log('onchange'); } })), h("ls-props-section", { key: 'd8aebb59d99983d424b4aceb9f1c9c7993a73f74', sectionTitle: "Ref. Name" }, h("input", { key: 'd685a14ca825dc2937199d9796406ff1c3e3c170', value: this.getValue('link'), placeholder: "eg. checkbox group", onInput: e => this.alter({ link: e.target.value }, 300) })), h("ls-props-section", { key: 'b8f6177da6587e0cde03e4e337241aa90bba900d', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, h("select", { key: 'c5da59c1417b54ee5df7569fb5ba1f3fe7ccdbe5', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, h("option", { key: '710d749eb5e84d8366b020d2ef941e4325aa84e7', value: "0", selected: this.getValue('linkType') === '0' }, "None"), h("option", { key: '44f2fb1516921a1b9b52597e64106ace62bd5093', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), h("option", { key: '85797cf5c3e386a6d5666c786c9df90b4634dd4f', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), h("option", { key: '4d6280c6fb0b674ece811c9b211ce9ad21262b64', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), h("ls-props-section", { key: '72897363a045674a9653588cf5a0903ede05eff2', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, h("input", { key: 'b3a0bfd715ea6d402072e828baf20022b562992c', 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"; }
@@ -76,7 +73,6 @@ export class LsFieldPropertiesAdvanced {
         return {
             "dataItem": {
                 "type": "unknown",
-                "attribute": "data-item",
                 "mutable": true,
                 "complexType": {
                     "original": "LSApiElement | LSApiElement[]",
@@ -100,7 +96,6 @@ export class LsFieldPropertiesAdvanced {
             },
             "expanded": {
                 "type": "boolean",
-                "attribute": "expanded",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -116,6 +111,7 @@ export class LsFieldPropertiesAdvanced {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "expanded",
                 "defaultValue": "false"
             }
         };
@@ -142,27 +138,6 @@ export class LsFieldPropertiesAdvanced {
                         }
                     }
                 }
-            }, {
-                "method": "update",
-                "name": "update",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "LSMutateEvent[]",
-                    "resolved": "LSMutateEvent[]",
-                    "references": {
-                        "LSMutateEvent": {
-                            "location": "import",
-                            "path": "../../types/LSMutateEvent",
-                            "id": "src/types/LSMutateEvent.ts::LSMutateEvent"
-                        }
-                    }
-                }
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ls-field-properties-advanced.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-advanced/ls-field-properties-advanced.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\n\n@Component({\n  tag: 'ls-field-properties-advanced',\n  styleUrl: 'ls-field-properties-advanced.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesAdvanced {\n  @Prop({ mutable: true }) dataItem: LSApiElement | LSApiElement[];\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n    return (dt as LSApiElement[]).length === undefined;\n  }\n\n  isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n    return typeof (dt as LSApiElement[]).length === 'number';\n  }\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object, bounceDelay: number = 0) {\n    console.log('Altering advanced props:', diff);\n    let diffs = [];\n    if (this.isMultiple(this.dataItem)) {\n      this.dataItem = this.dataItem.map(di => {\n        return { ...di, ...diff } as LSApiElement;\n      });\n\n      diffs = this.dataItem.map(di => {\n        return { action: 'update', data: { ...di, ...diff } as LSApiElement } as LSMutateEvent;\n      });\n    } else if (this.isSingle(this.dataItem)) {\n      this.dataItem = { ...this.dataItem, ...diff };\n\n      diffs = [{ action: 'update', data: { ...this.dataItem, ...diff } }];\n    }\n\n    if (bounceDelay === 0) {\n      this.update.emit(diffs);\n      this.mutate.emit(diffs);\n    }\n    else {\n      this.debounce(diffs, bounceDelay);\n    }\n  }\n\n  private titletimer;\n\n  debounce(diffs, delay) {\n    if (this.titletimer) clearTimeout(this.titletimer);\n\n    this.titletimer = setTimeout(() => {\n      this.update.emit(diffs);\n      this.mutate.emit(diffs);\n    }, delay);\n  }\n\n  getValue(key) {\n    if (this.isMultiple(this.dataItem)) {\n      return '';\n    } else if (this.isSingle(this.dataItem)) {\n      return this.dataItem[key];\n    }\n    return '';\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'expand-fields-row'} onClick={() => (this.expanded = !this.expanded)}>\n          <ls-icon name={this.expanded ? 'expand' : 'collapse'} size=\"1.25rem\" solid />\n          <p>Advanced Properties</p>\n        </div>\n        {this.expanded && (\n          <div class={'field-set'}>\n            <ls-props-section sectionTitle=\"Field Order\" sectionDescription=\"Determines what order fields will be filled in by the user\">\n              <input value={this.getValue('fieldOrder')} type=\"number\" placeholder=\"eg. 1\" onInput={e => {\n                console.log(e);\n                this.alter({ fieldOrder: (e.target as HTMLInputElement).value }, 100)\n              }} \n              onChange={() => { console.log('onchange')}}\n              />\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Ref. Name\">\n              <input value={this.getValue('link')} placeholder=\"eg. checkbox group\" onInput={e => this.alter({ link: (e.target as HTMLInputElement).value }, 300)} />\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Link Type\" sectionDescription=\"Determines  in what way this field is linked to other fields\">\n              <select onChange={e => this.alter({ linkType: (e.target as HTMLInputElement).value })} name=\"Link Field\" aria-label=\"Link Field\">\n                <option value=\"0\" selected={this.getValue('linkType') === '0'}>\n                  None\n                </option>\n                <option value=\"1\" selected={this.getValue('linkType') === '1'}>\n                  One of a group (e.g. select one checkbox)\n                </option>\n                <option value=\"2\" selected={this.getValue('linkType') === '2'}>\n                  Add to a total\n                </option>\n                <option value=\"3\" selected={this.getValue('linkType') === '3'}>\n                  Make this conditional upon...\n                </option>\n              </select>\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Link Value\" sectionDescription=\"Fields with the same Link Value will be linked together\">\n              <input\n                value={this.getValue('logicAction')}\n                width=\"30\"\n                placeholder=\"eg. checkbox group\"\n                onChange={e => this.alter({ logicAction: (e.target as HTMLInputElement).value })}\n              />\n            </ls-props-section>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-field-properties-advanced.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-advanced/ls-field-properties-advanced.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\n\n@Component({\n  tag: 'ls-field-properties-advanced',\n  styleUrl: 'ls-field-properties-advanced.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesAdvanced {\n  @Prop({ mutable: true }) dataItem: LSApiElement | LSApiElement[];\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n    return (dt as LSApiElement[]).length === undefined;\n  }\n\n  isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n    return typeof (dt as LSApiElement[]).length === 'number';\n  }\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object, bounceDelay: number = 0) {\n    console.log('Altering advanced props:', diff);\n    let diffs = [];\n    if (this.isMultiple(this.dataItem)) {\n      this.dataItem = this.dataItem.map(di => {\n        return { ...di, ...diff } as LSApiElement;\n      });\n\n      diffs = this.dataItem.map(di => {\n        return { action: 'update', data: { ...di, ...diff } as LSApiElement } as LSMutateEvent;\n      });\n    } else if (this.isSingle(this.dataItem)) {\n      this.dataItem = { ...this.dataItem, ...diff };\n\n      diffs = [{ action: 'update', data: { ...this.dataItem, ...diff } }];\n    }\n\n    if (bounceDelay === 0) {\n      this.mutate.emit(diffs);\n    }\n    else {\n      this.debounce(diffs, bounceDelay);\n    }\n  }\n\n  private titletimer;\n\n  debounce(diffs, delay) {\n    if (this.titletimer) clearTimeout(this.titletimer);\n\n    this.titletimer = setTimeout(() => {\n      this.mutate.emit(diffs);\n    }, delay);\n  }\n\n  getValue(key) {\n    if (this.isMultiple(this.dataItem)) {\n      return '';\n    } else if (this.isSingle(this.dataItem)) {\n      return this.dataItem[key];\n    }\n    return '';\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'expand-fields-row'} onClick={() => (this.expanded = !this.expanded)}>\n          <ls-icon name={this.expanded ? 'expand' : 'collapse'} size=\"1.25rem\" solid />\n          <p>Advanced Properties</p>\n        </div>\n        {this.expanded && (\n          <div class={'field-set'}>\n            <ls-props-section sectionTitle=\"Field Order\" sectionDescription=\"Determines what order fields will be filled in by the user\">\n              <input value={this.getValue('fieldOrder')} type=\"number\" placeholder=\"eg. 1\" onInput={e => {\n                console.log(e);\n                this.alter({ fieldOrder: (e.target as HTMLInputElement).value }, 100)\n              }} \n              onChange={() => { console.log('onchange')}}\n              />\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Ref. Name\">\n              <input value={this.getValue('link')} placeholder=\"eg. checkbox group\" onInput={e => this.alter({ link: (e.target as HTMLInputElement).value }, 300)} />\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Link Type\" sectionDescription=\"Determines  in what way this field is linked to other fields\">\n              <select onChange={e => this.alter({ linkType: (e.target as HTMLInputElement).value })} name=\"Link Field\" aria-label=\"Link Field\">\n                <option value=\"0\" selected={this.getValue('linkType') === '0'}>\n                  None\n                </option>\n                <option value=\"1\" selected={this.getValue('linkType') === '1'}>\n                  One of a group (e.g. select one checkbox)\n                </option>\n                <option value=\"2\" selected={this.getValue('linkType') === '2'}>\n                  Add to a total\n                </option>\n                <option value=\"3\" selected={this.getValue('linkType') === '3'}>\n                  Make this conditional upon...\n                </option>\n              </select>\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Link Value\" sectionDescription=\"Fields with the same Link Value will be linked together\">\n              <input\n                value={this.getValue('logicAction')}\n                width=\"30\"\n                placeholder=\"eg. checkbox group\"\n                onChange={e => this.alter({ logicAction: (e.target as HTMLInputElement).value })}\n              />\n            </ls-props-section>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -20,7 +20,6 @@ export class LsFieldPropertiesAutosign {
         return {
             "dataItem": {
                 "type": "unknown",
-                "attribute": "data-item",
                 "mutable": false,
                 "complexType": {
                     "original": "LSApiElement",

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

@@ -1 +1 @@
-{"version":3,"file":"ls-field-properties-autosign.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-autosign/ls-field-properties-autosign.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,yBAAyB;IAC5B,QAAQ,CAAe;IAE9B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,6BAA6B,sBAAuB;YAChE;;gBAAY,8DAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,GAAE,CAAM;YAClE,4EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YAChD,qFAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YAExD,wEAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YAC7C,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACH","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-autosign',\n  styleUrl: 'ls-field-properties-autosign.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesAutosign {\n  @Prop() dataItem: LSApiElement;\n \n   render() {\n     return (\n       <Host>\n         <div class={\"ls-field-properties-section\"}>Self Sign Field</div>\n         <div>Label: <input value={this.dataItem?.label} width=\"30\"/></div>\n         <ls-field-dimensions dataItem={this.dataItem} />\n         <ls-field-properties-advanced dataItem={this.dataItem} />\n\n          <ls-field-footer dataItem={this.dataItem} />\n         <slot></slot>\n       </Host>\n     );\n   }\n}\n"]}
+{"version":3,"file":"ls-field-properties-autosign.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-autosign/ls-field-properties-autosign.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,yBAAyB;IAC5B,QAAQ,CAAe;IAE9B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,6BAA6B,sBAAuB;YAChE;;gBAAY,8DAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,GAAE,CAAM;YAClE,4EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YAChD,qFAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YAExD,wEAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YAC7C,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACH","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-autosign',\n  styleUrl: 'ls-field-properties-autosign.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesAutosign {\n  @Prop() dataItem: LSApiElement;\n \n   render() {\n     return (\n       <Host>\n         <div class={\"ls-field-properties-section\"}>Self Sign Field</div>\n         <div>Label: <input value={this.dataItem?.label} width=\"30\"/></div>\n         <ls-field-dimensions dataItem={this.dataItem} />\n         <ls-field-properties-advanced dataItem={this.dataItem} />\n\n          <ls-field-footer dataItem={this.dataItem} />\n         <slot></slot>\n       </Host>\n     );\n   }\n}\n"]}