legalesign-document-viewer 0.7.3 → 0.7.4

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

@@ -1,16 +1,24 @@
-import { r as registerInstance, d as createEvent, e as getElement, h, a as Host } from './index-DANCsk1i.js';
-import { h as validationTypes } from './editorUtils-B8pqYCt6.js';
-import { g as getFieldTitleSuggestion, a as getFieldPlaceholder } from './defaultFieldLabels-CUaKk41L.js';
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BhZ5Udbm.js';
+import { d as defineCustomElement$6, i as validationTypes } from './p-ClZqGgX5.js';
+import { d as defineCustomElement$5, g as getFieldPlaceholder, a as getFieldTitleSuggestion } from './p-kug3tj7P.js';
+import { d as defineCustomElement$4 } from './p-DnyBXRV4.js';
+import { d as defineCustomElement$3 } from './p-B5cnJ7Uh.js';
+import { d as defineCustomElement$2 } from './p-CwkNbClZ.js';
+import { d as defineCustomElement$1 } from './p-mm_laW9q.js';
 
 const lsFieldContentCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:2.2rem;width:100%}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
 
-const LsFieldContent = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const LsFieldContent = /*@__PURE__*/ proxyCustomElement(class LsFieldContent extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
         this.mutate = createEvent(this, "mutate", 7);
         this.update = createEvent(this, "update", 7);
     }
-    get component() { return getElement(this); }
+    get component() { return this; }
     dataItem;
     showValidationTypes = true;
     mutate;
@@ -36,12 +44,61 @@ const LsFieldContent = class {
         return !typesWithValue.includes(this.dataItem?.elementType);
     }
     render() {
-        return (h(Host, { key: '775a6de060097462dde4ceecff37cbaa8ee2e257' }, h("ls-props-section", { key: 'beee048687d8661104582baaaed15ab7d530d949', sectionTitle: "Field Type", sectionDescription: "The Field you currently have selected" }, h("ls-field-type-display", { key: '906d73b30b0f46628536e6c81891c6cb7194f1da', fieldType: this.dataItem?.elementType, assignee: this.dataItem?.signer })), h("ls-props-section", { key: '74ed8e08d888faaa60432e395dea0edb338137bd', sectionTitle: "Required Field", row: true }, h("ls-toggle", { key: '7d861c8bcabb0375487e6d39016743dd7ea40065', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: ev => this.alter({ optional: !ev.detail }) })), h("ls-props-section", { key: 'f4f94ea995e84e672159cf2b39b851a785c27fb7', sectionTitle: "Field Label", sectionDescription: "Add a label to clarify the information required from the Recipient." }, h("input", { key: '5969abb2fc1d0aa261eb5c148c73b590469c524f', value: this.dataItem?.label, placeholder: getFieldTitleSuggestion(this.dataItem?.elementType), onInput: e => this.alter({ label: e.target.value }) })), this.supportsValue() && (h("ls-props-section", { key: '83f8c0e723d93d95b3d8f6c80a411b19d651ba78', sectionTitle: "Value", sectionDescription: "A prefilled value that can be altered by the signer." }, h("input", { key: 'eb5304bf19e964e4997a0d782ed90296611f1a29', value: this.dataItem?.value, placeholder: getFieldPlaceholder(this.dataItem?.elementType), onInput: e => this.alter({ value: e.target.value }) }))), this.dataItem.validation === 20 && (h("ls-props-section", { key: 'a0af08bced9311a54abc0fe237a9240edf62066b', sectionTitle: "Options", sectionDescription: "Define the options available in the dropdown. One option per line." }, h("textarea", { key: '7c7cfd17e163315259d17346cabb6142c2f59205', value: this.dataItem?.options, placeholder: "Option 1\nOption 2\nOption 3", onInput: e => this.alter({ options: e.target.value }) }))), this.showValidationTypes && (h("ls-props-section", { key: 'd63df437abfd9311cdb68432cd83ebc40b4c43cf', sectionTitle: "Content Format", sectionDescription: "Select the specific format you want the Recipient to enter." }, h("ls-input-wrapper", { key: '77be5b7831ae6e6aaa7f5dda9a05b285f6a4eec3', select: true }, h("select", { key: '35aa9bef9670c21ff51a76d8b782a2b4baedc681', onChange: ev => this.alter({ validation: parseInt(ev.target.value) }) }, validationTypes
+        return (h(Host, { key: '657d620157ef9d0bdfce79ee1610a67f7e990429' }, h("ls-props-section", { key: 'f240dc47840f73f0c989d522cb311696c22907aa', sectionTitle: "Field Type", sectionDescription: "The Field you currently have selected" }, h("ls-field-type-display", { key: '41f7e9ee644f5938d29d479052257b2ddb6c0f71', fieldType: this.dataItem?.elementType, assignee: this.dataItem?.signer })), h("ls-props-section", { key: '124e8ae4a235c1292edaf62d6162b545d8ef8503', sectionTitle: "Required Field", row: true }, h("ls-toggle", { key: 'eb88e9e8df4dace6854efc2dd55afe43997c3130', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: ev => this.alter({ optional: !ev.detail }) })), h("ls-props-section", { key: '33c1c38e90a09726de65fbc342586d08eeaf8af2', sectionTitle: "Field Label", sectionDescription: "Add a label to clarify the information required from the Recipient." }, h("input", { key: '8d7643f93c2fa9c862c80f1f3155d2eb2cfee9ff', value: this.dataItem?.label, placeholder: getFieldTitleSuggestion(this.dataItem?.elementType), onInput: e => this.alter({ label: e.target.value }) })), this.supportsValue() && (h("ls-props-section", { key: 'f24ded19bdfe6ac25b43a2366cadb0a3640acf46', sectionTitle: "Value", sectionDescription: "A prefilled value that can be altered by the signer." }, h("input", { key: '7d74eb6bba09e541af029d83e7d5d9c9dc75f258', value: this.dataItem?.value, placeholder: getFieldPlaceholder(this.dataItem?.elementType), onInput: e => this.alter({ value: e.target.value }) }))), this.dataItem.validation === 20 && (h("ls-props-section", { key: 'aec1a8e9294a893f66ca27c91486c9429dd92dee', sectionTitle: "Options", sectionDescription: "Define the options available in the dropdown. One option per line." }, h("textarea", { key: '01387cc21a3b7d8153f1a9386ae1e14e6028f215', value: this.dataItem?.options, placeholder: "Option 1\nOption 2\nOption 3", onInput: e => this.alter({ options: e.target.value }) }))), this.showValidationTypes && (h("ls-props-section", { key: '983ed1d46e450c4e0ed422d570d593324ad81627', sectionTitle: "Content Format", sectionDescription: "Select the specific format you want the Recipient to enter." }, h("ls-input-wrapper", { key: '222d9c6358cd8a3783e1ad893ca27c74e9a506a5', select: true }, h("select", { key: '431a8175a07ab844737f817c807c0a3ce37bd9da', onChange: ev => this.alter({ validation: parseInt(ev.target.value) }) }, validationTypes
             .filter(type => type.formType === this.dataItem?.elementType)
-            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), h("slot", { key: '5816566e2fa3736747402f9e05ccaf53bdc5ebd2' })));
+            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), h("slot", { key: '924aef7652e1bb63a5d77606efa8d59caa45455a' })));
     }
-};
-LsFieldContent.style = lsFieldContentCss();
+    static get style() { return lsFieldContentCss(); }
+}, [769, "ls-field-content", {
+        "dataItem": [1040],
+        "showValidationTypes": [4, "show-validation-types"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-field-content", "ls-editor-field", "ls-field-type-display", "ls-icon", "ls-input-wrapper", "ls-props-section", "ls-toggle"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-field-content":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsFieldContent);
+            }
+            break;
+        case "ls-editor-field":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ls-field-type-display":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ls-input-wrapper":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-props-section":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-toggle":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsFieldContent as L, defineCustomElement as d };
+//# sourceMappingURL=p-DhwqMQgK.js.map
 
-export { LsFieldContent as ls_field_content };
-//# sourceMappingURL=ls-field-content.entry.esm.js.map
+//# sourceMappingURL=p-DhwqMQgK.js.map

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

@@ -0,0 +1 @@
+{"file":"p-DhwqMQgK.js","mappings":";;;;;;;;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,umJAAumJ,CAAC;;MCU5nJ,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;AAEA,IAAA,QAAQ;IACzB,mBAAmB,GAAY,IAAI;AAO3C,IAAA,MAAM;AAON,IAAA,MAAM;;;;AAKN,IAAA,KAAK,CAAC,IAAY,EAAA;AAChB,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,EAAE;QAC7C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC;;AAG3B,IAAA,UAAU;IAElB,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAA;QAClB,IAAI,IAAI,CAAC,UAAU;AAAE,YAAA,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;AAElD,QAAA,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,MAAK;YAChC,MAAM,KAAK,GAAoB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAC3D,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;SACxB,EAAE,KAAK,CAAC;;IAGX,aAAa,GAAA;QACX,MAAM,cAAc,GAAG,CAAC,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,CAAC;QAEtJ,OAAO,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC;;IAG7D,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,YAAY,EAAC,YAAY,EAAC,kBAAkB,EAAC,uCAAuC,EAAA,EACpG,CAAA,CAAA,uBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAuB,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAI,CAChF,EACnB,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,YAAY,EAAC,gBAAgB,EAAC,GAAG,EAAE,IAAI,EAAA,EACvD,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,EAAE,EAAC,iBAAiB,EAAC,OAAO,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAI,CAC/G,EACnB,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,YAAY,EAAC,aAAa,EAAC,kBAAkB,EAAC,qEAAqE,EAAA,EACnI,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAC3B,WAAW,EAAE,uBAAuB,CAAC,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,EAChE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,GACzE,CACe,EAClB,IAAI,CAAC,aAAa,EAAE,KACnB,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,YAAY,EAAC,OAAO,EAAC,kBAAkB,EAAC,sDAAsD,EAAA,EAC9G,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAC3B,WAAW,EAAE,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,EAC5D,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,EAAA,CACzE,CACe,CACpB,EACA,IAAI,CAAC,QAAQ,CAAC,UAAU,KAAK,EAAE,KAC9B,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,YAAY,EAAC,SAAS,EAAC,kBAAkB,EAAC,oEAAoE,EAAA,EAC9H,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAC7B,WAAW,EAAC,8BAAoC,EAChD,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,OAAO,EAAG,CAAC,CAAC,MAA8B,CAAC,KAAK,EAAE,CAAC,EAAA,CAC9E,CACe,CACpB,EAEA,IAAI,CAAC,mBAAmB,KACvB,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,YAAY,EAAC,gBAAgB,EAAC,kBAAkB,EAAC,6DAA6D,EAAA,EAC9H,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,MAAM,EAAA,IAAA,EAAA,EACtB,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAE,EAAE,CAAC,MAA4B,CAAC,KAAK,CAAC,EAAE,CAAC,EAAA,EACjG;AACE,aAAA,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,EAAE,WAAW;aAC3D,GAAG,CAAC,IAAI,KACP,CAAA,CAAA,QAAA,EAAA,EAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,KAAK,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,EACpE,EAAA,IAAI,CAAC,WAAW,CACV,CACV,CAAC,CACG,CACQ,CACF,CACpB,EACD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-content/ls-field-content.css?tag=ls-field-content&encapsulation=shadow","src/components/ls-field-content/ls-field-content.tsx"],"sourcesContent":[":host {\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: 2.2rem;\n  width: 100%;\n}\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  display: flex;\n  gap: 0.5rem;\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  font-weight: 500;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--white, #fff);\n  color: var(--gray-90, #5e6066);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n  border: 1px solid var(--red-60, #f04438);\n  background-color: white;\n  color: var(--red-60);\n}\n\nbutton.destructive:hover {\n  border: 1px solid var(--red-70, #d92d20);\n  background: var(--red-10, #fff1f0);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { validationTypes } from '../ls-document-viewer/editorUtils';\nimport { getFieldPlaceholder, getFieldTitleSuggestion } from '../ls-document-viewer/defaultFieldLabels';\n\n@Component({\n  tag: 'ls-field-content',\n  styleUrl: 'ls-field-content.css',\n  shadow: true,\n})\nexport class LsFieldContent {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true }) dataItem: LSApiElement;\n  @Prop() showValidationTypes: boolean = true;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object) {\n    this.dataItem = { ...this.dataItem, ...diff };\n    this.debounce(this.dataItem, 500);\n  }\n\n  private labeltimer;\n\n  debounce(data, delay) {\n    if (this.labeltimer) clearTimeout(this.labeltimer);\n\n    this.labeltimer = setTimeout(() => {\n      const diffs: LSMutateEvent[] = [{ action: 'update', data }];\n      this.mutate.emit(diffs);\n    }, delay);\n  }\n\n  supportsValue() {\n    const typesWithValue = ['signature', 'initials', 'image', 'file', 'signing', 'autosign', 'regex', 'signing date', 'auto sign', 'dropdown', 'checkbox'];\n\n    return !typesWithValue.includes(this.dataItem?.elementType);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ls-props-section sectionTitle=\"Field Type\" sectionDescription=\"The Field you currently have selected\">\n          <ls-field-type-display fieldType={this.dataItem?.elementType} assignee={this.dataItem?.signer} />\n        </ls-props-section>\n        <ls-props-section sectionTitle=\"Required Field\" row={true}>\n          <ls-toggle id=\"toggle-required\" checked={!this.dataItem?.optional} onValueChange={ev => this.alter({ optional: !ev.detail })} />\n        </ls-props-section>\n        <ls-props-section sectionTitle=\"Field Label\" sectionDescription=\"Add a label to clarify the information required from the Recipient.\">\n          <input\n            value={this.dataItem?.label}\n            placeholder={getFieldTitleSuggestion(this.dataItem?.elementType)}\n            onInput={e => this.alter({ label: (e.target as HTMLInputElement).value })}\n          />\n        </ls-props-section>\n        {this.supportsValue() && (\n          <ls-props-section sectionTitle=\"Value\" sectionDescription=\"A prefilled value that can be altered by the signer.\">\n            <input\n              value={this.dataItem?.value}\n              placeholder={getFieldPlaceholder(this.dataItem?.elementType)}\n              onInput={e => this.alter({ value: (e.target as HTMLInputElement).value })}\n            />\n          </ls-props-section>\n        )}\n        {this.dataItem.validation === 20 && (\n          <ls-props-section sectionTitle=\"Options\" sectionDescription=\"Define the options available in the dropdown. One option per line.\">\n            <textarea\n              value={this.dataItem?.options}\n              placeholder=\"Option 1&#10;Option 2&#10;Option 3\"\n              onInput={e => this.alter({ options: (e.target as HTMLTextAreaElement).value })}\n            />\n          </ls-props-section>\n        )}\n\n        {this.showValidationTypes && (\n          <ls-props-section sectionTitle=\"Content Format\" sectionDescription=\"Select the specific format you want the Recipient to enter.\">\n            <ls-input-wrapper select>\n              <select onChange={ev => this.alter({ validation: parseInt((ev.target as HTMLSelectElement).value) })}>\n                {validationTypes\n                  .filter(type => type.formType === this.dataItem?.elementType)\n                  .map(type => (\n                    <option selected={this.dataItem?.validation === type.id} value={type.id}>\n                      {type.description}\n                    </option>\n                  ))}\n              </select>\n            </ls-input-wrapper>\n          </ls-props-section>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,14 +1,20 @@
-import { r as registerInstance, d as createEvent, e as getElement, h, a as Host } from './index-DANCsk1i.js';
-import { a as attachAllTooltips } from './tooltip-Cb8nDMs-.js';
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BhZ5Udbm.js';
+import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
+import { d as defineCustomElement$2 } from './p-DnyBXRV4.js';
+import { d as defineCustomElement$1 } from './p-faUZy676.js';
 
 const lsFieldSizeCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}.ls-toolbar-numeric{width:2.813rem;max-height:1.25rem;margin:0px;padding:0px}*{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 LsFieldSize = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const LsFieldSize = /*@__PURE__*/ proxyCustomElement(class LsFieldSize extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
         this.mutate = createEvent(this, "mutate", 7);
     }
-    get component() { return getElement(this); }
+    get component() { return this; }
     dataItem;
     mutate;
     // Send one or more mutations up the chain
@@ -24,10 +30,38 @@ const LsFieldSize = class {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: 'b47b56f2e6a9e9af789b259fcda1229de1149fd5' }, h("div", { key: '19ef8168ac43559221afd58410d213894905851d', class: 'ls-field-properties-section' }, h("div", { key: 'a44359d98737f993b4cca31d4ccf85fea27419b1', class: 'ls-field-properties-section-text' }, h("p", { key: '2b9bb393723620fe248be76fa1ab98b43fd94e5c', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: '7e00e6a31cccaad9735a6366b423baf8c8baa911', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: '65e850ac52e5f385204c19de74c8f0998b52892c', class: 'button-group' }, h("button", { key: '9f401d9c077c90decbf2546d18548c081b5bad69', onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip": "Make selected fields the same height and width as the first selected field" }, h("ls-icon", { key: '97b1329d7f6b4daf71e52d79bc76863cdb338950', name: "field-scale" })), h("button", { key: '1135a154a12f95072872360979ef68fcc99379ef', "aria-label": "Make selected fields the same width as the first selected field", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip": "Make selected fields the same width as the first selected field" }, h("ls-icon", { key: '6efbddb00f59b6fc2c402f53adc82c5d204fd993', name: "field-match-width" })), h("button", { key: '4b5d75f806948ca59aa0ae57fae008ec510cc512', onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip": "Make selected fields the same height as the first selected field" }, h("ls-icon", { key: '8211ac3abfb375b73171ae255034ec6612f44c74', name: "field-match-height" })))), h("slot", { key: '36e3215732a92bc508f9d9ec64a35731da942d7f' }), h("ls-tooltip", { key: '1fb9caec3d3c02561c7acb6b37804a40c1cff9a6', id: "ls-tooltip-master" })));
+        return (h(Host, { key: 'c64b1112e2549d2dc89f41b34d950817df6d182a' }, h("div", { key: '15a9ce2865a2490b02a2fdfcccd6e2a3d2f20811', class: 'ls-field-properties-section' }, h("div", { key: 'c89d71391e4591fcebed9e9e8a73db018893fd1d', class: 'ls-field-properties-section-text' }, h("p", { key: 'e68285c80aa1dd10719fe57476ec6e5bec647723', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: '37548247f6afa990a5674a94c9e867f7474f8bf7', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: 'a4d8ab5f836596f233b7675fb45baf082e62b80c', class: 'button-group' }, h("button", { key: 'f9511e04d4972a6e853bf054cd8c36a29d917488', onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip": "Make selected fields the same height and width as the first selected field" }, h("ls-icon", { key: 'b3fcb08b7a9da2c12ba4a9789e65d1a977b7baa6', name: "field-scale" })), h("button", { key: 'c1a278fd2478160d534793a55de977ba76d0b394', "aria-label": "Make selected fields the same width as the first selected field", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip": "Make selected fields the same width as the first selected field" }, h("ls-icon", { key: '73157241ffe55cbfc3b9cd8801c5dbd543998946', name: "field-match-width" })), h("button", { key: '796d1ebe732b4b0537161549b7f8b0f38afab823', onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip": "Make selected fields the same height as the first selected field" }, h("ls-icon", { key: 'd1df875b9623562891ef01f5b53b343be85b51bc', name: "field-match-height" })))), h("slot", { key: '51d72c8def0e4eac4527ffadedb6496d078337a7' }), h("ls-tooltip", { key: 'aa62235c7cd42b985fd24d15aa5036334e87bcad', id: "ls-tooltip-master" })));
     }
-};
-LsFieldSize.style = lsFieldSizeCss();
+    static get style() { return lsFieldSizeCss(); }
+}, [769, "ls-field-size", {
+        "dataItem": [1040]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-field-size", "ls-icon", "ls-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-field-size":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsFieldSize);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsFieldSize as L, defineCustomElement as d };
+//# sourceMappingURL=p-DirhmWEt.js.map
 
-export { LsFieldSize as ls_field_size };
-//# sourceMappingURL=ls-field-size.entry.esm.js.map
+//# sourceMappingURL=p-DirhmWEt.js.map

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

@@ -0,0 +1 @@
+{"file":"p-DirhmWEt.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,qtLAAqtL,CAAC;;MCSvuL,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;;;AAEG,IAAA,QAAQ;AAOjC,IAAA,MAAM;;;AAIN,IAAA,KAAK,CAAC,IAAY,EAAA;QAChB,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAG;AACnD,YAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,EAAkB,EAAE;AACtE,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAoB,CAAC;AACtD,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGzB,gBAAgB,GAAA;AACd,QAAA,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;;IAG9C,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,6BAA6B,EAAA,EACvC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,kCAAkC,EAAA,EAC5C,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,mCAAmC,EAAsB,EAAA,kBAAA,CAAA,EACnE,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAE,yCAAyC,EAAA,EAAA,gDAAA,CAAoD,CACnG,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,EAClF,YAAA,EAAA,6EAA6E,kBAC3E,4EAA4E,EAAA,EAEzF,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,aAAa,EAAA,CAAW,CAC/B,EACT,CACa,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAA,iEAAiE,EAC5E,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,EAAA,cAAA,EAC/C,iEAAiE,EAAA,EAE9E,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,mBAAmB,EAAA,CAAW,CACrC,EACT,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,EAAA,YAAA,EACnD,mEAAmE,EAAA,cAAA,EACjE,kEAAkE,EAAA,EAE/E,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,oBAAoB,EAAW,CAAA,CACtC,CACL,CACF,EAEN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,EAAE,EAAC,mBAAmB,EAAc,CAAA,CAC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-size/ls-field-size.css?tag=ls-field-size&encapsulation=shadow","src/components/ls-field-size/ls-field-size.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  position: relative;\n}\n\n.ls-toolbar-numeric {\n  width: 2.813rem;\n  max-height: 1.25rem;\n  margin: 0px;\n  padding: 0px;\n}\n\n* {\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n.ls-field-properties-section {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.row {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.multi-button-group-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ls-field-properties-section-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n  color: var(--gray-90, #5e6066);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n  overflow: hidden;\n  color: var(--gray-80, #6c6e73);\n  text-overflow: ellipsis;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 0.75rem; /* 120% */\n}\n\n.input-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.input-row .input-wrapper input {\n  width: 9.313rem;\n  max-width: 9.313rem;\n}\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n}\n\n.input-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIconDisabled {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-50, #d8d9dc);\n}\n\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus:not(:disabled),\nselect:focus:not(:disabled),\ntextarea:focus:not(:disabled) {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active:not(:disabled),\nselect:active:not(:disabled),\ntextarea:active:not(:disabled) {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n  color: var(--gray-50, #d8d9dc);\n  box-shadow: none;\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n  width: 100%;\n}\n\n.button-group button {\n  display: flex;\n  width: 100%;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:disabled {\n  background: var(--gray-10, #f7f8fa);\n  cursor: not-allowed;\n  color: var(--gray-50, #d8d9dc);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-field-size',\n  styleUrl: 'ls-field-size.css',\n  shadow: true,\n})\nexport class LsFieldSize {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true }) dataItem: LSApiElement[];\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  alter(diff: object) {\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  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'ls-field-properties-section'}>\n          <div class={'ls-field-properties-section-text'}>\n            <p class={'ls-field-properties-section-title'}>Scale and Resize</p>\n            <p class={'ls-field-properties-section-description'}>Multi-select fields and match their dimensions</p>\n          </div>\n          <div class={'button-group'}>\n            <button\n              onClick={() => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height })}\n              aria-label=\"Make selected fields the same height and width as the first selected field.\"\n              data-tooltip=\"Make selected fields the same height and width as the first selected field\"\n            >\n              <ls-icon name=\"field-scale\"></ls-icon>\n            </button>\n            <button\n              aria-label=\"Make selected fields the same width as the first selected field\"\n              onClick={() => this.alter({ width: this.dataItem[0].width })}\n              data-tooltip=\"Make selected fields the same width as the first selected field\"\n            >\n              <ls-icon name=\"field-match-width\"></ls-icon>\n            </button>\n            <button\n              onClick={() => this.alter({ height: this.dataItem[0].height })}\n              aria-label=\"Make selected fields the same height as the first selected field.\"\n              data-tooltip=\"Make selected fields the same height as the first selected field\"\n            >\n              <ls-icon name=\"field-match-height\"></ls-icon>\n            </button>\n          </div>\n        </div>\n\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\"></ls-tooltip>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-DnN65l1S.js

@@ -0,0 +1,117 @@
+import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-BhZ5Udbm.js';
+import { d as defineCustomElement$d } from './p-ClZqGgX5.js';
+import { d as defineCustomElement$c } from './p-DhwqMQgK.js';
+import { d as defineCustomElement$b } from './p-DBZFz4Ni.js';
+import { d as defineCustomElement$a } from './p-BDTgDxaX.js';
+import { d as defineCustomElement$9 } from './p-CYMm2d62.js';
+import { d as defineCustomElement$8 } from './p-BSpwN-xy.js';
+import { d as defineCustomElement$7 } from './p-BFUdzGLI.js';
+import { d as defineCustomElement$6 } from './p-kug3tj7P.js';
+import { d as defineCustomElement$5 } from './p-DnyBXRV4.js';
+import { d as defineCustomElement$4 } from './p-B5cnJ7Uh.js';
+import { d as defineCustomElement$3 } from './p-CwkNbClZ.js';
+import { d as defineCustomElement$2 } from './p-mm_laW9q.js';
+import { d as defineCustomElement$1 } from './p-faUZy676.js';
+
+const lsFieldPropertiesFileCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:2.25rem;width:100%}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
+
+const LsFieldPropertiesFile = /*@__PURE__*/ proxyCustomElement(class LsFieldPropertiesFile extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    dataItem;
+    render() {
+        return (h(Host, { key: 'fa0b1b553dc115510672c4df9f38c134411fbd7f' }, h("ls-field-properties-container", { key: '4c823538c33402f3f3f4e85c5f61a5fea3c5946b', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: '3ffd19f0e70dfe6877738fe37526fd3b71af698d', class: 'field-set', slot: "content" }, h("ls-field-content", { key: '0a5e966cef74ebd6e011761227006e322bed1c3c', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: '2b989eacec76fc3f77283b0920a2c1f4a1faa982', dataItem: this.dataItem })), h("div", { key: '0d5b3e94c8ea4678442d651c75d1af4df9c36856', class: 'field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: 'e409d8e93f2226a0c12fdb973475dc3d9776a014', dataItem: this.dataItem })), h("div", { key: '9eae84be99f31b6c30567504f1ff0a878633da26', class: 'field-set', slot: "placement" }, h("ls-field-placement", { key: '10320078816bd2e90d99972000f9ea1b20fb6774', dataItem: this.dataItem }))), h("ls-field-footer", { key: '5c375f35260c960ec160e160b204533d2be9cb3e', dataItem: this.dataItem })));
+    }
+    static get style() { return lsFieldPropertiesFileCss(); }
+}, [769, "ls-field-properties-file", {
+        "dataItem": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-field-properties-file", "ls-editor-field", "ls-field-content", "ls-field-dimensions", "ls-field-footer", "ls-field-placement", "ls-field-properties-advanced", "ls-field-properties-container", "ls-field-type-display", "ls-icon", "ls-input-wrapper", "ls-props-section", "ls-toggle", "ls-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-field-properties-file":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsFieldPropertiesFile);
+            }
+            break;
+        case "ls-editor-field":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$d();
+            }
+            break;
+        case "ls-field-content":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$c();
+            }
+            break;
+        case "ls-field-dimensions":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ls-field-footer":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$a();
+            }
+            break;
+        case "ls-field-placement":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$9();
+            }
+            break;
+        case "ls-field-properties-advanced":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ls-field-properties-container":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ls-field-type-display":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ls-input-wrapper":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ls-props-section":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-toggle":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsFieldPropertiesFile as L, defineCustomElement as d };
+//# sourceMappingURL=p-DnN65l1S.js.map
+
+//# sourceMappingURL=p-DnN65l1S.js.map

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

@@ -0,0 +1 @@
+{"file":"p-DnN65l1S.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,MAAM,CAAC,mtJAAmtJ,CAAC;;MCQ/uJ,qBAAqB,iBAAAA,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;;;;;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-file/ls-field-properties-file.css?tag=ls-field-properties-file&encapsulation=shadow","src/components/ls-field-properties-file/ls-field-properties-file.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: 2.25rem;\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\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-file',\n  styleUrl: 'ls-field-properties-file.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesFile {\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"],"version":3}

package/dist/{ls-document-viewer/ls-icon.entry.js → components/p-DnyBXRV4.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DANCsk1i.js';
+import { t as transformTag, p as proxyCustomElement, H, h } from './p-BhZ5Udbm.js';
 
 const html = String.raw;
 const icons = [
@@ -6997,18 +6997,14 @@ var IconEnum;
     // Add more icons here
 })(IconEnum || (IconEnum = {}));
 const iconNames = [...icons.map((icon) => icon.name).sort()];
-const outlineIcons = icons
-    .filter((i) => i.svgOutline !== 'No Outline')
-    .map((i) => i.name)
-    .sort();
-const solidIcons = icons
-    .filter((i) => i.svgSolid !== 'No Solid')
-    .map((i) => i.name)
-    .sort();
 
-const LsIcon = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const LsIcon = /*@__PURE__*/ proxyCustomElement(class LsIcon extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
     }
     name;
     solid = false;
@@ -7033,7 +7029,7 @@ const LsIcon = class {
             console.warn('Icons in src/components/ls-icon/icons.ts should be identical to the enum type in src/types/Icon.ts. Please add all icons to the enum type.');
     }
     render() {
-        return (h("host", { key: 'daa62f3e5818f50f14806b9146b76f7c36f04058' }, icons
+        return (h("host", { key: 'c87c757eb7b4e09a565e9eb3dca45e46704aa30d' }, icons
             ?.filter((icon) => icon.name === this.name)
             ?.map((icon) => (h("div", { key: icon?.name, class: 'iconContainer', style: {
                 height: `${this.size}`,
@@ -7041,7 +7037,29 @@ const LsIcon = class {
                 ...this.customStyle,
             } }, this.solid ? (h("div", { innerHTML: icon.svgSolid, style: { top: '0px' } })) : (h("div", { innerHTML: icon.svgOutline, style: { top: '0px' } })))))));
     }
-};
+}, [769, "ls-icon", {
+        "name": [1],
+        "solid": [4],
+        "color": [1],
+        "size": [1],
+        "customStyle": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsIcon);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsIcon as L, defineCustomElement as d };
+//# sourceMappingURL=p-DnyBXRV4.js.map
 
-export { LsIcon as ls_icon };
-//# sourceMappingURL=ls-icon.entry.esm.js.map
+//# sourceMappingURL=p-DnyBXRV4.js.map