@verdocs/web-sdk 1.9.25 → 1.9.30

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

@@ -148,7 +148,7 @@ export class VerdocsDocumentPage {
       },
       "virtualHeight": {
         "type": "number",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "number",
           "resolved": "number",

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

@@ -1 +1 @@
-{"version":3,"file":"verdocs-document-page.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-document-page/verdocs-document-page.tsx"],"names":[],"mappings":"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","sourcesContent":["// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\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-document-page',\n  styleUrl: 'verdocs-document-page.scss',\n  shadow: false,\n})\nexport class VerdocsDocumentPage {\n  @Element() container: HTMLElement;\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * The URL of the image to render as the page background.\n   */\n  @Prop() pageImageUri: string = '';\n\n  /**\n   * The page number being rendered. Not used internally, but included in callbacks/events beacuse page numbers\n   * are used everywhere in document handling. (Reminder: page numbers are 1-based.)\n   */\n  @Prop() pageNumber: number = 1;\n\n  /**\n   * The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop() virtualWidth: number = 612;\n\n  /**\n   * The \"virtual\" height of the page canvas.  Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop() virtualHeight: number = 792;\n\n  /**\n   * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n   * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n   * if `pages` was ['page', 'fields'] the structure will be:\n   *\n   * ```\n   *     <div id=\"verdocs-document-page-ker2fr1p9\">\n   *       <div id=\"verdocs-document-page-ker2fr1p9-page\"></div>\n   *       <div id=\"verdocs-document-page-ker2fr1p9-fields\"></div>\n   *     </div>\n   * ```\n   */\n  @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n  /**\n   * Fired when a page has been rendered. This is also fired when the page is resized.\n   */\n  @Event() pageRendered: EventEmitter<IDocumentPageInfo>;\n\n  @State() containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() renderedWidth: number = this.virtualWidth;\n  @State() renderedHeight: number = this.virtualHeight;\n  @State() naturalWidth: number = this.virtualWidth;\n  @State() naturalHeight: number = this.virtualHeight;\n  @State() aspectRatio: number = this.virtualWidth / this.virtualHeight;\n\n  @State() skipFirstNotification = true;\n\n  componentDidLoad(): void {\n    this.resizeObserver = new ResizeObserver(\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      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}}>\n        {this.layers.map(layer =>\n          layer.type === 'div' ? (\n            <div class=\"verdocs-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}} />\n          ) : (\n            <img\n              class=\"verdocs-document-page-layer img\"\n              id={`${this.containerId}-${layer.name}`}\n              src={this.pageImageUri}\n              alt={`Page ${this.pageNumber}`}\n              aria-hidden={true}\n              onLoad={(e: any) => {\n                // 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              }}\n            />\n          ),\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-document-page.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-document-page/verdocs-document-page.tsx"],"names":[],"mappings":"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","sourcesContent":["// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\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-document-page',\n  styleUrl: 'verdocs-document-page.scss',\n  shadow: false,\n})\nexport class VerdocsDocumentPage {\n  @Element() container: HTMLElement;\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * The URL of the image to render as the page background.\n   */\n  @Prop() pageImageUri: string = '';\n\n  /**\n   * The page number being rendered. Not used internally, but included in callbacks/events beacuse page numbers\n   * are used everywhere in document handling. (Reminder: page numbers are 1-based.)\n   */\n  @Prop() pageNumber: number = 1;\n\n  /**\n   * The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop() virtualWidth: number = 612;\n\n  /**\n   * The \"virtual\" height of the page canvas.  Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop({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\n  @State() renderedWidth: number = this.virtualWidth;\n  @State() renderedHeight: number = this.virtualHeight;\n  @State() naturalWidth: number = this.virtualWidth;\n  @State() naturalHeight: number = this.virtualHeight;\n  @State() aspectRatio: number = this.virtualWidth / this.virtualHeight;\n\n  @State() skipFirstNotification = true;\n\n  componentDidLoad(): void {\n    this.resizeObserver = new ResizeObserver(\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      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}}>\n        {this.layers.map(layer =>\n          layer.type === 'div' ? (\n            <div class=\"verdocs-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}} />\n          ) : (\n            <img\n              class=\"verdocs-document-page-layer img\"\n              id={`${this.containerId}-${layer.name}`}\n              src={this.pageImageUri}\n              alt={`Page ${this.pageNumber}`}\n              aria-hidden={true}\n              onLoad={(e: any) => {\n                // 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              }}\n            />\n          ),\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 verdocs-field-checkbox {
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
-  font-size: 11px;
+  font-size: 14px;
   position: relative;
   background-color: transparent;
   transform-origin: bottom left;