@symphony-talent/component-library 3.37.0 → 3.38.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1248,10 +1248,10 @@ class ChipComponent {
1248
1248
  }
1249
1249
  }
1250
1250
  ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1251
- ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ChipComponent, selector: "symphony-chip", inputs: { chipLabel: "chipLabel", hasClose: "hasClose", hasError: "hasError" }, outputs: { removeChip: "removeChip" }, ngImport: i0, template: "<span\n class=\"sfx-d-inline-block sfx-chip-item\"\n [ngClass]=\"{ 'has-close': hasClose, 'has-error': hasError }\"\n>\n <i\n *ngIf=\"hasClose\"\n (click)=\"onRemoveClick()\"\n class=\"si-add sfx-cursor-pointer\"\n ></i>\n {{ chipLabel }}\n</span>\n", styles: [".sfx-chip-item{color:#000;padding:4px 15px;border-radius:25px;text-align:center;letter-spacing:-.4px;margin-right:5px;position:relative;border:1px solid #bababa}.sfx-chip-item:hover{background-color:#000;color:#fff}.sfx-chip-item.has-close{padding:4px 15px 4px 31px}.sfx-chip-item.has-error{border:1px solid #f0001e}.sfx-chip-item i{font-size:18px;position:absolute;left:10px;top:5px;transform:rotate(45deg)}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
1251
+ ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ChipComponent, selector: "symphony-chip", inputs: { chipLabel: "chipLabel", hasClose: "hasClose", hasError: "hasError" }, outputs: { removeChip: "removeChip" }, ngImport: i0, template: "<span\n class=\"sfx-d-inline-block sfx-chip-item\"\n [ngClass]=\"{ 'has-close': hasClose, 'has-error': hasError }\"\n>\n <i\n *ngIf=\"hasClose\"\n (click)=\"onRemoveClick()\"\n class=\"si-add sfx-cursor-pointer\"\n ></i>\n {{ chipLabel }}\n</span>\n", styles: [".sfx-chip-item{color:#000;padding:4px 15px;border-radius:25px;text-align:center;letter-spacing:-.4px;margin-right:5px;position:relative;border:1px solid #bababa}.sfx-chip-item:hover{background-color:#000;color:#fff}.sfx-chip-item.has-close{padding:4px 15px 4px 31px}.sfx-chip-item.has-error{border:1px solid #f0001e}.sfx-chip-item i{font-size:18px;position:absolute;left:10px;top:5px;transform:rotate(45deg);font-family:library-icons!important}.sfx-chip-item i:before{content:\"\\e927\"}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
1252
1252
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ChipComponent, decorators: [{
1253
1253
  type: Component,
1254
- args: [{ selector: 'symphony-chip', encapsulation: ViewEncapsulation.None, template: "<span\n class=\"sfx-d-inline-block sfx-chip-item\"\n [ngClass]=\"{ 'has-close': hasClose, 'has-error': hasError }\"\n>\n <i\n *ngIf=\"hasClose\"\n (click)=\"onRemoveClick()\"\n class=\"si-add sfx-cursor-pointer\"\n ></i>\n {{ chipLabel }}\n</span>\n", styles: [".sfx-chip-item{color:#000;padding:4px 15px;border-radius:25px;text-align:center;letter-spacing:-.4px;margin-right:5px;position:relative;border:1px solid #bababa}.sfx-chip-item:hover{background-color:#000;color:#fff}.sfx-chip-item.has-close{padding:4px 15px 4px 31px}.sfx-chip-item.has-error{border:1px solid #f0001e}.sfx-chip-item i{font-size:18px;position:absolute;left:10px;top:5px;transform:rotate(45deg)}\n"] }]
1254
+ args: [{ selector: 'symphony-chip', encapsulation: ViewEncapsulation.None, template: "<span\n class=\"sfx-d-inline-block sfx-chip-item\"\n [ngClass]=\"{ 'has-close': hasClose, 'has-error': hasError }\"\n>\n <i\n *ngIf=\"hasClose\"\n (click)=\"onRemoveClick()\"\n class=\"si-add sfx-cursor-pointer\"\n ></i>\n {{ chipLabel }}\n</span>\n", styles: [".sfx-chip-item{color:#000;padding:4px 15px;border-radius:25px;text-align:center;letter-spacing:-.4px;margin-right:5px;position:relative;border:1px solid #bababa}.sfx-chip-item:hover{background-color:#000;color:#fff}.sfx-chip-item.has-close{padding:4px 15px 4px 31px}.sfx-chip-item.has-error{border:1px solid #f0001e}.sfx-chip-item i{font-size:18px;position:absolute;left:10px;top:5px;transform:rotate(45deg);font-family:library-icons!important}.sfx-chip-item i:before{content:\"\\e927\"}\n"] }]
1255
1255
  }], ctorParameters: function () { return []; }, propDecorators: { chipLabel: [{
1256
1256
  type: Input
1257
1257
  }], hasClose: [{
@@ -5010,11 +5010,12 @@ class AdvertiseModalComponent {
5010
5010
  this.buttonClicked = new EventEmitter();
5011
5011
  this.closeButtonClicked = new EventEmitter();
5012
5012
  this.postingBoardChange = new EventEmitter();
5013
+ this.keywordSearchChange = new EventEmitter();
5013
5014
  this.fundsInfo = {
5014
5015
  icon: Icons.CONFIRMATION,
5015
5016
  iconFirst: true,
5016
5017
  text: 'Sufficient Funds',
5017
- iconColor: '#00D56B',
5018
+ iconColor: '#00D56B'
5018
5019
  };
5019
5020
  this.payPerClickBoards = [];
5020
5021
  this.jobBoards = [];
@@ -5029,7 +5030,7 @@ class AdvertiseModalComponent {
5029
5030
  title: 'Are you sure you want to abandon your order?',
5030
5031
  content: 'All selections will be deleted and you will have to start over.',
5031
5032
  btnPrimary: 'Continue Order',
5032
- btnSecondary: 'Abandon Order',
5033
+ btnSecondary: 'Abandon Order'
5033
5034
  };
5034
5035
  }
5035
5036
  ngOnChanges(changes) {
@@ -5046,29 +5047,29 @@ class AdvertiseModalComponent {
5046
5047
  title: 'Pay-Per-Click',
5047
5048
  total: {
5048
5049
  textLeft: 'Cost Programatic Boards',
5049
- textRight: `x (${this.jobCount}) Jobs = $0`,
5050
- },
5050
+ textRight: `x (${this.jobCount}) Jobs = $0`
5051
+ }
5051
5052
  },
5052
5053
  {
5053
5054
  lineItems: [],
5054
5055
  title: 'Job Boards',
5055
5056
  total: {
5056
5057
  textLeft: 'Cost Job Boards',
5057
- textRight: `x (${this.jobCount}) Jobs = $0`,
5058
- },
5059
- },
5058
+ textRight: `x (${this.jobCount}) Jobs = $0`
5059
+ }
5060
+ }
5060
5061
  ],
5061
5062
  total: {
5062
5063
  textLeft: '',
5063
5064
  textRight: '$0',
5064
- label: 'Total:',
5065
- },
5065
+ label: 'Total:'
5066
+ }
5066
5067
  };
5067
5068
  }
5068
5069
  updateModalHeader() {
5069
5070
  let subTitleTooltip = '';
5070
5071
  let jobNumber = 1;
5071
- this.model.jobsToAdvertise.forEach((job) => {
5072
+ this.model.jobsToAdvertise.forEach(job => {
5072
5073
  subTitleTooltip = subTitleTooltip + `${job.jobTitle} [${job.id}]`;
5073
5074
  if (jobNumber != this.model.jobsToAdvertise.length) {
5074
5075
  subTitleTooltip = subTitleTooltip + '</br>';
@@ -5080,11 +5081,12 @@ class AdvertiseModalComponent {
5080
5081
  text: `${this.model.jobsToAdvertise.length} Jobs`,
5081
5082
  iconFirst: false,
5082
5083
  icon: Icons.INFO,
5083
- placement: 'right',
5084
+ placement: 'right'
5084
5085
  };
5085
5086
  }
5086
5087
  onKeywordSearch(keyword) {
5087
- this.filteredPostingBoardList = this.model.jobBoards.filter((board) => board.boardName.toLowerCase().includes(keyword.toLowerCase()));
5088
+ this.filteredPostingBoardList = this.model.jobBoards.filter(board => board.boardName.toLowerCase().includes(keyword.toLowerCase()));
5089
+ this.keywordSearchChange.emit(keyword);
5088
5090
  }
5089
5091
  onButtonClick(text) {
5090
5092
  this.buttonClicked.emit(text);
@@ -5098,31 +5100,32 @@ class AdvertiseModalComponent {
5098
5100
  addLineItem(invoiceAreaIndex, selectedBoard) {
5099
5101
  this.orderSummary.invoiceAreas[invoiceAreaIndex].lineItems.push({
5100
5102
  textLeft: selectedBoard.boardName,
5101
- textRight: `$${selectedBoard.boardPrice}`,
5103
+ textRight: `$${selectedBoard.boardPrice}`
5102
5104
  });
5103
5105
  }
5104
5106
  calculateInvoiceAreaTotal(invoiceAreaIndex) {
5105
5107
  let invoiceAreaTotal = 0;
5106
- this.orderSummary.invoiceAreas[invoiceAreaIndex].lineItems.forEach((li) => {
5108
+ this.orderSummary.invoiceAreas[invoiceAreaIndex].lineItems.forEach(li => {
5107
5109
  invoiceAreaTotal = invoiceAreaTotal + +li.textRight.replace('$', '');
5108
5110
  });
5109
5111
  this.orderSummary.invoiceAreas[invoiceAreaIndex].total.textRight = `x (${this.model.jobsToAdvertise.length}) Jobs = $${invoiceAreaTotal * this.model.jobsToAdvertise.length}`;
5110
5112
  return invoiceAreaTotal * this.model.jobsToAdvertise.length;
5111
5113
  }
5112
5114
  calculateOrderTotal(payPerClickAreaTotal, jobBoardAreaTotal) {
5113
- const selectedJobBoards = this.model.jobBoards.filter((jb) => jb.isSelected).length;
5115
+ const selectedJobBoards = this.model.jobBoards.filter(jb => jb.isSelected)
5116
+ .length;
5114
5117
  const jobToAdvertiseCount = this.model.jobsToAdvertise.length;
5115
5118
  const orderSummaryText = `(${selectedJobBoards}) Boards x ${this.model.jobsToAdvertise.length} Jobs = (${selectedJobBoards * jobToAdvertiseCount}) Ads`;
5116
5119
  this.orderSummary.total = {
5117
5120
  label: 'Total:',
5118
5121
  textLeft: orderSummaryText,
5119
- textRight: `$${payPerClickAreaTotal + jobBoardAreaTotal}`,
5122
+ textRight: `$${payPerClickAreaTotal + jobBoardAreaTotal}`
5120
5123
  };
5121
5124
  }
5122
5125
  updateOrderSummary() {
5123
5126
  this.orderSummary.invoiceAreas[0].lineItems = [];
5124
5127
  this.orderSummary.invoiceAreas[1].lineItems = [];
5125
- this.model.jobBoards.forEach((jb) => {
5128
+ this.model.jobBoards.forEach(jb => {
5126
5129
  if (jb.isSelected) {
5127
5130
  if (jb.isPayPerClick) {
5128
5131
  this.addLineItem(0, jb);
@@ -5135,7 +5138,7 @@ class AdvertiseModalComponent {
5135
5138
  const payPerClickAreaTotal = this.calculateInvoiceAreaTotal(0);
5136
5139
  const jobBoardAreaTotal = this.calculateInvoiceAreaTotal(1);
5137
5140
  this.calculateOrderTotal(payPerClickAreaTotal, jobBoardAreaTotal);
5138
- if (this.model.jobBoards.filter((jb) => jb.isSelected).length === 0) {
5141
+ if (this.model.jobBoards.filter(jb => jb.isSelected).length === 0) {
5139
5142
  this.isJobBoardNextButtonDisabled = true;
5140
5143
  }
5141
5144
  else {
@@ -5145,7 +5148,7 @@ class AdvertiseModalComponent {
5145
5148
  }
5146
5149
  }
5147
5150
  AdvertiseModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5148
- AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", postingBoardChange: "postingBoardChange" }, 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-confirmation-modal\n *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n (buttonClicked)=\"onButtonClick($event)\"\n (closeButtonClicked)=\"onCloseButtonClick()\"\n [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-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", "message"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
5151
+ AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", postingBoardChange: "postingBoardChange", keywordSearchChange: "keywordSearchChange" }, usesOnChanges: true, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n <symphony-h4\n *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n sfx-modal-title\n >Select Your Job Ad Buys</symphony-h4\n >\n <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n >Review you Job Ad Buys</symphony-h4\n >\n <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n >Confirmation of your Job Ad Buys</symphony-h4\n >\n <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n >Processing Order...</symphony-h4\n >\n <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n >Loading Job Boards...</symphony-h4\n >\n <symphony-icon\n sfx-close-button\n [icon]=\"'si-close-modal'\"\n (clicked)=\"onCloseButtonClick()\"\n ></symphony-icon>\n <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n </symphony-h5-with-icon>\n\n <symphony-two-column-body-template\n *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n [showHeader]=\"true\"\n sfx-modal-body-area\n >\n <symphony-input-text\n sfx-left-col-header\n [noMargin]=\"true\"\n [placeholder]=\"'Search Ad Boards'\"\n [icon]=\"'si-search-new'\"\n (textChange)=\"onKeywordSearch($event)\"\n >\n </symphony-input-text>\n <div class=\"right-col-header-inner\" sfx-right-col-header>\n <symphony-h5-with-icon\n sfx-right-col-header\n *ngIf=\"model.showFunds\"\n class=\"pull-right\"\n [model]=\"fundsInfo\"\n ></symphony-h5-with-icon>\n </div>\n <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n <symphony-advertise-postingboard-selection-list\n [model]=\"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-confirmation-modal\n *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n (buttonClicked)=\"onButtonClick($event)\"\n (closeButtonClicked)=\"onCloseButtonClick()\"\n [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-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", "message"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
5149
5152
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, decorators: [{
5150
5153
  type: Component,
5151
5154
  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-confirmation-modal\n *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n (buttonClicked)=\"onButtonClick($event)\"\n (closeButtonClicked)=\"onCloseButtonClick()\"\n [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-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"] }]
@@ -5157,6 +5160,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
5157
5160
  type: Output
5158
5161
  }], postingBoardChange: [{
5159
5162
  type: Output
5163
+ }], keywordSearchChange: [{
5164
+ type: Output
5160
5165
  }] } });
5161
5166
 
5162
5167
  class TwoColumnModalModule {