@scania/tegel
Version:
Tegel Design System
52 lines (51 loc) • 2.36 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');
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" })))));
}
static get is() { return "tds-header"; }
static get originalStyleUrls() {
return {
"$": ["header.scss"]
};
}
static get styleUrls() {
return {
"$": ["header.css"]
};
}
static get elementRef() { return "host"; }
}