@symphony-talent/component-library 3.18.1 → 3.21.0

package/fesm2020/symphony-talent-component-library.mjs

@@ -1177,25 +1177,27 @@ class SfxLoaderComponent {
     }
 }
 SfxLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SfxLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: { leftStyle: "leftStyle" }, ngImport: i0, template: "<div class=\"col-md-12 sfx-loader\" [style.left.%]=\"leftStyle\"></div>\n", styles: [".sfx-loader{z-index:10000;float:none;padding-top:5px;padding-bottom:5px;height:70px;width:50px;position:relative;padding-inline:0;transform:translate(-50%);display:inline-block;vertical-align:top}.sfx-loader:before{content:\" \";border:5px solid #000000;border-radius:50%;border-top:5px solid #ffffff;width:50px;height:50px;animation:sfxspin .5s linear infinite;position:absolute}\n"] });
+SfxLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: { leftStyle: "leftStyle", message: "message" }, ngImport: i0, template: "<div class=\"col-md-12 sfx-loader\" [style.left.%]=\"leftStyle\"></div>\n<symphony-paragraph *ngIf=\"message?.length > 0\" class=\"text-center\">\n  {{ message }}\n</symphony-paragraph>\n", styles: [".sfx-loader{z-index:10000;float:none;padding-top:5px;padding-bottom:5px;height:70px;width:50px;position:relative;padding-inline:0;transform:translate(-50%);display:inline-block;vertical-align:top}.sfx-loader:before{content:\" \";border:5px solid #000000;border-radius:50%;border-top:5px solid #ffffff;width:50px;height:50px;animation:sfxspin .5s linear infinite;position:absolute}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-sfx-loader', template: "<div class=\"col-md-12 sfx-loader\" [style.left.%]=\"leftStyle\"></div>\n", styles: [".sfx-loader{z-index:10000;float:none;padding-top:5px;padding-bottom:5px;height:70px;width:50px;position:relative;padding-inline:0;transform:translate(-50%);display:inline-block;vertical-align:top}.sfx-loader:before{content:\" \";border:5px solid #000000;border-radius:50%;border-top:5px solid #ffffff;width:50px;height:50px;animation:sfxspin .5s linear infinite;position:absolute}\n"] }]
+            args: [{ selector: 'symphony-sfx-loader', template: "<div class=\"col-md-12 sfx-loader\" [style.left.%]=\"leftStyle\"></div>\n<symphony-paragraph *ngIf=\"message?.length > 0\" class=\"text-center\">\n  {{ message }}\n</symphony-paragraph>\n", styles: [".sfx-loader{z-index:10000;float:none;padding-top:5px;padding-bottom:5px;height:70px;width:50px;position:relative;padding-inline:0;transform:translate(-50%);display:inline-block;vertical-align:top}.sfx-loader:before{content:\" \";border:5px solid #000000;border-radius:50%;border-top:5px solid #ffffff;width:50px;height:50px;animation:sfxspin .5s linear infinite;position:absolute}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { leftStyle: [{
                 type: Input
+            }], message: [{
+                type: Input
             }] } });
 
 class SfxLoaderModule {
 }
 SfxLoaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SfxLoaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxLoaderModule, declarations: [SfxLoaderComponent], imports: [CommonModule], exports: [SfxLoaderComponent] });
-SfxLoaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxLoaderModule, imports: [[CommonModule]] });
+SfxLoaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxLoaderModule, declarations: [SfxLoaderComponent], imports: [CommonModule, ParagraphModule], exports: [SfxLoaderComponent] });
+SfxLoaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxLoaderModule, imports: [[CommonModule, ParagraphModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxLoaderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SfxLoaderComponent],
-                    imports: [CommonModule],
-                    exports: [SfxLoaderComponent],
+                    imports: [CommonModule, ParagraphModule],
+                    exports: [SfxLoaderComponent]
                 }]
         }] });
 
@@ -1972,6 +1974,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class ButtonWithIconComponent {
+    constructor() {
+        this.clicked = new EventEmitter();
+    }
+    onClick() {
+        this.clicked.emit(this.text);
+    }
+}
+ButtonWithIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ButtonWithIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ButtonWithIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: { text: "text", icon: "icon", showActionButton: "showActionButton" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-actions-items-list sfx-mr-30\" *ngIf=\"showActionButton\">\n  <button (click)=\"onClick()\">\n    <symphony-icon [icon]=\"icon\"></symphony-icon>{{ text }}\n  </button>\n</div>\n", styles: [".sfx-actions-items-list button{background:transparent;border:none;outline:none}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}.sfx-actions-items-list button i.si-edit,.sfx-actions-items-list button i.si-download{font-size:9px!important;height:18px;width:18px;border:0;background:#000;color:#fff;border-radius:50%;padding:6px;position:relative;top:-2px;font-weight:600}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], 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: ButtonWithIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-button-with-icon', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-actions-items-list sfx-mr-30\" *ngIf=\"showActionButton\">\n  <button (click)=\"onClick()\">\n    <symphony-icon [icon]=\"icon\"></symphony-icon>{{ text }}\n  </button>\n</div>\n", styles: [".sfx-actions-items-list button{background:transparent;border:none;outline:none}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}.sfx-actions-items-list button i.si-edit,.sfx-actions-items-list button i.si-download{font-size:9px!important;height:18px;width:18px;border:0;background:#000;color:#fff;border-radius:50%;padding:6px;position:relative;top:-2px;font-weight:600}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], showActionButton: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class ButtonWithIconModule {
+}
+ButtonWithIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ButtonWithIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ButtonWithIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ButtonWithIconModule, declarations: [ButtonWithIconComponent], imports: [CommonModule, IconModule], exports: [ButtonWithIconComponent] });
+ButtonWithIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ButtonWithIconModule, imports: [[CommonModule, IconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ButtonWithIconModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ButtonWithIconComponent],
+                    imports: [CommonModule, IconModule],
+                    exports: [ButtonWithIconComponent],
+                }]
+        }] });
+
 class MoleculesModule {
 }
 MoleculesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1988,7 +2027,8 @@ MoleculesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         SfxAccordionHeaderModule,
         FileUploadModule,
         FileUploadStatusModule,
-        FeedbackCardModule], exports: [PillsModule, BreadcrumbModule, FeedbackCardModule] });
+        FeedbackCardModule,
+        ButtonWithIconModule], exports: [PillsModule, BreadcrumbModule, FeedbackCardModule] });
 MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, imports: [[
             CommonModule,
             AvatarModule,
@@ -2003,7 +2043,8 @@ MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             SfxAccordionHeaderModule,
             FileUploadModule,
             FileUploadStatusModule,
-            FeedbackCardModule
+            FeedbackCardModule,
+            ButtonWithIconModule,
         ], PillsModule, BreadcrumbModule, FeedbackCardModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, decorators: [{
             type: NgModule,
@@ -2023,7 +2064,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         SfxAccordionHeaderModule,
                         FileUploadModule,
                         FileUploadStatusModule,
-                        FeedbackCardModule
+                        FeedbackCardModule,
+                        ButtonWithIconModule,
                     ],
                     exports: [PillsModule, BreadcrumbModule, FeedbackCardModule]
                 }]
@@ -2111,7 +2153,7 @@ 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" }, 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>To access the feedback request, two-factor authentication is required. Please enter the verification code that was sent to the following email address:</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      >\n      </symphony-input-text>\n      <symphony-h5\n        class=\"sfx-d-inline-block sfx-cursor-pointer\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red\">\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\n      class=\"sfx-ml-20\"\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".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}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.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" }, 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>To access the feedback request, two-factor authentication is required. Please enter the verification code that was sent to the following email address:</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      >\n      </symphony-input-text>\n      <symphony-h5\n        class=\"sfx-d-inline-block sfx-cursor-pointer\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red\">\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\n      class=\"sfx-ml-20\"\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".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}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], 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: 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>To access the feedback request, two-factor authentication is required. Please enter the verification code that was sent to the following email address:</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      >\n      </symphony-input-text>\n      <symphony-h5\n        class=\"sfx-d-inline-block sfx-cursor-pointer\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red\">\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\n      class=\"sfx-ml-20\"\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".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}\n"] }]
@@ -2234,7 +2276,7 @@ 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" }, 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\">\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\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n        ></symphony-file-upload>\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.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError\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      \"\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      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: FileUploadComponent, selector: "symphony-file-upload", inputs: ["fileUploadModel"], outputs: ["closeClick", "getFileDetails"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.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" }, 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\">\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\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n        ></symphony-file-upload>\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.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError\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      \"\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      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: FileUploadComponent, selector: "symphony-file-upload", inputs: ["fileUploadModel"], outputs: ["closeClick", "getFileDetails"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.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\">\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\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n        ></symphony-file-upload>\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.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError\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      \"\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      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"] }]
@@ -2270,6 +2312,188 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class ActionBarComponent {
+    constructor() {
+        this.toggleClick = new EventEmitter();
+    }
+    toggleClicked() {
+        this.isToggled = !this.isToggled;
+        this.toggleClick.emit(this.isToggled);
+    }
+}
+ActionBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ActionBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ActionBarComponent, selector: "symphony-action-bar", inputs: { isToggled: "isToggled" }, outputs: { toggleClick: "toggleClick" }, ngImport: i0, template: "<div class=\"sfx-title-wrap sfx-mt-30 sfx-pb-30 sfx-action-bar\">\n  <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3 sfx-p-0 sfx-action-button\">\n    <div class=\"max-contentwidth\" (click)=\"toggleClicked()\">\n      <symphony-icon-wrapper\n        [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n        class=\"sfx-d-inline-block sfx-actions\"\n        ><symphony-icon [icon]=\"'si-arrow-next'\"></symphony-icon>\n      </symphony-icon-wrapper>\n      <symphony-h5 class=\"sfx-d-inline-block sfx-ml-20\">Actions</symphony-h5>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-sm-6 col-md-8 col-lg-9 sfx-p-0\">\n    <div class=\"pull-right sfx-actions-controls\">\n      <ng-content select=\"[grid-controls]\"></ng-content>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"isToggled\"\n  class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-border-bottom-gray-1 sfx-pr-0\"\n>\n  <div\n    class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-actions-items sfx-pt-40 sfx-pb-40\"\n  >\n    <ng-content select=\"[grid-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:5px solid #000000}.sfx-action-bar .sfx-action-button .max-contentwidth{width:max-content}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}\n"], components: [{ type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ActionBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-action-bar', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-title-wrap sfx-mt-30 sfx-pb-30 sfx-action-bar\">\n  <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3 sfx-p-0 sfx-action-button\">\n    <div class=\"max-contentwidth\" (click)=\"toggleClicked()\">\n      <symphony-icon-wrapper\n        [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n        class=\"sfx-d-inline-block sfx-actions\"\n        ><symphony-icon [icon]=\"'si-arrow-next'\"></symphony-icon>\n      </symphony-icon-wrapper>\n      <symphony-h5 class=\"sfx-d-inline-block sfx-ml-20\">Actions</symphony-h5>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-sm-6 col-md-8 col-lg-9 sfx-p-0\">\n    <div class=\"pull-right sfx-actions-controls\">\n      <ng-content select=\"[grid-controls]\"></ng-content>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"isToggled\"\n  class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-border-bottom-gray-1 sfx-pr-0\"\n>\n  <div\n    class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-actions-items sfx-pt-40 sfx-pb-40\"\n  >\n    <ng-content select=\"[grid-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:5px solid #000000}.sfx-action-bar .sfx-action-button .max-contentwidth{width:max-content}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { isToggled: [{
+                type: Input
+            }], toggleClick: [{
+                type: Output
+            }] } });
+
+class GridControlsJobListComponent {
+    constructor() {
+        this.Clicked = new EventEmitter();
+        this.gridMoreActions = {
+            hasBorder: false,
+            items: [],
+        };
+    }
+    onClick() {
+        this.Clicked.emit();
+    }
+    ngOnInit() {
+        this.gridMoreActions.items = this.model.gridActions;
+    }
+}
+GridControlsJobListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsJobListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GridControlsJobListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridControlsJobListComponent, selector: "symphony-grid-controls-job-list", inputs: { model: "model" }, outputs: { Clicked: "Clicked" }, ngImport: i0, template: "<div class=\"sfx-actions\">\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-mt-10 sfx-pr-30\"\n    *ngIf=\"model.gridRowCount\"\n  >\n    <strong class=\"text-label\">{{ model.gridRowCount }}</strong>\n  </div>\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-pr-20\"\n    *ngIf=\"model.showCustomiseColumns\"\n  >\n    <symphony-tooltip-wrapper\n      [tooltipHtml]=\"'Customise Columns'\"\n      [placement]=\"'top'\"\n      class=\"actionIcon-tooltip\"\n    >\n      <symphony-icon-wrapper (click)=\"onClick()\"\n        ><symphony-icon [icon]=\"'si-organize-columns'\"></symphony-icon>\n      </symphony-icon-wrapper>\n    </symphony-tooltip-wrapper>\n  </div>\n  <div class=\"sfx-d-inline-block pull-left\">\n    <symphony-contextual-menu\n      class=\"task-more-option\"\n      *ngIf=\"gridMoreActions && gridMoreActions.items.length > 0\"\n      [model]=\"gridMoreActions\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".task-more-option .btn-group .dropdown-menu{min-width:200px!important}.actionIcon-tooltip .tooltip{min-width:160px}.actionIcon-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"], components: [{ type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], 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: GridControlsJobListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-grid-controls-job-list', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-actions\">\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-mt-10 sfx-pr-30\"\n    *ngIf=\"model.gridRowCount\"\n  >\n    <strong class=\"text-label\">{{ model.gridRowCount }}</strong>\n  </div>\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-pr-20\"\n    *ngIf=\"model.showCustomiseColumns\"\n  >\n    <symphony-tooltip-wrapper\n      [tooltipHtml]=\"'Customise Columns'\"\n      [placement]=\"'top'\"\n      class=\"actionIcon-tooltip\"\n    >\n      <symphony-icon-wrapper (click)=\"onClick()\"\n        ><symphony-icon [icon]=\"'si-organize-columns'\"></symphony-icon>\n      </symphony-icon-wrapper>\n    </symphony-tooltip-wrapper>\n  </div>\n  <div class=\"sfx-d-inline-block pull-left\">\n    <symphony-contextual-menu\n      class=\"task-more-option\"\n      *ngIf=\"gridMoreActions && gridMoreActions.items.length > 0\"\n      [model]=\"gridMoreActions\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".task-more-option .btn-group .dropdown-menu{min-width:200px!important}.actionIcon-tooltip .tooltip{min-width:160px}.actionIcon-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], Clicked: [{
+                type: Output
+            }] } });
+
+class GridActionsJobListComponent {
+    constructor() {
+        this.buttonClicked = new EventEmitter();
+    }
+    onButtonClick(text) {
+        this.buttonClicked.emit(text);
+    }
+}
+GridActionsJobListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GridActionsJobListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridActionsJobListComponent, selector: "symphony-grid-actions-job-list", inputs: { model: "model", isInverse: "isInverse" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<div class=\"sfx-d-inline-block\" *ngFor=\"let actionButton of model\">\n  <symphony-button-with-icon\n    (clicked)=\"onButtonClick($event)\"\n    [icon]=\"actionButton.icon\"\n    [text]=\"actionButton.text\"\n    [showActionButton]=\"actionButton.showActionButton\"\n  ></symphony-button-with-icon>\n</div>\n", styles: [""], components: [{ type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: ["text", "icon", "showActionButton"], outputs: ["clicked"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-grid-actions-job-list', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-d-inline-block\" *ngFor=\"let actionButton of model\">\n  <symphony-button-with-icon\n    (clicked)=\"onButtonClick($event)\"\n    [icon]=\"actionButton.icon\"\n    [text]=\"actionButton.text\"\n    [showActionButton]=\"actionButton.showActionButton\"\n  ></symphony-button-with-icon>\n</div>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], buttonClicked: [{
+                type: Output
+            }], isInverse: [{
+                type: Input
+            }] } });
+
+class ActionBarJobListComponent {
+    constructor() {
+        this.ContactOrganizeClicked = new EventEmitter();
+        this.ColumnOrganizeClicked = new EventEmitter();
+        this.IconButtonClicked = new EventEmitter();
+    }
+    OrganizeContactClick() {
+        this.ContactOrganizeClicked.emit();
+    }
+    IconButtonClick(text) {
+        this.IconButtonClicked.emit(text);
+    }
+}
+ActionBarJobListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarJobListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ActionBarJobListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ActionBarJobListComponent, selector: "symphony-action-bar-job-list", inputs: { gridActionJobListModel: "gridActionJobListModel", gridControlsJobListModel: "gridControlsJobListModel" }, outputs: { ContactOrganizeClicked: "ContactOrganizeClicked", ColumnOrganizeClicked: "ColumnOrganizeClicked", IconButtonClicked: "IconButtonClicked" }, ngImport: i0, template: "<symphony-action-bar>\n  <symphony-grid-controls-job-list\n    (Clicked)=\"OrganizeContactClick()\"\n    [model]=\"gridControlsJobListModel\"\n    grid-controls\n  ></symphony-grid-controls-job-list>\n  <symphony-grid-actions-job-list\n    (buttonClicked)=\"IconButtonClick($event)\"\n    [model]=\"gridActionJobListModel\"\n    grid-actions\n  ></symphony-grid-actions-job-list>\n</symphony-action-bar>\n", styles: [""], components: [{ type: ActionBarComponent, selector: "symphony-action-bar", inputs: ["isToggled"], outputs: ["toggleClick"] }, { type: GridControlsJobListComponent, selector: "symphony-grid-controls-job-list", inputs: ["model"], outputs: ["Clicked"] }, { type: GridActionsJobListComponent, selector: "symphony-grid-actions-job-list", inputs: ["model", "isInverse"], outputs: ["buttonClicked"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarJobListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-action-bar-job-list', template: "<symphony-action-bar>\n  <symphony-grid-controls-job-list\n    (Clicked)=\"OrganizeContactClick()\"\n    [model]=\"gridControlsJobListModel\"\n    grid-controls\n  ></symphony-grid-controls-job-list>\n  <symphony-grid-actions-job-list\n    (buttonClicked)=\"IconButtonClick($event)\"\n    [model]=\"gridActionJobListModel\"\n    grid-actions\n  ></symphony-grid-actions-job-list>\n</symphony-action-bar>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { gridActionJobListModel: [{
+                type: Input
+            }], gridControlsJobListModel: [{
+                type: Input
+            }], ContactOrganizeClicked: [{
+                type: Output
+            }], ColumnOrganizeClicked: [{
+                type: Output
+            }], IconButtonClicked: [{
+                type: Output
+            }] } });
+
+class GridActionsJobListModule {
+}
+GridActionsJobListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GridActionsJobListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListModule, declarations: [GridActionsJobListComponent], imports: [CommonModule, ButtonWithIconModule], exports: [GridActionsJobListComponent] });
+GridActionsJobListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListModule, imports: [[CommonModule, ButtonWithIconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GridActionsJobListComponent],
+                    imports: [CommonModule, ButtonWithIconModule],
+                    exports: [GridActionsJobListComponent],
+                }]
+        }] });
+
+class ActionBarModule {
+}
+ActionBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ActionBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarModule, declarations: [ActionBarComponent], imports: [CommonModule, IconModule, IconWrapperModule, H5Module], exports: [ActionBarComponent] });
+ActionBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarModule, imports: [[CommonModule, IconModule, IconWrapperModule, H5Module]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ActionBarComponent],
+                    imports: [CommonModule, IconModule, IconWrapperModule, H5Module],
+                    exports: [ActionBarComponent],
+                }]
+        }] });
+
+class GridControlsJobListModule {
+}
+GridControlsJobListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsJobListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GridControlsJobListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsJobListModule, declarations: [GridControlsJobListComponent], imports: [CommonModule,
+        IconModule,
+        IconWrapperModule,
+        ContextualMenuModule,
+        TooltipWrapperModule], exports: [GridControlsJobListComponent] });
+GridControlsJobListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsJobListModule, imports: [[
+            CommonModule,
+            IconModule,
+            IconWrapperModule,
+            ContextualMenuModule,
+            TooltipWrapperModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsJobListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GridControlsJobListComponent],
+                    imports: [
+                        CommonModule,
+                        IconModule,
+                        IconWrapperModule,
+                        ContextualMenuModule,
+                        TooltipWrapperModule,
+                    ],
+                    exports: [GridControlsJobListComponent],
+                }]
+        }] });
+
+class ActionBarJobListModule {
+}
+ActionBarJobListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarJobListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ActionBarJobListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarJobListModule, declarations: [ActionBarJobListComponent], imports: [CommonModule,
+        GridActionsJobListModule,
+        ActionBarModule,
+        GridControlsJobListModule], exports: [ActionBarJobListComponent] });
+ActionBarJobListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarJobListModule, imports: [[
+            CommonModule,
+            GridActionsJobListModule,
+            ActionBarModule,
+            GridControlsJobListModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarJobListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ActionBarJobListComponent],
+                    imports: [
+                        CommonModule,
+                        GridActionsJobListModule,
+                        ActionBarModule,
+                        GridControlsJobListModule,
+                    ],
+                    exports: [ActionBarJobListComponent],
+                }]
+        }] });
+
 class NoteComponent {
     constructor() {
         this.noteModel = {
@@ -3206,10 +3430,10 @@ class FeedbackDetailHeaderComponent {
     }
 }
 FeedbackDetailHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackDetailHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailHeaderComponent, selector: "symphony-feedback-detail-header", inputs: { model: "model" }, outputs: { previewClicked: "previewClicked" }, ngImport: i0, template: "<div *ngIf=\"model\" class=\"sfx-d-inline-block sfx-mr-40\">\n  <symphony-h3 [text]=\"model.name\"></symphony-h3>\n\n  <ul class=\"candidate-details sfx-mt-10 sfx-mb-20 list-unstyled\">\n    <li>{{ model.location }}</li>\n    <li>{{ model.email }}</li>\n    <li>{{ model.phone }}</li>\n  </ul>\n</div>\n\n<div class=\"sfx-d-inline-block align-text-bottom\">\n  <symphony-icon-wrapper (clicked)=\"onClick()\">\n    <symphony-icon [icon]=\"'si-preview'\"></symphony-icon\n  ></symphony-icon-wrapper>\n</div>\n\n<a href=\"#review\">\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'Review'\"\n    [isSecondary]=\"true\"\n    class=\"sfx-d-none visible-xs-inline-block sfx-ml-20 align-text-bottom review-button\"\n  >\n  </symphony-button>\n</a>\n", styles: [".candidate-details li{display:inline-block}.candidate-details li:nth-child(2):before,.candidate-details li:nth-child(2):after{content:\"\\a\";width:5px;height:5px;border-radius:50%;background:#000;display:inline-block;margin:2px 6px}.align-text-bottom{vertical-align:text-bottom}.review-button .btn.btn-secondary{min-width:100px;height:40px;padding-left:25px;padding-right:25px}@media (max-width: 320px){.candidate-details li:nth-child(2):after{display:none}}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackDetailHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailHeaderComponent, selector: "symphony-feedback-detail-header", inputs: { model: "model" }, outputs: { previewClicked: "previewClicked" }, ngImport: i0, template: "<div *ngIf=\"model\" class=\"sfx-d-inline-block\">\n  <symphony-h3 [text]=\"model.name\"></symphony-h3>\n\n  <ul class=\"candidate-details sfx-mt-10 sfx-mb-20 list-unstyled\">\n    <li>{{ model.location }}</li>\n    <li>{{ model.email }}</li>\n    <li>{{ model.phone }}</li>\n  </ul>\n</div>\n\n<div class=\"sfx-d-inline-block align-text-bottom\">\n  <symphony-icon-wrapper (clicked)=\"onClick()\">\n    <symphony-icon [icon]=\"'si-preview'\"></symphony-icon\n  ></symphony-icon-wrapper>\n</div>\n\n<a href=\"#review\">\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'Review'\"\n    [isSecondary]=\"true\"\n    class=\"sfx-d-none visible-xs-inline-block sfx-ml-20 align-text-bottom review-button\"\n  >\n  </symphony-button>\n</a>\n", styles: [".candidate-details{min-width:435px}.candidate-details li{display:inline-block}.candidate-details li:nth-child(2):before,.candidate-details li:nth-child(2):after{content:\"\\a\";width:4px;height:4px;border-radius:50%;background:#000;display:inline-block;margin:2px 6px}.align-text-bottom{vertical-align:text-bottom}.review-button .btn.btn-secondary{min-width:100px;height:40px;padding-left:25px;padding-right:25px}@media (max-width: 320px){.candidate-details li:nth-child(2):after{display:none}}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], 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: FeedbackDetailHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-feedback-detail-header', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\" class=\"sfx-d-inline-block sfx-mr-40\">\n  <symphony-h3 [text]=\"model.name\"></symphony-h3>\n\n  <ul class=\"candidate-details sfx-mt-10 sfx-mb-20 list-unstyled\">\n    <li>{{ model.location }}</li>\n    <li>{{ model.email }}</li>\n    <li>{{ model.phone }}</li>\n  </ul>\n</div>\n\n<div class=\"sfx-d-inline-block align-text-bottom\">\n  <symphony-icon-wrapper (clicked)=\"onClick()\">\n    <symphony-icon [icon]=\"'si-preview'\"></symphony-icon\n  ></symphony-icon-wrapper>\n</div>\n\n<a href=\"#review\">\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'Review'\"\n    [isSecondary]=\"true\"\n    class=\"sfx-d-none visible-xs-inline-block sfx-ml-20 align-text-bottom review-button\"\n  >\n  </symphony-button>\n</a>\n", styles: [".candidate-details li{display:inline-block}.candidate-details li:nth-child(2):before,.candidate-details li:nth-child(2):after{content:\"\\a\";width:5px;height:5px;border-radius:50%;background:#000;display:inline-block;margin:2px 6px}.align-text-bottom{vertical-align:text-bottom}.review-button .btn.btn-secondary{min-width:100px;height:40px;padding-left:25px;padding-right:25px}@media (max-width: 320px){.candidate-details li:nth-child(2):after{display:none}}\n"] }]
+            args: [{ selector: 'symphony-feedback-detail-header', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\" class=\"sfx-d-inline-block\">\n  <symphony-h3 [text]=\"model.name\"></symphony-h3>\n\n  <ul class=\"candidate-details sfx-mt-10 sfx-mb-20 list-unstyled\">\n    <li>{{ model.location }}</li>\n    <li>{{ model.email }}</li>\n    <li>{{ model.phone }}</li>\n  </ul>\n</div>\n\n<div class=\"sfx-d-inline-block align-text-bottom\">\n  <symphony-icon-wrapper (clicked)=\"onClick()\">\n    <symphony-icon [icon]=\"'si-preview'\"></symphony-icon\n  ></symphony-icon-wrapper>\n</div>\n\n<a href=\"#review\">\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'Review'\"\n    [isSecondary]=\"true\"\n    class=\"sfx-d-none visible-xs-inline-block sfx-ml-20 align-text-bottom review-button\"\n  >\n  </symphony-button>\n</a>\n", styles: [".candidate-details{min-width:435px}.candidate-details li{display:inline-block}.candidate-details li:nth-child(2):before,.candidate-details li:nth-child(2):after{content:\"\\a\";width:4px;height:4px;border-radius:50%;background:#000;display:inline-block;margin:2px 6px}.align-text-bottom{vertical-align:text-bottom}.review-button .btn.btn-secondary{min-width:100px;height:40px;padding-left:25px;padding-right:25px}@media (max-width: 320px){.candidate-details li:nth-child(2):after{display:none}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], previewClicked: [{
@@ -3250,10 +3474,10 @@ class FeedbackCandidateWorkHistoryComponent {
     constructor() { }
 }
 FeedbackCandidateWorkHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateWorkHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackCandidateWorkHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCandidateWorkHistoryComponent, selector: "symphony-feedback-candidate-workhistory", inputs: { workHistories: "workHistories" }, ngImport: i0, template: "<section *ngIf=\"workHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 border-bottom sfx-mb-0\">\n    <li *ngFor=\"let history of workHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"history.jobTitle\"\n      ></symphony-h3>\n      <symphony-paragraph\n        class=\"sfx-font-bold sfx-d-block sfx-mb-5\"\n        [text]=\"history.companyName\"\n      ></symphony-paragraph>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ history.startDate }} - {{ history.endDate }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-5\"\n        [text]=\"history.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph [text]=\"history.description\"></symphony-paragraph>\n    </li>\n  </ul>\n</section>\n", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackCandidateWorkHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCandidateWorkHistoryComponent, selector: "symphony-feedback-candidate-workhistory", inputs: { workHistories: "workHistories" }, ngImport: i0, template: "<section *ngIf=\"workHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 border-bottom sfx-mb-0\">\n    <li *ngFor=\"let history of workHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"history.jobTitle\"\n      ></symphony-h3>\n      <symphony-paragraph\n        class=\"sfx-font-bold sfx-d-block sfx-mb-5\"\n        [text]=\"history.companyName\"\n      ></symphony-paragraph>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ history.startDate }} - {{ history.endDate }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-5\"\n        [text]=\"history.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph [text]=\"history.description\"></symphony-paragraph>\n    </li>\n  </ul>\n</section>\n", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}@media (max-width: 767px){.list-unstyled.sfx-mt-40{margin-top:35px}}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateWorkHistoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-feedback-candidate-workhistory', encapsulation: ViewEncapsulation.None, template: "<section *ngIf=\"workHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 border-bottom sfx-mb-0\">\n    <li *ngFor=\"let history of workHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"history.jobTitle\"\n      ></symphony-h3>\n      <symphony-paragraph\n        class=\"sfx-font-bold sfx-d-block sfx-mb-5\"\n        [text]=\"history.companyName\"\n      ></symphony-paragraph>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ history.startDate }} - {{ history.endDate }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-5\"\n        [text]=\"history.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph [text]=\"history.description\"></symphony-paragraph>\n    </li>\n  </ul>\n</section>\n", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}\n"] }]
+            args: [{ selector: 'symphony-feedback-candidate-workhistory', encapsulation: ViewEncapsulation.None, template: "<section *ngIf=\"workHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 border-bottom sfx-mb-0\">\n    <li *ngFor=\"let history of workHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"history.jobTitle\"\n      ></symphony-h3>\n      <symphony-paragraph\n        class=\"sfx-font-bold sfx-d-block sfx-mb-5\"\n        [text]=\"history.companyName\"\n      ></symphony-paragraph>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ history.startDate }} - {{ history.endDate }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-5\"\n        [text]=\"history.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph [text]=\"history.description\"></symphony-paragraph>\n    </li>\n  </ul>\n</section>\n", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}@media (max-width: 767px){.list-unstyled.sfx-mt-40{margin-top:35px}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { workHistories: [{
                 type: Input
             }] } });
@@ -3262,10 +3486,10 @@ class FeedbackCandidateEducationComponent {
     constructor() { }
 }
 FeedbackCandidateEducationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateEducationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackCandidateEducationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCandidateEducationComponent, selector: "symphony-feedback-candidate-education", inputs: { educationHistories: "educationHistories" }, ngImport: i0, template: "<section *ngIf=\"educationHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 border-bottom sfx-mb-0\">\n    <li *ngFor=\"let education of educationHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"education.collegeName\"\n      ></symphony-h3>\n      <symphony-paragraph\n        class=\"sfx-font-bold sfx-d-block sfx-mb-5\"\n        [text]=\"education.courseName\"\n      ></symphony-paragraph>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ education.startYear }} - {{ education.endYear }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-5\"\n        [text]=\"education.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph [text]=\"education.status\"></symphony-paragraph>\n    </li>\n  </ul>\n</section>\n", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+FeedbackCandidateEducationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCandidateEducationComponent, selector: "symphony-feedback-candidate-education", inputs: { educationHistories: "educationHistories" }, ngImport: i0, template: "<section *ngIf=\"educationHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 border-bottom sfx-mb-0\">\n    <li *ngFor=\"let education of educationHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"education.collegeName\"\n      ></symphony-h3>\n      <symphony-paragraph\n        class=\"sfx-font-bold sfx-d-block sfx-mb-5\"\n        [text]=\"education.courseName\"\n      ></symphony-paragraph>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ education.startYear }} - {{ education.endYear }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-5\"\n        [text]=\"education.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph [text]=\"education.status\"></symphony-paragraph>\n    </li>\n  </ul>\n</section>\n", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}@media (max-width: 767px){.list-unstyled.sfx-mt-40{margin-top:35px}}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateEducationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-feedback-candidate-education', template: "<section *ngIf=\"educationHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 border-bottom sfx-mb-0\">\n    <li *ngFor=\"let education of educationHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"education.collegeName\"\n      ></symphony-h3>\n      <symphony-paragraph\n        class=\"sfx-font-bold sfx-d-block sfx-mb-5\"\n        [text]=\"education.courseName\"\n      ></symphony-paragraph>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ education.startYear }} - {{ education.endYear }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-5\"\n        [text]=\"education.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph [text]=\"education.status\"></symphony-paragraph>\n    </li>\n  </ul>\n</section>\n", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}\n"] }]
+            args: [{ selector: 'symphony-feedback-candidate-education', template: "<section *ngIf=\"educationHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 border-bottom sfx-mb-0\">\n    <li *ngFor=\"let education of educationHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"education.collegeName\"\n      ></symphony-h3>\n      <symphony-paragraph\n        class=\"sfx-font-bold sfx-d-block sfx-mb-5\"\n        [text]=\"education.courseName\"\n      ></symphony-paragraph>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ education.startYear }} - {{ education.endYear }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-5\"\n        [text]=\"education.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph [text]=\"education.status\"></symphony-paragraph>\n    </li>\n  </ul>\n</section>\n", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}@media (max-width: 767px){.list-unstyled.sfx-mt-40{margin-top:35px}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { educationHistories: [{
                 type: Input
             }] } });
@@ -3274,10 +3498,10 @@ class FeedbackCandidateCertificationsComponent {
     constructor() { }
 }
 FeedbackCandidateCertificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateCertificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackCandidateCertificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCandidateCertificationsComponent, selector: "symphony-feedback-candidate-certifications", inputs: { certificationHistories: "certificationHistories" }, ngImport: i0, template: "<section *ngIf=\"certificationHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 sfx-mb-0 border-bottom\">\n    <li *ngFor=\"let certifications of certificationHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"certifications.name\"\n      ></symphony-h3>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ certifications.startYear }} -\n        {{ certifications.endYear }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-5\"\n        [text]=\"certifications.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph\n        [text]=\"certifications.description\"\n      ></symphony-paragraph>\n    </li>\n  </ul>\n</section>\n", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+FeedbackCandidateCertificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCandidateCertificationsComponent, selector: "symphony-feedback-candidate-certifications", inputs: { certificationHistories: "certificationHistories" }, ngImport: i0, template: "<section *ngIf=\"certificationHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 sfx-mb-0 border-bottom\">\n    <li *ngFor=\"let certifications of certificationHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"certifications.name\"\n      ></symphony-h3>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ certifications.startYear }} -\n        {{ certifications.endYear }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-5\"\n        [text]=\"certifications.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph\n        [text]=\"certifications.description\"\n      ></symphony-paragraph>\n    </li>\n  </ul>\n</section>\n", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}@media (max-width: 767px){.list-unstyled.sfx-mt-40{margin-top:35px}}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateCertificationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-feedback-candidate-certifications', template: "<section *ngIf=\"certificationHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 sfx-mb-0 border-bottom\">\n    <li *ngFor=\"let certifications of certificationHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"certifications.name\"\n      ></symphony-h3>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ certifications.startYear }} -\n        {{ certifications.endYear }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-5\"\n        [text]=\"certifications.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph\n        [text]=\"certifications.description\"\n      ></symphony-paragraph>\n    </li>\n  </ul>\n</section>\n", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}\n"] }]
+            args: [{ selector: 'symphony-feedback-candidate-certifications', template: "<section *ngIf=\"certificationHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 sfx-mb-0 border-bottom\">\n    <li *ngFor=\"let certifications of certificationHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"certifications.name\"\n      ></symphony-h3>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ certifications.startYear }} -\n        {{ certifications.endYear }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-5\"\n        [text]=\"certifications.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph\n        [text]=\"certifications.description\"\n      ></symphony-paragraph>\n    </li>\n  </ul>\n</section>\n", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}@media (max-width: 767px){.list-unstyled.sfx-mt-40{margin-top:35px}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { certificationHistories: [{
                 type: Input
             }] } });
@@ -3394,7 +3618,11 @@ OrganismsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         FeedbackCardListModule,
         FeedbackDetailHeaderModule,
         FeedbackDetailCandidateInfoModule,
-        FeedbackLoginModalModule] });
+        FeedbackLoginModalModule,
+        GridActionsJobListModule,
+        GridControlsJobListModule,
+        ActionBarModule,
+        ActionBarJobListModule] });
 OrganismsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrganismsModule, imports: [[
             CommonModule,
             NoteListModule,
@@ -3407,7 +3635,11 @@ OrganismsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             FeedbackCardListModule,
             FeedbackDetailHeaderModule,
             FeedbackDetailCandidateInfoModule,
-            FeedbackLoginModalModule
+            FeedbackLoginModalModule,
+            GridActionsJobListModule,
+            GridControlsJobListModule,
+            ActionBarModule,
+            ActionBarJobListModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrganismsModule, decorators: [{
             type: NgModule,
@@ -3425,7 +3657,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         FeedbackCardListModule,
                         FeedbackDetailHeaderModule,
                         FeedbackDetailCandidateInfoModule,
-                        FeedbackLoginModalModule
+                        FeedbackLoginModalModule,
+                        GridActionsJobListModule,
+                        GridControlsJobListModule,
+                        ActionBarModule,
+                        ActionBarJobListModule
                     ]
                 }]
         }] });
@@ -3990,7 +4226,7 @@ class AdvertiseModalComponent {
     }
 }
 AdvertiseModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, deps: [], 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" }, 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      [noMargin]=\"true\"\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]=\"filteredPostingBoardList\"\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  >\n    <div sfx-left-column class=\"posting-boards\">\n      <symphony-advertise-order-review></symphony-advertise-order-review>\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.showConfirmation\"\n    sfx-modal-body-area\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div sfx-right-column class=\"posting-boards\">\n      <div class=\"stage\">\n        <div class=\"box bounce-7\">\n          <div class=\"complete-container\">\n            <symphony-h2>Your order is complete</symphony-h2>\n            <div class=\"success-icon-spacing\">\n              <symphony-icon\n                [icon]=\"'si-confirmation'\"\n                [iconColor]=\"'#00D56B'\"\n                [size]=\"'50px'\"\n              ></symphony-icon>\n            </div>\n          </div>\n        </div>\n      </div>\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\"\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-cancel-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-cancel-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-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: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: AdvertiseOrderReviewComponent, selector: "symphony-advertise-order-review" }, { type: H2Component, selector: "symphony-h2", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: CancelModalComponent, selector: "symphony-cancel-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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" }, 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      [noMargin]=\"true\"\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]=\"filteredPostingBoardList\"\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  >\n    <div sfx-left-column class=\"posting-boards\">\n      <symphony-advertise-order-review></symphony-advertise-order-review>\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.showConfirmation\"\n    sfx-modal-body-area\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div sfx-right-column class=\"posting-boards\">\n      <div class=\"stage\">\n        <div class=\"box bounce-7\">\n          <div class=\"complete-container\">\n            <symphony-h2>Your order is complete</symphony-h2>\n            <div class=\"success-icon-spacing\">\n              <symphony-icon\n                [icon]=\"'si-confirmation'\"\n                [iconColor]=\"'#00D56B'\"\n                [size]=\"'50px'\"\n              ></symphony-icon>\n            </div>\n          </div>\n        </div>\n      </div>\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\"\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-cancel-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-cancel-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-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: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: AdvertiseOrderReviewComponent, selector: "symphony-advertise-order-review" }, { type: H2Component, selector: "symphony-h2", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: CancelModalComponent, selector: "symphony-cancel-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-advertise-modal', 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      [noMargin]=\"true\"\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]=\"filteredPostingBoardList\"\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  >\n    <div sfx-left-column class=\"posting-boards\">\n      <symphony-advertise-order-review></symphony-advertise-order-review>\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.showConfirmation\"\n    sfx-modal-body-area\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div sfx-right-column class=\"posting-boards\">\n      <div class=\"stage\">\n        <div class=\"box bounce-7\">\n          <div class=\"complete-container\">\n            <symphony-h2>Your order is complete</symphony-h2>\n            <div class=\"success-icon-spacing\">\n              <symphony-icon\n                [icon]=\"'si-confirmation'\"\n                [iconColor]=\"'#00D56B'\"\n                [size]=\"'50px'\"\n              ></symphony-icon>\n            </div>\n          </div>\n        </div>\n      </div>\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\"\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-cancel-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-cancel-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-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"] }]
@@ -4264,10 +4500,10 @@ 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", submitButtonClicked: "submitButtonClicked" }, ngImport: i0, template: "<symphony-feedback-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>Feedback Request</symphony-h3>\n  <symphony-button\n    button-primary\n    [text]=\"'Submit Feedback'\"\n    class=\"pull-right\"\n    (clicked)=\"onSubmitButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-feedback-card-list\n    feedback-card-list\n    [feedbackCardList]=\"model.feedbackCardList\"\n    (cardClick)=\"onCardClick($event)\"\n  ></symphony-feedback-card-list>\n</symphony-feedback-list-template>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}\n"], components: [{ type: FeedbackListTemplateComponent, selector: "symphony-feedback-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: FeedbackCardListComponent, selector: "symphony-feedback-card-list", inputs: ["feedbackCardList"], outputs: ["cardClick"] }], directives: [{ type: i1.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", submitButtonClicked: "submitButtonClicked" }, ngImport: i0, template: "<symphony-feedback-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>Feedback Request</symphony-h3>\n  <symphony-button\n    button-primary\n    [text]=\"'Submit Feedback'\"\n    class=\"pull-right\"\n    [disabled]=\"model.isSubmitDisabled\"\n    (clicked)=\"onSubmitButtonClick($event)\"\n  ></symphony-button>\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</symphony-feedback-list-template>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}\n"], components: [{ type: FeedbackListTemplateComponent, selector: "symphony-feedback-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: FeedbackCardListComponent, selector: "symphony-feedback-card-list", inputs: ["feedbackCardList"], outputs: ["cardClick"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], 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: 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  <symphony-button\n    button-primary\n    [text]=\"'Submit Feedback'\"\n    class=\"pull-right\"\n    (clicked)=\"onSubmitButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-feedback-card-list\n    feedback-card-list\n    [feedbackCardList]=\"model.feedbackCardList\"\n    (cardClick)=\"onCardClick($event)\"\n  ></symphony-feedback-card-list>\n</symphony-feedback-list-template>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}\n"] }]
+            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  <symphony-button\n    button-primary\n    [text]=\"'Submit Feedback'\"\n    class=\"pull-right\"\n    [disabled]=\"model.isSubmitDisabled\"\n    (clicked)=\"onSubmitButtonClick($event)\"\n  ></symphony-button>\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</symphony-feedback-list-template>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], cardClicked: [{
@@ -4299,7 +4535,8 @@ FeedbackListPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         H3Module,
         ParagraphModule,
         ButtonModule,
-        FeedbackCardListModule], exports: [FeedbackListPageComponent] });
+        FeedbackCardListModule,
+        SfxLoaderModule], exports: [FeedbackListPageComponent] });
 FeedbackListPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackListPageModule, imports: [[
             CommonModule,
             PlaceholderModule,
@@ -4307,7 +4544,8 @@ FeedbackListPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
             H3Module,
             ParagraphModule,
             ButtonModule,
-            FeedbackCardListModule
+            FeedbackCardListModule,
+            SfxLoaderModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackListPageModule, decorators: [{
             type: NgModule,
@@ -4320,12 +4558,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         H3Module,
                         ParagraphModule,
                         ButtonModule,
-                        FeedbackCardListModule
+                        FeedbackCardListModule,
+                        SfxLoaderModule
                     ],
                     exports: [FeedbackListPageComponent]
                 }]
         }] });
 
+class FeedbackDetailTemplateComponent {
+    constructor() { }
+}
+FeedbackDetailTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FeedbackDetailTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailTemplateComponent, selector: "symphony-feedback-detail-template", ngImport: i0, template: "<section class=\"sfx-border-bottom-gray-1 sfx-pb-10 sfx-mt-10 sfx-header\">\n  <div class=\"row\">\n    <div\n      class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-back-section\"\n    >\n      <ng-content select=\"[sfx-back-button]\"></ng-content>\n    </div>\n    <div class=\"col-xs-12 col-sm-12 col-md-5 col-lg-5\">\n      <ng-content select=\"[sfx-header]\"></ng-content>\n    </div>\n  </div>\n</section>\n\n<section class=\"sfx-column-wrap\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n      <ng-content select=\"[sfx-left-column]\"></ng-content>\n    </div>\n    <div\n      id=\"review\"\n      class=\"col-xs-12 col-sm-12 col-md-4 col-lg-4 pull-right sticky-top sfx-mr-20\"\n    >\n      <ng-content select=\"[sfx-right-column]\"></ng-content>\n    </div>\n  </div>\n</section>\n", styles: [".sfx-column-wrap{margin-top:50px}.sticky-top{position:sticky;top:50px;z-index:1020}@media (max-width: 767px){.sfx-header.sfx-pb-10{padding-bottom:25px}.sfx-back-section.sfx-mb-30{margin-bottom:10px}.sfx-column-wrap{margin-top:40px}.sticky-top{position:relative;top:auto}.sticky-top.sfx-mr-20{margin-right:0}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-feedback-detail-template', template: "<section class=\"sfx-border-bottom-gray-1 sfx-pb-10 sfx-mt-10 sfx-header\">\n  <div class=\"row\">\n    <div\n      class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-back-section\"\n    >\n      <ng-content select=\"[sfx-back-button]\"></ng-content>\n    </div>\n    <div class=\"col-xs-12 col-sm-12 col-md-5 col-lg-5\">\n      <ng-content select=\"[sfx-header]\"></ng-content>\n    </div>\n  </div>\n</section>\n\n<section class=\"sfx-column-wrap\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n      <ng-content select=\"[sfx-left-column]\"></ng-content>\n    </div>\n    <div\n      id=\"review\"\n      class=\"col-xs-12 col-sm-12 col-md-4 col-lg-4 pull-right sticky-top sfx-mr-20\"\n    >\n      <ng-content select=\"[sfx-right-column]\"></ng-content>\n    </div>\n  </div>\n</section>\n", styles: [".sfx-column-wrap{margin-top:50px}.sticky-top{position:sticky;top:50px;z-index:1020}@media (max-width: 767px){.sfx-header.sfx-pb-10{padding-bottom:25px}.sfx-back-section.sfx-mb-30{margin-bottom:10px}.sfx-column-wrap{margin-top:40px}.sticky-top{position:relative;top:auto}.sticky-top.sfx-mr-20{margin-right:0}}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class FeedbackDetailInterestFormComponent {
+    constructor() {
+        this.cancel = new EventEmitter();
+        this.save = new EventEmitter();
+    }
+    onInterestedButtonClick(interestedState) {
+        this.model.status = interestedState;
+    }
+    onCancelClick() {
+        this.cancel.emit();
+    }
+    onSaveClick() {
+        this.save.emit(this.model);
+    }
+}
+FeedbackDetailInterestFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailInterestFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FeedbackDetailInterestFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailInterestFormComponent, selector: "symphony-feedback-detail-interest-form", inputs: { model: "model" }, outputs: { cancel: "cancel", save: "save" }, ngImport: i0, template: "<ng-container *ngIf=\"model\">\n  <symphony-h4\n    class=\"sfx-mb-25 sfx-d-block\"\n    [text]=\"'Interested in this contact?'\"\n  ></symphony-h4>\n\n  <div class=\"form-group sfx-d-flex sfx-mb-30\">\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2\"\n        [ngClass]=\"{ 'color-green': model.status === 'Yes' }\"\n        [icon]=\"'si-feedback-yes'\"\n        (clicked)=\"onInterestedButtonClick('Yes')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'Yes'\"></symphony-paragraph>\n    </div>\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2\"\n        [ngClass]=\"{ 'color-red': model.status === 'No' }\"\n        [icon]=\"'si-feedback-no'\"\n        (clicked)=\"onInterestedButtonClick('No')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'No'\"></symphony-paragraph>\n    </div>\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2\"\n        [ngClass]=\"{ 'color-orange': model.status === 'Not Now' }\"\n        [icon]=\"'si-feedback-maybe'\"\n        (clicked)=\"onInterestedButtonClick('Not Now')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'Not Now'\"></symphony-paragraph>\n    </div>\n  </div>\n\n  <div class=\"form-group\">\n    <symphony-input-dropdown\n      *ngIf=\"model.showReasonDropdown\"\n      class=\"sfx-d-block sfx-mb-15\"\n      [inputDropdownListModel]=\"model.reasonDropdown\"\n    ></symphony-input-dropdown>\n\n    <symphony-input-dropdown\n      *ngIf=\"model.showRecommendationDropdown\"\n      class=\"sfx-d-block sfx-mb-15\"\n      [inputDropdownListModel]=\"model.recommendationDropdown\"\n    ></symphony-input-dropdown>\n\n    <label for=\"comments\" class=\"form-label\">Comments</label>\n    <textarea\n      [(ngModel)]=\"model.comments\"\n      class=\"form-control sfx-mb-5\"\n      id=\"comments\"\n      rows=\"4\"\n      >{{ model.comments }}</textarea\n    >\n  </div>\n\n  <div class=\"form-group pull-right sfx-mt-40\">\n    <symphony-button\n      [text]=\"'Cancel'\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCancelClick()\"\n    ></symphony-button>\n    <symphony-button\n      class=\"sfx-ml-20 save\"\n      [text]=\"'Save'\"\n      [disabled]=\"model.isSaveDisabled || !model.status\"\n      (clicked)=\"onSaveClick()\"\n    ></symphony-button>\n  </div>\n</ng-container>\n", styles: ["body .sfx .sfx-dropdown-label,body .sfx .sfx-dropdown button#moreDrop.dropdown-toggle.btn{margin-left:0;margin-right:0;width:100%}body .sfx .form-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem}body .sfx textarea{box-shadow:none}.sfx-mr-50{margin-right:3.125rem}.color-light-gray2{color:#d9d9d9}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}@media (max-width: 767px){.form-group .sfx-mr-50{margin-right:30px}.form-group.pull-right{float:none!important}}@media (max-width: 320px){.form-group .save{margin-left:15px}.form-group button.btn{min-width:auto}}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailInterestFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-feedback-detail-interest-form', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"model\">\n  <symphony-h4\n    class=\"sfx-mb-25 sfx-d-block\"\n    [text]=\"'Interested in this contact?'\"\n  ></symphony-h4>\n\n  <div class=\"form-group sfx-d-flex sfx-mb-30\">\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2\"\n        [ngClass]=\"{ 'color-green': model.status === 'Yes' }\"\n        [icon]=\"'si-feedback-yes'\"\n        (clicked)=\"onInterestedButtonClick('Yes')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'Yes'\"></symphony-paragraph>\n    </div>\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2\"\n        [ngClass]=\"{ 'color-red': model.status === 'No' }\"\n        [icon]=\"'si-feedback-no'\"\n        (clicked)=\"onInterestedButtonClick('No')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'No'\"></symphony-paragraph>\n    </div>\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2\"\n        [ngClass]=\"{ 'color-orange': model.status === 'Not Now' }\"\n        [icon]=\"'si-feedback-maybe'\"\n        (clicked)=\"onInterestedButtonClick('Not Now')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'Not Now'\"></symphony-paragraph>\n    </div>\n  </div>\n\n  <div class=\"form-group\">\n    <symphony-input-dropdown\n      *ngIf=\"model.showReasonDropdown\"\n      class=\"sfx-d-block sfx-mb-15\"\n      [inputDropdownListModel]=\"model.reasonDropdown\"\n    ></symphony-input-dropdown>\n\n    <symphony-input-dropdown\n      *ngIf=\"model.showRecommendationDropdown\"\n      class=\"sfx-d-block sfx-mb-15\"\n      [inputDropdownListModel]=\"model.recommendationDropdown\"\n    ></symphony-input-dropdown>\n\n    <label for=\"comments\" class=\"form-label\">Comments</label>\n    <textarea\n      [(ngModel)]=\"model.comments\"\n      class=\"form-control sfx-mb-5\"\n      id=\"comments\"\n      rows=\"4\"\n      >{{ model.comments }}</textarea\n    >\n  </div>\n\n  <div class=\"form-group pull-right sfx-mt-40\">\n    <symphony-button\n      [text]=\"'Cancel'\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCancelClick()\"\n    ></symphony-button>\n    <symphony-button\n      class=\"sfx-ml-20 save\"\n      [text]=\"'Save'\"\n      [disabled]=\"model.isSaveDisabled || !model.status\"\n      (clicked)=\"onSaveClick()\"\n    ></symphony-button>\n  </div>\n</ng-container>\n", styles: ["body .sfx .sfx-dropdown-label,body .sfx .sfx-dropdown button#moreDrop.dropdown-toggle.btn{margin-left:0;margin-right:0;width:100%}body .sfx .form-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem}body .sfx textarea{box-shadow:none}.sfx-mr-50{margin-right:3.125rem}.color-light-gray2{color:#d9d9d9}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}@media (max-width: 767px){.form-group .sfx-mr-50{margin-right:30px}.form-group.pull-right{float:none!important}}@media (max-width: 320px){.form-group .save{margin-left:15px}.form-group button.btn{min-width:auto}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], cancel: [{
+                type: Output
+            }], save: [{
+                type: Output
+            }] } });
+
+class FeedbackDetailPageComponent {
+    constructor() {
+        this.back = new EventEmitter();
+        this.previewClicked = new EventEmitter();
+        this.saveFeedback = new EventEmitter();
+    }
+    onSaveFeedback(feedbackSaveEvent) {
+        this.saveFeedback.emit(feedbackSaveEvent);
+    }
+    onBackClick() {
+        this.back.emit('clicked');
+    }
+    onPreviewClick() {
+        this.previewClicked.emit('clicked');
+    }
+}
+FeedbackDetailPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FeedbackDetailPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailPageComponent, selector: "symphony-feedback-detail-page", inputs: { model: "model" }, outputs: { back: "back", previewClicked: "previewClicked", saveFeedback: "saveFeedback" }, ngImport: i0, template: "<symphony-feedback-detail-template *ngIf=\"model\">\n  <symphony-icon\n    sfx-back-button\n    [icon]=\"'si-menu-return'\"\n    [size]=\"'20px'\"\n    (clicked)=\"onBackClick()\"\n  ></symphony-icon>\n\n  <symphony-feedback-detail-header\n    sfx-header\n    [model]=\"model.header\"\n    (previewClicked)=\"onPreviewClick()\"\n  >\n  </symphony-feedback-detail-header>\n\n  <symphony-feedback-detail-candidate-info\n    sfx-left-column\n    [historyList]=\"model.historyList\"\n    [educationList]=\"model.educationList\"\n    [certificationList]=\"model.certificationList\"\n  ></symphony-feedback-detail-candidate-info>\n\n  <symphony-feedback-detail-interest-form\n    sfx-right-column\n    [model]=\"model.interest\"\n    (save)=\"onSaveFeedback($event)\"\n  ></symphony-feedback-detail-interest-form>\n</symphony-feedback-detail-template>\n", styles: [""], components: [{ type: FeedbackDetailTemplateComponent, selector: "symphony-feedback-detail-template" }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: FeedbackDetailHeaderComponent, selector: "symphony-feedback-detail-header", inputs: ["model"], outputs: ["previewClicked"] }, { type: FeedbackDetailCandidateInfoComponent, selector: "symphony-feedback-detail-candidate-info", inputs: ["historyList", "educationList", "certificationList"] }, { type: FeedbackDetailInterestFormComponent, selector: "symphony-feedback-detail-interest-form", inputs: ["model"], outputs: ["cancel", "save"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-feedback-detail-page', template: "<symphony-feedback-detail-template *ngIf=\"model\">\n  <symphony-icon\n    sfx-back-button\n    [icon]=\"'si-menu-return'\"\n    [size]=\"'20px'\"\n    (clicked)=\"onBackClick()\"\n  ></symphony-icon>\n\n  <symphony-feedback-detail-header\n    sfx-header\n    [model]=\"model.header\"\n    (previewClicked)=\"onPreviewClick()\"\n  >\n  </symphony-feedback-detail-header>\n\n  <symphony-feedback-detail-candidate-info\n    sfx-left-column\n    [historyList]=\"model.historyList\"\n    [educationList]=\"model.educationList\"\n    [certificationList]=\"model.certificationList\"\n  ></symphony-feedback-detail-candidate-info>\n\n  <symphony-feedback-detail-interest-form\n    sfx-right-column\n    [model]=\"model.interest\"\n    (save)=\"onSaveFeedback($event)\"\n  ></symphony-feedback-detail-interest-form>\n</symphony-feedback-detail-template>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], back: [{
+                type: Output
+            }], previewClicked: [{
+                type: Output
+            }], saveFeedback: [{
+                type: Output
+            }] } });
+
+class FeedbackDetailTemplateModule {
+}
+FeedbackDetailTemplateModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailTemplateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FeedbackDetailTemplateModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailTemplateModule, declarations: [FeedbackDetailTemplateComponent], imports: [CommonModule, PlaceholderModule], exports: [FeedbackDetailTemplateComponent] });
+FeedbackDetailTemplateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailTemplateModule, imports: [[CommonModule, PlaceholderModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailTemplateModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FeedbackDetailTemplateComponent],
+                    imports: [CommonModule, PlaceholderModule],
+                    exports: [FeedbackDetailTemplateComponent]
+                }]
+        }] });
+
+class FeedbackDetailInterestFormModule {
+}
+FeedbackDetailInterestFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailInterestFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FeedbackDetailInterestFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailInterestFormModule, declarations: [FeedbackDetailInterestFormComponent], imports: [CommonModule,
+        H4Module,
+        IconModule,
+        InputDropdownModule,
+        ParagraphModule,
+        ButtonModule,
+        FormsModule], exports: [FeedbackDetailInterestFormComponent] });
+FeedbackDetailInterestFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailInterestFormModule, imports: [[
+            CommonModule,
+            H4Module,
+            IconModule,
+            InputDropdownModule,
+            ParagraphModule,
+            ButtonModule,
+            FormsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailInterestFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FeedbackDetailInterestFormComponent],
+                    imports: [
+                        CommonModule,
+                        H4Module,
+                        IconModule,
+                        InputDropdownModule,
+                        ParagraphModule,
+                        ButtonModule,
+                        FormsModule
+                    ],
+                    exports: [FeedbackDetailInterestFormComponent]
+                }]
+        }] });
+
+class FeedbackDetailPageModule {
+}
+FeedbackDetailPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FeedbackDetailPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailPageModule, declarations: [FeedbackDetailPageComponent], imports: [CommonModule,
+        PlaceholderModule,
+        FeedbackDetailTemplateModule,
+        FeedbackDetailHeaderModule,
+        IconModule,
+        FeedbackDetailCandidateInfoModule,
+        FeedbackDetailInterestFormModule], exports: [FeedbackDetailPageComponent] });
+FeedbackDetailPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailPageModule, imports: [[
+            CommonModule,
+            PlaceholderModule,
+            FeedbackDetailTemplateModule,
+            FeedbackDetailHeaderModule,
+            IconModule,
+            FeedbackDetailCandidateInfoModule,
+            FeedbackDetailInterestFormModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailPageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FeedbackDetailPageComponent],
+                    imports: [
+                        CommonModule,
+                        PlaceholderModule,
+                        FeedbackDetailTemplateModule,
+                        FeedbackDetailHeaderModule,
+                        IconModule,
+                        FeedbackDetailCandidateInfoModule,
+                        FeedbackDetailInterestFormModule
+                    ],
+                    exports: [FeedbackDetailPageComponent]
+                }]
+        }] });
+
 /*
  * ATOMS
  */
@@ -4334,5 +4728,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActivityScoreLevel, AdvertiseModalComponent, AlertDuration, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, CardComponent, CardListComponent, CardListModule, CardModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackListPageComponent, FeedbackListPageModule, FeedbackLoginModalComponent, FeedbackLoginModalModule, FileUploadComponent, FileUploadModule, FilterAreaComponent, FilterAreaModule, FrameworkModule, GridCellLoaderModule, GridComponent, GridLoadingCellComponent, GridModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, H5WithIconComponent, H5WithIconModule, IconComponent, IconModule, IconWrapperComponent, IconWrapperModule, Icons, InputCheckboxComponent, InputCheckboxModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputRadioComponent, InputRadioModule, InputTextComponent, InputTextModule, InputToggleComponent, InputToggleModule, LibrariesPageComponent, LibrariesPageModule, ModalModule, MoleculesModule, OrganismsModule, ParagraphComponent, ParagraphModule, PillComponent, PillModule, PillsComponent, PillsModule, RelevanceScoreComponent, RelevanceScoreModule, SettingListPageComponent, SettingListPageModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TooltipWrapperComponent, TooltipWrapperModule, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule, UploadResumeModalComponent, UploadResumeModalModule, gridType };
+export { ActionBarComponent, ActionBarJobListComponent, ActionBarJobListModule, ActionBarModule, ActivityScoreLevel, AdvertiseModalComponent, AlertDuration, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, CardComponent, CardListComponent, CardListModule, CardModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackDetailPageComponent, FeedbackDetailPageModule, FeedbackListPageComponent, FeedbackListPageModule, FeedbackLoginModalComponent, FeedbackLoginModalModule, FileUploadComponent, FileUploadModule, FilterAreaComponent, FilterAreaModule, FrameworkModule, GridCellLoaderModule, GridComponent, GridLoadingCellComponent, GridModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, H5WithIconComponent, H5WithIconModule, IconComponent, IconModule, IconWrapperComponent, IconWrapperModule, Icons, InputCheckboxComponent, InputCheckboxModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputRadioComponent, InputRadioModule, InputTextComponent, InputTextModule, InputToggleComponent, InputToggleModule, LibrariesPageComponent, LibrariesPageModule, ModalModule, MoleculesModule, OrganismsModule, ParagraphComponent, ParagraphModule, PillComponent, PillModule, PillsComponent, PillsModule, RelevanceScoreComponent, RelevanceScoreModule, SettingListPageComponent, SettingListPageModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TooltipWrapperComponent, TooltipWrapperModule, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule, UploadResumeModalComponent, UploadResumeModalModule, gridType };
 //# sourceMappingURL=symphony-talent-component-library.mjs.map