@scania/tegel
Version:
Tegel Design System
181 lines (180 loc) • 7.24 kB
JavaScript
import { h, Host } from "@stencil/core";
import generateUniqueId from "../../../utils/generateUniqueId";
import hasSlot from "../../../utils/hasSlot";
/**
* @slot <default> - <b>Unnamed slot.</b> For injecting a dropdown list.
* @slot icon - Slot for an Icon in the dropdown button.
* @slot label - Slot for a label text in the dropdown button.
*/
export class TdsHeaderDropdown {
constructor() {
this.uuid = generateUniqueId();
this.handleSlottedItemClick = (event) => {
const eventSource = event.target.tagName.toLowerCase();
if (['a', 'button'].includes(eventSource)) {
this.open = false;
}
};
this.label = undefined;
this.noDropdownIcon = false;
this.selected = false;
this.tdsAriaLabel = undefined;
this.open = false;
this.buttonEl = 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.focus();
}
}
toggleDropdown() {
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() {
const hasLabelSlot = hasSlot('label', this.host);
if (!this.tdsAriaLabel && !hasLabelSlot) {
console.warn('Tegel Header Dropdown component: use label slot or specify tdsAriaLabel prop');
}
}
render() {
return (h(Host, { key: '6ab1d0f1d475d6d0a486e1909cad300d89eb39a0' }, h("div", { key: 'bfe11cdc8c2bf592cec7f3cf8888555071781afe', class: {
'state-open': this.open,
} }, h("tds-header-item", { key: '27b6d2680858443a26d7108b5318386df76db788', class: "button", active: this.open, selected: this.selected }, h("button", { key: '09d0ccb3bc5a31a897af65f5fcf4d47ee8b35192', 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 }, h("slot", { key: '50c872c297116ece9dd5da41398aac3bd88cd529', name: "icon" }), this.label, h("slot", { key: '141a43cdc4c8aeade4d547bbb91a28f62542bb98', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '13f2f8d6b264f09dea45e9b7809adab1b83db683', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '10b18c15ae1d2c0fbafaa82bed4ae7759c857c54', 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 ? (h("span", { onClick: (e) => this.handleSlottedItemClick(e), onKeyDown: (e) => e.key === 'Enter' && this.handleSlottedItemClick(e) }, h("slot", null))) : null)))));
}
static get is() { return "tds-header-dropdown"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["header-dropdown.scss"]
};
}
static get styleUrls() {
return {
"$": ["header-dropdown.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The label of the button that opens the dropdown.\nThis is an alternative to the label slot."
},
"attribute": "label",
"reflect": false
},
"noDropdownIcon": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If the dropdown icon (downwards chevron) should be hidden."
},
"attribute": "no-dropdown-icon",
"reflect": false,
"defaultValue": "false"
},
"selected": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If the button that opens the dropdown should appear selected."
},
"attribute": "selected",
"reflect": false,
"defaultValue": "false"
},
"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"
},
"attribute": "tds-aria-label",
"reflect": false
}
};
}
static get states() {
return {
"open": {},
"buttonEl": {}
};
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "click",
"method": "onAnyClick",
"target": "document",
"capture": false,
"passive": false
}, {
"name": "keydown",
"method": "handleKeyDown",
"target": "window",
"capture": false,
"passive": false
}];
}
}