feature-libs/storefinder/components/store-finder-list-item/store-finder-list-item.component.ts
| selector | cx-store-finder-list-item |
| templateUrl | ./store-finder-list-item.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor(storeFinderService: StoreFinderService)
|
||||||
|
Parameters :
|
| displayDistance | |
Type : boolean
|
|
| listOrderLabel | |
Type : any
|
|
| locationIndex | |
Type : number | null
|
|
Default value : null
|
|
| useClickEvent | |
Type : boolean
|
|
| location | |
Type : any
|
|
|
Inherited from
AbstractStoreItemComponent
|
|
|
Defined in
AbstractStoreItemComponent:8
|
|
| storeItemClick | |
Type : EventEmitter<number>
|
|
| handleStoreItemClick |
handleStoreItemClick()
|
|
Returns :
void
|
| onKey | ||||||
onKey(event: KeyboardEvent)
|
||||||
|
Parameters :
Returns :
void
|
| getDirections | ||||||
getDirections(location: any)
|
||||||
|
Inherited from
AbstractStoreItemComponent
|
||||||
|
Defined in
AbstractStoreItemComponent:12
|
||||||
|
Parameters :
Returns :
string
|
| getFormattedStoreAddress | ||||||
getFormattedStoreAddress(addressParts: string[])
|
||||||
|
Inherited from
AbstractStoreItemComponent
|
||||||
|
Defined in
AbstractStoreItemComponent:19
|
||||||
|
Parameters :
Returns :
string
|
| displayDistance |
Type : boolean
|
Decorators :
@Input()
|
| listOrderLabel |
Type : any
|
Decorators :
@Input()
|
| locationIndex |
Type : number | null
|
Default value : null
|
Decorators :
@Input()
|
| storeItemClick |
Type : EventEmitter<number>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
| useClickEvent |
Type : boolean
|
Decorators :
@Input()
|
| location |
Decorators :
@Input()
|
|
Inherited from
AbstractStoreItemComponent
|
|
Defined in
AbstractStoreItemComponent:8
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { StoreFinderService } from '@spartacus/storefinder/core';
import { AbstractStoreItemComponent } from '../abstract-store-item/abstract-store-item.component';
@Component({
selector: 'cx-store-finder-list-item',
templateUrl: './store-finder-list-item.component.html',
})
export class StoreFinderListItemComponent extends AbstractStoreItemComponent {
@Input()
locationIndex: number | null = null;
@Input()
listOrderLabel: any;
@Input()
displayDistance: boolean;
@Input()
useClickEvent: boolean;
@Output()
storeItemClick: EventEmitter<number> = new EventEmitter();
constructor(protected storeFinderService: StoreFinderService) {
super(storeFinderService);
}
handleStoreItemClick() {
if (this.locationIndex !== null) {
this.storeItemClick.emit(this.locationIndex);
}
}
onKey(event: KeyboardEvent) {
if (event.key === 'Enter') {
this.handleStoreItemClick();
}
}
}
<ng-container>
<div>
<div class="cx-store-list-order">
{{ listOrderLabel }}
</div>
<h2 class="cx-store-name">
<button
*ngIf="useClickEvent"
(click)="handleStoreItemClick()"
(keyup)="onKey($event)"
>
{{ location.displayName || location.name }}
</button>
<a *ngIf="!useClickEvent" [routerLink]="[location.name]">{{
location.displayName || location.name
}}</a>
</h2>
<div class="cx-store-address" *ngIf="location.address">
<div class="cx-store-address-street">
{{ location.address.line1 }} {{ location.address.line2 }}
</div>
{{
getFormattedStoreAddress([
location.address.town,
location.address.postalCode,
location.address.country.isocode
])
}}
<div
class="cx-store-distance"
*ngIf="location.formattedDistance && displayDistance"
>
{{ location.formattedDistance }}
</div>
</div>
<a
href="{{ getDirections(location) }}"
target="_blank"
class="btn btn-sm btn-action btn-block cx-button"
(click)="$event.stopPropagation()"
[attr.aria-label]="'storeFinder.ariaLabelGetDirections' | cxTranslate"
>{{ 'storeFinder.getDirections' | cxTranslate }}</a
>
</div>
</ng-container>