@scania/tegel
Version:
Tegel Design System
136 lines (135 loc) • 5.08 kB
JavaScript
import { h, Host } from "@stencil/core";
import dfs from "../../../utils/dfs";
/**
* @slot <default> - <b>Unnamed slot.</b> For a link or button element.
*/
export class TdsHeaderItem {
constructor() {
this.active = false;
this.selected = false;
}
updateSlotted(searchPredicate, mutationCallback) {
const assignedElements = this.slotEl.assignedElements({ flatten: true });
const firstSlottedElement = assignedElements[0];
if (firstSlottedElement) {
const foundElement = dfs(firstSlottedElement, searchPredicate);
if (foundElement) {
mutationCallback(foundElement);
}
}
}
/**
* This function is needed because we can't use CSS selectors to style something in the light dom
*/
updateSlottedElements() {
if (this.slotEl) {
const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'tds-icon' || element.tagName.toLowerCase() === 'svg';
const addIconClass = (element) => element.classList.add('__tds-header-item-icon');
this.updateSlotted(isIconOrSvg, addIconClass);
const isImage = (element) => element.tagName.toLowerCase() === 'img';
const addImageClass = (element) => element.classList.add('__tds-header-item-image');
this.updateSlotted(isImage, addImageClass);
}
}
/**
* Read the native "order" attribute on the host and update the CSS order accordingly.
* If the attribute "order" has the value "end", the order is set to 1. Otherwise, 0.
*/
updateOrder() {
const orderValue = this.host.getAttribute('order');
switch (orderValue) {
case 'end':
this.host.style.order = '1';
break;
case 'start':
case null:
default:
this.host.style.order = '0';
break;
}
}
componentDidLoad() {
this.slotEl = this.host.shadowRoot.querySelector('slot');
this.updateSlottedElements();
this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
// Set the order on initial load.
this.updateOrder();
// Create a MutationObserver to listen for changes on the "order" attribute.
this.mutationObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'attributes' && mutation.attributeName === 'order') {
this.updateOrder();
}
});
});
// Start observing the host element for attribute changes (specifically "order").
this.mutationObserver.observe(this.host, {
attributes: true,
attributeFilter: ['order'],
});
}
disconnectedCallback() {
if (this.mutationObserver) {
this.mutationObserver.disconnect();
}
}
render() {
return (h(Host, { key: '4a9d013ab3abde506f9992453cae793db9a652cf' }, h("tds-core-header-item", { key: '359634d0bca7720c8a9bfd5c696a89c97df76a75', class: {
'component-active': this.active,
'component-selected': this.selected,
} }, h("slot", { key: '7318ad6ea4d1dfa0f16b70c6f305ece087aeea2e' }))));
}
static get is() { return "tds-header-item"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["header-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["header-item.css"]
};
}
static get properties() {
return {
"active": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If the button should appear active. Can be used when the button is\ntriggering a dropdown, and the dropdown is open, for example."
},
"attribute": "active",
"reflect": false,
"defaultValue": "false"
},
"selected": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If the button should appear selected."
},
"attribute": "selected",
"reflect": false,
"defaultValue": "false"
}
};
}
static get elementRef() { return "host"; }
}