npm - @verdocs/web-sdk - Versions diffs - 6.5.0-beta.32 → 6.5.0-beta.34 - Mend

@verdocs/web-sdk 6.5.0-beta.32 → 6.5.0-beta.34

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 (204) hide show

package/dist/components/{p-COtqu2dZ.js → p-CMNmfu0F.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CUAGH_8P.js';
-import { b as renderedTextWidth } from './p-IUjGbyAi.js';
+import { b as renderedTextWidth } from './p-Dk8BEvRP.js';
 import { d as defineCustomElement$1 } from './p-CHLvWYEx.js';
 import { c as createPopper } from './p-BfP9ezJQ.js';
@@ -120,6 +120,6 @@ function defineCustomElement() {
 }
 export { VerdocsQuickFilter as V, defineCustomElement as d };
-//# sourceMappingURL=p-COtqu2dZ.js.map
+//# sourceMappingURL=p-CMNmfu0F.js.map
-//# sourceMappingURL=p-COtqu2dZ.js.map
+//# sourceMappingURL=p-CMNmfu0F.js.map

package/dist/components/{p-COtqu2dZ.js.map → p-CMNmfu0F.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-COtqu2dZ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-quick-filter/verdocs-quick-filter.scss?tag=verdocs-quick-filter","src/components/controls/verdocs-quick-filter/verdocs-quick-filter.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-quick-filter {\n position: relative;\n font-family: $primary-font;\n\n .control {\n outline: 0;\n height: 34px;\n display: flex;\n cursor: pointer;\n border-radius: 4px;\n align-items: center;\n flex-direction: row;\n box-sizing: border-box;\n background: $verdocs-grey-4;\n transition: all 100ms ease 0s;\n border: 1px solid $verdocs-bg-1;\n }\n\n .title {\n padding: 0 8px;\n font-size: 14px;\n max-width: 100%;\n overflow: hidden;\n color: $label-color;\n white-space: nowrap;\n box-sizing: border-box;\n text-overflow: ellipsis;\n\n .prefix {\n display: inline;\n font-weight: 700;\n margin: 0 7px 0 0;\n color: $secondary-color;\n }\n }\n\n .arrow {\n width: 32px;\n height: 32px;\n border: none;\n outline: none;\n cursor: pointer;\n align-items: center;\n display: inline-flex;\n justify-content: center;\n background: $verdocs-grey-4;\n transition: color 150ms ease 0s;\n\n svg {\n transition: 0.3s;\n fill: $verdocs-bg-1;\n }\n }\n\n .separator {\n width: 1px;\n display: block;\n margin-top: 8px;\n margin-bottom: 8px;\n align-self: stretch;\n box-sizing: border-box;\n background-color: $verdocs-bg-1;\n }\n\n .items {\n display: none;\n z-index: 10000;\n position: absolute;\n border-radius: 4px;\n background: $verdocs-grey-4;\n box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 11px;\n }\n\n .items[data-show] {\n display: block;\n }\n\n .option {\n width: 100%;\n border: none;\n display: block;\n font-size: 14px;\n text-align: left;\n background: none;\n padding: 10px 20px;\n color: $verdocs-bg-5;\n }\n\n .option:hover {\n cursor: pointer;\n background: #4c56cb3f;\n }\n\n .option[disabled] {\n color: $light-disabled-color;\n }\n\n .option[disabled]:hover {\n cursor: inherit;\n background: transparent;\n color: $light-disabled-color;\n }\n\n &.open {\n .items {\n display: block;\n }\n\n .arrow svg {\n transform: scaleY(-1);\n }\n }\n}\n","import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, Element, State, h, Event, EventEmitter} from '@stencil/core';\nimport {renderedTextWidth} from '../../../utils/utils';\n\nconst DropdownArrow = `<svg height=\"20\" width=\"20\" viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\" class=\"css-8mmkcg\"><path d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"></path></svg>`;\n\nexport interface IFilterOption {\n value: string;\n label: string;\n disabled?: boolean;\n}\n\n/*\n Display a drop-down menu of quick filter options.\n \n ```ts\n * <verdocs-quick-filter options={[...options]} value={1} label=\"Filter\" placeholder=\"All\" />\n * ```\n /\n@Component({\n tag: 'verdocs-quick-filter',\n styleUrl: 'verdocs-quick-filter.scss',\n})\nexport class VerdocsQuickFilter {\n @Element()\n el: HTMLElement;\n\n private dropdownButton?: HTMLElement;\n private dropdownMenu?: HTMLDivElement;\n private popper?: Instance;\n\n /\n The menu options to display.\n /\n @Prop() options: IFilterOption[] = [];\n\n @Prop()\n label: string = 'Filter';\n\n @Prop({reflect: true, mutable: true})\n value: string = '';\n\n @Prop()\n placeholder: string = 'Select...';\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<IFilterOption>;\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: [-1, 14]}}]});\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: IFilterOption) {\n e.stopPropagation();\n this.optionSelected.emit(option);\n this.value = option.value;\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.open = 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 const selectedOption = this.options?.find(option => option.value === this.value);\n const longestOption = this.options?.reduce((prev, curr) => (prev.label.length > curr.label.length ? prev : curr));\n const longestLabelWidth = renderedTextWidth(longestOption?.label \|\| 'FILLER', '14px Inter, Barlow, sans-serif');\n const prefixWidth = renderedTextWidth(this.label, '14px Inter, Barlow, sans-serif');\n const minWidth = `${longestLabelWidth + prefixWidth + 40}px`;\n\n return (\n <Host class={{open: !!this.open}} style={{minWidth, display: 'inline-block'}}>\n <div class=\"control\" onClick={e => this.toggleDropdown(e)} onBlur={e => this.handleHideDropdown(e)}>\n <div class=\"title\" ref={el => (this.dropdownButton = el as HTMLElement)}>\n <span class=\"prefix\">{this.label}:</span>\n {selectedOption ? selectedOption.label : this.placeholder}\n </div>\n\n <div style={{flex: '1'}} />\n\n <div class=\"separator\" />\n\n <div class=\"arrow\" innerHTML={DropdownArrow} aria-label=\"Open Menu\" />\n </div>\n\n <div class=\"items\" aria-hidden={!this.open} ref={el => (this.dropdownMenu = el as HTMLDivElement)} style={{minWidth}}>\n {this.options?.map(option =>\n option.label ? (\n <button onClick={e => this.handleSelectOption(e, option)} class={`option ${option.value === this.value ? 'selected' : ''}`} disabled={option.disabled}>\n {option.label}\n </button>\n ) : (\n <div class=\"separator\" />\n ),\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-CMNmfu0F.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-quick-filter/verdocs-quick-filter.scss?tag=verdocs-quick-filter","src/components/controls/verdocs-quick-filter/verdocs-quick-filter.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-quick-filter {\n position: relative;\n font-family: $primary-font;\n\n .control {\n outline: 0;\n height: 34px;\n display: flex;\n cursor: pointer;\n border-radius: 4px;\n align-items: center;\n flex-direction: row;\n box-sizing: border-box;\n background: $verdocs-grey-4;\n transition: all 100ms ease 0s;\n border: 1px solid $verdocs-bg-1;\n }\n\n .title {\n padding: 0 8px;\n font-size: 14px;\n max-width: 100%;\n overflow: hidden;\n color: $label-color;\n white-space: nowrap;\n box-sizing: border-box;\n text-overflow: ellipsis;\n\n .prefix {\n display: inline;\n font-weight: 700;\n margin: 0 7px 0 0;\n color: $secondary-color;\n }\n }\n\n .arrow {\n width: 32px;\n height: 32px;\n border: none;\n outline: none;\n cursor: pointer;\n align-items: center;\n display: inline-flex;\n justify-content: center;\n background: $verdocs-grey-4;\n transition: color 150ms ease 0s;\n\n svg {\n transition: 0.3s;\n fill: $verdocs-bg-1;\n }\n }\n\n .separator {\n width: 1px;\n display: block;\n margin-top: 8px;\n margin-bottom: 8px;\n align-self: stretch;\n box-sizing: border-box;\n background-color: $verdocs-bg-1;\n }\n\n .items {\n display: none;\n z-index: 10000;\n position: absolute;\n border-radius: 4px;\n background: $verdocs-grey-4;\n box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 11px;\n }\n\n .items[data-show] {\n display: block;\n }\n\n .option {\n width: 100%;\n border: none;\n display: block;\n font-size: 14px;\n text-align: left;\n background: none;\n padding: 10px 20px;\n color: $verdocs-bg-5;\n }\n\n .option:hover {\n cursor: pointer;\n background: #4c56cb3f;\n }\n\n .option[disabled] {\n color: $light-disabled-color;\n }\n\n .option[disabled]:hover {\n cursor: inherit;\n background: transparent;\n color: $light-disabled-color;\n }\n\n &.open {\n .items {\n display: block;\n }\n\n .arrow svg {\n transform: scaleY(-1);\n }\n }\n}\n","import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, Element, State, h, Event, EventEmitter} from '@stencil/core';\nimport {renderedTextWidth} from '../../../utils/utils';\n\nconst DropdownArrow = `<svg height=\"20\" width=\"20\" viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\" class=\"css-8mmkcg\"><path d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"></path></svg>`;\n\nexport interface IFilterOption {\n value: string;\n label: string;\n disabled?: boolean;\n}\n\n/*\n Display a drop-down menu of quick filter options.\n \n ```ts\n * <verdocs-quick-filter options={[...options]} value={1} label=\"Filter\" placeholder=\"All\" />\n * ```\n /\n@Component({\n tag: 'verdocs-quick-filter',\n styleUrl: 'verdocs-quick-filter.scss',\n})\nexport class VerdocsQuickFilter {\n @Element()\n el: HTMLElement;\n\n private dropdownButton?: HTMLElement;\n private dropdownMenu?: HTMLDivElement;\n private popper?: Instance;\n\n /\n The menu options to display.\n /\n @Prop() options: IFilterOption[] = [];\n\n @Prop()\n label: string = 'Filter';\n\n @Prop({reflect: true, mutable: true})\n value: string = '';\n\n @Prop()\n placeholder: string = 'Select...';\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<IFilterOption>;\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: [-1, 14]}}]});\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: IFilterOption) {\n e.stopPropagation();\n this.optionSelected.emit(option);\n this.value = option.value;\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.open = 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 const selectedOption = this.options?.find(option => option.value === this.value);\n const longestOption = this.options?.reduce((prev, curr) => (prev.label.length > curr.label.length ? prev : curr));\n const longestLabelWidth = renderedTextWidth(longestOption?.label \|\| 'FILLER', '14px Inter, Barlow, sans-serif');\n const prefixWidth = renderedTextWidth(this.label, '14px Inter, Barlow, sans-serif');\n const minWidth = `${longestLabelWidth + prefixWidth + 40}px`;\n\n return (\n <Host class={{open: !!this.open}} style={{minWidth, display: 'inline-block'}}>\n <div class=\"control\" onClick={e => this.toggleDropdown(e)} onBlur={e => this.handleHideDropdown(e)}>\n <div class=\"title\" ref={el => (this.dropdownButton = el as HTMLElement)}>\n <span class=\"prefix\">{this.label}:</span>\n {selectedOption ? selectedOption.label : this.placeholder}\n </div>\n\n <div style={{flex: '1'}} />\n\n <div class=\"separator\" />\n\n <div class=\"arrow\" innerHTML={DropdownArrow} aria-label=\"Open Menu\" />\n </div>\n\n <div class=\"items\" aria-hidden={!this.open} ref={el => (this.dropdownMenu = el as HTMLDivElement)} style={{minWidth}}>\n {this.options?.map(option =>\n option.label ? (\n <button onClick={e => this.handleSelectOption(e, option)} class={`option ${option.value === this.value ? 'selected' : ''}`} disabled={option.disabled}>\n {option.label}\n </button>\n ) : (\n <div class=\"separator\" />\n ),\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-B7nY_WEM.js → p-CY-c2d8q.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-CUAGH_8P.js';
 import { VerdocsEndpoint, getTemplateDocumentPageDisplayUri, getTemplate } from '@verdocs/js-sdk';
-import { t as throttle, f as getControlStyles, g as getFieldId } from './p-IUjGbyAi.js';
+import { t as throttle, f as getControlStyles, g as getFieldId } from './p-Dk8BEvRP.js';
 import { S as Store } from './p-bS8INhRF.js';
 import { d as defineCustomElement$n } from './p-CwklHveG.js';
 import { d as defineCustomElement$m } from './p-Bl3Su0mk.js';
@@ -8,14 +8,14 @@ import { d as defineCustomElement$l } from './p-UM5wCODg.js';
 import { d as defineCustomElement$k } from './p-CO3KQG1e.js';
 import { d as defineCustomElement$j } from './p-C0qRY7Gm.js';
 import { d as defineCustomElement$i } from './p-1zwMmY7V.js';
-import { d as defineCustomElement$h } from './p-DR_BGSby.js';
+import { d as defineCustomElement$h } from './p-Dh9AjNdu.js';
 import { d as defineCustomElement$g } from './p-CufGuqmE.js';
 import { d as defineCustomElement$f } from './p-CpcMSzRA.js';
 import { d as defineCustomElement$e } from './p-CwkHIsJM.js';
 import { d as defineCustomElement$d } from './p-C4Zz2HX1.js';
 import { d as defineCustomElement$c } from './p-BXDILz20.js';
-import { d as defineCustomElement$b } from './p-DWZamcQd.js';
-import { d as defineCustomElement$a } from './p-DLKz8oGD.js';
+import { d as defineCustomElement$b } from './p-CeHrzafI.js';
+import { d as defineCustomElement$a } from './p-1PWpeHpK.js';
 import { d as defineCustomElement$9 } from './p-CHLvWYEx.js';
 import { d as defineCustomElement$8 } from './p-BCKfiFng.js';
 import { d as defineCustomElement$7 } from './p-Bt8fO1FH.js';
@@ -234,9 +234,9 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class Verdo
         "editable": [4],
         "disabled": [4],
         "done": [4],
-        "templateId": [1, "template-id"],
-        "documentId": [1, "document-id"],
-        "pageNumber": [2, "page-number"],
+        "templateId": [513, "template-id"],
+        "documentId": [513, "document-id"],
+        "pageNumber": [514, "page-number"],
         "virtualWidth": [2, "virtual-width"],
         "virtualHeight": [1026, "virtual-height"],
         "layers": [16],
@@ -383,6 +383,6 @@ function defineCustomElement() {
 }
 export { VerdocsTemplateDocumentPage as V, defineCustomElement as d };
-//# sourceMappingURL=p-B7nY_WEM.js.map
+//# sourceMappingURL=p-CY-c2d8q.js.map
-//# sourceMappingURL=p-B7nY_WEM.js.map
+//# sourceMappingURL=p-CY-c2d8q.js.map

package/dist/components/p-CY-c2d8q.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/components/{p-DWZamcQd.js → p-CeHrzafI.js} RENAMED Viewed

@@ -13,7 +13,7 @@ import { d as defineCustomElement$3 } from './p-Cd0WoTsM.js';
 import { d as defineCustomElement$2 } from './p-CG5hnDaJ.js';
 import { d as defineCustomElement$1 } from './p-764zY_TM.js';
-const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif);-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;letter-spacing:-0.2px;background-color:var(--verdocs-field-background, transparent);-webkit-transform-origin:bottom left;transform-origin:bottom left;border:var(--verdocs-field-border, 1px solid rgba(0, 0, 0, 0.2));border-radius:var(--verdocs-field-radius)}verdocs-field-textbox .edge-top,verdocs-field-textbox .edge-right,verdocs-field-textbox .edge-left,verdocs-field-textbox .edge-bottom{position:absolute;z-index:10}verdocs-field-textbox .edge-top{top:-2px;left:0;right:0;height:5px}verdocs-field-textbox .edge-right{top:0;bottom:0;right:-2px;width:5px}verdocs-field-textbox .edge-left{top:0;left:-2px;bottom:0;width:5px}verdocs-field-textbox .edge-bottom{bottom:-2px;left:0;right:0;height:5px}verdocs-field-textbox input{cursor:inherit;width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87))}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.disabled input{opacity:0.5}verdocs-field-textbox textarea{cursor:inherit;width:100%;height:100%;resize:none;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;line-height:13px;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87))}verdocs-field-textbox textarea.hide{display:none}verdocs-field-textbox.disabled textarea{opacity:0.5}verdocs-field-textbox label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-textbox.required.required{border:1px solid var(--verdocs-required-field-border)}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}verdocs-field-textbox .settings-icon{position:absolute;top:-4px;left:-18px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-textbox .settings-icon svg{fill:#707ae5}verdocs-field-textbox .settings-icon:hover{opacity:1}";
+const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif);-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;letter-spacing:-0.2px;background-color:var(--verdocs-field-background, transparent);-webkit-transform-origin:bottom left;transform-origin:bottom left;border:var(--verdocs-field-border, 1px solid rgba(0, 0, 0, 0.2));border-radius:var(--verdocs-field-radius)}verdocs-field-textbox.small input,verdocs-field-textbox.small textarea{font-size:8px}verdocs-field-textbox .edge-top,verdocs-field-textbox .edge-right,verdocs-field-textbox .edge-left,verdocs-field-textbox .edge-bottom{position:absolute;z-index:10}verdocs-field-textbox .edge-top{top:-2px;left:0;right:0;height:5px}verdocs-field-textbox .edge-right{top:0;bottom:0;right:-2px;width:5px}verdocs-field-textbox .edge-left{top:0;left:-2px;bottom:0;width:5px}verdocs-field-textbox .edge-bottom{bottom:-2px;left:0;right:0;height:5px}verdocs-field-textbox input{cursor:inherit;width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87))}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.disabled input{opacity:0.5}verdocs-field-textbox textarea{cursor:inherit;width:100%;height:100%;resize:none;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;line-height:13px;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87))}verdocs-field-textbox textarea.hide{display:none}verdocs-field-textbox.disabled textarea{opacity:0.5}verdocs-field-textbox label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-textbox.required.required{border:1px solid var(--verdocs-required-field-border)}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}verdocs-field-textbox .settings-icon{position:absolute;top:-4px;left:-18px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-textbox .settings-icon svg{fill:#707ae5}verdocs-field-textbox .settings-icon:hover{opacity:1}";
 const VerdocsFieldTextbox = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldTextbox extends H {
     constructor(registerHost) {
@@ -108,7 +108,7 @@ const VerdocsFieldTextbox = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldT
                 },
                 modifiers: [
                     interact.modifiers.restrictSize({
-                        min: { width: 30, height: 15 },
+                        min: { width: 30, height: 10 },
                     }),
                 ],
                 listeners: {
@@ -143,8 +143,8 @@ const VerdocsFieldTextbox = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldT
         const { sourceid, fieldname } = this;
         const width = Math.round(parseFloat(e.target.style.width));
         let height = Math.round(parseFloat(e.target.style.height));
-        if (height < 20) {
-            height = 15;
+        if (height < 10) {
+            height = 10;
         }
         const multiline = height > 15;
         const newBottom = parseFloat(e.target.style.bottom);
@@ -170,8 +170,9 @@ const VerdocsFieldTextbox = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldT
     render() {
         const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
         const { index, field } = Store.getField(source, sourceid, fieldname, this.field);
-        let { required = false, placeholder = '', label = '', width = 150, readonly = false, default: value = '', multiline = false } = field || {};
+        let { required = false, placeholder = '', label = '', width = 150, height = 15, readonly = false, default: value = '', multiline = false } = field || {};
         const signerClass = `signer-${(index % 10) + 1}`;
+        const small = height < 15;
         // TODO: Consolidate value/defaultValue handling between template and envelope fields.
         if (field === null || field === void 0 ? void 0 : field.value) {
             value = field === null || field === void 0 ? void 0 : field.value;
@@ -181,7 +182,7 @@ const VerdocsFieldTextbox = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldT
         if (done) {
             return h(Host, { class: { done } }, value);
         }
-        return (h(Host, { class: { required, disabled, done, focused, [signerClass]: true } }, editable && h("div", { class: "edge-top" }), editable && h("div", { class: "edge-right" }), editable && h("div", { class: "edge-left" }), editable && h("div", { class: "edge-bottom" }), label && h("label", null, label), multiline ? (h("textarea", { name: fieldname, required: required, placeholder: placeholder, disabled: readonly || disabled, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }, value)) : (h("input", { type: "text", value: value, name: fieldname, required: required, maxlength: maxlength, placeholder: placeholder, disabled: readonly || disabled, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) })), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { required, disabled, done, focused, small, [signerClass]: true } }, editable && h("div", { class: "edge-top" }), editable && h("div", { class: "edge-right" }), editable && h("div", { class: "edge-left" }), editable && h("div", { class: "edge-bottom" }), label && h("label", null, label), multiline ? (h("textarea", { name: fieldname, required: required, placeholder: placeholder, disabled: readonly || disabled, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }, value)) : (h("input", { type: "text", value: value, name: fieldname, required: required, maxlength: maxlength, placeholder: placeholder, disabled: readonly || disabled, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) })), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
             } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: fieldname, onClose: () => this.hideSettingsPanel(), onDelete: () => {
@@ -275,6 +276,6 @@ function defineCustomElement() {
 }
 export { VerdocsFieldTextbox as V, defineCustomElement as d };
-//# sourceMappingURL=p-DWZamcQd.js.map
+//# sourceMappingURL=p-CeHrzafI.js.map
-//# sourceMappingURL=p-DWZamcQd.js.map
+//# sourceMappingURL=p-CeHrzafI.js.map

package/dist/components/p-CeHrzafI.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-CeHrzafI.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/fields/verdocs-field-textbox/verdocs-field-textbox.scss?tag=verdocs-field-textbox","src/components/fields/verdocs-field-textbox/verdocs-field-textbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-textbox {\n font-family: $verdocs-primary-font;\n box-sizing: border-box;\n width: 150px;\n height: 15px;\n display: block;\n font-size: 11px;\n position: relative;\n scroll-margin: 20px 0;\n letter-spacing: -0.2px;\n background-color: var(--verdocs-field-background, transparent);\n transform-origin: bottom left;\n border: var(--verdocs-field-border, 1px solid rgba(0, 0, 0, 0.2));\n border-radius: var(--verdocs-field-radius);\n\n &.small input,\n &.small textarea {\n font-size: 8px;\n }\n\n .edge-top,\n .edge-right,\n .edge-left,\n .edge-bottom {\n position: absolute;\n z-index: 10;\n }\n\n .edge-top {\n top: -2px;\n left: 0;\n right: 0;\n height: 5px;\n }\n\n .edge-right {\n top: 0;\n bottom: 0;\n right: -2px;\n width: 5px;\n }\n\n .edge-left {\n top: 0;\n left: -2px;\n bottom: 0;\n width: 5px;\n }\n\n .edge-bottom {\n bottom: -2px;\n left: 0;\n right: 0;\n height: 5px;\n }\n\n input {\n // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n cursor: inherit;\n\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n padding: 0 3px;\n font-size: 11px;\n background: none;\n font-weight: 500;\n position: absolute;\n transform-origin: 0 0;\n box-sizing: border-box;\n color: var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87));\n\n &.hide {\n display: none;\n }\n }\n\n &.disabled input {\n opacity: 0.5;\n }\n\n textarea {\n // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n cursor: inherit;\n\n width: 100%;\n height: 100%;\n resize: none;\n border: none;\n outline: none;\n padding: 0 3px;\n font-size: 11px;\n background: none;\n font-weight: 500;\n line-height: 13px;\n transform-origin: 0 0;\n box-sizing: border-box;\n color: var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87));\n\n &.hide {\n display: none;\n }\n }\n\n &.disabled textarea {\n opacity: 0.5;\n }\n\n label {\n top: -14px;\n left: -1px;\n height: 14px;\n color: white;\n padding: 0 4px;\n font-size: 9px;\n line-height: 13px;\n position: absolute;\n background: #4a4a99;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n }\n\n &.required {\n &.required {\n border: 1px solid var(--verdocs-required-field-border);\n }\n }\n\n verdocs-button-panel {\n top: -3px;\n left: -2px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n\n // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n // LastPass is ignoring the data-lpignore attribute in some cases\n [data-lastpass-icon-root] {\n display: none !important;\n }\n\n .settings-icon {\n position: absolute;\n top: -4px;\n left: -18px;\n display: inline-block;\n cursor: pointer;\n opacity: 0.3;\n\n svg {\n fill: $border-color;\n }\n\n &:hover {\n opacity: 1;\n }\n }\n}\n","import interact from 'interactjs';\nimport {ResizeEvent} from '@interactjs/actions/resize/plugin';\nimport {IEnvelopeField, ITemplate, ITemplateField, updateField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Element, Prop, Method, Event, EventEmitter, Fragment, State, Listen} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a simple 1-line text input field.\n */\n@Component({\n tag: 'verdocs-field-textbox',\n styleUrl: 'verdocs-field-textbox.scss',\n shadow: false,\n})\nexport class VerdocsFieldTextbox {\n @Element() el: HTMLElement;\n private inputEl: HTMLInputElement | HTMLTextAreaElement;\n\n /**\n * Fields may be attached to templates or envelopes, but only template fields may be edited.\n */\n @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n /**\n * The source template or envelope ID the field is found in.\n */\n @Prop({reflect: true}) sourceid: string = '';\n\n /**\n * The name of the field to display.\n */\n @Prop({reflect: true}) fieldname: string = '';\n\n /**\n * Override the field's settings. This is intended to be used during signing when fields are being\n * mutated.\n */\n @Prop() field: IEnvelopeField | null | undefined = null;\n\n /**\n * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n */\n @Prop({reflect: true}) disabled?: boolean = false;\n\n /**\n * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n */\n @Prop({reflect: true}) multiline?: boolean = false;\n\n /**\n * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n */\n @Prop({reflect: true}) editable?: boolean = false;\n\n /**\n * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n */\n @Prop({reflect: true}) moveable?: boolean = false;\n\n /**\n * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n */\n @Prop({reflect: true}) done?: boolean = false;\n\n /**\n * If set, the field will be be scaled horizontally by this factor.\n */\n @Prop({reflect: true}) xscale?: number = 1;\n\n /**\n * If set, the field will be be scaled vertically by this factor.\n */\n @Prop({reflect: true}) yscale?: number = 1;\n\n /**\n * The page the field is on\n */\n @Prop({reflect: true}) pagenumber?: number = 1;\n\n /**\n * Event fired when the field's settings are changed.\n */\n @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n /**\n * Event fired when the field is deleted.\n */\n @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n @State() showingProperties?: boolean = false;\n @State() focused = false;\n\n @Listen('blur', {capture: true})\n handleBlur() {\n this.focused = false;\n }\n\n @Method()\n async focusField() {\n this.inputEl.focus();\n this.focused = true;\n }\n\n @Method()\n async showSettingsPanel() {\n const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n if (settingsPanel && settingsPanel.showPanel) {\n settingsPanel.showPanel();\n }\n }\n\n @Method()\n async hideSettingsPanel() {\n const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n if (settingsPanel && settingsPanel.hidePanel) {\n settingsPanel.hidePanel();\n }\n this.showingProperties = false;\n }\n\n componentDidRender() {\n interact.dynamicDrop(true);\n\n if (this.editable) {\n interact(this.el).resizable({\n edges: {\n top: '.edge-top',\n left: '.edge-left',\n bottom: '.edge-bottom',\n right: '.edge-right',\n },\n modifiers: [\n interact.modifiers.restrictSize({\n min: {width: 30, height: 10},\n }),\n ],\n listeners: {\n start: this.handleResizeStart.bind(this),\n move: this.handleResize.bind(this),\n end: this.handleResizeEnd.bind(this),\n },\n });\n }\n }\n\n handleResizeStart(e: ResizeEvent) {\n e.preventDefault();\n e.stopPropagation();\n e.target.dataset.originalBottom = e.target.style.bottom;\n }\n\n handleResize(e: any) {\n let {width, height} = e.rect;\n\n const dX = e.deltaRect.left;\n const dY = e.deltaRect.bottom;\n const currentLeft = parseFloat(e.target.style.left);\n const currentBottom = parseFloat(e.target.style.bottom);\n\n width /= this.xscale;\n height /= this.yscale;\n\n Object.assign(e.target.style, {\n width: `${width}px`,\n height: `${height}px`,\n left: `${currentLeft + dX}px`,\n bottom: `${currentBottom - dY}px`,\n });\n }\n\n async handleResizeEnd(e: any) {\n const {sourceid, fieldname} = this;\n\n const width = Math.round(parseFloat(e.target.style.width));\n let height = Math.round(parseFloat(e.target.style.height));\n if (height < 10) {\n height = 10;\n }\n const multiline = height > 15;\n\n const newBottom = parseFloat(e.target.style.bottom);\n const originalBottom = parseFloat(e.target.dataset.originalBottom);\n const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n const oldField = template.fields.find(f => f.name === fieldname);\n const y = newBottom !== originalBottom ? newBottom / this.yscale : oldField?.y;\n\n updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, {width, height, y, multiline})\n .then(async updatedField => {\n const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n const newTemplate = JSON.parse(JSON.stringify(template)) as ITemplate;\n const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);\n if (fieldIndex > -1) {\n newTemplate.fields[fieldIndex] = updatedField;\n }\n Store.updateTemplate(this.sourceid, newTemplate);\n\n this.settingsChanged?.emit({fieldName: fieldname, field: updatedField});\n Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n })\n .catch(e => console.log('Field update failed', e));\n }\n\n render() {\n const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n let {required = false, placeholder = '', label = '', width = 150, height = 15, readonly = false, default: value = '', multiline = false} = field || {};\n const signerClass = `signer-${(index % 10) + 1}`;\n const small = height < 15;\n\n // TODO: Consolidate value/defaultValue handling between template and envelope fields.\n if ((field as any)?.value) {\n value = (field as any)?.value;\n }\n\n // TODO: This is an outdated technique from the old system. We should compute it.\n const maxlength = width / 5;\n\n if (done) {\n return <Host class={{done}}>{value}</Host>;\n }\n\n return (\n <Host class={{required, disabled, done, focused, small, [signerClass]: true}}>\n {editable && <div class=\"edge-top\" />}\n {editable && <div class=\"edge-right\" />}\n {editable && <div class=\"edge-left\" />}\n {editable && <div class=\"edge-bottom\" />}\n\n {label && <label>{label}</label>}\n\n {multiline ? (\n <textarea\n name={fieldname}\n required={required}\n placeholder={placeholder}\n disabled={readonly || disabled}\n ref={el => (this.inputEl = el)}\n onFocus={() => (this.focused = true)}\n onBlur={() => (this.focused = false)}\n >\n {value}\n </textarea>\n ) : (\n <input\n type=\"text\"\n value={value}\n name={fieldname}\n required={required}\n maxlength={maxlength}\n placeholder={placeholder}\n disabled={readonly || disabled}\n ref={el => (this.inputEl = el)}\n onFocus={() => (this.focused = true)}\n onBlur={() => (this.focused = false)}\n />\n )}\n\n {editable && (\n <Fragment>\n <div\n id={`verdocs-settings-panel-trigger-${fieldname}`}\n style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n class=\"settings-icon\"\n innerHTML={SettingsIcon}\n onClick={(e: any) => {\n e.stopPropagation();\n this.showingProperties = !this.showingProperties;\n }}\n />\n\n {this.showingProperties && (\n <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n <verdocs-template-field-properties\n templateId={sourceid}\n fieldName={fieldname}\n onClose={() => this.hideSettingsPanel()}\n onDelete={() => {\n this.deleted?.emit({fieldName: fieldname});\n return this.hideSettingsPanel();\n }}\n onSettingsChanged={e => {\n this.settingsChanged?.emit(e.detail);\n return this.hideSettingsPanel();\n }}\n helpText={\n 'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the \"name\" field.<br /><br />If marked required, the participant must complete the field before proceeding.'\n }\n />\n </verdocs-portal>\n )}\n </Fragment>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-BaFfUg65.js → p-DKO4_Yp9.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CUAGH_8P.js';
 import { VerdocsEndpoint, getEnvelopeDocumentPageDisplayUri } from '@verdocs/js-sdk';
-import { t as throttle } from './p-IUjGbyAi.js';
+import { t as throttle } from './p-Dk8BEvRP.js';
 import { d as defineCustomElement$1 } from './p-CHLvWYEx.js';
 const verdocsEnvelopeDocumentPageCss = "verdocs-envelope-document-page{width:100%;position:relative}verdocs-envelope-document-page .verdocs-envelope-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-envelope-document-page .verdocs-envelope-document-page-layer.img{width:100%}";
@@ -164,6 +164,6 @@ function defineCustomElement() {
 }
 export { VerdocsEnvelopeDocumentPage as V, defineCustomElement as d };
-//# sourceMappingURL=p-BaFfUg65.js.map
+//# sourceMappingURL=p-DKO4_Yp9.js.map
-//# sourceMappingURL=p-BaFfUg65.js.map
+//# sourceMappingURL=p-DKO4_Yp9.js.map

package/dist/components/{p-BaFfUg65.js.map → p-DKO4_Yp9.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-BaFfUg65.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page.scss?tag=verdocs-envelope-document-page","src/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-envelope-document-page {\n width: 100%;\n position: relative;\n\n .verdocs-envelope-document-page-layer {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n box-shadow: 0 0 10px 5px #0000000f;\n\n &.img {\n width: 100%;\n }\n }\n}\n","// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {getEnvelopeDocumentPageDisplayUri, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {throttle} from '../../../utils/utils';\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-envelope-document-page',\n styleUrl: 'verdocs-envelope-document-page.scss',\n shadow: false,\n})\nexport class VerdocsEnvelopeDocumentPage {\n @Element() container: HTMLElement;\n private resizeObserver: ResizeObserver;\n\n /\n The endpoint to load from.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The ID of the envelope the document is for.\n /\n @Prop() envelopeId: string = '';\n\n /\n The ID of the document to display.\n /\n @Prop() documentId: string = '';\n\n /\n The page number being rendered. (Reminder: page numbers are 1-based.)\n /\n @Prop() pageNumber: number = 1;\n\n /\n The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n * the aspect ratio of the final rendered element when scaling up/down.\n /\n @Prop() virtualWidth: number = 612;\n\n /\n The \"virtual\" height of the page canvas. Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n * the aspect ratio of the final rendered element when scaling up/down.\n /\n @Prop({mutable: true}) virtualHeight: number = 792;\n\n /\n The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n * if `pages` was ['page', 'fields'] the structure will be:\n \n ```\n * <div id=\"verdocs-envelope-document-page-ker2fr1p9\">\n * <div id=\"verdocs-envelope-document-page-ker2fr1p9-page\"></div>\n * <div id=\"verdocs-envelope-document-page-ker2fr1p9-fields\"></div>\n * </div>\n * ```\n /\n @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n @Prop() type: 'original' \| 'filled' \| 'certificate' = 'original';\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-envelope-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 @State() pageDisplayUri = 'https://verdocs-public-assets.s3.amazonaws.com/page-loading-placeholder.png';\n\n async componentWillLoad() {\n this.pageDisplayUri = await getEnvelopeDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber, this.type);\n }\n\n componentDidLoad() {\n this.resizeObserver = new ResizeObserver(\n throttle(entries => {\n for (const entry of entries) {\n const renderedWidth = entry.contentRect.width;\n this.renderedWidth = renderedWidth;\n this.renderedHeight = this.virtualHeight (renderedWidth / this.virtualWidth);\n }\n\n this.notifyRenderedSize();\n }, 100),\n );\n\n this.resizeObserver.observe(this.container);\n }\n\n 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 documentId: this.documentId,\n pageNumber: this.pageNumber,\n virtualWidth: this.virtualWidth,\n virtualHeight: this.virtualHeight,\n renderedWidth: this.renderedWidth,\n renderedHeight: this.renderedHeight,\n naturalWidth: this.naturalWidth,\n naturalHeight: this.naturalHeight,\n aspectRatio: this.aspectRatio,\n xScale: this.renderedWidth / this.virtualWidth,\n yScale: this.renderedHeight / this.virtualHeight,\n });\n }\n\n render() {\n const height = `${this.renderedHeight}px`;\n\n return (\n <Host id={`${this.containerId}`} style={{height, flex: `0 0 ${height}`}}>\n {this.layers.map(layer =>\n layer.type === 'div' ? (\n <div class=\"verdocs-envelope-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}} />\n ) : this.pageDisplayUri ? (\n <img\n class=\"verdocs-envelope-document-page-layer img\"\n id={`${this.containerId}-${layer.name}`}\n src={this.pageDisplayUri}\n alt={`Page ${this.pageNumber}`}\n aria-hidden={true}\n loading=\"lazy\"\n onLoad={(e: any) => {\n // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that\n // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).\n // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values\n // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the\n // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the\n // aspect ratio to adjust the \"virtual\" height in case the page is not 8.5\"x11\".\n // TODO: Store this in the DB with each page.\n this.naturalWidth = e.target.naturalWidth;\n this.naturalHeight = e.target.naturalHeight;\n this.aspectRatio = this.naturalWidth / this.naturalHeight;\n this.virtualHeight = this.virtualWidth / this.aspectRatio;\n this.renderedHeight = e.target.offsetWidth / this.aspectRatio;\n }}\n />\n ) : (\n <div></div>\n ),\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-DKO4_Yp9.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page.scss?tag=verdocs-envelope-document-page","src/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-envelope-document-page {\n width: 100%;\n position: relative;\n\n .verdocs-envelope-document-page-layer {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n box-shadow: 0 0 10px 5px #0000000f;\n\n &.img {\n width: 100%;\n }\n }\n}\n","// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {getEnvelopeDocumentPageDisplayUri, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {throttle} from '../../../utils/utils';\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-envelope-document-page',\n styleUrl: 'verdocs-envelope-document-page.scss',\n shadow: false,\n})\nexport class VerdocsEnvelopeDocumentPage {\n @Element() container: HTMLElement;\n private resizeObserver: ResizeObserver;\n\n /\n The endpoint to load from.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The ID of the envelope the document is for.\n /\n @Prop() envelopeId: string = '';\n\n /\n The ID of the document to display.\n /\n @Prop() documentId: string = '';\n\n /\n The page number being rendered. (Reminder: page numbers are 1-based.)\n /\n @Prop() pageNumber: number = 1;\n\n /\n The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n * the aspect ratio of the final rendered element when scaling up/down.\n /\n @Prop() virtualWidth: number = 612;\n\n /\n The \"virtual\" height of the page canvas. Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n * the aspect ratio of the final rendered element when scaling up/down.\n /\n @Prop({mutable: true}) virtualHeight: number = 792;\n\n /\n The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n * if `pages` was ['page', 'fields'] the structure will be:\n \n ```\n * <div id=\"verdocs-envelope-document-page-ker2fr1p9\">\n * <div id=\"verdocs-envelope-document-page-ker2fr1p9-page\"></div>\n * <div id=\"verdocs-envelope-document-page-ker2fr1p9-fields\"></div>\n * </div>\n * ```\n /\n @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n @Prop() type: 'original' \| 'filled' \| 'certificate' = 'original';\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-envelope-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 @State() pageDisplayUri = 'https://verdocs-public-assets.s3.amazonaws.com/page-loading-placeholder.png';\n\n async componentWillLoad() {\n this.pageDisplayUri = await getEnvelopeDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber, this.type);\n }\n\n componentDidLoad() {\n this.resizeObserver = new ResizeObserver(\n throttle(entries => {\n for (const entry of entries) {\n const renderedWidth = entry.contentRect.width;\n this.renderedWidth = renderedWidth;\n this.renderedHeight = this.virtualHeight (renderedWidth / this.virtualWidth);\n }\n\n this.notifyRenderedSize();\n }, 100),\n );\n\n this.resizeObserver.observe(this.container);\n }\n\n 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 documentId: this.documentId,\n pageNumber: this.pageNumber,\n virtualWidth: this.virtualWidth,\n virtualHeight: this.virtualHeight,\n renderedWidth: this.renderedWidth,\n renderedHeight: this.renderedHeight,\n naturalWidth: this.naturalWidth,\n naturalHeight: this.naturalHeight,\n aspectRatio: this.aspectRatio,\n xScale: this.renderedWidth / this.virtualWidth,\n yScale: this.renderedHeight / this.virtualHeight,\n });\n }\n\n render() {\n const height = `${this.renderedHeight}px`;\n\n return (\n <Host id={`${this.containerId}`} style={{height, flex: `0 0 ${height}`}}>\n {this.layers.map(layer =>\n layer.type === 'div' ? (\n <div class=\"verdocs-envelope-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}} />\n ) : this.pageDisplayUri ? (\n <img\n class=\"verdocs-envelope-document-page-layer img\"\n id={`${this.containerId}-${layer.name}`}\n src={this.pageDisplayUri}\n alt={`Page ${this.pageNumber}`}\n aria-hidden={true}\n loading=\"lazy\"\n onLoad={(e: any) => {\n // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that\n // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).\n // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values\n // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the\n // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the\n // aspect ratio to adjust the \"virtual\" height in case the page is not 8.5\"x11\".\n // TODO: Store this in the DB with each page.\n this.naturalWidth = e.target.naturalWidth;\n this.naturalHeight = e.target.naturalHeight;\n this.aspectRatio = this.naturalWidth / this.naturalHeight;\n this.virtualHeight = this.virtualWidth / this.aspectRatio;\n this.renderedHeight = e.target.offsetWidth / this.aspectRatio;\n }}\n />\n ) : (\n <div></div>\n ),\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-Dl7Xw8F0.js → p-DMMF9yT2.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 const FORMAT_TIMESTAMP = 'P pp';
 // export const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';
-const FORMAT_DATE = 'y-MM-dd';
+const FORMAT_DATE = 'P';
 export { FORMAT_TIMESTAMP as F, FORMAT_DATE as a };
-//# sourceMappingURL=p-Dl7Xw8F0.js.map
+//# sourceMappingURL=p-DMMF9yT2.js.map
-//# sourceMappingURL=p-Dl7Xw8F0.js.map
+//# sourceMappingURL=p-DMMF9yT2.js.map

package/dist/components/{p-Dl7Xw8F0.js.map → p-DMMF9yT2.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~Dl7Xw8F0~~.js","mappings":"AAoBO,MAAM,gBAAgB,GAAG;AAChC;AACO,MAAM,WAAW,GAAG;;;;","names":[],"sources":["src/utils/Types.ts"],"sourcesContent":["export interface IDocumentPageInfo {\n containerId: string;\n documentId: string;\n pageNumber: number;\n virtualWidth: number;\n virtualHeight: number;\n renderedWidth: number;\n renderedHeight: number;\n naturalWidth: number;\n naturalHeight: number;\n aspectRatio: number;\n xScale: number;\n yScale: number;\n}\n\nexport interface IPageLayer {\n name: string;\n type: 'div' \| 'canvas';\n}\n\nexport const FORMAT_TIMESTAMP = 'P pp';\n// export const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';\nexport const FORMAT_DATE = 'y-MM-dd'\n"],"version":3}
1	+ {"file":"p-DMMF9yT2.js","mappings":"AAoBO,MAAM,gBAAgB,GAAG;AAChC;AACO,MAAM,WAAW,GAAG;;;;","names":[],"sources":["src/utils/Types.ts"],"sourcesContent":["export interface IDocumentPageInfo {\n containerId: string;\n documentId: string;\n pageNumber: number;\n virtualWidth: number;\n virtualHeight: number;\n renderedWidth: number;\n renderedHeight: number;\n naturalWidth: number;\n naturalHeight: number;\n aspectRatio: number;\n xScale: number;\n yScale: number;\n}\n\nexport interface IPageLayer {\n name: string;\n type: 'div' \| 'canvas';\n}\n\nexport const FORMAT_TIMESTAMP = 'P pp';\n// export const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';\nexport const FORMAT_DATE = 'P'\n// export const FORMAT_DATE = 'y-MM-dd'\n"],"version":3}