import { h, Host } from "@stencil/core";
import { BreadcrumbsClass } from "./constants";
import { validateAccessibleLabel } from "../../helpers/Validate/wcag";
import { canValidateWcagOnRender } from "../../helpers/Dom/win";
import { govHost } from "../../helpers/Dom/template";
import { tick } from "../../utils/stencil.utils";
export class GovBreadcrumbs {
    constructor() {
        this.inited = false;
        /**
         * Defines whether the components can be collapsible when element doesn't fit in one row.
         */
        this.collapsible = false;
        /**
         * Defines whether the breadcrumbs are open or closed by button
         */
        this.isExpanded = false;
        /**
         * Adds an accessible label to display the full breadcrumb navigation that only screen readers can see.
         */
        this.accessibleToggleLabel = 'Zobrazit či skrýt navigaci';
        this.expanded = false;
        this.toggleOption = false;
        this.h = govHost(this.host);
    }
    async componentDidRender() {
        this.scheduleContentVerification();
        if (canValidateWcagOnRender()) {
            tick(() => this.validateAccessibility());
        }
    }
    scheduleContentVerification() {
        if (this.inited)
            return;
        this.inited = true;
        tick(() => {
            this.calculateWidthOfItems();
            this.inited = false;
        });
    }
    calculateWidthOfItems() {
        const hostWidth = this.host.getBoundingClientRect().width;
        let sumOfWidths = 0;
        this.host.querySelectorAll('li').forEach((li) => {
            sumOfWidths += li.getBoundingClientRect().width;
        });
        this.toggleOption = sumOfWidths > hostWidth;
    }
    render() {
        return (h(Host, { key: '5a2d10c3705a0d19458ea76e65ab6e0449eb620d', class: this.h.classes(BreadcrumbsClass.root), expanded: this.expanded }, h("nav", { key: '41b98c6ee95ea397f9802f5ac120d2674859cb4d', "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy }, h("slot", { key: '10fed9d58caa49017c34665e4b711252854040b7' })), this.toggleOption ? (h("gov-button", { size: 'xs', color: 'primary', type: 'base', "aria-label": this.accessibleToggleLabel, "aria-pressed": this.expanded, "aria-expanded": this.expanded, "on-gov-click": () => this.expanded = !this.expanded }, h("gov-icon", { name: this.expanded ? 'chevron-up' : 'chevron-down', type: "components" }))) : null));
    }
    /**
     * Validate the WCAG attributes of the component
     */
    async validateAccessibility() {
        validateAccessibleLabel(this.accessibleLabel, this.accessibleLabelledBy, BreadcrumbsClass.root, this.host);
        validateAccessibleLabel(this.accessibleToggleLabel, undefined, BreadcrumbsClass.root, this.host);
    }
    static get is() { return "gov-breadcrumbs"; }
    static get properties() {
        return {
            "collapsible": {
                "type": "boolean",
                "attribute": "collapsible",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines whether the components can be collapsible when element doesn't fit in one row."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "isExpanded": {
                "type": "boolean",
                "attribute": "is-expanded",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines whether the breadcrumbs are open or closed by button"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "accessibleLabel": {
                "type": "string",
                "attribute": "accessible-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Adds accessible label for the pagination that is only shown for screen readers."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "accessibleLabelledBy": {
                "type": "string",
                "attribute": "accessible-labelledby",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Indicates the id of a component that labels the pagination."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "accessibleToggleLabel": {
                "type": "string",
                "attribute": "accessible-toggle-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Adds an accessible label to display the full breadcrumb navigation that only screen readers can see."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Zobrazit \u010Di skr\u00FDt navigaci'"
            }
        };
    }
    static get states() {
        return {
            "expanded": {},
            "toggleOption": {}
        };
    }
    static get events() {
        return [{
                "method": "govChange",
                "name": "gov-change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Called when the Breadcrumbs state changes"
                },
                "complexType": {
                    "original": "GovBreadcrumbsChangeEvent",
                    "resolved": "GovBreadcrumbsChangeEvent",
                    "references": {
                        "GovBreadcrumbsChangeEvent": {
                            "location": "import",
                            "path": "./gov-breadcrumbs.d",
                            "id": "../../../packages/core/src/components/gov-breadcrumbs/gov-breadcrumbs.d.tsx::GovBreadcrumbsChangeEvent"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "validateAccessibility": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Validate the WCAG attributes of the component",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
}
//# sourceMappingURL=gov-breadcrumbs.js.map
