legalesign-document-viewer 0.3.3 → 0.3.5

package/dist/ls-document-viewer/ls-field-placement.entry.js

@@ -0,0 +1,73 @@
+import { r as registerInstance, a as createEvent, d as getElement, h, e as Host } from './index-Dlkip55O.js';
+import { a as attachAllTooltips } from './tooltip-Cb8nDMs-.js';
+
+const lsFieldPlacementCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:100%}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
+
+const LsFieldPlacement = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.mutate = createEvent(this, "mutate", 7);
+        this.update = createEvent(this, "update", 7);
+    }
+    get component() { return getElement(this); }
+    dataItem;
+    mutate;
+    update;
+    isSingle(dt) {
+        return dt.length === undefined;
+    }
+    isMultiple(dt) {
+        return typeof dt.length === 'number';
+    }
+    getValue(key) {
+        if (this.isMultiple(this.dataItem)) {
+            return "";
+        }
+        else if (this.isSingle(this.dataItem)) {
+            return this.dataItem[key];
+        }
+        return '';
+    }
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    alter(diff) {
+        if (this.isMultiple(this.dataItem)) {
+            const diffs = this.dataItem.map(c => {
+                return { action: 'update', data: { ...c, ...diff } };
+            });
+            this.dataItem = diffs.map(d => d.data);
+            this.mutate.emit(diffs);
+            this.update.emit(diffs);
+        }
+        else {
+            const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } };
+            this.dataItem = singleDiff.data;
+            this.mutate.emit([singleDiff]);
+            this.update.emit([singleDiff]);
+        }
+    }
+    center() {
+        return this.dataItem[0].pageDimensions[this.dataItem[0].page].width / 2 - this.dataItem[0].width / 2;
+    }
+    right() {
+        return this.dataItem[0].pageDimensions[this.dataItem[0].page].width - this.dataItem[0].width;
+    }
+    middle() {
+        return this.dataItem[0].pageDimensions[this.dataItem[0].page].height / 2 - this.dataItem[0].height / 2;
+    }
+    bottom() {
+        return this.dataItem[0].pageDimensions[this.dataItem[0].page].height - this.dataItem[0].height;
+    }
+    componentDidLoad() {
+        attachAllTooltips(this.component.shadowRoot);
+    }
+    render() {
+        return (h(Host, { key: 'c8ac0de3abde2b5797d97cf1c803c3ddb16f5905' }, this.isMultiple(this.dataItem) && (h("div", { key: '2492bcb70ee58377dfe59cfc735e5b1ae0258bbd', class: 'ls-field-properties-section' }, h("div", { key: 'cefb557578d454166fe97162e008404aa6f47499', class: 'ls-field-properties-section-text' }, h("p", { key: '36dc7b88321b7f907829fe56c0fe7b38e4f99bae', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '59cc27cb55fd67702fe54ca791379b9d6047e4dc', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '5f4dfa651a236d6b2e8aebf3e13d395a2a88482c', class: 'input-row' }, h("div", { key: '3f883fdd92c611b5ad8ea3098f418a3fb783be5d', class: 'input-wrapper' }, h("ls-icon", { key: '1399c67f1d60b96426f12acddeeeae6cf8d636bc', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: '28e4e7c666c24b121a2ee42d6a5ecf76ea83c2fb', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: 'ef348a5c8742a9f22f6a4c9dc5b15d5401d1de61', class: 'input-wrapper' }, h("ls-icon", { key: '24a9dd57b77923063cef16ebbb5fcef688536d3b', id: "selectLeadingIcon", name: "y" }), h("input", { key: '445156b7d15e8185c6590b6c0b2aac0d0513ffc6', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", onChange: e => this.alter({ top: e.target.value }) }))))), this.isSingle(this.dataItem) && (h("div", { key: 'a61084c461059e5940e86696ad1fcb3ec09af4bc', class: 'field-set' }, h("div", { key: 'cfe980765cfa9d21705c1b754834b2798ed8fa77', class: 'ls-field-properties-section' }, h("div", { key: '72edd03712eb9d1cac518e11901b77a92e849024', class: 'ls-field-properties-section-text' }, h("p", { key: '90cb8830f9a2a0b4b3533087112aedbde58f3e1b', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: '825eb123b6236cf45bf37ad5d027228525cdad29', class: 'ls-field-properties-section-description' }, "Align your Fields relative to the page or multi-select and align then to each other.")), h("div", { key: '6d54b302592f6524436fbf845aefc1e4591d6d07', class: 'multi-button-group-row' }, h("div", { key: 'affb7fce5b8e0efb2040863284ccd2c7561c76a5', class: 'button-group' }, h("button", { key: '362fb269626e803313d7d7a059d973330abdd7e8', onClick: () => { this.alter({ left: 0 }); }, "data-tooltip": "Align Left" }, h("ls-icon", { key: 'fe6c901683a4668df36ac6c8c55b74e8fce00b9b', name: "field-alignment-left" })), h("button", { key: 'bc96daa40d12850d89faf3e91076c8bfdf2dc7de', onClick: () => { this.alter({ left: this.center() }); }, "data-tooltip": "Align Center" }, h("ls-icon", { key: '6387810ea21635352c276b94d5788729b0b4a375', name: "field-alignment-centre" })), h("button", { key: '7ffeae492a0926c9ffb28529aba861d6ac721095', onClick: () => { this.alter({ left: this.right() }); }, "data-tooltip": "Align Right" }, h("ls-icon", { key: '1272affb2a6bd52aa46515354d0ea8853061208e', name: "field-alignment-right" }))), h("div", { key: 'abcf124c0f09d18f414522743ca002bcaef09758', class: 'button-group' }, h("button", { key: '078a56ad5e74d7f03fc31815c0edd02b923fa6ef', onClick: () => this.alter({ top: 0 }), "data-tooltip": "Align Top" }, h("ls-icon", { key: '9c4ef19483e3a77e860fa1ebb1bce7c96c684f61', name: "field-alignment-top" })), h("button", { key: '2692a96701ca7fd1b9bd8a05224b94566688698c', onClick: () => { this.alter({ top: this.middle() }); }, "data-tooltip": "Align Middle" }, h("ls-icon", { key: '6d66b4972d912702079731ff42a78aa2d146a016', name: "field-alignment-middle" })), h("button", { key: 'da129c6f66ab968eb562a51023d866e0ef68bc85', onClick: () => { this.alter({ top: this.bottom() }); }, "data-tooltip": "Align Bottom" }, h("ls-icon", { key: 'e22f3692ffb1bb5ab8375d98c60d17492c16adc0', name: "field-alignment-bottom" }))))), h("div", { key: 'bca7816bd623edc2f26218d5f6f9357859934397', class: 'ls-field-properties-section' }, h("div", { key: 'dca79a17807d72ebb3f22752b8ba4fe6ea8f9df2', class: 'ls-field-properties-section-text' }, h("p", { key: '582721dc2146c7ff923a7d2c8532069fa64701ab', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '521a5444bb3d52ee258eacb6c40b4fffe2a643f5', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: 'e2671bfd7e7e18f2b67ab0efc28d33e50e8c552b', class: 'input-row' }, h("div", { key: '33a08ef5b6ec8f4a0b242e5bbbe58808f8247284', class: 'input-wrapper' }, h("ls-icon", { key: 'b3bbd950f6f318b7b430c8b3cd5aa6d95c10f702', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: 'b32ad699c18530082106f14ef20668340d321ab1', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: '0e7855a5ea873ab0a1bec202f76663eb86d4f98c', class: 'input-wrapper' }, h("ls-icon", { key: 'a5d016d0cfca8b1691ec3893346ec4fefb96eb27', id: "selectLeadingIcon", name: "y" }), h("input", { key: '069f5d9eac73c79b92e62b24a546f7d3769f187d', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }), width: "30" })))), h("div", { key: '12cf02a4c217dfedb82b08d225365c92192162e1', class: 'ls-field-properties-section' }, h("div", { key: '4acbc8e2e872af69db93cd9b257e2ede722ba506', class: 'ls-field-properties-section-text' }, h("p", { key: '05c7a07939e007143906e7e69073bf0f36b64466', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: '601fe192f4fca28adfa789372c9b4bcd345d966c', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '4e11aa0c7978cf562b87479cb5c8e5f74c4d9532', class: 'button-group' }, h("button", { key: '4b162f51a88f9a7a498bb1ea0e0a08f9988336d3', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, h("ls-icon", { key: '808011c83b8d626baf06e2c04400440bc2ad0fd1', name: "field-distribute-vertically" })), h("button", { key: 'a219336a192e604962410f658f27012e2d178d47', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, h("ls-icon", { key: '193536fbe8c57f399b1156188774777f7d74f751', name: "field-distribute-horizontally" })))), h("div", { key: '7d60cab558d454384a57b06e120a1e1295e6435c', class: 'ls-field-properties-section' }, h("div", { key: '6b6e857b0c3e8f1bee620643f885471283caf619', class: 'ls-field-properties-section-text' }, h("p", { key: 'c8b2fda8221aef05fee08b60f3a5af0277de9d5e', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: 'ad47abf15ac0672a0f42b20c689af12fd5aba72d', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '6a48b8e4ed6fb7449ee93c825ce857383897ff6b', class: 'input-row' }, h("div", { key: 'fe020c2d41684dc79aefd3bdb89eaa4057c41c5f', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, h("ls-icon", { key: 'f4f9d9fd17fb4a779d8e3788729bb65c8991cec4', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), h("input", { key: '413fdb0d3799ed30cca6c3d521bedc7026324ac2', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), h("div", { key: 'acbec0ee03f1f5928645dcd253564c72629d4c07', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, h("ls-icon", { key: 'a13cb92c0df97dba9fa7698e97feb35255c8d3bc', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), h("input", { key: '75f0283e83b3211c0e37d8c88efc9bb3d49dd86f', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true })))))), h("ls-tooltip", { key: 'fb37a0cf81799b5c0cc9b1f676a244ff49ae016d', id: "ls-tooltip-master" })));
+    }
+};
+LsFieldPlacement.style = lsFieldPlacementCss;
+
+export { LsFieldPlacement as ls_field_placement };
+//# sourceMappingURL=ls-field-placement.entry.esm.js.map
+
+//# sourceMappingURL=ls-field-placement.entry.js.map

package/dist/ls-document-viewer/ls-field-placement.entry.js.map

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

package/dist/ls-document-viewer/ls-field-properties-advanced.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-properties-advanced.entry.esm.js","sources":["src/components/ls-field-properties-advanced/ls-field-properties-advanced.css?tag=ls-field-properties-advanced&encapsulation=shadow","src/components/ls-field-properties-advanced/ls-field-properties-advanced.tsx"],"sourcesContent":[":host, .field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  position: relative;\n}\n\n* {\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.expand-fields-row {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.25rem;\n  cursor: pointer;\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.expand-fields-row p {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem; /* 150% */\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n.ls-field-properties-section {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.row {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.multi-button-group-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ls-field-properties-section-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n  color: var(--gray-90, #5e6066);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n  overflow: hidden;\n  color: var(--gray-80, #6c6e73);\n  text-overflow: ellipsis;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 0.75rem; /* 120% */\n}\n\n.input-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.input-row .input-wrapper input {\n  width: 9.313rem;\n  max-width: 9.313rem;\n}\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n}\n\n.input-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIconDisabled {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-50, #d8d9dc);\n}\n\n\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus:not(:disabled),\nselect:focus:not(:disabled),\ntextarea:focus:not(:disabled) {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active:not(:disabled),\nselect:active:not(:disabled),\ntextarea:active:not(:disabled) {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n  color: var(--gray-50, #d8d9dc);\n  box-shadow: none;\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n  width: 100%;\n}\n\n.button-group button {\n  display: flex;\n  width: 100%;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:disabled {\n  background: var(--gray-10, #f7f8fa);\n  cursor: not-allowed;\n  color: var(--gray-50, #d8d9dc);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\n\n@Component({\n  tag: 'ls-field-properties-advanced',\n  styleUrl: 'ls-field-properties-advanced.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesAdvanced {\n  @Prop({ mutable: true }) dataItem: LSApiElement | LSApiElement[];\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n    return (dt as LSApiElement[]).length === undefined;\n  }\n\n  isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n    return typeof (dt as LSApiElement[]).length === 'number';\n  }\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object, bounceDelay: number = 0) {\n    console.log('Altering advanced props:', diff);\n    let diffs = [];\n    if (this.isMultiple(this.dataItem)) {\n      this.dataItem = this.dataItem.map(di => {\n        return { ...di, ...diff } as LSApiElement;\n      });\n\n      diffs = this.dataItem.map(di => {\n        return { action: 'update', data: { ...di, ...diff } as LSApiElement } as LSMutateEvent;\n      });\n    } else if (this.isSingle(this.dataItem)) {\n      this.dataItem = { ...this.dataItem, ...diff };\n\n      diffs = [{ action: 'update', data: { ...this.dataItem, ...diff } }];\n    }\n\n    if (bounceDelay === 0) {\n      this.update.emit(diffs);\n      this.mutate.emit(diffs);\n    }\n    else {\n      this.debounce(diffs, bounceDelay);\n    }\n  }\n\n  private titletimer;\n\n  debounce(diffs, delay) {\n    if (this.titletimer) clearTimeout(this.titletimer);\n\n    this.titletimer = setTimeout(() => {\n      this.update.emit(diffs);\n      this.mutate.emit(diffs);\n    }, delay);\n  }\n\n  getValue(key) {\n    if (this.isMultiple(this.dataItem)) {\n      return '';\n    } else if (this.isSingle(this.dataItem)) {\n      return this.dataItem[key];\n    }\n    return '';\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'expand-fields-row'} onClick={() => (this.expanded = !this.expanded)}>\n          <ls-icon name={this.expanded ? 'expand' : 'collapse'} size=\"20\" solid />\n          <p>Advanced Properties</p>\n        </div>\n        {this.expanded && (\n          <div class={'field-set'}>\n            <ls-props-section sectionTitle=\"Field Order\" sectionDescription=\"Determines what order fields will be filled in by the user\">\n              <input value={this.getValue('fieldOrder')} type=\"number\" placeholder=\"eg. 1\" onInput={e => {\n                console.log(e);\n                this.alter({ fieldOrder: (e.target as HTMLInputElement).value }, 100)\n              }} \n              onChange={() => { console.log('onchange')}}\n              />\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Ref. Name\">\n              <input value={this.getValue('link')} placeholder=\"eg. checkbox group\" onInput={e => this.alter({ link: (e.target as HTMLInputElement).value }, 300)} />\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Link Type\" sectionDescription=\"Determines  in what way this field is linked to other fields\">\n              <select onChange={e => this.alter({ linkType: (e.target as HTMLInputElement).value })} name=\"Link Field\" aria-label=\"Link Field\">\n                <option value=\"0\" selected={this.getValue('linkType') === '0'}>\n                  None\n                </option>\n                <option value=\"1\" selected={this.getValue('linkType') === '1'}>\n                  One of a group (e.g. select one checkbox)\n                </option>\n                <option value=\"2\" selected={this.getValue('linkType') === '2'}>\n                  Add to a total\n                </option>\n                <option value=\"3\" selected={this.getValue('linkType') === '3'}>\n                  Make this conditional upon...\n                </option>\n              </select>\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Link Value\" sectionDescription=\"Fields with the same Link Value will be linked together\">\n              <input\n                value={this.getValue('logicAction')}\n                width=\"30\"\n                placeholder=\"eg. checkbox group\"\n                onChange={e => this.alter({ logicAction: (e.target as HTMLInputElement).value })}\n              />\n            </ls-props-section>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/{components/p-CzySwvIU.js → ls-document-viewer/ls-field-properties-advanced.entry.js}

@@ -1,16 +1,12 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BvHSBTD8.js';
-import { d as defineCustomElement$2 } from './p-DM3pnD5z.js';
-import { d as defineCustomElement$1 } from './p-BLUUNyDx.js';
+import { r as registerInstance, a as createEvent, h, e as Host } from './index-Dlkip55O.js';
 
 const lsFieldPropertiesAdvancedCss = ":host,.field-set{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.expand-fields-row{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.25rem;cursor:pointer;color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.expand-fields-row p{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem;}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:100%}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 
-const LsFieldPropertiesAdvanced = /*@__PURE__*/ proxyCustomElement(class LsFieldPropertiesAdvanced extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.mutate = createEvent(this, "mutate");
-        this.update = createEvent(this, "update");
+const LsFieldPropertiesAdvanced = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.mutate = createEvent(this, "mutate", 7);
+        this.update = createEvent(this, "update", 7);
     }
     dataItem;
     expanded = false;
@@ -67,42 +63,15 @@ const LsFieldPropertiesAdvanced = /*@__PURE__*/ proxyCustomElement(class LsField
         return '';
     }
     render() {
-        return (h(Host, { key: 'b41038d099fa8bfead03ceb60f847a5ccd709ca7' }, h("div", { key: 'f445b43700361da1e2c24f48a4fe5e75d970496f', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, h("ls-icon", { key: 'e971c83d54da07adb10c054d18771571039afb57', name: this.expanded ? 'expand' : 'collapse', size: "20", solid: true }), h("p", { key: '9964a2e018d92ed41f3c2582496e3d6a3e3ef1ae' }, "Advanced Properties")), this.expanded && (h("div", { key: '1082b8d65cd9a8d7b534057d950934c8220aaee7', class: 'field-set' }, h("ls-props-section", { key: 'b87b473dd3b58d970fe99c31023183cda2c3c812', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, h("input", { key: '65a71d05074ba7f81efa37c501f3ec896b808ea7', value: this.getValue('fieldOrder'), type: "number", placeholder: "eg. 1", onInput: e => {
+        return (h(Host, { key: '7c50880c6ec5827dee4d09fab25d45856d4f5f57' }, h("div", { key: '6cdd722c240e951592687ef1d4f4615755ac5189', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, h("ls-icon", { key: '7956e5f6408a80e21015dc36b903f27a9118f323', name: this.expanded ? 'expand' : 'collapse', size: "20", solid: true }), h("p", { key: '8b6e7b68e5e14cdb5c5a499a0457bf34c6d9f10f' }, "Advanced Properties")), this.expanded && (h("div", { key: 'ae29569878da340c143831d91c16a8ca7314f64e', class: 'field-set' }, h("ls-props-section", { key: '21a4bf125e46ef39a75e0f44f7fe6a4c21bdaa83', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, h("input", { key: '76235fda14840605fa3aa672904cd35eebb85174', value: this.getValue('fieldOrder'), type: "number", placeholder: "eg. 1", onInput: e => {
                 console.log(e);
                 this.alter({ fieldOrder: e.target.value }, 100);
-            }, onChange: () => { console.log('onchange'); } })), h("ls-props-section", { key: '7cb8a2f4b7f52654ab545973f47bb1817f029d42', sectionTitle: "Ref. Name" }, h("input", { key: 'c78bc57e27a15cca0ca3f5882cbb026c664b4367', value: this.getValue('link'), placeholder: "eg. checkbox group", onInput: e => this.alter({ link: e.target.value }, 300) })), h("ls-props-section", { key: '77ade8f9d070dc35cf4967b09e57d886b6330549', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, h("select", { key: '538ffba753725e206b29cbba37cc31798a8aed43', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, h("option", { key: '4e91e476d038bd2c36cd32d7d2aefe81bba5c5be', value: "0", selected: this.getValue('linkType') === '0' }, "None"), h("option", { key: '41960a580f6776a8d7b3cadf21c2fe94487389cf', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), h("option", { key: '23a0a2b5f6e081247e4d816aa3e506baa570d242', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), h("option", { key: 'f9e20adc34266415b8851ee63b774b7e6bf7d3b5', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), h("ls-props-section", { key: 'd4656287b628b8c6cdfcc11e1edef07b328ca5ee', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, h("input", { key: 'ec571add5025c9767d738f84d9033492279472d6', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
+            }, onChange: () => { console.log('onchange'); } })), h("ls-props-section", { key: 'b108c0f535cca25328e3549719d127728b914c06', sectionTitle: "Ref. Name" }, h("input", { key: '315d833f97fe85ac079df30e08284393e556d080', value: this.getValue('link'), placeholder: "eg. checkbox group", onInput: e => this.alter({ link: e.target.value }, 300) })), h("ls-props-section", { key: '0d43bb69c12676829b57c7b2c7035c9000dff596', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, h("select", { key: '76c68d5f3aaee4da48c0ca8162ee90163e4fe68b', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, h("option", { key: '202f8824b85c402dc37a83e9c49fc79ef54c572c', value: "0", selected: this.getValue('linkType') === '0' }, "None"), h("option", { key: '3772c9177caf5813b1b649590df433a58efb4083', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), h("option", { key: '2ea68ede658edfeff82c3bb78c4ebf3c5c6b4e1f', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), h("option", { key: '7779fba87512866cd06342f169a99cb8d200e4cf', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), h("ls-props-section", { key: 'f2484703cb7beefa15f11e0eacbb31a14e07f8f4', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, h("input", { key: '81375fce9416c1ccbde385999f4692a394a361b7', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
     }
-    static get style() { return lsFieldPropertiesAdvancedCss; }
-}, [257, "ls-field-properties-advanced", {
-        "dataItem": [1040, "data-item"],
-        "expanded": [1028]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ls-field-properties-advanced", "ls-icon", "ls-props-section"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ls-field-properties-advanced":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsFieldPropertiesAdvanced);
-            }
-            break;
-        case "ls-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "ls-props-section":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
+};
+LsFieldPropertiesAdvanced.style = lsFieldPropertiesAdvancedCss;
 
-export { LsFieldPropertiesAdvanced as L, defineCustomElement as d };
-//# sourceMappingURL=p-CzySwvIU.js.map
+export { LsFieldPropertiesAdvanced as ls_field_properties_advanced };
+//# sourceMappingURL=ls-field-properties-advanced.entry.esm.js.map
 
-//# sourceMappingURL=p-CzySwvIU.js.map
+//# sourceMappingURL=ls-field-properties-advanced.entry.js.map

package/dist/ls-document-viewer/ls-field-properties-advanced.entry.js.map

@@ -0,0 +1 @@
+{"file":"ls-field-properties-advanced.entry.esm.js","mappings":"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","names":[],"sources":["src/components/ls-field-properties-advanced/ls-field-properties-advanced.css?tag=ls-field-properties-advanced&encapsulation=shadow","src/components/ls-field-properties-advanced/ls-field-properties-advanced.tsx"],"sourcesContent":[":host, .field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  position: relative;\n}\n\n* {\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.expand-fields-row {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.25rem;\n  cursor: pointer;\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.expand-fields-row p {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem; /* 150% */\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n.ls-field-properties-section {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.row {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.multi-button-group-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ls-field-properties-section-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n  color: var(--gray-90, #5e6066);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n  overflow: hidden;\n  color: var(--gray-80, #6c6e73);\n  text-overflow: ellipsis;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 0.75rem; /* 120% */\n}\n\n.input-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.input-row .input-wrapper input {\n  width: 9.313rem;\n  max-width: 9.313rem;\n}\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n}\n\n.input-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIconDisabled {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-50, #d8d9dc);\n}\n\n\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus:not(:disabled),\nselect:focus:not(:disabled),\ntextarea:focus:not(:disabled) {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active:not(:disabled),\nselect:active:not(:disabled),\ntextarea:active:not(:disabled) {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n  color: var(--gray-50, #d8d9dc);\n  box-shadow: none;\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n  width: 100%;\n}\n\n.button-group button {\n  display: flex;\n  width: 100%;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:disabled {\n  background: var(--gray-10, #f7f8fa);\n  cursor: not-allowed;\n  color: var(--gray-50, #d8d9dc);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\n\n@Component({\n  tag: 'ls-field-properties-advanced',\n  styleUrl: 'ls-field-properties-advanced.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesAdvanced {\n  @Prop({ mutable: true }) dataItem: LSApiElement | LSApiElement[];\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n    return (dt as LSApiElement[]).length === undefined;\n  }\n\n  isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n    return typeof (dt as LSApiElement[]).length === 'number';\n  }\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object, bounceDelay: number = 0) {\n    console.log('Altering advanced props:', diff);\n    let diffs = [];\n    if (this.isMultiple(this.dataItem)) {\n      this.dataItem = this.dataItem.map(di => {\n        return { ...di, ...diff } as LSApiElement;\n      });\n\n      diffs = this.dataItem.map(di => {\n        return { action: 'update', data: { ...di, ...diff } as LSApiElement } as LSMutateEvent;\n      });\n    } else if (this.isSingle(this.dataItem)) {\n      this.dataItem = { ...this.dataItem, ...diff };\n\n      diffs = [{ action: 'update', data: { ...this.dataItem, ...diff } }];\n    }\n\n    if (bounceDelay === 0) {\n      this.update.emit(diffs);\n      this.mutate.emit(diffs);\n    }\n    else {\n      this.debounce(diffs, bounceDelay);\n    }\n  }\n\n  private titletimer;\n\n  debounce(diffs, delay) {\n    if (this.titletimer) clearTimeout(this.titletimer);\n\n    this.titletimer = setTimeout(() => {\n      this.update.emit(diffs);\n      this.mutate.emit(diffs);\n    }, delay);\n  }\n\n  getValue(key) {\n    if (this.isMultiple(this.dataItem)) {\n      return '';\n    } else if (this.isSingle(this.dataItem)) {\n      return this.dataItem[key];\n    }\n    return '';\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'expand-fields-row'} onClick={() => (this.expanded = !this.expanded)}>\n          <ls-icon name={this.expanded ? 'expand' : 'collapse'} size=\"20\" solid />\n          <p>Advanced Properties</p>\n        </div>\n        {this.expanded && (\n          <div class={'field-set'}>\n            <ls-props-section sectionTitle=\"Field Order\" sectionDescription=\"Determines what order fields will be filled in by the user\">\n              <input value={this.getValue('fieldOrder')} type=\"number\" placeholder=\"eg. 1\" onInput={e => {\n                console.log(e);\n                this.alter({ fieldOrder: (e.target as HTMLInputElement).value }, 100)\n              }} \n              onChange={() => { console.log('onchange')}}\n              />\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Ref. Name\">\n              <input value={this.getValue('link')} placeholder=\"eg. checkbox group\" onInput={e => this.alter({ link: (e.target as HTMLInputElement).value }, 300)} />\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Link Type\" sectionDescription=\"Determines  in what way this field is linked to other fields\">\n              <select onChange={e => this.alter({ linkType: (e.target as HTMLInputElement).value })} name=\"Link Field\" aria-label=\"Link Field\">\n                <option value=\"0\" selected={this.getValue('linkType') === '0'}>\n                  None\n                </option>\n                <option value=\"1\" selected={this.getValue('linkType') === '1'}>\n                  One of a group (e.g. select one checkbox)\n                </option>\n                <option value=\"2\" selected={this.getValue('linkType') === '2'}>\n                  Add to a total\n                </option>\n                <option value=\"3\" selected={this.getValue('linkType') === '3'}>\n                  Make this conditional upon...\n                </option>\n              </select>\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Link Value\" sectionDescription=\"Fields with the same Link Value will be linked together\">\n              <input\n                value={this.getValue('logicAction')}\n                width=\"30\"\n                placeholder=\"eg. checkbox group\"\n                onChange={e => this.alter({ logicAction: (e.target as HTMLInputElement).value })}\n              />\n            </ls-props-section>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/ls-document-viewer/ls-field-properties-autosign.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-properties-autosign.entry.esm.js","sources":["src/components/ls-field-properties-autosign/ls-field-properties-autosign.css?tag=ls-field-properties-autosign&encapsulation=shadow","src/components/ls-field-properties-autosign/ls-field-properties-autosign.tsx"],"sourcesContent":[":host {\n  display: block;\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\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-autosign',\n  styleUrl: 'ls-field-properties-autosign.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesAutosign {\n  @Prop() dataItem: LSApiElement;\n \n   render() {\n     return (\n       <Host>\n         <div class={\"ls-field-properties-section\"}>Self Sign Field</div>\n         <div>Label: <input value={this.dataItem?.label} width=\"30\"/></div>\n         <ls-field-dimensions dataItem={this.dataItem} />\n         <ls-field-properties-advanced dataItem={this.dataItem} />\n\n          <ls-field-footer dataItem={this.dataItem} />\n         <slot></slot>\n       </Host>\n     );\n   }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,4BAA4B,GAAG,61IAA61I;;MCQr3I,yBAAyB,GAAA,MAAA;;;;AAC5B,IAAA,QAAQ;IAEf,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,6BAA6B,EAAuB,EAAA,iBAAA,CAAA,EAChE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAY,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,EAAA,CAAE,CAAM,EAClE,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAChD,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAExD,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC7C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/{components/p-14owczyX.js → ls-document-viewer/ls-field-properties-autosign.entry.js}

@@ -1,67 +1,19 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-BvHSBTD8.js';
-import { d as defineCustomElement$5 } from './p-Bxutt9rC.js';
-import { d as defineCustomElement$4 } from './p-B3lY01RV.js';
-import { d as defineCustomElement$3 } from './p-CzySwvIU.js';
-import { d as defineCustomElement$2 } from './p-DM3pnD5z.js';
-import { d as defineCustomElement$1 } from './p-BLUUNyDx.js';
+import { r as registerInstance, h, e as Host } from './index-Dlkip55O.js';
 
 const lsFieldPropertiesAutosignCss = ":host{display:block}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)}";
 
-const LsFieldPropertiesAutosign = /*@__PURE__*/ proxyCustomElement(class LsFieldPropertiesAutosign extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
+const LsFieldPropertiesAutosign = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
     }
     dataItem;
     render() {
-        return (h(Host, { key: 'df46931c369890f5abf0d25bd9fa8a8ad85ad68c' }, h("div", { key: '2f0d8d99305c136efd368327b8fd333435f068dd', class: "ls-field-properties-section" }, "Self Sign Field"), h("div", { key: 'bd70079d45b70bd3a2c18a148507757bee9f5973' }, "Label: ", h("input", { key: '108a5cc6158af4cb6a37c8f5678039bb354ec591', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '3952b6ca0af4d444243f3c1d821ff72b74ad0100', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: '95df9502c26ca62a8ad46f946742c84555e9c40a', dataItem: this.dataItem }), h("ls-field-footer", { key: '8394977015e41a56d4896d6810e96c4df13c2ae2', dataItem: this.dataItem }), h("slot", { key: 'c6974754a07f99372795a71d9ec370bcbd345a08' })));
+        return (h(Host, { key: '106baf6078e7e3fbfa113671ea875bfb0e7dc8f6' }, h("div", { key: 'b9921a07cc1d20d8c9578047c2e50f45c278447c', class: "ls-field-properties-section" }, "Self Sign Field"), h("div", { key: '1660ad7c808cb752968747bad6e38e962cc0f2be' }, "Label: ", h("input", { key: '394e6a663c8de52d332c247883d8948dce07d31b', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '4bd5749daead65ff9adc83d10ae9b0d54e461a75', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: 'bf6097eba469cddaa68744471134724ea4e0f0ab', dataItem: this.dataItem }), h("ls-field-footer", { key: '117a7ec610671b4eac29cbfc165ecf2bac6996fe', dataItem: this.dataItem }), h("slot", { key: '05c5ca8763e0f049320bb409866c7af1bb2c49d1' })));
     }
-    static get style() { return lsFieldPropertiesAutosignCss; }
-}, [257, "ls-field-properties-autosign", {
-        "dataItem": [16, "data-item"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ls-field-properties-autosign", "ls-field-dimensions", "ls-field-footer", "ls-field-properties-advanced", "ls-icon", "ls-props-section"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ls-field-properties-autosign":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsFieldPropertiesAutosign);
-            }
-            break;
-        case "ls-field-dimensions":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "ls-field-footer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "ls-field-properties-advanced":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "ls-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "ls-props-section":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
+};
+LsFieldPropertiesAutosign.style = lsFieldPropertiesAutosignCss;
 
-export { LsFieldPropertiesAutosign as L, defineCustomElement as d };
-//# sourceMappingURL=p-14owczyX.js.map
+export { LsFieldPropertiesAutosign as ls_field_properties_autosign };
+//# sourceMappingURL=ls-field-properties-autosign.entry.esm.js.map
 
-//# sourceMappingURL=p-14owczyX.js.map
+//# sourceMappingURL=ls-field-properties-autosign.entry.js.map

package/dist/ls-document-viewer/ls-field-properties-autosign.entry.js.map

@@ -0,0 +1 @@
+{"file":"ls-field-properties-autosign.entry.esm.js","mappings":";;AAAA,MAAM,4BAA4B,GAAG,61IAA61I;;MCQr3I,yBAAyB,GAAA,MAAA;;;;AAC5B,IAAA,QAAQ;IAEf,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,6BAA6B,EAAuB,EAAA,iBAAA,CAAA,EAChE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAY,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,EAAA,CAAE,CAAM,EAClE,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAChD,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAExD,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC7C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;","names":[],"sources":["src/components/ls-field-properties-autosign/ls-field-properties-autosign.css?tag=ls-field-properties-autosign&encapsulation=shadow","src/components/ls-field-properties-autosign/ls-field-properties-autosign.tsx"],"sourcesContent":[":host {\n  display: block;\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\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-autosign',\n  styleUrl: 'ls-field-properties-autosign.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesAutosign {\n  @Prop() dataItem: LSApiElement;\n \n   render() {\n     return (\n       <Host>\n         <div class={\"ls-field-properties-section\"}>Self Sign Field</div>\n         <div>Label: <input value={this.dataItem?.label} width=\"30\"/></div>\n         <ls-field-dimensions dataItem={this.dataItem} />\n         <ls-field-properties-advanced dataItem={this.dataItem} />\n\n          <ls-field-footer dataItem={this.dataItem} />\n         <slot></slot>\n       </Host>\n     );\n   }\n}\n"],"version":3}

package/dist/ls-document-viewer/ls-field-properties-container.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-properties-container.entry.esm.js","sources":["src/components/ls-field-properties-container/ls-field-properties-container.css?tag=ls-field-properties-container&encapsulation=shadow","src/components/ls-field-properties-container/ls-field-properties-container.tsx"],"sourcesContent":["* {\n  margin: 0;\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  height: calc(100% - 7.25rem);\n  position: relative;\n}\n\n.tabs-container {\n  display: grid;\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  text-transform: capitalize;\n}\n\n.ls-tab.active {\n  background: var(--primary-10, #eff4ff);\n  color: var(--primary-60, #4456f6);\n}\n\n.ls-tab:not(.active):hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-footer {\n  display: flex;\n  padding-top: 1rem;\n  border-top: 1px solid var(--gray-20, #f0f1f2);\n  flex-direction: column;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  margin-top: auto;\n}\n\n.scrolling-container {\n  overflow-y: auto;\n  padding: 0 1rem;\n  margin: 0 -1rem;\n  height: 100%;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-container',\n  styleUrl: 'ls-field-properties-container.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesContainer {\n  @Prop() dataItem: LSApiElement;\n  @Prop() tabs: string[] = [];\n  @Prop({ mutable: true, reflect: true}) selectedTab: string;\n\n  componentWillLoad() {\n    if (!this.selectedTab) {\n      this.selectedTab = this.tabs[0] || '';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.tabs.length > 1 && (\n          <div class={'tabs-container'} style={{ gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` }}>\n            {this.tabs.map(tab => (\n              <button class={tab === this.selectedTab ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.selectedTab = tab)}>\n                {tab}\n              </button>\n            ))}\n          </div>\n        )}\n        <div class={'scrolling-container'}>\n          <slot name={this.selectedTab}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,6BAA6B,GAAG,27BAA27B;;MCQp9B,0BAA0B,GAAA,MAAA;;;;AAC7B,IAAA,QAAQ;IACR,IAAI,GAAa,EAAE;AACY,IAAA,WAAW;IAElD,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE;;;IAIzC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,KACnB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAU,OAAA,EAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAQ,MAAA,CAAA,EAAE,EAC7F,EAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAChB,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC,WAAW,GAAG,eAAe,GAAG,QAAQ,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,IAC1G,GAAG,CACG,CACV,CAAC,CACE,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,qBAAqB,EAAA,EAC/B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,WAAW,EAAS,CAAA,CACjC,CACD;;;;;;;"}

package/dist/ls-document-viewer/ls-field-properties-container.entry.js

@@ -0,0 +1,26 @@
+import { r as registerInstance, h, e as Host } from './index-Dlkip55O.js';
+
+const lsFieldPropertiesContainerCss = "*{margin:0;box-sizing:border-box}:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:calc(100% - 7.25rem);position:relative}.tabs-container{display:grid;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);text-transform:capitalize}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:100%}";
+
+const LsFieldPropertiesContainer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    dataItem;
+    tabs = [];
+    selectedTab;
+    componentWillLoad() {
+        if (!this.selectedTab) {
+            this.selectedTab = this.tabs[0] || '';
+        }
+    }
+    render() {
+        return (h(Host, { key: '6f38daa61aa31e43ec92abaceacc08deb5e0d4cd' }, this.tabs.length > 1 && (h("div", { key: 'da5e0fb77cf3dc26c330c89785d7739b56d08a44', class: 'tabs-container', style: { gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` } }, this.tabs.map(tab => (h("button", { class: tab === this.selectedTab ? 'ls-tab active' : 'ls-tab', onClick: () => (this.selectedTab = tab) }, tab))))), h("div", { key: 'a45a9bf087885f5d267f6b4c8af47de2c5c31e33', class: 'scrolling-container' }, h("slot", { key: 'fbd8443a815538ef0b84a1156646fffec2c6ce6d', name: this.selectedTab }))));
+    }
+};
+LsFieldPropertiesContainer.style = lsFieldPropertiesContainerCss;
+
+export { LsFieldPropertiesContainer as ls_field_properties_container };
+//# sourceMappingURL=ls-field-properties-container.entry.esm.js.map
+
+//# sourceMappingURL=ls-field-properties-container.entry.js.map

package/dist/ls-document-viewer/ls-field-properties-container.entry.js.map

@@ -0,0 +1 @@
+{"file":"ls-field-properties-container.entry.esm.js","mappings":";;AAAA,MAAM,6BAA6B,GAAG,27BAA27B;;MCQp9B,0BAA0B,GAAA,MAAA;;;;AAC7B,IAAA,QAAQ;IACR,IAAI,GAAa,EAAE;AACY,IAAA,WAAW;IAElD,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE;;;IAIzC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,KACnB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAU,OAAA,EAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAQ,MAAA,CAAA,EAAE,EAC7F,EAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAChB,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC,WAAW,GAAG,eAAe,GAAG,QAAQ,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,IAC1G,GAAG,CACG,CACV,CAAC,CACE,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,qBAAqB,EAAA,EAC/B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,WAAW,EAAS,CAAA,CACjC,CACD;;;;;;;","names":[],"sources":["src/components/ls-field-properties-container/ls-field-properties-container.css?tag=ls-field-properties-container&encapsulation=shadow","src/components/ls-field-properties-container/ls-field-properties-container.tsx"],"sourcesContent":["* {\n  margin: 0;\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  height: calc(100% - 7.25rem);\n  position: relative;\n}\n\n.tabs-container {\n  display: grid;\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  text-transform: capitalize;\n}\n\n.ls-tab.active {\n  background: var(--primary-10, #eff4ff);\n  color: var(--primary-60, #4456f6);\n}\n\n.ls-tab:not(.active):hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-footer {\n  display: flex;\n  padding-top: 1rem;\n  border-top: 1px solid var(--gray-20, #f0f1f2);\n  flex-direction: column;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  margin-top: auto;\n}\n\n.scrolling-container {\n  overflow-y: auto;\n  padding: 0 1rem;\n  margin: 0 -1rem;\n  height: 100%;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-container',\n  styleUrl: 'ls-field-properties-container.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesContainer {\n  @Prop() dataItem: LSApiElement;\n  @Prop() tabs: string[] = [];\n  @Prop({ mutable: true, reflect: true}) selectedTab: string;\n\n  componentWillLoad() {\n    if (!this.selectedTab) {\n      this.selectedTab = this.tabs[0] || '';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.tabs.length > 1 && (\n          <div class={'tabs-container'} style={{ gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` }}>\n            {this.tabs.map(tab => (\n              <button class={tab === this.selectedTab ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.selectedTab = tab)}>\n                {tab}\n              </button>\n            ))}\n          </div>\n        )}\n        <div class={'scrolling-container'}>\n          <slot name={this.selectedTab}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/ls-document-viewer/ls-field-properties-date.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-properties-date.entry.esm.js","sources":["src/components/ls-field-properties-date/ls-field-properties-date.css?tag=ls-field-properties-date&encapsulation=shadow","src/components/ls-field-properties-date/ls-field-properties-date.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.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\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.has-leading-icon {\n  padding-left: 2.5rem;\n}\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.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';\n\n@Component({\n  tag: 'ls-field-properties-date',\n  styleUrl: 'ls-field-properties-date.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesDate {\n  @Prop() dataItem: LSApiElement;\n\n  render() {\n    return (\n      <Host>\n        <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n          <div class={'field-set'} slot=\"content\">\n            <ls-field-content dataItem={this.dataItem} />\n            <ls-field-properties-advanced dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"dimensions\">\n            <ls-field-dimensions dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"placement\">\n            <ls-field-placement dataItem={this.dataItem} />\n          </div>\n        </ls-field-properties-container>\n        <ls-field-footer dataItem={this.dataItem} />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,wBAAwB,GAAG,ktJAAktJ;;MCQtuJ,qBAAqB,GAAA,MAAA;;;;AACxB,IAAA,QAAQ;IAEhB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAA+B,CAAA,+BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,SAAS,EAAA,EACrC,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC7C,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACrD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,YAAY,EAAA,EACxC,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5C,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,WAAW,EAAA,EACvC,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC3C,CACwB,EAChC,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CACvC;;;;;;;"}