'use strict';

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

const verdocsMultiselectCss = "@-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-multiselect{width:100%;display:block;margin:0 0 10px 0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", \"Barlow\", sans-serif;position:relative}verdocs-multiselect .input-wrapper{width:100%;position:relative}verdocs-multiselect .input-wrapper .icon{top:6px;right:6px;width:18px;height:18px;z-index:10;position:absolute}verdocs-multiselect .trigger{gap:3px;width:100%;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%;border-radius:4px;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;padding:5px 32px 5px 7px;background:#ffffff;border:1px solid #707ae5}verdocs-multiselect .trigger::-webkit-input-placeholder{opacity:1;color:#aaaaaa}verdocs-multiselect .trigger::-moz-placeholder{opacity:1;color:#aaaaaa}verdocs-multiselect .trigger:-ms-input-placeholder{opacity:1;color:#aaaaaa}verdocs-multiselect .trigger::-ms-input-placeholder{opacity:1;color:#aaaaaa}verdocs-multiselect .trigger::placeholder{opacity:1;color:#aaaaaa}verdocs-multiselect .selected-option{color:white;font-size:12px;padding:2px 6px;border-radius:3px;display:inline-block;background:#46497d}verdocs-multiselect .input-label{display:block;font-weight:700;font-size:14px;margin:0 0 4px 0;color:#555570}verdocs-multiselect .verdocs-multiselect-dropdown{left:0;top:30px;width:210px;z-index:10000;position:absolute;border-radius:5px;font-family:\"Inter\", \"Barlow\", sans-serif;background:#ffffff;border:1px solid #654dcb}verdocs-multiselect .verdocs-multiselect-dropdown .option{gap:4px;display:-ms-flexbox;display:flex;padding:5px 8px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;text-wrap:nowrap}verdocs-multiselect .verdocs-multiselect-dropdown label{font-size:13px}#verdocs-multiselect-menu-items{width:200px;z-index:10000;position:absolute;border-radius:5px;font-family:\"Inter\", \"Barlow\", sans-serif;background:#ffffff;border:1px solid #654dcb}#verdocs-multiselect-menu-items .option{display:-ms-flexbox;display:flex;gap:4px;padding:5px 8px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}#verdocs-multiselect-menu-items label{font-size:13px}";

const DownIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>`;
const UpIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" /></svg>`;
const VerdocsMultiselect = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.selectionChanged = index.createEvent(this, "selectionChanged");
        /**
         * The label for the field.
         */
        this.label = '';
        /**
         * The placeholder for the input element when no options are selected.
         */
        this.placeholder = 'Select...';
        /**
         * The currently selected options.
         */
        this.selectedOptions = [];
        this.showPicker = false;
    }
    handleToggleOption(e, option) {
        var _a;
        if (e.target.checked) {
            this.selectedOptions = [...this.selectedOptions, option.value];
        }
        else {
            this.selectedOptions = this.selectedOptions.filter(selected => selected !== option.value);
        }
        (_a = this.selectionChanged) === null || _a === void 0 ? void 0 : _a.emit({ selectedOptions: this.selectedOptions });
    }
    render() {
        const elId = `verdocs-dropdown-${jsSdk.randomString(8)}`;
        return (index.h(index.Host, { key: 'ac5b224bc0d5f402b63b84dea01ee4a8f79afa17', class: this.showPicker ? 'open' : 'closed' }, index.h("label", { key: '9c3f4a162b5b68769e3bb7d811c24d7019d5c5da' }, this.label ? index.h("div", { class: "input-label" }, this.label + ':') : index.h("div", null), index.h("div", { key: '9c719736987f035e57add5b4e2de29dfc7206b06', class: "input-wrapper" }, index.h("button", { key: 'c7f0790945fa6a2eb5f94beb64dcf45a88efcc49', id: elId, class: "trigger", value: "", onClick: () => (this.showPicker = !this.showPicker) }, this.selectedOptions.length === 0 ? (index.h("span", { class: "placeholder" }, this.placeholder)) : (this.selectedOptions.map(option => { var _a; return index.h("span", { class: "selected-option" }, ((_a = this.options.find(opt => opt.value === option)) === null || _a === void 0 ? void 0 : _a.label) || 'Unknown'); }))), index.h("div", { key: 'd4703b256d8e9c8359433dbdf64c86f9fec3c706', class: "icon", innerHTML: this.showPicker ? UpIcon : DownIcon }), this.showPicker && (index.h("div", { key: 'c53ef02457953288741486d9565f9d7fe8b0a064', class: "verdocs-multiselect-dropdown" }, this.options.map((option, i) => (index.h("div", { class: "option", onClick: () => (this.showPicker = false) }, index.h("verdocs-checkbox", { size: "small", id: `verdocs-multi-select-opt-${i}`, value: option.value, checked: this.selectedOptions.includes(option.value), onInput: (e) => this.handleToggleOption(e, option) }), index.h("label", { htmlFor: `verdocs-multi-select-option-${i}` }, option.label))))))))));
    }
};
VerdocsMultiselect.style = verdocsMultiselectCss;

exports.verdocs_multiselect = VerdocsMultiselect;
//# sourceMappingURL=verdocs-multiselect.entry.cjs.js.map

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