@scania/tegel/dist/esm/tds-header-launcher.entry.js

Tegel Design System

import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
import { i as inheritAriaAttributes } from './inheritAriaAttributes-DyLhgCIg.js';
import './inheritAttributes-CF8bH08v.js';

const headerLauncherCss = () => `: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 .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-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 TdsHeaderLauncher = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.open = false;
        this.hasListTypeMenu = false;
        this.uuid = generateUniqueId();
    }
    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, _b;
        if (event.key === 'Escape' && this.open) {
            this.open = false;
            const btnShadow = (_b = (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
            if (btnShadow)
                btnShadow.focus();
        }
    }
    componentDidLoad() {
        const hasListTypeMenu = !!this.host.querySelector('tds-header-launcher-list');
        this.hasListTypeMenu = hasListTypeMenu;
    }
    toggleLauncher() {
        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() {
        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: 'a794dc8a1d6585403012a2059b40fe2868e84e3e' }, h("div", { key: '2dffd73d6d9054fc0b84d59229f7264254173f47', class: {
                'wrapper': true,
                'state-open': this.open,
                'state-list-type-menu': this.hasListTypeMenu,
            } }, h("tds-header-launcher-button", Object.assign({ key: '26d9cd3499ee637bc16cb7588f03cf4b954ddac0' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: '96e2dd6e07ff7e9c4d6e2f9ef335d1d043312d49', 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 getElement(this); }
};
TdsHeaderLauncher.style = headerLauncherCss();

export { TdsHeaderLauncher as tds_header_launcher };