/*!
 * KoliBri - The accessible HTML-Standard
 */
import { Fragment, h } from "@stencil/core";
import { a11yHintLabelingLandmarks, validateLabel } from "../../schema";
import { addNavLabel, removeNavLabel } from "../../utils/unique-nav-labels";
import { watchNavLinks } from "../nav/validation";
import { KolLinkWcTag } from "../../core/component-names";
import { IconFC } from "../../internal/functional-components/icon/component";
export class KolBreadcrumb {
    constructor() {
        this.renderLink = (link, index) => {
            const lastIndex = this.state._links.length - 1;
            return (h("li", { class: "kol-breadcrumb__list-element", key: index }, index === lastIndex ? (h("span", { class: "kol-breadcrumb__list-element-span", "aria-current": "page" }, link._hideLabel ? (h(IconFC, { class: "kol-breadcrumb__icon", label: link._label, icons: typeof link._icons === 'string' ? link._icons : 'kolicon-link' })) : (h(Fragment, null, link._label)))) : (h(KolLinkWcTag, Object.assign({ class: "kol-breadcrumb__link", _inline: false }, link))), index !== lastIndex && h(IconFC, { class: "kol-breadcrumb__separator", label: "", icons: "kolicon-chevron-right" })));
        };
        this.state = {
            _label: '',
            _links: [],
        };
    }
    render() {
        return (h("nav", { key: 'bff94e213bc73c24069c1e5aa297aa54b6e98003', class: "kol-breadcrumb", "aria-label": this.state._label }, h("ul", { key: '2100b5df04175f39ebdfab1708100623856c4470', class: "kol-breadcrumb__list" }, this.state._links.length === 0 && (h("li", { key: '3b73286454440609917059e00581d71ed20788d8' }, h(IconFC, { key: '2b20cb24ae17a71c5b0dbeb713d1e32b04660f92', class: "kol-breadcrumb_icon", label: "", icons: "kolicon-house" }), "\u2026")), this.state._links.map(this.renderLink))));
    }
    validateLabel(value, _oldValue, initial = false) {
        if (!initial) {
            removeNavLabel(this.state._label);
        }
        validateLabel(this, value, {
            required: true,
        });
        a11yHintLabelingLandmarks(value);
        addNavLabel(this.state._label);
    }
    validateLinks(value) {
        watchNavLinks('KolBreadcrumb', this, value);
    }
    componentWillLoad() {
        this.validateLabel(this._label, undefined, true);
        this.validateLinks(this._links);
    }
    disconnectedCallback() {
        removeNavLabel(this.state._label);
    }
    static get is() { return "kol-breadcrumb"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "default": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "default": ["style.css"]
        };
    }
    static get properties() {
        return {
            "_label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "LabelPropType",
                    "resolved": "string",
                    "references": {
                        "LabelPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::LabelPropType"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_label"
            },
            "_links": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Stringified<BreadcrumbLinkProps[]>",
                    "resolved": "BreadcrumbLinkProps[] | string",
                    "references": {
                        "Stringified": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::Stringified"
                        },
                        "BreadcrumbLinkProps": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::BreadcrumbLinkProps"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the list of links combined with their labels to render."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_links"
            }
        };
    }
    static get states() {
        return {
            "state": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "_label",
                "methodName": "validateLabel"
            }, {
                "propName": "_links",
                "methodName": "validateLinks"
            }];
    }
}
//# sourceMappingURL=shadow.js.map
