@rangertechnologies/ngnxt 2.1.83 → 2.1.84

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -29,6 +29,9 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import * as i9$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i10 from '@angular/cdk/bidi';
+import * as i4$2 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { v4 } from 'uuid';
 
 class NxtAppService {
     constructor() { }
@@ -4278,7 +4281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 // Changes commented out due to Angular version compatibility; will apply after upgrade.
 // // RS 06JAN2025
-// RS 17JAN2025 
+// RS 17JAN2025
 // An array fontFamilyArr is created containing a list of font family names as strings.
 const fontFamilyArr = ["Roboto", "Roboto Condensed", "Arial", "Verdana", "Tahoma", "Trebuchet MS",
     "Georgia", "Times New Roman", "Courier New", "Palatino Linotype",
@@ -4288,7 +4291,7 @@ const fontFamilyArr = ["Roboto", "Roboto Condensed", "Arial", "Verdana", "Tahoma
 Quill.register('modules/mention', Mention);
 ImageResizor.Quill = Quill;
 Quill.register('modules/imageResizor', ImageResizor);
-// RS 17JAN2025 
+// RS 17JAN2025
 //The Quill font style attributor is imported and it is registered with Quil
 let fonts = Quill.import("attributors/style/font");
 fonts.whitelist = fontFamilyArr;
@@ -4394,13 +4397,28 @@ class CustomRichTextComponent {
             }
         }
     }
-    onEditorChange(event) {
-        if (event && event.html !== undefined) {
-            this.textValueChange.emit(event.html);
-        }
-        else {
-            this.textValueChange.emit('');
-        }
+    // onEditorChange(event: any): void {
+    //   if (event && event.html !== undefined) {
+    //     this.textValueChange.emit(event.html);
+    //   } else {
+    //     this.textValueChange.emit('');
+    //   }
+    // }
+    // onEditorChange(event: any): void {
+    //   console.log('Typing detected...', event.html);
+    //   if (this.typingTimer) {
+    //     clearTimeout(this.typingTimer); // Clear previous timer
+    //   }
+    //   this.typingTimer = setTimeout(() => {
+    //     console.log('Debounced event fired:', event.html);
+    //     const newValue = event?.html ? event.html : ''; // Ensure empty values are handled
+    //     this.textValueChange.emit(newValue);
+    //   }, this.doneTypingInterval);
+    // }
+    onEditorBlur() {
+        // Only emit if we have a value change
+        const currentValue = this.value || '';
+        this.textValueChange.emit(currentValue);
     }
     // Added ngOnDestroy to prevent memory leaks
     ngOnDestroy() {
@@ -4409,11 +4427,11 @@ class CustomRichTextComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRichTextComponent, deps: [{ token: I18nService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomRichTextComponent, isStandalone: true, selector: "app-custom-rich-text", inputs: { value: "value", placeholder: "placeholder", error: "error", question: "question", rows: "rows", readOnly: "readOnly", minLength: "minLength", maxLength: "maxLength" }, outputs: { textValueChange: "textValueChange" }, ngImport: i0, template: "<!-- RS 06JAN25 -->\r\n<div class=\"rich-text-container\">\r\n  <quill-editor\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [modules]=\"quillConfiguration\"\r\n    [readOnly]=\"readOnly\"\r\n    (onContentChanged)=\"onEditorChange($event)\"\r\n    [class.error]=\"error\">\r\n  </quill-editor>\r\n  <div *ngIf=\"error\" class=\"error-message\">\r\n    {{ error }}\r\n  </div>\r\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}\n"], dependencies: [{ kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomRichTextComponent, isStandalone: true, selector: "app-custom-rich-text", inputs: { value: "value", placeholder: "placeholder", error: "error", question: "question", rows: "rows", readOnly: "readOnly", minLength: "minLength", maxLength: "maxLength" }, outputs: { textValueChange: "textValueChange" }, ngImport: i0, template: "<!-- RS 06JAN25 -->\r\n<div class=\"rich-text-container\">\r\n  <quill-editor\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [modules]=\"quillConfiguration\"\r\n    [readOnly]=\"readOnly\"\r\n    (onBlur)=\"onEditorBlur()\"\r\n    [class.error]=\"error\">\r\n  </quill-editor>\r\n  <div *ngIf=\"error\" class=\"error-message\">\r\n    {{ error }}\r\n  </div>\r\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}\n"], dependencies: [{ kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRichTextComponent, decorators: [{
             type: Component,
-            args: [{ imports: [QuillEditorComponent, FormsModule, CommonModule], selector: 'app-custom-rich-text', standalone: true, template: "<!-- RS 06JAN25 -->\r\n<div class=\"rich-text-container\">\r\n  <quill-editor\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [modules]=\"quillConfiguration\"\r\n    [readOnly]=\"readOnly\"\r\n    (onContentChanged)=\"onEditorChange($event)\"\r\n    [class.error]=\"error\">\r\n  </quill-editor>\r\n  <div *ngIf=\"error\" class=\"error-message\">\r\n    {{ error }}\r\n  </div>\r\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}\n"] }]
+            args: [{ imports: [QuillEditorComponent, FormsModule, CommonModule], selector: 'app-custom-rich-text', standalone: true, template: "<!-- RS 06JAN25 -->\r\n<div class=\"rich-text-container\">\r\n  <quill-editor\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [modules]=\"quillConfiguration\"\r\n    [readOnly]=\"readOnly\"\r\n    (onBlur)=\"onEditorBlur()\"\r\n    [class.error]=\"error\">\r\n  </quill-editor>\r\n  <div *ngIf=\"error\" class=\"error-message\">\r\n    {{ error }}\r\n  </div>\r\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: I18nService }, { type: ChangeService }], propDecorators: { value: [{
                 type: Input
             }], placeholder: [{
@@ -10192,6 +10210,809 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
 
+// AP 22JAN25
+class FormBuilderService {
+    formElements = [];
+    formElementsSubject = new BehaviorSubject([]);
+    selectedElementSubject = new BehaviorSubject(-1);
+    elementComponent = null;
+    book;
+    formElements$ = this.formElementsSubject.asObservable();
+    selectedElement$ = this.selectedElementSubject.asObservable();
+    unique_id;
+    tempElem;
+    // book: { bookQuestionsMap: { unique_id: { subQuestions: any[]; }; }; };
+    constructor() {
+        // Load saved elements from localStorage
+        const savedFormElements = localStorage.getItem('formElements');
+        if (savedFormElements) {
+            this.formElements = JSON.parse(savedFormElements);
+            this.formElementsSubject.next([...this.formElements]);
+            this.book = JSON.parse(localStorage.getItem('book') || '{}');
+            this.unique_id = localStorage.getItem('unique_id');
+        }
+    }
+    // Get the element component reference
+    getElementComponent() {
+        return this.elementComponent;
+    }
+    setElementComponent(component) {
+        this.elementComponent = component;
+    }
+    // Add a new element to the form
+    addElement(element, parentId = null) {
+        // const savedFormElements = localStorage.getItem('formElements');
+        console.log("aswin", this.formElements.length);
+        if (this.formElements.length == 0) {
+            console.log("savedFormElements", this.formElements);
+            // this.formElements = JSON.parse(savedFormElements);
+            // this.formElementsSubject.next([...this.formElements]);
+            // this.book = JSON.parse(localStorage.getItem('book') || '{}');
+            this.book = {};
+            if (localStorage.getItem('status') == "edit") {
+                this.unique_id = localStorage.getItem('unique_id');
+                this.book = {
+                    'bookQuestionsMap': {
+                        [this.unique_id]: {
+                            'subQuestions': []
+                        }
+                    }
+                };
+            }
+            else {
+                this.unique_id = v4();
+                this.book = {
+                    'bookQuestionsMap': {
+                        [this.unique_id]: {
+                            'subQuestions': []
+                        }
+                    }
+                };
+            }
+            // this.unique_id = uuidv4();
+            localStorage.setItem('book', JSON.stringify(this.book));
+            localStorage.setItem('unique_id', this.unique_id);
+        }
+        this.formElements.push(element);
+        localStorage.setItem('formElements', JSON.stringify(this.formElements));
+        this.formElementsSubject.next([...this.formElements]);
+    }
+    updateElement(index, updates) {
+        const elements = [...this.getElements()];
+        if (elements[index]) {
+            elements[index] = {
+                ...elements[index],
+                ...updates
+            };
+            this.formElementsSubject.next(elements);
+        }
+        if (index >= 0 && index < this.formElements.length) {
+            const updatedElement = {
+                ...this.formElements[index],
+                ...updates
+            };
+            if (updates.required !== undefined) {
+                if (updatedElement.questionText) {
+                    const questionText = updatedElement.questionText.replace(/\s*\*+$/, '');
+                    updatedElement.questionText = updates.required ? `${questionText} *` : questionText;
+                }
+            }
+            // Handle special cases
+            if (updates.required === true && updatedElement.questionText && !updatedElement.questionText.endsWith('*')) {
+                updatedElement.questionText = `${updatedElement.questionText} *`;
+            }
+            else if (updates.required === false && updatedElement.questionText && updatedElement.questionText.endsWith('*')) {
+                updatedElement.questionText = updatedElement.questionText.slice(0, -2);
+            }
+            this.formElements[index] = updatedElement;
+            this.formElementsSubject.next([...this.formElements]);
+            localStorage.setItem('formElements', JSON.stringify(this.formElements));
+        }
+    }
+    setSelectedElement(index) {
+        this.selectedElementSubject.next(index);
+    }
+    getElements() {
+        return this.formElements;
+    }
+    downloadElement() {
+        console.log("book", this.book);
+        this.book.bookQuestionsMap[this.unique_id].subQuestions = this.formElements;
+        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);
+            }
+        });
+        this.book.bookQuestionsMap[this.unique_id]['sqOptions'] = tempElement;
+        return this.book;
+    }
+    // // Find an element by its ID
+    // findElementById(id: string): FormElement | null {
+    //   const findRecursive = (elements: FormElement[]): FormElement | null => {
+    //     for (const el of elements) {
+    //       if (el.id === id) return el;
+    //       if (el.subQuestions) {
+    //         const found = findRecursive(el.subQuestions);
+    //         if (found) return found;
+    //       }
+    //     }
+    //     return null;
+    //   };
+    //   return findRecursive(this.formElements);
+    // }
+    // Remove an element by UID
+    // Save elements to localStorage and update the subject
+    removeElementComponent(uid) {
+        this.tempElem = [];
+        this.formElements.forEach((element) => {
+            if (element.uid !== uid) {
+                this.tempElem.push(element);
+            }
+        });
+        this.formElements = this.tempElem;
+        localStorage.setItem('formElements', JSON.stringify(this.formElements));
+        this.formElementsSubject.next([...this.formElements]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormBuilderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormBuilderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+// AP 22JAN25 - form preview and All form elements
+class ElementComponent {
+    formBuilderService;
+    elementButtonClicked = new EventEmitter();
+    formContainer;
+    bookletJSON;
+    bookletId;
+    formElements = [];
+    constructor(formBuilderService) {
+        this.formBuilderService = formBuilderService;
+    }
+    ngOnInit() {
+        // Subscribe to the formElements$ observable
+        this.formBuilderService.formElements$.subscribe((elements) => {
+            this.formElements = elements; // Update the local array with the latest data
+            console.log('Form Elements:', this.formElements);
+        });
+        console.log("bookletJSON==" + this.bookletJSON);
+        if (this.bookletJSON) {
+            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();
+            });
+        }
+        else {
+            localStorage.setItem('status', ("new"));
+        }
+    }
+    drop(event) {
+        moveItemInArray(this.formElements, event.previousIndex, event.currentIndex);
+    }
+    // Add this method to handle element selection
+    selectElement(index) {
+        this.formBuilderService.setSelectedElement(index);
+        const element = this.formElements[index];
+        this.elementButtonClicked.emit(element.type); // Emit the type when selecting
+    }
+    addElement(type) {
+        const unique_id = v4();
+        const newElement = {
+            id: unique_id,
+            uid: unique_id,
+            name: '',
+            type,
+            questionText: '',
+            question: '',
+            helpText: '',
+            errorMessage: '',
+            isReadOnly: false,
+            isHidden: false,
+            required: false,
+            subText: '',
+            referenceField: '',
+            additionalRichContent: '',
+            groupName: '',
+            isDateBackward: false,
+            title: '',
+            subTitle: '',
+            isDateForward: false,
+            isOptional: false,
+            isTitle: false,
+            nextQuestion: '',
+            allowedFileExtensions: '',
+            questionNumber: this.formBuilderService.getElements().length + 1,
+            questionBookId: '',
+            parentQuestion: '',
+            fieldsMeta: '',
+            recordTypeName: '',
+            recordTypeId: '',
+            trackingId: '',
+            dateText: '',
+            timeText: '',
+            recordId: '',
+            qbReference: '',
+            qbReferenceQuestions: '',
+            questionBookSubTitle: '',
+            style: '',
+            options: type === 'CheckBox' || type === 'Radio' || type === 'Dropdown' ? [
+                { label: 'Option 1', value: '', type: 'text', key: 'option1' },
+                { label: 'Option 2', value: '', type: 'text', key: 'option2' }
+            ] : 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) {
+        console.log('remove', index);
+        this.formBuilderService.removeElementComponent(field.uid);
+        this.formElements = this.formBuilderService.getElements();
+    }
+    getFontStyles(field) {
+        const styles = {
+            'font-family': field.font || 'Helvetica Neue',
+            'font-weight': field.fontWeight || '400',
+            'width': `${field.width || 980}px`,
+            'height': `${field.height || 91}px`,
+            'text-align': field.textAlign || 'left'
+        };
+        // Handle array of style classes
+        if (field.styles && Array.isArray(field.styles)) {
+            if (field.styles.includes('bold')) {
+                styles['font-weight'] = '700';
+            }
+            if (field.styles.includes('italic')) {
+                styles['font-style'] = 'italic';
+            }
+            if (field.styles.includes('underline')) {
+                styles['text-decoration'] = 'underline';
+            }
+            if (field.styles.includes('capitalize')) {
+                styles['text-transform'] = 'capitalize';
+            }
+            if (field.styles.includes('lowercase')) {
+                styles['text-transform'] = 'lowercase';
+            }
+        }
+        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 -->\r\n<div class=\"center-frame\">\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n  <div class=\"box\">\r\n      <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\r\n        <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\r\n\r\n          <!-- TextBox -->\r\n          <div *ngIf=\"field.type === 'Text'\" class=\"\" style=\"padding: 10px;\r\n    background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n           <div class=\"flex\" style=\"display: flex;\">\r\n            <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n            <div style=\"width: 97%;\">\r\n            <div class=\"flex lab-conatiner\">\r\n            <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n            <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\r\n          </div>\r\n        </div>\r\n          </div>\r\n\r\n          <!-- CheckBox -->\r\n           <div class=\"CheckBox-options\" *ngIf=\"field.type === 'CheckBox'\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <span class=\"label-text\">{{ field.questionText }}</span>\r\n            <div class=\"checkbox-container\">\r\n              <label class=\"option-label\">\r\n            <!-- Options Section -->\r\n             <div *ngIf=\"field.options?.length > 0\" class=\"options-container\">\r\n    <div *ngFor=\"let option of field.options; let i = index\"      class=\"option-item\">\r\n      <!-- Option Input -->\r\n      <input type=\"text\" [(ngModel)]=\"option.label\" placeholder=\"Label\" class=\"option-label\"/>\r\n      <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Value\"class=\"option-value\"/>\r\n      <!-- Remove Button -->\r\n      <button class=\"remove-option-btn\" (click)=\"removeOption(field.options, i)\">\r\n        <img src=\"../assets/icons/Trash.svg\" alt=\"Remove Option\" />\r\n      </button>\r\n    </div>\r\n    <!-- Add Option Button -->\r\n    <button type=\"button\" class=\"add-option-btn\" (click)=\"addOption(field.options)\">\r\n      <span class=\"text-lg\">+</span>\r\n    </button>\r\n            </div>\r\n              </label>\r\n    <button class=\"trash-right\" (click)=\"removeElement(field, i)\">\r\n                <img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Dropdown -->\r\n    <div *ngIf=\"field.type === 'Dropdown'\" class=\"dropdown-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <select class=\"dropdown-options\"><option *ngFor=\"let option of field.options\" >{{ option }}</option></select>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n         <!-- Calendar -->\r\n    <div *ngIf=\"['Calendar'].includes(field.type)\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"date\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- Email -->\r\n    <div *ngIf=\"field.type === 'Email'\" class=\"email-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"email\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- Numbers -->\r\n          <div *ngIf=\"field.type === 'Numbers'\"  class=\"numbers-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"number\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- List -->\r\n    <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- TextArea -->\r\n    <div *ngIf=\"field.type === 'TextArea'\" class=\"textarea-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label [class.required]=\"field.required\">{{ field.questionText }}<span *ngIf=\"field.required\" class=\"text-red-500\">*</span></label>\r\n      <textarea [placeholder]=\"field.question || 'Enter text'\" [style.height.px]=\"field.size\" [readonly]=\"field.readOnly\" [class.hidden]=\"field.isHide\"></textarea>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n\r\n          <!-- Radio -->\r\n    <div *ngIf=\"field.type === 'Radio'\" class=\"Radio-options\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n      <label>{{ field.questionText }}</label>\r\n      <div *ngFor=\"let option of field.options\" class=\"radio-item\">\r\n        <label><input type=\"radio\" name=\"{{ field.questionText }}\" /><span>{{ option }}</span></label>\r\n      </div>\r\n      <button class=\"delete-btn2\" (click)=\"removeElement(field, i)\"><img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" /></button>\r\n    </div>\r\n\r\n          <!-- Image -->\r\n    <div *ngIf=\"field.type === 'Image'\" class=\"image-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"file\" accept=\"image/*\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- Button -->\r\n    <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <button>{{ field.questionText }}</button>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- File -->\r\n    <div *ngIf=\"field.type === 'File'\" class=\"file-field-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"file\" />\r\n      <img class=\"trash-right\" src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n  </div>\r\n\r\n<!-- Tables -->\r\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n  <label>{{ field.questionText }}</label>\r\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n  </table>\r\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n\r\n          <!-- Book -->\r\n          <div *ngIf=\"field.type === 'Book'\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"text\" placeholder=\"Enter book title\" />\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field,i)\">\r\n          </div>\r\n\r\n          <!-- Label -->\r\n          <div *ngIf=\"field.type === 'Label'\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" >\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"Label\" />\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field,i)\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Form Builder Section All Elements -->\r\n      <div class=\"form-builder\">\r\n        <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n          <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n          <div class=\"hover-label\">Calendar</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n          <img src=\"../assets/icons/CheckBox.svg\">\r\n          <div class=\"hover-label\">Check Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Email')\">\r\n          <img src=\"../assets/icons/Email.svg\">\r\n          <div class=\"hover-label\">Email</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('File')\">\r\n          <img src=\"../assets/icons/File.svg\">\r\n          <div class=\"hover-label\">File</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('List')\">\r\n          <img src=\"../assets/icons/List.svg\">\r\n          <div class=\"hover-label\">List</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Tables')\">\r\n          <img src=\"../assets/icons/Table.svg\">\r\n          <div class=\"hover-label\">Tables</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Text')\">\r\n          <img src=\"../assets/icons/Text.svg\">\r\n          <div class=\"hover-label\">Text Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n          <img src=\"../assets/icons/TextArea.svg\">\r\n          <div class=\"hover-label\">Text Area</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n          <img src=\"../assets/icons/Number.svg\">\r\n          <div class=\"hover-label\">Numbers</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n          <img src=\"../assets/icons/Drop.svg\">\r\n          <div class=\"hover-label\">Dropdown</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Image')\">\r\n          <img src=\"../assets/Image.svg\">\r\n          <div class=\"hover-label\">Image</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Radio')\">\r\n          <img src=\"../assets/icons/Radio.svg\">\r\n          <div class=\"hover-label\">Radio</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Label')\">\r\n          <img src=\"../assets/icons/Label.svg\">\r\n          <div class=\"hover-label\">Label</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Book')\">\r\n          <img src=\"../assets/icons/Book.svg\">\r\n          <div class=\"hover-label\">Book</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Button')\">\r\n          <img src=\"../assets/icons/Button.svg\">\r\n          <div class=\"hover-label\">Button</div>\r\n        </div>\r\n      </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n", styles: [".center-frame{position:absolute;top:68px;right:24%;width:71%;padding:26px;box-sizing:border-box;background-color:#edf1f5}.box{box-sizing:border-box}.inner-border{box-sizing:border-box;height:39rem;border-radius:10px}.form-builder{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;position:relative;right:6px;bottom:91px;width:78%;height:46px;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{margin-top:0;padding:16px;height:39rem;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.form-preview[cdkDropListOrientation=vertical]{flex-direction:column}.form-preview[cdkDropListOrientation=horizontal]{flex-direction:row}.textbox-container,.CheckBox-options,.dropdown-container,.date-container{margin-bottom: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%}.textbox-container label{flex-grow:1}.trash-right{width:28px;position:relative;background-color:#f5ebea;height:27px;border-radius:50px}.trash-right img{position:relative;left:23%;top:3px}.table-container{overflow-x:auto}.textbox-container{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin:10px auto;background-color:#f6f6f6;padding:10px 15px;border-radius:5px;box-shadow:0 1px 3px #0000001a;position:relative}.textbox-container label{font-size:14px;width:100px;color:#15234b;margin-bottom:5px;display:block;position:relative;left:27px;top:-12px}.textbox-container input[type=text]{width:95%;height:40px;padding:0 0 0 10px;font-size:14px;border:none;border-radius:5px;background-color:#fff;color:#333;position:absolute;left:40px;top:39px}.textbox-container input[type=text]::placeholder{color:#b8bcca;font-style:italic}.textbox-container input[type=text]:hover,.textbox-container input[type=text]:focus{outline:none;border:1px solid #15234b;box-shadow:0 0 5px #15234b4d}.textbox-container .remove-icon{position:relative;top:-40px;right:-17px;font-size:18px;color:#ff4d4d;cursor:pointer;transition:transform .2s,color .2s}.textbox-container .remove-icon:hover{transform:scale(1.2);color:#d11a2a}.table-container{width:100%;max-width:600px;margin:20px auto;background-color:#d9d9d9;padding:15px;height:47%;border-radius:5px;box-shadow:0 1px 3px #0000001a}.table-container label{font-size:16px;font-weight:700;color:#15234b;margin-bottom:10px;display:block;width:200px;position:relative;top:-53px;left:21px}table{width:557px;height:90%;position:relative;left:20px;top:-58px;border-collapse:collapse;margin-top:10px;text-align:left}table th{background-color:#e4881e;color:#fff;padding:10px;font-size:14px;text-transform:uppercase}table thead{height:38px}table td{background-color:#fff;color:#333;padding:10px;font-size:14px;border:1px solid #ddd}table tbody tr:nth-child(2n) td{background-color:#f9f9f9}table tbody tr:hover td{background-color:#f1f1f1;transition:background-color .2s ease-in-out}.trash-right1{width:28px;position:relative;top:-233px;left:96%;background-color:#d7bbc3;height:27px;border-radius:50px}.trash-right1 img{position:relative;left:23%;top:4px}.file-field-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.file-field-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.file-field-container input[type=file]{width:95%;padding:10px;font-size:14px;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.file-field-container input[type=file]:hover,.file-field-container input[type=file]:focus{border-color:#007bff;box-shadow:0 0 4px #007bff80;outline:none}.file-field-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.file-field-container img:hover{opacity:1}.email-comtainer{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.email-comtainer input[type=email]{width:95%;padding:10px;font-size:14px;border:none;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.email-comtainer img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.email-comtainer label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.dropdown-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.dropdown-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.dropdown-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.dropdown-options{width:94%;position:relative;left:25px;height:100px;border-radius:5px;border:none}.CheckBox-options{display:flex;flex-direction:column;gap:10px;height:94px;width:45%;padding:10px;background-color:#f6f6f6;border-radius:8px;box-shadow:0 2px 4px #0000001a}.checkbox-container{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:6px;background-color:#fff;position:relative;right:-25px;width:94%}.label-text{width:93px;position:relative;left:27px}.option-label{display:flex;align-items:center;gap:10px;position:relative;top:5px;left:10px;font-size:14px;font-weight:500;color:gray;width:83px}.option-label input[type=checkbox]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.label-text{margin-left:5px}.option-value{position:relative;left:113px;top:-19px}.add-option-btn{position:absolute;top:5px;left:273px;border:none}.remove-option-btn{position:absolute;top:4px;left:310px;border:none}.delete-btn1{position:relative;top:-39px;left:18px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center}.delete-btn1 img{width:18px;height:18px}.Radio-options{display:flex;flex-direction:column;padding:10px;background-color:#f6f6f6;height:94px;width:45%;border-radius:8px;box-shadow:0 2px 4px #0000001a}.radio-container{display:flex;flex-direction:column;position:relative;top:1px;right:-26px;width:94%;height:43px;padding:10px;border-radius:6px;background-color:#fff}.radio-label{font-size:14px;color:#000;margin-bottom:8px;width:104px;height:21px;position:relative;left:31px}.radio-group{display:flex;gap:20px}.radio-item{display:flex;align-items:center}.option-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.option-label input[type=radio]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.radio-text{margin-left:5px}.delete-btn2{position:relative;top:-33px;left:374px;width:24px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease-in-out}.delete-btn2 img{width:18px;height:18px}\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.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 -->\r\n<div class=\"center-frame\">\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n  <div class=\"box\">\r\n      <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\r\n        <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\r\n\r\n          <!-- TextBox -->\r\n          <div *ngIf=\"field.type === 'Text'\" class=\"\" style=\"padding: 10px;\r\n    background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n           <div class=\"flex\" style=\"display: flex;\">\r\n            <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n            <div style=\"width: 97%;\">\r\n            <div class=\"flex lab-conatiner\">\r\n            <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n            <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\r\n          </div>\r\n        </div>\r\n          </div>\r\n\r\n          <!-- CheckBox -->\r\n           <div class=\"CheckBox-options\" *ngIf=\"field.type === 'CheckBox'\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <span class=\"label-text\">{{ field.questionText }}</span>\r\n            <div class=\"checkbox-container\">\r\n              <label class=\"option-label\">\r\n            <!-- Options Section -->\r\n             <div *ngIf=\"field.options?.length > 0\" class=\"options-container\">\r\n    <div *ngFor=\"let option of field.options; let i = index\"      class=\"option-item\">\r\n      <!-- Option Input -->\r\n      <input type=\"text\" [(ngModel)]=\"option.label\" placeholder=\"Label\" class=\"option-label\"/>\r\n      <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Value\"class=\"option-value\"/>\r\n      <!-- Remove Button -->\r\n      <button class=\"remove-option-btn\" (click)=\"removeOption(field.options, i)\">\r\n        <img src=\"../assets/icons/Trash.svg\" alt=\"Remove Option\" />\r\n      </button>\r\n    </div>\r\n    <!-- Add Option Button -->\r\n    <button type=\"button\" class=\"add-option-btn\" (click)=\"addOption(field.options)\">\r\n      <span class=\"text-lg\">+</span>\r\n    </button>\r\n            </div>\r\n              </label>\r\n    <button class=\"trash-right\" (click)=\"removeElement(field, i)\">\r\n                <img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Dropdown -->\r\n    <div *ngIf=\"field.type === 'Dropdown'\" class=\"dropdown-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <select class=\"dropdown-options\"><option *ngFor=\"let option of field.options\" >{{ option }}</option></select>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n         <!-- Calendar -->\r\n    <div *ngIf=\"['Calendar'].includes(field.type)\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"date\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- Email -->\r\n    <div *ngIf=\"field.type === 'Email'\" class=\"email-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"email\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- Numbers -->\r\n          <div *ngIf=\"field.type === 'Numbers'\"  class=\"numbers-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"number\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- List -->\r\n    <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- TextArea -->\r\n    <div *ngIf=\"field.type === 'TextArea'\" class=\"textarea-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label [class.required]=\"field.required\">{{ field.questionText }}<span *ngIf=\"field.required\" class=\"text-red-500\">*</span></label>\r\n      <textarea [placeholder]=\"field.question || 'Enter text'\" [style.height.px]=\"field.size\" [readonly]=\"field.readOnly\" [class.hidden]=\"field.isHide\"></textarea>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n\r\n          <!-- Radio -->\r\n    <div *ngIf=\"field.type === 'Radio'\" class=\"Radio-options\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n      <label>{{ field.questionText }}</label>\r\n      <div *ngFor=\"let option of field.options\" class=\"radio-item\">\r\n        <label><input type=\"radio\" name=\"{{ field.questionText }}\" /><span>{{ option }}</span></label>\r\n      </div>\r\n      <button class=\"delete-btn2\" (click)=\"removeElement(field, i)\"><img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" /></button>\r\n    </div>\r\n\r\n          <!-- Image -->\r\n    <div *ngIf=\"field.type === 'Image'\" class=\"image-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"file\" accept=\"image/*\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- Button -->\r\n    <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <button>{{ field.questionText }}</button>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- File -->\r\n    <div *ngIf=\"field.type === 'File'\" class=\"file-field-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"file\" />\r\n      <img class=\"trash-right\" src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n  </div>\r\n\r\n<!-- Tables -->\r\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n  <label>{{ field.questionText }}</label>\r\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n  </table>\r\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n\r\n          <!-- Book -->\r\n          <div *ngIf=\"field.type === 'Book'\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"text\" placeholder=\"Enter book title\" />\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field,i)\">\r\n          </div>\r\n\r\n          <!-- Label -->\r\n          <div *ngIf=\"field.type === 'Label'\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" >\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"Label\" />\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field,i)\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Form Builder Section All Elements -->\r\n      <div class=\"form-builder\">\r\n        <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n          <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n          <div class=\"hover-label\">Calendar</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n          <img src=\"../assets/icons/CheckBox.svg\">\r\n          <div class=\"hover-label\">Check Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Email')\">\r\n          <img src=\"../assets/icons/Email.svg\">\r\n          <div class=\"hover-label\">Email</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('File')\">\r\n          <img src=\"../assets/icons/File.svg\">\r\n          <div class=\"hover-label\">File</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('List')\">\r\n          <img src=\"../assets/icons/List.svg\">\r\n          <div class=\"hover-label\">List</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Tables')\">\r\n          <img src=\"../assets/icons/Table.svg\">\r\n          <div class=\"hover-label\">Tables</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Text')\">\r\n          <img src=\"../assets/icons/Text.svg\">\r\n          <div class=\"hover-label\">Text Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n          <img src=\"../assets/icons/TextArea.svg\">\r\n          <div class=\"hover-label\">Text Area</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n          <img src=\"../assets/icons/Number.svg\">\r\n          <div class=\"hover-label\">Numbers</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n          <img src=\"../assets/icons/Drop.svg\">\r\n          <div class=\"hover-label\">Dropdown</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Image')\">\r\n          <img src=\"../assets/Image.svg\">\r\n          <div class=\"hover-label\">Image</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Radio')\">\r\n          <img src=\"../assets/icons/Radio.svg\">\r\n          <div class=\"hover-label\">Radio</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Label')\">\r\n          <img src=\"../assets/icons/Label.svg\">\r\n          <div class=\"hover-label\">Label</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Book')\">\r\n          <img src=\"../assets/icons/Book.svg\">\r\n          <div class=\"hover-label\">Book</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Button')\">\r\n          <img src=\"../assets/icons/Button.svg\">\r\n          <div class=\"hover-label\">Button</div>\r\n        </div>\r\n      </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n", styles: [".center-frame{position:absolute;top:68px;right:24%;width:71%;padding:26px;box-sizing:border-box;background-color:#edf1f5}.box{box-sizing:border-box}.inner-border{box-sizing:border-box;height:39rem;border-radius:10px}.form-builder{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;position:relative;right:6px;bottom:91px;width:78%;height:46px;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{margin-top:0;padding:16px;height:39rem;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.form-preview[cdkDropListOrientation=vertical]{flex-direction:column}.form-preview[cdkDropListOrientation=horizontal]{flex-direction:row}.textbox-container,.CheckBox-options,.dropdown-container,.date-container{margin-bottom: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%}.textbox-container label{flex-grow:1}.trash-right{width:28px;position:relative;background-color:#f5ebea;height:27px;border-radius:50px}.trash-right img{position:relative;left:23%;top:3px}.table-container{overflow-x:auto}.textbox-container{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin:10px auto;background-color:#f6f6f6;padding:10px 15px;border-radius:5px;box-shadow:0 1px 3px #0000001a;position:relative}.textbox-container label{font-size:14px;width:100px;color:#15234b;margin-bottom:5px;display:block;position:relative;left:27px;top:-12px}.textbox-container input[type=text]{width:95%;height:40px;padding:0 0 0 10px;font-size:14px;border:none;border-radius:5px;background-color:#fff;color:#333;position:absolute;left:40px;top:39px}.textbox-container input[type=text]::placeholder{color:#b8bcca;font-style:italic}.textbox-container input[type=text]:hover,.textbox-container input[type=text]:focus{outline:none;border:1px solid #15234b;box-shadow:0 0 5px #15234b4d}.textbox-container .remove-icon{position:relative;top:-40px;right:-17px;font-size:18px;color:#ff4d4d;cursor:pointer;transition:transform .2s,color .2s}.textbox-container .remove-icon:hover{transform:scale(1.2);color:#d11a2a}.table-container{width:100%;max-width:600px;margin:20px auto;background-color:#d9d9d9;padding:15px;height:47%;border-radius:5px;box-shadow:0 1px 3px #0000001a}.table-container label{font-size:16px;font-weight:700;color:#15234b;margin-bottom:10px;display:block;width:200px;position:relative;top:-53px;left:21px}table{width:557px;height:90%;position:relative;left:20px;top:-58px;border-collapse:collapse;margin-top:10px;text-align:left}table th{background-color:#e4881e;color:#fff;padding:10px;font-size:14px;text-transform:uppercase}table thead{height:38px}table td{background-color:#fff;color:#333;padding:10px;font-size:14px;border:1px solid #ddd}table tbody tr:nth-child(2n) td{background-color:#f9f9f9}table tbody tr:hover td{background-color:#f1f1f1;transition:background-color .2s ease-in-out}.trash-right1{width:28px;position:relative;top:-233px;left:96%;background-color:#d7bbc3;height:27px;border-radius:50px}.trash-right1 img{position:relative;left:23%;top:4px}.file-field-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.file-field-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.file-field-container input[type=file]{width:95%;padding:10px;font-size:14px;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.file-field-container input[type=file]:hover,.file-field-container input[type=file]:focus{border-color:#007bff;box-shadow:0 0 4px #007bff80;outline:none}.file-field-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.file-field-container img:hover{opacity:1}.email-comtainer{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.email-comtainer input[type=email]{width:95%;padding:10px;font-size:14px;border:none;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.email-comtainer img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.email-comtainer label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.dropdown-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.dropdown-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.dropdown-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.dropdown-options{width:94%;position:relative;left:25px;height:100px;border-radius:5px;border:none}.CheckBox-options{display:flex;flex-direction:column;gap:10px;height:94px;width:45%;padding:10px;background-color:#f6f6f6;border-radius:8px;box-shadow:0 2px 4px #0000001a}.checkbox-container{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:6px;background-color:#fff;position:relative;right:-25px;width:94%}.label-text{width:93px;position:relative;left:27px}.option-label{display:flex;align-items:center;gap:10px;position:relative;top:5px;left:10px;font-size:14px;font-weight:500;color:gray;width:83px}.option-label input[type=checkbox]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.label-text{margin-left:5px}.option-value{position:relative;left:113px;top:-19px}.add-option-btn{position:absolute;top:5px;left:273px;border:none}.remove-option-btn{position:absolute;top:4px;left:310px;border:none}.delete-btn1{position:relative;top:-39px;left:18px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center}.delete-btn1 img{width:18px;height:18px}.Radio-options{display:flex;flex-direction:column;padding:10px;background-color:#f6f6f6;height:94px;width:45%;border-radius:8px;box-shadow:0 2px 4px #0000001a}.radio-container{display:flex;flex-direction:column;position:relative;top:1px;right:-26px;width:94%;height:43px;padding:10px;border-radius:6px;background-color:#fff}.radio-label{font-size:14px;color:#000;margin-bottom:8px;width:104px;height:21px;position:relative;left:31px}.radio-group{display:flex;gap:20px}.radio-item{display:flex;align-items:center}.option-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.option-label input[type=radio]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.radio-text{margin-left:5px}.delete-btn2{position:relative;top:-33px;left:374px;width:24px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease-in-out}.delete-btn2 img{width:18px;height:18px}\n"] }]
+        }], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { elementButtonClicked: [{
+                type: Output
+            }], formContainer: [{
+                type: ViewChild,
+                args: ['formContainer']
+            }], bookletJSON: [{
+                type: Input
+            }], bookletId: [{
+                type: Input
+            }] } });
+
+class PropertiesComponent {
+    http;
+    formBuilderService;
+    // selectedElement: any;
+    colorWheel;
+    ctx;
+    selectedOption = '';
+    selectedElementIndex = -1;
+    // @Input() selectedElement: any;
+    selectedElementType = '';
+    selectedAlign = 'align-left'; // Add this property
+    selectedStyles = []; // Using array since multiple styles can be selected
+    errorMessage = '';
+    selectedElement = null; // Receive the selected element
+    onToggleChange(property, event) {
+        const value = event.target.checked;
+        if (this.selectedElement) {
+            const update = { [property]: value };
+            this.formBuilderService.updateElement(this.selectedElementIndex, update);
+            // Update the selected element directly for immediate UI feedback
+            this.selectedElement[property] = value;
+        }
+    }
+    updateProperties(elementType) {
+        // Reset alignment and styles if switching elements
+        this.selectedAlign = 'align-left';
+        this.selectedStyles = [];
+        // Fetch the properties of the selected element type
+        const properties = this.getProperties();
+        if (properties) {
+            // Make sure the properties are dynamically updated
+        }
+    }
+    onAlignSelect(value) {
+        if (this.selectedElement) {
+            this.selectedElement.textAlign = value;
+            console.log(`Selected alignment: ${value}`);
+        }
+    }
+    onStyleSelect(value) {
+        if (!this.selectedElement)
+            return;
+        // Initialize styles array if it doesn't exist
+        this.selectedElement.styles = this.selectedElement.styles || [];
+        // Ensure only one style is selected at a time
+        this.selectedElement.styles = [value];
+        console.log('Updated styles:', this.selectedElement.styles);
+    }
+    isStyleActive(value) {
+        return this.selectedElement?.styles?.includes(value) || false;
+    }
+    elementProperties = {
+        // Add other element types here similarly
+        'Text': {
+            elementProps: [
+                // questionText - Label-follow all element properties
+                { label: 'Label', placeholder: 'Enter Text ', type: 'text', key: 'questionText' },
+                // question - Placeholder-follow all element properties
+                { label: 'placeholder', placeholder: 'Enter Text', type: 'text', key: 'question' },
+                { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
+                { label: '', type: 'toggleGroup' },
+                // errorMessage - Error Msg-follow all element properties
+                { label: 'Error Msg', placeholder: 'Enter Text ', type: 'text', key: 'errorMsg' },
+                { label: 'Font', type: 'select', key: 'font',
+                    options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto'] },
+                { label: 'Weight', type: 'select', key: 'fontWeight',
+                    options: [
+                        { value: '400', label: '400-Normal' },
+                        { value: '500', label: '500-Medium' },
+                        { value: '600', label: '600-Semi Bold' },
+                        { 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' }
+            ],
+            fieldProps: [
+                { label: 'Field Required', type: 'radio' },
+                { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
+                { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
+                { label: 'Style', placeholder: 'Style JSON', type: 'text' },
+                { label: 'Sub Text', placeholder: 'Enter Text  ', type: 'text' }
+            ]
+        },
+        'CheckBox': {
+            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: '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: 'Reference', placeholder: 'Reference Field', type: 'text' },
+                { label: 'Style', placeholder: 'Style JSON', type: 'text' },
+                { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
+            ]
+        },
+        'Calendar': {
+            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: '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' }
+            ]
+        },
+        'Time': {
+            elementProps: [
+                { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'label' },
+                { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'placeholder' },
+                { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
+                { label: '', type: 'toggleGroup' },
+                { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
+                { 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' }
+            ]
+        },
+        'Email': {
+            elementProps: [
+                { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
+                { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
+                { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
+                { label: '', type: 'toggleGroup' },
+                { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
+                { 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' }
+            ]
+        },
+        'File': {
+            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: 'Support Type', type: 'select', key: 'supportType', options: [
+                        { label: 'Images (JPEG, PNG, GIF)', value: 'image/*', extensions: ['.jpg', '.jpeg', '.png', '.gif'] },
+                        { label: 'Audio (MP3, WAV, AIFF)', value: 'audio/*', extensions: ['.mp3', '.wav', '.aiff'] },
+                        { label: 'Video (MP4, AVI, HEVC)', value: 'video/*', extensions: ['.mp4', '.avi', '.hevc'] },
+                        { label: 'Documents (DOC, DOCX, PPT, PDF)', value: 'application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-powerpoint', extensions: ['.doc', '.docx', '.ppt', '.pdf'] },
+                        { label: 'Executables (EXE, BAD, SH)', value: 'application/x-msdownload,application/x-sh', extensions: ['.exe', '.bad', '.sh'] },
+                        { 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: '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' }
+            ]
+        },
+        'List': {
+            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: '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' }
+            ]
+        }, '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: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
+            ],
+            fieldProps: [
+                { label: 'Field Required', type: 'radio', key: 'required' },
+                { label: 'Default Value', placeholder: 'Enter Text', type: 'text', key: 'defaultValue' },
+                { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
+                { label: 'Style', placeholder: 'Style JSON', type: 'text' },
+                { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
+            ]
+        }, '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: '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' }
+            ]
+        }, '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: '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: 'Reference', placeholder: 'Reference Field', type: 'text' },
+                { label: 'Style', placeholder: 'Style JSON', type: 'text' },
+                { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' },
+            ]
+        }, '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: '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' }
+            ]
+        }, '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: '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: '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: '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' }
+            ]
+        }, '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: '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' }
+            ]
+        },
+    };
+    constructor(http, formBuilderService) {
+        this.http = http;
+        this.formBuilderService = formBuilderService;
+    }
+    ngOnInit() {
+        this.formBuilderService.selectedElement$.subscribe(index => {
+            this.selectedElementIndex = index;
+            if (index >= 0) {
+                const elements = this.formBuilderService.getElements();
+                console.log('Selected element:', elements);
+                this.selectedElement = elements[index];
+            }
+        });
+    }
+    validateInput(value, type) {
+        if (type === 'label' || type === 'placeholder') {
+            const regex = /^[a-zA-Z0-9\s]*$/;
+            if (!regex.test(value)) {
+                this.errorMessage = 'Only letters and numbers are allowed';
+                return false;
+            }
+        }
+        this.errorMessage = '';
+        return true;
+    }
+    updateProperty(key, value) {
+        if (this.selectedElementIndex >= 0) {
+            if (key === 'questionText' || key === 'question') {
+                if (!this.validateInput(value, key)) {
+                    return;
+                }
+            }
+            if (key === 'fontWeight') {
+                // Extract just the number value from the option
+                value = value.split('-')[0];
+            }
+            if (key === 'styles') {
+                const currentStyles = this.selectedElement.styles || [];
+                if (value === 'capitalize' || value === 'lowercase') {
+                    // Remove the opposite case if it exists
+                    const oppositeStyle = value === 'capitalize' ? 'lowercase' : 'capitalize';
+                    const filteredStyles = currentStyles.filter(s => s !== oppositeStyle);
+                    value = currentStyles.includes(value)
+                        ? filteredStyles.filter(s => s !== value)
+                        : [...filteredStyles, value];
+                }
+                else {
+                    // Toggle other styles
+                    value = currentStyles.includes(value)
+                        ? currentStyles.filter(s => s !== value)
+                        : [...currentStyles, value];
+                }
+            }
+            const update = { [key]: value };
+            this.formBuilderService.updateElement(this.selectedElementIndex, update);
+            // Special handling for font and font weight
+            if (key === 'font') {
+                this.selectedElement.font = value; // Directly update the selected element's font property
+            }
+        }
+    }
+    onRequiredChange(value) {
+        if (this.selectedElement) {
+            // Remove any existing asterisks first
+            let label = this.selectedElement.label.replace(/\s*\*+$/, '');
+            if (value) {
+                label = `${label} *`; // Add single asterisk
+            }
+            this.updateProperty('label', label);
+            this.updateProperty('required', value);
+        }
+    }
+    getProperties() {
+        if (!this.selectedElement)
+            return null;
+        return this.elementProperties[this.selectedElement.type];
+    }
+    // openColorPicker(propertyKey: string) {
+    //   // If you want to use the browser's native color picker:
+    //   const input = document.createElement('input');
+    //   input.type = 'color';
+    //   input.value = this.selectedElement[propertyKey];
+    //   input.addEventListener('change', (e: any) => {
+    //     this.updateProperty(propertyKey, e.target.value);
+    //   });
+    //   input.click();
+    // }
+    // Function to add a new option to prop options
+    addOption(options) {
+        options.push({ label: '', value: '' });
+    }
+    // Function to remove an option from prop options
+    removeOption(options, index) {
+        options.splice(index, 1);
+    }
+    download() {
+        console.log('Question Book:', this.formBuilderService.downloadElement());
+    }
+    save() {
+        const apiURL = 'https://dev-api.rangerfusion.com/nxt/';
+        this.http.post(apiURL, this.formBuilderService.downloadElement()).subscribe((response) => {
+            console.log('Response:', response);
+        }, (error) => {
+            console.error('Error:', error);
+        });
+    }
+    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" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["colorWheel"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n<div class=\"container\">\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n  <h1 class=\"header-title\">Element Properties</h1>\r\n  <div class=\"menu-container\">\r\n    <div class=\"menu-item\" (click)=\"download()\">\r\n      <span >Download</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Start</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Path</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Clone</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n  <!-- Element Properties -->\r\n  <details class=\"first-properties\" open>\r\n    <summary class=\"text-sm \">Elements Properties</summary>\r\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n        <div class=\"flex-items-center\">\r\n          <label class=\"text-sm\">{{ prop.label }}</label>\r\n          <div class=\"label-properties\">\r\n            <!-- Text Input -->\r\n            <input *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            [value]=\"selectedElement[prop.key]\"\r\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n            [class.read-only]=\"selectedElement.readOnly\"\r\n            [readonly]=\"selectedElement.readOnly\"\r\n            class=\"text-sm1 \"\r\n          />\r\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n              {{ selectedElement.helpText }}\r\n            </div>\r\n\r\n\r\n         <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n    class=\"font-selection1\"\r\n    [value]=\"selectedElement?.font\"\r\n    (change)=\"updateProperty('font', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n      {{ option }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n    class=\"font-weight1 \"\r\n    [value]=\"selectedElement?.fontWeight\"\r\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n      {{ option.label }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n            <!-- Number Input with Unit -->\r\n            <div *ngIf=\"prop.type === 'number'\" class=\"size-controls\">\r\n              <div class=\"size-input-group\">\r\n                  <input\r\n                  type=\"number\"\r\n                  [value]=\"selectedElement[prop.key]\"\r\n                  (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n                  [min]=\"prop.min || 1\"\r\n                  [max]=\"prop.max || 999999\"\r\n                  class=\"size-value\"\r\n                />\r\n                <span class=\"size-unit\">{{ prop.unit }}</span>\r\n              </div>\r\n            </div>\r\n\r\n           <!-- Toggle Group -->\r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n  <span class=\"toggle-label\">Read Only</span>\r\n  <label class=\"switch\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"selectedElement?.readOnly\"\r\n      (change)=\"onToggleChange('readOnly', $event)\"\r\n    />\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n  <span class=\"toggle-label\">Is Hide</span>\r\n  <label class=\"switch\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"selectedElement?.isHide\"\r\n      (change)=\"onToggleChange('isHide', $event)\"\r\n    />\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n</div>\r\n\r\n            <!-- Text Align Buttons -->\r\n            <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onAlignSelect(option.value)\"\r\n                [class.active]=\"selectedElement?.textAlign === option.value\"\r\n                class=\"align-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n              <label>{{ prop.label }}</label>\r\n              <input\r\n                type=\"number\"\r\n                [value]=\"selectedElement[prop.key]\"\r\n                (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n                class=\"size-input\"\r\n              />\r\n              <span class=\"size-unit\">{{ prop.unit }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onStyleSelect(option.value)\"\r\n                [class.active]=\"isStyleActive(option.value)\"\r\n                class=\"style-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n  <div class=\"size-group\">\r\n    <label  class=\"size-label\">Width</label>\r\n    <div class=\"value-container\">\r\n    <input\r\n      type=\"number\"\r\n      [value]=\"selectedElement?.width\"\r\n      (input)=\"updateProperty('width', $event.target.value)\"\r\n      class=\"size-input\"\r\n\r\n    />\r\n    <span class=\"unit\">PX</span>\r\n  </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n    <div class=\"size-group\">\r\n      <label class=\"size-label\">Height</label>\r\n      <div class=\"value-container\">\r\n        <input\r\n          type=\"number\"\r\n          [value]=\"selectedElement?.height\"\r\n          (input)=\"updateProperty('height', $event.target.value)\"\r\n          class=\"size-input\"\r\n        />\r\n        <span class=\"unit\">PX</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </details>\r\n\r\n  <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n      <div class=\"flex-items-center \">\r\n        <label class=\"text-sm\">{{ prop.label }}</label>\r\n        <div class=\"input-box-field\">\r\n          <!-- Input Box -->\r\n          <input\r\n            *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            class=\"field-input\"\r\n          />\r\n          <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n      <div class=\"sizes\">\r\n          <div class=\"flex-gap\">\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"selectedElement.required\"\r\n      (change)=\"onRequiredChange(true)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-label\"\r\n      >\r\n        Required\r\n      </label>\r\n    </div>\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"!selectedElement.required\"\r\n      (change)=\"onRequiredChange(false)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-sm text-gray-400\"\r\n      >\r\n        Not Required\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n  <div\r\n    *ngFor=\"let option of prop.options; let i = index\"\r\n    class=\"option-items\"\r\n  >\r\n    <!-- Option Input -->\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].label\"\r\n      placeholder=\"Option {{ i + 1 }}\"\r\n      class=\"options\"\r\n    />\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].value\"\r\n      placeholder=\"Value\"\r\n      class=\"values\"\r\n    />\r\n    <!-- Remove Button -->\r\n    <div class=\"remove\">\r\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n  </div>\r\n  <!-- Add Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"add-btn\"\r\n    (click)=\"addOption(prop.options)\"\r\n  >\r\n  <div class=\"add-varient\">\r\n    <span class=\"text-lg\">+</span>\r\n    <span>Add Variants</span></div>\r\n  </button>\r\n</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"design-footer\">\r\n    <button class=\"btn\">Cancel</button>\r\n    <button class=\"btn\" (click)=\"save()\">Save</button>\r\n  </div>\r\n</details>\r\n</div>\r\n\r\n\r\n</div>\r\n", styles: [".container{position:absolute;right:0;width:25%;top:70px}.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:-94px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-24px;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"] }] });
+}
+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 -->\r\n<!-- properties.component.html -->\r\n<div class=\"container\">\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n  <h1 class=\"header-title\">Element Properties</h1>\r\n  <div class=\"menu-container\">\r\n    <div class=\"menu-item\" (click)=\"download()\">\r\n      <span >Download</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Start</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Path</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Clone</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n  <!-- Element Properties -->\r\n  <details class=\"first-properties\" open>\r\n    <summary class=\"text-sm \">Elements Properties</summary>\r\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n        <div class=\"flex-items-center\">\r\n          <label class=\"text-sm\">{{ prop.label }}</label>\r\n          <div class=\"label-properties\">\r\n            <!-- Text Input -->\r\n            <input *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            [value]=\"selectedElement[prop.key]\"\r\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n            [class.read-only]=\"selectedElement.readOnly\"\r\n            [readonly]=\"selectedElement.readOnly\"\r\n            class=\"text-sm1 \"\r\n          />\r\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n              {{ selectedElement.helpText }}\r\n            </div>\r\n\r\n\r\n         <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n    class=\"font-selection1\"\r\n    [value]=\"selectedElement?.font\"\r\n    (change)=\"updateProperty('font', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n      {{ option }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n    class=\"font-weight1 \"\r\n    [value]=\"selectedElement?.fontWeight\"\r\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n      {{ option.label }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n            <!-- Number Input with Unit -->\r\n            <div *ngIf=\"prop.type === 'number'\" class=\"size-controls\">\r\n              <div class=\"size-input-group\">\r\n                  <input\r\n                  type=\"number\"\r\n                  [value]=\"selectedElement[prop.key]\"\r\n                  (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n                  [min]=\"prop.min || 1\"\r\n                  [max]=\"prop.max || 999999\"\r\n                  class=\"size-value\"\r\n                />\r\n                <span class=\"size-unit\">{{ prop.unit }}</span>\r\n              </div>\r\n            </div>\r\n\r\n           <!-- Toggle Group -->\r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n  <span class=\"toggle-label\">Read Only</span>\r\n  <label class=\"switch\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"selectedElement?.readOnly\"\r\n      (change)=\"onToggleChange('readOnly', $event)\"\r\n    />\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n  <span class=\"toggle-label\">Is Hide</span>\r\n  <label class=\"switch\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"selectedElement?.isHide\"\r\n      (change)=\"onToggleChange('isHide', $event)\"\r\n    />\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n</div>\r\n\r\n            <!-- Text Align Buttons -->\r\n            <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onAlignSelect(option.value)\"\r\n                [class.active]=\"selectedElement?.textAlign === option.value\"\r\n                class=\"align-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n              <label>{{ prop.label }}</label>\r\n              <input\r\n                type=\"number\"\r\n                [value]=\"selectedElement[prop.key]\"\r\n                (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n                class=\"size-input\"\r\n              />\r\n              <span class=\"size-unit\">{{ prop.unit }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onStyleSelect(option.value)\"\r\n                [class.active]=\"isStyleActive(option.value)\"\r\n                class=\"style-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n  <div class=\"size-group\">\r\n    <label  class=\"size-label\">Width</label>\r\n    <div class=\"value-container\">\r\n    <input\r\n      type=\"number\"\r\n      [value]=\"selectedElement?.width\"\r\n      (input)=\"updateProperty('width', $event.target.value)\"\r\n      class=\"size-input\"\r\n\r\n    />\r\n    <span class=\"unit\">PX</span>\r\n  </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n    <div class=\"size-group\">\r\n      <label class=\"size-label\">Height</label>\r\n      <div class=\"value-container\">\r\n        <input\r\n          type=\"number\"\r\n          [value]=\"selectedElement?.height\"\r\n          (input)=\"updateProperty('height', $event.target.value)\"\r\n          class=\"size-input\"\r\n        />\r\n        <span class=\"unit\">PX</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </details>\r\n\r\n  <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n      <div class=\"flex-items-center \">\r\n        <label class=\"text-sm\">{{ prop.label }}</label>\r\n        <div class=\"input-box-field\">\r\n          <!-- Input Box -->\r\n          <input\r\n            *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            class=\"field-input\"\r\n          />\r\n          <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n      <div class=\"sizes\">\r\n          <div class=\"flex-gap\">\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"selectedElement.required\"\r\n      (change)=\"onRequiredChange(true)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-label\"\r\n      >\r\n        Required\r\n      </label>\r\n    </div>\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"!selectedElement.required\"\r\n      (change)=\"onRequiredChange(false)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-sm text-gray-400\"\r\n      >\r\n        Not Required\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n  <div\r\n    *ngFor=\"let option of prop.options; let i = index\"\r\n    class=\"option-items\"\r\n  >\r\n    <!-- Option Input -->\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].label\"\r\n      placeholder=\"Option {{ i + 1 }}\"\r\n      class=\"options\"\r\n    />\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].value\"\r\n      placeholder=\"Value\"\r\n      class=\"values\"\r\n    />\r\n    <!-- Remove Button -->\r\n    <div class=\"remove\">\r\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n  </div>\r\n  <!-- Add Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"add-btn\"\r\n    (click)=\"addOption(prop.options)\"\r\n  >\r\n  <div class=\"add-varient\">\r\n    <span class=\"text-lg\">+</span>\r\n    <span>Add Variants</span></div>\r\n  </button>\r\n</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"design-footer\">\r\n    <button class=\"btn\">Cancel</button>\r\n    <button class=\"btn\" (click)=\"save()\">Save</button>\r\n  </div>\r\n</details>\r\n</div>\r\n\r\n\r\n</div>\r\n", styles: [".container{position:absolute;right:0;width:25%;top:70px}.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:-94px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-24px;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']
+            }], selectedElementType: [{
+                type: Input
+            }] } });
+
+// AP 22JAN25
+class MenuComponent {
+    activeIndex = 0;
+    menuItems = [
+        { icon: '../assets/icons/Related.svg' },
+        { icon: '../assets/icons/TextColumns.svg' },
+        { icon: '../assets/icons/Monotone.svg' },
+        { icon: '../assets/icons/Preview1.svg' },
+        { icon: '../assets/icons/Website.svg' },
+        { icon: '../assets/icons/Preview2.svg' },
+        { icon: '../assets/icons/pdf.svg' },
+        { icon: '../assets/icons/Setting.svg' }
+        // { icon: '../assets/icons/ProfileImage.svg' }
+    ];
+    setActiveMenu(index) {
+        this.activeIndex = index;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuComponent, selector: "app-menu", ngImport: i0, template: "<!-- AP 22JAN25 - Top menu ,Left side menu  -->\r\n<!-- menu.component.html -->\r\n<div class=\"top-bar\">\r\n    <button class=\"button share-button\">Share</button>\r\n    <button class=\"button publish-button\">Publish</button>\r\n</div>\r\n<div class=\"menu-sidebar\">\r\n  <!-- Logo Section -->\r\n  <div class=\"menu-logo\">\r\n    <img src=\"../assets/Nxt.png\">\r\n  </div>\r\n\r\n  <!-- Menu Items -->\r\n  <ul class=\"menu-list\">\r\n    <li\r\n      *ngFor=\"let item of menuItems; let i = index\"\r\n      class=\"menu-item\"\r\n      [class.active]=\"activeIndex === i\"\r\n      (click)=\"setActiveMenu(i)\"\r\n      [attr.aria-label]=\"item.label\"\r\n    >\r\n      <!-- Dynamic Icon -->\r\n      <img [src]=\"item.icon\" alt=\"Menu Icon\" class=\"menu-icon\" />\r\n    </li>\r\n  </ul>\r\n\r\n  <!-- Profile Section -->\r\n  <div class=\"menu-profile\">\r\n    <img src=\"../assets/icons/ProfileImage.svg\" />\r\n  </div>\r\n</div>\r\n\r\n", styles: [".top-bar{display:flex;justify-content:flex-end;padding:15px;background-color:#fff;border-bottom:1px solid #ccc;width:100%;position:absolute;top:-3px}.button{padding:10px 20px;margin-left:10px;font-size:1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.share-button{background-color:#e5e8ed;color:#384652}.share-button:hover,.publish-button{background-color:#3374f2;color:#fff}.publish-button:hover{background-color:#005f73}.menu-sidebar{width:74px;height:100vh;background-color:#fff;color:#94a3b8;display:flex;flex-direction:column;align-items:center;position:absolute;top:0;box-shadow:2px 0 5px #0000001a}.menu-logo img{width:40px;margin:20px 0}.menu-list{list-style-type:none;padding:0;margin-top:48px;flex:1}.menu-item{width:50px;height:50px;display:flex;justify-content:center;align-items:center;margin:10px 0;cursor:pointer;border-radius:8px;transition:background .3s ease}.menu-item.active,.menu-item:hover{background-color:#ffb300;border-radius:50px;color:#fff}.icon{font-size:20px}.menu-profile img{width:40px;border-radius:50%;margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-menu', template: "<!-- AP 22JAN25 - Top menu ,Left side menu  -->\r\n<!-- menu.component.html -->\r\n<div class=\"top-bar\">\r\n    <button class=\"button share-button\">Share</button>\r\n    <button class=\"button publish-button\">Publish</button>\r\n</div>\r\n<div class=\"menu-sidebar\">\r\n  <!-- Logo Section -->\r\n  <div class=\"menu-logo\">\r\n    <img src=\"../assets/Nxt.png\">\r\n  </div>\r\n\r\n  <!-- Menu Items -->\r\n  <ul class=\"menu-list\">\r\n    <li\r\n      *ngFor=\"let item of menuItems; let i = index\"\r\n      class=\"menu-item\"\r\n      [class.active]=\"activeIndex === i\"\r\n      (click)=\"setActiveMenu(i)\"\r\n      [attr.aria-label]=\"item.label\"\r\n    >\r\n      <!-- Dynamic Icon -->\r\n      <img [src]=\"item.icon\" alt=\"Menu Icon\" class=\"menu-icon\" />\r\n    </li>\r\n  </ul>\r\n\r\n  <!-- Profile Section -->\r\n  <div class=\"menu-profile\">\r\n    <img src=\"../assets/icons/ProfileImage.svg\" />\r\n  </div>\r\n</div>\r\n\r\n", styles: [".top-bar{display:flex;justify-content:flex-end;padding:15px;background-color:#fff;border-bottom:1px solid #ccc;width:100%;position:absolute;top:-3px}.button{padding:10px 20px;margin-left:10px;font-size:1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.share-button{background-color:#e5e8ed;color:#384652}.share-button:hover,.publish-button{background-color:#3374f2;color:#fff}.publish-button:hover{background-color:#005f73}.menu-sidebar{width:74px;height:100vh;background-color:#fff;color:#94a3b8;display:flex;flex-direction:column;align-items:center;position:absolute;top:0;box-shadow:2px 0 5px #0000001a}.menu-logo img{width:40px;margin:20px 0}.menu-list{list-style-type:none;padding:0;margin-top:48px;flex:1}.menu-item{width:50px;height:50px;display:flex;justify-content:center;align-items:center;margin:10px 0;cursor:pointer;border-radius:8px;transition:background .3s ease}.menu-item.active,.menu-item:hover{background-color:#ffb300;border-radius:50px;color:#fff}.icon{font-size:20px}.menu-profile img{width:40px;border-radius:50%;margin-bottom:20px}\n"] }]
+        }] });
+
 // export const MY_CUSTOM_FORMATS = {
 //   fullPickerInput: 'DD/MM/YYYY HH:mm:ss',
 //   useUtc: true,
@@ -10205,7 +11026,7 @@ const languages = [
 ];
 class NxtAppModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtAppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NxtAppModule, declarations: [NxtAppComponent,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NxtAppModule, bootstrap: [NxtAppComponent], declarations: [NxtAppComponent,
             QuestionnaireComponent,
             PickLocationComponent,
             CustomInputComponent,
@@ -10232,7 +11053,11 @@ class NxtAppModule {
             I18nComponent,
             I18nPipe,
             CustomImageComponent,
-            CustomRadioComponent], imports: [i1$2.QuillModule, // RS 06JAN2025 Initializes the QuillModule with default settings for integrating the Quill editor.
+            CustomRadioComponent,
+            //AP 22JAN2025 Added the below components
+            ElementComponent,
+            PropertiesComponent,
+            MenuComponent], imports: [i1$2.QuillModule, // RS 06JAN2025 Initializes the QuillModule with default settings for integrating the Quill editor.
             CustomRichTextComponent,
             CommonModule, FormsModule,
             // BrowserModule,
@@ -10245,6 +11070,7 @@ class NxtAppModule {
             NgSelectModule,
             GoogleMapsModule,
             MatTooltipModule,
+            DragDropModule, //AP 22JAN25 Added the DragDropModule
             //AgmCoreModule.forRoot({
             //  apiKey: GOOGLE_MAP_API_KEY,
             //  libraries: ['geometry', 'places', 'visualization', 'drawing']
@@ -10254,10 +11080,16 @@ class NxtAppModule {
             BookletComponent,
             SummaryPageComponent,
             I18nPipe,
-            I18nComponent] });
+            I18nComponent,
+            ElementComponent,
+            PropertiesComponent,
+            MenuComponent
+            // CustomRichTextComponent
+        ] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtAppModule, providers: [
             I18nService,
-            I18nPipe
+            I18nPipe,
+            FormBuilderService //AP 22JAN2025 Added the FormBuilderService
         ], imports: [QuillModule.forRoot(), // RS 06JAN2025 Initializes the QuillModule with default settings for integrating the Quill editor.
             CustomRichTextComponent,
             CommonModule, FormsModule,
@@ -10269,6 +11101,7 @@ class NxtAppModule {
             NgSelectModule,
             GoogleMapsModule,
             MatTooltipModule,
+            DragDropModule, //AP 22JAN25 Added the DragDropModule
             //AgmCoreModule.forRoot({
             //  apiKey: GOOGLE_MAP_API_KEY,
             //  libraries: ['geometry', 'places', 'visualization', 'drawing']
@@ -10288,7 +11121,7 @@ class NxtAppModule {
               "backgroundGradientStopColor": "#dd2e13",
               "backgroundStroke": "#d3cfcf",
               "title": [
-                        
+        
                         "%"
               ],
               // titleFontSize: 12,
@@ -10313,7 +11146,7 @@ class NxtAppModule {
               "outerStrokeLinecap": "inherit",
               "innerStrokeColor": "#f6dfdf",
               "title": [
-                        
+        
                 "%"
         ],
               "titleColor": "#e7d9d9",
@@ -10383,7 +11216,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         I18nComponent,
                         I18nPipe,
                         CustomImageComponent,
-                        CustomRadioComponent
+                        CustomRadioComponent,
+                        //AP 22JAN2025 Added the below components
+                        ElementComponent,
+                        PropertiesComponent,
+                        MenuComponent
                     ],
                     imports: [
                         QuillModule.forRoot(), // RS 06JAN2025 Initializes the QuillModule with default settings for integrating the Quill editor.
@@ -10399,6 +11236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         NgSelectModule,
                         GoogleMapsModule,
                         MatTooltipModule,
+                        DragDropModule, //AP 22JAN25 Added the DragDropModule
                         //AgmCoreModule.forRoot({
                         //  apiKey: GOOGLE_MAP_API_KEY,
                         //  libraries: ['geometry', 'places', 'visualization', 'drawing']
@@ -10418,7 +11256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                           "backgroundGradientStopColor": "#dd2e13",
                           "backgroundStroke": "#d3cfcf",
                           "title": [
-                                    
+                    
                                     "%"
                           ],
                           // titleFontSize: 12,
@@ -10443,7 +11281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                           "outerStrokeLinecap": "inherit",
                           "innerStrokeColor": "#f6dfdf",
                           "title": [
-                                    
+                    
                             "%"
                     ],
                           "titleColor": "#e7d9d9",
@@ -10483,6 +11321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             "showSubtitle": false
                         })
                     ],
+                    bootstrap: [NxtAppComponent],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     exports: [NxtAppComponent,
                         QuestionnaireComponent,
@@ -10490,11 +11329,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SummaryPageComponent,
                         I18nPipe,
                         I18nComponent,
+                        ElementComponent,
+                        PropertiesComponent,
+                        MenuComponent
                         // CustomRichTextComponent
                     ],
                     providers: [
                         I18nService,
-                        I18nPipe
+                        I18nPipe,
+                        FormBuilderService //AP 22JAN2025 Added the FormBuilderService
                     ]
                     // providers: [
                     //   { provide: OWL_MOMENT_DATE_TIME_ADAPTER_OPTIONS, useValue: { useUtc: false } },
@@ -10511,5 +11354,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BookletComponent, I18nComponent, I18nPipe, NxtAppComponent, NxtAppModule, NxtAppService, QuestionbookComponent, QuestionnaireComponent, SalesforceService, SummaryPageComponent };
+export { BookletComponent, ElementComponent, I18nComponent, I18nPipe, MenuComponent, NxtAppComponent, NxtAppModule, NxtAppService, PropertiesComponent, QuestionbookComponent, QuestionnaireComponent, SalesforceService, SummaryPageComponent };
 //# sourceMappingURL=rangertechnologies-ngnxt.mjs.map