@symphony-talent/component-library 3.40.0 → 3.43.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/molecules/phaser-card/phaser-card.component.mjs +24 -5
- package/esm2020/lib/organisms/invoice-area/invoice-area.component.mjs +7 -8
- package/esm2020/lib/organisms/invoice-area/invoice-area.model.mjs +1 -1
- package/esm2020/lib/organisms/order-summary/order-summary.component.mjs +4 -4
- package/esm2020/lib/organisms/upload-resume-modal/upload-resume-modal.component.mjs +2 -2
- package/esm2020/lib/pages/modals/advertise-modal/advertise-modal.component.mjs +50 -32
- package/esm2020/projects/component-library/lib/molecules/phaser-card/phaser-card.component.mjs +24 -5
- package/esm2020/projects/component-library/lib/organisms/invoice-area/invoice-area.component.mjs +7 -8
- package/esm2020/projects/component-library/lib/organisms/invoice-area/invoice-area.model.mjs +1 -1
- package/esm2020/projects/component-library/lib/organisms/order-summary/order-summary.component.mjs +4 -4
- package/esm2020/projects/component-library/lib/organisms/upload-resume-modal/upload-resume-modal.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/pages/modals/advertise-modal/advertise-modal.component.mjs +50 -32
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs +77 -40
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2015/symphony-talent-component-library.mjs +77 -40
- package/fesm2015/symphony-talent-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs +77 -40
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library.mjs +77 -40
- package/fesm2020/symphony-talent-component-library.mjs.map +1 -1
- package/lib/molecules/phaser-card/phaser-card.component.d.ts +9 -1
- package/lib/organisms/invoice-area/invoice-area.model.d.ts +2 -1
- package/lib/organisms/upload-resume-modal/upload-resume-modal.component.d.ts +1 -1
- package/package.json +1 -1
- package/projects/component-library/lib/molecules/phaser-card/phaser-card.component.d.ts +9 -1
- package/projects/component-library/lib/organisms/invoice-area/invoice-area.model.d.ts +2 -1
- package/projects/component-library/lib/organisms/upload-resume-modal/upload-resume-modal.component.d.ts +1 -1
|
@@ -2505,19 +2505,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2505
2505
|
}] });
|
|
2506
2506
|
|
|
2507
2507
|
class PhaserCardComponent {
|
|
2508
|
-
constructor() {
|
|
2508
|
+
constructor() {
|
|
2509
|
+
this.cardClicked = new EventEmitter();
|
|
2510
|
+
this.cardHover = new EventEmitter();
|
|
2511
|
+
}
|
|
2512
|
+
onCardClick() {
|
|
2513
|
+
this.cardClicked.emit(this.model);
|
|
2514
|
+
}
|
|
2515
|
+
onCardHover() {
|
|
2516
|
+
this.cardHover.emit('Card Hover');
|
|
2517
|
+
}
|
|
2509
2518
|
}
|
|
2510
2519
|
PhaserCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PhaserCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2511
|
-
PhaserCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: { model: "model", cardHeightPx: "cardHeightPx", cardWidthPx: "cardWidthPx" }, ngImport: i0, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"cardHeightPx\"\n [style.width.px]=\"cardWidthPx\"\n>\n <div class=\"card-item\">\n <div
|
|
2520
|
+
PhaserCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: { model: "model", cardHeightPx: "cardHeightPx", cardWidthPx: "cardWidthPx", hasAnimation: "hasAnimation", isClickable: "isClickable", hasHover: "hasHover" }, outputs: { cardClicked: "cardClicked", cardHover: "cardHover" }, ngImport: i0, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"cardHeightPx\"\n [style.width.px]=\"cardWidthPx\"\n [ngClass]=\"{ 'has-hover': isClickable }\"\n [ngClass]=\"{ 'has-hover': hasHover }\"\n (click)=\"isClickable && onCardClick()\"\n (mouseenter)=\"hasHover && onCardHover()\"\n>\n <div class=\"card-item\">\n <div\n class=\"card-phaser-wrapper \"\n [ngClass]=\"{ 'snap-in': hasAnimation }\"\n [class]=\"model.backgroundColor\"\n >\n <symphony-phaser\n [phaser]=\"model.phaserState\"\n [outlineColor]=\"model.phaserOutlineColor\"\n ></symphony-phaser>\n </div>\n\n <div\n class=\"card-content-wrapper\"\n [ngClass]=\"{ 'snap-in-content': hasAnimation }\"\n >\n <div class=\"card-title-wrap sfx-d-flex\">\n <div class=\"card-icon\">\n <symphony-icon [icon]=\"'si-info'\"></symphony-icon>\n </div>\n <div class=\"card-title\">\n <symphony-h5\n [text]=\"model.eyebrowText\"\n title=\"{{ model.eyebrowText }}\"\n class=\"sfx-ellipse\"\n ></symphony-h5>\n </div>\n </div>\n <div class=\"card-description\">\n <symphony-h3\n [text]=\"model.messageBody\"\n title=\"{{ model.messageBody }}\"\n ></symphony-h3>\n </div>\n </div>\n </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}.card-item-wrapper{position:relative;overflow:hidden;box-shadow:0 4px 4px #00000040;height:420px}.card-item-wrapper.has-hover{cursor:pointer}.card-item-wrapper .card-phaser-wrapper{height:200px;display:flex;justify-content:center;align-items:center}.card-item-wrapper .card-item{transition:.2s;transform-origin:bottom;animation-duration:2s;animation-iteration-count:1}.card-item-wrapper .card-item .card-content-wrapper{padding:30px;background-color:#fff}.card-item-wrapper .card-title-wrap{margin-bottom:11px}.card-item-wrapper .card-title-wrap h5{font-family:neuzeit_groteskregular,sans-serif;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.card-item-wrapper .card-description h3{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.card-item-wrapper .card-icon{padding-right:8px}.snap-in{animation:snap-in .75s ease-in-out 0s}@keyframes snap-in{0%{height:420px}25%{height:190px}50%{height:195px}to{height:200px}}.snap-in-content{animation:snap-in-content .75s ease-in-out 0s}@keyframes snap-in-content{0%{transform:translateY(200px);height:0;opacity:0}25%{opacity:1}50%{transform:translateY(-20px);opacity:1}to{transform:translateY(0);height:220px;opacity:1}}\n"], components: [{ type: PhaserComponent, selector: "symphony-phaser", inputs: ["phaser", "outlineColor"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2512
2521
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PhaserCardComponent, decorators: [{
|
|
2513
2522
|
type: Component,
|
|
2514
|
-
args: [{ selector: 'symphony-phaser-card', encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"cardHeightPx\"\n [style.width.px]=\"cardWidthPx\"\n>\n <div class=\"card-item\">\n <div
|
|
2523
|
+
args: [{ selector: 'symphony-phaser-card', encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"cardHeightPx\"\n [style.width.px]=\"cardWidthPx\"\n [ngClass]=\"{ 'has-hover': isClickable }\"\n [ngClass]=\"{ 'has-hover': hasHover }\"\n (click)=\"isClickable && onCardClick()\"\n (mouseenter)=\"hasHover && onCardHover()\"\n>\n <div class=\"card-item\">\n <div\n class=\"card-phaser-wrapper \"\n [ngClass]=\"{ 'snap-in': hasAnimation }\"\n [class]=\"model.backgroundColor\"\n >\n <symphony-phaser\n [phaser]=\"model.phaserState\"\n [outlineColor]=\"model.phaserOutlineColor\"\n ></symphony-phaser>\n </div>\n\n <div\n class=\"card-content-wrapper\"\n [ngClass]=\"{ 'snap-in-content': hasAnimation }\"\n >\n <div class=\"card-title-wrap sfx-d-flex\">\n <div class=\"card-icon\">\n <symphony-icon [icon]=\"'si-info'\"></symphony-icon>\n </div>\n <div class=\"card-title\">\n <symphony-h5\n [text]=\"model.eyebrowText\"\n title=\"{{ model.eyebrowText }}\"\n class=\"sfx-ellipse\"\n ></symphony-h5>\n </div>\n </div>\n <div class=\"card-description\">\n <symphony-h3\n [text]=\"model.messageBody\"\n title=\"{{ model.messageBody }}\"\n ></symphony-h3>\n </div>\n </div>\n </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}.card-item-wrapper{position:relative;overflow:hidden;box-shadow:0 4px 4px #00000040;height:420px}.card-item-wrapper.has-hover{cursor:pointer}.card-item-wrapper .card-phaser-wrapper{height:200px;display:flex;justify-content:center;align-items:center}.card-item-wrapper .card-item{transition:.2s;transform-origin:bottom;animation-duration:2s;animation-iteration-count:1}.card-item-wrapper .card-item .card-content-wrapper{padding:30px;background-color:#fff}.card-item-wrapper .card-title-wrap{margin-bottom:11px}.card-item-wrapper .card-title-wrap h5{font-family:neuzeit_groteskregular,sans-serif;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.card-item-wrapper .card-description h3{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.card-item-wrapper .card-icon{padding-right:8px}.snap-in{animation:snap-in .75s ease-in-out 0s}@keyframes snap-in{0%{height:420px}25%{height:190px}50%{height:195px}to{height:200px}}.snap-in-content{animation:snap-in-content .75s ease-in-out 0s}@keyframes snap-in-content{0%{transform:translateY(200px);height:0;opacity:0}25%{opacity:1}50%{transform:translateY(-20px);opacity:1}to{transform:translateY(0);height:220px;opacity:1}}\n"] }]
|
|
2515
2524
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
2516
2525
|
type: Input
|
|
2517
2526
|
}], cardHeightPx: [{
|
|
2518
2527
|
type: Input
|
|
2519
2528
|
}], cardWidthPx: [{
|
|
2520
2529
|
type: Input
|
|
2530
|
+
}], hasAnimation: [{
|
|
2531
|
+
type: Input
|
|
2532
|
+
}], isClickable: [{
|
|
2533
|
+
type: Input
|
|
2534
|
+
}], hasHover: [{
|
|
2535
|
+
type: Input
|
|
2536
|
+
}], cardClicked: [{
|
|
2537
|
+
type: Output
|
|
2538
|
+
}], cardHover: [{
|
|
2539
|
+
type: Output
|
|
2521
2540
|
}] } });
|
|
2522
2541
|
|
|
2523
2542
|
class PhaserCardModule {
|
|
@@ -3064,7 +3083,7 @@ class UploadResumeModalComponent {
|
|
|
3064
3083
|
this.docTypeDropdowChange.emit(selectedModel.value);
|
|
3065
3084
|
}
|
|
3066
3085
|
onResumeCheckSelect(updateResumeCheckEvent) {
|
|
3067
|
-
this.updateResumeChecked.emit(updateResumeCheckEvent
|
|
3086
|
+
this.updateResumeChecked.emit(updateResumeCheckEvent);
|
|
3068
3087
|
}
|
|
3069
3088
|
}
|
|
3070
3089
|
UploadResumeModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -5052,15 +5071,15 @@ class InvoiceAreaComponent {
|
|
|
5052
5071
|
constructor() {
|
|
5053
5072
|
this.model = {
|
|
5054
5073
|
lineItems: [],
|
|
5055
|
-
|
|
5074
|
+
jobsToAdvertise: '',
|
|
5056
5075
|
};
|
|
5057
5076
|
}
|
|
5058
5077
|
}
|
|
5059
5078
|
InvoiceAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5060
|
-
InvoiceAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InvoiceAreaComponent, selector: "symphony-invoice-area", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"job-type-summary sfx-px-20\">\n <
|
|
5079
|
+
InvoiceAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InvoiceAreaComponent, selector: "symphony-invoice-area", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"job-type-summary sfx-px-20\">\n <ul class=\"invoice-list list-unstyled sfx-mb-20\">\n <li class=\"invoice-line-item\" *ngFor=\"let lineItem of model.lineItems\">\n <symphony-invoice-line-item\n [model]=\"lineItem\"\n ></symphony-invoice-line-item>\n </li>\n </ul>\n <div class=\"sfx-mb-20\">\n <symphony-invoice-line-item\n [model]=\"model.total\"\n ></symphony-invoice-line-item>\n </div>\n <span>{{model.jobsToAdvertise}}</span>\n <div class=\"job-bold-txt\">\n <symphony-invoice-line-item\n [model]=\"model.subTotal\"\n ></symphony-invoice-line-item>\n </div>\n</div>", styles: [".job-type-summary{border-bottom:1px solid #d9d9d9;padding-bottom:.3rem}.job-bold-txt .body-copy-primary{font-family:neuzeit_groteskbold,sans-serif}\n"], components: [{ type: InvoiceLineItemComponent, selector: "symphony-invoice-line-item", inputs: ["model"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
5061
5080
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceAreaComponent, decorators: [{
|
|
5062
5081
|
type: Component,
|
|
5063
|
-
args: [{ selector: 'symphony-invoice-area', template: "<div class=\"job-type-summary sfx-px-20\">\n <
|
|
5082
|
+
args: [{ selector: 'symphony-invoice-area', encapsulation: ViewEncapsulation.None, template: "<div class=\"job-type-summary sfx-px-20\">\n <ul class=\"invoice-list list-unstyled sfx-mb-20\">\n <li class=\"invoice-line-item\" *ngFor=\"let lineItem of model.lineItems\">\n <symphony-invoice-line-item\n [model]=\"lineItem\"\n ></symphony-invoice-line-item>\n </li>\n </ul>\n <div class=\"sfx-mb-20\">\n <symphony-invoice-line-item\n [model]=\"model.total\"\n ></symphony-invoice-line-item>\n </div>\n <span>{{model.jobsToAdvertise}}</span>\n <div class=\"job-bold-txt\">\n <symphony-invoice-line-item\n [model]=\"model.subTotal\"\n ></symphony-invoice-line-item>\n </div>\n</div>", styles: [".job-type-summary{border-bottom:1px solid #d9d9d9;padding-bottom:.3rem}.job-bold-txt .body-copy-primary{font-family:neuzeit_groteskbold,sans-serif}\n"] }]
|
|
5064
5083
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
5065
5084
|
type: Input
|
|
5066
5085
|
}] } });
|
|
@@ -5074,10 +5093,10 @@ class OrderSummaryComponent {
|
|
|
5074
5093
|
}
|
|
5075
5094
|
}
|
|
5076
5095
|
OrderSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrderSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5077
|
-
OrderSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: { model: "model" }, ngImport: i0, template: "<section class=\"order-summary\">\n <symphony-h4>{{ model.title }}</symphony-h4>\n <ul class=\"invoice-area-list list-unstyled sfx-mb-20\">\n <li\n class=\"invoice-area-item\"\n *ngFor=\"let invoiceArea of model.invoiceAreas\"\n >\n <symphony-invoice-area [model]=\"invoiceArea\"></symphony-invoice-area>\n </li>\n </ul>\n <symphony-invoice-line-item\n [model]=\"model.total\"\n ></symphony-invoice-line-item>\n</section>\n", styles: [""], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: InvoiceAreaComponent, selector: "symphony-invoice-area", inputs: ["model"] }, { type: InvoiceLineItemComponent, selector: "symphony-invoice-line-item", inputs: ["model"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
5096
|
+
OrderSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: { model: "model" }, ngImport: i0, template: "<section class=\"order-summary\">\n <symphony-h4>{{ model.title }}</symphony-h4>\n <ul class=\"invoice-area-list list-unstyled sfx-mb-20\">\n <li\n class=\"invoice-area-item\"\n *ngFor=\"let invoiceArea of model.invoiceAreas\"\n >\n <symphony-invoice-area [model]=\"invoiceArea\"></symphony-invoice-area>\n </li>\n </ul>\n <div class=\"total-wrap sfx-pb-10\" *ngIf=\"model.invoiceAreas.length > 0\">\n <symphony-invoice-line-item\n [model]=\"model.total\"\n ></symphony-invoice-line-item>\n </div>\n</section>\n", styles: [".total-wrap{border-bottom:1px solid #000}.total-wrap .text-right p{font-family:neuzeit_groteskbold,sans-serif}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: InvoiceAreaComponent, selector: "symphony-invoice-area", inputs: ["model"] }, { type: InvoiceLineItemComponent, selector: "symphony-invoice-line-item", inputs: ["model"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
5078
5097
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrderSummaryComponent, decorators: [{
|
|
5079
5098
|
type: Component,
|
|
5080
|
-
args: [{ selector: 'symphony-order-summary', template: "<section class=\"order-summary\">\n <symphony-h4>{{ model.title }}</symphony-h4>\n <ul class=\"invoice-area-list list-unstyled sfx-mb-20\">\n <li\n class=\"invoice-area-item\"\n *ngFor=\"let invoiceArea of model.invoiceAreas\"\n >\n <symphony-invoice-area [model]=\"invoiceArea\"></symphony-invoice-area>\n </li>\n </ul>\n <symphony-invoice-line-item\n [model]=\"model.total\"\n ></symphony-invoice-line-item>\n</section>\n", styles: [""] }]
|
|
5099
|
+
args: [{ selector: 'symphony-order-summary', encapsulation: ViewEncapsulation.None, template: "<section class=\"order-summary\">\n <symphony-h4>{{ model.title }}</symphony-h4>\n <ul class=\"invoice-area-list list-unstyled sfx-mb-20\">\n <li\n class=\"invoice-area-item\"\n *ngFor=\"let invoiceArea of model.invoiceAreas\"\n >\n <symphony-invoice-area [model]=\"invoiceArea\"></symphony-invoice-area>\n </li>\n </ul>\n <div class=\"total-wrap sfx-pb-10\" *ngIf=\"model.invoiceAreas.length > 0\">\n <symphony-invoice-line-item\n [model]=\"model.total\"\n ></symphony-invoice-line-item>\n </div>\n</section>\n", styles: [".total-wrap{border-bottom:1px solid #000}.total-wrap .text-right p{font-family:neuzeit_groteskbold,sans-serif}\n"] }]
|
|
5081
5100
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
5082
5101
|
type: Input
|
|
5083
5102
|
}] } });
|
|
@@ -5112,12 +5131,15 @@ class AdvertiseModalComponent {
|
|
|
5112
5131
|
ngOnInit() {
|
|
5113
5132
|
this.initialiseDefaultValues();
|
|
5114
5133
|
this.updateModalHeader();
|
|
5115
|
-
this.
|
|
5134
|
+
const selectedJobBoards = this.model.jobBoards.filter((jb) => jb.isSelected).length;
|
|
5135
|
+
if (selectedJobBoards > 0) {
|
|
5136
|
+
this.updateOrderSummary();
|
|
5137
|
+
}
|
|
5116
5138
|
this.cancelContent = {
|
|
5117
5139
|
title: 'Are you sure you want to abandon your order?',
|
|
5118
5140
|
content: 'All selections will be deleted and you will have to start over.',
|
|
5119
5141
|
btnPrimary: 'Continue Order',
|
|
5120
|
-
btnSecondary: 'Abandon Order'
|
|
5142
|
+
btnSecondary: 'Abandon Order',
|
|
5121
5143
|
};
|
|
5122
5144
|
}
|
|
5123
5145
|
ngOnChanges(changes) {
|
|
@@ -5128,29 +5150,8 @@ class AdvertiseModalComponent {
|
|
|
5128
5150
|
this.jobCount = this.model.jobsToAdvertise.length;
|
|
5129
5151
|
this.orderSummary = {
|
|
5130
5152
|
title: 'Your Order',
|
|
5131
|
-
invoiceAreas: [
|
|
5132
|
-
|
|
5133
|
-
lineItems: [],
|
|
5134
|
-
title: 'Pay-Per-Click',
|
|
5135
|
-
total: {
|
|
5136
|
-
textLeft: 'Cost Programatic Boards',
|
|
5137
|
-
textRight: `x (${this.jobCount}) Jobs = $0`
|
|
5138
|
-
}
|
|
5139
|
-
},
|
|
5140
|
-
{
|
|
5141
|
-
lineItems: [],
|
|
5142
|
-
title: 'Job Boards',
|
|
5143
|
-
total: {
|
|
5144
|
-
textLeft: 'Cost Job Boards',
|
|
5145
|
-
textRight: `x (${this.jobCount}) Jobs = $0`
|
|
5146
|
-
}
|
|
5147
|
-
}
|
|
5148
|
-
],
|
|
5149
|
-
total: {
|
|
5150
|
-
textLeft: '',
|
|
5151
|
-
textRight: '$0',
|
|
5152
|
-
label: 'Total:'
|
|
5153
|
-
}
|
|
5153
|
+
invoiceAreas: [],
|
|
5154
|
+
total: {},
|
|
5154
5155
|
};
|
|
5155
5156
|
}
|
|
5156
5157
|
updateModalHeader() {
|
|
@@ -5181,7 +5182,10 @@ class AdvertiseModalComponent {
|
|
|
5181
5182
|
this.closeButtonClicked.emit();
|
|
5182
5183
|
}
|
|
5183
5184
|
onPostingBoardChange(selectedBoard) {
|
|
5184
|
-
this.
|
|
5185
|
+
const selectedJobBoards = this.model.jobBoards.filter((jb) => jb.isSelected).length;
|
|
5186
|
+
if (selectedJobBoards > 0) {
|
|
5187
|
+
this.updateOrderSummary();
|
|
5188
|
+
}
|
|
5185
5189
|
}
|
|
5186
5190
|
addLineItem(invoiceAreaIndex, selectedBoard) {
|
|
5187
5191
|
this.orderSummary.invoiceAreas[invoiceAreaIndex].lineItems.push({
|
|
@@ -5194,7 +5198,8 @@ class AdvertiseModalComponent {
|
|
|
5194
5198
|
this.orderSummary.invoiceAreas[invoiceAreaIndex].lineItems.forEach(li => {
|
|
5195
5199
|
invoiceAreaTotal = invoiceAreaTotal + +li.textRight.replace('$', '');
|
|
5196
5200
|
});
|
|
5197
|
-
this.orderSummary.invoiceAreas[invoiceAreaIndex].
|
|
5201
|
+
this.orderSummary.invoiceAreas[invoiceAreaIndex].subTotal.textRight = `$${invoiceAreaTotal * this.model.jobsToAdvertise.length}`;
|
|
5202
|
+
this.orderSummary.invoiceAreas[invoiceAreaIndex].total.textRight = `$${invoiceAreaTotal}`;
|
|
5198
5203
|
return invoiceAreaTotal * this.model.jobsToAdvertise.length;
|
|
5199
5204
|
}
|
|
5200
5205
|
calculateOrderTotal(payPerClickAreaTotal, jobBoardAreaTotal) {
|
|
@@ -5203,14 +5208,46 @@ class AdvertiseModalComponent {
|
|
|
5203
5208
|
const jobToAdvertiseCount = this.model.jobsToAdvertise.length;
|
|
5204
5209
|
const orderSummaryText = `(${selectedJobBoards}) Boards x ${this.model.jobsToAdvertise.length} Jobs = (${selectedJobBoards * jobToAdvertiseCount}) Ads`;
|
|
5205
5210
|
this.orderSummary.total = {
|
|
5206
|
-
label: 'Total
|
|
5207
|
-
textLeft:
|
|
5211
|
+
label: 'Current Total',
|
|
5212
|
+
textLeft: '',
|
|
5208
5213
|
textRight: `$${payPerClickAreaTotal + jobBoardAreaTotal}`
|
|
5209
5214
|
};
|
|
5210
5215
|
}
|
|
5211
5216
|
updateOrderSummary() {
|
|
5212
|
-
this.orderSummary
|
|
5213
|
-
|
|
5217
|
+
this.orderSummary = {
|
|
5218
|
+
title: 'Your Order',
|
|
5219
|
+
invoiceAreas: [
|
|
5220
|
+
{
|
|
5221
|
+
lineItems: [],
|
|
5222
|
+
total: {
|
|
5223
|
+
textLeft: 'Pay-Per-Click Sites, Subtotal Per Job:',
|
|
5224
|
+
textRight: ``
|
|
5225
|
+
},
|
|
5226
|
+
subTotal: {
|
|
5227
|
+
textLeft: 'Pay-Per-Click Sites Subtotal',
|
|
5228
|
+
textRight: `x (${this.jobCount}) Jobs = $0`
|
|
5229
|
+
},
|
|
5230
|
+
jobsToAdvertise: `x (${this.model.jobsToAdvertise.length}) Jobs Selected`
|
|
5231
|
+
},
|
|
5232
|
+
{
|
|
5233
|
+
lineItems: [],
|
|
5234
|
+
subTotal: {
|
|
5235
|
+
textLeft: 'Job Boards Subtotal',
|
|
5236
|
+
textRight: `x (${this.jobCount}) Jobs = $0`
|
|
5237
|
+
},
|
|
5238
|
+
total: {
|
|
5239
|
+
textLeft: 'Duration Job Boards, Subtotal Per Job:',
|
|
5240
|
+
textRight: ``
|
|
5241
|
+
},
|
|
5242
|
+
jobsToAdvertise: `x (${this.model.jobsToAdvertise.length}) Jobs Selected`
|
|
5243
|
+
}
|
|
5244
|
+
],
|
|
5245
|
+
total: {
|
|
5246
|
+
textLeft: '',
|
|
5247
|
+
textRight: '',
|
|
5248
|
+
label: 'Current Total'
|
|
5249
|
+
},
|
|
5250
|
+
};
|
|
5214
5251
|
this.model.jobBoards.forEach(jb => {
|
|
5215
5252
|
if (jb.isSelected) {
|
|
5216
5253
|
if (jb.isPayPerClick) {
|