@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
|
@@ -2503,19 +2503,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2503
2503
|
}] });
|
|
2504
2504
|
|
|
2505
2505
|
class PhaserCardComponent {
|
|
2506
|
-
constructor() {
|
|
2506
|
+
constructor() {
|
|
2507
|
+
this.cardClicked = new EventEmitter();
|
|
2508
|
+
this.cardHover = new EventEmitter();
|
|
2509
|
+
}
|
|
2510
|
+
onCardClick() {
|
|
2511
|
+
this.cardClicked.emit(this.model);
|
|
2512
|
+
}
|
|
2513
|
+
onCardHover() {
|
|
2514
|
+
this.cardHover.emit('Card Hover');
|
|
2515
|
+
}
|
|
2507
2516
|
}
|
|
2508
2517
|
PhaserCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PhaserCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2509
|
-
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
|
|
2518
|
+
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 });
|
|
2510
2519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PhaserCardComponent, decorators: [{
|
|
2511
2520
|
type: Component,
|
|
2512
|
-
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
|
|
2521
|
+
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"] }]
|
|
2513
2522
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
2514
2523
|
type: Input
|
|
2515
2524
|
}], cardHeightPx: [{
|
|
2516
2525
|
type: Input
|
|
2517
2526
|
}], cardWidthPx: [{
|
|
2518
2527
|
type: Input
|
|
2528
|
+
}], hasAnimation: [{
|
|
2529
|
+
type: Input
|
|
2530
|
+
}], isClickable: [{
|
|
2531
|
+
type: Input
|
|
2532
|
+
}], hasHover: [{
|
|
2533
|
+
type: Input
|
|
2534
|
+
}], cardClicked: [{
|
|
2535
|
+
type: Output
|
|
2536
|
+
}], cardHover: [{
|
|
2537
|
+
type: Output
|
|
2519
2538
|
}] } });
|
|
2520
2539
|
|
|
2521
2540
|
class PhaserCardModule {
|
|
@@ -3061,7 +3080,7 @@ class UploadResumeModalComponent {
|
|
|
3061
3080
|
this.docTypeDropdowChange.emit(selectedModel.value);
|
|
3062
3081
|
}
|
|
3063
3082
|
onResumeCheckSelect(updateResumeCheckEvent) {
|
|
3064
|
-
this.updateResumeChecked.emit(updateResumeCheckEvent
|
|
3083
|
+
this.updateResumeChecked.emit(updateResumeCheckEvent);
|
|
3065
3084
|
}
|
|
3066
3085
|
}
|
|
3067
3086
|
UploadResumeModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -5048,15 +5067,15 @@ class InvoiceAreaComponent {
|
|
|
5048
5067
|
constructor() {
|
|
5049
5068
|
this.model = {
|
|
5050
5069
|
lineItems: [],
|
|
5051
|
-
|
|
5070
|
+
jobsToAdvertise: '',
|
|
5052
5071
|
};
|
|
5053
5072
|
}
|
|
5054
5073
|
}
|
|
5055
5074
|
InvoiceAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5056
|
-
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 <
|
|
5075
|
+
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 });
|
|
5057
5076
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceAreaComponent, decorators: [{
|
|
5058
5077
|
type: Component,
|
|
5059
|
-
args: [{ selector: 'symphony-invoice-area', template: "<div class=\"job-type-summary sfx-px-20\">\n <
|
|
5078
|
+
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"] }]
|
|
5060
5079
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
5061
5080
|
type: Input
|
|
5062
5081
|
}] } });
|
|
@@ -5070,10 +5089,10 @@ class OrderSummaryComponent {
|
|
|
5070
5089
|
}
|
|
5071
5090
|
}
|
|
5072
5091
|
OrderSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrderSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5073
|
-
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"] }] });
|
|
5092
|
+
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 });
|
|
5074
5093
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrderSummaryComponent, decorators: [{
|
|
5075
5094
|
type: Component,
|
|
5076
|
-
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: [""] }]
|
|
5095
|
+
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"] }]
|
|
5077
5096
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
5078
5097
|
type: Input
|
|
5079
5098
|
}] } });
|
|
@@ -5108,12 +5127,15 @@ class AdvertiseModalComponent {
|
|
|
5108
5127
|
ngOnInit() {
|
|
5109
5128
|
this.initialiseDefaultValues();
|
|
5110
5129
|
this.updateModalHeader();
|
|
5111
|
-
this.
|
|
5130
|
+
const selectedJobBoards = this.model.jobBoards.filter((jb) => jb.isSelected).length;
|
|
5131
|
+
if (selectedJobBoards > 0) {
|
|
5132
|
+
this.updateOrderSummary();
|
|
5133
|
+
}
|
|
5112
5134
|
this.cancelContent = {
|
|
5113
5135
|
title: 'Are you sure you want to abandon your order?',
|
|
5114
5136
|
content: 'All selections will be deleted and you will have to start over.',
|
|
5115
5137
|
btnPrimary: 'Continue Order',
|
|
5116
|
-
btnSecondary: 'Abandon Order'
|
|
5138
|
+
btnSecondary: 'Abandon Order',
|
|
5117
5139
|
};
|
|
5118
5140
|
}
|
|
5119
5141
|
ngOnChanges(changes) {
|
|
@@ -5124,29 +5146,8 @@ class AdvertiseModalComponent {
|
|
|
5124
5146
|
this.jobCount = this.model.jobsToAdvertise.length;
|
|
5125
5147
|
this.orderSummary = {
|
|
5126
5148
|
title: 'Your Order',
|
|
5127
|
-
invoiceAreas: [
|
|
5128
|
-
|
|
5129
|
-
lineItems: [],
|
|
5130
|
-
title: 'Pay-Per-Click',
|
|
5131
|
-
total: {
|
|
5132
|
-
textLeft: 'Cost Programatic Boards',
|
|
5133
|
-
textRight: `x (${this.jobCount}) Jobs = $0`
|
|
5134
|
-
}
|
|
5135
|
-
},
|
|
5136
|
-
{
|
|
5137
|
-
lineItems: [],
|
|
5138
|
-
title: 'Job Boards',
|
|
5139
|
-
total: {
|
|
5140
|
-
textLeft: 'Cost Job Boards',
|
|
5141
|
-
textRight: `x (${this.jobCount}) Jobs = $0`
|
|
5142
|
-
}
|
|
5143
|
-
}
|
|
5144
|
-
],
|
|
5145
|
-
total: {
|
|
5146
|
-
textLeft: '',
|
|
5147
|
-
textRight: '$0',
|
|
5148
|
-
label: 'Total:'
|
|
5149
|
-
}
|
|
5149
|
+
invoiceAreas: [],
|
|
5150
|
+
total: {},
|
|
5150
5151
|
};
|
|
5151
5152
|
}
|
|
5152
5153
|
updateModalHeader() {
|
|
@@ -5177,7 +5178,10 @@ class AdvertiseModalComponent {
|
|
|
5177
5178
|
this.closeButtonClicked.emit();
|
|
5178
5179
|
}
|
|
5179
5180
|
onPostingBoardChange(selectedBoard) {
|
|
5180
|
-
this.
|
|
5181
|
+
const selectedJobBoards = this.model.jobBoards.filter((jb) => jb.isSelected).length;
|
|
5182
|
+
if (selectedJobBoards > 0) {
|
|
5183
|
+
this.updateOrderSummary();
|
|
5184
|
+
}
|
|
5181
5185
|
}
|
|
5182
5186
|
addLineItem(invoiceAreaIndex, selectedBoard) {
|
|
5183
5187
|
this.orderSummary.invoiceAreas[invoiceAreaIndex].lineItems.push({
|
|
@@ -5190,7 +5194,8 @@ class AdvertiseModalComponent {
|
|
|
5190
5194
|
this.orderSummary.invoiceAreas[invoiceAreaIndex].lineItems.forEach(li => {
|
|
5191
5195
|
invoiceAreaTotal = invoiceAreaTotal + +li.textRight.replace('$', '');
|
|
5192
5196
|
});
|
|
5193
|
-
this.orderSummary.invoiceAreas[invoiceAreaIndex].
|
|
5197
|
+
this.orderSummary.invoiceAreas[invoiceAreaIndex].subTotal.textRight = `$${invoiceAreaTotal * this.model.jobsToAdvertise.length}`;
|
|
5198
|
+
this.orderSummary.invoiceAreas[invoiceAreaIndex].total.textRight = `$${invoiceAreaTotal}`;
|
|
5194
5199
|
return invoiceAreaTotal * this.model.jobsToAdvertise.length;
|
|
5195
5200
|
}
|
|
5196
5201
|
calculateOrderTotal(payPerClickAreaTotal, jobBoardAreaTotal) {
|
|
@@ -5199,14 +5204,46 @@ class AdvertiseModalComponent {
|
|
|
5199
5204
|
const jobToAdvertiseCount = this.model.jobsToAdvertise.length;
|
|
5200
5205
|
const orderSummaryText = `(${selectedJobBoards}) Boards x ${this.model.jobsToAdvertise.length} Jobs = (${selectedJobBoards * jobToAdvertiseCount}) Ads`;
|
|
5201
5206
|
this.orderSummary.total = {
|
|
5202
|
-
label: 'Total
|
|
5203
|
-
textLeft:
|
|
5207
|
+
label: 'Current Total',
|
|
5208
|
+
textLeft: '',
|
|
5204
5209
|
textRight: `$${payPerClickAreaTotal + jobBoardAreaTotal}`
|
|
5205
5210
|
};
|
|
5206
5211
|
}
|
|
5207
5212
|
updateOrderSummary() {
|
|
5208
|
-
this.orderSummary
|
|
5209
|
-
|
|
5213
|
+
this.orderSummary = {
|
|
5214
|
+
title: 'Your Order',
|
|
5215
|
+
invoiceAreas: [
|
|
5216
|
+
{
|
|
5217
|
+
lineItems: [],
|
|
5218
|
+
total: {
|
|
5219
|
+
textLeft: 'Pay-Per-Click Sites, Subtotal Per Job:',
|
|
5220
|
+
textRight: ``
|
|
5221
|
+
},
|
|
5222
|
+
subTotal: {
|
|
5223
|
+
textLeft: 'Pay-Per-Click Sites Subtotal',
|
|
5224
|
+
textRight: `x (${this.jobCount}) Jobs = $0`
|
|
5225
|
+
},
|
|
5226
|
+
jobsToAdvertise: `x (${this.model.jobsToAdvertise.length}) Jobs Selected`
|
|
5227
|
+
},
|
|
5228
|
+
{
|
|
5229
|
+
lineItems: [],
|
|
5230
|
+
subTotal: {
|
|
5231
|
+
textLeft: 'Job Boards Subtotal',
|
|
5232
|
+
textRight: `x (${this.jobCount}) Jobs = $0`
|
|
5233
|
+
},
|
|
5234
|
+
total: {
|
|
5235
|
+
textLeft: 'Duration Job Boards, Subtotal Per Job:',
|
|
5236
|
+
textRight: ``
|
|
5237
|
+
},
|
|
5238
|
+
jobsToAdvertise: `x (${this.model.jobsToAdvertise.length}) Jobs Selected`
|
|
5239
|
+
}
|
|
5240
|
+
],
|
|
5241
|
+
total: {
|
|
5242
|
+
textLeft: '',
|
|
5243
|
+
textRight: '',
|
|
5244
|
+
label: 'Current Total'
|
|
5245
|
+
},
|
|
5246
|
+
};
|
|
5210
5247
|
this.model.jobBoards.forEach(jb => {
|
|
5211
5248
|
if (jb.isSelected) {
|
|
5212
5249
|
if (jb.isPayPerClick) {
|