@rangertechnologies/ngnxt 2.1.85 → 2.1.86

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -10252,6 +10252,7 @@ class FormBuilderService {
     // book: { bookQuestionsMap: { unique_id: { subQuestions: any[]; }; }; };
     constructor() {
         // Load saved elements from localStorage
+        this.formElements = [];
         const savedFormElements = localStorage.getItem('formElements');
         if (savedFormElements) {
             this.formElements = JSON.parse(savedFormElements);
@@ -10268,9 +10269,10 @@ class FormBuilderService {
         this.elementComponent = component;
     }
     // Add a new element to the form
-    addElement(element, parentId = null) {
+    addElement(element) {
+        debugger;
         // const savedFormElements = localStorage.getItem('formElements');
-        console.log("aswin", this.formElements.length);
+        console.log("length", this.formElements.length);
         if (this.formElements.length == 0) {
             console.log("savedFormElements", this.formElements);
             // this.formElements = JSON.parse(savedFormElements);
@@ -10303,7 +10305,7 @@ class FormBuilderService {
         }
         this.formElements.push(element);
         localStorage.setItem('formElements', JSON.stringify(this.formElements));
-        this.formElementsSubject.next([...this.formElements]);
+        // this.formElementsSubject.next([...this.formElements]);
     }
     updateElement(index, updates) {
         const elements = [...this.getElements()];
@@ -10360,26 +10362,12 @@ class FormBuilderService {
         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
+    // Remove an element by ID
     // Save elements to localStorage and update the subject
-    removeElementComponent(uid) {
+    removeElementComponent(id) {
         this.tempElem = [];
         this.formElements.forEach((element) => {
-            if (element.uid !== uid) {
+            if (element.id !== id) {
                 this.tempElem.push(element);
             }
         });
@@ -10417,7 +10405,6 @@ class ElementComponent {
         console.log("bookletJSON==" + this.bookletJSON);
         if (this.bookletJSON) {
             // AP-23JAN25 - empty string to clear the local storage
-            localStorage.setItem('formElements', "");
             localStorage.setItem('status', ("edit"));
             localStorage.setItem('unique_id', (this.bookletId));
             this.formElements = [];
@@ -10480,8 +10467,7 @@ class ElementComponent {
             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' }
+                { label: 'Option 1', value: '', type: 'text', key: 'option1' }
             ] : null,
         };
         this.formBuilderService.addElement(newElement);
@@ -10496,7 +10482,7 @@ class ElementComponent {
     // Remove an element by index
     removeElement(field, index) {
         console.log('remove', index);
-        this.formBuilderService.removeElementComponent(field.uid);
+        this.formBuilderService.removeElementComponent(field.id);
         this.formElements = this.formBuilderService.getElements();
     }
     getFontStyles(field) {
@@ -10528,11 +10514,11 @@ class ElementComponent {
         return styles;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\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=\"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=\"\" style=\"padding: 10px; 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 : 'Select Date' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n         <!-- Email -->\r\n<div *ngIf=\"field.type === 'Email'\" class=\"\" style=\"padding: 10px; 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 : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n          <!-- Numbers -->\r\n<div *ngIf=\"field.type === 'Numbers'\" class=\"\" style=\"padding: 10px; 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 : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n,\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=\"\" style=\"padding: 10px; 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\">\r\n          {{ field.questionText ? field.questionText : 'Enter your text' }}\r\n          <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\r\n        </label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <textarea\r\n        [placeholder]=\"field.question || 'Enter detailed text here...'\"\r\n        [style.height.px]=\"field.size || 100\"\r\n        [style.width.%]=\"100\"\r\n        [readonly]=\"field.readOnly\"\r\n        [class.hidden]=\"field.isHide\"\r\n        [(ngModel)]=\"field.text\">\r\n      </textarea>\r\n    </div>\r\n  </div>\r\n</div>\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=\"\" style=\"padding: 10px; 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 : 'Book Title' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Label -->\r\n<div *ngIf=\"field.type === 'Label'\" class=\"\" style=\"padding: 10px; 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 : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n</ng-container>\r\n      </div>\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\r\n\r\n\r\n\r\n", styles: [".center-frame{width:71%;padding:26px;box-sizing:border-box;background-color:#edf1f5}.box{box-sizing:border-box}.form-builder{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;position:sticky;bottom:91px;width:78%;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:37rem;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}.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,.image-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,.image-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.file-field-container input[type=file],.image-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}.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], 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=\"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 *ngIf=\"field.type === 'CheckBox'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\">\r\n      <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n    </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 : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <div class=\"checkbox-container\">\r\n        <label *ngFor=\"let option of field.options\" class=\"option-label\">\r\n          <input type=\"checkbox\" [checked]=\"option.selected\" />\r\n          <span>{{ option.label }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n   <!-- Dropdown -->\r\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\">\r\n      <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n    </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 : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <select class=\"dropdown-options\" [(ngModel)]=\"field.selectedOption\">\r\n        <option *ngFor=\"let option of field.options\" [value]=\"option\">{{ option }}</option>\r\n      </select>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n         <!-- Calendar -->\r\n<div *ngIf=\"['Calendar'].includes(field.type)\" class=\"\" style=\"padding: 10px; 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 : 'Select Date' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n         <!-- Email -->\r\n<div *ngIf=\"field.type === 'Email'\" class=\"\" style=\"padding: 10px; 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 : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n          <!-- Numbers -->\r\n<div *ngIf=\"field.type === 'Numbers'\" class=\"\" style=\"padding: 10px; 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 : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\r\n    </div>\r\n  </div>\r\n</div>\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=\"\" style=\"padding: 10px; 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\">\r\n          {{ field.questionText ? field.questionText : 'Enter your text' }}\r\n          <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\r\n        </label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <textarea\r\n        [placeholder]=\"field.question || 'Enter detailed text here...'\"\r\n        [style.height.px]=\"field.size || 100\"\r\n        [style.width.%]=\"100\"\r\n        [readonly]=\"field.readOnly\"\r\n        [class.hidden]=\"field.isHide\"\r\n        [(ngModel)]=\"field.text\">\r\n      </textarea>\r\n    </div>\r\n  </div>\r\n</div>\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\r\n  src=\"../assets/icons/Trash.svg\"\r\n  alt=\"Delete\"\r\n  (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=\"\" style=\"padding: 10px; 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 : 'Book Title' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Label -->\r\n<div *ngIf=\"field.type === 'Label'\" class=\"\" style=\"padding: 10px; 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 : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n</ng-container>\r\n      </div>\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\r\n\r\n\r\n\r\n", styles: [".center-frame{width:71%;padding:26px;box-sizing:border-box;background-color:#edf1f5}.box{box-sizing:border-box}.form-builder{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;position:sticky;bottom:91px;width:78%;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}@media (max-width: 1200px){.form-builder{width:85%}}@media (max-width: 768px){.form-builder{width:95%;gap:5px}}@media (max-width: 480px){.form-builder{flex-direction:column;gap:8px}}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:37rem;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}.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,.image-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,.image-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.file-field-container input[type=file],.image-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,.image-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}.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}.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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=\"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=\"\" style=\"padding: 10px; 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 : 'Select Date' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n         <!-- Email -->\r\n<div *ngIf=\"field.type === 'Email'\" class=\"\" style=\"padding: 10px; 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 : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n          <!-- Numbers -->\r\n<div *ngIf=\"field.type === 'Numbers'\" class=\"\" style=\"padding: 10px; 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 : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n,\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=\"\" style=\"padding: 10px; 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\">\r\n          {{ field.questionText ? field.questionText : 'Enter your text' }}\r\n          <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\r\n        </label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <textarea\r\n        [placeholder]=\"field.question || 'Enter detailed text here...'\"\r\n        [style.height.px]=\"field.size || 100\"\r\n        [style.width.%]=\"100\"\r\n        [readonly]=\"field.readOnly\"\r\n        [class.hidden]=\"field.isHide\"\r\n        [(ngModel)]=\"field.text\">\r\n      </textarea>\r\n    </div>\r\n  </div>\r\n</div>\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=\"\" style=\"padding: 10px; 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 : 'Book Title' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Label -->\r\n<div *ngIf=\"field.type === 'Label'\" class=\"\" style=\"padding: 10px; 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 : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n</ng-container>\r\n      </div>\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\r\n\r\n\r\n\r\n", styles: [".center-frame{width:71%;padding:26px;box-sizing:border-box;background-color:#edf1f5}.box{box-sizing:border-box}.form-builder{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;position:sticky;bottom:91px;width:78%;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:37rem;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}.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,.image-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,.image-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.file-field-container input[type=file],.image-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}.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"] }]
+            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=\"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 *ngIf=\"field.type === 'CheckBox'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\">\r\n      <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n    </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 : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <div class=\"checkbox-container\">\r\n        <label *ngFor=\"let option of field.options\" class=\"option-label\">\r\n          <input type=\"checkbox\" [checked]=\"option.selected\" />\r\n          <span>{{ option.label }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n   <!-- Dropdown -->\r\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\">\r\n      <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n    </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 : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <select class=\"dropdown-options\" [(ngModel)]=\"field.selectedOption\">\r\n        <option *ngFor=\"let option of field.options\" [value]=\"option\">{{ option }}</option>\r\n      </select>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n         <!-- Calendar -->\r\n<div *ngIf=\"['Calendar'].includes(field.type)\" class=\"\" style=\"padding: 10px; 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 : 'Select Date' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n         <!-- Email -->\r\n<div *ngIf=\"field.type === 'Email'\" class=\"\" style=\"padding: 10px; 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 : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n          <!-- Numbers -->\r\n<div *ngIf=\"field.type === 'Numbers'\" class=\"\" style=\"padding: 10px; 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 : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\r\n    </div>\r\n  </div>\r\n</div>\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=\"\" style=\"padding: 10px; 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\">\r\n          {{ field.questionText ? field.questionText : 'Enter your text' }}\r\n          <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\r\n        </label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <textarea\r\n        [placeholder]=\"field.question || 'Enter detailed text here...'\"\r\n        [style.height.px]=\"field.size || 100\"\r\n        [style.width.%]=\"100\"\r\n        [readonly]=\"field.readOnly\"\r\n        [class.hidden]=\"field.isHide\"\r\n        [(ngModel)]=\"field.text\">\r\n      </textarea>\r\n    </div>\r\n  </div>\r\n</div>\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\r\n  src=\"../assets/icons/Trash.svg\"\r\n  alt=\"Delete\"\r\n  (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=\"\" style=\"padding: 10px; 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 : 'Book Title' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Label -->\r\n<div *ngIf=\"field.type === 'Label'\" class=\"\" style=\"padding: 10px; 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 : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n</ng-container>\r\n      </div>\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\r\n\r\n\r\n\r\n", styles: [".center-frame{width:71%;padding:26px;box-sizing:border-box;background-color:#edf1f5}.box{box-sizing:border-box}.form-builder{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;position:sticky;bottom:91px;width:78%;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}@media (max-width: 1200px){.form-builder{width:85%}}@media (max-width: 768px){.form-builder{width:95%;gap:5px}}@media (max-width: 480px){.form-builder{flex-direction:column;gap:8px}}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:37rem;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}.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,.image-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,.image-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.file-field-container input[type=file],.image-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,.image-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}.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}.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: [{
@@ -10554,6 +10540,8 @@ class PropertiesComponent {
     selectedElementIndex = -1;
     // @Input() selectedElement: any;
     selectedElementType = '';
+    api = '';
+    apiMethod = 'POST';
     selectedAlign = 'align-left'; // Add this property
     selectedStyles = []; // Using array since multiple styles can be selected
     errorMessage = '';
@@ -10998,24 +10986,28 @@ class PropertiesComponent {
         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) => {
+        // const apiURL = 'https://dev-api.rangerfusion.com/nxt/';
+        this.http.request(this.apiMethod, this.api, { body: 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;top:0;width:25%}.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType", api: "api", apiMethod: "apiMethod" }, 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  <div class=\"properties\">\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  type=\"checkbox\"/>\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</div>\r\n</div>\r\n", styles: [".container{position:absolute;right:0;top:0;width:25%}.all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 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;top:0;width:25%}.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"] }]
+            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  <div class=\"properties\">\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  type=\"checkbox\"/>\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</div>\r\n</div>\r\n", styles: [".container{position:absolute;right:0;top:0;width:25%}.all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { colorWheel: [{
                 type: ViewChild,
                 args: ['colorWheel']
             }], selectedElementType: [{
                 type: Input
+            }], api: [{
+                type: Input
+            }], apiMethod: [{
+                type: Input
             }] } });
 
 // AP 22JAN25