legalesign-document-viewer 0.10.2 → 0.10.4

package/dist/cjs/ls-editor-field_11.cjs.entry.js

@@ -0,0 +1,909 @@
+'use strict';
+
+var index = require('./index-DFeU0FNc.js');
+var editorUtils = require('./editorUtils-f8cxkqvC.js');
+var defaultPalette = require('./defaultPalette-Dt4FmPno.js');
+var i18n = require('./i18n-B8sub13B.js');
+var defaultFieldIcons = require('./defaultFieldIcons-ByvDN5ag.js');
+
+const lsEditorFieldCss = () => `:host{display:block;position:absolute;margin:0px;padding:0px 0px 0px 0px;isolation:isolate;min-height:16px}:host .ls-editor-field{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.ls-dv-editor-field-editable{font-family:inherit;font-size:inherit;color:inherit;overflow:hidden;word-break:break-all;white-space:pre-wrap;margin:0;margin-top:auto;padding:0px 0px 0px 0px;min-width:2em;width:calc(100% - 13px);max-height:100%}.ls-dv-editor-field-editable:focus{outline:none}.ls-dv-editor-field-draggable{display:flex;align-items:flex-end;font-family:inherit;font-size:inherit;overflow:hidden;word-break:break-all;white-space:pre-wrap;min-width:2px;height:100%;width:calc(100% - 13px);margin-top:auto}.ls-dv-hidden-field{display:none}.ls-dv-date-field-input{position:absolute;opacity:0;pointer-events:none;width:100%;height:100%;top:0;left:0}input,textarea{all:unset;color:inherit}textarea{resize:none;overflow:hidden;word-break:break-all;white-space:pre-wrap}.ls-dv-draggable-input{font-family:inherit;font-size:inherit;position:relative;height:95%;width:95%}.ls-dv-editing-input{caret-color:rgb(15, 23, 42);caret-shape:auto;height:100%;width:100%}.ls-dv-required-icon{color:var(--red-60, #f64a44)}.ls-dv-x-button{all:unset;cursor:pointer;transform:translate(55%, -55%);position:absolute;color:white;background:var(--gray-80, #6f7176);border-radius:50%;top:0;right:0}.ls-dv-x-button:hover{background:var(--gray-90, #5e6066)}.resize-handles{pointer-events:none}.resize-handle{position:absolute;background:var(--field-border-color);border-radius:1px}.handle-e{width:4px;height:16px;right:0px;top:50%;transform:translateY(-50%)}.handle-s{width:16px;height:4px;bottom:0px;left:50%;transform:translateX(-50%)}.handle-se{width:6px;height:6px;right:0px;bottom:0px}`;
+
+const fieldTypeKeyMap$1 = {
+    'signature': 'toolbox.signature',
+    'auto sign': 'toolbox.autosign',
+    'text': 'toolbox.text',
+    'signing date': 'toolbox.signingdate',
+    'date': 'toolbox.date',
+    'initials': 'toolbox.initials',
+    'checkbox': 'toolbox.checkbox',
+    'email': 'toolbox.email',
+    'number': 'toolbox.number',
+    'image': 'toolbox.image',
+    'dropdown': 'toolbox.dropdown',
+    'file': 'toolbox.file',
+    'drawn field': 'toolbox.drawn',
+    'drawn': 'toolbox.drawn',
+    'regular expression': 'toolbox.regex',
+    'regex': 'toolbox.regex',
+};
+const LsEditorField = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate", 6);
+        this.update = index.createEvent(this, "update", 6);
+    }
+    get component() { return index.getElement(this); }
+    assignee;
+    dataItem;
+    selected = false;
+    multiSelected = false;
+    readonly;
+    type;
+    page;
+    getFieldTypeKey() {
+        return fieldTypeKeyMap$1[this.dataItem?.formElementType] || 'toolbox.text';
+    }
+    fixedAspect = null;
+    isEditing = false;
+    heldEdge = null;
+    isEdgeDragging = false;
+    innerValue;
+    zoom;
+    sizeObserver;
+    mutate;
+    update;
+    /**
+     * Controls whether floating elements are visible. Set by mouse enter/leave events.
+     */
+    floatingActive = false;
+    // Set floatingActive true on mouse enter, false on mouse leave
+    handleMouseEnter = () => {
+        this.floatingActive = true;
+    };
+    handleMouseLeave = () => {
+        this.floatingActive = false;
+    };
+    handleInput(e) {
+        if (e.code === 'Enter' && !e.ctrlKey && !e.metaKey) {
+            this.isEditing = false;
+            this.sizeObserver.observe(this.component.shadowRoot.getElementById('field-info'));
+            e.preventDefault();
+        }
+        e.stopPropagation();
+    }
+    handleMouseMove(e) {
+        if (this.readonly)
+            return;
+        if (!e.clientX)
+            return;
+        // While dragging (button held), keep current cursor
+        if (e.buttons === 1)
+            return;
+        // Scale edge threshold so short/narrow fields still have a usable move zone
+        const edgeX = Math.min(8, this.component.clientWidth * 0.25);
+        const edgeY = Math.min(8, this.component.clientHeight * 0.25);
+        const nearLeft = e.offsetX < edgeX;
+        const nearRight = (this.component.clientWidth - e.offsetX) < edgeX;
+        const nearTop = e.offsetY < edgeY;
+        const nearBottom = (this.component.clientHeight - e.offsetY) < edgeY;
+        // Corners first
+        if ((nearRight && nearBottom) || (nearLeft && nearTop)) {
+            this.component.style.cursor = 'nwse-resize';
+        }
+        else if ((nearLeft && nearBottom) || (nearRight && nearTop)) {
+            this.component.style.cursor = 'nesw-resize';
+        }
+        else if (nearLeft || nearRight) {
+            this.component.style.cursor = 'ew-resize';
+        }
+        else if (nearTop || nearBottom) {
+            this.component.style.cursor = 'ns-resize';
+        }
+        else {
+            this.component.style.cursor = 'move';
+        }
+    }
+    handleDoubleClick(e) {
+        if (this.readonly || this.dataItem.formElementType === 'signature' || this.dataItem.formElementType === 'initials' || this.dataItem.formElementType === 'signing date') {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        // Date fields use selection to open picker, skip dblclick
+        if (this.isDateField()) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        this.isEditing = true;
+        this.heldEdge = null;
+        this.isEdgeDragging = false;
+        this.sizeObserver.disconnect();
+        this.innerValue = this.innerValue ? this.innerValue : this.dataItem?.value;
+        const editbox = this.component.shadowRoot.getElementById('editing-input');
+        console.log(this.dataItem);
+        if (editbox) {
+            editbox.className = 'ls-dv-editor-field-editable';
+            editbox.focus();
+        }
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    handleMouseDown(e) {
+        if (this.readonly)
+            return;
+        const edgeX = Math.min(8, this.component.clientWidth * 0.25);
+        const edgeY = Math.min(8, this.component.clientHeight * 0.25);
+        const nearLeft = e.offsetX < edgeX;
+        const nearRight = (this.component.clientWidth - e.offsetX) < edgeX;
+        const nearTop = e.offsetY < edgeY;
+        const nearBottom = (this.component.clientHeight - e.offsetY) < edgeY;
+        if (nearLeft || nearRight || nearTop || nearBottom) {
+            // Prevent native drag so mousemove keeps firing during resize
+            e.preventDefault();
+        }
+    }
+    handleDragStart(event) {
+        // Add the target element's id to the data transfer object
+        event.dataTransfer.setData('application/json', JSON.stringify({
+            type: this.type,
+        }));
+        event.dataTransfer.dropEffect = 'move';
+    }
+    watchSelectedHandler(_newValue, _oldValue) {
+        if (_newValue) {
+            this.component.style.background = this.hexToRgba(defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s20, 0.5);
+            this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
+        }
+        else {
+            this.component.style.background = 'rgba(255,255,255,0.5)';
+            this.component.style.boxShadow = 'none';
+        }
+    }
+    deleteField = () => {
+        this.mutate.emit([{ action: 'delete', data: this.dataItem }]);
+        this.update.emit([{ action: 'delete', data: this.dataItem }]);
+    };
+    componentDidLoad() {
+        this.sizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                if (entry.contentRect) {
+                    const movebox = this.component.shadowRoot.getElementById('field-info');
+                    movebox.style.height = '100%';
+                }
+            }
+        });
+        this.sizeObserver.observe(this.component);
+        // New dropped components automatically need selecting.
+        if (this.selected) {
+            this.component.style.background = this.hexToRgba(defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s20, 0.5);
+            this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
+        }
+        else {
+            this.component.style.background = this.hexToRgba('ffffff', 0.7);
+            this.component.style.boxShadow = 'none';
+        }
+    }
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    // NOTE this alter is debounced to account for typing
+    alter(diff) {
+        this.dataItem = { ...this.dataItem, ...diff };
+        this.debounce(this.dataItem, 900);
+    }
+    labeltimer;
+    debounce(data, delay) {
+        if (this.labeltimer)
+            clearTimeout(this.labeltimer);
+        this.labeltimer = setTimeout(() => {
+            const diffs = [{ action: 'update', data }];
+            this.mutate.emit(diffs);
+        }, delay);
+    }
+    hexToRgba(hex, alpha) {
+        hex = hex.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        return `rgba(${r},${g},${b},${alpha})`;
+    }
+    isDateField() {
+        return editorUtils.getInputType(this.dataItem?.validation)?.inputType === 'date';
+    }
+    getDateFormat() {
+        const vType = editorUtils.validationTypes.find(v => v.id === this.dataItem?.validation);
+        if (!vType || vType.inputType !== 'date')
+            return null;
+        return vType.description;
+    }
+    toISODate(value) {
+        if (!value)
+            return '';
+        const format = this.getDateFormat();
+        if (!format)
+            return value;
+        const sep = format.match(/[/.-]/)?.[0] || '/';
+        const parts = format.split(/[/.-]/);
+        const valueParts = value.split(sep);
+        if (valueParts.length < 2)
+            return value;
+        let y = '', m = '', d = '';
+        parts.forEach((p, i) => {
+            const v = valueParts[i] || '';
+            if (p.startsWith('y'))
+                y = v;
+            else if (p.startsWith('m'))
+                m = v;
+            else if (p.startsWith('d'))
+                d = v;
+        });
+        if (y.length === 2)
+            y = '20' + y;
+        if (!d)
+            d = '01';
+        return `${y.padStart(4, '0')}-${m.padStart(2, '0')}-${d.padStart(2, '0')}`;
+    }
+    formatDateFromISO(isoValue) {
+        if (!isoValue)
+            return '';
+        const [y, m, d] = isoValue.split('-');
+        const format = this.getDateFormat();
+        if (!format)
+            return isoValue;
+        return format
+            .replace('yyyy', y)
+            .replace('yy', y.slice(-2))
+            .replace('mm', m)
+            .replace('dd', d)
+            .replace('d', String(parseInt(d)));
+    }
+    render() {
+        const hostStyle = this.floatingActive
+            ? { border: `2px ${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s60} ${this.dataItem?.signer > 99 ? 'dashed' : 'solid'}`, boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', '--field-border-color': defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s60 }
+            : { border: `2px ${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s60} ${this.dataItem?.signer > 99 ? 'dashed' : 'solid'}`, '--field-border-color': defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s60 };
+        const zoomValue = parseFloat(this.zoom) || 1;
+        // const topOffset = (this.dataItem.height ?? 1) + 4;
+        const topOffset = 24;
+        return (index.h(index.Host, { key: 'f46b383cd714e51df9cbccb82cac8f21f163bf20', id: this.dataItem ? 'ls-field-' + this.dataItem.id : undefined, style: hostStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("div", { key: '6042087e1d6e82c78c2e59d825d2c695969d51f2', class: {
+                'ls-editor-field': true,
+                'is-selected': this.selected,
+            } }, !this.dataItem?.optional && (index.h("ls-icon", { key: '4be8fb41a23b1f8913ff5109d877b18ad155a399', name: "required-icon", size: Math.round(12 * zoomValue), class: "ls-dv-required-icon", customStyle: {
+                position: 'absolute',
+                top: '50%',
+                right: `${0.25 * zoomValue}rem`,
+                transform: 'translateY(-50%)',
+                lineHeight: '1',
+                fontSize: `${0.75 * zoomValue}rem`,
+            } })), this.isDateField() ? (index.h("input", { id: "editing-input", class: "ls-dv-date-field-input", type: "date", style: { color: `${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s100}`, textAlign: 'inherit' }, value: this.toISODate(this.dataItem?.value), checked: this.dataItem?.value ? true : false, onInput: e => {
+                const val = e.target.value;
+                this.alter({ value: this.formatDateFromISO(val) });
+            }, onChange: e => {
+                const val = e.target.value;
+                this.alter({ value: this.formatDateFromISO(val) });
+            } })) : (index.h("textarea", { id: "editing-input", class: this.isEditing ? 'ls-dv-editor-field-editable' : 'ls-dv-hidden-field', style: { color: `${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s100}`, textAlign: 'inherit' }, value: this.dataItem?.value, rows: 1, onInput: e => {
+                const el = e.target;
+                el.style.height = 'auto';
+                el.style.height = el.scrollHeight + 'px';
+                this.alter({ value: el.value });
+            }, ref: el => {
+                if (el && this.isEditing) {
+                    requestAnimationFrame(() => {
+                        el.style.height = 'auto';
+                        el.style.height = el.scrollHeight + 'px';
+                    });
+                }
+            } })), index.h("div", { key: '3674f26decf45d88822b5a5aa716ca275389e417', id: "field-info", class: this.isEditing ? 'ls-dv-hidden-field' : 'ls-dv-editor-field-draggable', style: { color: `${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s100}` } }, index.h("span", { key: '043b9992a9b061bcc4453b269983a1b764ee6c8e', style: { width: '100%', display: 'block', textAlign: 'inherit' } }, (this.dataItem.value.length && this.dataItem.value) || i18n.dvI18n.t(this.getFieldTypeKey()))), (this.floatingActive || this.selected) && this.dataItem?.label && (index.h("div", { key: '4b54596d4c87be261f4522573a9deb30fdc69565', style: {
+                position: 'absolute',
+                background: `${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s20}`,
+                color: `${defaultPalette.defaultRolePalette[this.dataItem?.signer % 100].s80}`,
+                borderRadius: `${0.25 * zoomValue}rem`,
+                padding: `${0.125 * zoomValue}rem ${0.25 * zoomValue}rem`,
+                top: `-${topOffset * zoomValue}px`,
+                fontWeight: '500',
+                left: `-${2 * zoomValue}px`,
+                whiteSpace: 'nowrap',
+                width: 'fit-content',
+            } }, this.dataItem?.label)), (this.floatingActive || this.selected) && (index.h("p", { key: '091e37d8cd5ffccb804ebac8035143c154924e58', style: {
+                position: 'absolute',
+                color: 'var(--gray-80, #3a3a3a)',
+                bottom: `-${1.75 * zoomValue}rem`,
+                fontSize: `${0.625 * zoomValue}rem`,
+                left: '0',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                maxWidth: `${10 * zoomValue}rem`,
+                fontFamily: 'sans-serif',
+            } }, i18n.dvI18n.t('fieldproperties.assignedto'), " ", this.assignee)), this.selected && !this.multiSelected && (index.h("div", { key: '309a973906b50d00d8b867859e0fa0cff9fe6ac0', class: "resize-handles" }, index.h("div", { key: '9255aa25105203f41ae04b3f99bc5cb52b2e27f2', class: "resize-handle handle-e" }), index.h("div", { key: 'c4cea6db9d93c4c4bcee0985881434516490fff3', class: "resize-handle handle-s" }), index.h("div", { key: 'bcb7ca588ab4302bf09d41afbddb878cb57ce20e', class: "resize-handle handle-se" }))), this.floatingActive && !this.readonly && (index.h("button", { key: 'b544260efa160380f5090562195f6ff7793b8c5c', class: 'ls-dv-x-button', style: {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: `${0.875 * zoomValue}rem`,
+                height: `${0.875 * zoomValue}rem`,
+                lineHeight: `${0.75 * zoomValue}rem`,
+                fontSize: `${0.75 * zoomValue}rem`,
+            }, onClick: () => this.deleteField() }, index.h("ls-icon", { key: '92057e863a06f24617ecef01c46eb011b6f6d413', name: "x-icon", size: Math.round(12 * zoomValue) }))))));
+    }
+    static get watchers() { return {
+        "selected": ["watchSelectedHandler"]
+    }; }
+};
+LsEditorField.style = lsEditorFieldCss();
+
+const defaultFieldTitles = {
+    'signature': 'eg. Sign Here',
+    'auto sign': 'eg. Date of Signing',
+    'text': 'eg. Full Name, Address, Company Name',
+    'signing date': 'eg. Date of Signing',
+    'date': 'eg. Date of Birth',
+    'initials': 'eg. Initial Here',
+    'checkbox': 'eg. Agree to Terms',
+    'email': 'eg. Personal Email, Emergency Contact Email',
+    'number': 'eg. Phone Number, Account Number',
+    'image': 'eg. ID Image, Headshot',
+    'dropdown': 'eg. Select an Option',
+    'file': 'eg. Upload Document',
+    'drawn field': 'eg. Draw Here',
+    'regular expression': 'eg. Sort Code',
+};
+function getFieldTitleSuggestion(key) {
+    return defaultFieldTitles[key] || 'eg. Sign Here';
+}
+const defaultFieldPlaceholders = {
+    'signature': 'Siganture',
+    'auto sign': 'Date of Signing',
+    'text': 'eg. John Doe, 123 Main St, Acme Corp',
+    'signing date': 'Date of Signing',
+    'date': 'eg. 19/12/2025',
+    'initials': 'Initials',
+    'checkbox': 'Checkbox',
+    'email': 'eg. john.doe@example.com',
+    'number': 'eg. 12345',
+    'image': 'Image',
+    'dropdown': 'Dropdown',
+    'file': 'File',
+    'drawn field': 'Draw',
+    'regular expression': 'RegEx',
+};
+function getFieldPlaceholder(key) {
+    return defaultFieldPlaceholders[key] || 'eg. Full Name, Address, Company Name';
+}
+
+const lsFieldContentCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%}p{color:var(--gray-80, #6f7176);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)}.ls-dv-button-link,.ls-dv-button-link:hover{all:unset}select{appearance:none;height:2.2rem;width:100%}.ls-dv-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.625rem;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, #ffffff)}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, #ffffff)}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].ls-dv-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].ls-dv-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].ls-dv-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}.ls-dv-checkbox-container{display:flex;gap:0.5rem;width:100%}.ls-dv-checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.ls-dv-form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.ls-dv-form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.ls-dv-loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #4456f6)}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.ls-dv-tertiary-grey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #6f7176)}button.ls-dv-tertiary-grey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.ls-dv-secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #ffffff);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.ls-dv-secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.ls-dv-destructive{border:1px solid var(--red-60, #f64a44);background-color:white;color:var(--red-60, #f64a44)}button.ls-dv-destructive:hover{border:1px solid var(--red-70, #dc2721);background:var(--red-10, #fff0f0)}.ls-dv-button-group{display:flex;border-radius:0.625rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.ls-dv-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, #6f7176)}.ls-dv-button-group button:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-group>:first-child{border-radius:0.625rem 0 0 0.625rem}.ls-dv-button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.ls-dv-button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}.ls-dv-date-input-wrapper{position:relative;width:100%}.ls-dv-date-display{cursor:pointer;width:100%;box-sizing:border-box}.ls-dv-date-clear{position:absolute;right:0.5rem;top:0;bottom:0;display:flex;align-items:center;cursor:pointer;color:var(--gray-80, #6f7176)}.ls-dv-date-picker-hidden{position:absolute;opacity:0;pointer-events:none;top:0;left:0;width:100%;height:100%}`;
+
+const LsFieldContent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate", 7);
+        this.update = index.createEvent(this, "update", 7);
+    }
+    get component() { return index.getElement(this); }
+    dataItem;
+    showValidationTypes = true;
+    readonly = false;
+    mutate;
+    update;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    // NOTE this alter is debounced to account for typing
+    alter(diff) {
+        this.dataItem = { ...this.dataItem, ...diff };
+        this.debounce(this.dataItem, 500);
+    }
+    labeltimer;
+    debounce(data, delay) {
+        if (this.labeltimer)
+            clearTimeout(this.labeltimer);
+        this.labeltimer = setTimeout(() => {
+            const diffs = [{ action: 'update', data }];
+            this.mutate.emit(diffs);
+        }, delay);
+    }
+    supportsValue() {
+        const typesWithValue = ['signature', 'initials', 'image', 'file', 'signing', 'autosign', 'regex', 'signing date', 'auto sign', 'dropdown', 'checkbox'];
+        return !typesWithValue.includes(this.dataItem?.formElementType);
+    }
+    isDateField() {
+        return editorUtils.getInputType(this.dataItem?.validation)?.inputType === 'date';
+    }
+    /**
+     * Convert a formatted date value back to ISO (yyyy-mm-dd) for the native date input.
+     */
+    toISODate(value) {
+        if (!value)
+            return '';
+        const format = this.getDateFormat();
+        if (!format)
+            return value;
+        const sep = format.match(/[/.-]/)?.[0] || '/';
+        const parts = format.split(/[/.-]/);
+        const valueParts = value.split(sep);
+        if (valueParts.length < 2)
+            return value;
+        let y = '', m = '', d = '';
+        parts.forEach((p, i) => {
+            const v = valueParts[i] || '';
+            if (p.startsWith('y'))
+                y = v;
+            else if (p.startsWith('m'))
+                m = v;
+            else if (p.startsWith('d'))
+                d = v;
+        });
+        if (y.length === 2)
+            y = '20' + y;
+        if (!d)
+            d = '01';
+        return `${y.padStart(4, '0')}-${m.padStart(2, '0')}-${d.padStart(2, '0')}`;
+    }
+    /**
+     * Convert an ISO date (yyyy-mm-dd) to the configured format.
+     */
+    formatDateFromISO(isoValue) {
+        if (!isoValue)
+            return '';
+        const [y, m, d] = isoValue.split('-');
+        const format = this.getDateFormat();
+        if (!format)
+            return isoValue;
+        return format
+            .replace('yyyy', y)
+            .replace('yy', y.slice(-2))
+            .replace('mm', m)
+            .replace('dd', d)
+            .replace('d', String(parseInt(d)));
+    }
+    getDateFormat() {
+        const vType = editorUtils.validationTypes.find(v => v.id === this.dataItem?.validation);
+        if (!vType || vType.inputType !== 'date')
+            return null;
+        return vType.description;
+    }
+    getDateFormatById(validation) {
+        const vType = editorUtils.validationTypes.find(v => v.id === validation);
+        if (!vType || vType.inputType !== 'date')
+            return null;
+        return vType.description;
+    }
+    handleFormatChange(newValidation) {
+        const currentValue = this.dataItem?.value;
+        if (!currentValue || !this.isDateField()) {
+            this.alter({ validation: newValidation });
+            return;
+        }
+        // Parse current value to ISO using the old format
+        const oldFormat = this.getDateFormat();
+        const newFormat = this.getDateFormatById(newValidation);
+        if (!oldFormat || !newFormat) {
+            this.alter({ validation: newValidation });
+            return;
+        }
+        const parts = oldFormat.split(/[/.-]/);
+        const sep = oldFormat.match(/[/.-]/)?.[0] || '/';
+        const valueParts = currentValue.split(sep);
+        if (valueParts.length < 2) {
+            this.alter({ validation: newValidation });
+            return;
+        }
+        let y = '', m = '', d = '';
+        parts.forEach((p, i) => {
+            const v = valueParts[i] || '';
+            if (p.startsWith('y'))
+                y = v;
+            else if (p.startsWith('m'))
+                m = v;
+            else if (p.startsWith('d'))
+                d = v;
+        });
+        if (y.length === 2)
+            y = '20' + y;
+        if (!d)
+            d = '01';
+        const newValue = newFormat
+            .replace('yyyy', y.padStart(4, '0'))
+            .replace('yy', y.slice(-2))
+            .replace('mm', m.padStart(2, '0'))
+            .replace('dd', d.padStart(2, '0'))
+            .replace('d', String(parseInt(d)));
+        this.alter({ validation: newValidation, value: newValue });
+    }
+    render() {
+        return (index.h(index.Host, { key: '0e4be12a5cfe7d86afe3800c6dada17ee92ba0c6' }, index.h("ls-props-section", { key: '81618ff56ea83795b99d5d2a7f6fa0a30df55eb4', sectionTitle: i18n.dvI18n.t('fieldproperties.fieldtype'), sectionDescription: i18n.dvI18n.t('fieldproperties.fieldtypedescription') }, index.h("ls-field-type-display", { key: 'bc0e38160eefc5a20d6d549b1c43099e4afca657', fieldType: this.dataItem?.formElementType, assignee: this.dataItem?.signer })), this.dataItem?.formElementType !== 'signature' && (index.h("ls-props-section", { key: 'cef7f6d80321ed89c619cb084f007997b7f01b59', sectionTitle: i18n.dvI18n.t('fieldproperties.requiredfield'), row: true }, index.h("ls-toggle", { key: '8d0b4c10978029e70b145178df44982ee84f4d2e', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: ev => !this.readonly && this.alter({ optional: !ev.detail }) }))), index.h("ls-props-section", { key: 'fecc2570a73bcbb477dfc50f946c5365dcde1e8e', sectionTitle: i18n.dvI18n.t('fieldproperties.fieldlabel'), sectionDescription: i18n.dvI18n.t('fieldproperties.fieldlabeldescription') }, index.h("input", { key: '9e8a9a7324d1faeeceb9f32a6097cb30094c9862', value: this.dataItem?.label, placeholder: getFieldTitleSuggestion(this.dataItem?.formElementType), onInput: e => this.alter({ label: e.target.value }), disabled: this.readonly })), this.supportsValue() && (index.h("ls-props-section", { key: '5f00d7ccc50ebc2e0efb4c34e89245dc2478371e', sectionTitle: i18n.dvI18n.t('fieldproperties.value'), sectionDescription: i18n.dvI18n.t('fieldproperties.valuedescription') }, this.isDateField() ? (index.h("div", { class: "ls-dv-date-input-wrapper" }, index.h("input", { class: "ls-dv-date-display", type: "text", value: this.dataItem?.value, placeholder: this.getDateFormat(), readOnly: true, onClick: () => {
+                if (this.readonly)
+                    return;
+                const picker = this.component.shadowRoot.getElementById('ls-date-picker');
+                if (picker)
+                    picker.showPicker();
+            } }), this.dataItem?.value && !this.readonly && (index.h("div", { class: "ls-dv-date-clear", onClick: () => this.alter({ value: '' }) }, index.h("ls-icon", { name: "x-icon", size: 20 }))), index.h("input", { id: "ls-date-picker", class: "ls-dv-date-picker-hidden", type: "date", value: this.toISODate(this.dataItem?.value), onInput: e => this.alter({ value: this.formatDateFromISO(e.target.value) }), disabled: this.readonly }))) : (index.h("input", { value: this.dataItem?.value, placeholder: getFieldPlaceholder(this.dataItem?.formElementType), onInput: e => this.alter({ value: e.target.value }), disabled: this.readonly })))), this.dataItem.validation === 20 && (index.h("ls-props-section", { key: '9e0b123a33d3470a281fc966523780819bced98d', sectionTitle: i18n.dvI18n.t('fieldproperties.options'), sectionDescription: i18n.dvI18n.t('fieldproperties.optionsdescription') }, index.h("textarea", { key: 'e5a9f7de939f85523ae418bcb6ba7a3b9af0e702', value: this.dataItem?.options, placeholder: "Option 1\nOption 2\nOption 3", onInput: e => this.alter({ options: e.target.value }), disabled: this.readonly }))), this.showValidationTypes && (index.h("ls-props-section", { key: '91d2c6a1c55f172fedabca33a17f3460bb7e3c21', sectionTitle: i18n.dvI18n.t('fieldproperties.contentformat'), sectionDescription: i18n.dvI18n.t('fieldproperties.contentformatdescription') }, index.h("ls-input-wrapper", { key: 'fd3a78cf1b00343935eed87cd19fc87b484b6ee3', select: true }, index.h("select", { key: 'f7378995e328e5d556f910f7dee50245239438c2', onChange: ev => !this.readonly && this.handleFormatChange(parseInt(ev.target.value)) }, editorUtils.validationTypes
+            .filter(type => type.formType === this.dataItem?.formElementType)
+            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), index.h("slot", { key: '910ab65ef77ed05bbb03baf4d3eabaa31de90e6c' })));
+    }
+};
+LsFieldContent.style = lsFieldContentCss();
+
+const lsFieldDimensionsCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.ls-dv-field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-dv-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.ls-dv-row{flex-direction:row;align-items:center;justify-content:space-between}.ls-dv-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-dv-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-dv-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6f7176);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-dv-input-row{display:flex;gap:0.5rem}.ls-dv-input-row .ls-dv-input-wrapper input{width:9.313rem;max-width:9.313rem}p{color:var(--gray-80, #6f7176);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)}.ls-dv-button-link,.ls-dv-button-link:hover{all:unset}select{appearance:none;height:2.25rem}.ls-dv-input-wrapper{position:relative;width:100%}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}.ls-dv-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.625rem;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, #ffffff)}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, #ffffff)}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].ls-dv-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].ls-dv-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].ls-dv-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}.ls-dv-checkbox-container{display:flex;gap:0.5rem;width:100%}.ls-dv-checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.ls-dv-form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.ls-dv-form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.ls-dv-loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #4456f6)}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.ls-dv-tertiary-grey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #6f7176)}button.ls-dv-tertiary-grey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.ls-dv-button-group{display:flex;border-radius:0.625rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.ls-dv-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, #6f7176)}.ls-dv-button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #c8c9cc)}.ls-dv-button-group button:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-group>:first-child{border-radius:0.625rem 0 0 0.625rem}.ls-dv-button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.ls-dv-button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
+
+const LsFieldDimensions = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate", 7);
+        this.update = index.createEvent(this, "update", 7);
+    }
+    get component() { return index.getElement(this); }
+    dataItem;
+    template; // LSApiTemplate
+    readonly = false;
+    mutate;
+    update;
+    isSingle(dt) {
+        return dt.length === undefined;
+    }
+    isMultiple(dt) {
+        return typeof dt.length === 'number';
+    }
+    getDataItem() {
+        if (this.isSingle(this.dataItem)) {
+            return this.dataItem;
+        }
+        return this.dataItem[0];
+    }
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    alter(diff) {
+        console.log(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);
+        }
+        else {
+            const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } };
+            this.dataItem = singleDiff.data;
+            this.mutate.emit([singleDiff]);
+        }
+    }
+    componentDidLoad() {
+    }
+    render() {
+        return (index.h(index.Host, { key: '0e9b42741d60bbe49d52f45f645982bc642d5d34' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '1f669907f2be753ce0ef7bb365960c8500717832', class: 'ls-dv-field-properties-section' }, index.h("div", { key: 'ced0be23e9fb47c070c71b49fd8a0d7c87ba50e7', class: 'ls-dv-field-properties-section-text' }, index.h("p", { key: '91a6ed2cb926f852413c8cc4136e73f8be96789f', class: 'ls-dv-field-properties-section-title' }, i18n.dvI18n.t('dimensions.heightandwidth')), index.h("p", { key: '056a1356f7cc617b8bbcd4b52fd76c6f4aa05de5', class: 'ls-dv-field-properties-section-description' }, i18n.dvI18n.t('dimensions.heightandwidthdescription'))), index.h("div", { key: 'ea3693b69f5885fdca520d364a18e02ed67031c0', class: 'ls-dv-input-row' }, index.h("div", { key: '24bff14acd575184308a773cb6810109981c46f2', class: 'ls-dv-input-wrapper', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('dimensions.setwidthtooltip') }, index.h("ls-icon", { key: '245a595768df0e100bda26fefdf40c7a5feaa299', id: "selectLeadingIcon", name: "field-match-width-icon" }), index.h("input", { key: 'c0de745bfd8c1cda50775fe815ae8357a278df54', class: 'ls-dv-has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }), disabled: this.readonly })), index.h("div", { key: 'f67d9bb7be72bfa7d957a8067005258fdbb35a4f', class: 'ls-dv-input-wrapper', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('dimensions.setheighttooltip') }, index.h("ls-icon", { key: '2b484223f82787a2d190f680eece4efac6b2a6da', id: "selectLeadingIcon", name: "field-match-height-icon" }), index.h("input", { key: 'd02950f66080b493db2557cec9e56682ee64c67e', class: 'ls-dv-has-leading-icon', aria: "field-height", id: "field-height", onChange: e => this.alter({ height: e.target.value }), disabled: this.readonly }))))), this.isSingle(this.dataItem) && (index.h("div", { key: 'abbafd7091a36a54f247eb21f297ed7710b2cb2e', class: 'ls-dv-field-set' }, index.h("div", { key: 'a16a567451d7c74afce044d90f2f31a157c6d4d2', class: 'ls-dv-field-properties-section' }, index.h("div", { key: '1b1747281bd1b0f0595c90bbd593986ba815997e', class: 'ls-dv-field-properties-section-text' }, index.h("p", { key: '0a13f12229679eba1a5c123344a7551166039f6c', class: 'ls-dv-field-properties-section-title' }, i18n.dvI18n.t('dimensions.heightandwidth')), index.h("p", { key: 'e93f6d24eef96819bb2ca42115deaa00a2940b7a', class: 'ls-dv-field-properties-section-description' }, i18n.dvI18n.t('dimensions.heightandwidthdescription'))), index.h("div", { key: 'fa47853df4bd46e61ad3c6499eb03b751d61ae62', class: 'ls-dv-input-row' }, index.h("div", { key: 'c1e8fda7ebf9f3e69ac5ac8a075d5acc96ed5d25', class: 'ls-dv-input-wrapper', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('dimensions.setwidthtooltip') }, index.h("ls-icon", { key: 'e30403ad076cbe0917ec53d39d3d6d5b7fced56d', id: "selectLeadingIcon", name: "field-match-width-icon" }), index.h("input", { key: '30cf8e4f4161c1d790410b4adc38930c0d53f908', type: "number", class: 'ls-dv-has-leading-icon', aria: "field-width", id: "field-width", min: 5, max: this.dataItem.pageDimensions.width - this.dataItem.width, value: this.dataItem?.width, onChange: e => {
+                const di = this.getDataItem();
+                const newWidth = parseInt(e.target.value);
+                if (newWidth > di.pageDimensions.width - di.left) {
+                    return;
+                }
+                // If signature field with fixed scale, auto-adjust height
+                if (di.formElementType === 'signature' && this.template?.fixSignatureScale) {
+                    const newHeight = Math.round(newWidth / 3.8);
+                    this.alter({ width: newWidth, height: newHeight });
+                }
+                else {
+                    this.alter({ width: newWidth });
+                }
+            }, disabled: this.readonly })), index.h("div", { key: '29e4955be80aca046dc022a44d9330807e8b23bc', class: 'ls-dv-input-wrapper', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('dimensions.setheighttooltip') }, index.h("ls-icon", { key: '6cdc0ee8627b3c54a86b4044aa81fd23ede02e1f', id: "selectLeadingIcon", name: "field-match-height-icon" }), index.h("input", { key: 'c04fb2bd74fcfc27912af31e6d7bed279ad8a32a', type: "number", class: 'ls-dv-has-leading-icon', aria: "field-height", id: "field-height", value: this.dataItem?.height, onChange: e => {
+                const di = this.getDataItem();
+                const newHeight = parseInt(e.target.value);
+                if (newHeight > di.pageDimensions.height - di.top) {
+                    return;
+                }
+                // If signature field with fixed scale, auto-adjust width
+                if (di.formElementType === 'signature' && this.template?.fixSignatureScale) {
+                    const newWidth = Math.round(newHeight * 3.8);
+                    this.alter({ height: newHeight, width: newWidth });
+                }
+                else {
+                    this.alter({ height: newHeight });
+                }
+            }, disabled: this.readonly })))), index.h("div", { key: '878c30487b854b48fdf9057a5a524a535b227262', class: 'ls-dv-field-properties-section' }, index.h("div", { key: '4362ab681a2b0e9924f384bc25ba7c3040053bae', class: 'ls-dv-field-properties-section-text' }, index.h("p", { key: 'a9acb48901f676e66cab508809aba2306b3a8142', class: 'ls-dv-field-properties-section-title' }, i18n.dvI18n.t('dimensions.scaleandresize')), index.h("p", { key: 'b82f410992f55e21842def443bba3099e98d7af8', class: 'ls-dv-field-properties-section-description' }, i18n.dvI18n.t('dimensions.scaleandresizedescription'))), index.h("div", { key: 'a1b3a04c372dd165cf931da5d214f0de4c9dce5e', class: 'ls-dv-button-group' }, index.h("button", { key: '931f91906dcc46362eac9e02c7b34aa32e6c09fb', disabled: true, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.selectmultiplescale') }, index.h("ls-icon", { key: '748be84fdc37fa583d2aaf34e9b6b76d020ece06', name: "field-scale-icon" })), index.h("button", { key: '2d5fd027599fa7c44dc041e3e35c83917debb4a2', disabled: true, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.selectmultiplewidth') }, index.h("ls-icon", { key: '59f2c51db783030fedec6791a1837d153bd9f277', name: "field-match-width-icon" })), index.h("button", { key: 'a3c669555340a9389fcbc4b66fa8ba12cc7b2f4a', disabled: true, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.selectmultipleheight') }, index.h("ls-icon", { key: '85b7c0bcfbda2a9c56d6f855c0dfae4cbc75f670', name: "field-match-height-icon" })))))), index.h("ls-tooltip", { key: 'deb0e4b518c49c32f43fc4c230b44f83c9a70f56', tooltipId: "ls-dv-tooltip" })));
+    }
+};
+LsFieldDimensions.style = lsFieldDimensionsCss();
+
+const lsFieldFooterCss = () => `:host{display:block}.ls-dv-button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #edeff2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}button.ls-dv-secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #ffffff);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.ls-dv-secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.ls-dv-destructive{border:1px solid var(--red-60, #f64a44);background-color:white;color:var(--red-60, #f64a44)}button.ls-dv-destructive:hover{border:1px solid var(--red-70, #dc2721);background:var(--red-10, #fff0f0)}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}.ls-dv-full-rounded{border-radius:calc(infinity * 1px)}`;
+
+const LsFieldFooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate", 7);
+        this.update = index.createEvent(this, "update", 7);
+        this.selectFields = index.createEvent(this, "selectFields", 7);
+    }
+    /**
+     * The selected items information (as JSON).
+     * {LSApiElement[]}
+     */
+    dataItem;
+    readonly = false;
+    mutate;
+    update;
+    selectFields;
+    isSingle(dt) {
+        return dt.length === undefined;
+    }
+    isMultiple(dt) {
+        return typeof dt.length === 'number';
+    }
+    getItems() {
+        if (this.isSingle(this.dataItem)) {
+            return [this.dataItem];
+        }
+        return this.dataItem;
+    }
+    deleteField = () => {
+        this.mutate.emit(this.getItems().map(di => {
+            return { action: 'delete', data: di };
+        }));
+    };
+    duplicateField = () => {
+        this.getItems().forEach(current => {
+            const newItem = { ...current, id: btoa('ele' + crypto.randomUUID()) };
+            const newTop = current.top + current.height;
+            if (newTop + current.height < current.pageDimensions.height) {
+                newItem.top = newTop;
+            }
+            this.mutate.emit([{ action: 'create', data: newItem, select: 'clear' }]);
+        });
+    };
+    render() {
+        return (index.h(index.Host, { key: 'aa2114ec49122c9b4fc4dc52b872615e7aac9298' }, index.h("div", { key: 'fb73920bea0d61e8c480fa4c6fd01114f538f61d', class: 'ls-dv-button-footer' }, index.h("button", { key: '421ec450379a914374935eb3ae0c6754b56e4218', class: 'ls-dv-secondary ls-dv-full-rounded', onClick: () => this.duplicateField(), disabled: this.readonly }, index.h("ls-icon", { key: '00fb2e23a64f767198f87bd0a9bb50b55caa6a7f', name: "field-duplicate-icon", size: 20 }), i18n.dvI18n.t('common.duplicate')), index.h("button", { key: '714d2d886a01eabbfef26b52a501b9db3262fc4c', class: 'ls-dv-destructive ls-dv-full-rounded', onClick: () => this.deleteField(), disabled: this.readonly }, index.h("ls-icon", { key: '84995d30a3835bca5d227f948f6d771715504b09', name: "trash-icon", size: 20 }), i18n.dvI18n.t('common.delete'))), index.h("slot", { key: 'be10131be2d81b0f18d1114939edf4f4f3d32c60' })));
+    }
+};
+LsFieldFooter.style = lsFieldFooterCss();
+
+const lsFieldPlacementCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.ls-dv-field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-dv-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.ls-dv-row{flex-direction:row;align-items:center;justify-content:space-between}.ls-dv-multi-button-group-row{display:flex;gap:0.5rem}.ls-dv-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-dv-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-dv-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6f7176);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-dv-input-row{display:flex;gap:0.5rem}.ls-dv-input-row .ls-dv-input-wrapper input{width:9.313rem;max-width:9.313rem}p{color:var(--gray-80, #6f7176);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)}.ls-dv-button-link,.ls-dv-button-link:hover{all:unset}select{appearance:none;height:2.25rem}.ls-dv-input-wrapper{position:relative;width:100%}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #c8c9cc)}.ls-dv-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.625rem;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, #ffffff)}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, #ffffff)}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, #c8c9cc);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].ls-dv-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].ls-dv-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].ls-dv-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}.ls-dv-checkbox-container{display:flex;gap:0.5rem;width:100%}.ls-dv-checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.ls-dv-form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.ls-dv-form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.ls-dv-loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #4456f6)}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.ls-dv-tertiary-grey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #6f7176)}button.ls-dv-tertiary-grey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.ls-dv-button-group{display:flex;border-radius:0.625rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip;width:100%}.ls-dv-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, #6f7176)}.ls-dv-button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #c8c9cc)}.ls-dv-button-group button:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-group>:first-child{border-radius:0.625rem 0 0 0.625rem}.ls-dv-button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.ls-dv-button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
+
+const LsFieldPlacement = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate", 7);
+    }
+    get component() { return index.getElement(this); }
+    dataItem;
+    readonly = false;
+    mutate;
+    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);
+        }
+        else {
+            const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } };
+            this.dataItem = singleDiff.data;
+            this.mutate.emit([singleDiff]);
+        }
+    }
+    center() {
+        const item = this.dataItem;
+        return item.pageDimensions.width / 2 - item.width / 2;
+    }
+    right() {
+        const item = this.dataItem;
+        return item.pageDimensions.width - item.width;
+    }
+    middle() {
+        const item = this.dataItem;
+        return item.pageDimensions.height / 2 - item.height / 2;
+    }
+    bottom() {
+        const item = this.dataItem;
+        return item.pageDimensions.height - item.height;
+    }
+    componentDidLoad() {
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e4cecb1b45b1b52a73c6a297f11716e25193497a' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '7b6ae2f7c44dc7386e961467b7388db7be8be4a6', class: 'ls-dv-field-properties-section' }, index.h("div", { key: '8d772addd2b139c86a715ca6ae85c63c42829c0b', class: 'ls-dv-field-properties-section-text' }, index.h("p", { key: '101cc43e81a55d022ce0a6d85764e029bd7f0690', class: 'ls-dv-field-properties-section-title' }, i18n.dvI18n.t('placement.location')), index.h("p", { key: '1060ade0f0d90005fae6a5470b46723016375ac2', class: 'ls-dv-field-properties-section-description' }, i18n.dvI18n.t('placement.locationdescription'))), index.h("div", { key: 'dc9b6b50d2b71e70d6271e91a24f96554f19b218', class: 'ls-dv-input-row' }, index.h("div", { key: '4cabff83ee795ba7f4bf30a368dd71bbeb2f6cbe', class: 'ls-dv-input-wrapper' }, index.h("ls-icon", { key: 'ba2eb3d5e3116aa267060128d620e5fbf0dcc733', id: "selectLeadingIcon", name: "x-letter-icon" }), index.h("input", { key: 'f3830cb770cd9673f87d5ad4bbcc46434bc01baf', type: "number", class: 'ls-dv-has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }), disabled: this.readonly })), index.h("div", { key: 'a0a8c51643c6e91c8fcab8c234df0dd6a250357e', class: 'ls-dv-input-wrapper' }, index.h("ls-icon", { key: 'af147ec36c9598baa4f2b181597ee799b7ea8d0b', id: "selectLeadingIcon", name: "y-icon" }), index.h("input", { key: '52ea8f6ad247828c19630e30f5c9a4951f991a6f', type: "number", class: 'ls-dv-has-leading-icon', aria: "left-location", id: "left-location", onChange: e => this.alter({ top: e.target.value }), disabled: this.readonly }))))), this.isSingle(this.dataItem) && (index.h("div", { key: '58090f76410f368348abdf86de34c3dd03390e98', class: 'ls-dv-field-set' }, index.h("div", { key: '048df96d3cf06b5be5b4c85bcf0d1eb9a32bd46c', class: 'ls-dv-field-properties-section' }, index.h("div", { key: '9caf97467fd013420f512020dfdbd37926d3cf67', class: 'ls-dv-field-properties-section-text' }, index.h("p", { key: 'aebe43b21d71d1c48f69063fdfc5dd63635be0e9', class: 'ls-dv-field-properties-section-title' }, i18n.dvI18n.t('placement.alignment')), index.h("p", { key: '39c53749c03caed38962b87544636252311fa524', class: 'ls-dv-field-properties-section-description' }, i18n.dvI18n.t('placement.alignmentdescription'))), index.h("div", { key: '1a94c1e6571b793cb620410a94ab109eb845c42e', class: 'ls-dv-multi-button-group-row' }, index.h("div", { key: '1a12afd1b24edb219dda9548c572cbe04dfa681f', class: 'ls-dv-button-group' }, index.h("button", { key: '923c539ee81769675f1e19b794bef5870f761444', onClick: () => { this.alter({ left: 0 }); }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.alignleft'), disabled: this.readonly }, index.h("ls-icon", { key: 'd3a6df642e37aa29d33c0b28daf5ba3288b0c81c', name: "field-alignment-left-icon" })), index.h("button", { key: '9ddb439ccec7afee3b31acbf2920b2027639ca7e', onClick: () => { this.alter({ left: this.center() }); }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.aligncenter'), disabled: this.readonly }, index.h("ls-icon", { key: 'a75aa9aa8ce7760dc6ef37d91c4ce68eb93a3a4b', name: "field-alignment-centre-icon" })), index.h("button", { key: '3009dd829abd962ef347b23410e9f09a6b53bb2e', onClick: () => { this.alter({ left: this.right() }); }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.alignright'), disabled: this.readonly }, index.h("ls-icon", { key: '74c4e39971b6c3e14280d77eb49f8e7582206009', name: "field-alignment-right-icon" }))), index.h("div", { key: '394b8e0e71c78483314eb7faebfd9a2a295e3f8e', class: 'ls-dv-button-group' }, index.h("button", { key: '2b46c6fd1492344936c4a2e8c43eba046edffe9e', onClick: () => this.alter({ top: 0 }), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.aligntop'), disabled: this.readonly }, index.h("ls-icon", { key: '99b94fd721ef73e698c6ef519e223a0f1a43d8b9', name: "field-alignment-top-icon" })), index.h("button", { key: '67f890427ebc8d2b5a20fe0209c0c12f23456cba', onClick: () => { this.alter({ top: this.middle() }); }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.alignmiddle'), disabled: this.readonly }, index.h("ls-icon", { key: '4b385ed96004bb1a415a29a535c8570e1be03a30', name: "field-alignment-middle-icon" })), index.h("button", { key: '6e7a801acd6188a4e13dba53ec10f40323368795', onClick: () => { this.alter({ top: this.bottom() }); }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.alignbottom'), disabled: this.readonly }, index.h("ls-icon", { key: 'e3204faf98839060e3d42a497ed679421ef6c303', name: "field-alignment-bottom-icon" }))))), index.h("div", { key: '0c1d177d048554856696e1a98080207070c65b0d', class: 'ls-dv-field-properties-section' }, index.h("div", { key: 'e036fb70766fb6946ec2190395712c1e2cbf9427', class: 'ls-dv-field-properties-section-text' }, index.h("p", { key: 'b0e60929ae71cb630649407a4726cc7a3ece041e', class: 'ls-dv-field-properties-section-title' }, i18n.dvI18n.t('placement.location')), index.h("p", { key: '1ccc216cd8230df41531412ba0251343037d67e6', class: 'ls-dv-field-properties-section-description' }, i18n.dvI18n.t('placement.locationdescription'))), index.h("div", { key: 'ee3697e2bb5e060a14f17946f810d1b507e84f6d', class: 'ls-dv-input-row' }, index.h("div", { key: '69b0352255d6831e38d2d54a6f34cd77db3c6a82', class: 'ls-dv-input-wrapper' }, index.h("ls-icon", { key: '39605c04b62d34bf7a00da06efb9ba836a56556c', id: "selectLeadingIcon", name: "x-letter-icon" }), index.h("input", { key: '42005e3f8da2343bdaf665f85c92c7a3ef615d97', type: "number", class: 'ls-dv-has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }), disabled: this.readonly })), index.h("div", { key: 'ae398283e853efba30211acfa0834920e06d7423', class: 'ls-dv-input-wrapper' }, index.h("ls-icon", { key: '539f95481c2f67d1e53dc12c92cbe3f7ffd465ec', id: "selectLeadingIcon", name: "y-icon" }), index.h("input", { key: 'ac010c6c6bb953dc5cee2247560612745e281125', type: "number", class: 'ls-dv-has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }), width: "30", disabled: this.readonly })))), index.h("div", { key: '28a45ddb0b8d0c30a242239797d9a82b30a88eec', class: 'ls-dv-field-properties-section' }, index.h("div", { key: '1ed9d37343542c92f2fc461e57f0313b6d55c4dd', class: 'ls-dv-field-properties-section-text' }, index.h("p", { key: '4985c99bd11ff5d3fa42d680681cfe9a68e44a9f', class: 'ls-dv-field-properties-section-title' }, i18n.dvI18n.t('placement.distribution')), index.h("p", { key: '5b1bbf5eefd67bdb12dc20f677c34d8db1ee4594', class: 'ls-dv-field-properties-section-description' }, i18n.dvI18n.t('placement.distributiondescription'))), index.h("div", { key: 'b85f695ca323ce6185304a81c4f5eb901b89a1b3', class: 'ls-dv-button-group' }, index.h("button", { key: 'f9222c6b558bed7f58868ecfd75bf097b3429a14', disabled: true, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.selectmultipledistribution') }, index.h("ls-icon", { key: 'dc0f9cb2a03c6f37749167c8f6be533dac28bc11', name: "field-distribute-vertically-icon" })), index.h("button", { key: '807f30c7dd1bbe4dd9ff1a2d3cf6cb3b8e0e1934', disabled: true, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('alignment.selectmultipledistribution') }, index.h("ls-icon", { key: '434d37c2ceadff7c2df869419b8f57a2a0d3b7a7', name: "field-distribute-horizontally-icon" })))), index.h("div", { key: '10b6c49e0009e36f37527bbaa372da914f3cace1', class: 'ls-dv-field-properties-section' }, index.h("div", { key: '679330c9c77efbf47ce6da02bc3b5e7ebfeedcf0', class: 'ls-dv-field-properties-section-text' }, index.h("p", { key: '12571251a28eaa944c23903622c0612efbc406f8', class: 'ls-dv-field-properties-section-title' }, i18n.dvI18n.t('placement.gap')), index.h("p", { key: 'd8bf72df6d661a320567b9b612efa53d7d3f5294', class: 'ls-dv-field-properties-section-description' }, i18n.dvI18n.t('placement.gapdescription'))), index.h("div", { key: 'c0b363b34c5729c32ae9ddca3e4a33c67981430c', class: 'ls-dv-input-row' }, index.h("div", { key: '53bc64218e0ee697a3eefe2ee3bce29d6e443f5e', class: 'ls-dv-input-wrapper', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('placement.selectmultiplegap') }, index.h("ls-icon", { key: '2fb36fec5da510cd4a9b2ce3ea5b611d4aafe482', id: "selectLeadingIconDisabled", name: "field-distribute-vertically-icon" }), index.h("input", { key: '747db95eb6c69b0611e7639b71c78572934d46fe', type: "number", value: "0", class: 'ls-dv-has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), index.h("div", { key: '3377a2882a37017fe92d16bb432a79d26f773476', class: 'ls-dv-input-wrapper', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('placement.selectmultiplegap') }, index.h("ls-icon", { key: '02203bd470da7cae0f5a27401abf6fdfac2c7d03', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally-icon" }), index.h("input", { key: '46a9651a3e3c86827527398c422cfe24424e5c16', type: "number", value: "0", class: 'ls-dv-has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true })))))), index.h("ls-tooltip", { key: '1c02d8d26c18c7201edd77de73180069c19bf188', tooltipId: "ls-dv-tooltip" })));
+    }
+};
+LsFieldPlacement.style = lsFieldPlacementCss();
+
+const lsFieldPropertiesAdvancedCss = () => `:host,.ls-dv-field-set{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.ls-dv-expand-fields-row{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.25rem;cursor:pointer;color:var(--gray-80, #6f7176);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-dv-expand-fields-row p{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem;}.ls-dv-field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-dv-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.ls-dv-row{flex-direction:row;align-items:center;justify-content:space-between}.ls-dv-multi-button-group-row{display:flex;gap:0.5rem}.ls-dv-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-dv-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-dv-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6f7176);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-dv-input-row{display:flex;gap:0.5rem}.ls-dv-input-row .ls-dv-input-wrapper input{width:9.313rem;max-width:9.313rem}p{color:var(--gray-80, #6f7176);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)}.ls-dv-button-link,.ls-dv-button-link:hover{all:unset}select{appearance:none;height:2.25rem}.ls-dv-input-wrapper{position:relative;width:100%}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #c8c9cc)}.ls-dv-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.625rem;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, #ffffff)}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, #ffffff)}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, #c8c9cc);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].ls-dv-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].ls-dv-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].ls-dv-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}.ls-dv-checkbox-container{display:flex;gap:0.5rem;width:100%}.ls-dv-checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.ls-dv-form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.ls-dv-form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.ls-dv-loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #4456f6)}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.ls-dv-tertiary-grey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #6f7176)}button.ls-dv-tertiary-grey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.ls-dv-button-group{display:flex;border-radius:0.625rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip;width:100%}.ls-dv-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, #6f7176)}.ls-dv-button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #c8c9cc)}.ls-dv-button-group button:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-group>:first-child{border-radius:0.625rem 0 0 0.625rem}.ls-dv-button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.ls-dv-button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
+
+const LsFieldPropertiesAdvanced = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate", 7);
+    }
+    dataItem;
+    expanded = false;
+    readonly = false;
+    mutate;
+    isSingle(dt) {
+        return dt.length === undefined;
+    }
+    isMultiple(dt) {
+        return typeof dt.length === 'number';
+    }
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    // NOTE this alter is debounced to account for typing
+    alter(diff, bounceDelay = 0) {
+        console.log('Altering advanced props:', diff);
+        let diffs = [];
+        if (this.isMultiple(this.dataItem)) {
+            this.dataItem = this.dataItem.map(di => {
+                return { ...di, ...diff };
+            });
+            diffs = this.dataItem.map(di => {
+                return { action: 'update', data: { ...di, ...diff } };
+            });
+        }
+        else if (this.isSingle(this.dataItem)) {
+            this.dataItem = { ...this.dataItem, ...diff };
+            diffs = [{ action: 'update', data: { ...this.dataItem, ...diff } }];
+        }
+        if (bounceDelay === 0) {
+            this.mutate.emit(diffs);
+        }
+        else {
+            this.debounce(diffs, bounceDelay);
+        }
+    }
+    titletimer;
+    debounce(diffs, delay) {
+        if (this.titletimer)
+            clearTimeout(this.titletimer);
+        this.titletimer = setTimeout(() => {
+            this.mutate.emit(diffs);
+        }, delay);
+    }
+    getValue(key) {
+        if (this.isMultiple(this.dataItem)) {
+            return '';
+        }
+        else if (this.isSingle(this.dataItem)) {
+            return this.dataItem[key];
+        }
+        return '';
+    }
+    render() {
+        return (index.h(index.Host, { key: 'eb656c09625879e4d3612c5b4acc1997fe1c8698' }, index.h("div", { key: 'a297ab7603a5623258a74fa383c93d222f0ca535', class: 'ls-dv-expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, index.h("ls-icon", { key: 'db6bd74a2f6bb4124bd48d598454e54cc0cf246d', name: this.expanded ? 'expand-icon' : 'collapse-icon', size: 20, solid: true }), index.h("p", { key: '098a2920b709a1f0681d188fa8f8a865c6cb32d2' }, i18n.dvI18n.t('fieldproperties.advancedproperties'))), this.expanded && (index.h("div", { key: '863ba9fe5b803b3cbb14d181475d0bcddc1dfbdc', class: 'ls-dv-field-set' }, index.h("ls-props-section", { key: '6d4f705a6cb2aabc6233d214e7e77dc1c9df559f', sectionTitle: i18n.dvI18n.t('fieldproperties.fieldorder'), sectionDescription: i18n.dvI18n.t('fieldproperties.fieldorderdescription') }, index.h("input", { key: '15e33574cc10e6e17c63d32b37aeb170f7b3f38b', value: this.getValue('fieldOrder'), type: "number", placeholder: i18n.dvI18n.t('fieldproperties.placeholdereg1'), onInput: e => {
+                console.log(e);
+                this.alter({ fieldOrder: e.target.value }, 100);
+            }, onChange: () => { console.log('onchange'); }, disabled: this.readonly })), index.h("ls-props-section", { key: 'c6159d497f2caac1f154553dea7551648e678385', sectionTitle: i18n.dvI18n.t('fieldproperties.refname') }, index.h("input", { key: 'd6d62d47d7adcf3bc0e4fa23ecaafef6f1052f36', value: this.getValue('link'), placeholder: i18n.dvI18n.t('fieldproperties.placeholdercheckboxgroup'), onInput: e => this.alter({ link: e.target.value }, 300), disabled: this.readonly })), index.h("ls-props-section", { key: 'acb93cbe70ee5075cdae8fa4b804221f65093dd3', sectionTitle: i18n.dvI18n.t('fieldproperties.linktype'), sectionDescription: i18n.dvI18n.t('fieldproperties.linktypedescription') }, index.h("select", { key: 'e2cf557ed86879e8ee4bcccf147f3688f7aac7a2', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field", disabled: this.readonly }, index.h("option", { key: '61bdfe8fa2a3fb0bfaf9dd18c0a4c851ba39fc35', value: "0", selected: this.getValue('linkType') === '0' }, i18n.dvI18n.t('fieldproperties.linktypenoption')), index.h("option", { key: 'a4a972ada49832c83b713fafc75788b081984f7b', value: "1", selected: this.getValue('linkType') === '1' }, i18n.dvI18n.t('fieldproperties.linktypeoneofgroup')), index.h("option", { key: '72778b6f85eec93f15c301e820c04f384caead45', value: "2", selected: this.getValue('linkType') === '2' }, i18n.dvI18n.t('fieldproperties.linktypeaddtotal')), index.h("option", { key: '31fcf1a5098493acb682035e60bee2cc13f291a0', value: "3", selected: this.getValue('linkType') === '3' }, i18n.dvI18n.t('fieldproperties.linktypeconditional')))), index.h("ls-props-section", { key: '3644d32d8db6a2554b666fae6778ccb000e77372', sectionTitle: i18n.dvI18n.t('fieldproperties.linkvalue'), sectionDescription: i18n.dvI18n.t('fieldproperties.linkvaluedescription') }, index.h("input", { key: 'd1767d9c30f7143ab6e5c5cfeebc1c98ff1cfed4', value: this.getValue('logicAction'), width: "30", placeholder: i18n.dvI18n.t('fieldproperties.placeholdercheckboxgroup'), onChange: e => this.alter({ logicAction: e.target.value }), disabled: this.readonly }))))));
+    }
+};
+LsFieldPropertiesAdvanced.style = lsFieldPropertiesAdvancedCss();
+
+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}.ls-dv-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-dv-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, #6f7176);text-transform:capitalize}.ls-dv-tab.ls-dv-active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-dv-tab:not(.ls-dv-active):hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #edeff2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.ls-dv-scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:100%}`;
+
+const LsFieldPropertiesContainer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    dataItem;
+    tabs = [];
+    selectedTab;
+    componentWillLoad() {
+        if (!this.selectedTab) {
+            this.selectedTab = this.tabs[0] || '';
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'b1fd1ab25e56d0f6b009012bd03c8e16f0ca7e54' }, this.tabs.length > 1 && (index.h("div", { key: '6c2ae62c5b3ee2d46e25b37c5d6c945874737a66', class: 'ls-dv-tabs-container', style: { gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` } }, this.tabs.map(tab => (index.h("button", { class: tab === this.selectedTab ? 'ls-dv-tab ls-dv-active' : 'ls-dv-tab', onClick: () => (this.selectedTab = tab) }, i18n.dvI18n.t(`tabs.${tab}`, { defaultValue: tab })))))), index.h("div", { key: '60a78fab9be2656cbcd0a842c84a0471c9f68dbd', class: 'ls-dv-scrolling-container' }, index.h("slot", { key: '8f59435c282ddf990a499745aa013d68acb0f604', name: this.selectedTab }))));
+    }
+};
+LsFieldPropertiesContainer.style = lsFieldPropertiesContainerCss();
+
+const lsFieldTypeDisplayCss = () => `:host{position:relative;border-radius:0.875rem;padding:0.25rem}*{margin:0}.ls-dv-field-type-inner{border-radius:0.625rem;background:var(--white, #ffffff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-dv-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.625rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-dv-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}`;
+
+const fieldTypeKeyMap = {
+    'signature': 'toolbox.signature',
+    'auto sign': 'toolbox.autosign',
+    'text': 'toolbox.text',
+    'signing date': 'toolbox.signingdate',
+    'date': 'toolbox.date',
+    'initials': 'toolbox.initials',
+    'checkbox': 'toolbox.checkbox',
+    'email': 'toolbox.email',
+    'number': 'toolbox.number',
+    'image': 'toolbox.image',
+    'dropdown': 'toolbox.dropdown',
+    'file': 'toolbox.file',
+    'drawn field': 'toolbox.drawn',
+    'drawn': 'toolbox.drawn',
+    'regular expression': 'toolbox.regex',
+    'regex': 'toolbox.regex',
+};
+const LsFieldTypeDisplay = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    assignee;
+    fieldType = 'signature';
+    render() {
+        const color = defaultPalette.defaultRolePalette[this.assignee % 100];
+        return (index.h(index.Host, { key: '6a2cfab9cd4eb4d95801d71bcae604f2744bebc4', class: 'ls-dv-field-type-wrapper', style: {
+                border: `1px dashed ${color.s30}`,
+                background: color.s10,
+            } }, index.h("div", { key: '533a2bf184ae588df504b234301419f535e0677b', class: 'ls-dv-field-type-inner' }, index.h("div", { key: 'ff3fb83bf8d6af13c87057b51b41a6cd35b49074', class: 'ls-dv-field-type-icon', style: {
+                border: `1px solid ${color.s60}`,
+                color: color.s60,
+                background: color.s10,
+            } }, index.h("ls-icon", { key: 'ba985706d34c598b9f28f5a9509d47088400001b', name: defaultFieldIcons.getFieldIcon(this.fieldType), size: 20 })), index.h("p", { key: '9e0272aa299553551f329513f9b31dbef6fd992f', class: 'ls-dv-field-type-name' }, i18n.dvI18n.t(fieldTypeKeyMap[this.fieldType] || 'toolbox.text')))));
+    }
+};
+LsFieldTypeDisplay.style = lsFieldTypeDisplayCss();
+
+const lsInputWrapperCss = () => `*{margin:0;padding:0;box-sizing:border-box}:host{position:relative}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}`;
+
+const LsInputWrapper = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    leadingIcon;
+    select = false;
+    render() {
+        return (index.h(index.Host, { key: 'd9aae457a6635653ae09a2a377a28c495a399e33' }, index.h("ls-icon", { key: 'ff2b76de99fb5744955ae33d0092f6c214d8b3ff', id: "selectLeadingIcon", name: this.leadingIcon }), this.select && index.h("ls-icon", { key: 'ecfbcaf860205ed494c69f8f94072e1ab7c158f7', id: "selectorIcon", name: "selector-icon" }), index.h("slot", { key: 'b0c7b2925c5faf47c5eb9894628faff6c61a5406' })));
+    }
+};
+LsInputWrapper.style = lsInputWrapperCss();
+
+const lsPropsSectionCss = () => `*{margin:0;box-sizing:border-box}.ls-dv-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.ls-dv-row{flex-direction:row;align-items:center;justify-content:space-between}.ls-dv-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-dv-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-dv-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6f7176);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}`;
+
+const LsPropsSection = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    sectionTitle;
+    sectionDescription;
+    row = false;
+    render() {
+        return (index.h(index.Host, { key: '3f2224c67ebe53ec426e8f8a63f0a259ecdbad9e' }, index.h("div", { key: '2c181dca209fb4b6e5283112b85ac4efa291a1eb', class: this.row ? 'ls-dv-field-properties-section ls-dv-row' : 'ls-dv-field-properties-section' }, index.h("div", { key: '702b6b85e9e218ebf2766da0ac8a52346169bb92', class: 'ls-dv-field-properties-section-text' }, index.h("p", { key: 'ef78bc391a28a95230cd88f47c8d22af87e39c14', class: 'ls-dv-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && index.h("p", { key: 'd3cffb66d8b11cab63cede087c8a3bf4c5686810', class: 'ls-dv-field-properties-section-description' }, this.sectionDescription)), index.h("slot", { key: '7850ce0fc5feffc06e6a19ed761a13323e80b867' }))));
+    }
+};
+LsPropsSection.style = lsPropsSectionCss();
+
+const lsToggleCss = () => `:host{display:block}.ls-dv-switch{position:relative;display:inline-block;width:2.75rem;height:1.5rem}.ls-dv-switch input{opacity:0;width:0;height:0}.ls-dv-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--gray-20, #edeff2);-webkit-transition:0.4s;transition:0.4s}.ls-dv-indeterminate{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--primary-60, #4456f6);-webkit-transition:0.4s;transition:0.4s}.ls-dv-slider:before{position:absolute;content:"";height:1.25rem;width:1.25rem;left:0.125rem;bottom:0.125rem;background-color:white;-webkit-transition:0.4s;transition:0.4s}.ls-dv-indeterminate::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.75rem;height:0.125rem;background-color:white}input:checked+.ls-dv-slider{background-color:var(--primary-60, #4456f6)}input:focus+.ls-dv-slider{box-shadow:0 0 1px var(--primary-60, #4456f6);outline:0.25rem solid var(--primary-20, #c7ddff)}input:checked+.ls-dv-slider:before{-webkit-transform:translateX(1.25rem);-ms-transform:translateX(1.25rem);transform:translateX(1.25rem)}.ls-dv-slider.ls-dv-round,.ls-dv-indeterminate.ls-dv-round{border-radius:2.125rem}.ls-dv-slider.ls-dv-round:before{border-radius:50%}`;
+
+const LsToggle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+    }
+    checked;
+    indeterminate;
+    valueChange;
+    changeHandler(value) {
+        this.valueChange.emit(value);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'a0e9363f664fbe63f0e21418358ee36d1bce7989' }, index.h("label", { key: '566d7acc3e867c28949435faa722383b26021587', class: "ls-dv-switch" }, index.h("input", { key: 'fb403ac16957603f87aa3cd9fd7a1067eb6c3d37', type: "checkbox", checked: this.checked, onChange: (e) => {
+                this.changeHandler(e.target.checked);
+            } }), index.h("span", { key: 'b376947015c1dd3430da844f31cc2e12921a29cc', class: `${this.indeterminate ? 'ls-dv-indeterminate' : 'ls-dv-slider'} ls-dv-round` })), index.h("slot", { key: '92d2c3e4e72c4f6de9666af121938c221ebc90f7' })));
+    }
+};
+LsToggle.style = lsToggleCss();
+
+exports.ls_editor_field = LsEditorField;
+exports.ls_field_content = LsFieldContent;
+exports.ls_field_dimensions = LsFieldDimensions;
+exports.ls_field_footer = LsFieldFooter;
+exports.ls_field_placement = LsFieldPlacement;
+exports.ls_field_properties_advanced = LsFieldPropertiesAdvanced;
+exports.ls_field_properties_container = LsFieldPropertiesContainer;
+exports.ls_field_type_display = LsFieldTypeDisplay;
+exports.ls_input_wrapper = LsInputWrapper;
+exports.ls_props_section = LsPropsSection;
+exports.ls_toggle = LsToggle;
+//# sourceMappingURL=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-input-wrapper.ls-props-section.ls-toggle.entry.cjs.js.map