@symphony-talent/component-library 3.21.1 → 3.23.0

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

@@ -805,7 +805,9 @@ var Icons;
     Icons["ADVERTISE"] = "si-advertise";
     Icons["ARROWHIDEREVEAL"] = "si-arrow-hide-reveal";
     Icons["ARROWNEXT"] = "si-arrow-next";
+    Icons["ARROWNEXTBOLD"] = "si-arrow-bold-next";
     Icons["ARROWPREV"] = "si-arrow-prev";
+    Icons["ARROWPREVBOLD"] = "si-arrow-bold-previous";
     Icons["CHATBOT"] = "si-chatbot";
     Icons["CODETAG"] = "si-codetag";
     Icons["CONFIRMATION"] = "si-confirmation";
@@ -815,6 +817,7 @@ var Icons;
     Icons["DELETE"] = "si-delete";
     Icons["DOCUMENT"] = "si-document";
     Icons["DOWNLOAD"] = "si-download";
+    Icons["ECONOMICS"] = "si-economics";
     Icons["EDIT"] = "si-edit";
     Icons["EMAILDRIP"] = "si-email-drip";
     Icons["EMAILOPEN"] = "si-email-open";
@@ -1557,10 +1560,10 @@ class FeedbackCardComponent {
     }
 }
 FeedbackCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCardComponent, selector: "symphony-feedback-card", inputs: { model: "model" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n  <div class=\"card-item sfx-d-flex\">\n    <div class=\"card-title-wrap sfx-d-flex sfx-pb-10 sfx-mb-25\">\n      <div class=\"card-title\">\n        <symphony-h4>{{ model.title }}</symphony-h4>\n      </div>\n      <div class=\"card-icon\">\n        <symphony-icon-wrapper\n          *ngIf=\"model.showEditIcon\"\n          [isInverse]=\"true\"\n          class=\"feedback-edit\"\n          ><symphony-icon [icon]=\"'si-edit'\" [size]=\"'9px'\"></symphony-icon\n        ></symphony-icon-wrapper>\n      </div>\n    </div>\n    <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n      <symphony-paragraph class=\"sfx-mb-5 sfx-d-block\">\n        {{ bodyText }}\n      </symphony-paragraph>\n    </div>\n    <div\n      class=\"card-footer sfx-mb-5 sfx-d-flex\"\n      [ngSwitch]=\"model.feedbackState\"\n    >\n      <ng-container *ngSwitchCase=\"'Yes'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-green\"\n          [icon]=\"'si-feedback-yes'\"\n        ></symphony-icon>\n        <symphony-h5>Yes</symphony-h5>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'No'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-red\"\n          [icon]=\"'si-feedback-no'\"\n        ></symphony-icon>\n        <symphony-h5>No</symphony-h5>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'NotNow'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-orange\"\n          [icon]=\"'si-feedback-maybe'\"\n        ></symphony-icon>\n        <symphony-h5>Not Now</symphony-h5>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'None'\">\n        <symphony-h5>Provide Feedback</symphony-h5>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-item{box-shadow:0 2px 10px #0003;border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:1.2rem;margin-top:5px}.card-icon{margin-left:auto}.card-icon .feedback-edit .icon-wrapper{height:18px;width:18px;padding:0;border:0}.card-icon .feedback-edit .icon-wrapper.is-inverse:hover{background:#000;color:#fff}.card-footer{margin-top:auto;align-self:flex-end}.card-footer h5{line-height:24px}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}\n"], components: [{ type: H4Component, selector: "symphony-h4", 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: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCardComponent, selector: "symphony-feedback-card", inputs: { model: "model" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n  <div class=\"card-item sfx-d-flex\">\n    <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n      <div class=\"card-title\">\n        <symphony-h4>{{ model.title }}</symphony-h4>\n      </div>\n      <div class=\"card-icon\">\n        <symphony-icon\n          *ngIf=\"model.showEditIcon\"\n          class=\"feedback-edit\"\n          [icon]=\"'si-edit'\"\n          [size]=\"'15.5px'\"\n        ></symphony-icon>\n      </div>\n    </div>\n    <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n      <symphony-paragraph class=\"sfx-d-block\">\n        {{ bodyText }}\n      </symphony-paragraph>\n    </div>\n    <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n      <ng-container *ngSwitchCase=\"'Yes'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-green\"\n          [icon]=\"'si-feedback-yes'\"\n        ></symphony-icon>\n        <symphony-paragraph>Yes</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'No'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-red\"\n          [icon]=\"'si-feedback-no'\"\n        ></symphony-icon>\n        <symphony-paragraph>No</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'NotNow'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-orange\"\n          [icon]=\"'si-feedback-maybe'\"\n        ></symphony-icon>\n        <symphony-paragraph>Not Now</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'None'\">\n        <symphony-paragraph class=\"sfx-bold\"\n          >Provide Feedback</symphony-paragraph\n        >\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-item{box-shadow:0 2px 10px #0003;border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}\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"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-feedback-card', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n  <div class=\"card-item sfx-d-flex\">\n    <div class=\"card-title-wrap sfx-d-flex sfx-pb-10 sfx-mb-25\">\n      <div class=\"card-title\">\n        <symphony-h4>{{ model.title }}</symphony-h4>\n      </div>\n      <div class=\"card-icon\">\n        <symphony-icon-wrapper\n          *ngIf=\"model.showEditIcon\"\n          [isInverse]=\"true\"\n          class=\"feedback-edit\"\n          ><symphony-icon [icon]=\"'si-edit'\" [size]=\"'9px'\"></symphony-icon\n        ></symphony-icon-wrapper>\n      </div>\n    </div>\n    <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n      <symphony-paragraph class=\"sfx-mb-5 sfx-d-block\">\n        {{ bodyText }}\n      </symphony-paragraph>\n    </div>\n    <div\n      class=\"card-footer sfx-mb-5 sfx-d-flex\"\n      [ngSwitch]=\"model.feedbackState\"\n    >\n      <ng-container *ngSwitchCase=\"'Yes'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-green\"\n          [icon]=\"'si-feedback-yes'\"\n        ></symphony-icon>\n        <symphony-h5>Yes</symphony-h5>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'No'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-red\"\n          [icon]=\"'si-feedback-no'\"\n        ></symphony-icon>\n        <symphony-h5>No</symphony-h5>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'NotNow'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-orange\"\n          [icon]=\"'si-feedback-maybe'\"\n        ></symphony-icon>\n        <symphony-h5>Not Now</symphony-h5>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'None'\">\n        <symphony-h5>Provide Feedback</symphony-h5>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-item{box-shadow:0 2px 10px #0003;border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:1.2rem;margin-top:5px}.card-icon{margin-left:auto}.card-icon .feedback-edit .icon-wrapper{height:18px;width:18px;padding:0;border:0}.card-icon .feedback-edit .icon-wrapper.is-inverse:hover{background:#000;color:#fff}.card-footer{margin-top:auto;align-self:flex-end}.card-footer h5{line-height:24px}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}\n"] }]
+            args: [{ selector: 'symphony-feedback-card', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n  <div class=\"card-item sfx-d-flex\">\n    <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n      <div class=\"card-title\">\n        <symphony-h4>{{ model.title }}</symphony-h4>\n      </div>\n      <div class=\"card-icon\">\n        <symphony-icon\n          *ngIf=\"model.showEditIcon\"\n          class=\"feedback-edit\"\n          [icon]=\"'si-edit'\"\n          [size]=\"'15.5px'\"\n        ></symphony-icon>\n      </div>\n    </div>\n    <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n      <symphony-paragraph class=\"sfx-d-block\">\n        {{ bodyText }}\n      </symphony-paragraph>\n    </div>\n    <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n      <ng-container *ngSwitchCase=\"'Yes'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-green\"\n          [icon]=\"'si-feedback-yes'\"\n        ></symphony-icon>\n        <symphony-paragraph>Yes</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'No'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-red\"\n          [icon]=\"'si-feedback-no'\"\n        ></symphony-icon>\n        <symphony-paragraph>No</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'NotNow'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-orange\"\n          [icon]=\"'si-feedback-maybe'\"\n        ></symphony-icon>\n        <symphony-paragraph>Not Now</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'None'\">\n        <symphony-paragraph class=\"sfx-bold\"\n          >Provide Feedback</symphony-paragraph\n        >\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-item{box-shadow:0 2px 10px #0003;border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], cardClick: [{
@@ -1788,6 +1791,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class DocumentManagementItemComponent {
+    constructor() {
+        this.previewClicked = new EventEmitter();
+        this.moreOptionClicked = new EventEmitter();
+    }
+    onPreviewClicked() {
+        this.previewClicked.emit();
+    }
+    onMoreOptionClicked(DocumentManagementMoreOptionEvent) {
+        this.moreOptionClicked.emit(DocumentManagementMoreOptionEvent);
+    }
+}
+DocumentManagementItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DocumentManagementItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DocumentManagementItemComponent, selector: "symphony-document-management-item", inputs: { documentManagementItemModel: "documentManagementItemModel" }, outputs: { previewClicked: "previewClicked", moreOptionClicked: "moreOptionClicked" }, ngImport: i0, template: "<div class=\"sfx-dm-item\">\n  <div class=\"dm-icon-wrap\">\n    <symphony-icon class=\"dm-icon\" [icon]=\"'si-document'\"></symphony-icon>\n  </div>\n  <div class=\"dm-content\">\n    <symphony-h5\n      title=\"{{ documentManagementItemModel.fileName }} [{{\n        documentManagementItemModel.fileType\n      }}]\"\n      >{{ documentManagementItemModel.fileName }}&nbsp;<span\n        *ngIf=\"documentManagementItemModel.fileType\"\n        >[{{ documentManagementItemModel.fileType }}]</span\n      ></symphony-h5\n    >\n    <symphony-paragraph\n      title=\"Added on {{ documentManagementItemModel.addedDate }} by {{\n        documentManagementItemModel.uploadedBy\n      }}\"\n      *ngIf=\"documentManagementItemModel.addedDate\"\n      ><span class=\"sfx-txt-gray\"\n        >Added on&nbsp;<span>{{\n          documentManagementItemModel.addedDate\n        }}</span></span\n      >&nbsp;<span\n        ><span\n          *ngIf=\"documentManagementItemModel.uploadedBy\"\n          class=\"sfx-txt-gray\"\n          >by&nbsp;</span\n        >{{ documentManagementItemModel.uploadedBy }}</span\n      >\n    </symphony-paragraph>\n  </div>\n  <div class=\"dm-action\">\n    <symphony-icon\n      class=\"sfx-d-inline-block pull-left sfx-ml-10 sfx-mt-12\"\n      *ngIf=\"documentManagementItemModel.hasPreview\"\n      [icon]=\"'si-preview'\"\n      (clicked)=\"onPreviewClicked()\"\n    ></symphony-icon>\n    <symphony-contextual-menu\n      (itemClick)=\"onMoreOptionClicked($event)\"\n      *ngIf=\"documentManagementItemModel.moreActions.items.length > 0\"\n      class=\"dm-more-option sfx-d-inline-block pull-left sfx-ml-10\"\n      [model]=\"documentManagementItemModel.moreActions\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px;margin-right:15px}.sfx-dm-item .dm-icon-wrap{position:absolute;left:0;top:20px}.sfx-dm-item .dm-icon-wrap .dm-icon{display:block;width:40px;height:40px;background:#000;text-align:center;color:#fff;border-radius:50%;line-height:46px}.sfx-dm-item .dm-content{padding-left:60px;padding-right:100px}.sfx-dm-item .dm-content h5,.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-action{position:absolute;right:0;top:20px;display:none}.sfx-dm-item .dm-action .sfx-mt-12{margin-top:12px}.sfx-dm-item:hover .dm-action{display:block}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { 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: DocumentManagementItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-document-management-item', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-dm-item\">\n  <div class=\"dm-icon-wrap\">\n    <symphony-icon class=\"dm-icon\" [icon]=\"'si-document'\"></symphony-icon>\n  </div>\n  <div class=\"dm-content\">\n    <symphony-h5\n      title=\"{{ documentManagementItemModel.fileName }} [{{\n        documentManagementItemModel.fileType\n      }}]\"\n      >{{ documentManagementItemModel.fileName }}&nbsp;<span\n        *ngIf=\"documentManagementItemModel.fileType\"\n        >[{{ documentManagementItemModel.fileType }}]</span\n      ></symphony-h5\n    >\n    <symphony-paragraph\n      title=\"Added on {{ documentManagementItemModel.addedDate }} by {{\n        documentManagementItemModel.uploadedBy\n      }}\"\n      *ngIf=\"documentManagementItemModel.addedDate\"\n      ><span class=\"sfx-txt-gray\"\n        >Added on&nbsp;<span>{{\n          documentManagementItemModel.addedDate\n        }}</span></span\n      >&nbsp;<span\n        ><span\n          *ngIf=\"documentManagementItemModel.uploadedBy\"\n          class=\"sfx-txt-gray\"\n          >by&nbsp;</span\n        >{{ documentManagementItemModel.uploadedBy }}</span\n      >\n    </symphony-paragraph>\n  </div>\n  <div class=\"dm-action\">\n    <symphony-icon\n      class=\"sfx-d-inline-block pull-left sfx-ml-10 sfx-mt-12\"\n      *ngIf=\"documentManagementItemModel.hasPreview\"\n      [icon]=\"'si-preview'\"\n      (clicked)=\"onPreviewClicked()\"\n    ></symphony-icon>\n    <symphony-contextual-menu\n      (itemClick)=\"onMoreOptionClicked($event)\"\n      *ngIf=\"documentManagementItemModel.moreActions.items.length > 0\"\n      class=\"dm-more-option sfx-d-inline-block pull-left sfx-ml-10\"\n      [model]=\"documentManagementItemModel.moreActions\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px;margin-right:15px}.sfx-dm-item .dm-icon-wrap{position:absolute;left:0;top:20px}.sfx-dm-item .dm-icon-wrap .dm-icon{display:block;width:40px;height:40px;background:#000;text-align:center;color:#fff;border-radius:50%;line-height:46px}.sfx-dm-item .dm-content{padding-left:60px;padding-right:100px}.sfx-dm-item .dm-content h5,.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-action{position:absolute;right:0;top:20px;display:none}.sfx-dm-item .dm-action .sfx-mt-12{margin-top:12px}.sfx-dm-item:hover .dm-action{display:block}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { documentManagementItemModel: [{
+                type: Input
+            }], previewClicked: [{
+                type: Output
+            }], moreOptionClicked: [{
+                type: Output
+            }] } });
+
+class DocumentManagementItemModule {
+}
+DocumentManagementItemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DocumentManagementItemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementItemModule, declarations: [DocumentManagementItemComponent], imports: [CommonModule,
+        ContextualMenuModule,
+        H5Module,
+        IconModule,
+        ParagraphModule], exports: [DocumentManagementItemComponent] });
+DocumentManagementItemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementItemModule, imports: [[
+            CommonModule,
+            ContextualMenuModule,
+            H5Module,
+            IconModule,
+            ParagraphModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementItemModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DocumentManagementItemComponent],
+                    imports: [
+                        CommonModule,
+                        ContextualMenuModule,
+                        H5Module,
+                        IconModule,
+                        ParagraphModule,
+                    ],
+                    exports: [DocumentManagementItemComponent],
+                }]
+        }] });
+
 class ColorSampleComponent {
     constructor() { }
     ngOnInit() {
@@ -1983,10 +2041,10 @@ class ButtonWithIconComponent {
     }
 }
 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 });
+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\" *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;margin-right:1.25rem;margin-bottom:.625rem}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}\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"] }]
+            args: [{ selector: 'symphony-button-with-icon', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-actions-items-list\" *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;margin-right:1.25rem;margin-bottom:.625rem}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { text: [{
                 type: Input
             }], icon: [{
@@ -2028,7 +2086,8 @@ MoleculesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         FileUploadModule,
         FileUploadStatusModule,
         FeedbackCardModule,
-        ButtonWithIconModule], exports: [PillsModule, BreadcrumbModule, FeedbackCardModule] });
+        ButtonWithIconModule,
+        DocumentManagementItemModule], exports: [PillsModule, BreadcrumbModule, FeedbackCardModule, DocumentManagementItemModule] });
 MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, imports: [[
             CommonModule,
             AvatarModule,
@@ -2045,7 +2104,8 @@ MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             FileUploadStatusModule,
             FeedbackCardModule,
             ButtonWithIconModule,
-        ], PillsModule, BreadcrumbModule, FeedbackCardModule] });
+            DocumentManagementItemModule
+        ], PillsModule, BreadcrumbModule, FeedbackCardModule, DocumentManagementItemModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2066,8 +2126,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         FileUploadStatusModule,
                         FeedbackCardModule,
                         ButtonWithIconModule,
+                        DocumentManagementItemModule
                     ],
-                    exports: [PillsModule, BreadcrumbModule, FeedbackCardModule]
+                    exports: [PillsModule, BreadcrumbModule, FeedbackCardModule, DocumentManagementItemModule]
                 }]
         }] });
 
@@ -2153,10 +2214,10 @@ 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", "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 });
+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: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px #0003}.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"] }]
+            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: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px #0003}.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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], verifyClicked: [{
@@ -2322,10 +2383,10 @@ class ActionBarComponent {
     }
 }
 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 });
+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-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\"\n        ><symphony-icon [icon]=\"'si-arrow-bold-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\"\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)}.sfx-actions-items{margin-top:1.875rem;padding-bottom:1.25rem}\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"] }]
+            args: [{ selector: 'symphony-action-bar', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-title-wrap 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\"\n        ><symphony-icon [icon]=\"'si-arrow-bold-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\"\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)}.sfx-actions-items{margin-top:1.875rem;padding-bottom:1.25rem}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { isToggled: [{
                 type: Input
             }], toggleClick: [{
@@ -2352,10 +2413,10 @@ class GridControlsJobListComponent {
     }
 }
 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", menuClicked: "menuClicked" }, 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      (itemClick)=\"onItemClick($event)\"\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 });
+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", menuClicked: "menuClicked" }, ngImport: i0, template: "<div class=\"sfx-action\">\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      (itemClick)=\"onItemClick($event)\"\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      (itemClick)=\"onItemClick($event)\"\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"] }]
+            args: [{ selector: 'symphony-grid-controls-job-list', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-action\">\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      (itemClick)=\"onItemClick($event)\"\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: [{
@@ -2497,6 +2558,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class ConfirmationModalComponent {
+    constructor() {
+        this.model = {};
+        this.buttonClicked = new EventEmitter();
+        this.closeButtonClicked = new EventEmitter();
+    }
+    onButtonClick(text) {
+        this.buttonClicked.emit(text);
+    }
+    onCloseButtonClick() {
+        this.closeButtonClicked.emit();
+    }
+}
+ConfirmationModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ConfirmationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked" }, 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 [text]=\"model.title\"\n                    ></symphony-h4\n                  >\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)=\"onCloseButtonClick()\"\n                  ></symphony-icon>\n                </div>  \n                <div *ngIf=\"model.subTitle\" class=\"col-xs-12\">\n                    <symphony-paragraph class=\"sfx-mt-15 sfx-d-block\" [text]=\"model.subTitle\"\n                    ></symphony-paragraph\n                  >\n                </div>              \n            </div>\n        </div>\n    </section>\n    <section class=\"modal-body sfx-p-30\">\n        <symphony-paragraph>{{model.content}} <span *ngIf=\"model.selectedItem\">'{{model.selectedItem}}'?</span></symphony-paragraph>\n    </section>\n    <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n        <symphony-button\n        [text]=\"model.btnSecondary\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onButtonClick($event)\"\n      ></symphony-button>\n      <symphony-button\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"false\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    </section>\n</div>", styles: [""], 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: 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: ConfirmationModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-confirmation-modal', 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 [text]=\"model.title\"\n                    ></symphony-h4\n                  >\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)=\"onCloseButtonClick()\"\n                  ></symphony-icon>\n                </div>  \n                <div *ngIf=\"model.subTitle\" class=\"col-xs-12\">\n                    <symphony-paragraph class=\"sfx-mt-15 sfx-d-block\" [text]=\"model.subTitle\"\n                    ></symphony-paragraph\n                  >\n                </div>              \n            </div>\n        </div>\n    </section>\n    <section class=\"modal-body sfx-p-30\">\n        <symphony-paragraph>{{model.content}} <span *ngIf=\"model.selectedItem\">'{{model.selectedItem}}'?</span></symphony-paragraph>\n    </section>\n    <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n        <symphony-button\n        [text]=\"model.btnSecondary\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onButtonClick($event)\"\n      ></symphony-button>\n      <symphony-button\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"false\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    </section>\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], buttonClicked: [{
+                type: Output
+            }], closeButtonClicked: [{
+                type: Output
+            }] } });
+
+class ConfirmationModalModule {
+}
+ConfirmationModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ConfirmationModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ConfirmationModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ConfirmationModalModule, declarations: [ConfirmationModalComponent], imports: [CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule], exports: [ConfirmationModalComponent] });
+ConfirmationModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ConfirmationModalModule, imports: [[CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ConfirmationModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ConfirmationModalComponent],
+                    imports: [CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule],
+                    exports: [ConfirmationModalComponent],
+                }]
+        }] });
+
+class DocumentManagementListComponent {
+    constructor() {
+        this.isLoading = true;
+        this.moreOptionClick = new EventEmitter();
+        this.previewClick = new EventEmitter();
+        this.uploadClick = new EventEmitter();
+    }
+    ngOnInit() {
+        this.isLoading = false;
+    }
+    onMoreClick(documentManagementItemModel) {
+        this.moreOptionClick.emit(documentManagementItemModel);
+    }
+    onPreviewClick(documentManagementItemModel) {
+        this.previewClick.emit(documentManagementItemModel);
+    }
+    onUploadClick() {
+        this.uploadClick.emit();
+    }
+}
+DocumentManagementListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DocumentManagementListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DocumentManagementListComponent, selector: "symphony-document-management-list", inputs: { documentManagementList: "documentManagementList" }, outputs: { moreOptionClick: "moreOptionClick", previewClick: "previewClick", uploadClick: "uploadClick" }, ngImport: i0, template: "<section class=\"sf-d-block sfx-pb-20 sfx-border-bottom-black-5\">\n  <div class=\"dml-title-wrap\">\n    <symphony-h3 class=\"sfx-d-block sfx-pt-5\">Documents</symphony-h3>\n    <symphony-icon-wrapper (click)=\"onUploadClick()\"\n    class=\"dml-title-icon-right\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  </div>\n  <ul *ngIf=\"!isLoading\" class=\"list-unstyled dml-wrap\">\n    <li *ngFor=\"let dmItem of documentManagementList\">\n      <symphony-document-management-item\n        [documentManagementItemModel]=\"dmItem\"\n        (moreOptionClicked)=\"onMoreClick($event)\"\n        (previewClicked)=\"onPreviewClick($event)\"\n      ></symphony-document-management-item>\n    </li>\n  </ul>\n  <div *ngIf=\"isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</section>\n", styles: [".dml-wrap{max-height:245px;overflow-y:auto;overflow-x:hidden}.dml-wrap li{border-bottom:1px solid #bababa}.dml-wrap li:last-child{border-color:transparent}.dml-title-wrap{position:relative;margin-bottom:20px}.dml-title-wrap .dml-title-icon-right{position:absolute;top:0;right:0}\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: DocumentManagementItemComponent, selector: "symphony-document-management-item", inputs: ["documentManagementItemModel"], outputs: ["previewClicked", "moreOptionClicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], 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: DocumentManagementListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-document-management-list', template: "<section class=\"sf-d-block sfx-pb-20 sfx-border-bottom-black-5\">\n  <div class=\"dml-title-wrap\">\n    <symphony-h3 class=\"sfx-d-block sfx-pt-5\">Documents</symphony-h3>\n    <symphony-icon-wrapper (click)=\"onUploadClick()\"\n    class=\"dml-title-icon-right\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  </div>\n  <ul *ngIf=\"!isLoading\" class=\"list-unstyled dml-wrap\">\n    <li *ngFor=\"let dmItem of documentManagementList\">\n      <symphony-document-management-item\n        [documentManagementItemModel]=\"dmItem\"\n        (moreOptionClicked)=\"onMoreClick($event)\"\n        (previewClicked)=\"onPreviewClick($event)\"\n      ></symphony-document-management-item>\n    </li>\n  </ul>\n  <div *ngIf=\"isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</section>\n", styles: [".dml-wrap{max-height:245px;overflow-y:auto;overflow-x:hidden}.dml-wrap li{border-bottom:1px solid #bababa}.dml-wrap li:last-child{border-color:transparent}.dml-title-wrap{position:relative;margin-bottom:20px}.dml-title-wrap .dml-title-icon-right{position:absolute;top:0;right:0}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { documentManagementList: [{
+                type: Input
+            }], moreOptionClick: [{
+                type: Output
+            }], previewClick: [{
+                type: Output
+            }], uploadClick: [{
+                type: Output
+            }] } });
+
+class DocumentManagementListModule {
+}
+DocumentManagementListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DocumentManagementListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementListModule, declarations: [DocumentManagementListComponent], imports: [CommonModule, H3Module, DocumentManagementItemModule, SfxLoaderModule, IconModule, IconWrapperModule], exports: [DocumentManagementListComponent] });
+DocumentManagementListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementListModule, imports: [[CommonModule, H3Module, DocumentManagementItemModule, SfxLoaderModule, IconModule, IconWrapperModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DocumentManagementListComponent],
+                    imports: [CommonModule, H3Module, DocumentManagementItemModule, SfxLoaderModule, IconModule, IconWrapperModule],
+                    exports: [DocumentManagementListComponent],
+                }]
+        }] });
+
 class NoteComponent {
     constructor() {
         this.noteModel = {
@@ -2782,12 +2932,24 @@ class IconExplorerHelper {
                 iconClass: 'si-arrow-next',
                 hasBorder: false,
             },
+            {
+                icon: Icons.ARROWNEXTBOLD,
+                iconName: 'ARROWNEXTBOLD',
+                iconClass: 'si-arrow-bold-next',
+                hasBorder: false,
+            },
             {
                 icon: Icons.ARROWPREV,
                 iconName: 'ARROWPREV',
                 iconClass: 'si-arrow-prev',
                 hasBorder: false,
             },
+            {
+                icon: Icons.ARROWPREVBOLD,
+                iconName: 'ARROWPREVBOLD',
+                iconClass: 'si-arrow-bold-previous',
+                hasBorder: false,
+            },
             {
                 icon: Icons.CHATBOT,
                 iconName: 'CHATBOT',
@@ -2842,6 +3004,12 @@ class IconExplorerHelper {
                 iconClass: 'si-download',
                 hasBorder: false,
             },
+            {
+                icon: Icons.ECONOMICS,
+                iconName: 'ECONOMICS',
+                iconClass: 'si-economics',
+                hasBorder: false,
+            },
             {
                 icon: Icons.EDIT,
                 iconName: 'EDIT',
@@ -3384,46 +3552,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
-class CancelModalComponent {
-    constructor() {
-        this.model = {};
-        this.buttonClicked = new EventEmitter();
-        this.closeButtonClicked = new EventEmitter();
-    }
-    onButtonClick(text) {
-        this.buttonClicked.emit(text);
-    }
-    onCloseButtonClick() {
-        this.closeButtonClicked.emit();
-    }
-}
-CancelModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CancelModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CancelModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CancelModalComponent, selector: "symphony-cancel-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked" }, 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 [text]=\"model.title\"\n                    ></symphony-h4\n                  >\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)=\"onCloseButtonClick()\"\n                  ></symphony-icon>\n                </div>                \n            </div>\n        </div>\n    </section>\n    <section class=\"modal-body sfx-p-30\">\n        <symphony-paragraph [text]=\"model.content\"></symphony-paragraph>\n    </section>\n    <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n        <symphony-button\n        [text]=\"model.btnSecondary\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onButtonClick($event)\"\n      ></symphony-button>\n      <symphony-button\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"false\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    </section>\n</div>", styles: [""], 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: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CancelModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'symphony-cancel-modal', 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 [text]=\"model.title\"\n                    ></symphony-h4\n                  >\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)=\"onCloseButtonClick()\"\n                  ></symphony-icon>\n                </div>                \n            </div>\n        </div>\n    </section>\n    <section class=\"modal-body sfx-p-30\">\n        <symphony-paragraph [text]=\"model.content\"></symphony-paragraph>\n    </section>\n    <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n        <symphony-button\n        [text]=\"model.btnSecondary\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onButtonClick($event)\"\n      ></symphony-button>\n      <symphony-button\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"false\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    </section>\n</div>", styles: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
-                type: Input
-            }], buttonClicked: [{
-                type: Output
-            }], closeButtonClicked: [{
-                type: Output
-            }] } });
-
-class CancelModalModule {
-}
-CancelModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CancelModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CancelModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CancelModalModule, declarations: [CancelModalComponent], imports: [CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule], exports: [CancelModalComponent] });
-CancelModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CancelModalModule, imports: [[CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CancelModalModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [CancelModalComponent],
-                    imports: [CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule],
-                    exports: [CancelModalComponent],
-                }]
-        }] });
-
 class FeedbackDetailHeaderComponent {
     constructor() {
         this.previewClicked = new EventEmitter();
@@ -3513,10 +3641,10 @@ class FeedbackDetailCandidateInfoComponent {
     constructor() { }
 }
 FeedbackDetailCandidateInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailCandidateInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackDetailCandidateInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailCandidateInfoComponent, selector: "symphony-feedback-detail-candidate-info", inputs: { historyList: "historyList", educationList: "educationList", certificationList: "certificationList" }, ngImport: i0, template: "<accordion>\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Work History'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-workhistory\n      [workHistories]=\"historyList\"\n    ></symphony-feedback-candidate-workhistory>\n  </accordion-group>\n\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Education'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-education\n      [educationHistories]=\"educationList\"\n    ></symphony-feedback-candidate-education>\n  </accordion-group>\n\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Certifications'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-certifications\n      [certificationHistories]=\"certificationList\"\n    ></symphony-feedback-candidate-certifications>\n  </accordion-group>\n</accordion>\n", styles: [".panel-group .panel{border:none;box-shadow:none;margin-bottom:40px}.panel{box-shadow:none;border:none;padding:0}.panel.card{background:none}.panel .card-header{padding:0;background:none}.panel button{padding:0;color:#000;border:none;background:none}.panel button:focus{outline:none}.panel .panel-body{padding:0;border:none}.panel-default>.panel-heading+.panel-collapse>.panel-body{border:none}.panel-group .panel+.panel{margin-top:0}.panel-group .panel.panel-open .panel{margin-bottom:0}.accordion-toggle symphony-icon{transform:rotate(180deg)}.panel-open .accordion-toggle symphony-icon{transform:none}\n"], components: [{ type: i1$4.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { type: i1$4.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["isOpen", "panelClass", "heading", "isDisabled"], outputs: ["isOpenChange"] }, { type: SfxAccordionHeaderComponent, selector: "symphony-sfx-accordion-header", inputs: ["heading"] }, { type: FeedbackCandidateWorkHistoryComponent, selector: "symphony-feedback-candidate-workhistory", inputs: ["workHistories"] }, { type: FeedbackCandidateEducationComponent, selector: "symphony-feedback-candidate-education", inputs: ["educationHistories"] }, { type: FeedbackCandidateCertificationsComponent, selector: "symphony-feedback-candidate-certifications", inputs: ["certificationHistories"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackDetailCandidateInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailCandidateInfoComponent, selector: "symphony-feedback-detail-candidate-info", inputs: { historyList: "historyList", educationList: "educationList", certificationList: "certificationList" }, ngImport: i0, template: "<accordion>\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Work History'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-workhistory\n      [workHistories]=\"historyList\"\n    ></symphony-feedback-candidate-workhistory>\n  </accordion-group>\n\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Education'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-education\n      [educationHistories]=\"educationList\"\n    ></symphony-feedback-candidate-education>\n  </accordion-group>\n\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Certifications'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-certifications\n      [certificationHistories]=\"certificationList\"\n    ></symphony-feedback-candidate-certifications>\n  </accordion-group>\n</accordion>\n", styles: [".panel-group .panel{border:none;box-shadow:none;margin-bottom:40px}.panel{box-shadow:none;border:none;padding:0}.panel.card{background:none}.panel .card-header{padding:0;background:none}.panel button{padding:0;color:#000;border:none;background:none}.panel button:focus{outline:none}.panel .panel-body{padding:0;border:none}.panel-default>.panel-heading+.panel-collapse>.panel-body{border:none}.panel-group .panel+.panel{margin-top:0}.panel-group .panel.panel-open .panel{margin-bottom:0}.accordion-toggle symphony-icon{transform:rotate(180deg);display:block;transition:all .3s ease-in-out}.panel-open .accordion-toggle symphony-icon{transform:none}\n"], components: [{ type: i1$4.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { type: i1$4.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["isOpen", "panelClass", "heading", "isDisabled"], outputs: ["isOpenChange"] }, { type: SfxAccordionHeaderComponent, selector: "symphony-sfx-accordion-header", inputs: ["heading"] }, { type: FeedbackCandidateWorkHistoryComponent, selector: "symphony-feedback-candidate-workhistory", inputs: ["workHistories"] }, { type: FeedbackCandidateEducationComponent, selector: "symphony-feedback-candidate-education", inputs: ["educationHistories"] }, { type: FeedbackCandidateCertificationsComponent, selector: "symphony-feedback-candidate-certifications", inputs: ["certificationHistories"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailCandidateInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-feedback-detail-candidate-info', encapsulation: ViewEncapsulation.None, template: "<accordion>\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Work History'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-workhistory\n      [workHistories]=\"historyList\"\n    ></symphony-feedback-candidate-workhistory>\n  </accordion-group>\n\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Education'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-education\n      [educationHistories]=\"educationList\"\n    ></symphony-feedback-candidate-education>\n  </accordion-group>\n\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Certifications'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-certifications\n      [certificationHistories]=\"certificationList\"\n    ></symphony-feedback-candidate-certifications>\n  </accordion-group>\n</accordion>\n", styles: [".panel-group .panel{border:none;box-shadow:none;margin-bottom:40px}.panel{box-shadow:none;border:none;padding:0}.panel.card{background:none}.panel .card-header{padding:0;background:none}.panel button{padding:0;color:#000;border:none;background:none}.panel button:focus{outline:none}.panel .panel-body{padding:0;border:none}.panel-default>.panel-heading+.panel-collapse>.panel-body{border:none}.panel-group .panel+.panel{margin-top:0}.panel-group .panel.panel-open .panel{margin-bottom:0}.accordion-toggle symphony-icon{transform:rotate(180deg)}.panel-open .accordion-toggle symphony-icon{transform:none}\n"] }]
+            args: [{ selector: 'symphony-feedback-detail-candidate-info', encapsulation: ViewEncapsulation.None, template: "<accordion>\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Work History'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-workhistory\n      [workHistories]=\"historyList\"\n    ></symphony-feedback-candidate-workhistory>\n  </accordion-group>\n\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Education'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-education\n      [educationHistories]=\"educationList\"\n    ></symphony-feedback-candidate-education>\n  </accordion-group>\n\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Certifications'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-certifications\n      [certificationHistories]=\"certificationList\"\n    ></symphony-feedback-candidate-certifications>\n  </accordion-group>\n</accordion>\n", styles: [".panel-group .panel{border:none;box-shadow:none;margin-bottom:40px}.panel{box-shadow:none;border:none;padding:0}.panel.card{background:none}.panel .card-header{padding:0;background:none}.panel button{padding:0;color:#000;border:none;background:none}.panel button:focus{outline:none}.panel .panel-body{padding:0;border:none}.panel-default>.panel-heading+.panel-collapse>.panel-body{border:none}.panel-group .panel+.panel{margin-top:0}.panel-group .panel.panel-open .panel{margin-bottom:0}.accordion-toggle symphony-icon{transform:rotate(180deg);display:block;transition:all .3s ease-in-out}.panel-open .accordion-toggle symphony-icon{transform:none}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { historyList: [{
                 type: Input
             }], educationList: [{
@@ -3616,7 +3744,7 @@ OrganismsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TypographyModule,
         IconExplorerModule,
         CardListModule,
-        CancelModalModule,
+        ConfirmationModalModule,
         UploadResumeModalModule,
         FeedbackCardListModule,
         FeedbackDetailHeaderModule,
@@ -3625,7 +3753,8 @@ OrganismsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         GridActionsJobListModule,
         GridControlsJobListModule,
         ActionBarModule,
-        ActionBarJobListModule] });
+        ActionBarJobListModule,
+        DocumentManagementListModule] });
 OrganismsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrganismsModule, imports: [[
             CommonModule,
             NoteListModule,
@@ -3633,7 +3762,7 @@ OrganismsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             TypographyModule,
             IconExplorerModule,
             CardListModule,
-            CancelModalModule,
+            ConfirmationModalModule,
             UploadResumeModalModule,
             FeedbackCardListModule,
             FeedbackDetailHeaderModule,
@@ -3642,7 +3771,8 @@ OrganismsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             GridActionsJobListModule,
             GridControlsJobListModule,
             ActionBarModule,
-            ActionBarJobListModule
+            ActionBarJobListModule,
+            DocumentManagementListModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrganismsModule, decorators: [{
             type: NgModule,
@@ -3655,7 +3785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         TypographyModule,
                         IconExplorerModule,
                         CardListModule,
-                        CancelModalModule,
+                        ConfirmationModalModule,
                         UploadResumeModalModule,
                         FeedbackCardListModule,
                         FeedbackDetailHeaderModule,
@@ -3664,7 +3794,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         GridActionsJobListModule,
                         GridControlsJobListModule,
                         ActionBarModule,
-                        ActionBarJobListModule
+                        ActionBarJobListModule,
+                        DocumentManagementListModule
                     ]
                 }]
         }] });
@@ -4095,6 +4226,7 @@ class AdvertiseModalComponent {
     constructor() {
         this.buttonClicked = new EventEmitter();
         this.closeButtonClicked = new EventEmitter();
+        this.postingBoardChange = new EventEmitter();
         this.fundsInfo = {
             icon: Icons.CONFIRMATION,
             iconFirst: true,
@@ -4226,19 +4358,22 @@ class AdvertiseModalComponent {
         else {
             this.isJobBoardNextButtonDisabled = false;
         }
+        this.postingBoardChange.emit(this.model);
     }
 }
 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", "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"] }] });
+AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", postingBoardChange: "postingBoardChange" }, 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-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-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: ConfirmationModalComponent, selector: "symphony-confirmation-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"] }]
+            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-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], buttonClicked: [{
                 type: Output
             }], closeButtonClicked: [{
                 type: Output
+            }], postingBoardChange: [{
+                type: Output
             }] } });
 
 class TwoColumnModalModule {
@@ -4373,7 +4508,7 @@ ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         SfxLoaderModule,
         AdvertiseOrderReviewModule,
         OrderSummaryModule,
-        CancelModalModule], exports: [AdvertiseModalComponent] });
+        ConfirmationModalModule], exports: [AdvertiseModalComponent] });
 ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ModalModule, imports: [[
             CommonModule,
             TwoColumnModalModule,
@@ -4392,7 +4527,7 @@ ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
             SfxLoaderModule,
             AdvertiseOrderReviewModule,
             OrderSummaryModule,
-            CancelModalModule
+            ConfirmationModalModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ModalModule, decorators: [{
             type: NgModule,
@@ -4416,7 +4551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         SfxLoaderModule,
                         AdvertiseOrderReviewModule,
                         OrderSummaryModule,
-                        CancelModalModule
+                        ConfirmationModalModule
                     ],
                     exports: [AdvertiseModalComponent],
                 }]
@@ -4484,10 +4619,10 @@ class FeedbackListTemplateComponent {
     constructor() { }
 }
 FeedbackListTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackListTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackListTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackListTemplateComponent, selector: "symphony-feedback-list-template", ngImport: i0, template: "<section class=\"sfx-page-title\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-9 col-md-9 col-lg-9\">\n      <ng-content select=\"[page-title]\"></ng-content>\n    </div>\n\n    <div class=\"col-xs-12 col-sm-3 col-md-3 col-lg-3\">\n      <ng-content select=\"[button-primary]\"></ng-content>\n    </div>\n  </div>\n</section>\n<div class=\"sfx-border-bottom-black-5\"></div>\n<section class=\"sfx-pt-30\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n      <ng-content select=\"[feedback-card-list]\"></ng-content>\n    </div>\n  </div>\n</section>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}\n"] });
+FeedbackListTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackListTemplateComponent, selector: "symphony-feedback-list-template", ngImport: i0, template: "<section class=\"sfx-page-title\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-9 col-md-9 col-lg-9\">\n      <ng-content select=\"[page-title]\"></ng-content>\n    </div>\n\n    <div class=\"col-xs-12 col-sm-3 col-md-3 col-lg-3\">\n      <ng-content select=\"[button-primary]\"></ng-content>\n    </div>\n  </div>\n</section>\n<div class=\"sfx-border-bottom-black-5\"></div>\n<section class=\"sfx-pt-40\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n      <ng-content select=\"[feedback-card-list]\"></ng-content>\n    </div>\n  </div>\n</section>\n", styles: [".sfx-page-title{margin-top:1.25rem;margin-bottom:1.875rem}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackListTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-feedback-list-template', template: "<section class=\"sfx-page-title\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-9 col-md-9 col-lg-9\">\n      <ng-content select=\"[page-title]\"></ng-content>\n    </div>\n\n    <div class=\"col-xs-12 col-sm-3 col-md-3 col-lg-3\">\n      <ng-content select=\"[button-primary]\"></ng-content>\n    </div>\n  </div>\n</section>\n<div class=\"sfx-border-bottom-black-5\"></div>\n<section class=\"sfx-pt-30\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n      <ng-content select=\"[feedback-card-list]\"></ng-content>\n    </div>\n  </div>\n</section>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}\n"] }]
+            args: [{ selector: 'symphony-feedback-list-template', template: "<section class=\"sfx-page-title\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-9 col-md-9 col-lg-9\">\n      <ng-content select=\"[page-title]\"></ng-content>\n    </div>\n\n    <div class=\"col-xs-12 col-sm-3 col-md-3 col-lg-3\">\n      <ng-content select=\"[button-primary]\"></ng-content>\n    </div>\n  </div>\n</section>\n<div class=\"sfx-border-bottom-black-5\"></div>\n<section class=\"sfx-pt-40\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n      <ng-content select=\"[feedback-card-list]\"></ng-content>\n    </div>\n  </div>\n</section>\n", styles: [".sfx-page-title{margin-top:1.25rem;margin-bottom:1.875rem}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class FeedbackListPageComponent {
@@ -4503,10 +4638,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    [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 });
+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}@media (max-width: 767px){.pull-right{float:none!important}.pull-right .btn{margin-top:20px}}\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    [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"] }]
+            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}@media (max-width: 767px){.pull-right{float:none!important}.pull-right .btn{margin-top:20px}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], cardClicked: [{
@@ -4572,10 +4707,10 @@ 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"] });
+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-mobile\">\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-mobile.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"] }]
+            args: [{ selector: 'symphony-feedback-detail-template', template: "<section class=\"sfx-border-bottom-gray-1 sfx-pb-10 sfx-mt-10 sfx-header-mobile\">\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-mobile.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 {
@@ -4594,10 +4729,10 @@ class FeedbackDetailInterestFormComponent {
     }
 }
 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 });
+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}body .sfx .form-group p.body-copy-primary{margin-top:4px}.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"] }]
+            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}body .sfx .form-group p.body-copy-primary{margin-top:4px}.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: [{
@@ -4731,5 +4866,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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, GridActionsJobListComponent, GridActionsJobListModule, GridCellLoaderModule, GridComponent, GridControlsJobListComponent, GridControlsJobListModule, 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, ConfirmationModalComponent, ConfirmationModalModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, DocumentManagementItemComponent, DocumentManagementItemModule, DocumentManagementListComponent, DocumentManagementListModule, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackDetailPageComponent, FeedbackDetailPageModule, FeedbackListPageComponent, FeedbackListPageModule, FeedbackLoginModalComponent, FeedbackLoginModalModule, FileUploadComponent, FileUploadModule, FilterAreaComponent, FilterAreaModule, FrameworkModule, GridActionsJobListComponent, GridActionsJobListModule, GridCellLoaderModule, GridComponent, GridControlsJobListComponent, GridControlsJobListModule, 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-projects-component-library.mjs.map