@scania/tegel/dist/esm/tds-header.entry.js

Tegel Design System

import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
import { i as inheritAriaAttributes } from './inheritAriaAttributes-DyLhgCIg.js';
import './inheritAttributes-CF8bH08v.js';

/**
 * Loop through the children and add the 'listitem' role if needed.
 * @param {Node} targetNode The node being updated.
 * */
const updateListChildrenRoles = (targetNode) => {
    targetNode.childNodes.forEach((node) => {
        if (node.nodeType === Node.ELEMENT_NODE) {
            const element = node;
            if (element.tagName.toLowerCase() !== 'li' && element.getAttribute('role') !== 'listitem') {
                element.setAttribute('role', 'listitem');
            }
        }
    });
};

const headerCss = () => `:host,:root{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}html,:root{--tds-nav-dropdown-menu-box:0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);--tds-nav-dropdown-item-border-radius:0 0 4px 4px;--tds-font-family-headline:"Scania Sans Headline", arial, helvetica, sans-serif}tds-header{display:block;height:var(--tds-header-height);background-color:var(--tds-header-background);width:100%;z-index:300}tds-header tds-header-dropdown-list-item a *,tds-header tds-header-dropdown-list-item button *{pointer-events:none}nav{box-sizing:border-box;background-color:var(--tds-header-background);width:100%;display:block}nav *{box-sizing:border-box}nav .tds-header-component-list{height:var(--tds-header-height);all:unset;display:flex;justify-content:center;align-items:center}nav tds-header-dropdown,nav tds-header-item{display:none}nav .tds-header-middle-spacer{all:unset;display:block;flex-grow:1;height:var(--tds-header-height);border-right:1px solid var(--tds-header--basic-element-border)}@media screen and (min-width: 992px){nav tds-header-dropdown,nav tds-header-item{display:block}}nav tds-header-item:nth-child(3),nav tds-header-dropdown:nth-child(3){border-left:1px solid var(--tds-header--basic-element-border)}`;

const TdsHeader = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        const callback = (mutationsList) => {
            mutationsList.forEach((mutation) => {
                if (mutation.type === 'childList') {
                    updateListChildrenRoles(mutation.target);
                }
            });
        };
        this.observer = new MutationObserver(callback);
    }
    componentDidLoad() {
        const hostElement = this.host;
        const navElement = hostElement.querySelector('.tds-header-component-list');
        if (navElement) {
            this.observer.observe(navElement, {
                childList: true,
                subtree: false,
            });
            updateListChildrenRoles(navElement);
        }
    }
    disconnectedCallback() {
        this.observer.disconnect();
    }
    render() {
        const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
        return (h(Host, { key: '181fbfe75463969a86384760288b62a2c67ce83e' }, h("slot", { key: '73d7e5f465cdb8d208bb227fdc0db5411eb2c32a', name: "hamburger" }), h("slot", { key: '62844699d097f33eb4286b7a564c42bba820323a', name: "title" }), h("nav", Object.assign({ key: '30676babd29ca880b1f21d1fce28ab124e1ae90b' }, navAttributes), h("ul", { key: '864fca4598d6611c6d895a1550301b21073eeb76', class: "tds-header-component-list" }, h("slot", { key: '4acca7b1d28b79557f59395cc955ee74531b6828' }), h("li", { key: '0917aa2f981f5951b3b688e6eaa93c7a129cb366', class: "tds-header-middle-spacer" }), h("slot", { key: 'c1b1b52718d6180a1b77f0f04498f7f81528ac0d', name: "end" })))));
    }
    get host() { return getElement(this); }
};
TdsHeader.style = headerCss();

export { TdsHeader as tds_header };