forked from extern/egroupware
95 lines
1.8 KiB
TypeScript
95 lines
1.8 KiB
TypeScript
import {Et2Widget} from "../Et2Widget/Et2Widget";
|
|
import {css, html, LitElement, repeat} from "@lion/core";
|
|
import shoelace from "../Styles/shoelace";
|
|
|
|
/**
|
|
* Show multiple avatars
|
|
*/
|
|
export class Et2AvatarGroup extends Et2Widget(LitElement)
|
|
{
|
|
|
|
static get styles()
|
|
{
|
|
return [
|
|
...super.styles,
|
|
shoelace,
|
|
// TODO: More work on sizing needed to better adapt to available space
|
|
css`
|
|
:host {
|
|
display: flex;
|
|
}
|
|
et2-avatar {
|
|
--size: 1.5rem;
|
|
flex: 0 0 auto;
|
|
min-width: 20px;
|
|
transition-delay: 0s;
|
|
transition-duration:0.1s;
|
|
}
|
|
et2-avatar:not(:first-of-type) {
|
|
margin-left: -1rem;
|
|
}
|
|
et2-avatar::part(base) {
|
|
border: solid 2px var(--sl-color-neutral-0);
|
|
}
|
|
et2-avatar:hover {
|
|
--size: 2.5rem;
|
|
overflow: visible;
|
|
z-index: 11;
|
|
transition-delay: 1s;
|
|
transition-suration:0.5s
|
|
}
|
|
`
|
|
];
|
|
}
|
|
|
|
static get properties()
|
|
{
|
|
return {
|
|
...super.properties,
|
|
/**
|
|
* List of contact IDs
|
|
*/
|
|
value: {
|
|
type: Array
|
|
},
|
|
}
|
|
}
|
|
|
|
constructor()
|
|
{
|
|
super();
|
|
this.value = []
|
|
}
|
|
|
|
set_value(new_value)
|
|
{
|
|
if(typeof new_value !== "object")
|
|
{
|
|
new_value = new_value.split(",");
|
|
}
|
|
this.value = new_value;
|
|
}
|
|
|
|
avatarTemplate(contact : { id : string, label? : string })
|
|
{
|
|
if(typeof contact == "string")
|
|
{
|
|
contact = {id: contact};
|
|
}
|
|
return html`
|
|
<et2-avatar
|
|
.contactId="${contact.id}"
|
|
.label="${contact.label}"
|
|
${this.shape ? html`shape="${this.shape}"` : ''}
|
|
size=""
|
|
></et2-avatar>`;
|
|
}
|
|
|
|
render()
|
|
{
|
|
return html`
|
|
${repeat(this.value, (contact) => contact.id, (contact) => this.avatarTemplate(contact))}`;
|
|
}
|
|
}
|
|
|
|
customElements.define("et2-avatar-group", Et2AvatarGroup); |