@rangertechnologies/ngnxt 2.1.262 → 2.1.263
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7490,7 +7490,7 @@ class NxtInput {
|
|
|
7490
7490
|
useExisting: forwardRef(() => NxtInput),
|
|
7491
7491
|
multi: true,
|
|
7492
7492
|
},
|
|
7493
|
-
], viewQueries: [{ propertyName: "dtPicker", first: true, predicate: ["dt"], descendants: true }, { propertyName: "dPicker", first: true, predicate: ["dt2"], 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=\"label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n 'padding-top': type === 'label' ? '10px' : '',\n 'padding-bottom': type === 'label' ? '10px' : ''\n }\" [style.font-weight]=\"labelWeight || type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n style=\"display: flex; gap: 5px;\"> {{ 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' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n [class.invalid]=\"control.invalid && control.touched\"\n [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.margin-top]=\"showLabel && label ? from === 'nxtTable' ? '0px !important' : '' : from === 'nxtTable' || from === 'normalDropDown' ? '0px !important' : '21px !important'\"\n [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\"\n style=\"position: relative; width: 100%;\">\n <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n <div *ngIf=\"mode === 'edit' && type === 'list'\">\n <!-- Inline search icon SVG -->\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"1.5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n <circle cx=\"8.25\" cy=\"8.25\" r=\"5.25\" />\n <path d=\"M15 15L12.75 12.75\" stroke-linecap=\"round\" />\n </svg>\n </div>\n <!-- SKS28FEB25 mobile number input -->\n <div *ngIf=\"type === 'tel'\" class=\"phone-input-container\">\n <div class=\"country-selector\" style=\"padding-left: 10px;\"\n (click)=\"toggleCountryDropdown()\">\n <!-- <span class=\"flag\">{{ selectedCountry.flag }}</span> -->\n <span class=\"dial-code\" [style.font-size]=\"inputValueSize\">{{ selectedCountry.dial_code }}</span>\n <svg class=\"arrow\" width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M0.684136 0.767477C0.922999 0.5378 1.30282 0.545248 1.5325 0.784111L4.5 3.93431L7.4675 0.784111C7.69718 0.545248 8.077 0.5378 8.31587 0.767477C8.55473 0.997153 8.56218 1.37698 8.3325 1.61584L4.9325 5.21584C4.81938 5.33349 4.66321 5.39998 4.5 5.39998C4.33679 5.39998 4.18062 5.33349 4.0675 5.21584L0.667501 1.61584C0.437825 1.37698 0.445272 0.997153 0.684136 0.767477Z\"\n fill=\"#626262\" />\n </svg>\n </div>\n <div *ngIf=\"showCountryDropdown\" class=\"country-dropdown\">\n <div class=\"search-box\">\n <input type=\"text\" [readOnly]=\"mode !== 'edit'\" placeholder=\"Search country...\" [value]=\"countrySearch\"\n (input)=\"filterCountries($event)\">\n </div>\n <div class=\"country-list\">\n <div *ngFor=\"let country of filteredCountries\" class=\"country-item\" (click)=\"selectCountry(country)\">\n <span class=\"flag\">{{ country.flag }}</span>\n <span class=\"name\">{{ country.name }}</span>\n <span class=\"dial-code\">{{ country.dial_code }}</span>\n </div>\n </div>\n </div>\n </div>\n @if(type !== 'datetime' && type !== 'date' && type !== 'time' && type !== 'month'){\n <input *ngFor=\"let input of cachedInputList; let i = index\" #inputEl #inputRef [id]=\"inputId\"\n [type]=\"isPasswordVisible ? 'text' : type === 'otp' || type === 'dropdown' ? 'text' : type\"\n [attr.placeholder]=\"type === 'otp' || mode !== 'edit' ? '' : placeholder || (type === 'tel' ? removeDialCode(selectedCountry.placeholder) : label)\"\n [formControl]=\"type === 'otp' ? $any(input) : control\"\n [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n [style.border]=\"type === 'otp' || mode !== 'edit' ? '' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '' : type === 'checkbox' ? 'auto' : inputWidth\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [value]=\"type === 'tel' ? rawInputVal : value\"\n (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\n [checked]=\"type === 'checkbox' ? value : ''\"\n [style.font-size]=\"type === 'otp' ? '' : inputValueSize\" (focus)=\"type === 'otp' ? handleFocus($event) : null\"\n (blur)=\"type === 'otp' ? onTouched() : blurEmit()\"\n (keypress)=\"type === 'otp' ? handleKeyPress($event, i) : null\"\n (keydown)=\"type === 'otp' ? handleKeyDown($event, i) : from === 'normalDropDown' ? $event.preventDefault() : null\"\n (paste)=\"type === 'otp' ? handlePaste($event, i) : null\" inputmode=\"type === 'otp' ? numeric : null\"\n [attr.autocomplete]=\"type === 'otp' && i === 0 ? 'one-time-code' : type === 'list' ? 'list' : 'off'\"\n [attr.aria-expanded]=\"type === 'list' ? showSuggestion : 'off'\"\n [attr.inputmode]=\"type === 'otp' ? 'numeric' : null\" [attr.name]=\"type === 'otp' && i === 0 ? 'otp' : null\"\n (focusin)=\"focusinEmit($event)\" [attr.aria-owns]=\"type === 'list' ? ariaOwns : 'off'\"\n [attr.aria-haspopup]=\"type === 'list' ? ariaHasPopup : 'off'\" \n [readonly]=\"from === 'normalDropDown'\" \n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" (keydown.enter)=\"type === 'location' ? $event.preventDefault() : ''\"\n autocorrect=\"type === 'location' ? 'off' : ''\" autocapitalize=\"type === 'location' ? 'off' : ''\"\n spellcheck=\"type === 'location' ? 'off' : ''\" \n />\n }\n @else if(type === 'time' || type === 'month'){\n @if(languageCode !== 'ar'){\n <input #inputEl [id]=\"inputId\"\n [type]=\"type\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || 'HH:MM'\"\n [ngClass]=\"'nxt-custom-input'\"\n [formControl]=\"control\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (input)=\"onInputChange($event)\"\n [attr.autocomplete]=\"'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 }\" style=\"\n width: 100% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n }\n @else {\n <div style=\"position: relative; width: 100%;\">\n <input [id]=\"inputId\"\n type=\"text\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'time' ? 'HH:MM' : 'YYYY/MM' \"\n [ngClass]=\"'nxt-custom-input'\" \n [value]=\"displayedHijriDate | NxtDate : type : languageCode\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (focus)=\"onHijriInputClick(); $event.stopPropagation()\"\n (click)=\"onHijriInputClick();\"\n [style.direction]=\"'rtl'\"\n [attr.autocomplete]=\"'off'\"\n [attr.readonly]=\"'true'\"\n [class]=\"'nxt-' + (question.nxtTableId || question.id)\"\n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" style=\"\n width: 100% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n <!-- Hijri Datepicker Popup -->\n <div *ngIf=\"showHijriPicker\" class=\"hijri-popup\" [class]=\"'nxt-' + (question.nxtTableId || question.id)\">\n <app-hijri-datepicker\n [type]=\"type\"\n [value]=\"displayedHijriDate\"\n (dateChange)=\"onInputChange($event);\"\n ></app-hijri-datepicker>\n </div>\n </div>\n }\n }\n \n @else if( type === 'datetime' || type === 'date'){\n @if(languageCode !== 'ar'){\n <input #inputEl [id]=\"inputId\"\n [owlDateTimeTrigger]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : dt\"\n [owlDateTime]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : dt\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'DD/MM/YYYY HH:MM' : type === 'date' ? 'DD/MM/YYYY' : 'DD/MM/YYYY HH:MM'\"\n [ngClass]=\"'nxt-custom-input'\"\n [formControl]=\"control\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (dateTimeInput)=\"onInputChange($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% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n <owl-date-time #dt></owl-date-time>\n <owl-date-time [pickerType]=\"'calendar'\" #dt2></owl-date-time>\n }\n @else {\n <div style=\"position: relative; width: 100%;\">\n <input [id]=\"inputId\"\n type=\"text\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'YYYY/MM/DD-HH:MM' : 'YYYY/MM/DD'\"\n [ngClass]=\"'nxt-custom-input'\" \n [value]=\"displayedHijriDate | NxtDate : type : languageCode\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (focus)=\"onHijriInputClick(); $event.stopPropagation()\"\n (click)=\"onHijriInputClick();\"\n [style.direction]=\"'rtl'\"\n [attr.autocomplete]=\"'off'\"\n [attr.readonly]=\"'true'\"\n [class]=\"'nxt-' + (question.nxtTableId || question.id)\"\n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" style=\"\n width: 100% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n <!-- SKS7AUG25 Hijri Datepicker Popup -->\n <div *ngIf=\"showHijriPicker\" class=\"hijri-popup\" [class]=\"'nxt-' + (question.nxtTableId || question.id)\">\n <app-hijri-datepicker\n [type]=\"type\"\n [value]=\"displayedHijriDate\"\n (dateChange)=\"onInputChange($event);\"\n ></app-hijri-datepicker>\n </div>\n </div>\n }\n } \n <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date')\" (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 <!-- SKS7AUG25 api call Dotted Loader -->\n <div *ngIf=\"mode === 'edit' && isLoading\" class=\"dotted-loader\" aria-label=\"Loading\" role=\"status\">\n <span *ngFor=\"let dot of [].constructor(6); let i = index\" class=\"dot\" [style.--i]=\"i\"></span>\n </div>\n <div *ngIf=\"mode === 'edit' && type === 'list'\">\n <svg *ngIf=\"!isLoading\" (click)=\"removeValue()\" (keydown.enter)=\"removeValue()\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer;\">\n <path d=\"M9.16992 14.8299L14.8299 9.16992\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14.8299 14.8299L9.16992 9.16992\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\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\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n </div>\n <label class=\"checkboxLab\" *ngIf=\"label && type === 'checkbox' && showLabel\" [style.font-weight]=\"labelWeight\"\n [style.font-size]=\"labelSize\" [style.color]=\"labelColor || '#9a9a9a'\"\n style=\"margin-bottom: 0; padding-left: 10px; padding-right: 10px; width: 100% !important;\"> {{ label }}\n <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n </label> \n <!-- Always Show Dropdown Icon -->\n <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 && from !== 'nxtTable' \" 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; display: flex; align-items: center;\">\n <svg *ngIf=\"!isSaveHovered\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#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=\"16\" height=\"16\" 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 style=\" display: flex; align-items: center;\">\n <svg *ngIf=\"!isDiscardHovered\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n\n <svg *ngIf=\"isDiscardHovered\" (click)=\"discardChanges()\" width=\"16\" height=\"16\" 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 </div>\n <div *ngIf=\"type !== 'label' && type !== 'checkbox' && (type === 'richtext' || type === 'textarea')\" style=\"display: flex;\">\n <div class=\"input-container\"\n [style.margin-top]=\"showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' : '21px !important'\"\n [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n [class.invalid]=\"control.invalid && control.touched\"\n [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n <!-- SKS14JUN25 Dynamically load Quill editor toolbar -->\n <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" (ngModelChange)=\"onInputChange($event)\" [placeholder]=\"placeholder\"\n [readOnly]=\"mode !== 'edit' || question?.isReadOnly\"\n (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n [modules]=\"getQuillModules(question.id)\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n style=\"width: 100%;\n border-radius: 5px;\n border: none;\n font-size: 14px;\">\n </quill-editor>\n <!-- View mode -->\n <div *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content ql-container ql-snow\"\n style=\"width: 98.5%;\n border-radius: 5px;\n border: none;\n font-size: 14px;\">\n <div class=\"ql-editor\" [innerHTML]=\"value\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.text-align]=\"direction === 'rtl' ? 'right' : '' \"\n [attr.dir]='direction'\n ></div>\n </div>\n <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"from === 'nxtTable' ? 1 : rows\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder\" [ngClass]=\"'custom-input'\"\n [formControl]=\"control\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder\"\n [style.height]=\"inputHeight\" [value]=\"value\" (input)=\" onInputChange($event)\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n [readOnly]=\"mode !== 'edit' || question?.isReadOnly\" [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" \n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n style=\"\n width: 100%;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\"\n >\n </textarea>\n <svg *ngIf=\"mode !== 'edit' && !viewEdit && from !== 'nxtTable' && (type === 'richtext' || type === 'textarea') && !question?.isReadOnly\"\n class=\"edit-icon\" (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <!-- SKS23APR25 Use control.invalid to show error on submit click -->\n <div *ngIf=\"type != 'checkbox' && type !== 'label' && control.invalid && (control.touched || control.dirty)\" style=\"height: 20px;\">\n <div class=\"error-message\">\n {{ getErrorMessage() }}\n </div>\n </div>\n </div>\n</div>", styles: ["label{font-size:14px;margin-bottom:10px;color:color-mix(in srgb,black,rgb(0,0,0) 80%)}.toggle-icon{width:20px;height:20px;cursor:pointer;fill:#666}.error-message{color:red;font-size:12px}input[type=text].custom-input,input[type=password].custom-input,input[type=number].custom-input,input[type=email].custom-input,input[type=tel].custom-input,input[type=list].custom-input,input[type=dropdown].custom-input,input[type=location].custom-input{width:100%;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}input.nxt-custom-input{width:100%!important;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.custom-input:-webkit-autofill:active,.nxt-custom-input:-webkit-autofill,.nxt-custom-input:-webkit-autofill:hover,.nxt-custom-input:-webkit-autofill:focus,.nxt-custom-input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important;-webkit-text-fill-color:inherit!important}.phone-input-container{display:flex;align-items:center;position:relative}.country-selector{display:flex;align-items:center;cursor:pointer;padding-right:12px;border-right:#ccc;margin-right:12px}.flag{margin-right:8px;font-size:20px}.dial-code{margin-right:8px;font-weight:500}.country-dropdown{position:absolute;top:100%;left:0;width:300px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:4px}.search-box{padding:8px;border-bottom:1px solid #ccc}.search-box input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.country-list{max-height:200px;overflow-y:auto}.country-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer}.country-item:hover{background-color:color-mix(in srgb,#fff,rgba(0,0,0,0) 30%)}.country-item .name{flex:1;margin:0 12px}.fcOtp{width:40px;height:40px;text-align:center;font-size:18px;border:1px solid #ccc;border-radius:5px;margin:5px;outline:none;transition:border-color .2s ease-in-out}input:focus{outline:none;border-color:transparent;box-shadow:none}.input-container{display:flex;align-items:center;width:100%;border-radius:5px;border:1px solid #ccc;padding-left:5px;padding-right:5px}.icon-container{right:15px;padding-right:5px;pointer-events:auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center}.input-container.invalid{border:1px solid #DC3545!important;border-radius:5px}.checkbox-padding{margin-top:20px!important;padding:13px!important;width:100%!important;border:none!important}.view-mode{font-size:14px;color:#333}@media print{.view-mode{font-size:12pt;color:#000}}input::placeholder{font-family:var(--placeholder-font);color:var(--placeholder-color);font-size:var(--placeholder-size);font-weight:var(--placeholder-weight)}.dotted-loader{position:relative;width:10px;height:10px}.dotted-loader .dot{--i: 0;position:absolute;top:50%;left:50%;width:3px;height:3px;margin:-2px 0 0 -2px;border-radius:50%;background-color:#696969;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg));animation:spinDot 1s linear infinite;animation-delay:calc(var(--i) * .1s)}@keyframes spinDot{0%{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}50%{opacity:1;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(1.3)}to{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}}input:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important;border:none!important}textarea:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}.quill-view-content{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}.quill-view-content{background-color:#f0f0f0;border-radius:5px;border:none;padding:10px;font-size:14px;overflow-wrap:break-word}.quill-view-content .ql-editor{white-space:normal;overflow:visible;min-height:auto}[dir=rtl] .quill-view-content *,.rtl .quill-view-content *{text-align:right!important;direction:rtl!important}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled,textarea:disabled,.quill-view-content{color:#999!important}input:disabled.from-nxt-table,textarea:disabled.from-nxt-table,.quill-view-content.from-nxt-table{color:#2c3137!important}.owl-dt-container-disabled,.owl-dt-trigger-disabled{opacity:unset!important}.input-wrapper{position:relative}.input-container{pointer-events:auto!important;position:relative}.custom-input,.nxt-custom-input{pointer-events:auto!important}.hijri-popup{position:absolute;top:100%;right:0;z-index:9999;background:#fff;box-shadow:0 2px 10px #0003;padding:10px;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.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: i7.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i7.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i7.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"] }, { kind: "component", type: HijriDatepickerComponent, selector: "app-hijri-datepicker", inputs: ["type", "value"], outputs: ["dateChange"] }, { kind: "pipe", type: NxtDatePipe, name: "NxtDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7493
|
+
], viewQueries: [{ propertyName: "dtPicker", first: true, predicate: ["dt"], descendants: true }, { propertyName: "dPicker", first: true, predicate: ["dt2"], 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=\"label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n 'padding-top': type === 'label' ? '10px' : '',\n 'padding-bottom': type === 'label' ? '10px' : ''\n }\" [style.font-weight]=\"labelWeight || type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n style=\"display: flex; gap: 5px;\"> {{ 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' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n [class.invalid]=\"control.invalid && control.touched\"\n [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.margin-top]=\"showLabel && label ? from === 'nxtTable' ? '0px !important' : '' : from === 'nxtTable' || from === 'normalDropDown' ? '0px !important' : '21px !important'\"\n [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\"\n style=\"position: relative; width: 100%;\">\n <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n <div *ngIf=\"mode === 'edit' && type === 'list'\">\n <!-- Inline search icon SVG -->\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"1.5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n <circle cx=\"8.25\" cy=\"8.25\" r=\"5.25\" />\n <path d=\"M15 15L12.75 12.75\" stroke-linecap=\"round\" />\n </svg>\n </div>\n <!-- SKS28FEB25 mobile number input -->\n <div *ngIf=\"type === 'tel'\" class=\"phone-input-container\">\n <div class=\"country-selector\" style=\"padding-left: 10px;\"\n (click)=\"toggleCountryDropdown()\">\n <!-- <span class=\"flag\">{{ selectedCountry.flag }}</span> -->\n <span class=\"dial-code\" [style.font-size]=\"inputValueSize\">{{ selectedCountry.dial_code }}</span>\n <svg class=\"arrow\" width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M0.684136 0.767477C0.922999 0.5378 1.30282 0.545248 1.5325 0.784111L4.5 3.93431L7.4675 0.784111C7.69718 0.545248 8.077 0.5378 8.31587 0.767477C8.55473 0.997153 8.56218 1.37698 8.3325 1.61584L4.9325 5.21584C4.81938 5.33349 4.66321 5.39998 4.5 5.39998C4.33679 5.39998 4.18062 5.33349 4.0675 5.21584L0.667501 1.61584C0.437825 1.37698 0.445272 0.997153 0.684136 0.767477Z\"\n fill=\"#626262\" />\n </svg>\n </div>\n <div *ngIf=\"showCountryDropdown\" class=\"country-dropdown\">\n <div class=\"search-box\">\n <input type=\"text\" [readOnly]=\"mode !== 'edit'\" placeholder=\"Search country...\" [value]=\"countrySearch\"\n (input)=\"filterCountries($event)\">\n </div>\n <div class=\"country-list\">\n <div *ngFor=\"let country of filteredCountries\" class=\"country-item\" (click)=\"selectCountry(country)\">\n <span class=\"flag\">{{ country.flag }}</span>\n <span class=\"name\">{{ country.name }}</span>\n <span class=\"dial-code\">{{ country.dial_code }}</span>\n </div>\n </div>\n </div>\n </div>\n @if(type !== 'datetime' && type !== 'date' && type !== 'time' && type !== 'month'){\n <input *ngFor=\"let input of cachedInputList; let i = index\" #inputEl #inputRef [id]=\"inputId\"\n [type]=\"isPasswordVisible ? 'text' : type === 'otp' || type === 'dropdown' ? 'text' : type\"\n [attr.placeholder]=\"type === 'otp' || mode !== 'edit' ? '' : placeholder || (type === 'tel' ? removeDialCode(selectedCountry.placeholder) : label)\"\n [formControl]=\"type === 'otp' ? $any(input) : control\"\n [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n [style.border]=\"type === 'otp' || mode !== 'edit' ? '' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '100%' : type === 'checkbox' ? 'auto' : inputWidth\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [value]=\"type === 'tel' ? rawInputVal : value\"\n (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\n [checked]=\"type === 'checkbox' ? value : ''\"\n [style.font-size]=\"type === 'otp' ? '' : inputValueSize\" (focus)=\"type === 'otp' ? handleFocus($event) : null\"\n (blur)=\"type === 'otp' ? onTouched() : blurEmit()\"\n (keypress)=\"type === 'otp' ? handleKeyPress($event, i) : null\"\n (keydown)=\"type === 'otp' ? handleKeyDown($event, i) : from === 'normalDropDown' ? $event.preventDefault() : null\"\n (paste)=\"type === 'otp' ? handlePaste($event, i) : null\" inputmode=\"type === 'otp' ? numeric : null\"\n [attr.autocomplete]=\"type === 'otp' && i === 0 ? 'one-time-code' : type === 'list' ? 'list' : 'off'\"\n [attr.aria-expanded]=\"type === 'list' ? showSuggestion : 'off'\"\n [attr.inputmode]=\"type === 'otp' ? 'numeric' : null\" [attr.name]=\"type === 'otp' && i === 0 ? 'otp' : null\"\n (focusin)=\"focusinEmit($event)\" [attr.aria-owns]=\"type === 'list' ? ariaOwns : 'off'\"\n [attr.aria-haspopup]=\"type === 'list' ? ariaHasPopup : 'off'\" \n [readonly]=\"from === 'normalDropDown'\" \n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" (keydown.enter)=\"type === 'location' ? $event.preventDefault() : ''\"\n autocorrect=\"type === 'location' ? 'off' : ''\" autocapitalize=\"type === 'location' ? 'off' : ''\"\n spellcheck=\"type === 'location' ? 'off' : ''\" \n />\n }\n @else if(type === 'time' || type === 'month'){\n @if(languageCode !== 'ar'){\n <input #inputEl [id]=\"inputId\"\n [type]=\"type\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || 'HH:MM'\"\n [ngClass]=\"'nxt-custom-input'\"\n [formControl]=\"control\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (input)=\"onInputChange($event)\"\n [attr.autocomplete]=\"'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 }\" style=\"\n width: 100% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n }\n @else {\n <div style=\"position: relative; width: 100%;\">\n <input [id]=\"inputId\"\n type=\"text\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'time' ? 'HH:MM' : 'YYYY/MM' \"\n [ngClass]=\"'nxt-custom-input'\" \n [value]=\"displayedHijriDate | NxtDate : type : languageCode\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (focus)=\"onHijriInputClick(); $event.stopPropagation()\"\n (click)=\"onHijriInputClick();\"\n [style.direction]=\"'rtl'\"\n [attr.autocomplete]=\"'off'\"\n [attr.readonly]=\"'true'\"\n [class]=\"'nxt-' + (question.nxtTableId || question.id)\"\n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" style=\"\n width: 100% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n <!-- Hijri Datepicker Popup -->\n <div *ngIf=\"showHijriPicker\" class=\"hijri-popup\" [class]=\"'nxt-' + (question.nxtTableId || question.id)\">\n <app-hijri-datepicker\n [type]=\"type\"\n [value]=\"displayedHijriDate\"\n (dateChange)=\"onInputChange($event);\"\n ></app-hijri-datepicker>\n </div>\n </div>\n }\n }\n \n @else if( type === 'datetime' || type === 'date'){\n @if(languageCode !== 'ar'){\n <input #inputEl [id]=\"inputId\"\n [owlDateTimeTrigger]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : dt\"\n [owlDateTime]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : dt\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'DD/MM/YYYY HH:MM' : type === 'date' ? 'DD/MM/YYYY' : 'DD/MM/YYYY HH:MM'\"\n [ngClass]=\"'nxt-custom-input'\"\n [formControl]=\"control\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (dateTimeInput)=\"onInputChange($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% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n <owl-date-time #dt></owl-date-time>\n <owl-date-time [pickerType]=\"'calendar'\" #dt2></owl-date-time>\n }\n @else {\n <div style=\"position: relative; width: 100%;\">\n <input [id]=\"inputId\"\n type=\"text\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'YYYY/MM/DD-HH:MM' : 'YYYY/MM/DD'\"\n [ngClass]=\"'nxt-custom-input'\" \n [value]=\"displayedHijriDate | NxtDate : type : languageCode\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (focus)=\"onHijriInputClick(); $event.stopPropagation()\"\n (click)=\"onHijriInputClick();\"\n [style.direction]=\"'rtl'\"\n [attr.autocomplete]=\"'off'\"\n [attr.readonly]=\"'true'\"\n [class]=\"'nxt-' + (question.nxtTableId || question.id)\"\n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" style=\"\n width: 100% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n <!-- SKS7AUG25 Hijri Datepicker Popup -->\n <div *ngIf=\"showHijriPicker\" class=\"hijri-popup\" [class]=\"'nxt-' + (question.nxtTableId || question.id)\">\n <app-hijri-datepicker\n [type]=\"type\"\n [value]=\"displayedHijriDate\"\n (dateChange)=\"onInputChange($event);\"\n ></app-hijri-datepicker>\n </div>\n </div>\n }\n } \n <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date')\" (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 <!-- SKS7AUG25 api call Dotted Loader -->\n <div *ngIf=\"mode === 'edit' && isLoading\" class=\"dotted-loader\" aria-label=\"Loading\" role=\"status\">\n <span *ngFor=\"let dot of [].constructor(6); let i = index\" class=\"dot\" [style.--i]=\"i\"></span>\n </div>\n <div *ngIf=\"mode === 'edit' && type === 'list'\">\n <svg *ngIf=\"!isLoading\" (click)=\"removeValue()\" (keydown.enter)=\"removeValue()\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer;\">\n <path d=\"M9.16992 14.8299L14.8299 9.16992\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14.8299 14.8299L9.16992 9.16992\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\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\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n </div>\n <label class=\"checkboxLab\" *ngIf=\"label && type === 'checkbox' && showLabel\" [style.font-weight]=\"labelWeight\"\n [style.font-size]=\"labelSize\" [style.color]=\"labelColor || '#9a9a9a'\"\n style=\"margin-bottom: 0; padding-left: 10px; padding-right: 10px; width: 100% !important;\"> {{ label }}\n <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n </label> \n <!-- Always Show Dropdown Icon -->\n <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 && from !== 'nxtTable' \" 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; display: flex; align-items: center;\">\n <svg *ngIf=\"!isSaveHovered\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#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=\"16\" height=\"16\" 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 style=\" display: flex; align-items: center;\">\n <svg *ngIf=\"!isDiscardHovered\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n\n <svg *ngIf=\"isDiscardHovered\" (click)=\"discardChanges()\" width=\"16\" height=\"16\" 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 </div>\n <div *ngIf=\"type !== 'label' && type !== 'checkbox' && (type === 'richtext' || type === 'textarea')\" style=\"display: flex;\">\n <div class=\"input-container\"\n [style.margin-top]=\"showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' : '21px !important'\"\n [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n [class.invalid]=\"control.invalid && control.touched\"\n [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n <!-- SKS14JUN25 Dynamically load Quill editor toolbar -->\n <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" (ngModelChange)=\"onInputChange($event)\" [placeholder]=\"placeholder\"\n [readOnly]=\"mode !== 'edit' || question?.isReadOnly\"\n (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n [modules]=\"getQuillModules(question.id)\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n style=\"width: 100%;\n border-radius: 5px;\n border: none;\n font-size: 14px;\">\n </quill-editor>\n <!-- View mode -->\n <div *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content ql-container ql-snow\"\n style=\"width: 98.5%;\n border-radius: 5px;\n border: none;\n font-size: 14px;\">\n <div class=\"ql-editor\" [innerHTML]=\"value\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.text-align]=\"direction === 'rtl' ? 'right' : '' \"\n [attr.dir]='direction'\n ></div>\n </div>\n <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"from === 'nxtTable' ? 1 : rows\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder\" [ngClass]=\"'custom-input'\"\n [formControl]=\"control\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder\"\n [style.height]=\"inputHeight\" [value]=\"value\" (input)=\" onInputChange($event)\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n [readOnly]=\"mode !== 'edit' || question?.isReadOnly\" [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" \n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n style=\"\n width: 100%;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\"\n >\n </textarea>\n <svg *ngIf=\"mode !== 'edit' && !viewEdit && from !== 'nxtTable' && (type === 'richtext' || type === 'textarea') && !question?.isReadOnly\"\n class=\"edit-icon\" (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <!-- SKS23APR25 Use control.invalid to show error on submit click -->\n <div *ngIf=\"type != 'checkbox' && type !== 'label' && control.invalid && (control.touched || control.dirty)\" style=\"height: 20px;\">\n <div class=\"error-message\">\n {{ getErrorMessage() }}\n </div>\n </div>\n </div>\n</div>", styles: ["label{font-size:14px;margin-bottom:10px;color:color-mix(in srgb,black,rgb(0,0,0) 80%)}.toggle-icon{width:20px;height:20px;cursor:pointer;fill:#666}.error-message{color:red;font-size:12px}input[type=text].custom-input,input[type=password].custom-input,input[type=number].custom-input,input[type=email].custom-input,input[type=tel].custom-input,input[type=list].custom-input,input[type=dropdown].custom-input,input[type=location].custom-input{width:100%;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}input.nxt-custom-input{width:100%!important;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.custom-input:-webkit-autofill:active,.nxt-custom-input:-webkit-autofill,.nxt-custom-input:-webkit-autofill:hover,.nxt-custom-input:-webkit-autofill:focus,.nxt-custom-input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important;-webkit-text-fill-color:inherit!important}.phone-input-container{display:flex;align-items:center;position:relative}.country-selector{display:flex;align-items:center;cursor:pointer;padding-right:12px;border-right:#ccc;margin-right:12px}.flag{margin-right:8px;font-size:20px}.dial-code{margin-right:8px;font-weight:500}.country-dropdown{position:absolute;top:100%;left:0;width:300px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:4px}.search-box{padding:8px;border-bottom:1px solid #ccc}.search-box input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.country-list{max-height:200px;overflow-y:auto}.country-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer}.country-item:hover{background-color:color-mix(in srgb,#fff,rgba(0,0,0,0) 30%)}.country-item .name{flex:1;margin:0 12px}.fcOtp{width:40px;height:40px;text-align:center;font-size:18px;border:1px solid #ccc;border-radius:5px;margin:5px;outline:none;transition:border-color .2s ease-in-out}input:focus{outline:none;border-color:transparent;box-shadow:none}.input-container{display:flex;align-items:center;width:100%;border-radius:5px;border:1px solid #ccc;padding-left:5px;padding-right:5px}.icon-container{right:15px;padding-right:5px;pointer-events:auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center}.input-container.invalid{border:1px solid #DC3545!important;border-radius:5px}.checkbox-padding{margin-top:20px!important;padding:13px!important;width:100%!important;border:none!important}.view-mode{font-size:14px;color:#333}@media print{.view-mode{font-size:12pt;color:#000}}input::placeholder{font-family:var(--placeholder-font);color:var(--placeholder-color);font-size:var(--placeholder-size);font-weight:var(--placeholder-weight)}.dotted-loader{position:relative;width:10px;height:10px}.dotted-loader .dot{--i: 0;position:absolute;top:50%;left:50%;width:3px;height:3px;margin:-2px 0 0 -2px;border-radius:50%;background-color:#696969;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg));animation:spinDot 1s linear infinite;animation-delay:calc(var(--i) * .1s)}@keyframes spinDot{0%{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}50%{opacity:1;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(1.3)}to{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}}input:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important;border:none!important}textarea:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}.quill-view-content{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}.quill-view-content{background-color:#f0f0f0;border-radius:5px;border:none;padding:10px;font-size:14px;overflow-wrap:break-word}.quill-view-content .ql-editor{white-space:normal;overflow:visible;min-height:auto}[dir=rtl] .quill-view-content *,.rtl .quill-view-content *{text-align:right!important;direction:rtl!important}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled,textarea:disabled,.quill-view-content{color:#999!important}input:disabled.from-nxt-table,textarea:disabled.from-nxt-table,.quill-view-content.from-nxt-table{color:#2c3137!important}.owl-dt-container-disabled,.owl-dt-trigger-disabled{opacity:unset!important}.input-wrapper{position:relative}.input-container{pointer-events:auto!important;position:relative}.custom-input,.nxt-custom-input{pointer-events:auto!important}.hijri-popup{position:absolute;top:100%;right:0;z-index:9999;background:#fff;box-shadow:0 2px 10px #0003;padding:10px;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.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: i7.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i7.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i7.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"] }, { kind: "component", type: HijriDatepickerComponent, selector: "app-hijri-datepicker", inputs: ["type", "value"], outputs: ["dateChange"] }, { kind: "pipe", type: NxtDatePipe, name: "NxtDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7494
7494
|
}
|
|
7495
7495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NxtInput, decorators: [{
|
|
7496
7496
|
type: Component,
|
|
@@ -7505,7 +7505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
7505
7505
|
useExisting: forwardRef(() => NxtInput),
|
|
7506
7506
|
multi: true,
|
|
7507
7507
|
},
|
|
7508
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- SKS31JAN25 -->\n<div class=\"hover-wrapper input-wrapper\" (document:click)=\"closeDropdown($event)\">\n <div>\n <div *ngIf=\"label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n 'padding-top': type === 'label' ? '10px' : '',\n 'padding-bottom': type === 'label' ? '10px' : ''\n }\" [style.font-weight]=\"labelWeight || type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n style=\"display: flex; gap: 5px;\"> {{ 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' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n [class.invalid]=\"control.invalid && control.touched\"\n [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.margin-top]=\"showLabel && label ? from === 'nxtTable' ? '0px !important' : '' : from === 'nxtTable' || from === 'normalDropDown' ? '0px !important' : '21px !important'\"\n [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\"\n style=\"position: relative; width: 100%;\">\n <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n <div *ngIf=\"mode === 'edit' && type === 'list'\">\n <!-- Inline search icon SVG -->\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"1.5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n <circle cx=\"8.25\" cy=\"8.25\" r=\"5.25\" />\n <path d=\"M15 15L12.75 12.75\" stroke-linecap=\"round\" />\n </svg>\n </div>\n <!-- SKS28FEB25 mobile number input -->\n <div *ngIf=\"type === 'tel'\" class=\"phone-input-container\">\n <div class=\"country-selector\" style=\"padding-left: 10px;\"\n (click)=\"toggleCountryDropdown()\">\n <!-- <span class=\"flag\">{{ selectedCountry.flag }}</span> -->\n <span class=\"dial-code\" [style.font-size]=\"inputValueSize\">{{ selectedCountry.dial_code }}</span>\n <svg class=\"arrow\" width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M0.684136 0.767477C0.922999 0.5378 1.30282 0.545248 1.5325 0.784111L4.5 3.93431L7.4675 0.784111C7.69718 0.545248 8.077 0.5378 8.31587 0.767477C8.55473 0.997153 8.56218 1.37698 8.3325 1.61584L4.9325 5.21584C4.81938 5.33349 4.66321 5.39998 4.5 5.39998C4.33679 5.39998 4.18062 5.33349 4.0675 5.21584L0.667501 1.61584C0.437825 1.37698 0.445272 0.997153 0.684136 0.767477Z\"\n fill=\"#626262\" />\n </svg>\n </div>\n <div *ngIf=\"showCountryDropdown\" class=\"country-dropdown\">\n <div class=\"search-box\">\n <input type=\"text\" [readOnly]=\"mode !== 'edit'\" placeholder=\"Search country...\" [value]=\"countrySearch\"\n (input)=\"filterCountries($event)\">\n </div>\n <div class=\"country-list\">\n <div *ngFor=\"let country of filteredCountries\" class=\"country-item\" (click)=\"selectCountry(country)\">\n <span class=\"flag\">{{ country.flag }}</span>\n <span class=\"name\">{{ country.name }}</span>\n <span class=\"dial-code\">{{ country.dial_code }}</span>\n </div>\n </div>\n </div>\n </div>\n @if(type !== 'datetime' && type !== 'date' && type !== 'time' && type !== 'month'){\n <input *ngFor=\"let input of cachedInputList; let i = index\" #inputEl #inputRef [id]=\"inputId\"\n [type]=\"isPasswordVisible ? 'text' : type === 'otp' || type === 'dropdown' ? 'text' : type\"\n [attr.placeholder]=\"type === 'otp' || mode !== 'edit' ? '' : placeholder || (type === 'tel' ? removeDialCode(selectedCountry.placeholder) : label)\"\n [formControl]=\"type === 'otp' ? $any(input) : control\"\n [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n [style.border]=\"type === 'otp' || mode !== 'edit' ? '' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '' : type === 'checkbox' ? 'auto' : inputWidth\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [value]=\"type === 'tel' ? rawInputVal : value\"\n (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\n [checked]=\"type === 'checkbox' ? value : ''\"\n [style.font-size]=\"type === 'otp' ? '' : inputValueSize\" (focus)=\"type === 'otp' ? handleFocus($event) : null\"\n (blur)=\"type === 'otp' ? onTouched() : blurEmit()\"\n (keypress)=\"type === 'otp' ? handleKeyPress($event, i) : null\"\n (keydown)=\"type === 'otp' ? handleKeyDown($event, i) : from === 'normalDropDown' ? $event.preventDefault() : null\"\n (paste)=\"type === 'otp' ? handlePaste($event, i) : null\" inputmode=\"type === 'otp' ? numeric : null\"\n [attr.autocomplete]=\"type === 'otp' && i === 0 ? 'one-time-code' : type === 'list' ? 'list' : 'off'\"\n [attr.aria-expanded]=\"type === 'list' ? showSuggestion : 'off'\"\n [attr.inputmode]=\"type === 'otp' ? 'numeric' : null\" [attr.name]=\"type === 'otp' && i === 0 ? 'otp' : null\"\n (focusin)=\"focusinEmit($event)\" [attr.aria-owns]=\"type === 'list' ? ariaOwns : 'off'\"\n [attr.aria-haspopup]=\"type === 'list' ? ariaHasPopup : 'off'\" \n [readonly]=\"from === 'normalDropDown'\" \n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" (keydown.enter)=\"type === 'location' ? $event.preventDefault() : ''\"\n autocorrect=\"type === 'location' ? 'off' : ''\" autocapitalize=\"type === 'location' ? 'off' : ''\"\n spellcheck=\"type === 'location' ? 'off' : ''\" \n />\n }\n @else if(type === 'time' || type === 'month'){\n @if(languageCode !== 'ar'){\n <input #inputEl [id]=\"inputId\"\n [type]=\"type\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || 'HH:MM'\"\n [ngClass]=\"'nxt-custom-input'\"\n [formControl]=\"control\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (input)=\"onInputChange($event)\"\n [attr.autocomplete]=\"'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 }\" style=\"\n width: 100% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n }\n @else {\n <div style=\"position: relative; width: 100%;\">\n <input [id]=\"inputId\"\n type=\"text\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'time' ? 'HH:MM' : 'YYYY/MM' \"\n [ngClass]=\"'nxt-custom-input'\" \n [value]=\"displayedHijriDate | NxtDate : type : languageCode\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (focus)=\"onHijriInputClick(); $event.stopPropagation()\"\n (click)=\"onHijriInputClick();\"\n [style.direction]=\"'rtl'\"\n [attr.autocomplete]=\"'off'\"\n [attr.readonly]=\"'true'\"\n [class]=\"'nxt-' + (question.nxtTableId || question.id)\"\n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" style=\"\n width: 100% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n <!-- Hijri Datepicker Popup -->\n <div *ngIf=\"showHijriPicker\" class=\"hijri-popup\" [class]=\"'nxt-' + (question.nxtTableId || question.id)\">\n <app-hijri-datepicker\n [type]=\"type\"\n [value]=\"displayedHijriDate\"\n (dateChange)=\"onInputChange($event);\"\n ></app-hijri-datepicker>\n </div>\n </div>\n }\n }\n \n @else if( type === 'datetime' || type === 'date'){\n @if(languageCode !== 'ar'){\n <input #inputEl [id]=\"inputId\"\n [owlDateTimeTrigger]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : dt\"\n [owlDateTime]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : dt\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'DD/MM/YYYY HH:MM' : type === 'date' ? 'DD/MM/YYYY' : 'DD/MM/YYYY HH:MM'\"\n [ngClass]=\"'nxt-custom-input'\"\n [formControl]=\"control\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (dateTimeInput)=\"onInputChange($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% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n <owl-date-time #dt></owl-date-time>\n <owl-date-time [pickerType]=\"'calendar'\" #dt2></owl-date-time>\n }\n @else {\n <div style=\"position: relative; width: 100%;\">\n <input [id]=\"inputId\"\n type=\"text\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'YYYY/MM/DD-HH:MM' : 'YYYY/MM/DD'\"\n [ngClass]=\"'nxt-custom-input'\" \n [value]=\"displayedHijriDate | NxtDate : type : languageCode\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (focus)=\"onHijriInputClick(); $event.stopPropagation()\"\n (click)=\"onHijriInputClick();\"\n [style.direction]=\"'rtl'\"\n [attr.autocomplete]=\"'off'\"\n [attr.readonly]=\"'true'\"\n [class]=\"'nxt-' + (question.nxtTableId || question.id)\"\n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" style=\"\n width: 100% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n <!-- SKS7AUG25 Hijri Datepicker Popup -->\n <div *ngIf=\"showHijriPicker\" class=\"hijri-popup\" [class]=\"'nxt-' + (question.nxtTableId || question.id)\">\n <app-hijri-datepicker\n [type]=\"type\"\n [value]=\"displayedHijriDate\"\n (dateChange)=\"onInputChange($event);\"\n ></app-hijri-datepicker>\n </div>\n </div>\n }\n } \n <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date')\" (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 <!-- SKS7AUG25 api call Dotted Loader -->\n <div *ngIf=\"mode === 'edit' && isLoading\" class=\"dotted-loader\" aria-label=\"Loading\" role=\"status\">\n <span *ngFor=\"let dot of [].constructor(6); let i = index\" class=\"dot\" [style.--i]=\"i\"></span>\n </div>\n <div *ngIf=\"mode === 'edit' && type === 'list'\">\n <svg *ngIf=\"!isLoading\" (click)=\"removeValue()\" (keydown.enter)=\"removeValue()\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer;\">\n <path d=\"M9.16992 14.8299L14.8299 9.16992\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14.8299 14.8299L9.16992 9.16992\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\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\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n </div>\n <label class=\"checkboxLab\" *ngIf=\"label && type === 'checkbox' && showLabel\" [style.font-weight]=\"labelWeight\"\n [style.font-size]=\"labelSize\" [style.color]=\"labelColor || '#9a9a9a'\"\n style=\"margin-bottom: 0; padding-left: 10px; padding-right: 10px; width: 100% !important;\"> {{ label }}\n <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n </label> \n <!-- Always Show Dropdown Icon -->\n <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 && from !== 'nxtTable' \" 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; display: flex; align-items: center;\">\n <svg *ngIf=\"!isSaveHovered\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#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=\"16\" height=\"16\" 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 style=\" display: flex; align-items: center;\">\n <svg *ngIf=\"!isDiscardHovered\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n\n <svg *ngIf=\"isDiscardHovered\" (click)=\"discardChanges()\" width=\"16\" height=\"16\" 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 </div>\n <div *ngIf=\"type !== 'label' && type !== 'checkbox' && (type === 'richtext' || type === 'textarea')\" style=\"display: flex;\">\n <div class=\"input-container\"\n [style.margin-top]=\"showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' : '21px !important'\"\n [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n [class.invalid]=\"control.invalid && control.touched\"\n [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n <!-- SKS14JUN25 Dynamically load Quill editor toolbar -->\n <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" (ngModelChange)=\"onInputChange($event)\" [placeholder]=\"placeholder\"\n [readOnly]=\"mode !== 'edit' || question?.isReadOnly\"\n (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n [modules]=\"getQuillModules(question.id)\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n style=\"width: 100%;\n border-radius: 5px;\n border: none;\n font-size: 14px;\">\n </quill-editor>\n <!-- View mode -->\n <div *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content ql-container ql-snow\"\n style=\"width: 98.5%;\n border-radius: 5px;\n border: none;\n font-size: 14px;\">\n <div class=\"ql-editor\" [innerHTML]=\"value\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.text-align]=\"direction === 'rtl' ? 'right' : '' \"\n [attr.dir]='direction'\n ></div>\n </div>\n <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"from === 'nxtTable' ? 1 : rows\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder\" [ngClass]=\"'custom-input'\"\n [formControl]=\"control\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder\"\n [style.height]=\"inputHeight\" [value]=\"value\" (input)=\" onInputChange($event)\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n [readOnly]=\"mode !== 'edit' || question?.isReadOnly\" [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" \n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n style=\"\n width: 100%;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\"\n >\n </textarea>\n <svg *ngIf=\"mode !== 'edit' && !viewEdit && from !== 'nxtTable' && (type === 'richtext' || type === 'textarea') && !question?.isReadOnly\"\n class=\"edit-icon\" (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <!-- SKS23APR25 Use control.invalid to show error on submit click -->\n <div *ngIf=\"type != 'checkbox' && type !== 'label' && control.invalid && (control.touched || control.dirty)\" style=\"height: 20px;\">\n <div class=\"error-message\">\n {{ getErrorMessage() }}\n </div>\n </div>\n </div>\n</div>", styles: ["label{font-size:14px;margin-bottom:10px;color:color-mix(in srgb,black,rgb(0,0,0) 80%)}.toggle-icon{width:20px;height:20px;cursor:pointer;fill:#666}.error-message{color:red;font-size:12px}input[type=text].custom-input,input[type=password].custom-input,input[type=number].custom-input,input[type=email].custom-input,input[type=tel].custom-input,input[type=list].custom-input,input[type=dropdown].custom-input,input[type=location].custom-input{width:100%;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}input.nxt-custom-input{width:100%!important;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.custom-input:-webkit-autofill:active,.nxt-custom-input:-webkit-autofill,.nxt-custom-input:-webkit-autofill:hover,.nxt-custom-input:-webkit-autofill:focus,.nxt-custom-input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important;-webkit-text-fill-color:inherit!important}.phone-input-container{display:flex;align-items:center;position:relative}.country-selector{display:flex;align-items:center;cursor:pointer;padding-right:12px;border-right:#ccc;margin-right:12px}.flag{margin-right:8px;font-size:20px}.dial-code{margin-right:8px;font-weight:500}.country-dropdown{position:absolute;top:100%;left:0;width:300px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:4px}.search-box{padding:8px;border-bottom:1px solid #ccc}.search-box input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.country-list{max-height:200px;overflow-y:auto}.country-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer}.country-item:hover{background-color:color-mix(in srgb,#fff,rgba(0,0,0,0) 30%)}.country-item .name{flex:1;margin:0 12px}.fcOtp{width:40px;height:40px;text-align:center;font-size:18px;border:1px solid #ccc;border-radius:5px;margin:5px;outline:none;transition:border-color .2s ease-in-out}input:focus{outline:none;border-color:transparent;box-shadow:none}.input-container{display:flex;align-items:center;width:100%;border-radius:5px;border:1px solid #ccc;padding-left:5px;padding-right:5px}.icon-container{right:15px;padding-right:5px;pointer-events:auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center}.input-container.invalid{border:1px solid #DC3545!important;border-radius:5px}.checkbox-padding{margin-top:20px!important;padding:13px!important;width:100%!important;border:none!important}.view-mode{font-size:14px;color:#333}@media print{.view-mode{font-size:12pt;color:#000}}input::placeholder{font-family:var(--placeholder-font);color:var(--placeholder-color);font-size:var(--placeholder-size);font-weight:var(--placeholder-weight)}.dotted-loader{position:relative;width:10px;height:10px}.dotted-loader .dot{--i: 0;position:absolute;top:50%;left:50%;width:3px;height:3px;margin:-2px 0 0 -2px;border-radius:50%;background-color:#696969;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg));animation:spinDot 1s linear infinite;animation-delay:calc(var(--i) * .1s)}@keyframes spinDot{0%{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}50%{opacity:1;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(1.3)}to{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}}input:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important;border:none!important}textarea:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}.quill-view-content{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}.quill-view-content{background-color:#f0f0f0;border-radius:5px;border:none;padding:10px;font-size:14px;overflow-wrap:break-word}.quill-view-content .ql-editor{white-space:normal;overflow:visible;min-height:auto}[dir=rtl] .quill-view-content *,.rtl .quill-view-content *{text-align:right!important;direction:rtl!important}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled,textarea:disabled,.quill-view-content{color:#999!important}input:disabled.from-nxt-table,textarea:disabled.from-nxt-table,.quill-view-content.from-nxt-table{color:#2c3137!important}.owl-dt-container-disabled,.owl-dt-trigger-disabled{opacity:unset!important}.input-wrapper{position:relative}.input-container{pointer-events:auto!important;position:relative}.custom-input,.nxt-custom-input{pointer-events:auto!important}.hijri-popup{position:absolute;top:100%;right:0;z-index:9999;background:#fff;box-shadow:0 2px 10px #0003;padding:10px;border-radius:6px}\n"] }]
|
|
7508
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- SKS31JAN25 -->\n<div class=\"hover-wrapper input-wrapper\" (document:click)=\"closeDropdown($event)\">\n <div>\n <div *ngIf=\"label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n 'padding-top': type === 'label' ? '10px' : '',\n 'padding-bottom': type === 'label' ? '10px' : ''\n }\" [style.font-weight]=\"labelWeight || type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n style=\"display: flex; gap: 5px;\"> {{ 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' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n [class.invalid]=\"control.invalid && control.touched\"\n [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.margin-top]=\"showLabel && label ? from === 'nxtTable' ? '0px !important' : '' : from === 'nxtTable' || from === 'normalDropDown' ? '0px !important' : '21px !important'\"\n [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\"\n style=\"position: relative; width: 100%;\">\n <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n <div *ngIf=\"mode === 'edit' && type === 'list'\">\n <!-- Inline search icon SVG -->\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"1.5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n <circle cx=\"8.25\" cy=\"8.25\" r=\"5.25\" />\n <path d=\"M15 15L12.75 12.75\" stroke-linecap=\"round\" />\n </svg>\n </div>\n <!-- SKS28FEB25 mobile number input -->\n <div *ngIf=\"type === 'tel'\" class=\"phone-input-container\">\n <div class=\"country-selector\" style=\"padding-left: 10px;\"\n (click)=\"toggleCountryDropdown()\">\n <!-- <span class=\"flag\">{{ selectedCountry.flag }}</span> -->\n <span class=\"dial-code\" [style.font-size]=\"inputValueSize\">{{ selectedCountry.dial_code }}</span>\n <svg class=\"arrow\" width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M0.684136 0.767477C0.922999 0.5378 1.30282 0.545248 1.5325 0.784111L4.5 3.93431L7.4675 0.784111C7.69718 0.545248 8.077 0.5378 8.31587 0.767477C8.55473 0.997153 8.56218 1.37698 8.3325 1.61584L4.9325 5.21584C4.81938 5.33349 4.66321 5.39998 4.5 5.39998C4.33679 5.39998 4.18062 5.33349 4.0675 5.21584L0.667501 1.61584C0.437825 1.37698 0.445272 0.997153 0.684136 0.767477Z\"\n fill=\"#626262\" />\n </svg>\n </div>\n <div *ngIf=\"showCountryDropdown\" class=\"country-dropdown\">\n <div class=\"search-box\">\n <input type=\"text\" [readOnly]=\"mode !== 'edit'\" placeholder=\"Search country...\" [value]=\"countrySearch\"\n (input)=\"filterCountries($event)\">\n </div>\n <div class=\"country-list\">\n <div *ngFor=\"let country of filteredCountries\" class=\"country-item\" (click)=\"selectCountry(country)\">\n <span class=\"flag\">{{ country.flag }}</span>\n <span class=\"name\">{{ country.name }}</span>\n <span class=\"dial-code\">{{ country.dial_code }}</span>\n </div>\n </div>\n </div>\n </div>\n @if(type !== 'datetime' && type !== 'date' && type !== 'time' && type !== 'month'){\n <input *ngFor=\"let input of cachedInputList; let i = index\" #inputEl #inputRef [id]=\"inputId\"\n [type]=\"isPasswordVisible ? 'text' : type === 'otp' || type === 'dropdown' ? 'text' : type\"\n [attr.placeholder]=\"type === 'otp' || mode !== 'edit' ? '' : placeholder || (type === 'tel' ? removeDialCode(selectedCountry.placeholder) : label)\"\n [formControl]=\"type === 'otp' ? $any(input) : control\"\n [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n [style.border]=\"type === 'otp' || mode !== 'edit' ? '' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '100%' : type === 'checkbox' ? 'auto' : inputWidth\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [value]=\"type === 'tel' ? rawInputVal : value\"\n (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\n [checked]=\"type === 'checkbox' ? value : ''\"\n [style.font-size]=\"type === 'otp' ? '' : inputValueSize\" (focus)=\"type === 'otp' ? handleFocus($event) : null\"\n (blur)=\"type === 'otp' ? onTouched() : blurEmit()\"\n (keypress)=\"type === 'otp' ? handleKeyPress($event, i) : null\"\n (keydown)=\"type === 'otp' ? handleKeyDown($event, i) : from === 'normalDropDown' ? $event.preventDefault() : null\"\n (paste)=\"type === 'otp' ? handlePaste($event, i) : null\" inputmode=\"type === 'otp' ? numeric : null\"\n [attr.autocomplete]=\"type === 'otp' && i === 0 ? 'one-time-code' : type === 'list' ? 'list' : 'off'\"\n [attr.aria-expanded]=\"type === 'list' ? showSuggestion : 'off'\"\n [attr.inputmode]=\"type === 'otp' ? 'numeric' : null\" [attr.name]=\"type === 'otp' && i === 0 ? 'otp' : null\"\n (focusin)=\"focusinEmit($event)\" [attr.aria-owns]=\"type === 'list' ? ariaOwns : 'off'\"\n [attr.aria-haspopup]=\"type === 'list' ? ariaHasPopup : 'off'\" \n [readonly]=\"from === 'normalDropDown'\" \n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" (keydown.enter)=\"type === 'location' ? $event.preventDefault() : ''\"\n autocorrect=\"type === 'location' ? 'off' : ''\" autocapitalize=\"type === 'location' ? 'off' : ''\"\n spellcheck=\"type === 'location' ? 'off' : ''\" \n />\n }\n @else if(type === 'time' || type === 'month'){\n @if(languageCode !== 'ar'){\n <input #inputEl [id]=\"inputId\"\n [type]=\"type\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || 'HH:MM'\"\n [ngClass]=\"'nxt-custom-input'\"\n [formControl]=\"control\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (input)=\"onInputChange($event)\"\n [attr.autocomplete]=\"'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 }\" style=\"\n width: 100% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n }\n @else {\n <div style=\"position: relative; width: 100%;\">\n <input [id]=\"inputId\"\n type=\"text\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'time' ? 'HH:MM' : 'YYYY/MM' \"\n [ngClass]=\"'nxt-custom-input'\" \n [value]=\"displayedHijriDate | NxtDate : type : languageCode\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (focus)=\"onHijriInputClick(); $event.stopPropagation()\"\n (click)=\"onHijriInputClick();\"\n [style.direction]=\"'rtl'\"\n [attr.autocomplete]=\"'off'\"\n [attr.readonly]=\"'true'\"\n [class]=\"'nxt-' + (question.nxtTableId || question.id)\"\n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" style=\"\n width: 100% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n <!-- Hijri Datepicker Popup -->\n <div *ngIf=\"showHijriPicker\" class=\"hijri-popup\" [class]=\"'nxt-' + (question.nxtTableId || question.id)\">\n <app-hijri-datepicker\n [type]=\"type\"\n [value]=\"displayedHijriDate\"\n (dateChange)=\"onInputChange($event);\"\n ></app-hijri-datepicker>\n </div>\n </div>\n }\n }\n \n @else if( type === 'datetime' || type === 'date'){\n @if(languageCode !== 'ar'){\n <input #inputEl [id]=\"inputId\"\n [owlDateTimeTrigger]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : dt\"\n [owlDateTime]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : dt\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'DD/MM/YYYY HH:MM' : type === 'date' ? 'DD/MM/YYYY' : 'DD/MM/YYYY HH:MM'\"\n [ngClass]=\"'nxt-custom-input'\"\n [formControl]=\"control\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (dateTimeInput)=\"onInputChange($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% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n <owl-date-time #dt></owl-date-time>\n <owl-date-time [pickerType]=\"'calendar'\" #dt2></owl-date-time>\n }\n @else {\n <div style=\"position: relative; width: 100%;\">\n <input [id]=\"inputId\"\n type=\"text\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'YYYY/MM/DD-HH:MM' : 'YYYY/MM/DD'\"\n [ngClass]=\"'nxt-custom-input'\" \n [value]=\"displayedHijriDate | NxtDate : type : languageCode\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n [style.height]=\"inputHeight\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n (focus)=\"onHijriInputClick(); $event.stopPropagation()\"\n (click)=\"onHijriInputClick();\"\n [style.direction]=\"'rtl'\"\n [attr.autocomplete]=\"'off'\"\n [attr.readonly]=\"'true'\"\n [class]=\"'nxt-' + (question.nxtTableId || question.id)\"\n [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" style=\"\n width: 100% !important;\n padding: 10px;\n padding-left: 5px;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\" \n />\n <!-- SKS7AUG25 Hijri Datepicker Popup -->\n <div *ngIf=\"showHijriPicker\" class=\"hijri-popup\" [class]=\"'nxt-' + (question.nxtTableId || question.id)\">\n <app-hijri-datepicker\n [type]=\"type\"\n [value]=\"displayedHijriDate\"\n (dateChange)=\"onInputChange($event);\"\n ></app-hijri-datepicker>\n </div>\n </div>\n }\n } \n <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date')\" (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 <!-- SKS7AUG25 api call Dotted Loader -->\n <div *ngIf=\"mode === 'edit' && isLoading\" class=\"dotted-loader\" aria-label=\"Loading\" role=\"status\">\n <span *ngFor=\"let dot of [].constructor(6); let i = index\" class=\"dot\" [style.--i]=\"i\"></span>\n </div>\n <div *ngIf=\"mode === 'edit' && type === 'list'\">\n <svg *ngIf=\"!isLoading\" (click)=\"removeValue()\" (keydown.enter)=\"removeValue()\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer;\">\n <path d=\"M9.16992 14.8299L14.8299 9.16992\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14.8299 14.8299L9.16992 9.16992\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\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\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n </div>\n <label class=\"checkboxLab\" *ngIf=\"label && type === 'checkbox' && showLabel\" [style.font-weight]=\"labelWeight\"\n [style.font-size]=\"labelSize\" [style.color]=\"labelColor || '#9a9a9a'\"\n style=\"margin-bottom: 0; padding-left: 10px; padding-right: 10px; width: 100% !important;\"> {{ label }}\n <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n </label> \n <!-- Always Show Dropdown Icon -->\n <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 && from !== 'nxtTable' \" 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; display: flex; align-items: center;\">\n <svg *ngIf=\"!isSaveHovered\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#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=\"16\" height=\"16\" 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 style=\" display: flex; align-items: center;\">\n <svg *ngIf=\"!isDiscardHovered\" width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n\n <svg *ngIf=\"isDiscardHovered\" (click)=\"discardChanges()\" width=\"16\" height=\"16\" 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 </div>\n <div *ngIf=\"type !== 'label' && type !== 'checkbox' && (type === 'richtext' || type === 'textarea')\" style=\"display: flex;\">\n <div class=\"input-container\"\n [style.margin-top]=\"showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' : '21px !important'\"\n [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n [class.invalid]=\"control.invalid && control.touched\"\n [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n <!-- SKS14JUN25 Dynamically load Quill editor toolbar -->\n <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" (ngModelChange)=\"onInputChange($event)\" [placeholder]=\"placeholder\"\n [readOnly]=\"mode !== 'edit' || question?.isReadOnly\"\n (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n [modules]=\"getQuillModules(question.id)\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n style=\"width: 100%;\n border-radius: 5px;\n border: none;\n font-size: 14px;\">\n </quill-editor>\n <!-- View mode -->\n <div *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content ql-container ql-snow\"\n style=\"width: 98.5%;\n border-radius: 5px;\n border: none;\n font-size: 14px;\">\n <div class=\"ql-editor\" [innerHTML]=\"value\"\n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n [style.text-align]=\"direction === 'rtl' ? 'right' : '' \"\n [attr.dir]='direction'\n ></div>\n </div>\n <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"from === 'nxtTable' ? 1 : rows\"\n [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder\" [ngClass]=\"'custom-input'\"\n [formControl]=\"control\"\n [style.backgroundColor]=\"mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder\"\n [style.height]=\"inputHeight\" [value]=\"value\" (input)=\" onInputChange($event)\"\n [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n [readOnly]=\"mode !== 'edit' || question?.isReadOnly\" [ngStyle]=\"{\n '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n }\" \n [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n style=\"\n width: 100%;\n border-radius: 5px;\n border: none !important;\n font-size: 14px;\"\n >\n </textarea>\n <svg *ngIf=\"mode !== 'edit' && !viewEdit && from !== 'nxtTable' && (type === 'richtext' || type === 'textarea') && !question?.isReadOnly\"\n class=\"edit-icon\" (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <!-- SKS23APR25 Use control.invalid to show error on submit click -->\n <div *ngIf=\"type != 'checkbox' && type !== 'label' && control.invalid && (control.touched || control.dirty)\" style=\"height: 20px;\">\n <div class=\"error-message\">\n {{ getErrorMessage() }}\n </div>\n </div>\n </div>\n</div>", styles: ["label{font-size:14px;margin-bottom:10px;color:color-mix(in srgb,black,rgb(0,0,0) 80%)}.toggle-icon{width:20px;height:20px;cursor:pointer;fill:#666}.error-message{color:red;font-size:12px}input[type=text].custom-input,input[type=password].custom-input,input[type=number].custom-input,input[type=email].custom-input,input[type=tel].custom-input,input[type=list].custom-input,input[type=dropdown].custom-input,input[type=location].custom-input{width:100%;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}input.nxt-custom-input{width:100%!important;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.custom-input:-webkit-autofill:active,.nxt-custom-input:-webkit-autofill,.nxt-custom-input:-webkit-autofill:hover,.nxt-custom-input:-webkit-autofill:focus,.nxt-custom-input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important;-webkit-text-fill-color:inherit!important}.phone-input-container{display:flex;align-items:center;position:relative}.country-selector{display:flex;align-items:center;cursor:pointer;padding-right:12px;border-right:#ccc;margin-right:12px}.flag{margin-right:8px;font-size:20px}.dial-code{margin-right:8px;font-weight:500}.country-dropdown{position:absolute;top:100%;left:0;width:300px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:4px}.search-box{padding:8px;border-bottom:1px solid #ccc}.search-box input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.country-list{max-height:200px;overflow-y:auto}.country-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer}.country-item:hover{background-color:color-mix(in srgb,#fff,rgba(0,0,0,0) 30%)}.country-item .name{flex:1;margin:0 12px}.fcOtp{width:40px;height:40px;text-align:center;font-size:18px;border:1px solid #ccc;border-radius:5px;margin:5px;outline:none;transition:border-color .2s ease-in-out}input:focus{outline:none;border-color:transparent;box-shadow:none}.input-container{display:flex;align-items:center;width:100%;border-radius:5px;border:1px solid #ccc;padding-left:5px;padding-right:5px}.icon-container{right:15px;padding-right:5px;pointer-events:auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center}.input-container.invalid{border:1px solid #DC3545!important;border-radius:5px}.checkbox-padding{margin-top:20px!important;padding:13px!important;width:100%!important;border:none!important}.view-mode{font-size:14px;color:#333}@media print{.view-mode{font-size:12pt;color:#000}}input::placeholder{font-family:var(--placeholder-font);color:var(--placeholder-color);font-size:var(--placeholder-size);font-weight:var(--placeholder-weight)}.dotted-loader{position:relative;width:10px;height:10px}.dotted-loader .dot{--i: 0;position:absolute;top:50%;left:50%;width:3px;height:3px;margin:-2px 0 0 -2px;border-radius:50%;background-color:#696969;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg));animation:spinDot 1s linear infinite;animation-delay:calc(var(--i) * .1s)}@keyframes spinDot{0%{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}50%{opacity:1;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(1.3)}to{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}}input:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important;border:none!important}textarea:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}.quill-view-content{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}.quill-view-content{background-color:#f0f0f0;border-radius:5px;border:none;padding:10px;font-size:14px;overflow-wrap:break-word}.quill-view-content .ql-editor{white-space:normal;overflow:visible;min-height:auto}[dir=rtl] .quill-view-content *,.rtl .quill-view-content *{text-align:right!important;direction:rtl!important}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled,textarea:disabled,.quill-view-content{color:#999!important}input:disabled.from-nxt-table,textarea:disabled.from-nxt-table,.quill-view-content.from-nxt-table{color:#2c3137!important}.owl-dt-container-disabled,.owl-dt-trigger-disabled{opacity:unset!important}.input-wrapper{position:relative}.input-container{pointer-events:auto!important;position:relative}.custom-input,.nxt-custom-input{pointer-events:auto!important}.hijri-popup{position:absolute;top:100%;right:0;z-index:9999;background:#fff;box-shadow:0 2px 10px #0003;padding:10px;border-radius:6px}\n"] }]
|
|
7509
7509
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: StorageService }, { type: TranslationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ElementRef }, { type: ChangeService }, { type: DataService }], propDecorators: { label: [{
|
|
7510
7510
|
type: Input
|
|
7511
7511
|
}], labelFont: [{
|
|
@@ -8284,7 +8284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8284
8284
|
}] });
|
|
8285
8285
|
|
|
8286
8286
|
class NxtGetValuePipe {
|
|
8287
|
-
transform(element, column) {
|
|
8287
|
+
transform(element, column, type, ques) {
|
|
8288
8288
|
if (!element || !column)
|
|
8289
8289
|
return '';
|
|
8290
8290
|
const flds = column?.split('.');
|
|
@@ -8321,8 +8321,49 @@ class NxtGetValuePipe {
|
|
|
8321
8321
|
}
|
|
8322
8322
|
}
|
|
8323
8323
|
}
|
|
8324
|
+
if (type === 'list') {
|
|
8325
|
+
return this.listDataGet(element, ques);
|
|
8326
|
+
}
|
|
8324
8327
|
return element;
|
|
8325
8328
|
}
|
|
8329
|
+
// SKS11AUG25 list data get function
|
|
8330
|
+
listDataGet(event, ques) {
|
|
8331
|
+
const values = this.getValues(event, ques?.question?.subText?.field);
|
|
8332
|
+
const displayValue = Object.values(values)
|
|
8333
|
+
.filter(val => val)
|
|
8334
|
+
.join(' | ');
|
|
8335
|
+
return displayValue;
|
|
8336
|
+
}
|
|
8337
|
+
// SKS11AUG25 data get from array fields
|
|
8338
|
+
getValues(element, columns) {
|
|
8339
|
+
const result = {};
|
|
8340
|
+
if (!element || !columns)
|
|
8341
|
+
return result;
|
|
8342
|
+
const columnArray = Array.isArray(columns) ? columns : [columns];
|
|
8343
|
+
columnArray.forEach((column) => {
|
|
8344
|
+
if (!column)
|
|
8345
|
+
return;
|
|
8346
|
+
let tempElement = element;
|
|
8347
|
+
const fields = column.split('.');
|
|
8348
|
+
for (const field of fields) {
|
|
8349
|
+
if (!tempElement)
|
|
8350
|
+
break;
|
|
8351
|
+
const splitFields = field.split('[');
|
|
8352
|
+
if (splitFields.length === 1) {
|
|
8353
|
+
tempElement = tempElement[field];
|
|
8354
|
+
}
|
|
8355
|
+
else {
|
|
8356
|
+
const indexMatch = splitFields[1]?.match(/(\d+)\]/);
|
|
8357
|
+
if (indexMatch) {
|
|
8358
|
+
const index = Number(indexMatch[1]);
|
|
8359
|
+
tempElement = tempElement[splitFields[0]]?.[index];
|
|
8360
|
+
}
|
|
8361
|
+
}
|
|
8362
|
+
}
|
|
8363
|
+
result[column] = tempElement || '';
|
|
8364
|
+
});
|
|
8365
|
+
return result;
|
|
8366
|
+
}
|
|
8326
8367
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NxtGetValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
8327
8368
|
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NxtGetValuePipe, isStandalone: true, name: "getValue" });
|
|
8328
8369
|
}
|
|
@@ -55223,7 +55264,7 @@ class NxtDatatable {
|
|
|
55223
55264
|
this.cdRef.markForCheck();
|
|
55224
55265
|
}
|
|
55225
55266
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NxtDatatable, deps: [{ token: StorageService }, { token: i0.ChangeDetectorRef }, { token: TranslationService }, { token: i0.Renderer2 }, { token: DataService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
|
|
55226
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", tableFilterData: "tableFilterData", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter", isPagination: "isPagination", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta", summaryRows: "summaryRows", summaryColumns: "summaryColumns", isLoading: "isLoading", tableConfig: "tableConfig", tableParams: "tableParams", listViews: "listViews", mode: "mode", languageCode: "languageCode", selectedColumn: "selectedColumn", allIcons: "allIcons" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableParamsEmit: "NxtTableParamsEmit", NxtTableFilterEmit: "NxtTableFilterEmit", hadleDropDownDependent: "hadleDropDownDependent", NxtTableEmit: "NxtTableEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [attr.dir]=\"direction\" [dir]=\"direction\">\n <div>\n <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\"\n style=\"padding-bottom: 20px;\">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\" [listViews]=\"listViews\"\n [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\"\n (listViewEmit)=\"listViewEmit($event)\">\n </app-list-view-filter>\n <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\"\n style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n {{ 'NOS' | nxtCustomTranslate : 'Nos'}} </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\"\n (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n [value]=\"searchBoxValue || ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\"\n [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"from !== 'formBuilder' && mode === 'view'\" (click)=\"editModeChange()\" class=\"eicon-container\"\n matTooltip=\"{{ 'EDIT_TABLE' | nxtCustomTranslate : 'Edit Table' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"from !== 'formBuilder' && mode === 'edit'\" class=\"eicon-container\" (click)=\"discardChanges()\"\n matTooltip=\"{{ 'DISCARD' | nxtCustomTranslate : 'Discard' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"from !== 'formBuilder' && mode === 'edit'\" class=\"eicon-container\" (click)=\"saveTable()\"\n matTooltip=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#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 </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\"\n [ngClass]=\"{ 'resizing': isResizing }\"\n [ngStyle]=\"{ maxHeight: isPagination ? '450px' : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' ? '0px' : '100px' }\"\n #tableContainer (scroll)=\"onScroll(tableContainer)\">\n <ng-container>\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-cell sticky-column head-color\" [style.width]=\"'50px'\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n </div>\n\n <!--SKS15FEB25 Data Columns -->\n <ng-container *ngFor=\"let column of currentColumns; let i = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n class=\"table-cell tableHeader head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n [style.width]=\"(column.width || '50px')\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <div class=\"columnDiv\">\n <div class=\"column-header\" [style.width]=\"column.width || '50px'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n \u2715\n </div>\n <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n @if(column.labelPath){\n {{ column.labelPath | nxtCustomTranslate : column.label }}\n }\n @else if(from !== 'formBuilder') {\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n } \n @else if(column.uniqueIdentifier) {\n @if( ((column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label) !== column.uniqueIdentifier+'.label'){\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n }\n }\n @else {\n {{ column.label }}\n }\n </div>\n <div>\n <svg *ngIf=\"column.filter\"\n (click)=\"$event.stopPropagation(); filter(column.fieldName)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column.fieldName]?.length > 0\"\n cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"column.sort\"\n class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n class=\"search-component position-absolute\"\n (click)=\"$event.stopPropagation();\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Enhanced resize handle -->\n <div class=\"resize-handle\" \n [attr.resize-data-column-id]=\"column.uniqueIdentifier\"\n (mousedown)=\"onResizeStart($event)\"\n title=\"Drag to resize column\">\n </div>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\"\n class=\"table-cell head-color actionCol sticky-column\"\n [style.width]=\"'150px'\"\n style=\"padding: 12px !important;\">\n {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\" *ngIf=\"!isLoading\">\n <div *ngFor=\"let element of dataSource.data; let i = index; trackBy: trackByRow\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-col-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection.toggle(element), element)\"\n [checked]=\"selection.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n\n <!--SKS15FEB25 Data Cells -->\n <ng-container *ngFor=\"let column of currentColumns; let last = last; let c = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n class=\"table-col-cell body-color ellipsis\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n [style.width]=\"(column.width || '50px')\"\n [style.overflow]=\"element?.editRow ? 'unset' : ''\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <ng-container *ngIf=\"element?.editRow && mode === 'edit'; else viewMode\">\n <!-- edit mode content -->\n <div [ngSwitch]=\"column.type\">\n <!-- SKS22JUL25 calendar -->\n <div *ngSwitchCase=\"'calendar'\">\n <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model> -->\n </div>\n <!-- SKS22JUL25 for pick location -->\n <app-pick-location *ngSwitchCase=\"'location'\" [apiKey]=\"column['apiKey']\" [address]=\"question.selectedValue\" [question]=\"column | questionByRow:element:i\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (locationSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n </app-pick-location>\n <!-- SKS22JUL25 Image -->\n <div *ngSwitchCase=\"'image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageEdit(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageDelete(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div> -->\n <img *ngIf=\"column.question?.isReadOnly\" [src]=\"column.question?.imageData\" />\n <!-- <div *ngIf=\"!column.question?.isReadOnly\" class=\"logo-container\">\n Logo preview area\n <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n <img [src]=\"column.question?.imageData\" />\n </div>\n\n Upload button\n <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n </div>\n </div> -->\n </div>\n <!-- SKS22JUL25 icon-selector -->\n <nxt-icon-selector *ngSwitchCase=\"'icon'\" [allIcons]=\"allIcons\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n [labelColor]=\"column.question?.fontColor\"\n [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n </nxt-icon-selector>\n <!-- SKS22JUL25 line -->\n <hr *ngSwitchCase=\"'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS22JUL25 data table -->\n <nxt-datatable *ngSwitchCase=\"'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- SKS22JUL25 list -->\n <nxt-search-box *ngSwitchCase=\"'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.question?.isReadOnly\" [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" \n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n </nxt-search-box>\n <!-- SKS22JUL25 Dropdown -->\n <app-custom-dropdown *ngSwitchCase=\"'dropdown'\" [options]=\"column.question?.options\" [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" [selectedValue]=\"column.isShengel ? column.question?.input : column.question?.selectedValue\"\n placeholder=\"\"\n [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\" [referenceField]=\"column.question?.referenceField\"\n [readOnly]=\"column.question?.isReadOnly\" [question]=\"column | questionByRow:element:i\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </app-custom-dropdown>\n <!-- SKS22JUL25 custom-radio component -->\n <app-custom-radio *ngSwitchCase=\"'radio'\" [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n [selectedValue]=\"column.question?.selectedValue\" [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\"\n [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.question?.isReadOnly\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </app-custom-radio>\n <!-- SKS22JUL25 Attachment / Files -->\n <app-file-upload *ngSwitchCase=\"'file'\" [limitFileUploading]=\"5\" [error]=\"column.question?.error\" [question]=\"column | questionByRow:element:i\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </app-file-upload>\n <!-- SKS22JUL25 Button -->\n <nxt-button *ngSwitchCase=\"'button'\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n >\n </nxt-button>\n <!-- SKS22JUL25 book type -->\n <div *ngSwitchCase=\"'book'\">\n <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n (handleDropDown)=\"getDropDown($event)\">\n </lib-questionbook> -->\n </div>\n <!-- SKS10AUG25 object type element -->\n <div *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </div>\n <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngSwitchDefault \n [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"element | getValue: column.fieldName \"\n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n [labelColor]=\"column.question?.fontColor\"\n [labelSize]=\"column.question?.fontSize\"\n [inputValueSize]=\"column.question?.fontSize\"\n [labelWeight]=\"column.question?.fontWeight\"\n [inputWeight]=\"column.question?.fontWeight\"\n [showLabel]=\"column.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"column.question?.question\"\n [required]=\"column.question?.isOptional\" inputBgColor=\"#FAFAFA\"\n [inputId]=\"column.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n [minDate]=\"column.question?.minDate\"\n [rows]=\"3\"\n (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-input>\n </div>\n </ng-container>\n \n <ng-template #viewMode>\n <!-- SKS10AUG25 view mode content -->\n <ng-container [ngSwitch]=\"column.type\">\n <ng-container *ngSwitchCase=\"'file'\">\n @defer (on viewport) {\n <app-file-upload [limitFileUploading]=\"5\" [error]=\"column.question?.error\" [question]=\"column | questionByRow:element:i\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"(column | questionByRow:element:i)?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </app-file-upload>\n } @placeholder {\n <span class=\"skeleton-cell file-cell\"></span>\n }\n </ng-container>\n <ng-container *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" style=\"cursor: pointer;\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'boolean'\">\n <span *ngIf=\"(element | getValue: column.fieldName) === true || (element | getValue: column.fieldName) === 'true'\">\u2705</span>\n <span *ngIf=\"(element | getValue: column.fieldName) !== true && (element | getValue: column.fieldName) !== 'true'\">\u274C</span> \n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : column.type : languageCode}}</a></div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName}}</a></div>\n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\" class=\"table-col-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" (click)=\"onEdit(element)\"\n matTooltip=\"{{ 'EDIT_RECORD' | nxtCustomTranslate : 'Edit Record' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n\n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\" (click)=\"deleteRecord(element,i)\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : button.tooltip \"\n (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\">\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div\n style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Summary Rows -->\n <ng-container\n *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n <!-- Label in the first column -->\n <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n <!-- Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n </div> <!-- Value or input in the last column -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n </div>\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n <ng-container *ngIf=\"row.type === 'calculation'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(row.uniqueIdentifier)\">\n \u2715\n </div>\n {{ summaryValues[row.fieldName] | number }}\n </ng-container>\n <ng-container *ngIf=\"row.type === 'input'\">\n <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n (ngModelChange)=\"onSummaryInputChange()\"\n class=\"view-mode-text table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n </ng-container>\n </div>\n <!-- SKS20MAR25 Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n class=\"non-summary-table-cell\">\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"non-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n <!-- SKS13JUN25 full table summary row -->\n <ng-container *ngIf=\"isFullTableSummaryRow\">\n <div *ngFor=\"let row of summaryRows; let i = index; trackBy: trackBySummary\" class=\"table-row summary-row\">\n <!-- SKS13JUN25 Checkbox column (if enabled) -->\n <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n </div>\n\n <!-- SKS13JUN25 summary cell -->\n <div *ngFor=\"let col of currentColumns; let last = last; let i = index; trackBy: trackByColumn \"\n class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n @if (row?.columns?.includes(col.fieldName)) {\n {{ summaryValues[col.fieldName] | number }}\n }\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"horizontal-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n </ng-container>\n <!--SKS28MAR25 In the Loading section -->\n <div class=\"table-body\" *ngIf=\"isLoading\">\n <!-- Repeat for 5 skeleton rows -->\n <div *ngFor=\"let _ of [1,2,3,4,5]; trackBy: trackByIndex\" class=\"table-row\">\n <!-- Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n <!-- Data Columns -->\n <div *ngFor=\"let col of currentColumns; let i = index; trackBy: trackByColumn\" class=\"skeleton-cell \"></div>\n\n <!-- Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n </div>\n </div>\n </div>\n <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n Add / drags fields from elements sections\n </div> -->\n </div>\n </ng-container>\n </div>\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\"\n class=\"no-data\">\n {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div *ngIf=\"mode === 'edit'\" class=\"d-flex inlineAdd justify-content-end\">\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\n (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n viewBox=\"0 -960 960 960\" width=\"24\">\n <path\n d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n </svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder'\"\n buttonType=\"btn btn-primary\"\n (buttonClickEmit)=\"saveButton()\"\n buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| nxtCustomTranslate : 'Delete Record'}}</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n {{ 'ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">{{\n 'NO'| nxtCustomTranslate : 'No'}}</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteRecordData()\">{{ 'YES'| nxtCustomTranslate : 'Yes'}}</button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:auto;border-collapse:collapse;table-layout:fixed;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;min-height:40px}.table-cell,.table-col-cell{position:relative;min-width:50px;width:auto;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.actionCol .resize-handle{display:none}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:absolute;right:0;top:13px;width:1px;height:20px;cursor:col-resize;background:#b1b1b1;border:3px transparent;z-index:9;transition:background-color .2s ease}.resize-handle:hover{background:#ccc;opacity:.7}.resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;max-width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}[dir=rtl] .search-component{left:0}.rtl .ellipsis,[dir=rtl] .ellipsis{direction:rtl;text-align:right!important}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.view-mode-text{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .sort-indicators{padding-right:5px}[dir=rtl] .resize-handle{left:0!important;right:unset!important}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cell.file-cell{width:inherit!important;position:absolute!important;top:1px!important;height:30px!important;transition:all .2s!important}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #a8a1a1}.hyperlink-input{color:inherit;text-decoration:none;cursor:default}.hyperlink-input:hover{color:#00f!important;text-decoration:underline!important;cursor:pointer}\n"], dependencies: [{ kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i5$1.DecimalPipe, name: "number" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "buttonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: NxtSearchFilterPipe, name: "searchFilter" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: NxtGetValuePipe, name: "getValue" }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from"], outputs: ["searchValueChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token", "mode"], outputs: ["valueChange"] }, { kind: "component", type: NxtFileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "mode", "isShowNoFileIcon", "question", "error", "from"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit"] }, { kind: "component", type: ListViewFilterComponent, selector: "app-list-view-filter", inputs: ["listViews", "tableFilterArray", "selectedView", "displayedColumns", "availableOperators"], outputs: ["listViewEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "pipe", type: QuestionByRowPipe, name: "questionByRow" }, { kind: "pipe", type: NxtDatePipe, name: "NxtDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NxtFileUploadComponent,
|
|
55267
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", tableFilterData: "tableFilterData", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter", isPagination: "isPagination", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta", summaryRows: "summaryRows", summaryColumns: "summaryColumns", isLoading: "isLoading", tableConfig: "tableConfig", tableParams: "tableParams", listViews: "listViews", mode: "mode", languageCode: "languageCode", selectedColumn: "selectedColumn", allIcons: "allIcons" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableParamsEmit: "NxtTableParamsEmit", NxtTableFilterEmit: "NxtTableFilterEmit", hadleDropDownDependent: "hadleDropDownDependent", NxtTableEmit: "NxtTableEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [attr.dir]=\"direction\" [dir]=\"direction\">\n <div>\n <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\"\n style=\"padding-bottom: 20px;\">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\" [listViews]=\"listViews\"\n [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\"\n (listViewEmit)=\"listViewEmit($event)\">\n </app-list-view-filter>\n <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\"\n style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n {{ 'NOS' | nxtCustomTranslate : 'Nos'}} </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\"\n (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n [value]=\"searchBoxValue || ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\"\n [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'view'\" (click)=\"editModeChange()\" class=\"eicon-container\"\n matTooltip=\"{{ 'EDIT_TABLE' | nxtCustomTranslate : 'Edit Table' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit'\" class=\"eicon-container\" (click)=\"discardChanges()\"\n matTooltip=\"{{ 'DISCARD' | nxtCustomTranslate : 'Discard' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit'\" class=\"eicon-container\" (click)=\"saveTable()\"\n matTooltip=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#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 </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\"\n [ngClass]=\"{ 'resizing': isResizing }\"\n [ngStyle]=\"{ maxHeight: isPagination ? '450px' : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' ? '0px' : '100px' }\"\n #tableContainer (scroll)=\"onScroll(tableContainer)\">\n <ng-container>\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-cell sticky-column head-color\" [style.width]=\"'50px'\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n </div>\n\n <!--SKS15FEB25 Data Columns -->\n <ng-container *ngFor=\"let column of currentColumns; let i = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n class=\"table-cell tableHeader head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n [style.width]=\"(column.width || '50px')\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <div class=\"columnDiv\">\n <div class=\"column-header\" [style.width]=\"column.width || '50px'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n \u2715\n </div>\n <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n @if(column.labelPath){\n {{ column.labelPath | nxtCustomTranslate : column.label }}\n }\n @else if(from !== 'formBuilder') {\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n } \n @else if(column.uniqueIdentifier) {\n @if( ((column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label) !== column.uniqueIdentifier+'.label'){\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n }\n }\n @else {\n {{ column.label }}\n }\n </div>\n <div>\n <svg *ngIf=\"column.filter\"\n (click)=\"$event.stopPropagation(); filter(column.fieldName)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column.fieldName]?.length > 0\"\n cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"column.sort\"\n class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n class=\"search-component position-absolute\"\n (click)=\"$event.stopPropagation();\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Enhanced resize handle -->\n <div class=\"resize-handle\" \n [attr.resize-data-column-id]=\"column.uniqueIdentifier\"\n (mousedown)=\"onResizeStart($event)\"\n title=\"Drag to resize column\">\n </div>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\"\n class=\"table-cell head-color actionCol sticky-column\"\n [style.width]=\"'150px'\"\n style=\"padding: 12px !important;\">\n {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\" *ngIf=\"!isLoading\">\n <div *ngFor=\"let element of dataSource.data; let i = index; trackBy: trackByRow\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-col-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection.toggle(element), element)\"\n [checked]=\"selection.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n\n <!--SKS15FEB25 Data Cells -->\n <ng-container *ngFor=\"let column of currentColumns; let last = last; let c = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n class=\"table-col-cell body-color ellipsis\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n [style.width]=\"(column.width || '50px')\"\n [style.overflow]=\"element?.editRow ? 'unset' : ''\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <ng-container *ngIf=\"element?.editRow && mode === 'edit'; else viewMode\">\n <!-- edit mode content -->\n <div [ngSwitch]=\"column.type\">\n <!-- SKS22JUL25 calendar -->\n <div *ngSwitchCase=\"'calendar'\">\n <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model> -->\n </div>\n <!-- SKS22JUL25 for pick location -->\n <app-pick-location *ngSwitchCase=\"'location'\" [apiKey]=\"column['apiKey']\" [address]=\"question.selectedValue\" [question]=\"column | questionByRow:element:i\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (locationSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n </app-pick-location>\n <!-- SKS22JUL25 Image -->\n <div *ngSwitchCase=\"'image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageEdit(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageDelete(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div> -->\n <img *ngIf=\"column.question?.isReadOnly\" [src]=\"column.question?.imageData\" />\n <!-- <div *ngIf=\"!column.question?.isReadOnly\" class=\"logo-container\">\n Logo preview area\n <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n <img [src]=\"column.question?.imageData\" />\n </div>\n\n Upload button\n <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n </div>\n </div> -->\n </div>\n <!-- SKS22JUL25 icon-selector -->\n <nxt-icon-selector *ngSwitchCase=\"'icon'\" [allIcons]=\"allIcons\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n [labelColor]=\"column.question?.fontColor\"\n [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n </nxt-icon-selector>\n <!-- SKS22JUL25 line -->\n <hr *ngSwitchCase=\"'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS22JUL25 data table -->\n <nxt-datatable *ngSwitchCase=\"'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- SKS22JUL25 list -->\n <nxt-search-box *ngSwitchCase=\"'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.question?.isReadOnly\" [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" \n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n </nxt-search-box>\n <!-- SKS22JUL25 Dropdown -->\n <app-custom-dropdown *ngSwitchCase=\"'dropdown'\" [options]=\"column.question?.options\" [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" [selectedValue]=\"column.isShengel ? column.question?.input : column.question?.selectedValue\"\n placeholder=\"\"\n [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\" [referenceField]=\"column.question?.referenceField\"\n [readOnly]=\"column.question?.isReadOnly\" [question]=\"column | questionByRow:element:i\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </app-custom-dropdown>\n <!-- SKS22JUL25 custom-radio component -->\n <app-custom-radio *ngSwitchCase=\"'radio'\" [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n [selectedValue]=\"column.question?.selectedValue\" [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\"\n [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.question?.isReadOnly\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </app-custom-radio>\n <!-- SKS22JUL25 Attachment / Files -->\n <app-file-upload *ngSwitchCase=\"'file'\" [limitFileUploading]=\"5\" [error]=\"column.question?.error\" [question]=\"column | questionByRow:element:i\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </app-file-upload>\n <!-- SKS22JUL25 Button -->\n <nxt-button *ngSwitchCase=\"'button'\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n >\n </nxt-button>\n <!-- SKS22JUL25 book type -->\n <div *ngSwitchCase=\"'book'\">\n <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n (handleDropDown)=\"getDropDown($event)\">\n </lib-questionbook> -->\n </div>\n <!-- SKS10AUG25 object type element -->\n <div *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </div>\n <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngSwitchDefault \n [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"element | getValue: column.fieldName \"\n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n [labelColor]=\"column.question?.fontColor\"\n [labelSize]=\"column.question?.fontSize\"\n [inputValueSize]=\"column.question?.fontSize\"\n [labelWeight]=\"column.question?.fontWeight\"\n [inputWeight]=\"column.question?.fontWeight\"\n [showLabel]=\"column.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"column.question?.question\"\n [required]=\"column.question?.isOptional\" inputBgColor=\"#FAFAFA\"\n [inputId]=\"column.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n [minDate]=\"column.question?.minDate\"\n [rows]=\"3\"\n (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-input>\n </div>\n </ng-container>\n \n <ng-template #viewMode>\n <!-- SKS10AUG25 view mode content -->\n <ng-container [ngSwitch]=\"column.type\">\n <ng-container *ngSwitchCase=\"'file'\">\n @defer (on viewport) {\n <app-file-upload [limitFileUploading]=\"5\" [error]=\"column.question?.error\" [question]=\"column | questionByRow:element:i\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"(column | questionByRow:element:i)?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </app-file-upload>\n } @placeholder {\n <span class=\"skeleton-cell file-cell\"></span>\n }\n </ng-container>\n <ng-container *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" style=\"cursor: pointer;\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'boolean'\">\n <span *ngIf=\"(element | getValue: column.fieldName) === true || (element | getValue: column.fieldName) === 'true'\">\u2705</span>\n <span *ngIf=\"(element | getValue: column.fieldName) !== true && (element | getValue: column.fieldName) !== 'true'\">\u274C</span> \n </ng-container>\n <ng-container *ngSwitchCase=\"'list'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName: 'list': column }}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : column.type : languageCode}}</a></div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName}}</a></div>\n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\" class=\"table-col-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" (click)=\"onEdit(element)\"\n matTooltip=\"{{ 'EDIT_RECORD' | nxtCustomTranslate : 'Edit Record' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n\n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\" (click)=\"deleteRecord(element,i)\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : button.tooltip \"\n (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\">\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div\n style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Summary Rows -->\n <ng-container\n *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n <!-- Label in the first column -->\n <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n <!-- Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n </div> <!-- Value or input in the last column -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n </div>\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n <ng-container *ngIf=\"row.type === 'calculation'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(row.uniqueIdentifier)\">\n \u2715\n </div>\n {{ summaryValues[row.fieldName] | number }}\n </ng-container>\n <ng-container *ngIf=\"row.type === 'input'\">\n <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n (ngModelChange)=\"onSummaryInputChange()\"\n class=\"view-mode-text table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n </ng-container>\n </div>\n <!-- SKS20MAR25 Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n class=\"non-summary-table-cell\">\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"non-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n <!-- SKS13JUN25 full table summary row -->\n <ng-container *ngIf=\"isFullTableSummaryRow\">\n <div *ngFor=\"let row of summaryRows; let i = index; trackBy: trackBySummary\" class=\"table-row summary-row\">\n <!-- SKS13JUN25 Checkbox column (if enabled) -->\n <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n </div>\n\n <!-- SKS13JUN25 summary cell -->\n <div *ngFor=\"let col of currentColumns; let last = last; let i = index; trackBy: trackByColumn \"\n class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n @if (row?.columns?.includes(col.fieldName)) {\n {{ summaryValues[col.fieldName] | number }}\n }\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"horizontal-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n </ng-container>\n <!--SKS28MAR25 In the Loading section -->\n <div class=\"table-body\" *ngIf=\"isLoading\">\n <!-- Repeat for 5 skeleton rows -->\n <div *ngFor=\"let _ of [1,2,3,4,5]; trackBy: trackByIndex\" class=\"table-row\">\n <!-- Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n <!-- Data Columns -->\n <div *ngFor=\"let col of currentColumns; let i = index; trackBy: trackByColumn\" class=\"skeleton-cell \"></div>\n\n <!-- Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n </div>\n </div>\n </div>\n <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n Add / drags fields from elements sections\n </div> -->\n </div>\n </ng-container>\n </div>\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\"\n class=\"no-data\">\n {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div *ngIf=\"mode === 'edit'\" class=\"d-flex inlineAdd justify-content-end\">\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\n (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n viewBox=\"0 -960 960 960\" width=\"24\">\n <path\n d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n </svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder'\"\n buttonType=\"btn btn-primary\"\n (buttonClickEmit)=\"saveButton()\"\n buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| nxtCustomTranslate : 'Delete Record'}}</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n {{ 'ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">{{\n 'NO'| nxtCustomTranslate : 'No'}}</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteRecordData()\">{{ 'YES'| nxtCustomTranslate : 'Yes'}}</button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:auto;border-collapse:collapse;table-layout:fixed;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;min-height:40px}.table-cell,.table-col-cell{position:relative;min-width:50px;width:auto;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.actionCol .resize-handle{display:none}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:absolute;right:0;top:13px;width:1px;height:20px;cursor:col-resize;background:#b1b1b1;border:3px transparent;z-index:9;transition:background-color .2s ease}.resize-handle:hover{background:#ccc;opacity:.7}.resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;max-width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}[dir=rtl] .search-component{left:0}.rtl .ellipsis,[dir=rtl] .ellipsis{direction:rtl;text-align:right!important}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.view-mode-text{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .sort-indicators{padding-right:5px}[dir=rtl] .resize-handle{left:0!important;right:unset!important}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cell.file-cell{width:inherit!important;position:absolute!important;top:1px!important;height:30px!important;transition:all .2s!important}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #a8a1a1}.hyperlink-input{color:inherit;text-decoration:none;cursor:default}.hyperlink-input:hover{color:#00f!important;text-decoration:underline!important;cursor:pointer}\n"], dependencies: [{ kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i5$1.DecimalPipe, name: "number" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "buttonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: NxtSearchFilterPipe, name: "searchFilter" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: NxtGetValuePipe, name: "getValue" }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from"], outputs: ["searchValueChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token", "mode"], outputs: ["valueChange"] }, { kind: "component", type: NxtFileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "mode", "isShowNoFileIcon", "question", "error", "from"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit"] }, { kind: "component", type: ListViewFilterComponent, selector: "app-list-view-filter", inputs: ["listViews", "tableFilterArray", "selectedView", "displayedColumns", "availableOperators"], outputs: ["listViewEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "pipe", type: QuestionByRowPipe, name: "questionByRow" }, { kind: "pipe", type: NxtDatePipe, name: "NxtDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NxtFileUploadComponent,
|
|
55227
55268
|
QuestionByRowPipe]] });
|
|
55228
55269
|
}
|
|
55229
55270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NxtDatatable, decorators: [{
|
|
@@ -55250,7 +55291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
55250
55291
|
QuestionByRowPipe,
|
|
55251
55292
|
NxtDatePipe
|
|
55252
55293
|
// RowResizerDirective
|
|
55253
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [attr.dir]=\"direction\" [dir]=\"direction\">\n <div>\n <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\"\n style=\"padding-bottom: 20px;\">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\" [listViews]=\"listViews\"\n [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\"\n (listViewEmit)=\"listViewEmit($event)\">\n </app-list-view-filter>\n <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\"\n style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n {{ 'NOS' | nxtCustomTranslate : 'Nos'}} </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\"\n (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n [value]=\"searchBoxValue || ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\"\n [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"from !== 'formBuilder' && mode === 'view'\" (click)=\"editModeChange()\" class=\"eicon-container\"\n matTooltip=\"{{ 'EDIT_TABLE' | nxtCustomTranslate : 'Edit Table' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"from !== 'formBuilder' && mode === 'edit'\" class=\"eicon-container\" (click)=\"discardChanges()\"\n matTooltip=\"{{ 'DISCARD' | nxtCustomTranslate : 'Discard' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"from !== 'formBuilder' && mode === 'edit'\" class=\"eicon-container\" (click)=\"saveTable()\"\n matTooltip=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#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 </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\"\n [ngClass]=\"{ 'resizing': isResizing }\"\n [ngStyle]=\"{ maxHeight: isPagination ? '450px' : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' ? '0px' : '100px' }\"\n #tableContainer (scroll)=\"onScroll(tableContainer)\">\n <ng-container>\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-cell sticky-column head-color\" [style.width]=\"'50px'\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n </div>\n\n <!--SKS15FEB25 Data Columns -->\n <ng-container *ngFor=\"let column of currentColumns; let i = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n class=\"table-cell tableHeader head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n [style.width]=\"(column.width || '50px')\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <div class=\"columnDiv\">\n <div class=\"column-header\" [style.width]=\"column.width || '50px'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n \u2715\n </div>\n <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n @if(column.labelPath){\n {{ column.labelPath | nxtCustomTranslate : column.label }}\n }\n @else if(from !== 'formBuilder') {\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n } \n @else if(column.uniqueIdentifier) {\n @if( ((column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label) !== column.uniqueIdentifier+'.label'){\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n }\n }\n @else {\n {{ column.label }}\n }\n </div>\n <div>\n <svg *ngIf=\"column.filter\"\n (click)=\"$event.stopPropagation(); filter(column.fieldName)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column.fieldName]?.length > 0\"\n cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"column.sort\"\n class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n class=\"search-component position-absolute\"\n (click)=\"$event.stopPropagation();\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Enhanced resize handle -->\n <div class=\"resize-handle\" \n [attr.resize-data-column-id]=\"column.uniqueIdentifier\"\n (mousedown)=\"onResizeStart($event)\"\n title=\"Drag to resize column\">\n </div>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\"\n class=\"table-cell head-color actionCol sticky-column\"\n [style.width]=\"'150px'\"\n style=\"padding: 12px !important;\">\n {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\" *ngIf=\"!isLoading\">\n <div *ngFor=\"let element of dataSource.data; let i = index; trackBy: trackByRow\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-col-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection.toggle(element), element)\"\n [checked]=\"selection.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n\n <!--SKS15FEB25 Data Cells -->\n <ng-container *ngFor=\"let column of currentColumns; let last = last; let c = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n class=\"table-col-cell body-color ellipsis\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n [style.width]=\"(column.width || '50px')\"\n [style.overflow]=\"element?.editRow ? 'unset' : ''\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <ng-container *ngIf=\"element?.editRow && mode === 'edit'; else viewMode\">\n <!-- edit mode content -->\n <div [ngSwitch]=\"column.type\">\n <!-- SKS22JUL25 calendar -->\n <div *ngSwitchCase=\"'calendar'\">\n <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model> -->\n </div>\n <!-- SKS22JUL25 for pick location -->\n <app-pick-location *ngSwitchCase=\"'location'\" [apiKey]=\"column['apiKey']\" [address]=\"question.selectedValue\" [question]=\"column | questionByRow:element:i\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (locationSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n </app-pick-location>\n <!-- SKS22JUL25 Image -->\n <div *ngSwitchCase=\"'image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageEdit(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageDelete(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div> -->\n <img *ngIf=\"column.question?.isReadOnly\" [src]=\"column.question?.imageData\" />\n <!-- <div *ngIf=\"!column.question?.isReadOnly\" class=\"logo-container\">\n Logo preview area\n <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n <img [src]=\"column.question?.imageData\" />\n </div>\n\n Upload button\n <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n </div>\n </div> -->\n </div>\n <!-- SKS22JUL25 icon-selector -->\n <nxt-icon-selector *ngSwitchCase=\"'icon'\" [allIcons]=\"allIcons\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n [labelColor]=\"column.question?.fontColor\"\n [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n </nxt-icon-selector>\n <!-- SKS22JUL25 line -->\n <hr *ngSwitchCase=\"'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS22JUL25 data table -->\n <nxt-datatable *ngSwitchCase=\"'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- SKS22JUL25 list -->\n <nxt-search-box *ngSwitchCase=\"'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.question?.isReadOnly\" [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" \n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n </nxt-search-box>\n <!-- SKS22JUL25 Dropdown -->\n <app-custom-dropdown *ngSwitchCase=\"'dropdown'\" [options]=\"column.question?.options\" [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" [selectedValue]=\"column.isShengel ? column.question?.input : column.question?.selectedValue\"\n placeholder=\"\"\n [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\" [referenceField]=\"column.question?.referenceField\"\n [readOnly]=\"column.question?.isReadOnly\" [question]=\"column | questionByRow:element:i\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </app-custom-dropdown>\n <!-- SKS22JUL25 custom-radio component -->\n <app-custom-radio *ngSwitchCase=\"'radio'\" [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n [selectedValue]=\"column.question?.selectedValue\" [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\"\n [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.question?.isReadOnly\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </app-custom-radio>\n <!-- SKS22JUL25 Attachment / Files -->\n <app-file-upload *ngSwitchCase=\"'file'\" [limitFileUploading]=\"5\" [error]=\"column.question?.error\" [question]=\"column | questionByRow:element:i\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </app-file-upload>\n <!-- SKS22JUL25 Button -->\n <nxt-button *ngSwitchCase=\"'button'\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n >\n </nxt-button>\n <!-- SKS22JUL25 book type -->\n <div *ngSwitchCase=\"'book'\">\n <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n (handleDropDown)=\"getDropDown($event)\">\n </lib-questionbook> -->\n </div>\n <!-- SKS10AUG25 object type element -->\n <div *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </div>\n <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngSwitchDefault \n [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"element | getValue: column.fieldName \"\n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n [labelColor]=\"column.question?.fontColor\"\n [labelSize]=\"column.question?.fontSize\"\n [inputValueSize]=\"column.question?.fontSize\"\n [labelWeight]=\"column.question?.fontWeight\"\n [inputWeight]=\"column.question?.fontWeight\"\n [showLabel]=\"column.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"column.question?.question\"\n [required]=\"column.question?.isOptional\" inputBgColor=\"#FAFAFA\"\n [inputId]=\"column.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n [minDate]=\"column.question?.minDate\"\n [rows]=\"3\"\n (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-input>\n </div>\n </ng-container>\n \n <ng-template #viewMode>\n <!-- SKS10AUG25 view mode content -->\n <ng-container [ngSwitch]=\"column.type\">\n <ng-container *ngSwitchCase=\"'file'\">\n @defer (on viewport) {\n <app-file-upload [limitFileUploading]=\"5\" [error]=\"column.question?.error\" [question]=\"column | questionByRow:element:i\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"(column | questionByRow:element:i)?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </app-file-upload>\n } @placeholder {\n <span class=\"skeleton-cell file-cell\"></span>\n }\n </ng-container>\n <ng-container *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" style=\"cursor: pointer;\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'boolean'\">\n <span *ngIf=\"(element | getValue: column.fieldName) === true || (element | getValue: column.fieldName) === 'true'\">\u2705</span>\n <span *ngIf=\"(element | getValue: column.fieldName) !== true && (element | getValue: column.fieldName) !== 'true'\">\u274C</span> \n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : column.type : languageCode}}</a></div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName}}</a></div>\n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\" class=\"table-col-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" (click)=\"onEdit(element)\"\n matTooltip=\"{{ 'EDIT_RECORD' | nxtCustomTranslate : 'Edit Record' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n\n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\" (click)=\"deleteRecord(element,i)\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : button.tooltip \"\n (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\">\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div\n style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Summary Rows -->\n <ng-container\n *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n <!-- Label in the first column -->\n <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n <!-- Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n </div> <!-- Value or input in the last column -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n </div>\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n <ng-container *ngIf=\"row.type === 'calculation'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(row.uniqueIdentifier)\">\n \u2715\n </div>\n {{ summaryValues[row.fieldName] | number }}\n </ng-container>\n <ng-container *ngIf=\"row.type === 'input'\">\n <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n (ngModelChange)=\"onSummaryInputChange()\"\n class=\"view-mode-text table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n </ng-container>\n </div>\n <!-- SKS20MAR25 Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n class=\"non-summary-table-cell\">\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"non-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n <!-- SKS13JUN25 full table summary row -->\n <ng-container *ngIf=\"isFullTableSummaryRow\">\n <div *ngFor=\"let row of summaryRows; let i = index; trackBy: trackBySummary\" class=\"table-row summary-row\">\n <!-- SKS13JUN25 Checkbox column (if enabled) -->\n <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n </div>\n\n <!-- SKS13JUN25 summary cell -->\n <div *ngFor=\"let col of currentColumns; let last = last; let i = index; trackBy: trackByColumn \"\n class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n @if (row?.columns?.includes(col.fieldName)) {\n {{ summaryValues[col.fieldName] | number }}\n }\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"horizontal-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n </ng-container>\n <!--SKS28MAR25 In the Loading section -->\n <div class=\"table-body\" *ngIf=\"isLoading\">\n <!-- Repeat for 5 skeleton rows -->\n <div *ngFor=\"let _ of [1,2,3,4,5]; trackBy: trackByIndex\" class=\"table-row\">\n <!-- Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n <!-- Data Columns -->\n <div *ngFor=\"let col of currentColumns; let i = index; trackBy: trackByColumn\" class=\"skeleton-cell \"></div>\n\n <!-- Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n </div>\n </div>\n </div>\n <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n Add / drags fields from elements sections\n </div> -->\n </div>\n </ng-container>\n </div>\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\"\n class=\"no-data\">\n {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div *ngIf=\"mode === 'edit'\" class=\"d-flex inlineAdd justify-content-end\">\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\n (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n viewBox=\"0 -960 960 960\" width=\"24\">\n <path\n d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n </svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder'\"\n buttonType=\"btn btn-primary\"\n (buttonClickEmit)=\"saveButton()\"\n buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| nxtCustomTranslate : 'Delete Record'}}</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n {{ 'ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">{{\n 'NO'| nxtCustomTranslate : 'No'}}</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteRecordData()\">{{ 'YES'| nxtCustomTranslate : 'Yes'}}</button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:auto;border-collapse:collapse;table-layout:fixed;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;min-height:40px}.table-cell,.table-col-cell{position:relative;min-width:50px;width:auto;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.actionCol .resize-handle{display:none}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:absolute;right:0;top:13px;width:1px;height:20px;cursor:col-resize;background:#b1b1b1;border:3px transparent;z-index:9;transition:background-color .2s ease}.resize-handle:hover{background:#ccc;opacity:.7}.resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;max-width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}[dir=rtl] .search-component{left:0}.rtl .ellipsis,[dir=rtl] .ellipsis{direction:rtl;text-align:right!important}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.view-mode-text{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .sort-indicators{padding-right:5px}[dir=rtl] .resize-handle{left:0!important;right:unset!important}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cell.file-cell{width:inherit!important;position:absolute!important;top:1px!important;height:30px!important;transition:all .2s!important}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #a8a1a1}.hyperlink-input{color:inherit;text-decoration:none;cursor:default}.hyperlink-input:hover{color:#00f!important;text-decoration:underline!important;cursor:pointer}\n"] }]
|
|
55294
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [attr.dir]=\"direction\" [dir]=\"direction\">\n <div>\n <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\"\n style=\"padding-bottom: 20px;\">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\" [listViews]=\"listViews\"\n [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\"\n (listViewEmit)=\"listViewEmit($event)\">\n </app-list-view-filter>\n <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\"\n style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n {{ 'NOS' | nxtCustomTranslate : 'Nos'}} </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\"\n (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n [value]=\"searchBoxValue || ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\"\n [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'view'\" (click)=\"editModeChange()\" class=\"eicon-container\"\n matTooltip=\"{{ 'EDIT_TABLE' | nxtCustomTranslate : 'Edit Table' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit'\" class=\"eicon-container\" (click)=\"discardChanges()\"\n matTooltip=\"{{ 'DISCARD' | nxtCustomTranslate : 'Discard' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit'\" class=\"eicon-container\" (click)=\"saveTable()\"\n matTooltip=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#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 </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\"\n [ngClass]=\"{ 'resizing': isResizing }\"\n [ngStyle]=\"{ maxHeight: isPagination ? '450px' : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' ? '0px' : '100px' }\"\n #tableContainer (scroll)=\"onScroll(tableContainer)\">\n <ng-container>\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-cell sticky-column head-color\" [style.width]=\"'50px'\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n </div>\n\n <!--SKS15FEB25 Data Columns -->\n <ng-container *ngFor=\"let column of currentColumns; let i = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n class=\"table-cell tableHeader head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n [style.width]=\"(column.width || '50px')\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <div class=\"columnDiv\">\n <div class=\"column-header\" [style.width]=\"column.width || '50px'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n \u2715\n </div>\n <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n @if(column.labelPath){\n {{ column.labelPath | nxtCustomTranslate : column.label }}\n }\n @else if(from !== 'formBuilder') {\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n } \n @else if(column.uniqueIdentifier) {\n @if( ((column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label) !== column.uniqueIdentifier+'.label'){\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n }\n }\n @else {\n {{ column.label }}\n }\n </div>\n <div>\n <svg *ngIf=\"column.filter\"\n (click)=\"$event.stopPropagation(); filter(column.fieldName)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column.fieldName]?.length > 0\"\n cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"column.sort\"\n class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n class=\"search-component position-absolute\"\n (click)=\"$event.stopPropagation();\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Enhanced resize handle -->\n <div class=\"resize-handle\" \n [attr.resize-data-column-id]=\"column.uniqueIdentifier\"\n (mousedown)=\"onResizeStart($event)\"\n title=\"Drag to resize column\">\n </div>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\"\n class=\"table-cell head-color actionCol sticky-column\"\n [style.width]=\"'150px'\"\n style=\"padding: 12px !important;\">\n {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\" *ngIf=\"!isLoading\">\n <div *ngFor=\"let element of dataSource.data; let i = index; trackBy: trackByRow\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-col-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection.toggle(element), element)\"\n [checked]=\"selection.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n\n <!--SKS15FEB25 Data Cells -->\n <ng-container *ngFor=\"let column of currentColumns; let last = last; let c = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n class=\"table-col-cell body-color ellipsis\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n [style.width]=\"(column.width || '50px')\"\n [style.overflow]=\"element?.editRow ? 'unset' : ''\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <ng-container *ngIf=\"element?.editRow && mode === 'edit'; else viewMode\">\n <!-- edit mode content -->\n <div [ngSwitch]=\"column.type\">\n <!-- SKS22JUL25 calendar -->\n <div *ngSwitchCase=\"'calendar'\">\n <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model> -->\n </div>\n <!-- SKS22JUL25 for pick location -->\n <app-pick-location *ngSwitchCase=\"'location'\" [apiKey]=\"column['apiKey']\" [address]=\"question.selectedValue\" [question]=\"column | questionByRow:element:i\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (locationSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n </app-pick-location>\n <!-- SKS22JUL25 Image -->\n <div *ngSwitchCase=\"'image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageEdit(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageDelete(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div> -->\n <img *ngIf=\"column.question?.isReadOnly\" [src]=\"column.question?.imageData\" />\n <!-- <div *ngIf=\"!column.question?.isReadOnly\" class=\"logo-container\">\n Logo preview area\n <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n <img [src]=\"column.question?.imageData\" />\n </div>\n\n Upload button\n <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n </div>\n </div> -->\n </div>\n <!-- SKS22JUL25 icon-selector -->\n <nxt-icon-selector *ngSwitchCase=\"'icon'\" [allIcons]=\"allIcons\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n [labelColor]=\"column.question?.fontColor\"\n [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n </nxt-icon-selector>\n <!-- SKS22JUL25 line -->\n <hr *ngSwitchCase=\"'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS22JUL25 data table -->\n <nxt-datatable *ngSwitchCase=\"'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- SKS22JUL25 list -->\n <nxt-search-box *ngSwitchCase=\"'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.question?.isReadOnly\" [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" \n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n </nxt-search-box>\n <!-- SKS22JUL25 Dropdown -->\n <app-custom-dropdown *ngSwitchCase=\"'dropdown'\" [options]=\"column.question?.options\" [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" [selectedValue]=\"column.isShengel ? column.question?.input : column.question?.selectedValue\"\n placeholder=\"\"\n [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\" [referenceField]=\"column.question?.referenceField\"\n [readOnly]=\"column.question?.isReadOnly\" [question]=\"column | questionByRow:element:i\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </app-custom-dropdown>\n <!-- SKS22JUL25 custom-radio component -->\n <app-custom-radio *ngSwitchCase=\"'radio'\" [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n [selectedValue]=\"column.question?.selectedValue\" [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\"\n [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.question?.isReadOnly\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </app-custom-radio>\n <!-- SKS22JUL25 Attachment / Files -->\n <app-file-upload *ngSwitchCase=\"'file'\" [limitFileUploading]=\"5\" [error]=\"column.question?.error\" [question]=\"column | questionByRow:element:i\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </app-file-upload>\n <!-- SKS22JUL25 Button -->\n <nxt-button *ngSwitchCase=\"'button'\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n >\n </nxt-button>\n <!-- SKS22JUL25 book type -->\n <div *ngSwitchCase=\"'book'\">\n <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n (handleDropDown)=\"getDropDown($event)\">\n </lib-questionbook> -->\n </div>\n <!-- SKS10AUG25 object type element -->\n <div *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </div>\n <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngSwitchDefault \n [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"element | getValue: column.fieldName \"\n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n [labelColor]=\"column.question?.fontColor\"\n [labelSize]=\"column.question?.fontSize\"\n [inputValueSize]=\"column.question?.fontSize\"\n [labelWeight]=\"column.question?.fontWeight\"\n [inputWeight]=\"column.question?.fontWeight\"\n [showLabel]=\"column.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"column.question?.question\"\n [required]=\"column.question?.isOptional\" inputBgColor=\"#FAFAFA\"\n [inputId]=\"column.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n [minDate]=\"column.question?.minDate\"\n [rows]=\"3\"\n (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-input>\n </div>\n </ng-container>\n \n <ng-template #viewMode>\n <!-- SKS10AUG25 view mode content -->\n <ng-container [ngSwitch]=\"column.type\">\n <ng-container *ngSwitchCase=\"'file'\">\n @defer (on viewport) {\n <app-file-upload [limitFileUploading]=\"5\" [error]=\"column.question?.error\" [question]=\"column | questionByRow:element:i\"\n [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"(column | questionByRow:element:i)?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </app-file-upload>\n } @placeholder {\n <span class=\"skeleton-cell file-cell\"></span>\n }\n </ng-container>\n <ng-container *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" style=\"cursor: pointer;\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'boolean'\">\n <span *ngIf=\"(element | getValue: column.fieldName) === true || (element | getValue: column.fieldName) === 'true'\">\u2705</span>\n <span *ngIf=\"(element | getValue: column.fieldName) !== true && (element | getValue: column.fieldName) !== 'true'\">\u274C</span> \n </ng-container>\n <ng-container *ngSwitchCase=\"'list'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName: 'list': column }}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : column.type : languageCode}}</a></div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName}}</a></div>\n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\" class=\"table-col-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" (click)=\"onEdit(element)\"\n matTooltip=\"{{ 'EDIT_RECORD' | nxtCustomTranslate : 'Edit Record' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n\n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\" (click)=\"deleteRecord(element,i)\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : button.tooltip \"\n (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\">\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div\n style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Summary Rows -->\n <ng-container\n *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n <!-- Label in the first column -->\n <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n <!-- Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n </div> <!-- Value or input in the last column -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n </div>\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n <ng-container *ngIf=\"row.type === 'calculation'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(row.uniqueIdentifier)\">\n \u2715\n </div>\n {{ summaryValues[row.fieldName] | number }}\n </ng-container>\n <ng-container *ngIf=\"row.type === 'input'\">\n <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n (ngModelChange)=\"onSummaryInputChange()\"\n class=\"view-mode-text table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n </ng-container>\n </div>\n <!-- SKS20MAR25 Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n class=\"non-summary-table-cell\">\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"non-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n <!-- SKS13JUN25 full table summary row -->\n <ng-container *ngIf=\"isFullTableSummaryRow\">\n <div *ngFor=\"let row of summaryRows; let i = index; trackBy: trackBySummary\" class=\"table-row summary-row\">\n <!-- SKS13JUN25 Checkbox column (if enabled) -->\n <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n </div>\n\n <!-- SKS13JUN25 summary cell -->\n <div *ngFor=\"let col of currentColumns; let last = last; let i = index; trackBy: trackByColumn \"\n class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n @if (row?.columns?.includes(col.fieldName)) {\n {{ summaryValues[col.fieldName] | number }}\n }\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"horizontal-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n </ng-container>\n <!--SKS28MAR25 In the Loading section -->\n <div class=\"table-body\" *ngIf=\"isLoading\">\n <!-- Repeat for 5 skeleton rows -->\n <div *ngFor=\"let _ of [1,2,3,4,5]; trackBy: trackByIndex\" class=\"table-row\">\n <!-- Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n <!-- Data Columns -->\n <div *ngFor=\"let col of currentColumns; let i = index; trackBy: trackByColumn\" class=\"skeleton-cell \"></div>\n\n <!-- Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n </div>\n </div>\n </div>\n <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n Add / drags fields from elements sections\n </div> -->\n </div>\n </ng-container>\n </div>\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\"\n class=\"no-data\">\n {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div *ngIf=\"mode === 'edit'\" class=\"d-flex inlineAdd justify-content-end\">\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\n (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n viewBox=\"0 -960 960 960\" width=\"24\">\n <path\n d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n </svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder'\"\n buttonType=\"btn btn-primary\"\n (buttonClickEmit)=\"saveButton()\"\n buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| nxtCustomTranslate : 'Delete Record'}}</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n {{ 'ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">{{\n 'NO'| nxtCustomTranslate : 'No'}}</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteRecordData()\">{{ 'YES'| nxtCustomTranslate : 'Yes'}}</button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:auto;border-collapse:collapse;table-layout:fixed;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;min-height:40px}.table-cell,.table-col-cell{position:relative;min-width:50px;width:auto;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.actionCol .resize-handle{display:none}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:absolute;right:0;top:13px;width:1px;height:20px;cursor:col-resize;background:#b1b1b1;border:3px transparent;z-index:9;transition:background-color .2s ease}.resize-handle:hover{background:#ccc;opacity:.7}.resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;max-width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}[dir=rtl] .search-component{left:0}.rtl .ellipsis,[dir=rtl] .ellipsis{direction:rtl;text-align:right!important}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.view-mode-text{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .sort-indicators{padding-right:5px}[dir=rtl] .resize-handle{left:0!important;right:unset!important}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cell.file-cell{width:inherit!important;position:absolute!important;top:1px!important;height:30px!important;transition:all .2s!important}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #a8a1a1}.hyperlink-input{color:inherit;text-decoration:none;cursor:default}.hyperlink-input:hover{color:#00f!important;text-decoration:underline!important;cursor:pointer}\n"] }]
|
|
55254
55295
|
}], ctorParameters: () => [{ type: StorageService }, { type: i0.ChangeDetectorRef }, { type: TranslationService }, { type: i0.Renderer2 }, { type: DataService }, { type: ChangeService }], propDecorators: { data: [{
|
|
55255
55296
|
type: Input
|
|
55256
55297
|
}], tableFilterData: [{
|
|
@@ -60876,7 +60917,7 @@ const VERSION = {
|
|
|
60876
60917
|
"semver": null,
|
|
60877
60918
|
"suffix": "09440148-dirty",
|
|
60878
60919
|
"semverString": null,
|
|
60879
|
-
"version": "2.1.
|
|
60920
|
+
"version": "2.1.263"
|
|
60880
60921
|
};
|
|
60881
60922
|
/* tslint:enable */
|
|
60882
60923
|
|