@postnord/web-components/components/pn-text-link2.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './pn-icon2.js';

const pnTextLinkCss = "pn-text-link{display:inline}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);outline:0.2rem solid transparent;outline-offset:0.2rem}pn-text-link .pn-text-link:focus-visible{outline-color:#005d92}pn-text-link .pn-text-link:hover{color:#0d234b;text-decoration-color:#0d234b}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}pn-text-link .pn-text-link[data-icon] .pn-icon-svg path{fill:#005d92}pn-text-link .pn-text-link[data-icon]:hover{text-decoration-color:#0d234b}pn-text-link .pn-text-link[data-icon]:hover .pn-icon-svg path,pn-text-link .pn-text-link[data-icon]:focus-visible .pn-icon-svg path{fill:#0d234b}pn-text-link .pn-text-link[data-icon][data-icon-left]{flex-direction:row-reverse}pn-text-link .pn-text-link[data-light]{color:#ffffff}pn-text-link .pn-text-link[data-light]:focus-visible{outline-color:#ffffff}pn-text-link .pn-text-link[data-light]:hover{text-decoration-color:#ffffff}pn-text-link .pn-text-link[data-light][data-icon] pn-icon .pn-icon-svg path{fill:#ffffff}";
const PnTextLinkStyle0 = pnTextLinkCss;

const PnTextLink = /*@__PURE__*/ proxyCustomElement(class PnTextLink extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.label = undefined;
        this.href = undefined;
        this.light = false;
        this.icon = undefined;
        this.leftIcon = false;
        this.download = undefined;
        this.hreflang = undefined;
        this.media = undefined;
        this.referrerpolicy = undefined;
        this.rel = 'noopener noreferrer';
        this.target = undefined;
        this.linkid = undefined;
    }
    get hostElement() { return this; }
    render() {
        return (h("a", { key: '5bec8afa95c166c57377f89d77ef198176029283', 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: '9cac93829518f6285b5685d7c944e920726c3304' }), this.icon && h("pn-icon", { key: 'b124775fae4cdae11e3818901360e6db51299601', icon: this.icon })));
    }
    static get style() { return PnTextLinkStyle0; }
}, [4, "pn-text-link", {
        "label": [1],
        "href": [1],
        "light": [4],
        "icon": [1],
        "leftIcon": [4, "left-icon"],
        "download": [1],
        "hreflang": [1],
        "media": [1],
        "referrerpolicy": [1],
        "rel": [1],
        "target": [1],
        "linkid": [1]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-text-link", "pn-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-text-link":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnTextLink);
            }
            break;
        case "pn-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { PnTextLink as P, defineCustomElement as d };

//# sourceMappingURL=pn-text-link2.js.map