@symphony-talent/component-library 3.4.0 → 3.7.0

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

@@ -7,6 +7,7 @@ import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i1$2 from 'ag-grid-angular';
 import { AgGridModule } from 'ag-grid-angular';
+import * as i4 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Subject, timer } from 'rxjs';
 import { debounceTime, distinctUntilChanged, delay } from 'rxjs/operators';
@@ -1284,13 +1285,13 @@ class TooltipWrapperComponent {
     constructor() { }
 }
 TooltipWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TooltipWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TooltipWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: { placement: "placement", tooltipText: "tooltipText" }, ngImport: i0, template: "<span\n  class=\"sfx-d-inline-block\"\n  tooltip=\"{{ tooltipText }}\"\n  placement=\"{{ placement }}\"\n  containerClass=\"sfx-info-tooltip item-tooltip\"\n  [adaptivePosition]=\"false\"\n>\n  <ng-content></ng-content>\n</span>\n", styles: [".sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px #0003;font-weight:600}.sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip.item-tooltip.right{left:5px!important}.sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#fff}.sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#fff}.sfx-info-tooltip.item-tooltip.left{left:-5px!important}.sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:160px;font-size:13px;color:#000}\n"], directives: [{ type: i1$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], encapsulation: i0.ViewEncapsulation.None });
+TooltipWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: { placement: "placement", tooltipHtml: "tooltipHtml" }, ngImport: i0, template: "<ng-template #popTemplate\n  ><div style=\"text-align: left\" [innerHtml]=\"tooltipHtml\"></div\n></ng-template>\n<span\n  class=\"sfx-d-inline-block\"\n  [tooltip]=\"popTemplate\"\n  placement=\"{{ placement }}\"\n  containerClass=\"sfx-info-tooltip item-tooltip\"\n  [adaptivePosition]=\"false\"\n>\n  <ng-content></ng-content>\n</span>\n", styles: [".sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px #0003;font-weight:600}.sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip.item-tooltip.right{left:5px!important}.sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#fff}.sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#fff}.sfx-info-tooltip.item-tooltip.left{left:-5px!important}.sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:250px;font-size:13px;color:#000}\n"], directives: [{ type: i1$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TooltipWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-tooltip-wrapper', encapsulation: ViewEncapsulation.None, template: "<span\n  class=\"sfx-d-inline-block\"\n  tooltip=\"{{ tooltipText }}\"\n  placement=\"{{ placement }}\"\n  containerClass=\"sfx-info-tooltip item-tooltip\"\n  [adaptivePosition]=\"false\"\n>\n  <ng-content></ng-content>\n</span>\n", styles: [".sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px #0003;font-weight:600}.sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip.item-tooltip.right{left:5px!important}.sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#fff}.sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#fff}.sfx-info-tooltip.item-tooltip.left{left:-5px!important}.sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:160px;font-size:13px;color:#000}\n"] }]
+            args: [{ selector: 'symphony-tooltip-wrapper', encapsulation: ViewEncapsulation.None, template: "<ng-template #popTemplate\n  ><div style=\"text-align: left\" [innerHtml]=\"tooltipHtml\"></div\n></ng-template>\n<span\n  class=\"sfx-d-inline-block\"\n  [tooltip]=\"popTemplate\"\n  placement=\"{{ placement }}\"\n  containerClass=\"sfx-info-tooltip item-tooltip\"\n  [adaptivePosition]=\"false\"\n>\n  <ng-content></ng-content>\n</span>\n", styles: [".sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px #0003;font-weight:600}.sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip.item-tooltip.right{left:5px!important}.sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#fff}.sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#fff}.sfx-info-tooltip.item-tooltip.left{left:-5px!important}.sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:250px;font-size:13px;color:#000}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { placement: [{
                 type: Input
-            }], tooltipText: [{
+            }], tooltipHtml: [{
                 type: Input
             }] } });
 
@@ -1521,10 +1522,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.tooltipText\"\n    [tooltipText]=\"model.tooltipText\"\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.tooltipText\"\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  <symphony-tooltip-wrapper\n    *ngIf=\"model.tooltipText\"\n    [tooltipText]=\"model.tooltipText\"\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.tooltipText\"\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", "tooltipText"] }, { 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.tooltipText\"\n    [tooltipText]=\"model.tooltipText\"\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.tooltipText\"\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  <symphony-tooltip-wrapper\n    *ngIf=\"model.tooltipText\"\n    [tooltipText]=\"model.tooltipText\"\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.tooltipText\"\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
             }] } });
@@ -1532,27 +1533,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
 class H5WithIconModule {
 }
 H5WithIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5WithIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-H5WithIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5WithIconModule, declarations: [H5WithIconComponent], imports: [CommonModule,
-        H5Module,
-        IconModule, i1$3.TooltipModule, TooltipWrapperModule], exports: [H5WithIconComponent] });
-H5WithIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5WithIconModule, imports: [[
-            CommonModule,
-            H5Module,
-            IconModule,
-            TooltipModule.forRoot(),
-            TooltipWrapperModule,
-        ]] });
+H5WithIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5WithIconModule, declarations: [H5WithIconComponent], imports: [CommonModule, H5Module, IconModule, TooltipWrapperModule], exports: [H5WithIconComponent] });
+H5WithIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5WithIconModule, imports: [[CommonModule, H5Module, IconModule, TooltipWrapperModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5WithIconModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [H5WithIconComponent],
-                    imports: [
-                        CommonModule,
-                        H5Module,
-                        IconModule,
-                        TooltipModule.forRoot(),
-                        TooltipWrapperModule,
-                    ],
+                    imports: [CommonModule, H5Module, IconModule, TooltipWrapperModule],
                     exports: [H5WithIconComponent],
                 }]
         }] });
@@ -1686,6 +1673,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class InvoiceLineItemComponent {
+    constructor() {
+        this.model = {
+            textLeft: '',
+            textRight: '',
+        };
+    }
+}
+InvoiceLineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceLineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InvoiceLineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InvoiceLineItemComponent, selector: "symphony-invoice-line-item", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"row sfx-d-flex\">\n  <div class=\"text-left col-xs-12 col-sm-8 sfx-d-flex\">\n    <symphony-h5 *ngIf=\"model.label\">{{ model.label }}</symphony-h5>\n    <symphony-paragraph>{{ model.textLeft }}</symphony-paragraph>\n  </div>\n  <div class=\"text-right col-xs-12 col-sm-4 sfx-d-flex\">\n    <symphony-paragraph>{{ model.textRight }}</symphony-paragraph>\n  </div>\n</div>\n", styles: [".text-right{justify-content:end}\n"], components: [{ type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceLineItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-invoice-line-item', template: "<div class=\"row sfx-d-flex\">\n  <div class=\"text-left col-xs-12 col-sm-8 sfx-d-flex\">\n    <symphony-h5 *ngIf=\"model.label\">{{ model.label }}</symphony-h5>\n    <symphony-paragraph>{{ model.textLeft }}</symphony-paragraph>\n  </div>\n  <div class=\"text-right col-xs-12 col-sm-4 sfx-d-flex\">\n    <symphony-paragraph>{{ model.textRight }}</symphony-paragraph>\n  </div>\n</div>\n", styles: [".text-right{justify-content:end}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class InvoiceLineItemModule {
+}
+InvoiceLineItemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceLineItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+InvoiceLineItemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceLineItemModule, declarations: [InvoiceLineItemComponent], imports: [CommonModule, ParagraphModule, H5Module], exports: [InvoiceLineItemComponent] });
+InvoiceLineItemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceLineItemModule, imports: [[CommonModule, ParagraphModule, H5Module]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceLineItemModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [InvoiceLineItemComponent],
+                    imports: [CommonModule, ParagraphModule, H5Module],
+                    exports: [InvoiceLineItemComponent],
+                }]
+        }] });
+
 class MoleculesModule {
 }
 MoleculesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1696,7 +1714,8 @@ MoleculesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         ColorSwatchModule,
         IconSwatchModule,
         BreadcrumbModule,
-        H5WithIconModule], exports: [PillsModule, BreadcrumbModule] });
+        H5WithIconModule,
+        InvoiceLineItemModule], exports: [PillsModule, BreadcrumbModule] });
 MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, imports: [[
             CommonModule,
             AvatarModule,
@@ -1706,6 +1725,7 @@ MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             IconSwatchModule,
             BreadcrumbModule,
             H5WithIconModule,
+            InvoiceLineItemModule,
         ], PillsModule, BreadcrumbModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, decorators: [{
             type: NgModule,
@@ -1720,6 +1740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         IconSwatchModule,
                         BreadcrumbModule,
                         H5WithIconModule,
+                        InvoiceLineItemModule,
                     ],
                     exports: [PillsModule, BreadcrumbModule],
                 }]
@@ -2675,10 +2696,10 @@ class AdminListTemplateComponent {
     constructor() { }
 }
 AdminListTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdminListTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdminListTemplateComponent, selector: "symphony-admin-list-template", ngImport: i0, template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9 sfx-pl-0\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-create-new\">\n          <ng-content select=\"[sfx-page-action]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-filter-section\">\n      <div class=\"row\">\n        <ng-content select=\"[sfx-filter-area]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n      <div class=\"col-xs-12 col-sm-12 col-md-5 col-lg-5 sfx-pl-0 sfx-mt-10\">\n        <!-- <h4 class=\"margin-left-minus-15\">22 Event Venues</h4> -->\n        <ng-content select=\"[sfx-title]\"></ng-content>\n      </div>\n      <span class=\"pull-right sfx-create-new\">\n        <ng-content select=\"[sfx-grid-action]\"></ng-content>\n      </span>\n    </div>\n  </section>\n  <section class=\"sfx-grid-wrap\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.sfx-title-wrap{display:inline-block;width:100%;border-bottom:5px solid #000}\n"] });
+AdminListTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdminListTemplateComponent, selector: "symphony-admin-list-template", ngImport: i0, template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9 sfx-pl-0\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-create-new\">\n          <ng-content select=\"[sfx-page-action]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-filter-section\">\n      <div class=\"row\">\n        <ng-content select=\"[sfx-filter-area]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n      <div class=\"col-xs-12 col-sm-12 col-md-5 col-lg-5 sfx-pl-0 sfx-mt-10\">\n        <!-- <h4 class=\"margin-left-minus-15\">22 Event Venues</h4> -->\n        <ng-content select=\"[sfx-title]\"></ng-content>\n      </div>\n      <span class=\"pull-right sfx-create-new\">\n        <ng-content select=\"[sfx-grid-action]\"></ng-content>\n      </span>\n    </div>\n  </section>\n  <section class=\"sfx-grid-wrap grid-with-dropdown\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.sfx-title-wrap{display:inline-block;width:100%;border-bottom:5px solid #000}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-admin-list-template', template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9 sfx-pl-0\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-create-new\">\n          <ng-content select=\"[sfx-page-action]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-filter-section\">\n      <div class=\"row\">\n        <ng-content select=\"[sfx-filter-area]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n      <div class=\"col-xs-12 col-sm-12 col-md-5 col-lg-5 sfx-pl-0 sfx-mt-10\">\n        <!-- <h4 class=\"margin-left-minus-15\">22 Event Venues</h4> -->\n        <ng-content select=\"[sfx-title]\"></ng-content>\n      </div>\n      <span class=\"pull-right sfx-create-new\">\n        <ng-content select=\"[sfx-grid-action]\"></ng-content>\n      </span>\n    </div>\n  </section>\n  <section class=\"sfx-grid-wrap\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.sfx-title-wrap{display:inline-block;width:100%;border-bottom:5px solid #000}\n"] }]
+            args: [{ selector: 'symphony-admin-list-template', template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9 sfx-pl-0\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-create-new\">\n          <ng-content select=\"[sfx-page-action]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-filter-section\">\n      <div class=\"row\">\n        <ng-content select=\"[sfx-filter-area]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n      <div class=\"col-xs-12 col-sm-12 col-md-5 col-lg-5 sfx-pl-0 sfx-mt-10\">\n        <!-- <h4 class=\"margin-left-minus-15\">22 Event Venues</h4> -->\n        <ng-content select=\"[sfx-title]\"></ng-content>\n      </div>\n      <span class=\"pull-right sfx-create-new\">\n        <ng-content select=\"[sfx-grid-action]\"></ng-content>\n      </span>\n    </div>\n  </section>\n  <section class=\"sfx-grid-wrap grid-with-dropdown\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.sfx-title-wrap{display:inline-block;width:100%;border-bottom:5px solid #000}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class EventsSettingsPageComponent {
@@ -2925,47 +2946,158 @@ 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}\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}\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"] }]
+            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() {
+        this.type = 'number';
+        this.confirm = new EventEmitter();
+    }
+    onEditClick() {
+        this.model.isInEditMode = true;
+        this.previousValue = this.model.value;
+    }
+    onConfirmClick() {
+        this.model.isInEditMode = false;
+        this.confirm.emit(this.model);
+    }
+    onCloseClick() {
+        this.model.value = this.previousValue;
+        this.model.isInEditMode = false;
+    }
+}
+InputEditableTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputEditableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputEditableTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputEditableTextComponent, selector: "symphony-input-editable-text", inputs: { model: "model", type: "type" }, outputs: { confirm: "confirm" }, ngImport: i0, template: "<div *ngIf=\"model\">\n  <div *ngIf=\"!model.isInEditMode\">\n    <div class=\"flex\">\n      <div>\n        <symphony-paragraph\n          >{{ model.inputMask }}{{ model.value }}</symphony-paragraph\n        >\n      </div>\n      <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n        <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n      </div>\n      <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n    </div>\n  </div>\n  <div *ngIf=\"model.isInEditMode\">\n    <span class=\"sfx-pr-10\"\n      >{{ model.inputMask }}<input type=\"{{ type }}\" [(ngModel)]=\"model.value\"\n    /></span>\n    <span\n      ><symphony-icon\n        [icon]=\"'si-confirmation'\"\n        [size]=\"'14px'\"\n        (click)=\"onConfirmClick()\"\n      ></symphony-icon\n    ></span>\n    <span\n      ><symphony-icon\n        [icon]=\"'si-close-modal'\"\n        [size]=\"'14px'\"\n        (click)=\"onCloseClick()\"\n      ></symphony-icon\n    ></span>\n  </div>\n</div>\n", styles: ["input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;text-align:right;width:21px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputEditableTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-input-editable-text', template: "<div *ngIf=\"model\">\n  <div *ngIf=\"!model.isInEditMode\">\n    <div class=\"flex\">\n      <div>\n        <symphony-paragraph\n          >{{ model.inputMask }}{{ model.value }}</symphony-paragraph\n        >\n      </div>\n      <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n        <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n      </div>\n      <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n    </div>\n  </div>\n  <div *ngIf=\"model.isInEditMode\">\n    <span class=\"sfx-pr-10\"\n      >{{ model.inputMask }}<input type=\"{{ type }}\" [(ngModel)]=\"model.value\"\n    /></span>\n    <span\n      ><symphony-icon\n        [icon]=\"'si-confirmation'\"\n        [size]=\"'14px'\"\n        (click)=\"onConfirmClick()\"\n      ></symphony-icon\n    ></span>\n    <span\n      ><symphony-icon\n        [icon]=\"'si-close-modal'\"\n        [size]=\"'14px'\"\n        (click)=\"onCloseClick()\"\n      ></symphony-icon\n    ></span>\n  </div>\n</div>\n", styles: ["input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;text-align:right;width:21px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], confirm: [{
+                type: Output
+            }] } });
+
+class AdvertisePostingboardSelectionItemComponent {
+    constructor() {
+        this.priceChange = new EventEmitter();
+        this.postingBoardSelect = new EventEmitter();
+    }
+    ngOnInit() {
+        this.mapModel();
+    }
+    onBoardPriceChange(priceChangeEvent) {
+        this.model.boardPrice = +priceChangeEvent.value;
+        this.priceChange.emit(this.model);
+    }
+    onPostingBoardSelect(postingBoardSelectEvent) {
+        this.model.isSelected = postingBoardSelectEvent.isActive;
+        this.postingBoardSelect.emit(this.model);
+    }
+    mapModel() {
+        if (this.model) {
+            this.editableTextModel = {
+                inputMask: '$',
+                value: this.model.boardPrice?.toString(),
+                isEditable: this.model.isEditable,
+                isInEditMode: this.model.isInEditMode,
+                id: this.model.id,
+            };
+        }
+    }
+}
+AdvertisePostingboardSelectionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisePostingboardSelectionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AdvertisePostingboardSelectionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisePostingboardSelectionItemComponent, selector: "symphony-advertise-postingboard-selection-item", inputs: { model: "model" }, outputs: { priceChange: "priceChange", postingBoardSelect: "postingBoardSelect" }, ngImport: i0, template: "<div *ngIf=\"model\" class=\"posting-board-selection-item\">\n  <div class=\"inline-block\">\n    <symphony-input-checkbox\n      [label]=\"model.boardName\"\n      [isActive]=\"model.isSelected\"\n      (clicked)=\"onPostingBoardSelect($event)\"\n    ></symphony-input-checkbox>\n  </div>\n  <div class=\"inline-block pull-right sfx-pt-10 sfx-pr-10\">\n    <symphony-input-editable-text\n      [model]=\"editableTextModel\"\n      (confirm)=\"onBoardPriceChange($event)\"\n    ></symphony-input-editable-text>\n  </div>\n</div>\n", styles: [".inline-block{display:inline-block}\n"], components: [{ type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: InputEditableTextComponent, selector: "symphony-input-editable-text", inputs: ["model", "type"], outputs: ["confirm"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisePostingboardSelectionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-advertise-postingboard-selection-item', template: "<div *ngIf=\"model\" class=\"posting-board-selection-item\">\n  <div class=\"inline-block\">\n    <symphony-input-checkbox\n      [label]=\"model.boardName\"\n      [isActive]=\"model.isSelected\"\n      (clicked)=\"onPostingBoardSelect($event)\"\n    ></symphony-input-checkbox>\n  </div>\n  <div class=\"inline-block pull-right sfx-pt-10 sfx-pr-10\">\n    <symphony-input-editable-text\n      [model]=\"editableTextModel\"\n      (confirm)=\"onBoardPriceChange($event)\"\n    ></symphony-input-editable-text>\n  </div>\n</div>\n", styles: [".inline-block{display:inline-block}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], priceChange: [{
+                type: Output
+            }], postingBoardSelect: [{
+                type: Output
+            }] } });
+
+class AdvertisePostingboardSelectionListComponent {
+    constructor() { }
+}
+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"] }] });
+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: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class AdvertiseOrderReviewComponent {
+    constructor() { }
+}
+AdvertiseOrderReviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseOrderReviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AdvertiseOrderReviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseOrderReviewComponent, selector: "symphony-advertise-order-review", ngImport: i0, template: "<section class=\"advertise-review-wrap\">\n  <div class=\"sfx-mb-20\">\n    <symphony-h4>Please review your order for accuracy</symphony-h4>\n  </div>\n  <symphony-paragraph>Once you click <span class=\"sfx-font-bold\">Buy</span>, SmashFlyX will process the postings to the selected boards.</symphony-paragraph>\n</section>\n", styles: [""], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseOrderReviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-advertise-order-review', template: "<section class=\"advertise-review-wrap\">\n  <div class=\"sfx-mb-20\">\n    <symphony-h4>Please review your order for accuracy</symphony-h4>\n  </div>\n  <symphony-paragraph>Once you click <span class=\"sfx-font-bold\">Buy</span>, SmashFlyX will process the postings to the selected boards.</symphony-paragraph>\n</section>\n", styles: [""] }]
         }], ctorParameters: function () { return []; } });
 
 class AdvertiseModalComponent {
     constructor() {
         this.model = {
             title: '',
-            subtitle: {
-                text: '',
-                icon: Icons.INFO,
-                iconFirst: true,
-            },
-            fundsInfo: {
-                text: '',
-                icon: Icons.INFO,
-                iconFirst: true,
-                iconColor: '',
-            },
             primaryButtonText: '',
             secondaryButtonText: '',
         };
-        this.keywordSearchChange = new EventEmitter();
         this.buttonClicked = new EventEmitter();
         this.closeButtonClicked = new EventEmitter();
+        this.fundsInfo = {
+            icon: Icons.CONFIRMATION,
+            iconFirst: true,
+            text: 'Sufficient Funds',
+            iconColor: '#00D56B',
+        };
     }
-    keywordSearch(keyword) {
-        this.keywordSearchChange.emit(keyword);
-        console.log(keyword);
+    ngOnInit() {
+        this.filteredPostingBoardList = this.model.jobBoards;
+        this.populateJobCountHeader();
+    }
+    populateJobCountHeader() {
+        let subTitleTooltip = '';
+        let jobCount = 1;
+        this.model.jobsToAdvertise.forEach((job) => {
+            subTitleTooltip = subTitleTooltip + `${job.jobTitle} [${job.id}]`;
+            if (jobCount != this.model.jobsToAdvertise.length) {
+                subTitleTooltip = subTitleTooltip + '</br>';
+            }
+            jobCount++;
+        });
+        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));
     }
     onButtonClick(text) {
         this.buttonClicked.emit(text);
@@ -2975,14 +3107,12 @@ class AdvertiseModalComponent {
     }
 }
 AdvertiseModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { keywordSearchChange: "keywordSearchChange", 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  <symphony-two-column-body-template sfx-modal-body-area>\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    <symphony-placeholder\n      sfx-left-column\n      [label]=\"'sfx-left-column'\"\n      [height]=\"'400px'\"\n    ></symphony-placeholder>\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  <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    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n", styles: [".right-col-header-inner{padding-top:10px}\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: PlaceholderComponent, selector: "symphony-placeholder", inputs: ["type", "label", "tooltip", "tooltipPlacement", "height", "width"] }, { 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 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]=\"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      ></symphony-advertise-postingboard-selection-list>\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  <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-placeholder\n      sfx-right-column\n      [label]=\"'sfx-right-column'\"\n      [height]=\"'400px'\"\n    ></symphony-placeholder>\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    <div sfx-left-column class=\"posting-boards\">Confirmation page</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\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.showBackButton\"\n    sfx-button-back\n    [text]=\"model.backButtonText\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\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", 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"] }, { type: PlaceholderComponent, selector: "symphony-placeholder", inputs: ["type", "label", "tooltip", "tooltipPlacement", "height", "width"] }, { type: AdvertiseOrderReviewComponent, selector: "symphony-advertise-order-review" }, { 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  <symphony-two-column-body-template sfx-modal-body-area>\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    <symphony-placeholder\n      sfx-left-column\n      [label]=\"'sfx-left-column'\"\n      [height]=\"'400px'\"\n    ></symphony-placeholder>\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  <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    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n", styles: [".right-col-header-inner{padding-top:10px}\n"] }]
+            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]=\"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      ></symphony-advertise-postingboard-selection-list>\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  <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-placeholder\n      sfx-right-column\n      [label]=\"'sfx-right-column'\"\n      [height]=\"'400px'\"\n    ></symphony-placeholder>\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    <div sfx-left-column class=\"posting-boards\">Confirmation page</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\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.showBackButton\"\n    sfx-button-back\n    [text]=\"model.backButtonText\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
-            }], keywordSearchChange: [{
-                type: Output
             }], buttonClicked: [{
                 type: Output
             }], closeButtonClicked: [{
@@ -3017,6 +3147,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class InputEditableTextModule {
+}
+InputEditableTextModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputEditableTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+InputEditableTextModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputEditableTextModule, declarations: [InputEditableTextComponent], imports: [CommonModule, IconModule, FormsModule, ParagraphModule], exports: [InputEditableTextComponent] });
+InputEditableTextModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputEditableTextModule, imports: [[CommonModule, IconModule, FormsModule, ParagraphModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputEditableTextModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [InputEditableTextComponent],
+                    imports: [CommonModule, IconModule, FormsModule, ParagraphModule],
+                    exports: [InputEditableTextComponent],
+                }]
+        }] });
+
+class AdvertisePostingboardSelectionItemModule {
+}
+AdvertisePostingboardSelectionItemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisePostingboardSelectionItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AdvertisePostingboardSelectionItemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisePostingboardSelectionItemModule, declarations: [AdvertisePostingboardSelectionItemComponent], imports: [CommonModule, InputEditableTextModule, InputCheckboxModule], exports: [AdvertisePostingboardSelectionItemComponent] });
+AdvertisePostingboardSelectionItemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisePostingboardSelectionItemModule, imports: [[CommonModule, InputEditableTextModule, InputCheckboxModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisePostingboardSelectionItemModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AdvertisePostingboardSelectionItemComponent],
+                    imports: [CommonModule, InputEditableTextModule, InputCheckboxModule],
+                    exports: [AdvertisePostingboardSelectionItemComponent],
+                }]
+        }] });
+
+class AdvertisePostingboardSelectionListModule {
+}
+AdvertisePostingboardSelectionListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisePostingboardSelectionListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AdvertisePostingboardSelectionListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisePostingboardSelectionListModule, declarations: [AdvertisePostingboardSelectionListComponent], imports: [CommonModule, AdvertisePostingboardSelectionItemModule], exports: [AdvertisePostingboardSelectionListComponent] });
+AdvertisePostingboardSelectionListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisePostingboardSelectionListModule, imports: [[CommonModule, AdvertisePostingboardSelectionItemModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisePostingboardSelectionListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AdvertisePostingboardSelectionListComponent],
+                    imports: [CommonModule, AdvertisePostingboardSelectionItemModule],
+                    exports: [AdvertisePostingboardSelectionListComponent],
+                }]
+        }] });
+
+class AdvertiseOrderReviewModule {
+}
+AdvertiseOrderReviewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseOrderReviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AdvertiseOrderReviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseOrderReviewModule, declarations: [AdvertiseOrderReviewComponent], imports: [CommonModule, H4Module, ParagraphModule], exports: [AdvertiseOrderReviewComponent] });
+AdvertiseOrderReviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseOrderReviewModule, imports: [[CommonModule, H4Module, ParagraphModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseOrderReviewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AdvertiseOrderReviewComponent],
+                    imports: [CommonModule, H4Module, ParagraphModule],
+                    exports: [AdvertiseOrderReviewComponent],
+                }]
+        }] });
+
 class ModalModule {
 }
 ModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3030,7 +3216,10 @@ ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         InputTextModule,
         ButtonModule,
         PlaceholderModule,
-        H5WithIconModule], exports: [AdvertiseModalComponent] });
+        H5WithIconModule,
+        AdvertisePostingboardSelectionListModule,
+        SfxLoaderModule,
+        AdvertiseOrderReviewModule], exports: [AdvertiseModalComponent] });
 ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ModalModule, imports: [[
             CommonModule,
             TwoColumnModalModule,
@@ -3043,6 +3232,9 @@ ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
             ButtonModule,
             PlaceholderModule,
             H5WithIconModule,
+            AdvertisePostingboardSelectionListModule,
+            SfxLoaderModule,
+            AdvertiseOrderReviewModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ModalModule, decorators: [{
             type: NgModule,
@@ -3060,6 +3252,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         ButtonModule,
                         PlaceholderModule,
                         H5WithIconModule,
+                        AdvertisePostingboardSelectionListModule,
+                        SfxLoaderModule,
+                        AdvertiseOrderReviewModule
                     ],
                     exports: [AdvertiseModalComponent],
                 }]