'use strict';

var index = require('./index-B2lA-USD.js');
var jsSdk = require('@verdocs/js-sdk');
var Icons = require('./Icons-DTZAw6hQ.js');

const verdocsFileChooserCss = "@-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-file-chooser{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-file-chooser .upload-box{text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;padding:40px 15px;color:rgba(0, 0, 0, 0.54)}verdocs-file-chooser .upload-box svg{width:64px;height:64px;fill:#5c6575}verdocs-file-chooser .selected-filename{font-size:20px;font-weight:bold;overflow-wrap:anywhere}verdocs-file-chooser .or-prefer{height:20px;margin:20px 0;font-size:16px}";

const VerdocsFileChooser = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.fileSelected = index.createEvent(this, "fileSelected");
        /**
         * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
         */
        this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
    }
    handleFileChanged(e) {
        var _a, _b;
        this.file = ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null;
        (_b = this.fileSelected) === null || _b === void 0 ? void 0 : _b.emit({ file: this.file });
        console.debug('[CHOOSER] Selected file', this.file);
    }
    handleSelectFile(e) {
        var _a, _b;
        e.stopPropagation();
        this.file = null;
        (_a = this.fileSelected) === null || _a === void 0 ? void 0 : _a.emit({ file: null });
        (_b = document.getElementById('verdocs-file-chooser')) === null || _b === void 0 ? void 0 : _b.click();
    }
    render() {
        const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';
        return (index.h(index.Host, { key: 'd2388c9f8fa3aa1de54d359698fd8b9b7a2dd39a' }, index.h("input", { key: 'd848ef1b6f60d6e57d7c4939dc44c8ed320e97b3', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), index.h("div", { key: 'd94e8fbc7b94f460fdbc51cf055a17fce83a2673', class: "upload-box" }, index.h("div", { key: '02dcf9d0f6c6f687eee3598c06e44b31de34b5c7', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), index.h("div", { key: 'd8c20dddc52d531c6d05078f7c76d2a6924d78e0', class: "or-prefer" }, this.file ? Icons.unicodeNBSP : 'Or, if you prefer...'), index.h("verdocs-button", { key: '5d65da28787d44f563ce72685e5458bb1322973d', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
    }
};
VerdocsFileChooser.style = verdocsFileChooserCss;

const verdocsProgressBarCss = "@-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-progress-bar{font-family:\"Inter\", \"Barlow\", sans-serif;width:100%;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-progress-bar .labels{display:-ms-flexbox;display:flex;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}verdocs-progress-bar .labels .label{display:-ms-flexbox;display:flex;font-size:14px;font-weight:600;margin-right:8px;color:#33364b}verdocs-progress-bar .bar{display:-ms-flexbox;display:flex;-ms-flex:0 0 10px;flex:0 0 10px;border-radius:5px;background-color:#cccccc}verdocs-progress-bar .bar .slider{display:-ms-flexbox;display:flex;border-radius:5px;background-color:#55bc81}";

const VerdocsProgressBar = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * Optional label to display above the bar
         */
        this.label = '';
        /**
         * If true, the progress percentage will be displayed above the bar.
         */
        this.showPercent = false;
        /**
         * The current progress value (0-100)
         */
        this.percent = 0;
    }
    render() {
        const widthPercent = Math.ceil((100 * Math.min(this.percent, 100)) / 100);
        console.log('Rendering progress bar', { widthPercent, label: this.label, showPercent: this.showPercent, percent: this.percent });
        return (index.h(index.Host, { key: 'cfccbd59016954d10782723bae6eb451ac8e3e30' }, index.h("div", { key: 'a0981e9257e56f6c1e207cda99c637bbff85227f', class: "labels" }, this.label && index.h("div", { key: '5d692917d2a9b0baf1802573e783fdae4efcc35b', class: "label" }, this.label), this.showPercent && index.h("div", { key: '14a507c2bc3a7474f1d9933fd87b52b8695a52a4', class: "label" }, this.percent, "%")), index.h("div", { key: '187e0efa73554e681d71bb1d26283e3ab226ca59', class: "bar" }, index.h("div", { key: '1ec5e3c55c52b0d88cc5da1cec57a24918d8e735', class: "slider", style: { width: `${widthPercent}%` } }))));
    }
};
VerdocsProgressBar.style = verdocsProgressBarCss;

exports.verdocs_file_chooser = VerdocsFileChooser;
exports.verdocs_progress_bar = VerdocsProgressBar;
//# sourceMappingURL=verdocs-file-chooser.verdocs-progress-bar.entry.cjs.js.map

//# sourceMappingURL=verdocs-file-chooser_2.cjs.entry.js.map