@scania/tegel
Version:
Tegel Design System
95 lines (91 loc) • 9.1 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 sideMenuItemCss = () => `:host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:10px;padding:0 22px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component ::slotted(tds-side-menu-user),:host .component-has-user ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:16px;padding:0 22px 0 16px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component tds-icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:inset 0 0 0 3px var(--tds-white);outline-offset:-2px;z-index:1}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button),:host .component:hover ::slotted(tds-side-menu-user){background-color:var(--tds-sidebar-item-state-hover);position:relative}:host .component:hover ::slotted(a)::before,:host .component:hover ::slotted(button)::before,:host .component:hover ::slotted(tds-side-menu-user)::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-side-menu-item-hover-indicator)}:host .component:hover ::slotted(a:focus-visible),:host .component:hover ::slotted(button:focus-visible),:host .component:hover ::slotted(tds-side-menu-user:focus-visible){background-color:var(--tds-sidebar-item-state-hover);position:relative}:host .component:hover ::slotted(a:focus-visible)::before,:host .component:hover ::slotted(button:focus-visible)::before,:host .component:hover ::slotted(tds-side-menu-user:focus-visible)::before{content:"";position:absolute;top:3px;left:3px;width:4px;height:calc(100% - 6px);background-color:var(--tds-side-menu-item-hover-indicator)}:host .component:active ::slotted(a),:host .component:active ::slotted(button),:host .component:active ::slotted(tds-side-menu-user){background-color:var(--tds-sidemenu-item-state-active);position:relative}:host .component:active ::slotted(a)::before,:host .component:active ::slotted(button)::before,:host .component:active ::slotted(tds-side-menu-user)::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-side-menu-item-pressed-indicator)}:host .component:active ::slotted(a:focus-visible),:host .component:active ::slotted(button:focus-visible),:host .component:active ::slotted(tds-side-menu-user:focus-visible){background-color:var(--tds-sidemenu-item-state-active);position:relative}:host .component:active ::slotted(a:focus-visible)::before,:host .component:active ::slotted(button:focus-visible)::before,:host .component:active ::slotted(tds-side-menu-user:focus-visible)::before{content:"";position:absolute;top:3px;left:3px;width:4px;height:calc(100% - 6px);background-color:var(--tds-side-menu-item-pressed-indicator)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center;position:relative}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button),:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user){background-color:var(--tds-sidebar-item-state-selected);position:relative}:host .component-selected:not(:host .component-active) ::slotted(a)::before,:host .component-selected:not(:host .component-active) ::slotted(button)::before,:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user)::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}:host .component-selected:not(:host .component-active) ::slotted(a:focus-visible),:host .component-selected:not(:host .component-active) ::slotted(button:focus-visible),:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user:focus-visible){background-color:var(--tds-sidebar-item-state-selected);position:relative}:host .component-selected:not(:host .component-active) ::slotted(a:focus-visible)::before,:host .component-selected:not(:host .component-active) ::slotted(button:focus-visible)::before,:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user:focus-visible)::before{content:"";position:absolute;top:3px;left:3px;width:4px;height:calc(100% - 6px);background-color:var(--tds-sidebar-side-menu-single-subitem-selected-border-color)} (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}`;
const TdsSideMenuItem = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** If the item should appear selected. */
this.selected = false;
/** If the item should appear active. Can be used when the item is
* triggering a dropdown, and the dropdown is open, for example. */
this.active = false;
this.collapsed = false;
this.hasUserComponent = false;
}
findSlottedAndExecute(searchPredicate, callback) {
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) {
callback(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-side-menu-item-icon');
if (this.collapsed) {
element.classList.add('__tds-side-menu-item-icon-collapsed');
}
else {
element.classList.remove('__tds-side-menu-item-icon-collapsed');
}
};
this.findSlottedAndExecute(isIconOrSvg, addIconClass);
}
}
updateHasUserComponent() {
if (this.slotEl) {
const isUserComponent = (element) => element.tagName.toLowerCase() === 'tds-side-menu-user';
this.hasUserComponent = false;
this.findSlottedAndExecute(isUserComponent, () => {
this.hasUserComponent = true;
});
}
}
connectedCallback() {
var _a;
// closest() will return null if side-menu-item is inside a shadowRoot that
// does not contain a side-menu. This is the case for the side-menu-dropdown.
this.sideMenuEl = this.host.closest('tds-side-menu');
this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
}
componentDidLoad() {
var _a, _b;
this.slotEl = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) !== null && _b !== void 0 ? _b : null;
this.updateSlottedElements();
this.updateHasUserComponent();
if (this.slotEl) {
this.slotEl.addEventListener('slotchange', () => {
this.updateSlottedElements();
this.updateHasUserComponent();
});
}
}
collapseSideMenuEventHandler(event) {
this.collapsed = event.detail.collapsed;
this.updateSlottedElements();
this.updateHasUserComponent();
}
render() {
return (h(Host, { key: '540c5825a2cf8913891c0b6c06ad7e338c9546bc' }, h("div", { key: '2482c645b0d4650f1a389eed12e097a8fc35c03f', class: {
'component': true,
'component-selected': this.selected,
'component-active': this.active,
'component-collapsed': this.collapsed,
'component-has-user': this.hasUserComponent,
} }, h("slot", { key: 'b476beffec5acc60afd8c7e60754c16995f43c32' }))));
}
get host() { return getElement(this); }
};
TdsSideMenuItem.style = sideMenuItemCss();
export { TdsSideMenuItem as tds_side_menu_item };