@rangertechnologies/ngnxt 2.1.98 → 2.1.100

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -10478,10 +10478,10 @@ class FormBuilderService {
     selectedElementSubject = new BehaviorSubject(-1);
     elementComponent = null;
     book;
-    formElements$ = this.formElementsSubject.asObservable();
-    selectedElement$ = this.selectedElementSubject.asObservable();
     unique_id;
     tempElem;
+    formElements$ = this.formElementsSubject.asObservable();
+    selectedElement$ = this.selectedElementSubject.asObservable();
     // book: { bookQuestionsMap: { unique_id: { subQuestions: any[]; }; }; };
     constructor() {
         // Load saved elements from localStorage
@@ -10494,6 +10494,11 @@ class FormBuilderService {
             this.unique_id = localStorage.getItem('unique_id');
         }
     }
+    // AP 26FEB25 - clear the form elements 
+    clearElements() {
+        this.formElements = [];
+        this.formElementsSubject.next([...this.formElements]);
+    }
     // Get the element component reference
     getElementComponent() {
         return this.elementComponent;
@@ -10503,6 +10508,9 @@ class FormBuilderService {
     }
     // Add a new element to the form
     addElement(element) {
+        if (!element.options) {
+            element.options = []; // options is initialized
+        }
         // const savedFormElements = localStorage.getItem('formElements');
         if (this.formElements.length == 0) {
             // this.formElements = JSON.parse(savedFormElements);
@@ -10535,14 +10543,15 @@ class FormBuilderService {
         }
         this.formElements.push(element);
         // localStorage.setItem('formElements', JSON.stringify(this.formElements));
-        // this.formElementsSubject.next([...this.formElements]);
+        this.formElementsSubject.next([...this.formElements]);
     }
     updateElement(index, updates) {
         const elements = [...this.getElements()];
         if (elements[index]) {
             elements[index] = {
                 ...elements[index],
-                ...updates
+                ...updates,
+                options: updates.options || elements[index].options || [],
             };
             this.formElementsSubject.next(elements);
         }
@@ -10573,19 +10582,23 @@ class FormBuilderService {
         this.selectedElementSubject.next(index);
     }
     getElements() {
-        return this.formElements;
+        return this.formElements.map(element => ({
+            ...element,
+            options: element.options || [],
+        }));
     }
+    // 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') {
-                // Initialize the array if it doesn't exist
-                if (!tempElement[element.id]) {
-                    tempElement[element.id] = [];
-                }
-                // Push the current element into the array
-                tempElement[element.id].push(element);
+                //AP 25FEB25 - Store the entire question with its options under its ID
+                tempElement[element.id] = {
+                    ...element,
+                    options: element.options || []
+                };
             }
         });
         this.book.bookQuestionsMap[this.unique_id]['sqOptions'] = tempElement;
@@ -10623,47 +10636,74 @@ class ElementComponent {
     bookletId;
     dropdownOpen = false; // Tracks whether the dropdown is open or closed
     field;
-    // Toggle dropdown visibilitys
-    toggleDropdown() {
-        this.dropdownOpen = !this.dropdownOpen;
-    }
-    // Select an option from the dropdown
-    selectOption(option) {
-        this.field.selectedOption = option;
-        this.dropdownOpen = false; // Close the dropdown after selecting an option
-    }
     formElements = [];
+    elements = [];
     constructor(formBuilderService) {
         this.formBuilderService = formBuilderService;
     }
     ngOnInit() {
-        // Subscribe to the formElements$ observable
+        this.elements = [
+            { "type": "Calendar", "img": "Calendar", "label": "Calendar" },
+            { "type": "CheckBox", "img": "CheckBox", "label": "CheckBox" },
+            { "type": "Email", "img": "Email", "label": "Email" },
+            { "type": "File", "img": "File", "label": "File" },
+            { "type": "Image", "img": "Image", "label": "Image" },
+            { "type": "Number", "img": "Number", "label": "Number" },
+            { "type": "List", "img": "List", "label": "List" },
+            { "type": "Radio", "img": "Radio", "label": "Radio" },
+            { "type": "Text", "img": "Text", "label": "Text" },
+            { "type": "Tables", "img": "Table", "label": "Table" },
+            { "type": "Dropdown", "img": "Drop", "label": "Dropdown" },
+            { "type": "TextArea", "img": "TextArea", "label": "TextArea" },
+            { "type": "Label", "img": "Label", "label": "Label" },
+            { "type": "Book", "img": "Book", "label": "Book" },
+            { "type": "Button", "img": "Button", "label": "Button" }
+        ];
         this.formBuilderService.formElements$.subscribe((elements) => {
-            this.formElements = elements; // Update the local array with the latest data
+            this.formElements = elements;
         });
         if (this.bookletJSON) {
-            // AP-23JAN25 - empty string to clear the local storage
-            localStorage.setItem('status', ("edit"));
-            localStorage.setItem('unique_id', (this.bookletId));
-            this.formElements = [];
-            this.bookletJSON.bookQuestionsMap[this.bookletId].subQuestions.forEach(newElement => {
-                this.formBuilderService.addElement(newElement);
-                this.formElements = this.formBuilderService.getElements();
-            });
+            this.initializeForm();
         }
         else {
-            localStorage.setItem('status', ("new"));
+            localStorage.setItem('status', "new");
+        }
+    }
+    // AP - 26FEB25 - Added ngOnChanges to handle changes in bookletJSON
+    ngOnChanges(changes) {
+        if (changes['bookletJSON'] && changes['bookletJSON'].currentValue) {
+            this.initializeForm();
+            console.log('changes', changes);
         }
     }
+    initializeForm() {
+        localStorage.setItem('status', "edit");
+        localStorage.setItem('unique_id', this.bookletId);
+        this.formElements = [];
+        this.formBuilderService.clearElements();
+        const bookQuestionsMapKeys = Object.keys(this.bookletJSON.bookQuestionsMap || {});
+        // Assign the first key from bookQuestionsMap to bookletId
+        this.bookletId = bookQuestionsMapKeys[0];
+        this.bookletJSON.bookQuestionsMap[this.bookletId].subQuestions.forEach(newElement => {
+            if (this.bookletJSON.sqOptions && this.bookletJSON.sqOptions[newElement.id]) {
+                newElement.options = this.bookletJSON.sqOptions[newElement.id].options;
+            }
+            this.formBuilderService.addElement(newElement);
+        });
+        this.formElements = this.formBuilderService.getElements();
+    }
     drop(event) {
         moveItemInArray(this.formElements, event.previousIndex, event.currentIndex);
     }
     // Add this method to handle element selection
     selectElement(index) {
+        this.selectedFieldIndex = index;
         this.formBuilderService.setSelectedElement(index);
         const element = this.formElements[index];
-        this.elementButtonClicked.emit(element.type); // Emit the type when selecting
+        this.elementButtonClicked.emit(element.type);
     }
+    selectedIndex = null;
+    selectedFieldIndex = null;
     addElement(type) {
         const unique_id = v4();
         const newElement = {
@@ -10704,19 +10744,11 @@ class ElementComponent {
             qbReferenceQuestions: '',
             questionBookSubTitle: '',
             style: '',
-            options: type === 'CheckBox' || type === 'Radio' || type === 'Dropdown' ? [
-                { label: 'Option 1', value: '', type: 'text', key: 'option1' }
-            ] : null,
+            options: type === 'Dropdown' || type === 'Radio' || type === 'CheckBox' ? [] : null,
         };
         this.formBuilderService.addElement(newElement);
         this.formElements = this.formBuilderService.getElements();
     }
-    addOption(options) {
-        options.push({ label: `Option ${options.length + 1}`, value: '' });
-    }
-    removeOption(options, index) {
-        options.splice(index, 1);
-    }
     // Remove an element by index
     removeElement(field, index) {
         this.formBuilderService.removeElementComponent(field.id);
@@ -10726,10 +10758,11 @@ class ElementComponent {
         const styles = {
             'font-family': field.font || 'Helvetica Neue',
             'font-weight': field.fontWeight || '400',
-            'width': `${(field.width || 12) / 12 * 100}%`,
-            'height': `${field.height || 91}px`,
+            'width': `${(field.size || 12) / 12 * 100}%`,
+            'min-height': field.height ? `${field.height}px` : 'auto',
             'text-align': field.textAlign || 'left',
-            'border-radius': '5px'
+            'border-radius': '5px',
+            'margin-bottom': '10px'
         };
         // Handle array of style classes
         if (field.styles && Array.isArray(field.styles)) {
@@ -10752,11 +10785,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" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<div class=\"center-frame\">\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\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         <!-- AP-29JAN25 remove empty classes -->\n          <!-- TextBox -->\n          <div *ngIf=\"field.type === 'Text'\"  style=\"padding: 10px;\n          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 : 'lable' }}</label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div>\n            <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n          </div>\n        </div>\n          </div>\n\n          <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\"  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\">\n      <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n    </div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <div class=\"checkbox-container\" style=\"width:100%; background-color:#ffff\">\n          <div>\n              <input type=\"checkbox\" name=\"option1\" value=\"1\"> Option 1    \n          </div>\n        \n      </div>\n    </div>\n  </div>\n</div>\n  <!-- AP-29JAN25 drop-down design check -->\n   <!-- Dropdown Field -->\n   <div *ngIf=\"field.type === 'Dropdown'\"  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 : 'lable' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n        </div>\n    <select id=\"options\" class=\"dropdown\">\n        <option value=\"option1\">Option 1</option>\n        <option value=\"option2\">Option 2</option>\n        <option value=\"option3\">Option 3</option>\n    </select>\n    </div>\n    </div>\n</div>\n\n         <!-- Calendar -->\n<div *ngIf=\"['Calendar'].includes(field.type)\"  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 : 'Select Date' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n    </div>\n  </div>\n</div>\n\n         <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\"  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 : 'label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n    </div>\n  </div>\n</div>\n\n          <!-- Numbers -->\n<div *ngIf=\"field.type === 'Numbers'\"  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 : 'label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n    </div>\n  </div>\n</div>\n          <!-- List -->\n    <!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <label>{{ field.questionText }}</label>\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n\n         <!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\"  style=\"padding: 10px; background-color: whitesmoke; height:150px; width:100%\" (click)=\"selectElement(i)\"  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\">\n          {{ 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)\" />\n      </div>\n      <textarea\n        [placeholder]=\"field.question || 'Enter detailed text here...'\"\n        [style.height.px]=\"field.size || 100\"\n        [style.width.%]=\"100\"\n        [readonly]=\"field.readOnly\"\n        [class.hidden]=\"field.isHide\"\n        [(ngModel)]=\"field.text\">\n      </textarea>\n    </div>\n  </div>\n</div>\n\n<!-- AP-29JAN25 radio-button design check -->\n<!-- Radio -->\n          <div *ngIf=\"field.type === 'Radio'\" 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\">\n                <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n              </div>\n              <div style=\"width: 97%;\">\n                <div class=\"flex lab-conatiner\">\n                  <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n                </div>\n                <div class=\"radio-options\" style=\"display: flex;\">\n                  <div *ngFor=\"let option of field.options\" class=\"radio-item\" style=\"margin-right: 15px;\">\n                    <label>\n                      <input type=\"radio\" name=\"{{ field.questionText }}\" [(ngModel)]=\"field.value\" [value]=\"option\" />\n                      <span>{{ option }}</span>\n                    </label>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>   \n\n          <!-- AP-29JAN25 Image design change -->\n          <!-- Image -->\n<div *ngIf=\"field.type === 'Image'\"  style=\"padding: 10px; background-color: whitesmoke;\" \n     (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>\n    </div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-container\">\n        <label [class.required]=\"field.required\">\n          {{ field.questionText ? field.questionText : 'Upload Image' }}\n        </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"file\" accept=\"image/*\" style=\"background-color: #ffff;\"/>\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          <!-- File -->\n           <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" 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\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n</div>\n<div style=\"width: 97%;\">\n <div class=\"flex lab-container\">\n   <label [class.required]=\"field.required\">\n     {{ field.questionText ? field.questionText : 'Upload File' }}\n   </label>\n   <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" style=\"background-color: #ffff;\"/>\n</div>\n</div>\n</div>\n\n<!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n  <label>{{ field.questionText }}</label>\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n  </table>\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\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          <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\"  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 : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <!-- No input box here -->\n    </div>\n  </div>\n</div>\n</ng-container>\n      </div>\n      <!-- Form Builder Section All Elements -->\n      <div class=\"form-builder\">\n        <div class=\"element\" (click)=\"addElement('Calendar')\">\n          <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\n          <div class=\"hover-label\">Calendar</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('CheckBox')\">\n          <img src=\"../assets/icons/CheckBox.svg\">\n          <div class=\"hover-label\">Check Box</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Email')\">\n          <img src=\"../assets/icons/Email.svg\">\n          <div class=\"hover-label\">Email</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('File')\">\n          <img src=\"../assets/icons/File.svg\">\n          <div class=\"hover-label\">File</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('List')\">\n          <img src=\"../assets/icons/List.svg\">\n          <div class=\"hover-label\">List</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Tables')\">\n          <img src=\"../assets/icons/Table.svg\">\n          <div class=\"hover-label\">Tables</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Text')\">\n          <img src=\"../assets/icons/Text.svg\">\n          <div class=\"hover-label\">Text Box</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('TextArea')\">\n          <img src=\"../assets/icons/TextArea.svg\">\n          <div class=\"hover-label\">Text Area</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Numbers')\">\n          <img src=\"../assets/icons/Number.svg\">\n          <div class=\"hover-label\">Numbers</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Dropdown')\">\n          <img src=\"../assets/icons/Drop.svg\">\n          <div class=\"hover-label\">Dropdown</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Image')\">\n          <img src=\"../assets/Image.svg\">\n          <div class=\"hover-label\">Image</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Radio')\">\n          <img src=\"../assets/icons/Radio.svg\">\n          <div class=\"hover-label\">Radio</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Label')\">\n          <img src=\"../assets/icons/Label.svg\">\n          <div class=\"hover-label\">Label</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Book')\">\n          <img src=\"../assets/icons/Book.svg\">\n          <div class=\"hover-label\">Book</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Button')\">\n          <img src=\"../assets/icons/Button.svg\">\n          <div class=\"hover-label\">Button</div>\n        </div>\n      </div>\n\n  </div>\n\n\n\n\n", styles: [".center-frame{padding:26px;box-sizing:border-box;background-color:#edf1f5}.form-builder{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:85vh;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.dropdown{width:100%;padding:8px;font-size:16px;cursor:pointer}.dropdown:focus{border-color:#007bff;outline:none}input{width:100%}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame row\">\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=\"col-md-3 form-builder\">\n    <ng-container *ngFor=\"let element of elements\">\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  \n<div class=\"col-md-6 form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n  <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n  <!-- AP-29JAN25 remove empty classes -->\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.required\">{{ 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\" [(ngModel)]=\"field.text\" />\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.required\">{{ 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            <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n          </div>\n        </div>\n      </div>\n    </div>\n</div>  \n\n  <!-- AP-29JAN25 radio-button design check -->\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.required\">{{ 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\">\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  <!-- AP-29JAN25 drop-down design check -->\n  <!-- Dropdown Field -->\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.required\">{{ 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\">\n          <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.value }} </option>\n        </select>\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.required\">{{ 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\" [(ngModel)]=\"field.date\" />\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.required\"> {{ 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\" [(ngModel)]=\"field.email\" />\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.required\">{{ 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\" [(ngModel)]=\"field.value\" />\n         </div>\n       </div>\n</div>\n     \n  <!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <label>{{ field.questionText }}</label>\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n\n <!-- TextArea -->\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.required\">{{ 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.readOnly\" [class.hidden]=\"field.isHide\" [(ngModel)]=\"field.text\">\n      </textarea>\n    </div>\n  </div>\n</div>\n\n<!-- AP-29JAN25 Image design change -->\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.required\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"file\" accept=\"image/*\" class=\"custom-input\" />\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  <!-- File -->\n  <!-- AP-29JAN25 file design change -->\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.required\">{{ 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\" />\n  </div>\n </div>\n</div>\n\n  <!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n  <label>{{ field.questionText }}</label>\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n  </table>\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\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  <!-- 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.required\">{{ 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</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".form-builder{width:250px;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:#e9ecef;cursor:pointer;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:14px;font-weight:500;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}.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{overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start}.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:16px;font-weight:600}.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}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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<div class=\"center-frame\">\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\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         <!-- AP-29JAN25 remove empty classes -->\n          <!-- TextBox -->\n          <div *ngIf=\"field.type === 'Text'\"  style=\"padding: 10px;\n          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 : 'lable' }}</label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div>\n            <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n          </div>\n        </div>\n          </div>\n\n          <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\"  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\">\n      <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n    </div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <div class=\"checkbox-container\" style=\"width:100%; background-color:#ffff\">\n          <div>\n              <input type=\"checkbox\" name=\"option1\" value=\"1\"> Option 1    \n          </div>\n        \n      </div>\n    </div>\n  </div>\n</div>\n  <!-- AP-29JAN25 drop-down design check -->\n   <!-- Dropdown Field -->\n   <div *ngIf=\"field.type === 'Dropdown'\"  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 : 'lable' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n        </div>\n    <select id=\"options\" class=\"dropdown\">\n        <option value=\"option1\">Option 1</option>\n        <option value=\"option2\">Option 2</option>\n        <option value=\"option3\">Option 3</option>\n    </select>\n    </div>\n    </div>\n</div>\n\n         <!-- Calendar -->\n<div *ngIf=\"['Calendar'].includes(field.type)\"  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 : 'Select Date' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n    </div>\n  </div>\n</div>\n\n         <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\"  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 : 'label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n    </div>\n  </div>\n</div>\n\n          <!-- Numbers -->\n<div *ngIf=\"field.type === 'Numbers'\"  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 : 'label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n    </div>\n  </div>\n</div>\n          <!-- List -->\n    <!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <label>{{ field.questionText }}</label>\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n\n         <!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\"  style=\"padding: 10px; background-color: whitesmoke; height:150px; width:100%\" (click)=\"selectElement(i)\"  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\">\n          {{ 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)\" />\n      </div>\n      <textarea\n        [placeholder]=\"field.question || 'Enter detailed text here...'\"\n        [style.height.px]=\"field.size || 100\"\n        [style.width.%]=\"100\"\n        [readonly]=\"field.readOnly\"\n        [class.hidden]=\"field.isHide\"\n        [(ngModel)]=\"field.text\">\n      </textarea>\n    </div>\n  </div>\n</div>\n\n<!-- AP-29JAN25 radio-button design check -->\n<!-- Radio -->\n          <div *ngIf=\"field.type === 'Radio'\" 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\">\n                <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n              </div>\n              <div style=\"width: 97%;\">\n                <div class=\"flex lab-conatiner\">\n                  <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n                </div>\n                <div class=\"radio-options\" style=\"display: flex;\">\n                  <div *ngFor=\"let option of field.options\" class=\"radio-item\" style=\"margin-right: 15px;\">\n                    <label>\n                      <input type=\"radio\" name=\"{{ field.questionText }}\" [(ngModel)]=\"field.value\" [value]=\"option\" />\n                      <span>{{ option }}</span>\n                    </label>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>   \n\n          <!-- AP-29JAN25 Image design change -->\n          <!-- Image -->\n<div *ngIf=\"field.type === 'Image'\"  style=\"padding: 10px; background-color: whitesmoke;\" \n     (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>\n    </div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-container\">\n        <label [class.required]=\"field.required\">\n          {{ field.questionText ? field.questionText : 'Upload Image' }}\n        </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"file\" accept=\"image/*\" style=\"background-color: #ffff;\"/>\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          <!-- File -->\n           <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" 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\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n</div>\n<div style=\"width: 97%;\">\n <div class=\"flex lab-container\">\n   <label [class.required]=\"field.required\">\n     {{ field.questionText ? field.questionText : 'Upload File' }}\n   </label>\n   <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" style=\"background-color: #ffff;\"/>\n</div>\n</div>\n</div>\n\n<!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n  <label>{{ field.questionText }}</label>\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n  </table>\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\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          <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\"  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 : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <!-- No input box here -->\n    </div>\n  </div>\n</div>\n</ng-container>\n      </div>\n      <!-- Form Builder Section All Elements -->\n      <div class=\"form-builder\">\n        <div class=\"element\" (click)=\"addElement('Calendar')\">\n          <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\n          <div class=\"hover-label\">Calendar</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('CheckBox')\">\n          <img src=\"../assets/icons/CheckBox.svg\">\n          <div class=\"hover-label\">Check Box</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Email')\">\n          <img src=\"../assets/icons/Email.svg\">\n          <div class=\"hover-label\">Email</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('File')\">\n          <img src=\"../assets/icons/File.svg\">\n          <div class=\"hover-label\">File</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('List')\">\n          <img src=\"../assets/icons/List.svg\">\n          <div class=\"hover-label\">List</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Tables')\">\n          <img src=\"../assets/icons/Table.svg\">\n          <div class=\"hover-label\">Tables</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Text')\">\n          <img src=\"../assets/icons/Text.svg\">\n          <div class=\"hover-label\">Text Box</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('TextArea')\">\n          <img src=\"../assets/icons/TextArea.svg\">\n          <div class=\"hover-label\">Text Area</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Numbers')\">\n          <img src=\"../assets/icons/Number.svg\">\n          <div class=\"hover-label\">Numbers</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Dropdown')\">\n          <img src=\"../assets/icons/Drop.svg\">\n          <div class=\"hover-label\">Dropdown</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Image')\">\n          <img src=\"../assets/Image.svg\">\n          <div class=\"hover-label\">Image</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Radio')\">\n          <img src=\"../assets/icons/Radio.svg\">\n          <div class=\"hover-label\">Radio</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Label')\">\n          <img src=\"../assets/icons/Label.svg\">\n          <div class=\"hover-label\">Label</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Book')\">\n          <img src=\"../assets/icons/Book.svg\">\n          <div class=\"hover-label\">Book</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Button')\">\n          <img src=\"../assets/icons/Button.svg\">\n          <div class=\"hover-label\">Button</div>\n        </div>\n      </div>\n\n  </div>\n\n\n\n\n", styles: [".center-frame{padding:26px;box-sizing:border-box;background-color:#edf1f5}.form-builder{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:85vh;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.dropdown{width:100%;padding:8px;font-size:16px;cursor:pointer}.dropdown:focus{border-color:#007bff;outline:none}input{width:100%}\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 row\">\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=\"col-md-3 form-builder\">\n    <ng-container *ngFor=\"let element of elements\">\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  \n<div class=\"col-md-6 form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n  <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n  <!-- AP-29JAN25 remove empty classes -->\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.required\">{{ 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\" [(ngModel)]=\"field.text\" />\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.required\">{{ 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            <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n          </div>\n        </div>\n      </div>\n    </div>\n</div>  \n\n  <!-- AP-29JAN25 radio-button design check -->\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.required\">{{ 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\">\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  <!-- AP-29JAN25 drop-down design check -->\n  <!-- Dropdown Field -->\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.required\">{{ 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\">\n          <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.value }} </option>\n        </select>\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.required\">{{ 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\" [(ngModel)]=\"field.date\" />\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.required\"> {{ 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\" [(ngModel)]=\"field.email\" />\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.required\">{{ 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\" [(ngModel)]=\"field.value\" />\n         </div>\n       </div>\n</div>\n     \n  <!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <label>{{ field.questionText }}</label>\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n\n <!-- TextArea -->\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.required\">{{ 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.readOnly\" [class.hidden]=\"field.isHide\" [(ngModel)]=\"field.text\">\n      </textarea>\n    </div>\n  </div>\n</div>\n\n<!-- AP-29JAN25 Image design change -->\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.required\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"file\" accept=\"image/*\" class=\"custom-input\" />\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  <!-- File -->\n  <!-- AP-29JAN25 file design change -->\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.required\">{{ 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\" />\n  </div>\n </div>\n</div>\n\n  <!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n  <label>{{ field.questionText }}</label>\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n  </table>\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\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  <!-- 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.required\">{{ 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</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".form-builder{width:250px;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:#e9ecef;cursor:pointer;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:14px;font-weight:500;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}.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{overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start}.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:16px;font-weight:600}.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}\n"] }]
         }], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { elementButtonClicked: [{
                 type: Output
             }], formContainer: [{
@@ -10771,13 +10804,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class PropertiesComponent {
     http;
     formBuilderService;
-    // selectedElement: any;
-    colorWheel;
-    ctx;
     formButtonHandler = new EventEmitter();
     selectedOption = '';
     selectedElementIndex = -1;
-    // @Input() selectedElement: any;
     selectedElementType = '';
     selectedAlign = 'align-left'; // Add this property
     selectedStyles = []; // Using array since multiple styles can be selected
@@ -10819,7 +10848,6 @@ class PropertiesComponent {
         return this.selectedElement?.styles?.includes(value) || false;
     }
     elementProperties = {
-        // Add other element types here similarly
         'Text': {
             elementProps: [
                 // questionText - Label-follow all element properties
@@ -10840,24 +10868,24 @@ class PropertiesComponent {
                         { value: '700', label: '700-Bold' }
                     ] },
                 // { label: 'Size', unit: 'PX', type: 'number', key: 'size'  },
-                { label: 'Align', type: 'align', key: 'textAlign',
-                    options: [
-                        { value: 'left', icon: 'textalign-left' },
-                        { value: 'center', icon: 'align-center' },
-                        { value: 'right', icon: 'align-right' },
-                        { value: 'justifyleft', icon: 'align-justifyleft' },
-                        { value: 'justifyright', icon: 'align-justifyright' }
-                    ] },
-                { label: 'Style', type: 'style', key: 'styles',
-                    options: [
-                        { value: 'italic', icon: 'italic' },
-                        { value: 'bold', icon: 'bold' },
-                        { value: 'underline', icon: 'underline' },
-                        { value: 'texticon', icon: 'texticon' },
-                        { value: 'capitalize', icon: 'capitalize' },
-                        { value: 'resize', icon: 'resize' }
-                    ] },
-                { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' }
+                // { label: 'Align', type: 'align', key: 'textAlign',
+                //   options: [
+                //     { value: 'left', icon: 'textalign-left' },
+                //     { value: 'center', icon: 'align-center' },
+                //     { value: 'right', icon: 'align-right' },
+                //     { value: 'justifyleft', icon: 'align-justifyleft' },
+                //     { value: 'justifyright', icon: 'align-justifyright' }
+                //   ] },
+                // { label: 'Style', type: 'style',key: 'styles',
+                //   options: [
+                //     { value: 'italic', icon: 'italic' },
+                //     { value: 'bold', icon: 'bold' },
+                //     { value: 'underline', icon: 'underline' },
+                //     { value: 'texticon', icon: 'texticon' },
+                //     { value: 'capitalize', icon: 'capitalize' },
+                //     { value: 'resize', icon: 'resize' }
+                //   ] },
+                { label: 'Field Size', type: 'fieldSize', key: 'size' }
             ],
             fieldProps: [
                 { label: 'Field Required', type: 'radio' },
@@ -10873,21 +10901,18 @@ class PropertiesComponent {
                 { label: 'Place Holder', placeholder: 'Enter Text ', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
                 { label: '', type: 'toggleGroup' },
-                { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
+                { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
             ],
             fieldProps: [
                 { label: 'Field Required', type: 'radio' },
                 { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
                 {
-                    label: 'Chk Options',
-                    type: 'optionsGroup',
-                    key: 'chkOptions',
-                    options: [
-                        { label: 'Option 1', value: '', type: 'text', key: 'option1' },
-                    ],
-                    addOptionLabel: 'Add Variant', // Text for the plus icon
-                    icon: 'plus' // Icon for adding options
+                    label: 'Options',
+                    type: 'checkbox',
+                    key: 'options',
+                    addOptionLabel: 'Add Option',
+                    icon: 'plus'
                 },
                 { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
                 { label: 'Style', placeholder: 'Style JSON', type: 'text' },
@@ -10900,7 +10925,7 @@ class PropertiesComponent {
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
                 { label: '', type: 'toggleGroup' },
-                { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
+                { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
             ],
             fieldProps: [
@@ -10917,7 +10942,7 @@ class PropertiesComponent {
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'placeholder' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
                 { label: '', type: 'toggleGroup' },
-                { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
+                { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
             ],
             fieldProps: [
@@ -10934,7 +10959,7 @@ class PropertiesComponent {
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
                 { label: '', type: 'toggleGroup' },
-                { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
+                { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
             ],
             fieldProps: [
@@ -10959,7 +10984,7 @@ class PropertiesComponent {
                         { label: 'Archives (ZIP, RAR, Git-hub)', value: 'application/zip,application/x-rar-compressed,application/x-git', extensions: ['.zip', '.rar', '.git'] }
                     ] },
                 { label: '', type: 'toggleGroup' },
-                { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
+                { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
             ],
             fieldProps: [
@@ -10976,7 +11001,7 @@ class PropertiesComponent {
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
                 { label: '', type: 'toggleGroup' },
-                { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
+                { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
             ],
             fieldProps: [
@@ -10986,13 +11011,14 @@ class PropertiesComponent {
                 { label: 'Style', placeholder: 'Style JSON', type: 'text' },
                 { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
             ]
-        }, 'TextArea': {
+        },
+        'TextArea': {
             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' },
-                { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
+                { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
             ],
             fieldProps: [
@@ -11002,13 +11028,14 @@ class PropertiesComponent {
                 { label: 'Style', placeholder: 'Style JSON', type: 'text' },
                 { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
             ]
-        }, 'Numbers': {
+        },
+        'Numbers': {
             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' },
-                { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
+                { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
             ],
             fieldProps: [
@@ -11018,39 +11045,38 @@ class PropertiesComponent {
                 { label: 'Style', placeholder: 'Style JSON', type: 'text' },
                 { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
             ]
-        }, 'Dropdown': {
+        },
+        'Dropdown': {
             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' },
-                { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
+                { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
             ],
             fieldProps: [
                 { label: 'Field Required', type: 'radio' },
                 { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
                 {
-                    label: 'Chk Options',
-                    type: 'optionsGroup',
-                    key: 'chkOptions',
-                    options: [
-                        { label: 'Option 1', value: '', type: 'text', key: 'option1' },
-                    ],
-                    addOptionLabel: 'Add Variant', // Text for the plus icon
-                    icon: 'plus' // Icon for adding options
+                    label: 'Options',
+                    type: 'dropdown',
+                    key: 'options',
+                    addOptionLabel: 'Add Variant',
+                    icon: 'plus'
                 },
                 { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
                 { label: 'Style', placeholder: 'Style JSON', type: 'text' },
                 { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' },
             ]
-        }, 'Image': {
+        },
+        'Image': {
             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' },
-                { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
+                { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
             ],
             fieldProps: [
@@ -11060,41 +11086,55 @@ class PropertiesComponent {
                 { label: 'Style', placeholder: 'Style JSON', type: 'text' },
                 { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
             ]
-        }, 'Radio': {
+        },
+        'Radio': {
             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' },
-                { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
+                { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
             ],
             fieldProps: [
                 { label: 'Field Required', type: 'radio' },
                 { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
                 {
-                    label: 'Radio Options', // Updated label to reflect radio context
-                    type: 'optionsGroup',
-                    key: 'radioOptions', // Updated key for radio context
-                    options: [
-                        { label: 'Option 1', value: '', type: 'text', key: 'option1' },
-                        { label: 'Option 2', value: '', type: 'text', key: 'option2' },
-                    ],
-                    addOptionLabel: 'Add Option', // Updated label for add button
-                    icon: 'plus', // Icon for adding options
+                    label: 'Options',
+                    type: 'radio',
+                    key: 'options',
+                    addOptionLabel: 'Add Option',
+                    icon: 'plus'
                 },
                 { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
                 { label: 'Style', placeholder: 'Style JSON', type: 'text' },
                 { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' },
             ]
         },
+        'Label': {
+            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' },
+                { label: 'Field Size', type: 'fieldSize', key: 'size' },
+                { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
+            ],
+            fieldProps: [
+                { label: 'Field Required', type: 'radio' },
+                { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
+                { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
+                { label: 'Style', placeholder: 'Style JSON', type: 'text' },
+                { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
+            ]
+        },
         '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' },
-                { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
+                { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
             ],
             fieldProps: [
@@ -11104,13 +11144,14 @@ class PropertiesComponent {
                 { label: 'Style', placeholder: 'Style JSON', type: 'text' },
                 { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
             ]
-        }, 'Button': {
+        },
+        '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' },
-                { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
+                { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
             ],
             fieldProps: [
@@ -11201,7 +11242,6 @@ class PropertiesComponent {
     addOption(options) {
         options.push({ label: '', value: '' });
     }
-    // Function to remove an option from prop options
     removeOption(options, index) {
         options.splice(index, 1);
     }
@@ -11212,15 +11252,12 @@ 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" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["colorWheel"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n  <div class=\"properties\">\n<!-- Design Header Section -->\n<div class=\"design-header\">\n  <h1 class=\"header-title\">Element Properties</h1>\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<!-- properties.component.html -->\n<div class=\"all-properties\">\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\n      {{ errorMessage }}\n    </div>\n  <!-- Element Properties -->\n  <details class=\"first-properties\" open>\n    <summary class=\"text-sm \">Elements Properties</summary>\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\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            <!-- 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\">\n              {{ selectedElement.helpText }}\n            </div>\n\n\n         <!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select\n  *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\n    class=\"font-selection1\"\n    [value]=\"selectedElement?.font\"\n    (change)=\"updateProperty('font', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n      {{ option }}\n    </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'\"\n class=\"file \"\n[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\">\n{{ option.label }}\n</option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select\n  *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\n    class=\"font-weight\"\n    [value]=\"selectedElement?.fontWeight\"\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n      {{ option.label }}\n    </option>\n  </select>\n</div>\n\n          \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n  <span class=\"toggle-label\">Read Only</span>\n  <label class=\"switch\">\n    <input  type=\"checkbox\"/>\n    <span class=\"slider\"></span>\n  </label>\n</div>\n\n<div class=\"toggle-item2\">\n  <span class=\"toggle-label\">Is Hide</span>\n  <label class=\"switch\">\n    <input\n      type=\"checkbox\"\n      [checked]=\"selectedElement?.isHide\"\n      (change)=\"onToggleChange('isHide', $event)\"\n    />\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\n                *ngFor=\"let option of prop.options\"\n                (click)=\"onAlignSelect(option.value)\"\n                [class.active]=\"selectedElement?.textAlign === option.value\"\n                class=\"align-btn\"\n                [title]=\"option.value\"\n              >\n                <img\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n                  [alt]=\"option.value\"\n                  class=\"icon-size\"\n                />\n              </button>\n            </div>\n\n\n            <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\n              <label>{{ prop.label }}</label>\n              <input\n                type=\"number\"\n                [value]=\"selectedElement[prop.key]\"\n                (input)=\"updateProperty(prop.key, $event.target.value)\"\n                class=\"size-input\"\n              />\n              <span class=\"size-unit\">{{ prop.unit }}</span>\n            </div>\n\n\n            <div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\n              <button\n                *ngFor=\"let option of prop.options\"\n                (click)=\"onStyleSelect(option.value)\"\n                [class.active]=\"isStyleActive(option.value)\"\n                class=\"style-btn\"\n                [title]=\"option.value\"\n              >\n                <img\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n                  [alt]=\"option.value\"\n                  class=\"icon-size\"\n                />\n              </button>\n            </div>\n\n<!-- Field Size Controls -->\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\n  <div class=\"size-group\">\n    <label  class=\"size-label\">Width</label>\n    <div class=\"value-container\">\n    <input\n      type=\"number\"\n      [value]=\"selectedElement?.width\"\n      (input)=\"updateProperty('width', $event.target.value)\"\n      class=\"size-input\"\n\n    />\n\n  </div>\n  </div>\n</div>\n</div>\n        </div>\n      </ng-container>\n    </div>\n  </details>\n\n  <!-- Field Elements Properties -->\n<details class=\"second-property\">\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\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          <input\n            *ngIf=\"prop.type === 'text'\"\n            type=\"text\"\n            [placeholder]=\"prop.placeholder\"\n            class=\"field-input\"\n          />\n          <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n\n\n      <div class=\"sizes\">\n          <div class=\"flex-gap\">\n    <div class=\"flex-items\">\n      <input\n      type=\"radio\"\n      [checked]=\"selectedElement.required\"\n      (change)=\"onRequiredChange(true)\"\n      name=\"required\"\n      class=\"radio-input\"\n    />\n      <label\n        class=\"text-label\"\n      >\n        Required\n      </label>\n    </div>\n    <div class=\"flex-items\">\n      <input\n      type=\"radio\"\n      [checked]=\"!selectedElement.required\"\n      (change)=\"onRequiredChange(false)\"\n      name=\"required\"\n      class=\"radio-input\"\n    />\n      <label\n        class=\"text-sm text-gray-400\"\n      >\n        Not Required\n      </label>\n    </div>\n  </div>\n</div>\n</div>\n <!-- Chk Options Group -->\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\n  <div\n    *ngFor=\"let option of prop.options; let i = index\"\n    class=\"option-items\"\n  >\n    <!-- Option Input -->\n    <input\n      type=\"text\"\n      [(ngModel)]=\"prop.options[i].label\"\n      placeholder=\"Option {{ i + 1 }}\"\n      class=\"options\"\n    />\n    <input\n      type=\"text\"\n      [(ngModel)]=\"prop.options[i].value\"\n      placeholder=\"Value\"\n      class=\"values\"\n    />\n    <!-- Remove Button -->\n    <div class=\"remove\">\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\n  </div>\n  <!-- Add Button -->\n  <button\n    type=\"button\"\n    class=\"add-btn\"\n    (click)=\"addOption(prop.options)\"\n  >\n  <div class=\"add-varient\">\n    <span class=\"text-lg\">+</span>\n    <span>Add Variants</span></div>\n  </button>\n</div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"design-footer\">\n    <button class=\"btn\">Cancel</button>\n    <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n  </div>\n</details>\n</div>\n</div>\n", styles: [".all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.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:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\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<!-- properties.component.html -->\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<!-- properties.component.html -->\n<div class=\"all-properties\">\n  <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n  <summary class=\"text-sm \">Elements Properties</summary>\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\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-item1\">\n  <span class=\"toggle-label\">Read Only</span>\n  <label class=\"switch\">\n    <input  type=\"checkbox\"/>\n    <span class=\"slider\"></span>\n  </label>\n</div>\n\n<div class=\"toggle-item2\">\n  <span class=\"toggle-label\">Is Hide</span>\n  <label class=\"switch\">\n    <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $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<details class=\"second-property\">\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\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          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\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.required\" (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.required\" (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<!-- 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].label\" 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 Variants</span>\n    </div>\n  </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n    <button class=\"btn\">Cancel</button>\n    <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\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{width:100%;max-width:600px;margin:0 auto;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a}.design-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#f4f4f4;border-radius:6px;margin-bottom:15px}.header-title{font-size:18px;font-weight:500;color:#333}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:6px;margin-bottom:10px;padding:10px}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:5px}.inner-content{padding:10px 0}label{font-size:14px;color:#333;margin-bottom:5px}input[type=text],input[type=number],select{width:100%;height:38px;padding:8px;font-size:14px;border:1px solid #ccc;border-radius:4px;outline:none;transition:.3s}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:#007bff}button{padding:8px 12px;border:none;border-radius:4px;background:#007bff;color:#fff;font-size:14px;cursor:pointer;transition:.3s}button:hover{background:#0056b3}.toggle-group{display:flex;align-items:center;gap:15px}.toggle-item{display:flex;align-items:center;gap:8px}.switch{position:relative;width:40px;height:20px}.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:19px;width:19px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.radio-item{display:flex;align-items:center;gap:15px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:10px}.options{width:calc(100% - 30px)}.field-size-controls{display:flex;align-items:center;gap:10px}.size-input{width:100px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:15px}.design-footer .btn{background:#007bff;color:#fff;padding:8px 15px;border-radius:4px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:10px}.design-header{flex-direction:column;align-items:flex-start}.toggle-group{flex-direction:column;gap:10px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:10px}}\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<!-- properties.component.html -->\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n  <div class=\"properties\">\n<!-- Design Header Section -->\n<div class=\"design-header\">\n  <h1 class=\"header-title\">Element Properties</h1>\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<!-- properties.component.html -->\n<div class=\"all-properties\">\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\n      {{ errorMessage }}\n    </div>\n  <!-- Element Properties -->\n  <details class=\"first-properties\" open>\n    <summary class=\"text-sm \">Elements Properties</summary>\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\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            <!-- 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\">\n              {{ selectedElement.helpText }}\n            </div>\n\n\n         <!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select\n  *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\n    class=\"font-selection1\"\n    [value]=\"selectedElement?.font\"\n    (change)=\"updateProperty('font', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n      {{ option }}\n    </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'\"\n class=\"file \"\n[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\">\n{{ option.label }}\n</option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select\n  *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\n    class=\"font-weight\"\n    [value]=\"selectedElement?.fontWeight\"\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n      {{ option.label }}\n    </option>\n  </select>\n</div>\n\n          \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n  <span class=\"toggle-label\">Read Only</span>\n  <label class=\"switch\">\n    <input  type=\"checkbox\"/>\n    <span class=\"slider\"></span>\n  </label>\n</div>\n\n<div class=\"toggle-item2\">\n  <span class=\"toggle-label\">Is Hide</span>\n  <label class=\"switch\">\n    <input\n      type=\"checkbox\"\n      [checked]=\"selectedElement?.isHide\"\n      (change)=\"onToggleChange('isHide', $event)\"\n    />\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\n                *ngFor=\"let option of prop.options\"\n                (click)=\"onAlignSelect(option.value)\"\n                [class.active]=\"selectedElement?.textAlign === option.value\"\n                class=\"align-btn\"\n                [title]=\"option.value\"\n              >\n                <img\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n                  [alt]=\"option.value\"\n                  class=\"icon-size\"\n                />\n              </button>\n            </div>\n\n\n            <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\n              <label>{{ prop.label }}</label>\n              <input\n                type=\"number\"\n                [value]=\"selectedElement[prop.key]\"\n                (input)=\"updateProperty(prop.key, $event.target.value)\"\n                class=\"size-input\"\n              />\n              <span class=\"size-unit\">{{ prop.unit }}</span>\n            </div>\n\n\n            <div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\n              <button\n                *ngFor=\"let option of prop.options\"\n                (click)=\"onStyleSelect(option.value)\"\n                [class.active]=\"isStyleActive(option.value)\"\n                class=\"style-btn\"\n                [title]=\"option.value\"\n              >\n                <img\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n                  [alt]=\"option.value\"\n                  class=\"icon-size\"\n                />\n              </button>\n            </div>\n\n<!-- Field Size Controls -->\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\n  <div class=\"size-group\">\n    <label  class=\"size-label\">Width</label>\n    <div class=\"value-container\">\n    <input\n      type=\"number\"\n      [value]=\"selectedElement?.width\"\n      (input)=\"updateProperty('width', $event.target.value)\"\n      class=\"size-input\"\n\n    />\n\n  </div>\n  </div>\n</div>\n</div>\n        </div>\n      </ng-container>\n    </div>\n  </details>\n\n  <!-- Field Elements Properties -->\n<details class=\"second-property\">\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\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          <input\n            *ngIf=\"prop.type === 'text'\"\n            type=\"text\"\n            [placeholder]=\"prop.placeholder\"\n            class=\"field-input\"\n          />\n          <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n\n\n      <div class=\"sizes\">\n          <div class=\"flex-gap\">\n    <div class=\"flex-items\">\n      <input\n      type=\"radio\"\n      [checked]=\"selectedElement.required\"\n      (change)=\"onRequiredChange(true)\"\n      name=\"required\"\n      class=\"radio-input\"\n    />\n      <label\n        class=\"text-label\"\n      >\n        Required\n      </label>\n    </div>\n    <div class=\"flex-items\">\n      <input\n      type=\"radio\"\n      [checked]=\"!selectedElement.required\"\n      (change)=\"onRequiredChange(false)\"\n      name=\"required\"\n      class=\"radio-input\"\n    />\n      <label\n        class=\"text-sm text-gray-400\"\n      >\n        Not Required\n      </label>\n    </div>\n  </div>\n</div>\n</div>\n <!-- Chk Options Group -->\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\n  <div\n    *ngFor=\"let option of prop.options; let i = index\"\n    class=\"option-items\"\n  >\n    <!-- Option Input -->\n    <input\n      type=\"text\"\n      [(ngModel)]=\"prop.options[i].label\"\n      placeholder=\"Option {{ i + 1 }}\"\n      class=\"options\"\n    />\n    <input\n      type=\"text\"\n      [(ngModel)]=\"prop.options[i].value\"\n      placeholder=\"Value\"\n      class=\"values\"\n    />\n    <!-- Remove Button -->\n    <div class=\"remove\">\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\n  </div>\n  <!-- Add Button -->\n  <button\n    type=\"button\"\n    class=\"add-btn\"\n    (click)=\"addOption(prop.options)\"\n  >\n  <div class=\"add-varient\">\n    <span class=\"text-lg\">+</span>\n    <span>Add Variants</span></div>\n  </button>\n</div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"design-footer\">\n    <button class=\"btn\">Cancel</button>\n    <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n  </div>\n</details>\n</div>\n</div>\n", styles: [".all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.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:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { colorWheel: [{
-                type: ViewChild,
-                args: ['colorWheel']
-            }], formButtonHandler: [{
+            args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\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<!-- properties.component.html -->\n<div class=\"all-properties\">\n  <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n  <summary class=\"text-sm \">Elements Properties</summary>\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\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-item1\">\n  <span class=\"toggle-label\">Read Only</span>\n  <label class=\"switch\">\n    <input  type=\"checkbox\"/>\n    <span class=\"slider\"></span>\n  </label>\n</div>\n\n<div class=\"toggle-item2\">\n  <span class=\"toggle-label\">Is Hide</span>\n  <label class=\"switch\">\n    <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $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<details class=\"second-property\">\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\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          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\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.required\" (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.required\" (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<!-- 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].label\" 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 Variants</span>\n    </div>\n  </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n    <button class=\"btn\">Cancel</button>\n    <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\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{width:100%;max-width:600px;margin:0 auto;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a}.design-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#f4f4f4;border-radius:6px;margin-bottom:15px}.header-title{font-size:18px;font-weight:500;color:#333}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:6px;margin-bottom:10px;padding:10px}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:5px}.inner-content{padding:10px 0}label{font-size:14px;color:#333;margin-bottom:5px}input[type=text],input[type=number],select{width:100%;height:38px;padding:8px;font-size:14px;border:1px solid #ccc;border-radius:4px;outline:none;transition:.3s}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:#007bff}button{padding:8px 12px;border:none;border-radius:4px;background:#007bff;color:#fff;font-size:14px;cursor:pointer;transition:.3s}button:hover{background:#0056b3}.toggle-group{display:flex;align-items:center;gap:15px}.toggle-item{display:flex;align-items:center;gap:8px}.switch{position:relative;width:40px;height:20px}.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:19px;width:19px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.radio-item{display:flex;align-items:center;gap:15px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:10px}.options{width:calc(100% - 30px)}.field-size-controls{display:flex;align-items:center;gap:10px}.size-input{width:100px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:15px}.design-footer .btn{background:#007bff;color:#fff;padding:8px 15px;border-radius:4px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:10px}.design-header{flex-direction:column;align-items:flex-start}.toggle-group{flex-direction:column;gap:10px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:10px}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { formButtonHandler: [{
                 type: Output
             }], selectedElementType: [{
                 type: Input
@@ -11268,11 +11305,11 @@ class FormComponent {
         this.formButtonHandler.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container row\">\n    <!-- app-element Component -->\n    <app-element class=\"col-md-8\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n  \n    <!-- app-properties Component -->\n    <app-properties class=\"col-md-4\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n  </div>\n  ", styles: [""], dependencies: [{ kind: "component", type: ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"], outputs: ["elementButtonClicked"] }, { kind: "component", type: PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType"], outputs: ["formButtonHandler"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container row\">\n    <!-- app-element Component -->\n    <app-element class=\"col-md-9\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n  \n    <!-- app-properties Component -->\n    <app-properties class=\"col-md-3\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n  </div>\n  ", styles: [".form-container{display:flex;width:100%;height:100vh}app-element{width:100%;height:100vh;overflow-y:auto;padding:10px;border-top:10px solid #86A8CD;border-bottom:10px solid #86A8CD}app-properties{height:100vh;overflow-y:auto;padding:10px;border:10px solid #86A8CD}\n"], dependencies: [{ kind: "component", type: ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"], outputs: ["elementButtonClicked"] }, { kind: "component", type: PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType"], outputs: ["formButtonHandler"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-form-builder', template: "<!-- AP-29JAN25 -->\n<div class=\"form-container row\">\n    <!-- app-element Component -->\n    <app-element class=\"col-md-8\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n  \n    <!-- app-properties Component -->\n    <app-properties class=\"col-md-4\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n  </div>\n  " }]
+            args: [{ selector: 'app-form-builder', template: "<!-- AP-29JAN25 -->\n<div class=\"form-container row\">\n    <!-- app-element Component -->\n    <app-element class=\"col-md-9\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n  \n    <!-- app-properties Component -->\n    <app-properties class=\"col-md-3\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n  </div>\n  ", styles: [".form-container{display:flex;width:100%;height:100vh}app-element{width:100%;height:100vh;overflow-y:auto;padding:10px;border-top:10px solid #86A8CD;border-bottom:10px solid #86A8CD}app-properties{height:100vh;overflow-y:auto;padding:10px;border:10px solid #86A8CD}\n"] }]
         }], propDecorators: { bookletJSON: [{
                 type: Input
             }], bookletId: [{
@@ -12096,6 +12133,11 @@ class NxtDatatable {
         this.originalData = [...this.data];
         this.sFilterData = [...this.data];
         this.dataSource.data = this.originalData;
+        this.pageSize = this.pagination?.pageSize ? this.pagination['pageSize'] : 10;
+        this.pageIndex = this.pagination?.pageIndex ? this.pagination['pageIndex'] : 1;
+        this.totalRecords = this.pagination?.totalRecords ? this.pagination['totalRecords'] : undefined;
+        this.pageSizeOptions = this.pagination?.pageSizeOptions ? this.pagination['pageSizeOptions'] : ['5', '10', '25', '50', '100', '200'];
+        this.pagination === undefined ? this.configPagination = false : this.configPagination = true;
         this.selection = new SelectionModel(true, []);
         if (!this.totalRecords && this.data) {
             this.dataSource.data = this.data?.slice(0, 10);
@@ -12605,8 +12647,16 @@ class NxtDatatable {
     }
     // SKS15FEB25 for close search filter box
     closefilter() {
+        this.pageSize = 10;
+        this.pageIndex = 1;
         this.filterDataArray[this.selectedFilter] = [];
-        this.filterRetain(this.filterDataArray);
+        this.isResized = false;
+        if (!this.configPagination || this.dataSource.data.length === this.totalRecords) {
+            this.filterRetain(this.filterDataArray);
+        }
+        else {
+            this.NxtTableEmit.emit({ pagination: { pageSize: 10, pageIndex: 1 }, tableSearch: { fields: this.displayedColumns, value: this.searchBoxValue }, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
+        }
     }
     // SKS15FEB25 search filter box checkbox retain
     isSelected(event) {