import { Component, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../../services/template.service";
export class AppTemplatesComponent {
    templateService;
    templateSelected = new EventEmitter();
    templates = [];
    sections = { templates: false };
    constructor(templateService) {
        this.templateService = templateService;
        this.templates = this.templateService.getTemplates(); // Load template list
    }
    toggleSection(section) {
        this.sections[section] = !this.sections[section];
    }
    selectTemplate(templateId) {
        const selectedTemplate = this.templates.find(t => t.templateId === templateId);
        if (!selectedTemplate)
            return;
        // Convert template element data to form elements
        const elements = selectedTemplate.elements.map((el, index) => this.templateService.initializeElementFromTemplate(el, index));
        // Emit data to parent
        this.templateSelected.emit({ selectedTemplate, elements });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppTemplatesComponent, deps: [{ token: i1.TemplateService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppTemplatesComponent, isStandalone: true, selector: "app-templates", outputs: { templateSelected: "templateSelected" }, ngImport: i0, template: "<!-- AP-08APR25 -->\n<!-- Templates Section Toggle -->\n<div class=\"field-container\" (click)=\"toggleSection('templates')\"\n     style=\"background-color: #EFF8FF; border: 1px solid #E6F3FF; margin-bottom: 10px; display: flex; justify-content: space-between; padding: 10px; cursor: pointer;\">\n  <div class=\"label-container\">\n    <div class=\"head-elements\" style=\"font-weight: bold;\">Templates</div>\n  </div>\n  <img [src]=\"sections.templates ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n       alt=\"Toggle Arrow\" class=\"arrow-icon\" />\n</div>\n\n<!-- Template List Section -->\n<div *ngIf=\"sections.templates\" class=\"template-container\">\n  <div *ngFor=\"let template of templates\" class=\"field-container template-card\"\n       (click)=\"selectTemplate(template.templateId)\"\n       style=\"border: 1px solid #dbeafe; padding: 12px; margin-bottom: 10px; cursor: pointer; border-radius: 10px; background-color: #f8fafc;\">\n    \n    <div class=\"label-container\" style=\"display: flex; justify-content: space-between;\">\n      <div>\n        <label class=\"template-header\" style=\"font-weight: 600;\">{{ template.templateName }}</label>\n      </div>\n    </div>\n    <div class=\"template-content\" style=\"margin-top: 5px; color: #555;\">{{ template.content }}</div>\n  </div>\n</div>\n", styles: [".toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.head-elements{font-size:17px;font-weight:600}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.template-card{border:1px solid #ddd;padding:10px;margin:10px 0;cursor:pointer;background-color:#f9f9f9;transition:background-color .3s}.template-card:hover{background-color:#eff8ff}.template-header{font-size:18px;font-weight:700}.template-content{font-size:14px;color:#555}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppTemplatesComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-templates', standalone: true, template: "<!-- AP-08APR25 -->\n<!-- Templates Section Toggle -->\n<div class=\"field-container\" (click)=\"toggleSection('templates')\"\n     style=\"background-color: #EFF8FF; border: 1px solid #E6F3FF; margin-bottom: 10px; display: flex; justify-content: space-between; padding: 10px; cursor: pointer;\">\n  <div class=\"label-container\">\n    <div class=\"head-elements\" style=\"font-weight: bold;\">Templates</div>\n  </div>\n  <img [src]=\"sections.templates ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n       alt=\"Toggle Arrow\" class=\"arrow-icon\" />\n</div>\n\n<!-- Template List Section -->\n<div *ngIf=\"sections.templates\" class=\"template-container\">\n  <div *ngFor=\"let template of templates\" class=\"field-container template-card\"\n       (click)=\"selectTemplate(template.templateId)\"\n       style=\"border: 1px solid #dbeafe; padding: 12px; margin-bottom: 10px; cursor: pointer; border-radius: 10px; background-color: #f8fafc;\">\n    \n    <div class=\"label-container\" style=\"display: flex; justify-content: space-between;\">\n      <div>\n        <label class=\"template-header\" style=\"font-weight: 600;\">{{ template.templateName }}</label>\n      </div>\n    </div>\n    <div class=\"template-content\" style=\"margin-top: 5px; color: #555;\">{{ template.content }}</div>\n  </div>\n</div>\n", styles: [".toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.head-elements{font-size:17px;font-weight:600}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.template-card{border:1px solid #ddd;padding:10px;margin:10px 0;cursor:pointer;background-color:#f9f9f9;transition:background-color .3s}.template-card:hover{background-color:#eff8ff}.template-header{font-size:18px;font-weight:700}.template-content{font-size:14px;color:#555}\n"] }]
        }], ctorParameters: () => [{ type: i1.TemplateService }], propDecorators: { templateSelected: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 