@verdocs/web-sdk 6.5.0-beta.1 → 6.5.0-beta.2

package/dist/components/p-BRnBGYE7.js

@@ -1,220 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-CUAGH_8P.js';
-import { d as dateFnsExports } from './p-6fSdgmoO.js';
-import { getRGBA } from '@verdocs/js-sdk';
-import { A as AirDatepicker, l as localeEn } from './p-CjPsvAbb.js';
-import { S as SettingsIcon } from './p-7LXbcjVz.js';
-import { a as FORMAT_DATE } from './p-Dl7Xw8F0.js';
-import { S as Store } from './p-DmsV595e.js';
-import { d as defineCustomElement$9 } from './p-j_Tq7bTq.js';
-import { d as defineCustomElement$8 } from './p-C7Lom-pC.js';
-import { d as defineCustomElement$7 } from './p-qfdb4bEJ.js';
-import { d as defineCustomElement$6 } from './p-Ddtzdi61.js';
-import { d as defineCustomElement$5 } from './p-CbATIWo8.js';
-import { d as defineCustomElement$4 } from './p-ClMXECec.js';
-import { d as defineCustomElement$3 } from './p-DHOg-bdt.js';
-import { d as defineCustomElement$2 } from './p-B-Dy5ZZg.js';
-import { d as defineCustomElement$1 } from './p-ExxjGoKu.js';
-
-const verdocsFieldDateCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-date{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:74px;height:20px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-date.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}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: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:1px solid #cccccc;-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 #cc0000}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}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";
-
-const VerdocsFieldDate = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldDate extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.settingsPress = createEvent(this, "settingsPress");
-        this.settingsChanged = createEvent(this, "settingsChanged");
-        this.deleted = createEvent(this, "deleted");
-        /**
-         * Fields may be attached to templates or envelopes, but only template fields may be edited.
-         */
-        this.source = 'template';
-        /**
-         * The source template or envelope ID the field is found in.
-         */
-        this.sourceid = '';
-        /**
-         * The name of the field to display.
-         */
-        this.fieldname = '';
-        /**
-         * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
-         */
-        this.disabled = false;
-        /**
-         * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be
-         * changed, so it should typically only be enabled in the Builder.
-         */
-        this.editable = false;
-        /**
-         * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.
-         */
-        this.moveable = false;
-        /**
-         * If set, the field is considered "done" and is drawn in a display-final-value state.
-         */
-        this.done = false;
-        /**
-         * If set, the field will be be scaled horizontally by this factor.
-         */
-        this.xscale = 1;
-        /**
-         * If set, the field will be be scaled vertically by this factor.
-         */
-        this.yscale = 1;
-        /**
-         * The page the field is on
-         */
-        this.pagenumber = 1;
-        this.containerId = `verdocs-date-picker-${Math.random().toString(36).substring(2, 11)}`;
-        this.showingProperties = false;
-        this.picker = null;
-        this.focused = false;
-    }
-    async focusField() {
-        var _a;
-        // Our input field is fake, so we fake the flash too
-        this.focused = true;
-        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.show();
-        setTimeout(() => {
-            this.focused = false;
-        }, 500);
-    }
-    componentDidLoad() {
-        const { source, sourceid, fieldname } = this;
-        const { field } = Store.getField(source, sourceid, fieldname, this.field);
-        const { readonly = false } = field || {};
-        if (!readonly) {
-            this.picker = new AirDatepicker(`#${this.containerId}`, {
-                locale: localeEn,
-                isMobile: true,
-                autoClose: true,
-                onShow: () => (this.focused = true),
-                onHide: () => (this.focused = false),
-                onSelect: ({ date, formattedDate }) => {
-                    const event = new CustomEvent('fieldChange', { detail: { date, formattedDate } });
-                    this.hostEl.dispatchEvent(event);
-                },
-            });
-        }
-    }
-    async showSettingsPanel() {
-        const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
-        if (settingsPanel && settingsPanel.showPanel) {
-            settingsPanel.showPanel();
-        }
-    }
-    async hideSettingsPanel() {
-        const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
-        if (settingsPanel && settingsPanel.hidePanel) {
-            settingsPanel.hidePanel();
-        }
-    }
-    // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
-    render() {
-        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
-        const { index, field } = Store.getField(source, sourceid, fieldname, this.field);
-        const { required = false, placeholder = 'Date...', value = '', label = '', readonly = false } = field || {};
-        const backgroundColor = getRGBA(index);
-        const formattedValue = value ? dateFnsExports.format(new Date(value), FORMAT_DATE) : '';
-        if (this.done) {
-            return h(Host, { class: { done } }, formattedValue);
-        }
-        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), h("input", { name: fieldname, class: "input-el", type: "text", value: formattedValue, id: this.containerId, placeholder: placeholder, disabled: readonly || disabled, onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
-                e.stopPropagation();
-                this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
-                var _a;
-                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
-                return this.hideSettingsPanel();
-            }, onSettingsChanged: e => {
-                var _a;
-                (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
-                return this.hideSettingsPanel();
-            }, helpText: 'Date fields allow the user to select a date.' })))))));
-    }
-    get hostEl() { return this; }
-    static get style() { return verdocsFieldDateCss; }
-}, [256, "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],
-        "containerId": [32],
-        "showingProperties": [32],
-        "focused": [32],
-        "focusField": [64],
-        "showSettingsPanel": [64],
-        "hideSettingsPanel": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["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"];
-    components.forEach(tagName => { switch (tagName) {
-        case "verdocs-field-date":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, VerdocsFieldDate);
-            }
-            break;
-        case "verdocs-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "verdocs-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "verdocs-component-error":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "verdocs-help-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "verdocs-loader":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "verdocs-portal":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "verdocs-select-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "verdocs-template-field-properties":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "verdocs-text-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { VerdocsFieldDate as V, defineCustomElement as d };
-//# sourceMappingURL=p-BRnBGYE7.js.map
-
-//# sourceMappingURL=p-BRnBGYE7.js.map

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

@@ -1 +0,0 @@
-{"file":"p-BRnBGYE7.js","mappings":";;;;;;;;;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,i5vBAAi5vB;;MCkBh6vB,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AASE;;AAEG;AACoB,QAAA,IAAM,CAAA,MAAA,GAA4B,UAAU;AAEnE;;AAEG;AACoB,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAE5C;;AAEG;AACoB,QAAA,IAAS,CAAA,SAAA,GAAW,EAAE;AAE7C;;AAEG;AACoB,QAAA,IAAQ,CAAA,QAAA,GAAa,KAAK;AAEjD;;;AAGG;AACoB,QAAA,IAAQ,CAAA,QAAA,GAAa,KAAK;AAEjD;;AAEG;AACoB,QAAA,IAAQ,CAAA,QAAA,GAAa,KAAK;AAEjD;;AAEG;AACoB,QAAA,IAAI,CAAA,IAAA,GAAa,KAAK;AAE7C;;AAEG;AACoB,QAAA,IAAM,CAAA,MAAA,GAAY,CAAC;AAE1C;;AAEG;AACoB,QAAA,IAAM,CAAA,MAAA,GAAY,CAAC;AAE1C;;AAEG;AACoB,QAAA,IAAU,CAAA,UAAA,GAAY,CAAC;QAsBrC,IAAA,CAAA,WAAW,GAAG,CAAA,oBAAA,EAAuB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA,CAAE;AAElF,QAAA,IAAiB,CAAA,iBAAA,GAAa,KAAK;AAY5C,QAAA,IAAM,CAAA,MAAA,GAAsC,IAAI;AAsCvC,QAAA,IAAO,CAAA,OAAA,GAAa,KAAK;AAoEnC;AAnHC,IAAA,MAAM,UAAU,GAAA;;;AAEd,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;QACnB,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,EAAE;QACnB,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;SACrB,EAAE,GAAG,CAAC;;IAKT,gBAAgB,GAAA;QACd,MAAM,EAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAC,GAAG,IAAI;AAC1C,QAAA,MAAM,EAAC,KAAK,EAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;QACvE,MAAM,EAAC,QAAQ,GAAG,KAAK,EAAC,GAAG,KAAK,IAAI,EAAE;QAEtC,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,aAAa,CAAc,CAAA,CAAA,EAAI,IAAI,CAAC,WAAW,CAAA,CAAE,EAAE;AACnE,gBAAA,MAAM,EAAE,QAAQ;AAChB,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,SAAS,EAAE,IAAI;gBACf,MAAM,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACnC,MAAM,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBACpC,QAAQ,EAAE,CAAC,EAAC,IAAI,EAAE,aAAa,EAAC,KAAI;AAClC,oBAAA,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,aAAa,EAAE,EAAC,MAAM,EAAE,EAAC,IAAI,EAAE,aAAa,EAAC,EAAC,CAAC;AAC7E,oBAAA,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC;iBACjC;AACF,aAAA,CAAC;;;AAKN,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,CAA0B,uBAAA,EAAA,IAAI,CAAC,SAAS,CAAE,CAAA,CAAQ;AAChG,QAAA,IAAI,aAAa,IAAI,aAAa,CAAC,SAAS,EAAE;YAC5C,aAAa,CAAC,SAAS,EAAE;;;AAK7B,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,CAA0B,uBAAA,EAAA,IAAI,CAAC,SAAS,CAAE,CAAA,CAAQ;AAChG,QAAA,IAAI,aAAa,IAAI,aAAa,CAAC,SAAS,EAAE;YAC5C,aAAa,CAAC,SAAS,EAAE;;;;IAO7B,MAAM,GAAA;AACJ,QAAA,MAAM,EAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAC,GAAG,IAAI;QAE7H,MAAM,EAAC,KAAK,EAAE,KAAK,EAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;QAC9E,MAAM,EAAC,QAAQ,GAAG,KAAK,EAAE,WAAW,GAAG,SAAS,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAC,GAAG,KAAK,IAAI,EAAE;AACzG,QAAA,MAAM,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC;QAEtC,MAAM,cAAc,GAAG,KAAK,GAAGC,qBAAM,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,GAAG,EAAE;AAExE,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,OAAO,CAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAC,IAAI,EAAC,EAAA,EAAG,cAAc,CAAQ;;AAGrD,QAAA,QACE,EAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,EAAA,EACvE,KAAK,IAAI,CAAQ,CAAA,OAAA,EAAA,IAAA,EAAA,KAAK,CAAS,EAEhC,CACE,CAAA,OAAA,EAAA,EAAA,IAAI,EAAE,SAAS,EACf,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,cAAc,EACrB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,OAAO,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EACpC,MAAM,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,EACpC,CAAA,EAED,QAAQ,KACP,CAAA,CAAC,QAAQ,EAAA,IAAA,EACP,CACE,CAAA,KAAA,EAAA,EAAA,EAAE,EAAE,CAAkC,+BAAA,EAAA,SAAS,CAAE,CAAA,EACjD,KAAK,EAAE,EAAC,SAAS,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,IAAI,CAAC,GAAG,IAAI,CAAK,EAAA,EAAA,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,IAAI,CAAC,GAAG,IAAI,CAAA,CAAA,CAAG,EAAC,EACjH,KAAK,EAAC,eAAe,EACrB,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,CAAC,CAAM,KAAI;gBAClB,CAAC,CAAC,eAAe,EAAE;AACnB,gBAAA,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB;AAClD,aAAC,EACD,CAAA,EAED,IAAI,CAAC,iBAAiB,KACrB,CAAA,CAAA,gBAAA,EAAA,EAAgB,MAAM,EAAE,CAAkC,+BAAA,EAAA,KAAK,CAAC,IAAI,CAAE,CAAA,EAAE,WAAW,EAAE,OAAO,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,EAAA,EACzH,CACE,CAAA,mCAAA,EAAA,EAAA,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,EAC/C,QAAQ,EAAE,MAAK;;AACb,gBAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,CAAC,EAAC,SAAS,EAAE,SAAS,EAAC,CAAC;AAC1C,gBAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE;AACjC,aAAC,EACD,iBAAiB,EAAE,CAAC,IAAG;;AACrB,gBAAA,CAAA,EAAA,GAAA,IAAI,CAAC,eAAe,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AACpC,gBAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE;AACjC,aAAC,EACD,QAAQ,EAAE,8CAA8C,EAAA,CACxD,CACa,CAClB,CACQ,CACZ,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement","format"],"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: transparent;\n  transform-origin: bottom left;\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\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: 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: 1px solid $light-border-color;\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 $verdocs-red-1;\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.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.-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.-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.-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.-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.-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.air-datepicker-cell.-year-.-other-decade-:empty,\n.air-datepicker-cell.-day-.-other-month-:empty {\n  background: none;\n  border: none;\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.air-datepicker-cell.-focus- {\n  background: var(--adp-cell-background-color-hover);\n}\n.air-datepicker-cell.-current- {\n  color: var(--adp-color-current-date);\n}\n.air-datepicker-cell.-current-.-focus- {\n  color: var(--adp-color);\n}\n.air-datepicker-cell.-current-.-in-range- {\n  color: var(--adp-color-current-date);\n}\n.air-datepicker-cell.-disabled- {\n  cursor: default;\n  color: var(--adp-color-disabled);\n}\n.air-datepicker-cell.-disabled-.-focus- {\n  color: var(--adp-color-disabled);\n}\n.air-datepicker-cell.-disabled-.-in-range- {\n  color: var(--adp-color-disabled-in-range);\n}\n.air-datepicker-cell.-disabled-.-current-.-focus- {\n  color: var(--adp-color-disabled);\n}\n.air-datepicker-cell.-in-range- {\n  background: var(--adp-cell-background-color-in-range);\n  border-radius: 0;\n}\n.air-datepicker-cell.-in-range-:hover {\n  background: var(--adp-cell-background-color-in-range-hover);\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.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.air-datepicker-cell.-range-to-.-range-from- {\n  border-radius: var(--adp-cell-border-radius);\n}\n.air-datepicker-cell.-selected- {\n  color: #fff;\n  border: none;\n  background: var(--adp-cell-background-color-selected);\n}\n.air-datepicker-cell.-selected-.-current- {\n  color: #fff;\n  background: var(--adp-cell-background-color-selected);\n}\n.air-datepicker-cell.-selected-.-focus- {\n  background: var(--adp-cell-background-color-selected-hover);\n}\n.air-datepicker-body {\n  transition: all var(--adp-transition-duration) var(--adp-transition-ease);\n}\n.air-datepicker-body.-hidden- {\n  display: none;\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.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.air-datepicker-body--day-name.-clickable- {\n  cursor: pointer;\n}\n.air-datepicker-body--day-name.-clickable-:hover {\n  color: var(--adp-day-name-color-hover);\n}\n.air-datepicker-body--cells {\n  display: grid;\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.air-datepicker-body--cells.-months- {\n  grid-template-columns: repeat(3, 1fr);\n  grid-auto-rows: var(--adp-month-cell-height);\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.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.-only-timepicker- .air-datepicker-nav {\n  display: none;\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.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.air-datepicker-nav--action:hover {\n  background: var(--adp-background-color-hover);\n}\n.air-datepicker-nav--action:active {\n  background: var(--adp-background-color-active);\n}\n.air-datepicker-nav--action.-disabled- {\n  visibility: hidden;\n}\n.air-datepicker-nav--action svg {\n  width: 32px;\n  height: 32px;\n}\n.air-datepicker-nav--action path {\n  fill: none;\n  stroke: var(--adp-nav-arrow-color);\n  stroke-width: 2px;\n}\n.air-datepicker-nav--title {\n  border-radius: var(--adp-border-radius);\n  padding: 0 8px;\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.air-datepicker-nav--title:hover {\n  background: var(--adp-background-color-hover);\n}\n.air-datepicker-nav--title:active {\n  background: var(--adp-background-color-active);\n}\n.air-datepicker-nav--title.-disabled- {\n  cursor: default;\n  background: none;\n}\n.air-datepicker-buttons {\n  display: grid;\n  grid-auto-columns: 1fr;\n  grid-auto-flow: column;\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.air-datepicker-button:hover {\n  color: var(--adp-btn-color-hover);\n  background: var(--adp-btn-background-color-hover);\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.air-datepicker-button:active {\n  background: var(--adp-btn-background-color-active);\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.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.-only-timepicker- .air-datepicker-time {\n  border-top: none;\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.air-datepicker-time--current-colon {\n  margin: 0 2px 3px;\n  line-height: 1;\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.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.air-datepicker-time--current-hours.-focus-:after,\n.air-datepicker-time--current-minutes.-focus-:after {\n  opacity: 1;\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.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.air-datepicker-time--row:first-child {\n  margin-bottom: 4px;\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.air-datepicker-time--row input[type='range']::-webkit-slider-thumb {\n  -webkit-appearance: none;\n}\n.air-datepicker-time--row input[type='range']::-ms-tooltip {\n  display: none;\n}\n.air-datepicker-time--row input[type='range']:hover::-webkit-slider-thumb {\n  border-color: var(--adp-time-track-color-hover);\n}\n.air-datepicker-time--row input[type='range']:hover::-moz-range-thumb {\n  border-color: var(--adp-time-track-color-hover);\n}\n.air-datepicker-time--row input[type='range']:hover::-ms-thumb {\n  border-color: var(--adp-time-track-color-hover);\n}\n.air-datepicker-time--row input[type='range']:focus {\n  outline: none;\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.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.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.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.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.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.air-datepicker-time--row input[type='range']::-webkit-slider-thumb {\n  margin-top: calc(var(--adp-time-thumb-size) / 2 * -1);\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.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.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.air-datepicker-time--row input[type='range']::-ms-fill-lower {\n  background: rgba(0, 0, 0, 0);\n}\n.air-datepicker-time--row input[type='range']::-ms-fill-upper {\n  background: rgba(0, 0, 0, 0);\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.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.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.air-datepicker:not(.-custom-position-) {\n  opacity: 0;\n}\n.air-datepicker.-from-top- {\n  transform: translateY(calc(var(--adp-transition-offset) * -1));\n}\n.air-datepicker.-from-right- {\n  transform: translateX(var(--adp-transition-offset));\n}\n.air-datepicker.-from-bottom- {\n  transform: translateY(var(--adp-transition-offset));\n}\n.air-datepicker.-from-left- {\n  transform: translateX(calc(var(--adp-transition-offset) * -1));\n}\n.air-datepicker.-active-:not(.-custom-position-) {\n  transform: translate(0, 0);\n  opacity: 1;\n}\n.air-datepicker.-active-.-custom-position- {\n  transition: none;\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.air-datepicker.-inline- .air-datepicker--pointer {\n  display: none;\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.air-datepicker.-is-mobile- * {\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.air-datepicker.-is-mobile- .air-datepicker--pointer {\n  display: none;\n}\n.air-datepicker.-is-mobile-:not(.-custom-position-) {\n  transform: translate(-50%, calc(-50% + var(--adp-transition-offset)));\n}\n.air-datepicker.-is-mobile-.-active-:not(.-custom-position-) {\n  transform: translate(-50%, -50%);\n}\n.air-datepicker.-custom-position- {\n  transition: none;\n}\n.air-datepicker-global-container {\n  position: absolute;\n  left: 0;\n  top: 0;\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.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.-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.-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.-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.-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.-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.-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.-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.-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.-top-left- .air-datepicker--pointer,\n.-bottom-left- .air-datepicker--pointer {\n  left: var(--adp-pointer-offset);\n}\n.-top-right- .air-datepicker--pointer,\n.-bottom-right- .air-datepicker--pointer {\n  right: var(--adp-pointer-offset);\n}\n.-top-center- .air-datepicker--pointer,\n.-bottom-center- .air-datepicker--pointer {\n  left: calc(50% - var(--adp-pointer-size) / 2);\n}\n.-left-top- .air-datepicker--pointer,\n.-right-top- .air-datepicker--pointer {\n  top: var(--adp-pointer-offset);\n}\n.-left-bottom- .air-datepicker--pointer,\n.-right-bottom- .air-datepicker--pointer {\n  bottom: var(--adp-pointer-offset);\n}\n.-left-center- .air-datepicker--pointer,\n.-right-center- .air-datepicker--pointer {\n  top: calc(50% - var(--adp-pointer-size) / 2);\n}\n.air-datepicker--navigation {\n  grid-area: nav;\n}\n.air-datepicker--content {\n  box-sizing: content-box;\n  padding: var(--adp-padding);\n  grid-area: body;\n}\n.-only-timepicker- .air-datepicker--content {\n  display: none;\n}\n.air-datepicker--time {\n  grid-area: timepicker;\n}\n.air-datepicker--buttons {\n  grid-area: buttons;\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.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.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 verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {format} from 'date-fns';\nimport {getRGBA} from '@verdocs/js-sdk';\nimport AirDatepicker from 'air-datepicker';\nimport localeEn from 'air-datepicker/locale/en';\nimport type {ITemplateField} from '@verdocs/js-sdk';\nimport {Component, Element, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} 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()\n  private hostEl: 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   * 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  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    this.picker?.show();\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\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.hostEl.dispatchEvent(event);\n        },\n      });\n    }\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  @State() focused?: boolean = false;\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} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const formattedValue = value ? format(new Date(value), FORMAT_DATE) : '';\n\n    if (this.done) {\n      return <Host class={{done}}>{formattedValue}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\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          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"],"version":3}

package/dist/components/p-BeOs-_Hc.js.map

@@ -1 +0,0 @@
-{"file":"p-BeOs-_Hc.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/utils/Templates.ts","src/components/embeds/verdocs-send/verdocs-send.scss?tag=verdocs-send","src/components/embeds/verdocs-send/verdocs-send.tsx"],"sourcesContent":["import {ITemplate} from '@verdocs/js-sdk';\n\nexport const getRoleNames = (template: ITemplate | null) => (template?.roles || []).map(role => role.name);\n\nexport const getRoleIndex = (template: ITemplate | null, role_name: string) =>\n  Math.max(\n    getRoleNames(template).findIndex(name => name === role_name),\n    0,\n  );\n","@import '../../../theme.scss';\n\nverdocs-send {\n  padding: 10px;\n  position: relative;\n  background: #ffffff;\n  flex-direction: column;\n  font-family: $verdocs-primary-font;\n\n  &.sendable {\n    display: flex;\n  }\n\n  .recipients {\n    position: relative;\n  }\n\n  // To avoid the need to compute things like heights, this layer is simply displayed \"on top\" of all the level rows. Its\n  // background obscures the horizontal lines.\n  .left-line {\n    top: 32px;\n    left: 20px;\n    z-index: 1;\n    width: 12px;\n    bottom: 30px;\n    position: absolute;\n    background: #ffffff;\n    border-left: 3px dotted #9b9b9b;\n  }\n\n  .level {\n    display: flex;\n    column-gap: 10px;\n    margin-left: 50px;\n    position: relative;\n    flex-direction: row;\n    padding: 8px 0 4px 0;\n    border-bottom: 1px solid #97979744;\n\n    .level-icon {\n      top: 14px;\n      z-index: 2;\n      left: -40px;\n      width: 24px;\n      height: 24px;\n      position: absolute;\n      background: #ffffff;\n\n      svg {\n        fill: #00000089;\n      }\n    }\n\n    .recipient {\n      height: 30px;\n      display: flex;\n      flex: 0 0 30px;\n      color: #000000;\n      cursor: pointer;\n      font-size: 14px;\n      align-items: center;\n      border-radius: 30px;\n      flex-direction: row;\n      background: #dddddd;\n      white-space: nowrap;\n      border: 2px solid #dddddd;\n      padding: 2px 10px 2px 14px;\n\n      .icon {\n        width: 22px;\n        height: 22px;\n        flex: 0 0 22px;\n        margin: 0 0 0 10px;\n\n        svg {\n          width: 22px;\n          height: 22px;\n          fill: #333333;\n          outline: none;\n        }\n      }\n    }\n\n    .complete {\n      flex: 1;\n      height: 30px;\n      display: flex;\n      color: #000000;\n      font-size: 14px;\n      align-items: center;\n      flex-direction: row;\n      padding: 3px 10px 3px 2px;\n    }\n  }\n\n  .buttons {\n    display: flex;\n    margin-top: 10px;\n    column-gap: 15px;\n    flex-direction: row;\n  }\n\n  verdocs-contact-picker {\n    left: 0;\n    top: 41px;\n    z-index: 10;\n    position: absolute;\n    border: 1px solid #dddddd;\n    box-shadow: 0 0 6px 3px rgb(0 0 0 / 10%);\n  }\n}\n","import {Component, Prop, State, h, Event, EventEmitter, Host, Method, Watch} from '@stencil/core';\nimport {createEnvelope, formatFullName, getTemplate, getOrganizationContacts, getRGBA, isValidEmail, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport type {ICreateEnvelopeFromTemplateRequest, ICreateEnvelopeRecipientFromTemplate, IEnvelope, IRecipient, ITemplate} from '@verdocs/js-sdk';\nimport {IContactSearchEvent} from '../../envelopes/verdocs-contact-picker/verdocs-contact-picker';\nimport {getRoleIndex, getRoleNames} from '../../../utils/Templates';\nimport {DefaultEndpoint} from '../../../utils/Environment';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nconst editIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"></path></svg>';\n\nconst startIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z\"></path></svg>';\n\nconst stepIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"></path></svg>';\n\nconst doneIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z\"></path></svg>';\n\n/**\n * Display a form to send a template to one or more recipients in an envelope for signing.\n * Host applications should ensure the template is \"sendable\" before displaying this component.\n * To be sendable, a template must have at least one document attached, at least one participant\n * defined, and at least one field assigned to every \"signer\" participant. This component will\n * hide itself if the template is not sendable.\n *\n * ```ts\n * <verdocs-send\n *   templateId={TEMPLATE_ID}\n *   onBeforeSend={({ detail })) => { console.log('Sending... Show a spinner...', detail) }\n *   onSend={({ detail }) => { console.log('Sent! Hide the spinner...', detail) }\n *   onExit={({ detail }) => { console.log('Send cancelled.', detail) }\n *   onSdkError={({ detail }) => { console.log('SDK error', detail) }\n *   />\n * ```\n */\n@Component({\n  tag: 'verdocs-send',\n  styleUrl: 'verdocs-send.scss',\n  shadow: false,\n})\nexport class VerdocsSend {\n  private templateListenerId = null;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = DefaultEndpoint;\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop({reflect: true}) templateId: string | null = null;\n\n  /**\n   * The environment the control is being called from, e.g. 'web'. This has an impact on how certain\n   * operations such as email communications are handled to ensure users receive the correct URLs for\n   * their invitations. Setting this to unknown values may produce unexpected/incorrect behaviors.\n   * If environment is not known, do this set this property.\n   */\n  @Prop() environment: string = '';\n\n  /**\n   * Whether to show the cancel button. It may be useful to disable this in environments where\n   * the embed is shown in a non-wizard flow with its own navigation for the user to exit.\n   */\n  @Prop() showCancel = true;\n\n  /**\n   * The user is sending an envelope the form and clicked send.\n   */\n  @Event({composed: true}) beforeSend: EventEmitter<{recipients: ICreateEnvelopeRecipientFromTemplate[]; name: string; template_id: string; template: ITemplate}>;\n\n  /**\n   * The user completed the form and clicked send.\n   */\n  @Event({composed: true}) send: EventEmitter<{recipients: ICreateEnvelopeRecipientFromTemplate[]; name: string; template_id: string; envelope_id: string; envelope: IEnvelope}>;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  /**\n   * Event fired when the user enters text in a search field. The parent application may use this to update\n   * the `contactSuggestions` property.\n   */\n  @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n  @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n  @State() showPickerForId = '';\n  @State() sessionContacts = [];\n  @State() sending = false;\n  @State() rolesCompleted: Record<string, Partial<IRecipient>> = {};\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    console.log('[SEND] Loading template', this.templateId);\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      true,\n      (template: ITemplate) => {\n        console.log('[SEND] Got new template', template);\n        this.template = template;\n        this.loading = false;\n        this.rolesCompleted = {};\n        this.recomputeRolesCompleted();\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  @Method() async reset() {\n    this.rolesCompleted = {};\n  }\n\n  @Watch('templateId')\n  onTemplateIdChanged(newTemplateId: string) {\n    console.log('[SEND] Template ID changed', newTemplateId);\n    this.listenToTemplate();\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.onSessionChanged((_endpoint, _session, profile) => {\n        if (!profile) {\n          return;\n        }\n\n        const me = {\n          id: profile.id,\n          first_name: profile.first_name,\n          last_name: profile.last_name,\n          email: profile.email,\n          phone: profile.phone,\n        };\n\n        if (profile) {\n          this.sessionContacts = [me];\n\n          getOrganizationContacts(this.endpoint)\n            .then(contacts => {\n              console.log('[SEND] Got contacts', contacts);\n              this.sessionContacts = [...contacts, me];\n            })\n            .catch(e => {\n              console.log('[SEND] Error getting contacts', e);\n            });\n        }\n      });\n\n      this.endpoint.loadSession();\n\n      if (!this.endpoint.session) {\n        console.log('[SEND] Unable to start Send operation, must be authenticated');\n        return;\n      }\n\n      if (!this.templateId) {\n        console.log(`[SEND] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[SEND] Error with send session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  recomputeRolesCompleted() {\n    this.rolesCompleted = {};\n\n    const rolesAtLevel: Record<number, Partial<IRecipient>[]> = {};\n    (this.template?.roles || []).forEach(role => {\n      const level = role.sequence;\n      rolesAtLevel[level] ||= [];\n      const id = `r-${level}-${rolesAtLevel[level].length}`;\n      rolesAtLevel[level].push({...role, id, role_name: role.name, first_name: role.first_name, last_name: role.last_name});\n\n      // if (role.first_name && (isValidEmail(role.email) || isValidPhone(role.phone))) {\n      if (role.first_name && isValidEmail(role.email)) {\n        this.rolesCompleted[id] = {...role, id, role_name: role.name, first_name: role.first_name, last_name: role.last_name};\n      }\n    });\n  }\n\n  getSequenceNumbers() {\n    // This is cleaner with a Set but we found a regression in some target environments where\n    // this breaks down. Reverting to an older technique while we diagnose it.\n    const sequences: Record<number, boolean> = {};\n    (this.template?.roles || []).forEach(role => {\n      sequences[role.sequence] = true;\n    });\n    return Object.keys(sequences)\n      .map(s => +s)\n      .sort((a, b) => a - b);\n  }\n\n  getRolesAtLevel(level: number) {\n    const rolesAtLevel = (this.template?.roles || [])\n      .filter(role => role.sequence === level)\n      .map((role, index) => ({\n        ...role,\n        id: `r-${level}-${index}`,\n        role_name: role.name,\n        first_name: role.first_name,\n        last_name: role.last_name,\n      }));\n    return rolesAtLevel as Partial<IRecipient>[];\n  }\n\n  getLevelIcon(level: 'start' | 'end' | 'sequence') {\n    if (level === 'start') {\n      return <div class=\"level-icon\" innerHTML={startIcon} />;\n    } else if (level === 'end') {\n      return <div class=\"level-icon\" innerHTML={doneIcon} />;\n    } else {\n      return <div class=\"level-icon\" innerHTML={stepIcon} />;\n    }\n  }\n\n  handleSelectContact(e: any, role: Partial<IRecipient>) {\n    e.preventDefault();\n    this.rolesCompleted[role.id] = {...role, ...e.detail};\n    this.showPickerForId = '';\n  }\n\n  handleClickRole(e: any, role: Partial<IRecipient>) {\n    e.stopPropagation();\n    this.showPickerForId = role.id;\n  }\n\n  handleSend(e: any) {\n    if (this.sending) {\n      console.log('[SEND] Skipping duplicate send', e);\n      return;\n    }\n\n    console.log('[SEND] Sending', e);\n    e.preventDefault();\n    e.stopPropagation();\n\n    this.sending = true;\n\n    const details: ICreateEnvelopeFromTemplateRequest = {\n      template_id: this.templateId,\n      name: this.template?.name || 'New Envelope',\n      environment: this.environment,\n      initial_reminder: 0,\n      followup_reminders: 0,\n      recipients: Object.values(this.rolesCompleted) as ICreateEnvelopeRecipientFromTemplate[],\n    };\n\n    const beforeSendResult = this.beforeSend.emit({...details, name: details.name!, template: this.template});\n    if (beforeSendResult.defaultPrevented) {\n      console.log('[SEND] Send cancelled by parent', details);\n      this.sending = false;\n      return;\n    }\n\n    console.log('[SEND] Creating envelope', details);\n    createEnvelope(this.endpoint, details)\n      .then(r => {\n        console.log('[SEND] Send envelope', r);\n        this.reset().catch((e: any) => console.log('Unknown Error', e));\n        this.sending = false;\n        this.send?.emit({...details, name: details.name!, envelope_id: r.id, envelope: r});\n      })\n      .catch(e => {\n        console.log('[SEND] Send error', e);\n        VerdocsToast(e.response?.data?.error || 'Error creating envelope, please try again later.');\n        this.sending = false;\n        this.sdkError?.emit(e);\n      });\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    this.exit?.emit();\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (!this.endpoint.session) {\n      return (\n        <Host style={{display: 'flex'}}>\n          <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n        </Host>\n      );\n    }\n\n    const levels = this.getSequenceNumbers();\n    const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) && recipient.first_name && recipient.last_name);\n    const allRolesAssigned = rolesAssigned.length >= getRoleNames(this.template).length;\n\n    return (\n      <Host class={{sendable: this.template?.is_sendable}}>\n        <div class=\"recipients\">\n          <div class=\"left-line\" />\n          <div class={`level level-start`}>\n            {this.getLevelIcon('start')}\n            <div class=\"complete\">Send Envelope</div>\n          </div>\n\n          {levels.map(level => (\n            <div class={`level level-${level}`}>\n              {this.getLevelIcon('sequence')}\n\n              {this.getRolesAtLevel(level).map(role => {\n                const unknown = !role.email || !role.first_name || !role.last_name;\n                const roleName = this.rolesCompleted[role.id]?.first_name ? formatFullName(this.rolesCompleted[role.id]) : unknown ? role.role_name : formatFullName(role);\n                const elId = `verdocs-send-recipient-${role.role_name}`;\n                const roleIndex = getRoleIndex(this.template, role.role_name);\n                const rgba = getRGBA(roleIndex);\n                const completed = rolesAssigned.findIndex(r => r.role_name === role.role_name) > -1;\n\n                const style = {\n                  backgroundColor: rgba,\n                  border: completed ? '2px solid #55bc81' : '2px solid #dddddd',\n                };\n\n                return unknown ? (\n                  <div class=\"recipient\" data-ri={roleIndex} data-rn={role.role_name} style={style} onClick={e => this.handleClickRole(e, role)} id={elId}>\n                    {roleName}\n                    <div class=\"icon\" innerHTML={editIcon} />\n                    {this.showPickerForId === role.id && (\n                      <verdocs-portal anchor={elId} onClickAway={() => (this.showPickerForId = '')}>\n                        <verdocs-contact-picker\n                          onExit={() => (this.showPickerForId = '')}\n                          onNext={e => this.handleSelectContact(e, role)}\n                          contactSuggestions={this.sessionContacts}\n                          templateRole={this.rolesCompleted[role.id] ?? role}\n                          onSearchContacts={e => this.searchContacts?.emit(e.detail)}\n                        />\n                      </verdocs-portal>\n                    )}\n                  </div>\n                ) : (\n                  <div class=\"recipient\" data-ri={roleIndex} data-rn={role.role_name} style={style} onClick={e => this.handleClickRole(e, role)} id={elId}>\n                    {/*<div class=\"recipient\" data-ri={roleIndex} data-rn={role.role_name} style={{borderColor: rgba}} onClick={e => this.handleClickRole(e, role)} id={elId}>*/}\n                    {roleName}\n                    <div class=\"icon\" innerHTML={editIcon} />\n                    {this.showPickerForId === role.id && (\n                      <verdocs-portal anchor={elId} onClickAway={() => (this.showPickerForId = '')}>\n                        <verdocs-contact-picker\n                          onExit={() => (this.showPickerForId = '')}\n                          onNext={e => this.handleSelectContact(e, role)}\n                          contactSuggestions={this.sessionContacts}\n                          templateRole={(this.rolesCompleted[role.id] ?? role) as IRecipient}\n                          onSearchContacts={e => this.searchContacts?.emit(e.detail)}\n                        />\n                      </verdocs-portal>\n                    )}\n                  </div>\n                );\n              })}\n            </div>\n          ))}\n\n          <div class={`level level-done`}>\n            {this.getLevelIcon('end')}\n            <div class=\"complete\">Signing Complete</div>\n          </div>\n        </div>\n\n        <div class=\"buttons\">\n          {this.showCancel && <verdocs-button label=\"Cancel\" size=\"small\" variant=\"outline\" onClick={e => this.handleCancel(e)} disabled={this.sending} />}\n          <verdocs-button label=\"Send\" size=\"small\" disabled={!allRolesAssigned || this.sending} onClick={e => this.handleSend(e)} />\n          {this.sending && <verdocs-spinner />}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-C7Lom-pC.js.map

@@ -1 +0,0 @@
-{"file":"p-C7Lom-pC.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,mxCAAmxC;;MCwBjyC,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEhC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AAEzB;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;;;AAIG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAqB,OAAO;AAEzC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAuB,QAAQ;AAE3C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAa,KAAK;AAYnC;IAVC,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAC,EAAA,EAC3E,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC7G,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CACnB,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-checkbox/verdocs-checkbox.scss?tag=verdocs-checkbox","src/components/controls/verdocs-checkbox/verdocs-checkbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// Your periodic reminder that it's 2022 and you still can't style HTML checkboxes\nverdocs-checkbox {\n  line-height: 18px;\n  font-family: $verdocs-primary-font;\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    content: '';\n    width: 20px;\n    height: 20px;\n    flex-shrink: 0;\n    margin-right: 8px;\n    line-height: 20px;\n    border-radius: 2px;\n    border-style: solid;\n    border-width: 0.1rem;\n    display: inline-block;\n    vertical-align: bottom;\n    border-color: $verdocs-grey-2;\n  }\n\n  label > input[type='checkbox']:checked + * {\n    color: $verdocs-green;\n  }\n\n  label > input[type='checkbox']:checked + *::before {\n    content: '✓';\n    color: white;\n    text-align: center;\n    background: $verdocs-green;\n    border-color: $verdocs-green;\n  }\n\n  &.dark {\n    label > input[type='checkbox'] + *::before {\n      border-color: $verdocs-grey-4;\n    }\n\n    label > input[type='checkbox']:checked + *::before {\n      background: $verdocs-green;\n      border-color: $verdocs-green;\n    }\n  }\n\n  &.small {\n    label > input[type='checkbox'] + *::before {\n      width: 16px;\n      height: 16px;\n      line-height: 16px;\n    }\n  }\n}\n","import {Component, h, Host, Prop} from '@stencil/core';\n\n/**\n * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed\n * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check\n * box for UI displays e.g. dialog boxes.\n *\n * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange`\n * handler. Sample usage:\n *\n * ```ts\n * <verdocs-checkbox\n *    value=\"on\"\n *    name=\"thingEnabled\"\n *    checked={this.thingEnabled}\n *    onInput={(e: any) => (this.thingEnabled = e.target.checked)}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-checkbox',\n  styleUrl: 'verdocs-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsCheckbox {\n  /**\n   * Whether the radio button is currently selected.\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * HTML form field name for the input.\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Label to display. Leave blank for no label. The label will be displayed to the right of the checkbox, but may be\n   * repositioned with CSS.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Value to track with the input. Value is not used internally by this component but is sometimes useful to set\n   * because it can be retrieved in event handlers via e.target.value. This can be used to identify which\n   * checkbox was clicked in a checkbox group.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * Style of checkbox to render. Use 'dark' when rendering on a dark background.\n   */\n  @Prop() theme: 'light' | 'dark' = 'light';\n\n  /**\n   * Size of checkbox to render.\n   */\n  @Prop() size: 'normal' | 'small' = 'normal';\n\n  /**\n   * If set, the button will still be displayed but not selectable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  render() {\n    return (\n      <Host class={{disabled: this.disabled, [this.theme]: true, [this.size]: true}}>\n        <label>\n          <input type=\"checkbox\" value={this.value} name={this.name} checked={this.checked} disabled={this.disabled} />\n          <span>{this.label}</span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-CAAXnAJc.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/templates/verdocs-template-document-page/verdocs-template-document-page.scss?tag=verdocs-template-document-page","src/components/templates/verdocs-template-document-page/verdocs-template-document-page.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-document-page {\n  width: 100%;\n  position: relative;\n\n  .verdocs-template-document-page-layer {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    box-shadow: 0 0 10px 5px #0000000f;\n\n    &.img {\n      width: 100%;\n    }\n  }\n\n  .placeholder {\n    opacity: 0.1;\n    width: 612px;\n    height: 792px;\n    box-shadow: 0 0 10px 5px #0000000f;\n  }\n}\n","// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {getTemplate, getTemplateDocumentPageDisplayUri, type ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element, Fragment} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {getControlStyles, getFieldId} from '../../../utils/utils';\nimport {throttle} from '../../../utils/utils';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Represents one document page. This is primarily a layout container used to coordinate positions of\n * page-related layers such as the page itself, signature fields, etc. It is not intended to be used\n * on its own as an individual component.\n */\n@Component({\n  tag: 'verdocs-template-document-page',\n  styleUrl: 'verdocs-template-document-page.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateDocumentPage {\n  private templateListenerId = null;\n  private resizeObserver: ResizeObserver;\n\n  @Element() container: HTMLElement;\n\n  /**\n   * The endpoint to load from.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * Whether the fields should be editable (Builder)\n   */\n  @Prop() editable = false;\n\n  /**\n   * Whether the fields should be disabled (Builder)\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the field are interactable (done/submitted disables this)\n   */\n  @Prop() done = false;\n\n  /**\n   * The ID of the template the document is for.\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * The ID of the document to display.\n   */\n  @Prop() documentId: string = '';\n\n  /**\n   * The page number being rendered. (Reminder: page numbers are 1-based.)\n   */\n  @Prop() pageNumber: number = 1;\n\n  /**\n   * The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop() virtualWidth: number = 612;\n\n  /**\n   * The \"virtual\" height of the page canvas.  Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop({mutable: true}) virtualHeight: number = 792;\n\n  /**\n   * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n   * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n   * if `pages` was ['page', 'fields'] the structure will be:\n   *\n   * ```\n   *     <div id=\"verdocs-document-page-ker2fr1p9\">\n   *       <div id=\"verdocs-document-page-ker2fr1p9-page\"></div>\n   *       <div id=\"verdocs-document-page-ker2fr1p9-fields\"></div>\n   *     </div>\n   * ```\n   */\n  @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n  /**\n   * Fired when a page has been rendered. This is also fired when the page is resized.\n   */\n  @Event() pageRendered: EventEmitter<IDocumentPageInfo>;\n\n  @State() containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;\n  @State() renderedWidth: number = this.virtualWidth;\n  @State() renderedHeight: number = this.virtualHeight;\n  @State() naturalWidth: number = this.virtualWidth;\n  @State() naturalHeight: number = this.virtualHeight;\n  @State() aspectRatio: number = this.virtualWidth / this.virtualHeight;\n  @State() skipFirstNotification = true;\n  @State() pageDisplayUri = '';\n  @State() xScale = 1;\n  @State() yScale = 1;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  async componentWillLoad() {\n    this.pageDisplayUri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber);\n    this.listenToTemplate();\n  }\n\n  componentDidLoad() {\n    this.resizeObserver = new ResizeObserver(\n      throttle(entries => {\n        for (const entry of entries) {\n          const renderedWidth = entry.contentRect.width;\n          this.renderedWidth = renderedWidth;\n          this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);\n        }\n\n        this.notifyRenderedSize();\n      }, 100),\n    );\n\n    this.resizeObserver.observe(this.container);\n  }\n\n  componentDidUpdate() {\n    // This is fired when fields are updated and triggers the parent to re-attach behaviors like drag-and-drop\n    this.notifyRenderedSize();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      false,\n      (template: ITemplate) => {\n        this.template = template;\n        this.loading = false;\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  notifyRenderedSize() {\n    // We skip one notification because by default we will always get at least two, one when rendering the initial size\n    // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.\n    if (this.skipFirstNotification) {\n      this.skipFirstNotification = false;\n      return;\n    }\n\n    const xScale = this.renderedWidth / this.virtualWidth;\n    if (this.xScale !== xScale) {\n      this.xScale = xScale;\n    }\n\n    const yScale = this.renderedHeight / this.virtualHeight;\n    if (this.yScale !== yScale) {\n      this.yScale = yScale;\n    }\n\n    this.pageRendered.emit({\n      // container: this.container,\n      containerId: this.containerId,\n      documentId: this.documentId,\n      pageNumber: this.pageNumber,\n      virtualWidth: this.virtualWidth,\n      virtualHeight: this.virtualHeight,\n      renderedWidth: this.renderedWidth,\n      renderedHeight: this.renderedHeight,\n      naturalWidth: this.naturalWidth,\n      naturalHeight: this.naturalHeight,\n      aspectRatio: this.aspectRatio,\n      xScale,\n      yScale,\n    });\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host>\n          <img src=\"https://public-assets.verdocs.com/loading-placeholder.png\" class=\"placeholder\" alt=\"Placeholder page\" />\n        </Host>\n      );\n    }\n\n    const height = `${this.renderedHeight}px`;\n\n    return (\n      <Host id={`${this.containerId}`} style={{height, flex: `0 0 ${height}`}}>\n        {this.layers.map(layer =>\n          layer.type === 'div' ? (\n            <div class=\"verdocs-template-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}}>\n              {layer.name === 'controls' &&\n                (this.template?.fields || [])\n                  .filter(field => field && field.document_id === this.documentId && field.page === this.pageNumber)\n                  .map(field => {\n                    const id = getFieldId(field);\n                    let {name, type, multiline} = field;\n                    const {xScale, yScale, templateId, editable, disabled, done, pageNumber} = this;\n                    if (field['setting']?.leading > 0 || field['settings']?.leading > 0) {\n                      type = 'textarea';\n                      multiline = true;\n                    }\n                    switch (type as any) {\n                      case 'textbox':\n                        return (\n                          <verdocs-field-textbox\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            multiline={multiline}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'textarea':\n                        return (\n                          <verdocs-field-textarea\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'date':\n                        return (\n                          <verdocs-field-date\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'attachment':\n                        return (\n                          <verdocs-field-attachment\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'dropdown':\n                        return (\n                          <verdocs-field-dropdown\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'initial':\n                        return (\n                          <verdocs-field-initial\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'signature':\n                        return (\n                          <verdocs-field-signature\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, this.xScale, this.yScale)}\n                          />\n                        );\n                      case 'timestamp':\n                        return (\n                          <verdocs-field-timestamp\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'checkbox':\n                        return (\n                          <verdocs-field-checkbox\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'radio':\n                        return (\n                          <verdocs-field-radio\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      default:\n                        return <Fragment>{name}</Fragment>;\n                    }\n                  })}\n            </div>\n          ) : this.pageDisplayUri ? (\n            <img\n              class=\"verdocs-template-document-page-layer img\"\n              id={`${this.containerId}-${layer.name}`}\n              src={this.pageDisplayUri}\n              alt={`Page ${this.pageNumber}`}\n              aria-hidden={true}\n              loading=\"lazy\"\n              onLoad={(e: any) => {\n                // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that\n                // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).\n                // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values\n                // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the\n                // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the\n                // aspect ratio to adjust the \"virtual\" height in case the page is not 8.5\"x11\".\n                // TODO: Store this in the DB with each page.\n                this.naturalWidth = e.target.naturalWidth;\n                this.naturalHeight = e.target.naturalHeight;\n                this.aspectRatio = this.naturalWidth / this.naturalHeight;\n                this.virtualHeight = this.virtualWidth / this.aspectRatio;\n                this.renderedHeight = e.target.offsetWidth / this.aspectRatio;\n              }}\n            />\n          ) : (\n            <div></div>\n          ),\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-CGEus5vb.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","format"],"sources":["src/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.scss?tag=verdocs-field-timestamp","src/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-timestamp {\n  width: 160px;\n  height: 15px;\n  display: block;\n  font-size: 9px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n  font-family: $verdocs-primary-font;\n\n  &.done {\n    opacity: 1;\n  }\n\n  input {\n    position: absolute;\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    opacity: 0.5;\n    width: 100%;\n    height: 100%;\n    font-size: 9px;\n    background: none;\n    font-weight: 500;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n    border: 1px solid rgba(0, 0, 0, 0.2);\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  label {\n    top: -14px;\n    left: -1px;\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  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\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: -20px;\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","import {format} from 'date-fns/format';\nimport {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, Fragment, State} from '@stencil/core';\nimport {FORMAT_TIMESTAMP} from '../../../utils/Types';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a timestamp. Timestamps are not editable by signers. Instead, they are automatically\n * filled when the signer submits the document.\n */\n@Component({\n  tag: 'verdocs-field-timestamp',\n  styleUrl: 'verdocs-field-timestamp.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n  private el: 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   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({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() pagenumber?: number = 1;\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() showingProperties?: boolean = false;\n\n  @Method() async focusField() {\n    this.el.focus();\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    this.showingProperties = false;\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, placeholder = '', value = '', label = ''} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const formatted = format(new Date(value || new Date().toISOString()), FORMAT_TIMESTAMP);\n\n    if (done) {\n      return <Host class={{done}}>{formatted}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n        <input type=\"text\" placeholder={placeholder} value={formatted} disabled={true} ref={el => (this.el = el)} />\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-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => this.hideSettingsPanel()}\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={'Time stamps are automatically set when the recipient signs the document.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}