import { randomString } from "@verdocs/js-sdk";
import { Host, h } from "@stencil/core";
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>`;
/**
 * Display a dropdown that allows multiple options to be selected. Note that events "bubble" from the
 * input field to the container, so you can subscribe to the same DOM events (input, blur, etc) that a
 * normal input would emit.
 *
 * ```ts
 * <verdocs-multiselect label="Methods:" value={[]} options={[...options]} onInput={() => {}} />
 * ```
 */
export class VerdocsMultiselect {
    constructor() {
        /**
         * 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-${randomString(8)}`;
        return (h(Host, { key: 'ac5b224bc0d5f402b63b84dea01ee4a8f79afa17', class: this.showPicker ? 'open' : 'closed' }, h("label", { key: '9c3f4a162b5b68769e3bb7d811c24d7019d5c5da' }, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("div", { key: '9c719736987f035e57add5b4e2de29dfc7206b06', class: "input-wrapper" }, h("button", { key: 'c7f0790945fa6a2eb5f94beb64dcf45a88efcc49', id: elId, class: "trigger", value: "", onClick: () => (this.showPicker = !this.showPicker) }, this.selectedOptions.length === 0 ? (h("span", { class: "placeholder" }, this.placeholder)) : (this.selectedOptions.map(option => { var _a; return h("span", { class: "selected-option" }, ((_a = this.options.find(opt => opt.value === option)) === null || _a === void 0 ? void 0 : _a.label) || 'Unknown'); }))), h("div", { key: 'd4703b256d8e9c8359433dbdf64c86f9fec3c706', class: "icon", innerHTML: this.showPicker ? UpIcon : DownIcon }), this.showPicker && (h("div", { key: 'c53ef02457953288741486d9565f9d7fe8b0a064', class: "verdocs-multiselect-dropdown" }, this.options.map((option, i) => (h("div", { class: "option", onClick: () => (this.showPicker = false) }, 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) }), h("label", { htmlFor: `verdocs-multi-select-option-${i}` }, option.label))))))))));
    }
    static get is() { return "verdocs-multiselect"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-multiselect.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-multiselect.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The label for the field."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label",
                "defaultValue": "''"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The placeholder for the input element when no options are selected."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder",
                "defaultValue": "'Select...'"
            },
            "options": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IMultiSelectOption[]",
                    "resolved": "IMultiSelectOption[]",
                    "references": {
                        "IMultiSelectOption": {
                            "location": "local",
                            "path": "/Users/chad/projects/verdocs/web-sdk/verdocs-web-sdk/src/components/controls/verdocs-multiselect/verdocs-multiselect.tsx",
                            "id": "src/components/controls/verdocs-multiselect/verdocs-multiselect.tsx::IMultiSelectOption"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The options to list."
                },
                "getter": false,
                "setter": false
            },
            "selectedOptions": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The currently selected options."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            }
        };
    }
    static get states() {
        return {
            "showPicker": {}
        };
    }
    static get events() {
        return [{
                "method": "selectionChanged",
                "name": "selectionChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "{selectedOptions: string[]}",
                    "resolved": "{ selectedOptions: string[]; }",
                    "references": {}
                }
            }];
    }
}
//# sourceMappingURL=verdocs-multiselect.js.map
