blob: fb6372c83fdf0039cc7fd9013ebdd52c2017b3a1 [file] [log] [blame]
/**
* @license
* Copyright 2023 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import '../gr-tooltip-content/gr-tooltip-content';
import {LitElement, css, html, nothing} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import {WebLinkInfo} from '../../../api/rest-api';
import {ifDefined} from 'lit/directives/if-defined.js';
import {when} from 'lit/directives/when.js';
declare global {
interface HTMLElementTagNameMap {
'gr-weblink': GrWeblink;
}
}
@customElement('gr-weblink')
export class GrWeblink extends LitElement {
@property({type: Object})
info?: WebLinkInfo;
@property({type: Boolean})
imageAndText = false;
static override get styles() {
return [
css`
:host {
display: inline-block;
vertical-align: top;
line-height: var(--line-height-normal);
margin-right: var(--spacing-s);
}
a {
color: var(--link-color);
}
:host([imageAndText]) img {
margin-right: var(--spacing-s);
}
img {
vertical-align: top;
width: var(--line-height-normal);
height: var(--line-height-normal);
}
`,
];
}
override render() {
if (!this.info?.url) return nothing;
if (!this.info?.name) return nothing;
return html`
<a href=${this.info.url} rel="noopener" target="_blank">
<gr-tooltip-content
title=${ifDefined(this.info.tooltip)}
?has-tooltip=${this.info.tooltip !== undefined}
>
${when(
this.info.image_url,
() => html`<img src=${this.info!.image_url!} />`
)}${when(
!this.info.image_url || this.imageAndText,
() => html`<span>${this.info!.name}</span>`
)}
</gr-tooltip-content>
</a>
`;
}
}