@rangertechnologies/ngnxt 2.1.143 → 2.1.144
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/environments/version.mjs +2 -2
- package/esm2022/lib/components/custom-input/custom-input.component.mjs +3 -3
- package/esm2022/lib/pages/builder/element/element.component.mjs +12 -24
- package/esm2022/lib/pages/questionbook/questionbook.component.mjs +3 -3
- package/fesm2022/rangertechnologies-ngnxt.mjs +782 -792
- package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
- package/lib/components/custom-input/custom-input.component.d.ts +1 -2
- package/lib/pages/builder/element/element.component.d.ts +0 -2
- package/package.json +1 -1
- package/rangertechnologies-ngnxt-2.1.144.tgz +0 -0
- package/src/lib/style.css +4 -4
- package/rangertechnologies-ngnxt-2.1.143.tgz +0 -0
|
@@ -6989,11 +6989,11 @@ class CustomInputComponent {
|
|
|
6989
6989
|
this.inputValue.emit(input.target.value);
|
|
6990
6990
|
}
|
|
6991
6991
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomInputComponent, deps: [{ token: ChangeService }, { token: I18nService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6992
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomInputComponent, selector: "app-custom-input", inputs: { value: "value", question: "question", disabled: "disabled", placeholder: "placeholder", error: "error", fromShengel: "fromShengel", readOnly: "readOnly", ngClassValue: "ngClassValue", idValue: "idValue", focusEvent: "focusEvent" }, outputs: { inputValue: "inputValue" }, ngImport: i0, template: " <!-- HA 19DEC23 Included Style value from Salesforce -->\n <!-- HA 18-JAN-24 Added these classes for style, HA 31-JAN-24 Added ternary for style -->\n <!-- HA 02FEB24 question input will hold the value to display -->\n <!-- // VD 12Jun24 - readonly change-->\n <!-- RS 09DEC24 Changed keys--> \n <input *ngIf=\"!fromShengel\" type=\"text\" \n [(ngModel)]=\"question.input\" \n [ngClass]=\"ngClassValue\"\n class=\"she-line-input form-control\"\n [id]=\"idValue\"\n (focus)=\"focusEvent\"\n [readOnly]=\"readOnly\"\n [style.border-color]=\"error ? 'red !important' : ''\"\n [style]=\"question?.style?.inputStyle\"\n [placeholder]=\"placeholder ? placeholder : ''\"\n (input)=\"onInputChange($event)\" />\n\n<input *ngIf=\"fromShengel\" \n [(ngModel)]=\"question.input\"\n type=\"text\" \n [readOnly]=\"readOnly\"\n class=\"she-line-input form-control\" \n [placeholder]=\"placeholder ? placeholder : '' \"\n [disabled]=\"disabled\"\n [style]=\"question?.style?.inputStyle\"\n (input)=\"onInputChange($event)\" />\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{question?.errorMessage}}*</span>\n", styles: [".form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
|
|
6992
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomInputComponent, selector: "app-custom-input", inputs: { value: "value", question: "question", disabled: "disabled", placeholder: "placeholder", error: "error", fromShengel: "fromShengel", readOnly: "readOnly", ngClassValue: "ngClassValue", idValue: "idValue", focusEvent: "focusEvent" }, outputs: { inputValue: "inputValue" }, ngImport: i0, template: " <!-- HA 19DEC23 Included Style value from Salesforce -->\n <!-- HA 18-JAN-24 Added these classes for style, HA 31-JAN-24 Added ternary for style -->\n <!-- HA 02FEB24 question input will hold the value to display -->\n <!-- // VD 12Jun24 - readonly change-->\n <!-- RS 09DEC24 Changed keys--> \n <input *ngIf=\"!fromShengel\" type=\"text\" \n [(ngModel)]=\"question.input\" \n [ngClass]=\"ngClassValue\"\n class=\"she-line-input form-control\"\n [id]=\"idValue\"\n (focus)=\"focusEvent\"\n [readOnly]=\"readOnly\"\n [style.border-color]=\"error ? 'red !important' : ''\"\n [style]=\"question?.style?.inputStyle\"\n [placeholder]=\"placeholder ? placeholder : ''\"\n [ngStyle]=\"{\n '--placeholder-font': question.font,\n '--placeholder-color': question.fontColor,\n '--placeholder-size': question.fontSize,\n '--placeholder-weight': question.fontWeight\n }\"\n (input)=\"onInputChange($event)\" />\n\n<input *ngIf=\"fromShengel\" \n [(ngModel)]=\"question.input\"\n type=\"text\" \n [readOnly]=\"readOnly\"\n class=\"she-line-input form-control\" \n [placeholder]=\"placeholder ? placeholder : '' \"\n [ngStyle]=\"{\n '--placeholder-font': question.font,\n '--placeholder-color': question.fontColor,\n '--placeholder-size': question.fontSize,\n '--placeholder-weight': question.fontWeight\n }\"\n [disabled]=\"disabled\"\n [style]=\"question?.style?.inputStyle\"\n (input)=\"onInputChange($event)\" />\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{question?.errorMessage}}*</span>\n", styles: [".form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}input::placeholder{font-family:var(--placeholder-font);color:var(--placeholder-color);font-size:var(--placeholder-size);font-weight:var(--placeholder-weight)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }] });
|
|
6993
6993
|
}
|
|
6994
6994
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomInputComponent, decorators: [{
|
|
6995
6995
|
type: Component,
|
|
6996
|
-
args: [{ selector: 'app-custom-input', template: " <!-- HA 19DEC23 Included Style value from Salesforce -->\n <!-- HA 18-JAN-24 Added these classes for style, HA 31-JAN-24 Added ternary for style -->\n <!-- HA 02FEB24 question input will hold the value to display -->\n <!-- // VD 12Jun24 - readonly change-->\n <!-- RS 09DEC24 Changed keys--> \n <input *ngIf=\"!fromShengel\" type=\"text\" \n [(ngModel)]=\"question.input\" \n [ngClass]=\"ngClassValue\"\n class=\"she-line-input form-control\"\n [id]=\"idValue\"\n (focus)=\"focusEvent\"\n [readOnly]=\"readOnly\"\n [style.border-color]=\"error ? 'red !important' : ''\"\n [style]=\"question?.style?.inputStyle\"\n [placeholder]=\"placeholder ? placeholder : ''\"\n (input)=\"onInputChange($event)\" />\n\n<input *ngIf=\"fromShengel\" \n [(ngModel)]=\"question.input\"\n type=\"text\" \n [readOnly]=\"readOnly\"\n class=\"she-line-input form-control\" \n [placeholder]=\"placeholder ? placeholder : '' \"\n [disabled]=\"disabled\"\n [style]=\"question?.style?.inputStyle\"\n (input)=\"onInputChange($event)\" />\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{question?.errorMessage}}*</span>\n", styles: [".form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"] }]
|
|
6996
|
+
args: [{ selector: 'app-custom-input', template: " <!-- HA 19DEC23 Included Style value from Salesforce -->\n <!-- HA 18-JAN-24 Added these classes for style, HA 31-JAN-24 Added ternary for style -->\n <!-- HA 02FEB24 question input will hold the value to display -->\n <!-- // VD 12Jun24 - readonly change-->\n <!-- RS 09DEC24 Changed keys--> \n <input *ngIf=\"!fromShengel\" type=\"text\" \n [(ngModel)]=\"question.input\" \n [ngClass]=\"ngClassValue\"\n class=\"she-line-input form-control\"\n [id]=\"idValue\"\n (focus)=\"focusEvent\"\n [readOnly]=\"readOnly\"\n [style.border-color]=\"error ? 'red !important' : ''\"\n [style]=\"question?.style?.inputStyle\"\n [placeholder]=\"placeholder ? placeholder : ''\"\n [ngStyle]=\"{\n '--placeholder-font': question.font,\n '--placeholder-color': question.fontColor,\n '--placeholder-size': question.fontSize,\n '--placeholder-weight': question.fontWeight\n }\"\n (input)=\"onInputChange($event)\" />\n\n<input *ngIf=\"fromShengel\" \n [(ngModel)]=\"question.input\"\n type=\"text\" \n [readOnly]=\"readOnly\"\n class=\"she-line-input form-control\" \n [placeholder]=\"placeholder ? placeholder : '' \"\n [ngStyle]=\"{\n '--placeholder-font': question.font,\n '--placeholder-color': question.fontColor,\n '--placeholder-size': question.fontSize,\n '--placeholder-weight': question.fontWeight\n }\"\n [disabled]=\"disabled\"\n [style]=\"question?.style?.inputStyle\"\n (input)=\"onInputChange($event)\" />\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{question?.errorMessage}}*</span>\n", styles: [".form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}input::placeholder{font-family:var(--placeholder-font);color:var(--placeholder-color);font-size:var(--placeholder-size);font-weight:var(--placeholder-weight)}\n"] }]
|
|
6997
6997
|
}], ctorParameters: () => [{ type: ChangeService }, { type: I18nService }, { type: DataService }], propDecorators: { value: [{
|
|
6998
6998
|
type: Input
|
|
6999
6999
|
}], question: [{
|
|
@@ -13513,11 +13513,11 @@ class QuestionbookComponent {
|
|
|
13513
13513
|
return questions;
|
|
13514
13514
|
}
|
|
13515
13515
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionbookComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: StorageService }, { token: I18nService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
13516
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QuestionbookComponent, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", translatedQuestions: "translatedQuestions", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", dropDownData: "dropDownData" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, providers: [ChangeService], ngImport: i0, template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23 Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24 Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n <div class=\"form-row\">\n <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n <!-- RA09DEC24 Changed keys-->\n <div [class]=\"'col-lg-' + ques.size + ' paddingnone'\" *ngFor=\"let ques of questions;let i = index\"\n [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\n <!-- Sub Question Label -->\n <!-- HA 20DEC23 Label Style from salesforce -->\n <!-- VD 09May24 is hide field change-->\n <div *ngIf=\"!ques.isHidden\" class=\"nxtInputContainer\">\n <div *ngIf=\"ques.type === 'DateTime'\">\n\n </div>\n <!-- VD 20JUN24 - help text changes-->\n <!-- VD 01Aug24 - validation change-->\n <!-- // VD 02Aug24 - label value style-->\n <!-- AP-28MAR25 Show label if enabled and not a Boolean type -->\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n *ngIf=\"ques.style?.showLabel ? (ques.style?.showLabel && ques.type !== 'Boolean'): (ques.style?.showLabel !== false && ques.type !== 'Boolean')\"\n [style]=\"ques.style?.labelStyle\">\n <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{\n removeCharacters(ques?.questionText) }}\n <div *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\n <!-- SKS13MAR25 only show on file type -->\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips help text -->\n <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips for file requirements -->\n <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n style=\"margin-left: 4px;\">i</div>\n </span>\n </div>\n <!-- // VD 12Jun24 - readonly change-->\n <!-- DateTime -->\n <div *ngIf=\"ques.type === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\"\n [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\"\n (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date-picker>\n </div>\n\n <!-- Date-->\n <div *ngIf=\"ques.type === 'Date'\">\n <app-custom-date [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\"\n [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date>\n </div>\n\n <!-- Time-->\n <div *ngIf=\"ques.type === 'Time'\">\n <app-custom-time [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\"\n [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\n </app-custom-time>\n </div>\n <!-- calendar -->\n <div *ngIf=\"ques.type === 'Calendar'\">\n <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <!-- model used in calendar component -->\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model>\n </div>\n <!-- Text -->\n <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\">\n <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\n textBox: !qbItem.progressBar\n }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\"\n [focusEvent]=\"clearSQError(ques.id)\" [error]=\"ques.error\" [placeholder]=\"ques.question\"\n (inputValue)=\"childEventCapture($event, ques)\">\n </app-custom-input>\n </div>\n\n <!-- for pick location -->\n <!-- VD 21DEC23 - dependent field change -->\n <div *ngIf=\"ques.type === 'Location'\">\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n </div>\n\n <!-- for text area -->\n <!-- AP-02APR25 - default placeholder empty string -->\n <div *ngIf=\"ques.type === 'TextArea'\">\n <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\"\n [error]=\"ques.error\" [placeholder]=\"ques.question || ''\"\n (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n </div>\n <!-- RS 06JAN25 -->\n <!-- for rich text editor -->\n <div *ngIf=\"ques.type === 'RichTextArea'\">\n <app-custom-rich-text [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input || ''\"\n [error]=\"ques.error\" [placeholder]=\"ques.question\"\n (textValueChange)=\"childEventCapture($event, ques)\">\n </app-custom-rich-text>\n </div>\n\n <!-- SKS25MAR25 Image -->\n <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img *ngIf=\"ques.isReadOnly\" [src]=\"ques.imageData\" />\n <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"ques.input\">\n <img [src]=\"ques.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!ques.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(ques, $event)\" style=\"display: none;\" />\n </div>\n </div>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.type === 'Email'\">\n <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" class=\"she-line-input form-control\"\n [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\" style.border-color=\"{{ ques.error ? 'red' : '' }}\"\n placeholder=\"{{ ques.question }}\" />\n </div>\n\n <!--AP-24MAR25 Number -->\n <!-- AP-02APR25 - default placeholder empty string -->\n <div *ngIf=\"ques.type === 'Number'\">\n <input type=\"number\" [attr.readonly]=\"ques.isReadOnly ? true : null\"[value]=\"ques.input\" class=\"she-line-input form-control\"\n [id]=\"ques.id\" required (focus)=\"clearSQError(ques.id)\" [style.borderColor]=\"ques.error ? 'red' : ''\"\n [placeholder]=\"ques.question || ''\" (input)=\"childEventCapture($event.target.value, ques)\" />\n </div> \n \n <!-- AP-28MAR25 Boolean -->\n <div *ngIf=\"ques.type === 'Boolean'\" class=\"boolean-question\">\n <div>{{ ques.questionText }}</div>\n <input type=\"checkbox\" [attr.disabled]=\"ques.isReadOnly ? true : null\" [checked]=\"ques.input\"\n [id]=\"ques.id\" required (focus)=\"clearSQError(ques.id)\"\n [style.borderColor]=\"ques.error ? 'red' : ''\"\n (change)=\"childEventCapture($event.target.checked, ques)\" /> \n </div> \n\n <!-- SKS21MAR25 line -->\n <div *ngIf=\"ques.type === 'Line'\">\n <hr class=\"custom-line\" style=\"display: inline-flex\" />\n </div>\n <!-- Table -->\n <!-- RS 03FEB2025 -->\n <!-- Added handleTableSave to handle table data persistence, enabling saving table contents to local storage when save button is clicked -->\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n <!-- <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-table> -->\n <!-- SKS13MAR25 data table change -->\n <nxt-datatable isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"formBuilder\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\" [tableConfig]=\"ques.tableConfig\"\n tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n </nxt-datatable>\n </div>\n\n <!-- Table Appendix -->\n <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\n <app-table-appendix [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-table-appendix>\n </div>\n <!-- list -->\n <!-- VD 20Aug24 used correct attribute -->\n <!-- AP-02APR25 - default placeholder empty string -->\n <!-- AP-16APR25 Format the input value before binding it to filterName -->\n <div *ngIf=\"ques.type === 'List'\" class=\"\">\n <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" [filterName]=\"ques.input\" \n (searchValueChange)=\"childEventCapture($event, ques)\">\n </lib-search-box>\n </div>\n\n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\n <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n <!-- AP 10FEB25 - Dynamically binding selectedValue based on isShengel condition -->\n <app-custom-dropdown [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-dropdown>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n </div>\n <!-- // VD 02Aug24 custom-radio component -->\n <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n <app-custom-radio [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-radio>\n </div>\n\n <!-- Attachment / Files -->\n <div *ngIf=\"ques.type === 'File'\" class=\"\">\n <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n [allFiles]=\"ques.input\" [tableFile]=\"false\" (selectedFileData)=\"childEventCapture($event, ques)\"\n (deletedFileData)=\"deleteFile($event)\" [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n </div>\n <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\n <app-dependent-table [alertMessage]=\"ques.errorMessage\">\n </app-dependent-table>\n </div>\n <div *ngIf=\"ques.type === 'Label'\" class=\"\">\n <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n </app-custom-label>\n </div>\n <!-- // VD 02Aug24 image component -->\n <!-- <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n <app-custom-image [question]=\"ques\">\n </app-custom-image>\n </div> -->\n <!-- 08NOV23 - button type question added -->\n <!-- Button -->\n <div *ngIf=\"ques.type === 'Button'\" class=\"\">\n <app-custom-button [height]=\"'50px'\" [width]=\"'150px'\" [buttonText]=\"ques?.question\"\n [value]=\"ques?.question\" (buttonValue)=\"childEventCapture($event, ques)\">\n </app-custom-button>\n </div>\n <!-- HA 20DEC23 This is to load book type questions-->\n <div *ngIf=\"ques.type === 'Book'\">\n <!-- HA 09FEB24 Added ternary operator -->\n <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n [questions]=\"readQuestions(ques.qbReference, ques.qbReferenceQuestions)\"\n (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'Image'\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- 06-09-24 for calendar type-->\n<!-- <ng-template dynamicComponentHost></ng-template> -->", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}.nxtInputContainer div{padding-left:5px;padding-right:5px}.custom-line{width:100%;border:1px solid #000}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}input[type=checkbox]{width:21px}.boolean-question{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:12px}.form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"], dependencies: [{ kind: "component", type: CustomRichTextComponent, selector: "app-custom-rich-text", inputs: ["value", "placeholder", "error", "question", "rows", "readOnly", "minLength", "maxLength"], outputs: ["textValueChange"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "NxtTableEmit"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "error", "errorMessage", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "filterName"], outputs: ["searchValueChange"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question", "error"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: DependentTableComponent, selector: "app-dependent-table", inputs: ["alertMessage"] }, { kind: "component", type: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue", "labelStyle"] }, { kind: "component", type: TableAppendixComponent, selector: "app-table-appendix", inputs: ["question"], outputs: ["valueChange"] }, { kind: "component", type: CustomDateComponent, selector: "app-custom-date", inputs: ["date", "readOnly", "error", "errorMessage"], outputs: ["dateChange"] }, { kind: "component", type: CustomTimeComponent, selector: "app-custom-time", inputs: ["time", "readOnly", "error", "errorMessage"], outputs: ["timeChange"] }, { kind: "component", type: CustomButtonComponent, selector: "app-custom-button", inputs: ["height", "width", "textColor", "buttonText", "value", "backgroundColor"], outputs: ["buttonValue"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
|
|
13516
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QuestionbookComponent, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", translatedQuestions: "translatedQuestions", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", dropDownData: "dropDownData" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, providers: [ChangeService], ngImport: i0, template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23 Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24 Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n <div class=\"form-row\">\n <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n <!-- RA09DEC24 Changed keys-->\n <div [class]=\"'col-lg-' + ques.size + ' paddingnone'\" *ngFor=\"let ques of questions;let i = index\"\n [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\n <!-- Sub Question Label -->\n <!-- HA 20DEC23 Label Style from salesforce -->\n <!-- VD 09May24 is hide field change-->\n <div *ngIf=\"!ques.isHidden\" class=\"nxtInputContainer\">\n <div *ngIf=\"ques.type === 'DateTime'\">\n\n </div>\n <!-- VD 20JUN24 - help text changes-->\n <!-- VD 01Aug24 - validation change-->\n <!-- // VD 02Aug24 - label value style-->\n <!-- AP-28MAR25 Show label if enabled and not a Boolean type -->\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n *ngIf=\"ques.style?.showLabel ? (ques.style?.showLabel && ques.type !== 'Boolean'): (ques.style?.showLabel !== false && ques.type !== 'Boolean')\"\n [style]=\"ques.style?.labelStyle\">\n <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\"\n [ngStyle]=\"{\n 'font-family': ques.font,\n 'color': ques.fontColor,\n 'font-size': ques.fontSize,\n 'font-weight': ques.fontWeight\n }\">{{\n removeCharacters(ques?.questionText) }}\n <div *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\n <!-- SKS13MAR25 only show on file type -->\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips help text -->\n <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips for file requirements -->\n <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n style=\"margin-left: 4px;\">i</div>\n </span>\n </div>\n <!-- // VD 12Jun24 - readonly change-->\n <!-- DateTime -->\n <div *ngIf=\"ques.type === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\"\n [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\"\n (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date-picker>\n </div>\n\n <!-- Date-->\n <div *ngIf=\"ques.type === 'Date'\">\n <app-custom-date [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\"\n [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date>\n </div>\n\n <!-- Time-->\n <div *ngIf=\"ques.type === 'Time'\">\n <app-custom-time [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\"\n [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\n </app-custom-time>\n </div>\n <!-- calendar -->\n <div *ngIf=\"ques.type === 'Calendar'\">\n <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <!-- model used in calendar component -->\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model>\n </div>\n <!-- Text -->\n <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\">\n <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\n textBox: !qbItem.progressBar\n }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\"\n [focusEvent]=\"clearSQError(ques.id)\" [error]=\"ques.error\" [placeholder]=\"ques.question\"\n (inputValue)=\"childEventCapture($event, ques)\">\n </app-custom-input>\n </div>\n\n <!-- for pick location -->\n <!-- VD 21DEC23 - dependent field change -->\n <div *ngIf=\"ques.type === 'Location'\">\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n </div>\n\n <!-- for text area -->\n <!-- AP-02APR25 - default placeholder empty string -->\n <div *ngIf=\"ques.type === 'TextArea'\">\n <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\"\n [error]=\"ques.error\" [placeholder]=\"ques.question || ''\"\n (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n </div>\n <!-- RS 06JAN25 -->\n <!-- for rich text editor -->\n <div *ngIf=\"ques.type === 'RichTextArea'\">\n <app-custom-rich-text [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input || ''\"\n [error]=\"ques.error\" [placeholder]=\"ques.question\"\n (textValueChange)=\"childEventCapture($event, ques)\">\n </app-custom-rich-text>\n </div>\n\n <!-- SKS25MAR25 Image -->\n <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img *ngIf=\"ques.isReadOnly\" [src]=\"ques.imageData\" />\n <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"ques.input\">\n <img [src]=\"ques.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!ques.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(ques, $event)\" style=\"display: none;\" />\n </div>\n </div>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.type === 'Email'\">\n <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" class=\"she-line-input form-control\"\n [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\" style.border-color=\"{{ ques.error ? 'red' : '' }}\"\n placeholder=\"{{ ques.question }}\" />\n </div>\n\n <!--AP-24MAR25 Number -->\n <!-- AP-02APR25 - default placeholder empty string -->\n <div *ngIf=\"ques.type === 'Number'\">\n <input type=\"number\" [attr.readonly]=\"ques.isReadOnly ? true : null\"[value]=\"ques.input\" class=\"she-line-input form-control\"\n [id]=\"ques.id\" required (focus)=\"clearSQError(ques.id)\" [style.borderColor]=\"ques.error ? 'red' : ''\"\n [placeholder]=\"ques.question || ''\" (input)=\"childEventCapture($event.target.value, ques)\" />\n </div> \n \n <!-- AP-28MAR25 Boolean -->\n <div *ngIf=\"ques.type === 'Boolean'\" class=\"boolean-question\">\n <div>{{ ques.questionText }}</div>\n <input type=\"checkbox\" [attr.disabled]=\"ques.isReadOnly ? true : null\" [checked]=\"ques.input\"\n [id]=\"ques.id\" required (focus)=\"clearSQError(ques.id)\"\n [style.borderColor]=\"ques.error ? 'red' : ''\"\n (change)=\"childEventCapture($event.target.checked, ques)\" /> \n </div> \n\n <!-- SKS21MAR25 line -->\n <div *ngIf=\"ques.type === 'Line'\">\n <hr class=\"custom-line\" style=\"display: inline-flex\" />\n </div>\n <!-- Table -->\n <!-- RS 03FEB2025 -->\n <!-- Added handleTableSave to handle table data persistence, enabling saving table contents to local storage when save button is clicked -->\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n <!-- <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-table> -->\n <!-- SKS13MAR25 data table change -->\n <nxt-datatable isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"formBuilder\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\" [tableConfig]=\"ques.tableConfig\"\n tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n </nxt-datatable>\n </div>\n\n <!-- Table Appendix -->\n <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\n <app-table-appendix [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-table-appendix>\n </div>\n <!-- list -->\n <!-- VD 20Aug24 used correct attribute -->\n <!-- AP-02APR25 - default placeholder empty string -->\n <!-- AP-16APR25 Format the input value before binding it to filterName -->\n <div *ngIf=\"ques.type === 'List'\" class=\"\">\n <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" [filterName]=\"ques.input\" \n (searchValueChange)=\"childEventCapture($event, ques)\">\n </lib-search-box>\n </div>\n\n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\n <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n <!-- AP 10FEB25 - Dynamically binding selectedValue based on isShengel condition -->\n <app-custom-dropdown [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-dropdown>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n </div>\n <!-- // VD 02Aug24 custom-radio component -->\n <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n <app-custom-radio [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-radio>\n </div>\n\n <!-- Attachment / Files -->\n <div *ngIf=\"ques.type === 'File'\" class=\"\">\n <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n [allFiles]=\"ques.input\" [tableFile]=\"false\" (selectedFileData)=\"childEventCapture($event, ques)\"\n (deletedFileData)=\"deleteFile($event)\" [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n </div>\n <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\n <app-dependent-table [alertMessage]=\"ques.errorMessage\">\n </app-dependent-table>\n </div>\n <div *ngIf=\"ques.type === 'Label'\" class=\"\">\n <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n </app-custom-label>\n </div>\n <!-- // VD 02Aug24 image component -->\n <!-- <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n <app-custom-image [question]=\"ques\">\n </app-custom-image>\n </div> -->\n <!-- 08NOV23 - button type question added -->\n <!-- Button -->\n <div *ngIf=\"ques.type === 'Button'\" class=\"\">\n <app-custom-button [height]=\"'50px'\" [width]=\"'150px'\" [buttonText]=\"ques?.question\"\n [value]=\"ques?.question\" (buttonValue)=\"childEventCapture($event, ques)\">\n </app-custom-button>\n </div>\n <!-- HA 20DEC23 This is to load book type questions-->\n <div *ngIf=\"ques.type === 'Book'\">\n <!-- HA 09FEB24 Added ternary operator -->\n <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n [questions]=\"readQuestions(ques.qbReference, ques.qbReferenceQuestions)\"\n (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'Image'\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- 06-09-24 for calendar type-->\n<!-- <ng-template dynamicComponentHost></ng-template> -->", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}.nxtInputContainer div{padding-left:5px;padding-right:5px}.custom-line{width:100%;border:1px solid #000}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}input[type=checkbox]{width:21px}.boolean-question{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:12px}.form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"], dependencies: [{ kind: "component", type: CustomRichTextComponent, selector: "app-custom-rich-text", inputs: ["value", "placeholder", "error", "question", "rows", "readOnly", "minLength", "maxLength"], outputs: ["textValueChange"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "NxtTableEmit"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "error", "errorMessage", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "filterName"], outputs: ["searchValueChange"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question", "error"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: DependentTableComponent, selector: "app-dependent-table", inputs: ["alertMessage"] }, { kind: "component", type: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue", "labelStyle"] }, { kind: "component", type: TableAppendixComponent, selector: "app-table-appendix", inputs: ["question"], outputs: ["valueChange"] }, { kind: "component", type: CustomDateComponent, selector: "app-custom-date", inputs: ["date", "readOnly", "error", "errorMessage"], outputs: ["dateChange"] }, { kind: "component", type: CustomTimeComponent, selector: "app-custom-time", inputs: ["time", "readOnly", "error", "errorMessage"], outputs: ["timeChange"] }, { kind: "component", type: CustomButtonComponent, selector: "app-custom-button", inputs: ["height", "width", "textColor", "buttonText", "value", "backgroundColor"], outputs: ["buttonValue"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
|
|
13517
13517
|
}
|
|
13518
13518
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionbookComponent, decorators: [{
|
|
13519
13519
|
type: Component,
|
|
13520
|
-
args: [{ selector: 'lib-questionbook', providers: [ChangeService], template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23 Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24 Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n <div class=\"form-row\">\n <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n <!-- RA09DEC24 Changed keys-->\n <div [class]=\"'col-lg-' + ques.size + ' paddingnone'\" *ngFor=\"let ques of questions;let i = index\"\n [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\n <!-- Sub Question Label -->\n <!-- HA 20DEC23 Label Style from salesforce -->\n <!-- VD 09May24 is hide field change-->\n <div *ngIf=\"!ques.isHidden\" class=\"nxtInputContainer\">\n <div *ngIf=\"ques.type === 'DateTime'\">\n\n </div>\n <!-- VD 20JUN24 - help text changes-->\n <!-- VD 01Aug24 - validation change-->\n <!-- // VD 02Aug24 - label value style-->\n <!-- AP-28MAR25 Show label if enabled and not a Boolean type -->\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n *ngIf=\"ques.style?.showLabel ? (ques.style?.showLabel && ques.type !== 'Boolean'): (ques.style?.showLabel !== false && ques.type !== 'Boolean')\"\n [style]=\"ques.style?.labelStyle\">\n <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{\n removeCharacters(ques?.questionText) }}\n <div *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\n <!-- SKS13MAR25 only show on file type -->\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips help text -->\n <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips for file requirements -->\n <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n style=\"margin-left: 4px;\">i</div>\n </span>\n </div>\n <!-- // VD 12Jun24 - readonly change-->\n <!-- DateTime -->\n <div *ngIf=\"ques.type === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\"\n [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\"\n (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date-picker>\n </div>\n\n <!-- Date-->\n <div *ngIf=\"ques.type === 'Date'\">\n <app-custom-date [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\"\n [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date>\n </div>\n\n <!-- Time-->\n <div *ngIf=\"ques.type === 'Time'\">\n <app-custom-time [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\"\n [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\n </app-custom-time>\n </div>\n <!-- calendar -->\n <div *ngIf=\"ques.type === 'Calendar'\">\n <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <!-- model used in calendar component -->\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model>\n </div>\n <!-- Text -->\n <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\">\n <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\n textBox: !qbItem.progressBar\n }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\"\n [focusEvent]=\"clearSQError(ques.id)\" [error]=\"ques.error\" [placeholder]=\"ques.question\"\n (inputValue)=\"childEventCapture($event, ques)\">\n </app-custom-input>\n </div>\n\n <!-- for pick location -->\n <!-- VD 21DEC23 - dependent field change -->\n <div *ngIf=\"ques.type === 'Location'\">\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n </div>\n\n <!-- for text area -->\n <!-- AP-02APR25 - default placeholder empty string -->\n <div *ngIf=\"ques.type === 'TextArea'\">\n <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\"\n [error]=\"ques.error\" [placeholder]=\"ques.question || ''\"\n (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n </div>\n <!-- RS 06JAN25 -->\n <!-- for rich text editor -->\n <div *ngIf=\"ques.type === 'RichTextArea'\">\n <app-custom-rich-text [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input || ''\"\n [error]=\"ques.error\" [placeholder]=\"ques.question\"\n (textValueChange)=\"childEventCapture($event, ques)\">\n </app-custom-rich-text>\n </div>\n\n <!-- SKS25MAR25 Image -->\n <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img *ngIf=\"ques.isReadOnly\" [src]=\"ques.imageData\" />\n <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"ques.input\">\n <img [src]=\"ques.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!ques.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(ques, $event)\" style=\"display: none;\" />\n </div>\n </div>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.type === 'Email'\">\n <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" class=\"she-line-input form-control\"\n [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\" style.border-color=\"{{ ques.error ? 'red' : '' }}\"\n placeholder=\"{{ ques.question }}\" />\n </div>\n\n <!--AP-24MAR25 Number -->\n <!-- AP-02APR25 - default placeholder empty string -->\n <div *ngIf=\"ques.type === 'Number'\">\n <input type=\"number\" [attr.readonly]=\"ques.isReadOnly ? true : null\"[value]=\"ques.input\" class=\"she-line-input form-control\"\n [id]=\"ques.id\" required (focus)=\"clearSQError(ques.id)\" [style.borderColor]=\"ques.error ? 'red' : ''\"\n [placeholder]=\"ques.question || ''\" (input)=\"childEventCapture($event.target.value, ques)\" />\n </div> \n \n <!-- AP-28MAR25 Boolean -->\n <div *ngIf=\"ques.type === 'Boolean'\" class=\"boolean-question\">\n <div>{{ ques.questionText }}</div>\n <input type=\"checkbox\" [attr.disabled]=\"ques.isReadOnly ? true : null\" [checked]=\"ques.input\"\n [id]=\"ques.id\" required (focus)=\"clearSQError(ques.id)\"\n [style.borderColor]=\"ques.error ? 'red' : ''\"\n (change)=\"childEventCapture($event.target.checked, ques)\" /> \n </div> \n\n <!-- SKS21MAR25 line -->\n <div *ngIf=\"ques.type === 'Line'\">\n <hr class=\"custom-line\" style=\"display: inline-flex\" />\n </div>\n <!-- Table -->\n <!-- RS 03FEB2025 -->\n <!-- Added handleTableSave to handle table data persistence, enabling saving table contents to local storage when save button is clicked -->\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n <!-- <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-table> -->\n <!-- SKS13MAR25 data table change -->\n <nxt-datatable isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"formBuilder\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\" [tableConfig]=\"ques.tableConfig\"\n tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n </nxt-datatable>\n </div>\n\n <!-- Table Appendix -->\n <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\n <app-table-appendix [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-table-appendix>\n </div>\n <!-- list -->\n <!-- VD 20Aug24 used correct attribute -->\n <!-- AP-02APR25 - default placeholder empty string -->\n <!-- AP-16APR25 Format the input value before binding it to filterName -->\n <div *ngIf=\"ques.type === 'List'\" class=\"\">\n <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" [filterName]=\"ques.input\" \n (searchValueChange)=\"childEventCapture($event, ques)\">\n </lib-search-box>\n </div>\n\n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\n <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n <!-- AP 10FEB25 - Dynamically binding selectedValue based on isShengel condition -->\n <app-custom-dropdown [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-dropdown>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n </div>\n <!-- // VD 02Aug24 custom-radio component -->\n <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n <app-custom-radio [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-radio>\n </div>\n\n <!-- Attachment / Files -->\n <div *ngIf=\"ques.type === 'File'\" class=\"\">\n <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n [allFiles]=\"ques.input\" [tableFile]=\"false\" (selectedFileData)=\"childEventCapture($event, ques)\"\n (deletedFileData)=\"deleteFile($event)\" [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n </div>\n <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\n <app-dependent-table [alertMessage]=\"ques.errorMessage\">\n </app-dependent-table>\n </div>\n <div *ngIf=\"ques.type === 'Label'\" class=\"\">\n <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n </app-custom-label>\n </div>\n <!-- // VD 02Aug24 image component -->\n <!-- <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n <app-custom-image [question]=\"ques\">\n </app-custom-image>\n </div> -->\n <!-- 08NOV23 - button type question added -->\n <!-- Button -->\n <div *ngIf=\"ques.type === 'Button'\" class=\"\">\n <app-custom-button [height]=\"'50px'\" [width]=\"'150px'\" [buttonText]=\"ques?.question\"\n [value]=\"ques?.question\" (buttonValue)=\"childEventCapture($event, ques)\">\n </app-custom-button>\n </div>\n <!-- HA 20DEC23 This is to load book type questions-->\n <div *ngIf=\"ques.type === 'Book'\">\n <!-- HA 09FEB24 Added ternary operator -->\n <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n [questions]=\"readQuestions(ques.qbReference, ques.qbReferenceQuestions)\"\n (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'Image'\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- 06-09-24 for calendar type-->\n<!-- <ng-template dynamicComponentHost></ng-template> -->", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}.nxtInputContainer div{padding-left:5px;padding-right:5px}.custom-line{width:100%;border:1px solid #000}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}input[type=checkbox]{width:21px}.boolean-question{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:12px}.form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"] }]
|
|
13520
|
+
args: [{ selector: 'lib-questionbook', providers: [ChangeService], template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23 Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24 Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n <div class=\"form-row\">\n <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n <!-- RA09DEC24 Changed keys-->\n <div [class]=\"'col-lg-' + ques.size + ' paddingnone'\" *ngFor=\"let ques of questions;let i = index\"\n [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\n <!-- Sub Question Label -->\n <!-- HA 20DEC23 Label Style from salesforce -->\n <!-- VD 09May24 is hide field change-->\n <div *ngIf=\"!ques.isHidden\" class=\"nxtInputContainer\">\n <div *ngIf=\"ques.type === 'DateTime'\">\n\n </div>\n <!-- VD 20JUN24 - help text changes-->\n <!-- VD 01Aug24 - validation change-->\n <!-- // VD 02Aug24 - label value style-->\n <!-- AP-28MAR25 Show label if enabled and not a Boolean type -->\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n *ngIf=\"ques.style?.showLabel ? (ques.style?.showLabel && ques.type !== 'Boolean'): (ques.style?.showLabel !== false && ques.type !== 'Boolean')\"\n [style]=\"ques.style?.labelStyle\">\n <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\"\n [ngStyle]=\"{\n 'font-family': ques.font,\n 'color': ques.fontColor,\n 'font-size': ques.fontSize,\n 'font-weight': ques.fontWeight\n }\">{{\n removeCharacters(ques?.questionText) }}\n <div *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\n <!-- SKS13MAR25 only show on file type -->\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips help text -->\n <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips for file requirements -->\n <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n style=\"margin-left: 4px;\">i</div>\n </span>\n </div>\n <!-- // VD 12Jun24 - readonly change-->\n <!-- DateTime -->\n <div *ngIf=\"ques.type === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\"\n [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\"\n (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date-picker>\n </div>\n\n <!-- Date-->\n <div *ngIf=\"ques.type === 'Date'\">\n <app-custom-date [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\"\n [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date>\n </div>\n\n <!-- Time-->\n <div *ngIf=\"ques.type === 'Time'\">\n <app-custom-time [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\"\n [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\n </app-custom-time>\n </div>\n <!-- calendar -->\n <div *ngIf=\"ques.type === 'Calendar'\">\n <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <!-- model used in calendar component -->\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model>\n </div>\n <!-- Text -->\n <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\">\n <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\n textBox: !qbItem.progressBar\n }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\"\n [focusEvent]=\"clearSQError(ques.id)\" [error]=\"ques.error\" [placeholder]=\"ques.question\"\n (inputValue)=\"childEventCapture($event, ques)\">\n </app-custom-input>\n </div>\n\n <!-- for pick location -->\n <!-- VD 21DEC23 - dependent field change -->\n <div *ngIf=\"ques.type === 'Location'\">\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n </div>\n\n <!-- for text area -->\n <!-- AP-02APR25 - default placeholder empty string -->\n <div *ngIf=\"ques.type === 'TextArea'\">\n <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\"\n [error]=\"ques.error\" [placeholder]=\"ques.question || ''\"\n (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n </div>\n <!-- RS 06JAN25 -->\n <!-- for rich text editor -->\n <div *ngIf=\"ques.type === 'RichTextArea'\">\n <app-custom-rich-text [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input || ''\"\n [error]=\"ques.error\" [placeholder]=\"ques.question\"\n (textValueChange)=\"childEventCapture($event, ques)\">\n </app-custom-rich-text>\n </div>\n\n <!-- SKS25MAR25 Image -->\n <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img *ngIf=\"ques.isReadOnly\" [src]=\"ques.imageData\" />\n <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"ques.input\">\n <img [src]=\"ques.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!ques.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(ques, $event)\" style=\"display: none;\" />\n </div>\n </div>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.type === 'Email'\">\n <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" class=\"she-line-input form-control\"\n [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\" style.border-color=\"{{ ques.error ? 'red' : '' }}\"\n placeholder=\"{{ ques.question }}\" />\n </div>\n\n <!--AP-24MAR25 Number -->\n <!-- AP-02APR25 - default placeholder empty string -->\n <div *ngIf=\"ques.type === 'Number'\">\n <input type=\"number\" [attr.readonly]=\"ques.isReadOnly ? true : null\"[value]=\"ques.input\" class=\"she-line-input form-control\"\n [id]=\"ques.id\" required (focus)=\"clearSQError(ques.id)\" [style.borderColor]=\"ques.error ? 'red' : ''\"\n [placeholder]=\"ques.question || ''\" (input)=\"childEventCapture($event.target.value, ques)\" />\n </div> \n \n <!-- AP-28MAR25 Boolean -->\n <div *ngIf=\"ques.type === 'Boolean'\" class=\"boolean-question\">\n <div>{{ ques.questionText }}</div>\n <input type=\"checkbox\" [attr.disabled]=\"ques.isReadOnly ? true : null\" [checked]=\"ques.input\"\n [id]=\"ques.id\" required (focus)=\"clearSQError(ques.id)\"\n [style.borderColor]=\"ques.error ? 'red' : ''\"\n (change)=\"childEventCapture($event.target.checked, ques)\" /> \n </div> \n\n <!-- SKS21MAR25 line -->\n <div *ngIf=\"ques.type === 'Line'\">\n <hr class=\"custom-line\" style=\"display: inline-flex\" />\n </div>\n <!-- Table -->\n <!-- RS 03FEB2025 -->\n <!-- Added handleTableSave to handle table data persistence, enabling saving table contents to local storage when save button is clicked -->\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n <!-- <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-table> -->\n <!-- SKS13MAR25 data table change -->\n <nxt-datatable isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"formBuilder\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\" [tableConfig]=\"ques.tableConfig\"\n tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n </nxt-datatable>\n </div>\n\n <!-- Table Appendix -->\n <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\n <app-table-appendix [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-table-appendix>\n </div>\n <!-- list -->\n <!-- VD 20Aug24 used correct attribute -->\n <!-- AP-02APR25 - default placeholder empty string -->\n <!-- AP-16APR25 Format the input value before binding it to filterName -->\n <div *ngIf=\"ques.type === 'List'\" class=\"\">\n <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" [filterName]=\"ques.input\" \n (searchValueChange)=\"childEventCapture($event, ques)\">\n </lib-search-box>\n </div>\n\n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\n <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n <!-- AP 10FEB25 - Dynamically binding selectedValue based on isShengel condition -->\n <app-custom-dropdown [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-dropdown>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n </div>\n <!-- // VD 02Aug24 custom-radio component -->\n <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n <app-custom-radio [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-radio>\n </div>\n\n <!-- Attachment / Files -->\n <div *ngIf=\"ques.type === 'File'\" class=\"\">\n <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n [allFiles]=\"ques.input\" [tableFile]=\"false\" (selectedFileData)=\"childEventCapture($event, ques)\"\n (deletedFileData)=\"deleteFile($event)\" [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n </div>\n <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\n <app-dependent-table [alertMessage]=\"ques.errorMessage\">\n </app-dependent-table>\n </div>\n <div *ngIf=\"ques.type === 'Label'\" class=\"\">\n <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n </app-custom-label>\n </div>\n <!-- // VD 02Aug24 image component -->\n <!-- <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n <app-custom-image [question]=\"ques\">\n </app-custom-image>\n </div> -->\n <!-- 08NOV23 - button type question added -->\n <!-- Button -->\n <div *ngIf=\"ques.type === 'Button'\" class=\"\">\n <app-custom-button [height]=\"'50px'\" [width]=\"'150px'\" [buttonText]=\"ques?.question\"\n [value]=\"ques?.question\" (buttonValue)=\"childEventCapture($event, ques)\">\n </app-custom-button>\n </div>\n <!-- HA 20DEC23 This is to load book type questions-->\n <div *ngIf=\"ques.type === 'Book'\">\n <!-- HA 09FEB24 Added ternary operator -->\n <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n [questions]=\"readQuestions(ques.qbReference, ques.qbReferenceQuestions)\"\n (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'Image'\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- 06-09-24 for calendar type-->\n<!-- <ng-template dynamicComponentHost></ng-template> -->", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}.nxtInputContainer div{padding-left:5px;padding-right:5px}.custom-line{width:100%;border:1px solid #000}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}input[type=checkbox]{width:21px}.boolean-question{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:12px}.form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"] }]
|
|
13521
13521
|
}], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: StorageService }, { type: I18nService }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
13522
13522
|
type: Inject,
|
|
13523
13523
|
args: [DOCUMENT]
|
|
@@ -14501,7 +14501,7 @@ const VERSION = {
|
|
|
14501
14501
|
"semver": null,
|
|
14502
14502
|
"suffix": "05a52cb-dirty",
|
|
14503
14503
|
"semverString": null,
|
|
14504
|
-
"version": "2.1.
|
|
14504
|
+
"version": "2.1.144"
|
|
14505
14505
|
};
|
|
14506
14506
|
/* tslint:enable */
|
|
14507
14507
|
|
|
@@ -14818,839 +14818,798 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
14818
14818
|
}]
|
|
14819
14819
|
}], ctorParameters: () => [{ type: i1$1.HttpClient }] });
|
|
14820
14820
|
|
|
14821
|
-
// AP-
|
|
14822
|
-
class
|
|
14823
|
-
|
|
14824
|
-
|
|
14825
|
-
|
|
14826
|
-
|
|
14827
|
-
|
|
14828
|
-
|
|
14829
|
-
|
|
14830
|
-
|
|
14831
|
-
|
|
14832
|
-
|
|
14833
|
-
|
|
14834
|
-
|
|
14835
|
-
|
|
14836
|
-
|
|
14837
|
-
|
|
14838
|
-
|
|
14839
|
-
|
|
14840
|
-
|
|
14841
|
-
|
|
14842
|
-
|
|
14843
|
-
|
|
14844
|
-
|
|
14845
|
-
|
|
14846
|
-
|
|
14847
|
-
|
|
14848
|
-
|
|
14849
|
-
|
|
14850
|
-
|
|
14851
|
-
|
|
14852
|
-
|
|
14853
|
-
|
|
14854
|
-
|
|
14855
|
-
|
|
14856
|
-
|
|
14857
|
-
|
|
14858
|
-
|
|
14859
|
-
|
|
14860
|
-
|
|
14861
|
-
|
|
14862
|
-
|
|
14863
|
-
|
|
14864
|
-
|
|
14865
|
-
|
|
14866
|
-
|
|
14867
|
-
|
|
14868
|
-
|
|
14869
|
-
|
|
14870
|
-
|
|
14871
|
-
|
|
14872
|
-
|
|
14873
|
-
|
|
14874
|
-
|
|
14875
|
-
|
|
14876
|
-
|
|
14877
|
-
|
|
14878
|
-
|
|
14879
|
-
|
|
14880
|
-
|
|
14881
|
-
|
|
14882
|
-
|
|
14883
|
-
|
|
14884
|
-
|
|
14885
|
-
|
|
14886
|
-
|
|
14887
|
-
|
|
14888
|
-
}
|
|
14889
|
-
{
|
|
14890
|
-
|
|
14891
|
-
|
|
14892
|
-
|
|
14893
|
-
|
|
14894
|
-
|
|
14895
|
-
|
|
14896
|
-
|
|
14897
|
-
|
|
14898
|
-
|
|
14899
|
-
|
|
14900
|
-
|
|
14901
|
-
|
|
14902
|
-
|
|
14903
|
-
|
|
14904
|
-
|
|
14905
|
-
|
|
14906
|
-
|
|
14907
|
-
|
|
14908
|
-
|
|
14909
|
-
|
|
14910
|
-
|
|
14911
|
-
|
|
14912
|
-
|
|
14913
|
-
|
|
14914
|
-
|
|
14915
|
-
|
|
14916
|
-
|
|
14917
|
-
|
|
14918
|
-
|
|
14919
|
-
|
|
14920
|
-
|
|
14921
|
-
|
|
14922
|
-
|
|
14923
|
-
|
|
14924
|
-
|
|
14925
|
-
|
|
14926
|
-
|
|
14927
|
-
|
|
14928
|
-
|
|
14929
|
-
|
|
14930
|
-
|
|
14931
|
-
|
|
14932
|
-
|
|
14933
|
-
|
|
14934
|
-
|
|
14935
|
-
|
|
14936
|
-
|
|
14937
|
-
|
|
14938
|
-
|
|
14939
|
-
|
|
14940
|
-
|
|
14941
|
-
|
|
14942
|
-
|
|
14943
|
-
|
|
14944
|
-
|
|
14945
|
-
|
|
14946
|
-
|
|
14947
|
-
|
|
14948
|
-
|
|
14949
|
-
|
|
14950
|
-
|
|
14951
|
-
|
|
14952
|
-
|
|
14953
|
-
|
|
14954
|
-
|
|
14955
|
-
|
|
14956
|
-
|
|
14957
|
-
|
|
14958
|
-
|
|
14959
|
-
|
|
14960
|
-
|
|
14961
|
-
|
|
14962
|
-
|
|
14963
|
-
|
|
14964
|
-
|
|
14965
|
-
|
|
14966
|
-
|
|
14967
|
-
|
|
14968
|
-
|
|
14821
|
+
// AP 22JAN25 - form preview and All form elements
|
|
14822
|
+
class ElementComponent {
|
|
14823
|
+
formBuilderService;
|
|
14824
|
+
//@Output() elementButtonClicked = new EventEmitter<string>();
|
|
14825
|
+
bookletJSON;
|
|
14826
|
+
bookletId;
|
|
14827
|
+
templateMode = new EventEmitter();
|
|
14828
|
+
field;
|
|
14829
|
+
formElements = [];
|
|
14830
|
+
elements = [];
|
|
14831
|
+
bookId;
|
|
14832
|
+
sections = {
|
|
14833
|
+
basic: true, // Basic Elements open by default
|
|
14834
|
+
advanced: true // Advanced Elements closed by default
|
|
14835
|
+
};
|
|
14836
|
+
basicElements = [];
|
|
14837
|
+
advancedElements = [];
|
|
14838
|
+
//elementDisabledArray: any;
|
|
14839
|
+
version = VERSION.version; //SKS10MAR25 get version from environment/version.ts
|
|
14840
|
+
book;
|
|
14841
|
+
selectedElement = null;
|
|
14842
|
+
isSelectTablePopup = false;
|
|
14843
|
+
currentType;
|
|
14844
|
+
addTable = true;
|
|
14845
|
+
dots = Array(6);
|
|
14846
|
+
draggedIndex = null;
|
|
14847
|
+
templateSelected = false;
|
|
14848
|
+
//subscription: any;
|
|
14849
|
+
constructor(formBuilderService) {
|
|
14850
|
+
this.formBuilderService = formBuilderService;
|
|
14851
|
+
}
|
|
14852
|
+
// AP-06MAR25 New Design Change Elements Basic , Advanced
|
|
14853
|
+
// AP-06MAR25 Add RichText Area
|
|
14854
|
+
// AP-12MAR25 Add Date
|
|
14855
|
+
ngOnInit() {
|
|
14856
|
+
this.basicElements = [
|
|
14857
|
+
{ "type": "Text", "img": "Text", "label": "Text" },
|
|
14858
|
+
{ "type": "Number", "img": "Number", "label": "Number" },
|
|
14859
|
+
{ "type": "Label", "img": "Label", "label": "Label" },
|
|
14860
|
+
{ "type": "Email", "img": "Email", "label": "Email" },
|
|
14861
|
+
{ "type": "Date", "img": "Date", "label": "Date" },
|
|
14862
|
+
{ "type": "Time", "img": "Time", "label": "Time" },
|
|
14863
|
+
{ "type": "DateTime", "img": "DateTime", "label": "DateTime" },
|
|
14864
|
+
{ "type": "Calendar", "img": "Calendar", "label": "Calendar" },
|
|
14865
|
+
{ "type": "File", "img": "File", "label": "Files" },
|
|
14866
|
+
{ "type": "Image", "img": "Image", "label": "Image" },
|
|
14867
|
+
{ "type": "Checkbox", "img": "CheckBox", "label": "Checkbox" },
|
|
14868
|
+
{ "type": "Radio", "img": "Radio", "label": "Radio" },
|
|
14869
|
+
{ "type": "Dropdown", "img": "Drop", "label": "Dropdown" },
|
|
14870
|
+
{ "type": "TextArea", "img": "TextArea", "label": "Text Area" },
|
|
14871
|
+
{ "type": "RichTextArea", "img": "RichText", "label": "Rich Text" },
|
|
14872
|
+
];
|
|
14873
|
+
this.advancedElements = [
|
|
14874
|
+
{ "type": "Line", "img": "line", "label": "Line" },
|
|
14875
|
+
{ "type": "Space", "img": "space", "label": "Space" },
|
|
14876
|
+
{ "type": "Boolean", "img": "Boolean", "label": "Boolean" },
|
|
14877
|
+
{ "type": "Book", "img": "Search", "label": "Book" },
|
|
14878
|
+
{ "type": "List", "img": "Search", "label": "List" },
|
|
14879
|
+
{ "type": "Table", "img": "Table", "label": "Table" },
|
|
14880
|
+
{ "type": "Button", "img": "Button", "label": "Button" }
|
|
14881
|
+
];
|
|
14882
|
+
// this.elementDisabledArray = {
|
|
14883
|
+
// Table: [
|
|
14884
|
+
// 'Book', 'Calendar',"Boolean", 'List', 'Table', 'Checkbox', 'Radio',
|
|
14885
|
+
// 'Dropdown', 'TextArea', 'RichTextArea', 'Number', 'Label', 'Image',
|
|
14886
|
+
// 'Email', 'Date', 'Time', 'DateTime', 'Line', 'Space'
|
|
14887
|
+
// ]
|
|
14888
|
+
// };
|
|
14889
|
+
this.formBuilderService.formElements$.subscribe(elements => {
|
|
14890
|
+
setTimeout(() => {
|
|
14891
|
+
this.formElements = elements.map(field => ({ ...field }));
|
|
14892
|
+
}, 0);
|
|
14893
|
+
});
|
|
14894
|
+
if (this.bookletJSON && (this.bookletJSON !== '')) {
|
|
14895
|
+
this.initializeForm();
|
|
14896
|
+
}
|
|
14897
|
+
else {
|
|
14898
|
+
this.formBuilderService.newBook();
|
|
14899
|
+
}
|
|
14900
|
+
// AP-12MAR25 - Added to handle bookletId
|
|
14901
|
+
if (this.bookletId) {
|
|
14902
|
+
localStorage.setItem('unique_id', this.bookletId);
|
|
14903
|
+
}
|
|
14904
|
+
this.book = this.formBuilderService.getBook();
|
|
14905
|
+
this.formBuilderService.selectedElement$.subscribe(index => {
|
|
14906
|
+
const elements = this.formBuilderService.getElements();
|
|
14907
|
+
if (index >= 0) {
|
|
14908
|
+
this.selectedElement = elements[index];
|
|
14909
|
+
}
|
|
14910
|
+
// SKS19MAR25 for fieldMeta checking
|
|
14911
|
+
if (this.selectedElement?.type === 'Table') {
|
|
14912
|
+
this.selectedElement['fieldsMeta'] = typeof this.selectedElement.fieldsMeta === 'string' ? this.selectedElement.fieldsMeta : JSON.stringify(this.selectedElement['fieldsMeta'] || []);
|
|
14913
|
+
}
|
|
14914
|
+
// this.formElements = [...elements]
|
|
14915
|
+
});
|
|
14916
|
+
this.formBuilderService.addElementWithId();
|
|
14917
|
+
}
|
|
14918
|
+
// Add these methods
|
|
14919
|
+
toggleSection(section) {
|
|
14920
|
+
this.sections[section] = !this.sections[section];
|
|
14921
|
+
}
|
|
14922
|
+
isSectionOpen(section) {
|
|
14923
|
+
return this.sections[section];
|
|
14924
|
+
}
|
|
14925
|
+
// AP - 26FEB25 - Added ngOnChanges to handle changes in bookletJSON
|
|
14926
|
+
ngOnChanges(changes) {
|
|
14927
|
+
if (changes['bookletJSON'] && changes['bookletJSON'].currentValue) {
|
|
14928
|
+
if (this.bookletJSON && (this.bookletJSON !== '')) {
|
|
14929
|
+
this.initializeForm();
|
|
14930
|
+
}
|
|
14931
|
+
else {
|
|
14932
|
+
this.formBuilderService.newBook();
|
|
14933
|
+
}
|
|
14934
|
+
}
|
|
14935
|
+
}
|
|
14936
|
+
// AP-08APR25 Template is selected, update form elements and emit template mode
|
|
14937
|
+
onTemplateSelected(event) {
|
|
14938
|
+
this.formBuilderService.clearElements();
|
|
14939
|
+
event.elements.forEach(el => this.formBuilderService.addElement(el));
|
|
14940
|
+
// Emit template mode to parent
|
|
14941
|
+
this.templateMode.emit(true);
|
|
14942
|
+
}
|
|
14943
|
+
initializeForm() {
|
|
14944
|
+
if (!this.bookletJSON || !this.bookletJSON.bookQuestionsMap) {
|
|
14945
|
+
console.warn("Invalid bookletJSON structure");
|
|
14946
|
+
return;
|
|
14947
|
+
}
|
|
14948
|
+
this.formElements = [];
|
|
14949
|
+
this.formBuilderService.clearElements();
|
|
14950
|
+
this.formBuilderService.intializeBook(this.bookletJSON);
|
|
14951
|
+
const bookQuestionsMap = this.bookletJSON.bookQuestionsMap;
|
|
14952
|
+
const bookQuestionsMapKeys = Object.keys(bookQuestionsMap);
|
|
14953
|
+
if (bookQuestionsMapKeys.length === 0)
|
|
14954
|
+
return; // Check for empty object early
|
|
14955
|
+
for (const key of bookQuestionsMapKeys) {
|
|
14956
|
+
const subQuestions = bookQuestionsMap[key]?.subQuestions;
|
|
14957
|
+
if (Array.isArray(subQuestions)) {
|
|
14958
|
+
subQuestions.forEach((subQuestion) => {
|
|
14959
|
+
// AP-04APR24 If subQuestion.style exists as a string and is empty, replace it with a default style object
|
|
14960
|
+
if (typeof subQuestion.style === "string" && subQuestion.style.trim() === "") {
|
|
14961
|
+
subQuestion.style = {
|
|
14962
|
+
"labelClass": null,
|
|
14963
|
+
"labelStyle": null,
|
|
14964
|
+
"labelValueStyle": null,
|
|
14965
|
+
"inputClass": null,
|
|
14966
|
+
"inputStyle": null,
|
|
14967
|
+
"showLabel": true,
|
|
14968
|
+
"bookStyle": null,
|
|
14969
|
+
"direction": "ltr",
|
|
14970
|
+
"questionStyle": null
|
|
14971
|
+
};
|
|
14969
14972
|
}
|
|
14970
|
-
}
|
|
14971
|
-
|
|
14973
|
+
});
|
|
14974
|
+
}
|
|
14972
14975
|
}
|
|
14973
|
-
|
|
14974
|
-
unique_id;
|
|
14975
|
-
book;
|
|
14976
|
-
formElements = [];
|
|
14977
|
-
constructor() {
|
|
14978
|
-
this.newBook();
|
|
14979
|
-
}
|
|
14980
|
-
getTemplates() {
|
|
14981
|
-
return this.templates;
|
|
14976
|
+
this.formElements = this.formBuilderService.getElements();
|
|
14982
14977
|
}
|
|
14983
|
-
|
|
14984
|
-
|
|
14985
|
-
|
|
14986
|
-
|
|
14987
|
-
|
|
14988
|
-
|
|
14989
|
-
|
|
14990
|
-
questionText: templateElement.questionText || null,
|
|
14991
|
-
question: templateElement.question || null,
|
|
14992
|
-
helpText: null,
|
|
14993
|
-
errorMessage: null,
|
|
14994
|
-
isReadOnly: false,
|
|
14995
|
-
isHidden: false,
|
|
14996
|
-
required: false,
|
|
14997
|
-
referenceField: null,
|
|
14998
|
-
additionalRichContent: null,
|
|
14999
|
-
groupName: null,
|
|
15000
|
-
isDateBackward: false,
|
|
15001
|
-
title: null,
|
|
15002
|
-
subTitle: null,
|
|
15003
|
-
size: templateElement.size || 12,
|
|
15004
|
-
isDateForward: false,
|
|
15005
|
-
isOptional: false,
|
|
15006
|
-
isTitle: false,
|
|
15007
|
-
nextQuestion: null,
|
|
15008
|
-
allowedFileExtensions: null,
|
|
15009
|
-
questionNumber: index + 1,
|
|
15010
|
-
order: index + 1,
|
|
15011
|
-
style: {
|
|
15012
|
-
labelClass: null,
|
|
15013
|
-
labelStyle: null,
|
|
15014
|
-
labelValueStyle: null,
|
|
15015
|
-
inputClass: null,
|
|
15016
|
-
inputStyle: null,
|
|
15017
|
-
showLabel: templateElement?.style?.showLabel ?? true,
|
|
15018
|
-
bookStyle: null,
|
|
15019
|
-
direction: 'ltr',
|
|
15020
|
-
questionStyle: null,
|
|
15021
|
-
},
|
|
15022
|
-
subText: {
|
|
15023
|
-
endpoint: null,
|
|
15024
|
-
variable: null,
|
|
15025
|
-
field: null,
|
|
15026
|
-
defaultField: null,
|
|
15027
|
-
sourceQuestionId: null,
|
|
15028
|
-
valueField: null,
|
|
15029
|
-
labelField: null,
|
|
15030
|
-
isDependentField: false,
|
|
15031
|
-
dependentValue: null,
|
|
15032
|
-
queryField: null,
|
|
15033
|
-
queryValue: null,
|
|
15034
|
-
queryValueReference: null,
|
|
15035
|
-
uniqueKey: null,
|
|
15036
|
-
},
|
|
15037
|
-
imageData: null,
|
|
15038
|
-
boolean: false,
|
|
15039
|
-
options: templateElement.options
|
|
15040
|
-
? this.initializeOptions(templateElement.options)
|
|
15041
|
-
: null,
|
|
15042
|
-
imageSize: templateElement.type === 'Image' ? { width: 150, height: 150 } : null,
|
|
15043
|
-
tableConfig: templateElement.type === 'Table' ? {
|
|
15044
|
-
isNosIndicator: true,
|
|
15045
|
-
addInlineRecord: true,
|
|
15046
|
-
isPagination: true,
|
|
15047
|
-
actionButton: true,
|
|
15048
|
-
isDeleteRow: true,
|
|
15049
|
-
isEditRow: true,
|
|
15050
|
-
searchBar: true,
|
|
15051
|
-
isButtons: true,
|
|
15052
|
-
itemsPerPage: 10,
|
|
15053
|
-
} : null,
|
|
15054
|
-
fieldsMeta: templateElement.fieldsMeta
|
|
15055
|
-
? this.initializeFieldsMeta(templateElement.fieldsMeta)
|
|
15056
|
-
: null,
|
|
15057
|
-
};
|
|
15058
|
-
return { ...baseElement, ...templateElement };
|
|
14978
|
+
// Add this method to handle element selection
|
|
14979
|
+
selectElement(index) {
|
|
14980
|
+
this.selectedFieldIndex = index; // element is selected
|
|
14981
|
+
this.formBuilderService.setSelectedElement(index);
|
|
14982
|
+
this.book = this.formBuilderService.getBook();
|
|
14983
|
+
//const element = this.formElements[index];
|
|
14984
|
+
// this.elementButtonClicked.emit(element.type);
|
|
15059
14985
|
}
|
|
15060
|
-
|
|
15061
|
-
|
|
15062
|
-
|
|
15063
|
-
|
|
15064
|
-
|
|
14986
|
+
//selectedIndex: number | null = null;
|
|
14987
|
+
selectedFieldIndex = null; // element is cleared
|
|
14988
|
+
selectHeading(event) {
|
|
14989
|
+
this.formBuilderService.selectHeading(event); //AP-10MAR25 Updates the selected heading in the service
|
|
14990
|
+
this.book = this.formBuilderService.getBook(); //AP-10MAR25 Retrieves the updated book/form data
|
|
15065
14991
|
}
|
|
15066
|
-
|
|
15067
|
-
|
|
15068
|
-
|
|
15069
|
-
return parsed.map((field) => ({
|
|
15070
|
-
...field,
|
|
15071
|
-
uniqueIdentifier: v4()
|
|
15072
|
-
}));
|
|
15073
|
-
}
|
|
15074
|
-
catch (e) {
|
|
15075
|
-
console.error('Error parsing fieldsMeta:', e);
|
|
15076
|
-
return [];
|
|
15077
|
-
}
|
|
14992
|
+
// AP-17APR25 generateUiId
|
|
14993
|
+
generateUiId() {
|
|
14994
|
+
return this.formBuilderService.addElementWithId();
|
|
15078
14995
|
}
|
|
15079
|
-
|
|
15080
|
-
|
|
15081
|
-
|
|
15082
|
-
|
|
15083
|
-
|
|
14996
|
+
addElement(type) {
|
|
14997
|
+
const unique_id = this.generateUiId();
|
|
14998
|
+
this.currentType = type;
|
|
14999
|
+
if (this.selectedElement?.type === 'Table' && this.addTable) {
|
|
15000
|
+
this.isSelectTablePopup = true;
|
|
15084
15001
|
}
|
|
15085
|
-
|
|
15086
|
-
|
|
15087
|
-
|
|
15088
|
-
|
|
15089
|
-
|
|
15090
|
-
|
|
15091
|
-
|
|
15092
|
-
|
|
15093
|
-
|
|
15094
|
-
|
|
15095
|
-
|
|
15096
|
-
|
|
15097
|
-
|
|
15098
|
-
|
|
15099
|
-
|
|
15100
|
-
|
|
15101
|
-
|
|
15102
|
-
|
|
15103
|
-
|
|
15104
|
-
|
|
15105
|
-
|
|
15106
|
-
|
|
15107
|
-
|
|
15002
|
+
else {
|
|
15003
|
+
const newElement = {
|
|
15004
|
+
id: unique_id,
|
|
15005
|
+
uid: unique_id,
|
|
15006
|
+
type,
|
|
15007
|
+
name: null,
|
|
15008
|
+
questionText: null,
|
|
15009
|
+
question: null,
|
|
15010
|
+
helpText: null,
|
|
15011
|
+
errorMessage: null,
|
|
15012
|
+
isReadOnly: false,
|
|
15013
|
+
isHidden: false,
|
|
15014
|
+
required: false,
|
|
15015
|
+
referenceField: null,
|
|
15016
|
+
additionalRichContent: null,
|
|
15017
|
+
groupName: null,
|
|
15018
|
+
isDateBackward: false,
|
|
15019
|
+
title: null,
|
|
15020
|
+
subTitle: null,
|
|
15021
|
+
size: 12,
|
|
15022
|
+
isDateForward: false,
|
|
15023
|
+
isOptional: false,
|
|
15024
|
+
isTitle: false,
|
|
15025
|
+
nextQuestion: null,
|
|
15026
|
+
allowedFileExtensions: null,
|
|
15027
|
+
questionNumber: this.formBuilderService.getElements().length + 1,
|
|
15028
|
+
order: this.formElements.length + 1,
|
|
15029
|
+
questionBookId: this.bookletId,
|
|
15030
|
+
parentQuestion: null,
|
|
15031
|
+
fieldsMeta: [],
|
|
15032
|
+
recordTypeName: null,
|
|
15033
|
+
recordTypeId: null,
|
|
15034
|
+
trackingId: null,
|
|
15035
|
+
dateText: null,
|
|
15036
|
+
timeText: null,
|
|
15037
|
+
recordId: null,
|
|
15038
|
+
qbReference: null,
|
|
15039
|
+
qbReferenceQuestions: null,
|
|
15040
|
+
questionBookSubTitle: null,
|
|
15041
|
+
style: {
|
|
15042
|
+
labelClass: null,
|
|
15043
|
+
labelStyle: null,
|
|
15044
|
+
labelValueStyle: null,
|
|
15045
|
+
inputClass: null,
|
|
15046
|
+
inputStyle: null,
|
|
15047
|
+
showLabel: true,
|
|
15048
|
+
bookStyle: null,
|
|
15049
|
+
direction: 'ltr',
|
|
15050
|
+
questionStyle: null,
|
|
15051
|
+
},
|
|
15052
|
+
subText: this.getDefaultSubText(),
|
|
15053
|
+
imageData: null,
|
|
15054
|
+
boolean: false,
|
|
15055
|
+
options: type === 'Dropdown' || type === 'Radio' || type === 'Checkbox' ? [] : null,
|
|
15056
|
+
imageSize: type === 'Image' ? { width: 150, height: 150 } : null,
|
|
15057
|
+
tableConfig: type === 'Table' ? {
|
|
15058
|
+
isNosIndicator: true,
|
|
15059
|
+
addInlineRecord: true,
|
|
15060
|
+
isPagination: true,
|
|
15061
|
+
actionButton: true,
|
|
15062
|
+
isDeleteRow: true,
|
|
15063
|
+
isEditRow: true,
|
|
15064
|
+
searchBar: true,
|
|
15065
|
+
isButtons: true,
|
|
15066
|
+
itemsPerPage: 10,
|
|
15067
|
+
} : null,
|
|
15068
|
+
};
|
|
15069
|
+
this.formBuilderService.addElement(newElement);
|
|
15070
|
+
this.formElements = this.formBuilderService.getElements();
|
|
15071
|
+
// SKS19MAR25 fieldsmeta check
|
|
15072
|
+
this.formElements = this.formElements.map(ele => {
|
|
15073
|
+
if (ele.type === 'Table') {
|
|
15074
|
+
ele.fieldsMeta = typeof ele.fieldsMeta === 'string'
|
|
15075
|
+
? ele.fieldsMeta
|
|
15076
|
+
: JSON.stringify(ele.fieldsMeta || []);
|
|
15108
15077
|
}
|
|
15109
|
-
|
|
15110
|
-
|
|
15111
|
-
|
|
15112
|
-
if (!this.book)
|
|
15113
|
-
this.newBook(); // Ensure book exists
|
|
15114
|
-
if (this.book.bookQuestionsMap && this.unique_id) {
|
|
15115
|
-
this.book.bookQuestionsMap[this.unique_id].subQuestions = this.formElements;
|
|
15078
|
+
return ele;
|
|
15079
|
+
});
|
|
15080
|
+
this.addTable = true;
|
|
15116
15081
|
}
|
|
15117
|
-
// Prepare sqOptions (same format as FormBuilderService)
|
|
15118
|
-
const sqOptions = {};
|
|
15119
|
-
this.formElements.forEach(element => {
|
|
15120
|
-
if (['Dropdown', 'Radio', 'Checkbox'].includes(element.type)) {
|
|
15121
|
-
sqOptions[element.id] = {
|
|
15122
|
-
...element,
|
|
15123
|
-
options: element.options?.map(opt => ({
|
|
15124
|
-
...opt,
|
|
15125
|
-
// Ensure UUIDs are preserved
|
|
15126
|
-
id: opt.id || v4(),
|
|
15127
|
-
uniqueIdentifier: opt.uniqueIdentifier || v4()
|
|
15128
|
-
})) || []
|
|
15129
|
-
};
|
|
15130
|
-
}
|
|
15131
|
-
});
|
|
15132
|
-
this.book.sqOptions = sqOptions;
|
|
15133
|
-
return JSON.parse(JSON.stringify(this.book)); // Return clean copy
|
|
15134
15082
|
}
|
|
15135
|
-
//
|
|
15136
|
-
|
|
15137
|
-
|
|
15138
|
-
|
|
15139
|
-
|
|
15140
|
-
|
|
15141
|
-
|
|
15142
|
-
|
|
15143
|
-
|
|
15144
|
-
|
|
15145
|
-
|
|
15146
|
-
|
|
15147
|
-
|
|
15148
|
-
|
|
15149
|
-
|
|
15150
|
-
|
|
15151
|
-
records: [{
|
|
15152
|
-
id: this.unique_id,
|
|
15153
|
-
title: 'Untitled Template',
|
|
15154
|
-
subQuestions: []
|
|
15155
|
-
}]
|
|
15083
|
+
// AP-07MAY25 - Added to handle default subText
|
|
15084
|
+
getDefaultSubText() {
|
|
15085
|
+
const defaultData = {
|
|
15086
|
+
endpoint: null,
|
|
15087
|
+
variable: null,
|
|
15088
|
+
field: null,
|
|
15089
|
+
defaultField: null,
|
|
15090
|
+
sourceQuestionId: null,
|
|
15091
|
+
valueField: null,
|
|
15092
|
+
labelField: null,
|
|
15093
|
+
isDependentField: false,
|
|
15094
|
+
dependentValue: null,
|
|
15095
|
+
queryField: null,
|
|
15096
|
+
queryValue: null,
|
|
15097
|
+
queryValueReference: null,
|
|
15098
|
+
uniqueKey: null,
|
|
15156
15099
|
};
|
|
15100
|
+
const isEmpty = Object.values(defaultData).every(val => val === null || val === false);
|
|
15101
|
+
return isEmpty ? null : defaultData;
|
|
15157
15102
|
}
|
|
15158
|
-
|
|
15159
|
-
|
|
15160
|
-
|
|
15161
|
-
|
|
15162
|
-
|
|
15163
|
-
|
|
15164
|
-
|
|
15165
|
-
|
|
15166
|
-
|
|
15167
|
-
|
|
15168
|
-
|
|
15169
|
-
|
|
15170
|
-
|
|
15171
|
-
templates = [];
|
|
15172
|
-
sections = { templates: false };
|
|
15173
|
-
constructor(templateService) {
|
|
15174
|
-
this.templateService = templateService;
|
|
15175
|
-
this.templates = this.templateService.getTemplates(); // Load template list
|
|
15103
|
+
// Remove an element by index
|
|
15104
|
+
removeElement(field, index) {
|
|
15105
|
+
this.formBuilderService.removeElementComponent(field.id);
|
|
15106
|
+
this.formElements = this.formBuilderService.getElements();
|
|
15107
|
+
// SKS19MAR25 fieldsmeta check
|
|
15108
|
+
this.formElements = this.formElements.map(ele => {
|
|
15109
|
+
if (ele.type === 'Table') {
|
|
15110
|
+
ele.fieldsMeta = typeof ele.fieldsMeta === 'string'
|
|
15111
|
+
? ele.fieldsMeta
|
|
15112
|
+
: JSON.stringify(ele.fieldsMeta || []);
|
|
15113
|
+
}
|
|
15114
|
+
return ele;
|
|
15115
|
+
});
|
|
15176
15116
|
}
|
|
15177
|
-
|
|
15178
|
-
this.
|
|
15117
|
+
onDragStart(event, index) {
|
|
15118
|
+
this.draggedIndex = index;
|
|
15119
|
+
event.dataTransfer?.setData('text/plain', index.toString());
|
|
15179
15120
|
}
|
|
15180
|
-
|
|
15181
|
-
|
|
15182
|
-
|
|
15121
|
+
// Allow dropping by preventing default
|
|
15122
|
+
onDragOver(event, index) {
|
|
15123
|
+
event.preventDefault();
|
|
15124
|
+
}
|
|
15125
|
+
// Handle drop event
|
|
15126
|
+
onDrop(event, dropIndex) {
|
|
15127
|
+
event.preventDefault();
|
|
15128
|
+
if (this.draggedIndex === null || this.draggedIndex === dropIndex)
|
|
15183
15129
|
return;
|
|
15184
|
-
|
|
15185
|
-
|
|
15186
|
-
|
|
15187
|
-
this.
|
|
15130
|
+
const draggedItem = this.formElements[this.draggedIndex];
|
|
15131
|
+
// Remove dragged item from old position and insert it in new position
|
|
15132
|
+
this.formElements.splice(this.draggedIndex, 1);
|
|
15133
|
+
this.formElements.splice(dropIndex, 0, draggedItem);
|
|
15134
|
+
//AP-28MAR25 Update questionNumber dynamically based on new order
|
|
15135
|
+
this.formElements.forEach((element, index) => {
|
|
15136
|
+
element.questionNumber = index + 1;
|
|
15137
|
+
});
|
|
15138
|
+
// Reset dragged index
|
|
15139
|
+
this.draggedIndex = null;
|
|
15140
|
+
// Notify service about the update
|
|
15141
|
+
this.formBuilderService.updateElementsOrder(this.formElements);
|
|
15188
15142
|
}
|
|
15189
|
-
|
|
15190
|
-
|
|
15191
|
-
}
|
|
15192
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppTemplatesComponent, decorators: [{
|
|
15193
|
-
type: Component,
|
|
15194
|
-
args: [{ selector: 'app-templates', template: "<!-- AP-08APR25 -->\n<!-- Templates Section Toggle -->\n<div class=\"field-container\" (click)=\"toggleSection('templates')\"\n style=\"background-color: #EFF8FF; border: 1px solid #E6F3FF; margin-bottom: 10px; display: flex; justify-content: space-between; padding: 10px; cursor: pointer;\">\n <div class=\"label-container\">\n <div class=\"head-elements\" style=\"font-weight: bold;\">Templates</div>\n </div>\n <img [src]=\"sections.templates ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\" />\n</div>\n\n<!-- Template List Section -->\n<div *ngIf=\"sections.templates\" class=\"template-container\">\n <div *ngFor=\"let template of templates\" class=\"field-container template-card\"\n (click)=\"selectTemplate(template.templateId)\"\n style=\"border: 1px solid #dbeafe; padding: 12px; margin-bottom: 10px; cursor: pointer; border-radius: 10px; background-color: #f8fafc;\">\n \n <div class=\"label-container\" style=\"display: flex; justify-content: space-between;\">\n <div>\n <label class=\"template-header\" style=\"font-weight: 600;\">{{ template.templateName }}</label>\n </div>\n </div>\n <div class=\"template-content\" style=\"margin-top: 5px; color: #555;\">{{ template.content }}</div>\n </div>\n</div>\n", styles: [".toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.head-elements{font-size:17px;font-weight:600}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.template-card{border:1px solid #ddd;padding:10px;margin:10px 0;cursor:pointer;background-color:#f9f9f9;transition:background-color .3s}.template-card:hover{background-color:#eff8ff}.template-header{font-size:18px;font-weight:700}.template-content{font-size:14px;color:#555}\n"] }]
|
|
15195
|
-
}], ctorParameters: () => [{ type: TemplateService }], propDecorators: { templateSelected: [{
|
|
15196
|
-
type: Output
|
|
15197
|
-
}] } });
|
|
15198
|
-
|
|
15199
|
-
// AP 22JAN25 - form preview and All form elements
|
|
15200
|
-
class ElementComponent {
|
|
15201
|
-
formBuilderService;
|
|
15202
|
-
//@Output() elementButtonClicked = new EventEmitter<string>();
|
|
15203
|
-
bookletJSON;
|
|
15204
|
-
bookletId;
|
|
15205
|
-
templateMode = new EventEmitter();
|
|
15206
|
-
field;
|
|
15207
|
-
formElements = [];
|
|
15208
|
-
elements = [];
|
|
15209
|
-
bookId;
|
|
15210
|
-
sections = {
|
|
15211
|
-
basic: true, // Basic Elements open by default
|
|
15212
|
-
advanced: true // Advanced Elements closed by default
|
|
15213
|
-
};
|
|
15214
|
-
basicElements = [];
|
|
15215
|
-
advancedElements = [];
|
|
15216
|
-
elementDisabledArray;
|
|
15217
|
-
version = VERSION.version; //SKS10MAR25 get version from environment/version.ts
|
|
15218
|
-
book;
|
|
15219
|
-
selectedElement = null;
|
|
15220
|
-
isSelectTablePopup = false;
|
|
15221
|
-
currentType;
|
|
15222
|
-
addTable = true;
|
|
15223
|
-
dots = Array(6);
|
|
15224
|
-
draggedIndex = null;
|
|
15225
|
-
templateSelected = false;
|
|
15226
|
-
//subscription: any;
|
|
15227
|
-
constructor(formBuilderService) {
|
|
15228
|
-
this.formBuilderService = formBuilderService;
|
|
15143
|
+
toggleBoolean(field) {
|
|
15144
|
+
field.boolean = !field.boolean;
|
|
15229
15145
|
}
|
|
15230
|
-
|
|
15231
|
-
|
|
15232
|
-
|
|
15233
|
-
|
|
15234
|
-
|
|
15235
|
-
{
|
|
15236
|
-
|
|
15237
|
-
|
|
15238
|
-
|
|
15239
|
-
|
|
15240
|
-
|
|
15241
|
-
|
|
15242
|
-
|
|
15243
|
-
|
|
15244
|
-
|
|
15245
|
-
|
|
15246
|
-
|
|
15247
|
-
|
|
15248
|
-
|
|
15249
|
-
|
|
15250
|
-
|
|
15251
|
-
|
|
15252
|
-
{
|
|
15253
|
-
|
|
15254
|
-
|
|
15255
|
-
|
|
15256
|
-
|
|
15257
|
-
|
|
15258
|
-
|
|
15259
|
-
|
|
15260
|
-
|
|
15261
|
-
|
|
15262
|
-
|
|
15263
|
-
|
|
15264
|
-
|
|
15265
|
-
|
|
15146
|
+
getFontStyles(field) {
|
|
15147
|
+
const styles = {
|
|
15148
|
+
'font-family': field.font || 'Helvetica Neue',
|
|
15149
|
+
'font-weight': field.fontWeight || '400',
|
|
15150
|
+
'font-size': field.fontSize || '14px',
|
|
15151
|
+
'width': field.size ? `${(field.size / 12) * 100}%` : '100%',
|
|
15152
|
+
'text-align': field.textAlign || 'left',
|
|
15153
|
+
'border-radius': '5px',
|
|
15154
|
+
'border-width': field.lineWidth ? `${field.lineWidth}px` : '1px',
|
|
15155
|
+
// 'border-style': field.lineStyle?.toLowerCase() || 'solid',
|
|
15156
|
+
'color': field.fontColor || '#000000',
|
|
15157
|
+
// 'border-color': field.color || '#EFF8FF',
|
|
15158
|
+
'margin-top': field.paddingTop ? `${field.paddingTop}px` : '0px',
|
|
15159
|
+
'margin-bottom': field.paddingBottom ? `${field.paddingBottom}px` : '10px'
|
|
15160
|
+
};
|
|
15161
|
+
return styles;
|
|
15162
|
+
}
|
|
15163
|
+
getLineStyles(field) {
|
|
15164
|
+
const styles = {
|
|
15165
|
+
'font-family': field.font || 'Helvetica Neue',
|
|
15166
|
+
'font-weight': field.fontWeight || '400',
|
|
15167
|
+
'font-size': field.fontSize || '14px',
|
|
15168
|
+
'width': field.size ? `${(field.size / 12) * 100}%` : '100%',
|
|
15169
|
+
'text-align': field.textAlign || 'left',
|
|
15170
|
+
'border-radius': '5px',
|
|
15171
|
+
'border-width': field.lineWidth ? `${field.lineWidth}px` : '1px',
|
|
15172
|
+
'border-style': field.lineStyle?.toLowerCase() || 'solid',
|
|
15173
|
+
'color': field.fontColor || '#000000',
|
|
15174
|
+
//'border-color': field.color || '#EFF8FF',
|
|
15175
|
+
'margin-top': field.paddingTop ? `${field.paddingTop}px` : '0px',
|
|
15176
|
+
'margin-bottom': field.paddingBottom ? `${field.paddingBottom}px` : '10px'
|
|
15177
|
+
};
|
|
15178
|
+
return styles;
|
|
15179
|
+
}
|
|
15180
|
+
// SKS13MAR25 table popup conformation based element add
|
|
15181
|
+
onClose() {
|
|
15182
|
+
this.isSelectTablePopup = false;
|
|
15183
|
+
this.addTable = false;
|
|
15184
|
+
this.addElement(this.currentType);
|
|
15185
|
+
}
|
|
15186
|
+
// SKS13MAR25 column element add inside a table
|
|
15187
|
+
addOnTable() {
|
|
15188
|
+
this.addTable = true;
|
|
15189
|
+
this.isSelectTablePopup = false;
|
|
15190
|
+
const elements = [...this.formBuilderService.getElements()];
|
|
15191
|
+
// Find the element and update its columns
|
|
15192
|
+
const index = elements.findIndex(el => el.id === this.selectedElement.id);
|
|
15193
|
+
const rowNum = this.formElements[index].columns ? this.formElements[index].columns?.length : 0;
|
|
15194
|
+
const unique_id = this.generateUiId();
|
|
15195
|
+
const tableElement = {
|
|
15196
|
+
label: `Header Lable ${rowNum}`,
|
|
15197
|
+
fieldName: `fieldName${rowNum}`,
|
|
15198
|
+
type: this.currentType,
|
|
15199
|
+
id: unique_id
|
|
15266
15200
|
};
|
|
15267
|
-
this.formBuilderService.
|
|
15268
|
-
|
|
15269
|
-
|
|
15270
|
-
|
|
15271
|
-
|
|
15272
|
-
|
|
15273
|
-
|
|
15274
|
-
|
|
15275
|
-
else {
|
|
15276
|
-
this.formBuilderService.newBook();
|
|
15277
|
-
}
|
|
15278
|
-
// AP-12MAR25 - Added to handle bookletId
|
|
15279
|
-
if (this.bookletId) {
|
|
15280
|
-
localStorage.setItem('unique_id', this.bookletId);
|
|
15281
|
-
}
|
|
15282
|
-
this.book = this.formBuilderService.getBook();
|
|
15283
|
-
this.formBuilderService.selectedElement$.subscribe(index => {
|
|
15284
|
-
const elements = this.formBuilderService.getElements();
|
|
15285
|
-
if (index >= 0) {
|
|
15286
|
-
this.selectedElement = elements[index];
|
|
15287
|
-
}
|
|
15288
|
-
// SKS19MAR25 for fieldMeta checking
|
|
15289
|
-
if (this.selectedElement?.type === 'Table') {
|
|
15290
|
-
this.selectedElement['fieldsMeta'] = typeof this.selectedElement.fieldsMeta === 'string' ? this.selectedElement.fieldsMeta : JSON.stringify(this.selectedElement['fieldsMeta'] || []);
|
|
15201
|
+
this.formBuilderService.addTableElement(tableElement, this.selectedFieldIndex);
|
|
15202
|
+
this.formElements = this.formBuilderService.getElements();
|
|
15203
|
+
// SKS19MAR25 fieldsmeta checking
|
|
15204
|
+
this.formElements = this.formElements.map(ele => {
|
|
15205
|
+
if (ele.type === 'Table') {
|
|
15206
|
+
ele.fieldsMeta = typeof ele.fieldsMeta === 'string'
|
|
15207
|
+
? ele.fieldsMeta
|
|
15208
|
+
: JSON.stringify(ele.fieldsMeta || []);
|
|
15291
15209
|
}
|
|
15292
|
-
|
|
15210
|
+
return ele;
|
|
15293
15211
|
});
|
|
15294
|
-
this.
|
|
15212
|
+
// this.addTableData(unique_id, fieldName)
|
|
15295
15213
|
}
|
|
15296
|
-
|
|
15297
|
-
|
|
15298
|
-
this.sections[section] = !this.sections[section];
|
|
15214
|
+
addTableData(fieldId, fieldName) {
|
|
15215
|
+
// this.formBuilderService.addTablefieldData(tableElement);
|
|
15299
15216
|
}
|
|
15300
|
-
|
|
15301
|
-
|
|
15217
|
+
columnSelected(event) {
|
|
15218
|
+
// console.log(event)
|
|
15219
|
+
// SKS19MAR25 table column update
|
|
15220
|
+
this.formBuilderService.setSelectedTableElement(this.selectedFieldIndex, event);
|
|
15302
15221
|
}
|
|
15303
|
-
|
|
15304
|
-
|
|
15305
|
-
|
|
15306
|
-
|
|
15307
|
-
|
|
15222
|
+
removeColumn(event) {
|
|
15223
|
+
// console.log(event)
|
|
15224
|
+
this.formBuilderService.removeSelectedTableElement(this.selectedFieldIndex, event);
|
|
15225
|
+
}
|
|
15226
|
+
// SKS25MAR25 image add
|
|
15227
|
+
async fileChangeEvent(index, event) {
|
|
15228
|
+
const file = event.target.files[0];
|
|
15229
|
+
if (file) {
|
|
15230
|
+
try {
|
|
15231
|
+
const imageData = await this.readFileAsDataURL(file);
|
|
15232
|
+
this.formElements[index].imageData = imageData;
|
|
15233
|
+
this.formElements[index].orgImageData = imageData;
|
|
15234
|
+
// Initialize logo size if not already set
|
|
15235
|
+
if (!this.formElements[index].imageSize) {
|
|
15236
|
+
this.formElements[index].imageSize = { width: 150, height: 150 };
|
|
15237
|
+
}
|
|
15238
|
+
await this.formBuilderService.elementUpdate(index, this.formElements[index]);
|
|
15308
15239
|
}
|
|
15309
|
-
|
|
15310
|
-
|
|
15240
|
+
catch (error) {
|
|
15241
|
+
console.error("Error reading file:", error);
|
|
15311
15242
|
}
|
|
15312
15243
|
}
|
|
15313
15244
|
}
|
|
15314
|
-
|
|
15315
|
-
|
|
15316
|
-
|
|
15317
|
-
|
|
15318
|
-
|
|
15319
|
-
|
|
15245
|
+
readFileAsDataURL(file) {
|
|
15246
|
+
return new Promise((resolve, reject) => {
|
|
15247
|
+
const reader = new FileReader();
|
|
15248
|
+
reader.onload = () => resolve(reader.result);
|
|
15249
|
+
reader.onerror = (error) => reject(error);
|
|
15250
|
+
reader.readAsDataURL(file);
|
|
15251
|
+
});
|
|
15320
15252
|
}
|
|
15321
|
-
|
|
15322
|
-
if (!this.bookletJSON || !this.bookletJSON.bookQuestionsMap) {
|
|
15323
|
-
|
|
15324
|
-
|
|
15325
|
-
|
|
15326
|
-
this.formElements = [];
|
|
15327
|
-
|
|
15328
|
-
|
|
15329
|
-
|
|
15330
|
-
|
|
15331
|
-
|
|
15332
|
-
|
|
15333
|
-
|
|
15334
|
-
|
|
15335
|
-
|
|
15336
|
-
|
|
15337
|
-
|
|
15338
|
-
|
|
15339
|
-
|
|
15340
|
-
|
|
15341
|
-
|
|
15342
|
-
|
|
15343
|
-
|
|
15344
|
-
|
|
15345
|
-
|
|
15346
|
-
|
|
15347
|
-
|
|
15348
|
-
|
|
15349
|
-
|
|
15253
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
|
|
15254
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { templateMode: "templateMode" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n <!-- Form Builder Section All Elements -->\n <div class=\"form-builder\">\n <!-- Basic Elements Toggle -->\n <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n <div class=\"head-elements\">Basic Elements</div>\n <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"sections.basic\">\n <ng-container *ngFor=\"let element of basicElements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n <div class=\"hover-label\">{{ element.label }}</div>\n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Advanced Elements Toggle -->\n <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n <div class=\"head-elements\">Advanced Elements</div>\n <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"sections.advanced\">\n <ng-container *ngFor=\"let element of advancedElements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\">\n <div class=\"hover-label\">{{ element.label }}</div>\n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n <!-- AP-08APR25 Add Templates Component -->\n <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n <!-- SKS10MAR25 footer version show -->\n <div class=\"sticky-footer-version\">\n {{version}}\n </div>\n </div>\n <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function -->\n <div class=\"form-preview\">\n <!-- AP-10MAR25 Heading -->\n <div class=\"field-container\"\n style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px\"\n (click)=\"selectHeading('Header')\">\n <div class=\"label-container\" style=\"padding: 10px;\">\n <div *ngIf=\"book?.records\">\n <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n </div>\n </div> \n </div>\n <!-- <div class=\"preview-header\">\n <button \n style=\"background: none; border: none; cursor: pointer; padding: 4px;\" title=\"Preview\">\n <span class=\"material-icons\" style=\"font-size: 18px; color: #EFF8FF;\">\n visibility\n </span>\n </button>\n </div> -->\n\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n <!-- TextBox -->\n <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n </div>\n </div>\n </div>\n\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"line-element\">\n <div></div>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"getLineStyles(field)\" />\n </div>\n\n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"getFontStyles(field)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Upload Image' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div>\n <div class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <img [src]=\"field.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Space Element -->\n <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\"></label>\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Boolean Element -->\n <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n ? field.questionText : 'Boolean'}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n\n <!-- Calendar -->\n <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Select Date'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP -12MAR25 Date -->\n <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Select Date'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP-21MAR25 Add Time element -->\n <!-- Time Field -->\n <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Time' }}</label>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP-28MAR25 DateTime -->\n <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Select Date & Time'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- Numbers -->\n <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- TextArea -->\n <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Enter your text'}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n </div>\n </div>\n </div>\n\n <!-- RichText -->\n <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Enter your text'}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n </div>\n </div>\n </div>\n\n <!-- Label -->\n <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Book -->\n <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n </div>\n </div>\n </div>\n\n <!-- File -->\n <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Upload File'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n </div>\n\n <!-- CheckBox -->\n <div *ngIf=\"field.type === 'Checkbox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n\n <div class=\"checkbox-options-container\">\n <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\">\n <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.value }}</label>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"radio-options-container\">\n <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Dropdown -->\n <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{ option.value\n }} </option>\n </select>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <!-- AP-06MAR25 -->\n <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [apiMeta]=\"field.subText\"\n [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n\n <!-- List -->\n <!-- AP-06MAR25 - List data show-->\n <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"text\" class=\"custom-input\" placeholder=\"Search...\" [readonly]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\" [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n </ng-container>\n </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n <div class=\"dialog-box\">\n <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n <p>These element want to add a table</p>\n <div class=\"button-container-fb\">\n <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">Yes</button>\n <button class=\"no-btn-fb\" (click)=\"onClose()\">No</button>\n </div>\n </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:19px;height:19px;margin-top:-5px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin-top:-10px;background-color:#d7edff;margin-right:-10px;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s ease-in-out,visibility .1s ease-in-out}.drag-dot{height:13px}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}\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.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: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "NxtTableEmit"] }, { kind: "component", type: BookletComponent, selector: "lib-booklet", inputs: ["bookletId", "serv", "tkn", "bookletJSON", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "dataBind"], outputs: ["handleBookletActionEvent", "handlePage", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }] });
|
|
15255
|
+
}
|
|
15256
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
|
|
15257
|
+
type: Component,
|
|
15258
|
+
args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n <!-- Form Builder Section All Elements -->\n <div class=\"form-builder\">\n <!-- Basic Elements Toggle -->\n <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n <div class=\"head-elements\">Basic Elements</div>\n <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"sections.basic\">\n <ng-container *ngFor=\"let element of basicElements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n <div class=\"hover-label\">{{ element.label }}</div>\n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Advanced Elements Toggle -->\n <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n <div class=\"head-elements\">Advanced Elements</div>\n <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"sections.advanced\">\n <ng-container *ngFor=\"let element of advancedElements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\">\n <div class=\"hover-label\">{{ element.label }}</div>\n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n <!-- AP-08APR25 Add Templates Component -->\n <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n <!-- SKS10MAR25 footer version show -->\n <div class=\"sticky-footer-version\">\n {{version}}\n </div>\n </div>\n <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function -->\n <div class=\"form-preview\">\n <!-- AP-10MAR25 Heading -->\n <div class=\"field-container\"\n style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px\"\n (click)=\"selectHeading('Header')\">\n <div class=\"label-container\" style=\"padding: 10px;\">\n <div *ngIf=\"book?.records\">\n <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n </div>\n </div> \n </div>\n <!-- <div class=\"preview-header\">\n <button \n style=\"background: none; border: none; cursor: pointer; padding: 4px;\" title=\"Preview\">\n <span class=\"material-icons\" style=\"font-size: 18px; color: #EFF8FF;\">\n visibility\n </span>\n </button>\n </div> -->\n\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n <!-- TextBox -->\n <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n </div>\n </div>\n </div>\n\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"line-element\">\n <div></div>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"getLineStyles(field)\" />\n </div>\n\n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"getFontStyles(field)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Upload Image' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div>\n <div class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <img [src]=\"field.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Space Element -->\n <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\"></label>\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Boolean Element -->\n <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n ? field.questionText : 'Boolean'}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n\n <!-- Calendar -->\n <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Select Date'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP -12MAR25 Date -->\n <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Select Date'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP-21MAR25 Add Time element -->\n <!-- Time Field -->\n <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Time' }}</label>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP-28MAR25 DateTime -->\n <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Select Date & Time'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- Numbers -->\n <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- TextArea -->\n <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Enter your text'}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n </div>\n </div>\n </div>\n\n <!-- RichText -->\n <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Enter your text'}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n </div>\n </div>\n </div>\n\n <!-- Label -->\n <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Book -->\n <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n </div>\n </div>\n </div>\n\n <!-- File -->\n <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Upload File'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n </div>\n\n <!-- CheckBox -->\n <div *ngIf=\"field.type === 'Checkbox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n\n <div class=\"checkbox-options-container\">\n <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\">\n <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.value }}</label>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"radio-options-container\">\n <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Dropdown -->\n <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{ option.value\n }} </option>\n </select>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <!-- AP-06MAR25 -->\n <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [apiMeta]=\"field.subText\"\n [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n\n <!-- List -->\n <!-- AP-06MAR25 - List data show-->\n <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"text\" class=\"custom-input\" placeholder=\"Search...\" [readonly]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\" [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n </ng-container>\n </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n <div class=\"dialog-box\">\n <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n <p>These element want to add a table</p>\n <div class=\"button-container-fb\">\n <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">Yes</button>\n <button class=\"no-btn-fb\" (click)=\"onClose()\">No</button>\n </div>\n </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:19px;height:19px;margin-top:-5px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin-top:-10px;background-color:#d7edff;margin-right:-10px;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s ease-in-out,visibility .1s ease-in-out}.drag-dot{height:13px}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}\n"] }]
|
|
15259
|
+
}], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { bookletJSON: [{
|
|
15260
|
+
type: Input
|
|
15261
|
+
}], bookletId: [{
|
|
15262
|
+
type: Input
|
|
15263
|
+
}], templateMode: [{
|
|
15264
|
+
type: Output
|
|
15265
|
+
}] } });
|
|
15266
|
+
|
|
15267
|
+
// AP-11APR25
|
|
15268
|
+
class TemplateService {
|
|
15269
|
+
templates = [
|
|
15270
|
+
{
|
|
15271
|
+
templateId: 1,
|
|
15272
|
+
templateName: 'Invoice',
|
|
15273
|
+
content: 'Invoice template with customer details',
|
|
15274
|
+
elements: [
|
|
15275
|
+
{
|
|
15276
|
+
type: 'Text',
|
|
15277
|
+
questionText: 'Customer Name',
|
|
15278
|
+
style: { showLabel: true },
|
|
15279
|
+
size: 12
|
|
15280
|
+
},
|
|
15281
|
+
{
|
|
15282
|
+
type: 'Date',
|
|
15283
|
+
questionText: 'Invoice Date',
|
|
15284
|
+
style: { showLabel: true }
|
|
15285
|
+
},
|
|
15286
|
+
{
|
|
15287
|
+
type: 'Table',
|
|
15288
|
+
questionText: 'Items',
|
|
15289
|
+
fieldsMeta: JSON.stringify([
|
|
15290
|
+
{
|
|
15291
|
+
label: 'Item',
|
|
15292
|
+
fieldName: 'item',
|
|
15293
|
+
type: 'Text',
|
|
15294
|
+
uniqueIdentifier: 'temp1'
|
|
15295
|
+
},
|
|
15296
|
+
{
|
|
15297
|
+
label: 'Quantity',
|
|
15298
|
+
fieldName: 'qty',
|
|
15299
|
+
type: 'Number',
|
|
15300
|
+
uniqueIdentifier: 'temp2'
|
|
15301
|
+
}
|
|
15302
|
+
]),
|
|
15303
|
+
tableConfig: {
|
|
15304
|
+
isNosIndicator: true,
|
|
15305
|
+
addInlineRecord: true,
|
|
15306
|
+
isPagination: true
|
|
15350
15307
|
}
|
|
15351
|
-
}
|
|
15352
|
-
|
|
15353
|
-
}
|
|
15354
|
-
|
|
15355
|
-
|
|
15356
|
-
|
|
15357
|
-
|
|
15358
|
-
|
|
15359
|
-
|
|
15360
|
-
|
|
15361
|
-
|
|
15362
|
-
|
|
15363
|
-
|
|
15364
|
-
//selectedIndex: number | null = null;
|
|
15365
|
-
selectedFieldIndex = null; // element is cleared
|
|
15366
|
-
selectHeading(event) {
|
|
15367
|
-
this.formBuilderService.selectHeading(event); //AP-10MAR25 Updates the selected heading in the service
|
|
15368
|
-
this.book = this.formBuilderService.getBook(); //AP-10MAR25 Retrieves the updated book/form data
|
|
15369
|
-
}
|
|
15370
|
-
// AP-17APR25 generateUiId
|
|
15371
|
-
generateUiId() {
|
|
15372
|
-
return this.formBuilderService.addElementWithId();
|
|
15373
|
-
}
|
|
15374
|
-
addElement(type) {
|
|
15375
|
-
const unique_id = this.generateUiId();
|
|
15376
|
-
this.currentType = type;
|
|
15377
|
-
if (this.selectedElement?.type === 'Table' && this.addTable) {
|
|
15378
|
-
this.isSelectTablePopup = true;
|
|
15379
|
-
}
|
|
15380
|
-
else {
|
|
15381
|
-
const newElement = {
|
|
15382
|
-
id: unique_id,
|
|
15383
|
-
uid: unique_id,
|
|
15384
|
-
type,
|
|
15385
|
-
name: null,
|
|
15386
|
-
questionText: null,
|
|
15387
|
-
question: null,
|
|
15388
|
-
helpText: null,
|
|
15389
|
-
errorMessage: null,
|
|
15390
|
-
isReadOnly: false,
|
|
15391
|
-
isHidden: false,
|
|
15392
|
-
required: false,
|
|
15393
|
-
referenceField: null,
|
|
15394
|
-
additionalRichContent: null,
|
|
15395
|
-
groupName: null,
|
|
15396
|
-
isDateBackward: false,
|
|
15397
|
-
title: null,
|
|
15398
|
-
subTitle: null,
|
|
15399
|
-
size: 12,
|
|
15400
|
-
isDateForward: false,
|
|
15401
|
-
isOptional: false,
|
|
15402
|
-
isTitle: false,
|
|
15403
|
-
nextQuestion: null,
|
|
15404
|
-
allowedFileExtensions: null,
|
|
15405
|
-
questionNumber: this.formBuilderService.getElements().length + 1,
|
|
15406
|
-
order: this.formElements.length + 1,
|
|
15407
|
-
questionBookId: this.bookletId,
|
|
15408
|
-
parentQuestion: null,
|
|
15409
|
-
fieldsMeta: [],
|
|
15410
|
-
recordTypeName: null,
|
|
15411
|
-
recordTypeId: null,
|
|
15412
|
-
trackingId: null,
|
|
15413
|
-
dateText: null,
|
|
15414
|
-
timeText: null,
|
|
15415
|
-
recordId: null,
|
|
15416
|
-
qbReference: null,
|
|
15417
|
-
qbReferenceQuestions: null,
|
|
15418
|
-
questionBookSubTitle: null,
|
|
15419
|
-
style: {
|
|
15420
|
-
labelClass: null,
|
|
15421
|
-
labelStyle: null,
|
|
15422
|
-
labelValueStyle: null,
|
|
15423
|
-
inputClass: null,
|
|
15424
|
-
inputStyle: null,
|
|
15425
|
-
showLabel: true,
|
|
15426
|
-
bookStyle: null,
|
|
15427
|
-
direction: 'ltr',
|
|
15428
|
-
questionStyle: null,
|
|
15308
|
+
}
|
|
15309
|
+
]
|
|
15310
|
+
},
|
|
15311
|
+
{
|
|
15312
|
+
templateId: 2,
|
|
15313
|
+
templateName: 'Registration',
|
|
15314
|
+
content: 'User registration form template',
|
|
15315
|
+
elements: [
|
|
15316
|
+
{
|
|
15317
|
+
type: 'Text',
|
|
15318
|
+
questionText: 'Full Name',
|
|
15319
|
+
style: { showLabel: true },
|
|
15320
|
+
size: 12
|
|
15429
15321
|
},
|
|
15430
|
-
|
|
15431
|
-
|
|
15432
|
-
|
|
15433
|
-
|
|
15434
|
-
|
|
15435
|
-
|
|
15436
|
-
|
|
15437
|
-
|
|
15438
|
-
|
|
15439
|
-
|
|
15440
|
-
isDeleteRow: true,
|
|
15441
|
-
isEditRow: true,
|
|
15442
|
-
searchBar: true,
|
|
15443
|
-
isButtons: true,
|
|
15444
|
-
itemsPerPage: 10,
|
|
15445
|
-
} : null,
|
|
15446
|
-
};
|
|
15447
|
-
this.formBuilderService.addElement(newElement);
|
|
15448
|
-
this.formElements = this.formBuilderService.getElements();
|
|
15449
|
-
// SKS19MAR25 fieldsmeta check
|
|
15450
|
-
this.formElements = this.formElements.map(ele => {
|
|
15451
|
-
if (ele.type === 'Table') {
|
|
15452
|
-
ele.fieldsMeta = typeof ele.fieldsMeta === 'string'
|
|
15453
|
-
? ele.fieldsMeta
|
|
15454
|
-
: JSON.stringify(ele.fieldsMeta || []);
|
|
15322
|
+
{
|
|
15323
|
+
type: 'Text',
|
|
15324
|
+
questionText: 'Email Address',
|
|
15325
|
+
style: { showLabel: true },
|
|
15326
|
+
size: 12
|
|
15327
|
+
},
|
|
15328
|
+
{
|
|
15329
|
+
type: 'Date',
|
|
15330
|
+
questionText: 'Date of Birth',
|
|
15331
|
+
style: { showLabel: true }
|
|
15455
15332
|
}
|
|
15456
|
-
|
|
15457
|
-
|
|
15458
|
-
|
|
15333
|
+
]
|
|
15334
|
+
},
|
|
15335
|
+
{
|
|
15336
|
+
templateId: 3,
|
|
15337
|
+
templateName: 'Employee Detail',
|
|
15338
|
+
content: 'Template to capture employee details',
|
|
15339
|
+
elements: [
|
|
15340
|
+
{
|
|
15341
|
+
type: 'Text',
|
|
15342
|
+
questionText: 'Employee ID',
|
|
15343
|
+
style: { showLabel: true },
|
|
15344
|
+
size: 6
|
|
15345
|
+
},
|
|
15346
|
+
{
|
|
15347
|
+
type: 'Text',
|
|
15348
|
+
questionText: 'Employee Name',
|
|
15349
|
+
style: { showLabel: true },
|
|
15350
|
+
size: 6
|
|
15351
|
+
},
|
|
15352
|
+
{
|
|
15353
|
+
type: 'Table',
|
|
15354
|
+
questionText: 'Previous Work Experience',
|
|
15355
|
+
fieldsMeta: JSON.stringify([
|
|
15356
|
+
{
|
|
15357
|
+
label: 'Company Name',
|
|
15358
|
+
fieldName: 'company',
|
|
15359
|
+
type: 'Text',
|
|
15360
|
+
uniqueIdentifier: 'emp1'
|
|
15361
|
+
},
|
|
15362
|
+
{
|
|
15363
|
+
label: 'Years Worked',
|
|
15364
|
+
fieldName: 'years',
|
|
15365
|
+
type: 'Number',
|
|
15366
|
+
uniqueIdentifier: 'emp2'
|
|
15367
|
+
}
|
|
15368
|
+
]),
|
|
15369
|
+
tableConfig: {
|
|
15370
|
+
isNosIndicator: false,
|
|
15371
|
+
addInlineRecord: true,
|
|
15372
|
+
isPagination: true
|
|
15373
|
+
}
|
|
15374
|
+
}
|
|
15375
|
+
]
|
|
15376
|
+
},
|
|
15377
|
+
{
|
|
15378
|
+
templateId: 4,
|
|
15379
|
+
templateName: 'Feedback',
|
|
15380
|
+
content: 'Feedback form for services or products',
|
|
15381
|
+
elements: [
|
|
15382
|
+
{
|
|
15383
|
+
type: 'Text',
|
|
15384
|
+
questionText: 'Your Name',
|
|
15385
|
+
style: { showLabel: true },
|
|
15386
|
+
size: 12
|
|
15387
|
+
},
|
|
15388
|
+
{
|
|
15389
|
+
type: 'Text',
|
|
15390
|
+
questionText: 'Feedback',
|
|
15391
|
+
style: { showLabel: true },
|
|
15392
|
+
size: 12
|
|
15393
|
+
},
|
|
15394
|
+
{
|
|
15395
|
+
type: 'Table',
|
|
15396
|
+
questionText: 'Service Ratings',
|
|
15397
|
+
fieldsMeta: JSON.stringify([
|
|
15398
|
+
{
|
|
15399
|
+
label: 'Service',
|
|
15400
|
+
fieldName: 'service',
|
|
15401
|
+
type: 'Text',
|
|
15402
|
+
uniqueIdentifier: 'fb1'
|
|
15403
|
+
},
|
|
15404
|
+
{
|
|
15405
|
+
label: 'Rating (1-5)',
|
|
15406
|
+
fieldName: 'rating',
|
|
15407
|
+
type: 'Number',
|
|
15408
|
+
uniqueIdentifier: 'fb2'
|
|
15409
|
+
}
|
|
15410
|
+
]),
|
|
15411
|
+
tableConfig: {
|
|
15412
|
+
isNosIndicator: false,
|
|
15413
|
+
addInlineRecord: true,
|
|
15414
|
+
isPagination: false
|
|
15415
|
+
}
|
|
15416
|
+
}
|
|
15417
|
+
]
|
|
15459
15418
|
}
|
|
15419
|
+
];
|
|
15420
|
+
unique_id;
|
|
15421
|
+
book;
|
|
15422
|
+
formElements = [];
|
|
15423
|
+
constructor() {
|
|
15424
|
+
this.newBook();
|
|
15460
15425
|
}
|
|
15461
|
-
|
|
15462
|
-
|
|
15463
|
-
const defaultData = {
|
|
15464
|
-
endpoint: null,
|
|
15465
|
-
variable: null,
|
|
15466
|
-
field: null,
|
|
15467
|
-
defaultField: null,
|
|
15468
|
-
sourceQuestionId: null,
|
|
15469
|
-
valueField: null,
|
|
15470
|
-
labelField: null,
|
|
15471
|
-
isDependentField: false,
|
|
15472
|
-
dependentValue: null,
|
|
15473
|
-
queryField: null,
|
|
15474
|
-
queryValue: null,
|
|
15475
|
-
queryValueReference: null,
|
|
15476
|
-
uniqueKey: null,
|
|
15477
|
-
};
|
|
15478
|
-
const isEmpty = Object.values(defaultData).every(val => val === null || val === false);
|
|
15479
|
-
return isEmpty ? null : defaultData;
|
|
15480
|
-
}
|
|
15481
|
-
// Remove an element by index
|
|
15482
|
-
removeElement(field, index) {
|
|
15483
|
-
this.formBuilderService.removeElementComponent(field.id);
|
|
15484
|
-
this.formElements = this.formBuilderService.getElements();
|
|
15485
|
-
// SKS19MAR25 fieldsmeta check
|
|
15486
|
-
this.formElements = this.formElements.map(ele => {
|
|
15487
|
-
if (ele.type === 'Table') {
|
|
15488
|
-
ele.fieldsMeta = typeof ele.fieldsMeta === 'string'
|
|
15489
|
-
? ele.fieldsMeta
|
|
15490
|
-
: JSON.stringify(ele.fieldsMeta || []);
|
|
15491
|
-
}
|
|
15492
|
-
return ele;
|
|
15493
|
-
});
|
|
15494
|
-
}
|
|
15495
|
-
onDragStart(event, index) {
|
|
15496
|
-
this.draggedIndex = index;
|
|
15497
|
-
event.dataTransfer?.setData('text/plain', index.toString());
|
|
15498
|
-
}
|
|
15499
|
-
// Allow dropping by preventing default
|
|
15500
|
-
onDragOver(event, index) {
|
|
15501
|
-
event.preventDefault();
|
|
15502
|
-
}
|
|
15503
|
-
// Handle drop event
|
|
15504
|
-
onDrop(event, dropIndex) {
|
|
15505
|
-
event.preventDefault();
|
|
15506
|
-
if (this.draggedIndex === null || this.draggedIndex === dropIndex)
|
|
15507
|
-
return;
|
|
15508
|
-
const draggedItem = this.formElements[this.draggedIndex];
|
|
15509
|
-
// Remove dragged item from old position and insert it in new position
|
|
15510
|
-
this.formElements.splice(this.draggedIndex, 1);
|
|
15511
|
-
this.formElements.splice(dropIndex, 0, draggedItem);
|
|
15512
|
-
//AP-28MAR25 Update questionNumber dynamically based on new order
|
|
15513
|
-
this.formElements.forEach((element, index) => {
|
|
15514
|
-
element.questionNumber = index + 1;
|
|
15515
|
-
});
|
|
15516
|
-
// Reset dragged index
|
|
15517
|
-
this.draggedIndex = null;
|
|
15518
|
-
// Notify service about the update
|
|
15519
|
-
this.formBuilderService.updateElementsOrder(this.formElements);
|
|
15520
|
-
}
|
|
15521
|
-
toggleBoolean(field) {
|
|
15522
|
-
field.boolean = !field.boolean;
|
|
15426
|
+
getTemplates() {
|
|
15427
|
+
return this.templates;
|
|
15523
15428
|
}
|
|
15524
|
-
|
|
15525
|
-
const
|
|
15526
|
-
|
|
15527
|
-
|
|
15528
|
-
|
|
15529
|
-
|
|
15530
|
-
|
|
15531
|
-
|
|
15532
|
-
|
|
15533
|
-
|
|
15534
|
-
|
|
15535
|
-
|
|
15536
|
-
|
|
15537
|
-
|
|
15429
|
+
initializeElementFromTemplate(templateElement, index) {
|
|
15430
|
+
const unique_id = v4();
|
|
15431
|
+
const baseElement = {
|
|
15432
|
+
id: unique_id,
|
|
15433
|
+
uid: unique_id,
|
|
15434
|
+
type: templateElement.type,
|
|
15435
|
+
name: null,
|
|
15436
|
+
questionText: templateElement.questionText || null,
|
|
15437
|
+
question: templateElement.question || null,
|
|
15438
|
+
helpText: null,
|
|
15439
|
+
errorMessage: null,
|
|
15440
|
+
isReadOnly: false,
|
|
15441
|
+
isHidden: false,
|
|
15442
|
+
required: false,
|
|
15443
|
+
referenceField: null,
|
|
15444
|
+
additionalRichContent: null,
|
|
15445
|
+
groupName: null,
|
|
15446
|
+
isDateBackward: false,
|
|
15447
|
+
title: null,
|
|
15448
|
+
subTitle: null,
|
|
15449
|
+
size: templateElement.size || 12,
|
|
15450
|
+
isDateForward: false,
|
|
15451
|
+
isOptional: false,
|
|
15452
|
+
isTitle: false,
|
|
15453
|
+
nextQuestion: null,
|
|
15454
|
+
allowedFileExtensions: null,
|
|
15455
|
+
questionNumber: index + 1,
|
|
15456
|
+
order: index + 1,
|
|
15457
|
+
style: {
|
|
15458
|
+
labelClass: null,
|
|
15459
|
+
labelStyle: null,
|
|
15460
|
+
labelValueStyle: null,
|
|
15461
|
+
inputClass: null,
|
|
15462
|
+
inputStyle: null,
|
|
15463
|
+
showLabel: templateElement?.style?.showLabel ?? true,
|
|
15464
|
+
bookStyle: null,
|
|
15465
|
+
direction: 'ltr',
|
|
15466
|
+
questionStyle: null,
|
|
15467
|
+
},
|
|
15468
|
+
subText: {
|
|
15469
|
+
endpoint: null,
|
|
15470
|
+
variable: null,
|
|
15471
|
+
field: null,
|
|
15472
|
+
defaultField: null,
|
|
15473
|
+
sourceQuestionId: null,
|
|
15474
|
+
valueField: null,
|
|
15475
|
+
labelField: null,
|
|
15476
|
+
isDependentField: false,
|
|
15477
|
+
dependentValue: null,
|
|
15478
|
+
queryField: null,
|
|
15479
|
+
queryValue: null,
|
|
15480
|
+
queryValueReference: null,
|
|
15481
|
+
uniqueKey: null,
|
|
15482
|
+
},
|
|
15483
|
+
imageData: null,
|
|
15484
|
+
boolean: false,
|
|
15485
|
+
options: templateElement.options
|
|
15486
|
+
? this.initializeOptions(templateElement.options)
|
|
15487
|
+
: null,
|
|
15488
|
+
imageSize: templateElement.type === 'Image' ? { width: 150, height: 150 } : null,
|
|
15489
|
+
tableConfig: templateElement.type === 'Table' ? {
|
|
15490
|
+
isNosIndicator: true,
|
|
15491
|
+
addInlineRecord: true,
|
|
15492
|
+
isPagination: true,
|
|
15493
|
+
actionButton: true,
|
|
15494
|
+
isDeleteRow: true,
|
|
15495
|
+
isEditRow: true,
|
|
15496
|
+
searchBar: true,
|
|
15497
|
+
isButtons: true,
|
|
15498
|
+
itemsPerPage: 10,
|
|
15499
|
+
} : null,
|
|
15500
|
+
fieldsMeta: templateElement.fieldsMeta
|
|
15501
|
+
? this.initializeFieldsMeta(templateElement.fieldsMeta)
|
|
15502
|
+
: null,
|
|
15538
15503
|
};
|
|
15539
|
-
return
|
|
15504
|
+
return { ...baseElement, ...templateElement };
|
|
15540
15505
|
}
|
|
15541
|
-
|
|
15542
|
-
|
|
15543
|
-
|
|
15544
|
-
|
|
15545
|
-
|
|
15546
|
-
'width': field.size ? `${(field.size / 12) * 100}%` : '100%',
|
|
15547
|
-
'text-align': field.textAlign || 'left',
|
|
15548
|
-
'border-radius': '5px',
|
|
15549
|
-
'border-width': field.lineWidth ? `${field.lineWidth}px` : '1px',
|
|
15550
|
-
'border-style': field.lineStyle?.toLowerCase() || 'solid',
|
|
15551
|
-
'color': field.fontColor || '#000000',
|
|
15552
|
-
//'border-color': field.color || '#EFF8FF',
|
|
15553
|
-
'margin-top': field.paddingTop ? `${field.paddingTop}px` : '0px',
|
|
15554
|
-
'margin-bottom': field.paddingBottom ? `${field.paddingBottom}px` : '10px'
|
|
15555
|
-
};
|
|
15556
|
-
return styles;
|
|
15506
|
+
initializeOptions(options) {
|
|
15507
|
+
return options.map(option => ({
|
|
15508
|
+
...option,
|
|
15509
|
+
id: v4()
|
|
15510
|
+
}));
|
|
15557
15511
|
}
|
|
15558
|
-
|
|
15559
|
-
|
|
15560
|
-
|
|
15561
|
-
|
|
15562
|
-
|
|
15512
|
+
initializeFieldsMeta(fieldsMeta) {
|
|
15513
|
+
try {
|
|
15514
|
+
const parsed = JSON.parse(fieldsMeta);
|
|
15515
|
+
return parsed.map((field) => ({
|
|
15516
|
+
...field,
|
|
15517
|
+
uniqueIdentifier: v4()
|
|
15518
|
+
}));
|
|
15519
|
+
}
|
|
15520
|
+
catch (e) {
|
|
15521
|
+
console.error('Error parsing fieldsMeta:', e);
|
|
15522
|
+
return [];
|
|
15523
|
+
}
|
|
15563
15524
|
}
|
|
15564
|
-
//
|
|
15565
|
-
|
|
15566
|
-
this.
|
|
15567
|
-
|
|
15568
|
-
|
|
15569
|
-
|
|
15570
|
-
|
|
15571
|
-
|
|
15572
|
-
|
|
15573
|
-
|
|
15574
|
-
|
|
15575
|
-
fieldName: `fieldName${rowNum}`,
|
|
15576
|
-
type: this.currentType,
|
|
15577
|
-
id: unique_id
|
|
15578
|
-
};
|
|
15579
|
-
this.formBuilderService.addTableElement(tableElement, this.selectedFieldIndex);
|
|
15580
|
-
this.formElements = this.formBuilderService.getElements();
|
|
15581
|
-
// SKS19MAR25 fieldsmeta checking
|
|
15582
|
-
this.formElements = this.formElements.map(ele => {
|
|
15583
|
-
if (ele.type === 'Table') {
|
|
15584
|
-
ele.fieldsMeta = typeof ele.fieldsMeta === 'string'
|
|
15585
|
-
? ele.fieldsMeta
|
|
15586
|
-
: JSON.stringify(ele.fieldsMeta || []);
|
|
15525
|
+
// In TemplateService
|
|
15526
|
+
download() {
|
|
15527
|
+
if (!this.formElements || !Array.isArray(this.formElements)) {
|
|
15528
|
+
console.error('Invalid formElements');
|
|
15529
|
+
return null;
|
|
15530
|
+
}
|
|
15531
|
+
// Clean elements for export (same as FormBuilderService)
|
|
15532
|
+
this.formElements.forEach(element => {
|
|
15533
|
+
// Remove qbReferenceQuestions for 'book' type
|
|
15534
|
+
if (element.type === 'book') {
|
|
15535
|
+
delete element.qbReferenceQuestions;
|
|
15587
15536
|
}
|
|
15588
|
-
|
|
15589
|
-
|
|
15590
|
-
|
|
15591
|
-
|
|
15592
|
-
|
|
15593
|
-
|
|
15594
|
-
|
|
15595
|
-
|
|
15596
|
-
|
|
15597
|
-
|
|
15598
|
-
|
|
15599
|
-
|
|
15600
|
-
|
|
15601
|
-
|
|
15602
|
-
|
|
15603
|
-
|
|
15604
|
-
|
|
15605
|
-
async fileChangeEvent(index, event) {
|
|
15606
|
-
const file = event.target.files[0];
|
|
15607
|
-
if (file) {
|
|
15608
|
-
try {
|
|
15609
|
-
const imageData = await this.readFileAsDataURL(file);
|
|
15610
|
-
this.formElements[index].imageData = imageData;
|
|
15611
|
-
this.formElements[index].orgImageData = imageData;
|
|
15612
|
-
// Initialize logo size if not already set
|
|
15613
|
-
if (!this.formElements[index].imageSize) {
|
|
15614
|
-
this.formElements[index].imageSize = { width: 150, height: 150 };
|
|
15537
|
+
// Process subText to match FormBuilderService's format
|
|
15538
|
+
if (element.subText) {
|
|
15539
|
+
try {
|
|
15540
|
+
// Convert subText to object if string
|
|
15541
|
+
element.subText = typeof element.subText === 'string'
|
|
15542
|
+
? JSON.parse(element.subText)
|
|
15543
|
+
: { ...element.subText };
|
|
15544
|
+
// Convert field to array if string
|
|
15545
|
+
if (typeof element.subText.field === 'string') {
|
|
15546
|
+
element.subText.field = element.subText.field.split(',').map(i => i.trim());
|
|
15547
|
+
}
|
|
15548
|
+
// Stringify subText for storage
|
|
15549
|
+
element.subText = JSON.stringify(element.subText);
|
|
15550
|
+
}
|
|
15551
|
+
catch (e) {
|
|
15552
|
+
console.error('Error processing subText:', e);
|
|
15553
|
+
element.subText = '{}';
|
|
15615
15554
|
}
|
|
15616
|
-
await this.formBuilderService.elementUpdate(index, this.formElements[index]);
|
|
15617
|
-
}
|
|
15618
|
-
catch (error) {
|
|
15619
|
-
console.error("Error reading file:", error);
|
|
15620
15555
|
}
|
|
15556
|
+
});
|
|
15557
|
+
// Update book structure (same as FormBuilderService)
|
|
15558
|
+
if (!this.book)
|
|
15559
|
+
this.newBook(); // Ensure book exists
|
|
15560
|
+
if (this.book.bookQuestionsMap && this.unique_id) {
|
|
15561
|
+
this.book.bookQuestionsMap[this.unique_id].subQuestions = this.formElements;
|
|
15621
15562
|
}
|
|
15622
|
-
|
|
15623
|
-
|
|
15624
|
-
|
|
15625
|
-
|
|
15626
|
-
|
|
15627
|
-
|
|
15628
|
-
|
|
15563
|
+
// Prepare sqOptions (same format as FormBuilderService)
|
|
15564
|
+
const sqOptions = {};
|
|
15565
|
+
this.formElements.forEach(element => {
|
|
15566
|
+
if (['Dropdown', 'Radio', 'Checkbox'].includes(element.type)) {
|
|
15567
|
+
sqOptions[element.id] = {
|
|
15568
|
+
...element,
|
|
15569
|
+
options: element.options?.map(opt => ({
|
|
15570
|
+
...opt,
|
|
15571
|
+
// Ensure UUIDs are preserved
|
|
15572
|
+
id: opt.id || v4(),
|
|
15573
|
+
uniqueIdentifier: opt.uniqueIdentifier || v4()
|
|
15574
|
+
})) || []
|
|
15575
|
+
};
|
|
15576
|
+
}
|
|
15629
15577
|
});
|
|
15578
|
+
this.book.sqOptions = sqOptions;
|
|
15579
|
+
return JSON.parse(JSON.stringify(this.book)); // Return clean copy
|
|
15630
15580
|
}
|
|
15631
|
-
//
|
|
15632
|
-
|
|
15633
|
-
|
|
15634
|
-
|
|
15635
|
-
|
|
15636
|
-
|
|
15637
|
-
|
|
15638
|
-
|
|
15639
|
-
|
|
15581
|
+
// Add the newBook() method if missing
|
|
15582
|
+
newBook() {
|
|
15583
|
+
this.unique_id = v4();
|
|
15584
|
+
this.book = {
|
|
15585
|
+
bookQuestionsMap: {
|
|
15586
|
+
[this.unique_id]: {
|
|
15587
|
+
subQuestions: [],
|
|
15588
|
+
type: 'Book'
|
|
15589
|
+
}
|
|
15590
|
+
},
|
|
15591
|
+
questionbook: {
|
|
15592
|
+
action: JSON.stringify([
|
|
15593
|
+
{ name: "Cancel", eventtoemit: "close" },
|
|
15594
|
+
{ name: "Save", eventtoemit: "submit", method: "POST" }
|
|
15595
|
+
])
|
|
15596
|
+
},
|
|
15597
|
+
records: [{
|
|
15598
|
+
id: this.unique_id,
|
|
15599
|
+
title: 'Untitled Template',
|
|
15600
|
+
subQuestions: []
|
|
15601
|
+
}]
|
|
15602
|
+
};
|
|
15640
15603
|
}
|
|
15641
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
|
15642
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { templateMode: "templateMode" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n <!-- Form Builder Section All Elements -->\n <div class=\"form-builder\">\n <!-- Basic Elements Toggle -->\n <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n <div class=\"head-elements\">Basic Elements</div>\n <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"sections.basic\">\n <ng-container *ngFor=\"let element of basicElements\">\n <div class=\"element\" [class.disabled]=\"isElementDisabled(element.type)\"\n (click)=\"!isElementDisabled(element.type) && addElement(element.type)\"\n [draggable]=\"!isElementDisabled(element.type)\" [matTooltip]=\"isElementDisabled(element.type) ? 'This element is not supported when a ' + (selectedElement?.type || 'certain element') + ' is present' : null\">\n <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n <div class=\"hover-label\">{{ element.label }}</div>\n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Advanced Elements Toggle -->\n <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n <div class=\"head-elements\">Advanced Elements</div>\n <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"sections.advanced\">\n <ng-container *ngFor=\"let element of advancedElements\">\n <div class=\"element\" [class.disabled]=\"isElementDisabled(element.type)\"\n (click)=\"!isElementDisabled(element.type) && addElement(element.type)\"\n [draggable]=\"!isElementDisabled(element.type)\" [matTooltip]=\"isElementDisabled(element.type) ? 'This element is not supported when a ' + (selectedElement?.type || 'certain element') + ' is present' : null\">\n <img src=\"../assets/icons/{{ element.img }}.svg\">\n <div class=\"hover-label\">{{ element.label }}</div>\n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n <!-- AP-08APR25 Add Templates Component -->\n <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n\n <!-- SKS10MAR25 footer version show -->\n <div class=\"sticky-footer-version\">\n {{version}}\n </div>\n </div>\n <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function -->\n <div class=\"form-preview\">\n <!-- AP-10MAR25 Heading -->\n <div class=\"field-container\"\n style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px\"\n (click)=\"selectHeading('Header')\">\n <div class=\"label-container\" style=\"padding: 10px;\">\n <div *ngIf=\"book?.records\">\n <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n </div>\n </div>\n </div>\n\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n <!-- TextBox -->\n <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n </div>\n </div>\n </div>\n\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"line-element\">\n <div></div>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"getLineStyles(field)\" />\n </div>\n\n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"getFontStyles(field)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Upload Image' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div>\n <div class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <img [src]=\"field.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Space Element -->\n <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\"></label>\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Boolean Element -->\n <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n ? field.questionText : 'Boolean'}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n\n <!-- Calendar -->\n <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Select Date'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP -12MAR25 Date -->\n <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Select Date'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP-21MAR25 Add Time element -->\n <!-- Time Field -->\n <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Time' }}</label>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP-28MAR25 DateTime -->\n <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Select Date & Time'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- Numbers -->\n <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- TextArea -->\n <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Enter your text'}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n </div>\n </div>\n </div>\n\n <!-- RichText -->\n <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Enter your text'}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n </div>\n </div>\n </div>\n\n <!-- Label -->\n <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Book -->\n <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n </div>\n </div>\n </div>\n\n <!-- File -->\n <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Upload File'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n </div>\n\n <!-- CheckBox -->\n <div *ngIf=\"field.type === 'Checkbox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n\n <div class=\"checkbox-options-container\">\n <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\">\n <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.value }}</label>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"radio-options-container\">\n <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Dropdown -->\n <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{ option.value\n }} </option>\n </select>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <!-- AP-06MAR25 -->\n <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [apiMeta]=\"field.subText\"\n [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n\n <!-- List -->\n <!-- AP-06MAR25 - List data show-->\n <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"text\" class=\"custom-input\" placeholder=\"Search...\" [readonly]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\" [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n </ng-container>\n </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n <div class=\"dialog-box\">\n <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n <p>These element want to add a table</p>\n <div class=\"button-container-fb\">\n <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">Yes</button>\n <button class=\"no-btn-fb\" (click)=\"onClose()\">No</button>\n </div>\n </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:19px;height:19px;margin-top:-5px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin-top:-10px;background-color:#d7edff;margin-right:-10px;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s ease-in-out,visibility .1s ease-in-out}.drag-dot{height:13px}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}\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.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: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "NxtTableEmit"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: BookletComponent, selector: "lib-booklet", inputs: ["bookletId", "serv", "tkn", "bookletJSON", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "dataBind"], outputs: ["handleBookletActionEvent", "handlePage", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "component", type: AppTemplatesComponent, selector: "app-templates", outputs: ["templateSelected"] }] });
|
|
15604
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
15605
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TemplateService, providedIn: 'root' });
|
|
15643
15606
|
}
|
|
15644
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
|
15645
|
-
type:
|
|
15646
|
-
args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n <!-- Form Builder Section All Elements -->\n <div class=\"form-builder\">\n <!-- Basic Elements Toggle -->\n <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n <div class=\"head-elements\">Basic Elements</div>\n <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"sections.basic\">\n <ng-container *ngFor=\"let element of basicElements\">\n <div class=\"element\" [class.disabled]=\"isElementDisabled(element.type)\"\n (click)=\"!isElementDisabled(element.type) && addElement(element.type)\"\n [draggable]=\"!isElementDisabled(element.type)\" [matTooltip]=\"isElementDisabled(element.type) ? 'This element is not supported when a ' + (selectedElement?.type || 'certain element') + ' is present' : null\">\n <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n <div class=\"hover-label\">{{ element.label }}</div>\n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Advanced Elements Toggle -->\n <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n <div class=\"head-elements\">Advanced Elements</div>\n <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"sections.advanced\">\n <ng-container *ngFor=\"let element of advancedElements\">\n <div class=\"element\" [class.disabled]=\"isElementDisabled(element.type)\"\n (click)=\"!isElementDisabled(element.type) && addElement(element.type)\"\n [draggable]=\"!isElementDisabled(element.type)\" [matTooltip]=\"isElementDisabled(element.type) ? 'This element is not supported when a ' + (selectedElement?.type || 'certain element') + ' is present' : null\">\n <img src=\"../assets/icons/{{ element.img }}.svg\">\n <div class=\"hover-label\">{{ element.label }}</div>\n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n <!-- AP-08APR25 Add Templates Component -->\n <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n\n <!-- SKS10MAR25 footer version show -->\n <div class=\"sticky-footer-version\">\n {{version}}\n </div>\n </div>\n <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function -->\n <div class=\"form-preview\">\n <!-- AP-10MAR25 Heading -->\n <div class=\"field-container\"\n style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px\"\n (click)=\"selectHeading('Header')\">\n <div class=\"label-container\" style=\"padding: 10px;\">\n <div *ngIf=\"book?.records\">\n <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n </div>\n </div>\n </div>\n\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n <!-- TextBox -->\n <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n </div>\n </div>\n </div>\n\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"line-element\">\n <div></div>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"getLineStyles(field)\" />\n </div>\n\n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"getFontStyles(field)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Upload Image' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div>\n <div class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <img [src]=\"field.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Space Element -->\n <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\"></label>\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Boolean Element -->\n <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n ? field.questionText : 'Boolean'}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n\n <!-- Calendar -->\n <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Select Date'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP -12MAR25 Date -->\n <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Select Date'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP-21MAR25 Add Time element -->\n <!-- Time Field -->\n <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Time' }}</label>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP-28MAR25 DateTime -->\n <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Select Date & Time'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- Numbers -->\n <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- TextArea -->\n <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Enter your text'}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n </div>\n </div>\n </div>\n\n <!-- RichText -->\n <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Enter your text'}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n </div>\n </div>\n </div>\n\n <!-- Label -->\n <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Book -->\n <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n </div>\n </div>\n </div>\n\n <!-- File -->\n <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Upload File'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n </div>\n\n <!-- CheckBox -->\n <div *ngIf=\"field.type === 'Checkbox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n\n <div class=\"checkbox-options-container\">\n <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\">\n <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.value }}</label>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"radio-options-container\">\n <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Dropdown -->\n <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{ option.value\n }} </option>\n </select>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <!-- AP-06MAR25 -->\n <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [apiMeta]=\"field.subText\"\n [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n\n <!-- List -->\n <!-- AP-06MAR25 - List data show-->\n <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : 'Label' }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"text\" class=\"custom-input\" placeholder=\"Search...\" [readonly]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\" [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n </ng-container>\n </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n <div class=\"dialog-box\">\n <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n <p>These element want to add a table</p>\n <div class=\"button-container-fb\">\n <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">Yes</button>\n <button class=\"no-btn-fb\" (click)=\"onClose()\">No</button>\n </div>\n </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:19px;height:19px;margin-top:-5px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin-top:-10px;background-color:#d7edff;margin-right:-10px;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s ease-in-out,visibility .1s ease-in-out}.drag-dot{height:13px}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}\n"] }]
|
|
15647
|
-
|
|
15648
|
-
|
|
15649
|
-
|
|
15650
|
-
type: Input
|
|
15651
|
-
}], templateMode: [{
|
|
15652
|
-
type: Output
|
|
15653
|
-
}] } });
|
|
15607
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TemplateService, decorators: [{
|
|
15608
|
+
type: Injectable,
|
|
15609
|
+
args: [{
|
|
15610
|
+
providedIn: 'root'
|
|
15611
|
+
}]
|
|
15612
|
+
}], ctorParameters: () => [] });
|
|
15654
15613
|
|
|
15655
15614
|
class PropertiesComponent {
|
|
15656
15615
|
http;
|
|
@@ -17890,6 +17849,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
17890
17849
|
type: Output
|
|
17891
17850
|
}] } });
|
|
17892
17851
|
|
|
17852
|
+
class AppTemplatesComponent {
|
|
17853
|
+
templateService;
|
|
17854
|
+
templateSelected = new EventEmitter();
|
|
17855
|
+
templates = [];
|
|
17856
|
+
sections = { templates: false };
|
|
17857
|
+
constructor(templateService) {
|
|
17858
|
+
this.templateService = templateService;
|
|
17859
|
+
this.templates = this.templateService.getTemplates(); // Load template list
|
|
17860
|
+
}
|
|
17861
|
+
toggleSection(section) {
|
|
17862
|
+
this.sections[section] = !this.sections[section];
|
|
17863
|
+
}
|
|
17864
|
+
selectTemplate(templateId) {
|
|
17865
|
+
const selectedTemplate = this.templates.find(t => t.templateId === templateId);
|
|
17866
|
+
if (!selectedTemplate)
|
|
17867
|
+
return;
|
|
17868
|
+
// Convert template element data to form elements
|
|
17869
|
+
const elements = selectedTemplate.elements.map((el, index) => this.templateService.initializeElementFromTemplate(el, index));
|
|
17870
|
+
// Emit data to parent
|
|
17871
|
+
this.templateSelected.emit({ selectedTemplate, elements });
|
|
17872
|
+
}
|
|
17873
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppTemplatesComponent, deps: [{ token: TemplateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
17874
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppTemplatesComponent, selector: "app-templates", outputs: { templateSelected: "templateSelected" }, ngImport: i0, template: "<!-- AP-08APR25 -->\n<!-- Templates Section Toggle -->\n<div class=\"field-container\" (click)=\"toggleSection('templates')\"\n style=\"background-color: #EFF8FF; border: 1px solid #E6F3FF; margin-bottom: 10px; display: flex; justify-content: space-between; padding: 10px; cursor: pointer;\">\n <div class=\"label-container\">\n <div class=\"head-elements\" style=\"font-weight: bold;\">Templates</div>\n </div>\n <img [src]=\"sections.templates ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\" />\n</div>\n\n<!-- Template List Section -->\n<div *ngIf=\"sections.templates\" class=\"template-container\">\n <div *ngFor=\"let template of templates\" class=\"field-container template-card\"\n (click)=\"selectTemplate(template.templateId)\"\n style=\"border: 1px solid #dbeafe; padding: 12px; margin-bottom: 10px; cursor: pointer; border-radius: 10px; background-color: #f8fafc;\">\n \n <div class=\"label-container\" style=\"display: flex; justify-content: space-between;\">\n <div>\n <label class=\"template-header\" style=\"font-weight: 600;\">{{ template.templateName }}</label>\n </div>\n </div>\n <div class=\"template-content\" style=\"margin-top: 5px; color: #555;\">{{ template.content }}</div>\n </div>\n</div>\n", styles: [".toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.head-elements{font-size:17px;font-weight:600}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.template-card{border:1px solid #ddd;padding:10px;margin:10px 0;cursor:pointer;background-color:#f9f9f9;transition:background-color .3s}.template-card:hover{background-color:#eff8ff}.template-header{font-size:18px;font-weight:700}.template-content{font-size:14px;color:#555}\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"] }] });
|
|
17875
|
+
}
|
|
17876
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppTemplatesComponent, decorators: [{
|
|
17877
|
+
type: Component,
|
|
17878
|
+
args: [{ selector: 'app-templates', template: "<!-- AP-08APR25 -->\n<!-- Templates Section Toggle -->\n<div class=\"field-container\" (click)=\"toggleSection('templates')\"\n style=\"background-color: #EFF8FF; border: 1px solid #E6F3FF; margin-bottom: 10px; display: flex; justify-content: space-between; padding: 10px; cursor: pointer;\">\n <div class=\"label-container\">\n <div class=\"head-elements\" style=\"font-weight: bold;\">Templates</div>\n </div>\n <img [src]=\"sections.templates ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\" />\n</div>\n\n<!-- Template List Section -->\n<div *ngIf=\"sections.templates\" class=\"template-container\">\n <div *ngFor=\"let template of templates\" class=\"field-container template-card\"\n (click)=\"selectTemplate(template.templateId)\"\n style=\"border: 1px solid #dbeafe; padding: 12px; margin-bottom: 10px; cursor: pointer; border-radius: 10px; background-color: #f8fafc;\">\n \n <div class=\"label-container\" style=\"display: flex; justify-content: space-between;\">\n <div>\n <label class=\"template-header\" style=\"font-weight: 600;\">{{ template.templateName }}</label>\n </div>\n </div>\n <div class=\"template-content\" style=\"margin-top: 5px; color: #555;\">{{ template.content }}</div>\n </div>\n</div>\n", styles: [".toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.head-elements{font-size:17px;font-weight:600}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.template-card{border:1px solid #ddd;padding:10px;margin:10px 0;cursor:pointer;background-color:#f9f9f9;transition:background-color .3s}.template-card:hover{background-color:#eff8ff}.template-header{font-size:18px;font-weight:700}.template-content{font-size:14px;color:#555}\n"] }]
|
|
17879
|
+
}], ctorParameters: () => [{ type: TemplateService }], propDecorators: { templateSelected: [{
|
|
17880
|
+
type: Output
|
|
17881
|
+
}] } });
|
|
17882
|
+
|
|
17893
17883
|
// export const MY_CUSTOM_FORMATS = {
|
|
17894
17884
|
// fullPickerInput: 'DD/MM/YYYY HH:mm:ss',
|
|
17895
17885
|
// useUtc: true,
|