@rangertechnologies/ngnxt 2.1.108 → 2.1.109

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -10500,17 +10500,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
 
+// IMPORTANT: THIS FILE IS AUTO GENERATED! DO NOT MANUALLY EDIT OR CHECKIN!
+/* tslint:disable */
+const VERSION = {
+    "dirty": true,
+    "raw": "edbbbf0-dirty",
+    "hash": "edbbbf0",
+    "distance": null,
+    "tag": null,
+    "semver": null,
+    "suffix": "edbbbf0-dirty",
+    "semverString": null,
+    "version": "2.1.109"
+};
+/* tslint:enable */
+
 // AP 22JAN25
 class FormBuilderService {
     formElements = [];
     formElementsSubject = new BehaviorSubject([]);
     selectedElementSubject = new BehaviorSubject(-1);
+    selectHeaderSubject = new BehaviorSubject(null);
     elementComponent = null;
     book;
     unique_id;
     tempElem;
     formElements$ = this.formElementsSubject.asObservable();
     selectedElement$ = this.selectedElementSubject.asObservable();
+    selectHeaderSubject$ = this.selectHeaderSubject.asObservable();
     // book: { bookQuestionsMap: { unique_id: { subQuestions: any[]; }; }; };
     constructor() {
         // Load saved elements from localStorage
@@ -10522,6 +10539,28 @@ class FormBuilderService {
             // this.book = JSON.parse(localStorage.getItem('book') || '{}');
             this.unique_id = localStorage.getItem('unique_id');
         }
+        if (localStorage.getItem('status') === "new") {
+            this.unique_id = v4();
+            console.log('new');
+            this.book = {
+                'bookQuestionsMap': {
+                    [this.unique_id]: {
+                        'subQuestions': []
+                    }
+                },
+                'questionbook': {
+                    "action": "[{\"name\": \"Cancel\", \"eventtoemit\": \"close\", \"alt\":\"\"},{\"name\": \"Save\", \"eventtoemit\": \"submit\", \"alt\":\"\",\"endpoint\":\"\",\"method\":\"POST\"}]"
+                },
+                'records': [{
+                        'id': this.unique_id,
+                        'title': 'Untitled',
+                        'subQuestions': [{}]
+                    }]
+            };
+        }
+    }
+    intializeBook(book) {
+        this.book = book;
     }
     // AP 26FEB25 - clear the form elements 
     clearElements() {
@@ -10545,34 +10584,27 @@ class FormBuilderService {
             // this.formElements = JSON.parse(savedFormElements);
             // this.formElementsSubject.next([...this.formElements]);
             // this.book = JSON.parse(localStorage.getItem('book') || '{}');
-            this.book = {};
-            if (localStorage.getItem('status') == "edit") {
-                this.unique_id = localStorage.getItem('unique_id');
-                this.book = {
-                    'bookQuestionsMap': {
-                        [this.unique_id]: {
-                            'subQuestions': []
-                        }
-                    }
-                };
-            }
-            else {
-                this.unique_id = v4();
-                this.book = {
-                    'bookQuestionsMap': {
-                        [this.unique_id]: {
-                            'subQuestions': []
-                        }
-                    },
-                    'questionbook': {
-                        "action": "[{\"name\": \"Cancel\", \"eventtoemit\": \"close\", \"alt\":\"\"},{\"name\": \"Save\", \"eventtoemit\": \"submit\", \"alt\":\"\",\"endpoint\":\"\",\"method\":\"POST\"}]"
-                    },
-                    'records': [{
-                            'id': this.unique_id,
-                            'subQuestions': [{}]
-                        }]
-                };
-            }
+            // if(localStorage.getItem('status') == "edit" && this.book !== undefined){
+            //   this.unique_id = localStorage.getItem('unique_id');
+            //   this.book = {
+            //     'bookQuestionsMap': {
+            //        [this.unique_id]: {
+            //        'subQuestions': []
+            //        }
+            //      }
+            //    };
+            //    if(this.book.questionbook == undefined){
+            //     this.book['questionbook'] = {
+            //       "action": "[{\"name\": \"Cancel\", \"eventtoemit\": \"close\", \"alt\":\"\"},{\"name\": \"Save\", \"eventtoemit\": \"submit\", \"alt\":\"\",\"endpoint\":\"\",\"method\":\"POST\"}]"
+            //    }
+            //    }
+            //    if(this.book.records == undefined){
+            //     this.book['records'] = [{
+            //       'id': this.unique_id,
+            //        'subQuestions': [{}]
+            //       }]
+            //    }
+            //  }
             // this.unique_id = uuidv4();
             // localStorage.setItem('book', JSON.stringify(this.book));
             localStorage.setItem('unique_id', this.unique_id);
@@ -10602,6 +10634,11 @@ class FormBuilderService {
                     const questionText = updatedElement.questionText.replace(/\s*\*+$/, '');
                     updatedElement.questionText = updates.required ? `${questionText} *` : questionText;
                 }
+                if (elements[index]) {
+                    elements[index] = { ...elements[index], ...updates };
+                    this.formElements = elements;
+                    this.formElementsSubject.next([...this.formElements]);
+                }
             }
             // Handle special cases
             if (updates.required === true && updatedElement.questionText && !updatedElement.questionText.endsWith('*')) {
@@ -10615,22 +10652,42 @@ class FormBuilderService {
             // localStorage.setItem('formElements', JSON.stringify(this.formElements));
         }
     }
+    updateTitle(event) {
+        //AP-10MAR25 Updates the title of the first record in the book  
+        this.book.records[0].title = event;
+    }
     setSelectedElement(index) {
         this.selectedElementSubject.next(index);
     }
+    selectHeading(event) {
+        //AP-10MAR25 Emits the selected heading event  
+        this.selectHeaderSubject.next(event);
+    }
     getElements() {
         return this.formElements.map(element => ({
             ...element,
             options: element.options || [],
         }));
     }
+    sortElementsByOrder() {
+        //AP-10MAR25 Sort elements by current order
+        this.formElements.sort((a, b) => a.order - b.order);
+        this.formElements.forEach((element, index) => {
+            element.order = index + 1;
+        });
+        this.formElementsSubject.next([...this.formElements]);
+    }
+    //AP-10MAR25 Returns the current book data  
+    getBook() {
+        return this.book;
+    }
     // In FormBuilderService
     downloadElement() {
         this.book.bookQuestionsMap[this.unique_id].subQuestions = this.formElements;
         console.log('book', this.book.bookQuestionsMap[this.unique_id].subQuestions);
         let tempElement = {};
         this.formElements.forEach((element) => {
-            if (element.type === 'Dropdown' || element.type === 'Radio' || element.type === 'CheckBox') {
+            if (element.type === 'Dropdown' || element.type === 'Radio' || element.type === 'Checkbox') {
                 //AP 25FEB25 - Store the entire question with its options under its ID
                 tempElement[element.id] = {
                     ...element,
@@ -10685,6 +10742,8 @@ class ElementComponent {
     };
     basicElements = [];
     advancedElements = [];
+    version = VERSION.version; //SKS10MAR25 get version from environment/version.ts 
+    book;
     //subscription: any;
     constructor(formBuilderService) {
         this.formBuilderService = formBuilderService;
@@ -10719,6 +10778,7 @@ class ElementComponent {
         else {
             localStorage.setItem('status', "new");
         }
+        this.book = this.formBuilderService.getBook();
     }
     // Add these methods
     toggleSection(section) {
@@ -10742,8 +10802,8 @@ class ElementComponent {
         localStorage.setItem('status', "edit");
         localStorage.setItem('unique_id', this.bookletId);
         this.formElements = [];
-        console.log("formElements", this.formElements);
         this.formBuilderService.clearElements();
+        this.formBuilderService.intializeBook(this.bookletJSON);
         const bookQuestionsMapKeys = Object.keys(this.bookletJSON.bookQuestionsMap);
         console.log("bookQuestionsMapKeys", bookQuestionsMapKeys);
         if (bookQuestionsMapKeys.length === 0)
@@ -10762,60 +10822,68 @@ class ElementComponent {
     // }
     drop(event) {
         moveItemInArray(this.formElements, event.previousIndex, event.currentIndex);
-        //AP-06MAR25- Add this line to update service with new order
+        //AP-10MAR25 Update order properties to match new indices
+        this.formElements.forEach((element, index) => {
+            element.order = index + 1;
+        });
         this.formBuilderService.updateElementsOrder(this.formElements);
     }
     // Add this method to handle element selection
     selectElement(index) {
         this.selectedFieldIndex = index; // element is selected
         this.formBuilderService.setSelectedElement(index);
+        this.book = this.formBuilderService.getBook();
         //const element = this.formElements[index];
         // this.elementButtonClicked.emit(element.type);  
     }
     //selectedIndex: number | null = null;
     selectedFieldIndex = null; // element is cleared
+    selectHeading(event) {
+        this.formBuilderService.selectHeading(event); //AP-10MAR25 Updates the selected heading in the service  
+        this.book = this.formBuilderService.getBook(); //AP-10MAR25 Retrieves the updated book/form data 
+    }
     addElement(type) {
         const unique_id = v4();
-        console.log('uid', unique_id);
         const newElement = {
             id: unique_id,
             uid: unique_id,
             type,
-            name: '',
-            questionText: '',
-            question: '',
-            helpText: '',
-            errorMessage: '',
+            name: null,
+            questionText: null,
+            question: null,
+            helpText: null,
+            errorMessage: null,
             isReadOnly: false,
             isHidden: false,
             required: false,
-            subText: '',
-            referenceField: '',
-            additionalRichContent: '',
-            groupName: '',
+            subText: null,
+            referenceField: null,
+            additionalRichContent: null,
+            groupName: null,
             isDateBackward: false,
-            title: '',
-            subTitle: '',
+            title: null,
+            subTitle: null,
             size: 12,
             isDateForward: false,
             isOptional: false,
             isTitle: false,
-            nextQuestion: '',
-            allowedFileExtensions: '',
+            nextQuestion: null,
+            allowedFileExtensions: null,
             questionNumber: this.formBuilderService.getElements().length + 1,
+            order: this.formElements.length + 1,
             questionBookId: this.bookletId,
-            parentQuestion: '',
-            fieldsMeta: '',
-            recordTypeName: '',
-            recordTypeId: '',
-            trackingId: '',
-            dateText: '',
-            timeText: '',
-            recordId: '',
-            qbReference: '',
-            qbReferenceQuestions: '',
-            questionBookSubTitle: '',
-            style: '',
+            parentQuestion: null,
+            fieldsMeta: null,
+            recordTypeName: null,
+            recordTypeId: null,
+            trackingId: null,
+            dateText: null,
+            timeText: null,
+            recordId: null,
+            qbReference: null,
+            qbReferenceQuestions: null,
+            questionBookSubTitle: null,
+            style: null,
             options: type === 'Dropdown' || type === 'Radio' || type === 'Checkbox' ? [] : null,
         };
         this.formBuilderService.addElement(newElement);
@@ -10846,11 +10914,11 @@ class ElementComponent {
         return styles;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n<!-- Form Builder Section All Elements -->\n<div class=\"form-builder\">\n  <!-- Basic Elements Toggle -->\n  <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n    <div class=\"head-elements\">Basic Elements</div>\n    <span class=\"toggle-icon\">{{ sections.basic ? '\u25BC' : '\u25B6' }}</span>\n  </div>\n\n  <div *ngIf=\"sections.basic\">\n    <ng-container *ngFor=\"let element of basicElements\">\n      <div class=\"element\" (click)=\"addElement(element.type)\" cdkDrag>\n        <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n        <div class=\"hover-label\">{{ element.label }}</div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Advanced Elements Toggle -->\n  <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n    <div class=\"head-elements\">Advanced Elements</div>\n    <span>{{ sections.advanced ? '\u25BC' : '\u25B6' }}</span>\n  </div>\n  <div *ngIf=\"sections.advanced\">\n    <ng-container *ngFor=\"let element of advancedElements\">\n      <div class=\"element\" (click)=\"addElement(element.type)\">\n        <img src=\"../assets/icons/{{ element.img }}.svg\">\n        <div class=\"hover-label\">{{ element.label }}</div>\n      </div>\n    </ng-container>\n  </div>\n</div>\n  \n<div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n<ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n<!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>  \n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n      <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>    \n      <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n      [class.hidden]=\"field.isHidden\" />\n    </div>\n  </div>\n</div>\n\n<!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n          <div class=\"field-wrapper\">\n            <div class=\"field-content\">\n              <div class=\"label-container\">\n          <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\"  class=\"delete-icon\" />\n        </div>\n        <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n      </div>\n    </div>\n</div>\n\n<!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n          <div class=\"label-container\">\n            <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Label' }} </label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>        \n          <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n                 [class.hidden]=\"field.isHidden\" />\n        </div>\n      </div>\n</div>\n\n<!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>          \n            <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n                   [class.hidden]=\"field.isHidden\"/>\n          </div>\n        </div>\n</div>\n      \n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n     <div class=\"field-content\">\n       <div class=\"label-container\">\n         <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n           <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n         </label>\n         <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n       </div>    \n       <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n       [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n       </textarea>\n     </div>\n   </div>\n</div>\n\n<!-- RichText -->\n<div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n     <div class=\"field-content\">\n       <div class=\"label-container\">\n         <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n           <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n         </label>\n         <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n       </div>    \n       <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n       [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n       </textarea>\n     </div>\n   </div>\n</div>\n\n<!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n   <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n      <div class=\"field-wrapper\">\n       <div class=\"field-content\">\n         <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>\n      <input type=\"file\" accept=\"image/*\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n    </div>\n  </div>\n</div>\n\n <!-- File -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">\n     <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n     <img  src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n   </div>\n   <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n    </div>\n   </div>\n</div>\n  \n<!-- CheckBox -->\n<div *ngIf=\"field.type === 'Checkbox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n      <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n          <div class=\"label-container\">   \n            <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <div class=\"checkbox-options-container\">\n            <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n              <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.value }}</label>\n            </div>\n          </div>\n        </div>\n      </div>\n</div>   \n\n<!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n       <div class=\"label-container\">   \n                <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <div class=\"radio-options-container\">\n                <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                    <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"  [value]=\"option.value\"\n                        [(ngModel)]=\"field.selectedValue\" class=\"radio-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                    <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n \n<!-- Dropdown -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">   \n          <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <select id=\"options\" class=\"dropdown\"[disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" >\n          <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.value }} </option>\n        </select>\n      </div>\n    </div>\n</div>\n    \n<!--  Table  -->\n  <!-- AP-06MAR25 -->\n<div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n  <div class=\"field-content\">\n     <div class=\"label-container\">   \n      <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n     </div>\n   </div>\n </div>\n</div>\n\n<!-- List -->\n <!-- AP-06MAR25 - List data show-->\n<div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n            <div class=\"label-container\">\n                <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>          \n              <input type=\"text\" class=\"custom-input\" placeholder=\"Search...\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n        </div>\n    </div>\n</div>\n\n  <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n    </div>\n  </div>\n</div> -->\n      \n<!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <button>{{ field.questionText }}</button>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex;border:10px solid #86A8CD;border-right-width:0}.head-elements{font-size:17px}.form-builder{width:33.33%;height:100vh;overflow-y:auto;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;justify-content:space-between}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:100vh}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid blue;background-color:#0000ff1a}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}\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"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n<!-- Form Builder Section All Elements -->\n<div class=\"form-builder\">\n  <!-- Basic Elements Toggle -->\n  <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n    <div class=\"head-elements\">Basic Elements</div>\n    <span class=\"toggle-icon\">{{ sections.basic ? '\u25BC' : '\u25B6' }}</span>\n  </div>\n\n  <div *ngIf=\"sections.basic\">\n    <ng-container *ngFor=\"let element of basicElements\">\n      <div class=\"element\" (click)=\"addElement(element.type)\">\n        <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n        <div class=\"hover-label\">{{ element.label }}</div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Advanced Elements Toggle -->\n  <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n    <div class=\"head-elements\">Advanced Elements</div>\n    <span>{{ sections.advanced ? '\u25BC' : '\u25B6' }}</span>\n  </div>\n  <div *ngIf=\"sections.advanced\">\n    <ng-container *ngFor=\"let element of advancedElements\">\n      <div class=\"element\" (click)=\"addElement(element.type)\">\n        <img src=\"../assets/icons/{{ element.img }}.svg\">\n        <div class=\"hover-label\">{{ element.label }}</div>\n      </div>\n    </ng-container>\n  </div>\n  <!-- SKS10MAR25 footer version show -->\n  <div class=\"sticky-footer-version\">\n    {{version}}\n  </div>\n</div>\n  \n<div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n<!-- AP-10MAR25 Heading -->\n  <div class=\"field-container\" style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px\" (click)=\"selectHeading('Header')\">\n    <div class=\"label-container\" style=\"padding: 10px;\">\n      <div *ngIf=\"book?.records\">\n        <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n        <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n      </div>\n    </div>  \n  </div>\n\n<ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n  \n<!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>  \n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n      <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>    \n      <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n      [class.hidden]=\"field.isHidden\" />\n    </div>\n  </div>\n</div>\n\n<!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n          <div class=\"field-wrapper\">\n            <div class=\"field-content\">\n              <div class=\"label-container\">\n          <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\"  class=\"delete-icon\" />\n        </div>\n        <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n      </div>\n    </div>\n</div>\n\n<!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n          <div class=\"label-container\">\n            <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Label' }} </label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>        \n          <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n                 [class.hidden]=\"field.isHidden\" />\n        </div>\n      </div>\n</div>\n\n<!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>          \n            <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n                   [class.hidden]=\"field.isHidden\"/>\n          </div>\n        </div>\n</div>\n      \n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n     <div class=\"field-content\">\n       <div class=\"label-container\">\n         <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n           <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n         </label>\n         <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n       </div>    \n       <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n       [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n       </textarea>\n     </div>\n   </div>\n</div>\n\n<!-- RichText -->\n<div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n     <div class=\"field-content\">\n       <div class=\"label-container\">\n         <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n           <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n         </label>\n         <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n       </div>    \n       <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n       [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n       </textarea>\n     </div>\n   </div>\n</div>\n\n<!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n   <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n      <div class=\"field-wrapper\">\n       <div class=\"field-content\">\n         <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>\n      <input type=\"file\" accept=\"image/*\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n    </div>\n  </div>\n</div>\n\n <!-- File -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">\n     <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n     <img  src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n   </div>\n   <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n    </div>\n   </div>\n</div>\n  \n<!-- CheckBox -->\n<div *ngIf=\"field.type === 'Checkbox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n      <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n          <div class=\"label-container\">   \n            <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <div class=\"checkbox-options-container\">\n            <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n              <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\"\n              [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.value }}</label>\n            </div>\n          </div>\n        </div>\n      </div>\n</div>   \n\n<!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n       <div class=\"label-container\">   \n                <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <div class=\"radio-options-container\">\n                <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                    <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"  [value]=\"option.value\"\n                        [(ngModel)]=\"field.selectedValue\" class=\"radio-input\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                    <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n \n<!-- Dropdown -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">   \n          <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <select id=\"options\" class=\"dropdown\"[disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" >\n          <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.value }} </option>\n        </select>\n      </div>\n    </div>\n</div>\n    \n<!--  Table  -->\n  <!-- AP-06MAR25 -->\n<div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n  <div class=\"field-content\">\n     <div class=\"label-container\">   \n      <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n     </div>\n   </div>\n </div>\n</div>\n\n<!-- List -->\n <!-- AP-06MAR25 - List data show-->\n<div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n            <div class=\"label-container\">\n                <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>          \n              <input type=\"text\" class=\"custom-input\" placeholder=\"Search...\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n        </div>\n    </div>\n</div>\n\n  <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n    </div>\n  </div>\n</div> -->\n      \n<!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <button>{{ field.questionText }}</button>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex;border:10px solid #86A8CD;border-right-width:0}.head-elements{font-size:17px}.form-builder{width:33.33%;height:100vh;overflow-y:auto;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;justify-content:space-between}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:100vh}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid blue;background-color:#0000ff1a}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}\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"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n<!-- Form Builder Section All Elements -->\n<div class=\"form-builder\">\n  <!-- Basic Elements Toggle -->\n  <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n    <div class=\"head-elements\">Basic Elements</div>\n    <span class=\"toggle-icon\">{{ sections.basic ? '\u25BC' : '\u25B6' }}</span>\n  </div>\n\n  <div *ngIf=\"sections.basic\">\n    <ng-container *ngFor=\"let element of basicElements\">\n      <div class=\"element\" (click)=\"addElement(element.type)\" cdkDrag>\n        <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n        <div class=\"hover-label\">{{ element.label }}</div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Advanced Elements Toggle -->\n  <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n    <div class=\"head-elements\">Advanced Elements</div>\n    <span>{{ sections.advanced ? '\u25BC' : '\u25B6' }}</span>\n  </div>\n  <div *ngIf=\"sections.advanced\">\n    <ng-container *ngFor=\"let element of advancedElements\">\n      <div class=\"element\" (click)=\"addElement(element.type)\">\n        <img src=\"../assets/icons/{{ element.img }}.svg\">\n        <div class=\"hover-label\">{{ element.label }}</div>\n      </div>\n    </ng-container>\n  </div>\n</div>\n  \n<div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n<ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n<!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>  \n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n      <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>    \n      <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n      [class.hidden]=\"field.isHidden\" />\n    </div>\n  </div>\n</div>\n\n<!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n          <div class=\"field-wrapper\">\n            <div class=\"field-content\">\n              <div class=\"label-container\">\n          <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\"  class=\"delete-icon\" />\n        </div>\n        <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n      </div>\n    </div>\n</div>\n\n<!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n          <div class=\"label-container\">\n            <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Label' }} </label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>        \n          <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n                 [class.hidden]=\"field.isHidden\" />\n        </div>\n      </div>\n</div>\n\n<!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>          \n            <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n                   [class.hidden]=\"field.isHidden\"/>\n          </div>\n        </div>\n</div>\n      \n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n     <div class=\"field-content\">\n       <div class=\"label-container\">\n         <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n           <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n         </label>\n         <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n       </div>    \n       <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n       [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n       </textarea>\n     </div>\n   </div>\n</div>\n\n<!-- RichText -->\n<div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n     <div class=\"field-content\">\n       <div class=\"label-container\">\n         <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n           <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n         </label>\n         <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n       </div>    \n       <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n       [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n       </textarea>\n     </div>\n   </div>\n</div>\n\n<!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n   <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n      <div class=\"field-wrapper\">\n       <div class=\"field-content\">\n         <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>\n      <input type=\"file\" accept=\"image/*\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n    </div>\n  </div>\n</div>\n\n <!-- File -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">\n     <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n     <img  src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n   </div>\n   <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n    </div>\n   </div>\n</div>\n  \n<!-- CheckBox -->\n<div *ngIf=\"field.type === 'Checkbox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n      <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n          <div class=\"label-container\">   \n            <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <div class=\"checkbox-options-container\">\n            <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n              <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.value }}</label>\n            </div>\n          </div>\n        </div>\n      </div>\n</div>   \n\n<!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n       <div class=\"label-container\">   \n                <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <div class=\"radio-options-container\">\n                <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                    <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"  [value]=\"option.value\"\n                        [(ngModel)]=\"field.selectedValue\" class=\"radio-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                    <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n \n<!-- Dropdown -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">   \n          <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <select id=\"options\" class=\"dropdown\"[disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" >\n          <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.value }} </option>\n        </select>\n      </div>\n    </div>\n</div>\n    \n<!--  Table  -->\n  <!-- AP-06MAR25 -->\n<div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n  <div class=\"field-content\">\n     <div class=\"label-container\">   \n      <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n     </div>\n   </div>\n </div>\n</div>\n\n<!-- List -->\n <!-- AP-06MAR25 - List data show-->\n<div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n            <div class=\"label-container\">\n                <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>          \n              <input type=\"text\" class=\"custom-input\" placeholder=\"Search...\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n        </div>\n    </div>\n</div>\n\n  <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n    </div>\n  </div>\n</div> -->\n      \n<!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <button>{{ field.questionText }}</button>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex;border:10px solid #86A8CD;border-right-width:0}.head-elements{font-size:17px}.form-builder{width:33.33%;height:100vh;overflow-y:auto;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;justify-content:space-between}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:100vh}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid blue;background-color:#0000ff1a}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}\n"] }]
+            args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n<!-- Form Builder Section All Elements -->\n<div class=\"form-builder\">\n  <!-- Basic Elements Toggle -->\n  <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n    <div class=\"head-elements\">Basic Elements</div>\n    <span class=\"toggle-icon\">{{ sections.basic ? '\u25BC' : '\u25B6' }}</span>\n  </div>\n\n  <div *ngIf=\"sections.basic\">\n    <ng-container *ngFor=\"let element of basicElements\">\n      <div class=\"element\" (click)=\"addElement(element.type)\">\n        <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n        <div class=\"hover-label\">{{ element.label }}</div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Advanced Elements Toggle -->\n  <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n    <div class=\"head-elements\">Advanced Elements</div>\n    <span>{{ sections.advanced ? '\u25BC' : '\u25B6' }}</span>\n  </div>\n  <div *ngIf=\"sections.advanced\">\n    <ng-container *ngFor=\"let element of advancedElements\">\n      <div class=\"element\" (click)=\"addElement(element.type)\">\n        <img src=\"../assets/icons/{{ element.img }}.svg\">\n        <div class=\"hover-label\">{{ element.label }}</div>\n      </div>\n    </ng-container>\n  </div>\n  <!-- SKS10MAR25 footer version show -->\n  <div class=\"sticky-footer-version\">\n    {{version}}\n  </div>\n</div>\n  \n<div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n<!-- AP-10MAR25 Heading -->\n  <div class=\"field-container\" style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px\" (click)=\"selectHeading('Header')\">\n    <div class=\"label-container\" style=\"padding: 10px;\">\n      <div *ngIf=\"book?.records\">\n        <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n        <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n      </div>\n    </div>  \n  </div>\n\n<ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n  \n<!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>  \n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n      <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>    \n      <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n      [class.hidden]=\"field.isHidden\" />\n    </div>\n  </div>\n</div>\n\n<!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n          <div class=\"field-wrapper\">\n            <div class=\"field-content\">\n              <div class=\"label-container\">\n          <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\"  class=\"delete-icon\" />\n        </div>\n        <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n      </div>\n    </div>\n</div>\n\n<!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n          <div class=\"label-container\">\n            <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Label' }} </label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>        \n          <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n                 [class.hidden]=\"field.isHidden\" />\n        </div>\n      </div>\n</div>\n\n<!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>          \n            <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n                   [class.hidden]=\"field.isHidden\"/>\n          </div>\n        </div>\n</div>\n      \n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n     <div class=\"field-content\">\n       <div class=\"label-container\">\n         <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n           <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n         </label>\n         <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n       </div>    \n       <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n       [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n       </textarea>\n     </div>\n   </div>\n</div>\n\n<!-- RichText -->\n<div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n     <div class=\"field-content\">\n       <div class=\"label-container\">\n         <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n           <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n         </label>\n         <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n       </div>    \n       <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n       [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n       </textarea>\n     </div>\n   </div>\n</div>\n\n<!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n   <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n      <div class=\"field-wrapper\">\n       <div class=\"field-content\">\n         <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>\n      <input type=\"file\" accept=\"image/*\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n    </div>\n  </div>\n</div>\n\n <!-- File -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">\n     <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n     <img  src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n   </div>\n   <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n    </div>\n   </div>\n</div>\n  \n<!-- CheckBox -->\n<div *ngIf=\"field.type === 'Checkbox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n      <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n          <div class=\"label-container\">   \n            <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <div class=\"checkbox-options-container\">\n            <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n              <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\"\n              [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.value }}</label>\n            </div>\n          </div>\n        </div>\n      </div>\n</div>   \n\n<!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n       <div class=\"label-container\">   \n                <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <div class=\"radio-options-container\">\n                <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                    <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"  [value]=\"option.value\"\n                        [(ngModel)]=\"field.selectedValue\" class=\"radio-input\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                    <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n \n<!-- Dropdown -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">   \n          <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <select id=\"options\" class=\"dropdown\"[disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" >\n          <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.value }} </option>\n        </select>\n      </div>\n    </div>\n</div>\n    \n<!--  Table  -->\n  <!-- AP-06MAR25 -->\n<div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n  <div class=\"field-content\">\n     <div class=\"label-container\">   \n      <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n     </div>\n   </div>\n </div>\n</div>\n\n<!-- List -->\n <!-- AP-06MAR25 - List data show-->\n<div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n            <div class=\"label-container\">\n                <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>          \n              <input type=\"text\" class=\"custom-input\" placeholder=\"Search...\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n        </div>\n    </div>\n</div>\n\n  <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n    </div>\n  </div>\n</div> -->\n      \n<!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <button>{{ field.questionText }}</button>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex;border:10px solid #86A8CD;border-right-width:0}.head-elements{font-size:17px}.form-builder{width:33.33%;height:100vh;overflow-y:auto;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;justify-content:space-between}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:100vh}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid blue;background-color:#0000ff1a}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { bookletJSON: [{
                 type: Input
             }], bookletId: [{
@@ -10868,6 +10936,9 @@ class PropertiesComponent {
     selectedStyles = []; // Using array since multiple styles can be selected
     errorMessage = '';
     selectedElement = null; // Receive the selected element
+    headerSelect = false;
+    bookId;
+    book;
     onToggleChange(key, event) {
         const checked = event.target.checked;
         this.selectedElement = { ...this.selectedElement, [key]: checked };
@@ -10900,6 +10971,12 @@ class PropertiesComponent {
         return this.selectedElement?.styles?.includes(value) || false;
     }
     elementProperties = {
+        // AP-10MAR25 - Defines the Header element with a text input field   
+        'Header': {
+            elementProps: [
+                { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'title' }
+            ]
+        },
         'Text': {
             elementProps: [
                 // questionText - Label-follow all element properties
@@ -10907,6 +10984,7 @@ class PropertiesComponent {
                 // question - Placeholder-follow all element properties
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
+                { label: 'Order', type: 'number', key: 'order' },
                 { label: '', type: 'toggleGroup', key: 'toggleOptions' },
                 // errorMessage - Error Msg-follow all element properties
                 { label: 'Error Msg', placeholder: 'Enter Text ', type: 'text', key: 'errorMessage' },
@@ -10952,6 +11030,7 @@ class PropertiesComponent {
                 { label: 'Label', placeholder: 'Enter Text ', type: 'text', key: 'questionText' },
                 { label: 'Place Holder', placeholder: 'Enter Text ', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
+                { label: 'Order', type: 'number', key: 'order' },
                 { label: '', type: 'toggleGroup', key: 'toggleOptions' },
                 { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
@@ -10976,6 +11055,7 @@ class PropertiesComponent {
                 { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
+                { label: 'Order', type: 'number', key: 'order' },
                 { label: '', type: 'toggleGroup', key: 'toggleOptions' },
                 { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
@@ -10988,28 +11068,29 @@ class PropertiesComponent {
                 { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
             ]
         },
-        'Time': {
-            elementProps: [
-                { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'label' },
-                { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'placeholder' },
-                { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
-                { label: '', type: 'toggleGroup', key: 'toggleOptions' },
-                { label: 'Field Size', type: 'fieldSize', key: 'size' },
-                { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
-            ],
-            fieldProps: [
-                { label: 'Field Required', type: 'radio' },
-                { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
-                { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
-                { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
-                { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
-            ]
-        },
+        // 'Time': {
+        //   elementProps: [
+        //     { label: 'Label', placeholder: 'Enter Text', type: 'text',key: 'label' },
+        //     { label: 'Place Holder', placeholder: 'Enter Text', type: 'text' , key: 'placeholder'},
+        //     { label: 'Help Text', placeholder: 'Enter Text', type: 'text',key: 'helpText' },
+        //     { label: '', type: 'toggleGroup', key: 'toggleOptions' },
+        //     { label: 'Field Size', type: 'fieldSize', key: 'size' },
+        //     { label: 'Error Msg', placeholder: 'Enter Text', type: 'text',key: 'errorMessage' },
+        //   ],
+        //   fieldProps: [
+        //     { label: 'Field Required', type: 'radio' },
+        //     { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
+        //     { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
+        //     { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
+        //     { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
+        //   ]
+        // },
         'Email': {
             elementProps: [
                 { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
+                { label: 'Order', type: 'number', key: 'order' },
                 { label: '', type: 'toggleGroup', key: 'toggleOptions' },
                 { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
@@ -11027,6 +11108,7 @@ class PropertiesComponent {
                 { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
+                { label: 'Order', type: 'number', key: 'order' },
                 { label: 'Support Type', type: 'select', key: 'supportType', options: [
                         { label: 'Images (JPEG, PNG, GIF)', value: 'image/*', extensions: ['.jpg', '.jpeg', '.png', '.gif'] },
                         { label: 'Audio (MP3, WAV, AIFF)', value: 'audio/*', extensions: ['.mp3', '.wav', '.aiff'] },
@@ -11052,6 +11134,7 @@ class PropertiesComponent {
                 { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
+                { label: 'Order', type: 'number', key: 'order' },
                 { label: '', type: 'toggleGroup', key: 'toggleOptions' },
                 { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
@@ -11069,6 +11152,7 @@ class PropertiesComponent {
                 { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
+                { label: 'Order', type: 'number', key: 'order' },
                 { label: '', type: 'toggleGroup', key: 'toggleOptions' },
                 { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
@@ -11086,6 +11170,7 @@ class PropertiesComponent {
                 { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
+                { label: 'Order', type: 'number', key: 'order' },
                 { label: '', type: 'toggleGroup', key: 'toggleOptions' },
                 { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
@@ -11103,6 +11188,7 @@ class PropertiesComponent {
                 { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
+                { label: 'Order', type: 'number', key: 'order' },
                 { label: '', type: 'toggleGroup', key: 'toggleOptions' },
                 { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
@@ -11120,6 +11206,7 @@ class PropertiesComponent {
                 { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
+                { label: 'Order', type: 'number', key: 'order' },
                 { label: '', type: 'toggleGroup', key: 'toggleOptions' },
                 { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
@@ -11144,6 +11231,7 @@ class PropertiesComponent {
                 { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
+                { label: 'Order', type: 'number', key: 'order' },
                 { label: '', type: 'toggleGroup', key: 'toggleOptions' },
                 { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
@@ -11161,6 +11249,7 @@ class PropertiesComponent {
                 { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
+                { label: 'Order', type: 'number', key: 'order' },
                 { label: '', type: 'toggleGroup', key: 'toggleOptions' },
                 { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
@@ -11185,6 +11274,7 @@ class PropertiesComponent {
                 { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
+                { label: 'Order', type: 'number', key: 'order' },
                 { label: '', type: 'toggleGroup', key: 'toggleOptions' },
                 { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
@@ -11201,6 +11291,7 @@ class PropertiesComponent {
             elementProps: [
                 { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
+                { label: 'Order', type: 'number', key: 'order' },
                 { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' }
             ],
@@ -11211,54 +11302,71 @@ class PropertiesComponent {
                 { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' },
             ]
         },
-        'Book': {
-            elementProps: [
-                { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
-                { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
-                { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
-                { label: '', type: 'toggleGroup', key: 'toggleOptions' },
-                { label: 'Field Size', type: 'fieldSize', key: 'size' },
-                { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
-            ],
-            fieldProps: [
-                { label: 'Field Required', type: 'radio' },
-                { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
-                { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
-                { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
-                { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
-            ]
-        },
-        'Button': {
-            elementProps: [
-                { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
-                { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
-                { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
-                { label: '', type: 'toggleGroup', key: 'toggleOptions' },
-                { label: 'Field Size', type: 'fieldSize', key: 'size' },
-                { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
-            ],
-            fieldProps: [
-                { label: 'Field Required', type: 'radio' },
-                { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
-                { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
-                { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
-                { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
-            ]
-        },
+        //   'Book': {
+        //     elementProps: [
+        //       { label: 'Label', placeholder: 'Enter Text', type: 'text',key: 'questionText' },
+        //       { label: 'Place Holder', placeholder: 'Enter Text', type: 'text' , key: 'question'},
+        //       { label: 'Help Text', placeholder: 'Enter Text', type: 'text',key: 'helpText' },
+        //       { label: '', type: 'toggleGroup', key: 'toggleOptions' },
+        //       { label: 'Field Size', type: 'fieldSize', key: 'size' },
+        //       { label: 'Error Msg', placeholder: 'Enter Text', type: 'text',key: 'errorMessage' },
+        //     ],
+        //     fieldProps: [
+        //       { label: 'Field Required', type: 'radio' },
+        //       { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
+        //       { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
+        //       { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
+        //       { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
+        //     ]
+        //   },
+        //   'Button': {
+        //     elementProps: [
+        //       { label: 'Label', placeholder: 'Enter Text', type: 'text',key: 'questionText' },
+        //       { label: 'Place Holder', placeholder: 'Enter Text', type: 'text' , key: 'question'},
+        //       { label: 'Help Text', placeholder: 'Enter Text', type: 'text',key: 'helpText' },
+        //       { label: '', type: 'toggleGroup', key: 'toggleOptions' },
+        //       { label: 'Field Size', type: 'fieldSize', key: 'size' },
+        //       { label: 'Error Msg', placeholder: 'Enter Text', type: 'text',key: 'errorMessage' },
+        //     ],
+        //     fieldProps: [
+        //       { label: 'Field Required', type: 'radio' },
+        //       { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
+        //       { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
+        //       { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
+        //       { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
+        //     ]
+        //   },
     };
     constructor(http, formBuilderService) {
         this.http = http;
         this.formBuilderService = formBuilderService;
     }
     ngOnInit() {
+        //AP-10MAR25 Subscribes to header selection changes and updates the selected element  
+        this.formBuilderService.selectHeaderSubject$.subscribe(header => {
+            if (header) {
+                if (!this.selectedElement) {
+                    this.selectedElement = {};
+                }
+                this.selectedElement['type'] = header;
+                this.headerSelect = true;
+                this.book = this.formBuilderService.getBook();
+                this.bookId = this.book.records[0].id;
+            }
+        });
         this.formBuilderService.selectedElement$.subscribe(index => {
             this.selectedElementIndex = index;
+            this.headerSelect = false;
             if (index >= 0) {
                 const elements = this.formBuilderService.getElements();
                 this.selectedElement = elements[index];
             }
         });
     }
+    //AP-10MAR25 Updates the title using the form builder service  
+    updateTitle(event) {
+        this.formBuilderService.updateTitle(event);
+    }
     validateInput(value, type) {
         if (type === 'label' || type === 'placeholder') {
             const regex = /^[a-zA-Z0-9\s]*$/;
@@ -11277,6 +11385,16 @@ class PropertiesComponent {
                     return;
                 }
             }
+            if (key === 'order') {
+                //AP-10MAR25 Convert the value to an integer  
+                const newOrder = parseInt(value, 10);
+                if (isNaN(newOrder))
+                    return;
+                //AP-10MAR25 Update the element's order in the form builder service  
+                this.formBuilderService.updateElement(this.selectedElementIndex, { order: newOrder });
+                //AP-10MAR25 Sort elements based on the updated order  
+                this.formBuilderService.sortElementsByOrder();
+            }
             if (key === 'fontWeight') {
                 // Extract just the number value from the option
                 value = value.split('-')[0];
@@ -11319,6 +11437,12 @@ class PropertiesComponent {
     getProperties() {
         if (!this.selectedElement)
             return null;
+        // AP-10MAR25 Retrieve the latest book data
+        this.book = this.formBuilderService.getBook();
+        // AP-10MAR25 If the selected element is a 'Header', return its properties
+        if (this.selectedElement.type === 'Header') {
+            return this.elementProperties['Header'];
+        }
         return this.elementProperties[this.selectedElement.type];
     }
     addOption(options) {
@@ -11334,11 +11458,11 @@ class PropertiesComponent {
         this.formButtonHandler.emit(this.formBuilderService.downloadElement());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, deps: [{ token: i1$1.HttpClient }, { token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n<div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n  <h1 class=\"header-title\">Properties</h1>\n  <!-- AP 25FEB25 - not used -->\n  <!-- <div class=\"menu-container\">\n    <div class=\"menu-item\" (click)=\"download()\">\n      <span >Download</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Start</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Path</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Clone</span>\n    </div>\n  </div> -->\n</div>\n\n<div class=\"all-properties\">\n<div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n <!-- AP-06MAR25 Select element type show -->\n<details class=\"first-properties\" open>\n  <summary class=\"text-sm \">Elements Properties</summary>\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\n      {{selectedElement.type}}\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"flex-items-center\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n            type=\"text\"\n            [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\"\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\n            [class.read-only]=\"selectedElement.readOnly\"\n            [readonly]=\"selectedElement.readOnly\"\n            class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n    (change)=\"updateProperty('font', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n  </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n  </select>\n</div>\n        \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n  <div class=\"toggle-item\">\n    <span class=\"toggle-label\">Read Only</span>\n    <label class=\"switch\">\n      <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\" \n             (change)=\"onToggleChange('isReadOnly', $event)\" />\n      <span class=\"slider\"></span>\n    </label>\n  </div>\n\n  <div class=\"toggle-item\">\n    <span class=\"toggle-label\">Is Hide</span>\n    <label class=\"switch\">\n      <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\" \n             (change)=\"onToggleChange('isHidden', $event)\" />\n      <span class=\"slider\"></span>\n    </label>\n  </div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n  [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n  <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n  </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\n  <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n  [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n   <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n  </button>\n</div>\n\n<!-- Field Size Controls -->\n<!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n  <div class=\"size-group\">\n    <label  class=\"size-label\">Width</label>\n    <div class=\"value-container\">\n    <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n  </div>\n  </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n <!-- AP-06MAR25 Show elements ID  -->\n<details class=\"second-property\">\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n    <div style=\"font-size: 13px; padding:5px;border-radius:3px;background-color:#eff8ff;\"> id : {{selectedElement.id}}</div>\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n      <div class=\"flex-items-center \">\n        <label class=\"text-sm\">{{ prop.label }}</label>\n        <div class=\"input-box-field\">\n          <!-- Input Box -->\n          <div class=\"input-box-field\">\n            <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement[prop.key]\"\n              (input)=\"updateProperty(prop.key, $event.target.value)\"/> </div>\n              \n          <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n  <div class=\"sizes\">\n    <div class=\"flex-gap\">\n    <div class=\"flex-items\">\n      <input type=\"radio\" [checked]=\"selectedElement?.isRequired\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n      <label class=\"text-label\"> Required </label>\n    </div>\n    <div class=\"flex-items\">\n      <input type=\"radio\" [checked]=\"!selectedElement?.isRequired\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n      <label class=\"text-sm text-gray-400\"> Not Required </label>\n    </div>\n  </div>\n</div>\n</div> \n\n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n  <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n    <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].value\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n  </div>\n  <button (click)=\"addOption(selectedElement[prop.key])\">\n    <div class=\"add-varient\">\n      <span class=\"text-lg\">+</span>\n      <span>Add</span>\n    </div>\n  </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<div class=\"design-footer\">\n  <button class=\"btn\">Cancel</button>\n  <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:100vh;overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}\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"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n<div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n  <h1 class=\"header-title\">Properties</h1>\n  <!-- AP 25FEB25 - not used -->\n  <!-- <div class=\"menu-container\">\n    <div class=\"menu-item\" (click)=\"download()\">\n      <span >Download</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Start</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Path</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Clone</span>\n    </div>\n  </div> -->\n</div>\n\n<div class=\"all-properties\">\n<div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n <!-- AP-06MAR25 Select element type show -->\n<details class=\"first-properties\" open>\n  <summary class=\"text-sm \">Elements Properties</summary>\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\n      {{selectedElement.type}}\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"flex-items-center\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" [value]=\"headerSelect ? book.records[0].title : selectedElement[prop.key]\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : updateProperty(prop.key, $event.target.value)\" [class.read-only]=\"selectedElement.readOnly\"\n  [readonly]=\"selectedElement.readOnly\" class=\"text-sm1 \"/>\n  \n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n    (change)=\"updateProperty('font', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n  </select>\n</div>\n<input *ngIf=\"prop.key === 'order'\" type=\"number\" [value]=\"selectedElement.order\"\n       (input)=\"updateProperty('order', $event.target.value)\" />\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n  </select>\n</div>\n        \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n  <div class=\"toggle-item\">\n    <span class=\"toggle-label\">Read Only</span>\n    <label class=\"switch\">\n      <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\" \n             (change)=\"onToggleChange('isReadOnly', $event)\" />\n      <span class=\"slider\"></span>\n    </label>\n  </div>\n\n  <div class=\"toggle-item\">\n    <span class=\"toggle-label\">Is Hide</span>\n    <label class=\"switch\">\n      <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\" \n             (change)=\"onToggleChange('isHidden', $event)\" />\n      <span class=\"slider\"></span>\n    </label>\n  </div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n  [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n  <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n  </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\n  <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n  [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n   <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n  </button>\n</div>\n\n<!-- Field Size Controls -->\n<!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n  <div class=\"size-group\">\n    <label  class=\"size-label\">Width</label>\n    <div class=\"value-container\">\n    <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n  </div>\n  </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n <!-- AP-06MAR25 Show elements ID  -->\n<details class=\"second-property\">\n<summary class=\"text-font-medium\">Field Elements Properties</summary>\n<div class=\"space-y-4\" *ngIf=\"getProperties()\">\n<div style=\"font-size: 13px; padding:5px;border-radius:3px;background-color:#eff8ff;\"> id : {{ headerSelect ? bookId : selectedElement.id}}</div>\n<ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n<div class=\"flex-items-center \">\n  <label class=\"text-sm\">{{ prop.label }}</label>\n\n   <!-- Input Box -->\n   <div class=\"input-box-field\">\n            <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement[prop.key]\"\n              (input)=\"updateProperty(prop.key, $event.target.value)\"/> \n   </div>\n              \n   <!-- Radio Group -->\n   <div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n    <div class=\"sizes\">\n      <div class=\"flex-gap\">\n      <div class=\"flex-items\">\n      <input type=\"radio\" [checked]=\"selectedElement?.isRequired\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n      <label class=\"text-label\"> Required </label>\n    </div>\n    <div class=\"flex-items\">\n      <input type=\"radio\" [checked]=\"!selectedElement?.isRequired\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n      <label class=\"text-sm text-gray-400\"> Not Required </label>\n    </div>\n  </div>\n    </div>\n   </div> \n\n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n  <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n    <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].value\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n  </div>\n  <button (click)=\"addOption(selectedElement[prop.key])\">\n    <div class=\"add-varient\">\n      <span class=\"text-lg\">+</span>\n      <span>Add</span>\n    </div>\n  </button>\n</div>\n  \n</div>\n</ng-container>\n</div>\n</details>\n\n<div class=\"design-footer\">\n  <button class=\"btn\">Cancel</button>\n  <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:100vh;overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}\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"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n<div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n  <h1 class=\"header-title\">Properties</h1>\n  <!-- AP 25FEB25 - not used -->\n  <!-- <div class=\"menu-container\">\n    <div class=\"menu-item\" (click)=\"download()\">\n      <span >Download</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Start</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Path</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Clone</span>\n    </div>\n  </div> -->\n</div>\n\n<div class=\"all-properties\">\n<div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n <!-- AP-06MAR25 Select element type show -->\n<details class=\"first-properties\" open>\n  <summary class=\"text-sm \">Elements Properties</summary>\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\n      {{selectedElement.type}}\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"flex-items-center\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n            type=\"text\"\n            [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\"\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\n            [class.read-only]=\"selectedElement.readOnly\"\n            [readonly]=\"selectedElement.readOnly\"\n            class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n    (change)=\"updateProperty('font', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n  </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n  </select>\n</div>\n        \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n  <div class=\"toggle-item\">\n    <span class=\"toggle-label\">Read Only</span>\n    <label class=\"switch\">\n      <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\" \n             (change)=\"onToggleChange('isReadOnly', $event)\" />\n      <span class=\"slider\"></span>\n    </label>\n  </div>\n\n  <div class=\"toggle-item\">\n    <span class=\"toggle-label\">Is Hide</span>\n    <label class=\"switch\">\n      <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\" \n             (change)=\"onToggleChange('isHidden', $event)\" />\n      <span class=\"slider\"></span>\n    </label>\n  </div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n  [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n  <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n  </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\n  <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n  [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n   <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n  </button>\n</div>\n\n<!-- Field Size Controls -->\n<!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n  <div class=\"size-group\">\n    <label  class=\"size-label\">Width</label>\n    <div class=\"value-container\">\n    <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n  </div>\n  </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n <!-- AP-06MAR25 Show elements ID  -->\n<details class=\"second-property\">\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n    <div style=\"font-size: 13px; padding:5px;border-radius:3px;background-color:#eff8ff;\"> id : {{selectedElement.id}}</div>\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n      <div class=\"flex-items-center \">\n        <label class=\"text-sm\">{{ prop.label }}</label>\n        <div class=\"input-box-field\">\n          <!-- Input Box -->\n          <div class=\"input-box-field\">\n            <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement[prop.key]\"\n              (input)=\"updateProperty(prop.key, $event.target.value)\"/> </div>\n              \n          <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n  <div class=\"sizes\">\n    <div class=\"flex-gap\">\n    <div class=\"flex-items\">\n      <input type=\"radio\" [checked]=\"selectedElement?.isRequired\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n      <label class=\"text-label\"> Required </label>\n    </div>\n    <div class=\"flex-items\">\n      <input type=\"radio\" [checked]=\"!selectedElement?.isRequired\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n      <label class=\"text-sm text-gray-400\"> Not Required </label>\n    </div>\n  </div>\n</div>\n</div> \n\n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n  <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n    <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].value\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n  </div>\n  <button (click)=\"addOption(selectedElement[prop.key])\">\n    <div class=\"add-varient\">\n      <span class=\"text-lg\">+</span>\n      <span>Add</span>\n    </div>\n  </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<div class=\"design-footer\">\n  <button class=\"btn\">Cancel</button>\n  <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:100vh;overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}\n"] }]
+            args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n<div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n  <h1 class=\"header-title\">Properties</h1>\n  <!-- AP 25FEB25 - not used -->\n  <!-- <div class=\"menu-container\">\n    <div class=\"menu-item\" (click)=\"download()\">\n      <span >Download</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Start</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Path</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Clone</span>\n    </div>\n  </div> -->\n</div>\n\n<div class=\"all-properties\">\n<div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n <!-- AP-06MAR25 Select element type show -->\n<details class=\"first-properties\" open>\n  <summary class=\"text-sm \">Elements Properties</summary>\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\n      {{selectedElement.type}}\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"flex-items-center\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" [value]=\"headerSelect ? book.records[0].title : selectedElement[prop.key]\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : updateProperty(prop.key, $event.target.value)\" [class.read-only]=\"selectedElement.readOnly\"\n  [readonly]=\"selectedElement.readOnly\" class=\"text-sm1 \"/>\n  \n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n    (change)=\"updateProperty('font', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n  </select>\n</div>\n<input *ngIf=\"prop.key === 'order'\" type=\"number\" [value]=\"selectedElement.order\"\n       (input)=\"updateProperty('order', $event.target.value)\" />\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n  </select>\n</div>\n        \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n  <div class=\"toggle-item\">\n    <span class=\"toggle-label\">Read Only</span>\n    <label class=\"switch\">\n      <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\" \n             (change)=\"onToggleChange('isReadOnly', $event)\" />\n      <span class=\"slider\"></span>\n    </label>\n  </div>\n\n  <div class=\"toggle-item\">\n    <span class=\"toggle-label\">Is Hide</span>\n    <label class=\"switch\">\n      <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\" \n             (change)=\"onToggleChange('isHidden', $event)\" />\n      <span class=\"slider\"></span>\n    </label>\n  </div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n  [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n  <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n  </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\n  <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n  [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n   <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n  </button>\n</div>\n\n<!-- Field Size Controls -->\n<!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n  <div class=\"size-group\">\n    <label  class=\"size-label\">Width</label>\n    <div class=\"value-container\">\n    <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n  </div>\n  </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n <!-- AP-06MAR25 Show elements ID  -->\n<details class=\"second-property\">\n<summary class=\"text-font-medium\">Field Elements Properties</summary>\n<div class=\"space-y-4\" *ngIf=\"getProperties()\">\n<div style=\"font-size: 13px; padding:5px;border-radius:3px;background-color:#eff8ff;\"> id : {{ headerSelect ? bookId : selectedElement.id}}</div>\n<ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n<div class=\"flex-items-center \">\n  <label class=\"text-sm\">{{ prop.label }}</label>\n\n   <!-- Input Box -->\n   <div class=\"input-box-field\">\n            <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement[prop.key]\"\n              (input)=\"updateProperty(prop.key, $event.target.value)\"/> \n   </div>\n              \n   <!-- Radio Group -->\n   <div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n    <div class=\"sizes\">\n      <div class=\"flex-gap\">\n      <div class=\"flex-items\">\n      <input type=\"radio\" [checked]=\"selectedElement?.isRequired\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n      <label class=\"text-label\"> Required </label>\n    </div>\n    <div class=\"flex-items\">\n      <input type=\"radio\" [checked]=\"!selectedElement?.isRequired\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n      <label class=\"text-sm text-gray-400\"> Not Required </label>\n    </div>\n  </div>\n    </div>\n   </div> \n\n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n  <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n    <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].value\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n  </div>\n  <button (click)=\"addOption(selectedElement[prop.key])\">\n    <div class=\"add-varient\">\n      <span class=\"text-lg\">+</span>\n      <span>Add</span>\n    </div>\n  </button>\n</div>\n  \n</div>\n</ng-container>\n</div>\n</details>\n\n<div class=\"design-footer\">\n  <button class=\"btn\">Cancel</button>\n  <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:100vh;overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { formButtonHandler: [{
                 type: Output
             }], selectedElementType: [{