@scania/tegel/dist/esm/tds-link.entry.js

Tegel Design System

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

const linkCss = () => `:host{display:inline}:host ::slotted(*){all:unset;cursor:pointer;outline:none;color:var(--tds-link);text-decoration:underline}:host ::slotted(*:hover){color:var(--tds-link-hover);text-decoration:none}:host .no-underline ::slotted(*){text-decoration:none}:host .no-underline ::slotted(*:hover){color:var(--tds-link-hover);text-decoration:underline;text-decoration-color:var(--tds-link-hover)}:host ::slotted(*:focus-visible){color:var(--tds-link-focus);text-decoration:none;box-shadow:0 0 0 1px var(--tds-white), 0 0 0 3px var(--tds-link-focus)}:host ::slotted(*:active){color:var(--tds-link);text-decoration:underline;text-decoration-color:var(--tds-link)}:host ::slotted(*:visited){color:var(--tds-link-visited);text-decoration-color:var(--tds-link-visited)}.disabled ::slotted(*),.disabled ::slotted(*:visited){color:var(--tds-link-disabled);text-decoration-color:var(--tds-link-disabled);pointer-events:none}.standalone ::slotted(*){font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}`;

const TdsLink = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /** Disables the Link */
        this.disabled = false;
        /** Displays the Link with an underline. */
        this.underline = true;
        /** Displays the Link as a standalone component. Not part of a paragraph. */
        this.standalone = false;
    }
    connectedCallback() {
        const links = this.host.querySelectorAll('a');
        if (links.length > 1) {
            console.warn('tds-link is only intended to wrap one <a> tag');
        }
        const link = links[0];
        if (link) {
            if (this.disabled) {
                link.setAttribute('tabindex', '-1');
                link.setAttribute('aria-disabled', 'true');
            }
            else {
                link.removeAttribute('tabindex');
                link.removeAttribute('aria-disabled');
            }
        }
    }
    render() {
        return (h("span", { key: '4b56921da22a5b976ebf4985d04e8af3b5917329', class: {
                'disabled': this.disabled,
                'no-underline': !this.underline,
                'standalone': this.standalone,
            } }, h("slot", { key: 'bad6ba1260f82de37b1939d2cca208053e52126b' })));
    }
    get host() { return getElement(this); }
};
TdsLink.style = linkCss();

export { TdsLink as tds_link };