@rangertechnologies/ngnxt 2.1.86 → 2.1.87

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -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: [{
@@ -10392,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;
@@ -10489,9 +10505,10 @@ class ElementComponent {
         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)) {
@@ -10514,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 *ngIf=\"field.type === 'CheckBox'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\">\r\n      <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n    </div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <div class=\"checkbox-container\">\r\n        <label *ngFor=\"let option of field.options\" class=\"option-label\">\r\n          <input type=\"checkbox\" [checked]=\"option.selected\" />\r\n          <span>{{ option.label }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n   <!-- Dropdown -->\r\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\">\r\n      <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n    </div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <select class=\"dropdown-options\" [(ngModel)]=\"field.selectedOption\">\r\n        <option *ngFor=\"let option of field.options\" [value]=\"option\">{{ option }}</option>\r\n      </select>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n         <!-- Calendar -->\r\n<div *ngIf=\"['Calendar'].includes(field.type)\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n         <!-- Email -->\r\n<div *ngIf=\"field.type === 'Email'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n          <!-- Numbers -->\r\n<div *ngIf=\"field.type === 'Numbers'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n          <!-- List -->\r\n    <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n         <!-- TextArea -->\r\n<div *ngIf=\"field.type === 'TextArea'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">\r\n          {{ field.questionText ? field.questionText : 'Enter your text' }}\r\n          <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\r\n        </label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <textarea\r\n        [placeholder]=\"field.question || 'Enter detailed text here...'\"\r\n        [style.height.px]=\"field.size || 100\"\r\n        [style.width.%]=\"100\"\r\n        [readonly]=\"field.readOnly\"\r\n        [class.hidden]=\"field.isHide\"\r\n        [(ngModel)]=\"field.text\">\r\n      </textarea>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Radio -->\r\n    <div *ngIf=\"field.type === 'Radio'\" class=\"Radio-options\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n      <label>{{ field.questionText }}</label>\r\n      <div *ngFor=\"let option of field.options\" class=\"radio-item\">\r\n        <label><input type=\"radio\" name=\"{{ field.questionText }}\" /><span>{{ option }}</span></label>\r\n      </div>\r\n      <button class=\"delete-btn2\" (click)=\"removeElement(field, i)\"><img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" /></button>\r\n    </div>\r\n\r\n          <!-- Image -->\r\n<div *ngIf=\"field.type === 'Image'\" class=\"image-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n<label>{{ field.questionText }}</label>\r\n<input type=\"file\" accept=\"image/*\" />\r\n<img\r\n  src=\"../assets/icons/Trash.svg\"\r\n  alt=\"Delete\"\r\n  (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n          <!-- Button -->\r\n    <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <button>{{ field.questionText }}</button>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- File -->\r\n    <div *ngIf=\"field.type === 'File'\" class=\"file-field-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"file\" />\r\n      <img class=\"trash-right\" src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n  </div>\r\n\r\n<!-- Tables -->\r\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n  <label>{{ field.questionText }}</label>\r\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n  </table>\r\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n\r\n          <!-- Book -->\r\n<div *ngIf=\"field.type === 'Book'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Label -->\r\n<div *ngIf=\"field.type === 'Label'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n</ng-container>\r\n      </div>\r\n      <!-- Form Builder Section All Elements -->\r\n      <div class=\"form-builder\">\r\n        <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n          <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n          <div class=\"hover-label\">Calendar</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n          <img src=\"../assets/icons/CheckBox.svg\">\r\n          <div class=\"hover-label\">Check Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Email')\">\r\n          <img src=\"../assets/icons/Email.svg\">\r\n          <div class=\"hover-label\">Email</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('File')\">\r\n          <img src=\"../assets/icons/File.svg\">\r\n          <div class=\"hover-label\">File</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('List')\">\r\n          <img src=\"../assets/icons/List.svg\">\r\n          <div class=\"hover-label\">List</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Tables')\">\r\n          <img src=\"../assets/icons/Table.svg\">\r\n          <div class=\"hover-label\">Tables</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Text')\">\r\n          <img src=\"../assets/icons/Text.svg\">\r\n          <div class=\"hover-label\">Text Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n          <img src=\"../assets/icons/TextArea.svg\">\r\n          <div class=\"hover-label\">Text Area</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n          <img src=\"../assets/icons/Number.svg\">\r\n          <div class=\"hover-label\">Numbers</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n          <img src=\"../assets/icons/Drop.svg\">\r\n          <div class=\"hover-label\">Dropdown</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Image')\">\r\n          <img src=\"../assets/Image.svg\">\r\n          <div class=\"hover-label\">Image</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Radio')\">\r\n          <img src=\"../assets/icons/Radio.svg\">\r\n          <div class=\"hover-label\">Radio</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Label')\">\r\n          <img src=\"../assets/icons/Label.svg\">\r\n          <div class=\"hover-label\">Label</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Book')\">\r\n          <img src=\"../assets/icons/Book.svg\">\r\n          <div class=\"hover-label\">Book</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Button')\">\r\n          <img src=\"../assets/icons/Button.svg\">\r\n          <div class=\"hover-label\">Button</div>\r\n        </div>\r\n      </div>\r\n\r\n  </div>\r\n\r\n\r\n\r\n\r\n", styles: [".center-frame{width:71%;padding:26px;box-sizing:border-box;background-color:#edf1f5}.box{box-sizing:border-box}.form-builder{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;position:sticky;bottom:91px;width:78%;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}@media (max-width: 1200px){.form-builder{width:85%}}@media (max-width: 768px){.form-builder{width:95%;gap:5px}}@media (max-width: 480px){.form-builder{flex-direction:column;gap:8px}}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:37rem;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.form-preview[cdkDropListOrientation=vertical]{flex-direction:column}.form-preview[cdkDropListOrientation=horizontal]{flex-direction:row}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.textbox-container label{flex-grow:1}.trash-right{width:28px;position:relative;background-color:#f5ebea;height:27px;border-radius:50px}.trash-right img{position:relative;left:23%;top:3px}.table-container{overflow-x:auto}.textbox-container{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin:10px auto;background-color:#f6f6f6;padding:10px 15px;border-radius:5px;box-shadow:0 1px 3px #0000001a;position:relative}.textbox-container label{font-size:14px;width:100px;color:#15234b;margin-bottom:5px;display:block;position:relative;left:27px;top:-12px}.textbox-container input[type=text]{width:95%;height:40px;padding:0 0 0 10px;font-size:14px;border:none;border-radius:5px;background-color:#fff;color:#333;position:absolute;left:40px;top:39px}.textbox-container input[type=text]::placeholder{color:#b8bcca;font-style:italic}.textbox-container input[type=text]:hover,.textbox-container input[type=text]:focus{outline:none;border:1px solid #15234b;box-shadow:0 0 5px #15234b4d}.textbox-container .remove-icon{position:relative;top:-40px;right:-17px;font-size:18px;color:#ff4d4d;cursor:pointer;transition:transform .2s,color .2s}.textbox-container .remove-icon:hover{transform:scale(1.2);color:#d11a2a}.table-container{width:100%;max-width:600px;margin:20px auto;background-color:#d9d9d9;padding:15px;height:47%;border-radius:5px;box-shadow:0 1px 3px #0000001a}.table-container label{font-size:16px;font-weight:700;color:#15234b;margin-bottom:10px;display:block;width:200px;position:relative;top:-53px;left:21px}table{width:557px;height:90%;position:relative;left:20px;top:-58px;border-collapse:collapse;margin-top:10px;text-align:left}table th{background-color:#e4881e;color:#fff;padding:10px;font-size:14px;text-transform:uppercase}table thead{height:38px}table td{background-color:#fff;color:#333;padding:10px;font-size:14px;border:1px solid #ddd}table tbody tr:nth-child(2n) td{background-color:#f9f9f9}table tbody tr:hover td{background-color:#f1f1f1;transition:background-color .2s ease-in-out}.trash-right1{width:28px;position:relative;top:-233px;left:96%;background-color:#d7bbc3;height:27px;border-radius:50px}.trash-right1 img{position:relative;left:23%;top:4px}.file-field-container,.image-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.file-field-container label,.image-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.file-field-container input[type=file],.image-container input[type=file]{width:95%;padding:10px;font-size:14px;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.file-field-container input[type=file]:hover,.file-field-container input[type=file]:focus{border-color:#007bff;box-shadow:0 0 4px #007bff80;outline:none}.file-field-container img,.image-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.file-field-container img:hover{opacity:1}.dropdown-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.dropdown-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.dropdown-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.CheckBox-options{display:flex;flex-direction:column;gap:10px;height:94px;width:45%;padding:10px;background-color:#f6f6f6;border-radius:8px;box-shadow:0 2px 4px #0000001a}.checkbox-container{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:6px;background-color:#fff;position:relative;right:-25px;width:94%}.label-text{width:93px;position:relative;left:27px}.option-label{display:flex;align-items:center;gap:10px;position:relative;top:5px;left:10px;font-size:14px;font-weight:500;color:gray;width:83px}.option-label input[type=checkbox]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.label-text{margin-left:5px}.option-value{position:relative;left:113px;top:-19px}.add-option-btn{position:absolute;top:5px;left:273px;border:none}.remove-option-btn{position:absolute;top:4px;left:310px;border:none}.delete-btn1{position:relative;top:-39px;left:18px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center}.delete-btn1 img{width:18px;height:18px}.Radio-options{display:flex;flex-direction:column;padding:10px;background-color:#f6f6f6;height:94px;width:45%;border-radius:8px;box-shadow:0 2px 4px #0000001a}.radio-container{display:flex;flex-direction:column;position:relative;top:1px;right:-26px;width:94%;height:43px;padding:10px;border-radius:6px;background-color:#fff}.radio-label{font-size:14px;color:#000;margin-bottom:8px;width:104px;height:21px;position:relative;left:31px}.radio-group{display:flex;gap:20px}.radio-item{display:flex;align-items:center}.option-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.option-label input[type=radio]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.radio-text{margin-left:5px}.delete-btn2{position:relative;top:-33px;left:374px;width:24px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease-in-out}.delete-btn2 img{width:18px;height:18px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+    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 *ngIf=\"field.type === 'CheckBox'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\">\r\n      <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n    </div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <div class=\"checkbox-container\">\r\n        <label *ngFor=\"let option of field.options\" class=\"option-label\">\r\n          <input type=\"checkbox\" [checked]=\"option.selected\" />\r\n          <span>{{ option.label }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n   <!-- Dropdown -->\r\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\">\r\n      <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n    </div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <select class=\"dropdown-options\" [(ngModel)]=\"field.selectedOption\">\r\n        <option *ngFor=\"let option of field.options\" [value]=\"option\">{{ option }}</option>\r\n      </select>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n         <!-- Calendar -->\r\n<div *ngIf=\"['Calendar'].includes(field.type)\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n         <!-- Email -->\r\n<div *ngIf=\"field.type === 'Email'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n          <!-- Numbers -->\r\n<div *ngIf=\"field.type === 'Numbers'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n          <!-- List -->\r\n    <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n         <!-- TextArea -->\r\n<div *ngIf=\"field.type === 'TextArea'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">\r\n          {{ field.questionText ? field.questionText : 'Enter your text' }}\r\n          <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\r\n        </label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <textarea\r\n        [placeholder]=\"field.question || 'Enter detailed text here...'\"\r\n        [style.height.px]=\"field.size || 100\"\r\n        [style.width.%]=\"100\"\r\n        [readonly]=\"field.readOnly\"\r\n        [class.hidden]=\"field.isHide\"\r\n        [(ngModel)]=\"field.text\">\r\n      </textarea>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Radio -->\r\n    <div *ngIf=\"field.type === 'Radio'\" class=\"Radio-options\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n      <label>{{ field.questionText }}</label>\r\n      <div *ngFor=\"let option of field.options\" class=\"radio-item\">\r\n        <label><input type=\"radio\" name=\"{{ field.questionText }}\" /><span>{{ option }}</span></label>\r\n      </div>\r\n      <button class=\"delete-btn2\" (click)=\"removeElement(field, i)\"><img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" /></button>\r\n    </div>\r\n\r\n          <!-- Image -->\r\n<div *ngIf=\"field.type === 'Image'\" class=\"image-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n<label>{{ field.questionText }}</label>\r\n<input type=\"file\" accept=\"image/*\" />\r\n<img\r\n  src=\"../assets/icons/Trash.svg\"\r\n  alt=\"Delete\"\r\n  (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n          <!-- Button -->\r\n    <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <button>{{ field.questionText }}</button>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- File -->\r\n    <div *ngIf=\"field.type === 'File'\" class=\"file-field-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"file\" />\r\n      <img class=\"trash-right\" src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n  </div>\r\n\r\n<!-- Tables -->\r\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n  <label>{{ field.questionText }}</label>\r\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n  </table>\r\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n\r\n          <!-- Book -->\r\n<div *ngIf=\"field.type === 'Book'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Label -->\r\n<div *ngIf=\"field.type === 'Label'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n</ng-container>\r\n      </div>\r\n      <!-- Form Builder Section All Elements -->\r\n      <div class=\"form-builder\">\r\n        <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n          <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n          <div class=\"hover-label\">Calendar</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n          <img src=\"../assets/icons/CheckBox.svg\">\r\n          <div class=\"hover-label\">Check Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Email')\">\r\n          <img src=\"../assets/icons/Email.svg\">\r\n          <div class=\"hover-label\">Email</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('File')\">\r\n          <img src=\"../assets/icons/File.svg\">\r\n          <div class=\"hover-label\">File</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('List')\">\r\n          <img src=\"../assets/icons/List.svg\">\r\n          <div class=\"hover-label\">List</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Tables')\">\r\n          <img src=\"../assets/icons/Table.svg\">\r\n          <div class=\"hover-label\">Tables</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Text')\">\r\n          <img src=\"../assets/icons/Text.svg\">\r\n          <div class=\"hover-label\">Text Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n          <img src=\"../assets/icons/TextArea.svg\">\r\n          <div class=\"hover-label\">Text Area</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n          <img src=\"../assets/icons/Number.svg\">\r\n          <div class=\"hover-label\">Numbers</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n          <img src=\"../assets/icons/Drop.svg\">\r\n          <div class=\"hover-label\">Dropdown</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Image')\">\r\n          <img src=\"../assets/Image.svg\">\r\n          <div class=\"hover-label\">Image</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Radio')\">\r\n          <img src=\"../assets/icons/Radio.svg\">\r\n          <div class=\"hover-label\">Radio</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Label')\">\r\n          <img src=\"../assets/icons/Label.svg\">\r\n          <div class=\"hover-label\">Label</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Book')\">\r\n          <img src=\"../assets/icons/Book.svg\">\r\n          <div class=\"hover-label\">Book</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Button')\">\r\n          <img src=\"../assets/icons/Button.svg\">\r\n          <div class=\"hover-label\">Button</div>\r\n        </div>\r\n      </div>\r\n\r\n  </div>\r\n\r\n\r\n\r\n\r\n", styles: [".center-frame{width:71%;padding:26px;box-sizing:border-box;background-color:#edf1f5}.box{box-sizing:border-box}.form-builder{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;position:sticky;bottom:91px;width:78%;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}@media (max-width: 1200px){.form-builder{width:85%}}@media (max-width: 768px){.form-builder{width:95%;gap:5px}}@media (max-width: 480px){.form-builder{flex-direction:column;gap:8px}}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:37rem;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.form-preview[cdkDropListOrientation=vertical]{flex-direction:column}.form-preview[cdkDropListOrientation=horizontal]{flex-direction:row}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.textbox-container label{flex-grow:1}.trash-right{width:28px;position:relative;background-color:#f5ebea;height:27px;border-radius:50px}.trash-right img{position:relative;left:23%;top:3px}.table-container{overflow-x:auto}.textbox-container{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin:10px auto;background-color:#f6f6f6;padding:10px 15px;border-radius:5px;box-shadow:0 1px 3px #0000001a;position:relative}.textbox-container label{font-size:14px;width:100px;color:#15234b;margin-bottom:5px;display:block;position:relative;left:27px;top:-12px}.textbox-container input[type=text]{width:95%;height:40px;padding:0 0 0 10px;font-size:14px;border:none;border-radius:5px;background-color:#fff;color:#333;position:absolute;left:40px;top:39px}.textbox-container input[type=text]::placeholder{color:#b8bcca;font-style:italic}.textbox-container input[type=text]:hover,.textbox-container input[type=text]:focus{outline:none;border:1px solid #15234b;box-shadow:0 0 5px #15234b4d}.textbox-container .remove-icon{position:relative;top:-40px;right:-17px;font-size:18px;color:#ff4d4d;cursor:pointer;transition:transform .2s,color .2s}.textbox-container .remove-icon:hover{transform:scale(1.2);color:#d11a2a}.table-container{width:100%;max-width:600px;margin:20px auto;background-color:#d9d9d9;padding:15px;height:47%;border-radius:5px;box-shadow:0 1px 3px #0000001a}.table-container label{font-size:16px;font-weight:700;color:#15234b;margin-bottom:10px;display:block;width:200px;position:relative;top:-53px;left:21px}table{width:557px;height:90%;position:relative;left:20px;top:-58px;border-collapse:collapse;margin-top:10px;text-align:left}table th{background-color:#e4881e;color:#fff;padding:10px;font-size:14px;text-transform:uppercase}table thead{height:38px}table td{background-color:#fff;color:#333;padding:10px;font-size:14px;border:1px solid #ddd}table tbody tr:nth-child(2n) td{background-color:#f9f9f9}table tbody tr:hover td{background-color:#f1f1f1;transition:background-color .2s ease-in-out}.trash-right1{width:28px;position:relative;top:-233px;left:96%;background-color:#d7bbc3;height:27px;border-radius:50px}.trash-right1 img{position:relative;left:23%;top:4px}.file-field-container,.image-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.file-field-container label,.image-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.file-field-container input[type=file],.image-container input[type=file]{width:95%;padding:10px;font-size:14px;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.file-field-container input[type=file]:hover,.file-field-container input[type=file]:focus{border-color:#007bff;box-shadow:0 0 4px #007bff80;outline:none}.file-field-container img,.image-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.file-field-container img:hover{opacity:1}.dropdown-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.dropdown-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.dropdown-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.CheckBox-options{display:flex;flex-direction:column;gap:10px;height:94px;width:45%;padding:10px;background-color:#f6f6f6;border-radius:8px;box-shadow:0 2px 4px #0000001a}.checkbox-container{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:6px;background-color:#fff;position:relative;right:-25px;width:94%}.label-text{width:93px;position:relative;left:27px}.option-label{display:flex;align-items:center;gap:10px;position:relative;top:5px;left:10px;font-size:14px;font-weight:500;color:gray;width:83px}.option-label input[type=checkbox]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.label-text{margin-left:5px}.option-value{position:relative;left:113px;top:-19px}.add-option-btn{position:absolute;top:5px;left:273px;border:none}.remove-option-btn{position:absolute;top:4px;left:310px;border:none}.delete-btn1{position:relative;top:-39px;left:18px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center}.delete-btn1 img{width:18px;height:18px}.Radio-options{display:flex;flex-direction:column;padding:10px;background-color:#f6f6f6;height:94px;width:45%;border-radius:8px;box-shadow:0 2px 4px #0000001a}.radio-container{display:flex;flex-direction:column;position:relative;top:1px;right:-26px;width:94%;height:43px;padding:10px;border-radius:6px;background-color:#fff}.radio-label{font-size:14px;color:#000;margin-bottom:8px;width:104px;height:21px;position:relative;left:31px}.radio-group{display:flex;gap:20px}.radio-item{display:flex;align-items:center}.option-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.option-label input[type=radio]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.radio-text{margin-left:5px}.delete-btn2{position:relative;top:-33px;left:374px;width:24px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease-in-out}.delete-btn2 img{width:18px;height:18px}\n"] }]
+            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: [{
@@ -10536,12 +10553,11 @@ class PropertiesComponent {
     // selectedElement: any;
     colorWheel;
     ctx;
+    formButtonHandler = new EventEmitter();
     selectedOption = '';
     selectedElementIndex = -1;
     // @Input() selectedElement: any;
     selectedElementType = '';
-    api = '';
-    apiMethod = 'POST';
     selectedAlign = 'align-left'; // Add this property
     selectedStyles = []; // Using array since multiple styles can be selected
     errorMessage = '';
@@ -10964,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: '' });
     }
@@ -10985,29 +10990,22 @@ class PropertiesComponent {
     download() {
         console.log('Question Book:', this.formBuilderService.downloadElement());
     }
-    save() {
-        // const apiURL = 'https://dev-api.rangerfusion.com/nxt/';
-        this.http.request(this.apiMethod, this.api, { body: this.formBuilderService.downloadElement }).subscribe((response) => {
-            console.log('Response:', response);
-        }, (error) => {
-            console.error('Error:', error);
-        });
+    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", api: "api", apiMethod: "apiMethod" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["colorWheel"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n<div class=\"container\">\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n  <div class=\"properties\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n  <h1 class=\"header-title\">Element Properties</h1>\r\n  <div class=\"menu-container\">\r\n    <div class=\"menu-item\" (click)=\"download()\">\r\n      <span >Download</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Start</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Path</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Clone</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n  <!-- Element Properties -->\r\n  <details class=\"first-properties\" open>\r\n    <summary class=\"text-sm \">Elements Properties</summary>\r\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n        <div class=\"flex-items-center\">\r\n          <label class=\"text-sm\">{{ prop.label }}</label>\r\n          <div class=\"label-properties\">\r\n            <!-- Text Input -->\r\n            <input *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            [value]=\"selectedElement[prop.key]\"\r\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n            [class.read-only]=\"selectedElement.readOnly\"\r\n            [readonly]=\"selectedElement.readOnly\"\r\n            class=\"text-sm1 \"\r\n          />\r\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n              {{ selectedElement.helpText }}\r\n            </div>\r\n\r\n\r\n         <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n    class=\"font-selection1\"\r\n    [value]=\"selectedElement?.font\"\r\n    (change)=\"updateProperty('font', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n      {{ option }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n    class=\"font-weight1 \"\r\n    [value]=\"selectedElement?.fontWeight\"\r\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n      {{ option.label }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n            <!-- Number Input with Unit -->\r\n            <div *ngIf=\"prop.type === 'number'\" class=\"size-controls\">\r\n              <div class=\"size-input-group\">\r\n                  <input\r\n                  type=\"number\"\r\n                  [value]=\"selectedElement[prop.key]\"\r\n                  (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n                  [min]=\"prop.min || 1\"\r\n                  [max]=\"prop.max || 999999\"\r\n                  class=\"size-value\"\r\n                />\r\n                <span class=\"size-unit\">{{ prop.unit }}</span>\r\n              </div>\r\n            </div>\r\n\r\n           <!-- Toggle Group -->\r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n  <span class=\"toggle-label\">Read Only</span>\r\n  <label class=\"switch\">\r\n    <input  type=\"checkbox\"/>\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n  <span class=\"toggle-label\">Is Hide</span>\r\n  <label class=\"switch\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"selectedElement?.isHide\"\r\n      (change)=\"onToggleChange('isHide', $event)\"\r\n    />\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n</div>\r\n\r\n            <!-- Text Align Buttons -->\r\n            <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onAlignSelect(option.value)\"\r\n                [class.active]=\"selectedElement?.textAlign === option.value\"\r\n                class=\"align-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n              <label>{{ prop.label }}</label>\r\n              <input\r\n                type=\"number\"\r\n                [value]=\"selectedElement[prop.key]\"\r\n                (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n                class=\"size-input\"\r\n              />\r\n              <span class=\"size-unit\">{{ prop.unit }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onStyleSelect(option.value)\"\r\n                [class.active]=\"isStyleActive(option.value)\"\r\n                class=\"style-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n  <div class=\"size-group\">\r\n    <label  class=\"size-label\">Width</label>\r\n    <div class=\"value-container\">\r\n    <input\r\n      type=\"number\"\r\n      [value]=\"selectedElement?.width\"\r\n      (input)=\"updateProperty('width', $event.target.value)\"\r\n      class=\"size-input\"\r\n\r\n    />\r\n    <span class=\"unit\">PX</span>\r\n  </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n    <div class=\"size-group\">\r\n      <label class=\"size-label\">Height</label>\r\n      <div class=\"value-container\">\r\n        <input\r\n          type=\"number\"\r\n          [value]=\"selectedElement?.height\"\r\n          (input)=\"updateProperty('height', $event.target.value)\"\r\n          class=\"size-input\"\r\n        />\r\n        <span class=\"unit\">PX</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </details>\r\n\r\n  <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n      <div class=\"flex-items-center \">\r\n        <label class=\"text-sm\">{{ prop.label }}</label>\r\n        <div class=\"input-box-field\">\r\n          <!-- Input Box -->\r\n          <input\r\n            *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            class=\"field-input\"\r\n          />\r\n          <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n      <div class=\"sizes\">\r\n          <div class=\"flex-gap\">\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"selectedElement.required\"\r\n      (change)=\"onRequiredChange(true)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-label\"\r\n      >\r\n        Required\r\n      </label>\r\n    </div>\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"!selectedElement.required\"\r\n      (change)=\"onRequiredChange(false)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-sm text-gray-400\"\r\n      >\r\n        Not Required\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n  <div\r\n    *ngFor=\"let option of prop.options; let i = index\"\r\n    class=\"option-items\"\r\n  >\r\n    <!-- Option Input -->\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].label\"\r\n      placeholder=\"Option {{ i + 1 }}\"\r\n      class=\"options\"\r\n    />\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].value\"\r\n      placeholder=\"Value\"\r\n      class=\"values\"\r\n    />\r\n    <!-- Remove Button -->\r\n    <div class=\"remove\">\r\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n  </div>\r\n  <!-- Add Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"add-btn\"\r\n    (click)=\"addOption(prop.options)\"\r\n  >\r\n  <div class=\"add-varient\">\r\n    <span class=\"text-lg\">+</span>\r\n    <span>Add Variants</span></div>\r\n  </button>\r\n</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"design-footer\">\r\n    <button class=\"btn\">Cancel</button>\r\n    <button class=\"btn\" (click)=\"save()\">Save</button>\r\n  </div>\r\n</details>\r\n</div>\r\n</div>\r\n</div>\r\n", styles: [".container{position:absolute;right:0;top:0;width:25%}.all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    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  <div class=\"properties\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n  <h1 class=\"header-title\">Element Properties</h1>\r\n  <div class=\"menu-container\">\r\n    <div class=\"menu-item\" (click)=\"download()\">\r\n      <span >Download</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Start</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Path</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Clone</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n  <!-- Element Properties -->\r\n  <details class=\"first-properties\" open>\r\n    <summary class=\"text-sm \">Elements Properties</summary>\r\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n        <div class=\"flex-items-center\">\r\n          <label class=\"text-sm\">{{ prop.label }}</label>\r\n          <div class=\"label-properties\">\r\n            <!-- Text Input -->\r\n            <input *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            [value]=\"selectedElement[prop.key]\"\r\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n            [class.read-only]=\"selectedElement.readOnly\"\r\n            [readonly]=\"selectedElement.readOnly\"\r\n            class=\"text-sm1 \"\r\n          />\r\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n              {{ selectedElement.helpText }}\r\n            </div>\r\n\r\n\r\n         <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n    class=\"font-selection1\"\r\n    [value]=\"selectedElement?.font\"\r\n    (change)=\"updateProperty('font', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n      {{ option }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n    class=\"font-weight1 \"\r\n    [value]=\"selectedElement?.fontWeight\"\r\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n      {{ option.label }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n            <!-- Number Input with Unit -->\r\n            <div *ngIf=\"prop.type === 'number'\" class=\"size-controls\">\r\n              <div class=\"size-input-group\">\r\n                  <input\r\n                  type=\"number\"\r\n                  [value]=\"selectedElement[prop.key]\"\r\n                  (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n                  [min]=\"prop.min || 1\"\r\n                  [max]=\"prop.max || 999999\"\r\n                  class=\"size-value\"\r\n                />\r\n                <span class=\"size-unit\">{{ prop.unit }}</span>\r\n              </div>\r\n            </div>\r\n\r\n           <!-- Toggle Group -->\r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n  <span class=\"toggle-label\">Read Only</span>\r\n  <label class=\"switch\">\r\n    <input  type=\"checkbox\"/>\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n  <span class=\"toggle-label\">Is Hide</span>\r\n  <label class=\"switch\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"selectedElement?.isHide\"\r\n      (change)=\"onToggleChange('isHide', $event)\"\r\n    />\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n</div>\r\n\r\n            <!-- Text Align Buttons -->\r\n            <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onAlignSelect(option.value)\"\r\n                [class.active]=\"selectedElement?.textAlign === option.value\"\r\n                class=\"align-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n              <label>{{ prop.label }}</label>\r\n              <input\r\n                type=\"number\"\r\n                [value]=\"selectedElement[prop.key]\"\r\n                (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n                class=\"size-input\"\r\n              />\r\n              <span class=\"size-unit\">{{ prop.unit }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onStyleSelect(option.value)\"\r\n                [class.active]=\"isStyleActive(option.value)\"\r\n                class=\"style-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n  <div class=\"size-group\">\r\n    <label  class=\"size-label\">Width</label>\r\n    <div class=\"value-container\">\r\n    <input\r\n      type=\"number\"\r\n      [value]=\"selectedElement?.width\"\r\n      (input)=\"updateProperty('width', $event.target.value)\"\r\n      class=\"size-input\"\r\n\r\n    />\r\n    <span class=\"unit\">PX</span>\r\n  </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n    <div class=\"size-group\">\r\n      <label class=\"size-label\">Height</label>\r\n      <div class=\"value-container\">\r\n        <input\r\n          type=\"number\"\r\n          [value]=\"selectedElement?.height\"\r\n          (input)=\"updateProperty('height', $event.target.value)\"\r\n          class=\"size-input\"\r\n        />\r\n        <span class=\"unit\">PX</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </details>\r\n\r\n  <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n      <div class=\"flex-items-center \">\r\n        <label class=\"text-sm\">{{ prop.label }}</label>\r\n        <div class=\"input-box-field\">\r\n          <!-- Input Box -->\r\n          <input\r\n            *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            class=\"field-input\"\r\n          />\r\n          <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n      <div class=\"sizes\">\r\n          <div class=\"flex-gap\">\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"selectedElement.required\"\r\n      (change)=\"onRequiredChange(true)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-label\"\r\n      >\r\n        Required\r\n      </label>\r\n    </div>\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"!selectedElement.required\"\r\n      (change)=\"onRequiredChange(false)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-sm text-gray-400\"\r\n      >\r\n        Not Required\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n  <div\r\n    *ngFor=\"let option of prop.options; let i = index\"\r\n    class=\"option-items\"\r\n  >\r\n    <!-- Option Input -->\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].label\"\r\n      placeholder=\"Option {{ i + 1 }}\"\r\n      class=\"options\"\r\n    />\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].value\"\r\n      placeholder=\"Value\"\r\n      class=\"values\"\r\n    />\r\n    <!-- Remove Button -->\r\n    <div class=\"remove\">\r\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n  </div>\r\n  <!-- Add Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"add-btn\"\r\n    (click)=\"addOption(prop.options)\"\r\n  >\r\n  <div class=\"add-varient\">\r\n    <span class=\"text-lg\">+</span>\r\n    <span>Add Variants</span></div>\r\n  </button>\r\n</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"design-footer\">\r\n    <button class=\"btn\">Cancel</button>\r\n    <button class=\"btn\" (click)=\"save()\">Save</button>\r\n  </div>\r\n</details>\r\n</div>\r\n</div>\r\n</div>\r\n", styles: [".container{position:absolute;right:0;top:0;width:25%}.all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"] }]
+            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
-            }], api: [{
-                type: Input
-            }], apiMethod: [{
-                type: Input
             }] } });
 
 // AP 22JAN25