import { getAssetPath, h } from "@stencil/core";
export class TemplatesUI {
    el;
    tableTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);
    wizardTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`);
    toggleTemplate(currTemp) {
        const templates = this.el.shadowRoot
            .querySelector(".templates__wrapper")
            .querySelectorAll("ifx-template");
        templates.forEach((template) => {
            template.toggleTemplate(currTemp);
        });
    }
    handleError(e) {
        const alertWrapper = this.el.shadowRoot.querySelector(".alert__wrapper");
        if (e.detail) {
            alertWrapper.classList.add("show");
        }
        else {
            alertWrapper.classList.remove("show");
        }
    }
    filterTemplates(e) {
        const title = this.el.shadowRoot.querySelector(".templates__title");
        const backBtn = this.el.shadowRoot.querySelector(".back__btn-wrapper");
        if (e.detail) {
            title.classList.add("hide");
            if (e.detail !== "details") {
                backBtn.classList.add("show");
            }
            this.toggleTemplate(e.detail);
        }
        else {
            title.classList.remove("hide");
            backBtn.classList.remove("show");
            this.toggleTemplate(null);
        }
    }
    closeAlert() {
        const alertWrapper = this.el.shadowRoot.querySelector(".alert__wrapper");
        alertWrapper.classList.remove("show");
    }
    render() {
        return (h("div", { key: '29c772490e68cc71ee5115470c7be4769ed4d321', class: "templates__container" }, h("div", { key: 'e01f48549b2f41541d7bf09ed784bee2503582bf', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: 'a58c2fa0fcd6f2bf04dfd4f71aede46bb1071c8b', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '7acfbaf0dd6bb121cbc597779d9608aef8e994e3', class: "alert__wrapper" }, h("ifx-alert", { key: 'cea1452563f7f7a015e0cd3796fd225aac95db77', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-16" }, "All fields are mandatory"))), h("h2", { key: '77f108daf1d6ee1431b75b7dea7650d254e59012', class: "templates__title" }, "Choose your template"), h("div", { key: 'aa1795f74d93e14abd98c116ae832529caaef353', class: "templates__wrapper" }, h("ifx-template", { key: 'c1dd2731ef19aebb90a5446d6bb09dc121450a51', name: "template-01", thumbnail: this.tableTemplate }), h("ifx-template", { key: 'a6f8d753ce70bb3d4d1799496935e6887bc9a76d', name: "template-02", thumbnail: this.wizardTemplate }))));
    }
    static get is() { return "ifx-templates-ui"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["templates-ui.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["templates-ui.css"]
        };
    }
    static get assetsDirs() { return ["assets"]; }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "fieldError",
                "method": "handleError",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "toggleTemplates",
                "method": "filterTemplates",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=templates-ui.js.map
