Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
import { Prop, Element, Component, ComponentInterface, Host, h, State } from '@stencil/core';
import { HTMLStencilElement } from '@stencil/core/internal';
@Component({
tag: 'dmp-slottedaddresscard',
shadow: false
})
export class DmpSlottedaddresscard implements ComponentInterface {
/** Optional: Make the phonenumber a link for dialing out if true */
@Prop({ attribute: 'phonenumberislink' }) phonenumberIslink: boolean;
/** Optional: Make the address a link for openin new window in Google maps if true */
@Prop({ attribute: 'addressislink' }) addressIslink: boolean;
/** Optional: Lattitude of the location */
@Prop() lat: string;
/** Optional: Longitude of the location */
@Prop() lon: string;
imgDivElement!: HTMLDivElement;
@State() showLocation: boolean = false;
@Element() hostElement: HTMLStencilElement;
hasImage: boolean;
componentWillLoad() {
this.hasImage = !!this.hostElement.querySelector('[slot="image"]');
}
private handleFlipClick = () => {
this.showLocation = !this.showLocation;
};
private handleAddressClick = () => {
let address = (this.hostElement.querySelector('[slot="address"]') as HTMLElement)?.innerHTML;
if (address) {
window.open(`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`, '_blank');
}
};
render() {
let name = (this.hostElement.querySelector('[slot="name"]') as HTMLElement)?.innerHTML;
return (
<Host>
<div class="block bg-white rounded-lg shadow-xl p-6 overflow-hidden m-2">
<div class={this.showLocation ? 'hidden' : ''}>
<div class="md:flex">
<div
ref={el => (this.imgDivElement = el as HTMLDivElement)}
hidden={!this.hasImage}
class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6 overflow-hidden"
>
<slot name="image" />
</div>
<div class="text-center md:text-left">
<h2 class="text-2xl">
<slot name="name" />
</h2>
{this.addressIslink ? (
<div class="text-purple-500 cursor-pointer underline" onClick={this.handleAddressClick}>
<slot name="address" />
</div>
) : (
<div class="text-red-500">
<slot name="address" />
</div>
)}
<div class="text-gray-600">
<slot name="email" />
</div>
{this.phonenumberIslink ? (
<a href="tel:{this.phonenumber}">
<div class="text-gray-600 underline">
<slot name="phonenumber" />
</div>
</a>
) : (
<div class="text-gray-600">
<slot name="phonenumber" />
</div>
)}
</div>
</div>
<div class="block">
<slot name="block" />
</div>
{this.lat && this.lon && (
<div class="mt-4">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
onClick={this.handleFlipClick}
>
Show location
</button>
</div>
)}
</div>
{this.showLocation && this.lat && this.lon && (
<div class="text-center md:text-left">
<h2 class="text-2xl">{name? `Location of ${name}` : 'Location'}</h2>
<img
height={200}
width={400}
src={`https://atlas.microsoft.com/map/static/png?api-version=1.0&width=400&height=200&subscription-key=YB-HvmHxVoholF2COBlkb92ai4iT_yIdJ20umQFlx0o&center=${this.lon},${this.lat}&pins=default||${this.lon} ${this.lat}`}
/>
<button
class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
onClick={this.handleFlipClick}
>
Show card
</button>
</div>
)}
</div>
</Host>
);
}
}