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

Tegel Design System

import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';

const sideMenuDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:48px;width:100%}:host .component{height:100%;width:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--tds-nav-item-border-color);display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-header-nav-item-dropdown-opened-background);color:var(--tds-header-nav-item-dropdown-opened-color);border:none}:host .component ::slotted(a:hover),:host .component ::slotted(button:hover){background-color:var(--tds-header-nav-item-dropdown-opened-background-hover);cursor:pointer}:host .component ::slotted(a:active),:host .component ::slotted(button:active){background-color:var(--tds-header-nav-item-dropdown-opened-background-active) !important;cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .component.component-selected ::slotted(a),:host .component.component-selected ::slotted(button){box-shadow:inset 4px 0 0 var(--tds-nav-item-border-color-active);background-color:var(--tds-header-nav-item-dropdown-opened-background-selected)}:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(a),:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(button){padding:16px 48px 16px 58px}:host .component.component-dropdown-has-user:not(.component-collapsed) ::slotted(a),:host .component.component-dropdown-has-user:not(.component-collapsed) ::slotted(button){padding:16px 48px 16px 64px}";
const TdsSideMenuDropdownListItemStyle0 = sideMenuDropdownListItemCss;

const TdsSideMenuDropdownListItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuDropdownListItem extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.selected = false;
        this.dropdownHasIcon = false;
        this.dropdownHasUser = false;
        this.collapsed = false;
    }
    collapseSideMenuEventHandler(event) {
        this.collapsed = event.detail.collapsed;
    }
    connectedCallback() {
        var _a;
        this.sideMenuEl = this.host.closest('tds-side-menu');
        this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
    }
    componentDidLoad() {
        var _a;
        const dropdownEl = this.host.closest('tds-side-menu-dropdown');
        const hasUserMenu = dropdownEl === null || dropdownEl === void 0 ? void 0 : dropdownEl.querySelector('tds-side-menu-user');
        const dropdownBtnIconSlotEl = dropdownEl.shadowRoot.querySelector('slot[name="icon"]');
        const btnIconSlottedEls = dropdownBtnIconSlotEl.assignedElements();
        const hasBtnIcon = (btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls.length) > 0;
        const btnIconIsUserImage = ((_a = btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls[0]) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'tds-side-menu-user-image';
        if (hasBtnIcon && !btnIconIsUserImage) {
            this.dropdownHasIcon = true;
        }
        if (hasUserMenu) {
            this.dropdownHasUser = true;
        }
    }
    render() {
        return (h(Host, { key: '7aedc4c01840378247f5b6f06f55f8763cd6533d', role: "listitem" }, h("div", { key: '60dd4aa980084396fb930f28a95d811fb394375a', class: {
                'component': true,
                'component-selected': this.selected,
                'component-dropdown-has-icon': this.dropdownHasIcon,
                'component-dropdown-has-user': this.dropdownHasUser,
                'component-collapsed': this.collapsed,
            } }, h("slot", { key: '75a256ed4d6674cb5d3bd7bc29026ea1e13b6489' }))));
    }
    get host() { return this; }
    static get style() { return TdsSideMenuDropdownListItemStyle0; }
}, [1, "tds-side-menu-dropdown-list-item", {
        "selected": [4],
        "dropdownHasIcon": [32],
        "dropdownHasUser": [32],
        "collapsed": [32]
    }, [[16, "internalTdsSideMenuPropChange", "collapseSideMenuEventHandler"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["tds-side-menu-dropdown-list-item"];
    components.forEach(tagName => { switch (tagName) {
        case "tds-side-menu-dropdown-list-item":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TdsSideMenuDropdownListItem$1);
            }
            break;
    } });
}
defineCustomElement$1();

const TdsSideMenuDropdownListItem = TdsSideMenuDropdownListItem$1;
const defineCustomElement = defineCustomElement$1;

export { TdsSideMenuDropdownListItem, defineCustomElement };