182 lines
4.3 KiB
TypeScript
182 lines
4.3 KiB
TypeScript
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
|
import * as domtools from '@designestate/dees-domtools';
|
|
|
|
@customElement('lele-card')
|
|
export class LeleCard extends LitElement {
|
|
public static demo = () => html`
|
|
<lele-card
|
|
imgsrc="https://assetbroker.lossless.one/brandfiles/00general/square_lossless.svg"
|
|
.links="${[
|
|
{
|
|
text: 'Visit Website',
|
|
url: 'https://lossless.com'
|
|
}
|
|
]}"
|
|
.tabledata="${[
|
|
{
|
|
key: 'name',
|
|
value: 'Lossless GmbH'
|
|
},
|
|
{
|
|
key: 'domain',
|
|
value: 'https://lossless.com'
|
|
}
|
|
]}"
|
|
></lele-card>
|
|
`;
|
|
|
|
@property()
|
|
public heading: string = 'loading...';
|
|
|
|
@property()
|
|
public imgsrc: string = 'https://assetbroker.lossless.one/brandfiles/00general/square_lossless.svg';
|
|
|
|
@property({type: Array})
|
|
public links: {text: string; url: string}[] = [];
|
|
|
|
@property({type: Array})
|
|
public tabledata: {key: string, value: string}[] = [];
|
|
|
|
constructor() {
|
|
super();
|
|
domtools.DomTools.setupDomTools();
|
|
}
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
${domtools.elementBasic.styles}
|
|
<style>
|
|
|
|
:host(:hover) .mainbox {
|
|
border-top: 1px solid var(--lelecv-color-accent, #e4002b);
|
|
}
|
|
|
|
:host(:hover) .mainbox .topimage img {
|
|
filter: grayscale(0%);
|
|
}
|
|
|
|
.mainbox {
|
|
display: block;
|
|
position: relative;
|
|
max-width: 400px;
|
|
max-height: 600px;
|
|
background: #212121;
|
|
transition: border-top 0.1s ease;
|
|
border-top: 1px solid #444;
|
|
box-sizing: border-box;
|
|
border-radius: 3px;
|
|
box-shadow: 0px 0px 6px rgba(0,0,0,0.6);
|
|
overflow: hidden;
|
|
min-height: 100px;
|
|
color: #ccc;
|
|
}
|
|
|
|
.topimage {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.topimage img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 20px;
|
|
transition: all 0.1s;
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
.heading {
|
|
font-size: 25px;
|
|
font-weight: 100;
|
|
position: absolute;
|
|
padding: 10px;
|
|
top: 55px;
|
|
left: 0px;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
padding: 10px;
|
|
min-height: 100px;
|
|
box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
|
|
border-top: 1px #444 dotted;
|
|
border-bottom: 1px #444 dotted;
|
|
}
|
|
|
|
.links {
|
|
position: relative;
|
|
height: 35px;
|
|
text-align: right;
|
|
}
|
|
|
|
.link {
|
|
display: inline-block;
|
|
padding: 0px 5px;
|
|
line-height: 35px;
|
|
height: 35px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
a {
|
|
transition: color 0.1s ease;
|
|
text-decoration: none;
|
|
color: #888;
|
|
}
|
|
|
|
a:hover {
|
|
color: #CCC;
|
|
}
|
|
|
|
.tableline {
|
|
margin-left: -5px;
|
|
margin-right: -5px;
|
|
padding: 10px;
|
|
color: #cccccc;
|
|
font-size: 14px;
|
|
}
|
|
.tableline:hover {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.tableline:nth-child(even) {
|
|
background: rgba(0,0,0,0.2);
|
|
}
|
|
.tableline .key {
|
|
font-family: 'Roboto Mono', monospace;
|
|
font-size: 12px;
|
|
color: #bbbbbb;
|
|
font-weight: bold;
|
|
}
|
|
.tableline .value {
|
|
font-family: 'Roboto Mono', monospace;
|
|
}
|
|
|
|
</style>
|
|
<div class="mainbox">
|
|
<div class="topimage"><img src="${this.imgsrc}" width="100" height="100" loading="lazy"></div>
|
|
<div class="content">
|
|
<slot>
|
|
${this.tabledata ? this.tabledata.map(datapoint => html`
|
|
<div class="tableline">
|
|
<div class="key">
|
|
${datapoint.key}:
|
|
</div>
|
|
<div class="value">
|
|
${datapoint.value}
|
|
</div>
|
|
</div>
|
|
`) : null}
|
|
</slot>
|
|
</div>
|
|
<div class="links">
|
|
${this.links.map(linkArg => {
|
|
return html`
|
|
<div class="link"><a target="_blank" href="${linkArg.url}">${linkArg.text}</a></div>
|
|
`;
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
`;
|
|
}
|
|
} |