@symphony-talent/component-library 3.14.0 → 3.15.0

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

@@ -1798,6 +1798,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class FileUploadStatusComponent {
+    constructor() {
+        this.closeUploadComplete = new EventEmitter();
+    }
+    oncloseUploadComplete() {
+        this.closeUploadComplete.emit();
+    }
+}
+FileUploadStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FileUploadStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FileUploadStatusComponent, selector: "symphony-file-upload-status", inputs: { fileUploadStatusModel: "fileUploadStatusModel", uploadStatus: "uploadStatus" }, outputs: { closeUploadComplete: "closeUploadComplete" }, ngImport: i0, template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-10\">\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: SfxProgressBarComponent, selector: "symphony-sfx-progress-bar", inputs: ["progress"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-file-upload-status', template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-10\">\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { fileUploadStatusModel: [{
+                type: Input
+            }], uploadStatus: [{
+                type: Input
+            }], closeUploadComplete: [{
+                type: Output
+            }] } });
+
+class FileUploadComponent {
+    constructor() {
+        this.closeUploadComplete = new EventEmitter();
+        this.getFileDetails = new EventEmitter();
+    }
+    ngOnInit() {
+        this.filetypeAccepted = this.fileUploadModel.fileFormatAccepted.join(', ');
+    }
+    oncloseUploadComplete() {
+        this.closeUploadComplete.emit();
+    }
+    onFileSelect(event) {
+        this.file = event.target.files[0];
+        this.getFileDetails.emit(this.file);
+    }
+}
+FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FileUploadComponent, selector: "symphony-file-upload", inputs: { fileUploadModel: "fileUploadModel" }, outputs: { closeUploadComplete: "closeUploadComplete", getFileDetails: "getFileDetails" }, ngImport: i0, template: "<div\n  *ngIf=\"fileUploadModel\"\n  class=\"sfx-v-h-center sfx-min-height sfx-bg-light-gray3 sfx-mb-20 sfx-ml-5 sfx-mr-5 sfx-mt-20\"\n>\n  <!-- File Upload -->\n  <label\n    *ngIf=\"fileUploadModel.navigation.showUploadFile\"\n    class=\"sfx-file-upload sfx-cursor-pointer text-center\"\n    for=\"Upload\"\n  >\n    <span class=\"symbol\">+</span>\n    <p>Please click here and select a file to upload</p>\n    <input type=\"file\" id=\"Upload\" name=\"Upload\" accept=\"{{filetypeAccepted}}\" (change)=\"onFileSelect($event)\" class=\"hide\" />\n  </label>\n  <!-- File Upload -->\n\n  <!-- File Upload In Progress -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadProgress\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload In Progress'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload In Progress -->\n  \n  <!-- File Upload Complete -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadComplete\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload Completed'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Complete -->\n\n  <!-- Selected File -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showSelectedFile\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Selected File'\"\n  ></symphony-file-upload-status>\n  <!-- Selected File  -->\n\n    <!-- File Upload Error -->\n    <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadError\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Max file size exceeded'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Error -->\n</div>\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}\n"], components: [{ type: FileUploadStatusComponent, selector: "symphony-file-upload-status", inputs: ["fileUploadStatusModel", "uploadStatus"], outputs: ["closeUploadComplete"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-file-upload', template: "<div\n  *ngIf=\"fileUploadModel\"\n  class=\"sfx-v-h-center sfx-min-height sfx-bg-light-gray3 sfx-mb-20 sfx-ml-5 sfx-mr-5 sfx-mt-20\"\n>\n  <!-- File Upload -->\n  <label\n    *ngIf=\"fileUploadModel.navigation.showUploadFile\"\n    class=\"sfx-file-upload sfx-cursor-pointer text-center\"\n    for=\"Upload\"\n  >\n    <span class=\"symbol\">+</span>\n    <p>Please click here and select a file to upload</p>\n    <input type=\"file\" id=\"Upload\" name=\"Upload\" accept=\"{{filetypeAccepted}}\" (change)=\"onFileSelect($event)\" class=\"hide\" />\n  </label>\n  <!-- File Upload -->\n\n  <!-- File Upload In Progress -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadProgress\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload In Progress'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload In Progress -->\n  \n  <!-- File Upload Complete -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadComplete\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload Completed'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Complete -->\n\n  <!-- Selected File -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showSelectedFile\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Selected File'\"\n  ></symphony-file-upload-status>\n  <!-- Selected File  -->\n\n    <!-- File Upload Error -->\n    <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadError\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Max file size exceeded'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Error -->\n</div>\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { fileUploadModel: [{
+                type: Input
+            }], closeUploadComplete: [{
+                type: Output
+            }], getFileDetails: [{
+                type: Output
+            }] } });
+
+class FileUploadStatusModule {
+}
+FileUploadStatusModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FileUploadStatusModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusModule, declarations: [FileUploadStatusComponent], imports: [CommonModule,
+        IconModule,
+        H3Module,
+        ParagraphModule,
+        SfxProgressBarModule], exports: [FileUploadStatusComponent] });
+FileUploadStatusModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusModule, imports: [[
+            CommonModule,
+            IconModule,
+            H3Module,
+            ParagraphModule,
+            SfxProgressBarModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FileUploadStatusComponent],
+                    imports: [
+                        CommonModule,
+                        IconModule,
+                        H3Module,
+                        ParagraphModule,
+                        SfxProgressBarModule,
+                    ],
+                    exports: [FileUploadStatusComponent],
+                }]
+        }] });
+
+class FileUploadModule {
+}
+FileUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FileUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadModule, declarations: [FileUploadComponent], imports: [CommonModule,
+        H3Module,
+        IconModule,
+        ParagraphModule,
+        FileUploadStatusModule], exports: [FileUploadComponent] });
+FileUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadModule, imports: [[
+            CommonModule,
+            H3Module,
+            IconModule,
+            ParagraphModule,
+            FileUploadStatusModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FileUploadComponent],
+                    imports: [
+                        CommonModule,
+                        H3Module,
+                        IconModule,
+                        ParagraphModule,
+                        FileUploadStatusModule,
+                    ],
+                    exports: [FileUploadComponent],
+                }]
+        }] });
+
 class MoleculesModule {
 }
 MoleculesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1810,6 +1920,8 @@ MoleculesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         BreadcrumbModule,
         H5WithIconModule,
         InvoiceLineItemModule,
+        FileUploadModule,
+        FileUploadStatusModule,
         FeedbackCardModule], exports: [PillsModule, BreadcrumbModule, FeedbackCardModule] });
 MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, imports: [[
             CommonModule,
@@ -1821,6 +1933,8 @@ MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             BreadcrumbModule,
             H5WithIconModule,
             InvoiceLineItemModule,
+            FileUploadModule,
+            FileUploadStatusModule,
             FeedbackCardModule
         ], PillsModule, BreadcrumbModule, FeedbackCardModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, decorators: [{
@@ -1837,6 +1951,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         BreadcrumbModule,
                         H5WithIconModule,
                         InvoiceLineItemModule,
+                        FileUploadModule,
+                        FileUploadStatusModule,
                         FeedbackCardModule
                     ],
                     exports: [PillsModule, BreadcrumbModule, FeedbackCardModule]
@@ -2836,6 +2952,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class UploadResumeModalComponent {
+    constructor() {
+        this.closeUploadComplete = new EventEmitter();
+        this.buttonClicked = new EventEmitter();
+        this.closeButtonClicked = new EventEmitter();
+        this.docTypeDropdowChange = new EventEmitter();
+        this.updateResumeChecked = new EventEmitter();
+        this.isResumeSelected = false;
+    }
+    ngOnInit() {
+        this.model = {
+            title: 'Upload File',
+            subTitle: 'Attach a .rtf, .docx, .txt or .pdf file upto 2MB',
+            btnPrimary: 'Save',
+            btnSecondary: 'Cancel',
+            documentTypeDropdown: {
+                selectedName: 'Cover letter',
+                dropdownList: [
+                    {
+                        id: 1,
+                        name: 'Cover letter',
+                        value: 'Cover letter',
+                    },
+                    {
+                        id: 2,
+                        name: 'Resume',
+                        value: 'Resume',
+                    },
+                    {
+                        id: 3,
+                        name: 'Other',
+                        value: 'Other',
+                    },
+                ],
+                componentHeading: 'Document Type',
+            },
+            fileUploadModel: this.uploadResumeModel,
+        };
+        this.uploadResumeModel.fileUploadModel.fileFormatAccepted = ['.rtf', '.docx', '.txt', '.pdf'];
+        if (this.uploadResumeModel?.isResume) {
+            this.model.documentTypeDropdown.selectedName = 'Resume';
+        }
+    }
+    onButtonClick(text) {
+        this.buttonClicked.emit(text);
+    }
+    onCloseButtonClick() {
+        this.closeButtonClicked.emit();
+    }
+    onDocTypeSelect(selectedModel) {
+        if (selectedModel.value == 'Resume') {
+            this.uploadResumeModel.isResume = true;
+        }
+        else {
+            this.uploadResumeModel.isResume = false;
+        }
+        this.docTypeDropdowChange.emit(selectedModel.value);
+    }
+    onResumeCheckSelect(updateResumeCheckEvent) {
+        this.updateResumeChecked.emit(updateResumeCheckEvent.label);
+    }
+}
+UploadResumeModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+UploadResumeModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: UploadResumeModalComponent, selector: "symphony-upload-resume-modal", inputs: { uploadResumeModel: "uploadResumeModel", isLoading: "isLoading" }, outputs: { closeUploadComplete: "closeUploadComplete", buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", docTypeDropdowChange: "docTypeDropdowChange", updateResumeChecked: "updateResumeChecked" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\" *ngIf=\"uploadResumeModel && model\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 [text]=\"model.title\"></symphony-h4>\n          <div class=\"sfx-mt-15\">\n            <symphony-paragraph [text]=\"model.subTitle\"></symphony-paragraph>\n          </div>\n        </div>\n        <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n          <symphony-icon\n            class=\"pull-right\"\n            [icon]=\"'si-close-modal'\"\n            (clicked)=\"onCloseButtonClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n        ></symphony-file-upload>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadComplete || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadComplete || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"uploadResumeModel.isLoading || uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>", styles: [".sfx-mt-33{margin-top:33px}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: FileUploadComponent, selector: "symphony-file-upload", inputs: ["fileUploadModel"], outputs: ["closeUploadComplete", "getFileDetails"] }, { 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: UploadResumeModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-upload-resume-modal', template: "<div class=\"sfx sfx-modal\" *ngIf=\"uploadResumeModel && model\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 [text]=\"model.title\"></symphony-h4>\n          <div class=\"sfx-mt-15\">\n            <symphony-paragraph [text]=\"model.subTitle\"></symphony-paragraph>\n          </div>\n        </div>\n        <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n          <symphony-icon\n            class=\"pull-right\"\n            [icon]=\"'si-close-modal'\"\n            (clicked)=\"onCloseButtonClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n        ></symphony-file-upload>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadComplete || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadComplete || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"uploadResumeModel.isLoading || uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>", styles: [".sfx-mt-33{margin-top:33px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { uploadResumeModel: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], closeUploadComplete: [{
+                type: Output
+            }], buttonClicked: [{
+                type: Output
+            }], closeButtonClicked: [{
+                type: Output
+            }], docTypeDropdowChange: [{
+                type: Output
+            }], updateResumeChecked: [{
+                type: Output
+            }] } });
+
+class UploadResumeModalModule {
+}
+UploadResumeModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UploadResumeModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, declarations: [UploadResumeModalComponent], imports: [CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule, InputDropdownModule, FileUploadModule, SfxLoaderModule, InputCheckboxModule], exports: [UploadResumeModalComponent] });
+UploadResumeModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, imports: [[CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule, InputDropdownModule, FileUploadModule, SfxLoaderModule, InputCheckboxModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [UploadResumeModalComponent],
+                    imports: [CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule, InputDropdownModule, FileUploadModule, SfxLoaderModule, InputCheckboxModule],
+                    exports: [UploadResumeModalComponent],
+                }]
+        }] });
+
 class FeedbackDetailHeaderComponent {
     constructor() {
         this.previewClicked = new EventEmitter();
@@ -2895,6 +3108,7 @@ OrganismsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         IconExplorerModule,
         CardListModule,
         CancelModalModule,
+        UploadResumeModalModule,
         FeedbackCardListModule,
         FeedbackDetailHeaderModule] });
 OrganismsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrganismsModule, imports: [[
@@ -2905,6 +3119,7 @@ OrganismsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             IconExplorerModule,
             CardListModule,
             CancelModalModule,
+            UploadResumeModalModule,
             FeedbackCardListModule,
             FeedbackDetailHeaderModule
         ]] });
@@ -2920,6 +3135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         IconExplorerModule,
                         CardListModule,
                         CancelModalModule,
+                        UploadResumeModalModule,
                         FeedbackCardListModule,
                         FeedbackDetailHeaderModule
                     ]
@@ -3371,9 +3587,12 @@ class AdvertiseModalComponent {
             title: 'Are you sure you want to abandon your order?',
             content: 'All selections will be deleted and you will have to start over.',
             btnPrimary: 'Continue Order',
-            btnSecondary: 'Abandon Order'
+            btnSecondary: 'Abandon Order',
         };
     }
+    ngOnChanges(changes) {
+        this.filteredPostingBoardList = this.model.jobBoards;
+    }
     initialiseDefaultValues() {
         this.filteredPostingBoardList = this.model.jobBoards;
         this.jobCount = this.model.jobsToAdvertise.length;
@@ -3483,7 +3702,7 @@ 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: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [noMargin]=\"true\"\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"filteredPostingBoardList\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n  >\n    <div sfx-left-column class=\"posting-boards\">\n      <symphony-advertise-order-review></symphony-advertise-order-review>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div sfx-right-column class=\"posting-boards\">\n      <div class=\"stage\">\n        <div class=\"box bounce-7\">\n          <div class=\"complete-container\">\n            <symphony-h2>Your order is complete</symphony-h2>\n            <div class=\"success-icon-spacing\">\n              <symphony-icon\n                [icon]=\"'si-confirmation'\"\n                [iconColor]=\"'#00D56B'\"\n                [size]=\"'50px'\"\n              ></symphony-icon>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-cancel-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-cancel-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: AdvertiseOrderReviewComponent, selector: "symphony-advertise-order-review" }, { type: H2Component, selector: "symphony-h2", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: CancelModalComponent, selector: "symphony-cancel-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked" }, usesOnChanges: true, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [noMargin]=\"true\"\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"filteredPostingBoardList\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n  >\n    <div sfx-left-column class=\"posting-boards\">\n      <symphony-advertise-order-review></symphony-advertise-order-review>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div sfx-right-column class=\"posting-boards\">\n      <div class=\"stage\">\n        <div class=\"box bounce-7\">\n          <div class=\"complete-container\">\n            <symphony-h2>Your order is complete</symphony-h2>\n            <div class=\"success-icon-spacing\">\n              <symphony-icon\n                [icon]=\"'si-confirmation'\"\n                [iconColor]=\"'#00D56B'\"\n                [size]=\"'50px'\"\n              ></symphony-icon>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-cancel-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-cancel-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: AdvertiseOrderReviewComponent, selector: "symphony-advertise-order-review" }, { type: H2Component, selector: "symphony-h2", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: CancelModalComponent, selector: "symphony-cancel-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-advertise-modal', template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [noMargin]=\"true\"\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"filteredPostingBoardList\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n  >\n    <div sfx-left-column class=\"posting-boards\">\n      <symphony-advertise-order-review></symphony-advertise-order-review>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div sfx-right-column class=\"posting-boards\">\n      <div class=\"stage\">\n        <div class=\"box bounce-7\">\n          <div class=\"complete-container\">\n            <symphony-h2>Your order is complete</symphony-h2>\n            <div class=\"success-icon-spacing\">\n              <symphony-icon\n                [icon]=\"'si-confirmation'\"\n                [iconColor]=\"'#00D56B'\"\n                [size]=\"'50px'\"\n              ></symphony-icon>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-cancel-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-cancel-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"] }]