'use strict';

var index = require('./index-9ZJx0550.js');
var component = require('./component-CRc6eHcV.js');
var ariaValidationController = require('./aria-validation-controller-B7unOPxT.js');
require('./Effect-BIlTHtLK.js');

class ListKeyboardNavigationController {
    host;
    elements = [];
    constructor(host) {
        this.host = host;
    }
    hostDidRender() {
        this.host.el.addEventListener('keydown', this.handleKeydown);
    }
    updateElements(elements) {
        this.elements = elements;
    }
    handleKeydown = (event) => {
        const { key } = event;
        if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(key))
            return;
        const activeElement = component.getDeepActiveElement(document);
        const nextElement = this.getNextFocusableElement(activeElement, ['ArrowDown', 'ArrowRight'].includes(key) ? 'down' : 'up');
        if (nextElement) {
            event.preventDefault();
            nextElement.focus?.();
        }
    };
    getNextFocusableElement(current, direction) {
        const { elements } = this;
        const currentIndex = elements.indexOf(current);
        if (currentIndex === -1)
            return null;
        let nextIndex = null;
        if (direction === 'down') {
            nextIndex = (currentIndex + 1) % elements.length;
        }
        else if (direction === 'up') {
            nextIndex = (currentIndex - 1 + elements.length) % elements.length;
        }
        if (nextIndex == null)
            return null;
        const candidate = elements[nextIndex];
        if (!component.canReceiveFocus(candidate))
            return this.getNextFocusableElement(candidate, direction);
        return candidate;
    }
}

const lmvzHeaderCss = () => `:host{display:flex;width:100vw;flex-direction:row;align-items:center;box-sizing:border-box;background-color:var(--lmvz-semantic-color-surface-primary, #ffffff);--lmvz-header-x-spacing-level-1:var(--lmvz-dimension-8-28, clamp(0.5rem, 0.2rem + 1.29vw, 1.75rem));--lmvz-header-x-spacing-level-2:var(--lmvz-component-buttongroup-wrapper-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));padding:var(--lmvz-dimension-8-16, clamp(0.5rem, 0.38rem + 0.52vw, 1rem)) var(--lmvz-header-x-spacing-level-1);gap:var(--lmvz-header-x-spacing-level-1);.brand{display:inline-flex;justify-content:center;align-items:center}#fallback-logo-lmvz{height:34px;width:auto}nav{flex-grow:1}.primary-menubar{display:flex;flex-direction:row;align-items:center}.secondary-menubar{display:flex;flex-direction:row;align-items:center;margin-left:var(--lmvz-header-x-spacing-level-2);padding-left:var(--lmvz-header-x-spacing-level-2);border-left:1px solid var(--lmvz-semantic-color-border-default, #e0e0e0)}}`;

const LmvzHeader = class extends ariaValidationController.ReactiveControllerHost {
    get el() { return index.getElement(this); }
    primarySlot;
    secondarySlot;
    secondaryNav;
    keyboardNavigationController = new ListKeyboardNavigationController(this);
    get primaryMenuitems() {
        return this.primarySlot.assignedElements({ flatten: false });
    }
    get secondaryMenuitems() {
        return this.secondarySlot.assignedElements({ flatten: true });
    }
    get role() {
        return 'banner';
    }
    lmvzActiveNav;
    get secondarySlotName() {
        return `connect-nav-${this.lmvzActiveNav}`;
    }
    constructor(hostRef) {
        super();
        index.registerInstance(this, hostRef);
        this.addController(new ariaValidationController.AriaValidationController(this, { reValidateOnPropChanges: true }));
        this.addController(this.keyboardNavigationController);
    }
    handleActiveNavChange() {
        this.updateElementsActive();
    }
    componentDidLoad() {
        this.primarySlot.addEventListener('slotchange', this.handlePrimaryNavChange.bind(this));
        this.handlePrimaryNavChange();
        this.secondarySlot.addEventListener('slotchange', this.handleSecondaryNavChange.bind(this));
    }
    handlePrimaryNavChange() {
        const items = this.primaryMenuitems;
        if (!items.length) {
            console.warn('Primary slot has no assigned elements. Please add navigation items to the primary slot.');
            return;
        }
        items.forEach(el => {
            el.setAttribute('aria-haspopup', 'true');
            el.setAttribute('aria-controls', `nav-secondary`);
        });
        this.updateElementsActive();
    }
    handleSecondaryNavChange() {
        const items = this.secondaryMenuitems;
        if (!items.length) {
            return;
        }
        this.keyboardNavigationController.updateElements([...this.primaryMenuitems, ...this.secondaryMenuitems]);
    }
    updateElementsActive() {
        const items = this.primaryMenuitems;
        let label;
        items.forEach(el => {
            const isActive = el.id === this.lmvzActiveNav;
            if (isActive)
                label = el.textContent || el.id;
            el.setAttribute('aria-expanded', isActive ? 'true' : 'false');
        });
        this.secondaryNav.setAttribute('aria-label', `Untermenü für ${label}`);
    }
    delegateFocus() {
        const firstFocusable = this.primaryMenuitems[0];
        if (firstFocusable) {
            firstFocusable.focus();
        }
    }
    render() {
        return (index.h(index.Host, { key: '58934683ff442801eb34f025ac809631f93a27e8', onFocus: this.delegateFocus.bind(this) }, index.h("div", { key: '35d3eadfabb70f83b313f946c8d31f9c223e8344', class: "brand" }, index.h("slot", { key: '5ce98314d980d63e1c87f508d96119aca2e702a9', name: "brand" }, index.h("lmvz-icon", { key: 'b24e61a9071d81948d506a8c545e012d3f0e5dd2', id: "fallback-logo-lmvz", icon: "Logo", size: "inherit", "aria-label": "Lehrmittelverlag Z\u00FCrich" }))), index.h("nav", { key: '1d5cc9010ef90e6cebc8a7b054db595f35f9e040', "aria-label": "Hauptnavigation" }, index.h("div", { key: '488a1b1544242562b57d76169f1988d84c611de4', role: "menubar", class: "primary-menubar" }, index.h("slot", { key: '59c6dd1442290931ed9a55f7bacc65ea4bb9ff6d', name: "nav-primary", ref: el => (this.primarySlot = el) }), index.h("separator", { key: '2729f0e8b115614c50c4a16b6684a3bdb21856b8' }), index.h("div", { key: '6b5bed5951bad9173fefdc78039e71c4ccc120b2', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: el => (this.secondaryNav = el) }, index.h("slot", { key: '02f5a13e8851372c1698e3f786a8757a0a09c32f', name: this.secondarySlotName, ref: el => (this.secondarySlot = el) })))), index.h("div", { key: '53aafe8139bcea27d3039f64a48974cdb5aac5f9', class: "actions" }, index.h("slot", { key: 'f12ee19831073253e6ba8e251ba31ec403c21035', name: "actions" }))));
    }
    static get watchers() { return {
        "lmvzActiveNav": [{
                "handleActiveNavChange": 0
            }]
    }; }
};
LmvzHeader.style = lmvzHeaderCss();

exports.lmvz_header = LmvzHeader;
