import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-C1erT8T2.js';
import { VerdocsEndpoint, getTemplateDocumentPageDisplayUri, getTemplate } from '@verdocs/js-sdk';
import { t as throttle, c as getControlStyles, g as getFieldId } from './utils-CbfXTNEw.js';
import { S as Store } from './Datastore-DoY8Nb0Y.js';
import { c as createPopper } from './popper-BfP9ezJQ.js';
import './_commonjsHelpers-BFTU3MAI.js';
import './index-dzBXqXlK.js';
import './Types-Dl7Xw8F0.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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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 getElement(this); }
};
VerdocsTemplateDocumentPage.style = verdocsTemplateDocumentPageCss;

const verdocsToolbarIconCss = "@-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-toolbar-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-toolbar-icon .icon{display:inline-block;cursor:pointer}verdocs-toolbar-icon .icon svg{fill:#5c6575}verdocs-toolbar-icon .tooltip{display:none;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;padding:5px 10px;font-size:13px;position:relative;border-radius:4px;z-index:20000;white-space:nowrap}verdocs-toolbar-icon .tooltip .arrow,verdocs-toolbar-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-toolbar-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-toolbar-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-toolbar-icon .tooltip[data-show]{display:block}verdocs-toolbar-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]{padding:3px 10px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-1px}";

const VerdocsToolbarIcon = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Help text to display on hover/focus
         */
        this.text = '';
        /**
         * SVG icon to display
         */
        this.icon = '';
        /**
         * Override the Popper "placement" setting
         */
        this.placement = 'bottom';
        /**
         * Triggered when the icon is pressed
         */
        // @Event({composed: true}) press: EventEmitter;
        this.containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;
    }
    componentDidLoad() {
        this.popperInstance = createPopper(this.iconEl, this.tooltip, {
            placement: this.placement,
            modifiers: this.placement === 'left' ? [{ name: 'offset', options: { offset: [0, 20] } }] : [],
        });
        // placement: 'top-end',
        // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
        // });
    }
    disconnectedCallback() {
        if (this.popperInstance) {
            this.popperInstance.destroy();
            this.popperInstance = null;
        }
    }
    show() {
        var _a, _b;
        (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
    }
    hide() {
        var _a;
        (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
    }
    // handlePress() {
    //   this.press?.emit();
    // }
    render() {
        return (h(Host, { key: '8163f7ebe7d2f3a13db305b411b454287a4b3729', class: {} }, h("div", { key: '1782db14268643ad1620ebcd5efc6a27ff9fcc04', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { key: '54c1bb4abc22a943051ba2df8b557e6c02fdabef', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, h("div", { key: '4d2c884923f2e79b375ffcfa2592cd914bead68c', "data-popper-arrow": "true", class: "arrow" }))));
    }
};
VerdocsToolbarIcon.style = verdocsToolbarIconCss;

export { VerdocsTemplateDocumentPage as verdocs_template_document_page, VerdocsToolbarIcon as verdocs_toolbar_icon };
//# sourceMappingURL=verdocs-template-document-page.verdocs-toolbar-icon.entry.js.map

//# sourceMappingURL=verdocs-template-document-page_2.entry.js.map