@scania/tegel
Version:
Tegel Design System
77 lines (73 loc) • 4.58 kB
JavaScript
import { r as registerInstance, h, F as Fragment, H as Host, a as getElement } from './index-9xxNGlso.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 TdsSideMenuDropdown = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** If the dropdown should be open from the start. */
this.defaultOpen = false;
/** If the button that opens the dropdown should appear selected. */
this.selected = false;
/** Toggle open state programmatically */
this.open = false;
this.hoverState = {
isHovered: false,
updatedAt: 0,
};
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() {
var _a;
this.sideMenuEl = this.host.closest('tds-side-menu');
this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
this.open = this.defaultOpen;
}
render() {
return (h(Host, { key: '61c0e4c1df178d14422de845086864c8de3cf231' }, h("div", { key: '775032857d13a5d9f01f5bbe22de87480bceddfe', class: {
'wrapper': true,
'state-open': this.getIsOpenState(),
'state-collapsed': this.collapsed,
} }, h("tds-side-menu-item", { key: 'dd599c6234d4f9d6c11aa680371e69ab64ea7a2e', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
this.open = !this.open;
}, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'da26f06483ad9348e9442c5aec70ee2f3af184e5' }, h("slot", { key: 'ce95165a9e75cf9f150364f40c5dd49bbc795ca5', name: "icon" }), !this.collapsed && (h(Fragment, { key: '524ef1b9a67c9a4c950691da6e16ba7100fae6b6' }, this.buttonLabel, h("slot", { key: '812088f502894d42dc5c658a8035f6212c7f1876', name: "label" }), h("tds-icon", { key: 'c68ec5d4c5ea3541bff95e4d7baf07098b953f07', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: 'bc99efa3ca9b83b0d6e599db85e193a91258bad1', class: "menu", tabindex: this.collapsed ? '0' : undefined }, this.collapsed && (h("h3", { key: 'c9a5f0aba4df7d2e22b9e84f75db46be8892c07c', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: 'd45b96b5941b1ad4f19e96ea023d6b513d54f9e0', name: "label" }))), h("slot", { key: '67f16383ec5ce1c10d3a1be8488932972891ef4c' })))));
}
get host() { return getElement(this); }
};
TdsSideMenuDropdown.style = sideMenuDropdownCss();
export { TdsSideMenuDropdown as tds_side_menu_dropdown };