import { Host } from "@stencil/core";
import { randomString } from "@verdocs/js-sdk";
import { h } from "@stencil/core";
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>`;
/**
 * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden
 * when the button is pressed again, or an option is selected. Separators may be created by supplying an entry with an empty label.
 *
 * ```ts
 * <verdocs-dropdown
 *   options={[
 *     {label: 'Option 1', disabled: true},
 *     {label: 'Option 2', id: '2'}
 *     {label: ''}
 *     {label: 'Option 3', id: '2'}
 *    ]}
 *   label="OK" onClick={() => (console.log('OK clicked'))}
 * />
 * ```
 */
export class VerdocsDropdown {
    constructor() {
        /**
         * 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-${randomString(8)}`;
        return (h(Host, { key: '466a4c33a9d8867a5740fd05b49dfba52ae07334' }, h("button", { key: '7e0493bac43d60b5116c604a0012951e69380eb6', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", id: elId, onClick: () => (this.showPicker = !this.showPicker) }), this.showPicker && (h("verdocs-portal", { key: '8fcdfbf97c8f3a859dfa523eed4660195f246124', anchor: elId, onClickAway: () => (this.showPicker = false), id: "verdocs-dropdown-menu-items" }, this.options.map(option => {
            if (!option.label) {
                return h("div", { class: "verdocs-dropdown-menu-separator" });
            }
            else {
                return (h("button", { class: "verdocs-dropdown-menu-option", disabled: option.disabled || false, onClick: e => this.handleSelectOption(e, option) }, option.label));
            }
        })))));
    }
    static get is() { return "verdocs-dropdown"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-dropdown.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-dropdown.css"]
        };
    }
    static get properties() {
        return {
            "options": {
                "type": "unknown",
                "attribute": "options",
                "mutable": false,
                "complexType": {
                    "original": "IMenuOption[]",
                    "resolved": "IMenuOption[]",
                    "references": {
                        "IMenuOption": {
                            "location": "local",
                            "path": "/Users/chad/projects/verdocs/web-sdk/verdocs-web-sdk/src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx",
                            "id": "src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx::IMenuOption"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The menu options to display."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            }
        };
    }
    static get states() {
        return {
            "containerId": {},
            "showPicker": {}
        };
    }
    static get events() {
        return [{
                "method": "optionSelected",
                "name": "optionSelected",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when a menu option is clicked.\nWeb Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks."
                },
                "complexType": {
                    "original": "IMenuOption",
                    "resolved": "IMenuOption",
                    "references": {
                        "IMenuOption": {
                            "location": "local",
                            "path": "/Users/chad/projects/verdocs/web-sdk/verdocs-web-sdk/src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx",
                            "id": "src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx::IMenuOption"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=verdocs-dropdown.js.map
