@scania/tegel
Version:
Tegel Design System
185 lines (180 loc) • 11.8 kB
JavaScript
'use strict';
var index = require('./index-DGsdvbvx.js');
const sideMenuCss = () => `:host,:root{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{pointer-events:none;display:block;position:fixed;top:0;width:100%;height:100%;z-index:500}:host .wrapper{height:inherit;}:host .wrapper slot:not([name])::slotted(*){border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper ::slotted([slot=end]){border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper .tds-side-menu-list-end{margin-top:68px}:host .state-closed{display:none}:host .state-open slot[name=overlay]::slotted(tds-side-menu-overlay){opacity:0.4}:host .state-open slot[name=close-button]::slotted(tds-side-menu-close-button){opacity:1}:host .state-upper-slot-empty .tds-side-menu-list-upper{display:none}:host .state-upper-slot-empty .tds-side-menu-list-end{margin-top:0}:host .state-upper-slot-empty ::slotted([slot=end]){border-top:none;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)} (max-width: 992px){:host(.menu-opened){pointer-events:auto;z-index:500}} (min-width: 992px){:host(.menu-persistent){pointer-events:auto;position:static;width:272px;height:auto;border-right:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host(.menu-persistent) .wrapper slot[name=overlay]::slotted(tds-side-menu-overlay){display:none}:host(.menu-persistent) .wrapper slot[name=close-button]::slotted(tds-side-menu-close-button){display:none}:host(.menu-persistent) .menu{width:272px}:host(.menu-persistent) .state-closed{display:block}:host(.menu-persistent):host(.menu-collapsed){width:69px;box-sizing:border-box}:host(.menu-persistent):host(.menu-collapsed) .menu{width:68px}:host(.menu-persistent) slot[name=end]::slotted(*){display:none}}.menu{width:80%;height:inherit;position:relative;left:0;display:flex;flex-direction:column;justify-content:space-between}.menu *{padding:0;margin:0;box-sizing:border-box} (max-width: 384px){.menu{width:100%}}aside .tds-side-menu-wrapper{display:flex;justify-content:space-between;flex-direction:column;flex-grow:1;background-color:var(--tds-sidebar-side-menu-background-cover);overflow-y:auto}aside .tds-side-menu-wrapper:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background-clip:padding-box}aside .tds-side-menu-wrapper::-webkit-scrollbar{width:var(--tds-scrollbar-width)}aside .tds-side-menu-wrapper::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}aside .tds-side-menu-wrapper::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}aside .tds-side-menu-wrapper::-webkit-scrollbar-button{height:0;width:0} not selector(::-webkit-scrollbar){aside .tds-side-menu-wrapper{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}aside [role=navigation]{height:100%;display:flex;flex-direction:column}aside li{list-style:none;padding:0;margin:0}`;
const GRID_LG_BREAKPOINT = 992;
const TdsSideMenu = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.tdsCollapse = index.createEvent(this, "tdsCollapse", 7);
this.internalTdsCollapse = index.createEvent(this, "internalTdsCollapse", 6);
this.internalTdsSideMenuPropChange = index.createEvent(this, "internalTdsSideMenuPropChange", 6);
/** Applicable only for mobile. If the Side Menu is open or not. */
this.open = false;
/** Applicable only for desktop. If the Side Menu should always be shown. */
this.persistent = false;
/** If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed.
* NOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tdsCollapse event. */
this.collapsed = false;
this.isMobile = false;
this.isUpperSlotEmpty = false;
this.isCollapsed = false;
/* To preserved initial state of collapsed prop as it is changed in runtime */
this.initialCollapsedState = false;
/** @internal Tracks the currently focused element index for keyboard navigation */
this.activeElementIndex = 0;
this.handleMatchesLgBreakpointChange = (e) => {
const isMobile = !e.matches;
this.isMobile = isMobile;
if (isMobile) {
this.collapsed = false;
}
else {
this.open = false;
this.collapsed = this.initialCollapsedState;
}
};
}
handleKeyDown(event) {
if (event.key === 'Escape' && this.isMobile && this.open) {
this.open = false;
}
}
connectedCallback() {
this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT}px)`);
this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);
this.isMobile = !this.matchesLgBreakpointMq.matches;
this.isCollapsed = this.collapsed;
this.initialCollapsedState = this.collapsed;
}
componentDidLoad() {
var _a;
const upperSlot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
const upperSlotElements = upperSlot.assignedElements();
const hasUpperSlotElements = (upperSlotElements === null || upperSlotElements === void 0 ? void 0 : upperSlotElements.length) > 0;
if (!hasUpperSlotElements) {
this.isUpperSlotEmpty = true;
}
if (this.isMobile) {
this.collapsed = false;
}
}
disconnectedCallback() {
if (this.matchesLgBreakpointMq) {
this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);
}
}
onCollapsedChange(newVal) {
/** Emits the internal collapse event when the prop has changed. */
this.internalTdsSideMenuPropChange.emit({
changed: ['collapsed'],
collapsed: newVal,
});
this.isCollapsed = newVal;
}
onOpenChange(newVal) {
if (!this.isMobile) {
if (newVal)
this.open = false;
return;
}
if (newVal) {
// When menu opens, focus the first interactive element
setTimeout(() => {
const focusableElements = this.getFocusableElements();
if (focusableElements.length > 0) {
this.activeElementIndex = 0;
focusableElements[0].focus();
}
}, 100);
}
else {
// When menu closes, focus the hamburger button
const hamburgerComponent = document.querySelector('tds-header-hamburger');
if (hamburgerComponent && hamburgerComponent.shadowRoot) {
const hamburgerButton = hamburgerComponent.shadowRoot.querySelector('button');
if (hamburgerButton) {
hamburgerButton.focus();
}
}
}
}
getFocusableElements() {
var _a, _b, _c;
const focusableSelectors = [
'a[href]',
'button:not([disabled])',
'textarea:not([disabled])',
'input:not([disabled])',
'select:not([disabled])',
'[tabindex]:not([tabindex="-1"])',
].join(',');
const focusableInShadowRoot = Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(focusableSelectors)) !== null && _b !== void 0 ? _b : []);
const focusableInSlots = Array.from(this.host.querySelectorAll(focusableSelectors));
const slottedBtn = this.host.querySelector('[slot="close-button"]');
let closeBtn;
if (slottedBtn)
closeBtn = (_c = slottedBtn.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('button');
const focusableElements = [...focusableInShadowRoot, ...focusableInSlots];
if (closeBtn)
focusableElements.push(closeBtn);
/** Focusable elements */
return focusableElements;
}
handleFocusTrap(event) {
// Only trap focus if the menu is open
if (!this.open || !this.isMobile)
return;
// We care only about the Tab key
if (event.key !== 'Tab')
return;
const focusableElements = this.getFocusableElements();
// If there are no focusable elements
if (focusableElements.length === 0)
return;
// Prevent default tab behavior
event.preventDefault();
// Going backwards (Shift + Tab) on the first element => move to last
if (event.shiftKey) {
this.activeElementIndex -= 1;
if (this.activeElementIndex < 0) {
this.activeElementIndex = focusableElements.length - 1;
}
}
// Going forwards (Tab) on the last element => move to first
else {
this.activeElementIndex += 1;
if (this.activeElementIndex >= focusableElements.length) {
this.activeElementIndex = 0;
}
}
// Focus the next element
const nextElement = focusableElements[this.activeElementIndex];
nextElement.focus();
}
collapsedSideMenuEventHandler(event) {
this.collapsed = event.detail.collapsed;
}
render() {
return (index.h(index.Host, { key: '3e7770cc6891a71d1757b0a7622f2912066643d8', class: {
'menu-opened': this.open,
'menu-persistent': this.persistent,
'menu-collapsed': this.collapsed,
}, "aria-expanded": (this.isMobile ? this.open : !this.collapsed) ? 'true' : 'false' }, index.h("div", { key: '5c556407075da5eae0b3343b3e0ee74c340575ac', class: {
'wrapper': true,
'state-upper-slot-empty': this.isUpperSlotEmpty,
'state-open': this.open,
'state-closed': !this.open,
} }, index.h("slot", { key: '6b87fbf18cbfa65ab8552eb64456b87304022404', name: "overlay" }), index.h("aside", { key: '7d63212f845d1bba59a1b3a6e0b99998fd6a2202', class: `menu` }, index.h("div", { key: 'd8ce4ff50101691aeb9b88d17cc7ee2490272ad4', role: "navigation" }, index.h("slot", { key: 'f8a7ee24fbced61ff4931168902c397b082521eb', name: "close-button" }), index.h("div", { key: '072baef69437e6a444b32f0b62cef196cefe1575', class: "tds-side-menu-wrapper" }, index.h("ul", { key: 'bf1e19f6ba886f2c89b480b4f58b45c018daac4d', class: `tds-side-menu-list tds-side-menu-list-upper` }, index.h("li", { key: 'e319ea5fa177d10d2251b8ab26a06bef18bbd623' }, index.h("slot", { key: '5fec36575727498f764896d4c585a77f4c83f8b4' }))), index.h("ul", { key: 'b3a8d1af131f3ac8531d1f63bf7aa728ae87927b', class: `tds-side-menu-list tds-side-menu-list-end` }, index.h("li", { key: '2d82fba190cdb96f6e7bb77a1f44d94b1a4f461b' }, index.h("slot", { key: 'c5d3f65e00c57911b5aae71d4a75b1ec894b3fcb', name: "end" })))), index.h("slot", { key: 'eb8c2a7a4130e9e71851735219414a9d87e95853', name: "sticky-end" }))))));
}
get host() { return index.getElement(this); }
static get watchers() { return {
"collapsed": [{
"onCollapsedChange": 0
}],
"open": [{
"onOpenChange": 0
}]
}; }
};
TdsSideMenu.style = sideMenuCss();
exports.tds_side_menu = TdsSideMenu;