npm - @rangertechnologies/ngnxt - Versions diffs - 2.1.85 → 2.1.87 - Mend

@rangertechnologies/ngnxt 2.1.85 → 2.1.87

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/fesm2022/rangertechnologies-ngnxt.mjs CHANGED Viewed

@@ -4415,10 +4415,11 @@ class CustomRichTextComponent {
     //     this.textValueChange.emit(newValue);
     //   }, this.doneTypingInterval);
     // }
-    onEditorBlur() {
-        // Only emit if we have a value change
+    // RS 28JAN2015
+    onEditorFocusOut() {
         const currentValue = this.value || '';
         this.textValueChange.emit(currentValue);
+        console.log('Rich Text Editor Focus Out - Emitting Value:', currentValue);
     }
     // Added ngOnDestroy to prevent memory leaks
     ngOnDestroy() {
@@ -4427,11 +4428,11 @@ class CustomRichTextComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRichTextComponent, deps: [{ token: I18nService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomRichTextComponent, isStandalone: true, selector: "app-custom-rich-text", inputs: { value: "value", placeholder: "placeholder", error: "error", question: "question", rows: "rows", readOnly: "readOnly", minLength: "minLength", maxLength: "maxLength" }, outputs: { textValueChange: "textValueChange" }, ngImport: i0, template: "<!-- RS 06JAN25 -->\r\n<div class=\"rich-text-container\">\r\n  <quill-editor\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [modules]=\"quillConfiguration\"\r\n    [readOnly]=\"readOnly\"\r\n    (onBlur)=\"onEditorBlur()\"\r\n    [class.error]=\"error\">\r\n  </quill-editor>\r\n  <div *ngIf=\"error\" class=\"error-message\">\r\n    {{ error }}\r\n  </div>\r\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}\n"], dependencies: [{ kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomRichTextComponent, isStandalone: true, selector: "app-custom-rich-text", inputs: { value: "value", placeholder: "placeholder", error: "error", question: "question", rows: "rows", readOnly: "readOnly", minLength: "minLength", maxLength: "maxLength" }, outputs: { textValueChange: "textValueChange" }, ngImport: i0, template: "<!-- RS 06JAN25 -->\r\n<div class=\"rich-text-container\">\r\n  <quill-editor\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [modules]=\"quillConfiguration\"\r\n    [readOnly]=\"readOnly\"\r\n    (focusout)=\"onEditorFocusOut()\"\r\n    [class.error]=\"error\">\r\n  </quill-editor>\r\n  <div *ngIf=\"error\" class=\"error-message\">\r\n    {{ error }}\r\n  </div>\r\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}\n"], dependencies: [{ kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRichTextComponent, decorators: [{
             type: Component,
-            args: [{ imports: [QuillEditorComponent, FormsModule, CommonModule], selector: 'app-custom-rich-text', standalone: true, template: "<!-- RS 06JAN25 -->\r\n<div class=\"rich-text-container\">\r\n  <quill-editor\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [modules]=\"quillConfiguration\"\r\n    [readOnly]=\"readOnly\"\r\n    (onBlur)=\"onEditorBlur()\"\r\n    [class.error]=\"error\">\r\n  </quill-editor>\r\n  <div *ngIf=\"error\" class=\"error-message\">\r\n    {{ error }}\r\n  </div>\r\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}\n"] }]
+            args: [{ imports: [QuillEditorComponent, FormsModule, CommonModule], selector: 'app-custom-rich-text', standalone: true, template: "<!-- RS 06JAN25 -->\r\n<div class=\"rich-text-container\">\r\n  <quill-editor\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [modules]=\"quillConfiguration\"\r\n    [readOnly]=\"readOnly\"\r\n    (focusout)=\"onEditorFocusOut()\"\r\n    [class.error]=\"error\">\r\n  </quill-editor>\r\n  <div *ngIf=\"error\" class=\"error-message\">\r\n    {{ error }}\r\n  </div>\r\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: I18nService }, { type: ChangeService }], propDecorators: { value: [{
                 type: Input
             }], placeholder: [{
@@ -8168,29 +8169,33 @@ class SearchBoxComponent {
     }
     // VD 03May- search changes
     // VD 31NOV24 null check
+    // RS 29JAN25
+    //Multi-word search across all object values
     getSourceData = (keyword) => {
         if (this.apiMeta) {
             let apiObj = JSON.parse(this.apiMeta);
             this.dataService.apiResponse(apiObj.endpoint).subscribe((apiResponse) => {
                 let response;
                 if (apiObj.variable) {
-                    // VD 22May24 - handling multiple child objects
                     response = this.dataService.getValue(apiResponse, apiObj.variable);
                 }
                 else {
                     response = apiResponse;
                 }
-                let field = apiObj.field;
                 let results = [];
-                for (let i = 0; i < response.length; i++) { // VD NOV23 - updated the search keys
-                    // VD 26JUN24 - handling multiple objects
-                    const objValue = this.dataService.getValue(response[i], field);
-                    if (objValue?.toLowerCase().includes(keyword?.toLowerCase())) {
-                        console.log('pushing ' + objValue);
-                        results.push(response[i]);
+                let searchTerms = keyword.toLowerCase().split(" "); // Split input into words
+                for (let i = 0; i < response.length; i++) {
+                    let obj = response[i];
+                    // Convert all object values to a single string for flexible search
+                    let combinedValues = Object.values(obj).join(" ").toLowerCase();
+                    // Check if all search terms exist in any order
+                    let match = searchTerms.every(term => combinedValues.includes(term));
+                    if (match) {
+                        console.log('Matching entry:', obj);
+                        results.push(obj);
                     }
                 }
-                this.noResult = !(results.length > 1);
+                this.noResult = results.length === 0;
                 this.finalResults = results;
             });
         }
@@ -8206,11 +8211,11 @@ class SearchBoxComponent {
         this.searchValueChange.emit(change);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBoxComponent, deps: [{ token: SalesforceService }, { 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 }], ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\r\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\r\n    <input #auto id=\"searchbox-style\"\r\n            (blur)=\"clearList()\" \r\n            [(ngModel)]=\"filterName\" \r\n            type=\"text\" \r\n            name=\"name\" \r\n            [readOnly]=\"readOnly\"\r\n            [placeholder]=\"placeHolderText\" \r\n            style=\"margin: 0 !important; padding-right: 30px;\" \r\n            class=\"searchInput she-line-input form-control\" \r\n            (focusin)=\"getSourceDataLocal($event)\" \r\n            (input)=\"getSourceDataLocal($event)\">\r\n    <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\r\n    <div *ngIf=\"finalResults.length > 0 && showSuggestion\" \r\n        style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\" \r\n        class=\"suggestions-container\">\r\n        <!-- HA 20DEC23 Uncommented the logic -->\r\n         <!-- VD 03May- search changes -->\r\n        <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\r\n          <!-- VD 26Jun24 - id condition removed -->\r\n            <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\r\n                <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\r\n                    <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\r\n                </div>\r\n                <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\r\n                  <!--// VD 26JUN24 - pipe changes -->\r\n                    <h4 >{{ '' | getValue: item : SearchItem  }}</h4>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <!-- HA 20DEC23 For Commented this for future purpose -->\r\n        <!-- <table class=\"table table-striped table-bordered\">\r\n            <thead>\r\n              <tr>\r\n                <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\r\n                <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\r\n                <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\r\n                <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\r\n                <td>{{ item.firstName }}</td>\r\n                <td>{{ item.lastName }}</td>\r\n                <td>{{ item.division }}</td>\r\n                <td>{{ item.numberPlate }}</td>\r\n              </tr>\r\n            </tbody>\r\n          </table> -->\r\n    </div>\r\n</div>\r\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" }] });
+    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 }], ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\r\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\r\n  <input #auto id=\"searchbox-style\"\r\n          (blur)=\"clearList()\"\r\n          [(ngModel)]=\"filterName\"\r\n          type=\"text\"\r\n          name=\"name\"\r\n          [readOnly]=\"readOnly\"\r\n          [placeholder]=\"placeHolderText\"\r\n          style=\"margin: 0 !important; padding-right: 30px;\"\r\n          class=\"searchInput she-line-input form-control\"\r\n          (focusin)=\"getSourceDataLocal($event)\"\r\n          (input)=\"getSourceDataLocal($event)\">\r\n  <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\r\n  <div *ngIf=\"finalResults.length > 0 && showSuggestion\"\r\n      style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\"\r\n      class=\"suggestions-container\">\r\n      <!-- HA 20DEC23 Uncommented the logic -->\r\n       <!-- VD 03May- search changes -->\r\n      <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\r\n        <!-- VD 26Jun24 - id condition removed -->\r\n          <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\r\n              <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\r\n                  <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\r\n              </div>\r\n              <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\r\n                <!--// VD 26JUN24 - pipe changes -->\r\n                <!-- RS 29JAN25 -->\r\n                  <h4 >{{ item | getValue: item : SearchItem }}</h4>\r\n              </div>\r\n          </div>\r\n      </div>\r\n      <!-- HA 20DEC23 For Commented this for future purpose -->\r\n      <!-- <table class=\"table table-striped table-bordered\">\r\n          <thead>\r\n            <tr>\r\n              <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\r\n              <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\r\n              <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\r\n              <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\r\n              <td>{{ item.firstName }}</td>\r\n              <td>{{ item.lastName }}</td>\r\n              <td>{{ item.division }}</td>\r\n              <td>{{ item.numberPlate }}</td>\r\n            </tr>\r\n          </tbody>\r\n        </table> -->\r\n  </div>\r\n</div>\r\n\r\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" }] });
 }
 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-->\r\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\r\n    <input #auto id=\"searchbox-style\"\r\n            (blur)=\"clearList()\" \r\n            [(ngModel)]=\"filterName\" \r\n            type=\"text\" \r\n            name=\"name\" \r\n            [readOnly]=\"readOnly\"\r\n            [placeholder]=\"placeHolderText\" \r\n            style=\"margin: 0 !important; padding-right: 30px;\" \r\n            class=\"searchInput she-line-input form-control\" \r\n            (focusin)=\"getSourceDataLocal($event)\" \r\n            (input)=\"getSourceDataLocal($event)\">\r\n    <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\r\n    <div *ngIf=\"finalResults.length > 0 && showSuggestion\" \r\n        style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\" \r\n        class=\"suggestions-container\">\r\n        <!-- HA 20DEC23 Uncommented the logic -->\r\n         <!-- VD 03May- search changes -->\r\n        <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\r\n          <!-- VD 26Jun24 - id condition removed -->\r\n            <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\r\n                <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\r\n                    <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\r\n                </div>\r\n                <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\r\n                  <!--// VD 26JUN24 - pipe changes -->\r\n                    <h4 >{{ '' | getValue: item : SearchItem  }}</h4>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <!-- HA 20DEC23 For Commented this for future purpose -->\r\n        <!-- <table class=\"table table-striped table-bordered\">\r\n            <thead>\r\n              <tr>\r\n                <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\r\n                <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\r\n                <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\r\n                <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\r\n                <td>{{ item.firstName }}</td>\r\n                <td>{{ item.lastName }}</td>\r\n                <td>{{ item.division }}</td>\r\n                <td>{{ item.numberPlate }}</td>\r\n              </tr>\r\n            </tbody>\r\n          </table> -->\r\n    </div>\r\n</div>\r\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"] }]
+            args: [{ selector: 'lib-search-box', template: "<!-- // VD 12Jun24 - readonly change-->\r\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\r\n  <input #auto id=\"searchbox-style\"\r\n          (blur)=\"clearList()\"\r\n          [(ngModel)]=\"filterName\"\r\n          type=\"text\"\r\n          name=\"name\"\r\n          [readOnly]=\"readOnly\"\r\n          [placeholder]=\"placeHolderText\"\r\n          style=\"margin: 0 !important; padding-right: 30px;\"\r\n          class=\"searchInput she-line-input form-control\"\r\n          (focusin)=\"getSourceDataLocal($event)\"\r\n          (input)=\"getSourceDataLocal($event)\">\r\n  <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\r\n  <div *ngIf=\"finalResults.length > 0 && showSuggestion\"\r\n      style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\"\r\n      class=\"suggestions-container\">\r\n      <!-- HA 20DEC23 Uncommented the logic -->\r\n       <!-- VD 03May- search changes -->\r\n      <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\r\n        <!-- VD 26Jun24 - id condition removed -->\r\n          <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\r\n              <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\r\n                  <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\r\n              </div>\r\n              <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\r\n                <!--// VD 26JUN24 - pipe changes -->\r\n                <!-- RS 29JAN25 -->\r\n                  <h4 >{{ item | getValue: item : SearchItem }}</h4>\r\n              </div>\r\n          </div>\r\n      </div>\r\n      <!-- HA 20DEC23 For Commented this for future purpose -->\r\n      <!-- <table class=\"table table-striped table-bordered\">\r\n          <thead>\r\n            <tr>\r\n              <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\r\n              <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\r\n              <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\r\n              <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\r\n              <td>{{ item.firstName }}</td>\r\n              <td>{{ item.lastName }}</td>\r\n              <td>{{ item.division }}</td>\r\n              <td>{{ item.numberPlate }}</td>\r\n            </tr>\r\n          </tbody>\r\n        </table> -->\r\n  </div>\r\n</div>\r\n\r\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: DataService }, { type: i1.ActivatedRoute }, { type: i0.ElementRef }, { type: I18nService }], propDecorators: { placeHolderText: [{
                 type: Input
             }], auto: [{
@@ -10252,6 +10257,7 @@ class FormBuilderService {
     // book: { bookQuestionsMap: { unique_id: { subQuestions: any[]; }; }; };
     constructor() {
         // Load saved elements from localStorage
+        this.formElements = [];
         const savedFormElements = localStorage.getItem('formElements');
         if (savedFormElements) {
             this.formElements = JSON.parse(savedFormElements);
@@ -10268,9 +10274,10 @@ class FormBuilderService {
         this.elementComponent = component;
     }
     // Add a new element to the form
-    addElement(element, parentId = null) {
+    addElement(element) {
+        debugger;
         // const savedFormElements = localStorage.getItem('formElements');
-        console.log("aswin", this.formElements.length);
+        console.log("length", this.formElements.length);
         if (this.formElements.length == 0) {
             console.log("savedFormElements", this.formElements);
             // this.formElements = JSON.parse(savedFormElements);
@@ -10303,7 +10310,7 @@ class FormBuilderService {
         }
         this.formElements.push(element);
         localStorage.setItem('formElements', JSON.stringify(this.formElements));
-        this.formElementsSubject.next([...this.formElements]);
+        // this.formElementsSubject.next([...this.formElements]);
     }
     updateElement(index, updates) {
         const elements = [...this.getElements()];
@@ -10360,26 +10367,12 @@ class FormBuilderService {
         this.book.bookQuestionsMap[this.unique_id]['sqOptions'] = tempElement;
         return this.book;
     }
-    // // Find an element by its ID
-    // findElementById(id: string): FormElement | null {
-    //   const findRecursive = (elements: FormElement[]): FormElement | null => {
-    //     for (const el of elements) {
-    //       if (el.id === id) return el;
-    //       if (el.subQuestions) {
-    //         const found = findRecursive(el.subQuestions);
-    //         if (found) return found;
-    //       }
-    //     }
-    //     return null;
-    //   };
-    //   return findRecursive(this.formElements);
-    // }
-    // Remove an element by UID
+    // Remove an element by ID
     // Save elements to localStorage and update the subject
-    removeElementComponent(uid) {
+    removeElementComponent(id) {
         this.tempElem = [];
         this.formElements.forEach((element) => {
-            if (element.uid !== uid) {
+            if (element.id !== id) {
                 this.tempElem.push(element);
             }
         });
@@ -10404,6 +10397,17 @@ class ElementComponent {
     formContainer;
     bookletJSON;
     bookletId;
+    dropdownOpen = false; // Tracks whether the dropdown is open or closed
+    field;
+    // Toggle dropdown visibilitys
+    toggleDropdown() {
+        this.dropdownOpen = !this.dropdownOpen;
+    }
+    // Select an option from the dropdown
+    selectOption(option) {
+        this.field.selectedOption = option;
+        this.dropdownOpen = false; // Close the dropdown after selecting an option
+    }
     formElements = [];
     constructor(formBuilderService) {
         this.formBuilderService = formBuilderService;
@@ -10417,7 +10421,6 @@ class ElementComponent {
         console.log("bookletJSON==" + this.bookletJSON);
         if (this.bookletJSON) {
             // AP-23JAN25 - empty string to clear the local storage
-            localStorage.setItem('formElements', "");
             localStorage.setItem('status', ("edit"));
             localStorage.setItem('unique_id', (this.bookletId));
             this.formElements = [];
@@ -10480,8 +10483,7 @@ class ElementComponent {
             questionBookSubTitle: '',
             style: '',
             options: type === 'CheckBox' || type === 'Radio' || type === 'Dropdown' ? [
-                { label: 'Option 1', value: '', type: 'text', key: 'option1' },
-                { label: 'Option 2', value: '', type: 'text', key: 'option2' }
+                { label: 'Option 1', value: '', type: 'text', key: 'option1' }
             ] : null,
         };
         this.formBuilderService.addElement(newElement);
@@ -10496,16 +10498,17 @@ class ElementComponent {
     // Remove an element by index
     removeElement(field, index) {
         console.log('remove', index);
-        this.formBuilderService.removeElementComponent(field.uid);
+        this.formBuilderService.removeElementComponent(field.id);
         this.formElements = this.formBuilderService.getElements();
     }
     getFontStyles(field) {
         const styles = {
             'font-family': field.font || 'Helvetica Neue',
             'font-weight': field.fontWeight || '400',
-            'width': `${field.width || 980}px`,
+            'width': `${(field.width || 12) / 12 * 100}%`,
             'height': `${field.height || 91}px`,
-            'text-align': field.textAlign || 'left'
+            'text-align': field.textAlign || 'left',
+            'border-radius': '5px'
         };
         // Handle array of style classes
         if (field.styles && Array.isArray(field.styles)) {
@@ -10528,11 +10531,11 @@ class ElementComponent {
         return styles;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\r\n<div class=\"center-frame\">\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n      <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\r\n        <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\r\n\r\n          <!-- TextBox -->\r\n          <div *ngIf=\"field.type === 'Text'\" class=\"\" style=\"padding: 10px;\r\n    background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n           <div class=\"flex\" style=\"display: flex;\">\r\n            <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n            <div style=\"width: 97%;\">\r\n            <div class=\"flex lab-conatiner\">\r\n            <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n            <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\r\n          </div>\r\n        </div>\r\n          </div>\r\n\r\n          <!-- CheckBox -->\r\n           <div class=\"CheckBox-options\" *ngIf=\"field.type === 'CheckBox'\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <span class=\"label-text\">{{ field.questionText }}</span>\r\n            <div class=\"checkbox-container\">\r\n              <label class=\"option-label\">\r\n            <!-- Options Section -->\r\n             <div *ngIf=\"field.options?.length > 0\" class=\"options-container\">\r\n    <div *ngFor=\"let option of field.options; let i = index\"      class=\"option-item\">\r\n      <!-- Option Input -->\r\n      <input type=\"text\" [(ngModel)]=\"option.label\" placeholder=\"Label\" class=\"option-label\"/>\r\n      <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Value\"class=\"option-value\"/>\r\n      <!-- Remove Button -->\r\n      <button class=\"remove-option-btn\" (click)=\"removeOption(field.options, i)\">\r\n        <img src=\"../assets/icons/Trash.svg\" alt=\"Remove Option\" />\r\n      </button>\r\n    </div>\r\n    <!-- Add Option Button -->\r\n    <button type=\"button\" class=\"add-option-btn\" (click)=\"addOption(field.options)\">\r\n      <span class=\"text-lg\">+</span>\r\n    </button>\r\n            </div>\r\n              </label>\r\n    <button class=\"trash-right\" (click)=\"removeElement(field, i)\">\r\n                <img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Dropdown -->\r\n    <div *ngIf=\"field.type === 'Dropdown'\" class=\"dropdown-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <select class=\"dropdown-options\"><option *ngFor=\"let option of field.options\" >{{ option }}</option></select>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n         <!-- Calendar -->\r\n<div *ngIf=\"['Calendar'].includes(field.type)\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n         <!-- Email -->\r\n<div *ngIf=\"field.type === 'Email'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n          <!-- Numbers -->\r\n<div *ngIf=\"field.type === 'Numbers'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n,\r\n\r\n          <!-- List -->\r\n    <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n         <!-- TextArea -->\r\n<div *ngIf=\"field.type === 'TextArea'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">\r\n          {{ field.questionText ? field.questionText : 'Enter your text' }}\r\n          <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\r\n        </label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <textarea\r\n        [placeholder]=\"field.question || 'Enter detailed text here...'\"\r\n        [style.height.px]=\"field.size || 100\"\r\n        [style.width.%]=\"100\"\r\n        [readonly]=\"field.readOnly\"\r\n        [class.hidden]=\"field.isHide\"\r\n        [(ngModel)]=\"field.text\">\r\n      </textarea>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Radio -->\r\n    <div *ngIf=\"field.type === 'Radio'\" class=\"Radio-options\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n      <label>{{ field.questionText }}</label>\r\n      <div *ngFor=\"let option of field.options\" class=\"radio-item\">\r\n        <label><input type=\"radio\" name=\"{{ field.questionText }}\" /><span>{{ option }}</span></label>\r\n      </div>\r\n      <button class=\"delete-btn2\" (click)=\"removeElement(field, i)\"><img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" /></button>\r\n    </div>\r\n\r\n          <!-- Image -->\r\n    <div *ngIf=\"field.type === 'Image'\" class=\"image-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"file\" accept=\"image/*\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- Button -->\r\n    <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <button>{{ field.questionText }}</button>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- File -->\r\n    <div *ngIf=\"field.type === 'File'\" class=\"file-field-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"file\" />\r\n      <img class=\"trash-right\" src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n  </div>\r\n\r\n<!-- Tables -->\r\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n  <label>{{ field.questionText }}</label>\r\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n  </table>\r\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n\r\n          <!-- Book -->\r\n<div *ngIf=\"field.type === 'Book'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Label -->\r\n<div *ngIf=\"field.type === 'Label'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n</ng-container>\r\n      </div>\r\n      <!-- Form Builder Section All Elements -->\r\n      <div class=\"form-builder\">\r\n        <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n          <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n          <div class=\"hover-label\">Calendar</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n          <img src=\"../assets/icons/CheckBox.svg\">\r\n          <div class=\"hover-label\">Check Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Email')\">\r\n          <img src=\"../assets/icons/Email.svg\">\r\n          <div class=\"hover-label\">Email</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('File')\">\r\n          <img src=\"../assets/icons/File.svg\">\r\n          <div class=\"hover-label\">File</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('List')\">\r\n          <img src=\"../assets/icons/List.svg\">\r\n          <div class=\"hover-label\">List</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Tables')\">\r\n          <img src=\"../assets/icons/Table.svg\">\r\n          <div class=\"hover-label\">Tables</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Text')\">\r\n          <img src=\"../assets/icons/Text.svg\">\r\n          <div class=\"hover-label\">Text Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n          <img src=\"../assets/icons/TextArea.svg\">\r\n          <div class=\"hover-label\">Text Area</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n          <img src=\"../assets/icons/Number.svg\">\r\n          <div class=\"hover-label\">Numbers</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n          <img src=\"../assets/icons/Drop.svg\">\r\n          <div class=\"hover-label\">Dropdown</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Image')\">\r\n          <img src=\"../assets/Image.svg\">\r\n          <div class=\"hover-label\">Image</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Radio')\">\r\n          <img src=\"../assets/icons/Radio.svg\">\r\n          <div class=\"hover-label\">Radio</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Label')\">\r\n          <img src=\"../assets/icons/Label.svg\">\r\n          <div class=\"hover-label\">Label</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Book')\">\r\n          <img src=\"../assets/icons/Book.svg\">\r\n          <div class=\"hover-label\">Book</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Button')\">\r\n          <img src=\"../assets/icons/Button.svg\">\r\n          <div class=\"hover-label\">Button</div>\r\n        </div>\r\n      </div>\r\n\r\n  </div>\r\n\r\n\r\n\r\n\r\n", styles: [".center-frame{width:71%;padding:26px;box-sizing:border-box;background-color:#edf1f5}.box{box-sizing:border-box}.form-builder{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;position:sticky;bottom:91px;width:78%;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:37rem;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.form-preview[cdkDropListOrientation=vertical]{flex-direction:column}.form-preview[cdkDropListOrientation=horizontal]{flex-direction:row}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.textbox-container label{flex-grow:1}.trash-right{width:28px;position:relative;background-color:#f5ebea;height:27px;border-radius:50px}.trash-right img{position:relative;left:23%;top:3px}.table-container{overflow-x:auto}.textbox-container{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin:10px auto;background-color:#f6f6f6;padding:10px 15px;border-radius:5px;box-shadow:0 1px 3px #0000001a;position:relative}.textbox-container label{font-size:14px;width:100px;color:#15234b;margin-bottom:5px;display:block;position:relative;left:27px;top:-12px}.textbox-container input[type=text]{width:95%;height:40px;padding:0 0 0 10px;font-size:14px;border:none;border-radius:5px;background-color:#fff;color:#333;position:absolute;left:40px;top:39px}.textbox-container input[type=text]::placeholder{color:#b8bcca;font-style:italic}.textbox-container input[type=text]:hover,.textbox-container input[type=text]:focus{outline:none;border:1px solid #15234b;box-shadow:0 0 5px #15234b4d}.textbox-container .remove-icon{position:relative;top:-40px;right:-17px;font-size:18px;color:#ff4d4d;cursor:pointer;transition:transform .2s,color .2s}.textbox-container .remove-icon:hover{transform:scale(1.2);color:#d11a2a}.table-container{width:100%;max-width:600px;margin:20px auto;background-color:#d9d9d9;padding:15px;height:47%;border-radius:5px;box-shadow:0 1px 3px #0000001a}.table-container label{font-size:16px;font-weight:700;color:#15234b;margin-bottom:10px;display:block;width:200px;position:relative;top:-53px;left:21px}table{width:557px;height:90%;position:relative;left:20px;top:-58px;border-collapse:collapse;margin-top:10px;text-align:left}table th{background-color:#e4881e;color:#fff;padding:10px;font-size:14px;text-transform:uppercase}table thead{height:38px}table td{background-color:#fff;color:#333;padding:10px;font-size:14px;border:1px solid #ddd}table tbody tr:nth-child(2n) td{background-color:#f9f9f9}table tbody tr:hover td{background-color:#f1f1f1;transition:background-color .2s ease-in-out}.trash-right1{width:28px;position:relative;top:-233px;left:96%;background-color:#d7bbc3;height:27px;border-radius:50px}.trash-right1 img{position:relative;left:23%;top:4px}.file-field-container,.image-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.file-field-container label,.image-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.file-field-container input[type=file],.image-container input[type=file]{width:95%;padding:10px;font-size:14px;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.file-field-container input[type=file]:hover,.file-field-container input[type=file]:focus{border-color:#007bff;box-shadow:0 0 4px #007bff80;outline:none}.file-field-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.file-field-container img:hover{opacity:1}.dropdown-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.dropdown-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.dropdown-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.dropdown-options{width:94%;position:relative;left:25px;height:100px;border-radius:5px;border:none}.CheckBox-options{display:flex;flex-direction:column;gap:10px;height:94px;width:45%;padding:10px;background-color:#f6f6f6;border-radius:8px;box-shadow:0 2px 4px #0000001a}.checkbox-container{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:6px;background-color:#fff;position:relative;right:-25px;width:94%}.label-text{width:93px;position:relative;left:27px}.option-label{display:flex;align-items:center;gap:10px;position:relative;top:5px;left:10px;font-size:14px;font-weight:500;color:gray;width:83px}.option-label input[type=checkbox]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.label-text{margin-left:5px}.option-value{position:relative;left:113px;top:-19px}.add-option-btn{position:absolute;top:5px;left:273px;border:none}.remove-option-btn{position:absolute;top:4px;left:310px;border:none}.delete-btn1{position:relative;top:-39px;left:18px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center}.delete-btn1 img{width:18px;height:18px}.Radio-options{display:flex;flex-direction:column;padding:10px;background-color:#f6f6f6;height:94px;width:45%;border-radius:8px;box-shadow:0 2px 4px #0000001a}.radio-container{display:flex;flex-direction:column;position:relative;top:1px;right:-26px;width:94%;height:43px;padding:10px;border-radius:6px;background-color:#fff}.radio-label{font-size:14px;color:#000;margin-bottom:8px;width:104px;height:21px;position:relative;left:31px}.radio-group{display:flex;gap:20px}.radio-item{display:flex;align-items:center}.option-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.option-label input[type=radio]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.radio-text{margin-left:5px}.delete-btn2{position:relative;top:-33px;left:374px;width:24px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease-in-out}.delete-btn2 img{width:18px;height:18px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\r\n<div class=\"center-frame\">\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n      <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\r\n        <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\r\n         <!-- AP-29JAN25 remove empty classes -->\r\n          <!-- TextBox -->\r\n          <div *ngIf=\"field.type === 'Text'\"  style=\"padding: 10px;\r\n          background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n           <div class=\"flex\" style=\"display: flex;\">\r\n            <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n            <div style=\"width: 97%;\">\r\n            <div class=\"flex lab-conatiner\">\r\n            <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n            <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\r\n          </div>\r\n        </div>\r\n          </div>\r\n\r\n          <!-- CheckBox -->\r\n<div *ngIf=\"field.type === 'CheckBox'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\">\r\n      <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n    </div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <div class=\"checkbox-container\" style=\"width:100%; background-color:#ffff\">\r\n          <div>\r\n              <input type=\"checkbox\" name=\"option1\" value=\"1\"> Option 1    \r\n          </div>\r\n        \r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n  <!-- AP-29JAN25 drop-down design check -->\r\n   <!-- Dropdown Field -->\r\n   <div *ngIf=\"field.type === 'Dropdown'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n    <div class=\"flex\" style=\"display: flex;\">\r\n      <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n      <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n        </div>\r\n    <select id=\"options\" class=\"dropdown\">\r\n        <option value=\"option1\">Option 1</option>\r\n        <option value=\"option2\">Option 2</option>\r\n        <option value=\"option3\">Option 3</option>\r\n    </select>\r\n    </div>\r\n    </div>\r\n</div>\r\n\r\n         <!-- Calendar -->\r\n<div *ngIf=\"['Calendar'].includes(field.type)\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n         <!-- Email -->\r\n<div *ngIf=\"field.type === 'Email'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n          <!-- Numbers -->\r\n<div *ngIf=\"field.type === 'Numbers'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n          <!-- List -->\r\n    <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n         <!-- TextArea -->\r\n<div *ngIf=\"field.type === 'TextArea'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">\r\n          {{ field.questionText ? field.questionText : 'Enter your text' }}\r\n          <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\r\n        </label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <textarea\r\n        [placeholder]=\"field.question || 'Enter detailed text here...'\"\r\n        [style.height.px]=\"field.size || 100\"\r\n        [style.width.%]=\"100\"\r\n        [readonly]=\"field.readOnly\"\r\n        [class.hidden]=\"field.isHide\"\r\n        [(ngModel)]=\"field.text\">\r\n      </textarea>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- AP-29JAN25 radio-button design check -->\r\n<!-- Radio -->\r\n          <div *ngIf=\"field.type === 'Radio'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n            <div class=\"flex\" style=\"display: flex;\">\r\n              <div class=\"all-dots\">\r\n                <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n              </div>\r\n              <div style=\"width: 97%;\">\r\n                <div class=\"flex lab-conatiner\">\r\n                  <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n                </div>\r\n                <div class=\"radio-options\" style=\"display: flex;\">\r\n                  <div *ngFor=\"let option of field.options\" class=\"radio-item\" style=\"margin-right: 15px;\">\r\n                    <label>\r\n                      <input type=\"radio\" name=\"{{ field.questionText }}\" [(ngModel)]=\"field.value\" [value]=\"option\" />\r\n                      <span>{{ option }}</span>\r\n                    </label>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          \r\n          \r\n\r\n          <!-- AP-29JAN25 Image design change -->\r\n          <!-- Image -->\r\n<div *ngIf=\"field.type === 'Image'\"  style=\"padding: 10px; background-color: whitesmoke;\" \r\n     (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n    </div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-container\">\r\n        <label [class.required]=\"field.required\">\r\n          {{ field.questionText ? field.questionText : 'Upload Image' }}\r\n        </label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"file\" accept=\"image/*\" style=\"background-color: #ffff;\"/>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Button -->\r\n    <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <button>{{ field.questionText }}</button>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- File -->\r\n           <!-- AP-29JAN25 file design change -->\r\n<div *ngIf=\"field.type === 'File'\" style=\"padding: 10px; background-color: whitesmoke;\" \r\n(click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n<div class=\"flex\" style=\"display: flex;\">\r\n<div class=\"all-dots\">\r\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n</div>\r\n<div style=\"width: 97%;\">\r\n <div class=\"flex lab-container\">\r\n   <label [class.required]=\"field.required\">\r\n     {{ field.questionText ? field.questionText : 'Upload File' }}\r\n   </label>\r\n   <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"file\" style=\"background-color: #ffff;\"/>\r\n</div>\r\n</div>\r\n</div>\r\n\r\n<!-- Tables -->\r\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n  <label>{{ field.questionText }}</label>\r\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n  </table>\r\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n\r\n          <!-- Book -->\r\n<div *ngIf=\"field.type === 'Book'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Label -->\r\n<div *ngIf=\"field.type === 'Label'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n</ng-container>\r\n      </div>\r\n      <!-- Form Builder Section All Elements -->\r\n      <div class=\"form-builder\">\r\n        <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n          <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n          <div class=\"hover-label\">Calendar</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n          <img src=\"../assets/icons/CheckBox.svg\">\r\n          <div class=\"hover-label\">Check Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Email')\">\r\n          <img src=\"../assets/icons/Email.svg\">\r\n          <div class=\"hover-label\">Email</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('File')\">\r\n          <img src=\"../assets/icons/File.svg\">\r\n          <div class=\"hover-label\">File</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('List')\">\r\n          <img src=\"../assets/icons/List.svg\">\r\n          <div class=\"hover-label\">List</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Tables')\">\r\n          <img src=\"../assets/icons/Table.svg\">\r\n          <div class=\"hover-label\">Tables</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Text')\">\r\n          <img src=\"../assets/icons/Text.svg\">\r\n          <div class=\"hover-label\">Text Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n          <img src=\"../assets/icons/TextArea.svg\">\r\n          <div class=\"hover-label\">Text Area</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n          <img src=\"../assets/icons/Number.svg\">\r\n          <div class=\"hover-label\">Numbers</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n          <img src=\"../assets/icons/Drop.svg\">\r\n          <div class=\"hover-label\">Dropdown</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Image')\">\r\n          <img src=\"../assets/Image.svg\">\r\n          <div class=\"hover-label\">Image</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Radio')\">\r\n          <img src=\"../assets/icons/Radio.svg\">\r\n          <div class=\"hover-label\">Radio</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Label')\">\r\n          <img src=\"../assets/icons/Label.svg\">\r\n          <div class=\"hover-label\">Label</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Book')\">\r\n          <img src=\"../assets/icons/Book.svg\">\r\n          <div class=\"hover-label\">Book</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Button')\">\r\n          <img src=\"../assets/icons/Button.svg\">\r\n          <div class=\"hover-label\">Button</div>\r\n        </div>\r\n      </div>\r\n\r\n  </div>\r\n\r\n\r\n\r\n\r\n", styles: [".center-frame{padding:26px;box-sizing:border-box;background-color:#edf1f5}.form-builder{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:85vh;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.dropdown{width:100%;padding:8px;font-size:16px;cursor:pointer}.dropdown:focus{border-color:#007bff;outline:none}\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 -->\r\n<div class=\"center-frame\">\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n      <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\r\n        <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\r\n\r\n          <!-- TextBox -->\r\n          <div *ngIf=\"field.type === 'Text'\" class=\"\" style=\"padding: 10px;\r\n    background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n           <div class=\"flex\" style=\"display: flex;\">\r\n            <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n            <div style=\"width: 97%;\">\r\n            <div class=\"flex lab-conatiner\">\r\n            <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n            <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\r\n          </div>\r\n        </div>\r\n          </div>\r\n\r\n          <!-- CheckBox -->\r\n           <div class=\"CheckBox-options\" *ngIf=\"field.type === 'CheckBox'\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <span class=\"label-text\">{{ field.questionText }}</span>\r\n            <div class=\"checkbox-container\">\r\n              <label class=\"option-label\">\r\n            <!-- Options Section -->\r\n             <div *ngIf=\"field.options?.length > 0\" class=\"options-container\">\r\n    <div *ngFor=\"let option of field.options; let i = index\"      class=\"option-item\">\r\n      <!-- Option Input -->\r\n      <input type=\"text\" [(ngModel)]=\"option.label\" placeholder=\"Label\" class=\"option-label\"/>\r\n      <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Value\"class=\"option-value\"/>\r\n      <!-- Remove Button -->\r\n      <button class=\"remove-option-btn\" (click)=\"removeOption(field.options, i)\">\r\n        <img src=\"../assets/icons/Trash.svg\" alt=\"Remove Option\" />\r\n      </button>\r\n    </div>\r\n    <!-- Add Option Button -->\r\n    <button type=\"button\" class=\"add-option-btn\" (click)=\"addOption(field.options)\">\r\n      <span class=\"text-lg\">+</span>\r\n    </button>\r\n            </div>\r\n              </label>\r\n    <button class=\"trash-right\" (click)=\"removeElement(field, i)\">\r\n                <img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Dropdown -->\r\n    <div *ngIf=\"field.type === 'Dropdown'\" class=\"dropdown-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <select class=\"dropdown-options\"><option *ngFor=\"let option of field.options\" >{{ option }}</option></select>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n         <!-- Calendar -->\r\n<div *ngIf=\"['Calendar'].includes(field.type)\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n         <!-- Email -->\r\n<div *ngIf=\"field.type === 'Email'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n          <!-- Numbers -->\r\n<div *ngIf=\"field.type === 'Numbers'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n,\r\n\r\n          <!-- List -->\r\n    <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n         <!-- TextArea -->\r\n<div *ngIf=\"field.type === 'TextArea'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">\r\n          {{ field.questionText ? field.questionText : 'Enter your text' }}\r\n          <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\r\n        </label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <textarea\r\n        [placeholder]=\"field.question || 'Enter detailed text here...'\"\r\n        [style.height.px]=\"field.size || 100\"\r\n        [style.width.%]=\"100\"\r\n        [readonly]=\"field.readOnly\"\r\n        [class.hidden]=\"field.isHide\"\r\n        [(ngModel)]=\"field.text\">\r\n      </textarea>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Radio -->\r\n    <div *ngIf=\"field.type === 'Radio'\" class=\"Radio-options\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n      <label>{{ field.questionText }}</label>\r\n      <div *ngFor=\"let option of field.options\" class=\"radio-item\">\r\n        <label><input type=\"radio\" name=\"{{ field.questionText }}\" /><span>{{ option }}</span></label>\r\n      </div>\r\n      <button class=\"delete-btn2\" (click)=\"removeElement(field, i)\"><img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" /></button>\r\n    </div>\r\n\r\n          <!-- Image -->\r\n    <div *ngIf=\"field.type === 'Image'\" class=\"image-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"file\" accept=\"image/*\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- Button -->\r\n    <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <button>{{ field.questionText }}</button>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- File -->\r\n    <div *ngIf=\"field.type === 'File'\" class=\"file-field-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"file\" />\r\n      <img class=\"trash-right\" src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n  </div>\r\n\r\n<!-- Tables -->\r\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n  <label>{{ field.questionText }}</label>\r\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n  </table>\r\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n\r\n          <!-- Book -->\r\n<div *ngIf=\"field.type === 'Book'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Label -->\r\n<div *ngIf=\"field.type === 'Label'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n</ng-container>\r\n      </div>\r\n      <!-- Form Builder Section All Elements -->\r\n      <div class=\"form-builder\">\r\n        <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n          <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n          <div class=\"hover-label\">Calendar</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n          <img src=\"../assets/icons/CheckBox.svg\">\r\n          <div class=\"hover-label\">Check Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Email')\">\r\n          <img src=\"../assets/icons/Email.svg\">\r\n          <div class=\"hover-label\">Email</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('File')\">\r\n          <img src=\"../assets/icons/File.svg\">\r\n          <div class=\"hover-label\">File</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('List')\">\r\n          <img src=\"../assets/icons/List.svg\">\r\n          <div class=\"hover-label\">List</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Tables')\">\r\n          <img src=\"../assets/icons/Table.svg\">\r\n          <div class=\"hover-label\">Tables</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Text')\">\r\n          <img src=\"../assets/icons/Text.svg\">\r\n          <div class=\"hover-label\">Text Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n          <img src=\"../assets/icons/TextArea.svg\">\r\n          <div class=\"hover-label\">Text Area</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n          <img src=\"../assets/icons/Number.svg\">\r\n          <div class=\"hover-label\">Numbers</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n          <img src=\"../assets/icons/Drop.svg\">\r\n          <div class=\"hover-label\">Dropdown</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Image')\">\r\n          <img src=\"../assets/Image.svg\">\r\n          <div class=\"hover-label\">Image</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Radio')\">\r\n          <img src=\"../assets/icons/Radio.svg\">\r\n          <div class=\"hover-label\">Radio</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Label')\">\r\n          <img src=\"../assets/icons/Label.svg\">\r\n          <div class=\"hover-label\">Label</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Book')\">\r\n          <img src=\"../assets/icons/Book.svg\">\r\n          <div class=\"hover-label\">Book</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Button')\">\r\n          <img src=\"../assets/icons/Button.svg\">\r\n          <div class=\"hover-label\">Button</div>\r\n        </div>\r\n      </div>\r\n\r\n  </div>\r\n\r\n\r\n\r\n\r\n", styles: [".center-frame{width:71%;padding:26px;box-sizing:border-box;background-color:#edf1f5}.box{box-sizing:border-box}.form-builder{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;position:sticky;bottom:91px;width:78%;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:37rem;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.form-preview[cdkDropListOrientation=vertical]{flex-direction:column}.form-preview[cdkDropListOrientation=horizontal]{flex-direction:row}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.textbox-container label{flex-grow:1}.trash-right{width:28px;position:relative;background-color:#f5ebea;height:27px;border-radius:50px}.trash-right img{position:relative;left:23%;top:3px}.table-container{overflow-x:auto}.textbox-container{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin:10px auto;background-color:#f6f6f6;padding:10px 15px;border-radius:5px;box-shadow:0 1px 3px #0000001a;position:relative}.textbox-container label{font-size:14px;width:100px;color:#15234b;margin-bottom:5px;display:block;position:relative;left:27px;top:-12px}.textbox-container input[type=text]{width:95%;height:40px;padding:0 0 0 10px;font-size:14px;border:none;border-radius:5px;background-color:#fff;color:#333;position:absolute;left:40px;top:39px}.textbox-container input[type=text]::placeholder{color:#b8bcca;font-style:italic}.textbox-container input[type=text]:hover,.textbox-container input[type=text]:focus{outline:none;border:1px solid #15234b;box-shadow:0 0 5px #15234b4d}.textbox-container .remove-icon{position:relative;top:-40px;right:-17px;font-size:18px;color:#ff4d4d;cursor:pointer;transition:transform .2s,color .2s}.textbox-container .remove-icon:hover{transform:scale(1.2);color:#d11a2a}.table-container{width:100%;max-width:600px;margin:20px auto;background-color:#d9d9d9;padding:15px;height:47%;border-radius:5px;box-shadow:0 1px 3px #0000001a}.table-container label{font-size:16px;font-weight:700;color:#15234b;margin-bottom:10px;display:block;width:200px;position:relative;top:-53px;left:21px}table{width:557px;height:90%;position:relative;left:20px;top:-58px;border-collapse:collapse;margin-top:10px;text-align:left}table th{background-color:#e4881e;color:#fff;padding:10px;font-size:14px;text-transform:uppercase}table thead{height:38px}table td{background-color:#fff;color:#333;padding:10px;font-size:14px;border:1px solid #ddd}table tbody tr:nth-child(2n) td{background-color:#f9f9f9}table tbody tr:hover td{background-color:#f1f1f1;transition:background-color .2s ease-in-out}.trash-right1{width:28px;position:relative;top:-233px;left:96%;background-color:#d7bbc3;height:27px;border-radius:50px}.trash-right1 img{position:relative;left:23%;top:4px}.file-field-container,.image-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.file-field-container label,.image-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.file-field-container input[type=file],.image-container input[type=file]{width:95%;padding:10px;font-size:14px;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.file-field-container input[type=file]:hover,.file-field-container input[type=file]:focus{border-color:#007bff;box-shadow:0 0 4px #007bff80;outline:none}.file-field-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.file-field-container img:hover{opacity:1}.dropdown-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.dropdown-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.dropdown-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.dropdown-options{width:94%;position:relative;left:25px;height:100px;border-radius:5px;border:none}.CheckBox-options{display:flex;flex-direction:column;gap:10px;height:94px;width:45%;padding:10px;background-color:#f6f6f6;border-radius:8px;box-shadow:0 2px 4px #0000001a}.checkbox-container{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:6px;background-color:#fff;position:relative;right:-25px;width:94%}.label-text{width:93px;position:relative;left:27px}.option-label{display:flex;align-items:center;gap:10px;position:relative;top:5px;left:10px;font-size:14px;font-weight:500;color:gray;width:83px}.option-label input[type=checkbox]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.label-text{margin-left:5px}.option-value{position:relative;left:113px;top:-19px}.add-option-btn{position:absolute;top:5px;left:273px;border:none}.remove-option-btn{position:absolute;top:4px;left:310px;border:none}.delete-btn1{position:relative;top:-39px;left:18px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center}.delete-btn1 img{width:18px;height:18px}.Radio-options{display:flex;flex-direction:column;padding:10px;background-color:#f6f6f6;height:94px;width:45%;border-radius:8px;box-shadow:0 2px 4px #0000001a}.radio-container{display:flex;flex-direction:column;position:relative;top:1px;right:-26px;width:94%;height:43px;padding:10px;border-radius:6px;background-color:#fff}.radio-label{font-size:14px;color:#000;margin-bottom:8px;width:104px;height:21px;position:relative;left:31px}.radio-group{display:flex;gap:20px}.radio-item{display:flex;align-items:center}.option-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.option-label input[type=radio]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.radio-text{margin-left:5px}.delete-btn2{position:relative;top:-33px;left:374px;width:24px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease-in-out}.delete-btn2 img{width:18px;height:18px}\n"] }]
+            args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\r\n<div class=\"center-frame\">\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n      <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\r\n        <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\r\n         <!-- AP-29JAN25 remove empty classes -->\r\n          <!-- TextBox -->\r\n          <div *ngIf=\"field.type === 'Text'\"  style=\"padding: 10px;\r\n          background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n           <div class=\"flex\" style=\"display: flex;\">\r\n            <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n            <div style=\"width: 97%;\">\r\n            <div class=\"flex lab-conatiner\">\r\n            <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n            <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\r\n          </div>\r\n        </div>\r\n          </div>\r\n\r\n          <!-- CheckBox -->\r\n<div *ngIf=\"field.type === 'CheckBox'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\">\r\n      <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n    </div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <div class=\"checkbox-container\" style=\"width:100%; background-color:#ffff\">\r\n          <div>\r\n              <input type=\"checkbox\" name=\"option1\" value=\"1\"> Option 1    \r\n          </div>\r\n        \r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n  <!-- AP-29JAN25 drop-down design check -->\r\n   <!-- Dropdown Field -->\r\n   <div *ngIf=\"field.type === 'Dropdown'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n    <div class=\"flex\" style=\"display: flex;\">\r\n      <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n      <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n        </div>\r\n    <select id=\"options\" class=\"dropdown\">\r\n        <option value=\"option1\">Option 1</option>\r\n        <option value=\"option2\">Option 2</option>\r\n        <option value=\"option3\">Option 3</option>\r\n    </select>\r\n    </div>\r\n    </div>\r\n</div>\r\n\r\n         <!-- Calendar -->\r\n<div *ngIf=\"['Calendar'].includes(field.type)\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n         <!-- Email -->\r\n<div *ngIf=\"field.type === 'Email'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n          <!-- Numbers -->\r\n<div *ngIf=\"field.type === 'Numbers'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n          <!-- List -->\r\n    <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n         <!-- TextArea -->\r\n<div *ngIf=\"field.type === 'TextArea'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">\r\n          {{ field.questionText ? field.questionText : 'Enter your text' }}\r\n          <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\r\n        </label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <textarea\r\n        [placeholder]=\"field.question || 'Enter detailed text here...'\"\r\n        [style.height.px]=\"field.size || 100\"\r\n        [style.width.%]=\"100\"\r\n        [readonly]=\"field.readOnly\"\r\n        [class.hidden]=\"field.isHide\"\r\n        [(ngModel)]=\"field.text\">\r\n      </textarea>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- AP-29JAN25 radio-button design check -->\r\n<!-- Radio -->\r\n          <div *ngIf=\"field.type === 'Radio'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n            <div class=\"flex\" style=\"display: flex;\">\r\n              <div class=\"all-dots\">\r\n                <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n              </div>\r\n              <div style=\"width: 97%;\">\r\n                <div class=\"flex lab-conatiner\">\r\n                  <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n                </div>\r\n                <div class=\"radio-options\" style=\"display: flex;\">\r\n                  <div *ngFor=\"let option of field.options\" class=\"radio-item\" style=\"margin-right: 15px;\">\r\n                    <label>\r\n                      <input type=\"radio\" name=\"{{ field.questionText }}\" [(ngModel)]=\"field.value\" [value]=\"option\" />\r\n                      <span>{{ option }}</span>\r\n                    </label>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          \r\n          \r\n\r\n          <!-- AP-29JAN25 Image design change -->\r\n          <!-- Image -->\r\n<div *ngIf=\"field.type === 'Image'\"  style=\"padding: 10px; background-color: whitesmoke;\" \r\n     (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n    </div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-container\">\r\n        <label [class.required]=\"field.required\">\r\n          {{ field.questionText ? field.questionText : 'Upload Image' }}\r\n        </label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"file\" accept=\"image/*\" style=\"background-color: #ffff;\"/>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Button -->\r\n    <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <button>{{ field.questionText }}</button>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- File -->\r\n           <!-- AP-29JAN25 file design change -->\r\n<div *ngIf=\"field.type === 'File'\" style=\"padding: 10px; background-color: whitesmoke;\" \r\n(click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n<div class=\"flex\" style=\"display: flex;\">\r\n<div class=\"all-dots\">\r\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n</div>\r\n<div style=\"width: 97%;\">\r\n <div class=\"flex lab-container\">\r\n   <label [class.required]=\"field.required\">\r\n     {{ field.questionText ? field.questionText : 'Upload File' }}\r\n   </label>\r\n   <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"file\" style=\"background-color: #ffff;\"/>\r\n</div>\r\n</div>\r\n</div>\r\n\r\n<!-- Tables -->\r\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n  <label>{{ field.questionText }}</label>\r\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n  </table>\r\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n\r\n          <!-- Book -->\r\n<div *ngIf=\"field.type === 'Book'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Label -->\r\n<div *ngIf=\"field.type === 'Label'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n</ng-container>\r\n      </div>\r\n      <!-- Form Builder Section All Elements -->\r\n      <div class=\"form-builder\">\r\n        <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n          <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n          <div class=\"hover-label\">Calendar</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n          <img src=\"../assets/icons/CheckBox.svg\">\r\n          <div class=\"hover-label\">Check Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Email')\">\r\n          <img src=\"../assets/icons/Email.svg\">\r\n          <div class=\"hover-label\">Email</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('File')\">\r\n          <img src=\"../assets/icons/File.svg\">\r\n          <div class=\"hover-label\">File</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('List')\">\r\n          <img src=\"../assets/icons/List.svg\">\r\n          <div class=\"hover-label\">List</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Tables')\">\r\n          <img src=\"../assets/icons/Table.svg\">\r\n          <div class=\"hover-label\">Tables</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Text')\">\r\n          <img src=\"../assets/icons/Text.svg\">\r\n          <div class=\"hover-label\">Text Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n          <img src=\"../assets/icons/TextArea.svg\">\r\n          <div class=\"hover-label\">Text Area</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n          <img src=\"../assets/icons/Number.svg\">\r\n          <div class=\"hover-label\">Numbers</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n          <img src=\"../assets/icons/Drop.svg\">\r\n          <div class=\"hover-label\">Dropdown</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Image')\">\r\n          <img src=\"../assets/Image.svg\">\r\n          <div class=\"hover-label\">Image</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Radio')\">\r\n          <img src=\"../assets/icons/Radio.svg\">\r\n          <div class=\"hover-label\">Radio</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Label')\">\r\n          <img src=\"../assets/icons/Label.svg\">\r\n          <div class=\"hover-label\">Label</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Book')\">\r\n          <img src=\"../assets/icons/Book.svg\">\r\n          <div class=\"hover-label\">Book</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Button')\">\r\n          <img src=\"../assets/icons/Button.svg\">\r\n          <div class=\"hover-label\">Button</div>\r\n        </div>\r\n      </div>\r\n\r\n  </div>\r\n\r\n\r\n\r\n\r\n", styles: [".center-frame{padding:26px;box-sizing:border-box;background-color:#edf1f5}.form-builder{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:85vh;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.dropdown{width:100%;padding:8px;font-size:16px;cursor:pointer}.dropdown:focus{border-color:#007bff;outline:none}\n"] }]
         }], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { elementButtonClicked: [{
                 type: Output
             }], formContainer: [{
@@ -10550,6 +10553,7 @@ class PropertiesComponent {
     // selectedElement: any;
     colorWheel;
     ctx;
+    formButtonHandler = new EventEmitter();
     selectedOption = '';
     selectedElementIndex = -1;
     // @Input() selectedElement: any;
@@ -10976,17 +10980,6 @@ class PropertiesComponent {
             return null;
         return this.elementProperties[this.selectedElement.type];
     }
-    // openColorPicker(propertyKey: string) {
-    //   // If you want to use the browser's native color picker:
-    //   const input = document.createElement('input');
-    //   input.type = 'color';
-    //   input.value = this.selectedElement[propertyKey];
-    //   input.addEventListener('change', (e: any) => {
-    //     this.updateProperty(propertyKey, e.target.value);
-    //   });
-    //   input.click();
-    // }
-    // Function to add a new option to prop options
     addOption(options) {
         options.push({ label: '', value: '' });
     }
@@ -10997,23 +10990,20 @@ class PropertiesComponent {
     download() {
         console.log('Question Book:', this.formBuilderService.downloadElement());
     }
-    save() {
-        const apiURL = 'https://dev-api.rangerfusion.com/nxt/';
-        this.http.post(apiURL, this.formBuilderService.downloadElement()).subscribe((response) => {
-            console.log('Response:', response);
-        }, (error) => {
-            console.error('Error:', error);
-        });
+    handleButtonClick() {
+        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" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["colorWheel"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n<div class=\"container\">\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n  <h1 class=\"header-title\">Element Properties</h1>\r\n  <div class=\"menu-container\">\r\n    <div class=\"menu-item\" (click)=\"download()\">\r\n      <span >Download</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Start</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Path</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Clone</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n  <!-- Element Properties -->\r\n  <details class=\"first-properties\" open>\r\n    <summary class=\"text-sm \">Elements Properties</summary>\r\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n        <div class=\"flex-items-center\">\r\n          <label class=\"text-sm\">{{ prop.label }}</label>\r\n          <div class=\"label-properties\">\r\n            <!-- Text Input -->\r\n            <input *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            [value]=\"selectedElement[prop.key]\"\r\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n            [class.read-only]=\"selectedElement.readOnly\"\r\n            [readonly]=\"selectedElement.readOnly\"\r\n            class=\"text-sm1 \"\r\n          />\r\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n              {{ selectedElement.helpText }}\r\n            </div>\r\n\r\n\r\n         <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n    class=\"font-selection1\"\r\n    [value]=\"selectedElement?.font\"\r\n    (change)=\"updateProperty('font', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n      {{ option }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n    class=\"font-weight1 \"\r\n    [value]=\"selectedElement?.fontWeight\"\r\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n      {{ option.label }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n            <!-- Number Input with Unit -->\r\n            <div *ngIf=\"prop.type === 'number'\" class=\"size-controls\">\r\n              <div class=\"size-input-group\">\r\n                  <input\r\n                  type=\"number\"\r\n                  [value]=\"selectedElement[prop.key]\"\r\n                  (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n                  [min]=\"prop.min || 1\"\r\n                  [max]=\"prop.max || 999999\"\r\n                  class=\"size-value\"\r\n                />\r\n                <span class=\"size-unit\">{{ prop.unit }}</span>\r\n              </div>\r\n            </div>\r\n\r\n           <!-- Toggle Group -->\r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n  <span class=\"toggle-label\">Read Only</span>\r\n  <label class=\"switch\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"selectedElement?.readOnly\"\r\n      (change)=\"onToggleChange('readOnly', $event)\"\r\n    />\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n  <span class=\"toggle-label\">Is Hide</span>\r\n  <label class=\"switch\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"selectedElement?.isHide\"\r\n      (change)=\"onToggleChange('isHide', $event)\"\r\n    />\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n</div>\r\n\r\n            <!-- Text Align Buttons -->\r\n            <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onAlignSelect(option.value)\"\r\n                [class.active]=\"selectedElement?.textAlign === option.value\"\r\n                class=\"align-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n              <label>{{ prop.label }}</label>\r\n              <input\r\n                type=\"number\"\r\n                [value]=\"selectedElement[prop.key]\"\r\n                (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n                class=\"size-input\"\r\n              />\r\n              <span class=\"size-unit\">{{ prop.unit }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onStyleSelect(option.value)\"\r\n                [class.active]=\"isStyleActive(option.value)\"\r\n                class=\"style-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n  <div class=\"size-group\">\r\n    <label  class=\"size-label\">Width</label>\r\n    <div class=\"value-container\">\r\n    <input\r\n      type=\"number\"\r\n      [value]=\"selectedElement?.width\"\r\n      (input)=\"updateProperty('width', $event.target.value)\"\r\n      class=\"size-input\"\r\n\r\n    />\r\n    <span class=\"unit\">PX</span>\r\n  </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n    <div class=\"size-group\">\r\n      <label class=\"size-label\">Height</label>\r\n      <div class=\"value-container\">\r\n        <input\r\n          type=\"number\"\r\n          [value]=\"selectedElement?.height\"\r\n          (input)=\"updateProperty('height', $event.target.value)\"\r\n          class=\"size-input\"\r\n        />\r\n        <span class=\"unit\">PX</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </details>\r\n\r\n  <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n      <div class=\"flex-items-center \">\r\n        <label class=\"text-sm\">{{ prop.label }}</label>\r\n        <div class=\"input-box-field\">\r\n          <!-- Input Box -->\r\n          <input\r\n            *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            class=\"field-input\"\r\n          />\r\n          <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n      <div class=\"sizes\">\r\n          <div class=\"flex-gap\">\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"selectedElement.required\"\r\n      (change)=\"onRequiredChange(true)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-label\"\r\n      >\r\n        Required\r\n      </label>\r\n    </div>\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"!selectedElement.required\"\r\n      (change)=\"onRequiredChange(false)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-sm text-gray-400\"\r\n      >\r\n        Not Required\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n  <div\r\n    *ngFor=\"let option of prop.options; let i = index\"\r\n    class=\"option-items\"\r\n  >\r\n    <!-- Option Input -->\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].label\"\r\n      placeholder=\"Option {{ i + 1 }}\"\r\n      class=\"options\"\r\n    />\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].value\"\r\n      placeholder=\"Value\"\r\n      class=\"values\"\r\n    />\r\n    <!-- Remove Button -->\r\n    <div class=\"remove\">\r\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n  </div>\r\n  <!-- Add Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"add-btn\"\r\n    (click)=\"addOption(prop.options)\"\r\n  >\r\n  <div class=\"add-varient\">\r\n    <span class=\"text-lg\">+</span>\r\n    <span>Add Variants</span></div>\r\n  </button>\r\n</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"design-footer\">\r\n    <button class=\"btn\">Cancel</button>\r\n    <button class=\"btn\" (click)=\"save()\">Save</button>\r\n  </div>\r\n</details>\r\n</div>\r\n\r\n\r\n</div>\r\n", styles: [".container{position:absolute;right:0;top:0;width:25%}.all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-94px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-24px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["colorWheel"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n  <div class=\"properties\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n  <h1 class=\"header-title\">Element Properties</h1>\r\n  <div class=\"menu-container\">\r\n    <div class=\"menu-item\" (click)=\"download()\">\r\n      <span >Download</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Start</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Path</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Clone</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n  <!-- Element Properties -->\r\n  <details class=\"first-properties\" open>\r\n    <summary class=\"text-sm \">Elements Properties</summary>\r\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n        <div class=\"flex-items-center\">\r\n          <label class=\"text-sm\">{{ prop.label }}</label>\r\n          <div class=\"label-properties\">\r\n            <!-- Text Input -->\r\n            <input *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            [value]=\"selectedElement[prop.key]\"\r\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n            [class.read-only]=\"selectedElement.readOnly\"\r\n            [readonly]=\"selectedElement.readOnly\"\r\n            class=\"text-sm1 \"\r\n          />\r\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n              {{ selectedElement.helpText }}\r\n            </div>\r\n\r\n\r\n         <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n    class=\"font-selection1\"\r\n    [value]=\"selectedElement?.font\"\r\n    (change)=\"updateProperty('font', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n      {{ option }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n    class=\"font-weight\"\r\n    [value]=\"selectedElement?.fontWeight\"\r\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n      {{ option.label }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n          \r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n  <span class=\"toggle-label\">Read Only</span>\r\n  <label class=\"switch\">\r\n    <input  type=\"checkbox\"/>\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n  <span class=\"toggle-label\">Is Hide</span>\r\n  <label class=\"switch\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"selectedElement?.isHide\"\r\n      (change)=\"onToggleChange('isHide', $event)\"\r\n    />\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n</div>\r\n\r\n            <!-- Text Align Buttons -->\r\n            <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onAlignSelect(option.value)\"\r\n                [class.active]=\"selectedElement?.textAlign === option.value\"\r\n                class=\"align-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n              <label>{{ prop.label }}</label>\r\n              <input\r\n                type=\"number\"\r\n                [value]=\"selectedElement[prop.key]\"\r\n                (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n                class=\"size-input\"\r\n              />\r\n              <span class=\"size-unit\">{{ prop.unit }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onStyleSelect(option.value)\"\r\n                [class.active]=\"isStyleActive(option.value)\"\r\n                class=\"style-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n  <div class=\"size-group\">\r\n    <label  class=\"size-label\">Width</label>\r\n    <div class=\"value-container\">\r\n    <input\r\n      type=\"number\"\r\n      [value]=\"selectedElement?.width\"\r\n      (input)=\"updateProperty('width', $event.target.value)\"\r\n      class=\"size-input\"\r\n\r\n    />\r\n\r\n  </div>\r\n  </div>\r\n</div>\r\n</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </details>\r\n\r\n  <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n      <div class=\"flex-items-center \">\r\n        <label class=\"text-sm\">{{ prop.label }}</label>\r\n        <div class=\"input-box-field\">\r\n          <!-- Input Box -->\r\n          <input\r\n            *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            class=\"field-input\"\r\n          />\r\n          <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n      <div class=\"sizes\">\r\n          <div class=\"flex-gap\">\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"selectedElement.required\"\r\n      (change)=\"onRequiredChange(true)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-label\"\r\n      >\r\n        Required\r\n      </label>\r\n    </div>\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"!selectedElement.required\"\r\n      (change)=\"onRequiredChange(false)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-sm text-gray-400\"\r\n      >\r\n        Not Required\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n  <div\r\n    *ngFor=\"let option of prop.options; let i = index\"\r\n    class=\"option-items\"\r\n  >\r\n    <!-- Option Input -->\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].label\"\r\n      placeholder=\"Option {{ i + 1 }}\"\r\n      class=\"options\"\r\n    />\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].value\"\r\n      placeholder=\"Value\"\r\n      class=\"values\"\r\n    />\r\n    <!-- Remove Button -->\r\n    <div class=\"remove\">\r\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n  </div>\r\n  <!-- Add Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"add-btn\"\r\n    (click)=\"addOption(prop.options)\"\r\n  >\r\n  <div class=\"add-varient\">\r\n    <span class=\"text-lg\">+</span>\r\n    <span>Add Variants</span></div>\r\n  </button>\r\n</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"design-footer\">\r\n    <button class=\"btn\">Cancel</button>\r\n    <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\r\n  </div>\r\n</details>\r\n</div>\r\n</div>\r\n", styles: [".all-properties{padding:0;background-color:#f8fafc;position:relative;max-height:639px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:100px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n<div class=\"container\">\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n  <h1 class=\"header-title\">Element Properties</h1>\r\n  <div class=\"menu-container\">\r\n    <div class=\"menu-item\" (click)=\"download()\">\r\n      <span >Download</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Start</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Path</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Clone</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n  <!-- Element Properties -->\r\n  <details class=\"first-properties\" open>\r\n    <summary class=\"text-sm \">Elements Properties</summary>\r\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n        <div class=\"flex-items-center\">\r\n          <label class=\"text-sm\">{{ prop.label }}</label>\r\n          <div class=\"label-properties\">\r\n            <!-- Text Input -->\r\n            <input *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            [value]=\"selectedElement[prop.key]\"\r\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n            [class.read-only]=\"selectedElement.readOnly\"\r\n            [readonly]=\"selectedElement.readOnly\"\r\n            class=\"text-sm1 \"\r\n          />\r\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n              {{ selectedElement.helpText }}\r\n            </div>\r\n\r\n\r\n         <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n    class=\"font-selection1\"\r\n    [value]=\"selectedElement?.font\"\r\n    (change)=\"updateProperty('font', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n      {{ option }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n    class=\"font-weight1 \"\r\n    [value]=\"selectedElement?.fontWeight\"\r\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n      {{ option.label }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n            <!-- Number Input with Unit -->\r\n            <div *ngIf=\"prop.type === 'number'\" class=\"size-controls\">\r\n              <div class=\"size-input-group\">\r\n                  <input\r\n                  type=\"number\"\r\n                  [value]=\"selectedElement[prop.key]\"\r\n                  (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n                  [min]=\"prop.min || 1\"\r\n                  [max]=\"prop.max || 999999\"\r\n                  class=\"size-value\"\r\n                />\r\n                <span class=\"size-unit\">{{ prop.unit }}</span>\r\n              </div>\r\n            </div>\r\n\r\n           <!-- Toggle Group -->\r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n  <span class=\"toggle-label\">Read Only</span>\r\n  <label class=\"switch\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"selectedElement?.readOnly\"\r\n      (change)=\"onToggleChange('readOnly', $event)\"\r\n    />\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n  <span class=\"toggle-label\">Is Hide</span>\r\n  <label class=\"switch\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"selectedElement?.isHide\"\r\n      (change)=\"onToggleChange('isHide', $event)\"\r\n    />\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n</div>\r\n\r\n            <!-- Text Align Buttons -->\r\n            <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onAlignSelect(option.value)\"\r\n                [class.active]=\"selectedElement?.textAlign === option.value\"\r\n                class=\"align-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n              <label>{{ prop.label }}</label>\r\n              <input\r\n                type=\"number\"\r\n                [value]=\"selectedElement[prop.key]\"\r\n                (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n                class=\"size-input\"\r\n              />\r\n              <span class=\"size-unit\">{{ prop.unit }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onStyleSelect(option.value)\"\r\n                [class.active]=\"isStyleActive(option.value)\"\r\n                class=\"style-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n  <div class=\"size-group\">\r\n    <label  class=\"size-label\">Width</label>\r\n    <div class=\"value-container\">\r\n    <input\r\n      type=\"number\"\r\n      [value]=\"selectedElement?.width\"\r\n      (input)=\"updateProperty('width', $event.target.value)\"\r\n      class=\"size-input\"\r\n\r\n    />\r\n    <span class=\"unit\">PX</span>\r\n  </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n    <div class=\"size-group\">\r\n      <label class=\"size-label\">Height</label>\r\n      <div class=\"value-container\">\r\n        <input\r\n          type=\"number\"\r\n          [value]=\"selectedElement?.height\"\r\n          (input)=\"updateProperty('height', $event.target.value)\"\r\n          class=\"size-input\"\r\n        />\r\n        <span class=\"unit\">PX</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </details>\r\n\r\n  <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n      <div class=\"flex-items-center \">\r\n        <label class=\"text-sm\">{{ prop.label }}</label>\r\n        <div class=\"input-box-field\">\r\n          <!-- Input Box -->\r\n          <input\r\n            *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            class=\"field-input\"\r\n          />\r\n          <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n      <div class=\"sizes\">\r\n          <div class=\"flex-gap\">\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"selectedElement.required\"\r\n      (change)=\"onRequiredChange(true)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-label\"\r\n      >\r\n        Required\r\n      </label>\r\n    </div>\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"!selectedElement.required\"\r\n      (change)=\"onRequiredChange(false)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-sm text-gray-400\"\r\n      >\r\n        Not Required\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n  <div\r\n    *ngFor=\"let option of prop.options; let i = index\"\r\n    class=\"option-items\"\r\n  >\r\n    <!-- Option Input -->\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].label\"\r\n      placeholder=\"Option {{ i + 1 }}\"\r\n      class=\"options\"\r\n    />\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].value\"\r\n      placeholder=\"Value\"\r\n      class=\"values\"\r\n    />\r\n    <!-- Remove Button -->\r\n    <div class=\"remove\">\r\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n  </div>\r\n  <!-- Add Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"add-btn\"\r\n    (click)=\"addOption(prop.options)\"\r\n  >\r\n  <div class=\"add-varient\">\r\n    <span class=\"text-lg\">+</span>\r\n    <span>Add Variants</span></div>\r\n  </button>\r\n</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"design-footer\">\r\n    <button class=\"btn\">Cancel</button>\r\n    <button class=\"btn\" (click)=\"save()\">Save</button>\r\n  </div>\r\n</details>\r\n</div>\r\n\r\n\r\n</div>\r\n", styles: [".container{position:absolute;right:0;top:0;width:25%}.all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-94px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-24px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"] }]
+            args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n  <div class=\"properties\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n  <h1 class=\"header-title\">Element Properties</h1>\r\n  <div class=\"menu-container\">\r\n    <div class=\"menu-item\" (click)=\"download()\">\r\n      <span >Download</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Start</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Path</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Clone</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n  <!-- Element Properties -->\r\n  <details class=\"first-properties\" open>\r\n    <summary class=\"text-sm \">Elements Properties</summary>\r\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n        <div class=\"flex-items-center\">\r\n          <label class=\"text-sm\">{{ prop.label }}</label>\r\n          <div class=\"label-properties\">\r\n            <!-- Text Input -->\r\n            <input *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            [value]=\"selectedElement[prop.key]\"\r\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n            [class.read-only]=\"selectedElement.readOnly\"\r\n            [readonly]=\"selectedElement.readOnly\"\r\n            class=\"text-sm1 \"\r\n          />\r\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n              {{ selectedElement.helpText }}\r\n            </div>\r\n\r\n\r\n         <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n    class=\"font-selection1\"\r\n    [value]=\"selectedElement?.font\"\r\n    (change)=\"updateProperty('font', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n      {{ option }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n    class=\"font-weight\"\r\n    [value]=\"selectedElement?.fontWeight\"\r\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n      {{ option.label }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n          \r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n  <span class=\"toggle-label\">Read Only</span>\r\n  <label class=\"switch\">\r\n    <input  type=\"checkbox\"/>\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n  <span class=\"toggle-label\">Is Hide</span>\r\n  <label class=\"switch\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"selectedElement?.isHide\"\r\n      (change)=\"onToggleChange('isHide', $event)\"\r\n    />\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n</div>\r\n\r\n            <!-- Text Align Buttons -->\r\n            <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onAlignSelect(option.value)\"\r\n                [class.active]=\"selectedElement?.textAlign === option.value\"\r\n                class=\"align-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n              <label>{{ prop.label }}</label>\r\n              <input\r\n                type=\"number\"\r\n                [value]=\"selectedElement[prop.key]\"\r\n                (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n                class=\"size-input\"\r\n              />\r\n              <span class=\"size-unit\">{{ prop.unit }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onStyleSelect(option.value)\"\r\n                [class.active]=\"isStyleActive(option.value)\"\r\n                class=\"style-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n  <div class=\"size-group\">\r\n    <label  class=\"size-label\">Width</label>\r\n    <div class=\"value-container\">\r\n    <input\r\n      type=\"number\"\r\n      [value]=\"selectedElement?.width\"\r\n      (input)=\"updateProperty('width', $event.target.value)\"\r\n      class=\"size-input\"\r\n\r\n    />\r\n\r\n  </div>\r\n  </div>\r\n</div>\r\n</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </details>\r\n\r\n  <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n      <div class=\"flex-items-center \">\r\n        <label class=\"text-sm\">{{ prop.label }}</label>\r\n        <div class=\"input-box-field\">\r\n          <!-- Input Box -->\r\n          <input\r\n            *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            class=\"field-input\"\r\n          />\r\n          <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n      <div class=\"sizes\">\r\n          <div class=\"flex-gap\">\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"selectedElement.required\"\r\n      (change)=\"onRequiredChange(true)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-label\"\r\n      >\r\n        Required\r\n      </label>\r\n    </div>\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"!selectedElement.required\"\r\n      (change)=\"onRequiredChange(false)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-sm text-gray-400\"\r\n      >\r\n        Not Required\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n  <div\r\n    *ngFor=\"let option of prop.options; let i = index\"\r\n    class=\"option-items\"\r\n  >\r\n    <!-- Option Input -->\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].label\"\r\n      placeholder=\"Option {{ i + 1 }}\"\r\n      class=\"options\"\r\n    />\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].value\"\r\n      placeholder=\"Value\"\r\n      class=\"values\"\r\n    />\r\n    <!-- Remove Button -->\r\n    <div class=\"remove\">\r\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n  </div>\r\n  <!-- Add Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"add-btn\"\r\n    (click)=\"addOption(prop.options)\"\r\n  >\r\n  <div class=\"add-varient\">\r\n    <span class=\"text-lg\">+</span>\r\n    <span>Add Variants</span></div>\r\n  </button>\r\n</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"design-footer\">\r\n    <button class=\"btn\">Cancel</button>\r\n    <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\r\n  </div>\r\n</details>\r\n</div>\r\n</div>\r\n", styles: [".all-properties{padding:0;background-color:#f8fafc;position:relative;max-height:639px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:100px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { colorWheel: [{
                 type: ViewChild,
                 args: ['colorWheel']
+            }], formButtonHandler: [{
+                type: Output
             }], selectedElementType: [{
                 type: Input
             }] } });