legalesign-document-viewer 1.0.2 → 1.0.4

package/dist/components/{p-CxWGojFs.js → p-CLklwQ7z.js}

@@ -23,9 +23,6 @@ const LsDocumentOptions = /*@__PURE__*/ proxyCustomElement(class LsDocumentOptio
      */
     template;
     editTitle = false;
-    selectedHandler(newSelected, _oldSelected) {
-        console.log(newSelected, 'document manager');
-    }
     mutate;
     update;
     // Send one or more mutations up the chain
@@ -76,20 +73,15 @@ const LsDocumentOptions = /*@__PURE__*/ proxyCustomElement(class LsDocumentOptio
                 this.alter({ locked: e.detail });
             } })), h("div", { class: 'ls-dv-template-detail-section' }, h("div", null, h("p", { class: "ls-dv-template-detail-section-title", "tooltip-data": "Fixes the aspect ratio of all signatures on the document. This allows Participants to re-use the same signature throughout the signing process. If this setting is turned on after several signature fields have been placed, fields will automatically re-size to match the aspect ratio of the first signature on the Template." }, dvI18n.t('documentoptions.fixedsignatureaspect')), h("p", { class: 'ls-dv-template-detail-section-info' }, dvI18n.t('documentoptions.fixedsignatureaspectdescription'))), h("ls-toggle", { checked: this.template?.fixSignatureScale, onValueChange: e => {
                 this.alter({ fixSignatureScale: e.detail });
-            } })), h("div", { class: 'ls-dv-template-detail-section ls-dv-column' }, h("p", { class: "ls-dv-template-detail-section-title" }, dvI18n.t('documentoptions.documentretention')), h("p", null, h("input", { value: this.template?.documentRetentionDays, style: { width: '100%' }, type: 'number', onInput: e => {
+            } })), h("div", { class: 'ls-dv-template-detail-section ls-dv-column' }, h("p", { class: "ls-dv-template-detail-section-title" }, dvI18n.t('documentoptions.documentretention')), h("p", null, h("input", { type: 'number', min: '0', value: this.template?.documentRetentionDays, style: { width: '100%' }, onInput: e => {
                 e.preventDefault();
                 this.alter({ documentRetentionDays: e.target.value });
             } }))), h("div", { class: 'ls-dv-template-detail-section ls-dv-column' }, h("p", { class: "ls-dv-template-detail-section-title" }, dvI18n.t('documentoptions.pages')), h("p", null, this.template?.pageCount)), h("div", { class: 'ls-dv-template-detail-section ls-dv-column' }, h("p", { class: "ls-dv-template-detail-section-title" }, dvI18n.t('documentoptions.datecreated')), " ", h("p", null, formatDate(this.template?.created))), h("div", { class: 'ls-dv-template-detail-section ls-dv-column' }, h("p", { class: "ls-dv-template-detail-section-title" }, dvI18n.t('documentoptions.createdby')), " ", h("p", null, this.template?.createdBy))), h("slot", null), h("ls-tooltip", { tooltipId: "ls-dv-tooltip" })));
     }
-    static get watchers() { return {
-        "template": ["selectedHandler"]
-    }; }
     static get style() { return lsDocumentOptionsCss(); }
 }, [769, "ls-document-options", {
         "template": [1040],
         "editTitle": [32]
-    }, undefined, {
-        "template": ["selectedHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
@@ -122,6 +114,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsDocumentOptions as L, defineCustomElement as d };
-//# sourceMappingURL=p-CxWGojFs.js.map
+//# sourceMappingURL=p-CLklwQ7z.js.map
 
-//# sourceMappingURL=p-CxWGojFs.js.map
+//# sourceMappingURL=p-CLklwQ7z.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CLklwQ7z.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-document-options/ls-document-options.scss?tag=ls-document-options&encapsulation=shadow","src/components/ls-document-options/ls-document-options.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n:host {\n  display: block;\n}\n\n.ls-dv-editor-infobox {\n  padding: 0.125rem 0.5rem 0.125rem 0.5rem;\n}\n\n.ls-dv-toolbox-section-title {\n  color: $gray-100;\n  font-size: 1.125rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.75rem; /* 155.556% */\n}\n\n.ls-dv-toolbox-section-description {\n  color: $gray-80;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.ls-dv-template-details {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.ls-dv-template-detail-section {\n  position: relative;\n  display: flex;\n  padding: 0.75rem;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 1rem;\n  border: 1px solid $gray-30;\n  background: $white;\n}\n\n.ls-dv-template-detail-section-title {\n  color: $gray-80;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  width: 100%;\n}\n\n.ls-dv-template-detail-section-info {\n  color: $gray-70;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 142.857% */\n  width: 100%;\n}\n\n.ls-dv-template-title {\n  border-radius: 0.625rem;\n  padding: 0.25rem;\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem; /* 150% */\n  cursor: pointer;\n  width: 100%;\n  margin-top: -0.125rem;\n\n}\n\n.ls-dv-template-title:hover {\n  background: $gray-10;\n}\n\n.ls-dv-column {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start\n}\n\n.ls-dv-edit-button {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  margin: 0px;\n  padding: 0px;\n  max-height: 1.25rem !important;\n  max-width: 1.25rem !important;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  color: $gray-70;\n}\n\n\n.ls-dv-edit-button:hover {\n  color: $gray-80;\n}\n\n/* Global Styles */\n\np {\n  color: $gray-80;\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: $primary-60;\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: $primary-70;\n}\n\n.ls-dv-button-link,\n.ls-dv-button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 2.25rem;\n}\n\n.ls-dv-input-wrapper {\n  position: relative;\n  width: fit-content;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: $gray-80;\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: $gray-80;\n}\n\n.ls-dv-has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid $gray-40;\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.625rem;\n  color: $gray-100;\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: $gray-60;\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: $gray-50;\n  background-color: $white;\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem $primary-40;\n  border-color: $primary-60;\n  background-color: $white;\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: $primary-50;\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: $gray-10;\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'].ls-dv-indeterminate {\n  background-color: $primary-60;\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'].ls-dv-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'].ls-dv-indeterminate:hover {\n  background-color: $primary-70;\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 $primary-20;\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.ls-dv-checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.ls-dv-checkbox-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.ls-dv-form-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.ls-dv-form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.ls-dv-loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: $primary-60;\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: $primary-60;\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.ls-dv-tertiary-grey {\n  border: 1px solid $gray-40;\n  background-color: white;\n  color: $gray-80;\n}\n\nbutton.ls-dv-tertiary-grey:hover {\n  border: 1px solid $gray-50;\n  background: $gray-10;\n}\n\n.ls-dv-button-group {\n  display: flex;\n  border-radius: 0.625rem;\n  border: 1px solid $gray-30;\n  background: $white;\n  overflow: clip;\n}\n\n.ls-dv-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: $gray-80;\n}\n\n.ls-dv-button-group button:hover {\n  background: $gray-10;\n}\n\n.ls-dv-button-group > :first-child {\n  border-radius: 0.625rem 0 0 0.625rem;\n}\n\n.ls-dv-button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.ls-dv-button-group > :not(:first-child) {\n  border-left: 1px solid $gray-30;\n}\n\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { dvI18n } from '../../i18n/i18n';\n\n@Component({\n  tag: 'ls-document-options',\n  styleUrl: 'ls-document-options.scss',\n  shadow: true,\n})\nexport class LsDocumentOptions {\n  @Element() component: HTMLElement;\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop({ mutable: true, reflect: true }) template: LSApiTemplate;\n\n  @State() editTitle: boolean = false;\n\n\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.debounce(diff, 500);\n  }\n\n  private titletimer;\n\n  debounce(diff, delay) {\n    if (this.titletimer) clearTimeout(this.titletimer);\n\n    this.titletimer = setTimeout(() => {\n      this.template = { ...this.template, ...diff };\n      const diffs: LSMutateEvent[] = [{ action: 'update', data: this.template }];\n      this.mutate.emit(diffs);\n    }, delay);\n  }\n\n  componentDidLoad() {\n  }\n\n  render() {\n    function formatDate(isoString) {\n      if (!isoString) return '-';\n      const date = new Date(isoString);\n      if (isNaN(date.getTime())) return '-';\n\n      const day = String(date.getDate()).padStart(2, '0');\n      const month = String(date.getMonth() + 1).padStart(2, '0');\n      const year = date.getFullYear();\n\n      const hours = String(date.getHours()).padStart(2, '0');\n      const minutes = String(date.getMinutes()).padStart(2, '0');\n\n      return `${day}/${month}/${year} at ${hours}:${minutes}`;\n    }\n    return (\n      <Host>\n        <div class=\"ls-dv-editor-infobox\">\n          <h2 class=\"ls-dv-toolbox-section-title\">{dvI18n.t('documentoptions.title')}</h2>\n          <p class=\"ls-dv-toolbox-section-description\">{dvI18n.t('documentoptions.description')}</p>\n        </div>\n        <div class={'ls-dv-template-details'}>\n          <div class={'ls-dv-template-detail-section ls-dv-column'}>\n            <p class=\"ls-dv-template-detail-section-title\">{dvI18n.t('documentoptions.name')}</p>\n            <div\n              class=\"ls-dv-edit-button\"\n              onClick={() => {\n                this.editTitle = !this.editTitle;\n              }}\n            >\n              <ls-icon\n                name={this.editTitle ? 'check-icon' : 'pencil-alt-icon'}\n                size={20}\n                id=\"edit-name-btn\"\n                data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={this.editTitle ? dvI18n.t('common.save') : dvI18n.t('documentoptions.editname')}\n              />\n            </div>\n            {this.editTitle ? (\n              <input\n                value={this.template?.title}\n                style={{ width: '100%' }}\n                onInput={e => {\n                  e.preventDefault();\n                  this.alter({ title: (e.target as HTMLInputElement).value });\n                }}\n                onKeyUp={e => {\n                  if (e.key === 'Enter' || e.keyCode === 13) this.editTitle = false;\n                }}\n              />\n            ) : (\n              <div\n                class=\"ls-dv-template-title\"\n                onClick={() => {\n                  this.editTitle = !this.editTitle;\n                }}\n              >\n                <p>{this.template?.title}</p>\n              </div>\n            )}\n          </div>\n          <div class={'ls-dv-template-detail-section'}>\n            <div>\n              <p class=\"ls-dv-template-detail-section-title\">{dvI18n.t('documentoptions.autoarchive')}</p>\n              <p class={'ls-dv-template-detail-section-info'}>{dvI18n.t('documentoptions.autoarchivedescription')}</p>\n            </div>\n            {/* <ls-formfield as=\"radio\" value={'false'} /> */}\n            <ls-toggle\n              checked={this.template?.autoArchive}\n              onValueChange={e => {\n                this.alter({ autoArchive: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'ls-dv-template-detail-section'}>\n            <div>\n              <p class=\"ls-dv-template-detail-section-title\">{dvI18n.t('documentoptions.locktemplate')}</p>\n              <p class={'ls-dv-template-detail-section-info'}>{dvI18n.t('documentoptions.locktemplatedescription')}</p>\n            </div>\n            <ls-toggle\n              checked={this.template?.locked}\n              onValueChange={e => {\n                this.alter({ locked: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'ls-dv-template-detail-section'}>\n            <div>\n              <p class=\"ls-dv-template-detail-section-title\" tooltip-data=\"Fixes the aspect ratio of all signatures on the document. This allows Participants to re-use the same signature throughout the signing process. If this setting is turned on after several signature fields have been placed, fields will automatically re-size to match the aspect ratio of the first signature on the Template.\">{dvI18n.t('documentoptions.fixedsignatureaspect')}</p>\n              <p class={'ls-dv-template-detail-section-info'}>{dvI18n.t('documentoptions.fixedsignatureaspectdescription')}</p>\n            </div>\n\n            <ls-toggle\n              checked={this.template?.fixSignatureScale}\n              onValueChange={e => {\n                this.alter({ fixSignatureScale: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'ls-dv-template-detail-section ls-dv-column'}>\n            <p class=\"ls-dv-template-detail-section-title\">{dvI18n.t('documentoptions.documentretention')}</p>\n            <p>\n              <input\n                type='number'\n                min='0'\n                value={this.template?.documentRetentionDays}\n                style={{ width: '100%' }}\n                onInput={e => {\n                  e.preventDefault();\n                  this.alter({ documentRetentionDays: (e.target as HTMLInputElement).value });\n                }}\n              />\n              </p>\n          </div>\n          <div class={'ls-dv-template-detail-section ls-dv-column'}>\n            <p class=\"ls-dv-template-detail-section-title\">{dvI18n.t('documentoptions.pages')}</p>\n            <p>{this.template?.pageCount}</p>\n          </div>\n          <div class={'ls-dv-template-detail-section ls-dv-column'}>\n            <p class=\"ls-dv-template-detail-section-title\">{dvI18n.t('documentoptions.datecreated')}</p> <p>{formatDate(this.template?.created)}</p>\n          </div>\n          <div class={'ls-dv-template-detail-section ls-dv-column'}>\n            <p class=\"ls-dv-template-detail-section-title\">{dvI18n.t('documentoptions.createdby')}</p> <p>{this.template?.createdBy}</p>\n          </div>\n        </div>\n        <slot></slot>\n        <ls-tooltip tooltipId=\"ls-dv-tooltip\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CvMzUIlC.js → p-CU_v-klT.js}

@@ -784,9 +784,8 @@ const LsEditorField = /*@__PURE__*/ proxyCustomElement(class LsEditorField exten
             if (this.labeltimer) {
                 clearTimeout(this.labeltimer);
                 this.labeltimer = null;
+                this.mutate.emit([{ action: 'update', data: this.dataItem }]);
             }
-            // Always emit mutate on deselect to catch pending changes from ls-field-content
-            this.mutate.emit([{ action: 'update', data: this.dataItem }]);
             // Force close date picker (Safari ignores blur)
             const input = this.component.shadowRoot?.getElementById('editing-input');
             if (input && input.type === 'date') {
@@ -908,17 +907,17 @@ const LsEditorField = /*@__PURE__*/ proxyCustomElement(class LsEditorField exten
         const zoomValue = parseFloat(this.zoom) || 1;
         // const topOffset = (this.dataItem.height ?? 1) + 4;
         const topOffset = 24;
-        return (h(Host, { key: '69d421bcf112299e4454b1f0d7e19f023c24eba3', id: this.dataItem ? 'ls-field-' + this.dataItem.id : undefined, style: hostStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '2132f3425a824952bc1c0a94df36c5ec5d543a53', class: {
+        return (h(Host, { key: '54b2b5d2a4fec1614db4ce5f78ee4265116bd5bf', id: this.dataItem ? 'ls-field-' + this.dataItem.id : undefined, style: hostStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '277ca567690c7b291b54767149f95b4e35c11753', class: {
                 'ls-editor-field': true,
                 'is-selected': this.selected,
-            } }, !this.dataItem?.optional && this.dataItem?.formElementType !== 'checkbox' && (h("ls-icon", { key: '0febe96c93a9336d91662187290a4e829db46d12', name: "required-icon", size: Math.round(12 * zoomValue), class: "ls-dv-required-icon", customStyle: {
+            } }, !this.dataItem?.optional && this.dataItem?.formElementType !== 'checkbox' && (h("ls-icon", { key: '59bd4868cb35fd5d840ae016c611aa6dbf4fe1e9', 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.dataItem?.optional && this.dataItem?.formElementType === 'checkbox' && (h("ls-icon", { key: '7bd57a9fa64c996a872a4a02628f015d55293a7d', name: "required-icon", size: Math.round(8 * zoomValue), class: "ls-dv-required-icon", customStyle: {
+            } })), !this.dataItem?.optional && this.dataItem?.formElementType === 'checkbox' && (h("ls-icon", { key: 'ada6ea6538aada55f494cc42fa00b4ad314f2669', name: "required-icon", size: Math.round(8 * zoomValue), class: "ls-dv-required-icon", customStyle: {
                 position: 'absolute',
                 top: `-${3 * zoomValue}px`,
                 right: `-${3 * zoomValue}px`,
@@ -954,9 +953,9 @@ const LsEditorField = /*@__PURE__*/ proxyCustomElement(class LsEditorField exten
                         el.style.height = el.scrollHeight + 'px';
                     });
                 }
-            } })), h("div", { key: 'e9fa09079c0a79d48689e250eac9d0920c61b679', id: "field-info", class: this.isEditing ? 'ls-dv-hidden-field' : 'ls-dv-editor-field-draggable', style: { color: `${defaultRolePalette[this.dataItem?.signer % 100].s100}`, ...(this.dataItem?.formElementType === 'checkbox' ? { width: '100%', overflow: 'visible', justifyContent: 'center', alignItems: 'center' } : {}) } }, h("span", { key: '4bb8e6d406a70926c0ad037f6d22a91c7532a4eb', style: { width: '100%', display: 'block', textAlign: this.dataItem?.formElementType === 'checkbox' ? 'center' : 'inherit' } }, this.dataItem?.formElementType === 'checkbox'
+            } })), h("div", { key: '76f3ee0992d70fecdf110123ab35f5475d8db4c5', id: "field-info", class: this.isEditing ? 'ls-dv-hidden-field' : 'ls-dv-editor-field-draggable', style: { color: `${defaultRolePalette[this.dataItem?.signer % 100].s100}`, ...(this.dataItem?.formElementType === 'checkbox' ? { width: '100%', overflow: 'visible', justifyContent: 'center', alignItems: 'center' } : {}) } }, h("span", { key: '58c335b13c931ea8e2d1b93a01db8f56b24e69d3', style: { width: '100%', display: 'block', textAlign: this.dataItem?.formElementType === 'checkbox' ? 'center' : 'inherit' } }, this.dataItem?.formElementType === 'checkbox'
             ? this.getCheckboxSymbol()
-            : this.dataItem?.value || dvI18n.t(this.getFieldTypeKey()))), (this.floatingActive || this.selected) && !this.multiSelected && this.dataItem?.label && (h("div", { key: '14f10072270d2155b5db94c3ffeaa7867259a6b5', style: {
+            : this.dataItem?.value || dvI18n.t(this.getFieldTypeKey()))), (this.floatingActive || this.selected) && !this.multiSelected && this.dataItem?.label && (h("div", { key: '7283bf755ba7644417afee50b850a13424de720f', style: {
                 position: 'absolute',
                 background: `${defaultRolePalette[this.dataItem?.signer % 100].s20}`,
                 color: `${defaultRolePalette[this.dataItem?.signer % 100].s80}`,
@@ -968,7 +967,7 @@ const LsEditorField = /*@__PURE__*/ proxyCustomElement(class LsEditorField exten
                 left: `-${2 * zoomValue}px`,
                 whiteSpace: 'nowrap',
                 width: 'fit-content',
-            } }, this.dataItem?.label)), (this.floatingActive || this.selected) && !this.multiSelected && (h("p", { key: 'de3107a8e0529f9878b084a9b9ca78cc88117199', style: {
+            } }, this.dataItem?.label)), (this.floatingActive || this.selected) && !this.multiSelected && (h("p", { key: 'fa0208b23483ccb84d9a0caf0e4038a5a01eab65', style: {
                 position: 'absolute',
                 color: 'var(--gray-80, #3a3a3a)',
                 bottom: `-${1.75 * zoomValue}rem`,
@@ -979,7 +978,7 @@ const LsEditorField = /*@__PURE__*/ proxyCustomElement(class LsEditorField exten
                 textOverflow: 'ellipsis',
                 maxWidth: `${10 * zoomValue}rem`,
                 fontFamily: 'sans-serif',
-            } }, dvI18n.t('fieldproperties.assignedto'), " ", this.assignee)), this.selected && !this.multiSelected && (h("div", { key: '7634c594ac826f92c4ac4358583e50e7ea82ef11', class: "resize-handles" }, h("div", { key: 'b0ff296db4fbc7f6c6d5d42369961b45e7fddf6d', class: "resize-handle handle-e" }), h("div", { key: '0915ee6760657bf8acd4512f4fa56c689239f99e', class: "resize-handle handle-s" }), h("div", { key: '49e9a7ed9cf23fdf155b23cbab370b26c5231274', class: "resize-handle handle-se" }))), this.floatingActive && !this.readonly && (h("button", { key: 'ce655a363c3bdc85c7a7015b981ed13630f49e16', class: 'ls-dv-x-button', style: {
+            } }, dvI18n.t('fieldproperties.assignedto'), " ", this.assignee)), this.selected && !this.multiSelected && (h("div", { key: '54226ebc66b66994dfd72292c8c12f2f083de9dc', class: "resize-handles" }, h("div", { key: '57ea62a0aa4bed988e088a0d115b7b052701c448', class: "resize-handle handle-e" }), h("div", { key: '2db81e248326f803865acb961925148a27572b6f', class: "resize-handle handle-s" }), h("div", { key: 'b0a897c77d04cdeb72126fe05ee9bc61379d7334', class: "resize-handle handle-se" }))), this.floatingActive && !this.readonly && (h("button", { key: '1d799ee58fa6d0a25f25a444150142fe55826c39', class: 'ls-dv-x-button', style: {
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
@@ -988,7 +987,7 @@ const LsEditorField = /*@__PURE__*/ proxyCustomElement(class LsEditorField exten
                 lineHeight: `${0.75 * zoomValue}rem`,
                 fontSize: `${0.75 * zoomValue}rem`,
                 ...(this.dataItem?.formElementType === 'checkbox' ? { transform: `translate(75%, -75%)` } : {}),
-            }, onClick: () => this.deleteField() }, h("ls-icon", { key: '7fe51c2ef42fd9cfdbb9c19849e2d5b53a58ab9a', name: "x-icon", size: Math.round(12 * zoomValue) }))))));
+            }, onClick: () => this.deleteField() }, h("ls-icon", { key: '8fd929efead106447078aa415a2bec604d1bacce', name: "x-icon", size: Math.round(12 * zoomValue) }))))));
     }
     static get watchers() { return {
         "dataItem": ["dataItemChanged", "watchDataItemHandler"],
@@ -1041,6 +1040,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsEditorField as L, validationTypes as a, findIn as b, matchData as c, defineCustomElement as d, validate as e, findDimensions as f, getInputType as g, getApiType as h, addField as i, getTemplate as j, moveField as m, oob as o, recalculateCoordinates as r, syncRoles as s, updateTemplate as u, validateFieldValue as v };
-//# sourceMappingURL=p-CvMzUIlC.js.map
+//# sourceMappingURL=p-CU_v-klT.js.map
 
-//# sourceMappingURL=p-CvMzUIlC.js.map
+//# sourceMappingURL=p-CU_v-klT.js.map