@scania/tegel
Version:
Tegel Design System
118 lines (117 loc) • 4.31 kB
JavaScript
import { Host, h } from "@stencil/core";
import isHeadingElement from "../../../utils/isHeadingElement";
import getPreviousNestedChildOfSiblingsMatching from "../../../utils/getPreviousNestedChildOfSiblingsMatching";
/**
* @slot <default> - <b>Unnamed slot.</b> For a dropdown list item.
*/
export class TdsHeaderDropdownList {
constructor() {
// A Map to store the slots and their associated slotchange listeners.
this.slotListeners = new Map();
this.size = 'md';
this.headingElement = undefined;
}
componentWillLoad() {
const { children } = this.host;
// Set the size prop for each child, if they have such a property
for (let i = 0; i < children.length; i++) {
const child = children[i];
if ('size' in child) {
child.size = this.size;
}
}
let listRoot = this.host;
if (this.host.parentElement.tagName.toLowerCase() === 'tds-header-launcher-list') {
listRoot = this.host.parentElement;
}
const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, isHeadingElement);
if (headingEl) {
this.headingElement = headingEl;
}
else {
console.warn('Heading element for list not found');
}
}
componentDidLoad() {
this.host.shadowRoot.querySelectorAll('slot').forEach((slot) => {
// Add the slotchange event listener.
const onSlotChange = (e) => {
this.processAssignedElements(e.target);
};
slot.addEventListener('slotchange', onSlotChange);
onSlotChange({ target: slot });
// Store the slot and its listener in the Map.
this.slotListeners.set(slot, onSlotChange);
});
}
processAssignedElements(slot) {
const nodes = slot.assignedElements();
nodes.forEach((node) => {
// Add a listitem role to the assigned element if needed.
if (node.tagName.toLowerCase() !== 'li' &&
node.tagName.toLowerCase() !== 'slot' &&
node.getAttribute('role') !== 'listitem') {
node.setAttribute('role', 'listitem');
}
// If the assigned element is a slot, process its assigned elements recursively.
if (node.tagName.toLowerCase() === 'slot') {
this.processAssignedElements(node);
}
});
}
disconnectedCallback() {
this.slotListeners.forEach((listener, slot) => {
// Remove the slotchange event listener and delete the entry from the Map.
slot.removeEventListener('slotchange', listener);
this.slotListeners.delete(slot);
});
}
render() {
var _a;
const attributes = {
'role': 'list',
'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
};
return (h(Host, Object.assign({ key: '3eeb33a5a5ba4afbfa21bd65fc4ad8ca7d8feddf' }, attributes), h("slot", { key: '5561862a0377a76cae8d781849c4de10c9e8cdeb' })));
}
static get is() { return "tds-header-dropdown-list"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["header-dropdown-list.scss"]
};
}
static get styleUrls() {
return {
"$": ["header-dropdown-list.css"]
};
}
static get properties() {
return {
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'lg' | 'md'",
"resolved": "\"lg\" | \"md\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The size of the component."
},
"attribute": "size",
"reflect": true,
"defaultValue": "'md'"
}
};
}
static get states() {
return {
"headingElement": {}
};
}
static get elementRef() { return "host"; }
}