@verdocs/web-sdk 1.11.3 → 1.11.5

package/dist/components/verdocs-template-fields2.js

@@ -6,33 +6,34 @@ import { a as getRoleIndex, r as renderDocumentField, c as updateCssTransform, d
 import { s as state } from './templateStore.js';
 import { l as loadTemplate } from './Templates.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$5 } from './verdocs-component-error2.js';
-import { d as defineCustomElement$4 } from './verdocs-floating-menu2.js';
+import { d as defineCustomElement$4 } from './verdocs-component-error2.js';
 import { d as defineCustomElement$3 } from './verdocs-loader2.js';
 import { d as defineCustomElement$2 } from './verdocs-template-document-page2.js';
 import { d as defineCustomElement$1 } from './verdocs-toolbar-icon2.js';
 
-const verdocsTemplateFieldsCss = "verdocs-template-fields{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;position:relative}verdocs-template-fields .page-0{padding:65px 15px 0 15px;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .page-0 .user-placed-fields{height:100px;position:relative;background:#ffffff;-webkit-box-shadow:0 0 10px 5px #0000000f;box-shadow:0 0 10px 5px #0000000f}verdocs-template-fields .page-0 .user-placed-fields .title{top:0;left:0;color:#ffffff;font-size:12px;padding:3px 6px;font-weight:bold;position:absolute;background:#46497d}verdocs-template-fields .pages{display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-template-fields .pages div,verdocs-template-fields .pages canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields.placing-attachment{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-checkbox{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-date{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-dropdown{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-initial{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-payment{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-radio{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-signature{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-textarea{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-textbox{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-timestamp{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}";
+const verdocsTemplateFieldsCss = "verdocs-template-fields{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;position:relative}verdocs-template-fields .page-0{padding:65px 15px 0 15px;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .page-0 .user-placed-fields{height:100px;position:relative;background:#ffffff;-webkit-box-shadow:0 0 10px 5px #0000000f;box-shadow:0 0 10px 5px #0000000f}verdocs-template-fields .page-0 .user-placed-fields .title{top:0;left:0;color:#ffffff;font-size:12px;padding:3px 6px;font-weight:bold;position:absolute;background:#46497d}verdocs-template-fields .pages{display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-template-fields .pages div,verdocs-template-fields .pages canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields #verdocs-template-fields-toolbar{height:50px;display:-ms-flexbox;display:flex;-ms-flex:0 0 50px;flex:0 0 50px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;background:#46497d}verdocs-template-fields #verdocs-template-fields-toolbar svg{width:24px;height:24px}verdocs-template-fields.placing-attachment{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-checkbox{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-date{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-dropdown{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-initial{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-payment{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-radio{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-signature{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-textarea{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-textbox{cursor:url(\"data:image/svg+xml,%3Csvg width='32' height='15' viewBox='0 0 32 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_1401_24' fill='white'%3E%3Cpath d='M0 0H32V15H0V0Z'/%3E%3C/mask%3E%3Cpath d='M0 0H32V15H0V0Z' fill='%234C56CB' fill-opacity='0.1'/%3E%3Cpath d='M0 0V-1H-1V0H0ZM0 15H-1V16H0V15ZM0 1H32V-1H0V1ZM32 14H0V16H32V14ZM1 15V0H-1V15H1Z' fill='%234C56CB' mask='url(%23path-1-inside-1_1401_24)'/%3E%3Cpath d='M3 11.8V8.65H14.15V11.8H3ZM3 6.65V3.5H20.15V6.65H3Z' fill='%234C56CB'/%3E%3Cline x1='31.5' y1='1' x2='31.5' y2='14' stroke='%234C56CB' stroke-opacity='0.32' stroke-dasharray='1 1'/%3E%3C/svg%3E%0A\") 0 14, pointer}verdocs-template-fields.placing-timestamp{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 0 14, pointer}";
 
-const iconSingleline = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';
-const iconMultiline = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z"/></svg>';
-const iconCheck = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z"/></svg>';
-const iconRadio = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z"/></svg>';
-const iconDatepicker = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z"/></svg>';
-const iconSignature = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z"/></svg>';
-const iconInitial = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z"/></svg>';
+const iconSingleline = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';
+const iconMultiline = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z"/></svg>';
+const iconCheck = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z"/></svg>';
+const iconRadio = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z"/></svg>';
+const iconDatepicker = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z"/></svg>';
+const iconSignature = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z"/></svg>';
+const iconInitial = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z"/></svg>';
+const iconClock = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path fill="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>';
+const iconBarsDown = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" /></svg>';
 const menuOptions = [
   // {id: 'attachment', tooltip: 'Attachment', icon: 'A'},
   { id: 'checkbox', tooltip: 'Check Box', icon: iconCheck },
   { id: 'date', tooltip: 'Date', icon: iconDatepicker },
-  { id: 'dropdown', tooltip: 'Dropdown', icon: 'O' },
+  { id: 'dropdown', tooltip: 'Dropdown', icon: iconBarsDown },
   { id: 'initial', tooltip: 'Initials', icon: iconInitial },
   // {id: 'payment', tooltip: 'Payment', icon: 'P'},
   { id: 'radio', tooltip: 'Radio Button', icon: iconRadio },
   { id: 'signature', tooltip: 'Signature', icon: iconSignature },
   { id: 'textarea', tooltip: 'Text Area', icon: iconMultiline },
   { id: 'textbox', tooltip: 'Text Box', icon: iconSingleline },
-  { id: 'timestamp', tooltip: 'Timestamp', icon: 'X' },
+  { id: 'timestamp', tooltip: 'Timestamp', icon: iconClock },
 ];
 const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -46,6 +47,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.cachedPageInfo = {};
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
+    this.toolbarTargetId = null;
     this.placing = null;
     this.selectedRoleName = '';
     this.rerender = 1;
@@ -80,6 +82,19 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   componentDidRender() {
     interact.dynamicDrop(true);
+    const toolbarTarget = this.toolbarTargetId ? document.getElementById(this.toolbarTargetId) : null;
+    const toolbarEl = document.getElementById('verdocs-template-fields-toolbar');
+    if (toolbarTarget && toolbarEl) {
+      console.log('[FIELDS] Moving toolbar');
+      toolbarEl.remove();
+      toolbarTarget.append(toolbarEl);
+    }
+  }
+  // Stop field-placement mode if ESC is pressed
+  handleKeyDown(ev) {
+    if (ev.key === 'Escape') {
+      this.placing = null;
+    }
   }
   async handleFieldChange(field, e, optionId) {
     console.log('[FIELDS] handleFieldChange', field, e, optionId);
@@ -94,6 +109,13 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
       this.rerender++;
       (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: state.template, event: 'updated-field' });
     });
+    el.addEventListener('deleted', () => {
+      var _a;
+      console.log('deleted', this, field);
+      el.remove();
+      this.rerender++;
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: state.template, event: 'updated-field' });
+    });
     el.setAttribute('roleindex', roleIndex);
     el.setAttribute('pageNumber', pageInfo.pageNumber);
     el.setAttribute('xScale', pageInfo.xScale);
@@ -163,10 +185,14 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
   }
   generateFieldName(type, pageNumber) {
-    var _a;
-    const page = (_a = state.template.pages) === null || _a === void 0 ? void 0 : _a[pageNumber - 1];
-    const fields = (page === null || page === void 0 ? void 0 : page.fields) || [];
-    return `${type}P${pageNumber}-${fields.length}`;
+    let i = 1;
+    let fieldName;
+    do {
+      fieldName = `${type}P${pageNumber}-${i}`;
+      i++;
+    } while (state.fields.some(field => field.name === fieldName));
+    console.log('Field name', fieldName);
+    return fieldName;
   }
   // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
   viewCoordinatesToPageCoordinates(viewX, viewY, pageNumber, xMax, yMax) {
@@ -178,6 +204,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
   async handleClickPage(e, page) {
     var _a;
     if (this.placing) {
+      console.log('Placing field', this.placing, page.sequence, e.offsetX, e.offsetY);
       const pageNumber = page.sequence;
       const clickedX = e.offsetX;
       const clickedY = e.offsetY;
@@ -251,29 +278,27 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     pages.sort((a, b) => a.sequence - b.sequence);
     return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-r": this.rerender, onSubmit: () => {
         console.log('onSubmit');
-      } }, h("div", { class: "pages" }, pages.map(page => {
-      // console.log('rendering page', page);
+      } }, h("div", { id: "verdocs-template-fields-toolbar" }, menuOptions.map(option => (h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, onClick: () => (this.placing = option.id) })))), h("div", { class: "pages" }, pages.map(page => {
       return (h("verdocs-template-document-page", { templateId: page.template_id, documentId: page.document_id, pageNumber: page.sequence, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },
         ] }));
-    })), h("verdocs-floating-menu", { options: menuOptions, onOptionSelected: e => {
-        this.placing = e.detail.id;
-      } })));
+    }))));
   }
   static get style() { return verdocsTemplateFieldsCss; }
 }, [0, "verdocs-template-fields", {
     "endpoint": [16],
     "templateId": [1, "template-id"],
+    "toolbarTargetId": [1, "toolbar-target-id"],
     "placing": [32],
     "selectedRoleName": [32],
     "rerender": [32]
-  }]);
+  }, [[4, "keydown", "handleKeyDown"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-template-fields", "verdocs-component-error", "verdocs-floating-menu", "verdocs-loader", "verdocs-template-document-page", "verdocs-toolbar-icon"];
+  const components = ["verdocs-template-fields", "verdocs-component-error", "verdocs-loader", "verdocs-template-document-page", "verdocs-toolbar-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-template-fields":
       if (!customElements.get(tagName)) {
@@ -281,11 +306,6 @@ function defineCustomElement() {
       }
       break;
     case "verdocs-component-error":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "verdocs-floating-menu":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-02-21T05:30:11",
+  "timestamp": "2023-02-22T00:06:36",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -188,11 +188,8 @@
         "verdocs-template-fields": [
           "verdocs-component-error",
           "verdocs-loader",
-          "verdocs-template-document-page",
-          "verdocs-floating-menu"
-        ],
-        "verdocs-floating-menu": [
-          "verdocs-toolbar-icon"
+          "verdocs-toolbar-icon",
+          "verdocs-template-document-page"
         ]
       }
     },
@@ -1422,6 +1419,15 @@
         }
       ],
       "events": [
+        {
+          "event": "deleted",
+          "detail": "{ fieldName: string; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event fired when the field is deleted.",
+          "docsTags": []
+        },
         {
           "event": "settingsChanged",
           "detail": "{ fieldName: string; }",
@@ -1608,6 +1614,15 @@
         }
       ],
       "events": [
+        {
+          "event": "deleted",
+          "detail": "{ fieldName: string; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event fired when the field is deleted.",
+          "docsTags": []
+        },
         {
           "event": "settingsChanged",
           "detail": "{ fieldName: string; }",
@@ -1752,6 +1767,15 @@
         }
       ],
       "events": [
+        {
+          "event": "deleted",
+          "detail": "{ fieldName: string; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event fired when the field is deleted.",
+          "docsTags": []
+        },
         {
           "event": "fieldChange",
           "detail": "string",
@@ -1963,6 +1987,15 @@
           "docs": "Event emitted when the user cancels the process.",
           "docsTags": []
         },
+        {
+          "event": "deleted",
+          "detail": "{ fieldName: string; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event fired when the field is deleted.",
+          "docsTags": []
+        },
         {
           "event": "fieldChange",
           "detail": "string",
@@ -2319,6 +2352,15 @@
         }
       ],
       "events": [
+        {
+          "event": "deleted",
+          "detail": "{ fieldName: string; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event fired when the field is deleted.",
+          "docsTags": []
+        },
         {
           "event": "initialComplete",
           "detail": "string",
@@ -2510,6 +2552,15 @@
         }
       ],
       "events": [
+        {
+          "event": "deleted",
+          "detail": "{ fieldName: string; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event fired when the field is deleted.",
+          "docsTags": []
+        },
         {
           "event": "settingsChanged",
           "detail": "{ fieldName: string; }",
@@ -2713,6 +2764,15 @@
         }
       ],
       "events": [
+        {
+          "event": "deleted",
+          "detail": "{ fieldName: string; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event fired when the field is deleted.",
+          "docsTags": []
+        },
         {
           "event": "fieldChange",
           "detail": "string",
@@ -2923,6 +2983,15 @@
         }
       ],
       "events": [
+        {
+          "event": "deleted",
+          "detail": "{ fieldName: string; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event fired when the field is deleted.",
+          "docsTags": []
+        },
         {
           "event": "settingsChanged",
           "detail": "{ fieldName: string; }",
@@ -3109,6 +3178,15 @@
         }
       ],
       "events": [
+        {
+          "event": "deleted",
+          "detail": "{ fieldName: string; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event fired when the field is deleted.",
+          "docsTags": []
+        },
         {
           "event": "settingsChanged",
           "detail": "{ fieldName: string; }",
@@ -3295,6 +3373,15 @@
         }
       ],
       "events": [
+        {
+          "event": "deleted",
+          "detail": "{ fieldName: string; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event fired when the field is deleted.",
+          "docsTags": []
+        },
         {
           "event": "settingsChanged",
           "detail": "{ fieldName: string; }",
@@ -3373,18 +3460,13 @@
       "styles": [],
       "slots": [],
       "parts": [],
-      "dependents": [
-        "verdocs-template-fields"
-      ],
+      "dependents": [],
       "dependencies": [
         "verdocs-toolbar-icon"
       ],
       "dependencyGraph": {
         "verdocs-floating-menu": [
           "verdocs-toolbar-icon"
-        ],
-        "verdocs-template-fields": [
-          "verdocs-floating-menu"
         ]
       }
     },
@@ -5506,6 +5588,23 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "toolbarTargetId",
+          "type": "string",
+          "mutable": false,
+          "attr": "toolbar-target-id",
+          "reflectToAttr": false,
+          "docs": "If set, (recommended), the host application should create a <DIV> element with a unique ID. When this\ncomponent renders, the toolbar will be removed from its default location and placed in the target element.\nThis allows the parent application to more easily control its placement and scroll effects.",
+          "docsTags": [],
+          "default": "null",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [],
@@ -5547,7 +5646,14 @@
           "docsTags": []
         }
       ],
-      "listeners": [],
+      "listeners": [
+        {
+          "event": "keydown",
+          "target": "document",
+          "capture": false,
+          "passive": false
+        }
+      ],
       "styles": [],
       "slots": [],
       "parts": [],
@@ -5557,18 +5663,15 @@
       "dependencies": [
         "verdocs-component-error",
         "verdocs-loader",
-        "verdocs-template-document-page",
-        "verdocs-floating-menu"
+        "verdocs-toolbar-icon",
+        "verdocs-template-document-page"
       ],
       "dependencyGraph": {
         "verdocs-template-fields": [
           "verdocs-component-error",
           "verdocs-loader",
-          "verdocs-template-document-page",
-          "verdocs-floating-menu"
-        ],
-        "verdocs-floating-menu": [
-          "verdocs-toolbar-icon"
+          "verdocs-toolbar-icon",
+          "verdocs-template-document-page"
         ],
         "verdocs-build": [
           "verdocs-template-fields"
@@ -6844,12 +6947,16 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "verdocs-floating-menu"
+        "verdocs-floating-menu",
+        "verdocs-template-fields"
       ],
       "dependencies": [],
       "dependencyGraph": {
         "verdocs-floating-menu": [
           "verdocs-toolbar-icon"
+        ],
+        "verdocs-template-fields": [
+          "verdocs-toolbar-icon"
         ]
       }
     },

package/dist/esm/{Envelopes-b8945309.js → Envelopes-7f3b60de.js}

@@ -1,5 +1,5 @@
 import { g as getEnvelope } from './Envelopes-eb3eef02.js';
-import { c as createStore } from './index-fd7b8a34.js';
+import { c as createStore } from './index-24fd1580.js';
 import { g as getTemplate } from './Templates-8e4ab976.js';
 
 // NOTE: Do not attempt to convert this to a named-export module. It triggers compilation issues in Rollup that I spent days trying to

package/dist/esm/{Templates-2528dad5.js → Templates-a693b275.js}

@@ -1,5 +1,5 @@
 import { g as getTemplate } from './Templates-8e4ab976.js';
-import { s as state } from './templateStore-a7a5149a.js';
+import { s as state } from './templateStore-a399f366.js';
 
 const pendingNotifications = [];
 const loadTemplate = async (endpoint, templateId, forceReload = false) => {
@@ -23,7 +23,7 @@ const loadTemplate = async (endpoint, templateId, forceReload = false) => {
   state.template = null;
   try {
     console.log(`[TEMPLATES] Loading template ${templateId}`);
-    const template = await getTemplate(endpoint, templateId, true);
+    const template = await getTemplate(endpoint, templateId);
     if (!template) {
       console.log('[TEMPLATES] Unable to load template');
       return;

package/dist/esm/{index-fd7b8a34.js → index-24fd1580.js}

@@ -1,4 +1,4 @@
-import { g as getRenderingRef, f as forceUpdate } from './index-f78d163d.js';
+import { g as getRenderingRef, f as forceUpdate } from './index-e64d45e2.js';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);

package/dist/esm/{index-f78d163d.js → index-e64d45e2.js}

@@ -1219,6 +1219,13 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
     const instance = hostRef.$lazyInstance$ ;
     let promise;
     if (isInitialLoad) {
+        {
+            hostRef.$flags$ |= 256 /* HOST_FLAGS.isListenReady */;
+            if (hostRef.$queuedListeners$) {
+                hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
+                hostRef.$queuedListeners$ = null;
+            }
+        }
         {
             promise = safeCall(instance, 'componentWillLoad');
         }
@@ -1627,6 +1634,12 @@ const connectedCallback = (elm) => {
                 initializeComponent(elm, hostRef, cmpMeta);
             }
         }
+        else {
+            // not the first time this has connected
+            // reattach any event listeners to the host
+            // since they would have been removed when disconnected
+            addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
+        }
         endConnected();
     }
 };
@@ -1645,6 +1658,12 @@ const disconnectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
         const instance = hostRef.$lazyInstance$ ;
+        {
+            if (hostRef.$rmListeners$) {
+                hostRef.$rmListeners$.map((rmListener) => rmListener());
+                hostRef.$rmListeners$ = undefined;
+            }
+        }
         {
             safeCall(instance, 'disconnectedCallback');
         }
@@ -1674,6 +1693,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$members$ = compactMeta[2];
             }
+            {
+                cmpMeta.$listeners$ = compactMeta[3];
+            }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
                 // StencilLazyHost
@@ -1729,6 +1751,40 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     endBootstrap();
 };
 const Fragment = (_, children) => children;
+const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+    if (listeners) {
+        listeners.map(([flags, name, method]) => {
+            const target = getHostListenerTarget(elm, flags) ;
+            const handler = hostListenerProxy(hostRef, method);
+            const opts = hostListenerOpts(flags);
+            plt.ael(target, name, handler, opts);
+            (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
+        });
+    }
+};
+const hostListenerProxy = (hostRef, methodName) => (ev) => {
+    try {
+        {
+            if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
+                // instance is ready, let's call it's member method for this event
+                hostRef.$lazyInstance$[methodName](ev);
+            }
+            else {
+                (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+            }
+        }
+    }
+    catch (e) {
+        consoleError(e);
+    }
+};
+const getHostListenerTarget = (elm, flags) => {
+    if (flags & 4 /* LISTENER_FLAGS.TargetDocument */)
+        return doc;
+    return elm;
+};
+// prettier-ignore
+const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
 const hostRefs = /*@__PURE__*/ new WeakMap();
 const getHostRef = (ref) => hostRefs.get(ref);
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -1747,6 +1803,7 @@ const registerHost = (elm, cmpMeta) => {
         elm['s-p'] = [];
         elm['s-rc'] = [];
     }
+    addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
     return hostRefs.set(elm, hostRef);
 };
 const isMemberInElement = (elm, memberName) => memberName in elm;