legalesign-document-viewer 0.7.3 → 0.7.4

package/dist/components/p-Bkyhs-9F.js

@@ -0,0 +1,60 @@
+import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-BhZ5Udbm.js';
+
+const lsEditorTableCss = () => `:host{display:block;z-index:100;position:absolute;top:0px;left:0px}table{background-color:azure;border:1px solid black}td{border:1px solid black}`;
+
+const LsEditorTable = /*@__PURE__*/ proxyCustomElement(class LsEditorTable extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    get component() { return this; }
+    /**
+  * The parent editor control.
+  * {LsDocumentViewer}
+  */
+    editor;
+    componentDidLoad() {
+        var dataTable = this.component.shadowRoot.getElementById('ls-editor-table');
+        Array.from(this.editor.component.shadowRoot.querySelectorAll('ls-editor-field')).forEach(fx => {
+            const rowNode = document.createElement('tr');
+            const idCellNode = document.createElement('td');
+            idCellNode.innerText = fx.dataItem.id;
+            rowNode.appendChild(idCellNode);
+            const valueCellNode = document.createElement('td');
+            valueCellNode.innerText = fx.dataItem.value;
+            rowNode.appendChild(valueCellNode);
+            const labelCellNode = document.createElement('td');
+            labelCellNode.innerText = fx.dataItem.label;
+            rowNode.appendChild(labelCellNode);
+            dataTable.appendChild(rowNode);
+        });
+    }
+    render() {
+        return (h(Host, { key: 'e56b514f77bce59b5bcb10b43830be4f884a9488' }, h("table", { key: '3a0368c8a52bbf2d008aaaebdaba52265d0cc65c', id: "ls-editor-table" }), h("slot", { key: 'c38271366de7c3609039f167679a490bf922bbb2' })));
+    }
+    static get style() { return lsEditorTableCss(); }
+}, [769, "ls-editor-table", {
+        "editor": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-editor-table"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-editor-table":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsEditorTable);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsEditorTable as L, defineCustomElement as d };
+//# sourceMappingURL=p-Bkyhs-9F.js.map
+
+//# sourceMappingURL=p-Bkyhs-9F.js.map

package/dist/components/p-Bkyhs-9F.js.map

@@ -0,0 +1 @@
+{"file":"p-Bkyhs-9F.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,iJAAiJ,CAAC;;MCQrK,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAExB;;;AAGA;AACQ,IAAA,MAAM;IAEd,gBAAgB,GAAA;AACd,QAAA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,iBAAiB,CAAsB;QAChG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;YAE5F,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;YAC5C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;YAC/C,UAAU,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE;AACrC,YAAA,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC;YAE/B,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;YAClD,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK;AAC3C,YAAA,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC;YAElC,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;YAClD,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK;AAC3C,YAAA,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC;AAElC,YAAA,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;AAChC,SAAC,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,iBAAiB,EACnB,CAAA,EACR,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-editor-table/ls-editor-table.css?tag=ls-editor-table&encapsulation=shadow","src/components/ls-editor-table/ls-editor-table.tsx"],"sourcesContent":[":host {\n  display: block;\n  z-index: 100;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n}\n\ntable {\n  background-color: azure;\n  border: 1px solid black\n}\n\ntd {\n  border: 1px solid black\n}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\n\n@Component({\n  tag: 'ls-editor-table',\n  styleUrl: 'ls-editor-table.css',\n  shadow: true,\n})\nexport class LsEditorTable {\n  @Element() component: HTMLElement;\n  /**\n* The parent editor control.\n* {LsDocumentViewer}\n*/\n  @Prop() editor: LsDocumentViewer;\n\n  componentDidLoad() {\n    var dataTable = this.component.shadowRoot.getElementById('ls-editor-table') as HTMLCanvasElement;\n    Array.from(this.editor.component.shadowRoot.querySelectorAll('ls-editor-field')).forEach(fx => {\n\n      const rowNode = document.createElement('tr');\n      const idCellNode = document.createElement('td');\n      idCellNode.innerText = fx.dataItem.id\n      rowNode.appendChild(idCellNode);\n\n      const valueCellNode = document.createElement('td');\n      valueCellNode.innerText = fx.dataItem.value\n      rowNode.appendChild(valueCellNode);\n\n      const labelCellNode = document.createElement('td');\n      labelCellNode.innerText = fx.dataItem.label\n      rowNode.appendChild(labelCellNode);\n\n      dataTable.appendChild(rowNode)\n    })\n  }\n\n  render() {\n    return (\n      <Host>\n        <table id=\"ls-editor-table\">\n        </table>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/{ls-document-viewer/ls-number-input.entry.js → components/p-BrNFnrQ5.js}

@@ -1,5 +1,6 @@
-import { r as registerInstance, h } from './index-DANCsk1i.js';
-import { c as clsx } from './clsx-ChV9xqsO.js';
+import { t as transformTag, p as proxyCustomElement, H, h } from './p-BhZ5Udbm.js';
+import { c as clsx } from './p-ChV9xqsO.js';
+import { d as defineCustomElement$1 } from './p-DnyBXRV4.js';
 
 const lsNumberInputCss = () => `* {
   box-sizing: border-box;
@@ -276,9 +277,13 @@ input:focus:not(:disabled) {
 }
 `;
 
-const LsNumberInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const LsNumberInput = /*@__PURE__*/ proxyCustomElement(class LsNumberInput extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
     }
     type = 'ls';
     name;
@@ -313,10 +318,46 @@ const LsNumberInput = class {
                     ? 'invalid'
                     : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
         const plusMinusClass = clsx(disabled ? 'button-disabled' : 'button');
-        return (h("host", { key: 'caa0fe5cbef1882acaa322ef4416eff55c0ee751', class: type === 'ls' && 'host' }, type === 'ls' && (h("button", { key: '83b5865044e80e070fc587622ba3dc971c65f691', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, h("ls-icon", { key: '7a145b0b4293f218c16ba6346d00aa9f5a29eb78', id: 'buttonIcon', name: 'minus-sm' }))), h("div", { key: 'c5a995b3830fbf6a1162d466402b71b7f8c2726d', class: 'input-container' }, fieldIcon && (h("ls-icon", { key: '5ae27b70f2f6d35b193d8ddd4804d5f0240d465a', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("input", { key: 'bcefe1d1dfeac681f6d90fde306e85ead0182be1', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), h("div", { key: 'eca7a36f88db1da9a460b744a80b6f2d875ef3bf', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'd7f9a1260a183e2693533fc783003ad88ec90710', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (h("button", { key: 'cf02e2f1b594c935f2fba0841d3b41d9df0e1acf', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '32fb6c4a25edf0ac75b3803c59b7b0a3895f0b83', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (h("button", { key: 'e19b04e4e57ad8bfbc8512565862b54048d79292', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, h("ls-icon", { key: '0e0bb174ed9b87369eda7f4b5b27a1b6ba33eb3f', id: 'buttonIcon', name: 'plus-sm' })))));
+        return (h("host", { key: '854a934295c4f06d0a0218bb26df4c2b8347ad8c', class: type === 'ls' && 'host' }, type === 'ls' && (h("button", { key: 'b9b060518ad7934720558bace95664f0d270afd7', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, h("ls-icon", { key: '0c0262976564f452599eca98b4174e5885e86d51', id: 'buttonIcon', name: 'minus-sm' }))), h("div", { key: '118d6e36fe7aa2bd1c63b1ede4d88f90c3e14eae', class: 'input-container' }, fieldIcon && (h("ls-icon", { key: 'a2c613b5ce3fc312c27cf80e9f8c7c709a6ce9eb', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("input", { key: '03c2a74000eeaca0d8abe0f2f95519a863bd1939', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), h("div", { key: '7e213c19c8d7ae104325445d4f029c39fb922315', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '66ed47a6912f656722e70f7b0dc6a74c6de01db7', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (h("button", { key: '584e1ba750a17469773ff1534c01272a7c488730', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '49d03d49316bb601acb06e0517b63d3834300375', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (h("button", { key: 'ceb2b9fb8f2741c91ec5906ac1bc8f058863d8d6', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, h("ls-icon", { key: 'c40ea5faac37c75f9400868c667cc382a0173218', id: 'buttonIcon', name: 'plus-sm' })))));
     }
-};
-LsNumberInput.style = lsNumberInputCss();
+    static get style() { return lsNumberInputCss(); }
+}, [769, "ls-number-input", {
+        "type": [1],
+        "name": [1],
+        "value": [1026],
+        "placeholder": [1],
+        "aria": [1],
+        "inputRef": [1, "input-ref"],
+        "disabled": [4],
+        "required": [4],
+        "valid": [4],
+        "dirty": [4],
+        "countMax": [2, "count-max"],
+        "buttonClick": [8, "button-click"],
+        "buttonIcon": [1, "button-icon"],
+        "fieldIcon": [1, "field-icon"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-number-input", "ls-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-number-input":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsNumberInput);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsNumberInput as L, defineCustomElement as d };
+//# sourceMappingURL=p-BrNFnrQ5.js.map
 
-export { LsNumberInput as ls_number_input };
-//# sourceMappingURL=ls-number-input.entry.esm.js.map
+//# sourceMappingURL=p-BrNFnrQ5.js.map

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

@@ -0,0 +1 @@
+{"file":"p-BrNFnrQ5.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC;AAChC;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;AAGA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-number-input/ls-number-input.css?tag=ls-number-input&encapsulation=shadow","src/components/ls-formfield/inputs/ls-number-input/ls-number-input.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\n  font-family:\n    'IBM Plex Sans',\n    sans-serif;\n  margin: 0;\n}\n\n.host {\n  display: flex;\n  width: 100%;\n  padding: 0.25rem;\n  align-items: flex-start;\n  gap: 0.25rem;\n  border-radius: 0.625rem;\n  border: 1px solid var(--Grey-20, #edeff2);\n  background: var(--Grey-10, #f7f8fa);\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0.75rem;\n  color: var(--gray-80);\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0.75rem;\n  color: var(--gray-60);\n}\n\n#password-icon {\n  padding-right: 0.25rem;\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-basic {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: 0.5rem 0.75rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  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\n.input-ls {\n  display: flex;\n  width: 100%;\n  height: 1.75rem;\n  padding: 0 0.5rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.375rem;\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\n}\n\n.input-ls::-webkit-outer-spin-button,\n.input-ls::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.input-ls {\n  -moz-appearance: textfield;\n}\n\ninput-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\ninput:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\n.default {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--White, #fff);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #d8d9dc);\n  background: var(--White, #fff);\n  color: var(--gray-110);\n}\n\n.disabled {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--gray-10, #f7f8fa);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.display-only {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--gray-10, #f7f8fa);\n  color: var(--gray-100);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #ffa19e);\n  background: var(--White, #fff);\n  color: var(--Red-100, #7a1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #ffa19e);\n  background: var(--White, #fff);\n  color: var(--Red-100, #7a1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72f0c2);\n  background: var(--White, #fff);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72f0c2);\n  background: var(--White, #fff);\n  color: var(--Green-100, #125241);\n}\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 2.25rem;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\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: 1.75rem;\n  width: 1.75rem;\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-disabled {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-=10, #F7F8FA);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  cursor: not-allowed;\n\n  #buttonIcon {\n    color: var(--gray-70);\n  }\n}\n\n.button:hover {\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  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n","import { Component, Prop,  h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'ls-number-input',\n  styleUrl: 'ls-number-input.css',\n  shadow: true,\n})\nexport class LsNumberInput {\n  @Prop() type: 'basic' | 'ls' = 'ls';\n  @Prop() name: string;\n  @Prop({mutable: true}) value: number = 0 ;\n  @Prop() placeholder?: string;\n  @Prop() aria?: string;\n  @Prop() inputRef?: string;\n  @Prop() disabled: boolean;\n  @Prop() required: boolean;\n  @Prop() valid: boolean;\n  @Prop() dirty: boolean;\n  @Prop() countMax: number;\n  @Prop() buttonClick?: any;\n  @Prop() buttonIcon?: Icon;\n  @Prop() fieldIcon?: Icon;\n\n  handleChange = (event) => {\n    this.value = event.target.value;\n  }\n\n  private handlePlus = () => {\n    this.value = this.value + 1;\n  }\n\n  private handleMinus = () => {\n    this.value = this.value - 1;\n  }\n\n  render() {\n    const {\n      type,\n      name,\n      value,\n      placeholder,\n      aria,\n      disabled,\n      required,\n      valid,\n      dirty,\n      buttonClick,\n      buttonIcon,\n      fieldIcon,\n      handleChange,\n      handleMinus,\n      handlePlus,\n    } = this;\n\n    const inputClass = clsx(\n      type === 'ls' ? 'input-ls' : 'input-basic',\n      disabled\n        ? 'disabled'\n        : dirty && valid\n          ? 'valid'\n          : dirty && !valid\n            ? 'invalid'\n            : 'default',\n      fieldIcon && 'icon-input',\n      dirty && 'button-input',\n      buttonIcon && 'button-input',\n      buttonIcon && dirty && 'right-items-input',\n    );\n\n    const plusMinusClass = clsx(\n      disabled ? 'button-disabled' : 'button'\n    )\n\n    return (\n      <host class={type === 'ls' && 'host'}>\n        {type === 'ls' && (\n          <button class={plusMinusClass} onClick={() => handleMinus()} disabled={disabled}>\n            <ls-icon id='buttonIcon' name='minus-sm'></ls-icon>\n          </button>\n        )}\n        <div class='input-container'>\n          {fieldIcon && (\n            <ls-icon\n              id={disabled ? 'fieldIconDisabled' : 'fieldIcon'}\n              name={fieldIcon}\n            ></ls-icon>\n          )}\n          <input\n            type='number'\n            class={inputClass}\n            id={name}\n            name={name}\n            value={value}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={required}\n            disabled={disabled}\n            onInput={(event) => handleChange(event)}\n          />\n          <div class='right-items'>\n            {dirty && !disabled && (\n              <ls-icon\n                id={valid ? 'validIcon' : 'invalidIcon'}\n                name={valid ? 'check-circle' : 'exclamation-circle'}\n              ></ls-icon>\n            )}\n            {buttonIcon && type !== 'ls' && (\n              <button class='button' onClick={buttonClick}>\n                <ls-icon id='buttonIcon' name={buttonIcon}></ls-icon>\n              </button>\n            )}\n          </div>\n        </div>\n        {type === 'ls' && (\n          <button class={plusMinusClass} onClick={handlePlus} disabled={disabled}>\n            <ls-icon id='buttonIcon' name='plus-sm'></ls-icon>\n          </button>\n        )}\n      </host>\n    );\n  }\n}\n"],"version":3}

package/dist/{ls-document-viewer/ls-statusbar.entry.js → components/p-Bw19bxna.js}

@@ -1,13 +1,21 @@
-import { r as registerInstance, e as getElement, h, a as Host } from './index-DANCsk1i.js';
-import { a as attachAllTooltips } from './tooltip-Cb8nDMs-.js';
+import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-BhZ5Udbm.js';
+import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
+import { d as defineCustomElement$4 } from './p-CN4S8Tr6.js';
+import { d as defineCustomElement$3 } from './p-DnyBXRV4.js';
+import { d as defineCustomElement$2 } from './p-DfkXv1vI.js';
+import { d as defineCustomElement$1 } from './p-faUZy676.js';
 
 const lsStatusbarCss = () => `:host{position:fixed;z-index:1000;right:1rem;bottom:1rem;display:flex;flex-direction:row;gap:0.5rem;align-items:end;height:2.25rem;overflow:visible}.controls-bar{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}.controls-bar>:not(:nth-child(1)){border-left:1px solid var(--gray-30, #e0e2e5)}button{border:0}button:hover{color:var(--gray-100, #45484d);border-radius:0.5rem}button:disabled{color:var(--gray-40, #c1c4c8);cursor:not-allowed}input[type="range"]{-webkit-appearance:none;width:100%;height:0.5rem;background:var(--gray-20, #EDEFF2);border-radius:0.25rem;outline:none}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0.5rem;height:0.5rem;background:var(--gray-70, #4a4c51);border-radius:50%;cursor:pointer}input[type="range"]::-moz-range-thumb{width:0.5rem;height:0.5rem;background:var(--gray-70, #4a4c51);border:none;border-radius:50%;cursor:pointer}input[type="range"]::-moz-range-track{background:var(--gray-20, #EDEFF2);height:0.5rem;border-radius:0.25rem}input[type="range"]::-webkit-slider-runnable-track{background:var(--gray-20, #EDEFF2);height:0.5rem;border-radius:0.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:2.25rem}.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)}`;
 
-const LsStatusbar = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const LsStatusbar = /*@__PURE__*/ proxyCustomElement(class LsStatusbar extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
     }
-    get component() { return getElement(this); }
+    get component() { return this; }
     /**
      * The zoom or scale level 100 === 100%.
      * {number}
@@ -42,14 +50,55 @@ const LsStatusbar = class {
         this.zoom = this.editor.zoom;
     }
     render() {
-        return (h(Host, { key: 'bff0f0711d2a75e40ed66559ad71f0892005af84' }, h("div", { key: '4b7cec2d6af0e310de62b1be797dd22d6a8add9d', class: 'controls-bar' }, h("div", { key: '2be8e1c4272b564d55164daff6a71f4751cd4e5f', class: 'status-bar-section' }, h("button", { key: '487cbf5f0f110641f58619c13ed255bbe6e0b6f0', onClick: () => this.setZoom(this.editor.zoom * 0.8), id: "zoom-out-btn", "data-tooltip": "Zoom Out" }, h("ls-icon", { key: '154a2c4d1d8a3a1cb5e8e4cd5b1a4a5cd453fdcf', name: "zoom-out" })), h("button", { key: '6342521b579c9b804a903dd09a3c9b3900483c7d', onClick: () => this.setZoom(this.editor.zoom / 0.8), id: "zoom-in-btn", "data-tooltip": "Zoom In" }, h("ls-icon", { key: 'e37186e7226438d46469755629ec371d7f3b69e3', name: "zoom-in" }))), h("div", { key: '7c6d42ca87219a50d7989577ffbb1559aa405945', class: 'status-bar-section' }, h("button", { key: '864d2fc682c070ead48a65b6c3c79267d75149ee', onClick: () => this.fitWidth(), id: "fit-width-btn", "data-tooltip": "Fit Width" }, h("ls-icon", { key: '276fbb76e8d5f04022cd9c8d4a59ab12576ca0dc', name: "fit-width" })), h("button", { key: 'a3dda200b6222df53975d20d364c37dac6130536', onClick: () => this.fitHeight(), id: "fit-height-btn", "data-tooltip": "Fit Height" }, h("ls-icon", { key: '380834a465667a3bab44f7322cb4e456bee5ba10', name: "fit-height" }))), h("div", { key: '60b461c66514f060c10fef58b44d74f48066403a', class: 'status-bar-section', style: this.pageCount === 1 && { display: 'none' } }, h("button", { key: '5e8a99f151929aed29da987b646644a32ca2b5d4', onClick: () => {
+        return (h(Host, { key: '69daa9251f31cf28501fd47c5536a3a0e76d48cf' }, h("div", { key: 'f1204ff3c369c48389df4ed8c5cb45457bb087a4', class: 'controls-bar' }, h("div", { key: '268b93d93af4689dbd477e292db3dbb45c88e40c', class: 'status-bar-section' }, h("button", { key: '50ed0b096d871252132eb8315d7b667ff2c1dbed', onClick: () => this.setZoom(this.editor.zoom * 0.8), id: "zoom-out-btn", "data-tooltip": "Zoom Out" }, h("ls-icon", { key: '278a53a799c94c202b1167ea4ee4ac2d93f69907', name: "zoom-out" })), h("button", { key: '5e54b379f8b62bcec29ae9b2a93a3f2c18e4d2cf', onClick: () => this.setZoom(this.editor.zoom / 0.8), id: "zoom-in-btn", "data-tooltip": "Zoom In" }, h("ls-icon", { key: 'e1442756c0f2a116ef5c73bfdc8c1a6d4175f2f7', name: "zoom-in" }))), h("div", { key: '2b8f781d778751430c6c0a092480951da8e19bb6', class: 'status-bar-section' }, h("button", { key: 'a4c2ecf2fe768c08da4b62a79650c68497cb1284', onClick: () => this.fitWidth(), id: "fit-width-btn", "data-tooltip": "Fit Width" }, h("ls-icon", { key: '1aabfc52e2ee40e1987013df6c289b1e061c44fc', name: "fit-width" })), h("button", { key: 'd0c118e1bccd4ecf46ee1d69443e88f8f28aa840', onClick: () => this.fitHeight(), id: "fit-height-btn", "data-tooltip": "Fit Height" }, h("ls-icon", { key: '64c11d4a5ec0baa1d00b37ce0fef036b0be4135d', name: "fit-height" }))), h("div", { key: '88aacd1a5d7f93cc32ffdf06ffc80466dedf81f7', class: 'status-bar-section', style: this.pageCount === 1 && { display: 'none' } }, h("button", { key: 'b50e21a2c4e81bfd74c8e28e0434e9e87efd5ecf', onClick: () => {
                 this.editor.pagePrev();
-            }, disabled: this.page === 1, id: "prev-page-btn", "data-tooltip": this.page === 1 ? 'No Previous Page' : 'Previous Page' }, h("ls-icon", { key: 'f61e6f9451743a7f89835354cf39cd651d388073', name: "chevron-left" })), h("p", { key: '1aed55707b9abc5f30e47cb7c6471c0116aee676' }, this.page, " / ", this.pageCount), h("button", { key: '96cf4c10c2dd7ecf70824031768af645807e8b46', onClick: () => {
+            }, disabled: this.page === 1, id: "prev-page-btn", "data-tooltip": this.page === 1 ? 'No Previous Page' : 'Previous Page' }, h("ls-icon", { key: '186439c2ec1aaf4c28115b127aefa5fba822e0bc', name: "chevron-left" })), h("p", { key: '6fd3361abd38ee35deb8a17c79c760a2ffa756c4' }, this.page, " / ", this.pageCount), h("button", { key: 'f2b8a8b7f01d054f8c8134f1dadfb14d1f7c3029', onClick: () => {
                 this.editor.pageNext();
-            }, disabled: this.page === this.pageCount, id: "next-page-btn", "data-tooltip": this.page === this.pageCount ? 'No Next Page' : 'Next Page' }, h("ls-icon", { key: '2a65e375122b89450e792d511bc6545dd5ec39ec', name: "chevron-right" })))), h("ls-helper-bar", { key: 'aaa36b6e54ddddef3e0e209eab9dafddb5452ccd' }), h("ls-tooltip", { key: '696f9d92a5ed1e8897f469c5d42d7d4be05628e0', id: "ls-tooltip-master" }), h("slot", { key: '06bba8df918ba24b95465ea4abce74ef682fd841' })));
+            }, disabled: this.page === this.pageCount, id: "next-page-btn", "data-tooltip": this.page === this.pageCount ? 'No Next Page' : 'Next Page' }, h("ls-icon", { key: 'fb8afc77276ed238b9e1eb54b89c9b34ee488371', name: "chevron-right" })))), h("ls-helper-bar", { key: '91f843e993768fcccdfad5a7dfc0ea3657a11bb5' }), h("ls-tooltip", { key: '1234000b8e14762eee8ec59474c700b454f8794d', id: "ls-tooltip-master" }), h("slot", { key: '81c53b7c086941ca205bb8991e275a7e270c09d9' })));
     }
-};
-LsStatusbar.style = lsStatusbarCss();
+    static get style() { return lsStatusbarCss(); }
+}, [769, "ls-statusbar", {
+        "zoom": [1026],
+        "page": [1026],
+        "pageCount": [1026, "page-count"],
+        "editor": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-statusbar", "ls-helper-bar", "ls-icon", "ls-keyboard-shortcuts", "ls-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-statusbar":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsStatusbar);
+            }
+            break;
+        case "ls-helper-bar":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-keyboard-shortcuts":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsStatusbar as L, defineCustomElement as d };
+//# sourceMappingURL=p-Bw19bxna.js.map
 
-export { LsStatusbar as ls_statusbar };
-//# sourceMappingURL=ls-statusbar.entry.esm.js.map
+//# sourceMappingURL=p-Bw19bxna.js.map

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

@@ -0,0 +1 @@
+{"file":"p-Bw19bxna.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  gap: 0.5rem;\n  align-items: end;\n  height: 2.25rem;\n  overflow: visible;\n}\n\n.controls-bar {\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.controls-bar > :not(:nth-child(1)) {\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\nbutton:disabled {\n  color: var(--gray-40, #c1c4c8);\n  cursor: not-allowed;\n}\n\ninput[type=\"range\"] {\n  -webkit-appearance: none; /* Remove default styling */\n  width: 100%;\n  height: 0.5rem;\n  background: var(--gray-20, #EDEFF2);\n  border-radius: 0.25rem;\n  outline: none;\n}\n\n/* Chrome, Safari, Edge */\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 0.5rem;\n  height: 0.5rem;\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: 0.5rem;\n  height: 0.5rem;\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: 0.5rem;\n  border-radius: 0.25rem;\n}\n\n/* Track color for Chrome, Safari, Edge */\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  background: var(--gray-20, #EDEFF2);\n  height: 0.5rem;\n  border-radius: 0.25rem;\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: 2.25rem;\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 { attachAllTooltips } from '../../utils/tooltip';\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  @Prop({ mutable: true }) page: number;\n  @Prop({ mutable: true }) pageCount: 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  fitWidth() {\n    const leftBox = this.editor.component.shadowRoot.getElementById('ls-left-box');\n    const midBox = this.editor.component.shadowRoot.getElementById('document-frame-wrapper');\n    const space = midBox.clientWidth - leftBox.clientWidth - 60; // 60 for padding/margin\n\n    \n    console.log('Space width:', space, 'Page width:', this.editor.pageDimensions[0].width);\n    const scale: number = space / this.editor.pageDimensions[0].width;\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  fitHeight() {\n    const space = window.screen.height - 40; // 40 for padding/margin\n    const scale: number = space / this.editor.pageDimensions[0].height;\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n    this.zoom = this.editor.zoom;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'controls-bar'}>\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          <button onClick={() => this.setZoom(this.editor.zoom * 0.8)} id=\"zoom-out-btn\" data-tooltip=\"Zoom Out\">\n            <ls-icon name=\"zoom-out\" />\n          </button>\n          <button onClick={() => this.setZoom(this.editor.zoom / 0.8)} id=\"zoom-in-btn\" data-tooltip=\"Zoom In\">\n            <ls-icon name=\"zoom-in\" />\n          </button>\n        </div>\n        <div class={'status-bar-section'}>\n          <button onClick={() => this.fitWidth()} id=\"fit-width-btn\" data-tooltip=\"Fit Width\">\n            <ls-icon name=\"fit-width\" />\n          </button>\n          <button onClick={() => this.fitHeight()} id=\"fit-height-btn\" data-tooltip=\"Fit Height\">\n            <ls-icon name=\"fit-height\" />\n          </button>\n        </div>\n        <div class={'status-bar-section'} style={this.pageCount === 1 && { display: 'none' }}>\n          <button\n            onClick={() => {\n              this.editor.pagePrev();\n            }}\n            disabled={this.page === 1}\n            id=\"prev-page-btn\"\n            data-tooltip={this.page === 1 ? 'No Previous Page' : 'Previous Page'}\n          >\n            <ls-icon name=\"chevron-left\" />\n          </button>\n          <p>\n            {this.page} / {this.pageCount}\n          </p>\n          <button\n            onClick={() => {\n              this.editor.pageNext();\n            }}\n            disabled={this.page === this.pageCount}\n            id=\"next-page-btn\"\n            data-tooltip={this.page === this.pageCount ? 'No Next Page' : 'Next Page'}\n          >\n            <ls-icon name=\"chevron-right\" />\n          </button>\n        </div>\n        </div>\n        <ls-helper-bar />\n        <ls-tooltip id=\"ls-tooltip-master\" />\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-C6pzA2Lp.js

@@ -0,0 +1,59 @@
+import { t as transformTag, p as proxyCustomElement, H, h } from './p-BhZ5Udbm.js';
+import { c as clsx } from './p-ChV9xqsO.js';
+import { d as defineCustomElement$1 } from './p-DnyBXRV4.js';
+
+const lsRadioInputCss = () => `.radioLabel{display:flex;align-items:center;gap:0.75rem;border-radius:0.5rem;padding:0.5rem 0.75rem}.radioLabel.checked{background-color:var(--primary-10);border-color:var(--primary-20);color:var(--primary-90)}.radioLabel:not(checked){color:var(--gray-90);background-color:var(--gray-10);border:1px solid var(--gray-20)}.radioLabel.checked:hover{border-color:var(--primary-30);color:var(--primary-100)}.radioLabel:not(.checked):not(.disabled):hover{border-color:var(--gray-50);color:var(--gray-100)}.radioLabel:focus:not(.disabled){box-shadow:var(--focus-box-shadow);outline-offset:var(--focus-outline-offset);outline:none}.radioLabel.disabled{cursor:not-allowed}.radioLabel.disabled.checked{background-color:var(--primary-10);color:var(--primary-40);border-color:var(--primary-40)}.radioLabel.disabled:not(.checked){background-color:var(--gray-10);color:var(--gray-60)}.inputClass{margin-top:0px}.inputClass:focus{outline:none}.inputClass:disabled{cursor:not-allowed}.spanContainer{display:flex;gap:0.25rem;align-items:center}`;
+
+const LsRadioInput = /*@__PURE__*/ proxyCustomElement(class LsRadioInput extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    radioId;
+    label;
+    icon;
+    name = 'name';
+    checked = false;
+    disabled = false;
+    customStyle;
+    render() {
+        const { label, radioId, icon, name, disabled, checked, customStyle, } = this;
+        const radioLabelClass = clsx('radioLabel', disabled && 'disabled', checked && 'checked');
+        return (h("label", { key: '31f548698a16eff81e0a2f270e89295b80446677', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, h("input", { key: 'd69ea6c81a54cd9f933c8d3385ffb4e474aa91e4', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), h("div", { key: 'fb893fd4d1df25350afda196ea3cbd6c9f02d435', class: 'spanContainer' }, h("span", { key: '9eaa69b5f8272d09a3c1b68af65e48bff5792493' }, icon && h("ls-icon", { key: '1253b0402ff1b21ce2ccdafbb5ae9a5f28c78c89', name: icon, size: "16" })), h("span", { key: '38e5be64234f87b69cc079440d596a7cbafbccbf' }, label))));
+    }
+    static get style() { return lsRadioInputCss(); }
+}, [768, "ls-radio-input", {
+        "radioId": [1, "radio-id"],
+        "label": [1],
+        "icon": [1],
+        "name": [1],
+        "checked": [4],
+        "disabled": [4],
+        "customStyle": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-radio-input", "ls-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-radio-input":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsRadioInput);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsRadioInput as L, defineCustomElement as d };
+//# sourceMappingURL=p-C6pzA2Lp.js.map
+
+//# sourceMappingURL=p-C6pzA2Lp.js.map

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

@@ -0,0 +1 @@
+{"file":"p-C6pzA2Lp.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,mgCAAmgC,CAAC;;MCSthC,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;AACf,IAAA,OAAO;AACP,IAAA,KAAK;AACL,IAAA,IAAI;IACJ,IAAI,GAAY,MAAM;IACtB,OAAO,GAAY,KAAK;IACxB,QAAQ,GAAa,KAAK;AAC1B,IAAA,WAAW;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,EACJ,KAAK,EACL,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,GAAG,IAAI;AACR,QAAA,MAAM,eAAe,GAAG,IAAI,CAC1B,YAAY,EACZ,QAAQ,IAAI,UAAU,EACtB,OAAO,IAAI,SAAS,CACrB;AAED,QAAA,QACE,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,WAAW,EAAA,EAElB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,YAAY,EAClB,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO,EAChB,CAAA,EACF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,IAAI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAA,CAAY,CAAQ,EAClE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,KAAK,CAAQ,CAChB,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-radio-input/ls-radio-input.css?tag=ls-radio-input","src/components/ls-formfield/inputs/ls-radio-input/ls-radio-input.tsx"],"sourcesContent":[".radioLabel{\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  border-radius: 0.5rem;\n  padding: 0.5rem 0.75rem;\n}\n\n.radioLabel.checked {\n  background-color: var(--primary-10);\n  border-color: var(--primary-20);\n  color: var(--primary-90)\n}\n\n.radioLabel:not(checked) {\n  color: var(--gray-90);\n  background-color: var(--gray-10);\n  border: 1px solid var(--gray-20);\n}\n\n.radioLabel.checked:hover {\n  border-color: var(--primary-30);\n  color: var(--primary-100);\n  \n}\n\n.radioLabel:not(.checked):not(.disabled):hover {\n  border-color: var(--gray-50);\n  color: var(--gray-100);\n}\n\n.radioLabel:focus:not(.disabled) {\n  box-shadow: var(--focus-box-shadow);\n  outline-offset: var(--focus-outline-offset);\n  outline: none;\n}\n\n.radioLabel.disabled {\n  cursor: not-allowed;\n}\n\n.radioLabel.disabled.checked {\n  background-color: var(--primary-10);\n  color: var(--primary-40);\n  border-color: var(--primary-40);\n}\n\n.radioLabel.disabled:not(.checked) {\n  background-color: var(--gray-10);\n  color: var(--gray-60);\n}\n\n.inputClass {\n  margin-top: 0px;\n}\n\n.inputClass:focus {\n  outline: none;\n}\n\n.inputClass:disabled {\n  cursor: not-allowed;\n}\n\n.spanContainer {\n  display: flex;\n  gap: 0.25rem;\n  align-items: center;\n}","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'ls-radio-input',\n  styleUrl: 'ls-radio-input.css',\n  shadow: false,\n})\nexport class LsRadioInput {\n  @Prop() radioId: string;\n  @Prop() label: string;\n  @Prop() icon?: Icon;\n  @Prop() name?: string = 'name';\n  @Prop() checked: boolean = false;\n  @Prop() disabled?: boolean = false;\n  @Prop() customStyle?: { [key: string]: string };\n\n  render() {\n    const {\n      label,\n      radioId,\n      icon,\n      name,\n      disabled,\n      checked,\n      customStyle,\n    } = this;\n    const radioLabelClass = clsx(\n      'radioLabel',\n      disabled && 'disabled',\n      checked && 'checked',\n    );\n\n    return (\n      <label\n        htmlFor={radioId}\n        tabIndex={0}\n        class={radioLabelClass}\n        style={customStyle}\n      >\n        <input\n          type='radio'\n          class='inputClass'\n          id={radioId}\n          name={name}\n          value={label}\n          disabled={disabled}\n          tabIndex={0}\n          checked={checked}\n        />\n        <div class='spanContainer'>\n          <span>{icon && <ls-icon name={icon} size={\"16\"}></ls-icon>}</span>\n          <span>{label}</span>\n        </div>\n      </label>\n    );\n  }\n}\n"],"version":3}

package/dist/{ls-document-viewer/ls-toolbox-field.entry.js → components/p-CI3IFKqK.js}

@@ -1,15 +1,21 @@
-import { r as registerInstance, d as createEvent, e as getElement, h, a as Host } from './index-DANCsk1i.js';
-import { d as defaultRolePalette } from './defaultPalette-CwCWCxsI.js';
-import { a as attachAllTooltips } from './tooltip-Cb8nDMs-.js';
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BhZ5Udbm.js';
+import { d as defaultRolePalette } from './p-BKrsDBDB.js';
+import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
+import { d as defineCustomElement$2 } from './p-DnyBXRV4.js';
+import { d as defineCustomElement$1 } from './p-faUZy676.js';
 
 const lsToolboxFieldCss = () => `.ls-toolbox-field{display:flex;padding:0.5rem;align-items:center;justify-content:center;gap:0.875rem;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:white;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-toolbox-field:hover{background:var(--gray-10, #f7f8fa);box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);border:1px solid var(--gray-30, #e0e2e5)}.warning-box{display:flex;padding:0.38rem;align-items:center;justify-content:center;border-radius:0.625rem;border:1px solid var(--red-40, #fca39a);background:var(--red-10, #fff1f0);color:var(--red-60, #f04438)}.toolbox-field-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;border:1px solid var(--signer-color);background:var(--signer-color-light);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--signer-color)}.toolbox-field-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;width:100%;margin:0}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:2.25rem}.input-wrapper{position:relative;width: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)}`;
 
-const LsToolboxField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const LsToolboxField = /*@__PURE__*/ proxyCustomElement(class LsToolboxField extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
         this.fieldTypeSelected = createEvent(this, "fieldTypeSelected", 7);
     }
-    get component() { return getElement(this); }
+    get component() { return this; }
     /**
      * The field type of this toolbox item, e.g. 'signature'. Note these should always be lowercase.
      */
@@ -76,7 +82,7 @@ const LsToolboxField = class {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: 'b21dee01df8125d6989cf0e4fbbf769a143b7a69', draggable: "true" }, h("div", { key: 'f38a94b95d19ead3b8713e1f3178fbcc2c5f1979', class: 'ls-toolbox-field', style: this.isSelected && {
+        return (h(Host, { key: '56a23ad17846f199f7fcaf850fc2152685b0095b', draggable: "true" }, h("div", { key: '5b003deaf994d5182aa2a219d5eb4249601d556f', class: 'ls-toolbox-field', style: this.isSelected && {
                 background: defaultRolePalette[this.signer % 100].s10,
                 border: `1px solid ${defaultRolePalette[this.signer % 100].s60}`,
                 color: defaultRolePalette[this.signer % 100].s80,
@@ -91,12 +97,51 @@ const LsToolboxField = class {
                     defaultWidth: this.defaultWidth,
                     fixedAspect: this.fixedAspect,
                 });
-            } }, h("div", { key: 'f69d0635cd948971fa193697f685187ab4d884ca', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }, "data-tooltip": this.tooltip, "data-tooltip-placement": "right" }, h("ls-icon", { key: 'a09b50f353fd4a58fe2710677647dab2d7025a19', name: this.icon, size: "1.25rem" })), h("p", { key: '48220b6ef2c99342194ad21d95a499dcba6cf529', class: "toolbox-field-label", style: this.isSelected && {
+            } }, h("div", { key: 'aaf113fbda8b557b7db5ee6b962bf0257a454adb', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }, "data-tooltip": this.tooltip, "data-tooltip-placement": "right" }, h("ls-icon", { key: '3534a75ac1a2ee26035a8349baf25a7d506ce344', name: this.icon, size: "1.25rem" })), h("p", { key: '860aad974239cd7bfeecb6f3f1883a5881be326f', class: "toolbox-field-label", style: this.isSelected && {
                 color: defaultRolePalette[this.signer % 100].s80,
-            } }, this.label), this.redDot && (h("div", { key: 'f40e4ed98e0dd537724325ae781b3eda85262d02', class: 'warning-box', "data-tooltip": `${this.label} Field Required`, "data-tooltip-placement": "left" }, h("ls-icon", { key: 'ce1a6da60b5d4727f26979021fe9819c10c50386', name: "exclamation-circle", size: "1.125rem", solid: true }))), h("ls-icon", { key: '4131d5649555a0c120d6f50cdae30c3e21ff680a', name: "drag-vertical", size: "1rem", color: "#787a80" })), h("ls-tooltip", { key: '980d6848ede0cc6e326ba90508313d5e6e2d5cac', id: "ls-tooltip-master", tooltipText: "Something" })));
+            } }, this.label), this.redDot && (h("div", { key: 'b82b69424a07a70d553c6d6d0d4fef55751f40e7', class: 'warning-box', "data-tooltip": `${this.label} Field Required`, "data-tooltip-placement": "left" }, h("ls-icon", { key: 'a5e92570e44b0bc50ab1c6067a050b61b4ad09e6', name: "exclamation-circle", size: "1.125rem", solid: true }))), h("ls-icon", { key: '4d805b60a614d57e007a4897c13afa793c7181cf', name: "drag-vertical", size: "1rem", color: "#787a80" })), h("ls-tooltip", { key: '5a36f55422ee30658361ad41387c06d38754adb7', id: "ls-tooltip-master", tooltipText: "Something" })));
+    }
+    static get style() { return lsToolboxFieldCss(); }
+}, [769, "ls-toolbox-field", {
+        "formElementType": [1, "form-element-type"],
+        "elementType": [1, "element-type"],
+        "validation": [2],
+        "fixedAspect": [2, "fixed-aspect"],
+        "redDot": [4, "red-dot"],
+        "label": [1],
+        "icon": [1],
+        "tooltip": [1],
+        "defaultHeight": [2, "default-height"],
+        "defaultWidth": [2, "default-width"],
+        "signer": [2],
+        "isSelected": [1028, "is-selected"]
+    }, [[1, "dragstart", "handleDragStart"], [0, "keydown", "handleKeyDown"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
     }
-};
-LsToolboxField.style = lsToolboxFieldCss();
+    const components = ["ls-toolbox-field", "ls-icon", "ls-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-toolbox-field":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsToolboxField);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsToolboxField as L, defineCustomElement as d };
+//# sourceMappingURL=p-CI3IFKqK.js.map
 
-export { LsToolboxField as ls_toolbox_field };
-//# sourceMappingURL=ls-toolbox-field.entry.esm.js.map
+//# sourceMappingURL=p-CI3IFKqK.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CI3IFKqK.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-toolbox-field/ls-toolbox-field.css?tag=ls-toolbox-field&encapsulation=shadow","src/components/ls-toolbox-field/ls-toolbox-field.tsx"],"sourcesContent":[".ls-toolbox-field {\n  display: flex;\n  padding: 0.5rem;\n  align-items: center;\n  justify-content: center;\n  gap: 0.875rem;\n  border-radius: 1rem;\n  border: 1px solid var(--gray-20, #edeff2);\n  background: white;\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\n.ls-toolbox-field:hover {\n  background: var(--gray-10, #f7f8fa);\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  border: 1px solid var(--gray-30, #e0e2e5);\n}\n\n.warning-box {\n  display: flex;\n  padding: 0.38rem;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.625rem;\n  border: 1px solid var(--red-40, #fca39a);\n  background: var(--red-10, #fff1f0);\n  color: var(--red-60, #f04438);\n}\n\n\n\n.toolbox-field-icon {\n  display: flex;\n  padding: 0.5rem;\n  align-items: center;\n  border-radius: 0.5rem;\n  border: 1px solid var(--signer-color);\n  background: var(--signer-color-light);\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(--signer-color);\n}\n\n.toolbox-field-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  width: 100%;\n  margin: 0;\n}\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 2.25rem;\n}\n\n.input-wrapper {\n  position: relative;\n  width: 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","import { Component, Event, Host, Listen, Prop, Element, h, EventEmitter } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-toolbox-field',\n  styleUrl: 'ls-toolbox-field.css',\n  shadow: true,\n})\nexport class LsToolboxField {\n  @Element() component: HTMLElement;\n  /**\n   * The field type of this toolbox item, e.g. 'signature'. Note these should always be lowercase.\n   */\n  @Prop() formElementType: string;\n  @Prop() elementType: string;\n  @Prop() validation: number = 0;\n  @Prop() fixedAspect: number | null = null;\n  @Prop() redDot: boolean = false;\n\n  /**\n   * The text to display for this field type.\n   */\n  @Prop() label: string;\n\n  /**\n   * The icon to display for this field type.\n   */\n  @Prop() icon: Icon;\n  /**\n   * The tooltip hint to describe to the field type\n   */\n  @Prop() tooltip: string;\n\n  /**\n   * The starting height of this control type in pixels.\n   */\n  @Prop() defaultHeight: number;\n  /**\n   * The starting width of this control type in pixels.\n   */\n  @Prop() defaultWidth: number;\n\n  /**\n   * The signer color of the element\n   */\n  @Prop() signer: number = 0;\n\n  @Prop({ mutable: true }) isSelected: boolean = false;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  fieldTypeSelected: EventEmitter<{\n    label: string;\n    elementType: string;\n    defaultHeight: number;\n    defaultWidth: number;\n    formElementType: string;\n    validation: number;\n    fixedAspect: number | null;\n  }>;\n\n  @Listen('dragstart')\n  handleDragStart(event) {\n\n    var canvas = document.createElement('div');\n    canvas.style.position = 'absolute';\n    canvas.style.left = '-100%';\n    canvas.style.zIndex = '-100';\n    canvas.style.height = this.defaultHeight +'px';\n    canvas.style.width = this.defaultWidth +'px';\n    canvas.style.backgroundColor = 'rgba(255, 255, 255, 1)';\n    canvas.style.border = `1px dashed ${defaultRolePalette[this.signer % 100].s60}`;\n    canvas.innerHTML = this.formElementType;\n    document.body.appendChild(canvas); \n\n    event.dataTransfer.setDragImage(canvas, -50, -20);\n\n    // Add the target element's id to the data transfer object\n    event.dataTransfer.setData(\n      'application/json',\n      JSON.stringify({\n        formElementType: this.formElementType,\n        elementType: this.elementType,\n        validation: this.validation,\n        defaultHeight: this.defaultHeight,\n        defaultWidth: this.defaultWidth,\n        fixedAspect: this.fixedAspect,\n      }),\n    );\n    event.dataTransfer.dropEffect = 'copy';\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'ArrowDown') {\n      console.log('down arrow pressed');\n    }\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host draggable=\"true\">\n        <div\n          class={'ls-toolbox-field'}\n          style={\n            this.isSelected && {\n              background: defaultRolePalette[this.signer % 100].s10,\n              border: `1px solid ${defaultRolePalette[this.signer % 100].s60}`,\n              color: defaultRolePalette[this.signer % 100].s80,\n              boxShadow: `0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);`,\n            }\n          }\n          onClick={() => {\n            this.fieldTypeSelected.emit({\n              label: this.label,\n              formElementType: this.formElementType,\n              elementType: this.elementType,\n              validation: this.validation,\n              defaultHeight: this.defaultHeight,\n              defaultWidth: this.defaultWidth,\n              fixedAspect: this.fixedAspect,\n            });\n          }}\n        >\n          <div\n            class=\"toolbox-field-icon\"\n            style={{ '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }}\n            data-tooltip={this.tooltip}\n            data-tooltip-placement=\"right\"\n          >\n            <ls-icon name={this.icon} size=\"1.25rem\" />\n          </div>\n          <p\n            class=\"toolbox-field-label\"\n            style={\n              this.isSelected && {\n                color: defaultRolePalette[this.signer % 100].s80,\n              }\n            }\n          >\n            {this.label}\n          </p>\n          {this.redDot && (\n            <div class={'warning-box'} data-tooltip={`${this.label} Field Required`} data-tooltip-placement=\"left\">\n              <ls-icon name=\"exclamation-circle\" size=\"1.125rem\" solid />\n            </div>\n          )}\n          <ls-icon name=\"drag-vertical\" size=\"1rem\" color=\"#787a80\" />\n        </div>\n        <ls-tooltip id=\"ls-tooltip-master\" tooltipText=\"Something\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}