@scania/tegel/dist/esm/tds-header-dropdown-list-item.entry.js

Tegel Design System

import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';

const headerDropdownListItemCss = () => `:host{display:block;box-sizing:border-box;height:var(--tds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;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-nav-dropdown-item-background);color:var(--tds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--tds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:inset 0 0 0 3px var(--tds-white);outline-offset:-2px}:host .component-selected{background-color:var(--tds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--tds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--tds-nav-item-background-selected)}:host .component-selected:focus-within{border-left:none}:host(:not(:last-child)){border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host([size=lg]){height:var(--tds-header-height)}:host([size=lg]) ::slotted(a),:host([size=lg]) ::slotted(button){padding:0 16px;color:var(--tds-header-app-launcher-item-color)}`;

const TdsHeaderDropdownListItem = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /** If the link should appear selected. */
        this.selected = false;
        /** The size of the component. */
        this.size = 'md';
    }
    render() {
        return (h(Host, { key: '044ca1632bcfa67b268f2f46f6b3f803feabc603' }, h("div", { key: '43348d36bbbce184d43fda6cc4eead8fe1b94374', class: {
                'component': true,
                'component-selected': this.selected,
            } }, h("slot", { key: 'd6d036909bc7e83049d9c75add7ee84c68b5eba8' }))));
    }
    get host() { return getElement(this); }
};
TdsHeaderDropdownListItem.style = headerDropdownListItemCss();

export { TdsHeaderDropdownListItem as tds_header_dropdown_list_item };