import { r as registerInstance, e as getAssetPath, h, a as getElement } from './index-DtIEDtZ8.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) {
        registerInstance(this, hostRef);
        this.tableTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);
        this.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: '625f556bc421af7b7eb482e3516f7792b4c1ef71', class: 'templates__container' }, h("div", { key: 'b4baf8ddbb682ed4c8fd68915d5ade140e0f599f', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: 'ae7543d14589bedb717e5798d2adfee5466cd7dc', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '62661f884e553205dcb63977c110b5cb8e174e53', class: "alert__wrapper" }, h("ifx-alert", { key: '5a9d3c9ed711cb2f3ceebb1baebbc106899f7e1f', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-16" }, "All fields are mandatory"))), h("h2", { key: '60fb42f545206c1e19b4d3762c9110270cbd391e', class: "templates__title" }, "Choose your template"), h("div", { key: '4d4db713807c60c8cf3d10dde9d7b7b64304a2c5', class: "templates__wrapper" }, h("ifx-template", { key: 'edacabf2edfc49a2b23bf3a200ac559a6637336d', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '78eb56d6b2ae1f3f3020eaf36b99eeb5fd8b24ea', name: 'template-02', thumbnail: this.wizardTemplate }))));
    }
    static get assetsDirs() { return ["assets"]; }
    get el() { return getElement(this); }
};
TemplatesUI.style = templatesUiCss;

export { TemplatesUI as ifx_templates_ui };
//# sourceMappingURL=ifx-templates-ui.entry.js.map

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