@scania/tegel
Version:
Tegel Design System
72 lines (68 loc) • 4.35 kB
JavaScript
import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-51d04e39.js';
const sideMenuDropdownCss = ":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:69px;position:absolute;left:var(--side-menu-width);box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-sidebar-side-menu-subnav-background)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
const TdsSideMenuDropdownStyle0 = sideMenuDropdownCss;
const TdsSideMenuDropdown = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.defaultOpen = false;
this.buttonLabel = undefined;
this.selected = false;
this.open = false;
this.hoverState = undefined;
this.collapsed = false;
}
collapsedSideMenuEventHandler(event) {
this.collapsed = event.detail.collapsed;
}
onEventPointerEnter() {
this.setHoverStateOpen();
}
onEventFocus() {
this.setHoverStateOpen();
}
onEventPointerLeave() {
this.setHoverStateClosed();
}
onEventBlur() {
this.setHoverStateClosed();
}
handleKeyDown(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
this.open = !this.open;
}
}
setHoverStateOpen() {
this.hoverState = { isHovered: true, updatedAt: Date.now() };
}
setHoverStateClosed() {
const leftAt = Date.now();
const toleranceInMilliseconds = 150;
setTimeout(() => {
if (this.hoverState.isHovered && this.hoverState.updatedAt < leftAt) {
this.hoverState = { isHovered: false, updatedAt: Date.now() };
}
}, toleranceInMilliseconds);
}
getIsOpenState() {
var _a;
return this.collapsed ? (_a = this.hoverState) === null || _a === void 0 ? void 0 : _a.isHovered : this.open;
}
connectedCallback() {
this.sideMenuEl = this.host.closest('tds-side-menu');
this.collapsed = this.sideMenuEl.collapsed;
this.open = this.defaultOpen;
}
render() {
return (h(Host, { key: '78a5c58e58b38e84cae96a9afd8166bfe3125a02' }, h("div", { key: '70e8e68e6db938cb2177169ca1836e84eb48cce6', class: {
'wrapper': true,
'state-open': this.getIsOpenState(),
'state-collapsed': this.collapsed,
} }, h("tds-side-menu-item", { key: '5834d5e804ad422937f2971637b3a70fb1fb676e', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
this.open = !this.open;
}, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'd454e6148a12c0bd1864b6c148f169ac342e9da2' }, h("slot", { key: '8a2579b751421d9df8e3dd5a84b04a5f844d383c', name: "icon" }), !this.collapsed && (h(Fragment, { key: 'f3419cc2993191186dccc9a208ff8150bf592eeb' }, this.buttonLabel, h("slot", { key: 'ff616384d76d6f3df82ac6abb12d65e4f6a5906d', name: "label" }), h("tds-icon", { key: 'a4acd9c0de3f437766673c57b4d73ac13cc8917b', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: 'db1ec059f4f1910d1fef432baff29810883ec2ef', class: "menu", tabindex: this.collapsed ? '0' : null }, this.collapsed && (h("h3", { key: 'a9f35f976da7ceaf38eb1c1641b43617e4e583c6', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: 'ef8b02b77b93b54f0a9aa4c5fb367356c12e9b82', name: "label" }))), h("slot", { key: '15c7c9e5a6a0615f478c5f93de8753211d17b3c3' })))));
}
get host() { return getElement(this); }
};
TdsSideMenuDropdown.style = TdsSideMenuDropdownStyle0;
export { TdsSideMenuDropdown as tds_side_menu_dropdown };