@rangertechnologies/ngnxt 2.1.101 → 2.1.103

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -8292,10 +8292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class SearchBoxComponent {
-    sfService;
-    cdr;
     dataService;
-    route;
     i18nService;
     placeHolderText;
     auto;
@@ -8316,37 +8313,16 @@ class SearchBoxComponent {
     el;
     serv = 'api';
     tkn = '';
-    constructor(sfService, cdr, dataService, route, el, i18nService) {
-        this.sfService = sfService;
-        this.cdr = cdr;
+    constructor(dataService, i18nService) {
         this.dataService = dataService;
-        this.route = route;
         this.i18nService = i18nService;
     }
-    // RS 14FEB2025
-    // Extract all string values from an object
-    flattenObjectValues(obj) {
-        let result = [];
-        for (const key in obj) {
-            if (obj.hasOwnProperty(key)) {
-                const value = obj[key];
-                if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
-                    result.push(this.flattenObjectValues(value));
-                }
-                else if (value !== null && value !== undefined) {
-                    result.push(String(value).toLowerCase());
-                }
-            }
-        }
-        return result.join(' ');
-    }
     ngOnInit() {
         //  VD 03May- search changes
         if (this.apiMeta) {
             let apiObj = JSON.parse(this.apiMeta);
             this.SearchItem = apiObj.field;
         }
-        // this.resetComponentState();
     }
     ////RS 03FEB2025
     // Resets state when filterName or apiMeta changes to reflect updated data
@@ -8401,11 +8377,10 @@ class SearchBoxComponent {
                     response = apiResponse;
                 }
                 let results = [];
-                let searchTerms = keyword.toLowerCase().split(" ");
+                let searchTerms = keyword.toLowerCase()?.split(" ");
                 for (let i = 0; i < response.length; i++) {
                     let obj = response[i];
-                    // Flatten all values including nested objects
-                    let combinedValues = this.flattenObjectValues(obj);
+                    let combinedValues = this.getCombinedValuesFromColumns(obj, apiObj.field);
                     let match = searchTerms.every(term => combinedValues.includes(term));
                     if (match) {
                         results.push(obj);
@@ -8413,14 +8388,70 @@ class SearchBoxComponent {
                 }
                 this.noResult = results.length === 0;
                 this.finalResults = results;
-                this.cdr.detectChanges();
             });
         }
     };
+    // SKS27FEB Helper functions
+    getNestedValue(obj, path) {
+        //SKS27FEB Convert array indexes to dot notation (e.g., [0] -> .0)
+        const processedPath = path.replace(/\[(\d+)\]/g, '.$1');
+        const parts = processedPath.split('.');
+        let current = obj;
+        for (const part of parts) {
+            if (!current || typeof current !== 'object')
+                return '';
+            current = current[part];
+        }
+        return current !== null && current !== undefined
+            ? String(current).toLowerCase().trim()
+            : '';
+    }
+    getCombinedValuesFromColumns(obj, columns) {
+        const values = [];
+        // SKS28FEB check if columns is an array
+        if (typeof columns === 'string' && !Array.isArray(columns)) {
+            columns = [columns];
+        }
+        for (const column of columns) {
+            const value = this.getNestedValue(obj, column);
+            if (value) {
+                values.push(value);
+            }
+        }
+        return values.join(' ');
+    }
+    // SKS27FEB get value from data specific column
+    getValues(element, columns) {
+        const result = {};
+        // SKS28FEB check if columns is an array
+        if (typeof columns === 'string' && !Array.isArray(columns)) {
+            columns = [columns];
+        }
+        columns.forEach((column) => {
+            let tempElement = element;
+            let flds = column?.split('.');
+            for (let i = 0; i < flds.length; i++) {
+                let splitFlds = flds[i]?.split('[');
+                if (splitFlds.length === 1) {
+                    tempElement = tempElement[flds[i]] || '';
+                }
+                else {
+                    let index = Number(splitFlds[1]?.split(']')[0]);
+                    tempElement = tempElement[splitFlds[0]]?.[index] || '';
+                }
+            }
+            result[column] = tempElement;
+        });
+        return result;
+    }
+    // SKS27FEB column value get funtion
+    getKeys(obj) {
+        return Object.keys(obj);
+    }
     clickItem(event) {
-        // console.log('inside clickItem of ' + event.target.value);
+        // console.log('inside clickItem of ' + JSON.stringify(event, null, 2));
         let apiObj = JSON.parse(this.apiMeta);
-        this.filterName = event[apiObj.field];
+        this.filterName = event[apiObj.defaultField || apiObj.field[0] || apiObj.field]; //SKS27FEB defaultField is used for showing a search field input if field have array of data
         let change = new ChangeWrapper(); // ChangeWrapper = JSON.parse('{}');
         change.fromQuestionId = this.id;
         change.valueObj = event;
@@ -8429,16 +8460,14 @@ class SearchBoxComponent {
     }
     //RS 03FEB2025
     // Resets component state when the component is destroyed
-    ngOnDestroy() {
-        this.resetComponentState();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBoxComponent, deps: [{ token: SalesforceService }, { token: i0.ChangeDetectorRef }, { token: DataService }, { token: i1.ActivatedRoute }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchBoxComponent, selector: "lib-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly", filterName: "filterName" }, outputs: { searchValueChange: "searchValueChange" }, viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\n  <input #auto id=\"searchbox-style\"\n          (blur)=\"clearList()\"\n          [(ngModel)]=\"filterName\"\n          type=\"text\"\n          name=\"name\"\n          [readOnly]=\"readOnly\"\n          [placeholder]=\"placeHolderText\"\n          style=\"margin: 0 !important; padding-right: 30px;\"\n          class=\"searchInput she-line-input form-control\"\n          (focusin)=\"getSourceDataLocal($event)\"\n          (input)=\"getSourceDataLocal($event)\">\n  <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\n  <div *ngIf=\"finalResults.length > 0 && showSuggestion\"\n    style=\"max-height: 20vh;border: 1px solid #d2d4d6;overflow: scroll; min-width:100px\"\n       class=\"suggestions-container\">\n      <!-- HA 20DEC23 Uncommented the logic -->\n       <!-- VD 03May- search changes -->\n      <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\n        <!-- VD 26Jun24 - id condition removed -->\n          <div class=\"grid-x align-middle\" style=\"\">\n              <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\n                  <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\n              </div>\n              <div class=\"cell auto\" style=\"text-align: left; padding:5px 8px 0 8px\">\n                <!--// VD 26JUN24 - pipe changes -->\n                <!-- RS 29JAN25 -->\n                <h4 >{{ '' | getValue: item : SearchItem  }}</h4>\n              </div>\n          </div>\n      </div>\n      <!-- HA 20DEC23 For Commented this for future purpose -->\n      <!-- <table class=\"table table-striped table-bordered\">\n          <thead>\n            <tr>\n              <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\n              <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\n              <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\n              <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\n              <td>{{ item.firstName }}</td>\n              <td>{{ item.lastName }}</td>\n              <td>{{ item.division }}</td>\n              <td>{{ item.numberPlate }}</td>\n            </tr>\n          </tbody>\n        </table> -->\n  </div>\n</div>\n\n", styles: ["#searchbox-style{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"/><path d=\"M20 20L17 17\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>');background-position:right 5px center;background-repeat:no-repeat;background-size:24px;padding-right:35px}\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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }] });
+    ngOnDestroy() { this.resetComponentState(); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBoxComponent, deps: [{ token: DataService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchBoxComponent, selector: "lib-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly", filterName: "filterName" }, outputs: { searchValueChange: "searchValueChange" }, viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\n  <input #auto id=\"searchbox-style\"\n          (blur)=\"clearList()\"\n          [(ngModel)]=\"filterName\"\n          type=\"text\"\n          name=\"name\"\n          [readOnly]=\"readOnly\"\n          [placeholder]=\"placeHolderText\"\n          style=\"margin: 0 !important; padding-right: 30px;\"\n          class=\"searchInput she-line-input form-control\"\n          (focusin)=\"getSourceDataLocal($event)\"\n          (input)=\"getSourceDataLocal($event)\">\n  <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\n  <div *ngIf=\"finalResults.length > 0 && showSuggestion\"\n    style=\"max-height: 20vh;border: 1px solid #d2d4d6;overflow: scroll; min-width:100px\"\n       class=\"suggestions-container\">\n      <!-- HA 20DEC23 Uncommented the logic -->\n       <!-- VD 03May- search changes -->\n      <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\n        <!-- VD 26Jun24 - id condition removed -->\n          <div class=\"grid-x align-middle\" style=\"\">\n              <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\n                  <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\n              </div>\n              <div class=\"cell auto\" style=\"text-align: left; padding:5px 8px 0 8px; display: flex; gap: 5px; \">\n                <!--// VD 26JUN24 - pipe changes -->\n                <!-- RS 29JAN25 -->\n                <div style=\"display: flex;\" *ngFor=\"let key of getKeys(getValues(item, SearchItem))\">\n                  <div>\n                    {{ getValues(item, SearchItem)[key] }}\n                  </div>\n                </div>                \n              </div>\n          </div>\n      </div>\n      <!-- HA 20DEC23 For Commented this for future purpose -->\n      <!-- <table class=\"table table-striped table-bordered\">\n          <thead>\n            <tr>\n              <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\n              <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\n              <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\n              <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\n              <td>{{ item.firstName }}</td>\n              <td>{{ item.lastName }}</td>\n              <td>{{ item.division }}</td>\n              <td>{{ item.numberPlate }}</td>\n            </tr>\n          </tbody>\n        </table> -->\n  </div>\n</div>\n\n", styles: ["#searchbox-style{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"/><path d=\"M20 20L17 17\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>');background-position:right 5px center;background-repeat:no-repeat;background-size:24px;padding-right:35px}\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.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: SearchBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-search-box', template: "<!-- // VD 12Jun24 - readonly change-->\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\n  <input #auto id=\"searchbox-style\"\n          (blur)=\"clearList()\"\n          [(ngModel)]=\"filterName\"\n          type=\"text\"\n          name=\"name\"\n          [readOnly]=\"readOnly\"\n          [placeholder]=\"placeHolderText\"\n          style=\"margin: 0 !important; padding-right: 30px;\"\n          class=\"searchInput she-line-input form-control\"\n          (focusin)=\"getSourceDataLocal($event)\"\n          (input)=\"getSourceDataLocal($event)\">\n  <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\n  <div *ngIf=\"finalResults.length > 0 && showSuggestion\"\n    style=\"max-height: 20vh;border: 1px solid #d2d4d6;overflow: scroll; min-width:100px\"\n       class=\"suggestions-container\">\n      <!-- HA 20DEC23 Uncommented the logic -->\n       <!-- VD 03May- search changes -->\n      <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\n        <!-- VD 26Jun24 - id condition removed -->\n          <div class=\"grid-x align-middle\" style=\"\">\n              <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\n                  <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\n              </div>\n              <div class=\"cell auto\" style=\"text-align: left; padding:5px 8px 0 8px\">\n                <!--// VD 26JUN24 - pipe changes -->\n                <!-- RS 29JAN25 -->\n                <h4 >{{ '' | getValue: item : SearchItem  }}</h4>\n              </div>\n          </div>\n      </div>\n      <!-- HA 20DEC23 For Commented this for future purpose -->\n      <!-- <table class=\"table table-striped table-bordered\">\n          <thead>\n            <tr>\n              <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\n              <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\n              <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\n              <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\n              <td>{{ item.firstName }}</td>\n              <td>{{ item.lastName }}</td>\n              <td>{{ item.division }}</td>\n              <td>{{ item.numberPlate }}</td>\n            </tr>\n          </tbody>\n        </table> -->\n  </div>\n</div>\n\n", styles: ["#searchbox-style{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"/><path d=\"M20 20L17 17\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>');background-position:right 5px center;background-repeat:no-repeat;background-size:24px;padding-right:35px}\n"] }]
-        }], ctorParameters: () => [{ type: SalesforceService }, { type: i0.ChangeDetectorRef }, { type: DataService }, { type: i1.ActivatedRoute }, { type: i0.ElementRef }, { type: I18nService }], propDecorators: { placeHolderText: [{
+            args: [{ selector: 'lib-search-box', template: "<!-- // VD 12Jun24 - readonly change-->\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\n  <input #auto id=\"searchbox-style\"\n          (blur)=\"clearList()\"\n          [(ngModel)]=\"filterName\"\n          type=\"text\"\n          name=\"name\"\n          [readOnly]=\"readOnly\"\n          [placeholder]=\"placeHolderText\"\n          style=\"margin: 0 !important; padding-right: 30px;\"\n          class=\"searchInput she-line-input form-control\"\n          (focusin)=\"getSourceDataLocal($event)\"\n          (input)=\"getSourceDataLocal($event)\">\n  <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\n  <div *ngIf=\"finalResults.length > 0 && showSuggestion\"\n    style=\"max-height: 20vh;border: 1px solid #d2d4d6;overflow: scroll; min-width:100px\"\n       class=\"suggestions-container\">\n      <!-- HA 20DEC23 Uncommented the logic -->\n       <!-- VD 03May- search changes -->\n      <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\n        <!-- VD 26Jun24 - id condition removed -->\n          <div class=\"grid-x align-middle\" style=\"\">\n              <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\n                  <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\n              </div>\n              <div class=\"cell auto\" style=\"text-align: left; padding:5px 8px 0 8px; display: flex; gap: 5px; \">\n                <!--// VD 26JUN24 - pipe changes -->\n                <!-- RS 29JAN25 -->\n                <div style=\"display: flex;\" *ngFor=\"let key of getKeys(getValues(item, SearchItem))\">\n                  <div>\n                    {{ getValues(item, SearchItem)[key] }}\n                  </div>\n                </div>                \n              </div>\n          </div>\n      </div>\n      <!-- HA 20DEC23 For Commented this for future purpose -->\n      <!-- <table class=\"table table-striped table-bordered\">\n          <thead>\n            <tr>\n              <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\n              <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\n              <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\n              <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\n              <td>{{ item.firstName }}</td>\n              <td>{{ item.lastName }}</td>\n              <td>{{ item.division }}</td>\n              <td>{{ item.numberPlate }}</td>\n            </tr>\n          </tbody>\n        </table> -->\n  </div>\n</div>\n\n", styles: ["#searchbox-style{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"/><path d=\"M20 20L17 17\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>');background-position:right 5px center;background-repeat:no-repeat;background-size:24px;padding-right:35px}\n"] }]
+        }], ctorParameters: () => [{ type: DataService }, { type: I18nService }], propDecorators: { placeHolderText: [{
                 type: Input
             }], auto: [{
                 type: ViewChild,
@@ -10634,10 +10663,10 @@ class ElementComponent {
     formContainer;
     bookletJSON;
     bookletId;
-    dropdownOpen = false; // Tracks whether the dropdown is open or closed
     field;
     formElements = [];
     elements = [];
+    bookId;
     constructor(formBuilderService) {
         this.formBuilderService = formBuilderService;
     }
@@ -10683,8 +10712,8 @@ class ElementComponent {
         this.formBuilderService.clearElements();
         const bookQuestionsMapKeys = Object.keys(this.bookletJSON.bookQuestionsMap || {});
         // Assign the first key from bookQuestionsMap to bookletId
-        this.bookletId = bookQuestionsMapKeys[0];
-        this.bookletJSON.bookQuestionsMap[this.bookletId].subQuestions.forEach(newElement => {
+        this.bookId = bookQuestionsMapKeys[0];
+        this.bookletJSON.bookQuestionsMap[this.bookId].subQuestions.forEach(newElement => {
             if (this.bookletJSON.sqOptions && this.bookletJSON.sqOptions[newElement.id]) {
                 newElement.options = this.bookletJSON.sqOptions[newElement.id].options;
             }
@@ -10785,11 +10814,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 }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n   <!-- Form Builder Section All Elements -->\n<div class=\"form-builder\">\n    <ng-container *ngFor=\"let element of elements\">\n      <div class=\"element\" (click)=\"addElement(element.type)\">\n        <img src=\"../assets/icons/{{ element.img }}.svg\">\n        <div class=\"hover-label\">{{ element.label }}</div>\n      </div>\n    </ng-container>\n</div>\n  \n<div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n  <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n  <!-- AP-29JAN25 remove empty classes -->\n  <!-- TextBox -->\n  <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>  \n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n      <div class=\"label-container\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>    \n      <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n      [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n    </div>\n  </div>\n</div>\n\n  <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">   \n          <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <div class=\"checkbox-options-container\">\n          <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n            <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\">\n            <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n          </div>\n        </div>\n      </div>\n    </div>\n</div>  \n\n  <!-- AP-29JAN25 radio-button design check -->\n  <!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n       <div class=\"label-container\">   \n                <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <div class=\"radio-options-container\">\n                <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                    <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"  [value]=\"option.value\"\n                        [(ngModel)]=\"field.selectedValue\" class=\"radio-input\">\n                    <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n \n  <!-- AP-29JAN25 drop-down design check -->\n  <!-- Dropdown Field -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">   \n          <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <select id=\"options\" class=\"dropdown\">\n          <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.value }} </option>\n        </select>\n      </div>\n    </div>\n</div>\n\n  <!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\"  class=\"delete-icon\" />\n      </div>\n      <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n    </div>\n  </div>\n</div>\n\n  <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n          <div class=\"label-container\">\n            <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Label' }} </label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>        \n          <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n                 [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n        </div>\n      </div>\n</div>\n    \n  <!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n       <div class=\"field-wrapper\">\n         <div class=\"field-content\">\n           <div class=\"label-container\">\n             <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n             <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n           </div>          \n           <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n                  [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n         </div>\n       </div>\n</div>\n     \n  <!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <label>{{ field.questionText }}</label>\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n\n <!-- TextArea -->\n <!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n      <div class=\"label-container\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n          <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n        </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>    \n      <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n        [readonly]=\"field.readOnly\" [class.hidden]=\"field.isHide\" [(ngModel)]=\"field.text\">\n      </textarea>\n    </div>\n  </div>\n</div>\n\n<!-- AP-29JAN25 Image design change -->\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n      <div class=\"field-wrapper\">\n       <div class=\"field-content\">\n         <div class=\"label-container\">\n        <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"file\" accept=\"image/*\" class=\"custom-input\" />\n    </div>\n  </div>\n</div>\n\n  <!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <button>{{ field.questionText }}</button>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n\n  <!-- File -->\n  <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n      <div class=\"label-container\">\n   <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n   <img  src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"file\" class=\"custom-input\" />\n  </div>\n </div>\n</div>\n\n  <!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n  <label>{{ field.questionText }}</label>\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n  </table>\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n  <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n    </div>\n  </div>\n</div> -->\n\n  <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n   <div class=\"label-container\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n      </div>\n    </div>\n  </div>\n</div>\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex}.form-builder{width:25%;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#e9ecef;cursor:pointer;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:14px;font-weight:500;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:16px;font-weight:600}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid blue;background-color:#0000ff1a}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n<!-- Form Builder Section All Elements -->\n<div class=\"form-builder\">\n    <ng-container *ngFor=\"let element of elements\">\n      <div class=\"element\" (click)=\"addElement(element.type)\">\n        <img src=\"../assets/icons/{{ element.img }}.svg\">\n        <div class=\"hover-label\">{{ element.label }}</div>\n      </div>\n    </ng-container>\n</div>\n  \n<div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n<ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n<!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>  \n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n      <div class=\"label-container\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>    \n      <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n      [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n    </div>\n  </div>\n</div>\n\n<!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n          <div class=\"field-wrapper\">\n            <div class=\"field-content\">\n              <div class=\"label-container\">\n          <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\"  class=\"delete-icon\" />\n        </div>\n        <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n      </div>\n    </div>\n</div>\n\n<!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n          <div class=\"label-container\">\n            <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Label' }} </label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>        \n          <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n                 [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n        </div>\n      </div>\n</div>\n\n<!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>          \n            <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n                   [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n          </div>\n        </div>\n</div>\n      \n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n     <div class=\"field-content\">\n       <div class=\"label-container\">\n         <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n           <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n         </label>\n         <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n       </div>    \n       <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n         [readonly]=\"field.readOnly\" [class.hidden]=\"field.isHide\" [(ngModel)]=\"field.text\">\n       </textarea>\n     </div>\n   </div>\n</div>\n\n<!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n   <div class=\"label-container\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n      <div class=\"field-wrapper\">\n       <div class=\"field-content\">\n         <div class=\"label-container\">\n        <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"file\" accept=\"image/*\" class=\"custom-input\" />\n    </div>\n  </div>\n</div>\n\n <!-- File -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">\n     <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n     <img  src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n   </div>\n   <input type=\"file\" class=\"custom-input\" />\n    </div>\n   </div>\n</div>\n  \n<!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">   \n          <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <div class=\"checkbox-options-container\">\n          <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n            <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\">\n            <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n          </div>\n        </div>\n      </div>\n    </div>\n</div>  \n\n<!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n       <div class=\"label-container\">   \n                <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <div class=\"radio-options-container\">\n                <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                    <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"  [value]=\"option.value\"\n                        [(ngModel)]=\"field.selectedValue\" class=\"radio-input\">\n                    <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.label }}</label>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n \n<!-- Dropdown -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">   \n          <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <select id=\"options\" class=\"dropdown\">\n          <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.label }} </option>\n        </select>\n      </div>\n    </div>\n</div>\n    \n<!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n  <label>{{ field.questionText }}</label>\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n  </table>\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n  <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n    </div>\n  </div>\n</div> -->\n\n<!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <label>{{ field.questionText }}</label>\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n  \n<!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <button>{{ field.questionText }}</button>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex;border:10px solid #86A8CD;border-right-width:0}.form-builder{width:25%;height:100vh;overflow-y:auto;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#e9ecef;cursor:pointer;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:14px;font-weight:500;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:100vh}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:16px;font-weight:600}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid blue;background-color:#0000ff1a}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n   <!-- Form Builder Section All Elements -->\n<div class=\"form-builder\">\n    <ng-container *ngFor=\"let element of elements\">\n      <div class=\"element\" (click)=\"addElement(element.type)\">\n        <img src=\"../assets/icons/{{ element.img }}.svg\">\n        <div class=\"hover-label\">{{ element.label }}</div>\n      </div>\n    </ng-container>\n</div>\n  \n<div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n  <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n  <!-- AP-29JAN25 remove empty classes -->\n  <!-- TextBox -->\n  <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>  \n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n      <div class=\"label-container\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>    \n      <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n      [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n    </div>\n  </div>\n</div>\n\n  <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">   \n          <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <div class=\"checkbox-options-container\">\n          <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n            <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\">\n            <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n          </div>\n        </div>\n      </div>\n    </div>\n</div>  \n\n  <!-- AP-29JAN25 radio-button design check -->\n  <!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n       <div class=\"label-container\">   \n                <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <div class=\"radio-options-container\">\n                <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                    <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"  [value]=\"option.value\"\n                        [(ngModel)]=\"field.selectedValue\" class=\"radio-input\">\n                    <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n \n  <!-- AP-29JAN25 drop-down design check -->\n  <!-- Dropdown Field -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">   \n          <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <select id=\"options\" class=\"dropdown\">\n          <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.value }} </option>\n        </select>\n      </div>\n    </div>\n</div>\n\n  <!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\"  class=\"delete-icon\" />\n      </div>\n      <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n    </div>\n  </div>\n</div>\n\n  <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n          <div class=\"label-container\">\n            <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Label' }} </label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>        \n          <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n                 [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n        </div>\n      </div>\n</div>\n    \n  <!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n       <div class=\"field-wrapper\">\n         <div class=\"field-content\">\n           <div class=\"label-container\">\n             <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n             <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n           </div>          \n           <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n                  [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n         </div>\n       </div>\n</div>\n     \n  <!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <label>{{ field.questionText }}</label>\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n\n <!-- TextArea -->\n <!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n      <div class=\"label-container\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n          <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n        </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>    \n      <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n        [readonly]=\"field.readOnly\" [class.hidden]=\"field.isHide\" [(ngModel)]=\"field.text\">\n      </textarea>\n    </div>\n  </div>\n</div>\n\n<!-- AP-29JAN25 Image design change -->\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n      <div class=\"field-wrapper\">\n       <div class=\"field-content\">\n         <div class=\"label-container\">\n        <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"file\" accept=\"image/*\" class=\"custom-input\" />\n    </div>\n  </div>\n</div>\n\n  <!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <button>{{ field.questionText }}</button>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n\n  <!-- File -->\n  <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n      <div class=\"label-container\">\n   <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n   <img  src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"file\" class=\"custom-input\" />\n  </div>\n </div>\n</div>\n\n  <!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n  <label>{{ field.questionText }}</label>\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n  </table>\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n  <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n    </div>\n  </div>\n</div> -->\n\n  <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n   <div class=\"label-container\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n      </div>\n    </div>\n  </div>\n</div>\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex}.form-builder{width:25%;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#e9ecef;cursor:pointer;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:14px;font-weight:500;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:16px;font-weight:600}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid blue;background-color:#0000ff1a}\n"] }]
+            args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n<!-- Form Builder Section All Elements -->\n<div class=\"form-builder\">\n    <ng-container *ngFor=\"let element of elements\">\n      <div class=\"element\" (click)=\"addElement(element.type)\">\n        <img src=\"../assets/icons/{{ element.img }}.svg\">\n        <div class=\"hover-label\">{{ element.label }}</div>\n      </div>\n    </ng-container>\n</div>\n  \n<div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n<ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n<!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>  \n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n      <div class=\"label-container\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>    \n      <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n      [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n    </div>\n  </div>\n</div>\n\n<!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n          <div class=\"field-wrapper\">\n            <div class=\"field-content\">\n              <div class=\"label-container\">\n          <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\"  class=\"delete-icon\" />\n        </div>\n        <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n      </div>\n    </div>\n</div>\n\n<!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n          <div class=\"label-container\">\n            <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Label' }} </label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>        \n          <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n                 [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n        </div>\n      </div>\n</div>\n\n<!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>          \n            <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n                   [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n          </div>\n        </div>\n</div>\n      \n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n     <div class=\"field-content\">\n       <div class=\"label-container\">\n         <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n           <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n         </label>\n         <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n       </div>    \n       <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n         [readonly]=\"field.readOnly\" [class.hidden]=\"field.isHide\" [(ngModel)]=\"field.text\">\n       </textarea>\n     </div>\n   </div>\n</div>\n\n<!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n   <div class=\"label-container\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n      <div class=\"field-wrapper\">\n       <div class=\"field-content\">\n         <div class=\"label-container\">\n        <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"file\" accept=\"image/*\" class=\"custom-input\" />\n    </div>\n  </div>\n</div>\n\n <!-- File -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">\n     <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n     <img  src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n   </div>\n   <input type=\"file\" class=\"custom-input\" />\n    </div>\n   </div>\n</div>\n  \n<!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">   \n          <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <div class=\"checkbox-options-container\">\n          <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n            <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\">\n            <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n          </div>\n        </div>\n      </div>\n    </div>\n</div>  \n\n<!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n       <div class=\"label-container\">   \n                <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <div class=\"radio-options-container\">\n                <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                    <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"  [value]=\"option.value\"\n                        [(ngModel)]=\"field.selectedValue\" class=\"radio-input\">\n                    <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.label }}</label>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n \n<!-- Dropdown -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">   \n          <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <select id=\"options\" class=\"dropdown\">\n          <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.label }} </option>\n        </select>\n      </div>\n    </div>\n</div>\n    \n<!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n  <label>{{ field.questionText }}</label>\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n  </table>\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n  <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n    </div>\n  </div>\n</div> -->\n\n<!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <label>{{ field.questionText }}</label>\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n  \n<!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <button>{{ field.questionText }}</button>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex;border:10px solid #86A8CD;border-right-width:0}.form-builder{width:25%;height:100vh;overflow-y:auto;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#e9ecef;cursor:pointer;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:14px;font-weight:500;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:100vh}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:16px;font-weight:600}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid blue;background-color:#0000ff1a}\n"] }]
         }], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { elementButtonClicked: [{
                 type: Output
             }], formContainer: [{
@@ -11029,7 +11058,7 @@ class PropertiesComponent {
                 { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
             ]
         },
-        'Numbers': {
+        'Number': {
             elementProps: [
                 { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
@@ -11252,11 +11281,11 @@ class PropertiesComponent {
         this.formButtonHandler.emit(this.formBuilderService.downloadElement());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, deps: [{ token: i1$1.HttpClient }, { token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n  <div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n  <h1 class=\"header-title\">Properties</h1>\n  <!-- AP 25FEB25 - not used -->\n  <!-- <div class=\"menu-container\">\n    <div class=\"menu-item\" (click)=\"download()\">\n      <span >Download</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Start</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Path</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Clone</span>\n    </div>\n  </div> -->\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n  <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n  <summary class=\"text-sm \">Elements Properties</summary>\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"flex-items-center\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n            type=\"text\"\n            [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\"\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\n            [class.read-only]=\"selectedElement.readOnly\"\n            [readonly]=\"selectedElement.readOnly\"\n            class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n    (change)=\"updateProperty('font', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n  </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n  </select>\n</div>\n        \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n  <span class=\"toggle-label\">Read Only</span>\n  <label class=\"switch\">\n    <input  type=\"checkbox\"/>\n    <span class=\"slider\"></span>\n  </label>\n</div>\n\n<div class=\"toggle-item2\">\n  <span class=\"toggle-label\">Is Hide</span>\n  <label class=\"switch\">\n    <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $event)\"/>\n    <span class=\"slider\"></span>\n  </label>\n</div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n  [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n  <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n  </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\n  <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n  [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n   <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n  </button>\n</div>\n\n<!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n  <div class=\"size-group\">\n    <label  class=\"size-label\">Width</label>\n    <div class=\"value-container\">\n    <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n  </div>\n  </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n<details class=\"second-property\">\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n      <div class=\"flex-items-center \">\n        <label class=\"text-sm\">{{ prop.label }}</label>\n        <div class=\"input-box-field\">\n          <!-- Input Box -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\n\n          <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n  <div class=\"sizes\">\n    <div class=\"flex-gap\">\n    <div class=\"flex-items\">\n      <input type=\"radio\" [checked]=\"selectedElement.required\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n      <label class=\"text-label\"> Required </label>\n    </div>\n    <div class=\"flex-items\">\n      <input type=\"radio\" [checked]=\"!selectedElement.required\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n      <label class=\"text-sm text-gray-400\"> Not Required </label>\n    </div>\n  </div>\n</div>\n</div> \n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n  <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n    <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].label\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n  </div>\n  <button (click)=\"addOption(selectedElement[prop.key])\">\n    <div class=\"add-varient\">\n      <span class=\"text-lg\">+</span>\n      <span>Add Variants</span>\n    </div>\n  </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n    <button class=\"btn\">Cancel</button>\n    <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.design-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#f4f4f4;border-radius:6px;margin-bottom:15px}.header-title{font-size:18px;font-weight:500;color:#333}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:6px;margin-bottom:10px;padding:10px}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:5px}.inner-content{padding:10px 0}label{font-size:14px;color:#333;margin-bottom:5px}input[type=text],input[type=number],select{width:100%;height:38px;padding:8px;font-size:14px;border:1px solid #ccc;border-radius:4px;outline:none;transition:.3s}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:#007bff}button{padding:8px 12px;border:none;border-radius:4px;background:#007bff;color:#fff;font-size:14px;cursor:pointer;transition:.3s}button:hover{background:#0056b3}.toggle-group{display:flex;align-items:center;gap:15px}.toggle-item{display:flex;align-items:center;gap:8px}.switch{position:relative;width:40px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:19px;width:19px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.radio-item{display:flex;align-items:center;gap:15px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:10px}.options{width:calc(100% - 30px)}.field-size-controls{display:flex;align-items:center;gap:10px}.size-input{width:100px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:15px}.design-footer .btn{background:#007bff;color:#fff;padding:8px 15px;border-radius:4px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:10px}.design-header{flex-direction:column;align-items:flex-start}.toggle-group{flex-direction:column;gap:10px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:10px}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n<div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n  <h1 class=\"header-title\">Properties</h1>\n  <!-- AP 25FEB25 - not used -->\n  <!-- <div class=\"menu-container\">\n    <div class=\"menu-item\" (click)=\"download()\">\n      <span >Download</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Start</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Path</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Clone</span>\n    </div>\n  </div> -->\n</div>\n\n<div class=\"all-properties\">\n<div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n  <summary class=\"text-sm \">Elements Properties</summary>\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"flex-items-center\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n            type=\"text\"\n            [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\"\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\n            [class.read-only]=\"selectedElement.readOnly\"\n            [readonly]=\"selectedElement.readOnly\"\n            class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n    (change)=\"updateProperty('font', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n  </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n  </select>\n</div>\n        \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n  <span class=\"toggle-label\">Read Only</span>\n  <label class=\"switch\">\n    <input  type=\"checkbox\"/>\n    <span class=\"slider\"></span>\n  </label>\n</div>\n\n<div class=\"toggle-item2\">\n  <span class=\"toggle-label\">Is Hide</span>\n  <label class=\"switch\">\n    <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $event)\"/>\n    <span class=\"slider\"></span>\n  </label>\n</div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n  [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n  <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n  </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\n  <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n  [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n   <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n  </button>\n</div>\n\n<!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n  <div class=\"size-group\">\n    <label  class=\"size-label\">Width</label>\n    <div class=\"value-container\">\n    <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n  </div>\n  </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n<details class=\"second-property\">\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n      <div class=\"flex-items-center \">\n        <label class=\"text-sm\">{{ prop.label }}</label>\n        <div class=\"input-box-field\">\n          <!-- Input Box -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\n\n          <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n  <div class=\"sizes\">\n    <div class=\"flex-gap\">\n    <div class=\"flex-items\">\n      <input type=\"radio\" [checked]=\"selectedElement.required\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n      <label class=\"text-label\"> Required </label>\n    </div>\n    <div class=\"flex-items\">\n      <input type=\"radio\" [checked]=\"!selectedElement.required\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n      <label class=\"text-sm text-gray-400\"> Not Required </label>\n    </div>\n  </div>\n</div>\n</div> \n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n  <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n    <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].label\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n  </div>\n  <button (click)=\"addOption(selectedElement[prop.key])\">\n    <div class=\"add-varient\">\n      <span class=\"text-lg\">+</span>\n      <span>Add Variants</span>\n    </div>\n  </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n    <button class=\"btn\">Cancel</button>\n    <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:100vh;overflow-y:auto}.design-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:500;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n  <div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n  <h1 class=\"header-title\">Properties</h1>\n  <!-- AP 25FEB25 - not used -->\n  <!-- <div class=\"menu-container\">\n    <div class=\"menu-item\" (click)=\"download()\">\n      <span >Download</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Start</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Path</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Clone</span>\n    </div>\n  </div> -->\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n  <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n  <summary class=\"text-sm \">Elements Properties</summary>\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"flex-items-center\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n            type=\"text\"\n            [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\"\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\n            [class.read-only]=\"selectedElement.readOnly\"\n            [readonly]=\"selectedElement.readOnly\"\n            class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n    (change)=\"updateProperty('font', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n  </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n  </select>\n</div>\n        \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n  <span class=\"toggle-label\">Read Only</span>\n  <label class=\"switch\">\n    <input  type=\"checkbox\"/>\n    <span class=\"slider\"></span>\n  </label>\n</div>\n\n<div class=\"toggle-item2\">\n  <span class=\"toggle-label\">Is Hide</span>\n  <label class=\"switch\">\n    <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $event)\"/>\n    <span class=\"slider\"></span>\n  </label>\n</div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n  [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n  <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n  </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\n  <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n  [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n   <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n  </button>\n</div>\n\n<!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n  <div class=\"size-group\">\n    <label  class=\"size-label\">Width</label>\n    <div class=\"value-container\">\n    <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n  </div>\n  </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n<details class=\"second-property\">\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n      <div class=\"flex-items-center \">\n        <label class=\"text-sm\">{{ prop.label }}</label>\n        <div class=\"input-box-field\">\n          <!-- Input Box -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\n\n          <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n  <div class=\"sizes\">\n    <div class=\"flex-gap\">\n    <div class=\"flex-items\">\n      <input type=\"radio\" [checked]=\"selectedElement.required\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n      <label class=\"text-label\"> Required </label>\n    </div>\n    <div class=\"flex-items\">\n      <input type=\"radio\" [checked]=\"!selectedElement.required\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n      <label class=\"text-sm text-gray-400\"> Not Required </label>\n    </div>\n  </div>\n</div>\n</div> \n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n  <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n    <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].label\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n  </div>\n  <button (click)=\"addOption(selectedElement[prop.key])\">\n    <div class=\"add-varient\">\n      <span class=\"text-lg\">+</span>\n      <span>Add Variants</span>\n    </div>\n  </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n    <button class=\"btn\">Cancel</button>\n    <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.design-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#f4f4f4;border-radius:6px;margin-bottom:15px}.header-title{font-size:18px;font-weight:500;color:#333}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:6px;margin-bottom:10px;padding:10px}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:5px}.inner-content{padding:10px 0}label{font-size:14px;color:#333;margin-bottom:5px}input[type=text],input[type=number],select{width:100%;height:38px;padding:8px;font-size:14px;border:1px solid #ccc;border-radius:4px;outline:none;transition:.3s}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:#007bff}button{padding:8px 12px;border:none;border-radius:4px;background:#007bff;color:#fff;font-size:14px;cursor:pointer;transition:.3s}button:hover{background:#0056b3}.toggle-group{display:flex;align-items:center;gap:15px}.toggle-item{display:flex;align-items:center;gap:8px}.switch{position:relative;width:40px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:19px;width:19px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.radio-item{display:flex;align-items:center;gap:15px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:10px}.options{width:calc(100% - 30px)}.field-size-controls{display:flex;align-items:center;gap:10px}.size-input{width:100px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:15px}.design-footer .btn{background:#007bff;color:#fff;padding:8px 15px;border-radius:4px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:10px}.design-header{flex-direction:column;align-items:flex-start}.toggle-group{flex-direction:column;gap:10px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:10px}}\n"] }]
+            args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n<div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n  <h1 class=\"header-title\">Properties</h1>\n  <!-- AP 25FEB25 - not used -->\n  <!-- <div class=\"menu-container\">\n    <div class=\"menu-item\" (click)=\"download()\">\n      <span >Download</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Start</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Path</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Clone</span>\n    </div>\n  </div> -->\n</div>\n\n<div class=\"all-properties\">\n<div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n  <summary class=\"text-sm \">Elements Properties</summary>\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"flex-items-center\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n            type=\"text\"\n            [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\"\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\n            [class.read-only]=\"selectedElement.readOnly\"\n            [readonly]=\"selectedElement.readOnly\"\n            class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n    (change)=\"updateProperty('font', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n  </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n  </select>\n</div>\n        \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n  <span class=\"toggle-label\">Read Only</span>\n  <label class=\"switch\">\n    <input  type=\"checkbox\"/>\n    <span class=\"slider\"></span>\n  </label>\n</div>\n\n<div class=\"toggle-item2\">\n  <span class=\"toggle-label\">Is Hide</span>\n  <label class=\"switch\">\n    <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $event)\"/>\n    <span class=\"slider\"></span>\n  </label>\n</div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n  [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n  <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n  </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\n  <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n  [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n   <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n  </button>\n</div>\n\n<!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n  <div class=\"size-group\">\n    <label  class=\"size-label\">Width</label>\n    <div class=\"value-container\">\n    <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n  </div>\n  </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n<details class=\"second-property\">\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n      <div class=\"flex-items-center \">\n        <label class=\"text-sm\">{{ prop.label }}</label>\n        <div class=\"input-box-field\">\n          <!-- Input Box -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\n\n          <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n  <div class=\"sizes\">\n    <div class=\"flex-gap\">\n    <div class=\"flex-items\">\n      <input type=\"radio\" [checked]=\"selectedElement.required\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n      <label class=\"text-label\"> Required </label>\n    </div>\n    <div class=\"flex-items\">\n      <input type=\"radio\" [checked]=\"!selectedElement.required\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n      <label class=\"text-sm text-gray-400\"> Not Required </label>\n    </div>\n  </div>\n</div>\n</div> \n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n  <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n    <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].label\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n  </div>\n  <button (click)=\"addOption(selectedElement[prop.key])\">\n    <div class=\"add-varient\">\n      <span class=\"text-lg\">+</span>\n      <span>Add Variants</span>\n    </div>\n  </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n    <button class=\"btn\">Cancel</button>\n    <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:100vh;overflow-y:auto}.design-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:500;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { formButtonHandler: [{
                 type: Output
             }], selectedElementType: [{
@@ -11305,11 +11334,11 @@ class FormComponent {
         this.formButtonHandler.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container \">\n    <!-- app-element Component -->\n    <app-element [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n  \n    <!-- app-properties Component -->\n    <app-properties (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n  </div>\n  ", styles: [".form-container{display:flex;flex-wrap:wrap;width:100%;height:100vh}app-element{width:75%;height:100vh;padding:10px;border-top:10px solid #86A8CD;border-bottom:10px solid #86A8CD}app-properties{width:25%;height:100vh;overflow-y:auto;padding:10px;border:10px solid #86A8CD}\n"], dependencies: [{ kind: "component", type: ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"], outputs: ["elementButtonClicked"] }, { kind: "component", type: PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType"], outputs: ["formButtonHandler"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container \">\n    <!-- app-element Component -->\n    <app-element [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n  \n    <!-- app-properties Component -->\n    <app-properties (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n  </div>\n  ", styles: [".form-container{display:flex;flex-wrap:wrap;width:100%;height:100vh}app-element{width:75%}app-properties{width:25%;overflow-y:auto;border:10px solid #86A8CD}\n"], dependencies: [{ kind: "component", type: ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"], outputs: ["elementButtonClicked"] }, { kind: "component", type: PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType"], outputs: ["formButtonHandler"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-form-builder', template: "<!-- AP-29JAN25 -->\n<div class=\"form-container \">\n    <!-- app-element Component -->\n    <app-element [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n  \n    <!-- app-properties Component -->\n    <app-properties (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n  </div>\n  ", styles: [".form-container{display:flex;flex-wrap:wrap;width:100%;height:100vh}app-element{width:75%;height:100vh;padding:10px;border-top:10px solid #86A8CD;border-bottom:10px solid #86A8CD}app-properties{width:25%;height:100vh;overflow-y:auto;padding:10px;border:10px solid #86A8CD}\n"] }]
+            args: [{ selector: 'app-form-builder', template: "<!-- AP-29JAN25 -->\n<div class=\"form-container \">\n    <!-- app-element Component -->\n    <app-element [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n  \n    <!-- app-properties Component -->\n    <app-properties (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n  </div>\n  ", styles: [".form-container{display:flex;flex-wrap:wrap;width:100%;height:100vh}app-element{width:75%}app-properties{width:25%;overflow-y:auto;border:10px solid #86A8CD}\n"] }]
         }], propDecorators: { bookletJSON: [{
                 type: Input
             }], bookletId: [{