@verdocs/web-sdk 1.9.3 → 1.9.5

package/dist/verdocs-web-sdk/p-eb0a6461.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as o,h as i,H as t}from"./p-ba300de9.js";import{c as d}from"./p-ec26fc38.js";import{g as s}from"./p-7ce27ce2.js";const r=`<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`;const n='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}';const a=class{constructor(i){e(this,i);this.optionSelected=o(this,"optionSelected",7);this.options=[];this.open=undefined;this.isOpen=undefined}componentWillLoad(){this.isOpen=!!this.open}componentDidLoad(){this.popper=d(this.dropdownButton,this.dropdownMenu,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,6]}}]})}handleSelectOption(e){this.isOpen=false;this.optionSelected.emit(e);this.hide()}showDropdown(){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((e=>({...e,modifiers:[...e.modifiers,{name:"eventListeners",enabled:true}]})));(o=this.popper)===null||o===void 0?void 0:o.update()}handleHideDropdown(e){var o,i;if(((o=e===null||e===void 0?void 0:e.target)===null||o===void 0?void 0:o.localName)==="button"&&((i=e===null||e===void 0?void 0:e.target)===null||i===void 0?void 0:i.className)==="arrow"){return}this.hide()}toggleDropdown(){if(this.isOpen){this.hide()}else{this.showDropdown()}}hide(){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((e=>({...e,modifiers:[...e.modifiers,{name:"eventListeners",enabled:false}]})))}render(){var e;return i(t,{class:{storybook:!!(window===null||window===void 0?void 0:window["STORYBOOK_ENV"]),open:!!this.isOpen}},i("button",{class:"arrow",innerHTML:r,"aria-label":"Open Menu",onClick:()=>this.toggleDropdown(),onBlur:e=>this.handleHideDropdown(e),ref:e=>this.dropdownButton=e}),i("div",{class:"items","aria-hidden":!this.open,ref:e=>this.dropdownMenu=e},(e=this.options)===null||e===void 0?void 0:e.map((e=>i("button",{onClick:()=>this.handleSelectOption(e),class:"option",disabled:e.disabled},e.label)))))}};a.style=n;const l='@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}';const c=class{constructor(i){e(this,i);this.fieldChange=o(this,"fieldChange",7);this.field=null;this.recipient=undefined;this.option=0;this.disabled=false}handleChange(e){this.fieldChange.emit({option:this.option,value:e.target.checked})}render(){var e,o,d,r;const n=s(this.field);const a=(o=(e=n.options)===null||e===void 0?void 0:e[this.option])!==null&&o!==void 0?o:{checked:false};const l=(r=(d=this.disabled)!==null&&d!==void 0?d:n.disabled)!==null&&r!==void 0?r:false;return i(t,{class:{required:n.required,disabled:l}},i("label",null,i("input",{type:"checkbox",tabIndex:n.order,checked:a.checked,disabled:l,required:n.required,onChange:e=>this.handleChange(e)}),i("span",null)))}};c.style=l;const p='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}';const b=class{constructor(i){e(this,i);this.fieldChange=o(this,"fieldChange",7);this.field=null;this.recipient=undefined;this.option=0;this.disabled=false}handleChange(e){console.log("changed",e);this.fieldChange.emit({option:this.option,value:e.target.checked})}render(){var e,o;const d=s(this.field);const r=(o=(e=this.disabled)!==null&&e!==void 0?e:d.disabled)!==null&&o!==void 0?o:false;return i(t,{class:{required:d.required,disabled:r}},i("input",{type:"radio",tabIndex:d.order,value:d.value,name:d.name,id:`${d.name}=${d.value}`,checked:d.checked,disabled:r,required:d.required,onChange:e=>this.handleChange(e)}),i("label",{htmlFor:`${d.name}=${d.value}`}))}};b.style=p;export{a as verdocs_dropdown,c as verdocs_field_checkbox,b as verdocs_field_radio_button};
-//# sourceMappingURL=p-eb0a6461.entry.js.map

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

@@ -1 +0,0 @@
-{"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","[object Object]","this","isOpen","open","popper","createPopper","dropdownButton","dropdownMenu","placement","modifiers","name","options","offset","option","optionSelected","emit","hide","setAttribute","removeAttribute","_a","setOptions","enabled","_b","update","e","target","localName","className","showDropdown","h","Host","class","storybook","window","innerHTML","SortDown","aria-label","onClick","toggleDropdown","onBlur","handleHideDropdown","ref","el","aria-hidden","map","handleSelectOption","disabled","label","verdocsFieldCheckboxCss","VerdocsFieldCheckbox","fieldChange","value","checked","settings","getFieldSettings","field","_d","_c","required","type","tabIndex","order","onChange","handleChange","verdocsFieldRadioButtonCss","VerdocsFieldRadioButton","console","log","id","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(option: IMenuOption) {\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() {\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={() => this.toggleDropdown()}\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={() => this.handleSelectOption(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"]}