legalesign-document-viewer 0.1.3 → 0.1.4

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

@@ -1 +1 @@
-{"version":3,"file":"ls-field-alignment.js","sourceRoot":"","sources":["../../../src/components/ls-field-alignment/ls-field-alignment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAS9E,MAAM,OAAO,gBAAgB;IACF,QAAQ,CAAiB;IAK/C,MAAM,CAAgC;IAMtC,MAAM,CAAgC;IAGzC,0CAA0C;IAC1C,6CAA6C;IAC7C,KAAK,CAAC,IAAY;QAChB,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QAEjB,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YACnD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,EAAkB,EAAE,CAAA;QACtE,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAqB,CAAC,CAAA;QACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;IAED,KAAK;QACH,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,EAAE;YAE5D,OAAO,CAAC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,CAAA;QAChG,CAAC,EAAE,CAAC,CAAC,CAAC;QAEN,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;QAEtB,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACrD,MAAM,OAAO,GAAG,SAAS,GAAG,CAAC,CAAC,KAAK,CAAA;YAEnC,OAAO;gBACL,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;oBACtB,GAAG,CAAC;oBACJ,IAAI,EAAE,OAAO;oBACb,EAAE,EAAE,OAAO;oBACX,EAAE,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK;iBACN;aAClB,CAAA;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAqB,CAAC,CAAA;QACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE;YACzD,OAAO,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAA;YACvD,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,CAAA;QACnD,CAAC,EAAE,CAAC,CAAC,CAAC;QACN,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;QAEvB,MAAM,EAAE,GAAG,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAA;QAC5C,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAA;QAEjC,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YAErD,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAA;YACtD,OAAO;gBACL,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;oBACtB,GAAG,CAAC;oBACJ,IAAI,EAAE,OAAO;oBACb,EAAE,EAAE,OAAO;oBACX,EAAE,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK;iBACN;aAClB,CAAA;QACH,CAAC,CAAC,CAAA;QACF,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAqB,CAAC,CAAA;QACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;IAED,GAAG;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;YACrD,OAAO,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAA;QAChD,CAAC,EAAE,CAAC,CAAC,CAAC;QAEN,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAA;IAC9B,CAAC;IAGD,IAAI;QACF,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE;YACvD,OAAO,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,CAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAA;QACrD,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAE1B,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAA;IAChC,CAAC;IAGD,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE;YACzD,OAAO,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAA;YACvD,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;QACnD,CAAC,EAAE,CAAC,CAAC,CAAC;QAEN,MAAM,EAAE,GAAG,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAA;QAE5C,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YAErD,MAAM,MAAM,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAA;YACpD,OAAO;gBACL,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;oBACtB,GAAG,CAAC;oBACJ,GAAG,EAAE,MAAM;oBACX,EAAE,EAAE,MAAM;oBACV,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC,MAAM;iBACN;aAClB,CAAA;QACH,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAqB,CAAC,CAAA;QACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE;YACnD,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;QACpF,CAAC,EAAE,CAAC,CAAC,CAAC;QAEN,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YAErD,MAAM,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,MAAM,CAAA;YAChC,OAAO;gBACL,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;oBACtB,GAAG,CAAC;oBACJ,GAAG,EAAE,MAAM;oBACX,EAAE,EAAE,MAAM;oBACV,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC,MAAM;iBACN;aAClB,CAAA;QACH,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAqB,CAAC,CAAA;QACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YAED;gBACE,+DACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC1B,KAAK,EAAC,iBAAiB,gBACZ,yDAAyD,qBACpD,YAAY,0BACP,uDAAuD,wBACzD,KAAK;oBAExB,gEAAS,IAAI,EAAC,sBAAsB,GAAG,CAAS;gBAClD,+DACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC5B,KAAK,EAAC,iBAAiB,gBACZ,sDAAsD,qBACjD,YAAY,0BACP,uDAAuD,wBACzD,KAAK;oBAExB,gEAAS,IAAI,EAAC,wBAAwB,GAAG,CAAS;gBACpD,+DACE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAA,CAAC,CAAC,gBACpB,0DAA0D,EACrE,KAAK,EAAC,iBAAiB,qBACP,YAAY,0BACP,uDAAuD,wBACzD,KAAK;oBAE9B,gEAAS,IAAI,EAAC,uBAAuB,GAAG,CAC3B;gBAET,+DACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,EACzB,KAAK,EAAC,iBAAiB,gBACZ,qCAAqC,qBAChC,YAAY,0BACP,uDAAuD,wBACzD,KAAK;oBAE7B,gEAAS,IAAI,EAAC,qBAAqB,GAAG,CAC1B;gBACT,+DACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC5B,KAAK,EAAC,iBAAiB,gBACZ,yCAAyC,qBACpC,YAAY,0BACP,uDAAuD,wBACzD,KAAK;oBAEtB,gEAAS,IAAI,EAAC,wBAAwB,GAAG,CAAS;gBACtD,+DACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC5B,KAAK,EAAC,iBAAiB,gBACZ,yCAAyC,qBACpC,YAAY,0BACP,uDAAuD,wBACzD,KAAK;oBAExB,gEAAS,IAAI,EAAC,wBAAwB,GAAG,CAClC,CACL;YAGR,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\n@Component({\n  tag: 'ls-field-alignment',\n  styleUrl: 'ls-field-alignment.css',\n  shadow: true,\n})\nexport class LsFieldAlignment {\n  @Prop({ mutable: true }) dataItem: LSApiElement[];\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\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  right() {\n    const rightmost = this.dataItem.reduce((rightmost, current) => {\n\n      return (current.left + current.width) < rightmost ? rightmost : (current.left + current.width)\n    }, 0);\n\n    console.log(rightmost)\n\n    const diffs: LSMutateEvent[] = this.dataItem.map((c) => {\n      const newLeft = rightmost - c.width\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  center() {\n    const addcentres = this.dataItem.reduce((total, current) => {\n      console.log(total + (current.left + current.width / 2))\n      return total + (current.left + current.width / 2)\n    }, 0);\n    console.log(addcentres)\n\n    const cp = addcentres / this.dataItem.length\n    console.log('centerposition', cp)\n\n    const diffs: LSMutateEvent[] = this.dataItem.map((c) => {\n\n      const newLeft = c.left + (cp - (c.left + c.width / 2))\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    console.log(diffs)\n    this.dataItem = diffs.map(d => d.data  as LSApiElement)\n    this.mutate.emit(diffs)\n    this.update.emit(diffs)\n  }\n\n  top() {\n    const topmost = this.dataItem.reduce((most, current) => {\n      return current.top < most ? most : current.top\n    }, 0);\n\n    this.alter({ top: topmost })\n  }\n\n\n  left() {\n    const leftmost = this.dataItem.reduce((least, current) => {\n      return current.left < least ?  current.left : least\n    }, this.dataItem[0].left);\n\n    this.alter({ left: leftmost })\n  }\n\n\n  middle() {\n    const addmiddles = this.dataItem.reduce((total, current) => {\n      console.log(total + (current.top + current.height / 2))\n      return total + (current.top + current.height / 2)\n    }, 0);\n\n    const cp = addmiddles / this.dataItem.length\n\n    const diffs: LSMutateEvent[] = this.dataItem.map((c) => {\n\n      const newTop = c.top + (cp - (c.top + c.height / 2))\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    this.dataItem = diffs.map(d => d.data  as LSApiElement)\n    this.mutate.emit(diffs)\n    this.update.emit(diffs)\n  }\n\n  bottom() {\n    const lowest = this.dataItem.reduce((acc, current) => {\n      return acc > (current.top + current.height) ? acc : (current.top + current.height)\n    }, 0);\n\n    const diffs: LSMutateEvent[] = this.dataItem.map((c) => {\n\n      const newTop = lowest - c.height\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    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        \n          <div>\n            <button\n              onClick={() => this.left()}\n              class='ls-round-button'\n              aria-label=\"Align selected fields vertically about their left edge.\"\n              data-tooltip-id=\"le-tooltip\"\n              data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n              data-tooltip-place=\"top\"\n            >\n              <ls-icon name=\"field-alignment-left\" /></button>\n            <button\n              onClick={() => this.center()}\n              class='ls-round-button'\n              aria-label=\"Align selected fields vertically about their centre.\"\n              data-tooltip-id=\"le-tooltip\"\n              data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n              data-tooltip-place=\"top\"\n            >\n              <ls-icon name=\"field-alignment-centre\" /></button>\n            <button\n              onClick={() => { this.right() }}\n              aria-label=\"Align selected fields vertically about their right edge.\"\n              class='ls-round-button'\n              data-tooltip-id=\"le-tooltip\"\n              data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n              data-tooltip-place=\"top\"\n            >\n        <ls-icon name=\"field-alignment-right\" />\n            </button>\n\n            <button\n              onClick={() => this.top()}\n              class='ls-round-button'\n              aria-label=\"Align selected fields by their top.\"\n              data-tooltip-id=\"le-tooltip\"\n              data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n              data-tooltip-place=\"top\"\n            >\n         <ls-icon name=\"field-alignment-top\" />\n            </button>\n            <button\n              onClick={() => this.middle()}\n              class='ls-round-button'\n              aria-label=\"Align selected fields by their middles.\"\n              data-tooltip-id=\"le-tooltip\"\n              data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n              data-tooltip-place=\"top\"\n            >\n                <ls-icon name=\"field-alignment-middle\" /></button>\n            <button\n              onClick={() => this.bottom()}\n              class='ls-round-button'\n              aria-label=\"Align selected fields by their bottoms.\"\n              data-tooltip-id=\"le-tooltip\"\n              data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n              data-tooltip-place=\"top\"\n            >\n              <ls-icon name=\"field-alignment-bottom\" />\n            </button>\n          </div>\n        \n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-field-alignment.js","sourceRoot":"","sources":["../../../src/components/ls-field-alignment/ls-field-alignment.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-alignment',\n  styleUrl: 'ls-field-alignment.css',\n  shadow: true,\n})\nexport class LsFieldAlignment {\n  @Prop({ mutable: true }) 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  // 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  right() {\n    const rightmost = this.dataItem.reduce((rightmost, current) => {\n      return current.left + current.width < rightmost ? rightmost : current.left + current.width;\n    }, 0);\n\n    console.log(rightmost);\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newLeft = rightmost - c.width;\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  center() {\n    const addcentres = this.dataItem.reduce((total, current) => {\n      console.log(total + (current.left + current.width / 2));\n      return total + (current.left + current.width / 2);\n    }, 0);\n    console.log(addcentres);\n\n    const cp = addcentres / this.dataItem.length;\n    console.log('centerposition', cp);\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newLeft = c.left + (cp - (c.left + c.width / 2));\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    console.log(diffs);\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n    this.update.emit(diffs);\n  }\n\n  top() {\n    const topmost = this.dataItem.reduce((most, current) => {\n      return current.top < most ? most : current.top;\n    }, 0);\n\n    this.alter({ top: topmost });\n  }\n\n  left() {\n    const leftmost = this.dataItem.reduce((least, current) => {\n      return current.left < least ? current.left : least;\n    }, this.dataItem[0].left);\n\n    this.alter({ left: leftmost });\n  }\n\n  middle() {\n    const addmiddles = this.dataItem.reduce((total, current) => {\n      console.log(total + (current.top + current.height / 2));\n      return total + (current.top + current.height / 2);\n    }, 0);\n\n    const cp = addmiddles / this.dataItem.length;\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newTop = c.top + (cp - (c.top + c.height / 2));\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    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n    this.update.emit(diffs);\n  }\n\n  bottom() {\n    const lowest = this.dataItem.reduce((acc, current) => {\n      return acc > current.top + current.height ? acc : current.top + current.height;\n    }, 0);\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newTop = lowest - c.height;\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    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'}>Alignment</p>\n            <p class={'ls-field-properties-section-description'}>Align your Fields relative to the page or multi-select and align then to each other.</p>\n          </div>\n          <div class={'multi-button-group-row'}>\n            <div class={'button-group'}>\n              <button\n                onClick={() => this.left()}\n                aria-label=\"Align selected fields vertically about their left edge.\"\n                data-tooltip-id=\"le-tooltip\"\n                data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n                data-tooltip-place=\"top\"\n              >\n                <ls-icon name=\"field-alignment-left\"></ls-icon>\n              </button>\n              <button\n                onClick={() => this.center()}\n                aria-label=\"Align selected fields vertically about their centre.\"\n                data-tooltip-id=\"le-tooltip\"\n                data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n                data-tooltip-place=\"top\"\n              >\n                <ls-icon name=\"field-alignment-centre\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.right();\n                }}\n                aria-label=\"Align selected fields vertically about their right edge.\"\n                data-tooltip-id=\"le-tooltip\"\n                data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n                data-tooltip-place=\"top\"\n              >\n                <ls-icon name=\"field-alignment-right\"></ls-icon>\n              </button>\n            </div>\n            <div class={'button-group'}>\n              <button\n                onClick={() => this.top()}\n                aria-label=\"Align selected fields by their top.\"\n                data-tooltip-id=\"le-tooltip\"\n                data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n                data-tooltip-place=\"top\"\n              >\n                <ls-icon name=\"field-alignment-top\"></ls-icon>\n              </button>\n              <button\n                onClick={() => this.middle()}\n                aria-label=\"Align selected fields by their middles.\"\n                data-tooltip-id=\"le-tooltip\"\n                data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n                data-tooltip-place=\"top\"\n              >\n                <ls-icon name=\"field-alignment-middle\"></ls-icon>\n              </button>\n              <button\n                onClick={() => this.bottom()}\n                aria-label=\"Align selected fields by their bottoms.\"\n                data-tooltip-id=\"le-tooltip\"\n                data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n                data-tooltip-place=\"top\"\n              >\n                <ls-icon name=\"field-alignment-bottom\"></ls-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -29,7 +29,7 @@ export class LsFieldDimensions {
         }
     }
     render() {
-        return (h(Host, { key: '73cdde8b19406863340847040187bbb977603b00' }, this.isMultiple(this.dataItem) && (h("div", { key: '663f8d34fb4ecf0fbb2ea6c047f088eee43648c6', class: 'ls-field-properties-section' }, h("div", { key: '949ca350537667bd72f89b3b82e9fdd7ebaced1b' }, "Height: ", h("input", { key: '7bc09e13508cff5529b3970b8a69ba1f281ab37d', value: '', onChange: e => this.alter({ height: e.target.value }), width: "30" })), h("div", { key: 'f2c330ebc3e182fe244d5e436d768adad1eb29dc' }, "Width: ", h("input", { key: '90b27990d0155f85f9cf4b452c0742e36a783dc4', value: '', onChange: e => this.alter({ width: e.target.value }), width: "30" })), h("div", { key: 'ef3265609f1697fe7f46637c15af085ba8c1dd1c' }, "Top: ", h("input", { key: 'af0b0202d72ce839a70e6174c99c26ed6ab80436', value: '', onChange: e => this.alter({ top: e.target.value }), width: "30" })), h("div", { key: 'd7c7d28fa7000a25cf55ac47e79c79238ce1e925' }, "Left: ", h("input", { key: '8c5731c8b8c7d5738d94c60e6cfa17fc11d7ed96', value: '', onChange: e => this.alter({ left: e.target.value }), width: "30" })))), this.isSingle(this.dataItem) && (h("div", { key: '22e9f16686a8075401a16086f4e9b09f65798dda', class: 'field-set' }, h("div", { key: '411a6e0f2580459aad7a62d09c34224e4af44622', class: 'ls-field-properties-section' }, h("div", { key: '448d733c7c6bcc07a2457ba4bc46ef851256e40e', class: 'ls-field-properties-section-text' }, h("p", { key: '149203d691287f9ac2c6bd0b8ef68a4b7e8409e8', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: '8ef2e8b510cbb86432e474fb01c108c7d05dbbec', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: '22e50be04d03b9b9e523499bdb8412d5a454ff77', class: 'input-row' }, h("div", { key: 'eb97defffd601718969d2acb529210635a069c50', class: 'input-wrapper' }, h("ls-icon", { key: '5ecc97592382a5a6db7bd1b3c4e2677a03ce1069', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: '5f11069ab165fb1e97ff4097b5ccc156080dc6c1', class: 'has-leading-icon', aria: "field-width", id: "field-width", value: this.dataItem?.width, onChange: e => this.alter({ width: e.target.value }) })), h("div", { key: '81e138732d6f81ee11f7bfe1945342e0a2b6266f', class: 'input-wrapper' }, h("ls-icon", { key: '3c36f16870153d2fe2dc4f6feeeb1a7747b18e4c', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: '611ecd3368756add347304dfb9a558a21fa1250b', class: 'has-leading-icon', aria: "field-height", id: "field-height", value: this.dataItem?.height, onChange: e => this.alter({ height: e.target.value }) })))), h("div", { key: '7e63ec19b978270ea21198a55c38a2bdd80d92c5', class: 'ls-field-properties-section' }, h("div", { key: '3d5b05fa48e12fadbf625653fe8a1d717b14b656', class: 'ls-field-properties-section-text' }, h("p", { key: 'f6ce2fc2a0bac271c76c43ac010b8fdfb1aa868a', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: '73a44189b9f56cb9f92ce56dd19be6a5ac3c164d', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: '9b0ade957ee3c361dfc8bffa5c669b9e0fc48eea', class: 'button-group' }, h("button", { key: 'a3504f8b55172bdc02af10f03bea7e94374dd013', disabled: true }, h("ls-icon", { key: '05e97eb64ffbd2bbc59b3c68b5fc654f7108db95', name: "field-scale" })), h("button", { key: 'f5f5a7cfdb05458e52611480480d2503b4aa7b2b', disabled: true }, h("ls-icon", { key: '6f5b4f2c0a9b56f0e8fcc274b962c9390c4f64cf', name: "field-match-width" })), h("button", { key: 'c6671a937f8171f4fd31141923645be9d4d3383c', disabled: true }, h("ls-icon", { key: '9bdffc49445a20d17933e399b255812768e9b9d4', name: "field-match-height" }))))))));
+        return (h(Host, { key: '056c4e012cde64ce461fb954f393cc5eb264c4f1' }, this.isMultiple(this.dataItem) && (h("div", { key: '2cd01260598ea4f6cd7b40dffd502c6a642007c6', class: 'ls-field-properties-section' }, h("div", { key: 'e843fa2769ecb1889677ad85e87a79d1dc8b03f6', class: 'ls-field-properties-section-text' }, h("p", { key: '140e8ffaea2a163387345041f2039b68c8393012', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: 'abef468582e2e7829f869a14539c22f1db839169', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: 'dd5819291b738c8866f84d88d85f1f1d78c4987e', class: 'input-row' }, h("div", { key: '87d5c1913299a43e1cbd093e2c579591bdc80327', class: 'input-wrapper' }, h("ls-icon", { key: '861a92289f7383ab6773bca9b2e240332e720a04', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: 'aa1fc66abfa15670e682d39304178f91f3e9d05d', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), h("div", { key: '3c4293cae6df7fb0447c670e32f7fd4f2bcedfee', class: 'input-wrapper' }, h("ls-icon", { key: '4042d2ce39b5aa40e712673651ab82ee4c0e1ff2', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: 'd944e7c0f95b6351e655d8230128a160c5aca6b8', class: 'has-leading-icon', aria: "field-height", id: "field-height", onChange: e => this.alter({ height: e.target.value }) }))))), this.isSingle(this.dataItem) && (h("div", { key: '09932bc4e2e6cc4f2595f481889d1e9dccaa31b6', class: 'field-set' }, h("div", { key: 'a0d3fdf6312d4952292f81214817b85319749795', class: 'ls-field-properties-section' }, h("div", { key: '048272dea7043f05209e3319a3f4095607232641', class: 'ls-field-properties-section-text' }, h("p", { key: '692142057d98b1192a8a3fedb8ba807fb0ef27a4', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: 'd1d6b5ca74514d475e957c35b3554a215057f6ec', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: '3fc79c753561607272fc2a66a7a230160f4d1e58', class: 'input-row' }, h("div", { key: '6f0b824e7da82930e25759a617d8309c89c9a376', class: 'input-wrapper' }, h("ls-icon", { key: '73182488cca3bb85fc8ae40496e36beac68ec295', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: '6fbaaeeaeae6d3b688725a2285d58ef0ac1e8219', type: "number", class: 'has-leading-icon', aria: "field-width", id: "field-width", value: this.dataItem?.width, onChange: e => this.alter({ width: e.target.value }) })), h("div", { key: 'f85adcc366ccb56ce1f25eba32c6ea4ed3947f67', class: 'input-wrapper' }, h("ls-icon", { key: '78c2d0da09465b932728c3a6ed1d3b14895f3687', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: 'f43725d395b60b393d7989b22198ffbfb8abed15', type: "number", class: 'has-leading-icon', aria: "field-height", id: "field-height", value: this.dataItem?.height, onChange: e => this.alter({ height: e.target.value }) })))), h("div", { key: '678e33f56594bde997a4d679fcf1d03672f9af44', class: 'ls-field-properties-section' }, h("div", { key: '3365548c87c4ac6f02c74fcf8b1780ebda03d4c4', class: 'ls-field-properties-section-text' }, h("p", { key: 'ce7c9653b7ddaf6b256a4cb4bef3cbe3bcddd65a', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: '13b174384f825593dc13d22ce6eb3ebb0b7eb954', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: 'c26db33451376140452a9d0722bae531e84a3382', class: 'button-group' }, h("button", { key: '8e1a002ea92227d531dd4d5f6760f4cb83866dd3', disabled: true }, h("ls-icon", { key: 'b11fb135a1183a4e5de10942852d3bc34f52f532', name: "field-scale" })), h("button", { key: '9a8a2aa33fd2ee14abb40e099e666f9f37137e25', disabled: true }, h("ls-icon", { key: '5fc371d3a123cc4848eb5514f90a6b6b61056e50', name: "field-match-width" })), h("button", { key: '1ec86eddacbbaa6061777562997634dd760d0fac', disabled: true }, h("ls-icon", { key: 'e2d3e787115ee66f61eda48d22be2d063beaac7e', name: "field-match-height" }))))))));
     }
     static get is() { return "ls-field-dimensions"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"ls-field-dimensions.js","sourceRoot":"","sources":["../../../src/components/ls-field-dimensions/ls-field-dimensions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-dimensions',\n  styleUrl: 'ls-field-dimensions.css',\n  shadow: true,\n})\nexport class LsFieldDimensions {\n  @Prop({ mutable: true }) dataItem: LSApiElement | LSApiElement[];\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n    return (dt as LSApiElement[]).length === undefined;\n  }\n\n  isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n    return typeof (dt as LSApiElement[]).length === 'number';\n  }\n\n  // 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    if (this.isMultiple(this.dataItem)) {\n      const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n        return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n      });\n\n      this.dataItem = diffs.map(d => d.data as LSApiElement);\n      this.mutate.emit(diffs);\n      this.update.emit(diffs);\n    } else {\n      const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } as LSApiElement } as LSMutateEvent;\n      this.dataItem = singleDiff.data as LSApiElement;\n      this.mutate.emit([singleDiff]);\n      this.update.emit([singleDiff]);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.isMultiple(this.dataItem) && (\n          <div class={'ls-field-properties-section'}>\n            <div>\n              Height: <input value={''} onChange={e => this.alter({ height: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n            <div>\n              Width: <input value={''} onChange={e => this.alter({ width: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n            <div>\n              Top: <input value={''} onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n            <div>\n              Left: <input value={''} onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n          </div>\n        )}\n        {this.isSingle(this.dataItem) && (\n          <div class={'field-set'}>\n            <div class={'ls-field-properties-section'}>\n              <div class={'ls-field-properties-section-text'}>\n                <p class={'ls-field-properties-section-title'}>Height and Width</p>\n                <p class={'ls-field-properties-section-description'}>Define the height and width of one or multiple fields</p>\n              </div>\n              <div class={'input-row'}>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIcon\" name=\"field-match-width\"></ls-icon>\n                  <input\n                    class={'has-leading-icon'}\n                    aria=\"field-width\"\n                    id=\"field-width\"\n                    value={this.dataItem?.width}\n                    onChange={e => this.alter({ width: (e.target as HTMLInputElement).value })}\n                  />\n                </div>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIcon\" name=\"field-match-height\"></ls-icon>\n                  <input\n                    class={'has-leading-icon'}\n                    aria=\"field-height\"\n                    id=\"field-height\"\n                    value={this.dataItem?.height}\n                    onChange={e => this.alter({ height: (e.target as HTMLInputElement).value })}\n                  />\n                </div>\n              </div>\n            </div>\n\n            <div class={'ls-field-properties-section'}>\n              <div class={'ls-field-properties-section-text'}>\n                <p class={'ls-field-properties-section-title'}>Scale and Resize</p>\n                <p class={'ls-field-properties-section-description'}>Multi-select fields and match their dimensions</p>\n              </div>\n              <div class={'button-group'}>\n                <button disabled>\n                  <ls-icon name=\"field-scale\"></ls-icon>\n                </button>\n                <button disabled>\n                  <ls-icon name=\"field-match-width\"></ls-icon>\n                </button>\n                <button disabled>\n                  <ls-icon name=\"field-match-height\"></ls-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-field-dimensions.js","sourceRoot":"","sources":["../../../src/components/ls-field-dimensions/ls-field-dimensions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-dimensions',\n  styleUrl: 'ls-field-dimensions.css',\n  shadow: true,\n})\nexport class LsFieldDimensions {\n  @Prop({ mutable: true }) dataItem: LSApiElement | LSApiElement[];\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n    return (dt as LSApiElement[]).length === undefined;\n  }\n\n  isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n    return typeof (dt as LSApiElement[]).length === 'number';\n  }\n\n  // 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    if (this.isMultiple(this.dataItem)) {\n      const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n        return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n      });\n\n      this.dataItem = diffs.map(d => d.data as LSApiElement);\n      this.mutate.emit(diffs);\n      this.update.emit(diffs);\n    } else {\n      const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } as LSApiElement } as LSMutateEvent;\n      this.dataItem = singleDiff.data as LSApiElement;\n      this.mutate.emit([singleDiff]);\n      this.update.emit([singleDiff]);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.isMultiple(this.dataItem) && (\n          <div class={'ls-field-properties-section'}>\n            <div class={'ls-field-properties-section-text'}>\n              <p class={'ls-field-properties-section-title'}>Height and Width</p>\n              <p class={'ls-field-properties-section-description'}>Define the height and width of one or multiple fields</p>\n            </div>\n            <div class={'input-row'}>\n              <div class={'input-wrapper'}>\n                <ls-icon id=\"selectLeadingIcon\" name=\"field-match-width\"></ls-icon>\n                <input class={'has-leading-icon'} aria=\"field-width\" id=\"field-width\" onChange={e => this.alter({ width: (e.target as HTMLInputElement).value })} />\n              </div>\n              <div class={'input-wrapper'}>\n                <ls-icon id=\"selectLeadingIcon\" name=\"field-match-height\"></ls-icon>\n                <input class={'has-leading-icon'} aria=\"field-height\" id=\"field-height\" onChange={e => this.alter({ height: (e.target as HTMLInputElement).value })} />\n              </div>\n            </div>\n\n            {/* <div>\n              Top: <input value={''} onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n            <div>\n              Left: <input value={''} onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div> */}\n          </div>\n        )}\n        {this.isSingle(this.dataItem) && (\n          <div class={'field-set'}>\n            <div class={'ls-field-properties-section'}>\n              <div class={'ls-field-properties-section-text'}>\n                <p class={'ls-field-properties-section-title'}>Height and Width</p>\n                <p class={'ls-field-properties-section-description'}>Define the height and width of one or multiple fields</p>\n              </div>\n              <div class={'input-row'}>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIcon\" name=\"field-match-width\"></ls-icon>\n                  <input\n                    type=\"number\"\n                    class={'has-leading-icon'}\n                    aria=\"field-width\"\n                    id=\"field-width\"\n                    value={this.dataItem?.width}\n                    onChange={e => this.alter({ width: (e.target as HTMLInputElement).value })}\n                  />\n                </div>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIcon\" name=\"field-match-height\"></ls-icon>\n                  <input\n                    type=\"number\"\n                    class={'has-leading-icon'}\n                    aria=\"field-height\"\n                    id=\"field-height\"\n                    value={this.dataItem?.height}\n                    onChange={e => this.alter({ height: (e.target as HTMLInputElement).value })}\n                  />\n                </div>\n              </div>\n            </div>\n\n            <div class={'ls-field-properties-section'}>\n              <div class={'ls-field-properties-section-text'}>\n                <p class={'ls-field-properties-section-title'}>Scale and Resize</p>\n                <p class={'ls-field-properties-section-description'}>Multi-select fields and match their dimensions</p>\n              </div>\n              <div class={'button-group'}>\n                <button disabled>\n                  <ls-icon name=\"field-scale\"></ls-icon>\n                </button>\n                <button disabled>\n                  <ls-icon name=\"field-match-width\"></ls-icon>\n                </button>\n                <button disabled>\n                  <ls-icon name=\"field-match-height\"></ls-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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