@verdocs/web-sdk 6.13.3 → 6.14.1

package/dist/components/{p-D0MFs2Dv.js → p-C8ZliaLz.js}

@@ -1,2 +1,2 @@
-import{p as e,H as r,c as a,h as t,F as o,d as i,t as d}from"./p-yZBlG3YQ.js";import{d as n}from"./p-DGOUAxVN.js";import{i as c}from"./p-COaijEV0.js";import{A as p,l as s}from"./p-DcAXub3q.js";import{VerdocsEndpoint as l,updateField as b}from"@verdocs/js-sdk";import{S as f}from"./p-C7k2AOsW.js";import{a as g}from"./p-17OorOnH.js";import{S as h}from"./p-C7hFgM52.js";import{d as m}from"./p-Bb5V9TQx.js";import{d as u}from"./p-DGNIsXfr.js";import{d as v}from"./p-C-v22G3g.js";import{d as k}from"./p-DHzSlpJw.js";import{d as x}from"./p-DqzFuSNN.js";import{d as y}from"./p-DhOuB4nS.js";import{d as w}from"./p-Bodw4NVB.js";import{d as z}from"./p-Bxvw_LqR.js";import{d as j}from"./p-PfdIkMoz.js";const E=()=>`verdocs-field-date{font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);width:74px;height:20px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;letter-spacing:0.3px;background-color:var(--verdocs-field-background, transparent);-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-date.small input{font-size:7px}verdocs-field-date .edge-top,verdocs-field-date .edge-right,verdocs-field-date .edge-left,verdocs-field-date .edge-bottom{position:absolute;z-index:10}verdocs-field-date .edge-top{top:-2px;left:0;right:0;height:5px}verdocs-field-date .edge-right{top:0;bottom:0;right:-2px;width:5px}verdocs-field-date .edge-left{top:0;left:-2px;bottom:0;width:5px}verdocs-field-date .edge-bottom{bottom:-2px;left:0;right:0;height:5px}verdocs-field-date label{top:-14px;left:0;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-date input{position:absolute;font-size:12px;cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87));font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;border:var(--verdocs-field-border, 1px solid #cccccc);border-radius:var(--verdocs-field-radius);-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-date input.hide{display:none}verdocs-field-date.disabled input{opacity:0.5}verdocs-field-date.required input{border:1px solid var(--verdocs-required-field-border)}verdocs-field-date 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-date verdocs-button-panel[data-active],verdocs-field-date verdocs-button-panel:hover{opacity:1}verdocs-field-date verdocs-button-panel .icon svg{fill:#333333}verdocs-field-date verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-date .settings-icon{position:absolute;top:-3px;left:-18px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-date .settings-icon svg{fill:#707ae5}verdocs-field-date .settings-icon:hover{opacity:1}.air-datepicker-cell.-year-.-other-decade-,.air-datepicker-cell.-day-.-other-month-{color:var(--adp-color-other-month)}.air-datepicker-cell.-year-.-other-decade-:hover,.air-datepicker-cell.-day-.-other-month-:hover{color:var(--adp-color-other-month-hover)}.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-disabled-.-focus-.air-datepicker-cell.-day-.-other-month-{color:var(--adp-color-other-month)}.-selected-.air-datepicker-cell.-year-.-other-decade-,.-selected-.air-datepicker-cell.-day-.-other-month-{color:#fff;background:var(--adp-background-color-selected-other-month)}.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-selected-.-focus-.air-datepicker-cell.-day-.-other-month-{background:var(--adp-background-color-selected-other-month-focused)}.-in-range-.air-datepicker-cell.-year-.-other-decade-,.-in-range-.air-datepicker-cell.-day-.-other-month-{background-color:var(--adp-background-color-in-range);color:var(--adp-color)}.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-in-range-.-focus-.air-datepicker-cell.-day-.-other-month-{background-color:var(--adp-background-color-in-range-focused)}.air-datepicker-cell.-year-.-other-decade-:empty,.air-datepicker-cell.-day-.-other-month-:empty{background:none;border:none}.air-datepicker-cell{border-radius:var(--adp-cell-border-radius);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:1}.air-datepicker-cell.-focus-{background:var(--adp-cell-background-color-hover)}.air-datepicker-cell.-current-{color:var(--adp-color-current-date)}.air-datepicker-cell.-current-.-focus-{color:var(--adp-color)}.air-datepicker-cell.-current-.-in-range-{color:var(--adp-color-current-date)}.air-datepicker-cell.-disabled-{cursor:default;color:var(--adp-color-disabled)}.air-datepicker-cell.-disabled-.-focus-{color:var(--adp-color-disabled)}.air-datepicker-cell.-disabled-.-in-range-{color:var(--adp-color-disabled-in-range)}.air-datepicker-cell.-disabled-.-current-.-focus-{color:var(--adp-color-disabled)}.air-datepicker-cell.-in-range-{background:var(--adp-cell-background-color-in-range);border-radius:0}.air-datepicker-cell.-in-range-:hover{background:var(--adp-cell-background-color-in-range-hover)}.air-datepicker-cell.-range-from-{border:1px solid var(--adp-cell-border-color-in-range);background-color:var(--adp-cell-background-color-in-range);border-radius:var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius)}.air-datepicker-cell.-range-to-{border:1px solid var(--adp-cell-border-color-in-range);background-color:var(--adp-cell-background-color-in-range);border-radius:0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0}.air-datepicker-cell.-range-to-.-range-from-{border-radius:var(--adp-cell-border-radius)}.air-datepicker-cell.-selected-{color:#fff;border:none;background:var(--adp-cell-background-color-selected)}.air-datepicker-cell.-selected-.-current-{color:#fff;background:var(--adp-cell-background-color-selected)}.air-datepicker-cell.-selected-.-focus-{background:var(--adp-cell-background-color-selected-hover)}.air-datepicker-body{-webkit-transition:all var(--adp-transition-duration) var(--adp-transition-ease);transition:all var(--adp-transition-duration) var(--adp-transition-ease)}.air-datepicker-body.-hidden-{display:none}.air-datepicker-body--day-names{display:grid;grid-template-columns:repeat(7, var(--adp-day-cell-width));margin:8px 0 3px}.air-datepicker-body--day-name{color:var(--adp-day-name-color);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex:1;flex:1;text-align:center;text-transform:uppercase;font-size:0.8em}.air-datepicker-body--day-name.-clickable-{cursor:pointer}.air-datepicker-body--day-name.-clickable-:hover{color:var(--adp-day-name-color-hover)}.air-datepicker-body--cells{display:grid}.air-datepicker-body--cells.-days-{grid-template-columns:repeat(7, var(--adp-day-cell-width));grid-auto-rows:var(--adp-day-cell-height)}.air-datepicker-body--cells.-months-{grid-template-columns:repeat(3, 1fr);grid-auto-rows:var(--adp-month-cell-height)}.air-datepicker-body--cells.-years-{grid-template-columns:repeat(4, 1fr);grid-auto-rows:var(--adp-year-cell-height)}.air-datepicker-nav{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-bottom:1px solid var(--adp-border-color-inner);min-height:var(--adp-nav-height);padding:var(--adp-padding);-webkit-box-sizing:content-box;box-sizing:content-box}.-only-timepicker- .air-datepicker-nav{display:none}.air-datepicker-nav--title,.air-datepicker-nav--action{display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.air-datepicker-nav--action{width:var(--adp-nav-action-size);border-radius:var(--adp-border-radius);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.air-datepicker-nav--action:hover{background:var(--adp-background-color-hover)}.air-datepicker-nav--action:active{background:var(--adp-background-color-active)}.air-datepicker-nav--action.-disabled-{visibility:hidden}.air-datepicker-nav--action svg{width:32px;height:32px}.air-datepicker-nav--action path{fill:none;stroke:var(--adp-nav-arrow-color);stroke-width:2px}.air-datepicker-nav--title{border-radius:var(--adp-border-radius);padding:0 8px}.air-datepicker-nav--title i{font-style:normal;color:var(--adp-nav-color-secondary);margin-left:0.3em}.air-datepicker-nav--title:hover{background:var(--adp-background-color-hover)}.air-datepicker-nav--title:active{background:var(--adp-background-color-active)}.air-datepicker-nav--title.-disabled-{cursor:default;background:none}.air-datepicker-buttons{display:grid;grid-auto-columns:1fr;grid-auto-flow:column}.air-datepicker-button{display:-ms-inline-flexbox;display:inline-flex;color:var(--adp-btn-color);border-radius:var(--adp-btn-border-radius);cursor:pointer;height:var(--adp-btn-height);border:none;background:rgba(255, 255, 255, 0)}.air-datepicker-button:hover{color:var(--adp-btn-color-hover);background:var(--adp-btn-background-color-hover)}.air-datepicker-button:focus{color:var(--adp-btn-color-hover);background:var(--adp-btn-background-color-hover);outline:none}.air-datepicker-button:active{background:var(--adp-btn-background-color-active)}.air-datepicker-button span{outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.air-datepicker-time{display:grid;grid-template-columns:-webkit-max-content 1fr;grid-template-columns:max-content 1fr;grid-column-gap:12px;-ms-flex-align:center;align-items:center;position:relative;padding:0 var(--adp-time-padding-inner)}.-only-timepicker- .air-datepicker-time{border-top:none}.air-datepicker-time--current{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1;font-size:14px;text-align:center}.air-datepicker-time--current-colon{margin:0 2px 3px;line-height:1}.air-datepicker-time--current-hours,.air-datepicker-time--current-minutes{line-height:1;font-size:19px;font-family:"Century Gothic", CenturyGothic, AppleGothic, sans-serif;position:relative;z-index:1}.air-datepicker-time--current-hours:after,.air-datepicker-time--current-minutes:after{content:"";background:var(--adp-background-color-hover);border-radius:var(--adp-border-radius);position:absolute;left:-2px;top:-3px;right:-2px;bottom:-2px;z-index:-1;opacity:0}.air-datepicker-time--current-hours.-focus-:after,.air-datepicker-time--current-minutes.-focus-:after{opacity:1}.air-datepicker-time--current-ampm{text-transform:uppercase;-ms-flex-item-align:end;align-self:flex-end;color:var(--adp-time-day-period-color);margin-left:6px;font-size:11px;margin-bottom:1px}.air-datepicker-time--row{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:11px;height:17px;background:-webkit-gradient(linear, left top, right top, from(var(--adp-time-track-color)), to(var(--adp-time-track-color))) left 50%/100% var(--adp-time-track-height) no-repeat;background:linear-gradient(to right, var(--adp-time-track-color), var(--adp-time-track-color)) left 50%/100% var(--adp-time-track-height) no-repeat}.air-datepicker-time--row:first-child{margin-bottom:4px}.air-datepicker-time--row input[type=range]{background:none;cursor:pointer;-ms-flex:1;flex:1;height:100%;width:100%;padding:0;margin:0;-webkit-appearance:none}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}.air-datepicker-time--row input[type=range]::-ms-tooltip{display:none}.air-datepicker-time--row input[type=range]:hover::-webkit-slider-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:hover::-moz-range-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:hover::-ms-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:focus{outline:none}.air-datepicker-time--row input[type=range]:focus::-webkit-slider-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]:focus::-moz-range-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]:focus::-ms-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{-webkit-box-sizing:border-box;box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-webkit-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-moz-range-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-moz-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-ms-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-ms-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{margin-top:calc(var(--adp-time-thumb-size) / 2 * -1)}.air-datepicker-time--row input[type=range]::-webkit-slider-runnable-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0, 0, 0, 0);background:rgba(0, 0, 0, 0)}.air-datepicker-time--row input[type=range]::-moz-range-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0, 0, 0, 0);background:rgba(0, 0, 0, 0)}.air-datepicker-time--row input[type=range]::-ms-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0, 0, 0, 0);background:rgba(0, 0, 0, 0)}.air-datepicker-time--row input[type=range]::-ms-fill-lower{background:rgba(0, 0, 0, 0)}.air-datepicker-time--row input[type=range]::-ms-fill-upper{background:rgba(0, 0, 0, 0)}.air-datepicker{--adp-font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';--adp-font-size:14px;--adp-width:246px;--adp-z-index:100;--adp-padding:4px;--adp-grid-areas:'nav' 'body' 'timepicker' 'buttons';--adp-transition-duration:0.3s;--adp-transition-ease:ease-out;--adp-transition-offset:8px;--adp-background-color:#fff;--adp-background-color-hover:#f0f0f0;--adp-background-color-active:#eaeaea;--adp-background-color-in-range:rgba(92, 196, 239, 0.1);--adp-background-color-in-range-focused:rgba(92, 196, 239, 0.2);--adp-background-color-selected-other-month-focused:#8ad5f4;--adp-background-color-selected-other-month:#a2ddf6;--adp-color:#4a4a4a;--adp-color-secondary:#9c9c9c;--adp-accent-color:#4eb5e6;--adp-color-current-date:var(--adp-accent-color);--adp-color-other-month:#dedede;--adp-color-disabled:#aeaeae;--adp-color-disabled-in-range:#939393;--adp-color-other-month-hover:#c5c5c5;--adp-border-color:#dbdbdb;--adp-border-color-inner:#efefef;--adp-border-radius:4px;--adp-border-color-inline:#d7d7d7;--adp-nav-height:32px;--adp-nav-arrow-color:var(--adp-color-secondary);--adp-nav-action-size:32px;--adp-nav-color-secondary:var(--adp-color-secondary);--adp-day-name-color:#ff9a19;--adp-day-name-color-hover:#8ad5f4;--adp-day-cell-width:1fr;--adp-day-cell-height:32px;--adp-month-cell-height:42px;--adp-year-cell-height:56px;--adp-pointer-size:10px;--adp-poiner-border-radius:2px;--adp-pointer-offset:14px;--adp-cell-border-radius:4px;--adp-cell-background-color-hover:var(--adp-background-color-hover);--adp-cell-background-color-selected:#5cc4ef;--adp-cell-background-color-selected-hover:#45bced;--adp-cell-background-color-in-range:rgba(92, 196, 239, 0.1);--adp-cell-background-color-in-range-hover:rgba(92, 196, 239, 0.2);--adp-cell-border-color-in-range:var(--adp-cell-background-color-selected);--adp-btn-height:32px;--adp-btn-color:var(--adp-accent-color);--adp-btn-color-hover:var(--adp-color);--adp-btn-border-radius:var(--adp-border-radius);--adp-btn-background-color-hover:var(--adp-background-color-hover);--adp-btn-background-color-active:var(--adp-background-color-active);--adp-time-track-height:1px;--adp-time-track-color:#dedede;--adp-time-track-color-hover:#b1b1b1;--adp-time-thumb-size:12px;--adp-time-padding-inner:10px;--adp-time-day-period-color:var(--adp-color-secondary);--adp-mobile-font-size:16px;--adp-mobile-nav-height:40px;--adp-mobile-width:320px;--adp-mobile-day-cell-height:38px;--adp-mobile-month-cell-height:48px;--adp-mobile-year-cell-height:64px}.air-datepicker-overlay{--adp-overlay-background-color:rgba(0, 0, 0, 0.3);--adp-overlay-transition-duration:0.3s;--adp-overlay-transition-ease:ease-out;--adp-overlay-z-index:99}.air-datepicker{background:var(--adp-background-color);border:1px solid var(--adp-border-color);-webkit-box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);border-radius:var(--adp-border-radius);-webkit-box-sizing:content-box;box-sizing:content-box;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(4, -webkit-max-content);grid-template-rows:repeat(4, max-content);grid-template-areas:var(--adp-grid-areas);font-family:var(--adp-font-family), sans-serif;font-size:var(--adp-font-size);color:var(--adp-color);width:var(--adp-width);position:absolute;-webkit-transition:opacity var(--adp-transition-duration) var(--adp-transition-ease), -webkit-transform var(--adp-transition-duration) var(--adp-transition-ease);transition:opacity var(--adp-transition-duration) var(--adp-transition-ease), -webkit-transform var(--adp-transition-duration) var(--adp-transition-ease);transition:opacity var(--adp-transition-duration) var(--adp-transition-ease), transform var(--adp-transition-duration) var(--adp-transition-ease);transition:opacity var(--adp-transition-duration) var(--adp-transition-ease), transform var(--adp-transition-duration) var(--adp-transition-ease), -webkit-transform var(--adp-transition-duration) var(--adp-transition-ease);z-index:var(--adp-z-index)}.air-datepicker:not(.-custom-position-){opacity:0}.air-datepicker.-from-top-{-webkit-transform:translateY(calc(var(--adp-transition-offset) * -1));transform:translateY(calc(var(--adp-transition-offset) * -1))}.air-datepicker.-from-right-{-webkit-transform:translateX(var(--adp-transition-offset));transform:translateX(var(--adp-transition-offset))}.air-datepicker.-from-bottom-{-webkit-transform:translateY(var(--adp-transition-offset));transform:translateY(var(--adp-transition-offset))}.air-datepicker.-from-left-{-webkit-transform:translateX(calc(var(--adp-transition-offset) * -1));transform:translateX(calc(var(--adp-transition-offset) * -1))}.air-datepicker.-active-:not(.-custom-position-){-webkit-transform:translate(0, 0);transform:translate(0, 0);opacity:1}.air-datepicker.-active-.-custom-position-{-webkit-transition:none;transition:none}.air-datepicker.-inline-{border-color:var(--adp-border-color-inline);-webkit-box-shadow:none;box-shadow:none;position:static;left:auto;right:auto;opacity:1;-webkit-transform:none;transform:none}.air-datepicker.-inline- .air-datepicker--pointer{display:none}.air-datepicker.-is-mobile-{--adp-font-size:var(--adp-mobile-font-size);--adp-day-cell-height:var(--adp-mobile-day-cell-height);--adp-month-cell-height:var(--adp-mobile-month-cell-height);--adp-year-cell-height:var(--adp-mobile-year-cell-height);--adp-nav-height:var(--adp-mobile-nav-height);--adp-nav-action-size:var(--adp-mobile-nav-height);position:fixed;width:var(--adp-mobile-width);border:none}.air-datepicker.-is-mobile- *{-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.air-datepicker.-is-mobile- .air-datepicker--pointer{display:none}.air-datepicker.-is-mobile-:not(.-custom-position-){-webkit-transform:translate(-50%, calc(-50% + var(--adp-transition-offset)));transform:translate(-50%, calc(-50% + var(--adp-transition-offset)))}.air-datepicker.-is-mobile-.-active-:not(.-custom-position-){-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.air-datepicker.-custom-position-{-webkit-transition:none;transition:none}.air-datepicker-global-container{position:absolute;left:0;top:0}.air-datepicker--pointer{--pointer-half-size:calc(var(--adp-pointer-size) / 2);position:absolute;width:var(--adp-pointer-size);height:var(--adp-pointer-size);z-index:-1}.air-datepicker--pointer:after{content:"";position:absolute;background:#fff;border-top:1px solid var(--adp-border-color-inline);border-right:1px solid var(--adp-border-color-inline);border-top-right-radius:var(--adp-poiner-border-radius);width:var(--adp-pointer-size);height:var(--adp-pointer-size);-webkit-box-sizing:border-box;box-sizing:border-box}.-top-left- .air-datepicker--pointer,.-top-center- .air-datepicker--pointer,.-top-right- .air-datepicker--pointer,[data-popper-placement^=top] .air-datepicker--pointer{top:calc(100% - var(--pointer-half-size) + 1px)}.-top-left- .air-datepicker--pointer:after,.-top-center- .air-datepicker--pointer:after,.-top-right- .air-datepicker--pointer:after,[data-popper-placement^=top] .air-datepicker--pointer:after{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.-right-top- .air-datepicker--pointer,.-right-center- .air-datepicker--pointer,.-right-bottom- .air-datepicker--pointer,[data-popper-placement^=right] .air-datepicker--pointer{right:calc(100% - var(--pointer-half-size) + 1px)}.-right-top- .air-datepicker--pointer:after,.-right-center- .air-datepicker--pointer:after,.-right-bottom- .air-datepicker--pointer:after,[data-popper-placement^=right] .air-datepicker--pointer:after{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.-bottom-left- .air-datepicker--pointer,.-bottom-center- .air-datepicker--pointer,.-bottom-right- .air-datepicker--pointer,[data-popper-placement^=bottom] .air-datepicker--pointer{bottom:calc(100% - var(--pointer-half-size) + 1px)}.-bottom-left- .air-datepicker--pointer:after,.-bottom-center- .air-datepicker--pointer:after,.-bottom-right- .air-datepicker--pointer:after,[data-popper-placement^=bottom] .air-datepicker--pointer:after{-webkit-transform:rotate(315deg);transform:rotate(315deg)}.-left-top- .air-datepicker--pointer,.-left-center- .air-datepicker--pointer,.-left-bottom- .air-datepicker--pointer,[data-popper-placement^=left] .air-datepicker--pointer{left:calc(100% - var(--pointer-half-size) + 1px)}.-left-top- .air-datepicker--pointer:after,.-left-center- .air-datepicker--pointer:after,.-left-bottom- .air-datepicker--pointer:after,[data-popper-placement^=left] .air-datepicker--pointer:after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.-top-left- .air-datepicker--pointer,.-bottom-left- .air-datepicker--pointer{left:var(--adp-pointer-offset)}.-top-right- .air-datepicker--pointer,.-bottom-right- .air-datepicker--pointer{right:var(--adp-pointer-offset)}.-top-center- .air-datepicker--pointer,.-bottom-center- .air-datepicker--pointer{left:calc(50% - var(--adp-pointer-size) / 2)}.-left-top- .air-datepicker--pointer,.-right-top- .air-datepicker--pointer{top:var(--adp-pointer-offset)}.-left-bottom- .air-datepicker--pointer,.-right-bottom- .air-datepicker--pointer{bottom:var(--adp-pointer-offset)}.-left-center- .air-datepicker--pointer,.-right-center- .air-datepicker--pointer{top:calc(50% - var(--adp-pointer-size) / 2)}.air-datepicker--navigation{grid-area:nav}.air-datepicker--content{-webkit-box-sizing:content-box;box-sizing:content-box;padding:var(--adp-padding);grid-area:body}.-only-timepicker- .air-datepicker--content{display:none}.air-datepicker--time{grid-area:timepicker}.air-datepicker--buttons{grid-area:buttons}.air-datepicker--buttons,.air-datepicker--time{padding:var(--adp-padding);border-top:1px solid var(--adp-border-color-inner)}.air-datepicker-overlay{position:fixed;background:var(--adp-overlay-background-color);left:0;top:0;width:0;height:0;opacity:0;-webkit-transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), left 0s, height 0s, width 0s;transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), left 0s, height 0s, width 0s;-webkit-transition-delay:0s, var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration);transition-delay:0s, var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration);z-index:var(--adp-overlay-z-index)}.air-datepicker-overlay.-active-{opacity:1;width:100%;height:100%;-webkit-transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), height 0s, width 0s;transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), height 0s, width 0s}@-webkit-keyframes adp-spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes adp-spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;const S=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.settingsPress=a(this,"settingsPress");this.settingsChanged=a(this,"settingsChanged");this.deleted=a(this,"deleted");this.source="template";this.sourceid="";this.fieldname="";this.disabled=false;this.editable=false;this.moveable=false;this.done=false;this.xscale=1;this.yscale=1;this.pagenumber=1;this.containerId=`verdocs-date-picker-${Math.random().toString(36).substring(2,11)}`;this.showingProperties=false;this.focused=false;this.picker=null}handleBlur(){this.focused=false}async focusField(){this.inputEl.focus();this.focused=true}componentDidLoad(){const{source:e,sourceid:r,fieldname:a}=this;const{field:t}=h.getField(e,r,a,this.field);const{readonly:o=false}=t||{};if(!o){this.picker=new p(`#${this.containerId}`,{locale:s,isMobile:true,autoClose:true,onShow:()=>this.focused=true,onHide:()=>this.focused=false,onSelect:({date:e,formattedDate:r})=>{const a=new CustomEvent("fieldChange",{detail:{date:e,formattedDate:r}});this.el.dispatchEvent(a)}})}}onEditableChanged(e,r){if(r&&!e){c(this.el).unset()}}disconnectedCallback(){c(this.el).unset()}componentDidRender(){c.dynamicDrop(true);if(this.editable){c(this.el).resizable({edges:{top:".edge-top",left:".edge-left",bottom:".edge-bottom",right:".edge-right"},modifiers:[c.modifiers.restrictSize({min:{width:50,height:12}})],listeners:{start:this.handleResizeStart.bind(this),move:this.handleResize.bind(this),end:this.handleResizeEnd.bind(this)}})}}handleResizeStart(e){e.preventDefault();e.stopPropagation();e.target.dataset.originalBottom=e.target.style.bottom}handleResize(e){let{width:r,height:a}=e.rect;const t=e.deltaRect.left;const o=e.deltaRect.bottom;const i=parseFloat(e.target.style.left);const d=parseFloat(e.target.style.bottom);r/=this.xscale;a/=this.yscale;Object.assign(e.target.style,{width:`${r}px`,height:`${a}px`,left:`${i+t}px`,bottom:`${d-o}px`})}async handleResizeEnd(e){const{sourceid:r,fieldname:a}=this;const t=Math.round(parseFloat(e.target.style.width));let o=Math.round(parseFloat(e.target.style.height));if(o<12){o=12}const i=parseFloat(e.target.style.bottom);const d=parseFloat(e.target.dataset.originalBottom);const n=await h.getTemplate(l.getDefault(),this.sourceid);const c=n.fields.find((e=>e.name===a));const p=i!==d?i/this.yscale:c===null||c===void 0?void 0:c.y;b(l.getDefault(),r,a,{width:t,height:o,y:p}).then((async r=>{var t;const o=await h.getTemplate(l.getDefault(),this.sourceid);const i=JSON.parse(JSON.stringify(o));const d=i.fields.findIndex((e=>e.name===a));if(d>-1){i.fields[d]=r}h.updateTemplate(this.sourceid,i);(t=this.settingsChanged)===null||t===void 0?void 0:t.emit({fieldName:a,field:r});Object.assign(e.target.dataset,{x:0,y:0,h:0})})).catch((e=>console.log("Field update failed",e)))}async showSettingsPanel(){const e=document.getElementById(`verdocs-settings-panel-${this.fieldname}`);if(e&&e.showPanel){e.showPanel()}}async hideSettingsPanel(){const e=document.getElementById(`verdocs-settings-panel-${this.fieldname}`);if(e&&e.hidePanel){e.hidePanel()}}render(){const{source:e,sourceid:r,fieldname:a,editable:d=false,done:c=false,disabled:p=false,focused:s,xscale:l=1,yscale:b=1}=this;const{index:m,field:u}=h.getField(e,r,a,this.field);const{required:v=false,placeholder:k="Date...",value:x="",label:y="",readonly:w=false,height:z=20,width:j=74}=u||{};const E=`signer-${m%10+1}`;const S=z<20||j<74;const C=x?n.format(new Date(x),g):"";if(this.done){return t(i,{class:{"verdocs-field":true,done:c}},C)}return t(i,{class:{"verdocs-field":true,required:v,disabled:p,done:c,focused:s,small:S,[E]:true}},d&&t("div",{class:"edge-top"}),d&&t("div",{class:"edge-right"}),d&&t("div",{class:"edge-left"}),d&&t("div",{class:"edge-bottom"}),y&&t("label",null,y),t("input",{name:a,class:"input-el",type:"text",value:C,id:this.containerId,placeholder:k,disabled:w||p,ref:e=>this.inputEl=e,onFocus:()=>this.focused=true,onBlur:()=>this.focused=false}),d&&t(o,null,t("div",{id:`verdocs-settings-panel-trigger-${a}`,style:{transform:`scale(${Math.floor(1/l*1e3)/1e3}, ${Math.floor(1/b*1e3)/1e3})`},class:"settings-icon",innerHTML:f,onClick:e=>{e.stopPropagation();this.showingProperties=!this.showingProperties}}),this.showingProperties&&t("verdocs-portal",{anchor:`verdocs-settings-panel-trigger-${u.name}`,onClickAway:()=>this.showingProperties=false},t("verdocs-template-field-properties",{templateId:r,fieldName:a,onClose:()=>this.showingProperties=false,onDelete:()=>{var e;(e=this.deleted)===null||e===void 0?void 0:e.emit({fieldName:a});return this.hideSettingsPanel()},onSettingsChanged:e=>{var r;(r=this.settingsChanged)===null||r===void 0?void 0:r.emit(e.detail);return this.hideSettingsPanel()},helpText:"Date fields allow the user to select a date."}))))}get el(){return this}static get watchers(){return{editable:[{onEditableChanged:0}]}}static get style(){return E()}},[0,"verdocs-field-date",{source:[513],sourceid:[513],fieldname:[513],disabled:[516],editable:[516],moveable:[516],done:[516],xscale:[514],yscale:[514],pagenumber:[514],field:[16],isPreview:[516,"is-preview"],containerId:[32],showingProperties:[32],focused:[32],focusField:[64],showSettingsPanel:[64],hideSettingsPanel:[64]},[[2,"blur","handleBlur"]],{editable:[{onEditableChanged:0}]}]);function C(){if(typeof customElements==="undefined"){return}const e=["verdocs-field-date","verdocs-button","verdocs-checkbox","verdocs-component-error","verdocs-help-icon","verdocs-loader","verdocs-portal","verdocs-select-input","verdocs-template-field-properties","verdocs-text-input"];e.forEach((e=>{switch(e){case"verdocs-field-date":if(!customElements.get(d(e))){customElements.define(d(e),S)}break;case"verdocs-button":if(!customElements.get(d(e))){m()}break;case"verdocs-checkbox":if(!customElements.get(d(e))){u()}break;case"verdocs-component-error":if(!customElements.get(d(e))){v()}break;case"verdocs-help-icon":if(!customElements.get(d(e))){k()}break;case"verdocs-loader":if(!customElements.get(d(e))){x()}break;case"verdocs-portal":if(!customElements.get(d(e))){y()}break;case"verdocs-select-input":if(!customElements.get(d(e))){w()}break;case"verdocs-template-field-properties":if(!customElements.get(d(e))){z()}break;case"verdocs-text-input":if(!customElements.get(d(e))){j()}break}}))}export{S as V,C as d};
-//# sourceMappingURL=p-D0MFs2Dv.js.map
+import{p as e,H as r,c as a,h as t,F as o,d as i,t as d}from"./p-yZBlG3YQ.js";import{d as n}from"./p-DGOUAxVN.js";import{i as c}from"./p-COaijEV0.js";import{A as p,l as s}from"./p-DcAXub3q.js";import{VerdocsEndpoint as l,updateField as b}from"@verdocs/js-sdk";import{S as f}from"./p-C7k2AOsW.js";import{a as g}from"./p-17OorOnH.js";import{S as h}from"./p-C7hFgM52.js";import{d as m}from"./p-Bb5V9TQx.js";import{d as u}from"./p-NtvxlYzY.js";import{d as v}from"./p-C-v22G3g.js";import{d as k}from"./p-DHzSlpJw.js";import{d as x}from"./p-DqzFuSNN.js";import{d as y}from"./p-DhOuB4nS.js";import{d as w}from"./p-Bodw4NVB.js";import{d as z}from"./p-qLNetL5t.js";import{d as j}from"./p-PfdIkMoz.js";const E=()=>`verdocs-field-date{font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);width:74px;height:20px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;letter-spacing:0.3px;background-color:var(--verdocs-field-background, transparent);-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-date.small input{font-size:7px}verdocs-field-date .edge-top,verdocs-field-date .edge-right,verdocs-field-date .edge-left,verdocs-field-date .edge-bottom{position:absolute;z-index:10}verdocs-field-date .edge-top{top:-2px;left:0;right:0;height:5px}verdocs-field-date .edge-right{top:0;bottom:0;right:-2px;width:5px}verdocs-field-date .edge-left{top:0;left:-2px;bottom:0;width:5px}verdocs-field-date .edge-bottom{bottom:-2px;left:0;right:0;height:5px}verdocs-field-date label{top:-14px;left:0;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-date input{position:absolute;font-size:12px;cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87));font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;border:var(--verdocs-field-border, 1px solid #cccccc);border-radius:var(--verdocs-field-radius);-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-date input.hide{display:none}verdocs-field-date.disabled input{opacity:0.5}verdocs-field-date.required input{border:1px solid var(--verdocs-required-field-border)}verdocs-field-date 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-date verdocs-button-panel[data-active],verdocs-field-date verdocs-button-panel:hover{opacity:1}verdocs-field-date verdocs-button-panel .icon svg{fill:#333333}verdocs-field-date verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-date .settings-icon{position:absolute;top:-3px;left:-18px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-date .settings-icon svg{fill:#707ae5}verdocs-field-date .settings-icon:hover{opacity:1}.air-datepicker-cell.-year-.-other-decade-,.air-datepicker-cell.-day-.-other-month-{color:var(--adp-color-other-month)}.air-datepicker-cell.-year-.-other-decade-:hover,.air-datepicker-cell.-day-.-other-month-:hover{color:var(--adp-color-other-month-hover)}.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-disabled-.-focus-.air-datepicker-cell.-day-.-other-month-{color:var(--adp-color-other-month)}.-selected-.air-datepicker-cell.-year-.-other-decade-,.-selected-.air-datepicker-cell.-day-.-other-month-{color:#fff;background:var(--adp-background-color-selected-other-month)}.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-selected-.-focus-.air-datepicker-cell.-day-.-other-month-{background:var(--adp-background-color-selected-other-month-focused)}.-in-range-.air-datepicker-cell.-year-.-other-decade-,.-in-range-.air-datepicker-cell.-day-.-other-month-{background-color:var(--adp-background-color-in-range);color:var(--adp-color)}.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-in-range-.-focus-.air-datepicker-cell.-day-.-other-month-{background-color:var(--adp-background-color-in-range-focused)}.air-datepicker-cell.-year-.-other-decade-:empty,.air-datepicker-cell.-day-.-other-month-:empty{background:none;border:none}.air-datepicker-cell{border-radius:var(--adp-cell-border-radius);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:1}.air-datepicker-cell.-focus-{background:var(--adp-cell-background-color-hover)}.air-datepicker-cell.-current-{color:var(--adp-color-current-date)}.air-datepicker-cell.-current-.-focus-{color:var(--adp-color)}.air-datepicker-cell.-current-.-in-range-{color:var(--adp-color-current-date)}.air-datepicker-cell.-disabled-{cursor:default;color:var(--adp-color-disabled)}.air-datepicker-cell.-disabled-.-focus-{color:var(--adp-color-disabled)}.air-datepicker-cell.-disabled-.-in-range-{color:var(--adp-color-disabled-in-range)}.air-datepicker-cell.-disabled-.-current-.-focus-{color:var(--adp-color-disabled)}.air-datepicker-cell.-in-range-{background:var(--adp-cell-background-color-in-range);border-radius:0}.air-datepicker-cell.-in-range-:hover{background:var(--adp-cell-background-color-in-range-hover)}.air-datepicker-cell.-range-from-{border:1px solid var(--adp-cell-border-color-in-range);background-color:var(--adp-cell-background-color-in-range);border-radius:var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius)}.air-datepicker-cell.-range-to-{border:1px solid var(--adp-cell-border-color-in-range);background-color:var(--adp-cell-background-color-in-range);border-radius:0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0}.air-datepicker-cell.-range-to-.-range-from-{border-radius:var(--adp-cell-border-radius)}.air-datepicker-cell.-selected-{color:#fff;border:none;background:var(--adp-cell-background-color-selected)}.air-datepicker-cell.-selected-.-current-{color:#fff;background:var(--adp-cell-background-color-selected)}.air-datepicker-cell.-selected-.-focus-{background:var(--adp-cell-background-color-selected-hover)}.air-datepicker-body{-webkit-transition:all var(--adp-transition-duration) var(--adp-transition-ease);transition:all var(--adp-transition-duration) var(--adp-transition-ease)}.air-datepicker-body.-hidden-{display:none}.air-datepicker-body--day-names{display:grid;grid-template-columns:repeat(7, var(--adp-day-cell-width));margin:8px 0 3px}.air-datepicker-body--day-name{color:var(--adp-day-name-color);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex:1;flex:1;text-align:center;text-transform:uppercase;font-size:0.8em}.air-datepicker-body--day-name.-clickable-{cursor:pointer}.air-datepicker-body--day-name.-clickable-:hover{color:var(--adp-day-name-color-hover)}.air-datepicker-body--cells{display:grid}.air-datepicker-body--cells.-days-{grid-template-columns:repeat(7, var(--adp-day-cell-width));grid-auto-rows:var(--adp-day-cell-height)}.air-datepicker-body--cells.-months-{grid-template-columns:repeat(3, 1fr);grid-auto-rows:var(--adp-month-cell-height)}.air-datepicker-body--cells.-years-{grid-template-columns:repeat(4, 1fr);grid-auto-rows:var(--adp-year-cell-height)}.air-datepicker-nav{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-bottom:1px solid var(--adp-border-color-inner);min-height:var(--adp-nav-height);padding:var(--adp-padding);-webkit-box-sizing:content-box;box-sizing:content-box}.-only-timepicker- .air-datepicker-nav{display:none}.air-datepicker-nav--title,.air-datepicker-nav--action{display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.air-datepicker-nav--action{width:var(--adp-nav-action-size);border-radius:var(--adp-border-radius);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.air-datepicker-nav--action:hover{background:var(--adp-background-color-hover)}.air-datepicker-nav--action:active{background:var(--adp-background-color-active)}.air-datepicker-nav--action.-disabled-{visibility:hidden}.air-datepicker-nav--action svg{width:32px;height:32px}.air-datepicker-nav--action path{fill:none;stroke:var(--adp-nav-arrow-color);stroke-width:2px}.air-datepicker-nav--title{border-radius:var(--adp-border-radius);padding:0 8px}.air-datepicker-nav--title i{font-style:normal;color:var(--adp-nav-color-secondary);margin-left:0.3em}.air-datepicker-nav--title:hover{background:var(--adp-background-color-hover)}.air-datepicker-nav--title:active{background:var(--adp-background-color-active)}.air-datepicker-nav--title.-disabled-{cursor:default;background:none}.air-datepicker-buttons{display:grid;grid-auto-columns:1fr;grid-auto-flow:column}.air-datepicker-button{display:-ms-inline-flexbox;display:inline-flex;color:var(--adp-btn-color);border-radius:var(--adp-btn-border-radius);cursor:pointer;height:var(--adp-btn-height);border:none;background:rgba(255, 255, 255, 0)}.air-datepicker-button:hover{color:var(--adp-btn-color-hover);background:var(--adp-btn-background-color-hover)}.air-datepicker-button:focus{color:var(--adp-btn-color-hover);background:var(--adp-btn-background-color-hover);outline:none}.air-datepicker-button:active{background:var(--adp-btn-background-color-active)}.air-datepicker-button span{outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.air-datepicker-time{display:grid;grid-template-columns:-webkit-max-content 1fr;grid-template-columns:max-content 1fr;grid-column-gap:12px;-ms-flex-align:center;align-items:center;position:relative;padding:0 var(--adp-time-padding-inner)}.-only-timepicker- .air-datepicker-time{border-top:none}.air-datepicker-time--current{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1;font-size:14px;text-align:center}.air-datepicker-time--current-colon{margin:0 2px 3px;line-height:1}.air-datepicker-time--current-hours,.air-datepicker-time--current-minutes{line-height:1;font-size:19px;font-family:"Century Gothic", CenturyGothic, AppleGothic, sans-serif;position:relative;z-index:1}.air-datepicker-time--current-hours:after,.air-datepicker-time--current-minutes:after{content:"";background:var(--adp-background-color-hover);border-radius:var(--adp-border-radius);position:absolute;left:-2px;top:-3px;right:-2px;bottom:-2px;z-index:-1;opacity:0}.air-datepicker-time--current-hours.-focus-:after,.air-datepicker-time--current-minutes.-focus-:after{opacity:1}.air-datepicker-time--current-ampm{text-transform:uppercase;-ms-flex-item-align:end;align-self:flex-end;color:var(--adp-time-day-period-color);margin-left:6px;font-size:11px;margin-bottom:1px}.air-datepicker-time--row{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:11px;height:17px;background:-webkit-gradient(linear, left top, right top, from(var(--adp-time-track-color)), to(var(--adp-time-track-color))) left 50%/100% var(--adp-time-track-height) no-repeat;background:linear-gradient(to right, var(--adp-time-track-color), var(--adp-time-track-color)) left 50%/100% var(--adp-time-track-height) no-repeat}.air-datepicker-time--row:first-child{margin-bottom:4px}.air-datepicker-time--row input[type=range]{background:none;cursor:pointer;-ms-flex:1;flex:1;height:100%;width:100%;padding:0;margin:0;-webkit-appearance:none}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}.air-datepicker-time--row input[type=range]::-ms-tooltip{display:none}.air-datepicker-time--row input[type=range]:hover::-webkit-slider-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:hover::-moz-range-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:hover::-ms-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:focus{outline:none}.air-datepicker-time--row input[type=range]:focus::-webkit-slider-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]:focus::-moz-range-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]:focus::-ms-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{-webkit-box-sizing:border-box;box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-webkit-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-moz-range-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-moz-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-ms-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-ms-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{margin-top:calc(var(--adp-time-thumb-size) / 2 * -1)}.air-datepicker-time--row input[type=range]::-webkit-slider-runnable-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0, 0, 0, 0);background:rgba(0, 0, 0, 0)}.air-datepicker-time--row input[type=range]::-moz-range-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0, 0, 0, 0);background:rgba(0, 0, 0, 0)}.air-datepicker-time--row input[type=range]::-ms-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0, 0, 0, 0);background:rgba(0, 0, 0, 0)}.air-datepicker-time--row input[type=range]::-ms-fill-lower{background:rgba(0, 0, 0, 0)}.air-datepicker-time--row input[type=range]::-ms-fill-upper{background:rgba(0, 0, 0, 0)}.air-datepicker{--adp-font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';--adp-font-size:14px;--adp-width:246px;--adp-z-index:100;--adp-padding:4px;--adp-grid-areas:'nav' 'body' 'timepicker' 'buttons';--adp-transition-duration:0.3s;--adp-transition-ease:ease-out;--adp-transition-offset:8px;--adp-background-color:#fff;--adp-background-color-hover:#f0f0f0;--adp-background-color-active:#eaeaea;--adp-background-color-in-range:rgba(92, 196, 239, 0.1);--adp-background-color-in-range-focused:rgba(92, 196, 239, 0.2);--adp-background-color-selected-other-month-focused:#8ad5f4;--adp-background-color-selected-other-month:#a2ddf6;--adp-color:#4a4a4a;--adp-color-secondary:#9c9c9c;--adp-accent-color:#4eb5e6;--adp-color-current-date:var(--adp-accent-color);--adp-color-other-month:#dedede;--adp-color-disabled:#aeaeae;--adp-color-disabled-in-range:#939393;--adp-color-other-month-hover:#c5c5c5;--adp-border-color:#dbdbdb;--adp-border-color-inner:#efefef;--adp-border-radius:4px;--adp-border-color-inline:#d7d7d7;--adp-nav-height:32px;--adp-nav-arrow-color:var(--adp-color-secondary);--adp-nav-action-size:32px;--adp-nav-color-secondary:var(--adp-color-secondary);--adp-day-name-color:#ff9a19;--adp-day-name-color-hover:#8ad5f4;--adp-day-cell-width:1fr;--adp-day-cell-height:32px;--adp-month-cell-height:42px;--adp-year-cell-height:56px;--adp-pointer-size:10px;--adp-poiner-border-radius:2px;--adp-pointer-offset:14px;--adp-cell-border-radius:4px;--adp-cell-background-color-hover:var(--adp-background-color-hover);--adp-cell-background-color-selected:#5cc4ef;--adp-cell-background-color-selected-hover:#45bced;--adp-cell-background-color-in-range:rgba(92, 196, 239, 0.1);--adp-cell-background-color-in-range-hover:rgba(92, 196, 239, 0.2);--adp-cell-border-color-in-range:var(--adp-cell-background-color-selected);--adp-btn-height:32px;--adp-btn-color:var(--adp-accent-color);--adp-btn-color-hover:var(--adp-color);--adp-btn-border-radius:var(--adp-border-radius);--adp-btn-background-color-hover:var(--adp-background-color-hover);--adp-btn-background-color-active:var(--adp-background-color-active);--adp-time-track-height:1px;--adp-time-track-color:#dedede;--adp-time-track-color-hover:#b1b1b1;--adp-time-thumb-size:12px;--adp-time-padding-inner:10px;--adp-time-day-period-color:var(--adp-color-secondary);--adp-mobile-font-size:16px;--adp-mobile-nav-height:40px;--adp-mobile-width:320px;--adp-mobile-day-cell-height:38px;--adp-mobile-month-cell-height:48px;--adp-mobile-year-cell-height:64px}.air-datepicker-overlay{--adp-overlay-background-color:rgba(0, 0, 0, 0.3);--adp-overlay-transition-duration:0.3s;--adp-overlay-transition-ease:ease-out;--adp-overlay-z-index:99}.air-datepicker{background:var(--adp-background-color);border:1px solid var(--adp-border-color);-webkit-box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);border-radius:var(--adp-border-radius);-webkit-box-sizing:content-box;box-sizing:content-box;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(4, -webkit-max-content);grid-template-rows:repeat(4, max-content);grid-template-areas:var(--adp-grid-areas);font-family:var(--adp-font-family), sans-serif;font-size:var(--adp-font-size);color:var(--adp-color);width:var(--adp-width);position:absolute;-webkit-transition:opacity var(--adp-transition-duration) var(--adp-transition-ease), -webkit-transform var(--adp-transition-duration) var(--adp-transition-ease);transition:opacity var(--adp-transition-duration) var(--adp-transition-ease), -webkit-transform var(--adp-transition-duration) var(--adp-transition-ease);transition:opacity var(--adp-transition-duration) var(--adp-transition-ease), transform var(--adp-transition-duration) var(--adp-transition-ease);transition:opacity var(--adp-transition-duration) var(--adp-transition-ease), transform var(--adp-transition-duration) var(--adp-transition-ease), -webkit-transform var(--adp-transition-duration) var(--adp-transition-ease);z-index:var(--adp-z-index)}.air-datepicker:not(.-custom-position-){opacity:0}.air-datepicker.-from-top-{-webkit-transform:translateY(calc(var(--adp-transition-offset) * -1));transform:translateY(calc(var(--adp-transition-offset) * -1))}.air-datepicker.-from-right-{-webkit-transform:translateX(var(--adp-transition-offset));transform:translateX(var(--adp-transition-offset))}.air-datepicker.-from-bottom-{-webkit-transform:translateY(var(--adp-transition-offset));transform:translateY(var(--adp-transition-offset))}.air-datepicker.-from-left-{-webkit-transform:translateX(calc(var(--adp-transition-offset) * -1));transform:translateX(calc(var(--adp-transition-offset) * -1))}.air-datepicker.-active-:not(.-custom-position-){-webkit-transform:translate(0, 0);transform:translate(0, 0);opacity:1}.air-datepicker.-active-.-custom-position-{-webkit-transition:none;transition:none}.air-datepicker.-inline-{border-color:var(--adp-border-color-inline);-webkit-box-shadow:none;box-shadow:none;position:static;left:auto;right:auto;opacity:1;-webkit-transform:none;transform:none}.air-datepicker.-inline- .air-datepicker--pointer{display:none}.air-datepicker.-is-mobile-{--adp-font-size:var(--adp-mobile-font-size);--adp-day-cell-height:var(--adp-mobile-day-cell-height);--adp-month-cell-height:var(--adp-mobile-month-cell-height);--adp-year-cell-height:var(--adp-mobile-year-cell-height);--adp-nav-height:var(--adp-mobile-nav-height);--adp-nav-action-size:var(--adp-mobile-nav-height);position:fixed;width:var(--adp-mobile-width);border:none}.air-datepicker.-is-mobile- *{-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.air-datepicker.-is-mobile- .air-datepicker--pointer{display:none}.air-datepicker.-is-mobile-:not(.-custom-position-){-webkit-transform:translate(-50%, calc(-50% + var(--adp-transition-offset)));transform:translate(-50%, calc(-50% + var(--adp-transition-offset)))}.air-datepicker.-is-mobile-.-active-:not(.-custom-position-){-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.air-datepicker.-custom-position-{-webkit-transition:none;transition:none}.air-datepicker-global-container{position:absolute;left:0;top:0}.air-datepicker--pointer{--pointer-half-size:calc(var(--adp-pointer-size) / 2);position:absolute;width:var(--adp-pointer-size);height:var(--adp-pointer-size);z-index:-1}.air-datepicker--pointer:after{content:"";position:absolute;background:#fff;border-top:1px solid var(--adp-border-color-inline);border-right:1px solid var(--adp-border-color-inline);border-top-right-radius:var(--adp-poiner-border-radius);width:var(--adp-pointer-size);height:var(--adp-pointer-size);-webkit-box-sizing:border-box;box-sizing:border-box}.-top-left- .air-datepicker--pointer,.-top-center- .air-datepicker--pointer,.-top-right- .air-datepicker--pointer,[data-popper-placement^=top] .air-datepicker--pointer{top:calc(100% - var(--pointer-half-size) + 1px)}.-top-left- .air-datepicker--pointer:after,.-top-center- .air-datepicker--pointer:after,.-top-right- .air-datepicker--pointer:after,[data-popper-placement^=top] .air-datepicker--pointer:after{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.-right-top- .air-datepicker--pointer,.-right-center- .air-datepicker--pointer,.-right-bottom- .air-datepicker--pointer,[data-popper-placement^=right] .air-datepicker--pointer{right:calc(100% - var(--pointer-half-size) + 1px)}.-right-top- .air-datepicker--pointer:after,.-right-center- .air-datepicker--pointer:after,.-right-bottom- .air-datepicker--pointer:after,[data-popper-placement^=right] .air-datepicker--pointer:after{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.-bottom-left- .air-datepicker--pointer,.-bottom-center- .air-datepicker--pointer,.-bottom-right- .air-datepicker--pointer,[data-popper-placement^=bottom] .air-datepicker--pointer{bottom:calc(100% - var(--pointer-half-size) + 1px)}.-bottom-left- .air-datepicker--pointer:after,.-bottom-center- .air-datepicker--pointer:after,.-bottom-right- .air-datepicker--pointer:after,[data-popper-placement^=bottom] .air-datepicker--pointer:after{-webkit-transform:rotate(315deg);transform:rotate(315deg)}.-left-top- .air-datepicker--pointer,.-left-center- .air-datepicker--pointer,.-left-bottom- .air-datepicker--pointer,[data-popper-placement^=left] .air-datepicker--pointer{left:calc(100% - var(--pointer-half-size) + 1px)}.-left-top- .air-datepicker--pointer:after,.-left-center- .air-datepicker--pointer:after,.-left-bottom- .air-datepicker--pointer:after,[data-popper-placement^=left] .air-datepicker--pointer:after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.-top-left- .air-datepicker--pointer,.-bottom-left- .air-datepicker--pointer{left:var(--adp-pointer-offset)}.-top-right- .air-datepicker--pointer,.-bottom-right- .air-datepicker--pointer{right:var(--adp-pointer-offset)}.-top-center- .air-datepicker--pointer,.-bottom-center- .air-datepicker--pointer{left:calc(50% - var(--adp-pointer-size) / 2)}.-left-top- .air-datepicker--pointer,.-right-top- .air-datepicker--pointer{top:var(--adp-pointer-offset)}.-left-bottom- .air-datepicker--pointer,.-right-bottom- .air-datepicker--pointer{bottom:var(--adp-pointer-offset)}.-left-center- .air-datepicker--pointer,.-right-center- .air-datepicker--pointer{top:calc(50% - var(--adp-pointer-size) / 2)}.air-datepicker--navigation{grid-area:nav}.air-datepicker--content{-webkit-box-sizing:content-box;box-sizing:content-box;padding:var(--adp-padding);grid-area:body}.-only-timepicker- .air-datepicker--content{display:none}.air-datepicker--time{grid-area:timepicker}.air-datepicker--buttons{grid-area:buttons}.air-datepicker--buttons,.air-datepicker--time{padding:var(--adp-padding);border-top:1px solid var(--adp-border-color-inner)}.air-datepicker-overlay{position:fixed;background:var(--adp-overlay-background-color);left:0;top:0;width:0;height:0;opacity:0;-webkit-transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), left 0s, height 0s, width 0s;transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), left 0s, height 0s, width 0s;-webkit-transition-delay:0s, var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration);transition-delay:0s, var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration);z-index:var(--adp-overlay-z-index)}.air-datepicker-overlay.-active-{opacity:1;width:100%;height:100%;-webkit-transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), height 0s, width 0s;transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), height 0s, width 0s}@-webkit-keyframes adp-spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes adp-spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;const S=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.settingsPress=a(this,"settingsPress");this.settingsChanged=a(this,"settingsChanged");this.deleted=a(this,"deleted");this.source="template";this.sourceid="";this.fieldname="";this.disabled=false;this.editable=false;this.moveable=false;this.done=false;this.xscale=1;this.yscale=1;this.pagenumber=1;this.containerId=`verdocs-date-picker-${Math.random().toString(36).substring(2,11)}`;this.showingProperties=false;this.focused=false;this.picker=null}handleBlur(){this.focused=false}async focusField(){this.inputEl.focus();this.focused=true}componentDidLoad(){const{source:e,sourceid:r,fieldname:a}=this;const{field:t}=h.getField(e,r,a,this.field);const{readonly:o=false}=t||{};if(!o){this.picker=new p(`#${this.containerId}`,{locale:s,isMobile:true,autoClose:true,onShow:()=>this.focused=true,onHide:()=>this.focused=false,onSelect:({date:e,formattedDate:r})=>{const a=new CustomEvent("fieldChange",{detail:{date:e,formattedDate:r}});this.el.dispatchEvent(a)}})}}onEditableChanged(e,r){if(r&&!e){c(this.el).unset()}}disconnectedCallback(){c(this.el).unset()}componentDidRender(){c.dynamicDrop(true);if(this.editable){c(this.el).resizable({edges:{top:".edge-top",left:".edge-left",bottom:".edge-bottom",right:".edge-right"},modifiers:[c.modifiers.restrictSize({min:{width:50,height:12}})],listeners:{start:this.handleResizeStart.bind(this),move:this.handleResize.bind(this),end:this.handleResizeEnd.bind(this)}})}}handleResizeStart(e){e.preventDefault();e.stopPropagation();e.target.dataset.originalBottom=e.target.style.bottom}handleResize(e){let{width:r,height:a}=e.rect;const t=e.deltaRect.left;const o=e.deltaRect.bottom;const i=parseFloat(e.target.style.left);const d=parseFloat(e.target.style.bottom);r/=this.xscale;a/=this.yscale;Object.assign(e.target.style,{width:`${r}px`,height:`${a}px`,left:`${i+t}px`,bottom:`${d-o}px`})}async handleResizeEnd(e){const{sourceid:r,fieldname:a}=this;const t=Math.round(parseFloat(e.target.style.width));let o=Math.round(parseFloat(e.target.style.height));if(o<12){o=12}const i=parseFloat(e.target.style.bottom);const d=parseFloat(e.target.dataset.originalBottom);const n=await h.getTemplate(l.getDefault(),this.sourceid);const c=n.fields.find((e=>e.name===a));const p=i!==d?Math.round(i/this.yscale):c===null||c===void 0?void 0:c.y;b(l.getDefault(),r,a,{width:t,height:o,y:p}).then((async r=>{var t;const o=await h.getTemplate(l.getDefault(),this.sourceid);const i=JSON.parse(JSON.stringify(o));const d=i.fields.findIndex((e=>e.name===a));if(d>-1){i.fields[d]=r}h.updateTemplate(this.sourceid,i);(t=this.settingsChanged)===null||t===void 0?void 0:t.emit({fieldName:a,field:r});Object.assign(e.target.dataset,{x:0,y:0,h:0})})).catch((e=>console.log("Field update failed",e)))}async showSettingsPanel(){const e=document.getElementById(`verdocs-settings-panel-${this.fieldname}`);if(e&&e.showPanel){e.showPanel()}}async hideSettingsPanel(){const e=document.getElementById(`verdocs-settings-panel-${this.fieldname}`);if(e&&e.hidePanel){e.hidePanel()}}render(){const{source:e,sourceid:r,fieldname:a,editable:d=false,done:c=false,disabled:p=false,focused:s,xscale:l=1,yscale:b=1}=this;const{index:m,field:u}=h.getField(e,r,a,this.field);const{required:v=false,placeholder:k="Date...",value:x="",label:y="",readonly:w=false,height:z=20,width:j=74}=u||{};const E=`signer-${m%10+1}`;const S=z<20||j<74;const C=x?n.format(new Date(x),g):"";if(this.done){return t(i,{class:{"verdocs-field":true,done:c}},C)}return t(i,{class:{"verdocs-field":true,required:v,disabled:p,done:c,focused:s,small:S,[E]:true}},d&&t("div",{class:"edge-top"}),d&&t("div",{class:"edge-right"}),d&&t("div",{class:"edge-left"}),d&&t("div",{class:"edge-bottom"}),y&&t("label",null,y),t("input",{name:a,class:"input-el",type:"text",value:C,id:this.containerId,placeholder:k,disabled:w||p,ref:e=>this.inputEl=e,onFocus:()=>this.focused=true,onBlur:()=>this.focused=false}),d&&t(o,null,t("div",{id:`verdocs-settings-panel-trigger-${a}`,style:{transform:`scale(${Math.floor(1/l*1e3)/1e3}, ${Math.floor(1/b*1e3)/1e3})`},class:"settings-icon",innerHTML:f,onClick:e=>{e.stopPropagation();this.showingProperties=!this.showingProperties}}),this.showingProperties&&t("verdocs-portal",{anchor:`verdocs-settings-panel-trigger-${u.name}`,onClickAway:()=>this.showingProperties=false},t("verdocs-template-field-properties",{templateId:r,fieldName:a,onClose:()=>this.showingProperties=false,onDelete:()=>{var e;(e=this.deleted)===null||e===void 0?void 0:e.emit({fieldName:a});return this.hideSettingsPanel()},onSettingsChanged:e=>{var r;(r=this.settingsChanged)===null||r===void 0?void 0:r.emit(e.detail);return this.hideSettingsPanel()},helpText:"Date fields allow the user to select a date."}))))}get el(){return this}static get watchers(){return{editable:[{onEditableChanged:0}]}}static get style(){return E()}},[0,"verdocs-field-date",{source:[513],sourceid:[513],fieldname:[513],disabled:[516],editable:[516],moveable:[516],done:[516],xscale:[514],yscale:[514],pagenumber:[514],field:[16],isPreview:[516,"is-preview"],containerId:[32],showingProperties:[32],focused:[32],focusField:[64],showSettingsPanel:[64],hideSettingsPanel:[64]},[[2,"blur","handleBlur"]],{editable:[{onEditableChanged:0}]}]);function C(){if(typeof customElements==="undefined"){return}const e=["verdocs-field-date","verdocs-button","verdocs-checkbox","verdocs-component-error","verdocs-help-icon","verdocs-loader","verdocs-portal","verdocs-select-input","verdocs-template-field-properties","verdocs-text-input"];e.forEach((e=>{switch(e){case"verdocs-field-date":if(!customElements.get(d(e))){customElements.define(d(e),S)}break;case"verdocs-button":if(!customElements.get(d(e))){m()}break;case"verdocs-checkbox":if(!customElements.get(d(e))){u()}break;case"verdocs-component-error":if(!customElements.get(d(e))){v()}break;case"verdocs-help-icon":if(!customElements.get(d(e))){k()}break;case"verdocs-loader":if(!customElements.get(d(e))){x()}break;case"verdocs-portal":if(!customElements.get(d(e))){y()}break;case"verdocs-select-input":if(!customElements.get(d(e))){w()}break;case"verdocs-template-field-properties":if(!customElements.get(d(e))){z()}break;case"verdocs-text-input":if(!customElements.get(d(e))){j()}break}}))}export{S as V,C as d};
+//# sourceMappingURL=p-C8ZliaLz.js.map

package/dist/components/{p-D0MFs2Dv.js.map → p-C8ZliaLz.js.map}

@@ -1 +1 @@
-{"version":3,"names":["verdocsFieldDateCss","VerdocsFieldDate","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","source","sourceid","fieldname","disabled","editable","moveable","done","xscale","yscale","pagenumber","containerId","Math","random","toString","substring","showingProperties","focused","picker","handleBlur","focusField","inputEl","focus","componentDidLoad","field","Store","getField","readonly","AirDatepicker","locale","localeEn","isMobile","autoClose","onShow","onHide","onSelect","date","formattedDate","event","CustomEvent","detail","el","dispatchEvent","onEditableChanged","newVal","oldVal","interact","unset","disconnectedCallback","componentDidRender","dynamicDrop","resizable","edges","top","left","bottom","right","modifiers","restrictSize","min","width","height","listeners","start","handleResizeStart","bind","move","handleResize","end","handleResizeEnd","e","preventDefault","stopPropagation","target","dataset","originalBottom","style","rect","dX","deltaRect","dY","currentLeft","parseFloat","currentBottom","Object","assign","round","newBottom","template","getTemplate","VerdocsEndpoint","getDefault","oldField","fields","find","f","name","y","updateField","then","async","updatedField","newTemplate","JSON","parse","stringify","fieldIndex","findIndex","updateTemplate","_a","settingsChanged","emit","fieldName","x","h","catch","console","log","showSettingsPanel","settingsPanel","document","getElementById","showPanel","hideSettingsPanel","hidePanel","render","index","required","placeholder","value","label","signerClass","small","formattedValue","format","Date","FORMAT_DATE","Host","class","type","id","ref","onFocus","onBlur","Fragment","transform","floor","innerHTML","SettingsIcon","onClick","anchor","onClickAway","templateId","onClose","onDelete","deleted","onSettingsChanged","helpText"],"sources":["src/components/fields/verdocs-field-date/verdocs-field-date.scss?tag=verdocs-field-date","src/components/fields/verdocs-field-date/verdocs-field-date.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-date {\n  font-family: $verdocs-primary-font;\n  width: 74px;\n  height: 20px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  letter-spacing: 0.3px;\n  background-color: var(--verdocs-field-background, transparent);\n  transform-origin: bottom left;\n\n  &.small input {\n    font-size: 7px;\n  }\n\n  .edge-top,\n  .edge-right,\n  .edge-left,\n  .edge-bottom {\n    position: absolute;\n    z-index: 10;\n  }\n\n  .edge-top {\n    top: -2px;\n    left: 0;\n    right: 0;\n    height: 5px;\n  }\n\n  .edge-right {\n    top: 0;\n    bottom: 0;\n    right: -2px;\n    width: 5px;\n  }\n\n  .edge-left {\n    top: 0;\n    left: -2px;\n    bottom: 0;\n    width: 5px;\n  }\n\n  .edge-bottom {\n    bottom: -2px;\n    left: 0;\n    right: 0;\n    height: 5px;\n  }\n\n  label {\n    top: -14px;\n    left: 0;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  input {\n    position: absolute;\n\n    font-size: 12px;\n\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    box-sizing: border-box;\n    color: var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87));\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    border: var(--verdocs-field-border, 1px solid $light-border-color);\n    border-radius: var(--verdocs-field-radius);\n    appearance: none;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled input {\n    opacity: 0.5;\n  }\n\n  &.required {\n    input {\n      border: 1px solid var(--verdocs-required-field-border);\n    }\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  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -18px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n.air-datepicker-cell.-year-.-other-decade-,\n.air-datepicker-cell.-day-.-other-month- {\n  color: var(--adp-color-other-month);\n}\n\n.air-datepicker-cell.-year-.-other-decade-:hover,\n.air-datepicker-cell.-day-.-other-month-:hover {\n  color: var(--adp-color-other-month-hover);\n}\n\n.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-,\n.-disabled-.-focus-.air-datepicker-cell.-day-.-other-month- {\n  color: var(--adp-color-other-month);\n}\n\n.-selected-.air-datepicker-cell.-year-.-other-decade-,\n.-selected-.air-datepicker-cell.-day-.-other-month- {\n  color: #fff;\n  background: var(--adp-background-color-selected-other-month);\n}\n\n.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-,\n.-selected-.-focus-.air-datepicker-cell.-day-.-other-month- {\n  background: var(--adp-background-color-selected-other-month-focused);\n}\n\n.-in-range-.air-datepicker-cell.-year-.-other-decade-,\n.-in-range-.air-datepicker-cell.-day-.-other-month- {\n  background-color: var(--adp-background-color-in-range);\n  color: var(--adp-color);\n}\n\n.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-,\n.-in-range-.-focus-.air-datepicker-cell.-day-.-other-month- {\n  background-color: var(--adp-background-color-in-range-focused);\n}\n\n.air-datepicker-cell.-year-.-other-decade-:empty,\n.air-datepicker-cell.-day-.-other-month-:empty {\n  background: none;\n  border: none;\n}\n\n.air-datepicker-cell {\n  border-radius: var(--adp-cell-border-radius);\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n}\n\n.air-datepicker-cell.-focus- {\n  background: var(--adp-cell-background-color-hover);\n}\n\n.air-datepicker-cell.-current- {\n  color: var(--adp-color-current-date);\n}\n\n.air-datepicker-cell.-current-.-focus- {\n  color: var(--adp-color);\n}\n\n.air-datepicker-cell.-current-.-in-range- {\n  color: var(--adp-color-current-date);\n}\n\n.air-datepicker-cell.-disabled- {\n  cursor: default;\n  color: var(--adp-color-disabled);\n}\n\n.air-datepicker-cell.-disabled-.-focus- {\n  color: var(--adp-color-disabled);\n}\n\n.air-datepicker-cell.-disabled-.-in-range- {\n  color: var(--adp-color-disabled-in-range);\n}\n\n.air-datepicker-cell.-disabled-.-current-.-focus- {\n  color: var(--adp-color-disabled);\n}\n\n.air-datepicker-cell.-in-range- {\n  background: var(--adp-cell-background-color-in-range);\n  border-radius: 0;\n}\n\n.air-datepicker-cell.-in-range-:hover {\n  background: var(--adp-cell-background-color-in-range-hover);\n}\n\n.air-datepicker-cell.-range-from- {\n  border: 1px solid var(--adp-cell-border-color-in-range);\n  background-color: var(--adp-cell-background-color-in-range);\n  border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius);\n}\n\n.air-datepicker-cell.-range-to- {\n  border: 1px solid var(--adp-cell-border-color-in-range);\n  background-color: var(--adp-cell-background-color-in-range);\n  border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0;\n}\n\n.air-datepicker-cell.-range-to-.-range-from- {\n  border-radius: var(--adp-cell-border-radius);\n}\n\n.air-datepicker-cell.-selected- {\n  color: #fff;\n  border: none;\n  background: var(--adp-cell-background-color-selected);\n}\n\n.air-datepicker-cell.-selected-.-current- {\n  color: #fff;\n  background: var(--adp-cell-background-color-selected);\n}\n\n.air-datepicker-cell.-selected-.-focus- {\n  background: var(--adp-cell-background-color-selected-hover);\n}\n\n.air-datepicker-body {\n  transition: all var(--adp-transition-duration) var(--adp-transition-ease);\n}\n\n.air-datepicker-body.-hidden- {\n  display: none;\n}\n\n.air-datepicker-body--day-names {\n  display: grid;\n  grid-template-columns: repeat(7, var(--adp-day-cell-width));\n  margin: 8px 0 3px;\n}\n\n.air-datepicker-body--day-name {\n  color: var(--adp-day-name-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  text-align: center;\n  text-transform: uppercase;\n  font-size: 0.8em;\n}\n\n.air-datepicker-body--day-name.-clickable- {\n  cursor: pointer;\n}\n\n.air-datepicker-body--day-name.-clickable-:hover {\n  color: var(--adp-day-name-color-hover);\n}\n\n.air-datepicker-body--cells {\n  display: grid;\n}\n\n.air-datepicker-body--cells.-days- {\n  grid-template-columns: repeat(7, var(--adp-day-cell-width));\n  grid-auto-rows: var(--adp-day-cell-height);\n}\n\n.air-datepicker-body--cells.-months- {\n  grid-template-columns: repeat(3, 1fr);\n  grid-auto-rows: var(--adp-month-cell-height);\n}\n\n.air-datepicker-body--cells.-years- {\n  grid-template-columns: repeat(4, 1fr);\n  grid-auto-rows: var(--adp-year-cell-height);\n}\n\n.air-datepicker-nav {\n  display: flex;\n  justify-content: space-between;\n  border-bottom: 1px solid var(--adp-border-color-inner);\n  min-height: var(--adp-nav-height);\n  padding: var(--adp-padding);\n  box-sizing: content-box;\n}\n\n.-only-timepicker- .air-datepicker-nav {\n  display: none;\n}\n\n.air-datepicker-nav--title,\n.air-datepicker-nav--action {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n}\n\n.air-datepicker-nav--action {\n  width: var(--adp-nav-action-size);\n  border-radius: var(--adp-border-radius);\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n\n.air-datepicker-nav--action:hover {\n  background: var(--adp-background-color-hover);\n}\n\n.air-datepicker-nav--action:active {\n  background: var(--adp-background-color-active);\n}\n\n.air-datepicker-nav--action.-disabled- {\n  visibility: hidden;\n}\n\n.air-datepicker-nav--action svg {\n  width: 32px;\n  height: 32px;\n}\n\n.air-datepicker-nav--action path {\n  fill: none;\n  stroke: var(--adp-nav-arrow-color);\n  stroke-width: 2px;\n}\n\n.air-datepicker-nav--title {\n  border-radius: var(--adp-border-radius);\n  padding: 0 8px;\n}\n\n.air-datepicker-nav--title i {\n  font-style: normal;\n  color: var(--adp-nav-color-secondary);\n  margin-left: 0.3em;\n}\n\n.air-datepicker-nav--title:hover {\n  background: var(--adp-background-color-hover);\n}\n\n.air-datepicker-nav--title:active {\n  background: var(--adp-background-color-active);\n}\n\n.air-datepicker-nav--title.-disabled- {\n  cursor: default;\n  background: none;\n}\n\n.air-datepicker-buttons {\n  display: grid;\n  grid-auto-columns: 1fr;\n  grid-auto-flow: column;\n}\n\n.air-datepicker-button {\n  display: inline-flex;\n  color: var(--adp-btn-color);\n  border-radius: var(--adp-btn-border-radius);\n  cursor: pointer;\n  height: var(--adp-btn-height);\n  border: none;\n  background: rgba(255, 255, 255, 0);\n}\n\n.air-datepicker-button:hover {\n  color: var(--adp-btn-color-hover);\n  background: var(--adp-btn-background-color-hover);\n}\n\n.air-datepicker-button:focus {\n  color: var(--adp-btn-color-hover);\n  background: var(--adp-btn-background-color-hover);\n  outline: none;\n}\n\n.air-datepicker-button:active {\n  background: var(--adp-btn-background-color-active);\n}\n\n.air-datepicker-button span {\n  outline: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.air-datepicker-time {\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  grid-column-gap: 12px;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--adp-time-padding-inner);\n}\n\n.-only-timepicker- .air-datepicker-time {\n  border-top: none;\n}\n\n.air-datepicker-time--current {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  font-size: 14px;\n  text-align: center;\n}\n\n.air-datepicker-time--current-colon {\n  margin: 0 2px 3px;\n  line-height: 1;\n}\n\n.air-datepicker-time--current-hours,\n.air-datepicker-time--current-minutes {\n  line-height: 1;\n  font-size: 19px;\n  font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;\n  position: relative;\n  z-index: 1;\n}\n\n.air-datepicker-time--current-hours:after,\n.air-datepicker-time--current-minutes:after {\n  content: '';\n  background: var(--adp-background-color-hover);\n  border-radius: var(--adp-border-radius);\n  position: absolute;\n  left: -2px;\n  top: -3px;\n  right: -2px;\n  bottom: -2px;\n  z-index: -1;\n  opacity: 0;\n}\n\n.air-datepicker-time--current-hours.-focus-:after,\n.air-datepicker-time--current-minutes.-focus-:after {\n  opacity: 1;\n}\n\n.air-datepicker-time--current-ampm {\n  text-transform: uppercase;\n  align-self: flex-end;\n  color: var(--adp-time-day-period-color);\n  margin-left: 6px;\n  font-size: 11px;\n  margin-bottom: 1px;\n}\n\n.air-datepicker-time--row {\n  display: flex;\n  align-items: center;\n  font-size: 11px;\n  height: 17px;\n  background: linear-gradient(to right, var(--adp-time-track-color), var(--adp-time-track-color)) left 50%/100% var(--adp-time-track-height) no-repeat;\n}\n\n.air-datepicker-time--row:first-child {\n  margin-bottom: 4px;\n}\n\n.air-datepicker-time--row input[type='range'] {\n  background: none;\n  cursor: pointer;\n  flex: 1;\n  height: 100%;\n  width: 100%;\n  padding: 0;\n  margin: 0;\n  -webkit-appearance: none;\n}\n\n.air-datepicker-time--row input[type='range']::-webkit-slider-thumb {\n  -webkit-appearance: none;\n}\n\n.air-datepicker-time--row input[type='range']::-ms-tooltip {\n  display: none;\n}\n\n.air-datepicker-time--row input[type='range']:hover::-webkit-slider-thumb {\n  border-color: var(--adp-time-track-color-hover);\n}\n\n.air-datepicker-time--row input[type='range']:hover::-moz-range-thumb {\n  border-color: var(--adp-time-track-color-hover);\n}\n\n.air-datepicker-time--row input[type='range']:hover::-ms-thumb {\n  border-color: var(--adp-time-track-color-hover);\n}\n\n.air-datepicker-time--row input[type='range']:focus {\n  outline: none;\n}\n\n.air-datepicker-time--row input[type='range']:focus::-webkit-slider-thumb {\n  background: var(--adp-cell-background-color-selected);\n  border-color: var(--adp-cell-background-color-selected);\n}\n\n.air-datepicker-time--row input[type='range']:focus::-moz-range-thumb {\n  background: var(--adp-cell-background-color-selected);\n  border-color: var(--adp-cell-background-color-selected);\n}\n\n.air-datepicker-time--row input[type='range']:focus::-ms-thumb {\n  background: var(--adp-cell-background-color-selected);\n  border-color: var(--adp-cell-background-color-selected);\n}\n\n.air-datepicker-time--row input[type='range']::-webkit-slider-thumb {\n  box-sizing: border-box;\n  height: 12px;\n  width: 12px;\n  border-radius: 3px;\n  border: 1px solid var(--adp-time-track-color);\n  background: #fff;\n  cursor: pointer;\n  -webkit-transition: background var(--adp-transition-duration);\n  transition: background var(--adp-transition-duration);\n}\n\n.air-datepicker-time--row input[type='range']::-moz-range-thumb {\n  box-sizing: border-box;\n  height: 12px;\n  width: 12px;\n  border-radius: 3px;\n  border: 1px solid var(--adp-time-track-color);\n  background: #fff;\n  cursor: pointer;\n  -moz-transition: background var(--adp-transition-duration);\n  transition: background var(--adp-transition-duration);\n}\n\n.air-datepicker-time--row input[type='range']::-ms-thumb {\n  box-sizing: border-box;\n  height: 12px;\n  width: 12px;\n  border-radius: 3px;\n  border: 1px solid var(--adp-time-track-color);\n  background: #fff;\n  cursor: pointer;\n  -ms-transition: background var(--adp-transition-duration);\n  transition: background var(--adp-transition-duration);\n}\n\n.air-datepicker-time--row input[type='range']::-webkit-slider-thumb {\n  margin-top: calc(var(--adp-time-thumb-size) / 2 * -1);\n}\n\n.air-datepicker-time--row input[type='range']::-webkit-slider-runnable-track {\n  border: none;\n  height: var(--adp-time-track-height);\n  cursor: pointer;\n  color: rgba(0, 0, 0, 0);\n  background: rgba(0, 0, 0, 0);\n}\n\n.air-datepicker-time--row input[type='range']::-moz-range-track {\n  border: none;\n  height: var(--adp-time-track-height);\n  cursor: pointer;\n  color: rgba(0, 0, 0, 0);\n  background: rgba(0, 0, 0, 0);\n}\n\n.air-datepicker-time--row input[type='range']::-ms-track {\n  border: none;\n  height: var(--adp-time-track-height);\n  cursor: pointer;\n  color: rgba(0, 0, 0, 0);\n  background: rgba(0, 0, 0, 0);\n}\n\n.air-datepicker-time--row input[type='range']::-ms-fill-lower {\n  background: rgba(0, 0, 0, 0);\n}\n\n.air-datepicker-time--row input[type='range']::-ms-fill-upper {\n  background: rgba(0, 0, 0, 0);\n}\n\n.air-datepicker {\n  --adp-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  --adp-font-size: 14px;\n  --adp-width: 246px;\n  --adp-z-index: 100;\n  --adp-padding: 4px;\n  --adp-grid-areas: 'nav' 'body' 'timepicker' 'buttons';\n  --adp-transition-duration: 0.3s;\n  --adp-transition-ease: ease-out;\n  --adp-transition-offset: 8px;\n  --adp-background-color: #fff;\n  --adp-background-color-hover: #f0f0f0;\n  --adp-background-color-active: #eaeaea;\n  --adp-background-color-in-range: rgba(92, 196, 239, 0.1);\n  --adp-background-color-in-range-focused: rgba(92, 196, 239, 0.2);\n  --adp-background-color-selected-other-month-focused: #8ad5f4;\n  --adp-background-color-selected-other-month: #a2ddf6;\n  --adp-color: #4a4a4a;\n  --adp-color-secondary: #9c9c9c;\n  --adp-accent-color: #4eb5e6;\n  --adp-color-current-date: var(--adp-accent-color);\n  --adp-color-other-month: #dedede;\n  --adp-color-disabled: #aeaeae;\n  --adp-color-disabled-in-range: #939393;\n  --adp-color-other-month-hover: #c5c5c5;\n  --adp-border-color: #dbdbdb;\n  --adp-border-color-inner: #efefef;\n  --adp-border-radius: 4px;\n  --adp-border-color-inline: #d7d7d7;\n  --adp-nav-height: 32px;\n  --adp-nav-arrow-color: var(--adp-color-secondary);\n  --adp-nav-action-size: 32px;\n  --adp-nav-color-secondary: var(--adp-color-secondary);\n  --adp-day-name-color: #ff9a19;\n  --adp-day-name-color-hover: #8ad5f4;\n  --adp-day-cell-width: 1fr;\n  --adp-day-cell-height: 32px;\n  --adp-month-cell-height: 42px;\n  --adp-year-cell-height: 56px;\n  --adp-pointer-size: 10px;\n  --adp-poiner-border-radius: 2px;\n  --adp-pointer-offset: 14px;\n  --adp-cell-border-radius: 4px;\n  --adp-cell-background-color-hover: var(--adp-background-color-hover);\n  --adp-cell-background-color-selected: #5cc4ef;\n  --adp-cell-background-color-selected-hover: #45bced;\n  --adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);\n  --adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);\n  --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);\n  --adp-btn-height: 32px;\n  --adp-btn-color: var(--adp-accent-color);\n  --adp-btn-color-hover: var(--adp-color);\n  --adp-btn-border-radius: var(--adp-border-radius);\n  --adp-btn-background-color-hover: var(--adp-background-color-hover);\n  --adp-btn-background-color-active: var(--adp-background-color-active);\n  --adp-time-track-height: 1px;\n  --adp-time-track-color: #dedede;\n  --adp-time-track-color-hover: #b1b1b1;\n  --adp-time-thumb-size: 12px;\n  --adp-time-padding-inner: 10px;\n  --adp-time-day-period-color: var(--adp-color-secondary);\n  --adp-mobile-font-size: 16px;\n  --adp-mobile-nav-height: 40px;\n  --adp-mobile-width: 320px;\n  --adp-mobile-day-cell-height: 38px;\n  --adp-mobile-month-cell-height: 48px;\n  --adp-mobile-year-cell-height: 64px;\n}\n\n.air-datepicker-overlay {\n  --adp-overlay-background-color: rgba(0, 0, 0, 0.3);\n  --adp-overlay-transition-duration: 0.3s;\n  --adp-overlay-transition-ease: ease-out;\n  --adp-overlay-z-index: 99;\n}\n\n.air-datepicker {\n  background: var(--adp-background-color);\n  border: 1px solid var(--adp-border-color);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  border-radius: var(--adp-border-radius);\n  box-sizing: content-box;\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: repeat(4, max-content);\n  grid-template-areas: var(--adp-grid-areas);\n  font-family: var(--adp-font-family), sans-serif;\n  font-size: var(--adp-font-size);\n  color: var(--adp-color);\n  width: var(--adp-width);\n  position: absolute;\n  transition:\n    opacity var(--adp-transition-duration) var(--adp-transition-ease),\n    transform var(--adp-transition-duration) var(--adp-transition-ease);\n  z-index: var(--adp-z-index);\n}\n\n.air-datepicker:not(.-custom-position-) {\n  opacity: 0;\n}\n\n.air-datepicker.-from-top- {\n  transform: translateY(calc(var(--adp-transition-offset) * -1));\n}\n\n.air-datepicker.-from-right- {\n  transform: translateX(var(--adp-transition-offset));\n}\n\n.air-datepicker.-from-bottom- {\n  transform: translateY(var(--adp-transition-offset));\n}\n\n.air-datepicker.-from-left- {\n  transform: translateX(calc(var(--adp-transition-offset) * -1));\n}\n\n.air-datepicker.-active-:not(.-custom-position-) {\n  transform: translate(0, 0);\n  opacity: 1;\n}\n\n.air-datepicker.-active-.-custom-position- {\n  transition: none;\n}\n\n.air-datepicker.-inline- {\n  border-color: var(--adp-border-color-inline);\n  box-shadow: none;\n  position: static;\n  left: auto;\n  right: auto;\n  opacity: 1;\n  transform: none;\n}\n\n.air-datepicker.-inline- .air-datepicker--pointer {\n  display: none;\n}\n\n.air-datepicker.-is-mobile- {\n  --adp-font-size: var(--adp-mobile-font-size);\n  --adp-day-cell-height: var(--adp-mobile-day-cell-height);\n  --adp-month-cell-height: var(--adp-mobile-month-cell-height);\n  --adp-year-cell-height: var(--adp-mobile-year-cell-height);\n  --adp-nav-height: var(--adp-mobile-nav-height);\n  --adp-nav-action-size: var(--adp-mobile-nav-height);\n  position: fixed;\n  width: var(--adp-mobile-width);\n  border: none;\n}\n\n.air-datepicker.-is-mobile- * {\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.air-datepicker.-is-mobile- .air-datepicker--pointer {\n  display: none;\n}\n\n.air-datepicker.-is-mobile-:not(.-custom-position-) {\n  transform: translate(-50%, calc(-50% + var(--adp-transition-offset)));\n}\n\n.air-datepicker.-is-mobile-.-active-:not(.-custom-position-) {\n  transform: translate(-50%, -50%);\n}\n\n.air-datepicker.-custom-position- {\n  transition: none;\n}\n\n.air-datepicker-global-container {\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n.air-datepicker--pointer {\n  --pointer-half-size: calc(var(--adp-pointer-size) / 2);\n  position: absolute;\n  width: var(--adp-pointer-size);\n  height: var(--adp-pointer-size);\n  z-index: -1;\n}\n\n.air-datepicker--pointer:after {\n  content: '';\n  position: absolute;\n  background: #fff;\n  border-top: 1px solid var(--adp-border-color-inline);\n  border-right: 1px solid var(--adp-border-color-inline);\n  border-top-right-radius: var(--adp-poiner-border-radius);\n  width: var(--adp-pointer-size);\n  height: var(--adp-pointer-size);\n  box-sizing: border-box;\n}\n\n.-top-left- .air-datepicker--pointer,\n.-top-center- .air-datepicker--pointer,\n.-top-right- .air-datepicker--pointer,\n[data-popper-placement^='top'] .air-datepicker--pointer {\n  top: calc(100% - var(--pointer-half-size) + 1px);\n}\n\n.-top-left- .air-datepicker--pointer:after,\n.-top-center- .air-datepicker--pointer:after,\n.-top-right- .air-datepicker--pointer:after,\n[data-popper-placement^='top'] .air-datepicker--pointer:after {\n  transform: rotate(135deg);\n}\n\n.-right-top- .air-datepicker--pointer,\n.-right-center- .air-datepicker--pointer,\n.-right-bottom- .air-datepicker--pointer,\n[data-popper-placement^='right'] .air-datepicker--pointer {\n  right: calc(100% - var(--pointer-half-size) + 1px);\n}\n\n.-right-top- .air-datepicker--pointer:after,\n.-right-center- .air-datepicker--pointer:after,\n.-right-bottom- .air-datepicker--pointer:after,\n[data-popper-placement^='right'] .air-datepicker--pointer:after {\n  transform: rotate(225deg);\n}\n\n.-bottom-left- .air-datepicker--pointer,\n.-bottom-center- .air-datepicker--pointer,\n.-bottom-right- .air-datepicker--pointer,\n[data-popper-placement^='bottom'] .air-datepicker--pointer {\n  bottom: calc(100% - var(--pointer-half-size) + 1px);\n}\n\n.-bottom-left- .air-datepicker--pointer:after,\n.-bottom-center- .air-datepicker--pointer:after,\n.-bottom-right- .air-datepicker--pointer:after,\n[data-popper-placement^='bottom'] .air-datepicker--pointer:after {\n  transform: rotate(315deg);\n}\n\n.-left-top- .air-datepicker--pointer,\n.-left-center- .air-datepicker--pointer,\n.-left-bottom- .air-datepicker--pointer,\n[data-popper-placement^='left'] .air-datepicker--pointer {\n  left: calc(100% - var(--pointer-half-size) + 1px);\n}\n\n.-left-top- .air-datepicker--pointer:after,\n.-left-center- .air-datepicker--pointer:after,\n.-left-bottom- .air-datepicker--pointer:after,\n[data-popper-placement^='left'] .air-datepicker--pointer:after {\n  transform: rotate(45deg);\n}\n\n.-top-left- .air-datepicker--pointer,\n.-bottom-left- .air-datepicker--pointer {\n  left: var(--adp-pointer-offset);\n}\n\n.-top-right- .air-datepicker--pointer,\n.-bottom-right- .air-datepicker--pointer {\n  right: var(--adp-pointer-offset);\n}\n\n.-top-center- .air-datepicker--pointer,\n.-bottom-center- .air-datepicker--pointer {\n  left: calc(50% - var(--adp-pointer-size) / 2);\n}\n\n.-left-top- .air-datepicker--pointer,\n.-right-top- .air-datepicker--pointer {\n  top: var(--adp-pointer-offset);\n}\n\n.-left-bottom- .air-datepicker--pointer,\n.-right-bottom- .air-datepicker--pointer {\n  bottom: var(--adp-pointer-offset);\n}\n\n.-left-center- .air-datepicker--pointer,\n.-right-center- .air-datepicker--pointer {\n  top: calc(50% - var(--adp-pointer-size) / 2);\n}\n\n.air-datepicker--navigation {\n  grid-area: nav;\n}\n\n.air-datepicker--content {\n  box-sizing: content-box;\n  padding: var(--adp-padding);\n  grid-area: body;\n}\n\n.-only-timepicker- .air-datepicker--content {\n  display: none;\n}\n\n.air-datepicker--time {\n  grid-area: timepicker;\n}\n\n.air-datepicker--buttons {\n  grid-area: buttons;\n}\n\n.air-datepicker--buttons,\n.air-datepicker--time {\n  padding: var(--adp-padding);\n  border-top: 1px solid var(--adp-border-color-inner);\n}\n\n.air-datepicker-overlay {\n  position: fixed;\n  background: var(--adp-overlay-background-color);\n  left: 0;\n  top: 0;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  transition:\n    opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),\n    left 0s,\n    height 0s,\n    width 0s;\n  transition-delay: 0s, var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration);\n  z-index: var(--adp-overlay-z-index);\n}\n\n.air-datepicker-overlay.-active- {\n  opacity: 1;\n  width: 100%;\n  height: 100%;\n  transition:\n    opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),\n    height 0s,\n    width 0s;\n}\n\n@keyframes adp-spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n","import {format} from 'date-fns';\n// import {getRGBA} from '@verdocs/js-sdk';\nimport interact from 'interactjs';\nimport {ResizeEvent} from '@interactjs/actions/resize/plugin';\nimport AirDatepicker from 'air-datepicker';\nimport localeEn from 'air-datepicker/locale/en';\nimport {type ITemplate, type ITemplateField, updateField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Element, Event, EventEmitter, h, Host, Method, Prop, Fragment, State, Listen, Watch} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {FORMAT_DATE} from '../../../utils/Types';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a date field. When tapped or clicked, the input element will display a date picker component.\n */\n@Component({\n  tag: 'verdocs-field-date',\n  styleUrl: 'verdocs-field-date.scss',\n  shadow: false,\n})\nexport class VerdocsFieldDate {\n  @Element() el: HTMLElement;\n  private inputEl: HTMLInputElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\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({reflect: true}) 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({reflect: true}) 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({reflect: true}) 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({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop() field?: ITemplateField;\n\n  /**\n   * If set to true, it will force interact to unset the el, resulting in no dragging the field.\n   */\n  @Prop({reflect: true}) isPreview?: boolean;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() containerId = `verdocs-date-picker-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() showingProperties?: boolean = false;\n\n  @State() focused = false;\n\n  @Listen('blur', {capture: true})\n  handleBlur() {\n    this.focused = false;\n  }\n\n  @Method()\n  async focusField() {\n    this.inputEl.focus();\n    this.focused = true;\n  }\n\n  picker: AirDatepicker<HTMLElement> | null = null;\n\n  componentDidLoad() {\n    const {source, sourceid, fieldname} = this;\n    const {field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {readonly = false} = field || {};\n\n    if (!readonly) {\n      this.picker = new AirDatepicker<HTMLElement>(`#${this.containerId}`, {\n        locale: localeEn,\n        isMobile: true,\n        autoClose: true,\n        onShow: () => (this.focused = true),\n        onHide: () => (this.focused = false),\n        onSelect: ({date, formattedDate}) => {\n          const event = new CustomEvent('fieldChange', {detail: {date, formattedDate}});\n          this.el.dispatchEvent(event);\n        },\n      });\n    }\n  }\n\n  @Watch('editable')\n  onEditableChanged(newVal: boolean, oldVal: boolean) {\n    // When transitioning out of editable mode (e.g., builder -> preview tab), clear interact bindings\n    if (oldVal && !newVal) {\n      interact(this.el).unset();\n    }\n  }\n\n  disconnectedCallback() {\n    // Clear any interact.js drag/resize bindings so they don't leak if the DOM element is reused elsewhere\n    interact(this.el).unset();\n  }\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n\n    if (this.editable) {\n      interact(this.el).resizable({\n        edges: {\n          top: '.edge-top',\n          left: '.edge-left',\n          bottom: '.edge-bottom',\n          right: '.edge-right',\n        },\n        modifiers: [\n          interact.modifiers.restrictSize({\n            min: {width: 50, height: 12},\n          }),\n        ],\n        listeners: {\n          start: this.handleResizeStart.bind(this),\n          move: this.handleResize.bind(this),\n          end: this.handleResizeEnd.bind(this),\n        },\n      });\n    }\n  }\n\n  handleResizeStart(e: ResizeEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    e.target.dataset.originalBottom = e.target.style.bottom;\n  }\n\n  handleResize(e: any) {\n    let {width, height} = e.rect;\n\n    const dX = e.deltaRect.left;\n    const dY = e.deltaRect.bottom;\n    const currentLeft = parseFloat(e.target.style.left);\n    const currentBottom = parseFloat(e.target.style.bottom);\n\n    width /= this.xscale;\n    height /= this.yscale;\n\n    Object.assign(e.target.style, {\n      width: `${width}px`,\n      height: `${height}px`,\n      left: `${currentLeft + dX}px`,\n      bottom: `${currentBottom - dY}px`,\n    });\n  }\n\n  async handleResizeEnd(e: any) {\n    const {sourceid, fieldname} = this;\n\n    const width = Math.round(parseFloat(e.target.style.width));\n    let height = Math.round(parseFloat(e.target.style.height));\n    if (height < 12) {\n      height = 12;\n    }\n\n    const newBottom = parseFloat(e.target.style.bottom);\n    const originalBottom = parseFloat(e.target.dataset.originalBottom);\n    const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n    const oldField = template.fields.find(f => f.name === fieldname);\n    const y = newBottom !== originalBottom ? newBottom / this.yscale : oldField?.y;\n\n    updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, {width, height, y})\n      .then(async updatedField => {\n        const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n        const newTemplate = JSON.parse(JSON.stringify(template)) as ITemplate;\n        const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);\n        if (fieldIndex > -1) {\n          newTemplate.fields[fieldIndex] = updatedField;\n        }\n        Store.updateTemplate(this.sourceid, newTemplate);\n\n        this.settingsChanged?.emit({fieldName: fieldname, field: updatedField});\n        Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n      })\n      .catch(e => console.log('Field update failed', e));\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  // NOTE: We don't use a \"date\" field here because browsers vary widely in their formatting of it.\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, placeholder = 'Date...', value = '', label = '', readonly = false, height = 20, width = 74} = field || {};\n    const signerClass = `signer-${(index % 10) + 1}`;\n    const small = height < 20 || width < 74;\n\n    const formattedValue = value ? format(new Date(value), FORMAT_DATE) : '';\n\n    if (this.done) {\n      return <Host class={{'verdocs-field': true,done}}>{formattedValue}</Host>;\n    }\n\n    return (\n      <Host class={{'verdocs-field': true,required, disabled, done, focused, small, [signerClass]: true}}>\n        {editable && <div class=\"edge-top\" />}\n        {editable && <div class=\"edge-right\" />}\n        {editable && <div class=\"edge-left\" />}\n        {editable && <div class=\"edge-bottom\" />}\n\n        {label && <label>{label}</label>}\n\n        <input\n          name={fieldname}\n          class=\"input-el\"\n          type=\"text\"\n          value={formattedValue}\n          id={this.containerId}\n          placeholder={placeholder}\n          disabled={readonly || disabled}\n          ref={el => (this.inputEl = el)}\n          onFocus={() => (this.focused = true)}\n          onBlur={() => (this.focused = false)}\n        />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${field.name}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Date fields allow the user to select a date.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["verdocsFieldDateCss","VerdocsFieldDate","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","source","sourceid","fieldname","disabled","editable","moveable","done","xscale","yscale","pagenumber","containerId","Math","random","toString","substring","showingProperties","focused","picker","handleBlur","focusField","inputEl","focus","componentDidLoad","field","Store","getField","readonly","AirDatepicker","locale","localeEn","isMobile","autoClose","onShow","onHide","onSelect","date","formattedDate","event","CustomEvent","detail","el","dispatchEvent","onEditableChanged","newVal","oldVal","interact","unset","disconnectedCallback","componentDidRender","dynamicDrop","resizable","edges","top","left","bottom","right","modifiers","restrictSize","min","width","height","listeners","start","handleResizeStart","bind","move","handleResize","end","handleResizeEnd","e","preventDefault","stopPropagation","target","dataset","originalBottom","style","rect","dX","deltaRect","dY","currentLeft","parseFloat","currentBottom","Object","assign","round","newBottom","template","getTemplate","VerdocsEndpoint","getDefault","oldField","fields","find","f","name","y","updateField","then","async","updatedField","newTemplate","JSON","parse","stringify","fieldIndex","findIndex","updateTemplate","_a","settingsChanged","emit","fieldName","x","h","catch","console","log","showSettingsPanel","settingsPanel","document","getElementById","showPanel","hideSettingsPanel","hidePanel","render","index","required","placeholder","value","label","signerClass","small","formattedValue","format","Date","FORMAT_DATE","Host","class","type","id","ref","onFocus","onBlur","Fragment","transform","floor","innerHTML","SettingsIcon","onClick","anchor","onClickAway","templateId","onClose","onDelete","deleted","onSettingsChanged","helpText"],"sources":["src/components/fields/verdocs-field-date/verdocs-field-date.scss?tag=verdocs-field-date","src/components/fields/verdocs-field-date/verdocs-field-date.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-date {\n  font-family: $verdocs-primary-font;\n  width: 74px;\n  height: 20px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  letter-spacing: 0.3px;\n  background-color: var(--verdocs-field-background, transparent);\n  transform-origin: bottom left;\n\n  &.small input {\n    font-size: 7px;\n  }\n\n  .edge-top,\n  .edge-right,\n  .edge-left,\n  .edge-bottom {\n    position: absolute;\n    z-index: 10;\n  }\n\n  .edge-top {\n    top: -2px;\n    left: 0;\n    right: 0;\n    height: 5px;\n  }\n\n  .edge-right {\n    top: 0;\n    bottom: 0;\n    right: -2px;\n    width: 5px;\n  }\n\n  .edge-left {\n    top: 0;\n    left: -2px;\n    bottom: 0;\n    width: 5px;\n  }\n\n  .edge-bottom {\n    bottom: -2px;\n    left: 0;\n    right: 0;\n    height: 5px;\n  }\n\n  label {\n    top: -14px;\n    left: 0;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  input {\n    position: absolute;\n\n    font-size: 12px;\n\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    box-sizing: border-box;\n    color: var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87));\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    border: var(--verdocs-field-border, 1px solid $light-border-color);\n    border-radius: var(--verdocs-field-radius);\n    appearance: none;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled input {\n    opacity: 0.5;\n  }\n\n  &.required {\n    input {\n      border: 1px solid var(--verdocs-required-field-border);\n    }\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  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -18px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n.air-datepicker-cell.-year-.-other-decade-,\n.air-datepicker-cell.-day-.-other-month- {\n  color: var(--adp-color-other-month);\n}\n\n.air-datepicker-cell.-year-.-other-decade-:hover,\n.air-datepicker-cell.-day-.-other-month-:hover {\n  color: var(--adp-color-other-month-hover);\n}\n\n.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-,\n.-disabled-.-focus-.air-datepicker-cell.-day-.-other-month- {\n  color: var(--adp-color-other-month);\n}\n\n.-selected-.air-datepicker-cell.-year-.-other-decade-,\n.-selected-.air-datepicker-cell.-day-.-other-month- {\n  color: #fff;\n  background: var(--adp-background-color-selected-other-month);\n}\n\n.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-,\n.-selected-.-focus-.air-datepicker-cell.-day-.-other-month- {\n  background: var(--adp-background-color-selected-other-month-focused);\n}\n\n.-in-range-.air-datepicker-cell.-year-.-other-decade-,\n.-in-range-.air-datepicker-cell.-day-.-other-month- {\n  background-color: var(--adp-background-color-in-range);\n  color: var(--adp-color);\n}\n\n.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-,\n.-in-range-.-focus-.air-datepicker-cell.-day-.-other-month- {\n  background-color: var(--adp-background-color-in-range-focused);\n}\n\n.air-datepicker-cell.-year-.-other-decade-:empty,\n.air-datepicker-cell.-day-.-other-month-:empty {\n  background: none;\n  border: none;\n}\n\n.air-datepicker-cell {\n  border-radius: var(--adp-cell-border-radius);\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n}\n\n.air-datepicker-cell.-focus- {\n  background: var(--adp-cell-background-color-hover);\n}\n\n.air-datepicker-cell.-current- {\n  color: var(--adp-color-current-date);\n}\n\n.air-datepicker-cell.-current-.-focus- {\n  color: var(--adp-color);\n}\n\n.air-datepicker-cell.-current-.-in-range- {\n  color: var(--adp-color-current-date);\n}\n\n.air-datepicker-cell.-disabled- {\n  cursor: default;\n  color: var(--adp-color-disabled);\n}\n\n.air-datepicker-cell.-disabled-.-focus- {\n  color: var(--adp-color-disabled);\n}\n\n.air-datepicker-cell.-disabled-.-in-range- {\n  color: var(--adp-color-disabled-in-range);\n}\n\n.air-datepicker-cell.-disabled-.-current-.-focus- {\n  color: var(--adp-color-disabled);\n}\n\n.air-datepicker-cell.-in-range- {\n  background: var(--adp-cell-background-color-in-range);\n  border-radius: 0;\n}\n\n.air-datepicker-cell.-in-range-:hover {\n  background: var(--adp-cell-background-color-in-range-hover);\n}\n\n.air-datepicker-cell.-range-from- {\n  border: 1px solid var(--adp-cell-border-color-in-range);\n  background-color: var(--adp-cell-background-color-in-range);\n  border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius);\n}\n\n.air-datepicker-cell.-range-to- {\n  border: 1px solid var(--adp-cell-border-color-in-range);\n  background-color: var(--adp-cell-background-color-in-range);\n  border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0;\n}\n\n.air-datepicker-cell.-range-to-.-range-from- {\n  border-radius: var(--adp-cell-border-radius);\n}\n\n.air-datepicker-cell.-selected- {\n  color: #fff;\n  border: none;\n  background: var(--adp-cell-background-color-selected);\n}\n\n.air-datepicker-cell.-selected-.-current- {\n  color: #fff;\n  background: var(--adp-cell-background-color-selected);\n}\n\n.air-datepicker-cell.-selected-.-focus- {\n  background: var(--adp-cell-background-color-selected-hover);\n}\n\n.air-datepicker-body {\n  transition: all var(--adp-transition-duration) var(--adp-transition-ease);\n}\n\n.air-datepicker-body.-hidden- {\n  display: none;\n}\n\n.air-datepicker-body--day-names {\n  display: grid;\n  grid-template-columns: repeat(7, var(--adp-day-cell-width));\n  margin: 8px 0 3px;\n}\n\n.air-datepicker-body--day-name {\n  color: var(--adp-day-name-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  text-align: center;\n  text-transform: uppercase;\n  font-size: 0.8em;\n}\n\n.air-datepicker-body--day-name.-clickable- {\n  cursor: pointer;\n}\n\n.air-datepicker-body--day-name.-clickable-:hover {\n  color: var(--adp-day-name-color-hover);\n}\n\n.air-datepicker-body--cells {\n  display: grid;\n}\n\n.air-datepicker-body--cells.-days- {\n  grid-template-columns: repeat(7, var(--adp-day-cell-width));\n  grid-auto-rows: var(--adp-day-cell-height);\n}\n\n.air-datepicker-body--cells.-months- {\n  grid-template-columns: repeat(3, 1fr);\n  grid-auto-rows: var(--adp-month-cell-height);\n}\n\n.air-datepicker-body--cells.-years- {\n  grid-template-columns: repeat(4, 1fr);\n  grid-auto-rows: var(--adp-year-cell-height);\n}\n\n.air-datepicker-nav {\n  display: flex;\n  justify-content: space-between;\n  border-bottom: 1px solid var(--adp-border-color-inner);\n  min-height: var(--adp-nav-height);\n  padding: var(--adp-padding);\n  box-sizing: content-box;\n}\n\n.-only-timepicker- .air-datepicker-nav {\n  display: none;\n}\n\n.air-datepicker-nav--title,\n.air-datepicker-nav--action {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n}\n\n.air-datepicker-nav--action {\n  width: var(--adp-nav-action-size);\n  border-radius: var(--adp-border-radius);\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n\n.air-datepicker-nav--action:hover {\n  background: var(--adp-background-color-hover);\n}\n\n.air-datepicker-nav--action:active {\n  background: var(--adp-background-color-active);\n}\n\n.air-datepicker-nav--action.-disabled- {\n  visibility: hidden;\n}\n\n.air-datepicker-nav--action svg {\n  width: 32px;\n  height: 32px;\n}\n\n.air-datepicker-nav--action path {\n  fill: none;\n  stroke: var(--adp-nav-arrow-color);\n  stroke-width: 2px;\n}\n\n.air-datepicker-nav--title {\n  border-radius: var(--adp-border-radius);\n  padding: 0 8px;\n}\n\n.air-datepicker-nav--title i {\n  font-style: normal;\n  color: var(--adp-nav-color-secondary);\n  margin-left: 0.3em;\n}\n\n.air-datepicker-nav--title:hover {\n  background: var(--adp-background-color-hover);\n}\n\n.air-datepicker-nav--title:active {\n  background: var(--adp-background-color-active);\n}\n\n.air-datepicker-nav--title.-disabled- {\n  cursor: default;\n  background: none;\n}\n\n.air-datepicker-buttons {\n  display: grid;\n  grid-auto-columns: 1fr;\n  grid-auto-flow: column;\n}\n\n.air-datepicker-button {\n  display: inline-flex;\n  color: var(--adp-btn-color);\n  border-radius: var(--adp-btn-border-radius);\n  cursor: pointer;\n  height: var(--adp-btn-height);\n  border: none;\n  background: rgba(255, 255, 255, 0);\n}\n\n.air-datepicker-button:hover {\n  color: var(--adp-btn-color-hover);\n  background: var(--adp-btn-background-color-hover);\n}\n\n.air-datepicker-button:focus {\n  color: var(--adp-btn-color-hover);\n  background: var(--adp-btn-background-color-hover);\n  outline: none;\n}\n\n.air-datepicker-button:active {\n  background: var(--adp-btn-background-color-active);\n}\n\n.air-datepicker-button span {\n  outline: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.air-datepicker-time {\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  grid-column-gap: 12px;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--adp-time-padding-inner);\n}\n\n.-only-timepicker- .air-datepicker-time {\n  border-top: none;\n}\n\n.air-datepicker-time--current {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  font-size: 14px;\n  text-align: center;\n}\n\n.air-datepicker-time--current-colon {\n  margin: 0 2px 3px;\n  line-height: 1;\n}\n\n.air-datepicker-time--current-hours,\n.air-datepicker-time--current-minutes {\n  line-height: 1;\n  font-size: 19px;\n  font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;\n  position: relative;\n  z-index: 1;\n}\n\n.air-datepicker-time--current-hours:after,\n.air-datepicker-time--current-minutes:after {\n  content: '';\n  background: var(--adp-background-color-hover);\n  border-radius: var(--adp-border-radius);\n  position: absolute;\n  left: -2px;\n  top: -3px;\n  right: -2px;\n  bottom: -2px;\n  z-index: -1;\n  opacity: 0;\n}\n\n.air-datepicker-time--current-hours.-focus-:after,\n.air-datepicker-time--current-minutes.-focus-:after {\n  opacity: 1;\n}\n\n.air-datepicker-time--current-ampm {\n  text-transform: uppercase;\n  align-self: flex-end;\n  color: var(--adp-time-day-period-color);\n  margin-left: 6px;\n  font-size: 11px;\n  margin-bottom: 1px;\n}\n\n.air-datepicker-time--row {\n  display: flex;\n  align-items: center;\n  font-size: 11px;\n  height: 17px;\n  background: linear-gradient(to right, var(--adp-time-track-color), var(--adp-time-track-color)) left 50%/100% var(--adp-time-track-height) no-repeat;\n}\n\n.air-datepicker-time--row:first-child {\n  margin-bottom: 4px;\n}\n\n.air-datepicker-time--row input[type='range'] {\n  background: none;\n  cursor: pointer;\n  flex: 1;\n  height: 100%;\n  width: 100%;\n  padding: 0;\n  margin: 0;\n  -webkit-appearance: none;\n}\n\n.air-datepicker-time--row input[type='range']::-webkit-slider-thumb {\n  -webkit-appearance: none;\n}\n\n.air-datepicker-time--row input[type='range']::-ms-tooltip {\n  display: none;\n}\n\n.air-datepicker-time--row input[type='range']:hover::-webkit-slider-thumb {\n  border-color: var(--adp-time-track-color-hover);\n}\n\n.air-datepicker-time--row input[type='range']:hover::-moz-range-thumb {\n  border-color: var(--adp-time-track-color-hover);\n}\n\n.air-datepicker-time--row input[type='range']:hover::-ms-thumb {\n  border-color: var(--adp-time-track-color-hover);\n}\n\n.air-datepicker-time--row input[type='range']:focus {\n  outline: none;\n}\n\n.air-datepicker-time--row input[type='range']:focus::-webkit-slider-thumb {\n  background: var(--adp-cell-background-color-selected);\n  border-color: var(--adp-cell-background-color-selected);\n}\n\n.air-datepicker-time--row input[type='range']:focus::-moz-range-thumb {\n  background: var(--adp-cell-background-color-selected);\n  border-color: var(--adp-cell-background-color-selected);\n}\n\n.air-datepicker-time--row input[type='range']:focus::-ms-thumb {\n  background: var(--adp-cell-background-color-selected);\n  border-color: var(--adp-cell-background-color-selected);\n}\n\n.air-datepicker-time--row input[type='range']::-webkit-slider-thumb {\n  box-sizing: border-box;\n  height: 12px;\n  width: 12px;\n  border-radius: 3px;\n  border: 1px solid var(--adp-time-track-color);\n  background: #fff;\n  cursor: pointer;\n  -webkit-transition: background var(--adp-transition-duration);\n  transition: background var(--adp-transition-duration);\n}\n\n.air-datepicker-time--row input[type='range']::-moz-range-thumb {\n  box-sizing: border-box;\n  height: 12px;\n  width: 12px;\n  border-radius: 3px;\n  border: 1px solid var(--adp-time-track-color);\n  background: #fff;\n  cursor: pointer;\n  -moz-transition: background var(--adp-transition-duration);\n  transition: background var(--adp-transition-duration);\n}\n\n.air-datepicker-time--row input[type='range']::-ms-thumb {\n  box-sizing: border-box;\n  height: 12px;\n  width: 12px;\n  border-radius: 3px;\n  border: 1px solid var(--adp-time-track-color);\n  background: #fff;\n  cursor: pointer;\n  -ms-transition: background var(--adp-transition-duration);\n  transition: background var(--adp-transition-duration);\n}\n\n.air-datepicker-time--row input[type='range']::-webkit-slider-thumb {\n  margin-top: calc(var(--adp-time-thumb-size) / 2 * -1);\n}\n\n.air-datepicker-time--row input[type='range']::-webkit-slider-runnable-track {\n  border: none;\n  height: var(--adp-time-track-height);\n  cursor: pointer;\n  color: rgba(0, 0, 0, 0);\n  background: rgba(0, 0, 0, 0);\n}\n\n.air-datepicker-time--row input[type='range']::-moz-range-track {\n  border: none;\n  height: var(--adp-time-track-height);\n  cursor: pointer;\n  color: rgba(0, 0, 0, 0);\n  background: rgba(0, 0, 0, 0);\n}\n\n.air-datepicker-time--row input[type='range']::-ms-track {\n  border: none;\n  height: var(--adp-time-track-height);\n  cursor: pointer;\n  color: rgba(0, 0, 0, 0);\n  background: rgba(0, 0, 0, 0);\n}\n\n.air-datepicker-time--row input[type='range']::-ms-fill-lower {\n  background: rgba(0, 0, 0, 0);\n}\n\n.air-datepicker-time--row input[type='range']::-ms-fill-upper {\n  background: rgba(0, 0, 0, 0);\n}\n\n.air-datepicker {\n  --adp-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  --adp-font-size: 14px;\n  --adp-width: 246px;\n  --adp-z-index: 100;\n  --adp-padding: 4px;\n  --adp-grid-areas: 'nav' 'body' 'timepicker' 'buttons';\n  --adp-transition-duration: 0.3s;\n  --adp-transition-ease: ease-out;\n  --adp-transition-offset: 8px;\n  --adp-background-color: #fff;\n  --adp-background-color-hover: #f0f0f0;\n  --adp-background-color-active: #eaeaea;\n  --adp-background-color-in-range: rgba(92, 196, 239, 0.1);\n  --adp-background-color-in-range-focused: rgba(92, 196, 239, 0.2);\n  --adp-background-color-selected-other-month-focused: #8ad5f4;\n  --adp-background-color-selected-other-month: #a2ddf6;\n  --adp-color: #4a4a4a;\n  --adp-color-secondary: #9c9c9c;\n  --adp-accent-color: #4eb5e6;\n  --adp-color-current-date: var(--adp-accent-color);\n  --adp-color-other-month: #dedede;\n  --adp-color-disabled: #aeaeae;\n  --adp-color-disabled-in-range: #939393;\n  --adp-color-other-month-hover: #c5c5c5;\n  --adp-border-color: #dbdbdb;\n  --adp-border-color-inner: #efefef;\n  --adp-border-radius: 4px;\n  --adp-border-color-inline: #d7d7d7;\n  --adp-nav-height: 32px;\n  --adp-nav-arrow-color: var(--adp-color-secondary);\n  --adp-nav-action-size: 32px;\n  --adp-nav-color-secondary: var(--adp-color-secondary);\n  --adp-day-name-color: #ff9a19;\n  --adp-day-name-color-hover: #8ad5f4;\n  --adp-day-cell-width: 1fr;\n  --adp-day-cell-height: 32px;\n  --adp-month-cell-height: 42px;\n  --adp-year-cell-height: 56px;\n  --adp-pointer-size: 10px;\n  --adp-poiner-border-radius: 2px;\n  --adp-pointer-offset: 14px;\n  --adp-cell-border-radius: 4px;\n  --adp-cell-background-color-hover: var(--adp-background-color-hover);\n  --adp-cell-background-color-selected: #5cc4ef;\n  --adp-cell-background-color-selected-hover: #45bced;\n  --adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);\n  --adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);\n  --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);\n  --adp-btn-height: 32px;\n  --adp-btn-color: var(--adp-accent-color);\n  --adp-btn-color-hover: var(--adp-color);\n  --adp-btn-border-radius: var(--adp-border-radius);\n  --adp-btn-background-color-hover: var(--adp-background-color-hover);\n  --adp-btn-background-color-active: var(--adp-background-color-active);\n  --adp-time-track-height: 1px;\n  --adp-time-track-color: #dedede;\n  --adp-time-track-color-hover: #b1b1b1;\n  --adp-time-thumb-size: 12px;\n  --adp-time-padding-inner: 10px;\n  --adp-time-day-period-color: var(--adp-color-secondary);\n  --adp-mobile-font-size: 16px;\n  --adp-mobile-nav-height: 40px;\n  --adp-mobile-width: 320px;\n  --adp-mobile-day-cell-height: 38px;\n  --adp-mobile-month-cell-height: 48px;\n  --adp-mobile-year-cell-height: 64px;\n}\n\n.air-datepicker-overlay {\n  --adp-overlay-background-color: rgba(0, 0, 0, 0.3);\n  --adp-overlay-transition-duration: 0.3s;\n  --adp-overlay-transition-ease: ease-out;\n  --adp-overlay-z-index: 99;\n}\n\n.air-datepicker {\n  background: var(--adp-background-color);\n  border: 1px solid var(--adp-border-color);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  border-radius: var(--adp-border-radius);\n  box-sizing: content-box;\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: repeat(4, max-content);\n  grid-template-areas: var(--adp-grid-areas);\n  font-family: var(--adp-font-family), sans-serif;\n  font-size: var(--adp-font-size);\n  color: var(--adp-color);\n  width: var(--adp-width);\n  position: absolute;\n  transition:\n    opacity var(--adp-transition-duration) var(--adp-transition-ease),\n    transform var(--adp-transition-duration) var(--adp-transition-ease);\n  z-index: var(--adp-z-index);\n}\n\n.air-datepicker:not(.-custom-position-) {\n  opacity: 0;\n}\n\n.air-datepicker.-from-top- {\n  transform: translateY(calc(var(--adp-transition-offset) * -1));\n}\n\n.air-datepicker.-from-right- {\n  transform: translateX(var(--adp-transition-offset));\n}\n\n.air-datepicker.-from-bottom- {\n  transform: translateY(var(--adp-transition-offset));\n}\n\n.air-datepicker.-from-left- {\n  transform: translateX(calc(var(--adp-transition-offset) * -1));\n}\n\n.air-datepicker.-active-:not(.-custom-position-) {\n  transform: translate(0, 0);\n  opacity: 1;\n}\n\n.air-datepicker.-active-.-custom-position- {\n  transition: none;\n}\n\n.air-datepicker.-inline- {\n  border-color: var(--adp-border-color-inline);\n  box-shadow: none;\n  position: static;\n  left: auto;\n  right: auto;\n  opacity: 1;\n  transform: none;\n}\n\n.air-datepicker.-inline- .air-datepicker--pointer {\n  display: none;\n}\n\n.air-datepicker.-is-mobile- {\n  --adp-font-size: var(--adp-mobile-font-size);\n  --adp-day-cell-height: var(--adp-mobile-day-cell-height);\n  --adp-month-cell-height: var(--adp-mobile-month-cell-height);\n  --adp-year-cell-height: var(--adp-mobile-year-cell-height);\n  --adp-nav-height: var(--adp-mobile-nav-height);\n  --adp-nav-action-size: var(--adp-mobile-nav-height);\n  position: fixed;\n  width: var(--adp-mobile-width);\n  border: none;\n}\n\n.air-datepicker.-is-mobile- * {\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.air-datepicker.-is-mobile- .air-datepicker--pointer {\n  display: none;\n}\n\n.air-datepicker.-is-mobile-:not(.-custom-position-) {\n  transform: translate(-50%, calc(-50% + var(--adp-transition-offset)));\n}\n\n.air-datepicker.-is-mobile-.-active-:not(.-custom-position-) {\n  transform: translate(-50%, -50%);\n}\n\n.air-datepicker.-custom-position- {\n  transition: none;\n}\n\n.air-datepicker-global-container {\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n.air-datepicker--pointer {\n  --pointer-half-size: calc(var(--adp-pointer-size) / 2);\n  position: absolute;\n  width: var(--adp-pointer-size);\n  height: var(--adp-pointer-size);\n  z-index: -1;\n}\n\n.air-datepicker--pointer:after {\n  content: '';\n  position: absolute;\n  background: #fff;\n  border-top: 1px solid var(--adp-border-color-inline);\n  border-right: 1px solid var(--adp-border-color-inline);\n  border-top-right-radius: var(--adp-poiner-border-radius);\n  width: var(--adp-pointer-size);\n  height: var(--adp-pointer-size);\n  box-sizing: border-box;\n}\n\n.-top-left- .air-datepicker--pointer,\n.-top-center- .air-datepicker--pointer,\n.-top-right- .air-datepicker--pointer,\n[data-popper-placement^='top'] .air-datepicker--pointer {\n  top: calc(100% - var(--pointer-half-size) + 1px);\n}\n\n.-top-left- .air-datepicker--pointer:after,\n.-top-center- .air-datepicker--pointer:after,\n.-top-right- .air-datepicker--pointer:after,\n[data-popper-placement^='top'] .air-datepicker--pointer:after {\n  transform: rotate(135deg);\n}\n\n.-right-top- .air-datepicker--pointer,\n.-right-center- .air-datepicker--pointer,\n.-right-bottom- .air-datepicker--pointer,\n[data-popper-placement^='right'] .air-datepicker--pointer {\n  right: calc(100% - var(--pointer-half-size) + 1px);\n}\n\n.-right-top- .air-datepicker--pointer:after,\n.-right-center- .air-datepicker--pointer:after,\n.-right-bottom- .air-datepicker--pointer:after,\n[data-popper-placement^='right'] .air-datepicker--pointer:after {\n  transform: rotate(225deg);\n}\n\n.-bottom-left- .air-datepicker--pointer,\n.-bottom-center- .air-datepicker--pointer,\n.-bottom-right- .air-datepicker--pointer,\n[data-popper-placement^='bottom'] .air-datepicker--pointer {\n  bottom: calc(100% - var(--pointer-half-size) + 1px);\n}\n\n.-bottom-left- .air-datepicker--pointer:after,\n.-bottom-center- .air-datepicker--pointer:after,\n.-bottom-right- .air-datepicker--pointer:after,\n[data-popper-placement^='bottom'] .air-datepicker--pointer:after {\n  transform: rotate(315deg);\n}\n\n.-left-top- .air-datepicker--pointer,\n.-left-center- .air-datepicker--pointer,\n.-left-bottom- .air-datepicker--pointer,\n[data-popper-placement^='left'] .air-datepicker--pointer {\n  left: calc(100% - var(--pointer-half-size) + 1px);\n}\n\n.-left-top- .air-datepicker--pointer:after,\n.-left-center- .air-datepicker--pointer:after,\n.-left-bottom- .air-datepicker--pointer:after,\n[data-popper-placement^='left'] .air-datepicker--pointer:after {\n  transform: rotate(45deg);\n}\n\n.-top-left- .air-datepicker--pointer,\n.-bottom-left- .air-datepicker--pointer {\n  left: var(--adp-pointer-offset);\n}\n\n.-top-right- .air-datepicker--pointer,\n.-bottom-right- .air-datepicker--pointer {\n  right: var(--adp-pointer-offset);\n}\n\n.-top-center- .air-datepicker--pointer,\n.-bottom-center- .air-datepicker--pointer {\n  left: calc(50% - var(--adp-pointer-size) / 2);\n}\n\n.-left-top- .air-datepicker--pointer,\n.-right-top- .air-datepicker--pointer {\n  top: var(--adp-pointer-offset);\n}\n\n.-left-bottom- .air-datepicker--pointer,\n.-right-bottom- .air-datepicker--pointer {\n  bottom: var(--adp-pointer-offset);\n}\n\n.-left-center- .air-datepicker--pointer,\n.-right-center- .air-datepicker--pointer {\n  top: calc(50% - var(--adp-pointer-size) / 2);\n}\n\n.air-datepicker--navigation {\n  grid-area: nav;\n}\n\n.air-datepicker--content {\n  box-sizing: content-box;\n  padding: var(--adp-padding);\n  grid-area: body;\n}\n\n.-only-timepicker- .air-datepicker--content {\n  display: none;\n}\n\n.air-datepicker--time {\n  grid-area: timepicker;\n}\n\n.air-datepicker--buttons {\n  grid-area: buttons;\n}\n\n.air-datepicker--buttons,\n.air-datepicker--time {\n  padding: var(--adp-padding);\n  border-top: 1px solid var(--adp-border-color-inner);\n}\n\n.air-datepicker-overlay {\n  position: fixed;\n  background: var(--adp-overlay-background-color);\n  left: 0;\n  top: 0;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  transition:\n    opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),\n    left 0s,\n    height 0s,\n    width 0s;\n  transition-delay: 0s, var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration);\n  z-index: var(--adp-overlay-z-index);\n}\n\n.air-datepicker-overlay.-active- {\n  opacity: 1;\n  width: 100%;\n  height: 100%;\n  transition:\n    opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),\n    height 0s,\n    width 0s;\n}\n\n@keyframes adp-spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n","import {format} from 'date-fns';\nimport interact from 'interactjs';\nimport AirDatepicker from 'air-datepicker';\nimport localeEn from 'air-datepicker/locale/en';\nimport {ResizeEvent} from '@interactjs/actions/resize/plugin';\nimport {type ITemplate, type ITemplateField, updateField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Element, Event, EventEmitter, h, Host, Method, Prop, Fragment, State, Listen, Watch} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {FORMAT_DATE} from '../../../utils/Types';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a date field. When tapped or clicked, the input element will display a date picker component.\n */\n@Component({\n  tag: 'verdocs-field-date',\n  styleUrl: 'verdocs-field-date.scss',\n  shadow: false,\n})\nexport class VerdocsFieldDate {\n  @Element() el: HTMLElement;\n  private inputEl: HTMLInputElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\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({reflect: true}) 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({reflect: true}) 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({reflect: true}) 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({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop() field?: ITemplateField;\n\n  /**\n   * If set to true, it will force interact to unset the el, resulting in no dragging the field.\n   */\n  @Prop({reflect: true}) isPreview?: boolean;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() containerId = `verdocs-date-picker-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() showingProperties?: boolean = false;\n\n  @State() focused = false;\n\n  @Listen('blur', {capture: true})\n  handleBlur() {\n    this.focused = false;\n  }\n\n  @Method()\n  async focusField() {\n    this.inputEl.focus();\n    this.focused = true;\n  }\n\n  picker: AirDatepicker<HTMLElement> | null = null;\n\n  componentDidLoad() {\n    const {source, sourceid, fieldname} = this;\n    const {field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {readonly = false} = field || {};\n\n    if (!readonly) {\n      this.picker = new AirDatepicker<HTMLElement>(`#${this.containerId}`, {\n        locale: localeEn,\n        isMobile: true,\n        autoClose: true,\n        onShow: () => (this.focused = true),\n        onHide: () => (this.focused = false),\n        onSelect: ({date, formattedDate}) => {\n          const event = new CustomEvent('fieldChange', {detail: {date, formattedDate}});\n          this.el.dispatchEvent(event);\n        },\n      });\n    }\n  }\n\n  @Watch('editable')\n  onEditableChanged(newVal: boolean, oldVal: boolean) {\n    // When transitioning out of editable mode (e.g., builder -> preview tab), clear interact bindings\n    if (oldVal && !newVal) {\n      interact(this.el).unset();\n    }\n  }\n\n  disconnectedCallback() {\n    // Clear any interact.js drag/resize bindings so they don't leak if the DOM element is reused elsewhere\n    interact(this.el).unset();\n  }\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n\n    if (this.editable) {\n      interact(this.el).resizable({\n        edges: {\n          top: '.edge-top',\n          left: '.edge-left',\n          bottom: '.edge-bottom',\n          right: '.edge-right',\n        },\n        modifiers: [\n          interact.modifiers.restrictSize({\n            min: {width: 50, height: 12},\n          }),\n        ],\n        listeners: {\n          start: this.handleResizeStart.bind(this),\n          move: this.handleResize.bind(this),\n          end: this.handleResizeEnd.bind(this),\n        },\n      });\n    }\n  }\n\n  handleResizeStart(e: ResizeEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    e.target.dataset.originalBottom = e.target.style.bottom;\n  }\n\n  handleResize(e: any) {\n    let {width, height} = e.rect;\n\n    const dX = e.deltaRect.left;\n    const dY = e.deltaRect.bottom;\n    const currentLeft = parseFloat(e.target.style.left);\n    const currentBottom = parseFloat(e.target.style.bottom);\n\n    width /= this.xscale;\n    height /= this.yscale;\n\n    Object.assign(e.target.style, {\n      width: `${width}px`,\n      height: `${height}px`,\n      left: `${currentLeft + dX}px`,\n      bottom: `${currentBottom - dY}px`,\n    });\n  }\n\n  async handleResizeEnd(e: any) {\n    const {sourceid, fieldname} = this;\n\n    const width = Math.round(parseFloat(e.target.style.width));\n    let height = Math.round(parseFloat(e.target.style.height));\n    if (height < 12) {\n      height = 12;\n    }\n\n    const newBottom = parseFloat(e.target.style.bottom);\n    const originalBottom = parseFloat(e.target.dataset.originalBottom);\n    const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n    const oldField = template.fields.find(f => f.name === fieldname);\n    const y = newBottom !== originalBottom ? Math.round(newBottom / this.yscale) : oldField?.y;\n\n    updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, {width, height, y})\n      .then(async updatedField => {\n        const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n        const newTemplate = JSON.parse(JSON.stringify(template)) as ITemplate;\n        const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);\n        if (fieldIndex > -1) {\n          newTemplate.fields[fieldIndex] = updatedField;\n        }\n        Store.updateTemplate(this.sourceid, newTemplate);\n\n        this.settingsChanged?.emit({fieldName: fieldname, field: updatedField});\n        Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n      })\n      .catch(e => console.log('Field update failed', e));\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  // NOTE: We don't use a \"date\" field here because browsers vary widely in their formatting of it.\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, placeholder = 'Date...', value = '', label = '', readonly = false, height = 20, width = 74} = field || {};\n    const signerClass = `signer-${(index % 10) + 1}`;\n    const small = height < 20 || width < 74;\n\n    const formattedValue = value ? format(new Date(value), FORMAT_DATE) : '';\n\n    if (this.done) {\n      return <Host class={{'verdocs-field': true,done}}>{formattedValue}</Host>;\n    }\n\n    return (\n      <Host class={{'verdocs-field': true,required, disabled, done, focused, small, [signerClass]: true}}>\n        {editable && <div class=\"edge-top\" />}\n        {editable && <div class=\"edge-right\" />}\n        {editable && <div class=\"edge-left\" />}\n        {editable && <div class=\"edge-bottom\" />}\n\n        {label && <label>{label}</label>}\n\n        <input\n          name={fieldname}\n          class=\"input-el\"\n          type=\"text\"\n          value={formattedValue}\n          id={this.containerId}\n          placeholder={placeholder}\n          disabled={readonly || disabled}\n          ref={el => (this.inputEl = el)}\n          onFocus={() => (this.focused = true)}\n          onBlur={() => (this.focused = false)}\n        />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${field.name}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Date fields allow the user to select a date.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/{p-B4tpmyon.js → p-CAJJndLX.js}

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as s,h as r,F as i,d as o,t as a}from"./p-yZBlG3YQ.js";import{i as d}from"./p-COaijEV0.js";import{VerdocsEndpoint as l,updateField as n}from"@verdocs/js-sdk";import{S as c}from"./p-C7k2AOsW.js";import{S as p}from"./p-C7hFgM52.js";import{d as f}from"./p-Bb5V9TQx.js";import{d as h}from"./p-DGNIsXfr.js";import{d as u}from"./p-C-v22G3g.js";import{d as m}from"./p-DHzSlpJw.js";import{d as v}from"./p-DqzFuSNN.js";import{d as b}from"./p-DhOuB4nS.js";import{d as x}from"./p-Bodw4NVB.js";import{d as g}from"./p-Bxvw_LqR.js";import{d as k}from"./p-PfdIkMoz.js";const y=()=>`verdocs-field-textarea{width:150px;height:15px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--verdocs-field-background, transparent);-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);border:var(--verdocs-field-border, 1px solid rgba(0, 0, 0, 0.2));border-radius:var(--verdocs-field-radius)}verdocs-field-textarea textarea{cursor:inherit;width:100%;height:100%;resize:none;border:none;outline:none;padding:0 3px;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:var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87))}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.disabled textarea{opacity:0.5}verdocs-field-textarea label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-textarea.required.required{border:1px solid var(--verdocs-required-field-border)}verdocs-field-textarea 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-textarea verdocs-button-panel[data-active],verdocs-field-textarea verdocs-button-panel:hover{opacity:1}verdocs-field-textarea verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textarea verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textarea .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-textarea .settings-icon svg{fill:#707ae5}verdocs-field-textarea .settings-icon:hover{opacity:1}`;const w=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.settingsChanged=s(this,"settingsChanged");this.deleted=s(this,"deleted");this.endpoint=l.getDefault();this.source="template";this.sourceid="";this.fieldname="";this.field=null;this.disabled=false;this.editable=false;this.moveable=false;this.done=false;this.xscale=1;this.yscale=1;this.pagenumber=1;this.showingProperties=false;this.focused=false}async focusField(){this.inputEl.focus();this.focused=true}async showSettingsPanel(){const e=document.getElementById(`verdocs-settings-panel-${this.fieldname}`);if(e&&e.showPanel){e.showPanel()}}async hideSettingsPanel(){const e=document.getElementById(`verdocs-settings-panel-${this.fieldname}`);if(e&&e.hidePanel){e.hidePanel()}}handleBlur(){this.focused=false}onEditableChanged(e,t){if(t&&!e){d(this.el).unset()}}disconnectedCallback(){d(this.el).unset()}componentDidRender(){d.dynamicDrop(true);if(this.editable){d(this.el).resizable({edges:{top:true,bottom:true,left:true,right:true},listeners:{start:this.handleResizeStart.bind(this),move:this.handleResize.bind(this),end:this.handleResizeEnd.bind(this)}})}}handleResizeStart(e){e.preventDefault();e.stopPropagation()}handleResize(e){let{x:t=0,y:s=0,h:r=0}=e.target.dataset;let{width:i,height:o}=e.rect;t=(parseFloat(t)||0)+e.deltaRect.left;s=(parseFloat(s)||0)+e.deltaRect.top;r=(parseFloat(r)||0)+e.deltaRect.height;Object.assign(e.target.style,{width:`${i}px`,height:`${o}px`,transform:`translate(${t}px, ${s+r}px)`});Object.assign(e.target.dataset,{x:t,y:s,h:r})}handleResizeEnd(e){const{source:t,sourceid:s,fieldname:r}=this;const{field:i}=p.getField(t,s,r,this.field);if(!i){return}const[o,a]=e.target.style.transform.split("(")[1].split(")")[0].split(",").map(parseFloat);const d=Math.round(parseFloat(e.target.style.width)/this.xscale);const l=Math.round(parseFloat(e.target.style.height)/this.yscale);const c=Math.round(i.x+o/this.xscale);const f=Math.round(i.y-a/this.yscale);n(this.endpoint,this.sourceid,this.fieldname,{x:c,y:f,width:d,height:l}).then((t=>{var s;(s=this.settingsChanged)===null||s===void 0?void 0:s.emit({fieldName:this.fieldname,field:t});Object.assign(e.target.dataset,{x:0,y:0,h:0})})).catch((e=>console.log("Field update failed",e)))}render(){const{source:e,sourceid:t,fieldname:s,editable:a=false,done:d=false,disabled:l=false,focused:n,xscale:f=1,yscale:h=1}=this;const{index:u,field:m}=p.getField(e,t,s,this.field);const{required:v=false,placeholder:b="",value:x="",label:g="",readonly:k=false}=m||{};const y=`signer-${u%10+1}`;if(d){return r(o,{class:{"verdocs-field":true,done:d}},x)}return r(o,{class:{"verdocs-field":true,required:v,disabled:l,done:d,focused:n,[y]:true}},g&&r("label",null,g),r("textarea",{name:s,required:v,placeholder:b,disabled:k||l,ref:e=>this.inputEl=e,onFocus:()=>this.focused=true,onBlur:()=>this.focused=false},x),a&&r(i,null,r("div",{id:`verdocs-settings-panel-trigger-${s}`,style:{transform:`scale(${Math.floor(1/f*1e3)/1e3}, ${Math.floor(1/h*1e3)/1e3})`},class:"settings-icon",innerHTML:c,onClick:e=>{e.stopPropagation();this.showingProperties=!this.showingProperties}}),this.showingProperties&&r("verdocs-portal",{anchor:`verdocs-settings-panel-trigger-${s}`,onClickAway:()=>this.showingProperties=false},r("verdocs-template-field-properties",{templateId:t,fieldName:s,onClose:()=>this.showingProperties=false,onDelete:()=>{var e;(e=this.deleted)===null||e===void 0?void 0:e.emit({fieldName:s});return this.hideSettingsPanel()},onSettingsChanged:e=>{var t;(t=this.settingsChanged)===null||t===void 0?void 0:t.emit(e.detail);return this.hideSettingsPanel()},helpText:"Text areas may be used to create multi-line text fields."}))))}get el(){return this}static get watchers(){return{editable:[{onEditableChanged:0}]}}static get style(){return y()}},[0,"verdocs-field-textarea",{endpoint:[16],source:[513],sourceid:[513],fieldname:[513],field:[16],isPreview:[516,"is-preview"],disabled:[516],editable:[516],moveable:[516],done:[516],xscale:[514],yscale:[514],pagenumber:[514],showingProperties:[32],focused:[32],focusField:[64],showSettingsPanel:[64],hideSettingsPanel:[64]},[[2,"blur","handleBlur"]],{editable:[{onEditableChanged:0}]}]);function j(){if(typeof customElements==="undefined"){return}const e=["verdocs-field-textarea","verdocs-button","verdocs-checkbox","verdocs-component-error","verdocs-help-icon","verdocs-loader","verdocs-portal","verdocs-select-input","verdocs-template-field-properties","verdocs-text-input"];e.forEach((e=>{switch(e){case"verdocs-field-textarea":if(!customElements.get(a(e))){customElements.define(a(e),w)}break;case"verdocs-button":if(!customElements.get(a(e))){f()}break;case"verdocs-checkbox":if(!customElements.get(a(e))){h()}break;case"verdocs-component-error":if(!customElements.get(a(e))){u()}break;case"verdocs-help-icon":if(!customElements.get(a(e))){m()}break;case"verdocs-loader":if(!customElements.get(a(e))){v()}break;case"verdocs-portal":if(!customElements.get(a(e))){b()}break;case"verdocs-select-input":if(!customElements.get(a(e))){x()}break;case"verdocs-template-field-properties":if(!customElements.get(a(e))){g()}break;case"verdocs-text-input":if(!customElements.get(a(e))){k()}break}}))}export{w as V,j as d};
-//# sourceMappingURL=p-B4tpmyon.js.map
+import{p as e,H as t,c as s,h as r,F as i,d as o,t as a}from"./p-yZBlG3YQ.js";import{i as d}from"./p-COaijEV0.js";import{VerdocsEndpoint as l,updateField as n}from"@verdocs/js-sdk";import{S as c}from"./p-C7k2AOsW.js";import{S as p}from"./p-C7hFgM52.js";import{d as h}from"./p-Bb5V9TQx.js";import{d as f}from"./p-NtvxlYzY.js";import{d as u}from"./p-C-v22G3g.js";import{d as m}from"./p-DHzSlpJw.js";import{d as v}from"./p-DqzFuSNN.js";import{d as b}from"./p-DhOuB4nS.js";import{d as x}from"./p-Bodw4NVB.js";import{d as g}from"./p-qLNetL5t.js";import{d as k}from"./p-PfdIkMoz.js";const y=()=>`verdocs-field-textarea{width:150px;height:15px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--verdocs-field-background, transparent);-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);border:var(--verdocs-field-border, 1px solid rgba(0, 0, 0, 0.2));border-radius:var(--verdocs-field-radius)}verdocs-field-textarea textarea{cursor:inherit;width:100%;height:100%;resize:none;border:none;outline:none;padding:0 3px;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:var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87))}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.disabled textarea{opacity:0.5}verdocs-field-textarea label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-textarea.required.required{border:1px solid var(--verdocs-required-field-border)}verdocs-field-textarea 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-textarea verdocs-button-panel[data-active],verdocs-field-textarea verdocs-button-panel:hover{opacity:1}verdocs-field-textarea verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textarea verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textarea .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-textarea .settings-icon svg{fill:#707ae5}verdocs-field-textarea .settings-icon:hover{opacity:1}`;const w=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.settingsChanged=s(this,"settingsChanged");this.deleted=s(this,"deleted");this.endpoint=l.getDefault();this.source="template";this.sourceid="";this.fieldname="";this.field=null;this.disabled=false;this.editable=false;this.moveable=false;this.done=false;this.xscale=1;this.yscale=1;this.pagenumber=1;this.showingProperties=false;this.focused=false}async focusField(){this.inputEl.focus();this.focused=true}async showSettingsPanel(){const e=document.getElementById(`verdocs-settings-panel-${this.fieldname}`);if(e&&e.showPanel){e.showPanel()}}async hideSettingsPanel(){const e=document.getElementById(`verdocs-settings-panel-${this.fieldname}`);if(e&&e.hidePanel){e.hidePanel()}}handleBlur(){this.focused=false}onEditableChanged(e,t){if(t&&!e){d(this.el).unset()}}disconnectedCallback(){d(this.el).unset()}componentDidRender(){d.dynamicDrop(true);if(this.editable){d(this.el).resizable({edges:{top:true,bottom:true,left:true,right:true},listeners:{start:this.handleResizeStart.bind(this),move:this.handleResize.bind(this),end:this.handleResizeEnd.bind(this)}})}}handleResizeStart(e){e.preventDefault();e.stopPropagation()}handleResize(e){let{x:t=0,y:s=0,h:r=0}=e.target.dataset;let{width:i,height:o}=e.rect;t=(parseFloat(t)||0)+e.deltaRect.left;s=(parseFloat(s)||0)+e.deltaRect.top;r=(parseFloat(r)||0)+e.deltaRect.height;Object.assign(e.target.style,{width:`${i}px`,height:`${o}px`,transform:`translate(${t}px, ${s+r}px)`});Object.assign(e.target.dataset,{x:t,y:s,h:r})}handleResizeEnd(e){const{source:t,sourceid:s,fieldname:r}=this;const{field:i}=p.getField(t,s,r,this.field);if(!i){return}const[o,a]=e.target.style.transform.split("(")[1].split(")")[0].split(",").map(parseFloat);const d=Math.round(parseFloat(e.target.style.width)/this.xscale);const l=Math.round(parseFloat(e.target.style.height)/this.yscale);const c=Math.round(i.x+o/this.xscale);const h=Math.round(i.y-a/this.yscale);n(this.endpoint,this.sourceid,this.fieldname,{x:c,y:h,width:d,height:l}).then((t=>{var s;(s=this.settingsChanged)===null||s===void 0?void 0:s.emit({fieldName:this.fieldname,field:t});Object.assign(e.target.dataset,{x:0,y:0,h:0})})).catch((e=>console.log("Field update failed",e)))}render(){const{source:e,sourceid:t,fieldname:s,editable:a=false,done:d=false,disabled:l=false,focused:n,xscale:h=1,yscale:f=1}=this;const{index:u,field:m}=p.getField(e,t,s,this.field);const{required:v=false,placeholder:b="",value:x="",label:g="",readonly:k=false}=m||{};const y=`signer-${u%10+1}`;if(d){return r(o,{class:{"verdocs-field":true,done:d}},x)}return r(o,{class:{"verdocs-field":true,required:v,disabled:l,done:d,focused:n,[y]:true}},g&&r("label",null,g),r("textarea",{name:s,required:v,placeholder:b,disabled:k||l,ref:e=>this.inputEl=e,onFocus:()=>this.focused=true,onBlur:()=>this.focused=false},x),a&&r(i,null,r("div",{id:`verdocs-settings-panel-trigger-${s}`,style:{transform:`scale(${Math.floor(1/h*1e3)/1e3}, ${Math.floor(1/f*1e3)/1e3})`},class:"settings-icon",innerHTML:c,onClick:e=>{e.stopPropagation();this.showingProperties=!this.showingProperties}}),this.showingProperties&&r("verdocs-portal",{anchor:`verdocs-settings-panel-trigger-${s}`,onClickAway:()=>this.showingProperties=false},r("verdocs-template-field-properties",{templateId:t,fieldName:s,onClose:()=>this.showingProperties=false,onDelete:()=>{var e;(e=this.deleted)===null||e===void 0?void 0:e.emit({fieldName:s});return this.hideSettingsPanel()},onSettingsChanged:e=>{var t;(t=this.settingsChanged)===null||t===void 0?void 0:t.emit(e.detail);return this.hideSettingsPanel()},helpText:"Text areas may be used to create multi-line text fields."}))))}get el(){return this}static get watchers(){return{editable:[{onEditableChanged:0}]}}static get style(){return y()}},[0,"verdocs-field-textarea",{endpoint:[16],source:[513],sourceid:[513],fieldname:[513],field:[16],isPreview:[516,"is-preview"],disabled:[516],editable:[516],moveable:[516],done:[516],xscale:[514],yscale:[514],pagenumber:[514],showingProperties:[32],focused:[32],focusField:[64],showSettingsPanel:[64],hideSettingsPanel:[64]},[[2,"blur","handleBlur"]],{editable:[{onEditableChanged:0}]}]);function j(){if(typeof customElements==="undefined"){return}const e=["verdocs-field-textarea","verdocs-button","verdocs-checkbox","verdocs-component-error","verdocs-help-icon","verdocs-loader","verdocs-portal","verdocs-select-input","verdocs-template-field-properties","verdocs-text-input"];e.forEach((e=>{switch(e){case"verdocs-field-textarea":if(!customElements.get(a(e))){customElements.define(a(e),w)}break;case"verdocs-button":if(!customElements.get(a(e))){h()}break;case"verdocs-checkbox":if(!customElements.get(a(e))){f()}break;case"verdocs-component-error":if(!customElements.get(a(e))){u()}break;case"verdocs-help-icon":if(!customElements.get(a(e))){m()}break;case"verdocs-loader":if(!customElements.get(a(e))){v()}break;case"verdocs-portal":if(!customElements.get(a(e))){b()}break;case"verdocs-select-input":if(!customElements.get(a(e))){x()}break;case"verdocs-template-field-properties":if(!customElements.get(a(e))){g()}break;case"verdocs-text-input":if(!customElements.get(a(e))){k()}break}}))}export{w as V,j as d};
+//# sourceMappingURL=p-CAJJndLX.js.map

package/dist/components/{p-lCn8WPSe.js → p-CaFhF-9s.js}

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as i,h as s,t as o}from"./p-yZBlG3YQ.js";import{VerdocsEndpoint as c,formatFullName as a,getActiveEntitlements as r,isValidEmail as n}from"@verdocs/js-sdk";import{c as l}from"./p-BCwFpXpV.js";import{d as p}from"./p-Bb5V9TQx.js";import{d}from"./p-C8yiLtCJ.js";import{d as h}from"./p-DreV6Npp.js";function u(e){const t=e===null||e===void 0?void 0:e.parentElement;if(!e||!t){return}const i=e.scrollHeight>e.clientHeight+1;const s=e.scrollTop+e.clientHeight>=e.scrollHeight-1;t.classList.toggle("scrollable",i);t.classList.toggle("at-end",s)}const m=()=>`verdocs-contact-picker{--picker-ink:var(--verdocs-body-color, #111827);--picker-ink-2:#374151;--picker-muted:#6b7280;--picker-faint:#9ca3af;--picker-control-border:#d1d5db;--picker-accent:var(--verdocs-link-color, #4c56cb);--picker-accent-tint:#f4f5fc;--picker-accent-tint-2:#e6e7f8;display:block;font-size:14px;color:var(--picker-ink);font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif)}verdocs-contact-picker *{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-contact-picker form{-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker .form-body-wrap{position:relative;-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker .form-body{position:relative;-ms-flex:1;flex:1;min-height:0;overflow-y:auto}verdocs-contact-picker .scroll-fade{position:absolute;left:0;right:0;bottom:0;height:36px;opacity:0;pointer-events:none;-webkit-transition:opacity 150ms ease-out;transition:opacity 150ms ease-out;background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#ffffff));background:linear-gradient(rgba(255, 255, 255, 0), #ffffff)}verdocs-contact-picker .scrollable:not(.at-end)>.scroll-fade{opacity:1}verdocs-contact-picker .row.names{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;position:relative}verdocs-contact-picker .row.names .field{-ms-flex:1;flex:1;min-width:0}verdocs-contact-picker .field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:4px;margin:0 0 10px 0}verdocs-contact-picker .field label{font-size:12px;font-weight:500;color:var(--picker-ink-2)}verdocs-contact-picker .field label .optional{color:var(--picker-muted);font-weight:400}verdocs-contact-picker input,verdocs-contact-picker textarea{width:100%;font-size:13px;font-family:inherit;color:var(--picker-ink);background:#ffffff;border:1px solid var(--picker-control-border);border-radius:6px;outline:none}verdocs-contact-picker input:focus,verdocs-contact-picker textarea:focus{border-color:var(--picker-accent);-webkit-box-shadow:0 0 0 2px var(--picker-accent-tint-2);box-shadow:0 0 0 2px var(--picker-accent-tint-2)}verdocs-contact-picker input::-webkit-input-placeholder,verdocs-contact-picker textarea::-webkit-input-placeholder{color:var(--picker-faint);opacity:1}verdocs-contact-picker input::-moz-placeholder,verdocs-contact-picker textarea::-moz-placeholder{color:var(--picker-faint);opacity:1}verdocs-contact-picker input:-ms-input-placeholder,verdocs-contact-picker textarea:-ms-input-placeholder{color:var(--picker-faint);opacity:1}verdocs-contact-picker input::-ms-input-placeholder,verdocs-contact-picker textarea::-ms-input-placeholder{color:var(--picker-faint);opacity:1}verdocs-contact-picker input::placeholder,verdocs-contact-picker textarea::placeholder{color:var(--picker-faint);opacity:1}verdocs-contact-picker input{height:34px;padding:0 10px}verdocs-contact-picker textarea{height:56px;padding:8px 10px;resize:vertical}verdocs-contact-picker .group{margin:2px 0 12px 0}verdocs-contact-picker .group .group-label{font-size:12px;font-weight:500;color:var(--picker-ink-2);margin:0 0 6px 0}verdocs-contact-picker .pills{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:6px}verdocs-contact-picker .pill{all:unset;height:26px;padding:0 9px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:4px;-moz-column-gap:4px;column-gap:4px;cursor:pointer;font-size:12px;font-weight:500;font-family:inherit;white-space:nowrap;border-radius:999px;color:var(--picker-ink-2);border:1px solid var(--picker-control-border)}verdocs-contact-picker .pill:focus-visible{outline:2px solid var(--picker-accent);outline-offset:2px}verdocs-contact-picker .pill.selected{color:var(--picker-accent);border-color:var(--picker-accent);background:var(--picker-accent-tint)}verdocs-contact-picker .pill.locked{opacity:0.5;cursor:not-allowed}verdocs-contact-picker .pill .pill-icon,verdocs-contact-picker .pill .pill-icon svg{width:12px;height:12px;display:block}verdocs-contact-picker .passcode{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:8px}verdocs-contact-picker .passcode input{-ms-flex:0 0 120px;flex:0 0 120px;width:120px;height:30px}verdocs-contact-picker .passcode .passcode-hint{-ms-flex:1;flex:1;min-width:0;font-size:11px;line-height:1.35;color:var(--picker-muted);-ms-flex-item-align:center;align-self:center}verdocs-contact-picker .buttons{margin-top:10px;padding-top:12px;border-top:1px solid #e5e7eb;-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px}verdocs-contact-picker .buttons verdocs-button:last-child{-ms-flex:1;flex:1}verdocs-contact-picker .buttons verdocs-button:last-child button{width:100%}verdocs-contact-picker .suggestions{position:absolute;top:0;left:0;right:0;z-index:20;max-height:225px;overflow-y:auto;background:#ffffff;border-radius:6px;border:1px solid #e5e7eb;-webkit-box-shadow:0 8px 24px rgba(17, 24, 39, 0.14);box-shadow:0 8px 24px rgba(17, 24, 39, 0.14)}verdocs-contact-picker .suggestions .suggestion{display:-ms-flexbox;display:flex;padding:6px 12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;cursor:pointer}verdocs-contact-picker .suggestions .suggestion svg{width:28px;height:28px}verdocs-contact-picker .suggestions .suggestion .avatar{width:28px;height:28px;-ms-flex:0 0 28px;flex:0 0 28px;margin-right:8px;border-radius:100%}verdocs-contact-picker .suggestions .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0}verdocs-contact-picker .suggestions .suggestion .name{font-size:13px;font-weight:500;color:var(--picker-ink)}verdocs-contact-picker .suggestions .suggestion .destination{font-size:12px;color:var(--picker-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-contact-picker .suggestions .suggestion:hover{background:var(--picker-accent-tint)}verdocs-contact-picker [data-lastpass-icon-root]{display:none !important}`;const f=`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-user"><path d="M15 13a3 3 0 1 0-6 0"/><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/><circle cx="12" cy="8" r="2"/></svg>`;const v=`<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`;const x=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.searchContacts=i(this,"searchContacts");this.exit=i(this,"exit");this.next=i(this,"next");this.endpoint=c.getDefault();this.templateRole=null;this.contactSuggestions=[];this.showCancel=true;this.showSuggestions=false;this.showMessage=false;this.delegator=false;this.name_locked=false;this.auth_methods=[];this.passcode="";this.firstNameFieldId=`verdocs-contact-picker-firstname-${Math.random().toString(36).substring(2,11)}`;this.lastNameFieldId=`verdocs-contact-picker-lastname-${Math.random().toString(36).substring(2,11)}`;this.emailFieldId=`verdocs-contact-picker-email-${Math.random().toString(36).substring(2,11)}`;this.phoneFieldId=`verdocs-contact-picker-phone-${Math.random().toString(36).substring(2,11)}`;this.activeEntitlements={};this.authMethodsLoading=true}async componentWillLoad(){this.endpoint.loadSession();if(this.templateRole){const e=a(this.templateRole);const t=e.split(" ");const i=this.templateRole.first_name||t.shift()||"";const s=this.templateRole.last_name||t.join(" ")||"";this.first_name=i;this.last_name=s;this.email=this.templateRole.email||"";this.phone=this.templateRole.phone||"";this.delegator=this.templateRole.delegator||false;this.name_locked=this.delegator?false:this.templateRole.name_locked||false;this.message=this.templateRole.message||"";this.showMessage=this.message!=="";this.auth_methods=this.templateRole.auth_methods||[];this.passcode=this.templateRole.passcode||""}this.activeEntitlements=await r(this.endpoint).catch((e=>{console.warn("[CONTACT PICKER] Unable to load entitlements, continuing with base auth methods only",e);return{}}));this.authMethodsLoading=false;console.log("[CONTACT PICKER] Loaded entitlements",this.activeEntitlements)}componentDidRender(){const e=this.el.querySelector(".form-body");u(e);if(this.suggestionsEl&&this.namesRowEl&&e){this.suggestionsEl.style.top=`${this.namesRowEl.offsetTop+this.namesRowEl.offsetHeight-e.scrollTop+4}px`}}handleDocumentClick(e){if(this.showSuggestions&&!this.el.contains(e.target)){this.showSuggestions=false}}handleFirstNameChange(e){var t;this.first_name=e.target.value;(t=this.searchContacts)===null||t===void 0?void 0:t.emit({query:this.first_name})}handleLastNameChange(e){var t;this.last_name=e.target.value;(t=this.searchContacts)===null||t===void 0?void 0:t.emit({query:this.last_name})}handleCancel(e){var t;e.stopPropagation();this.showSuggestions=false;(t=this.exit)===null||t===void 0?void 0:t.emit()}handleSubmit(e){var t;e.stopPropagation();this.showSuggestions=false;(t=this.next)===null||t===void 0?void 0:t.emit({first_name:this.first_name,last_name:this.last_name,email:this.email,phone:this.phone,message:this.message,delegator:this.delegator,name_locked:this.name_locked,auth_methods:this.auth_methods,passcode:this.passcode,address:this.address,zip:this.zip})}handleSelectSuggestion(e,t){e.stopPropagation();this.first_name=t.first_name;this.last_name=t.last_name;this.email=t.email;this.phone=t.phone;this.showSuggestions=false}toggleAuthMethod(e){if(this.auth_methods.includes(e)){this.auth_methods=this.auth_methods.filter((t=>t!==e))}else{this.auth_methods=[...this.auth_methods,e]}}setSigningOption(e){this.delegator=e==="delegator";this.name_locked=e==="name_locked"}renderPill(e,t,i,o={}){return s("button",{type:"button",class:{pill:true,selected:t,locked:!!o.locked},"aria-pressed":t?"true":"false",disabled:o.locked&&!t,title:o.title,onClick:i},o.locked&&s("span",{class:"pill-icon",innerHTML:v}),e)}render(){const e=this.first_name&&this.last_name&&n(this.email);const t=(this.contactSuggestions||[]).filter((e=>{var t;return!this.first_name||((t=e.first_name)===null||t===void 0?void 0:t.toLowerCase().includes(this.first_name.toLowerCase()))}));const i=this.auth_methods.every((e=>{switch(e){case"passcode":return!!this.passcode;case"kba":return!!this.first_name&&!!this.last_name;case"email":return!!this.email;case"sms":return!!this.phone;default:return true}}));const o=e&&i;const c=!!this.activeEntitlements.sms_auth;const r=[{label:"Email OTP",value:"email"},{label:"Passcode",value:"passcode"},{label:"SMS OTP",value:"sms",locked:!c},{label:"KBA",value:"kba",locked:!this.activeEntitlements.kba_auth},{label:"ID check",value:"id",locked:!this.activeEntitlements.id_auth}];const p=this.delegator?"delegator":this.name_locked?"name_locked":"none";return s("form",{onSubmit:e=>e.preventDefault(),autocomplete:"off"},s("div",{class:"form-body-wrap"},s("div",{class:"form-body",onScroll:e=>{u(e.target);this.showSuggestions=false}},s("div",{class:"row names",ref:e=>this.namesRowEl=e},s("div",{class:"field"},s("label",{htmlFor:this.firstNameFieldId},"First name"),s("input",{id:this.firstNameFieldId,name:this.firstNameFieldId,type:"text","data-lpignore":"true",autocomplete:"blocked","aria-autocomplete":"none",value:this.first_name,onFocus:()=>{setTimeout((()=>{var e;this.showSuggestions=((e=this.contactSuggestions)===null||e===void 0?void 0:e.length)>0}),100)},onInput:e=>this.handleFirstNameChange(e)})),s("div",{class:"field"},s("label",{htmlFor:this.lastNameFieldId},"Last name"),s("input",{id:this.lastNameFieldId,name:this.lastNameFieldId,type:"text","data-lpignore":"true",autocomplete:"blocked","aria-autocomplete":"none",value:this.last_name,onFocus:()=>{setTimeout((()=>{var e;this.showSuggestions=((e=this.contactSuggestions)===null||e===void 0?void 0:e.length)>0}),100)},onInput:e=>this.handleLastNameChange(e)}))),s("div",{class:"field"},s("label",{htmlFor:this.emailFieldId},"Email"),s("input",{id:this.emailFieldId,name:this.emailFieldId,type:"text","data-lpignore":"true",autoComplete:"blocked","aria-autocomplete":"none",value:this.email,onFocus:()=>this.showSuggestions=false,onInput:e=>this.email=e.target.value})),c&&s("div",{class:"field"},s("label",{htmlFor:this.phoneFieldId},"Phone ",s("span",{class:"optional"},"(optional)")),s("input",{id:this.phoneFieldId,name:this.phoneFieldId,type:"text","data-lpignore":"true",autoComplete:"blocked","aria-autocomplete":"none",value:this.phone,placeholder:"+1 (555) 000-0000",onFocus:()=>this.showSuggestions=false,onInput:e=>{this.phone=l(e.target.value)}})),s("div",{class:"group"},s("div",{class:"group-label"},"Verification"),this.authMethodsLoading?s("verdocs-spinner",{size:10,mode:"dark"}):s("div",{class:"pills"},r.map((e=>this.renderPill(e.label,this.auth_methods.includes(e.value),(()=>this.toggleAuthMethod(e.value)),{locked:e.locked,title:e.locked?"Please contact sales@verdocs.com to enable this feature.":undefined})))),this.auth_methods.includes("passcode")&&s("div",{class:"passcode"},s("input",{id:"verdocs-passcode",name:"verdocs-passcode",type:"text","data-lpignore":"true",autocomplete:"blocked","aria-autocomplete":"none","aria-label":"Passcode",value:this.passcode,placeholder:"4-8 digits",onFocus:()=>this.showSuggestions=false,onInput:e=>this.passcode=e.target.value}),s("span",{class:"passcode-hint"},"PIN or passcode shared separately with the recipient ahead of time"))),s("div",{class:"group"},s("div",{class:"group-label"},"Signing options"),s("div",{class:"pills"},this.renderPill("None",p==="none",(()=>this.setSigningOption("none"))),this.renderPill("May delegate",p==="delegator",(()=>this.setSigningOption("delegator"))),this.renderPill("Name locked",p==="name_locked",(()=>this.setSigningOption("name_locked"))))),s("div",{class:"field"},s("label",{htmlFor:"verdocs-contact-picker-message"},"Message ",s("span",{class:"optional"},"(optional)")),s("textarea",{id:"verdocs-contact-picker-message",name:"verdocs-contact-picker-message","data-lpignore":"true",autocomplete:"blocked",placeholder:"Add a message to the invitation",onFocus:()=>this.showSuggestions=false,onInput:e=>this.message=e.target.value},this.message))),s("div",{class:"scroll-fade"}),this.showSuggestions&&t.length>0&&s("div",{class:"suggestions",role:"listbox",ref:e=>this.suggestionsEl=e},t.map((e=>{var t;return s("div",{key:(t=e.id)!==null&&t!==void 0?t:e.email,class:"suggestion",onClick:t=>this.handleSelectSuggestion(t,e)},e.picture?s("img",{alt:"Avatar",class:"avatar",src:e.picture}):s("div",{class:"avatar",innerHTML:f}),s("div",{class:"details"},s("div",{class:"name"},a(e)),e.email&&s("div",{class:"destination"},e.email),e.phone&&s("div",{class:"destination"},e.phone)))})))),s("div",{class:"buttons"},this.showCancel&&s("verdocs-button",{label:"Cancel",variant:"text",size:"small",onClick:e=>this.handleCancel(e)}),s("verdocs-button",{label:"Done",size:"small",disabled:!o,onClick:!o?()=>{}:e=>this.handleSubmit(e)})))}get el(){return this}static get style(){return m()}},[0,"verdocs-contact-picker",{endpoint:[16],templateRole:[16],contactSuggestions:[16],showCancel:[4,"show-cancel"],first_name:[32],last_name:[32],email:[32],phone:[32],zip:[32],address:[32],message:[32],showSuggestions:[32],showMessage:[32],delegator:[32],name_locked:[32],auth_methods:[32],passcode:[32],firstNameFieldId:[32],lastNameFieldId:[32],emailFieldId:[32],phoneFieldId:[32],activeEntitlements:[32],authMethodsLoading:[32]},[[4,"click","handleDocumentClick"]]]);function k(){if(typeof customElements==="undefined"){return}const e=["verdocs-contact-picker","verdocs-button","verdocs-flag","verdocs-spinner"];e.forEach((e=>{switch(e){case"verdocs-contact-picker":if(!customElements.get(o(e))){customElements.define(o(e),x)}break;case"verdocs-button":if(!customElements.get(o(e))){p()}break;case"verdocs-flag":if(!customElements.get(o(e))){d()}break;case"verdocs-spinner":if(!customElements.get(o(e))){h()}break}}))}export{x as V,k as d,u};
-//# sourceMappingURL=p-lCn8WPSe.js.map
+import{p as e,H as t,c as i,h as s,t as o}from"./p-yZBlG3YQ.js";import{VerdocsEndpoint as c,formatFullName as a,getActiveEntitlements as r,isValidEmail as n}from"@verdocs/js-sdk";import{c as l}from"./p-zYtapVJ0.js";import{d as p}from"./p-Bb5V9TQx.js";import{d}from"./p-C8yiLtCJ.js";import{d as h}from"./p-DreV6Npp.js";function u(e){const t=e===null||e===void 0?void 0:e.parentElement;if(!e||!t){return}const i=e.scrollHeight>e.clientHeight+1;const s=e.scrollTop+e.clientHeight>=e.scrollHeight-1;t.classList.toggle("scrollable",i);t.classList.toggle("at-end",s)}const m=()=>`verdocs-contact-picker{--picker-ink:var(--verdocs-body-color, #111827);--picker-ink-2:#374151;--picker-muted:#6b7280;--picker-faint:#9ca3af;--picker-control-border:#d1d5db;--picker-accent:var(--verdocs-link-color, #4c56cb);--picker-accent-tint:#f4f5fc;--picker-accent-tint-2:#e6e7f8;display:block;font-size:14px;color:var(--picker-ink);font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif)}verdocs-contact-picker *{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-contact-picker form{-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker .form-body-wrap{position:relative;-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker .form-body{position:relative;-ms-flex:1;flex:1;min-height:0;overflow-y:auto}verdocs-contact-picker .scroll-fade{position:absolute;left:0;right:0;bottom:0;height:36px;opacity:0;pointer-events:none;-webkit-transition:opacity 150ms ease-out;transition:opacity 150ms ease-out;background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#ffffff));background:linear-gradient(rgba(255, 255, 255, 0), #ffffff)}verdocs-contact-picker .scrollable:not(.at-end)>.scroll-fade{opacity:1}verdocs-contact-picker .row.names{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;position:relative}verdocs-contact-picker .row.names .field{-ms-flex:1;flex:1;min-width:0}verdocs-contact-picker .field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:4px;margin:0 0 10px 0}verdocs-contact-picker .field label{font-size:12px;font-weight:500;color:var(--picker-ink-2)}verdocs-contact-picker .field label .optional{color:var(--picker-muted);font-weight:400}verdocs-contact-picker input,verdocs-contact-picker textarea{width:100%;font-size:13px;font-family:inherit;color:var(--picker-ink);background:#ffffff;border:1px solid var(--picker-control-border);border-radius:6px;outline:none}verdocs-contact-picker input:focus,verdocs-contact-picker textarea:focus{border-color:var(--picker-accent);-webkit-box-shadow:0 0 0 2px var(--picker-accent-tint-2);box-shadow:0 0 0 2px var(--picker-accent-tint-2)}verdocs-contact-picker input::-webkit-input-placeholder,verdocs-contact-picker textarea::-webkit-input-placeholder{color:var(--picker-faint);opacity:1}verdocs-contact-picker input::-moz-placeholder,verdocs-contact-picker textarea::-moz-placeholder{color:var(--picker-faint);opacity:1}verdocs-contact-picker input:-ms-input-placeholder,verdocs-contact-picker textarea:-ms-input-placeholder{color:var(--picker-faint);opacity:1}verdocs-contact-picker input::-ms-input-placeholder,verdocs-contact-picker textarea::-ms-input-placeholder{color:var(--picker-faint);opacity:1}verdocs-contact-picker input::placeholder,verdocs-contact-picker textarea::placeholder{color:var(--picker-faint);opacity:1}verdocs-contact-picker input{height:34px;padding:0 10px}verdocs-contact-picker textarea{height:56px;padding:8px 10px;resize:vertical}verdocs-contact-picker .group{margin:2px 0 12px 0}verdocs-contact-picker .group .group-label{font-size:12px;font-weight:500;color:var(--picker-ink-2);margin:0 0 6px 0}verdocs-contact-picker .pills{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:6px}verdocs-contact-picker .pill{all:unset;height:26px;padding:0 9px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:4px;-moz-column-gap:4px;column-gap:4px;cursor:pointer;font-size:12px;font-weight:500;font-family:inherit;white-space:nowrap;border-radius:999px;color:var(--picker-ink-2);border:1px solid var(--picker-control-border)}verdocs-contact-picker .pill:focus-visible{outline:2px solid var(--picker-accent);outline-offset:2px}verdocs-contact-picker .pill.selected{color:var(--picker-accent);border-color:var(--picker-accent);background:var(--picker-accent-tint)}verdocs-contact-picker .pill.locked{opacity:0.5;cursor:not-allowed}verdocs-contact-picker .pill .pill-icon,verdocs-contact-picker .pill .pill-icon svg{width:12px;height:12px;display:block}verdocs-contact-picker .passcode{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:8px}verdocs-contact-picker .passcode input{-ms-flex:0 0 120px;flex:0 0 120px;width:120px;height:30px}verdocs-contact-picker .passcode .passcode-hint{-ms-flex:1;flex:1;min-width:0;font-size:11px;line-height:1.35;color:var(--picker-muted);-ms-flex-item-align:center;align-self:center}verdocs-contact-picker .buttons{margin-top:10px;padding-top:12px;border-top:1px solid #e5e7eb;-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px}verdocs-contact-picker .buttons verdocs-button:last-child{-ms-flex:1;flex:1}verdocs-contact-picker .buttons verdocs-button:last-child button{width:100%}verdocs-contact-picker .suggestions{position:absolute;top:0;left:0;right:0;z-index:20;max-height:225px;overflow-y:auto;background:#ffffff;border-radius:6px;border:1px solid #e5e7eb;-webkit-box-shadow:0 8px 24px rgba(17, 24, 39, 0.14);box-shadow:0 8px 24px rgba(17, 24, 39, 0.14)}verdocs-contact-picker .suggestions .suggestion{display:-ms-flexbox;display:flex;padding:6px 12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;cursor:pointer}verdocs-contact-picker .suggestions .suggestion svg{width:28px;height:28px}verdocs-contact-picker .suggestions .suggestion .avatar{width:28px;height:28px;-ms-flex:0 0 28px;flex:0 0 28px;margin-right:8px;border-radius:100%}verdocs-contact-picker .suggestions .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0}verdocs-contact-picker .suggestions .suggestion .name{font-size:13px;font-weight:500;color:var(--picker-ink)}verdocs-contact-picker .suggestions .suggestion .destination{font-size:12px;color:var(--picker-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-contact-picker .suggestions .suggestion:hover{background:var(--picker-accent-tint)}verdocs-contact-picker [data-lastpass-icon-root]{display:none !important}`;const f=`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-user"><path d="M15 13a3 3 0 1 0-6 0"/><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/><circle cx="12" cy="8" r="2"/></svg>`;const v=`<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`;const x=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.searchContacts=i(this,"searchContacts");this.exit=i(this,"exit");this.next=i(this,"next");this.endpoint=c.getDefault();this.templateRole=null;this.contactSuggestions=[];this.showCancel=true;this.showSuggestions=false;this.showMessage=false;this.delegator=false;this.name_locked=false;this.auth_methods=[];this.passcode="";this.firstNameFieldId=`verdocs-contact-picker-firstname-${Math.random().toString(36).substring(2,11)}`;this.lastNameFieldId=`verdocs-contact-picker-lastname-${Math.random().toString(36).substring(2,11)}`;this.emailFieldId=`verdocs-contact-picker-email-${Math.random().toString(36).substring(2,11)}`;this.phoneFieldId=`verdocs-contact-picker-phone-${Math.random().toString(36).substring(2,11)}`;this.activeEntitlements={};this.authMethodsLoading=true}async componentWillLoad(){this.endpoint.loadSession();if(this.templateRole){const e=a(this.templateRole);const t=e.split(" ");const i=this.templateRole.first_name||t.shift()||"";const s=this.templateRole.last_name||t.join(" ")||"";this.first_name=i;this.last_name=s;this.email=this.templateRole.email||"";this.phone=this.templateRole.phone||"";this.delegator=this.templateRole.delegator||false;this.name_locked=this.delegator?false:this.templateRole.name_locked||false;this.message=this.templateRole.message||"";this.showMessage=this.message!=="";this.auth_methods=this.templateRole.auth_methods||[];this.passcode=this.templateRole.passcode||""}this.activeEntitlements=await r(this.endpoint).catch((e=>{console.warn("[CONTACT PICKER] Unable to load entitlements, continuing with base auth methods only",e);return{}}));this.authMethodsLoading=false;console.log("[CONTACT PICKER] Loaded entitlements",this.activeEntitlements)}componentDidRender(){const e=this.el.querySelector(".form-body");u(e);if(this.suggestionsEl&&this.namesRowEl&&e){this.suggestionsEl.style.top=`${this.namesRowEl.offsetTop+this.namesRowEl.offsetHeight-e.scrollTop+4}px`}}handleDocumentClick(e){if(this.showSuggestions&&!this.el.contains(e.target)){this.showSuggestions=false}}handleFirstNameChange(e){var t;this.first_name=e.target.value;(t=this.searchContacts)===null||t===void 0?void 0:t.emit({query:this.first_name})}handleLastNameChange(e){var t;this.last_name=e.target.value;(t=this.searchContacts)===null||t===void 0?void 0:t.emit({query:this.last_name})}handleCancel(e){var t;e.stopPropagation();this.showSuggestions=false;(t=this.exit)===null||t===void 0?void 0:t.emit()}handleSubmit(e){var t;e.stopPropagation();this.showSuggestions=false;(t=this.next)===null||t===void 0?void 0:t.emit({first_name:this.first_name,last_name:this.last_name,email:this.email,phone:this.phone,message:this.message,delegator:this.delegator,name_locked:this.name_locked,auth_methods:this.auth_methods,passcode:this.passcode,address:this.address,zip:this.zip})}handleSelectSuggestion(e,t){e.stopPropagation();this.first_name=t.first_name;this.last_name=t.last_name;this.email=t.email;this.phone=t.phone;this.showSuggestions=false}toggleAuthMethod(e){if(this.auth_methods.includes(e)){this.auth_methods=this.auth_methods.filter((t=>t!==e))}else{this.auth_methods=[...this.auth_methods,e]}}setSigningOption(e){this.delegator=e==="delegator";this.name_locked=e==="name_locked"}renderPill(e,t,i,o={}){return s("button",{type:"button",class:{pill:true,selected:t,locked:!!o.locked},"aria-pressed":t?"true":"false",disabled:o.locked&&!t,title:o.title,onClick:i},o.locked&&s("span",{class:"pill-icon",innerHTML:v}),e)}render(){const e=this.first_name&&this.last_name&&n(this.email);const t=(this.contactSuggestions||[]).filter((e=>{var t;return!this.first_name||((t=e.first_name)===null||t===void 0?void 0:t.toLowerCase().includes(this.first_name.toLowerCase()))}));const i=this.auth_methods.every((e=>{switch(e){case"passcode":return!!this.passcode;case"kba":return!!this.first_name&&!!this.last_name;case"email":return!!this.email;case"sms":return!!this.phone;default:return true}}));const o=e&&i;const c=!!this.activeEntitlements.sms_auth;const r=[{label:"Email OTP",value:"email"},{label:"Passcode",value:"passcode"},{label:"SMS OTP",value:"sms",locked:!c},{label:"KBA",value:"kba",locked:!this.activeEntitlements.kba_auth},{label:"ID check",value:"id",locked:!this.activeEntitlements.id_auth}];const p=this.delegator?"delegator":this.name_locked?"name_locked":"none";return s("form",{onSubmit:e=>e.preventDefault(),autocomplete:"off"},s("div",{class:"form-body-wrap"},s("div",{class:"form-body",onScroll:e=>{u(e.target);this.showSuggestions=false}},s("div",{class:"row names",ref:e=>this.namesRowEl=e},s("div",{class:"field"},s("label",{htmlFor:this.firstNameFieldId},"First name"),s("input",{id:this.firstNameFieldId,name:this.firstNameFieldId,type:"text","data-lpignore":"true",autocomplete:"blocked","aria-autocomplete":"none",value:this.first_name,onFocus:()=>{setTimeout((()=>{var e;this.showSuggestions=((e=this.contactSuggestions)===null||e===void 0?void 0:e.length)>0}),100)},onInput:e=>this.handleFirstNameChange(e)})),s("div",{class:"field"},s("label",{htmlFor:this.lastNameFieldId},"Last name"),s("input",{id:this.lastNameFieldId,name:this.lastNameFieldId,type:"text","data-lpignore":"true",autocomplete:"blocked","aria-autocomplete":"none",value:this.last_name,onFocus:()=>{setTimeout((()=>{var e;this.showSuggestions=((e=this.contactSuggestions)===null||e===void 0?void 0:e.length)>0}),100)},onInput:e=>this.handleLastNameChange(e)}))),s("div",{class:"field"},s("label",{htmlFor:this.emailFieldId},"Email"),s("input",{id:this.emailFieldId,name:this.emailFieldId,type:"text","data-lpignore":"true",autoComplete:"blocked","aria-autocomplete":"none",value:this.email,onFocus:()=>this.showSuggestions=false,onInput:e=>this.email=e.target.value})),c&&s("div",{class:"field"},s("label",{htmlFor:this.phoneFieldId},"Phone ",s("span",{class:"optional"},"(optional)")),s("input",{id:this.phoneFieldId,name:this.phoneFieldId,type:"text","data-lpignore":"true",autoComplete:"blocked","aria-autocomplete":"none",value:this.phone,placeholder:"+1 (555) 000-0000",onFocus:()=>this.showSuggestions=false,onInput:e=>{this.phone=l(e.target.value)}})),s("div",{class:"group"},s("div",{class:"group-label"},"Verification"),this.authMethodsLoading?s("verdocs-spinner",{size:10,mode:"dark"}):s("div",{class:"pills"},r.map((e=>this.renderPill(e.label,this.auth_methods.includes(e.value),(()=>this.toggleAuthMethod(e.value)),{locked:e.locked,title:e.locked?"Please contact sales@verdocs.com to enable this feature.":undefined})))),this.auth_methods.includes("passcode")&&s("div",{class:"passcode"},s("input",{id:"verdocs-passcode",name:"verdocs-passcode",type:"text","data-lpignore":"true",autocomplete:"blocked","aria-autocomplete":"none","aria-label":"Passcode",value:this.passcode,placeholder:"4-8 digits",onFocus:()=>this.showSuggestions=false,onInput:e=>this.passcode=e.target.value}),s("span",{class:"passcode-hint"},"PIN or passcode shared separately with the recipient ahead of time"))),s("div",{class:"group"},s("div",{class:"group-label"},"Signing options"),s("div",{class:"pills"},this.renderPill("None",p==="none",(()=>this.setSigningOption("none"))),this.renderPill("May delegate",p==="delegator",(()=>this.setSigningOption("delegator"))),this.renderPill("Name locked",p==="name_locked",(()=>this.setSigningOption("name_locked"))))),s("div",{class:"field"},s("label",{htmlFor:"verdocs-contact-picker-message"},"Message ",s("span",{class:"optional"},"(optional)")),s("textarea",{id:"verdocs-contact-picker-message",name:"verdocs-contact-picker-message","data-lpignore":"true",autocomplete:"blocked",placeholder:"Add a message to the invitation",onFocus:()=>this.showSuggestions=false,onInput:e=>this.message=e.target.value},this.message))),s("div",{class:"scroll-fade"}),this.showSuggestions&&t.length>0&&s("div",{class:"suggestions",role:"listbox",ref:e=>this.suggestionsEl=e},t.map((e=>{var t;return s("div",{key:(t=e.id)!==null&&t!==void 0?t:e.email,class:"suggestion",onClick:t=>this.handleSelectSuggestion(t,e)},e.picture?s("img",{alt:"Avatar",class:"avatar",src:e.picture}):s("div",{class:"avatar",innerHTML:f}),s("div",{class:"details"},s("div",{class:"name"},a(e)),e.email&&s("div",{class:"destination"},e.email),e.phone&&s("div",{class:"destination"},e.phone)))})))),s("div",{class:"buttons"},this.showCancel&&s("verdocs-button",{label:"Cancel",variant:"text",size:"small",onClick:e=>this.handleCancel(e)}),s("verdocs-button",{label:"Done",size:"small",disabled:!o,onClick:!o?()=>{}:e=>this.handleSubmit(e)})))}get el(){return this}static get style(){return m()}},[0,"verdocs-contact-picker",{endpoint:[16],templateRole:[16],contactSuggestions:[16],showCancel:[4,"show-cancel"],first_name:[32],last_name:[32],email:[32],phone:[32],zip:[32],address:[32],message:[32],showSuggestions:[32],showMessage:[32],delegator:[32],name_locked:[32],auth_methods:[32],passcode:[32],firstNameFieldId:[32],lastNameFieldId:[32],emailFieldId:[32],phoneFieldId:[32],activeEntitlements:[32],authMethodsLoading:[32]},[[4,"click","handleDocumentClick"]]]);function k(){if(typeof customElements==="undefined"){return}const e=["verdocs-contact-picker","verdocs-button","verdocs-flag","verdocs-spinner"];e.forEach((e=>{switch(e){case"verdocs-contact-picker":if(!customElements.get(o(e))){customElements.define(o(e),x)}break;case"verdocs-button":if(!customElements.get(o(e))){p()}break;case"verdocs-flag":if(!customElements.get(o(e))){d()}break;case"verdocs-spinner":if(!customElements.get(o(e))){h()}break}}))}export{x as V,k as d,u};
+//# sourceMappingURL=p-CaFhF-9s.js.map