legalesign-document-viewer 0.7.1 → 0.7.2

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

@@ -0,0 +1,376 @@
+: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/{ls-document-viewer/ls-field-distribute.entry.js → collection/components/ls-field-distribute/ls-field-distribute.js}

@@ -1,18 +1,11 @@
-import { r as registerInstance, d as createEvent, e as getElement, h, a as Host } from './index-DANCsk1i.js';
-import { o as oob } from './editorUtils-KdYXvZ56.js';
-import { a as attachAllTooltips } from './tooltip-Cb8nDMs-.js';
-import { o as outOfBounds } from './mouseHandlers-8wT9GBoG.js';
-
-const lsFieldDistributeCss = () => `: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;}.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;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}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)}`;
-
-const LsFieldDistribute = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mutate = createEvent(this, "mutate", 7);
-    }
+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;
-    get component() { return getElement(this); }
+    component;
     // Send one or more mutations up the chain
     // The source of the chain fires the mutation
     alter(diff) {
@@ -152,8 +145,69 @@ const LsFieldDistribute = class {
                 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' })));
     }
-};
-LsFieldDistribute.style = lsFieldDistributeCss();
-
-export { LsFieldDistribute as ls_field_distribute };
-//# sourceMappingURL=ls-field-distribute.entry.esm.js.map
+    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

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-distribute.js","sourceRoot":"","sources":["../../../src/components/ls-field-distribute/ls-field-distribute.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { oob } from '../ls-document-viewer/editorUtils';\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

@@ -0,0 +1,55 @@
+: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;
+}