@scania/tegel
Version:
Tegel Design System
126 lines (125 loc) • 4.86 kB
JavaScript
import { Host, h } from "@stencil/core";
import generateUniqueId from "../../../utils/generateUniqueId";
import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
/**
* @slot <default> - <b>Unnamed slot.</b> For a launcher list (or grid) element.
*/
export class TdsHeaderLauncher {
constructor() {
this.uuid = generateUniqueId();
this.open = false;
this.buttonEl = undefined;
this.hasListTypeMenu = false;
this.tdsAriaLabel = undefined;
}
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) {
if (event.key === 'Escape' && this.open) {
this.open = false;
this.buttonEl.shadowRoot.querySelector('button').focus();
}
}
componentDidLoad() {
const hasListTypeMenu = !!this.host.querySelector('tds-header-launcher-list');
this.hasListTypeMenu = hasListTypeMenu;
}
toggleLauncher() {
this.open = !this.open;
if (this.open) {
requestAnimationFrame(() => {
const selectors = "a, [tabindex='0']";
const firstFocusableElement = this.host.shadowRoot.querySelector(selectors) || this.host.querySelector(selectors);
if (firstFocusableElement instanceof HTMLElement) {
firstFocusableElement.focus();
}
});
}
}
connectedCallback() {
if (!this.tdsAriaLabel) {
console.warn('Tegel Header Launcher component: missing tdsAriaLabel prop');
}
}
render() {
this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host, ['role']));
const buttonAttributes = Object.assign(Object.assign({}, this.ariaAttributes), { 'aria-expanded': `${this.open}`, 'aria-controls': `launcher-${this.uuid}`, 'class': 'button', 'active': this.open, 'onClick': () => {
this.toggleLauncher();
}, 'ref': (el) => {
this.buttonEl = el;
} });
return (h(Host, { key: 'a1c8cce3e26d57b654700893add3e5e1554e23d0' }, h("div", { key: 'bfc4e2f77d142f4913a4509b0c16b7503c942bf3', class: {
'wrapper': true,
'state-open': this.open,
'state-list-type-menu': this.hasListTypeMenu,
} }, h("tds-header-launcher-button", Object.assign({ key: 'c30e8b26d73a8d3a5aa5bf476226419b70c26061' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: '10e13ac7fb52c3123dd51d1f91754262feb56134', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
{
name: 'flip',
options: {
fallbackPlacements: [],
},
},
] }, this.open ? h("slot", null) : null)))));
}
static get is() { return "tds-header-launcher"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["header-launcher.scss"]
};
}
static get styleUrls() {
return {
"$": ["header-launcher.css"]
};
}
static get properties() {
return {
"tdsAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Value to be used by the aria-label attribute of the launcher button"
},
"attribute": "tds-aria-label",
"reflect": false
}
};
}
static get states() {
return {
"open": {},
"buttonEl": {},
"hasListTypeMenu": {}
};
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "click",
"method": "onAnyClick",
"target": "window",
"capture": false,
"passive": false
}, {
"name": "keydown",
"method": "handleKeyDown",
"target": "window",
"capture": false,
"passive": false
}];
}
}