@rangertechnologies/ngnxt 2.1.89 → 2.1.90
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/README.md +26 -26
- package/esm2022/lib/ar.i18n.mjs +1 -1
- package/esm2022/lib/components/custom-button/custom-button.component.mjs +3 -3
- package/esm2022/lib/components/custom-calendar/custom-calendar.component.mjs +3 -3
- package/esm2022/lib/components/custom-date/custom-date.component.mjs +3 -3
- package/esm2022/lib/components/custom-date-picker/custom-date-picker.component.mjs +3 -3
- package/esm2022/lib/components/custom-dropdown/custom-dropdown.component.mjs +3 -3
- package/esm2022/lib/components/custom-image/custom-image.component.mjs +1 -1
- package/esm2022/lib/components/custom-input/custom-input.component.mjs +3 -3
- package/esm2022/lib/components/custom-label/custom-label.component.mjs +3 -3
- package/esm2022/lib/components/custom-model/custom-model.component.mjs +3 -3
- package/esm2022/lib/components/custom-radio/custom-radio.component.mjs +3 -3
- package/esm2022/lib/components/custom-rich-text/custom-rich-text.component.mjs +3 -3
- package/esm2022/lib/components/custom-table/custom-table.component.mjs +3 -3
- package/esm2022/lib/components/custom-text-area/custom-text-area.component.mjs +3 -3
- package/esm2022/lib/components/custom-time/custom-time.component.mjs +3 -3
- package/esm2022/lib/components/dependent-table/dependent-table.component.mjs +3 -3
- package/esm2022/lib/components/dropdown-with-flag/dropdown-with-flag.component.mjs +3 -3
- package/esm2022/lib/components/file-upload/file-upload.component.mjs +3 -3
- package/esm2022/lib/components/file-view/file-view.component.mjs +3 -3
- package/esm2022/lib/components/loader/loader.component.mjs +3 -3
- package/esm2022/lib/components/pick-location/pick-location.component.mjs +3 -3
- package/esm2022/lib/components/search-box/search-box.component.mjs +3 -3
- package/esm2022/lib/components/table-appendix/table-appendix.component.mjs +3 -3
- package/esm2022/lib/directives/componenthost/componenthost.directive.mjs +1 -1
- package/esm2022/lib/en.i18n.mjs +1 -1
- package/esm2022/lib/i18n-config.service.mjs +1 -1
- package/esm2022/lib/i18n.component.mjs +19 -19
- package/esm2022/lib/i18n.module.mjs +1 -1
- package/esm2022/lib/i18n.pipe.mjs +1 -1
- package/esm2022/lib/i18n.service.mjs +1 -1
- package/esm2022/lib/interfaces/actionMeta.mjs +1 -1
- package/esm2022/lib/interfaces/apimeta.mjs +1 -1
- package/esm2022/lib/interfaces/dependencyMeta.mjs +1 -1
- package/esm2022/lib/model/bookletWrapper.mjs +1 -1
- package/esm2022/lib/model/changeWrapper.mjs +1 -1
- package/esm2022/lib/model/errorWrapper.mjs +1 -1
- package/esm2022/lib/model/tableWrapper.mjs +1 -1
- package/esm2022/lib/nxt-app.component.mjs +9 -9
- package/esm2022/lib/nxt-app.module.mjs +1 -1
- package/esm2022/lib/nxt-app.service.mjs +1 -1
- package/esm2022/lib/pages/booklet/booklet.component.mjs +4 -3
- package/esm2022/lib/pages/builder/element/element.component.mjs +3 -3
- package/esm2022/lib/pages/builder/form/form.component.mjs +3 -3
- package/esm2022/lib/pages/builder/menu/menu.component.mjs +3 -3
- package/esm2022/lib/pages/builder/properties/properties.component.mjs +3 -3
- package/esm2022/lib/pages/questionbook/questionbook.component.mjs +3 -3
- package/esm2022/lib/pages/questionnaire/questionnaire.component.mjs +3 -3
- package/esm2022/lib/pages/summary-page/summary-page.component.mjs +3 -3
- package/esm2022/lib/pipe/get-value.pipe.mjs +1 -1
- package/esm2022/lib/services/change.service.mjs +1 -1
- package/esm2022/lib/services/data.service.mjs +1 -1
- package/esm2022/lib/services/form-builder.service.mjs +1 -1
- package/esm2022/lib/services/salesforce.service.mjs +1 -1
- package/esm2022/lib/services/shared.service.mjs +1 -1
- package/esm2022/lib/services/storage.service.mjs +1 -1
- package/esm2022/lib/tam.i18n.mjs +1 -1
- package/esm2022/lib/wrapper.mjs +1 -1
- package/esm2022/public-api.mjs +1 -1
- package/fesm2022/rangertechnologies-ngnxt.mjs +85 -84
- package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
- package/package.json +1 -1
- package/rangertechnologies-ngnxt-2.1.90.tgz +0 -0
- package/src/lib/style.css +1819 -1819
- package/rangertechnologies-ngnxt-2.1.89.tgz +0 -0
|
@@ -50,18 +50,18 @@ class NxtAppComponent {
|
|
|
50
50
|
ngOnInit() {
|
|
51
51
|
}
|
|
52
52
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtAppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtAppComponent, selector: "lib-nxt-app", ngImport: i0, template: `
|
|
54
|
-
<p>
|
|
55
|
-
nxt-app works!
|
|
56
|
-
</p>
|
|
53
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtAppComponent, selector: "lib-nxt-app", ngImport: i0, template: `
|
|
54
|
+
<p>
|
|
55
|
+
nxt-app works!
|
|
56
|
+
</p>
|
|
57
57
|
`, isInline: true });
|
|
58
58
|
}
|
|
59
59
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtAppComponent, decorators: [{
|
|
60
60
|
type: Component,
|
|
61
|
-
args: [{ selector: 'lib-nxt-app', template: `
|
|
62
|
-
<p>
|
|
63
|
-
nxt-app works!
|
|
64
|
-
</p>
|
|
61
|
+
args: [{ selector: 'lib-nxt-app', template: `
|
|
62
|
+
<p>
|
|
63
|
+
nxt-app works!
|
|
64
|
+
</p>
|
|
65
65
|
` }]
|
|
66
66
|
}], ctorParameters: () => [] });
|
|
67
67
|
|
|
@@ -4428,11 +4428,11 @@ class CustomRichTextComponent {
|
|
|
4428
4428
|
}
|
|
4429
4429
|
}
|
|
4430
4430
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRichTextComponent, deps: [{ token: I18nService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4431
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomRichTextComponent, isStandalone: true, selector: "app-custom-rich-text", inputs: { value: "value", placeholder: "placeholder", error: "error", question: "question", rows: "rows", readOnly: "readOnly", minLength: "minLength", maxLength: "maxLength" }, outputs: { textValueChange: "textValueChange" }, ngImport: i0, template: "<!-- RS 06JAN25 -->\
|
|
4431
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomRichTextComponent, isStandalone: true, selector: "app-custom-rich-text", inputs: { value: "value", placeholder: "placeholder", error: "error", question: "question", rows: "rows", readOnly: "readOnly", minLength: "minLength", maxLength: "maxLength" }, outputs: { textValueChange: "textValueChange" }, ngImport: i0, template: "<!-- RS 06JAN25 -->\n<div class=\"rich-text-container\">\n <quill-editor\n [(ngModel)]=\"value\"\n [placeholder]=\"placeholder\"\n [modules]=\"quillConfiguration\"\n [readOnly]=\"readOnly\"\n (focusout)=\"onEditorFocusOut()\"\n [class.error]=\"error\">\n </quill-editor>\n <div *ngIf=\"error\" class=\"error-message\">\n {{ error }}\n </div>\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}\n"], dependencies: [{ kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
4432
4432
|
}
|
|
4433
4433
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRichTextComponent, decorators: [{
|
|
4434
4434
|
type: Component,
|
|
4435
|
-
args: [{ imports: [QuillEditorComponent, FormsModule, CommonModule], selector: 'app-custom-rich-text', standalone: true, template: "<!-- RS 06JAN25 -->\
|
|
4435
|
+
args: [{ imports: [QuillEditorComponent, FormsModule, CommonModule], selector: 'app-custom-rich-text', standalone: true, template: "<!-- RS 06JAN25 -->\n<div class=\"rich-text-container\">\n <quill-editor\n [(ngModel)]=\"value\"\n [placeholder]=\"placeholder\"\n [modules]=\"quillConfiguration\"\n [readOnly]=\"readOnly\"\n (focusout)=\"onEditorFocusOut()\"\n [class.error]=\"error\">\n </quill-editor>\n <div *ngIf=\"error\" class=\"error-message\">\n {{ error }}\n </div>\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}\n"] }]
|
|
4436
4436
|
}], ctorParameters: () => [{ type: I18nService }, { type: ChangeService }], propDecorators: { value: [{
|
|
4437
4437
|
type: Input
|
|
4438
4438
|
}], placeholder: [{
|
|
@@ -4675,11 +4675,11 @@ class PickLocationComponent {
|
|
|
4675
4675
|
this.showModal = false;
|
|
4676
4676
|
}
|
|
4677
4677
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickLocationComponent, deps: [{ token: I18nService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4678
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PickLocationComponent, selector: "app-pick-location", inputs: { address: "address", question: "question", apiKey: "apiKey" }, outputs: { locationSelected: "locationSelected" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["search"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div>\
|
|
4678
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PickLocationComponent, selector: "app-pick-location", inputs: { address: "address", question: "question", apiKey: "apiKey" }, outputs: { locationSelected: "locationSelected" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["search"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n <!-- <label class=\"she-label\">Location</label> -->\n <!-- HA 19DEC23 For translation -->\n <input #search class=\"she-line-input form-control\" type=\"text\" placeholder=\"{{ 'enterLocation' | i18n:i18nService.currentLanguage }}\"\n (keydown.enter)=\"$event.preventDefault()\" placeholder=\"{{ 'searchNearestLocation' | i18n:i18nService.currentLanguage }}\" autocorrect=\"off\"\n autocapitalize=\"off\" spellcheck=\"off\" type=\"text\" [(ngModel)]=\"address\"\n >\n <a (click)=\"openMap()\"\n style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\n <i class=\"fa fa-location-arrow\" aria-hidden=\"true\">\n <!-- HA 19DEC23 For translation -->\n </i> {{ 'pickLocation' | i18n:i18nService.currentLanguage }}</a>\n</div>\n\n<div class=\"map-overlay\" *ngIf=\"showModal\">\n <div class=\"map-modal\">\n <div class=\"map-modal-content\">\n <div class=\"map-modal-header\">\n <!-- HA 19DEC23 For translation -->\n <h4>{{ 'pickYourLocation' | i18n:i18nService.currentLanguage }}</h4>\n <button class=\"close-button\" (click)=\"closeModal()\">X</button>\n </div>\n <!-- Modal content goes here -->\n <!-- <agm-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"markerDragEnd($event)\"\n [fullscreenControl]=\"true\">\n <agm-marker [latitude]=\"latitude\" [longitude]=\"longitude\" [markerDraggable]=\"true\"\n (dragEnd)=\"markerDragEnd($event)\"></agm-marker>\n </agm-map> -->\n <google-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\n <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\n </google-map>\n </div>\n </div>\n</div>\n\n\n\n\n\n\n", styles: [".she-label{font-weight:400;color:#9a9a9a;padding-bottom:5px;padding-top:5px;padding-right:15px;font-size:14px}.she-line-input{border:none;background:#fff;border-bottom:1px solid #eeeeee;border-radius:0}.fa-location-arrow:before{content:\"\\f124\"}google-map .map-container{width:auto!important}.map-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.map-modal-header h3{margin:0}.map-modal-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i4.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
|
|
4679
4679
|
}
|
|
4680
4680
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickLocationComponent, decorators: [{
|
|
4681
4681
|
type: Component,
|
|
4682
|
-
args: [{ selector: 'app-pick-location', template: "<div>\
|
|
4682
|
+
args: [{ selector: 'app-pick-location', template: "<div>\n <!-- <label class=\"she-label\">Location</label> -->\n <!-- HA 19DEC23 For translation -->\n <input #search class=\"she-line-input form-control\" type=\"text\" placeholder=\"{{ 'enterLocation' | i18n:i18nService.currentLanguage }}\"\n (keydown.enter)=\"$event.preventDefault()\" placeholder=\"{{ 'searchNearestLocation' | i18n:i18nService.currentLanguage }}\" autocorrect=\"off\"\n autocapitalize=\"off\" spellcheck=\"off\" type=\"text\" [(ngModel)]=\"address\"\n >\n <a (click)=\"openMap()\"\n style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\n <i class=\"fa fa-location-arrow\" aria-hidden=\"true\">\n <!-- HA 19DEC23 For translation -->\n </i> {{ 'pickLocation' | i18n:i18nService.currentLanguage }}</a>\n</div>\n\n<div class=\"map-overlay\" *ngIf=\"showModal\">\n <div class=\"map-modal\">\n <div class=\"map-modal-content\">\n <div class=\"map-modal-header\">\n <!-- HA 19DEC23 For translation -->\n <h4>{{ 'pickYourLocation' | i18n:i18nService.currentLanguage }}</h4>\n <button class=\"close-button\" (click)=\"closeModal()\">X</button>\n </div>\n <!-- Modal content goes here -->\n <!-- <agm-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"markerDragEnd($event)\"\n [fullscreenControl]=\"true\">\n <agm-marker [latitude]=\"latitude\" [longitude]=\"longitude\" [markerDraggable]=\"true\"\n (dragEnd)=\"markerDragEnd($event)\"></agm-marker>\n </agm-map> -->\n <google-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\n <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\n </google-map>\n </div>\n </div>\n</div>\n\n\n\n\n\n\n", styles: [".she-label{font-weight:400;color:#9a9a9a;padding-bottom:5px;padding-top:5px;padding-right:15px;font-size:14px}.she-line-input{border:none;background:#fff;border-bottom:1px solid #eeeeee;border-radius:0}.fa-location-arrow:before{content:\"\\f124\"}google-map .map-container{width:auto!important}.map-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.map-modal-header h3{margin:0}.map-modal-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}\n"] }]
|
|
4683
4683
|
}], ctorParameters: () => [{ type: I18nService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { searchElementRef: [{
|
|
4684
4684
|
type: ViewChild,
|
|
4685
4685
|
args: ['search', { static: true }]
|
|
@@ -4750,11 +4750,11 @@ class CustomInputComponent {
|
|
|
4750
4750
|
this.inputValue.emit(input.target.value);
|
|
4751
4751
|
}
|
|
4752
4752
|
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 });
|
|
4753
|
-
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 -->\
|
|
4753
|
+
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"] }] });
|
|
4754
4754
|
}
|
|
4755
4755
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomInputComponent, decorators: [{
|
|
4756
4756
|
type: Component,
|
|
4757
|
-
args: [{ selector: 'app-custom-input', template: " <!-- HA 19DEC23 Included Style value from Salesforce -->\
|
|
4757
|
+
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"] }]
|
|
4758
4758
|
}], ctorParameters: () => [{ type: ChangeService }, { type: I18nService }, { type: DataService }], propDecorators: { value: [{
|
|
4759
4759
|
type: Input
|
|
4760
4760
|
}], question: [{
|
|
@@ -4817,11 +4817,11 @@ class CustomTextAreaComponent {
|
|
|
4817
4817
|
this.textareaValueChange.emit(event.target.value);
|
|
4818
4818
|
}
|
|
4819
4819
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomTextAreaComponent, deps: [{ token: I18nService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4820
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: { value: "value", placeholder: "placeholder", rows: "rows", error: "error", question: "question", readOnly: "readOnly" }, outputs: { textareaValueChange: "textareaValueChange" }, ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\
|
|
4820
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: { value: "value", placeholder: "placeholder", rows: "rows", error: "error", question: "question", readOnly: "readOnly" }, outputs: { textareaValueChange: "textareaValueChange" }, ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<!-- RS 09DEC24 Changed keys--> \n<textarea \n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)] =\"value\" \n [rows]=\"rows\" \n class=\"she-line-input form-control\" \n [placeholder]=\"placeholder\"\n [readOnly]=\"readOnly\"\n (input)=\"onTextareaChange($event)\"\n></textarea>\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{ question?.errorMessage }}</span>", styles: [".invalid{border:1px solid red!important}\n"], dependencies: [{ 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"] }] });
|
|
4821
4821
|
}
|
|
4822
4822
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomTextAreaComponent, decorators: [{
|
|
4823
4823
|
type: Component,
|
|
4824
|
-
args: [{ selector: 'app-custom-text-area', template: "<!-- // VD 12Jun24 - readonly change-->\
|
|
4824
|
+
args: [{ selector: 'app-custom-text-area', template: "<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<!-- RS 09DEC24 Changed keys--> \n<textarea \n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)] =\"value\" \n [rows]=\"rows\" \n class=\"she-line-input form-control\" \n [placeholder]=\"placeholder\"\n [readOnly]=\"readOnly\"\n (input)=\"onTextareaChange($event)\"\n></textarea>\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{ question?.errorMessage }}</span>", styles: [".invalid{border:1px solid red!important}\n"] }]
|
|
4825
4825
|
}], ctorParameters: () => [{ type: I18nService }, { type: ChangeService }], propDecorators: { value: [{
|
|
4826
4826
|
type: Input
|
|
4827
4827
|
}], placeholder: [{
|
|
@@ -5033,11 +5033,11 @@ class CustomTableComponent {
|
|
|
5033
5033
|
this.valueChange.emit(updatedTableData);
|
|
5034
5034
|
}
|
|
5035
5035
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomTableComponent, deps: [{ token: ChangeService }, { token: I18nService }, { token: SalesforceService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5036
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomTableComponent, selector: "app-custom-table", inputs: { question: "question", apiMeta: "apiMeta" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\
|
|
5036
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomTableComponent, selector: "app-custom-table", inputs: { question: "question", apiMeta: "apiMeta" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\n <thead>\n <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\n <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\n <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + tableSize\">\n {{ header.label }}\n </th>\n <th class=\"col-md-2\" colspan=\"2\">Actions</th>\n </thead>\n <tbody *ngIf=\"tableData\">\n <tr *ngFor=\"let item of tableData; let i = index\">\n <!-- <td><input type=\"checkbox\" [(ngModel)]=\"item.selected\" (change)=\"selectItem(item)\"></td> -->\n <td *ngFor=\"let header of tableHeader; let j = index\">\n <div *ngIf=\"header.fldType === 'imagetext'\" [class]=\"'col-md-' + header.size\" style=\"display: flex;\">\n <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.fldType === 'image'\" [class]=\"'col-md-' + header.size\">\n <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item[header.fieldName]\" [alt]=\"item.altText\">\n </div>\n <!--VD 23Aug24 handle readOnly -->\n <div *ngIf=\"header.fldType === 'Text' || header.fldType === 'Text'\">\n <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n <input type=\"text\" [readonly]=\"header.readOnly\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit && !header.readOnly}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" class=\"she-line-input table-input\">\n </div>\n <!--VD 23Aug24 handle Number Type -->\n <div *ngIf=\"header.fldType === 'Number' || header.fldType === 'Number'\">\n <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n <input type=\"Number\" [readonly]=\"header.readOnly\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit && !header.readOnly}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.fldType === 'radio'\" [class]=\"'col-md-' + header.size\">\n <input type=\"radio\" [name]=\"item.name\" [checked]=\"item.value == header.fieldName\" (click)=\"updateRadio(item, header.fieldName)\">\n </div>\n </td>\n <td class=\"action\">\n <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"editRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit1\" /><span>Edit</span></a>\n </td>\n <td class=\"action\">\n <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"deleteRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"/><span>Delete</span></a>\n </td>\n </tr>\n </tbody>\n</table>\n<div (click)=\"addRow()\" class=\"addRowClass\"><div class=\"circle-button\">+</div></div>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px;text-align:center}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.addRowClass{float:right;margin-right:15%}.editInput{border-bottom:1px solid red!important}.action,.addRowClass{cursor:pointer}.action :hover{color:red}.circle-button{width:50px;height:50px;border-radius:50%;background-color:#03a9f4;color:#fff;font-size:25px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#03a9f4}\n"], dependencies: [{ 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }] });
|
|
5037
5037
|
}
|
|
5038
5038
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomTableComponent, decorators: [{
|
|
5039
5039
|
type: Component,
|
|
5040
|
-
args: [{ selector: 'app-custom-table', template: "<table class=\"table table-striped table-bordered\">\
|
|
5040
|
+
args: [{ selector: 'app-custom-table', template: "<table class=\"table table-striped table-bordered\">\n <thead>\n <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\n <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\n <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + tableSize\">\n {{ header.label }}\n </th>\n <th class=\"col-md-2\" colspan=\"2\">Actions</th>\n </thead>\n <tbody *ngIf=\"tableData\">\n <tr *ngFor=\"let item of tableData; let i = index\">\n <!-- <td><input type=\"checkbox\" [(ngModel)]=\"item.selected\" (change)=\"selectItem(item)\"></td> -->\n <td *ngFor=\"let header of tableHeader; let j = index\">\n <div *ngIf=\"header.fldType === 'imagetext'\" [class]=\"'col-md-' + header.size\" style=\"display: flex;\">\n <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.fldType === 'image'\" [class]=\"'col-md-' + header.size\">\n <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item[header.fieldName]\" [alt]=\"item.altText\">\n </div>\n <!--VD 23Aug24 handle readOnly -->\n <div *ngIf=\"header.fldType === 'Text' || header.fldType === 'Text'\">\n <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n <input type=\"text\" [readonly]=\"header.readOnly\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit && !header.readOnly}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" class=\"she-line-input table-input\">\n </div>\n <!--VD 23Aug24 handle Number Type -->\n <div *ngIf=\"header.fldType === 'Number' || header.fldType === 'Number'\">\n <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n <input type=\"Number\" [readonly]=\"header.readOnly\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit && !header.readOnly}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.fldType === 'radio'\" [class]=\"'col-md-' + header.size\">\n <input type=\"radio\" [name]=\"item.name\" [checked]=\"item.value == header.fieldName\" (click)=\"updateRadio(item, header.fieldName)\">\n </div>\n </td>\n <td class=\"action\">\n <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"editRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit1\" /><span>Edit</span></a>\n </td>\n <td class=\"action\">\n <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"deleteRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"/><span>Delete</span></a>\n </td>\n </tr>\n </tbody>\n</table>\n<div (click)=\"addRow()\" class=\"addRowClass\"><div class=\"circle-button\">+</div></div>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px;text-align:center}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.addRowClass{float:right;margin-right:15%}.editInput{border-bottom:1px solid red!important}.action,.addRowClass{cursor:pointer}.action :hover{color:red}.circle-button{width:50px;height:50px;border-radius:50%;background-color:#03a9f4;color:#fff;font-size:25px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#03a9f4}\n"] }]
|
|
5041
5041
|
}], ctorParameters: () => [{ type: ChangeService }, { type: I18nService }, { type: SalesforceService }, { type: DataService }], propDecorators: { question: [{
|
|
5042
5042
|
type: Input
|
|
5043
5043
|
}], valueChange: [{
|
|
@@ -5067,11 +5067,11 @@ class CustomDatePickerComponent {
|
|
|
5067
5067
|
this.dateChange.emit(event);
|
|
5068
5068
|
}
|
|
5069
5069
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDatePickerComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5070
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: { date: "date", minDate: "minDate", maxDate: "maxDate", error: "error", errorMessage: "errorMessage", readOnly: "readOnly" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<!-- <div class=\"date-picker-container\">\
|
|
5070
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: { date: "date", minDate: "minDate", maxDate: "maxDate", error: "error", errorMessage: "errorMessage", readOnly: "readOnly" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<!-- <div class=\"date-picker-container\">\n <label>{{label}}</label>\n <input type=\"date\" [min]=\"minDate\" [max]=\"maxDate\" [required]=\"required\" (change)=\"onDateChanged($event)\">\n</div> -->\n<!-- <mat-form-field>\n <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n</mat-form-field> -->\n<!--VD 12Jun24 - readonly change --> \n<!-- VD 01Aug24 - validation change-->\n<p>\n <input \n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)]=\"dateSelected\" \n [owlDateTimeTrigger]=\"dt\" \n [owlDateTime]=\"dt\" \n [min]=\"minDate\"\n [disabled]=\"readOnly\"\n placeholder=\"DD/MM/YYYY HH:MM\"\n (input)=\"onDateChange($event)\"\n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onDateChange($event)\">\n <owl-date-time #dt></owl-date-time>\n</p>\n<span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>\n ", styles: [".invalid{border-color:red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i4$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }] });
|
|
5071
5071
|
}
|
|
5072
5072
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDatePickerComponent, decorators: [{
|
|
5073
5073
|
type: Component,
|
|
5074
|
-
args: [{ selector: 'app-custom-date-picker', template: "<!-- <div class=\"date-picker-container\">\
|
|
5074
|
+
args: [{ selector: 'app-custom-date-picker', template: "<!-- <div class=\"date-picker-container\">\n <label>{{label}}</label>\n <input type=\"date\" [min]=\"minDate\" [max]=\"maxDate\" [required]=\"required\" (change)=\"onDateChanged($event)\">\n</div> -->\n<!-- <mat-form-field>\n <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n</mat-form-field> -->\n<!--VD 12Jun24 - readonly change --> \n<!-- VD 01Aug24 - validation change-->\n<p>\n <input \n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)]=\"dateSelected\" \n [owlDateTimeTrigger]=\"dt\" \n [owlDateTime]=\"dt\" \n [min]=\"minDate\"\n [disabled]=\"readOnly\"\n placeholder=\"DD/MM/YYYY HH:MM\"\n (input)=\"onDateChange($event)\"\n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onDateChange($event)\">\n <owl-date-time #dt></owl-date-time>\n</p>\n<span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>\n ", styles: [".invalid{border-color:red!important}\n"] }]
|
|
5075
5075
|
}], ctorParameters: () => [{ type: I18nService }], propDecorators: { date: [{
|
|
5076
5076
|
type: Input
|
|
5077
5077
|
}], minDate: [{
|
|
@@ -5107,11 +5107,11 @@ class DropdownWithFlagComponent {
|
|
|
5107
5107
|
this.flagDropDownChange.emit(event);
|
|
5108
5108
|
}
|
|
5109
5109
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithFlagComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5110
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: { certified: "certified", JobPerformerCertificates: "JobPerformerCertificates" }, outputs: { flagDropDownChange: "flagDropDownChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"she-title\">\
|
|
5110
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: { certified: "certified", JobPerformerCertificates: "JobPerformerCertificates" }, outputs: { flagDropDownChange: "flagDropDownChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"she-title\">\n <label class=\"switch\">\n <input class=\"switch-input\" type=\"checkbox\" disabled=\"true\" [checked]=\"certified\"/>\n <span class=\"switch-label\" data-on=\"Certified\" data-off=\"Not Certified\"></span> \n <span class=\"switch-handle\"></span> \n </label> \n <!-- HA 19DEC23 For translation -->\n <ng-select *ngIf=\"certified\"\n style=\"margin-left: 36px; width: 205px; margin-bottom: 8px;\" \n [items]=\"JobPerformerCertificates\"\n [(ngModel)]=\"selectedValue\"\n (change)=\"onJobPerformerCertified($event)\"\n placeholder=\"---{{ 'select' | i18n:i18nService.currentLanguage }}---\">\n </ng-select>\n </div> ", styles: [".she-title{display:flex;flex-direction:row;align-items:center}.switch{position:relative;width:105px;height:23px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eee,#fff 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:18px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input{position:absolute;top:0;left:0;opacity:0}.switch-label{position:relative;display:block;height:inherit;font-size:12px;background:#eceeef;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label:before,.switch-label:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label:before{content:attr(data-off);right:11px;color:#aaa;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input:checked~.switch-label{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input:checked~.switch-label:before{opacity:0}.switch-input:checked~.switch-label:after{opacity:1}.switch-handle{position:absolute;top:0;left:0;width:19px;height:22px;background:linear-gradient(to bottom,#fff 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:100%;box-shadow:1px 1px 5px #0003}.switch-handle:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eee,#fff);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input:checked~.switch-handle{left:86px;box-shadow:-1px 1px 5px #0003;border:2px solid aquamarine}.switch-label,.switch-handle{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i6.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
|
|
5111
5111
|
}
|
|
5112
5112
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithFlagComponent, decorators: [{
|
|
5113
5113
|
type: Component,
|
|
5114
|
-
args: [{ selector: 'app-dropdown-with-flag', template: "<div class=\"she-title\">\
|
|
5114
|
+
args: [{ selector: 'app-dropdown-with-flag', template: "<div class=\"she-title\">\n <label class=\"switch\">\n <input class=\"switch-input\" type=\"checkbox\" disabled=\"true\" [checked]=\"certified\"/>\n <span class=\"switch-label\" data-on=\"Certified\" data-off=\"Not Certified\"></span> \n <span class=\"switch-handle\"></span> \n </label> \n <!-- HA 19DEC23 For translation -->\n <ng-select *ngIf=\"certified\"\n style=\"margin-left: 36px; width: 205px; margin-bottom: 8px;\" \n [items]=\"JobPerformerCertificates\"\n [(ngModel)]=\"selectedValue\"\n (change)=\"onJobPerformerCertified($event)\"\n placeholder=\"---{{ 'select' | i18n:i18nService.currentLanguage }}---\">\n </ng-select>\n </div> ", styles: [".she-title{display:flex;flex-direction:row;align-items:center}.switch{position:relative;width:105px;height:23px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eee,#fff 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:18px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input{position:absolute;top:0;left:0;opacity:0}.switch-label{position:relative;display:block;height:inherit;font-size:12px;background:#eceeef;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label:before,.switch-label:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label:before{content:attr(data-off);right:11px;color:#aaa;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input:checked~.switch-label{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input:checked~.switch-label:before{opacity:0}.switch-input:checked~.switch-label:after{opacity:1}.switch-handle{position:absolute;top:0;left:0;width:19px;height:22px;background:linear-gradient(to bottom,#fff 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:100%;box-shadow:1px 1px 5px #0003}.switch-handle:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eee,#fff);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input:checked~.switch-handle{left:86px;box-shadow:-1px 1px 5px #0003;border:2px solid aquamarine}.switch-label,.switch-handle{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"] }]
|
|
5115
5115
|
}], ctorParameters: () => [{ type: I18nService }], propDecorators: { certified: [{
|
|
5116
5116
|
type: Input
|
|
5117
5117
|
}], JobPerformerCertificates: [{
|
|
@@ -5295,11 +5295,11 @@ class CustomDropdownComponent {
|
|
|
5295
5295
|
}
|
|
5296
5296
|
}
|
|
5297
5297
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDropdownComponent, deps: [{ token: ChangeService }, { token: DataService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5298
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: { options: "options", placeholder: "placeholder", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", readOnly: "readOnly", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel", question: "question", referenceField: "referenceField", token: "token" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\
|
|
5298
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: { options: "options", placeholder: "placeholder", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", readOnly: "readOnly", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel", question: "question", referenceField: "referenceField", token: "token" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\n<!-- <select\n [ngClass]=\"{\n 'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\n 'custom-select': !progressBar\n }\" class=\"custom-select mr-sm-2 dd-height\" \n [id]=\"id\" \n [(ngModel)]=\"selectedValue\"\n (change)=\"selectChange($event.target.value);\" \n [style.borderColor]=\"error ? 'red' : '#858585'\"\n [style.color]=\"error ? 'red' : ''\">\n <option *ngFor=\"let option of options\" [value]=\"this.apiMeta !== undefined ? option.title : option.value\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.value }}</option>\n <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select> -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<!-- VD 07Aug24 - isDependentField change-->\n<!-- VD 25Oct24 - changes-->\n<!-- RS 09DEC24 Changed keys--> \n<ng-select\n [class]=\"invalidFieldIds.includes(id) || error ? 'shengel-custom-select invalid' : 'shengel-custom-select'\"\n [(ngModel)]=\"selectedValue\" \n [placeholder]=\"placeholder\"\n [disabled]=\"readOnly\"\n (click)=\"getOptions()\"\n (change)=\"selectChange($event)\"\n [id]=\"id\">\n <ng-option \n *ngFor=\"let option of options\" \n [value]=\"apiObj && !apiObj.isDependentField ? option : option?.value\">\n {{ apiObj && !apiObj.isDependentField && option ? option[labelField] : option?.value }}\n </ng-option> \n</ng-select>\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{errorMessage}}</span>\n", styles: [".ng-select{width:100%}.invalid{border:1px solid red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i6.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i6.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }] });
|
|
5299
5299
|
}
|
|
5300
5300
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDropdownComponent, decorators: [{
|
|
5301
5301
|
type: Component,
|
|
5302
|
-
args: [{ selector: 'app-custom-dropdown', template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\
|
|
5302
|
+
args: [{ selector: 'app-custom-dropdown', template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\n<!-- <select\n [ngClass]=\"{\n 'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\n 'custom-select': !progressBar\n }\" class=\"custom-select mr-sm-2 dd-height\" \n [id]=\"id\" \n [(ngModel)]=\"selectedValue\"\n (change)=\"selectChange($event.target.value);\" \n [style.borderColor]=\"error ? 'red' : '#858585'\"\n [style.color]=\"error ? 'red' : ''\">\n <option *ngFor=\"let option of options\" [value]=\"this.apiMeta !== undefined ? option.title : option.value\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.value }}</option>\n <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select> -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<!-- VD 07Aug24 - isDependentField change-->\n<!-- VD 25Oct24 - changes-->\n<!-- RS 09DEC24 Changed keys--> \n<ng-select\n [class]=\"invalidFieldIds.includes(id) || error ? 'shengel-custom-select invalid' : 'shengel-custom-select'\"\n [(ngModel)]=\"selectedValue\" \n [placeholder]=\"placeholder\"\n [disabled]=\"readOnly\"\n (click)=\"getOptions()\"\n (change)=\"selectChange($event)\"\n [id]=\"id\">\n <ng-option \n *ngFor=\"let option of options\" \n [value]=\"apiObj && !apiObj.isDependentField ? option : option?.value\">\n {{ apiObj && !apiObj.isDependentField && option ? option[labelField] : option?.value }}\n </ng-option> \n</ng-select>\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{errorMessage}}</span>\n", styles: [".ng-select{width:100%}.invalid{border:1px solid red!important}\n"] }]
|
|
5303
5303
|
}], ctorParameters: () => [{ type: ChangeService }, { type: DataService }, { type: I18nService }], propDecorators: { options: [{
|
|
5304
5304
|
type: Input
|
|
5305
5305
|
}], placeholder: [{
|
|
@@ -5338,11 +5338,11 @@ class CustomLabelComponent {
|
|
|
5338
5338
|
ngOnInit() {
|
|
5339
5339
|
}
|
|
5340
5340
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5341
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomLabelComponent, selector: "app-custom-label", inputs: { labelValue: "labelValue", labelStyle: "labelStyle" }, ngImport: i0, template: "\
|
|
5341
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomLabelComponent, selector: "app-custom-label", inputs: { labelValue: "labelValue", labelStyle: "labelStyle" }, ngImport: i0, template: "\n<div style={{labelStyle}}>{{ labelValue }}</div>\n", styles: [".label{margin-top:8px;margin-left:7px}\n"] });
|
|
5342
5342
|
}
|
|
5343
5343
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomLabelComponent, decorators: [{
|
|
5344
5344
|
type: Component,
|
|
5345
|
-
args: [{ selector: 'app-custom-label', template: "\
|
|
5345
|
+
args: [{ selector: 'app-custom-label', template: "\n<div style={{labelStyle}}>{{ labelValue }}</div>\n", styles: [".label{margin-top:8px;margin-left:7px}\n"] }]
|
|
5346
5346
|
}], ctorParameters: () => [], propDecorators: { labelValue: [{
|
|
5347
5347
|
type: Input
|
|
5348
5348
|
}], labelStyle: [{
|
|
@@ -7680,11 +7680,11 @@ class QuestionnaireComponent {
|
|
|
7680
7680
|
return Object.values(item)[0];
|
|
7681
7681
|
}
|
|
7682
7682
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionnaireComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: SharedService }, { token: i1.ActivatedRoute }, { token: i6$1.DomSanitizer }, { token: i7.NgxSpinnerService }, { token: i3.UntypedFormBuilder }, { token: i9.DeviceDetectorService }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7683
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QuestionnaireComponent, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn", api: "api" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage", handleQuestion: "handleQuestion", handleBook: "handleBook", handleSubmit: "handleSubmit" }, providers: [ChangeService], usesOnChanges: true, ngImport: i0, template: "<!-- Spinner -->\r\n<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- custom loader -->\r\n<!-- <app-loader></app-loader> -->\r\n<!-- Back Processing -->\r\n<!-- <div *ngIf=\"backicon == false\" >\r\n <div class=\"backicon\" >\r\n <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\r\n <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\r\n </button>\r\n </div>\r\n</div> -->\r\n\r\n<!-- Question Hanlding -->\r\n<!-- VD removed unwanted condition -->\r\n<!-- RS 09DEC24 Changed keys-->\r\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\">\r\n <!-- Progress Bar & Title -->\r\n <div *ngIf=\"questionItem.title\">\r\n <h1>{{ questionItem?.title }}</h1>\r\n <div>{{ questionItem?.subTitle }}</div>\r\n </div>\r\n\r\n <!-- Progress & Grouping -->\r\n <div>\r\n <!-- Pie Chart Progress -->\r\n <div [ngClass]=\"{ bgColor: qbItem?.progressBar }\">\r\n <div id=\"nxt-progress\" *ngIf=\"qbItem?.progressBar\">\r\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n [startFromZero]=\"false\" [responsive]=\"false\" >\r\n </circle-progress>\r\n </div>\r\n </div>\r\n <!-- RS 09DEC24 Changed keys-->\r\n <!-- Show the Group/Module related to the Progress -->\r\n <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\r\n [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\r\n <div class=\"nxt-largeTitle\">\r\n <h3 class=\"myt-font6 myt-text3\">\r\n {{ questionItem?.groupName }}\r\n </h3>\r\n <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\r\n <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- RS 09DEC24 Changed keys-->\r\n <!-- Question Handling -->\r\n <!-- VD 10Aug24- question no -->\r\n <div>\r\n <div *ngIf=\"questionItem.questionText\" style=\"display: flex;\">\r\n <span>{{questionItem?.questionNumber}}.</span>\r\n <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n {{questionItem?.questionText}}\r\n </p>\r\n </div>\r\n <!-- Title -->\r\n <!-- <div *ngIf=\"questionItem.isTitle\">\r\n <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \r\n <h3 class=\"questionalign myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n {{questionItem?.questionText}}\r\n </h3>\r\n </div>\r\n </div> -->\r\n <!-- HA 31-JAN-24 Removed the unwanted styling class -->\r\n <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\r\n <div [innerHTML]=\"getText(questionItem?.questionText)\" >\r\n {{ questionItem?.questionText }}\r\n </div>\r\n </div> -->\r\n\r\n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n <!-- <div *ngIf=\"questionItem.type == 'Book'\">\r\n <div *ngIf=\"questionItem.questionNumber=='6'\">\r\n <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n {{ questionItem?.questionText }}\r\n </h3>\r\n </div>\r\n </div> -->\r\n \r\n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n <!-- <div *ngIf=\"questionItem.type == 'File' \">\r\n <div *ngIf=\"questionItem.questionNumber=='9'\">\r\n <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n {{questionItem?.questionText}}\r\n </h3>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Additional Info -->\r\n <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\r\n <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\r\n <div\r\n class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\r\n <div class=\"info-alert ques-alert1\">\r\n <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\r\n <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown-->\r\n <div *ngIf=\"dropdownFlag\" >\r\n <div class=\"nxt-dis-flex\">\r\n <select class=\"nxtdropdown\"\r\n [ngClass]=\"{\r\n 'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\r\n 'custom-select': !qbItem?.progressBar\r\n }\" class=\"mr-sm-2 dd-height nxt-dropbox \" id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\r\n this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\r\n }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\r\n <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\r\n {{ opt.value }}\r\n </option>\r\n <!-- HA 20DEC23 For Translation -->\r\n <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <!--VD Radio update -->\r\n <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\r\n <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\r\n <div class=\"nxt-custom-radio-container\">\r\n <div *ngFor=\"let opt of questionItem.options\" \r\n [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\r\n <input\r\n type=\"radio\"\r\n [id]=\"opt.value\"\r\n [(ngModel)]=\"inpValue\"\r\n name=\"inpValue\"\r\n [value]=\"opt.value\"\r\n (change)=\"optionChange(opt.value)\"\r\n />\r\n <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"nxt-dis-flex\">\r\n <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\r\n <label class=\"nxt-radiocontainer container myt-font4\">\r\n <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\r\n (change)=\"optionChange(opt.value)\" />\r\n {{ opt.value }}\r\n </label>\r\n </div>\r\n </div> -->\r\n </div> \r\n <!-- Checkbox -->\r\n <div *ngIf=\"checkboxFlag\" class=\"\">\r\n <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\r\n {{ questionItem?.errorMessage }}\r\n </div>\r\n <div class=\"nxt-checkbox-container\">\r\n <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\r\n <label class=\"nxt-container1\">\r\n <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\r\n <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Text -->\r\n <div *ngIf=\"textFlag\">\r\n <!-- HA 31-JAN-24 To reduce the margin -->\r\n <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\r\n <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \r\n id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n this.questionItem?.error\r\n ? 'red'\r\n : ''\r\n }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\r\n </div>\r\n </div>\r\n\r\n <!-- Text Area -->\r\n <div *ngIf=\"taFlag\" >\r\n <div>\r\n <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\r\n this.questionItem?.error\r\n ? 'red'\r\n : inpValue?.length > 0 && taFocusOut\r\n ? '#87be1c'\r\n : ''\r\n }}\" (focusout)=\"taFocusOut = true\"\r\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\r\n <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- RS 06JAN25 -->\r\n <!-- for rich text -->\r\n <div *ngIf=\"rtaFlag\">\r\n <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\r\n <app-custom-rich-text\r\n [value]=\"inpValue\"\r\n [question]=\"questionItem\"\r\n [error]=\"questionItem?.error\"\r\n (textValueChange)=\"handleRichTextChange($event)\">\r\n </app-custom-rich-text>\r\n </div>\r\n </div>\r\n \r\n \r\n <!-- <div *ngIf=\"ques.type === 'RichTextArea'\">\r\n\r\n <app-custom-rich-text\r\n [value]=\"ques.input\"\r\n [rows]=\"3\"\r\n [error]=\"ques.error\" [placeholder]=\"ques.question \" \r\n (textValueChange)=\"handleRichTextChange($event)\">\r\n </app-custom-rich-text>\r\n</div> -->\r\n <!-- CC Number Format -->\r\n <!-- RS 09DEC24 Changed keys-->\r\n <div *ngIf=\"numberFlag\" class=\"col-md-12\">\r\n <div class=\"nxt-dis-flex\">\r\n <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\r\n [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\r\n (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\r\n style=\"width:-webkit-fill-available;\" style.border-color=\"{{\r\n this.questionItem.error\r\n ? 'red'\r\n : inpValue?.length > 0\r\n ? '#87be1c'\r\n : ''\r\n }}\" />\r\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\r\n *ngIf=\"inpValue?.length > 0\"></i>\r\n </div>\r\n </div>\r\n <!-- END-->\r\n\r\n <!-- AlphaNumeric -->\r\n <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\r\n <div style=\"position:relative;\">\r\n <!-- HA 20DEC23 For Translation -->\r\n <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\r\n </div>\r\n </div>\r\n\r\n <!-- Email -->\r\n <!-- RS 09DEC24 Changed keys-->\r\n <div *ngIf=\"emailFlag\" class=\"col-md-12\">\r\n <div class=\"nxt-dis-flex\">\r\n <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\r\n required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n this.questionItem.error\r\n ? 'red'\r\n : inpValue?.length > 0\r\n ? '#87be1c'\r\n : ''\r\n }}\" />\r\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\r\n *ngIf=\"inpValue?.length > 0\"></i>\r\n </div>\r\n </div>\r\n\r\n <!-- DateTime -->\r\n <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\r\n <!-- Error Handling -->\r\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n\r\n <!-- Date -->\r\n <div *ngIf=\"dateFlag\">\r\n <div class=\"col-md-12 paddingBottom\">\r\n <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\r\n <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\r\n <div class=\"nxt-dis-flex\">\r\n <!-- HA 20DEC23 For Translation -->\r\n <!-- HA 02FEB24 Additional param to update the question -->\r\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, questionItem)\"\r\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\">\r\n </my-date-picker>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Time -->\r\n <div *ngIf=\"timeFlag\">\r\n <div class=\"col-md-12 paddingBottom\">\r\n <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\r\n <div class=\"nxt-dis-flex\">\r\n <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\r\n dateandTime: !qbItem?.progressBar}\" \r\n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n (focus)=\"(clearSQError) \">\r\n <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n (focus)=\"clearError()\">\r\n <option value=\"\">HH</option>\r\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n {{ hour }}\r\n </option>\r\n </select>\r\n <span class=\"colon\"> : </span>\r\n <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n (focus)=\"clearError()\">\r\n <option value=\"\">MM</option>\r\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n {{ minute }}\r\n </option>\r\n </select>\r\n <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\r\n <span class=\"colon\"> : </span>\r\n <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n <option value=\"AM\">AM</option>\r\n <option value=\"PM\">PM</option>\r\n </select>\r\n <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n </div>\r\n </div>\r\n\r\n <!-- Attachment / File -->\r\n <div *ngIf=\"fileFlag\">\r\n <div *ngIf=\"!qbItem.progressBar\">\r\n <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\r\n <label class=\"picture-upload\" for=\"file-upload\">\r\n <span class=\"picture-upload-child\">\r\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n </span>\r\n <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\r\n <i class=\"\" aria-hidden=\"true\"></i>\r\n </span>\r\n </label>\r\n </div>\r\n <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\r\n </div>\r\n <ul *ngIf=\"\r\n attachments?.length > 0 &&\r\n questionItem?.type === 'File' &&\r\n !qbItem?.progressBar\r\n \" class=\"attach-ulist col-md-12\">\r\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n </li>\r\n </ul>\r\n\r\n <!-- Attachment Progress -->\r\n <div *ngIf=\"qbItem.progressBar\">\r\n <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\r\n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n </div>\r\n <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n \r\n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\r\n <label class=\"file-label \">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\r\n <!-- HA 20DEC23 For Translation -->\r\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\r\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\r\n class=\"file-upload-btn\">\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- RS 09DEC24 Changed keys-->\r\n <!-- Book -->\r\n <div *ngIf=\"bookFlag\">\r\n <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\r\n <div class=\"form-row\">\r\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\r\n *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\r\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\r\n <span>{{ ques?.questionText }}</span>\r\n </div>\r\n <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\r\n <div *ngIf=\"ques.type === 'Date'\">\r\n <div class=\"col-md-12 paddingBottom\">\r\n <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\r\n <div class=\"dateandtime\">\r\n <!-- HA 20DEC23 For Translation -->\r\n <!-- HA 02FEB24 Additional param to update the question -->\r\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, ques)\"\r\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\" >\r\n </my-date-picker>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"ques.type === 'Time'\">\r\n <div class=\"col-md-12 paddingBottom\">\r\n <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\r\n <div class=\"dateandtime\">\r\n <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\r\n dateandTime: !qbItem?.progressBar}\" \r\n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n (focus)=\"(clearSQError) \">\r\n <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n (focus)=\"clearError()\">\r\n <option value=\"\">HH</option>\r\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n {{ hour }}\r\n </option>\r\n </select>\r\n <span class=\"colon\"> : </span>\r\n <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n (focus)=\"clearError()\">\r\n <option value=\"\">MM</option>\r\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n {{ minute }}\r\n </option>\r\n </select>\r\n <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\r\n <span class=\"colon\"> : </span>\r\n <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n <option value=\"AM\">AM</option>\r\n <option value=\"PM\">PM</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"ques.type === 'DateTime'\">\r\n <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\r\n </div>\r\n <!-- VD to show lable-->\r\n <div *ngIf=\"ques.type === 'Label'\">\r\n <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n </app-custom-label>\r\n </div>\r\n <div *ngIf=\"ques.type === 'Text'\">\r\n <label>{{ ques.questionText }}</label>\r\n <app-custom-input\r\n [value]=\"ques?.input\"\r\n [question]=\"ques\" \r\n [idValue]=\"ques?.trackingId\"\r\n [focusEvent]=\"clearSQError(ques?.id)\"\r\n [error]=\"ques?.error\"\r\n [placeholder]=\"ques?.question\"\r\n (inputValue)=\"selectedInput($event,ques)\">\r\n </app-custom-input>\r\n </div>\r\n <div *ngIf=\"ques.type === 'Location'\">\r\n <!-- for pick location -->\r\n <!-- HA10012024 Added Api key as input -->\r\n <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\r\n </div>\r\n <!-- for text area -->\r\n <div *ngIf=\"ques.type === 'TextArea'\">\r\n <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\r\n </div>\r\n\r\n <!-- Email -->\r\n <div *ngIf=\"ques.type === 'Email'\">\r\n <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n </div>\r\n\r\n <div *ngIf=\"ques.type === 'File'\">\r\n <div *ngIf=\"!qbItem.progressBar\">\r\n <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\r\n <span class=\"picture-upload-child\">\r\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n </span>\r\n <span class=\"\r\n fa fa-plus fa-2x\r\n picture-upload-child\r\n pic-upload\r\n icolor\r\n \">\r\n <i class=\"\" aria-hidden=\"true\"></i>\r\n </span>\r\n </label>\r\n <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\r\n </div>\r\n\r\n <ul *ngIf=\"\r\n attachments?.length > 0 &&\r\n ques.type === 'File' &&\r\n !qbItem.progressBar\r\n \" class=\"attach-ulist col-md-12\">\r\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n {{ attachment.attachmentName\r\n }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n </li>\r\n </ul>\r\n <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\r\n\r\n <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\r\n <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n </div>\r\n <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\r\n <span class=\"f-Name\">{{ ques?.question }}</span>\r\n <label class=\"file-label \">\r\n <span style=\"color: #c5281c;text-decoration:underline\">\r\n {{'attach' | i18n:i18nService.currentLanguage}}\r\n </span>\r\n <!-- HA 20DEC23 For Translation -->\r\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\r\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\r\n class=\"file-upload-btn\">\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Table -->\r\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n <app-custom-table \r\n [question]=\"ques\"\r\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n </app-custom-table>\r\n </div>\r\n\r\n <!-- Dropdown -->\r\n <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\r\n <!-- for common dropdown -->\r\n <!-- HA 20DEC23 For Translation -->\r\n <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\r\n [options]=\"ques.options\"\r\n [apiMeta]=\"ques.subText\"\r\n [id]=\"ques.Name\"\r\n [selectedValue]=\"ques.input\"\r\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n [errorMessage]=\"ques?.errorMessage\"\r\n [error]=\"ques?.error\"\r\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n </app-custom-dropdown>\r\n <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\" [certified]=\"ques.certifiedFlag\" [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\r\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n </div> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!--List start-->\r\n <div *ngIf=\"listFlag\">\r\n <div class=\"form-group\">\r\n <div class=\"form-row\">\r\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\r\n *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\r\n <div>\r\n <span class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</span>\r\n </div>\r\n <div *ngIf=\"ques.type === 'Text'\">\r\n <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\r\n 'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\r\n textBox: !qbItem.progressBar\r\n }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\r\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\r\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n </div>\r\n </div>\r\n <div class=\"\" *ngIf=\"addFlag\">\r\n <!-- HA 20DEC23 For Translation -->\r\n <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>{{'add' | i18n:i18nService.currentLanguage}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!--List End-->\r\n\r\n <!-- Actions -->\r\n <!-- VD button condition removed-->\r\n <div class=\"flexer\">\r\n <!-- Backward / Back -->\r\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n <!--VD disabled -->\r\n <div class=\"backbutton\" \r\n [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\r\n <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\r\n 'nxt-left-bt': qbItem.progressBar,\r\n 'nxt-btn btn-primary':\r\n !qbItem.progressBar\r\n }\" (click)=\"handleBackClick()\">\r\n {{ qbItem?.back }}\r\n </button>\r\n </div>\r\n\r\n <!-- Forward / Next -->\r\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n <div *ngIf=\"qbItem.next\" >\r\n <div class=\"nxtbutton\">\r\n <!--VD disabled -->\r\n <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\r\n 'nxt-rusty': qbItem.progressBar,\r\n 'nxt-btn btn-primary':\r\n !qbItem.progressBar\r\n }\" (click)=\"handleNextClick()\">\r\n {{ qbItem.next }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Summary -->\r\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\r\n <h2>{{this.qbItem.summaryText}}</h2>\r\n <p>{{this.qbItem.summarySubText}}</p>\r\n</div>\r\n\r\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\r\n 'col-md-12':!qbItem.progressBar\r\n }\">\r\n <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1> \r\n <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\r\n <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\r\n <div *ngFor=\"let qa of summary\">\r\n <div [ngClass]=\"{ non: qbItem.progressBar }\">\r\n <div [ngClass]=\"{ summary: !qbItem.progressBar }\">\r\n <div *ngIf=\"!qbItem.edit\"\r\n [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\r\n <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\r\n </div>\r\n <!-- VD Question No added -->\r\n <div *ngIf=\"qbItem.edit\"\r\n [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\r\n <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\r\n [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\r\n {{ qa.quesValue }}\r\n </div>\r\n </div>\r\n <div class=\"nxt-answer\" >\r\n <div *ngIf=\"qa.qTyp === 'File'\">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\r\n {{ qa.ansValue }}\r\n </div>\r\n <!-- HA 02FEB24 Displaying the in summary for book type -->\r\n <div *ngIf=\"qa.qTyp == 'Book'\">\r\n <div *ngFor=\"let val of qa.myVal\">\r\n <p>{{ val.questionText }}:<span>{{ val.input }}</span></p>\r\n </div>\r\n </div>\r\n <!-- HA 02FEB24 Displaying the value for direct question -->\r\n <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'\">{{ qa.questionText }} <span></span>{{ qa.ansValue }}</div>\r\n <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\r\n <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\r\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\r\n <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\r\n <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\r\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n [startFromZero]=\"false\" [responsive]=\"false\" >\r\n </circle-progress>\r\n \r\n <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \r\n [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\r\n <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\r\n <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!qbItem.progressBar\">\r\n <h3 class=\"summary-h\">\r\n {{ qbItem.summaryText }}\r\n </h3>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\r\n <div class=\"summary-groupText myt-font2\">\r\n <!-- <p>Informe de da\u00F1o</p> -->\r\n </div>\r\n <div *ngFor=\"let qa of summary\" >\r\n <div [ngClass]=\"{ non: qbItem.progressBar }\">\r\n <div class=\"summary\">\r\n <!-- <div *ngIf=\"!qbItem.edit\"\r\n [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\r\n <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\r\n </div>\r\n <div *ngIf=\"qbItem.edit\"\r\n [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\r\n <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\r\n [innerHTML]=\"getText(qa.quesValue)\">\r\n {{ qa.quesValue }}\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\r\n <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\r\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\r\n </button>\r\n </div>\r\n \r\n <div class=\"nxt-answer\">\r\n <div *ngIf=\"qa.qTyp === 'File'\">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\r\n {{ qa.ansValue }}\r\n </div>\r\n <div *ngIf=\"qa.qTyp != 'File'\">\r\n {{ qa.ansValue }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\r\n <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\r\n <div class=\"col-md-12\">\r\n <button [ngClass]=\"{'btn-text': qbItem.progressBar,\r\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\r\n (click)=\"handleCancelClick()\">\r\n {{ qbItem.cancel }}\r\n </button>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- Group Actions -->\r\n <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\r\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\r\n <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\r\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \r\n (click)=\"handleSubmitClick()\">\r\n {{ qbItem.submit }}\r\n </button>\r\n </div>\r\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\r\n <button [ngClass]=\"{'grey': qbItem.progressBar,\r\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \r\n (click)=\"handleBackClickNew()\">\r\n {{ qbItem.edit }}\r\n </button>\r\n </div> -->\r\n </div>\r\n\r\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-dateTimeNew{margin-left:-14px}.myt-hour{width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.nxt-dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.nxtdate-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.nxtsum-ques{width:55%;margin:auto}.nxtsum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#f8f8f8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.nxtfile-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.nxtfile-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.nxt-left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\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.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }, { kind: "component", type: i13.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { 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: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "error", "errorMessage", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: ["certified", "JobPerformerCertificates"], outputs: ["flagDropDownChange"] }, { 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: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue", "labelStyle"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], encapsulation: i0.ViewEncapsulation.None });
|
|
7683
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QuestionnaireComponent, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn", api: "api" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage", handleQuestion: "handleQuestion", handleBook: "handleBook", handleSubmit: "handleSubmit" }, providers: [ChangeService], usesOnChanges: true, ngImport: i0, template: "<!-- Spinner -->\n<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- custom loader -->\n<!-- <app-loader></app-loader> -->\n<!-- Back Processing -->\n<!-- <div *ngIf=\"backicon == false\" >\n <div class=\"backicon\" >\n <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\n <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\n </button>\n </div>\n</div> -->\n\n<!-- Question Hanlding -->\n<!-- VD removed unwanted condition -->\n<!-- RS 09DEC24 Changed keys-->\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\">\n <!-- Progress Bar & Title -->\n <div *ngIf=\"questionItem.title\">\n <h1>{{ questionItem?.title }}</h1>\n <div>{{ questionItem?.subTitle }}</div>\n </div>\n\n <!-- Progress & Grouping -->\n <div>\n <!-- Pie Chart Progress -->\n <div [ngClass]=\"{ bgColor: qbItem?.progressBar }\">\n <div id=\"nxt-progress\" *ngIf=\"qbItem?.progressBar\">\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n [startFromZero]=\"false\" [responsive]=\"false\" >\n </circle-progress>\n </div>\n </div>\n <!-- RS 09DEC24 Changed keys-->\n <!-- Show the Group/Module related to the Progress -->\n <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\n [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\n <div class=\"nxt-largeTitle\">\n <h3 class=\"myt-font6 myt-text3\">\n {{ questionItem?.groupName }}\n </h3>\n <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\n <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\n </div>\n </div>\n </div>\n <!-- RS 09DEC24 Changed keys-->\n <!-- Question Handling -->\n <!-- VD 10Aug24- question no -->\n <div>\n <div *ngIf=\"questionItem.questionText\" style=\"display: flex;\">\n <span>{{questionItem?.questionNumber}}.</span>\n <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{questionItem?.questionText}}\n </p>\n </div>\n <!-- Title -->\n <!-- <div *ngIf=\"questionItem.isTitle\">\n <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \n <h3 class=\"questionalign myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{questionItem?.questionText}}\n </h3>\n </div>\n </div> -->\n <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\n <div [innerHTML]=\"getText(questionItem?.questionText)\" >\n {{ questionItem?.questionText }}\n </div>\n </div> -->\n\n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n <!-- <div *ngIf=\"questionItem.type == 'Book'\">\n <div *ngIf=\"questionItem.questionNumber=='6'\">\n <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{ questionItem?.questionText }}\n </h3>\n </div>\n </div> -->\n \n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n <!-- <div *ngIf=\"questionItem.type == 'File' \">\n <div *ngIf=\"questionItem.questionNumber=='9'\">\n <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{questionItem?.questionText}}\n </h3>\n </div>\n </div> -->\n </div>\n\n <!-- Additional Info -->\n <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\n <div\n class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\n </div>\n </div>\n <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\n <div class=\"info-alert ques-alert1\">\n <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\n <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n </div>\n </div>\n\n <!-- Dropdown-->\n <div *ngIf=\"dropdownFlag\" >\n <div class=\"nxt-dis-flex\">\n <select class=\"nxtdropdown\"\n [ngClass]=\"{\n 'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\n 'custom-select': !qbItem?.progressBar\n }\" class=\"mr-sm-2 dd-height nxt-dropbox \" id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\n <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\n {{ opt.value }}\n </option>\n <!-- HA 20DEC23 For Translation -->\n <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\n </select>\n </div>\n </div>\n\n <!--VD Radio update -->\n <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\n <div class=\"nxt-custom-radio-container\">\n <div *ngFor=\"let opt of questionItem.options\" \n [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\n <input\n type=\"radio\"\n [id]=\"opt.value\"\n [(ngModel)]=\"inpValue\"\n name=\"inpValue\"\n [value]=\"opt.value\"\n (change)=\"optionChange(opt.value)\"\n />\n <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\n </div>\n </div>\n\n <!-- <div class=\"nxt-dis-flex\">\n <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\n <label class=\"nxt-radiocontainer container myt-font4\">\n <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\n (change)=\"optionChange(opt.value)\" />\n {{ opt.value }}\n </label>\n </div>\n </div> -->\n </div> \n <!-- Checkbox -->\n <div *ngIf=\"checkboxFlag\" class=\"\">\n <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\n {{ questionItem?.errorMessage }}\n </div>\n <div class=\"nxt-checkbox-container\">\n <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\n <label class=\"nxt-container1\">\n <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\n </label>\n </div>\n </div>\n </div>\n\n <!-- Text -->\n <div *ngIf=\"textFlag\">\n <!-- HA 31-JAN-24 To reduce the margin -->\n <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\n <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \n id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error\n ? 'red'\n : ''\n }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\n </div>\n </div>\n\n <!-- Text Area -->\n <div *ngIf=\"taFlag\" >\n <div>\n <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error\n ? 'red'\n : inpValue?.length > 0 && taFocusOut\n ? '#87be1c'\n : ''\n }}\" (focusout)=\"taFocusOut = true\"\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\n </div>\n </div>\n\n\n <!-- RS 06JAN25 -->\n <!-- for rich text -->\n <div *ngIf=\"rtaFlag\">\n <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\n <app-custom-rich-text\n [value]=\"inpValue\"\n [question]=\"questionItem\"\n [error]=\"questionItem?.error\"\n (textValueChange)=\"handleRichTextChange($event)\">\n </app-custom-rich-text>\n </div>\n </div>\n \n \n <!-- <div *ngIf=\"ques.type === 'RichTextArea'\">\n\n <app-custom-rich-text\n [value]=\"ques.input\"\n [rows]=\"3\"\n [error]=\"ques.error\" [placeholder]=\"ques.question \" \n (textValueChange)=\"handleRichTextChange($event)\">\n </app-custom-rich-text>\n</div> -->\n <!-- CC Number Format -->\n <!-- RS 09DEC24 Changed keys-->\n <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n <div class=\"nxt-dis-flex\">\n <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\n [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n this.questionItem.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" />\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\n *ngIf=\"inpValue?.length > 0\"></i>\n </div>\n </div>\n <!-- END-->\n\n <!-- AlphaNumeric -->\n <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n <div style=\"position:relative;\">\n <!-- HA 20DEC23 For Translation -->\n <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n </div>\n </div>\n\n <!-- Email -->\n <!-- RS 09DEC24 Changed keys-->\n <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n <div class=\"nxt-dis-flex\">\n <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n this.questionItem.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" />\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\n *ngIf=\"inpValue?.length > 0\"></i>\n </div>\n </div>\n\n <!-- DateTime -->\n <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\n <!-- Error Handling -->\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n <!-- Date -->\n <div *ngIf=\"dateFlag\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\n <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n <div class=\"nxt-dis-flex\">\n <!-- HA 20DEC23 For Translation -->\n <!-- HA 02FEB24 Additional param to update the question -->\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, questionItem)\"\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\">\n </my-date-picker>\n </div>\n </div>\n </div>\n\n <!-- Time -->\n <div *ngIf=\"timeFlag\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n <div class=\"nxt-dis-flex\">\n <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n dateandTime: !qbItem?.progressBar}\" \n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n (focus)=\"(clearSQError) \">\n <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n (focus)=\"clearError()\">\n <option value=\"\">HH</option>\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n {{ hour }}\n </option>\n </select>\n <span class=\"colon\"> : </span>\n <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n (focus)=\"clearError()\">\n <option value=\"\">MM</option>\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n {{ minute }}\n </option>\n </select>\n <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\n <span class=\"colon\"> : </span>\n <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n <option value=\"AM\">AM</option>\n <option value=\"PM\">PM</option>\n </select>\n <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\n </div>\n </div>\n </div>\n </div>\n <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n </div>\n </div>\n\n <!-- Attachment / File -->\n <div *ngIf=\"fileFlag\">\n <div *ngIf=\"!qbItem.progressBar\">\n <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n <label class=\"picture-upload\" for=\"file-upload\">\n <span class=\"picture-upload-child\">\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\n <i class=\"\" aria-hidden=\"true\"></i>\n </span>\n </label>\n </div>\n <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\n </div>\n <ul *ngIf=\"\n attachments?.length > 0 &&\n questionItem?.type === 'File' &&\n !qbItem?.progressBar\n \" class=\"attach-ulist col-md-12\">\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n </li>\n </ul>\n\n <!-- Attachment Progress -->\n <div *ngIf=\"qbItem.progressBar\">\n <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\n </div>\n <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n \n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\n <label class=\"file-label \">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n class=\"file-upload-btn\">\n </label>\n </div>\n </div>\n </div>\n <!-- RS 09DEC24 Changed keys-->\n <!-- Book -->\n <div *ngIf=\"bookFlag\">\n <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\n <div class=\"form-row\">\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\n *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\n <span>{{ ques?.questionText }}</span>\n </div>\n <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\n <div *ngIf=\"ques.type === 'Date'\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n <div class=\"dateandtime\">\n <!-- HA 20DEC23 For Translation -->\n <!-- HA 02FEB24 Additional param to update the question -->\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, ques)\"\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\" >\n </my-date-picker>\n </div>\n </div>\n </div>\n <div *ngIf=\"ques.type === 'Time'\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n <div class=\"dateandtime\">\n <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n dateandTime: !qbItem?.progressBar}\" \n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n (focus)=\"(clearSQError) \">\n <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n (focus)=\"clearError()\">\n <option value=\"\">HH</option>\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n {{ hour }}\n </option>\n </select>\n <span class=\"colon\"> : </span>\n <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n (focus)=\"clearError()\">\n <option value=\"\">MM</option>\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n {{ minute }}\n </option>\n </select>\n <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\n <span class=\"colon\"> : </span>\n <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n <option value=\"AM\">AM</option>\n <option value=\"PM\">PM</option>\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"ques.type === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\n </div>\n <!-- VD to show lable-->\n <div *ngIf=\"ques.type === 'Label'\">\n <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n </app-custom-label>\n </div>\n <div *ngIf=\"ques.type === 'Text'\">\n <label>{{ ques.questionText }}</label>\n <app-custom-input\n [value]=\"ques?.input\"\n [question]=\"ques\" \n [idValue]=\"ques?.trackingId\"\n [focusEvent]=\"clearSQError(ques?.id)\"\n [error]=\"ques?.error\"\n [placeholder]=\"ques?.question\"\n (inputValue)=\"selectedInput($event,ques)\">\n </app-custom-input>\n </div>\n <div *ngIf=\"ques.type === 'Location'\">\n <!-- for pick location -->\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n </div>\n <!-- for text area -->\n <div *ngIf=\"ques.type === 'TextArea'\">\n <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.type === 'Email'\">\n <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n </div>\n\n <div *ngIf=\"ques.type === 'File'\">\n <div *ngIf=\"!qbItem.progressBar\">\n <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n <span class=\"picture-upload-child\">\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"\n fa fa-plus fa-2x\n picture-upload-child\n pic-upload\n icolor\n \">\n <i class=\"\" aria-hidden=\"true\"></i>\n </span>\n </label>\n <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n </div>\n\n <ul *ngIf=\"\n attachments?.length > 0 &&\n ques.type === 'File' &&\n !qbItem.progressBar\n \" class=\"attach-ulist col-md-12\">\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n {{ attachment.attachmentName\n }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n </li>\n </ul>\n <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\n\n <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\n </div>\n <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n <span class=\"f-Name\">{{ ques?.question }}</span>\n <label class=\"file-label \">\n <span style=\"color: #c5281c;text-decoration:underline\">\n {{'attach' | i18n:i18nService.currentLanguage}}\n </span>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n class=\"file-upload-btn\">\n </label>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n <app-custom-table \n [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-table>\n </div>\n\n <!-- Dropdown -->\n <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\n <!-- for common dropdown -->\n <!-- HA 20DEC23 For Translation -->\n <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\n [options]=\"ques.options\"\n [apiMeta]=\"ques.subText\"\n [id]=\"ques.Name\"\n [selectedValue]=\"ques.input\"\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques?.errorMessage\"\n [error]=\"ques?.error\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-dropdown>\n <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\" [certified]=\"ques.certifiedFlag\" [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n </div> \n </div>\n </div>\n </div>\n </div>\n\n <!--List start-->\n <div *ngIf=\"listFlag\">\n <div class=\"form-group\">\n <div class=\"form-row\">\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\n *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\n <div>\n <span class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</span>\n </div>\n <div *ngIf=\"ques.type === 'Text'\">\n <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n 'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\n textBox: !qbItem.progressBar\n }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n </div>\n </div>\n <div class=\"\" *ngIf=\"addFlag\">\n <!-- HA 20DEC23 For Translation -->\n <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>{{'add' | i18n:i18nService.currentLanguage}}</button>\n </div>\n </div>\n </div>\n </div>\n <!--List End-->\n\n <!-- Actions -->\n <!-- VD button condition removed-->\n <div class=\"flexer\">\n <!-- Backward / Back -->\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <!--VD disabled -->\n <div class=\"backbutton\" \n [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\n <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n 'nxt-left-bt': qbItem.progressBar,\n 'nxt-btn btn-primary':\n !qbItem.progressBar\n }\" (click)=\"handleBackClick()\">\n {{ qbItem?.back }}\n </button>\n </div>\n\n <!-- Forward / Next -->\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div *ngIf=\"qbItem.next\" >\n <div class=\"nxtbutton\">\n <!--VD disabled -->\n <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n 'nxt-rusty': qbItem.progressBar,\n 'nxt-btn btn-primary':\n !qbItem.progressBar\n }\" (click)=\"handleNextClick()\">\n {{ qbItem.next }}\n </button>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\n <h2>{{this.qbItem.summaryText}}</h2>\n <p>{{this.qbItem.summarySubText}}</p>\n</div>\n\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n 'col-md-12':!qbItem.progressBar\n }\">\n <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1> \n <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\n <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n <div *ngFor=\"let qa of summary\">\n <div [ngClass]=\"{ non: qbItem.progressBar }\">\n <div [ngClass]=\"{ summary: !qbItem.progressBar }\">\n <div *ngIf=\"!qbItem.edit\"\n [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\n </div>\n <!-- VD Question No added -->\n <div *ngIf=\"qbItem.edit\"\n [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\n [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\n {{ qa.quesValue }}\n </div>\n </div>\n <div class=\"nxt-answer\" >\n <div *ngIf=\"qa.qTyp === 'File'\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n {{ qa.ansValue }}\n </div>\n <!-- HA 02FEB24 Displaying the in summary for book type -->\n <div *ngIf=\"qa.qTyp == 'Book'\">\n <div *ngFor=\"let val of qa.myVal\">\n <p>{{ val.questionText }}:<span>{{ val.input }}</span></p>\n </div>\n </div>\n <!-- HA 02FEB24 Displaying the value for direct question -->\n <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'\">{{ qa.questionText }} <span></span>{{ qa.ansValue }}</div>\n <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n\n <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\n <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\n <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n [startFromZero]=\"false\" [responsive]=\"false\" >\n </circle-progress>\n \n <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \n [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\n <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\n <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\n </div>\n </div>\n <div *ngIf=\"!qbItem.progressBar\">\n <h3 class=\"summary-h\">\n {{ qbItem.summaryText }}\n </h3>\n </div>\n </div>\n <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n <div class=\"summary-groupText myt-font2\">\n <!-- <p>Informe de da\u00F1o</p> -->\n </div>\n <div *ngFor=\"let qa of summary\" >\n <div [ngClass]=\"{ non: qbItem.progressBar }\">\n <div class=\"summary\">\n <!-- <div *ngIf=\"!qbItem.edit\"\n [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n </div>\n <div *ngIf=\"qbItem.edit\"\n [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\n [innerHTML]=\"getText(qa.quesValue)\">\n {{ qa.quesValue }}\n </div>\n </div> -->\n <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n </button>\n </div>\n \n <div class=\"nxt-answer\">\n <div *ngIf=\"qa.qTyp === 'File'\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n {{ qa.ansValue }}\n </div>\n <div *ngIf=\"qa.qTyp != 'File'\">\n {{ qa.ansValue }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\n <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\n <div class=\"col-md-12\">\n <button [ngClass]=\"{'btn-text': qbItem.progressBar,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\n (click)=\"handleCancelClick()\">\n {{ qbItem.cancel }}\n </button>\n </div>\n </div>\n </div> -->\n\n <!-- Group Actions -->\n <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\n <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \n (click)=\"handleSubmitClick()\">\n {{ qbItem.submit }}\n </button>\n </div>\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\n <button [ngClass]=\"{'grey': qbItem.progressBar,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \n (click)=\"handleBackClickNew()\">\n {{ qbItem.edit }}\n </button>\n </div> -->\n </div>\n\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-dateTimeNew{margin-left:-14px}.myt-hour{width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.nxt-dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.nxtdate-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.nxtsum-ques{width:55%;margin:auto}.nxtsum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#f8f8f8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.nxtfile-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.nxtfile-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.nxt-left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\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.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }, { kind: "component", type: i13.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { 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: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "error", "errorMessage", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: ["certified", "JobPerformerCertificates"], outputs: ["flagDropDownChange"] }, { 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: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue", "labelStyle"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], encapsulation: i0.ViewEncapsulation.None });
|
|
7684
7684
|
}
|
|
7685
7685
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionnaireComponent, decorators: [{
|
|
7686
7686
|
type: Component,
|
|
7687
|
-
args: [{ selector: "lib-questionnaire", encapsulation: ViewEncapsulation.None, providers: [ChangeService], template: "<!-- Spinner -->\r\n<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- custom loader -->\r\n<!-- <app-loader></app-loader> -->\r\n<!-- Back Processing -->\r\n<!-- <div *ngIf=\"backicon == false\" >\r\n <div class=\"backicon\" >\r\n <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\r\n <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\r\n </button>\r\n </div>\r\n</div> -->\r\n\r\n<!-- Question Hanlding -->\r\n<!-- VD removed unwanted condition -->\r\n<!-- RS 09DEC24 Changed keys-->\r\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\">\r\n <!-- Progress Bar & Title -->\r\n <div *ngIf=\"questionItem.title\">\r\n <h1>{{ questionItem?.title }}</h1>\r\n <div>{{ questionItem?.subTitle }}</div>\r\n </div>\r\n\r\n <!-- Progress & Grouping -->\r\n <div>\r\n <!-- Pie Chart Progress -->\r\n <div [ngClass]=\"{ bgColor: qbItem?.progressBar }\">\r\n <div id=\"nxt-progress\" *ngIf=\"qbItem?.progressBar\">\r\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n [startFromZero]=\"false\" [responsive]=\"false\" >\r\n </circle-progress>\r\n </div>\r\n </div>\r\n <!-- RS 09DEC24 Changed keys-->\r\n <!-- Show the Group/Module related to the Progress -->\r\n <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\r\n [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\r\n <div class=\"nxt-largeTitle\">\r\n <h3 class=\"myt-font6 myt-text3\">\r\n {{ questionItem?.groupName }}\r\n </h3>\r\n <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\r\n <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- RS 09DEC24 Changed keys-->\r\n <!-- Question Handling -->\r\n <!-- VD 10Aug24- question no -->\r\n <div>\r\n <div *ngIf=\"questionItem.questionText\" style=\"display: flex;\">\r\n <span>{{questionItem?.questionNumber}}.</span>\r\n <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n {{questionItem?.questionText}}\r\n </p>\r\n </div>\r\n <!-- Title -->\r\n <!-- <div *ngIf=\"questionItem.isTitle\">\r\n <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \r\n <h3 class=\"questionalign myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n {{questionItem?.questionText}}\r\n </h3>\r\n </div>\r\n </div> -->\r\n <!-- HA 31-JAN-24 Removed the unwanted styling class -->\r\n <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\r\n <div [innerHTML]=\"getText(questionItem?.questionText)\" >\r\n {{ questionItem?.questionText }}\r\n </div>\r\n </div> -->\r\n\r\n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n <!-- <div *ngIf=\"questionItem.type == 'Book'\">\r\n <div *ngIf=\"questionItem.questionNumber=='6'\">\r\n <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n {{ questionItem?.questionText }}\r\n </h3>\r\n </div>\r\n </div> -->\r\n \r\n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n <!-- <div *ngIf=\"questionItem.type == 'File' \">\r\n <div *ngIf=\"questionItem.questionNumber=='9'\">\r\n <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n {{questionItem?.questionText}}\r\n </h3>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Additional Info -->\r\n <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\r\n <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\r\n <div\r\n class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\r\n <div class=\"info-alert ques-alert1\">\r\n <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\r\n <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown-->\r\n <div *ngIf=\"dropdownFlag\" >\r\n <div class=\"nxt-dis-flex\">\r\n <select class=\"nxtdropdown\"\r\n [ngClass]=\"{\r\n 'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\r\n 'custom-select': !qbItem?.progressBar\r\n }\" class=\"mr-sm-2 dd-height nxt-dropbox \" id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\r\n this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\r\n }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\r\n <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\r\n {{ opt.value }}\r\n </option>\r\n <!-- HA 20DEC23 For Translation -->\r\n <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <!--VD Radio update -->\r\n <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\r\n <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\r\n <div class=\"nxt-custom-radio-container\">\r\n <div *ngFor=\"let opt of questionItem.options\" \r\n [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\r\n <input\r\n type=\"radio\"\r\n [id]=\"opt.value\"\r\n [(ngModel)]=\"inpValue\"\r\n name=\"inpValue\"\r\n [value]=\"opt.value\"\r\n (change)=\"optionChange(opt.value)\"\r\n />\r\n <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"nxt-dis-flex\">\r\n <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\r\n <label class=\"nxt-radiocontainer container myt-font4\">\r\n <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\r\n (change)=\"optionChange(opt.value)\" />\r\n {{ opt.value }}\r\n </label>\r\n </div>\r\n </div> -->\r\n </div> \r\n <!-- Checkbox -->\r\n <div *ngIf=\"checkboxFlag\" class=\"\">\r\n <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\r\n {{ questionItem?.errorMessage }}\r\n </div>\r\n <div class=\"nxt-checkbox-container\">\r\n <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\r\n <label class=\"nxt-container1\">\r\n <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\r\n <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Text -->\r\n <div *ngIf=\"textFlag\">\r\n <!-- HA 31-JAN-24 To reduce the margin -->\r\n <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\r\n <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \r\n id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n this.questionItem?.error\r\n ? 'red'\r\n : ''\r\n }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\r\n </div>\r\n </div>\r\n\r\n <!-- Text Area -->\r\n <div *ngIf=\"taFlag\" >\r\n <div>\r\n <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\r\n this.questionItem?.error\r\n ? 'red'\r\n : inpValue?.length > 0 && taFocusOut\r\n ? '#87be1c'\r\n : ''\r\n }}\" (focusout)=\"taFocusOut = true\"\r\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\r\n <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- RS 06JAN25 -->\r\n <!-- for rich text -->\r\n <div *ngIf=\"rtaFlag\">\r\n <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\r\n <app-custom-rich-text\r\n [value]=\"inpValue\"\r\n [question]=\"questionItem\"\r\n [error]=\"questionItem?.error\"\r\n (textValueChange)=\"handleRichTextChange($event)\">\r\n </app-custom-rich-text>\r\n </div>\r\n </div>\r\n \r\n \r\n <!-- <div *ngIf=\"ques.type === 'RichTextArea'\">\r\n\r\n <app-custom-rich-text\r\n [value]=\"ques.input\"\r\n [rows]=\"3\"\r\n [error]=\"ques.error\" [placeholder]=\"ques.question \" \r\n (textValueChange)=\"handleRichTextChange($event)\">\r\n </app-custom-rich-text>\r\n</div> -->\r\n <!-- CC Number Format -->\r\n <!-- RS 09DEC24 Changed keys-->\r\n <div *ngIf=\"numberFlag\" class=\"col-md-12\">\r\n <div class=\"nxt-dis-flex\">\r\n <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\r\n [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\r\n (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\r\n style=\"width:-webkit-fill-available;\" style.border-color=\"{{\r\n this.questionItem.error\r\n ? 'red'\r\n : inpValue?.length > 0\r\n ? '#87be1c'\r\n : ''\r\n }}\" />\r\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\r\n *ngIf=\"inpValue?.length > 0\"></i>\r\n </div>\r\n </div>\r\n <!-- END-->\r\n\r\n <!-- AlphaNumeric -->\r\n <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\r\n <div style=\"position:relative;\">\r\n <!-- HA 20DEC23 For Translation -->\r\n <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\r\n </div>\r\n </div>\r\n\r\n <!-- Email -->\r\n <!-- RS 09DEC24 Changed keys-->\r\n <div *ngIf=\"emailFlag\" class=\"col-md-12\">\r\n <div class=\"nxt-dis-flex\">\r\n <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\r\n required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n this.questionItem.error\r\n ? 'red'\r\n : inpValue?.length > 0\r\n ? '#87be1c'\r\n : ''\r\n }}\" />\r\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\r\n *ngIf=\"inpValue?.length > 0\"></i>\r\n </div>\r\n </div>\r\n\r\n <!-- DateTime -->\r\n <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\r\n <!-- Error Handling -->\r\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n\r\n <!-- Date -->\r\n <div *ngIf=\"dateFlag\">\r\n <div class=\"col-md-12 paddingBottom\">\r\n <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\r\n <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\r\n <div class=\"nxt-dis-flex\">\r\n <!-- HA 20DEC23 For Translation -->\r\n <!-- HA 02FEB24 Additional param to update the question -->\r\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, questionItem)\"\r\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\">\r\n </my-date-picker>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Time -->\r\n <div *ngIf=\"timeFlag\">\r\n <div class=\"col-md-12 paddingBottom\">\r\n <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\r\n <div class=\"nxt-dis-flex\">\r\n <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\r\n dateandTime: !qbItem?.progressBar}\" \r\n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n (focus)=\"(clearSQError) \">\r\n <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n (focus)=\"clearError()\">\r\n <option value=\"\">HH</option>\r\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n {{ hour }}\r\n </option>\r\n </select>\r\n <span class=\"colon\"> : </span>\r\n <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n (focus)=\"clearError()\">\r\n <option value=\"\">MM</option>\r\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n {{ minute }}\r\n </option>\r\n </select>\r\n <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\r\n <span class=\"colon\"> : </span>\r\n <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n <option value=\"AM\">AM</option>\r\n <option value=\"PM\">PM</option>\r\n </select>\r\n <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n </div>\r\n </div>\r\n\r\n <!-- Attachment / File -->\r\n <div *ngIf=\"fileFlag\">\r\n <div *ngIf=\"!qbItem.progressBar\">\r\n <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\r\n <label class=\"picture-upload\" for=\"file-upload\">\r\n <span class=\"picture-upload-child\">\r\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n </span>\r\n <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\r\n <i class=\"\" aria-hidden=\"true\"></i>\r\n </span>\r\n </label>\r\n </div>\r\n <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\r\n </div>\r\n <ul *ngIf=\"\r\n attachments?.length > 0 &&\r\n questionItem?.type === 'File' &&\r\n !qbItem?.progressBar\r\n \" class=\"attach-ulist col-md-12\">\r\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n </li>\r\n </ul>\r\n\r\n <!-- Attachment Progress -->\r\n <div *ngIf=\"qbItem.progressBar\">\r\n <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\r\n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n </div>\r\n <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n \r\n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\r\n <label class=\"file-label \">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\r\n <!-- HA 20DEC23 For Translation -->\r\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\r\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\r\n class=\"file-upload-btn\">\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- RS 09DEC24 Changed keys-->\r\n <!-- Book -->\r\n <div *ngIf=\"bookFlag\">\r\n <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\r\n <div class=\"form-row\">\r\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\r\n *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\r\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\r\n <span>{{ ques?.questionText }}</span>\r\n </div>\r\n <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\r\n <div *ngIf=\"ques.type === 'Date'\">\r\n <div class=\"col-md-12 paddingBottom\">\r\n <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\r\n <div class=\"dateandtime\">\r\n <!-- HA 20DEC23 For Translation -->\r\n <!-- HA 02FEB24 Additional param to update the question -->\r\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, ques)\"\r\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\" >\r\n </my-date-picker>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"ques.type === 'Time'\">\r\n <div class=\"col-md-12 paddingBottom\">\r\n <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\r\n <div class=\"dateandtime\">\r\n <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\r\n dateandTime: !qbItem?.progressBar}\" \r\n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n (focus)=\"(clearSQError) \">\r\n <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n (focus)=\"clearError()\">\r\n <option value=\"\">HH</option>\r\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n {{ hour }}\r\n </option>\r\n </select>\r\n <span class=\"colon\"> : </span>\r\n <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n (focus)=\"clearError()\">\r\n <option value=\"\">MM</option>\r\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n {{ minute }}\r\n </option>\r\n </select>\r\n <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\r\n <span class=\"colon\"> : </span>\r\n <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n <option value=\"AM\">AM</option>\r\n <option value=\"PM\">PM</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"ques.type === 'DateTime'\">\r\n <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\r\n </div>\r\n <!-- VD to show lable-->\r\n <div *ngIf=\"ques.type === 'Label'\">\r\n <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n </app-custom-label>\r\n </div>\r\n <div *ngIf=\"ques.type === 'Text'\">\r\n <label>{{ ques.questionText }}</label>\r\n <app-custom-input\r\n [value]=\"ques?.input\"\r\n [question]=\"ques\" \r\n [idValue]=\"ques?.trackingId\"\r\n [focusEvent]=\"clearSQError(ques?.id)\"\r\n [error]=\"ques?.error\"\r\n [placeholder]=\"ques?.question\"\r\n (inputValue)=\"selectedInput($event,ques)\">\r\n </app-custom-input>\r\n </div>\r\n <div *ngIf=\"ques.type === 'Location'\">\r\n <!-- for pick location -->\r\n <!-- HA10012024 Added Api key as input -->\r\n <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\r\n </div>\r\n <!-- for text area -->\r\n <div *ngIf=\"ques.type === 'TextArea'\">\r\n <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\r\n </div>\r\n\r\n <!-- Email -->\r\n <div *ngIf=\"ques.type === 'Email'\">\r\n <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n </div>\r\n\r\n <div *ngIf=\"ques.type === 'File'\">\r\n <div *ngIf=\"!qbItem.progressBar\">\r\n <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\r\n <span class=\"picture-upload-child\">\r\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n </span>\r\n <span class=\"\r\n fa fa-plus fa-2x\r\n picture-upload-child\r\n pic-upload\r\n icolor\r\n \">\r\n <i class=\"\" aria-hidden=\"true\"></i>\r\n </span>\r\n </label>\r\n <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\r\n </div>\r\n\r\n <ul *ngIf=\"\r\n attachments?.length > 0 &&\r\n ques.type === 'File' &&\r\n !qbItem.progressBar\r\n \" class=\"attach-ulist col-md-12\">\r\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n {{ attachment.attachmentName\r\n }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n </li>\r\n </ul>\r\n <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\r\n\r\n <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\r\n <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n </div>\r\n <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\r\n <span class=\"f-Name\">{{ ques?.question }}</span>\r\n <label class=\"file-label \">\r\n <span style=\"color: #c5281c;text-decoration:underline\">\r\n {{'attach' | i18n:i18nService.currentLanguage}}\r\n </span>\r\n <!-- HA 20DEC23 For Translation -->\r\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\r\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\r\n class=\"file-upload-btn\">\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Table -->\r\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n <app-custom-table \r\n [question]=\"ques\"\r\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n </app-custom-table>\r\n </div>\r\n\r\n <!-- Dropdown -->\r\n <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\r\n <!-- for common dropdown -->\r\n <!-- HA 20DEC23 For Translation -->\r\n <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\r\n [options]=\"ques.options\"\r\n [apiMeta]=\"ques.subText\"\r\n [id]=\"ques.Name\"\r\n [selectedValue]=\"ques.input\"\r\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n [errorMessage]=\"ques?.errorMessage\"\r\n [error]=\"ques?.error\"\r\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n </app-custom-dropdown>\r\n <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\" [certified]=\"ques.certifiedFlag\" [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\r\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n </div> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!--List start-->\r\n <div *ngIf=\"listFlag\">\r\n <div class=\"form-group\">\r\n <div class=\"form-row\">\r\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\r\n *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\r\n <div>\r\n <span class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</span>\r\n </div>\r\n <div *ngIf=\"ques.type === 'Text'\">\r\n <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\r\n 'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\r\n textBox: !qbItem.progressBar\r\n }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\r\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\r\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n </div>\r\n </div>\r\n <div class=\"\" *ngIf=\"addFlag\">\r\n <!-- HA 20DEC23 For Translation -->\r\n <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>{{'add' | i18n:i18nService.currentLanguage}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!--List End-->\r\n\r\n <!-- Actions -->\r\n <!-- VD button condition removed-->\r\n <div class=\"flexer\">\r\n <!-- Backward / Back -->\r\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n <!--VD disabled -->\r\n <div class=\"backbutton\" \r\n [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\r\n <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\r\n 'nxt-left-bt': qbItem.progressBar,\r\n 'nxt-btn btn-primary':\r\n !qbItem.progressBar\r\n }\" (click)=\"handleBackClick()\">\r\n {{ qbItem?.back }}\r\n </button>\r\n </div>\r\n\r\n <!-- Forward / Next -->\r\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n <div *ngIf=\"qbItem.next\" >\r\n <div class=\"nxtbutton\">\r\n <!--VD disabled -->\r\n <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\r\n 'nxt-rusty': qbItem.progressBar,\r\n 'nxt-btn btn-primary':\r\n !qbItem.progressBar\r\n }\" (click)=\"handleNextClick()\">\r\n {{ qbItem.next }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Summary -->\r\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\r\n <h2>{{this.qbItem.summaryText}}</h2>\r\n <p>{{this.qbItem.summarySubText}}</p>\r\n</div>\r\n\r\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\r\n 'col-md-12':!qbItem.progressBar\r\n }\">\r\n <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1> \r\n <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\r\n <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\r\n <div *ngFor=\"let qa of summary\">\r\n <div [ngClass]=\"{ non: qbItem.progressBar }\">\r\n <div [ngClass]=\"{ summary: !qbItem.progressBar }\">\r\n <div *ngIf=\"!qbItem.edit\"\r\n [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\r\n <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\r\n </div>\r\n <!-- VD Question No added -->\r\n <div *ngIf=\"qbItem.edit\"\r\n [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\r\n <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\r\n [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\r\n {{ qa.quesValue }}\r\n </div>\r\n </div>\r\n <div class=\"nxt-answer\" >\r\n <div *ngIf=\"qa.qTyp === 'File'\">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\r\n {{ qa.ansValue }}\r\n </div>\r\n <!-- HA 02FEB24 Displaying the in summary for book type -->\r\n <div *ngIf=\"qa.qTyp == 'Book'\">\r\n <div *ngFor=\"let val of qa.myVal\">\r\n <p>{{ val.questionText }}:<span>{{ val.input }}</span></p>\r\n </div>\r\n </div>\r\n <!-- HA 02FEB24 Displaying the value for direct question -->\r\n <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'\">{{ qa.questionText }} <span></span>{{ qa.ansValue }}</div>\r\n <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\r\n <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\r\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\r\n <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\r\n <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\r\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n [startFromZero]=\"false\" [responsive]=\"false\" >\r\n </circle-progress>\r\n \r\n <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \r\n [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\r\n <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\r\n <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!qbItem.progressBar\">\r\n <h3 class=\"summary-h\">\r\n {{ qbItem.summaryText }}\r\n </h3>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\r\n <div class=\"summary-groupText myt-font2\">\r\n <!-- <p>Informe de da\u00F1o</p> -->\r\n </div>\r\n <div *ngFor=\"let qa of summary\" >\r\n <div [ngClass]=\"{ non: qbItem.progressBar }\">\r\n <div class=\"summary\">\r\n <!-- <div *ngIf=\"!qbItem.edit\"\r\n [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\r\n <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\r\n </div>\r\n <div *ngIf=\"qbItem.edit\"\r\n [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\r\n <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\r\n [innerHTML]=\"getText(qa.quesValue)\">\r\n {{ qa.quesValue }}\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\r\n <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\r\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\r\n </button>\r\n </div>\r\n \r\n <div class=\"nxt-answer\">\r\n <div *ngIf=\"qa.qTyp === 'File'\">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\r\n {{ qa.ansValue }}\r\n </div>\r\n <div *ngIf=\"qa.qTyp != 'File'\">\r\n {{ qa.ansValue }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\r\n <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\r\n <div class=\"col-md-12\">\r\n <button [ngClass]=\"{'btn-text': qbItem.progressBar,\r\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\r\n (click)=\"handleCancelClick()\">\r\n {{ qbItem.cancel }}\r\n </button>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- Group Actions -->\r\n <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\r\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\r\n <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\r\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \r\n (click)=\"handleSubmitClick()\">\r\n {{ qbItem.submit }}\r\n </button>\r\n </div>\r\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\r\n <button [ngClass]=\"{'grey': qbItem.progressBar,\r\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \r\n (click)=\"handleBackClickNew()\">\r\n {{ qbItem.edit }}\r\n </button>\r\n </div> -->\r\n </div>\r\n\r\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-dateTimeNew{margin-left:-14px}.myt-hour{width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.nxt-dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.nxtdate-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.nxtsum-ques{width:55%;margin:auto}.nxtsum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#f8f8f8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.nxtfile-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.nxtfile-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.nxt-left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"] }]
|
|
7687
|
+
args: [{ selector: "lib-questionnaire", encapsulation: ViewEncapsulation.None, providers: [ChangeService], template: "<!-- Spinner -->\n<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- custom loader -->\n<!-- <app-loader></app-loader> -->\n<!-- Back Processing -->\n<!-- <div *ngIf=\"backicon == false\" >\n <div class=\"backicon\" >\n <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\n <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\n </button>\n </div>\n</div> -->\n\n<!-- Question Hanlding -->\n<!-- VD removed unwanted condition -->\n<!-- RS 09DEC24 Changed keys-->\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\">\n <!-- Progress Bar & Title -->\n <div *ngIf=\"questionItem.title\">\n <h1>{{ questionItem?.title }}</h1>\n <div>{{ questionItem?.subTitle }}</div>\n </div>\n\n <!-- Progress & Grouping -->\n <div>\n <!-- Pie Chart Progress -->\n <div [ngClass]=\"{ bgColor: qbItem?.progressBar }\">\n <div id=\"nxt-progress\" *ngIf=\"qbItem?.progressBar\">\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n [startFromZero]=\"false\" [responsive]=\"false\" >\n </circle-progress>\n </div>\n </div>\n <!-- RS 09DEC24 Changed keys-->\n <!-- Show the Group/Module related to the Progress -->\n <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\n [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\n <div class=\"nxt-largeTitle\">\n <h3 class=\"myt-font6 myt-text3\">\n {{ questionItem?.groupName }}\n </h3>\n <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\n <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\n </div>\n </div>\n </div>\n <!-- RS 09DEC24 Changed keys-->\n <!-- Question Handling -->\n <!-- VD 10Aug24- question no -->\n <div>\n <div *ngIf=\"questionItem.questionText\" style=\"display: flex;\">\n <span>{{questionItem?.questionNumber}}.</span>\n <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{questionItem?.questionText}}\n </p>\n </div>\n <!-- Title -->\n <!-- <div *ngIf=\"questionItem.isTitle\">\n <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \n <h3 class=\"questionalign myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{questionItem?.questionText}}\n </h3>\n </div>\n </div> -->\n <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\n <div [innerHTML]=\"getText(questionItem?.questionText)\" >\n {{ questionItem?.questionText }}\n </div>\n </div> -->\n\n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n <!-- <div *ngIf=\"questionItem.type == 'Book'\">\n <div *ngIf=\"questionItem.questionNumber=='6'\">\n <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{ questionItem?.questionText }}\n </h3>\n </div>\n </div> -->\n \n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n <!-- <div *ngIf=\"questionItem.type == 'File' \">\n <div *ngIf=\"questionItem.questionNumber=='9'\">\n <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{questionItem?.questionText}}\n </h3>\n </div>\n </div> -->\n </div>\n\n <!-- Additional Info -->\n <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\n <div\n class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\n </div>\n </div>\n <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\n <div class=\"info-alert ques-alert1\">\n <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\n <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n </div>\n </div>\n\n <!-- Dropdown-->\n <div *ngIf=\"dropdownFlag\" >\n <div class=\"nxt-dis-flex\">\n <select class=\"nxtdropdown\"\n [ngClass]=\"{\n 'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\n 'custom-select': !qbItem?.progressBar\n }\" class=\"mr-sm-2 dd-height nxt-dropbox \" id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\n <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\n {{ opt.value }}\n </option>\n <!-- HA 20DEC23 For Translation -->\n <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\n </select>\n </div>\n </div>\n\n <!--VD Radio update -->\n <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\n <div class=\"nxt-custom-radio-container\">\n <div *ngFor=\"let opt of questionItem.options\" \n [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\n <input\n type=\"radio\"\n [id]=\"opt.value\"\n [(ngModel)]=\"inpValue\"\n name=\"inpValue\"\n [value]=\"opt.value\"\n (change)=\"optionChange(opt.value)\"\n />\n <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\n </div>\n </div>\n\n <!-- <div class=\"nxt-dis-flex\">\n <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\n <label class=\"nxt-radiocontainer container myt-font4\">\n <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\n (change)=\"optionChange(opt.value)\" />\n {{ opt.value }}\n </label>\n </div>\n </div> -->\n </div> \n <!-- Checkbox -->\n <div *ngIf=\"checkboxFlag\" class=\"\">\n <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\n {{ questionItem?.errorMessage }}\n </div>\n <div class=\"nxt-checkbox-container\">\n <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\n <label class=\"nxt-container1\">\n <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\n </label>\n </div>\n </div>\n </div>\n\n <!-- Text -->\n <div *ngIf=\"textFlag\">\n <!-- HA 31-JAN-24 To reduce the margin -->\n <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\n <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \n id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error\n ? 'red'\n : ''\n }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\n </div>\n </div>\n\n <!-- Text Area -->\n <div *ngIf=\"taFlag\" >\n <div>\n <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error\n ? 'red'\n : inpValue?.length > 0 && taFocusOut\n ? '#87be1c'\n : ''\n }}\" (focusout)=\"taFocusOut = true\"\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\n </div>\n </div>\n\n\n <!-- RS 06JAN25 -->\n <!-- for rich text -->\n <div *ngIf=\"rtaFlag\">\n <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\n <app-custom-rich-text\n [value]=\"inpValue\"\n [question]=\"questionItem\"\n [error]=\"questionItem?.error\"\n (textValueChange)=\"handleRichTextChange($event)\">\n </app-custom-rich-text>\n </div>\n </div>\n \n \n <!-- <div *ngIf=\"ques.type === 'RichTextArea'\">\n\n <app-custom-rich-text\n [value]=\"ques.input\"\n [rows]=\"3\"\n [error]=\"ques.error\" [placeholder]=\"ques.question \" \n (textValueChange)=\"handleRichTextChange($event)\">\n </app-custom-rich-text>\n</div> -->\n <!-- CC Number Format -->\n <!-- RS 09DEC24 Changed keys-->\n <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n <div class=\"nxt-dis-flex\">\n <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\n [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n this.questionItem.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" />\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\n *ngIf=\"inpValue?.length > 0\"></i>\n </div>\n </div>\n <!-- END-->\n\n <!-- AlphaNumeric -->\n <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n <div style=\"position:relative;\">\n <!-- HA 20DEC23 For Translation -->\n <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n </div>\n </div>\n\n <!-- Email -->\n <!-- RS 09DEC24 Changed keys-->\n <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n <div class=\"nxt-dis-flex\">\n <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n this.questionItem.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" />\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\n *ngIf=\"inpValue?.length > 0\"></i>\n </div>\n </div>\n\n <!-- DateTime -->\n <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\n <!-- Error Handling -->\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n <!-- Date -->\n <div *ngIf=\"dateFlag\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\n <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n <div class=\"nxt-dis-flex\">\n <!-- HA 20DEC23 For Translation -->\n <!-- HA 02FEB24 Additional param to update the question -->\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, questionItem)\"\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\">\n </my-date-picker>\n </div>\n </div>\n </div>\n\n <!-- Time -->\n <div *ngIf=\"timeFlag\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n <div class=\"nxt-dis-flex\">\n <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n dateandTime: !qbItem?.progressBar}\" \n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n (focus)=\"(clearSQError) \">\n <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n (focus)=\"clearError()\">\n <option value=\"\">HH</option>\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n {{ hour }}\n </option>\n </select>\n <span class=\"colon\"> : </span>\n <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n (focus)=\"clearError()\">\n <option value=\"\">MM</option>\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n {{ minute }}\n </option>\n </select>\n <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\n <span class=\"colon\"> : </span>\n <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n <option value=\"AM\">AM</option>\n <option value=\"PM\">PM</option>\n </select>\n <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\n </div>\n </div>\n </div>\n </div>\n <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n </div>\n </div>\n\n <!-- Attachment / File -->\n <div *ngIf=\"fileFlag\">\n <div *ngIf=\"!qbItem.progressBar\">\n <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n <label class=\"picture-upload\" for=\"file-upload\">\n <span class=\"picture-upload-child\">\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\n <i class=\"\" aria-hidden=\"true\"></i>\n </span>\n </label>\n </div>\n <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\n </div>\n <ul *ngIf=\"\n attachments?.length > 0 &&\n questionItem?.type === 'File' &&\n !qbItem?.progressBar\n \" class=\"attach-ulist col-md-12\">\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n </li>\n </ul>\n\n <!-- Attachment Progress -->\n <div *ngIf=\"qbItem.progressBar\">\n <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\n </div>\n <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n \n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\n <label class=\"file-label \">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n class=\"file-upload-btn\">\n </label>\n </div>\n </div>\n </div>\n <!-- RS 09DEC24 Changed keys-->\n <!-- Book -->\n <div *ngIf=\"bookFlag\">\n <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\n <div class=\"form-row\">\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\n *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\n <span>{{ ques?.questionText }}</span>\n </div>\n <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\n <div *ngIf=\"ques.type === 'Date'\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n <div class=\"dateandtime\">\n <!-- HA 20DEC23 For Translation -->\n <!-- HA 02FEB24 Additional param to update the question -->\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, ques)\"\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\" >\n </my-date-picker>\n </div>\n </div>\n </div>\n <div *ngIf=\"ques.type === 'Time'\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n <div class=\"dateandtime\">\n <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n dateandTime: !qbItem?.progressBar}\" \n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n (focus)=\"(clearSQError) \">\n <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n (focus)=\"clearError()\">\n <option value=\"\">HH</option>\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n {{ hour }}\n </option>\n </select>\n <span class=\"colon\"> : </span>\n <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n (focus)=\"clearError()\">\n <option value=\"\">MM</option>\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n {{ minute }}\n </option>\n </select>\n <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\n <span class=\"colon\"> : </span>\n <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n <option value=\"AM\">AM</option>\n <option value=\"PM\">PM</option>\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"ques.type === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\n </div>\n <!-- VD to show lable-->\n <div *ngIf=\"ques.type === 'Label'\">\n <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n </app-custom-label>\n </div>\n <div *ngIf=\"ques.type === 'Text'\">\n <label>{{ ques.questionText }}</label>\n <app-custom-input\n [value]=\"ques?.input\"\n [question]=\"ques\" \n [idValue]=\"ques?.trackingId\"\n [focusEvent]=\"clearSQError(ques?.id)\"\n [error]=\"ques?.error\"\n [placeholder]=\"ques?.question\"\n (inputValue)=\"selectedInput($event,ques)\">\n </app-custom-input>\n </div>\n <div *ngIf=\"ques.type === 'Location'\">\n <!-- for pick location -->\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n </div>\n <!-- for text area -->\n <div *ngIf=\"ques.type === 'TextArea'\">\n <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.type === 'Email'\">\n <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n </div>\n\n <div *ngIf=\"ques.type === 'File'\">\n <div *ngIf=\"!qbItem.progressBar\">\n <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n <span class=\"picture-upload-child\">\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"\n fa fa-plus fa-2x\n picture-upload-child\n pic-upload\n icolor\n \">\n <i class=\"\" aria-hidden=\"true\"></i>\n </span>\n </label>\n <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n </div>\n\n <ul *ngIf=\"\n attachments?.length > 0 &&\n ques.type === 'File' &&\n !qbItem.progressBar\n \" class=\"attach-ulist col-md-12\">\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n {{ attachment.attachmentName\n }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n </li>\n </ul>\n <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\n\n <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\n </div>\n <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n <span class=\"f-Name\">{{ ques?.question }}</span>\n <label class=\"file-label \">\n <span style=\"color: #c5281c;text-decoration:underline\">\n {{'attach' | i18n:i18nService.currentLanguage}}\n </span>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n class=\"file-upload-btn\">\n </label>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n <app-custom-table \n [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-table>\n </div>\n\n <!-- Dropdown -->\n <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\n <!-- for common dropdown -->\n <!-- HA 20DEC23 For Translation -->\n <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\n [options]=\"ques.options\"\n [apiMeta]=\"ques.subText\"\n [id]=\"ques.Name\"\n [selectedValue]=\"ques.input\"\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques?.errorMessage\"\n [error]=\"ques?.error\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-dropdown>\n <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\" [certified]=\"ques.certifiedFlag\" [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n </div> \n </div>\n </div>\n </div>\n </div>\n\n <!--List start-->\n <div *ngIf=\"listFlag\">\n <div class=\"form-group\">\n <div class=\"form-row\">\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\n *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\n <div>\n <span class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</span>\n </div>\n <div *ngIf=\"ques.type === 'Text'\">\n <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n 'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\n textBox: !qbItem.progressBar\n }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n </div>\n </div>\n <div class=\"\" *ngIf=\"addFlag\">\n <!-- HA 20DEC23 For Translation -->\n <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>{{'add' | i18n:i18nService.currentLanguage}}</button>\n </div>\n </div>\n </div>\n </div>\n <!--List End-->\n\n <!-- Actions -->\n <!-- VD button condition removed-->\n <div class=\"flexer\">\n <!-- Backward / Back -->\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <!--VD disabled -->\n <div class=\"backbutton\" \n [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\n <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n 'nxt-left-bt': qbItem.progressBar,\n 'nxt-btn btn-primary':\n !qbItem.progressBar\n }\" (click)=\"handleBackClick()\">\n {{ qbItem?.back }}\n </button>\n </div>\n\n <!-- Forward / Next -->\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div *ngIf=\"qbItem.next\" >\n <div class=\"nxtbutton\">\n <!--VD disabled -->\n <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n 'nxt-rusty': qbItem.progressBar,\n 'nxt-btn btn-primary':\n !qbItem.progressBar\n }\" (click)=\"handleNextClick()\">\n {{ qbItem.next }}\n </button>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\n <h2>{{this.qbItem.summaryText}}</h2>\n <p>{{this.qbItem.summarySubText}}</p>\n</div>\n\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n 'col-md-12':!qbItem.progressBar\n }\">\n <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1> \n <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\n <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n <div *ngFor=\"let qa of summary\">\n <div [ngClass]=\"{ non: qbItem.progressBar }\">\n <div [ngClass]=\"{ summary: !qbItem.progressBar }\">\n <div *ngIf=\"!qbItem.edit\"\n [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\n </div>\n <!-- VD Question No added -->\n <div *ngIf=\"qbItem.edit\"\n [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\n [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\n {{ qa.quesValue }}\n </div>\n </div>\n <div class=\"nxt-answer\" >\n <div *ngIf=\"qa.qTyp === 'File'\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n {{ qa.ansValue }}\n </div>\n <!-- HA 02FEB24 Displaying the in summary for book type -->\n <div *ngIf=\"qa.qTyp == 'Book'\">\n <div *ngFor=\"let val of qa.myVal\">\n <p>{{ val.questionText }}:<span>{{ val.input }}</span></p>\n </div>\n </div>\n <!-- HA 02FEB24 Displaying the value for direct question -->\n <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'\">{{ qa.questionText }} <span></span>{{ qa.ansValue }}</div>\n <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n\n <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\n <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\n <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n [startFromZero]=\"false\" [responsive]=\"false\" >\n </circle-progress>\n \n <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \n [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\n <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\n <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\n </div>\n </div>\n <div *ngIf=\"!qbItem.progressBar\">\n <h3 class=\"summary-h\">\n {{ qbItem.summaryText }}\n </h3>\n </div>\n </div>\n <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n <div class=\"summary-groupText myt-font2\">\n <!-- <p>Informe de da\u00F1o</p> -->\n </div>\n <div *ngFor=\"let qa of summary\" >\n <div [ngClass]=\"{ non: qbItem.progressBar }\">\n <div class=\"summary\">\n <!-- <div *ngIf=\"!qbItem.edit\"\n [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n </div>\n <div *ngIf=\"qbItem.edit\"\n [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\n [innerHTML]=\"getText(qa.quesValue)\">\n {{ qa.quesValue }}\n </div>\n </div> -->\n <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n </button>\n </div>\n \n <div class=\"nxt-answer\">\n <div *ngIf=\"qa.qTyp === 'File'\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n {{ qa.ansValue }}\n </div>\n <div *ngIf=\"qa.qTyp != 'File'\">\n {{ qa.ansValue }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\n <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\n <div class=\"col-md-12\">\n <button [ngClass]=\"{'btn-text': qbItem.progressBar,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\n (click)=\"handleCancelClick()\">\n {{ qbItem.cancel }}\n </button>\n </div>\n </div>\n </div> -->\n\n <!-- Group Actions -->\n <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\n <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \n (click)=\"handleSubmitClick()\">\n {{ qbItem.submit }}\n </button>\n </div>\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\n <button [ngClass]=\"{'grey': qbItem.progressBar,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \n (click)=\"handleBackClickNew()\">\n {{ qbItem.edit }}\n </button>\n </div> -->\n </div>\n\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-dateTimeNew{margin-left:-14px}.myt-hour{width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.nxt-dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.nxtdate-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.nxtsum-ques{width:55%;margin:auto}.nxtsum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#f8f8f8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.nxtfile-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.nxtfile-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.nxt-left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"] }]
|
|
7688
7688
|
}], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: SharedService }, { type: i1.ActivatedRoute }, { type: i6$1.DomSanitizer }, { type: i7.NgxSpinnerService }, { type: i3.UntypedFormBuilder }, { type: i9.DeviceDetectorService }, { type: i0.ElementRef }, { type: I18nService }], propDecorators: { qbId: [{
|
|
7689
7689
|
type: Input
|
|
7690
7690
|
}], insuranceStartDate: [{
|
|
@@ -8090,11 +8090,11 @@ class CustomCalendarComponent {
|
|
|
8090
8090
|
return updatedText;
|
|
8091
8091
|
}
|
|
8092
8092
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomCalendarComponent, deps: [{ token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8093
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: { allEvents: "allEvents", question: "question", nxtId: "nxtId" }, outputs: { eventSelected: "eventSelected", dateSelected: "dateSelected", openModal: "openModal", closeModal: "closeModal" }, ngImport: i0, template: "<div class=\"align-calendar\">\
|
|
8093
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: { allEvents: "allEvents", question: "question", nxtId: "nxtId" }, outputs: { eventSelected: "eventSelected", dateSelected: "dateSelected", openModal: "openModal", closeModal: "closeModal" }, ngImport: i0, template: "<div class=\"align-calendar\">\n <div class=\"calendar-container\">\n <div class=\"calendar-header\">\n <button (click)=\"previousMonth()\"><< Previous >></button>\n <h3>{{ currentDate | date: 'MMMM yyyy' }}</h3>\n <button (click)=\"nextMonth()\"><< Next >></button>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"day-of-week\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\n <div\n class=\"calendar-day\"\n *ngFor=\"let day of calendarDays\"\n [class.not-current-month]=\"!day.isCurrentMonth\"\n [class.past]=\"day.isPast\"\n [class.today]=\"day.isToday\"\n [class.future]=\"day.isFuture\"\n [class.selected]=\"day.isSelected\"\n (click)=\"selectDay(day)\"\n >\n <div class=\"day-number\">{{ day.date.getDate() }}\n <span *ngIf=\"day?.events?.length > 0\" class=\"entry-indicator\" [class.select]=\"day?.isSelected\"></span>\n </div>\n <!-- <div *ngFor=\"let event of day.events\" >\n <div *ngFor=\"let entryGroup of event.entries\" class=\"event\">\n <div *ngFor=\"let key of getEntryKeys(entryGroup)\">\n <div *ngIf=\"entryGroup[key].type == 'Time'\">\n {{ entryGroup[key].input?.value | date: 'shortTime' }}\n </div>\n <div *ngIf=\"entryGroup[key].type != 'Time'\">\n {{ entryGroup[key].input }}\n </div>\n </div>\n </div>\n </div> -->\n </div>\n </div>\n </div>\n <div class=\"appoinappointment\">\n <div class=\"appointments-container\">\n <h4>Add Appointment</h4>\n <button *ngIf=\"selectedDay\" (click)=\"addAppointment()\">Add</button>\n </div>\n <!--VD 06Sep24 calendar updates--> \n <!-- RS 09DEC24 Changed keys--> \n <div *ngIf=\"showAppoinmentSection && selectedDay?.events?.length > 0\" class=\"appointments-container\">\n <h4>Appointments</h4>\n <div *ngFor=\"let event of selectedDay?.events\">\n <div class=\"event\" *ngFor=\"let entryGroup of event.entries\">\n <div class=\"event-info\">\n <div *ngFor=\"let key of getEntryKeys(entryGroup)\" class=\"entry-row\">\n <div *ngIf=\"entryGroup[key].questionText\" class=\"entry-text\">\n {{removeCharacters(entryGroup[key].questionText)}}:\n </div>\n <div class=\"entry-value\">\n <!-- VD 09Sep24- date type and link type updates -->\n <span *ngIf=\"entryGroup[key].type != 'Time' && entryGroup[key].type != 'Link'&& entryGroup[key].type != 'Date'\">{{ entryGroup[key].input }}</span>\n <span *ngIf=\"entryGroup[key].type == 'Time'\">{{ entryGroup[key].input | date: 'shortTime' }}</span>\n <span *ngIf=\"entryGroup[key].type == 'Date'\">{{ entryGroup[key].input | date: 'mediumDate' }}</span>\n <span *ngIf=\"entryGroup[key].type == 'Link'\">\n <a [href]=\"'//'+ entryGroup[key].input\" target=\"_blank\">{{removeCharacters(entryGroup[key].questionText)}}</a>\n </span>\n </div>\n </div>\n <div class=\"event-actions\">\n <button (click)=\"editEvent(event,entryGroup)\">Edit</button>\n <button (click)=\"deleteEvent(event.id,entryGroup)\">Delete</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- <app-custom-model\n [modalTitle]=\"modalTitle\"\n [isModalOpen]=\"isModalOpen\"\n [modalSize]=\"modalSize\"\n [saveButtonValue]=\"saveButtonValue\"\n [modalFooter]=\"modalFooter\"\n (saveButtonEmit)=\"onSave()\"\n (cancelButtonEmit)=\"onCancel()\"\n>\n<lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n<ng-template dynamicComponentHost ></ng-template>\n</app-custom-model> -->", styles: [".calendar-container{flex:1}.appoinappointment{flex:1;margin-left:10px}.calendar-header{display:flex;justify-content:space-between;align-items:center}.selected{box-shadow:0 0 5px #00000080;background-color:green!important;color:#fff!important}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.day-of-week{text-align:center;font-weight:700;padding:5px;background-color:#f0f0f0;border:1px solid #ccc}.calendar-day{border:1px solid #ccc;padding:5px;display:flex;flex-direction:column;align-items:flex-start;background-color:#fff;position:relative;cursor:pointer}.calendar-day.not-current-month{background-color:#f0f0f0}.calendar-day.past{color:#aaa}.calendar-day.today{background-color:#e6ffe6;font-weight:700}.calendar-day.future{color:#000}.day-number{font-size:1.2em;margin-bottom:5px}.event{background-color:#d1e7dd;border-left:4px solid #0f5132;margin:5px 0;padding:2px 5px;border-radius:3px}.event-title{font-weight:700}.event-time{font-size:.8em}input[type=text],input[type=time]{width:100%;margin-top:5px;box-sizing:border-box}button{margin-top:5px;align-self:stretch;margin-left:0!important}.calendar-header button{margin-top:5px;align-self:stretch;margin-left:0!important;border:none;background:none}.align-calendar{display:flex;width:100%}.form-group.content-box{padding-bottom:0!important}.entry-indicator{position:absolute;top:5px;right:5px;width:10px;height:10px;background-color:#0f5132;border-radius:50%}.select{background-color:#fff}.entry-row{display:flex;align-items:center;margin-bottom:5px}.entry-text{font-weight:700;margin-right:10px;white-space:nowrap}.entry-value{flex:1;word-break:break-word}.entry-value a{color:#4caf50}\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: "pipe", type: i2.DatePipe, name: "date" }] });
|
|
8094
8094
|
}
|
|
8095
8095
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomCalendarComponent, decorators: [{
|
|
8096
8096
|
type: Component,
|
|
8097
|
-
args: [{ selector: 'app-custom-calendar', template: "<div class=\"align-calendar\">\
|
|
8097
|
+
args: [{ selector: 'app-custom-calendar', template: "<div class=\"align-calendar\">\n <div class=\"calendar-container\">\n <div class=\"calendar-header\">\n <button (click)=\"previousMonth()\"><< Previous >></button>\n <h3>{{ currentDate | date: 'MMMM yyyy' }}</h3>\n <button (click)=\"nextMonth()\"><< Next >></button>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"day-of-week\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\n <div\n class=\"calendar-day\"\n *ngFor=\"let day of calendarDays\"\n [class.not-current-month]=\"!day.isCurrentMonth\"\n [class.past]=\"day.isPast\"\n [class.today]=\"day.isToday\"\n [class.future]=\"day.isFuture\"\n [class.selected]=\"day.isSelected\"\n (click)=\"selectDay(day)\"\n >\n <div class=\"day-number\">{{ day.date.getDate() }}\n <span *ngIf=\"day?.events?.length > 0\" class=\"entry-indicator\" [class.select]=\"day?.isSelected\"></span>\n </div>\n <!-- <div *ngFor=\"let event of day.events\" >\n <div *ngFor=\"let entryGroup of event.entries\" class=\"event\">\n <div *ngFor=\"let key of getEntryKeys(entryGroup)\">\n <div *ngIf=\"entryGroup[key].type == 'Time'\">\n {{ entryGroup[key].input?.value | date: 'shortTime' }}\n </div>\n <div *ngIf=\"entryGroup[key].type != 'Time'\">\n {{ entryGroup[key].input }}\n </div>\n </div>\n </div>\n </div> -->\n </div>\n </div>\n </div>\n <div class=\"appoinappointment\">\n <div class=\"appointments-container\">\n <h4>Add Appointment</h4>\n <button *ngIf=\"selectedDay\" (click)=\"addAppointment()\">Add</button>\n </div>\n <!--VD 06Sep24 calendar updates--> \n <!-- RS 09DEC24 Changed keys--> \n <div *ngIf=\"showAppoinmentSection && selectedDay?.events?.length > 0\" class=\"appointments-container\">\n <h4>Appointments</h4>\n <div *ngFor=\"let event of selectedDay?.events\">\n <div class=\"event\" *ngFor=\"let entryGroup of event.entries\">\n <div class=\"event-info\">\n <div *ngFor=\"let key of getEntryKeys(entryGroup)\" class=\"entry-row\">\n <div *ngIf=\"entryGroup[key].questionText\" class=\"entry-text\">\n {{removeCharacters(entryGroup[key].questionText)}}:\n </div>\n <div class=\"entry-value\">\n <!-- VD 09Sep24- date type and link type updates -->\n <span *ngIf=\"entryGroup[key].type != 'Time' && entryGroup[key].type != 'Link'&& entryGroup[key].type != 'Date'\">{{ entryGroup[key].input }}</span>\n <span *ngIf=\"entryGroup[key].type == 'Time'\">{{ entryGroup[key].input | date: 'shortTime' }}</span>\n <span *ngIf=\"entryGroup[key].type == 'Date'\">{{ entryGroup[key].input | date: 'mediumDate' }}</span>\n <span *ngIf=\"entryGroup[key].type == 'Link'\">\n <a [href]=\"'//'+ entryGroup[key].input\" target=\"_blank\">{{removeCharacters(entryGroup[key].questionText)}}</a>\n </span>\n </div>\n </div>\n <div class=\"event-actions\">\n <button (click)=\"editEvent(event,entryGroup)\">Edit</button>\n <button (click)=\"deleteEvent(event.id,entryGroup)\">Delete</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- <app-custom-model\n [modalTitle]=\"modalTitle\"\n [isModalOpen]=\"isModalOpen\"\n [modalSize]=\"modalSize\"\n [saveButtonValue]=\"saveButtonValue\"\n [modalFooter]=\"modalFooter\"\n (saveButtonEmit)=\"onSave()\"\n (cancelButtonEmit)=\"onCancel()\"\n>\n<lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n<ng-template dynamicComponentHost ></ng-template>\n</app-custom-model> -->", styles: [".calendar-container{flex:1}.appoinappointment{flex:1;margin-left:10px}.calendar-header{display:flex;justify-content:space-between;align-items:center}.selected{box-shadow:0 0 5px #00000080;background-color:green!important;color:#fff!important}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.day-of-week{text-align:center;font-weight:700;padding:5px;background-color:#f0f0f0;border:1px solid #ccc}.calendar-day{border:1px solid #ccc;padding:5px;display:flex;flex-direction:column;align-items:flex-start;background-color:#fff;position:relative;cursor:pointer}.calendar-day.not-current-month{background-color:#f0f0f0}.calendar-day.past{color:#aaa}.calendar-day.today{background-color:#e6ffe6;font-weight:700}.calendar-day.future{color:#000}.day-number{font-size:1.2em;margin-bottom:5px}.event{background-color:#d1e7dd;border-left:4px solid #0f5132;margin:5px 0;padding:2px 5px;border-radius:3px}.event-title{font-weight:700}.event-time{font-size:.8em}input[type=text],input[type=time]{width:100%;margin-top:5px;box-sizing:border-box}button{margin-top:5px;align-self:stretch;margin-left:0!important}.calendar-header button{margin-top:5px;align-self:stretch;margin-left:0!important;border:none;background:none}.align-calendar{display:flex;width:100%}.form-group.content-box{padding-bottom:0!important}.entry-indicator{position:absolute;top:5px;right:5px;width:10px;height:10px;background-color:#0f5132;border-radius:50%}.select{background-color:#fff}.entry-row{display:flex;align-items:center;margin-bottom:5px}.entry-text{font-weight:700;margin-right:10px;white-space:nowrap}.entry-value{flex:1;word-break:break-word}.entry-value a{color:#4caf50}\n"] }]
|
|
8098
8098
|
}], ctorParameters: () => [{ type: ChangeService }], propDecorators: { eventSelected: [{
|
|
8099
8099
|
type: Output
|
|
8100
8100
|
}], dateSelected: [{
|
|
@@ -8211,11 +8211,11 @@ class SearchBoxComponent {
|
|
|
8211
8211
|
this.searchValueChange.emit(change);
|
|
8212
8212
|
}
|
|
8213
8213
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBoxComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: i1.ActivatedRoute }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8214
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchBoxComponent, selector: "lib-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly", filterName: "filterName" }, outputs: { searchValueChange: "searchValueChange" }, viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\
|
|
8214
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchBoxComponent, selector: "lib-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly", filterName: "filterName" }, outputs: { searchValueChange: "searchValueChange" }, viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\n <input #auto id=\"searchbox-style\"\n (blur)=\"clearList()\"\n [(ngModel)]=\"filterName\"\n type=\"text\"\n name=\"name\"\n [readOnly]=\"readOnly\"\n [placeholder]=\"placeHolderText\"\n style=\"margin: 0 !important; padding-right: 30px;\"\n class=\"searchInput she-line-input form-control\"\n (focusin)=\"getSourceDataLocal($event)\"\n (input)=\"getSourceDataLocal($event)\">\n <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\n <div *ngIf=\"finalResults.length > 0 && showSuggestion\"\n style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\"\n class=\"suggestions-container\">\n <!-- HA 20DEC23 Uncommented the logic -->\n <!-- VD 03May- search changes -->\n <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\n <!-- VD 26Jun24 - id condition removed -->\n <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\n <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\n <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\n </div>\n <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\n <!--// VD 26JUN24 - pipe changes -->\n <!-- RS 29JAN25 -->\n <h4 >{{ item | getValue: item : SearchItem }}</h4>\n </div>\n </div>\n </div>\n <!-- HA 20DEC23 For Commented this for future purpose -->\n <!-- <table class=\"table table-striped table-bordered\">\n <thead>\n <tr>\n <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\n <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\n <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\n <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\n <td>{{ item.firstName }}</td>\n <td>{{ item.lastName }}</td>\n <td>{{ item.division }}</td>\n <td>{{ item.numberPlate }}</td>\n </tr>\n </tbody>\n </table> -->\n </div>\n</div>\n\n", styles: ["#searchbox-style{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"/><path d=\"M20 20L17 17\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>');background-position:right 5px center;background-repeat:no-repeat;background-size:24px;padding-right:35px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }] });
|
|
8215
8215
|
}
|
|
8216
8216
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBoxComponent, decorators: [{
|
|
8217
8217
|
type: Component,
|
|
8218
|
-
args: [{ selector: 'lib-search-box', template: "<!-- // VD 12Jun24 - readonly change-->\
|
|
8218
|
+
args: [{ selector: 'lib-search-box', template: "<!-- // VD 12Jun24 - readonly change-->\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\n <input #auto id=\"searchbox-style\"\n (blur)=\"clearList()\"\n [(ngModel)]=\"filterName\"\n type=\"text\"\n name=\"name\"\n [readOnly]=\"readOnly\"\n [placeholder]=\"placeHolderText\"\n style=\"margin: 0 !important; padding-right: 30px;\"\n class=\"searchInput she-line-input form-control\"\n (focusin)=\"getSourceDataLocal($event)\"\n (input)=\"getSourceDataLocal($event)\">\n <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\n <div *ngIf=\"finalResults.length > 0 && showSuggestion\"\n style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\"\n class=\"suggestions-container\">\n <!-- HA 20DEC23 Uncommented the logic -->\n <!-- VD 03May- search changes -->\n <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\n <!-- VD 26Jun24 - id condition removed -->\n <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\n <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\n <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\n </div>\n <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\n <!--// VD 26JUN24 - pipe changes -->\n <!-- RS 29JAN25 -->\n <h4 >{{ item | getValue: item : SearchItem }}</h4>\n </div>\n </div>\n </div>\n <!-- HA 20DEC23 For Commented this for future purpose -->\n <!-- <table class=\"table table-striped table-bordered\">\n <thead>\n <tr>\n <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\n <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\n <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\n <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\n <td>{{ item.firstName }}</td>\n <td>{{ item.lastName }}</td>\n <td>{{ item.division }}</td>\n <td>{{ item.numberPlate }}</td>\n </tr>\n </tbody>\n </table> -->\n </div>\n</div>\n\n", styles: ["#searchbox-style{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"/><path d=\"M20 20L17 17\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>');background-position:right 5px center;background-repeat:no-repeat;background-size:24px;padding-right:35px}\n"] }]
|
|
8219
8219
|
}], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: i1.ActivatedRoute }, { type: i0.ElementRef }, { type: I18nService }], propDecorators: { placeHolderText: [{
|
|
8220
8220
|
type: Input
|
|
8221
8221
|
}], auto: [{
|
|
@@ -8481,11 +8481,11 @@ class FileUploadComponent {
|
|
|
8481
8481
|
}
|
|
8482
8482
|
}
|
|
8483
8483
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileUploadComponent, deps: [{ token: SharedService }, { token: DataService }, { token: i6$1.DomSanitizer }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8484
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FileUploadComponent, selector: "app-file-upload", inputs: { allFiles: "allFiles", limitFileUploading: "limitFileUploading", isDeleteFileButtonVisible: "isDeleteFileButtonVisible", isShowNoFileIcon: "isShowNoFileIcon", tableFile: "tableFile", question: "question", error: "error" }, outputs: { selectedFileData: "selectedFileData", deletedFileData: "deletedFileData" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" style=\"margin: 0;\">\
|
|
8484
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FileUploadComponent, selector: "app-file-upload", inputs: { allFiles: "allFiles", limitFileUploading: "limitFileUploading", isDeleteFileButtonVisible: "isDeleteFileButtonVisible", isShowNoFileIcon: "isShowNoFileIcon", tableFile: "tableFile", question: "question", error: "error" }, outputs: { selectedFileData: "selectedFileData", deletedFileData: "deletedFileData" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" style=\"margin: 0;\">\n <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\n <!-- HA 19DEC23 For translation -->\n <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n </div>\n\n <div class=\"col-lg-5 document-cnt m-t-10 m-b-10\"\n *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\n <div *ngIf=\"!tableFile\"> <!-- (click)=\"viewFile(eachFile)\" -->\n <div class=\"col-lg-3 document_image\">\n <img [src]=\"getDocIcon(eachFile?.name)\">\n </div>\n <div class=\"col-lg-9 document_name\">\n {{eachFile?.name}}\n </div>\n <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\n </div>\n <!-- VD 20May24 - preview changes-->\n <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\n </div>\n </div>\n <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\n <div class=\"col-lg-3 document_image\">\n <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n </div>\n <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n {{eachFile?.name}}\n </div>\n </div>\n </div>\n <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n </div>\n</div>\n\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\n <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\n <!-- HA 19DEC23 For translation -->\n <!-- VD 03May24 file upload fix-->\n <!-- RS 09JAN2025 -->\n <button [class]=\"error ? 'she-btn-primary-bordered Invalid' : 'she-btn-primary-bordered'\" style=\"width:275px;\" (click)=\"fileInput.click()\"[ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= maxFiles }\" [disabled]=\"copyOfInputAllFiles?.length >= maxFiles\">Choose Files</button>\n <input #fileInput type=\"file\" name=\"fileUpload\" multiple=\"multiple\" [accept]=\"allowedFileTypes.join(',')\"\n style=\"display:none;\"\n (change) = uploadMultipleFiles($event)\n />\n </label>\n\n <!-- RS 09JAN2025 -->\n <!-- Error messages section -->\n <div class=\"file-constraints\" *ngIf=\"validationErrors.length > 0\">\n <small class=\"text-danger\">\n <div *ngFor=\"let error of validationErrors\">{{ error }}</div>\n </small>\n </div>\n\n<!-- HA 19DEC23 For translation -->\n <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\n {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\n <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\n </label>\n <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched || formControl?.documents?.dirty) &&\n formControl?.documents?.errors?.required\">\n {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\n </span> -->\n <!-- RS 09DEC24 Changed keys--> \n</div>\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.errorMessage}}</div>\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\n <div class=\"nxt-file-map-modal\">\n <div class=\"nxt-file-model-content\">\n <div class=\"nxt-file-model-header\">\n <h4>{{fileName}}</h4>\n <button class=\"close-button\" (click)=\"close()\">X</button>\n </div>\n <ng-container *ngIf=\"isImage; else otherFile\">\n <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\n </ng-container>\n <ng-template #otherFile>\n <iframe [src]=\"fileUrl\" width=\"100%\" height=\"500px\"></iframe>\n </ng-template>\n </div>\n </div>\n</div>\n\n\n", styles: [".document-cnt{padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f9f9f9;margin-bottom:10px;cursor:pointer;transition:background-color .3s ease;position:relative}.document-cnt:hover{background-color:#e9ecef}.document_image img{width:30px;height:30px}.document_name{font-size:14px;font-weight:700;color:#333;line-height:30px}.label{margin-bottom:0}.document_delete img,.preview-icon img{width:20px;height:20px;cursor:pointer;transition:transform .3s ease}.document_delete img{filter:brightness(0) saturate(100%) invert(20%) sepia(97%) saturate(7481%) hue-rotate(357deg) brightness(98%) contrast(119%)}.document_delete img:hover,.preview-icon img:hover{transform:scale(1.1)}.document_delete,.preview-icon{position:absolute;top:50%;transform:translateY(-50%)}.document_delete{right:10px}.preview-icon{right:40px}@media (min-width: 992px){.document-cnt{margin-left:10px}}.btn-disabled{background:#e1e1e1;color:#fff;border:none;border-radius:5px;height:50px}.form-control[disabled]{border-radius:5px}.custom-file{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;width:auto;margin-bottom:5px}.she-btn-primary-bordered{background:#fff;color:#48b7ff;border:1px solid #48B7FF;border-radius:5px;height:50px;outline:none!important}.btn-primary{background-color:#03a9f4!important;border:1px solid #03a9f4!important;color:#fff!important}.btn.btn-primary{border-radius:2px;padding:6px 14px;font-size:14px}.nxt-file-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.nxt-file-map-modal{background-color:#fff;border-radius:8px;overflow:hidden;width:80%;max-width:800px;max-height:90%;display:flex;flex-direction:column}.nxt-file-model-content{display:flex;flex-direction:column;height:100%}.nxt-file-model-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:#f5f5f5;border-bottom:1px solid #ddd}.nxt-file-model-header h4{margin:0;font-size:1.25em}.close-button{background:none;border:none;font-size:1.5em;cursor:pointer}.img-fluid{max-width:100%;height:auto;flex:1}iframe{border:none}.Invalid{border:1px solid red!important}\n"], dependencies: [{ 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: "pipe", type: I18nPipe, name: "i18n" }] });
|
|
8485
8485
|
}
|
|
8486
8486
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
8487
8487
|
type: Component,
|
|
8488
|
-
args: [{ selector: 'app-file-upload', template: "<div class=\"row\" style=\"margin: 0;\">\
|
|
8488
|
+
args: [{ selector: 'app-file-upload', template: "<div class=\"row\" style=\"margin: 0;\">\n <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\n <!-- HA 19DEC23 For translation -->\n <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n </div>\n\n <div class=\"col-lg-5 document-cnt m-t-10 m-b-10\"\n *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\n <div *ngIf=\"!tableFile\"> <!-- (click)=\"viewFile(eachFile)\" -->\n <div class=\"col-lg-3 document_image\">\n <img [src]=\"getDocIcon(eachFile?.name)\">\n </div>\n <div class=\"col-lg-9 document_name\">\n {{eachFile?.name}}\n </div>\n <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\n </div>\n <!-- VD 20May24 - preview changes-->\n <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\n </div>\n </div>\n <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\n <div class=\"col-lg-3 document_image\">\n <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n </div>\n <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n {{eachFile?.name}}\n </div>\n </div>\n </div>\n <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n </div>\n</div>\n\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\n <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\n <!-- HA 19DEC23 For translation -->\n <!-- VD 03May24 file upload fix-->\n <!-- RS 09JAN2025 -->\n <button [class]=\"error ? 'she-btn-primary-bordered Invalid' : 'she-btn-primary-bordered'\" style=\"width:275px;\" (click)=\"fileInput.click()\"[ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= maxFiles }\" [disabled]=\"copyOfInputAllFiles?.length >= maxFiles\">Choose Files</button>\n <input #fileInput type=\"file\" name=\"fileUpload\" multiple=\"multiple\" [accept]=\"allowedFileTypes.join(',')\"\n style=\"display:none;\"\n (change) = uploadMultipleFiles($event)\n />\n </label>\n\n <!-- RS 09JAN2025 -->\n <!-- Error messages section -->\n <div class=\"file-constraints\" *ngIf=\"validationErrors.length > 0\">\n <small class=\"text-danger\">\n <div *ngFor=\"let error of validationErrors\">{{ error }}</div>\n </small>\n </div>\n\n<!-- HA 19DEC23 For translation -->\n <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\n {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\n <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\n </label>\n <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched || formControl?.documents?.dirty) &&\n formControl?.documents?.errors?.required\">\n {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\n </span> -->\n <!-- RS 09DEC24 Changed keys--> \n</div>\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.errorMessage}}</div>\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\n <div class=\"nxt-file-map-modal\">\n <div class=\"nxt-file-model-content\">\n <div class=\"nxt-file-model-header\">\n <h4>{{fileName}}</h4>\n <button class=\"close-button\" (click)=\"close()\">X</button>\n </div>\n <ng-container *ngIf=\"isImage; else otherFile\">\n <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\n </ng-container>\n <ng-template #otherFile>\n <iframe [src]=\"fileUrl\" width=\"100%\" height=\"500px\"></iframe>\n </ng-template>\n </div>\n </div>\n</div>\n\n\n", styles: [".document-cnt{padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f9f9f9;margin-bottom:10px;cursor:pointer;transition:background-color .3s ease;position:relative}.document-cnt:hover{background-color:#e9ecef}.document_image img{width:30px;height:30px}.document_name{font-size:14px;font-weight:700;color:#333;line-height:30px}.label{margin-bottom:0}.document_delete img,.preview-icon img{width:20px;height:20px;cursor:pointer;transition:transform .3s ease}.document_delete img{filter:brightness(0) saturate(100%) invert(20%) sepia(97%) saturate(7481%) hue-rotate(357deg) brightness(98%) contrast(119%)}.document_delete img:hover,.preview-icon img:hover{transform:scale(1.1)}.document_delete,.preview-icon{position:absolute;top:50%;transform:translateY(-50%)}.document_delete{right:10px}.preview-icon{right:40px}@media (min-width: 992px){.document-cnt{margin-left:10px}}.btn-disabled{background:#e1e1e1;color:#fff;border:none;border-radius:5px;height:50px}.form-control[disabled]{border-radius:5px}.custom-file{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;width:auto;margin-bottom:5px}.she-btn-primary-bordered{background:#fff;color:#48b7ff;border:1px solid #48B7FF;border-radius:5px;height:50px;outline:none!important}.btn-primary{background-color:#03a9f4!important;border:1px solid #03a9f4!important;color:#fff!important}.btn.btn-primary{border-radius:2px;padding:6px 14px;font-size:14px}.nxt-file-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.nxt-file-map-modal{background-color:#fff;border-radius:8px;overflow:hidden;width:80%;max-width:800px;max-height:90%;display:flex;flex-direction:column}.nxt-file-model-content{display:flex;flex-direction:column;height:100%}.nxt-file-model-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:#f5f5f5;border-bottom:1px solid #ddd}.nxt-file-model-header h4{margin:0;font-size:1.25em}.close-button{background:none;border:none;font-size:1.5em;cursor:pointer}.img-fluid{max-width:100%;height:auto;flex:1}iframe{border:none}.Invalid{border:1px solid red!important}\n"] }]
|
|
8489
8489
|
}], ctorParameters: () => [{ type: SharedService }, { type: DataService }, { type: i6$1.DomSanitizer }, { type: I18nService }], propDecorators: { selectedFileData: [{
|
|
8490
8490
|
type: Output
|
|
8491
8491
|
}], deletedFileData: [{
|
|
@@ -8535,11 +8535,11 @@ class DependentTableComponent {
|
|
|
8535
8535
|
}
|
|
8536
8536
|
}
|
|
8537
8537
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DependentTableComponent, deps: [{ token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8538
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DependentTableComponent, selector: "app-dependent-table", inputs: { alertMessage: "alertMessage" }, ngImport: i0, template: "<div class=\"dropdown\" style=\"cursor: pointer;\">\
|
|
8538
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DependentTableComponent, selector: "app-dependent-table", inputs: { alertMessage: "alertMessage" }, ngImport: i0, template: "<div class=\"dropdown\" style=\"cursor: pointer;\">\n <span id=\"zoneIcon\"> \n <img src=\"./../../../../../assets/images/permit_icons/zone.png\" style=\"height: 35px; margin-left: 0px;\" alt=\"adv-search\">\n </span>\n <div class=\"dropdown-content\" style=\"margin-left: -300px; min-width: 415px;\">\n <div class=\"col-lg-12\">\n <table class=\"table table-striped table-bordered\">\n <tbody *ngIf=\"!ValueLength\">\n <tr>\n <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(12, 190, 12); text-align: center\">\n <span><b>{{ errorObj.noPermits }}</b></span>\n <span>{{ errorObj.noActive }}</span>\n </td>\n </tr>\n </tbody>\n <tbody id=\"zoneDetails\" *ngIf=\"ValueLength\">\n <tr>\n <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(252, 35, 27); text-align: center\">\n <span><b>{{ errorObj.permits }} ({{Value.length}})</b></span>\n <span>{{ errorObj.active }}</span>\n </td>\n </tr>\n <tr *ngFor=\"let item of Value\" >\n <td>\n <span>{{item?.permit_type}}-{{item?.ref_no}} - {{item?.status}} - {{item?.end_date}}</span>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>", styles: [".dropdown{margin-top:25px;margin-left:25px}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px #0003;padding:12px 16px;z-index:1}.dropdown:hover .dropdown-content{display:block}#zoneIcon{border:3px solid #a59d9d;padding:10px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}@media (max-width: 992px){.dropdown{margin-top:15px;margin-left:0;margin-bottom:15px}}\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"] }] });
|
|
8539
8539
|
}
|
|
8540
8540
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DependentTableComponent, decorators: [{
|
|
8541
8541
|
type: Component,
|
|
8542
|
-
args: [{ selector: 'app-dependent-table', template: "<div class=\"dropdown\" style=\"cursor: pointer;\">\
|
|
8542
|
+
args: [{ selector: 'app-dependent-table', template: "<div class=\"dropdown\" style=\"cursor: pointer;\">\n <span id=\"zoneIcon\"> \n <img src=\"./../../../../../assets/images/permit_icons/zone.png\" style=\"height: 35px; margin-left: 0px;\" alt=\"adv-search\">\n </span>\n <div class=\"dropdown-content\" style=\"margin-left: -300px; min-width: 415px;\">\n <div class=\"col-lg-12\">\n <table class=\"table table-striped table-bordered\">\n <tbody *ngIf=\"!ValueLength\">\n <tr>\n <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(12, 190, 12); text-align: center\">\n <span><b>{{ errorObj.noPermits }}</b></span>\n <span>{{ errorObj.noActive }}</span>\n </td>\n </tr>\n </tbody>\n <tbody id=\"zoneDetails\" *ngIf=\"ValueLength\">\n <tr>\n <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(252, 35, 27); text-align: center\">\n <span><b>{{ errorObj.permits }} ({{Value.length}})</b></span>\n <span>{{ errorObj.active }}</span>\n </td>\n </tr>\n <tr *ngFor=\"let item of Value\" >\n <td>\n <span>{{item?.permit_type}}-{{item?.ref_no}} - {{item?.status}} - {{item?.end_date}}</span>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>", styles: [".dropdown{margin-top:25px;margin-left:25px}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px #0003;padding:12px 16px;z-index:1}.dropdown:hover .dropdown-content{display:block}#zoneIcon{border:3px solid #a59d9d;padding:10px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}@media (max-width: 992px){.dropdown{margin-top:15px;margin-left:0;margin-bottom:15px}}\n"] }]
|
|
8543
8543
|
}], ctorParameters: () => [{ type: ChangeService }], propDecorators: { alertMessage: [{
|
|
8544
8544
|
type: Input
|
|
8545
8545
|
}] } });
|
|
@@ -8648,11 +8648,11 @@ class TableAppendixComponent {
|
|
|
8648
8648
|
return null;
|
|
8649
8649
|
}
|
|
8650
8650
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableAppendixComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8651
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableAppendixComponent, selector: "app-table-appendix", inputs: { question: "question" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\r\n <thead class=\"none-border\" *ngIf=\"tableInfo.tableType === 'lockout' && tableInfo.tableHeader\">\r\n <th></th>\r\n <th>{{ tableInfo.tableHeader }}</th>\r\n <th></th>\r\n </thead>\r\n <thead>\r\n <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + header.size\">\r\n {{ header.label }}\r\n </th>\r\n </thead>\r\n <tbody id=\"safetyMeasuresTableBody\">\r\n <tr *ngFor=\"let item of tableData; let i = index\">\r\n <td *ngFor=\"let header of tableHeader; let j = index\">\r\n <div *ngIf=\"header.type === 'text'\">\r\n <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" [placeholder]=\"header.placeholder\" (ngModelChange)=\"tableInfo.tableType != 'lockout' ? updateLabel(i, header.fieldName, item[header.fieldName]) : updateNumber(item, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\r\n </div>\r\n <div *ngIf=\"header.type.includes('number')\">\r\n <!-- HA 19DEC23 For translation -->\r\n <input type=\"number\" [(ngModel)]=\"item.value[header.fieldName]\" [disabled]=\"item.value[getPreviousTestKey(item, header.fieldName)] === null && tableInfo.tableType != 'lockout'\" (ngModelChange)=\"updateNumber(item, header.fieldName, item.value[header.fieldName])\" placeholder=\"{{ 'enterValue' | i18n:i18nService.currentLanguage }}\" class=\"she-line-input table-input\">\r\n </div>\r\n <div *ngIf=\"header.type === 'dropdown'\">\r\n <app-custom-dropdown [fromShengel]=\"true\" [options]=\"dropDownData\" \r\n [selectedValue]=\"item.value[header.fieldName]\" [placeholder]=\"header.placeholder\"\r\n (valueChange)=\"updateDropDown(item,header.fieldName,$event)\">\r\n </app-custom-dropdown>\r\n </div>\r\n <div *ngIf=\"header.type === 'textcheckbox'\">\r\n <div style=\"display: flex; justify-content: center;align-items: center;\">\r\n <input type=\"text\" [(ngModel)]=\"item.value[header.fieldName][0]\" (ngModelChange)=\"updateCheckText(item, header.fieldName, item.value[header.fieldName][0])\" style=\"width: 85px; height: 27px; text-align: center; padding: 5px; border-bottom: none; border-top: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; background: transparent;outline: none;\">\r\n <label class=\"switch2\">\r\n <input class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \r\n type=\"checkbox\"\r\n [checked]=\"item.value[header.fieldName][1] == header.toggleValue[0]\"/>\r\n <span class=\"switch-label2\" data-on=\"Psi\" data-off=\"Bar\"></span> \r\n <span class=\"switch-handle2\"></span> \r\n </label> \r\n </div>\r\n </div>\r\n <div *ngIf=\"header.type === 'labelcheckbox'\">\r\n <div style=\"display: flex; justify-content: center;align-items: center;\">\r\n <!-- HA 19DEC23 For translation -->\r\n <span style=\"text-align:left;\">{{ 'calibrated' | i18n:i18nService.currentLanguage }}</span>\r\n <label class=\"switch2\">\r\n <input class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \r\n type=\"checkbox\"\r\n [checked]=\"item.value[header.fieldName] == header.toggleValue[0]\"/>\r\n <span class=\"switch-label3\" data-on=\"Yes\" data-off=\"No\"></span> \r\n <span class=\"switch-handle2\"></span> \r\n </label> \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType === 'lockout'\">\r\n <td colspan=\"1\">\r\n <!-- HA 19DEC23 For translation -->\r\n <b style=\"text-align: center; cursor: pointer;\" id=\"addSafety\" (click)=\"addRow()\">{{ 'addMore' | i18n:i18nService.currentLanguage }} +</b>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType != 'lockout'\">\r\n <td colspan=\"3\">\r\n <!-- HA 19DEC23 For translation -->\r\n <b>{{ 'addMore' | i18n:i18nService.currentLanguage }}</b>\r\n </td>\r\n <td colspan=\"2\" style=\"text-align: center; cursor: pointer;\" id=\"addSafety\" (click)=\"addRow()\">\r\n +\r\n </td>\r\n </tr>\r\n <tr *ngFor=\"let item of tableAppendix | keyvalue; let k = index\">\r\n <td *ngFor=\"let header of tableHeader; let l = index\">\r\n <div *ngIf=\"header.type === 'text'\" >\r\n <input type=\"text\" [(ngModel)]=\"item.value[0][header.fieldName]\" (ngModelChange)=\"updateLabel(k, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\r\n </div>\r\n <div *ngIf=\"header.type.includes('dropdown') && item.key == 'dropDownData'\" >\r\n <!-- HA 19DEC23 For translation -->\r\n <app-custom-dropdown [fromShengel]=\"true\" [apiMeta]=\"dropDownApi\" \r\n [selectedValue]=\"item.value[0].value[header.fieldName]\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n (valueChange)=\"updateTableAppendix(item,header.fieldName,$event)\">\r\n </app-custom-dropdown>\r\n </div>\r\n <div *ngIf=\"header.type.includes('datetime') && item.key == 'dateData'\">\r\n <input [(ngModel)]=\"item.value[0].value[header.fieldName]\" type=\"datetime-local\"\r\n (ngModelChange)=\"updateTableAppendix(item,header.fieldName,$event)\"\r\n placeholder=\"DD/MM/YYYY HH:MM\">\r\n </div>\r\n <div *ngIf=\"header.type.includes('checkbox') && item.key == 'toggleData'\">\r\n <label class=\"switch2\">\r\n <input class=\"switch-input2\" (change)=\"updateTableAppendix(item,header.fieldName,$event.target.checked)\" \r\n type=\"checkbox\"\r\n [checked]=\"item.value[0].value[header.fieldName] == item.value[0].toggleValue[0]\"/>\r\n <span class=\"switch-label3\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \r\n <span class=\"switch-handle2\"></span> \r\n </label> \r\n </div>\r\n <div *ngIf=\"header.type.includes('file') && item.key == 'fileData'\">\r\n <app-file-upload [limitFileUploading]=\"2\" [allFiles]=\"item.value[0].value[header.fieldName]\" [tableFile]=\"true\"\r\n (selectedFileData)=\"updateTableAppendix(item ,header.fieldName, $event)\"\r\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.switch2{position:relative;width:73px;height:23.5px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eee,#fff 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:5px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input2{position:absolute;top:0;left:0;opacity:0}.switch-label2{position:relative;display:block;height:inherit;font-size:12px;background:#afacac80;color:#000;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label3{position:relative;display:block;height:inherit;font-size:12px;background:red;color:#fff;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label2:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label3:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label2:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label3:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label2:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-label3:after{content:attr(data-on);left:11px;margin-left:10px;vertical-align:sub;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input2:checked~.switch-label2{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label3{background:#02ad02;border-color:#02ad02;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label2:before{opacity:0}.switch-input2:checked~.switch-label3:before{opacity:0}.switch-input2:checked~.switch-label2:after{opacity:1;margin-right:15px}.switch-input2:checked~.switch-label3:after{opacity:1;margin-right:15px}.switch-handle2{position:absolute;top:2px;left:2px;width:18px;height:18px;background:linear-gradient(to bottom,#fff 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:20%;box-shadow:1px 1px 5px #0003}.switch-handle2:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eee,#fff);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input2:checked~.switch-handle2{left:51px;box-shadow:-1px 1px 5px #0003}.switch-label2,.switch-handle2,.switch-label3{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question", "error"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
|
|
8651
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableAppendixComponent, selector: "app-table-appendix", inputs: { question: "question" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\n <thead class=\"none-border\" *ngIf=\"tableInfo.tableType === 'lockout' && tableInfo.tableHeader\">\n <th></th>\n <th>{{ tableInfo.tableHeader }}</th>\n <th></th>\n </thead>\n <thead>\n <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + header.size\">\n {{ header.label }}\n </th>\n </thead>\n <tbody id=\"safetyMeasuresTableBody\">\n <tr *ngFor=\"let item of tableData; let i = index\">\n <td *ngFor=\"let header of tableHeader; let j = index\">\n <div *ngIf=\"header.type === 'text'\">\n <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" [placeholder]=\"header.placeholder\" (ngModelChange)=\"tableInfo.tableType != 'lockout' ? updateLabel(i, header.fieldName, item[header.fieldName]) : updateNumber(item, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.type.includes('number')\">\n <!-- HA 19DEC23 For translation -->\n <input type=\"number\" [(ngModel)]=\"item.value[header.fieldName]\" [disabled]=\"item.value[getPreviousTestKey(item, header.fieldName)] === null && tableInfo.tableType != 'lockout'\" (ngModelChange)=\"updateNumber(item, header.fieldName, item.value[header.fieldName])\" placeholder=\"{{ 'enterValue' | i18n:i18nService.currentLanguage }}\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.type === 'dropdown'\">\n <app-custom-dropdown [fromShengel]=\"true\" [options]=\"dropDownData\" \n [selectedValue]=\"item.value[header.fieldName]\" [placeholder]=\"header.placeholder\"\n (valueChange)=\"updateDropDown(item,header.fieldName,$event)\">\n </app-custom-dropdown>\n </div>\n <div *ngIf=\"header.type === 'textcheckbox'\">\n <div style=\"display: flex; justify-content: center;align-items: center;\">\n <input type=\"text\" [(ngModel)]=\"item.value[header.fieldName][0]\" (ngModelChange)=\"updateCheckText(item, header.fieldName, item.value[header.fieldName][0])\" style=\"width: 85px; height: 27px; text-align: center; padding: 5px; border-bottom: none; border-top: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; background: transparent;outline: none;\">\n <label class=\"switch2\">\n <input class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n type=\"checkbox\"\n [checked]=\"item.value[header.fieldName][1] == header.toggleValue[0]\"/>\n <span class=\"switch-label2\" data-on=\"Psi\" data-off=\"Bar\"></span> \n <span class=\"switch-handle2\"></span> \n </label> \n </div>\n </div>\n <div *ngIf=\"header.type === 'labelcheckbox'\">\n <div style=\"display: flex; justify-content: center;align-items: center;\">\n <!-- HA 19DEC23 For translation -->\n <span style=\"text-align:left;\">{{ 'calibrated' | i18n:i18nService.currentLanguage }}</span>\n <label class=\"switch2\">\n <input class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n type=\"checkbox\"\n [checked]=\"item.value[header.fieldName] == header.toggleValue[0]\"/>\n <span class=\"switch-label3\" data-on=\"Yes\" data-off=\"No\"></span> \n <span class=\"switch-handle2\"></span> \n </label> \n </div>\n </div>\n </td>\n </tr>\n <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType === 'lockout'\">\n <td colspan=\"1\">\n <!-- HA 19DEC23 For translation -->\n <b style=\"text-align: center; cursor: pointer;\" id=\"addSafety\" (click)=\"addRow()\">{{ 'addMore' | i18n:i18nService.currentLanguage }} +</b>\n </td>\n </tr>\n <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType != 'lockout'\">\n <td colspan=\"3\">\n <!-- HA 19DEC23 For translation -->\n <b>{{ 'addMore' | i18n:i18nService.currentLanguage }}</b>\n </td>\n <td colspan=\"2\" style=\"text-align: center; cursor: pointer;\" id=\"addSafety\" (click)=\"addRow()\">\n +\n </td>\n </tr>\n <tr *ngFor=\"let item of tableAppendix | keyvalue; let k = index\">\n <td *ngFor=\"let header of tableHeader; let l = index\">\n <div *ngIf=\"header.type === 'text'\" >\n <input type=\"text\" [(ngModel)]=\"item.value[0][header.fieldName]\" (ngModelChange)=\"updateLabel(k, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.type.includes('dropdown') && item.key == 'dropDownData'\" >\n <!-- HA 19DEC23 For translation -->\n <app-custom-dropdown [fromShengel]=\"true\" [apiMeta]=\"dropDownApi\" \n [selectedValue]=\"item.value[0].value[header.fieldName]\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n (valueChange)=\"updateTableAppendix(item,header.fieldName,$event)\">\n </app-custom-dropdown>\n </div>\n <div *ngIf=\"header.type.includes('datetime') && item.key == 'dateData'\">\n <input [(ngModel)]=\"item.value[0].value[header.fieldName]\" type=\"datetime-local\"\n (ngModelChange)=\"updateTableAppendix(item,header.fieldName,$event)\"\n placeholder=\"DD/MM/YYYY HH:MM\">\n </div>\n <div *ngIf=\"header.type.includes('checkbox') && item.key == 'toggleData'\">\n <label class=\"switch2\">\n <input class=\"switch-input2\" (change)=\"updateTableAppendix(item,header.fieldName,$event.target.checked)\" \n type=\"checkbox\"\n [checked]=\"item.value[0].value[header.fieldName] == item.value[0].toggleValue[0]\"/>\n <span class=\"switch-label3\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n <span class=\"switch-handle2\"></span> \n </label> \n </div>\n <div *ngIf=\"header.type.includes('file') && item.key == 'fileData'\">\n <app-file-upload [limitFileUploading]=\"2\" [allFiles]=\"item.value[0].value[header.fieldName]\" [tableFile]=\"true\"\n (selectedFileData)=\"updateTableAppendix(item ,header.fieldName, $event)\"\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n </div>\n </td>\n </tr>\n </tbody>\n </table>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.switch2{position:relative;width:73px;height:23.5px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eee,#fff 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:5px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input2{position:absolute;top:0;left:0;opacity:0}.switch-label2{position:relative;display:block;height:inherit;font-size:12px;background:#afacac80;color:#000;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label3{position:relative;display:block;height:inherit;font-size:12px;background:red;color:#fff;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label2:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label3:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label2:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label3:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label2:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-label3:after{content:attr(data-on);left:11px;margin-left:10px;vertical-align:sub;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input2:checked~.switch-label2{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label3{background:#02ad02;border-color:#02ad02;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label2:before{opacity:0}.switch-input2:checked~.switch-label3:before{opacity:0}.switch-input2:checked~.switch-label2:after{opacity:1;margin-right:15px}.switch-input2:checked~.switch-label3:after{opacity:1;margin-right:15px}.switch-handle2{position:absolute;top:2px;left:2px;width:18px;height:18px;background:linear-gradient(to bottom,#fff 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:20%;box-shadow:1px 1px 5px #0003}.switch-handle2:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eee,#fff);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input2:checked~.switch-handle2{left:51px;box-shadow:-1px 1px 5px #0003}.switch-label2,.switch-handle2,.switch-label3{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question", "error"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
|
|
8652
8652
|
}
|
|
8653
8653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableAppendixComponent, decorators: [{
|
|
8654
8654
|
type: Component,
|
|
8655
|
-
args: [{ selector: 'app-table-appendix', template: "<table class=\"table table-striped table-bordered\">\r\n <thead class=\"none-border\" *ngIf=\"tableInfo.tableType === 'lockout' && tableInfo.tableHeader\">\r\n <th></th>\r\n <th>{{ tableInfo.tableHeader }}</th>\r\n <th></th>\r\n </thead>\r\n <thead>\r\n <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + header.size\">\r\n {{ header.label }}\r\n </th>\r\n </thead>\r\n <tbody id=\"safetyMeasuresTableBody\">\r\n <tr *ngFor=\"let item of tableData; let i = index\">\r\n <td *ngFor=\"let header of tableHeader; let j = index\">\r\n <div *ngIf=\"header.type === 'text'\">\r\n <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" [placeholder]=\"header.placeholder\" (ngModelChange)=\"tableInfo.tableType != 'lockout' ? updateLabel(i, header.fieldName, item[header.fieldName]) : updateNumber(item, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\r\n </div>\r\n <div *ngIf=\"header.type.includes('number')\">\r\n <!-- HA 19DEC23 For translation -->\r\n <input type=\"number\" [(ngModel)]=\"item.value[header.fieldName]\" [disabled]=\"item.value[getPreviousTestKey(item, header.fieldName)] === null && tableInfo.tableType != 'lockout'\" (ngModelChange)=\"updateNumber(item, header.fieldName, item.value[header.fieldName])\" placeholder=\"{{ 'enterValue' | i18n:i18nService.currentLanguage }}\" class=\"she-line-input table-input\">\r\n </div>\r\n <div *ngIf=\"header.type === 'dropdown'\">\r\n <app-custom-dropdown [fromShengel]=\"true\" [options]=\"dropDownData\" \r\n [selectedValue]=\"item.value[header.fieldName]\" [placeholder]=\"header.placeholder\"\r\n (valueChange)=\"updateDropDown(item,header.fieldName,$event)\">\r\n </app-custom-dropdown>\r\n </div>\r\n <div *ngIf=\"header.type === 'textcheckbox'\">\r\n <div style=\"display: flex; justify-content: center;align-items: center;\">\r\n <input type=\"text\" [(ngModel)]=\"item.value[header.fieldName][0]\" (ngModelChange)=\"updateCheckText(item, header.fieldName, item.value[header.fieldName][0])\" style=\"width: 85px; height: 27px; text-align: center; padding: 5px; border-bottom: none; border-top: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; background: transparent;outline: none;\">\r\n <label class=\"switch2\">\r\n <input class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \r\n type=\"checkbox\"\r\n [checked]=\"item.value[header.fieldName][1] == header.toggleValue[0]\"/>\r\n <span class=\"switch-label2\" data-on=\"Psi\" data-off=\"Bar\"></span> \r\n <span class=\"switch-handle2\"></span> \r\n </label> \r\n </div>\r\n </div>\r\n <div *ngIf=\"header.type === 'labelcheckbox'\">\r\n <div style=\"display: flex; justify-content: center;align-items: center;\">\r\n <!-- HA 19DEC23 For translation -->\r\n <span style=\"text-align:left;\">{{ 'calibrated' | i18n:i18nService.currentLanguage }}</span>\r\n <label class=\"switch2\">\r\n <input class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \r\n type=\"checkbox\"\r\n [checked]=\"item.value[header.fieldName] == header.toggleValue[0]\"/>\r\n <span class=\"switch-label3\" data-on=\"Yes\" data-off=\"No\"></span> \r\n <span class=\"switch-handle2\"></span> \r\n </label> \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType === 'lockout'\">\r\n <td colspan=\"1\">\r\n <!-- HA 19DEC23 For translation -->\r\n <b style=\"text-align: center; cursor: pointer;\" id=\"addSafety\" (click)=\"addRow()\">{{ 'addMore' | i18n:i18nService.currentLanguage }} +</b>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType != 'lockout'\">\r\n <td colspan=\"3\">\r\n <!-- HA 19DEC23 For translation -->\r\n <b>{{ 'addMore' | i18n:i18nService.currentLanguage }}</b>\r\n </td>\r\n <td colspan=\"2\" style=\"text-align: center; cursor: pointer;\" id=\"addSafety\" (click)=\"addRow()\">\r\n +\r\n </td>\r\n </tr>\r\n <tr *ngFor=\"let item of tableAppendix | keyvalue; let k = index\">\r\n <td *ngFor=\"let header of tableHeader; let l = index\">\r\n <div *ngIf=\"header.type === 'text'\" >\r\n <input type=\"text\" [(ngModel)]=\"item.value[0][header.fieldName]\" (ngModelChange)=\"updateLabel(k, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\r\n </div>\r\n <div *ngIf=\"header.type.includes('dropdown') && item.key == 'dropDownData'\" >\r\n <!-- HA 19DEC23 For translation -->\r\n <app-custom-dropdown [fromShengel]=\"true\" [apiMeta]=\"dropDownApi\" \r\n [selectedValue]=\"item.value[0].value[header.fieldName]\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n (valueChange)=\"updateTableAppendix(item,header.fieldName,$event)\">\r\n </app-custom-dropdown>\r\n </div>\r\n <div *ngIf=\"header.type.includes('datetime') && item.key == 'dateData'\">\r\n <input [(ngModel)]=\"item.value[0].value[header.fieldName]\" type=\"datetime-local\"\r\n (ngModelChange)=\"updateTableAppendix(item,header.fieldName,$event)\"\r\n placeholder=\"DD/MM/YYYY HH:MM\">\r\n </div>\r\n <div *ngIf=\"header.type.includes('checkbox') && item.key == 'toggleData'\">\r\n <label class=\"switch2\">\r\n <input class=\"switch-input2\" (change)=\"updateTableAppendix(item,header.fieldName,$event.target.checked)\" \r\n type=\"checkbox\"\r\n [checked]=\"item.value[0].value[header.fieldName] == item.value[0].toggleValue[0]\"/>\r\n <span class=\"switch-label3\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \r\n <span class=\"switch-handle2\"></span> \r\n </label> \r\n </div>\r\n <div *ngIf=\"header.type.includes('file') && item.key == 'fileData'\">\r\n <app-file-upload [limitFileUploading]=\"2\" [allFiles]=\"item.value[0].value[header.fieldName]\" [tableFile]=\"true\"\r\n (selectedFileData)=\"updateTableAppendix(item ,header.fieldName, $event)\"\r\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.switch2{position:relative;width:73px;height:23.5px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eee,#fff 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:5px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input2{position:absolute;top:0;left:0;opacity:0}.switch-label2{position:relative;display:block;height:inherit;font-size:12px;background:#afacac80;color:#000;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label3{position:relative;display:block;height:inherit;font-size:12px;background:red;color:#fff;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label2:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label3:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label2:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label3:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label2:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-label3:after{content:attr(data-on);left:11px;margin-left:10px;vertical-align:sub;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input2:checked~.switch-label2{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label3{background:#02ad02;border-color:#02ad02;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label2:before{opacity:0}.switch-input2:checked~.switch-label3:before{opacity:0}.switch-input2:checked~.switch-label2:after{opacity:1;margin-right:15px}.switch-input2:checked~.switch-label3:after{opacity:1;margin-right:15px}.switch-handle2{position:absolute;top:2px;left:2px;width:18px;height:18px;background:linear-gradient(to bottom,#fff 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:20%;box-shadow:1px 1px 5px #0003}.switch-handle2:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eee,#fff);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input2:checked~.switch-handle2{left:51px;box-shadow:-1px 1px 5px #0003}.switch-label2,.switch-handle2,.switch-label3{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"] }]
|
|
8655
|
+
args: [{ selector: 'app-table-appendix', template: "<table class=\"table table-striped table-bordered\">\n <thead class=\"none-border\" *ngIf=\"tableInfo.tableType === 'lockout' && tableInfo.tableHeader\">\n <th></th>\n <th>{{ tableInfo.tableHeader }}</th>\n <th></th>\n </thead>\n <thead>\n <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + header.size\">\n {{ header.label }}\n </th>\n </thead>\n <tbody id=\"safetyMeasuresTableBody\">\n <tr *ngFor=\"let item of tableData; let i = index\">\n <td *ngFor=\"let header of tableHeader; let j = index\">\n <div *ngIf=\"header.type === 'text'\">\n <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" [placeholder]=\"header.placeholder\" (ngModelChange)=\"tableInfo.tableType != 'lockout' ? updateLabel(i, header.fieldName, item[header.fieldName]) : updateNumber(item, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.type.includes('number')\">\n <!-- HA 19DEC23 For translation -->\n <input type=\"number\" [(ngModel)]=\"item.value[header.fieldName]\" [disabled]=\"item.value[getPreviousTestKey(item, header.fieldName)] === null && tableInfo.tableType != 'lockout'\" (ngModelChange)=\"updateNumber(item, header.fieldName, item.value[header.fieldName])\" placeholder=\"{{ 'enterValue' | i18n:i18nService.currentLanguage }}\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.type === 'dropdown'\">\n <app-custom-dropdown [fromShengel]=\"true\" [options]=\"dropDownData\" \n [selectedValue]=\"item.value[header.fieldName]\" [placeholder]=\"header.placeholder\"\n (valueChange)=\"updateDropDown(item,header.fieldName,$event)\">\n </app-custom-dropdown>\n </div>\n <div *ngIf=\"header.type === 'textcheckbox'\">\n <div style=\"display: flex; justify-content: center;align-items: center;\">\n <input type=\"text\" [(ngModel)]=\"item.value[header.fieldName][0]\" (ngModelChange)=\"updateCheckText(item, header.fieldName, item.value[header.fieldName][0])\" style=\"width: 85px; height: 27px; text-align: center; padding: 5px; border-bottom: none; border-top: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; background: transparent;outline: none;\">\n <label class=\"switch2\">\n <input class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n type=\"checkbox\"\n [checked]=\"item.value[header.fieldName][1] == header.toggleValue[0]\"/>\n <span class=\"switch-label2\" data-on=\"Psi\" data-off=\"Bar\"></span> \n <span class=\"switch-handle2\"></span> \n </label> \n </div>\n </div>\n <div *ngIf=\"header.type === 'labelcheckbox'\">\n <div style=\"display: flex; justify-content: center;align-items: center;\">\n <!-- HA 19DEC23 For translation -->\n <span style=\"text-align:left;\">{{ 'calibrated' | i18n:i18nService.currentLanguage }}</span>\n <label class=\"switch2\">\n <input class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n type=\"checkbox\"\n [checked]=\"item.value[header.fieldName] == header.toggleValue[0]\"/>\n <span class=\"switch-label3\" data-on=\"Yes\" data-off=\"No\"></span> \n <span class=\"switch-handle2\"></span> \n </label> \n </div>\n </div>\n </td>\n </tr>\n <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType === 'lockout'\">\n <td colspan=\"1\">\n <!-- HA 19DEC23 For translation -->\n <b style=\"text-align: center; cursor: pointer;\" id=\"addSafety\" (click)=\"addRow()\">{{ 'addMore' | i18n:i18nService.currentLanguage }} +</b>\n </td>\n </tr>\n <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType != 'lockout'\">\n <td colspan=\"3\">\n <!-- HA 19DEC23 For translation -->\n <b>{{ 'addMore' | i18n:i18nService.currentLanguage }}</b>\n </td>\n <td colspan=\"2\" style=\"text-align: center; cursor: pointer;\" id=\"addSafety\" (click)=\"addRow()\">\n +\n </td>\n </tr>\n <tr *ngFor=\"let item of tableAppendix | keyvalue; let k = index\">\n <td *ngFor=\"let header of tableHeader; let l = index\">\n <div *ngIf=\"header.type === 'text'\" >\n <input type=\"text\" [(ngModel)]=\"item.value[0][header.fieldName]\" (ngModelChange)=\"updateLabel(k, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.type.includes('dropdown') && item.key == 'dropDownData'\" >\n <!-- HA 19DEC23 For translation -->\n <app-custom-dropdown [fromShengel]=\"true\" [apiMeta]=\"dropDownApi\" \n [selectedValue]=\"item.value[0].value[header.fieldName]\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n (valueChange)=\"updateTableAppendix(item,header.fieldName,$event)\">\n </app-custom-dropdown>\n </div>\n <div *ngIf=\"header.type.includes('datetime') && item.key == 'dateData'\">\n <input [(ngModel)]=\"item.value[0].value[header.fieldName]\" type=\"datetime-local\"\n (ngModelChange)=\"updateTableAppendix(item,header.fieldName,$event)\"\n placeholder=\"DD/MM/YYYY HH:MM\">\n </div>\n <div *ngIf=\"header.type.includes('checkbox') && item.key == 'toggleData'\">\n <label class=\"switch2\">\n <input class=\"switch-input2\" (change)=\"updateTableAppendix(item,header.fieldName,$event.target.checked)\" \n type=\"checkbox\"\n [checked]=\"item.value[0].value[header.fieldName] == item.value[0].toggleValue[0]\"/>\n <span class=\"switch-label3\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n <span class=\"switch-handle2\"></span> \n </label> \n </div>\n <div *ngIf=\"header.type.includes('file') && item.key == 'fileData'\">\n <app-file-upload [limitFileUploading]=\"2\" [allFiles]=\"item.value[0].value[header.fieldName]\" [tableFile]=\"true\"\n (selectedFileData)=\"updateTableAppendix(item ,header.fieldName, $event)\"\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n </div>\n </td>\n </tr>\n </tbody>\n </table>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.switch2{position:relative;width:73px;height:23.5px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eee,#fff 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:5px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input2{position:absolute;top:0;left:0;opacity:0}.switch-label2{position:relative;display:block;height:inherit;font-size:12px;background:#afacac80;color:#000;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label3{position:relative;display:block;height:inherit;font-size:12px;background:red;color:#fff;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label2:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label3:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label2:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label3:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label2:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-label3:after{content:attr(data-on);left:11px;margin-left:10px;vertical-align:sub;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input2:checked~.switch-label2{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label3{background:#02ad02;border-color:#02ad02;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label2:before{opacity:0}.switch-input2:checked~.switch-label3:before{opacity:0}.switch-input2:checked~.switch-label2:after{opacity:1;margin-right:15px}.switch-input2:checked~.switch-label3:after{opacity:1;margin-right:15px}.switch-handle2{position:absolute;top:2px;left:2px;width:18px;height:18px;background:linear-gradient(to bottom,#fff 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:20%;box-shadow:1px 1px 5px #0003}.switch-handle2:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eee,#fff);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input2:checked~.switch-handle2{left:51px;box-shadow:-1px 1px 5px #0003}.switch-label2,.switch-handle2,.switch-label3{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"] }]
|
|
8656
8656
|
}], ctorParameters: () => [{ type: I18nService }], propDecorators: { question: [{
|
|
8657
8657
|
type: Input
|
|
8658
8658
|
}], valueChange: [{
|
|
@@ -8683,11 +8683,11 @@ class CustomDateComponent {
|
|
|
8683
8683
|
this.dateChange.emit(event);
|
|
8684
8684
|
}
|
|
8685
8685
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDateComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8686
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomDateComponent, selector: "app-custom-date", inputs: { date: "date", readOnly: "readOnly", error: "error", errorMessage: "errorMessage" }, outputs: { dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- date component -->\
|
|
8686
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomDateComponent, selector: "app-custom-date", inputs: { date: "date", readOnly: "readOnly", error: "error", errorMessage: "errorMessage" }, outputs: { dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- date component -->\n<!-- VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<p>\n <input\n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)]=\"dateSelected\"\n [owlDateTimeTrigger]=\"dt1\"\n [owlDateTime]=\"dt1\"\n [disabled]=\"readOnly\"\n placeholder=\"DD/MM/YYYY\"\n (input)=\"onDateChange($event)\"\n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onDateChange($event)\"\n >\n <owl-date-time [pickerType]=\"'calendar'\" #dt1></owl-date-time>\n </p>\n <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i4$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }] });
|
|
8687
8687
|
}
|
|
8688
8688
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDateComponent, decorators: [{
|
|
8689
8689
|
type: Component,
|
|
8690
|
-
args: [{ selector: 'app-custom-date', template: "<!-- date component -->\
|
|
8690
|
+
args: [{ selector: 'app-custom-date', template: "<!-- date component -->\n<!-- VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<p>\n <input\n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)]=\"dateSelected\"\n [owlDateTimeTrigger]=\"dt1\"\n [owlDateTime]=\"dt1\"\n [disabled]=\"readOnly\"\n placeholder=\"DD/MM/YYYY\"\n (input)=\"onDateChange($event)\"\n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onDateChange($event)\"\n >\n <owl-date-time [pickerType]=\"'calendar'\" #dt1></owl-date-time>\n </p>\n <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"] }]
|
|
8691
8691
|
}], ctorParameters: () => [{ type: I18nService }], propDecorators: { date: [{
|
|
8692
8692
|
type: Input
|
|
8693
8693
|
}], readOnly: [{
|
|
@@ -8738,11 +8738,11 @@ class CustomTimeComponent {
|
|
|
8738
8738
|
this.timeChange.emit(event?.value);
|
|
8739
8739
|
}
|
|
8740
8740
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomTimeComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8741
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomTimeComponent, selector: "app-custom-time", inputs: { time: "time", readOnly: "readOnly", error: "error", errorMessage: "errorMessage" }, outputs: { timeChange: "timeChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- time component -->\
|
|
8741
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomTimeComponent, selector: "app-custom-time", inputs: { time: "time", readOnly: "readOnly", error: "error", errorMessage: "errorMessage" }, outputs: { timeChange: "timeChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- time component -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n <p>\n <input\n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)]=\"timeSelected\"\n [owlDateTimeTrigger]=\"dt2\"\n [owlDateTime]=\"dt2\"\n placeholder=\"HH:MM\"\n [readOnly]=\"readOnly\" \n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onTimeChange($event)\"\n >\n <owl-date-time [pickerType]=\"'timer'\" #dt2></owl-date-time>\n </p>\n <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i4$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }] });
|
|
8742
8742
|
}
|
|
8743
8743
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomTimeComponent, decorators: [{
|
|
8744
8744
|
type: Component,
|
|
8745
|
-
args: [{ selector: 'app-custom-time', template: "<!-- time component -->\
|
|
8745
|
+
args: [{ selector: 'app-custom-time', template: "<!-- time component -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n <p>\n <input\n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)]=\"timeSelected\"\n [owlDateTimeTrigger]=\"dt2\"\n [owlDateTime]=\"dt2\"\n placeholder=\"HH:MM\"\n [readOnly]=\"readOnly\" \n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onTimeChange($event)\"\n >\n <owl-date-time [pickerType]=\"'timer'\" #dt2></owl-date-time>\n </p>\n <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"] }]
|
|
8746
8746
|
}], ctorParameters: () => [{ type: I18nService }], propDecorators: { time: [{
|
|
8747
8747
|
type: Input
|
|
8748
8748
|
}], readOnly: [{
|
|
@@ -8771,11 +8771,11 @@ class CustomButtonComponent {
|
|
|
8771
8771
|
this.buttonValue.emit(event);
|
|
8772
8772
|
}
|
|
8773
8773
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8774
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomButtonComponent, selector: "app-custom-button", inputs: { height: "height", width: "width", textColor: "textColor", buttonText: "buttonText", value: "value", backgroundColor: "backgroundColor" }, outputs: { buttonValue: "buttonValue" }, ngImport: i0, template: "\
|
|
8774
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomButtonComponent, selector: "app-custom-button", inputs: { height: "height", width: "width", textColor: "textColor", buttonText: "buttonText", value: "value", backgroundColor: "backgroundColor" }, outputs: { buttonValue: "buttonValue" }, ngImport: i0, template: "\n<!-- 08NOV23 - button html added-->\n<button \n[style.height]=\"height\" \n[style.color]=\"textColor\"\n[style.background-color]=\"backgroundColor\"\n[style.width]=\"width\" class=\"custom-button\"\n[value] =\"value\"\n(click)=\"handleClick(value)\"\n >{{ buttonText }}</button>\n", styles: [".custom-button{border:none;cursor:pointer;border-radius:5px;font-size:16px;font-size:14px}.custom-button:hover{background-color:#0056b3}\n"] });
|
|
8775
8775
|
}
|
|
8776
8776
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomButtonComponent, decorators: [{
|
|
8777
8777
|
type: Component,
|
|
8778
|
-
args: [{ selector: 'app-custom-button', template: "\
|
|
8778
|
+
args: [{ selector: 'app-custom-button', template: "\n<!-- 08NOV23 - button html added-->\n<button \n[style.height]=\"height\" \n[style.color]=\"textColor\"\n[style.background-color]=\"backgroundColor\"\n[style.width]=\"width\" class=\"custom-button\"\n[value] =\"value\"\n(click)=\"handleClick(value)\"\n >{{ buttonText }}</button>\n", styles: [".custom-button{border:none;cursor:pointer;border-radius:5px;font-size:16px;font-size:14px}.custom-button:hover{background-color:#0056b3}\n"] }]
|
|
8779
8779
|
}], ctorParameters: () => [], propDecorators: { height: [{
|
|
8780
8780
|
type: Input
|
|
8781
8781
|
}], width: [{
|
|
@@ -8816,11 +8816,11 @@ class CustomModelComponent {
|
|
|
8816
8816
|
this.saveButtonEmit.emit();
|
|
8817
8817
|
}
|
|
8818
8818
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomModelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8819
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomModelComponent, selector: "app-custom-model", inputs: { modalTitle: "modalTitle", isModalOpen: "isModalOpen", modalSize: "modalSize", saveButtonValue: "saveButtonValue", modalFooter: "modalFooter" }, outputs: { saveButtonEmit: "saveButtonEmit", cancelButtonEmit: "cancelButtonEmit" }, ngImport: i0, template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\
|
|
8819
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomModelComponent, selector: "app-custom-model", inputs: { modalTitle: "modalTitle", isModalOpen: "isModalOpen", modalSize: "modalSize", saveButtonValue: "saveButtonValue", modalFooter: "modalFooter" }, outputs: { saveButtonEmit: "saveButtonEmit", cancelButtonEmit: "cancelButtonEmit" }, ngImport: i0, template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <span class=\"close\" (click)=\"onCancel()\">×</span>\n <h2>{{ modalTitle }}</h2>\n </div>\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n <!-- /* VD 06Sep24 styling changes */-->\n <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n <button (click)=\"onCancel()\">Cancel</button>\n <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\n </div>\n </div>\n</div>\n ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:70%;max-width:90%;max-height:80vh;overflow-y:auto}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.modal-body{max-height:60vh;overflow-y:auto}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-footer button{padding:10px 20px;margin:5px;font-size:16px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#f5f5f5;color:#333}.modal-footer button:hover{background-color:#e0e0e0;border-color:#bbb}@media (max-width: 768px){.modal-content{width:90%;margin:10% auto}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
8820
8820
|
}
|
|
8821
8821
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomModelComponent, decorators: [{
|
|
8822
8822
|
type: Component,
|
|
8823
|
-
args: [{ selector: 'app-custom-model', template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\
|
|
8823
|
+
args: [{ selector: 'app-custom-model', template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <span class=\"close\" (click)=\"onCancel()\">×</span>\n <h2>{{ modalTitle }}</h2>\n </div>\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n <!-- /* VD 06Sep24 styling changes */-->\n <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n <button (click)=\"onCancel()\">Cancel</button>\n <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\n </div>\n </div>\n</div>\n ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:70%;max-width:90%;max-height:80vh;overflow-y:auto}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.modal-body{max-height:60vh;overflow-y:auto}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-footer button{padding:10px 20px;margin:5px;font-size:16px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#f5f5f5;color:#333}.modal-footer button:hover{background-color:#e0e0e0;border-color:#bbb}@media (max-width: 768px){.modal-content{width:90%;margin:10% auto}}\n"] }]
|
|
8824
8824
|
}], ctorParameters: () => [], propDecorators: { modalTitle: [{
|
|
8825
8825
|
type: Input
|
|
8826
8826
|
}], isModalOpen: [{
|
|
@@ -8946,11 +8946,11 @@ class CustomRadioComponent {
|
|
|
8946
8946
|
}
|
|
8947
8947
|
}
|
|
8948
8948
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRadioComponent, deps: [{ token: ChangeService }, { token: DataService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8949
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomRadioComponent, selector: "app-custom-radio", inputs: { options: "options", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", readOnly: "readOnly", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel", referenceField: "referenceField", token: "token" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!-- RS 09DEC24 Changed keys-->\
|
|
8949
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomRadioComponent, selector: "app-custom-radio", inputs: { options: "options", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", readOnly: "readOnly", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel", referenceField: "referenceField", token: "token" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!-- RS 09DEC24 Changed keys-->\n <!-- RS 019JAN25 -->\n <!-- validate for NULL -->\n<div class=\"custom-radio-container\">\n <div\n *ngFor=\"let option of options\"\n [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\"\n >\n <input\n type=\"radio\"\n [id]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\"\n [checked] = \"selectedValue == option.value\"\n [name]=\"id\"\n [value]=\"selectedValue\"\n (change)=\"radioChange($event)\"\n [disabled]=\"readOnly\"\n />\n <label class=\"nxt-radio-label\" [for]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\">{{ apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value}}</label>\n </div>\n <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\n</div>", styles: [".custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.custom-radio-option.invalid label{color:red}.error-msg{color:red;font-size:12px;margin-top:5px}\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"] }] });
|
|
8950
8950
|
}
|
|
8951
8951
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRadioComponent, decorators: [{
|
|
8952
8952
|
type: Component,
|
|
8953
|
-
args: [{ selector: 'app-custom-radio', template: "<!-- RS 09DEC24 Changed keys-->\
|
|
8953
|
+
args: [{ selector: 'app-custom-radio', template: "<!-- RS 09DEC24 Changed keys-->\n <!-- RS 019JAN25 -->\n <!-- validate for NULL -->\n<div class=\"custom-radio-container\">\n <div\n *ngFor=\"let option of options\"\n [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\"\n >\n <input\n type=\"radio\"\n [id]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\"\n [checked] = \"selectedValue == option.value\"\n [name]=\"id\"\n [value]=\"selectedValue\"\n (change)=\"radioChange($event)\"\n [disabled]=\"readOnly\"\n />\n <label class=\"nxt-radio-label\" [for]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\">{{ apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value}}</label>\n </div>\n <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\n</div>", styles: [".custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.custom-radio-option.invalid label{color:red}.error-msg{color:red;font-size:12px;margin-top:5px}\n"] }]
|
|
8954
8954
|
}], ctorParameters: () => [{ type: ChangeService }, { type: DataService }, { type: I18nService }], propDecorators: { options: [{
|
|
8955
8955
|
type: Input
|
|
8956
8956
|
}], apiMeta: [{
|
|
@@ -9360,11 +9360,11 @@ class QuestionbookComponent {
|
|
|
9360
9360
|
this.isCalendarModalOpen = false;
|
|
9361
9361
|
}
|
|
9362
9362
|
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 });
|
|
9363
|
-
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" }, ngImport: i0, template: "<!-- HA 20DEC23 Book Style from salesforce -->\r\n<!-- HA 28DEC23 Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\r\n<!-- HA 18JAN24 Added class for styling -->\r\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\r\n <div class=\"form-row\">\r\n <!-- HA 20DEC23 Directive and Question Style from salesforce -->\r\n <!-- RA09DEC24 Changed keys-->\r\n <div\r\n [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\r\n *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\r\n <!-- Sub Question Label -->\r\n <!-- HA 20DEC23 Label Style from salesforce -->\r\n <!-- VD 09May24 is hide field change-->\r\n <div *ngIf=\"!ques.isHidden\">\r\n <div *ngIf=\"ques.type === 'DateTime'\">\r\n \r\n </div>\r\n <!-- VD 20JUN24 - help text changes-->\r\n <!-- VD 01Aug24 - validation change-->\r\n <!-- // VD 02Aug24 - label value style-->\r\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\r\n <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\r\n <div *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\r\n <!-- RS 17JAN2025 -->\r\n <!-- Displays icons with tooltips help text -->\r\n <div *ngIf=\"ques.questionText && ques?.helpText\" \r\n class=\"icon\" \r\n [matTooltip]=\"ques?.helpText\"\r\n matTooltipClass=\"white-tooltip\">i</div>\r\n <!-- RS 17JAN2025 -->\r\n <!-- Displays icons with tooltips for file requirements -->\r\n <div \r\n class=\"icon\" \r\n *ngIf=\"ques.fieldsMeta\"\r\n [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\"\r\n matTooltipClass=\"white-tooltip\"\r\n style=\"margin-left: 4px;\"\r\n >i</div>\r\n </span>\r\n</div>\r\n <!-- // VD 12Jun24 - readonly change-->\r\n <!-- DateTime -->\r\n <div *ngIf=\"ques.type === 'DateTime'\">\r\n <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\r\n </app-custom-date-picker>\r\n </div>\r\n \r\n <!-- Date-->\r\n <div *ngIf=\"ques.type === 'Date'\">\r\n <app-custom-date [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\r\n </app-custom-date>\r\n </div>\r\n \r\n <!-- Time-->\r\n <div *ngIf=\"ques.type === 'Time'\">\r\n <app-custom-time [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\r\n </app-custom-time>\r\n </div>\r\n <!-- calendar -->\r\n <div *ngIf=\"ques.type === 'Calendar'\">\r\n <app-custom-calendar\r\n [question]=\"ques\"\r\n (eventSelected)=\"getCalendarEvent($event)\"\r\n (dateSelected)=\"getCurrentCalendar($event)\"\r\n (openModal)=\"openCalendarModal($event)\"\r\n (closeModal)=\"closeCalendarModal($event)\"\r\n ></app-custom-calendar>\r\n <!-- model used in calendar component -->\r\n <app-custom-model *ngIf=\"isCalendarModalOpen\"\r\n [modalTitle]=\"calendarModalTitle\"\r\n [isModalOpen]=\"isCalendarModalOpen\"\r\n [modalSize]=\"calendarModalSize\"\r\n [saveButtonValue]=\"calendarSaveButtonValue\"\r\n [modalFooter]=\"modalCalendarModalFooter\"\r\n (saveButtonEmit)=\"onCalendarModalSave()\"\r\n (cancelButtonEmit)=\"closeCalendarModal($event)\"\r\n >\r\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\r\n </app-custom-model>\r\n </div>\r\n <!-- Text -->\r\n <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\r\n <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\r\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\r\n textBox: !qbItem.progressBar\r\n }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\r\n [error]=\"ques.error\" [placeholder]=\"ques.question\" (inputValue)=\"childEventCapture($event, ques)\">\r\n </app-custom-input>\r\n </div>\r\n \r\n <!-- for pick location -->\r\n <!-- VD 21DEC23 - dependent field change -->\r\n <div *ngIf=\"ques.type === 'Location'\">\r\n <!-- HA10012024 Added Api key as input -->\r\n <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\r\n </app-pick-location>\r\n </div>\r\n \r\n <!-- for text area -->\r\n <div *ngIf=\"ques.type === 'TextArea'\">\r\n <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\r\n (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\r\n </div>\r\n <!-- RS 06JAN25 -->\r\n <!-- for rich text editor -->\r\n <div *ngIf=\"ques.type === 'RichTextArea'\">\r\n <app-custom-rich-text \r\n [question]=\"ques\"\r\n [readOnly]=\"ques.isReadOnly\"\r\n [value]=\"ques.input || ''\"\r\n [error]=\"ques.error\"\r\n [placeholder]=\"ques.question\"\r\n (textValueChange)=\"childEventCapture($event, ques)\">\r\n </app-custom-rich-text>\r\n </div>\r\n\r\n <!-- Email -->\r\n <div *ngIf=\"ques.type === 'Email'\">\r\n <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n </div>\r\n \r\n <!-- Table -->\r\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n </app-custom-table>\r\n </div>\r\n \r\n <!-- Table Appendix -->\r\n <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\r\n <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n </app-table-appendix>\r\n </div>\r\n <!-- list -->\r\n <!-- VD 20Aug24 used correct attribute -->\r\n <div *ngIf=\"ques.type === 'List'\" class=\"\">\r\n <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\" [filterName]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\r\n </lib-search-box>\r\n </div>\r\n \r\n <!-- Dropdown -->\r\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\r\n <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\r\n <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\r\n <app-custom-dropdown [options]=\"ques.options\"\r\n [token]=\"token\"\r\n [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\r\n [selectedValue]=\"ques.selectedValue\"\r\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n [referenceField]=\"ques.referenceField\"\r\n [readOnly]=\"ques.isReadOnly\"\r\n [question]=\"ques\"\r\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n </app-custom-dropdown>\r\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\r\n </div>\r\n <!-- // VD 02Aug24 custom-radio component -->\r\n <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\r\n <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\r\n [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\r\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n [referenceField]=\"ques.referenceField\"\r\n [readOnly]=\"ques.isReadOnly\"\r\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n </app-custom-radio>\r\n </div>\r\n \r\n <!-- Attachment / Files -->\r\n <div *ngIf=\"ques.type === 'File'\" class=\"\">\r\n <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\r\n (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\r\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n </div>\r\n <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\r\n <app-dependent-table [alertMessage]=\"ques.errorMessage\">\r\n </app-dependent-table>\r\n </div>\r\n <div *ngIf=\"ques.type === 'Label'\" class=\"\">\r\n <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n </app-custom-label>\r\n </div>\r\n <!-- // VD 02Aug24 image component -->\r\n <div *ngIf=\"ques.type === 'Image'\" class=\"\">\r\n <app-custom-image [question]=\"ques\">\r\n </app-custom-image>\r\n </div>\r\n <!-- 08NOV23 - button type question added -->\r\n <!-- Button -->\r\n <div *ngIf=\"ques.type === 'Button'\" class=\"\">\r\n <app-custom-button [height]=\"'50px'\"\r\n [width]=\"'150px'\"\r\n [buttonText]=\"ques?.question\"\r\n [value]=\"ques?.question\"\r\n (buttonValue)=\"childEventCapture($event, ques)\"\r\n >\r\n </app-custom-button>\r\n </div>\r\n <!-- HA 20DEC23 This is to load book type questions-->\r\n <div *ngIf=\"ques.type === 'Book'\">\r\n <!-- HA 09FEB24 Added ternary operator -->\r\n <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\" (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- 06-09-24 for calendar type-->\r\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}\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: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { 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: CustomImageComponent, selector: "app-custom-image", inputs: ["alt", "src", "imageStyle", "question"] }, { 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" }] });
|
|
9363
|
+
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" }, 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\n [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\n *ngFor=\"let ques of questions;let i = index\" [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\">\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 <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\n <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\n <div *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips help text -->\n <div *ngIf=\"ques.questionText && ques?.helpText\" \n class=\"icon\" \n [matTooltip]=\"ques?.helpText\"\n matTooltipClass=\"white-tooltip\">i</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips for file requirements -->\n <div \n class=\"icon\" \n *ngIf=\"ques.fieldsMeta\"\n [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\"\n matTooltipClass=\"white-tooltip\"\n style=\"margin-left: 4px;\"\n >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\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (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\" [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\" [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\n [question]=\"ques\"\n (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\"\n (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"\n ></app-custom-calendar>\n <!-- model used in calendar component -->\n <app-custom-model *ngIf=\"isCalendarModalOpen\"\n [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\"\n [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\"\n [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\"\n (cancelButtonEmit)=\"closeCalendarModal($event)\"\n >\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (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\" [focusEvent]=\"clearSQError(ques.id)\"\n [error]=\"ques.error\" [placeholder]=\"ques.question\" (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\" (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n </div>\n \n <!-- for text area -->\n <div *ngIf=\"ques.type === 'TextArea'\">\n <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [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 \n [question]=\"ques\"\n [readOnly]=\"ques.isReadOnly\"\n [value]=\"ques.input || ''\"\n [error]=\"ques.error\"\n [placeholder]=\"ques.question\"\n (textValueChange)=\"childEventCapture($event, ques)\">\n </app-custom-rich-text>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.type === 'Email'\">\n <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n </div>\n \n <!-- Table -->\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-table>\n </div>\n \n <!-- Table Appendix -->\n <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\n <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-table-appendix>\n </div>\n <!-- list -->\n <!-- VD 20Aug24 used correct attribute -->\n <div *ngIf=\"ques.type === 'List'\" class=\"\">\n <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\" [filterName]=\"ques.input\" (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 <app-custom-dropdown [options]=\"ques.options\"\n [token]=\"token\"\n [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n [selectedValue]=\"ques.selectedValue\"\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\"\n [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\"\n [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\"\n [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\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\n (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\n [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'\"\n [width]=\"'150px'\"\n [buttonText]=\"ques?.question\"\n [value]=\"ques?.question\"\n (buttonValue)=\"childEventCapture($event, ques)\"\n >\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\" [questions]=\"ques.qbItem?.subQuestions\" (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </div>\n </div>\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}\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: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { 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: CustomImageComponent, selector: "app-custom-image", inputs: ["alt", "src", "imageStyle", "question"] }, { 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" }] });
|
|
9364
9364
|
}
|
|
9365
9365
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionbookComponent, decorators: [{
|
|
9366
9366
|
type: Component,
|
|
9367
|
-
args: [{ selector: 'lib-questionbook', template: "<!-- HA 20DEC23 Book Style from salesforce -->\r\n<!-- HA 28DEC23 Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\r\n<!-- HA 18JAN24 Added class for styling -->\r\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\r\n <div class=\"form-row\">\r\n <!-- HA 20DEC23 Directive and Question Style from salesforce -->\r\n <!-- RA09DEC24 Changed keys-->\r\n <div\r\n [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\r\n *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\r\n <!-- Sub Question Label -->\r\n <!-- HA 20DEC23 Label Style from salesforce -->\r\n <!-- VD 09May24 is hide field change-->\r\n <div *ngIf=\"!ques.isHidden\">\r\n <div *ngIf=\"ques.type === 'DateTime'\">\r\n \r\n </div>\r\n <!-- VD 20JUN24 - help text changes-->\r\n <!-- VD 01Aug24 - validation change-->\r\n <!-- // VD 02Aug24 - label value style-->\r\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\r\n <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\r\n <div *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\r\n <!-- RS 17JAN2025 -->\r\n <!-- Displays icons with tooltips help text -->\r\n <div *ngIf=\"ques.questionText && ques?.helpText\" \r\n class=\"icon\" \r\n [matTooltip]=\"ques?.helpText\"\r\n matTooltipClass=\"white-tooltip\">i</div>\r\n <!-- RS 17JAN2025 -->\r\n <!-- Displays icons with tooltips for file requirements -->\r\n <div \r\n class=\"icon\" \r\n *ngIf=\"ques.fieldsMeta\"\r\n [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\"\r\n matTooltipClass=\"white-tooltip\"\r\n style=\"margin-left: 4px;\"\r\n >i</div>\r\n </span>\r\n</div>\r\n <!-- // VD 12Jun24 - readonly change-->\r\n <!-- DateTime -->\r\n <div *ngIf=\"ques.type === 'DateTime'\">\r\n <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\r\n </app-custom-date-picker>\r\n </div>\r\n \r\n <!-- Date-->\r\n <div *ngIf=\"ques.type === 'Date'\">\r\n <app-custom-date [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\r\n </app-custom-date>\r\n </div>\r\n \r\n <!-- Time-->\r\n <div *ngIf=\"ques.type === 'Time'\">\r\n <app-custom-time [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\r\n </app-custom-time>\r\n </div>\r\n <!-- calendar -->\r\n <div *ngIf=\"ques.type === 'Calendar'\">\r\n <app-custom-calendar\r\n [question]=\"ques\"\r\n (eventSelected)=\"getCalendarEvent($event)\"\r\n (dateSelected)=\"getCurrentCalendar($event)\"\r\n (openModal)=\"openCalendarModal($event)\"\r\n (closeModal)=\"closeCalendarModal($event)\"\r\n ></app-custom-calendar>\r\n <!-- model used in calendar component -->\r\n <app-custom-model *ngIf=\"isCalendarModalOpen\"\r\n [modalTitle]=\"calendarModalTitle\"\r\n [isModalOpen]=\"isCalendarModalOpen\"\r\n [modalSize]=\"calendarModalSize\"\r\n [saveButtonValue]=\"calendarSaveButtonValue\"\r\n [modalFooter]=\"modalCalendarModalFooter\"\r\n (saveButtonEmit)=\"onCalendarModalSave()\"\r\n (cancelButtonEmit)=\"closeCalendarModal($event)\"\r\n >\r\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\r\n </app-custom-model>\r\n </div>\r\n <!-- Text -->\r\n <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\r\n <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\r\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\r\n textBox: !qbItem.progressBar\r\n }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\r\n [error]=\"ques.error\" [placeholder]=\"ques.question\" (inputValue)=\"childEventCapture($event, ques)\">\r\n </app-custom-input>\r\n </div>\r\n \r\n <!-- for pick location -->\r\n <!-- VD 21DEC23 - dependent field change -->\r\n <div *ngIf=\"ques.type === 'Location'\">\r\n <!-- HA10012024 Added Api key as input -->\r\n <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\r\n </app-pick-location>\r\n </div>\r\n \r\n <!-- for text area -->\r\n <div *ngIf=\"ques.type === 'TextArea'\">\r\n <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\r\n (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\r\n </div>\r\n <!-- RS 06JAN25 -->\r\n <!-- for rich text editor -->\r\n <div *ngIf=\"ques.type === 'RichTextArea'\">\r\n <app-custom-rich-text \r\n [question]=\"ques\"\r\n [readOnly]=\"ques.isReadOnly\"\r\n [value]=\"ques.input || ''\"\r\n [error]=\"ques.error\"\r\n [placeholder]=\"ques.question\"\r\n (textValueChange)=\"childEventCapture($event, ques)\">\r\n </app-custom-rich-text>\r\n </div>\r\n\r\n <!-- Email -->\r\n <div *ngIf=\"ques.type === 'Email'\">\r\n <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n </div>\r\n \r\n <!-- Table -->\r\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n </app-custom-table>\r\n </div>\r\n \r\n <!-- Table Appendix -->\r\n <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\r\n <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n </app-table-appendix>\r\n </div>\r\n <!-- list -->\r\n <!-- VD 20Aug24 used correct attribute -->\r\n <div *ngIf=\"ques.type === 'List'\" class=\"\">\r\n <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\" [filterName]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\r\n </lib-search-box>\r\n </div>\r\n \r\n <!-- Dropdown -->\r\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\r\n <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\r\n <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\r\n <app-custom-dropdown [options]=\"ques.options\"\r\n [token]=\"token\"\r\n [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\r\n [selectedValue]=\"ques.selectedValue\"\r\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n [referenceField]=\"ques.referenceField\"\r\n [readOnly]=\"ques.isReadOnly\"\r\n [question]=\"ques\"\r\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n </app-custom-dropdown>\r\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\r\n </div>\r\n <!-- // VD 02Aug24 custom-radio component -->\r\n <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\r\n <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\r\n [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\r\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n [referenceField]=\"ques.referenceField\"\r\n [readOnly]=\"ques.isReadOnly\"\r\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n </app-custom-radio>\r\n </div>\r\n \r\n <!-- Attachment / Files -->\r\n <div *ngIf=\"ques.type === 'File'\" class=\"\">\r\n <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\r\n (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\r\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n </div>\r\n <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\r\n <app-dependent-table [alertMessage]=\"ques.errorMessage\">\r\n </app-dependent-table>\r\n </div>\r\n <div *ngIf=\"ques.type === 'Label'\" class=\"\">\r\n <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n </app-custom-label>\r\n </div>\r\n <!-- // VD 02Aug24 image component -->\r\n <div *ngIf=\"ques.type === 'Image'\" class=\"\">\r\n <app-custom-image [question]=\"ques\">\r\n </app-custom-image>\r\n </div>\r\n <!-- 08NOV23 - button type question added -->\r\n <!-- Button -->\r\n <div *ngIf=\"ques.type === 'Button'\" class=\"\">\r\n <app-custom-button [height]=\"'50px'\"\r\n [width]=\"'150px'\"\r\n [buttonText]=\"ques?.question\"\r\n [value]=\"ques?.question\"\r\n (buttonValue)=\"childEventCapture($event, ques)\"\r\n >\r\n </app-custom-button>\r\n </div>\r\n <!-- HA 20DEC23 This is to load book type questions-->\r\n <div *ngIf=\"ques.type === 'Book'\">\r\n <!-- HA 09FEB24 Added ternary operator -->\r\n <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\" (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- 06-09-24 for calendar type-->\r\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}\n"] }]
|
|
9367
|
+
args: [{ selector: 'lib-questionbook', 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\n [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\n *ngFor=\"let ques of questions;let i = index\" [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\">\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 <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\n <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\n <div *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips help text -->\n <div *ngIf=\"ques.questionText && ques?.helpText\" \n class=\"icon\" \n [matTooltip]=\"ques?.helpText\"\n matTooltipClass=\"white-tooltip\">i</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips for file requirements -->\n <div \n class=\"icon\" \n *ngIf=\"ques.fieldsMeta\"\n [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\"\n matTooltipClass=\"white-tooltip\"\n style=\"margin-left: 4px;\"\n >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\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (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\" [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\" [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\n [question]=\"ques\"\n (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\"\n (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"\n ></app-custom-calendar>\n <!-- model used in calendar component -->\n <app-custom-model *ngIf=\"isCalendarModalOpen\"\n [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\"\n [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\"\n [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\"\n (cancelButtonEmit)=\"closeCalendarModal($event)\"\n >\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (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\" [focusEvent]=\"clearSQError(ques.id)\"\n [error]=\"ques.error\" [placeholder]=\"ques.question\" (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\" (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n </div>\n \n <!-- for text area -->\n <div *ngIf=\"ques.type === 'TextArea'\">\n <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [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 \n [question]=\"ques\"\n [readOnly]=\"ques.isReadOnly\"\n [value]=\"ques.input || ''\"\n [error]=\"ques.error\"\n [placeholder]=\"ques.question\"\n (textValueChange)=\"childEventCapture($event, ques)\">\n </app-custom-rich-text>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.type === 'Email'\">\n <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n </div>\n \n <!-- Table -->\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-table>\n </div>\n \n <!-- Table Appendix -->\n <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\n <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-table-appendix>\n </div>\n <!-- list -->\n <!-- VD 20Aug24 used correct attribute -->\n <div *ngIf=\"ques.type === 'List'\" class=\"\">\n <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\" [filterName]=\"ques.input\" (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 <app-custom-dropdown [options]=\"ques.options\"\n [token]=\"token\"\n [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n [selectedValue]=\"ques.selectedValue\"\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\"\n [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\"\n [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\"\n [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\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\n (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\n [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'\"\n [width]=\"'150px'\"\n [buttonText]=\"ques?.question\"\n [value]=\"ques?.question\"\n (buttonValue)=\"childEventCapture($event, ques)\"\n >\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\" [questions]=\"ques.qbItem?.subQuestions\" (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </div>\n </div>\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}\n"] }]
|
|
9368
9368
|
}], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: StorageService }, { type: I18nService }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
9369
9369
|
type: Inject,
|
|
9370
9370
|
args: [DOCUMENT]
|
|
@@ -9802,6 +9802,7 @@ class BookletComponent {
|
|
|
9802
9802
|
question['type'] = ques.type;
|
|
9803
9803
|
question['questionNumber'] = ques.questionNumber;
|
|
9804
9804
|
question['referenceField'] = ques?.referenceField;
|
|
9805
|
+
question['selectedValue'] = ques?.selectedValue; // MR 31JAN24 Need to pass the selected value too
|
|
9805
9806
|
this.answerList.push(question);
|
|
9806
9807
|
}
|
|
9807
9808
|
}
|
|
@@ -9887,11 +9888,11 @@ class BookletComponent {
|
|
|
9887
9888
|
this.handleCalendarEvent.emit(event);
|
|
9888
9889
|
}
|
|
9889
9890
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookletComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: StorageService }, { token: i1.ActivatedRoute }, { token: i6$1.DomSanitizer }, { token: ChangeService }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
9890
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookletComponent, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, usesOnChanges: true, ngImport: i0, template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\
|
|
9891
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookletComponent, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, usesOnChanges: true, ngImport: i0, template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\n <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n <!-- RS 09DEC24 Changed keys-->\n <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n <!-- HA 28DEC23 Below If logic is to load from booklet -->\n <div *ngIf=\"qb.subQuestions; else elseBlock\">\n <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n <div>\n <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n <!-- VD 08NOV23 - showing lable when its available-->\n <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText\" >\n {{ ques?.questionText }}\n </div>\n </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n <!--VD 06Sep24 calendar changes-->\n <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\n [labelValue]=\"labelValue\"\n [questionItem]=\"ques\"\n [translatedQuestions]=\"readTransQuestions(qb.id)\"\n [questions]=\"readQuestions(qb.id)\"\n (handleDropDown)=\"getDropDown($event)\"\n (handleCalendarDate)=\"getCalendarDate($event)\"\n (handleCalendarEvent)=\"getCalendarEvent($event)\"\n ></lib-questionbook>\n </div>\n </div>\n </div>\n <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n <ng-template #elseBlock>\n <div class=\"questiondiv1\">\n <div>\n <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n <!-- VD 08NOV23 - showing lable when its available-->\n <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText\" >\n {{ qb?.questionText }}\n {{ qb?.title }}\n </div>\n </div> <!-- VD 19JAN24 - getting token as input --> <!-- // VD 11Jun24 - translation changes-->\n <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.id)\" [questions]=\"readQuestions(qb.id)\" (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </ng-template>\n</div>\n<!-- RS 09DEC24 Changed keys-->\n<!-- Group Actions -->\n<!-- HA 19DEC23 For Direction -->\n<div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [ngClass]=\"langDirection\">\n <div *ngFor=\"let action of actions; let i = index\">\n <!-- // HA 22JAN24 Commonise the button style in fusion -->\n <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\n {{ action.name }}\n </button>\n </div>\n</div>\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}\n"], dependencies: [{ 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: "component", type: i7.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }] });
|
|
9891
9892
|
}
|
|
9892
9893
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookletComponent, decorators: [{
|
|
9893
9894
|
type: Component,
|
|
9894
|
-
args: [{ selector: 'lib-booklet', template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\
|
|
9895
|
+
args: [{ selector: 'lib-booklet', template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\n <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n <!-- RS 09DEC24 Changed keys-->\n <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n <!-- HA 28DEC23 Below If logic is to load from booklet -->\n <div *ngIf=\"qb.subQuestions; else elseBlock\">\n <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n <div>\n <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n <!-- VD 08NOV23 - showing lable when its available-->\n <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText\" >\n {{ ques?.questionText }}\n </div>\n </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n <!--VD 06Sep24 calendar changes-->\n <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\n [labelValue]=\"labelValue\"\n [questionItem]=\"ques\"\n [translatedQuestions]=\"readTransQuestions(qb.id)\"\n [questions]=\"readQuestions(qb.id)\"\n (handleDropDown)=\"getDropDown($event)\"\n (handleCalendarDate)=\"getCalendarDate($event)\"\n (handleCalendarEvent)=\"getCalendarEvent($event)\"\n ></lib-questionbook>\n </div>\n </div>\n </div>\n <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n <ng-template #elseBlock>\n <div class=\"questiondiv1\">\n <div>\n <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n <!-- VD 08NOV23 - showing lable when its available-->\n <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText\" >\n {{ qb?.questionText }}\n {{ qb?.title }}\n </div>\n </div> <!-- VD 19JAN24 - getting token as input --> <!-- // VD 11Jun24 - translation changes-->\n <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.id)\" [questions]=\"readQuestions(qb.id)\" (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </ng-template>\n</div>\n<!-- RS 09DEC24 Changed keys-->\n<!-- Group Actions -->\n<!-- HA 19DEC23 For Direction -->\n<div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [ngClass]=\"langDirection\">\n <div *ngFor=\"let action of actions; let i = index\">\n <!-- // HA 22JAN24 Commonise the button style in fusion -->\n <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\n {{ action.name }}\n </button>\n </div>\n</div>\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}\n"] }]
|
|
9895
9896
|
}], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: StorageService }, { type: i1.ActivatedRoute }, { type: i6$1.DomSanitizer }, { type: ChangeService }, { type: i0.ElementRef }, { type: I18nService }], propDecorators: { bookletId: [{
|
|
9896
9897
|
type: Input
|
|
9897
9898
|
}], serv: [{
|
|
@@ -9953,11 +9954,11 @@ class FileViewComponent {
|
|
|
9953
9954
|
return this.SharedService.docIcon(ext);
|
|
9954
9955
|
}
|
|
9955
9956
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileViewComponent, deps: [{ token: SharedService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
9956
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FileViewComponent, selector: "app-file-view", inputs: { documentData: "documentData", api: "api" }, ngImport: i0, template: "<div class=\"col-lg-12\">\
|
|
9957
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FileViewComponent, selector: "app-file-view", inputs: { documentData: "documentData", api: "api" }, ngImport: i0, template: "<div class=\"col-lg-12\">\n <div class=\"row\" style=\"text-align: left;\">\n <div class=\"col-md-12\">\n <!-- HA 19DEC23 For translation -->\n <label class=\"she-label attachment\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n </div>\n </div>\n <div class=\"row\" style=\"margin: 0;\">\n <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of documentData;let i = index;\" style=\"margin-bottom: 10px;\">\n <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\n <div class=\"col-lg-3 document_image\">\n <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n </div>\n <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n {{file?.name}}\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"documentData?.length === 0\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n </div>\n </div>\n ", styles: [".document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px}.document_image{background:#48b7ff66;padding:10px}.document_name{padding:15px 5px}.document_delete{position:absolute;background:#c20808;display:block;height:30px;width:30px;border-radius:50px;bottom:32px;right:-15px;cursor:pointer}.document_delete img{position:relative;left:8px;top:3px}\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: "pipe", type: I18nPipe, name: "i18n" }] });
|
|
9957
9958
|
}
|
|
9958
9959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileViewComponent, decorators: [{
|
|
9959
9960
|
type: Component,
|
|
9960
|
-
args: [{ selector: 'app-file-view', template: "<div class=\"col-lg-12\">\
|
|
9961
|
+
args: [{ selector: 'app-file-view', template: "<div class=\"col-lg-12\">\n <div class=\"row\" style=\"text-align: left;\">\n <div class=\"col-md-12\">\n <!-- HA 19DEC23 For translation -->\n <label class=\"she-label attachment\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n </div>\n </div>\n <div class=\"row\" style=\"margin: 0;\">\n <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of documentData;let i = index;\" style=\"margin-bottom: 10px;\">\n <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\n <div class=\"col-lg-3 document_image\">\n <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n </div>\n <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n {{file?.name}}\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"documentData?.length === 0\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n </div>\n </div>\n ", styles: [".document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px}.document_image{background:#48b7ff66;padding:10px}.document_name{padding:15px 5px}.document_delete{position:absolute;background:#c20808;display:block;height:30px;width:30px;border-radius:50px;bottom:32px;right:-15px;cursor:pointer}.document_delete img{position:relative;left:8px;top:3px}\n"] }]
|
|
9961
9962
|
}], ctorParameters: () => [{ type: SharedService }, { type: I18nService }], propDecorators: { documentData: [{
|
|
9962
9963
|
type: Input
|
|
9963
9964
|
}], api: [{
|
|
@@ -10023,11 +10024,11 @@ class SummaryPageComponent {
|
|
|
10023
10024
|
console.log('filteredQuestion', this.filteredQuestion);
|
|
10024
10025
|
}
|
|
10025
10026
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SummaryPageComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
10026
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SummaryPageComponent, selector: "lib-summary-page", inputs: { answerJson: "answerJson", api: "api" }, ngImport: i0, template: "<div class=\"col-lg-12\">\
|
|
10027
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SummaryPageComponent, selector: "lib-summary-page", inputs: { answerJson: "answerJson", api: "api" }, ngImport: i0, template: "<div class=\"col-lg-12\">\n <div class=\"panel-group panel-group-joined\" id=\"details\">\n <div class=\"panel panel-default\">\n <div class=\"panel-heading\">\n <h4 class=\"panel-title\">\n <!-- HA 19DEC23 For Translation -->\n<!-- HA 20FEB24 PTW Details to Details -->\n<!-- RS 09DEC24 Changed keys-->\n <a data-toggle=\"collapse\" data-parent=\"#details\" href=\"#collapse\" class=\"collapsed\">\n {{'details' | i18n:i18nService.currentLanguage}}\n </a>\n </h4>\n </div>\n <div [id]=\"'collapse'\" class=\"collapse\">\n <div class=\"panel-body\">\n <div class=\"row\" *ngFor=\"let item of filteredQuestion;let i = index\">\n <div class=\"col-lg-6\" *ngFor=\"let ques of item.questions\" >\n <label *ngIf=\"ques.type != 'File'\" >{{ques.question}}</label>\n <p *ngIf = \"ques.type != 'Dropdown' && ques.type != 'Table' && ques.type != 'File'\">{{ ques.input }}</p>\n <p *ngIf=\"ques.type == 'Dropdown'\">{{ ques.selectedValue }}</p>\n <p *ngIf=\"!ques.input\">N/A</p>\n <div *ngIf= \"ques.type == 'Table'\">\n <div *ngFor=\"let item of ques.input\" class=\"align-center\">\n <img *ngIf=\"item.value == 'yes' \" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n <p *ngIf=\"item.value == 'yes' \">{{ item.ppe }}</p>\n </div>\n </div>\n <div *ngIf = \"ques.type == 'File'\">\n <app-file-view [api]=\"api\" [documentData]=\"ques.input\"></app-file-view>\n </div>\n </div>\n <div *ngIf=\"i != filteredQuestion.length -1\" class=\"col-lg-12\">\n <hr>\n </div>\n </div>\n </div>\n </div> \n </div>\n</div>\n\n", styles: [".panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.align-center{display:flex}.align-center p{margin-left:8px}\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: "component", type: FileViewComponent, selector: "app-file-view", inputs: ["documentData", "api"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
|
|
10027
10028
|
}
|
|
10028
10029
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SummaryPageComponent, decorators: [{
|
|
10029
10030
|
type: Component,
|
|
10030
|
-
args: [{ selector: 'lib-summary-page', template: "<div class=\"col-lg-12\">\
|
|
10031
|
+
args: [{ selector: 'lib-summary-page', template: "<div class=\"col-lg-12\">\n <div class=\"panel-group panel-group-joined\" id=\"details\">\n <div class=\"panel panel-default\">\n <div class=\"panel-heading\">\n <h4 class=\"panel-title\">\n <!-- HA 19DEC23 For Translation -->\n<!-- HA 20FEB24 PTW Details to Details -->\n<!-- RS 09DEC24 Changed keys-->\n <a data-toggle=\"collapse\" data-parent=\"#details\" href=\"#collapse\" class=\"collapsed\">\n {{'details' | i18n:i18nService.currentLanguage}}\n </a>\n </h4>\n </div>\n <div [id]=\"'collapse'\" class=\"collapse\">\n <div class=\"panel-body\">\n <div class=\"row\" *ngFor=\"let item of filteredQuestion;let i = index\">\n <div class=\"col-lg-6\" *ngFor=\"let ques of item.questions\" >\n <label *ngIf=\"ques.type != 'File'\" >{{ques.question}}</label>\n <p *ngIf = \"ques.type != 'Dropdown' && ques.type != 'Table' && ques.type != 'File'\">{{ ques.input }}</p>\n <p *ngIf=\"ques.type == 'Dropdown'\">{{ ques.selectedValue }}</p>\n <p *ngIf=\"!ques.input\">N/A</p>\n <div *ngIf= \"ques.type == 'Table'\">\n <div *ngFor=\"let item of ques.input\" class=\"align-center\">\n <img *ngIf=\"item.value == 'yes' \" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n <p *ngIf=\"item.value == 'yes' \">{{ item.ppe }}</p>\n </div>\n </div>\n <div *ngIf = \"ques.type == 'File'\">\n <app-file-view [api]=\"api\" [documentData]=\"ques.input\"></app-file-view>\n </div>\n </div>\n <div *ngIf=\"i != filteredQuestion.length -1\" class=\"col-lg-12\">\n <hr>\n </div>\n </div>\n </div>\n </div> \n </div>\n</div>\n\n", styles: [".panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.align-center{display:flex}.align-center p{margin-left:8px}\n"] }]
|
|
10031
10032
|
}], ctorParameters: () => [{ type: I18nService }], propDecorators: { answerJson: [{
|
|
10032
10033
|
type: Input
|
|
10033
10034
|
}], api: [{
|
|
@@ -10083,28 +10084,28 @@ class I18nComponent {
|
|
|
10083
10084
|
window.location.reload();
|
|
10084
10085
|
}
|
|
10085
10086
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
10086
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: I18nComponent, selector: "app-i18n", ngImport: i0, template: `
|
|
10087
|
-
<a *ngFor="let lang of i18nService.langList" href="javascript:void(0);" class="not-selected-language" [ngClass]="{'selected-language': i18nService.currentLanguage === lang.lang}"
|
|
10088
|
-
|
|
10089
|
-
(click)="firstClick(lang.lang)">
|
|
10090
|
-
<span class="mr-3">
|
|
10091
|
-
{{lang.lang}}
|
|
10092
|
-
</span>
|
|
10093
|
-
</a>
|
|
10094
|
-
|
|
10087
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: I18nComponent, selector: "app-i18n", ngImport: i0, template: `
|
|
10088
|
+
<a *ngFor="let lang of i18nService.langList" href="javascript:void(0);" class="not-selected-language" [ngClass]="{'selected-language': i18nService.currentLanguage === lang.lang}"
|
|
10089
|
+
|
|
10090
|
+
(click)="firstClick(lang.lang)">
|
|
10091
|
+
<span class="mr-3">
|
|
10092
|
+
{{lang.lang}}
|
|
10093
|
+
</span>
|
|
10094
|
+
</a>
|
|
10095
|
+
|
|
10095
10096
|
`, isInline: true, styles: [".selected-language{color:green!important;font-weight:700;font-size:24px!important}\n", ".not-selected-language{color:#555;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
10096
10097
|
}
|
|
10097
10098
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nComponent, decorators: [{
|
|
10098
10099
|
type: Component,
|
|
10099
|
-
args: [{ selector: 'app-i18n', template: `
|
|
10100
|
-
<a *ngFor="let lang of i18nService.langList" href="javascript:void(0);" class="not-selected-language" [ngClass]="{'selected-language': i18nService.currentLanguage === lang.lang}"
|
|
10101
|
-
|
|
10102
|
-
(click)="firstClick(lang.lang)">
|
|
10103
|
-
<span class="mr-3">
|
|
10104
|
-
{{lang.lang}}
|
|
10105
|
-
</span>
|
|
10106
|
-
</a>
|
|
10107
|
-
|
|
10100
|
+
args: [{ selector: 'app-i18n', template: `
|
|
10101
|
+
<a *ngFor="let lang of i18nService.langList" href="javascript:void(0);" class="not-selected-language" [ngClass]="{'selected-language': i18nService.currentLanguage === lang.lang}"
|
|
10102
|
+
|
|
10103
|
+
(click)="firstClick(lang.lang)">
|
|
10104
|
+
<span class="mr-3">
|
|
10105
|
+
{{lang.lang}}
|
|
10106
|
+
</span>
|
|
10107
|
+
</a>
|
|
10108
|
+
|
|
10108
10109
|
`, styles: [".selected-language{color:green!important;font-weight:700;font-size:24px!important}\n", ".not-selected-language{color:#555;font-weight:700}\n"] }]
|
|
10109
10110
|
}], ctorParameters: () => [{ type: I18nService }] });
|
|
10110
10111
|
|
|
@@ -10219,11 +10220,11 @@ class LoaderComponent {
|
|
|
10219
10220
|
});
|
|
10220
10221
|
}
|
|
10221
10222
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoaderComponent, deps: [{ token: SharedService }], target: i0.ɵɵFactoryTarget.Component });
|
|
10222
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"loader\" *ngIf=\"isLoading\">\
|
|
10223
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"loader\" *ngIf=\"isLoading\">\n <div class=\"spinner\"></div>\n </div>\n ", styles: [".loader{position:fixed;inset:0;background:#fffc;display:flex;justify-content:center;align-items:center;z-index:9999}.spinner{border:4px solid rgba(0,0,0,.1);border-left-color:#000;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
10223
10224
|
}
|
|
10224
10225
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
10225
10226
|
type: Component,
|
|
10226
|
-
args: [{ selector: 'app-loader', template: "<div class=\"loader\" *ngIf=\"isLoading\">\
|
|
10227
|
+
args: [{ selector: 'app-loader', template: "<div class=\"loader\" *ngIf=\"isLoading\">\n <div class=\"spinner\"></div>\n </div>\n ", styles: [".loader{position:fixed;inset:0;background:#fffc;display:flex;justify-content:center;align-items:center;z-index:9999}.spinner{border:4px solid rgba(0,0,0,.1);border-left-color:#000;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
10227
10228
|
}], ctorParameters: () => [{ type: SharedService }] });
|
|
10228
10229
|
|
|
10229
10230
|
// VD 06-09-24 directive file to call component dynamically
|
|
@@ -10524,11 +10525,11 @@ class ElementComponent {
|
|
|
10524
10525
|
return styles;
|
|
10525
10526
|
}
|
|
10526
10527
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
|
|
10527
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\r\n<div class=\"center-frame\">\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\r\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\r\n <!-- AP-29JAN25 remove empty classes -->\r\n <!-- TextBox -->\r\n <div *ngIf=\"field.type === 'Text'\" style=\"padding: 10px;\r\n background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- CheckBox -->\r\n<div *ngIf=\"field.type === 'CheckBox'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\">\r\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n </div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <div class=\"checkbox-container\" style=\"width:100%; background-color:#ffff\">\r\n <div>\r\n <input type=\"checkbox\" name=\"option1\" value=\"1\"> Option 1 \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n <!-- AP-29JAN25 drop-down design check -->\r\n <!-- Dropdown Field -->\r\n <div *ngIf=\"field.type === 'Dropdown'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <select id=\"options\" class=\"dropdown\">\r\n <option value=\"option1\">Option 1</option>\r\n <option value=\"option2\">Option 2</option>\r\n <option value=\"option3\">Option 3</option>\r\n </select>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n <!-- Calendar -->\r\n<div *ngIf=\"['Calendar'].includes(field.type)\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\r\n </div>\r\n </div>\r\n</div>\r\n\r\n <!-- Email -->\r\n<div *ngIf=\"field.type === 'Email'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n <!-- Numbers -->\r\n<div *ngIf=\"field.type === 'Numbers'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\r\n </div>\r\n </div>\r\n</div>\r\n <!-- List -->\r\n <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- TextArea -->\r\n<div *ngIf=\"field.type === 'TextArea'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">\r\n {{ field.questionText ? field.questionText : 'Enter your text' }}\r\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\r\n </label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <textarea\r\n [placeholder]=\"field.question || 'Enter detailed text here...'\"\r\n [style.height.px]=\"field.size || 100\"\r\n [style.width.%]=\"100\"\r\n [readonly]=\"field.readOnly\"\r\n [class.hidden]=\"field.isHide\"\r\n [(ngModel)]=\"field.text\">\r\n </textarea>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- AP-29JAN25 radio-button design check -->\r\n<!-- Radio -->\r\n <div *ngIf=\"field.type === 'Radio'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\">\r\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n </div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <div class=\"radio-options\" style=\"display: flex;\">\r\n <div *ngFor=\"let option of field.options\" class=\"radio-item\" style=\"margin-right: 15px;\">\r\n <label>\r\n <input type=\"radio\" name=\"{{ field.questionText }}\" [(ngModel)]=\"field.value\" [value]=\"option\" />\r\n <span>{{ option }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n\r\n <!-- AP-29JAN25 Image design change -->\r\n <!-- Image -->\r\n<div *ngIf=\"field.type === 'Image'\" style=\"padding: 10px; background-color: whitesmoke;\" \r\n (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n </div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-container\">\r\n <label [class.required]=\"field.required\">\r\n {{ field.questionText ? field.questionText : 'Upload Image' }}\r\n </label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"file\" accept=\"image/*\" style=\"background-color: #ffff;\"/>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n <!-- Button -->\r\n <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <button>{{ field.questionText }}</button>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- File -->\r\n <!-- AP-29JAN25 file design change -->\r\n<div *ngIf=\"field.type === 'File'\" style=\"padding: 10px; background-color: whitesmoke;\" \r\n(click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n<div class=\"flex\" style=\"display: flex;\">\r\n<div class=\"all-dots\">\r\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n</div>\r\n<div style=\"width: 97%;\">\r\n <div class=\"flex lab-container\">\r\n <label [class.required]=\"field.required\">\r\n {{ field.questionText ? field.questionText : 'Upload File' }}\r\n </label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"file\" style=\"background-color: #ffff;\"/>\r\n</div>\r\n</div>\r\n</div>\r\n\r\n<!-- Tables -->\r\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n </table>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n\r\n <!-- Book -->\r\n<div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <!-- No input box here -->\r\n </div>\r\n </div>\r\n</div>\r\n\r\n <!-- Label -->\r\n<div *ngIf=\"field.type === 'Label'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <!-- No input box here -->\r\n </div>\r\n </div>\r\n</div>\r\n</ng-container>\r\n </div>\r\n <!-- Form Builder Section All Elements -->\r\n <div class=\"form-builder\">\r\n <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n <div class=\"hover-label\">Calendar</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n <img src=\"../assets/icons/CheckBox.svg\">\r\n <div class=\"hover-label\">Check Box</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Email')\">\r\n <img src=\"../assets/icons/Email.svg\">\r\n <div class=\"hover-label\">Email</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('File')\">\r\n <img src=\"../assets/icons/File.svg\">\r\n <div class=\"hover-label\">File</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('List')\">\r\n <img src=\"../assets/icons/List.svg\">\r\n <div class=\"hover-label\">List</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Tables')\">\r\n <img src=\"../assets/icons/Table.svg\">\r\n <div class=\"hover-label\">Tables</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Text')\">\r\n <img src=\"../assets/icons/Text.svg\">\r\n <div class=\"hover-label\">Text Box</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n <img src=\"../assets/icons/TextArea.svg\">\r\n <div class=\"hover-label\">Text Area</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n <img src=\"../assets/icons/Number.svg\">\r\n <div class=\"hover-label\">Numbers</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n <img src=\"../assets/icons/Drop.svg\">\r\n <div class=\"hover-label\">Dropdown</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Image')\">\r\n <img src=\"../assets/Image.svg\">\r\n <div class=\"hover-label\">Image</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Radio')\">\r\n <img src=\"../assets/icons/Radio.svg\">\r\n <div class=\"hover-label\">Radio</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Label')\">\r\n <img src=\"../assets/icons/Label.svg\">\r\n <div class=\"hover-label\">Label</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Book')\">\r\n <img src=\"../assets/icons/Book.svg\">\r\n <div class=\"hover-label\">Book</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Button')\">\r\n <img src=\"../assets/icons/Button.svg\">\r\n <div class=\"hover-label\">Button</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n", styles: [".center-frame{padding:26px;box-sizing:border-box;background-color:#edf1f5}.form-builder{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:85vh;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.dropdown{width:100%;padding:8px;font-size:16px;cursor:pointer}.dropdown:focus{border-color:#007bff;outline:none}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
|
|
10528
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<div class=\"center-frame\">\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n <!-- AP-29JAN25 remove empty classes -->\n <!-- TextBox -->\n <div *ngIf=\"field.type === 'Text'\" style=\"padding: 10px;\n background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n </div>\n </div>\n </div>\n\n <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <div class=\"checkbox-container\" style=\"width:100%; background-color:#ffff\">\n <div>\n <input type=\"checkbox\" name=\"option1\" value=\"1\"> Option 1 \n </div>\n \n </div>\n </div>\n </div>\n</div>\n <!-- AP-29JAN25 drop-down design check -->\n <!-- Dropdown Field -->\n <div *ngIf=\"field.type === 'Dropdown'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <select id=\"options\" class=\"dropdown\">\n <option value=\"option1\">Option 1</option>\n <option value=\"option2\">Option 2</option>\n <option value=\"option3\">Option 3</option>\n </select>\n </div>\n </div>\n</div>\n\n <!-- Calendar -->\n<div *ngIf=\"['Calendar'].includes(field.type)\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n </div>\n </div>\n</div>\n\n <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n\n\n <!-- Numbers -->\n<div *ngIf=\"field.type === 'Numbers'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n <!-- List -->\n <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n\n <!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Enter your text' }}\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <textarea\n [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\"\n [style.width.%]=\"100\"\n [readonly]=\"field.readOnly\"\n [class.hidden]=\"field.isHide\"\n [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n<!-- AP-29JAN25 radio-button design check -->\n<!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <div class=\"radio-options\" style=\"display: flex;\">\n <div *ngFor=\"let option of field.options\" class=\"radio-item\" style=\"margin-right: 15px;\">\n <label>\n <input type=\"radio\" name=\"{{ field.questionText }}\" [(ngModel)]=\"field.value\" [value]=\"option\" />\n <span>{{ option }}</span>\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n \n\n <!-- AP-29JAN25 Image design change -->\n <!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" style=\"padding: 10px; background-color: whitesmoke;\" \n (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Upload Image' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" accept=\"image/*\" style=\"background-color: #ffff;\"/>\n </div>\n </div>\n</div>\n\n <!-- Button -->\n <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n\n <!-- File -->\n <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" style=\"padding: 10px; background-color: whitesmoke;\" \n(click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n<div class=\"flex\" style=\"display: flex;\">\n<div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n</div>\n<div style=\"width: 97%;\">\n <div class=\"flex lab-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Upload File' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" style=\"background-color: #ffff;\"/>\n</div>\n</div>\n</div>\n\n<!-- Tables -->\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div>\n\n\n <!-- Book -->\n<div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <!-- No input box here -->\n </div>\n </div>\n</div>\n\n <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <!-- No input box here -->\n </div>\n </div>\n</div>\n</ng-container>\n </div>\n <!-- Form Builder Section All Elements -->\n <div class=\"form-builder\">\n <div class=\"element\" (click)=\"addElement('Calendar')\">\n <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\n <div class=\"hover-label\">Calendar</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('CheckBox')\">\n <img src=\"../assets/icons/CheckBox.svg\">\n <div class=\"hover-label\">Check Box</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Email')\">\n <img src=\"../assets/icons/Email.svg\">\n <div class=\"hover-label\">Email</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('File')\">\n <img src=\"../assets/icons/File.svg\">\n <div class=\"hover-label\">File</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('List')\">\n <img src=\"../assets/icons/List.svg\">\n <div class=\"hover-label\">List</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Tables')\">\n <img src=\"../assets/icons/Table.svg\">\n <div class=\"hover-label\">Tables</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Text')\">\n <img src=\"../assets/icons/Text.svg\">\n <div class=\"hover-label\">Text Box</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('TextArea')\">\n <img src=\"../assets/icons/TextArea.svg\">\n <div class=\"hover-label\">Text Area</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Numbers')\">\n <img src=\"../assets/icons/Number.svg\">\n <div class=\"hover-label\">Numbers</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Dropdown')\">\n <img src=\"../assets/icons/Drop.svg\">\n <div class=\"hover-label\">Dropdown</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Image')\">\n <img src=\"../assets/Image.svg\">\n <div class=\"hover-label\">Image</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Radio')\">\n <img src=\"../assets/icons/Radio.svg\">\n <div class=\"hover-label\">Radio</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Label')\">\n <img src=\"../assets/icons/Label.svg\">\n <div class=\"hover-label\">Label</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Book')\">\n <img src=\"../assets/icons/Book.svg\">\n <div class=\"hover-label\">Book</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Button')\">\n <img src=\"../assets/icons/Button.svg\">\n <div class=\"hover-label\">Button</div>\n </div>\n </div>\n\n </div>\n\n\n\n\n", styles: [".center-frame{padding:26px;box-sizing:border-box;background-color:#edf1f5}.form-builder{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:85vh;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.dropdown{width:100%;padding:8px;font-size:16px;cursor:pointer}.dropdown:focus{border-color:#007bff;outline:none}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
|
|
10528
10529
|
}
|
|
10529
10530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
|
|
10530
10531
|
type: Component,
|
|
10531
|
-
args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\r\n<div class=\"center-frame\">\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\r\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\r\n <!-- AP-29JAN25 remove empty classes -->\r\n <!-- TextBox -->\r\n <div *ngIf=\"field.type === 'Text'\" style=\"padding: 10px;\r\n background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- CheckBox -->\r\n<div *ngIf=\"field.type === 'CheckBox'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\">\r\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n </div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <div class=\"checkbox-container\" style=\"width:100%; background-color:#ffff\">\r\n <div>\r\n <input type=\"checkbox\" name=\"option1\" value=\"1\"> Option 1 \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n <!-- AP-29JAN25 drop-down design check -->\r\n <!-- Dropdown Field -->\r\n <div *ngIf=\"field.type === 'Dropdown'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <select id=\"options\" class=\"dropdown\">\r\n <option value=\"option1\">Option 1</option>\r\n <option value=\"option2\">Option 2</option>\r\n <option value=\"option3\">Option 3</option>\r\n </select>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n <!-- Calendar -->\r\n<div *ngIf=\"['Calendar'].includes(field.type)\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\r\n </div>\r\n </div>\r\n</div>\r\n\r\n <!-- Email -->\r\n<div *ngIf=\"field.type === 'Email'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n <!-- Numbers -->\r\n<div *ngIf=\"field.type === 'Numbers'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\r\n </div>\r\n </div>\r\n</div>\r\n <!-- List -->\r\n <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- TextArea -->\r\n<div *ngIf=\"field.type === 'TextArea'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">\r\n {{ field.questionText ? field.questionText : 'Enter your text' }}\r\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\r\n </label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <textarea\r\n [placeholder]=\"field.question || 'Enter detailed text here...'\"\r\n [style.height.px]=\"field.size || 100\"\r\n [style.width.%]=\"100\"\r\n [readonly]=\"field.readOnly\"\r\n [class.hidden]=\"field.isHide\"\r\n [(ngModel)]=\"field.text\">\r\n </textarea>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- AP-29JAN25 radio-button design check -->\r\n<!-- Radio -->\r\n <div *ngIf=\"field.type === 'Radio'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\">\r\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n </div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <div class=\"radio-options\" style=\"display: flex;\">\r\n <div *ngFor=\"let option of field.options\" class=\"radio-item\" style=\"margin-right: 15px;\">\r\n <label>\r\n <input type=\"radio\" name=\"{{ field.questionText }}\" [(ngModel)]=\"field.value\" [value]=\"option\" />\r\n <span>{{ option }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n\r\n <!-- AP-29JAN25 Image design change -->\r\n <!-- Image -->\r\n<div *ngIf=\"field.type === 'Image'\" style=\"padding: 10px; background-color: whitesmoke;\" \r\n (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n </div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-container\">\r\n <label [class.required]=\"field.required\">\r\n {{ field.questionText ? field.questionText : 'Upload Image' }}\r\n </label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"file\" accept=\"image/*\" style=\"background-color: #ffff;\"/>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n <!-- Button -->\r\n <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <button>{{ field.questionText }}</button>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- File -->\r\n <!-- AP-29JAN25 file design change -->\r\n<div *ngIf=\"field.type === 'File'\" style=\"padding: 10px; background-color: whitesmoke;\" \r\n(click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n<div class=\"flex\" style=\"display: flex;\">\r\n<div class=\"all-dots\">\r\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n</div>\r\n<div style=\"width: 97%;\">\r\n <div class=\"flex lab-container\">\r\n <label [class.required]=\"field.required\">\r\n {{ field.questionText ? field.questionText : 'Upload File' }}\r\n </label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"file\" style=\"background-color: #ffff;\"/>\r\n</div>\r\n</div>\r\n</div>\r\n\r\n<!-- Tables -->\r\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n </table>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n\r\n <!-- Book -->\r\n<div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <!-- No input box here -->\r\n </div>\r\n </div>\r\n</div>\r\n\r\n <!-- Label -->\r\n<div *ngIf=\"field.type === 'Label'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <!-- No input box here -->\r\n </div>\r\n </div>\r\n</div>\r\n</ng-container>\r\n </div>\r\n <!-- Form Builder Section All Elements -->\r\n <div class=\"form-builder\">\r\n <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n <div class=\"hover-label\">Calendar</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n <img src=\"../assets/icons/CheckBox.svg\">\r\n <div class=\"hover-label\">Check Box</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Email')\">\r\n <img src=\"../assets/icons/Email.svg\">\r\n <div class=\"hover-label\">Email</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('File')\">\r\n <img src=\"../assets/icons/File.svg\">\r\n <div class=\"hover-label\">File</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('List')\">\r\n <img src=\"../assets/icons/List.svg\">\r\n <div class=\"hover-label\">List</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Tables')\">\r\n <img src=\"../assets/icons/Table.svg\">\r\n <div class=\"hover-label\">Tables</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Text')\">\r\n <img src=\"../assets/icons/Text.svg\">\r\n <div class=\"hover-label\">Text Box</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n <img src=\"../assets/icons/TextArea.svg\">\r\n <div class=\"hover-label\">Text Area</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n <img src=\"../assets/icons/Number.svg\">\r\n <div class=\"hover-label\">Numbers</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n <img src=\"../assets/icons/Drop.svg\">\r\n <div class=\"hover-label\">Dropdown</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Image')\">\r\n <img src=\"../assets/Image.svg\">\r\n <div class=\"hover-label\">Image</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Radio')\">\r\n <img src=\"../assets/icons/Radio.svg\">\r\n <div class=\"hover-label\">Radio</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Label')\">\r\n <img src=\"../assets/icons/Label.svg\">\r\n <div class=\"hover-label\">Label</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Book')\">\r\n <img src=\"../assets/icons/Book.svg\">\r\n <div class=\"hover-label\">Book</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Button')\">\r\n <img src=\"../assets/icons/Button.svg\">\r\n <div class=\"hover-label\">Button</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n", styles: [".center-frame{padding:26px;box-sizing:border-box;background-color:#edf1f5}.form-builder{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:85vh;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.dropdown{width:100%;padding:8px;font-size:16px;cursor:pointer}.dropdown:focus{border-color:#007bff;outline:none}\n"] }]
|
|
10532
|
+
args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<div class=\"center-frame\">\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n <!-- AP-29JAN25 remove empty classes -->\n <!-- TextBox -->\n <div *ngIf=\"field.type === 'Text'\" style=\"padding: 10px;\n background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n </div>\n </div>\n </div>\n\n <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <div class=\"checkbox-container\" style=\"width:100%; background-color:#ffff\">\n <div>\n <input type=\"checkbox\" name=\"option1\" value=\"1\"> Option 1 \n </div>\n \n </div>\n </div>\n </div>\n</div>\n <!-- AP-29JAN25 drop-down design check -->\n <!-- Dropdown Field -->\n <div *ngIf=\"field.type === 'Dropdown'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <select id=\"options\" class=\"dropdown\">\n <option value=\"option1\">Option 1</option>\n <option value=\"option2\">Option 2</option>\n <option value=\"option3\">Option 3</option>\n </select>\n </div>\n </div>\n</div>\n\n <!-- Calendar -->\n<div *ngIf=\"['Calendar'].includes(field.type)\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n </div>\n </div>\n</div>\n\n <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n\n\n <!-- Numbers -->\n<div *ngIf=\"field.type === 'Numbers'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n <!-- List -->\n <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n\n <!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Enter your text' }}\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <textarea\n [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\"\n [style.width.%]=\"100\"\n [readonly]=\"field.readOnly\"\n [class.hidden]=\"field.isHide\"\n [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n<!-- AP-29JAN25 radio-button design check -->\n<!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <div class=\"radio-options\" style=\"display: flex;\">\n <div *ngFor=\"let option of field.options\" class=\"radio-item\" style=\"margin-right: 15px;\">\n <label>\n <input type=\"radio\" name=\"{{ field.questionText }}\" [(ngModel)]=\"field.value\" [value]=\"option\" />\n <span>{{ option }}</span>\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n \n\n <!-- AP-29JAN25 Image design change -->\n <!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" style=\"padding: 10px; background-color: whitesmoke;\" \n (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Upload Image' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" accept=\"image/*\" style=\"background-color: #ffff;\"/>\n </div>\n </div>\n</div>\n\n <!-- Button -->\n <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n\n <!-- File -->\n <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" style=\"padding: 10px; background-color: whitesmoke;\" \n(click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n<div class=\"flex\" style=\"display: flex;\">\n<div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n</div>\n<div style=\"width: 97%;\">\n <div class=\"flex lab-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Upload File' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" style=\"background-color: #ffff;\"/>\n</div>\n</div>\n</div>\n\n<!-- Tables -->\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div>\n\n\n <!-- Book -->\n<div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <!-- No input box here -->\n </div>\n </div>\n</div>\n\n <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <!-- No input box here -->\n </div>\n </div>\n</div>\n</ng-container>\n </div>\n <!-- Form Builder Section All Elements -->\n <div class=\"form-builder\">\n <div class=\"element\" (click)=\"addElement('Calendar')\">\n <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\n <div class=\"hover-label\">Calendar</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('CheckBox')\">\n <img src=\"../assets/icons/CheckBox.svg\">\n <div class=\"hover-label\">Check Box</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Email')\">\n <img src=\"../assets/icons/Email.svg\">\n <div class=\"hover-label\">Email</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('File')\">\n <img src=\"../assets/icons/File.svg\">\n <div class=\"hover-label\">File</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('List')\">\n <img src=\"../assets/icons/List.svg\">\n <div class=\"hover-label\">List</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Tables')\">\n <img src=\"../assets/icons/Table.svg\">\n <div class=\"hover-label\">Tables</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Text')\">\n <img src=\"../assets/icons/Text.svg\">\n <div class=\"hover-label\">Text Box</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('TextArea')\">\n <img src=\"../assets/icons/TextArea.svg\">\n <div class=\"hover-label\">Text Area</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Numbers')\">\n <img src=\"../assets/icons/Number.svg\">\n <div class=\"hover-label\">Numbers</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Dropdown')\">\n <img src=\"../assets/icons/Drop.svg\">\n <div class=\"hover-label\">Dropdown</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Image')\">\n <img src=\"../assets/Image.svg\">\n <div class=\"hover-label\">Image</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Radio')\">\n <img src=\"../assets/icons/Radio.svg\">\n <div class=\"hover-label\">Radio</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Label')\">\n <img src=\"../assets/icons/Label.svg\">\n <div class=\"hover-label\">Label</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Book')\">\n <img src=\"../assets/icons/Book.svg\">\n <div class=\"hover-label\">Book</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Button')\">\n <img src=\"../assets/icons/Button.svg\">\n <div class=\"hover-label\">Button</div>\n </div>\n </div>\n\n </div>\n\n\n\n\n", styles: [".center-frame{padding:26px;box-sizing:border-box;background-color:#edf1f5}.form-builder{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:85vh;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.dropdown{width:100%;padding:8px;font-size:16px;cursor:pointer}.dropdown:focus{border-color:#007bff;outline:none}\n"] }]
|
|
10532
10533
|
}], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { elementButtonClicked: [{
|
|
10533
10534
|
type: Output
|
|
10534
10535
|
}], formContainer: [{
|
|
@@ -10984,11 +10985,11 @@ class PropertiesComponent {
|
|
|
10984
10985
|
this.formButtonHandler.emit(this.formBuilderService.downloadElement());
|
|
10985
10986
|
}
|
|
10986
10987
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, deps: [{ token: i1$1.HttpClient }, { token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
|
|
10987
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["colorWheel"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n <div class=\"properties\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n <h1 class=\"header-title\">Element Properties</h1>\r\n <div class=\"menu-container\">\r\n <div class=\"menu-item\" (click)=\"download()\">\r\n <span >Download</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Start</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Path</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Clone</span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n {{ errorMessage }}\r\n </div>\r\n <!-- Element Properties -->\r\n <details class=\"first-properties\" open>\r\n <summary class=\"text-sm \">Elements Properties</summary>\r\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n <div class=\"flex-items-center\">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"label-properties\">\r\n <!-- Text Input -->\r\n <input *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [class.read-only]=\"selectedElement.readOnly\"\r\n [readonly]=\"selectedElement.readOnly\"\r\n class=\"text-sm1 \"\r\n />\r\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n {{ selectedElement.helpText }}\r\n </div>\r\n\r\n\r\n <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n class=\"font-selection1\"\r\n [value]=\"selectedElement?.font\"\r\n (change)=\"updateProperty('font', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n {{ option }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n class=\"font-weight\"\r\n [value]=\"selectedElement?.fontWeight\"\r\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n \r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n <span class=\"toggle-label\">Read Only</span>\r\n <label class=\"switch\">\r\n <input type=\"checkbox\"/>\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n <span class=\"toggle-label\">Is Hide</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.isHide\"\r\n (change)=\"onToggleChange('isHide', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n</div>\r\n\r\n <!-- Text Align Buttons -->\r\n <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onAlignSelect(option.value)\"\r\n [class.active]=\"selectedElement?.textAlign === option.value\"\r\n class=\"align-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n <label>{{ prop.label }}</label>\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onStyleSelect(option.value)\"\r\n [class.active]=\"isStyleActive(option.value)\"\r\n class=\"style-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Width</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.width\"\r\n (input)=\"updateProperty('width', $event.target.value)\"\r\n class=\"size-input\"\r\n\r\n />\r\n\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </details>\r\n\r\n <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n <div class=\"flex-items-center \">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"input-box-field\">\r\n <!-- Input Box -->\r\n <input\r\n *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n class=\"field-input\"\r\n />\r\n <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n <div class=\"sizes\">\r\n <div class=\"flex-gap\">\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"selectedElement.required\"\r\n (change)=\"onRequiredChange(true)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-label\"\r\n >\r\n Required\r\n </label>\r\n </div>\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"!selectedElement.required\"\r\n (change)=\"onRequiredChange(false)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-sm text-gray-400\"\r\n >\r\n Not Required\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n <div\r\n *ngFor=\"let option of prop.options; let i = index\"\r\n class=\"option-items\"\r\n >\r\n <!-- Option Input -->\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].label\"\r\n placeholder=\"Option {{ i + 1 }}\"\r\n class=\"options\"\r\n />\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].value\"\r\n placeholder=\"Value\"\r\n class=\"values\"\r\n />\r\n <!-- Remove Button -->\r\n <div class=\"remove\">\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n </div>\r\n <!-- Add Button -->\r\n <button\r\n type=\"button\"\r\n class=\"add-btn\"\r\n (click)=\"addOption(prop.options)\"\r\n >\r\n <div class=\"add-varient\">\r\n <span class=\"text-lg\">+</span>\r\n <span>Add Variants</span></div>\r\n </button>\r\n</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"design-footer\">\r\n <button class=\"btn\">Cancel</button>\r\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\r\n </div>\r\n</details>\r\n</div>\r\n</div>\r\n", styles: [".all-properties{padding:0;background-color:#f8fafc;position:relative;max-height:639px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:100px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
10988
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["colorWheel"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"properties\">\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Element Properties</h1>\n <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div>\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n <div *ngIf=\"errorMessage\" class=\"error-message\">\n {{ errorMessage }}\n </div>\n <!-- Element Properties -->\n <details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"\n />\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\n {{ selectedElement.helpText }}\n </div>\n\n\n <!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select\n *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\n class=\"font-selection1\"\n [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\n class=\"file \"\n[value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n{{ option.label }}\n</option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select\n *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\n class=\"font-weight\"\n [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.label }}\n </option>\n </select>\n</div>\n\n \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement?.isHide\"\n (change)=\"onToggleChange('isHide', $event)\"\n />\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n <!-- Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button\n *ngFor=\"let option of prop.options\"\n (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\"\n class=\"align-btn\"\n [title]=\"option.value\"\n >\n <img\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n [alt]=\"option.value\"\n class=\"icon-size\"\n />\n </button>\n </div>\n\n\n <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\n <label>{{ prop.label }}</label>\n <input\n type=\"number\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n class=\"size-input\"\n />\n <span class=\"size-unit\">{{ prop.unit }}</span>\n </div>\n\n\n <div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\n <button\n *ngFor=\"let option of prop.options\"\n (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\"\n class=\"style-btn\"\n [title]=\"option.value\"\n >\n <img\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n [alt]=\"option.value\"\n class=\"icon-size\"\n />\n </button>\n </div>\n\n<!-- Field Size Controls -->\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input\n type=\"number\"\n [value]=\"selectedElement?.width\"\n (input)=\"updateProperty('width', $event.target.value)\"\n class=\"size-input\"\n\n />\n\n </div>\n </div>\n</div>\n</div>\n </div>\n </ng-container>\n </div>\n </details>\n\n <!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input\n *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n class=\"field-input\"\n />\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n\n\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input\n type=\"radio\"\n [checked]=\"selectedElement.required\"\n (change)=\"onRequiredChange(true)\"\n name=\"required\"\n class=\"radio-input\"\n />\n <label\n class=\"text-label\"\n >\n Required\n </label>\n </div>\n <div class=\"flex-items\">\n <input\n type=\"radio\"\n [checked]=\"!selectedElement.required\"\n (change)=\"onRequiredChange(false)\"\n name=\"required\"\n class=\"radio-input\"\n />\n <label\n class=\"text-sm text-gray-400\"\n >\n Not Required\n </label>\n </div>\n </div>\n</div>\n</div>\n <!-- Chk Options Group -->\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\n <div\n *ngFor=\"let option of prop.options; let i = index\"\n class=\"option-items\"\n >\n <!-- Option Input -->\n <input\n type=\"text\"\n [(ngModel)]=\"prop.options[i].label\"\n placeholder=\"Option {{ i + 1 }}\"\n class=\"options\"\n />\n <input\n type=\"text\"\n [(ngModel)]=\"prop.options[i].value\"\n placeholder=\"Value\"\n class=\"values\"\n />\n <!-- Remove Button -->\n <div class=\"remove\">\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\n </div>\n <!-- Add Button -->\n <button\n type=\"button\"\n class=\"add-btn\"\n (click)=\"addOption(prop.options)\"\n >\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span></div>\n </button>\n</div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n </div>\n</details>\n</div>\n</div>\n", styles: [".all-properties{padding:0;background-color:#f8fafc;position:relative;max-height:639px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:100px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
10988
10989
|
}
|
|
10989
10990
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
|
|
10990
10991
|
type: Component,
|
|
10991
|
-
args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n <div class=\"properties\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n <h1 class=\"header-title\">Element Properties</h1>\r\n <div class=\"menu-container\">\r\n <div class=\"menu-item\" (click)=\"download()\">\r\n <span >Download</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Start</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Path</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Clone</span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n {{ errorMessage }}\r\n </div>\r\n <!-- Element Properties -->\r\n <details class=\"first-properties\" open>\r\n <summary class=\"text-sm \">Elements Properties</summary>\r\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n <div class=\"flex-items-center\">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"label-properties\">\r\n <!-- Text Input -->\r\n <input *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [class.read-only]=\"selectedElement.readOnly\"\r\n [readonly]=\"selectedElement.readOnly\"\r\n class=\"text-sm1 \"\r\n />\r\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n {{ selectedElement.helpText }}\r\n </div>\r\n\r\n\r\n <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n class=\"font-selection1\"\r\n [value]=\"selectedElement?.font\"\r\n (change)=\"updateProperty('font', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n {{ option }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n class=\"font-weight\"\r\n [value]=\"selectedElement?.fontWeight\"\r\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n \r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n <span class=\"toggle-label\">Read Only</span>\r\n <label class=\"switch\">\r\n <input type=\"checkbox\"/>\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n <span class=\"toggle-label\">Is Hide</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.isHide\"\r\n (change)=\"onToggleChange('isHide', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n</div>\r\n\r\n <!-- Text Align Buttons -->\r\n <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onAlignSelect(option.value)\"\r\n [class.active]=\"selectedElement?.textAlign === option.value\"\r\n class=\"align-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n <label>{{ prop.label }}</label>\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onStyleSelect(option.value)\"\r\n [class.active]=\"isStyleActive(option.value)\"\r\n class=\"style-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Width</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.width\"\r\n (input)=\"updateProperty('width', $event.target.value)\"\r\n class=\"size-input\"\r\n\r\n />\r\n\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </details>\r\n\r\n <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n <div class=\"flex-items-center \">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"input-box-field\">\r\n <!-- Input Box -->\r\n <input\r\n *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n class=\"field-input\"\r\n />\r\n <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n <div class=\"sizes\">\r\n <div class=\"flex-gap\">\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"selectedElement.required\"\r\n (change)=\"onRequiredChange(true)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-label\"\r\n >\r\n Required\r\n </label>\r\n </div>\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"!selectedElement.required\"\r\n (change)=\"onRequiredChange(false)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-sm text-gray-400\"\r\n >\r\n Not Required\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n <div\r\n *ngFor=\"let option of prop.options; let i = index\"\r\n class=\"option-items\"\r\n >\r\n <!-- Option Input -->\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].label\"\r\n placeholder=\"Option {{ i + 1 }}\"\r\n class=\"options\"\r\n />\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].value\"\r\n placeholder=\"Value\"\r\n class=\"values\"\r\n />\r\n <!-- Remove Button -->\r\n <div class=\"remove\">\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n </div>\r\n <!-- Add Button -->\r\n <button\r\n type=\"button\"\r\n class=\"add-btn\"\r\n (click)=\"addOption(prop.options)\"\r\n >\r\n <div class=\"add-varient\">\r\n <span class=\"text-lg\">+</span>\r\n <span>Add Variants</span></div>\r\n </button>\r\n</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"design-footer\">\r\n <button class=\"btn\">Cancel</button>\r\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\r\n </div>\r\n</details>\r\n</div>\r\n</div>\r\n", styles: [".all-properties{padding:0;background-color:#f8fafc;position:relative;max-height:639px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:100px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"] }]
|
|
10992
|
+
args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"properties\">\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Element Properties</h1>\n <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div>\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n <div *ngIf=\"errorMessage\" class=\"error-message\">\n {{ errorMessage }}\n </div>\n <!-- Element Properties -->\n <details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"\n />\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\n {{ selectedElement.helpText }}\n </div>\n\n\n <!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select\n *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\n class=\"font-selection1\"\n [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\n class=\"file \"\n[value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n{{ option.label }}\n</option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select\n *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\n class=\"font-weight\"\n [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.label }}\n </option>\n </select>\n</div>\n\n \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement?.isHide\"\n (change)=\"onToggleChange('isHide', $event)\"\n />\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n <!-- Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button\n *ngFor=\"let option of prop.options\"\n (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\"\n class=\"align-btn\"\n [title]=\"option.value\"\n >\n <img\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n [alt]=\"option.value\"\n class=\"icon-size\"\n />\n </button>\n </div>\n\n\n <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\n <label>{{ prop.label }}</label>\n <input\n type=\"number\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n class=\"size-input\"\n />\n <span class=\"size-unit\">{{ prop.unit }}</span>\n </div>\n\n\n <div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\n <button\n *ngFor=\"let option of prop.options\"\n (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\"\n class=\"style-btn\"\n [title]=\"option.value\"\n >\n <img\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n [alt]=\"option.value\"\n class=\"icon-size\"\n />\n </button>\n </div>\n\n<!-- Field Size Controls -->\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input\n type=\"number\"\n [value]=\"selectedElement?.width\"\n (input)=\"updateProperty('width', $event.target.value)\"\n class=\"size-input\"\n\n />\n\n </div>\n </div>\n</div>\n</div>\n </div>\n </ng-container>\n </div>\n </details>\n\n <!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input\n *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n class=\"field-input\"\n />\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n\n\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input\n type=\"radio\"\n [checked]=\"selectedElement.required\"\n (change)=\"onRequiredChange(true)\"\n name=\"required\"\n class=\"radio-input\"\n />\n <label\n class=\"text-label\"\n >\n Required\n </label>\n </div>\n <div class=\"flex-items\">\n <input\n type=\"radio\"\n [checked]=\"!selectedElement.required\"\n (change)=\"onRequiredChange(false)\"\n name=\"required\"\n class=\"radio-input\"\n />\n <label\n class=\"text-sm text-gray-400\"\n >\n Not Required\n </label>\n </div>\n </div>\n</div>\n</div>\n <!-- Chk Options Group -->\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\n <div\n *ngFor=\"let option of prop.options; let i = index\"\n class=\"option-items\"\n >\n <!-- Option Input -->\n <input\n type=\"text\"\n [(ngModel)]=\"prop.options[i].label\"\n placeholder=\"Option {{ i + 1 }}\"\n class=\"options\"\n />\n <input\n type=\"text\"\n [(ngModel)]=\"prop.options[i].value\"\n placeholder=\"Value\"\n class=\"values\"\n />\n <!-- Remove Button -->\n <div class=\"remove\">\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\n </div>\n <!-- Add Button -->\n <button\n type=\"button\"\n class=\"add-btn\"\n (click)=\"addOption(prop.options)\"\n >\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span></div>\n </button>\n</div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n </div>\n</details>\n</div>\n</div>\n", styles: [".all-properties{padding:0;background-color:#f8fafc;position:relative;max-height:639px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:100px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"] }]
|
|
10992
10993
|
}], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { colorWheel: [{
|
|
10993
10994
|
type: ViewChild,
|
|
10994
10995
|
args: ['colorWheel']
|
|
@@ -11016,11 +11017,11 @@ class MenuComponent {
|
|
|
11016
11017
|
this.activeIndex = index;
|
|
11017
11018
|
}
|
|
11018
11019
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11019
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuComponent, selector: "app-menu", ngImport: i0, template: "<!-- AP 22JAN25 - Top menu ,Left side menu -->\
|
|
11020
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuComponent, selector: "app-menu", ngImport: i0, template: "<!-- AP 22JAN25 - Top menu ,Left side menu -->\n<!-- menu.component.html -->\n<div class=\"top-bar\">\n <button class=\"button share-button\">Share</button>\n <button class=\"button publish-button\">Publish</button>\n</div>\n<div class=\"menu-sidebar\">\n <!-- Logo Section -->\n <div class=\"menu-logo\">\n <img src=\"../assets/Nxt.png\">\n </div>\n\n <!-- Menu Items -->\n <ul class=\"menu-list\">\n <li\n *ngFor=\"let item of menuItems; let i = index\"\n class=\"menu-item\"\n [class.active]=\"activeIndex === i\"\n (click)=\"setActiveMenu(i)\"\n [attr.aria-label]=\"item.label\"\n >\n <!-- Dynamic Icon -->\n <img [src]=\"item.icon\" alt=\"Menu Icon\" class=\"menu-icon\" />\n </li>\n </ul>\n\n <!-- Profile Section -->\n <div class=\"menu-profile\">\n <img src=\"../assets/icons/ProfileImage.svg\" />\n </div>\n</div>\n\n", styles: [".top-bar{display:flex;justify-content:flex-end;padding:15px;background-color:#fff;border-bottom:1px solid #ccc;width:100%;position:absolute;top:-3px}.button{padding:10px 20px;margin-left:10px;font-size:1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.share-button{background-color:#e5e8ed;color:#384652}.share-button:hover,.publish-button{background-color:#3374f2;color:#fff}.publish-button:hover{background-color:#005f73}.menu-sidebar{width:74px;height:100vh;background-color:#fff;color:#94a3b8;display:flex;flex-direction:column;align-items:center;position:absolute;top:0;box-shadow:2px 0 5px #0000001a}.menu-logo img{width:40px;margin:20px 0}.menu-list{list-style-type:none;padding:0;margin-top:48px;flex:1}.menu-item{width:50px;height:50px;display:flex;justify-content:center;align-items:center;margin:10px 0;cursor:pointer;border-radius:8px;transition:background .3s ease}.menu-item.active,.menu-item:hover{background-color:#ffb300;border-radius:50px;color:#fff}.icon{font-size:20px}.menu-profile img{width:40px;border-radius:50%;margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
11020
11021
|
}
|
|
11021
11022
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, decorators: [{
|
|
11022
11023
|
type: Component,
|
|
11023
|
-
args: [{ selector: 'app-menu', template: "<!-- AP 22JAN25 - Top menu ,Left side menu -->\
|
|
11024
|
+
args: [{ selector: 'app-menu', template: "<!-- AP 22JAN25 - Top menu ,Left side menu -->\n<!-- menu.component.html -->\n<div class=\"top-bar\">\n <button class=\"button share-button\">Share</button>\n <button class=\"button publish-button\">Publish</button>\n</div>\n<div class=\"menu-sidebar\">\n <!-- Logo Section -->\n <div class=\"menu-logo\">\n <img src=\"../assets/Nxt.png\">\n </div>\n\n <!-- Menu Items -->\n <ul class=\"menu-list\">\n <li\n *ngFor=\"let item of menuItems; let i = index\"\n class=\"menu-item\"\n [class.active]=\"activeIndex === i\"\n (click)=\"setActiveMenu(i)\"\n [attr.aria-label]=\"item.label\"\n >\n <!-- Dynamic Icon -->\n <img [src]=\"item.icon\" alt=\"Menu Icon\" class=\"menu-icon\" />\n </li>\n </ul>\n\n <!-- Profile Section -->\n <div class=\"menu-profile\">\n <img src=\"../assets/icons/ProfileImage.svg\" />\n </div>\n</div>\n\n", styles: [".top-bar{display:flex;justify-content:flex-end;padding:15px;background-color:#fff;border-bottom:1px solid #ccc;width:100%;position:absolute;top:-3px}.button{padding:10px 20px;margin-left:10px;font-size:1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.share-button{background-color:#e5e8ed;color:#384652}.share-button:hover,.publish-button{background-color:#3374f2;color:#fff}.publish-button:hover{background-color:#005f73}.menu-sidebar{width:74px;height:100vh;background-color:#fff;color:#94a3b8;display:flex;flex-direction:column;align-items:center;position:absolute;top:0;box-shadow:2px 0 5px #0000001a}.menu-logo img{width:40px;margin:20px 0}.menu-list{list-style-type:none;padding:0;margin-top:48px;flex:1}.menu-item{width:50px;height:50px;display:flex;justify-content:center;align-items:center;margin:10px 0;cursor:pointer;border-radius:8px;transition:background .3s ease}.menu-item.active,.menu-item:hover{background-color:#ffb300;border-radius:50px;color:#fff}.icon{font-size:20px}.menu-profile img{width:40px;border-radius:50%;margin-bottom:20px}\n"] }]
|
|
11024
11025
|
}] });
|
|
11025
11026
|
|
|
11026
11027
|
// AP-29JAN25
|
|
@@ -11040,11 +11041,11 @@ class FormComponent {
|
|
|
11040
11041
|
this.formButtonHandler.emit(event);
|
|
11041
11042
|
}
|
|
11042
11043
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11043
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\
|
|
11044
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container row\">\n <!-- app-element Component -->\n <app-element class=\"col-md-8\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n \n <!-- app-properties Component -->\n <app-properties class=\"col-md-4\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n </div>\n ", styles: [""], dependencies: [{ kind: "component", type: ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"], outputs: ["elementButtonClicked"] }, { kind: "component", type: PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType"], outputs: ["formButtonHandler"] }] });
|
|
11044
11045
|
}
|
|
11045
11046
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, decorators: [{
|
|
11046
11047
|
type: Component,
|
|
11047
|
-
args: [{ selector: 'app-form-builder', template: "<!-- AP-29JAN25 -->\
|
|
11048
|
+
args: [{ selector: 'app-form-builder', template: "<!-- AP-29JAN25 -->\n<div class=\"form-container row\">\n <!-- app-element Component -->\n <app-element class=\"col-md-8\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n \n <!-- app-properties Component -->\n <app-properties class=\"col-md-4\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n </div>\n " }]
|
|
11048
11049
|
}], propDecorators: { bookletJSON: [{
|
|
11049
11050
|
type: Input
|
|
11050
11051
|
}], bookletId: [{
|