Kanban: Fix display of resources on card by adding Et2AvatarGroup

api/js/etemplate/Et2Avatar/Et2Avatar.ts

@@ -120,7 +120,14 @@ export class Et2Avatar extends Et2Widget(SlotMixin(SlAvatar)) implements et2_IDe
 		}
 		if (changedProperties.has("size"))
 		{
-			this.getDOMNode().setAttribute('style', `--size:${this.size}`);
+			if(this.size)
+			{
+				this.getDOMNode().setAttribute('style', `--size:${this.size}`);
+			}
+			else
+			{
+				this.style.removeProperty("--size")
+			}
 		}
 	}
 

api/js/etemplate/Et2Avatar/Et2AvatarGroup.ts

@@ -0,0 +1,95 @@
+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);

api/js/etemplate/etemplate2.ts

@@ -28,6 +28,7 @@ import './Layout/Et2Tabs/Et2Tab';
 import './Layout/Et2Tabs/Et2Tabs';
 import './Layout/Et2Tabs/Et2TabPanel';
 import './Et2Avatar/Et2Avatar';
+import './Et2Avatar/Et2AvatarGroup';
 import './Et2Button/Et2Button';
 import './Et2Button/Et2ButtonTimestamper';
 import './Et2Checkbox/Et2Checkbox';