import { p as proxyCustomElement, H, c as createEvent, h } from './p-a53686b3.js';
import { l as logger } from './p-e3d2e899.js';
import { r as randomIdGenerator } from './p-ffe5c0e8.js';
import { _ as _t } from './p-08cf2c0e.js';
import { d as defineCustomElement$2 } from './p-2f619b66.js';

const navigationBreadcrumbsCss = ".sc-digi-navigation-breadcrumbs-h{--digi--navigation-breadcrumbs--items--display:flex;--digi--navigation-breadcrumbs--items--flex-wrap:wrap;--digi--navigation-breadcrumbs--items--padding:0;--digi--navigation-breadcrumbs--items--margin:0;--digi--navigation-breadcrumbs--item--font-family:var(--digi--global--typography--font-family--default);--digi--navigation-breadcrumbs--item--font-size:var(--digi--typography--breadcrumbs--font-size--desktop);--digi--navigation-breadcrumbs--item--text-decoration:var(--digi--typography--breadcrumbs--text-decoration--desktop);--digi--navigation-breadcrumbs--item--color:var(--digi--color--text--primary);--digi--navigation-breadcrumbs--divider--padding:var(--digi--gutter--icon);--digi--navigation-breadcrumbs--link--visited--color:var(--digi--color--text--interactive--primary);--digi--navigation-breadcrumbs--link--hover--focus--color:var(--digi--color--text--interactive--primary);--digi--navigation-breadcrumbs--link--hover--text-decoration:underline;--digi--navigation-breadcrumbs--link--hover--text-decoration-thickness:var(--digi--typography--text-decoration-thickness--hover);--digi--navigation-breadcrumbs--link--color:var(--digi--color--text--interactive--primary)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__items.sc-digi-navigation-breadcrumbs{list-style:none;display:var(--digi--navigation-breadcrumbs--items--display);flex-wrap:var(--digi--navigation-breadcrumbs--items--flex-wrap);margin:var(--digi--navigation-breadcrumbs--items--margin);padding:var(--digi--navigation-breadcrumbs--items--padding)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__item.sc-digi-navigation-breadcrumbs{font-family:var(--digi--navigation-breadcrumbs--item--font-family);font-size:var(--digi--navigation-breadcrumbs--item--font-size);color:var(--digi--navigation-breadcrumbs--item--color);width:unset;margin-bottom:unset}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__item.sc-digi-navigation-breadcrumbs:not([aria-current=page])::after{content:\"/\";padding-inline:var(--digi--navigation-breadcrumbs--divider--padding)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__link.sc-digi-navigation-breadcrumbs{color:var(--digi--navigation-breadcrumbs--link--color);font-size:var(--digi--navigation-breadcrumbs--item--font-size)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__link.sc-digi-navigation-breadcrumbs:visited{color:var(--digi--navigation-breadcrumbs--link--color)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__link.sc-digi-navigation-breadcrumbs:hover{text-decoration:var(--digi--navigation-breadcrumbs--link--hover--text-decoration);text-decoration-thickness:var(--digi--navigation-breadcrumbs--link--hover--text-decoration-thickness)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__link.sc-digi-navigation-breadcrumbs:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}";
const DigiNavigationBreadcrumbsStyle0 = navigationBreadcrumbsCss;

const NavigationBreadcrumbs = /*@__PURE__*/ proxyCustomElement(class NavigationBreadcrumbs extends H {
    constructor() {
        super();
        this.__registerHost();
        this.afOnClick = createEvent(this, "afOnClick", 7);
        this.linkItems = [];
        this.currentPage = undefined;
        this.afAriaLabel = _t.breadcrumbs;
        this.afId = randomIdGenerator('digi-navigation-breadcrumbs');
        this.afCurrentPage = undefined;
    }
    onAfCurrentPage(afCurrentPage) {
        this.currentPage = afCurrentPage;
    }
    componentDidLoad() {
        this.getBreadcrumbs();
    }
    getBreadcrumbs() {
        const elements = this._observer.children;
        if (!elements || (elements === null || elements === void 0 ? void 0 : elements.length) <= 0) {
            logger.warn(`The slot contains no link elements.`, this.hostElement);
            return;
        }
        this.linkItems = [...elements]
            .filter((element) => element.tagName.toLowerCase() === 'a')
            .map((element) => {
            return {
                text: element.textContent,
                href: element.getAttribute('href') || ''
            };
        });
    }
    clickHandler(e) {
        this.afOnClick.emit(e);
    }
    render() {
        var _a;
        return (h("nav", { key: '6ff39967d0c7709d219a0a1bc7153c4752643e45', class: "digi-navigation-breadcrumbs", "aria-label": this.afAriaLabel }, h("ol", { key: '13484292e527b9a9edce3b703dab56e40e21140e', class: "digi-navigation-breadcrumbs__items" }, this.linkItems.map((item) => {
            return (h("li", { class: "digi-navigation-breadcrumbs__item" }, h("a", { class: "digi-navigation-breadcrumbs__link", onClick: (e) => this.clickHandler(e), href: item.href }, item.text)));
        }), h("li", { key: '8383295e7ae6c31ca3339631a31f42d87b6221d0', class: "digi-navigation-breadcrumbs__item", "aria-current": "page" }, (_a = this.currentPage) !== null && _a !== void 0 ? _a : this.afCurrentPage), h("digi-util-mutation-observer", { key: 'cd845b51dbf7140a37a6c0a06a45114a69611bf0', onAfOnChange: () => this.getBreadcrumbs(), ref: (el) => (this._observer = el), hidden: true }, h("slot", { key: '208d7288480629692bfa4ec814f747a7d9f67aaf' })))));
    }
    get hostElement() { return this; }
    static get watchers() { return {
        "afCurrentPage": ["onAfCurrentPage"]
    }; }
    static get style() { return DigiNavigationBreadcrumbsStyle0; }
}, [6, "digi-navigation-breadcrumbs", {
        "afAriaLabel": [1, "af-aria-label"],
        "afId": [1, "af-id"],
        "afCurrentPage": [1, "af-current-page"],
        "linkItems": [32],
        "currentPage": [32]
    }, undefined, {
        "afCurrentPage": ["onAfCurrentPage"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-navigation-breadcrumbs", "digi-util-mutation-observer"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-navigation-breadcrumbs":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, NavigationBreadcrumbs);
            }
            break;
        case "digi-util-mutation-observer":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const DigiNavigationBreadcrumbs = NavigationBreadcrumbs;
const defineCustomElement = defineCustomElement$1;

export { DigiNavigationBreadcrumbs, defineCustomElement };
