import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { _ as __decorate, a as __metadata } from './tslib.es6.js';
import { L as Logger } from './log.js';
import { B as BEM } from './bem.js';

const balNavLinkCss = "@media (hover: hover)and (pointer: fine){button.bal-nav-link__native:focus-visible,a.bal-nav-link__native:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-nav-link-text-color:var(--bal-link-color);--bal-nav-link-text-color-hover:var(--bal-link-color-hover);--bal-nav-link-text-color-active:var(--bal-link-color-active)}.bal-nav-link{display:block}.bal-nav-link:not(:last-child){margin-bottom:var(--bal-space-x-small)}.bal-nav-link--variant-title:not(:last-child){margin-bottom:var(--bal-space-normal) !important}.bal-nav-link--variant-overview:not(:last-child){margin-bottom:0 !important}@media screen and (min-width: 1024px){.bal-nav-link--variant-overview:not(:last-child){margin-bottom:var(--bal-space-normal) !important}}.bal-nav-link__native{display:inline;color:var(--bal-nav-link-text-color);font-size:var(--bal-text-size-normal);line-height:var(--bal-body-line-height);font-family:var(--bal-font-family-text);text-align:left;padding:0;border:none;background:none}.bal-nav-link__native--variant-title{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-normal);font-weight:var(--bal-font-weight-bold);text-decoration:none;margin-bottom:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link__native--variant-title{font-size:var(--bal-text-size-xx-large)}}.bal-nav-link__native--variant-overview{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-bold)}.bal-nav-link__native--selected{-webkit-text-decoration:var(--bal-link-text-decoration) !important;text-decoration:var(--bal-link-text-decoration) !important;text-decoration-thickness:1px !important;text-underline-offset:2px !important}button.bal-nav-link__native,a.bal-nav-link__native{cursor:pointer}@media (hover: hover)and (pointer: fine){button.bal-nav-link__native:hover,a.bal-nav-link__native:hover{-webkit-text-decoration:var(--bal-link-text-decoration);text-decoration:var(--bal-link-text-decoration);text-decoration-thickness:1px;color:var(--bal-nav-link-text-color-hover);text-underline-offset:2px}}button.bal-nav-link__native:focus-visible,a.bal-nav-link__native:focus-visible{border-radius:var(--bal-radius-normal)}button.bal-nav-link__native:active,a.bal-nav-link__native:active{-webkit-text-decoration:var(--bal-link-text-decoration);text-decoration:var(--bal-link-text-decoration);text-decoration-thickness:1px;color:var(--bal-nav-link-text-color-active);text-underline-offset:2px}";

const NavLink = /*@__PURE__*/ proxyCustomElement(class NavLink extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * Defines the variant of the link
         */
        this.variant = '';
        /**
         * If `true` the link gets selected with a underline
         */
        this.selected = false;
        /**
         * If `true` the link can be clickable
         */
        this.clickable = false;
        /**
         * Specifies where to display the linked URL.
         * Only applies when an `href` is provided.
         */
        this.target = '_self';
    }
    createLogger(log) {
        this.log = log;
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = BEM.block('nav-link');
        const { href, target, rel } = this;
        const hasLink = href !== undefined && href !== '';
        const hasVariant = this.variant !== '';
        const Link = hasLink ? 'a' : this.clickable ? 'button' : 'span';
        let linkAttributes = {};
        if (hasLink) {
            linkAttributes = { href, target, rel };
        }
        return (h(Host, { key: 'fe011833d71cd4fc35585f27ee3cb8fe11dadfb8', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, h(Link, Object.assign({ key: 'ea4ba1bd04867399453d2e4cc2141c250862950f', "data-testid": "bal-nav-link", class: Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier(`variant-${this.variant}`).class(hasVariant)), block
                .element('native')
                .modifier('selected')
                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), h("slot", { key: '1889dedfa23b00eb2eaf3aca568e313845482875' }))));
    }
    static get style() { return balNavLinkCss; }
}, [260, "bal-nav-link", {
        "variant": [1],
        "selected": [4],
        "clickable": [4],
        "rel": [1],
        "href": [1],
        "target": [1]
    }]);
__decorate([
    Logger('bal-nav-link'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], NavLink.prototype, "createLogger", null);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-nav-link"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-nav-link":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, NavLink);
            }
            break;
    } });
}

export { NavLink as N, defineCustomElement as d };
