npm - legalesign-document-viewer - Versions diffs - 0.4.5 → 0.4.7 - Mend

legalesign-document-viewer 0.4.5 → 0.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (385) hide show

package/dist/components/p-CqvHgqQi.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-CqvHgqQi.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-distribute/ls-field-distribute.css?tag=ls-field-distribute&encapsulation=shadow","src/components/ls-field-distribute/ls-field-distribute.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n position: relative;\n}\n\n.ls-toolbar-numeric {\n width: 2.813rem;\n max-height: 1.125rem;\n margin: 0px;\n padding: 0px;\n}\n\n* {\n margin: 0;\n box-sizing: border-box;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.multi-button-group-row {\n display: flex;\n gap: 0.5rem;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; /* 120% */\n}\n\n.input-row {\n display: flex;\n gap: 0.5rem;\n}\n\n.input-row .input-wrapper input {\n width: 9.313rem;\n max-width: 9.313rem;\n}\n\n/* Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n}\n\n.input-wrapper {\n position: relative;\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIconDisabled {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-50, #d8d9dc);\n}\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus:not(:disabled),\nselect:focus:not(:disabled),\ntextarea:focus:not(:disabled) {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active:not(:disabled),\nselect:active:not(:disabled),\ntextarea:active:not(:disabled) {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n color: var(--gray-50, #d8d9dc);\n box-shadow: none;\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n width: 100%;\n}\n\n.button-group button {\n display: flex;\n width: 100%;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:disabled {\n background: var(--gray-10, #f7f8fa);\n cursor: not-allowed;\n color: var(--gray-50, #d8d9dc);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { oob } from '../ls-document-viewer/editorUtils';\nimport { attachAllTooltips } from '../../utils/tooltip';\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 } 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 gapVertical(spacing: number) {\n const sorted = this.dataItem.sort((a, b) => a.top - b.top);\n\n var buffer = sorted[0].top;\n\n const diffs: LSMutateEvent[] = sorted.map(c => {\n const newTop = buffer;\n buffer = buffer + c.height + spacing;\n const target = {\n ...c,\n top: newTop,\n } as LSApiElement;\n\n return {\n action: 'update',\n data: oob(target)\n ? ({\n ...c,\n left: c.pageDimensions.height - c.height - 1,\n } as LSApiElement)\n : target,\n };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n gapHorizontal(spacing: number) {\n const sorted = this.dataItem.sort((a, b) => a.top - b.top);\n\n var buffer = sorted[0].left;\n\n const diffs: LSMutateEvent[] = sorted.map(c => {\n const newLeft = buffer;\n buffer = buffer + c.width + spacing;\n const target = {\n ...c,\n left: newLeft,\n } as LSApiElement;\n\n console.log(target, oob(target));\n\n return {\n action: 'update',\n data: oob(target)\n ? ({\n ...c,\n left: c.pageDimensions.width - c.width - 1,\n } as LSApiElement)\n : target,\n };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n 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 const target = {\n ...c,\n top: newTop,\n } as LSApiElement;\n\n return {\n action: 'update',\n data: oob(target)\n ? ({\n ...c,\n top: c.pageDimensions.height - c.height,\n } as LSApiElement)\n : target,\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 componentDidLoad() {\n attachAllTooltips(this.component.shadowRoot);\n }\n\n render() {\n return (\n <Host>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Distribution</p>\n <p class={'ls-field-properties-section-description'}>Multi-select fields and evenly space them out</p>\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.distributeVertical();\n }}\n aria-label=\"Distribute selected fields vertically.\"\n data-tooltip=\"Distribute selected fields vertically\"\n >\n <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.distributeHorizontal();\n }}\n aria-label=\"Distribute selected fields horizontally.\"\n data-tooltip=\"Distribute selected fields horizontally\"\n >\n <ls-icon name=\"field-distribute-horizontally\"></ls-icon>\n </button>\n </div>\n </div>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Gap</p>\n <p class={'ls-field-properties-section-description'}>Define the exact gap between multi-select fields.</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'} data-tooltip=\"Set vertical gap between selected fields\">\n <ls-icon id=\"selectLeadingIcon\" name=\"field-distribute-vertically\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n id=\"ls-fix-vertical-space\"\n onChange={e => {\n this.gapVertical(parseInt((e.target as HTMLInputElement).value));\n }}\n value={''}\n size={4}\n min={0}\n max={9999}\n />\n </div>\n <div class={'input-wrapper'} data-tooltip=\"Set horizontal gap between selected fields\">\n <ls-icon id=\"selectLeadingIcon\" name=\"field-distribute-horizontally\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n id=\"ls-fix-horizontal-space\"\n onChange={e => {\n this.gapHorizontal(parseInt((e.target as HTMLInputElement).value));\n }}\n value={''}\n size={4}\n min={0}\n max={9999}\n />\n </div>\n </div>\n </div>\n <ls-tooltip id=\"ls-tooltip-master\" />\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-DC0HL60H.js → p-CwVY532N.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-CEhCcP_A.js';
+import { p as proxyCustomElement, H, h } from './p-BnGihP6t.js';
 import { c as computePosition, o as offset, f as flip, s as shift, a as arrow } from './p-gQGwMtz0.js';
 const lsTooltipCss = ":host{position:absolute;pointer-events:none}*{box-sizing:border-box;margin:0;padding:0}.tooltip{position:absolute;border-radius:0.5rem;background:var(--gray-100, #45484d);color:var(--white, #fff);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;padding:0.5rem 0.75rem;max-width:200px;width:max-content;white-space:wrap;z-index:1000;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 -1px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)}.tooltip-title{font-size:0.875rem;font-weight:600;line-height:1rem;margin-bottom:0.25rem}.tooltip.visible{opacity:1;visibility:block;scale:1;transition:opacity 0.3s 1s ease-out, scale 0.1s 0.5s ease-out}.tooltip.hidden{opacity:0;scale:0.85;transition:opacity 0.2s ease-in, scale 0.1s 0.5s ease-in}#arrow{position:absolute;background:var(--gray-100, #45484d);width:0.625rem;height:0.625rem;transform:rotate(45deg);border-radius:0.125rem}";
@@ -59,7 +59,7 @@ const LsTooltip = /*@__PURE__*/ proxyCustomElement(class LsTooltip extends H {
         innerTooltip.classList.add('hidden');
     }
     render() {
-        return (h("div", { key: '8c98202b7ccd92d698b4eb67af9bc2c42efbddd2', id: "ls-tooltip-inner", class: "tooltip hidden", role: "tooltip" }, h("div", { key: '708044e1a3afd7d41f4d8a28329a5f6a398bece3', id: "arrow" }), this.tooltipTitle && h("p", { key: '0ca6a01f2f4038d992ef3b866d89ccb6b1058c0d', class: "tooltip-title" }, this.tooltipTitle), this.tooltipText, h("slot", { key: 'ae9c4b1c0bb769b106f4ffd92e0ecd1bb3f312e1' })));
+        return (h("div", { key: '0e5642c211c164f0f6d9e8221be4d668eedc3b74', id: "ls-tooltip-inner", class: "tooltip hidden", role: "tooltip" }, h("div", { key: '2354cb2b4689c02d9dc4573b1a41b043f2da59e8', id: "arrow" }), this.tooltipTitle && h("p", { key: '1d1c7a8a5c3cf388ef202a77ab4b242129572276', class: "tooltip-title" }, this.tooltipTitle), this.tooltipText, h("slot", { key: 'e8cb721e79f022387958f5b5357db677477a996a' })));
     }
     static get watchers() { return {
         "referenceElement": ["updateReferenceHandler"]
@@ -91,6 +91,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { LsTooltip as L, defineCustomElement as d };
-//# sourceMappingURL=p-DC0HL60H.js.map
+//# sourceMappingURL=p-CwVY532N.js.map
-//# sourceMappingURL=p-DC0HL60H.js.map
+//# sourceMappingURL=p-CwVY532N.js.map

package/dist/components/{p-DC0HL60H.js.map → p-CwVY532N.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~DC0HL60H~~.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-tooltip/ls-tooltip.css?tag=ls-tooltip&encapsulation=shadow","src/components/ls-tooltip/ls-tooltip.tsx"],"sourcesContent":[":host {\n position: absolute;\n pointer-events: none;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n.tooltip {\n position: absolute;\n border-radius: 0.5rem;\n background: var(--gray-100, #45484d);\n color: var(--white, #fff);\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n padding: 0.5rem 0.75rem;\n max-width: 200px;\n width: max-content;\n white-space: wrap;\n z-index: 1000;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 -1px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);\n}\n\n.tooltip-title {\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1rem;\n margin-bottom: 0.25rem;\n}\n\n.tooltip.visible {\n opacity: 1;\n visibility: block;\n scale: 1;\n transition: opacity 0.3s 1s ease-out, scale 0.1s 0.5s ease-out;\n}\n\n.tooltip.hidden {\n opacity: 0;\n scale: 0.85;\n transition: opacity 0.2s ease-in, scale 0.1s 0.5s ease-in;\n}\n#arrow {\n position: absolute;\n background: var(--gray-100, #45484d);\n width: 0.625rem;\n height: 0.625rem;\n transform: rotate(45deg);\n border-radius: 0.125rem;\n}\n","import { arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, Element, Method, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'ls-tooltip',\n styleUrl: 'ls-tooltip.css',\n shadow: true,\n})\nexport class LsTooltip {\n @Element() el: HTMLElement;\n @Prop({ mutable: true }) referenceElement: HTMLElement;\n @Prop({ mutable: true }) placement: 'top' \| 'bottom' \| 'left' \| 'right' = 'top';\n @Prop({ mutable: true }) tooltipText: string;\n @Prop({ mutable: true }) tooltipTitle: string;\n @Prop() tooltipLocked = false;\n\n @Watch('referenceElement')\n updateReferenceHandler(newReference: HTMLElement) {\n if (!newReference) return;\n\n this.tooltipText = newReference.getAttribute('data-tooltip');\n this.tooltipTitle = newReference.getAttribute('data-tooltip-title');\n this.placement = (newReference.getAttribute('data-tooltip-placement') as 'top' \| 'bottom' \| 'left' \| 'right') \|\| 'top';\n\n const arrowElement = this.el.shadowRoot.querySelector('#arrow');\n const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner') as HTMLElement;\n\n computePosition(this.referenceElement, innerTooltip, {\n placement: this.placement,\n middleware: [offset(6), flip(), shift({ padding: 5 }), arrow({ element: arrowElement })],\n })\n .then(({ x, y, placement, middlewareData }) => {\n Object.assign(innerTooltip.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow \|\| {};\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[placement.split('-')[0]];\n\n Object.assign((arrowElement as HTMLElement).style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n right: '',\n bottom: '',\n [staticSide]: '-4px',\n });\n })\n .then(() => {\n innerTooltip.classList.remove('hidden');\n innerTooltip.classList.add('visible');\n this.referenceElement = null;\n });\n }\n\n @Method()\n async hide() {\n const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner') as HTMLElement;\n innerTooltip.classList.remove('visible');\n innerTooltip.classList.add('hidden');\n }\n\n render() {\n return (\n <div id=\"ls-tooltip-inner\" class=\"tooltip hidden\" role=\"tooltip\">\n <div id=\"arrow\"></div>\n {this.tooltipTitle && <p class=\"tooltip-title\">{this.tooltipTitle}</p>}\n {this.tooltipText}\n <slot />\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-CwVY532N.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-tooltip/ls-tooltip.css?tag=ls-tooltip&encapsulation=shadow","src/components/ls-tooltip/ls-tooltip.tsx"],"sourcesContent":[":host {\n position: absolute;\n pointer-events: none;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n.tooltip {\n position: absolute;\n border-radius: 0.5rem;\n background: var(--gray-100, #45484d);\n color: var(--white, #fff);\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n padding: 0.5rem 0.75rem;\n max-width: 200px;\n width: max-content;\n white-space: wrap;\n z-index: 1000;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 -1px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);\n}\n\n.tooltip-title {\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1rem;\n margin-bottom: 0.25rem;\n}\n\n.tooltip.visible {\n opacity: 1;\n visibility: block;\n scale: 1;\n transition: opacity 0.3s 1s ease-out, scale 0.1s 0.5s ease-out;\n}\n\n.tooltip.hidden {\n opacity: 0;\n scale: 0.85;\n transition: opacity 0.2s ease-in, scale 0.1s 0.5s ease-in;\n}\n#arrow {\n position: absolute;\n background: var(--gray-100, #45484d);\n width: 0.625rem;\n height: 0.625rem;\n transform: rotate(45deg);\n border-radius: 0.125rem;\n}\n","import { arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, Element, Method, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'ls-tooltip',\n styleUrl: 'ls-tooltip.css',\n shadow: true,\n})\nexport class LsTooltip {\n @Element() el: HTMLElement;\n @Prop({ mutable: true }) referenceElement: HTMLElement;\n @Prop({ mutable: true }) placement: 'top' \| 'bottom' \| 'left' \| 'right' = 'top';\n @Prop({ mutable: true }) tooltipText: string;\n @Prop({ mutable: true }) tooltipTitle: string;\n @Prop() tooltipLocked = false;\n\n @Watch('referenceElement')\n updateReferenceHandler(newReference: HTMLElement) {\n if (!newReference) return;\n\n this.tooltipText = newReference.getAttribute('data-tooltip');\n this.tooltipTitle = newReference.getAttribute('data-tooltip-title');\n this.placement = (newReference.getAttribute('data-tooltip-placement') as 'top' \| 'bottom' \| 'left' \| 'right') \|\| 'top';\n\n const arrowElement = this.el.shadowRoot.querySelector('#arrow');\n const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner') as HTMLElement;\n\n computePosition(this.referenceElement, innerTooltip, {\n placement: this.placement,\n middleware: [offset(6), flip(), shift({ padding: 5 }), arrow({ element: arrowElement })],\n })\n .then(({ x, y, placement, middlewareData }) => {\n Object.assign(innerTooltip.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow \|\| {};\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[placement.split('-')[0]];\n\n Object.assign((arrowElement as HTMLElement).style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n right: '',\n bottom: '',\n [staticSide]: '-4px',\n });\n })\n .then(() => {\n innerTooltip.classList.remove('hidden');\n innerTooltip.classList.add('visible');\n this.referenceElement = null;\n });\n }\n\n @Method()\n async hide() {\n const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner') as HTMLElement;\n innerTooltip.classList.remove('visible');\n innerTooltip.classList.add('hidden');\n }\n\n render() {\n return (\n <div id=\"ls-tooltip-inner\" class=\"tooltip hidden\" role=\"tooltip\">\n <div id=\"arrow\"></div>\n {this.tooltipTitle && <p class=\"tooltip-title\">{this.tooltipTitle}</p>}\n {this.tooltipText}\n <slot />\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/p-D0oqtZ7v.js ADDED Viewed

@@ -0,0 +1,161 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BnGihP6t.js';
+import { d as defaultRolePalette } from './p-CwCWCxsI.js';
+import { g as getFieldIcon } from './p-Cp3IxvzK.js';
+import { d as defineCustomElement$b } from './p-CB6w78IO.js';
+import { d as defineCustomElement$a } from './p-SymuFFwR.js';
+import { d as defineCustomElement$9 } from './p-BHTy08Q0.js';
+import { d as defineCustomElement$8 } from './p-CqvHgqQi.js';
+import { d as defineCustomElement$7 } from './p-CYeSt5Fo.js';
+import { d as defineCustomElement$6 } from './p-D5Lt75HV.js';
+import { d as defineCustomElement$5 } from './p-BSoZFh0I.js';
+import { d as defineCustomElement$4 } from './p-COuOscFT.js';
+import { d as defineCustomElement$3 } from './p-95nSEls8.js';
+import { d as defineCustomElement$2 } from './p-CMrBTV-g.js';
+import { d as defineCustomElement$1 } from './p-CwVY532N.js';
+const lsFieldPropertiesMultipleCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.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}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;text-transform:capitalize}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.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}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:2.25rem;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{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{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{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}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.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-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;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:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
+const LsFieldPropertiesMultiple = /*@__PURE__*/ proxyCustomElement(class LsFieldPropertiesMultiple extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.mutate = createEvent(this, "mutate", 7);
+        this.update = createEvent(this, "update", 7);
+    }
+    dataItem;
+    mutate;
+    update;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    // NOTE this alter is debounced to account for typing
+    alter(diff) {
+        this.dataItem = this.dataItem.map(item => ({ ...item, ...diff }));
+        this.debounce(diff, 500);
+    }
+    labeltimer;
+    debounce(diff, delay) {
+        if (this.labeltimer)
+            clearTimeout(this.labeltimer);
+        this.labeltimer = setTimeout(() => {
+            const evs = this.dataItem.map(item => ({ action: 'update', data: { ...item, ...diff } }));
+            this.mutate.emit(evs);
+            this.update.emit(evs);
+        }, delay);
+    }
+    allSignersSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, signer: undefined };
+        const firstSigner = this.dataItem[0].signer;
+        const allSame = this.dataItem.every(item => item.signer === firstSigner);
+        return { isSame: allSame, signer: allSame ? firstSigner : 13 };
+    };
+    allLabelsSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, label: undefined };
+        const firstLabel = this.dataItem[0].label;
+        const allSame = this.dataItem.every(item => item.label === firstLabel);
+        return { isSame: allSame, label: allSame ? firstLabel : undefined };
+    };
+    allElementsSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, elementType: 'mixed' };
+        const firstElementType = this.dataItem[0].elementType;
+        const allSame = this.dataItem.every(item => item.elementType === firstElementType);
+        return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };
+    };
+    allFieldsOptional = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, optional: false };
+        const firstElementOptional = this.dataItem[0].optional;
+        const allSame = this.dataItem.every(item => item.optional === firstElementOptional);
+        return { isSame: allSame, optional: allSame ? firstElementOptional : false };
+    };
+    render() {
+        return (h(Host, { key: '898bf5f2dcae78a352a6b8a636412b8a534b496a' }, h("ls-field-properties-container", { key: '78e9db977ced7ae601f7a1ff6af853fa772ccf42', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: '484e69c5f6e2e1610959afd8119eb5cadbff8b82', class: 'field-set', slot: "content" }, h("div", { key: '48bbaa0b6b54638a67006a6b97c03f529861eb77', class: 'ls-field-properties-section' }, h("div", { key: '5631d6db8ba45449dd34f60dc2d8822a319a2dc3', class: 'ls-field-properties-section-text' }, h("p", { key: '05260984a9f922f7e080fce2d75883d2267ece3a', class: 'ls-field-properties-section-title' }, "Field Type"), h("p", { key: 'c5076d4a6b92186e99ebcfbe57b585f32bae8560', class: 'ls-field-properties-section-description' }, "The Fields you currently have selected")), h("div", { key: '438ccaaf02b909e0ebba17394d553fc4c00a9809', class: 'ls-field-type-wrapper', style: {
+                border: `1px dashed ${defaultRolePalette[this.allSignersSame().signer % 100].s30}`,
+                background: defaultRolePalette[this.allSignersSame().signer % 100].s10,
+            } }, h("div", { key: '7d078c08df9362e321987924ad36e2672deb7d33', class: 'ls-field-type-inner' }, h("div", { key: '5b24658d67b87b5ed07380ad2254509e846ca9ec', class: 'ls-field-type-icon', style: {
+                border: `1px solid ${defaultRolePalette[this.allSignersSame().signer % 100].s60}`,
+                color: defaultRolePalette[this.allSignersSame().signer % 100].s60,
+                background: defaultRolePalette[this.allSignersSame().signer % 100].s10,
+            } }, h("ls-icon", { key: '7bdd33ecf47ff7f282031091f06d7cde704819da', name: getFieldIcon(this.allElementsSame().elementType), size: "1.25rem" })), h("p", { key: 'b1d773176ea02bd27d46cea0c5b997ebe5c575fc', class: 'ls-field-type-name' }, this.dataItem.length, " ", this.allElementsSame().elementType, " ", 'Fields')))), h("div", { key: '398a8ddf0fdb5466baf13d3185746d4515bf8de6', class: 'ls-field-properties-section row' }, h("div", { key: '2777add4b21cefd15d430f0a64cd4888e53569ca', class: 'ls-field-properties-section-text' }, h("p", { key: '91672c9039cc267bbfe5b6c82ec1b415028d16ba', class: 'ls-field-properties-section-title' }, "Required Field")), h("ls-toggle", { key: 'e1581cbd990fd085f9164abf3ecaae4f608eaf70', onValueChange: (ev) => this.alter({ optional: !ev.detail }), checked: !this.allFieldsOptional().optional, indeterminate: this.allFieldsOptional().isSame === false })), h("div", { key: '654f98a2b3fdbfc1f75ebbc6fdcd4924c34d0f77', class: 'ls-field-properties-section' }, h("div", { key: 'c8379e6ac365ee97c77a2fc62f52691386e9e9fc', class: 'ls-field-properties-section-text' }, h("p", { key: '927458b6483aca60507bb384c6b8183e64fa0560', class: 'ls-field-properties-section-title' }, "Field Label"), h("p", { key: '6c26748b388121507b19d8a83fdaf82f5f461bbb', class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), h("input", { key: '23309345964c6cabdf7342b669eebec4b3506363', value: this.allLabelsSame().label, onInput: (e) => this.alter({ label: e.target.value }), width: "30", placeholder: "eg. Sign Here" }))), h("div", { key: '81fb6ba5642271ef254e73acc510ac757f647e6c', class: 'field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: 'c24eefb1f599624eaa6b6fee9b9c938a99f697f8', dataItem: this.dataItem }), h("ls-field-size", { key: '6fd636331dd35bf6b02ea2769c88864773a67ae6', dataItem: this.dataItem })), h("div", { key: '88875c4d8fe159a136ad39429be909f4cd25d620', class: 'field-set', slot: "placement" }, h("ls-field-alignment", { key: '8e9601b8157a65ed12dcde1e5a76f9234b111137', dataItem: this.dataItem }), h("ls-field-placement", { key: '349b804d481e72abb977b0b35ed475c679be70cc', dataItem: this.dataItem }), h("ls-field-distribute", { key: 'c0611739c68d01c64e9b74c2ff0e8a48758b4730', dataItem: this.dataItem }))), h("ls-field-footer", { key: 'bda746f14ab32d2c11921d34f1189ccd0d3d8b55' }), h("slot", { key: '973a8f1004677bd0cd27c2574acdf06718d7199b' })));
+    }
+    static get style() { return lsFieldPropertiesMultipleCss; }
+}, [257, "ls-field-properties-multiple", {
+        "dataItem": [1040, "data-item"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-field-properties-multiple", "ls-editor-field", "ls-field-alignment", "ls-field-dimensions", "ls-field-distribute", "ls-field-footer", "ls-field-placement", "ls-field-properties-container", "ls-field-size", "ls-icon", "ls-toggle", "ls-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-field-properties-multiple":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LsFieldPropertiesMultiple);
+            }
+            break;
+        case "ls-editor-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ls-field-alignment":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "ls-field-dimensions":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "ls-field-distribute":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ls-field-footer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ls-field-placement":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ls-field-properties-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ls-field-size":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-toggle":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+export { LsFieldPropertiesMultiple as L, defineCustomElement as d };
+//# sourceMappingURL=p-D0oqtZ7v.js.map
+//# sourceMappingURL=p-D0oqtZ7v.js.map

package/dist/components/p-D0oqtZ7v.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-D0oqtZ7v.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-multiple/ls-field-properties-multiple.css?tag=ls-field-properties-multiple&encapsulation=shadow","src/components/ls-field-properties-multiple/ls-field-properties-multiple.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n* {\n margin: 0;\n}\n\n.properties-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; /* 120% */\n}\n\n.ls-field-type-wrapper {\n position: relative;\n border-radius: 0.875rem;\n padding: 0.25rem;\n}\n\n.ls-field-type-inner {\n border-radius: 0.625rem;\n background: var(--white, #fff);\n display: flex;\n padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n align-items: center;\n gap: 0.875rem;\n align-self: stretch;\n}\n\n.ls-field-type-icon {\n display: flex;\n padding: 0.5rem;\n align-items: center;\n border-radius: 0.5rem;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\n.ls-field-type-name {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n text-transform: capitalize;\n}\n\n.tabs-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n width: 100%;\n gap: 0.125rem;\n padding: 0.125rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n border-radius: 0.75rem;\n background: var(--white, #ffffff);\n}\n\n.ls-tab {\n all: unset;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n padding: 0.5rem;\n border-radius: 0.625rem;\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n color: var(--gray-80, #6c6e73);\n}\n\n.ls-tab.active {\n background: var(--primary-10, #eff4ff);\n color: var(--primary-60, #4456f6);\n}\n\n.ls-tab:not(.active):hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-footer {\n display: flex;\n padding-top: 1rem;\n border-top: 1px solid var(--gray-20, #f0f1f2);\n flex-direction: column;\n justify-content: flex-end;\n gap: 0.75rem;\n margin-top: auto;\n}\n\n.scrolling-container {\n overflow-y: auto;\n padding: 0 1rem;\n margin: 0 -1rem;\n height: calc(100% - 10.938rem);\n}\n\n/* Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 2.25rem;\n width: 100%;\n}\n\n.input-wrapper {\n position: relative;\n}\n\n.full-width {\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n display: flex;\n gap: 0.5rem;\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n font-weight: 500;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--white, #fff);\n color: var(--gray-90, #5e6066);\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n border: 1px solid var(--red-60, #f04438);\n background-color: white;\n color: var(--red-60);\n}\n\nbutton.destructive:hover {\n border: 1px solid var(--red-70, #d92d20);\n background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n}\n\n.button-group button {\n display: flex;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n min-height: unset;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { getFieldIcon } from '../ls-document-viewer/defaultFieldIcons';\n\n@Component({\n tag: 'ls-field-properties-multiple',\n styleUrl: 'ls-field-properties-multiple.css',\n shadow: true,\n})\nexport class LsFieldPropertiesMultiple {\n @Prop({ mutable: true }) 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\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n // NOTE this alter is debounced to account for typing\n alter(diff: object) {\n this.dataItem = this.dataItem.map(item => ({ ...item, ...diff }));\n this.debounce(diff, 500);\n }\n\n private labeltimer;\n\n debounce(diff, delay) {\n if (this.labeltimer) clearTimeout(this.labeltimer);\n\n this.labeltimer = setTimeout(() => {\n const evs: LSMutateEvent[] = this.dataItem.map(item => ({ action: 'update', data: { ...item, ...diff } }));\n this.mutate.emit(evs);\n this.update.emit(evs);\n }, delay);\n }\n \n allSignersSame = () => {\n if (!this.dataItem || this.dataItem.length === 0) return { isSame: true, signer: undefined };\n const firstSigner = this.dataItem[0].signer;\n const allSame = this.dataItem.every(item => item.signer === firstSigner);\n return { isSame: allSame, signer: allSame ? firstSigner : 13 };\n };\n\n allLabelsSame = () => {\n if (!this.dataItem || this.dataItem.length === 0) return { isSame: true, label: undefined };\n const firstLabel = this.dataItem[0].label;\n const allSame = this.dataItem.every(item => item.label === firstLabel);\n return { isSame: allSame, label: allSame ? firstLabel : undefined };\n };\n\n allElementsSame = () => {\n if (!this.dataItem || this.dataItem.length === 0) return { isSame: true, elementType: 'mixed' };\n const firstElementType = this.dataItem[0].elementType;\n const allSame = this.dataItem.every(item => item.elementType === firstElementType);\n return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };\n };\n\n allFieldsOptional = () => {\n if (!this.dataItem || this.dataItem.length === 0) return { isSame: true, optional: false };\n const firstElementOptional = this.dataItem[0].optional;\n const allSame = this.dataItem.every(item => item.optional === firstElementOptional);\n return { isSame: allSame, optional: allSame ? firstElementOptional : false };\n };\n\n render() {\n return (\n <Host>\n <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n <div class={'field-set'} slot=\"content\">\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Type</p>\n <p class={'ls-field-properties-section-description'}>The Fields you currently have selected</p>\n </div>\n <div\n class={'ls-field-type-wrapper'}\n style={{\n border: `1px dashed ${defaultRolePalette[this.allSignersSame().signer % 100].s30}`,\n background: defaultRolePalette[this.allSignersSame().signer % 100].s10,\n }}\n >\n <div class={'ls-field-type-inner'}>\n <div\n class={'ls-field-type-icon'}\n style={{\n border: `1px solid ${defaultRolePalette[this.allSignersSame().signer % 100].s60}`,\n color: defaultRolePalette[this.allSignersSame().signer % 100].s60,\n background: defaultRolePalette[this.allSignersSame().signer % 100].s10,\n }}\n >\n <ls-icon name={getFieldIcon(this.allElementsSame().elementType)} size=\"1.25rem\" />\n </div>\n <p class={'ls-field-type-name'}>\n {this.dataItem.length} {this.allElementsSame().elementType} {'Fields'}\n </p>\n </div>\n </div>\n </div>\n <div class={'ls-field-properties-section row'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Required Field</p>\n </div>\n <ls-toggle onValueChange={(ev) => this.alter({ optional: !ev.detail })} checked={!this.allFieldsOptional().optional} indeterminate={this.allFieldsOptional().isSame === false} />\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'}>Field Label</p>\n <p class={'ls-field-properties-section-description'}>Add a label to clarify the information required from the Recipient.</p>\n </div>\n <input value={this.allLabelsSame().label} onInput={(e) => this.alter({ label: (e.target as HTMLInputElement).value })} width=\"30\" placeholder=\"eg. Sign Here\" />\n </div>\n </div>\n <div class={'field-set'} slot=\"dimensions\">\n <ls-field-dimensions dataItem={this.dataItem} />\n <ls-field-size dataItem={this.dataItem} />\n </div>\n <div class={'field-set'} slot=\"placement\">\n <ls-field-alignment dataItem={this.dataItem} />\n <ls-field-placement dataItem={this.dataItem} />\n <ls-field-distribute dataItem={this.dataItem} />\n </div>\n </ls-field-properties-container>\n <ls-field-footer />\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/p-D5Lt75HV.js ADDED Viewed

@@ -0,0 +1,103 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BnGihP6t.js';
+import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
+import { d as defineCustomElement$2 } from './p-95nSEls8.js';
+import { d as defineCustomElement$1 } from './p-CwVY532N.js';
+const lsFieldPlacementCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:2.25rem}.input-wrapper{position:relative;width:100%}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
+const LsFieldPlacement = /*@__PURE__*/ proxyCustomElement(class LsFieldPlacement extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.mutate = createEvent(this, "mutate", 7);
+        this.update = createEvent(this, "update", 7);
+    }
+    get component() { return this; }
+    dataItem;
+    mutate;
+    update;
+    isSingle(dt) {
+        return dt.length === undefined;
+    }
+    isMultiple(dt) {
+        return typeof dt.length === 'number';
+    }
+    getValue(key) {
+        if (this.isMultiple(this.dataItem)) {
+            return "";
+        }
+        else if (this.isSingle(this.dataItem)) {
+            return this.dataItem[key];
+        }
+        return '';
+    }
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    alter(diff) {
+        if (this.isMultiple(this.dataItem)) {
+            const diffs = this.dataItem.map(c => {
+                return { action: 'update', data: { ...c, ...diff } };
+            });
+            this.dataItem = diffs.map(d => d.data);
+            this.mutate.emit(diffs);
+            this.update.emit(diffs);
+        }
+        else {
+            const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } };
+            this.dataItem = singleDiff.data;
+            this.mutate.emit([singleDiff]);
+            this.update.emit([singleDiff]);
+        }
+    }
+    center() {
+        return this.dataItem[0].pageDimensions[this.dataItem[0].page].width / 2 - this.dataItem[0].width / 2;
+    }
+    right() {
+        return this.dataItem[0].pageDimensions[this.dataItem[0].page].width - this.dataItem[0].width;
+    }
+    middle() {
+        return this.dataItem[0].pageDimensions[this.dataItem[0].page].height / 2 - this.dataItem[0].height / 2;
+    }
+    bottom() {
+        return this.dataItem[0].pageDimensions[this.dataItem[0].page].height - this.dataItem[0].height;
+    }
+    componentDidLoad() {
+        attachAllTooltips(this.component.shadowRoot);
+    }
+    render() {
+        return (h(Host, { key: '2891a22cc782d26e8019f621139dbb9cfa7912ae' }, this.isMultiple(this.dataItem) && (h("div", { key: 'fca4cfba664c7dcc850247145a19155359778fd6', class: 'ls-field-properties-section' }, h("div", { key: '6840302fca04a9512675d308a0faf89f588e4c92', class: 'ls-field-properties-section-text' }, h("p", { key: 'f148990ba318730ecd8f63dc2a1e07dbfe2e0758', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: 'b6e3392804efacfa479b8352fe9220aa202386ac', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '7c23a0dc256c248870b945337ff3699ee34faca3', class: 'input-row' }, h("div", { key: 'eb3c8491792b11452959601a11d0bb45576112ce', class: 'input-wrapper' }, h("ls-icon", { key: 'e0ef76fb7b4209ea9fca1f69ca063d9db54cab3e', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: '366b808ac6308e7a4c753473db2a906bfb81fe5c', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: 'cc27cf6674efd760f0bf72ba0879750bd3ec58d5', class: 'input-wrapper' }, h("ls-icon", { key: '215d388859634b7ba8bae7772bc2f123bf5072e4', id: "selectLeadingIcon", name: "y" }), h("input", { key: '2679e4e35dcb2529dceab7628e51a06ebf2cb084', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", onChange: e => this.alter({ top: e.target.value }) }))))), this.isSingle(this.dataItem) && (h("div", { key: '36051ca4885a6f000e62b98e93a8cee9275cec56', class: 'field-set' }, h("div", { key: '71f569f20e1cc8a1afdd07979d277cb046832d02', class: 'ls-field-properties-section' }, h("div", { key: 'c3221f6b321a2fe37bb5950bfed9c17d89b4ec06', class: 'ls-field-properties-section-text' }, h("p", { key: 'cac50315a0bf1e69fcda4836b294aded0b9c5b38', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: '57d46a199248986056fa2283a3f983f788ca015f', class: 'ls-field-properties-section-description' }, "Align your Fields relative to the page or multi-select and align then to each other.")), h("div", { key: '600507c665204c312ec88d7dae69f1fd943492e0', class: 'multi-button-group-row' }, h("div", { key: 'bddd2f75ef7695d6f8e8eaebdd8cee1bf3e6f838', class: 'button-group' }, h("button", { key: '00e1849e66a0852577a94889839efe43c1b1c81a', onClick: () => { this.alter({ left: 0 }); }, "data-tooltip": "Align Left" }, h("ls-icon", { key: '9f54b7db1137cef47089564d53e36b3e95a130ee', name: "field-alignment-left" })), h("button", { key: 'c32102532ba8914bfe3ef7345d9a542f5fb3a61b', onClick: () => { this.alter({ left: this.center() }); }, "data-tooltip": "Align Center" }, h("ls-icon", { key: 'b4c4383eadcef61117f3b048bd2b3178b3c0a038', name: "field-alignment-centre" })), h("button", { key: 'bb859c7f759609101af575a282c5f64dabe69c09', onClick: () => { this.alter({ left: this.right() }); }, "data-tooltip": "Align Right" }, h("ls-icon", { key: '688b723605ec157fae2b659bd4d88b08fd897353', name: "field-alignment-right" }))), h("div", { key: 'ed944060fff8351aaa7fd42649cd6447a3961004', class: 'button-group' }, h("button", { key: '808bc6db4bd34934b4aa2f6b7fe47bc561041d7c', onClick: () => this.alter({ top: 0 }), "data-tooltip": "Align Top" }, h("ls-icon", { key: '7215638df9c08fac87e730b9db6963bdaabb6679', name: "field-alignment-top" })), h("button", { key: '740fb0baef8a931ff8f9e3998a048e57e1f73868', onClick: () => { this.alter({ top: this.middle() }); }, "data-tooltip": "Align Middle" }, h("ls-icon", { key: '75151df5e47d9a6f2bdccfcc9de925fd19e7274d', name: "field-alignment-middle" })), h("button", { key: 'd92b4595a17ce95ed97d116a8ec1f1ac848cf45e', onClick: () => { this.alter({ top: this.bottom() }); }, "data-tooltip": "Align Bottom" }, h("ls-icon", { key: '4b46bcab1783eae38c8135cb435123ebf635678b', name: "field-alignment-bottom" }))))), h("div", { key: '3ab3f3ba7a84f9e10590b3e74441f11115fcfcca', class: 'ls-field-properties-section' }, h("div", { key: '2d2bc1642911a36943f543aaea4e1113f6d90468', class: 'ls-field-properties-section-text' }, h("p", { key: '2716c6bd177cee3a74b57f27fceb802f99d00153', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '12b0116cf566e8fbd8c716ce30ff50547f075eeb', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '7c9d57d5988ac74a052d1e8b48891b9e49689f18', class: 'input-row' }, h("div", { key: '80f2dc6d84b2460f9119a4ad6c38cd23754b3f95', class: 'input-wrapper' }, h("ls-icon", { key: 'b5ce0258e81146a5e69ee892db47026af0e4b857', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: 'e1364c47bb93b6486e6a43e1c8375646cc90b19e', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: 'd1785c7797954a99563205073b080fecd91ae9cd', class: 'input-wrapper' }, h("ls-icon", { key: '1c4a39e9dbf1b538c1c5330799d73749421efe40', id: "selectLeadingIcon", name: "y" }), h("input", { key: '1577cc2f618217940a68522e511be25906f93af1', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }), width: "30" })))), h("div", { key: 'e07c33f5a5a0076f9e9d4762280deda6acb70c13', class: 'ls-field-properties-section' }, h("div", { key: '2164bb922476bb458aadb653ddf56811afd6bada', class: 'ls-field-properties-section-text' }, h("p", { key: 'deb4e93fe9730ad60df1ead15d6fd1125e5f1c7b', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: '85be0bf98871e745aeab85a7b3d5e7c7679bbbc1', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '5ea831b28aac09f5379e9fb227f6331ccb496682', class: 'button-group' }, h("button", { key: '8ed8a6be64facd93648d027fde2916a67f42c29c', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, h("ls-icon", { key: '136027ff733b7a222ecbe244bd0fb36ff3652427', name: "field-distribute-vertically" })), h("button", { key: '3408c19d67284f7ea72d73281315be8d8d233f5e', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, h("ls-icon", { key: '0360b37978f388df95806681c652f535e0eeafdb', name: "field-distribute-horizontally" })))), h("div", { key: '44bcfa853a0eaa54b06923d31706d2fa9734e866', class: 'ls-field-properties-section' }, h("div", { key: '7d5949bcc965f4ed677fb6296f541587ad2d78f0', class: 'ls-field-properties-section-text' }, h("p", { key: '4c19bf6ad558044ccd57f959b95cfaf9137d80fe', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: '293c1c62bbf46e56b2ab4cbe95926c8baec55a9c', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: 'c27747a77cce6f8e59f297c68e58c0ad3844a4a7', class: 'input-row' }, h("div", { key: '26961c543f14fe3cc3fab27264c1900e85540e95', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, h("ls-icon", { key: '960ecb65e5729f20baa8e6c3ca091ee8e64d880b', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), h("input", { key: '43057c9c211ab5e6b9d6c0df9867cc6a64b2729b', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), h("div", { key: '5ffd08a406bac946193b108a8ff7cf215b0d1d1a', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, h("ls-icon", { key: '84979d224cbeead196f6e06cd1e1ec0de3b92fb4', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), h("input", { key: '1f1b03545533e57fad828649407e14ede6f41fbe', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true })))))), h("ls-tooltip", { key: 'f04cdce03dae2e63bec8d9588eff9f2e15ad16ff', id: "ls-tooltip-master" })));
+    }
+    static get style() { return lsFieldPlacementCss; }
+}, [257, "ls-field-placement", {
+        "dataItem": [1040, "data-item"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-field-placement", "ls-icon", "ls-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-field-placement":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LsFieldPlacement);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+export { LsFieldPlacement as L, defineCustomElement as d };
+//# sourceMappingURL=p-D5Lt75HV.js.map
+//# sourceMappingURL=p-D5Lt75HV.js.map

package/dist/components/p-D5Lt75HV.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-D5Lt75HV.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-placement/ls-field-placement.css?tag=ls-field-placement&encapsulation=shadow","src/components/ls-field-placement/ls-field-placement.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n position: relative;\n}\n\n* {\n margin: 0;\n box-sizing: border-box;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.multi-button-group-row {\n display: flex;\n gap: 0.5rem;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; /* 120% */\n}\n\n.input-row {\n display: flex;\n gap: 0.5rem;\n}\n\n.input-row .input-wrapper input {\n width: 9.313rem;\n max-width: 9.313rem;\n}\n\n/* Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 2.25rem;\n}\n\n.input-wrapper {\n position: relative;\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIconDisabled {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-50, #d8d9dc);\n}\n\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus:not(:disabled),\nselect:focus:not(:disabled),\ntextarea:focus:not(:disabled) {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active:not(:disabled),\nselect:active:not(:disabled),\ntextarea:active:not(:disabled) {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n color: var(--gray-50, #d8d9dc);\n box-shadow: none;\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n width: 100%;\n}\n\n.button-group button {\n display: flex;\n width: 100%;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:disabled {\n background: var(--gray-10, #f7f8fa);\n cursor: not-allowed;\n color: var(--gray-50, #d8d9dc);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n tag: 'ls-field-placement',\n styleUrl: 'ls-field-placement.css',\n shadow: true,\n})\nexport class LsFieldPlacement {\n @Element() component: HTMLElement;\n @Prop({ mutable: true }) dataItem: LSApiElement | LSApiElement[];\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n\n isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n return (dt as LSApiElement[]).length === undefined;\n }\n\n isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n return typeof (dt as LSApiElement[]).length === 'number';\n }\n\n getValue(key) {\n if (this.isMultiple(this.dataItem)) {\n return \"\";\n } else if (this.isSingle(this.dataItem)) {\n return this.dataItem[key]\n }\n return ''\n }\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n if (this.isMultiple(this.dataItem)) {\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n } else {\n const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } as LSApiElement } as LSMutateEvent;\n this.dataItem = singleDiff.data as LSApiElement;\n this.mutate.emit([singleDiff]);\n this.update.emit([singleDiff]);\n }\n }\n\n center() {\n return this.dataItem[0].pageDimensions[this.dataItem[0].page].width / 2 - this.dataItem[0].width / 2;\n }\n\n right() {\n return this.dataItem[0].pageDimensions[this.dataItem[0].page].width - this.dataItem[0].width;\n }\n\n middle() {\n return this.dataItem[0].pageDimensions[this.dataItem[0].page].height / 2 - this.dataItem[0].height / 2;\n }\n\n bottom() {\n return this.dataItem[0].pageDimensions[this.dataItem[0].page].height - this.dataItem[0].height;\n }\n\n componentDidLoad() {\n attachAllTooltips(this.component.shadowRoot);\n }\n\n render() {\n return (\n <Host>\n {this.isMultiple(this.dataItem) && (\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Location</p>\n <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n <input type=\"number\" class={'has-leading-icon'} aria=\"top-location\" id=\"top-location\" onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })} />\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"left-location\"\n id=\"left-location\"\n onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })}\n />\n </div>\n </div>\n </div>\n )}\n {this.isSingle(this.dataItem) && (\n <div class={'field-set'}>\n {/* @Alex I couldn't get this to work?? Only Top and Left */}\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Alignment</p>\n <p class={'ls-field-properties-section-description'}>Align your Fields relative to the page or multi-select and align then to each other.</p>\n </div>\n <div class={'multi-button-group-row'}>\n <div class={'button-group'}>\n <button onClick={() => { this.alter({ left: 0 }) }} data-tooltip=\"Align Left\">\n <ls-icon name=\"field-alignment-left\"></ls-icon>\n </button>\n <button onClick={() => { this.alter({ left: this.center() }) }} data-tooltip=\"Align Center\">\n <ls-icon name=\"field-alignment-centre\"></ls-icon>\n </button>\n <button onClick={() => { this.alter({ left: this.right() }) }} data-tooltip=\"Align Right\">\n <ls-icon name=\"field-alignment-right\"></ls-icon>\n </button>\n </div>\n <div class={'button-group'}>\n <button onClick={() => this.alter({ top: 0 })} data-tooltip=\"Align Top\">\n <ls-icon name=\"field-alignment-top\"></ls-icon>\n </button>\n <button onClick={() => { this.alter({ top: this.middle() }) }} data-tooltip=\"Align Middle\">\n <ls-icon name=\"field-alignment-middle\"></ls-icon>\n </button>\n <button onClick={() => { this.alter({ top: this.bottom() }) }} data-tooltip=\"Align Bottom\">\n <ls-icon name=\"field-alignment-bottom\"></ls-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Location</p>\n <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"top-location\"\n id=\"top-location\"\n value={this.dataItem?.left}\n onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })}\n />\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"left-location\"\n id=\"left-location\"\n value={this.dataItem?.top}\n onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })}\n width=\"30\"\n />\n </div>\n </div>\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Distribution</p>\n <p class={'ls-field-properties-section-description'}>Multi-select fields and evenly space them out</p>\n </div>\n <div class={'button-group'}>\n <button disabled data-tooltip=\"Select multiple Fields to to access distribution controls\">\n <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n </button>\n <button disabled data-tooltip=\"Select multiple Fields to to access distribution controls\">\n <ls-icon name=\"field-distribute-horizontally\"></ls-icon>\n </button>\n </div>\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Gap</p>\n <p class={'ls-field-properties-section-description'}>Define the exact gap between multi-select fields.</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'} data-tooltip=\"Select multiple Fields to to access gap controls\">\n <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-vertically\"></ls-icon>\n <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"vertical-gap\" id=\"vertical-gap\" disabled />\n </div>\n <div class={'input-wrapper'} data-tooltip=\"Select multiple Fields to to access gap controls\">\n <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-horizontally\"></ls-icon>\n <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"horizontal-gap\" id=\"horizontal-gap\" disabled />\n </div>\n </div>\n </div>\n </div>\n )}\n <ls-tooltip id=\"ls-tooltip-master\" />\n </Host>\n );\n }\n}\n"],"version":3}