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

Tegel Design System

import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
import { i as inheritAriaAttributes } from './inheritAriaAttributes-04f2f252.js';
import './inheritAttributes-d21e267b.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{--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 TdsHeaderStyle0 = headerCss;

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');
        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: '1e9a1427f3038ac59e3c89669049679a06626fff' }, h("slot", { key: 'a2e84cf4bfc88b8bc3a971cf374593afcd3eabae', name: "hamburger" }), h("slot", { key: 'c8a49826b7c504ddd17be29a3b6ae814848d6033', name: "title" }), h("nav", Object.assign({ key: '750a09450f2edfd0d335ca7863b084f62655129e' }, navAttributes), h("ul", { key: '1bca7410f4c0f81ffa77e57fba7c48f64afc22ab', class: "tds-header-component-list" }, h("slot", { key: 'fdaaac9d39e9cf5f396004dc1e1a7ce6d83a7ada' }), h("li", { key: '339deea3cbd820159adc3fe7dfa8a6a8e5192698', class: "tds-header-middle-spacer" }), h("slot", { key: '37273630aaf66ada7154ebb6f4ea01cc0ce0f94a', name: "end" })))));
    }
    get host() { return getElement(this); }
};
TdsHeader.style = TdsHeaderStyle0;

export { TdsHeader as tds_header };