@rangertechnologies/ngnxt 2.1.281 → 2.1.282
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/fesm2022/rangertechnologies-ngnxt.mjs +54 -29
- package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
- package/lib/components/custom-radio/custom-radio.component.d.ts +3 -2
- package/package.json +1 -1
- package/rangertechnologies-ngnxt-2.1.282.tgz +0 -0
- package/src/lib/style.css +3 -3
- package/rangertechnologies-ngnxt-2.1.281.tgz +0 -0
|
@@ -44549,7 +44549,7 @@ class NxtInput {
|
|
|
44549
44549
|
inputHeight = ''; // Use this input to set a custom height for the input.
|
|
44550
44550
|
inputWidth = ''; // Use this input to set a custom width for the Input.
|
|
44551
44551
|
inputId = 'default'; // Use this input to set a custom ID for the input. Default is 'default'.
|
|
44552
|
-
inputBorderSize =
|
|
44552
|
+
inputBorderSize = undefined; // Use this input to set the border size of the input. Default is '0px' for no border.
|
|
44553
44553
|
inputConfig = ''; // Use this input to pass configuration settings for the input (e.g., styles, actions).
|
|
44554
44554
|
confPassVal = ''; // Password value to check if the current field matches the confirmed password
|
|
44555
44555
|
confPass = false; // Set to true to enable password confirmation validation
|
|
@@ -47450,7 +47450,7 @@ class NxtInput {
|
|
|
47450
47450
|
useExisting: forwardRef(() => NxtInput),
|
|
47451
47451
|
multi: true,
|
|
47452
47452
|
},
|
|
47453
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "inputEls", predicate: ["inputEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- SKS31JAN25 -->\n<div class=\"hover-wrapper input-wrapper\" (document:click)=\"closeDropdown($event)\">\n <div>\n <div *ngIf=\"label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n 'padding-top': type === 'label' ? '10px' : '',\n 'padding-bottom': type === 'label' ? '10px' : ''\n }\" [style.font-weight]=\"labelWeight || type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n style=\"display: flex; gap: 5px;\"> \n {{ label }}\n <div *ngIf=\"helpText\" [matTooltip]=\"helpText\" matTooltipClass=\"white-tooltip\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg>\n </div>\n <div *ngIf=\"label && type != 'checkbox' && required && showLabel && mode === 'edit'\" style=\"color: red;\">*</div>\n </div>\n <div *ngIf=\"type !== 'label' && type !== 'richtext' && type !== 'textarea'\" style=\"display: flex;\">\n <div class=\"input-container\" [ngClass]=\"{'checkbox-padding': type === 'checkbox' || type === 'otp'}\"\n [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n [class.invalid]=\"control.invalid && control.touched\"\n [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.margin-top]=\"showLabel && label ? from === 'nxtTable' ? '0px !important' : '' : from === 'nxtTable' || from === 'normalDropDown' ? '0px !important' : '21px !important'\"\n [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\"\n style=\"position: relative; width: 100%;\">\n <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n <div *ngIf=\"mode === 'edit' && type === 'list'\">\n <!-- Inline search icon SVG -->\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"1.5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n <circle cx=\"8.25\" cy=\"8.25\" r=\"5.25\" />\n <path d=\"M15 15L12.75 12.75\" stroke-linecap=\"round\" />\n </svg>\n </div>\n <!-- SKS28FEB25 mobile number input -->\n <div *ngIf=\"type === 'tel'\" class=\"phone-input-container\">\n <div class=\"country-selector\" style=\"padding-left: 10px;\"\n (click)=\"toggleCountryDropdown()\">\n <!-- <span class=\"flag\">{{ selectedCountry.flag }}</span> -->\n <span class=\"dial-code\" [style.font-size]=\"inputValueSize\">{{ selectedCountry.dial_code }}</span>\n <svg class=\"arrow\" width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M0.684136 0.767477C0.922999 0.5378 1.30282 0.545248 1.5325 0.784111L4.5 3.93431L7.4675 0.784111C7.69718 0.545248 8.077 0.5378 8.31587 0.767477C8.55473 0.997153 8.56218 1.37698 8.3325 1.61584L4.9325 5.21584C4.81938 5.33349 4.66321 5.39998 4.5 5.39998C4.33679 5.39998 4.18062 5.33349 4.0675 5.21584L0.667501 1.61584C0.437825 1.37698 0.445272 0.997153 0.684136 0.767477Z\"\n fill=\"#626262\" />\n </svg>\n </div>\n <div *ngIf=\"showCountryDropdown\" class=\"country-dropdown\">\n <div class=\"search-box\">\n <input type=\"text\" [readOnly]=\"mode !== 'edit'\" placeholder=\"Search country...\" [value]=\"countrySearch\"\n (input)=\"filterCountries($event)\">\n </div>\n <div class=\"country-list\">\n <div *ngFor=\"let country of filteredCountries\" class=\"country-item\" (click)=\"selectCountry(country)\">\n <span class=\"flag\">{{ country.flag }}</span>\n <span class=\"name\">{{ country.name }}</span>\n <span class=\"dial-code\">{{ country.dial_code }}</span>\n </div>\n </div>\n </div>\n </div>\n <!-- SKS12SEP25 currency code -->\n <div *ngIf=\"type === 'currency'\" class=\"phone-input-container\">\n {{currencySymbol}}\n </div>\n @if(type !== 'datetime' && type !== 'date' && type !== 'time' && type !== 'month'){\n <input *ngFor=\"let input of cachedInputList; let i = index\" #inputEl #inputRef [id]=\"inputId\"\n [type]=\"isPasswordVisible ? 'text' : type === 'otp' || type === 'dropdown' ? 'text' : type\"\n [attr.placeholder]=\"type === 'otp' || mode !== 'edit' ? '' : placeholder || (type === 'tel' ? removeDialCode(selectedCountry.placeholder) : label)\"\n [formControl]=\"type === 'otp' ? $any(input) : control\"\n [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n [style.border]=\" type === 'otp' || mode !== 'edit' ? '' : from === 'nxtTable' ? type === 'checkbox' ? '1px solid gray !important' : 'none' : inputBorder\"\n [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '100% !important' : type === 'checkbox' ? 'auto' : inputWidth || '100% !important'\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [value]=\"type === 'tel' ? rawInputVal : value\"\n (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\n [checked]=\"type === 'checkbox' ? value : ''\"\n [style.font-size]=\"type === 'otp' ? '' : inputValueSize\" (focus)=\"type === 'otp' ? handleFocus($event) : null\"\n (blur)=\"type === 'otp' ? onTouched() : blurEmit()\"\n (keypress)=\"type === 'otp' ? handleKeyPress($event, i) : null\"\n (keydown)=\"type === 'otp' ? handleKeyDown($event, i) : from === 'normalDropDown' ? $event.preventDefault() : null\"\n (paste)=\"type === 'otp' ? handlePaste($event, i) : null\" inputmode=\"type === 'otp' ? numeric : null\"\n [attr.autocomplete]=\"type === 'otp' && i === 0 ? 'one-time-code' : type === 'list' ? 'list' : 'off'\"\n [attr.aria-expanded]=\"type === 'list' ? showSuggestion : 'off'\"\n [attr.inputmode]=\"type === 'otp' ? 'numeric' : null\" [attr.name]=\"type === 'otp' && i === 0 ? 'otp' : null\"\n (focusin)=\"focusinEmit($event)\" [attr.aria-owns]=\"type === 'list' ? ariaOwns : 'off'\"\n [attr.aria-haspopup]=\"type === 'list' ? ariaHasPopup : 'off'\" \n [readonly]=\"from === 'normalDropDown'\" \n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" (keydown.enter)=\"type === 'location' ? $event.preventDefault() : ''\"\n autocorrect=\"type === 'location' ? 'off' : ''\" autocapitalize=\"type === 'location' ? 'off' : ''\"\n spellcheck=\"type === 'location' ? 'off' : ''\"\n />\n }\n @else if(type === 'time' || type === 'month' || type === 'datetime' || type === 'date'){\n <div style=\"position: relative; width: 100%;\">\n <input [id]=\"inputId\"\n type=\"text\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || ''\"\n [ngClass]=\"'nxt-custom-input'\" \n [value]=\"value | NxtDate : type : languageCode : dateFormatName\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (focus)=\"onHijriInputClick(); $event.stopPropagation()\"\n (click)=\"onHijriInputClick();\"\n [attr.autocomplete]=\"'off'\"\n [attr.readonly]=\"'true'\"\n [class]=\"'nxt-' + (question.nxtTableId || question.id)\"\n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" style=\"\n width: 100% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n <!-- SKS14AUG25 Hijri Datepicker Popup -->\n <div *ngIf=\"showHijriPicker\" class=\"hijri-popup\" [ngClass]=\"{'rtl-class': direction === 'rtl'}\" [class]=\"'nxt-' + (question.nxtTableId || question.id)\">\n <app-nxt-datepicker\n [type]=\"type\"\n [value]=\"value\"\n [languageCode]=\"languageCode\"\n (dateChange)=\"onInputChange($event);\"\n >\n </app-nxt-datepicker>\n </div>\n </div>\n }\n <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date' || type === 'month' || type === 'time')\" (click)=\"openDatePicker(type); $event.stopPropagation()\" class=\"input-icons\"\n style=\"cursor: pointer;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n <path d=\"M2.32031 7.05285H15.6883\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.3322 9.98254H12.3392\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M9.00408 9.98254H9.01103\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.66815 9.98254H5.67509\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.3322 12.8976H12.3392\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M9.00408 12.8976H9.01103\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.66815 12.8976H5.67509\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.0329 1.5V3.96809\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.97435 1.5V3.96809\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.1787 2.68457H5.82822C3.6257 2.68457 2.25 3.91152 2.25 6.16684V12.9541C2.25 15.2449 3.6257 16.5002 5.82822 16.5002H12.1718C14.3812 16.5002 15.75 15.2661 15.75 13.0108V6.16684C15.7569 3.91152 14.3882 2.68457 12.1787 2.68457Z\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <!-- SKS7AUG25 api call Dotted Loader -->\n <div *ngIf=\"mode === 'edit' && isLoading\" class=\"dotted-loader\" aria-label=\"Loading\" role=\"status\">\n <span *ngFor=\"let dot of [].constructor(6); let i = index\" class=\"dot\" [style.--i]=\"i\"></span>\n </div>\n <div *ngIf=\"mode === 'edit' && type === 'list'\" class=\"input-icons\">\n <svg *ngIf=\"!isLoading\" (click)=\"removeValue()\" (keydown.enter)=\"removeValue()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer;\">\n <path d=\"M4.58496 7.41495L7.41495 4.58496\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7.41495 7.41495L4.58496 4.58496\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4.5 11H7.5C10 11 11 10 11 7.5V4.5C11 2 10 1 7.5 1H4.5C2 1 1 2 1 4.5V7.5C1 10 2 11 4.5 11Z\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n </div>\n <label class=\"checkboxLab\" *ngIf=\"label && type === 'checkbox' && showLabel\" [style.font-weight]=\"labelWeight\"\n [style.font-size]=\"labelSize\" [style.color]=\"labelColor || '#9a9a9a'\"\n style=\"margin-bottom: 0; padding-left: 10px; padding-right: 10px; width: 100% !important;\"> {{ label }}\n <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n </label> \n <!-- Always Show Dropdown Icon -->\n <div *ngIf=\"mode === 'edit' && type === 'dropdown'\" class=\"input-icons\">\n <svg (mousedown)=\"toggle($event); $event.preventDefault()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M4.5 11H7.5C10 11 11 10 11 7.5V4.5C11 2 10 1 7.5 1H4.5C2 1 1 2 1 4.5V7.5C1 10 2 11 4.5 11Z\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.23499 5.32L6 7.08L7.765 5.32\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <img *ngIf=\"mode === 'edit' && inputIconRightSrc\" [src]=\"inputIconRightSrc\" class=\"icon right-icon\"\n [style.height]=\"svgHeight\" [style.width]=\"svgWidth\">\n <img *ngIf=\"mode === 'edit' && type === 'password'\" class=\"toggle-icon\" (click)=\"togglePasswordVisibility()\"\n [src]=\"!isPasswordVisible ? '/assets/images/icons/general/Hide-Password.svg' : '/assets/images/icons/general/Show-Password.svg'\" />\n <div *ngIf=\"mode !== 'edit' && !question?.isReadOnly && from !== 'nxtTable'\" class=\"input-icons\">\n <svg class=\"edit-icon\" \n (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n <div *ngIf=\"viewEdit\" class=\"input-icons\">\n <svg (click)=\"saveChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n <div *ngIf=\"viewEdit\" class=\"input-icons\">\n <svg (click)=\"discardChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"type !== 'label' && type !== 'checkbox' && (type === 'richtext' || type === 'textarea')\" style=\"display: flex;\">\n <div class=\"input-container\"\n [style.margin-top]=\"showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' : '21px !important'\"\n [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n [class.invalid]=\"control.invalid && control.touched\"\n [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n <!-- SKS14JUN25 Dynamically load Quill editor toolbar -->\n <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" (ngModelChange)=\"onInputChange($event)\" [placeholder]=\"placeholder || ''\"\n [readOnly]=\"mode !== 'edit' || question?.isReadOnly\"\n (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n [modules]=\"getQuillModules(question.id)\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n style=\"width: 100%;\n border-radius: 5px;\n border: none;\n font-size: 16px;\">\n </quill-editor>\n <!-- View mode -->\n <div *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content ql-snow\"\n style=\"width: 98.5%;\n border-radius: 5px;\n border: none;\n padding: unset;\n font-size: 16px;\">\n <div class=\"ql-editor\" [innerHTML]=\"value\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.text-align]=\"direction === 'rtl' ? 'right' : '' \"\n [attr.dir]='direction'\n ></div>\n </div>\n <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"from === 'nxtTable' ? 1 : rows\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || ''\" [ngClass]=\"'custom-input'\"\n [formControl]=\"control\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder\"\n [style.height]=\"inputHeight\" [value]=\"value\" (input)=\" onInputChange($event)\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n [readOnly]=\"mode !== 'edit' || question?.isReadOnly\" [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" \n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n style=\"\n width: 100%;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\"\n >\n </textarea>\n <svg *ngIf=\"mode !== 'edit' && !viewEdit && from !== 'nxtTable' && (type === 'richtext' || type === 'textarea') && !question?.isReadOnly\"\n class=\"edit-icon\" (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <!-- SKS23APR25 Use control.invalid to show error on submit click -->\n <div *ngIf=\"type != 'checkbox' && type !== 'label' && control.invalid && (control.touched || control.dirty)\" style=\"height: 20px;\">\n <div class=\"error-message\">\n {{ getErrorMessage() }}\n </div>\n </div>\n </div>\n</div>", styles: ["label{font-size:14px;margin-bottom:10px;color:color-mix(in srgb,black,rgb(0,0,0) 80%)}.toggle-icon{width:20px;height:20px;cursor:pointer;fill:#666}.error-message{color:red;font-size:12px}input[type=text].custom-input,input[type=password].custom-input,input[type=number].custom-input,input[type=email].custom-input,input[type=tel].custom-input,input[type=list].custom-input,input[type=dropdown].custom-input,input[type=location].custom-input{width:100%;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}input.nxt-custom-input{width:100%!important;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.custom-input:-webkit-autofill:active,.nxt-custom-input:-webkit-autofill,.nxt-custom-input:-webkit-autofill:hover,.nxt-custom-input:-webkit-autofill:focus,.nxt-custom-input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important;-webkit-text-fill-color:inherit!important}.phone-input-container{display:flex;align-items:center;position:relative}.country-selector{display:flex;align-items:center;cursor:pointer;padding-right:12px;border-right:#ccc;margin-right:12px}.flag{margin-right:8px;font-size:20px}.dial-code{margin-right:8px;font-weight:500}.country-dropdown{position:absolute;top:100%;left:0;width:300px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:4px}.search-box{padding:8px;border-bottom:1px solid #ccc}.search-box input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.country-list{max-height:200px;overflow-y:auto}.country-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer}.country-item:hover{background-color:color-mix(in srgb,#fff,rgba(0,0,0,0) 30%)}.country-item .name{flex:1;margin:0 12px}.fcOtp{width:40px;height:40px;text-align:center;font-size:18px;border:1px solid #ccc;border-radius:5px;margin:5px;outline:none;transition:border-color .2s ease-in-out}textarea:focus-visible,textarea:focus,input:focus{outline:none;border-color:transparent;box-shadow:none}.input-container{display:flex;align-items:center;width:100%;border-radius:5px;border:1px solid #ccc;padding-left:5px;padding-right:5px}.icon-container{right:15px;padding-right:5px;pointer-events:auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center}.input-container.invalid{border:1px solid #DC3545!important;border-radius:5px}.checkbox-padding{margin-top:20px!important;padding:13px!important;width:100%!important;border:none!important}.view-mode{font-size:14px;color:#333}@media print{.view-mode{font-size:12pt;color:#000}}input::placeholder{font-family:var(--placeholder-font);color:var(--placeholder-color);font-size:var(--placeholder-size);font-weight:var(--placeholder-weight)}.dotted-loader{position:relative;width:10px;height:10px}.dotted-loader .dot{--i: 0;position:absolute;top:50%;left:50%;width:3px;height:3px;margin:-2px 0 0 -2px;border-radius:50%;background-color:#696969;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg));animation:spinDot 1s linear infinite;animation-delay:calc(var(--i) * .1s)}@keyframes spinDot{0%{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}50%{opacity:1;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(1.3)}to{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}}input:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important;border:none!important}textarea:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}.quill-view-content{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}: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%}.quill-view-content{background-color:#f0f0f0;border-radius:5px;border:none;padding:10px;overflow-wrap:break-word}.quill-view-content .ql-editor{white-space:normal;overflow:visible;min-height:auto}[dir=rtl] .quill-view-content *,.rtl .quill-view-content *{text-align:right!important;direction:rtl!important}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled,textarea:disabled,.quill-view-content{color:#999!important}input:disabled.from-nxt-table,textarea:disabled.from-nxt-table,.quill-view-content.from-nxt-table{color:#2c3137!important}.owl-dt-container-disabled,.owl-dt-trigger-disabled{opacity:unset!important}.input-wrapper{position:relative}.input-container{pointer-events:auto!important;position:relative}.custom-input,.nxt-custom-input{pointer-events:auto!important}.hijri-popup{position:absolute;top:100%;left:0;z-index:9999;background:#fff;box-shadow:0 2px 10px #0003;border-radius:6px}.hijri-popup.rtl-class{left:auto!important;right:0!important}.input-icons{padding-right:5px;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: NxtDatePipe, name: "NxtDate" }, { kind: "component", type: NxtDatepickerComponent, selector: "app-nxt-datepicker", inputs: ["type", "languageCode", "value"], outputs: ["dateChange"] }] });
|
|
47453
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "inputEls", predicate: ["inputEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- SKS31JAN25 -->\n<div class=\"hover-wrapper input-wrapper\" (document:click)=\"closeDropdown($event)\">\n <div>\n <div *ngIf=\"label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n 'padding-top': type === 'label' ? '10px' : '',\n 'padding-bottom': type === 'label' ? '10px' : ''\n }\" [style.font-weight]=\"labelWeight || type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n style=\"display: flex; gap: 5px;\"> \n {{ label }}\n <div *ngIf=\"helpText\" [matTooltip]=\"helpText\" matTooltipClass=\"white-tooltip\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg>\n </div>\n <div *ngIf=\"label && type != 'checkbox' && required && showLabel && mode === 'edit'\" style=\"color: red;\">*</div>\n </div>\n <div *ngIf=\"type !== 'label' && type !== 'richtext' && type !== 'textarea'\" style=\"display: flex;\">\n <div class=\"input-container\" [ngClass]=\"{'checkbox-padding': type === 'checkbox' || type === 'otp'}\"\n [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : '#FAFAFA'\"\n [class.invalid]=\"control.invalid && control.touched\"\n [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.margin-top]=\"showLabel && label ? from === 'nxtTable' ? '0px !important' : '' : from === 'nxtTable' || from === 'normalDropDown' ? '0px !important' : '21px !important'\"\n [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : ( inputBorderSize || 1 + 'px solid ' + inputBorder) : 'none'\"\n style=\"position: relative; width: 100%;\">\n <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n <div *ngIf=\"mode === 'edit' && type === 'list'\">\n <!-- Inline search icon SVG -->\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"1.5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n <circle cx=\"8.25\" cy=\"8.25\" r=\"5.25\" />\n <path d=\"M15 15L12.75 12.75\" stroke-linecap=\"round\" />\n </svg>\n </div>\n <!-- SKS28FEB25 mobile number input -->\n <div *ngIf=\"type === 'tel'\" class=\"phone-input-container\">\n <div class=\"country-selector\" style=\"padding-left: 10px;\"\n (click)=\"toggleCountryDropdown()\">\n <!-- <span class=\"flag\">{{ selectedCountry.flag }}</span> -->\n <span class=\"dial-code\" [style.font-size]=\"inputValueSize || '12px'\">{{ selectedCountry.dial_code }}</span>\n <svg class=\"arrow\" width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M0.684136 0.767477C0.922999 0.5378 1.30282 0.545248 1.5325 0.784111L4.5 3.93431L7.4675 0.784111C7.69718 0.545248 8.077 0.5378 8.31587 0.767477C8.55473 0.997153 8.56218 1.37698 8.3325 1.61584L4.9325 5.21584C4.81938 5.33349 4.66321 5.39998 4.5 5.39998C4.33679 5.39998 4.18062 5.33349 4.0675 5.21584L0.667501 1.61584C0.437825 1.37698 0.445272 0.997153 0.684136 0.767477Z\"\n fill=\"#626262\" />\n </svg>\n </div>\n <div *ngIf=\"showCountryDropdown\" class=\"country-dropdown\">\n <div class=\"search-box\">\n <input type=\"text\" [readOnly]=\"mode !== 'edit'\" placeholder=\"Search country...\" [value]=\"countrySearch\"\n (input)=\"filterCountries($event)\">\n </div>\n <div class=\"country-list\">\n <div *ngFor=\"let country of filteredCountries\" class=\"country-item\" (click)=\"selectCountry(country)\">\n <span class=\"flag\">{{ country.flag }}</span>\n <span class=\"name\">{{ country.name }}</span>\n <span class=\"dial-code\">{{ country.dial_code }}</span>\n </div>\n </div>\n </div>\n </div>\n <!-- SKS12SEP25 currency code -->\n <div *ngIf=\"type === 'currency'\" class=\"phone-input-container\">\n {{currencySymbol}}\n </div>\n @if(type !== 'datetime' && type !== 'date' && type !== 'time' && type !== 'month'){\n <input *ngFor=\"let input of cachedInputList; let i = index\" #inputEl #inputRef [id]=\"inputId\"\n [type]=\"isPasswordVisible ? 'text' : type === 'otp' || type === 'dropdown' ? 'text' : type\"\n [attr.placeholder]=\"type === 'otp' || mode !== 'edit' ? '' : placeholder || (type === 'tel' ? removeDialCode(selectedCountry.placeholder) : label)\"\n [formControl]=\"type === 'otp' ? $any(input) : control\"\n [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '#FAFAFA' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n [style.border]=\" type === 'otp' || mode !== 'edit' ? '' : from === 'nxtTable' ? type === 'checkbox' ? '1px solid gray !important' : 'none' : inputBorder\"\n [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '100% !important' : type === 'checkbox' ? 'auto' : inputWidth || '100% !important'\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [value]=\"type === 'tel' ? rawInputVal : value\"\n (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\n [checked]=\"type === 'checkbox' ? value : ''\"\n [style.font-size]=\"type === 'otp' ? '' : inputValueSize || '12px'\" (focus)=\"type === 'otp' ? handleFocus($event) : null\"\n (blur)=\"type === 'otp' ? onTouched() : blurEmit()\"\n (keypress)=\"type === 'otp' ? handleKeyPress($event, i) : null\"\n (keydown)=\"type === 'otp' ? handleKeyDown($event, i) : from === 'normalDropDown' ? $event.preventDefault() : null\"\n (paste)=\"type === 'otp' ? handlePaste($event, i) : null\" inputmode=\"type === 'otp' ? numeric : null\"\n [attr.autocomplete]=\"type === 'otp' && i === 0 ? 'one-time-code' : type === 'list' ? 'list' : 'off'\"\n [attr.aria-expanded]=\"type === 'list' ? showSuggestion : 'off'\"\n [attr.inputmode]=\"type === 'otp' ? 'numeric' : null\" [attr.name]=\"type === 'otp' && i === 0 ? 'otp' : null\"\n (focusin)=\"focusinEmit($event)\" [attr.aria-owns]=\"type === 'list' ? ariaOwns : 'off'\"\n [attr.aria-haspopup]=\"type === 'list' ? ariaHasPopup : 'off'\" \n [readonly]=\"from === 'normalDropDown'\" \n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" (keydown.enter)=\"type === 'location' ? $event.preventDefault() : ''\"\n autocorrect=\"type === 'location' ? 'off' : ''\" autocapitalize=\"type === 'location' ? 'off' : ''\"\n spellcheck=\"type === 'location' ? 'off' : ''\"\n />\n }\n @else if(type === 'time' || type === 'month' || type === 'datetime' || type === 'date'){\n <div style=\"position: relative; width: 100%;\">\n <input [id]=\"inputId\"\n type=\"text\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || ''\"\n [ngClass]=\"'nxt-custom-input'\" \n [value]=\"value | NxtDate : type : languageCode : dateFormatName\"\n [style.backgroundColor]=\"mode !== 'edit' ? '#FAFAFA' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize || '12px'\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (focus)=\"onHijriInputClick(); $event.stopPropagation()\"\n (click)=\"onHijriInputClick();\"\n [attr.autocomplete]=\"'off'\"\n [attr.readonly]=\"'true'\"\n [readonly]=\"'true'\" \n [disabled]=\"mode === 'edit' ? (question?.isReadOnly === true || question?.isReadOnly === 'true') : true\"\n [class]=\"'nxt-' + (question.nxtTableId || question.id)\"\n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" style=\"\n width: 100% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n <!-- SKS14AUG25 Hijri Datepicker Popup -->\n <div *ngIf=\"showHijriPicker\" class=\"hijri-popup\" [ngClass]=\"{'rtl-class': direction === 'rtl'}\" [class]=\"'nxt-' + (question.nxtTableId || question.id)\">\n <app-nxt-datepicker\n [type]=\"type\"\n [value]=\"value\"\n [languageCode]=\"languageCode\"\n (dateChange)=\"onInputChange($event);\"\n >\n </app-nxt-datepicker>\n </div>\n </div>\n }\n <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date' || type === 'month' || type === 'time')\" (click)=\"openDatePicker(type); $event.stopPropagation()\" class=\"input-icons\"\n style=\"cursor: pointer;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n <path d=\"M2.32031 7.05285H15.6883\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.3322 9.98254H12.3392\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M9.00408 9.98254H9.01103\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.66815 9.98254H5.67509\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.3322 12.8976H12.3392\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M9.00408 12.8976H9.01103\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.66815 12.8976H5.67509\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.0329 1.5V3.96809\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.97435 1.5V3.96809\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.1787 2.68457H5.82822C3.6257 2.68457 2.25 3.91152 2.25 6.16684V12.9541C2.25 15.2449 3.6257 16.5002 5.82822 16.5002H12.1718C14.3812 16.5002 15.75 15.2661 15.75 13.0108V6.16684C15.7569 3.91152 14.3882 2.68457 12.1787 2.68457Z\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <!-- SKS7AUG25 api call Dotted Loader -->\n <div *ngIf=\"mode === 'edit' && isLoading\" class=\"dotted-loader\" aria-label=\"Loading\" role=\"status\">\n <span *ngFor=\"let dot of [].constructor(6); let i = index\" class=\"dot\" [style.--i]=\"i\"></span>\n </div>\n <div *ngIf=\"mode === 'edit' && type === 'list'\" class=\"input-icons\">\n <svg *ngIf=\"!isLoading\" (click)=\"removeValue()\" (keydown.enter)=\"removeValue()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer;\">\n <path d=\"M4.58496 7.41495L7.41495 4.58496\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7.41495 7.41495L4.58496 4.58496\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4.5 11H7.5C10 11 11 10 11 7.5V4.5C11 2 10 1 7.5 1H4.5C2 1 1 2 1 4.5V7.5C1 10 2 11 4.5 11Z\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n </div>\n <label class=\"checkboxLab\" *ngIf=\"label && type === 'checkbox' && showLabel\" [style.font-weight]=\"labelWeight\"\n [style.font-size]=\"labelSize\" [style.color]=\"labelColor || '#9a9a9a'\"\n style=\"margin-bottom: 0; padding-left: 10px; padding-right: 10px; width: 100% !important;\"> {{ label }}\n <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n </label> \n <!-- Always Show Dropdown Icon -->\n <div *ngIf=\"mode === 'edit' && type === 'dropdown'\" class=\"input-icons\">\n <svg (mousedown)=\"toggle($event); $event.preventDefault()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M4.5 11H7.5C10 11 11 10 11 7.5V4.5C11 2 10 1 7.5 1H4.5C2 1 1 2 1 4.5V7.5C1 10 2 11 4.5 11Z\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.23499 5.32L6 7.08L7.765 5.32\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <img *ngIf=\"mode === 'edit' && inputIconRightSrc\" [src]=\"inputIconRightSrc\" class=\"icon right-icon\"\n [style.height]=\"svgHeight\" [style.width]=\"svgWidth\">\n <img *ngIf=\"mode === 'edit' && type === 'password'\" class=\"toggle-icon\" (click)=\"togglePasswordVisibility()\"\n [src]=\"!isPasswordVisible ? '/assets/images/icons/general/Hide-Password.svg' : '/assets/images/icons/general/Show-Password.svg'\" />\n <div *ngIf=\"mode !== 'edit' && !question?.isReadOnly && from !== 'nxtTable'\" class=\"input-icons\">\n <svg class=\"edit-icon\" \n (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n <div *ngIf=\"viewEdit\" class=\"input-icons\">\n <svg (click)=\"saveChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n <div *ngIf=\"viewEdit\" class=\"input-icons\">\n <svg (click)=\"discardChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"type !== 'label' && type !== 'checkbox' && (type === 'richtext' || type === 'textarea')\" style=\"display: flex;\">\n <div class=\"input-container\"\n [style.margin-top]=\"showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' : '21px !important'\"\n [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : mode === 'edit' && type === 'richtext' ? '0px' : ''\"\n [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : mode === 'edit' && type === 'richtext' ? '0px' : ''\"\n [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : '#FAFAFA'\"\n [class.invalid]=\"control.invalid && control.touched\"\n [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : (inputBorderSize || 1 + 'px solid ' + inputBorder) : 'none'\">\n <!-- SKS14JUN25 Dynamically load Quill editor toolbar -->\n <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" (ngModelChange)=\"onInputChange($event)\" [placeholder]=\"placeholder || ''\"\n [readOnly]=\"mode !== 'edit' || question?.isReadOnly\"\n (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n [modules]=\"getQuillModules(question.id)\"\n [style.padding]=\"'0px'\"\n style=\"width: 100%;\n border-radius: 5px;\n border: none;\n font-size: 16px;\">\n </quill-editor>\n <!-- View mode -->\n <div *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content ql-snow\"\n style=\"width: 98.5%;\n border-radius: 5px;\n border: none;\n padding: unset;\n font-size: 16px;\">\n <div class=\"ql-editor\" [innerHTML]=\"value\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.text-align]=\"direction === 'rtl' ? 'right' : '' \"\n [attr.dir]='direction' style=\"font-size: 12px;\"\n ></div>\n </div>\n <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"from === 'nxtTable' ? 1 : rows\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || ''\" [ngClass]=\"'custom-input'\"\n [formControl]=\"control\"\n [style.backgroundColor]=\"mode !== 'edit' ? '#FAFAFA' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder\"\n [style.height]=\"inputHeight\" [value]=\"value\" (input)=\" onInputChange($event)\"\n [style.font-size]=\"inputValueSize || '12px'\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n [readOnly]=\"mode !== 'edit' || question?.isReadOnly\" [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" \n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n style=\"\n width: 100%;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\"\n >\n </textarea>\n <svg *ngIf=\"mode !== 'edit' && !viewEdit && from !== 'nxtTable' && (type === 'richtext' || type === 'textarea') && !question?.isReadOnly\"\n class=\"edit-icon\" (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <!-- SKS23APR25 Use control.invalid to show error on submit click -->\n <div *ngIf=\"type != 'checkbox' && type !== 'label' && control.invalid && (control.touched || control.dirty)\" style=\"height: 20px;\">\n <div class=\"error-message\">\n {{ getErrorMessage() }}\n </div>\n </div>\n </div>\n</div>", styles: ["label{font-size:14px;margin-bottom:10px;color:color-mix(in srgb,black,rgb(0,0,0) 80%)}.toggle-icon{width:20px;height:20px;cursor:pointer;fill:#666}.error-message{color:red;font-size:12px}input[type=text].custom-input,input[type=password].custom-input,input[type=number].custom-input,input[type=email].custom-input,input[type=tel].custom-input,input[type=list].custom-input,input[type=dropdown].custom-input,input[type=location].custom-input{width:100%;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}input.nxt-custom-input{width:100%!important;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.custom-input:-webkit-autofill:active,.nxt-custom-input:-webkit-autofill,.nxt-custom-input:-webkit-autofill:hover,.nxt-custom-input:-webkit-autofill:focus,.nxt-custom-input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important;-webkit-text-fill-color:inherit!important}.phone-input-container{display:flex;align-items:center;position:relative}.country-selector{display:flex;align-items:center;cursor:pointer;padding-right:12px;border-right:#ccc;margin-right:12px}.flag{margin-right:8px;font-size:20px}.dial-code{margin-right:8px;font-weight:500}.country-dropdown{position:absolute;top:100%;left:0;width:300px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:4px}.search-box{padding:8px;border-bottom:1px solid #ccc}.search-box input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.country-list{max-height:200px;overflow-y:auto}.country-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer}.country-item:hover{background-color:color-mix(in srgb,#fff,rgba(0,0,0,0) 30%)}.country-item .name{flex:1;margin:0 12px}.fcOtp{width:40px;height:40px;text-align:center;font-size:18px;border:1px solid #ccc;border-radius:5px;margin:5px;outline:none;transition:border-color .2s ease-in-out}textarea:focus-visible,textarea:focus,input:focus{outline:none;border-color:transparent;box-shadow:none}.input-container{display:flex;align-items:center;width:100%;border-radius:5px;border:1px solid #ccc;padding-left:5px;padding-right:5px}.icon-container{right:15px;padding-right:5px;pointer-events:auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center}.input-container.invalid{border:1px solid #DC3545!important;border-radius:5px}.checkbox-padding{margin-top:20px!important;padding:13px!important;width:100%!important;border:none!important}.view-mode{font-size:14px;color:#333}@media print{.view-mode{font-size:12pt;color:#000}}input::placeholder{font-family:var(--placeholder-font);color:var(--placeholder-color);font-size:var(--placeholder-size);font-weight:var(--placeholder-weight)}.dotted-loader{position:relative;width:10px;height:10px}.dotted-loader .dot{--i: 0;position:absolute;top:50%;left:50%;width:3px;height:3px;margin:-2px 0 0 -2px;border-radius:50%;background-color:#696969;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg));animation:spinDot 1s linear infinite;animation-delay:calc(var(--i) * .1s)}@keyframes spinDot{0%{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}50%{opacity:1;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(1.3)}to{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}}input:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important;border:none!important}textarea:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}.quill-view-content{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}: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%}.quill-view-content{background-color:#f0f0f0;border-radius:5px;border:none;padding:10px;overflow-wrap:break-word}.quill-view-content .ql-editor{white-space:normal;overflow:visible;min-height:auto}[dir=rtl] .quill-view-content *,.rtl .quill-view-content *{text-align:right!important;direction:rtl!important}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled,textarea:disabled,.quill-view-content{color:#292929!important}input:disabled.from-nxt-table,textarea:disabled.from-nxt-table,.quill-view-content.from-nxt-table{color:#2c3137!important}.owl-dt-container-disabled,.owl-dt-trigger-disabled{opacity:unset!important}.input-wrapper{position:relative}.input-container{pointer-events:auto!important;position:relative}.custom-input,.nxt-custom-input{pointer-events:auto!important}.hijri-popup{position:absolute;top:100%;left:0;z-index:9999;background:#fff;box-shadow:0 2px 10px #0003;border-radius:6px}.hijri-popup.rtl-class{left:auto!important;right:0!important}.input-icons{padding-right:5px;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: NxtDatePipe, name: "NxtDate" }, { kind: "component", type: NxtDatepickerComponent, selector: "app-nxt-datepicker", inputs: ["type", "languageCode", "value"], outputs: ["dateChange"] }] });
|
|
47454
47454
|
}
|
|
47455
47455
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NxtInput, decorators: [{
|
|
47456
47456
|
type: Component,
|
|
@@ -47465,7 +47465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
47465
47465
|
useExisting: forwardRef(() => NxtInput),
|
|
47466
47466
|
multi: true,
|
|
47467
47467
|
},
|
|
47468
|
-
], template: "<!-- SKS31JAN25 -->\n<div class=\"hover-wrapper input-wrapper\" (document:click)=\"closeDropdown($event)\">\n <div>\n <div *ngIf=\"label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n 'padding-top': type === 'label' ? '10px' : '',\n 'padding-bottom': type === 'label' ? '10px' : ''\n }\" [style.font-weight]=\"labelWeight || type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n style=\"display: flex; gap: 5px;\"> \n {{ label }}\n <div *ngIf=\"helpText\" [matTooltip]=\"helpText\" matTooltipClass=\"white-tooltip\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg>\n </div>\n <div *ngIf=\"label && type != 'checkbox' && required && showLabel && mode === 'edit'\" style=\"color: red;\">*</div>\n </div>\n <div *ngIf=\"type !== 'label' && type !== 'richtext' && type !== 'textarea'\" style=\"display: flex;\">\n <div class=\"input-container\" [ngClass]=\"{'checkbox-padding': type === 'checkbox' || type === 'otp'}\"\n [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n [class.invalid]=\"control.invalid && control.touched\"\n [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.margin-top]=\"showLabel && label ? from === 'nxtTable' ? '0px !important' : '' : from === 'nxtTable' || from === 'normalDropDown' ? '0px !important' : '21px !important'\"\n [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\"\n style=\"position: relative; width: 100%;\">\n <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n <div *ngIf=\"mode === 'edit' && type === 'list'\">\n <!-- Inline search icon SVG -->\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"1.5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n <circle cx=\"8.25\" cy=\"8.25\" r=\"5.25\" />\n <path d=\"M15 15L12.75 12.75\" stroke-linecap=\"round\" />\n </svg>\n </div>\n <!-- SKS28FEB25 mobile number input -->\n <div *ngIf=\"type === 'tel'\" class=\"phone-input-container\">\n <div class=\"country-selector\" style=\"padding-left: 10px;\"\n (click)=\"toggleCountryDropdown()\">\n <!-- <span class=\"flag\">{{ selectedCountry.flag }}</span> -->\n <span class=\"dial-code\" [style.font-size]=\"inputValueSize\">{{ selectedCountry.dial_code }}</span>\n <svg class=\"arrow\" width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M0.684136 0.767477C0.922999 0.5378 1.30282 0.545248 1.5325 0.784111L4.5 3.93431L7.4675 0.784111C7.69718 0.545248 8.077 0.5378 8.31587 0.767477C8.55473 0.997153 8.56218 1.37698 8.3325 1.61584L4.9325 5.21584C4.81938 5.33349 4.66321 5.39998 4.5 5.39998C4.33679 5.39998 4.18062 5.33349 4.0675 5.21584L0.667501 1.61584C0.437825 1.37698 0.445272 0.997153 0.684136 0.767477Z\"\n fill=\"#626262\" />\n </svg>\n </div>\n <div *ngIf=\"showCountryDropdown\" class=\"country-dropdown\">\n <div class=\"search-box\">\n <input type=\"text\" [readOnly]=\"mode !== 'edit'\" placeholder=\"Search country...\" [value]=\"countrySearch\"\n (input)=\"filterCountries($event)\">\n </div>\n <div class=\"country-list\">\n <div *ngFor=\"let country of filteredCountries\" class=\"country-item\" (click)=\"selectCountry(country)\">\n <span class=\"flag\">{{ country.flag }}</span>\n <span class=\"name\">{{ country.name }}</span>\n <span class=\"dial-code\">{{ country.dial_code }}</span>\n </div>\n </div>\n </div>\n </div>\n <!-- SKS12SEP25 currency code -->\n <div *ngIf=\"type === 'currency'\" class=\"phone-input-container\">\n {{currencySymbol}}\n </div>\n @if(type !== 'datetime' && type !== 'date' && type !== 'time' && type !== 'month'){\n <input *ngFor=\"let input of cachedInputList; let i = index\" #inputEl #inputRef [id]=\"inputId\"\n [type]=\"isPasswordVisible ? 'text' : type === 'otp' || type === 'dropdown' ? 'text' : type\"\n [attr.placeholder]=\"type === 'otp' || mode !== 'edit' ? '' : placeholder || (type === 'tel' ? removeDialCode(selectedCountry.placeholder) : label)\"\n [formControl]=\"type === 'otp' ? $any(input) : control\"\n [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n [style.border]=\" type === 'otp' || mode !== 'edit' ? '' : from === 'nxtTable' ? type === 'checkbox' ? '1px solid gray !important' : 'none' : inputBorder\"\n [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '100% !important' : type === 'checkbox' ? 'auto' : inputWidth || '100% !important'\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [value]=\"type === 'tel' ? rawInputVal : value\"\n (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\n [checked]=\"type === 'checkbox' ? value : ''\"\n [style.font-size]=\"type === 'otp' ? '' : inputValueSize\" (focus)=\"type === 'otp' ? handleFocus($event) : null\"\n (blur)=\"type === 'otp' ? onTouched() : blurEmit()\"\n (keypress)=\"type === 'otp' ? handleKeyPress($event, i) : null\"\n (keydown)=\"type === 'otp' ? handleKeyDown($event, i) : from === 'normalDropDown' ? $event.preventDefault() : null\"\n (paste)=\"type === 'otp' ? handlePaste($event, i) : null\" inputmode=\"type === 'otp' ? numeric : null\"\n [attr.autocomplete]=\"type === 'otp' && i === 0 ? 'one-time-code' : type === 'list' ? 'list' : 'off'\"\n [attr.aria-expanded]=\"type === 'list' ? showSuggestion : 'off'\"\n [attr.inputmode]=\"type === 'otp' ? 'numeric' : null\" [attr.name]=\"type === 'otp' && i === 0 ? 'otp' : null\"\n (focusin)=\"focusinEmit($event)\" [attr.aria-owns]=\"type === 'list' ? ariaOwns : 'off'\"\n [attr.aria-haspopup]=\"type === 'list' ? ariaHasPopup : 'off'\" \n [readonly]=\"from === 'normalDropDown'\" \n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" (keydown.enter)=\"type === 'location' ? $event.preventDefault() : ''\"\n autocorrect=\"type === 'location' ? 'off' : ''\" autocapitalize=\"type === 'location' ? 'off' : ''\"\n spellcheck=\"type === 'location' ? 'off' : ''\"\n />\n }\n @else if(type === 'time' || type === 'month' || type === 'datetime' || type === 'date'){\n <div style=\"position: relative; width: 100%;\">\n <input [id]=\"inputId\"\n type=\"text\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || ''\"\n [ngClass]=\"'nxt-custom-input'\" \n [value]=\"value | NxtDate : type : languageCode : dateFormatName\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (focus)=\"onHijriInputClick(); $event.stopPropagation()\"\n (click)=\"onHijriInputClick();\"\n [attr.autocomplete]=\"'off'\"\n [attr.readonly]=\"'true'\"\n [class]=\"'nxt-' + (question.nxtTableId || question.id)\"\n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" style=\"\n width: 100% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n <!-- SKS14AUG25 Hijri Datepicker Popup -->\n <div *ngIf=\"showHijriPicker\" class=\"hijri-popup\" [ngClass]=\"{'rtl-class': direction === 'rtl'}\" [class]=\"'nxt-' + (question.nxtTableId || question.id)\">\n <app-nxt-datepicker\n [type]=\"type\"\n [value]=\"value\"\n [languageCode]=\"languageCode\"\n (dateChange)=\"onInputChange($event);\"\n >\n </app-nxt-datepicker>\n </div>\n </div>\n }\n <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date' || type === 'month' || type === 'time')\" (click)=\"openDatePicker(type); $event.stopPropagation()\" class=\"input-icons\"\n style=\"cursor: pointer;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n <path d=\"M2.32031 7.05285H15.6883\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.3322 9.98254H12.3392\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M9.00408 9.98254H9.01103\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.66815 9.98254H5.67509\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.3322 12.8976H12.3392\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M9.00408 12.8976H9.01103\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.66815 12.8976H5.67509\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.0329 1.5V3.96809\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.97435 1.5V3.96809\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.1787 2.68457H5.82822C3.6257 2.68457 2.25 3.91152 2.25 6.16684V12.9541C2.25 15.2449 3.6257 16.5002 5.82822 16.5002H12.1718C14.3812 16.5002 15.75 15.2661 15.75 13.0108V6.16684C15.7569 3.91152 14.3882 2.68457 12.1787 2.68457Z\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <!-- SKS7AUG25 api call Dotted Loader -->\n <div *ngIf=\"mode === 'edit' && isLoading\" class=\"dotted-loader\" aria-label=\"Loading\" role=\"status\">\n <span *ngFor=\"let dot of [].constructor(6); let i = index\" class=\"dot\" [style.--i]=\"i\"></span>\n </div>\n <div *ngIf=\"mode === 'edit' && type === 'list'\" class=\"input-icons\">\n <svg *ngIf=\"!isLoading\" (click)=\"removeValue()\" (keydown.enter)=\"removeValue()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer;\">\n <path d=\"M4.58496 7.41495L7.41495 4.58496\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7.41495 7.41495L4.58496 4.58496\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4.5 11H7.5C10 11 11 10 11 7.5V4.5C11 2 10 1 7.5 1H4.5C2 1 1 2 1 4.5V7.5C1 10 2 11 4.5 11Z\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n </div>\n <label class=\"checkboxLab\" *ngIf=\"label && type === 'checkbox' && showLabel\" [style.font-weight]=\"labelWeight\"\n [style.font-size]=\"labelSize\" [style.color]=\"labelColor || '#9a9a9a'\"\n style=\"margin-bottom: 0; padding-left: 10px; padding-right: 10px; width: 100% !important;\"> {{ label }}\n <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n </label> \n <!-- Always Show Dropdown Icon -->\n <div *ngIf=\"mode === 'edit' && type === 'dropdown'\" class=\"input-icons\">\n <svg (mousedown)=\"toggle($event); $event.preventDefault()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M4.5 11H7.5C10 11 11 10 11 7.5V4.5C11 2 10 1 7.5 1H4.5C2 1 1 2 1 4.5V7.5C1 10 2 11 4.5 11Z\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.23499 5.32L6 7.08L7.765 5.32\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <img *ngIf=\"mode === 'edit' && inputIconRightSrc\" [src]=\"inputIconRightSrc\" class=\"icon right-icon\"\n [style.height]=\"svgHeight\" [style.width]=\"svgWidth\">\n <img *ngIf=\"mode === 'edit' && type === 'password'\" class=\"toggle-icon\" (click)=\"togglePasswordVisibility()\"\n [src]=\"!isPasswordVisible ? '/assets/images/icons/general/Hide-Password.svg' : '/assets/images/icons/general/Show-Password.svg'\" />\n <div *ngIf=\"mode !== 'edit' && !question?.isReadOnly && from !== 'nxtTable'\" class=\"input-icons\">\n <svg class=\"edit-icon\" \n (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n <div *ngIf=\"viewEdit\" class=\"input-icons\">\n <svg (click)=\"saveChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n <div *ngIf=\"viewEdit\" class=\"input-icons\">\n <svg (click)=\"discardChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"type !== 'label' && type !== 'checkbox' && (type === 'richtext' || type === 'textarea')\" style=\"display: flex;\">\n <div class=\"input-container\"\n [style.margin-top]=\"showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' : '21px !important'\"\n [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n [class.invalid]=\"control.invalid && control.touched\"\n [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n <!-- SKS14JUN25 Dynamically load Quill editor toolbar -->\n <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" (ngModelChange)=\"onInputChange($event)\" [placeholder]=\"placeholder || ''\"\n [readOnly]=\"mode !== 'edit' || question?.isReadOnly\"\n (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n [modules]=\"getQuillModules(question.id)\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n style=\"width: 100%;\n border-radius: 5px;\n border: none;\n font-size: 16px;\">\n </quill-editor>\n <!-- View mode -->\n <div *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content ql-snow\"\n style=\"width: 98.5%;\n border-radius: 5px;\n border: none;\n padding: unset;\n font-size: 16px;\">\n <div class=\"ql-editor\" [innerHTML]=\"value\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.text-align]=\"direction === 'rtl' ? 'right' : '' \"\n [attr.dir]='direction'\n ></div>\n </div>\n <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"from === 'nxtTable' ? 1 : rows\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || ''\" [ngClass]=\"'custom-input'\"\n [formControl]=\"control\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder\"\n [style.height]=\"inputHeight\" [value]=\"value\" (input)=\" onInputChange($event)\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n [readOnly]=\"mode !== 'edit' || question?.isReadOnly\" [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" \n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n style=\"\n width: 100%;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\"\n >\n </textarea>\n <svg *ngIf=\"mode !== 'edit' && !viewEdit && from !== 'nxtTable' && (type === 'richtext' || type === 'textarea') && !question?.isReadOnly\"\n class=\"edit-icon\" (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <!-- SKS23APR25 Use control.invalid to show error on submit click -->\n <div *ngIf=\"type != 'checkbox' && type !== 'label' && control.invalid && (control.touched || control.dirty)\" style=\"height: 20px;\">\n <div class=\"error-message\">\n {{ getErrorMessage() }}\n </div>\n </div>\n </div>\n</div>", styles: ["label{font-size:14px;margin-bottom:10px;color:color-mix(in srgb,black,rgb(0,0,0) 80%)}.toggle-icon{width:20px;height:20px;cursor:pointer;fill:#666}.error-message{color:red;font-size:12px}input[type=text].custom-input,input[type=password].custom-input,input[type=number].custom-input,input[type=email].custom-input,input[type=tel].custom-input,input[type=list].custom-input,input[type=dropdown].custom-input,input[type=location].custom-input{width:100%;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}input.nxt-custom-input{width:100%!important;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.custom-input:-webkit-autofill:active,.nxt-custom-input:-webkit-autofill,.nxt-custom-input:-webkit-autofill:hover,.nxt-custom-input:-webkit-autofill:focus,.nxt-custom-input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important;-webkit-text-fill-color:inherit!important}.phone-input-container{display:flex;align-items:center;position:relative}.country-selector{display:flex;align-items:center;cursor:pointer;padding-right:12px;border-right:#ccc;margin-right:12px}.flag{margin-right:8px;font-size:20px}.dial-code{margin-right:8px;font-weight:500}.country-dropdown{position:absolute;top:100%;left:0;width:300px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:4px}.search-box{padding:8px;border-bottom:1px solid #ccc}.search-box input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.country-list{max-height:200px;overflow-y:auto}.country-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer}.country-item:hover{background-color:color-mix(in srgb,#fff,rgba(0,0,0,0) 30%)}.country-item .name{flex:1;margin:0 12px}.fcOtp{width:40px;height:40px;text-align:center;font-size:18px;border:1px solid #ccc;border-radius:5px;margin:5px;outline:none;transition:border-color .2s ease-in-out}textarea:focus-visible,textarea:focus,input:focus{outline:none;border-color:transparent;box-shadow:none}.input-container{display:flex;align-items:center;width:100%;border-radius:5px;border:1px solid #ccc;padding-left:5px;padding-right:5px}.icon-container{right:15px;padding-right:5px;pointer-events:auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center}.input-container.invalid{border:1px solid #DC3545!important;border-radius:5px}.checkbox-padding{margin-top:20px!important;padding:13px!important;width:100%!important;border:none!important}.view-mode{font-size:14px;color:#333}@media print{.view-mode{font-size:12pt;color:#000}}input::placeholder{font-family:var(--placeholder-font);color:var(--placeholder-color);font-size:var(--placeholder-size);font-weight:var(--placeholder-weight)}.dotted-loader{position:relative;width:10px;height:10px}.dotted-loader .dot{--i: 0;position:absolute;top:50%;left:50%;width:3px;height:3px;margin:-2px 0 0 -2px;border-radius:50%;background-color:#696969;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg));animation:spinDot 1s linear infinite;animation-delay:calc(var(--i) * .1s)}@keyframes spinDot{0%{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}50%{opacity:1;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(1.3)}to{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}}input:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important;border:none!important}textarea:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}.quill-view-content{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}: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%}.quill-view-content{background-color:#f0f0f0;border-radius:5px;border:none;padding:10px;overflow-wrap:break-word}.quill-view-content .ql-editor{white-space:normal;overflow:visible;min-height:auto}[dir=rtl] .quill-view-content *,.rtl .quill-view-content *{text-align:right!important;direction:rtl!important}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled,textarea:disabled,.quill-view-content{color:#999!important}input:disabled.from-nxt-table,textarea:disabled.from-nxt-table,.quill-view-content.from-nxt-table{color:#2c3137!important}.owl-dt-container-disabled,.owl-dt-trigger-disabled{opacity:unset!important}.input-wrapper{position:relative}.input-container{pointer-events:auto!important;position:relative}.custom-input,.nxt-custom-input{pointer-events:auto!important}.hijri-popup{position:absolute;top:100%;left:0;z-index:9999;background:#fff;box-shadow:0 2px 10px #0003;border-radius:6px}.hijri-popup.rtl-class{left:auto!important;right:0!important}.input-icons{padding-right:5px;display:flex;align-items:center}\n"] }]
|
|
47468
|
+
], template: "<!-- SKS31JAN25 -->\n<div class=\"hover-wrapper input-wrapper\" (document:click)=\"closeDropdown($event)\">\n <div>\n <div *ngIf=\"label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n 'padding-top': type === 'label' ? '10px' : '',\n 'padding-bottom': type === 'label' ? '10px' : ''\n }\" [style.font-weight]=\"labelWeight || type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n style=\"display: flex; gap: 5px;\"> \n {{ label }}\n <div *ngIf=\"helpText\" [matTooltip]=\"helpText\" matTooltipClass=\"white-tooltip\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg>\n </div>\n <div *ngIf=\"label && type != 'checkbox' && required && showLabel && mode === 'edit'\" style=\"color: red;\">*</div>\n </div>\n <div *ngIf=\"type !== 'label' && type !== 'richtext' && type !== 'textarea'\" style=\"display: flex;\">\n <div class=\"input-container\" [ngClass]=\"{'checkbox-padding': type === 'checkbox' || type === 'otp'}\"\n [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : '#FAFAFA'\"\n [class.invalid]=\"control.invalid && control.touched\"\n [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.margin-top]=\"showLabel && label ? from === 'nxtTable' ? '0px !important' : '' : from === 'nxtTable' || from === 'normalDropDown' ? '0px !important' : '21px !important'\"\n [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : ( inputBorderSize || 1 + 'px solid ' + inputBorder) : 'none'\"\n style=\"position: relative; width: 100%;\">\n <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n <div *ngIf=\"mode === 'edit' && type === 'list'\">\n <!-- Inline search icon SVG -->\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"1.5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n <circle cx=\"8.25\" cy=\"8.25\" r=\"5.25\" />\n <path d=\"M15 15L12.75 12.75\" stroke-linecap=\"round\" />\n </svg>\n </div>\n <!-- SKS28FEB25 mobile number input -->\n <div *ngIf=\"type === 'tel'\" class=\"phone-input-container\">\n <div class=\"country-selector\" style=\"padding-left: 10px;\"\n (click)=\"toggleCountryDropdown()\">\n <!-- <span class=\"flag\">{{ selectedCountry.flag }}</span> -->\n <span class=\"dial-code\" [style.font-size]=\"inputValueSize || '12px'\">{{ selectedCountry.dial_code }}</span>\n <svg class=\"arrow\" width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M0.684136 0.767477C0.922999 0.5378 1.30282 0.545248 1.5325 0.784111L4.5 3.93431L7.4675 0.784111C7.69718 0.545248 8.077 0.5378 8.31587 0.767477C8.55473 0.997153 8.56218 1.37698 8.3325 1.61584L4.9325 5.21584C4.81938 5.33349 4.66321 5.39998 4.5 5.39998C4.33679 5.39998 4.18062 5.33349 4.0675 5.21584L0.667501 1.61584C0.437825 1.37698 0.445272 0.997153 0.684136 0.767477Z\"\n fill=\"#626262\" />\n </svg>\n </div>\n <div *ngIf=\"showCountryDropdown\" class=\"country-dropdown\">\n <div class=\"search-box\">\n <input type=\"text\" [readOnly]=\"mode !== 'edit'\" placeholder=\"Search country...\" [value]=\"countrySearch\"\n (input)=\"filterCountries($event)\">\n </div>\n <div class=\"country-list\">\n <div *ngFor=\"let country of filteredCountries\" class=\"country-item\" (click)=\"selectCountry(country)\">\n <span class=\"flag\">{{ country.flag }}</span>\n <span class=\"name\">{{ country.name }}</span>\n <span class=\"dial-code\">{{ country.dial_code }}</span>\n </div>\n </div>\n </div>\n </div>\n <!-- SKS12SEP25 currency code -->\n <div *ngIf=\"type === 'currency'\" class=\"phone-input-container\">\n {{currencySymbol}}\n </div>\n @if(type !== 'datetime' && type !== 'date' && type !== 'time' && type !== 'month'){\n <input *ngFor=\"let input of cachedInputList; let i = index\" #inputEl #inputRef [id]=\"inputId\"\n [type]=\"isPasswordVisible ? 'text' : type === 'otp' || type === 'dropdown' ? 'text' : type\"\n [attr.placeholder]=\"type === 'otp' || mode !== 'edit' ? '' : placeholder || (type === 'tel' ? removeDialCode(selectedCountry.placeholder) : label)\"\n [formControl]=\"type === 'otp' ? $any(input) : control\"\n [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '#FAFAFA' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n [style.border]=\" type === 'otp' || mode !== 'edit' ? '' : from === 'nxtTable' ? type === 'checkbox' ? '1px solid gray !important' : 'none' : inputBorder\"\n [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '100% !important' : type === 'checkbox' ? 'auto' : inputWidth || '100% !important'\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [value]=\"type === 'tel' ? rawInputVal : value\"\n (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\n [checked]=\"type === 'checkbox' ? value : ''\"\n [style.font-size]=\"type === 'otp' ? '' : inputValueSize || '12px'\" (focus)=\"type === 'otp' ? handleFocus($event) : null\"\n (blur)=\"type === 'otp' ? onTouched() : blurEmit()\"\n (keypress)=\"type === 'otp' ? handleKeyPress($event, i) : null\"\n (keydown)=\"type === 'otp' ? handleKeyDown($event, i) : from === 'normalDropDown' ? $event.preventDefault() : null\"\n (paste)=\"type === 'otp' ? handlePaste($event, i) : null\" inputmode=\"type === 'otp' ? numeric : null\"\n [attr.autocomplete]=\"type === 'otp' && i === 0 ? 'one-time-code' : type === 'list' ? 'list' : 'off'\"\n [attr.aria-expanded]=\"type === 'list' ? showSuggestion : 'off'\"\n [attr.inputmode]=\"type === 'otp' ? 'numeric' : null\" [attr.name]=\"type === 'otp' && i === 0 ? 'otp' : null\"\n (focusin)=\"focusinEmit($event)\" [attr.aria-owns]=\"type === 'list' ? ariaOwns : 'off'\"\n [attr.aria-haspopup]=\"type === 'list' ? ariaHasPopup : 'off'\" \n [readonly]=\"from === 'normalDropDown'\" \n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" (keydown.enter)=\"type === 'location' ? $event.preventDefault() : ''\"\n autocorrect=\"type === 'location' ? 'off' : ''\" autocapitalize=\"type === 'location' ? 'off' : ''\"\n spellcheck=\"type === 'location' ? 'off' : ''\"\n />\n }\n @else if(type === 'time' || type === 'month' || type === 'datetime' || type === 'date'){\n <div style=\"position: relative; width: 100%;\">\n <input [id]=\"inputId\"\n type=\"text\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || ''\"\n [ngClass]=\"'nxt-custom-input'\" \n [value]=\"value | NxtDate : type : languageCode : dateFormatName\"\n [style.backgroundColor]=\"mode !== 'edit' ? '#FAFAFA' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize || '12px'\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (focus)=\"onHijriInputClick(); $event.stopPropagation()\"\n (click)=\"onHijriInputClick();\"\n [attr.autocomplete]=\"'off'\"\n [attr.readonly]=\"'true'\"\n [readonly]=\"'true'\" \n [disabled]=\"mode === 'edit' ? (question?.isReadOnly === true || question?.isReadOnly === 'true') : true\"\n [class]=\"'nxt-' + (question.nxtTableId || question.id)\"\n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" style=\"\n width: 100% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n <!-- SKS14AUG25 Hijri Datepicker Popup -->\n <div *ngIf=\"showHijriPicker\" class=\"hijri-popup\" [ngClass]=\"{'rtl-class': direction === 'rtl'}\" [class]=\"'nxt-' + (question.nxtTableId || question.id)\">\n <app-nxt-datepicker\n [type]=\"type\"\n [value]=\"value\"\n [languageCode]=\"languageCode\"\n (dateChange)=\"onInputChange($event);\"\n >\n </app-nxt-datepicker>\n </div>\n </div>\n }\n <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date' || type === 'month' || type === 'time')\" (click)=\"openDatePicker(type); $event.stopPropagation()\" class=\"input-icons\"\n style=\"cursor: pointer;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n <path d=\"M2.32031 7.05285H15.6883\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.3322 9.98254H12.3392\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M9.00408 9.98254H9.01103\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.66815 9.98254H5.67509\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.3322 12.8976H12.3392\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M9.00408 12.8976H9.01103\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.66815 12.8976H5.67509\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.0329 1.5V3.96809\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.97435 1.5V3.96809\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.1787 2.68457H5.82822C3.6257 2.68457 2.25 3.91152 2.25 6.16684V12.9541C2.25 15.2449 3.6257 16.5002 5.82822 16.5002H12.1718C14.3812 16.5002 15.75 15.2661 15.75 13.0108V6.16684C15.7569 3.91152 14.3882 2.68457 12.1787 2.68457Z\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <!-- SKS7AUG25 api call Dotted Loader -->\n <div *ngIf=\"mode === 'edit' && isLoading\" class=\"dotted-loader\" aria-label=\"Loading\" role=\"status\">\n <span *ngFor=\"let dot of [].constructor(6); let i = index\" class=\"dot\" [style.--i]=\"i\"></span>\n </div>\n <div *ngIf=\"mode === 'edit' && type === 'list'\" class=\"input-icons\">\n <svg *ngIf=\"!isLoading\" (click)=\"removeValue()\" (keydown.enter)=\"removeValue()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer;\">\n <path d=\"M4.58496 7.41495L7.41495 4.58496\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7.41495 7.41495L4.58496 4.58496\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4.5 11H7.5C10 11 11 10 11 7.5V4.5C11 2 10 1 7.5 1H4.5C2 1 1 2 1 4.5V7.5C1 10 2 11 4.5 11Z\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n </div>\n <label class=\"checkboxLab\" *ngIf=\"label && type === 'checkbox' && showLabel\" [style.font-weight]=\"labelWeight\"\n [style.font-size]=\"labelSize\" [style.color]=\"labelColor || '#9a9a9a'\"\n style=\"margin-bottom: 0; padding-left: 10px; padding-right: 10px; width: 100% !important;\"> {{ label }}\n <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n </label> \n <!-- Always Show Dropdown Icon -->\n <div *ngIf=\"mode === 'edit' && type === 'dropdown'\" class=\"input-icons\">\n <svg (mousedown)=\"toggle($event); $event.preventDefault()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M4.5 11H7.5C10 11 11 10 11 7.5V4.5C11 2 10 1 7.5 1H4.5C2 1 1 2 1 4.5V7.5C1 10 2 11 4.5 11Z\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.23499 5.32L6 7.08L7.765 5.32\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <img *ngIf=\"mode === 'edit' && inputIconRightSrc\" [src]=\"inputIconRightSrc\" class=\"icon right-icon\"\n [style.height]=\"svgHeight\" [style.width]=\"svgWidth\">\n <img *ngIf=\"mode === 'edit' && type === 'password'\" class=\"toggle-icon\" (click)=\"togglePasswordVisibility()\"\n [src]=\"!isPasswordVisible ? '/assets/images/icons/general/Hide-Password.svg' : '/assets/images/icons/general/Show-Password.svg'\" />\n <div *ngIf=\"mode !== 'edit' && !question?.isReadOnly && from !== 'nxtTable'\" class=\"input-icons\">\n <svg class=\"edit-icon\" \n (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n <div *ngIf=\"viewEdit\" class=\"input-icons\">\n <svg (click)=\"saveChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n <div *ngIf=\"viewEdit\" class=\"input-icons\">\n <svg (click)=\"discardChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"type !== 'label' && type !== 'checkbox' && (type === 'richtext' || type === 'textarea')\" style=\"display: flex;\">\n <div class=\"input-container\"\n [style.margin-top]=\"showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' : '21px !important'\"\n [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : mode === 'edit' && type === 'richtext' ? '0px' : ''\"\n [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : mode === 'edit' && type === 'richtext' ? '0px' : ''\"\n [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : '#FAFAFA'\"\n [class.invalid]=\"control.invalid && control.touched\"\n [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : (inputBorderSize || 1 + 'px solid ' + inputBorder) : 'none'\">\n <!-- SKS14JUN25 Dynamically load Quill editor toolbar -->\n <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" (ngModelChange)=\"onInputChange($event)\" [placeholder]=\"placeholder || ''\"\n [readOnly]=\"mode !== 'edit' || question?.isReadOnly\"\n (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n [modules]=\"getQuillModules(question.id)\"\n [style.padding]=\"'0px'\"\n style=\"width: 100%;\n border-radius: 5px;\n border: none;\n font-size: 16px;\">\n </quill-editor>\n <!-- View mode -->\n <div *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content ql-snow\"\n style=\"width: 98.5%;\n border-radius: 5px;\n border: none;\n padding: unset;\n font-size: 16px;\">\n <div class=\"ql-editor\" [innerHTML]=\"value\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.text-align]=\"direction === 'rtl' ? 'right' : '' \"\n [attr.dir]='direction' style=\"font-size: 12px;\"\n ></div>\n </div>\n <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"from === 'nxtTable' ? 1 : rows\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || ''\" [ngClass]=\"'custom-input'\"\n [formControl]=\"control\"\n [style.backgroundColor]=\"mode !== 'edit' ? '#FAFAFA' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder\"\n [style.height]=\"inputHeight\" [value]=\"value\" (input)=\" onInputChange($event)\"\n [style.font-size]=\"inputValueSize || '12px'\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n [readOnly]=\"mode !== 'edit' || question?.isReadOnly\" [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" \n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n style=\"\n width: 100%;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\"\n >\n </textarea>\n <svg *ngIf=\"mode !== 'edit' && !viewEdit && from !== 'nxtTable' && (type === 'richtext' || type === 'textarea') && !question?.isReadOnly\"\n class=\"edit-icon\" (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <!-- SKS23APR25 Use control.invalid to show error on submit click -->\n <div *ngIf=\"type != 'checkbox' && type !== 'label' && control.invalid && (control.touched || control.dirty)\" style=\"height: 20px;\">\n <div class=\"error-message\">\n {{ getErrorMessage() }}\n </div>\n </div>\n </div>\n</div>", styles: ["label{font-size:14px;margin-bottom:10px;color:color-mix(in srgb,black,rgb(0,0,0) 80%)}.toggle-icon{width:20px;height:20px;cursor:pointer;fill:#666}.error-message{color:red;font-size:12px}input[type=text].custom-input,input[type=password].custom-input,input[type=number].custom-input,input[type=email].custom-input,input[type=tel].custom-input,input[type=list].custom-input,input[type=dropdown].custom-input,input[type=location].custom-input{width:100%;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}input.nxt-custom-input{width:100%!important;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.custom-input:-webkit-autofill:active,.nxt-custom-input:-webkit-autofill,.nxt-custom-input:-webkit-autofill:hover,.nxt-custom-input:-webkit-autofill:focus,.nxt-custom-input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important;-webkit-text-fill-color:inherit!important}.phone-input-container{display:flex;align-items:center;position:relative}.country-selector{display:flex;align-items:center;cursor:pointer;padding-right:12px;border-right:#ccc;margin-right:12px}.flag{margin-right:8px;font-size:20px}.dial-code{margin-right:8px;font-weight:500}.country-dropdown{position:absolute;top:100%;left:0;width:300px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:4px}.search-box{padding:8px;border-bottom:1px solid #ccc}.search-box input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.country-list{max-height:200px;overflow-y:auto}.country-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer}.country-item:hover{background-color:color-mix(in srgb,#fff,rgba(0,0,0,0) 30%)}.country-item .name{flex:1;margin:0 12px}.fcOtp{width:40px;height:40px;text-align:center;font-size:18px;border:1px solid #ccc;border-radius:5px;margin:5px;outline:none;transition:border-color .2s ease-in-out}textarea:focus-visible,textarea:focus,input:focus{outline:none;border-color:transparent;box-shadow:none}.input-container{display:flex;align-items:center;width:100%;border-radius:5px;border:1px solid #ccc;padding-left:5px;padding-right:5px}.icon-container{right:15px;padding-right:5px;pointer-events:auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center}.input-container.invalid{border:1px solid #DC3545!important;border-radius:5px}.checkbox-padding{margin-top:20px!important;padding:13px!important;width:100%!important;border:none!important}.view-mode{font-size:14px;color:#333}@media print{.view-mode{font-size:12pt;color:#000}}input::placeholder{font-family:var(--placeholder-font);color:var(--placeholder-color);font-size:var(--placeholder-size);font-weight:var(--placeholder-weight)}.dotted-loader{position:relative;width:10px;height:10px}.dotted-loader .dot{--i: 0;position:absolute;top:50%;left:50%;width:3px;height:3px;margin:-2px 0 0 -2px;border-radius:50%;background-color:#696969;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg));animation:spinDot 1s linear infinite;animation-delay:calc(var(--i) * .1s)}@keyframes spinDot{0%{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}50%{opacity:1;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(1.3)}to{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}}input:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important;border:none!important}textarea:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}.quill-view-content{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}: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%}.quill-view-content{background-color:#f0f0f0;border-radius:5px;border:none;padding:10px;overflow-wrap:break-word}.quill-view-content .ql-editor{white-space:normal;overflow:visible;min-height:auto}[dir=rtl] .quill-view-content *,.rtl .quill-view-content *{text-align:right!important;direction:rtl!important}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled,textarea:disabled,.quill-view-content{color:#292929!important}input:disabled.from-nxt-table,textarea:disabled.from-nxt-table,.quill-view-content.from-nxt-table{color:#2c3137!important}.owl-dt-container-disabled,.owl-dt-trigger-disabled{opacity:unset!important}.input-wrapper{position:relative}.input-container{pointer-events:auto!important;position:relative}.custom-input,.nxt-custom-input{pointer-events:auto!important}.hijri-popup{position:absolute;top:100%;left:0;z-index:9999;background:#fff;box-shadow:0 2px 10px #0003;border-radius:6px}.hijri-popup.rtl-class{left:auto!important;right:0!important}.input-icons{padding-right:5px;display:flex;align-items:center}\n"] }]
|
|
47469
47469
|
}], ctorParameters: () => [{ type: CountryService }, { type: StorageService }, { type: TranslationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ElementRef }, { type: ChangeService }, { type: DataService }], propDecorators: { label: [{
|
|
47470
47470
|
type: Input
|
|
47471
47471
|
}], labelFont: [{
|
|
@@ -47878,13 +47878,13 @@ class CustomDropdownComponent {
|
|
|
47878
47878
|
}
|
|
47879
47879
|
}
|
|
47880
47880
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CustomDropdownComponent, deps: [{ token: TranslationService }, { token: ChangeService }, { token: DataService }, { token: StorageService }], target: i0.ɵɵFactoryTarget.Component });
|
|
47881
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CustomDropdownComponent, isStandalone: true, 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", mode: "mode", from: "from" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownWrapper", first: true, predicate: ["dropdownWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #dropdownWrapper class=\"dropdown-close\">\n <nxt-input \n [type]=\"'dropdown'\"\n [mode]=\"mode\"\n [from]=\"from\"\n [value]=\"selectedValue\"\n [selectedOption]=\"selectedOption\"\n (onFocus)=\"getOptions()\"\n [labelFont]=\"question?.font\"\n [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText) : ''\"\n [labelColor]=\"question?.color\"\n [inputTextColor]=\"question?.color\"\n [labelSize]=\"question?.fontSize\"\n [inputValueSize]=\"question?.fontSize\"\n [labelWeight]=\"question?.fontWeight\"\n [inputWeight]=\"question?.fontWeight\"\n [showLabel]=\"question?.style?.showLabel\"\n inputBorder=\"
|
|
47881
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CustomDropdownComponent, isStandalone: true, 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", mode: "mode", from: "from" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownWrapper", first: true, predicate: ["dropdownWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #dropdownWrapper class=\"dropdown-close\">\n <nxt-input \n [type]=\"'dropdown'\"\n [mode]=\"mode\"\n [from]=\"from\"\n [value]=\"selectedValue\"\n [selectedOption]=\"selectedOption\"\n (onFocus)=\"getOptions()\"\n [labelFont]=\"question?.font\"\n [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText) : ''\"\n [labelColor]=\"question?.color\"\n [inputTextColor]=\"question?.color\"\n [labelSize]=\"question?.fontSize\"\n [inputValueSize]=\"question?.fontSize\"\n [labelWeight]=\"question?.fontWeight\"\n [inputWeight]=\"question?.fontWeight\"\n [showLabel]=\"question?.style?.showLabel\"\n inputBorder=\"#ccc\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"placeholder\"\n [required]=\"question?.isOptional\" [inputBgColor]=\" from === 'normalDropDown' && !question?.inputBgColor ? '#eff8ff' : question?.inputBgColor || '#ffffff'\"\n [inputId]=\"question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"question?.iconLeftSrc\"\n (toggleEmit)=\"toggle()\"\n (clearInputEmit)=\"clearSelection()\"\n [question]=\"question\"\n (inputValue)=\"inputValue($event.value,$event.question)\"\n >\n</nxt-input>\n\n <!-- SKS11JUN25 Dropdown list -->\n <ul class=\"nxt-dropdown-menu\" *ngIf=\"showOptions && options?.length > 0\">\n <li *ngFor=\"let item of options\" (mousedown)=\"selectChange(item)\" [style.font-size]=\"question?.fontSize || '12px'\">\n @if(apiMeta && !apiMeta.isDependentField && item[apiMeta.field]){\n {{item[apiMeta.field]}}\n } @else {\n {{ item.id +'.label' | nxtCustomTranslate : item?.label || item?.value}}\n }\n </li>\n </ul>\n</div>\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\n", styles: [".shengel-custom-select-wrapper{position:relative}.nxt-dropdown-menu{position:absolute;z-index:10;background:#fff;border:1px solid #ccc;max-height:200px;overflow-y:auto;width:100%;margin-top:2px;list-style:none;padding:0}.nxt-dropdown-menu li{padding:8px;display:flex;cursor:pointer}.nxt-dropdown-menu li:hover{background-color:#f0f0f0}.invalid .shengel-custom-select{border-color:red}.shengel-custom-select{width:100%;padding-right:50px}.dropdown-close{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
|
|
47882
47882
|
}
|
|
47883
47883
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CustomDropdownComponent, decorators: [{
|
|
47884
47884
|
type: Component,
|
|
47885
47885
|
args: [{ selector: 'app-custom-dropdown', standalone: true, imports: [
|
|
47886
47886
|
CommonModule, FormsModule, NxtInput, NxtCustomTranslatePipe
|
|
47887
|
-
], template: "<div #dropdownWrapper class=\"dropdown-close\">\n <nxt-input \n [type]=\"'dropdown'\"\n [mode]=\"mode\"\n [from]=\"from\"\n [value]=\"selectedValue\"\n [selectedOption]=\"selectedOption\"\n (onFocus)=\"getOptions()\"\n [labelFont]=\"question?.font\"\n [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText) : ''\"\n [labelColor]=\"question?.color\"\n [inputTextColor]=\"question?.color\"\n [labelSize]=\"question?.fontSize\"\n [inputValueSize]=\"question?.fontSize\"\n [labelWeight]=\"question?.fontWeight\"\n [inputWeight]=\"question?.fontWeight\"\n [showLabel]=\"question?.style?.showLabel\"\n inputBorder=\"
|
|
47887
|
+
], template: "<div #dropdownWrapper class=\"dropdown-close\">\n <nxt-input \n [type]=\"'dropdown'\"\n [mode]=\"mode\"\n [from]=\"from\"\n [value]=\"selectedValue\"\n [selectedOption]=\"selectedOption\"\n (onFocus)=\"getOptions()\"\n [labelFont]=\"question?.font\"\n [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText) : ''\"\n [labelColor]=\"question?.color\"\n [inputTextColor]=\"question?.color\"\n [labelSize]=\"question?.fontSize\"\n [inputValueSize]=\"question?.fontSize\"\n [labelWeight]=\"question?.fontWeight\"\n [inputWeight]=\"question?.fontWeight\"\n [showLabel]=\"question?.style?.showLabel\"\n inputBorder=\"#ccc\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"placeholder\"\n [required]=\"question?.isOptional\" [inputBgColor]=\" from === 'normalDropDown' && !question?.inputBgColor ? '#eff8ff' : question?.inputBgColor || '#ffffff'\"\n [inputId]=\"question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"question?.iconLeftSrc\"\n (toggleEmit)=\"toggle()\"\n (clearInputEmit)=\"clearSelection()\"\n [question]=\"question\"\n (inputValue)=\"inputValue($event.value,$event.question)\"\n >\n</nxt-input>\n\n <!-- SKS11JUN25 Dropdown list -->\n <ul class=\"nxt-dropdown-menu\" *ngIf=\"showOptions && options?.length > 0\">\n <li *ngFor=\"let item of options\" (mousedown)=\"selectChange(item)\" [style.font-size]=\"question?.fontSize || '12px'\">\n @if(apiMeta && !apiMeta.isDependentField && item[apiMeta.field]){\n {{item[apiMeta.field]}}\n } @else {\n {{ item.id +'.label' | nxtCustomTranslate : item?.label || item?.value}}\n }\n </li>\n </ul>\n</div>\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\n", styles: [".shengel-custom-select-wrapper{position:relative}.nxt-dropdown-menu{position:absolute;z-index:10;background:#fff;border:1px solid #ccc;max-height:200px;overflow-y:auto;width:100%;margin-top:2px;list-style:none;padding:0}.nxt-dropdown-menu li{padding:8px;display:flex;cursor:pointer}.nxt-dropdown-menu li:hover{background-color:#f0f0f0}.invalid .shengel-custom-select{border-color:red}.shengel-custom-select{width:100%;padding-right:50px}.dropdown-close{position:relative}\n"] }]
|
|
47888
47888
|
}], ctorParameters: () => [{ type: TranslationService }, { type: ChangeService }, { type: DataService }, { type: StorageService }], propDecorators: { options: [{
|
|
47889
47889
|
type: Input
|
|
47890
47890
|
}], placeholder: [{
|
|
@@ -48908,13 +48908,13 @@ class PickLocationComponent {
|
|
|
48908
48908
|
this.showModal = false;
|
|
48909
48909
|
}
|
|
48910
48910
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PickLocationComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
48911
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PickLocationComponent, isStandalone: true, selector: "app-pick-location", inputs: { address: "address", from: "from", question: "question", mode: "mode", apiKey: "apiKey" }, outputs: { locationSelected: "locationSelected" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["search"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n <nxt-input [type]=\"'location'\" [mode]=\"mode\" [value]=\"address\" [from]=\"from\"\n [labelFont]=\"question?.font\" [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText) : ''\" [labelColor]=\"question?.color\"\n [labelSize]=\"question?.fontSize\" [inputValueSize]=\"question?.fontSize\" [labelWeight]=\"question?.fontWeight\"\n [inputWeight]=\"question?.fontWeight\" [showLabel]=\"question?.style?.showLabel\" inputBorder=\"
|
|
48911
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PickLocationComponent, isStandalone: true, selector: "app-pick-location", inputs: { address: "address", from: "from", question: "question", mode: "mode", apiKey: "apiKey" }, outputs: { locationSelected: "locationSelected" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["search"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n <nxt-input [type]=\"'location'\" [mode]=\"mode\" [value]=\"address\" [from]=\"from\"\n [labelFont]=\"question?.font\" [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText) : ''\" [labelColor]=\"question?.color\"\n [labelSize]=\"question?.fontSize\" [inputValueSize]=\"question?.fontSize\" [labelWeight]=\"question?.fontWeight\"\n [inputWeight]=\"question?.fontWeight\" [showLabel]=\"question?.style?.showLabel\" inputBorder=\"#ccc\" svgHeight=\"20px\"\n svgWidth=\"20px\" [placeholder]=\"question?.question\" [required]=\"question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"question?.trackingId\" [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"question?.iconLeftSrc\" (nativeInputRef)=\"setInputRef($event)\">\n </nxt-input>\n <a *ngIf=\"mode === 'edit' && !question?.isReadOnly\" (click)=\"openMap()\" style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\n {{ 'pickLocation' | nxtCustomTranslate : 'pickLocation' }}</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' | nxtCustomTranslate : 'pickYourLocation' }}</h4>\n <button class=\"close-button\" (click)=\"closeModal()\">X</button>\n </div>\n <google-map [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>", styles: ["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:1000}.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i2.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: i2.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: "ngmodule", type: FormsModule }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
|
|
48912
48912
|
}
|
|
48913
48913
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PickLocationComponent, decorators: [{
|
|
48914
48914
|
type: Component,
|
|
48915
48915
|
args: [{ selector: 'app-pick-location', standalone: true, imports: [
|
|
48916
48916
|
CommonModule, GoogleMapsModule, FormsModule, NxtInput, NxtCustomTranslatePipe
|
|
48917
|
-
], template: "<div>\n <nxt-input [type]=\"'location'\" [mode]=\"mode\" [value]=\"address\" [from]=\"from\"\n [labelFont]=\"question?.font\" [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText) : ''\" [labelColor]=\"question?.color\"\n [labelSize]=\"question?.fontSize\" [inputValueSize]=\"question?.fontSize\" [labelWeight]=\"question?.fontWeight\"\n [inputWeight]=\"question?.fontWeight\" [showLabel]=\"question?.style?.showLabel\" inputBorder=\"
|
|
48917
|
+
], template: "<div>\n <nxt-input [type]=\"'location'\" [mode]=\"mode\" [value]=\"address\" [from]=\"from\"\n [labelFont]=\"question?.font\" [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText) : ''\" [labelColor]=\"question?.color\"\n [labelSize]=\"question?.fontSize\" [inputValueSize]=\"question?.fontSize\" [labelWeight]=\"question?.fontWeight\"\n [inputWeight]=\"question?.fontWeight\" [showLabel]=\"question?.style?.showLabel\" inputBorder=\"#ccc\" svgHeight=\"20px\"\n svgWidth=\"20px\" [placeholder]=\"question?.question\" [required]=\"question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"question?.trackingId\" [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"question?.iconLeftSrc\" (nativeInputRef)=\"setInputRef($event)\">\n </nxt-input>\n <a *ngIf=\"mode === 'edit' && !question?.isReadOnly\" (click)=\"openMap()\" style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\n {{ 'pickLocation' | nxtCustomTranslate : 'pickLocation' }}</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' | nxtCustomTranslate : 'pickYourLocation' }}</h4>\n <button class=\"close-button\" (click)=\"closeModal()\">X</button>\n </div>\n <google-map [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>", styles: ["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:1000}.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"] }]
|
|
48918
48918
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { searchElementRef: [{
|
|
48919
48919
|
type: ViewChild,
|
|
48920
48920
|
args: ['search', { static: true }]
|
|
@@ -49486,7 +49486,7 @@ class NxtSearchBox {
|
|
|
49486
49486
|
this.clickItem(null);
|
|
49487
49487
|
}
|
|
49488
49488
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NxtSearchBox, deps: [{ token: StorageService }, { token: ChangeService }, { token: DataService }, { token: CountryService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
49489
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: NxtSearchBox, isStandalone: true, selector: "nxt-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly", mode: "mode", from: "from", value: "value" }, outputs: { searchValueChange: "searchValueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "searchWrapper", first: true, predicate: ["searchWrapper"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- VD 12Jun24 - readonly change -->\n<div class=\"search-wrapper\" #searchWrapper>\n <nxt-input \n [type]=\"'list'\" \n [mode]=\"mode\" \n [from]=\"from\"\n [value]=\"mode === 'edit' ? filterName : viewFilterName\"\n [labelFont]=\"question?.font\" \n [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText): ''\" \n [labelColor]=\"question?.color\"\n [labelSize]=\"question?.fontSize\" \n [inputValueSize]=\"question?.fontSize\" \n [labelWeight]=\"question?.fontWeight\"\n [inputWeight]=\"question?.fontWeight\" \n [showLabel]=\"question?.style?.showLabel\" \n inputBorder=\"
|
|
49489
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: NxtSearchBox, isStandalone: true, selector: "nxt-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly", mode: "mode", from: "from", value: "value" }, outputs: { searchValueChange: "searchValueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "searchWrapper", first: true, predicate: ["searchWrapper"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- VD 12Jun24 - readonly change -->\n<div class=\"search-wrapper\" #searchWrapper>\n <nxt-input \n [type]=\"'list'\" \n [mode]=\"mode\" \n [from]=\"from\"\n [value]=\"mode === 'edit' ? filterName : viewFilterName\"\n [labelFont]=\"question?.font\" \n [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText): ''\" \n [labelColor]=\"question?.color\"\n [labelSize]=\"question?.fontSize\" \n [inputValueSize]=\"question?.fontSize\" \n [labelWeight]=\"question?.fontWeight\"\n [inputWeight]=\"question?.fontWeight\" \n [showLabel]=\"question?.style?.showLabel\" \n inputBorder=\"#ccc\" \n svgHeight=\"20px\"\n svgWidth=\"20px\" \n [placeholder]=\"placeHolderText\" \n [required]=\"question?.isOptional\" \n inputBgColor=\"#ffffff\"\n [inputId]=\"question?.trackingId\" \n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"question?.iconLeftSrc\" \n (inputValue)=\"getSourceDataLocal($event); inputValue($event.value, $event.question)\" \n (onFocus)=\"onInputFocus()\"\n (onBlur)=\"onInputBlur()\"\n [showSuggestion]=\"showSuggestion\" \n ariaOwns=\"selectList\" \n ariaHasPopup=\"listbox\" \n [isLoading]=\"isLoading\" \n [question]=\"question\"\n (removeValueEmit)=\"removeValueEmit()\">\n </nxt-input>\n\n <div id=\"selectList\" class=\"suggestion-wrapper\" role=\"listbox\" *ngIf=\"showSuggestion\">\n <div *ngIf=\"finalResults().length > 0\" class=\"nxt-suggestions-container\">\n <div *ngFor=\"let item of finalResults(); trackBy: trackByFn\" \n (click)=\"clickItem(item)\" \n class=\"suggestion-item\" \n role=\"option\"\n tabindex=\"0\"\n (keydown.enter)=\"clickItem(item)\"\n (keydown.space)=\"clickItem(item)\">\n <div class=\"item-content\">\n <div class=\"item-details\">\n <div *ngIf=\"item.thumbnail\" class=\"thumbnail-wrapper\">\n <img [src]=\"item.thumbnail\" [alt]=\"item.name + ' avatar'\" />\n </div>\n <div class=\"item-text\">\n <!-- Primary text (first key) -->\n <ng-container *ngIf=\"getKeys(getValues(item, SearchItem)).length > 0\">\n <div class=\"item-name primary\" \n [innerHTML]=\"highlightText(getValues(item, SearchItem)[getKeys(getValues(item, SearchItem))[0]], searchKeyWord)\">\n </div>\n </ng-container>\n \n <!-- Secondary text (remaining keys) -->\n <div class=\"item-secondary\" *ngIf=\"getKeys(getValues(item, SearchItem)).length > 1\">\n <ng-container *ngFor=\"let key of getKeys(getValues(item, SearchItem)); let i = index\">\n <ng-container *ngIf=\"i > 0\">\n <span class=\"secondary-text\" \n [innerHTML]=\"highlightText(getValues(item, SearchItem)[key], searchKeyWord)\">\n </span>\n <span class=\"separator\" *ngIf=\"i < getKeys(getValues(item, SearchItem)).length - 1\"> | </span>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"noResult && searchKeyWord\" class=\"no-results\">\n <div class=\"no-results-content\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <path d=\"m21 21-4.35-4.35\"></path>\n </svg>\n <p>{{ 'NO_RESULTS_FOUND' | nxtCustomTranslate : 'No results found for' }} \"{{searchKeyWord}}\"</p>\n </div>\n </div>\n </div>\n</div>", styles: [".search-wrapper{position:relative;width:100%}.suggestion-wrapper{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e0e0e0;border-top:none;border-radius:0 0 4px 4px;box-shadow:0 2px 8px #0000001a;z-index:1000;max-height:300px;overflow:hidden}.nxt-suggestions-container{max-height:300px;overflow-y:auto;min-width:100%}.suggestion-item{cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .2s ease;outline:none}.suggestion-item:hover,.suggestion-item:focus{background-color:#f5f5f5}.suggestion-item:last-child{border-bottom:none}.item-content{padding:5px}.item-details{display:flex;align-items:flex-start;gap:12px;text-align:left}.thumbnail-wrapper{flex-shrink:0}.thumbnail-wrapper img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid #e0e0e0}.item-text{flex:1;min-width:0}.item-name{font-size:14px;font-weight:500;color:#333;line-height:1.4;margin-bottom:2px;word-wrap:break-word;overflow-wrap:break-word}.item-secondary{font-size:12px;color:#666;line-height:1.3;display:flex}.secondary-text{display:inline}.separator{color:#999;margin:0 3px}.no-results{padding:20px;text-align:center;color:#666}.no-results-content{display:flex;align-items:center;justify-content:center;gap:8px;flex-direction:column}.no-results-content svg{color:#d1d5db;margin-bottom:8px}.no-results-content p{color:#6b7280;margin:0;font-size:14px;font-weight:500}:host ::ng-deep .highlight{font-weight:700;display:inline}.nxt-suggestions-container::-webkit-scrollbar{width:6px}.nxt-suggestions-container::-webkit-scrollbar-track{background:#f1f1f1}.nxt-suggestions-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.nxt-suggestions-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.suggestion-wrapper,.nxt-suggestions-container{max-height:250px}.item-content{padding:10px 12px}.item-details{gap:8px}.thumbnail-wrapper img{width:32px;height:32px}.item-name{font-size:13px}.item-secondary{font-size:11px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
|
|
49490
49490
|
}
|
|
49491
49491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NxtSearchBox, decorators: [{
|
|
49492
49492
|
type: Component,
|
|
@@ -49495,7 +49495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
49495
49495
|
FormsModule,
|
|
49496
49496
|
NxtInput,
|
|
49497
49497
|
NxtCustomTranslatePipe
|
|
49498
|
-
], template: "<!-- VD 12Jun24 - readonly change -->\n<div class=\"search-wrapper\" #searchWrapper>\n <nxt-input \n [type]=\"'list'\" \n [mode]=\"mode\" \n [from]=\"from\"\n [value]=\"mode === 'edit' ? filterName : viewFilterName\"\n [labelFont]=\"question?.font\" \n [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText): ''\" \n [labelColor]=\"question?.color\"\n [labelSize]=\"question?.fontSize\" \n [inputValueSize]=\"question?.fontSize\" \n [labelWeight]=\"question?.fontWeight\"\n [inputWeight]=\"question?.fontWeight\" \n [showLabel]=\"question?.style?.showLabel\" \n inputBorder=\"
|
|
49498
|
+
], template: "<!-- VD 12Jun24 - readonly change -->\n<div class=\"search-wrapper\" #searchWrapper>\n <nxt-input \n [type]=\"'list'\" \n [mode]=\"mode\" \n [from]=\"from\"\n [value]=\"mode === 'edit' ? filterName : viewFilterName\"\n [labelFont]=\"question?.font\" \n [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText): ''\" \n [labelColor]=\"question?.color\"\n [labelSize]=\"question?.fontSize\" \n [inputValueSize]=\"question?.fontSize\" \n [labelWeight]=\"question?.fontWeight\"\n [inputWeight]=\"question?.fontWeight\" \n [showLabel]=\"question?.style?.showLabel\" \n inputBorder=\"#ccc\" \n svgHeight=\"20px\"\n svgWidth=\"20px\" \n [placeholder]=\"placeHolderText\" \n [required]=\"question?.isOptional\" \n inputBgColor=\"#ffffff\"\n [inputId]=\"question?.trackingId\" \n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"question?.iconLeftSrc\" \n (inputValue)=\"getSourceDataLocal($event); inputValue($event.value, $event.question)\" \n (onFocus)=\"onInputFocus()\"\n (onBlur)=\"onInputBlur()\"\n [showSuggestion]=\"showSuggestion\" \n ariaOwns=\"selectList\" \n ariaHasPopup=\"listbox\" \n [isLoading]=\"isLoading\" \n [question]=\"question\"\n (removeValueEmit)=\"removeValueEmit()\">\n </nxt-input>\n\n <div id=\"selectList\" class=\"suggestion-wrapper\" role=\"listbox\" *ngIf=\"showSuggestion\">\n <div *ngIf=\"finalResults().length > 0\" class=\"nxt-suggestions-container\">\n <div *ngFor=\"let item of finalResults(); trackBy: trackByFn\" \n (click)=\"clickItem(item)\" \n class=\"suggestion-item\" \n role=\"option\"\n tabindex=\"0\"\n (keydown.enter)=\"clickItem(item)\"\n (keydown.space)=\"clickItem(item)\">\n <div class=\"item-content\">\n <div class=\"item-details\">\n <div *ngIf=\"item.thumbnail\" class=\"thumbnail-wrapper\">\n <img [src]=\"item.thumbnail\" [alt]=\"item.name + ' avatar'\" />\n </div>\n <div class=\"item-text\">\n <!-- Primary text (first key) -->\n <ng-container *ngIf=\"getKeys(getValues(item, SearchItem)).length > 0\">\n <div class=\"item-name primary\" \n [innerHTML]=\"highlightText(getValues(item, SearchItem)[getKeys(getValues(item, SearchItem))[0]], searchKeyWord)\">\n </div>\n </ng-container>\n \n <!-- Secondary text (remaining keys) -->\n <div class=\"item-secondary\" *ngIf=\"getKeys(getValues(item, SearchItem)).length > 1\">\n <ng-container *ngFor=\"let key of getKeys(getValues(item, SearchItem)); let i = index\">\n <ng-container *ngIf=\"i > 0\">\n <span class=\"secondary-text\" \n [innerHTML]=\"highlightText(getValues(item, SearchItem)[key], searchKeyWord)\">\n </span>\n <span class=\"separator\" *ngIf=\"i < getKeys(getValues(item, SearchItem)).length - 1\"> | </span>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"noResult && searchKeyWord\" class=\"no-results\">\n <div class=\"no-results-content\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <path d=\"m21 21-4.35-4.35\"></path>\n </svg>\n <p>{{ 'NO_RESULTS_FOUND' | nxtCustomTranslate : 'No results found for' }} \"{{searchKeyWord}}\"</p>\n </div>\n </div>\n </div>\n</div>", styles: [".search-wrapper{position:relative;width:100%}.suggestion-wrapper{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e0e0e0;border-top:none;border-radius:0 0 4px 4px;box-shadow:0 2px 8px #0000001a;z-index:1000;max-height:300px;overflow:hidden}.nxt-suggestions-container{max-height:300px;overflow-y:auto;min-width:100%}.suggestion-item{cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .2s ease;outline:none}.suggestion-item:hover,.suggestion-item:focus{background-color:#f5f5f5}.suggestion-item:last-child{border-bottom:none}.item-content{padding:5px}.item-details{display:flex;align-items:flex-start;gap:12px;text-align:left}.thumbnail-wrapper{flex-shrink:0}.thumbnail-wrapper img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid #e0e0e0}.item-text{flex:1;min-width:0}.item-name{font-size:14px;font-weight:500;color:#333;line-height:1.4;margin-bottom:2px;word-wrap:break-word;overflow-wrap:break-word}.item-secondary{font-size:12px;color:#666;line-height:1.3;display:flex}.secondary-text{display:inline}.separator{color:#999;margin:0 3px}.no-results{padding:20px;text-align:center;color:#666}.no-results-content{display:flex;align-items:center;justify-content:center;gap:8px;flex-direction:column}.no-results-content svg{color:#d1d5db;margin-bottom:8px}.no-results-content p{color:#6b7280;margin:0;font-size:14px;font-weight:500}:host ::ng-deep .highlight{font-weight:700;display:inline}.nxt-suggestions-container::-webkit-scrollbar{width:6px}.nxt-suggestions-container::-webkit-scrollbar-track{background:#f1f1f1}.nxt-suggestions-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.nxt-suggestions-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.suggestion-wrapper,.nxt-suggestions-container{max-height:250px}.item-content{padding:10px 12px}.item-details{gap:8px}.thumbnail-wrapper img{width:32px;height:32px}.item-name{font-size:13px}.item-secondary{font-size:11px}}\n"] }]
|
|
49499
49499
|
}], ctorParameters: () => [{ type: StorageService }, { type: ChangeService }, { type: DataService }, { type: CountryService }, { type: i0.ElementRef }], propDecorators: { placeHolderText: [{
|
|
49500
49500
|
type: Input
|
|
49501
49501
|
}], question: [{
|
|
@@ -49531,6 +49531,7 @@ var searchBox_component = /*#__PURE__*/Object.freeze({
|
|
|
49531
49531
|
});
|
|
49532
49532
|
|
|
49533
49533
|
class CustomRadioComponent {
|
|
49534
|
+
cdRef;
|
|
49534
49535
|
changeService;
|
|
49535
49536
|
dataService;
|
|
49536
49537
|
storageService;
|
|
@@ -49555,7 +49556,8 @@ class CustomRadioComponent {
|
|
|
49555
49556
|
originalValue; // SKS11JUN25 To store the original value when entering view edit mode
|
|
49556
49557
|
value;
|
|
49557
49558
|
selectedOptionId;
|
|
49558
|
-
constructor(changeService, dataService, storageService) {
|
|
49559
|
+
constructor(cdRef, changeService, dataService, storageService) {
|
|
49560
|
+
this.cdRef = cdRef;
|
|
49559
49561
|
this.changeService = changeService;
|
|
49560
49562
|
this.dataService = dataService;
|
|
49561
49563
|
this.storageService = storageService;
|
|
@@ -49615,7 +49617,7 @@ class CustomRadioComponent {
|
|
|
49615
49617
|
radioChange(event) {
|
|
49616
49618
|
let change = new ChangeWrapper();
|
|
49617
49619
|
change['fromQuestionId'] = this.id;
|
|
49618
|
-
change['valueObj'] = event?.target?.id ? event?.target?.id : event ? event : '';
|
|
49620
|
+
change['valueObj'] = event?.target?.id ? event?.target?.id : event.valueObj ? event.valueObj : event || '';
|
|
49619
49621
|
change['referenceField'] = this.referenceField;
|
|
49620
49622
|
// SKS11JUN25 Only emit the value if not in view edit mode
|
|
49621
49623
|
if (!this.viewEdit) {
|
|
@@ -49634,6 +49636,7 @@ class CustomRadioComponent {
|
|
|
49634
49636
|
if (event) {
|
|
49635
49637
|
this.invalidFieldIds = [];
|
|
49636
49638
|
}
|
|
49639
|
+
this.cdRef.detectChanges();
|
|
49637
49640
|
}
|
|
49638
49641
|
viewEditClick(ques) {
|
|
49639
49642
|
this.originalValue = ques.input; // SKS11JUN25 Store the original value
|
|
@@ -49656,16 +49659,16 @@ class CustomRadioComponent {
|
|
|
49656
49659
|
this.viewEdit = false; // SKS11JUN25 Exit view edit mode
|
|
49657
49660
|
this.mode = 'view'; // Switch back to view mode
|
|
49658
49661
|
}
|
|
49659
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CustomRadioComponent, deps: [{ token: ChangeService }, { token: DataService }, { token: StorageService }], target: i0.ɵɵFactoryTarget.Component });
|
|
49660
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CustomRadioComponent, isStandalone: true, selector: "app-custom-radio", inputs: { options: "options", question: "question", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", readOnly: "readOnly", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel", referenceField: "referenceField", token: "token", mode: "mode" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP26MAR25 Mark as checked if it matches the selected value -->\n<div class=\" hover-wrapper custom-radio-container\">\n <div\n style=\"display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-left: 5px; padding-right: 5px; background-color: #
|
|
49662
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CustomRadioComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ChangeService }, { token: DataService }, { token: StorageService }], target: i0.ɵɵFactoryTarget.Component });
|
|
49663
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CustomRadioComponent, isStandalone: true, selector: "app-custom-radio", inputs: { options: "options", question: "question", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", readOnly: "readOnly", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel", referenceField: "referenceField", token: "token", mode: "mode" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP26MAR25 Mark as checked if it matches the selected value -->\n<div class=\" hover-wrapper custom-radio-container\">\n <div\n style=\"display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-left: 5px; padding-right: 5px; background-color: #ffffff; border-radius: 5px;\">\n @if(mode === 'edit'){\n <div style=\"display: flex; gap: 10px; min-height: 40px; align-items: center;\">\n <div *ngFor=\"let option of options\"\n [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\">\n\n <input type=\"radio\" [id]=\"apiMeta ? option[labelField] ?? option.value : option.value\"\n [checked]=\"(selectedValue ?? '') == option.value\" [name]=\"id\" [value]=\"selectedValue\"\n (change)=\"radioChange($event)\" />\n <label class=\"nxt-radio-label\" [for]=\"apiMeta ? option[labelField] ?? option.value : option.value\">\n @if(apiMeta && option[labelField]){\n {{option[labelField]}}\n } @else {\n {{option.id +'.label' | nxtCustomTranslate : option.label || option.value }}\n }\n </label>\n </div>\n </div>\n }\n <div *ngIf=\"viewEdit\" class=\"flex\" style=\"display: flex; margin-left: auto;\">\n <div *ngIf=\"viewEdit && originalValue !== value\"\n style=\"padding-right: 5px;\">\n <svg (click)=\"saveChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n <div *ngIf=\"viewEdit && originalValue !== value\">\n <svg (click)=\"discardChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n </div>\n @if(mode !== 'edit') {\n <div class=\"flex content-space-between\" style=\"height: 40px; align-items: center;font-size: 12px;\">\n <div style=\"color: #999;\">{{selectedOptionId +'.label' | nxtCustomTranslate : selectedValue || '-' : 'formBuilder' }}</div>\n <div>\n <svg *ngIf=\"!question?.isReadOnly && !viewEdit \" class=\"edit-icon\" (click)=\"viewEditClick(question)\" width=\"13\"\n height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n }\n <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">\n {{ errorMessage ?? 'Invalid selection' }}\n </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:10px;font-size:12px;margin-bottom:0}.custom-radio-option.invalid label{color:red}.error-msg{color:red;font-size:12px;margin-top:5px}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
49661
49664
|
}
|
|
49662
49665
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CustomRadioComponent, decorators: [{
|
|
49663
49666
|
type: Component,
|
|
49664
49667
|
args: [{ selector: 'app-custom-radio', standalone: true, imports: [
|
|
49665
49668
|
CommonModule,
|
|
49666
49669
|
NxtCustomTranslatePipe
|
|
49667
|
-
], template: "<!-- AP26MAR25 Mark as checked if it matches the selected value -->\n<div class=\" hover-wrapper custom-radio-container\">\n <div\n style=\"display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-left: 5px; padding-right: 5px; background-color: #
|
|
49668
|
-
}], ctorParameters: () => [{ type: ChangeService }, { type: DataService }, { type: StorageService }], propDecorators: { options: [{
|
|
49670
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- AP26MAR25 Mark as checked if it matches the selected value -->\n<div class=\" hover-wrapper custom-radio-container\">\n <div\n style=\"display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-left: 5px; padding-right: 5px; background-color: #ffffff; border-radius: 5px;\">\n @if(mode === 'edit'){\n <div style=\"display: flex; gap: 10px; min-height: 40px; align-items: center;\">\n <div *ngFor=\"let option of options\"\n [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\">\n\n <input type=\"radio\" [id]=\"apiMeta ? option[labelField] ?? option.value : option.value\"\n [checked]=\"(selectedValue ?? '') == option.value\" [name]=\"id\" [value]=\"selectedValue\"\n (change)=\"radioChange($event)\" />\n <label class=\"nxt-radio-label\" [for]=\"apiMeta ? option[labelField] ?? option.value : option.value\">\n @if(apiMeta && option[labelField]){\n {{option[labelField]}}\n } @else {\n {{option.id +'.label' | nxtCustomTranslate : option.label || option.value }}\n }\n </label>\n </div>\n </div>\n }\n <div *ngIf=\"viewEdit\" class=\"flex\" style=\"display: flex; margin-left: auto;\">\n <div *ngIf=\"viewEdit && originalValue !== value\"\n style=\"padding-right: 5px;\">\n <svg (click)=\"saveChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n <div *ngIf=\"viewEdit && originalValue !== value\">\n <svg (click)=\"discardChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n </div>\n @if(mode !== 'edit') {\n <div class=\"flex content-space-between\" style=\"height: 40px; align-items: center;font-size: 12px;\">\n <div style=\"color: #999;\">{{selectedOptionId +'.label' | nxtCustomTranslate : selectedValue || '-' : 'formBuilder' }}</div>\n <div>\n <svg *ngIf=\"!question?.isReadOnly && !viewEdit \" class=\"edit-icon\" (click)=\"viewEditClick(question)\" width=\"13\"\n height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n }\n <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">\n {{ errorMessage ?? 'Invalid selection' }}\n </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:10px;font-size:12px;margin-bottom:0}.custom-radio-option.invalid label{color:red}.error-msg{color:red;font-size:12px;margin-top:5px}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}\n"] }]
|
|
49671
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ChangeService }, { type: DataService }, { type: StorageService }], propDecorators: { options: [{
|
|
49669
49672
|
type: Input
|
|
49670
49673
|
}], question: [{
|
|
49671
49674
|
type: Input
|
|
@@ -50755,6 +50758,7 @@ class NxtDatatable {
|
|
|
50755
50758
|
}
|
|
50756
50759
|
}
|
|
50757
50760
|
this.computeSummaryColumns();
|
|
50761
|
+
this.computeSummaryValues();
|
|
50758
50762
|
this.cdRef.markForCheck();
|
|
50759
50763
|
}
|
|
50760
50764
|
}
|
|
@@ -51091,8 +51095,29 @@ class NxtDatatable {
|
|
|
51091
51095
|
// SKS20MAR25 Compute values for summary rows
|
|
51092
51096
|
computeSummaryValues(from) {
|
|
51093
51097
|
for (const row of this.summaryRows) {
|
|
51094
|
-
if (row.
|
|
51095
|
-
|
|
51098
|
+
if (row.formula) {
|
|
51099
|
+
console.log("hhhhh");
|
|
51100
|
+
// Replace [fieldName] with actual summary values or column sums
|
|
51101
|
+
let expression = row.formula.replace(/\[([^\]]+)\]/g, (_, fieldName) => {
|
|
51102
|
+
if (this.currentColumns.some(col => col.fieldName === fieldName && !col.summaryRow)) {
|
|
51103
|
+
// Sum values from the current dataSource for this column
|
|
51104
|
+
const sum = this.dataSource.data.reduce((acc, dataRow) => acc + (Number(dataRow[fieldName]) || 0), 0);
|
|
51105
|
+
return sum;
|
|
51106
|
+
}
|
|
51107
|
+
// Otherwise, take already computed summary value
|
|
51108
|
+
return Number(this.summaryValues[fieldName]) || 0;
|
|
51109
|
+
});
|
|
51110
|
+
try {
|
|
51111
|
+
const result = Function(`"use strict"; return (${expression})`)();
|
|
51112
|
+
this.summaryValues[row.fieldName] = isNaN(result) ? 0 : result;
|
|
51113
|
+
console.log(row.fieldName, this.summaryValues[row.fieldName]);
|
|
51114
|
+
}
|
|
51115
|
+
catch (e) {
|
|
51116
|
+
console.error('Error evaluating summary formula:', row.formula, e);
|
|
51117
|
+
this.summaryValues[row.fieldName] = 0;
|
|
51118
|
+
}
|
|
51119
|
+
}
|
|
51120
|
+
else if (row.operation === 'sum' && row.column) {
|
|
51096
51121
|
this.summaryValues[row.fieldName] = this.dataSource.data.reduce((acc, dataRow) => acc + (Number(dataRow[row.column]) || 0), 0);
|
|
51097
51122
|
}
|
|
51098
51123
|
else if (row.operation === 'subtract' && row.column) {
|
|
@@ -54226,13 +54251,13 @@ class QuestionnaireComponent {
|
|
|
54226
54251
|
return Object.values(item)[0];
|
|
54227
54252
|
}
|
|
54228
54253
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuestionnaireComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: SharedService }, { token: i1$3.ActivatedRoute }, { token: i1$2.DomSanitizer }, { token: i6.UntypedFormBuilder }, { token: i8.DeviceDetectorService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
54229
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: QuestionnaireComponent, isStandalone: true, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn", api: "api", isEdit: "isEdit", direction: "direction" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage", handleQuestion: "handleQuestion", handleBook: "handleBook", handleSubmit: "handleSubmit" }, usesOnChanges: true, ngImport: i0, template: "<!-- custom 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\" [dir]=\"direction\">\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 <!-- 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 && questionItem.style?.showLabel !== false\" style=\"display: flex;\">\n <span>{{questionItem?.questionNumber}}.</span>\n <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{(questionItem.id+'.questionText') | nxtCustomTranslate : 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 <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' | nxtCustomTranslate: 'pleaseMakeChoice'}}</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 <!-- 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 </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' | nxtCustomTranslate: 'zeroOfZero'}}\" 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 </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 </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 </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 </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\" *ngIf=\" questionItem?.style?.showLabel !== false\" [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' | nxtCustomTranslate : 'toBuyTicket'}}\" 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 *ngIf=\"ques?.style?.showLabel !== false\">{{ (ques.id+'.questionText') | nxtCustomTranslate : 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 </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 \n <!-- SKS11JUN25 Text, Email, label, number, DateTime-->\n <nxt-input *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'TextArea'\"\n [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [value]=\"ques.input\"\n [question]=\"ques\"\n [labelFont]=\"ques.font\"\n [label]=\"(ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText\"\n [labelColor]=\"ques.color\"\n [labelSize]=\"ques.fontSize\"\n [inputValueSize]=\"ques.fontSize\"\n [labelWeight]=\"ques.fontWeight\"\n [inputWeight]=\"ques.fontWeight\"\n [showLabel]=\"ques.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"(ques.id+'.question') | nxtCustomTranslate : ques?.question\"\n [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n [inputId]=\"ques.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n (inputValue)=\"childEventCapture($event,ques)\"\n >\n </nxt-input>\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\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 </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' | nxtCustomTranslate : 'attach'}}\n </span>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | nxtCustomTranslate : 'toBuyTicket'}}\" 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 <!-- SKS13MAR25 nxt table change -->\n <nxt-datatable isEditRow isDeleteRow actionButton isButtons\n [question]=\"ques\"\n from = \"formBuilder\"\n (valueChange)=\"childEventCapture($event.data, ques); clearSQError(ques.id)\"\n [tableConfig]=\"ques.tableConfig\"\n tableId = \"\"\n direction = \"ltr\"\n tableWidth = \"auto\"\n >\n </nxt-datatable>\n </div>\n\n <!-- SKS25MAR25 Image -->\n <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n <img [src]=\"ques.imageData\" [style.border]=\"ques.imageData ? '1px solid black' : 'none'\" />\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' | nxtCustomTranslate : 'select'}}---\"\n [errorMessage]=\"ques?.errorMessage\"\n [error]=\"ques?.error\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-dropdown>\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 <div class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</div>\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\">{{'add' | nxtCustomTranslate : 'add'}}</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 *ngIf=\"val.style?.showLabel !== false\">{{ 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.style?.showLabel !== false\">{{ (qa.id+'.questionText') | nxtCustomTranslate : 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 <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: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6.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", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
54254
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: QuestionnaireComponent, isStandalone: true, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn", api: "api", isEdit: "isEdit", direction: "direction" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage", handleQuestion: "handleQuestion", handleBook: "handleBook", handleSubmit: "handleSubmit" }, usesOnChanges: true, ngImport: i0, template: "<!-- custom 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\" [dir]=\"direction\">\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 <!-- 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 && questionItem.style?.showLabel !== false\" style=\"display: flex;\">\n <span>{{questionItem?.questionNumber}}.</span>\n <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{(questionItem.id+'.questionText') | nxtCustomTranslate : 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 <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' | nxtCustomTranslate: 'pleaseMakeChoice'}}</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 <!-- 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 </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' | nxtCustomTranslate: 'zeroOfZero'}}\" 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 </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 </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 </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 </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\" *ngIf=\" questionItem?.style?.showLabel !== false\" [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' | nxtCustomTranslate : 'toBuyTicket'}}\" 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 *ngIf=\"ques?.style?.showLabel !== false\">{{ (ques.id+'.questionText') | nxtCustomTranslate : 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 </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 \n <!-- SKS11JUN25 Text, Email, label, number, DateTime-->\n <nxt-input *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'TextArea'\"\n [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [value]=\"ques.input\"\n [question]=\"ques\"\n [labelFont]=\"ques.font\"\n [label]=\"(ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText\"\n [labelColor]=\"ques.color\"\n [labelSize]=\"ques.fontSize\"\n [inputValueSize]=\"ques.fontSize\"\n [labelWeight]=\"ques.fontWeight\"\n [inputWeight]=\"ques.fontWeight\"\n [showLabel]=\"ques.style?.showLabel\"\n inputBorder=\"#ccc\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"(ques.id+'.question') | nxtCustomTranslate : ques?.question\"\n [required]=\"ques.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"ques.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n (inputValue)=\"childEventCapture($event,ques)\"\n >\n </nxt-input>\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\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 </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' | nxtCustomTranslate : 'attach'}}\n </span>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | nxtCustomTranslate : 'toBuyTicket'}}\" 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 <!-- SKS13MAR25 nxt table change -->\n <nxt-datatable isEditRow isDeleteRow actionButton isButtons\n [question]=\"ques\"\n from = \"formBuilder\"\n (valueChange)=\"childEventCapture($event.data, ques); clearSQError(ques.id)\"\n [tableConfig]=\"ques.tableConfig\"\n tableId = \"\"\n direction = \"ltr\"\n tableWidth = \"auto\"\n >\n </nxt-datatable>\n </div>\n\n <!-- SKS25MAR25 Image -->\n <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n <img [src]=\"ques.imageData\" [style.border]=\"ques.imageData ? '1px solid black' : 'none'\" />\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' | nxtCustomTranslate : 'select'}}---\"\n [errorMessage]=\"ques?.errorMessage\"\n [error]=\"ques?.error\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-dropdown>\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 <div class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</div>\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\">{{'add' | nxtCustomTranslate : 'add'}}</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 *ngIf=\"val.style?.showLabel !== false\">{{ 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.style?.showLabel !== false\">{{ (qa.id+'.questionText') | nxtCustomTranslate : 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 <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:10px;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: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6.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", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
54230
54255
|
}
|
|
54231
54256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuestionnaireComponent, decorators: [{
|
|
54232
54257
|
type: Component,
|
|
54233
54258
|
args: [{ selector: "lib-questionnaire", standalone: true, imports: [
|
|
54234
54259
|
CommonModule, NxtInput, FormsModule, CustomDropdownComponent, NxtDatatable, PickLocationComponent, NxtCustomTranslatePipe
|
|
54235
|
-
], encapsulation: ViewEncapsulation.None, template: "<!-- custom 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\" [dir]=\"direction\">\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 <!-- 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 && questionItem.style?.showLabel !== false\" style=\"display: flex;\">\n <span>{{questionItem?.questionNumber}}.</span>\n <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{(questionItem.id+'.questionText') | nxtCustomTranslate : 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 <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' | nxtCustomTranslate: 'pleaseMakeChoice'}}</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 <!-- 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 </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' | nxtCustomTranslate: 'zeroOfZero'}}\" 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 </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 </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 </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 </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\" *ngIf=\" questionItem?.style?.showLabel !== false\" [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' | nxtCustomTranslate : 'toBuyTicket'}}\" 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 *ngIf=\"ques?.style?.showLabel !== false\">{{ (ques.id+'.questionText') | nxtCustomTranslate : 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 </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 \n <!-- SKS11JUN25 Text, Email, label, number, DateTime-->\n <nxt-input *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'TextArea'\"\n [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [value]=\"ques.input\"\n [question]=\"ques\"\n [labelFont]=\"ques.font\"\n [label]=\"(ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText\"\n [labelColor]=\"ques.color\"\n [labelSize]=\"ques.fontSize\"\n [inputValueSize]=\"ques.fontSize\"\n [labelWeight]=\"ques.fontWeight\"\n [inputWeight]=\"ques.fontWeight\"\n [showLabel]=\"ques.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"(ques.id+'.question') | nxtCustomTranslate : ques?.question\"\n [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n [inputId]=\"ques.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n (inputValue)=\"childEventCapture($event,ques)\"\n >\n </nxt-input>\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\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 </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' | nxtCustomTranslate : 'attach'}}\n </span>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | nxtCustomTranslate : 'toBuyTicket'}}\" 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 <!-- SKS13MAR25 nxt table change -->\n <nxt-datatable isEditRow isDeleteRow actionButton isButtons\n [question]=\"ques\"\n from = \"formBuilder\"\n (valueChange)=\"childEventCapture($event.data, ques); clearSQError(ques.id)\"\n [tableConfig]=\"ques.tableConfig\"\n tableId = \"\"\n direction = \"ltr\"\n tableWidth = \"auto\"\n >\n </nxt-datatable>\n </div>\n\n <!-- SKS25MAR25 Image -->\n <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n <img [src]=\"ques.imageData\" [style.border]=\"ques.imageData ? '1px solid black' : 'none'\" />\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' | nxtCustomTranslate : 'select'}}---\"\n [errorMessage]=\"ques?.errorMessage\"\n [error]=\"ques?.error\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-dropdown>\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 <div class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</div>\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\">{{'add' | nxtCustomTranslate : 'add'}}</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 *ngIf=\"val.style?.showLabel !== false\">{{ 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.style?.showLabel !== false\">{{ (qa.id+'.questionText') | nxtCustomTranslate : 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 <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"] }]
|
|
54260
|
+
], encapsulation: ViewEncapsulation.None, template: "<!-- custom 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\" [dir]=\"direction\">\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 <!-- 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 && questionItem.style?.showLabel !== false\" style=\"display: flex;\">\n <span>{{questionItem?.questionNumber}}.</span>\n <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{(questionItem.id+'.questionText') | nxtCustomTranslate : 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 <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' | nxtCustomTranslate: 'pleaseMakeChoice'}}</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 <!-- 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 </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' | nxtCustomTranslate: 'zeroOfZero'}}\" 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 </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 </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 </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 </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\" *ngIf=\" questionItem?.style?.showLabel !== false\" [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' | nxtCustomTranslate : 'toBuyTicket'}}\" 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 *ngIf=\"ques?.style?.showLabel !== false\">{{ (ques.id+'.questionText') | nxtCustomTranslate : 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 </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 \n <!-- SKS11JUN25 Text, Email, label, number, DateTime-->\n <nxt-input *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'TextArea'\"\n [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [value]=\"ques.input\"\n [question]=\"ques\"\n [labelFont]=\"ques.font\"\n [label]=\"(ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText\"\n [labelColor]=\"ques.color\"\n [labelSize]=\"ques.fontSize\"\n [inputValueSize]=\"ques.fontSize\"\n [labelWeight]=\"ques.fontWeight\"\n [inputWeight]=\"ques.fontWeight\"\n [showLabel]=\"ques.style?.showLabel\"\n inputBorder=\"#ccc\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"(ques.id+'.question') | nxtCustomTranslate : ques?.question\"\n [required]=\"ques.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"ques.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n (inputValue)=\"childEventCapture($event,ques)\"\n >\n </nxt-input>\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\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 </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' | nxtCustomTranslate : 'attach'}}\n </span>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | nxtCustomTranslate : 'toBuyTicket'}}\" 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 <!-- SKS13MAR25 nxt table change -->\n <nxt-datatable isEditRow isDeleteRow actionButton isButtons\n [question]=\"ques\"\n from = \"formBuilder\"\n (valueChange)=\"childEventCapture($event.data, ques); clearSQError(ques.id)\"\n [tableConfig]=\"ques.tableConfig\"\n tableId = \"\"\n direction = \"ltr\"\n tableWidth = \"auto\"\n >\n </nxt-datatable>\n </div>\n\n <!-- SKS25MAR25 Image -->\n <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n <img [src]=\"ques.imageData\" [style.border]=\"ques.imageData ? '1px solid black' : 'none'\" />\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' | nxtCustomTranslate : 'select'}}---\"\n [errorMessage]=\"ques?.errorMessage\"\n [error]=\"ques?.error\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-dropdown>\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 <div class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</div>\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\">{{'add' | nxtCustomTranslate : 'add'}}</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 *ngIf=\"val.style?.showLabel !== false\">{{ 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.style?.showLabel !== false\">{{ (qa.id+'.questionText') | nxtCustomTranslate : 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 <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:10px;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"] }]
|
|
54236
54261
|
}], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: SharedService }, { type: i1$3.ActivatedRoute }, { type: i1$2.DomSanitizer }, { type: i6.UntypedFormBuilder }, { type: i8.DeviceDetectorService }, { type: i0.ElementRef }], propDecorators: { qbId: [{
|
|
54237
54262
|
type: Input
|
|
54238
54263
|
}], insuranceStartDate: [{
|
|
@@ -56892,14 +56917,14 @@ class QuestionbookComponent {
|
|
|
56892
56917
|
this.isImageEdit = false;
|
|
56893
56918
|
}
|
|
56894
56919
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuestionbookComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: StorageService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
56895
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: QuestionbookComponent, isStandalone: true, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", isEdit: "isEdit", dropDownData: "dropDownData", dataBind: "dataBind", allIcons: "allIcons", themeColor: "themeColor", cdnIconURL: "cdnIconURL", direction: "direction", languageCode: "languageCode" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", singleFieldChangeEmit: "singleFieldChangeEmit", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, ngImport: i0, template: "<!-- 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 <ng-container *ngFor=\"let ques of questions;let i = index\">\n <div [ngStyle]=\"{ display: ques.isHidden ? 'none' : 'block' }\" [class]=\"'col-lg-' + ques.size + ' paddingnone'\" \n [id]=\"ques.id\" [style]=\"ques?.style?.questionStyle\">\n <!-- VD 09May24 is hide field change-->\n <div class=\"nxtInputContainer\">\n <!-- AP-28MAR25 Show label if enabled and not a Boolean type -->\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n *ngIf=\"ques.style?.showLabel ? (ques.style?.showLabel && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'RichTextArea' && ques.type !== 'DateTime' && ques.type !== 'month' && ques.type !== 'Location' && ques.type !== 'Number' &&ques.type !== 'Email' && ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label'): (ques.style?.showLabel !== false && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'DateTime' && ques.type !== 'month' && ques.type !== 'Location' && ques.type !== 'Number' && ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label')\"\n [style]=\"ques.style?.labelStyle\">\n <div style=\"gap: 5px; display: flex;\" [style]=\"ques.style?.labelValueStyle\"\n [ngStyle]=\"{\n 'font-family': ques.font,\n 'color': ques.color || '#212529',\n 'font-size': ques.fontSize || '14px',\n 'font-weight': ques.fontWeight || 'normal'\n }\">{{ ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText):''}}\n <div *ngIf=\"ques.isOptional && !ques.isReadOnly\" style=\"color: red;\">*</div>\n <!-- SKS13MAR25 only show on file type -->\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips help text -->\n <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips for file requirements -->\n <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n style=\"margin-left: 4px;\">i</div>\n </div>\n </div>\n <!-- calendar -->\n <div *ngIf=\"ques.type === 'Calendar'\">\n <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <!-- model used in calendar component -->\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model>\n </div>\n\n <!-- SKS11JUN25 for pick location -->\n <app-pick-location *ngIf=\"ques.type === 'Location'\" [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n\n <!-- SKS25MAR25 Image -->\n <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img *ngIf=\"ques.isReadOnly\" [src]=\"ques.imageData\" />\n <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"ques.input\">\n <img [src]=\"ques.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!ques.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(ques, $event)\" style=\"display: none;\" />\n </div>\n </div>\n </div>\n <!-- MSM10JUL25 icon-selector -->\n <nxt-icon-selector [allIcons]=\"allIcons\" *ngIf=\"ques.type === 'Icon'\" [required]=\"ques.isOptional\" [mode]=\"isEdit !== true ? 'view' : 'edit'\" [question]=\"ques\" [labelFont]=\"ques.font\"\n [label]=\" ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n [labelColor]=\"ques.color\"\n [labelSize]=\"ques.fontSize\" [labelWeight]=\"ques.fontWeight\" [showLabel]=\"ques.style?.showLabel\" (iconSelected)=\"childEventCapture($event, ques);\"></nxt-icon-selector>\n\n <!-- SKS21MAR25 line -->\n <hr *ngIf=\"ques.type === 'Line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS13MAR25 data table -->\n <nxt-datatable *ngIf=\"ques.type === 'Table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"questionBook\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\" [languageCode]=\"languageCode\"\n [tableConfig]=\"ques.tableConfig\" tableId=\"\" [direction]=\"direction\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- list -->\n <nxt-search-box *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" [value]=\"ques.input\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (searchValueChange)=\"childEventCapture($event.value,$event.question)\">\n </nxt-search-box>\n\n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <app-custom-dropdown *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n placeholder=\"---{{'SELECT' | nxtCustomTranslate : 'select'}}---\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n </app-custom-dropdown>\n <!-- // VD 02Aug24 custom-radio component -->\n <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n <app-custom-radio [options]=\"ques.options\" [question]=\"ques\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n </app-custom-radio>\n </div>\n\n <!-- Attachment / Files -->\n <app-file-upload *ngIf=\"ques.type === 'File'\" [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [allFiles]=\"ques.input\" (selectedFileData)=\"childEventCapture($event.value,$event.question)\"\n (deletedFileData)=\"deleteFile($event)\"\n ></app-file-upload>\n <!-- SKS11JUN25 Button -->\n <nxt-button\n *ngIf=\"ques.type === 'Button'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"ques?.question\"\n (buttonClickEmit)=\"childEventCapture($event, ques)\"\n >\n </nxt-button>\n <!-- SKS11JUN25 book type -->\n <lib-questionbook *ngIf=\"ques.type === 'Book'\" [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n [questions]=\"ques?.qbReferenceQuestions?.bookQuestionsMap?.[ques?.qbReference]?.subQuestions\"\n (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n <!-- SKS11JUN25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'month' || ques.type === 'Date' || ques.type === 'Time' || ques.type === 'TextArea'\"\n [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'Date' ? 'date' : ques.type === 'Time' ? 'time' : ques.type === 'TextArea' ? 'textarea' : ques.type === 'month' ? 'month' : 'text'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [value]=\"ques.input\"\n [question]=\"ques\"\n [labelFont]=\"ques.font\"\n [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n [labelColor]=\"ques.color\"\n [labelSize]=\"ques.fontSize\"\n [inputValueSize]=\"ques.fontSize\"\n [labelWeight]=\"ques.fontWeight\"\n [inputWeight]=\"ques.fontWeight\"\n [showLabel]=\"ques.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n [inputId]=\"ques.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n [minDate]=\"ques.minDate\"\n [rows]=\"3\"\n [apiMeta]=\"ques.subText\"\n [direction]=\"direction\"\n (inputValue)=\"childEventCapture($event.value,$event.question, 'nxt-input')\"\n >\n </nxt-input>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'Image'\">\n <div style=\"height: 200px;\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n </div>\n\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>", 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}.col-lg-6,.col-lg-4{padding-left:5px!important;padding-right:5px!important}.form-row{display:-ms-flexbox!important;display:flex!important;-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}}.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}.custom-line{width:100%;border:1px solid #d9d9d9}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}input[type=checkbox]{width:21px}.boolean-question{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:12px}.form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"], dependencies: [{ kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "questions", "errorFieldId", "labelValue", "token", "isEdit", "dropDownData", "dataBind", "allIcons", "themeColor", "cdnIconURL", "direction", "languageCode"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: NxtFileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "mode", "isShowNoFileIcon", "question", "error", "from"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token", "mode"], outputs: ["valueChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode", "isLoading"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value"], outputs: ["searchValueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit"] }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
|
|
56920
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: QuestionbookComponent, isStandalone: true, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", isEdit: "isEdit", dropDownData: "dropDownData", dataBind: "dataBind", allIcons: "allIcons", themeColor: "themeColor", cdnIconURL: "cdnIconURL", direction: "direction", languageCode: "languageCode" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", singleFieldChangeEmit: "singleFieldChangeEmit", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, ngImport: i0, template: "<!-- 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 <ng-container *ngFor=\"let ques of questions;let i = index\">\n <div [ngStyle]=\"{ display: ques.isHidden ? 'none' : 'block' }\" [class]=\"'col-lg-' + ques.size + ' paddingnone'\" \n [id]=\"ques.id\" [style]=\"ques?.style?.questionStyle\" style=\"margin-top: 5px; margin-bottom: 5px;\">\n <!-- VD 09May24 is hide field change-->\n <div class=\"nxtInputContainer\">\n <!-- AP-28MAR25 Show label if enabled and not a Boolean type -->\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n *ngIf=\"ques.style?.showLabel ? (ques.style?.showLabel && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'RichTextArea' && ques.type !== 'DateTime' && ques.type !== 'month' && ques.type !== 'Location' && ques.type !== 'Number' &&ques.type !== 'Email' && ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label'): (ques.style?.showLabel !== false && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'DateTime' && ques.type !== 'month' && ques.type !== 'Location' && ques.type !== 'Number' && ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label')\"\n [style]=\"ques.style?.labelStyle\">\n <div style=\"gap: 5px; display: flex; align-items: center;\" [style]=\"ques.style?.labelValueStyle\"\n [ngStyle]=\"{\n 'font-family': ques.font,\n 'color': ques.color || '#212529',\n 'font-size': ques.fontSize || '14px',\n 'font-weight': ques.fontWeight || 'normal'\n }\">{{ ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText):''}}\n <div *ngIf=\"ques.isOptional && !ques.isReadOnly\" style=\"color: red;\">*</div>\n <!-- SKS13MAR25 only show on file type -->\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips help text -->\n <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips for file requirements -->\n <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n style=\"margin-left: 4px;\">i</div>\n </div>\n </div>\n <!-- calendar -->\n <div *ngIf=\"ques.type === 'Calendar'\">\n <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <!-- model used in calendar component -->\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model>\n </div>\n\n <!-- SKS11JUN25 for pick location -->\n <app-pick-location *ngIf=\"ques.type === 'Location'\" [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n\n <!-- SKS25MAR25 Image -->\n <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img *ngIf=\"ques.isReadOnly\" [src]=\"ques.imageData\" />\n <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"ques.input\">\n <img [src]=\"ques.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!ques.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(ques, $event)\" style=\"display: none;\" />\n </div>\n </div>\n </div>\n <!-- MSM10JUL25 icon-selector -->\n <nxt-icon-selector [allIcons]=\"allIcons\" *ngIf=\"ques.type === 'Icon'\" [required]=\"ques.isOptional\" [mode]=\"isEdit !== true ? 'view' : 'edit'\" [question]=\"ques\" [labelFont]=\"ques.font\"\n [label]=\" ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n [labelColor]=\"ques.color\"\n [labelSize]=\"ques.fontSize\" [labelWeight]=\"ques.fontWeight\" [showLabel]=\"ques.style?.showLabel\" (iconSelected)=\"childEventCapture($event, ques);\"></nxt-icon-selector>\n\n <!-- SKS21MAR25 line -->\n <hr *ngIf=\"ques.type === 'Line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS13MAR25 data table -->\n <nxt-datatable *ngIf=\"ques.type === 'Table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"questionBook\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\" [languageCode]=\"languageCode\"\n [tableConfig]=\"ques.tableConfig\" tableId=\"\" [direction]=\"direction\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- list -->\n <nxt-search-box *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" [value]=\"ques.input\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (searchValueChange)=\"childEventCapture($event.value,$event.question)\">\n </nxt-search-box>\n\n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <app-custom-dropdown *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n placeholder=\"---{{'SELECT' | nxtCustomTranslate : 'select'}}---\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n </app-custom-dropdown>\n <!-- // VD 02Aug24 custom-radio component -->\n <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n <app-custom-radio [options]=\"ques.options\" [question]=\"ques\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n </app-custom-radio>\n </div>\n\n <!-- Attachment / Files -->\n <app-file-upload *ngIf=\"ques.type === 'File'\" [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [allFiles]=\"ques.input\" (selectedFileData)=\"childEventCapture($event.value,$event.question)\"\n (deletedFileData)=\"deleteFile($event)\"\n ></app-file-upload>\n <!-- SKS11JUN25 Button -->\n <nxt-button\n *ngIf=\"ques.type === 'Button'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"ques?.question\"\n (buttonClickEmit)=\"childEventCapture($event, ques)\"\n >\n </nxt-button>\n <!-- SKS11JUN25 book type -->\n <lib-questionbook *ngIf=\"ques.type === 'Book'\" [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n [questions]=\"ques?.qbReferenceQuestions?.bookQuestionsMap?.[ques?.qbReference]?.subQuestions\"\n (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n <!-- SKS11JUN25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'month' || ques.type === 'Date' || ques.type === 'Time' || ques.type === 'TextArea'\"\n [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'Date' ? 'date' : ques.type === 'Time' ? 'time' : ques.type === 'TextArea' ? 'textarea' : ques.type === 'month' ? 'month' : 'text'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [value]=\"ques.input\"\n [question]=\"ques\"\n [labelFont]=\"ques.font\"\n [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n [labelColor]=\"ques.color\"\n [labelSize]=\"ques.fontSize\"\n [inputValueSize]=\"ques.fontSize\"\n [labelWeight]=\"ques.fontWeight\"\n [inputWeight]=\"ques.fontWeight\"\n [showLabel]=\"ques.style?.showLabel\"\n inputBorder=\"#ccc\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n [required]=\"ques.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"ques.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n [minDate]=\"ques.minDate\"\n [rows]=\"3\"\n [apiMeta]=\"ques.subText\"\n [direction]=\"direction\"\n (inputValue)=\"childEventCapture($event.value,$event.question, 'nxt-input')\"\n >\n </nxt-input>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'Image'\">\n <div style=\"height: 200px;\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n </div>\n\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>", 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}.col-lg-6,.col-lg-4{padding-left:5px!important;padding-right:5px!important}.form-row{display:-ms-flexbox!important;display:flex!important;-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}}.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}.custom-line{width:100%;border:1px solid #d9d9d9}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}input[type=checkbox]{width:21px}.boolean-question{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:12px}.form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"], dependencies: [{ kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "questions", "errorFieldId", "labelValue", "token", "isEdit", "dropDownData", "dataBind", "allIcons", "themeColor", "cdnIconURL", "direction", "languageCode"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: NxtFileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "mode", "isShowNoFileIcon", "question", "error", "from"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token", "mode"], outputs: ["valueChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode", "isLoading"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value"], outputs: ["searchValueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit"] }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
|
|
56896
56921
|
}
|
|
56897
56922
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuestionbookComponent, decorators: [{
|
|
56898
56923
|
type: Component,
|
|
56899
56924
|
args: [{ selector: 'lib-questionbook', standalone: true, imports: [
|
|
56900
56925
|
CommonModule,
|
|
56901
56926
|
FormsModule, ImageCropperComponent, NxtFileUploadComponent, CustomRadioComponent, CustomDropdownComponent, NxtButtonComponent, NxtSearchBox, NxtDatatable, PickLocationComponent, CustomModelComponent, CustomCalendarComponent, MatTooltipModule, NxtInput, IconSelectorComponent, NxtCustomTranslatePipe
|
|
56902
|
-
], template: "<!-- 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 <ng-container *ngFor=\"let ques of questions;let i = index\">\n <div [ngStyle]=\"{ display: ques.isHidden ? 'none' : 'block' }\" [class]=\"'col-lg-' + ques.size + ' paddingnone'\" \n [id]=\"ques.id\" [style]=\"ques?.style?.questionStyle\">\n <!-- VD 09May24 is hide field change-->\n <div class=\"nxtInputContainer\">\n <!-- AP-28MAR25 Show label if enabled and not a Boolean type -->\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n *ngIf=\"ques.style?.showLabel ? (ques.style?.showLabel && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'RichTextArea' && ques.type !== 'DateTime' && ques.type !== 'month' && ques.type !== 'Location' && ques.type !== 'Number' &&ques.type !== 'Email' && ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label'): (ques.style?.showLabel !== false && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'DateTime' && ques.type !== 'month' && ques.type !== 'Location' && ques.type !== 'Number' && ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label')\"\n [style]=\"ques.style?.labelStyle\">\n <div style=\"gap: 5px; display: flex;\" [style]=\"ques.style?.labelValueStyle\"\n [ngStyle]=\"{\n 'font-family': ques.font,\n 'color': ques.color || '#212529',\n 'font-size': ques.fontSize || '14px',\n 'font-weight': ques.fontWeight || 'normal'\n }\">{{ ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText):''}}\n <div *ngIf=\"ques.isOptional && !ques.isReadOnly\" style=\"color: red;\">*</div>\n <!-- SKS13MAR25 only show on file type -->\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips help text -->\n <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips for file requirements -->\n <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n style=\"margin-left: 4px;\">i</div>\n </div>\n </div>\n <!-- calendar -->\n <div *ngIf=\"ques.type === 'Calendar'\">\n <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <!-- model used in calendar component -->\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model>\n </div>\n\n <!-- SKS11JUN25 for pick location -->\n <app-pick-location *ngIf=\"ques.type === 'Location'\" [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n\n <!-- SKS25MAR25 Image -->\n <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img *ngIf=\"ques.isReadOnly\" [src]=\"ques.imageData\" />\n <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"ques.input\">\n <img [src]=\"ques.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!ques.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(ques, $event)\" style=\"display: none;\" />\n </div>\n </div>\n </div>\n <!-- MSM10JUL25 icon-selector -->\n <nxt-icon-selector [allIcons]=\"allIcons\" *ngIf=\"ques.type === 'Icon'\" [required]=\"ques.isOptional\" [mode]=\"isEdit !== true ? 'view' : 'edit'\" [question]=\"ques\" [labelFont]=\"ques.font\"\n [label]=\" ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n [labelColor]=\"ques.color\"\n [labelSize]=\"ques.fontSize\" [labelWeight]=\"ques.fontWeight\" [showLabel]=\"ques.style?.showLabel\" (iconSelected)=\"childEventCapture($event, ques);\"></nxt-icon-selector>\n\n <!-- SKS21MAR25 line -->\n <hr *ngIf=\"ques.type === 'Line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS13MAR25 data table -->\n <nxt-datatable *ngIf=\"ques.type === 'Table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"questionBook\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\" [languageCode]=\"languageCode\"\n [tableConfig]=\"ques.tableConfig\" tableId=\"\" [direction]=\"direction\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- list -->\n <nxt-search-box *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" [value]=\"ques.input\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (searchValueChange)=\"childEventCapture($event.value,$event.question)\">\n </nxt-search-box>\n\n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <app-custom-dropdown *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n placeholder=\"---{{'SELECT' | nxtCustomTranslate : 'select'}}---\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n </app-custom-dropdown>\n <!-- // VD 02Aug24 custom-radio component -->\n <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n <app-custom-radio [options]=\"ques.options\" [question]=\"ques\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n </app-custom-radio>\n </div>\n\n <!-- Attachment / Files -->\n <app-file-upload *ngIf=\"ques.type === 'File'\" [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [allFiles]=\"ques.input\" (selectedFileData)=\"childEventCapture($event.value,$event.question)\"\n (deletedFileData)=\"deleteFile($event)\"\n ></app-file-upload>\n <!-- SKS11JUN25 Button -->\n <nxt-button\n *ngIf=\"ques.type === 'Button'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"ques?.question\"\n (buttonClickEmit)=\"childEventCapture($event, ques)\"\n >\n </nxt-button>\n <!-- SKS11JUN25 book type -->\n <lib-questionbook *ngIf=\"ques.type === 'Book'\" [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n [questions]=\"ques?.qbReferenceQuestions?.bookQuestionsMap?.[ques?.qbReference]?.subQuestions\"\n (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n <!-- SKS11JUN25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'month' || ques.type === 'Date' || ques.type === 'Time' || ques.type === 'TextArea'\"\n [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'Date' ? 'date' : ques.type === 'Time' ? 'time' : ques.type === 'TextArea' ? 'textarea' : ques.type === 'month' ? 'month' : 'text'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [value]=\"ques.input\"\n [question]=\"ques\"\n [labelFont]=\"ques.font\"\n [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n [labelColor]=\"ques.color\"\n [labelSize]=\"ques.fontSize\"\n [inputValueSize]=\"ques.fontSize\"\n [labelWeight]=\"ques.fontWeight\"\n [inputWeight]=\"ques.fontWeight\"\n [showLabel]=\"ques.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n [inputId]=\"ques.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n [minDate]=\"ques.minDate\"\n [rows]=\"3\"\n [apiMeta]=\"ques.subText\"\n [direction]=\"direction\"\n (inputValue)=\"childEventCapture($event.value,$event.question, 'nxt-input')\"\n >\n </nxt-input>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'Image'\">\n <div style=\"height: 200px;\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n </div>\n\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>", 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}.col-lg-6,.col-lg-4{padding-left:5px!important;padding-right:5px!important}.form-row{display:-ms-flexbox!important;display:flex!important;-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}}.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}.custom-line{width:100%;border:1px solid #d9d9d9}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}input[type=checkbox]{width:21px}.boolean-question{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:12px}.form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"] }]
|
|
56927
|
+
], template: "<!-- 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 <ng-container *ngFor=\"let ques of questions;let i = index\">\n <div [ngStyle]=\"{ display: ques.isHidden ? 'none' : 'block' }\" [class]=\"'col-lg-' + ques.size + ' paddingnone'\" \n [id]=\"ques.id\" [style]=\"ques?.style?.questionStyle\" style=\"margin-top: 5px; margin-bottom: 5px;\">\n <!-- VD 09May24 is hide field change-->\n <div class=\"nxtInputContainer\">\n <!-- AP-28MAR25 Show label if enabled and not a Boolean type -->\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n *ngIf=\"ques.style?.showLabel ? (ques.style?.showLabel && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'RichTextArea' && ques.type !== 'DateTime' && ques.type !== 'month' && ques.type !== 'Location' && ques.type !== 'Number' &&ques.type !== 'Email' && ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label'): (ques.style?.showLabel !== false && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'DateTime' && ques.type !== 'month' && ques.type !== 'Location' && ques.type !== 'Number' && ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label')\"\n [style]=\"ques.style?.labelStyle\">\n <div style=\"gap: 5px; display: flex; align-items: center;\" [style]=\"ques.style?.labelValueStyle\"\n [ngStyle]=\"{\n 'font-family': ques.font,\n 'color': ques.color || '#212529',\n 'font-size': ques.fontSize || '14px',\n 'font-weight': ques.fontWeight || 'normal'\n }\">{{ ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText):''}}\n <div *ngIf=\"ques.isOptional && !ques.isReadOnly\" style=\"color: red;\">*</div>\n <!-- SKS13MAR25 only show on file type -->\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips help text -->\n <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips for file requirements -->\n <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n style=\"margin-left: 4px;\">i</div>\n </div>\n </div>\n <!-- calendar -->\n <div *ngIf=\"ques.type === 'Calendar'\">\n <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <!-- model used in calendar component -->\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model>\n </div>\n\n <!-- SKS11JUN25 for pick location -->\n <app-pick-location *ngIf=\"ques.type === 'Location'\" [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n\n <!-- SKS25MAR25 Image -->\n <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img *ngIf=\"ques.isReadOnly\" [src]=\"ques.imageData\" />\n <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"ques.input\">\n <img [src]=\"ques.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!ques.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(ques, $event)\" style=\"display: none;\" />\n </div>\n </div>\n </div>\n <!-- MSM10JUL25 icon-selector -->\n <nxt-icon-selector [allIcons]=\"allIcons\" *ngIf=\"ques.type === 'Icon'\" [required]=\"ques.isOptional\" [mode]=\"isEdit !== true ? 'view' : 'edit'\" [question]=\"ques\" [labelFont]=\"ques.font\"\n [label]=\" ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n [labelColor]=\"ques.color\"\n [labelSize]=\"ques.fontSize\" [labelWeight]=\"ques.fontWeight\" [showLabel]=\"ques.style?.showLabel\" (iconSelected)=\"childEventCapture($event, ques);\"></nxt-icon-selector>\n\n <!-- SKS21MAR25 line -->\n <hr *ngIf=\"ques.type === 'Line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS13MAR25 data table -->\n <nxt-datatable *ngIf=\"ques.type === 'Table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"questionBook\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\" [languageCode]=\"languageCode\"\n [tableConfig]=\"ques.tableConfig\" tableId=\"\" [direction]=\"direction\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- list -->\n <nxt-search-box *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" [value]=\"ques.input\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (searchValueChange)=\"childEventCapture($event.value,$event.question)\">\n </nxt-search-box>\n\n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <app-custom-dropdown *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n placeholder=\"---{{'SELECT' | nxtCustomTranslate : 'select'}}---\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n </app-custom-dropdown>\n <!-- // VD 02Aug24 custom-radio component -->\n <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n <app-custom-radio [options]=\"ques.options\" [question]=\"ques\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n </app-custom-radio>\n </div>\n\n <!-- Attachment / Files -->\n <app-file-upload *ngIf=\"ques.type === 'File'\" [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [allFiles]=\"ques.input\" (selectedFileData)=\"childEventCapture($event.value,$event.question)\"\n (deletedFileData)=\"deleteFile($event)\"\n ></app-file-upload>\n <!-- SKS11JUN25 Button -->\n <nxt-button\n *ngIf=\"ques.type === 'Button'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"ques?.question\"\n (buttonClickEmit)=\"childEventCapture($event, ques)\"\n >\n </nxt-button>\n <!-- SKS11JUN25 book type -->\n <lib-questionbook *ngIf=\"ques.type === 'Book'\" [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n [questions]=\"ques?.qbReferenceQuestions?.bookQuestionsMap?.[ques?.qbReference]?.subQuestions\"\n (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n <!-- SKS11JUN25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'month' || ques.type === 'Date' || ques.type === 'Time' || ques.type === 'TextArea'\"\n [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'Date' ? 'date' : ques.type === 'Time' ? 'time' : ques.type === 'TextArea' ? 'textarea' : ques.type === 'month' ? 'month' : 'text'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [value]=\"ques.input\"\n [question]=\"ques\"\n [labelFont]=\"ques.font\"\n [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n [labelColor]=\"ques.color\"\n [labelSize]=\"ques.fontSize\"\n [inputValueSize]=\"ques.fontSize\"\n [labelWeight]=\"ques.fontWeight\"\n [inputWeight]=\"ques.fontWeight\"\n [showLabel]=\"ques.style?.showLabel\"\n inputBorder=\"#ccc\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n [required]=\"ques.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"ques.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n [minDate]=\"ques.minDate\"\n [rows]=\"3\"\n [apiMeta]=\"ques.subText\"\n [direction]=\"direction\"\n (inputValue)=\"childEventCapture($event.value,$event.question, 'nxt-input')\"\n >\n </nxt-input>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'Image'\">\n <div style=\"height: 200px;\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n </div>\n\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>", 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}.col-lg-6,.col-lg-4{padding-left:5px!important;padding-right:5px!important}.form-row{display:-ms-flexbox!important;display:flex!important;-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}}.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}.custom-line{width:100%;border:1px solid #d9d9d9}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}input[type=checkbox]{width:21px}.boolean-question{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:12px}.form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"] }]
|
|
56903
56928
|
}], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: StorageService }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
56904
56929
|
type: Inject,
|
|
56905
56930
|
args: [DOCUMENT]
|
|
@@ -57177,9 +57202,9 @@ class BookletComponent {
|
|
|
57177
57202
|
let primaryKeyElement;
|
|
57178
57203
|
let dependentElementArray = [];
|
|
57179
57204
|
// HA 22JAN24 this change to make close event work
|
|
57180
|
-
dataToParent['action'] = action
|
|
57181
|
-
dataToParent['actionData'] = action['actionData'];
|
|
57182
|
-
if (!(action
|
|
57205
|
+
dataToParent['action'] = action?.eventtoemit;
|
|
57206
|
+
dataToParent['actionData'] = action?.['actionData'];
|
|
57207
|
+
if (!(action?.eventtoemit === 'close' || action?.eventtoemit === 'print')) {
|
|
57183
57208
|
// HA 18-JAN-24 Sending the complete json data also
|
|
57184
57209
|
dataToParent['jsonBook'] = this.storageService.get();
|
|
57185
57210
|
// HA 17JAN24 nxtId to dataParent object
|
|
@@ -57235,7 +57260,7 @@ class BookletComponent {
|
|
|
57235
57260
|
}
|
|
57236
57261
|
}
|
|
57237
57262
|
// MSM 17JUN25 - Close button event changes
|
|
57238
|
-
if (action
|
|
57263
|
+
if (action?.eventtoemit === 'close' && this.isEdit) {
|
|
57239
57264
|
this.isEdit = false;
|
|
57240
57265
|
}
|
|
57241
57266
|
// HA 23JAN24 To call the action on any event
|
|
@@ -57529,7 +57554,7 @@ const VERSION = {
|
|
|
57529
57554
|
"semver": null,
|
|
57530
57555
|
"suffix": "09440148-dirty",
|
|
57531
57556
|
"semverString": null,
|
|
57532
|
-
"version": "2.1.
|
|
57557
|
+
"version": "2.1.282"
|
|
57533
57558
|
};
|
|
57534
57559
|
/* tslint:enable */
|
|
57535
57560
|
|
|
@@ -58012,7 +58037,7 @@ class PdfDesignerService {
|
|
|
58012
58037
|
tableBody?.forEach((bodyRow) => {
|
|
58013
58038
|
if (Array.isArray(bodyRow)) {
|
|
58014
58039
|
bodyRow.forEach((rowCol) => {
|
|
58015
|
-
rowCol
|
|
58040
|
+
rowCol?.columns?.forEach((col) => {
|
|
58016
58041
|
if (Array.isArray(col)) {
|
|
58017
58042
|
col.forEach((c) => {
|
|
58018
58043
|
if (typeof c.width === 'number' && c.width < 520) {
|
|
@@ -62354,11 +62379,11 @@ class PropertiesComponent {
|
|
|
62354
62379
|
}
|
|
62355
62380
|
}
|
|
62356
62381
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PropertiesComponent, deps: [{ token: FormBuilderService }, { token: TemplateService }, { token: TranslationService }, { token: i0.ChangeDetectorRef }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
|
|
62357
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PropertiesComponent, isStandalone: true, selector: "app-properties", inputs: { templateSelected: "templateSelected", selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'attributes'}\" (click)=\"setActiveTab('attributes')\">{{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}</div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'property'}\" (click)=\"setActiveTab('property')\">{{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}</div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'appearance'}\" (click)=\"setActiveTab('appearance')\">{{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}</div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'attributes'\">\n @defer (when getProperties()) {\n <div style=\"height: 200px;\">\n @defer (when selectedElement()?.type === 'Image') {\n <image-cropper\n *ngIf=\"selectedElement().imageData\"\n [imageBase64]=\"selectedElement().orgImageData\"\n [disabled]=\"false\"\n [alignImage]=\"alignImage\"\n [roundCropper]=\"roundCropper\"\n [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\"\n [allowMoveImage]=\"false\"\n [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation()\"\n [aspectRatio]=\"aspectRatio\"\n [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\"\n [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\"\n [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\"\n [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\"\n [resetCropOnAspectRatioChange]=\"true\"\n [(cropper)]=\"cropper\"\n [(transform)]=\"transform\"\n [onlyScaleDown]=\"true\"\n output=\"blob\"\n format=\"png\"\n (imageCropped)=\"imageCropped($event)\"\n (cropperReady)=\"cropperReady($event)\"\n ></image-cropper>\n <div *ngIf=\"selectedElement().imageData\" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [ngClass]=\"{'enabled': transform().flipH}\" title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [ngClass]=\"{'enabled': transform().flipV}\" title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n </div>\n }\n <div *ngIf=\"selectedElement()?.type === 'Book'\">\n <label class=\"text-sm\">{{ 'SEARCH_BOOK' | nxtCustomTranslate : 'Search Book' }}</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box\n [question]=\"selectedElement()\"\n [apiMeta]=\"bookSubtext()\"\n [placeHolderText]=\"'SEARCH' | nxtCustomTranslate : 'Search...'\"\n (searchValueChange)=\"childEventCapture($event.value)\"\n ></nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen()\" #dropdown>\n <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().endpoint\" (ngModelChange)=\"updateBookSubtext('endpoint', $event)\" />\n <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().variable\" (ngModelChange)=\"updateBookSubtext('variable', $event)\" />\n <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString()\" (ngModelChange)=\"updateField($event)\" />\n <label>{{ 'DEFAULT_FIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().defaultField\" (ngModelChange)=\"updateBookSubtext('defaultField', $event)\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of getProperties()?.elementProps; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <ng-container *ngIf=\"prop.isTranslate && formBuilderLanguageCode && formBuilderLanguageCode !== 'en'\">\n <ng-container *ngIf=\"((selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? selectColumn() : selectedElement().id) + '.' + prop.key | nxtCustomTranslate : '' : 'formBuilder') as translated\">\n <div *ngIf=\"translated?.trim()\" class=\"translation-fallback\">\n <div style=\"font-size: 10px;\">Default (English)</div>\n <div class=\"readonly-box\" style=\"display: flex; align-items: center; gap: 8px; position: relative;\">\n \n <span>{{ translated }}</span>\n \n <!-- Copy Icon -->\n <svg *ngIf=\"!copied\"\n (click)=\"copyToClipboard(translated)\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24.00 24.00\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" transform=\"rotate(0)\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\" stroke-width=\"0.048\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"style=stroke\"> <g id=\"copy\"> <path id=\"rec (Stroke)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 5.25C6.25 2.50265 8.43733 0.25 11.1667 0.25H17.8333C20.5627 0.25 22.75 2.50265 22.75 5.25V13.75C22.75 16.4974 20.5627 18.75 17.8333 18.75C17.4191 18.75 17.0833 18.4142 17.0833 18C17.0833 17.5858 17.4191 17.25 17.8333 17.25C19.7064 17.25 21.25 15.6971 21.25 13.75V5.25C21.25 3.30293 19.7064 1.75 17.8333 1.75H11.1667C9.29363 1.75 7.75 3.30293 7.75 5.25C7.75 5.66421 7.41421 6 7 6C6.58579 6 6.25 5.66421 6.25 5.25Z\" fill=\"#000000\"></path> <path id=\"rec (Stroke)_2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.25 10.25C1.25 7.50265 3.43733 5.25 6.16667 5.25H12.8333C15.5627 5.25 17.75 7.50265 17.75 10.25V18.75C17.75 21.4974 15.5627 23.75 12.8333 23.75H6.16667C3.43733 23.75 1.25 21.4974 1.25 18.75V10.25ZM6.16667 6.75C4.29363 6.75 2.75 8.30293 2.75 10.25V18.75C2.75 20.6971 4.29363 22.25 6.16667 22.25H12.8333C14.7064 22.25 16.25 20.6971 16.25 18.75V10.25C16.25 8.30293 14.7064 6.75 12.8333 6.75H6.16667Z\" fill=\"#000000\"></path> </g> </g> </g></svg>\n \n <!-- Copied Message -->\n <span *ngIf=\"copied\" class=\"copied-msg\">Copied!</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <div *ngIf=\"prop.key === 'helpText' && selectedElement()?.helpText\">{{ selectedElement()?.helpText }}</div>\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\"\n />\n <input *ngIf=\"prop.type === 'number'\"\n type=\"number\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n />\n <select *ngIf=\"prop.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <div *ngIf=\"prop.type === 'checkbox'\">\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n </div>\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n </div>\n <div *ngIf=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <div *ngFor=\"let column of filteredColumns()\">\n <label>\n <input\n type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName, $event.target.checked)\"\n >\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns()\">\n <label>\n <input\n type=\"radio\"\n [name]=\"subProp.key\"\n [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\"\n >\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <input\n *ngIf=\"subProp.type === 'text'\"\n type=\"text\"\n [placeholder]=\"subProp.placeholder\"\n [ngModel]=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) : (selectedElement() | getValueByPath : subProp.key)) : (selectedElement() | getValueByPath : subProp.key)\"\n (ngModelChange)=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event,false, prop.isTranslate) : setValueByPath(subProp.key, $event)) : setValueByPath(subProp.key, $event, prop.isTranslate)\"\n />\n <input\n *ngIf=\"subProp.type === 'boolean'\"\n type=\"checkbox\"\n [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n />\n <select\n *ngIf=\"subProp.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? (getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, subProp.isTableColumn)) : (selectedElement() | getValueByPath : subProp.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of subProp.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <input\n *ngIf=\"subProp.type === 'checkbox'\"\n type=\"checkbox\"\n [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n />\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" [ngClass]=\"{'active': selectedElement()?.textAlign === option.value}\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\" [ngClass]=\"{'active': isStyleActive(option.value)}\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n <div *ngIf=\"prop.type === 'color'\">\n <input\n type=\"color\" style=\"width: 100%;\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n />\n </div>\n <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n <div class=\"form-header\">\n <label class=\"form-label\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <button (click)=\"addNewButton()\" class=\"add-button\">+ {{ 'ADD_BUTTON' | nxtCustomTranslate : 'Add Button' }}</button>\n </div>\n <div *ngFor=\"let btn of book()?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n <div class=\"form-group\">\n <label>{{ 'BUTTON_ID' | nxtCustomTranslate : 'Button ID' }}</label>\n <input type=\"text\" [ngModel]=\"btn.id\" (ngModelChange)=\"onButtonPropertyChange(i, 'id', $event,true)\" placeholder=\"Enter button id\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BUTTON_NAME' | nxtCustomTranslate : 'Button Name' }}</label>\n <ng-container *ngIf=\"formBuilderLanguageCode && formBuilderLanguageCode !== 'en'\">\n <ng-container *ngIf=\"(btn.id + '.name' | nxtCustomTranslate : '' : 'formBuilder') as translated\">\n <div *ngIf=\"translated?.trim()\" class=\"translation-fallback\">\n <div style=\"font-size: 10px;\">Default (English)</div>\n <div class=\"readonly-box\" style=\"display: flex; align-items: center; gap: 8px; position: relative;\">\n <span>{{ translated }}</span>\n <!-- Copy Icon -->\n <svg *ngIf=\"!copied\"\n (click)=\"copyToClipboard(translated)\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24.00 24.00\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" transform=\"rotate(0)\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\" stroke-width=\"0.048\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"style=stroke\"> <g id=\"copy\"> <path id=\"rec (Stroke)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 5.25C6.25 2.50265 8.43733 0.25 11.1667 0.25H17.8333C20.5627 0.25 22.75 2.50265 22.75 5.25V13.75C22.75 16.4974 20.5627 18.75 17.8333 18.75C17.4191 18.75 17.0833 18.4142 17.0833 18C17.0833 17.5858 17.4191 17.25 17.8333 17.25C19.7064 17.25 21.25 15.6971 21.25 13.75V5.25C21.25 3.30293 19.7064 1.75 17.8333 1.75H11.1667C9.29363 1.75 7.75 3.30293 7.75 5.25C7.75 5.66421 7.41421 6 7 6C6.58579 6 6.25 5.66421 6.25 5.25Z\" fill=\"#000000\"></path> <path id=\"rec (Stroke)_2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.25 10.25C1.25 7.50265 3.43733 5.25 6.16667 5.25H12.8333C15.5627 5.25 17.75 7.50265 17.75 10.25V18.75C17.75 21.4974 15.5627 23.75 12.8333 23.75H6.16667C3.43733 23.75 1.25 21.4974 1.25 18.75V10.25ZM6.16667 6.75C4.29363 6.75 2.75 8.30293 2.75 10.25V18.75C2.75 20.6971 4.29363 22.25 6.16667 22.25H12.8333C14.7064 22.25 16.25 20.6971 16.25 18.75V10.25C16.25 8.30293 14.7064 6.75 12.8333 6.75H6.16667Z\" fill=\"#000000\"></path> </g> </g> </g></svg>\n <!-- Copied Message -->\n <span *ngIf=\"copied\" class=\"copied-msg\">Copied!</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <input type=\"text\" [ngModel]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event,true)\" placeholder=\"Enter button name\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'EVENT_NAME' | nxtCustomTranslate : 'Event Name' }}</label>\n <input type=\"text\" [ngModel]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'ACTION_DATA' | nxtCustomTranslate : 'Action Data' }}</label>\n <input type=\"text\" [ngModel]=\"btn.actionData\" (ngModelChange)=\"onButtonPropertyChange(i, 'actionData', $event)\" placeholder=\"Event to actionData\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'ALT' | nxtCustomTranslate : 'Alt' }}</label>\n <input type=\"text\" [ngModel]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}</label>\n <input type=\"text\" [ngModel]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'METHOD' | nxtCustomTranslate : 'Method' }}</label>\n <select [ngModel]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n <option value=\"GET\">GET</option>\n <option value=\"POST\">POST</option>\n <option value=\"PUT\">PUT</option>\n <option value=\"DELETE\">DELETE</option>\n </select>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BACKGROUND_COLOR' | nxtCustomTranslate : 'Background Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_SIZE' | nxtCustomTranslate : 'Border Size' }}</label>\n <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderSize\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderSize', $event)\">\n <span>{{ btn.borderSize }}px</span>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_COLOR' | nxtCustomTranslate : 'Border Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.borderColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_RADIUS' | nxtCustomTranslate : 'Border Radius' }}</label>\n <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderRadius\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n <span>{{ btn.borderRadius }}px</span>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BUTTON_WIDTH_PX' | nxtCustomTranslate : 'Button Width (px)' }}</label>\n <input type=\"number\" [ngModel]=\"btn.width\" (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'TEXT_COLOR' | nxtCustomTranslate : 'Text Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.textColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'POSITION_PERCENT' | nxtCustomTranslate : 'Position (%)' }}</label>\n <input type=\"range\" min=\"0\" max=\"100\" [ngModel]=\"btn.positionPercent\" (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n <span>{{ btn.positionPercent }}%</span>\n </div>\n <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 {{ 'REMOVE' | nxtCustomTranslate : 'Remove' }}</button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n }\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'property'\">\n @defer (when getProperties()) {\n <div>\n <label>Label Id</label>\n <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect() ? bookId() : selectedElement()?.id }}\n </div>\n <ng-container *ngFor=\"let prop of getProperties()?.fieldProps; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isOptional')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isOptional', $event)\"\n />\n {{ 'REQUIRED' | nxtCustomTranslate : 'Required' }}\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isReadOnly')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isReadOnly', $event)\"\n />\n {{ 'READ_ONLY' | nxtCustomTranslate : 'Read Only' }}\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isHidden')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isHidden', $event)\"\n />\n {{ 'IS_HIDE' | nxtCustomTranslate : 'Is Hide' }}\n </label>\n </div>\n </div>\n <div *ngIf=\" prop.type === 'checkbox' || prop.type === 'radio' || prop.key === 'options'\" class=\"options-container\">\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key] ; let i = index\" class=\"option-items\" [attr.data-id]=\"option.id\" draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n <input type=\"text\" style=\"padding: 4px; border-radius: 2px;\" [ngModel]=\"option.value\" (ngModelChange)=\"option.value = $event\" placeholder=\"Value\" class=\"options\" />\n <input type=\"text\" style=\"padding: 4px; border-radius: 2px;\" [ngModel]=\"option.label\" (ngModelChange)=\"option.label = $event; optionTranslationUpdate(option,$event)\" placeholder=\"Label\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n <button (click)=\"addOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>{{ 'ADD' | nxtCustomTranslate : 'Add' }}</span>\n </div>\n </button>\n </div>\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\"\n />\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n <div *ngIf=\"isExpanded\" style=\"border: 1px solid #ddd; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion; trackBy: trackByProp\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <input *ngIf=\"subProp.type === 'text'\"\n type=\"text\"\n [placeholder]=\"subProp.placeholder\"\n [value]=\"getOptimizedSubPropValue(subProp)\"\n (input)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.value, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\" />\n \n <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n </div>\n </div>\n </ng-container>\n <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n <div class=\"head-elements\">{{ 'STYLE' | nxtCustomTranslate : 'Style' }}</div>\n <img [src]=\"isStyleExpanded() ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\" alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n <div *ngIf=\"isStyleExpanded()\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <div *ngFor=\"let key of getStyleKeys()\">\n <label>{{ key }}</label>\n <input\n type=\"text\"\n [value]=\"selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(),'style.' + key, true) : (selectedElement() | getValueByPath : 'style.' + key)\"\n (input)=\"(selectedElement()?.type === 'Table' && selectColumn() ) ? updateValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), 'style.' + key, $event.target.value, true) : setValueByPath('style.' + key, $event.target.value)\"\n placeholder=\"Enter {{ key }}\"\n />\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'appearance'\">\n @defer (when getProperties()) {\n <div>\n <ng-container *ngFor=\"let prop of getProperties()?.appearance; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <select\n *ngIf=\"prop.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <input\n *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n />\n\n <div class=\"flex-container\">\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input\n type=\"color\" style=\"width: 100%;\"\n [ngModel]=\"selectedElement()?.color\"\n (ngModelChange)=\"setValueByPath('color', $event, prop.isTranslate)\"\n >\n </div>\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>{{ 'HEX_CODE' | nxtCustomTranslate : 'HEX Code' }}</span>\n <input\n type=\"text\"\n [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n />\n </div>\n </div>\n <div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n <button\n type=\"button\"\n class=\"toggle-button\"\n (click)=\"duplicateField(selectedElement())\"\n >\n {{ 'ADD_DUPLICATE' | nxtCustomTranslate : 'Add Duplicate' }}\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n }\n </div>\n\n <div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">{{ 'CANCEL' | nxtCustomTranslate : 'Cancel' }}</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">{{ 'SAVE' | nxtCustomTranslate : 'Save' }}</button>\n </div>\n\n <div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n <button class=\"save-btn\" (click)=\"handleTemplateSave()\">{{ 'SAVE_TEMPLATE' | nxtCustomTranslate : 'Save Template' }}</button>\n </div>\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.container{width:100%;max-width:500px;margin:0 auto;background:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.toggle-header,.style-toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px;background:#f8f8f8;border:1px solid #ddd;border-radius:6px;margin-bottom:6px}.tabs{display:flex;background:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background:#0052cc;color:#fff;font-weight:700}.tab-content{padding:5px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;font-size:14px;font-weight:500;color:#444;margin-bottom:8px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],input[type=number],select,textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:all .3s;background:#f8f8f8}input:focus,select:focus,textarea:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}textarea{min-height:55px;resize:vertical}button,.btn{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:all .3s}button:hover,.btn:hover{background:#0056b3;transform:translateY(-2px)}.add-button{padding:8px 14px;background:#0954c5;border-radius:8px}.remove-button{background:#e74c3c;padding:6px 12px;margin-top:10px}.remove-button:hover{background:#c0392b}.cancel-btn{background:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{background:#0052cc}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;gap:10px;padding:8px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.color-picker-row,.color-picker-container{display:flex;align-items:center}.color-picker-container{border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box,.color-selector input[type=color]{width:78px;height:40px;border:none;border-radius:4px;cursor:pointer}.hex-input-container{display:flex;gap:20px;align-items:center;font-size:12px;color:#b0b0b0}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input,.hex-input-container input[type=text]{width:120px;padding:10px 12px;border:1px solid #d1d1d1;color:#28343e}.hex-label{color:#999;margin-right:5px}.select-container,.input-box-field{position:relative;width:100%}.dropdown-arrow,.input-box-field:after{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.input-box-field:after{content:\"\\25bc\";color:#1c1b1f;font-size:10px}.input-box-field select{background:#28343e;color:#fff;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.input-box-field select::-ms-expand{display:none}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}.options-container{display:flex;flex-direction:column;gap:12px}.field-size-controls,.flex-container{display:flex;align-items:center;gap:12px}.flex-container{margin-bottom:1rem}.size-input{width:110px;text-align:center}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background:#4caf50}.view-icon{background:#2196f3}.delete-icon{background:#f44336}.logo-icon{width:20px;height:20px;width:35px;display:flex;justify-content:center;background:#d0d9ff;border-radius:4px}.link-icon{background:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:all .3s}.link-icon:hover{background:#d0e5ff}.link-icon:active{background:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.option-items:active{opacity:.5}.drag-handle{cursor:grab}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background:#2c6dd5}.button-config-card{background:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.button-container{display:flex;padding:15px;background:#f9f9f9;border-top:1px solid #eee}.button-container .cancel-btn,.button-container .save-btn{flex:1;padding:12px;font-weight:700}.divider{border-top:1px dashed #ddd;margin:20px 0}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{padding:1rem;font-size:.9rem}.form-group,.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{flex-direction:column;grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}.translation-fallback label,.translation-input-group label{font-weight:500;font-size:13px;margin-bottom:4px;display:block;color:#666}.readonly-box{font-size:14px;padding:4px;border:1px solid #ddd;border-radius:5px;-webkit-user-select:text;user-select:text;cursor:text;color:#7a7a7a;margin-bottom:3px}.copied-msg{font-size:12px;color:green;opacity:0;animation:fadeInOut 1.5s ease}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-2px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i5.NgClass, i5.NgForOf, i5.NgIf, i6.NgSelectOption, i6.ɵNgSelectMultipleOption, i6.DefaultValueAccessor, i6.NumberValueAccessor, i6.RangeValueAccessor, i6.SelectControlValueAccessor, i6.NgControlStatus, i6.MinValidator, i6.NgModel, Promise.resolve().then(function () { return searchBox_component; }).then(m => m.NxtSearchBox), GetValueByPathPipe, NxtCustomTranslatePipe], () => [i5.NgClass, i5.NgIf, Promise.resolve().then(function () { return imageCropper_component; }).then(m => m.ImageCropperComponent), NxtCustomTranslatePipe], () => [i5.NgForOf, i5.NgIf, i6.DefaultValueAccessor, i6.NgControlStatus, i6.NgModel, GetValueByPathPipe, NxtCustomTranslatePipe], () => [i5.NgForOf, i5.NgIf, i6.NgSelectOption, i6.ɵNgSelectMultipleOption, i6.DefaultValueAccessor, i6.SelectControlValueAccessor, i6.NgControlStatus, i6.NgModel, GetValueByPathPipe, NxtCustomTranslatePipe]] });
|
|
62382
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PropertiesComponent, isStandalone: true, selector: "app-properties", inputs: { templateSelected: "templateSelected", selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'attributes'}\" (click)=\"setActiveTab('attributes')\">{{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}</div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'property'}\" (click)=\"setActiveTab('property')\">{{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}</div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'appearance'}\" (click)=\"setActiveTab('appearance')\">{{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}</div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'attributes'\">\n @defer (when getProperties()) {\n <div style=\"height: 200px;\">\n @defer (when selectedElement()?.type === 'Image') {\n <image-cropper\n *ngIf=\"selectedElement().imageData\"\n [imageBase64]=\"selectedElement().orgImageData\"\n [disabled]=\"false\"\n [alignImage]=\"alignImage\"\n [roundCropper]=\"roundCropper\"\n [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\"\n [allowMoveImage]=\"false\"\n [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation()\"\n [aspectRatio]=\"aspectRatio\"\n [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\"\n [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\"\n [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\"\n [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\"\n [resetCropOnAspectRatioChange]=\"true\"\n [(cropper)]=\"cropper\"\n [(transform)]=\"transform\"\n [onlyScaleDown]=\"true\"\n output=\"blob\"\n format=\"png\"\n (imageCropped)=\"imageCropped($event)\"\n (cropperReady)=\"cropperReady($event)\"\n ></image-cropper>\n <div *ngIf=\"selectedElement().imageData\" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [ngClass]=\"{'enabled': transform().flipH}\" title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [ngClass]=\"{'enabled': transform().flipV}\" title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n </div>\n }\n <div *ngIf=\"selectedElement()?.type === 'Book'\">\n <label class=\"text-sm\">{{ 'SEARCH_BOOK' | nxtCustomTranslate : 'Search Book' }}</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box\n [question]=\"selectedElement()\"\n [apiMeta]=\"bookSubtext()\"\n [placeHolderText]=\"'SEARCH' | nxtCustomTranslate : 'Search...'\"\n (searchValueChange)=\"childEventCapture($event.value)\"\n ></nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen()\" #dropdown>\n <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().endpoint\" (ngModelChange)=\"updateBookSubtext('endpoint', $event)\" />\n <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().variable\" (ngModelChange)=\"updateBookSubtext('variable', $event)\" />\n <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString()\" (ngModelChange)=\"updateField($event)\" />\n <label>{{ 'DEFAULT_FIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().defaultField\" (ngModelChange)=\"updateBookSubtext('defaultField', $event)\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of getProperties()?.elementProps; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <ng-container *ngIf=\"prop.isTranslate && formBuilderLanguageCode && formBuilderLanguageCode !== 'en'\">\n <ng-container *ngIf=\"((selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? selectColumn() : selectedElement().id) + '.' + prop.key | nxtCustomTranslate : '' : 'formBuilder') as translated\">\n <div *ngIf=\"translated?.trim()\" class=\"translation-fallback\">\n <div style=\"font-size: 10px;\">Default (English)</div>\n <div class=\"readonly-box\" style=\"display: flex; align-items: center; gap: 8px; position: relative;\">\n \n <span>{{ translated }}</span>\n \n <!-- Copy Icon -->\n <svg *ngIf=\"!copied\"\n (click)=\"copyToClipboard(translated)\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24.00 24.00\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" transform=\"rotate(0)\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\" stroke-width=\"0.048\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"style=stroke\"> <g id=\"copy\"> <path id=\"rec (Stroke)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 5.25C6.25 2.50265 8.43733 0.25 11.1667 0.25H17.8333C20.5627 0.25 22.75 2.50265 22.75 5.25V13.75C22.75 16.4974 20.5627 18.75 17.8333 18.75C17.4191 18.75 17.0833 18.4142 17.0833 18C17.0833 17.5858 17.4191 17.25 17.8333 17.25C19.7064 17.25 21.25 15.6971 21.25 13.75V5.25C21.25 3.30293 19.7064 1.75 17.8333 1.75H11.1667C9.29363 1.75 7.75 3.30293 7.75 5.25C7.75 5.66421 7.41421 6 7 6C6.58579 6 6.25 5.66421 6.25 5.25Z\" fill=\"#000000\"></path> <path id=\"rec (Stroke)_2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.25 10.25C1.25 7.50265 3.43733 5.25 6.16667 5.25H12.8333C15.5627 5.25 17.75 7.50265 17.75 10.25V18.75C17.75 21.4974 15.5627 23.75 12.8333 23.75H6.16667C3.43733 23.75 1.25 21.4974 1.25 18.75V10.25ZM6.16667 6.75C4.29363 6.75 2.75 8.30293 2.75 10.25V18.75C2.75 20.6971 4.29363 22.25 6.16667 22.25H12.8333C14.7064 22.25 16.25 20.6971 16.25 18.75V10.25C16.25 8.30293 14.7064 6.75 12.8333 6.75H6.16667Z\" fill=\"#000000\"></path> </g> </g> </g></svg>\n \n <!-- Copied Message -->\n <span *ngIf=\"copied\" class=\"copied-msg\">Copied!</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <div *ngIf=\"prop.key === 'helpText' && selectedElement()?.helpText\">{{ selectedElement()?.helpText }}</div>\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\"\n />\n <input *ngIf=\"prop.type === 'number'\"\n type=\"number\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n />\n <select *ngIf=\"prop.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <div *ngIf=\"prop.type === 'checkbox'\">\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n </div>\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n </div>\n <div *ngIf=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <div *ngFor=\"let column of filteredColumns()\">\n <label>\n <input\n type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName, $event.target.checked)\"\n >\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns()\">\n <label>\n <input\n type=\"radio\"\n [name]=\"subProp.key\"\n [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\"\n >\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <input\n *ngIf=\"subProp.type === 'text'\"\n type=\"text\"\n [placeholder]=\"subProp.placeholder\"\n [ngModel]=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) : (selectedElement() | getValueByPath : subProp.key)) : (selectedElement() | getValueByPath : subProp.key)\"\n (ngModelChange)=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event,false, prop.isTranslate) : setValueByPath(subProp.key, $event)) : setValueByPath(subProp.key, $event, prop.isTranslate)\"\n />\n <input\n *ngIf=\"subProp.type === 'boolean'\"\n type=\"checkbox\"\n [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n />\n <select\n *ngIf=\"subProp.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? (getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, subProp.isTableColumn)) : (selectedElement() | getValueByPath : subProp.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of subProp.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <input\n *ngIf=\"subProp.type === 'checkbox'\"\n type=\"checkbox\"\n [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n />\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" [ngClass]=\"{'active': selectedElement()?.textAlign === option.value}\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\" [ngClass]=\"{'active': isStyleActive(option.value)}\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n <div *ngIf=\"prop.type === 'color'\">\n <input\n type=\"color\" style=\"width: 100%;\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n />\n </div>\n <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n <div class=\"form-header\">\n <label class=\"form-label\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <button (click)=\"addNewButton()\" class=\"add-button\">+ {{ 'ADD_BUTTON' | nxtCustomTranslate : 'Add Button' }}</button>\n </div>\n <div *ngFor=\"let btn of book()?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n <div class=\"form-group\">\n <label>{{ 'BUTTON_ID' | nxtCustomTranslate : 'Button ID' }}</label>\n <input type=\"text\" [ngModel]=\"btn.id\" (ngModelChange)=\"onButtonPropertyChange(i, 'id', $event,true)\" placeholder=\"Enter button id\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BUTTON_NAME' | nxtCustomTranslate : 'Button Name' }}</label>\n <ng-container *ngIf=\"formBuilderLanguageCode && formBuilderLanguageCode !== 'en'\">\n <ng-container *ngIf=\"(btn.id + '.name' | nxtCustomTranslate : '' : 'formBuilder') as translated\">\n <div *ngIf=\"translated?.trim()\" class=\"translation-fallback\">\n <div style=\"font-size: 10px;\">Default (English)</div>\n <div class=\"readonly-box\" style=\"display: flex; align-items: center; gap: 8px; position: relative;\">\n <span>{{ translated }}</span>\n <!-- Copy Icon -->\n <svg *ngIf=\"!copied\"\n (click)=\"copyToClipboard(translated)\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24.00 24.00\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" transform=\"rotate(0)\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\" stroke-width=\"0.048\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"style=stroke\"> <g id=\"copy\"> <path id=\"rec (Stroke)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 5.25C6.25 2.50265 8.43733 0.25 11.1667 0.25H17.8333C20.5627 0.25 22.75 2.50265 22.75 5.25V13.75C22.75 16.4974 20.5627 18.75 17.8333 18.75C17.4191 18.75 17.0833 18.4142 17.0833 18C17.0833 17.5858 17.4191 17.25 17.8333 17.25C19.7064 17.25 21.25 15.6971 21.25 13.75V5.25C21.25 3.30293 19.7064 1.75 17.8333 1.75H11.1667C9.29363 1.75 7.75 3.30293 7.75 5.25C7.75 5.66421 7.41421 6 7 6C6.58579 6 6.25 5.66421 6.25 5.25Z\" fill=\"#000000\"></path> <path id=\"rec (Stroke)_2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.25 10.25C1.25 7.50265 3.43733 5.25 6.16667 5.25H12.8333C15.5627 5.25 17.75 7.50265 17.75 10.25V18.75C17.75 21.4974 15.5627 23.75 12.8333 23.75H6.16667C3.43733 23.75 1.25 21.4974 1.25 18.75V10.25ZM6.16667 6.75C4.29363 6.75 2.75 8.30293 2.75 10.25V18.75C2.75 20.6971 4.29363 22.25 6.16667 22.25H12.8333C14.7064 22.25 16.25 20.6971 16.25 18.75V10.25C16.25 8.30293 14.7064 6.75 12.8333 6.75H6.16667Z\" fill=\"#000000\"></path> </g> </g> </g></svg>\n <!-- Copied Message -->\n <span *ngIf=\"copied\" class=\"copied-msg\">Copied!</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <input type=\"text\" [ngModel]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event,true)\" placeholder=\"Enter button name\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'EVENT_NAME' | nxtCustomTranslate : 'Event Name' }}</label>\n <input type=\"text\" [ngModel]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'ACTION_DATA' | nxtCustomTranslate : 'Action Data' }}</label>\n <input type=\"text\" [ngModel]=\"btn.actionData\" (ngModelChange)=\"onButtonPropertyChange(i, 'actionData', $event)\" placeholder=\"Event to actionData\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'ALT' | nxtCustomTranslate : 'Alt' }}</label>\n <input type=\"text\" [ngModel]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}</label>\n <input type=\"text\" [ngModel]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'METHOD' | nxtCustomTranslate : 'Method' }}</label>\n <select [ngModel]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n <option value=\"GET\">GET</option>\n <option value=\"POST\">POST</option>\n <option value=\"PUT\">PUT</option>\n <option value=\"DELETE\">DELETE</option>\n </select>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BACKGROUND_COLOR' | nxtCustomTranslate : 'Background Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_SIZE' | nxtCustomTranslate : 'Border Size' }}</label>\n <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderSize\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderSize', $event)\">\n <span>{{ btn.borderSize }}px</span>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_COLOR' | nxtCustomTranslate : 'Border Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.borderColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_RADIUS' | nxtCustomTranslate : 'Border Radius' }}</label>\n <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderRadius\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n <span>{{ btn.borderRadius }}px</span>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BUTTON_WIDTH_PX' | nxtCustomTranslate : 'Button Width (px)' }}</label>\n <input type=\"number\" [ngModel]=\"btn.width\" (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'TEXT_COLOR' | nxtCustomTranslate : 'Text Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.textColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'POSITION_PERCENT' | nxtCustomTranslate : 'Position (%)' }}</label>\n <input type=\"range\" min=\"0\" max=\"100\" [ngModel]=\"btn.positionPercent\" (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n <span>{{ btn.positionPercent }}%</span>\n </div>\n <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 {{ 'REMOVE' | nxtCustomTranslate : 'Remove' }}</button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n }\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'property'\">\n @defer (when getProperties()) {\n <div>\n <label>Label Id</label>\n <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect() ? bookId() : selectedElement()?.id }}\n </div>\n <ng-container *ngFor=\"let prop of getProperties()?.fieldProps; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isOptional')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isOptional', $event)\"\n />\n {{ 'REQUIRED' | nxtCustomTranslate : 'Required' }}\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isReadOnly')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isReadOnly', $event)\"\n />\n {{ 'READ_ONLY' | nxtCustomTranslate : 'Read Only' }}\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isHidden')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isHidden', $event)\"\n />\n {{ 'IS_HIDE' | nxtCustomTranslate : 'Is Hide' }}\n </label>\n </div>\n </div>\n <div *ngIf=\" prop.type === 'checkbox' || prop.type === 'radio' || prop.key === 'options'\" class=\"options-container\">\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key] ; let i = index\" class=\"option-items\" [attr.data-id]=\"option.id\" draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n <input type=\"text\" style=\"padding: 4px; border-radius: 2px;\" [ngModel]=\"option.value\" (ngModelChange)=\"option.value = $event\" placeholder=\"Value\" class=\"options\" />\n <input type=\"text\" style=\"padding: 4px; border-radius: 2px;\" [ngModel]=\"option.label\" (ngModelChange)=\"option.label = $event; optionTranslationUpdate(option,$event)\" placeholder=\"Label\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n <button (click)=\"addOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>{{ 'ADD' | nxtCustomTranslate : 'Add' }}</span>\n </div>\n </button>\n </div>\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\"\n />\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n <div *ngIf=\"isExpanded\" style=\"border: 1px solid #ddd; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion; trackBy: trackByProp\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <input *ngIf=\"subProp.type === 'text'\"\n type=\"text\"\n [placeholder]=\"subProp.placeholder\"\n [value]=\"getOptimizedSubPropValue(subProp)\"\n (input)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.value, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\" />\n \n <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getOptimizedSubPropValue(subProp)\"\n (change)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.checked, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.checked, prop.isTranslate)\" />\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n </div>\n </div>\n </ng-container>\n <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n <div class=\"head-elements\">{{ 'STYLE' | nxtCustomTranslate : 'Style' }}</div>\n <img [src]=\"isStyleExpanded() ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\" alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n <div *ngIf=\"isStyleExpanded()\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <div *ngFor=\"let key of getStyleKeys()\">\n <label>{{ key }}</label>\n <input\n type=\"text\"\n [value]=\"selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(),'style.' + key, true) : (selectedElement() | getValueByPath : 'style.' + key)\"\n (input)=\"(selectedElement()?.type === 'Table' && selectColumn() ) ? updateValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), 'style.' + key, $event.target.value, true) : setValueByPath('style.' + key, $event.target.value)\"\n placeholder=\"Enter {{ key }}\"\n />\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'appearance'\">\n @defer (when getProperties()) {\n <div>\n <ng-container *ngFor=\"let prop of getProperties()?.appearance; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <select\n *ngIf=\"prop.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <input\n *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n />\n\n <div class=\"flex-container\">\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input\n type=\"color\" style=\"width: 100%;\"\n [ngModel]=\"selectedElement()?.color\"\n (ngModelChange)=\"setValueByPath('color', $event, prop.isTranslate)\"\n >\n </div>\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>{{ 'HEX_CODE' | nxtCustomTranslate : 'HEX Code' }}</span>\n <input\n type=\"text\"\n [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n />\n </div>\n </div>\n <div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n <button\n type=\"button\"\n class=\"toggle-button\"\n (click)=\"duplicateField(selectedElement())\"\n >\n {{ 'ADD_DUPLICATE' | nxtCustomTranslate : 'Add Duplicate' }}\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n }\n </div>\n\n <div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">{{ 'CANCEL' | nxtCustomTranslate : 'Cancel' }}</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">{{ 'SAVE' | nxtCustomTranslate : 'Save' }}</button>\n </div>\n\n <div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n <button class=\"save-btn\" (click)=\"handleTemplateSave()\">{{ 'SAVE_TEMPLATE' | nxtCustomTranslate : 'Save Template' }}</button>\n </div>\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.container{width:100%;max-width:500px;margin:0 auto;background:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.toggle-header,.style-toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px;background:#f8f8f8;border:1px solid #ddd;border-radius:6px;margin-bottom:6px}.tabs{display:flex;background:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background:#0052cc;color:#fff;font-weight:700}.tab-content{padding:5px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;font-size:14px;font-weight:500;color:#444;margin-bottom:8px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],input[type=number],select,textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:all .3s;background:#f8f8f8}input:focus,select:focus,textarea:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}textarea{min-height:55px;resize:vertical}button,.btn{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:all .3s}button:hover,.btn:hover{background:#0056b3;transform:translateY(-2px)}.add-button{padding:8px 14px;background:#0954c5;border-radius:8px}.remove-button{background:#e74c3c;padding:6px 12px;margin-top:10px}.remove-button:hover{background:#c0392b}.cancel-btn{background:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{background:#0052cc}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;gap:10px;padding:8px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.color-picker-row,.color-picker-container{display:flex;align-items:center}.color-picker-container{border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box,.color-selector input[type=color]{width:78px;height:40px;border:none;border-radius:4px;cursor:pointer}.hex-input-container{display:flex;gap:20px;align-items:center;font-size:12px;color:#b0b0b0}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input,.hex-input-container input[type=text]{width:120px;padding:10px 12px;border:1px solid #d1d1d1;color:#28343e}.hex-label{color:#999;margin-right:5px}.select-container,.input-box-field{position:relative;width:100%}.dropdown-arrow,.input-box-field:after{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.input-box-field:after{content:\"\\25bc\";color:#1c1b1f;font-size:10px}.input-box-field select{background:#28343e;color:#fff;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.input-box-field select::-ms-expand{display:none}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}.options-container{display:flex;flex-direction:column;gap:12px}.field-size-controls,.flex-container{display:flex;align-items:center;gap:12px}.flex-container{margin-bottom:1rem}.size-input{width:110px;text-align:center}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background:#4caf50}.view-icon{background:#2196f3}.delete-icon{background:#f44336}.logo-icon{width:20px;height:20px;width:35px;display:flex;justify-content:center;background:#d0d9ff;border-radius:4px}.link-icon{background:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:all .3s}.link-icon:hover{background:#d0e5ff}.link-icon:active{background:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.option-items:active{opacity:.5}.drag-handle{cursor:grab}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background:#2c6dd5}.button-config-card{background:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.button-container{display:flex;padding:15px;background:#f9f9f9;border-top:1px solid #eee}.button-container .cancel-btn,.button-container .save-btn{flex:1;padding:12px;font-weight:700}.divider{border-top:1px dashed #ddd;margin:20px 0}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{padding:1rem;font-size:.9rem}.form-group,.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{flex-direction:column;grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}.translation-fallback label,.translation-input-group label{font-weight:500;font-size:13px;margin-bottom:4px;display:block;color:#666}.readonly-box{font-size:14px;padding:4px;border:1px solid #ddd;border-radius:5px;-webkit-user-select:text;user-select:text;cursor:text;color:#7a7a7a;margin-bottom:3px}.copied-msg{font-size:12px;color:green;opacity:0;animation:fadeInOut 1.5s ease}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-2px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i5.NgClass, i5.NgForOf, i5.NgIf, i6.NgSelectOption, i6.ɵNgSelectMultipleOption, i6.DefaultValueAccessor, i6.NumberValueAccessor, i6.RangeValueAccessor, i6.SelectControlValueAccessor, i6.NgControlStatus, i6.MinValidator, i6.NgModel, Promise.resolve().then(function () { return searchBox_component; }).then(m => m.NxtSearchBox), GetValueByPathPipe, NxtCustomTranslatePipe], () => [i5.NgClass, i5.NgIf, Promise.resolve().then(function () { return imageCropper_component; }).then(m => m.ImageCropperComponent), NxtCustomTranslatePipe], () => [i5.NgForOf, i5.NgIf, i6.DefaultValueAccessor, i6.NgControlStatus, i6.NgModel, GetValueByPathPipe, NxtCustomTranslatePipe], () => [i5.NgForOf, i5.NgIf, i6.NgSelectOption, i6.ɵNgSelectMultipleOption, i6.DefaultValueAccessor, i6.SelectControlValueAccessor, i6.NgControlStatus, i6.NgModel, GetValueByPathPipe, NxtCustomTranslatePipe]] });
|
|
62358
62383
|
}
|
|
62359
62384
|
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.15", ngImport: i0, type: PropertiesComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return searchBox_component; }).then(m => m.NxtSearchBox), Promise.resolve().then(function () { return imageCropper_component; }).then(m => m.ImageCropperComponent)], resolveMetadata: (NxtSearchBox, ImageCropperComponent) => ({ decorators: [{
|
|
62360
62385
|
type: Component,
|
|
62361
|
-
args: [{ selector: 'app-properties', standalone: true, imports: [CommonModule, FormsModule, ImageCropperComponent, NxtSearchBox, NgClass, NgFor, NgIf, GetValueByPathPipe, NxtCustomTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'attributes'}\" (click)=\"setActiveTab('attributes')\">{{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}</div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'property'}\" (click)=\"setActiveTab('property')\">{{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}</div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'appearance'}\" (click)=\"setActiveTab('appearance')\">{{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}</div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'attributes'\">\n @defer (when getProperties()) {\n <div style=\"height: 200px;\">\n @defer (when selectedElement()?.type === 'Image') {\n <image-cropper\n *ngIf=\"selectedElement().imageData\"\n [imageBase64]=\"selectedElement().orgImageData\"\n [disabled]=\"false\"\n [alignImage]=\"alignImage\"\n [roundCropper]=\"roundCropper\"\n [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\"\n [allowMoveImage]=\"false\"\n [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation()\"\n [aspectRatio]=\"aspectRatio\"\n [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\"\n [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\"\n [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\"\n [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\"\n [resetCropOnAspectRatioChange]=\"true\"\n [(cropper)]=\"cropper\"\n [(transform)]=\"transform\"\n [onlyScaleDown]=\"true\"\n output=\"blob\"\n format=\"png\"\n (imageCropped)=\"imageCropped($event)\"\n (cropperReady)=\"cropperReady($event)\"\n ></image-cropper>\n <div *ngIf=\"selectedElement().imageData\" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [ngClass]=\"{'enabled': transform().flipH}\" title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [ngClass]=\"{'enabled': transform().flipV}\" title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n </div>\n }\n <div *ngIf=\"selectedElement()?.type === 'Book'\">\n <label class=\"text-sm\">{{ 'SEARCH_BOOK' | nxtCustomTranslate : 'Search Book' }}</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box\n [question]=\"selectedElement()\"\n [apiMeta]=\"bookSubtext()\"\n [placeHolderText]=\"'SEARCH' | nxtCustomTranslate : 'Search...'\"\n (searchValueChange)=\"childEventCapture($event.value)\"\n ></nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen()\" #dropdown>\n <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().endpoint\" (ngModelChange)=\"updateBookSubtext('endpoint', $event)\" />\n <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().variable\" (ngModelChange)=\"updateBookSubtext('variable', $event)\" />\n <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString()\" (ngModelChange)=\"updateField($event)\" />\n <label>{{ 'DEFAULT_FIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().defaultField\" (ngModelChange)=\"updateBookSubtext('defaultField', $event)\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of getProperties()?.elementProps; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <ng-container *ngIf=\"prop.isTranslate && formBuilderLanguageCode && formBuilderLanguageCode !== 'en'\">\n <ng-container *ngIf=\"((selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? selectColumn() : selectedElement().id) + '.' + prop.key | nxtCustomTranslate : '' : 'formBuilder') as translated\">\n <div *ngIf=\"translated?.trim()\" class=\"translation-fallback\">\n <div style=\"font-size: 10px;\">Default (English)</div>\n <div class=\"readonly-box\" style=\"display: flex; align-items: center; gap: 8px; position: relative;\">\n \n <span>{{ translated }}</span>\n \n <!-- Copy Icon -->\n <svg *ngIf=\"!copied\"\n (click)=\"copyToClipboard(translated)\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24.00 24.00\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" transform=\"rotate(0)\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\" stroke-width=\"0.048\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"style=stroke\"> <g id=\"copy\"> <path id=\"rec (Stroke)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 5.25C6.25 2.50265 8.43733 0.25 11.1667 0.25H17.8333C20.5627 0.25 22.75 2.50265 22.75 5.25V13.75C22.75 16.4974 20.5627 18.75 17.8333 18.75C17.4191 18.75 17.0833 18.4142 17.0833 18C17.0833 17.5858 17.4191 17.25 17.8333 17.25C19.7064 17.25 21.25 15.6971 21.25 13.75V5.25C21.25 3.30293 19.7064 1.75 17.8333 1.75H11.1667C9.29363 1.75 7.75 3.30293 7.75 5.25C7.75 5.66421 7.41421 6 7 6C6.58579 6 6.25 5.66421 6.25 5.25Z\" fill=\"#000000\"></path> <path id=\"rec (Stroke)_2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.25 10.25C1.25 7.50265 3.43733 5.25 6.16667 5.25H12.8333C15.5627 5.25 17.75 7.50265 17.75 10.25V18.75C17.75 21.4974 15.5627 23.75 12.8333 23.75H6.16667C3.43733 23.75 1.25 21.4974 1.25 18.75V10.25ZM6.16667 6.75C4.29363 6.75 2.75 8.30293 2.75 10.25V18.75C2.75 20.6971 4.29363 22.25 6.16667 22.25H12.8333C14.7064 22.25 16.25 20.6971 16.25 18.75V10.25C16.25 8.30293 14.7064 6.75 12.8333 6.75H6.16667Z\" fill=\"#000000\"></path> </g> </g> </g></svg>\n \n <!-- Copied Message -->\n <span *ngIf=\"copied\" class=\"copied-msg\">Copied!</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <div *ngIf=\"prop.key === 'helpText' && selectedElement()?.helpText\">{{ selectedElement()?.helpText }}</div>\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\"\n />\n <input *ngIf=\"prop.type === 'number'\"\n type=\"number\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n />\n <select *ngIf=\"prop.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <div *ngIf=\"prop.type === 'checkbox'\">\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n </div>\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n </div>\n <div *ngIf=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <div *ngFor=\"let column of filteredColumns()\">\n <label>\n <input\n type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName, $event.target.checked)\"\n >\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns()\">\n <label>\n <input\n type=\"radio\"\n [name]=\"subProp.key\"\n [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\"\n >\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <input\n *ngIf=\"subProp.type === 'text'\"\n type=\"text\"\n [placeholder]=\"subProp.placeholder\"\n [ngModel]=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) : (selectedElement() | getValueByPath : subProp.key)) : (selectedElement() | getValueByPath : subProp.key)\"\n (ngModelChange)=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event,false, prop.isTranslate) : setValueByPath(subProp.key, $event)) : setValueByPath(subProp.key, $event, prop.isTranslate)\"\n />\n <input\n *ngIf=\"subProp.type === 'boolean'\"\n type=\"checkbox\"\n [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n />\n <select\n *ngIf=\"subProp.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? (getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, subProp.isTableColumn)) : (selectedElement() | getValueByPath : subProp.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of subProp.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <input\n *ngIf=\"subProp.type === 'checkbox'\"\n type=\"checkbox\"\n [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n />\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" [ngClass]=\"{'active': selectedElement()?.textAlign === option.value}\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\" [ngClass]=\"{'active': isStyleActive(option.value)}\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n <div *ngIf=\"prop.type === 'color'\">\n <input\n type=\"color\" style=\"width: 100%;\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n />\n </div>\n <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n <div class=\"form-header\">\n <label class=\"form-label\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <button (click)=\"addNewButton()\" class=\"add-button\">+ {{ 'ADD_BUTTON' | nxtCustomTranslate : 'Add Button' }}</button>\n </div>\n <div *ngFor=\"let btn of book()?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n <div class=\"form-group\">\n <label>{{ 'BUTTON_ID' | nxtCustomTranslate : 'Button ID' }}</label>\n <input type=\"text\" [ngModel]=\"btn.id\" (ngModelChange)=\"onButtonPropertyChange(i, 'id', $event,true)\" placeholder=\"Enter button id\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BUTTON_NAME' | nxtCustomTranslate : 'Button Name' }}</label>\n <ng-container *ngIf=\"formBuilderLanguageCode && formBuilderLanguageCode !== 'en'\">\n <ng-container *ngIf=\"(btn.id + '.name' | nxtCustomTranslate : '' : 'formBuilder') as translated\">\n <div *ngIf=\"translated?.trim()\" class=\"translation-fallback\">\n <div style=\"font-size: 10px;\">Default (English)</div>\n <div class=\"readonly-box\" style=\"display: flex; align-items: center; gap: 8px; position: relative;\">\n <span>{{ translated }}</span>\n <!-- Copy Icon -->\n <svg *ngIf=\"!copied\"\n (click)=\"copyToClipboard(translated)\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24.00 24.00\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" transform=\"rotate(0)\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\" stroke-width=\"0.048\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"style=stroke\"> <g id=\"copy\"> <path id=\"rec (Stroke)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 5.25C6.25 2.50265 8.43733 0.25 11.1667 0.25H17.8333C20.5627 0.25 22.75 2.50265 22.75 5.25V13.75C22.75 16.4974 20.5627 18.75 17.8333 18.75C17.4191 18.75 17.0833 18.4142 17.0833 18C17.0833 17.5858 17.4191 17.25 17.8333 17.25C19.7064 17.25 21.25 15.6971 21.25 13.75V5.25C21.25 3.30293 19.7064 1.75 17.8333 1.75H11.1667C9.29363 1.75 7.75 3.30293 7.75 5.25C7.75 5.66421 7.41421 6 7 6C6.58579 6 6.25 5.66421 6.25 5.25Z\" fill=\"#000000\"></path> <path id=\"rec (Stroke)_2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.25 10.25C1.25 7.50265 3.43733 5.25 6.16667 5.25H12.8333C15.5627 5.25 17.75 7.50265 17.75 10.25V18.75C17.75 21.4974 15.5627 23.75 12.8333 23.75H6.16667C3.43733 23.75 1.25 21.4974 1.25 18.75V10.25ZM6.16667 6.75C4.29363 6.75 2.75 8.30293 2.75 10.25V18.75C2.75 20.6971 4.29363 22.25 6.16667 22.25H12.8333C14.7064 22.25 16.25 20.6971 16.25 18.75V10.25C16.25 8.30293 14.7064 6.75 12.8333 6.75H6.16667Z\" fill=\"#000000\"></path> </g> </g> </g></svg>\n <!-- Copied Message -->\n <span *ngIf=\"copied\" class=\"copied-msg\">Copied!</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <input type=\"text\" [ngModel]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event,true)\" placeholder=\"Enter button name\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'EVENT_NAME' | nxtCustomTranslate : 'Event Name' }}</label>\n <input type=\"text\" [ngModel]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'ACTION_DATA' | nxtCustomTranslate : 'Action Data' }}</label>\n <input type=\"text\" [ngModel]=\"btn.actionData\" (ngModelChange)=\"onButtonPropertyChange(i, 'actionData', $event)\" placeholder=\"Event to actionData\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'ALT' | nxtCustomTranslate : 'Alt' }}</label>\n <input type=\"text\" [ngModel]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}</label>\n <input type=\"text\" [ngModel]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'METHOD' | nxtCustomTranslate : 'Method' }}</label>\n <select [ngModel]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n <option value=\"GET\">GET</option>\n <option value=\"POST\">POST</option>\n <option value=\"PUT\">PUT</option>\n <option value=\"DELETE\">DELETE</option>\n </select>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BACKGROUND_COLOR' | nxtCustomTranslate : 'Background Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_SIZE' | nxtCustomTranslate : 'Border Size' }}</label>\n <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderSize\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderSize', $event)\">\n <span>{{ btn.borderSize }}px</span>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_COLOR' | nxtCustomTranslate : 'Border Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.borderColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_RADIUS' | nxtCustomTranslate : 'Border Radius' }}</label>\n <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderRadius\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n <span>{{ btn.borderRadius }}px</span>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BUTTON_WIDTH_PX' | nxtCustomTranslate : 'Button Width (px)' }}</label>\n <input type=\"number\" [ngModel]=\"btn.width\" (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'TEXT_COLOR' | nxtCustomTranslate : 'Text Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.textColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'POSITION_PERCENT' | nxtCustomTranslate : 'Position (%)' }}</label>\n <input type=\"range\" min=\"0\" max=\"100\" [ngModel]=\"btn.positionPercent\" (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n <span>{{ btn.positionPercent }}%</span>\n </div>\n <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 {{ 'REMOVE' | nxtCustomTranslate : 'Remove' }}</button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n }\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'property'\">\n @defer (when getProperties()) {\n <div>\n <label>Label Id</label>\n <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect() ? bookId() : selectedElement()?.id }}\n </div>\n <ng-container *ngFor=\"let prop of getProperties()?.fieldProps; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isOptional')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isOptional', $event)\"\n />\n {{ 'REQUIRED' | nxtCustomTranslate : 'Required' }}\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isReadOnly')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isReadOnly', $event)\"\n />\n {{ 'READ_ONLY' | nxtCustomTranslate : 'Read Only' }}\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isHidden')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isHidden', $event)\"\n />\n {{ 'IS_HIDE' | nxtCustomTranslate : 'Is Hide' }}\n </label>\n </div>\n </div>\n <div *ngIf=\" prop.type === 'checkbox' || prop.type === 'radio' || prop.key === 'options'\" class=\"options-container\">\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key] ; let i = index\" class=\"option-items\" [attr.data-id]=\"option.id\" draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n <input type=\"text\" style=\"padding: 4px; border-radius: 2px;\" [ngModel]=\"option.value\" (ngModelChange)=\"option.value = $event\" placeholder=\"Value\" class=\"options\" />\n <input type=\"text\" style=\"padding: 4px; border-radius: 2px;\" [ngModel]=\"option.label\" (ngModelChange)=\"option.label = $event; optionTranslationUpdate(option,$event)\" placeholder=\"Label\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n <button (click)=\"addOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>{{ 'ADD' | nxtCustomTranslate : 'Add' }}</span>\n </div>\n </button>\n </div>\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\"\n />\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n <div *ngIf=\"isExpanded\" style=\"border: 1px solid #ddd; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion; trackBy: trackByProp\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <input *ngIf=\"subProp.type === 'text'\"\n type=\"text\"\n [placeholder]=\"subProp.placeholder\"\n [value]=\"getOptimizedSubPropValue(subProp)\"\n (input)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.value, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\" />\n \n <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n </div>\n </div>\n </ng-container>\n <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n <div class=\"head-elements\">{{ 'STYLE' | nxtCustomTranslate : 'Style' }}</div>\n <img [src]=\"isStyleExpanded() ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\" alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n <div *ngIf=\"isStyleExpanded()\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <div *ngFor=\"let key of getStyleKeys()\">\n <label>{{ key }}</label>\n <input\n type=\"text\"\n [value]=\"selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(),'style.' + key, true) : (selectedElement() | getValueByPath : 'style.' + key)\"\n (input)=\"(selectedElement()?.type === 'Table' && selectColumn() ) ? updateValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), 'style.' + key, $event.target.value, true) : setValueByPath('style.' + key, $event.target.value)\"\n placeholder=\"Enter {{ key }}\"\n />\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'appearance'\">\n @defer (when getProperties()) {\n <div>\n <ng-container *ngFor=\"let prop of getProperties()?.appearance; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <select\n *ngIf=\"prop.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <input\n *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n />\n\n <div class=\"flex-container\">\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input\n type=\"color\" style=\"width: 100%;\"\n [ngModel]=\"selectedElement()?.color\"\n (ngModelChange)=\"setValueByPath('color', $event, prop.isTranslate)\"\n >\n </div>\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>{{ 'HEX_CODE' | nxtCustomTranslate : 'HEX Code' }}</span>\n <input\n type=\"text\"\n [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n />\n </div>\n </div>\n <div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n <button\n type=\"button\"\n class=\"toggle-button\"\n (click)=\"duplicateField(selectedElement())\"\n >\n {{ 'ADD_DUPLICATE' | nxtCustomTranslate : 'Add Duplicate' }}\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n }\n </div>\n\n <div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">{{ 'CANCEL' | nxtCustomTranslate : 'Cancel' }}</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">{{ 'SAVE' | nxtCustomTranslate : 'Save' }}</button>\n </div>\n\n <div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n <button class=\"save-btn\" (click)=\"handleTemplateSave()\">{{ 'SAVE_TEMPLATE' | nxtCustomTranslate : 'Save Template' }}</button>\n </div>\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.container{width:100%;max-width:500px;margin:0 auto;background:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.toggle-header,.style-toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px;background:#f8f8f8;border:1px solid #ddd;border-radius:6px;margin-bottom:6px}.tabs{display:flex;background:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background:#0052cc;color:#fff;font-weight:700}.tab-content{padding:5px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;font-size:14px;font-weight:500;color:#444;margin-bottom:8px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],input[type=number],select,textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:all .3s;background:#f8f8f8}input:focus,select:focus,textarea:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}textarea{min-height:55px;resize:vertical}button,.btn{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:all .3s}button:hover,.btn:hover{background:#0056b3;transform:translateY(-2px)}.add-button{padding:8px 14px;background:#0954c5;border-radius:8px}.remove-button{background:#e74c3c;padding:6px 12px;margin-top:10px}.remove-button:hover{background:#c0392b}.cancel-btn{background:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{background:#0052cc}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;gap:10px;padding:8px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.color-picker-row,.color-picker-container{display:flex;align-items:center}.color-picker-container{border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box,.color-selector input[type=color]{width:78px;height:40px;border:none;border-radius:4px;cursor:pointer}.hex-input-container{display:flex;gap:20px;align-items:center;font-size:12px;color:#b0b0b0}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input,.hex-input-container input[type=text]{width:120px;padding:10px 12px;border:1px solid #d1d1d1;color:#28343e}.hex-label{color:#999;margin-right:5px}.select-container,.input-box-field{position:relative;width:100%}.dropdown-arrow,.input-box-field:after{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.input-box-field:after{content:\"\\25bc\";color:#1c1b1f;font-size:10px}.input-box-field select{background:#28343e;color:#fff;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.input-box-field select::-ms-expand{display:none}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}.options-container{display:flex;flex-direction:column;gap:12px}.field-size-controls,.flex-container{display:flex;align-items:center;gap:12px}.flex-container{margin-bottom:1rem}.size-input{width:110px;text-align:center}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background:#4caf50}.view-icon{background:#2196f3}.delete-icon{background:#f44336}.logo-icon{width:20px;height:20px;width:35px;display:flex;justify-content:center;background:#d0d9ff;border-radius:4px}.link-icon{background:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:all .3s}.link-icon:hover{background:#d0e5ff}.link-icon:active{background:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.option-items:active{opacity:.5}.drag-handle{cursor:grab}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background:#2c6dd5}.button-config-card{background:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.button-container{display:flex;padding:15px;background:#f9f9f9;border-top:1px solid #eee}.button-container .cancel-btn,.button-container .save-btn{flex:1;padding:12px;font-weight:700}.divider{border-top:1px dashed #ddd;margin:20px 0}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{padding:1rem;font-size:.9rem}.form-group,.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{flex-direction:column;grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}.translation-fallback label,.translation-input-group label{font-weight:500;font-size:13px;margin-bottom:4px;display:block;color:#666}.readonly-box{font-size:14px;padding:4px;border:1px solid #ddd;border-radius:5px;-webkit-user-select:text;user-select:text;cursor:text;color:#7a7a7a;margin-bottom:3px}.copied-msg{font-size:12px;color:green;opacity:0;animation:fadeInOut 1.5s ease}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-2px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2px)}}\n"] }]
|
|
62386
|
+
args: [{ selector: 'app-properties', standalone: true, imports: [CommonModule, FormsModule, ImageCropperComponent, NxtSearchBox, NgClass, NgFor, NgIf, GetValueByPathPipe, NxtCustomTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'attributes'}\" (click)=\"setActiveTab('attributes')\">{{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}</div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'property'}\" (click)=\"setActiveTab('property')\">{{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}</div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'appearance'}\" (click)=\"setActiveTab('appearance')\">{{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}</div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'attributes'\">\n @defer (when getProperties()) {\n <div style=\"height: 200px;\">\n @defer (when selectedElement()?.type === 'Image') {\n <image-cropper\n *ngIf=\"selectedElement().imageData\"\n [imageBase64]=\"selectedElement().orgImageData\"\n [disabled]=\"false\"\n [alignImage]=\"alignImage\"\n [roundCropper]=\"roundCropper\"\n [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\"\n [allowMoveImage]=\"false\"\n [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation()\"\n [aspectRatio]=\"aspectRatio\"\n [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\"\n [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\"\n [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\"\n [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\"\n [resetCropOnAspectRatioChange]=\"true\"\n [(cropper)]=\"cropper\"\n [(transform)]=\"transform\"\n [onlyScaleDown]=\"true\"\n output=\"blob\"\n format=\"png\"\n (imageCropped)=\"imageCropped($event)\"\n (cropperReady)=\"cropperReady($event)\"\n ></image-cropper>\n <div *ngIf=\"selectedElement().imageData\" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [ngClass]=\"{'enabled': transform().flipH}\" title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [ngClass]=\"{'enabled': transform().flipV}\" title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n </div>\n }\n <div *ngIf=\"selectedElement()?.type === 'Book'\">\n <label class=\"text-sm\">{{ 'SEARCH_BOOK' | nxtCustomTranslate : 'Search Book' }}</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box\n [question]=\"selectedElement()\"\n [apiMeta]=\"bookSubtext()\"\n [placeHolderText]=\"'SEARCH' | nxtCustomTranslate : 'Search...'\"\n (searchValueChange)=\"childEventCapture($event.value)\"\n ></nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen()\" #dropdown>\n <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().endpoint\" (ngModelChange)=\"updateBookSubtext('endpoint', $event)\" />\n <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().variable\" (ngModelChange)=\"updateBookSubtext('variable', $event)\" />\n <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString()\" (ngModelChange)=\"updateField($event)\" />\n <label>{{ 'DEFAULT_FIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().defaultField\" (ngModelChange)=\"updateBookSubtext('defaultField', $event)\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of getProperties()?.elementProps; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <ng-container *ngIf=\"prop.isTranslate && formBuilderLanguageCode && formBuilderLanguageCode !== 'en'\">\n <ng-container *ngIf=\"((selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? selectColumn() : selectedElement().id) + '.' + prop.key | nxtCustomTranslate : '' : 'formBuilder') as translated\">\n <div *ngIf=\"translated?.trim()\" class=\"translation-fallback\">\n <div style=\"font-size: 10px;\">Default (English)</div>\n <div class=\"readonly-box\" style=\"display: flex; align-items: center; gap: 8px; position: relative;\">\n \n <span>{{ translated }}</span>\n \n <!-- Copy Icon -->\n <svg *ngIf=\"!copied\"\n (click)=\"copyToClipboard(translated)\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24.00 24.00\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" transform=\"rotate(0)\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\" stroke-width=\"0.048\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"style=stroke\"> <g id=\"copy\"> <path id=\"rec (Stroke)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 5.25C6.25 2.50265 8.43733 0.25 11.1667 0.25H17.8333C20.5627 0.25 22.75 2.50265 22.75 5.25V13.75C22.75 16.4974 20.5627 18.75 17.8333 18.75C17.4191 18.75 17.0833 18.4142 17.0833 18C17.0833 17.5858 17.4191 17.25 17.8333 17.25C19.7064 17.25 21.25 15.6971 21.25 13.75V5.25C21.25 3.30293 19.7064 1.75 17.8333 1.75H11.1667C9.29363 1.75 7.75 3.30293 7.75 5.25C7.75 5.66421 7.41421 6 7 6C6.58579 6 6.25 5.66421 6.25 5.25Z\" fill=\"#000000\"></path> <path id=\"rec (Stroke)_2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.25 10.25C1.25 7.50265 3.43733 5.25 6.16667 5.25H12.8333C15.5627 5.25 17.75 7.50265 17.75 10.25V18.75C17.75 21.4974 15.5627 23.75 12.8333 23.75H6.16667C3.43733 23.75 1.25 21.4974 1.25 18.75V10.25ZM6.16667 6.75C4.29363 6.75 2.75 8.30293 2.75 10.25V18.75C2.75 20.6971 4.29363 22.25 6.16667 22.25H12.8333C14.7064 22.25 16.25 20.6971 16.25 18.75V10.25C16.25 8.30293 14.7064 6.75 12.8333 6.75H6.16667Z\" fill=\"#000000\"></path> </g> </g> </g></svg>\n \n <!-- Copied Message -->\n <span *ngIf=\"copied\" class=\"copied-msg\">Copied!</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <div *ngIf=\"prop.key === 'helpText' && selectedElement()?.helpText\">{{ selectedElement()?.helpText }}</div>\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\"\n />\n <input *ngIf=\"prop.type === 'number'\"\n type=\"number\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n />\n <select *ngIf=\"prop.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <div *ngIf=\"prop.type === 'checkbox'\">\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n </div>\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n </div>\n <div *ngIf=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <div *ngFor=\"let column of filteredColumns()\">\n <label>\n <input\n type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName, $event.target.checked)\"\n >\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns()\">\n <label>\n <input\n type=\"radio\"\n [name]=\"subProp.key\"\n [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\"\n >\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <input\n *ngIf=\"subProp.type === 'text'\"\n type=\"text\"\n [placeholder]=\"subProp.placeholder\"\n [ngModel]=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) : (selectedElement() | getValueByPath : subProp.key)) : (selectedElement() | getValueByPath : subProp.key)\"\n (ngModelChange)=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event,false, prop.isTranslate) : setValueByPath(subProp.key, $event)) : setValueByPath(subProp.key, $event, prop.isTranslate)\"\n />\n <input\n *ngIf=\"subProp.type === 'boolean'\"\n type=\"checkbox\"\n [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n />\n <select\n *ngIf=\"subProp.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? (getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, subProp.isTableColumn)) : (selectedElement() | getValueByPath : subProp.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of subProp.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <input\n *ngIf=\"subProp.type === 'checkbox'\"\n type=\"checkbox\"\n [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n />\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" [ngClass]=\"{'active': selectedElement()?.textAlign === option.value}\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\" [ngClass]=\"{'active': isStyleActive(option.value)}\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n <div *ngIf=\"prop.type === 'color'\">\n <input\n type=\"color\" style=\"width: 100%;\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n />\n </div>\n <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n <div class=\"form-header\">\n <label class=\"form-label\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <button (click)=\"addNewButton()\" class=\"add-button\">+ {{ 'ADD_BUTTON' | nxtCustomTranslate : 'Add Button' }}</button>\n </div>\n <div *ngFor=\"let btn of book()?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n <div class=\"form-group\">\n <label>{{ 'BUTTON_ID' | nxtCustomTranslate : 'Button ID' }}</label>\n <input type=\"text\" [ngModel]=\"btn.id\" (ngModelChange)=\"onButtonPropertyChange(i, 'id', $event,true)\" placeholder=\"Enter button id\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BUTTON_NAME' | nxtCustomTranslate : 'Button Name' }}</label>\n <ng-container *ngIf=\"formBuilderLanguageCode && formBuilderLanguageCode !== 'en'\">\n <ng-container *ngIf=\"(btn.id + '.name' | nxtCustomTranslate : '' : 'formBuilder') as translated\">\n <div *ngIf=\"translated?.trim()\" class=\"translation-fallback\">\n <div style=\"font-size: 10px;\">Default (English)</div>\n <div class=\"readonly-box\" style=\"display: flex; align-items: center; gap: 8px; position: relative;\">\n <span>{{ translated }}</span>\n <!-- Copy Icon -->\n <svg *ngIf=\"!copied\"\n (click)=\"copyToClipboard(translated)\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24.00 24.00\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" transform=\"rotate(0)\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\" stroke-width=\"0.048\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"style=stroke\"> <g id=\"copy\"> <path id=\"rec (Stroke)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 5.25C6.25 2.50265 8.43733 0.25 11.1667 0.25H17.8333C20.5627 0.25 22.75 2.50265 22.75 5.25V13.75C22.75 16.4974 20.5627 18.75 17.8333 18.75C17.4191 18.75 17.0833 18.4142 17.0833 18C17.0833 17.5858 17.4191 17.25 17.8333 17.25C19.7064 17.25 21.25 15.6971 21.25 13.75V5.25C21.25 3.30293 19.7064 1.75 17.8333 1.75H11.1667C9.29363 1.75 7.75 3.30293 7.75 5.25C7.75 5.66421 7.41421 6 7 6C6.58579 6 6.25 5.66421 6.25 5.25Z\" fill=\"#000000\"></path> <path id=\"rec (Stroke)_2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.25 10.25C1.25 7.50265 3.43733 5.25 6.16667 5.25H12.8333C15.5627 5.25 17.75 7.50265 17.75 10.25V18.75C17.75 21.4974 15.5627 23.75 12.8333 23.75H6.16667C3.43733 23.75 1.25 21.4974 1.25 18.75V10.25ZM6.16667 6.75C4.29363 6.75 2.75 8.30293 2.75 10.25V18.75C2.75 20.6971 4.29363 22.25 6.16667 22.25H12.8333C14.7064 22.25 16.25 20.6971 16.25 18.75V10.25C16.25 8.30293 14.7064 6.75 12.8333 6.75H6.16667Z\" fill=\"#000000\"></path> </g> </g> </g></svg>\n <!-- Copied Message -->\n <span *ngIf=\"copied\" class=\"copied-msg\">Copied!</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <input type=\"text\" [ngModel]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event,true)\" placeholder=\"Enter button name\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'EVENT_NAME' | nxtCustomTranslate : 'Event Name' }}</label>\n <input type=\"text\" [ngModel]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'ACTION_DATA' | nxtCustomTranslate : 'Action Data' }}</label>\n <input type=\"text\" [ngModel]=\"btn.actionData\" (ngModelChange)=\"onButtonPropertyChange(i, 'actionData', $event)\" placeholder=\"Event to actionData\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'ALT' | nxtCustomTranslate : 'Alt' }}</label>\n <input type=\"text\" [ngModel]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}</label>\n <input type=\"text\" [ngModel]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'METHOD' | nxtCustomTranslate : 'Method' }}</label>\n <select [ngModel]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n <option value=\"GET\">GET</option>\n <option value=\"POST\">POST</option>\n <option value=\"PUT\">PUT</option>\n <option value=\"DELETE\">DELETE</option>\n </select>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BACKGROUND_COLOR' | nxtCustomTranslate : 'Background Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_SIZE' | nxtCustomTranslate : 'Border Size' }}</label>\n <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderSize\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderSize', $event)\">\n <span>{{ btn.borderSize }}px</span>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_COLOR' | nxtCustomTranslate : 'Border Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.borderColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_RADIUS' | nxtCustomTranslate : 'Border Radius' }}</label>\n <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderRadius\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n <span>{{ btn.borderRadius }}px</span>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BUTTON_WIDTH_PX' | nxtCustomTranslate : 'Button Width (px)' }}</label>\n <input type=\"number\" [ngModel]=\"btn.width\" (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'TEXT_COLOR' | nxtCustomTranslate : 'Text Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.textColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'POSITION_PERCENT' | nxtCustomTranslate : 'Position (%)' }}</label>\n <input type=\"range\" min=\"0\" max=\"100\" [ngModel]=\"btn.positionPercent\" (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n <span>{{ btn.positionPercent }}%</span>\n </div>\n <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 {{ 'REMOVE' | nxtCustomTranslate : 'Remove' }}</button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n }\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'property'\">\n @defer (when getProperties()) {\n <div>\n <label>Label Id</label>\n <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect() ? bookId() : selectedElement()?.id }}\n </div>\n <ng-container *ngFor=\"let prop of getProperties()?.fieldProps; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isOptional')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isOptional', $event)\"\n />\n {{ 'REQUIRED' | nxtCustomTranslate : 'Required' }}\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isReadOnly')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isReadOnly', $event)\"\n />\n {{ 'READ_ONLY' | nxtCustomTranslate : 'Read Only' }}\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isHidden')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isHidden', $event)\"\n />\n {{ 'IS_HIDE' | nxtCustomTranslate : 'Is Hide' }}\n </label>\n </div>\n </div>\n <div *ngIf=\" prop.type === 'checkbox' || prop.type === 'radio' || prop.key === 'options'\" class=\"options-container\">\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key] ; let i = index\" class=\"option-items\" [attr.data-id]=\"option.id\" draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n <input type=\"text\" style=\"padding: 4px; border-radius: 2px;\" [ngModel]=\"option.value\" (ngModelChange)=\"option.value = $event\" placeholder=\"Value\" class=\"options\" />\n <input type=\"text\" style=\"padding: 4px; border-radius: 2px;\" [ngModel]=\"option.label\" (ngModelChange)=\"option.label = $event; optionTranslationUpdate(option,$event)\" placeholder=\"Label\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n <button (click)=\"addOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>{{ 'ADD' | nxtCustomTranslate : 'Add' }}</span>\n </div>\n </button>\n </div>\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\"\n />\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n <div *ngIf=\"isExpanded\" style=\"border: 1px solid #ddd; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion; trackBy: trackByProp\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <input *ngIf=\"subProp.type === 'text'\"\n type=\"text\"\n [placeholder]=\"subProp.placeholder\"\n [value]=\"getOptimizedSubPropValue(subProp)\"\n (input)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.value, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\" />\n \n <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getOptimizedSubPropValue(subProp)\"\n (change)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.checked, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.checked, prop.isTranslate)\" />\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n </div>\n </div>\n </ng-container>\n <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n <div class=\"head-elements\">{{ 'STYLE' | nxtCustomTranslate : 'Style' }}</div>\n <img [src]=\"isStyleExpanded() ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\" alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n <div *ngIf=\"isStyleExpanded()\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <div *ngFor=\"let key of getStyleKeys()\">\n <label>{{ key }}</label>\n <input\n type=\"text\"\n [value]=\"selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(),'style.' + key, true) : (selectedElement() | getValueByPath : 'style.' + key)\"\n (input)=\"(selectedElement()?.type === 'Table' && selectColumn() ) ? updateValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), 'style.' + key, $event.target.value, true) : setValueByPath('style.' + key, $event.target.value)\"\n placeholder=\"Enter {{ key }}\"\n />\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'appearance'\">\n @defer (when getProperties()) {\n <div>\n <ng-container *ngFor=\"let prop of getProperties()?.appearance; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <select\n *ngIf=\"prop.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <input\n *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n />\n\n <div class=\"flex-container\">\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input\n type=\"color\" style=\"width: 100%;\"\n [ngModel]=\"selectedElement()?.color\"\n (ngModelChange)=\"setValueByPath('color', $event, prop.isTranslate)\"\n >\n </div>\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>{{ 'HEX_CODE' | nxtCustomTranslate : 'HEX Code' }}</span>\n <input\n type=\"text\"\n [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n />\n </div>\n </div>\n <div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n <button\n type=\"button\"\n class=\"toggle-button\"\n (click)=\"duplicateField(selectedElement())\"\n >\n {{ 'ADD_DUPLICATE' | nxtCustomTranslate : 'Add Duplicate' }}\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n }\n </div>\n\n <div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">{{ 'CANCEL' | nxtCustomTranslate : 'Cancel' }}</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">{{ 'SAVE' | nxtCustomTranslate : 'Save' }}</button>\n </div>\n\n <div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n <button class=\"save-btn\" (click)=\"handleTemplateSave()\">{{ 'SAVE_TEMPLATE' | nxtCustomTranslate : 'Save Template' }}</button>\n </div>\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.container{width:100%;max-width:500px;margin:0 auto;background:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.toggle-header,.style-toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px;background:#f8f8f8;border:1px solid #ddd;border-radius:6px;margin-bottom:6px}.tabs{display:flex;background:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background:#0052cc;color:#fff;font-weight:700}.tab-content{padding:5px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;font-size:14px;font-weight:500;color:#444;margin-bottom:8px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],input[type=number],select,textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:all .3s;background:#f8f8f8}input:focus,select:focus,textarea:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}textarea{min-height:55px;resize:vertical}button,.btn{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:all .3s}button:hover,.btn:hover{background:#0056b3;transform:translateY(-2px)}.add-button{padding:8px 14px;background:#0954c5;border-radius:8px}.remove-button{background:#e74c3c;padding:6px 12px;margin-top:10px}.remove-button:hover{background:#c0392b}.cancel-btn{background:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{background:#0052cc}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;gap:10px;padding:8px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.color-picker-row,.color-picker-container{display:flex;align-items:center}.color-picker-container{border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box,.color-selector input[type=color]{width:78px;height:40px;border:none;border-radius:4px;cursor:pointer}.hex-input-container{display:flex;gap:20px;align-items:center;font-size:12px;color:#b0b0b0}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input,.hex-input-container input[type=text]{width:120px;padding:10px 12px;border:1px solid #d1d1d1;color:#28343e}.hex-label{color:#999;margin-right:5px}.select-container,.input-box-field{position:relative;width:100%}.dropdown-arrow,.input-box-field:after{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.input-box-field:after{content:\"\\25bc\";color:#1c1b1f;font-size:10px}.input-box-field select{background:#28343e;color:#fff;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.input-box-field select::-ms-expand{display:none}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}.options-container{display:flex;flex-direction:column;gap:12px}.field-size-controls,.flex-container{display:flex;align-items:center;gap:12px}.flex-container{margin-bottom:1rem}.size-input{width:110px;text-align:center}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background:#4caf50}.view-icon{background:#2196f3}.delete-icon{background:#f44336}.logo-icon{width:20px;height:20px;width:35px;display:flex;justify-content:center;background:#d0d9ff;border-radius:4px}.link-icon{background:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:all .3s}.link-icon:hover{background:#d0e5ff}.link-icon:active{background:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.option-items:active{opacity:.5}.drag-handle{cursor:grab}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background:#2c6dd5}.button-config-card{background:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.button-container{display:flex;padding:15px;background:#f9f9f9;border-top:1px solid #eee}.button-container .cancel-btn,.button-container .save-btn{flex:1;padding:12px;font-weight:700}.divider{border-top:1px dashed #ddd;margin:20px 0}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{padding:1rem;font-size:.9rem}.form-group,.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{flex-direction:column;grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}.translation-fallback label,.translation-input-group label{font-weight:500;font-size:13px;margin-bottom:4px;display:block;color:#666}.readonly-box{font-size:14px;padding:4px;border:1px solid #ddd;border-radius:5px;-webkit-user-select:text;user-select:text;cursor:text;color:#7a7a7a;margin-bottom:3px}.copied-msg{font-size:12px;color:green;opacity:0;animation:fadeInOut 1.5s ease}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-2px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2px)}}\n"] }]
|
|
62362
62387
|
}], ctorParameters: () => [{ type: FormBuilderService }, { type: TemplateService }, { type: TranslationService }, { type: i0.ChangeDetectorRef }, { type: DataService }], propDecorators: { templateSelected: [{
|
|
62363
62388
|
type: Input
|
|
62364
62389
|
}], selectedElementType: [{
|