@symphony-talent/component-library 3.57.0 → 3.59.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 (17) hide show
  1. package/esm2020/lib/molecules/document-management-item/document-management-item.component.mjs +3 -3
  2. package/esm2020/lib/pages/modals/advertise-modal/advertise-modal.component.mjs +1 -1
  3. package/esm2020/lib/templates/modal-templates/two-column-modal-template/two-column-modal-template.component.mjs +10 -5
  4. package/esm2020/projects/component-library/lib/molecules/document-management-item/document-management-item.component.mjs +3 -3
  5. package/esm2020/projects/component-library/lib/pages/modals/advertise-modal/advertise-modal.component.mjs +1 -1
  6. package/esm2020/projects/component-library/lib/templates/modal-templates/two-column-modal-template/two-column-modal-template.component.mjs +10 -5
  7. package/fesm2015/symphony-talent-component-library-projects-component-library.mjs +10 -6
  8. package/fesm2015/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
  9. package/fesm2015/symphony-talent-component-library.mjs +10 -6
  10. package/fesm2015/symphony-talent-component-library.mjs.map +1 -1
  11. package/fesm2020/symphony-talent-component-library-projects-component-library.mjs +10 -6
  12. package/fesm2020/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
  13. package/fesm2020/symphony-talent-component-library.mjs +10 -6
  14. package/fesm2020/symphony-talent-component-library.mjs.map +1 -1
  15. package/lib/templates/modal-templates/two-column-modal-template/two-column-modal-template.component.d.ts +3 -1
  16. package/package.json +1 -1
  17. package/projects/component-library/lib/templates/modal-templates/two-column-modal-template/two-column-modal-template.component.d.ts +3 -1
@@ -2546,10 +2546,10 @@ class DocumentManagementItemComponent {
2546
2546
  }
2547
2547
  }
2548
2548
  DocumentManagementItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2549
- DocumentManagementItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DocumentManagementItemComponent, selector: "symphony-document-management-item", inputs: { documentManagementItemModel: "documentManagementItemModel" }, outputs: { previewClicked: "previewClicked", moreOptionClicked: "moreOptionClicked" }, ngImport: i0, template: "<div class=\"sfx-dm-item\">\n <div class=\"dm-icon-wrap\">\n <symphony-icon class=\"dm-icon\" [icon]=\"'si-document'\"></symphony-icon>\n </div>\n <div class=\"dm-content\">\n <symphony-h5\n title=\"{{ documentManagementItemModel.fileName }}\"\n ><span class=\"sfx-ellipse\">{{ documentManagementItemModel.fileName }}&nbsp;</span><span\n *ngIf=\"documentManagementItemModel.fileType\" class=\"sfx-white-space-nowrap\"\n >[{{ documentManagementItemModel.fileType }}]</span\n ></symphony-h5\n >\n <symphony-paragraph\n title=\"Added on {{ documentManagementItemModel.addedDate }} by {{\n documentManagementItemModel.uploadedBy\n }}\"\n *ngIf=\"documentManagementItemModel.addedDate\"\n ><span\n >Added on&nbsp;<span>{{\n documentManagementItemModel.addedDate\n }}</span></span\n >&nbsp;<span\n ><span\n *ngIf=\"documentManagementItemModel.uploadedBy\"\n >by&nbsp;</span\n >{{ documentManagementItemModel.uploadedBy }}</span\n >\n </symphony-paragraph>\n </div>\n <div class=\"dm-action\">\n <symphony-icon-wrapper\n (click)=\"onPreviewClicked()\"\n *ngIf=\"documentManagementItemModel.hasPreview\"\n class=\"sfx-d-inline-block pull-left\"\n [hasHoverWithoutBorder]=\"true\"\n >\n <symphony-icon [icon]=\"'si-preview'\"></symphony-icon>\n </symphony-icon-wrapper>\n <symphony-contextual-menu\n *ngIf=\"documentManagementItemModel.moreActions.items.length > 0\"\n class=\"dm-more-option sfx-d-inline-block pull-left sfx-ml-10\"\n [model]=\"documentManagementItemModel.moreActions\"\n (itemClick)=\"onMoreOptionClicked($event)\"\n >\n </symphony-contextual-menu>\n </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px}.sfx-dm-item .dm-icon-wrap{position:absolute;left:0;top:20px}.sfx-dm-item .dm-icon-wrap .dm-icon{display:block;width:40px;height:40px;background:#000;text-align:center;color:#fff;border-radius:50%;line-height:46px}.sfx-dm-item .dm-content{padding-left:60px;padding-right:100px}.sfx-dm-item .dm-content h5{display:flex}.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-content .sfx-white-space-nowrap{white-space:nowrap}.sfx-dm-item .dm-action{position:absolute;right:0;top:20px;display:none}.sfx-dm-item:hover .dm-action{display:block}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
2549
+ DocumentManagementItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DocumentManagementItemComponent, selector: "symphony-document-management-item", inputs: { documentManagementItemModel: "documentManagementItemModel" }, outputs: { previewClicked: "previewClicked", moreOptionClicked: "moreOptionClicked" }, ngImport: i0, template: "<div class=\"sfx-dm-item\">\n <div class=\"dm-icon-wrap\">\n <symphony-icon class=\"dm-icon\" [icon]=\"'si-document'\"></symphony-icon>\n </div>\n <div class=\"dm-content\">\n <symphony-h5\n title=\"{{ documentManagementItemModel.fileName }}\"\n ><span class=\"sfx-ellipse\">{{ documentManagementItemModel.fileName }}&nbsp;</span><span\n *ngIf=\"documentManagementItemModel.fileType\" class=\"sfx-white-space-nowrap\"\n >[{{ documentManagementItemModel.fileType }}]</span\n ></symphony-h5\n >\n <symphony-paragraph\n title=\"Added on {{ documentManagementItemModel.addedDate }} {{ documentManagementItemModel.uploadedBy ? 'by' : ''}} {{\n documentManagementItemModel.uploadedBy\n }}\"\n *ngIf=\"documentManagementItemModel.addedDate\"\n ><span\n >Added on&nbsp;<span>{{\n documentManagementItemModel.addedDate\n }}</span></span\n >&nbsp;<span\n ><span\n *ngIf=\"documentManagementItemModel.uploadedBy\"\n >by&nbsp;</span\n >{{ documentManagementItemModel.uploadedBy }}</span\n >\n </symphony-paragraph>\n </div>\n <div class=\"dm-action\">\n <symphony-icon-wrapper\n (click)=\"onPreviewClicked()\"\n *ngIf=\"documentManagementItemModel.hasPreview\"\n class=\"sfx-d-inline-block pull-left\"\n [hasHoverWithoutBorder]=\"true\"\n >\n <symphony-icon [icon]=\"'si-preview'\"></symphony-icon>\n </symphony-icon-wrapper>\n <symphony-contextual-menu\n *ngIf=\"documentManagementItemModel.moreActions.items.length > 0\"\n class=\"dm-more-option sfx-d-inline-block pull-left sfx-ml-10\"\n [model]=\"documentManagementItemModel.moreActions\"\n (itemClick)=\"onMoreOptionClicked($event)\"\n >\n </symphony-contextual-menu>\n </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px}.sfx-dm-item .dm-icon-wrap{position:absolute;left:0;top:20px}.sfx-dm-item .dm-icon-wrap .dm-icon{display:block;width:40px;height:40px;background:#000;text-align:center;color:#fff;border-radius:50%;line-height:46px}.sfx-dm-item .dm-content{padding-left:60px;padding-right:100px}.sfx-dm-item .dm-content h5{display:flex}.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-content .sfx-white-space-nowrap{white-space:nowrap}.sfx-dm-item .dm-action{position:absolute;right:0;top:20px;display:none}.sfx-dm-item:hover .dm-action{display:block}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
2550
2550
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementItemComponent, decorators: [{
2551
2551
  type: Component,
2552
- args: [{ selector: 'symphony-document-management-item', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-dm-item\">\n <div class=\"dm-icon-wrap\">\n <symphony-icon class=\"dm-icon\" [icon]=\"'si-document'\"></symphony-icon>\n </div>\n <div class=\"dm-content\">\n <symphony-h5\n title=\"{{ documentManagementItemModel.fileName }}\"\n ><span class=\"sfx-ellipse\">{{ documentManagementItemModel.fileName }}&nbsp;</span><span\n *ngIf=\"documentManagementItemModel.fileType\" class=\"sfx-white-space-nowrap\"\n >[{{ documentManagementItemModel.fileType }}]</span\n ></symphony-h5\n >\n <symphony-paragraph\n title=\"Added on {{ documentManagementItemModel.addedDate }} by {{\n documentManagementItemModel.uploadedBy\n }}\"\n *ngIf=\"documentManagementItemModel.addedDate\"\n ><span\n >Added on&nbsp;<span>{{\n documentManagementItemModel.addedDate\n }}</span></span\n >&nbsp;<span\n ><span\n *ngIf=\"documentManagementItemModel.uploadedBy\"\n >by&nbsp;</span\n >{{ documentManagementItemModel.uploadedBy }}</span\n >\n </symphony-paragraph>\n </div>\n <div class=\"dm-action\">\n <symphony-icon-wrapper\n (click)=\"onPreviewClicked()\"\n *ngIf=\"documentManagementItemModel.hasPreview\"\n class=\"sfx-d-inline-block pull-left\"\n [hasHoverWithoutBorder]=\"true\"\n >\n <symphony-icon [icon]=\"'si-preview'\"></symphony-icon>\n </symphony-icon-wrapper>\n <symphony-contextual-menu\n *ngIf=\"documentManagementItemModel.moreActions.items.length > 0\"\n class=\"dm-more-option sfx-d-inline-block pull-left sfx-ml-10\"\n [model]=\"documentManagementItemModel.moreActions\"\n (itemClick)=\"onMoreOptionClicked($event)\"\n >\n </symphony-contextual-menu>\n </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px}.sfx-dm-item .dm-icon-wrap{position:absolute;left:0;top:20px}.sfx-dm-item .dm-icon-wrap .dm-icon{display:block;width:40px;height:40px;background:#000;text-align:center;color:#fff;border-radius:50%;line-height:46px}.sfx-dm-item .dm-content{padding-left:60px;padding-right:100px}.sfx-dm-item .dm-content h5{display:flex}.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-content .sfx-white-space-nowrap{white-space:nowrap}.sfx-dm-item .dm-action{position:absolute;right:0;top:20px;display:none}.sfx-dm-item:hover .dm-action{display:block}\n"] }]
2552
+ args: [{ selector: 'symphony-document-management-item', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-dm-item\">\n <div class=\"dm-icon-wrap\">\n <symphony-icon class=\"dm-icon\" [icon]=\"'si-document'\"></symphony-icon>\n </div>\n <div class=\"dm-content\">\n <symphony-h5\n title=\"{{ documentManagementItemModel.fileName }}\"\n ><span class=\"sfx-ellipse\">{{ documentManagementItemModel.fileName }}&nbsp;</span><span\n *ngIf=\"documentManagementItemModel.fileType\" class=\"sfx-white-space-nowrap\"\n >[{{ documentManagementItemModel.fileType }}]</span\n ></symphony-h5\n >\n <symphony-paragraph\n title=\"Added on {{ documentManagementItemModel.addedDate }} {{ documentManagementItemModel.uploadedBy ? 'by' : ''}} {{\n documentManagementItemModel.uploadedBy\n }}\"\n *ngIf=\"documentManagementItemModel.addedDate\"\n ><span\n >Added on&nbsp;<span>{{\n documentManagementItemModel.addedDate\n }}</span></span\n >&nbsp;<span\n ><span\n *ngIf=\"documentManagementItemModel.uploadedBy\"\n >by&nbsp;</span\n >{{ documentManagementItemModel.uploadedBy }}</span\n >\n </symphony-paragraph>\n </div>\n <div class=\"dm-action\">\n <symphony-icon-wrapper\n (click)=\"onPreviewClicked()\"\n *ngIf=\"documentManagementItemModel.hasPreview\"\n class=\"sfx-d-inline-block pull-left\"\n [hasHoverWithoutBorder]=\"true\"\n >\n <symphony-icon [icon]=\"'si-preview'\"></symphony-icon>\n </symphony-icon-wrapper>\n <symphony-contextual-menu\n *ngIf=\"documentManagementItemModel.moreActions.items.length > 0\"\n class=\"dm-more-option sfx-d-inline-block pull-left sfx-ml-10\"\n [model]=\"documentManagementItemModel.moreActions\"\n (itemClick)=\"onMoreOptionClicked($event)\"\n >\n </symphony-contextual-menu>\n </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px}.sfx-dm-item .dm-icon-wrap{position:absolute;left:0;top:20px}.sfx-dm-item .dm-icon-wrap .dm-icon{display:block;width:40px;height:40px;background:#000;text-align:center;color:#fff;border-radius:50%;line-height:46px}.sfx-dm-item .dm-content{padding-left:60px;padding-right:100px}.sfx-dm-item .dm-content h5{display:flex}.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-content .sfx-white-space-nowrap{white-space:nowrap}.sfx-dm-item .dm-action{position:absolute;right:0;top:20px;display:none}.sfx-dm-item:hover .dm-action{display:block}\n"] }]
2553
2553
  }], ctorParameters: function () { return []; }, propDecorators: { documentManagementItemModel: [{
2554
2554
  type: Input
2555
2555
  }], previewClicked: [{
@@ -5082,11 +5082,15 @@ class TwoColumnModalTemplateComponent {
5082
5082
  constructor() { }
5083
5083
  }
5084
5084
  TwoColumnModalTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnModalTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5085
- TwoColumnModalTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", ngImport: i0, template: "<div class=\"sfx sfx-modal\">\n <!-- main title -->\n <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n <div class=\"modal-title sfx-pb-30\">\n <div class=\"row\">\n <div class=\"col-xs-12 col-sm-6 col-md-6 sfx-pr-30\">\n <ng-content select=\"[sfx-modal-title]\"></ng-content>\n </div>\n <span class=\"pull-right sfx-pr-15\" style=\"padding-top: 1px\">\n <ng-content select=\"[sfx-close-button]\"></ng-content>\n </span>\n </div>\n </div>\n <div class=\"modal-subtitle\">\n <div class=\"row\">\n <div class=\"col-xs-12 col-sm-6 col-md-6 sfx-pr-30\">\n <ng-content select=\"[sfx-modal-subtitle]\"></ng-content>\n </div>\n </div>\n </div>\n </section>\n <section class=\"modal-body-area sfx-pt-0\">\n <ng-content select=\"[sfx-modal-body-area]\"></ng-content>\n </section>\n <!-- footer -->\n <section class=\"modal-footer sfx-bg-black sfx-pt-30 sfx-pb-40\">\n <div class=\"col-xs-6\">\n <span class=\"sfx-pr-10 pull-left\">\n <ng-content select=\"[sfx-button-back]\"></ng-content>\n </span>\n </div>\n <div class=\"col-xs-6\">\n <div class=\"sfx-d-flex pull-right\">\n <span class=\"sfx-pr-10\">\n <ng-content select=\"[sfx-button-secondary]\"></ng-content>\n </span>\n <span class=\"sfx-pl-10\">\n <ng-content select=\"[sfx-button-primary]\"></ng-content>\n </span>\n </div>\n </div>\n </section>\n</div>\n", styles: [".pull-left{float:left}.modal-footer{min-height:130px}\n"] });
5085
+ TwoColumnModalTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: { hideFooter: "hideFooter", hideSubtitle: "hideSubtitle" }, 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 *ngIf=\"hideSubtitle\" 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\n *ngIf=\"hideFooter\"\n class=\"modal-footer sfx-bg-black sfx-pt-30 sfx-pb-40\"\n >\n <div class=\"col-xs-6\">\n <span class=\"sfx-pr-10 pull-left\">\n <ng-content select=\"[sfx-button-back]\"></ng-content>\n </span>\n </div>\n <div class=\"col-xs-6\">\n <div class=\"sfx-d-flex pull-right\">\n <span class=\"sfx-pr-10\">\n <ng-content select=\"[sfx-button-secondary]\"></ng-content>\n </span>\n <span class=\"sfx-pl-10\">\n <ng-content select=\"[sfx-button-primary]\"></ng-content>\n </span>\n </div>\n </div>\n </section>\n</div>\n", styles: [".pull-left{float:left}.modal-footer{min-height:130px}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
5086
5086
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnModalTemplateComponent, decorators: [{
5087
5087
  type: Component,
5088
- args: [{ selector: 'symphony-two-column-modal-template', template: "<div class=\"sfx sfx-modal\">\n <!-- main title -->\n <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n <div class=\"modal-title sfx-pb-30\">\n <div class=\"row\">\n <div class=\"col-xs-12 col-sm-6 col-md-6 sfx-pr-30\">\n <ng-content select=\"[sfx-modal-title]\"></ng-content>\n </div>\n <span class=\"pull-right sfx-pr-15\" style=\"padding-top: 1px\">\n <ng-content select=\"[sfx-close-button]\"></ng-content>\n </span>\n </div>\n </div>\n <div class=\"modal-subtitle\">\n <div class=\"row\">\n <div class=\"col-xs-12 col-sm-6 col-md-6 sfx-pr-30\">\n <ng-content select=\"[sfx-modal-subtitle]\"></ng-content>\n </div>\n </div>\n </div>\n </section>\n <section class=\"modal-body-area sfx-pt-0\">\n <ng-content select=\"[sfx-modal-body-area]\"></ng-content>\n </section>\n <!-- footer -->\n <section class=\"modal-footer sfx-bg-black sfx-pt-30 sfx-pb-40\">\n <div class=\"col-xs-6\">\n <span class=\"sfx-pr-10 pull-left\">\n <ng-content select=\"[sfx-button-back]\"></ng-content>\n </span>\n </div>\n <div class=\"col-xs-6\">\n <div class=\"sfx-d-flex pull-right\">\n <span class=\"sfx-pr-10\">\n <ng-content select=\"[sfx-button-secondary]\"></ng-content>\n </span>\n <span class=\"sfx-pl-10\">\n <ng-content select=\"[sfx-button-primary]\"></ng-content>\n </span>\n </div>\n </div>\n </section>\n</div>\n", styles: [".pull-left{float:left}.modal-footer{min-height:130px}\n"] }]
5089
- }], ctorParameters: function () { return []; } });
5088
+ 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 *ngIf=\"hideSubtitle\" 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\n *ngIf=\"hideFooter\"\n class=\"modal-footer sfx-bg-black sfx-pt-30 sfx-pb-40\"\n >\n <div class=\"col-xs-6\">\n <span class=\"sfx-pr-10 pull-left\">\n <ng-content select=\"[sfx-button-back]\"></ng-content>\n </span>\n </div>\n <div class=\"col-xs-6\">\n <div class=\"sfx-d-flex pull-right\">\n <span class=\"sfx-pr-10\">\n <ng-content select=\"[sfx-button-secondary]\"></ng-content>\n </span>\n <span class=\"sfx-pl-10\">\n <ng-content select=\"[sfx-button-primary]\"></ng-content>\n </span>\n </div>\n </div>\n </section>\n</div>\n", styles: [".pull-left{float:left}.modal-footer{min-height:130px}\n"] }]
5089
+ }], ctorParameters: function () { return []; }, propDecorators: { hideFooter: [{
5090
+ type: Input
5091
+ }], hideSubtitle: [{
5092
+ type: Input
5093
+ }] } });
5090
5094
 
5091
5095
  class TwoColumnBodyTemplateComponent {
5092
5096
  constructor() { }
@@ -5477,7 +5481,7 @@ class AdvertiseModalComponent {
5477
5481
  }
5478
5482
  }
5479
5483
  AdvertiseModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, deps: [{ token: i1.DecimalPipe }], target: i0.ɵɵFactoryTarget.Component });
5480
- AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", postingBoardChange: "postingBoardChange", keywordSearchChange: "keywordSearchChange" }, usesOnChanges: true, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n <symphony-h4\n *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n sfx-modal-title\n >Select Your Job Ad Buys</symphony-h4\n >\n <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n >Review you Job Ad Buys</symphony-h4\n >\n <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n >Confirmation of your Job Ad Buys</symphony-h4\n >\n <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n >Processing Order...</symphony-h4\n >\n <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n >Loading Job Boards...</symphony-h4\n >\n <symphony-icon\n sfx-close-button\n [icon]=\"'si-close-modal'\"\n (clicked)=\"onCloseButtonClick()\"\n ></symphony-icon>\n <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n </symphony-h5-with-icon>\n\n <symphony-two-column-body-template\n *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n [showHeader]=\"true\"\n sfx-modal-body-area\n >\n <symphony-input-text\n sfx-left-col-header\n [noMargin]=\"true\"\n [placeholder]=\"'Search Ad Boards'\"\n [icon]=\"'si-search-new'\"\n (textChange)=\"onKeywordSearch($event)\"\n >\n </symphony-input-text>\n <div class=\"right-col-header-inner\" sfx-right-col-header>\n <symphony-h5-with-icon\n sfx-right-col-header\n *ngIf=\"model.showFunds\"\n class=\"pull-right\"\n [model]=\"fundsInfo\"\n ></symphony-h5-with-icon>\n </div>\n <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n <symphony-advertise-postingboard-selection-list\n [model]=\"model.jobBoards\"\n (postingBoardChange)=\"onPostingBoardChange($event)\"\n ></symphony-advertise-postingboard-selection-list>\n </div>\n\n <symphony-order-summary\n sfx-right-column\n [model]=\"orderSummary\"\n ></symphony-order-summary>\n </symphony-two-column-body-template>\n\n <symphony-two-column-body-template\n *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n sfx-modal-body-area\n class=\"height-wrapper\"\n >\n <symphony-order-summary\n sfx-left-column\n [model]=\"orderSummary\"\n ></symphony-order-summary>\n\n <div\n sfx-right-column\n class=\"posting-boards phaser center-h-v light-grey-bg\"\n >\n <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n </div>\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 class=\"height-wrapper\"\n >\n <symphony-order-summary\n sfx-left-column\n [model]=\"orderSummary\"\n ></symphony-order-summary>\n <div\n sfx-right-column\n class=\"posting-boards phaser center-h-v light-grey-bg\"\n >\n <symphony-phaser-card\n [model]=\"phaserCardConfirmation\"\n ></symphony-phaser-card>\n </div>\n </symphony-two-column-body-template>\n\n <div\n *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n sfx-modal-body-area\n class=\"posting-boards sfx-p-30\"\n >\n <div class=\"processing-container\">\n <symphony-paragraph\n ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n Some orders happen immediately, while others take a little more time.\n Check your order status if you don't recieve a confirmation in the next\n 24hours.</symphony-paragraph\n >\n </div>\n <div class=\"sfx-mt-80\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </div>\n </div>\n\n <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n <symphony-sfx-loader></symphony-sfx-loader>\n </div>\n\n <symphony-button\n *ngIf=\"model.navigation.showJobBoardsSelection\"\n sfx-button-secondary\n [text]=\"'Cancel'\"\n [isSecondary]=\"true\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n <symphony-button\n *ngIf=\"model.navigation.showJobBoardsSelection\"\n sfx-button-primary\n [text]=\"'Review Order'\"\n [disabled]=\"isJobBoardNextButtonDisabled\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n\n <symphony-button\n *ngIf=\"model.navigation.showOrderReview\"\n sfx-button-back\n [text]=\"'Edit Order'\"\n [isSecondary]=\"true\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n <symphony-button\n *ngIf=\"model.navigation.showOrderReview\"\n sfx-button-secondary\n [text]=\"'Cancel'\"\n [isSecondary]=\"true\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n <symphony-button\n *ngIf=\"model.navigation.showOrderReview\"\n sfx-button-primary\n [text]=\"'Buy'\"\n [disabled]=\"false\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n\n <symphony-button\n *ngIf=\"model.navigation.showConfirmation\"\n sfx-button-primary\n [text]=\"'Finish & Close'\"\n [disabled]=\"false\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n (buttonClicked)=\"onButtonClick($event)\"\n (closeButtonClicked)=\"onCloseButtonClick()\"\n [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: ["model", "isClickable", "hasHover"], outputs: ["cardClicked", "cardHover"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
5484
+ AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", postingBoardChange: "postingBoardChange", keywordSearchChange: "keywordSearchChange" }, usesOnChanges: true, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n <symphony-h4\n *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n sfx-modal-title\n >Select Your Job Ad Buys</symphony-h4\n >\n <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n >Review you Job Ad Buys</symphony-h4\n >\n <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n >Confirmation of your Job Ad Buys</symphony-h4\n >\n <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n >Processing Order...</symphony-h4\n >\n <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n >Loading Job Boards...</symphony-h4\n >\n <symphony-icon\n sfx-close-button\n [icon]=\"'si-close-modal'\"\n (clicked)=\"onCloseButtonClick()\"\n ></symphony-icon>\n <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n </symphony-h5-with-icon>\n\n <symphony-two-column-body-template\n *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n [showHeader]=\"true\"\n sfx-modal-body-area\n >\n <symphony-input-text\n sfx-left-col-header\n [noMargin]=\"true\"\n [placeholder]=\"'Search Ad Boards'\"\n [icon]=\"'si-search-new'\"\n (textChange)=\"onKeywordSearch($event)\"\n >\n </symphony-input-text>\n <div class=\"right-col-header-inner\" sfx-right-col-header>\n <symphony-h5-with-icon\n sfx-right-col-header\n *ngIf=\"model.showFunds\"\n class=\"pull-right\"\n [model]=\"fundsInfo\"\n ></symphony-h5-with-icon>\n </div>\n <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n <symphony-advertise-postingboard-selection-list\n [model]=\"model.jobBoards\"\n (postingBoardChange)=\"onPostingBoardChange($event)\"\n ></symphony-advertise-postingboard-selection-list>\n </div>\n\n <symphony-order-summary\n sfx-right-column\n [model]=\"orderSummary\"\n ></symphony-order-summary>\n </symphony-two-column-body-template>\n\n <symphony-two-column-body-template\n *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n sfx-modal-body-area\n class=\"height-wrapper\"\n >\n <symphony-order-summary\n sfx-left-column\n [model]=\"orderSummary\"\n ></symphony-order-summary>\n\n <div\n sfx-right-column\n class=\"posting-boards phaser center-h-v light-grey-bg\"\n >\n <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n </div>\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 class=\"height-wrapper\"\n >\n <symphony-order-summary\n sfx-left-column\n [model]=\"orderSummary\"\n ></symphony-order-summary>\n <div\n sfx-right-column\n class=\"posting-boards phaser center-h-v light-grey-bg\"\n >\n <symphony-phaser-card\n [model]=\"phaserCardConfirmation\"\n ></symphony-phaser-card>\n </div>\n </symphony-two-column-body-template>\n\n <div\n *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n sfx-modal-body-area\n class=\"posting-boards sfx-p-30\"\n >\n <div class=\"processing-container\">\n <symphony-paragraph\n ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n Some orders happen immediately, while others take a little more time.\n Check your order status if you don't recieve a confirmation in the next\n 24hours.</symphony-paragraph\n >\n </div>\n <div class=\"sfx-mt-80\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </div>\n </div>\n\n <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n <symphony-sfx-loader></symphony-sfx-loader>\n </div>\n\n <symphony-button\n *ngIf=\"model.navigation.showJobBoardsSelection\"\n sfx-button-secondary\n [text]=\"'Cancel'\"\n [isSecondary]=\"true\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n <symphony-button\n *ngIf=\"model.navigation.showJobBoardsSelection\"\n sfx-button-primary\n [text]=\"'Review Order'\"\n [disabled]=\"isJobBoardNextButtonDisabled\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n\n <symphony-button\n *ngIf=\"model.navigation.showOrderReview\"\n sfx-button-back\n [text]=\"'Edit Order'\"\n [isSecondary]=\"true\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n <symphony-button\n *ngIf=\"model.navigation.showOrderReview\"\n sfx-button-secondary\n [text]=\"'Cancel'\"\n [isSecondary]=\"true\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n <symphony-button\n *ngIf=\"model.navigation.showOrderReview\"\n sfx-button-primary\n [text]=\"'Buy'\"\n [disabled]=\"false\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n\n <symphony-button\n *ngIf=\"model.navigation.showConfirmation\"\n sfx-button-primary\n [text]=\"'Finish & Close'\"\n [disabled]=\"false\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n (buttonClicked)=\"onButtonClick($event)\"\n (closeButtonClicked)=\"onCloseButtonClick()\"\n [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: ["model", "isClickable", "hasHover"], outputs: ["cardClicked", "cardHover"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
5481
5485
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, decorators: [{
5482
5486
  type: Component,
5483
5487
  args: [{ selector: 'symphony-advertise-modal', encapsulation: ViewEncapsulation.None, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n <symphony-h4\n *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n sfx-modal-title\n >Select Your Job Ad Buys</symphony-h4\n >\n <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n >Review you Job Ad Buys</symphony-h4\n >\n <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n >Confirmation of your Job Ad Buys</symphony-h4\n >\n <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n >Processing Order...</symphony-h4\n >\n <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n >Loading Job Boards...</symphony-h4\n >\n <symphony-icon\n sfx-close-button\n [icon]=\"'si-close-modal'\"\n (clicked)=\"onCloseButtonClick()\"\n ></symphony-icon>\n <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n </symphony-h5-with-icon>\n\n <symphony-two-column-body-template\n *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n [showHeader]=\"true\"\n sfx-modal-body-area\n >\n <symphony-input-text\n sfx-left-col-header\n [noMargin]=\"true\"\n [placeholder]=\"'Search Ad Boards'\"\n [icon]=\"'si-search-new'\"\n (textChange)=\"onKeywordSearch($event)\"\n >\n </symphony-input-text>\n <div class=\"right-col-header-inner\" sfx-right-col-header>\n <symphony-h5-with-icon\n sfx-right-col-header\n *ngIf=\"model.showFunds\"\n class=\"pull-right\"\n [model]=\"fundsInfo\"\n ></symphony-h5-with-icon>\n </div>\n <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n <symphony-advertise-postingboard-selection-list\n [model]=\"model.jobBoards\"\n (postingBoardChange)=\"onPostingBoardChange($event)\"\n ></symphony-advertise-postingboard-selection-list>\n </div>\n\n <symphony-order-summary\n sfx-right-column\n [model]=\"orderSummary\"\n ></symphony-order-summary>\n </symphony-two-column-body-template>\n\n <symphony-two-column-body-template\n *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n sfx-modal-body-area\n class=\"height-wrapper\"\n >\n <symphony-order-summary\n sfx-left-column\n [model]=\"orderSummary\"\n ></symphony-order-summary>\n\n <div\n sfx-right-column\n class=\"posting-boards phaser center-h-v light-grey-bg\"\n >\n <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n </div>\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 class=\"height-wrapper\"\n >\n <symphony-order-summary\n sfx-left-column\n [model]=\"orderSummary\"\n ></symphony-order-summary>\n <div\n sfx-right-column\n class=\"posting-boards phaser center-h-v light-grey-bg\"\n >\n <symphony-phaser-card\n [model]=\"phaserCardConfirmation\"\n ></symphony-phaser-card>\n </div>\n </symphony-two-column-body-template>\n\n <div\n *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n sfx-modal-body-area\n class=\"posting-boards sfx-p-30\"\n >\n <div class=\"processing-container\">\n <symphony-paragraph\n ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n Some orders happen immediately, while others take a little more time.\n Check your order status if you don't recieve a confirmation in the next\n 24hours.</symphony-paragraph\n >\n </div>\n <div class=\"sfx-mt-80\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </div>\n </div>\n\n <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n <symphony-sfx-loader></symphony-sfx-loader>\n </div>\n\n <symphony-button\n *ngIf=\"model.navigation.showJobBoardsSelection\"\n sfx-button-secondary\n [text]=\"'Cancel'\"\n [isSecondary]=\"true\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n <symphony-button\n *ngIf=\"model.navigation.showJobBoardsSelection\"\n sfx-button-primary\n [text]=\"'Review Order'\"\n [disabled]=\"isJobBoardNextButtonDisabled\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n\n <symphony-button\n *ngIf=\"model.navigation.showOrderReview\"\n sfx-button-back\n [text]=\"'Edit Order'\"\n [isSecondary]=\"true\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n <symphony-button\n *ngIf=\"model.navigation.showOrderReview\"\n sfx-button-secondary\n [text]=\"'Cancel'\"\n [isSecondary]=\"true\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n <symphony-button\n *ngIf=\"model.navigation.showOrderReview\"\n sfx-button-primary\n [text]=\"'Buy'\"\n [disabled]=\"false\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n\n <symphony-button\n *ngIf=\"model.navigation.showConfirmation\"\n sfx-button-primary\n [text]=\"'Finish & Close'\"\n [disabled]=\"false\"\n [isInverse]=\"true\"\n (clicked)=\"onButtonClick($event)\"\n ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n (buttonClicked)=\"onButtonClick($event)\"\n (closeButtonClicked)=\"onCloseButtonClick()\"\n [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"] }]