legalesign-document-viewer 0.1.2 → 0.1.4

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

@@ -1,31 +1,81 @@
 :host {
-  display: inline-block;
-  vertical-align: middle;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  position: relative;
 }
 
-button {
-  display: inline-flex;
-  background-color: transparent;
-  min-width: 24px;
-  min-height: 24px;
-  border-radius: 0.5rem;
-  margin: 0.25rem;
-  width: 27px;  
-  height: 27px;
-  justify-content: center;
-  vertical-align: middle;
-  border: 0;
+.ls-toolbar-numeric {
+  width: 45px;
+  max-height: 18px;
+  margin: 0px;
+  padding: 0px;
 }
 
-button:hover {
-  background-color: gray;
+* {
+  margin: 0;
+  box-sizing: border-box;
 }
 
-.ls-toolbar-numeric {
-  width: 45px;
-    max-height: 18px;
-    margin: 0px;
-    padding: 0px;
+.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 */
@@ -65,7 +115,7 @@ select {
 
 .input-wrapper {
   position: relative;
-  width: fit-content;
+  width: 100%;
 }
 
 #selectorIcon {
@@ -86,6 +136,15 @@ select {
   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;
 }
@@ -109,25 +168,25 @@ textarea::placeholder {
   color: var(--gray-60, #afb0b2);
 }
 
-input:hover,
-select:hover,
-textarea:hover {
+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,
-select:focus,
-textarea:focus {
+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,
-select:active,
-textarea:active {
+input:active:not(:disabled),
+select:active:not(:disabled),
+textarea:active:not(:disabled) {
   border-color: var(--primary-50, #5185ff);
 }
 
@@ -136,6 +195,8 @@ select:disabled,
 textarea:disabled {
   cursor: not-allowed;
   background-color: var(--gray-10, #f7f8fa);
+  color: var(--gray-50, #d8d9dc);
+  box-shadow: none;
 }
 
 input[type='checkbox'] {
@@ -279,18 +340,25 @@ button.tertiaryGrey:hover {
   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;
-  min-height: unset;
   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);
 }
@@ -306,4 +374,3 @@ button.tertiaryGrey:hover {
 .button-group > :not(:first-child) {
   border-left: 1px solid var(--gray-30, #e0e2e5);
 }
-

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

@@ -9,7 +9,7 @@ export class LsFieldDistribute {
     alter(diff) {
         console.log(diff);
         const diffs = this.dataItem.map(c => {
-            return { action: "update", data: { ...c, ...diff } };
+            return { action: 'update', data: { ...c, ...diff } };
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
@@ -18,8 +18,8 @@ export class LsFieldDistribute {
     distributeHorizontal() {
         var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space');
         var avgspace = 0;
-        const sorted = this.dataItem.sort((a, b) => (a.left - b.left));
-        if (spacing.value !== "") {
+        const sorted = this.dataItem.sort((a, b) => a.left - b.left);
+        if (spacing.value !== '') {
             avgspace = parseInt(spacing.value);
         }
         else {
@@ -27,21 +27,22 @@ export class LsFieldDistribute {
             for (var i = 1; i < sorted.length; i++) {
                 const c1 = sorted[i - 1];
                 const c2 = sorted[i];
-                space = space + (((c2.left - c1.left - c1.width)) <= 0 ? 0 : (c2.left - c1.left - c1.width));
+                space = space + (c2.left - c1.left - c1.width <= 0 ? 0 : c2.left - c1.left - c1.width);
             }
             avgspace = Math.floor(space / sorted.length);
         }
         var nextleft = sorted[0].left;
-        const diffs = sorted.map((c) => {
+        const diffs = sorted.map(c => {
             const newLeft = nextleft;
             nextleft = nextleft + c.width + avgspace;
             return {
-                action: "update", data: {
+                action: 'update',
+                data: {
                     ...c,
                     left: newLeft,
                     ax: newLeft,
-                    bx: newLeft + c.width
-                }
+                    bx: newLeft + c.width,
+                },
             };
         });
         this.dataItem = diffs.map(d => d.data);
@@ -51,7 +52,7 @@ export class LsFieldDistribute {
     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 sorted = this.dataItem.sort((a, b) => a.top - b.top);
         if (spacing.value !== '')
             avgspace = parseInt(spacing.value);
         else {
@@ -59,21 +60,22 @@ export class LsFieldDistribute {
             for (var i = 1; i < sorted.length; i++) {
                 const c1 = sorted[i - 1];
                 const c2 = sorted[i];
-                space = space + (((c2.top - c1.top - c1.height)) <= 0 ? 0 : (c2.top - c1.top - c1.height));
+                space = space + (c2.top - c1.top - c1.height <= 0 ? 0 : c2.top - c1.top - c1.height);
             }
             avgspace = Math.floor(space / sorted.length);
         }
         var buffer = sorted[0].top;
-        const diffs = sorted.map((c) => {
+        const diffs = sorted.map(c => {
             const newTop = buffer;
             buffer = buffer + c.height + avgspace;
             return {
-                action: "update", data: {
+                action: 'update',
+                data: {
                     ...c,
                     top: newTop,
                     ay: newTop,
-                    by: newTop + c.height
-                }
+                    by: newTop + c.height,
+                },
             };
         });
         this.dataItem = diffs.map(d => d.data);
@@ -81,7 +83,11 @@ export class LsFieldDistribute {
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: '6ca0535c822fbcdb052057da7644a9c5eab0e8b1' }, h("div", { key: '4f83492c37b617919a913542596183abb4bc8664', class: "flex rounded-[10px] focus:outline-hidden focus:ring-4 focus:ring-offset-0 focus:ring-primary-30" }, h("button", { key: '8c3e4c2b5dd988ce7831e08a056edb692c18a41e', class: 'ls-round-button', onClick: () => { this.distributeHorizontal(); }, "aria-label": "Distribute selected fields horizontally.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields horizontally.", "data-tooltip-place": "top" }, h("ls-icon", { key: 'ece9b52f4d1ea3d63f4924f81f9500bfdfe73dbc', name: "field-distribute-horizontally" })), h("input", { key: '44dab62b362152f716d33575258b53b79a66e037', type: "number", class: "ls-toolbar-numeric", id: "ls-fix-horizontal-space", value: "", size: 4, min: 0, max: 9999 }), h("button", { key: '33599a586886da26daeb3fcfc575b031c666ade9', onClick: () => { this.distributeVertical(); }, class: 'ls-round-button', "aria-label": "Distribute selected fields vertically.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields vertically.", "data-tooltip-place": "top" }, h("ls-icon", { key: '2c7f851fad3670d31c4c15591666c7144bc1bd52', name: "field-distribute-vertically" })), h("input", { key: '2747a98baadeb6946f6b087891811a16cac586e7', type: "number", class: "ls-toolbar-numeric", id: "ls-fix-vertical-space", value: "", size: 4, min: 0, max: 9999 })), h("slot", { key: '43a76d8a2deebdbe3bcb0a0f70ad15c88b0ee3b6' })));
+        return (h(Host, { key: '31c935ac5eeb7c9a73dc5ad5f941a2dcd4d3295b' }, h("div", { key: '8d168174c168f696027e15e54fd92f2f394b71b2', class: 'ls-field-properties-section' }, h("div", { key: 'e6e6a3b4835d0e091f951ddae3beeeb1895d52b2', class: 'ls-field-properties-section-text' }, h("p", { key: '5571e2d43ff44c17633fe0c61d756454fe41f4f9', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: '1032830a8fbb0799b47c60990977d7a5bde7ef67', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: 'd2a7351957f694e3ed980b8b6ebd9730dfb0f035', class: 'button-group' }, h("button", { key: 'ca033084212230bb5ff9c9814384acdfd363231d', onClick: () => {
+                this.distributeVertical();
+            }, "aria-label": "Distribute selected fields vertically.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields vertically.", "data-tooltip-place": "top" }, h("ls-icon", { key: 'c775cf090f32d07b879a4e09135f85b37e1658f1', name: "field-distribute-vertically" })), h("button", { key: '636d15dbbaa25c23abe8d7b399db1d2fcb154c8d', onClick: () => {
+                this.distributeHorizontal();
+            }, "aria-label": "Distribute selected fields horizontally.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields horizontally.", "data-tooltip-place": "top" }, h("ls-icon", { key: '36d0b1fce2431a7c34b786ae8afe068333950ec6', name: "field-distribute-horizontally" })))), h("div", { key: 'a8dc96e142e4b1397f9804dfdc55c23404998d1f', class: 'ls-field-properties-section' }, h("div", { key: '6d7e540f68b60df6e5a8059e7f3ebcb4002d378f', class: 'ls-field-properties-section-text' }, h("p", { key: '5c2aefd66af261b510310e793b1ccbea099a5e60', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: '428e69290f2174a33f633ae345d9a2b352d828b8', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '25d85491487f497d4d1f8f4c3960a42ed42b529e', class: 'input-row' }, h("div", { key: 'ff7ed1bf39a83fef8db2fa29a2384a5869cb2650', class: 'input-wrapper' }, h("ls-icon", { key: '10af9dfa4c9f67f8e0985f01d63694d05a13b1a3', id: "selectLeadingIcon", name: "field-distribute-vertically" }), h("input", { key: '5fe66735a8f412a886cac76cbb5fc41339904fab', type: "number", class: 'has-leading-icon', id: "ls-fix-vertical-space", value: '', size: 4, min: 0, max: 9999 })), h("div", { key: '018e5b1ccfd5d1fe46d4760e0f259e2f4226f493', class: 'input-wrapper' }, h("ls-icon", { key: '5f89086d414185a7ef7a166aff86293d48daefa9', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), h("input", { key: 'a694f799b6ddf191f4dc93b18cf7a90c2fd57760', type: "number", class: 'has-leading-icon', id: "ls-fix-horizontal-space", value: '', size: 4, min: 0, max: 9999 })))), h("slot", { key: 'adc96cac64ba94af217a91212e780e00655b250d' })));
     }
     static get is() { return "ls-field-distribute"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"ls-field-distribute.js","sourceRoot":"","sources":["../../../src/components/ls-field-distribute/ls-field-distribute.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-distribute',\n  styleUrl: 'ls-field-distribute.css',\n  shadow: true,\n})\nexport class LsFieldDistribute {\n  @Prop({\n    mutable: true\n  }) dataItem: LSApiElement[];\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) update: EventEmitter<LSMutateEvent[]>;\n  @Element() component: HTMLElement;\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\n  distributeHorizontal() {\n    var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space') as HTMLInputElement;\n    var avgspace = 0;\n    const sorted = this.dataItem.sort((a, b) => (a.left - b.left))\n\n    if(spacing.value !== \"\") {\n      avgspace = parseInt(spacing.value)\n    } else {\n      var space = 0\n      for (var i = 1; i < sorted.length; i++) {\n        const c1 = sorted[i - 1]\n        const c2 = sorted[i]\n        space = space + (((c2.left - c1.left - c1.width)) <= 0 ? 0 : (c2.left - c1.left - c1.width))\n      }\n      avgspace = Math.floor(space / sorted.length)\n    }\n\n    var nextleft = sorted[0].left\n\n    const diffs: LSMutateEvent[] = sorted.map((c) => {\n      const newLeft = nextleft\n      nextleft = nextleft + c.width + avgspace\n\n      return {\n        action: \"update\", data: {\n          ...c,\n          left: newLeft,\n          ax: newLeft,\n          bx: newLeft + c.width\n        } as LSApiElement\n      }\n    })\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement)\n    this.mutate.emit(diffs)\n    this.update.emit(diffs)\n  }\n\n\n  distributeVertical() {\n    var spacing = this.component.shadowRoot.getElementById('ls-fix-vertical-space') as HTMLInputElement;\n    var avgspace = 0;\n    const sorted = this.dataItem.sort((a, b) => (a.top - b.top))\n\n    if (spacing.value !== '') avgspace = parseInt(spacing.value)\n    else {\n      var space = 0\n      for (var i = 1; i < sorted.length; i++) {\n        const c1 = sorted[i - 1]\n        const c2 = sorted[i]\n        space = space + (((c2.top - c1.top - c1.height)) <= 0 ? 0 : (c2.top - c1.top - c1.height))\n      }\n      avgspace = Math.floor(space / sorted.length)\n\n    }\n\n    var buffer = sorted[0].top\n\n    const diffs: LSMutateEvent[] = sorted.map((c) => {\n      const newTop = buffer\n      buffer = buffer + c.height + avgspace\n\n      return {\n        action: \"update\", data: {\n          ...c,\n          top: newTop,\n          ay: newTop,\n          by: newTop + c.height\n        } as LSApiElement\n      }\n    })\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement)\n    this.mutate.emit(diffs)\n    this.update.emit(diffs)\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"flex rounded-[10px] focus:outline-hidden focus:ring-4 focus:ring-offset-0 focus:ring-primary-30\">\n          <button\n            class='ls-round-button'\n            onClick={() => { this.distributeHorizontal() }}\n            aria-label=\"Distribute selected fields horizontally.\"\n            data-tooltip-id=\"le-tooltip\" data-tooltip-content=\"Distribute selected fields horizontally.\"\n            data-tooltip-place=\"top\">\n            <ls-icon name=\"field-distribute-horizontally\" /></button>\n\n          <input type=\"number\" class=\"ls-toolbar-numeric\" id=\"ls-fix-horizontal-space\" value={\"\"} size={4} min={0}  max={9999} />\n          <button\n            onClick={() => { this.distributeVertical() }}\n            class='ls-round-button'\n            aria-label=\"Distribute selected fields vertically.\"\n            data-tooltip-id=\"le-tooltip\" data-tooltip-content=\"Distribute selected fields vertically.\" data-tooltip-place=\"top\">\n            <ls-icon name=\"field-distribute-vertically\" />\n          </button>\n          <input type=\"number\" class=\"ls-toolbar-numeric\" id=\"ls-fix-vertical-space\" value={\"\"} size={4} min={0} max={9999}/>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-field-distribute.js","sourceRoot":"","sources":["../../../src/components/ls-field-distribute/ls-field-distribute.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-distribute',\n  styleUrl: 'ls-field-distribute.css',\n  shadow: true,\n})\nexport class LsFieldDistribute {\n  @Prop({\n    mutable: true,\n  })\n  dataItem: LSApiElement[];\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n  @Element() component: HTMLElement;\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  alter(diff: object) {\n    console.log(diff);\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n    });\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n    this.update.emit(diffs);\n  }\n\n  distributeHorizontal() {\n    var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space') as HTMLInputElement;\n    var avgspace = 0;\n    const sorted = this.dataItem.sort((a, b) => a.left - b.left);\n\n    if (spacing.value !== '') {\n      avgspace = parseInt(spacing.value);\n    } else {\n      var space = 0;\n      for (var i = 1; i < sorted.length; i++) {\n        const c1 = sorted[i - 1];\n        const c2 = sorted[i];\n        space = space + (c2.left - c1.left - c1.width <= 0 ? 0 : c2.left - c1.left - c1.width);\n      }\n      avgspace = Math.floor(space / sorted.length);\n    }\n\n    var nextleft = sorted[0].left;\n\n    const diffs: LSMutateEvent[] = sorted.map(c => {\n      const newLeft = nextleft;\n      nextleft = nextleft + c.width + avgspace;\n\n      return {\n        action: 'update',\n        data: {\n          ...c,\n          left: newLeft,\n          ax: newLeft,\n          bx: newLeft + c.width,\n        } as LSApiElement,\n      };\n    });\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n    this.update.emit(diffs);\n  }\n\n  distributeVertical() {\n    var spacing = this.component.shadowRoot.getElementById('ls-fix-vertical-space') as HTMLInputElement;\n    var avgspace = 0;\n    const sorted = this.dataItem.sort((a, b) => a.top - b.top);\n\n    if (spacing.value !== '') avgspace = parseInt(spacing.value);\n    else {\n      var space = 0;\n      for (var i = 1; i < sorted.length; i++) {\n        const c1 = sorted[i - 1];\n        const c2 = sorted[i];\n        space = space + (c2.top - c1.top - c1.height <= 0 ? 0 : c2.top - c1.top - c1.height);\n      }\n      avgspace = Math.floor(space / sorted.length);\n    }\n\n    var buffer = sorted[0].top;\n\n    const diffs: LSMutateEvent[] = sorted.map(c => {\n      const newTop = buffer;\n      buffer = buffer + c.height + avgspace;\n\n      return {\n        action: 'update',\n        data: {\n          ...c,\n          top: newTop,\n          ay: newTop,\n          by: newTop + c.height,\n        } as LSApiElement,\n      };\n    });\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n    this.update.emit(diffs);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'ls-field-properties-section'}>\n          <div class={'ls-field-properties-section-text'}>\n            <p class={'ls-field-properties-section-title'}>Distribution</p>\n            <p class={'ls-field-properties-section-description'}>Multi-select fields and evenly space them out</p>\n          </div>\n          <div class={'button-group'}>\n            <button\n              onClick={() => {\n                this.distributeVertical();\n              }}\n              aria-label=\"Distribute selected fields vertically.\"\n              data-tooltip-id=\"le-tooltip\"\n              data-tooltip-content=\"Distribute selected fields vertically.\"\n              data-tooltip-place=\"top\"\n            >\n              <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n            </button>\n            <button\n              onClick={() => {\n                this.distributeHorizontal();\n              }}\n              aria-label=\"Distribute selected fields horizontally.\"\n              data-tooltip-id=\"le-tooltip\"\n              data-tooltip-content=\"Distribute selected fields horizontally.\"\n              data-tooltip-place=\"top\"\n            >\n              <ls-icon name=\"field-distribute-horizontally\"></ls-icon>\n            </button>\n          </div>\n        </div>\n        <div class={'ls-field-properties-section'}>\n          <div class={'ls-field-properties-section-text'}>\n            <p class={'ls-field-properties-section-title'}>Gap</p>\n            <p class={'ls-field-properties-section-description'}>Define the exact gap between multi-select fields.</p>\n          </div>\n          <div class={'input-row'}>\n            <div class={'input-wrapper'}>\n              <ls-icon id=\"selectLeadingIcon\" name=\"field-distribute-vertically\"></ls-icon>\n              <input type=\"number\" class={'has-leading-icon'} id=\"ls-fix-vertical-space\" value={''} size={4} min={0} max={9999} />\n            </div>\n            <div class={'input-wrapper'}>\n              <ls-icon id=\"selectLeadingIcon\" name=\"field-distribute-horizontally\"></ls-icon>\n              <input type=\"number\" class={'has-leading-icon'} id=\"ls-fix-horizontal-space\" value={''} size={4} min={0} max={9999} />\n            </div>\n          </div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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;
+}

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

@@ -0,0 +1,107 @@
+import { Host, h } from "@stencil/core";
+export class LsFieldFooter {
+    /**
+     * The selected items information (as JSON).
+     * {LSApiElement[]}
+     */
+    dataItem;
+    mutate;
+    update;
+    deleteField = () => {
+        this.update.emit([{ action: 'delete', data: this.dataItem }]);
+        this.mutate.emit([{ action: 'delete', data: this.dataItem }]);
+    };
+    duplicateField = () => {
+        this.update.emit([{ action: 'create', data: { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) } }]);
+        this.mutate.emit([{ action: 'create', data: { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) } }]);
+    };
+    render() {
+        return (h(Host, { key: 'd46fe451236281986f1e7a1a4e27c9ad4b9433d2' }, h("div", { key: 'd6e7c0b96b8b07c83c4863132c191bc86dfd103c', class: 'button-footer' }, h("button", { key: '16cc56e2701db07c0b1a0b65a2573cf3e36565c9', class: 'secondary', onClick: () => this.duplicateField() }, h("ls-icon", { key: 'c5c0d8f6445ae55fad539b34100b9f2c332462db', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: 'a427630acdd345cccc8fcf15f175f872684e2bde', class: 'destructive', onClick: () => this.deleteField() }, h("ls-icon", { key: '6630ba504e074deef33aa4064aa964408597564b', name: "trash", size: "20" }), "Delete")), h("slot", { key: 'a6bba56933467a4d02d77af53154687fd8d66645' })));
+    }
+    static get is() { return "ls-field-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-field-footer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-field-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dataItem": {
+                "type": "unknown",
+                "attribute": "data-item",
+                "mutable": true,
+                "complexType": {
+                    "original": "LSApiElement",
+                    "resolved": "{ id: string; align: string; ax?: number; ay?: number; bx?: number; by?: number; left?: number; top?: number; height?: number; width?: number; elementType: string; fieldOrder?: number; fontName: string; fontSize: number; hideBorder?: boolean; label?: string; labelExtra?: string; helpText?: string; optional?: boolean; options?: string; page?: number; role?: LSApiRole; substantive?: boolean; validation?: number; value?: string; logicGroup?: string; logicAction?: number; mapTo?: string; signer: number; link?: string; formElementType?: \"number\" | \"image\" | \"text\" | \"signature\" | \"date\" | \"regex\" | \"file\" | \"autodate\" | \"autosign\" | \"initials\" | \"email\" | \"checkbox\"; roleObject?: LSApiRole; cstyle?: any; divStyle?: any; objectHeight?: string; pageDimensions?: { height: number; width: number; }; templateId?: string; }",
+                    "references": {
+                        "LSApiElement": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::LSApiElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected items information (as JSON).\n{LSApiElement[]}"
+                },
+                "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"
+                        }
+                    }
+                }
+            }, {
+                "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"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=ls-field-footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-footer.js","sourceRoot":"","sources":["../../../src/components/ls-field-footer/ls-field-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,aAAa;IACxB;;;OAGG;IAIH,QAAQ,CAAe;IAMvB,MAAM,CAAgC;IAOtC,MAAM,CAAgC;IAEtC,WAAW,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;QAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IAChE,CAAC,CAAA;IAED,cAAc,GAAG,GAAG,EAAE;QACpB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;QAC5G,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IAC9G,CAAC,CAAA;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,eAAe;gBACzB,+DAAQ,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;oBAC9D,gEAAS,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,IAAI,GAAG;gCAErC;gBACT,+DAAQ,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;oBAC7D,gEAAS,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG;6BAE3B,CACL;YACN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-footer',\n  styleUrl: 'ls-field-footer.css',\n  shadow: true,\n})\nexport class LsFieldFooter {\n  /**\n   * The selected items information (as JSON).\n   * {LSApiElement[]}\n   */\n  @Prop({\n    mutable: true,\n  })\n  dataItem: LSApiElement;\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  deleteField = () => {\n    this.update.emit([{ action: 'delete', data: this.dataItem }]);\n    this.mutate.emit([{ action: 'delete', data: this.dataItem }]);\n  }\n\n  duplicateField = () => {\n    this.update.emit([{ action: 'create', data: { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) } }]);\n    this.mutate.emit([{ action: 'create', data: { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) } }]);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'button-footer'}>\n          <button class={'secondary'} onClick={() => this.duplicateField()}>\n            <ls-icon name=\"field-duplicate\" size=\"20\" />\n            Duplicate\n          </button>\n          <button class={'destructive'} onClick={() => this.deleteField()}>\n            <ls-icon name=\"trash\" size=\"20\" />\n            Delete\n          </button>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -16,25 +16,25 @@ export class LsFieldFormat {
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: '919c4cad28c6c7b3b30543efe37b51f45400b012' }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: '1846d004c25acc29d82e29f837fd85a07c2712ed', class: 'ls-field-format-bar' }, h("div", { key: 'a0a2494dfd0bdc36e32f9c6903642318378b264c', class: " input-wrapper" }, h("ls-icon", { key: '53dfe2a957bea873366196d118298b9f0bcaf0e5', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '834ac15d653e94a400d6d4a9eb763225d552ac6a', onChange: input => {
+        return (h(Host, { key: '87a1481dfae83e9000fcd8372f5dcda740d0a8cb' }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: '73e8800061971f09ce5f198de0ce20b05b643fd8', class: 'ls-field-format-bar' }, h("div", { key: 'b16b871e8399430250f1fc7782f4cbe078865bc4', class: " input-wrapper" }, h("ls-icon", { key: 'c4b2b1cb98cbeb08b4e1979899a020c56a1c17b3', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '50ed9152533733b9ac1a409f7501fba333a1773a', onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, h("option", { key: '2c7001063d89465eeff4e10fed8ac98f1f6c3be9', value: "arial" }, "Arial"), h("option", { key: '1f4ba10ff6ab3de9fb4a0b812072e33b84fea2e0', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '4c16c8128051662ca84db0054016f5214f618753', value: "courier" }, "Courier"), h("option", { key: '6f5c2d1d0e264bfbd7a3199f3dc8db03445a9885', value: "helvetica" }, "Helvetica"), h("option", { key: '46b1b834980ef46daf5134ed3069118daa12a48f', value: "verdana" }, "Verdana")), h("ls-icon", { key: '8032bea8e461d25a79b6341b889a0d02f454e4c2', id: "selectorIcon", name: "selector" })), h("div", { key: '3a4a7c4e887ccc3b19879b06b5b9f205912659fc', class: "input-wrapper" }, h("ls-icon", { key: 'd99531039fdfc0030d37376eef92035dbbc76325', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: '043eb9f72cf5e21dc4710c2a70dd390753d58c56', width: "30", size: 4, class: 'has-leading-icon' })), h("div", { key: 'e1659f4c141d766dd7b886f0528d6600cef92a48', class: 'button-group' }, h("button", { key: '97988aa985a84bf1a6a3dd73c5aee4eead811acc', onClick: () => {
+            }, class: 'has-leading-icon' }, h("option", { key: '08f846a77f4eb52862cc8bd2af00f17d2f9ad333', value: "arial" }, "Arial"), h("option", { key: 'f414dbc7662a502af008d5924d31591d564abff5', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '9f0b044404e41e1729f8e65ab7ddff7ccce158d7', value: "courier" }, "Courier"), h("option", { key: '03772f79ca32fba7f089d75e54f2db5a6ae3199d', value: "helvetica" }, "Helvetica"), h("option", { key: '58f3bdd4a2f1b3c1e9096b547255f863b612eafa', value: "verdana" }, "Verdana")), h("ls-icon", { key: 'f815be5900f9e17614aa7ac1223d703e744d8129', id: "selectorIcon", name: "selector" })), h("div", { key: 'ae3f39557288535143ed04cc0eeba2c1f93f0218', class: "input-wrapper" }, h("ls-icon", { key: '76667415983f8e27339a54f47015b7679055fe4d', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: '5cc8c26f5540db91f2c313498a02dfc08f847d7a', width: "30", size: 4, class: 'has-leading-icon' })), h("div", { key: 'f6b34b35ee676e4e944f719d5cfedbedbbb44eca', class: 'button-group' }, h("button", { key: '68aa5ac2abcbb678914637448dc0e1286dcd9f60', onClick: () => {
                 this.alter({ align: 'left' });
-            } }, h("ls-icon", { key: 'ef2b471278c0891ff590b2e66f06dd3d7cc012d7', name: "menu-alt-2" })), h("button", { key: '8288c246d2d84d0dad580ff10c021316a1663561', onClick: () => {
+            } }, h("ls-icon", { key: '978c2e4fbe2e4a86f2ec30fd73e84b519d0f3ccd', name: "menu-alt-2" })), h("button", { key: 'c7a4ba74b99c9959960e8c205cd95dd24ad6d142', onClick: () => {
                 this.alter({ align: 'center' });
-            } }, h("ls-icon", { key: '6421c04c1e4f5c478d241705056a56da87915629', name: "menu-alt-5" })), h("button", { key: '2b49820deae0b5033aded744e81ef45c82056f89', onClick: () => {
+            } }, h("ls-icon", { key: '0835c5c00ca515f011cf8a691d1d12bf39ec5156', name: "menu-alt-5" })), h("button", { key: '4cf995ffc52a47700fefb7b0bb8f93d9a2095bf4', onClick: () => {
                 this.alter({ align: 'right' });
-            } }, h("ls-icon", { key: '7d50e4dff96997a72edf1ec85a64ac239dbad905', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: '807a3227a4a9227d9e4b45af198c6e46bb9b6daf', class: 'ls-field-format-bar' }, h("div", { key: 'a7d35f333cf9a4880f386fdc6fbe095ea16947c2', class: "input-wrapper" }, h("ls-icon", { key: '42962ba5d95daf9d7b42026b82f324bcdb777aa7', id: "selectorIcon", name: "selector" }), h("ls-icon", { key: '9a42df2fe45269229ca9455ddbe37f5181aac8e3', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '481857a9a964e03463f0cc01d615cb43a6241df3', onChange: input => {
+            } }, h("ls-icon", { key: '9b4a269af491ed0d34d3e7a1111d07751af0e8b6', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: 'a1639d55878526264c0fdfc278f44584f25d532e', class: 'ls-field-format-bar' }, h("div", { key: 'a1337e8b1cc3742761188be5b4d35a395075a11c', class: "input-wrapper" }, h("ls-icon", { key: 'c1cfdbcab44f1758774abfabe9b6eb5a95572447', id: "selectorIcon", name: "selector" }), h("ls-icon", { key: 'aa586a365349e10b2c09098ffe8295fbf01f4986', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '6c2404caa119edfabbd70b9697fd779c7fe55e5e', onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, h("option", { key: '59291299bebaedeb4e700fd2cdf76801ae784a69', value: "arial" }, "Arial"), h("option", { key: 'c9b1e6e027bccbc7ff49209046c534b94d5b34f3', value: "liberation sans" }, "Liberation Sans"), h("option", { key: 'bf444b6ce5ae54eee08a8474528daf6a0e627b49', value: "courier" }, "Courier"), h("option", { key: '6b43f202bc8f95bf3ab118215c00cd6e02b29ca0', value: "helvetica" }, "Helvetica"), h("option", { key: 'b4269c0a064ffeb94021b0ab13518e95a8479979', value: "verdana" }, "Verdana"))), h("div", { key: 'be0735ae2af588126c503e02f0d63e772698e800', class: "input-wrapper" }, h("ls-icon", { key: 'b7854e3245f85bce705d31234d7fb0f86668f018', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: 'd492a2edcdd42231385e59a01688f7fbd03ae8b4', width: "30", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
+            }, class: 'has-leading-icon' }, h("option", { key: '7f99c2c3ff9303d07374efbd2cbed51e840a6b07', value: "arial" }, "Arial"), h("option", { key: '33b215ab68d78df213e66a508c71326fe8f2c0df', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '74beff2c20bdb1f04c1ad493a0ab4f4b73723a5f', value: "courier" }, "Courier"), h("option", { key: 'cb71c7f9fb70efb13c899c014455296945e3f937', value: "helvetica" }, "Helvetica"), h("option", { key: '928d454bbf9015fcdcab4c3ed2f25591705304d2', value: "verdana" }, "Verdana"))), h("div", { key: 'e04d0a46ab3524a5bc3e1b2b58d351cc1e530057', class: "input-wrapper" }, h("ls-icon", { key: '34204ae09a79787e1acfaa7aec4d905b7c9f185c', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: 'fa2fa5b6c915f129ec756a203f1537629873b5ff', width: "30", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
                 this.alter({ fontSize: input.target.value });
-            }, class: 'has-leading-icon' })), h("div", { key: '3ae8a14a58209730a436d05c0b7a5bd82f7c4104', class: 'button-group' }, h("button", { key: '86a99f46a58011f9ed4c038a920f6985ebb5665c', onClick: () => {
+            }, class: 'has-leading-icon' })), h("div", { key: '1f979064c092b04c682fc2bde6852f3f948cda1f', class: 'button-group' }, h("button", { key: '6c41315e09d84762c74a225ca7862bc1ec17b9fa', onClick: () => {
                 this.alter({ align: 'left' });
-            } }, h("ls-icon", { key: 'a65a3d16ff909fac651795e337dba173c582932a', name: "menu-alt-2" })), h("button", { key: 'e398de9519a1f2fe5bbef293df94f4b1e26712d8', onClick: () => {
+            } }, h("ls-icon", { key: '4cccc7b7c720e60e9279455ef91bb0c3f0b7b039', name: "menu-alt-2" })), h("button", { key: '531e37c5ce4b7c4c1d58f4c70eb308818e3ac3da', onClick: () => {
                 this.alter({ align: 'center' });
-            } }, h("ls-icon", { key: '81d31a5c324e40e1c0b3a77f82a52f53ba88ae0c', name: "menu-alt-5" })), h("button", { key: '59f6ce6fd22dcaaf0d12324e72623c0bcc9f47ac', onClick: () => {
+            } }, h("ls-icon", { key: '0ed333cada71cd4916246d24f2fb14ac36b46965', name: "menu-alt-5" })), h("button", { key: '94d21c36f06d93a94aab142a56316f0f8c3c69c0', onClick: () => {
                 this.alter({ align: 'right' });
-            } }, h("ls-icon", { key: '7fd9692ef54258aba5a4a629166001b1675d7f6a', name: "menu-alt-3" })))))));
+            } }, h("ls-icon", { key: '303dd2ea923a4b0dce555b21ffbc23c3730c40ca', name: "menu-alt-3" })))))));
     }
     static get is() { return "ls-field-format"; }
     static get encapsulation() { return "shadow"; }