@symphony-talent/component-library 3.6.0 → 3.8.1

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

@@ -1524,10 +1524,10 @@ class H5WithIconComponent {
     }
 }
 H5WithIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5WithIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-H5WithIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: { model: "model" }, ngImport: i0, template: "<div *ngIf=\"model.iconFirst\" class=\"sfx-d-flex icon-first\">\n  <symphony-tooltip-wrapper\n    *ngIf=\"model.tooltipHtml\"\n    [tooltipHtml]=\"model.tooltipHtml\"\n    [placement]=\"model.placement\"\n  >\n    <symphony-icon\n      [icon]=\"model.icon\"\n      [iconColor]=\"model.iconColor\"\n    ></symphony-icon>\n  </symphony-tooltip-wrapper>\n  <symphony-icon\n    *ngIf=\"!model.tooltipHtml\"\n    [icon]=\"model.icon\"\n    [iconColor]=\"model.iconColor\"\n  ></symphony-icon>\n  <symphony-h5>{{ model.text }}</symphony-h5>\n</div>\n<div *ngIf=\"!model.iconFirst\" class=\"sfx-d-flex icon-last\">\n  <symphony-h5>{{ model.text }}</symphony-h5>\n\n  <symphony-tooltip-wrapper\n    *ngIf=\"model.tooltipHtml\"\n    [tooltipHtml]=\"model.tooltipHtml\"\n    [placement]=\"model.placement\"\n  >\n    <symphony-icon\n      [icon]=\"model.icon\"\n      [iconColor]=\"model.iconColor\"\n    ></symphony-icon>\n  </symphony-tooltip-wrapper>\n  <symphony-icon\n    *ngIf=\"!model.tooltipHtml\"\n    [icon]=\"model.icon\"\n    [iconColor]=\"model.iconColor\"\n  ></symphony-icon>\n</div>\n", styles: [".icon-last{position:relative}.icon-last symphony-h5{padding-right:5px}.icon-last symphony-icon{height:20px}.icon-first{position:relative}.icon-first symphony-h5{padding-left:5px}.icon-first symphony-icon{height:20px}\n"], components: [{ type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+H5WithIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: { model: "model" }, ngImport: i0, template: "<div *ngIf=\"model && model.iconFirst\" class=\"sfx-d-flex icon-first\">\n  <symphony-tooltip-wrapper\n    *ngIf=\"model.tooltipHtml\"\n    [tooltipHtml]=\"model.tooltipHtml\"\n    [placement]=\"model.placement\"\n  >\n    <symphony-icon\n      [icon]=\"model.icon\"\n      [iconColor]=\"model.iconColor\"\n    ></symphony-icon>\n  </symphony-tooltip-wrapper>\n  <symphony-icon\n    *ngIf=\"!model.tooltipHtml\"\n    [icon]=\"model.icon\"\n    [iconColor]=\"model.iconColor\"\n  ></symphony-icon>\n  <symphony-h5>{{ model.text }}</symphony-h5>\n</div>\n<div *ngIf=\"model && !model.iconFirst\" class=\"sfx-d-flex icon-last\">\n  <symphony-h5>{{ model.text }}</symphony-h5>\n\n  <symphony-tooltip-wrapper\n    *ngIf=\"model.tooltipHtml\"\n    [tooltipHtml]=\"model.tooltipHtml\"\n    [placement]=\"model.placement\"\n  >\n    <symphony-icon\n      [icon]=\"model.icon\"\n      [iconColor]=\"model.iconColor\"\n    ></symphony-icon>\n  </symphony-tooltip-wrapper>\n  <symphony-icon\n    *ngIf=\"!model.tooltipHtml\"\n    [icon]=\"model.icon\"\n    [iconColor]=\"model.iconColor\"\n  ></symphony-icon>\n</div>\n", styles: [".icon-last{position:relative}.icon-last symphony-h5{padding-right:5px}.icon-last symphony-icon{height:20px}.icon-first{position:relative}.icon-first symphony-h5{padding-left:5px}.icon-first symphony-icon{height:20px}\n"], components: [{ type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5WithIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-h5-with-icon', template: "<div *ngIf=\"model.iconFirst\" class=\"sfx-d-flex icon-first\">\n  <symphony-tooltip-wrapper\n    *ngIf=\"model.tooltipHtml\"\n    [tooltipHtml]=\"model.tooltipHtml\"\n    [placement]=\"model.placement\"\n  >\n    <symphony-icon\n      [icon]=\"model.icon\"\n      [iconColor]=\"model.iconColor\"\n    ></symphony-icon>\n  </symphony-tooltip-wrapper>\n  <symphony-icon\n    *ngIf=\"!model.tooltipHtml\"\n    [icon]=\"model.icon\"\n    [iconColor]=\"model.iconColor\"\n  ></symphony-icon>\n  <symphony-h5>{{ model.text }}</symphony-h5>\n</div>\n<div *ngIf=\"!model.iconFirst\" class=\"sfx-d-flex icon-last\">\n  <symphony-h5>{{ model.text }}</symphony-h5>\n\n  <symphony-tooltip-wrapper\n    *ngIf=\"model.tooltipHtml\"\n    [tooltipHtml]=\"model.tooltipHtml\"\n    [placement]=\"model.placement\"\n  >\n    <symphony-icon\n      [icon]=\"model.icon\"\n      [iconColor]=\"model.iconColor\"\n    ></symphony-icon>\n  </symphony-tooltip-wrapper>\n  <symphony-icon\n    *ngIf=\"!model.tooltipHtml\"\n    [icon]=\"model.icon\"\n    [iconColor]=\"model.iconColor\"\n  ></symphony-icon>\n</div>\n", styles: [".icon-last{position:relative}.icon-last symphony-h5{padding-right:5px}.icon-last symphony-icon{height:20px}.icon-first{position:relative}.icon-first symphony-h5{padding-left:5px}.icon-first symphony-icon{height:20px}\n"] }]
+            args: [{ selector: 'symphony-h5-with-icon', template: "<div *ngIf=\"model && model.iconFirst\" class=\"sfx-d-flex icon-first\">\n  <symphony-tooltip-wrapper\n    *ngIf=\"model.tooltipHtml\"\n    [tooltipHtml]=\"model.tooltipHtml\"\n    [placement]=\"model.placement\"\n  >\n    <symphony-icon\n      [icon]=\"model.icon\"\n      [iconColor]=\"model.iconColor\"\n    ></symphony-icon>\n  </symphony-tooltip-wrapper>\n  <symphony-icon\n    *ngIf=\"!model.tooltipHtml\"\n    [icon]=\"model.icon\"\n    [iconColor]=\"model.iconColor\"\n  ></symphony-icon>\n  <symphony-h5>{{ model.text }}</symphony-h5>\n</div>\n<div *ngIf=\"model && !model.iconFirst\" class=\"sfx-d-flex icon-last\">\n  <symphony-h5>{{ model.text }}</symphony-h5>\n\n  <symphony-tooltip-wrapper\n    *ngIf=\"model.tooltipHtml\"\n    [tooltipHtml]=\"model.tooltipHtml\"\n    [placement]=\"model.placement\"\n  >\n    <symphony-icon\n      [icon]=\"model.icon\"\n      [iconColor]=\"model.iconColor\"\n    ></symphony-icon>\n  </symphony-tooltip-wrapper>\n  <symphony-icon\n    *ngIf=\"!model.tooltipHtml\"\n    [icon]=\"model.icon\"\n    [iconColor]=\"model.iconColor\"\n  ></symphony-icon>\n</div>\n", styles: [".icon-last{position:relative}.icon-last symphony-h5{padding-right:5px}.icon-last symphony-icon{height:20px}.icon-first{position:relative}.icon-first symphony-h5{padding-left:5px}.icon-first symphony-icon{height:20px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }] } });
@@ -2948,21 +2948,23 @@ class TwoColumnModalTemplateComponent {
     constructor() { }
 }
 TwoColumnModalTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnModalTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TwoColumnModalTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", ngImport: i0, template: "<div class=\"sfx sfx-modal\">\n  <!-- main title -->\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title sfx-pb-30\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 sfx-pr-30\">\n          <ng-content select=\"[sfx-modal-title]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-pr-15\" style=\"padding-top: 1px\">\n          <ng-content select=\"[sfx-close-button]\"></ng-content>\n        </span>\n      </div>\n    </div>\n    <div class=\"modal-subtitle\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 sfx-pr-30\">\n          <ng-content select=\"[sfx-modal-subtitle]\"></ng-content>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body-area sfx-pt-0\">\n    <ng-content select=\"[sfx-modal-body-area]\"></ng-content>\n  </section>\n  <!-- footer -->\n  <section class=\"modal-footer sfx-bg-black sfx-pt-30 sfx-pb-40\">\n    <div class=\"col-xs-12\">\n      <div class=\"sfx-d-flex pull-right\">\n        <span class=\"sfx-pr-10\">\n          <ng-content select=\"[sfx-button-secondary]\"></ng-content>\n        </span>\n        <span class=\"sfx-pl-10\">\n          <ng-content select=\"[sfx-button-primary]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n</div>\n", styles: [""] });
+TwoColumnModalTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", ngImport: i0, template: "<div class=\"sfx sfx-modal\">\n  <!-- main title -->\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title sfx-pb-30\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 sfx-pr-30\">\n          <ng-content select=\"[sfx-modal-title]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-pr-15\" style=\"padding-top: 1px\">\n          <ng-content select=\"[sfx-close-button]\"></ng-content>\n        </span>\n      </div>\n    </div>\n    <div class=\"modal-subtitle\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 sfx-pr-30\">\n          <ng-content select=\"[sfx-modal-subtitle]\"></ng-content>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body-area sfx-pt-0\">\n    <ng-content select=\"[sfx-modal-body-area]\"></ng-content>\n  </section>\n  <!-- footer -->\n  <section class=\"modal-footer sfx-bg-black sfx-pt-30 sfx-pb-40\">\n    <div class=\"col-xs-6\">\n      <span class=\"sfx-pr-10 pull-left\">\n        <ng-content select=\"[sfx-button-back]\"></ng-content>\n      </span>\n    </div>\n    <div class=\"col-xs-6\">\n      <div class=\"sfx-d-flex pull-right\">\n        <span class=\"sfx-pr-10\">\n          <ng-content select=\"[sfx-button-secondary]\"></ng-content>\n        </span>\n        <span class=\"sfx-pl-10\">\n          <ng-content select=\"[sfx-button-primary]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n</div>\n", styles: [".pull-left{float:left}.modal-footer{min-height:130px}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnModalTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-two-column-modal-template', template: "<div class=\"sfx sfx-modal\">\n  <!-- main title -->\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title sfx-pb-30\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 sfx-pr-30\">\n          <ng-content select=\"[sfx-modal-title]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-pr-15\" style=\"padding-top: 1px\">\n          <ng-content select=\"[sfx-close-button]\"></ng-content>\n        </span>\n      </div>\n    </div>\n    <div class=\"modal-subtitle\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 sfx-pr-30\">\n          <ng-content select=\"[sfx-modal-subtitle]\"></ng-content>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body-area sfx-pt-0\">\n    <ng-content select=\"[sfx-modal-body-area]\"></ng-content>\n  </section>\n  <!-- footer -->\n  <section class=\"modal-footer sfx-bg-black sfx-pt-30 sfx-pb-40\">\n    <div class=\"col-xs-12\">\n      <div class=\"sfx-d-flex pull-right\">\n        <span class=\"sfx-pr-10\">\n          <ng-content select=\"[sfx-button-secondary]\"></ng-content>\n        </span>\n        <span class=\"sfx-pl-10\">\n          <ng-content select=\"[sfx-button-primary]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n</div>\n", styles: [""] }]
+            args: [{ selector: 'symphony-two-column-modal-template', template: "<div class=\"sfx sfx-modal\">\n  <!-- main title -->\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title sfx-pb-30\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 sfx-pr-30\">\n          <ng-content select=\"[sfx-modal-title]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-pr-15\" style=\"padding-top: 1px\">\n          <ng-content select=\"[sfx-close-button]\"></ng-content>\n        </span>\n      </div>\n    </div>\n    <div class=\"modal-subtitle\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 sfx-pr-30\">\n          <ng-content select=\"[sfx-modal-subtitle]\"></ng-content>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body-area sfx-pt-0\">\n    <ng-content select=\"[sfx-modal-body-area]\"></ng-content>\n  </section>\n  <!-- footer -->\n  <section class=\"modal-footer sfx-bg-black sfx-pt-30 sfx-pb-40\">\n    <div class=\"col-xs-6\">\n      <span class=\"sfx-pr-10 pull-left\">\n        <ng-content select=\"[sfx-button-back]\"></ng-content>\n      </span>\n    </div>\n    <div class=\"col-xs-6\">\n      <div class=\"sfx-d-flex pull-right\">\n        <span class=\"sfx-pr-10\">\n          <ng-content select=\"[sfx-button-secondary]\"></ng-content>\n        </span>\n        <span class=\"sfx-pl-10\">\n          <ng-content select=\"[sfx-button-primary]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n</div>\n", styles: [".pull-left{float:left}.modal-footer{min-height:130px}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class TwoColumnBodyTemplateComponent {
     constructor() { }
 }
 TwoColumnBodyTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnBodyTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TwoColumnBodyTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", ngImport: i0, template: "<!-- filter area -->\n\n<div class=\"modal-header sfx-p-30\">\n  <div class=\"col-headers row\">\n    <div class=\"left-col-header col-xs-6 col-sm-6 col-md-6 sfx-pr-30\">\n      <ng-content select=\"[sfx-left-col-header]\"></ng-content>\n    </div>\n    <div class=\"right-col-header col-xs-6 col-sm-6 col-md-6 sfx-pl-30\">\n      <ng-content select=\"[sfx-right-col-header]\"></ng-content>\n    </div>\n  </div>\n</div>\n<!-- main body -->\n<div class=\"modal-body sfx-px-0\">\n  <div class=\"row\">\n    <div class=\"sfx-checkbox-list col-xs-12 col-sm-6 col-md-6 sfx-p-30\">\n      <ng-content select=\"[sfx-left-column]\"></ng-content>\n    </div>\n    <div class=\"sfx-price-totals col-xs-12 col-sm-6 col-md-6 sfx-p-30\">\n      <ng-content select=\"[sfx-right-column]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-checkbox-list{border-right:1px solid #e5e5e5}\n"] });
+TwoColumnBodyTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: { showHeader: "showHeader" }, ngImport: i0, template: "<!-- filter area -->\n\n<div class=\"modal-header sfx-p-30\" *ngIf=\"showHeader\">\n  <div class=\"col-headers row\">\n    <div class=\"left-col-header col-xs-6 col-sm-6 col-md-6 sfx-pr-30\">\n      <ng-content select=\"[sfx-left-col-header]\"></ng-content>\n    </div>\n    <div class=\"right-col-header col-xs-6 col-sm-6 col-md-6 sfx-pl-30\">\n      <ng-content select=\"[sfx-right-col-header]\"></ng-content>\n    </div>\n  </div>\n</div>\n<!-- main body -->\n<div class=\"modal-body sfx-px-0\">\n  <div class=\"row\">\n    <div class=\"sfx-checkbox-list col-xs-12 col-sm-6 col-md-6 sfx-p-30\">\n      <ng-content select=\"[sfx-left-column]\"></ng-content>\n    </div>\n    <div class=\"sfx-price-totals col-xs-12 col-sm-6 col-md-6 sfx-p-30\">\n      <ng-content select=\"[sfx-right-column]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-checkbox-list{border-right:1px solid #e5e5e5}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnBodyTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-two-column-body-template', template: "<!-- filter area -->\n\n<div class=\"modal-header sfx-p-30\">\n  <div class=\"col-headers row\">\n    <div class=\"left-col-header col-xs-6 col-sm-6 col-md-6 sfx-pr-30\">\n      <ng-content select=\"[sfx-left-col-header]\"></ng-content>\n    </div>\n    <div class=\"right-col-header col-xs-6 col-sm-6 col-md-6 sfx-pl-30\">\n      <ng-content select=\"[sfx-right-col-header]\"></ng-content>\n    </div>\n  </div>\n</div>\n<!-- main body -->\n<div class=\"modal-body sfx-px-0\">\n  <div class=\"row\">\n    <div class=\"sfx-checkbox-list col-xs-12 col-sm-6 col-md-6 sfx-p-30\">\n      <ng-content select=\"[sfx-left-column]\"></ng-content>\n    </div>\n    <div class=\"sfx-price-totals col-xs-12 col-sm-6 col-md-6 sfx-p-30\">\n      <ng-content select=\"[sfx-right-column]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-checkbox-list{border-right:1px solid #e5e5e5}\n"] }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'symphony-two-column-body-template', template: "<!-- filter area -->\n\n<div class=\"modal-header sfx-p-30\" *ngIf=\"showHeader\">\n  <div class=\"col-headers row\">\n    <div class=\"left-col-header col-xs-6 col-sm-6 col-md-6 sfx-pr-30\">\n      <ng-content select=\"[sfx-left-col-header]\"></ng-content>\n    </div>\n    <div class=\"right-col-header col-xs-6 col-sm-6 col-md-6 sfx-pl-30\">\n      <ng-content select=\"[sfx-right-col-header]\"></ng-content>\n    </div>\n  </div>\n</div>\n<!-- main body -->\n<div class=\"modal-body sfx-px-0\">\n  <div class=\"row\">\n    <div class=\"sfx-checkbox-list col-xs-12 col-sm-6 col-md-6 sfx-p-30\">\n      <ng-content select=\"[sfx-left-column]\"></ng-content>\n    </div>\n    <div class=\"sfx-price-totals col-xs-12 col-sm-6 col-md-6 sfx-p-30\">\n      <ng-content select=\"[sfx-right-column]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-checkbox-list{border-right:1px solid #e5e5e5}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { showHeader: [{
+                type: Input
+            }] } });
 
 class InputEditableTextComponent {
     constructor() {
@@ -3038,13 +3040,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
             }] } });
 
 class AdvertisePostingboardSelectionListComponent {
-    constructor() { }
+    constructor() {
+        this.postingBoardChange = new EventEmitter();
+    }
+    onPostingBoardSelect(selectedBoard) {
+        console.log('onPostingBoardSelect');
+        this.postingBoardChange.emit(selectedBoard);
+    }
+    onPriceChange(priceChangeBoard) {
+        console.log('onPriceChange');
+        this.postingBoardChange.emit(priceChangeBoard);
+    }
 }
 AdvertisePostingboardSelectionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisePostingboardSelectionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvertisePostingboardSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: { model: "model" }, ngImport: i0, template: "<symphony-advertise-postingboard-selection-item\n  *ngFor=\"let item of model\"\n  [model]=\"item\"\n></symphony-advertise-postingboard-selection-item>\n", styles: [""], components: [{ type: AdvertisePostingboardSelectionItemComponent, selector: "symphony-advertise-postingboard-selection-item", inputs: ["model"], outputs: ["priceChange", "postingBoardSelect"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+AdvertisePostingboardSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: { model: "model" }, outputs: { postingBoardChange: "postingBoardChange" }, ngImport: i0, template: "<symphony-advertise-postingboard-selection-item\n  *ngFor=\"let item of model\"\n  [model]=\"item\"\n  (postingBoardSelect)=\"onPostingBoardSelect($event)\"\n  (priceChange)=\"onPriceChange($event)\"\n></symphony-advertise-postingboard-selection-item>\n", styles: [""], components: [{ type: AdvertisePostingboardSelectionItemComponent, selector: "symphony-advertise-postingboard-selection-item", inputs: ["model"], outputs: ["priceChange", "postingBoardSelect"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisePostingboardSelectionListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-advertise-postingboard-selection-list', template: "<symphony-advertise-postingboard-selection-item\n  *ngFor=\"let item of model\"\n  [model]=\"item\"\n></symphony-advertise-postingboard-selection-item>\n", styles: [""] }]
+            args: [{ selector: 'symphony-advertise-postingboard-selection-list', template: "<symphony-advertise-postingboard-selection-item\n  *ngFor=\"let item of model\"\n  [model]=\"item\"\n  (postingBoardSelect)=\"onPostingBoardSelect($event)\"\n  (priceChange)=\"onPriceChange($event)\"\n></symphony-advertise-postingboard-selection-item>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], postingBoardChange: [{
+                type: Output
+            }] } });
+
+class InvoiceAreaComponent {
+    constructor() {
+        this.model = {
+            lineItems: [],
+            title: '',
+        };
+    }
+}
+InvoiceAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InvoiceAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InvoiceAreaComponent, selector: "symphony-invoice-area", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"job-type-summary sfx-px-20\">\n  <div class=\"job-type-title\">\n    <symphony-h5 [text]=\"model.title\"></symphony-h5>\n  </div>\n  <ul class=\"invoice-list list-unstyled sfx-mb-20\">\n    <li class=\"invoice-line-item\" *ngFor=\"let lineItem of model.lineItems\">\n      <symphony-invoice-line-item\n        [model]=\"lineItem\"\n      ></symphony-invoice-line-item>\n    </li>\n  </ul>\n  <symphony-invoice-line-item\n    [model]=\"model.total\"\n  ></symphony-invoice-line-item>\n</div>\n", styles: [".job-type-summary{border-bottom:1px solid #d9d9d9}\n"], components: [{ type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: InvoiceLineItemComponent, selector: "symphony-invoice-line-item", inputs: ["model"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-invoice-area', template: "<div class=\"job-type-summary sfx-px-20\">\n  <div class=\"job-type-title\">\n    <symphony-h5 [text]=\"model.title\"></symphony-h5>\n  </div>\n  <ul class=\"invoice-list list-unstyled sfx-mb-20\">\n    <li class=\"invoice-line-item\" *ngFor=\"let lineItem of model.lineItems\">\n      <symphony-invoice-line-item\n        [model]=\"lineItem\"\n      ></symphony-invoice-line-item>\n    </li>\n  </ul>\n  <symphony-invoice-line-item\n    [model]=\"model.total\"\n  ></symphony-invoice-line-item>\n</div>\n", styles: [".job-type-summary{border-bottom:1px solid #d9d9d9}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class OrderSummaryComponent {
+    constructor() {
+        this.model = {
+            invoiceAreas: [],
+            title: '',
+        };
+    }
+}
+OrderSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrderSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OrderSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: { model: "model" }, ngImport: i0, template: "<section class=\"order-summary\">\n  <symphony-h4>{{ model.title }}</symphony-h4>\n  <ul class=\"invoice-area-list list-unstyled sfx-mb-20\">\n    <li\n      class=\"invoice-area-item\"\n      *ngFor=\"let invoiceArea of model.invoiceAreas\"\n    >\n      <symphony-invoice-area [model]=\"invoiceArea\"></symphony-invoice-area>\n    </li>\n  </ul>\n  <symphony-invoice-line-item\n    [model]=\"model.total\"\n  ></symphony-invoice-line-item>\n</section>\n", styles: [""], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: InvoiceAreaComponent, selector: "symphony-invoice-area", inputs: ["model"] }, { type: InvoiceLineItemComponent, selector: "symphony-invoice-line-item", inputs: ["model"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrderSummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-order-summary', template: "<section class=\"order-summary\">\n  <symphony-h4>{{ model.title }}</symphony-h4>\n  <ul class=\"invoice-area-list list-unstyled sfx-mb-20\">\n    <li\n      class=\"invoice-area-item\"\n      *ngFor=\"let invoiceArea of model.invoiceAreas\"\n    >\n      <symphony-invoice-area [model]=\"invoiceArea\"></symphony-invoice-area>\n    </li>\n  </ul>\n  <symphony-invoice-line-item\n    [model]=\"model.total\"\n  ></symphony-invoice-line-item>\n</section>\n", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }] } });
@@ -3061,30 +3109,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
 
 class AdvertiseModalComponent {
     constructor() {
-        this.model = {
-            title: '',
-            subtitle: {
-                text: '',
-                icon: Icons.INFO,
-                iconFirst: true,
-            },
-            fundsInfo: {
-                text: '',
-                icon: Icons.INFO,
-                iconFirst: true,
-                iconColor: '',
-            },
-            primaryButtonText: '',
-            secondaryButtonText: '',
-        };
         this.buttonClicked = new EventEmitter();
         this.closeButtonClicked = new EventEmitter();
+        this.fundsInfo = {
+            icon: Icons.CONFIRMATION,
+            iconFirst: true,
+            text: 'Sufficient Funds',
+            iconColor: '#00D56B',
+        };
+        this.payPerClickBoards = [];
+        this.jobBoards = [];
+        this.jobCount = 0;
+        this.modalTitle = '';
     }
     ngOnInit() {
+        this.initialiseDefaultValues();
+        this.updateModalHeader();
+        this.updateOrderSummary();
+    }
+    initialiseDefaultValues() {
         this.filteredPostingBoardList = this.model.jobBoards;
+        this.jobCount = this.model.jobsToAdvertise.length;
+        this.orderSummary = {
+            title: 'Your Order',
+            invoiceAreas: [
+                {
+                    lineItems: [],
+                    title: 'Pay-Per-Click',
+                    total: {
+                        textLeft: 'Cost Programatic Boards',
+                        textRight: `x (${this.jobCount}) Jobs = $0`,
+                    },
+                },
+                {
+                    lineItems: [],
+                    title: 'Job Boards',
+                    total: {
+                        textLeft: 'Cost Job Boards',
+                        textRight: `x (${this.jobCount}) Jobs = $0`,
+                    },
+                },
+            ],
+            total: {
+                textLeft: '',
+                textRight: '$0',
+                label: 'Total:',
+            },
+        };
     }
-    keywordSearch(keyword) {
-        this.filteredPostingBoardList = this.model.jobBoards.filter((board) => board.boardName.toLowerCase().includes(keyword));
+    updateModalHeader() {
+        let subTitleTooltip = '';
+        let jobNumber = 1;
+        this.model.jobsToAdvertise.forEach((job) => {
+            subTitleTooltip = subTitleTooltip + `${job.jobTitle} [${job.id}]`;
+            if (jobNumber != this.model.jobsToAdvertise.length) {
+                subTitleTooltip = subTitleTooltip + '</br>';
+            }
+            jobNumber++;
+        });
+        this.subTitle = {
+            tooltipHtml: subTitleTooltip,
+            text: `${this.model.jobsToAdvertise.length} Jobs`,
+            iconFirst: false,
+            icon: Icons.INFO,
+            placement: 'right',
+        };
+    }
+    onKeywordSearch(keyword) {
+        this.filteredPostingBoardList = this.model.jobBoards.filter((board) => board.boardName.toLowerCase().includes(keyword.toLowerCase()));
     }
     onButtonClick(text) {
         this.buttonClicked.emit(text);
@@ -3092,12 +3184,63 @@ class AdvertiseModalComponent {
     onCloseButtonClick() {
         this.closeButtonClicked.emit();
     }
+    onPostingBoardChange(selectedBoard) {
+        this.updateOrderSummary();
+    }
+    addLineItem(invoiceAreaIndex, selectedBoard) {
+        this.orderSummary.invoiceAreas[invoiceAreaIndex].lineItems.push({
+            textLeft: selectedBoard.boardName,
+            textRight: `$${selectedBoard.boardPrice}`,
+        });
+    }
+    removeLineItem(invoiceAreaIndex, selectedBoard) {
+        this.orderSummary.invoiceAreas[invoiceAreaIndex].lineItems =
+            this.orderSummary.invoiceAreas[invoiceAreaIndex].lineItems.filter((li) => li.textLeft !== selectedBoard.boardName);
+    }
+    calculateInvoiceAreaTotal(invoiceAreaIndex) {
+        let invoiceAreaTotal = 0;
+        this.orderSummary.invoiceAreas[invoiceAreaIndex].lineItems.forEach((li) => {
+            invoiceAreaTotal = invoiceAreaTotal + +li.textRight.replace('$', '');
+        });
+        this.orderSummary.invoiceAreas[invoiceAreaIndex].total.textRight = `x (${this.model.jobsToAdvertise.length}) Jobs = $${invoiceAreaTotal * this.model.jobsToAdvertise.length}`;
+        return invoiceAreaTotal * this.model.jobsToAdvertise.length;
+    }
+    calculateOrderTotal(payPerClickAreaTotal, jobBoardAreaTotal) {
+        const selectedJobBoards = this.model.jobBoards.filter((jb) => jb.isSelected).length;
+        const jobToAdvertiseCount = this.model.jobsToAdvertise.length;
+        const orderSummaryText = `(${selectedJobBoards}) Boards x ${this.model.jobsToAdvertise.length} Jobs = (${selectedJobBoards * jobToAdvertiseCount}) Ads`;
+        this.orderSummary.total = {
+            label: 'Total:',
+            textLeft: orderSummaryText,
+            textRight: `$${payPerClickAreaTotal + jobBoardAreaTotal}`,
+        };
+    }
+    updateOrderSummary() {
+        this.orderSummary.invoiceAreas[0].lineItems = [];
+        this.orderSummary.invoiceAreas[1].lineItems = [];
+        this.model.jobBoards.forEach((jb) => {
+            if (jb.isSelected) {
+                if (jb.isPayPerClick) {
+                    this.addLineItem(0, jb);
+                }
+                else {
+                    this.addLineItem(1, jb);
+                }
+            }
+        });
+        const payPerClickAreaTotal = this.calculateInvoiceAreaTotal(0);
+        const jobBoardAreaTotal = this.calculateInvoiceAreaTotal(1);
+        this.calculateOrderTotal(payPerClickAreaTotal, jobBoardAreaTotal);
+        if (this.model.jobBoards.filter((jb) => jb.isSelected).length === 0) {
+            this.isJobBoardNextButtonDisabled = true;
+        }
+    }
 }
 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" }, ngImport: i0, template: "<symphony-two-column-modal-template>\n  <symphony-h4 sfx-modal-title>{{ model.title }}</symphony-h4>\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]=\"model.subtitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading\"\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)=\"keywordSearch($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]=\"model.fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"filteredPostingBoardList\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-d-none\">\n      <symphony-advertise-order-review\n      ></symphony-advertise-order-review>\n    </div>\n\n    <symphony-placeholder\n      sfx-right-column\n      [label]=\"'sfx-right-column'\"\n      [height]=\"'400px'\"\n    ></symphony-placeholder>\n  </symphony-two-column-body-template>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"model.secondaryButtonText\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    sfx-button-primary\n    [text]=\"model.primaryButtonText\"\n    [disabled]=\"model.disablePrimaryButton\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\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}\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" }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"] }, { type: AdvertiseOrderReviewComponent, selector: "symphony-advertise-order-review" }, { type: PlaceholderComponent, selector: "symphony-placeholder", inputs: ["type", "label", "tooltip", "tooltipPlacement", "height", "width"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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" }, ngImport: i0, template: "<symphony-two-column-modal-template>\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.showCancel\" sfx-modal-title\n    >Are you sure you want to abandon your order?</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\">\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  <!-- <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n  >\n    <symphony-p sfx-left-column\n      >SmashFlyX is submitting your order to your selected job boards. Some\n      orders happen immediately, while others take a little more time. Check\n      your order status if you don't recieve a confirmation in the next\n      24hours.</symphony-p\n    >\n    <div sfx-right-column class=\"posting-boards\">\n      <div class=\"stage\">\n        <div class=\"box bounce-7\">\n          <div class=\"complete-container\">\n            <div class=\"success-icon-spacing\">\n              <symphony-sfx-loader></symphony-sfx-loader>\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\n    *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    Cancel Page\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\n  <symphony-button\n    *ngIf=\"model.navigation.showCancel\"\n    sfx-button-secondary\n    [text]=\"'Abandon Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showCancel\"\n    sfx-button-primary\n    [text]=\"'Continue Order'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: AdvertiseOrderReviewComponent, selector: "symphony-advertise-order-review" }, { type: H2Component, selector: "symphony-h2", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], 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>\n  <symphony-h4 sfx-modal-title>{{ model.title }}</symphony-h4>\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]=\"model.subtitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading\"\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)=\"keywordSearch($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]=\"model.fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"filteredPostingBoardList\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-d-none\">\n      <symphony-advertise-order-review\n      ></symphony-advertise-order-review>\n    </div>\n\n    <symphony-placeholder\n      sfx-right-column\n      [label]=\"'sfx-right-column'\"\n      [height]=\"'400px'\"\n    ></symphony-placeholder>\n  </symphony-two-column-body-template>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"model.secondaryButtonText\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    sfx-button-primary\n    [text]=\"model.primaryButtonText\"\n    [disabled]=\"model.disablePrimaryButton\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\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}\n"] }]
+            args: [{ selector: 'symphony-advertise-modal', template: "<symphony-two-column-modal-template>\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.showCancel\" sfx-modal-title\n    >Are you sure you want to abandon your order?</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\">\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  <!-- <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n  >\n    <symphony-p sfx-left-column\n      >SmashFlyX is submitting your order to your selected job boards. Some\n      orders happen immediately, while others take a little more time. Check\n      your order status if you don't recieve a confirmation in the next\n      24hours.</symphony-p\n    >\n    <div sfx-right-column class=\"posting-boards\">\n      <div class=\"stage\">\n        <div class=\"box bounce-7\">\n          <div class=\"complete-container\">\n            <div class=\"success-icon-spacing\">\n              <symphony-sfx-loader></symphony-sfx-loader>\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\n    *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    Cancel Page\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\n  <symphony-button\n    *ngIf=\"model.navigation.showCancel\"\n    sfx-button-secondary\n    [text]=\"'Abandon Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showCancel\"\n    sfx-button-primary\n    [text]=\"'Continue Order'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\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: [{
@@ -3190,12 +3333,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class InvoiceAreaModule {
+}
+InvoiceAreaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+InvoiceAreaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceAreaModule, declarations: [InvoiceAreaComponent], imports: [CommonModule, InvoiceLineItemModule, H5Module], exports: [InvoiceAreaComponent] });
+InvoiceAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceAreaModule, imports: [[CommonModule, InvoiceLineItemModule, H5Module]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceAreaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [InvoiceAreaComponent],
+                    imports: [CommonModule, InvoiceLineItemModule, H5Module],
+                    exports: [InvoiceAreaComponent],
+                }]
+        }] });
+
+class OrderSummaryModule {
+}
+OrderSummaryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrderSummaryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+OrderSummaryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrderSummaryModule, declarations: [OrderSummaryComponent], imports: [CommonModule, InvoiceAreaModule, H4Module, InvoiceLineItemModule], exports: [OrderSummaryComponent] });
+OrderSummaryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrderSummaryModule, imports: [[CommonModule, InvoiceAreaModule, H4Module, InvoiceLineItemModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrderSummaryModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [OrderSummaryComponent],
+                    imports: [CommonModule, InvoiceAreaModule, H4Module, InvoiceLineItemModule],
+                    exports: [OrderSummaryComponent],
+                }]
+        }] });
+
 class ModalModule {
 }
 ModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ModalModule, declarations: [AdvertiseModalComponent], imports: [CommonModule,
         TwoColumnModalModule,
         TwoColumnBodyTemplateModule,
+        H2Module,
+        H3Module,
         H4Module,
         H5Module,
         ParagraphModule,
@@ -3206,11 +3379,14 @@ ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         H5WithIconModule,
         AdvertisePostingboardSelectionListModule,
         SfxLoaderModule,
-        AdvertiseOrderReviewModule], exports: [AdvertiseModalComponent] });
+        AdvertiseOrderReviewModule,
+        OrderSummaryModule], exports: [AdvertiseModalComponent] });
 ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ModalModule, imports: [[
             CommonModule,
             TwoColumnModalModule,
             TwoColumnBodyTemplateModule,
+            H2Module,
+            H3Module,
             H4Module,
             H5Module,
             ParagraphModule,
@@ -3221,7 +3397,8 @@ ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
             H5WithIconModule,
             AdvertisePostingboardSelectionListModule,
             SfxLoaderModule,
-            AdvertiseOrderReviewModule
+            AdvertiseOrderReviewModule,
+            OrderSummaryModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ModalModule, decorators: [{
             type: NgModule,
@@ -3231,6 +3408,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         CommonModule,
                         TwoColumnModalModule,
                         TwoColumnBodyTemplateModule,
+                        H2Module,
+                        H3Module,
                         H4Module,
                         H5Module,
                         ParagraphModule,
@@ -3241,7 +3420,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         H5WithIconModule,
                         AdvertisePostingboardSelectionListModule,
                         SfxLoaderModule,
-                        AdvertiseOrderReviewModule
+                        AdvertiseOrderReviewModule,
+                        OrderSummaryModule,
                     ],
                     exports: [AdvertiseModalComponent],
                 }]