'use strict';

var index = require('./index-CDEIqi_n.js');
var jsSdk = require('@verdocs/js-sdk');

const verdocsDropdownCss = "@-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-dropdown{height:26px;display:block;position:relative;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}#verdocs-dropdown-menu-items{width:200px;z-index:10000;position:absolute;border-radius:5px;background:#33354c;border:1px solid #654dcb}.verdocs-dropdown-menu-separator{height:1px;margin-top:5px;padding-top:5px;border-top:1px solid rgba(255, 255, 255, 0.3725490196)}.verdocs-dropdown-menu-option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;text-wrap:nowrap;padding:10px 20px}.verdocs-dropdown-menu-option:hover{cursor:pointer;background:#55bc81}.verdocs-dropdown-menu-option[disabled]{color:#aaaaaa}.verdocs-dropdown-menu-option[disabled]:hover{cursor:inherit;background:transparent;color:#aaaaaa}";

const DropdownArrow = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#50BE80"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>`;
const VerdocsDropdown = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.optionSelected = index.createEvent(this, "optionSelected");
        /**
         * The menu options to display.
         */
        this.options = [];
        this.containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;
        this.showPicker = false;
    }
    handleSelectOption(e, option) {
        var _a;
        e.stopPropagation();
        (_a = this.optionSelected) === null || _a === void 0 ? void 0 : _a.emit(option);
        this.showPicker = false;
    }
    toggle() {
        this.showPicker = !this.showPicker;
    }
    render() {
        const elId = `verdocs-dropdown-${jsSdk.randomString(8)}`;
        return (index.h(index.Host, { key: '26e5cc46644eb41b1ffed2184326e9eaaa9668b1' }, index.h("button", { key: 'c1dcb9329ce082aa21fd8b884d2f39df3d0b85dc', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", id: elId, onClick: () => (this.showPicker = !this.showPicker) }), this.showPicker && (index.h("verdocs-portal", { key: '2096de37955819556d84c0dbefaf76f9ea5b925b', anchor: elId, onClickAway: () => (this.showPicker = false), id: "verdocs-dropdown-menu-items" }, this.options.map(option => {
            if (!option.label) {
                return index.h("div", { class: "verdocs-dropdown-menu-separator" });
            }
            else {
                return (index.h("button", { class: "verdocs-dropdown-menu-option", disabled: option.disabled || false, onClick: e => this.handleSelectOption(e, option) }, option.label));
            }
        })))));
    }
    get el() { return index.getElement(this); }
};
VerdocsDropdown.style = verdocsDropdownCss;

exports.verdocs_dropdown = VerdocsDropdown;
//# sourceMappingURL=verdocs-dropdown.entry.cjs.js.map

//# sourceMappingURL=verdocs-dropdown.cjs.entry.js.map