@scania/tegel
Version:
Tegel Design System
102 lines (96 loc) • 5.72 kB
JavaScript
import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
import { d as dfs } from './dfs-1e574d5f.js';
const coreHeaderItemCss = ":host{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-header-nav-item-color)}:host .item{all:unset;box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-width:var(--tds-header-height);height:var(--tds-header-height);margin:0}:host .item *{box-sizing:border-box}:host slot{white-space:nowrap}:host ::slotted(svg){font-size:20px}";
const TdsCoreHeaderItemStyle0 = coreHeaderItemCss;
const TdsCoreHeaderItem = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
render() {
return (h(Host, { key: '61b64a52364893a5b67de5797ae49b3c238086ac' }, h("div", { key: '29a46213b10ea291137b2fa7e2f28594177da0fb', class: "item" }, h("slot", { key: 'a844cb74962112475d6da8d1598f0fa7e1fa0b64' }))));
}
};
TdsCoreHeaderItem.style = TdsCoreHeaderItemStyle0;
const headerItemCss = ":host ::slotted(button),:host ::slotted(a){all:unset;box-sizing:border-box;background-color:var(--tds-header-background);border-right:1px solid var(--tds-header--basic-element-border);width:100%;height:100%;cursor:pointer;padding:0 24px;display:flex;align-items:center;gap:8px}:host ::slotted(button) *,:host ::slotted(a) *{box-sizing:border-box}:host ::slotted(button:hover),:host ::slotted(a:hover){background-color:var(--tds-header-item-hover)}:host ::slotted(button:focus-visible),:host ::slotted(a:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .component-active ::slotted(button),:host .component-active ::slotted(a){background-color:var(--tds-header--basic-element-background-open);color:var(--tds-header-nav-item-dropdown-opened-color);border-color:var(--tds-header--basic-element-border-open)}:host .component-selected:not(.component-active) ::slotted(button),:host .component-selected:not(.component-active) ::slotted(a){background-color:var(--tds-header--basic-element-background-selected);padding-top:4px;border-bottom-style:solid;border-bottom-width:4px;border-bottom-color:var(--tds-nav-item-border-color-active)}";
const TdsHeaderItemStyle0 = headerItemCss;
const TdsHeaderItem = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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' }))));
}
get host() { return getElement(this); }
};
TdsHeaderItem.style = TdsHeaderItemStyle0;
export { TdsCoreHeaderItem as tds_core_header_item, TdsHeaderItem as tds_header_item };