var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { controller, targets } from '@github/catalyst';
let PageHeaderElement = class PageHeaderElement extends HTMLElement {
    connectedCallback() {
        for (const item of this.actionItems) {
            /*
            If there is only one action to be shown, we show that instead of the mobile action menu. However, the buttons should be the smaller button variant.
            Unfortunately, the `size` attribute does not support responsive attributes and the .pcss syntax does not support inheritance between classes.
            So we have to add the class manually here.
            */
            if (window.innerWidth <= 544) {
                item.classList.add('Button--small');
            }
        }
    }
    menuItemClick(event) {
        const currentTarget = event.currentTarget;
        const id = currentTarget?.getAttribute('data-for');
        if (id) {
            document.getElementById(id)?.click();
        }
    }
};
__decorate([
    targets
], PageHeaderElement.prototype, "actionItems", void 0);
PageHeaderElement = __decorate([
    controller
], PageHeaderElement);
if (!window.customElements.get('page-header')) {
    window.PageHeaderElement = PageHeaderElement;
    window.customElements.define('page-header', PageHeaderElement);
}