import { h } from "@stencil/core";
import InpageNavigation from "@ecl/inpage-navigation";
export class EclInpageNavigation {
    constructor() {
        this.colorMode = '';
        this.noScript = false;
    }
    getClass() {
        const styleClasses = [
            `ecl-inpage-navigation`,
            this.styleClass
        ];
        if (this.colorMode) {
            styleClasses.push(`ecl-color-mode--${this.colorMode}`);
        }
        return styleClasses.join(' ');
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    componentDidLoad() {
        const items = this.el.querySelectorAll('.ecl-inpage-navigation__item');
        if (items) {
            items.forEach((item) => {
                const link = item.querySelector('.ecl-inpage-navigation__link');
                if (link) {
                    link.setAttribute('data-ecl-inpage-navigation-link', 'data-ecl-inpage-navigation-link');
                    item.innerHTML = '';
                    item.appendChild(link);
                }
            });
            this.el.querySelector('.ecl-inpage-navigation__list').innerHTML = '';
            this.el.querySelector('.ecl-inpage-navigation__list').append(...items);
        }
        if (!this.noScript) {
            ;
            window.ECL = window.ECL || {};
            ECL.InpageNavigation = InpageNavigation;
            const inpageNavigation = new InpageNavigation(this.el.firstElementChild);
            inpageNavigation.init();
        }
    }
    render() {
        return (h("nav", { key: '709855415685630b827ec7a88b699cfb6349be42', class: this.getClass(), "data-ecl-inpage-navigation": true, "aria-labelledby": this.inpageId }, h("div", { key: 'b23fb8d9269f1b1f02092e220a3981ce1c077c35', class: "ecl-inpage-navigation__title", id: this.inpageId }, this.inpageTitle), h("div", { key: '1b2b2eae4e03699280869d753f9a7a98a424f89b', class: "ecl-inpage-navigation__body" }, h("button", { key: 'b666c3a612a842a726ed9eab478023aef0969622', class: `ecl-inpage-navigation__trigger sc-ecl-inpage-navigation-${this.theme}`, id: `${this.inpageId}-trigger`, "aria-expanded": "false", "aria-controls": "ecl-inpage-navigation-list", "data-ecl-inpage-navigation-trigger": true, "aria-label": "" }, h("span", { key: '329ac74a0af0fdd1d81482c79b73f4fd456196be', class: "ecl-inpage-navigation__trigger-current", "data-ecl-inpage-navigation-trigger-current": true }), h("ecl-icon", { key: 'ce3ba54ad52066ef2d13372ad861f34950db13a2', icon: "corner-arrow", size: "s", rotate: "180", "style-class": `ecl-inpage-navigation__trigger-icon sc-ecl-inpage-navigation-${this.theme}` })), h("ul", { key: '4c203bb2290be9ea31b539920bace31715c14950', class: "ecl-inpage-navigation__list", "data-ecl-inpage-navigation-list": true, id: `${this.inpageId}-list` }, h("slot", { key: 'ba1df474f52eccc449cf363b03b5b431a8cbf71e' })))));
    }
    static get is() { return "ecl-inpage-navigation"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "ec": ["./build/styles/ecl-inpage-navigation-ec.css"],
            "eu": ["./build/styles/ecl-inpage-navigation-eu.css"]
        };
    }
    static get styleUrls() {
        return {
            "ec": ["build/styles/ecl-inpage-navigation-ec.css"],
            "eu": ["build/styles/ecl-inpage-navigation-eu.css"]
        };
    }
    static get properties() {
        return {
            "theme": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "theme"
            },
            "styleClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "style-class"
            },
            "colorMode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "color-mode",
                "defaultValue": "''"
            },
            "noScript": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "no-script",
                "defaultValue": "false"
            },
            "inpageTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "inpage-title"
            },
            "inpageId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "inpage-id"
            }
        };
    }
    static get elementRef() { return "el"; }
}
