'use strict';

var index = require('./index-Dc5gCGlQ.js');

const templatesUiCss = "*{padding:0;margin:0}.templates__container{display:flex;flex-direction:column;align-items:center}.templates__container .back__btn-wrapper{display:none}.templates__container .back__btn-wrapper.show{display:flex;justify-content:space-between;width:100%}.templates__container .back__btn-wrapper .alert__wrapper{display:none}.templates__container .back__btn-wrapper .alert__wrapper.show{display:block}.templates__container .templates__wrapper{display:flex;padding:20px 0px;gap:20px;flex-wrap:wrap}.templates__container .templates__title.hide{display:none}";

const TemplatesUI = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.tableTemplate = index.getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);
        this.wizardTemplate = index.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 (index.h("div", { key: 'de3f1dd422965261933fbb63db9111f44822ab68', class: 'templates__container' }, index.h("div", { key: '66a080cd32140e6a3ceaa21bee1026a99c6f7b11', class: "back__btn-wrapper" }, index.h("ifx-icon-button", { key: '89ec7da67d65d64816372f1f2b0cecf495ea5450', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), index.h("div", { key: 'bc1497bcf600610eeb2c8362d2f2345216121a1b', class: "alert__wrapper" }, index.h("ifx-alert", { key: '9ed05181113e2b5dfe02dad42742a9ba1b5dc0d3', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-16" }, "All fields are mandatory"))), index.h("h2", { key: 'f3ea20197617a886e6d52b218588a3697d5ff582', class: "templates__title" }, "Choose your template"), index.h("div", { key: 'b9edc1b18196bbcbb8e1800db55628fab465009d', class: "templates__wrapper" }, index.h("ifx-template", { key: '085075a6e78942f57ed4d48be203111dc43bd9af', name: 'template-01', thumbnail: this.tableTemplate }), index.h("ifx-template", { key: '343585d1067360babceaf9399a8d66a35471e186', name: 'template-02', thumbnail: this.wizardTemplate }))));
    }
    static get assetsDirs() { return ["assets"]; }
    get el() { return index.getElement(this); }
};
TemplatesUI.style = templatesUiCss;

exports.ifx_templates_ui = TemplatesUI;
//# sourceMappingURL=ifx-templates-ui.entry.cjs.js.map

//# sourceMappingURL=ifx-templates-ui.cjs.entry.js.map