File
Implements
Metadata
| selector |
dist-office-search-widget |
| styleUrls |
./dist-office-search-widget.component.scss |
| templateUrl |
./dist-office-search-widget.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
HostBindings
|
|
|
Methods
|
Private
onChangeLocation
|
onChangeLocation()
|
|
|
Updates the button URL when the location box changes value via user input or the autocomplete dropdown
|
|
Public
autocomplete
|
Type : google.maps.places.Autocomplete
|
|
|
|
Readonly
classMap
|
Type : object
|
Default value : {
'DistOfficeSearchWidgetWhiteMain': {
content: 'widget-white',
description: 'col-lg-8 col-md-12 col-sm-12'
},
'DistOfficeSearchWidgetLightGreyMain': {
content: 'widget-light-grey',
description: 'col-lg-3 col-md-12 col-sm-12'
}
}
|
|
|
|
descriptionClass
|
Type : string
|
|
|
|
locationPlaceholderLabel
|
Type : string
|
|
|
|
Public
mapsAPILoader
|
Type : MapsAPILoader
|
|
|
|
searchElementRef
|
Decorators :
@ViewChild('search')
|
|
|
import { Component, OnInit, Input, HostBinding, ChangeDetectorRef, ViewChild } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
import { ComponentLinkService } from 'src/app/core/services/component-link-service/component-link.service';
import { LabelService } from 'src/app/core/services/label-service/label-service.service';
@Component({
selector: 'dist-office-search-widget',
templateUrl: './dist-office-search-widget.component.html',
styleUrls: ['./dist-office-search-widget.component.scss']
})
export class DistOfficeSearchWidgetComponent implements OnInit {
@Input() entity: any;
@HostBinding('class') get class() { return 'col-md-12 space-between'; }
// For the location box
public autocomplete: google.maps.places.Autocomplete;
contentClass: string;
descriptionClass: string;
locationPlaceholderLabel: string;
buttonPage: string;
searchParams: string;
@ViewChild('search') searchElementRef;
readonly classMap = {
'DistOfficeSearchWidgetWhiteMain': {
content: 'widget-white',
description: 'col-lg-8 col-md-12 col-sm-12'
},
'DistOfficeSearchWidgetLightGreyMain': {
content: 'widget-light-grey',
description: 'col-lg-3 col-md-12 col-sm-12'
}
};
constructor(
public mapsAPILoader: MapsAPILoader,
private linkService: ComponentLinkService,
public changeDetectorRef: ChangeDetectorRef,
private labelService: LabelService
) { }
ngOnInit() {
this.contentClass = this.classMap[this.entity.MvcData.ViewName].content;
this.descriptionClass = this.classMap[this.entity.MvcData.ViewName].description;
this.buttonPage = this.linkService.getUrl(this.entity.LinkTarget);
this.labelService.getLabel('locationPlaceholder').then(label => this.locationPlaceholderLabel = label);
this.mapsAPILoader.load().then(() => {
this.autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
types: ['geocode', 'establishment']
});
this.searchElementRef.nativeElement.onchange = () => this.onChangeLocation();
this.autocomplete.addListener('place_changed', () => this.onChangeLocation());
});
}
/** Updates the button URL when the location box changes value via user input or the autocomplete dropdown */
private onChangeLocation() {
this.searchParams = encodeURIComponent(this.searchElementRef.nativeElement.value);
this.changeDetectorRef.detectChanges();
}
}
<div class="content {{ contentClass }}">
<h2>{{ entity.Title }}</h2>
<div class="body">
<div class="description {{ descriptionClass }}">
{{ entity.Description }}
</div>
<div class="search-container">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<img src="/v2/assets/img/map-pointer.png" alt="map-pointer">
</span>
</div>
<input select-text-on-focus #search [placeholder]="locationPlaceholderLabel" autocorrect="off" autocapitalize="off"
spellcheck="off" type="search" class="form-control search-box-query">
</div>
<a [routerLink]="buttonPage" [queryParams]="{'search': searchParams}" class="btn btn-green">{{ entity.LinkTarget.LinkButtonTitleText }}</a>
</div>
</div>
</div>
@import "src/app/styles/helpers";
.content {
padding: calc-rem(32);
@include media-breakpoint-up(sm) {
padding: calc-rem(64);
}
h2 {
margin-bottom: calc-rem(48);
}
.body {
display: flex;
flex-direction: column;
.description {
padding: 0;
flex: 1 0 auto;
}
.search-container {
margin-top: calc-rem(48);
display: flex;
flex-direction: column;
@include media-breakpoint-up(md) {
flex-direction: row;
}
.input-group {
height: calc-rem(41);
margin-bottom: calc-rem(12);
@include media-breakpoint-up(md) {
width: calc-rem(350);
margin-bottom: 0;
}
&-text {
background-color: #F6F6F6; // Color of image background.
padding: 0 calc-rem(8);
border: 1px solid $light-slate;
height: 100%;
img {
width: calc-rem(30);
height: calc-rem(24);
}
}
.search-box-query {
height: 100%;
padding: calc-rem(8);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid $light-slate;
border-left: none;
&:focus {
box-shadow: none;
}
}
}
.btn {
padding: calc-rem(7) calc-rem(24);
margin-left: 0;
display: inline-table;
width: 100%;
@include media-breakpoint-up(md) {
margin-top: 0;
margin-left: calc-rem(32);
width: auto;
}
}
}
}
}
.widget-light-grey {
background-color: $off-white;
@include media-breakpoint-up(lg) {
.body {
flex-direction: row;
.search-container {
margin-top: 0;
margin-left: calc-rem(32);
}
}
}
}
Legend
Html element with directive