@symphony-talent/component-library 3.8.0 → 3.10.0

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

@@ -730,25 +730,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
 var Icons;
 (function (Icons) {
     Icons["ACCESS"] = "si-access";
-    Icons["CHATBOT"] = "si-chatbot";
-    Icons["CODETAG"] = "si-codetag";
-    Icons["CONFIRMATION"] = "si-confirmation";
-    Icons["FIELD"] = "si-field";
-    Icons["FLOW"] = "si-flow";
-    Icons["FORM"] = "si-form";
-    Icons["HIERARCHY"] = "si-hierarchy";
-    Icons["LIST"] = "si-list";
-    Icons["PASSWORD"] = "si-password";
-    Icons["REFERRAL"] = "si-referral";
-    Icons["TAG"] = "si-tag";
-    Icons["TEAM"] = "si-team";
-    Icons["WORKFLOW"] = "si-workflow";
-    Icons["MOREOPTIONS"] = "si-more-options";
-    Icons["ADD"] = "si-add";
     Icons["ACTIVITY"] = "si-activity";
+    Icons["ADD"] = "si-add";
+    Icons["ADVERTISE"] = "si-advertise";
     Icons["ARROWHIDEREVEAL"] = "si-arrow-hide-reveal";
     Icons["ARROWNEXT"] = "si-arrow-next";
     Icons["ARROWPREV"] = "si-arrow-prev";
+    Icons["CHATBOT"] = "si-chatbot";
+    Icons["CODETAG"] = "si-codetag";
+    Icons["CONFIRMATION"] = "si-confirmation";
     Icons["CLOSEMODAL"] = "si-close-modal";
     Icons["COLLAPSE"] = "si-collapse";
     Icons["DAYMODE"] = "si-daymode";
@@ -759,16 +749,22 @@ var Icons;
     Icons["EMAILDRIP"] = "si-email-drip";
     Icons["EMAILOPEN"] = "si-email-open";
     Icons["EMAILSEND"] = "si-email-send";
+    Icons["EXCLUDE"] = "si-exclude";
     Icons["EXPAND"] = "si-expand";
     Icons["FAVORITE"] = "si-favorite";
     Icons["FEEDBACKMAYBE"] = "si-feedback-maybe";
     Icons["FEEDBACKNO"] = "si-feedback-no";
     Icons["FEEDBACKYES"] = "si-feedback-yes";
     Icons["FOLDERMULTIPLE"] = "si-folder-multiple";
+    Icons["FIELD"] = "si-field";
+    Icons["FLOW"] = "si-flow";
+    Icons["FORM"] = "si-form";
+    Icons["HIERARCHY"] = "si-hierarchy";
     Icons["INCLUDE"] = "si-include";
     Icons["INFO"] = "si-info";
     Icons["INTERVIEW"] = "si-interview";
     Icons["LINK"] = "si-link";
+    Icons["LIST"] = "si-list";
     Icons["LOCATION"] = "si-location";
     Icons["MENUALL"] = "si-menu-all";
     Icons["MENUANALYTICS"] = "si-menu-analytics";
@@ -783,18 +779,20 @@ var Icons;
     Icons["MENURETURN"] = "si-menu-return";
     Icons["MENUWORKFLOWS"] = "si-menu-workflows";
     Icons["MERGE"] = "si-merge";
+    Icons["MOREOPTIONS"] = "si-more-options";
     Icons["MOVE"] = "si-move";
     Icons["NIGHTMODE"] = "si-nightmode";
     Icons["NOTIFICATION"] = "si-notification";
     Icons["ORGANIZECOLUMNS"] = "si-organize-columns";
     Icons["ORGANIZECONTACTS"] = "si-organize-contacts";
+    Icons["PASSWORD"] = "si-password";
     Icons["PENDINGINCOMPLETE"] = "si-pending-incomplete";
     Icons["PHONENUMBER"] = "si-phone-number";
     Icons["PREVIEW"] = "si-preview";
     Icons["PROMOTE"] = "si-promote";
+    Icons["REFERRAL"] = "si-referral";
     Icons["REFRESH"] = "si-refresh";
     Icons["REMOVE"] = "si-remove";
-    Icons["EXCLUDE"] = "si-exclude";
     Icons["RESULTSFILTERS"] = "si-results-filters";
     Icons["REVIEW"] = "si-review";
     Icons["SALARY"] = "si-salary";
@@ -807,13 +805,16 @@ var Icons;
     Icons["SORTMINI"] = "si-sort-mini";
     Icons["STATUS"] = "si-status";
     Icons["SYSTEMACTION"] = "si-system-action";
+    Icons["TAG"] = "si-tag";
     Icons["TASKCOMPLETED"] = "si-task-completed";
     Icons["TASKOPEN"] = "si-task-open";
+    Icons["TEAM"] = "si-team";
     Icons["TIMEFRAME"] = "si-timeframe";
     Icons["TIMELINE"] = "si-timeline";
     Icons["UPLOAD"] = "si-upload";
     Icons["USERMULTIPLE"] = "si-user-multiple";
     Icons["USER"] = "si-user";
+    Icons["WORKFLOW"] = "si-workflow";
 })(Icons || (Icons = {}));
 
 class IconWrapperComponent {
@@ -2035,9 +2036,9 @@ class IconExplorerHelper {
                 hasBorder: false,
             },
             {
-                icon: Icons.MOREOPTIONS,
-                iconName: 'MOREOPTIONS',
-                iconClass: 'si-more-options',
+                icon: Icons.ACTIVITY,
+                iconName: 'ACTIVITY',
+                iconClass: 'si-activity',
                 hasBorder: false,
             },
             {
@@ -2047,9 +2048,9 @@ class IconExplorerHelper {
                 hasBorder: false,
             },
             {
-                icon: Icons.ACTIVITY,
-                iconName: 'ACTIVITY',
-                iconClass: 'si-activity',
+                icon: Icons.ADVERTISE,
+                iconName: 'ADVERTISE',
+                iconClass: 'si-advertise',
                 hasBorder: false,
             },
             {
@@ -2076,6 +2077,12 @@ class IconExplorerHelper {
                 iconClass: 'si-chatbot',
                 hasBorder: false,
             },
+            {
+                icon: Icons.CLOSEMODAL,
+                iconName: 'CLOSEMODAL',
+                iconClass: 'si-close-modal',
+                hasBorder: false,
+            },
             {
                 icon: Icons.CODETAG,
                 iconName: 'CODETAG',
@@ -2088,12 +2095,6 @@ class IconExplorerHelper {
                 iconClass: 'si-confirmation',
                 hasBorder: false,
             },
-            {
-                icon: Icons.CLOSEMODAL,
-                iconName: 'CLOSEMODAL',
-                iconClass: 'si-close-modal',
-                hasBorder: false,
-            },
             {
                 icon: Icons.COLLAPSE,
                 iconName: 'COLLAPSE',
@@ -2148,12 +2149,24 @@ class IconExplorerHelper {
                 iconClass: 'si-email-send',
                 hasBorder: false,
             },
+            {
+                icon: Icons.EXCLUDE,
+                iconName: 'EXCLUDE',
+                iconClass: 'si-exclude',
+                hasBorder: false,
+            },
             {
                 icon: Icons.EXPAND,
                 iconName: 'EXPAND',
                 iconClass: 'si-expand',
                 hasBorder: false,
             },
+            {
+                icon: Icons.FAVORITE,
+                iconName: 'FAVORITE',
+                iconClass: 'si-favorite',
+                hasBorder: false,
+            },
             {
                 icon: Icons.FIELD,
                 iconName: 'FIELD',
@@ -2172,12 +2185,6 @@ class IconExplorerHelper {
                 iconClass: 'si-form',
                 hasBorder: false,
             },
-            {
-                icon: Icons.FAVORITE,
-                iconName: 'FAVORITE',
-                iconClass: 'si-favorite',
-                hasBorder: false,
-            },
             {
                 icon: Icons.FEEDBACKMAYBE,
                 iconName: 'FEEDBACKMAYBE',
@@ -2226,18 +2233,18 @@ class IconExplorerHelper {
                 iconClass: 'si-interview',
                 hasBorder: false,
             },
-            {
-                icon: Icons.LIST,
-                iconName: 'LIST',
-                iconClass: 'si-list',
-                hasBorder: false,
-            },
             {
                 icon: Icons.LINK,
                 iconName: 'LINK',
                 iconClass: 'si-link',
                 hasBorder: false,
             },
+            {
+                icon: Icons.LIST,
+                iconName: 'LIST',
+                iconClass: 'si-list',
+                hasBorder: false,
+            },
             {
                 icon: Icons.LOCATION,
                 iconName: 'LOCATION',
@@ -2322,6 +2329,12 @@ class IconExplorerHelper {
                 iconClass: 'si-merge',
                 hasBorder: false,
             },
+            {
+                icon: Icons.MOREOPTIONS,
+                iconName: 'MOREOPTIONS',
+                iconClass: 'si-more-options',
+                hasBorder: false,
+            },
             {
                 icon: Icons.MOVE,
                 iconName: 'MOVE',
@@ -2400,12 +2413,6 @@ class IconExplorerHelper {
                 iconClass: 'si-remove',
                 hasBorder: false,
             },
-            {
-                icon: Icons.EXCLUDE,
-                iconName: 'EXCLUDE',
-                iconClass: 'si-exclude',
-                hasBorder: false,
-            },
             {
                 icon: Icons.RESULTSFILTERS,
                 iconName: 'RESULTSFILTERS',
@@ -2520,18 +2527,18 @@ class IconExplorerHelper {
                 iconClass: 'si-upload',
                 hasBorder: false,
             },
-            {
-                icon: Icons.USERMULTIPLE,
-                iconName: 'USERMULTIPLE',
-                iconClass: 'si-user-multiple',
-                hasBorder: false,
-            },
             {
                 icon: Icons.USER,
                 iconName: 'USER',
                 iconClass: 'si-user',
                 hasBorder: false,
             },
+            {
+                icon: Icons.USERMULTIPLE,
+                iconName: 'USERMULTIPLE',
+                iconClass: 'si-user-multiple',
+                hasBorder: false,
+            },
             {
                 icon: Icons.WORKFLOW,
                 iconName: 'WORKFLOW',
@@ -2660,6 +2667,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class CancelModalComponent {
+    constructor() {
+        this.model = {};
+        this.buttonClicked = new EventEmitter();
+        this.closeButtonClicked = new EventEmitter();
+    }
+    onButtonClick(text) {
+        this.buttonClicked.emit(text);
+    }
+    onCloseButtonClick() {
+        this.closeButtonClicked.emit();
+    }
+}
+CancelModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CancelModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CancelModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CancelModalComponent, selector: "symphony-cancel-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\">\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\"\n                    ></symphony-h4\n                  >\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        <symphony-paragraph [text]=\"model.content\"></symphony-paragraph>\n    </section>\n    <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n        <symphony-button\n        [text]=\"model.btnSecondary\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onButtonClick($event)\"\n      ></symphony-button>\n      <symphony-button\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"false\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    </section>\n</div>", styles: [""], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CancelModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-cancel-modal', template: "<div class=\"sfx sfx-modal\">\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\"\n                    ></symphony-h4\n                  >\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        <symphony-paragraph [text]=\"model.content\"></symphony-paragraph>\n    </section>\n    <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n        <symphony-button\n        [text]=\"model.btnSecondary\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onButtonClick($event)\"\n      ></symphony-button>\n      <symphony-button\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"false\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    </section>\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], buttonClicked: [{
+                type: Output
+            }], closeButtonClicked: [{
+                type: Output
+            }] } });
+
+class CancelModalModule {
+}
+CancelModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CancelModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CancelModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CancelModalModule, declarations: [CancelModalComponent], imports: [CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule], exports: [CancelModalComponent] });
+CancelModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CancelModalModule, imports: [[CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CancelModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CancelModalComponent],
+                    imports: [CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule],
+                    exports: [CancelModalComponent],
+                }]
+        }] });
+
 class OrganismsModule {
 }
 OrganismsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrganismsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2668,7 +2715,8 @@ OrganismsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TaskListModule,
         TypographyModule,
         IconExplorerModule,
-        CardListModule] });
+        CardListModule,
+        CancelModalModule] });
 OrganismsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrganismsModule, imports: [[
             CommonModule,
             NoteListModule,
@@ -2676,6 +2724,7 @@ OrganismsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             TypographyModule,
             IconExplorerModule,
             CardListModule,
+            CancelModalModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrganismsModule, decorators: [{
             type: NgModule,
@@ -2688,6 +2737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         TypographyModule,
                         IconExplorerModule,
                         CardListModule,
+                        CancelModalModule
                     ],
                 }]
         }] });
@@ -3171,24 +3221,6 @@ class AdvertiseModalComponent {
             icon: Icons.INFO,
             placement: 'right',
         };
-        if (this.model.isLoading) {
-            this.modalTitle = 'Loading Job Boards...';
-        }
-        if (this.model.navigation.showJobBoardsSelection) {
-            this.modalTitle = 'Select Your Job Ad Buys';
-        }
-        if (this.model.navigation.showOrderReview) {
-            this.modalTitle = 'Review you Job Ad Buys';
-        }
-        if (this.model.navigation.showConfirmation) {
-            this.modalTitle = 'Confirmation of your Job Ad Buys';
-        }
-        if (this.model.navigation.showCancel) {
-            this.modalTitle = 'Are you sure you want to abandon your order?';
-        }
-        if (this.model.navigation.showProcessing) {
-            this.modalTitle = 'Processing Order...';
-        }
     }
     onKeywordSearch(keyword) {
         this.filteredPostingBoardList = this.model.jobBoards.filter((board) => board.boardName.toLowerCase().includes(keyword.toLowerCase()));
@@ -3208,10 +3240,6 @@ class AdvertiseModalComponent {
             textRight: `$${selectedBoard.boardPrice}`,
         });
     }
-    removeLineItem(invoiceAreaIndex, selectedBoard) {
-        this.orderSummary.invoiceAreas[invoiceAreaIndex].lineItems =
-            this.orderSummary.invoiceAreas[invoiceAreaIndex].lineItems.filter((li) => li.textLeft !== selectedBoard.boardName);
-    }
     calculateInvoiceAreaTotal(invoiceAreaIndex) {
         let invoiceAreaTotal = 0;
         this.orderSummary.invoiceAreas[invoiceAreaIndex].lineItems.forEach((li) => {
@@ -3252,10 +3280,10 @@ 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>\n  <symphony-h4 sfx-modal-title>{{ modalTitle }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [noMargin]=\"true\"\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"filteredPostingBoardList\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n  >\n    <div sfx-left-column class=\"posting-boards\">\n      <symphony-advertise-order-review></symphony-advertise-order-review>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div sfx-right-column class=\"posting-boards\">\n      <div class=\"stage\">\n        <div class=\"box bounce-7\">\n          <div class=\"complete-container\">\n            <symphony-h2>Your order is complete</symphony-h2>\n            <div class=\"success-icon-spacing\">\n              <symphony-icon\n                [icon]=\"'si-confirmation'\"\n                [iconColor]=\"'#00D56B'\"\n                [size]=\"'50px'\"\n              ></symphony-icon>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n\n  <!-- <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n  >\n    <symphony-p sfx-left-column\n      >SmashFlyX is submitting your order to your selected job boards. Some\n      orders happen immediately, while others take a little more time. Check\n      your order status if you don't recieve a confirmation in the next\n      24hours.</symphony-p\n    >\n    <div sfx-right-column class=\"posting-boards\">\n      <div class=\"stage\">\n        <div class=\"box bounce-7\">\n          <div class=\"complete-container\">\n            <div class=\"success-icon-spacing\">\n              <symphony-sfx-loader></symphony-sfx-loader>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </symphony-two-column-body-template> -->\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    Cancel Page\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showCancel\"\n    sfx-button-secondary\n    [text]=\"'Abandon Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showCancel\"\n    sfx-button-primary\n    [text]=\"'Continue Order'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: AdvertiseOrderReviewComponent, selector: "symphony-advertise-order-review" }, { type: H2Component, selector: "symphony-h2", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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\">\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]=\"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>\n  <symphony-h4 sfx-modal-title>{{ modalTitle }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [noMargin]=\"true\"\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"filteredPostingBoardList\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n  >\n    <div sfx-left-column class=\"posting-boards\">\n      <symphony-advertise-order-review></symphony-advertise-order-review>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div sfx-right-column class=\"posting-boards\">\n      <div class=\"stage\">\n        <div class=\"box bounce-7\">\n          <div class=\"complete-container\">\n            <symphony-h2>Your order is complete</symphony-h2>\n            <div class=\"success-icon-spacing\">\n              <symphony-icon\n                [icon]=\"'si-confirmation'\"\n                [iconColor]=\"'#00D56B'\"\n                [size]=\"'50px'\"\n              ></symphony-icon>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n\n  <!-- <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n  >\n    <symphony-p sfx-left-column\n      >SmashFlyX is submitting your order to your selected job boards. Some\n      orders happen immediately, while others take a little more time. Check\n      your order status if you don't recieve a confirmation in the next\n      24hours.</symphony-p\n    >\n    <div sfx-right-column class=\"posting-boards\">\n      <div class=\"stage\">\n        <div class=\"box bounce-7\">\n          <div class=\"complete-container\">\n            <div class=\"success-icon-spacing\">\n              <symphony-sfx-loader></symphony-sfx-loader>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </symphony-two-column-body-template> -->\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    Cancel Page\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showCancel\"\n    sfx-button-secondary\n    [text]=\"'Abandon Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showCancel\"\n    sfx-button-primary\n    [text]=\"'Continue Order'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"] }]
+            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\">\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]=\"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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], buttonClicked: [{
@@ -3395,7 +3423,8 @@ ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         AdvertisePostingboardSelectionListModule,
         SfxLoaderModule,
         AdvertiseOrderReviewModule,
-        OrderSummaryModule], exports: [AdvertiseModalComponent] });
+        OrderSummaryModule,
+        CancelModalModule], exports: [AdvertiseModalComponent] });
 ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ModalModule, imports: [[
             CommonModule,
             TwoColumnModalModule,
@@ -3414,6 +3443,7 @@ ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
             SfxLoaderModule,
             AdvertiseOrderReviewModule,
             OrderSummaryModule,
+            CancelModalModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ModalModule, decorators: [{
             type: NgModule,
@@ -3437,6 +3467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         SfxLoaderModule,
                         AdvertiseOrderReviewModule,
                         OrderSummaryModule,
+                        CancelModalModule
                     ],
                     exports: [AdvertiseModalComponent],
                 }]