var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
import { r as registerInstance, c as createEvent, h, g as getElement } from './core-15e24a78.js';
import { T as Tunnel } from './i18n.provider-7cafb88f.js';
import { i as isFocusable } from './a11y-3dcc958f.js';
var Translations;
(function (Translations) {
    Translations["DROPDOWN_TOGGLE"] = "Dropdown toggle";
})(Translations || (Translations = {}));
var Dropdown = /** @class */ (function () {
    function class_1(hostRef) {
        var _this = this;
        registerInstance(this, hostRef);
        this.expanded = false;
        this.toggleClickListener = function () { return _this.onToggle(); };
        this.overlayListener = function () { return _this.close(); };
        this.itemListener = function (_a) {
            var detail = _a.detail;
            return _this.onItemSelected(detail);
        };
        /**
         * Should the dropdown render the arrow.
         * Defaults to true.
         */
        this.arrow = true;
        /**
         * How to align the overlay when it opens.
         * Supports all popper placements.
         */
        this.placement = 'bottom-start';
        this.anjDropdownWillOpen = createEvent(this, "anjDropdownWillOpen", 7);
        this.anjDropdownWillClose = createEvent(this, "anjDropdownWillClose", 7);
        this.anjDropdownSelect = createEvent(this, "anjDropdownSelect", 7);
    }
    class_1.prototype.injectedPropWatcher = function () {
        this.setToggleLabel();
    };
    class_1.prototype.connectedCallback = function () {
        this.bindToggle();
    };
    class_1.prototype.componentDidRender = function () {
        if (!this.toggle) {
            this.bindToggle();
        }
    };
    class_1.prototype.disconnectedCallback = function () {
        if (this.toggle) {
            this.toggle.removeEventListener('click', this.toggleClickListener);
        }
        this.unbindOverlay();
    };
    class_1.prototype.close = function (refocusToggle) {
        if (refocusToggle === void 0) { refocusToggle = false; }
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        this.anjDropdownWillClose.emit();
                        if (!isFocusable(document.activeElement) || refocusToggle) {
                            this.toggle.focus();
                        }
                        return [4 /*yield*/, this.overlay.close()];
                    case 1:
                        _a.sent();
                        this.expanded = false;
                        this.setToggleExpanded();
                        this.unbindOverlay();
                        return [2 /*return*/];
                }
            });
        });
    };
    class_1.prototype.open = function () {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                if (this.expanded)
                    return [2 /*return*/];
                this.overlay = this.bindOverlay();
                this.anjDropdownWillOpen.emit();
                this.expanded = true;
                this.setToggleExpanded();
                return [2 /*return*/, this.overlay.open(this.toggle)];
            });
        });
    };
    class_1.prototype.onToggle = function () {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                return [2 /*return*/, this.expanded ? this.close() : this.open()];
            });
        });
    };
    class_1.prototype.onItemSelected = function (payload) {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                this.anjDropdownSelect.emit(payload);
                return [2 /*return*/, this.close(true)];
            });
        });
    };
    class_1.prototype.setToggleExpanded = function () {
        this.toggle.parentElement.active = this.expanded;
        this.toggle.setAttribute('aria-expanded', "" + this.expanded);
    };
    class_1.prototype.bindToggle = function () {
        var buttons = Array.from(this.element.querySelectorAll(".anj-dropdown-toggle button")).filter(noCloseButtons);
        this.toggle = buttons[buttons.length - 1];
        if (this.toggle) {
            // Eat the mouse down event so that it doesn't trigger the overlay close
            this.toggle.addEventListener('click', this.toggleClickListener);
            this.toggle.setAttribute('aria-haspopup', 'true');
            this.setToggleLabel();
            this.setToggleExpanded();
        }
    };
    class_1.prototype.bindOverlay = function () {
        var el = this.element.querySelector('anj-overlay');
        el.addEventListener('anjWillDismiss', this.overlayListener);
        el.addEventListener('anjDropdownItemSelect', this.itemListener);
        return el;
    };
    class_1.prototype.unbindOverlay = function () {
        if (this.overlay) {
            this.overlay.removeEventListener('anjWillDismiss', this.overlayListener);
            this.overlay.removeEventListener('anjDropdownItemSelect', this.itemListener);
            this.overlay = undefined;
        }
    };
    class_1.prototype.setToggleLabel = function () {
        if (this.toggle) {
            this.toggle.setAttribute('aria-label', this.toggle.textContent
                ? this.toggle.textContent : this.translator(Translations.DROPDOWN_TOGGLE));
        }
    };
    class_1.prototype.render = function () {
        return [
            h("span", { class: "anj-dropdown-toggle" }, h("slot", { name: "dropdown-toggle" })),
            h("anj-overlay", { class: "anj-dropdown-menu", placement: this.placement, offset: this.arrow ? '0, 15' : '0, 0', trapFocus: true }, this.arrow ? h("anj-arrow", null) : undefined, h("slot", null))
        ];
    };
    Object.defineProperty(class_1.prototype, "element", {
        get: function () { return getElement(this); },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(class_1, "watchers", {
        get: function () {
            return {
                "translator": ["injectedPropWatcher"]
            };
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(class_1, "style", {
        get: function () { return "anj-dropdown{display:inline-block}anj-dropdown .anj-dropdown-toggle>anj-button{margin:0!important;white-space:nowrap}anj-dropdown .anj-dropdown-toggle anj-button:last-child:not(:first-child) .anj-button{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0!important;padding-left:.75rem;padding-right:.75rem}anj-dropdown .anj-dropdown-toggle anj-button:first-child:not(:last-child) .anj-button{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:.75rem}anj-dropdown .anj-dropdown-toggle anj-button:first-child:not(:last-child)[context=primary] .anj-button{border-right:1px solid var(--anj-light-medium)}anj-dropdown anj-icon-opener{font-size:.7rem;margin-left:.5rem}"; },
        enumerable: true,
        configurable: true
    });
    return class_1;
}());
Tunnel.injectProps(Dropdown, ['translator']);
// Fixes https://git.zias.io/ui-foundation/anjuna/issues/867 by not binding to clear/close buttons as dropdown toggles
var noCloseButtons = function (el) {
    return !el.closest('anj-button-close');
};
var DROPDOWN_ITEM_CLASS = 'anj-dropdown-item';
var DropdownItem = /** @class */ (function () {
    function DropdownItem(hostRef) {
        registerInstance(this, hostRef);
        this.active = false;
        /**
         * Is the item disabled
         */
        this.disabled = false;
        this.anjDropdownItemSelect = createEvent(this, "anjDropdownItemSelect", 7);
    }
    DropdownItem.prototype.onDisabled = function () {
        if (this.anchor) {
            this.anchor.setAttribute('tabindex', this.disabled ? '-1' : undefined);
            this.anchor.setAttribute('aria-disabled', this.disabled ? "" + this.disabled : undefined);
        }
    };
    DropdownItem.prototype.componentWillLoad = function () {
        this.anchor = this.element.querySelector('a') || undefined;
        if (this.anchor) {
            this.anchor.classList.add(DROPDOWN_ITEM_CLASS);
            this.onDisabled();
        }
    };
    DropdownItem.prototype.onMouseDown = function (event) {
        if (this.disabled) {
            event.preventDefault();
            event.stopPropagation();
        }
    };
    DropdownItem.prototype.onClick = function (event) {
        if (this.disabled) {
            return this.onMouseDown(event);
        }
        this.anjDropdownItemSelect.emit(this.payload);
    };
    DropdownItem.prototype.render = function () {
        return this.anchor ? h("slot", null) :
            h("button", { type: "button", "aria-disabled": this.disabled, disabled: this.disabled, class: DROPDOWN_ITEM_CLASS }, h("slot", null));
    };
    Object.defineProperty(DropdownItem.prototype, "element", {
        get: function () { return getElement(this); },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DropdownItem, "watchers", {
        get: function () {
            return {
                "disabled": ["onDisabled"]
            };
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DropdownItem, "style", {
        get: function () { return "anj-dropdown-item .anj-dropdown-item{display:block;font-size:.875rem;font-family:var(--anj-font-family);line-height:1.5;outline:none;background-color:transparent;border:0;color:var(--anj-text);clear:both;cursor:pointer;font-weight:400;padding:.25rem .75rem;text-align:inherit;white-space:nowrap;width:100%}anj-dropdown-item .anj-dropdown-item,anj-dropdown-item .anj-dropdown-item:after,anj-dropdown-item .anj-dropdown-item:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}anj-dropdown-item .anj-dropdown-item:active,anj-dropdown-item .anj-dropdown-item :active,anj-dropdown-item .anj-dropdown-item:focus,anj-dropdown-item .anj-dropdown-item :focus{outline:none}anj-dropdown-item .anj-dropdown-item:active,anj-dropdown-item .anj-dropdown-item:focus,anj-dropdown-item .anj-dropdown-item:hover{background-color:var(--anj-background);color:var(--anj-text);text-decoration:none;outline:none}anj-dropdown-item[active] .anj-dropdown-item,anj-dropdown-item[active] .anj-dropdown-item:active,anj-dropdown-item[active] .anj-dropdown-item:hover{background-color:var(--anj-highlight);color:var(--anj-light)}anj-dropdown-item[disabled] .anj-dropdown-item,anj-dropdown-item[disabled] .anj-dropdown-item:active,anj-dropdown-item[disabled] .anj-dropdown-item:hover{background-color:var(--anj-light);color:var(--anj-neutral);pointer-events:none}"; },
        enumerable: true,
        configurable: true
    });
    return DropdownItem;
}());
export { Dropdown as anj_dropdown, DropdownItem as anj_dropdown_item };
