@jooler/jooler-websites-shared 0.0.35 → 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/contact-us-page/contact-us-page.component.mjs +126 -0
- package/esm2020/lib/jooler-websites-shared.module.mjs +21 -8
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/jooler-websites-shared.mjs +136 -8
- package/fesm2015/jooler-websites-shared.mjs.map +1 -1
- package/fesm2020/jooler-websites-shared.mjs +136 -8
- package/fesm2020/jooler-websites-shared.mjs.map +1 -1
- package/lib/contact-us-page/contact-us-page.component.d.ts +49 -0
- package/lib/jooler-websites-shared.module.d.ts +9 -6
- package/package.json +1 -1
- package/public-api.d.ts +1 -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() {
|
|
@@ -535,6 +539,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
535
539
|
type: Input
|
|
536
540
|
}] } });
|
|
537
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
|
+
|
|
538
656
|
class JoolerWebsitesSharedModule {
|
|
539
657
|
}
|
|
540
658
|
JoolerWebsitesSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: JoolerWebsitesSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -553,11 +671,14 @@ JoolerWebsitesSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
|
|
|
553
671
|
OurClientListingComponent,
|
|
554
672
|
PageSectionWithMultipleCardsComponent,
|
|
555
673
|
CallToActionSectionTwoComponent,
|
|
556
|
-
ValuePropsSectionsComponent
|
|
674
|
+
ValuePropsSectionsComponent,
|
|
675
|
+
ContactUsPageComponent], imports: [CommonModule,
|
|
557
676
|
AppMaterialModule,
|
|
558
677
|
FontAwesomeSharedModule,
|
|
559
678
|
GalleriaModule,
|
|
560
|
-
CarouselModule
|
|
679
|
+
CarouselModule,
|
|
680
|
+
ReactiveFormsModule,
|
|
681
|
+
NgSelectModule], exports: [AppMaterialModule,
|
|
561
682
|
SectionTitleComponent,
|
|
562
683
|
PageSectionStyleTenComponent,
|
|
563
684
|
FontAwesomeSharedModule,
|
|
@@ -574,12 +695,15 @@ JoolerWebsitesSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
|
|
|
574
695
|
OurClientListingComponent,
|
|
575
696
|
PageSectionWithMultipleCardsComponent,
|
|
576
697
|
CallToActionSectionTwoComponent,
|
|
577
|
-
ValuePropsSectionsComponent
|
|
698
|
+
ValuePropsSectionsComponent,
|
|
699
|
+
ContactUsPageComponent] });
|
|
578
700
|
JoolerWebsitesSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: JoolerWebsitesSharedModule, imports: [CommonModule,
|
|
579
701
|
AppMaterialModule,
|
|
580
702
|
FontAwesomeSharedModule,
|
|
581
703
|
GalleriaModule,
|
|
582
|
-
CarouselModule,
|
|
704
|
+
CarouselModule,
|
|
705
|
+
ReactiveFormsModule,
|
|
706
|
+
NgSelectModule, AppMaterialModule,
|
|
583
707
|
FontAwesomeSharedModule] });
|
|
584
708
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: JoolerWebsitesSharedModule, decorators: [{
|
|
585
709
|
type: NgModule,
|
|
@@ -600,14 +724,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
600
724
|
OurClientListingComponent,
|
|
601
725
|
PageSectionWithMultipleCardsComponent,
|
|
602
726
|
CallToActionSectionTwoComponent,
|
|
603
|
-
ValuePropsSectionsComponent
|
|
727
|
+
ValuePropsSectionsComponent,
|
|
728
|
+
ContactUsPageComponent,
|
|
604
729
|
],
|
|
605
730
|
imports: [
|
|
606
731
|
CommonModule,
|
|
607
732
|
AppMaterialModule,
|
|
608
733
|
FontAwesomeSharedModule,
|
|
609
734
|
GalleriaModule,
|
|
610
|
-
CarouselModule
|
|
735
|
+
CarouselModule,
|
|
736
|
+
ReactiveFormsModule,
|
|
737
|
+
NgSelectModule
|
|
611
738
|
],
|
|
612
739
|
exports: [
|
|
613
740
|
AppMaterialModule,
|
|
@@ -627,7 +754,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
627
754
|
OurClientListingComponent,
|
|
628
755
|
PageSectionWithMultipleCardsComponent,
|
|
629
756
|
CallToActionSectionTwoComponent,
|
|
630
|
-
ValuePropsSectionsComponent
|
|
757
|
+
ValuePropsSectionsComponent,
|
|
758
|
+
ContactUsPageComponent
|
|
631
759
|
]
|
|
632
760
|
}]
|
|
633
761
|
}] });
|
|
@@ -711,5 +839,5 @@ class LinkText {
|
|
|
711
839
|
* Generated bundle index. Do not edit.
|
|
712
840
|
*/
|
|
713
841
|
|
|
714
|
-
export { Account, AccountType, Achievement, Achievements, AchievementsComponent, Address, CallToActionSectionComponent, CallToActionSectionData, CallToActionSectionTwo, CallToActionSectionTwoComponent, City, 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 };
|
|
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 };
|
|
715
843
|
//# sourceMappingURL=jooler-websites-shared.mjs.map
|