@rangertechnologies/ngnxt 2.1.185 → 2.1.187

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -4291,6 +4291,9 @@ class NxtInput {
     dateTimePicker;
     datePicker;
     timePicker;
+    dtPicker;
+    dPicker;
+    tPicker;
     inputRef;
     #size = 4;
     #scheduledFocus = null;
@@ -6918,6 +6921,17 @@ class NxtInput {
         this.mode = 'view'; // Switch back to view mode
         this.updateControlState(); // Update control state
     };
+    openDatePicker(type) {
+        if (type === 'datetime') {
+            this.dtPicker.open();
+        }
+        else if (type === 'date') {
+            this.dPicker.open();
+        }
+        else if (type === 'time') {
+            this.tPicker.open();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtInput, deps: [{ token: i0.ElementRef }, { token: ChangeService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NxtInput, isStandalone: true, selector: "nxt-input", inputs: { label: "label", labelFont: "labelFont", labelWeight: "labelWeight", inputWeight: "inputWeight", labelSize: "labelSize", inputValueSize: "inputValueSize", labelColor: "labelColor", showLabel: "showLabel", svgHeight: "svgHeight", svgWidth: "svgWidth", type: "type", inputIconRightSrc: "inputIconRightSrc", inputIconLeftSrc: "inputIconLeftSrc", required: "required", minLength: "minLength", pattern: "pattern", errorMessages: "errorMessages", maxLength: "maxLength", placeholder: "placeholder", inputBgColor: "inputBgColor", inputBorder: "inputBorder", placeholderColor: "placeholderColor", placeholderFont: "placeholderFont", placeholderWeight: "placeholderWeight", placeholderSize: "placeholderSize", inputTextColor: "inputTextColor", inputHeight: "inputHeight", inputWidth: "inputWidth", inputId: "inputId", inputBorderSize: "inputBorderSize", inputConfig: "inputConfig", confPassVal: "confPassVal", confPass: "confPass", mode: "mode", value: "value", question: "question", showSuggestion: "showSuggestion", ariaOwns: "ariaOwns", ariaHasPopup: "ariaHasPopup", isLoading: "isLoading", options: "options", minDate: "minDate", maxDate: "maxDate", rows: "rows", size: "size" }, outputs: { valueChange: "valueChange", inputValue: "inputValue", onBlur: "onBlur", onFocus: "onFocus", toggleEmit: "toggleEmit", clearInputEmit: "clearInputEmit", nativeInputRef: "nativeInputRef" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, providers: [
             {
@@ -6930,7 +6944,7 @@ class NxtInput {
                 useExisting: forwardRef(() => NxtInput),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "inputEls", predicate: ["inputEl"], descendants: true }, { propertyName: "dateTimePicker", predicate: ["dt"], descendants: true }, { propertyName: "datePicker", predicate: ["dt1"], descendants: true }, { propertyName: "timePicker", predicate: ["dt2"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- SKS31JAN25 -->\n<div class=\"hover-wrapper input-wrapper\" (document:click)=\"closeDropdown($event)\">\n  <div>\n    <div *ngIf=\"type === 'label' ? placeholder : label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n        'padding-top': type === 'label' ? '10px' : '',\n        'padding-bottom': type === 'label' ? '10px' : ''\n      }\" [style.font-weight]=\"labelWeight\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n      [style.color]=\"labelColor || type === 'label' ? 'black' : '#9a9a9a'\" style=\"display: flex; gap: 5px;\"> {{ type ===\n      'label' ? placeholder : label\n      }}\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' ? inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n        <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n          [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n        <!-- SKS28FEB25 mobile number input -->\n        <div class=\"phone-input-container\">\n          <div *ngIf=\"type === 'tel'\" 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=\"type === 'tel' && 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        @if(type !== 'datetime'){\n        <input *ngFor=\"let input of inputList; 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          [ngClass]=\"type === 'otp' ? 'fcOtp' : 'custom-input'\" [formControl]=\"type === 'otp' ? $any(input) : control\"\n          [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n          [style.border]=\"type === 'otp' || mode !== 'edit' ? '' : inputBorder\"\n          [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '' : inputWidth\"\n          [value]=\"type === 'tel' ? rawInputVal : value\"\n          (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\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) : 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          [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        @else if(type === 'datetime'){\n        <input #inputEl [id]=\"inputId\"\n          [owlDateTimeTrigger]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : type === 'time' ? dt3 : dt\"\n          [owlDateTime]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : type === 'time' ? dt3 : dt\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'DD/MM/YYYY HH:MM' : type === 'date' ? 'DD/MM/YYYY' : type === 'time' ? 'HH:MM' : 'DD/MM/YYYY HH:MM'\"\n          [ngClass]=\"'custom-input'\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : inputBorder\"\n          [style.height]=\"inputHeight\" [style.width]=\"inputWidth\" [value]=\"value\" (input)=\" onInputChange($event)\"\n          [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\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%;\n              padding: 10px;\n              padding-left: 5px;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\" />\n        <owl-date-time #dt></owl-date-time>\n        <owl-date-time [pickerType]=\"'calendar'\" #dt2></owl-date-time>\n        <owl-date-time [pickerType]=\"'timer'\" #dt3></owl-date-time>\n        }\n        <div *ngIf=\"mode === 'edit' && type === 'list'\" class=\"icon-container\">\n          <ng-container *ngIf=\"isLoading; else searchIcon\">\n            <!-- Minimal Dotted Loader -->\n            <div 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          </ng-container>\n          <ng-template #searchIcon>\n            <!-- Inline search icon SVG -->\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"\n              xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <circle cx=\"11\" cy=\"11\" r=\"7\" />\n              <path d=\"M20 20L17 17\" stroke-linecap=\"round\" />\n            </svg>\n          </ng-template>\n        </div>\n\n        <!-- SKS14JUN25 dropdown cancel icon -->\n        <svg  *ngIf=\"value && mode === 'edit' && type === 'dropdown'\" style=\"padding-left: 2px; margin-right: 5px;\" (click)=\"clearEmit($event)\"  width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M13.2997 0.709727C12.9097 0.319727 12.2797 0.319727 11.8897 0.709727L6.99973 5.58973L2.10973 0.699727C1.71973 0.309727 1.08973 0.309727 0.699727 0.699727C0.309727 1.08973 0.309727 1.71973 0.699727 2.10973L5.58973 6.99973L0.699727 11.8897C0.309727 12.2797 0.309727 12.9097 0.699727 13.2997C1.08973 13.6897 1.71973 13.6897 2.10973 13.2997L6.99973 8.40973L11.8897 13.2997C12.2797 13.6897 12.9097 13.6897 13.2997 13.2997C13.6897 12.9097 13.6897 12.2797 13.2997 11.8897L8.40973 6.99973L13.2997 2.10973C13.6797 1.72973 13.6797 1.08973 13.2997 0.709727Z\" fill=\"#0B0B0B\"/>\n        </svg>          \n        <!-- Always Show Dropdown Icon -->\n        <svg *ngIf=\"mode === 'edit' && type === 'dropdown'\" style=\"margin-right: 5px;\"  (mousedown)=\"toggle($event); $event.preventDefault()\"\n          xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"#292D32\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M8.46997 10.64L12 14.16L15.53 10.64\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\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        <svg *ngIf=\"mode !== 'edit' && !question.isReadOnly\" 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        <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isSaveHovered = true\" (mouseleave)=\"isSaveHovered = false\"\n          style=\"padding-right: 5px;\">\n          <svg *ngIf=\"!isSaveHovered\" width=\"12\" height=\"12\" 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=\"#837F8E\" />\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=\"#837F8E\" />\n          </svg>\n\n          <svg *ngIf=\"isSaveHovered\" (click)=\"saveChanges()\" width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.95 12.8004C9.23609 12.8004 11.9 10.1365 11.9 6.85039C11.9 3.5643 9.23609 0.900391 5.95 0.900391C2.66391 0.900391 0 3.5643 0 6.85039C0 10.1365 2.66391 12.8004 5.95 12.8004Z\"\n              fill=\"#259566\" />\n            <path\n              d=\"M8.88111 4.74622C8.83269 4.69759 8.77513 4.65899 8.71176 4.63266C8.64838 4.60633 8.58043 4.59277 8.5118 4.59277C8.44317 4.59277 8.37521 4.60633 8.31184 4.63266C8.24846 4.65899 8.19091 4.69759 8.14249 4.74622L4.8269 8.06386L3.35253 6.58949C3.30403 6.54099 3.24646 6.50252 3.18309 6.47627C3.11972 6.45003 3.05181 6.43652 2.98322 6.43652C2.91463 6.43652 2.84672 6.45003 2.78335 6.47627C2.71999 6.50252 2.66241 6.54099 2.61391 6.58949C2.56541 6.63799 2.52694 6.69557 2.50069 6.75893C2.47445 6.8223 2.46094 6.89022 2.46094 6.9588C2.46094 7.02739 2.47445 7.09531 2.50069 7.15867C2.52694 7.22204 2.56541 7.27961 2.61391 7.32811L4.45677 9.17097C4.50519 9.21961 4.56274 9.2582 4.62612 9.28453C4.6895 9.31086 4.75745 9.32442 4.82608 9.32442C4.89471 9.32442 4.96266 9.31086 5.02604 9.28453C5.08942 9.2582 5.14697 9.21961 5.19539 9.17097L8.88111 5.48484C8.92974 5.43642 8.96834 5.37887 8.99467 5.31549C9.021 5.25212 9.03456 5.18416 9.03456 5.11553C9.03456 5.0469 9.021 4.97895 8.99467 4.91557C8.96834 4.8522 8.92974 4.79465 8.88111 4.74622Z\"\n              fill=\"white\" />\n          </svg>\n        </div>\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isDiscardHovered = true\" (mouseleave)=\"isDiscardHovered = false\">\n          <svg *ngIf=\"!isDiscardHovered\" width=\"12\" height=\"12\" 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\n          <svg *ngIf=\"isDiscardHovered\" (click)=\"discardChanges()\" width=\"12\" height=\"13\" viewBox=\"0 0 12 13\"\n            fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M7.05555 4.97471L5.94 6.09026L4.82445 4.97471C4.57861 4.72887 4.18191 4.72887 3.93607 4.97471C3.69023 5.22055 3.69023 5.61725 3.93607 5.86309L5.05162 6.97864L3.93607 8.09419C3.69023 8.34003 3.69023 8.73673 3.93607 8.98257C4.18191 9.22841 4.57861 9.22841 4.82445 8.98257L5.94 7.86702L7.05555 8.98257C7.30139 9.22841 7.69809 9.22841 7.94393 8.98257C8.18977 8.73673 8.18977 8.34003 7.94393 8.09419L6.82838 6.97864L7.94393 5.86309C8.18977 5.61725 8.18977 5.22055 7.94393 4.97471C7.69809 4.73873 7.30021 4.73873 7.05555 4.97471ZM5.94 1.06062C2.70017 1.06062 0.0808594 3.67993 0.0808594 6.91977C0.0808594 10.1596 2.70017 12.7789 5.94 12.7789C9.17983 12.7789 11.7991 10.1596 11.7991 6.91977C11.7991 3.67993 9.17983 1.06062 5.94 1.06062ZM5.94 11.6153C3.35426 11.6153 1.24422 9.50525 1.24422 6.91977C1.24422 4.33412 3.35426 2.22408 5.94 2.22408C8.52558 2.22408 10.6356 4.33412 10.6356 6.91977C10.6356 9.50525 8.52558 11.6153 5.94 11.6153Z\"\n              fill=\"#FF3636\" />\n          </svg>\n        </div>\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;\"> {{ label }}\n        <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n      </label>\n    </div>\n    <div style=\"display: flex;\">\n      <div class=\"input-container\" [ngClass]=\"{'checkbox-padding': type === 'checkbox' || type === 'otp'}\"\n        [style.backgroundColor]=\"mode === 'edit' ? inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n        <!-- SKS14JUN25  Dynamically load Quill editor toolbar -->\n        <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" [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=\"width: 100%;\n          padding: 10px 10px 10px 5px;\n          border-radius: 5px;\n          border: none;\n          font-size: 14px;\">\n        </quill-editor>\n        <!-- View mode -->\n        <div *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content\" [innerHTML]=\"value\"\n        style=\"width: 100%;\n        padding: 10px 10px 10px 5px;\n        border-radius: 5px;\n        border: none;\n        font-size: 14px;\">\n        </div>\n        <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"rows\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder\" [ngClass]=\"'custom-input'\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : inputBorder\"\n          [style.height]=\"inputHeight\" [style.width]=\"inputWidth\" [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          }\" style=\"\n              width: 100%;\n              padding: 10px;\n              padding-left: 5px;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\">\n          </textarea>\n        <svg *ngIf=\"mode !== 'edit' && !viewEdit && (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' && 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=date].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}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.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}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:10px}.input-container .icon-container{right:15px;pointer-events:none;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{padding:0!important;width:auto!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}: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{border:none;padding:0;font-size:14px;line-height:1.6;color:#333;overflow:hidden}.quill-view-content *{max-width:100%;box-sizing:border-box;word-wrap:break-word}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled{color:#999!important;cursor:not-allowed!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: OwlDateTimeModule }, { kind: "directive", type: i5$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i5$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i5$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }, { kind: "ngmodule", type: OwlNativeDateTimeModule }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "dtPicker", first: true, predicate: ["dt"], descendants: true }, { propertyName: "dPicker", first: true, predicate: ["dt2"], descendants: true }, { propertyName: "tPicker", first: true, predicate: ["dt3"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "inputEls", predicate: ["inputEl"], descendants: true }, { propertyName: "dateTimePicker", predicate: ["dt"], descendants: true }, { propertyName: "datePicker", predicate: ["dt1"], descendants: true }, { propertyName: "timePicker", predicate: ["dt2"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- SKS31JAN25 -->\n<div class=\"hover-wrapper input-wrapper\" (document:click)=\"closeDropdown($event)\">\n  <div>\n    <div *ngIf=\"type === 'label' ? placeholder : label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n        'padding-top': type === 'label' ? '10px' : '',\n        'padding-bottom': type === 'label' ? '10px' : ''\n      }\" [style.font-weight]=\"labelWeight\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n      [style.color]=\"labelColor || type === 'label' ? 'black' : '#9a9a9a'\" style=\"display: flex; gap: 5px;\"> {{ type ===\n      'label' ? placeholder : label\n      }}\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' ? inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n        <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n          [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n        <!-- SKS28FEB25 mobile number input -->\n        <div class=\"phone-input-container\">\n          <div *ngIf=\"type === 'tel'\" 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=\"type === 'tel' && 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        @if(type !== 'datetime' && type !== 'date' && type !== 'time'){\n        <input *ngFor=\"let input of inputList; 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          [ngClass]=\"type === 'otp' ? 'fcOtp' : 'custom-input'\" [formControl]=\"type === 'otp' ? $any(input) : control\"\n          [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n          [style.border]=\"type === 'otp' || mode !== 'edit' ? '' : inputBorder\"\n          [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '' : inputWidth\"\n          [value]=\"type === 'tel' ? rawInputVal : value\"\n          (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\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) : 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          [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        @else if(type === 'datetime' || type === 'date' || type === 'time'){\n        <input #inputEl [id]=\"inputId\"\n          [owlDateTimeTrigger]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : type === 'time' ? dt3 : dt\"\n          [owlDateTime]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : type === 'time' ? dt3 : dt\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'DD/MM/YYYY HH:MM' : type === 'date' ? 'DD/MM/YYYY' : type === 'time' ? 'HH:MM' : 'DD/MM/YYYY HH:MM'\"\n          [ngClass]=\"'custom-input'\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : inputBorder\"\n          [style.height]=\"inputHeight\" [style.width]=\"inputWidth\" [value]=\"value\" (input)=\" onInputChange($event)\"\n          [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\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%;\n              padding: 10px;\n              padding-left: 5px;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\" />\n        <owl-date-time #dt></owl-date-time>\n        <owl-date-time [pickerType]=\"'calendar'\" #dt2></owl-date-time>\n        <owl-date-time [pickerType]=\"'timer'\" #dt3></owl-date-time>\n        }\n        <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date' || type === 'time')\" class=\"icon-container\" (click)=\"openDatePicker(type)\"\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=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 9.98254H12.3392\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 9.98254H9.01103\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 9.98254H5.67509\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 12.8976H12.3392\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 12.8976H9.01103\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 12.8976H5.67509\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.0329 1.5V3.96809\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.97435 1.5V3.96809\" stroke=\"#292D32\" 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=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div *ngIf=\"mode === 'edit' && type === 'list'\" class=\"icon-container\">\n          <ng-container *ngIf=\"isLoading; else searchIcon\">\n            <!-- Minimal Dotted Loader -->\n            <div 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          </ng-container>\n          <ng-template #searchIcon>\n            <!-- Inline search icon SVG -->\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"\n              xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <circle cx=\"11\" cy=\"11\" r=\"7\" />\n              <path d=\"M20 20L17 17\" stroke-linecap=\"round\" />\n            </svg>\n          </ng-template>\n        </div>\n\n        <!-- SKS14JUN25 dropdown cancel icon -->\n        <svg  *ngIf=\"value && mode === 'edit' && type === 'dropdown'\" style=\"padding-left: 2px; margin-right: 5px;\" (click)=\"clearEmit($event)\"  width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M13.2997 0.709727C12.9097 0.319727 12.2797 0.319727 11.8897 0.709727L6.99973 5.58973L2.10973 0.699727C1.71973 0.309727 1.08973 0.309727 0.699727 0.699727C0.309727 1.08973 0.309727 1.71973 0.699727 2.10973L5.58973 6.99973L0.699727 11.8897C0.309727 12.2797 0.309727 12.9097 0.699727 13.2997C1.08973 13.6897 1.71973 13.6897 2.10973 13.2997L6.99973 8.40973L11.8897 13.2997C12.2797 13.6897 12.9097 13.6897 13.2997 13.2997C13.6897 12.9097 13.6897 12.2797 13.2997 11.8897L8.40973 6.99973L13.2997 2.10973C13.6797 1.72973 13.6797 1.08973 13.2997 0.709727Z\" fill=\"#0B0B0B\"/>\n        </svg>          \n        <!-- Always Show Dropdown Icon -->\n        <svg *ngIf=\"mode === 'edit' && type === 'dropdown'\" style=\"margin-right: 5px;\"  (mousedown)=\"toggle($event); $event.preventDefault()\"\n          xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"#292D32\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M8.46997 10.64L12 14.16L15.53 10.64\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\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        <svg *ngIf=\"mode !== 'edit' && !question.isReadOnly\" 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        <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isSaveHovered = true\" (mouseleave)=\"isSaveHovered = false\"\n          style=\"padding-right: 5px;\">\n          <svg *ngIf=\"!isSaveHovered\" width=\"12\" height=\"12\" 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=\"#837F8E\" />\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=\"#837F8E\" />\n          </svg>\n\n          <svg *ngIf=\"isSaveHovered\" (click)=\"saveChanges()\" width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.95 12.8004C9.23609 12.8004 11.9 10.1365 11.9 6.85039C11.9 3.5643 9.23609 0.900391 5.95 0.900391C2.66391 0.900391 0 3.5643 0 6.85039C0 10.1365 2.66391 12.8004 5.95 12.8004Z\"\n              fill=\"#259566\" />\n            <path\n              d=\"M8.88111 4.74622C8.83269 4.69759 8.77513 4.65899 8.71176 4.63266C8.64838 4.60633 8.58043 4.59277 8.5118 4.59277C8.44317 4.59277 8.37521 4.60633 8.31184 4.63266C8.24846 4.65899 8.19091 4.69759 8.14249 4.74622L4.8269 8.06386L3.35253 6.58949C3.30403 6.54099 3.24646 6.50252 3.18309 6.47627C3.11972 6.45003 3.05181 6.43652 2.98322 6.43652C2.91463 6.43652 2.84672 6.45003 2.78335 6.47627C2.71999 6.50252 2.66241 6.54099 2.61391 6.58949C2.56541 6.63799 2.52694 6.69557 2.50069 6.75893C2.47445 6.8223 2.46094 6.89022 2.46094 6.9588C2.46094 7.02739 2.47445 7.09531 2.50069 7.15867C2.52694 7.22204 2.56541 7.27961 2.61391 7.32811L4.45677 9.17097C4.50519 9.21961 4.56274 9.2582 4.62612 9.28453C4.6895 9.31086 4.75745 9.32442 4.82608 9.32442C4.89471 9.32442 4.96266 9.31086 5.02604 9.28453C5.08942 9.2582 5.14697 9.21961 5.19539 9.17097L8.88111 5.48484C8.92974 5.43642 8.96834 5.37887 8.99467 5.31549C9.021 5.25212 9.03456 5.18416 9.03456 5.11553C9.03456 5.0469 9.021 4.97895 8.99467 4.91557C8.96834 4.8522 8.92974 4.79465 8.88111 4.74622Z\"\n              fill=\"white\" />\n          </svg>\n        </div>\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isDiscardHovered = true\" (mouseleave)=\"isDiscardHovered = false\">\n          <svg *ngIf=\"!isDiscardHovered\" width=\"12\" height=\"12\" 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\n          <svg *ngIf=\"isDiscardHovered\" (click)=\"discardChanges()\" width=\"12\" height=\"13\" viewBox=\"0 0 12 13\"\n            fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M7.05555 4.97471L5.94 6.09026L4.82445 4.97471C4.57861 4.72887 4.18191 4.72887 3.93607 4.97471C3.69023 5.22055 3.69023 5.61725 3.93607 5.86309L5.05162 6.97864L3.93607 8.09419C3.69023 8.34003 3.69023 8.73673 3.93607 8.98257C4.18191 9.22841 4.57861 9.22841 4.82445 8.98257L5.94 7.86702L7.05555 8.98257C7.30139 9.22841 7.69809 9.22841 7.94393 8.98257C8.18977 8.73673 8.18977 8.34003 7.94393 8.09419L6.82838 6.97864L7.94393 5.86309C8.18977 5.61725 8.18977 5.22055 7.94393 4.97471C7.69809 4.73873 7.30021 4.73873 7.05555 4.97471ZM5.94 1.06062C2.70017 1.06062 0.0808594 3.67993 0.0808594 6.91977C0.0808594 10.1596 2.70017 12.7789 5.94 12.7789C9.17983 12.7789 11.7991 10.1596 11.7991 6.91977C11.7991 3.67993 9.17983 1.06062 5.94 1.06062ZM5.94 11.6153C3.35426 11.6153 1.24422 9.50525 1.24422 6.91977C1.24422 4.33412 3.35426 2.22408 5.94 2.22408C8.52558 2.22408 10.6356 4.33412 10.6356 6.91977C10.6356 9.50525 8.52558 11.6153 5.94 11.6153Z\"\n              fill=\"#FF3636\" />\n          </svg>\n        </div>\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;\"> {{ label }}\n        <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n      </label>\n    </div>\n    <div style=\"display: flex;\">\n      <div class=\"input-container\" [ngClass]=\"{'checkbox-padding': type === 'checkbox' || type === 'otp'}\"\n        [style.backgroundColor]=\"mode === 'edit' ? inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n        <!-- SKS14JUN25  Dynamically load Quill editor toolbar -->\n        <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" [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=\"width: 100%;\n          padding: 10px 10px 10px 5px;\n          border-radius: 5px;\n          border: none;\n          font-size: 14px;\">\n        </quill-editor>\n        <!-- View mode -->\n        <div *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content\" [innerHTML]=\"value\"\n        style=\"width: 100%;\n        padding: 10px 10px 10px 5px;\n        border-radius: 5px;\n        border: none;\n        font-size: 14px;\">\n        </div>\n        <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"rows\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder\" [ngClass]=\"'custom-input'\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : inputBorder\"\n          [style.height]=\"inputHeight\" [style.width]=\"inputWidth\" [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          }\" style=\"\n              width: 100%;\n              padding: 10px;\n              padding-left: 5px;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\">\n          </textarea>\n        <svg *ngIf=\"mode !== 'edit' && !viewEdit && (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' && 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=date].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}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.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}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:10px}.input-container .icon-container{right:15px;pointer-events:none;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{padding:0!important;width:auto!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}: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{border:none;padding:0;font-size:14px;line-height:1.6;color:#333;overflow:hidden}.quill-view-content *{max-width:100%;box-sizing:border-box;word-wrap:break-word}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled{color:#999!important;cursor:not-allowed!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: OwlDateTimeModule }, { kind: "directive", type: i5$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i5$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i5$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }, { kind: "ngmodule", type: OwlNativeDateTimeModule }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtInput, decorators: [{
             type: Component,
@@ -6945,7 +6959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => NxtInput),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- SKS31JAN25 -->\n<div class=\"hover-wrapper input-wrapper\" (document:click)=\"closeDropdown($event)\">\n  <div>\n    <div *ngIf=\"type === 'label' ? placeholder : label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n        'padding-top': type === 'label' ? '10px' : '',\n        'padding-bottom': type === 'label' ? '10px' : ''\n      }\" [style.font-weight]=\"labelWeight\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n      [style.color]=\"labelColor || type === 'label' ? 'black' : '#9a9a9a'\" style=\"display: flex; gap: 5px;\"> {{ type ===\n      'label' ? placeholder : label\n      }}\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' ? inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n        <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n          [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n        <!-- SKS28FEB25 mobile number input -->\n        <div class=\"phone-input-container\">\n          <div *ngIf=\"type === 'tel'\" 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=\"type === 'tel' && 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        @if(type !== 'datetime'){\n        <input *ngFor=\"let input of inputList; 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          [ngClass]=\"type === 'otp' ? 'fcOtp' : 'custom-input'\" [formControl]=\"type === 'otp' ? $any(input) : control\"\n          [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n          [style.border]=\"type === 'otp' || mode !== 'edit' ? '' : inputBorder\"\n          [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '' : inputWidth\"\n          [value]=\"type === 'tel' ? rawInputVal : value\"\n          (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\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) : 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          [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        @else if(type === 'datetime'){\n        <input #inputEl [id]=\"inputId\"\n          [owlDateTimeTrigger]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : type === 'time' ? dt3 : dt\"\n          [owlDateTime]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : type === 'time' ? dt3 : dt\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'DD/MM/YYYY HH:MM' : type === 'date' ? 'DD/MM/YYYY' : type === 'time' ? 'HH:MM' : 'DD/MM/YYYY HH:MM'\"\n          [ngClass]=\"'custom-input'\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : inputBorder\"\n          [style.height]=\"inputHeight\" [style.width]=\"inputWidth\" [value]=\"value\" (input)=\" onInputChange($event)\"\n          [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\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%;\n              padding: 10px;\n              padding-left: 5px;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\" />\n        <owl-date-time #dt></owl-date-time>\n        <owl-date-time [pickerType]=\"'calendar'\" #dt2></owl-date-time>\n        <owl-date-time [pickerType]=\"'timer'\" #dt3></owl-date-time>\n        }\n        <div *ngIf=\"mode === 'edit' && type === 'list'\" class=\"icon-container\">\n          <ng-container *ngIf=\"isLoading; else searchIcon\">\n            <!-- Minimal Dotted Loader -->\n            <div 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          </ng-container>\n          <ng-template #searchIcon>\n            <!-- Inline search icon SVG -->\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"\n              xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <circle cx=\"11\" cy=\"11\" r=\"7\" />\n              <path d=\"M20 20L17 17\" stroke-linecap=\"round\" />\n            </svg>\n          </ng-template>\n        </div>\n\n        <!-- SKS14JUN25 dropdown cancel icon -->\n        <svg  *ngIf=\"value && mode === 'edit' && type === 'dropdown'\" style=\"padding-left: 2px; margin-right: 5px;\" (click)=\"clearEmit($event)\"  width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M13.2997 0.709727C12.9097 0.319727 12.2797 0.319727 11.8897 0.709727L6.99973 5.58973L2.10973 0.699727C1.71973 0.309727 1.08973 0.309727 0.699727 0.699727C0.309727 1.08973 0.309727 1.71973 0.699727 2.10973L5.58973 6.99973L0.699727 11.8897C0.309727 12.2797 0.309727 12.9097 0.699727 13.2997C1.08973 13.6897 1.71973 13.6897 2.10973 13.2997L6.99973 8.40973L11.8897 13.2997C12.2797 13.6897 12.9097 13.6897 13.2997 13.2997C13.6897 12.9097 13.6897 12.2797 13.2997 11.8897L8.40973 6.99973L13.2997 2.10973C13.6797 1.72973 13.6797 1.08973 13.2997 0.709727Z\" fill=\"#0B0B0B\"/>\n        </svg>          \n        <!-- Always Show Dropdown Icon -->\n        <svg *ngIf=\"mode === 'edit' && type === 'dropdown'\" style=\"margin-right: 5px;\"  (mousedown)=\"toggle($event); $event.preventDefault()\"\n          xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"#292D32\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M8.46997 10.64L12 14.16L15.53 10.64\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\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        <svg *ngIf=\"mode !== 'edit' && !question.isReadOnly\" 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        <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isSaveHovered = true\" (mouseleave)=\"isSaveHovered = false\"\n          style=\"padding-right: 5px;\">\n          <svg *ngIf=\"!isSaveHovered\" width=\"12\" height=\"12\" 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=\"#837F8E\" />\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=\"#837F8E\" />\n          </svg>\n\n          <svg *ngIf=\"isSaveHovered\" (click)=\"saveChanges()\" width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.95 12.8004C9.23609 12.8004 11.9 10.1365 11.9 6.85039C11.9 3.5643 9.23609 0.900391 5.95 0.900391C2.66391 0.900391 0 3.5643 0 6.85039C0 10.1365 2.66391 12.8004 5.95 12.8004Z\"\n              fill=\"#259566\" />\n            <path\n              d=\"M8.88111 4.74622C8.83269 4.69759 8.77513 4.65899 8.71176 4.63266C8.64838 4.60633 8.58043 4.59277 8.5118 4.59277C8.44317 4.59277 8.37521 4.60633 8.31184 4.63266C8.24846 4.65899 8.19091 4.69759 8.14249 4.74622L4.8269 8.06386L3.35253 6.58949C3.30403 6.54099 3.24646 6.50252 3.18309 6.47627C3.11972 6.45003 3.05181 6.43652 2.98322 6.43652C2.91463 6.43652 2.84672 6.45003 2.78335 6.47627C2.71999 6.50252 2.66241 6.54099 2.61391 6.58949C2.56541 6.63799 2.52694 6.69557 2.50069 6.75893C2.47445 6.8223 2.46094 6.89022 2.46094 6.9588C2.46094 7.02739 2.47445 7.09531 2.50069 7.15867C2.52694 7.22204 2.56541 7.27961 2.61391 7.32811L4.45677 9.17097C4.50519 9.21961 4.56274 9.2582 4.62612 9.28453C4.6895 9.31086 4.75745 9.32442 4.82608 9.32442C4.89471 9.32442 4.96266 9.31086 5.02604 9.28453C5.08942 9.2582 5.14697 9.21961 5.19539 9.17097L8.88111 5.48484C8.92974 5.43642 8.96834 5.37887 8.99467 5.31549C9.021 5.25212 9.03456 5.18416 9.03456 5.11553C9.03456 5.0469 9.021 4.97895 8.99467 4.91557C8.96834 4.8522 8.92974 4.79465 8.88111 4.74622Z\"\n              fill=\"white\" />\n          </svg>\n        </div>\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isDiscardHovered = true\" (mouseleave)=\"isDiscardHovered = false\">\n          <svg *ngIf=\"!isDiscardHovered\" width=\"12\" height=\"12\" 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\n          <svg *ngIf=\"isDiscardHovered\" (click)=\"discardChanges()\" width=\"12\" height=\"13\" viewBox=\"0 0 12 13\"\n            fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M7.05555 4.97471L5.94 6.09026L4.82445 4.97471C4.57861 4.72887 4.18191 4.72887 3.93607 4.97471C3.69023 5.22055 3.69023 5.61725 3.93607 5.86309L5.05162 6.97864L3.93607 8.09419C3.69023 8.34003 3.69023 8.73673 3.93607 8.98257C4.18191 9.22841 4.57861 9.22841 4.82445 8.98257L5.94 7.86702L7.05555 8.98257C7.30139 9.22841 7.69809 9.22841 7.94393 8.98257C8.18977 8.73673 8.18977 8.34003 7.94393 8.09419L6.82838 6.97864L7.94393 5.86309C8.18977 5.61725 8.18977 5.22055 7.94393 4.97471C7.69809 4.73873 7.30021 4.73873 7.05555 4.97471ZM5.94 1.06062C2.70017 1.06062 0.0808594 3.67993 0.0808594 6.91977C0.0808594 10.1596 2.70017 12.7789 5.94 12.7789C9.17983 12.7789 11.7991 10.1596 11.7991 6.91977C11.7991 3.67993 9.17983 1.06062 5.94 1.06062ZM5.94 11.6153C3.35426 11.6153 1.24422 9.50525 1.24422 6.91977C1.24422 4.33412 3.35426 2.22408 5.94 2.22408C8.52558 2.22408 10.6356 4.33412 10.6356 6.91977C10.6356 9.50525 8.52558 11.6153 5.94 11.6153Z\"\n              fill=\"#FF3636\" />\n          </svg>\n        </div>\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;\"> {{ label }}\n        <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n      </label>\n    </div>\n    <div style=\"display: flex;\">\n      <div class=\"input-container\" [ngClass]=\"{'checkbox-padding': type === 'checkbox' || type === 'otp'}\"\n        [style.backgroundColor]=\"mode === 'edit' ? inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n        <!-- SKS14JUN25  Dynamically load Quill editor toolbar -->\n        <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" [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=\"width: 100%;\n          padding: 10px 10px 10px 5px;\n          border-radius: 5px;\n          border: none;\n          font-size: 14px;\">\n        </quill-editor>\n        <!-- View mode -->\n        <div *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content\" [innerHTML]=\"value\"\n        style=\"width: 100%;\n        padding: 10px 10px 10px 5px;\n        border-radius: 5px;\n        border: none;\n        font-size: 14px;\">\n        </div>\n        <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"rows\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder\" [ngClass]=\"'custom-input'\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : inputBorder\"\n          [style.height]=\"inputHeight\" [style.width]=\"inputWidth\" [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          }\" style=\"\n              width: 100%;\n              padding: 10px;\n              padding-left: 5px;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\">\n          </textarea>\n        <svg *ngIf=\"mode !== 'edit' && !viewEdit && (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' && 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=date].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}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.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}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:10px}.input-container .icon-container{right:15px;pointer-events:none;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{padding:0!important;width:auto!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}: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{border:none;padding:0;font-size:14px;line-height:1.6;color:#333;overflow:hidden}.quill-view-content *{max-width:100%;box-sizing:border-box;word-wrap:break-word}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled{color:#999!important;cursor:not-allowed!important}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- SKS31JAN25 -->\n<div class=\"hover-wrapper input-wrapper\" (document:click)=\"closeDropdown($event)\">\n  <div>\n    <div *ngIf=\"type === 'label' ? placeholder : label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n        'padding-top': type === 'label' ? '10px' : '',\n        'padding-bottom': type === 'label' ? '10px' : ''\n      }\" [style.font-weight]=\"labelWeight\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n      [style.color]=\"labelColor || type === 'label' ? 'black' : '#9a9a9a'\" style=\"display: flex; gap: 5px;\"> {{ type ===\n      'label' ? placeholder : label\n      }}\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' ? inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n        <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n          [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n        <!-- SKS28FEB25 mobile number input -->\n        <div class=\"phone-input-container\">\n          <div *ngIf=\"type === 'tel'\" 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=\"type === 'tel' && 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        @if(type !== 'datetime' && type !== 'date' && type !== 'time'){\n        <input *ngFor=\"let input of inputList; 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          [ngClass]=\"type === 'otp' ? 'fcOtp' : 'custom-input'\" [formControl]=\"type === 'otp' ? $any(input) : control\"\n          [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n          [style.border]=\"type === 'otp' || mode !== 'edit' ? '' : inputBorder\"\n          [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '' : inputWidth\"\n          [value]=\"type === 'tel' ? rawInputVal : value\"\n          (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\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) : 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          [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        @else if(type === 'datetime' || type === 'date' || type === 'time'){\n        <input #inputEl [id]=\"inputId\"\n          [owlDateTimeTrigger]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : type === 'time' ? dt3 : dt\"\n          [owlDateTime]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : type === 'time' ? dt3 : dt\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'DD/MM/YYYY HH:MM' : type === 'date' ? 'DD/MM/YYYY' : type === 'time' ? 'HH:MM' : 'DD/MM/YYYY HH:MM'\"\n          [ngClass]=\"'custom-input'\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : inputBorder\"\n          [style.height]=\"inputHeight\" [style.width]=\"inputWidth\" [value]=\"value\" (input)=\" onInputChange($event)\"\n          [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\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%;\n              padding: 10px;\n              padding-left: 5px;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\" />\n        <owl-date-time #dt></owl-date-time>\n        <owl-date-time [pickerType]=\"'calendar'\" #dt2></owl-date-time>\n        <owl-date-time [pickerType]=\"'timer'\" #dt3></owl-date-time>\n        }\n        <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date' || type === 'time')\" class=\"icon-container\" (click)=\"openDatePicker(type)\"\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=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 9.98254H12.3392\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 9.98254H9.01103\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 9.98254H5.67509\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 12.8976H12.3392\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 12.8976H9.01103\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 12.8976H5.67509\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.0329 1.5V3.96809\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.97435 1.5V3.96809\" stroke=\"#292D32\" 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=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div *ngIf=\"mode === 'edit' && type === 'list'\" class=\"icon-container\">\n          <ng-container *ngIf=\"isLoading; else searchIcon\">\n            <!-- Minimal Dotted Loader -->\n            <div 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          </ng-container>\n          <ng-template #searchIcon>\n            <!-- Inline search icon SVG -->\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"\n              xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <circle cx=\"11\" cy=\"11\" r=\"7\" />\n              <path d=\"M20 20L17 17\" stroke-linecap=\"round\" />\n            </svg>\n          </ng-template>\n        </div>\n\n        <!-- SKS14JUN25 dropdown cancel icon -->\n        <svg  *ngIf=\"value && mode === 'edit' && type === 'dropdown'\" style=\"padding-left: 2px; margin-right: 5px;\" (click)=\"clearEmit($event)\"  width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M13.2997 0.709727C12.9097 0.319727 12.2797 0.319727 11.8897 0.709727L6.99973 5.58973L2.10973 0.699727C1.71973 0.309727 1.08973 0.309727 0.699727 0.699727C0.309727 1.08973 0.309727 1.71973 0.699727 2.10973L5.58973 6.99973L0.699727 11.8897C0.309727 12.2797 0.309727 12.9097 0.699727 13.2997C1.08973 13.6897 1.71973 13.6897 2.10973 13.2997L6.99973 8.40973L11.8897 13.2997C12.2797 13.6897 12.9097 13.6897 13.2997 13.2997C13.6897 12.9097 13.6897 12.2797 13.2997 11.8897L8.40973 6.99973L13.2997 2.10973C13.6797 1.72973 13.6797 1.08973 13.2997 0.709727Z\" fill=\"#0B0B0B\"/>\n        </svg>          \n        <!-- Always Show Dropdown Icon -->\n        <svg *ngIf=\"mode === 'edit' && type === 'dropdown'\" style=\"margin-right: 5px;\"  (mousedown)=\"toggle($event); $event.preventDefault()\"\n          xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"#292D32\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M8.46997 10.64L12 14.16L15.53 10.64\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\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        <svg *ngIf=\"mode !== 'edit' && !question.isReadOnly\" 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        <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isSaveHovered = true\" (mouseleave)=\"isSaveHovered = false\"\n          style=\"padding-right: 5px;\">\n          <svg *ngIf=\"!isSaveHovered\" width=\"12\" height=\"12\" 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=\"#837F8E\" />\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=\"#837F8E\" />\n          </svg>\n\n          <svg *ngIf=\"isSaveHovered\" (click)=\"saveChanges()\" width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.95 12.8004C9.23609 12.8004 11.9 10.1365 11.9 6.85039C11.9 3.5643 9.23609 0.900391 5.95 0.900391C2.66391 0.900391 0 3.5643 0 6.85039C0 10.1365 2.66391 12.8004 5.95 12.8004Z\"\n              fill=\"#259566\" />\n            <path\n              d=\"M8.88111 4.74622C8.83269 4.69759 8.77513 4.65899 8.71176 4.63266C8.64838 4.60633 8.58043 4.59277 8.5118 4.59277C8.44317 4.59277 8.37521 4.60633 8.31184 4.63266C8.24846 4.65899 8.19091 4.69759 8.14249 4.74622L4.8269 8.06386L3.35253 6.58949C3.30403 6.54099 3.24646 6.50252 3.18309 6.47627C3.11972 6.45003 3.05181 6.43652 2.98322 6.43652C2.91463 6.43652 2.84672 6.45003 2.78335 6.47627C2.71999 6.50252 2.66241 6.54099 2.61391 6.58949C2.56541 6.63799 2.52694 6.69557 2.50069 6.75893C2.47445 6.8223 2.46094 6.89022 2.46094 6.9588C2.46094 7.02739 2.47445 7.09531 2.50069 7.15867C2.52694 7.22204 2.56541 7.27961 2.61391 7.32811L4.45677 9.17097C4.50519 9.21961 4.56274 9.2582 4.62612 9.28453C4.6895 9.31086 4.75745 9.32442 4.82608 9.32442C4.89471 9.32442 4.96266 9.31086 5.02604 9.28453C5.08942 9.2582 5.14697 9.21961 5.19539 9.17097L8.88111 5.48484C8.92974 5.43642 8.96834 5.37887 8.99467 5.31549C9.021 5.25212 9.03456 5.18416 9.03456 5.11553C9.03456 5.0469 9.021 4.97895 8.99467 4.91557C8.96834 4.8522 8.92974 4.79465 8.88111 4.74622Z\"\n              fill=\"white\" />\n          </svg>\n        </div>\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isDiscardHovered = true\" (mouseleave)=\"isDiscardHovered = false\">\n          <svg *ngIf=\"!isDiscardHovered\" width=\"12\" height=\"12\" 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\n          <svg *ngIf=\"isDiscardHovered\" (click)=\"discardChanges()\" width=\"12\" height=\"13\" viewBox=\"0 0 12 13\"\n            fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M7.05555 4.97471L5.94 6.09026L4.82445 4.97471C4.57861 4.72887 4.18191 4.72887 3.93607 4.97471C3.69023 5.22055 3.69023 5.61725 3.93607 5.86309L5.05162 6.97864L3.93607 8.09419C3.69023 8.34003 3.69023 8.73673 3.93607 8.98257C4.18191 9.22841 4.57861 9.22841 4.82445 8.98257L5.94 7.86702L7.05555 8.98257C7.30139 9.22841 7.69809 9.22841 7.94393 8.98257C8.18977 8.73673 8.18977 8.34003 7.94393 8.09419L6.82838 6.97864L7.94393 5.86309C8.18977 5.61725 8.18977 5.22055 7.94393 4.97471C7.69809 4.73873 7.30021 4.73873 7.05555 4.97471ZM5.94 1.06062C2.70017 1.06062 0.0808594 3.67993 0.0808594 6.91977C0.0808594 10.1596 2.70017 12.7789 5.94 12.7789C9.17983 12.7789 11.7991 10.1596 11.7991 6.91977C11.7991 3.67993 9.17983 1.06062 5.94 1.06062ZM5.94 11.6153C3.35426 11.6153 1.24422 9.50525 1.24422 6.91977C1.24422 4.33412 3.35426 2.22408 5.94 2.22408C8.52558 2.22408 10.6356 4.33412 10.6356 6.91977C10.6356 9.50525 8.52558 11.6153 5.94 11.6153Z\"\n              fill=\"#FF3636\" />\n          </svg>\n        </div>\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;\"> {{ label }}\n        <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n      </label>\n    </div>\n    <div style=\"display: flex;\">\n      <div class=\"input-container\" [ngClass]=\"{'checkbox-padding': type === 'checkbox' || type === 'otp'}\"\n        [style.backgroundColor]=\"mode === 'edit' ? inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n        <!-- SKS14JUN25  Dynamically load Quill editor toolbar -->\n        <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" [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=\"width: 100%;\n          padding: 10px 10px 10px 5px;\n          border-radius: 5px;\n          border: none;\n          font-size: 14px;\">\n        </quill-editor>\n        <!-- View mode -->\n        <div *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content\" [innerHTML]=\"value\"\n        style=\"width: 100%;\n        padding: 10px 10px 10px 5px;\n        border-radius: 5px;\n        border: none;\n        font-size: 14px;\">\n        </div>\n        <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"rows\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder\" [ngClass]=\"'custom-input'\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : inputBorder\"\n          [style.height]=\"inputHeight\" [style.width]=\"inputWidth\" [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          }\" style=\"\n              width: 100%;\n              padding: 10px;\n              padding-left: 5px;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\">\n          </textarea>\n        <svg *ngIf=\"mode !== 'edit' && !viewEdit && (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' && 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=date].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}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.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}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:10px}.input-container .icon-container{right:15px;pointer-events:none;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{padding:0!important;width:auto!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}: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{border:none;padding:0;font-size:14px;line-height:1.6;color:#333;overflow:hidden}.quill-view-content *{max-width:100%;box-sizing:border-box;word-wrap:break-word}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled{color:#999!important;cursor:not-allowed!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ChangeService }, { type: DataService }], propDecorators: { label: [{
                 type: Input
             }], labelFont: [{
@@ -7062,6 +7076,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], timePicker: [{
                 type: ViewChildren,
                 args: ['dt2']
+            }], dtPicker: [{
+                type: ViewChild,
+                args: ['dt']
+            }], dPicker: [{
+                type: ViewChild,
+                args: ['dt2']
+            }], tPicker: [{
+                type: ViewChild,
+                args: ['dt3']
             }], inputRef: [{
                 type: ViewChild,
                 args: ['inputRef', { static: false }]
@@ -7289,13 +7312,13 @@ class CustomDropdownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDropdownComponent, deps: [{ token: ChangeService }, { token: DataService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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" }, 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  [value]=\"selectedValue\"\n  (onFocus)=\"getOptions()\"\n  [labelFont]=\"question.font\"\n  [label]=\"removeCharacters(question?.questionText)\"\n  [labelColor]=\"question.fontColor\"\n  [labelSize]=\"question.fontSize\"\n  [inputValueSize]=\"question.fontSize\"\n  [labelWeight]=\"question.fontWeight\"\n  [inputWeight]=\"question.fontWeight\"\n  [showLabel]=\"question.style?.showLabel\"\n  inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n  [placeholder]=\"placeholder\"\n  [required]=\"question.isOptional\" inputBgColor=\"#F5F5F5\"\n  [inputId]=\"question.trackingId\"\n  [errorMessages]=\"{ required: 'This field is required' }\"\n  [inputIconLeftSrc]=\"question.iconLeftSrc\"\n  (toggleEmit)=\"toggle()\"\n  (clearInputEmit)=\"clearSelection()\"\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)\">\n      {{ apiObj && !apiObj.isDependentField && item[labelField] ? item[labelField] : item?.value }}\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;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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "clearInputEmit", "nativeInputRef"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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" }, 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  [value]=\"selectedValue\"\n  (onFocus)=\"getOptions()\"\n  [labelFont]=\"question.font\"\n  [label]=\"removeCharacters(question?.questionText)\"\n  [labelColor]=\"question.fontColor\"\n  [labelSize]=\"question.fontSize\"\n  [inputValueSize]=\"question.fontSize\"\n  [labelWeight]=\"question.fontWeight\"\n  [inputWeight]=\"question.fontWeight\"\n  [showLabel]=\"question.style?.showLabel\"\n  inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n  [placeholder]=\"placeholder\"\n  [required]=\"question.isOptional\" inputBgColor=\"#F5F5F5\"\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)\">\n      {{ apiObj && !apiObj.isDependentField && item[labelField] ? item[labelField] : item?.value }}\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;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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "clearInputEmit", "nativeInputRef"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-custom-dropdown', standalone: true, imports: [
                         CommonModule, FormsModule, NxtInput
-                    ], template: "<div #dropdownWrapper class=\"dropdown-close\">\n  <nxt-input \n  [type]=\"'dropdown'\"\n  [mode]=\"mode\"\n  [value]=\"selectedValue\"\n  (onFocus)=\"getOptions()\"\n  [labelFont]=\"question.font\"\n  [label]=\"removeCharacters(question?.questionText)\"\n  [labelColor]=\"question.fontColor\"\n  [labelSize]=\"question.fontSize\"\n  [inputValueSize]=\"question.fontSize\"\n  [labelWeight]=\"question.fontWeight\"\n  [inputWeight]=\"question.fontWeight\"\n  [showLabel]=\"question.style?.showLabel\"\n  inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n  [placeholder]=\"placeholder\"\n  [required]=\"question.isOptional\" inputBgColor=\"#F5F5F5\"\n  [inputId]=\"question.trackingId\"\n  [errorMessages]=\"{ required: 'This field is required' }\"\n  [inputIconLeftSrc]=\"question.iconLeftSrc\"\n  (toggleEmit)=\"toggle()\"\n  (clearInputEmit)=\"clearSelection()\"\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)\">\n      {{ apiObj && !apiObj.isDependentField && item[labelField] ? item[labelField] : item?.value }}\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;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"] }]
+                    ], template: "<div #dropdownWrapper class=\"dropdown-close\">\n  <nxt-input \n  [type]=\"'dropdown'\"\n  [mode]=\"mode\"\n  [value]=\"selectedValue\"\n  (onFocus)=\"getOptions()\"\n  [labelFont]=\"question.font\"\n  [label]=\"removeCharacters(question?.questionText)\"\n  [labelColor]=\"question.fontColor\"\n  [labelSize]=\"question.fontSize\"\n  [inputValueSize]=\"question.fontSize\"\n  [labelWeight]=\"question.fontWeight\"\n  [inputWeight]=\"question.fontWeight\"\n  [showLabel]=\"question.style?.showLabel\"\n  inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n  [placeholder]=\"placeholder\"\n  [required]=\"question.isOptional\" inputBgColor=\"#F5F5F5\"\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)\">\n      {{ apiObj && !apiObj.isDependentField && item[labelField] ? item[labelField] : item?.value }}\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;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"] }]
         }], ctorParameters: () => [{ type: ChangeService }, { type: DataService }, { type: I18nService }], propDecorators: { options: [{
                 type: Input
             }], placeholder: [{
@@ -14558,7 +14581,6 @@ class SearchBoxComponent {
                 this.apiMeta = typeof this.apiMeta === 'object' ? this.apiMeta : JSON.parse(this.apiMeta);
                 let apiObj = this.apiMeta;
                 // let apiObj: APIMeta = JSON.parse(this.apiMeta);
-                this.filterName = event[apiObj.defaultField || apiObj.field[0] || apiObj.field]; //SKS27FEB defaultField is used for showing a search field input if field have array of data
                 let change = new ChangeWrapper(); // ChangeWrapper = JSON.parse('{}');
                 change.fromQuestionId = this.id;
                 change.valueObj = event;
@@ -14569,7 +14591,7 @@ class SearchBoxComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBoxComponent, deps: [{ token: DataService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchBoxComponent, isStandalone: true, selector: "lib-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly", mode: "mode", filterName: "filterName" }, outputs: { searchValueChange: "searchValueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- VD 12Jun24 - readonly change -->\n<div class=\"search-wrapper\">\n  <nxt-input [type]=\"'list'\" [mode]=\"mode\" [value]=\"filterName\"\n    [labelFont]=\"question.font\" [label]=\"removeCharacters(question?.questionText)\" [labelColor]=\"question.fontColor\"\n    [labelSize]=\"question.fontSize\" [inputValueSize]=\"question.fontSize\" [labelWeight]=\"question.fontWeight\"\n    [inputWeight]=\"question.fontWeight\" [showLabel]=\"question.style?.showLabel\" inputBorder=\"none\" svgHeight=\"20px\"\n    svgWidth=\"20px\" [placeholder]=\"placeHolderText\" [required]=\"question.isOptional\" inputBgColor=\"#F5F5F5\"\n    [inputId]=\"question.trackingId\" [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"question.iconLeftSrc\" (inputValue)=\"getSourceDataLocal($event); inputValue($event.value,$event.question)\" (onBlur)=\"clearList()\"\n    [showSuggestion]=\"showSuggestion\" ariaOwns=\"selectList\" ariaHasPopup=\"listbox\" [isLoading]=\"isLoading\">\n  </nxt-input>\n\n  <div id=\"selectList\" class=\"suggestion-wrapper\" role=\"listbox\">\n    <div *ngIf=\"finalResults().length > 0 && showSuggestion\" class=\"suggestions-container\">\n      <div *ngFor=\"let item of finalResults()\" (click)=\"clickItem(item)\" class=\"suggestion-item\" role=\"option\">\n        <div class=\"grid-x align-middle\">\n          <div *ngIf=\"item.thumbnail\" class=\"cell shrink thumbnail-wrapper\">\n            <img [src]=\"item.thumbnail\" alt=\"Thumbnail\">\n          </div>\n\n          <div class=\"cell auto item-details\">\n            <div *ngFor=\"let key of getKeys(getValues(item, SearchItem))\" class=\"item-value\">\n              {{ getValues(item, SearchItem)[key] }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".suggestion-wrapper{position:absolute;top:100%;left:0;background:#fff;z-index:2}.search-wrapper{position:relative}.suggestions-container{max-height:20vh;border:1px solid #d2d4d6;overflow:auto;min-width:100px}.suggestion-item{cursor:pointer}.thumbnail-wrapper{width:60px;margin-right:1.6rem}.thumbnail-wrapper img{width:60px}.item-details{text-align:left;padding:5px 8px 0;display:flex;gap:5px}.item-value{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "clearInputEmit", "nativeInputRef"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchBoxComponent, isStandalone: true, selector: "lib-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly", mode: "mode", filterName: "filterName" }, outputs: { searchValueChange: "searchValueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- VD 12Jun24 - readonly change -->\n<div class=\"search-wrapper\">\n  <nxt-input [type]=\"'list'\" [mode]=\"mode\" [value]=\"filterName\"\n    [labelFont]=\"question.font\" [label]=\"removeCharacters(question?.questionText)\" [labelColor]=\"question.fontColor\"\n    [labelSize]=\"question.fontSize\" [inputValueSize]=\"question.fontSize\" [labelWeight]=\"question.fontWeight\"\n    [inputWeight]=\"question.fontWeight\" [showLabel]=\"question.style?.showLabel\" inputBorder=\"none\" svgHeight=\"20px\"\n    svgWidth=\"20px\" [placeholder]=\"placeHolderText\" [required]=\"question.isOptional\" inputBgColor=\"#F5F5F5\"\n    [inputId]=\"question.trackingId\" [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"question.iconLeftSrc\" (inputValue)=\"getSourceDataLocal($event); inputValue($event.value,$event.question)\" (onBlur)=\"clearList()\"\n    [showSuggestion]=\"showSuggestion\" ariaOwns=\"selectList\" ariaHasPopup=\"listbox\" [isLoading]=\"isLoading\" [question]=\"question\">\n  </nxt-input>\n\n  <div id=\"selectList\" class=\"suggestion-wrapper\" role=\"listbox\">\n    <div *ngIf=\"finalResults().length > 0 && showSuggestion\" class=\"suggestions-container\">\n      <div *ngFor=\"let item of finalResults()\" (click)=\"clickItem(item)\" class=\"suggestion-item\" role=\"option\">\n        <div class=\"grid-x align-middle\">\n          <div *ngIf=\"item.thumbnail\" class=\"cell shrink thumbnail-wrapper\">\n            <img [src]=\"item.thumbnail\" alt=\"Thumbnail\">\n          </div>\n\n          <div class=\"cell auto item-details\">\n            <div *ngFor=\"let key of getKeys(getValues(item, SearchItem))\" class=\"item-value\">\n              {{ getValues(item, SearchItem)[key] }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".suggestion-wrapper{position:absolute;top:100%;left:0;background:#fff;z-index:2}.search-wrapper{position:relative}.suggestions-container{max-height:20vh;border:1px solid #d2d4d6;overflow:auto;min-width:100px}.suggestion-item{cursor:pointer}.thumbnail-wrapper{width:60px;margin-right:1.6rem}.thumbnail-wrapper img{width:60px}.item-details{text-align:left;padding:5px 8px 0;display:flex;gap:5px}.item-value{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "clearInputEmit", "nativeInputRef"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBoxComponent, decorators: [{
             type: Component,
@@ -14577,7 +14599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CommonModule,
                         FormsModule,
                         NxtInput
-                    ], template: "<!-- VD 12Jun24 - readonly change -->\n<div class=\"search-wrapper\">\n  <nxt-input [type]=\"'list'\" [mode]=\"mode\" [value]=\"filterName\"\n    [labelFont]=\"question.font\" [label]=\"removeCharacters(question?.questionText)\" [labelColor]=\"question.fontColor\"\n    [labelSize]=\"question.fontSize\" [inputValueSize]=\"question.fontSize\" [labelWeight]=\"question.fontWeight\"\n    [inputWeight]=\"question.fontWeight\" [showLabel]=\"question.style?.showLabel\" inputBorder=\"none\" svgHeight=\"20px\"\n    svgWidth=\"20px\" [placeholder]=\"placeHolderText\" [required]=\"question.isOptional\" inputBgColor=\"#F5F5F5\"\n    [inputId]=\"question.trackingId\" [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"question.iconLeftSrc\" (inputValue)=\"getSourceDataLocal($event); inputValue($event.value,$event.question)\" (onBlur)=\"clearList()\"\n    [showSuggestion]=\"showSuggestion\" ariaOwns=\"selectList\" ariaHasPopup=\"listbox\" [isLoading]=\"isLoading\">\n  </nxt-input>\n\n  <div id=\"selectList\" class=\"suggestion-wrapper\" role=\"listbox\">\n    <div *ngIf=\"finalResults().length > 0 && showSuggestion\" class=\"suggestions-container\">\n      <div *ngFor=\"let item of finalResults()\" (click)=\"clickItem(item)\" class=\"suggestion-item\" role=\"option\">\n        <div class=\"grid-x align-middle\">\n          <div *ngIf=\"item.thumbnail\" class=\"cell shrink thumbnail-wrapper\">\n            <img [src]=\"item.thumbnail\" alt=\"Thumbnail\">\n          </div>\n\n          <div class=\"cell auto item-details\">\n            <div *ngFor=\"let key of getKeys(getValues(item, SearchItem))\" class=\"item-value\">\n              {{ getValues(item, SearchItem)[key] }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".suggestion-wrapper{position:absolute;top:100%;left:0;background:#fff;z-index:2}.search-wrapper{position:relative}.suggestions-container{max-height:20vh;border:1px solid #d2d4d6;overflow:auto;min-width:100px}.suggestion-item{cursor:pointer}.thumbnail-wrapper{width:60px;margin-right:1.6rem}.thumbnail-wrapper img{width:60px}.item-details{text-align:left;padding:5px 8px 0;display:flex;gap:5px}.item-value{display:flex}\n"] }]
+                    ], template: "<!-- VD 12Jun24 - readonly change -->\n<div class=\"search-wrapper\">\n  <nxt-input [type]=\"'list'\" [mode]=\"mode\" [value]=\"filterName\"\n    [labelFont]=\"question.font\" [label]=\"removeCharacters(question?.questionText)\" [labelColor]=\"question.fontColor\"\n    [labelSize]=\"question.fontSize\" [inputValueSize]=\"question.fontSize\" [labelWeight]=\"question.fontWeight\"\n    [inputWeight]=\"question.fontWeight\" [showLabel]=\"question.style?.showLabel\" inputBorder=\"none\" svgHeight=\"20px\"\n    svgWidth=\"20px\" [placeholder]=\"placeHolderText\" [required]=\"question.isOptional\" inputBgColor=\"#F5F5F5\"\n    [inputId]=\"question.trackingId\" [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"question.iconLeftSrc\" (inputValue)=\"getSourceDataLocal($event); inputValue($event.value,$event.question)\" (onBlur)=\"clearList()\"\n    [showSuggestion]=\"showSuggestion\" ariaOwns=\"selectList\" ariaHasPopup=\"listbox\" [isLoading]=\"isLoading\" [question]=\"question\">\n  </nxt-input>\n\n  <div id=\"selectList\" class=\"suggestion-wrapper\" role=\"listbox\">\n    <div *ngIf=\"finalResults().length > 0 && showSuggestion\" class=\"suggestions-container\">\n      <div *ngFor=\"let item of finalResults()\" (click)=\"clickItem(item)\" class=\"suggestion-item\" role=\"option\">\n        <div class=\"grid-x align-middle\">\n          <div *ngIf=\"item.thumbnail\" class=\"cell shrink thumbnail-wrapper\">\n            <img [src]=\"item.thumbnail\" alt=\"Thumbnail\">\n          </div>\n\n          <div class=\"cell auto item-details\">\n            <div *ngFor=\"let key of getKeys(getValues(item, SearchItem))\" class=\"item-value\">\n              {{ getValues(item, SearchItem)[key] }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".suggestion-wrapper{position:absolute;top:100%;left:0;background:#fff;z-index:2}.search-wrapper{position:relative}.suggestions-container{max-height:20vh;border:1px solid #d2d4d6;overflow:auto;min-width:100px}.suggestion-item{cursor:pointer}.thumbnail-wrapper{width:60px;margin-right:1.6rem}.thumbnail-wrapper img{width:60px}.item-details{text-align:left;padding:5px 8px 0;display:flex;gap:5px}.item-value{display:flex}\n"] }]
         }], ctorParameters: () => [{ type: DataService }, { type: I18nService }], propDecorators: { placeHolderText: [{
                 type: Input
             }], question: [{
@@ -16200,8 +16222,7 @@ class BookletComponent {
                 dataToParent.data = dataToParent.data.filter((inputData) => inputData.id === ques.id || inputData.id === primaryKeyElement?.id);
             }
             if (isPrimaryKey) {
-                dataToParent.action['eventtoemit'] = 'save';
-                dataToParent.action['method'] = 'PATCH';
+                dataToParent.action = 'save';
             }
             this.handleBookletActionEvent.emit(dataToParent);
         }
@@ -17448,7 +17469,7 @@ const VERSION = {
     "semver": null,
     "suffix": "05a52cb-dirty",
     "semverString": null,
-    "version": "2.1.185"
+    "version": "2.1.187"
 };
 /* tslint:enable */