@scania/tegel/dist/components/tds-side-menu-dropdown.js

Tegel Design System

import { p as proxyCustomElement, H, h, F as Fragment, c as Host } from './p-28ef5186.js';
import { d as defineCustomElement$3 } from './p-b390ece5.js';
import { d as defineCustomElement$2 } from './p-ea381f94.js';

const sideMenuDropdownCss = ":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:69px;position:absolute;left:var(--side-menu-width);box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-sidebar-side-menu-subnav-background)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
const TdsSideMenuDropdownStyle0 = sideMenuDropdownCss;

const TdsSideMenuDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuDropdown extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.defaultOpen = false;
        this.buttonLabel = undefined;
        this.selected = false;
        this.open = false;
        this.hoverState = undefined;
        this.collapsed = false;
    }
    collapsedSideMenuEventHandler(event) {
        this.collapsed = event.detail.collapsed;
    }
    onEventPointerEnter() {
        this.setHoverStateOpen();
    }
    onEventFocus() {
        this.setHoverStateOpen();
    }
    onEventPointerLeave() {
        this.setHoverStateClosed();
    }
    onEventBlur() {
        this.setHoverStateClosed();
    }
    handleKeyDown(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            this.open = !this.open;
        }
    }
    setHoverStateOpen() {
        this.hoverState = { isHovered: true, updatedAt: Date.now() };
    }
    setHoverStateClosed() {
        const leftAt = Date.now();
        const toleranceInMilliseconds = 150;
        setTimeout(() => {
            if (this.hoverState.isHovered && this.hoverState.updatedAt < leftAt) {
                this.hoverState = { isHovered: false, updatedAt: Date.now() };
            }
        }, toleranceInMilliseconds);
    }
    getIsOpenState() {
        var _a;
        return this.collapsed ? (_a = this.hoverState) === null || _a === void 0 ? void 0 : _a.isHovered : this.open;
    }
    connectedCallback() {
        this.sideMenuEl = this.host.closest('tds-side-menu');
        this.collapsed = this.sideMenuEl.collapsed;
        this.open = this.defaultOpen;
    }
    render() {
        return (h(Host, { key: '78a5c58e58b38e84cae96a9afd8166bfe3125a02' }, h("div", { key: '70e8e68e6db938cb2177169ca1836e84eb48cce6', class: {
                'wrapper': true,
                'state-open': this.getIsOpenState(),
                'state-collapsed': this.collapsed,
            } }, h("tds-side-menu-item", { key: '5834d5e804ad422937f2971637b3a70fb1fb676e', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
                this.open = !this.open;
            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'd454e6148a12c0bd1864b6c148f169ac342e9da2' }, h("slot", { key: '8a2579b751421d9df8e3dd5a84b04a5f844d383c', name: "icon" }), !this.collapsed && (h(Fragment, { key: 'f3419cc2993191186dccc9a208ff8150bf592eeb' }, this.buttonLabel, h("slot", { key: 'ff616384d76d6f3df82ac6abb12d65e4f6a5906d', name: "label" }), h("tds-icon", { key: 'a4acd9c0de3f437766673c57b4d73ac13cc8917b', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: 'db1ec059f4f1910d1fef432baff29810883ec2ef', class: "menu", tabindex: this.collapsed ? '0' : null }, this.collapsed && (h("h3", { key: 'a9f35f976da7ceaf38eb1c1641b43617e4e583c6', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: 'ef8b02b77b93b54f0a9aa4c5fb367356c12e9b82', name: "label" }))), h("slot", { key: '15c7c9e5a6a0615f478c5f93de8753211d17b3c3' })))));
    }
    get host() { return this; }
    static get style() { return TdsSideMenuDropdownStyle0; }
}, [1, "tds-side-menu-dropdown", {
        "defaultOpen": [4, "default-open"],
        "buttonLabel": [1, "button-label"],
        "selected": [4],
        "open": [4],
        "hoverState": [32],
        "collapsed": [32]
    }, [[16, "internalTdsSideMenuPropChange", "collapsedSideMenuEventHandler"], [1, "pointerenter", "onEventPointerEnter"], [0, "focusin", "onEventFocus"], [1, "pointerleave", "onEventPointerLeave"], [0, "focusout", "onEventBlur"], [0, "keydown", "handleKeyDown"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["tds-side-menu-dropdown", "tds-icon", "tds-side-menu-item"];
    components.forEach(tagName => { switch (tagName) {
        case "tds-side-menu-dropdown":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TdsSideMenuDropdown$1);
            }
            break;
        case "tds-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "tds-side-menu-item":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const TdsSideMenuDropdown = TdsSideMenuDropdown$1;
const defineCustomElement = defineCustomElement$1;

export { TdsSideMenuDropdown, defineCustomElement };