legalesign-document-viewer 0.1.7 → 0.2.1

package/dist/components/{p-BMRIiOsQ.js → p-BCpsA9BY.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
 import { d as debounce } from './p-DqJ_uIFZ.js';
-import { d as defineCustomElement$1 } from './p-BFSBsh85.js';
+import { d as defineCustomElement$1 } from './p-p3xY_X0j.js';
 
 const lsStatusbarCss = ":host{position:fixed;z-index:1000;right:1rem;bottom:1rem;display:flex;flex-direction:row;background-color:white;border:1px solid var(--gray-30, #e0e2e5);box-shadow:0px 4px 16px rgba(0, 0, 0, 0.1);border-radius:1rem}*{margin:0;padding:0;box-sizing:border-box}.status-bar-section{display:flex;flex-direction:row;align-items:center;gap:0.75rem;padding:0.5rem 0.75rem}:host>:not(:nth-child(2)){border-left:1px solid var(--gray-30, #e0e2e5)}button{border:0}button:hover{color:var(--gray-100, #45484d);border-radius:0.5rem}input[type=\"range\"]{-webkit-appearance:none;width:100%;height:8px;background:var(--gray-20, #EDEFF2);border-radius:5px;outline:none}input[type=\"range\"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:8px;height:8px;background:var(--gray-70, #4a4c51);border-radius:50%;cursor:pointer}input[type=\"range\"]::-moz-range-thumb{width:8px;height:8%;background:var(--gray-70, #4a4c51);border:none;border-radius:50%;cursor:pointer}input[type=\"range\"]::-moz-range-track{background:var(--gray-20, #EDEFF2);height:8px;border-radius:5px}input[type=\"range\"]::-webkit-slider-runnable-track{background:var(--gray-20, #EDEFF2);height:8px;border-radius:5px}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}button{all:unset;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-80, #6c6e73);text-transform:capitalize}button.tertiaryGrey:hover{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)}";
 
@@ -45,11 +45,11 @@ const LsStatusbar = /*@__PURE__*/ proxyCustomElement(class LsStatusbar extends H
     }
     render() {
         console.log('editor', this.editor);
-        return (h(Host, { key: '8e9e1e244b4fc8ea111d2f8ae389b226caf204d9' }, h("div", { key: 'cb05827b0b9c57cc038ccb854669a7fa687a8559', class: "status-bar-section" }, h("button", { key: '9626704051c452f0b2aa4160fc0940a269aa0b97', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: '848e4d939f839f5d12ed193e802ee936030929da', name: "zoom-out" })), h("div", { key: 'd95981efcabe65e1101659904df22555245eb31a' }, h("input", { key: '880ca323ccef733bf8557412a7d45a732aa5cb12', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: '49754f8b4b8b55a948e1d18ca1eabfc7178f001d', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: '582907c3c513ae45237334fc988ca551a1df24f0', name: "zoom-in" }))), h("div", { key: '5e8ba9b4958d4ba01fea0a5eb6cccdbc645b9385', class: "status-bar-section" }, h("button", { key: '68e06dd284961cf8dec02e16c302dc1fc6a22796', onClick: () => this.fitWidth() }, h("ls-icon", { key: '84a8b7bd659d3d80fc52201f44725bb5670b4905', name: "fit-width" })), h("button", { key: '49f1dd909454a0adbd6e8cb950ba5b1c93e6a99c', onClick: () => this.fitHeight() }, h("ls-icon", { key: 'b41c9c936499852e7eaf45417b2f2f492800731e', name: "fit-height" }))), h("div", { key: 'cb133d10f67ea7eec2fadcd202879fb429026a1c', class: "status-bar-section" }, h("button", { key: 'c65d52ad4801488b5a734047dd6866c467b8b3b4', onClick: () => {
+        return (h(Host, { key: 'fc7781c2c5a924b0a7ab90959492f761786518a4' }, h("div", { key: '4a2a72594cc7cb4a9ef4be91e34a0646c9d63d75', class: "status-bar-section" }, h("button", { key: '744bb3198b39dd76d0a9efa5b74e5514cd94cc9a', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: '0b854dea52202f0b102b9e4459a11ec8f1f3f44e', name: "zoom-out" })), h("div", { key: '2a3b8dc7ab9ceedf64f224e08479903aa61c1d2e' }, h("input", { key: 'cf20f6bea7a1a2821e4fb8cda2001ba9805f07e1', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: 'f961d1171cf4a3184b466478d98db577ea3c7d97', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: '3c899a42721039209a2816ee486f40ca699a2660', name: "zoom-in" }))), h("div", { key: 'f4400312361c6508caab82290c388ef50087d0b7', class: "status-bar-section" }, h("button", { key: '0b5ff66419088d9efc53a56da417228835a0d6c3', onClick: () => this.fitWidth() }, h("ls-icon", { key: '2c51acad35dadc37c926b6d93ccf9864c8603197', name: "fit-width" })), h("button", { key: '199a4d7a1ee262335898f4a0b9f743f5dbb58a6c', onClick: () => this.fitHeight() }, h("ls-icon", { key: 'ebf72e264d3978a77f6aa42af33172c201bd0ed3', name: "fit-height" }))), h("div", { key: '232fe73b3c843ddfc5337967afa5263d26b039ac', class: "status-bar-section" }, h("button", { key: '8462ed44d60662584133af1c2e9b4f169524e3ee', onClick: () => {
                 this.editor.pagePrev();
-            } }, h("ls-icon", { key: '47661f31d5e771a3e5fa5b33679afe6c4e2c851b', name: "chevron-left" })), h("p", { key: 'b707b96884c61814dc82e331c0bb4d132b093fd3' }, "1 / 2"), h("button", { key: '23c87501b81c71dc9c1ac7f2e861467138a4d71c', onClick: () => {
+            } }, h("ls-icon", { key: 'ed62c9d938f759fbc13f236b2605dde42abe71ff', name: "chevron-left" })), h("p", { key: 'e2d701a6f41428a61d3bc9f40ca6eca95a8c9f03' }, "1 / 2"), h("button", { key: '63f5df0c0fffbb448b7882a59b18c0964849b8f1', onClick: () => {
                 this.editor.pageNext();
-            } }, h("ls-icon", { key: '6f6f802e9237a16f1ac83b094b79918e89f47cd0', name: "chevron-right" }))), h("slot", { key: '555034a1229da45a3ce6e00a814ceedd6e72f4b6' })));
+            } }, h("ls-icon", { key: 'ec596ac9fe71b1f79a48b4622cff8c35cf7004c0', name: "chevron-right" }))), h("slot", { key: '38af107db608c1595eb4a2ce8879e5b8593b2f2a' })));
     }
     static get style() { return lsStatusbarCss; }
 }, [257, "ls-statusbar", {
@@ -77,6 +77,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsStatusbar as L, defineCustomElement as d };
-//# sourceMappingURL=p-BMRIiOsQ.js.map
+//# sourceMappingURL=p-BCpsA9BY.js.map
 
-//# sourceMappingURL=p-BMRIiOsQ.js.map
+//# sourceMappingURL=p-BCpsA9BY.js.map

package/dist/components/{p-BMRIiOsQ.js.map → p-BCpsA9BY.js.map}

@@ -1 +1 @@
-{"file":"p-BMRIiOsQ.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,4uFAA4uF;;MCStvF,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;AAEtB;;;AAGG;AACsB,IAAA,IAAI;AAE7B;;;AAGG;AACK,IAAA,MAAM;AAEd,IAAA,OAAO,CAAC,KAAa,EAAA;AACnB,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;AAC1B,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;IAGnB,eAAe,GAAA;AACb,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,WAAW,CAAqB;AAC3F,QAAA,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC;AAC5B,QAAA,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,CAAC;;IAG9D,QAAQ,GAAA;AACN,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,mBAAmB,CAAC;AAClF,QAAA,MAAM,KAAK,GAAW,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK;AAC7E,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;;IAG7C,SAAS,GAAA;AACP,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,mBAAmB,CAAC;AAClF,QAAA,MAAM,KAAK,GAAW,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,MAAM;AAC/E,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;;IAG7C,gBAAgB,GAAA;QACd,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI;;IAK9B,MAAM,GAAA;QACJ,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAC,IAAI,CAAC,MAAM,CAAC;AACjC,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAGH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,oBAAoB,EAAA,EAEhC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,GAAG,CAAC,EAAA,EACzD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,UAAU,EAAA,CAAG,CACpB,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,IAAI,EAAC,OAAO,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,WAAW,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,GAAI,CACjI,EACN,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,GAAG,CAAC,EAAA,EACzD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACH,EACL,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,oBAAoB,EAAA,EACjC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,WAAW,EAAA,CAAG,CACrB,EACT,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,EACrC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAA,CAAG,CACtB,CACH,EACL,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,oBAAoB,EAAA,EACjC,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;AACxB,aAAC,EAAA,EAED,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,cAAc,EAAA,CAAG,CACxB,EACT,CAAY,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,OAAA,CAAA,EACZ,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;AACxB,aAAC,EAAA,EAED,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,eAAe,EAAA,CAAG,CACzB,CACH,EAEN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-statusbar/ls-statusbar.css?tag=ls-statusbar&encapsulation=shadow","src/components/ls-statusbar/ls-statusbar.tsx"],"sourcesContent":[":host {\n  position: fixed;\n  z-index: 1000;\n  right: 1rem;\n  bottom: 1rem;\n  display: flex;\n  flex-direction: row;\n  background-color: white;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);\n  border-radius: 1rem;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n.status-bar-section {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.5rem 0.75rem;\n}\n\n:host > :not(:nth-child(2)) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n\nbutton {\n  border: 0;\n}\n\nbutton:hover {\n  color: var(--gray-100, #45484d);\n  border-radius: 0.5rem;\n}\n\ninput[type=\"range\"] {\n  -webkit-appearance: none; /* Remove default styling */\n  width: 100%;\n  height: 8px;\n  background: var(--gray-20, #EDEFF2);\n  border-radius: 5px;\n  outline: none;\n}\n\n/* Chrome, Safari, Edge */\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 8px;\n  height: 8px;\n  background: var(--gray-70, #4a4c51); /* Custom thumb color */\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n/* Firefox */\ninput[type=\"range\"]::-moz-range-thumb {\n  width: 8px;\n  height: 8%;\n  background: var(--gray-70, #4a4c51); /* Custom thumb color */\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n/* Track color for Firefox */\ninput[type=\"range\"]::-moz-range-track {\n  background: var(--gray-20, #EDEFF2);\n  height: 8px;\n  border-radius: 5px;\n}\n\n/* Track color for Chrome, Safari, Edge */\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  background: var(--gray-20, #EDEFF2);\n  height: 8px;\n  border-radius: 5px;\n}\n\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\nbutton {\n  all: unset;\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--gray-80, #6c6e73);\n  text-transform: capitalize;\n}\n\nbutton.tertiaryGrey:hover {\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, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { debounce } from '../ls-document-viewer/editorUtils';\n\n@Component({\n  tag: 'ls-statusbar',\n  styleUrl: 'ls-statusbar.css',\n  shadow: true,\n})\nexport class LsStatusbar {\n  @Element() component: HTMLElement;\n  /**\n   * The zoom or scale level 100 === 100%.\n   * {number}\n   */\n  @Prop({ mutable: true }) zoom: number;\n\n  /**\n   * The parent editor control.\n   * {LsDocumentViewer}\n   */\n  @Prop() editor: LsDocumentViewer;\n\n  setZoom(value: number) {\n    this.editor.setZoom(value);\n    this.zoom = value;\n  }\n\n  handleZoomInput() {\n    const zoomInput = this.component.shadowRoot.getElementById('zoomRange') as HTMLInputElement;\n    console.log(zoomInput.value);\n    debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700);\n  }\n\n  fitWidth() {\n    const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');\n    const scale: number = frame.clientWidth / this.editor.pageDimensions[0].width;\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  fitHeight() {\n    const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');\n    const scale: number = frame.clientHeight / this.editor.pageDimensions[0].height;\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  componentDidLoad() {\n    this.zoom = this.editor.zoom;\n  }\n\n  \n\n  render() {\n    console.log('editor',this.editor);\n    return (\n      <Host>\n        {/* <button onClick={() => this.editor.displayTable = true}><ls-icon name=\"table\" /></button>\n        <button onClick={() => this.editor.displayTable = false}><ls-icon name=\"template\" /></button> */}\n        <div class={\"status-bar-section\"}>\n\n        <button onClick={() => this.setZoom(this.editor.zoom * 0.8)}>\n          <ls-icon name=\"zoom-out\" />\n        </button>\n        <div>\n          <input type=\"range\" min=\"1\" max=\"300\" value={this.zoom * 100} class=\"slider\" id=\"zoomRange\" onInput={() => this.handleZoomInput()} />\n        </div>\n        <button onClick={() => this.setZoom(this.editor.zoom / 0.8)}>\n          <ls-icon name=\"zoom-in\" />\n        </button>\n        </div>\n         <div class={\"status-bar-section\"}>\n        <button onClick={() => this.fitWidth()}>\n          <ls-icon name=\"fit-width\" />\n        </button>\n        <button onClick={() => this.fitHeight()}>\n          <ls-icon name=\"fit-height\" />\n        </button>\n        </div>\n         <div class={\"status-bar-section\"}>\n        <button\n          onClick={() => {\n            this.editor.pagePrev();\n          }}\n        >\n          <ls-icon name=\"chevron-left\" />\n        </button>\n        <p>1 / 2</p>\n        <button\n          onClick={() => {\n            this.editor.pageNext();\n          }}\n        >\n          <ls-icon name=\"chevron-right\" />\n        </button>\n        </div>\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BCpsA9BY.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-statusbar/ls-statusbar.css?tag=ls-statusbar&encapsulation=shadow","src/components/ls-statusbar/ls-statusbar.tsx"],"sourcesContent":[":host {\n  position: fixed;\n  z-index: 1000;\n  right: 1rem;\n  bottom: 1rem;\n  display: flex;\n  flex-direction: row;\n  background-color: white;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);\n  border-radius: 1rem;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n.status-bar-section {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.5rem 0.75rem;\n}\n\n:host > :not(:nth-child(2)) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n\nbutton {\n  border: 0;\n}\n\nbutton:hover {\n  color: var(--gray-100, #45484d);\n  border-radius: 0.5rem;\n}\n\ninput[type=\"range\"] {\n  -webkit-appearance: none; /* Remove default styling */\n  width: 100%;\n  height: 8px;\n  background: var(--gray-20, #EDEFF2);\n  border-radius: 5px;\n  outline: none;\n}\n\n/* Chrome, Safari, Edge */\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 8px;\n  height: 8px;\n  background: var(--gray-70, #4a4c51); /* Custom thumb color */\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n/* Firefox */\ninput[type=\"range\"]::-moz-range-thumb {\n  width: 8px;\n  height: 8%;\n  background: var(--gray-70, #4a4c51); /* Custom thumb color */\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n/* Track color for Firefox */\ninput[type=\"range\"]::-moz-range-track {\n  background: var(--gray-20, #EDEFF2);\n  height: 8px;\n  border-radius: 5px;\n}\n\n/* Track color for Chrome, Safari, Edge */\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  background: var(--gray-20, #EDEFF2);\n  height: 8px;\n  border-radius: 5px;\n}\n\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\nbutton {\n  all: unset;\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--gray-80, #6c6e73);\n  text-transform: capitalize;\n}\n\nbutton.tertiaryGrey:hover {\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, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { debounce } from '../ls-document-viewer/editorUtils';\n\n@Component({\n  tag: 'ls-statusbar',\n  styleUrl: 'ls-statusbar.css',\n  shadow: true,\n})\nexport class LsStatusbar {\n  @Element() component: HTMLElement;\n  /**\n   * The zoom or scale level 100 === 100%.\n   * {number}\n   */\n  @Prop({ mutable: true }) zoom: number;\n\n  /**\n   * The parent editor control.\n   * {LsDocumentViewer}\n   */\n  @Prop() editor: LsDocumentViewer;\n\n  setZoom(value: number) {\n    this.editor.setZoom(value);\n    this.zoom = value;\n  }\n\n  handleZoomInput() {\n    const zoomInput = this.component.shadowRoot.getElementById('zoomRange') as HTMLInputElement;\n    console.log(zoomInput.value);\n    debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700);\n  }\n\n  fitWidth() {\n    const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');\n    const scale: number = frame.clientWidth / this.editor.pageDimensions[0].width;\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  fitHeight() {\n    const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');\n    const scale: number = frame.clientHeight / this.editor.pageDimensions[0].height;\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  componentDidLoad() {\n    this.zoom = this.editor.zoom;\n  }\n\n  \n\n  render() {\n    console.log('editor',this.editor);\n    return (\n      <Host>\n        {/* <button onClick={() => this.editor.displayTable = true}><ls-icon name=\"table\" /></button>\n        <button onClick={() => this.editor.displayTable = false}><ls-icon name=\"template\" /></button> */}\n        <div class={\"status-bar-section\"}>\n\n        <button onClick={() => this.setZoom(this.editor.zoom * 0.8)}>\n          <ls-icon name=\"zoom-out\" />\n        </button>\n        <div>\n          <input type=\"range\" min=\"1\" max=\"300\" value={this.zoom * 100} class=\"slider\" id=\"zoomRange\" onInput={() => this.handleZoomInput()} />\n        </div>\n        <button onClick={() => this.setZoom(this.editor.zoom / 0.8)}>\n          <ls-icon name=\"zoom-in\" />\n        </button>\n        </div>\n         <div class={\"status-bar-section\"}>\n        <button onClick={() => this.fitWidth()}>\n          <ls-icon name=\"fit-width\" />\n        </button>\n        <button onClick={() => this.fitHeight()}>\n          <ls-icon name=\"fit-height\" />\n        </button>\n        </div>\n         <div class={\"status-bar-section\"}>\n        <button\n          onClick={() => {\n            this.editor.pagePrev();\n          }}\n        >\n          <ls-icon name=\"chevron-left\" />\n        </button>\n        <p>1 / 2</p>\n        <button\n          onClick={() => {\n            this.editor.pageNext();\n          }}\n        >\n          <ls-icon name=\"chevron-right\" />\n        </button>\n        </div>\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-9Z-GK0Bd.js → p-BPkbTOIU.js}

@@ -9,7 +9,7 @@ const LsToggle = /*@__PURE__*/ proxyCustomElement(class LsToggle extends H {
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '1ce88fcc6e390bb710e27c47b988574afaa9c9f6' }, h("label", { key: '6d76512b1bdd6c116ab62bfaf1b9178d87019b02', class: "switch" }, h("input", { key: 'eadd916c86f9dbe94fe9d22f65f82f6b72ea630a', type: "checkbox" }), h("span", { key: '9237d68fed12e736c01a5889f801a1398883dde4', class: "slider round" })), h("slot", { key: '19eca8c7489cdfb981d4a6093aef3246b9337abd' })));
+        return (h(Host, { key: '2ba79ca25f70615ba9c0c5d1c80d076ffd70b56f' }, h("label", { key: 'fb36b4a32987fd2649fb261a7545d7cb6a77fae1', class: "switch" }, h("input", { key: '7fc8ceaa8520e553c2c5c8647e6aeba9dd818672', type: "checkbox" }), h("span", { key: '0525930788e55b0bcc5052d4228028971f3af7ff', class: "slider round" })), h("slot", { key: 'd95d740346777a2d51a72c115367f30701da45ee' })));
     }
     static get style() { return lsToggleCss; }
 }, [257, "ls-toggle"]);
@@ -29,6 +29,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsToggle as L, defineCustomElement as d };
-//# sourceMappingURL=p-9Z-GK0Bd.js.map
+//# sourceMappingURL=p-BPkbTOIU.js.map
 
-//# sourceMappingURL=p-9Z-GK0Bd.js.map
+//# sourceMappingURL=p-BPkbTOIU.js.map

package/dist/components/{p-9Z-GK0Bd.js.map → p-BPkbTOIU.js.map}

@@ -1 +1 @@
-{"file":"p-9Z-GK0Bd.js","mappings":";;AAAA,MAAM,WAAW,GAAG,k0BAAk0B;;MCOz0B,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;IACnB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACnB,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAI,CAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,cAAc,EAAA,CAAQ,CAC5B,EACR,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-toggle/ls-toggle.css?tag=ls-toggle&encapsulation=shadow","src/components/ls-toggle/ls-toggle.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n/* The switch - the box around the slider */\n.switch {\n  position: relative;\n  display: inline-block;\n  width: 2.75rem;\n  height: 1.5rem;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--gray-20, #EDEFF2);\n  -webkit-transition: .4s;\n  transition: .4s;\n}\n\n.slider:before {\n  position: absolute;\n  content: \"\";\n  height: 1.25rem;\n  width: 1.25rem;\n  left: 0.125rem;\n  bottom: 0.125rem;\n  background-color: white;\n  -webkit-transition: .4s;\n  transition: .4s;\n}\n\ninput:checked + .slider {\n  background-color: var(--primary-60, #4456F6);\n}\n\ninput:focus + .slider {\n  box-shadow: 0 0 1px var(--primary-60, #4456F6);\n  outline: 4px solid var(--primary-20, #E3E6FF);\n}\n\ninput:checked + .slider:before {\n  -webkit-transform: translateX(1.25rem);\n  -ms-transform: translateX(1.25rem);\n  transform: translateX(1.25rem);\n}\n\n/* Rounded sliders */\n.slider.round {\n  border-radius: 34px;\n}\n\n.slider.round:before {\n  border-radius: 50%;\n}\n\n\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-toggle',\n  styleUrl: 'ls-toggle.css',\n  shadow: true,\n})\nexport class LsToggle {\n  render() {\n    return (\n      <Host>\n        <label class=\"switch\">\n          <input type=\"checkbox\"  />\n          <span class=\"slider round\"></span>\n        </label>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BPkbTOIU.js","mappings":";;AAAA,MAAM,WAAW,GAAG,k0BAAk0B;;MCOz0B,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;IACnB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACnB,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAI,CAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,cAAc,EAAA,CAAQ,CAC5B,EACR,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-toggle/ls-toggle.css?tag=ls-toggle&encapsulation=shadow","src/components/ls-toggle/ls-toggle.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n/* The switch - the box around the slider */\n.switch {\n  position: relative;\n  display: inline-block;\n  width: 2.75rem;\n  height: 1.5rem;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--gray-20, #EDEFF2);\n  -webkit-transition: .4s;\n  transition: .4s;\n}\n\n.slider:before {\n  position: absolute;\n  content: \"\";\n  height: 1.25rem;\n  width: 1.25rem;\n  left: 0.125rem;\n  bottom: 0.125rem;\n  background-color: white;\n  -webkit-transition: .4s;\n  transition: .4s;\n}\n\ninput:checked + .slider {\n  background-color: var(--primary-60, #4456F6);\n}\n\ninput:focus + .slider {\n  box-shadow: 0 0 1px var(--primary-60, #4456F6);\n  outline: 4px solid var(--primary-20, #E3E6FF);\n}\n\ninput:checked + .slider:before {\n  -webkit-transform: translateX(1.25rem);\n  -ms-transform: translateX(1.25rem);\n  transform: translateX(1.25rem);\n}\n\n/* Rounded sliders */\n.slider.round {\n  border-radius: 34px;\n}\n\n.slider.round:before {\n  border-radius: 50%;\n}\n\n\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-toggle',\n  styleUrl: 'ls-toggle.css',\n  shadow: true,\n})\nexport class LsToggle {\n  render() {\n    return (\n      <Host>\n        <label class=\"switch\">\n          <input type=\"checkbox\"  />\n          <span class=\"slider round\"></span>\n        </label>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CdEexh_g.js → p-BSN2cMdj.js}

@@ -1,10 +1,11 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
 import { d as defaultRolePalette } from './p-C00GqV9f.js';
-import { d as defineCustomElement$5 } from './p-C9d-OiqW.js';
-import { d as defineCustomElement$4 } from './p-CQr7nmKb.js';
-import { d as defineCustomElement$3 } from './p-Cotorbsf.js';
-import { d as defineCustomElement$2 } from './p-BFSBsh85.js';
-import { d as defineCustomElement$1 } from './p-9Z-GK0Bd.js';
+import { d as defineCustomElement$6 } from './p-iC6XYfS_.js';
+import { d as defineCustomElement$5 } from './p-3LU2FV3W.js';
+import { d as defineCustomElement$4 } from './p-DoywjJAr.js';
+import { d as defineCustomElement$3 } from './p-CfCokEUT.js';
+import { d as defineCustomElement$2 } from './p-p3xY_X0j.js';
+import { d as defineCustomElement$1 } from './p-BPkbTOIU.js';
 
 const lsFieldPropertiesSignatureCss = ":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;border:1px dashed var(--primary-30, #9dc3fc);background:var(--primary-10, #eff4ff);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;border:1px solid var(--blue-60, #5684f0);background:var(--blue-10, #f0f6ff);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--blue-60, #5684f0)}.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)}.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)}";
 
@@ -24,14 +25,14 @@ const LsFieldPropertiesSignature = /*@__PURE__*/ proxyCustomElement(class LsFiel
         return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
     };
     render() {
-        return (h(Host, { key: 'bba78cf458f70fbc544cb60f680da3caaeb75dc2' }, h("div", { key: '0872f0b8f0ef07c26e5057dff8063a7585cbe209', class: 'tabs-container' }, h("button", { key: 'f70b0321dc59359a1b940d9c9c2bfc23c945e0f4', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '835388d8c1a7c9f196254f75cbe4ff19d1a12dbe', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '95cfe797b9abf9f90580a29e607c132295590719', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: 'a0b2c962acefbe939c3c41303f9def72bf10a0ed', 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: {
+        return (h(Host, { key: '1caf5f5db83bc6846138bd817b0aa9fe8a9dfc9c' }, h("div", { key: '98bdac172040bef5252297b01e1885bd8c004111', class: 'tabs-container' }, h("button", { key: '460b7f0ecfd8ff15dc930d06fe93d8efb9cde26f', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: 'a7db8a7b899ffc212058710ec4844426a7a6d313', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '63ce529b2e1fb54b9729e31dd71cb712f137e14a', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: '8c7d8ddc6e4d83cccba7ac50c9e6f4866ddf463d', 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("ls-field-properties-advanced", { 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: "signature", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Signature")))), 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("ls-field-footer", { key: '9a506f882be185fa072f577de42300275e7c6237', dataItem: this.dataItem }), h("slot", { key: '3c992d87c93531c50a6160f82c66b0ae83020ae3' })));
+            } }, h("ls-icon", { name: "signature", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Signature")))), 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("ls-field-footer", { key: '7d96ce5c94ff73a88fa6dad7a9e7791b4387b9b9', dataItem: this.dataItem }), h("slot", { key: 'eadea60c5c0193a14b6eaf1a636cba15a8ad53b9' })));
     }
     static get style() { return lsFieldPropertiesSignatureCss; }
 }, [257, "ls-field-properties-signature", {
@@ -42,7 +43,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ls-field-properties-signature", "ls-field-dimensions", "ls-field-footer", "ls-field-placement", "ls-icon", "ls-toggle"];
+    const components = ["ls-field-properties-signature", "ls-field-dimensions", "ls-field-footer", "ls-field-placement", "ls-field-properties-advanced", "ls-icon", "ls-toggle"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-field-properties-signature":
             if (!customElements.get(tagName)) {
@@ -51,15 +52,20 @@ function defineCustomElement() {
             break;
         case "ls-field-dimensions":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "ls-field-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "ls-field-placement":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ls-field-properties-advanced":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
@@ -79,6 +85,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldPropertiesSignature as L, defineCustomElement as d };
-//# sourceMappingURL=p-CdEexh_g.js.map
+//# sourceMappingURL=p-BSN2cMdj.js.map
 
-//# sourceMappingURL=p-CdEexh_g.js.map
+//# sourceMappingURL=p-BSN2cMdj.js.map

package/dist/components/p-BSN2cMdj.js.map

@@ -0,0 +1 @@
+{"file":"p-BSN2cMdj.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-signature/ls-field-properties-signature.css?tag=ls-field-properties-signature&encapsulation=shadow","src/components/ls-field-properties-signature/ls-field-properties-signature.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  border: 1px dashed var(--primary-30, #9dc3fc);\n  background: var(--primary-10, #eff4ff);\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  border: 1px solid var(--blue-60, #5684f0);\n  background: var(--blue-10, #f0f6ff);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n  color: var(--blue-60, #5684f0);\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\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 { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-field-properties-signature',\n  styleUrl: 'ls-field-properties-signature.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesSignature {\n   /**\n    * The selected items information (as JSON).\n    * {LSApiElement[]}\n    */\n   @Prop({\n     mutable: true,\n   })\n   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  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              <ls-field-properties-advanced 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=\"signature\" size=\"20\" />\n                    </div>\n                    <p class={'ls-field-type-name'}>Signature</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>\n          )}\n        </div>\n\n        <ls-field-footer dataItem={this.dataItem} />\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-Dc4pAKEn.js → p-Bby5tjrS.js}

@@ -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-BFSBsh85.js';
+import { d as defineCustomElement$1 } from './p-p3xY_X0j.js';
 
 const lsSelectInputCss = "* {\n  box-sizing: border-box;\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  width: 100%;\n  height: 2.25rem;\n  padding: 0rem 0.75rem;\n  align-items: center;\n  vertical-align: text-top;\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  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\nselect::-ms-expand {\n  display: none;\n}\n\nselect {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n#select-arrow {\n  color: var(--gray-70);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n#select-arrow-disabled {\n  color: var(--gray-40);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 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: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\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\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\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: 0px 0px 4px 0px #C7DDFF inset, 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: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n\n\n\n\n";
 
@@ -35,7 +35,7 @@ const LsSelectInput = /*@__PURE__*/ proxyCustomElement(class LsSelectInput exten
                     : displayOnly
                         ? 'displayOnly'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (h("host", { key: '6057a8c24ad92b90d7d0306cc33e1d1203013d57', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'bd93aa8411864400f3252b07d0422e3878f064c8', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("select", { key: '89f56b035f9406771bcfd02c4e028d246a1c3132', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, h("slot", { key: '325b4225d203241b8be7566a60ac506ca77108eb' })), h("div", { key: '2d28afc89b2155e0fa629d174dc9601283002fb8', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '0b5d46698d73145af331452c27b5c4ecf9b03491', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (h("button", { class: 'button', onClick: buttonClick }, h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
+        return (h("host", { key: '1a19eb5a6afbcd82294bca60ea5bad6d79f077f7', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'c78b6fc5275df51ed5360b26336b901ebe02ce52', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("select", { key: '80f259e36cf655fab7e073f5c06acbdcfddcde95', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, h("slot", { key: 'e5bec3c8e55c593616037844b2d827871a7ccb77' })), h("div", { key: 'ec67f53732de7806efe6fd863b9d0e737eac8198', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'fc3dd4c07a8faac3122c418f0646c495d33b912b', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (h("button", { class: 'button', onClick: buttonClick }, h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
     }
     static get style() { return lsSelectInputCss; }
 }, [260, "ls-select-input", {
@@ -73,6 +73,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsSelectInput as L, defineCustomElement as d };
-//# sourceMappingURL=p-Dc4pAKEn.js.map
+//# sourceMappingURL=p-Bby5tjrS.js.map
 
-//# sourceMappingURL=p-Dc4pAKEn.js.map
+//# sourceMappingURL=p-Bby5tjrS.js.map

package/dist/components/{p-Dc4pAKEn.js.map → p-Bby5tjrS.js.map}

@@ -1 +1 @@
-{"file":"p-Dc4pAKEn.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,m5IAAm5I;;MCS/5I,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;AAChB,IAAA,IAAI;AACJ,IAAA,KAAK;AACL,IAAA,IAAI;AACJ,IAAA,QAAQ;AACR,IAAA,QAAQ;AACR,IAAA,WAAW;AACX,IAAA,QAAQ;AACR,IAAA,KAAK;AACL,IAAA,KAAK;AACL,IAAA,WAAW;AACX,IAAA,UAAU;AACV,IAAA,SAAS;;;;IAMjB,MAAM,GAAA;QACJ,MAAM,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACL,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,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,EAElB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,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,IACT,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAA,EACzC,CAAA,CAAA,SAAA,EAAA,EAAS,EAAE,EAAC,YAAY,EAAC,IAAI,EAAE,UAAU,EAAY,CAAA,CAC9C,KACN,eACH,EAAE,EAAE,QAAQ,GAAG,uBAAuB,GAAG,cAAc,EACvD,IAAI,EAAE,cAAc,EACX,CAAA,CAAC,CACR,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-select-input/ls-select-input.css?tag=ls-select-input","src/components/ls-formfield/inputs/ls-select-input/ls-select-input.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\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  width: 100%;\n  height: 2.25rem;\n  padding: 0rem 0.75rem;\n  align-items: center;\n  vertical-align: text-top;\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  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\nselect::-ms-expand {\n  display: none;\n}\n\nselect {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n#select-arrow {\n  color: var(--gray-70);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n#select-arrow-disabled {\n  color: var(--gray-40);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 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: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\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\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\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: 0px 0px 4px 0px #C7DDFF inset, 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: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n\n\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-select-input',\n  styleUrl: 'ls-select-input.css',\n  shadow: false,\n})\nexport class LsSelectInput {\n  @Prop() name: string;\n  @Prop() value: 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() buttonClick?: any;\n  @Prop() buttonIcon?: Icon;\n  @Prop() fieldIcon?: Icon;\n\n  // handleChange(event) {\n  //   this.value = event.target.value;\n  // }\n\n  render() {\n    const {\n      name,\n      aria,\n      disabled,\n      displayOnly,\n      required,\n      valid,\n      dirty,\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        <select\n          class={inputClass}\n          id={name}\n          name={name}\n          aria-label={aria}\n          required={required}\n          disabled={disabled}\n        >\n          <slot />\n        </select>\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          ) : (<ls-icon\n            id={disabled ? 'select-arrow-disabled' : 'select-arrow'}\n            name={'chevron-down'}\n          ></ls-icon>) }\n        </div>\n      </host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Bby5tjrS.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,m5IAAm5I;;MCS/5I,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;AAChB,IAAA,IAAI;AACJ,IAAA,KAAK;AACL,IAAA,IAAI;AACJ,IAAA,QAAQ;AACR,IAAA,QAAQ;AACR,IAAA,WAAW;AACX,IAAA,QAAQ;AACR,IAAA,KAAK;AACL,IAAA,KAAK;AACL,IAAA,WAAW;AACX,IAAA,UAAU;AACV,IAAA,SAAS;;;;IAMjB,MAAM,GAAA;QACJ,MAAM,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACL,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,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,EAElB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,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,IACT,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAA,EACzC,CAAA,CAAA,SAAA,EAAA,EAAS,EAAE,EAAC,YAAY,EAAC,IAAI,EAAE,UAAU,EAAY,CAAA,CAC9C,KACN,eACH,EAAE,EAAE,QAAQ,GAAG,uBAAuB,GAAG,cAAc,EACvD,IAAI,EAAE,cAAc,EACX,CAAA,CAAC,CACR,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-select-input/ls-select-input.css?tag=ls-select-input","src/components/ls-formfield/inputs/ls-select-input/ls-select-input.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\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  width: 100%;\n  height: 2.25rem;\n  padding: 0rem 0.75rem;\n  align-items: center;\n  vertical-align: text-top;\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  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\nselect::-ms-expand {\n  display: none;\n}\n\nselect {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n#select-arrow {\n  color: var(--gray-70);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n#select-arrow-disabled {\n  color: var(--gray-40);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 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: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\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\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\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: 0px 0px 4px 0px #C7DDFF inset, 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: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n\n\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-select-input',\n  styleUrl: 'ls-select-input.css',\n  shadow: false,\n})\nexport class LsSelectInput {\n  @Prop() name: string;\n  @Prop() value: 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() buttonClick?: any;\n  @Prop() buttonIcon?: Icon;\n  @Prop() fieldIcon?: Icon;\n\n  // handleChange(event) {\n  //   this.value = event.target.value;\n  // }\n\n  render() {\n    const {\n      name,\n      aria,\n      disabled,\n      displayOnly,\n      required,\n      valid,\n      dirty,\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        <select\n          class={inputClass}\n          id={name}\n          name={name}\n          aria-label={aria}\n          required={required}\n          disabled={disabled}\n        >\n          <slot />\n        </select>\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          ) : (<ls-icon\n            id={disabled ? 'select-arrow-disabled' : 'select-arrow'}\n            name={'chevron-down'}\n          ></ls-icon>) }\n        </div>\n      </host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-V-QJ5j_K.js → p-Bh-iiZW1.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
 import { d as defaultRolePalette } from './p-C00GqV9f.js';
-import { d as defineCustomElement$1 } from './p-BFSBsh85.js';
+import { d as defineCustomElement$1 } from './p-p3xY_X0j.js';
 
 const lsParticipantManagerCss = ".label-span{position:absolute;font-family:inherit;display:inline-flex;align-items:center;line-height:1rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}*{box-sizing:border-box;margin:0}.hidden{visibility:hidden;display:none}.participant-list{position:relative;display:flex;flex-direction:column;gap:0.75rem}.participant-card{display:flex;padding:0.625rem;flex-direction:column;align-items:flex-start;gap:0.5rem;align-self:stretch;border-radius:1rem}.role-label{display:flex;padding:0.125rem 0.375rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.25rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.innerButton{margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none}.participant-card-top-items{display:flex;width:100%;justify-content:space-between;align-items:center}.participant-text-description{font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.participant-text-type{font-style:normal;font-weight:400;line-height:1.25rem;}.titleButton{width:100%;text-align:left;background-color:transparent;border:none}.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}.add-participant-button{position:sticky;display:flex;padding:0.75rem 0;margin-bottom:-0.75rem;margin-top:-0.75rem;bottom:-0.75rem;background-image:linear-gradient(to top, var(--gray-10, #f7f8fa) 0%, var(--gray-10, #f7f8fa) 80%, transparent 100%)}.add-participant-button button{display:flex;gap:0.75rem;justify-content:center;align-items:center;width:100%;border:2px dashed var(--gray-20, #edeff2);background:var(--white, #fff);color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}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)}";
 
@@ -58,7 +58,7 @@ const LsParticipantManager = /*@__PURE__*/ proxyCustomElement(class LsParticipan
         return index > 200 ? 'gray' : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
     };
     render() {
-        return (h(Host, { key: '4f05b9b42935d385ac4dcf575dff6655a39b625c' }, h("div", { key: '07ec67a5c919dbc1258768dd7db80d21790a8c1e', class: "ls-editor-infobox" }, h("h2", { key: '365f0a1c25e77ffc1b89354b867e7844b53a40fe', class: "toolbox-section-title" }, "Participants"), h("p", { key: 'cc7e0187d20492ea7568bd77ef4c3cb2df8b12ce', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: '61045bc3accf319bfd5c84953f6a0066b6bd2114', class: "participant-list" }, this.template && this.template?.roles.map((r, index) => {
+        return (h(Host, { key: '42b6d146cc2155c18759b2239b94e6a2061be7a8' }, h("div", { key: '6aabfc38a5efc199b46cce0f5184e5e0b6aedc70', class: "ls-editor-infobox" }, h("h2", { key: '9a1c852dad10756a01af085ba9e3d4ca6fcc4550', class: "toolbox-section-title" }, "Participants"), h("p", { key: 'd074b9ad19836f29501f727bcd7c194667fe42d5', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: '0bf744b4645c9476673a78c1bbdfdfae712ea308', class: "participant-list" }, this.template && this.template?.roles.map((r, index) => {
             return (h("div", { class: "participant-card", onClick: () => {
                     this.selectedHandler(r);
                 }, style: {
@@ -78,7 +78,7 @@ const LsParticipantManager = /*@__PURE__*/ proxyCustomElement(class LsParticipan
                     color: `var(--${this.participantColor(r?.signerIndex)}-80)`,
                     textTransform: 'capitalize'
                 } }, r.roleType))));
-        })), h("div", { key: '295045bfeca2144d556311574fe6c34e74453c40', class: 'add-participant-button' }, h("button", { key: '6a0a02834fd09aff180fffc58983a0eac9fde61d', onClick: () => this.createHandler() }, h("ls-icon", { key: 'd623a2c621f730b96339657d49be661c96d1d9fa', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: 'ce3954251ce0b939dab95f9ea1772da1bb0cf9ea' }, "Add Participant"))), h("slot", { key: '65e160a9fde84fb8a09b14e60c992324bd9a8892' })));
+        })), h("div", { key: 'c439b737066174e8067665b0693e9b576aa3a1d9', class: 'add-participant-button' }, h("button", { key: '02b7de44dc38942ed7b78e8ad853202bc93b779a', onClick: () => this.createHandler() }, h("ls-icon", { key: '00d4bbacbc5bdcc72580c275a42e5288fc464133', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: '2f9677949581108623e917e2ecaaec90b5d60e6f' }, "Add Participant"))), h("slot", { key: '762710558e4f5f6e1e6a18ba12e9d0a895eac5c2' })));
     }
     static get style() { return lsParticipantManagerCss; }
 }, [257, "ls-participant-manager", {
@@ -106,6 +106,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsParticipantManager as L, defineCustomElement as d };
-//# sourceMappingURL=p-V-QJ5j_K.js.map
+//# sourceMappingURL=p-Bh-iiZW1.js.map
 
-//# sourceMappingURL=p-V-QJ5j_K.js.map
+//# sourceMappingURL=p-Bh-iiZW1.js.map

package/dist/components/{p-V-QJ5j_K.js.map → p-Bh-iiZW1.js.map}

@@ -1 +1 @@
-{"file":"p-V-QJ5j_K.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-participant-manager/ls-participant-manager.css?tag=ls-participant-manager&encapsulation=shadow","src/components/ls-participant-manager/ls-participant-manager.tsx"],"sourcesContent":[".label-span {\n  position: absolute;\n  font-family: inherit;\n  display: inline-flex;\n  align-items: center;\n  line-height: 1rem;\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.hidden {\n  visibility: hidden;\n  display: none;\n}\n\n.participant-list {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.participant-card {\n  display: flex;\n  padding: 0.625rem;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 1rem;\n}\n\n.role-label {\n  display: flex;\n  padding: 0.125rem 0.375rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: 0.25rem;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.innerButton {\n  margin: 0px;\n  padding: 0px;\n  max-height: 1.25rem !important;\n  max-width: 1.25rem !important;\n  background-color: transparent;\n  border: none;\n}\n\n.participant-card-top-items {\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.participant-text-description {\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.participant-text-type {\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.titleButton {\n  width: 100%;\n  text-align: left;\n  background-color: transparent;\n  border: none;\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.add-participant-button {\n  position: sticky;\n  display: flex;\n  padding: 0.75rem 0;\n  margin-bottom: -0.75rem;\n  margin-top: -0.75rem;\n  bottom: -0.75rem;\n  background-image: linear-gradient(to top, var(--gray-10, #f7f8fa) 0%, var(--gray-10, #f7f8fa) 80%, transparent 100%);\n}\n\n.add-participant-button button {\n  display: flex;\n  gap: 0.75rem;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  border: 2px dashed var(--gray-20, #edeff2);\n  background: var(--white, #fff);\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}\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, Event, EventEmitter } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { LSApiRole } from '../../types/LSApiRole';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-participant-manager',\n  styleUrl: 'ls-participant-manager.css',\n  shadow: true,\n})\nexport class LsParticipantManager {\n  /**\n   * The base template information (as JSON).\n   * {LSDocumentViewer}\n   */\n  @Prop() editor: LsDocumentViewer;\n\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() template: LSApiTemplate;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  selectedHandler(_role) {\n    //console.log(role, 'participant manager')\n  }\n\n  deleteHandler(role: LSApiRole) {\n    this.update.emit([{ action: 'delete', data: role }]);\n    this.mutate.emit([{ action: 'delete', data: role }]);\n  }\n\n  swapHandler(role1, role2) {\n    this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);\n  }\n  createHandler() {\n    const defaultExperience = this.editor._group.experienceConnection.experiences.find(x => x.defaultExperience === true)\n    const data: LSMutateEvent[] = [\n      {\n        action: 'create',\n        data: {\n          id: btoa('rol' + crypto.randomUUID()),\n          name: 'Signer ' +(this.template.roles.length + 1),\n          roleType: 'SIGNER',\n          signerIndex: this.template.roles.length + 1,\n          ordinal: this.template.roles.length,\n          signerParent: null,\n          experience: defaultExperience.id,\n          templateId: this.template.id\n        },\n      },\n    ]\n    this.update.emit(data);\n    this.mutate.emit(data);\n  }\n\n  participantColor = (index: number) => {\n    return index > 200 ? 'gray' : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"ls-editor-infobox\">\n          <h2 class=\"toolbox-section-title\">Participants</h2>\n          <p class=\"toolbox-section-description\">Select and Click to place Signature fields where you’d like on the Document.</p>\n        </div>\n        <div class=\"participant-list\">\n          {this.template && this.template?.roles.map((r, index) => {\n            return (\n              <div\n                class=\"participant-card\"\n                onClick={() => {\n                  this.selectedHandler(r);\n                }}\n                style={{\n                  background: `var(--${this.participantColor(r?.signerIndex)}-10)`,\n                  border: '1px solid ' + `var(--${this.participantColor(r?.signerIndex)}-60)`,\n                  marginTop: r.signerIndex > 100 && '-0.813rem',\n                }}\n                onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.innerButton')?.classList.remove('hidden')}\n                onMouseLeave={e => (e.currentTarget as HTMLElement).querySelector('.innerButton')?.classList.add('hidden')}\n              >\n                <div class={'participant-card-top-items'}>\n                  {' '}\n                  <div\n                    class={'role-label'}\n                    style={{\n                      background: `var(--${this.participantColor(r?.signerIndex)}-20)`,\n                      color: `var(--${this.participantColor(r?.signerIndex)}-90)`,\n                    }}\n                  >\n                    <ls-icon name={r?.signerIndex > 100 ? 'eye' : 'signature'} />\n                    {'Participant ' + (index + 1)}\n                  </div>\n                  <div\n                    class=\"innerButton hidden\"\n                    onClick={() => {\n                      this.deleteHandler(r);\n                    }}\n                  >\n                    <ls-icon\n                      name=\"trash\"\n                      size=\"18\"\n                      style={{\n                        color: `var(--${this.participantColor(r?.signerIndex)}-40)`,\n                      }}\n                    />\n                  </div>\n                </div>\n                <div class={'participant-card-text'}>\n                  <p\n                    class=\"participant-text-description\"\n                    style={{\n                      color: `var(--${this.participantColor(r?.signerIndex)}-100)`,\n                    }}\n                  >\n                    {r.name || `${r.signerIndex > 100 ? 'Witness' : 'Signer'} ${index + 1}`}\n                  </p>\n                  <p\n                    class=\"participant-text-type\"\n                    style={{\n                      color: `var(--${this.participantColor(r?.signerIndex)}-80)`,\n                      textTransform: 'capitalize'\n                    }}\n                  >\n                    {r.roleType}\n                  </p>\n                </div>\n\n                {/* {index !== 0 ? (\n                <button\n                  class=\"innerButton\"\n                  onClick={() => {\n                    this.swapHandler(r, this.template.roles[index - 1]);\n                  }}\n                >\n                  <ls-icon name=\"arrow-up\" size=\"18\" />\n                </button>\n              ) : (\n                <></>\n              )}\n              {index < this.template.roles.length - 1 ? (\n                <button\n                  class=\"innerButton\"\n                  onClick={() => {\n                    this.swapHandler(r, this.template.roles[index + 1]);\n                  }}\n                >\n                  <ls-icon name=\"arrow-down\" size=\"18\" />\n                </button>\n              ) : (\n                <></>\n              )} */}\n              </div>\n            );\n          })}\n        </div>\n        <div class={'add-participant-button'}>\n          <button onClick={() => this.createHandler()}>\n            <ls-icon name=\"user-add\" size=\"20\" color=\"var(--gray-100, #45484D);\" />\n            <p>Add Participant</p>\n          </button>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Bh-iiZW1.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-participant-manager/ls-participant-manager.css?tag=ls-participant-manager&encapsulation=shadow","src/components/ls-participant-manager/ls-participant-manager.tsx"],"sourcesContent":[".label-span {\n  position: absolute;\n  font-family: inherit;\n  display: inline-flex;\n  align-items: center;\n  line-height: 1rem;\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.hidden {\n  visibility: hidden;\n  display: none;\n}\n\n.participant-list {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.participant-card {\n  display: flex;\n  padding: 0.625rem;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 1rem;\n}\n\n.role-label {\n  display: flex;\n  padding: 0.125rem 0.375rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: 0.25rem;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.innerButton {\n  margin: 0px;\n  padding: 0px;\n  max-height: 1.25rem !important;\n  max-width: 1.25rem !important;\n  background-color: transparent;\n  border: none;\n}\n\n.participant-card-top-items {\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.participant-text-description {\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.participant-text-type {\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.titleButton {\n  width: 100%;\n  text-align: left;\n  background-color: transparent;\n  border: none;\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.add-participant-button {\n  position: sticky;\n  display: flex;\n  padding: 0.75rem 0;\n  margin-bottom: -0.75rem;\n  margin-top: -0.75rem;\n  bottom: -0.75rem;\n  background-image: linear-gradient(to top, var(--gray-10, #f7f8fa) 0%, var(--gray-10, #f7f8fa) 80%, transparent 100%);\n}\n\n.add-participant-button button {\n  display: flex;\n  gap: 0.75rem;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  border: 2px dashed var(--gray-20, #edeff2);\n  background: var(--white, #fff);\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}\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, Event, EventEmitter } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { LSApiRole } from '../../types/LSApiRole';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-participant-manager',\n  styleUrl: 'ls-participant-manager.css',\n  shadow: true,\n})\nexport class LsParticipantManager {\n  /**\n   * The base template information (as JSON).\n   * {LSDocumentViewer}\n   */\n  @Prop() editor: LsDocumentViewer;\n\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() template: LSApiTemplate;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  selectedHandler(_role) {\n    //console.log(role, 'participant manager')\n  }\n\n  deleteHandler(role: LSApiRole) {\n    this.update.emit([{ action: 'delete', data: role }]);\n    this.mutate.emit([{ action: 'delete', data: role }]);\n  }\n\n  swapHandler(role1, role2) {\n    this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);\n  }\n  createHandler() {\n    const defaultExperience = this.editor._group.experienceConnection.experiences.find(x => x.defaultExperience === true)\n    const data: LSMutateEvent[] = [\n      {\n        action: 'create',\n        data: {\n          id: btoa('rol' + crypto.randomUUID()),\n          name: 'Signer ' +(this.template.roles.length + 1),\n          roleType: 'SIGNER',\n          signerIndex: this.template.roles.length + 1,\n          ordinal: this.template.roles.length,\n          signerParent: null,\n          experience: defaultExperience.id,\n          templateId: this.template.id\n        },\n      },\n    ]\n    this.update.emit(data);\n    this.mutate.emit(data);\n  }\n\n  participantColor = (index: number) => {\n    return index > 200 ? 'gray' : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"ls-editor-infobox\">\n          <h2 class=\"toolbox-section-title\">Participants</h2>\n          <p class=\"toolbox-section-description\">Select and Click to place Signature fields where you’d like on the Document.</p>\n        </div>\n        <div class=\"participant-list\">\n          {this.template && this.template?.roles.map((r, index) => {\n            return (\n              <div\n                class=\"participant-card\"\n                onClick={() => {\n                  this.selectedHandler(r);\n                }}\n                style={{\n                  background: `var(--${this.participantColor(r?.signerIndex)}-10)`,\n                  border: '1px solid ' + `var(--${this.participantColor(r?.signerIndex)}-60)`,\n                  marginTop: r.signerIndex > 100 && '-0.813rem',\n                }}\n                onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.innerButton')?.classList.remove('hidden')}\n                onMouseLeave={e => (e.currentTarget as HTMLElement).querySelector('.innerButton')?.classList.add('hidden')}\n              >\n                <div class={'participant-card-top-items'}>\n                  {' '}\n                  <div\n                    class={'role-label'}\n                    style={{\n                      background: `var(--${this.participantColor(r?.signerIndex)}-20)`,\n                      color: `var(--${this.participantColor(r?.signerIndex)}-90)`,\n                    }}\n                  >\n                    <ls-icon name={r?.signerIndex > 100 ? 'eye' : 'signature'} />\n                    {'Participant ' + (index + 1)}\n                  </div>\n                  <div\n                    class=\"innerButton hidden\"\n                    onClick={() => {\n                      this.deleteHandler(r);\n                    }}\n                  >\n                    <ls-icon\n                      name=\"trash\"\n                      size=\"18\"\n                      style={{\n                        color: `var(--${this.participantColor(r?.signerIndex)}-40)`,\n                      }}\n                    />\n                  </div>\n                </div>\n                <div class={'participant-card-text'}>\n                  <p\n                    class=\"participant-text-description\"\n                    style={{\n                      color: `var(--${this.participantColor(r?.signerIndex)}-100)`,\n                    }}\n                  >\n                    {r.name || `${r.signerIndex > 100 ? 'Witness' : 'Signer'} ${index + 1}`}\n                  </p>\n                  <p\n                    class=\"participant-text-type\"\n                    style={{\n                      color: `var(--${this.participantColor(r?.signerIndex)}-80)`,\n                      textTransform: 'capitalize'\n                    }}\n                  >\n                    {r.roleType}\n                  </p>\n                </div>\n\n                {/* {index !== 0 ? (\n                <button\n                  class=\"innerButton\"\n                  onClick={() => {\n                    this.swapHandler(r, this.template.roles[index - 1]);\n                  }}\n                >\n                  <ls-icon name=\"arrow-up\" size=\"18\" />\n                </button>\n              ) : (\n                <></>\n              )}\n              {index < this.template.roles.length - 1 ? (\n                <button\n                  class=\"innerButton\"\n                  onClick={() => {\n                    this.swapHandler(r, this.template.roles[index + 1]);\n                  }}\n                >\n                  <ls-icon name=\"arrow-down\" size=\"18\" />\n                </button>\n              ) : (\n                <></>\n              )} */}\n              </div>\n            );\n          })}\n        </div>\n        <div class={'add-participant-button'}>\n          <button onClick={() => this.createHandler()}>\n            <ls-icon name=\"user-add\" size=\"20\" color=\"var(--gray-100, #45484D);\" />\n            <p>Add Participant</p>\n          </button>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BdJAlep4.js → p-BneR1hef.js}

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
-import { d as defineCustomElement$8 } from './p-DLF5DiJI.js';
-import { d as defineCustomElement$7 } from './p-BFSBsh85.js';
-import { d as defineCustomElement$6 } from './p-DKOj6SYm.js';
-import { d as defineCustomElement$5 } from './p-DeaQdy4U.js';
-import { d as defineCustomElement$4 } from './p-Dc4pAKEn.js';
-import { d as defineCustomElement$3 } from './p-CdL5cKO8.js';
-import { d as defineCustomElement$2 } from './p-DIeSYRR1.js';
-import { d as defineCustomElement$1 } from './p-9Z-GK0Bd.js';
+import { d as defineCustomElement$8 } from './p-aOAZ6c8y.js';
+import { d as defineCustomElement$7 } from './p-p3xY_X0j.js';
+import { d as defineCustomElement$6 } from './p-DY_A9zAm.js';
+import { d as defineCustomElement$5 } from './p-BsqbS8f_.js';
+import { d as defineCustomElement$4 } from './p-Bby5tjrS.js';
+import { d as defineCustomElement$3 } from './p-JBc2BCIT.js';
+import { d as defineCustomElement$2 } from './p-lTOSc-NN.js';
+import { d as defineCustomElement$1 } from './p-BPkbTOIU.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-BdJAlep4.js.map
+//# sourceMappingURL=p-BneR1hef.js.map
 
-//# sourceMappingURL=p-BdJAlep4.js.map
+//# sourceMappingURL=p-BneR1hef.js.map