@symphony-talent/component-library 4.227.0 → 4.228.0

package/esm2020/lib/organisms/feedback-login-modal/feedback-login-modal.component.mjs

@@ -29,7 +29,7 @@ export class FeedbackLoginModalComponent {
     }
 }
 FeedbackLoginModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackLoginModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackLoginModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackLoginModalComponent, selector: "symphony-feedback-login-modal", inputs: { model: "model" }, outputs: { verifyClicked: "verifyClicked", resendClick: "resendClick", authCodeChange: "authCodeChange", sendCodeClick: "sendCodeClick" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\">\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>Two-Factor Authentication</symphony-h4>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\" *ngIf=\"!model.isLoading\">\n    <symphony-paragraph [text]=\"model.headerDescription\"></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-mb-20 sfx-d-block\"\n      [text]=\"model.email\"\n    ></symphony-paragraph>\n    <div>\n      <symphony-input-text\n        class=\"authentication-input sfx-d-inline-block\"\n        [label]=\"'Authentication Code'\"\n        (textChange)=\"onAuthCodeChange($event)\"\n        [isDisabled]=\"model.isSendCodeEnabled\"\n      >\n      </symphony-input-text>\n      <symphony-paragraph\n        *ngIf=\"model.resendCodeTimerText\"\n        class=\"sfx-d-inline-block resendTimerText\"\n      >\n        <i class=\"si-timeframe\"></i> \n        {{model.resendCodeTimerText}}\n      </symphony-paragraph>\n      <symphony-h5\n        *ngIf=\"model.isResendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n      <symphony-h5\n        *ngIf=\"model.isSendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Send Code'\"\n        (click)=\"onSendCodeClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red-v2\">\n        <p *ngIf=\"model.showApiError\">Verification code is not valid<span>*</span></p>\n    </div>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-d-block\"\n    >If you dont have access to the email address listed above, please contact your administrator</symphony-paragraph>\n  </section>\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pr-30 sfx-pl-30\">\n    <symphony-button-v2\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button-v2>\n  </section>\n</div>\n", styles: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px rgba(0,0,0,.2)}.authentication-input .input-text-label{margin-left:0!important}.authentication-input input{width:100px!important;margin-left:0!important}.loader-container{padding-top:100px;padding-bottom:100px}.btn-resend .h5-primary{font-weight:700!important;font-size:14px;color:#712ace}.resendTimerText{font-style:italic}\n"], components: [{ type: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i3.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i4.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackLoginModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackLoginModalComponent, selector: "symphony-feedback-login-modal", inputs: { model: "model" }, outputs: { verifyClicked: "verifyClicked", resendClick: "resendClick", authCodeChange: "authCodeChange", sendCodeClick: "sendCodeClick" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\">\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>Two-Factor Authentication</symphony-h4>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\" *ngIf=\"!model.isLoading\">\n    <symphony-paragraph [text]=\"model.headerDescription\"></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-mb-20 sfx-d-block\"\n      [text]=\"model.email\"\n    ></symphony-paragraph>\n    <div>\n      <symphony-input-text\n        class=\"authentication-input sfx-d-inline-block\"\n        [label]=\"'Authentication Code'\"\n        (textChange)=\"onAuthCodeChange($event)\"\n        [isDisabled]=\"model.isSendCodeEnabled\"\n      >\n      </symphony-input-text>\n      <symphony-paragraph\n        *ngIf=\"model.resendCodeTimerText\"\n        class=\"sfx-d-inline-block resendTimerText\"\n      >\n        <i class=\"si-timeframe\"></i> \n        {{model.resendCodeTimerText}}\n      </symphony-paragraph>\n      <symphony-h5\n        *ngIf=\"model.isResendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n      <symphony-h5\n        *ngIf=\"model.isSendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Send Code'\"\n        (click)=\"onSendCodeClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red-v2\">\n        <p *ngIf=\"model.showApiError\">Verification code is not valid<span>*</span></p>\n    </div>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-d-block\"\n    >If you dont have access to the email address listed above, please contact your administrator</symphony-paragraph>\n  </section>\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pr-30 sfx-pl-30\">\n    <symphony-button-v2\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button-v2>\n  </section>\n</div>\n", styles: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px rgba(0,0,0,.2)}.authentication-input .input-text-label{margin-left:0!important}.authentication-input input{width:100px!important;margin-left:0!important}.loader-container{padding-top:100px;padding-bottom:100px}.btn-resend .h5-primary{font-weight:700!important;font-size:14px;color:#712ace}.resendTimerText{font-style:italic}\n"], components: [{ type: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i3.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i4.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackLoginModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-login-modal', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx sfx-modal\">\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>Two-Factor Authentication</symphony-h4>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\" *ngIf=\"!model.isLoading\">\n    <symphony-paragraph [text]=\"model.headerDescription\"></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-mb-20 sfx-d-block\"\n      [text]=\"model.email\"\n    ></symphony-paragraph>\n    <div>\n      <symphony-input-text\n        class=\"authentication-input sfx-d-inline-block\"\n        [label]=\"'Authentication Code'\"\n        (textChange)=\"onAuthCodeChange($event)\"\n        [isDisabled]=\"model.isSendCodeEnabled\"\n      >\n      </symphony-input-text>\n      <symphony-paragraph\n        *ngIf=\"model.resendCodeTimerText\"\n        class=\"sfx-d-inline-block resendTimerText\"\n      >\n        <i class=\"si-timeframe\"></i> \n        {{model.resendCodeTimerText}}\n      </symphony-paragraph>\n      <symphony-h5\n        *ngIf=\"model.isResendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n      <symphony-h5\n        *ngIf=\"model.isSendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Send Code'\"\n        (click)=\"onSendCodeClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red-v2\">\n        <p *ngIf=\"model.showApiError\">Verification code is not valid<span>*</span></p>\n    </div>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-d-block\"\n    >If you dont have access to the email address listed above, please contact your administrator</symphony-paragraph>\n  </section>\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pr-30 sfx-pl-30\">\n    <symphony-button-v2\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button-v2>\n  </section>\n</div>\n", styles: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px rgba(0,0,0,.2)}.authentication-input .input-text-label{margin-left:0!important}.authentication-input input{width:100px!important;margin-left:0!important}.loader-container{padding-top:100px;padding-bottom:100px}.btn-resend .h5-primary{font-weight:700!important;font-size:14px;color:#712ace}.resendTimerText{font-style:italic}\n"] }]

package/esm2020/lib/organisms/grid-action-bar-v2/grid-action-bar-v2.component.mjs

@@ -14,7 +14,7 @@ export class GridActionBarV2Component {
     }
 }
 GridActionBarV2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionBarV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridActionBarV2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridActionBarV2Component, selector: "symphony-grid-action-bar-v2", inputs: { actionListModel: "actionListModel" }, outputs: { actionBarListItem: "actionBarListItem" }, ngImport: i0, template: "<div *ngIf=\"actionListModel\">\n  <div class=\"sfx-d-flex sfx-grid-action-bar-v2\">\n    <div class=\"selected-wrap\" *ngIf=\"actionListModel.selectedText\">\n      <symphony-icon\n        [ngClass]=\"{\n          isSelected: actionListModel.isSelected,\n          '': !actionListModel.isSelected\n        }\"\n        class=\"sfx-cursor-pointer\"\n        [icon]=\"'si-activity'\"\n        [size]=\"'18px'\"\n      ></symphony-icon>\n      <symphony-paragraph [isFontBold]=\"true\"\n        >{{ actionListModel.selectedCount }}\n        {{ actionListModel.selectedText }}</symphony-paragraph\n      >\n    </div>\n    <symphony-vertical-separator *ngIf=\"actionListModel.selectedText\"\n      class=\"flex-align-content-center\"\n    ></symphony-vertical-separator>\n    <symphony-grid-action-list-v2\n      class=\"flex-1\"\n      [actionList]=\"actionListModel.gridActionListV2\"\n      (actionClicked)=\"onActionBarListClick($event)\"\n    ></symphony-grid-action-list-v2>\n    <div class=\"sfx-grid-controls-v2\">\n      <ng-content select=\"[grid-controls-v2]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-grid-action-bar-v2{flex-flow:wrap}.sfx-grid-action-bar-v2 .selected-wrap{display:flex;align-items:center;gap:5px}.sfx-grid-action-bar-v2 .selected-wrap i{color:#c3cbdc}.sfx-grid-action-bar-v2 .selected-wrap .isSelected i{color:#712ace}.sfx-grid-action-bar-v2 .flex-align-content-center{align-content:center}.sfx-grid-action-bar-v2 .flex-align-content-center .sfx-v-seperator{margin-right:5px}.sfx-grid-action-bar-v2 .flex-1{flex:1}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i3.VerticalSeparatorComponent, selector: "symphony-vertical-separator" }, { type: i4.GridActionListV2Component, selector: "symphony-grid-action-list-v2", inputs: ["actionList"], outputs: ["actionClicked"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+GridActionBarV2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridActionBarV2Component, selector: "symphony-grid-action-bar-v2", inputs: { actionListModel: "actionListModel" }, outputs: { actionBarListItem: "actionBarListItem" }, ngImport: i0, template: "<div *ngIf=\"actionListModel\">\n  <div class=\"sfx-d-flex sfx-grid-action-bar-v2\">\n    <div class=\"selected-wrap\" *ngIf=\"actionListModel.selectedText\">\n      <symphony-icon\n        [ngClass]=\"{\n          isSelected: actionListModel.isSelected,\n          '': !actionListModel.isSelected\n        }\"\n        class=\"sfx-cursor-pointer\"\n        [icon]=\"'si-activity'\"\n        [size]=\"'18px'\"\n      ></symphony-icon>\n      <symphony-paragraph [isFontBold]=\"true\"\n        >{{ actionListModel.selectedCount }}\n        {{ actionListModel.selectedText }}</symphony-paragraph\n      >\n    </div>\n    <symphony-vertical-separator *ngIf=\"actionListModel.selectedText\"\n      class=\"flex-align-content-center\"\n    ></symphony-vertical-separator>\n    <symphony-grid-action-list-v2\n      class=\"flex-1\"\n      [actionList]=\"actionListModel.gridActionListV2\"\n      (actionClicked)=\"onActionBarListClick($event)\"\n    ></symphony-grid-action-list-v2>\n    <div class=\"sfx-grid-controls-v2\">\n      <ng-content select=\"[grid-controls-v2]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-grid-action-bar-v2{flex-flow:wrap}.sfx-grid-action-bar-v2 .selected-wrap{display:flex;align-items:center;gap:5px}.sfx-grid-action-bar-v2 .selected-wrap i{color:#c3cbdc}.sfx-grid-action-bar-v2 .selected-wrap .isSelected i{color:#712ace}.sfx-grid-action-bar-v2 .flex-align-content-center{align-content:center}.sfx-grid-action-bar-v2 .flex-align-content-center .sfx-v-seperator{margin-right:5px}.sfx-grid-action-bar-v2 .flex-1{flex:1}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i3.VerticalSeparatorComponent, selector: "symphony-vertical-separator" }, { type: i4.GridActionListV2Component, selector: "symphony-grid-action-list-v2", inputs: ["actionList"], outputs: ["actionClicked"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionBarV2Component, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-grid-action-bar-v2', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"actionListModel\">\n  <div class=\"sfx-d-flex sfx-grid-action-bar-v2\">\n    <div class=\"selected-wrap\" *ngIf=\"actionListModel.selectedText\">\n      <symphony-icon\n        [ngClass]=\"{\n          isSelected: actionListModel.isSelected,\n          '': !actionListModel.isSelected\n        }\"\n        class=\"sfx-cursor-pointer\"\n        [icon]=\"'si-activity'\"\n        [size]=\"'18px'\"\n      ></symphony-icon>\n      <symphony-paragraph [isFontBold]=\"true\"\n        >{{ actionListModel.selectedCount }}\n        {{ actionListModel.selectedText }}</symphony-paragraph\n      >\n    </div>\n    <symphony-vertical-separator *ngIf=\"actionListModel.selectedText\"\n      class=\"flex-align-content-center\"\n    ></symphony-vertical-separator>\n    <symphony-grid-action-list-v2\n      class=\"flex-1\"\n      [actionList]=\"actionListModel.gridActionListV2\"\n      (actionClicked)=\"onActionBarListClick($event)\"\n    ></symphony-grid-action-list-v2>\n    <div class=\"sfx-grid-controls-v2\">\n      <ng-content select=\"[grid-controls-v2]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-grid-action-bar-v2{flex-flow:wrap}.sfx-grid-action-bar-v2 .selected-wrap{display:flex;align-items:center;gap:5px}.sfx-grid-action-bar-v2 .selected-wrap i{color:#c3cbdc}.sfx-grid-action-bar-v2 .selected-wrap .isSelected i{color:#712ace}.sfx-grid-action-bar-v2 .flex-align-content-center{align-content:center}.sfx-grid-action-bar-v2 .flex-align-content-center .sfx-v-seperator{margin-right:5px}.sfx-grid-action-bar-v2 .flex-1{flex:1}\n"] }]

package/esm2020/lib/organisms/merge-contacts-modal/merge-contacts-modal.component.mjs

@@ -126,7 +126,7 @@ export class MergeContactsModalComponent {
     }
 }
 MergeContactsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MergeContactsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.ToasterAlertComponent, selector: "symphony-toaster-alert", inputs: ["alertModel", "showAlert"], outputs: ["hideAlert", "refreshClicked"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i6.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i7.InputRadioComponent, selector: "symphony-input-radio", inputs: ["isActive", "name", "label", "isRequired", "radioID"], outputs: ["clicked"] }, { type: i8.GridCellClickedOpenNewTabComponent, selector: "symphony-grid-cell-clicked-open-new-tab", inputs: ["newTabUrl"] }, { type: i9.IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: i10.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+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: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i4.ToasterAlertComponent, selector: "symphony-toaster-alert", inputs: ["alertModel", "showAlert"], outputs: ["hideAlert", "refreshClicked"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i6.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i7.InputRadioComponent, selector: "symphony-input-radio", inputs: ["isActive", "name", "label", "isRequired", "radioID"], outputs: ["clicked"] }, { type: i8.GridCellClickedOpenNewTabComponent, selector: "symphony-grid-cell-clicked-open-new-tab", inputs: ["newTabUrl"] }, { type: i9.IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: i10.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MergeContactsModalComponent, decorators: [{
             type: Component,
             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"] }]

package/esm2020/lib/organisms/save-search-modal/save-search-modal.component.mjs

@@ -20,7 +20,7 @@ export class SaveSearchModalComponent {
     }
 }
 SaveSearchModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SaveSearchModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SaveSearchModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SaveSearchModalComponent, selector: "symphony-save-search-modal", inputs: { model: "model" }, outputs: { saveClicked: "saveClicked", closeClicked: "closeClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>{{ model?.title }}</symphony-h4>\n  <symphony-icon sfx-close-button [icon]=\"'si-close-modal'\" (clicked)=\"onClose()\"></symphony-icon>\n\n  <!-- Loading State -->\n  <section *ngIf=\"model?.isLoading\" class=\"sfx-pt-40 sfx-pb-40\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </section>\n\n  <!-- Default State -->\n  <section *ngIf=\"!model?.isLoading\" class=\"sfx-p-30\" sfx-modal-body-area>\n    <symphony-paragraph>{{ model?.bodyText }}</symphony-paragraph>\n    <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n     <div class=\"sfx-d-flex gap-10\" *ngIf=\"model?.errorText\">\n        <symphony-icon [size]=\"'18px'\" [iconColor]=\"'#AC4463'\" [icon]=\"'si-pending-incomplete'\"></symphony-icon>\n        <symphony-paragraph>{{ model?.errorText }}</symphony-paragraph>\n     </div>    \n  </section>\n\n  <symphony-button-v2\n    sfx-button-secondary\n    class=\"pull-right sfx-d-flex\"\n    [text]=\"model?.cancelButtonText || 'Close'\"\n    [isSecondary]=\"true\"\n    (clicked)=\"onClose()\"\n  ></symphony-button-v2>\n  <symphony-button-v2\n    sfx-button-primary\n    class=\"pull-right sfx-d-flex\"\n    [text]=\"model?.confirmButtonText || 'Save'\"\n    [disabled]=\"model?.isSaveDisabled\"\n    (clicked)=\"onSave()\"\n  ></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [".gap-10{gap:10px}\n"], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i5.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SaveSearchModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SaveSearchModalComponent, selector: "symphony-save-search-modal", inputs: { model: "model" }, outputs: { saveClicked: "saveClicked", closeClicked: "closeClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>{{ model?.title }}</symphony-h4>\n  <symphony-icon sfx-close-button [icon]=\"'si-close-modal'\" (clicked)=\"onClose()\"></symphony-icon>\n\n  <!-- Loading State -->\n  <section *ngIf=\"model?.isLoading\" class=\"sfx-pt-40 sfx-pb-40\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </section>\n\n  <!-- Default State -->\n  <section *ngIf=\"!model?.isLoading\" class=\"sfx-p-30\" sfx-modal-body-area>\n    <symphony-paragraph>{{ model?.bodyText }}</symphony-paragraph>\n    <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n     <div class=\"sfx-d-flex gap-10\" *ngIf=\"model?.errorText\">\n        <symphony-icon [size]=\"'18px'\" [iconColor]=\"'#AC4463'\" [icon]=\"'si-pending-incomplete'\"></symphony-icon>\n        <symphony-paragraph>{{ model?.errorText }}</symphony-paragraph>\n     </div>    \n  </section>\n\n  <symphony-button-v2\n    sfx-button-secondary\n    class=\"pull-right sfx-d-flex\"\n    [text]=\"model?.cancelButtonText || 'Close'\"\n    [isSecondary]=\"true\"\n    (clicked)=\"onClose()\"\n  ></symphony-button-v2>\n  <symphony-button-v2\n    sfx-button-primary\n    class=\"pull-right sfx-d-flex\"\n    [text]=\"model?.confirmButtonText || 'Save'\"\n    [disabled]=\"model?.isSaveDisabled\"\n    (clicked)=\"onSave()\"\n  ></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [".gap-10{gap:10px}\n"], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i5.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SaveSearchModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-save-search-modal', template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>{{ model?.title }}</symphony-h4>\n  <symphony-icon sfx-close-button [icon]=\"'si-close-modal'\" (clicked)=\"onClose()\"></symphony-icon>\n\n  <!-- Loading State -->\n  <section *ngIf=\"model?.isLoading\" class=\"sfx-pt-40 sfx-pb-40\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </section>\n\n  <!-- Default State -->\n  <section *ngIf=\"!model?.isLoading\" class=\"sfx-p-30\" sfx-modal-body-area>\n    <symphony-paragraph>{{ model?.bodyText }}</symphony-paragraph>\n    <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n     <div class=\"sfx-d-flex gap-10\" *ngIf=\"model?.errorText\">\n        <symphony-icon [size]=\"'18px'\" [iconColor]=\"'#AC4463'\" [icon]=\"'si-pending-incomplete'\"></symphony-icon>\n        <symphony-paragraph>{{ model?.errorText }}</symphony-paragraph>\n     </div>    \n  </section>\n\n  <symphony-button-v2\n    sfx-button-secondary\n    class=\"pull-right sfx-d-flex\"\n    [text]=\"model?.cancelButtonText || 'Close'\"\n    [isSecondary]=\"true\"\n    (clicked)=\"onClose()\"\n  ></symphony-button-v2>\n  <symphony-button-v2\n    sfx-button-primary\n    class=\"pull-right sfx-d-flex\"\n    [text]=\"model?.confirmButtonText || 'Save'\"\n    [disabled]=\"model?.isSaveDisabled\"\n    (clicked)=\"onSave()\"\n  ></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [".gap-10{gap:10px}\n"] }]

package/esm2020/lib/organisms/upload-resume-modal/upload-resume-modal.component.mjs

@@ -93,7 +93,7 @@ export class UploadResumeModalComponent {
     }
 }
 UploadResumeModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UploadResumeModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: UploadResumeModalComponent, selector: "symphony-upload-resume-modal", inputs: { uploadResumeModel: "uploadResumeModel", isLoading: "isLoading" }, outputs: { closeUploadComplete: "closeUploadComplete", buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", docTypeDropdowChange: "docTypeDropdowChange", updateResumeChecked: "updateResumeChecked", fileCloseClick: "fileCloseClick", getFileDetails: "getFileDetails" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\" *ngIf=\"uploadResumeModel && 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 [text]=\"model.title\"></symphony-h4>\n          <div class=\"sfx-mt-15\">\n            <symphony-paragraph [text]=\"model.subTitle\"></symphony-paragraph>\n          </div>\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)=\"onCloseClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\" *ngIf=\"uploadResumeModel.showResumeParseCheckbox\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload-v2\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n          (getFileDetails)=\"onFileUpload($event)\"\n        ></symphony-file-upload-v2>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"\n        uploadResumeModel.isLoading ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"], components: [{ type: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: i5.InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: i6.FileUploadV2Component, selector: "symphony-file-upload-v2" }, { type: i7.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i8.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+UploadResumeModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: UploadResumeModalComponent, selector: "symphony-upload-resume-modal", inputs: { uploadResumeModel: "uploadResumeModel", isLoading: "isLoading" }, outputs: { closeUploadComplete: "closeUploadComplete", buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", docTypeDropdowChange: "docTypeDropdowChange", updateResumeChecked: "updateResumeChecked", fileCloseClick: "fileCloseClick", getFileDetails: "getFileDetails" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\" *ngIf=\"uploadResumeModel && 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 [text]=\"model.title\"></symphony-h4>\n          <div class=\"sfx-mt-15\">\n            <symphony-paragraph [text]=\"model.subTitle\"></symphony-paragraph>\n          </div>\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)=\"onCloseClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\" *ngIf=\"uploadResumeModel.showResumeParseCheckbox\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload-v2\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n          (getFileDetails)=\"onFileUpload($event)\"\n        ></symphony-file-upload-v2>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"\n        uploadResumeModel.isLoading ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"], components: [{ type: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: i5.InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: i6.FileUploadV2Component, selector: "symphony-file-upload-v2" }, { type: i7.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i8.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-upload-resume-modal', template: "<div class=\"sfx sfx-modal\" *ngIf=\"uploadResumeModel && 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 [text]=\"model.title\"></symphony-h4>\n          <div class=\"sfx-mt-15\">\n            <symphony-paragraph [text]=\"model.subTitle\"></symphony-paragraph>\n          </div>\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)=\"onCloseClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\" *ngIf=\"uploadResumeModel.showResumeParseCheckbox\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload-v2\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n          (getFileDetails)=\"onFileUpload($event)\"\n        ></symphony-file-upload-v2>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"\n        uploadResumeModel.isLoading ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"] }]

package/esm2020/lib/pages/domain-whitelisting-partial-page/domain-whitelisting-partial-page.component.mjs

@@ -17,7 +17,7 @@ export class DomainWhitelistingPartialPageComponent {
     }
 }
 DomainWhitelistingPartialPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DomainWhitelistingPartialPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DomainWhitelistingPartialPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DomainWhitelistingPartialPageComponent, selector: "symphony-domain-whitelisting-partial-page", inputs: { model: "model" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div *ngIf=\"model\">\n    <h3 sfx-header>{{ model.pageTitle }}</h3>\n    <div class=\"sfx-pt-20 sfx-border-top-gray-1 sfx-pb-5 sfx-font-bold\">\n        <symphony-paragraph>\n            {{model.title}}\n        </symphony-paragraph>\n    </div>\n    <div>\n        <symphony-paragraph>\n            {{model.description}}\n        </symphony-paragraph>\n    </div>\n    <div class=\"sfx-pt-20 sfx-pl-30\">\n        <div class=\"sfx-pb-20\">\n            <symphony-paragraph class=\"sfx-font-bold\">\n                {{model.heading}}\n            </symphony-paragraph>\n            <symphony-paragraph>\n                {{model.text}}\n            </symphony-paragraph>\n        </div>\n        <div *ngIf=\"!model.isLoading && model.whitelistedDomains\" class=\"whitelist-domains\">\n            <symphony-input-textarea class=\"text-box\" [model]=\"model.whitelistedDomains\"\n                (textAreaChanged)=\"onTextChanged($event)\">\n            </symphony-input-textarea>\n            <symphony-button-v2 class=\"button sfx-pt-10\" (click)=\"onClick()\" [text]=\"model.buttonText\"> </symphony-button-v2>\n        </div>\n        <div *ngIf=\"!model.isLoading && !model.whitelistedDomains\" class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\">\n            {{model.message}}\n        </div>\n        <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\">\n            <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n    </div>\n</div>", styles: [".text-box{width:100%;display:block}.whitelist-domains{min-width:250px;padding-right:45%}.button{float:right}\n"], components: [{ type: i1.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i2.InputTextareaComponent, selector: "symphony-input-textarea", inputs: ["model", "isDisabled", "currentCount", "placeholder", "rows"], outputs: ["textAreaChanged"] }, { type: i3.ButtonV2Component, selector: "symphony-button-v2" }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+DomainWhitelistingPartialPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DomainWhitelistingPartialPageComponent, selector: "symphony-domain-whitelisting-partial-page", inputs: { model: "model" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div *ngIf=\"model\">\n    <h3 sfx-header>{{ model.pageTitle }}</h3>\n    <div class=\"sfx-pt-20 sfx-border-top-gray-1 sfx-pb-5 sfx-font-bold\">\n        <symphony-paragraph>\n            {{model.title}}\n        </symphony-paragraph>\n    </div>\n    <div>\n        <symphony-paragraph>\n            {{model.description}}\n        </symphony-paragraph>\n    </div>\n    <div class=\"sfx-pt-20 sfx-pl-30\">\n        <div class=\"sfx-pb-20\">\n            <symphony-paragraph class=\"sfx-font-bold\">\n                {{model.heading}}\n            </symphony-paragraph>\n            <symphony-paragraph>\n                {{model.text}}\n            </symphony-paragraph>\n        </div>\n        <div *ngIf=\"!model.isLoading && model.whitelistedDomains\" class=\"whitelist-domains\">\n            <symphony-input-textarea class=\"text-box\" [model]=\"model.whitelistedDomains\"\n                (textAreaChanged)=\"onTextChanged($event)\">\n            </symphony-input-textarea>\n            <symphony-button-v2 class=\"button sfx-pt-10\" (click)=\"onClick()\" [text]=\"model.buttonText\"> </symphony-button-v2>\n        </div>\n        <div *ngIf=\"!model.isLoading && !model.whitelistedDomains\" class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\">\n            {{model.message}}\n        </div>\n        <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\">\n            <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n    </div>\n</div>", styles: [".text-box{width:100%;display:block}.whitelist-domains{min-width:250px;padding-right:45%}.button{float:right}\n"], components: [{ type: i1.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i2.InputTextareaComponent, selector: "symphony-input-textarea", inputs: ["model", "isDisabled", "currentCount", "placeholder", "rows"], outputs: ["textAreaChanged"] }, { type: i3.ButtonV2Component, selector: "symphony-button-v2" }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DomainWhitelistingPartialPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-domain-whitelisting-partial-page', template: "<div *ngIf=\"model\">\n    <h3 sfx-header>{{ model.pageTitle }}</h3>\n    <div class=\"sfx-pt-20 sfx-border-top-gray-1 sfx-pb-5 sfx-font-bold\">\n        <symphony-paragraph>\n            {{model.title}}\n        </symphony-paragraph>\n    </div>\n    <div>\n        <symphony-paragraph>\n            {{model.description}}\n        </symphony-paragraph>\n    </div>\n    <div class=\"sfx-pt-20 sfx-pl-30\">\n        <div class=\"sfx-pb-20\">\n            <symphony-paragraph class=\"sfx-font-bold\">\n                {{model.heading}}\n            </symphony-paragraph>\n            <symphony-paragraph>\n                {{model.text}}\n            </symphony-paragraph>\n        </div>\n        <div *ngIf=\"!model.isLoading && model.whitelistedDomains\" class=\"whitelist-domains\">\n            <symphony-input-textarea class=\"text-box\" [model]=\"model.whitelistedDomains\"\n                (textAreaChanged)=\"onTextChanged($event)\">\n            </symphony-input-textarea>\n            <symphony-button-v2 class=\"button sfx-pt-10\" (click)=\"onClick()\" [text]=\"model.buttonText\"> </symphony-button-v2>\n        </div>\n        <div *ngIf=\"!model.isLoading && !model.whitelistedDomains\" class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\">\n            {{model.message}}\n        </div>\n        <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\">\n            <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n    </div>\n</div>", styles: [".text-box{width:100%;display:block}.whitelist-domains{min-width:250px;padding-right:45%}.button{float:right}\n"] }]

package/esm2020/lib/pages/feedback-list-page/feedback-list-page.component.mjs

@@ -15,7 +15,7 @@ export class FeedbackListPageComponent {
     }
 }
 FeedbackListPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackListPageComponent, selector: "symphony-feedback-list-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-feedback-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>Feedback Request</symphony-h3>\n\n  <symphony-feedback-card-list\n    *ngIf=\"!model.isLoading\"\n    feedback-card-list\n    [feedbackCardList]=\"model.feedbackCardList\"\n    (cardClick)=\"onCardClick($event)\"\n  ></symphony-feedback-card-list>\n\n  <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-sfx-loader [message]=\"model.message\"></symphony-sfx-loader>\n  </div>\n  <div *ngIf=\"model.errorMessage\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-paragraph class=\"text-center\">{{model.errorMessage}}</symphony-paragraph>\n  </div>\n</symphony-feedback-list-template>\n", styles: [".card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}@media (max-width: 767px){.pull-right{float:none!important}.pull-right .btn{margin-top:20px}}\n"], components: [{ type: i1.FeedbackListTemplateComponent, selector: "symphony-feedback-list-template" }, { type: i2.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i3.FeedbackCardListComponent, selector: "symphony-feedback-card-list", inputs: ["feedbackCardList"], outputs: ["cardClick"] }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i5.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackListPageComponent, selector: "symphony-feedback-list-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-feedback-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>Feedback Request</symphony-h3>\n\n  <symphony-feedback-card-list\n    *ngIf=\"!model.isLoading\"\n    feedback-card-list\n    [feedbackCardList]=\"model.feedbackCardList\"\n    (cardClick)=\"onCardClick($event)\"\n  ></symphony-feedback-card-list>\n\n  <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-sfx-loader [message]=\"model.message\"></symphony-sfx-loader>\n  </div>\n  <div *ngIf=\"model.errorMessage\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-paragraph class=\"text-center\">{{model.errorMessage}}</symphony-paragraph>\n  </div>\n</symphony-feedback-list-template>\n", styles: [".card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}@media (max-width: 767px){.pull-right{float:none!important}.pull-right .btn{margin-top:20px}}\n"], components: [{ type: i1.FeedbackListTemplateComponent, selector: "symphony-feedback-list-template" }, { type: i2.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i3.FeedbackCardListComponent, selector: "symphony-feedback-card-list", inputs: ["feedbackCardList"], outputs: ["cardClick"] }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i5.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackListPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-list-page', encapsulation: ViewEncapsulation.None, template: "<symphony-feedback-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>Feedback Request</symphony-h3>\n\n  <symphony-feedback-card-list\n    *ngIf=\"!model.isLoading\"\n    feedback-card-list\n    [feedbackCardList]=\"model.feedbackCardList\"\n    (cardClick)=\"onCardClick($event)\"\n  ></symphony-feedback-card-list>\n\n  <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-sfx-loader [message]=\"model.message\"></symphony-sfx-loader>\n  </div>\n  <div *ngIf=\"model.errorMessage\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-paragraph class=\"text-center\">{{model.errorMessage}}</symphony-paragraph>\n  </div>\n</symphony-feedback-list-template>\n", styles: [".card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}@media (max-width: 767px){.pull-right{float:none!important}.pull-right .btn{margin-top:20px}}\n"] }]

package/esm2020/lib/pages/libraries-page/libraries-page.component.mjs

@@ -21,7 +21,7 @@ export class LibrariesPageComponent {
     }
 }
 LibrariesPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LibrariesPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LibrariesPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LibrariesPageComponent, selector: "symphony-libraries-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"], components: [{ type: i1.SettingListTemplateComponent, selector: "symphony-setting-list-template" }, { type: i2.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i5.CardListComponent, selector: "symphony-card-list", inputs: ["cardList"], outputs: ["cardClicked"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+LibrariesPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LibrariesPageComponent, selector: "symphony-libraries-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"], components: [{ type: i1.SettingListTemplateComponent, selector: "symphony-setting-list-template" }, { type: i2.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i4.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i5.CardListComponent, selector: "symphony-card-list", inputs: ["cardList"], outputs: ["cardClicked"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LibrariesPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-libraries-page', encapsulation: ViewEncapsulation.None, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"] }]

package/esm2020/lib/pages/modals/advance-search-modal/advance-search-modal.component.mjs

@@ -28,7 +28,7 @@ export class AdvanceSearchModalComponent {
     }
 }
 AdvanceSearchModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvanceSearchModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvanceSearchModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvanceSearchModalComponent, selector: "symphony-advance-search-modal", inputs: { checkboxList: "checkboxList" }, outputs: { keywordSearchChange: "keywordSearchChange", closeButtonClicked: "closeButtonClicked", checkboxClicked: "checkboxClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>Select your filters</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n\n  <symphony-two-column-body-template [showHeader]=\"true\" sfx-modal-body-area>\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Data Sets'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n\n    <symphony-paragraph\n      class=\"sfx-d-flex sfx-mt-15\"\n      sfx-right-col-header\n      [isSecondary]=\"false\"\n      [isFontBold]=\"true\"\n    >Active Filters</symphony-paragraph>\n\n    <div class=\"select-list\" sfx-left-column [style.height.px]=\"getElementHeight.offsetHeight\">\n      <symphony-input-checkbox-list\n        [checkboxList]=\"checkboxList\"\n        (checkboxClicked)=\"onCheckboxClicked($event)\"\n      ></symphony-input-checkbox-list>\n    </div>\n    \n    <div sfx-right-column class=\"sfx-pr-10\" #getElementHeight>\n      <div>\n        <ng-content ngProjectAs=\"[filter1]\" select=\"[filter1]\"></ng-content>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'See Results'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"false\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n", styles: [".select-list{min-height:450px;overflow-y:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}\n"], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: i5.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i6.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i7.InputCheckboxListComponent, selector: "symphony-input-checkbox-list", inputs: ["checkboxList"], outputs: ["checkboxClicked"] }, { type: i8.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }] });
+AdvanceSearchModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvanceSearchModalComponent, selector: "symphony-advance-search-modal", inputs: { checkboxList: "checkboxList" }, outputs: { keywordSearchChange: "keywordSearchChange", closeButtonClicked: "closeButtonClicked", checkboxClicked: "checkboxClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>Select your filters</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n\n  <symphony-two-column-body-template [showHeader]=\"true\" sfx-modal-body-area>\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Data Sets'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n\n    <symphony-paragraph\n      class=\"sfx-d-flex sfx-mt-15\"\n      sfx-right-col-header\n      [isSecondary]=\"false\"\n      [isFontBold]=\"true\"\n    >Active Filters</symphony-paragraph>\n\n    <div class=\"select-list\" sfx-left-column [style.height.px]=\"getElementHeight.offsetHeight\">\n      <symphony-input-checkbox-list\n        [checkboxList]=\"checkboxList\"\n        (checkboxClicked)=\"onCheckboxClicked($event)\"\n      ></symphony-input-checkbox-list>\n    </div>\n    \n    <div sfx-right-column class=\"sfx-pr-10\" #getElementHeight>\n      <div>\n        <ng-content ngProjectAs=\"[filter1]\" select=\"[filter1]\"></ng-content>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'See Results'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"false\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n", styles: [".select-list{min-height:450px;overflow-y:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}\n"], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: i5.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i6.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i7.InputCheckboxListComponent, selector: "symphony-input-checkbox-list", inputs: ["checkboxList"], outputs: ["checkboxClicked"] }, { type: i8.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvanceSearchModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-advance-search-modal', template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>Select your filters</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n\n  <symphony-two-column-body-template [showHeader]=\"true\" sfx-modal-body-area>\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Data Sets'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n\n    <symphony-paragraph\n      class=\"sfx-d-flex sfx-mt-15\"\n      sfx-right-col-header\n      [isSecondary]=\"false\"\n      [isFontBold]=\"true\"\n    >Active Filters</symphony-paragraph>\n\n    <div class=\"select-list\" sfx-left-column [style.height.px]=\"getElementHeight.offsetHeight\">\n      <symphony-input-checkbox-list\n        [checkboxList]=\"checkboxList\"\n        (checkboxClicked)=\"onCheckboxClicked($event)\"\n      ></symphony-input-checkbox-list>\n    </div>\n    \n    <div sfx-right-column class=\"sfx-pr-10\" #getElementHeight>\n      <div>\n        <ng-content ngProjectAs=\"[filter1]\" select=\"[filter1]\"></ng-content>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'See Results'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"false\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n", styles: [".select-list{min-height:450px;overflow-y:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}\n"] }]

package/esm2020/lib/pages/modals/advertise-modal/advertise-modal.component.mjs

@@ -211,7 +211,7 @@ export class AdvertiseModalComponent {
     }
 }
 AdvertiseModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, deps: [{ token: i1.DecimalPipe }], target: i0.ɵɵFactoryTarget.Component });
-AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", postingBoardChange: "postingBoardChange", keywordSearchChange: "keywordSearchChange" }, usesOnChanges: true, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"model.jobBoards\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card\n        [model]=\"phaserCardConfirmation\"\n      ></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: i2.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i3.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i4.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i5.H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: i6.TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: i7.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i8.AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: i9.OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: i10.PhaserCardComponent, selector: "symphony-phaser-card", inputs: ["model", "isClickable", "hasHover"], outputs: ["cardClicked", "cardHover"] }, { type: i11.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i12.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i13.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: i14.ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", postingBoardChange: "postingBoardChange", keywordSearchChange: "keywordSearchChange" }, usesOnChanges: true, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"model.jobBoards\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card\n        [model]=\"phaserCardConfirmation\"\n      ></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: i2.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i3.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i4.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i5.H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: i6.TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: i7.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i8.AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: i9.OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: i10.PhaserCardComponent, selector: "symphony-phaser-card", inputs: ["model", "isClickable", "hasHover"], outputs: ["cardClicked", "cardHover"] }, { type: i11.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i12.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i13.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: i14.ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-advertise-modal', encapsulation: ViewEncapsulation.None, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"model.jobBoards\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card\n        [model]=\"phaserCardConfirmation\"\n      ></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"] }]

package/esm2020/lib/pages/modals/assign-to-user-modal/assign-to-user-modal.component.mjs

@@ -21,7 +21,7 @@ export class AssignToUserModalComponent {
     }
 }
 AssignToUserModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AssignToUserModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AssignToUserModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AssignToUserModalComponent, selector: "symphony-assign-to-user-modal", inputs: { pageModel: "pageModel" }, outputs: { buttonClicked: "buttonClicked", reloadClicked: "reloadClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"pageModel\">\n    <symphony-h4 sfx-modal-title>{{pageModel.modelTitle}}</symphony-h4>\n    <symphony-paragraph sfx-modal-subtitle\n        >{{pageModel.modelSubTitle}}</symphony-paragraph\n    >\n    <symphony-icon\n        sfx-close-button\n        [icon]=\"'si-close-modal'\"\n        (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n\n    <section class=\"row sfx-p-30\"  *ngIf=\"!pageModel.isLoading && !pageModel.confirmationFlag\" sfx-modal-body-area>\n        <symphony-paragraph class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-20\">{{pageModel.modelDescription}}</symphony-paragraph>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n            <ng-content select=\"[dropdown-dropzone-1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n              <ng-content select=\"[dropdown-dropzone-2]\"></ng-content>\n        </div>\n        \n    </section>  \n    <section *ngIf=\"pageModel.confirmationFlag && !pageModel.isLoading \" class=\"sfx-pt-40 sfx-pb-40 sfx-pl-30 sfx-pr-30\"  sfx-modal-body-area>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine1}}</symphony-paragraph>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine2}}</symphony-paragraph>\n    </section>  \n    <section *ngIf=\"pageModel.isLoading\" class=\"sfx-pt-40 sfx-pb-40\"  sfx-modal-body-area>\n        <symphony-sfx-loader \n        >\n        </symphony-sfx-loader>\n    </section> \n    <symphony-button-v2\n      sfx-button-secondary\n      id=\"button-modal-cancel\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.cancelButtonText\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n    <symphony-button-v2\n      sfx-button-primary\n      id=\"button-modal-assign\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.confirmationButtonText\"\n      [disabled]=\"pageModel.assignBtnDisabled\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [""], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AssignToUserModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AssignToUserModalComponent, selector: "symphony-assign-to-user-modal", inputs: { pageModel: "pageModel" }, outputs: { buttonClicked: "buttonClicked", reloadClicked: "reloadClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"pageModel\">\n    <symphony-h4 sfx-modal-title>{{pageModel.modelTitle}}</symphony-h4>\n    <symphony-paragraph sfx-modal-subtitle\n        >{{pageModel.modelSubTitle}}</symphony-paragraph\n    >\n    <symphony-icon\n        sfx-close-button\n        [icon]=\"'si-close-modal'\"\n        (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n\n    <section class=\"row sfx-p-30\"  *ngIf=\"!pageModel.isLoading && !pageModel.confirmationFlag\" sfx-modal-body-area>\n        <symphony-paragraph class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-20\">{{pageModel.modelDescription}}</symphony-paragraph>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n            <ng-content select=\"[dropdown-dropzone-1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n              <ng-content select=\"[dropdown-dropzone-2]\"></ng-content>\n        </div>\n        \n    </section>  \n    <section *ngIf=\"pageModel.confirmationFlag && !pageModel.isLoading \" class=\"sfx-pt-40 sfx-pb-40 sfx-pl-30 sfx-pr-30\"  sfx-modal-body-area>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine1}}</symphony-paragraph>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine2}}</symphony-paragraph>\n    </section>  \n    <section *ngIf=\"pageModel.isLoading\" class=\"sfx-pt-40 sfx-pb-40\"  sfx-modal-body-area>\n        <symphony-sfx-loader \n        >\n        </symphony-sfx-loader>\n    </section> \n    <symphony-button-v2\n      sfx-button-secondary\n      id=\"button-modal-cancel\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.cancelButtonText\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n    <symphony-button-v2\n      sfx-button-primary\n      id=\"button-modal-assign\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.confirmationButtonText\"\n      [disabled]=\"pageModel.assignBtnDisabled\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [""], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i4.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AssignToUserModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-assign-to-user-modal', template: "<symphony-two-column-modal-template *ngIf=\"pageModel\">\n    <symphony-h4 sfx-modal-title>{{pageModel.modelTitle}}</symphony-h4>\n    <symphony-paragraph sfx-modal-subtitle\n        >{{pageModel.modelSubTitle}}</symphony-paragraph\n    >\n    <symphony-icon\n        sfx-close-button\n        [icon]=\"'si-close-modal'\"\n        (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n\n    <section class=\"row sfx-p-30\"  *ngIf=\"!pageModel.isLoading && !pageModel.confirmationFlag\" sfx-modal-body-area>\n        <symphony-paragraph class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-20\">{{pageModel.modelDescription}}</symphony-paragraph>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n            <ng-content select=\"[dropdown-dropzone-1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n              <ng-content select=\"[dropdown-dropzone-2]\"></ng-content>\n        </div>\n        \n    </section>  \n    <section *ngIf=\"pageModel.confirmationFlag && !pageModel.isLoading \" class=\"sfx-pt-40 sfx-pb-40 sfx-pl-30 sfx-pr-30\"  sfx-modal-body-area>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine1}}</symphony-paragraph>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine2}}</symphony-paragraph>\n    </section>  \n    <section *ngIf=\"pageModel.isLoading\" class=\"sfx-pt-40 sfx-pb-40\"  sfx-modal-body-area>\n        <symphony-sfx-loader \n        >\n        </symphony-sfx-loader>\n    </section> \n    <symphony-button-v2\n      sfx-button-secondary\n      id=\"button-modal-cancel\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.cancelButtonText\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n    <symphony-button-v2\n      sfx-button-primary\n      id=\"button-modal-assign\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.confirmationButtonText\"\n      [disabled]=\"pageModel.assignBtnDisabled\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [""] }]

package/esm2020/lib/pages/modals/calendar-availability-modal/calendar-availability-modal.component.mjs

@@ -16,7 +16,7 @@ export class CalendarAvailabilityModalComponent {
     }
 }
 CalendarAvailabilityModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CalendarAvailabilityModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CalendarAvailabilityModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CalendarAvailabilityModalComponent, selector: "symphony-calendar-availability-modal", inputs: { calendarAvailabilityModel: "calendarAvailabilityModel" }, outputs: { closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template\n  *ngIf=\"calendarAvailabilityModel\"\n  [hideSubtitle]=\"false\"\n>\n  <symphony-h4 sfx-modal-title>{{\n    calendarAvailabilityModel.modalTitle\n  }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-paragraph sfx-modal-subtitle>\n    {{ calendarAvailabilityModel.modalSubtitle }}\n    <span class=\"calendar-name\">{{ calendarAvailabilityModel.calendarName }}</span>\n  </symphony-paragraph>\n\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && !calendarAvailabilityModel.errorText\"\n    class=\"sfx-p-30\"\n    sfx-modal-body-area\n  >\n    <ng-content select=\"[calendar-availability-body]\"></ng-content>\n  </section>\n  <section\n    *ngIf=\"calendarAvailabilityModel.isLoading\"\n    class=\"sfx-pt-40 sfx-pb-40\"\n    sfx-modal-body-area\n  >\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </section>\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && calendarAvailabilityModel.errorText\"\n    class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\"\n    sfx-modal-body-area\n  >\n    <symphony-paragraph>{{ calendarAvailabilityModel.errorText }}</symphony-paragraph>\n  </section>\n\n  <symphony-button-v2\n    sfx-button-primary\n    id=\"button-modal-close\"\n    class=\"pull-right sfx-d-flex\"\n    text=\"Close\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-button-v2>\n</symphony-two-column-modal-template>\n", styles: [""], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+CalendarAvailabilityModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CalendarAvailabilityModalComponent, selector: "symphony-calendar-availability-modal", inputs: { calendarAvailabilityModel: "calendarAvailabilityModel" }, outputs: { closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template\n  *ngIf=\"calendarAvailabilityModel\"\n  [hideSubtitle]=\"false\"\n>\n  <symphony-h4 sfx-modal-title>{{\n    calendarAvailabilityModel.modalTitle\n  }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-paragraph sfx-modal-subtitle>\n    {{ calendarAvailabilityModel.modalSubtitle }}\n    <span class=\"calendar-name\">{{ calendarAvailabilityModel.calendarName }}</span>\n  </symphony-paragraph>\n\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && !calendarAvailabilityModel.errorText\"\n    class=\"sfx-p-30\"\n    sfx-modal-body-area\n  >\n    <ng-content select=\"[calendar-availability-body]\"></ng-content>\n  </section>\n  <section\n    *ngIf=\"calendarAvailabilityModel.isLoading\"\n    class=\"sfx-pt-40 sfx-pb-40\"\n    sfx-modal-body-area\n  >\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </section>\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && calendarAvailabilityModel.errorText\"\n    class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\"\n    sfx-modal-body-area\n  >\n    <symphony-paragraph>{{ calendarAvailabilityModel.errorText }}</symphony-paragraph>\n  </section>\n\n  <symphony-button-v2\n    sfx-button-primary\n    id=\"button-modal-close\"\n    class=\"pull-right sfx-d-flex\"\n    text=\"Close\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-button-v2>\n</symphony-two-column-modal-template>\n", styles: [""], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CalendarAvailabilityModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-calendar-availability-modal', template: "<symphony-two-column-modal-template\n  *ngIf=\"calendarAvailabilityModel\"\n  [hideSubtitle]=\"false\"\n>\n  <symphony-h4 sfx-modal-title>{{\n    calendarAvailabilityModel.modalTitle\n  }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-paragraph sfx-modal-subtitle>\n    {{ calendarAvailabilityModel.modalSubtitle }}\n    <span class=\"calendar-name\">{{ calendarAvailabilityModel.calendarName }}</span>\n  </symphony-paragraph>\n\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && !calendarAvailabilityModel.errorText\"\n    class=\"sfx-p-30\"\n    sfx-modal-body-area\n  >\n    <ng-content select=\"[calendar-availability-body]\"></ng-content>\n  </section>\n  <section\n    *ngIf=\"calendarAvailabilityModel.isLoading\"\n    class=\"sfx-pt-40 sfx-pb-40\"\n    sfx-modal-body-area\n  >\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </section>\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && calendarAvailabilityModel.errorText\"\n    class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\"\n    sfx-modal-body-area\n  >\n    <symphony-paragraph>{{ calendarAvailabilityModel.errorText }}</symphony-paragraph>\n  </section>\n\n  <symphony-button-v2\n    sfx-button-primary\n    id=\"button-modal-close\"\n    class=\"pull-right sfx-d-flex\"\n    text=\"Close\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-button-v2>\n</symphony-two-column-modal-template>\n", styles: [""] }]