import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-AiOs8RvA.js';
import { VerdocsEndpoint, getTemplateDocumentPageDisplayUri, getTemplate } from '@verdocs/js-sdk';
import { t as throttle, d as getControlStyles, g as getFieldId } from './p-rIIybUCF.js';
import { S as Store } from './p-DoY8Nb0Y.js';
import { d as defineCustomElement$n } from './p-DMVmShTi.js';
import { d as defineCustomElement$m } from './p-B4xcxu5g.js';
import { d as defineCustomElement$l } from './p-Bk16Ytky.js';
import { d as defineCustomElement$k } from './p-C5Hi6NGR.js';
import { d as defineCustomElement$j } from './p-BZ7nMmQS.js';
import { d as defineCustomElement$i } from './p-BSDvmxMU.js';
import { d as defineCustomElement$h } from './p-Csw9PeYe.js';
import { d as defineCustomElement$g } from './p-1kh8Deav.js';
import { d as defineCustomElement$f } from './p-Bpjri0PS.js';
import { d as defineCustomElement$e } from './p-S6uOMvKz.js';
import { d as defineCustomElement$d } from './p-D8AC3n41.js';
import { d as defineCustomElement$c } from './p-01f6WUnw.js';
import { d as defineCustomElement$b } from './p--b9mxDw9.js';
import { d as defineCustomElement$a } from './p-Bbomvxyl.js';
import { d as defineCustomElement$9 } from './p-BFDNbXZz.js';
import { d as defineCustomElement$8 } from './p-I7r_G5nS.js';
import { d as defineCustomElement$7 } from './p-CCoJPI2W.js';
import { d as defineCustomElement$6 } from './p-BQtWBtuj.js';
import { d as defineCustomElement$5 } from './p-Cs2yaGJp.js';
import { d as defineCustomElement$4 } from './p-CcCzvmO0.js';
import { d as defineCustomElement$3 } from './p-Bvhap2eA.js';
import { d as defineCustomElement$2 } from './p-xz67XcVg.js';
import { d as defineCustomElement$1 } from './p-CPuyko5S.js';

const verdocsTemplateDocumentPageCss = "@-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-template-document-page{width:100%;position:relative}verdocs-template-document-page .verdocs-template-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-template-document-page .verdocs-template-document-page-layer.img{width:100%}verdocs-template-document-page .placeholder{opacity:0.1;width:612px;height:792px;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}";

const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class VerdocsTemplateDocumentPage extends H {
    constructor() {
        super();
        this.__registerHost();
        this.pageRendered = createEvent(this, "pageRendered");
        this.templateListenerId = null;
        /**
         * The endpoint to load from.
         */
        this.endpoint = VerdocsEndpoint.getDefault();
        /**
         * Whether the fields should be editable (Builder)
         */
        this.editable = false;
        /**
         * Whether the fields should be disabled (Builder)
         */
        this.disabled = false;
        /**
         * Whether the field are interactable (done/submitted disables this)
         */
        this.done = false;
        /**
         * The ID of the template the document is for.
         */
        this.templateId = '';
        /**
         * The ID of the document to display.
         */
        this.documentId = '';
        /**
         * The page number being rendered. (Reminder: page numbers are 1-based.)
         */
        this.pageNumber = 1;
        /**
         * The "virtual" width of the page canvas. Defaults to 612 which at 72dpi is 8.5" wide. This is used to compute
         * the aspect ratio of the final rendered element when scaling up/down.
         */
        this.virtualWidth = 612;
        /**
         * The "virtual" height of the page canvas.  Defaults to 792 which at 72dpi is 11" tall. This is used to compute
         * the aspect ratio of the final rendered element when scaling up/down.
         */
        this.virtualHeight = 792;
        /**
         * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.
         * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.
         * if `pages` was ['page', 'fields'] the structure will be:
         *
         * ```
         *     <div id="verdocs-document-page-ker2fr1p9">
         *       <div id="verdocs-document-page-ker2fr1p9-page"></div>
         *       <div id="verdocs-document-page-ker2fr1p9-fields"></div>
         *     </div>
         * ```
         */
        this.layers = [{ name: 'page', type: 'canvas' }];
        this.containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;
        this.renderedWidth = this.virtualWidth;
        this.renderedHeight = this.virtualHeight;
        this.naturalWidth = this.virtualWidth;
        this.naturalHeight = this.virtualHeight;
        this.aspectRatio = this.virtualWidth / this.virtualHeight;
        this.skipFirstNotification = true;
        this.pageDisplayUri = '';
        this.xScale = 1;
        this.yScale = 1;
        this.loading = true;
        this.template = null;
    }
    async componentWillLoad() {
        this.pageDisplayUri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber);
        this.listenToTemplate();
    }
    componentDidLoad() {
        this.resizeObserver = new ResizeObserver(throttle(entries => {
            for (const entry of entries) {
                const renderedWidth = entry.contentRect.width;
                this.renderedWidth = renderedWidth;
                this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);
            }
            this.notifyRenderedSize();
        }, 100));
        this.resizeObserver.observe(this.container);
    }
    componentDidUpdate() {
        // This is fired when fields are updated and triggers the parent to re-attach behaviors like drag-and-drop
        this.notifyRenderedSize();
    }
    disconnectedCallback() {
        var _a;
        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
        this.unlistenToTemplate();
    }
    async listenToTemplate() {
        this.unlistenToTemplate();
        Store.subscribe('templates', this.templateId, () => getTemplate(this.endpoint, this.templateId), false, (template) => {
            this.template = template;
            this.loading = false;
        });
    }
    unlistenToTemplate() {
        if (this.templateListenerId) {
            Store.store.delListener(this.templateListenerId);
            this.templateListenerId = null;
        }
    }
    notifyRenderedSize() {
        // We skip one notification because by default we will always get at least two, one when rendering the initial size
        // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.
        if (this.skipFirstNotification) {
            this.skipFirstNotification = false;
            return;
        }
        const xScale = this.renderedWidth / this.virtualWidth;
        if (this.xScale !== xScale) {
            this.xScale = xScale;
        }
        const yScale = this.renderedHeight / this.virtualHeight;
        if (this.yScale !== yScale) {
            this.yScale = yScale;
        }
        this.pageRendered.emit({
            // container: this.container,
            containerId: this.containerId,
            documentId: this.documentId,
            pageNumber: this.pageNumber,
            virtualWidth: this.virtualWidth,
            virtualHeight: this.virtualHeight,
            renderedWidth: this.renderedWidth,
            renderedHeight: this.renderedHeight,
            naturalWidth: this.naturalWidth,
            naturalHeight: this.naturalHeight,
            aspectRatio: this.aspectRatio,
            xScale,
            yScale,
        });
    }
    render() {
        if (this.loading) {
            return (h(Host, null, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", class: "placeholder", alt: "Placeholder page" })));
        }
        const height = `${this.renderedHeight}px`;
        return (h(Host, { id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => {
            var _a;
            return layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
                (((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || [])
                    .filter(field => field && field.page === this.pageNumber)
                    .map(field => {
                    var _a, _b;
                    const id = getFieldId(field);
                    let { name, type, multiline } = field;
                    const { xScale, yScale, templateId, editable, disabled, done, pageNumber } = this;
                    if (((_a = field['setting']) === null || _a === void 0 ? void 0 : _a.leading) > 0 || ((_b = field['settings']) === null || _b === void 0 ? void 0 : _b.leading) > 0) {
                        type = 'textarea';
                        multiline = true;
                    }
                    switch (type) {
                        case 'textbox':
                            return (h("verdocs-field-textbox", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, multiline: multiline, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
                        case 'textarea':
                            return (h("verdocs-field-textarea", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
                        case 'date':
                            return (h("verdocs-field-date", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
                        case 'attachment':
                            return (h("verdocs-field-attachment", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
                        case 'dropdown':
                            return (h("verdocs-field-dropdown", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
                        case 'initial':
                            return (h("verdocs-field-initial", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
                        case 'signature':
                            return (h("verdocs-field-signature", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, this.xScale, this.yScale) }));
                        case 'timestamp':
                            return (h("verdocs-field-timestamp", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
                        case 'checkbox':
                            return (h("verdocs-field-checkbox", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
                        case 'radio':
                            return (h("verdocs-field-radio", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
                        default:
                            return h(Fragment, null, name);
                    }
                }))) : this.pageDisplayUri ? (h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
                    // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
                    // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
                    // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values
                    // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the
                    // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the
                    // aspect ratio to adjust the "virtual" height in case the page is not 8.5"x11".
                    // TODO: Store this in the DB with each page.
                    this.naturalWidth = e.target.naturalWidth;
                    this.naturalHeight = e.target.naturalHeight;
                    this.aspectRatio = this.naturalWidth / this.naturalHeight;
                    this.virtualHeight = this.virtualWidth / this.aspectRatio;
                    this.renderedHeight = e.target.offsetWidth / this.aspectRatio;
                } })) : (h("div", null));
        })));
    }
    get container() { return this; }
    static get style() { return verdocsTemplateDocumentPageCss; }
}, [0, "verdocs-template-document-page", {
        "endpoint": [16],
        "editable": [4],
        "disabled": [4],
        "done": [4],
        "templateId": [1, "template-id"],
        "documentId": [1, "document-id"],
        "pageNumber": [2, "page-number"],
        "virtualWidth": [2, "virtual-width"],
        "virtualHeight": [1026, "virtual-height"],
        "layers": [16],
        "containerId": [32],
        "renderedWidth": [32],
        "renderedHeight": [32],
        "naturalWidth": [32],
        "naturalHeight": [32],
        "aspectRatio": [32],
        "skipFirstNotification": [32],
        "pageDisplayUri": [32],
        "xScale": [32],
        "yScale": [32],
        "loading": [32],
        "template": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["verdocs-template-document-page", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-field-attachment", "verdocs-field-checkbox", "verdocs-field-date", "verdocs-field-dropdown", "verdocs-field-initial", "verdocs-field-radio", "verdocs-field-signature", "verdocs-field-textarea", "verdocs-field-textbox", "verdocs-field-timestamp", "verdocs-help-icon", "verdocs-initial-dialog", "verdocs-loader", "verdocs-ok-dialog", "verdocs-portal", "verdocs-select-input", "verdocs-signature-dialog", "verdocs-template-field-properties", "verdocs-text-input", "verdocs-upload-dialog"];
    components.forEach(tagName => { switch (tagName) {
        case "verdocs-template-document-page":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VerdocsTemplateDocumentPage);
            }
            break;
        case "verdocs-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$n();
            }
            break;
        case "verdocs-checkbox":
            if (!customElements.get(tagName)) {
                defineCustomElement$m();
            }
            break;
        case "verdocs-component-error":
            if (!customElements.get(tagName)) {
                defineCustomElement$l();
            }
            break;
        case "verdocs-field-attachment":
            if (!customElements.get(tagName)) {
                defineCustomElement$k();
            }
            break;
        case "verdocs-field-checkbox":
            if (!customElements.get(tagName)) {
                defineCustomElement$j();
            }
            break;
        case "verdocs-field-date":
            if (!customElements.get(tagName)) {
                defineCustomElement$i();
            }
            break;
        case "verdocs-field-dropdown":
            if (!customElements.get(tagName)) {
                defineCustomElement$h();
            }
            break;
        case "verdocs-field-initial":
            if (!customElements.get(tagName)) {
                defineCustomElement$g();
            }
            break;
        case "verdocs-field-radio":
            if (!customElements.get(tagName)) {
                defineCustomElement$f();
            }
            break;
        case "verdocs-field-signature":
            if (!customElements.get(tagName)) {
                defineCustomElement$e();
            }
            break;
        case "verdocs-field-textarea":
            if (!customElements.get(tagName)) {
                defineCustomElement$d();
            }
            break;
        case "verdocs-field-textbox":
            if (!customElements.get(tagName)) {
                defineCustomElement$c();
            }
            break;
        case "verdocs-field-timestamp":
            if (!customElements.get(tagName)) {
                defineCustomElement$b();
            }
            break;
        case "verdocs-help-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$a();
            }
            break;
        case "verdocs-initial-dialog":
            if (!customElements.get(tagName)) {
                defineCustomElement$9();
            }
            break;
        case "verdocs-loader":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "verdocs-ok-dialog":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "verdocs-portal":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "verdocs-select-input":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "verdocs-signature-dialog":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "verdocs-template-field-properties":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "verdocs-text-input":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "verdocs-upload-dialog":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { VerdocsTemplateDocumentPage as V, defineCustomElement as d };
//# sourceMappingURL=p-BR2uEVQU.js.map

//# sourceMappingURL=p-BR2uEVQU.js.map