@symphony-talent/component-library 4.197.0 → 4.198.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 +16 -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
|
@@ -1780,10 +1780,10 @@ class InputRadioComponent {
|
|
|
1780
1780
|
}
|
|
1781
1781
|
}
|
|
1782
1782
|
InputRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1783
|
-
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:
|
|
1783
|
+
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:neuzeit_groteskbold}.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"] }] });
|
|
1784
1784
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioComponent, decorators: [{
|
|
1785
1785
|
type: Component,
|
|
1786
|
-
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:
|
|
1786
|
+
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:neuzeit_groteskbold}.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"] }]
|
|
1787
1787
|
}], ctorParameters: function () { return []; }, propDecorators: { isActive: [{
|
|
1788
1788
|
type: Input
|
|
1789
1789
|
}], name: [{
|
|
@@ -1792,6 +1792,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
1792
1792
|
type: Input
|
|
1793
1793
|
}], isRequired: [{
|
|
1794
1794
|
type: Input
|
|
1795
|
+
}], radioID: [{
|
|
1796
|
+
type: Input
|
|
1795
1797
|
}], clicked: [{
|
|
1796
1798
|
type: Output
|
|
1797
1799
|
}] } });
|
|
@@ -5256,10 +5258,10 @@ class MergeContactsModalComponent {
|
|
|
5256
5258
|
}
|
|
5257
5259
|
}
|
|
5258
5260
|
MergeContactsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MergeContactsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5259
|
-
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"] }] });
|
|
5261
|
+
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.criteria?.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}.suggestion-card.selected{border-color:#712ace}\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"] }] });
|
|
5260
5262
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MergeContactsModalComponent, decorators: [{
|
|
5261
5263
|
type: Component,
|
|
5262
|
-
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-
|
|
5264
|
+
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.criteria?.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}.suggestion-card.selected{border-color:#712ace}\n"] }]
|
|
5263
5265
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
5264
5266
|
type: Input
|
|
5265
5267
|
}], isLoading: [{
|