@scania/tegel
Version:
Tegel Design System
147 lines (146 loc) • 5.73 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() {
/** If the button should appear active. Can be used when the button is
* triggering a dropdown, and the dropdown is open, for example. */
this.active = false;
/** If the button should appear selected. */
this.selected = false;
}
updateSlotted(searchPredicate, mutationCallback) {
var _a;
const assignedElements = (_a = this.slotEl) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true });
if (!(assignedElements === null || assignedElements === void 0 ? void 0 : assignedElements.length))
return;
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() {
var _a, _b;
this.slotEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
this.updateSlottedElements();
(_b = this.slotEl) === null || _b === void 0 ? void 0 : _b.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: '94dfaa314f682dee3810cf876f11d3a60ff44cec' }, h("tds-core-header-item", { key: 'dafce7d3bd855dcb815cd92648d9a9765a9365e0', class: {
'component-active': this.active,
'component-selected': this.selected,
} }, h("slot", { key: 'a0cfa89d9744fd2a2012c34dc3cb8c1c974029a6' }))));
}
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."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "active",
"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."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "selected",
"defaultValue": "false"
}
};
}
static get elementRef() { return "host"; }
}