@scania/tegel/dist/components/tds-header-dropdown.js

Tegel Design System

import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
import { g as generateUniqueId } from './p-11648030.js';
import { h as hasSlot } from './p-ae110fc2.js';
import { d as defineCustomElement$6 } from './p-9ad61cb5.js';
import { d as defineCustomElement$5 } from './p-6adb1ce3.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 headerDropdownCss = ":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{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:var(--tds-scrollbar-hover-thumb-color);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}@supports 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}";
const TdsHeaderDropdownStyle0 = headerDropdownCss;

const TdsHeaderDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDropdown extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        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 H) {
                    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)))));
    }
    get host() { return this; }
    static get style() { return TdsHeaderDropdownStyle0; }
}, [1, "tds-header-dropdown", {
        "label": [1],
        "noDropdownIcon": [4, "no-dropdown-icon"],
        "selected": [4],
        "tdsAriaLabel": [1, "tds-aria-label"],
        "open": [32],
        "buttonEl": [32]
    }, [[4, "click", "onAnyClick"], [8, "keydown", "handleKeyDown"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["tds-header-dropdown", "tds-core-header-item", "tds-header-item", "tds-icon", "tds-popover-canvas", "tds-popover-core"];
    components.forEach(tagName => { switch (tagName) {
        case "tds-header-dropdown":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TdsHeaderDropdown$1);
            }
            break;
        case "tds-core-header-item":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "tds-header-item":
            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 TdsHeaderDropdown = TdsHeaderDropdown$1;
const defineCustomElement = defineCustomElement$1;

export { TdsHeaderDropdown, defineCustomElement };