@bulmil/core/dist/components/bm-dropdown.js


/*!
 * Bulmil - MIT License
 */
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

const dropdownCss = ".dropdown{display:-ms-inline-flexbox;display:inline-flex;position:relative;vertical-align:top}.dropdown.is-active .dropdown-menu,.dropdown.is-hoverable:hover .dropdown-menu{display:block}.dropdown.is-right .dropdown-menu{left:auto;right:0}.dropdown.is-up .dropdown-menu{bottom:100%;padding-bottom:4px;padding-top:initial;top:auto}.dropdown-menu{display:none;left:0;min-width:12rem;padding-top:4px;position:absolute;top:100%;z-index:20}.dropdown-content{background-color:hsl(0, 0%, 100%);border-radius:4px;box-shadow:0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);padding-bottom:0.5rem;padding-top:0.5rem}.dropdown-item{color:hsl(0, 0%, 29%);display:block;font-size:0.875rem;line-height:1.5;padding:0.375rem 1rem;position:relative}a.dropdown-item,button.dropdown-item{padding-right:3rem;text-align:inherit;white-space:nowrap;width:100%}a.dropdown-item:hover,button.dropdown-item:hover{background-color:hsl(0, 0%, 96%);color:hsl(0, 0%, 4%)}a.dropdown-item.is-active,button.dropdown-item.is-active{background-color:#5851ff;color:#fff}.dropdown-divider{background-color:hsl(0, 0%, 93%);border:none;display:block;height:1px;margin:0.5rem 0}";
const BmDropdownStyle0 = dropdownCss;

const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        /**
         * Handle Trigger click action
         */
        this.handleTriggerClick = () => {
            this.isActive = !this.isActive;
        };
        this.isActive = false;
        this.isRight = false;
        this.isUp = false;
        this.isHoverable = false;
    }
    render() {
        return (h("div", { key: 'e37f1cfab3c96fae6ae1852cff38826253748a44', class: {
                dropdown: true,
                'is-active': this.isActive,
                'is-right': this.isRight,
                'is-up': this.isUp,
                'is-hoverable': this.isHoverable,
            } }, h("div", { key: 'bd90928096efde8d3c32c5ea30cb5f6d5b85a6c7', onClick: this.handleTriggerClick, class: "dropdown-trigger" }, h("slot", { key: '8c1e78d312d575b510e29752a31e932f0865ea8e', name: "trigger", "aria-haspopup": "true" })), h("div", { key: '249a9dd1881b8a65a1acd3acbc3100046a8a0571', class: "dropdown-menu", role: "menu" }, h("div", { key: '725e18d94661826219b1ef0b03088f639a37bb20', class: "dropdown-content" }, h("slot", { key: 'feefa783f2588e82f9d765c063db8433f3f42251' })))));
    }
    static get style() { return BmDropdownStyle0; }
}, [4, "bm-dropdown", {
        "isActive": [1540, "is-active"],
        "isRight": [4, "is-right"],
        "isUp": [4, "is-up"],
        "isHoverable": [4, "is-hoverable"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bm-dropdown"];
    components.forEach(tagName => { switch (tagName) {
        case "bm-dropdown":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Dropdown);
            }
            break;
    } });
}

const BmDropdown = Dropdown;
const defineCustomElement = defineCustomElement$1;

export { BmDropdown, defineCustomElement };