@rangertechnologies/ngnxt 2.1.272 → 2.1.273
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.
|
@@ -60545,14 +60545,14 @@ class QuestionbookComponent {
|
|
|
60545
60545
|
this.isImageEdit = false;
|
|
60546
60546
|
}
|
|
60547
60547
|
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;\" [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" }] });
|
|
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" }] });
|
|
60549
60549
|
}
|
|
60550
60550
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuestionbookComponent, decorators: [{
|
|
60551
60551
|
type: Component,
|
|
60552
60552
|
args: [{ selector: 'lib-questionbook', standalone: true, imports: [
|
|
60553
60553
|
CommonModule,
|
|
60554
60554
|
FormsModule, ImageCropperComponent, NxtFileUploadComponent, CustomRadioComponent, CustomDropdownComponent, NxtButtonComponent, NxtSearchBox, NxtDatatable, PickLocationComponent, CustomModelComponent, CustomCalendarComponent, MatTooltipModule, NxtInput, IconSelectorComponent, NxtCustomTranslatePipe
|
|
60555
|
-
], 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;\" [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"] }]
|
|
60555
|
+
], 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"] }]
|
|
60556
60556
|
}], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: StorageService }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
60557
60557
|
type: Inject,
|
|
60558
60558
|
args: [DOCUMENT]
|
|
@@ -61179,7 +61179,7 @@ const VERSION = {
|
|
|
61179
61179
|
"semver": null,
|
|
61180
61180
|
"suffix": "09440148-dirty",
|
|
61181
61181
|
"semverString": null,
|
|
61182
|
-
"version": "2.1.
|
|
61182
|
+
"version": "2.1.273"
|
|
61183
61183
|
};
|
|
61184
61184
|
/* tslint:enable */
|
|
61185
61185
|
|