npm - @verdocs/web-sdk - Versions diffs - 1.9.10 → 1.9.15 - Mend

@verdocs/web-sdk 1.9.10 → 1.9.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (641) hide show

package/dist/collection/components/controls/verdocs-checkbox/verdocs-checkbox.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-checkbox.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-checkbox/verdocs-checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,SAAS,EAAE,kBAAkB;EAC7B,IAAI,EAAE;IACJ,~~OAAO~~,EAAE,~~KAAK~~;~~IACd~~,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,~~GAAG~~;~~IACV~~,QAAQ,EAAE,KAAK;~~GAChB~~;EACD,QAAQ,EAAE;IACR,~~OAAO~~,EAAE;~~MACP~~,MAAM,EAAE,OAAO;MACf,WAAW,EAAE,0GAA0G;KACxH;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,~~OAAO~~,EAAC,EAAE,EAAE,~~CACpE~~,IAAI,CAAA,+BAA+B,OAAO,UAAU,IAAI,WAAW,KAAK,cAAc,QAAQ,WAAW,~~OAAO~~,MAAM,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n title: 'Controls/Checkbox',\n component: 'verdocs-checkbox',\n args: {\n ~~checked~~: ~~false~~,\n name: 'test',\n ~~value~~: '1',\n disabled: false,\n },\n argTypes: {\n ~~onInput~~: {\n action: 'input',\n description: 'Fired when the checkbox is clicked. e.target.checked will indicate the current status (true if checked).',\n },\n },\n} as Meta;\n\nexport const Checkbox = ({checked, name, value, disabled, ~~onInput~~}) =>\n html` <verdocs-checkbox .checked=${checked} .name=${name} .value=${value} .disabled=${disabled} @input=${~~onInput~~} /> `;\n"]}
1	+ {"version":3,"file":"verdocs-checkbox.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-checkbox/verdocs-checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,SAAS,EAAE,kBAAkB;EAC7B,IAAI,EAAE;IACJ,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,GAAG;GACX;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,MAAM,EAAE,OAAO;MACf,WAAW,EAAE,0GAA0G;KACxH;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,EAAE,EAAE,CAChF,IAAI,CAAA,+BAA+B,OAAO,WAAW,KAAK,UAAU,IAAI,WAAW,KAAK,cAAc,QAAQ,WAAW,KAAK,WAAW,KAAK,MAAM,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n title: 'Controls/Checkbox',\n component: 'verdocs-checkbox',\n args: {\n label: 'Sample checkbox',\n name: 'test',\n theme: 'light',\n checked: false,\n disabled: false,\n value: '1',\n },\n argTypes: {\n input: {\n action: 'input',\n description: 'Fired when the checkbox is clicked. e.target.checked will indicate the current status (true if checked).',\n },\n },\n} as Meta;\n\nexport const Checkbox = ({checked, label, name, value, disabled, theme, input}) =>\n html` <verdocs-checkbox .checked=${checked} .label=${label} .name=${name} .value=${value} .disabled=${disabled} .theme=${theme} @input=${input} /> `;\n"]}

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.js CHANGED Viewed

@@ -11,21 +11,30 @@ import SortDown from './down-arrow.svg';
  *   options={[
  *     {label: 'Option 1', disabled: true},
  *     {label: 'Option 2', id: '2'}
-*    ]}
+ *    ]}
  *   label="OK" onClick={() => (console.log('OK clicked'))}
  * />
  * ```
  */
 export class VerdocsDropdown {
   constructor() {
+    // We need to do this to reliably disconnect the click-away listener
+    this.clickListenerSymbol = new AbortController();
     this.options = [];
-    this.isOpen = undefined;
-  }
-  componentWillLoad() {
-    // this.isOpen = !!this.open;
+    this.open = undefined;
   }
   componentDidLoad() {
     this.popper = createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 6] } }] });
+    window.addEventListener('click', this.clickListener.bind(this), { signal: this.clickListenerSymbol.signal });
+  }
+  disconnectedCallback() {
+    this.clickListenerSymbol.abort();
+  }
+  clickListener(e) {
+    const outside = !(e.target == this.el || this.el.contains(e.target));
+    if (outside) {
+      this.hide();
+    }
   }
   handleSelectOption(e, option) {
     e.stopPropagation();
@@ -43,8 +52,8 @@ export class VerdocsDropdown {
     (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
       ...options,
       modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],
-    }));
-    (_b = this.popper) === null || _b === void 0 ? void 0 : _b.update();
+    })).catch(() => { });
+    (_b = this.popper) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
   }
   handleHideDropdown(e) {
     var _a, _b;
@@ -56,7 +65,7 @@ export class VerdocsDropdown {
   }
   toggleDropdown(e) {
     e.stopPropagation();
-    if (this.isOpen) {
+    if (this.open) {
       this.hide();
     }
     else {
@@ -65,17 +74,17 @@ export class VerdocsDropdown {
   }
   hide() {
     var _a;
-    this.isOpen = false;
+    this.open = false;
     this.dropdownMenu.removeAttribute('data-show');
     this.dropdownMenu.setAttribute('aria-hidden', 'true');
     (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
       ...options,
       modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],
-    }));
+    })).catch(() => { });
   }
   render() {
     var _a;
-    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: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), h("div", { class: "items", "aria-hidden": !this.isOpen, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("button", { onClick: e => this.handleSelectOption(e, option), class: "option", disabled: option.disabled }, option.label))))));
+    return (h(Host, { class: { open: !!this.open } }, h("button", { class: "arrow", innerHTML: SortDown, "aria-label": "Open Menu", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("button", { onClick: e => this.handleSelectOption(e, option), class: "option", disabled: option.disabled }, option.label))))));
   }
   static get is() { return "verdocs-dropdown"; }
   static get originalStyleUrls() {
@@ -114,7 +123,7 @@ export class VerdocsDropdown {
   }
   static get states() {
     return {
-      "isOpen": {}
+      "open": {}
     };
   }
   static get events() {
@@ -139,5 +148,6 @@ export class VerdocsDropdown {
         }
       }];
   }
+  static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=verdocs-dropdown.js.map

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-dropdown.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,EAAC,YAAY,EAAW,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAe,MAAM,eAAe,CAAC;~~AAC7E~~,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AASxC;;;;;;;;;;;;;GAaG;AAKH,MAAM,OAAO,eAAe;;~~mBAQO~~,~~EAAE;;;EAkBnC,iBAAiB~~;~~IACf~~,~~6BAA6B;EAC/B~~,CAAC;~~EAED~~,gBAAgB;IACd,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,EAAE,EAAC,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAC,EAAC,CAAC,EAAC,CAAC,CAAC;~~EAC5J~~,CAAC;EAED,kBAAkB,CAAC,CAAM,EAAE,MAAmB;IAC5C,CAAC,CAAC,eAAe,EAAE,CAAC;IACpB,uBAAuB;IACvB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjC,IAAI,CAAC,IAAI,EAAE,CAAC;EACd,CAAC;EAED,8CAA8C;EAC9C,8GAA8G;EAC9G,YAAY;;IACV,sBAAsB;IACtB,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAChD,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;IAEjD,MAAA,IAAI,CAAC,MAAM,~~0CAAE~~,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;~~MAClC~~,GAAG,OAAO;MACV,SAAS,EAAE,CAAC,GAAG,OAAO,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;KAC3E,CAAC,CAAC,CAAC;~~IAEJ~~,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAC;~~EACxB~~,CAAC;EAED,kBAAkB,CAAC,CAAM;;IACvB,IAAI,CAAA,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,0CAAE,SAAS,MAAK,QAAQ,IAAI,CAAA,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,0CAAE,SAAS,MAAK,OAAO,EAAE;MACzE,+FAA+F;MAC/F,OAAO;KACR;IAED,IAAI,CAAC,IAAI,EAAE,CAAC;EACd,CAAC;EAED,cAAc,CAAC,CAAM;IACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpB,IAAI,IAAI,CAAC,~~MAAM~~,EAAE;~~MACf~~,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;SAAM;MACL,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;EACH,CAAC;EAED,IAAI;;IACF,IAAI,CAAC,~~MAAM~~,GAAG,KAAK,CAAC;~~IACpB~~,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IAC/C,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACtD,MAAA,IAAI,CAAC,MAAM,~~0CAAE~~,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;~~MAClC~~,GAAG,OAAO;MACV,SAAS,EAAE,CAAC,GAAG,OAAO,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,KAAK,EAAC,CAAC;KAC5E,CAAC,CAAC,CAAC;~~EACN~~,CAAC;EAED,MAAM;;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,~~SAAS~~,EAAE,CAAC,CAAC,~~CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,eAAe,CAAC,CAAA,EAAE,~~IAAI,~~EAAE,~~CAAC,~~CAAC,~~IAAI,~~CAAC,MAAM,~~EAAC;~~MACxE~~,cACE,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,QAAQ,gBACR,WAAW,EACtB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EACpC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EACvC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAuB,CAAC,GAC1D;MAEF,WAAK,KAAK,EAAC,OAAO,iBAAc,CAAC,IAAI,CAAC,~~MAAM~~,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAoB,CAAC,~~IAChG~~,MAAA,IAAI,CAAC,OAAO,0CAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC3B,cAAQ,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAC/F,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACE,CACD,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["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"]}
1	+ {"version":3,"file":"verdocs-dropdown.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, Element, 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 @Element()\n el: HTMLElement;\n\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 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 @State() open: boolean;\n\n // We need to do this to reliably disconnect the click-away listener\n clickListenerSymbol = new AbortController();\n componentDidLoad() {\n this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 6]}}]});\n\n window.addEventListener('click', this.clickListener.bind(this), {signal: this.clickListenerSymbol.signal});\n }\n\n disconnectedCallback() {\n this.clickListenerSymbol.abort();\n }\n\n clickListener(e: any) {\n const outside = !(e.target == this.el \|\| this.el.contains(e.target));\n if (outside) {\n this.hide();\n }\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\n ?.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n }))\n .catch(() => {});\n\n this.popper?.update().catch(() => {});\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.open) {\n this.hide();\n } else {\n this.showDropdown();\n }\n }\n\n hide() {\n this.open = false;\n this.dropdownMenu.removeAttribute('data-show');\n this.dropdownMenu.setAttribute('aria-hidden', 'true');\n this.popper\n ?.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n }))\n .catch(() => {});\n }\n\n render() {\n return (\n <Host class={{open: !!this.open}}>\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"]}

package/dist/collection/components/controls/verdocs-radio-button/verdocs-radio-button.stories.js CHANGED Viewed

@@ -9,11 +9,11 @@ export default {
     disabled: false,
   },
   argTypes: {
-    onInput: {
+    input: {
       action: 'input',
       description: 'Fired when the radio button is clicked. e.target.checked will always be true, because radio button onChange events are fired only when the radio button is clicked to select it.',
     },
   },
 };
-export const RadioButton = ({ checked, name, value, disabled, onInput }) => html ` <verdocs-radio-button .checked=${checked} .name=${name} .value=${value} .disabled="${disabled}" @input=${onInput} /> `;
+export const RadioButton = ({ checked, name, value, disabled, input }) => html ` <verdocs-radio-button .checked=${checked} .name=${name} .value=${value} .disabled="${disabled}" @input=${input} /> `;
 //# sourceMappingURL=verdocs-radio-button.stories.js.map

package/dist/collection/components/controls/verdocs-radio-button/verdocs-radio-button.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-radio-button.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-radio-button/verdocs-radio-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,SAAS,EAAE,sBAAsB;EACjC,IAAI,EAAE;IACJ,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,KAAK;GAChB;EACD,QAAQ,EAAE;IACR,~~OAAO~~,EAAE;~~MACP~~,MAAM,EAAE,OAAO;MACf,WAAW,EACT,kLAAkL;KACrL;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,~~OAAO~~,EAAC,EAAE,EAAE,~~CACvE~~,IAAI,CAAA,mCAAmC,OAAO,UAAU,IAAI,WAAW,KAAK,eAAe,QAAQ,YAAY,~~OAAO~~,MAAM,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n title: 'Controls/Radio Button',\n component: 'verdocs-radio-button',\n args: {\n checked: false,\n name: 'test',\n value: '1',\n disabled: false,\n },\n argTypes: {\n ~~onInput~~: {\n action: 'input',\n description:\n 'Fired when the radio button is clicked. e.target.checked will always be true, because radio button onChange events are fired only when the radio button is clicked to select it.',\n },\n },\n} as Meta;\n\nexport const RadioButton = ({checked, name, value, disabled, ~~onInput~~}) =>\n html` <verdocs-radio-button .checked=${checked} .name=${name} .value=${value} .disabled=\"${disabled}\" @input=${~~onInput~~} /> `;\n"]}
1	+ {"version":3,"file":"verdocs-radio-button.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-radio-button/verdocs-radio-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,SAAS,EAAE,sBAAsB;EACjC,IAAI,EAAE;IACJ,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,KAAK;GAChB;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,MAAM,EAAE,OAAO;MACf,WAAW,EACT,kLAAkL;KACrL;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAC,EAAE,EAAE,CACrE,IAAI,CAAA,mCAAmC,OAAO,UAAU,IAAI,WAAW,KAAK,eAAe,QAAQ,YAAY,KAAK,MAAM,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n title: 'Controls/Radio Button',\n component: 'verdocs-radio-button',\n args: {\n checked: false,\n name: 'test',\n value: '1',\n disabled: false,\n },\n argTypes: {\n input: {\n action: 'input',\n description:\n 'Fired when the radio button is clicked. e.target.checked will always be true, because radio button onChange events are fired only when the radio button is clicked to select it.',\n },\n },\n} as Meta;\n\nexport const RadioButton = ({checked, name, value, disabled, input}) =>\n html` <verdocs-radio-button .checked=${checked} .name=${name} .value=${value} .disabled=\"${disabled}\" @input=${input} /> `;\n"]}

package/dist/collection/components/controls/verdocs-select-input/verdocs-select-input.stories.js CHANGED Viewed

@@ -12,11 +12,11 @@ export default {
     ],
   },
   argTypes: {
-    onInput: {
+    input: {
       action: 'input',
       description: 'Fired when a new value is selected. e.target.value will contain the selected value.',
     },
   },
 };
-export const SelectInput = ({ type, label, value, placeholder, options, disabled, onInput }) => html `<verdocs-select-input .type=${type} .label=${label} .placeholder=${placeholder} .value=${value} .options=${options} .disabled=${disabled} @input=${onInput} />`;
+export const SelectInput = ({ type, label, value, placeholder, options, disabled, input }) => html `<verdocs-select-input .type=${type} .label=${label} .placeholder=${placeholder} .value=${value} .options=${options} .disabled=${disabled} @input=${input} />`;
 //# sourceMappingURL=verdocs-select-input.stories.js.map

package/dist/collection/components/controls/verdocs-select-input/verdocs-select-input.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-select-input.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-select-input/verdocs-select-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,SAAS,EAAE,sBAAsB;EACjC,IAAI,EAAE;IACJ,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,EAAE;IACT,OAAO,EAAE;MACP,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC;MAC/B,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC;MAC/B,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC;KAChC;GACF;EACD,QAAQ,EAAE;IACR,~~OAAO~~,EAAE;~~MACP~~,MAAM,EAAE,OAAO;MACf,WAAW,EAAE,qFAAqF;KACnG;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,~~OAAO~~,EAAC,EAAE,EAAE,~~CAC3F~~,IAAI,CAAA,+BAA+B,IAAI,WAAW,KAAK,iBAAiB,WAAW,WAAW,KAAK,aAAa,OAAO,cAAc,QAAQ,WAAW,~~OAAO~~,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n title: 'Controls/Select Input',\n component: 'verdocs-select-input',\n args: {\n label: 'Name',\n value: '',\n options: [\n {label: 'Option 1', value: '1'},\n {label: 'Option 2', value: '2'},\n {label: 'Option 3', value: '3'},\n ],\n },\n argTypes: {\n ~~onInput~~: {\n action: 'input',\n description: 'Fired when a new value is selected. e.target.value will contain the selected value.',\n },\n },\n} as Meta;\n\nexport const SelectInput = ({type, label, value, placeholder, options, disabled, ~~onInput~~}) =>\n html`<verdocs-select-input .type=${type} .label=${label} .placeholder=${placeholder} .value=${value} .options=${options} .disabled=${disabled} @input=${~~onInput~~} />`;\n"]}
1	+ {"version":3,"file":"verdocs-select-input.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-select-input/verdocs-select-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,SAAS,EAAE,sBAAsB;EACjC,IAAI,EAAE;IACJ,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,EAAE;IACT,OAAO,EAAE;MACP,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC;MAC/B,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC;MAC/B,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC;KAChC;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,MAAM,EAAE,OAAO;MACf,WAAW,EAAE,qFAAqF;KACnG;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAC,EAAE,EAAE,CACzF,IAAI,CAAA,+BAA+B,IAAI,WAAW,KAAK,iBAAiB,WAAW,WAAW,KAAK,aAAa,OAAO,cAAc,QAAQ,WAAW,KAAK,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n title: 'Controls/Select Input',\n component: 'verdocs-select-input',\n args: {\n label: 'Name',\n value: '',\n options: [\n {label: 'Option 1', value: '1'},\n {label: 'Option 2', value: '2'},\n {label: 'Option 3', value: '3'},\n ],\n },\n argTypes: {\n input: {\n action: 'input',\n description: 'Fired when a new value is selected. e.target.value will contain the selected value.',\n },\n },\n} as Meta;\n\nexport const SelectInput = ({type, label, value, placeholder, options, disabled, input}) =>\n html`<verdocs-select-input .type=${type} .label=${label} .placeholder=${placeholder} .value=${value} .options=${options} .disabled=${disabled} @input=${input} />`;\n"]}

package/dist/collection/components/controls/verdocs-text-input/verdocs-text-input.stories.js CHANGED Viewed

@@ -8,11 +8,11 @@ export default {
     placeholder: 'Enter your name...',
   },
   argTypes: {
-    onInput: {
+    input: {
       action: 'input',
       description: 'Fired for each character entered in the field. e.target.value will contain the current text value.',
     },
   },
 };
-export const TextInput = ({ type, label, value, placeholder, disabled, onInput }) => html `<verdocs-text-input .type=${type} .label=${label} .placeholder=${placeholder} .value=${value} .disabled=${disabled} @input=${onInput} />`;
+export const TextInput = ({ type, label, value, placeholder, disabled, input }) => html `<verdocs-text-input .type=${type} .label=${label} .placeholder=${placeholder} .value=${value} .disabled=${disabled} @input=${input} />`;
 //# sourceMappingURL=verdocs-text-input.stories.js.map

package/dist/collection/components/controls/verdocs-text-input/verdocs-text-input.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-text-input.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-text-input/verdocs-text-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,SAAS,EAAE,oBAAoB;EAC/B,IAAI,EAAE;IACJ,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,EAAE;IACT,WAAW,EAAE,oBAAoB;GAClC;EACD,QAAQ,EAAE;IACR,~~OAAO~~,EAAE;~~MACP~~,MAAM,EAAE,OAAO;MACf,WAAW,EAAE,oGAAoG;KAClH;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,~~OAAO~~,EAAC,EAAE,EAAE,~~CAChF~~,IAAI,CAAA,6BAA6B,IAAI,WAAW,KAAK,iBAAiB,WAAW,WAAW,KAAK,cAAc,QAAQ,WAAW,~~OAAO~~,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n title: 'Controls/Text Input',\n component: 'verdocs-text-input',\n args: {\n label: 'Name',\n value: '',\n placeholder: 'Enter your name...',\n },\n argTypes: {\n ~~onInput~~: {\n action: 'input',\n description: 'Fired for each character entered in the field. e.target.value will contain the current text value.',\n },\n },\n} as Meta;\n\nexport const TextInput = ({type, label, value, placeholder, disabled, ~~onInput~~}) =>\n html`<verdocs-text-input .type=${type} .label=${label} .placeholder=${placeholder} .value=${value} .disabled=${disabled} @input=${~~onInput~~} />`;\n"]}
1	+ {"version":3,"file":"verdocs-text-input.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-text-input/verdocs-text-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,SAAS,EAAE,oBAAoB;EAC/B,IAAI,EAAE;IACJ,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,EAAE;IACT,WAAW,EAAE,oBAAoB;GAClC;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,MAAM,EAAE,OAAO;MACf,WAAW,EAAE,oGAAoG;KAClH;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAC,EAAE,EAAE,CAC9E,IAAI,CAAA,6BAA6B,IAAI,WAAW,KAAK,iBAAiB,WAAW,WAAW,KAAK,cAAc,QAAQ,WAAW,KAAK,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n title: 'Controls/Text Input',\n component: 'verdocs-text-input',\n args: {\n label: 'Name',\n value: '',\n placeholder: 'Enter your name...',\n },\n argTypes: {\n input: {\n action: 'input',\n description: 'Fired for each character entered in the field. e.target.value will contain the current text value.',\n },\n },\n} as Meta;\n\nexport const TextInput = ({type, label, value, placeholder, disabled, input}) =>\n html`<verdocs-text-input .type=${type} .label=${label} .placeholder=${placeholder} .value=${value} .disabled=${disabled} @input=${input} />`;\n"]}

package/dist/collection/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.css CHANGED Viewed

@@ -1,13 +1,7 @@
 verdocs-initial-dialog {
   font-family: "Barlow", sans-serif;
   box-sizing: border-box;
-  display: none;
-}
-verdocs-initial-dialog.open {
-  display: block;
-}
-verdocs-initial-dialog .background-overlay {
-  position: absolute;
+  position: fixed;
   z-index: 10000;
   top: 0;
   left: 0;

package/dist/collection/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.js CHANGED Viewed

@@ -41,23 +41,20 @@ export class VerdocsInitialDialog {
     context.font = `${fontSize}px Dancing Script`;
     context.fillText(this.enteredInitials, this.canvasElement.width / 2, this.canvasElement.height / 2);
   }
-  // We need a separate event handler for clicking the background because it can receive events "through" other child components
-  handleDismiss(e) {
-    e.stopPropagation();
-    if (e.target.className === 'background-overlay') {
-      this.handleCancel();
-    }
-  }
   handleNameChange(e) {
     this.enteredInitials = e.target.value;
   }
-  handleAdopt() {
+  handleCancel(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.cancel.emit();
+  }
+  handleAdopt(e) {
+    e.stopPropagation();
+    e.preventDefault();
     const data = this.canvasElement.toDataURL('image/png');
     this.next.emit(data);
   }
-  handleCancel() {
-    this.cancel.emit();
-  }
   /*
   selColor(hex: string) {
     this.color = hex;
@@ -216,7 +213,7 @@ export class VerdocsInitialDialog {
   }
    */
   render() {
-    return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "heading" }, "Create Your Initial"), h("div", { class: "content" }, h("verdocs-text-input", { placeholder: "Initials...", label: "Initials", value: this.enteredInitials, onInput: e => this.handleNameChange(e) }), h("div", { class: "as-shown" }, "As shown on driver's license or govt. ID card."), this.fontLoaded ? h("canvas", { ref: el => (this.canvasElement = el) }) : h("div", { style: { display: 'none' } }), h("div", { class: "disclaimer" }, "By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), h("div", { class: "buttons" }, h("verdocs-button", { label: "CANCEL", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "Adopt & Sign", onClick: () => this.handleAdopt() })))))));
+    return (h(Host, { onClick: e => this.handleCancel(e) }, h("div", { class: "dialog" }, h("div", { class: "heading" }, "Create Your Initial"), h("div", { class: "content" }, h("verdocs-text-input", { placeholder: "Initials...", label: "Initials", value: this.enteredInitials, onInput: e => this.handleNameChange(e) }), h("div", { class: "as-shown" }, "As shown on driver's license or govt. ID card."), this.fontLoaded ? h("canvas", { ref: el => (this.canvasElement = el) }) : h("div", { style: { display: 'none' } }), h("div", { class: "disclaimer" }, "By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), h("div", { class: "buttons" }, h("verdocs-button", { label: "CANCEL", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "Adopt & Sign", onClick: e => this.handleAdopt(e) }))))));
   }
   static get is() { return "verdocs-initial-dialog"; }
   static get originalStyleUrls() {

package/dist/collection/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-initial-dialog.js","sourceRoot":"","sources":["../../../../src/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, Host, h, Event, EventEmitter, State} from '@stencil/core';\n\n/*\n Display a dialog that allows the user to specify an initials image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their initials with a mouse or tablet.\n /\n@Component({\n tag: 'verdocs-initial-dialog',\n styleUrl: 'verdocs-initial-dialog.scss',\n})\nexport class VerdocsInitialDialog {\n private canvasElement?: HTMLCanvasElement;\n\n /\n Initial signature text\n /\n @Prop() initials: string = '';\n\n /\n Event fired when the initials are adopted.\n /\n @Event({composed: true}) next: EventEmitter<string>;\n\n /\n Event fired when the step is cancelled.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n @State() fontLoaded = false;\n\n @State() enteredInitials: string = '';\n\n @State() mode: string = 'type';\n\n componentWillLoad() {\n this.enteredInitials = this.initials.toUpperCase();\n\n const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n ds.load().then(font => {\n document.fonts.add(font);\n this.fontLoaded = true;\n });\n }\n\n componentDidLoad() {\n this.redrawSignature();\n }\n\n componentDidUpdate() {\n this.redrawSignature();\n }\n\n redrawSignature() {\n if (!this.canvasElement) {\n return;\n }\n\n const canvasWidth = this.canvasElement.width;\n\n const context = this.canvasElement.getContext('2d');\n context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n let fontSize = 100;\n do {\n fontSize -= 2;\n context.font = `${fontSize}px Dancing Script`;\n } while (context.measureText(this.enteredInitials).width > canvasWidth - 32); // 32px padding each side\n\n context.textAlign = 'center';\n context.textBaseline = 'middle';\n context.font = `${fontSize}px Dancing Script`;\n context.fillText(this.enteredInitials, this.canvasElement.width / 2, this.canvasElement.height / 2);\n }\n\n // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n handleDismiss(e: any) {\n e.stopPropagation();\n if (e.target.className === 'background-overlay') {\n this.handleCancel();\n }\n }\n\n handleNameChange(e: any) {\n this.enteredInitials = e.target.value;\n }\n\n handleAdopt() {\n const data = this.canvasElement.toDataURL('image/png');\n this.next.emit(data);\n }\n\n handleCancel() {\n this.cancel.emit();\n }\n\n /\n selColor(hex: string) {\n this.color = hex;\n this.animateDraw();\n }\n\n stopDraw() {\n this.paint = false;\n this.adoptedAndSigned = !this.hasSignature();\n }\n\n draw(e) {\n this.paint = true;\n this.addPoints(e, false);\n this.animateDraw();\n }\n\n recordPoints(e) {\n if (this.paint) {\n this.addPoints(e, true);\n this.animateDraw();\n }\n }\n\n animateDraw() {\n this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n this.canvas.strokeStyle = this.color \|\| '#000000';\n this.canvas.lineJoin = 'round';\n this.canvas.lineWidth = 3;\n\n for (let i = 0; i < this.points.length; i++) {\n this.canvas.beginPath();\n if (this.points[i].drag && i) {\n this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n } else {\n this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n }\n\n this.canvas.lineTo(this.points[i].x, this.points[i].y);\n this.canvas.closePath();\n this.canvas.stroke();\n }\n }\n\n drawCurve(color: string, curve: number) {\n this.canvas.beginPath();\n }\n\n\n\n addPoints(e, drag: boolean) {\n if (window) {\n let x;\n let y;\n e.preventDefault();\n if (e.touches && e.touches.length > 0) {\n x = e.touches[0].clientX;\n } else {\n x = e.clientX;\n }\n\n if (e.touches && e.touches.length > 0) {\n y = e.touches[0].clientY;\n } else {\n y = e.clientY;\n }\n const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n this.points.push({\n x: x - rect.left,\n y: y - rect.top,\n drag: drag\n });\n }\n }\n\n clearPad() {\n this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n this.points = [];\n this.adoptedAndSigned = !this.hasSignature();\n }\n\n async adoptAndSign() {\n try {\n this.adoptedAndSigned = true;\n await this.updateFullName();\n await this.captureSignatureFromCanvas();\n const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n this.handleMode();\n } catch (err) {\n this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n }\n }\n\n handleMode() {\n let currentField;\n switch (this.mode) {\n case 'signerview':\n if (this.signatureMode === 'Signature') {\n this.signatureService.postSignatureBlob().then(result => {\n if (result && result.id && result.url) {\n currentField = this.signatureService.currField;\n this.signatureService.updateSigned(currentField.fName, true);\n this.signatureService.toggleSig(false);\n this.signatureService.setSignatureId(result.id);\n this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n this.eventTracker.createEvent({\n category: 'verdoc',\n action: 'verdoc signed',\n label: `verdoc id: ${this.envelopeId}`\n })\n if (res && res.settings) {\n this.signatureService.setSignatureData(res.settings.base64);\n this.signatureService.setSignatureId(res.settings.signature_id);\n }\n this.snackbarService.dismiss();\n this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n }).catch(err => {\n this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n duration: 3000\n });\n this.adoptedAndSigned = false;\n return err;\n });\n }\n });\n } else {\n this.signatureService.postInitialBlob().then(result => {\n if (result && result.id && result.url) {\n currentField = this.signatureService.currField;\n this.signatureService.updateInitialed(currentField.fName, true);\n this.signatureService.setInitialId(result.id);\n this.signatureService.toggleSig(false);\n this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n if (res && res.settings) {\n this.signatureService.setInitialData(res.settings.base64);\n this.signatureService.setInitialId(res.settings.initial_id);\n }\n this.snackbarService.dismiss();\n this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n }).catch(err => {\n this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n duration: 3000\n });\n this.adoptedAndSigned = false;\n return err;\n });\n }\n });\n }\n break;\n }\n }\n /\n\n render() {\n return (\n <Host>\n <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n <div class=\"dialog\">\n <div class=\"heading\">Create Your Initial</div>\n\n <div class=\"content\">\n <verdocs-text-input placeholder=\"Initials...\" label=\"Initials\" value={this.enteredInitials} onInput={e => this.handleNameChange(e)} />\n <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n {/<div class=\"tabs\">/}\n {/ <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>/}\n {/ Type/}\n {/ </div>/}\n {/ <div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>/}\n {/ Draw/}\n {/ </div>/}\n {/</div>*/}\n\n {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n <div class=\"disclaimer\">\n By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n including legally binding contracts — just the same as a pen-and-paper signature or initial.\n </div>\n\n <div class=\"buttons\">\n <verdocs-button label=\"CANCEL\" variant=\"outline\" onClick={() => this.handleCancel()} />\n <verdocs-button label=\"Adopt & Sign\" onClick={() => this.handleAdopt()} />\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"verdocs-initial-dialog.js","sourceRoot":"","sources":["../../../../src/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, Host, h, Event, EventEmitter, State} from '@stencil/core';\n\n/*\n Display a dialog that allows the user to specify an initials image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their initials with a mouse or tablet.\n /\n@Component({\n tag: 'verdocs-initial-dialog',\n styleUrl: 'verdocs-initial-dialog.scss',\n})\nexport class VerdocsInitialDialog {\n private canvasElement?: HTMLCanvasElement;\n\n /\n Initial signature text\n /\n @Prop() initials: string = '';\n\n /\n Event fired when the initials are adopted.\n /\n @Event({composed: true}) next: EventEmitter<string>;\n\n /\n Event fired when the step is cancelled.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n @State() fontLoaded = false;\n\n @State() enteredInitials: string = '';\n\n @State() mode: string = 'type';\n\n componentWillLoad() {\n this.enteredInitials = this.initials.toUpperCase();\n\n const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n ds.load().then(font => {\n document.fonts.add(font);\n this.fontLoaded = true;\n });\n }\n\n componentDidLoad() {\n this.redrawSignature();\n }\n\n componentDidUpdate() {\n this.redrawSignature();\n }\n\n redrawSignature() {\n if (!this.canvasElement) {\n return;\n }\n\n const canvasWidth = this.canvasElement.width;\n\n const context = this.canvasElement.getContext('2d');\n context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n let fontSize = 100;\n do {\n fontSize -= 2;\n context.font = `${fontSize}px Dancing Script`;\n } while (context.measureText(this.enteredInitials).width > canvasWidth - 32); // 32px padding each side\n\n context.textAlign = 'center';\n context.textBaseline = 'middle';\n context.font = `${fontSize}px Dancing Script`;\n context.fillText(this.enteredInitials, this.canvasElement.width / 2, this.canvasElement.height / 2);\n }\n\n handleNameChange(e: any) {\n this.enteredInitials = e.target.value;\n }\n\n handleCancel(e: any) {\n e.stopPropagation();\n e.preventDefault();\n this.cancel.emit();\n }\n\n handleAdopt(e: any) {\n e.stopPropagation();\n e.preventDefault();\n const data = this.canvasElement.toDataURL('image/png');\n this.next.emit(data);\n }\n\n /\n selColor(hex: string) {\n this.color = hex;\n this.animateDraw();\n }\n\n stopDraw() {\n this.paint = false;\n this.adoptedAndSigned = !this.hasSignature();\n }\n\n draw(e) {\n this.paint = true;\n this.addPoints(e, false);\n this.animateDraw();\n }\n\n recordPoints(e) {\n if (this.paint) {\n this.addPoints(e, true);\n this.animateDraw();\n }\n }\n\n animateDraw() {\n this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n this.canvas.strokeStyle = this.color \|\| '#000000';\n this.canvas.lineJoin = 'round';\n this.canvas.lineWidth = 3;\n\n for (let i = 0; i < this.points.length; i++) {\n this.canvas.beginPath();\n if (this.points[i].drag && i) {\n this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n } else {\n this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n }\n\n this.canvas.lineTo(this.points[i].x, this.points[i].y);\n this.canvas.closePath();\n this.canvas.stroke();\n }\n }\n\n drawCurve(color: string, curve: number) {\n this.canvas.beginPath();\n }\n\n\n\n addPoints(e, drag: boolean) {\n if (window) {\n let x;\n let y;\n e.preventDefault();\n if (e.touches && e.touches.length > 0) {\n x = e.touches[0].clientX;\n } else {\n x = e.clientX;\n }\n\n if (e.touches && e.touches.length > 0) {\n y = e.touches[0].clientY;\n } else {\n y = e.clientY;\n }\n const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n this.points.push({\n x: x - rect.left,\n y: y - rect.top,\n drag: drag\n });\n }\n }\n\n clearPad() {\n this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n this.points = [];\n this.adoptedAndSigned = !this.hasSignature();\n }\n\n async adoptAndSign() {\n try {\n this.adoptedAndSigned = true;\n await this.updateFullName();\n await this.captureSignatureFromCanvas();\n const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n this.handleMode();\n } catch (err) {\n this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n }\n }\n\n handleMode() {\n let currentField;\n switch (this.mode) {\n case 'signerview':\n if (this.signatureMode === 'Signature') {\n this.signatureService.postSignatureBlob().then(result => {\n if (result && result.id && result.url) {\n currentField = this.signatureService.currField;\n this.signatureService.updateSigned(currentField.fName, true);\n this.signatureService.toggleSig(false);\n this.signatureService.setSignatureId(result.id);\n this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n this.eventTracker.createEvent({\n category: 'verdoc',\n action: 'verdoc signed',\n label: `verdoc id: ${this.envelopeId}`\n })\n if (res && res.settings) {\n this.signatureService.setSignatureData(res.settings.base64);\n this.signatureService.setSignatureId(res.settings.signature_id);\n }\n this.snackbarService.dismiss();\n this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n }).catch(err => {\n this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n duration: 3000\n });\n this.adoptedAndSigned = false;\n return err;\n });\n }\n });\n } else {\n this.signatureService.postInitialBlob().then(result => {\n if (result && result.id && result.url) {\n currentField = this.signatureService.currField;\n this.signatureService.updateInitialed(currentField.fName, true);\n this.signatureService.setInitialId(result.id);\n this.signatureService.toggleSig(false);\n this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n if (res && res.settings) {\n this.signatureService.setInitialData(res.settings.base64);\n this.signatureService.setInitialId(res.settings.initial_id);\n }\n this.snackbarService.dismiss();\n this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n }).catch(err => {\n this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n duration: 3000\n });\n this.adoptedAndSigned = false;\n return err;\n });\n }\n });\n }\n break;\n }\n }\n /\n\n render() {\n return (\n <Host onClick={e => this.handleCancel(e)}>\n <div class=\"dialog\">\n <div class=\"heading\">Create Your Initial</div>\n\n <div class=\"content\">\n <verdocs-text-input placeholder=\"Initials...\" label=\"Initials\" value={this.enteredInitials} onInput={e => this.handleNameChange(e)} />\n <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n {/<div class=\"tabs\">/}\n {/ <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>/}\n {/ Type/}\n {/ </div>/}\n {/ <div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>/}\n {/ Draw/}\n {/ </div>/}\n {/</div>*/}\n\n {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n <div class=\"disclaimer\">\n By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n including legally binding contracts — just the same as a pen-and-paper signature or initial.\n </div>\n\n <div class=\"buttons\">\n <verdocs-button label=\"CANCEL\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n <verdocs-button label=\"Adopt & Sign\" onClick={e => this.handleAdopt(e)} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.css CHANGED Viewed

@@ -26,9 +26,9 @@ verdocs-ok-dialog .heading {
   display: flex;
   font-size: 16px;
   flex-direction: row;
-  background: #444444;
   padding: 8px 16px;
   color: #ffffff;
+  background: #46497d;
 }
 verdocs-ok-dialog .content {
   font-size: 16px;

package/dist/collection/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.css CHANGED Viewed

@@ -1,7 +1,7 @@
 verdocs-signature-dialog {
   font-family: "Barlow", sans-serif;
   box-sizing: border-box;
-  position: absolute;
+  position: fixed;
   z-index: 10000;
   top: 0;
   left: 0;
@@ -18,7 +18,7 @@ verdocs-signature-dialog .dialog {
   border-radius: 4px;
   overflow: hidden;
   box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);
-  background: #f5f5fa;
+  background: #f9f9f9;
 }
 verdocs-signature-dialog .heading {
   display: flex;

package/dist/collection/components/elements/verdocs-document-page/verdocs-document-page.js CHANGED Viewed

@@ -63,13 +63,10 @@ export class VerdocsDocumentPage {
   }
   render() {
     const height = `${this.renderedHeight}px`;
-    return (h(Host, { id: `${this.containerId}`, style: { height } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : (h("img", { class: "verdocs-document-page-layer img", id: `${this.containerId}-${layer.name}`,
-      // style={{height}}
-      src: this.pageImageUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, onLoad: (e) => {
+    return (h(Host, { id: `${this.containerId}`, style: { height } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : (h("img", { class: "verdocs-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageImageUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, onLoad: (e) => {
         this.naturalWidth = e.target.naturalWidth;
         this.naturalHeight = e.target.naturalHeight;
         this.aspectRatio = this.naturalWidth / this.naturalHeight;
-        console.log('[DOCPAGE] Loaded dimensions', { width: this.naturalWidth, height: this.naturalHeight, aspectRatio: this.aspectRatio });
       } })))));
   }
   static get is() { return "verdocs-document-page"; }

package/dist/collection/components/elements/verdocs-document-page/verdocs-document-page.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-document-page.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-document-page/verdocs-document-page.tsx"],"names":[],"mappings":"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~~;MACvC~~,~~mBAAmB;MACnB~~,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,GAAG,EAAE,QAAQ,IAAI,CAAC,UAAU,EAAE,iBACjB,IAAI,EACjB,MAAM,EAAE,CAAC,CAAM,EAAE,EAAE;QACjB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC;QAC1C,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC;QAC5C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC;~~QAC1D~~,~~OAAO,~~CAAC,~~GAAG,CAAC,6BAA6B,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,CAAC,aAAa,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAC,CAAC,CAAC;MACpI,CAAC,~~GACD,CACH,CACF,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\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-document-page',\n styleUrl: 'verdocs-document-page.scss',\n shadow: false,\n})\nexport class VerdocsDocumentPage {\n @Element() container: HTMLElement;\n private resizeObserver: ResizeObserver;\n\n /\n The URL of the image to render as the page background.\n /\n @Prop() pageImageUri: string = '';\n\n /\n The page number being rendered. Not used internally, but included in callbacks/events beacuse page numbers\n * are used everywhere in document handling. (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() 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\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\n @State() skipFirstNotification = true;\n\n componentDidLoad(): void {\n this.resizeObserver = new ResizeObserver(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 });\n\n this.resizeObserver.observe(this.container);\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.\n // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.\n // componentDidRender() {\n // this.notifyRenderedSize();\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 this.pageRendered.emit({\n container: this.container,\n containerId: this.containerId,\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 xScale: this.renderedWidth / this.naturalWidth,\n yScale: this.renderedHeight / this.naturalHeight,\n });\n }\n\n render() {\n const height = `${this.renderedHeight}px`;\n\n return (\n <Host id={`${this.containerId}`} style={{height}}>\n {this.layers.map(layer =>\n layer.type === 'div' ? (\n <div class=\"verdocs-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}} />\n ) : (\n <img\n class=\"verdocs-document-page-layer img\"\n id={`${this.containerId}-${layer.name}`}\n ~~// style={{height}}\n~~ src={this.pageImageUri}\n alt={`Page ${this.pageNumber}`}\n aria-hidden={true}\n onLoad={(e: any) => {\n this.naturalWidth = e.target.naturalWidth;\n this.naturalHeight = e.target.naturalHeight;\n this.aspectRatio = this.naturalWidth / this.naturalHeight;\n ~~console.log('[DOCPAGE] Loaded dimensions', {width: this.naturalWidth, height: this.naturalHeight, aspectRatio: this.aspectRatio});\n~~ }}\n />\n ),\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"verdocs-document-page.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-document-page/verdocs-document-page.tsx"],"names":[],"mappings":"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","sourcesContent":["// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\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-document-page',\n styleUrl: 'verdocs-document-page.scss',\n shadow: false,\n})\nexport class VerdocsDocumentPage {\n @Element() container: HTMLElement;\n private resizeObserver: ResizeObserver;\n\n /\n The URL of the image to render as the page background.\n /\n @Prop() pageImageUri: string = '';\n\n /\n The page number being rendered. Not used internally, but included in callbacks/events beacuse page numbers\n * are used everywhere in document handling. (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() 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\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\n @State() skipFirstNotification = true;\n\n componentDidLoad(): void {\n this.resizeObserver = new ResizeObserver(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 });\n\n this.resizeObserver.observe(this.container);\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.\n // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.\n // componentDidRender() {\n // this.notifyRenderedSize();\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 this.pageRendered.emit({\n container: this.container,\n containerId: this.containerId,\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 xScale: this.renderedWidth / this.naturalWidth,\n yScale: this.renderedHeight / this.naturalHeight,\n });\n }\n\n render() {\n const height = `${this.renderedHeight}px`;\n\n return (\n <Host id={`${this.containerId}`} style={{height}}>\n {this.layers.map(layer =>\n layer.type === 'div' ? (\n <div class=\"verdocs-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}} />\n ) : (\n <img\n class=\"verdocs-document-page-layer img\"\n id={`${this.containerId}-${layer.name}`}\n src={this.pageImageUri}\n alt={`Page ${this.pageNumber}`}\n aria-hidden={true}\n onLoad={(e: any) => {\n this.naturalWidth = e.target.naturalWidth;\n this.naturalHeight = e.target.naturalHeight;\n this.aspectRatio = this.naturalWidth / this.naturalHeight;\n }}\n />\n ),\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/elements/verdocs-field-attachment/verdocs-field-attachment.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
 const 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>`;
 /**
@@ -7,8 +8,8 @@ const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewB
 export class VerdocsFieldAttachment {
   constructor() {
     this.field = null;
-    this.recipient = undefined;
     this.disabled = false;
+    this.roleIndex = 0;
   }
   async focusField() {
     this.handleShow();
@@ -30,7 +31,8 @@ export class VerdocsFieldAttachment {
       settings = this.field.setting;
     }
     const disabled = (_d = (_c = this.disabled) !== null && _c !== void 0 ? _c : settings.disabled) !== null && _d !== void 0 ? _d : false;
-    return (h(Host, { class: { required: settings.required, disabled } }, h("span", { innerHTML: PaperclipIcon, onClick: () => !disabled && this.handleShow() })));
+    const backgroundColor = this.field['rgba'] || getRGBA(this.roleIndex);
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("span", { innerHTML: PaperclipIcon, onClick: () => !disabled && this.handleShow() })));
   }
   static get is() { return "verdocs-field-attachment"; }
   static get originalStyleUrls() {
@@ -70,43 +72,41 @@ export class VerdocsFieldAttachment {
         },
         "defaultValue": "null"
       },
-      "recipient": {
-        "type": "unknown",
+      "disabled": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "IRecipient",
-          "resolved": "IRecipient",
-          "references": {
-            "IRecipient": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Envelopes/Types"
-            }
-          }
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The recipient completing the form, if known."
-        }
+          "text": "If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "disabled": {
-        "type": "boolean",
+      "roleIndex": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled."
+          "text": "If set, the field will be colored using this index value to select the background color."
         },
-        "attribute": "disabled",
+        "attribute": "role-index",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "0"
       }
     };
   }

package/dist/collection/components/elements/verdocs-field-attachment/verdocs-field-attachment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-field-attachment.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-attachment/verdocs-field-attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;AAI/D,MAAM,aAAa,GAAG,uSAAuS,CAAC;AAE9T;;;GAGG;AAMH,MAAM,OAAO,sBAAsB;;iBAIuB,IAAI~~;;oBAU~~/B,KAAK;;~~EAExB~~,KAAK,CAAC,UAAU;IACxB,IAAI,CAAC,UAAU,EAAE,CAAC;EACpB,CAAC;EAID,UAAU;IACR,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAA,EAAA,CAAC,CAAC;IACpE,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAA,EAAA,CAAC,CAAC;IAC/D,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EACpC,CAAC;EAED,MAAM;;IACJ,IAAI,QAAQ,GAAmD,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,CAAC;IAC5E,IAAI,UAAU,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,CAAA,EAAE;MACpD,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;KAChC;SAAM,IAAI,SAAS,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAA,EAAE;MACzD,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;KAC/B;IAED,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC;~~MAClD~~,YAAM,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,GAAI,CAC5E,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["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"]}
1	+ {"version":3,"file":"verdocs-field-attachment.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-attachment/verdocs-field-attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;AAI/D,MAAM,aAAa,GAAG,uSAAuS,CAAC;AAE9T;;;GAGG;AAMH,MAAM,OAAO,sBAAsB;;iBAIuB,IAAI;oBAK/B,KAAK;qBAKL,CAAC;;EAEpB,KAAK,CAAC,UAAU;IACxB,IAAI,CAAC,UAAU,EAAE,CAAC;EACpB,CAAC;EAID,UAAU;IACR,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAA,EAAA,CAAC,CAAC;IACpE,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAA,EAAA,CAAC,CAAC;IAC/D,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EACpC,CAAC;EAED,MAAM;;IACJ,IAAI,QAAQ,GAAmD,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,CAAC;IAC5E,IAAI,UAAU,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,CAAA,EAAE;MACpD,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;KAChC;SAAM,IAAI,SAAS,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAA,EAAE;MACzD,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;KAC/B;IAED,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEtE,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC;MAC5E,YAAM,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,GAAI,CAC5E,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {Component, h, Host, Prop, Method} from '@stencil/core';\nimport {ITemplateField, ITemplateFieldSetting} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IDocumentFieldSettings} 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 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 If set, the field will be colored using this index value to select the background color.\n */\n @Prop() roleIndex?: number = 0;\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 const backgroundColor = this.field['rgba'] \|\| getRGBA(this.roleIndex);\n\n return (\n <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n <span innerHTML={PaperclipIcon} onClick={() => !disabled && this.handleShow()} />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.css CHANGED Viewed

@@ -21,7 +21,6 @@ verdocs-field-checkbox label > input[type=checkbox] + *::before {
   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 + * {