'use strict';

var index = require('./index-BEF5cZxd.js');
var template = require('./template-Cj6PcLmR.js');
var string_utils = require('./string.utils-BG4pUfEi.js');
var constants = require('./constants-z2ZSS2je.js');
require('./sizes-D5zsw2g5.js');
require('./colors-DgrrxjsX.js');
require('./utils-NnC78QR3.js');

const ClickOutsideOptionsDefaults = {
    triggerEvents: "click",
    exclude: ""
};
/**
 * Register callback function for HTMLElement to be executed when user clicks outside of element.
 * @example
```
<span
    ref={spanEl => registerClickOutside(this, spanEl, () => this.test())}>
      Hello, World!
</span>;
```
 */
function registerClickOutside(component, element, callback, opt = ClickOutsideOptionsDefaults) {
    const excludedNodes = getExcludedNodes(opt);
    getTriggerEvents(opt).forEach(triggerEvent => {
        window.addEventListener(triggerEvent, (e) => {
            initClickOutside(e, component, element, callback, excludedNodes);
        }, false);
    });
}
function initClickOutside(event, component, element, callback, excludedNodes) {
    const target = event.target;
    if (!element.contains(target) && !isExcluded(target, excludedNodes)) {
        callback.call(component);
    }
}
function getTriggerEvents(opt) {
    if (opt.triggerEvents) {
        return opt.triggerEvents.split(",").map(e => e.trim());
    }
    return ["click"];
}
function getExcludedNodes(opt) {
    if (opt.exclude) {
        try {
            return Array.from(document.querySelectorAll(opt.exclude));
        }
        catch (err) {
            console.warn(`@ClickOutside: Exclude: '${opt.exclude}' will not be evaluated. Check your exclude selector syntax.`, err);
        }
    }
    return;
}
function isExcluded(target, excudedNodes) {
    if (target && excudedNodes) {
        for (let excludedNode of excudedNodes) {
            if (excludedNode.contains(target)) {
                return true;
            }
        }
    }
    return false;
}

var Position;
(function (Position) {
    Position["LEFT"] = "left";
    Position["RIGHT"] = "right";
})(Position || (Position = {}));
const DropdownClass = {
    root: 'gov-dropdown',
    list: 'gov-dropdown__list'
};

const GovDropdown = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.govChange = index.createEvent(this, "gov-change");
        /**
         * Dropdown state
         */
        this.open = false;
        /**
         * Menu display position
         */
        this.position = Position.LEFT;
        this.h = template.govHost(this.host);
        this.listId = string_utils.createID("GovDropdownList");
        this.controlId = string_utils.createID("GovDropdownControl");
    }
    watchOpen() {
        var _a;
        (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-expanded", template.toBoolAttr(this.open));
    }
    get trigger() {
        return this.host.querySelector(`* > ${constants.ButtonClass.root}`);
    }
    get list() {
        return this.h.getSlot("list");
    }
    componentWillLoad() {
        var _a;
        if (!this.trigger)
            return;
        this.trigger.setAttribute("aria-controls", this.listId);
        this.trigger.setAttribute("aria-haspopup", template.toBoolAttr(!!this.list));
        this.trigger.setAttribute("aria-expanded", template.toBoolAttr(this.open));
        this.trigger.setAttribute("identifier", (_a = this.identifier) !== null && _a !== void 0 ? _a : this.controlId);
        this.trigger.addEventListener("gov-click", (e) => {
            e.preventDefault();
            e.stopPropagation();
            this.open = !this.open;
            this.govChange.emit({
                component: DropdownClass.root,
                originalEvent: e,
                open: this.open,
            });
        });
    }
    render() {
        return (index.h(index.Host, { key: '24e596043840ec3b4e2ae0c59cecd1ec5425f5b5', class: this.h.classes([DropdownClass.root]), open: this.open, position: this.position }, index.h("slot", { key: '5c9c344162c6842585b134b327e9d45e4c1df19e' }), index.h("div", { key: 'b424408e77eaebc2eedfe5ac1c7a916808af21f7', ref: el => registerClickOutside(this, el, () => this.open = false), class: DropdownClass.list, id: this.listId, "aria-labelledby": this.controlId, "aria-hidden": template.toBoolAttr(!this.open), hidden: !this.open }, index.h("slot", { key: 'b39d21fd27642fd5e7ece4b9d68de2e8468b93ae', name: "list" }))));
    }
    /**
     * Returns the current state of the dropdown
     */
    async getState() {
        return this.open;
    }
    /**
     * Toggle state of dropdown
     */
    async toggle() {
        this.open = !this.open;
    }
    get host() { return index.getElement(this); }
    static get watchers() { return {
        "open": ["watchOpen"]
    }; }
};

exports.gov_dropdown = GovDropdown;
//# sourceMappingURL=gov-dropdown.entry.cjs.js.map

//# sourceMappingURL=gov-dropdown.cjs.entry.js.map