@jooler/jooler-websites-shared 0.0.23 → 0.0.25

package/fesm2020/jooler-websites-shared.mjs

@@ -15,7 +15,7 @@ import * as i4 from 'primeng/api';
 import * as i1$2 from '@angular/material/dialog';
 import * as i5 from 'primeng/carousel';
 import { CarouselModule } from 'primeng/carousel';
-import * as i2$2 from '@angular/cdk/layout';
+import * as i1$3 from '@angular/cdk/layout';
 
 class SectionTitleComponent {
     constructor() {
@@ -359,12 +359,12 @@ class TeamComponent {
         this._router.navigate(['/team/new-member']);
     }
 }
-TeamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TeamComponent, deps: [{ token: i1$1.Router }, { token: i2$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+TeamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TeamComponent, deps: [{ token: i1$1.Router }, { token: i1$3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
 TeamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TeamComponent, selector: "team", inputs: { teamSection: "teamSection" }, ngImport: i0, template: "<div class=\"page\">\n    <section-title [title]=\"teamSection.title\" [subtitle]=\"teamSection.subtitle\"></section-title>\n    <div class=\"cards\" *ngIf=\"!isTabletSize\">\n        <div class=\"member-card\" *ngFor=\"let teamMember of teamSection.teamMembers\">\n            <div class=\"image-container\">\n                <img [src]=\"teamMember.profilePicture\">\n            </div>\n            <div class=\"member-information\">\n                <div class=\"name\">\n                    {{teamMember.fullName}}\n                </div>\n                <div class=\"position\">\n                    {{teamMember.position}}\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"cards\" *ngIf=\"isTabletSize\">\n        <p-carousel class=\"custom\" [value]=\"teamSection.teamMembers\" [numVisible]='membersToShow'\n            [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\n            <ng-template let-member pTemplate=\"item\">\n                <div class=\"member-card\">\n                    <div class=\"image-container\">\n                        <img [src]=\"member.profilePicture\">\n                    </div>\n                    <div class=\"member-information\">\n                        <div class=\"name\">\n                            {{member.fullName}}\n                        </div>\n                        <div class=\"position\">\n                            {{member.position}}\n                        </div>\n                    </div>\n                </div>\n            </ng-template>\n        </p-carousel>\n    </div>\n    <div class=\"caption-text\">\n        {{teamSection.caption}}\n    </div>\n</div>", styles: [".page{margin-top:3rem;padding:5%;display:grid;grid-template-rows:auto auto;row-gap:2rem;width:100%}.page .title{font-weight:700;font-size:3.2rem;width:80%;margin-left:4%}.page .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;width:90%;margin:auto}@media only screen and (min-width: 1500px){.page .cards{max-width:150rem}}.page .caption-text{font-weight:600;font-size:2rem;width:85%;text-align:center;margin:2rem auto;color:#054386}.page .member-card{place-self:center;height:27rem;width:22rem;padding:1rem;display:grid;transition:all .3s ease-in-out;border-radius:1rem}.page .member-card:hover{transition:all .2s ease-in-out}.page .member-card .image-container{display:grid;place-self:center;place-items:center;border-radius:1.5rem;overflow:hidden;width:100%;height:20rem}.page .member-card .image-container img{width:100%;height:100%}.page .member-card .member-information{justify-self:center;text-align:center}.page .member-card .member-information .name{font-weight:600;font-size:1.9rem;margin:auto;text-align:center}.page .member-card .member-information .position{font-weight:500;font-size:1.4rem}@media only screen and (max-width: 75em){.page{width:100%;display:block}.page .title{margin-bottom:1.8rem}.page .cards{display:block;width:100%}.page .member-card{width:22rem;margin:auto}.page .member-card .image-container{width:100%;height:20rem;overflow:hidden}.page .member-card .image-container img{width:100%;height:100%}}@media only screen and (max-width: 37.5em){.page .member-card{width:23rem}}::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#155ed4;width:2.7rem;transition:all ease-in-out .1s}::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator button{border-radius:1rem;width:.8rem;height:.8rem;transition:all ease-in-out .5s}\n"], dependencies: [{ 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: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Carousel, selector: "p-carousel", inputs: ["page", "numVisible", "numScroll", "responsiveOptions", "orientation", "verticalViewPortHeight", "contentClass", "indicatorsContentClass", "indicatorsContentStyle", "indicatorStyleClass", "indicatorStyle", "value", "circular", "showIndicators", "showNavigators", "autoplayInterval", "style", "styleClass"], outputs: ["onPage"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["title", "subtitle", "alignLeft", "isDarkBg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TeamComponent, decorators: [{
             type: Component,
             args: [{ selector: 'team', template: "<div class=\"page\">\n    <section-title [title]=\"teamSection.title\" [subtitle]=\"teamSection.subtitle\"></section-title>\n    <div class=\"cards\" *ngIf=\"!isTabletSize\">\n        <div class=\"member-card\" *ngFor=\"let teamMember of teamSection.teamMembers\">\n            <div class=\"image-container\">\n                <img [src]=\"teamMember.profilePicture\">\n            </div>\n            <div class=\"member-information\">\n                <div class=\"name\">\n                    {{teamMember.fullName}}\n                </div>\n                <div class=\"position\">\n                    {{teamMember.position}}\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"cards\" *ngIf=\"isTabletSize\">\n        <p-carousel class=\"custom\" [value]=\"teamSection.teamMembers\" [numVisible]='membersToShow'\n            [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\n            <ng-template let-member pTemplate=\"item\">\n                <div class=\"member-card\">\n                    <div class=\"image-container\">\n                        <img [src]=\"member.profilePicture\">\n                    </div>\n                    <div class=\"member-information\">\n                        <div class=\"name\">\n                            {{member.fullName}}\n                        </div>\n                        <div class=\"position\">\n                            {{member.position}}\n                        </div>\n                    </div>\n                </div>\n            </ng-template>\n        </p-carousel>\n    </div>\n    <div class=\"caption-text\">\n        {{teamSection.caption}}\n    </div>\n</div>", styles: [".page{margin-top:3rem;padding:5%;display:grid;grid-template-rows:auto auto;row-gap:2rem;width:100%}.page .title{font-weight:700;font-size:3.2rem;width:80%;margin-left:4%}.page .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;width:90%;margin:auto}@media only screen and (min-width: 1500px){.page .cards{max-width:150rem}}.page .caption-text{font-weight:600;font-size:2rem;width:85%;text-align:center;margin:2rem auto;color:#054386}.page .member-card{place-self:center;height:27rem;width:22rem;padding:1rem;display:grid;transition:all .3s ease-in-out;border-radius:1rem}.page .member-card:hover{transition:all .2s ease-in-out}.page .member-card .image-container{display:grid;place-self:center;place-items:center;border-radius:1.5rem;overflow:hidden;width:100%;height:20rem}.page .member-card .image-container img{width:100%;height:100%}.page .member-card .member-information{justify-self:center;text-align:center}.page .member-card .member-information .name{font-weight:600;font-size:1.9rem;margin:auto;text-align:center}.page .member-card .member-information .position{font-weight:500;font-size:1.4rem}@media only screen and (max-width: 75em){.page{width:100%;display:block}.page .title{margin-bottom:1.8rem}.page .cards{display:block;width:100%}.page .member-card{width:22rem;margin:auto}.page .member-card .image-container{width:100%;height:20rem;overflow:hidden}.page .member-card .image-container img{width:100%;height:100%}}@media only screen and (max-width: 37.5em){.page .member-card{width:23rem}}::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#155ed4;width:2.7rem;transition:all ease-in-out .1s}::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator button{border-radius:1rem;width:.8rem;height:.8rem;transition:all ease-in-out .5s}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i2$2.BreakpointObserver }]; }, propDecorators: { teamSection: [{
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1$3.BreakpointObserver }]; }, propDecorators: { teamSection: [{
                 type: Input
             }] } });
 
@@ -387,12 +387,12 @@ class ValuesComponent {
         });
     }
 }
-ValuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ValuesComponent, deps: [{ token: i2$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+ValuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ValuesComponent, deps: [{ token: i1$3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
 ValuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ValuesComponent, selector: "values", inputs: { values: "values", withBgImage: "withBgImage", isDarkBg: "isDarkBg" }, ngImport: i0, template: "<div class=\"page\">\n    <section-title [title]=\"values.title\" [subtitle]=\"values.description\" [isDarkBg]=\"isDarkBg\"></section-title>\n    <img class=\"background-image\" src=\"../../assets/images/shape-values-bg.png\" alt=\"\" *ngIf=\"withBgImage\">\n    <div class=\"values-cards\" *ngIf=\"!isTabletSize\">\n        <div class=\"card\" *ngFor=\"let card of values.cards\">\n            <div class=\"icon\">\n                <img [src]=\"card.image\" alt=\"\">\n            </div>\n            <div class=\"subtitle\">\n                {{card.title}}\n            </div>\n            <div class=\"value-description\">\n                {{card.subtitle}}\n            </div>\n        </div>\n    </div>\n    <div class=\"value-cards\" *ngIf=\"isTabletSize\">\n        <p-carousel class=\"custom\" [value]=\"values.cards\" [numVisible]='1' [numScroll]='1' [page]=\"0\"\n            orientation=\"horizontal\" [circular]=\"true\">\n            <ng-template let-card pTemplate=\"item\">\n                <div class=\"card\">\n                    <div class=\"icon\">\n                        <img [src]=\"card.image\" alt=\"\">\n                    </div>\n                    <div class=\"subtitle\">\n                        {{card.title}}\n                    </div>\n                    <div class=\"value-description\">\n                        {{card.subtitle}}\n                    </div>\n                </div>\n            </ng-template>\n        </p-carousel>\n    </div>\n</div>", styles: [".page{display:grid;grid-template-rows:auto auto auto auto;margin-top:5rem;align-items:center;position:relative;row-gap:2rem}.page .background-image{width:100%;height:40%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}.page .values-cards{grid-row:4;display:grid;grid-template-columns:49% 49%;grid-template-rows:auto auto;place-content:center;gap:2rem 2%;z-index:2;width:90%;margin:auto}@media only screen and (min-width: 1500px){.page .values-cards{max-width:150rem}}.page .card{background-color:#fff;color:#424345;padding:2rem;border-radius:2rem;border:.1rem solid #D8D8D8;box-shadow:.2rem .2rem .4rem #00000040}.page .card .icon img{padding:1rem 0rem;width:6rem}.page .card .subtitle{padding:1rem 0rem;font-weight:700;font-size:2rem}.page .card .value-description{font-weight:400;font-size:1.4rem}@media only screen and (max-width: 75em){.page{height:auto;display:block}.page .values-cards{margin-top:3rem;display:block;width:100%}.page .card{width:70%;width:90%;margin:2rem auto}}\n"], dependencies: [{ 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: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Carousel, selector: "p-carousel", inputs: ["page", "numVisible", "numScroll", "responsiveOptions", "orientation", "verticalViewPortHeight", "contentClass", "indicatorsContentClass", "indicatorsContentStyle", "indicatorStyleClass", "indicatorStyle", "value", "circular", "showIndicators", "showNavigators", "autoplayInterval", "style", "styleClass"], outputs: ["onPage"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["title", "subtitle", "alignLeft", "isDarkBg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ValuesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'values', template: "<div class=\"page\">\n    <section-title [title]=\"values.title\" [subtitle]=\"values.description\" [isDarkBg]=\"isDarkBg\"></section-title>\n    <img class=\"background-image\" src=\"../../assets/images/shape-values-bg.png\" alt=\"\" *ngIf=\"withBgImage\">\n    <div class=\"values-cards\" *ngIf=\"!isTabletSize\">\n        <div class=\"card\" *ngFor=\"let card of values.cards\">\n            <div class=\"icon\">\n                <img [src]=\"card.image\" alt=\"\">\n            </div>\n            <div class=\"subtitle\">\n                {{card.title}}\n            </div>\n            <div class=\"value-description\">\n                {{card.subtitle}}\n            </div>\n        </div>\n    </div>\n    <div class=\"value-cards\" *ngIf=\"isTabletSize\">\n        <p-carousel class=\"custom\" [value]=\"values.cards\" [numVisible]='1' [numScroll]='1' [page]=\"0\"\n            orientation=\"horizontal\" [circular]=\"true\">\n            <ng-template let-card pTemplate=\"item\">\n                <div class=\"card\">\n                    <div class=\"icon\">\n                        <img [src]=\"card.image\" alt=\"\">\n                    </div>\n                    <div class=\"subtitle\">\n                        {{card.title}}\n                    </div>\n                    <div class=\"value-description\">\n                        {{card.subtitle}}\n                    </div>\n                </div>\n            </ng-template>\n        </p-carousel>\n    </div>\n</div>", styles: [".page{display:grid;grid-template-rows:auto auto auto auto;margin-top:5rem;align-items:center;position:relative;row-gap:2rem}.page .background-image{width:100%;height:40%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}.page .values-cards{grid-row:4;display:grid;grid-template-columns:49% 49%;grid-template-rows:auto auto;place-content:center;gap:2rem 2%;z-index:2;width:90%;margin:auto}@media only screen and (min-width: 1500px){.page .values-cards{max-width:150rem}}.page .card{background-color:#fff;color:#424345;padding:2rem;border-radius:2rem;border:.1rem solid #D8D8D8;box-shadow:.2rem .2rem .4rem #00000040}.page .card .icon img{padding:1rem 0rem;width:6rem}.page .card .subtitle{padding:1rem 0rem;font-weight:700;font-size:2rem}.page .card .value-description{font-weight:400;font-size:1.4rem}@media only screen and (max-width: 75em){.page{height:auto;display:block}.page .values-cards{margin-top:3rem;display:block;width:100%}.page .card{width:70%;width:90%;margin:2rem auto}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i2$2.BreakpointObserver }]; }, propDecorators: { values: [{
+        }], ctorParameters: function () { return [{ type: i1$3.BreakpointObserver }]; }, propDecorators: { values: [{
                 type: Input
             }], withBgImage: [{
                 type: Input
@@ -400,6 +400,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                 type: Input
             }] } });
 
+class OurClientListingComponent {
+    constructor() { }
+    ngOnInit() {
+        // console.log(this.account);
+    }
+}
+OurClientListingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: OurClientListingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OurClientListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: OurClientListingComponent, selector: "our-client-listing", inputs: { account: "account" }, ngImport: i0, template: "<div class=\"client\">\n  <img class=\"image\" [src]=\"account.profilePicture\" alt=\"\" />\n</div>", styles: [".client{margin:2vh 0}.client .image{filter:grayscale(100%);text-align:center;box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:.5rem}.client .image:hover{filter:none;cursor:pointer}@media only screen and (max-width: 112.5em){.image{width:70%}}@media only screen and (max-width: 75em){.image{width:70%}}@media only screen and (max-width: 56.25em){.image{width:70%}}@media only screen and (max-width: 37.5em){.image{width:85%}}@media only screen and (min-width: 112.5em){.image{width:70%}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: OurClientListingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "our-client-listing", template: "<div class=\"client\">\n  <img class=\"image\" [src]=\"account.profilePicture\" alt=\"\" />\n</div>", styles: [".client{margin:2vh 0}.client .image{filter:grayscale(100%);text-align:center;box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:.5rem}.client .image:hover{filter:none;cursor:pointer}@media only screen and (max-width: 112.5em){.image{width:70%}}@media only screen and (max-width: 75em){.image{width:70%}}@media only screen and (max-width: 56.25em){.image{width:70%}}@media only screen and (max-width: 37.5em){.image{width:85%}}@media only screen and (min-width: 112.5em){.image{width:70%}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { account: [{
+                type: Input
+            }] } });
+
+class OurClientsComponent {
+    constructor(breakpointObserver) {
+        this.breakpointObserver = breakpointObserver;
+        this.clientsToShow = 4;
+        this.scrollClientNumber = 2;
+    }
+    ngOnInit() {
+        this.breakpointObserver.observe([
+            "(min-width: 1201px)",
+            "(max-width: 1200px) and (min-width:1076px)",
+            "(max-width: 1075px) and (min-width:651px)",
+            "(max-width: 650px)"
+        ]).subscribe((result) => {
+            if (result.breakpoints['(max-width: 1200px) and (min-width:1076px)']) {
+                this.isUnderTabRange = true;
+                this.clientsToShow = 3;
+                this.scrollClientNumber = 2;
+            }
+            else if (result.breakpoints['(min-width: 1201px)']) {
+                this.isUnderTabRange = true;
+                this.clientsToShow = 4;
+                this.scrollClientNumber = 2;
+            }
+            else if (result.breakpoints['(max-width: 1075px) and (min-width:651px)']) {
+                this.isUnderTabRange = true;
+                this.clientsToShow = 2;
+                this.scrollClientNumber = 1;
+            }
+            else if (result.breakpoints['(max-width: 650px)']) {
+                this.isUnderTabRange = true;
+                this.clientsToShow = 1;
+                this.scrollClientNumber = 1;
+            }
+            else {
+                this.isUnderTabRange = false;
+            }
+        });
+    }
+}
+OurClientsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: OurClientsComponent, deps: [{ token: i1$3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+OurClientsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: OurClientsComponent, selector: "our-clients", inputs: { accounts: "accounts" }, ngImport: i0, template: "<p-carousel class=\"custom\" [value]=\"accounts\" [numVisible]=\"clientsToShow\" [numScroll]=\"scrollClientNumber\" [page]=\"0\"\n  orientation=\"horizantol\" [circular]=\"true\">\n  <ng-template let-client pTemplate=\"item\">\n    <div>\n      <our-client-listing class=\"client\" [account]=\"client\">\n      </our-client-listing>\n    </div>\n  </ng-template>\n</p-carousel>", styles: [".custom{height:20vh;margin:auto;width:90%}@media only screen and (min-width: 1500px){.custom{max-width:150rem}}.client{height:20rem;margin:auto;width:90%}@media only screen and (min-width: 1500px){.client{max-width:150rem}}\n"], dependencies: [{ kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Carousel, selector: "p-carousel", inputs: ["page", "numVisible", "numScroll", "responsiveOptions", "orientation", "verticalViewPortHeight", "contentClass", "indicatorsContentClass", "indicatorsContentStyle", "indicatorStyleClass", "indicatorStyle", "value", "circular", "showIndicators", "showNavigators", "autoplayInterval", "style", "styleClass"], outputs: ["onPage"] }, { kind: "component", type: OurClientListingComponent, selector: "our-client-listing", inputs: ["account"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: OurClientsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "our-clients", template: "<p-carousel class=\"custom\" [value]=\"accounts\" [numVisible]=\"clientsToShow\" [numScroll]=\"scrollClientNumber\" [page]=\"0\"\n  orientation=\"horizantol\" [circular]=\"true\">\n  <ng-template let-client pTemplate=\"item\">\n    <div>\n      <our-client-listing class=\"client\" [account]=\"client\">\n      </our-client-listing>\n    </div>\n  </ng-template>\n</p-carousel>", styles: [".custom{height:20vh;margin:auto;width:90%}@media only screen and (min-width: 1500px){.custom{max-width:150rem}}.client{height:20rem;margin:auto;width:90%}@media only screen and (min-width: 1500px){.client{max-width:150rem}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.BreakpointObserver }]; }, propDecorators: { accounts: [{
+                type: Input
+            }] } });
+
+class PageSectionWithMultipleCardsComponent {
+    constructor(_Router) {
+        this._Router = _Router;
+    }
+    ngOnInit() { }
+    onClickAllReasons(route) {
+        this._Router.navigate([route]);
+    }
+}
+PageSectionWithMultipleCardsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: PageSectionWithMultipleCardsComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+PageSectionWithMultipleCardsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: PageSectionWithMultipleCardsComponent, selector: "page-section-with-multiple-cards", inputs: { pageContent: "pageContent" }, ngImport: i0, template: "<div class=\"page\">\n    <div class=\"text-part\">\n        <h2 class=\"tip-title\">\n            {{pageContent.headlineSection.title}}\n        </h2>\n        <h3 class=\"subtitle\">\n            {{pageContent.headlineSection.subtitle}}\n        </h3>\n        <p class=\"description\">\n            {{pageContent.headlineSection.description}}\n        </p>\n    </div>\n    <div class=\"reason-card\" *ngFor=\"let reason of pageContent.reasons\">\n        <div class=\"card-icon\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 97 97\" [style.fill]=\"reason.shapeColor\">\n                <path\n                    d=\"M5.0312 58.8331C-9.18797 29.0705 16.1615 9.11602 41.3271 3.99601C66.4928 -1.12401 102.401 -5.60082 96.1642 40.2919C89.9278 86.1847 85.034 90.009 59.8684 95.129C34.7027 100.249 19.2504 88.5958 5.0312 58.8331Z\" />\n            </svg>\n            <fa-icon [style.color]=\"reason.iconColor\" [icon]=\"reason.iconName\"></fa-icon>\n        </div>\n        <div class=\"card-title\">\n            {{reason.title}}\n        </div>\n        <div class=\"card-description\">\n            {{reason.description}}\n        </div>\n    </div>\n    <button class=\"all-reason-card\" (click)=\"onClickAllReasons(pageContent.allReasonsBox.route)\">\n        <div class=\"card-title\">\n            {{pageContent.allReasonsBox.ctaText}}\n        </div>\n        <div class=\"icon-circle\">\n            <fa-icon [icon]=\"pageContent.allReasonsBox.iconName\"></fa-icon>\n        </div>\n    </button>\n\n</div>", styles: [".page{gap:1rem;display:flex;flex-wrap:wrap;justify-content:space-between;width:90%;margin:2rem auto}@media only screen and (min-width: 1500px){.page{max-width:150rem}}.page .text-part{width:49%;row-gap:.5rem;display:grid;grid-template-rows:2rem 13rem auto;min-width:52rem}@media only screen and (max-width: 600px){.page .text-part{min-width:0;width:100%;grid-template-rows:2rem auto auto}.page .text-part .subtitle{font-size:3rem;font-weight:700}}.page .text-part .tip-title{color:#043265;font-size:1.6rem;font-weight:700}.page .text-part .subtitle{font-size:4rem;font-weight:800;color:#3d3d3d}.page .text-part .description{font-size:2rem;font-weight:500;color:#7e7e7e}.page .reason-card,.page .all-reason-card{row-gap:1rem;display:grid;border-radius:1.5rem;border:.1rem solid #D8D8D8;background:#FFF;box-shadow:.1rem .1rem .4rem #00000040;padding:2rem 1rem}.page .reason-card{width:19rem;grid-template-rows:auto auto auto;text-align:center;flex-grow:1}.page .reason-card:nth-child(odd) svg{transform:rotate(90deg)}.page .reason-card .card-icon{place-self:center;position:relative}.page .reason-card .card-icon svg{width:9.5rem;height:9.5rem}.page .reason-card .card-icon fa-icon{position:absolute;font-size:3.8rem;top:calc(50% - 1.9rem);left:calc(50% - 1.9rem)}.page .reason-card .card-description{font-size:1.4rem;font-weight:500;color:#484848}.page .card-title{font-size:2.2rem;font-weight:800;color:#424345}.page .all-reason-card{place-content:center;flex-grow:1;cursor:pointer;transition:all .2s}@media (hover: hover){.page .all-reason-card:hover{background-color:#043265}.page .all-reason-card:hover .card-title{color:#fff}.page .all-reason-card:hover .icon-circle{color:#043265;background-color:#fff}.page .all-reason-card:active{background-color:#fff}.page .all-reason-card:active .card-title{color:#424345}.page .all-reason-card:active .icon-circle{color:#fff;background-color:#043265}}.page .all-reason-card .icon-circle{border-radius:50%;font-size:1.8rem;width:4rem;height:4rem;display:grid;place-content:center;background-color:#043265;color:#fff;justify-self:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: PageSectionWithMultipleCardsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'page-section-with-multiple-cards', template: "<div class=\"page\">\n    <div class=\"text-part\">\n        <h2 class=\"tip-title\">\n            {{pageContent.headlineSection.title}}\n        </h2>\n        <h3 class=\"subtitle\">\n            {{pageContent.headlineSection.subtitle}}\n        </h3>\n        <p class=\"description\">\n            {{pageContent.headlineSection.description}}\n        </p>\n    </div>\n    <div class=\"reason-card\" *ngFor=\"let reason of pageContent.reasons\">\n        <div class=\"card-icon\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 97 97\" [style.fill]=\"reason.shapeColor\">\n                <path\n                    d=\"M5.0312 58.8331C-9.18797 29.0705 16.1615 9.11602 41.3271 3.99601C66.4928 -1.12401 102.401 -5.60082 96.1642 40.2919C89.9278 86.1847 85.034 90.009 59.8684 95.129C34.7027 100.249 19.2504 88.5958 5.0312 58.8331Z\" />\n            </svg>\n            <fa-icon [style.color]=\"reason.iconColor\" [icon]=\"reason.iconName\"></fa-icon>\n        </div>\n        <div class=\"card-title\">\n            {{reason.title}}\n        </div>\n        <div class=\"card-description\">\n            {{reason.description}}\n        </div>\n    </div>\n    <button class=\"all-reason-card\" (click)=\"onClickAllReasons(pageContent.allReasonsBox.route)\">\n        <div class=\"card-title\">\n            {{pageContent.allReasonsBox.ctaText}}\n        </div>\n        <div class=\"icon-circle\">\n            <fa-icon [icon]=\"pageContent.allReasonsBox.iconName\"></fa-icon>\n        </div>\n    </button>\n\n</div>", styles: [".page{gap:1rem;display:flex;flex-wrap:wrap;justify-content:space-between;width:90%;margin:2rem auto}@media only screen and (min-width: 1500px){.page{max-width:150rem}}.page .text-part{width:49%;row-gap:.5rem;display:grid;grid-template-rows:2rem 13rem auto;min-width:52rem}@media only screen and (max-width: 600px){.page .text-part{min-width:0;width:100%;grid-template-rows:2rem auto auto}.page .text-part .subtitle{font-size:3rem;font-weight:700}}.page .text-part .tip-title{color:#043265;font-size:1.6rem;font-weight:700}.page .text-part .subtitle{font-size:4rem;font-weight:800;color:#3d3d3d}.page .text-part .description{font-size:2rem;font-weight:500;color:#7e7e7e}.page .reason-card,.page .all-reason-card{row-gap:1rem;display:grid;border-radius:1.5rem;border:.1rem solid #D8D8D8;background:#FFF;box-shadow:.1rem .1rem .4rem #00000040;padding:2rem 1rem}.page .reason-card{width:19rem;grid-template-rows:auto auto auto;text-align:center;flex-grow:1}.page .reason-card:nth-child(odd) svg{transform:rotate(90deg)}.page .reason-card .card-icon{place-self:center;position:relative}.page .reason-card .card-icon svg{width:9.5rem;height:9.5rem}.page .reason-card .card-icon fa-icon{position:absolute;font-size:3.8rem;top:calc(50% - 1.9rem);left:calc(50% - 1.9rem)}.page .reason-card .card-description{font-size:1.4rem;font-weight:500;color:#484848}.page .card-title{font-size:2.2rem;font-weight:800;color:#424345}.page .all-reason-card{place-content:center;flex-grow:1;cursor:pointer;transition:all .2s}@media (hover: hover){.page .all-reason-card:hover{background-color:#043265}.page .all-reason-card:hover .card-title{color:#fff}.page .all-reason-card:hover .icon-circle{color:#043265;background-color:#fff}.page .all-reason-card:active{background-color:#fff}.page .all-reason-card:active .card-title{color:#424345}.page .all-reason-card:active .icon-circle{color:#fff;background-color:#043265}}.page .all-reason-card .icon-circle{border-radius:50%;font-size:1.8rem;width:4rem;height:4rem;display:grid;place-content:center;background-color:#043265;color:#fff;justify-self:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { pageContent: [{
+                type: Input
+            }] } });
+
 class JoolerWebsitesSharedModule {
 }
 JoolerWebsitesSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: JoolerWebsitesSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -413,7 +494,10 @@ JoolerWebsitesSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
         SectionTitleComponent,
         SuccessMessageDialogComponent,
         TeamComponent,
-        ValuesComponent], imports: [CommonModule,
+        ValuesComponent,
+        OurClientsComponent,
+        OurClientListingComponent,
+        PageSectionWithMultipleCardsComponent], imports: [CommonModule,
         AppMaterialModule,
         FontAwesomeSharedModule,
         GalleriaModule,
@@ -429,7 +513,10 @@ JoolerWebsitesSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
         SuccessMessageDialogComponent,
         CallToActionSectionComponent,
         TeamComponent,
-        ValuesComponent] });
+        ValuesComponent,
+        OurClientsComponent,
+        OurClientListingComponent,
+        PageSectionWithMultipleCardsComponent] });
 JoolerWebsitesSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: JoolerWebsitesSharedModule, imports: [CommonModule,
         AppMaterialModule,
         FontAwesomeSharedModule,
@@ -450,7 +537,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                         SectionTitleComponent,
                         SuccessMessageDialogComponent,
                         TeamComponent,
-                        ValuesComponent
+                        ValuesComponent,
+                        OurClientsComponent,
+                        OurClientListingComponent,
+                        PageSectionWithMultipleCardsComponent
                     ],
                     imports: [
                         CommonModule,
@@ -472,7 +562,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                         SuccessMessageDialogComponent,
                         CallToActionSectionComponent,
                         TeamComponent,
-                        ValuesComponent
+                        ValuesComponent,
+                        OurClientsComponent,
+                        OurClientListingComponent,
+                        PageSectionWithMultipleCardsComponent
                     ]
                 }]
         }] });
@@ -510,6 +603,38 @@ class TeamSection {
 class PageSectionStyleFive {
 }
 
+var AccountType;
+(function (AccountType) {
+    AccountType[AccountType["CONSUMERCLIENT"] = 0] = "CONSUMERCLIENT";
+    AccountType[AccountType["BUSINESSCLIENT"] = 1] = "BUSINESSCLIENT";
+    AccountType[AccountType["SUPPLIER"] = 2] = "SUPPLIER";
+    AccountType[AccountType["COMPANY"] = 3] = "COMPANY";
+    AccountType[AccountType["CERTIFICATIONENTTIY"] = 4] = "CERTIFICATIONENTTIY";
+})(AccountType || (AccountType = {}));
+
+class Account {
+}
+
+class Address {
+}
+
+class City {
+}
+
+class Country {
+}
+
+var UserType;
+(function (UserType) {
+    UserType[UserType["CONSUMER"] = 0] = "CONSUMER";
+    UserType[UserType["ERP"] = 1] = "ERP";
+    UserType[UserType["SECOND_LEVEL"] = 2] = "SECOND_LEVEL";
+    UserType[UserType["ADMIN"] = 3] = "ADMIN";
+})(UserType || (UserType = {}));
+
+class User {
+}
+
 /*
  * Public API Surface of jooler-websites-shared
  */
@@ -518,5 +643,5 @@ class PageSectionStyleFive {
  * Generated bundle index. Do not edit.
  */
 
-export { Achievement, Achievements, AchievementsComponent, CallToActionSectionComponent, CallToActionSectionData, GetStartedCTAComponent, ImageGalleryModal, ImageSection, ImageSectionAction, JoolerWebsitesSharedModule, PageSection, PageSectionAction, PageSectionStyleFive, PageSectionStyleTenComponent, PageSectionStyleThirteen, PageSectionStyleThirteenComponent, PricingPlansComponent, SectionTitleComponent, ServicePlan, SuccessMessageDialogComponent, TeamComponent, TeamMember, TeamSection, ValuesComponent };
+export { Account, AccountType, Achievement, Achievements, AchievementsComponent, Address, CallToActionSectionComponent, CallToActionSectionData, City, Country, GetStartedCTAComponent, ImageGalleryModal, ImageSection, ImageSectionAction, JoolerWebsitesSharedModule, OurClientListingComponent, OurClientsComponent, PageSection, PageSectionAction, PageSectionStyleFive, PageSectionStyleTenComponent, PageSectionStyleThirteen, PageSectionStyleThirteenComponent, PageSectionWithMultipleCardsComponent, PricingPlansComponent, SectionTitleComponent, ServicePlan, SuccessMessageDialogComponent, TeamComponent, TeamMember, TeamSection, User, UserType, ValuesComponent };
 //# sourceMappingURL=jooler-websites-shared.mjs.map