@symphony-talent/component-library 4.197.0 → 4.199.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/atoms/input-radio/input-radio.component.mjs +5 -3
- package/esm2020/lib/organisms/merge-contacts-modal/merge-contacts-modal.component.mjs +3 -3
- package/esm2020/lib/organisms/merge-contacts-modal/merge-contacts-modal.model.mjs +1 -1
- package/esm2020/projects/component-library/lib/atoms/input-radio/input-radio.component.mjs +5 -3
- package/esm2020/projects/component-library/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.model.mjs +1 -1
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs +6 -4
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2015/symphony-talent-component-library.mjs +6 -4
- package/fesm2015/symphony-talent-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs +6 -4
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library.mjs +6 -4
- package/fesm2020/symphony-talent-component-library.mjs.map +1 -1
- package/lib/atoms/input-radio/input-radio.component.d.ts +2 -1
- package/lib/organisms/merge-contacts-modal/merge-contacts-modal.model.d.ts +15 -1
- package/package.json +1 -1
- package/projects/component-library/global.scss +21 -0
- package/projects/component-library/lib/atoms/input-radio/input-radio.component.d.ts +2 -1
- package/projects/component-library/lib/organisms/merge-contacts-modal/merge-contacts-modal.model.d.ts +15 -1
|
@@ -1782,10 +1782,10 @@ class InputRadioComponent {
|
|
|
1782
1782
|
}
|
|
1783
1783
|
}
|
|
1784
1784
|
InputRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1785
|
-
InputRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputRadioComponent, selector: "symphony-input-radio", inputs: { isActive: "isActive", name: "name", label: "label", isRequired: "isRequired" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-radio\" (click)=\"onClick()\">\n <input\n type=\"radio\"\n class=\"sfx-radio-input\"\n [checked]=\"isActive\"\n [name]=\"name || label\"\n id=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".requiredField{color:#000!important}.sfx-radio{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-radio .sfx-radio-input{top:0;left:0;width:
|
|
1785
|
+
InputRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputRadioComponent, selector: "symphony-input-radio", inputs: { isActive: "isActive", name: "name", label: "label", isRequired: "isRequired", radioID: "radioID" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-radio\" (click)=\"onClick()\">\n <input\n type=\"radio\"\n class=\"sfx-radio-input\"\n [checked]=\"isActive\"\n [name]=\"name || label\"\n id=\"{{ radioID || label }}\"\n />\n <label for=\"{{ radioID || label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".requiredField{color:#000!important}.sfx-radio{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-radio .sfx-radio-input{top:0;left:0;width:0%;cursor:inherit;height:0%;margin:0;opacity:0;padding:0;z-index:1}.sfx-radio .sfx-radio-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;font-family:runda,sans-serif}.sfx-radio .sfx-radio-input+*:before{content:\"\";display:inline-block;vertical-align:bottom;width:1rem;height:1rem;margin-right:.5rem;margin-bottom:.2rem;border-radius:50%;border-style:solid;border-width:.1rem;border-color:#000}.sfx-radio .sfx-radio-input:checked+*:before{background:radial-gradient(black 0%,black 40%,transparent 50%,transparent)}.sfx-radio .sfx-radio-input:checked+*{color:#000}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1786
1786
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioComponent, decorators: [{
|
|
1787
1787
|
type: Component,
|
|
1788
|
-
args: [{ selector: 'symphony-input-radio', template: "<div class=\"sfx-radio\" (click)=\"onClick()\">\n <input\n type=\"radio\"\n class=\"sfx-radio-input\"\n [checked]=\"isActive\"\n [name]=\"name || label\"\n id=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".requiredField{color:#000!important}.sfx-radio{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-radio .sfx-radio-input{top:0;left:0;width:
|
|
1788
|
+
args: [{ selector: 'symphony-input-radio', template: "<div class=\"sfx-radio\" (click)=\"onClick()\">\n <input\n type=\"radio\"\n class=\"sfx-radio-input\"\n [checked]=\"isActive\"\n [name]=\"name || label\"\n id=\"{{ radioID || label }}\"\n />\n <label for=\"{{ radioID || label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".requiredField{color:#000!important}.sfx-radio{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-radio .sfx-radio-input{top:0;left:0;width:0%;cursor:inherit;height:0%;margin:0;opacity:0;padding:0;z-index:1}.sfx-radio .sfx-radio-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;font-family:runda,sans-serif}.sfx-radio .sfx-radio-input+*:before{content:\"\";display:inline-block;vertical-align:bottom;width:1rem;height:1rem;margin-right:.5rem;margin-bottom:.2rem;border-radius:50%;border-style:solid;border-width:.1rem;border-color:#000}.sfx-radio .sfx-radio-input:checked+*:before{background:radial-gradient(black 0%,black 40%,transparent 50%,transparent)}.sfx-radio .sfx-radio-input:checked+*{color:#000}\n"] }]
|
|
1789
1789
|
}], ctorParameters: function () { return []; }, propDecorators: { isActive: [{
|
|
1790
1790
|
type: Input
|
|
1791
1791
|
}], name: [{
|
|
@@ -1794,6 +1794,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
1794
1794
|
type: Input
|
|
1795
1795
|
}], isRequired: [{
|
|
1796
1796
|
type: Input
|
|
1797
|
+
}], radioID: [{
|
|
1798
|
+
type: Input
|
|
1797
1799
|
}], clicked: [{
|
|
1798
1800
|
type: Output
|
|
1799
1801
|
}] } });
|
|
@@ -5267,10 +5269,10 @@ class MergeContactsModalComponent {
|
|
|
5267
5269
|
}
|
|
5268
5270
|
}
|
|
5269
5271
|
MergeContactsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MergeContactsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5270
|
-
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", 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 <symphony-h4 *ngIf=\"currentStep === 1\" text=\"Manage Duplicates\"></symphony-h4>\n <symphony-h4 *ngIf=\"currentStep === 2\" text=\"Merge Contacts\"></symphony-h4>\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 class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\">\n <symphony-paragraph\n *ngIf=\"currentStep === 1\"\n text=\"The contacts below are potential duplicates. Please compare their data and select the one you would like to merge.\"\n ></symphony-paragraph>\n <symphony-paragraph\n *ngIf=\"currentStep === 2\"\n text=\"Using the fields below, choose a Primary Contact, and then select the data you would like to merge and keep in that Primary Contact Record. Merging contacts is irreversible.\"\n ></symphony-paragraph> \n </div>\n </div>\n </div>\n </section>\n <section class=\"modal-body sfx-p-30\">\n <ng-container *ngIf=\"currentStep === 1\">\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-30\">\n <symphony-paragraph text=\"Something has went wrong. Try again later or contact support\"></symphony-paragraph>\n </div>\n <div *ngIf=\"!isLoading && !hasError && (!model?.suggestions || model.suggestions.length === 0)\" class=\"sfx-mt-30\">\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 <p class=\"sfx-mt-40 sfx-font-bold\">{{ model.selectedContact.name }} [{{ model.selectedContact.id }}]</p>\n <p>{{ model.selectedContact.email }}</p>\n <p *ngFor=\"let criterion of model.selectedContact.criteria\">{{ criterion }}</p>\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\">\n <div *ngFor=\"let suggestion of model.suggestions\">\n <div class=\"radio-item\">\n <symphony-input-radio\n [label]=\"suggestion.name + ' [' + suggestion.id + ']'\"\n [name]=\"'merge-suggestions'\"\n [isActive]=\"selected === suggestion\"\n (clicked)=\"onSelect(suggestion)\"\n ></symphony-input-radio>\n <div class=\"radio-action sfx-mt-30\">\n <symphony-grid-cell-clicked-open-new-tab class=\"icon-upwards\"\n [newTabUrl]=\"getContactUrl(suggestion.id)\"\n ></symphony-grid-cell-clicked-open-new-tab>\n <symphony-icon-wrapper class=\"not-duplicate-icon-global\"\n title=\"Mark not duplicate\" (clicked)=\"onNotDuplicate(suggestion)\">\n <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n </symphony-icon-wrapper>\n </div>\n </div>\n <div class=\"radio-item\">\n <div class=\"radio-details\">\n <div>{{ suggestion.email }}</div>\n <div *ngFor=\"let criterion of suggestion.criteria\" class=\"sfx-mt-5\">{{ criterion }}</div>\n <div *ngFor=\"let status of suggestion.statuses\" class=\"sfx-mt-10\">\n <symphony-status-pill [statusPillModel]=\"{statusClass: 'statusGrey', value: status}\"></symphony-status-pill>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"!isLoading && !hasError && confirmSuggestion\">\n <symphony-h5 text=\"Are you sure you want to remove this contact as a potential duplicate? \"></symphony-h5>\n <div class=\"sfx-mt-20 radio-action\">\n <symphony-icon class=\"pending-icon\" [icon]=\"'si-pending-incomplete'\"></symphony-icon>\n <symphony-paragraph class=\"sfx-font-italic\" text=\"Doing so is irreversible and this contact will never be shown as a potential duplicate of this contact again.\"></symphony-paragraph>\n </div>\n <div class=\"row sfx-mt-30\">\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n <p class=\"sfx-mt-40 sfx-font-bold\">{{ model.selectedContact.name }} [{{ model.selectedContact.id }}]</p>\n <p>{{ model.selectedContact.email }}</p>\n <p *ngFor=\"let criterion of model.selectedContact.criteria\">{{ criterion }}</p>\n </div>\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Merge Suggestion\"></symphony-h5>\n <div class=\"suggestion-confirm\">\n <div class=\"sfx-font-bold\">{{ confirmSuggestion.name }} [{{ confirmSuggestion.id }}]</div>\n <div class=\"sfx-mt-5\">{{ confirmSuggestion.email }}</div>\n <div *ngFor=\"let criterion of confirmSuggestion.criteria\" class=\"sfx-mt-5\">{{ criterion }}</div>\n <div *ngFor=\"let status of confirmSuggestion.statuses\" class=\"sfx-mt-10\">\n <symphony-status-pill [statusPillModel]=\"{statusClass: 'statusGrey', value: status}\"></symphony-status-pill>\n </div>\n </div>\n </div>\n </div>\n <div class=\"confirm-actions\">\n <symphony-button-v2\n text=\"Cancel\"\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 </div>\n </ng-container>\n <ng-content *ngIf=\"currentStep === 2\"></ng-content>\n </section>\n <section *ngIf=\"currentStep === 1\" class=\"modal-footer\">\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 </section>\n</div>\n", styles: [".scrollable-container{max-height:500px;display:flex;flex-direction:column;overflow-y:auto;padding: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;margin-top:20px}.suggestion-confirm{margin-top:38px}.pending-icon{margin-right:8px}\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"], 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: StatusPillComponent, selector: "symphony-status-pill", inputs: ["statusPillModel"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
5272
|
+
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", 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 <symphony-h4 *ngIf=\"currentStep === 1\" text=\"Manage Duplicates\"></symphony-h4>\n <symphony-h4 *ngIf=\"currentStep === 2\" text=\"Merge Contacts\"></symphony-h4>\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 class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\">\n <symphony-paragraph\n *ngIf=\"currentStep === 1\"\n text=\"The contacts below are potential duplicates. Please compare their data and select the one you would like to merge.\"\n ></symphony-paragraph>\n <symphony-paragraph\n *ngIf=\"currentStep === 2\"\n text=\"Using the fields below, choose a Primary Contact, and then select the data you would like to merge and keep in that Primary Contact Record. Merging contacts is irreversible.\"\n ></symphony-paragraph> \n </div>\n </div>\n </div>\n </section>\n <section class=\"modal-body sfx-p-30\">\n <ng-container *ngIf=\"currentStep === 1\">\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-30\">\n <symphony-paragraph text=\"Something has went wrong. Try again later or contact support\"></symphony-paragraph>\n </div>\n <div *ngIf=\"!isLoading && !hasError && (!model?.suggestions || model.suggestions.length === 0)\" class=\"sfx-mt-30\">\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 <p class=\"sfx-mt-20 sfx-font-bold\">{{ model.selectedContact.name }} [{{ model.selectedContact.id }}]</p>\n <p>{{ model.selectedContact.email }}</p>\n <p *ngFor=\"let criterion of model.selectedContact.criteria\">{{ criterion.value }}</p>\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=\"match-label sfx-txt-gray\">Contacts share the same:</div>\n <div class=\"criteria-list\">\n <symphony-status-pill\n *ngFor=\"let status of suggestion.statuses\"\n [statusPillModel]=\"{ statusClass: 'statusGrey', value: status }\"\n ></symphony-status-pill>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"!isLoading && !hasError && confirmSuggestion\">\n <symphony-h5 text=\"Are you sure you want to remove this contact as a potential duplicate? \"></symphony-h5>\n <div class=\"sfx-mt-20 radio-action\">\n <symphony-icon class=\"pending-icon\" [icon]=\"'si-pending-incomplete'\"></symphony-icon>\n <symphony-paragraph class=\"sfx-font-italic\" text=\"Doing so is irreversible and this contact will never be shown as a potential duplicate of this contact again.\"></symphony-paragraph>\n </div>\n <div class=\"row sfx-mt-30\">\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n <p class=\"sfx-mt-40 sfx-font-bold\">{{ model.selectedContact.name }} [{{ model.selectedContact.id }}]</p>\n <p>{{ model.selectedContact.email }}</p>\n <p *ngFor=\"let criterion of model.selectedContact.criteria\">{{ criterion }}</p>\n </div>\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Merge Suggestion\"></symphony-h5>\n <div class=\"suggestion-confirm\">\n <div class=\"sfx-font-bold\">{{ confirmSuggestion.name }} [{{ confirmSuggestion.id }}]</div>\n <div class=\"sfx-mt-5\">{{ confirmSuggestion.email }}</div>\n <div *ngFor=\"let criterion of confirmSuggestion.criteria\" class=\"sfx-mt-5\">{{ criterion }}</div>\n <div *ngFor=\"let status of confirmSuggestion.statuses\" class=\"sfx-mt-10\">\n <symphony-status-pill [statusPillModel]=\"{statusClass: 'statusGrey', value: status}\"></symphony-status-pill>\n </div>\n </div>\n </div>\n </div>\n <div class=\"confirm-actions\">\n <symphony-button-v2\n text=\"Cancel\"\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 </div>\n </ng-container>\n <ng-content *ngIf=\"currentStep === 2\"></ng-content>\n </section>\n <section *ngIf=\"currentStep === 1\" class=\"modal-footer\">\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 </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;margin-top:20px}.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}.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}.suggestion-card .match-criteria{margin-top:10px}.suggestion-card .match-label{font-size:12px;font-weight:500;margin-bottom:8px}.suggestion-card .criteria-list{display:flex;flex-wrap:wrap;gap:8px}\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: StatusPillComponent, selector: "symphony-status-pill", inputs: ["statusPillModel"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
5271
5273
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MergeContactsModalComponent, decorators: [{
|
|
5272
5274
|
type: Component,
|
|
5273
|
-
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 <symphony-h4 *ngIf=\"currentStep === 1\" text=\"Manage Duplicates\"></symphony-h4>\n <symphony-h4 *ngIf=\"currentStep === 2\" text=\"Merge Contacts\"></symphony-h4>\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 class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\">\n <symphony-paragraph\n *ngIf=\"currentStep === 1\"\n text=\"The contacts below are potential duplicates. Please compare their data and select the one you would like to merge.\"\n ></symphony-paragraph>\n <symphony-paragraph\n *ngIf=\"currentStep === 2\"\n text=\"Using the fields below, choose a Primary Contact, and then select the data you would like to merge and keep in that Primary Contact Record. Merging contacts is irreversible.\"\n ></symphony-paragraph> \n </div>\n </div>\n </div>\n </section>\n <section class=\"modal-body sfx-p-30\">\n <ng-container *ngIf=\"currentStep === 1\">\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-30\">\n <symphony-paragraph text=\"Something has went wrong. Try again later or contact support\"></symphony-paragraph>\n </div>\n <div *ngIf=\"!isLoading && !hasError && (!model?.suggestions || model.suggestions.length === 0)\" class=\"sfx-mt-30\">\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 <p class=\"sfx-mt-
|
|
5275
|
+
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 <symphony-h4 *ngIf=\"currentStep === 1\" text=\"Manage Duplicates\"></symphony-h4>\n <symphony-h4 *ngIf=\"currentStep === 2\" text=\"Merge Contacts\"></symphony-h4>\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 class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\">\n <symphony-paragraph\n *ngIf=\"currentStep === 1\"\n text=\"The contacts below are potential duplicates. Please compare their data and select the one you would like to merge.\"\n ></symphony-paragraph>\n <symphony-paragraph\n *ngIf=\"currentStep === 2\"\n text=\"Using the fields below, choose a Primary Contact, and then select the data you would like to merge and keep in that Primary Contact Record. Merging contacts is irreversible.\"\n ></symphony-paragraph> \n </div>\n </div>\n </div>\n </section>\n <section class=\"modal-body sfx-p-30\">\n <ng-container *ngIf=\"currentStep === 1\">\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-30\">\n <symphony-paragraph text=\"Something has went wrong. Try again later or contact support\"></symphony-paragraph>\n </div>\n <div *ngIf=\"!isLoading && !hasError && (!model?.suggestions || model.suggestions.length === 0)\" class=\"sfx-mt-30\">\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 <p class=\"sfx-mt-20 sfx-font-bold\">{{ model.selectedContact.name }} [{{ model.selectedContact.id }}]</p>\n <p>{{ model.selectedContact.email }}</p>\n <p *ngFor=\"let criterion of model.selectedContact.criteria\">{{ criterion.value }}</p>\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=\"match-label sfx-txt-gray\">Contacts share the same:</div>\n <div class=\"criteria-list\">\n <symphony-status-pill\n *ngFor=\"let status of suggestion.statuses\"\n [statusPillModel]=\"{ statusClass: 'statusGrey', value: status }\"\n ></symphony-status-pill>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"!isLoading && !hasError && confirmSuggestion\">\n <symphony-h5 text=\"Are you sure you want to remove this contact as a potential duplicate? \"></symphony-h5>\n <div class=\"sfx-mt-20 radio-action\">\n <symphony-icon class=\"pending-icon\" [icon]=\"'si-pending-incomplete'\"></symphony-icon>\n <symphony-paragraph class=\"sfx-font-italic\" text=\"Doing so is irreversible and this contact will never be shown as a potential duplicate of this contact again.\"></symphony-paragraph>\n </div>\n <div class=\"row sfx-mt-30\">\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n <p class=\"sfx-mt-40 sfx-font-bold\">{{ model.selectedContact.name }} [{{ model.selectedContact.id }}]</p>\n <p>{{ model.selectedContact.email }}</p>\n <p *ngFor=\"let criterion of model.selectedContact.criteria\">{{ criterion }}</p>\n </div>\n <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n <symphony-h5 text=\"Merge Suggestion\"></symphony-h5>\n <div class=\"suggestion-confirm\">\n <div class=\"sfx-font-bold\">{{ confirmSuggestion.name }} [{{ confirmSuggestion.id }}]</div>\n <div class=\"sfx-mt-5\">{{ confirmSuggestion.email }}</div>\n <div *ngFor=\"let criterion of confirmSuggestion.criteria\" class=\"sfx-mt-5\">{{ criterion }}</div>\n <div *ngFor=\"let status of confirmSuggestion.statuses\" class=\"sfx-mt-10\">\n <symphony-status-pill [statusPillModel]=\"{statusClass: 'statusGrey', value: status}\"></symphony-status-pill>\n </div>\n </div>\n </div>\n </div>\n <div class=\"confirm-actions\">\n <symphony-button-v2\n text=\"Cancel\"\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 </div>\n </ng-container>\n <ng-content *ngIf=\"currentStep === 2\"></ng-content>\n </section>\n <section *ngIf=\"currentStep === 1\" class=\"modal-footer\">\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 </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;margin-top:20px}.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}.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}.suggestion-card .match-criteria{margin-top:10px}.suggestion-card .match-label{font-size:12px;font-weight:500;margin-bottom:8px}.suggestion-card .criteria-list{display:flex;flex-wrap:wrap;gap:8px}\n"] }]
|
|
5274
5276
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
5275
5277
|
type: Input
|
|
5276
5278
|
}], isLoading: [{
|