@symphony-talent/component-library 4.209.0 → 4.210.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.
- package/esm2020/lib/organisms/merge-contacts-modal/merge-contacts-modal.component.mjs +3 -3
- package/esm2020/projects/component-library/lib/organisms/merge-contacts-modal/merge-contacts-modal.component.mjs +3 -3
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs +2 -2
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2015/symphony-talent-component-library.mjs +2 -2
- package/fesm2015/symphony-talent-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs +2 -2
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library.mjs +2 -2
- package/fesm2020/symphony-talent-component-library.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -5318,10 +5318,10 @@ class MergeContactsModalComponent {
|
|
|
5318
5318
|
}
|
|
5319
5319
|
}
|
|
5320
5320
|
MergeContactsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MergeContactsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5321
|
-
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", matchLabelForSuggestions: "matchLabelForSuggestions", matchLabelForAtsGroups: "matchLabelForAtsGroups", matchLabelForConfirmSuggestion: "matchLabelForConfirmSuggestion", atsGroupNotificationText: "atsGroupNotificationText" }, 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 sfx-mt-20\">\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\">{{ matchLabelForSuggestions }}</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 class=\"ats-group-wrapper sfx-mt-20\" *ngIf=\"model.atsGroups?.length\">\n <symphony-h5 [text]=\"'ATS Group (' + (model?.atsGroups?.length || 0) + ')'\"></symphony-h5>\n <div class=\"sfx-mt-10\">\n <symphony-paragraph [text]=\"atsGroupNotificationText\"></symphony-paragraph>\n </div> \n <div class=\"scrollable-container card-wrapper sfx-mt-20\">\n <div\n *ngFor=\"let atsGroup of model.atsGroups; let i = index\"\n class=\"suggestion-card\"\n >\n <div class=\"card-overlay\"></div>\n <div class=\"card-header\"> \n <div class=\"card-title sfx-font-bold\">\n {{ atsGroup.suggestion.name }} [{{ atsGroup.suggestion.id }}]\n </div>\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <symphony-grid-cell-clicked-open-new-tab\n [newTabUrl]=\"getContactUrl(atsGroup.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(atsGroup.suggestion)\"\n >\n <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n </symphony-icon-wrapper>\n </div>\n\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"atsGroup.suggestion.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ atsGroup.suggestion.email }}</span>\n </div>\n <div class=\"info-row\" *ngFor=\"let criterion of atsGroup.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=\"atsGroup.suggestion.atsId\">\n <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ atsGroup.suggestion.atsId }}</span>\n </div>\n </div>\n <div class=\"match-criteria\" *ngIf=\"atsGroup.suggestion.statuses?.length\"> \n <div class=\"criteria-list\">\n <div class=\"match-label\">{{ matchLabelForAtsGroups }}</div>\n <symphony-paragraph\n *ngFor=\"let status of atsGroup.suggestion.statuses\"\n [text]=\"status\"\n ></symphony-paragraph>\n </div>\n </div>\n </div>\n </div>\n\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\">{{ matchLabelForConfirmSuggestion }}</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:0 10px 20px 0;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}.ats-group-wrapper .suggestion-card{position:relative}.ats-group-wrapper .suggestion-card .card-overlay:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.6);border-radius:10px;z-index:1}.ats-group-wrapper .suggestion-card .card-header .card-actions{z-index:2}\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"] }] });
|
|
5321
|
+
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", matchLabelForSuggestions: "matchLabelForSuggestions", matchLabelForAtsGroups: "matchLabelForAtsGroups", matchLabelForConfirmSuggestion: "matchLabelForConfirmSuggestion", atsGroupNotificationText: "atsGroupNotificationText" }, 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) && (!model?.atsGroups || model.atsGroups.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 || model?.atsGroups?.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 <div *ngIf=\"model.suggestions?.length\" class=\"sfx-mb-20\">\n <symphony-h5 [text]=\"'Potential Duplicates (' + (model?.suggestions?.length || 0) + ')'\"></symphony-h5>\n <div class=\"scrollable-container card-wrapper sfx-mt-20\">\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\">{{ matchLabelForSuggestions }}</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 class=\"ats-group-wrapper\" *ngIf=\"model.atsGroups?.length\">\n <symphony-h5 [text]=\"'ATS Group (' + (model?.atsGroups?.length || 0) + ')'\"></symphony-h5>\n <div class=\"sfx-mt-10\">\n <symphony-paragraph [text]=\"atsGroupNotificationText\"></symphony-paragraph>\n </div> \n <div class=\"scrollable-container card-wrapper sfx-mt-20\">\n <div\n *ngFor=\"let atsGroup of model.atsGroups; let i = index\"\n class=\"suggestion-card\"\n >\n <div class=\"card-overlay\"></div>\n <div class=\"card-header\"> \n <div class=\"card-title sfx-font-bold\">\n {{ atsGroup.suggestion.name }} [{{ atsGroup.suggestion.id }}]\n </div>\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <symphony-grid-cell-clicked-open-new-tab\n [newTabUrl]=\"getContactUrl(atsGroup.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(atsGroup.suggestion)\"\n >\n <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n </symphony-icon-wrapper>\n </div>\n\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"atsGroup.suggestion.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ atsGroup.suggestion.email }}</span>\n </div>\n <div class=\"info-row\" *ngFor=\"let criterion of atsGroup.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=\"atsGroup.suggestion.atsId\">\n <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ atsGroup.suggestion.atsId }}</span>\n </div>\n </div>\n <div class=\"match-criteria\" *ngIf=\"atsGroup.suggestion.statuses?.length\"> \n <div class=\"criteria-list\">\n <div class=\"match-label\">{{ matchLabelForAtsGroups }}</div>\n <symphony-paragraph\n *ngFor=\"let status of atsGroup.suggestion.statuses\"\n [text]=\"status\"\n ></symphony-paragraph>\n </div>\n </div>\n </div>\n </div>\n\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\">{{ matchLabelForConfirmSuggestion }}</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:0 10px 20px 0;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}.ats-group-wrapper .suggestion-card{position:relative}.ats-group-wrapper .suggestion-card .card-overlay:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.6);border-radius:10px;z-index:1}.ats-group-wrapper .suggestion-card .card-header .card-actions{z-index:2}\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"] }] });
|
|
5322
5322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MergeContactsModalComponent, decorators: [{
|
|
5323
5323
|
type: Component,
|
|
5324
|
-
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 sfx-mt-20\">\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\">{{ matchLabelForSuggestions }}</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 class=\"ats-group-wrapper sfx-mt-20\" *ngIf=\"model.atsGroups?.length\">\n <symphony-h5 [text]=\"'ATS Group (' + (model?.atsGroups?.length || 0) + ')'\"></symphony-h5>\n <div class=\"sfx-mt-10\">\n <symphony-paragraph [text]=\"atsGroupNotificationText\"></symphony-paragraph>\n </div> \n <div class=\"scrollable-container card-wrapper sfx-mt-20\">\n <div\n *ngFor=\"let atsGroup of model.atsGroups; let i = index\"\n class=\"suggestion-card\"\n >\n <div class=\"card-overlay\"></div>\n <div class=\"card-header\"> \n <div class=\"card-title sfx-font-bold\">\n {{ atsGroup.suggestion.name }} [{{ atsGroup.suggestion.id }}]\n </div>\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <symphony-grid-cell-clicked-open-new-tab\n [newTabUrl]=\"getContactUrl(atsGroup.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(atsGroup.suggestion)\"\n >\n <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n </symphony-icon-wrapper>\n </div>\n\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"atsGroup.suggestion.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ atsGroup.suggestion.email }}</span>\n </div>\n <div class=\"info-row\" *ngFor=\"let criterion of atsGroup.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=\"atsGroup.suggestion.atsId\">\n <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ atsGroup.suggestion.atsId }}</span>\n </div>\n </div>\n <div class=\"match-criteria\" *ngIf=\"atsGroup.suggestion.statuses?.length\"> \n <div class=\"criteria-list\">\n <div class=\"match-label\">{{ matchLabelForAtsGroups }}</div>\n <symphony-paragraph\n *ngFor=\"let status of atsGroup.suggestion.statuses\"\n [text]=\"status\"\n ></symphony-paragraph>\n </div>\n </div>\n </div>\n </div>\n\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\">{{ matchLabelForConfirmSuggestion }}</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:0 10px 20px 0;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}.ats-group-wrapper .suggestion-card{position:relative}.ats-group-wrapper .suggestion-card .card-overlay:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.6);border-radius:10px;z-index:1}.ats-group-wrapper .suggestion-card .card-header .card-actions{z-index:2}\n"] }]
|
|
5324
|
+
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) && (!model?.atsGroups || model.atsGroups.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 || model?.atsGroups?.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 <div *ngIf=\"model.suggestions?.length\" class=\"sfx-mb-20\">\n <symphony-h5 [text]=\"'Potential Duplicates (' + (model?.suggestions?.length || 0) + ')'\"></symphony-h5>\n <div class=\"scrollable-container card-wrapper sfx-mt-20\">\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\">{{ matchLabelForSuggestions }}</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 class=\"ats-group-wrapper\" *ngIf=\"model.atsGroups?.length\">\n <symphony-h5 [text]=\"'ATS Group (' + (model?.atsGroups?.length || 0) + ')'\"></symphony-h5>\n <div class=\"sfx-mt-10\">\n <symphony-paragraph [text]=\"atsGroupNotificationText\"></symphony-paragraph>\n </div> \n <div class=\"scrollable-container card-wrapper sfx-mt-20\">\n <div\n *ngFor=\"let atsGroup of model.atsGroups; let i = index\"\n class=\"suggestion-card\"\n >\n <div class=\"card-overlay\"></div>\n <div class=\"card-header\"> \n <div class=\"card-title sfx-font-bold\">\n {{ atsGroup.suggestion.name }} [{{ atsGroup.suggestion.id }}]\n </div>\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <symphony-grid-cell-clicked-open-new-tab\n [newTabUrl]=\"getContactUrl(atsGroup.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(atsGroup.suggestion)\"\n >\n <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n </symphony-icon-wrapper>\n </div>\n\n </div>\n <div class=\"card-body\">\n <div class=\"info-row\" *ngIf=\"atsGroup.suggestion.email\">\n <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n <span>{{ atsGroup.suggestion.email }}</span>\n </div>\n <div class=\"info-row\" *ngFor=\"let criterion of atsGroup.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=\"atsGroup.suggestion.atsId\">\n <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n <span>{{ atsGroup.suggestion.atsId }}</span>\n </div>\n </div>\n <div class=\"match-criteria\" *ngIf=\"atsGroup.suggestion.statuses?.length\"> \n <div class=\"criteria-list\">\n <div class=\"match-label\">{{ matchLabelForAtsGroups }}</div>\n <symphony-paragraph\n *ngFor=\"let status of atsGroup.suggestion.statuses\"\n [text]=\"status\"\n ></symphony-paragraph>\n </div>\n </div>\n </div>\n </div>\n\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\">{{ matchLabelForConfirmSuggestion }}</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:0 10px 20px 0;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}.ats-group-wrapper .suggestion-card{position:relative}.ats-group-wrapper .suggestion-card .card-overlay:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.6);border-radius:10px;z-index:1}.ats-group-wrapper .suggestion-card .card-header .card-actions{z-index:2}\n"] }]
|
|
5325
5325
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
5326
5326
|
type: Input
|
|
5327
5327
|
}], isLoading: [{
|