add support for displaying pictures in the list items

etc/lime-elements.api.md

@@ -2294,6 +2294,7 @@ export interface ListItem<T = any> {
     icon?: string | Icon;
     // @deprecated
     iconColor?: string;
+    image?: Image_2;
     primaryComponent?: ListComponent;
     secondaryText?: string;
     selected?: boolean;

src/components/list/examples/list-pictures.tsx

@@ -0,0 +1,109 @@
+import { ListItem } from '@limetech/lime-elements';
+import { Component, h, State } from '@stencil/core';
+
+/**
+ * List with Pictures and Icons
+ *
+ * :::note
+ * While it's technically possible to display both images and icons simultaneously
+ * for each list item, we recommend against using identical icons across all items.
+ * Repeating the same icon for every list item adds unnecessary visual clutter
+ * without providing additional value.
+ *
+ * Icons, like images, should serve to help users quickly differentiate between
+ * list items. They are most effective when each icon uniquely identifies
+ * the type or category of its list item.
+ * :::
+ */
+@Component({
+    tag: 'limel-example-list-pictures',
+    shadow: true,
+})
+export class PictureListExample {
+    private items: Array<ListItem<number>> = [
+        {
+            text: 'Lucy Chyzhova',
+            secondaryText: 'UX Designer',
+            value: 1,
+            icon: {
+                name: 'santas_hat',
+                color: 'rgb(var(--color-coral-default))',
+            },
+            image: {
+                src: 'https://lundalogik.github.io/lime-elements/780af2a6-d3d1-4593-8642-f03210d09271.png',
+                alt: 'A picture of Lucy Chyzhova, UX designer at Lime Technologies',
+            },
+        },
+        {
+            text: 'Kiarokh Moattar',
+            secondaryText: 'Product Designer',
+            value: 2,
+            icon: {
+                name: 'party_hat',
+                color: 'rgb(var(--color-pink-default))',
+            },
+            image: {
+                src: 'https://lundalogik.github.io/lime-elements/2e86c284-d190-4c41-8da2-4de50103a0cd.png',
+                alt: 'A picture of Kiarokh Moattar, Product Designer at Lime Technologies',
+            },
+        },
+        {
+            text: 'Adrian Schmidt',
+            secondaryText: 'Engineer',
+            value: 3,
+            icon: 'viking_helmet',
+            image: {
+                src: 'https://lundalogik.github.io/lime-elements/0e6f74c0-11d9-465b-aac6-44f33da3cb7c.png',
+                alt: 'A picture of Adrian Schmidt, Head of Smooth Operations at Lime Technologies',
+            },
+        },
+        {
+            text: 'Befkadu Degefa',
+            secondaryText: 'Engineer',
+            value: 4,
+            icon: {
+                name: 'bowler_hat',
+                color: 'rgb(var(--color-sky-default))',
+            },
+        },
+    ];
+
+    @State()
+    private badgeIcons: boolean = false;
+
+    @State()
+    private hasStripedRows: boolean = true;
+
+    public render() {
+        return [
+            <limel-list
+                items={this.items}
+                type="selectable"
+                badgeIcons={this.badgeIcons}
+                class={this.hasStripedRows ? 'has-striped-rows' : ''}
+            />,
+            <limel-example-controls>
+                <limel-checkbox
+                    checked={this.badgeIcons}
+                    label="badge icons"
+                    onChange={this.setBadgeIcons}
+                />
+                <limel-checkbox
+                    checked={this.hasStripedRows}
+                    label="striped rows"
+                    onChange={this.setHasStripedRows}
+                />
+            </limel-example-controls>,
+        ];
+    }
+
+    private setBadgeIcons = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.badgeIcons = event.detail;
+    };
+
+    private setHasStripedRows = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasStripedRows = event.detail;
+    };
+}

src/components/list/list-item.types.ts

@@ -1,6 +1,7 @@
 import { ListSeparator } from '../../global/shared-types/separator.types';
 import { Icon } from '../../global/shared-types/icon.types';
 import { MenuItem } from '../menu/menu.types';
+import { Image } from '../../global/shared-types/image.types';
 
 export { ListSeparator };
 
@@ -63,6 +64,11 @@ export interface ListItem<T = any> {
      * Component used to render the list item.
      */
     primaryComponent?: ListComponent;
+
+    /**
+     * A picture to show on the list item.
+     */
+    image?: Image;
 }
 
 /**

src/components/list/list-renderer.tsx

@@ -6,6 +6,7 @@ import { CheckboxTemplate } from '../checkbox/checkbox.template';
 import { ListRendererConfig } from './list-renderer-config';
 import { RadioButtonTemplate } from './radio-button/radio-button.template';
 import { getIconColor, getIconName } from '../icon/get-icon-props';
+import { isEmpty } from 'lodash-es';
 
 export class ListRenderer {
     private defaultConfig: ListRendererConfig = {
@@ -152,6 +153,7 @@ export class ListRenderer {
                 {...attributes}
             >
                 {this.renderIcon(this.config, item)}
+                {this.renderPicture(item)}
                 {this.getPrimaryComponent(item)}
                 {this.renderText(item)}
                 {this.twoLines && this.avatarList ? this.renderDivider() : null}
@@ -247,6 +249,15 @@ export class ListRenderer {
         );
     };
 
+    private renderPicture(item: ListItem) {
+        const image = item.image;
+        if (isEmpty(image)) {
+            return;
+        }
+
+        return <img src={image.src} alt={image.alt} loading="lazy" />;
+    }
+
     private renderDivider = () => {
         const classes = {
             'mdc-deprecated-list-divider': true,

src/components/list/list.scss

@@ -258,6 +258,34 @@ $list-mdc-list-item: 0;
     }
 }
 
+img {
+    flex-shrink: 0;
+    object-fit: cover;
+
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    box-shadow: 0 0 0 1px rgb(var(--contrast-800), 0.5);
+}
+
+.mdc-deprecated-list-item {
+    &:has(img) {
+        limel-icon {
+            position: absolute;
+            top: 0.125rem;
+            left: 0.125rem;
+            padding: 0.1875rem; // 3px
+            background-color: rgb(var(--contrast-200), 0.8);
+
+            &[badge] {
+                top: 0;
+                padding: 0;
+                scale: 0.6;
+            }
+        }
+    }
+}
+
 @import '../checkbox/checkbox.scss';
 
 @import './radio-button/radio-button.scss';

src/components/list/list.tsx

@@ -25,6 +25,7 @@ const { ACTION_EVENT } = listStrings;
  * @exampleComponent limel-example-list-selectable
  * @exampleComponent limel-example-list-icons
  * @exampleComponent limel-example-list-badge-icons
+ * @exampleComponent limel-example-list-pictures
  * @exampleComponent limel-example-list-checkbox
  * @exampleComponent limel-example-list-checkbox-icons
  * @exampleComponent limel-example-list-radio-button

src/components/picker/examples/picker-pictures.tsx

@@ -0,0 +1,88 @@
+import { LimelPickerCustomEvent, ListItem } from '@limetech/lime-elements';
+import { Component, h, State } from '@stencil/core';
+
+/**
+ * With pictures
+ */
+@Component({
+    tag: 'limel-example-picker-pictures',
+    shadow: true,
+})
+export class PickerPicturesExample {
+    @State()
+    private selectedItems: Array<ListItem<number>> = [];
+
+    private allItems: Array<ListItem<number>> = [
+        {
+            text: 'Lucy Chyzhova',
+            secondaryText: 'UX Designer',
+            value: 1,
+            icon: {
+                name: 'santas_hat',
+                color: 'rgb(var(--color-coral-default))',
+            },
+            image: {
+                src: 'https://lundalogik.github.io/lime-elements/780af2a6-d3d1-4593-8642-f03210d09271.png',
+                alt: 'A picture of Lucy Chyzhova, UX designer at Lime Technologies',
+            },
+        },
+        {
+            text: 'Kiarokh Moattar',
+            secondaryText: 'Product Designer',
+            value: 2,
+            icon: {
+                name: 'party_hat',
+                color: 'rgb(var(--color-pink-default))',
+            },
+            image: {
+                src: 'https://lundalogik.github.io/lime-elements/2e86c284-d190-4c41-8da2-4de50103a0cd.png',
+                alt: 'A picture of Kiarokh Moattar, Product Designer at Lime Technologies',
+            },
+        },
+        {
+            text: 'Adrian Schmidt',
+            secondaryText: 'Engineer',
+            value: 3,
+            icon: 'viking_helmet',
+            image: {
+                src: 'https://lundalogik.github.io/lime-elements/0e6f74c0-11d9-465b-aac6-44f33da3cb7c.png',
+                alt: 'A picture of Adrian Schmidt, Head of Smooth Operations at Lime Technologies',
+            },
+        },
+        {
+            text: 'Befkadu Degefa',
+            secondaryText: 'Engineer',
+            value: 4,
+            icon: {
+                name: 'bowler_hat',
+                color: 'rgb(var(--color-sky-default))',
+            },
+        },
+    ];
+
+    public render() {
+        return [
+            <limel-picker
+                label="Favorite awesomenaut"
+                value={this.selectedItems}
+                searchLabel={'Search your awesomenaut'}
+                multiple={true}
+                allItems={this.allItems}
+                emptyResultMessage="No matching awesomenauts found"
+                onChange={this.onChange}
+                onInteract={this.onInteract}
+            />,
+            <limel-example-value value={this.selectedItems} />,
+        ];
+    }
+
+    private onChange = (
+        event: LimelPickerCustomEvent<Array<ListItem<number>>>,
+    ) => {
+        this.selectedItems = [...event.detail];
+    };
+
+    private onInteract = (event: LimelPickerCustomEvent<ListItem<number>>) => {
+        console.log('Value interacted with:', event.detail);
+    };
+}

src/components/picker/picker.tsx

@@ -43,6 +43,7 @@ const DEFAULT_SEARCHER_MAX_RESULTS = 20;
  * @exampleComponent limel-example-picker-basic
  * @exampleComponent limel-example-picker-multiple
  * @exampleComponent limel-example-picker-icons
+ * @exampleComponent limel-example-picker-pictures
  * @exampleComponent limel-example-picker-value-as-object
  * @exampleComponent limel-example-picker-value-as-object-with-actions
  * @exampleComponent limel-example-picker-empty-suggestions
@@ -347,6 +348,7 @@ export class Picker {
             text: listItem.text,
             removable: true,
             icon: name ? { name: name, color: color } : undefined,
+            image: listItem.image,
             value: listItem,
             menuItems: listItem.actions,
         };