@jooler/jooler-websites-shared 0.0.40 → 0.0.42
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/page-section-style-thirteen/page-section-style-thirteen.component.mjs +5 -15
- package/fesm2015/jooler-websites-shared.mjs +4 -14
- package/fesm2015/jooler-websites-shared.mjs.map +1 -1
- package/fesm2020/jooler-websites-shared.mjs +4 -14
- package/fesm2020/jooler-websites-shared.mjs.map +1 -1
- package/lib/page-section-style-thirteen/page-section-style-thirteen.component.d.ts +1 -3
- package/package.json +1 -1
|
@@ -12,21 +12,11 @@ export class PageSectionStyleThirteenComponent {
|
|
|
12
12
|
this.isTwoImages = false;
|
|
13
13
|
}
|
|
14
14
|
ngOnInit() {
|
|
15
|
-
this.
|
|
15
|
+
this.onHoveredItem(this.items[0].image, 0);
|
|
16
16
|
}
|
|
17
|
-
|
|
18
|
-
this.intervalId = setInterval(() => {
|
|
19
|
-
this.onHoveredItem(this.items[this.counter].image, this.counter);
|
|
20
|
-
this.counter = (this.counter + 1) % this.items.length;
|
|
21
|
-
}, 2000);
|
|
22
|
-
}
|
|
23
|
-
onMouseEnter(image, index) {
|
|
24
|
-
clearInterval(this.intervalId);
|
|
17
|
+
onClickChangeImage(image, index) {
|
|
25
18
|
this.onHoveredItem(image, index);
|
|
26
19
|
}
|
|
27
|
-
onMouseLeave() {
|
|
28
|
-
this.setInterval();
|
|
29
|
-
}
|
|
30
20
|
onHoveredItem(itemImage, index) {
|
|
31
21
|
this.counter = index;
|
|
32
22
|
for (let i = 0; i < this.items.length; i++) {
|
|
@@ -37,10 +27,10 @@ export class PageSectionStyleThirteenComponent {
|
|
|
37
27
|
}
|
|
38
28
|
}
|
|
39
29
|
PageSectionStyleThirteenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: PageSectionStyleThirteenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
40
|
-
PageSectionStyleThirteenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: PageSectionStyleThirteenComponent, selector: "page-section-style-thirteen", inputs: { sectionContent: "sectionContent", items: "items", iconType: "iconType", isTwoImages: "isTwoImages" }, ngImport: i0, template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [title]=\"sectionContent.title\" [subtitle]=\"sectionContent.subtitle\"\n [alignLeft]=\"true\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\"\n (
|
|
30
|
+
PageSectionStyleThirteenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: PageSectionStyleThirteenComponent, selector: "page-section-style-thirteen", inputs: { sectionContent: "sectionContent", items: "items", iconType: "iconType", isTwoImages: "isTwoImages" }, ngImport: i0, template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [title]=\"sectionContent.title\" [subtitle]=\"sectionContent.subtitle\"\n [alignLeft]=\"true\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\"\n (click)=\"onClickChangeImage(item.image, i)\">\n <div class=\"left-column\">\n\n <div class=\"square-row\" [ngSwitch]=\"iconType\"\n [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\n <img [src]=\"item.icon\" alt=\"\">\n </div>\n </div>\n <div></div>\n </div>\n <div class=\"right-column\">\n <div class=\"item-title\">{{item.title}}</div>\n <div class=\"item-description\" [ngClass]=\"{'show-description':!isItemHovered[i]}\">\n {{item.description}}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\n <div class=\"image-container\">\n <img [src]=\"showedImage\" alt=\"\">\n </div>\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\n <img src=\"https://i.ibb.co/fqZ5q5x/blue-points-home-page-about-us-section.png\" alt=\"\">\n </div>\n </div>\n</div>", styles: [".why-choose-us{display:grid;grid-template-columns:53% 45%;column-gap:2%;width:90%;margin:auto}@media only screen and (min-width: 1500px){.why-choose-us{max-width:150rem}}.why-choose-us .left-side,.why-choose-us .right-side{width:100%}.why-choose-us .items{display:grid;gap:2.5rem}.why-choose-us .hovered-item{background-color:#155ed4}.why-choose-us .hovered-item .left-column .square-row{background-color:#fff}.why-choose-us .hovered-item .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .hovered-item .shape-column{background-color:#32353b}.why-choose-us .hovered-item .right-column .item-title{color:#fff}.why-choose-us .hovered-item .right-column .item-description{color:#aeaeae}.why-choose-us .item{gap:1.5rem;display:grid;grid-template-columns:auto calc(100% - 5.5rem);cursor:pointer;border-radius:1.5rem;padding:2rem;transition:all ease-in-out .2s}.why-choose-us .item:hover{background-color:#155ed4}.why-choose-us .item:hover .left-column .square-row{background-color:#fff}.why-choose-us .item:hover .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .item:hover .shape-column{background-color:#32353b}.why-choose-us .item:hover .right-column .item-title{color:#fff}.why-choose-us .item:hover .right-column .item-description{color:#aeaeae}.why-choose-us .left-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .left-column .square-row{align-self:center;width:4rem;height:4rem;background-color:#4788c7;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .left-column .square-row .square{width:3rem;height:3rem;background-color:#155ed4;border-radius:.5rem;transition:border-radius ease-in-out .2s}.why-choose-us .shape-column{width:5rem;height:5rem;background-color:#4788c7;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .shape-column .shape{padding:1rem;display:grid}.why-choose-us .shape-column .shape img{width:100%}.why-choose-us .right-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .right-column .item-title{color:#2f3136;font-weight:600;font-size:1.8rem;align-self:center}.why-choose-us .right-column .item-description{color:#848484;font-size:1.6rem;font-weight:500}.why-choose-us .left-side .headline{padding-bottom:3rem}.why-choose-us .right-side{display:grid;justify-content:right}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem 0 0 1.5rem;object-fit:cover;overflow:hidden;height:80rem}.why-choose-us .right-side .image-container img{height:100%;transition:all ease-in-out .2s;object-fit:cover}.why-choose-us .two-images-preview{place-content:center;position:relative}.why-choose-us .two-images-preview .image-container{width:90%;height:65rem;border-radius:1.5rem}.why-choose-us .two-images-preview .image-container img{width:100%}.why-choose-us .two-images-preview .back-image{width:50%;height:20rem;position:absolute;display:grid;align-content:end;justify-content:right;top:0;right:0;z-index:-1}@media only screen and (max-width: 75em){.why-choose-us{width:90%;margin:auto;display:flex;flex-direction:column;flex-wrap:wrap;row-gap:2%}.why-choose-us .left-side{margin-bottom:3rem}.why-choose-us .left-side .show-description{display:none}.why-choose-us .right-side{width:100%;justify-content:center}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem;height:35rem}.why-choose-us .right-side .image-container img{width:100%}.why-choose-us .right-side .back-image{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.SectionTitleComponent, selector: "section-title", inputs: ["title", "subtitle", "alignLeft", "isDarkBg"] }] });
|
|
41
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: PageSectionStyleThirteenComponent, decorators: [{
|
|
42
32
|
type: Component,
|
|
43
|
-
args: [{ selector: 'page-section-style-thirteen', template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [title]=\"sectionContent.title\" [subtitle]=\"sectionContent.subtitle\"\n [alignLeft]=\"true\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\"\n (
|
|
33
|
+
args: [{ selector: 'page-section-style-thirteen', template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [title]=\"sectionContent.title\" [subtitle]=\"sectionContent.subtitle\"\n [alignLeft]=\"true\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\"\n (click)=\"onClickChangeImage(item.image, i)\">\n <div class=\"left-column\">\n\n <div class=\"square-row\" [ngSwitch]=\"iconType\"\n [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\n <img [src]=\"item.icon\" alt=\"\">\n </div>\n </div>\n <div></div>\n </div>\n <div class=\"right-column\">\n <div class=\"item-title\">{{item.title}}</div>\n <div class=\"item-description\" [ngClass]=\"{'show-description':!isItemHovered[i]}\">\n {{item.description}}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\n <div class=\"image-container\">\n <img [src]=\"showedImage\" alt=\"\">\n </div>\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\n <img src=\"https://i.ibb.co/fqZ5q5x/blue-points-home-page-about-us-section.png\" alt=\"\">\n </div>\n </div>\n</div>", styles: [".why-choose-us{display:grid;grid-template-columns:53% 45%;column-gap:2%;width:90%;margin:auto}@media only screen and (min-width: 1500px){.why-choose-us{max-width:150rem}}.why-choose-us .left-side,.why-choose-us .right-side{width:100%}.why-choose-us .items{display:grid;gap:2.5rem}.why-choose-us .hovered-item{background-color:#155ed4}.why-choose-us .hovered-item .left-column .square-row{background-color:#fff}.why-choose-us .hovered-item .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .hovered-item .shape-column{background-color:#32353b}.why-choose-us .hovered-item .right-column .item-title{color:#fff}.why-choose-us .hovered-item .right-column .item-description{color:#aeaeae}.why-choose-us .item{gap:1.5rem;display:grid;grid-template-columns:auto calc(100% - 5.5rem);cursor:pointer;border-radius:1.5rem;padding:2rem;transition:all ease-in-out .2s}.why-choose-us .item:hover{background-color:#155ed4}.why-choose-us .item:hover .left-column .square-row{background-color:#fff}.why-choose-us .item:hover .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .item:hover .shape-column{background-color:#32353b}.why-choose-us .item:hover .right-column .item-title{color:#fff}.why-choose-us .item:hover .right-column .item-description{color:#aeaeae}.why-choose-us .left-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .left-column .square-row{align-self:center;width:4rem;height:4rem;background-color:#4788c7;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .left-column .square-row .square{width:3rem;height:3rem;background-color:#155ed4;border-radius:.5rem;transition:border-radius ease-in-out .2s}.why-choose-us .shape-column{width:5rem;height:5rem;background-color:#4788c7;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .shape-column .shape{padding:1rem;display:grid}.why-choose-us .shape-column .shape img{width:100%}.why-choose-us .right-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .right-column .item-title{color:#2f3136;font-weight:600;font-size:1.8rem;align-self:center}.why-choose-us .right-column .item-description{color:#848484;font-size:1.6rem;font-weight:500}.why-choose-us .left-side .headline{padding-bottom:3rem}.why-choose-us .right-side{display:grid;justify-content:right}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem 0 0 1.5rem;object-fit:cover;overflow:hidden;height:80rem}.why-choose-us .right-side .image-container img{height:100%;transition:all ease-in-out .2s;object-fit:cover}.why-choose-us .two-images-preview{place-content:center;position:relative}.why-choose-us .two-images-preview .image-container{width:90%;height:65rem;border-radius:1.5rem}.why-choose-us .two-images-preview .image-container img{width:100%}.why-choose-us .two-images-preview .back-image{width:50%;height:20rem;position:absolute;display:grid;align-content:end;justify-content:right;top:0;right:0;z-index:-1}@media only screen and (max-width: 75em){.why-choose-us{width:90%;margin:auto;display:flex;flex-direction:column;flex-wrap:wrap;row-gap:2%}.why-choose-us .left-side{margin-bottom:3rem}.why-choose-us .left-side .show-description{display:none}.why-choose-us .right-side{width:100%;justify-content:center}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem;height:35rem}.why-choose-us .right-side .image-container img{width:100%}.why-choose-us .right-side .back-image{display:none}}\n"] }]
|
|
44
34
|
}], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
|
|
45
35
|
type: Input
|
|
46
36
|
}], items: [{
|
|
@@ -50,4 +40,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
50
40
|
}], isTwoImages: [{
|
|
51
41
|
type: Input
|
|
52
42
|
}] } });
|
|
53
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1zZWN0aW9uLXN0eWxlLXRoaXJ0ZWVuLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi9wYWdlLXNlY3Rpb24tc3R5bGUtdGhpcnRlZW4vcGFnZS1zZWN0aW9uLXN0eWxlLXRoaXJ0ZWVuLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi9wYWdlLXNlY3Rpb24tc3R5bGUtdGhpcnRlZW4vcGFnZS1zZWN0aW9uLXN0eWxlLXRoaXJ0ZWVuLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ3pELE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDZDQUE2QyxDQUFDOzs7O0FBT3ZGLE1BQU0sT0FBTyxpQ0FBaUM7SUFjNUM7UUFaQSxZQUFPLEdBQVcsQ0FBQyxDQUFDO1FBRXBCLGtCQUFhLEdBQWMsRUFBRSxDQUFDO1FBRzlCLDZCQUF3QixHQUFHLHdCQUF3QixDQUFDO1FBQzNDLGFBQVEsR0FBNkIsSUFBSSxDQUFDLHdCQUF3QixDQUFDLFVBQVUsQ0FBQztRQUM5RSxnQkFBVyxHQUFZLEtBQUssQ0FBQztJQUt0QixDQUFDO0lBSGpCLFFBQVE7UUFDTixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQzdDLENBQUM7SUFHRCxrQkFBa0IsQ0FBQyxLQUFLLEVBQUUsS0FBSztRQUM3QixJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQztJQUNuQyxDQUFDO0lBRUQsYUFBYSxDQUFDLFNBQVMsRUFBRSxLQUFLO1FBQzVCLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO1FBQ3JCLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUMxQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQztTQUMvQjtRQUNELElBQUksQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLEdBQUcsSUFBSSxDQUFDO1FBQ2pDLElBQUksQ0FBQyxXQUFXLEdBQUcsU0FBUyxDQUFDO0lBQy9CLENBQUM7OzhIQTNCVSxpQ0FBaUM7a0hBQWpDLGlDQUFpQyxtTENSOUMsbTJEQW9DTTsyRkQ1Qk8saUNBQWlDO2tCQUw3QyxTQUFTOytCQUNFLDZCQUE2QjswRUFTOUIsY0FBYztzQkFBdEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBRUcsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBQYWdlU2VjdGlvblN0eWxlVGhpcnRlZW4gfSBmcm9tICcuLi9tb2RlbHMvcGFnZS1zZWN0aW9uLXN0eWxlLXRoaXJ0ZWVuLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncGFnZS1zZWN0aW9uLXN0eWxlLXRoaXJ0ZWVuJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3BhZ2Utc2VjdGlvbi1zdHlsZS10aGlydGVlbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3BhZ2Utc2VjdGlvbi1zdHlsZS10aGlydGVlbi5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFBhZ2VTZWN0aW9uU3R5bGVUaGlydGVlbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIHNob3dlZEltYWdlOiBzdHJpbmc7XG4gIGNvdW50ZXI6IG51bWJlciA9IDA7XG4gIGludGVydmFsSWQ6IGFueTtcbiAgaXNJdGVtSG92ZXJlZDogYm9vbGVhbltdID0gW107XG4gIEBJbnB1dCgpIHNlY3Rpb25Db250ZW50OiBhbnk7XG4gIEBJbnB1dCgpIGl0ZW1zOiBhbnk7XG4gIHBhZ2VTZWN0aW9uU3R5bGVUaGlydGVlbiA9IFBhZ2VTZWN0aW9uU3R5bGVUaGlydGVlbjtcbiAgQElucHV0KCkgaWNvblR5cGU6IFBhZ2VTZWN0aW9uU3R5bGVUaGlydGVlbiA9IHRoaXMucGFnZVNlY3Rpb25TdHlsZVRoaXJ0ZWVuLlNIQVBFX0lDT047XG4gIEBJbnB1dCgpIGlzVHdvSW1hZ2VzOiBib29sZWFuID0gZmFsc2U7XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5vbkhvdmVyZWRJdGVtKHRoaXMuaXRlbXNbMF0uaW1hZ2UsIDApO1xuICB9XG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgb25DbGlja0NoYW5nZUltYWdlKGltYWdlLCBpbmRleCkge1xuICAgIHRoaXMub25Ib3ZlcmVkSXRlbShpbWFnZSwgaW5kZXgpO1xuICB9XG5cbiAgb25Ib3ZlcmVkSXRlbShpdGVtSW1hZ2UsIGluZGV4KSB7XG4gICAgdGhpcy5jb3VudGVyID0gaW5kZXg7XG4gICAgZm9yIChsZXQgaSA9IDA7IGkgPCB0aGlzLml0ZW1zLmxlbmd0aDsgaSsrKSB7XG4gICAgICB0aGlzLmlzSXRlbUhvdmVyZWRbaV0gPSBmYWxzZTtcbiAgICB9XG4gICAgdGhpcy5pc0l0ZW1Ib3ZlcmVkW2luZGV4XSA9IHRydWU7XG4gICAgdGhpcy5zaG93ZWRJbWFnZSA9IGl0ZW1JbWFnZTtcbiAgfVxufVxuXG4iLCI8ZGl2IGNsYXNzPVwid2h5LWNob29zZS11c1wiPlxuICAgIDxkaXYgY2xhc3M9XCJsZWZ0LXNpZGVcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImhlYWRsaW5lXCI+XG4gICAgICAgICAgICA8c2VjdGlvbi10aXRsZSBbdGl0bGVdPVwic2VjdGlvbkNvbnRlbnQudGl0bGVcIiBbc3VidGl0bGVdPVwic2VjdGlvbkNvbnRlbnQuc3VidGl0bGVcIlxuICAgICAgICAgICAgICAgIFthbGlnbkxlZnRdPVwidHJ1ZVwiPjwvc2VjdGlvbi10aXRsZT5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJpdGVtc1wiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cIml0ZW1cIiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtczsgbGV0IGk9aW5kZXhcIiBbbmdDbGFzc109XCJ7J2hvdmVyZWQtaXRlbSc6IGlzSXRlbUhvdmVyZWRbaV19XCJcbiAgICAgICAgICAgICAgICAoY2xpY2spPVwib25DbGlja0NoYW5nZUltYWdlKGl0ZW0uaW1hZ2UsIGkpXCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImxlZnQtY29sdW1uXCI+XG5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNxdWFyZS1yb3dcIiBbbmdTd2l0Y2hdPVwiaWNvblR5cGVcIlxuICAgICAgICAgICAgICAgICAgICAgICAgW25nQ2xhc3NdPVwieydzcXVhcmUtcm93JzppY29uVHlwZSA9PSBwYWdlU2VjdGlvblN0eWxlVGhpcnRlZW4uU0hBUEVfSUNPTiwnc2hhcGUtY29sdW1uJzppY29uVHlwZSA9PSBwYWdlU2VjdGlvblN0eWxlVGhpcnRlZW4uSU1BR0VfSUNPTn1cIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzcXVhcmVcIiAqbmdTd2l0Y2hDYXNlPVwicGFnZVNlY3Rpb25TdHlsZVRoaXJ0ZWVuLlNIQVBFX0lDT05cIj48L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzaGFwZVwiICpuZ1N3aXRjaENhc2U9XCJwYWdlU2VjdGlvblN0eWxlVGhpcnRlZW4uSU1BR0VfSUNPTlwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxpbWcgW3NyY109XCJpdGVtLmljb25cIiBhbHQ9XCJcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdj48L2Rpdj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwicmlnaHQtY29sdW1uXCI+XG4gICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJpdGVtLXRpdGxlXCI+e3tpdGVtLnRpdGxlfX08L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cIml0ZW0tZGVzY3JpcHRpb25cIiBbbmdDbGFzc109XCJ7J3Nob3ctZGVzY3JpcHRpb24nOiFpc0l0ZW1Ib3ZlcmVkW2ldfVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAge3tpdGVtLmRlc2NyaXB0aW9ufX08L2Rpdj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwicmlnaHQtc2lkZVwiIFtuZ0NsYXNzXT1cInsndHdvLWltYWdlcy1wcmV2aWV3Jzppc1R3b0ltYWdlc31cIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImltYWdlLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgPGltZyBbc3JjXT1cInNob3dlZEltYWdlXCIgYWx0PVwiXCI+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiYmFjay1pbWFnZVwiICpuZ0lmPVwiaXNUd29JbWFnZXNcIj5cbiAgICAgICAgICAgIDxpbWcgc3JjPVwiaHR0cHM6Ly9pLmliYi5jby9mcVo1cTV4L2JsdWUtcG9pbnRzLWhvbWUtcGFnZS1hYm91dC11cy1zZWN0aW9uLnBuZ1wiIGFsdD1cIlwiPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbjwvZGl2PiJdfQ==
|
|
@@ -271,21 +271,11 @@ class PageSectionStyleThirteenComponent {
|
|
|
271
271
|
this.isTwoImages = false;
|
|
272
272
|
}
|
|
273
273
|
ngOnInit() {
|
|
274
|
-
this.
|
|
274
|
+
this.onHoveredItem(this.items[0].image, 0);
|
|
275
275
|
}
|
|
276
|
-
|
|
277
|
-
this.intervalId = setInterval(() => {
|
|
278
|
-
this.onHoveredItem(this.items[this.counter].image, this.counter);
|
|
279
|
-
this.counter = (this.counter + 1) % this.items.length;
|
|
280
|
-
}, 2000);
|
|
281
|
-
}
|
|
282
|
-
onMouseEnter(image, index) {
|
|
283
|
-
clearInterval(this.intervalId);
|
|
276
|
+
onClickChangeImage(image, index) {
|
|
284
277
|
this.onHoveredItem(image, index);
|
|
285
278
|
}
|
|
286
|
-
onMouseLeave() {
|
|
287
|
-
this.setInterval();
|
|
288
|
-
}
|
|
289
279
|
onHoveredItem(itemImage, index) {
|
|
290
280
|
this.counter = index;
|
|
291
281
|
for (let i = 0; i < this.items.length; i++) {
|
|
@@ -296,10 +286,10 @@ class PageSectionStyleThirteenComponent {
|
|
|
296
286
|
}
|
|
297
287
|
}
|
|
298
288
|
PageSectionStyleThirteenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: PageSectionStyleThirteenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
299
|
-
PageSectionStyleThirteenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: PageSectionStyleThirteenComponent, selector: "page-section-style-thirteen", inputs: { sectionContent: "sectionContent", items: "items", iconType: "iconType", isTwoImages: "isTwoImages" }, ngImport: i0, template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [title]=\"sectionContent.title\" [subtitle]=\"sectionContent.subtitle\"\n [alignLeft]=\"true\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\"\n (
|
|
289
|
+
PageSectionStyleThirteenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: PageSectionStyleThirteenComponent, selector: "page-section-style-thirteen", inputs: { sectionContent: "sectionContent", items: "items", iconType: "iconType", isTwoImages: "isTwoImages" }, ngImport: i0, template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [title]=\"sectionContent.title\" [subtitle]=\"sectionContent.subtitle\"\n [alignLeft]=\"true\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\"\n (click)=\"onClickChangeImage(item.image, i)\">\n <div class=\"left-column\">\n\n <div class=\"square-row\" [ngSwitch]=\"iconType\"\n [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\n <img [src]=\"item.icon\" alt=\"\">\n </div>\n </div>\n <div></div>\n </div>\n <div class=\"right-column\">\n <div class=\"item-title\">{{item.title}}</div>\n <div class=\"item-description\" [ngClass]=\"{'show-description':!isItemHovered[i]}\">\n {{item.description}}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\n <div class=\"image-container\">\n <img [src]=\"showedImage\" alt=\"\">\n </div>\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\n <img src=\"https://i.ibb.co/fqZ5q5x/blue-points-home-page-about-us-section.png\" alt=\"\">\n </div>\n </div>\n</div>", styles: [".why-choose-us{display:grid;grid-template-columns:53% 45%;column-gap:2%;width:90%;margin:auto}@media only screen and (min-width: 1500px){.why-choose-us{max-width:150rem}}.why-choose-us .left-side,.why-choose-us .right-side{width:100%}.why-choose-us .items{display:grid;gap:2.5rem}.why-choose-us .hovered-item{background-color:#155ed4}.why-choose-us .hovered-item .left-column .square-row{background-color:#fff}.why-choose-us .hovered-item .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .hovered-item .shape-column{background-color:#32353b}.why-choose-us .hovered-item .right-column .item-title{color:#fff}.why-choose-us .hovered-item .right-column .item-description{color:#aeaeae}.why-choose-us .item{gap:1.5rem;display:grid;grid-template-columns:auto calc(100% - 5.5rem);cursor:pointer;border-radius:1.5rem;padding:2rem;transition:all ease-in-out .2s}.why-choose-us .item:hover{background-color:#155ed4}.why-choose-us .item:hover .left-column .square-row{background-color:#fff}.why-choose-us .item:hover .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .item:hover .shape-column{background-color:#32353b}.why-choose-us .item:hover .right-column .item-title{color:#fff}.why-choose-us .item:hover .right-column .item-description{color:#aeaeae}.why-choose-us .left-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .left-column .square-row{align-self:center;width:4rem;height:4rem;background-color:#4788c7;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .left-column .square-row .square{width:3rem;height:3rem;background-color:#155ed4;border-radius:.5rem;transition:border-radius ease-in-out .2s}.why-choose-us .shape-column{width:5rem;height:5rem;background-color:#4788c7;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .shape-column .shape{padding:1rem;display:grid}.why-choose-us .shape-column .shape img{width:100%}.why-choose-us .right-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .right-column .item-title{color:#2f3136;font-weight:600;font-size:1.8rem;align-self:center}.why-choose-us .right-column .item-description{color:#848484;font-size:1.6rem;font-weight:500}.why-choose-us .left-side .headline{padding-bottom:3rem}.why-choose-us .right-side{display:grid;justify-content:right}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem 0 0 1.5rem;object-fit:cover;overflow:hidden;height:80rem}.why-choose-us .right-side .image-container img{height:100%;transition:all ease-in-out .2s;object-fit:cover}.why-choose-us .two-images-preview{place-content:center;position:relative}.why-choose-us .two-images-preview .image-container{width:90%;height:65rem;border-radius:1.5rem}.why-choose-us .two-images-preview .image-container img{width:100%}.why-choose-us .two-images-preview .back-image{width:50%;height:20rem;position:absolute;display:grid;align-content:end;justify-content:right;top:0;right:0;z-index:-1}@media only screen and (max-width: 75em){.why-choose-us{width:90%;margin:auto;display:flex;flex-direction:column;flex-wrap:wrap;row-gap:2%}.why-choose-us .left-side{margin-bottom:3rem}.why-choose-us .left-side .show-description{display:none}.why-choose-us .right-side{width:100%;justify-content:center}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem;height:35rem}.why-choose-us .right-side .image-container img{width:100%}.why-choose-us .right-side .back-image{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["title", "subtitle", "alignLeft", "isDarkBg"] }] });
|
|
300
290
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: PageSectionStyleThirteenComponent, decorators: [{
|
|
301
291
|
type: Component,
|
|
302
|
-
args: [{ selector: 'page-section-style-thirteen', template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [title]=\"sectionContent.title\" [subtitle]=\"sectionContent.subtitle\"\n [alignLeft]=\"true\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\"\n (
|
|
292
|
+
args: [{ selector: 'page-section-style-thirteen', template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [title]=\"sectionContent.title\" [subtitle]=\"sectionContent.subtitle\"\n [alignLeft]=\"true\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\"\n (click)=\"onClickChangeImage(item.image, i)\">\n <div class=\"left-column\">\n\n <div class=\"square-row\" [ngSwitch]=\"iconType\"\n [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\n <img [src]=\"item.icon\" alt=\"\">\n </div>\n </div>\n <div></div>\n </div>\n <div class=\"right-column\">\n <div class=\"item-title\">{{item.title}}</div>\n <div class=\"item-description\" [ngClass]=\"{'show-description':!isItemHovered[i]}\">\n {{item.description}}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\n <div class=\"image-container\">\n <img [src]=\"showedImage\" alt=\"\">\n </div>\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\n <img src=\"https://i.ibb.co/fqZ5q5x/blue-points-home-page-about-us-section.png\" alt=\"\">\n </div>\n </div>\n</div>", styles: [".why-choose-us{display:grid;grid-template-columns:53% 45%;column-gap:2%;width:90%;margin:auto}@media only screen and (min-width: 1500px){.why-choose-us{max-width:150rem}}.why-choose-us .left-side,.why-choose-us .right-side{width:100%}.why-choose-us .items{display:grid;gap:2.5rem}.why-choose-us .hovered-item{background-color:#155ed4}.why-choose-us .hovered-item .left-column .square-row{background-color:#fff}.why-choose-us .hovered-item .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .hovered-item .shape-column{background-color:#32353b}.why-choose-us .hovered-item .right-column .item-title{color:#fff}.why-choose-us .hovered-item .right-column .item-description{color:#aeaeae}.why-choose-us .item{gap:1.5rem;display:grid;grid-template-columns:auto calc(100% - 5.5rem);cursor:pointer;border-radius:1.5rem;padding:2rem;transition:all ease-in-out .2s}.why-choose-us .item:hover{background-color:#155ed4}.why-choose-us .item:hover .left-column .square-row{background-color:#fff}.why-choose-us .item:hover .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .item:hover .shape-column{background-color:#32353b}.why-choose-us .item:hover .right-column .item-title{color:#fff}.why-choose-us .item:hover .right-column .item-description{color:#aeaeae}.why-choose-us .left-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .left-column .square-row{align-self:center;width:4rem;height:4rem;background-color:#4788c7;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .left-column .square-row .square{width:3rem;height:3rem;background-color:#155ed4;border-radius:.5rem;transition:border-radius ease-in-out .2s}.why-choose-us .shape-column{width:5rem;height:5rem;background-color:#4788c7;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .shape-column .shape{padding:1rem;display:grid}.why-choose-us .shape-column .shape img{width:100%}.why-choose-us .right-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .right-column .item-title{color:#2f3136;font-weight:600;font-size:1.8rem;align-self:center}.why-choose-us .right-column .item-description{color:#848484;font-size:1.6rem;font-weight:500}.why-choose-us .left-side .headline{padding-bottom:3rem}.why-choose-us .right-side{display:grid;justify-content:right}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem 0 0 1.5rem;object-fit:cover;overflow:hidden;height:80rem}.why-choose-us .right-side .image-container img{height:100%;transition:all ease-in-out .2s;object-fit:cover}.why-choose-us .two-images-preview{place-content:center;position:relative}.why-choose-us .two-images-preview .image-container{width:90%;height:65rem;border-radius:1.5rem}.why-choose-us .two-images-preview .image-container img{width:100%}.why-choose-us .two-images-preview .back-image{width:50%;height:20rem;position:absolute;display:grid;align-content:end;justify-content:right;top:0;right:0;z-index:-1}@media only screen and (max-width: 75em){.why-choose-us{width:90%;margin:auto;display:flex;flex-direction:column;flex-wrap:wrap;row-gap:2%}.why-choose-us .left-side{margin-bottom:3rem}.why-choose-us .left-side .show-description{display:none}.why-choose-us .right-side{width:100%;justify-content:center}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem;height:35rem}.why-choose-us .right-side .image-container img{width:100%}.why-choose-us .right-side .back-image{display:none}}\n"] }]
|
|
303
293
|
}], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
|
|
304
294
|
type: Input
|
|
305
295
|
}], items: [{
|