@postnord/web-components/esm/pn-text-link.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { t as transformTag, r as registerInstance, g as getElement, h } from './index-CAEP792y.js';

const pnTextLinkCss = () => `${transformTag("pn-text-link")}{display:inline}${transformTag("pn-text-link")} .pn-text-link{border-radius:0.25em;color:#005d92;font-weight:500;text-decoration:underline;font-size:1em;transition-property:color, outline-color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-text-link")} .pn-text-link{transition-duration:0s;transition-delay:0s}}${transformTag("pn-text-link")} .pn-text-link{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-text-link")} .pn-text-link:focus-visible{outline-color:#005d92}${transformTag("pn-text-link")} .pn-text-link:hover{color:#0d234b;text-decoration-color:#0d234b}${transformTag("pn-text-link")} .pn-text-link[data-icon]{display:inline-flex;gap:0.25em;align-items:center;text-decoration-color:transparent;padding:0.1em;border-radius:0.5em}${transformTag("pn-text-link")} .pn-text-link[data-icon] .pn-icon-svg path{fill:#005d92}${transformTag("pn-text-link")} .pn-text-link[data-icon]:hover{text-decoration-color:#0d234b}${transformTag("pn-text-link")} .pn-text-link[data-icon]:hover .pn-icon-svg path,${transformTag("pn-text-link")} .pn-text-link[data-icon]:focus-visible .pn-icon-svg path{fill:#0d234b}${transformTag("pn-text-link")} .pn-text-link[data-icon][data-icon-left]{flex-direction:row-reverse}${transformTag("pn-text-link")} .pn-text-link[data-light]{color:#ffffff}${transformTag("pn-text-link")} .pn-text-link[data-light]:focus-visible{outline-color:#ffffff}${transformTag("pn-text-link")} .pn-text-link[data-light]:hover{text-decoration-color:#ffffff}${transformTag("pn-text-link")} .pn-text-link[data-light][data-icon] ${transformTag("pn-icon")} .pn-icon-svg path{fill:#ffffff}`;

const PnTextLink = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    get hostElement() { return getElement(this); }
    /** The link text. @since v7.5.0 */
    label;
    /** The URL string. */
    href;
    /** Use the light version of the link. @category Visual */
    light = false;
    /** SVG content of the icon. @category Visual */
    icon;
    /** Align the icon on the left. @category Visual */
    leftIcon = false;
    /** Treat the link as a download link. @category Link attributes */
    download;
    /** Set the hreflang of the URL destination. @category Link attributes */
    hreflang;
    /** Link media. @category Link attributes */
    media;
    /** Set referrerpolicy on the link. @category Link attributes */
    referrerpolicy;
    /** Set the rel of the link. @category Link attributes */
    rel = 'noopener noreferrer';
    /** Set the target of the link. @category Link attributes */
    target;
    /** Set a unique html ID of the a element. @category Link attributes */
    linkid;
    render() {
        return (h("a", { key: '9b582d89de39e3465ec6a1675f60f46d39b3c558', id: this.linkid, class: "pn-text-link", href: this.href, rel: this.rel, target: this.target, download: this.download, hreflang: this.hreflang, media: this.media, referrerPolicy: this.referrerpolicy, "data-icon": !!this.icon, "data-icon-left": this.leftIcon, "data-light": this.light }, this.label, h("slot", { key: '106155241d1f15bdaf19a74c8dc440372849a6f4' }), this.icon && h("pn-icon", { key: 'd6d197a8632a13b6a1e385504b6727cfb9c418fd', icon: this.icon })));
    }
};
PnTextLink.style = pnTextLinkCss();

export { PnTextLink as pn_text_link };