import { Host, h, } from "@stencil/core";
import chevronIcon from "../../assets/chevron-icon.svg";
import backIcon from "../../assets/back-icon.svg";
import { getSlotElements, isSlotUsed } from "../../utils/helpers";
/**
 * @slot icon - Content will be rendered to the left of the breadcrumb page title.
 */
export class Breadcrumb {
    constructor() {
        this.HREF_ATTR = "href";
        this.linkSlotContent = null;
        this.slottedLinkEl = null;
        this.slottedLinkHref = null;
        /**
         * If `true`, aria-current will be set on the breadcrumb.
         */
        this.current = false;
        /**
         * @internal If `true`, the breadcrumb will display as black in the light theme, and white in the dark theme.
         */
        this.monochrome = false;
        /**
         * @internal If `true`, back icon will be displayed.
         */
        this.showBackIcon = false;
        /**
         * @internal Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        // Prevent focus on breadcrumb if current page and contains slotted link
        this.updatedSlottedLinkFocus = () => {
            var _a, _b;
            // Sets tabindex on wrong element in unit test snapshots
            // - related to known Jest issue: https://github.com/ionic-team/stencil/issues/2830
            if (this.linkSlotContent) {
                this.linkSlotContent.tabIndex = this.current ? -1 : 0; // Prevent focus
            }
            if (this.current) {
                (_a = this.slottedLinkEl) === null || _a === void 0 ? void 0 : _a.removeAttribute(this.HREF_ATTR); // Prevent screen reader announcing breadcrumb as a link
            }
            else if (this.slottedLinkHref) {
                (_b = this.slottedLinkEl) === null || _b === void 0 ? void 0 : _b.setAttribute(this.HREF_ATTR, this.slottedLinkHref);
            }
        };
        this.getSlottedLinkEl = () => {
            if (!this.linkSlotContent)
                return null;
            return this.linkSlotContent.hasAttribute(this.HREF_ATTR)
                ? this.linkSlotContent
                : this.linkSlotContent.querySelector("[href]");
        };
        this.renderBackIcon = () => (h("div", { class: "back-icon", innerHTML: backIcon }));
    }
    watchCurrentHandler() {
        this.updatedSlottedLinkFocus();
        this.el.ariaCurrent = this.current ? "page" : null;
    }
    componentDidLoad() {
        var _a, _b;
        const slottedLinkWrapper = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".link-wrapper");
        if (slottedLinkWrapper) {
            const slotEls = getSlotElements(slottedLinkWrapper);
            if (slotEls) {
                this.linkSlotContent = slotEls[0];
                this.slottedLinkEl = this.getSlottedLinkEl();
                this.slottedLinkHref = ((_b = this.slottedLinkEl) === null || _b === void 0 ? void 0 : _b.getAttribute("href")) || null;
            }
            this.updatedSlottedLinkFocus();
        }
    }
    componentWillRender() {
        const icLink = this.el.querySelector("ic-link");
        if (icLink) {
            const CURRENT_PAGE = "current-page";
            icLink.classList.remove(CURRENT_PAGE);
            if (this.current && !icLink.classList.contains(CURRENT_PAGE)) {
                icLink.classList.add("breadcrumb-link", CURRENT_PAGE);
            }
        }
    }
    /**
     * Sets focus on the breadcrumb.
     */
    async setFocus() {
        var _a, _b;
        (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ic-link")) === null || _b === void 0 ? void 0 : _b.focus();
    }
    render() {
        const { current, href, monochrome, pageTitle, showBackIcon, theme } = this;
        const describedById = `${pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.toLowerCase().replace(" ", "-")}-describedby`;
        return (h(Host, { key: '0a6d1443010427dbc75347c9c69b7c40680be25f', class: {
                "ic-breadcrumb-back": showBackIcon,
                "ic-breadcrumb-monochrome": monochrome,
                [`ic-theme-${theme}`]: theme !== "inherit",
            }, "aria-current": current && "page", role: "listitem" }, h("div", { key: 'bd351348bd835963705c29c5aa4e857c3752d645', class: "breadcrumb" }, h("span", { key: '9a4e28f31aa1c8cf2e111a0ce64902abba338461', innerHTML: chevronIcon, class: "chevron", "aria-hidden": "true" }), showBackIcon && (h("span", { key: '289414d58963cea6e68b782ba36df782690db04a', id: describedById, class: "hide" }, `Back to ${pageTitle}`)), !href ? (h("div", { class: "slotted-link-container" }, showBackIcon && this.renderBackIcon(), h("span", { class: "link-wrapper" }, h("slot", null)))) : current ? (h("span", { class: "current-page-container" }, isSlotUsed(this.el, "icon") && h("slot", { name: "icon" }), pageTitle)) : (h("ic-link", { theme: theme, monochrome: monochrome, href: href, class: "breadcrumb-link", "aria-describedby": showBackIcon && describedById }, showBackIcon && this.renderBackIcon(), isSlotUsed(this.el, "icon") && h("slot", { name: "icon" }), pageTitle)))));
    }
    static get is() { return "ic-breadcrumb"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-breadcrumb.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-breadcrumb.css"]
        };
    }
    static get properties() {
        return {
            "current": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, aria-current will be set on the breadcrumb."
                },
                "getter": false,
                "setter": false,
                "attribute": "current",
                "reflect": false,
                "defaultValue": "false"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The URL that the breadcrumb link points to."
                },
                "getter": false,
                "setter": false,
                "attribute": "href",
                "reflect": false
            },
            "monochrome": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "If `true`, the breadcrumb will display as black in the light theme, and white in the dark theme."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "monochrome",
                "reflect": false,
                "defaultValue": "false"
            },
            "pageTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The title of the breadcrumb."
                },
                "getter": false,
                "setter": false,
                "attribute": "page-title",
                "reflect": false
            },
            "showBackIcon": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "If `true`, back icon will be displayed."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-back-icon",
                "reflect": true,
                "defaultValue": "false"
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            }
        };
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the breadcrumb.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "current",
                "methodName": "watchCurrentHandler"
            }];
    }
}
//# sourceMappingURL=ic-breadcrumb.js.map
