@scania/tegel
Version:
Tegel Design System
72 lines (67 loc) • 5.3 kB
JavaScript
'use strict';
var index = require('./index-DGsdvbvx.js');
var generateUniqueId = require('./generateUniqueId-ComXTAM_.js');
const headerDropdownCss = () => `: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{height:var(--tds-header-height);position:relative}:host .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-top-right-radius:0;border-top-left-radius:0}:host .menu:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background-clip:padding-box}:host .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .menu::-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}:host .menu::-webkit-scrollbar-button{height:0;width:0} not selector(::-webkit-scrollbar){:host .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .state-open .dropdown-icon{transform:rotate(180deg)}:host .state-open .button{position:relative;z-index:901}:host .state-open tds-header-item button:hover,:host .state-open tds-header-item a:hover{background-color:var(--tds-nav-item-background-hover);box-shadow:none}`;
const TdsHeaderDropdown = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** If the dropdown icon (downwards chevron) should be hidden. */
this.noDropdownIcon = false;
/** If the button that opens the dropdown should appear selected. */
this.selected = false;
this.open = false;
this.uuid = generateUniqueId.generateUniqueId();
this.handleSlottedItemClick = (event) => {
const eventSource = event.target.tagName.toLowerCase();
if (['a', 'button'].includes(eventSource)) {
this.open = false;
}
};
}
onAnyClick(event) {
// Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
const isClickOutside = !event.composedPath().includes(this.host);
if (isClickOutside) {
this.open = false;
}
}
handleKeyDown(event) {
var _a;
if (event.key === 'Escape' && this.open) {
this.open = false;
(_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
}
}
toggleDropdown() {
this.open = !this.open;
if (this.open) {
requestAnimationFrame(() => {
var _a;
const selectors = "a, [tabindex='0']";
const firstFocusableElement = ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(selectors)) || this.host.querySelector(selectors);
if (firstFocusableElement instanceof HTMLElement) {
firstFocusableElement.focus();
}
});
}
}
render() {
return (index.h(index.Host, { key: '81c477e45d3f6a4614c3928797f900fb9b64ffcc' }, index.h("div", { key: '2b4a3509254a827fa6d300793b699e57ac36cd9a', class: {
'state-open': this.open,
} }, index.h("tds-header-item", { key: '4847e06a7b5fdf61642234f7179b01103e34fb38', class: "button", active: this.open, selected: this.selected }, index.h("button", { key: '8cc7fed2a05c68f0026ef7d4c17400d85d6a40af', ref: (el) => {
this.buttonEl = el;
}, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
this.toggleDropdown();
}, "aria-label": this.tdsAriaLabel }, index.h("slot", { key: '8254bfb1f48d193bc0c58363df96fad41b61aad6', name: "icon" }), this.label, index.h("slot", { key: '5722ecd4748ad029b5b803bb4ff731cca119fc7b', name: "label" }), !this.noDropdownIcon && (index.h("tds-icon", { key: 'c0c9c51b4705226891b21383ce27c0680113af7c', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (index.h("tds-popover-canvas", { key: '52e127dbe4eef7082e62f3421d338fa0b44ab919', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
{
name: 'flip',
options: {
fallbackPlacements: [],
},
},
] }, this.open ? (index.h("span", { onClick: (e) => this.handleSlottedItemClick(e), onKeyDown: (e) => e.key === 'Enter' && this.handleSlottedItemClick(e) }, index.h("slot", null))) : null)))));
}
get host() { return index.getElement(this); }
};
TdsHeaderDropdown.style = headerDropdownCss();
exports.tds_header_dropdown = TdsHeaderDropdown;