@verdocs/web-sdk 1.9.6 → 1.9.10

package/dist/esm-es5/verdocs-dropdown_3.entry.js

@@ -1,2 +1,2 @@
-var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var o,t=1,i=arguments.length;t<i;t++){o=arguments[t];for(var r in o)if(Object.prototype.hasOwnProperty.call(o,r))e[r]=o[r]}return e};return __assign.apply(this,arguments)};var __spreadArray=this&&this.__spreadArray||function(e,o,t){if(t||arguments.length===2)for(var i=0,r=o.length,n;i<r;i++){if(n||!(i in o)){if(!n)n=Array.prototype.slice.call(o,0,i);n[i]=o[i]}}return e.concat(n||Array.prototype.slice.call(o))};import{r as registerInstance,c as createEvent,h,H as Host}from"./index-f78d163d.js";import{c as createPopper}from"./popper-f860750c.js";import{g as getFieldSettings}from"./utils-3f23facc.js";var SortDown='<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#50BE80"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>\n';var verdocsDropdownCss='verdocs-dropdown{font-family:"Barlow", sans-serif;display:block}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown .items{width:200px;display:none;z-index:10000;border-radius:5px;background:#33354c;border:1px solid #654dcb}verdocs-dropdown .items[data-show]{display:block}verdocs-dropdown .option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}verdocs-dropdown .option:hover{cursor:pointer;background:#55bc81}verdocs-dropdown .option[disabled]{color:#aaaaaa}verdocs-dropdown .option[disabled]:hover{color:#aaaaaa;cursor:inherit;background:transparent}verdocs-dropdown.open .items{display:block}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}';var VerdocsDropdown=function(){function e(e){registerInstance(this,e);this.optionSelected=createEvent(this,"optionSelected",7);this.options=[];this.open=undefined;this.isOpen=undefined}e.prototype.componentWillLoad=function(){this.isOpen=!!this.open};e.prototype.componentDidLoad=function(){this.popper=createPopper(this.dropdownButton,this.dropdownMenu,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,6]}}]})};e.prototype.handleSelectOption=function(e,o){e.stopPropagation();this.isOpen=false;this.optionSelected.emit(o);this.hide()};e.prototype.showDropdown=function(){var e,o;this.isOpen=true;this.dropdownMenu.setAttribute("data-show","");this.dropdownMenu.removeAttribute("aria-hidden");(e=this.popper)===null||e===void 0?void 0:e.setOptions((function(e){return __assign(__assign({},e),{modifiers:__spreadArray(__spreadArray([],e.modifiers,true),[{name:"eventListeners",enabled:true}],false)})}));(o=this.popper)===null||o===void 0?void 0:o.update()};e.prototype.handleHideDropdown=function(e){var o,t;if(((o=e===null||e===void 0?void 0:e.target)===null||o===void 0?void 0:o.localName)==="button"&&((t=e===null||e===void 0?void 0:e.target)===null||t===void 0?void 0:t.className)==="arrow"){return}this.hide()};e.prototype.toggleDropdown=function(e){e.stopPropagation();if(this.isOpen){this.hide()}else{this.showDropdown()}};e.prototype.hide=function(){var e;this.isOpen=false;this.dropdownMenu.removeAttribute("data-show");this.dropdownMenu.setAttribute("aria-hidden","true");(e=this.popper)===null||e===void 0?void 0:e.setOptions((function(e){return __assign(__assign({},e),{modifiers:__spreadArray(__spreadArray([],e.modifiers,true),[{name:"eventListeners",enabled:false}],false)})}))};e.prototype.render=function(){var e=this;var o;return h(Host,{class:{storybook:!!(window===null||window===void 0?void 0:window["STORYBOOK_ENV"]),open:!!this.isOpen}},h("button",{class:"arrow",innerHTML:SortDown,"aria-label":"Open Menu",onClick:function(o){return e.toggleDropdown(o)},onBlur:function(o){return e.handleHideDropdown(o)},ref:function(o){return e.dropdownButton=o}}),h("div",{class:"items","aria-hidden":!this.open,ref:function(o){return e.dropdownMenu=o}},(o=this.options)===null||o===void 0?void 0:o.map((function(o){return h("button",{onClick:function(t){return e.handleSelectOption(t,o)},class:"option",disabled:o.disabled},o.label)}))))};return e}();VerdocsDropdown.style=verdocsDropdownCss;var verdocsFieldCheckboxCss='@charset "UTF-8";verdocs-field-checkbox{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{content:"";position:absolute;display:block;top:1px;left:1px;width:10px;height:10px;border-radius:2px;background:#f5f5fa;border:1px solid rgba(0, 0, 0, 0.7)}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:"✓";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required label>input[type=checkbox]+*::before{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}';var VerdocsFieldCheckbox=function(){function e(e){registerInstance(this,e);this.fieldChange=createEvent(this,"fieldChange",7);this.field=null;this.recipient=undefined;this.option=0;this.disabled=false}e.prototype.handleChange=function(e){this.fieldChange.emit({option:this.option,value:e.target.checked})};e.prototype.render=function(){var e=this;var o,t,i,r;var n=getFieldSettings(this.field);var d=(t=(o=n.options)===null||o===void 0?void 0:o[this.option])!==null&&t!==void 0?t:{checked:false};var s=(r=(i=this.disabled)!==null&&i!==void 0?i:n.disabled)!==null&&r!==void 0?r:false;return h(Host,{class:{required:n.required,disabled:s}},h("label",null,h("input",{type:"checkbox",tabIndex:n.order,checked:d.checked,disabled:s,required:n.required,onChange:function(o){return e.handleChange(o)}}),h("span",null)))};return e}();VerdocsFieldCheckbox.style=verdocsFieldCheckboxCss;var verdocsFieldRadioButtonCss='verdocs-field-radio-button{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:14px;height:14px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button.disabled{opacity:0.5}verdocs-field-radio-button input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button input[type=radio]+label:before{content:"";background:#f5f5fa;border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:10px;height:10px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio-button input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio-button input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required input[type=radio]+label:before{border:1px solid #cc0000}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}';var VerdocsFieldRadioButton=function(){function e(e){registerInstance(this,e);this.fieldChange=createEvent(this,"fieldChange",7);this.field=null;this.recipient=undefined;this.option=0;this.disabled=false}e.prototype.handleChange=function(e){console.log("changed",e);this.fieldChange.emit({option:this.option,value:e.target.checked})};e.prototype.render=function(){var e=this;var o,t;var i=getFieldSettings(this.field);var r=(t=(o=this.disabled)!==null&&o!==void 0?o:i.disabled)!==null&&t!==void 0?t:false;return h(Host,{class:{required:i.required,disabled:r}},h("input",{type:"radio",tabIndex:i.order,value:i.value,name:i.name,id:"".concat(i.name,"=").concat(i.value),checked:i.checked,disabled:r,required:i.required,onChange:function(o){return e.handleChange(o)}}),h("label",{htmlFor:"".concat(i.name,"=").concat(i.value)}))};return e}();VerdocsFieldRadioButton.style=verdocsFieldRadioButtonCss;export{VerdocsDropdown as verdocs_dropdown,VerdocsFieldCheckbox as verdocs_field_checkbox,VerdocsFieldRadioButton as verdocs_field_radio_button};
+var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var o,t=1,i=arguments.length;t<i;t++){o=arguments[t];for(var r in o)if(Object.prototype.hasOwnProperty.call(o,r))e[r]=o[r]}return e};return __assign.apply(this,arguments)};var __spreadArray=this&&this.__spreadArray||function(e,o,t){if(t||arguments.length===2)for(var i=0,r=o.length,n;i<r;i++){if(n||!(i in o)){if(!n)n=Array.prototype.slice.call(o,0,i);n[i]=o[i]}}return e.concat(n||Array.prototype.slice.call(o))};import{r as registerInstance,c as createEvent,h,H as Host}from"./index-f78d163d.js";import{c as createPopper}from"./popper-f860750c.js";import{g as getFieldSettings}from"./utils-3f23facc.js";var SortDown='<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#50BE80"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>\n';var verdocsDropdownCss='verdocs-dropdown{font-family:"Barlow", sans-serif;display:block}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown .items{width:200px;display:none;z-index:10000;border-radius:5px;background:#33354c;border:1px solid #654dcb}verdocs-dropdown .items[data-show]{display:block}verdocs-dropdown .option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}verdocs-dropdown .option:hover{cursor:pointer;background:#55bc81}verdocs-dropdown .option[disabled]{color:#aaaaaa}verdocs-dropdown .option[disabled]:hover{color:#aaaaaa;cursor:inherit;background:transparent}verdocs-dropdown.open .items{display:block}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}';var VerdocsDropdown=function(){function e(e){registerInstance(this,e);this.optionSelected=createEvent(this,"optionSelected",7);this.options=[];this.isOpen=undefined}e.prototype.componentWillLoad=function(){};e.prototype.componentDidLoad=function(){this.popper=createPopper(this.dropdownButton,this.dropdownMenu,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,6]}}]})};e.prototype.handleSelectOption=function(e,o){e.stopPropagation();this.optionSelected.emit(o);this.hide()};e.prototype.showDropdown=function(){var e,o;this.dropdownMenu.setAttribute("data-show","");this.dropdownMenu.removeAttribute("aria-hidden");(e=this.popper)===null||e===void 0?void 0:e.setOptions((function(e){return __assign(__assign({},e),{modifiers:__spreadArray(__spreadArray([],e.modifiers,true),[{name:"eventListeners",enabled:true}],false)})}));(o=this.popper)===null||o===void 0?void 0:o.update()};e.prototype.handleHideDropdown=function(e){var o,t;if(((o=e===null||e===void 0?void 0:e.target)===null||o===void 0?void 0:o.localName)==="button"&&((t=e===null||e===void 0?void 0:e.target)===null||t===void 0?void 0:t.className)==="arrow"){return}this.hide()};e.prototype.toggleDropdown=function(e){e.stopPropagation();if(this.isOpen){this.hide()}else{this.showDropdown()}};e.prototype.hide=function(){var e;this.isOpen=false;this.dropdownMenu.removeAttribute("data-show");this.dropdownMenu.setAttribute("aria-hidden","true");(e=this.popper)===null||e===void 0?void 0:e.setOptions((function(e){return __assign(__assign({},e),{modifiers:__spreadArray(__spreadArray([],e.modifiers,true),[{name:"eventListeners",enabled:false}],false)})}))};e.prototype.render=function(){var e=this;var o;return h(Host,{class:{storybook:!!(window===null||window===void 0?void 0:window["STORYBOOK_ENV"]),open:!!this.isOpen}},h("button",{class:"arrow",innerHTML:SortDown,"aria-label":"Open Menu",onClick:function(o){return e.toggleDropdown(o)},onBlur:function(o){return e.handleHideDropdown(o)},ref:function(o){return e.dropdownButton=o}}),h("div",{class:"items","aria-hidden":!this.isOpen,ref:function(o){return e.dropdownMenu=o}},(o=this.options)===null||o===void 0?void 0:o.map((function(o){return h("button",{onClick:function(t){return e.handleSelectOption(t,o)},class:"option",disabled:o.disabled},o.label)}))))};return e}();VerdocsDropdown.style=verdocsDropdownCss;var verdocsFieldCheckboxCss='@charset "UTF-8";verdocs-field-checkbox{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{content:"";position:absolute;display:block;top:1px;left:1px;width:10px;height:10px;border-radius:2px;background:#f5f5fa;border:1px solid rgba(0, 0, 0, 0.7)}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:"✓";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required label>input[type=checkbox]+*::before{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}';var VerdocsFieldCheckbox=function(){function e(e){registerInstance(this,e);this.field=null;this.recipient=undefined;this.option=0;this.disabled=false}e.prototype.render=function(){var e,o,t,i;var r=getFieldSettings(this.field);var n=(o=(e=r.options)===null||e===void 0?void 0:e[this.option])!==null&&o!==void 0?o:{checked:false};var d=(i=(t=this.disabled)!==null&&t!==void 0?t:r.disabled)!==null&&i!==void 0?i:false;return h(Host,{class:{required:r.required,disabled:d}},h("label",null,h("input",{type:"checkbox",tabIndex:r.order,checked:n.checked,disabled:d,required:r.required}),h("span",null)))};return e}();VerdocsFieldCheckbox.style=verdocsFieldCheckboxCss;var verdocsFieldRadioButtonCss='verdocs-field-radio-button{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:14px;height:14px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button.disabled{opacity:0.5}verdocs-field-radio-button input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button input[type=radio]+label:before{content:"";background:#f5f5fa;border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:10px;height:10px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio-button input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio-button input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required input[type=radio]+label:before{border:1px solid #cc0000}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}';var VerdocsFieldRadioButton=function(){function e(e){registerInstance(this,e);this.fieldChange=createEvent(this,"fieldChange",7);this.field=null;this.recipient=undefined;this.option=0;this.disabled=false}e.prototype.handleChange=function(e){console.log("changed",e);this.fieldChange.emit({option:this.option,value:e.target.checked})};e.prototype.render=function(){var e=this;var o,t;var i=getFieldSettings(this.field);var r=(t=(o=this.disabled)!==null&&o!==void 0?o:i.disabled)!==null&&t!==void 0?t:false;return h(Host,{class:{required:i.required,disabled:r}},h("input",{type:"radio",tabIndex:i.order,value:i.value,name:i.name,id:"".concat(i.name,"=").concat(i.value),checked:i.checked,disabled:r,required:i.required,onChange:function(o){return e.handleChange(o)}}),h("label",{htmlFor:"".concat(i.name,"=").concat(i.value)}))};return e}();VerdocsFieldRadioButton.style=verdocsFieldRadioButtonCss;export{VerdocsDropdown as verdocs_dropdown,VerdocsFieldCheckbox as verdocs_field_checkbox,VerdocsFieldRadioButton as verdocs_field_radio_button};
 //# sourceMappingURL=verdocs-dropdown_3.entry.js.map

package/dist/esm-es5/verdocs-dropdown_3.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx","src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.scss?tag=verdocs-field-checkbox","src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.tsx","src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.scss?tag=verdocs-field-radio-button","src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.tsx"],"names":["verdocsDropdownCss","VerdocsDropdown","class_1","prototype","componentWillLoad","this","isOpen","open","componentDidLoad","popper","createPopper","dropdownButton","dropdownMenu","placement","modifiers","name","options","offset","handleSelectOption","e","option","stopPropagation","optionSelected","emit","hide","showDropdown","setAttribute","removeAttribute","_a","setOptions","__assign","__spreadArray","enabled","_b","update","handleHideDropdown","target","localName","className","toggleDropdown","render","_this","h","Host","class","storybook","window","innerHTML","SortDown","aria-label","onClick","onBlur","ref","el","aria-hidden","map","disabled","label","verdocsFieldCheckboxCss","VerdocsFieldCheckbox","handleChange","fieldChange","value","checked","settings","getFieldSettings","field","_d","_c","required","type","tabIndex","order","onChange","verdocsFieldRadioButtonCss","VerdocsFieldRadioButton","console","log","id","concat","htmlFor"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-dropdown {\n  font-family: $primary-font;\n  display: block;\n\n  .arrow {\n    width: 32px;\n    height: 26px;\n    background: #fff;\n    cursor: pointer;\n    border-radius: 4px;\n    align-items: center;\n    display: inline-flex;\n    border: 1px solid $light-border-color;\n    justify-content: center;\n  }\n\n  .arrow svg {\n    fill: $primary-color;\n    transition: 0.3s;\n  }\n\n  .items {\n    width: 200px;\n    display: none;\n    z-index: 10000;\n    border-radius: 5px;\n    background: $medium-bg;\n    border: 1px solid $item-border-color;\n  }\n\n  .items[data-show] {\n    display: block;\n  }\n\n  .option {\n    width: 100%;\n    color: #fff;\n    border: none;\n    display: block;\n    text-align: left;\n    background: none;\n    padding: 10px 20px;\n  }\n\n  .option:hover {\n    cursor: pointer;\n    background: $primary-color;\n  }\n\n  .option[disabled] {\n    color: $light-disabled-color;\n  }\n\n  .option[disabled]:hover {\n    color: $light-disabled-color;\n    cursor: inherit;\n    background: transparent;\n  }\n\n  &.open {\n    .items {\n      display: block;\n    }\n\n    .arrow {\n      background: $secondary-color;\n      border: 1px solid $border-color;\n    }\n\n    .arrow svg {\n      transform: scaleY(-1);\n      fill: #fff;\n    }\n  }\n}\n","import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport SortDown from './down-arrow.svg';\n\nexport interface IMenuOption {\n  label: string;\n  id?: any;\n  faIcon?: any;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected.\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  private dropdownButton?: HTMLButtonElement;\n  private dropdownMenu?: HTMLDivElement;\n  private popper?: Instance;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\n\n  /**\n   * If set, the component will be open by default. This is primarily intended to be used for testing.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * If set, the component will be open by default.\n   */\n  @State() isOpen: boolean;\n\n  /**\n   * Event fired when a menu option is clicked.\n   * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n   */\n  @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n  componentWillLoad() {\n    this.isOpen = !!this.open;\n  }\n\n  componentDidLoad() {\n    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 6]}}]});\n  }\n\n  handleSelectOption(e: any, option: IMenuOption) {\n    e.stopPropagation();\n    this.isOpen = false;\n    this.optionSelected.emit(option);\n    this.hide();\n  }\n\n  // See https://popper.js.org/docs/v2/tutorial/\n  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists\n  showDropdown() {\n    this.isOpen = true;\n    this.dropdownMenu.setAttribute('data-show', '');\n    this.dropdownMenu.removeAttribute('aria-hidden');\n\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n    }));\n\n    this.popper?.update();\n  }\n\n  handleHideDropdown(e: any) {\n    if (e?.target?.localName === 'button' && e?.target?.className === 'arrow') {\n      // This event is fired when a menu element is clicked because the button \"loses focus\" then too\n      return;\n    }\n\n    this.hide();\n  }\n\n  toggleDropdown(e: any) {\n    e.stopPropagation();\n\n    if (this.isOpen) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.isOpen = false;\n    this.dropdownMenu.removeAttribute('data-show');\n    this.dropdownMenu.setAttribute('aria-hidden', 'true');\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n    }));\n  }\n\n  render() {\n    return (\n      <Host class={{storybook: !!window?.['STORYBOOK_ENV'], open: !!this.isOpen}}>\n        <button\n          class=\"arrow\"\n          innerHTML={SortDown}\n          aria-label=\"Open Menu\"\n          onClick={e => this.toggleDropdown(e)}\n          onBlur={e => this.handleHideDropdown(e)}\n          ref={el => (this.dropdownButton = el as HTMLButtonElement)}\n        />\n\n        <div class=\"items\" aria-hidden={!this.open} ref={el => (this.dropdownMenu = el as HTMLDivElement)}>\n          {this.options?.map(option => (\n            <button onClick={e => this.handleSelectOption(e, option)} class=\"option\" disabled={option.disabled}>\n              {option.label}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\n// See https://www.kallmanation.com/styling-a-checkbox-with-only-css\nverdocs-field-checkbox {\n  font-family: $verdocs-primary-font;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    content: '';\n    position: absolute;\n    display: block;\n    top: 1px;\n    left: 1px;\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\n    background: $verdocs-grey-3;\n    border: 1px solid rgba(0, 0, 0, 0.7);\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  &.required {\n    label > input[type='checkbox'] + *::before {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Documents/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-checkbox',\n  styleUrl: 'verdocs-field-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldCheckbox {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * The index of the settings option this particular checkbox is for\n   */\n  @Prop() option: number = 0;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<{option: number; value: boolean}>;\n\n  handleChange(e: any) {\n    this.fieldChange.emit({option: this.option, value: e.target.checked});\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const option = settings.options?.[this.option] ?? {checked: false};\n\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <label>\n          <input type=\"checkbox\" tabIndex={settings.order} checked={option.checked} disabled={disabled} required={settings.required} onChange={e => this.handleChange(e)} />\n          <span />\n        </label>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio-button {\n  font-family: $verdocs-primary-font;\n  width: 14px;\n  height: 14px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n\n    + label {\n      &:before {\n        content: '';\n        background: $verdocs-grey-3;\n        border-radius: 100%;\n        border: 1px solid rgba(0, 0, 0, 0.6);\n        display: inline-block;\n        width: 10px;\n        height: 10px;\n        position: absolute;\n        left: 1px;\n        top: 1px;\n        cursor: pointer;\n        text-align: center;\n        transition: all 250ms ease;\n      }\n    }\n\n    &:checked {\n      + label {\n        &:before {\n          background-color: $verdocs-green;\n          box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n        }\n      }\n    }\n\n    &:focus {\n      + label {\n        &:before {\n          outline: none;\n          border-color: $verdocs-green;\n        }\n      }\n    }\n\n    &:disabled {\n      + label {\n        &:before {\n          box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n          border-color: darken($verdocs-grey-3, 25%);\n          background: darken($verdocs-grey-3, 25%);\n        }\n      }\n    }\n\n    + label {\n      &:empty {\n        &:before {\n          margin-right: 0;\n        }\n      }\n    }\n  }\n\n  &.required {\n    input[type='radio'] {\n      + label {\n        &:before {\n          border: 1px solid $verdocs-red-1;\n        }\n      }\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Documents/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a radio button.\n */\n@Component({\n  tag: 'verdocs-field-radio-button',\n  styleUrl: 'verdocs-field-radio-button.scss',\n  shadow: false,\n})\nexport class VerdocsFieldRadioButton {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * The index of the settings option this particular checkbox is for\n   */\n  @Prop() option: number = 0;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<{option: number; value: boolean}>;\n\n  handleChange(e: any) {\n    console.log('changed', e);\n    this.fieldChange.emit({option: this.option, value: e.target.checked});\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <input\n          type=\"radio\"\n          tabIndex={settings.order}\n          value={settings.value}\n          name={settings.name}\n          id={`${settings.name}=${settings.value}`}\n          checked={settings.checked}\n          disabled={disabled}\n          required={settings.required}\n          onChange={e => this.handleChange(e)}\n        />\n        <label htmlFor={`${settings.name}=${settings.value}`} />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx","src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.scss?tag=verdocs-field-checkbox","src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.tsx","src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.scss?tag=verdocs-field-radio-button","src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.tsx"],"names":["verdocsDropdownCss","VerdocsDropdown","class_1","prototype","componentWillLoad","componentDidLoad","this","popper","createPopper","dropdownButton","dropdownMenu","placement","modifiers","name","options","offset","handleSelectOption","e","option","stopPropagation","optionSelected","emit","hide","showDropdown","setAttribute","removeAttribute","_a","setOptions","__assign","__spreadArray","enabled","_b","update","handleHideDropdown","target","localName","className","toggleDropdown","isOpen","render","_this","h","Host","class","storybook","window","open","innerHTML","SortDown","aria-label","onClick","onBlur","ref","el","aria-hidden","map","disabled","label","verdocsFieldCheckboxCss","VerdocsFieldCheckbox","settings","getFieldSettings","field","checked","_d","_c","required","type","tabIndex","order","verdocsFieldRadioButtonCss","VerdocsFieldRadioButton","handleChange","console","log","fieldChange","value","id","concat","onChange","htmlFor"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-dropdown {\n  font-family: $primary-font;\n  display: block;\n\n  .arrow {\n    width: 32px;\n    height: 26px;\n    background: #fff;\n    cursor: pointer;\n    border-radius: 4px;\n    align-items: center;\n    display: inline-flex;\n    border: 1px solid $light-border-color;\n    justify-content: center;\n  }\n\n  .arrow svg {\n    fill: $primary-color;\n    transition: 0.3s;\n  }\n\n  .items {\n    width: 200px;\n    display: none;\n    z-index: 10000;\n    border-radius: 5px;\n    background: $medium-bg;\n    border: 1px solid $item-border-color;\n  }\n\n  .items[data-show] {\n    display: block;\n  }\n\n  .option {\n    width: 100%;\n    color: #fff;\n    border: none;\n    display: block;\n    text-align: left;\n    background: none;\n    padding: 10px 20px;\n  }\n\n  .option:hover {\n    cursor: pointer;\n    background: $primary-color;\n  }\n\n  .option[disabled] {\n    color: $light-disabled-color;\n  }\n\n  .option[disabled]:hover {\n    color: $light-disabled-color;\n    cursor: inherit;\n    background: transparent;\n  }\n\n  &.open {\n    .items {\n      display: block;\n    }\n\n    .arrow {\n      background: $secondary-color;\n      border: 1px solid $border-color;\n    }\n\n    .arrow svg {\n      transform: scaleY(-1);\n      fill: #fff;\n    }\n  }\n}\n","import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport SortDown from './down-arrow.svg';\n\nexport interface IMenuOption {\n  label: string;\n  id?: any;\n  faIcon?: any;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected.\n *\n * ```html\n * <verdocs-dropdown\n *   options={[\n *     {label: 'Option 1', disabled: true},\n *     {label: 'Option 2', id: '2'}\n*    ]}\n *   label=\"OK\" onClick={() => (console.log('OK clicked'))}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  private dropdownButton?: HTMLButtonElement;\n  private dropdownMenu?: HTMLDivElement;\n  private popper?: Instance;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\n\n  /**\n   * If set, the component will be open by default. This is primarily intended to be used for testing.\n   */\n  // @Prop() open: boolean;\n\n  /**\n   * If set, the component will be open by default.\n   */\n  @State() isOpen: boolean;\n\n  /**\n   * Event fired when a menu option is clicked.\n   * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n   */\n  @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n  componentWillLoad() {\n    // this.isOpen = !!this.open;\n  }\n\n  componentDidLoad() {\n    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 6]}}]});\n  }\n\n  handleSelectOption(e: any, option: IMenuOption) {\n    e.stopPropagation();\n    // this.isOpen = false;\n    this.optionSelected.emit(option);\n    this.hide();\n  }\n\n  // See https://popper.js.org/docs/v2/tutorial/\n  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists\n  showDropdown() {\n    // this.isOpen = true;\n    this.dropdownMenu.setAttribute('data-show', '');\n    this.dropdownMenu.removeAttribute('aria-hidden');\n\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n    }));\n\n    this.popper?.update();\n  }\n\n  handleHideDropdown(e: any) {\n    if (e?.target?.localName === 'button' && e?.target?.className === 'arrow') {\n      // This event is fired when a menu element is clicked because the button \"loses focus\" then too\n      return;\n    }\n\n    this.hide();\n  }\n\n  toggleDropdown(e: any) {\n    e.stopPropagation();\n\n    if (this.isOpen) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.isOpen = false;\n    this.dropdownMenu.removeAttribute('data-show');\n    this.dropdownMenu.setAttribute('aria-hidden', 'true');\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n    }));\n  }\n\n  render() {\n    return (\n      <Host class={{storybook: !!window?.['STORYBOOK_ENV'], open: !!this.isOpen}}>\n        <button\n          class=\"arrow\"\n          innerHTML={SortDown}\n          aria-label=\"Open Menu\"\n          onClick={e => this.toggleDropdown(e)}\n          onBlur={e => this.handleHideDropdown(e)}\n          ref={el => (this.dropdownButton = el as HTMLButtonElement)}\n        />\n\n        <div class=\"items\" aria-hidden={!this.isOpen} ref={el => (this.dropdownMenu = el as HTMLDivElement)}>\n          {this.options?.map(option => (\n            <button onClick={e => this.handleSelectOption(e, option)} class=\"option\" disabled={option.disabled}>\n              {option.label}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\n// See https://www.kallmanation.com/styling-a-checkbox-with-only-css\nverdocs-field-checkbox {\n  font-family: $verdocs-primary-font;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    content: '';\n    position: absolute;\n    display: block;\n    top: 1px;\n    left: 1px;\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\n    background: $verdocs-grey-3;\n    border: 1px solid rgba(0, 0, 0, 0.7);\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  &.required {\n    label > input[type='checkbox'] + *::before {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {Component, h, Host, Prop} from '@stencil/core';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a checkbox.\n */\n@Component({\n  tag: 'verdocs-field-checkbox',\n  styleUrl: 'verdocs-field-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldCheckbox {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * The index of the settings option this particular checkbox is for\n   */\n  @Prop() option: number = 0;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const option = settings.options?.[this.option] ?? {checked: false};\n\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <label>\n          <input type=\"checkbox\" tabIndex={settings.order} checked={option.checked} disabled={disabled} required={settings.required} />\n          <span />\n        </label>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio-button {\n  font-family: $verdocs-primary-font;\n  width: 14px;\n  height: 14px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n\n    + label {\n      &:before {\n        content: '';\n        background: $verdocs-grey-3;\n        border-radius: 100%;\n        border: 1px solid rgba(0, 0, 0, 0.6);\n        display: inline-block;\n        width: 10px;\n        height: 10px;\n        position: absolute;\n        left: 1px;\n        top: 1px;\n        cursor: pointer;\n        text-align: center;\n        transition: all 250ms ease;\n      }\n    }\n\n    &:checked {\n      + label {\n        &:before {\n          background-color: $verdocs-green;\n          box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n        }\n      }\n    }\n\n    &:focus {\n      + label {\n        &:before {\n          outline: none;\n          border-color: $verdocs-green;\n        }\n      }\n    }\n\n    &:disabled {\n      + label {\n        &:before {\n          box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n          border-color: darken($verdocs-grey-3, 25%);\n          background: darken($verdocs-grey-3, 25%);\n        }\n      }\n    }\n\n    + label {\n      &:empty {\n        &:before {\n          margin-right: 0;\n        }\n      }\n    }\n  }\n\n  &.required {\n    input[type='radio'] {\n      + label {\n        &:before {\n          border: 1px solid $verdocs-red-1;\n        }\n      }\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a radio button.\n */\n@Component({\n  tag: 'verdocs-field-radio-button',\n  styleUrl: 'verdocs-field-radio-button.scss',\n  shadow: false,\n})\nexport class VerdocsFieldRadioButton {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * The index of the settings option this particular checkbox is for\n   */\n  @Prop() option: number = 0;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<{option: number; value: boolean}>;\n\n  handleChange(e: any) {\n    console.log('changed', e);\n    this.fieldChange.emit({option: this.option, value: e.target.checked});\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <input\n          type=\"radio\"\n          tabIndex={settings.order}\n          value={settings.value}\n          name={settings.name}\n          id={`${settings.name}=${settings.value}`}\n          checked={settings.checked}\n          disabled={disabled}\n          required={settings.required}\n          onChange={e => this.handleChange(e)}\n        />\n        <label htmlFor={`${settings.name}=${settings.value}`} />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/esm-es5/verdocs-field-attachment.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,i){function r(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function a(e){try{l(i.next(e))}catch(e){o(e)}}function s(e){try{l(i["throw"](e))}catch(e){o(e)}}function l(e){e.done?n(e.value):r(e.value).then(a,s)}l((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,r,o,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return l([e,t])}}function l(a){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,r&&(o=a[0]&2?r["return"]:a[0]?r["throw"]||((o=r["return"])&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;if(r=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;r=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){n.label=a[1];break}if(a[0]===6&&n.label<o[1]){n.label=o[1];o=a;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(a);break}if(o[2])n.ops.pop();n.trys.pop();continue}a=t.call(e,n)}catch(e){a=[6,e];r=0}finally{i=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host}from"./index-f78d163d.js";var Paperclip='<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">\n  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />\n</svg>\n';var verdocsFieldAttachmentCss='verdocs-field-attachment{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:24px;height:24px;display:block;font-size:11px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment.disabled{opacity:0.5}verdocs-field-attachment.disabled span{cursor:inherit}verdocs-field-attachment span{width:20px;cursor:pointer}verdocs-field-attachment.required span{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}';var VerdocsFieldAttachment=function(){function e(e){registerInstance(this,e);this.fieldChange=createEvent(this,"fieldChange",7);this.field=null;this.recipient=undefined;this.disabled=false}e.prototype.focusField=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.handleShow();return[2]}))}))};e.prototype.handleShow=function(){var e=this;this.dialog=document.createElement("verdocs-upload-dialog");this.dialog.open=true;this.dialog.addEventListener("cancel",(function(){var t;return(t=e.dialog)===null||t===void 0?void 0:t.remove()}));document.addEventListener("done",(function(){var t;return(t=e.dialog)===null||t===void 0?void 0:t.remove()}));document.body.append(this.dialog)};e.prototype.render=function(){var e=this;var t,n,i,r;var o={x:0,y:0};if("settings"in this.field&&((t=this.field)===null||t===void 0?void 0:t.settings)){o=this.field.settings}else if("setting"in this.field&&((n=this.field)===null||n===void 0?void 0:n.setting)){o=this.field.setting}var a=(r=(i=this.disabled)!==null&&i!==void 0?i:o.disabled)!==null&&r!==void 0?r:false;return h(Host,{class:{required:o.required,disabled:a}},h("span",{innerHTML:Paperclip,onClick:function(){return!a&&e.handleShow()}}))};return e}();VerdocsFieldAttachment.style=verdocsFieldAttachmentCss;export{VerdocsFieldAttachment as verdocs_field_attachment};
+var __awaiter=this&&this.__awaiter||function(e,t,n,i){function r(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function a(e){try{l(i.next(e))}catch(e){o(e)}}function s(e){try{l(i["throw"](e))}catch(e){o(e)}}function l(e){e.done?n(e.value):r(e.value).then(a,s)}l((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,r,o,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return l([e,t])}}function l(a){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,r&&(o=a[0]&2?r["return"]:a[0]?r["throw"]||((o=r["return"])&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;if(r=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;r=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){n.label=a[1];break}if(a[0]===6&&n.label<o[1]){n.label=o[1];o=a;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(a);break}if(o[2])n.ops.pop();n.trys.pop();continue}a=t.call(e,n)}catch(e){a=[6,e];r=0}finally{i=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,h,H as Host}from"./index-f78d163d.js";var verdocsFieldAttachmentCss='verdocs-field-attachment{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:24px;height:24px;display:block;font-size:11px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment.disabled{opacity:0.5}verdocs-field-attachment.disabled span{cursor:inherit}verdocs-field-attachment span{width:20px;cursor:pointer}verdocs-field-attachment.required span{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}';var PaperclipIcon='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>';var VerdocsFieldAttachment=function(){function e(e){registerInstance(this,e);this.field=null;this.recipient=undefined;this.disabled=false}e.prototype.focusField=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.handleShow();return[2]}))}))};e.prototype.handleShow=function(){var e=this;this.dialog=document.createElement("verdocs-upload-dialog");this.dialog.open=true;this.dialog.addEventListener("cancel",(function(){var t;return(t=e.dialog)===null||t===void 0?void 0:t.remove()}));document.addEventListener("done",(function(){var t;return(t=e.dialog)===null||t===void 0?void 0:t.remove()}));document.body.append(this.dialog)};e.prototype.render=function(){var e=this;var t,n,i,r;var o={x:0,y:0};if("settings"in this.field&&((t=this.field)===null||t===void 0?void 0:t.settings)){o=this.field.settings}else if("setting"in this.field&&((n=this.field)===null||n===void 0?void 0:n.setting)){o=this.field.setting}var a=(r=(i=this.disabled)!==null&&i!==void 0?i:o.disabled)!==null&&r!==void 0?r:false;return h(Host,{class:{required:o.required,disabled:a}},h("span",{innerHTML:PaperclipIcon,onClick:function(){return!a&&e.handleShow()}}))};return e}();VerdocsFieldAttachment.style=verdocsFieldAttachmentCss;export{VerdocsFieldAttachment as verdocs_field_attachment};
 //# sourceMappingURL=verdocs-field-attachment.entry.js.map

package/dist/esm-es5/verdocs-field-attachment.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/elements/verdocs-field-attachment/verdocs-field-attachment.scss?tag=verdocs-field-attachment","src/components/elements/verdocs-field-attachment/verdocs-field-attachment.tsx"],"names":["verdocsFieldAttachmentCss","VerdocsFieldAttachment","class_1","prototype","focusField","this","handleShow","_this","dialog","document","createElement","open","addEventListener","_a","remove","body","append","render","settings","x","y","field","_b","setting","disabled","_d","_c","h","Host","class","required","innerHTML","Paperclip","onClick"],"mappings":"21DAAA,IAAMA,0BAA4B,2lBCcrBC,uBAAsB,gHAIuB,4CAU3B,MASbC,EAAAC,UAAAC,WAAN,gGACRC,KAAKC,8BAKPJ,EAAAC,UAAAG,WAAA,WAAA,IAAAC,EAAAF,KACEA,KAAKG,OAASC,SAASC,cAAc,yBACrCL,KAAKG,OAAOG,KAAO,KACnBN,KAAKG,OAAOI,iBAAiB,UAAU,WAAA,IAAAC,EAAM,OAAAA,EAAAN,EAAKC,UAAM,MAAAK,SAAA,OAAA,EAAAA,EAAEC,YAC1DL,SAASG,iBAAiB,QAAQ,WAAA,IAAAC,EAAM,OAAAA,EAAAN,EAAKC,UAAM,MAAAK,SAAA,OAAA,EAAAA,EAAEC,YACrDL,SAASM,KAAKC,OAAOX,KAAKG,SAG5BN,EAAAC,UAAAc,OAAA,WAAA,IAAAV,EAAAF,iBACE,IAAIa,EAA2D,CAACC,EAAG,EAAGC,EAAG,GACzE,GAAI,aAAcf,KAAKgB,SAASR,EAAAR,KAAKgB,SAAK,MAAAR,SAAA,OAAA,EAAAA,EAAEK,UAAU,CACpDA,EAAWb,KAAKgB,MAAMH,cACjB,GAAI,YAAab,KAAKgB,SAASC,EAAAjB,KAAKgB,SAAK,MAAAC,SAAA,OAAA,EAAAA,EAAEC,SAAS,CACzDL,EAAWb,KAAKgB,MAAME,QAGxB,IAAMC,GAAWC,GAAAC,EAAArB,KAAKmB,YAAQ,MAAAE,SAAA,EAAAA,EAAIR,EAASM,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,OACEE,EAACC,KAAI,CAACC,MAAO,CAACC,SAAUZ,EAASY,SAAUN,SAAQA,IACjDG,EAAA,OAAA,CAAMI,UAAWC,UAAWC,QAAS,WAAM,OAACT,GAAYjB,EAAKD,2BAhDlC","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-attachment {\n  font-family: $verdocs-primary-font;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n\n    span {\n      cursor: inherit;\n    }\n  }\n\n  span {\n    width: 20px;\n    cursor: pointer;\n  }\n\n  &.required {\n    span {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {Component, h, Host, Prop, Event, EventEmitter, Method} from '@stencil/core';\nimport {ITemplateField, ITemplateFieldSetting} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IDocumentFieldSettings, IRecipient} from '@verdocs/js-sdk/Documents/Types';\nimport Paperclip from './paperclip.svg';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-attachment',\n  styleUrl: 'verdocs-field-attachment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldAttachment {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  private dialog?: any;\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-upload-dialog');\n    this.dialog.open = true;\n    this.dialog.addEventListener('cancel', () => this.dialog?.remove());\n    document.addEventListener('done', () => this.dialog?.remove());\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    let settings: IDocumentFieldSettings | ITemplateFieldSetting = {x: 0, y: 0};\n    if ('settings' in this.field && this.field?.settings) {\n      settings = this.field.settings;\n    } else if ('setting' in this.field && this.field?.setting) {\n      settings = this.field.setting;\n    }\n\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <span innerHTML={Paperclip} onClick={() => !disabled && this.handleShow()} />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/elements/verdocs-field-attachment/verdocs-field-attachment.scss?tag=verdocs-field-attachment","src/components/elements/verdocs-field-attachment/verdocs-field-attachment.tsx"],"names":["verdocsFieldAttachmentCss","PaperclipIcon","VerdocsFieldAttachment","class_1","prototype","focusField","this","handleShow","_this","dialog","document","createElement","open","addEventListener","_a","remove","body","append","render","settings","x","y","field","_b","setting","disabled","_d","_c","h","Host","class","required","innerHTML","onClick"],"mappings":"4/CAAA,IAAMA,0BAA4B,ulBCIlC,IAAMC,cAAgB,4SAWTC,uBAAsB,6DAIuB,4CAU3B,MAEbC,EAAAC,UAAAC,WAAN,gGACRC,KAAKC,8BAKPJ,EAAAC,UAAAG,WAAA,WAAA,IAAAC,EAAAF,KACEA,KAAKG,OAASC,SAASC,cAAc,yBACrCL,KAAKG,OAAOG,KAAO,KACnBN,KAAKG,OAAOI,iBAAiB,UAAU,WAAA,IAAAC,EAAM,OAAAA,EAAAN,EAAKC,UAAM,MAAAK,SAAA,OAAA,EAAAA,EAAEC,YAC1DL,SAASG,iBAAiB,QAAQ,WAAA,IAAAC,EAAM,OAAAA,EAAAN,EAAKC,UAAM,MAAAK,SAAA,OAAA,EAAAA,EAAEC,YACrDL,SAASM,KAAKC,OAAOX,KAAKG,SAG5BN,EAAAC,UAAAc,OAAA,WAAA,IAAAV,EAAAF,iBACE,IAAIa,EAA2D,CAACC,EAAG,EAAGC,EAAG,GACzE,GAAI,aAAcf,KAAKgB,SAASR,EAAAR,KAAKgB,SAAK,MAAAR,SAAA,OAAA,EAAAA,EAAEK,UAAU,CACpDA,EAAWb,KAAKgB,MAAMH,cACjB,GAAI,YAAab,KAAKgB,SAASC,EAAAjB,KAAKgB,SAAK,MAAAC,SAAA,OAAA,EAAAA,EAAEC,SAAS,CACzDL,EAAWb,KAAKgB,MAAME,QAGxB,IAAMC,GAAWC,GAAAC,EAAArB,KAAKmB,YAAQ,MAAAE,SAAA,EAAAA,EAAIR,EAASM,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,OACEE,EAACC,KAAI,CAACC,MAAO,CAACC,SAAUZ,EAASY,SAAUN,SAAQA,IACjDG,EAAA,OAAA,CAAMI,UAAW/B,cAAegC,QAAS,WAAM,OAACR,GAAYjB,EAAKD,2BAzCtC","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-attachment {\n  font-family: $verdocs-primary-font;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n\n    span {\n      cursor: inherit;\n    }\n  }\n\n  span {\n    width: 20px;\n    cursor: pointer;\n  }\n\n  &.required {\n    span {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {Component, h, Host, Prop, Method} from '@stencil/core';\nimport {ITemplateField, ITemplateFieldSetting} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IDocumentFieldSettings, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-attachment',\n  styleUrl: 'verdocs-field-attachment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldAttachment {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  private dialog?: any;\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-upload-dialog');\n    this.dialog.open = true;\n    this.dialog.addEventListener('cancel', () => this.dialog?.remove());\n    document.addEventListener('done', () => this.dialog?.remove());\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    let settings: IDocumentFieldSettings | ITemplateFieldSetting = {x: 0, y: 0};\n    if ('settings' in this.field && this.field?.settings) {\n      settings = this.field.settings;\n    } else if ('setting' in this.field && this.field?.setting) {\n      settings = this.field.setting;\n    }\n\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <span innerHTML={PaperclipIcon} onClick={() => !disabled && this.handleShow()} />\n      </Host>\n    );\n  }\n}\n"]}