@verdocs/web-sdk 1.9.16 → 1.9.21

package/dist/types/components.d.ts

@@ -172,6 +172,10 @@ export namespace Components {
           * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If set, the field is considered "done" and is drawn in a display-final-value state.
+         */
+        "done"?: boolean;
         /**
           * The document or template field to display.
          */
@@ -190,6 +194,10 @@ export namespace Components {
           * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If set, the field is considered "done" and is drawn in a display-final-value state.
+         */
+        "done"?: boolean;
         /**
           * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder.
          */
@@ -228,6 +236,10 @@ export namespace Components {
           * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If set, the field is considered "done" and is drawn in a display-final-value state.
+         */
+        "done"?: boolean;
         /**
           * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder.
          */
@@ -282,6 +294,10 @@ export namespace Components {
           * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If set, the field is considered "done" and is drawn in a display-final-value state.
+         */
+        "done"?: boolean;
         /**
           * The document or template field to display.
          */
@@ -300,6 +316,10 @@ export namespace Components {
           * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If set, the field is considered "done" and is drawn in a display-final-value state.
+         */
+        "done"?: boolean;
         /**
           * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder.
          */
@@ -327,6 +347,10 @@ export namespace Components {
           * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If set, the field is considered "done" and is drawn in a display-final-value state.
+         */
+        "done"?: boolean;
         /**
           * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder.
          */
@@ -350,6 +374,10 @@ export namespace Components {
           * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If set, the field is considered "done" and is drawn in a display-final-value state.
+         */
+        "done"?: boolean;
         /**
           * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder.
          */
@@ -373,6 +401,10 @@ export namespace Components {
           * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If set, the field is considered "done" and is drawn in a display-final-value state.
+         */
+        "done"?: boolean;
         /**
           * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder.
          */
@@ -766,10 +798,6 @@ export interface VerdocsFieldPaymentCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLVerdocsFieldPaymentElement;
 }
-export interface VerdocsFieldRadioButtonCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLVerdocsFieldRadioButtonElement;
-}
 export interface VerdocsFieldSignatureCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLVerdocsFieldSignatureElement;
@@ -1388,6 +1416,10 @@ declare namespace LocalJSX {
           * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If set, the field is considered "done" and is drawn in a display-final-value state.
+         */
+        "done"?: boolean;
         /**
           * The document or template field to display.
          */
@@ -1406,6 +1438,10 @@ declare namespace LocalJSX {
           * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If set, the field is considered "done" and is drawn in a display-final-value state.
+         */
+        "done"?: boolean;
         /**
           * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder.
          */
@@ -1450,6 +1486,10 @@ declare namespace LocalJSX {
           * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If set, the field is considered "done" and is drawn in a display-final-value state.
+         */
+        "done"?: boolean;
         /**
           * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder.
          */
@@ -1522,13 +1562,13 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The document or template field to display.
+          * If set, the field is considered "done" and is drawn in a display-final-value state.
          */
-        "field"?: IDocumentField | ITemplateField | null;
+        "done"?: boolean;
         /**
-          * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc. It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every keypress.
+          * The document or template field to display.
          */
-        "onFieldChange"?: (event: VerdocsFieldRadioButtonCustomEvent<{option: number; value: boolean}>) => void;
+        "field"?: IDocumentField | ITemplateField | null;
         /**
           * The index of the settings option this particular checkbox is for
          */
@@ -1543,6 +1583,10 @@ declare namespace LocalJSX {
           * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If set, the field is considered "done" and is drawn in a display-final-value state.
+         */
+        "done"?: boolean;
         /**
           * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder.
          */
@@ -1577,6 +1621,10 @@ declare namespace LocalJSX {
           * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If set, the field is considered "done" and is drawn in a display-final-value state.
+         */
+        "done"?: boolean;
         /**
           * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder.
          */
@@ -1599,6 +1647,10 @@ declare namespace LocalJSX {
           * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If set, the field is considered "done" and is drawn in a display-final-value state.
+         */
+        "done"?: boolean;
         /**
           * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder.
          */
@@ -1625,6 +1677,10 @@ declare namespace LocalJSX {
           * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
          */
         "disabled"?: boolean;
+        /**
+          * If set, the field is considered "done" and is drawn in a display-final-value state.
+         */
+        "done"?: boolean;
         /**
           * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder.
          */
@@ -1884,9 +1940,13 @@ declare namespace LocalJSX {
          */
         "inviteCode"?: string | null;
         /**
-          * Event fired when any field is updated. Note that the current active endpoint is provided as a parameter as a convenience for callers when this coimponent
+          * Event fired when the envelope is updated in any way.
+         */
+        "onEnvelopeLoaded"?: (event: VerdocsSignCustomEvent<{endpoint: VerdocsEndpoint; envelope: IEnvelope}>) => void;
+        /**
+          * Event fired when the envelope is updated in any way.
          */
-        "onFieldUpdated"?: (event: VerdocsSignCustomEvent<{endpoint: VerdocsEndpoint}>) => void;
+        "onEnvelopeUpdated"?: (event: VerdocsSignCustomEvent<{endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string}>) => void;
         /**
           * Event fired if an error occurs. The event details will contain information about the error. Most errors will terminate the process, and the calling application should correct the condition and re-render the component.
          */

package/dist/types/utils/utils.d.ts

@@ -1,5 +1,6 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { ITemplateField } from '@verdocs/js-sdk/Templates/Types';
-import { IDocumentField } from '@verdocs/js-sdk/Envelopes/Types';
+import { IDocumentField, IEnvelope } from '@verdocs/js-sdk/Envelopes/Types';
 import { IDocumentPageInfo } from './Types';
 export declare const integerSequence: (start: number, count: number) => number[];
 export declare const fullNameToInitials: (name: string) => string;
@@ -12,6 +13,7 @@ interface IFieldOptions {
   disabled?: boolean;
   editable?: boolean;
   draggable?: boolean;
+  done?: boolean;
 }
 export declare const renderDocumentField: (field: ITemplateField | IDocumentField, docPage: IDocumentPageInfo, roleIndex: number, fieldOptions: IFieldOptions) => any;
 export declare const getRoleIndex: (roles: string[], role: string) => number;
@@ -24,4 +26,5 @@ export declare const getFieldSettings: (field: ITemplateField | IDocumentField)
  * to be used for order-sensitive components e.g. translate-then-rotate.
  */
 export declare const updateCssTransform: (el: HTMLElement, key: string, value: string) => void;
+export declare const savePDF: (endpoint: VerdocsEndpoint, envelope: IEnvelope, documentId: string) => Promise<void>;
 export {};

package/dist/verdocs-web-sdk/p-00cc11c3.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as o,H as i}from"./p-ff1278ed.js";import{g as s}from"./p-6de76553.js";import{s as l}from"./p-4ef84b54.js";import{g as n}from"./p-208a3320.js";import"./p-5ea05a1d.js";import"./p-21603661.js";const r='verdocs-field-textbox{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{width:100%;height:100%;font-size:11px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox input:focus{outline:none}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}';const d='<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';const a=class{constructor(o){e(this,o);this.recipientChanged=t(this,"recipientChanged",7);this.field=null;this.disabled=false;this.editable=false;this.moveable=false;this.done=false;this.roleindex=0}async focusField(){this.el.focus()}handleChangeRecipient(e){var t;(t=this.recipientChanged)===null||t===void 0?void 0:t.emit(e.detail)}render(){var e,t,r,a;const c=n(this.field);let p=(t=(e=this.disabled)!==null&&e!==void 0?e:c.disabled)!==null&&t!==void 0?t:false;const v=this.field["rgba"]||s(this.roleindex);const b=(c===null||c===void 0?void 0:c.result)||"";if(this.done){return o(i,{class:{done:this.done}},b)}return o(i,{class:{required:(r=this.field)===null||r===void 0?void 0:r.required,disabled:p,done:this.done},style:{backgroundColor:v}},o("input",{type:"text",placeholder:c===null||c===void 0?void 0:c.placeholder,tabIndex:c===null||c===void 0?void 0:c.order,value:b,disabled:p,required:(a=this.field)===null||a===void 0?void 0:a.required,ref:e=>this.el=e}),this.editable&&o("verdocs-button-panel",{icon:d},o("h6",null,"Field Settings"),o("form",null,o("verdocs-select-input",{label:"Recipient",value:l.roleNames[this.roleindex],options:l.roleNames.map((e=>({label:e,value:e}))),onChange:e=>this.handleChangeRecipient(e)}),o("verdocs-text-input",{label:"Field Name",value:"",placeholder:"Stored field name...",onInput:e=>{e.stopPropagation();console.log("ipt",e)}}),o("verdocs-text-input",{label:"Placeholder",value:"",placeholder:"Placeholder text...",onInput:e=>{e.stopPropagation();console.log("ipt",e)}}))))}};a.style=r;export{a as verdocs_field_textbox};
+//# sourceMappingURL=p-00cc11c3.entry.js.map

package/dist/verdocs-web-sdk/p-00cc11c3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/elements/verdocs-field-textbox/verdocs-field-textbox.scss?tag=verdocs-field-textbox","src/components/elements/verdocs-field-textbox/verdocs-field-textbox.tsx"],"names":["verdocsFieldTextboxCss","settingsIcon","VerdocsFieldTextbox","[object Object]","this","el","focus","e","_a","recipientChanged","emit","detail","settings","getFieldSettings","field","disabled","_b","backgroundColor","getRGBA","roleindex","value","result","done","h","Host","class","required","_c","style","type","placeholder","tabIndex","order","_d","ref","editable","icon","label","TemplateStore","roleNames","options","map","role","onChange","handleChangeRecipient","onInput","stopPropagation","console","log"],"mappings":"qNAAA,MAAMA,EAAyB,6zCCO/B,MAAMC,EACJ,+rCAUWC,EAAmB,6FAM0B,mBAK3B,oBAMA,oBAKA,gBAKJ,qBAKI,EAOnBC,mBACRC,KAAKC,GAAGC,QAGVH,sBAAsBI,UACpBC,EAAAJ,KAAKK,oBAAgB,MAAAD,SAAA,OAAA,EAAAA,EAAEE,KAAKH,EAAEI,QAGhCR,qBACE,MAAMS,EAAWC,EAAiBT,KAAKU,OACvC,IAAIC,GAAWC,GAAAR,EAAAJ,KAAKW,YAAQ,MAAAP,SAAA,EAAAA,EAAII,EAASG,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACrD,MAAMC,EAAkBb,KAAKU,MAAM,SAAWI,EAAQd,KAAKe,WAC3D,MAAMC,GAAQR,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUS,SAAU,GAElC,GAAIjB,KAAKkB,KAAM,CACb,OAAOC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAMlB,KAAKkB,OAAQF,GAG1C,OACEG,EAACC,EAAI,CAACC,MAAO,CAACC,UAAUC,EAAAvB,KAAKU,SAAK,MAAAa,SAAA,OAAA,EAAAA,EAAED,SAAUX,SAAAA,EAAUO,KAAMlB,KAAKkB,MAAOM,MAAO,CAACX,gBAAAA,IAChFM,EAAA,QAAA,CACEM,KAAK,OACLC,YAAalB,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUkB,YACvBC,SAAUnB,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUoB,MACpBZ,MAAOA,EACPL,SAAUA,EACVW,UAAUO,EAAA7B,KAAKU,SAAK,MAAAmB,SAAA,OAAA,EAAAA,EAAEP,SACtBQ,IAAK7B,GAAOD,KAAKC,GAAKA,IAEvBD,KAAK+B,UACJZ,EAAA,uBAAA,CAAsBa,KAAMnC,GAC1BsB,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEc,MAAM,YACNjB,MAAOkB,EAAcC,UAAUnC,KAAKe,WACpCqB,QAASF,EAAcC,UAAUE,KAAIC,IAAI,CAAML,MAAOK,EAAMtB,MAAOsB,MACnEC,SAAUpC,GAAKH,KAAKwC,sBAAsBrC,KAG5CgB,EAAA,qBAAA,CACEc,MAAM,aACNjB,MAAM,GACNU,YAAY,uBACZe,QAAStC,IACPA,EAAEuC,kBACFC,QAAQC,IAAI,MAAOzC,MAGvBgB,EAAA,qBAAA,CACEc,MAAM,cACNjB,MAAM,GACNU,YAAY,sBACZe,QAAStC,IACPA,EAAEuC,kBACFC,QAAQC,IAAI,MAAOzC","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-textbox {\n  font-family: $verdocs-primary-font;\n  width: 150px;\n  height: 15px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  input {\n    width: 100%;\n    height: 100%;\n    font-size: 11px;\n    background: none;\n    font-weight: 500;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n    border: 1px solid rgba(0, 0, 0, 0.2);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\n  }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method} from '@stencil/core';\nimport TemplateStore from '../../../utils/templateStore';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Display a text input field.\n */\n@Component({\n  tag: 'verdocs-field-textbox',\n  styleUrl: 'verdocs-field-textbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextbox {\n  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop() done?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event fired if the field is configurable when the recipient has changed.\n   */\n  @Event({composed: true}) recipientChanged: EventEmitter<string>;\n\n  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  handleChangeRecipient(e: any) {\n    this.recipientChanged?.emit(e.detail);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    let disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n    const value = settings?.result || '';\n\n    if (this.done) {\n      return <Host class={{done: this.done}}>{value}</Host>;\n    }\n\n    return (\n      <Host class={{required: this.field?.required, disabled, done: this.done}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          value={value}\n          disabled={disabled}\n          required={this.field?.required}\n          ref={el => (this.el = el)}\n        />\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                value={TemplateStore.roleNames[this.roleindex]}\n                options={TemplateStore.roleNames.map(role => ({label: role, value: role}))}\n                onChange={e => this.handleChangeRecipient(e)}\n              />\n\n              <verdocs-text-input\n                label=\"Field Name\"\n                value=\"\"\n                placeholder=\"Stored field name...\"\n                onInput={e => {\n                  e.stopPropagation();\n                  console.log('ipt', e);\n                }}\n              />\n              <verdocs-text-input\n                label=\"Placeholder\"\n                value=\"\"\n                placeholder=\"Placeholder text...\"\n                onInput={e => {\n                  e.stopPropagation();\n                  console.log('ipt', e);\n                }}\n              />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"]}