@scania/tegel
Version:
Tegel Design System
108 lines (104 loc) • 6.63 kB
JavaScript
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
import { d as dfs } from './p-52bf0fdf.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:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--tds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--tds-sidemenu-item-state-active)}: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){position:relative;background-color:var(--tds-sidebar-item-state-selected)}: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)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
const TdsSideMenuItemStyle0 = sideMenuItemCss;
const TdsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuItem extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.selected = false;
this.active = false;
this.collapsed = false;
this.hasUserComponent = false;
}
findSlottedAndExecute(searchPredicate, callback) {
const assignedElements = this.slotEl.assignedElements({ flatten: true });
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() {
this.slotEl = this.host.shadowRoot.querySelector('slot');
this.updateSlottedElements();
this.updateHasUserComponent();
this.slotEl.addEventListener('slotchange', () => {
this.updateSlottedElements();
this.updateHasUserComponent();
});
}
collapseSideMenuEventHandler(event) {
this.collapsed = event.detail.collapsed;
this.updateSlottedElements();
this.updateHasUserComponent();
}
render() {
return (h(Host, { key: '714394a875c4fc72f95f9a4a1d1fd928b6e4cb01' }, h("div", { key: 'b9686737469cbdae97f940c4e20364f45ae4e568', class: {
'component': true,
'component-selected': this.selected,
'component-active': this.active,
'component-collapsed': this.collapsed,
'component-has-user': this.hasUserComponent,
} }, h("slot", { key: 'cde3ca8b26d12e652d11ef11c9ac1dc6852f5860' }))));
}
get host() { return this; }
static get style() { return TdsSideMenuItemStyle0; }
}, [1, "tds-side-menu-item", {
"selected": [4],
"active": [4],
"collapsed": [32],
"hasUserComponent": [32]
}, [[16, "internalTdsSideMenuPropChange", "collapseSideMenuEventHandler"]]]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-side-menu-item"];
components.forEach(tagName => { switch (tagName) {
case "tds-side-menu-item":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsSideMenuItem);
}
break;
} });
}
defineCustomElement();
export { TdsSideMenuItem as T, defineCustomElement as d };