npm - legalesign-document-viewer - Versions diffs - 0.1.2 → 0.1.3 - Mend

legalesign-document-viewer 0.1.2 → 0.1.3

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 (189) hide show

package/dist/components/{p-pHw5Xziq.js → p-DS45bzgL.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
-import { d as defineCustomElement$1 } from './p-DtHDNV_x.js';
+import { d as defineCustomElement$1 } from './p-BoA6mH9f.js';
 const lsFieldAlignmentCss = ":host{display:inline-block;vertical-align:middle}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}button:hover{background-color:rgb(219, 219, 219)}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#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{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}.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)}";
@@ -149,6 +149,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { LsFieldAlignment as L, defineCustomElement as d };
-//# sourceMappingURL=p-pHw5Xziq.js.map
+//# sourceMappingURL=p-DS45bzgL.js.map
-//# sourceMappingURL=p-pHw5Xziq.js.map
+//# sourceMappingURL=p-DS45bzgL.js.map

package/dist/components/{p-pHw5Xziq.js.map → p-DS45bzgL.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-pHw5Xziq.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-alignment/ls-field-alignment.css?tag=ls-field-alignment&encapsulation=shadow","src/components/ls-field-alignment/ls-field-alignment.tsx"],"sourcesContent":[":host {\n display: inline-block;\n vertical-align: middle;\n}\nbutton {\n display: inline-flex;\n background-color: transparent;\n min-width: 24px;\n min-height: 24px;\n border-radius: 0.5rem;\n margin: 0.25rem;\n width: 27px; \n height: 27px;\n justify-content: center;\n vertical-align: middle;\n border: 0;\n}\nbutton:hover {\n background-color: rgb(219, 219, 219);\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: fit-content;\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 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}\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\n","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}
1	+ {"file":"p-DS45bzgL.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-alignment/ls-field-alignment.css?tag=ls-field-alignment&encapsulation=shadow","src/components/ls-field-alignment/ls-field-alignment.tsx"],"sourcesContent":[":host {\n display: inline-block;\n vertical-align: middle;\n}\nbutton {\n display: inline-flex;\n background-color: transparent;\n min-width: 24px;\n min-height: 24px;\n border-radius: 0.5rem;\n margin: 0.25rem;\n width: 27px; \n height: 27px;\n justify-content: center;\n vertical-align: middle;\n border: 0;\n}\nbutton:hover {\n background-color: rgb(219, 219, 219);\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: fit-content;\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 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}\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\n","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}

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

@@ -0,0 +1,77 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
+import { v as validationTypes } from './p-YpxkkST1.js';
+import { d as defaultRolePalette } from './p-C00GqV9f.js';
+import { d as defineCustomElement$4 } from './p-D8LhlUeT.js';
+import { d as defineCustomElement$3 } from './p-CTKLmmO3.js';
+import { d as defineCustomElement$2 } from './p-BoA6mH9f.js';
+import { d as defineCustomElement$1 } from './p-cFB-6W0U.js';
+const lsFieldPropertiesEmailCss = ":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;}.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:36px;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 LsFieldPropertiesEmail = /*@__PURE__*/ proxyCustomElement(class LsFieldPropertiesEmail extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    dataItem;
+    fieldSet = 'content';
+    signerColor = (index) => {
+        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+    };
+    render() {
+        return (h(Host, { key: '366b730ea9a1096ab6098ae9b2bb98ca9e11d29a' }, h("div", { key: '8e6839f5c298a391fcae2e79ce03478ad469d64f', class: 'tabs-container' }, h("button", { key: '88756cc3cae04027c89fce3760223308bf55ebcf', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '41d1e59547bb3d5f7bba58a067d87f4672387a2a', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: 'e958ed78f39d46ea879a51d21fb902006904470b', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: '53164cca19d076f7d49d263b53abd11bbea7e982', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (h("div", { class: 'field-set' }, h("ls-field-dimensions", { dataItem: this.dataItem }))) : (h("div", { class: 'field-set' }, h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), h("div", { class: 'ls-field-type-wrapper', style: {
+                border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
+                background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
+            } }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
+                border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
+                color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
+                background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
+            } }, h("ls-icon", { name: "at-symbol", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Email")))), h("div", { class: 'ls-field-properties-section row' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), h("ls-toggle", null)), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" })), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Content Format"), h("p", { class: 'ls-field-properties-section-description' }, "Select the specific format you want the Recipient to enter..")), h("div", { class: 'input-wrapper' }, h("ls-icon", { id: "selectorIcon", name: "selector" }), h("select", null, validationTypes
+            .filter(type => type.formType === 'email')
+            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: 'b497ae9483f55bbd6111b63a3e3b75c9660d4937', class: 'button-footer' }, h("button", { key: '0c0d68dd36200ea19ce9eaf11075599d0fe50b43', class: 'secondary' }, h("ls-icon", { key: 'c2c54a3b8a744c494e684592f0a6d7d08c2843d8', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: 'd88a0eb280d075c4adad2abdd548897e82fcbae6', class: 'destructive' }, h("ls-icon", { key: '31ddc278180530e8a1b9452249b1b784d77b56ce', name: "trash", size: "20" }), "Delete")), h("slot", { key: '0e166025806021ba078d0d0eec65c1f41ef20789' })));
+    }
+    static get style() { return lsFieldPropertiesEmailCss; }
+}, [257, "ls-field-properties-email", {
+        "dataItem": [16, "data-item"],
+        "fieldSet": [1, "field-set"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-field-properties-email", "ls-field-dimensions", "ls-field-placement", "ls-icon", "ls-toggle"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-field-properties-email":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LsFieldPropertiesEmail);
+            }
+            break;
+        case "ls-field-dimensions":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ls-field-placement":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-toggle":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+export { LsFieldPropertiesEmail as L, defineCustomElement as d };
+//# sourceMappingURL=p-DT0wHPjN.js.map
+//# sourceMappingURL=p-DT0wHPjN.js.map

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

@@ -0,0 +1 @@

+ {"file":"p-DT0wHPjN.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-email/ls-field-properties-email.css?tag=ls-field-properties-email&encapsulation=shadow","src/components/ls-field-properties-email/ls-field-properties-email.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}\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: 36px;\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 } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { validationTypes } from '../ls-document-viewer/editorUtils';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-field-properties-email',\n styleUrl: 'ls-field-properties-email.css',\n shadow: true,\n})\nexport class LsFieldPropertiesEmail {\n @Prop() dataItem: LSApiElement;\n @Prop() fieldSet: 'content' | 'placement' | 'dimensions' = 'content';\n\n signerColor = (index: number) => {\n return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n };\n\n render() {\n return (\n <Host>\n <div class={'tabs-container'}>\n <button class={this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'content')}>\n Content\n </button>\n <button class={this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'placement')}>\n Placement\n </button>\n <button class={this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'dimensions')}>\n Dimensions\n </button>\n </div>\n <div class={'scrolling-container'}>\n {this.fieldSet === 'placement' ? (\n <ls-field-placement dataItem={this.dataItem} />\n ) : this.fieldSet === 'dimensions' ? (\n <div class={'field-set'}>\n <ls-field-dimensions dataItem={this.dataItem} />\n </div>\n ) : (\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'}>Field Type</p>\n <p class={'ls-field-properties-section-description'}>The Field you currently have selected</p>\n </div>\n <div\n class={'ls-field-type-wrapper'}\n style={{\n border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <div class={'ls-field-type-inner'}>\n <div\n class={'ls-field-type-icon'}\n style={{\n border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n }}\n >\n <ls-icon name=\"at-symbol\" size=\"20\" />\n </div>\n <p class={'ls-field-type-name'}>Email</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 />\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.dataItem?.label} width=\"30\" placeholder=\"eg. Sign Here\" />\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'}>Content Format</p>\n <p class={'ls-field-properties-section-description'}>Select the specific format you want the Recipient to enter..</p>\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n <select>\n {validationTypes\n .filter(type => type.formType === 'email')\n .map(type => (\n <option selected={this.dataItem?.validation === type.id} value={type.value}>\n {type.description}\n </option>\n ))}\n </select>\n </div>\n </div>\n </div>\n )}\n </div>\n <div class={'button-footer'}>\n <button class={'secondary'}>\n <ls-icon name=\"field-duplicate\" size=\"20\" />\n Duplicate\n </button>\n <button class={'destructive'}>\n <ls-icon name=\"trash\" size=\"20\" />\n Delete\n </button>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-GHcj9VUq.js → p-DXP-R4_o.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-DjfDnBZ1.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { d as defineCustomElement$1 } from './p-DtHDNV_x.js';
+import { d as defineCustomElement$1 } from './p-BoA6mH9f.js';
 const lsTextareaInputCss = "* {\n  box-sizing: border-box;\n  font-family: \"IBM Plex\", sans-serif;\n  margin: 0;\n}\n\n.host {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-80);\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-60);\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-base {\n  display: flex;\n  resize: vertical;\n  width: 100%;\n  min-height: 4rem;\n  padding: 0.5rem 0.75rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\n.input-base:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\n.default {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--White, #fff);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #d8d9dc);\n  background: var(--White, #fff);\n  color: var(--gray-110);\n}\n\n.disabled {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--gray-10, #f7f8fa);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #ffa19e);\n  background: var(--White, #fff);\n  color: var(--Red-100, #7a1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #ffa19e);\n  background: var(--White, #fff);\n  color: var(--Red-100, #7a1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72f0c2);\n  background: var(--White, #fff);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72f0c2);\n  background: var(--White, #fff);\n  color: var(--Green-100, #125241);\n}\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 36px;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n}\n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--White, #fff);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button:hover {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-20, #edeff2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n";
@@ -35,7 +35,7 @@ const LsTextareaInput = /*@__PURE__*/ proxyCustomElement(class LsTextareaInput e
                     : displayOnly
                         ? 'displayOnly'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (h("host", { key: '371f2b1fe9a694762079ddff3b058a15f11d9710', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'fe998b8e39c3acd32cf69f3e5c8580f36242afda', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("textarea", { key: 'a4a18e12eafa77ee49684b8ebe0c46aeb6baddbd', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), h("div", { key: 'ba0e06f5862510f09e83c3d7c703453dbb7e3a0d', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'b181bca3400830764a78c26b617b80e0876f8b35', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '0723e5fb856398a70fc936dfa1fec8ea0a767dda', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '7fedc63c34c2188432efae00b1ee9d499ca56a8e', id: 'buttonIcon', name: buttonIcon }))))));
+        return (h("host", { key: '33417515941cf937c4734d99c744cac2050c1517', class: 'host' }, fieldIcon && (h("ls-icon", { key: '3d0d5ffe3a48a0bcdd034d7956b32536e645fa43', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("textarea", { key: '7bed853348e26ea3436cd98b3f8fe44ac644a70f', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), h("div", { key: '7ac04c2c6fea8dd58d54573bd242be1dd9603f53', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'd01bd35115a651fe7cbd752dfbdf49625cdcc1a1', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '43dc1db404f654aaa6d38d7cb71b1b0eebae6fb2', class: 'button', onClick: buttonClick }, h("ls-icon", { key: 'facf4fbde3b718a93d7198ed4f77bd293b8df5f5', id: 'buttonIcon', name: buttonIcon }))))));
     }
     static get style() { return lsTextareaInputCss; }
 }, [257, "ls-textarea-input", {
@@ -75,6 +75,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { LsTextareaInput as L, defineCustomElement as d };
-//# sourceMappingURL=p-GHcj9VUq.js.map
+//# sourceMappingURL=p-DXP-R4_o.js.map
-//# sourceMappingURL=p-GHcj9VUq.js.map
+//# sourceMappingURL=p-DXP-R4_o.js.map

package/dist/components/{p-GHcj9VUq.js.map → p-DXP-R4_o.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~GHcj9VUq~~.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,2nIAA2nI;;MCSzoI,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;;;;;;AAClB,IAAA,IAAI;AACJ,IAAA,KAAK;AACL,IAAA,WAAW;AACX,IAAA,IAAI;AACJ,IAAA,QAAQ;AACR,IAAA,QAAQ;AACR,IAAA,WAAW;AACX,IAAA,QAAQ;AACR,IAAA,KAAK;AACL,IAAA,KAAK;AACL,IAAA,QAAQ;AACR,IAAA,WAAW;AACX,IAAA,UAAU;AACV,IAAA,SAAS;IAEjB,MAAM,GAAA;AACJ,QAAA,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAW,EACX,UAAU,EACV,SAAS,GACV,GAAG,IAAI;AAER,QAAA,MAAM,UAAU,GAAG,IAAI,CACrB,YAAY,EACZ;AACE,cAAE;cACA,KAAK,IAAI;AACT,kBAAE;AACF,kBAAE,KAAK,IAAI,CAAC;AACV,sBAAE;AACF,sBAAE;AACA,0BAAE;0BACA,SAAS,EACnB,SAAS,IAAI,YAAY,EACzB,KAAK,IAAI,cAAc,EACvB,UAAU,IAAI,cAAc,EAC5B,UAAU,IAAI,KAAK,IAAI,mBAAmB,CAC3C;QAED,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAA,EACf,SAAS,KACR,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,QAAQ,GAAG,mBAAmB,GAAG,WAAW,EAChD,IAAI,EAAE,SAAS,GACN,CACZ,EACD,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,UAAU,EACjB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,QAAQ,EACnB,WAAW,EAAE,WAAW,EACZ,YAAA,EAAA,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,CAAA,EACF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACrB,KAAK,IAAI,CAAC,QAAQ,KACjB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,KAAK,GAAG,WAAW,GAAG,aAAa,EACvC,IAAI,EAAE,KAAK,GAAG,cAAc,GAAG,oBAAoB,GAC1C,CACZ,EACA,UAAU,KACT,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAA,EACzC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,YAAY,EAAC,IAAI,EAAE,UAAU,EAAA,CAAY,CAC9C,CACV,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-textarea-input/ls-textarea-input.css?tag=ls-textarea-input&encapsulation=shadow","src/components/ls-formfield/inputs/ls-textarea-input/ls-textarea-input.tsx"],"sourcesContent":["* {\n box-sizing: border-box;\n font-family: \"IBM Plex\", sans-serif;\n margin: 0;\n}\n\n.host {\n position: relative;\n display: flex;\n width: 100%;\n}\n\n#fieldIcon {\n position: absolute;\n top: 0.5rem;\n left: 0.75rem;\n color: var(--gray-80);\n}\n\n#fieldIconDisabled {\n position: absolute;\n top: 0.5rem;\n left: 0.75rem;\n color: var(--gray-60);\n}\n\n.icon-input {\n padding-left: 2.5rem !important;\n}\n\n.button-input {\n padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n padding-right: 4rem !important;\n}\n\n.input-base {\n display: flex;\n resize: vertical;\n width: 100%;\n min-height: 4rem;\n padding: 0.5rem 0.75rem;\n align-items: center;\n gap: 0.5rem;\n align-self: stretch;\n border-radius: 0.5rem;\n /* Shadow/sm /\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n text-overflow: ellipsis;\n / text-sm/leading-5/font-regular */\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 400;\n}\n\n.input-base:active:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n box-shadow:\n 0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n 0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n 0px 0px 0px 4px #9dc3fc;\n}\n\n.input-base:focus:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n box-shadow:\n 0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n 0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n 0px 0px 0px 4px #9dc3fc;\n}\n\n.default {\n border: 1px solid var(--gray-40, #d8d9dc);\n background: var(--White, #fff);\n color: var(--gray-100);\n}\n\n.default:hover {\n border: 1px solid var(--gray-50, #d8d9dc);\n background: var(--White, #fff);\n color: var(--gray-110);\n}\n\n.disabled {\n border: 1px solid var(--gray-40, #d8d9dc);\n background: var(--gray-10, #f7f8fa);\n color: var(--gray-60);\n cursor: not-allowed;\n}\n\n.invalid {\n border: 1px solid var(--red-40, #ffa19e);\n background: var(--White, #fff);\n color: var(--Red-100, #7a1714);\n}\n\n.invalid:hover {\n border: 1px solid var(--red-50, #ffa19e);\n background: var(--White, #fff);\n color: var(--Red-100, #7a1714);\n}\n\n.valid {\n border: 1px solid var(--green-40, #72f0c2);\n background: var(--White, #fff);\n color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n border: 1px solid var(--green-50, #72f0c2);\n background: var(--White, #fff);\n color: var(--Green-100, #125241);\n}\n\n.right-items {\n position: absolute;\n padding: 0.25rem;\n height: 36px;\n right: 0;\n top: 0;\n display: flex;\n align-items: center;\n}\n\n#invalidIcon {\n margin: 0 0.5rem;\n color: var(--red-70);\n}\n\n#validIcon {\n margin: 0 0.5rem;\n color: var(--green-60);\n}\n\n.button {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--White, #fff);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-90);\n }\n}\n\n.button:hover {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-20, #edeff2);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:active {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--Primary-Blue-Light, #4456f6);\n background: var(--White, #fff);\n box-shadow:\n 0px 0px 4px 0px #c7ddff inset,\n 0px 0px 0px 4px #9dc3fc;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:focus {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--Primary-Blue-Light, #4456f6);\n background: var(--White, #fff);\n box-shadow:\n 0px 0px 4px 0px #c7ddff inset,\n 0px 0px 0px 4px #9dc3fc;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'ls-textarea-input',\n styleUrl: 'ls-textarea-input.css',\n shadow: true,\n})\nexport class LsTextareaInput {\n @Prop() name: string;\n @Prop() value?: string;\n @Prop() placeholder?: string;\n @Prop() aria?: string;\n @Prop() inputRef?: string;\n @Prop() disabled: boolean;\n @Prop() displayOnly: boolean;\n @Prop() required: boolean;\n @Prop() valid: boolean;\n @Prop() dirty: boolean;\n @Prop() countMax: number;\n @Prop() buttonClick?: any;\n @Prop() buttonIcon?: Icon;\n @Prop() fieldIcon?: Icon;\n\n render() {\n const {\n name,\n value,\n placeholder,\n aria,\n disabled,\n displayOnly,\n required,\n valid,\n dirty,\n countMax,\n buttonClick,\n buttonIcon,\n fieldIcon,\n } = this;\n\n const inputClass = clsx(\n 'input-base',\n disabled\n ? 'disabled'\n : dirty && valid\n ? 'valid'\n : dirty && !valid\n ? 'invalid'\n : displayOnly\n ? 'displayOnly'\n : 'default',\n fieldIcon && 'icon-input',\n dirty && 'button-input',\n buttonIcon && 'button-input',\n buttonIcon && dirty && 'right-items-input',\n );\n\n return (\n <host class='host'>\n {fieldIcon && (\n <ls-icon\n id={disabled ? 'fieldIconDisabled' : 'fieldIcon'}\n name={fieldIcon}\n ></ls-icon>\n )}\n <textarea\n class={inputClass}\n id={name}\n name={name}\n value={value}\n maxlength={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={required}\n disabled={disabled}\n />\n <div class='right-items'>\n {dirty && !disabled && (\n <ls-icon\n id={valid ? 'validIcon' : 'invalidIcon'}\n name={valid ? 'check-circle' : 'exclamation-circle'}\n ></ls-icon>\n )}\n {buttonIcon && (\n <button class='button' onClick={buttonClick}>\n <ls-icon id='buttonIcon' name={buttonIcon}></ls-icon>\n </button>\n )}\n </div>\n </host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-DXP-R4_o.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,2nIAA2nI;;MCSzoI,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;;;;;;AAClB,IAAA,IAAI;AACJ,IAAA,KAAK;AACL,IAAA,WAAW;AACX,IAAA,IAAI;AACJ,IAAA,QAAQ;AACR,IAAA,QAAQ;AACR,IAAA,WAAW;AACX,IAAA,QAAQ;AACR,IAAA,KAAK;AACL,IAAA,KAAK;AACL,IAAA,QAAQ;AACR,IAAA,WAAW;AACX,IAAA,UAAU;AACV,IAAA,SAAS;IAEjB,MAAM,GAAA;AACJ,QAAA,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAW,EACX,UAAU,EACV,SAAS,GACV,GAAG,IAAI;AAER,QAAA,MAAM,UAAU,GAAG,IAAI,CACrB,YAAY,EACZ;AACE,cAAE;cACA,KAAK,IAAI;AACT,kBAAE;AACF,kBAAE,KAAK,IAAI,CAAC;AACV,sBAAE;AACF,sBAAE;AACA,0BAAE;0BACA,SAAS,EACnB,SAAS,IAAI,YAAY,EACzB,KAAK,IAAI,cAAc,EACvB,UAAU,IAAI,cAAc,EAC5B,UAAU,IAAI,KAAK,IAAI,mBAAmB,CAC3C;QAED,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAA,EACf,SAAS,KACR,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,QAAQ,GAAG,mBAAmB,GAAG,WAAW,EAChD,IAAI,EAAE,SAAS,GACN,CACZ,EACD,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,UAAU,EACjB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,QAAQ,EACnB,WAAW,EAAE,WAAW,EACZ,YAAA,EAAA,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,CAAA,EACF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACrB,KAAK,IAAI,CAAC,QAAQ,KACjB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,KAAK,GAAG,WAAW,GAAG,aAAa,EACvC,IAAI,EAAE,KAAK,GAAG,cAAc,GAAG,oBAAoB,GAC1C,CACZ,EACA,UAAU,KACT,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAA,EACzC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,YAAY,EAAC,IAAI,EAAE,UAAU,EAAA,CAAY,CAC9C,CACV,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-textarea-input/ls-textarea-input.css?tag=ls-textarea-input&encapsulation=shadow","src/components/ls-formfield/inputs/ls-textarea-input/ls-textarea-input.tsx"],"sourcesContent":["* {\n box-sizing: border-box;\n font-family: \"IBM Plex\", sans-serif;\n margin: 0;\n}\n\n.host {\n position: relative;\n display: flex;\n width: 100%;\n}\n\n#fieldIcon {\n position: absolute;\n top: 0.5rem;\n left: 0.75rem;\n color: var(--gray-80);\n}\n\n#fieldIconDisabled {\n position: absolute;\n top: 0.5rem;\n left: 0.75rem;\n color: var(--gray-60);\n}\n\n.icon-input {\n padding-left: 2.5rem !important;\n}\n\n.button-input {\n padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n padding-right: 4rem !important;\n}\n\n.input-base {\n display: flex;\n resize: vertical;\n width: 100%;\n min-height: 4rem;\n padding: 0.5rem 0.75rem;\n align-items: center;\n gap: 0.5rem;\n align-self: stretch;\n border-radius: 0.5rem;\n /* Shadow/sm /\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n text-overflow: ellipsis;\n / text-sm/leading-5/font-regular */\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 400;\n}\n\n.input-base:active:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n box-shadow:\n 0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n 0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n 0px 0px 0px 4px #9dc3fc;\n}\n\n.input-base:focus:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n box-shadow:\n 0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n 0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n 0px 0px 0px 4px #9dc3fc;\n}\n\n.default {\n border: 1px solid var(--gray-40, #d8d9dc);\n background: var(--White, #fff);\n color: var(--gray-100);\n}\n\n.default:hover {\n border: 1px solid var(--gray-50, #d8d9dc);\n background: var(--White, #fff);\n color: var(--gray-110);\n}\n\n.disabled {\n border: 1px solid var(--gray-40, #d8d9dc);\n background: var(--gray-10, #f7f8fa);\n color: var(--gray-60);\n cursor: not-allowed;\n}\n\n.invalid {\n border: 1px solid var(--red-40, #ffa19e);\n background: var(--White, #fff);\n color: var(--Red-100, #7a1714);\n}\n\n.invalid:hover {\n border: 1px solid var(--red-50, #ffa19e);\n background: var(--White, #fff);\n color: var(--Red-100, #7a1714);\n}\n\n.valid {\n border: 1px solid var(--green-40, #72f0c2);\n background: var(--White, #fff);\n color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n border: 1px solid var(--green-50, #72f0c2);\n background: var(--White, #fff);\n color: var(--Green-100, #125241);\n}\n\n.right-items {\n position: absolute;\n padding: 0.25rem;\n height: 36px;\n right: 0;\n top: 0;\n display: flex;\n align-items: center;\n}\n\n#invalidIcon {\n margin: 0 0.5rem;\n color: var(--red-70);\n}\n\n#validIcon {\n margin: 0 0.5rem;\n color: var(--green-60);\n}\n\n.button {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--White, #fff);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-90);\n }\n}\n\n.button:hover {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-20, #edeff2);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:active {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--Primary-Blue-Light, #4456f6);\n background: var(--White, #fff);\n box-shadow:\n 0px 0px 4px 0px #c7ddff inset,\n 0px 0px 0px 4px #9dc3fc;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:focus {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--Primary-Blue-Light, #4456f6);\n background: var(--White, #fff);\n box-shadow:\n 0px 0px 4px 0px #c7ddff inset,\n 0px 0px 0px 4px #9dc3fc;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'ls-textarea-input',\n styleUrl: 'ls-textarea-input.css',\n shadow: true,\n})\nexport class LsTextareaInput {\n @Prop() name: string;\n @Prop() value?: string;\n @Prop() placeholder?: string;\n @Prop() aria?: string;\n @Prop() inputRef?: string;\n @Prop() disabled: boolean;\n @Prop() displayOnly: boolean;\n @Prop() required: boolean;\n @Prop() valid: boolean;\n @Prop() dirty: boolean;\n @Prop() countMax: number;\n @Prop() buttonClick?: any;\n @Prop() buttonIcon?: Icon;\n @Prop() fieldIcon?: Icon;\n\n render() {\n const {\n name,\n value,\n placeholder,\n aria,\n disabled,\n displayOnly,\n required,\n valid,\n dirty,\n countMax,\n buttonClick,\n buttonIcon,\n fieldIcon,\n } = this;\n\n const inputClass = clsx(\n 'input-base',\n disabled\n ? 'disabled'\n : dirty && valid\n ? 'valid'\n : dirty && !valid\n ? 'invalid'\n : displayOnly\n ? 'displayOnly'\n : 'default',\n fieldIcon && 'icon-input',\n dirty && 'button-input',\n buttonIcon && 'button-input',\n buttonIcon && dirty && 'right-items-input',\n );\n\n return (\n <host class='host'>\n {fieldIcon && (\n <ls-icon\n id={disabled ? 'fieldIconDisabled' : 'fieldIcon'}\n name={fieldIcon}\n ></ls-icon>\n )}\n <textarea\n class={inputClass}\n id={name}\n name={name}\n value={value}\n maxlength={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={required}\n disabled={disabled}\n />\n <div class='right-items'>\n {dirty && !disabled && (\n <ls-icon\n id={valid ? 'validIcon' : 'invalidIcon'}\n name={valid ? 'check-circle' : 'exclamation-circle'}\n ></ls-icon>\n )}\n {buttonIcon && (\n <button class='button' onClick={buttonClick}>\n <ls-icon id='buttonIcon' name={buttonIcon}></ls-icon>\n </button>\n )}\n </div>\n </host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-D7KC-w81.js → p-DlfoNwRm.js} RENAMED Viewed

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
-import { d as defineCustomElement$8 } from './p-D3GPRslH.js';
-import { d as defineCustomElement$7 } from './p-DtHDNV_x.js';
-import { d as defineCustomElement$6 } from './p-D3p38qOI.js';
-import { d as defineCustomElement$5 } from './p-RoGGAmRf.js';
-import { d as defineCustomElement$4 } from './p-CEGQ-SIb.js';
-import { d as defineCustomElement$3 } from './p-IGbuOsUA.js';
-import { d as defineCustomElement$2 } from './p-GHcj9VUq.js';
-import { d as defineCustomElement$1 } from './p-Cs6tf1FE.js';
+import { d as defineCustomElement$8 } from './p-DBphBrvt.js';
+import { d as defineCustomElement$7 } from './p-BoA6mH9f.js';
+import { d as defineCustomElement$6 } from './p-D4hGTY-V.js';
+import { d as defineCustomElement$5 } from './p-CToSoYU7.js';
+import { d as defineCustomElement$4 } from './p-BDgNCPwS.js';
+import { d as defineCustomElement$3 } from './p-aHGDKnIY.js';
+import { d as defineCustomElement$2 } from './p-DXP-R4_o.js';
+import { d as defineCustomElement$1 } from './p-cFB-6W0U.js';
 const lsDocumentOptionsCss = ":host{display:block}.ls-editor-infobox{padding:2px 8px 2px 8px}.toolbox-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;}.toolbox-section-description{color:var(--gray-80, #5e6066);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem}.template-details{display:flex;flex-direction:column;gap:0.75rem}.template-detail-section{display:flex;padding:0.75rem;align-items:center;gap:0.5rem;border-radius:1rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #fff)}.template-detail-section-title{color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;width:100%}.column{display:flex;flex-direction:column;align-items:flex-start}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#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{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}.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)}";
@@ -92,6 +92,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { LsDocumentOptions as L, defineCustomElement as d };
-//# sourceMappingURL=p-D7KC-w81.js.map
+//# sourceMappingURL=p-DlfoNwRm.js.map
-//# sourceMappingURL=p-D7KC-w81.js.map
+//# sourceMappingURL=p-DlfoNwRm.js.map

package/dist/components/{p-D7KC-w81.js.map → p-DlfoNwRm.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-D7KC-w81.js","mappings":";;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,0kKAA0kK;;MCQ1lK,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;AAC5B;;;AAGG;AACK,IAAA,QAAQ;IAGhB,eAAe,CAAC,WAAW,EAAE,YAAY,EAAA;AACvC,QAAA,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,kBAAkB,CAAC;;IAG9C,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAsB,EAAA,kBAAA,CAAA,EACvD,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,6BAA6B,EAAA,EAAA,0CAAA,CAA6C,CAC/E,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,kBAAkB,EAAA,EAC5B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gCAAgC,EAAA,EAC1C,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAS,EAAA,MAAA,CAAA,EACjD,CAAc,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAC,GAAI,CAC5E,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,yBAAyB,EAAA,EACnC,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAiB,EAAA,cAAA,CAAA,EAEzD,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAuB,CACnB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gCAAgC,EAAA,EAC1C,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAU,EAAA,OAAA,CAAA,EAClD,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,kBAAkB,EAAE,MAAM,EAAA,CAAI,CACzD,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gCAAgC,EAAA,EAC1C,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAiB,EAAA,cAAA,CAAA,OAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,CAC7E,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gCAAgC,EAAA,EAC1C,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAe,EAAA,YAAA,CAAA,OAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,CAC7E,CACF,EACN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-document-options/ls-document-options.css?tag=ls-document-options&encapsulation=shadow","src/components/ls-document-options/ls-document-options.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.ls-editor-infobox {\n padding: 2px 8px 2px 8px;\n}\n\n.toolbox-section-title {\n color: var(--gray-100, #45484d);\n font-size: 1.125rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.75rem; /* 155.556% /\n}\n\n.toolbox-section-description {\n color: var(--gray-80, #5e6066);\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.template-details {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.template-detail-section {\n display: flex;\n padding: 0.75rem;\n align-items: center;\n gap: 0.5rem;\n border-radius: 1rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #fff);\n}\n\n.template-detail-section-title {\n color: var(--gray-80, #6c6e73);\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; / 142.857% /\n width: 100%;\n}\n\n.column {\n display: flex;\n flex-direction: column;\n align-items: flex-start\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: fit-content;\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 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}\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\n","import { Component, Host, h, Prop, Watch } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\n\n@Component({\n tag: 'ls-document-options',\n styleUrl: 'ls-document-options.css',\n shadow: true,\n})\nexport class LsDocumentOptions {\n /\n The base template information (as JSON).\n * {LSApiTemplate}\n /\n @Prop() template: LSApiTemplate;\n\n @Watch('template')\n selectedHandler(newSelected, _oldSelected) {\n console.log(newSelected, 'document manager');\n }\n\n render() {\n return (\n <Host>\n <div class=\"ls-editor-infobox\">\n <h2 class=\"toolbox-section-title\">Template Details</h2>\n <p class=\"toolbox-section-description\">Details and insights about the Template.</p>\n </div>\n <div class={'template-details'}>\n <div class={'template-detail-section column'}>\n <p class=\"template-detail-section-title\">Name</p>\n <ls-formfield as=\"text\" value={this.template?.title} style={{ width: '100%'}} />\n </div>\n <div class={'template-detail-section'}>\n <p class=\"template-detail-section-title\">Auto Archive</p>\n {/ <ls-formfield as=\"radio\" value={'false'} /> */}\n <ls-toggle></ls-toggle>\n </div>\n <div class={'template-detail-section column'}>\n <p class=\"template-detail-section-title\">Pages</p>\n <ls-label text={this.template?.pageDimensionArray?.length} />\n </div>\n <div class={'template-detail-section column'}>\n <p class=\"template-detail-section-title\">Date Created</p> {this.template?.created}\n </div>\n <div class={'template-detail-section column'}>\n <p class=\"template-detail-section-title\">Created By</p> {this.template?.createdBy}\n </div>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-DlfoNwRm.js","mappings":";;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,0kKAA0kK;;MCQ1lK,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;AAC5B;;;AAGG;AACK,IAAA,QAAQ;IAGhB,eAAe,CAAC,WAAW,EAAE,YAAY,EAAA;AACvC,QAAA,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,kBAAkB,CAAC;;IAG9C,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAsB,EAAA,kBAAA,CAAA,EACvD,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,6BAA6B,EAAA,EAAA,0CAAA,CAA6C,CAC/E,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,kBAAkB,EAAA,EAC5B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gCAAgC,EAAA,EAC1C,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAS,EAAA,MAAA,CAAA,EACjD,CAAc,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAC,GAAI,CAC5E,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,yBAAyB,EAAA,EACnC,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAiB,EAAA,cAAA,CAAA,EAEzD,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAuB,CACnB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gCAAgC,EAAA,EAC1C,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAU,EAAA,OAAA,CAAA,EAClD,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,kBAAkB,EAAE,MAAM,EAAA,CAAI,CACzD,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gCAAgC,EAAA,EAC1C,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAiB,EAAA,cAAA,CAAA,OAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,CAC7E,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gCAAgC,EAAA,EAC1C,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAe,EAAA,YAAA,CAAA,OAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,CAC7E,CACF,EACN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-document-options/ls-document-options.css?tag=ls-document-options&encapsulation=shadow","src/components/ls-document-options/ls-document-options.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.ls-editor-infobox {\n padding: 2px 8px 2px 8px;\n}\n\n.toolbox-section-title {\n color: var(--gray-100, #45484d);\n font-size: 1.125rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.75rem; /* 155.556% /\n}\n\n.toolbox-section-description {\n color: var(--gray-80, #5e6066);\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.template-details {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.template-detail-section {\n display: flex;\n padding: 0.75rem;\n align-items: center;\n gap: 0.5rem;\n border-radius: 1rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #fff);\n}\n\n.template-detail-section-title {\n color: var(--gray-80, #6c6e73);\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; / 142.857% /\n width: 100%;\n}\n\n.column {\n display: flex;\n flex-direction: column;\n align-items: flex-start\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: fit-content;\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 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}\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\n","import { Component, Host, h, Prop, Watch } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\n\n@Component({\n tag: 'ls-document-options',\n styleUrl: 'ls-document-options.css',\n shadow: true,\n})\nexport class LsDocumentOptions {\n /\n The base template information (as JSON).\n * {LSApiTemplate}\n /\n @Prop() template: LSApiTemplate;\n\n @Watch('template')\n selectedHandler(newSelected, _oldSelected) {\n console.log(newSelected, 'document manager');\n }\n\n render() {\n return (\n <Host>\n <div class=\"ls-editor-infobox\">\n <h2 class=\"toolbox-section-title\">Template Details</h2>\n <p class=\"toolbox-section-description\">Details and insights about the Template.</p>\n </div>\n <div class={'template-details'}>\n <div class={'template-detail-section column'}>\n <p class=\"template-detail-section-title\">Name</p>\n <ls-formfield as=\"text\" value={this.template?.title} style={{ width: '100%'}} />\n </div>\n <div class={'template-detail-section'}>\n <p class=\"template-detail-section-title\">Auto Archive</p>\n {/ <ls-formfield as=\"radio\" value={'false'} /> */}\n <ls-toggle></ls-toggle>\n </div>\n <div class={'template-detail-section column'}>\n <p class=\"template-detail-section-title\">Pages</p>\n <ls-label text={this.template?.pageDimensionArray?.length} />\n </div>\n <div class={'template-detail-section column'}>\n <p class=\"template-detail-section-title\">Date Created</p> {this.template?.created}\n </div>\n <div class={'template-detail-section column'}>\n <p class=\"template-detail-section-title\">Created By</p> {this.template?.createdBy}\n </div>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-CpK4mw5O.js → p-Eq1IwvY5.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
-import { d as defineCustomElement$1 } from './p-DtHDNV_x.js';
+import { d as defineCustomElement$1 } from './p-BoA6mH9f.js';
 const lsFeatureColumnCss = ":host{display:flex;flex-direction:column;gap:0.5rem}.activeIcon,.defaultIcon{padding:0.75rem;border-radius:0.75rem;color:var(--gray-80, #787A80)}.defaultIcon:hover{background-color:var(--primary-10, #EFF4FF);color:var(--primary-100, #0C1457);cursor:pointer}.activeIcon{background-color:var(--primary-60, #4456F6);color:var(--white, #fff)}";
@@ -55,6 +55,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { LsFeatureColoumn as L, defineCustomElement as d };
-//# sourceMappingURL=p-CpK4mw5O.js.map
+//# sourceMappingURL=p-Eq1IwvY5.js.map
-//# sourceMappingURL=p-CpK4mw5O.js.map
+//# sourceMappingURL=p-Eq1IwvY5.js.map

package/dist/components/{p-CpK4mw5O.js.map → p-Eq1IwvY5.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~CpK4mw5O~~.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,oVAAoV;;MCOlW,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;AAC3B;;;AAGG;IACsB,OAAO,GAA2C,SAAS;;AAG3E,IAAA,MAAM;IAEf,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU,GAAG,YAAY,GAAG,aAAa,EACjE,OAAO,EAAE,MAAK;AACZ,gBAAA,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;AACvB,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;AAC5B,gBAAA,IAAI,CAAC,OAAO,GAAG,UAAU;aAC1B,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG,aAAa,EAChE,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;AAC3B,gBAAA,IAAI,CAAC,OAAO,GAAG,SAAS;aACzB,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACrC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa,GAAG,YAAY,GAAG,aAAa,EACpE,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;AAC/B,gBAAA,IAAI,CAAC,OAAO,GAAG,aAAa;AAC9B,aAAC,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAG,CACnC,EAEN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-feature-column/ls-feature-column.css?tag=ls-feature-column&encapsulation=shadow","src/components/ls-feature-column/ls-feature-column.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n\n}\n\n.activeIcon, .defaultIcon {\n padding: 0.75rem;\n border-radius: 0.75rem;\n color: var(--gray-80, #787A80);\n}\n\n.defaultIcon:hover {\n background-color: var(--primary-10, #EFF4FF);\n color: var(--primary-100, #0C1457);\n cursor: pointer;\n}\n\n.activeIcon {\n background-color: var(--primary-60, #4456F6);\n color: var(--white, #fff);\n}","import { Component, Host, Prop, h, EventEmitter, Event } from '@stencil/core';\n\n@Component({\n tag: 'ls-feature-column',\n styleUrl: 'ls-feature-column.css',\n shadow: true,\n})\nexport class LsFeatureColoumn {\n /*\n Determines / sets which of the far left 'managers' is active.\n * {'document' \| 'toolbox' \| 'participant' }\n */\n @Prop({ mutable: true }) manager: 'document' \| 'toolbox' \| 'participant' = 'toolbox';\n\n // Send an manager change up the DOM\n @Event() manage: EventEmitter<'document' \| 'toolbox' \| 'participant'>;\n\n render() {\n return (\n <Host>\n <div\n class={this.manager === 'document' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n console.log('document');\n this.manage.emit('document');\n this.manager = 'document';\n }}\n >\n <ls-icon name=\"document\" size=\"24\" />\n </div>\n <div\n class={this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n this.manage.emit('toolbox');\n this.manager = 'toolbox';\n }}\n >\n <ls-icon name=\"typing-input\" size=\"24\" />\n </div>\n <div\n class={this.manager === 'participant' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n this.manage.emit('participant');\n this.manager = 'participant';\n }}\n >\n <ls-icon name=\"user-group\" size=\"24\" />\n </div>\n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-Eq1IwvY5.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,oVAAoV;;MCOlW,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;AAC3B;;;AAGG;IACsB,OAAO,GAA2C,SAAS;;AAG3E,IAAA,MAAM;IAEf,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU,GAAG,YAAY,GAAG,aAAa,EACjE,OAAO,EAAE,MAAK;AACZ,gBAAA,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;AACvB,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;AAC5B,gBAAA,IAAI,CAAC,OAAO,GAAG,UAAU;aAC1B,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG,aAAa,EAChE,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;AAC3B,gBAAA,IAAI,CAAC,OAAO,GAAG,SAAS;aACzB,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACrC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa,GAAG,YAAY,GAAG,aAAa,EACpE,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;AAC/B,gBAAA,IAAI,CAAC,OAAO,GAAG,aAAa;AAC9B,aAAC,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAG,CACnC,EAEN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-feature-column/ls-feature-column.css?tag=ls-feature-column&encapsulation=shadow","src/components/ls-feature-column/ls-feature-column.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n\n}\n\n.activeIcon, .defaultIcon {\n padding: 0.75rem;\n border-radius: 0.75rem;\n color: var(--gray-80, #787A80);\n}\n\n.defaultIcon:hover {\n background-color: var(--primary-10, #EFF4FF);\n color: var(--primary-100, #0C1457);\n cursor: pointer;\n}\n\n.activeIcon {\n background-color: var(--primary-60, #4456F6);\n color: var(--white, #fff);\n}","import { Component, Host, Prop, h, EventEmitter, Event } from '@stencil/core';\n\n@Component({\n tag: 'ls-feature-column',\n styleUrl: 'ls-feature-column.css',\n shadow: true,\n})\nexport class LsFeatureColoumn {\n /*\n Determines / sets which of the far left 'managers' is active.\n * {'document' \| 'toolbox' \| 'participant' }\n */\n @Prop({ mutable: true }) manager: 'document' \| 'toolbox' \| 'participant' = 'toolbox';\n\n // Send an manager change up the DOM\n @Event() manage: EventEmitter<'document' \| 'toolbox' \| 'participant'>;\n\n render() {\n return (\n <Host>\n <div\n class={this.manager === 'document' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n console.log('document');\n this.manage.emit('document');\n this.manager = 'document';\n }}\n >\n <ls-icon name=\"document\" size=\"24\" />\n </div>\n <div\n class={this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n this.manage.emit('toolbox');\n this.manager = 'toolbox';\n }}\n >\n <ls-icon name=\"typing-input\" size=\"24\" />\n </div>\n <div\n class={this.manager === 'participant' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n this.manage.emit('participant');\n this.manager = 'participant';\n }}\n >\n <ls-icon name=\"user-group\" size=\"24\" />\n </div>\n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-D1o9mMCC.js → p-PVKJexBt.js} RENAMED Viewed

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
-import { d as defineCustomElement$6 } from './p-pHw5Xziq.js';
-import { d as defineCustomElement$5 } from './p-CgRZ91kw.js';
-import { d as defineCustomElement$4 } from './p-BlTHDG0s.js';
-import { d as defineCustomElement$3 } from './p-BI9SKPKN.js';
-import { d as defineCustomElement$2 } from './p-DtHDNV_x.js';
-import { d as defineCustomElement$1 } from './p-CF583nkL.js';
+import { d as defineCustomElement$6 } from './p-DS45bzgL.js';
+import { d as defineCustomElement$5 } from './p-BuHDdmKo.js';
+import { d as defineCustomElement$4 } from './p-BIp2Inn2.js';
+import { d as defineCustomElement$3 } from './p-DKmDGdr_.js';
+import { d as defineCustomElement$2 } from './p-BoA6mH9f.js';
+import { d as defineCustomElement$1 } from './p-BBfc4kkx.js';
 const lsToolbarCss = ":host{position:relative;display:flex;width:100%;align-items:center;justify-content:center}.rowbox{position:absolute;top:1rem;display:flex;padding:0.5rem;justify-content:center;align-items:center;gap:0.5rem;width:fit-content;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:var(--white, #fff);margin-bottom:1rem;z-index:200}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#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{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}.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)}";
@@ -46,7 +46,7 @@ const LsToolbar = /*@__PURE__*/ proxyCustomElement(class LsToolbar extends H {
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: '20d1b50b89d3237b3b49e751d75bd1bd7f54b5f4' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }), h("ls-field-alignment", { dataItem: this.dataItem }), h("ls-field-distribute", { dataItem: this.dataItem }), h("ls-field-size", { dataItem: this.dataItem }))) : (h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (h("ls-field-format", { dataItem: this?.dataItem })) : (h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), h("slot", { key: '347f742c35f16a5d79a29f7b4e867e198f9bb48b' })));
+        return (h(Host, { key: '8692ee74e68449714b38624068b752b6161d5797' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }), h("ls-field-alignment", { dataItem: this.dataItem }), h("ls-field-distribute", { dataItem: this.dataItem }), h("ls-field-size", { dataItem: this.dataItem }))) : (h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (h("ls-field-format", { dataItem: this?.dataItem })) : (h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), h("slot", { key: '7790e788903c493268ab783df10ebce9662afc84' })));
     }
     static get style() { return lsToolbarCss; }
 }, [257, "ls-toolbar", {
@@ -100,6 +100,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { LsToolbar as L, defineCustomElement as d };
-//# sourceMappingURL=p-D1o9mMCC.js.map
+//# sourceMappingURL=p-PVKJexBt.js.map
-//# sourceMappingURL=p-D1o9mMCC.js.map
+//# sourceMappingURL=p-PVKJexBt.js.map