@scania/tegel/dist/components/p-6adb1ce3.js

Tegel Design System

import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
import { d as dfs } from './p-52bf0fdf.js';
import { d as defineCustomElement$1 } from './p-9ad61cb5.js';

const headerItemCss = ":host ::slotted(button),:host ::slotted(a){all:unset;box-sizing:border-box;background-color:var(--tds-header-background);border-right:1px solid var(--tds-header--basic-element-border);width:100%;height:100%;cursor:pointer;padding:0 24px;display:flex;align-items:center;gap:8px}:host ::slotted(button) *,:host ::slotted(a) *{box-sizing:border-box}:host ::slotted(button:hover),:host ::slotted(a:hover){background-color:var(--tds-header-item-hover)}:host ::slotted(button:focus-visible),:host ::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-active ::slotted(button),:host .component-active ::slotted(a){background-color:var(--tds-header--basic-element-background-open);color:var(--tds-header-nav-item-dropdown-opened-color);border-color:var(--tds-header--basic-element-border-open)}:host .component-selected:not(.component-active) ::slotted(button),:host .component-selected:not(.component-active) ::slotted(a){background-color:var(--tds-header--basic-element-background-selected);padding-top:4px;border-bottom-style:solid;border-bottom-width:4px;border-bottom-color:var(--tds-nav-item-border-color-active)}";
const TdsHeaderItemStyle0 = headerItemCss;

const TdsHeaderItem = /*@__PURE__*/ proxyCustomElement(class TdsHeaderItem extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.active = false;
        this.selected = false;
    }
    updateSlotted(searchPredicate, mutationCallback) {
        const assignedElements = this.slotEl.assignedElements({ flatten: true });
        const firstSlottedElement = assignedElements[0];
        if (firstSlottedElement) {
            const foundElement = dfs(firstSlottedElement, searchPredicate);
            if (foundElement) {
                mutationCallback(foundElement);
            }
        }
    }
    /**
     * This function is needed because we can't use CSS selectors to style something in the light dom
     */
    updateSlottedElements() {
        if (this.slotEl) {
            const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'tds-icon' || element.tagName.toLowerCase() === 'svg';
            const addIconClass = (element) => element.classList.add('__tds-header-item-icon');
            this.updateSlotted(isIconOrSvg, addIconClass);
            const isImage = (element) => element.tagName.toLowerCase() === 'img';
            const addImageClass = (element) => element.classList.add('__tds-header-item-image');
            this.updateSlotted(isImage, addImageClass);
        }
    }
    /**
     * Read the native "order" attribute on the host and update the CSS order accordingly.
     * If the attribute "order" has the value "end", the order is set to 1. Otherwise, 0.
     */
    updateOrder() {
        const orderValue = this.host.getAttribute('order');
        switch (orderValue) {
            case 'end':
                this.host.style.order = '1';
                break;
            case 'start':
            case null:
            default:
                this.host.style.order = '0';
                break;
        }
    }
    componentDidLoad() {
        this.slotEl = this.host.shadowRoot.querySelector('slot');
        this.updateSlottedElements();
        this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
        // Set the order on initial load.
        this.updateOrder();
        // Create a MutationObserver to listen for changes on the "order" attribute.
        this.mutationObserver = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === 'attributes' && mutation.attributeName === 'order') {
                    this.updateOrder();
                }
            });
        });
        // Start observing the host element for attribute changes (specifically "order").
        this.mutationObserver.observe(this.host, {
            attributes: true,
            attributeFilter: ['order'],
        });
    }
    disconnectedCallback() {
        if (this.mutationObserver) {
            this.mutationObserver.disconnect();
        }
    }
    render() {
        return (h(Host, { key: '4a9d013ab3abde506f9992453cae793db9a652cf' }, h("tds-core-header-item", { key: '359634d0bca7720c8a9bfd5c696a89c97df76a75', class: {
                'component-active': this.active,
                'component-selected': this.selected,
            } }, h("slot", { key: '7318ad6ea4d1dfa0f16b70c6f305ece087aeea2e' }))));
    }
    get host() { return this; }
    static get style() { return TdsHeaderItemStyle0; }
}, [1, "tds-header-item", {
        "active": [4],
        "selected": [4]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["tds-header-item", "tds-core-header-item"];
    components.forEach(tagName => { switch (tagName) {
        case "tds-header-item":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TdsHeaderItem);
            }
            break;
        case "tds-core-header-item":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { TdsHeaderItem as T, defineCustomElement as d };