@rangertechnologies/ngnxt 2.1.128 → 2.1.130

package/esm2022/lib/pages/builder/templates/templates.component.mjs

@@ -0,0 +1,35 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../../../services/template.service";
+import * as i2 from "@angular/common";
+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, 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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppTemplatesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-templates', 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVtcGxhdGVzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL254dC1hcHAvc3JjL2xpYi9wYWdlcy9idWlsZGVyL3RlbXBsYXRlcy90ZW1wbGF0ZXMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL3BhZ2VzL2J1aWxkZXIvdGVtcGxhdGVzL3RlbXBsYXRlcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFRaEUsTUFBTSxPQUFPLHFCQUFxQjtJQUtaO0lBSlYsZ0JBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUNyRCxTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ2YsUUFBUSxHQUFHLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxDQUFDO0lBRWhDLFlBQW9CLGVBQWdDO1FBQWhDLG9CQUFlLEdBQWYsZUFBZSxDQUFpQjtRQUNsRCxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsWUFBWSxFQUFFLENBQUMsQ0FBQyxxQkFBcUI7SUFDN0UsQ0FBQztJQUVELGFBQWEsQ0FBQyxPQUFvQjtRQUNoQyxJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNuRCxDQUFDO0lBRUQsY0FBYyxDQUFDLFVBQWtCO1FBQy9CLE1BQU0sZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsVUFBVSxLQUFLLFVBQVUsQ0FBQyxDQUFDO1FBQy9FLElBQUksQ0FBQyxnQkFBZ0I7WUFBRSxPQUFPO1FBRTlCLGlEQUFpRDtRQUNqRCxNQUFNLFFBQVEsR0FBRyxnQkFBZ0IsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxFQUFFLEtBQUssRUFBRSxFQUFFLENBQzNELElBQUksQ0FBQyxlQUFlLENBQUMsNkJBQTZCLENBQUMsRUFBRSxFQUFFLEtBQUssQ0FBQyxDQUM5RCxDQUFDO1FBRUYsc0JBQXNCO1FBQ3RCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsRUFBRSxnQkFBZ0IsRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFDO0lBQzdELENBQUM7d0dBeEJVLHFCQUFxQjs0RkFBckIscUJBQXFCLHdHQ1JsQyxxMENBeUJBOzs0RkRqQmEscUJBQXFCO2tCQUxqQyxTQUFTOytCQUNFLGVBQWU7b0ZBS2YsZ0JBQWdCO3NCQUF6QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVGVtcGxhdGVTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vLi4vc2VydmljZXMvdGVtcGxhdGUuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC10ZW1wbGF0ZXMnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGVtcGxhdGVzLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdGVtcGxhdGVzLmNvbXBvbmVudC5jc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBBcHBUZW1wbGF0ZXNDb21wb25lbnQge1xuICBAT3V0cHV0KCkgdGVtcGxhdGVTZWxlY3RlZCA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICB0ZW1wbGF0ZXMgPSBbXTtcbiAgc2VjdGlvbnMgPSB7IHRlbXBsYXRlczogZmFsc2UgfTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHRlbXBsYXRlU2VydmljZTogVGVtcGxhdGVTZXJ2aWNlKSB7XG4gICAgdGhpcy50ZW1wbGF0ZXMgPSB0aGlzLnRlbXBsYXRlU2VydmljZS5nZXRUZW1wbGF0ZXMoKTsgLy8gTG9hZCB0ZW1wbGF0ZSBsaXN0XG4gIH1cblxuICB0b2dnbGVTZWN0aW9uKHNlY3Rpb246ICd0ZW1wbGF0ZXMnKSB7XG4gICAgdGhpcy5zZWN0aW9uc1tzZWN0aW9uXSA9ICF0aGlzLnNlY3Rpb25zW3NlY3Rpb25dO1xuICB9XG5cbiAgc2VsZWN0VGVtcGxhdGUodGVtcGxhdGVJZDogbnVtYmVyKSB7XG4gICAgY29uc3Qgc2VsZWN0ZWRUZW1wbGF0ZSA9IHRoaXMudGVtcGxhdGVzLmZpbmQodCA9PiB0LnRlbXBsYXRlSWQgPT09IHRlbXBsYXRlSWQpO1xuICAgIGlmICghc2VsZWN0ZWRUZW1wbGF0ZSkgcmV0dXJuO1xuXG4gICAgLy8gQ29udmVydCB0ZW1wbGF0ZSBlbGVtZW50IGRhdGEgdG8gZm9ybSBlbGVtZW50c1xuICAgIGNvbnN0IGVsZW1lbnRzID0gc2VsZWN0ZWRUZW1wbGF0ZS5lbGVtZW50cy5tYXAoKGVsLCBpbmRleCkgPT5cbiAgICAgIHRoaXMudGVtcGxhdGVTZXJ2aWNlLmluaXRpYWxpemVFbGVtZW50RnJvbVRlbXBsYXRlKGVsLCBpbmRleClcbiAgICApO1xuXG4gICAgLy8gRW1pdCBkYXRhIHRvIHBhcmVudFxuICAgIHRoaXMudGVtcGxhdGVTZWxlY3RlZC5lbWl0KHsgc2VsZWN0ZWRUZW1wbGF0ZSwgZWxlbWVudHMgfSk7XG4gIH1cbn0iLCI8IS0tIEFQLTA4QVBSMjUgLS0+XG48IS0tIFRlbXBsYXRlcyBTZWN0aW9uIFRvZ2dsZSAtLT5cbjxkaXYgY2xhc3M9XCJmaWVsZC1jb250YWluZXJcIiAoY2xpY2spPVwidG9nZ2xlU2VjdGlvbigndGVtcGxhdGVzJylcIlxuICAgICBzdHlsZT1cImJhY2tncm91bmQtY29sb3I6ICNFRkY4RkY7IGJvcmRlcjogMXB4IHNvbGlkICNFNkYzRkY7IG1hcmdpbi1ib3R0b206IDEwcHg7IGRpc3BsYXk6IGZsZXg7IGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsgcGFkZGluZzogMTBweDsgY3Vyc29yOiBwb2ludGVyO1wiPlxuICA8ZGl2IGNsYXNzPVwibGFiZWwtY29udGFpbmVyXCI+XG4gICAgPGRpdiBjbGFzcz1cImhlYWQtZWxlbWVudHNcIiBzdHlsZT1cImZvbnQtd2VpZ2h0OiBib2xkO1wiPlRlbXBsYXRlczwvZGl2PlxuICA8L2Rpdj5cbiAgPGltZyBbc3JjXT1cInNlY3Rpb25zLnRlbXBsYXRlcyA/ICcuLi9hc3NldHMvaWNvbnMvYXJyb3ctZG93bi5zdmcnIDogJy4uL2Fzc2V0cy9pY29ucy9hcnJvdy1yaWdodC5zdmcnXCJcbiAgICAgICBhbHQ9XCJUb2dnbGUgQXJyb3dcIiBjbGFzcz1cImFycm93LWljb25cIiAvPlxuPC9kaXY+XG5cbjwhLS0gVGVtcGxhdGUgTGlzdCBTZWN0aW9uIC0tPlxuPGRpdiAqbmdJZj1cInNlY3Rpb25zLnRlbXBsYXRlc1wiIGNsYXNzPVwidGVtcGxhdGUtY29udGFpbmVyXCI+XG4gIDxkaXYgKm5nRm9yPVwibGV0IHRlbXBsYXRlIG9mIHRlbXBsYXRlc1wiIGNsYXNzPVwiZmllbGQtY29udGFpbmVyIHRlbXBsYXRlLWNhcmRcIlxuICAgICAgIChjbGljayk9XCJzZWxlY3RUZW1wbGF0ZSh0ZW1wbGF0ZS50ZW1wbGF0ZUlkKVwiXG4gICAgICAgc3R5bGU9XCJib3JkZXI6IDFweCBzb2xpZCAjZGJlYWZlOyBwYWRkaW5nOiAxMnB4OyBtYXJnaW4tYm90dG9tOiAxMHB4OyBjdXJzb3I6IHBvaW50ZXI7IGJvcmRlci1yYWRpdXM6IDEwcHg7IGJhY2tncm91bmQtY29sb3I6ICNmOGZhZmM7XCI+XG4gICAgXG4gICAgPGRpdiBjbGFzcz1cImxhYmVsLWNvbnRhaW5lclwiIHN0eWxlPVwiZGlzcGxheTogZmxleDsganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1wiPlxuICAgICAgPGRpdj5cbiAgICAgICAgPGxhYmVsIGNsYXNzPVwidGVtcGxhdGUtaGVhZGVyXCIgc3R5bGU9XCJmb250LXdlaWdodDogNjAwO1wiPnt7IHRlbXBsYXRlLnRlbXBsYXRlTmFtZSB9fTwvbGFiZWw+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwidGVtcGxhdGUtY29udGVudFwiIHN0eWxlPVwibWFyZ2luLXRvcDogNXB4OyBjb2xvcjogIzU1NTtcIj57eyB0ZW1wbGF0ZS5jb250ZW50IH19PC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=