legalesign-document-viewer 0.7.2 → 0.7.3

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

@@ -1,376 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  width: 100%;
-  position: relative;
-}
-
-.ls-toolbar-numeric {
-  width: 2.813rem;
-  max-height: 1.125rem;
-  margin: 0px;
-  padding: 0px;
-}
-
-* {
-  margin: 0;
-  box-sizing: border-box;
-}
-
-.field-set {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  width: 100%;
-}
-
-.ls-field-properties-section {
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.row {
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.multi-button-group-row {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.ls-field-properties-section-text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 0.25rem;
-}
-
-.ls-field-properties-section-title {
-  color: var(--gray-90, #5e6066);
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 1.25rem; /* 142.857% */
-}
-
-.ls-field-properties-section-description {
-  overflow: hidden;
-  color: var(--gray-80, #6c6e73);
-  text-overflow: ellipsis;
-  font-size: 0.75rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 0.75rem; /* 120% */
-}
-
-.input-row {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.input-row .input-wrapper input {
-  width: 9.313rem;
-  max-width: 9.313rem;
-}
-
-/* Global Styles */
-
-p {
-  color: var(--gray-80, #6c6e73);
-  font-family: var(--font-family);
-  font-size: var(--text-sm);
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--text-sm-line-height);
-}
-
-a {
-  color: var(--primary-60, #4456f6);
-  font-size: var(--text-sm);
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--text-sm-line-height);
-  cursor: pointer;
-}
-
-a:hover {
-  text-decoration: underline;
-  color: var(--primary-70, #2134dc);
-}
-
-.button-link,
-.button-link:hover {
-  all: unset;
-}
-
-select {
-  appearance: none;
-  height: 36px;
-}
-
-.input-wrapper {
-  position: relative;
-  width: 100%;
-}
-
-#selectorIcon {
-  position: absolute;
-  top: 50%;
-  right: 0.675rem;
-  transform: translateY(-50%);
-  pointer-events: none;
-  color: var(--gray-80, #6c6e73);
-}
-
-#selectLeadingIcon {
-  position: absolute;
-  top: 50%;
-  left: 0.675rem;
-  transform: translateY(-50%);
-  pointer-events: none;
-  color: var(--gray-80, #6c6e73);
-}
-
-#selectLeadingIconDisabled {
-  position: absolute;
-  top: 50%;
-  left: 0.675rem;
-  transform: translateY(-50%);
-  pointer-events: none;
-  color: var(--gray-50, #d8d9dc);
-}
-
-.has-leading-icon {
-  padding-left: 2.5rem;
-}
-
-input,
-select,
-textarea {
-  border: 1px solid var(--gray-40, #d8d9dc);
-  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);
-  padding: 0.5rem 0.75rem;
-  font-family: var(--font-family);
-  font-size: var(--text-sm);
-  border-radius: 0.5rem;
-  color: var(--gray-100, #45484d);
-  font-weight: 400;
-}
-
-input::placeholder,
-select::placeholder,
-textarea::placeholder {
-  color: var(--gray-60, #afb0b2);
-}
-
-input:hover:not(:disabled),
-select:hover:not(:disabled),
-textarea:hover:not(:disabled) {
-  border-color: var(--gray-50, #c8c9cc);
-  background-color: var(--white, #fff);
-}
-
-input:focus:not(:disabled),
-select:focus:not(:disabled),
-textarea:focus:not(:disabled) {
-  outline: none;
-  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);
-  border-color: var(--primary-60, #4456f6);
-  background-color: var(--white, #fff);
-}
-
-input:active:not(:disabled),
-select:active:not(:disabled),
-textarea:active:not(:disabled) {
-  border-color: var(--primary-50, #5185ff);
-}
-
-input:disabled,
-select:disabled,
-textarea:disabled {
-  cursor: not-allowed;
-  background-color: var(--gray-10, #f7f8fa);
-  color: var(--gray-50, #d8d9dc);
-  box-shadow: none;
-}
-
-input[type='checkbox'] {
-  appearance: none;
-  position: relative;
-  height: 1rem;
-  width: 1rem;
-  padding: 0.25rem;
-  border-radius: var(--radius-sm);
-  border: 1px solid #d1d5db;
-  background-color: #ffffff;
-  cursor: pointer;
-}
-
-input[type='checkbox']:checked,
-input[type='checkbox'].indeterminate {
-  background-color: var(--primary-60, #4456f6);
-  border: none;
-}
-
-input[type='checkbox']:checked::after {
-  content: '';
-  position: absolute;
-  top: 45%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);
-  width: 0.5rem;
-  height: 0.25rem;
-  border-bottom: 0.125rem solid white;
-  border-right: 0.125rem solid white;
-}
-
-input[type='checkbox'].indeterminate::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 0.5rem;
-  height: 0.125rem;
-  background-color: white;
-}
-
-input[type='checkbox']:checked:hover,
-input[type='checkbox'].indeterminate:hover {
-  background-color: var(--primary-70, #2134dc);
-  border: none;
-}
-
-input[type='checkbox']:hover {
-  border: 1px solid #9ca3af;
-}
-
-input[type='checkbox']:focus,
-input[type='checkbox']:active {
-  outline: none;
-  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);
-  background-color: #f0f4f8;
-}
-
-input[type='checkbox']:disabled {
-  background-color: #f3f4f6;
-  outline: none;
-  cursor: not-allowed;
-}
-
-input[type='checkbox']:disabled:checked {
-  background-color: #e5e7eb;
-  border: none;
-  outline: none;
-  cursor: not-allowed;
-}
-
-.checkbox-container {
-  display: flex;
-  gap: 0.5rem;
-  width: 100%;
-}
-
-.checkbox-label {
-  color: var(--gray-100, #45484d);
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1rem;
-}
-
-.form-label {
-  color: var(--gray-100, #45484d);
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 1.5rem;
-}
-
-.form-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  width: 100%;
-}
-
-.loading-box {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100vh;
-  color: var(--primary-60, #0c7cba);
-}
-
-button {
-  border: 0;
-  appearance: button;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-lg);
-  background-color: var(--primary-60, #4456f6);
-  color: white;
-  text-transform: capitalize;
-  min-height: 2.25rem;
-  min-width: 2.25rem;
-}
-
-button.tertiaryGrey {
-  border: 1px solid var(--gray-40, #d8d9dc);
-  background-color: white;
-  color: var(--gray-80, #787a80);
-}
-
-button.tertiaryGrey:hover {
-  border: 1px solid var(--gray-50, #c8c9cc);
-  background: var(--gray-10, #f7f8fa);
-}
-
-.button-group {
-  display: flex;
-  border-radius: 0.5rem;
-  border: 1px solid var(--gray-30, #e0e2e5);
-  background: var(--white, #ffffff);
-  overflow: clip;
-  width: 100%;
-}
-
-.button-group button {
-  display: flex;
-  width: 100%;
-  background: transparent;
-  border-radius: unset;
-  padding: 0.25rem 0.75rem;
-  min-width: 2.156rem;
-  color: var(--gray-80, #6c6e73);
-}
-
-.button-group button:disabled {
-  background: var(--gray-10, #f7f8fa);
-  cursor: not-allowed;
-  color: var(--gray-50, #d8d9dc);
-}
-
-.button-group button:hover {
-  background: var(--gray-10, #f7f8fa);
-}
-
-.button-group > :first-child {
-  border-radius: 0.5rem 0 0 0.5rem;
-}
-
-.button-group > :last-child {
-  border-radius: 0 0.5rem 0.5rem 0;
-}
-
-.button-group > :not(:first-child) {
-  border-left: 1px solid var(--gray-30, #e0e2e5);
-}

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

@@ -1,213 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { oob } from "../ls-document-viewer/editorUtils";
-import { attachAllTooltips } from "../../utils/tooltip";
-import { outOfBounds } from "../ls-document-viewer/mouseHandlers";
-export class LsFieldDistribute {
-    dataItem;
-    mutate;
-    component;
-    // Send one or more mutations up the chain
-    // The source of the chain fires the mutation
-    alter(diff) {
-        console.log(diff);
-        const diffs = this.dataItem.map(c => {
-            return { action: 'update', data: { ...c, ...diff } };
-        });
-        this.dataItem = diffs.map(d => d.data);
-        this.mutate.emit(diffs);
-    }
-    distributeHorizontal() {
-        var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space');
-        const sorted = this.dataItem.sort((a, b) => a.left - b.left);
-        if (sorted.length < 3)
-            return;
-        var avgspace = 0;
-        const leftmost = sorted[0].left + sorted[0].width / 2;
-        const rightmost = sorted.reduce((acc, cur) => {
-            return cur.left + (cur.width / 2) > acc ? cur.left + (cur.width / 2) : acc;
-        }, leftmost);
-        // find total width between centre first and centre last
-        const totalWidth = rightmost - leftmost;
-        if (spacing.value !== '') {
-            avgspace = parseInt(spacing.value);
-        }
-        else {
-            avgspace = Math.floor(totalWidth / (sorted.length - 1));
-        }
-        const filtered = sorted.filter((c, index) => {
-            return outOfBounds({ ...c, left: (Math.floor(leftmost - (c.width / 2) + avgspace * index)) }) === false
-                && index !== 0
-                && index !== sorted.length - 1;
-        });
-        const diffs = filtered.map((c, index) => {
-            return {
-                action: 'update',
-                data: {
-                    ...c,
-                    left: Math.floor(leftmost - (c.width / 2) + (avgspace * (index + 1))),
-                },
-            };
-        });
-        this.dataItem = diffs.map(d => d.data);
-        this.mutate.emit(diffs);
-    }
-    gapVertical(spacing) {
-        const sorted = this.dataItem.sort((a, b) => a.top - b.top);
-        var buffer = sorted[0].top;
-        const diffs = sorted.map(c => {
-            const newTop = buffer;
-            buffer = buffer + c.height + spacing;
-            const target = {
-                ...c,
-                top: newTop,
-            };
-            return {
-                action: 'update',
-                data: oob(target)
-                    ? {
-                        ...c,
-                        left: c.pageDimensions.height - c.height - 1,
-                    }
-                    : target,
-            };
-        });
-        this.dataItem = diffs.map(d => d.data);
-        this.mutate.emit(diffs);
-    }
-    gapHorizontal(spacing) {
-        const sorted = this.dataItem.sort((a, b) => a.top - b.top);
-        var buffer = sorted[0].left;
-        const diffs = sorted.map(c => {
-            const newLeft = buffer;
-            buffer = buffer + c.width + spacing;
-            const target = {
-                ...c,
-                left: newLeft,
-            };
-            console.log(target, oob(target));
-            return {
-                action: 'update',
-                data: oob(target)
-                    ? {
-                        ...c,
-                        left: c.pageDimensions.width - c.width - 1,
-                    }
-                    : target,
-            };
-        });
-        this.dataItem = diffs.map(d => d.data);
-        this.mutate.emit(diffs);
-    }
-    distributeVertical() {
-        var spacing = this.component.shadowRoot.getElementById('ls-fix-vertical-space');
-        var avgspace = 0;
-        const sorted = this.dataItem.sort((a, b) => a.top - b.top);
-        const topmost = sorted[0].top + sorted[0].height / 2;
-        const bottommost = sorted.reduce((acc, cur) => {
-            return cur.top + (cur.height / 2) > acc ? cur.top + (cur.height / 2) : acc;
-        }, topmost);
-        // find total width between centre first and centre last
-        const totalHeight = bottommost - topmost;
-        if (spacing.value !== '') {
-            avgspace = parseInt(spacing.value);
-        }
-        else {
-            avgspace = Math.floor(totalHeight / (sorted.length - 1));
-        }
-        const filtered = sorted.filter((c, index) => {
-            return outOfBounds({ ...c, left: Math.floor(topmost - (c.height / 2) + avgspace * index) }) === false
-                && index !== 0
-                && index !== sorted.length - 1;
-        });
-        const diffs = filtered.map((c, index) => {
-            return {
-                action: 'update',
-                data: {
-                    ...c,
-                    top: Math.floor(topmost - (c.height / 2) + (avgspace * (index + 1))),
-                },
-            };
-        });
-        this.dataItem = diffs.map(d => d.data);
-        this.mutate.emit(diffs);
-    }
-    componentDidLoad() {
-        attachAllTooltips(this.component.shadowRoot);
-    }
-    render() {
-        return (h(Host, { key: '2dc1fd7c959e47152606e0d9e33957360c1b5749' }, h("div", { key: 'd6f0f35db71da1dada1f6019a057aee790dd6658', class: 'ls-field-properties-section' }, h("div", { key: 'b5f84d074b466dd808589d002705a5622be50095', class: 'ls-field-properties-section-text' }, h("p", { key: 'eb160f54b7d5bb086b75e0ba73e49397359bf399', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: 'abc2a24cd68164834c22a14c1ce48e07d5beb694', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '4be9f1d801ea9e1ba669bfb8fa99c337585233e6', class: 'button-group' }, h("button", { key: '8809552c0f1ec0a716b7ef0d07b5761073973e93', onClick: () => {
-                this.distributeVertical();
-            }, "aria-label": "Distribute selected fields vertically.", "data-tooltip": "Distribute selected fields vertically" }, h("ls-icon", { key: '0ce63993f3a52ce3b16f554c3b5994fb0474a836', name: "field-distribute-vertically" })), h("button", { key: '099191b1acbf4232696851e9a670f59f05c9f268', onClick: () => {
-                this.distributeHorizontal();
-            }, "aria-label": "Distribute selected fields horizontally.", "data-tooltip": "Distribute selected fields horizontally" }, h("ls-icon", { key: 'f389520c07cf41ff78776664c3b92d22542b7de2', name: "field-distribute-horizontally" })))), h("div", { key: 'e1a82d933b8e86f93461e560c95e1edba920b289', class: 'ls-field-properties-section' }, h("div", { key: '83cc86d7c84e7e3a7f2cd32a8adbff4124c64fa5', class: 'ls-field-properties-section-text' }, h("p", { key: 'bb03d2e030a884530a6dbab63f130a121e9a8c61', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: 'b00c922441382362e923aa33d30669924ba71cac', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '3abaa8c4b16bf6f1c4d47f69be90e72d1ede86a9', class: 'input-row' }, h("div", { key: 'dc6d380c9a99d0ca495cde30a31acc5a3611361d', class: 'input-wrapper', "data-tooltip": "Set vertical gap between selected fields" }, h("ls-icon", { key: 'fd04259c8a621bdc784b5fe1a914d65ce3a19e9c', id: "selectLeadingIcon", name: "field-distribute-vertically" }), h("input", { key: 'f03c084cfc0c1d022bae8cbd3e40edc8b27f81fb', type: "number", class: 'has-leading-icon', id: "ls-fix-vertical-space", onChange: e => {
-                this.gapVertical(parseInt(e.target.value));
-            }, min: 0, max: 9999, value: '', size: 4 })), h("div", { key: '55eea802d6943a2774b45e06ce87a32a071612cc', class: 'input-wrapper', "data-tooltip": "Set horizontal gap between selected fields" }, h("ls-icon", { key: '715a43e1168563155cc4446b41aa866d166157bf', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), h("input", { key: '1c83fc9a0790cacdf2a887989eadd5f00bc09890', type: "number", class: 'has-leading-icon', id: "ls-fix-horizontal-space", onChange: e => {
-                this.gapHorizontal(parseInt(e.target.value));
-            }, min: 0, max: 9999, value: '', size: 4 })))), h("ls-tooltip", { key: 'e64443dde917a8ba69305aa11049e38f6ccb11c9', id: "ls-tooltip-master" }), h("slot", { key: 'ecfeac46983db95715a424fc9d43928c88e14d02' })));
-    }
-    static get is() { return "ls-field-distribute"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ls-field-distribute.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ls-field-distribute.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "dataItem": {
-                "type": "unknown",
-                "mutable": true,
-                "complexType": {
-                    "original": "LSApiElement[]",
-                    "resolved": "LSApiElement[]",
-                    "references": {
-                        "LSApiElement": {
-                            "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::LSApiElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "mutate",
-                "name": "mutate",
-                "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"; }
-}
-//# sourceMappingURL=ls-field-distribute.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ls-field-distribute.js","sourceRoot":"","sources":["../../../src/components/ls-field-distribute/ls-field-distribute.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { oob } from '../ls-document-viewer/editorUtils';\nimport { attachAllTooltips } from '../../utils/tooltip';\nimport { outOfBounds } from '../ls-document-viewer/mouseHandlers';\n\n@Component({\n  tag: 'ls-field-distribute',\n  styleUrl: 'ls-field-distribute.css',\n  shadow: true,\n})\nexport class LsFieldDistribute {\n  @Prop({\n    mutable: true,\n  })\n  dataItem: LSApiElement[];\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Element() component: HTMLElement;\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  alter(diff: object) {\n    console.log(diff);\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n    });\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  distributeHorizontal() {\n    var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space') as HTMLInputElement;\n    const sorted = this.dataItem.sort((a, b) => a.left - b.left);\n    if (sorted.length < 3) return;\n\n\n    var avgspace = 0;\n    const leftmost = sorted[0].left + sorted[0].width / 2;\n    const rightmost = sorted.reduce((acc, cur) => {\n      return cur.left + (cur.width / 2) > acc ? cur.left + (cur.width / 2) : acc;\n    }, leftmost);\n    // find total width between centre first and centre last\n    const totalWidth: number = rightmost - leftmost;\n\n    if (spacing.value !== '') {\n      avgspace = parseInt(spacing.value);\n    } else {\n      avgspace = Math.floor(totalWidth / (sorted.length - 1));\n    }\n\n    const filtered = sorted.filter((c, index) => {\n      return outOfBounds({ ...c, left: (Math.floor(leftmost - (c.width / 2) + avgspace * index)) }) === false\n        && index !== 0\n        && index !== sorted.length - 1\n    });\n\n    const diffs: LSMutateEvent[] = filtered.map((c, index) => {\n\n      return {\n        action: 'update',\n        data: {\n          ...c,\n          left: Math.floor(leftmost - (c.width / 2) + (avgspace * (index + 1))),\n        } as LSApiElement,\n      };\n    });\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  gapVertical(spacing: number) {\n    const sorted = this.dataItem.sort((a, b) => a.top - b.top);\n\n    var buffer = sorted[0].top;\n\n    const diffs: LSMutateEvent[] = sorted.map(c => {\n      const newTop = buffer;\n      buffer = buffer + c.height + spacing;\n      const target = {\n        ...c,\n        top: newTop,\n      } as LSApiElement;\n\n      return {\n        action: 'update',\n        data: oob(target)\n          ? ({\n            ...c,\n            left: c.pageDimensions.height - c.height - 1,\n          } as LSApiElement)\n          : target,\n      };\n    });\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  gapHorizontal(spacing: number) {\n    const sorted = this.dataItem.sort((a, b) => a.top - b.top);\n\n    var buffer = sorted[0].left;\n\n    const diffs: LSMutateEvent[] = sorted.map(c => {\n      const newLeft = buffer;\n      buffer = buffer + c.width + spacing;\n      const target = {\n        ...c,\n        left: newLeft,\n      } as LSApiElement;\n\n      console.log(target, oob(target));\n\n      return {\n        action: 'update',\n        data: oob(target)\n          ? ({\n            ...c,\n            left: c.pageDimensions.width - c.width - 1,\n          } as LSApiElement)\n          : target,\n      };\n    });\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  distributeVertical() {\n    var spacing = this.component.shadowRoot.getElementById('ls-fix-vertical-space') as HTMLInputElement;\n    var avgspace = 0;\n    const sorted = this.dataItem.sort((a, b) => a.top - b.top);\n\n    const topmost = sorted[0].top + sorted[0].height / 2;\n    const bottommost = sorted.reduce((acc, cur) => {\n      return cur.top + (cur.height / 2) > acc ? cur.top + (cur.height / 2) : acc;\n    }, topmost);\n    // find total width between centre first and centre last\n    const totalHeight: number = bottommost - topmost;\n\n    if (spacing.value !== '') {\n      avgspace = parseInt(spacing.value);\n    } else {\n      avgspace = Math.floor(totalHeight / (sorted.length - 1));\n    }\n\n    const filtered = sorted.filter((c, index) => {\n      return outOfBounds({ ...c, left: Math.floor(topmost - (c.height / 2) + avgspace * index) }) === false\n        && index !== 0\n        && index !== sorted.length - 1\n    });\n\n    const diffs: LSMutateEvent[] = filtered.map((c, index) => {\n\n      return {\n        action: 'update',\n        data: {\n          ...c,\n          top: Math.floor(topmost - (c.height / 2) + (avgspace * (index + 1))),\n        } as LSApiElement,\n      };\n    });\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'ls-field-properties-section'}>\n          <div class={'ls-field-properties-section-text'}>\n            <p class={'ls-field-properties-section-title'}>Distribution</p>\n            <p class={'ls-field-properties-section-description'}>Multi-select fields and evenly space them out</p>\n          </div>\n          <div class={'button-group'}>\n            <button\n              onClick={() => {\n                this.distributeVertical();\n              }}\n              aria-label=\"Distribute selected fields vertically.\"\n              data-tooltip=\"Distribute selected fields vertically\"\n            >\n              <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n            </button>\n            <button\n              onClick={() => {\n                this.distributeHorizontal();\n              }}\n              aria-label=\"Distribute selected fields horizontally.\"\n              data-tooltip=\"Distribute selected fields horizontally\"\n            >\n              <ls-icon name=\"field-distribute-horizontally\"></ls-icon>\n            </button>\n          </div>\n        </div>\n        <div class={'ls-field-properties-section'}>\n          <div class={'ls-field-properties-section-text'}>\n            <p class={'ls-field-properties-section-title'}>Gap</p>\n            <p class={'ls-field-properties-section-description'}>Define the exact gap between multi-select fields.</p>\n          </div>\n          <div class={'input-row'}>\n            <div class={'input-wrapper'} data-tooltip=\"Set vertical gap between selected fields\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"field-distribute-vertically\"></ls-icon>\n              <input\n                type=\"number\"\n                class={'has-leading-icon'}\n                id=\"ls-fix-vertical-space\"\n                onChange={e => {\n                  this.gapVertical(parseInt((e.target as HTMLInputElement).value));\n                }}\n                min={0}\n                max={9999}\n                value={''}\n                size={4}\n              />\n            </div>\n            <div class={'input-wrapper'} data-tooltip=\"Set horizontal gap between selected fields\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"field-distribute-horizontally\"></ls-icon>\n              <input\n                type=\"number\"\n                class={'has-leading-icon'}\n                id=\"ls-fix-horizontal-space\"\n                onChange={e => {\n                  this.gapHorizontal(parseInt((e.target as HTMLInputElement).value));\n                }}\n                min={0}\n                max={9999}\n                value={''}\n                size={4}\n              />\n            </div>\n          </div>\n        </div>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,55 +0,0 @@
-:host {
-  display: block;
-}
-
-.button-footer {
-  display: flex;
-  padding-top: 1rem;
-  border-top: 1px solid var(--gray-20, #f0f1f2);
-  flex-direction: column;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  margin-top: auto;
-}
-
-
-button.secondary {
-  border: 1px solid var(--gray-50, #c8c9cc);
-  background: var(--white, #fff);
-  color: var(--gray-90, #5e6066);
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-}
-
-button.secondary:hover {
-  border: 1px solid var(--gray-50, #c8c9cc);
-  background: var(--gray-10, #f7f8fa);
-}
-
-button.destructive {
-  border: 1px solid var(--red-60, #f04438);
-  background-color: white;
-  color: var(--red-60);
-}
-
-button.destructive:hover {
-  border: 1px solid var(--red-70, #d92d20);
-  background: var(--red-10, #fff1f0);
-}
-
-button {
-  display: flex;
-  gap: 0.5rem;
-  border: 0;
-  appearance: button;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-lg);
-  background-color: var(--primary-60, #4456f6);
-  color: white;
-  font-weight: 500;
-  text-transform: capitalize;
-  min-height: 2.25rem;
-  min-width: 2.25rem;
-}