@symphony-talent/component-library 3.6.0 → 3.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/esm2020/lib/molecules/h5-with-icon/h5-with-icon.component.mjs +3 -3
  2. package/esm2020/lib/pages/modals/advertise-modal/advertise-modal.component.mjs +31 -17
  3. package/esm2020/lib/pages/modals/advertise-modal/advertise-modal.model.mjs +1 -1
  4. package/esm2020/lib/templates/modal-templates/two-column-body-template/two-column-body-template.component.mjs +8 -5
  5. package/esm2020/lib/templates/modal-templates/two-column-modal-template/two-column-modal-template.component.mjs +3 -3
  6. package/esm2020/projects/component-library/lib/molecules/h5-with-icon/h5-with-icon.component.mjs +3 -3
  7. package/esm2020/projects/component-library/lib/pages/modals/advertise-modal/advertise-modal.component.mjs +31 -17
  8. package/esm2020/projects/component-library/lib/pages/modals/advertise-modal/advertise-modal.model.mjs +1 -1
  9. package/esm2020/projects/component-library/lib/templates/modal-templates/two-column-body-template/two-column-body-template.component.mjs +8 -5
  10. package/esm2020/projects/component-library/lib/templates/modal-templates/two-column-modal-template/two-column-modal-template.component.mjs +3 -3
  11. package/fesm2015/symphony-talent-component-library-projects-component-library.mjs +37 -21
  12. package/fesm2015/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
  13. package/fesm2015/symphony-talent-component-library.mjs +37 -21
  14. package/fesm2015/symphony-talent-component-library.mjs.map +1 -1
  15. package/fesm2020/symphony-talent-component-library-projects-component-library.mjs +37 -21
  16. package/fesm2020/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
  17. package/fesm2020/symphony-talent-component-library.mjs +37 -21
  18. package/fesm2020/symphony-talent-component-library.mjs.map +1 -1
  19. package/lib/pages/modals/advertise-modal/advertise-modal.component.d.ts +5 -1
  20. package/lib/pages/modals/advertise-modal/advertise-modal.model.d.ts +1 -4
  21. package/lib/templates/modal-templates/two-column-body-template/two-column-body-template.component.d.ts +2 -1
  22. package/lib/templates/modal-templates/two-column-modal-template/two-column-modal-template.component.d.ts +1 -1
  23. package/package.json +1 -1
  24. package/projects/component-library/lib/pages/modals/advertise-modal/advertise-modal.component.d.ts +5 -1
  25. package/projects/component-library/lib/pages/modals/advertise-modal/advertise-modal.model.d.ts +1 -4
  26. package/projects/component-library/lib/templates/modal-templates/two-column-body-template/two-column-body-template.component.d.ts +2 -1
  27. package/projects/component-library/lib/templates/modal-templates/two-column-modal-template/two-column-modal-template.component.d.ts +1 -1
@@ -1522,10 +1522,10 @@ class H5WithIconComponent {
1522
1522
  }
1523
1523
  }
1524
1524
  H5WithIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5WithIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1525
- 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"] }] });
1525
+ 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"] }] });
1526
1526
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5WithIconComponent, decorators: [{
1527
1527
  type: Component,
1528
- 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"] }]
1528
+ 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"] }]
1529
1529
  }], ctorParameters: function () { return []; }, propDecorators: { model: [{
1530
1530
  type: Input
1531
1531
  }] } });
@@ -2946,21 +2946,23 @@ class TwoColumnModalTemplateComponent {
2946
2946
  constructor() { }
2947
2947
  }
2948
2948
  TwoColumnModalTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnModalTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2949
- 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: [""] });
2949
+ 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"] });
2950
2950
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnModalTemplateComponent, decorators: [{
2951
2951
  type: Component,
2952
- 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: [""] }]
2952
+ 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"] }]
2953
2953
  }], ctorParameters: function () { return []; } });
2954
2954
 
2955
2955
  class TwoColumnBodyTemplateComponent {
2956
2956
  constructor() { }
2957
2957
  }
2958
2958
  TwoColumnBodyTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnBodyTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2959
- 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"] });
2959
+ 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"] }] });
2960
2960
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnBodyTemplateComponent, decorators: [{
2961
2961
  type: Component,
2962
- 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"] }]
2963
- }], ctorParameters: function () { return []; } });
2962
+ 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"] }]
2963
+ }], ctorParameters: function () { return []; }, propDecorators: { showHeader: [{
2964
+ type: Input
2965
+ }] } });
2964
2966
 
2965
2967
  class InputEditableTextComponent {
2966
2968
  constructor() {
@@ -3060,27 +3062,41 @@ class AdvertiseModalComponent {
3060
3062
  constructor() {
3061
3063
  this.model = {
3062
3064
  title: '',
3063
- subtitle: {
3064
- text: '',
3065
- icon: Icons.INFO,
3066
- iconFirst: true,
3067
- },
3068
- fundsInfo: {
3069
- text: '',
3070
- icon: Icons.INFO,
3071
- iconFirst: true,
3072
- iconColor: '',
3073
- },
3074
3065
  primaryButtonText: '',
3075
3066
  secondaryButtonText: '',
3076
3067
  };
3077
3068
  this.buttonClicked = new EventEmitter();
3078
3069
  this.closeButtonClicked = new EventEmitter();
3070
+ this.fundsInfo = {
3071
+ icon: Icons.CONFIRMATION,
3072
+ iconFirst: true,
3073
+ text: 'Sufficient Funds',
3074
+ iconColor: '#00D56B',
3075
+ };
3079
3076
  }
3080
3077
  ngOnInit() {
3081
3078
  this.filteredPostingBoardList = this.model.jobBoards;
3079
+ this.populateJobCountHeader();
3080
+ }
3081
+ populateJobCountHeader() {
3082
+ let subTitleTooltip = '';
3083
+ let jobCount = 1;
3084
+ this.model.jobsToAdvertise.forEach((job) => {
3085
+ subTitleTooltip = subTitleTooltip + `${job.jobTitle} [${job.id}]`;
3086
+ if (jobCount != this.model.jobsToAdvertise.length) {
3087
+ subTitleTooltip = subTitleTooltip + '</br>';
3088
+ }
3089
+ jobCount++;
3090
+ });
3091
+ this.subTitle = {
3092
+ tooltipHtml: subTitleTooltip,
3093
+ text: `${this.model.jobsToAdvertise.length} Jobs`,
3094
+ iconFirst: false,
3095
+ icon: Icons.INFO,
3096
+ placement: 'right',
3097
+ };
3082
3098
  }
3083
- keywordSearch(keyword) {
3099
+ onKeywordSearch(keyword) {
3084
3100
  this.filteredPostingBoardList = this.model.jobBoards.filter((board) => board.boardName.toLowerCase().includes(keyword));
3085
3101
  }
3086
3102
  onButtonClick(text) {
@@ -3091,10 +3107,10 @@ class AdvertiseModalComponent {
3091
3107
  }
3092
3108
  }
3093
3109
  AdvertiseModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3094
- 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"] }] });
3110
+ 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"] }] });
3095
3111
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, decorators: [{
3096
3112
  type: Component,
3097
- 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"] }]
3113
+ 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"] }]
3098
3114
  }], ctorParameters: function () { return []; }, propDecorators: { model: [{
3099
3115
  type: Input
3100
3116
  }], buttonClicked: [{