@jooler/jooler-websites-shared 0.0.34 → 0.0.36
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/call-to-action-section-two/call-to-action-section-two.component.mjs +23 -0
- package/esm2020/lib/call-to-action-section-two/call-to-action-section-two.model.mjs +3 -0
- package/esm2020/lib/call-to-action-section-two/link-text.model.mjs +3 -0
- package/esm2020/lib/contact-us-page/contact-us-page.component.mjs +126 -0
- package/esm2020/lib/jooler-websites-shared.module.mjs +31 -8
- package/esm2020/lib/value-props-sections/value-props-sections.component.mjs +39 -0
- package/esm2020/public-api.mjs +6 -1
- package/fesm2015/jooler-websites-shared.mjs +204 -8
- package/fesm2015/jooler-websites-shared.mjs.map +1 -1
- package/fesm2020/jooler-websites-shared.mjs +204 -8
- package/fesm2020/jooler-websites-shared.mjs.map +1 -1
- package/lib/call-to-action-section-two/call-to-action-section-two.component.d.ts +13 -0
- package/lib/call-to-action-section-two/call-to-action-section-two.model.d.ts +11 -0
- package/lib/call-to-action-section-two/link-text.model.d.ts +4 -0
- package/lib/contact-us-page/contact-us-page.component.d.ts +49 -0
- package/lib/jooler-websites-shared.module.d.ts +11 -6
- package/lib/value-props-sections/value-props-sections.component.d.ts +11 -0
- package/package.json +1 -1
- package/public-api.d.ts +5 -0
|
@@ -16,6 +16,10 @@ import * as i1$2 from '@angular/material/dialog';
|
|
|
16
16
|
import * as i5 from 'primeng/carousel';
|
|
17
17
|
import { CarouselModule } from 'primeng/carousel';
|
|
18
18
|
import * as i1$3 from '@angular/cdk/layout';
|
|
19
|
+
import * as i3$2 from '@angular/forms';
|
|
20
|
+
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
21
|
+
import * as i7 from '@ng-select/ng-select';
|
|
22
|
+
import { NgSelectModule } from '@ng-select/ng-select';
|
|
19
23
|
|
|
20
24
|
class SectionTitleComponent {
|
|
21
25
|
constructor() {
|
|
@@ -481,6 +485,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
481
485
|
type: Input
|
|
482
486
|
}] } });
|
|
483
487
|
|
|
488
|
+
class CallToActionSectionTwoComponent {
|
|
489
|
+
constructor(_router) {
|
|
490
|
+
this._router = _router;
|
|
491
|
+
}
|
|
492
|
+
ngOnInit() {
|
|
493
|
+
console.log(this.sectionContent, "suiiiiiiiiiiiii in the component ");
|
|
494
|
+
}
|
|
495
|
+
onClickLink(link) {
|
|
496
|
+
this._router.navigate([link]);
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
CallToActionSectionTwoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: CallToActionSectionTwoComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
500
|
+
CallToActionSectionTwoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: CallToActionSectionTwoComponent, selector: "call-to-action-section-two", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"cta-section\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 61 48\" fill=\"none\" class=\"svg-top-right\">\n <path\n d=\"M16.8568 30.4924C-18.2522 24.3036 10.5419 3.88207 25.167 1.30326C39.7921 -1.27554 56.828 7.35401 58.4986 18.7386C60.1692 30.1232 64.3083 44.7867 49.6832 47.3655C35.058 49.9443 32.3641 34.7521 16.8568 30.4924Z\"\n fill=\"#043265\" />\n </svg>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 53 51\" fill=\"none\" class=\"svg-bottom-left\">\n <path\n d=\"M39.4766 22.6779C69.5603 35.0664 40.8217 50.4221 27.4676 50.4221C14.1135 50.4221 0.41333 38.7801 0.750387 27.0924C1.08744 15.4046 -0.237166 0 13.1169 0C26.471 0 26.4324 15.6787 39.4766 22.6779Z\"\n fill=\"#043265\" />\n </svg>\n <h1 class=\"cta-title\">{{sectionContent.title}}</h1>\n <p class=\"cta-description\">\n {{sectionContent.description}}\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkOne.route)\">\n {{sectionContent.linkOne.text}}\n </span>.\n {{sectionContent.textBetweenLinksOne}}\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkTwo.route)\">\n {{sectionContent.linkTwo.text}} \n </span>\n {{sectionContent.textBetweenLinksTwo}}\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkThree.route)\">\n {{sectionContent.linkThree.text}}\n </span>\n {{sectionContent.textAfterLinks}}\n </p>\n\n</div>", styles: [".cta-section{background-color:#c2d0de;display:grid;position:relative;border-radius:1.5rem;padding:2rem 1.5rem;width:100%;margin:3rem auto}.cta-section .svg-top-right{height:4.8rem;width:6.1rem;position:absolute;top:-1rem;right:-1rem}.cta-section .svg-bottom-left{height:5.1rem;width:5.3rem;position:absolute;bottom:-2rem;left:-1.5rem}.cta-section .cta-title{font-size:3.4rem;font-weight:700;color:#000}.cta-section .cta-description{font-size:2rem;font-weight:500}.cta-section .link-text{text-decoration:underline;font-weight:700;cursor:pointer;transition:color linear .2s}@media (hover: hover){.cta-section .link-text:hover{color:#054386}}\n"] });
|
|
501
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: CallToActionSectionTwoComponent, decorators: [{
|
|
502
|
+
type: Component,
|
|
503
|
+
args: [{ selector: 'call-to-action-section-two', template: "<div class=\"cta-section\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 61 48\" fill=\"none\" class=\"svg-top-right\">\n <path\n d=\"M16.8568 30.4924C-18.2522 24.3036 10.5419 3.88207 25.167 1.30326C39.7921 -1.27554 56.828 7.35401 58.4986 18.7386C60.1692 30.1232 64.3083 44.7867 49.6832 47.3655C35.058 49.9443 32.3641 34.7521 16.8568 30.4924Z\"\n fill=\"#043265\" />\n </svg>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 53 51\" fill=\"none\" class=\"svg-bottom-left\">\n <path\n d=\"M39.4766 22.6779C69.5603 35.0664 40.8217 50.4221 27.4676 50.4221C14.1135 50.4221 0.41333 38.7801 0.750387 27.0924C1.08744 15.4046 -0.237166 0 13.1169 0C26.471 0 26.4324 15.6787 39.4766 22.6779Z\"\n fill=\"#043265\" />\n </svg>\n <h1 class=\"cta-title\">{{sectionContent.title}}</h1>\n <p class=\"cta-description\">\n {{sectionContent.description}}\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkOne.route)\">\n {{sectionContent.linkOne.text}}\n </span>.\n {{sectionContent.textBetweenLinksOne}}\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkTwo.route)\">\n {{sectionContent.linkTwo.text}} \n </span>\n {{sectionContent.textBetweenLinksTwo}}\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkThree.route)\">\n {{sectionContent.linkThree.text}}\n </span>\n {{sectionContent.textAfterLinks}}\n </p>\n\n</div>", styles: [".cta-section{background-color:#c2d0de;display:grid;position:relative;border-radius:1.5rem;padding:2rem 1.5rem;width:100%;margin:3rem auto}.cta-section .svg-top-right{height:4.8rem;width:6.1rem;position:absolute;top:-1rem;right:-1rem}.cta-section .svg-bottom-left{height:5.1rem;width:5.3rem;position:absolute;bottom:-2rem;left:-1.5rem}.cta-section .cta-title{font-size:3.4rem;font-weight:700;color:#000}.cta-section .cta-description{font-size:2rem;font-weight:500}.cta-section .link-text{text-decoration:underline;font-weight:700;cursor:pointer;transition:color linear .2s}@media (hover: hover){.cta-section .link-text:hover{color:#054386}}\n"] }]
|
|
504
|
+
}], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { sectionContent: [{
|
|
505
|
+
type: Input
|
|
506
|
+
}] } });
|
|
507
|
+
|
|
508
|
+
class ValuePropsSectionsComponent {
|
|
509
|
+
// isSelected: boolean[] = [];
|
|
510
|
+
constructor() {
|
|
511
|
+
this.selectedImage = [];
|
|
512
|
+
}
|
|
513
|
+
ngOnInit() {
|
|
514
|
+
// console.log('huhuhuh', this.sectionContent[0].paragraphs[0].imagePath)
|
|
515
|
+
let i = 0;
|
|
516
|
+
for (let item of this.sectionContent) {
|
|
517
|
+
this.selectedImage[i] = item.paragraphs[0].imagePath;
|
|
518
|
+
i++;
|
|
519
|
+
for (let paragraph of item.paragraphs) {
|
|
520
|
+
paragraph.isClicked = false;
|
|
521
|
+
}
|
|
522
|
+
item.paragraphs[0].isClicked = true;
|
|
523
|
+
}
|
|
524
|
+
}
|
|
525
|
+
onChangeImage(imagePath, sectionIndex, paragraphIndex) {
|
|
526
|
+
for (let paragraph of this.sectionContent[sectionIndex].paragraphs) {
|
|
527
|
+
paragraph.isClicked = false;
|
|
528
|
+
}
|
|
529
|
+
this.selectedImage[sectionIndex] = imagePath;
|
|
530
|
+
this.sectionContent[sectionIndex].paragraphs[paragraphIndex].isClicked = true;
|
|
531
|
+
}
|
|
532
|
+
}
|
|
533
|
+
ValuePropsSectionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ValuePropsSectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
534
|
+
ValuePropsSectionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ValuePropsSectionsComponent, selector: "value-props-sections", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"value-prop\" *ngFor=\"let valueprop of sectionContent; let i = index\">\n <div class=\"text-side\">\n <section-title [title]=\"valueprop.title\" [subtitle]=\"valueprop.subtitle\" [alignLeft]=\"true\">\n </section-title>\n <div class=\"value-prop-image\">\n <!-- <img [src]=\"valueprop.paragraphs[i].imagePath\" alt=\"\"> -->\n <img [src]=\"selectedImage[i]\" alt=\"\">\n </div>\n <p *ngFor=\"let paragraph of valueprop.paragraphs; let j = index\" class=\"paragraph\"\n (click)=\"onChangeImage(paragraph.imagePath , i ,j)\" [ngClass]=\"{'selected-paragraph':paragraph.isClicked}\">\n <span class=\"value-prop-icon\">\n <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\n <span>\n {{paragraph.text}}\n </span>\n <!-- <span class=\"cta-icon-container\"><fa-icon [icon]=\"paragraph.ctaIcon\" class=\"cta-icon\"></fa-icon></span> -->\n </p>\n </div>\n <div class=\"image-buttons-side\">\n <img onerror=\"'../../../assets/images/value-one.jpeg'\" [src]=\"selectedImage[i]\" alt=\"\">\n </div>\n</div>", styles: [".value-prop{display:flex;flex-direction:row;flex-wrap:nowrap;column-gap:2%;margin:2rem auto;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:60%;padding:2rem 0rem}.value-prop .text-side .value-prop-image{display:none}.value-prop .text-side .paragraph{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:5rem auto auto;margin:1rem 0rem;align-content:center;align-self:start;cursor:pointer;transition:all ease-in-out .2s;border-radius:1.5rem;column-gap:.5rem}.value-prop .text-side .paragraph:hover{background-color:#054386;color:#fff}.value-prop .text-side .paragraph:hover .value-prop-icon{color:#fff}.value-prop .text-side .paragraph:hover .value-prop-icon fa-icon{color:#fff}.value-prop .text-side .paragraph:hover .cta-icon{color:#fff;background-color:#054386}.value-prop .text-side .paragraph .cta-icon-container{display:grid;align-items:center}.value-prop .text-side .paragraph .cta-icon{align-self:center;justify-content:center;display:grid;font-size:3rem;transform:rotate(-45deg);color:#054386;background-color:#fff;border-radius:.7rem;padding:1rem;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon{display:grid;align-content:center;color:#054386}.value-prop .text-side .paragraph .value-prop-icon fa-icon{font-size:3rem}.value-prop .text-side .selected-paragraph{background-color:#054386;color:#fff}.value-prop .text-side .selected-paragraph .value-prop-icon{color:#fff}.value-prop .text-side .selected-paragraph .value-prop-icon fa-icon{color:#fff}.value-prop .text-side .selected-paragraph .cta-icon{transform:rotate(0)}.value-prop .text-side .selected-paragraph:hover .cta-icon{color:#054386;background-color:#fff}.value-prop .image-buttons-side{width:38%;display:grid;align-content:center}.value-prop .image-buttons-side img{width:100%;height:42rem;object-fit:cover;border-radius:1rem}.value-prop:nth-child(even){flex-direction:row-reverse}.value-prop:nth-child(even) .text-side .paragraph{padding:1rem;border-radius:.7rem;border:.1rem solid #E3E3E3}.value-prop:nth-child(even) .text-side .paragraph .value-prop-icon{text-align:center}@media only screen and (max-width: 56.25em){.value-prop{flex-wrap:wrap}.value-prop:nth-child(even){flex-direction:row}.value-prop:nth-child(even) .image-buttons-side{justify-self:center}.value-prop .text-side{width:100%;justify-self:left}.value-prop .text-side .value-prop-image{display:grid;width:100%}.value-prop .text-side .value-prop-image img{width:100%;height:35rem;object-fit:cover;border-radius:1rem}.value-prop .image-buttons-side{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: "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"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["title", "subtitle", "alignLeft", "isDarkBg"] }] });
|
|
535
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ValuePropsSectionsComponent, decorators: [{
|
|
536
|
+
type: Component,
|
|
537
|
+
args: [{ selector: 'value-props-sections', template: "<div class=\"value-prop\" *ngFor=\"let valueprop of sectionContent; let i = index\">\n <div class=\"text-side\">\n <section-title [title]=\"valueprop.title\" [subtitle]=\"valueprop.subtitle\" [alignLeft]=\"true\">\n </section-title>\n <div class=\"value-prop-image\">\n <!-- <img [src]=\"valueprop.paragraphs[i].imagePath\" alt=\"\"> -->\n <img [src]=\"selectedImage[i]\" alt=\"\">\n </div>\n <p *ngFor=\"let paragraph of valueprop.paragraphs; let j = index\" class=\"paragraph\"\n (click)=\"onChangeImage(paragraph.imagePath , i ,j)\" [ngClass]=\"{'selected-paragraph':paragraph.isClicked}\">\n <span class=\"value-prop-icon\">\n <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\n <span>\n {{paragraph.text}}\n </span>\n <!-- <span class=\"cta-icon-container\"><fa-icon [icon]=\"paragraph.ctaIcon\" class=\"cta-icon\"></fa-icon></span> -->\n </p>\n </div>\n <div class=\"image-buttons-side\">\n <img onerror=\"'../../../assets/images/value-one.jpeg'\" [src]=\"selectedImage[i]\" alt=\"\">\n </div>\n</div>", styles: [".value-prop{display:flex;flex-direction:row;flex-wrap:nowrap;column-gap:2%;margin:2rem auto;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:60%;padding:2rem 0rem}.value-prop .text-side .value-prop-image{display:none}.value-prop .text-side .paragraph{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:5rem auto auto;margin:1rem 0rem;align-content:center;align-self:start;cursor:pointer;transition:all ease-in-out .2s;border-radius:1.5rem;column-gap:.5rem}.value-prop .text-side .paragraph:hover{background-color:#054386;color:#fff}.value-prop .text-side .paragraph:hover .value-prop-icon{color:#fff}.value-prop .text-side .paragraph:hover .value-prop-icon fa-icon{color:#fff}.value-prop .text-side .paragraph:hover .cta-icon{color:#fff;background-color:#054386}.value-prop .text-side .paragraph .cta-icon-container{display:grid;align-items:center}.value-prop .text-side .paragraph .cta-icon{align-self:center;justify-content:center;display:grid;font-size:3rem;transform:rotate(-45deg);color:#054386;background-color:#fff;border-radius:.7rem;padding:1rem;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon{display:grid;align-content:center;color:#054386}.value-prop .text-side .paragraph .value-prop-icon fa-icon{font-size:3rem}.value-prop .text-side .selected-paragraph{background-color:#054386;color:#fff}.value-prop .text-side .selected-paragraph .value-prop-icon{color:#fff}.value-prop .text-side .selected-paragraph .value-prop-icon fa-icon{color:#fff}.value-prop .text-side .selected-paragraph .cta-icon{transform:rotate(0)}.value-prop .text-side .selected-paragraph:hover .cta-icon{color:#054386;background-color:#fff}.value-prop .image-buttons-side{width:38%;display:grid;align-content:center}.value-prop .image-buttons-side img{width:100%;height:42rem;object-fit:cover;border-radius:1rem}.value-prop:nth-child(even){flex-direction:row-reverse}.value-prop:nth-child(even) .text-side .paragraph{padding:1rem;border-radius:.7rem;border:.1rem solid #E3E3E3}.value-prop:nth-child(even) .text-side .paragraph .value-prop-icon{text-align:center}@media only screen and (max-width: 56.25em){.value-prop{flex-wrap:wrap}.value-prop:nth-child(even){flex-direction:row}.value-prop:nth-child(even) .image-buttons-side{justify-self:center}.value-prop .text-side{width:100%;justify-self:left}.value-prop .text-side .value-prop-image{display:grid;width:100%}.value-prop .text-side .value-prop-image img{width:100%;height:35rem;object-fit:cover;border-radius:1rem}.value-prop .image-buttons-side{display:none}}\n"] }]
|
|
538
|
+
}], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
|
|
539
|
+
type: Input
|
|
540
|
+
}] } });
|
|
541
|
+
|
|
542
|
+
class ContactUsPageComponent {
|
|
543
|
+
constructor(dialog, breakpointObserver, fb) {
|
|
544
|
+
this.dialog = dialog;
|
|
545
|
+
this.breakpointObserver = breakpointObserver;
|
|
546
|
+
this.fb = fb;
|
|
547
|
+
this.subjects = [];
|
|
548
|
+
this.scrollMemberNumber = 2;
|
|
549
|
+
this.form = this.fb.group({
|
|
550
|
+
firstName: new FormControl(null),
|
|
551
|
+
lastName: new FormControl(null),
|
|
552
|
+
companyName: new FormControl(null),
|
|
553
|
+
email: new FormControl(null),
|
|
554
|
+
country: new FormControl(null),
|
|
555
|
+
phoneNumber: new FormControl(null),
|
|
556
|
+
subject: new FormControl(null),
|
|
557
|
+
message: new FormControl(null),
|
|
558
|
+
});
|
|
559
|
+
}
|
|
560
|
+
ngOnInit() {
|
|
561
|
+
this.setCurrentLocation();
|
|
562
|
+
this.breakpointObserver.observe([
|
|
563
|
+
"(max-width: 1200px) and (min-width:1076px)", "(max-width: 1075px) and (min-width:651px)",
|
|
564
|
+
"(max-width: 650px)"
|
|
565
|
+
]).subscribe((result) => {
|
|
566
|
+
if (result.breakpoints['(max-width: 1200px) and (min-width:1076px)']) {
|
|
567
|
+
this.isUnderTabRange = true;
|
|
568
|
+
this.isTabletSize = true;
|
|
569
|
+
this.membersToShow = 3;
|
|
570
|
+
this.scrollMemberNumber = 2;
|
|
571
|
+
}
|
|
572
|
+
else if (result.breakpoints['(max-width: 1075px) and (min-width:651px)']) {
|
|
573
|
+
this.isUnderTabRange = true;
|
|
574
|
+
this.membersToShow = 2;
|
|
575
|
+
this.scrollMemberNumber = 1;
|
|
576
|
+
this.isTabletSize = true;
|
|
577
|
+
}
|
|
578
|
+
else if (result.breakpoints['(max-width: 650px)']) {
|
|
579
|
+
this.isUnderTabRange = true;
|
|
580
|
+
this.membersToShow = 1;
|
|
581
|
+
this.scrollMemberNumber = 1;
|
|
582
|
+
this.isTabletSize = true;
|
|
583
|
+
}
|
|
584
|
+
else {
|
|
585
|
+
this.isTabletSize = false;
|
|
586
|
+
this.isUnderTabRange = false;
|
|
587
|
+
}
|
|
588
|
+
});
|
|
589
|
+
}
|
|
590
|
+
get firstName() {
|
|
591
|
+
return this.form.get('firstName');
|
|
592
|
+
}
|
|
593
|
+
get lastName() {
|
|
594
|
+
return this.form.get('lastName');
|
|
595
|
+
}
|
|
596
|
+
get companyName() {
|
|
597
|
+
return this.form.get('companyName');
|
|
598
|
+
}
|
|
599
|
+
get email() {
|
|
600
|
+
return this.form.get('email');
|
|
601
|
+
}
|
|
602
|
+
get country() {
|
|
603
|
+
return this.form.get('country');
|
|
604
|
+
}
|
|
605
|
+
get phoneNumber() {
|
|
606
|
+
return this.form.get('phoneNumber');
|
|
607
|
+
}
|
|
608
|
+
get subject() {
|
|
609
|
+
return this.form.get('subject');
|
|
610
|
+
}
|
|
611
|
+
get message() {
|
|
612
|
+
return this.form.get('message');
|
|
613
|
+
}
|
|
614
|
+
onClickSubmit() {
|
|
615
|
+
// this._ContactUsService.createContactUs(this.form.value).subscribe({
|
|
616
|
+
// next: (response) => {
|
|
617
|
+
// console.log("Contact Us Message Created", this.form.value);
|
|
618
|
+
// this.openDialog();
|
|
619
|
+
// },
|
|
620
|
+
// error: (error) => console.error("error", error)
|
|
621
|
+
// })
|
|
622
|
+
}
|
|
623
|
+
// Get Current Location Coordinates
|
|
624
|
+
setCurrentLocation() {
|
|
625
|
+
if ('geolocation' in navigator) {
|
|
626
|
+
navigator.geolocation.getCurrentPosition((position) => {
|
|
627
|
+
this.latitude = position.coords.latitude;
|
|
628
|
+
this.longitude = position.coords.longitude;
|
|
629
|
+
this.zoom = 15;
|
|
630
|
+
});
|
|
631
|
+
}
|
|
632
|
+
}
|
|
633
|
+
openDialog() {
|
|
634
|
+
const dialogRef = this.dialog.open(SuccessMessageDialogComponent);
|
|
635
|
+
dialogRef.afterClosed().subscribe(() => {
|
|
636
|
+
this.form.reset();
|
|
637
|
+
});
|
|
638
|
+
}
|
|
639
|
+
getSelectedOptionValue($event) {
|
|
640
|
+
this.selectedCode = $event.phone;
|
|
641
|
+
}
|
|
642
|
+
}
|
|
643
|
+
ContactUsPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ContactUsPageComponent, deps: [{ token: i1$2.MatDialog }, { token: i1$3.BreakpointObserver }, { token: i3$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
644
|
+
ContactUsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ContactUsPageComponent, selector: "contact-us-page", inputs: { subjects: "subjects", contactUsPageData: "contactUsPageData", apiPath: "apiPath" }, ngImport: i0, template: "<div class=\"page\">\n <div class=\"contact-us\">\n <div class=\"left-side\">\n <img [src]=\"contactUsPageData.backgroundImage\" alt=\"\" class=\"bg-image\">\n <div class=\"img-title\">\n {{contactUsPageData.imageTitle}}\n </div>\n <div class=\"bottom-img-side\" *ngIf=\"!isUnderTabRange\">\n <div class=\"logo\"><img [src]=\"contactUsPageData.ourLogo\" alt=\"JOOLER\"></div>\n <div class=\"img-description\">{{contactUsPageData.imageDescription}}\n </div>\n <div class=\"social-media-icons\">\n <!-- <social-media-icons class=\"social-media\" [color]=\"'#fff'\" [areIconsInFooter]=\"false\"></social-media-icons> -->\n </div>\n </div>\n </div>\n <div class=\"right-side\">\n <section-title title=\"Get In Touch\" [alignLeft]=\"true\"></section-title>\n <div class=\"content\">\n <div class=\"message-box\">\n <form [formGroup]=\"form\" (ngSubmit)=\"onClickSubmit()\">\n <div class=\"full-name-area\">\n <div class=\"first-name\">\n <span class=\"fields-labels\">First Name*</span>\n <input type=\"text\" formControlName=\"firstName\" class=\"input\" placeholder=\"First Name\" />\n </div>\n <div class=\"last-name\">\n <span class=\"fields-labels\">Last Name*</span>\n <input type=\"text\" formControlName=\"lastName\" class=\"input\" placeholder=\"Last Name\" />\n </div>\n </div>\n <span class=\"fields-labels\">Company Name*</span>\n <input type=\"text\" formControlName=\"companyName\" class=\"input\"\n placeholder=\"Your company name\" />\n <span class=\"fields-labels\">Email*</span>\n <input type=\"text\" formControlName=\"email\" class=\"input\" placeholder=\"name@example.com\" />\n <span class=\"fields-labels\">Phone Number</span>\n <div class=\"phone-number-section\">\n\n <div class=\"countries-list\">\n <choose-country-with-flag formControlName=\"country\"\n (change)=\"getSelectedOptionValue($event)\"></choose-country-with-flag>\n </div>\n <span class=\"code-section\">\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n <input class=\"code\" [value]=\"selectedCode? selectedCode: null\" placeholder=\"--\"\n [readOnly]=\"true\" />\n </span>\n <input formControlName=\"phoneNumber\" type=\"number\" class=\"phone-num-input\"\n placeholder=\"Phone Number\" />\n </div>\n <div class=\"subject\">\n <ng-select formControlName=\"subject\" [items]=\"subjects\" bindLabel=\"label\"\n placeholder=\"Subject\" bindValue=\"label\">\n </ng-select>\n </div>\n <textarea type=\"text\" formControlName=\"message\" placeholder=\"Message\" class=\"text-area\">\n </textarea>\n <div class=\"actions\">\n <button class=\"submit\" type=\"submit\" mat-raised-button=\"mat-raised-button\" color=\"primary\">\n Submit\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n <!-- <div class=\"our-locations-section\">\n <div class=\"locations-content\">\n <div class=\"headline\">\n {{contactUsPageData.locations.headline}}\n </div>\n <div class=\"title\">\n {{contactUsPageData.locations.title}}\n </div>\n <div class=\"lines-img\">\n <img src=\"../../../assets/images/lines-contact-us.png\" alt=\"\">\n </div>\n <div class=\"subtitle\">\n {{contactUsPageData.locations.subtitle}}\n </div>\n <div class=\"addresses\">\n <div class=\"address flexy\" *ngFor=\"let address of contactUsPageData.locations.addresses\">\n <div class=\"address-header\">\n <div class=\"icon\">\n <img [src]=\"contactUsPageData.locations.pinIconWhite\" alt=\"\">\n </div>\n <div class=\"location-name\">\n {{address.name}}\n </div>\n </div>\n <div class=\"building\">\n {{address.building}}\n </div>\n <div class=\"location-area\">\n {{address.locationArea}}\n </div>\n <div class=\"hours\">\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\n {{address.hours}}\n </div>\n <div class=\"cellular-number\">\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n {{address.phoneNumber}}\n </div>\n </div>\n <p-carousel *ngIf=\"isUnderTabRange\" class=\"carousel\" [value]=\"contactUsPageData.locations.addresses\"\n [numVisible]='membersToShow' [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizantol\"\n [circular]=\"true\">\n <ng-template let-address pTemplate=\"item\">\n <div class=\"address\">\n <div class=\"address-header\">\n <div class=\"icon\">\n <img [src]=\"contactUsPageData.locations.pinIconBlue\" alt=\"\">\n </div>\n <div class=\"location-name\">\n {{address.name}}\n </div>\n </div>\n <div class=\"building\">\n {{address.building}}\n </div>\n <div class=\"location-area\">\n {{address.locationArea}}\n </div>\n <div class=\"hours\">\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\n {{address.hours}}\n </div>\n <div class=\"cellular-number\">\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n {{address.phoneNumber}}\n </div>\n </div>\n </ng-template>\n </p-carousel>\n </div>\n </div>\n </div> -->\n</div>", styles: [".page{width:100%;height:100%;position:relative;padding:2rem}.page .contact-us{box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:1.5rem;margin:auto;width:55%;height:100%;display:grid;grid-template-columns:50% 50%;box-sizing:border-box;margin:5rem auto 15rem}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .right-side{padding:2rem 4rem;display:grid;grid-template-rows:auto auto auto auto;row-gap:1rem}.page .contact-us .right-side .phone-number-section{position:relative;display:flex;gap:.5rem;margin:.5rem 0rem}.page .contact-us .right-side .phone-number-section .countries-list{width:30%}.page .contact-us .right-side .phone-number-section .code-section{width:15%;margin-right:0rem;align-self:center;color:#000;position:relative;display:flex}.page .contact-us .right-side .phone-number-section .code-section *{color:#838b91}.page .contact-us .right-side .phone-number-section .code{text-align:center;height:4rem;width:100%;padding-left:2rem;margin-right:0vh}.page .contact-us .right-side .phone-number-section .code::placeholder{padding-left:1rem}.page .contact-us .right-side .phone-number-section fa-icon{align-self:center;position:absolute;left:.5rem;z-index:2}.page .contact-us .right-side .phone-number-section .phone-num-input{width:55%;margin-right:0rem;height:4rem}.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-outer-spin-button,.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page .contact-us .right-side .title{font-weight:800;color:#3d3d3d}.page .contact-us .right-side .subtitle{font-weight:500;font-size:1.9rem;color:#3d3d3d;padding:1rem 0rem}.page .contact-us .right-side .content{display:grid;grid-template-rows:auto auto auto auto}.page .contact-us .right-side .content .message-box{grid-row:1/span 2}.page .contact-us .right-side .content .message-box .text-area{height:15rem;resize:none;border-radius:.5rem;border:rgb(190,188,188) .1rem solid}.page .contact-us .right-side .content .message-box .text-area::placeholder{font-weight:500;color:#9e9e9e;font-size:1.2rem}.page .contact-us .right-side .content .message-box .text-area:focus-visible{outline:none}.page .contact-us .right-side .content .message-box .actions{margin:1rem 0rem}.page .contact-us .right-side .content .message-box .actions button{background-color:#043265;font-weight:500;font-size:1.4rem;border-radius:.3rem}.page .contact-us .right-side .content .message-box .input,.page .contact-us .right-side .content .message-box textarea{margin:1rem 0rem;width:100%;background-color:#fff}.page .contact-us .left-side{height:100%;position:relative;color:#fff}.page .contact-us .left-side .img-title{position:absolute;top:5%;left:calc(2% + 2rem);font-weight:700;font-size:3.6rem}.page .contact-us .left-side .bottom-img-side{position:absolute;top:75%;left:calc(2% + 2rem);margin:2rem 9rem 0rem 0rem}.page .contact-us .left-side .bottom-img-side .logo{width:20rem;height:4rem}.page .contact-us .left-side .bottom-img-side .logo img{width:10rem;height:4rem}.page .contact-us .left-side .bottom-img-side .img-description{margin-top:2rem}.page .contact-us .left-side .bg-image{width:100%;height:100%;border-radius:1.5rem 0rem 0rem 1.5rem}@media only screen and (max-width: 75em){.page .contact-us .left-side .bg-image{border-radius:1.5rem}}.page .carousel{display:none}.page .flexy{display:flex}.page .our-locations-section{width:100%;background-color:#26518b;padding:1.5rem;color:#fff}.page .our-locations-section .locations-content{width:95%;margin:auto}.page .our-locations-section .locations-content .headline{font-weight:500;font-size:2rem}.page .our-locations-section .locations-content .title{font-weight:700;padding:1rem 0rem;font-size:4rem}.page .our-locations-section .locations-content .subtitle{font-weight:500;padding:1rem 0rem}.page .our-locations-section .locations-content .lines-img{padding:1rem 0rem}.page .our-locations-section .locations-content .addresses{width:100%;display:flex;flex-direction:row;column-gap:2%}.page .our-locations-section .locations-content .addresses .address{flex-direction:column;row-gap:.7rem;width:22%;padding:1.5rem 0rem}.page .our-locations-section .locations-content .addresses .address .address-header{display:flex;flex-direction:column;row-gap:.7rem}.page .our-locations-section .locations-content .addresses .address .address-header img{width:3rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:1.9rem;font-weight:500}.page .our-locations-section .locations-content .addresses .address .location-area{width:95%}@media only screen and (min-width: 112.5em){.page .title{font-size:4.5rem}.page .contact-us{width:65%}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100%}}@media only screen and (max-width: 112.5em){.page .contact-us{width:75%;box-sizing:border-box}.page .contact-us .title{font-size:3.4rem}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100rem;border-radius:0rem 1.5rem 1.5rem 0rem}}@media only screen and (max-width: 112.5em) and (max-width: 1350px){.page .contact-us{width:80%}}@media only screen and (max-width: 112.5em) and (max-width: 1280px){.page .contact-us{width:86%}}@media only screen and (max-width: 1401px) and (min-width: 1201px){.page .our-locations-section .locations-content{width:auto}}@media only screen and (max-width: 75em){.page .contact-us{display:flex;flex-direction:column;top:3vh;width:100%;height:107rem;padding:5vh 2rem 10vh 2rem}.page .contact-us .right-side{padding:3rem 2rem;display:flex;flex-direction:column;height:80%}.page .contact-us .right-side .mat-mdc-card-content{display:block;padding:0 .2rem}.page .contact-us .left-side{height:25%}.page .contact-us .left-side .img-title{color:#fff}.page .contact-us .left-side img{height:100%;object-position:0rem -13rem;border-radius:1.5rem}.page .carousel{display:block;width:100%}.page .flexy{display:none}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{font-size:1.8rem;width:31rem;margin:auto;text-align:center;background-color:#fff;color:#26518b;height:27rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2rem;margin-bottom:1rem}.page .mat-mdc-card{box-shadow:none}}@media only screen and (max-width: 37.5em){.page .contact-us{height:auto;padding:5vh 2rem 0vh 2rem}.page .contact-us .full-name-area{display:block}.page .contact-us .first-name,.page .contact-us .last-name{width:100%}.page .contact-us .left-side{height:12rem}.page .contact-us .left-side .img-title{font-weight:600;font-size:3rem}.page .contact-us .left-side img{object-position:0rem -5rem}.page .contact-us .right-side .phone-number-section{flex-wrap:wrap}.page .contact-us .right-side .phone-number-section .countries-list{width:100%}.page .contact-us .right-side .phone-number-section .code-section{width:9rem}.page .contact-us .right-side .phone-number-section .phone-num-input{width:calc(100% - 9.5rem)}.page .our-locations-section .locations-content .addresses .address{width:27rem}}@media only screen and (max-width: 400px){.page .contact-us .left-side{height:10rem}.page .contact-us .left-side .img-title{font-weight:500;font-size:2.6rem}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{width:24.5rem;height:28rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2.2rem;margin-bottom:1rem;padding:0rem .4rem}.page .our-locations-section .locations-content .addresses .address .building,.page .our-locations-section .locations-content .addresses .address .location-area{padding:0rem .4rem}}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev:focus,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next:focus{outline:0 none;box-shadow:0 0 0 .2rem transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next{width:4rem;height:4rem;background-color:transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-icon{color:#fff;width:2rem;height:2rem}.page ::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#fff;width:2.7rem;transition:all ease-in-out .1s}.page ::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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["title", "subtitle", "alignLeft", "isDarkBg"] }] });
|
|
645
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ContactUsPageComponent, decorators: [{
|
|
646
|
+
type: Component,
|
|
647
|
+
args: [{ selector: 'contact-us-page', template: "<div class=\"page\">\n <div class=\"contact-us\">\n <div class=\"left-side\">\n <img [src]=\"contactUsPageData.backgroundImage\" alt=\"\" class=\"bg-image\">\n <div class=\"img-title\">\n {{contactUsPageData.imageTitle}}\n </div>\n <div class=\"bottom-img-side\" *ngIf=\"!isUnderTabRange\">\n <div class=\"logo\"><img [src]=\"contactUsPageData.ourLogo\" alt=\"JOOLER\"></div>\n <div class=\"img-description\">{{contactUsPageData.imageDescription}}\n </div>\n <div class=\"social-media-icons\">\n <!-- <social-media-icons class=\"social-media\" [color]=\"'#fff'\" [areIconsInFooter]=\"false\"></social-media-icons> -->\n </div>\n </div>\n </div>\n <div class=\"right-side\">\n <section-title title=\"Get In Touch\" [alignLeft]=\"true\"></section-title>\n <div class=\"content\">\n <div class=\"message-box\">\n <form [formGroup]=\"form\" (ngSubmit)=\"onClickSubmit()\">\n <div class=\"full-name-area\">\n <div class=\"first-name\">\n <span class=\"fields-labels\">First Name*</span>\n <input type=\"text\" formControlName=\"firstName\" class=\"input\" placeholder=\"First Name\" />\n </div>\n <div class=\"last-name\">\n <span class=\"fields-labels\">Last Name*</span>\n <input type=\"text\" formControlName=\"lastName\" class=\"input\" placeholder=\"Last Name\" />\n </div>\n </div>\n <span class=\"fields-labels\">Company Name*</span>\n <input type=\"text\" formControlName=\"companyName\" class=\"input\"\n placeholder=\"Your company name\" />\n <span class=\"fields-labels\">Email*</span>\n <input type=\"text\" formControlName=\"email\" class=\"input\" placeholder=\"name@example.com\" />\n <span class=\"fields-labels\">Phone Number</span>\n <div class=\"phone-number-section\">\n\n <div class=\"countries-list\">\n <choose-country-with-flag formControlName=\"country\"\n (change)=\"getSelectedOptionValue($event)\"></choose-country-with-flag>\n </div>\n <span class=\"code-section\">\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n <input class=\"code\" [value]=\"selectedCode? selectedCode: null\" placeholder=\"--\"\n [readOnly]=\"true\" />\n </span>\n <input formControlName=\"phoneNumber\" type=\"number\" class=\"phone-num-input\"\n placeholder=\"Phone Number\" />\n </div>\n <div class=\"subject\">\n <ng-select formControlName=\"subject\" [items]=\"subjects\" bindLabel=\"label\"\n placeholder=\"Subject\" bindValue=\"label\">\n </ng-select>\n </div>\n <textarea type=\"text\" formControlName=\"message\" placeholder=\"Message\" class=\"text-area\">\n </textarea>\n <div class=\"actions\">\n <button class=\"submit\" type=\"submit\" mat-raised-button=\"mat-raised-button\" color=\"primary\">\n Submit\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n <!-- <div class=\"our-locations-section\">\n <div class=\"locations-content\">\n <div class=\"headline\">\n {{contactUsPageData.locations.headline}}\n </div>\n <div class=\"title\">\n {{contactUsPageData.locations.title}}\n </div>\n <div class=\"lines-img\">\n <img src=\"../../../assets/images/lines-contact-us.png\" alt=\"\">\n </div>\n <div class=\"subtitle\">\n {{contactUsPageData.locations.subtitle}}\n </div>\n <div class=\"addresses\">\n <div class=\"address flexy\" *ngFor=\"let address of contactUsPageData.locations.addresses\">\n <div class=\"address-header\">\n <div class=\"icon\">\n <img [src]=\"contactUsPageData.locations.pinIconWhite\" alt=\"\">\n </div>\n <div class=\"location-name\">\n {{address.name}}\n </div>\n </div>\n <div class=\"building\">\n {{address.building}}\n </div>\n <div class=\"location-area\">\n {{address.locationArea}}\n </div>\n <div class=\"hours\">\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\n {{address.hours}}\n </div>\n <div class=\"cellular-number\">\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n {{address.phoneNumber}}\n </div>\n </div>\n <p-carousel *ngIf=\"isUnderTabRange\" class=\"carousel\" [value]=\"contactUsPageData.locations.addresses\"\n [numVisible]='membersToShow' [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizantol\"\n [circular]=\"true\">\n <ng-template let-address pTemplate=\"item\">\n <div class=\"address\">\n <div class=\"address-header\">\n <div class=\"icon\">\n <img [src]=\"contactUsPageData.locations.pinIconBlue\" alt=\"\">\n </div>\n <div class=\"location-name\">\n {{address.name}}\n </div>\n </div>\n <div class=\"building\">\n {{address.building}}\n </div>\n <div class=\"location-area\">\n {{address.locationArea}}\n </div>\n <div class=\"hours\">\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\n {{address.hours}}\n </div>\n <div class=\"cellular-number\">\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n {{address.phoneNumber}}\n </div>\n </div>\n </ng-template>\n </p-carousel>\n </div>\n </div>\n </div> -->\n</div>", styles: [".page{width:100%;height:100%;position:relative;padding:2rem}.page .contact-us{box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:1.5rem;margin:auto;width:55%;height:100%;display:grid;grid-template-columns:50% 50%;box-sizing:border-box;margin:5rem auto 15rem}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .right-side{padding:2rem 4rem;display:grid;grid-template-rows:auto auto auto auto;row-gap:1rem}.page .contact-us .right-side .phone-number-section{position:relative;display:flex;gap:.5rem;margin:.5rem 0rem}.page .contact-us .right-side .phone-number-section .countries-list{width:30%}.page .contact-us .right-side .phone-number-section .code-section{width:15%;margin-right:0rem;align-self:center;color:#000;position:relative;display:flex}.page .contact-us .right-side .phone-number-section .code-section *{color:#838b91}.page .contact-us .right-side .phone-number-section .code{text-align:center;height:4rem;width:100%;padding-left:2rem;margin-right:0vh}.page .contact-us .right-side .phone-number-section .code::placeholder{padding-left:1rem}.page .contact-us .right-side .phone-number-section fa-icon{align-self:center;position:absolute;left:.5rem;z-index:2}.page .contact-us .right-side .phone-number-section .phone-num-input{width:55%;margin-right:0rem;height:4rem}.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-outer-spin-button,.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page .contact-us .right-side .title{font-weight:800;color:#3d3d3d}.page .contact-us .right-side .subtitle{font-weight:500;font-size:1.9rem;color:#3d3d3d;padding:1rem 0rem}.page .contact-us .right-side .content{display:grid;grid-template-rows:auto auto auto auto}.page .contact-us .right-side .content .message-box{grid-row:1/span 2}.page .contact-us .right-side .content .message-box .text-area{height:15rem;resize:none;border-radius:.5rem;border:rgb(190,188,188) .1rem solid}.page .contact-us .right-side .content .message-box .text-area::placeholder{font-weight:500;color:#9e9e9e;font-size:1.2rem}.page .contact-us .right-side .content .message-box .text-area:focus-visible{outline:none}.page .contact-us .right-side .content .message-box .actions{margin:1rem 0rem}.page .contact-us .right-side .content .message-box .actions button{background-color:#043265;font-weight:500;font-size:1.4rem;border-radius:.3rem}.page .contact-us .right-side .content .message-box .input,.page .contact-us .right-side .content .message-box textarea{margin:1rem 0rem;width:100%;background-color:#fff}.page .contact-us .left-side{height:100%;position:relative;color:#fff}.page .contact-us .left-side .img-title{position:absolute;top:5%;left:calc(2% + 2rem);font-weight:700;font-size:3.6rem}.page .contact-us .left-side .bottom-img-side{position:absolute;top:75%;left:calc(2% + 2rem);margin:2rem 9rem 0rem 0rem}.page .contact-us .left-side .bottom-img-side .logo{width:20rem;height:4rem}.page .contact-us .left-side .bottom-img-side .logo img{width:10rem;height:4rem}.page .contact-us .left-side .bottom-img-side .img-description{margin-top:2rem}.page .contact-us .left-side .bg-image{width:100%;height:100%;border-radius:1.5rem 0rem 0rem 1.5rem}@media only screen and (max-width: 75em){.page .contact-us .left-side .bg-image{border-radius:1.5rem}}.page .carousel{display:none}.page .flexy{display:flex}.page .our-locations-section{width:100%;background-color:#26518b;padding:1.5rem;color:#fff}.page .our-locations-section .locations-content{width:95%;margin:auto}.page .our-locations-section .locations-content .headline{font-weight:500;font-size:2rem}.page .our-locations-section .locations-content .title{font-weight:700;padding:1rem 0rem;font-size:4rem}.page .our-locations-section .locations-content .subtitle{font-weight:500;padding:1rem 0rem}.page .our-locations-section .locations-content .lines-img{padding:1rem 0rem}.page .our-locations-section .locations-content .addresses{width:100%;display:flex;flex-direction:row;column-gap:2%}.page .our-locations-section .locations-content .addresses .address{flex-direction:column;row-gap:.7rem;width:22%;padding:1.5rem 0rem}.page .our-locations-section .locations-content .addresses .address .address-header{display:flex;flex-direction:column;row-gap:.7rem}.page .our-locations-section .locations-content .addresses .address .address-header img{width:3rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:1.9rem;font-weight:500}.page .our-locations-section .locations-content .addresses .address .location-area{width:95%}@media only screen and (min-width: 112.5em){.page .title{font-size:4.5rem}.page .contact-us{width:65%}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100%}}@media only screen and (max-width: 112.5em){.page .contact-us{width:75%;box-sizing:border-box}.page .contact-us .title{font-size:3.4rem}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100rem;border-radius:0rem 1.5rem 1.5rem 0rem}}@media only screen and (max-width: 112.5em) and (max-width: 1350px){.page .contact-us{width:80%}}@media only screen and (max-width: 112.5em) and (max-width: 1280px){.page .contact-us{width:86%}}@media only screen and (max-width: 1401px) and (min-width: 1201px){.page .our-locations-section .locations-content{width:auto}}@media only screen and (max-width: 75em){.page .contact-us{display:flex;flex-direction:column;top:3vh;width:100%;height:107rem;padding:5vh 2rem 10vh 2rem}.page .contact-us .right-side{padding:3rem 2rem;display:flex;flex-direction:column;height:80%}.page .contact-us .right-side .mat-mdc-card-content{display:block;padding:0 .2rem}.page .contact-us .left-side{height:25%}.page .contact-us .left-side .img-title{color:#fff}.page .contact-us .left-side img{height:100%;object-position:0rem -13rem;border-radius:1.5rem}.page .carousel{display:block;width:100%}.page .flexy{display:none}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{font-size:1.8rem;width:31rem;margin:auto;text-align:center;background-color:#fff;color:#26518b;height:27rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2rem;margin-bottom:1rem}.page .mat-mdc-card{box-shadow:none}}@media only screen and (max-width: 37.5em){.page .contact-us{height:auto;padding:5vh 2rem 0vh 2rem}.page .contact-us .full-name-area{display:block}.page .contact-us .first-name,.page .contact-us .last-name{width:100%}.page .contact-us .left-side{height:12rem}.page .contact-us .left-side .img-title{font-weight:600;font-size:3rem}.page .contact-us .left-side img{object-position:0rem -5rem}.page .contact-us .right-side .phone-number-section{flex-wrap:wrap}.page .contact-us .right-side .phone-number-section .countries-list{width:100%}.page .contact-us .right-side .phone-number-section .code-section{width:9rem}.page .contact-us .right-side .phone-number-section .phone-num-input{width:calc(100% - 9.5rem)}.page .our-locations-section .locations-content .addresses .address{width:27rem}}@media only screen and (max-width: 400px){.page .contact-us .left-side{height:10rem}.page .contact-us .left-side .img-title{font-weight:500;font-size:2.6rem}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{width:24.5rem;height:28rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2.2rem;margin-bottom:1rem;padding:0rem .4rem}.page .our-locations-section .locations-content .addresses .address .building,.page .our-locations-section .locations-content .addresses .address .location-area{padding:0rem .4rem}}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev:focus,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next:focus{outline:0 none;box-shadow:0 0 0 .2rem transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next{width:4rem;height:4rem;background-color:transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-icon{color:#fff;width:2rem;height:2rem}.page ::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#fff;width:2.7rem;transition:all ease-in-out .1s}.page ::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"] }]
|
|
648
|
+
}], ctorParameters: function () { return [{ type: i1$2.MatDialog }, { type: i1$3.BreakpointObserver }, { type: i3$2.FormBuilder }]; }, propDecorators: { subjects: [{
|
|
649
|
+
type: Input
|
|
650
|
+
}], contactUsPageData: [{
|
|
651
|
+
type: Input
|
|
652
|
+
}], apiPath: [{
|
|
653
|
+
type: Input
|
|
654
|
+
}] } });
|
|
655
|
+
|
|
484
656
|
class JoolerWebsitesSharedModule {
|
|
485
657
|
}
|
|
486
658
|
JoolerWebsitesSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: JoolerWebsitesSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -497,11 +669,16 @@ JoolerWebsitesSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
|
|
|
497
669
|
ValuesComponent,
|
|
498
670
|
OurClientsComponent,
|
|
499
671
|
OurClientListingComponent,
|
|
500
|
-
PageSectionWithMultipleCardsComponent
|
|
672
|
+
PageSectionWithMultipleCardsComponent,
|
|
673
|
+
CallToActionSectionTwoComponent,
|
|
674
|
+
ValuePropsSectionsComponent,
|
|
675
|
+
ContactUsPageComponent], imports: [CommonModule,
|
|
501
676
|
AppMaterialModule,
|
|
502
677
|
FontAwesomeSharedModule,
|
|
503
678
|
GalleriaModule,
|
|
504
|
-
CarouselModule
|
|
679
|
+
CarouselModule,
|
|
680
|
+
ReactiveFormsModule,
|
|
681
|
+
NgSelectModule], exports: [AppMaterialModule,
|
|
505
682
|
SectionTitleComponent,
|
|
506
683
|
PageSectionStyleTenComponent,
|
|
507
684
|
FontAwesomeSharedModule,
|
|
@@ -516,12 +693,17 @@ JoolerWebsitesSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
|
|
|
516
693
|
ValuesComponent,
|
|
517
694
|
OurClientsComponent,
|
|
518
695
|
OurClientListingComponent,
|
|
519
|
-
PageSectionWithMultipleCardsComponent
|
|
696
|
+
PageSectionWithMultipleCardsComponent,
|
|
697
|
+
CallToActionSectionTwoComponent,
|
|
698
|
+
ValuePropsSectionsComponent,
|
|
699
|
+
ContactUsPageComponent] });
|
|
520
700
|
JoolerWebsitesSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: JoolerWebsitesSharedModule, imports: [CommonModule,
|
|
521
701
|
AppMaterialModule,
|
|
522
702
|
FontAwesomeSharedModule,
|
|
523
703
|
GalleriaModule,
|
|
524
|
-
CarouselModule,
|
|
704
|
+
CarouselModule,
|
|
705
|
+
ReactiveFormsModule,
|
|
706
|
+
NgSelectModule, AppMaterialModule,
|
|
525
707
|
FontAwesomeSharedModule] });
|
|
526
708
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: JoolerWebsitesSharedModule, decorators: [{
|
|
527
709
|
type: NgModule,
|
|
@@ -540,14 +722,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
540
722
|
ValuesComponent,
|
|
541
723
|
OurClientsComponent,
|
|
542
724
|
OurClientListingComponent,
|
|
543
|
-
PageSectionWithMultipleCardsComponent
|
|
725
|
+
PageSectionWithMultipleCardsComponent,
|
|
726
|
+
CallToActionSectionTwoComponent,
|
|
727
|
+
ValuePropsSectionsComponent,
|
|
728
|
+
ContactUsPageComponent,
|
|
544
729
|
],
|
|
545
730
|
imports: [
|
|
546
731
|
CommonModule,
|
|
547
732
|
AppMaterialModule,
|
|
548
733
|
FontAwesomeSharedModule,
|
|
549
734
|
GalleriaModule,
|
|
550
|
-
CarouselModule
|
|
735
|
+
CarouselModule,
|
|
736
|
+
ReactiveFormsModule,
|
|
737
|
+
NgSelectModule
|
|
551
738
|
],
|
|
552
739
|
exports: [
|
|
553
740
|
AppMaterialModule,
|
|
@@ -565,7 +752,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
565
752
|
ValuesComponent,
|
|
566
753
|
OurClientsComponent,
|
|
567
754
|
OurClientListingComponent,
|
|
568
|
-
PageSectionWithMultipleCardsComponent
|
|
755
|
+
PageSectionWithMultipleCardsComponent,
|
|
756
|
+
CallToActionSectionTwoComponent,
|
|
757
|
+
ValuePropsSectionsComponent,
|
|
758
|
+
ContactUsPageComponent
|
|
569
759
|
]
|
|
570
760
|
}]
|
|
571
761
|
}] });
|
|
@@ -635,6 +825,12 @@ var UserType;
|
|
|
635
825
|
class User {
|
|
636
826
|
}
|
|
637
827
|
|
|
828
|
+
class CallToActionSectionTwo {
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
class LinkText {
|
|
832
|
+
}
|
|
833
|
+
|
|
638
834
|
/*
|
|
639
835
|
* Public API Surface of jooler-websites-shared
|
|
640
836
|
*/
|
|
@@ -643,5 +839,5 @@ class User {
|
|
|
643
839
|
* Generated bundle index. Do not edit.
|
|
644
840
|
*/
|
|
645
841
|
|
|
646
|
-
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 };
|
|
842
|
+
export { Account, AccountType, Achievement, Achievements, AchievementsComponent, Address, CallToActionSectionComponent, CallToActionSectionData, CallToActionSectionTwo, CallToActionSectionTwoComponent, City, ContactUsPageComponent, Country, GetStartedCTAComponent, ImageGalleryModal, ImageSection, ImageSectionAction, JoolerWebsitesSharedModule, LinkText, OurClientListingComponent, OurClientsComponent, PageSection, PageSectionAction, PageSectionStyleFive, PageSectionStyleTenComponent, PageSectionStyleThirteen, PageSectionStyleThirteenComponent, PageSectionWithMultipleCardsComponent, PricingPlansComponent, SectionTitleComponent, ServicePlan, SuccessMessageDialogComponent, TeamComponent, TeamMember, TeamSection, User, UserType, ValuePropsSectionsComponent, ValuesComponent };
|
|
647
843
|
//# sourceMappingURL=jooler-websites-shared.mjs.map
|