@symphony-talent/component-library 4.207.0 → 4.208.0

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.
@@ -5327,10 +5327,10 @@ class MergeContactsModalComponent {
5327
5327
  }
5328
5328
  }
5329
5329
  MergeContactsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MergeContactsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5330
- MergeContactsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: MergeContactsModalComponent, selector: "symphony-merge-contacts-modal", inputs: { model: "model", isLoading: "isLoading", hasError: "hasError", stepCopy: "stepCopy", confirmStepCopy: "confirmStepCopy", selected: "selected", confirmSuggestion: "confirmSuggestion", showSuccessToast: "showSuccessToast", showFailureToast: "showFailureToast", currentStep: "currentStep" }, outputs: { next: "next", cancel: "cancel", notDuplicate: "notDuplicate", selectionChange: "selectionChange", hideSuccessToast: "hideSuccessToast", hideFailureToast: "hideFailureToast", requestConfirmSuggestion: "requestConfirmSuggestion", requestCancelConfirmSuggestion: "requestCancelConfirmSuggestion" }, ngImport: i0, template: "<div class=\"sfx sfx-modal modal-container\" *ngIf=\"model\">\n <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n <div class=\"modal-title\">\n <div class=\"row\">\n <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n <ng-container *ngIf=\"getStepTitle(currentStep) as stepTitle\">\n <symphony-h4 [text]=\"stepTitle\"></symphony-h4>\n </ng-container> \n </div>\n <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n <symphony-icon\n class=\"pull-right\"\n [icon]=\"'si-close-modal'\"\n (clicked)=\"onCancel()\"\n ></symphony-icon>\n </div>\n <div\n class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\"\n [ngClass]=\"{'white-space-pre-line': currentStep === 2}\"\n *ngIf=\"getStepDescription(currentStep)\"\n >\n <ng-container *ngIf=\"getStepDescription(currentStep) as stepDescription\">\n <symphony-paragraph [text]=\"stepDescription\"></symphony-paragraph>\n </ng-container> \n </div>\n </div>\n </div>\n </section>\n <section class=\"modal-body sfx-p-30\" *ngIf=\"currentStep === 1\">\n <ng-container>\n <div class=\"toaster-alert-container-global\">\n <symphony-toaster-alert\n *ngIf=\"showSuccessToast\"\n [alertModel]=\"successToast\"\n (hideAlert)=\"onHideSuccessToast()\"\n ></symphony-toaster-alert>\n <symphony-toaster-alert\n *ngIf=\"showFailureToast\"\n [alertModel]=\"failureToast\"\n (hideAlert)=\"onHideFailureToast()\"\n ></symphony-toaster-alert>\n </div>\n <div *ngIf=\"isLoading\" class=\"sfx-mt-30 sfx-mb-30\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </div>\n <div *ngIf=\"hasError\" class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\">\n <symphony-paragraph text=\"We couldn't retrieve the candidate data. The information cannot be displayed at this time, please try again.\"></symphony-paragraph>\n </div>\n <div *ngIf=\"!isLoading && !hasError && (!model?.suggestions || model.suggestions.length === 0)\" class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\">\n <symphony-paragraph text=\"No more duplicates exist for this selected contact. Please try again later.\"></symphony-paragraph>\n </div>\n <div *ngIf=\"!isLoading && !hasError && !confirmSuggestion && model?.suggestions?.length\" class=\"row\">\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Selected Contact\"></symphony-h5> \n <div class=\"card-wrapper sfx-mt-20\">\n <div class=\"suggestion-card selected-contact-card\">\n <div class=\"card-header\">\n <div class=\"card-title sfx-font-bold\">\n {{ model.selectedContact.name }} [{{ model.selectedContact.id }}]\n </div>\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"model.selectedContact.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ model.selectedContact.email }}</span>\n </div>\n <div\n class=\"info-row\"\n *ngFor=\"let criterion of model.selectedContact.criteria\"\n >\n <symphony-icon\n *ngIf=\"criterion.iconClass\"\n [icon]=\"criterion.iconClass\"\n ></symphony-icon>\n <span>{{ criterion.value }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"model.selectedContact.atsId\">\n <span class=\"sfx-txt-gray sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ model.selectedContact.atsId }}</span>\n </div>\n </div>\n </div>\n </div> \n </div>\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 [text]=\"'Potential Duplicates (' + (model?.suggestions?.length || 0) + ')'\"></symphony-h5>\n <div class=\"scrollable-container card-wrapper\">\n <div\n *ngFor=\"let suggestion of model.suggestions; let i = index\"\n class=\"suggestion-card\"\n [ngClass]=\"{ selected: selected === suggestion }\"\n (click)=\"onSelect(suggestion)\"\n >\n <div class=\"card-header\">\n <symphony-input-radio\n [radioID]=\"suggestion.id\"\n [name]=\"'merge-suggestions'\"\n [isActive]=\"selected === suggestion\"\n (clicked)=\"onSelect(suggestion)\"\n ></symphony-input-radio> \n <div class=\"card-title sfx-font-bold\">\n {{ suggestion.name }} [{{ suggestion.id }}]\n </div>\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <symphony-grid-cell-clicked-open-new-tab\n [newTabUrl]=\"getContactUrl(suggestion.id)\"\n ></symphony-grid-cell-clicked-open-new-tab>\n <symphony-icon-wrapper\n class=\"not-duplicate-icon-global\"\n title=\"Mark not duplicate\"\n (clicked)=\"onNotDuplicate(suggestion)\"\n >\n <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n </symphony-icon-wrapper>\n </div>\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"suggestion.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ suggestion.email }}</span>\n </div>\n <div class=\"info-row\" *ngFor=\"let criterion of suggestion.criteria\">\n <symphony-icon\n *ngIf=\"criterion.iconClass\"\n [icon]=\"criterion.iconClass\"\n ></symphony-icon>\n <span>{{ criterion.value }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"suggestion.atsId\">\n <span class=\"sfx-txt-gray sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ suggestion.atsId }}</span>\n </div>\n </div>\n <div class=\"match-criteria\" *ngIf=\"suggestion.statuses?.length\"> \n <div class=\"criteria-list\">\n <div class=\"match-label\">Contact's share the same:</div>\n <symphony-paragraph\n *ngFor=\"let status of suggestion.statuses\"\n [text]=\"status + '.'\"\n ></symphony-paragraph>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"!isLoading && !hasError && confirmSuggestion\">\n <div class=\"row\">\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n <div class=\"card-wrapper sfx-mt-20\">\n <div class=\"suggestion-card selected-contact-card\">\n <div class=\"card-header\">\n <div class=\"card-title sfx-font-bold\">\n {{ model.selectedContact.name }} [{{ model.selectedContact.id }}]\n </div>\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"model.selectedContact.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ model.selectedContact.email }}</span>\n </div>\n <div\n class=\"info-row\"\n *ngFor=\"let criterion of model.selectedContact.criteria\"\n >\n <symphony-icon\n *ngIf=\"criterion.iconClass\"\n [icon]=\"criterion.iconClass\"\n ></symphony-icon>\n <span>{{ criterion.value }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"model.selectedContact.atsId\">\n <span class=\"sfx-txt-gray sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ model.selectedContact.atsId }}</span>\n </div>\n </div>\n </div>\n </div> \n </div>\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Selected Duplicate\"></symphony-h5>\n <div class=\"card-wrapper sfx-mt-20\">\n <div class=\"suggestion-card confirm-card\">\n <div class=\"card-header\">\n <div class=\"card-title sfx-font-bold\">\n {{ confirmSuggestion.name }} [{{ confirmSuggestion.id }}]\n </div>\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"confirmSuggestion.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ confirmSuggestion.email }}</span>\n </div>\n <div class=\"info-row\" *ngFor=\"let criterion of confirmSuggestion.criteria\">\n <symphony-icon\n *ngIf=\"criterion.iconClass\"\n [icon]=\"criterion.iconClass\"\n ></symphony-icon>\n <span>{{ criterion.value }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"confirmSuggestion.atsId\">\n <span class=\"sfx-txt-gray sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ confirmSuggestion.atsId }}</span>\n </div>\n </div>\n <div class=\"match-criteria\" *ngIf=\"confirmSuggestion.statuses?.length\">\n \n <div class=\"criteria-list\">\n <div class=\"match-label\">Contact's share the same:</div>\n <symphony-paragraph\n *ngFor=\"let status of confirmSuggestion.statuses\"\n [text]=\"status + '.'\"\n ></symphony-paragraph>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </section>\n <section *ngIf=\"currentStep === 2\" class=\"modal-body merge-contacts-body\">\n <ng-content></ng-content>\n </section>\n <section *ngIf=\"currentStep === 1\" class=\"modal-footer\">\n <ng-container *ngIf=\"!confirmSuggestion; else confirmActions\">\n <symphony-button-v2 text=\"Close\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n <symphony-button-v2 text=\"Next\" [disabled]=\"!selected || !!confirmSuggestion\" (clicked)=\"onNext()\"></symphony-button-v2>\n </ng-container>\n <ng-template #confirmActions>\n <div class=\"confirm-actions\">\n <symphony-button-v2\n text=\"Back\"\n [isSecondary]=\"true\"\n (clicked)=\"cancelNotDuplicate()\"\n ></symphony-button-v2>\n <symphony-button-v2\n text=\"Confirm\"\n (clicked)=\"confirmOnNotDuplicate()\"\n ></symphony-button-v2>\n </div>\n </ng-template>\n </section>\n</div>\n", styles: [".scrollable-container{max-height:500px;display:flex;flex-direction:column;overflow-y:auto;padding:20px 10px;gap:10px}.radio-item{display:flex;align-items:flex-start;gap:5px}.radio-label{display:flex;align-items:center;gap:1px}.radio-details{padding-left:24px}.radio-action{margin-left:auto;display:flex}.icon-upwards{margin-top:-1px!important;margin-bottom:auto}.modal-footer{display:flex;gap:10px;width:100%;justify-content:flex-end}.confirm-actions{display:flex;gap:10px}.suggestion-confirm{margin-top:38px}.pending-icon{margin-right:8px}.suggestion-card{border:1px solid #e4e7ef;border-radius:10px;padding:20px;background:#ffffff}.suggestion-card .card-header{display:flex;align-items:flex-start}.suggestion-card .card-title{flex:1;word-break:break-word}.suggestion-card .card-actions{margin-left:auto;display:flex;gap:10px}.suggestion-card .card-body{margin-top:15px;display:flex;flex-direction:column;gap:8px}.suggestion-card .info-row{display:flex;align-items:baseline;gap:8px;word-break:break-word}.suggestion-card .match-criteria{margin-top:10px}.suggestion-card .match-label{font-size:.875rem;font-weight:500}.suggestion-card .criteria-list{display:flex;flex-wrap:wrap;gap:5px}.sfx-modal.modal-container .modal-body.merge-contacts-body{padding:0}.sfx-modal.modal-container .modal-title .white-space-pre-line{white-space:pre-line}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ToasterAlertComponent, selector: "symphony-toaster-alert", inputs: ["alertModel", "showAlert"], outputs: ["hideAlert", "refreshClicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: InputRadioComponent, selector: "symphony-input-radio", inputs: ["isActive", "name", "label", "isRequired", "radioID"], outputs: ["clicked"] }, { type: GridCellClickedOpenNewTabComponent, selector: "symphony-grid-cell-clicked-open-new-tab", inputs: ["newTabUrl"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
5330
+ MergeContactsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: MergeContactsModalComponent, selector: "symphony-merge-contacts-modal", inputs: { model: "model", isLoading: "isLoading", hasError: "hasError", stepCopy: "stepCopy", confirmStepCopy: "confirmStepCopy", selected: "selected", confirmSuggestion: "confirmSuggestion", showSuccessToast: "showSuccessToast", showFailureToast: "showFailureToast", currentStep: "currentStep" }, outputs: { next: "next", cancel: "cancel", notDuplicate: "notDuplicate", selectionChange: "selectionChange", hideSuccessToast: "hideSuccessToast", hideFailureToast: "hideFailureToast", requestConfirmSuggestion: "requestConfirmSuggestion", requestCancelConfirmSuggestion: "requestCancelConfirmSuggestion" }, ngImport: i0, template: "<div class=\"sfx sfx-modal modal-container\" *ngIf=\"model\">\n <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n <div class=\"modal-title\">\n <div class=\"row\">\n <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n <ng-container *ngIf=\"getStepTitle(currentStep) as stepTitle\">\n <symphony-h4 [text]=\"stepTitle\"></symphony-h4>\n </ng-container> \n </div>\n <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n <symphony-icon\n class=\"pull-right\"\n [icon]=\"'si-close-modal'\"\n (clicked)=\"onCancel()\"\n ></symphony-icon>\n </div>\n <div\n class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\"\n [ngClass]=\"{'white-space-pre-line': currentStep === 2}\"\n *ngIf=\"getStepDescription(currentStep)\"\n >\n <ng-container *ngIf=\"getStepDescription(currentStep) as stepDescription\">\n <symphony-paragraph [text]=\"stepDescription\"></symphony-paragraph>\n </ng-container> \n </div>\n </div>\n </div>\n </section>\n <section class=\"modal-body sfx-p-30\" *ngIf=\"currentStep === 1\">\n <ng-container>\n <div class=\"toaster-alert-container-global\">\n <symphony-toaster-alert\n *ngIf=\"showSuccessToast\"\n [alertModel]=\"successToast\"\n (hideAlert)=\"onHideSuccessToast()\"\n ></symphony-toaster-alert>\n <symphony-toaster-alert\n *ngIf=\"showFailureToast\"\n [alertModel]=\"failureToast\"\n (hideAlert)=\"onHideFailureToast()\"\n ></symphony-toaster-alert>\n </div>\n <div *ngIf=\"isLoading\" class=\"sfx-mt-30 sfx-mb-30\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </div>\n <div *ngIf=\"hasError\" class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\">\n <symphony-paragraph text=\"We couldn't retrieve the candidate data. The information cannot be displayed at this time, please try again.\"></symphony-paragraph>\n </div>\n <div *ngIf=\"!isLoading && !hasError && (!model?.suggestions || model.suggestions.length === 0)\" class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\">\n <symphony-paragraph text=\"No more duplicates exist for this selected contact. Please try again later.\"></symphony-paragraph>\n </div>\n <div *ngIf=\"!isLoading && !hasError && !confirmSuggestion && model?.suggestions?.length\" class=\"row\">\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Selected Contact\"></symphony-h5> \n <div class=\"card-wrapper sfx-mt-20\">\n <div class=\"suggestion-card selected-contact-card\">\n <div class=\"card-header\">\n <div class=\"card-title sfx-font-bold\">\n {{ model.selectedContact.name }} [{{ model.selectedContact.id }}]\n </div>\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"model.selectedContact.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ model.selectedContact.email }}</span>\n </div>\n <div\n class=\"info-row\"\n *ngFor=\"let criterion of model.selectedContact.criteria\"\n >\n <symphony-icon\n *ngIf=\"criterion.iconClass\"\n [icon]=\"criterion.iconClass\"\n ></symphony-icon>\n <span>{{ criterion.value }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"model.selectedContact.atsId\">\n <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ model.selectedContact.atsId }}</span>\n </div>\n </div>\n </div>\n </div> \n </div>\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 [text]=\"'Potential Duplicates (' + (model?.suggestions?.length || 0) + ')'\"></symphony-h5>\n <div class=\"scrollable-container card-wrapper\">\n <div\n *ngFor=\"let suggestion of model.suggestions; let i = index\"\n class=\"suggestion-card\"\n [ngClass]=\"{ selected: selected === suggestion }\"\n (click)=\"onSelect(suggestion)\"\n >\n <div class=\"card-header\">\n <symphony-input-radio\n [radioID]=\"suggestion.id\"\n [name]=\"'merge-suggestions'\"\n [isActive]=\"selected === suggestion\"\n (clicked)=\"onSelect(suggestion)\"\n ></symphony-input-radio> \n <div class=\"card-title sfx-font-bold\">\n {{ suggestion.name }} [{{ suggestion.id }}]\n </div>\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <symphony-grid-cell-clicked-open-new-tab\n [newTabUrl]=\"getContactUrl(suggestion.id)\"\n ></symphony-grid-cell-clicked-open-new-tab>\n <symphony-icon-wrapper\n class=\"not-duplicate-icon-global\"\n title=\"Mark not duplicate\"\n (clicked)=\"onNotDuplicate(suggestion)\"\n >\n <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n </symphony-icon-wrapper>\n </div>\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"suggestion.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ suggestion.email }}</span>\n </div>\n <div class=\"info-row\" *ngFor=\"let criterion of suggestion.criteria\">\n <symphony-icon\n *ngIf=\"criterion.iconClass\"\n [icon]=\"criterion.iconClass\"\n ></symphony-icon>\n <span>{{ criterion.value }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"suggestion.atsId\">\n <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ suggestion.atsId }}</span>\n </div>\n </div>\n <div class=\"match-criteria\" *ngIf=\"suggestion.statuses?.length\"> \n <div class=\"criteria-list\">\n <div class=\"match-label\">Contacts share the same:</div>\n <symphony-paragraph\n *ngFor=\"let status of suggestion.statuses\"\n [text]=\"status\"\n ></symphony-paragraph>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"!isLoading && !hasError && confirmSuggestion\">\n <div class=\"row\">\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n <div class=\"card-wrapper sfx-mt-20\">\n <div class=\"suggestion-card selected-contact-card\">\n <div class=\"card-header\">\n <div class=\"card-title sfx-font-bold\">\n {{ model.selectedContact.name }} [{{ model.selectedContact.id }}]\n </div>\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"model.selectedContact.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ model.selectedContact.email }}</span>\n </div>\n <div\n class=\"info-row\"\n *ngFor=\"let criterion of model.selectedContact.criteria\"\n >\n <symphony-icon\n *ngIf=\"criterion.iconClass\"\n [icon]=\"criterion.iconClass\"\n ></symphony-icon>\n <span>{{ criterion.value }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"model.selectedContact.atsId\">\n <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ model.selectedContact.atsId }}</span>\n </div>\n </div>\n </div>\n </div> \n </div>\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Selected Duplicate\"></symphony-h5>\n <div class=\"card-wrapper sfx-mt-20\">\n <div class=\"suggestion-card confirm-card\">\n <div class=\"card-header\">\n <div class=\"card-title sfx-font-bold\">\n {{ confirmSuggestion.name }} [{{ confirmSuggestion.id }}]\n </div>\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"confirmSuggestion.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ confirmSuggestion.email }}</span>\n </div>\n <div class=\"info-row\" *ngFor=\"let criterion of confirmSuggestion.criteria\">\n <symphony-icon\n *ngIf=\"criterion.iconClass\"\n [icon]=\"criterion.iconClass\"\n ></symphony-icon>\n <span>{{ criterion.value }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"confirmSuggestion.atsId\">\n <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ confirmSuggestion.atsId }}</span>\n </div>\n </div>\n <div class=\"match-criteria\" *ngIf=\"confirmSuggestion.statuses?.length\">\n \n <div class=\"criteria-list\">\n <div class=\"match-label\">Contacts share the same:</div>\n <symphony-paragraph\n *ngFor=\"let status of confirmSuggestion.statuses\"\n [text]=\"status\"\n ></symphony-paragraph>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </section>\n <section *ngIf=\"currentStep === 2\" class=\"modal-body merge-contacts-body\">\n <ng-content></ng-content>\n </section>\n <section *ngIf=\"currentStep === 1\" class=\"modal-footer\">\n <ng-container *ngIf=\"!confirmSuggestion; else confirmActions\">\n <symphony-button-v2 text=\"Close\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n <symphony-button-v2 text=\"Next\" [disabled]=\"!selected || !!confirmSuggestion\" (clicked)=\"onNext()\"></symphony-button-v2>\n </ng-container>\n <ng-template #confirmActions>\n <div class=\"confirm-actions\">\n <symphony-button-v2\n text=\"Back\"\n [isSecondary]=\"true\"\n (clicked)=\"cancelNotDuplicate()\"\n ></symphony-button-v2>\n <symphony-button-v2\n text=\"Confirm\"\n (clicked)=\"confirmOnNotDuplicate()\"\n ></symphony-button-v2>\n </div>\n </ng-template>\n </section>\n</div>\n", styles: [".scrollable-container{max-height:500px;display:flex;flex-direction:column;overflow-y:auto;padding:20px 10px;gap:10px}.radio-item{display:flex;align-items:flex-start;gap:5px}.radio-label{display:flex;align-items:center;gap:1px}.radio-details{padding-left:24px}.radio-action{margin-left:auto;display:flex}.icon-upwards{margin-top:-1px!important;margin-bottom:auto}.modal-footer{display:flex;gap:10px;width:100%;justify-content:flex-end}.confirm-actions{display:flex;gap:10px}.suggestion-confirm{margin-top:38px}.pending-icon{margin-right:8px}.suggestion-card{border:1px solid #e4e7ef;border-radius:10px;padding:20px;background:#ffffff}.suggestion-card .card-header{display:flex;align-items:flex-start}.suggestion-card .card-title{flex:1;word-break:break-word}.suggestion-card .card-actions{margin-left:auto;display:flex;gap:10px}.suggestion-card .card-body{margin-top:15px;display:flex;flex-direction:column;gap:8px}.suggestion-card .info-row{display:flex;align-items:baseline;gap:8px;word-break:break-word}.suggestion-card .match-criteria{margin-top:10px}.suggestion-card .match-label{font-size:.875rem;font-weight:500}.suggestion-card .criteria-list{display:flex;flex-wrap:wrap;gap:5px}.sfx-modal.modal-container .modal-body.merge-contacts-body{padding:0}.sfx-modal.modal-container .modal-title .white-space-pre-line{white-space:pre-line}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ToasterAlertComponent, selector: "symphony-toaster-alert", inputs: ["alertModel", "showAlert"], outputs: ["hideAlert", "refreshClicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: InputRadioComponent, selector: "symphony-input-radio", inputs: ["isActive", "name", "label", "isRequired", "radioID"], outputs: ["clicked"] }, { type: GridCellClickedOpenNewTabComponent, selector: "symphony-grid-cell-clicked-open-new-tab", inputs: ["newTabUrl"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
5331
5331
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MergeContactsModalComponent, decorators: [{
5332
5332
  type: Component,
5333
- args: [{ selector: 'symphony-merge-contacts-modal', template: "<div class=\"sfx sfx-modal modal-container\" *ngIf=\"model\">\n <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n <div class=\"modal-title\">\n <div class=\"row\">\n <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n <ng-container *ngIf=\"getStepTitle(currentStep) as stepTitle\">\n <symphony-h4 [text]=\"stepTitle\"></symphony-h4>\n </ng-container> \n </div>\n <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n <symphony-icon\n class=\"pull-right\"\n [icon]=\"'si-close-modal'\"\n (clicked)=\"onCancel()\"\n ></symphony-icon>\n </div>\n <div\n class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\"\n [ngClass]=\"{'white-space-pre-line': currentStep === 2}\"\n *ngIf=\"getStepDescription(currentStep)\"\n >\n <ng-container *ngIf=\"getStepDescription(currentStep) as stepDescription\">\n <symphony-paragraph [text]=\"stepDescription\"></symphony-paragraph>\n </ng-container> \n </div>\n </div>\n </div>\n </section>\n <section class=\"modal-body sfx-p-30\" *ngIf=\"currentStep === 1\">\n <ng-container>\n <div class=\"toaster-alert-container-global\">\n <symphony-toaster-alert\n *ngIf=\"showSuccessToast\"\n [alertModel]=\"successToast\"\n (hideAlert)=\"onHideSuccessToast()\"\n ></symphony-toaster-alert>\n <symphony-toaster-alert\n *ngIf=\"showFailureToast\"\n [alertModel]=\"failureToast\"\n (hideAlert)=\"onHideFailureToast()\"\n ></symphony-toaster-alert>\n </div>\n <div *ngIf=\"isLoading\" class=\"sfx-mt-30 sfx-mb-30\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </div>\n <div *ngIf=\"hasError\" class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\">\n <symphony-paragraph text=\"We couldn't retrieve the candidate data. The information cannot be displayed at this time, please try again.\"></symphony-paragraph>\n </div>\n <div *ngIf=\"!isLoading && !hasError && (!model?.suggestions || model.suggestions.length === 0)\" class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\">\n <symphony-paragraph text=\"No more duplicates exist for this selected contact. Please try again later.\"></symphony-paragraph>\n </div>\n <div *ngIf=\"!isLoading && !hasError && !confirmSuggestion && model?.suggestions?.length\" class=\"row\">\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Selected Contact\"></symphony-h5> \n <div class=\"card-wrapper sfx-mt-20\">\n <div class=\"suggestion-card selected-contact-card\">\n <div class=\"card-header\">\n <div class=\"card-title sfx-font-bold\">\n {{ model.selectedContact.name }} [{{ model.selectedContact.id }}]\n </div>\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"model.selectedContact.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ model.selectedContact.email }}</span>\n </div>\n <div\n class=\"info-row\"\n *ngFor=\"let criterion of model.selectedContact.criteria\"\n >\n <symphony-icon\n *ngIf=\"criterion.iconClass\"\n [icon]=\"criterion.iconClass\"\n ></symphony-icon>\n <span>{{ criterion.value }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"model.selectedContact.atsId\">\n <span class=\"sfx-txt-gray sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ model.selectedContact.atsId }}</span>\n </div>\n </div>\n </div>\n </div> \n </div>\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 [text]=\"'Potential Duplicates (' + (model?.suggestions?.length || 0) + ')'\"></symphony-h5>\n <div class=\"scrollable-container card-wrapper\">\n <div\n *ngFor=\"let suggestion of model.suggestions; let i = index\"\n class=\"suggestion-card\"\n [ngClass]=\"{ selected: selected === suggestion }\"\n (click)=\"onSelect(suggestion)\"\n >\n <div class=\"card-header\">\n <symphony-input-radio\n [radioID]=\"suggestion.id\"\n [name]=\"'merge-suggestions'\"\n [isActive]=\"selected === suggestion\"\n (clicked)=\"onSelect(suggestion)\"\n ></symphony-input-radio> \n <div class=\"card-title sfx-font-bold\">\n {{ suggestion.name }} [{{ suggestion.id }}]\n </div>\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <symphony-grid-cell-clicked-open-new-tab\n [newTabUrl]=\"getContactUrl(suggestion.id)\"\n ></symphony-grid-cell-clicked-open-new-tab>\n <symphony-icon-wrapper\n class=\"not-duplicate-icon-global\"\n title=\"Mark not duplicate\"\n (clicked)=\"onNotDuplicate(suggestion)\"\n >\n <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n </symphony-icon-wrapper>\n </div>\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"suggestion.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ suggestion.email }}</span>\n </div>\n <div class=\"info-row\" *ngFor=\"let criterion of suggestion.criteria\">\n <symphony-icon\n *ngIf=\"criterion.iconClass\"\n [icon]=\"criterion.iconClass\"\n ></symphony-icon>\n <span>{{ criterion.value }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"suggestion.atsId\">\n <span class=\"sfx-txt-gray sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ suggestion.atsId }}</span>\n </div>\n </div>\n <div class=\"match-criteria\" *ngIf=\"suggestion.statuses?.length\"> \n <div class=\"criteria-list\">\n <div class=\"match-label\">Contact's share the same:</div>\n <symphony-paragraph\n *ngFor=\"let status of suggestion.statuses\"\n [text]=\"status + '.'\"\n ></symphony-paragraph>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"!isLoading && !hasError && confirmSuggestion\">\n <div class=\"row\">\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n <div class=\"card-wrapper sfx-mt-20\">\n <div class=\"suggestion-card selected-contact-card\">\n <div class=\"card-header\">\n <div class=\"card-title sfx-font-bold\">\n {{ model.selectedContact.name }} [{{ model.selectedContact.id }}]\n </div>\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"model.selectedContact.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ model.selectedContact.email }}</span>\n </div>\n <div\n class=\"info-row\"\n *ngFor=\"let criterion of model.selectedContact.criteria\"\n >\n <symphony-icon\n *ngIf=\"criterion.iconClass\"\n [icon]=\"criterion.iconClass\"\n ></symphony-icon>\n <span>{{ criterion.value }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"model.selectedContact.atsId\">\n <span class=\"sfx-txt-gray sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ model.selectedContact.atsId }}</span>\n </div>\n </div>\n </div>\n </div> \n </div>\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Selected Duplicate\"></symphony-h5>\n <div class=\"card-wrapper sfx-mt-20\">\n <div class=\"suggestion-card confirm-card\">\n <div class=\"card-header\">\n <div class=\"card-title sfx-font-bold\">\n {{ confirmSuggestion.name }} [{{ confirmSuggestion.id }}]\n </div>\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"confirmSuggestion.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ confirmSuggestion.email }}</span>\n </div>\n <div class=\"info-row\" *ngFor=\"let criterion of confirmSuggestion.criteria\">\n <symphony-icon\n *ngIf=\"criterion.iconClass\"\n [icon]=\"criterion.iconClass\"\n ></symphony-icon>\n <span>{{ criterion.value }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"confirmSuggestion.atsId\">\n <span class=\"sfx-txt-gray sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ confirmSuggestion.atsId }}</span>\n </div>\n </div>\n <div class=\"match-criteria\" *ngIf=\"confirmSuggestion.statuses?.length\">\n \n <div class=\"criteria-list\">\n <div class=\"match-label\">Contact's share the same:</div>\n <symphony-paragraph\n *ngFor=\"let status of confirmSuggestion.statuses\"\n [text]=\"status + '.'\"\n ></symphony-paragraph>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </section>\n <section *ngIf=\"currentStep === 2\" class=\"modal-body merge-contacts-body\">\n <ng-content></ng-content>\n </section>\n <section *ngIf=\"currentStep === 1\" class=\"modal-footer\">\n <ng-container *ngIf=\"!confirmSuggestion; else confirmActions\">\n <symphony-button-v2 text=\"Close\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n <symphony-button-v2 text=\"Next\" [disabled]=\"!selected || !!confirmSuggestion\" (clicked)=\"onNext()\"></symphony-button-v2>\n </ng-container>\n <ng-template #confirmActions>\n <div class=\"confirm-actions\">\n <symphony-button-v2\n text=\"Back\"\n [isSecondary]=\"true\"\n (clicked)=\"cancelNotDuplicate()\"\n ></symphony-button-v2>\n <symphony-button-v2\n text=\"Confirm\"\n (clicked)=\"confirmOnNotDuplicate()\"\n ></symphony-button-v2>\n </div>\n </ng-template>\n </section>\n</div>\n", styles: [".scrollable-container{max-height:500px;display:flex;flex-direction:column;overflow-y:auto;padding:20px 10px;gap:10px}.radio-item{display:flex;align-items:flex-start;gap:5px}.radio-label{display:flex;align-items:center;gap:1px}.radio-details{padding-left:24px}.radio-action{margin-left:auto;display:flex}.icon-upwards{margin-top:-1px!important;margin-bottom:auto}.modal-footer{display:flex;gap:10px;width:100%;justify-content:flex-end}.confirm-actions{display:flex;gap:10px}.suggestion-confirm{margin-top:38px}.pending-icon{margin-right:8px}.suggestion-card{border:1px solid #e4e7ef;border-radius:10px;padding:20px;background:#ffffff}.suggestion-card .card-header{display:flex;align-items:flex-start}.suggestion-card .card-title{flex:1;word-break:break-word}.suggestion-card .card-actions{margin-left:auto;display:flex;gap:10px}.suggestion-card .card-body{margin-top:15px;display:flex;flex-direction:column;gap:8px}.suggestion-card .info-row{display:flex;align-items:baseline;gap:8px;word-break:break-word}.suggestion-card .match-criteria{margin-top:10px}.suggestion-card .match-label{font-size:.875rem;font-weight:500}.suggestion-card .criteria-list{display:flex;flex-wrap:wrap;gap:5px}.sfx-modal.modal-container .modal-body.merge-contacts-body{padding:0}.sfx-modal.modal-container .modal-title .white-space-pre-line{white-space:pre-line}\n"] }]
5333
+ args: [{ selector: 'symphony-merge-contacts-modal', template: "<div class=\"sfx sfx-modal modal-container\" *ngIf=\"model\">\n <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n <div class=\"modal-title\">\n <div class=\"row\">\n <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n <ng-container *ngIf=\"getStepTitle(currentStep) as stepTitle\">\n <symphony-h4 [text]=\"stepTitle\"></symphony-h4>\n </ng-container> \n </div>\n <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n <symphony-icon\n class=\"pull-right\"\n [icon]=\"'si-close-modal'\"\n (clicked)=\"onCancel()\"\n ></symphony-icon>\n </div>\n <div\n class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\"\n [ngClass]=\"{'white-space-pre-line': currentStep === 2}\"\n *ngIf=\"getStepDescription(currentStep)\"\n >\n <ng-container *ngIf=\"getStepDescription(currentStep) as stepDescription\">\n <symphony-paragraph [text]=\"stepDescription\"></symphony-paragraph>\n </ng-container> \n </div>\n </div>\n </div>\n </section>\n <section class=\"modal-body sfx-p-30\" *ngIf=\"currentStep === 1\">\n <ng-container>\n <div class=\"toaster-alert-container-global\">\n <symphony-toaster-alert\n *ngIf=\"showSuccessToast\"\n [alertModel]=\"successToast\"\n (hideAlert)=\"onHideSuccessToast()\"\n ></symphony-toaster-alert>\n <symphony-toaster-alert\n *ngIf=\"showFailureToast\"\n [alertModel]=\"failureToast\"\n (hideAlert)=\"onHideFailureToast()\"\n ></symphony-toaster-alert>\n </div>\n <div *ngIf=\"isLoading\" class=\"sfx-mt-30 sfx-mb-30\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </div>\n <div *ngIf=\"hasError\" class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\">\n <symphony-paragraph text=\"We couldn't retrieve the candidate data. The information cannot be displayed at this time, please try again.\"></symphony-paragraph>\n </div>\n <div *ngIf=\"!isLoading && !hasError && (!model?.suggestions || model.suggestions.length === 0)\" class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\">\n <symphony-paragraph text=\"No more duplicates exist for this selected contact. Please try again later.\"></symphony-paragraph>\n </div>\n <div *ngIf=\"!isLoading && !hasError && !confirmSuggestion && model?.suggestions?.length\" class=\"row\">\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Selected Contact\"></symphony-h5> \n <div class=\"card-wrapper sfx-mt-20\">\n <div class=\"suggestion-card selected-contact-card\">\n <div class=\"card-header\">\n <div class=\"card-title sfx-font-bold\">\n {{ model.selectedContact.name }} [{{ model.selectedContact.id }}]\n </div>\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"model.selectedContact.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ model.selectedContact.email }}</span>\n </div>\n <div\n class=\"info-row\"\n *ngFor=\"let criterion of model.selectedContact.criteria\"\n >\n <symphony-icon\n *ngIf=\"criterion.iconClass\"\n [icon]=\"criterion.iconClass\"\n ></symphony-icon>\n <span>{{ criterion.value }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"model.selectedContact.atsId\">\n <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ model.selectedContact.atsId }}</span>\n </div>\n </div>\n </div>\n </div> \n </div>\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 [text]=\"'Potential Duplicates (' + (model?.suggestions?.length || 0) + ')'\"></symphony-h5>\n <div class=\"scrollable-container card-wrapper\">\n <div\n *ngFor=\"let suggestion of model.suggestions; let i = index\"\n class=\"suggestion-card\"\n [ngClass]=\"{ selected: selected === suggestion }\"\n (click)=\"onSelect(suggestion)\"\n >\n <div class=\"card-header\">\n <symphony-input-radio\n [radioID]=\"suggestion.id\"\n [name]=\"'merge-suggestions'\"\n [isActive]=\"selected === suggestion\"\n (clicked)=\"onSelect(suggestion)\"\n ></symphony-input-radio> \n <div class=\"card-title sfx-font-bold\">\n {{ suggestion.name }} [{{ suggestion.id }}]\n </div>\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <symphony-grid-cell-clicked-open-new-tab\n [newTabUrl]=\"getContactUrl(suggestion.id)\"\n ></symphony-grid-cell-clicked-open-new-tab>\n <symphony-icon-wrapper\n class=\"not-duplicate-icon-global\"\n title=\"Mark not duplicate\"\n (clicked)=\"onNotDuplicate(suggestion)\"\n >\n <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n </symphony-icon-wrapper>\n </div>\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"suggestion.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ suggestion.email }}</span>\n </div>\n <div class=\"info-row\" *ngFor=\"let criterion of suggestion.criteria\">\n <symphony-icon\n *ngIf=\"criterion.iconClass\"\n [icon]=\"criterion.iconClass\"\n ></symphony-icon>\n <span>{{ criterion.value }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"suggestion.atsId\">\n <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ suggestion.atsId }}</span>\n </div>\n </div>\n <div class=\"match-criteria\" *ngIf=\"suggestion.statuses?.length\"> \n <div class=\"criteria-list\">\n <div class=\"match-label\">Contacts share the same:</div>\n <symphony-paragraph\n *ngFor=\"let status of suggestion.statuses\"\n [text]=\"status\"\n ></symphony-paragraph>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"!isLoading && !hasError && confirmSuggestion\">\n <div class=\"row\">\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n <div class=\"card-wrapper sfx-mt-20\">\n <div class=\"suggestion-card selected-contact-card\">\n <div class=\"card-header\">\n <div class=\"card-title sfx-font-bold\">\n {{ model.selectedContact.name }} [{{ model.selectedContact.id }}]\n </div>\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"model.selectedContact.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ model.selectedContact.email }}</span>\n </div>\n <div\n class=\"info-row\"\n *ngFor=\"let criterion of model.selectedContact.criteria\"\n >\n <symphony-icon\n *ngIf=\"criterion.iconClass\"\n [icon]=\"criterion.iconClass\"\n ></symphony-icon>\n <span>{{ criterion.value }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"model.selectedContact.atsId\">\n <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ model.selectedContact.atsId }}</span>\n </div>\n </div>\n </div>\n </div> \n </div>\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Selected Duplicate\"></symphony-h5>\n <div class=\"card-wrapper sfx-mt-20\">\n <div class=\"suggestion-card confirm-card\">\n <div class=\"card-header\">\n <div class=\"card-title sfx-font-bold\">\n {{ confirmSuggestion.name }} [{{ confirmSuggestion.id }}]\n </div>\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"confirmSuggestion.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ confirmSuggestion.email }}</span>\n </div>\n <div class=\"info-row\" *ngFor=\"let criterion of confirmSuggestion.criteria\">\n <symphony-icon\n *ngIf=\"criterion.iconClass\"\n [icon]=\"criterion.iconClass\"\n ></symphony-icon>\n <span>{{ criterion.value }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"confirmSuggestion.atsId\">\n <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ confirmSuggestion.atsId }}</span>\n </div>\n </div>\n <div class=\"match-criteria\" *ngIf=\"confirmSuggestion.statuses?.length\">\n \n <div class=\"criteria-list\">\n <div class=\"match-label\">Contacts share the same:</div>\n <symphony-paragraph\n *ngFor=\"let status of confirmSuggestion.statuses\"\n [text]=\"status\"\n ></symphony-paragraph>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </section>\n <section *ngIf=\"currentStep === 2\" class=\"modal-body merge-contacts-body\">\n <ng-content></ng-content>\n </section>\n <section *ngIf=\"currentStep === 1\" class=\"modal-footer\">\n <ng-container *ngIf=\"!confirmSuggestion; else confirmActions\">\n <symphony-button-v2 text=\"Close\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n <symphony-button-v2 text=\"Next\" [disabled]=\"!selected || !!confirmSuggestion\" (clicked)=\"onNext()\"></symphony-button-v2>\n </ng-container>\n <ng-template #confirmActions>\n <div class=\"confirm-actions\">\n <symphony-button-v2\n text=\"Back\"\n [isSecondary]=\"true\"\n (clicked)=\"cancelNotDuplicate()\"\n ></symphony-button-v2>\n <symphony-button-v2\n text=\"Confirm\"\n (clicked)=\"confirmOnNotDuplicate()\"\n ></symphony-button-v2>\n </div>\n </ng-template>\n </section>\n</div>\n", styles: [".scrollable-container{max-height:500px;display:flex;flex-direction:column;overflow-y:auto;padding:20px 10px;gap:10px}.radio-item{display:flex;align-items:flex-start;gap:5px}.radio-label{display:flex;align-items:center;gap:1px}.radio-details{padding-left:24px}.radio-action{margin-left:auto;display:flex}.icon-upwards{margin-top:-1px!important;margin-bottom:auto}.modal-footer{display:flex;gap:10px;width:100%;justify-content:flex-end}.confirm-actions{display:flex;gap:10px}.suggestion-confirm{margin-top:38px}.pending-icon{margin-right:8px}.suggestion-card{border:1px solid #e4e7ef;border-radius:10px;padding:20px;background:#ffffff}.suggestion-card .card-header{display:flex;align-items:flex-start}.suggestion-card .card-title{flex:1;word-break:break-word}.suggestion-card .card-actions{margin-left:auto;display:flex;gap:10px}.suggestion-card .card-body{margin-top:15px;display:flex;flex-direction:column;gap:8px}.suggestion-card .info-row{display:flex;align-items:baseline;gap:8px;word-break:break-word}.suggestion-card .match-criteria{margin-top:10px}.suggestion-card .match-label{font-size:.875rem;font-weight:500}.suggestion-card .criteria-list{display:flex;flex-wrap:wrap;gap:5px}.sfx-modal.modal-container .modal-body.merge-contacts-body{padding:0}.sfx-modal.modal-container .modal-title .white-space-pre-line{white-space:pre-line}\n"] }]
5334
5334
  }], ctorParameters: function () { return []; }, propDecorators: { model: [{
5335
5335
  type: Input
5336
5336
  }], isLoading: [{