@rangertechnologies/ngnxt 2.1.273 → 2.1.275
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/rangertechnologies-ngnxt.mjs +201 -149
- package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
- package/lib/components/button/nxt-button.component.d.ts +2 -1
- package/lib/components/datatable/datatable.component.d.ts +2 -1
- package/lib/pages/booklet/booklet.component.d.ts +2 -1
- package/lib/pages/pdfDesigner/pdf-properties/pdf-properties.component.d.ts +77 -47
- package/package.json +1 -1
- package/rangertechnologies-ngnxt-2.1.275.tgz +0 -0
- package/rangertechnologies-ngnxt-2.1.273.tgz +0 -0
|
@@ -8274,6 +8274,7 @@ class NxtButtonComponent {
|
|
|
8274
8274
|
buttonConfig = ''; // Use this input to pass configuration settings for the group and dropdown buttons (e.g., styles, actions).
|
|
8275
8275
|
mode = 'edit'; // New mode input
|
|
8276
8276
|
languageCode;
|
|
8277
|
+
isLoading = false; //SKS4SEP25 Set to true to show a loading animation
|
|
8277
8278
|
buttonClickEmit = new EventEmitter();
|
|
8278
8279
|
iconSrc = ''; // Ensure it's always a string
|
|
8279
8280
|
isDropdownOpen = false;
|
|
@@ -8339,11 +8340,11 @@ class NxtButtonComponent {
|
|
|
8339
8340
|
}
|
|
8340
8341
|
}
|
|
8341
8342
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NxtButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TranslationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8342
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NxtButtonComponent, isStandalone: true, selector: "nxt-button", inputs: { buttonValue: "buttonValue", buttonType: "buttonType", type: "type", buttonDisable: "buttonDisable", btnBgColor: "btnBgColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBorderColor: "btnBorderColor", btnTextColor: "btnTextColor", btnHeight: "btnHeight", btnWidth: "btnWidth", btnIconLeftSrc: "btnIconLeftSrc", btnIconRightSrc: "btnIconRightSrc", btnHoverBgColor: "btnHoverBgColor", btnHoverTextColor: "btnHoverTextColor", btnId: "btnId", dataDismiss: "dataDismiss", modalToTrigger: "modalToTrigger", isImageSvg: "isImageSvg", tabIndex: "tabIndex", buttonConfig: "buttonConfig", mode: "mode", languageCode: "languageCode" }, outputs: { buttonClickEmit: "buttonClickEmit" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!-- SKS24JAN25 group button -->\n<div *ngIf=\"type === 'group'\" class=\"btn-group\" role=\"group\" aria-label=\"Button Group\">\n <button *ngFor=\"let btn of buttonConfig.buttons\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [attr.tabindex]=\"btn.tabIndex\"\n [attr.data-bs-toggle]=\"btn.modalToTrigger ? 'modal' : null\"\n [attr.data-bs-target]=\"btn.modalToTrigger ? '#' + btn.modalToTrigger : null\"\n [ngStyle]=\"btn | buttonStyles\"\n [disabled]=\"btn.buttonDisable\"\n [attr.data-bs-dismiss]=\"btn.dataDismiss\"\n (click)=\"buttonClicked(btn)\"\n [attr.id]=\"btn.btnId !== 'default' ? btn.btnId : null\">\n <img *ngIf=\"btn.isImageSvg\" [src]=\"btn.iconSrc\">\n <span class=\"custom-tooltip\" \n style=\"background-color:{{btn.tooltipBcColor}};\n color:{{btn.tooltipColor}};\n font-size:{{btn.tooltipFSize}}\">\n {{ btn.tooltipPath ? (btn.tooltipPath | nxtCustomTranslate : btn.tooltip) : (btn.tooltip | nxtCustomTranslate : btn.tooltip) }}\n <div class=\"tooltip-pointer\" style=\"background-color:{{btn.tooltipBcColor}};\"></div>\n </span>\n </button>\n</div>\n \n<!-- SKS24JAN25 single button -->\n<button type=\"button\" *ngIf=\"type !== 'group' && type !== 'dropdown'\" class=\"btn fc-button {{buttonType}}\" [tabindex]=\"tabIndex\"\n [attr.data-bs-toggle]=\"modalToTrigger != '' ? 'modal' : ''\"\n [attr.data-bs-target]=\"modalToTrigger != '' ? '#'+modalToTrigger : ''\"\n [ngClass]=\"buttonType === 'custom-btn' ? '' : 'btn-primary'\"\n [ngStyle]=\"{\n '--button-custom-bg': btnBgColor || '#0773ff',\n '--button-custom-border': (btnBorder || 1) + 'px solid ' + (btnBorderColor || 'transparent'),\n '--button-custom-border-radius': (btnBorderRadius || 4) + 'px',\n '--button-custom-color': btnTextColor || '#ffffff',\n '--button-custom-height': (btnHeight || 40) + 'px',\n '--button-custom-width': (btnWidth || 120) + 'px',\n '--button-hover-bg': btnHoverBgColor || btnBgColor || '#0056d2',\n '--button-hover-text-color': btnHoverTextColor || btnTextColor || '#ffffff'\n }\" \n [disabled]=\"buttonDisable\" [attr.data-bs-dismiss]='dataDismiss' (click)=\"buttonClicked($event)\"\n [attr.id]=\"btnId != 'default' ? btnId : null\">\n <img *ngIf=\"btnIconLeftSrc && btnIconLeftSrc != '' && isImageSvg\" src=\"{{btnIconLeftSrc}}\"\n class=\"fc-btn-icon left-icon\">\n <img *ngIf=\"btnIconLeftSrc && btnIconLeftSrc != '' && !isImageSvg\" src=\"{{btnIconLeftSrc}}\" class=\"fc-btn-icon left-icon\">\n <span class=\"fc-btn-text\">{{buttonValue}}</span>\n <img *ngIf=\"btnIconRightSrc && btnIconRightSrc != '' && isImageSvg\" src=\"{{btnIconRightSrc}}\"\n class=\"fc-btn-icon right-icon\">\n <img *ngIf=\"btnIconRightSrc && btnIconRightSrc != '' && !isImageSvg\" src=\"{{btnIconRightSrc}}\" class=\"fc-btn-icon right-icon\">\n</button>\n\n<!-- SKS24JAN25 dropdown button -->\n<div *ngIf=\"type === 'dropdown'\" class=\"dropdown\">\n <svg class=\"clickable-img\" (click)=\"toggleDropdown()\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.3\" y=\"0.3\" width=\"39.4\" height=\"39.4\" rx=\"11.7\" fill=\"#FAFBFD\" stroke=\"#D5D5D5\" stroke-width=\"0.6\"/>\n <path 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\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n <div class=\"dropdown-menu\" *ngIf=\"isDropdownOpen\">\n <button *ngFor=\"let btn of buttonConfig.buttons\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [attr.tabindex]=\"btn.tabIndex\"\n [attr.data-bs-toggle]=\"btn.modalToTrigger ? 'modal' : null\"\n [attr.data-bs-target]=\"btn.modalToTrigger ? '#' + btn.modalToTrigger : null\"\n [ngStyle]=\"btn | buttonStyles\"\n [disabled]=\"btn.buttonDisable\"\n [attr.data-bs-dismiss]=\"btn.dataDismiss\"\n (click)=\"buttonClicked(btn)\"\n [attr.id]=\"btn.btnId !== 'default' ? btn.btnId : null\">\n <img *ngIf=\"btn.isImageSvg\" [src]=\"btn.iconSrc\">\n <span class=\"fc-btn-text\" style=\"padding-left: 12px;\">{{btn.name}}</span>\n </button>\n </div>\n</div>\n", styles: [".fc-button,.fc-button:hover,.fc-button:active,.fc-button:focus{outline:none;border:none;box-shadow:none}.fc-button{padding:6.5px}.fc-button:active{transform:scale(1.02)}.text-only{background:transparent;color:var(--fc-primary-color);border:none;outline:none}.grey-text{color:var(--fc-text-color)}.blue-text{color:var(--fc-primary-color)}.grey-border{color:#272525;background:transparent;border:2px solid #dddddd}.grey-border:hover{color:#272525;background:#6a2aff0a;border:2px solid #6a2aff59}.grey-border:active,.grey-border:focus{background-color:#386bf6;border:2px solid #3268ff;color:#fff}.blue-border,.blue-border:hover,.blue-border:active,.blue-border:focus{border:1px solid var(--fc-primary-color)}.bg-transparent{background-color:transparent}.custom-btn{background-color:var(--button-custom-bg)!important;border:var(--button-custom-border)!important;border-radius:var(--button-custom-border-radius)!important;color:var(--button-custom-color)!important;height:var(--button-custom-height)!important;width:var(--button-custom-width)!important}.custom-btn:hover,.custom-btn:active,.custom-btn:focus{background-color:var(--button-hover-bg);color:var(--button-hover-text-color);border:var(--button-custom-border);border-radius:var(--button-custom-border-radius)}.fc-btn-text{display:inline-flex;vertical-align:middle;font-size:14px;font-weight:400;padding-left:5px;padding-right:5px}.right-icon{margin-left:5px}.left-icon{margin-right:5px}.fc-button.side-save-component,.fc-button.side-cancel-component{border:1px solid transparent}.fc-button.side-save-component:focus,.fc-button.side-cancel-component:focus{box-shadow:0 0 0 .25rem #0d6efd40;border:1px solid #86b7fe}.btn-group{background-color:#fdfeff;border:1px solid #dddddd;border-radius:7px}.btn-icon{background-color:#fdfeff;border:1px solid #dddddd}.custom-tooltip{visibility:visible;position:absolute;background-color:#0773ff;color:#fff;text-align:center;padding:5px 10px;border-radius:4px;font-size:12px;white-space:nowrap;bottom:100%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .2s;z-index:10;margin-bottom:10px}.tooltip-pointer{position:absolute;width:0;height:0;bottom:-5px;left:50%;transform:translate(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #0773ff}.tooltip-container:hover .custom-tooltip{visibility:visible;opacity:1}.clickable-img{position:relative;cursor:pointer;height:41px;transition:transform .3s ease,box-shadow .3s ease;border:2px solid #dddddd;border-radius:13px}.clickable-img:hover{transform:scale(.95);border:2px solid rgb(31,105,255);border-radius:14px}.dropdown{position:relative;display:inline-block}.dropdown-menu{right:0;top:45px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a;left:unset}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}.dropdown-menu .btn:hover{background-color:#f1f1f1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "pipe", type: ButtonStylesPipe, name: "buttonStyles" }] });
|
|
8343
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NxtButtonComponent, isStandalone: true, selector: "nxt-button", inputs: { buttonValue: "buttonValue", buttonType: "buttonType", type: "type", buttonDisable: "buttonDisable", btnBgColor: "btnBgColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBorderColor: "btnBorderColor", btnTextColor: "btnTextColor", btnHeight: "btnHeight", btnWidth: "btnWidth", btnIconLeftSrc: "btnIconLeftSrc", btnIconRightSrc: "btnIconRightSrc", btnHoverBgColor: "btnHoverBgColor", btnHoverTextColor: "btnHoverTextColor", btnId: "btnId", dataDismiss: "dataDismiss", modalToTrigger: "modalToTrigger", isImageSvg: "isImageSvg", tabIndex: "tabIndex", buttonConfig: "buttonConfig", mode: "mode", languageCode: "languageCode", isLoading: "isLoading" }, outputs: { buttonClickEmit: "buttonClickEmit" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!-- SKS24JAN25 group button -->\n<div *ngIf=\"type === 'group'\" class=\"btn-group\" role=\"group\" aria-label=\"Button Group\">\n <button *ngFor=\"let btn of buttonConfig.buttons\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [attr.tabindex]=\"btn.tabIndex\"\n [attr.data-bs-toggle]=\"btn.modalToTrigger ? 'modal' : null\"\n [attr.data-bs-target]=\"btn.modalToTrigger ? '#' + btn.modalToTrigger : null\"\n [ngStyle]=\"btn | buttonStyles\"\n [disabled]=\"btn.buttonDisable\"\n [attr.data-bs-dismiss]=\"btn.dataDismiss\"\n (click)=\"buttonClicked(btn)\"\n [attr.id]=\"btn.btnId !== 'default' ? btn.btnId : null\">\n <img *ngIf=\"btn.isImageSvg\" [src]=\"btn.iconSrc\">\n <span class=\"custom-tooltip\" \n style=\"background-color:{{btn.tooltipBcColor}};\n color:{{btn.tooltipColor}};\n font-size:{{btn.tooltipFSize}}\">\n {{ btn.tooltipPath ? (btn.tooltipPath | nxtCustomTranslate : btn.tooltip) : (btn.tooltip | nxtCustomTranslate : btn.tooltip) }}\n <div class=\"tooltip-pointer\" style=\"background-color:{{btn.tooltipBcColor}};\"></div>\n </span>\n </button>\n</div>\n \n<!-- SKS24JAN25 single button -->\n<button type=\"button\" *ngIf=\"type !== 'group' && type !== 'dropdown'\" class=\"btn fc-button {{buttonType}}\" [tabindex]=\"tabIndex\"\n [attr.data-bs-toggle]=\"modalToTrigger != '' ? 'modal' : ''\"\n [attr.data-bs-target]=\"modalToTrigger != '' ? '#'+modalToTrigger : ''\"\n [ngClass]=\"buttonType === 'custom-btn' ? '' : 'btn-primary'\"\n [ngStyle]=\"{\n '--button-custom-bg': btnBgColor || '#0773ff',\n '--button-custom-border': (btnBorder || 1) + 'px solid ' + (btnBorderColor || 'transparent'),\n '--button-custom-border-radius': (btnBorderRadius || 4) + 'px',\n '--button-custom-color': btnTextColor || '#ffffff',\n '--button-custom-height': (btnHeight || 40) + 'px',\n '--button-custom-width': (btnWidth || 120) + 'px',\n '--button-hover-bg': btnHoverBgColor || btnBgColor || '#0056d2',\n '--button-hover-text-color': btnHoverTextColor || btnTextColor || '#ffffff'\n }\" \n [disabled]=\"isLoading || buttonDisable\" [attr.data-bs-dismiss]='dataDismiss' (click)=\"buttonClicked($event)\"\n [attr.id]=\"btnId != 'default' ? btnId : null\"\n style=\"display: flex; align-items: center; justify-content: center; gap: 10px;\">\n <img *ngIf=\"btnIconLeftSrc && btnIconLeftSrc != '' && isImageSvg\" src=\"{{btnIconLeftSrc}}\"\n class=\"fc-btn-icon left-icon\">\n <img *ngIf=\"btnIconLeftSrc && btnIconLeftSrc != '' && !isImageSvg\" src=\"{{btnIconLeftSrc}}\" class=\"fc-btn-icon left-icon\">\n <span class=\"fc-btn-text\">{{buttonValue}}</span>\n <img *ngIf=\"btnIconRightSrc && btnIconRightSrc != '' && isImageSvg\" src=\"{{btnIconRightSrc}}\"\n class=\"fc-btn-icon right-icon\">\n <img *ngIf=\"btnIconRightSrc && btnIconRightSrc != '' && !isImageSvg\" src=\"{{btnIconRightSrc}}\" class=\"fc-btn-icon right-icon\">\n <!-- SKS4SEP25 api call Dotted Loader -->\n <div *ngIf=\"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</button>\n\n<!-- SKS24JAN25 dropdown button -->\n<div *ngIf=\"type === 'dropdown'\" class=\"dropdown\">\n <svg class=\"clickable-img\" (click)=\"toggleDropdown()\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.3\" y=\"0.3\" width=\"39.4\" height=\"39.4\" rx=\"11.7\" fill=\"#FAFBFD\" stroke=\"#D5D5D5\" stroke-width=\"0.6\"/>\n <path 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\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n <div class=\"dropdown-menu\" *ngIf=\"isDropdownOpen\">\n <button *ngFor=\"let btn of buttonConfig.buttons\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [attr.tabindex]=\"btn.tabIndex\"\n [attr.data-bs-toggle]=\"btn.modalToTrigger ? 'modal' : null\"\n [attr.data-bs-target]=\"btn.modalToTrigger ? '#' + btn.modalToTrigger : null\"\n [ngStyle]=\"btn | buttonStyles\"\n [disabled]=\"btn.buttonDisable\"\n [attr.data-bs-dismiss]=\"btn.dataDismiss\"\n (click)=\"buttonClicked(btn)\"\n [attr.id]=\"btn.btnId !== 'default' ? btn.btnId : null\">\n <img *ngIf=\"btn.isImageSvg\" [src]=\"btn.iconSrc\">\n <span class=\"fc-btn-text\" style=\"padding-left: 12px;\">{{btn.name}}</span>\n </button>\n </div>\n</div>\n", styles: [".fc-button,.fc-button:hover,.fc-button:active,.fc-button:focus{outline:none;border:none;box-shadow:none}.fc-button{padding:6.5px}.fc-button:active{transform:scale(1.02)}.text-only{background:transparent;color:var(--fc-primary-color);border:none;outline:none}.grey-text{color:var(--fc-text-color)}.blue-text{color:var(--fc-primary-color)}.grey-border{color:#272525;background:transparent;border:2px solid #dddddd}.grey-border:hover{color:#272525;background:#6a2aff0a;border:2px solid #6a2aff59}.grey-border:active,.grey-border:focus{background-color:#386bf6;border:2px solid #3268ff;color:#fff}.blue-border,.blue-border:hover,.blue-border:active,.blue-border:focus{border:1px solid var(--fc-primary-color)}.bg-transparent{background-color:transparent}.custom-btn{background-color:var(--button-custom-bg)!important;border:var(--button-custom-border)!important;border-radius:var(--button-custom-border-radius)!important;color:var(--button-custom-color)!important;height:var(--button-custom-height)!important;width:var(--button-custom-width)!important}.custom-btn:hover,.custom-btn:active,.custom-btn:focus{background-color:var(--button-hover-bg);color:var(--button-hover-text-color);border:var(--button-custom-border);border-radius:var(--button-custom-border-radius)}.fc-btn-text{display:inline-flex;font-size:14px;font-weight:400;padding-left:5px;padding-right:5px}.right-icon{margin-left:5px}.left-icon{margin-right:5px}.fc-button.side-save-component,.fc-button.side-cancel-component{border:1px solid transparent}.fc-button.side-save-component:focus,.fc-button.side-cancel-component:focus{box-shadow:0 0 0 .25rem #0d6efd40;border:1px solid #86b7fe}.btn-group{background-color:#fdfeff;border:1px solid #dddddd;border-radius:7px}.btn-icon{background-color:#fdfeff;border:1px solid #dddddd}.custom-tooltip{visibility:visible;position:absolute;background-color:#0773ff;color:#fff;text-align:center;padding:5px 10px;border-radius:4px;font-size:12px;white-space:nowrap;bottom:100%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .2s;z-index:10;margin-bottom:10px}.tooltip-pointer{position:absolute;width:0;height:0;bottom:-5px;left:50%;transform:translate(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #0773ff}.tooltip-container:hover .custom-tooltip{visibility:visible;opacity:1}.clickable-img{position:relative;cursor:pointer;height:41px;transition:transform .3s ease,box-shadow .3s ease;border:2px solid #dddddd;border-radius:13px}.clickable-img:hover{transform:scale(.95);border:2px solid rgb(31,105,255);border-radius:14px}.dropdown{position:relative;display:inline-block}.dropdown-menu{right:0;top:45px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a;left:unset}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}.dropdown-menu .btn:hover{background-color:#f1f1f1}.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:var(--button-custom-color);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)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "pipe", type: ButtonStylesPipe, name: "buttonStyles" }] });
|
|
8343
8344
|
}
|
|
8344
8345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NxtButtonComponent, decorators: [{
|
|
8345
8346
|
type: Component,
|
|
8346
|
-
args: [{ selector: 'nxt-button', standalone: true, imports: [CommonModule, NxtCustomTranslatePipe, ButtonStylesPipe], template: "<!-- SKS24JAN25 group button -->\n<div *ngIf=\"type === 'group'\" class=\"btn-group\" role=\"group\" aria-label=\"Button Group\">\n <button *ngFor=\"let btn of buttonConfig.buttons\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [attr.tabindex]=\"btn.tabIndex\"\n [attr.data-bs-toggle]=\"btn.modalToTrigger ? 'modal' : null\"\n [attr.data-bs-target]=\"btn.modalToTrigger ? '#' + btn.modalToTrigger : null\"\n [ngStyle]=\"btn | buttonStyles\"\n [disabled]=\"btn.buttonDisable\"\n [attr.data-bs-dismiss]=\"btn.dataDismiss\"\n (click)=\"buttonClicked(btn)\"\n [attr.id]=\"btn.btnId !== 'default' ? btn.btnId : null\">\n <img *ngIf=\"btn.isImageSvg\" [src]=\"btn.iconSrc\">\n <span class=\"custom-tooltip\" \n style=\"background-color:{{btn.tooltipBcColor}};\n color:{{btn.tooltipColor}};\n font-size:{{btn.tooltipFSize}}\">\n {{ btn.tooltipPath ? (btn.tooltipPath | nxtCustomTranslate : btn.tooltip) : (btn.tooltip | nxtCustomTranslate : btn.tooltip) }}\n <div class=\"tooltip-pointer\" style=\"background-color:{{btn.tooltipBcColor}};\"></div>\n </span>\n </button>\n</div>\n \n<!-- SKS24JAN25 single button -->\n<button type=\"button\" *ngIf=\"type !== 'group' && type !== 'dropdown'\" class=\"btn fc-button {{buttonType}}\" [tabindex]=\"tabIndex\"\n [attr.data-bs-toggle]=\"modalToTrigger != '' ? 'modal' : ''\"\n [attr.data-bs-target]=\"modalToTrigger != '' ? '#'+modalToTrigger : ''\"\n [ngClass]=\"buttonType === 'custom-btn' ? '' : 'btn-primary'\"\n [ngStyle]=\"{\n '--button-custom-bg': btnBgColor || '#0773ff',\n '--button-custom-border': (btnBorder || 1) + 'px solid ' + (btnBorderColor || 'transparent'),\n '--button-custom-border-radius': (btnBorderRadius || 4) + 'px',\n '--button-custom-color': btnTextColor || '#ffffff',\n '--button-custom-height': (btnHeight || 40) + 'px',\n '--button-custom-width': (btnWidth || 120) + 'px',\n '--button-hover-bg': btnHoverBgColor || btnBgColor || '#0056d2',\n '--button-hover-text-color': btnHoverTextColor || btnTextColor || '#ffffff'\n }\"
|
|
8347
|
+
args: [{ selector: 'nxt-button', standalone: true, imports: [CommonModule, NxtCustomTranslatePipe, ButtonStylesPipe], template: "<!-- SKS24JAN25 group button -->\n<div *ngIf=\"type === 'group'\" class=\"btn-group\" role=\"group\" aria-label=\"Button Group\">\n <button *ngFor=\"let btn of buttonConfig.buttons\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [attr.tabindex]=\"btn.tabIndex\"\n [attr.data-bs-toggle]=\"btn.modalToTrigger ? 'modal' : null\"\n [attr.data-bs-target]=\"btn.modalToTrigger ? '#' + btn.modalToTrigger : null\"\n [ngStyle]=\"btn | buttonStyles\"\n [disabled]=\"btn.buttonDisable\"\n [attr.data-bs-dismiss]=\"btn.dataDismiss\"\n (click)=\"buttonClicked(btn)\"\n [attr.id]=\"btn.btnId !== 'default' ? btn.btnId : null\">\n <img *ngIf=\"btn.isImageSvg\" [src]=\"btn.iconSrc\">\n <span class=\"custom-tooltip\" \n style=\"background-color:{{btn.tooltipBcColor}};\n color:{{btn.tooltipColor}};\n font-size:{{btn.tooltipFSize}}\">\n {{ btn.tooltipPath ? (btn.tooltipPath | nxtCustomTranslate : btn.tooltip) : (btn.tooltip | nxtCustomTranslate : btn.tooltip) }}\n <div class=\"tooltip-pointer\" style=\"background-color:{{btn.tooltipBcColor}};\"></div>\n </span>\n </button>\n</div>\n \n<!-- SKS24JAN25 single button -->\n<button type=\"button\" *ngIf=\"type !== 'group' && type !== 'dropdown'\" class=\"btn fc-button {{buttonType}}\" [tabindex]=\"tabIndex\"\n [attr.data-bs-toggle]=\"modalToTrigger != '' ? 'modal' : ''\"\n [attr.data-bs-target]=\"modalToTrigger != '' ? '#'+modalToTrigger : ''\"\n [ngClass]=\"buttonType === 'custom-btn' ? '' : 'btn-primary'\"\n [ngStyle]=\"{\n '--button-custom-bg': btnBgColor || '#0773ff',\n '--button-custom-border': (btnBorder || 1) + 'px solid ' + (btnBorderColor || 'transparent'),\n '--button-custom-border-radius': (btnBorderRadius || 4) + 'px',\n '--button-custom-color': btnTextColor || '#ffffff',\n '--button-custom-height': (btnHeight || 40) + 'px',\n '--button-custom-width': (btnWidth || 120) + 'px',\n '--button-hover-bg': btnHoverBgColor || btnBgColor || '#0056d2',\n '--button-hover-text-color': btnHoverTextColor || btnTextColor || '#ffffff'\n }\" \n [disabled]=\"isLoading || buttonDisable\" [attr.data-bs-dismiss]='dataDismiss' (click)=\"buttonClicked($event)\"\n [attr.id]=\"btnId != 'default' ? btnId : null\"\n style=\"display: flex; align-items: center; justify-content: center; gap: 10px;\">\n <img *ngIf=\"btnIconLeftSrc && btnIconLeftSrc != '' && isImageSvg\" src=\"{{btnIconLeftSrc}}\"\n class=\"fc-btn-icon left-icon\">\n <img *ngIf=\"btnIconLeftSrc && btnIconLeftSrc != '' && !isImageSvg\" src=\"{{btnIconLeftSrc}}\" class=\"fc-btn-icon left-icon\">\n <span class=\"fc-btn-text\">{{buttonValue}}</span>\n <img *ngIf=\"btnIconRightSrc && btnIconRightSrc != '' && isImageSvg\" src=\"{{btnIconRightSrc}}\"\n class=\"fc-btn-icon right-icon\">\n <img *ngIf=\"btnIconRightSrc && btnIconRightSrc != '' && !isImageSvg\" src=\"{{btnIconRightSrc}}\" class=\"fc-btn-icon right-icon\">\n <!-- SKS4SEP25 api call Dotted Loader -->\n <div *ngIf=\"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</button>\n\n<!-- SKS24JAN25 dropdown button -->\n<div *ngIf=\"type === 'dropdown'\" class=\"dropdown\">\n <svg class=\"clickable-img\" (click)=\"toggleDropdown()\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.3\" y=\"0.3\" width=\"39.4\" height=\"39.4\" rx=\"11.7\" fill=\"#FAFBFD\" stroke=\"#D5D5D5\" stroke-width=\"0.6\"/>\n <path 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\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n <div class=\"dropdown-menu\" *ngIf=\"isDropdownOpen\">\n <button *ngFor=\"let btn of buttonConfig.buttons\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [attr.tabindex]=\"btn.tabIndex\"\n [attr.data-bs-toggle]=\"btn.modalToTrigger ? 'modal' : null\"\n [attr.data-bs-target]=\"btn.modalToTrigger ? '#' + btn.modalToTrigger : null\"\n [ngStyle]=\"btn | buttonStyles\"\n [disabled]=\"btn.buttonDisable\"\n [attr.data-bs-dismiss]=\"btn.dataDismiss\"\n (click)=\"buttonClicked(btn)\"\n [attr.id]=\"btn.btnId !== 'default' ? btn.btnId : null\">\n <img *ngIf=\"btn.isImageSvg\" [src]=\"btn.iconSrc\">\n <span class=\"fc-btn-text\" style=\"padding-left: 12px;\">{{btn.name}}</span>\n </button>\n </div>\n</div>\n", styles: [".fc-button,.fc-button:hover,.fc-button:active,.fc-button:focus{outline:none;border:none;box-shadow:none}.fc-button{padding:6.5px}.fc-button:active{transform:scale(1.02)}.text-only{background:transparent;color:var(--fc-primary-color);border:none;outline:none}.grey-text{color:var(--fc-text-color)}.blue-text{color:var(--fc-primary-color)}.grey-border{color:#272525;background:transparent;border:2px solid #dddddd}.grey-border:hover{color:#272525;background:#6a2aff0a;border:2px solid #6a2aff59}.grey-border:active,.grey-border:focus{background-color:#386bf6;border:2px solid #3268ff;color:#fff}.blue-border,.blue-border:hover,.blue-border:active,.blue-border:focus{border:1px solid var(--fc-primary-color)}.bg-transparent{background-color:transparent}.custom-btn{background-color:var(--button-custom-bg)!important;border:var(--button-custom-border)!important;border-radius:var(--button-custom-border-radius)!important;color:var(--button-custom-color)!important;height:var(--button-custom-height)!important;width:var(--button-custom-width)!important}.custom-btn:hover,.custom-btn:active,.custom-btn:focus{background-color:var(--button-hover-bg);color:var(--button-hover-text-color);border:var(--button-custom-border);border-radius:var(--button-custom-border-radius)}.fc-btn-text{display:inline-flex;font-size:14px;font-weight:400;padding-left:5px;padding-right:5px}.right-icon{margin-left:5px}.left-icon{margin-right:5px}.fc-button.side-save-component,.fc-button.side-cancel-component{border:1px solid transparent}.fc-button.side-save-component:focus,.fc-button.side-cancel-component:focus{box-shadow:0 0 0 .25rem #0d6efd40;border:1px solid #86b7fe}.btn-group{background-color:#fdfeff;border:1px solid #dddddd;border-radius:7px}.btn-icon{background-color:#fdfeff;border:1px solid #dddddd}.custom-tooltip{visibility:visible;position:absolute;background-color:#0773ff;color:#fff;text-align:center;padding:5px 10px;border-radius:4px;font-size:12px;white-space:nowrap;bottom:100%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .2s;z-index:10;margin-bottom:10px}.tooltip-pointer{position:absolute;width:0;height:0;bottom:-5px;left:50%;transform:translate(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #0773ff}.tooltip-container:hover .custom-tooltip{visibility:visible;opacity:1}.clickable-img{position:relative;cursor:pointer;height:41px;transition:transform .3s ease,box-shadow .3s ease;border:2px solid #dddddd;border-radius:13px}.clickable-img:hover{transform:scale(.95);border:2px solid rgb(31,105,255);border-radius:14px}.dropdown{position:relative;display:inline-block}.dropdown-menu{right:0;top:45px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a;left:unset}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}.dropdown-menu .btn:hover{background-color:#f1f1f1}.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:var(--button-custom-color);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)}}\n"] }]
|
|
8347
8348
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TranslationService }, { type: i0.ElementRef }], propDecorators: { buttonValue: [{
|
|
8348
8349
|
type: Input
|
|
8349
8350
|
}], buttonType: [{
|
|
@@ -8390,6 +8391,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8390
8391
|
type: Input
|
|
8391
8392
|
}], languageCode: [{
|
|
8392
8393
|
type: Input
|
|
8394
|
+
}], isLoading: [{
|
|
8395
|
+
type: Input
|
|
8393
8396
|
}], buttonClickEmit: [{
|
|
8394
8397
|
type: Output
|
|
8395
8398
|
}], onClickOutside: [{
|
|
@@ -53952,6 +53955,7 @@ class NxtDatatable {
|
|
|
53952
53955
|
languageCode; //SKS28JUN25 for translation
|
|
53953
53956
|
selectedColumn = null; // SKS22JUL25 to get the selected column
|
|
53954
53957
|
allIcons = []; // SKS22JUL25 icon selector component input
|
|
53958
|
+
isButtonLoading = false;
|
|
53955
53959
|
tableRowClick = new EventEmitter; // datas to be passed when table row is clicked
|
|
53956
53960
|
onEditData = new EventEmitter; // if edit button is clicked, the data of that row will be passed
|
|
53957
53961
|
saveButtonData = new EventEmitter; // edited rows data will be passed
|
|
@@ -54064,6 +54068,9 @@ class NxtDatatable {
|
|
|
54064
54068
|
this.changeService = changeService;
|
|
54065
54069
|
}
|
|
54066
54070
|
ngOnChanges(changes) {
|
|
54071
|
+
if (changes['isButtonLoading']) {
|
|
54072
|
+
this.deleteModal = this.isButtonLoading;
|
|
54073
|
+
}
|
|
54067
54074
|
if (changes['data'] || changes['columns']) {
|
|
54068
54075
|
this.questionsCache.clear();
|
|
54069
54076
|
}
|
|
@@ -55094,7 +55101,6 @@ class NxtDatatable {
|
|
|
55094
55101
|
// SKS15FEB25 after clicking yes in delete alert modal, emit to parent
|
|
55095
55102
|
deleteRecordData() {
|
|
55096
55103
|
this.onDeleteData.emit({ data: this.deleteData, allData: this.data, index: this.deleteIndex });
|
|
55097
|
-
this.deleteModal = false;
|
|
55098
55104
|
}
|
|
55099
55105
|
//SKS15FEB25 to save the edited data in table;
|
|
55100
55106
|
saveButton() {
|
|
@@ -55533,7 +55539,7 @@ class NxtDatatable {
|
|
|
55533
55539
|
this.cdRef.markForCheck();
|
|
55534
55540
|
}
|
|
55535
55541
|
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 });
|
|
55536
|
-
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", isListViews: "isListViews", id: "id", 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: 10px;\">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder'\" [listViews]=\"listViews\"\n [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\"\n (listViewEmit)=\"listViewEmit($event)\">\n </app-list-view-filter>\n <div *ngIf=\"(!id || isListViews === false || isListViews === 'false' || from === 'formBuilder' || from === 'questionBook') && 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 === 'questionBook' && mode === 'view'\" (click)=\"editModeChange()\" class=\"eicon-container edit-icon-hide\"\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' && viewEdit\" 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' && viewEdit\" 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=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\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' && from !== 'questionBook' ? '0px' : searchFilter ? '233px' : '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' || from !== 'questionBook') {\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' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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 || ''\" [value]=\"element | getValue: column.fieldName\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? 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]=\"element | getValue: column.fieldName\"\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' || from === 'questionBook') ? 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]=\"element | getValue: column.fieldName \" [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\"\n [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.question?.isReadOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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 : (languageCode === 'ar' ? \"hijri\" : \"gregorianAr\")}}</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' && from !== 'questionBook'\"\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' && from != 'questionBook'\"\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:100%;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;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%;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}.edit-icon-hide{display:none;cursor:pointer}.table-layout:hover .edit-icon-hide{display:block}\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", "isListViews", "id", "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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode"], 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", "value"], 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,
|
|
55542
|
+
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", isListViews: "isListViews", id: "id", 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", isButtonLoading: "isButtonLoading" }, 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: 10px;\">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder'\" [listViews]=\"listViews\"\n [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\"\n (listViewEmit)=\"listViewEmit($event)\">\n </app-list-view-filter>\n <div *ngIf=\"(!id || isListViews === false || isListViews === 'false' || from === 'formBuilder' || from === 'questionBook') && 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 === 'questionBook' && mode === 'view'\" (click)=\"editModeChange()\" class=\"eicon-container edit-icon-hide\"\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' && viewEdit\" 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' && viewEdit\" 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=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\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' && from !== 'questionBook' ? '0px' : searchFilter ? '233px' : '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' || from !== 'questionBook') {\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' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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 || ''\" [value]=\"element | getValue: column.fieldName\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? 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]=\"element | getValue: column.fieldName\"\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' || from === 'questionBook') ? 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]=\"element | getValue: column.fieldName \" [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\"\n [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.question?.isReadOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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 : (languageCode === 'ar' ? \"hijri\" : \"gregorianAr\")}}</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' && from !== 'questionBook'\"\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' && from != 'questionBook'\"\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 <nxt-button\n (buttonClickEmit)=\"deleteModal = false\" \n [buttonValue]=\"'NO'| nxtCustomTranslate : 'No'\"\n [btnBgColor]=\"'#ffffff'\"\n [btnTextColor]=\"'#0773ff'\"\n [btnBorder]=\"'1'\"\n [btnBorderColor]=\"'#dee2e6'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n <nxt-button\n (buttonClickEmit)=\"deleteRecordData()\" \n [isLoading]=\"isButtonLoading\"\n [buttonValue]=\"'YES'| nxtCustomTranslate : 'Yes'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;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;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%;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}.edit-icon-hide{display:none;cursor:pointer}.table-layout:hover .edit-icon-hide{display:block}.modal-footer{padding:0!important}\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", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading"], 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode", "isLoading"], outputs: ["buttonClickEmit"] }, { kind: "component", type: 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", "value"], 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,
|
|
55537
55543
|
QuestionByRowPipe]] });
|
|
55538
55544
|
}
|
|
55539
55545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NxtDatatable, decorators: [{
|
|
@@ -55560,7 +55566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
55560
55566
|
QuestionByRowPipe,
|
|
55561
55567
|
NxtDatePipe
|
|
55562
55568
|
// RowResizerDirective
|
|
55563
|
-
], 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: 10px;\">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder'\" [listViews]=\"listViews\"\n [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\"\n (listViewEmit)=\"listViewEmit($event)\">\n </app-list-view-filter>\n <div *ngIf=\"(!id || isListViews === false || isListViews === 'false' || from === 'formBuilder' || from === 'questionBook') && 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 === 'questionBook' && mode === 'view'\" (click)=\"editModeChange()\" class=\"eicon-container edit-icon-hide\"\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' && viewEdit\" 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' && viewEdit\" 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=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\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' && from !== 'questionBook' ? '0px' : searchFilter ? '233px' : '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' || from !== 'questionBook') {\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' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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 || ''\" [value]=\"element | getValue: column.fieldName\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? 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]=\"element | getValue: column.fieldName\"\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' || from === 'questionBook') ? 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]=\"element | getValue: column.fieldName \" [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\"\n [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.question?.isReadOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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 : (languageCode === 'ar' ? \"hijri\" : \"gregorianAr\")}}</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' && from !== 'questionBook'\"\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' && from != 'questionBook'\"\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:100%;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;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%;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}.edit-icon-hide{display:none;cursor:pointer}.table-layout:hover .edit-icon-hide{display:block}\n"] }]
|
|
55569
|
+
], 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: 10px;\">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder'\" [listViews]=\"listViews\"\n [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\"\n (listViewEmit)=\"listViewEmit($event)\">\n </app-list-view-filter>\n <div *ngIf=\"(!id || isListViews === false || isListViews === 'false' || from === 'formBuilder' || from === 'questionBook') && 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 === 'questionBook' && mode === 'view'\" (click)=\"editModeChange()\" class=\"eicon-container edit-icon-hide\"\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' && viewEdit\" 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' && viewEdit\" 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=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\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' && from !== 'questionBook' ? '0px' : searchFilter ? '233px' : '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' || from !== 'questionBook') {\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' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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 || ''\" [value]=\"element | getValue: column.fieldName\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? 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]=\"element | getValue: column.fieldName\"\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' || from === 'questionBook') ? 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]=\"element | getValue: column.fieldName \" [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\"\n [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.question?.isReadOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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' || from === 'questionBook') ? 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 : (languageCode === 'ar' ? \"hijri\" : \"gregorianAr\")}}</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' && from !== 'questionBook'\"\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' && from != 'questionBook'\"\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 <nxt-button\n (buttonClickEmit)=\"deleteModal = false\" \n [buttonValue]=\"'NO'| nxtCustomTranslate : 'No'\"\n [btnBgColor]=\"'#ffffff'\"\n [btnTextColor]=\"'#0773ff'\"\n [btnBorder]=\"'1'\"\n [btnBorderColor]=\"'#dee2e6'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n <nxt-button\n (buttonClickEmit)=\"deleteRecordData()\" \n [isLoading]=\"isButtonLoading\"\n [buttonValue]=\"'YES'| nxtCustomTranslate : 'Yes'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;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;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%;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}.edit-icon-hide{display:none;cursor:pointer}.table-layout:hover .edit-icon-hide{display:block}.modal-footer{padding:0!important}\n"] }]
|
|
55564
55570
|
}], ctorParameters: () => [{ type: StorageService }, { type: i0.ChangeDetectorRef }, { type: TranslationService }, { type: i0.Renderer2 }, { type: DataService }, { type: ChangeService }], propDecorators: { data: [{
|
|
55565
55571
|
type: Input
|
|
55566
55572
|
}], tableFilterData: [{
|
|
@@ -55645,6 +55651,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
55645
55651
|
type: Input
|
|
55646
55652
|
}], allIcons: [{
|
|
55647
55653
|
type: Input
|
|
55654
|
+
}], isButtonLoading: [{
|
|
55655
|
+
type: Input
|
|
55648
55656
|
}], tableRowClick: [{
|
|
55649
55657
|
type: Output
|
|
55650
55658
|
}], onEditData: [{
|
|
@@ -57879,7 +57887,7 @@ class QuestionnaireComponent {
|
|
|
57879
57887
|
return Object.values(item)[0];
|
|
57880
57888
|
}
|
|
57881
57889
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuestionnaireComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: SharedService }, { token: i1$3.ActivatedRoute }, { token: i1$2.DomSanitizer }, { token: i6.UntypedFormBuilder }, { token: i8$1.DeviceDetectorService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
57882
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: QuestionnaireComponent, isStandalone: true, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn", api: "api", isEdit: "isEdit", direction: "direction" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage", handleQuestion: "handleQuestion", handleBook: "handleBook", handleSubmit: "handleSubmit" }, usesOnChanges: true, ngImport: i0, template: "<!-- custom loader -->\n<!-- Back Processing -->\n<!-- <div *ngIf=\"backicon == false\" >\n <div class=\"backicon\" >\n <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\n <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\n </button>\n </div>\n</div> -->\n\n<!-- Question Hanlding -->\n<!-- VD removed unwanted condition -->\n<!-- RS 09DEC24 Changed keys-->\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\" [dir]=\"direction\">\n <!-- Progress Bar & Title -->\n <div *ngIf=\"questionItem.title\">\n <h1>{{ questionItem?.title }}</h1>\n <div>{{ questionItem?.subTitle }}</div>\n </div>\n\n <!-- Progress & Grouping -->\n <div>\n <!-- RS 09DEC24 Changed keys-->\n <!-- Show the Group/Module related to the Progress -->\n <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\n [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\n <div class=\"nxt-largeTitle\">\n <h3 class=\"myt-font6 myt-text3\">\n {{ questionItem?.groupName }}\n </h3>\n <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\n <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\n </div>\n </div>\n </div>\n <!-- RS 09DEC24 Changed keys-->\n <!-- Question Handling -->\n <!-- VD 10Aug24- question no -->\n <div>\n <div *ngIf=\"questionItem.questionText && questionItem.style?.showLabel !== false\" style=\"display: flex;\">\n <span>{{questionItem?.questionNumber}}.</span>\n <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{(questionItem.id+'.questionText') | nxtCustomTranslate : questionItem?.questionText}}\n </p>\n </div>\n <!-- Title -->\n <!-- <div *ngIf=\"questionItem.isTitle\">\n <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \n <h3 class=\"questionalign myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{questionItem?.questionText}}\n </h3>\n </div>\n </div> -->\n <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\n <div [innerHTML]=\"getText(questionItem?.questionText)\" >\n {{ questionItem?.questionText }}\n </div>\n </div> -->\n\n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n <!-- <div *ngIf=\"questionItem.type == 'Book'\">\n <div *ngIf=\"questionItem.questionNumber=='6'\">\n <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{ questionItem?.questionText }}\n </h3>\n </div>\n </div> -->\n \n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n <!-- <div *ngIf=\"questionItem.type == 'File' \">\n <div *ngIf=\"questionItem.questionNumber=='9'\">\n <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{questionItem?.questionText}}\n </h3>\n </div>\n </div> -->\n </div>\n\n <!-- Additional Info -->\n <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\n <div\n class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\n </div>\n </div>\n <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\n <div class=\"info-alert ques-alert1\">\n <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n </div>\n </div>\n\n <!-- Dropdown-->\n <div *ngIf=\"dropdownFlag\" >\n <div class=\"nxt-dis-flex\">\n <select class=\"nxtdropdown\"\n [ngClass]=\"{\n 'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\n 'custom-select': !qbItem?.progressBar\n }\" class=\"mr-sm-2 dd-height nxt-dropbox \" id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\n <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\n {{ opt.value }}\n </option>\n <!-- HA 20DEC23 For Translation -->\n <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | nxtCustomTranslate: 'pleaseMakeChoice'}}</option>\n </select>\n </div>\n </div>\n\n <!--VD Radio update -->\n <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\n <div class=\"nxt-custom-radio-container\">\n <div *ngFor=\"let opt of questionItem.options\" \n [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\n <input\n type=\"radio\"\n [id]=\"opt.value\"\n [(ngModel)]=\"inpValue\"\n name=\"inpValue\"\n [value]=\"opt.value\"\n (change)=\"optionChange(opt.value)\"\n />\n <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\n </div>\n </div>\n\n <!-- <div class=\"nxt-dis-flex\">\n <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\n <label class=\"nxt-radiocontainer container myt-font4\">\n <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\n (change)=\"optionChange(opt.value)\" />\n {{ opt.value }}\n </label>\n </div>\n </div> -->\n </div> \n <!-- Checkbox -->\n <div *ngIf=\"checkboxFlag\" class=\"\">\n <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\n {{ questionItem?.errorMessage }}\n </div>\n <div class=\"nxt-checkbox-container\">\n <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\n <label class=\"nxt-container1\">\n <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\n </label>\n </div>\n </div>\n </div>\n\n <!-- Text -->\n <div *ngIf=\"textFlag\">\n <!-- HA 31-JAN-24 To reduce the margin -->\n <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\n <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \n id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error\n ? 'red'\n : ''\n }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\n </div>\n </div>\n\n <!-- Text Area -->\n <div *ngIf=\"taFlag\" >\n <div>\n <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error\n ? 'red'\n : inpValue?.length > 0 && taFocusOut\n ? '#87be1c'\n : ''\n }}\" (focusout)=\"taFocusOut = true\"\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\n </div>\n </div>\n\n <!-- CC Number Format -->\n <!-- RS 09DEC24 Changed keys-->\n <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n <div class=\"nxt-dis-flex\">\n <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\n [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n this.questionItem.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" />\n </div>\n </div>\n <!-- END-->\n\n <!-- AlphaNumeric -->\n <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n <div style=\"position:relative;\">\n <!-- HA 20DEC23 For Translation -->\n <input type=text placeholder=\"{{'zeroOfZero' | nxtCustomTranslate: 'zeroOfZero'}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n </div>\n </div>\n\n <!-- Email -->\n <!-- RS 09DEC24 Changed keys-->\n <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n <div class=\"nxt-dis-flex\">\n <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n this.questionItem.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" />\n </div>\n </div>\n\n <!-- DateTime -->\n <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\n <!-- Error Handling -->\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n <!-- Date -->\n <div *ngIf=\"dateFlag\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\n <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n <div class=\"nxt-dis-flex\">\n <!-- HA 20DEC23 For Translation -->\n <!-- HA 02FEB24 Additional param to update the question -->\n </div>\n </div>\n </div>\n\n <!-- Time -->\n <div *ngIf=\"timeFlag\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n <div class=\"nxt-dis-flex\">\n <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n dateandTime: !qbItem?.progressBar}\" \n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n (focus)=\"(clearSQError) \">\n <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n (focus)=\"clearError()\">\n <option value=\"\">HH</option>\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n {{ hour }}\n </option>\n </select>\n <span class=\"colon\"> : </span>\n <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n (focus)=\"clearError()\">\n <option value=\"\">MM</option>\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n {{ minute }}\n </option>\n </select>\n <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\n <span class=\"colon\"> : </span>\n <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n <option value=\"AM\">AM</option>\n <option value=\"PM\">PM</option>\n </select>\n <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Attachment / File -->\n <div *ngIf=\"fileFlag\">\n <div *ngIf=\"!qbItem.progressBar\">\n <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n <label class=\"picture-upload\" for=\"file-upload\">\n <span class=\"picture-upload-child\">\n </span>\n </label>\n </div>\n <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\n </div>\n <ul *ngIf=\"\n attachments?.length > 0 &&\n questionItem?.type === 'File' &&\n !qbItem?.progressBar\n \" class=\"attach-ulist col-md-12\">\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n </li>\n </ul>\n\n <!-- Attachment Progress -->\n <div *ngIf=\"qbItem.progressBar\">\n <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\n </div>\n <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n \n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n <span class=\"f-Name\" *ngIf=\" questionItem?.style?.showLabel !== false\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\n <label class=\"file-label \">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | nxtCustomTranslate : 'toBuyTicket'}}\" multiple\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n class=\"file-upload-btn\">\n </label>\n </div>\n </div>\n </div>\n <!-- RS 09DEC24 Changed keys-->\n <!-- Book -->\n <div *ngIf=\"bookFlag\">\n <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\n <div class=\"form-row\">\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\n *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\n <span *ngIf=\"ques?.style?.showLabel !== false\">{{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText }}</span>\n </div>\n <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\n <div *ngIf=\"ques.type === 'Date'\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n <div class=\"dateandtime\">\n <!-- HA 20DEC23 For Translation -->\n <!-- HA 02FEB24 Additional param to update the question -->\n </div>\n </div>\n </div>\n <div *ngIf=\"ques.type === 'Time'\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n <div class=\"dateandtime\">\n <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n dateandTime: !qbItem?.progressBar}\" \n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n (focus)=\"(clearSQError) \">\n <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n (focus)=\"clearError()\">\n <option value=\"\">HH</option>\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n {{ hour }}\n </option>\n </select>\n <span class=\"colon\"> : </span>\n <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n (focus)=\"clearError()\">\n <option value=\"\">MM</option>\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n {{ minute }}\n </option>\n </select>\n <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\n <span class=\"colon\"> : </span>\n <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n <option value=\"AM\">AM</option>\n <option value=\"PM\">PM</option>\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <!-- SKS11JUN25 Text, Email, label, number, DateTime-->\n <nxt-input *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'TextArea'\"\n [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [value]=\"ques.input\"\n [question]=\"ques\"\n [labelFont]=\"ques.font\"\n [label]=\"(ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText\"\n [labelColor]=\"ques.fontColor\"\n [labelSize]=\"ques.fontSize\"\n [inputValueSize]=\"ques.fontSize\"\n [labelWeight]=\"ques.fontWeight\"\n [inputWeight]=\"ques.fontWeight\"\n [showLabel]=\"ques.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"(ques.id+'.question') | nxtCustomTranslate : ques?.question\"\n [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n [inputId]=\"ques.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n (inputValue)=\"childEventCapture($event,ques)\"\n >\n </nxt-input>\n <div *ngIf=\"ques.type === 'Location'\">\n <!-- for pick location -->\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.type === 'Email'\">\n <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n </div>\n\n <div *ngIf=\"ques.type === 'File'\">\n <div *ngIf=\"!qbItem.progressBar\">\n <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n <span class=\"picture-upload-child\">\n </span>\n </label>\n <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n </div>\n\n <ul *ngIf=\"\n attachments?.length > 0 &&\n ques.type === 'File' &&\n !qbItem.progressBar\n \" class=\"attach-ulist col-md-12\">\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n {{ attachment.attachmentName\n }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n </li>\n </ul>\n <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\n\n <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\n </div>\n <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n <span class=\"f-Name\">{{ ques?.question }}</span>\n <label class=\"file-label \">\n <span style=\"color: #c5281c;text-decoration:underline\">\n {{'attach' | nxtCustomTranslate : 'attach'}}\n </span>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | nxtCustomTranslate : 'toBuyTicket'}}\" multiple\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n class=\"file-upload-btn\">\n </label>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n <!-- SKS13MAR25 nxt table change -->\n <nxt-datatable isEditRow isDeleteRow actionButton isButtons\n [question]=\"ques\"\n from = \"formBuilder\"\n (valueChange)=\"childEventCapture($event.data, ques); clearSQError(ques.id)\"\n [tableConfig]=\"ques.tableConfig\"\n tableId = \"\"\n direction = \"ltr\"\n tableWidth = \"auto\"\n >\n </nxt-datatable>\n </div>\n\n <!-- SKS25MAR25 Image -->\n <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n <img [src]=\"ques.imageData\" [style.border]=\"ques.imageData ? '1px solid black' : 'none'\" />\n </div>\n\n <!-- Dropdown -->\n <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\n <!-- for common dropdown -->\n <!-- HA 20DEC23 For Translation -->\n <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\n [options]=\"ques.options\"\n [apiMeta]=\"ques.subText\"\n [id]=\"ques.Name\"\n [selectedValue]=\"ques.input\"\n placeholder=\"---{{'select' | nxtCustomTranslate : 'select'}}---\"\n [errorMessage]=\"ques?.errorMessage\"\n [error]=\"ques?.error\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-dropdown>\n </div> \n </div>\n </div>\n </div>\n </div>\n\n <!--List start-->\n <div *ngIf=\"listFlag\">\n <div class=\"form-group\">\n <div class=\"form-row\">\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\n *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\n <div>\n <div class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</div>\n </div>\n <div *ngIf=\"ques.type === 'Text'\">\n <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n 'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\n textBox: !qbItem.progressBar\n }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n </div>\n </div>\n <div class=\"\" *ngIf=\"addFlag\">\n <!-- HA 20DEC23 For Translation -->\n <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\">{{'add' | nxtCustomTranslate : 'add'}}</button>\n </div>\n </div>\n </div>\n </div>\n <!--List End-->\n\n <!-- Actions -->\n <!-- VD button condition removed-->\n <div class=\"flexer\">\n <!-- Backward / Back -->\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <!--VD disabled -->\n <div class=\"backbutton\" \n [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\n <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n 'nxt-left-bt': qbItem.progressBar,\n 'nxt-btn btn-primary':\n !qbItem.progressBar\n }\" (click)=\"handleBackClick()\">\n {{ qbItem?.back }}\n </button>\n </div>\n\n <!-- Forward / Next -->\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div *ngIf=\"qbItem.next\" >\n <div class=\"nxtbutton\">\n <!--VD disabled -->\n <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n 'nxt-rusty': qbItem.progressBar,\n 'nxt-btn btn-primary':\n !qbItem.progressBar\n }\" (click)=\"handleNextClick()\">\n {{ qbItem.next }}\n </button>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\n <h2>{{this.qbItem.summaryText}}</h2>\n <p>{{this.qbItem.summarySubText}}</p>\n</div>\n\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n 'col-md-12':!qbItem.progressBar\n }\">\n <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1> \n <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\n <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n <div *ngFor=\"let qa of summary\">\n <div [ngClass]=\"{ non: qbItem.progressBar }\">\n <div [ngClass]=\"{ summary: !qbItem.progressBar }\">\n <div *ngIf=\"!qbItem.edit\"\n [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\n </div>\n <!-- VD Question No added -->\n <div *ngIf=\"qbItem.edit\"\n [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\n [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\n {{ qa.quesValue }}\n </div>\n </div>\n <div class=\"nxt-answer\" >\n <div *ngIf=\"qa.qTyp === 'File'\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n {{ qa.ansValue }}\n </div>\n <!-- HA 02FEB24 Displaying the in summary for book type -->\n <div *ngIf=\"qa.qTyp == 'Book'\">\n <div *ngFor=\"let val of qa.myVal\">\n <p *ngIf=\"val.style?.showLabel !== false\">{{ val.questionText }}:<span>{{ val.input }}</span></p>\n </div>\n </div>\n <!-- HA 02FEB24 Displaying the value for direct question -->\n <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book' && qa.style?.showLabel !== false\">{{ (qa.id+'.questionText') | nxtCustomTranslate : qa?.questionText}} <span></span>{{ qa.ansValue }}</div>\n <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n\n <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\n <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\n <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\n <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \n [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\n <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\n <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\n </div>\n </div>\n <div *ngIf=\"!qbItem.progressBar\">\n <h3 class=\"summary-h\">\n {{ qbItem.summaryText }}\n </h3>\n </div>\n </div>\n <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n <div class=\"summary-groupText myt-font2\">\n <!-- <p>Informe de da\u00F1o</p> -->\n </div>\n <div *ngFor=\"let qa of summary\" >\n <div [ngClass]=\"{ non: qbItem.progressBar }\">\n <div class=\"summary\">\n <!-- <div *ngIf=\"!qbItem.edit\"\n [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n </div>\n <div *ngIf=\"qbItem.edit\"\n [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\n [innerHTML]=\"getText(qa.quesValue)\">\n {{ qa.quesValue }}\n </div>\n </div> -->\n <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n </button>\n </div>\n \n <div class=\"nxt-answer\">\n <div *ngIf=\"qa.qTyp === 'File'\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n {{ qa.ansValue }}\n </div>\n <div *ngIf=\"qa.qTyp != 'File'\">\n {{ qa.ansValue }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\n <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\n <div class=\"col-md-12\">\n <button [ngClass]=\"{'btn-text': qbItem.progressBar,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\n (click)=\"handleCancelClick()\">\n {{ qbItem.cancel }}\n </button>\n </div>\n </div>\n </div> -->\n\n <!-- Group Actions -->\n <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\n <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \n (click)=\"handleSubmitClick()\">\n {{ qbItem.submit }}\n </button>\n </div>\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\n <button [ngClass]=\"{'grey': qbItem.progressBar,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \n (click)=\"handleBackClickNew()\">\n {{ qbItem.edit }}\n </button>\n </div> -->\n </div>\n\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-dateTimeNew{margin-left:-14px}.myt-hour{width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.nxt-dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.nxtdate-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.nxtsum-ques{width:55%;margin:auto}.nxtsum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#f8f8f8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.nxtfile-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.nxtfile-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.nxt-left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
57890
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: QuestionnaireComponent, isStandalone: true, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn", api: "api", isEdit: "isEdit", direction: "direction" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage", handleQuestion: "handleQuestion", handleBook: "handleBook", handleSubmit: "handleSubmit" }, usesOnChanges: true, ngImport: i0, template: "<!-- custom loader -->\n<!-- Back Processing -->\n<!-- <div *ngIf=\"backicon == false\" >\n <div class=\"backicon\" >\n <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\n <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\n </button>\n </div>\n</div> -->\n\n<!-- Question Hanlding -->\n<!-- VD removed unwanted condition -->\n<!-- RS 09DEC24 Changed keys-->\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\" [dir]=\"direction\">\n <!-- Progress Bar & Title -->\n <div *ngIf=\"questionItem.title\">\n <h1>{{ questionItem?.title }}</h1>\n <div>{{ questionItem?.subTitle }}</div>\n </div>\n\n <!-- Progress & Grouping -->\n <div>\n <!-- RS 09DEC24 Changed keys-->\n <!-- Show the Group/Module related to the Progress -->\n <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\n [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\n <div class=\"nxt-largeTitle\">\n <h3 class=\"myt-font6 myt-text3\">\n {{ questionItem?.groupName }}\n </h3>\n <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\n <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\n </div>\n </div>\n </div>\n <!-- RS 09DEC24 Changed keys-->\n <!-- Question Handling -->\n <!-- VD 10Aug24- question no -->\n <div>\n <div *ngIf=\"questionItem.questionText && questionItem.style?.showLabel !== false\" style=\"display: flex;\">\n <span>{{questionItem?.questionNumber}}.</span>\n <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{(questionItem.id+'.questionText') | nxtCustomTranslate : questionItem?.questionText}}\n </p>\n </div>\n <!-- Title -->\n <!-- <div *ngIf=\"questionItem.isTitle\">\n <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \n <h3 class=\"questionalign myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{questionItem?.questionText}}\n </h3>\n </div>\n </div> -->\n <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\n <div [innerHTML]=\"getText(questionItem?.questionText)\" >\n {{ questionItem?.questionText }}\n </div>\n </div> -->\n\n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n <!-- <div *ngIf=\"questionItem.type == 'Book'\">\n <div *ngIf=\"questionItem.questionNumber=='6'\">\n <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{ questionItem?.questionText }}\n </h3>\n </div>\n </div> -->\n \n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n <!-- <div *ngIf=\"questionItem.type == 'File' \">\n <div *ngIf=\"questionItem.questionNumber=='9'\">\n <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\n {{questionItem?.questionText}}\n </h3>\n </div>\n </div> -->\n </div>\n\n <!-- Additional Info -->\n <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\n <div\n class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\n </div>\n </div>\n <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\n <div class=\"info-alert ques-alert1\">\n <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n </div>\n </div>\n\n <!-- Dropdown-->\n <div *ngIf=\"dropdownFlag\" >\n <div class=\"nxt-dis-flex\">\n <select class=\"nxtdropdown\"\n [ngClass]=\"{\n 'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\n 'custom-select': !qbItem?.progressBar\n }\" class=\"mr-sm-2 dd-height nxt-dropbox \" id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\n <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\n {{ opt.value }}\n </option>\n <!-- HA 20DEC23 For Translation -->\n <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | nxtCustomTranslate: 'pleaseMakeChoice'}}</option>\n </select>\n </div>\n </div>\n\n <!--VD Radio update -->\n <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\n <div class=\"nxt-custom-radio-container\">\n <div *ngFor=\"let opt of questionItem.options\" \n [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\n <input\n type=\"radio\"\n [id]=\"opt.value\"\n [(ngModel)]=\"inpValue\"\n name=\"inpValue\"\n [value]=\"opt.value\"\n (change)=\"optionChange(opt.value)\"\n />\n <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\n </div>\n </div>\n\n <!-- <div class=\"nxt-dis-flex\">\n <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\n <label class=\"nxt-radiocontainer container myt-font4\">\n <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\n (change)=\"optionChange(opt.value)\" />\n {{ opt.value }}\n </label>\n </div>\n </div> -->\n </div> \n <!-- Checkbox -->\n <div *ngIf=\"checkboxFlag\" class=\"\">\n <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\n {{ questionItem?.errorMessage }}\n </div>\n <div class=\"nxt-checkbox-container\">\n <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\n <label class=\"nxt-container1\">\n <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\n </label>\n </div>\n </div>\n </div>\n\n <!-- Text -->\n <div *ngIf=\"textFlag\">\n <!-- HA 31-JAN-24 To reduce the margin -->\n <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\n <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \n id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error\n ? 'red'\n : ''\n }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\n </div>\n </div>\n\n <!-- Text Area -->\n <div *ngIf=\"taFlag\" >\n <div>\n <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error\n ? 'red'\n : inpValue?.length > 0 && taFocusOut\n ? '#87be1c'\n : ''\n }}\" (focusout)=\"taFocusOut = true\"\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\n </div>\n </div>\n\n <!-- CC Number Format -->\n <!-- RS 09DEC24 Changed keys-->\n <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n <div class=\"nxt-dis-flex\">\n <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\n [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n this.questionItem.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" />\n </div>\n </div>\n <!-- END-->\n\n <!-- AlphaNumeric -->\n <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n <div style=\"position:relative;\">\n <!-- HA 20DEC23 For Translation -->\n <input type=text placeholder=\"{{'zeroOfZero' | nxtCustomTranslate: 'zeroOfZero'}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n </div>\n </div>\n\n <!-- Email -->\n <!-- RS 09DEC24 Changed keys-->\n <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n <div class=\"nxt-dis-flex\">\n <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n this.questionItem.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" />\n </div>\n </div>\n\n <!-- DateTime -->\n <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\n <!-- Error Handling -->\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n <!-- Date -->\n <div *ngIf=\"dateFlag\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\n <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n <div class=\"nxt-dis-flex\">\n <!-- HA 20DEC23 For Translation -->\n <!-- HA 02FEB24 Additional param to update the question -->\n </div>\n </div>\n </div>\n\n <!-- Time -->\n <div *ngIf=\"timeFlag\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n <div class=\"nxt-dis-flex\">\n <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n dateandTime: !qbItem?.progressBar}\" \n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n (focus)=\"(clearSQError) \">\n <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n (focus)=\"clearError()\">\n <option value=\"\">HH</option>\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n {{ hour }}\n </option>\n </select>\n <span class=\"colon\"> : </span>\n <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n (focus)=\"clearError()\">\n <option value=\"\">MM</option>\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n {{ minute }}\n </option>\n </select>\n <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\n <span class=\"colon\"> : </span>\n <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n <option value=\"AM\">AM</option>\n <option value=\"PM\">PM</option>\n </select>\n <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Attachment / File -->\n <div *ngIf=\"fileFlag\">\n <div *ngIf=\"!qbItem.progressBar\">\n <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n <label class=\"picture-upload\" for=\"file-upload\">\n <span class=\"picture-upload-child\">\n </span>\n </label>\n </div>\n <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\n </div>\n <ul *ngIf=\"\n attachments?.length > 0 &&\n questionItem?.type === 'File' &&\n !qbItem?.progressBar\n \" class=\"attach-ulist col-md-12\">\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n </li>\n </ul>\n\n <!-- Attachment Progress -->\n <div *ngIf=\"qbItem.progressBar\">\n <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\n </div>\n <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n \n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n <span class=\"f-Name\" *ngIf=\" questionItem?.style?.showLabel !== false\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\n <label class=\"file-label \">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | nxtCustomTranslate : 'toBuyTicket'}}\" multiple\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n class=\"file-upload-btn\">\n </label>\n </div>\n </div>\n </div>\n <!-- RS 09DEC24 Changed keys-->\n <!-- Book -->\n <div *ngIf=\"bookFlag\">\n <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\n <div class=\"form-row\">\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\n *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\n <span *ngIf=\"ques?.style?.showLabel !== false\">{{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText }}</span>\n </div>\n <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\n <div *ngIf=\"ques.type === 'Date'\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n <div class=\"dateandtime\">\n <!-- HA 20DEC23 For Translation -->\n <!-- HA 02FEB24 Additional param to update the question -->\n </div>\n </div>\n </div>\n <div *ngIf=\"ques.type === 'Time'\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n <div class=\"dateandtime\">\n <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n dateandTime: !qbItem?.progressBar}\" \n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n (focus)=\"(clearSQError) \">\n <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n (focus)=\"clearError()\">\n <option value=\"\">HH</option>\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n {{ hour }}\n </option>\n </select>\n <span class=\"colon\"> : </span>\n <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n (focus)=\"clearError()\">\n <option value=\"\">MM</option>\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n {{ minute }}\n </option>\n </select>\n <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\n <span class=\"colon\"> : </span>\n <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n <option value=\"AM\">AM</option>\n <option value=\"PM\">PM</option>\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <!-- SKS11JUN25 Text, Email, label, number, DateTime-->\n <nxt-input *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'TextArea'\"\n [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [value]=\"ques.input\"\n [question]=\"ques\"\n [labelFont]=\"ques.font\"\n [label]=\"(ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText\"\n [labelColor]=\"ques.fontColor\"\n [labelSize]=\"ques.fontSize\"\n [inputValueSize]=\"ques.fontSize\"\n [labelWeight]=\"ques.fontWeight\"\n [inputWeight]=\"ques.fontWeight\"\n [showLabel]=\"ques.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"(ques.id+'.question') | nxtCustomTranslate : ques?.question\"\n [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n [inputId]=\"ques.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n (inputValue)=\"childEventCapture($event,ques)\"\n >\n </nxt-input>\n <div *ngIf=\"ques.type === 'Location'\">\n <!-- for pick location -->\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.type === 'Email'\">\n <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n </div>\n\n <div *ngIf=\"ques.type === 'File'\">\n <div *ngIf=\"!qbItem.progressBar\">\n <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n <span class=\"picture-upload-child\">\n </span>\n </label>\n <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n </div>\n\n <ul *ngIf=\"\n attachments?.length > 0 &&\n ques.type === 'File' &&\n !qbItem.progressBar\n \" class=\"attach-ulist col-md-12\">\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n {{ attachment.attachmentName\n }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n </li>\n </ul>\n <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\n\n <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\n </div>\n <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n <span class=\"f-Name\">{{ ques?.question }}</span>\n <label class=\"file-label \">\n <span style=\"color: #c5281c;text-decoration:underline\">\n {{'attach' | nxtCustomTranslate : 'attach'}}\n </span>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | nxtCustomTranslate : 'toBuyTicket'}}\" multiple\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n class=\"file-upload-btn\">\n </label>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n <!-- SKS13MAR25 nxt table change -->\n <nxt-datatable isEditRow isDeleteRow actionButton isButtons\n [question]=\"ques\"\n from = \"formBuilder\"\n (valueChange)=\"childEventCapture($event.data, ques); clearSQError(ques.id)\"\n [tableConfig]=\"ques.tableConfig\"\n tableId = \"\"\n direction = \"ltr\"\n tableWidth = \"auto\"\n >\n </nxt-datatable>\n </div>\n\n <!-- SKS25MAR25 Image -->\n <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n <img [src]=\"ques.imageData\" [style.border]=\"ques.imageData ? '1px solid black' : 'none'\" />\n </div>\n\n <!-- Dropdown -->\n <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\n <!-- for common dropdown -->\n <!-- HA 20DEC23 For Translation -->\n <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\n [options]=\"ques.options\"\n [apiMeta]=\"ques.subText\"\n [id]=\"ques.Name\"\n [selectedValue]=\"ques.input\"\n placeholder=\"---{{'select' | nxtCustomTranslate : 'select'}}---\"\n [errorMessage]=\"ques?.errorMessage\"\n [error]=\"ques?.error\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-dropdown>\n </div> \n </div>\n </div>\n </div>\n </div>\n\n <!--List start-->\n <div *ngIf=\"listFlag\">\n <div class=\"form-group\">\n <div class=\"form-row\">\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\n *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\n <div>\n <div class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</div>\n </div>\n <div *ngIf=\"ques.type === 'Text'\">\n <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n 'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\n textBox: !qbItem.progressBar\n }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n </div>\n </div>\n <div class=\"\" *ngIf=\"addFlag\">\n <!-- HA 20DEC23 For Translation -->\n <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\">{{'add' | nxtCustomTranslate : 'add'}}</button>\n </div>\n </div>\n </div>\n </div>\n <!--List End-->\n\n <!-- Actions -->\n <!-- VD button condition removed-->\n <div class=\"flexer\">\n <!-- Backward / Back -->\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <!--VD disabled -->\n <div class=\"backbutton\" \n [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\n <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n 'nxt-left-bt': qbItem.progressBar,\n 'nxt-btn btn-primary':\n !qbItem.progressBar\n }\" (click)=\"handleBackClick()\">\n {{ qbItem?.back }}\n </button>\n </div>\n\n <!-- Forward / Next -->\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div *ngIf=\"qbItem.next\" >\n <div class=\"nxtbutton\">\n <!--VD disabled -->\n <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n 'nxt-rusty': qbItem.progressBar,\n 'nxt-btn btn-primary':\n !qbItem.progressBar\n }\" (click)=\"handleNextClick()\">\n {{ qbItem.next }}\n </button>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\n <h2>{{this.qbItem.summaryText}}</h2>\n <p>{{this.qbItem.summarySubText}}</p>\n</div>\n\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n 'col-md-12':!qbItem.progressBar\n }\">\n <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1> \n <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\n <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n <div *ngFor=\"let qa of summary\">\n <div [ngClass]=\"{ non: qbItem.progressBar }\">\n <div [ngClass]=\"{ summary: !qbItem.progressBar }\">\n <div *ngIf=\"!qbItem.edit\"\n [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\n </div>\n <!-- VD Question No added -->\n <div *ngIf=\"qbItem.edit\"\n [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\n [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\n {{ qa.quesValue }}\n </div>\n </div>\n <div class=\"nxt-answer\" >\n <div *ngIf=\"qa.qTyp === 'File'\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n {{ qa.ansValue }}\n </div>\n <!-- HA 02FEB24 Displaying the in summary for book type -->\n <div *ngIf=\"qa.qTyp == 'Book'\">\n <div *ngFor=\"let val of qa.myVal\">\n <p *ngIf=\"val.style?.showLabel !== false\">{{ val.questionText }}:<span>{{ val.input }}</span></p>\n </div>\n </div>\n <!-- HA 02FEB24 Displaying the value for direct question -->\n <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book' && qa.style?.showLabel !== false\">{{ (qa.id+'.questionText') | nxtCustomTranslate : qa?.questionText}} <span></span>{{ qa.ansValue }}</div>\n <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n\n <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\n <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\n <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\n <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \n [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\n <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\n <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\n </div>\n </div>\n <div *ngIf=\"!qbItem.progressBar\">\n <h3 class=\"summary-h\">\n {{ qbItem.summaryText }}\n </h3>\n </div>\n </div>\n <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n <div class=\"summary-groupText myt-font2\">\n <!-- <p>Informe de da\u00F1o</p> -->\n </div>\n <div *ngFor=\"let qa of summary\" >\n <div [ngClass]=\"{ non: qbItem.progressBar }\">\n <div class=\"summary\">\n <!-- <div *ngIf=\"!qbItem.edit\"\n [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n </div>\n <div *ngIf=\"qbItem.edit\"\n [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\n [innerHTML]=\"getText(qa.quesValue)\">\n {{ qa.quesValue }}\n </div>\n </div> -->\n <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n </button>\n </div>\n \n <div class=\"nxt-answer\">\n <div *ngIf=\"qa.qTyp === 'File'\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n {{ qa.ansValue }}\n </div>\n <div *ngIf=\"qa.qTyp != 'File'\">\n {{ qa.ansValue }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\n <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\n <div class=\"col-md-12\">\n <button [ngClass]=\"{'btn-text': qbItem.progressBar,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\n (click)=\"handleCancelClick()\">\n {{ qbItem.cancel }}\n </button>\n </div>\n </div>\n </div> -->\n\n <!-- Group Actions -->\n <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\n <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \n (click)=\"handleSubmitClick()\">\n {{ qbItem.submit }}\n </button>\n </div>\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\n <button [ngClass]=\"{'grey': qbItem.progressBar,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \n (click)=\"handleBackClickNew()\">\n {{ qbItem.edit }}\n </button>\n </div> -->\n </div>\n\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-dateTimeNew{margin-left:-14px}.myt-hour{width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.nxt-dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.nxtdate-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.nxtsum-ques{width:55%;margin:auto}.nxtsum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#f8f8f8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.nxtfile-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.nxtfile-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.nxt-left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
57883
57891
|
}
|
|
57884
57892
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuestionnaireComponent, decorators: [{
|
|
57885
57893
|
type: Component,
|
|
@@ -60545,7 +60553,7 @@ class QuestionbookComponent {
|
|
|
60545
60553
|
this.isImageEdit = false;
|
|
60546
60554
|
}
|
|
60547
60555
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuestionbookComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: StorageService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
60548
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: QuestionbookComponent, isStandalone: true, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", isEdit: "isEdit", dropDownData: "dropDownData", dataBind: "dataBind", allIcons: "allIcons", themeColor: "themeColor", cdnIconURL: "cdnIconURL", direction: "direction", languageCode: "languageCode" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", singleFieldChangeEmit: "singleFieldChangeEmit", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, ngImport: i0, template: "<!-- HA 18JAN24 Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n <div class=\"form-row\">\n <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n <!-- RA09DEC24 Changed keys-->\n <ng-container *ngFor=\"let ques of questions;let i = index\">\n <div [ngStyle]=\"{ display: ques.isHidden ? 'none' : 'block' }\" [class]=\"'col-lg-' + ques.size + ' paddingnone'\" \n [id]=\"ques.id\" [style]=\"ques?.style?.questionStyle\">\n <!-- VD 09May24 is hide field change-->\n <div class=\"nxtInputContainer\">\n <!-- AP-28MAR25 Show label if enabled and not a Boolean type -->\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n *ngIf=\"ques.style?.showLabel ? (ques.style?.showLabel && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'RichTextArea' && ques.type !== 'DateTime' && ques.type !== 'month' && ques.type !== 'Location' && ques.type !== 'Number' &&ques.type !== 'Email' && ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label'): (ques.style?.showLabel !== false && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'DateTime' && ques.type !== 'month' && ques.type !== 'Location' && ques.type !== 'Number' && ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label')\"\n [style]=\"ques.style?.labelStyle\">\n <div style=\"gap: 5px; display: flex;\" [style]=\"ques.style?.labelValueStyle\"\n [ngStyle]=\"{\n 'font-family': ques.font,\n 'color': ques.fontColor || '#212529',\n 'font-size': ques.fontSize || '14px',\n 'font-weight': ques.fontWeight || 'normal'\n }\">{{ ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText):''}}\n <div *ngIf=\"ques.isOptional && !ques.isReadOnly\" style=\"color: red;\">*</div>\n <!-- SKS13MAR25 only show on file type -->\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips help text -->\n <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips for file requirements -->\n <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n style=\"margin-left: 4px;\">i</div>\n </div>\n </div>\n <!-- calendar -->\n <div *ngIf=\"ques.type === 'Calendar'\">\n <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <!-- model used in calendar component -->\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model>\n </div>\n\n <!-- SKS11JUN25 for pick location -->\n <app-pick-location *ngIf=\"ques.type === 'Location'\" [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n\n <!-- SKS25MAR25 Image -->\n <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img *ngIf=\"ques.isReadOnly\" [src]=\"ques.imageData\" />\n <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"ques.input\">\n <img [src]=\"ques.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!ques.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(ques, $event)\" style=\"display: none;\" />\n </div>\n </div>\n </div>\n <!-- MSM10JUL25 icon-selector -->\n <nxt-icon-selector [allIcons]=\"allIcons\" *ngIf=\"ques.type === 'Icon'\" [required]=\"ques.isOptional\" [mode]=\"isEdit !== true ? 'view' : 'edit'\" [question]=\"ques\" [labelFont]=\"ques.font\"\n [label]=\" ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n [labelColor]=\"ques.fontColor\"\n [labelSize]=\"ques.fontSize\" [labelWeight]=\"ques.fontWeight\" [showLabel]=\"ques.style?.showLabel\" (iconSelected)=\"childEventCapture($event, ques);\"></nxt-icon-selector>\n\n <!-- SKS21MAR25 line -->\n <hr *ngIf=\"ques.type === 'Line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS13MAR25 data table -->\n <nxt-datatable *ngIf=\"ques.type === 'Table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"questionBook\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\" [languageCode]=\"languageCode\"\n [tableConfig]=\"ques.tableConfig\" tableId=\"\" [direction]=\"direction\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- list -->\n <nxt-search-box *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" [value]=\"ques.input\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (searchValueChange)=\"childEventCapture($event.value,$event.question)\">\n </nxt-search-box>\n\n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <app-custom-dropdown *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n placeholder=\"---{{'SELECT' | nxtCustomTranslate : 'select'}}---\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n </app-custom-dropdown>\n <!-- // VD 02Aug24 custom-radio component -->\n <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n <app-custom-radio [options]=\"ques.options\" [question]=\"ques\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n </app-custom-radio>\n </div>\n\n <!-- Attachment / Files -->\n <app-file-upload *ngIf=\"ques.type === 'File'\" [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [allFiles]=\"ques.input\" (selectedFileData)=\"childEventCapture($event.value,$event.question)\"\n (deletedFileData)=\"deleteFile($event)\"\n ></app-file-upload>\n <!-- SKS11JUN25 Button -->\n <nxt-button\n *ngIf=\"ques.type === 'Button'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"ques?.question\"\n (buttonClickEmit)=\"childEventCapture($event, ques)\"\n >\n </nxt-button>\n <!-- SKS11JUN25 book type -->\n <lib-questionbook *ngIf=\"ques.type === 'Book'\" [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n [questions]=\"ques?.qbReferenceQuestions?.bookQuestionsMap?.[ques?.qbReference]?.subQuestions\"\n (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n <!-- SKS11JUN25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'month' || ques.type === 'Date' || ques.type === 'Time' || ques.type === 'TextArea'\"\n [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'Date' ? 'date' : ques.type === 'Time' ? 'time' : ques.type === 'TextArea' ? 'textarea' : ques.type === 'month' ? 'month' : 'text'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [value]=\"ques.input\"\n [question]=\"ques\"\n [labelFont]=\"ques.font\"\n [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n [labelColor]=\"ques.fontColor\"\n [labelSize]=\"ques.fontSize\"\n [inputValueSize]=\"ques.fontSize\"\n [labelWeight]=\"ques.fontWeight\"\n [inputWeight]=\"ques.fontWeight\"\n [showLabel]=\"ques.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n [inputId]=\"ques.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n [minDate]=\"ques.minDate\"\n [rows]=\"3\"\n [apiMeta]=\"ques.subText\"\n [direction]=\"direction\"\n (inputValue)=\"childEventCapture($event.value,$event.question, 'nxt-input')\"\n >\n </nxt-input>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'Image'\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.col-lg-6,.col-lg-4{padding-left:5px!important;padding-right:5px!important}.form-row{display:-ms-flexbox!important;display:flex!important;-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}.custom-line{width:100%;border:1px solid #d9d9d9}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}input[type=checkbox]{width:21px}.boolean-question{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:12px}.form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"], dependencies: [{ kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "questions", "errorFieldId", "labelValue", "token", "isEdit", "dropDownData", "dataBind", "allIcons", "themeColor", "cdnIconURL", "direction", "languageCode"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: NxtFileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "mode", "isShowNoFileIcon", "question", "error", "from"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token", "mode"], outputs: ["valueChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value"], outputs: ["searchValueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit"] }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
|
|
60556
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: QuestionbookComponent, isStandalone: true, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", isEdit: "isEdit", dropDownData: "dropDownData", dataBind: "dataBind", allIcons: "allIcons", themeColor: "themeColor", cdnIconURL: "cdnIconURL", direction: "direction", languageCode: "languageCode" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", singleFieldChangeEmit: "singleFieldChangeEmit", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, ngImport: i0, template: "<!-- HA 18JAN24 Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n <div class=\"form-row\">\n <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n <!-- RA09DEC24 Changed keys-->\n <ng-container *ngFor=\"let ques of questions;let i = index\">\n <div [ngStyle]=\"{ display: ques.isHidden ? 'none' : 'block' }\" [class]=\"'col-lg-' + ques.size + ' paddingnone'\" \n [id]=\"ques.id\" [style]=\"ques?.style?.questionStyle\">\n <!-- VD 09May24 is hide field change-->\n <div class=\"nxtInputContainer\">\n <!-- AP-28MAR25 Show label if enabled and not a Boolean type -->\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n *ngIf=\"ques.style?.showLabel ? (ques.style?.showLabel && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'RichTextArea' && ques.type !== 'DateTime' && ques.type !== 'month' && ques.type !== 'Location' && ques.type !== 'Number' &&ques.type !== 'Email' && ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label'): (ques.style?.showLabel !== false && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'DateTime' && ques.type !== 'month' && ques.type !== 'Location' && ques.type !== 'Number' && ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label')\"\n [style]=\"ques.style?.labelStyle\">\n <div style=\"gap: 5px; display: flex;\" [style]=\"ques.style?.labelValueStyle\"\n [ngStyle]=\"{\n 'font-family': ques.font,\n 'color': ques.fontColor || '#212529',\n 'font-size': ques.fontSize || '14px',\n 'font-weight': ques.fontWeight || 'normal'\n }\">{{ ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText):''}}\n <div *ngIf=\"ques.isOptional && !ques.isReadOnly\" style=\"color: red;\">*</div>\n <!-- SKS13MAR25 only show on file type -->\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips help text -->\n <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips for file requirements -->\n <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n style=\"margin-left: 4px;\">i</div>\n </div>\n </div>\n <!-- calendar -->\n <div *ngIf=\"ques.type === 'Calendar'\">\n <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <!-- model used in calendar component -->\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model>\n </div>\n\n <!-- SKS11JUN25 for pick location -->\n <app-pick-location *ngIf=\"ques.type === 'Location'\" [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n\n <!-- SKS25MAR25 Image -->\n <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img *ngIf=\"ques.isReadOnly\" [src]=\"ques.imageData\" />\n <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"ques.input\">\n <img [src]=\"ques.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!ques.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(ques, $event)\" style=\"display: none;\" />\n </div>\n </div>\n </div>\n <!-- MSM10JUL25 icon-selector -->\n <nxt-icon-selector [allIcons]=\"allIcons\" *ngIf=\"ques.type === 'Icon'\" [required]=\"ques.isOptional\" [mode]=\"isEdit !== true ? 'view' : 'edit'\" [question]=\"ques\" [labelFont]=\"ques.font\"\n [label]=\" ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n [labelColor]=\"ques.fontColor\"\n [labelSize]=\"ques.fontSize\" [labelWeight]=\"ques.fontWeight\" [showLabel]=\"ques.style?.showLabel\" (iconSelected)=\"childEventCapture($event, ques);\"></nxt-icon-selector>\n\n <!-- SKS21MAR25 line -->\n <hr *ngIf=\"ques.type === 'Line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS13MAR25 data table -->\n <nxt-datatable *ngIf=\"ques.type === 'Table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"questionBook\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\" [languageCode]=\"languageCode\"\n [tableConfig]=\"ques.tableConfig\" tableId=\"\" [direction]=\"direction\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- list -->\n <nxt-search-box *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" [value]=\"ques.input\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (searchValueChange)=\"childEventCapture($event.value,$event.question)\">\n </nxt-search-box>\n\n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <app-custom-dropdown *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n placeholder=\"---{{'SELECT' | nxtCustomTranslate : 'select'}}---\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n </app-custom-dropdown>\n <!-- // VD 02Aug24 custom-radio component -->\n <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n <app-custom-radio [options]=\"ques.options\" [question]=\"ques\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n </app-custom-radio>\n </div>\n\n <!-- Attachment / Files -->\n <app-file-upload *ngIf=\"ques.type === 'File'\" [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [allFiles]=\"ques.input\" (selectedFileData)=\"childEventCapture($event.value,$event.question)\"\n (deletedFileData)=\"deleteFile($event)\"\n ></app-file-upload>\n <!-- SKS11JUN25 Button -->\n <nxt-button\n *ngIf=\"ques.type === 'Button'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"ques?.question\"\n (buttonClickEmit)=\"childEventCapture($event, ques)\"\n >\n </nxt-button>\n <!-- SKS11JUN25 book type -->\n <lib-questionbook *ngIf=\"ques.type === 'Book'\" [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n [questions]=\"ques?.qbReferenceQuestions?.bookQuestionsMap?.[ques?.qbReference]?.subQuestions\"\n (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n <!-- SKS11JUN25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'month' || ques.type === 'Date' || ques.type === 'Time' || ques.type === 'TextArea'\"\n [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'Date' ? 'date' : ques.type === 'Time' ? 'time' : ques.type === 'TextArea' ? 'textarea' : ques.type === 'month' ? 'month' : 'text'\"\n [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n [value]=\"ques.input\"\n [question]=\"ques\"\n [labelFont]=\"ques.font\"\n [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n [labelColor]=\"ques.fontColor\"\n [labelSize]=\"ques.fontSize\"\n [inputValueSize]=\"ques.fontSize\"\n [labelWeight]=\"ques.fontWeight\"\n [inputWeight]=\"ques.fontWeight\"\n [showLabel]=\"ques.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n [inputId]=\"ques.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n [minDate]=\"ques.minDate\"\n [rows]=\"3\"\n [apiMeta]=\"ques.subText\"\n [direction]=\"direction\"\n (inputValue)=\"childEventCapture($event.value,$event.question, 'nxt-input')\"\n >\n </nxt-input>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'Image'\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.col-lg-6,.col-lg-4{padding-left:5px!important;padding-right:5px!important}.form-row{display:-ms-flexbox!important;display:flex!important;-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}.custom-line{width:100%;border:1px solid #d9d9d9}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}input[type=checkbox]{width:21px}.boolean-question{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:12px}.form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"], dependencies: [{ kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "questions", "errorFieldId", "labelValue", "token", "isEdit", "dropDownData", "dataBind", "allIcons", "themeColor", "cdnIconURL", "direction", "languageCode"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: NxtFileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "mode", "isShowNoFileIcon", "question", "error", "from"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token", "mode"], outputs: ["valueChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode", "isLoading"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value"], outputs: ["searchValueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit"] }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
|
|
60549
60557
|
}
|
|
60550
60558
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuestionbookComponent, decorators: [{
|
|
60551
60559
|
type: Component,
|
|
@@ -60622,6 +60630,7 @@ class BookletComponent {
|
|
|
60622
60630
|
apiUrl; // AP-16APR25 Input property to receive the API URL from the parent component
|
|
60623
60631
|
isEdit; // AP-19MAY25 - Added isEdit input
|
|
60624
60632
|
direction = 'ltr';
|
|
60633
|
+
isLoading; //SKS4SEP25 Set to true to show a loading animation
|
|
60625
60634
|
handleBookletActionEvent = new EventEmitter();
|
|
60626
60635
|
handlePage = new EventEmitter();
|
|
60627
60636
|
hadleDropDownDependent = new EventEmitter();
|
|
@@ -61108,7 +61117,7 @@ class BookletComponent {
|
|
|
61108
61117
|
this.isEdit = true;
|
|
61109
61118
|
}
|
|
61110
61119
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BookletComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: StorageService }, { token: i1$2.DomSanitizer }, { token: ChangeService }, { token: i1$1.HttpClient }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
61111
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: BookletComponent, isStandalone: true, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", allIcons: "allIcons", themeColor: "themeColor", cdnIconURL: "cdnIconURL", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", from: "from", apiUrl: "apiUrl", isEdit: "isEdit", direction: "direction", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, viewQueries: [{ propertyName: "questionbookComponent", first: true, predicate: ["questionbook"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [dir]=\"direction\">\n <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n <!-- RS 09DEC24 Changed keys-->\n <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n <!-- HA 28DEC23 Below If logic is to load from booklet -->\n <div *ngIf=\"qb.subQuestions; else elseBlock\">\n <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n <div>\n <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n <!-- VD 08NOV23 - showing label when its available-->\n <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n {{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText }}\n </div>\n </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n <!--VD 06Sep24 calendar changes-->\n <!-- AP-14MAY25 - Added [dataBind] input binding -->\n <!-- AP-19MAY25 - Added [isEdit] binding --> \n <!-- //MSM10JUL25 allIcons, themeColor, cdnIconURL added for icon-selector-->\n <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\n [direction] = \"direction\"\n [labelValue]=\"labelValue\"\n [questionItem]=\"ques\"\n [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"\n (handleDropDown)=\"getDropDown($event)\"\n (handleCalendarDate)=\"getCalendarDate($event)\"\n (handleCalendarEvent)=\"getCalendarEvent($event)\"\n (singleFieldChangeEmit) ='singleFieldChange($event)'\n [dataBind]=\"dataBind\"\n [isEdit]=\"isEdit\" \n [allIcons]=\"allIcons\"\n [themeColor]=\"themeColor\"\n [cdnIconURL]=\"cdnIconURL\"\n [languageCode]=\"languageCode\"\n ></lib-questionbook>\n </div>\n </div>\n </div>\n <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n <ng-template #elseBlock>\n <div class=\"questiondiv1\">\n <div>\n <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n <!-- VD 08NOV23 - showing label when its available-->\n <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText && qb?.style?.showLabel !== false\" >\n {{ (qb.id+'.questionText') | nxtCustomTranslate : qb?.questionText}}\n {{ qb?.title }}\n </div>\n </div> <!-- VD 19JAN24 - getting token as input --> <!-- // VD 11Jun24 - translation changes-->\n <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\" (handleDropDown)=\"getDropDown($event)\" [languageCode]=\"languageCode\"></lib-questionbook>\n </div>\n </div>\n </ng-template>\n\n <!-- RS 09DEC24 Changed keys-->\n <!-- Group Actions -->\n <!-- HA 19DEC23 For Direction -->\n <!-- AP 23MAY25 - Action Buttons: Dynamically positioned buttons with JSON-configured styles -->\n <div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [dir]=\"direction\"> <!-- position-relative removed in this tag-->\n <ng-container *ngFor=\"let action of actions; let i = index\">\n <div class=\"action-wrapper\"\n style=\"margin-right: 10px;\"> <!-- style=\"position: absolute; [style.left.%]=\"action.positionPercent || 0\" removed in this tag -->\n @if(!isEdit && action.name === 'Save'){\n <nxt-button\n (buttonClickEmit)=\"editChangeClick(action)\"\n [buttonValue]=\"'EDIT' | nxtCustomTranslate : 'Edit'\"\n [btnBgColor]=\"action.bgColor\"\n [btnTextColor]=\"action.textColor\"\n [btnBorder]=\"action.borderSize\"\n [btnBorderColor]=\"action.borderColor\"\n [btnBorderRadius]=\"action.borderRadius || 4\"\n [btnWidth]=\"action.width || 100\"\n [buttonType]=\"'custom-btn'\"\n [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n >\n </nxt-button>\n }\n @else {\n <nxt-button\n (buttonClickEmit)=\"handleBookletActionClick(action)\" \n [buttonValue]=\"(action.id+'.name') | nxtCustomTranslate : action?.name\"\n [btnBgColor]=\"action.bgColor\"\n [btnTextColor]=\"action.textColor\"\n [btnBorder]=\"action.borderSize\"\n [btnBorderColor]=\"action.borderColor\"\n [btnBorderRadius]=\"action.borderRadius || 4\"\n [btnWidth]=\"action.width || 100\"\n [buttonType]=\"'custom-btn'\"\n [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n >\n </nxt-button>\n }\n </div>\n </ng-container>\n </div>\n</div>", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}.action-btn{width:100%;height:40px;transition:all .3s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "questions", "errorFieldId", "labelValue", "token", "isEdit", "dropDownData", "dataBind", "allIcons", "themeColor", "cdnIconURL", "direction", "languageCode"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode"], outputs: ["buttonClickEmit"] }] });
|
|
61120
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: BookletComponent, isStandalone: true, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", allIcons: "allIcons", themeColor: "themeColor", cdnIconURL: "cdnIconURL", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", from: "from", apiUrl: "apiUrl", isEdit: "isEdit", direction: "direction", isLoading: "isLoading", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, viewQueries: [{ propertyName: "questionbookComponent", first: true, predicate: ["questionbook"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [dir]=\"direction\">\n <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n <!-- RS 09DEC24 Changed keys-->\n <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n <!-- HA 28DEC23 Below If logic is to load from booklet -->\n <div *ngIf=\"qb.subQuestions; else elseBlock\">\n <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n <div>\n <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n <!-- VD 08NOV23 - showing label when its available-->\n <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n {{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText }}\n </div>\n </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n <!--VD 06Sep24 calendar changes-->\n <!-- AP-14MAY25 - Added [dataBind] input binding -->\n <!-- AP-19MAY25 - Added [isEdit] binding --> \n <!-- //MSM10JUL25 allIcons, themeColor, cdnIconURL added for icon-selector-->\n <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\n [direction] = \"direction\"\n [labelValue]=\"labelValue\"\n [questionItem]=\"ques\"\n [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"\n (handleDropDown)=\"getDropDown($event)\"\n (handleCalendarDate)=\"getCalendarDate($event)\"\n (handleCalendarEvent)=\"getCalendarEvent($event)\"\n (singleFieldChangeEmit) ='singleFieldChange($event)'\n [dataBind]=\"dataBind\"\n [isEdit]=\"isEdit\" \n [allIcons]=\"allIcons\"\n [themeColor]=\"themeColor\"\n [cdnIconURL]=\"cdnIconURL\"\n [languageCode]=\"languageCode\"\n ></lib-questionbook>\n </div>\n </div>\n </div>\n <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n <ng-template #elseBlock>\n <div class=\"questiondiv1\">\n <div>\n <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n <!-- VD 08NOV23 - showing label when its available-->\n <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText && qb?.style?.showLabel !== false\" >\n {{ (qb.id+'.questionText') | nxtCustomTranslate : qb?.questionText}}\n {{ qb?.title }}\n </div>\n </div> <!-- VD 19JAN24 - getting token as input --> <!-- // VD 11Jun24 - translation changes-->\n <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\" (handleDropDown)=\"getDropDown($event)\" [languageCode]=\"languageCode\"></lib-questionbook>\n </div>\n </div>\n </ng-template>\n\n <!-- RS 09DEC24 Changed keys-->\n <!-- Group Actions -->\n <!-- HA 19DEC23 For Direction -->\n <!-- AP 23MAY25 - Action Buttons: Dynamically positioned buttons with JSON-configured styles -->\n <div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [dir]=\"direction\"> <!-- position-relative removed in this tag-->\n <ng-container *ngFor=\"let action of actions; let i = index\">\n <div class=\"action-wrapper\"\n style=\"margin-right: 10px;\"> <!-- style=\"position: absolute; [style.left.%]=\"action.positionPercent || 0\" removed in this tag -->\n @if(!isEdit && action.name === 'Save'){\n <nxt-button\n (buttonClickEmit)=\"editChangeClick(action)\"\n [buttonValue]=\"'EDIT' | nxtCustomTranslate : 'Edit'\"\n [btnBgColor]=\"action.bgColor\"\n [btnTextColor]=\"action.textColor\"\n [btnBorder]=\"action.borderSize\"\n [btnBorderColor]=\"action.borderColor\"\n [btnBorderRadius]=\"action.borderRadius || 4\"\n [btnWidth]=\"action.width || 100\"\n [buttonType]=\"'custom-btn'\"\n [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n >\n </nxt-button>\n }\n @else {\n <nxt-button\n (buttonClickEmit)=\"handleBookletActionClick(action)\" \n [isLoading]=\"isLoading?.includes(action.id)\"\n [buttonValue]=\"(action.id+'.name') | nxtCustomTranslate : action?.name\"\n [btnBgColor]=\"action.bgColor\"\n [btnTextColor]=\"action.textColor\"\n [btnBorder]=\"action.borderSize\"\n [btnBorderColor]=\"action.borderColor\"\n [btnBorderRadius]=\"action.borderRadius || 4\"\n [btnWidth]=\"action.width || 100\"\n [buttonType]=\"'custom-btn'\"\n [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n >\n </nxt-button>\n }\n </div>\n </ng-container>\n </div>\n</div>", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}.action-btn{width:100%;height:40px;transition:all .3s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "questions", "errorFieldId", "labelValue", "token", "isEdit", "dropDownData", "dataBind", "allIcons", "themeColor", "cdnIconURL", "direction", "languageCode"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode", "isLoading"], outputs: ["buttonClickEmit"] }] });
|
|
61112
61121
|
}
|
|
61113
61122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BookletComponent, decorators: [{
|
|
61114
61123
|
type: Component,
|
|
@@ -61118,7 +61127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
61118
61127
|
QuestionbookComponent,
|
|
61119
61128
|
NxtCustomTranslatePipe,
|
|
61120
61129
|
NxtButtonComponent
|
|
61121
|
-
], template: "<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [dir]=\"direction\">\n <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n <!-- RS 09DEC24 Changed keys-->\n <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n <!-- HA 28DEC23 Below If logic is to load from booklet -->\n <div *ngIf=\"qb.subQuestions; else elseBlock\">\n <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n <div>\n <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n <!-- VD 08NOV23 - showing label when its available-->\n <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n {{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText }}\n </div>\n </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n <!--VD 06Sep24 calendar changes-->\n <!-- AP-14MAY25 - Added [dataBind] input binding -->\n <!-- AP-19MAY25 - Added [isEdit] binding --> \n <!-- //MSM10JUL25 allIcons, themeColor, cdnIconURL added for icon-selector-->\n <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\n [direction] = \"direction\"\n [labelValue]=\"labelValue\"\n [questionItem]=\"ques\"\n [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"\n (handleDropDown)=\"getDropDown($event)\"\n (handleCalendarDate)=\"getCalendarDate($event)\"\n (handleCalendarEvent)=\"getCalendarEvent($event)\"\n (singleFieldChangeEmit) ='singleFieldChange($event)'\n [dataBind]=\"dataBind\"\n [isEdit]=\"isEdit\" \n [allIcons]=\"allIcons\"\n [themeColor]=\"themeColor\"\n [cdnIconURL]=\"cdnIconURL\"\n [languageCode]=\"languageCode\"\n ></lib-questionbook>\n </div>\n </div>\n </div>\n <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n <ng-template #elseBlock>\n <div class=\"questiondiv1\">\n <div>\n <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n <!-- VD 08NOV23 - showing label when its available-->\n <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText && qb?.style?.showLabel !== false\" >\n {{ (qb.id+'.questionText') | nxtCustomTranslate : qb?.questionText}}\n {{ qb?.title }}\n </div>\n </div> <!-- VD 19JAN24 - getting token as input --> <!-- // VD 11Jun24 - translation changes-->\n <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\" (handleDropDown)=\"getDropDown($event)\" [languageCode]=\"languageCode\"></lib-questionbook>\n </div>\n </div>\n </ng-template>\n\n <!-- RS 09DEC24 Changed keys-->\n <!-- Group Actions -->\n <!-- HA 19DEC23 For Direction -->\n <!-- AP 23MAY25 - Action Buttons: Dynamically positioned buttons with JSON-configured styles -->\n <div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [dir]=\"direction\"> <!-- position-relative removed in this tag-->\n <ng-container *ngFor=\"let action of actions; let i = index\">\n <div class=\"action-wrapper\"\n style=\"margin-right: 10px;\"> <!-- style=\"position: absolute; [style.left.%]=\"action.positionPercent || 0\" removed in this tag -->\n @if(!isEdit && action.name === 'Save'){\n <nxt-button\n (buttonClickEmit)=\"editChangeClick(action)\"\n [buttonValue]=\"'EDIT' | nxtCustomTranslate : 'Edit'\"\n [btnBgColor]=\"action.bgColor\"\n [btnTextColor]=\"action.textColor\"\n [btnBorder]=\"action.borderSize\"\n [btnBorderColor]=\"action.borderColor\"\n [btnBorderRadius]=\"action.borderRadius || 4\"\n [btnWidth]=\"action.width || 100\"\n [buttonType]=\"'custom-btn'\"\n [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n >\n </nxt-button>\n }\n @else {\n <nxt-button\n (buttonClickEmit)=\"handleBookletActionClick(action)\" \n [buttonValue]=\"(action.id+'.name') | nxtCustomTranslate : action?.name\"\n [btnBgColor]=\"action.bgColor\"\n [btnTextColor]=\"action.textColor\"\n [btnBorder]=\"action.borderSize\"\n [btnBorderColor]=\"action.borderColor\"\n [btnBorderRadius]=\"action.borderRadius || 4\"\n [btnWidth]=\"action.width || 100\"\n [buttonType]=\"'custom-btn'\"\n [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n >\n </nxt-button>\n }\n </div>\n </ng-container>\n </div>\n</div>", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}.action-btn{width:100%;height:40px;transition:all .3s ease}\n"] }]
|
|
61130
|
+
], template: "<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [dir]=\"direction\">\n <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n <!-- RS 09DEC24 Changed keys-->\n <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n <!-- HA 28DEC23 Below If logic is to load from booklet -->\n <div *ngIf=\"qb.subQuestions; else elseBlock\">\n <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n <div>\n <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n <!-- VD 08NOV23 - showing label when its available-->\n <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n {{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText }}\n </div>\n </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n <!--VD 06Sep24 calendar changes-->\n <!-- AP-14MAY25 - Added [dataBind] input binding -->\n <!-- AP-19MAY25 - Added [isEdit] binding --> \n <!-- //MSM10JUL25 allIcons, themeColor, cdnIconURL added for icon-selector-->\n <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\n [direction] = \"direction\"\n [labelValue]=\"labelValue\"\n [questionItem]=\"ques\"\n [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"\n (handleDropDown)=\"getDropDown($event)\"\n (handleCalendarDate)=\"getCalendarDate($event)\"\n (handleCalendarEvent)=\"getCalendarEvent($event)\"\n (singleFieldChangeEmit) ='singleFieldChange($event)'\n [dataBind]=\"dataBind\"\n [isEdit]=\"isEdit\" \n [allIcons]=\"allIcons\"\n [themeColor]=\"themeColor\"\n [cdnIconURL]=\"cdnIconURL\"\n [languageCode]=\"languageCode\"\n ></lib-questionbook>\n </div>\n </div>\n </div>\n <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n <ng-template #elseBlock>\n <div class=\"questiondiv1\">\n <div>\n <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n <!-- VD 08NOV23 - showing label when its available-->\n <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText && qb?.style?.showLabel !== false\" >\n {{ (qb.id+'.questionText') | nxtCustomTranslate : qb?.questionText}}\n {{ qb?.title }}\n </div>\n </div> <!-- VD 19JAN24 - getting token as input --> <!-- // VD 11Jun24 - translation changes-->\n <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\" (handleDropDown)=\"getDropDown($event)\" [languageCode]=\"languageCode\"></lib-questionbook>\n </div>\n </div>\n </ng-template>\n\n <!-- RS 09DEC24 Changed keys-->\n <!-- Group Actions -->\n <!-- HA 19DEC23 For Direction -->\n <!-- AP 23MAY25 - Action Buttons: Dynamically positioned buttons with JSON-configured styles -->\n <div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [dir]=\"direction\"> <!-- position-relative removed in this tag-->\n <ng-container *ngFor=\"let action of actions; let i = index\">\n <div class=\"action-wrapper\"\n style=\"margin-right: 10px;\"> <!-- style=\"position: absolute; [style.left.%]=\"action.positionPercent || 0\" removed in this tag -->\n @if(!isEdit && action.name === 'Save'){\n <nxt-button\n (buttonClickEmit)=\"editChangeClick(action)\"\n [buttonValue]=\"'EDIT' | nxtCustomTranslate : 'Edit'\"\n [btnBgColor]=\"action.bgColor\"\n [btnTextColor]=\"action.textColor\"\n [btnBorder]=\"action.borderSize\"\n [btnBorderColor]=\"action.borderColor\"\n [btnBorderRadius]=\"action.borderRadius || 4\"\n [btnWidth]=\"action.width || 100\"\n [buttonType]=\"'custom-btn'\"\n [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n >\n </nxt-button>\n }\n @else {\n <nxt-button\n (buttonClickEmit)=\"handleBookletActionClick(action)\" \n [isLoading]=\"isLoading?.includes(action.id)\"\n [buttonValue]=\"(action.id+'.name') | nxtCustomTranslate : action?.name\"\n [btnBgColor]=\"action.bgColor\"\n [btnTextColor]=\"action.textColor\"\n [btnBorder]=\"action.borderSize\"\n [btnBorderColor]=\"action.borderColor\"\n [btnBorderRadius]=\"action.borderRadius || 4\"\n [btnWidth]=\"action.width || 100\"\n [buttonType]=\"'custom-btn'\"\n [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n >\n </nxt-button>\n }\n </div>\n </ng-container>\n </div>\n</div>", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}.action-btn{width:100%;height:40px;transition:all .3s ease}\n"] }]
|
|
61122
61131
|
}], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: StorageService }, { type: i1$2.DomSanitizer }, { type: ChangeService }, { type: i1$1.HttpClient }, { type: TranslationService }], propDecorators: { bookletId: [{
|
|
61123
61132
|
type: Input
|
|
61124
61133
|
}], serv: [{
|
|
@@ -61151,6 +61160,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
61151
61160
|
type: Input
|
|
61152
61161
|
}], direction: [{
|
|
61153
61162
|
type: Input
|
|
61163
|
+
}], isLoading: [{
|
|
61164
|
+
type: Input
|
|
61154
61165
|
}], handleBookletActionEvent: [{
|
|
61155
61166
|
type: Output
|
|
61156
61167
|
}], handlePage: [{
|
|
@@ -61179,7 +61190,7 @@ const VERSION = {
|
|
|
61179
61190
|
"semver": null,
|
|
61180
61191
|
"suffix": "09440148-dirty",
|
|
61181
61192
|
"semverString": null,
|
|
61182
|
-
"version": "2.1.
|
|
61193
|
+
"version": "2.1.275"
|
|
61183
61194
|
};
|
|
61184
61195
|
/* tslint:enable */
|
|
61185
61196
|
|
|
@@ -61383,20 +61394,9 @@ class PdfDesignerService {
|
|
|
61383
61394
|
}
|
|
61384
61395
|
downloadElement() {
|
|
61385
61396
|
this.pdfElements.forEach(element => {
|
|
61386
|
-
//AP-02JUN25 - Set a default value for 'date' type elements if no value is provided
|
|
61387
|
-
// const defaultDate = 'date'
|
|
61388
|
-
// if (element.type === '' && !element.value) {
|
|
61389
|
-
// element.value = defaultDate;11
|
|
61390
|
-
// }
|
|
61391
|
-
if (element.type === 'text' || 'input') {
|
|
61392
|
-
// element.value = (element.question || element.value || '').replace(/\\n/g, '\n');
|
|
61393
|
-
}
|
|
61394
61397
|
if (element.subText && typeof element.subText === 'object') {
|
|
61395
61398
|
element.subText = JSON.stringify(element.subText);
|
|
61396
61399
|
}
|
|
61397
|
-
// if (element.pdfReferenceQuestions) {
|
|
61398
|
-
// delete element.pdfReferenceQuestions;
|
|
61399
|
-
// }
|
|
61400
61400
|
});
|
|
61401
61401
|
this.pdf[this.unique_id] = this.pdfElements;
|
|
61402
61402
|
this.pdf['pdfJson'] = this.convertToPdfLayout(this.pdf);
|
|
@@ -61469,7 +61469,7 @@ class PdfDesignerService {
|
|
|
61469
61469
|
// Table data
|
|
61470
61470
|
item?.value?.data?.forEach(tableData => {
|
|
61471
61471
|
body.push(mainColumns.map(col => ({
|
|
61472
|
-
text: tableData[col.apiName], "nowrap": false
|
|
61472
|
+
text: tableData[col.apiName], "nowrap": false, style: col.uniqueIdentifier
|
|
61473
61473
|
})));
|
|
61474
61474
|
});
|
|
61475
61475
|
// Summary rows
|
|
@@ -61523,6 +61523,14 @@ class PdfDesignerService {
|
|
|
61523
61523
|
result.content = processItems(items);
|
|
61524
61524
|
let styleJson = {};
|
|
61525
61525
|
for (const item of items) {
|
|
61526
|
+
if (item.type === "Table") {
|
|
61527
|
+
if (Array.isArray(item.fieldsMeta)) {
|
|
61528
|
+
for (let field of item.fieldsMeta) {
|
|
61529
|
+
styleJson[field.uniqueIdentifier] = field.style;
|
|
61530
|
+
}
|
|
61531
|
+
}
|
|
61532
|
+
}
|
|
61533
|
+
item.style.margin = item.style.margin.map(Number);
|
|
61526
61534
|
styleJson[item.styleClass] = item.style;
|
|
61527
61535
|
}
|
|
61528
61536
|
result['styles'] = styleJson;
|
|
@@ -61991,15 +61999,18 @@ class PdfPropertiesComponent {
|
|
|
61991
61999
|
],
|
|
61992
62000
|
appearance: [
|
|
61993
62001
|
{
|
|
61994
|
-
label: 'Select Font', labelPath: 'SELECTFONT', type: 'select', key: 'font', placeholder: 'Left',
|
|
61995
|
-
options: ['Helvetica Neue',
|
|
62002
|
+
label: 'Select Font', labelPath: 'SELECTFONT', type: 'select', key: 'style.font', placeholder: 'Left',
|
|
62003
|
+
options: [{ value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
|
|
62004
|
+
{ value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
|
|
62005
|
+
{ value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
|
|
62006
|
+
{ value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }]
|
|
61996
62007
|
},
|
|
61997
|
-
{ label: 'Font Color', labelPath: 'FONTCOLOR', type: 'color', key: 'fontColor', value: '' },
|
|
62008
|
+
{ label: 'Font Color', labelPath: 'FONTCOLOR', type: 'color', key: 'style.fontColor', value: '' },
|
|
61998
62009
|
{
|
|
61999
|
-
label: 'Font Size', labelPath: 'FONTSIZE', type: 'number', key: 'fontSize', value: 14
|
|
62010
|
+
label: 'Font Size', labelPath: 'FONTSIZE', type: 'number', key: 'style.fontSize', value: 14
|
|
62000
62011
|
},
|
|
62001
62012
|
{
|
|
62002
|
-
label: 'Font Weight', labelPath: 'FONTWEIGHT', type: 'select', key: 'fontWeight', value: '',
|
|
62013
|
+
label: 'Font Weight', labelPath: 'FONTWEIGHT', type: 'select', key: 'style.fontWeight', value: '',
|
|
62003
62014
|
options: [
|
|
62004
62015
|
{ value: '400', label: '400-Normal', labelPath: 'FONTWEIGHT_NORMAL' },
|
|
62005
62016
|
{ value: '500', label: '500-Medium', labelPath: 'FONTWEIGHT_MEDIUM' },
|
|
@@ -62008,7 +62019,7 @@ class PdfPropertiesComponent {
|
|
|
62008
62019
|
]
|
|
62009
62020
|
},
|
|
62010
62021
|
{
|
|
62011
|
-
label: 'Font Style', labelPath: 'FONTSTYLE', type: 'select', key: 'fontStyle', value: '',
|
|
62022
|
+
label: 'Font Style', labelPath: 'FONTSTYLE', type: 'select', key: 'style.fontStyle', value: '',
|
|
62012
62023
|
options: [
|
|
62013
62024
|
{ label: 'Normal', labelPath: 'FONTSTYLE_NORMAL', value: 'normal' },
|
|
62014
62025
|
{ label: 'Bold', labelPath: 'FONTSTYLE_BOLD', value: 'bold' },
|
|
@@ -62016,11 +62027,11 @@ class PdfPropertiesComponent {
|
|
|
62016
62027
|
]
|
|
62017
62028
|
},
|
|
62018
62029
|
{
|
|
62019
|
-
label: 'Margin', labelPath: 'MARGIN', type: 'marginPicker', key: 'margin',
|
|
62030
|
+
label: 'Margin', labelPath: 'MARGIN', type: 'marginPicker', key: 'style.margin',
|
|
62020
62031
|
placeholder: 'Left, Top, Right, Bottom', value: [0, 0, 0, 0]
|
|
62021
62032
|
},
|
|
62022
62033
|
{
|
|
62023
|
-
label: 'Align Item', labelPath: 'ALIGNITEM', type: 'select', key: '
|
|
62034
|
+
label: 'Align Item', labelPath: 'ALIGNITEM', type: 'select', key: 'style.alignment', value: '',
|
|
62024
62035
|
options: [
|
|
62025
62036
|
{ label: 'Left', labelPath: 'ALIGNITEM_LEFT', value: 'left' },
|
|
62026
62037
|
{ label: 'Center', labelPath: 'ALIGNITEM_CENTER', value: 'center' },
|
|
@@ -62047,18 +62058,23 @@ class PdfPropertiesComponent {
|
|
|
62047
62058
|
],
|
|
62048
62059
|
appearance: [
|
|
62049
62060
|
{
|
|
62050
|
-
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
|
|
62051
|
-
options: [
|
|
62061
|
+
label: 'Select Font', type: 'select', key: 'style.font', placeholder: 'Left',
|
|
62062
|
+
options: [
|
|
62063
|
+
{ value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
|
|
62064
|
+
{ value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
|
|
62065
|
+
{ value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
|
|
62066
|
+
{ value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }
|
|
62067
|
+
]
|
|
62052
62068
|
},
|
|
62053
|
-
{ label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
|
|
62069
|
+
{ label: 'Font Color', type: 'color', key: 'style.fontColor', value: '' },
|
|
62054
62070
|
{
|
|
62055
62071
|
label: 'Font Size',
|
|
62056
62072
|
type: 'number',
|
|
62057
|
-
key: 'fontSize',
|
|
62073
|
+
key: 'style.fontSize',
|
|
62058
62074
|
value: 14
|
|
62059
62075
|
},
|
|
62060
62076
|
{
|
|
62061
|
-
label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
|
|
62077
|
+
label: 'Font Weight', type: 'select', key: 'style.fontWeight', value: '',
|
|
62062
62078
|
options: [
|
|
62063
62079
|
{ value: '400', label: '400-Normal' },
|
|
62064
62080
|
{ value: '500', label: '500-Medium' },
|
|
@@ -62067,7 +62083,7 @@ class PdfPropertiesComponent {
|
|
|
62067
62083
|
]
|
|
62068
62084
|
},
|
|
62069
62085
|
{
|
|
62070
|
-
label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
|
|
62086
|
+
label: 'Font Style', type: 'select', key: 'style.fontStyle', value: '',
|
|
62071
62087
|
options: [
|
|
62072
62088
|
{ label: 'Normal', value: 'normal' },
|
|
62073
62089
|
{ label: 'Bold', value: 'bold' },
|
|
@@ -62075,12 +62091,12 @@ class PdfPropertiesComponent {
|
|
|
62075
62091
|
]
|
|
62076
62092
|
},
|
|
62077
62093
|
{
|
|
62078
|
-
label: 'Margin', type: 'marginPicker', key: 'margin',
|
|
62094
|
+
label: 'Margin', type: 'marginPicker', key: 'style.margin',
|
|
62079
62095
|
placeholder: 'Left, Top, Right, Bottom',
|
|
62080
62096
|
value: [0, 0, 0, 0]
|
|
62081
62097
|
},
|
|
62082
62098
|
{
|
|
62083
|
-
label: 'Align Item', type: 'select', key: '
|
|
62099
|
+
label: 'Align Item', type: 'select', key: 'style.alignment', value: '',
|
|
62084
62100
|
options: [
|
|
62085
62101
|
{ label: 'Left', value: 'left' },
|
|
62086
62102
|
{ label: 'Center', value: 'center' },
|
|
@@ -62107,18 +62123,23 @@ class PdfPropertiesComponent {
|
|
|
62107
62123
|
],
|
|
62108
62124
|
appearance: [
|
|
62109
62125
|
{
|
|
62110
|
-
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
|
|
62111
|
-
options: [
|
|
62126
|
+
label: 'Select Font', type: 'select', key: 'style.font', placeholder: 'Left',
|
|
62127
|
+
options: [
|
|
62128
|
+
{ value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
|
|
62129
|
+
{ value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
|
|
62130
|
+
{ value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
|
|
62131
|
+
{ value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }
|
|
62132
|
+
]
|
|
62112
62133
|
},
|
|
62113
|
-
{ label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
|
|
62134
|
+
{ label: 'Font Color', type: 'color', key: 'style.fontColor', value: '' },
|
|
62114
62135
|
{
|
|
62115
62136
|
label: 'Font Size',
|
|
62116
62137
|
type: 'number',
|
|
62117
|
-
key: 'fontSize',
|
|
62138
|
+
key: 'style.fontSize',
|
|
62118
62139
|
value: 14
|
|
62119
62140
|
},
|
|
62120
62141
|
{
|
|
62121
|
-
label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
|
|
62142
|
+
label: 'Font Weight', type: 'select', key: 'style.fontWeight', value: '',
|
|
62122
62143
|
options: [
|
|
62123
62144
|
{ value: '400', label: '400-Normal' },
|
|
62124
62145
|
{ value: '500', label: '500-Medium' },
|
|
@@ -62127,7 +62148,7 @@ class PdfPropertiesComponent {
|
|
|
62127
62148
|
]
|
|
62128
62149
|
},
|
|
62129
62150
|
{
|
|
62130
|
-
label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
|
|
62151
|
+
label: 'Font Style', type: 'select', key: 'style.fontStyle', value: '',
|
|
62131
62152
|
options: [
|
|
62132
62153
|
{ label: 'Normal', value: 'normal' },
|
|
62133
62154
|
{ label: 'Bold', value: 'bold' },
|
|
@@ -62135,12 +62156,12 @@ class PdfPropertiesComponent {
|
|
|
62135
62156
|
]
|
|
62136
62157
|
},
|
|
62137
62158
|
{
|
|
62138
|
-
label: 'Margin', type: 'marginPicker', key: 'margin',
|
|
62159
|
+
label: 'Margin', type: 'marginPicker', key: 'style.margin',
|
|
62139
62160
|
placeholder: 'Left, Top, Right, Bottom',
|
|
62140
62161
|
value: [0, 0, 0, 0]
|
|
62141
62162
|
},
|
|
62142
62163
|
{
|
|
62143
|
-
label: 'Align Item', type: 'select', key: '
|
|
62164
|
+
label: 'Align Item', type: 'select', key: 'style.alignment', value: '',
|
|
62144
62165
|
options: [
|
|
62145
62166
|
{ label: 'Left', value: 'left' },
|
|
62146
62167
|
{ label: 'Center', value: 'center' },
|
|
@@ -62173,24 +62194,33 @@ class PdfPropertiesComponent {
|
|
|
62173
62194
|
{ label: 'Padding Bottom', type: 'number', key: 'paddingBottom', placeholder: 'Enter padding bottom' },
|
|
62174
62195
|
{
|
|
62175
62196
|
label: 'Line Style', type: 'select', key: 'lineStyle',
|
|
62176
|
-
options: [
|
|
62197
|
+
options: [
|
|
62198
|
+
{ value: 'Solid', label: 'Solid', labelPath: 'BORDER_STYLE_SOLID' },
|
|
62199
|
+
{ value: 'Dashed', label: 'Dashed', labelPath: 'BORDER_STYLE_DASHED' },
|
|
62200
|
+
{ value: 'Dotted', label: 'Dotted', labelPath: 'BORDER_STYLE_DOTTED' }
|
|
62201
|
+
]
|
|
62177
62202
|
}
|
|
62178
62203
|
],
|
|
62179
62204
|
fieldProps: [],
|
|
62180
62205
|
appearance: [
|
|
62181
62206
|
{
|
|
62182
|
-
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
|
|
62183
|
-
options: [
|
|
62207
|
+
label: 'Select Font', type: 'select', key: 'style.font', placeholder: 'Left',
|
|
62208
|
+
options: [
|
|
62209
|
+
{ value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
|
|
62210
|
+
{ value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
|
|
62211
|
+
{ value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
|
|
62212
|
+
{ value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }
|
|
62213
|
+
]
|
|
62184
62214
|
},
|
|
62185
|
-
{ label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
|
|
62215
|
+
{ label: 'Font Color', type: 'color', key: 'style.fontColor', value: '' },
|
|
62186
62216
|
{
|
|
62187
62217
|
label: 'Font Size',
|
|
62188
62218
|
type: 'number',
|
|
62189
|
-
key: 'fontSize',
|
|
62219
|
+
key: 'style.fontSize',
|
|
62190
62220
|
value: 14
|
|
62191
62221
|
},
|
|
62192
62222
|
{
|
|
62193
|
-
label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
|
|
62223
|
+
label: 'Font Weight', type: 'select', key: 'style.fontWeight', value: '',
|
|
62194
62224
|
options: [
|
|
62195
62225
|
{ value: '400', label: '400-Normal' },
|
|
62196
62226
|
{ value: '500', label: '500-Medium' },
|
|
@@ -62199,7 +62229,7 @@ class PdfPropertiesComponent {
|
|
|
62199
62229
|
]
|
|
62200
62230
|
},
|
|
62201
62231
|
{
|
|
62202
|
-
label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
|
|
62232
|
+
label: 'Font Style', type: 'select', key: 'style.fontStyle', value: '',
|
|
62203
62233
|
options: [
|
|
62204
62234
|
{ label: 'Normal', value: 'normal' },
|
|
62205
62235
|
{ label: 'Bold', value: 'bold' },
|
|
@@ -62207,18 +62237,18 @@ class PdfPropertiesComponent {
|
|
|
62207
62237
|
]
|
|
62208
62238
|
},
|
|
62209
62239
|
{
|
|
62210
|
-
label: 'Margin', type: 'marginPicker', key: 'margin',
|
|
62240
|
+
label: 'Margin', type: 'marginPicker', key: 'style.margin',
|
|
62211
62241
|
placeholder: 'Left, Top, Right, Bottom',
|
|
62212
62242
|
value: [0, 0, 0, 0]
|
|
62213
62243
|
},
|
|
62214
|
-
|
|
62215
|
-
|
|
62216
|
-
|
|
62217
|
-
|
|
62218
|
-
|
|
62219
|
-
|
|
62220
|
-
|
|
62221
|
-
|
|
62244
|
+
{
|
|
62245
|
+
label: 'Align Item', type: 'select', key: 'style.alignment', value: '',
|
|
62246
|
+
options: [
|
|
62247
|
+
{ label: 'Left', value: 'left' },
|
|
62248
|
+
{ label: 'Center', value: 'center' },
|
|
62249
|
+
{ label: 'Right', value: 'right' }
|
|
62250
|
+
]
|
|
62251
|
+
}
|
|
62222
62252
|
]
|
|
62223
62253
|
},
|
|
62224
62254
|
'Space': {
|
|
@@ -62229,18 +62259,23 @@ class PdfPropertiesComponent {
|
|
|
62229
62259
|
fieldProps: [],
|
|
62230
62260
|
appearance: [
|
|
62231
62261
|
{
|
|
62232
|
-
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
|
|
62233
|
-
options: [
|
|
62262
|
+
label: 'Select Font', type: 'select', key: 'style.font', placeholder: 'Left',
|
|
62263
|
+
options: [
|
|
62264
|
+
{ value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
|
|
62265
|
+
{ value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
|
|
62266
|
+
{ value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
|
|
62267
|
+
{ value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }
|
|
62268
|
+
]
|
|
62234
62269
|
},
|
|
62235
|
-
{ label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
|
|
62270
|
+
{ label: 'Font Color', type: 'color', key: 'style.fontColor', value: '' },
|
|
62236
62271
|
{
|
|
62237
62272
|
label: 'Font Size',
|
|
62238
62273
|
type: 'number',
|
|
62239
|
-
key: 'fontSize',
|
|
62274
|
+
key: 'style.fontSize',
|
|
62240
62275
|
value: 14
|
|
62241
62276
|
},
|
|
62242
62277
|
{
|
|
62243
|
-
label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
|
|
62278
|
+
label: 'Font Weight', type: 'select', key: 'style.fontWeight', value: '',
|
|
62244
62279
|
options: [
|
|
62245
62280
|
{ value: '400', label: '400-Normal' },
|
|
62246
62281
|
{ value: '500', label: '500-Medium' },
|
|
@@ -62249,7 +62284,7 @@ class PdfPropertiesComponent {
|
|
|
62249
62284
|
]
|
|
62250
62285
|
},
|
|
62251
62286
|
{
|
|
62252
|
-
label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
|
|
62287
|
+
label: 'Font Style', type: 'select', key: 'style.fontStyle', value: '',
|
|
62253
62288
|
options: [
|
|
62254
62289
|
{ label: 'Normal', value: 'normal' },
|
|
62255
62290
|
{ label: 'Bold', value: 'bold' },
|
|
@@ -62257,12 +62292,12 @@ class PdfPropertiesComponent {
|
|
|
62257
62292
|
]
|
|
62258
62293
|
},
|
|
62259
62294
|
{
|
|
62260
|
-
label: 'Margin', type: 'marginPicker', key: 'margin',
|
|
62295
|
+
label: 'Margin', type: 'marginPicker', key: 'style.margin',
|
|
62261
62296
|
placeholder: 'Left, Top, Right, Bottom',
|
|
62262
62297
|
value: [0, 0, 0, 0]
|
|
62263
62298
|
},
|
|
62264
62299
|
// {
|
|
62265
|
-
// label: 'Align Item', type: 'select', key: '
|
|
62300
|
+
// label: 'Align Item', type: 'select', key: 'style.alignment', value: '',
|
|
62266
62301
|
// options: [
|
|
62267
62302
|
// { label: 'Left', value: 'left' },
|
|
62268
62303
|
// { label: 'Center', value: 'center' },
|
|
@@ -62288,18 +62323,23 @@ class PdfPropertiesComponent {
|
|
|
62288
62323
|
],
|
|
62289
62324
|
appearance: [
|
|
62290
62325
|
{
|
|
62291
|
-
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
|
|
62292
|
-
options: [
|
|
62326
|
+
label: 'Select Font', type: 'select', key: 'style.font', placeholder: 'Left',
|
|
62327
|
+
options: [
|
|
62328
|
+
{ value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
|
|
62329
|
+
{ value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
|
|
62330
|
+
{ value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
|
|
62331
|
+
{ value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }
|
|
62332
|
+
]
|
|
62293
62333
|
},
|
|
62294
|
-
{ label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
|
|
62334
|
+
{ label: 'Font Color', type: 'color', key: 'style.fontColor', value: '' },
|
|
62295
62335
|
{
|
|
62296
62336
|
label: 'Font Size',
|
|
62297
62337
|
type: 'number',
|
|
62298
|
-
key: 'fontSize',
|
|
62338
|
+
key: 'style.fontSize',
|
|
62299
62339
|
value: 14
|
|
62300
62340
|
},
|
|
62301
62341
|
{
|
|
62302
|
-
label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
|
|
62342
|
+
label: 'Font Weight', type: 'select', key: 'style.fontWeight', value: '',
|
|
62303
62343
|
options: [
|
|
62304
62344
|
{ value: '400', label: '400-Normal' },
|
|
62305
62345
|
{ value: '500', label: '500-Medium' },
|
|
@@ -62308,7 +62348,7 @@ class PdfPropertiesComponent {
|
|
|
62308
62348
|
]
|
|
62309
62349
|
},
|
|
62310
62350
|
{
|
|
62311
|
-
label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
|
|
62351
|
+
label: 'Font Style', type: 'select', key: 'style.fontStyle', value: '',
|
|
62312
62352
|
options: [
|
|
62313
62353
|
{ label: 'Normal', value: 'normal' },
|
|
62314
62354
|
{ label: 'Bold', value: 'bold' },
|
|
@@ -62316,12 +62356,12 @@ class PdfPropertiesComponent {
|
|
|
62316
62356
|
]
|
|
62317
62357
|
},
|
|
62318
62358
|
{
|
|
62319
|
-
label: 'Margin', type: 'marginPicker', key: 'margin',
|
|
62359
|
+
label: 'Margin', type: 'marginPicker', key: 'style.margin',
|
|
62320
62360
|
placeholder: 'Left, Top, Right, Bottom',
|
|
62321
62361
|
value: [0, 0, 0, 0]
|
|
62322
62362
|
},
|
|
62323
62363
|
// {
|
|
62324
|
-
// label: 'Align Item', type: 'select', key: '
|
|
62364
|
+
// label: 'Align Item', type: 'select', key: 'style.alignment', value: '',
|
|
62325
62365
|
// options: [
|
|
62326
62366
|
// { label: 'Left', value: 'left' },
|
|
62327
62367
|
// { label: 'Center', value: 'center' },
|
|
@@ -62350,55 +62390,64 @@ class PdfPropertiesComponent {
|
|
|
62350
62390
|
{ "label": "operands", "placeholder": "Enter here", "type": "array", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operands" },
|
|
62351
62391
|
]
|
|
62352
62392
|
},
|
|
62353
|
-
|
|
62354
|
-
|
|
62355
|
-
{
|
|
62393
|
+
],
|
|
62394
|
+
"fieldProps": [
|
|
62395
|
+
{ label: 'Value', placeholder: 'Enter Text ', type: 'text', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", key: 'value' },
|
|
62396
|
+
{ label: 'Reference Field', placeholder: 'Reference Field', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", type: 'text', key: 'referenceField' },
|
|
62356
62397
|
{
|
|
62357
|
-
"label": "
|
|
62358
|
-
"
|
|
62359
|
-
|
|
62360
|
-
|
|
62361
|
-
|
|
62362
|
-
|
|
62363
|
-
|
|
62398
|
+
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "isSubText",
|
|
62399
|
+
"subQuestion": []
|
|
62400
|
+
}
|
|
62401
|
+
],
|
|
62402
|
+
"appearance": [
|
|
62403
|
+
{
|
|
62404
|
+
label: 'Select Font', type: 'select', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", key: 'style.font', placeholder: 'Left',
|
|
62405
|
+
options: [
|
|
62406
|
+
{ value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
|
|
62407
|
+
{ value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
|
|
62408
|
+
{ value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
|
|
62409
|
+
{ value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }
|
|
62364
62410
|
]
|
|
62365
62411
|
},
|
|
62366
|
-
{
|
|
62412
|
+
{ label: 'Font Color', type: 'color', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", key: 'style.fontColor', value: '' },
|
|
62367
62413
|
{
|
|
62368
|
-
|
|
62369
|
-
|
|
62370
|
-
|
|
62371
|
-
|
|
62372
|
-
{
|
|
62373
|
-
|
|
62414
|
+
label: 'Font Size', type: 'select', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", key: 'style.fontSize', value: '',
|
|
62415
|
+
options: [
|
|
62416
|
+
{ label: 'Small', value: '12px' },
|
|
62417
|
+
{ label: 'Medium', value: '14px' },
|
|
62418
|
+
{ label: 'Large', value: '16px' }
|
|
62419
|
+
]
|
|
62420
|
+
},
|
|
62421
|
+
{
|
|
62422
|
+
label: 'Font Width', type: 'select', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", key: 'style.fontWeight', value: '',
|
|
62423
|
+
options: [
|
|
62424
|
+
{ value: '400', label: '400-Normal' },
|
|
62425
|
+
{ value: '500', label: '500-Medium' },
|
|
62426
|
+
{ value: '600', label: '600-Semi Bold' },
|
|
62427
|
+
{ value: '700', label: '700-Bold' }
|
|
62428
|
+
]
|
|
62429
|
+
},
|
|
62430
|
+
{
|
|
62431
|
+
label: 'Font Style', type: 'select', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", key: 'style.fontStyle', value: '',
|
|
62432
|
+
options: [
|
|
62433
|
+
{ label: 'Normal', value: 'normal' },
|
|
62434
|
+
{ label: 'Bold', value: 'bold' },
|
|
62435
|
+
{ label: 'Italic', value: 'italic' }
|
|
62436
|
+
]
|
|
62437
|
+
},
|
|
62438
|
+
{
|
|
62439
|
+
label: 'Margin', type: 'marginPicker', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", key: 'style.margin',
|
|
62440
|
+
placeholder: 'Left, Top, Right, Bottom',
|
|
62441
|
+
value: [0, 0, 0, 0]
|
|
62442
|
+
},
|
|
62443
|
+
{
|
|
62444
|
+
label: 'Align Item', type: 'select', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", key: 'style.alignment', value: '',
|
|
62445
|
+
options: [
|
|
62446
|
+
{ label: 'Left', value: 'left' },
|
|
62447
|
+
{ label: 'Center', value: 'center' },
|
|
62448
|
+
{ label: 'Right', value: 'right' }
|
|
62374
62449
|
]
|
|
62375
62450
|
}
|
|
62376
|
-
],
|
|
62377
|
-
"fieldProps": [
|
|
62378
|
-
{ "label": "tableId", "placeholder": "Emp_Table_01", "type": "text", "key": "tableId" },
|
|
62379
|
-
{ "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
|
|
62380
|
-
{ "label": "requiredField", "type": "toggle", "key": "requiredField" },
|
|
62381
|
-
{ "label": "Read Only", "type": "checkbox", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "edit" },
|
|
62382
|
-
{ "label": "hideLabel", "type": "toggle", "key": "hideLabel" },
|
|
62383
|
-
{ "label": "disabled", "type": "toggle", "key": "disabled" },
|
|
62384
|
-
{ "label": "hideElements", "type": "toggle", "key": "hideElements" },
|
|
62385
|
-
{ "label": "masking", "type": "toggle", "key": "masking" },
|
|
62386
|
-
{ "label": "value", "placeholder": "Value", "type": "text", "key": "value" },
|
|
62387
|
-
{ "label": "referenceAnchor", "placeholder": "http://source/rangernxt_bio_data/74/d.doc", "type": "text", "key": "referenceAnchor" },
|
|
62388
|
-
{ "label": "controllingElements", "type": "toggle", "key": "controllingElements" },
|
|
62389
|
-
{ "label": "isDependence", "type": "toggle", "key": "isDependence" },
|
|
62390
|
-
{ "label": "newLine", "type": "toggle", "key": "newLine" }
|
|
62391
|
-
],
|
|
62392
|
-
"appearance": [
|
|
62393
|
-
{ "label": "selectFont", "placeholder": "Left", "type": "text", "key": "selectFont" },
|
|
62394
|
-
{ "label": "fontColor", "placeholder": "#28343E", "type": "text", "key": "fontColor" },
|
|
62395
|
-
{ "label": "hexCode", "placeholder": "#28343E", "type": "text", "key": "hexCode" },
|
|
62396
|
-
{ "label": "fontSize", "placeholder": "300 - Medium", "type": "text", "key": "fontSize" },
|
|
62397
|
-
{ "label": "fontWidth", "placeholder": "Left", "type": "text", "key": "fontWidth" },
|
|
62398
|
-
{ "label": "backgroundColor", "placeholder": "#E2E2E2", "type": "text", "key": "backgroundColor" },
|
|
62399
|
-
{ "label": "backgroundHexCode", "placeholder": "#E2E2E2", "type": "text", "key": "backgroundHexCode" },
|
|
62400
|
-
{ "label": "referenceAnchor", "placeholder": "http://source/rangernxt_bio_data/74/d.doc", "type": "text", "key": "referenceAnchor" },
|
|
62401
|
-
{ "label": "blankSpace", "type": "toggle", "key": "blankSpace" }
|
|
62402
62451
|
]
|
|
62403
62452
|
},
|
|
62404
62453
|
'TextArea': {
|
|
@@ -62418,12 +62467,17 @@ class PdfPropertiesComponent {
|
|
|
62418
62467
|
],
|
|
62419
62468
|
appearance: [
|
|
62420
62469
|
{
|
|
62421
|
-
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
|
|
62422
|
-
options: [
|
|
62470
|
+
label: 'Select Font', type: 'select', key: 'style.font', placeholder: 'Left',
|
|
62471
|
+
options: [
|
|
62472
|
+
{ value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
|
|
62473
|
+
{ value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
|
|
62474
|
+
{ value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
|
|
62475
|
+
{ value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }
|
|
62476
|
+
]
|
|
62423
62477
|
},
|
|
62424
|
-
{ label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
|
|
62478
|
+
{ label: 'Font Color', type: 'color', key: 'style.fontColor', value: '' },
|
|
62425
62479
|
{
|
|
62426
|
-
label: 'Font Size', type: 'select', key: 'fontSize', value: '',
|
|
62480
|
+
label: 'Font Size', type: 'select', key: 'style.fontSize', value: '',
|
|
62427
62481
|
options: [
|
|
62428
62482
|
{ label: 'Small', value: '12px' },
|
|
62429
62483
|
{ label: 'Medium', value: '14px' },
|
|
@@ -62431,15 +62485,14 @@ class PdfPropertiesComponent {
|
|
|
62431
62485
|
]
|
|
62432
62486
|
},
|
|
62433
62487
|
{
|
|
62434
|
-
label: 'Font Width', type: 'select', key: 'fontWeight', value: '',
|
|
62488
|
+
label: 'Font Width', type: 'select', key: 'style.fontWeight', value: '',
|
|
62435
62489
|
options: [
|
|
62436
62490
|
{ value: '400', label: '400-Normal' },
|
|
62437
62491
|
{ value: '500', label: '500-Medium' },
|
|
62438
62492
|
{ value: '600', label: '600-Semi Bold' },
|
|
62439
62493
|
{ value: '700', label: '700-Bold' }
|
|
62440
62494
|
]
|
|
62441
|
-
}
|
|
62442
|
-
// { label: 'Background Color', type: 'color', key: 'backgroundColor', value: '' },
|
|
62495
|
+
}
|
|
62443
62496
|
]
|
|
62444
62497
|
},
|
|
62445
62498
|
'image': {
|
|
@@ -62459,18 +62512,23 @@ class PdfPropertiesComponent {
|
|
|
62459
62512
|
],
|
|
62460
62513
|
appearance: [
|
|
62461
62514
|
{
|
|
62462
|
-
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
|
|
62463
|
-
options: [
|
|
62515
|
+
label: 'Select Font', type: 'select', key: 'style.font', placeholder: 'Left',
|
|
62516
|
+
options: [
|
|
62517
|
+
{ value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
|
|
62518
|
+
{ value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
|
|
62519
|
+
{ value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
|
|
62520
|
+
{ value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }
|
|
62521
|
+
]
|
|
62464
62522
|
},
|
|
62465
|
-
{ label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
|
|
62523
|
+
{ label: 'Font Color', type: 'color', key: 'style.fontColor', value: '' },
|
|
62466
62524
|
{
|
|
62467
62525
|
label: 'Font Size',
|
|
62468
62526
|
type: 'number',
|
|
62469
|
-
key: 'fontSize',
|
|
62527
|
+
key: 'style.fontSize',
|
|
62470
62528
|
value: 14
|
|
62471
62529
|
},
|
|
62472
62530
|
{
|
|
62473
|
-
label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
|
|
62531
|
+
label: 'Font Weight', type: 'select', key: 'style.fontWeight', value: '',
|
|
62474
62532
|
options: [
|
|
62475
62533
|
{ value: '400', label: '400-Normal' },
|
|
62476
62534
|
{ value: '500', label: '500-Medium' },
|
|
@@ -62479,7 +62537,7 @@ class PdfPropertiesComponent {
|
|
|
62479
62537
|
]
|
|
62480
62538
|
},
|
|
62481
62539
|
{
|
|
62482
|
-
label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
|
|
62540
|
+
label: 'Font Style', type: 'select', key: 'style.fontStyle', value: '',
|
|
62483
62541
|
options: [
|
|
62484
62542
|
{ label: 'Normal', value: 'normal' },
|
|
62485
62543
|
{ label: 'Bold', value: 'bold' },
|
|
@@ -62487,12 +62545,12 @@ class PdfPropertiesComponent {
|
|
|
62487
62545
|
]
|
|
62488
62546
|
},
|
|
62489
62547
|
{
|
|
62490
|
-
label: 'Margin', type: 'marginPicker', key: 'margin',
|
|
62548
|
+
label: 'Margin', type: 'marginPicker', key: 'style.margin',
|
|
62491
62549
|
placeholder: 'Left, Top, Right, Bottom',
|
|
62492
62550
|
value: [0, 0, 0, 0]
|
|
62493
62551
|
},
|
|
62494
62552
|
{
|
|
62495
|
-
label: 'Align Item', type: 'select', key: '
|
|
62553
|
+
label: 'Align Item', type: 'select', key: 'style.alignment', value: '',
|
|
62496
62554
|
options: [
|
|
62497
62555
|
{ label: 'Left', value: 'left' },
|
|
62498
62556
|
{ label: 'Center', value: 'center' },
|
|
@@ -62538,8 +62596,8 @@ class PdfPropertiesComponent {
|
|
|
62538
62596
|
else {
|
|
62539
62597
|
this.selectColumn = null;
|
|
62540
62598
|
}
|
|
62541
|
-
if (!this.selectedElement
|
|
62542
|
-
this.selectedElement
|
|
62599
|
+
if (this.selectedElement && !this.selectedElement?.margin) {
|
|
62600
|
+
this.selectedElement['margin'] = [0, 0, 0, 0];
|
|
62543
62601
|
}
|
|
62544
62602
|
}
|
|
62545
62603
|
this.getProperties();
|
|
@@ -62750,12 +62808,6 @@ class PdfPropertiesComponent {
|
|
|
62750
62808
|
});
|
|
62751
62809
|
this.pdfDesignerService.elementUpdate(this.selectedElement);
|
|
62752
62810
|
}
|
|
62753
|
-
getStyleKeys() {
|
|
62754
|
-
if (!this.selectedElement || !this.selectedElement.style || typeof this.selectedElement.style !== 'object') {
|
|
62755
|
-
return [];
|
|
62756
|
-
}
|
|
62757
|
-
return Object.keys(this.selectedElement.style);
|
|
62758
|
-
}
|
|
62759
62811
|
// SKS19MAR25 update element in servies
|
|
62760
62812
|
updateElement(element) {
|
|
62761
62813
|
this.pdfDesignerService.elementUpdate(element);
|
|
@@ -62990,11 +63042,11 @@ class PdfPropertiesComponent {
|
|
|
62990
63042
|
}
|
|
62991
63043
|
}
|
|
62992
63044
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PdfPropertiesComponent, deps: [{ token: DataService }, { token: i1$1.HttpClient }, { token: PdfDesignerService }, { token: TemplateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
62993
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PdfPropertiesComponent, isStandalone: true, selector: "app-pdf-properties", inputs: { selectedElementType: "selectedElementType", templateSelected: "templateSelected" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!-- - Field and Element Properties -->\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n {{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n {{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n {{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}\n </div>\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties -->\n <!-- Select element type show -->\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type] as props\">\n <!-- SKS25MAR25 this is for image edit -->\n <div *ngIf=\"selectedElement?.type === 'image'\">\n <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\"></image-cropper>\n <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n <!-- SKS28MAR25 search pdf specific for pdf element -->\n <div *ngIf=\"selectedElement?.type === 'Pdf'\">\n <label class=\"text-sm\">{{ 'SEARCHPDF' | nxtCustomTranslate : 'Search Pdf' }}</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box [question]=\"selectedElement\" [readOnly]=\"selectedElement.isReadOnly\" [apiMeta]=\"bookSubtext\"\n [placeHolderText]=\"selectedElement.question || ''\"\n [mode]=\"'edit'\"\n (searchValueChange)=\"childEventCapture($event)\">\n </nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n <label>{{ 'ENDPOINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n <label>{{ 'DEFAULTFIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].elementProps\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label \n }}</label>\n\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- questionNumber -->\n <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n <!-- file -->\n <!-- Add this inside the elementProps loop where other inputs are rendered -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option value=\"\">---Select---</option>\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.labelPath | nxtCustomTranslate : option.label }} </option>\n </select>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n\n </div>\n <!-- SKS20MAR25 Subquestion Type -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n </div>\n <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n <div\n *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\"\n style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <!-- Iterate over filtered columns to display checkboxes -->\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS21MAR25 New radio type -->\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS20MAR25 Add more subproperty types as needed -->\n <!-- Inside the subProp ngFor loop -->\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n </select>\n <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <!-- Field Size Controls -->\n <!-- Change key width -->\n <div *ngIf=\"prop.key === 'width'\" [ngClass]=\"{'flex-container': true, 'custom-active': selectedElement?.width !== '*' && selectedElement?.width !== 'auto'}\">\n <select\n class=\"size-select\"\n [value]=\"selectedElement?.width === '*' ? 'Default' : selectedElement?.width === 'auto' ? 'Auto' : 'Custom'\"\n (change)=\"onWidthSelect(\n $event.target.value === 'Default' ? '*' :\n $event.target.value === 'Auto' ? 'auto' : 'custom'\n )\">\n <option value=\"Default\">{{ 'DEFAULT' | nxtCustomTranslate : 'Default' }}</option>\n <option value=\"Auto\">{{ 'AUTO' | nxtCustomTranslate : 'Auto' }}</option>\n <option value=\"Custom\">{{ 'CUSTOM' | nxtCustomTranslate : 'Custom' }}</option>\n </select>\n \n <input\n *ngIf=\"selectedElement?.width !== '*' && selectedElement?.width !== 'auto'\"\n type=\"number\"\n class=\"size-input\"\n min=\"1\"\n max=\"100\"\n [value]=\"selectedElement?.width\"\n (input)=\"setValueByPath(\n 'width',\n $event.target.valueAsNumber < 1 ? 1 :\n $event.target.valueAsNumber > 100 ? 100 :\n $event.target.valueAsNumber\n )\" />\n </div> \n\n <!-- Line Properties -->\n <!-- Padding Top -->\n <div *ngIf=\"prop.key === 'paddingTop'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n </div>\n\n <!-- Padding Bottom -->\n <div *ngIf=\"prop.key === 'paddingBottom'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n </div>\n\n <!-- Line Style -->\n <div *ngIf=\"prop.key === 'lineStyle'\">\n <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n\n <!-- Color -->\n <div *ngIf=\"prop.key === 'color'\">\n <input type=\"color\" [value]=\"selectedElement?.color\"\n (input)=\"setValueByPath('color', $event.target.value)\" />\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n <!-- Field Elements Properties -->\n <!-- Show elements ID -->\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n <label>Label Id</label>\n <div\n style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect ? bookId : selectedElement.id }}</div>\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].fieldProps\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n\n <!-- SKS21MAR25 Toggle Group -->\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" />\n Disabled\n </label>\n </div>\n </div>\n\n <!-- - handled options with UUID -->\n <div\n *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- Sub Questions Toggle -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <!-- Render subquestions when arrow is down -->\n <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n \n <!-- Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n </div>\n\n </div>\n </ng-container>\n\n <!-- SKS21MAR25 Move Style Outside the Loop -->\n <!-- Style Toggle -->\n <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n <div class=\"head-elements\">Style</div>\n <img [src]=\"isStyleExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"isStyleExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <div *ngFor=\"let key of getStyleKeys()\">\n <label>{{ key }}</label>\n <input type=\"text\" [(ngModel)]=\"selectedElement.style[key]\"\n (input)=\"setValueByPath('style.' + key, $event.target.value)\" placeholder=\"Enter {{ key }}\" />\n </div>\n </div>\n </div>\n\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].appearance\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <!-- Font Selection -->\n <div *ngIf=\"prop.key === 'font'\">\n <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [(ngModel)]=\"selectedElement.font\"\n (change)=\"setValueByPath('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n <!-- Font Size -->\n <div *ngIf=\"prop.key === 'fontSize' && prop.type === 'number'\">\n <input type=\"number\" min=\"1\" max=\"100\" step=\"1\"\n [(ngModel)]=\"selectedElement.fontSize\"\n (change)=\"setValueByPath('fontSize', selectedElement.fontSize)\" />\n </div>\n <!-- Font Weight Selection -->\n <div *ngIf=\"prop.key === 'fontWeight'\">\n <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.labelPath | nxtCustomTranslate : option.label }}\n </option>\n </select>\n </div>\n\n <div class=\"flex-container\">\n <!-- Dropdown Box -->\n <div *ngIf=\"prop.type === 'dropdown'\" class=\"input-box-field\">\n <select [(ngModel)]=\"selectedElement[prop.key]\" (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n\n <!-- Color Picker -->\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input type=\"color\" [(ngModel)]=\"selectedElement.fontColor\"\n (change)=\"setValueByPath('fontColor', $event.target.value)\">\n </div>\n\n <!-- HEX Input Box -->\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>HEX Code</span>\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\" />\n </div>\n </div>\n\n <!-- Font Style -->\n<div *ngIf=\"prop.key === 'fontStyle'\">\n <select [(ngModel)]=\"selectedElement.fontStyle\"\n (change)=\"setValueByPath('fontStyle', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.labelPath | nxtCustomTranslate : option.label }}\n </option>\n </select>\n</div>\n\n<!-- margin: [0, 10, 0, 0] // [ left, top, right, bottom ] -->\n<div *ngIf=\"prop.key === 'margin'&& selectedElement?.margin\">\n <div class=\"margin-inputs\">\n <div>\n <label>Right</label>\n <input type=\"number\" [(ngModel)]=\"selectedElement.margin[1]\"\n (change)=\"setValueByPath('margin', selectedElement.margin)\" />\n </div>\n <div>\n <label>Bottom</label>\n <input type=\"number\" [(ngModel)]=\"selectedElement.margin[2]\"\n (change)=\"setValueByPath('margin', selectedElement.margin)\" />\n </div>\n <div>\n <label>Left</label>\n <input type=\"number\" [(ngModel)]=\"selectedElement.margin[3]\"\n (change)=\"setValueByPath('margin', selectedElement.margin)\" />\n </div>\n <div>\n <label>Top</label>\n <input type=\"number\" [(ngModel)]=\"selectedElement.margin[0]\"\n (change)=\"setValueByPath('margin', selectedElement.margin)\" />\n </div>\n </div>\n</div>\n\n <!-- TextAlign -->\n <div *ngIf=\"prop.key === 'alignItems'\">\n <select [(ngModel)]=\"selectedElement.alignItems\"\n (change)=\"setValueByPath('alignItems', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.labelPath | nxtCustomTranslate : option.label }}\n </option>\n </select>\n </div> \n\n </div>\n </ng-container>\n </div>\n </div>\n\n<!-- Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:77vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.cancel-btn:hover{background-color:#0052cc!important;color:#fff!important}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:78px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 1099px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.flex-container{display:flex;gap:8px;align-items:center}.size-select{transition:width .3s ease;width:100%;max-width:200px}.flex-container.custom-active .size-select{max-width:100px}.size-input{width:60px}.margin-inputs{display:flex;gap:15px;margin-top:5px}.margin-inputs>div{display:flex;flex-direction:column;width:60px}.margin-inputs label{font-size:12px;margin-bottom:3px}.pdf-actions-container{width:100%;max-width:400px;padding:10px}.pdf-action-card{background-color:#fff;border-radius:6px;padding:9px;box-shadow:0 2px 6px #0000001a;display:flex;flex-direction:column;gap:10px}.pdf-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s}.pdf-btn:hover{background-color:#5a6268}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value"], outputs: ["searchValueChange"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
|
|
63045
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PdfPropertiesComponent, isStandalone: true, selector: "app-pdf-properties", inputs: { selectedElementType: "selectedElementType", templateSelected: "templateSelected" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!-- - Field and Element Properties -->\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n {{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n {{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n {{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}\n </div>\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties -->\n <!-- Select element type show -->\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type] as props\">\n <!-- SKS25MAR25 this is for image edit -->\n <div *ngIf=\"selectedElement?.type === 'image'\">\n <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n <!-- SKS28MAR25 search pdf specific for pdf element -->\n <div *ngIf=\"selectedElement?.type === 'Pdf'\">\n <label class=\"text-sm\">{{ 'SEARCHPDF' | nxtCustomTranslate : 'Search Pdf' }}</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box [question]=\"selectedElement\" [readOnly]=\"selectedElement.isReadOnly\" [apiMeta]=\"bookSubtext\"\n [placeHolderText]=\"selectedElement.question || ''\"\n [mode]=\"'edit'\"\n (searchValueChange)=\"childEventCapture($event)\">\n </nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n <label>{{ 'ENDPOINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n <label>{{ 'DEFAULTFIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].elementProps\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label \n }}</label>\n\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- questionNumber -->\n <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n <!-- file -->\n <!-- Add this inside the elementProps loop where other inputs are rendered -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option value=\"\">---Select---</option>\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.labelPath | nxtCustomTranslate : option.label }} </option>\n </select>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n\n </div>\n <!-- SKS20MAR25 Subquestion Type -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n </div>\n <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n <div\n *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\"\n style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <!-- Iterate over filtered columns to display checkboxes -->\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS21MAR25 New radio type -->\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS20MAR25 Add more subproperty types as needed -->\n <!-- Inside the subProp ngFor loop -->\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n </select>\n <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <!-- Field Size Controls -->\n <!-- Change key width -->\n <div *ngIf=\"prop.key === 'width'\" [ngClass]=\"{'flex-container': true, 'custom-active': selectedElement?.width !== '*' && selectedElement?.width !== 'auto'}\">\n <select\n class=\"size-select\"\n [value]=\"selectedElement?.width === '*' ? 'Default' : selectedElement?.width === 'auto' ? 'Auto' : 'Custom'\"\n (change)=\"onWidthSelect(\n $event.target.value === 'Default' ? '*' :\n $event.target.value === 'Auto' ? 'auto' : 'custom'\n )\">\n <option value=\"Default\">{{ 'DEFAULT' | nxtCustomTranslate : 'Default' }}</option>\n <option value=\"Auto\">{{ 'AUTO' | nxtCustomTranslate : 'Auto' }}</option>\n <option value=\"Custom\">{{ 'CUSTOM' | nxtCustomTranslate : 'Custom' }}</option>\n </select>\n \n <input\n *ngIf=\"selectedElement?.width !== '*' && selectedElement?.width !== 'auto'\"\n type=\"number\"\n class=\"size-input\"\n min=\"1\"\n max=\"100\"\n [value]=\"selectedElement?.width\"\n (input)=\"setValueByPath(\n 'width',\n $event.target.valueAsNumber < 1 ? 1 :\n $event.target.valueAsNumber > 100 ? 100 :\n $event.target.valueAsNumber\n )\" />\n </div> \n\n <!-- Line Properties -->\n <!-- Padding Top -->\n <div *ngIf=\"prop.key === 'paddingTop'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n </div>\n\n <!-- Padding Bottom -->\n <div *ngIf=\"prop.key === 'paddingBottom'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n </div>\n\n <!-- Line Style -->\n <div *ngIf=\"prop.key === 'lineStyle'\">\n <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n\n <!-- Color -->\n <div *ngIf=\"prop.key === 'color'\">\n <input type=\"color\" [value]=\"selectedElement?.color\"\n (input)=\"setValueByPath('color', $event.target.value)\" />\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n <!-- Field Elements Properties -->\n <!-- Show elements ID -->\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n <label>Label Id</label>\n <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect ? bookId : selectedElement.id }}</div>\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].fieldProps\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n\n <!-- SKS21MAR25 Toggle Group -->\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" />\n Disabled\n </label>\n </div>\n </div>\n\n <!-- - handled options with UUID -->\n <div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- Sub Questions Toggle -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <!-- Render subquestions when arrow is down -->\n <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n \n <!-- Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].appearance\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <div class=\"flex-container\">\n <!-- Type select -->\n <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.labelPath | nxtCustomTranslate : option.label }}\n </option>\n </select>\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n <!-- Type number -->\n <div *ngIf=\"prop.type === 'number'\">\n <input type=\"number\" min=\"1\" max=\"100\" step=\"1\"\n [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\" />\n </div>\n\n <!-- Color Picker -->\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input type=\"color\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\">\n </div>\n\n <!-- HEX Input Box -->\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>HEX Code</span>\n <input type=\"text\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\" />\n </div>\n <!-- margin: [0, 10, 0, 0] // [ left, top, right, bottom ] -->\n <div *ngIf=\"prop.type === 'marginPicker'\">\n <div class=\"margin-inputs\">\n <div>\n <label>Right</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[0] : getValueByPath(prop.key)?.[0] ) : getValueByPath(prop.key)?.[0])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.0', $event) : setValueByPath(prop.key+'.0', $event.target.value) ) : setValueByPath(prop.key+'.0', $event.target.value)\" />\n </div>\n <div>\n <label>Top</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[1] : getValueByPath(prop.key)?.[1] ) : getValueByPath(prop.key)?.[1])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.1', $event) : setValueByPath(prop.key+'.1', $event.target.value) ) : setValueByPath(prop.key+'.1', $event.target.value)\" />\n </div>\n <div>\n <label>Left</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[2] : getValueByPath(prop.key)?.[2] ) : getValueByPath(prop.key)?.[2])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.2', $event) : setValueByPath(prop.key+'.2', $event.target.value) ) : setValueByPath(prop.key+'.2', $event.target.value)\" />\n </div>\n <div>\n <label>Bottom</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[3] : getValueByPath(prop.key)?.[3] ) : getValueByPath(prop.key)?.[3])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.3', $event) : setValueByPath(prop.key+'.3', $event.target.value) ) : setValueByPath(prop.key+'.3', $event.target.value)\" />\n </div>\n </div>\n </div> \n </div> \n </div>\n </ng-container>\n </div>\n </div>\n\n<!-- Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:77vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.cancel-btn:hover{background-color:#0052cc!important;color:#fff!important}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:40px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 1099px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.flex-container{display:flex;gap:8px;align-items:center}.size-select{transition:width .3s ease;width:100%;max-width:200px}.flex-container.custom-active .size-select{max-width:100px}.size-input{width:60px}.margin-inputs{display:flex;gap:15px;margin-top:5px}.margin-inputs>div{display:flex;flex-direction:column;width:60px}.margin-inputs label{font-size:12px;margin-bottom:3px}.pdf-actions-container{width:100%;max-width:400px;padding:10px}.pdf-action-card{background-color:#fff;border-radius:6px;padding:9px;box-shadow:0 2px 6px #0000001a;display:flex;flex-direction:column;gap:10px}.pdf-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s}.pdf-btn:hover{background-color:#5a6268}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value"], outputs: ["searchValueChange"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
|
|
62994
63046
|
}
|
|
62995
63047
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PdfPropertiesComponent, decorators: [{
|
|
62996
63048
|
type: Component,
|
|
62997
|
-
args: [{ selector: 'app-pdf-properties', standalone: true, imports: [CommonModule, FormsModule, NxtSearchBox, ImageCropperComponent, NxtCustomTranslatePipe], template: "<!-- - Field and Element Properties -->\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n {{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n {{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n {{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}\n </div>\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties -->\n <!-- Select element type show -->\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type] as props\">\n <!-- SKS25MAR25 this is for image edit -->\n <div *ngIf=\"selectedElement?.type === 'image'\">\n <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\"></image-cropper>\n <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n <!-- SKS28MAR25 search pdf specific for pdf element -->\n <div *ngIf=\"selectedElement?.type === 'Pdf'\">\n <label class=\"text-sm\">{{ 'SEARCHPDF' | nxtCustomTranslate : 'Search Pdf' }}</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box [question]=\"selectedElement\" [readOnly]=\"selectedElement.isReadOnly\" [apiMeta]=\"bookSubtext\"\n [placeHolderText]=\"selectedElement.question || ''\"\n [mode]=\"'edit'\"\n (searchValueChange)=\"childEventCapture($event)\">\n </nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n <label>{{ 'ENDPOINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n <label>{{ 'DEFAULTFIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].elementProps\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label \n }}</label>\n\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- questionNumber -->\n <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n <!-- file -->\n <!-- Add this inside the elementProps loop where other inputs are rendered -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option value=\"\">---Select---</option>\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.labelPath | nxtCustomTranslate : option.label }} </option>\n </select>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n\n </div>\n <!-- SKS20MAR25 Subquestion Type -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n </div>\n <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n <div\n *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\"\n style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <!-- Iterate over filtered columns to display checkboxes -->\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS21MAR25 New radio type -->\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS20MAR25 Add more subproperty types as needed -->\n <!-- Inside the subProp ngFor loop -->\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n </select>\n <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <!-- Field Size Controls -->\n <!-- Change key width -->\n <div *ngIf=\"prop.key === 'width'\" [ngClass]=\"{'flex-container': true, 'custom-active': selectedElement?.width !== '*' && selectedElement?.width !== 'auto'}\">\n <select\n class=\"size-select\"\n [value]=\"selectedElement?.width === '*' ? 'Default' : selectedElement?.width === 'auto' ? 'Auto' : 'Custom'\"\n (change)=\"onWidthSelect(\n $event.target.value === 'Default' ? '*' :\n $event.target.value === 'Auto' ? 'auto' : 'custom'\n )\">\n <option value=\"Default\">{{ 'DEFAULT' | nxtCustomTranslate : 'Default' }}</option>\n <option value=\"Auto\">{{ 'AUTO' | nxtCustomTranslate : 'Auto' }}</option>\n <option value=\"Custom\">{{ 'CUSTOM' | nxtCustomTranslate : 'Custom' }}</option>\n </select>\n \n <input\n *ngIf=\"selectedElement?.width !== '*' && selectedElement?.width !== 'auto'\"\n type=\"number\"\n class=\"size-input\"\n min=\"1\"\n max=\"100\"\n [value]=\"selectedElement?.width\"\n (input)=\"setValueByPath(\n 'width',\n $event.target.valueAsNumber < 1 ? 1 :\n $event.target.valueAsNumber > 100 ? 100 :\n $event.target.valueAsNumber\n )\" />\n </div> \n\n <!-- Line Properties -->\n <!-- Padding Top -->\n <div *ngIf=\"prop.key === 'paddingTop'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n </div>\n\n <!-- Padding Bottom -->\n <div *ngIf=\"prop.key === 'paddingBottom'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n </div>\n\n <!-- Line Style -->\n <div *ngIf=\"prop.key === 'lineStyle'\">\n <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n\n <!-- Color -->\n <div *ngIf=\"prop.key === 'color'\">\n <input type=\"color\" [value]=\"selectedElement?.color\"\n (input)=\"setValueByPath('color', $event.target.value)\" />\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n <!-- Field Elements Properties -->\n <!-- Show elements ID -->\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n <label>Label Id</label>\n <div\n style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect ? bookId : selectedElement.id }}</div>\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].fieldProps\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n\n <!-- SKS21MAR25 Toggle Group -->\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" />\n Disabled\n </label>\n </div>\n </div>\n\n <!-- - handled options with UUID -->\n <div\n *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- Sub Questions Toggle -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <!-- Render subquestions when arrow is down -->\n <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n \n <!-- Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n </div>\n\n </div>\n </ng-container>\n\n <!-- SKS21MAR25 Move Style Outside the Loop -->\n <!-- Style Toggle -->\n <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n <div class=\"head-elements\">Style</div>\n <img [src]=\"isStyleExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"isStyleExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <div *ngFor=\"let key of getStyleKeys()\">\n <label>{{ key }}</label>\n <input type=\"text\" [(ngModel)]=\"selectedElement.style[key]\"\n (input)=\"setValueByPath('style.' + key, $event.target.value)\" placeholder=\"Enter {{ key }}\" />\n </div>\n </div>\n </div>\n\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].appearance\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <!-- Font Selection -->\n <div *ngIf=\"prop.key === 'font'\">\n <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [(ngModel)]=\"selectedElement.font\"\n (change)=\"setValueByPath('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n <!-- Font Size -->\n <div *ngIf=\"prop.key === 'fontSize' && prop.type === 'number'\">\n <input type=\"number\" min=\"1\" max=\"100\" step=\"1\"\n [(ngModel)]=\"selectedElement.fontSize\"\n (change)=\"setValueByPath('fontSize', selectedElement.fontSize)\" />\n </div>\n <!-- Font Weight Selection -->\n <div *ngIf=\"prop.key === 'fontWeight'\">\n <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.labelPath | nxtCustomTranslate : option.label }}\n </option>\n </select>\n </div>\n\n <div class=\"flex-container\">\n <!-- Dropdown Box -->\n <div *ngIf=\"prop.type === 'dropdown'\" class=\"input-box-field\">\n <select [(ngModel)]=\"selectedElement[prop.key]\" (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n\n <!-- Color Picker -->\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input type=\"color\" [(ngModel)]=\"selectedElement.fontColor\"\n (change)=\"setValueByPath('fontColor', $event.target.value)\">\n </div>\n\n <!-- HEX Input Box -->\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>HEX Code</span>\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\" />\n </div>\n </div>\n\n <!-- Font Style -->\n<div *ngIf=\"prop.key === 'fontStyle'\">\n <select [(ngModel)]=\"selectedElement.fontStyle\"\n (change)=\"setValueByPath('fontStyle', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.labelPath | nxtCustomTranslate : option.label }}\n </option>\n </select>\n</div>\n\n<!-- margin: [0, 10, 0, 0] // [ left, top, right, bottom ] -->\n<div *ngIf=\"prop.key === 'margin'&& selectedElement?.margin\">\n <div class=\"margin-inputs\">\n <div>\n <label>Right</label>\n <input type=\"number\" [(ngModel)]=\"selectedElement.margin[1]\"\n (change)=\"setValueByPath('margin', selectedElement.margin)\" />\n </div>\n <div>\n <label>Bottom</label>\n <input type=\"number\" [(ngModel)]=\"selectedElement.margin[2]\"\n (change)=\"setValueByPath('margin', selectedElement.margin)\" />\n </div>\n <div>\n <label>Left</label>\n <input type=\"number\" [(ngModel)]=\"selectedElement.margin[3]\"\n (change)=\"setValueByPath('margin', selectedElement.margin)\" />\n </div>\n <div>\n <label>Top</label>\n <input type=\"number\" [(ngModel)]=\"selectedElement.margin[0]\"\n (change)=\"setValueByPath('margin', selectedElement.margin)\" />\n </div>\n </div>\n</div>\n\n <!-- TextAlign -->\n <div *ngIf=\"prop.key === 'alignItems'\">\n <select [(ngModel)]=\"selectedElement.alignItems\"\n (change)=\"setValueByPath('alignItems', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.labelPath | nxtCustomTranslate : option.label }}\n </option>\n </select>\n </div> \n\n </div>\n </ng-container>\n </div>\n </div>\n\n<!-- Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:77vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.cancel-btn:hover{background-color:#0052cc!important;color:#fff!important}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:78px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 1099px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.flex-container{display:flex;gap:8px;align-items:center}.size-select{transition:width .3s ease;width:100%;max-width:200px}.flex-container.custom-active .size-select{max-width:100px}.size-input{width:60px}.margin-inputs{display:flex;gap:15px;margin-top:5px}.margin-inputs>div{display:flex;flex-direction:column;width:60px}.margin-inputs label{font-size:12px;margin-bottom:3px}.pdf-actions-container{width:100%;max-width:400px;padding:10px}.pdf-action-card{background-color:#fff;border-radius:6px;padding:9px;box-shadow:0 2px 6px #0000001a;display:flex;flex-direction:column;gap:10px}.pdf-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s}.pdf-btn:hover{background-color:#5a6268}\n"] }]
|
|
63049
|
+
args: [{ selector: 'app-pdf-properties', standalone: true, imports: [CommonModule, FormsModule, NxtSearchBox, ImageCropperComponent, NxtCustomTranslatePipe], template: "<!-- - Field and Element Properties -->\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n {{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n {{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n {{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}\n </div>\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties -->\n <!-- Select element type show -->\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type] as props\">\n <!-- SKS25MAR25 this is for image edit -->\n <div *ngIf=\"selectedElement?.type === 'image'\">\n <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n <!-- SKS28MAR25 search pdf specific for pdf element -->\n <div *ngIf=\"selectedElement?.type === 'Pdf'\">\n <label class=\"text-sm\">{{ 'SEARCHPDF' | nxtCustomTranslate : 'Search Pdf' }}</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box [question]=\"selectedElement\" [readOnly]=\"selectedElement.isReadOnly\" [apiMeta]=\"bookSubtext\"\n [placeHolderText]=\"selectedElement.question || ''\"\n [mode]=\"'edit'\"\n (searchValueChange)=\"childEventCapture($event)\">\n </nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n <label>{{ 'ENDPOINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n <label>{{ 'DEFAULTFIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].elementProps\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label \n }}</label>\n\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- questionNumber -->\n <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n <!-- file -->\n <!-- Add this inside the elementProps loop where other inputs are rendered -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option value=\"\">---Select---</option>\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.labelPath | nxtCustomTranslate : option.label }} </option>\n </select>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n\n </div>\n <!-- SKS20MAR25 Subquestion Type -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n </div>\n <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n <div\n *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\"\n style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <!-- Iterate over filtered columns to display checkboxes -->\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS21MAR25 New radio type -->\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS20MAR25 Add more subproperty types as needed -->\n <!-- Inside the subProp ngFor loop -->\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n </select>\n <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <!-- Field Size Controls -->\n <!-- Change key width -->\n <div *ngIf=\"prop.key === 'width'\" [ngClass]=\"{'flex-container': true, 'custom-active': selectedElement?.width !== '*' && selectedElement?.width !== 'auto'}\">\n <select\n class=\"size-select\"\n [value]=\"selectedElement?.width === '*' ? 'Default' : selectedElement?.width === 'auto' ? 'Auto' : 'Custom'\"\n (change)=\"onWidthSelect(\n $event.target.value === 'Default' ? '*' :\n $event.target.value === 'Auto' ? 'auto' : 'custom'\n )\">\n <option value=\"Default\">{{ 'DEFAULT' | nxtCustomTranslate : 'Default' }}</option>\n <option value=\"Auto\">{{ 'AUTO' | nxtCustomTranslate : 'Auto' }}</option>\n <option value=\"Custom\">{{ 'CUSTOM' | nxtCustomTranslate : 'Custom' }}</option>\n </select>\n \n <input\n *ngIf=\"selectedElement?.width !== '*' && selectedElement?.width !== 'auto'\"\n type=\"number\"\n class=\"size-input\"\n min=\"1\"\n max=\"100\"\n [value]=\"selectedElement?.width\"\n (input)=\"setValueByPath(\n 'width',\n $event.target.valueAsNumber < 1 ? 1 :\n $event.target.valueAsNumber > 100 ? 100 :\n $event.target.valueAsNumber\n )\" />\n </div> \n\n <!-- Line Properties -->\n <!-- Padding Top -->\n <div *ngIf=\"prop.key === 'paddingTop'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n </div>\n\n <!-- Padding Bottom -->\n <div *ngIf=\"prop.key === 'paddingBottom'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n </div>\n\n <!-- Line Style -->\n <div *ngIf=\"prop.key === 'lineStyle'\">\n <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n\n <!-- Color -->\n <div *ngIf=\"prop.key === 'color'\">\n <input type=\"color\" [value]=\"selectedElement?.color\"\n (input)=\"setValueByPath('color', $event.target.value)\" />\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n <!-- Field Elements Properties -->\n <!-- Show elements ID -->\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n <label>Label Id</label>\n <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect ? bookId : selectedElement.id }}</div>\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].fieldProps\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n\n <!-- SKS21MAR25 Toggle Group -->\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" />\n Disabled\n </label>\n </div>\n </div>\n\n <!-- - handled options with UUID -->\n <div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- Sub Questions Toggle -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <!-- Render subquestions when arrow is down -->\n <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n \n <!-- Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].appearance\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <div class=\"flex-container\">\n <!-- Type select -->\n <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.labelPath | nxtCustomTranslate : option.label }}\n </option>\n </select>\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n <!-- Type number -->\n <div *ngIf=\"prop.type === 'number'\">\n <input type=\"number\" min=\"1\" max=\"100\" step=\"1\"\n [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\" />\n </div>\n\n <!-- Color Picker -->\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input type=\"color\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\">\n </div>\n\n <!-- HEX Input Box -->\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>HEX Code</span>\n <input type=\"text\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\" />\n </div>\n <!-- margin: [0, 10, 0, 0] // [ left, top, right, bottom ] -->\n <div *ngIf=\"prop.type === 'marginPicker'\">\n <div class=\"margin-inputs\">\n <div>\n <label>Right</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[0] : getValueByPath(prop.key)?.[0] ) : getValueByPath(prop.key)?.[0])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.0', $event) : setValueByPath(prop.key+'.0', $event.target.value) ) : setValueByPath(prop.key+'.0', $event.target.value)\" />\n </div>\n <div>\n <label>Top</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[1] : getValueByPath(prop.key)?.[1] ) : getValueByPath(prop.key)?.[1])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.1', $event) : setValueByPath(prop.key+'.1', $event.target.value) ) : setValueByPath(prop.key+'.1', $event.target.value)\" />\n </div>\n <div>\n <label>Left</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[2] : getValueByPath(prop.key)?.[2] ) : getValueByPath(prop.key)?.[2])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.2', $event) : setValueByPath(prop.key+'.2', $event.target.value) ) : setValueByPath(prop.key+'.2', $event.target.value)\" />\n </div>\n <div>\n <label>Bottom</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[3] : getValueByPath(prop.key)?.[3] ) : getValueByPath(prop.key)?.[3])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.3', $event) : setValueByPath(prop.key+'.3', $event.target.value) ) : setValueByPath(prop.key+'.3', $event.target.value)\" />\n </div>\n </div>\n </div> \n </div> \n </div>\n </ng-container>\n </div>\n </div>\n\n<!-- Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:77vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.cancel-btn:hover{background-color:#0052cc!important;color:#fff!important}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:40px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 1099px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.flex-container{display:flex;gap:8px;align-items:center}.size-select{transition:width .3s ease;width:100%;max-width:200px}.flex-container.custom-active .size-select{max-width:100px}.size-input{width:60px}.margin-inputs{display:flex;gap:15px;margin-top:5px}.margin-inputs>div{display:flex;flex-direction:column;width:60px}.margin-inputs label{font-size:12px;margin-bottom:3px}.pdf-actions-container{width:100%;max-width:400px;padding:10px}.pdf-action-card{background-color:#fff;border-radius:6px;padding:9px;box-shadow:0 2px 6px #0000001a;display:flex;flex-direction:column;gap:10px}.pdf-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s}.pdf-btn:hover{background-color:#5a6268}\n"] }]
|
|
62998
63050
|
}], ctorParameters: () => [{ type: DataService }, { type: i1$1.HttpClient }, { type: PdfDesignerService }, { type: TemplateService }], propDecorators: { formButtonHandler: [{
|
|
62999
63051
|
type: Output
|
|
63000
63052
|
}], templateSaveHandler: [{
|
|
@@ -63606,11 +63658,11 @@ class PdfDesignerComponent {
|
|
|
63606
63658
|
}
|
|
63607
63659
|
}
|
|
63608
63660
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PdfDesignerComponent, deps: [{ token: PdfDesignerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
63609
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PdfDesignerComponent, isStandalone: true, selector: "app-pdf-designer", inputs: { pdfJSON: "pdfJSON", bookletId: "bookletId", isPreview: "isPreview" }, outputs: { pdfSaveHandlerEmit: "pdfSaveHandlerEmit", templateMode: "templateMode", pdfPreviewEmit: "pdfPreviewEmit" }, viewQueries: [{ propertyName: "textareas", predicate: ["autoTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n <!-- Form Builder Section All Elements -->\n <div *ngIf=\"!isPreview\" class=\"form-builder\">\n\n <ng-container *ngFor=\"let element of elementsList\">\n <div\n class=\"element\"\n [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n [matTooltip]=\"\n selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n : null\n \"\n >\n <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n <div class=\"hover-label\">{{ element.label }}</div> \n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n<!-- \n <div class=\"template-section\">\n <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n </div> -->\n\n <!-- SKS10MAR25 footer version show -->\n <div class=\"sticky-footer-version\">\n {{version}}\n </div>\n </div>\n <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function -->\n <div class=\"form-preview\">\n <!-- AP-10MAR25 Heading -->\n <div class=\"field-container\"\n style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n (click)=\"selectHeading('Header')\">\n <div class=\"label-container\" style=\"padding: 10px; display: flex;justify-content: space-between;\">\n <div *ngIf=\"pdf\">\n <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n </div>\n <div class=\"action-buttons\">\n <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'PREVIEW' }}</button>\n <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'DOWNLOAD' }}</button>\n </div>\n </div>\n </div>\n\n <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngClass]=\"{'isPreview': isPreview}\"\n (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div *ngIf=\"!isPreview\" class=\"line-element\">\n <div></div>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-weight': field.fontWeight || '400',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'text-align': field.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n 'color': field.fontColor || '#000000',\n 'margin-top': (field.paddingTop || 0) + 'px',\n 'margin-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" />\n </div>\n\n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i && !isPreview\" draggable=\"true && !isPreview\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'align-items': field.alignItems || '',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'color': field.fontColor || '#000000',\n 'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n 'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n 'margin': \n (field.margin?.[0] || 0) + 'px ' +\n (field.margin?.[1] || 0) + 'px ' +\n (field.margin?.[2] || 0) + 'px ' +\n (field.margin?.[3] || 0) + 'px',\n 'padding-top': (field.paddingTop || 0) + 'px',\n 'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div>\n <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"isPreview\" (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n 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=\"isPreview\" (click)=\"onImageDelete(field)\" 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\" stroke-linecap=\"round\"\n 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 <div class=\"logo-container\">\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <img [src]=\"field.imageData\" \n [style.width.px]=\"field.imageSize?.width || 100\"\n [style.height.px]=\"field.imageSize?.height || 100\" />\n </div>\n\n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Space Element -->\n <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'align-items': field.alignItems || '',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'color': field.fontColor || '#000000',\n 'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n 'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n 'margin': \n (field.margin?.[0] || 0) + 'px ' +\n (field.margin?.[1] || 0) + 'px ' +\n (field.margin?.[2] || 0) + 'px ' +\n (field.margin?.[3] || 0) + 'px',\n 'padding-top': (field.paddingTop || 0) + 'px',\n 'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n <div *ngIf=\"!isPreview\" class=\"field-content\">\n <div class=\"label-container\">\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- TextArea -->\n <div *ngIf=\"field?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'align-items': field.alignItems || '',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'color': field.fontColor || '#000000',\n 'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n 'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n 'margin': \n (field.margin?.[0] || 0) + 'px ' +\n (field.margin?.[1] || 0) + 'px ' +\n (field.margin?.[2] || 0) + 'px ' +\n (field.margin?.[3] || 0) + 'px',\n 'padding-top': (field.paddingTop || 0) + 'px',\n 'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\"\n [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n [value]=\"field.value? field.value : ''\"\n (input)=\"onTextAreaInput($event, field)\"\n #autoTextarea\n [style.height.px]=\"isPreview ? 40 : null\"\n (click)=\"openTextSettings(field, $event)\"\n (ngModelChange)=\"updateContent()\" \n [ngStyle]=\"{\n 'font-size': field.style?.fontSize ? field.style.fontSize + 'px' : '14px',\n 'font-weight': field.style?.bold ? 'bold' : 'normal',\n 'font-style': field.style?.italics ? 'italic' : 'normal',\n 'text-decoration': field.style?.decoration ? 'decoration' : 'none',\n 'text-align': field.style?.alignment || 'left',\n 'margin': field.style?.margin?.length === 4\n ? field.style.margin[1] + 'px ' + field.style.margin[2] + 'px ' +\n field.style.margin[3] + 'px ' + field.style.margin[0] + 'px'\n : '0',\n 'color': field.style?.color || '#000'\n }\"></textarea>\n \n </div>\n </div>\n\n <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n [ngStyle]=\"{\n position: 'absolute',\n background: '#fff',\n border: '1px solid #ccc',\n padding: '6px 10px',\n 'border-radius': '4px',\n 'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n 'z-index': '65535',\n display: 'flex',\n 'align-items': 'center',\n gap: '8px'\n }\">\n \n <!-- Font Size -->\n <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n <option [value]=\"12\">12pt</option>\n <option [value]=\"14\">14pt</option>\n <option [value]=\"16\">16pt</option>\n <option [value]=\"18\">18pt</option>\n <option [value]=\"24\">24pt</option>\n </select>\n\n <!-- Text Color -->\n <label title=\"Text Color\" class=\"color-label\">\n <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n </label>\n\n <!-- Bold -->\n <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n \n <!-- Italic -->\n <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n <!-- Underline -->\n <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n\n \n <!-- Align Left -->\n <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n </button>\n \n <!-- Align Center -->\n <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n </button>\n \n <!-- Align Right -->\n <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n </button>\n \n <!-- Close -->\n <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n </div>\n \n </div>\n\n <!-- Input -->\n <div *ngIf=\"field?.type === 'input'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'align-items': field.alignItems || '',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'color': field.fontColor || '#000000',\n 'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n 'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n 'margin': \n (field.margin?.[0] || 0) + 'px ' +\n (field.margin?.[1] || 0) + 'px ' +\n (field.margin?.[2] || 0) + 'px ' +\n (field.margin?.[3] || 0) + 'px',\n 'padding-top': (field.paddingTop || 0) + 'px',\n 'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- AP-04JUN25 - replace app-custom-input -->\n <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n </nxt-input>\n </div>\n </div>\n </div>\n\n <!-- Date -->\n <div *ngIf=\"field?.type === 'date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'align-items': field.alignItems || '',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'color': field.fontColor || '#000000',\n 'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n 'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n 'margin': \n (field.margin?.[0] || 0) + 'px ' +\n (field.margin?.[1] || 0) + 'px ' +\n (field.margin?.[2] || 0) + 'px ' +\n (field.margin?.[3] || 0) + 'px',\n 'padding-top': (field.paddingTop || 0) + 'px',\n 'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- AP-04JUN25 - replace custom date picker -->\n <nxt-input [type]=\"'date'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n </nxt-input>\n </div>\n </div>\n </div>\n\n <!-- Pdf -->\n <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'align-items': field.alignItems || '',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'color': field.fontColor || '#000000',\n 'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n 'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n 'margin': \n (field.margin?.[0] || 0) + 'px ' +\n (field.margin?.[1] || 0) + 'px ' +\n (field.margin?.[2] || 0) + 'px ' +\n (field.margin?.[3] || 0) + 'px',\n 'padding-top': (field.paddingTop || 0) + 'px',\n 'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n <div *ngIf=\"field?.pdfReferenceQuestions\">\n <ng-container *ngFor=\"let field of field?.pdfReferenceQuestions[field?.pdfReference]; let i = index\">\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\">\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-weight': field.fontWeight || '400',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'text-align': field.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n 'color': field.fontColor || '#000000',\n 'margin-top': (field.paddingTop || 0) + 'px',\n 'margin-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" />\n </div>\n\n <div *ngIf=\"field?.type === 'image'\" class=\"field-container\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div>\n <div class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <img [src]=\"field.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(field, $event)\" style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n </div>\n </div>\n <div *ngIf=\"field?.type === 'text'\" class=\"field-container\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <textarea class=\"custom-textarea\" [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n [style.height.px]=\"isPreview ? 40 : field.size || 100\" [(ngModel)]=\"field.value\"\n (ngModelChange)=\"onQuestionChange($event, field)\"></textarea>\n </div>\n </div>\n </div>\n <!-- AP-14JUN25 Added nxt-input in pdf -->\n <div *ngIf=\"field?.type === 'input'\" class=\"field-container\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\"> \n <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [(ngModel)]=\"field.value\"\n [placeholder]=\"'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" (ngModelChange)=\"onQuestionChange($event, field)\">\n </nxt-input>\n </div>\n </div>\n </div>\n <!-- AP-06MAR25 -->\n <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\"\n [mode]=\"isPreview ? 'view' : 'edit'\" [apiMeta]=\"field?.subText\"\n [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\"\n (valueChange)=\"onQuestionChange($event, field)\"\n [data]=\"field.value?.data\"\n isEditable=true (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <!-- AP-06MAR25 -->\n <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'align-items': field.alignItems || '',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'color': field.fontColor || '#000000',\n 'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n 'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n 'margin': \n (field.margin?.[0] || 0) + 'px ' +\n (field.margin?.[1] || 0) + 'px ' +\n (field.margin?.[2] || 0) + 'px ' +\n (field.margin?.[3] || 0) + 'px',\n 'padding-top': (field.paddingTop || 0) + 'px',\n 'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"isPreview ? 'view' : 'edit'\"\n [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n tableWidth=\"auto\" isEditable=true (columnSelected)=columnSelected($event)\n [data]=\"field.value?.data\"\n (valueChange)=\"onQuestionChange($event, field)\"\n (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n\n </ng-container>\n </div>\n </div>\n <!-- SKS13MAR25 popup conformation box -->\n <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n <div class=\"dialog-box\">\n <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n <div class=\"button-container-fb\">\n <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n </div>\n </div>\n </div>\n <app-pdf-properties *ngIf=\"!isPreview\" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'image'\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n\n <!--AP-20JUN25 - Image size controls: Allow user to manually adjust width and height using range sliders -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"manual-size-inputs\">\n <label>{{ 'WIDTH' | nxtCustomTranslate : 'Width' }} {{ selectedImageElement.imageSize.width }}</label>\n <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n [(ngModel)]=\"selectedImageElement.imageSize.width\"\n (input)=\"onImageSizeChange()\" />\n \n <label>{{ 'HEIGHT' | nxtCustomTranslate : 'Height' }} {{ selectedImageElement.imageSize.height }}</label>\n <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n [(ngModel)]=\"selectedImageElement.imageSize.height\"\n (input)=\"onImageSizeChange()\" />\n </div>\n \n\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:15px;height:15px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:flex-end;align-items:center}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media (max-width: 600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: PdfPropertiesComponent, selector: "app-pdf-properties", inputs: ["selectedElementType", "templateSelected"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "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: "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: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
|
|
63661
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PdfDesignerComponent, isStandalone: true, selector: "app-pdf-designer", inputs: { pdfJSON: "pdfJSON", bookletId: "bookletId", isPreview: "isPreview" }, outputs: { pdfSaveHandlerEmit: "pdfSaveHandlerEmit", templateMode: "templateMode", pdfPreviewEmit: "pdfPreviewEmit" }, viewQueries: [{ propertyName: "textareas", predicate: ["autoTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n <!-- Form Builder Section All Elements -->\n <div *ngIf=\"!isPreview\" class=\"form-builder\">\n <ng-container *ngFor=\"let element of elementsList\">\n <div\n class=\"element\"\n [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n [matTooltip]=\"\n selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n : null\n \"\n >\n <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n <div class=\"hover-label\">{{ element.label }}</div> \n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n <!-- <div class=\"template-section\">\n <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n </div> -->\n\n <!-- SKS10MAR25 footer version show -->\n <div class=\"sticky-footer-version\">\n {{version}}\n </div>\n </div>\n <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function -->\n <div class=\"form-preview\">\n <!-- AP-10MAR25 Heading -->\n <div class=\"field-container\"\n style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n (click)=\"selectHeading('Header')\">\n <div class=\"label-container\" style=\"padding: 10px; display: flex;justify-content: space-between;\">\n <div *ngIf=\"pdf\">\n <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n </div>\n <div class=\"action-buttons\">\n <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'PREVIEW' }}</button>\n <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'DOWNLOAD' }}</button>\n </div>\n </div>\n </div>\n\n <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngClass]=\"{'isPreview': isPreview}\"\n (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div *ngIf=\"!isPreview\" class=\"line-element\">\n <div></div>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-weight': field?.style?.fontWeight || '400',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n 'color': field?.style?.fontColor || '#000000',\n 'margin-top': (field?.style?.paddingTop || 0) + 'px',\n 'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" />\n </div>\n\n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i && !isPreview\" draggable=\"true && !isPreview\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'align-items': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'color': field?.style?.fontColor || '#000000',\n 'font-style': field?.style?.fontStyle,\n 'font-weight': field?.style?.fontWeight || '400',\n 'margin': \n (field?.style?.margin?.[0] || 0) + 'px ' +\n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px',\n 'padding-top': (field?.style?.paddingTop || 0) + 'px',\n 'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" \n (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div>\n <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"isPreview\" (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n 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=\"isPreview\" (click)=\"onImageDelete(field)\" 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\" stroke-linecap=\"round\"\n 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 <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <img [src]=\"field.imageData\" \n [style.width.px]=\"field.imageSize?.width || 100\"\n [style.height.px]=\"field.imageSize?.height || 100\" />\n </div>\n\n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Space Element -->\n <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'align-items': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'color': field?.style?.fontColor || '#000000',\n 'font-style': field?.style?.fontStyle,\n 'font-weight': field?.style?.fontWeight || '400',\n 'margin': \n (field?.style?.margin?.[0] || 0) + 'px ' +\n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px',\n 'padding-top': (field?.style?.paddingTop || 0) + 'px',\n 'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n <div *ngIf=\"!isPreview\" class=\"field-content\">\n <div class=\"label-container\">\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- TextArea -->\n <div *ngIf=\"field?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'align-items': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'color': field?.style?.fontColor || '#000000',\n 'font-style': field?.style?.fontStyle,\n 'font-weight': field?.style?.fontWeight || '400',\n 'margin': \n (field?.style?.margin?.[0] || 0) + 'px ' +\n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px',\n 'padding-top': (field?.style?.paddingTop || 0) + 'px',\n 'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\"\n [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n [value]=\"field.value? field.value : ''\"\n (input)=\"onTextAreaInput($event, field)\"\n #autoTextarea\n [style.height.px]=\"isPreview ? 40 : null\"\n (click)=\"openTextSettings(field, $event)\"\n (ngModelChange)=\"updateContent()\" \n [ngStyle]=\"{\n 'font-size': field.style?.fontSize ? field.style.fontSize + 'px' : '14px',\n 'font-weight': field.style?.bold ? 'bold' : 'normal',\n 'font-style': field.style?.italics ? 'italic' : 'normal',\n 'text-decoration': field.style?.decoration ? 'decoration' : 'none',\n 'text-align': field.style?.alignment || 'left',\n 'margin': field.style?.margin?.length === 4\n ? field.style.margin[1] + 'px ' + field.style.margin[2] + 'px ' +\n field.style.margin[3] + 'px ' + field.style.margin[0] + 'px'\n : '0',\n 'color': field.style?.color || '#000'\n }\">\n </textarea>\n </div>\n </div>\n\n <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n [ngStyle]=\"{\n position: 'absolute',\n background: '#fff',\n border: '1px solid #ccc',\n padding: '6px 10px',\n 'border-radius': '4px',\n 'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n 'z-index': '65535',\n display: 'flex',\n 'align-items': 'center',\n gap: '8px'\n }\">\n \n <!-- Font Size -->\n <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n <option [value]=\"12\">12pt</option>\n <option [value]=\"14\">14pt</option>\n <option [value]=\"16\">16pt</option>\n <option [value]=\"18\">18pt</option>\n <option [value]=\"24\">24pt</option>\n </select>\n\n <!-- Text Color -->\n <label title=\"Text Color\" class=\"color-label\">\n <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n </label>\n\n <!-- Bold -->\n <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n \n <!-- Italic -->\n <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n <!-- Underline -->\n <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n\n \n <!-- Align Left -->\n <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n </button>\n \n <!-- Align Center -->\n <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n </button>\n \n <!-- Align Right -->\n <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n </button>\n \n <!-- Close -->\n <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n </div>\n \n </div>\n\n <!-- Input -->\n <div *ngIf=\"field?.type === 'input'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'align-items': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'color': field?.style?.fontColor || '#000000',\n 'font-style': field?.style?.fontStyle,\n 'font-weight': field?.style?.fontWeight || '400',\n 'margin': \n (field?.style?.margin?.[0] || 0) + 'px ' +\n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px',\n 'padding-top': (field?.style?.paddingTop || 0) + 'px',\n 'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- AP-04JUN25 - replace app-custom-input -->\n <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n </nxt-input>\n </div>\n </div>\n </div>\n\n <!-- Date -->\n <div *ngIf=\"field?.type === 'date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'align-items': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'color': field?.style?.fontColor || '#000000',\n 'font-style': field?.style?.fontStyle,\n 'font-weight': field?.style?.fontWeight || '400',\n 'margin': \n (field?.style?.margin?.[0] || 0) + 'px ' +\n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px',\n 'padding-top': (field?.style?.paddingTop || 0) + 'px',\n 'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- AP-04JUN25 - replace custom date picker -->\n <nxt-input [type]=\"'date'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n </nxt-input>\n </div>\n </div>\n </div>\n\n <!-- Pdf -->\n <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'align-items': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'color': field?.style?.fontColor || '#000000',\n 'font-style': field?.style?.fontStyle,\n 'font-weight': field?.style?.fontWeight || '400',\n 'margin': \n (field?.style?.margin?.[0] || 0) + 'px ' +\n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px',\n 'padding-top': (field?.style?.paddingTop || 0) + 'px',\n 'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n <div *ngIf=\"field?.pdfReferenceQuestions\">\n <ng-container *ngFor=\"let field of field?.pdfReferenceQuestions[field?.pdfReference]; let i = index\">\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\">\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-weight': field?.style?.fontWeight || '400',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n 'color': field?.style?.fontColor || '#000000',\n 'margin-top': (field?.style?.paddingTop || 0) + 'px',\n 'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" />\n </div>\n\n <div *ngIf=\"field?.type === 'image'\" class=\"field-container\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div>\n <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <img [src]=\"field.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(field, $event)\" style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n </div>\n </div>\n <div *ngIf=\"field?.type === 'text'\" class=\"field-container\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <textarea class=\"custom-textarea\" [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n [style.height.px]=\"isPreview ? 40 : field.size || 100\" [(ngModel)]=\"field.value\"\n (ngModelChange)=\"onQuestionChange($event, field)\"></textarea>\n </div>\n </div>\n </div>\n <!-- AP-14JUN25 Added nxt-input in pdf -->\n <div *ngIf=\"field?.type === 'input'\" class=\"field-container\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\"> \n <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [(ngModel)]=\"field.value\"\n [placeholder]=\"'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" (ngModelChange)=\"onQuestionChange($event, field)\">\n </nxt-input>\n </div>\n </div>\n </div>\n <!-- AP-06MAR25 -->\n <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\"\n [mode]=\"isPreview ? 'view' : 'edit'\" [apiMeta]=\"field?.subText\"\n [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\"\n (valueChange)=\"onQuestionChange($event, field)\"\n [data]=\"field.value?.data\"\n isEditable=true (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <!-- AP-06MAR25 -->\n <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'align-items': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'color': field?.style?.fontColor || '#000000',\n 'font-style': field?.style?.fontStyle,\n 'font-weight': field?.style?.fontWeight || '400',\n 'margin': \n (field?.style?.margin?.[0] || 0) + 'px ' +\n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px',\n 'padding-top': (field?.style?.paddingTop || 0) + 'px',\n 'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"isPreview ? 'view' : 'edit'\"\n [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n tableWidth=\"auto\" isEditable=true (columnSelected)=columnSelected($event)\n [data]=\"field.value?.data\"\n (valueChange)=\"onQuestionChange($event, field)\"\n (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n\n </ng-container>\n </div>\n </div>\n <!-- SKS13MAR25 popup conformation box -->\n <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n <div class=\"dialog-box\">\n <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n <div class=\"button-container-fb\">\n <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n </div>\n </div>\n </div>\n <app-pdf-properties *ngIf=\"!isPreview\" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'image'\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n\n <!--AP-20JUN25 - Image size controls: Allow user to manually adjust width and height using range sliders -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"manual-size-inputs\">\n <label>{{ 'WIDTH' | nxtCustomTranslate : 'Width' }} {{ selectedImageElement.imageSize.width }}</label>\n <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n [(ngModel)]=\"selectedImageElement.imageSize.width\"\n (input)=\"onImageSizeChange()\" />\n \n <label>{{ 'HEIGHT' | nxtCustomTranslate : 'Height' }} {{ selectedImageElement.imageSize.height }}</label>\n <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n [(ngModel)]=\"selectedImageElement.imageSize.height\"\n (input)=\"onImageSizeChange()\" />\n </div>\n \n\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:15px;height:15px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:flex-end;align-items:center}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media (max-width: 600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: PdfPropertiesComponent, selector: "app-pdf-properties", inputs: ["selectedElementType", "templateSelected"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { 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: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
|
|
63610
63662
|
}
|
|
63611
63663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PdfDesignerComponent, decorators: [{
|
|
63612
63664
|
type: Component,
|
|
63613
|
-
args: [{ selector: 'app-pdf-designer', standalone: true, imports: [CommonModule, ImageCropperComponent, PdfPropertiesComponent, MatTooltipModule, FormsModule, NxtDatatable, NxtInput, NxtCustomTranslatePipe], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n <!-- Form Builder Section All Elements -->\n <div *ngIf=\"!isPreview\" class=\"form-builder\">\n\n <ng-container *ngFor=\"let element of elementsList\">\n <div\n class=\"element\"\n [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n [matTooltip]=\"\n selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n : null\n \"\n >\n <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n <div class=\"hover-label\">{{ element.label }}</div> \n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n<!-- \n <div class=\"template-section\">\n <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n </div> -->\n\n <!-- SKS10MAR25 footer version show -->\n <div class=\"sticky-footer-version\">\n {{version}}\n </div>\n </div>\n <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function -->\n <div class=\"form-preview\">\n <!-- AP-10MAR25 Heading -->\n <div class=\"field-container\"\n style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n (click)=\"selectHeading('Header')\">\n <div class=\"label-container\" style=\"padding: 10px; display: flex;justify-content: space-between;\">\n <div *ngIf=\"pdf\">\n <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n </div>\n <div class=\"action-buttons\">\n <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'PREVIEW' }}</button>\n <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'DOWNLOAD' }}</button>\n </div>\n </div>\n </div>\n\n <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngClass]=\"{'isPreview': isPreview}\"\n (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div *ngIf=\"!isPreview\" class=\"line-element\">\n <div></div>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-weight': field.fontWeight || '400',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'text-align': field.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n 'color': field.fontColor || '#000000',\n 'margin-top': (field.paddingTop || 0) + 'px',\n 'margin-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" />\n </div>\n\n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i && !isPreview\" draggable=\"true && !isPreview\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'align-items': field.alignItems || '',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'color': field.fontColor || '#000000',\n 'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n 'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n 'margin': \n (field.margin?.[0] || 0) + 'px ' +\n (field.margin?.[1] || 0) + 'px ' +\n (field.margin?.[2] || 0) + 'px ' +\n (field.margin?.[3] || 0) + 'px',\n 'padding-top': (field.paddingTop || 0) + 'px',\n 'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div>\n <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"isPreview\" (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n 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=\"isPreview\" (click)=\"onImageDelete(field)\" 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\" stroke-linecap=\"round\"\n 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 <div class=\"logo-container\">\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <img [src]=\"field.imageData\" \n [style.width.px]=\"field.imageSize?.width || 100\"\n [style.height.px]=\"field.imageSize?.height || 100\" />\n </div>\n\n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Space Element -->\n <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'align-items': field.alignItems || '',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'color': field.fontColor || '#000000',\n 'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n 'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n 'margin': \n (field.margin?.[0] || 0) + 'px ' +\n (field.margin?.[1] || 0) + 'px ' +\n (field.margin?.[2] || 0) + 'px ' +\n (field.margin?.[3] || 0) + 'px',\n 'padding-top': (field.paddingTop || 0) + 'px',\n 'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n <div *ngIf=\"!isPreview\" class=\"field-content\">\n <div class=\"label-container\">\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- TextArea -->\n <div *ngIf=\"field?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'align-items': field.alignItems || '',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'color': field.fontColor || '#000000',\n 'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n 'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n 'margin': \n (field.margin?.[0] || 0) + 'px ' +\n (field.margin?.[1] || 0) + 'px ' +\n (field.margin?.[2] || 0) + 'px ' +\n (field.margin?.[3] || 0) + 'px',\n 'padding-top': (field.paddingTop || 0) + 'px',\n 'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\"\n [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n [value]=\"field.value? field.value : ''\"\n (input)=\"onTextAreaInput($event, field)\"\n #autoTextarea\n [style.height.px]=\"isPreview ? 40 : null\"\n (click)=\"openTextSettings(field, $event)\"\n (ngModelChange)=\"updateContent()\" \n [ngStyle]=\"{\n 'font-size': field.style?.fontSize ? field.style.fontSize + 'px' : '14px',\n 'font-weight': field.style?.bold ? 'bold' : 'normal',\n 'font-style': field.style?.italics ? 'italic' : 'normal',\n 'text-decoration': field.style?.decoration ? 'decoration' : 'none',\n 'text-align': field.style?.alignment || 'left',\n 'margin': field.style?.margin?.length === 4\n ? field.style.margin[1] + 'px ' + field.style.margin[2] + 'px ' +\n field.style.margin[3] + 'px ' + field.style.margin[0] + 'px'\n : '0',\n 'color': field.style?.color || '#000'\n }\"></textarea>\n \n </div>\n </div>\n\n <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n [ngStyle]=\"{\n position: 'absolute',\n background: '#fff',\n border: '1px solid #ccc',\n padding: '6px 10px',\n 'border-radius': '4px',\n 'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n 'z-index': '65535',\n display: 'flex',\n 'align-items': 'center',\n gap: '8px'\n }\">\n \n <!-- Font Size -->\n <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n <option [value]=\"12\">12pt</option>\n <option [value]=\"14\">14pt</option>\n <option [value]=\"16\">16pt</option>\n <option [value]=\"18\">18pt</option>\n <option [value]=\"24\">24pt</option>\n </select>\n\n <!-- Text Color -->\n <label title=\"Text Color\" class=\"color-label\">\n <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n </label>\n\n <!-- Bold -->\n <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n \n <!-- Italic -->\n <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n <!-- Underline -->\n <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n\n \n <!-- Align Left -->\n <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n </button>\n \n <!-- Align Center -->\n <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n </button>\n \n <!-- Align Right -->\n <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n </button>\n \n <!-- Close -->\n <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n </div>\n \n </div>\n\n <!-- Input -->\n <div *ngIf=\"field?.type === 'input'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'align-items': field.alignItems || '',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'color': field.fontColor || '#000000',\n 'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n 'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n 'margin': \n (field.margin?.[0] || 0) + 'px ' +\n (field.margin?.[1] || 0) + 'px ' +\n (field.margin?.[2] || 0) + 'px ' +\n (field.margin?.[3] || 0) + 'px',\n 'padding-top': (field.paddingTop || 0) + 'px',\n 'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- AP-04JUN25 - replace app-custom-input -->\n <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n </nxt-input>\n </div>\n </div>\n </div>\n\n <!-- Date -->\n <div *ngIf=\"field?.type === 'date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'align-items': field.alignItems || '',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'color': field.fontColor || '#000000',\n 'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n 'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n 'margin': \n (field.margin?.[0] || 0) + 'px ' +\n (field.margin?.[1] || 0) + 'px ' +\n (field.margin?.[2] || 0) + 'px ' +\n (field.margin?.[3] || 0) + 'px',\n 'padding-top': (field.paddingTop || 0) + 'px',\n 'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- AP-04JUN25 - replace custom date picker -->\n <nxt-input [type]=\"'date'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n </nxt-input>\n </div>\n </div>\n </div>\n\n <!-- Pdf -->\n <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'align-items': field.alignItems || '',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'color': field.fontColor || '#000000',\n 'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n 'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n 'margin': \n (field.margin?.[0] || 0) + 'px ' +\n (field.margin?.[1] || 0) + 'px ' +\n (field.margin?.[2] || 0) + 'px ' +\n (field.margin?.[3] || 0) + 'px',\n 'padding-top': (field.paddingTop || 0) + 'px',\n 'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n <div *ngIf=\"field?.pdfReferenceQuestions\">\n <ng-container *ngFor=\"let field of field?.pdfReferenceQuestions[field?.pdfReference]; let i = index\">\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\">\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-weight': field.fontWeight || '400',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'text-align': field.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n 'color': field.fontColor || '#000000',\n 'margin-top': (field.paddingTop || 0) + 'px',\n 'margin-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" />\n </div>\n\n <div *ngIf=\"field?.type === 'image'\" class=\"field-container\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div>\n <div class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <img [src]=\"field.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(field, $event)\" style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n </div>\n </div>\n <div *ngIf=\"field?.type === 'text'\" class=\"field-container\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <textarea class=\"custom-textarea\" [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n [style.height.px]=\"isPreview ? 40 : field.size || 100\" [(ngModel)]=\"field.value\"\n (ngModelChange)=\"onQuestionChange($event, field)\"></textarea>\n </div>\n </div>\n </div>\n <!-- AP-14JUN25 Added nxt-input in pdf -->\n <div *ngIf=\"field?.type === 'input'\" class=\"field-container\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\"> \n <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [(ngModel)]=\"field.value\"\n [placeholder]=\"'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" (ngModelChange)=\"onQuestionChange($event, field)\">\n </nxt-input>\n </div>\n </div>\n </div>\n <!-- AP-06MAR25 -->\n <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\"\n [mode]=\"isPreview ? 'view' : 'edit'\" [apiMeta]=\"field?.subText\"\n [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\"\n (valueChange)=\"onQuestionChange($event, field)\"\n [data]=\"field.value?.data\"\n isEditable=true (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <!-- AP-06MAR25 -->\n <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field.font || 'Helvetica Neue',\n 'font-size': (field.fontSize || 14) + 'px',\n 'width': (field.width || 100) + '%',\n 'align-items': field.alignItems || '',\n 'border-radius': '5px',\n 'border-width': (field.lineWidth || 1) + 'px',\n 'color': field.fontColor || '#000000',\n 'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n 'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n 'margin': \n (field.margin?.[0] || 0) + 'px ' +\n (field.margin?.[1] || 0) + 'px ' +\n (field.margin?.[2] || 0) + 'px ' +\n (field.margin?.[3] || 0) + 'px',\n 'padding-top': (field.paddingTop || 0) + 'px',\n 'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"isPreview ? 'view' : 'edit'\"\n [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n tableWidth=\"auto\" isEditable=true (columnSelected)=columnSelected($event)\n [data]=\"field.value?.data\"\n (valueChange)=\"onQuestionChange($event, field)\"\n (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n\n </ng-container>\n </div>\n </div>\n <!-- SKS13MAR25 popup conformation box -->\n <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n <div class=\"dialog-box\">\n <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n <div class=\"button-container-fb\">\n <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n </div>\n </div>\n </div>\n <app-pdf-properties *ngIf=\"!isPreview\" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'image'\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n\n <!--AP-20JUN25 - Image size controls: Allow user to manually adjust width and height using range sliders -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"manual-size-inputs\">\n <label>{{ 'WIDTH' | nxtCustomTranslate : 'Width' }} {{ selectedImageElement.imageSize.width }}</label>\n <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n [(ngModel)]=\"selectedImageElement.imageSize.width\"\n (input)=\"onImageSizeChange()\" />\n \n <label>{{ 'HEIGHT' | nxtCustomTranslate : 'Height' }} {{ selectedImageElement.imageSize.height }}</label>\n <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n [(ngModel)]=\"selectedImageElement.imageSize.height\"\n (input)=\"onImageSizeChange()\" />\n </div>\n \n\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:15px;height:15px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:flex-end;align-items:center}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media (max-width: 600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}\n"] }]
|
|
63665
|
+
args: [{ selector: 'app-pdf-designer', standalone: true, imports: [CommonModule, ImageCropperComponent, PdfPropertiesComponent, MatTooltipModule, FormsModule, NxtDatatable, NxtInput, NxtCustomTranslatePipe], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n <!-- Form Builder Section All Elements -->\n <div *ngIf=\"!isPreview\" class=\"form-builder\">\n <ng-container *ngFor=\"let element of elementsList\">\n <div\n class=\"element\"\n [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n [matTooltip]=\"\n selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n : null\n \"\n >\n <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n <div class=\"hover-label\">{{ element.label }}</div> \n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n <!-- <div class=\"template-section\">\n <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n </div> -->\n\n <!-- SKS10MAR25 footer version show -->\n <div class=\"sticky-footer-version\">\n {{version}}\n </div>\n </div>\n <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function -->\n <div class=\"form-preview\">\n <!-- AP-10MAR25 Heading -->\n <div class=\"field-container\"\n style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n (click)=\"selectHeading('Header')\">\n <div class=\"label-container\" style=\"padding: 10px; display: flex;justify-content: space-between;\">\n <div *ngIf=\"pdf\">\n <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n </div>\n <div class=\"action-buttons\">\n <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'PREVIEW' }}</button>\n <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'DOWNLOAD' }}</button>\n </div>\n </div>\n </div>\n\n <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngClass]=\"{'isPreview': isPreview}\"\n (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div *ngIf=\"!isPreview\" class=\"line-element\">\n <div></div>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-weight': field?.style?.fontWeight || '400',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n 'color': field?.style?.fontColor || '#000000',\n 'margin-top': (field?.style?.paddingTop || 0) + 'px',\n 'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" />\n </div>\n\n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i && !isPreview\" draggable=\"true && !isPreview\"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'align-items': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'color': field?.style?.fontColor || '#000000',\n 'font-style': field?.style?.fontStyle,\n 'font-weight': field?.style?.fontWeight || '400',\n 'margin': \n (field?.style?.margin?.[0] || 0) + 'px ' +\n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px',\n 'padding-top': (field?.style?.paddingTop || 0) + 'px',\n 'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" \n (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div>\n <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"isPreview\" (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n 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=\"isPreview\" (click)=\"onImageDelete(field)\" 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\" stroke-linecap=\"round\"\n 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 <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <img [src]=\"field.imageData\" \n [style.width.px]=\"field.imageSize?.width || 100\"\n [style.height.px]=\"field.imageSize?.height || 100\" />\n </div>\n\n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Space Element -->\n <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'align-items': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'color': field?.style?.fontColor || '#000000',\n 'font-style': field?.style?.fontStyle,\n 'font-weight': field?.style?.fontWeight || '400',\n 'margin': \n (field?.style?.margin?.[0] || 0) + 'px ' +\n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px',\n 'padding-top': (field?.style?.paddingTop || 0) + 'px',\n 'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n <div *ngIf=\"!isPreview\" class=\"field-content\">\n <div class=\"label-container\">\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- TextArea -->\n <div *ngIf=\"field?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'align-items': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'color': field?.style?.fontColor || '#000000',\n 'font-style': field?.style?.fontStyle,\n 'font-weight': field?.style?.fontWeight || '400',\n 'margin': \n (field?.style?.margin?.[0] || 0) + 'px ' +\n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px',\n 'padding-top': (field?.style?.paddingTop || 0) + 'px',\n 'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\"\n [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n [value]=\"field.value? field.value : ''\"\n (input)=\"onTextAreaInput($event, field)\"\n #autoTextarea\n [style.height.px]=\"isPreview ? 40 : null\"\n (click)=\"openTextSettings(field, $event)\"\n (ngModelChange)=\"updateContent()\" \n [ngStyle]=\"{\n 'font-size': field.style?.fontSize ? field.style.fontSize + 'px' : '14px',\n 'font-weight': field.style?.bold ? 'bold' : 'normal',\n 'font-style': field.style?.italics ? 'italic' : 'normal',\n 'text-decoration': field.style?.decoration ? 'decoration' : 'none',\n 'text-align': field.style?.alignment || 'left',\n 'margin': field.style?.margin?.length === 4\n ? field.style.margin[1] + 'px ' + field.style.margin[2] + 'px ' +\n field.style.margin[3] + 'px ' + field.style.margin[0] + 'px'\n : '0',\n 'color': field.style?.color || '#000'\n }\">\n </textarea>\n </div>\n </div>\n\n <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n [ngStyle]=\"{\n position: 'absolute',\n background: '#fff',\n border: '1px solid #ccc',\n padding: '6px 10px',\n 'border-radius': '4px',\n 'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n 'z-index': '65535',\n display: 'flex',\n 'align-items': 'center',\n gap: '8px'\n }\">\n \n <!-- Font Size -->\n <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n <option [value]=\"12\">12pt</option>\n <option [value]=\"14\">14pt</option>\n <option [value]=\"16\">16pt</option>\n <option [value]=\"18\">18pt</option>\n <option [value]=\"24\">24pt</option>\n </select>\n\n <!-- Text Color -->\n <label title=\"Text Color\" class=\"color-label\">\n <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n </label>\n\n <!-- Bold -->\n <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n \n <!-- Italic -->\n <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n <!-- Underline -->\n <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n\n \n <!-- Align Left -->\n <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n </button>\n \n <!-- Align Center -->\n <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n </button>\n \n <!-- Align Right -->\n <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n </button>\n \n <!-- Close -->\n <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n </div>\n \n </div>\n\n <!-- Input -->\n <div *ngIf=\"field?.type === 'input'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'align-items': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'color': field?.style?.fontColor || '#000000',\n 'font-style': field?.style?.fontStyle,\n 'font-weight': field?.style?.fontWeight || '400',\n 'margin': \n (field?.style?.margin?.[0] || 0) + 'px ' +\n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px',\n 'padding-top': (field?.style?.paddingTop || 0) + 'px',\n 'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- AP-04JUN25 - replace app-custom-input -->\n <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n </nxt-input>\n </div>\n </div>\n </div>\n\n <!-- Date -->\n <div *ngIf=\"field?.type === 'date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'align-items': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'color': field?.style?.fontColor || '#000000',\n 'font-style': field?.style?.fontStyle,\n 'font-weight': field?.style?.fontWeight || '400',\n 'margin': \n (field?.style?.margin?.[0] || 0) + 'px ' +\n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px',\n 'padding-top': (field?.style?.paddingTop || 0) + 'px',\n 'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- AP-04JUN25 - replace custom date picker -->\n <nxt-input [type]=\"'date'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n </nxt-input>\n </div>\n </div>\n </div>\n\n <!-- Pdf -->\n <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'align-items': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'color': field?.style?.fontColor || '#000000',\n 'font-style': field?.style?.fontStyle,\n 'font-weight': field?.style?.fontWeight || '400',\n 'margin': \n (field?.style?.margin?.[0] || 0) + 'px ' +\n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px',\n 'padding-top': (field?.style?.paddingTop || 0) + 'px',\n 'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n <div *ngIf=\"field?.pdfReferenceQuestions\">\n <ng-container *ngFor=\"let field of field?.pdfReferenceQuestions[field?.pdfReference]; let i = index\">\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\">\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-weight': field?.style?.fontWeight || '400',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n 'color': field?.style?.fontColor || '#000000',\n 'margin-top': (field?.style?.paddingTop || 0) + 'px',\n 'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" />\n </div>\n\n <div *ngIf=\"field?.type === 'image'\" class=\"field-container\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div>\n <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <img [src]=\"field.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(field, $event)\" style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n </div>\n </div>\n <div *ngIf=\"field?.type === 'text'\" class=\"field-container\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <textarea class=\"custom-textarea\" [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n [style.height.px]=\"isPreview ? 40 : field.size || 100\" [(ngModel)]=\"field.value\"\n (ngModelChange)=\"onQuestionChange($event, field)\"></textarea>\n </div>\n </div>\n </div>\n <!-- AP-14JUN25 Added nxt-input in pdf -->\n <div *ngIf=\"field?.type === 'input'\" class=\"field-container\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\"> \n <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [(ngModel)]=\"field.value\"\n [placeholder]=\"'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" (ngModelChange)=\"onQuestionChange($event, field)\">\n </nxt-input>\n </div>\n </div>\n </div>\n <!-- AP-06MAR25 -->\n <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\"\n [mode]=\"isPreview ? 'view' : 'edit'\" [apiMeta]=\"field?.subText\"\n [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\"\n (valueChange)=\"onQuestionChange($event, field)\"\n [data]=\"field.value?.data\"\n isEditable=true (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <!-- AP-06MAR25 -->\n <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 14) + 'px',\n 'width': (field?.width || 100) + '%',\n 'align-items': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'border-width': (field?.style?.lineWidth || 1) + 'px',\n 'color': field?.style?.fontColor || '#000000',\n 'font-style': field?.style?.fontStyle,\n 'font-weight': field?.style?.fontWeight || '400',\n 'margin': \n (field?.style?.margin?.[0] || 0) + 'px ' +\n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px',\n 'padding-top': (field?.style?.paddingTop || 0) + 'px',\n 'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview\" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"isPreview ? 'view' : 'edit'\"\n [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n tableWidth=\"auto\" isEditable=true (columnSelected)=columnSelected($event)\n [data]=\"field.value?.data\"\n (valueChange)=\"onQuestionChange($event, field)\"\n (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n\n </ng-container>\n </div>\n </div>\n <!-- SKS13MAR25 popup conformation box -->\n <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n <div class=\"dialog-box\">\n <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n <div class=\"button-container-fb\">\n <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n </div>\n </div>\n </div>\n <app-pdf-properties *ngIf=\"!isPreview\" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'image'\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n\n <!--AP-20JUN25 - Image size controls: Allow user to manually adjust width and height using range sliders -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"manual-size-inputs\">\n <label>{{ 'WIDTH' | nxtCustomTranslate : 'Width' }} {{ selectedImageElement.imageSize.width }}</label>\n <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n [(ngModel)]=\"selectedImageElement.imageSize.width\"\n (input)=\"onImageSizeChange()\" />\n \n <label>{{ 'HEIGHT' | nxtCustomTranslate : 'Height' }} {{ selectedImageElement.imageSize.height }}</label>\n <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n [(ngModel)]=\"selectedImageElement.imageSize.height\"\n (input)=\"onImageSizeChange()\" />\n </div>\n \n\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:15px;height:15px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:flex-end;align-items:center}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media (max-width: 600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}\n"] }]
|
|
63614
63666
|
}], ctorParameters: () => [{ type: PdfDesignerService }], propDecorators: { textareas: [{
|
|
63615
63667
|
type: ViewChildren,
|
|
63616
63668
|
args: ['autoTextarea']
|
|
@@ -65773,7 +65825,7 @@ class ElementComponent {
|
|
|
65773
65825
|
this.translationService.setFormBuilderLanguage(this.languageCode);
|
|
65774
65826
|
}
|
|
65775
65827
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ElementComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FormBuilderService }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
65776
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ElementComponent, isStandalone: true, selector: "app-element", inputs: { bookletJSON: "bookletJSON", langOption: "langOption", languageCode: "languageCode" }, outputs: { templateMode: "templateMode" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n <!-- Form Builder Section All Elements -->\n <div class=\"form-builder\">\n <!-- Basic Elements Toggle -->\n <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"sections.basic\">\n <ng-container *ngFor=\"let element of basicElements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n <div class=\"hover-label\">{{ element.label }}</div>\n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Advanced Elements Toggle -->\n <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"sections.advanced\">\n <ng-container *ngFor=\"let element of advancedElements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\">\n <div class=\"hover-label\">{{ element.label }}</div>\n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n <!-- AP-08APR25 Add Templates Component -->\n <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n <!-- SKS10MAR25 footer version show -->\n <div class=\"sticky-footer-version\">\n {{version}}\n </div>\n </div>\n <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function -->\n <div class=\"form-preview\">\n <!-- AP-10MAR25 Heading -->\n <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n <div class=\"label-container field-container\"\n style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n [class.highlight]=\"isHeaderSelect\" (click)=\"selectHeading('Header')\">\n <div *ngIf=\"book?.records\">\n <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n </div>\n </div>\n <app-custom-dropdown [options]=\"langOption\" [selectedValue]=\"languageCode\" [from]=\"'normalDropDown'\"\n [mode]=\"'edit'\" (valueChange)=\"langChangeEmit($event.value)\"\n style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n </app-custom-dropdown>\n </div>\n\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n <!-- TextBox -->\n <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"text\" class=\"custom-input\"\n [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n </div>\n </div>\n </div>\n\n <!-- MSM-09JUL25 Icon-selectir Element -->\n <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"choose-icon-placeholder\">\n </div>\n </div>\n </div>\n </div>\n\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"line-element\">\n <div></div>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF',\n 'border-style': field?.lineStyle?.toLowerCase() || 'solid'\n }\" />\n </div>\n\n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image')\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div>\n <div class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <img [src]=\"field.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Space Element -->\n <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isOptional\"></label>\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Boolean Element -->\n <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n\n <!-- Calendar -->\n <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP -12MAR25 Date -->\n <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP-21MAR25 Add Time element -->\n <!-- Time Field -->\n <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' |\n nxtCustomTranslate : 'Time') }}</label>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP-28MAR25 DateTime -->\n <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date &\n Time')\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n </div>\n <!-- SKS7AUG25 month -->\n <div *ngIf=\"field.type === 'month'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n }\" \n [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{field.questionText ? field.questionText : ('SELECT_MONTH' | nxtCustomTranslate : 'Select Month')}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"month\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' |\n nxtCustomTranslate : 'Label') }}\n </label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"email\" class=\"custom-input\"\n [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- Numbers -->\n <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"number\" class=\"custom-input\"\n [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- TextArea -->\n <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n text')}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\"\n [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n </div>\n </div>\n </div>\n\n <!-- RichText -->\n <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n text')}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\"\n [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n </div>\n </div>\n </div>\n\n <!-- Label -->\n <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Book -->\n <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n </div>\n </div>\n </div>\n\n <!-- File -->\n <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n </div>\n\n <!-- CheckBox -->\n <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n </label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n\n <div class=\"checkbox-options-container\">\n <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\">\n <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"radio-options-container\">\n <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.label }}</label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Dropdown -->\n <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{ option.label }} </option>\n </select>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <!-- AP-06MAR25 -->\n <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n [selectedColumn]=\"selectedColumn\" (columnSelected)=columnSelected($event)\n (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n\n <!-- List -->\n <!-- AP-06MAR25 - List data show-->\n <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n </ng-container>\n </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n <div class=\"dialog-box\">\n <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n <div class=\"button-container-fb\">\n <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n </div>\n </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:10px;cursor:grab}.field-wrapper,.line-field{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.line-field{width:100%;margin:10px 0;padding:3px}.field-container{padding:0 5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right{opacity:1;visibility:visible}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.label-container:hover .delete-icon{opacity:1;visibility:visible}.label-container label{font-size:15px;font-weight:400}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:15px;height:15px}.element.disabled{opacity:.5;cursor:not-allowed}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.choose-icon-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:150px;border:2px dashed #ccc;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BookletComponent, selector: "lib-booklet", inputs: ["bookletId", "serv", "tkn", "bookletJSON", "allIcons", "themeColor", "cdnIconURL", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "isEdit", "direction", "dataBind"], outputs: ["handleBookletActionEvent", "handlePage", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { 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: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
|
|
65828
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ElementComponent, isStandalone: true, selector: "app-element", inputs: { bookletJSON: "bookletJSON", langOption: "langOption", languageCode: "languageCode" }, outputs: { templateMode: "templateMode" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n <!-- Form Builder Section All Elements -->\n <div class=\"form-builder\">\n <!-- Basic Elements Toggle -->\n <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"sections.basic\">\n <ng-container *ngFor=\"let element of basicElements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n <div class=\"hover-label\">{{ element.label }}</div>\n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Advanced Elements Toggle -->\n <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"sections.advanced\">\n <ng-container *ngFor=\"let element of advancedElements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\">\n <div class=\"hover-label\">{{ element.label }}</div>\n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n <!-- AP-08APR25 Add Templates Component -->\n <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n <!-- SKS10MAR25 footer version show -->\n <div class=\"sticky-footer-version\">\n {{version}}\n </div>\n </div>\n <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function -->\n <div class=\"form-preview\">\n <!-- AP-10MAR25 Heading -->\n <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n <div class=\"label-container field-container\"\n style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n [class.highlight]=\"isHeaderSelect\" (click)=\"selectHeading('Header')\">\n <div *ngIf=\"book?.records\">\n <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n </div>\n </div>\n <app-custom-dropdown [options]=\"langOption\" [selectedValue]=\"languageCode\" [from]=\"'normalDropDown'\"\n [mode]=\"'edit'\" (valueChange)=\"langChangeEmit($event.value)\"\n style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n </app-custom-dropdown>\n </div>\n\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n <!-- TextBox -->\n <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"text\" class=\"custom-input\"\n [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n </div>\n </div>\n </div>\n\n <!-- MSM-09JUL25 Icon-selectir Element -->\n <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"choose-icon-placeholder\">\n </div>\n </div>\n </div>\n </div>\n\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"line-element\">\n <div></div>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF',\n 'border-style': field?.lineStyle?.toLowerCase() || 'solid'\n }\" />\n </div>\n\n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image')\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div>\n <div class=\"logo-container\">\n <!-- Logo preview area -->\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <img [src]=\"field.imageData\" />\n </div>\n\n <!-- Upload button -->\n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Space Element -->\n <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isOptional\"></label>\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Boolean Element -->\n <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n\n <!-- Calendar -->\n <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP -12MAR25 Date -->\n <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP-21MAR25 Add Time element -->\n <!-- Time Field -->\n <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' |\n nxtCustomTranslate : 'Time') }}</label>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- AP-28MAR25 DateTime -->\n <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date &\n Time')\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n </div>\n <!-- SKS7AUG25 month -->\n <div *ngIf=\"field.type === 'month'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n }\" \n [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{field.questionText ? field.questionText : ('SELECT_MONTH' | nxtCustomTranslate : 'Select Month')}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"month\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' |\n nxtCustomTranslate : 'Label') }}\n </label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"email\" class=\"custom-input\"\n [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- Numbers -->\n <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"number\" class=\"custom-input\"\n [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n <!-- TextArea -->\n <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n text')}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\"\n [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n </div>\n </div>\n </div>\n\n <!-- RichText -->\n <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n text')}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\"\n [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n </div>\n </div>\n </div>\n\n <!-- Label -->\n <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Book -->\n <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n </div>\n </div>\n </div>\n\n <!-- File -->\n <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n </div>\n\n <!-- CheckBox -->\n <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n </label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n\n <div class=\"checkbox-options-container\">\n <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\">\n <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"radio-options-container\">\n <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.label }}</label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Dropdown -->\n <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{ option.label }} </option>\n </select>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <!-- AP-06MAR25 -->\n <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n [selectedColumn]=\"selectedColumn\" (columnSelected)=columnSelected($event)\n (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n\n <!-- List -->\n <!-- AP-06MAR25 - List data show-->\n <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n 'font-family': field?.font || 'Helvetica Neue',\n 'font-weight': field?.fontWeight || '400',\n 'font-size': field?.fontSize || '14px',\n 'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n 'text-align': field?.textAlign || 'left',\n 'border-radius': '5px',\n 'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n 'color': field?.fontColor || '#000000',\n 'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n 'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n 'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <div>\n <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n </div>\n </div>\n </div>\n\n </ng-container>\n </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n <div class=\"dialog-box\">\n <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n <div class=\"button-container-fb\">\n <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n </div>\n </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:10px;cursor:grab}.field-wrapper,.line-field{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.line-field{width:100%;margin:10px 0;padding:3px}.field-container{padding:0 5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right{opacity:1;visibility:visible}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.label-container:hover .delete-icon{opacity:1;visibility:visible}.label-container label{font-size:15px;font-weight:400}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:15px;height:15px}.element.disabled{opacity:.5;cursor:not-allowed}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.choose-icon-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:150px;border:2px dashed #ccc;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BookletComponent, selector: "lib-booklet", inputs: ["bookletId", "serv", "tkn", "bookletJSON", "allIcons", "themeColor", "cdnIconURL", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "isEdit", "direction", "isLoading", "dataBind"], outputs: ["handleBookletActionEvent", "handlePage", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { 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: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
|
|
65777
65829
|
}
|
|
65778
65830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ElementComponent, decorators: [{
|
|
65779
65831
|
type: Component,
|