npm - @verdocs/web-sdk - Versions diffs - 5.0.33 → 5.0.35 - Mend

@verdocs/web-sdk 5.0.33 → 5.0.35

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

package/dist/components/{p-550377ba.js.map → p-e2da5bff.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-550377ba.js","mappings":"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","names":[],"sources":["src/components/templates/verdocs-template-document-page/verdocs-template-document-page.scss?tag=verdocs-template-document-page","src/components/templates/verdocs-template-document-page/verdocs-template-document-page.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-document-page {\n width: 100%;\n position: relative;\n\n .verdocs-template-document-page-layer {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n box-shadow: 0 0 10px 5px #0000000f;\n\n &.img {\n width: 100%;\n }\n }\n\n .placeholder {\n opacity: 0.1;\n width: 612px;\n height: 792px;\n box-shadow: 0 0 10px 5px #0000000f;\n }\n}\n","// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {getTemplate, getTemplateDocumentPageDisplayUri, type ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element, Fragment} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {getControlStyles, getFieldId} from '../../../utils/utils';\nimport {throttle} from '../../../utils/utils';\nimport {Store} from '../../../utils/Datastore';\n\n/*\n Represents one document page. This is primarily a layout container used to coordinate positions of\n * page-related layers such as the page itself, signature fields, etc. It is not intended to be used\n * on its own as an individual component.\n /\n@Component({\n tag: 'verdocs-template-document-page',\n styleUrl: 'verdocs-template-document-page.scss',\n shadow: false,\n})\nexport class VerdocsTemplateDocumentPage {\n private templateListenerId = null;\n private resizeObserver: ResizeObserver;\n\n @Element() container: HTMLElement;\n\n /\n The endpoint to load from.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n Whether the fields should be editable (Builder)\n /\n @Prop() editable = false;\n\n /\n Whether the fields should be disabled (Builder)\n /\n @Prop() disabled = false;\n\n /\n Whether the field are interactable (done/submitted disables this)\n /\n @Prop() done = false;\n\n /\n The ID of the template the document is for.\n /\n @Prop() templateId: string = '';\n\n /\n The ID of the document to display.\n /\n @Prop() documentId: string = '';\n\n /\n The page number being rendered. (Reminder: page numbers are 1-based.)\n /\n @Prop() pageNumber: number = 1;\n\n /\n The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n * the aspect ratio of the final rendered element when scaling up/down.\n /\n @Prop() virtualWidth: number = 612;\n\n /\n The \"virtual\" height of the page canvas. Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n * the aspect ratio of the final rendered element when scaling up/down.\n /\n @Prop({mutable: true}) virtualHeight: number = 792;\n\n /\n The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n * if `pages` was ['page', 'fields'] the structure will be:\n \n ```\n * <div id=\"verdocs-document-page-ker2fr1p9\">\n * <div id=\"verdocs-document-page-ker2fr1p9-page\"></div>\n * <div id=\"verdocs-document-page-ker2fr1p9-fields\"></div>\n * </div>\n * ```\n /\n @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n /\n Fired when a page has been rendered. This is also fired when the page is resized.\n /\n @Event() pageRendered: EventEmitter<IDocumentPageInfo>;\n\n @State() containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;\n @State() renderedWidth: number = this.virtualWidth;\n @State() renderedHeight: number = this.virtualHeight;\n @State() naturalWidth: number = this.virtualWidth;\n @State() naturalHeight: number = this.virtualHeight;\n @State() aspectRatio: number = this.virtualWidth / this.virtualHeight;\n @State() skipFirstNotification = true;\n @State() pageDisplayUri = '';\n @State() xScale = 1;\n @State() yScale = 1;\n\n @State() loading = true;\n @State() template: ITemplate \| null = null;\n\n async componentWillLoad() {\n this.pageDisplayUri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber);\n this.listenToTemplate();\n }\n\n componentDidLoad() {\n this.resizeObserver = new ResizeObserver(\n throttle(entries => {\n for (const entry of entries) {\n const renderedWidth = entry.contentRect.width;\n this.renderedWidth = renderedWidth;\n this.renderedHeight = this.virtualHeight (renderedWidth / this.virtualWidth);\n }\n\n this.notifyRenderedSize();\n }, 100),\n );\n\n this.resizeObserver.observe(this.container);\n }\n\n componentDidUpdate() {\n // This is fired when fields are updated and triggers the parent to re-attach behaviors like drag-and-drop\n this.notifyRenderedSize();\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.unlistenToTemplate();\n }\n\n async listenToTemplate() {\n this.unlistenToTemplate();\n Store.subscribe(\n 'templates',\n this.templateId,\n () => getTemplate(this.endpoint, this.templateId),\n false,\n (template: ITemplate) => {\n this.template = template;\n this.loading = false;\n },\n );\n }\n\n unlistenToTemplate() {\n if (this.templateListenerId) {\n Store.store.delListener(this.templateListenerId);\n this.templateListenerId = null;\n }\n }\n\n notifyRenderedSize() {\n // We skip one notification because by default we will always get at least two, one when rendering the initial size\n // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.\n if (this.skipFirstNotification) {\n this.skipFirstNotification = false;\n return;\n }\n\n const xScale = this.renderedWidth / this.virtualWidth;\n if (this.xScale !== xScale) {\n this.xScale = xScale;\n }\n\n const yScale = this.renderedHeight / this.virtualHeight;\n if (this.yScale !== yScale) {\n this.yScale = yScale;\n }\n\n this.pageRendered.emit({\n // container: this.container,\n containerId: this.containerId,\n documentId: this.documentId,\n pageNumber: this.pageNumber,\n virtualWidth: this.virtualWidth,\n virtualHeight: this.virtualHeight,\n renderedWidth: this.renderedWidth,\n renderedHeight: this.renderedHeight,\n naturalWidth: this.naturalWidth,\n naturalHeight: this.naturalHeight,\n aspectRatio: this.aspectRatio,\n xScale,\n yScale,\n });\n }\n\n render() {\n if (this.loading) {\n return (\n <Host>\n <img src=\"https://public-assets.verdocs.com/loading-placeholder.png\" class=\"placeholder\" alt=\"Placeholder page\" />\n </Host>\n );\n }\n\n const height = `${this.renderedHeight}px`;\n\n return (\n <Host id={`${this.containerId}`} style={{height, flex: `0 0 ${height}`}}>\n {this.layers.map(layer =>\n layer.type === 'div' ? (\n <div class=\"verdocs-template-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}}>\n {layer.name === 'controls' &&\n (this.template?.fields \|\| [])\n .filter(field => field && field.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}
1	+ {"file":"p-e2da5bff.js","mappings":"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","names":[],"sources":["src/components/templates/verdocs-template-document-page/verdocs-template-document-page.scss?tag=verdocs-template-document-page","src/components/templates/verdocs-template-document-page/verdocs-template-document-page.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-document-page {\n width: 100%;\n position: relative;\n\n .verdocs-template-document-page-layer {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n box-shadow: 0 0 10px 5px #0000000f;\n\n &.img {\n width: 100%;\n }\n }\n\n .placeholder {\n opacity: 0.1;\n width: 612px;\n height: 792px;\n box-shadow: 0 0 10px 5px #0000000f;\n }\n}\n","// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {getTemplate, getTemplateDocumentPageDisplayUri, type ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element, Fragment} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {getControlStyles, getFieldId} from '../../../utils/utils';\nimport {throttle} from '../../../utils/utils';\nimport {Store} from '../../../utils/Datastore';\n\n/*\n Represents one document page. This is primarily a layout container used to coordinate positions of\n * page-related layers such as the page itself, signature fields, etc. It is not intended to be used\n * on its own as an individual component.\n /\n@Component({\n tag: 'verdocs-template-document-page',\n styleUrl: 'verdocs-template-document-page.scss',\n shadow: false,\n})\nexport class VerdocsTemplateDocumentPage {\n private templateListenerId = null;\n private resizeObserver: ResizeObserver;\n\n @Element() container: HTMLElement;\n\n /\n The endpoint to load from.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n Whether the fields should be editable (Builder)\n /\n @Prop() editable = false;\n\n /\n Whether the fields should be disabled (Builder)\n /\n @Prop() disabled = false;\n\n /\n Whether the field are interactable (done/submitted disables this)\n /\n @Prop() done = false;\n\n /\n The ID of the template the document is for.\n /\n @Prop() templateId: string = '';\n\n /\n The ID of the document to display.\n /\n @Prop() documentId: string = '';\n\n /\n The page number being rendered. (Reminder: page numbers are 1-based.)\n /\n @Prop() pageNumber: number = 1;\n\n /\n The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n * the aspect ratio of the final rendered element when scaling up/down.\n /\n @Prop() virtualWidth: number = 612;\n\n /\n The \"virtual\" height of the page canvas. Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n * the aspect ratio of the final rendered element when scaling up/down.\n /\n @Prop({mutable: true}) virtualHeight: number = 792;\n\n /\n The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n * if `pages` was ['page', 'fields'] the structure will be:\n \n ```\n * <div id=\"verdocs-document-page-ker2fr1p9\">\n * <div id=\"verdocs-document-page-ker2fr1p9-page\"></div>\n * <div id=\"verdocs-document-page-ker2fr1p9-fields\"></div>\n * </div>\n * ```\n /\n @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n /\n Fired when a page has been rendered. This is also fired when the page is resized.\n /\n @Event() pageRendered: EventEmitter<IDocumentPageInfo>;\n\n @State() containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;\n @State() renderedWidth: number = this.virtualWidth;\n @State() renderedHeight: number = this.virtualHeight;\n @State() naturalWidth: number = this.virtualWidth;\n @State() naturalHeight: number = this.virtualHeight;\n @State() aspectRatio: number = this.virtualWidth / this.virtualHeight;\n @State() skipFirstNotification = true;\n @State() pageDisplayUri = '';\n @State() xScale = 1;\n @State() yScale = 1;\n\n @State() loading = true;\n @State() template: ITemplate \| null = null;\n\n async componentWillLoad() {\n this.pageDisplayUri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber);\n this.listenToTemplate();\n }\n\n componentDidLoad() {\n this.resizeObserver = new ResizeObserver(\n throttle(entries => {\n for (const entry of entries) {\n const renderedWidth = entry.contentRect.width;\n this.renderedWidth = renderedWidth;\n this.renderedHeight = this.virtualHeight (renderedWidth / this.virtualWidth);\n }\n\n this.notifyRenderedSize();\n }, 100),\n );\n\n this.resizeObserver.observe(this.container);\n }\n\n componentDidUpdate() {\n // This is fired when fields are updated and triggers the parent to re-attach behaviors like drag-and-drop\n this.notifyRenderedSize();\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.unlistenToTemplate();\n }\n\n async listenToTemplate() {\n this.unlistenToTemplate();\n Store.subscribe(\n 'templates',\n this.templateId,\n () => getTemplate(this.endpoint, this.templateId),\n false,\n (template: ITemplate) => {\n this.template = template;\n this.loading = false;\n },\n );\n }\n\n unlistenToTemplate() {\n if (this.templateListenerId) {\n Store.store.delListener(this.templateListenerId);\n this.templateListenerId = null;\n }\n }\n\n notifyRenderedSize() {\n // We skip one notification because by default we will always get at least two, one when rendering the initial size\n // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.\n if (this.skipFirstNotification) {\n this.skipFirstNotification = false;\n return;\n }\n\n const xScale = this.renderedWidth / this.virtualWidth;\n if (this.xScale !== xScale) {\n this.xScale = xScale;\n }\n\n const yScale = this.renderedHeight / this.virtualHeight;\n if (this.yScale !== yScale) {\n this.yScale = yScale;\n }\n\n this.pageRendered.emit({\n // container: this.container,\n containerId: this.containerId,\n documentId: this.documentId,\n pageNumber: this.pageNumber,\n virtualWidth: this.virtualWidth,\n virtualHeight: this.virtualHeight,\n renderedWidth: this.renderedWidth,\n renderedHeight: this.renderedHeight,\n naturalWidth: this.naturalWidth,\n naturalHeight: this.naturalHeight,\n aspectRatio: this.aspectRatio,\n xScale,\n yScale,\n });\n }\n\n render() {\n if (this.loading) {\n return (\n <Host>\n <img src=\"https://public-assets.verdocs.com/loading-placeholder.png\" class=\"placeholder\" alt=\"Placeholder page\" />\n </Host>\n );\n }\n\n const height = `${this.renderedHeight}px`;\n\n return (\n <Host id={`${this.containerId}`} style={{height, flex: `0 0 ${height}`}}>\n {this.layers.map(layer =>\n layer.type === 'div' ? (\n <div class=\"verdocs-template-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}}>\n {layer.name === 'controls' &&\n (this.template?.fields \|\| [])\n .filter(field => field && field.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-1ae5d7e0.js → p-e97100c4.js} RENAMED Viewed

@@ -9,7 +9,7 @@ const VerdocsLoader = /*@__PURE__*/ proxyCustomElement(class VerdocsLoader exten
         this.__registerHost();
     }
     render() {
-        return h(Host, { key: '3bba8f5f53c7070e8444e40146633d193bdf070a' });
+        return h(Host, { key: '09a2f8601ced17f0a53e466bd5f5532524fb90a9' });
     }
     static get style() { return VerdocsLoaderStyle0; }
 }, [0, "verdocs-loader"]);
@@ -29,4 +29,4 @@ function defineCustomElement() {
 export { VerdocsLoader as V, defineCustomElement as d };
-//# sourceMappingURL=p-1ae5d7e0.js.map
+//# sourceMappingURL=p-e97100c4.js.map

package/dist/components/{p-1ae5d7e0.js.map → p-e97100c4.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~1ae5d7e0~~.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,m9UAAm9U,CAAC;AAC7+U,4BAAe,gBAAgB;;MCalB,aAAa;;;;;IACxB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAG,CAAC;KACjB;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-loader/verdocs-loader.scss?tag=verdocs-loader","src/components/controls/verdocs-loader/verdocs-loader.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-loader {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n margin-left: -20px;\n margin-top: -20px;\n font-size: 24px;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n text-indent: -9999em;\n -webkit-animation: load5 1.1s infinite ease;\n animation: verdocs-loader-kf 1.1s infinite ease;\n -webkit-transform: translateZ(0);\n -ms-transform: translateZ(0);\n transform: translateZ(0);\n}\n\n@keyframes verdocs-loader-kf {\n 0%,\n 100% {\n box-shadow: 0em -2.6em 0em 0em $verdocs-bg-2, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.3), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4);\n }\n 12.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.4), 1.8em -1.8em 0 0em $verdocs-bg-2, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3);\n }\n 25% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.3), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4), 2.5em 0em 0 0em $verdocs-bg-2, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 37.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3), 2.5em 0em 0 0em rgba(0, 0, 0, 0.4), 1.75em 1.75em 0 0em $verdocs-bg-2,\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 50% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.3), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.4),\n 0em 2.5em 0 0em $verdocs-bg-2, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 62.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.3),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.4), -1.8em 1.8em 0 0em $verdocs-bg-2, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 75% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.3), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.4), -2.6em 0em 0 0em $verdocs-bg-2, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 87.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.3), -2.6em 0em 0 0em rgba(0, 0, 0, 0.4), -1.8em -1.8em 0 0em $verdocs-bg-2;\n }\n}\n","import {Component, h, Host} from '@stencil/core';\n\n/*\n Animated loader placeholder. There are currently no configuration options for this control.\n \n ```ts\n * <verdocs-loader />\n * ```\n */\n@Component({\n tag: 'verdocs-loader',\n styleUrl: 'verdocs-loader.scss',\n shadow: false,\n})\nexport class VerdocsLoader {\n render() {\n return <Host />;\n }\n}\n"],"version":3}
1	+ {"file":"p-e97100c4.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,m9UAAm9U,CAAC;AAC7+U,4BAAe,gBAAgB;;MCalB,aAAa;;;;;IACxB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAG,CAAC;KACjB;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-loader/verdocs-loader.scss?tag=verdocs-loader","src/components/controls/verdocs-loader/verdocs-loader.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-loader {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n margin-left: -20px;\n margin-top: -20px;\n font-size: 24px;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n text-indent: -9999em;\n -webkit-animation: load5 1.1s infinite ease;\n animation: verdocs-loader-kf 1.1s infinite ease;\n -webkit-transform: translateZ(0);\n -ms-transform: translateZ(0);\n transform: translateZ(0);\n}\n\n@keyframes verdocs-loader-kf {\n 0%,\n 100% {\n box-shadow: 0em -2.6em 0em 0em $verdocs-bg-2, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.3), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4);\n }\n 12.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.4), 1.8em -1.8em 0 0em $verdocs-bg-2, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3);\n }\n 25% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.3), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4), 2.5em 0em 0 0em $verdocs-bg-2, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 37.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3), 2.5em 0em 0 0em rgba(0, 0, 0, 0.4), 1.75em 1.75em 0 0em $verdocs-bg-2,\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 50% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.3), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.4),\n 0em 2.5em 0 0em $verdocs-bg-2, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 62.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.3),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.4), -1.8em 1.8em 0 0em $verdocs-bg-2, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 75% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.3), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.4), -2.6em 0em 0 0em $verdocs-bg-2, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 87.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.3), -2.6em 0em 0 0em rgba(0, 0, 0, 0.4), -1.8em -1.8em 0 0em $verdocs-bg-2;\n }\n}\n","import {Component, h, Host} from '@stencil/core';\n\n/*\n Animated loader placeholder. There are currently no configuration options for this control.\n \n ```ts\n * <verdocs-loader />\n * ```\n */\n@Component({\n tag: 'verdocs-loader',\n styleUrl: 'verdocs-loader.scss',\n shadow: false,\n})\nexport class VerdocsLoader {\n render() {\n return <Host />;\n }\n}\n"],"version":3}

package/dist/components/{p-325b3828.js → p-ec039160.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-324ed895.js';
 import { V as VerdocsToast } from './p-04c07b7b.js';
-import { d as defineCustomElement$1 } from './p-7f32e087.js';
+import { d as defineCustomElement$1 } from './p-b685f6ab.js';
 const verdocsTextInputCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-text-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:34px;padding:0 9px;outline:none}verdocs-text-input .input-element:disabled{cursor:not-allowed;background:#aeb4bf;border:1px solid #33364b}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input .required{color:red;margin-left:2px;display:inline-block}verdocs-text-input [data-lastpass-icon-root]{display:none !important}verdocs-text-input .input-container{position:relative}verdocs-text-input .clear{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .clear:hover{fill:#720101;cursor:pointer}verdocs-text-input .copy{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .copy:hover{fill:#654dcb;cursor:pointer}verdocs-text-input .toggle-pw{top:5px;right:7px;width:18px;height:18px;stroke:#cccccc;position:absolute}verdocs-text-input .toggle-pw:hover{fill:#654dcb;cursor:pointer}verdocs-text-input.clearable .input-element,verdocs-text-input.copyable .input-element{padding-right:32px}";
 const VerdocsTextInputStyle0 = verdocsTextInputCss;
@@ -33,9 +33,9 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class VerdocsTextInput
             .catch(e => console.log('Error copying to clipboard', e));
     }
     render() {
-        return (h(Host, { key: 'fd1c28f5f4060bae39986f6aaa7288bf89da9788', class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, h("label", { key: '5eb25f8d3ca74d32e36bf255ff6344c39903318c' }, this.label && (h("div", { key: '476ebfacd42626faedd3dbf139ad0f205a395c1c', class: "input-label" }, this.label + ':', this.required && h("span", { key: 'b16bc0649a6185dc25ede728bb46041b5d3c5ceb', class: "required" }, "*"))), h("div", { key: '6e97205750cc921cc4d0fdb2d7262869fe0b433d', class: "input-container" }, h("input", { key: '3ab6dc65769856cc5cb6a79fa3fa408c9c64123d', type: this.type === 'password' && this.showingPw ? 'text' : this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete,
+        return (h(Host, { key: 'ffb18abff62cea2674e97ba2ea6f908e0460550d', class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, h("label", { key: 'f012b03c45411092f9a1cd82f472415930ddf9f8' }, this.label && (h("div", { key: '9a5f90432d14792365d7fdcb12f834adde55d16c', class: "input-label" }, this.label + ':', this.required && h("span", { key: 'ab92282e0da709aebc9b4fa34c3d6d0d75115c2d', class: "required" }, "*"))), h("div", { key: 'edef63fbe1592ced337b6bb2452c34746ea53bdf', class: "input-container" }, h("input", { key: 'fff949f643ab8e305f79479f40599ced60f11a27', type: this.type === 'password' && this.showingPw ? 'text' : this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete,
             // onBlur={(e: any) => this.blur?.emit(e.target.value)}
-            ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.clearable && this.value && (h("span", { key: '635b6289fefc3a250ae47463bfa5e9acb16988e2', innerHTML: ClearIcon, class: "clear", onClick: () => {
+            ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.clearable && this.value && (h("span", { key: '36646394ca7594d6efd00c5a8804b57c608fbf87', innerHTML: ClearIcon, class: "clear", onClick: () => {
                 // We need to allow the onInput event to fire first in case
                 // the user was focused on this field before clicking clear.
                 setTimeout(() => {
@@ -49,9 +49,9 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class VerdocsTextInput
                         (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.blur();
                     }, 50);
                 }, 50);
-            } })), this.type === 'password' && (h("span", { key: '6f1f225d19651aba333c7bd92260ddb0110fce81', innerHTML: this.showingPw ? EyeIcon : EyeSlashIcon, class: "toggle-pw", onClick: () => {
+            } })), this.type === 'password' && (h("span", { key: 'dd340981e9e8422df7c28a66513af2a5dfb301ca', innerHTML: this.showingPw ? EyeIcon : EyeSlashIcon, class: "toggle-pw", onClick: () => {
                 this.showingPw = !this.showingPw;
-            } })), !this.clearable && this.copyable && this.value && h("span", { key: 'dabff5508725721a4dedbe4d4c0f37ed789e35c8', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && h("verdocs-help-icon", { key: '5e93a8b8cf44da47463f3e0d59f560bb137820f6', text: this.helpText }))));
+            } })), !this.clearable && this.copyable && this.value && h("span", { key: 'd968add9dbbca43f4672f37072bf0c9b043232e9', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && h("verdocs-help-icon", { key: 'ee3471d0c7b2df25c19dee8450c1dbd57ddef8fa', text: this.helpText }))));
     }
     get hostEl() { return this; }
     static get style() { return VerdocsTextInputStyle0; }
@@ -89,4 +89,4 @@ function defineCustomElement() {
 export { VerdocsTextInput as V, defineCustomElement as d };
-//# sourceMappingURL=p-325b3828.js.map
+//# sourceMappingURL=p-ec039160.js.map

package/dist/components/{p-325b3828.js.map → p-ec039160.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-325b3828.js","mappings":"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","names":[],"sources":["src/components/controls/verdocs-text-input/verdocs-text-input.scss?tag=verdocs-text-input","src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-text-input {\n font-family: $primary-font;\n box-sizing: border-box;\n margin: 0 0 10px 0;\n display: block;\n\n .input-element {\n box-sizing: border-box;\n border: 1px solid $border-color;\n border-radius: 4px;\n background: $verdocs-grey-4;\n color: #000;\n width: 100%;\n font-size: 16px;\n height: 34px;\n padding: 0 9px;\n outline: none;\n\n &:disabled {\n cursor: not-allowed;\n background: $verdocs-grey-2;\n border: 1px solid $verdocs-grey-1;\n }\n\n &::placeholder {\n color: $light-disabled-color;\n opacity: 1;\n }\n\n &:focus {\n outline: 1px solid $border-color-highlight;\n }\n }\n\n .input-label {\n display: block;\n color: $label-color-light;\n font-weight: 700;\n font-size: 14px;\n margin: 0 0 4px 0;\n }\n\n .required {\n color: red;\n margin-left: 2px;\n display: inline-block;\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 .input-container {\n position: relative;\n }\n\n .clear {\n top: 7px;\n right: 5px;\n width: 18px;\n height: 18px;\n fill: #cccccc;\n position: absolute;\n\n &:hover {\n fill: #720101;\n cursor: pointer;\n }\n }\n\n .copy {\n top: 7px;\n right: 5px;\n width: 18px;\n height: 18px;\n fill: #cccccc;\n position: absolute;\n\n &:hover {\n fill: $verdocs-purple;\n cursor: pointer;\n }\n }\n\n .toggle-pw {\n top: 5px;\n right: 7px;\n width: 18px;\n height: 18px;\n stroke: #cccccc;\n //fill: #cccccc;\n position: absolute;\n\n &:hover {\n fill: $verdocs-purple;\n cursor: pointer;\n }\n }\n\n &.clearable,\n &.copyable {\n .input-element {\n padding-right: 32px;\n }\n }\n}\n","import {Component, Element, Prop, Host, h, State} from '@stencil/core';\nimport {VerdocsToast} from '../../../utils/Toast';\n\nconst ClearIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 122.881 122.88\"><g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M61.44,0c33.933,0,61.441,27.507,61.441,61.439 c0,33.933-27.508,61.44-61.441,61.44C27.508,122.88,0,95.372,0,61.439C0,27.507,27.508,0,61.44,0L61.44,0z M81.719,36.226 c1.363-1.363,3.572-1.363,4.936,0c1.363,1.363,1.363,3.573,0,4.936L66.375,61.439l20.279,20.278c1.363,1.363,1.363,3.573,0,4.937 c-1.363,1.362-3.572,1.362-4.936,0L61.44,66.376L41.162,86.654c-1.362,1.362-3.573,1.362-4.936,0c-1.363-1.363-1.363-3.573,0-4.937 l20.278-20.278L36.226,41.162c-1.363-1.363-1.363-3.573,0-4.936c1.363-1.363,3.573-1.363,4.936,0L61.44,56.504L81.719,36.226 L81.719,36.226z\"/></g></svg>`;\nconst CopyIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M15.988 3.012A2.25 2.25 0 0118 5.25v6.5A2.25 2.25 0 0115.75 14H13.5V7A2.5 2.5 0 0011 4.5H8.128a2.252 2.252 0 011.884-1.488A2.25 2.25 0 0112.25 1h1.5a2.25 2.25 0 012.238 2.012zM11.5 3.25a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v.25h-3v-.25z\" clip-rule=\"evenodd\" /><path fill-rule=\"evenodd\" d=\"M2 7a1 1 0 011-1h8a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V7zm2 3.25a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zm0 3.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z\" clip-rule=\"evenodd\" /></svg>`;\nconst EyeIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\" /><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\" /></svg>`;\nconst EyeSlashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88\" /></svg>`;\n\n/*\n Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.\n \n ```ts\n * <verdocs-text-input type=\"text\" label=\"Name\" placeholder=\"Enter your name...\" value=\"\" />\n * ```\n /\n@Component({\n tag: 'verdocs-text-input',\n styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n private inputEl: HTMLInputElement;\n\n @Element()\n hostEl: HTMLElement;\n\n /\n The initial value for the input field.\n /\n @Prop({mutable: true, reflect: true}) value: string = '';\n\n /\n The label for the field.\n /\n @Prop() label: string = '';\n\n /\n The placeholder for the field.\n /\n @Prop() placeholder: string = '';\n\n /\n If desired, the autocomplete attribute to set.\n /\n @Prop() autocomplete: string = '';\n\n /\n If supplied, a help icon will be displayed to provide the user more information.\n /\n @Prop() helpText: string = '';\n\n /\n If set, a clear button will be displayed.\n /\n @Prop() clearable = false;\n\n /\n If set, a copy-to-clipboard button will be displayed. NOTE: A field may not be\n * both clearable and copyable. If both properties are set to true, copyable will\n * be ignored.\n /\n @Prop() copyable = false;\n\n /\n The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n * (e.g. a date picker) will be supported by other controls in the future.\n /\n @Prop() type: 'text' \| 'password' \| 'email' \| 'number' \| 'search' \| 'tel' \| 'url' = 'text';\n\n /\n Should the field be disabled?\n /\n @Prop() disabled: boolean = false;\n\n /\n Should the field be required?\n /\n @Prop() required: boolean = false;\n\n @State() showingPw: boolean = false;\n\n copyToClipboard() {\n this.inputEl.select();\n navigator.clipboard\n .writeText(this.value)\n .then(() => VerdocsToast('Copied!'))\n .catch(e => console.log('Error copying to clipboard', e));\n }\n\n render() {\n return (\n <Host class={`input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}`}>\n <label>\n {this.label && (\n <div class=\"input-label\">\n {this.label + ':'}\n {this.required && <span class=\"required\"></span>}\n </div>\n )}\n\n <div class=\"input-container\">\n <input\n type={this.type === 'password' && this.showingPw ? 'text' : this.type}\n value={this.value}\n required={this.required}\n class=\"input-element\"\n data-lpignore=\"true\"\n disabled={this.disabled}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n // onBlur={(e: any) => this.blur?.emit(e.target.value)}\n ref={el => (this.inputEl = el as HTMLInputElement)}\n onInput={(e: any) => (this.value = e.target.value)}\n />\n\n {this.clearable && this.value && (\n <span\n innerHTML={ClearIcon}\n class=\"clear\"\n onClick={() => {\n // We need to allow the onInput event to fire first in case\n // the user was focused on this field before clicking clear.\n setTimeout(() => {\n this.value = '';\n this.inputEl?.setAttribute('value', '');\n // We need to allow the value to \"settle\"\n setTimeout(() => {\n this.inputEl?.dispatchEvent(new window.Event('focusout'));\n this.inputEl?.blur();\n }, 50);\n }, 50);\n }}\n />\n )}\n\n {this.type === 'password' && (\n <span\n innerHTML={this.showingPw ? EyeIcon : EyeSlashIcon}\n class=\"toggle-pw\"\n onClick={() => {\n this.showingPw = !this.showingPw;\n }}\n />\n )}\n\n {!this.clearable && this.copyable && this.value && <span innerHTML={CopyIcon} class=\"copy\" onClick={() => this.copyToClipboard()} />}\n </div>\n\n {this.helpText && <verdocs-help-icon text={this.helpText} />}\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-ec039160.js","mappings":"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","names":[],"sources":["src/components/controls/verdocs-text-input/verdocs-text-input.scss?tag=verdocs-text-input","src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-text-input {\n font-family: $primary-font;\n box-sizing: border-box;\n margin: 0 0 10px 0;\n display: block;\n\n .input-element {\n box-sizing: border-box;\n border: 1px solid $border-color;\n border-radius: 4px;\n background: $verdocs-grey-4;\n color: #000;\n width: 100%;\n font-size: 16px;\n height: 34px;\n padding: 0 9px;\n outline: none;\n\n &:disabled {\n cursor: not-allowed;\n background: $verdocs-grey-2;\n border: 1px solid $verdocs-grey-1;\n }\n\n &::placeholder {\n color: $light-disabled-color;\n opacity: 1;\n }\n\n &:focus {\n outline: 1px solid $border-color-highlight;\n }\n }\n\n .input-label {\n display: block;\n color: $label-color-light;\n font-weight: 700;\n font-size: 14px;\n margin: 0 0 4px 0;\n }\n\n .required {\n color: red;\n margin-left: 2px;\n display: inline-block;\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 .input-container {\n position: relative;\n }\n\n .clear {\n top: 7px;\n right: 5px;\n width: 18px;\n height: 18px;\n fill: #cccccc;\n position: absolute;\n\n &:hover {\n fill: #720101;\n cursor: pointer;\n }\n }\n\n .copy {\n top: 7px;\n right: 5px;\n width: 18px;\n height: 18px;\n fill: #cccccc;\n position: absolute;\n\n &:hover {\n fill: $verdocs-purple;\n cursor: pointer;\n }\n }\n\n .toggle-pw {\n top: 5px;\n right: 7px;\n width: 18px;\n height: 18px;\n stroke: #cccccc;\n //fill: #cccccc;\n position: absolute;\n\n &:hover {\n fill: $verdocs-purple;\n cursor: pointer;\n }\n }\n\n &.clearable,\n &.copyable {\n .input-element {\n padding-right: 32px;\n }\n }\n}\n","import {Component, Element, Prop, Host, h, State} from '@stencil/core';\nimport {VerdocsToast} from '../../../utils/Toast';\n\nconst ClearIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 122.881 122.88\"><g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M61.44,0c33.933,0,61.441,27.507,61.441,61.439 c0,33.933-27.508,61.44-61.441,61.44C27.508,122.88,0,95.372,0,61.439C0,27.507,27.508,0,61.44,0L61.44,0z M81.719,36.226 c1.363-1.363,3.572-1.363,4.936,0c1.363,1.363,1.363,3.573,0,4.936L66.375,61.439l20.279,20.278c1.363,1.363,1.363,3.573,0,4.937 c-1.363,1.362-3.572,1.362-4.936,0L61.44,66.376L41.162,86.654c-1.362,1.362-3.573,1.362-4.936,0c-1.363-1.363-1.363-3.573,0-4.937 l20.278-20.278L36.226,41.162c-1.363-1.363-1.363-3.573,0-4.936c1.363-1.363,3.573-1.363,4.936,0L61.44,56.504L81.719,36.226 L81.719,36.226z\"/></g></svg>`;\nconst CopyIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M15.988 3.012A2.25 2.25 0 0118 5.25v6.5A2.25 2.25 0 0115.75 14H13.5V7A2.5 2.5 0 0011 4.5H8.128a2.252 2.252 0 011.884-1.488A2.25 2.25 0 0112.25 1h1.5a2.25 2.25 0 012.238 2.012zM11.5 3.25a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v.25h-3v-.25z\" clip-rule=\"evenodd\" /><path fill-rule=\"evenodd\" d=\"M2 7a1 1 0 011-1h8a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V7zm2 3.25a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zm0 3.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z\" clip-rule=\"evenodd\" /></svg>`;\nconst EyeIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\" /><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\" /></svg>`;\nconst EyeSlashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88\" /></svg>`;\n\n/*\n Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.\n \n ```ts\n * <verdocs-text-input type=\"text\" label=\"Name\" placeholder=\"Enter your name...\" value=\"\" />\n * ```\n /\n@Component({\n tag: 'verdocs-text-input',\n styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n private inputEl: HTMLInputElement;\n\n @Element()\n hostEl: HTMLElement;\n\n /\n The initial value for the input field.\n /\n @Prop({mutable: true, reflect: true}) value: string = '';\n\n /\n The label for the field.\n /\n @Prop() label: string = '';\n\n /\n The placeholder for the field.\n /\n @Prop() placeholder: string = '';\n\n /\n If desired, the autocomplete attribute to set.\n /\n @Prop() autocomplete: string = '';\n\n /\n If supplied, a help icon will be displayed to provide the user more information.\n /\n @Prop() helpText: string = '';\n\n /\n If set, a clear button will be displayed.\n /\n @Prop() clearable = false;\n\n /\n If set, a copy-to-clipboard button will be displayed. NOTE: A field may not be\n * both clearable and copyable. If both properties are set to true, copyable will\n * be ignored.\n /\n @Prop() copyable = false;\n\n /\n The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n * (e.g. a date picker) will be supported by other controls in the future.\n /\n @Prop() type: 'text' \| 'password' \| 'email' \| 'number' \| 'search' \| 'tel' \| 'url' = 'text';\n\n /\n Should the field be disabled?\n /\n @Prop() disabled: boolean = false;\n\n /\n Should the field be required?\n /\n @Prop() required: boolean = false;\n\n @State() showingPw: boolean = false;\n\n copyToClipboard() {\n this.inputEl.select();\n navigator.clipboard\n .writeText(this.value)\n .then(() => VerdocsToast('Copied!'))\n .catch(e => console.log('Error copying to clipboard', e));\n }\n\n render() {\n return (\n <Host class={`input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}`}>\n <label>\n {this.label && (\n <div class=\"input-label\">\n {this.label + ':'}\n {this.required && <span class=\"required\"></span>}\n </div>\n )}\n\n <div class=\"input-container\">\n <input\n type={this.type === 'password' && this.showingPw ? 'text' : this.type}\n value={this.value}\n required={this.required}\n class=\"input-element\"\n data-lpignore=\"true\"\n disabled={this.disabled}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n // onBlur={(e: any) => this.blur?.emit(e.target.value)}\n ref={el => (this.inputEl = el as HTMLInputElement)}\n onInput={(e: any) => (this.value = e.target.value)}\n />\n\n {this.clearable && this.value && (\n <span\n innerHTML={ClearIcon}\n class=\"clear\"\n onClick={() => {\n // We need to allow the onInput event to fire first in case\n // the user was focused on this field before clicking clear.\n setTimeout(() => {\n this.value = '';\n this.inputEl?.setAttribute('value', '');\n // We need to allow the value to \"settle\"\n setTimeout(() => {\n this.inputEl?.dispatchEvent(new window.Event('focusout'));\n this.inputEl?.blur();\n }, 50);\n }, 50);\n }}\n />\n )}\n\n {this.type === 'password' && (\n <span\n innerHTML={this.showingPw ? EyeIcon : EyeSlashIcon}\n class=\"toggle-pw\"\n onClick={() => {\n this.showingPw = !this.showingPw;\n }}\n />\n )}\n\n {!this.clearable && this.copyable && this.value && <span innerHTML={CopyIcon} class=\"copy\" onClick={() => this.copyToClipboard()} />}\n </div>\n\n {this.helpText && <verdocs-help-icon text={this.helpText} />}\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-7bd7baa6.js → p-fdafdf2c.js} RENAMED Viewed

@@ -2,17 +2,17 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragme
 import { VerdocsEndpoint, getRGBA } from '@verdocs/js-sdk';
 import { S as SettingsIcon } from './p-b0766439.js';
 import { S as Store } from './p-d4be87ef.js';
-import { d as defineCustomElement$b } from './p-0e332769.js';
-import { d as defineCustomElement$a } from './p-3201d529.js';
-import { d as defineCustomElement$9 } from './p-84ae0283.js';
-import { d as defineCustomElement$8 } from './p-7f32e087.js';
-import { d as defineCustomElement$7 } from './p-1ae5d7e0.js';
-import { d as defineCustomElement$6 } from './p-b7d080eb.js';
-import { d as defineCustomElement$5 } from './p-6719b0d7.js';
-import { d as defineCustomElement$4 } from './p-62743fd3.js';
-import { d as defineCustomElement$3 } from './p-f238b25b.js';
-import { d as defineCustomElement$2 } from './p-325b3828.js';
-import { d as defineCustomElement$1 } from './p-2ef2d490.js';
+import { d as defineCustomElement$b } from './p-1af1f96c.js';
+import { d as defineCustomElement$a } from './p-1cfa5639.js';
+import { d as defineCustomElement$9 } from './p-168f7836.js';
+import { d as defineCustomElement$8 } from './p-b685f6ab.js';
+import { d as defineCustomElement$7 } from './p-e97100c4.js';
+import { d as defineCustomElement$6 } from './p-5044943a.js';
+import { d as defineCustomElement$5 } from './p-0fc88b2b.js';
+import { d as defineCustomElement$4 } from './p-36a65545.js';
+import { d as defineCustomElement$3 } from './p-21f25179.js';
+import { d as defineCustomElement$2 } from './p-ec039160.js';
+import { d as defineCustomElement$1 } from './p-61ca8465.js';
 const verdocsFieldAttachmentCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:24px;height:24px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-attachment 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-attachment svg{width:16px;height:16px}verdocs-field-attachment.disabled svg{opacity:0.5}verdocs-field-attachment.disabled svg span{cursor:inherit}verdocs-field-attachment .attach{cursor:inherit;width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-field-attachment.required .attach{border:1px solid #cc0000}verdocs-field-attachment verdocs-button-panel{top:1px;left:-19px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-attachment verdocs-button-panel[data-active],verdocs-field-attachment verdocs-button-panel:hover{opacity:1}verdocs-field-attachment verdocs-button-panel .icon svg{fill:#333333}verdocs-field-attachment verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-attachment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-attachment .settings-icon svg{fill:#707ae5}verdocs-field-attachment .settings-icon:hover{opacity:1}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";
 const VerdocsFieldAttachmentStyle0 = verdocsFieldAttachmentCss;
@@ -197,4 +197,4 @@ function defineCustomElement() {
 export { VerdocsFieldAttachment as V, defineCustomElement as d };
-//# sourceMappingURL=p-7bd7baa6.js.map
+//# sourceMappingURL=p-fdafdf2c.js.map

package/dist/components/{p-7bd7baa6.js.map → p-fdafdf2c.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-7bd7baa6.js","mappings":"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","names":[],"sources":["src/components/fields/verdocs-field-attachment/verdocs-field-attachment.scss?tag=verdocs-field-attachment","src/components/fields/verdocs-field-attachment/verdocs-field-attachment.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-attachment {\n font-family: $verdocs-primary-font;\n box-sizing: border-box;\n width: 24px;\n height: 24px;\n display: block;\n font-size: 11px;\n position: relative;\n scroll-margin: 20px 0;\n background-color: transparent;\n transform-origin: bottom left;\n\n &.focused {\n animation: verdocs-field-pulse 0.4s 1;\n }\n\n label {\n top: -14px;\n left: -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 svg {\n width: 16px;\n height: 16px;\n }\n\n &.disabled svg {\n opacity: 0.5;\n\n span {\n cursor: inherit;\n }\n }\n\n .attach {\n // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n cursor: inherit;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &.required {\n .attach {\n border: 1px solid $verdocs-red-1;\n }\n }\n\n verdocs-button-panel {\n top: 1px;\n left: -19px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n\n .settings-icon {\n position: absolute;\n top: -3px;\n left: -20px;\n display: inline-block;\n cursor: pointer;\n opacity: 0.3;\n\n svg {\n fill: $border-color;\n }\n\n &:hover {\n opacity: 1;\n }\n }\n}\n\n@keyframes verdocs-field-pulse {\n 0% {\n background-color: rgba(0, 0, 0, 0.35);\n }\n 50% {\n background-color: rgba(0, 0, 0, 0);\n }\n 100% {\n background-color: rgba(0, 0, 0, 0.35);\n }\n}\n","import {ITemplateField, getRGBA, VerdocsEndpoint, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, State, Fragment, Element} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\nexport interface ISelectedFile {\n lastModified: number;\n size: number;\n type: string;\n name: string;\n data: string;\n}\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\nconst AttachedIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#339933\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-file-check\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"m9 15 2 2 4-4\"/></svg>`;\n\n/*\n Displays an attachment field.\n /\n@Component({\n tag: 'verdocs-field-attachment',\n styleUrl: 'verdocs-field-attachment.scss',\n shadow: false,\n})\nexport class VerdocsFieldAttachment {\n @Element() el: HTMLElement;\n\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n * This component self-manages its resize (width) behavior when in edit-template mode, and uses\n * this endpoint to save changes.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n Fields may be attached to templates or envelopes, but only template fields may be edited.\n /\n @Prop({reflect: true}) source: 'template' \| 'envelope' = 'template';\n\n /\n The source template or envelope ID the field is found in.\n /\n @Prop({reflect: true}) sourceid: string = '';\n\n /\n The name of the field to display.\n /\n @Prop({reflect: true}) fieldname: string = '';\n\n /\n Override the field's settings. This is intended to be used during signing when fields are being\n * mutated.\n /\n @Prop() field: IEnvelopeField \| null \| undefined = null;\n\n /\n If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n /\n @Prop({reflect: true}) disabled?: boolean = false;\n\n /\n If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n /\n @Prop({reflect: true}) editable?: boolean = false;\n\n /\n If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n /\n @Prop({reflect: true}) moveable?: boolean = false;\n\n /\n If set, the field is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop({reflect: true}) done?: boolean = false;\n\n /\n If set, the field will be be scaled horizontally by this factor.\n /\n @Prop({reflect: true}) xscale?: number = 1;\n\n /\n If set, the field will be be scaled vertically by this factor.\n /\n @Prop({reflect: true}) yscale?: number = 1;\n\n /\n The page the field is on\n /\n @Prop({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 a file is attached by the signer.\n /\n @Event({composed: true}) attached: EventEmitter<ISelectedFile>;\n\n /\n Event fired when the field is deleted. Note that this is for the FIELD (e.g. in\n * Build) not for any attachments (during signing).\n /\n @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n @State() showingProperties?: boolean = false;\n @State() dialogOpen?: boolean = false;\n @State() selectedFile?: ISelectedFile \| null = null;\n @State() focused = false;\n\n @Method()\n async focusField() {\n // Our input field is fake, so we fake the flash too\n this.focused = true;\n this.dialogOpen = true;\n setTimeout(() => {\n this.focused = false;\n }, 500);\n }\n\n @Method()\n async showSettingsPanel() {\n const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n if (settingsPanel && settingsPanel.showPanel) {\n settingsPanel.showPanel();\n }\n }\n\n @Method()\n async hideSettingsPanel() {\n const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n if (settingsPanel && settingsPanel.hidePanel) {\n settingsPanel.hidePanel();\n }\n }\n\n handleShow() {\n this.dialogOpen = true;\n }\n\n handleUploadNext = (e: any) => {\n console.log('Upload next', e);\n this.dialogOpen = false;\n this.selectedFile = e.detail[0];\n this.attached?.emit(e.detail[0]);\n };\n\n handleUploadRemove = (e: any) => {\n e.preventDefault();\n e.stopPropagation();\n this.dialogOpen = false;\n this.selectedFile = null;\n this.deleted?.emit({fieldName: this.fieldname});\n };\n\n render() {\n const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n const {required = false, value = '', label = '', settings = {}} = field \|\| {};\n const backgroundColor = getRGBA(index);\n\n const hasFile = value \|\| !!this.selectedFile;\n\n if (done) {\n return (\n <Host class={{done}}>\n <div class=\"attach\" innerHTML={hasFile ? AttachedIcon : PaperclipIcon} />\n </Host>\n );\n }\n\n return (\n <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n {label && <label>{label}</label>}\n\n <div class=\"attach\" innerHTML={hasFile ? AttachedIcon : PaperclipIcon} onClick={() => !disabled && this.handleShow()} />\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.showingProperties = false)}\n onDelete={() => {\n this.deleted?.emit({fieldName: fieldname});\n return this.hideSettingsPanel();\n }}\n onSettingsChanged={e => {\n this.settingsChanged?.emit(e.detail);\n return this.hideSettingsPanel();\n }}\n helpText={'Attachments allow the user to attach their own documents (e.g. resumes or disclosures) to a signing flow.'}\n />\n </verdocs-portal>\n )}\n </Fragment>\n )}\n\n {this.dialogOpen && (\n <verdocs-portal>\n <verdocs-upload-dialog\n existingFile={settings}\n onNext={e => this.handleUploadNext(e)}\n onRemove={e => this.handleUploadRemove(e)}\n onExit={() => (this.dialogOpen = false)}\n />\n </verdocs-portal>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-fdafdf2c.js","mappings":"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","names":[],"sources":["src/components/fields/verdocs-field-attachment/verdocs-field-attachment.scss?tag=verdocs-field-attachment","src/components/fields/verdocs-field-attachment/verdocs-field-attachment.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-attachment {\n font-family: $verdocs-primary-font;\n box-sizing: border-box;\n width: 24px;\n height: 24px;\n display: block;\n font-size: 11px;\n position: relative;\n scroll-margin: 20px 0;\n background-color: transparent;\n transform-origin: bottom left;\n\n &.focused {\n animation: verdocs-field-pulse 0.4s 1;\n }\n\n label {\n top: -14px;\n left: -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 svg {\n width: 16px;\n height: 16px;\n }\n\n &.disabled svg {\n opacity: 0.5;\n\n span {\n cursor: inherit;\n }\n }\n\n .attach {\n // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n cursor: inherit;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &.required {\n .attach {\n border: 1px solid $verdocs-red-1;\n }\n }\n\n verdocs-button-panel {\n top: 1px;\n left: -19px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n\n .settings-icon {\n position: absolute;\n top: -3px;\n left: -20px;\n display: inline-block;\n cursor: pointer;\n opacity: 0.3;\n\n svg {\n fill: $border-color;\n }\n\n &:hover {\n opacity: 1;\n }\n }\n}\n\n@keyframes verdocs-field-pulse {\n 0% {\n background-color: rgba(0, 0, 0, 0.35);\n }\n 50% {\n background-color: rgba(0, 0, 0, 0);\n }\n 100% {\n background-color: rgba(0, 0, 0, 0.35);\n }\n}\n","import {ITemplateField, getRGBA, VerdocsEndpoint, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, State, Fragment, Element} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\nexport interface ISelectedFile {\n lastModified: number;\n size: number;\n type: string;\n name: string;\n data: string;\n}\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\nconst AttachedIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#339933\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-file-check\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"m9 15 2 2 4-4\"/></svg>`;\n\n/*\n Displays an attachment field.\n /\n@Component({\n tag: 'verdocs-field-attachment',\n styleUrl: 'verdocs-field-attachment.scss',\n shadow: false,\n})\nexport class VerdocsFieldAttachment {\n @Element() el: HTMLElement;\n\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n * This component self-manages its resize (width) behavior when in edit-template mode, and uses\n * this endpoint to save changes.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n Fields may be attached to templates or envelopes, but only template fields may be edited.\n /\n @Prop({reflect: true}) source: 'template' \| 'envelope' = 'template';\n\n /\n The source template or envelope ID the field is found in.\n /\n @Prop({reflect: true}) sourceid: string = '';\n\n /\n The name of the field to display.\n /\n @Prop({reflect: true}) fieldname: string = '';\n\n /\n Override the field's settings. This is intended to be used during signing when fields are being\n * mutated.\n /\n @Prop() field: IEnvelopeField \| null \| undefined = null;\n\n /\n If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n /\n @Prop({reflect: true}) disabled?: boolean = false;\n\n /\n If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n /\n @Prop({reflect: true}) editable?: boolean = false;\n\n /\n If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n /\n @Prop({reflect: true}) moveable?: boolean = false;\n\n /\n If set, the field is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop({reflect: true}) done?: boolean = false;\n\n /\n If set, the field will be be scaled horizontally by this factor.\n /\n @Prop({reflect: true}) xscale?: number = 1;\n\n /\n If set, the field will be be scaled vertically by this factor.\n /\n @Prop({reflect: true}) yscale?: number = 1;\n\n /\n The page the field is on\n /\n @Prop({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 a file is attached by the signer.\n /\n @Event({composed: true}) attached: EventEmitter<ISelectedFile>;\n\n /\n Event fired when the field is deleted. Note that this is for the FIELD (e.g. in\n * Build) not for any attachments (during signing).\n /\n @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n @State() showingProperties?: boolean = false;\n @State() dialogOpen?: boolean = false;\n @State() selectedFile?: ISelectedFile \| null = null;\n @State() focused = false;\n\n @Method()\n async focusField() {\n // Our input field is fake, so we fake the flash too\n this.focused = true;\n this.dialogOpen = true;\n setTimeout(() => {\n this.focused = false;\n }, 500);\n }\n\n @Method()\n async showSettingsPanel() {\n const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n if (settingsPanel && settingsPanel.showPanel) {\n settingsPanel.showPanel();\n }\n }\n\n @Method()\n async hideSettingsPanel() {\n const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n if (settingsPanel && settingsPanel.hidePanel) {\n settingsPanel.hidePanel();\n }\n }\n\n handleShow() {\n this.dialogOpen = true;\n }\n\n handleUploadNext = (e: any) => {\n console.log('Upload next', e);\n this.dialogOpen = false;\n this.selectedFile = e.detail[0];\n this.attached?.emit(e.detail[0]);\n };\n\n handleUploadRemove = (e: any) => {\n e.preventDefault();\n e.stopPropagation();\n this.dialogOpen = false;\n this.selectedFile = null;\n this.deleted?.emit({fieldName: this.fieldname});\n };\n\n render() {\n const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n const {required = false, value = '', label = '', settings = {}} = field \|\| {};\n const backgroundColor = getRGBA(index);\n\n const hasFile = value \|\| !!this.selectedFile;\n\n if (done) {\n return (\n <Host class={{done}}>\n <div class=\"attach\" innerHTML={hasFile ? AttachedIcon : PaperclipIcon} />\n </Host>\n );\n }\n\n return (\n <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n {label && <label>{label}</label>}\n\n <div class=\"attach\" innerHTML={hasFile ? AttachedIcon : PaperclipIcon} onClick={() => !disabled && this.handleShow()} />\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.showingProperties = false)}\n onDelete={() => {\n this.deleted?.emit({fieldName: fieldname});\n return this.hideSettingsPanel();\n }}\n onSettingsChanged={e => {\n this.settingsChanged?.emit(e.detail);\n return this.hideSettingsPanel();\n }}\n helpText={'Attachments allow the user to attach their own documents (e.g. resumes or disclosures) to a signing flow.'}\n />\n </verdocs-portal>\n )}\n </Fragment>\n )}\n\n {this.dialogOpen && (\n <verdocs-portal>\n <verdocs-upload-dialog\n existingFile={settings}\n onNext={e => this.handleUploadNext(e)}\n onRemove={e => this.handleUploadRemove(e)}\n onExit={() => (this.dialogOpen = false)}\n />\n </verdocs-portal>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/verdocs-auth.js CHANGED Viewed

@@ -2,9 +2,9 @@ import { p as proxyCustomElement, H, c as createEvent, h } from './p-324ed895.js
 import { VerdocsEndpoint, createProfile, verifyEmail, authenticate, getMyUser, resendVerification, resetPassword } from '@verdocs/js-sdk';
 import { V as VerdocsToast } from './p-04c07b7b.js';
 import { S as SDKError } from './p-fd97809c.js';
-import { d as defineCustomElement$4 } from './p-0e332769.js';
-import { d as defineCustomElement$3 } from './p-7f32e087.js';
-import { d as defineCustomElement$2 } from './p-325b3828.js';
+import { d as defineCustomElement$4 } from './p-1af1f96c.js';
+import { d as defineCustomElement$3 } from './p-b685f6ab.js';
+import { d as defineCustomElement$2 } from './p-ec039160.js';
 const verdocsAuthCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-auth{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}verdocs-auth .form{width:320px;display:-ms-flexbox;display:flex;padding:20px;max-width:90%;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-pack:center;justify-content:center;background:#ffffff}verdocs-auth .logo{width:128px;max-width:100%;margin:20px 0 30px}verdocs-auth h3{color:#092c4c;text-align:center;font-weight:400;font-size:18px;line-height:1.75;margin:0}verdocs-auth em{font-size:14px;margin:15px 0}verdocs-auth .buttons{gap:20px;margin:20px 0 0 0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}verdocs-auth .status-result{display:none}verdocs-auth .status-result.debug{white-space:pre-wrap;font-size:14px;background:#fff;padding:10px;display:block;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}verdocs-auth form{width:100%}verdocs-auth verdocs-text-input{margin-bottom:10px}verdocs-auth .account-option{gap:8px;margin:20px 0 8px 0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-auth p{color:#092c4c;margin:1em 0;font-size:14px}verdocs-auth p+p{margin-top:0}verdocs-auth verdocs-help-icon{margin-top:18px;display:-ms-flexbox;display:flex;width:32px;height:32px;-ms-flex:0 0 32px;flex:0 0 32px}verdocs-auth .already-have{color:#092c4c;margin:0.5em 0;font-size:14px}";
 const VerdocsAuthStyle0 = verdocsAuthCss;