@scania/tegel
Version:
Tegel Design System
107 lines (101 loc) • 6.47 kB
JavaScript
import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
import { d as dfs } from './dfs-CLF3diNe.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 TdsCoreHeaderItem = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
render() {
return (h(Host, { key: '065394c82cbfb0b40ee971c5cebc52bcfe85b526' }, h("div", { key: '7028fa75d5be79c1036abdb5bd4f0f6d94718061', class: "item" }, h("slot", { key: '79a30696b9001f8c3f2304d0b73b5f4caa6a9a56' }))));
}
};
TdsCoreHeaderItem.style = coreHeaderItemCss();
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);box-shadow:inset 0 -2px 0 0 var(--tds-header-item-border-hover)}:host ::slotted(button:active),:host ::slotted(a:active){background-color:var(--tds-header-item-active);box-shadow:inset 0 -2px 0 0 var(--tds-header-item-border-active)}:host ::slotted(button:focus-visible),:host ::slotted(a:focus-visible){border:none;margin-right:1px;outline:2px solid var(--tds-focus-outline-color);box-shadow:inset 0 0 0 3px var(--tds-white);outline-offset:-2px}: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){box-shadow:inset 0 -4px 0 0 var(--tds-header-item-border-hover)}:host .component-selected:not(.component-active) ::slotted(button:focus-visible),:host .component-selected:not(.component-active) ::slotted(a:focus-visible){box-shadow:inset 0 0 0 3px var(--tds-white)}`;
const TdsHeaderItem = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** 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' }))));
}
get host() { return getElement(this); }
};
TdsHeaderItem.style = headerItemCss();
export { TdsCoreHeaderItem as tds_core_header_item, TdsHeaderItem as tds_header_item };