@scania/tegel
Version:
Tegel Design System
50 lines (49 loc) • 2.31 kB
JavaScript
import { h, Host } from "@stencil/core";
import updateListChildrenRoles from "../../utils/updateListChildrenRoles";
import inheritAriaAttributes from "../../utils/inheritAriaAttributes";
/**
* @slot <default> - <b>Unnamed slot.</b> Slot for the left-aligned content consisting of buttons, dropdowns, links, etc.
* @slot hamburger - Slot for the hamburger button for opening the mobile menu.
* @slot title - Slot for the title.
* @slot end - Slot for the end (right side) of the header.
*/
export class TdsHeader {
constructor() {
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" })))));
}
static get is() { return "tds-header"; }
static get originalStyleUrls() {
return {
"$": ["header.scss"]
};
}
static get styleUrls() {
return {
"$": ["header.css"]
};
}
static get elementRef() { return "host"; }
}