bruno-ui/dist/cjs/brn-dropdown.cjs.entry.js

Bruno UI Kit

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const core = require('./core-a98adf17.js');
const app_helper = require('./app.helper-d57324ff.js');

const DropdownComponent = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.closeable = true;
        this.active = false;
        this._active = false;
        this._id = app_helper.AppHelper.GetIdWithPrefix("dropdown");
        this._menuId = app_helper.AppHelper.GetIdWithPrefix("dropdown__menu");
    }
    ActiveWatchHandler(newValue) {
        this._active = newValue;
    }
    componentDidLoad() {
        this._active = this.active;
    }
    WindowClickHandler(event) {
        this._active = this.IsCloseable(event);
    }
    render() {
        return (core.h("div", { class: { "brn-dropdown--active": this._active }, id: `${this._id}` }, core.h("div", { class: "brn-dropdown__button", onClick: () => {
                this.Toggle();
            } }, core.h("slot", { name: "button" })), core.h("div", { class: "brn-dropdown__menu", id: `${this._menuId}` }, core.h("slot", { name: "menu" }))));
    }
    Toggle() {
        this._active = !this._active;
    }
    IsCloseable(event) {
        let result = false;
        if (this.closeable && event.target.closest(`#${this._menuId}`)) {
            result = false;
        }
        else if (event.target.closest(`#${this._id}`)) {
            result = this._active;
        }
        return result;
    }
    get _element() { return core.getElement(this); }
    static get watchers() { return {
        "active": ["ActiveWatchHandler"]
    }; }
    static get style() { return "brn-dropdown > div {\n  display: inline-block;\n  position: relative;\n}\nbrn-dropdown > div.brn-dropdown--active .brn-dropdown__menu {\n  visibility: visible;\n  opacity: 1;\n  top: initial;\n  margin-top: 0.15rem;\n}\nbrn-dropdown > div .brn-dropdown__menu {\n  visibility: hidden;\n  opacity: 0;\n  position: absolute;\n  left: 0;\n  width: -webkit-max-content;\n  width: -moz-max-content;\n  width: max-content;\n  z-index: 1;\n  display: block;\n  text-align: left;\n  background-color: #fff;\n  border: 1px solid #d7dde4;\n  padding: 0.5rem 0.8rem;\n  margin-top: -0.15rem;\n  -webkit-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out, margin-top 0.2s ease-in-out;\n  transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out, margin-top 0.2s ease-in-out;\n  -webkit-border-radius: 4px;\n  -moz-border-radius: 4px;\n  -ms-border-radius: 4px;\n  border-radius: 4px;\n}\nbrn-dropdown > div .brn-dropdown__menu ul {\n  margin: -0.5rem -0.8rem -0.5rem -0.8rem;\n}\nbrn-dropdown > div .brn-dropdown__menu ul li:hover {\n  background-color: #eaecf0;\n}\nbrn-dropdown > div .brn-dropdown__menu ul li.divider {\n  padding: 0;\n  margin: 0.15rem 0;\n}\nbrn-dropdown > div .brn-dropdown__menu ul li a {\n  display: block;\n  padding: 0.4rem 0.8rem;\n}"; }
};

exports.brn_dropdown = DropdownComponent;