@scania/tegel
Version:
Tegel Design System
136 lines (131 loc) • 7.26 kB
JavaScript
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
import { g as generateUniqueId } from './p-11648030.js';
import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
import { d as defineCustomElement$7 } from './p-9ad61cb5.js';
import { d as defineCustomElement$6 } from './p-6adb1ce3.js';
import { d as defineCustomElement$5 } from './p-63437b77.js';
import { d as defineCustomElement$4 } from './p-b390ece5.js';
import { d as defineCustomElement$3 } from './p-df84759a.js';
import { d as defineCustomElement$2 } from './p-d3866be7.js';
const headerLauncherCss = ":host{--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 .wrapper{height:var(--tds-header-height);position:relative}:host .wrapper .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-radius:0}:host .wrapper .menu:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .wrapper .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .wrapper .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 .wrapper .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .wrapper .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}@media all and (max-width: 384px){:host .wrapper .menu{width:100vw}}:host .wrapper.state-list-type-menu .menu{height:calc(100vh - var(--tds-header-height))}:host .wrapper.state-open .button{position:relative;z-index:901}";
const TdsHeaderLauncherStyle0 = headerLauncherCss;
const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncher extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
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 H) {
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)))));
}
get host() { return this; }
static get style() { return TdsHeaderLauncherStyle0; }
}, [1, "tds-header-launcher", {
"tdsAriaLabel": [1, "tds-aria-label"],
"open": [32],
"buttonEl": [32],
"hasListTypeMenu": [32]
}, [[8, "click", "onAnyClick"], [8, "keydown", "handleKeyDown"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-header-launcher", "tds-core-header-item", "tds-header-item", "tds-header-launcher-button", "tds-icon", "tds-popover-canvas", "tds-popover-core"];
components.forEach(tagName => { switch (tagName) {
case "tds-header-launcher":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsHeaderLauncher$1);
}
break;
case "tds-core-header-item":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "tds-header-item":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "tds-header-launcher-button":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "tds-icon":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "tds-popover-canvas":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "tds-popover-core":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const TdsHeaderLauncher = TdsHeaderLauncher$1;
const defineCustomElement = defineCustomElement$1;
export { TdsHeaderLauncher, defineCustomElement };