@nuvia-ui/components 4.0.1

package/src/ds-rich-list/ds-rich-list.js

@@ -0,0 +1,246 @@
+import { LitElement, html, css, nothing } from 'lit';
+import '../ds-rich-list-item/ds-rich-list-item.js';
+
+/**
+ * Rich List — container for ds-rich-list-item elements.
+ * Manages selection mode and layout.
+ *
+ * @element ds-rich-list
+ *
+ * @prop {string} selectable - Selection mode: 'single' | 'multiple' | 'none'
+ * @prop {string} name - Form name (used for radio group in single mode)
+ *
+ * @slot - ds-rich-list-item elements
+ *
+ * @fires change - Fired when selection changes, with detail: { value, values }
+ */
+export class DsRichList extends LitElement {
+    static properties = {
+        selectable: { type: String, reflect: true },
+        name: { type: String },
+        customWidth: { type: String, attribute: 'custom-width' }
+    };
+
+    static styles = css`
+    :host {
+      display: block;
+    }
+
+    .list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ds-space-md, 16px);
+    }
+  `;
+
+    constructor() {
+        super();
+        this.selectable = 'none';
+        this.name = '';
+        this.customWidth = '';
+        this._focusedIndex = 0;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('change', this._handleItemChange);
+        this.addEventListener('keydown', this._handleKeydown);
+        this.addEventListener('focusin', this._handleFocusIn);
+        this.addEventListener('rich-list-item-structure-change', this._handleStructureChange);
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('change', this._handleItemChange);
+        this.removeEventListener('keydown', this._handleKeydown);
+        this.removeEventListener('focusin', this._handleFocusIn);
+        this.removeEventListener('rich-list-item-structure-change', this._handleStructureChange);
+    }
+
+    firstUpdated() {
+        this._propagateSelectable();
+        this._propagateLayout();
+    }
+
+    updated(changedProperties) {
+        if (changedProperties.has('selectable') || changedProperties.has('name')) {
+            this._propagateSelectable();
+        }
+        if (changedProperties.has('customWidth')) {
+            this._propagateLayout();
+        }
+    }
+
+    _getItems() {
+        const slot = this.shadowRoot.querySelector('slot');
+        if (!slot) return [];
+        return slot.assignedElements({ flatten: true })
+            .filter(el => el.tagName === 'DS-RICH-LIST-ITEM');
+    }
+
+    _propagateSelectable() {
+        const items = this._getItems();
+        items.forEach(item => {
+            item._selectable = this.selectable;
+            item._name = this.name;
+        });
+        this._manageTabindex();
+    }
+
+    _propagateLayout() {
+        const items = this._getItems();
+        if (!items.length) return;
+
+        // Detect which slots are used by any child
+        const hasAnyMedia = items.some(item => item.hasAttribute('has-media'));
+        const hasAnyCustom = items.some(item => item.hasAttribute('has-custom'));
+        const hasAnyActions = items.some(item => item.hasAttribute('has-action-group'));
+
+        // Force all children to show these columns
+        items.forEach(item => {
+            item.toggleAttribute('force-media', hasAnyMedia);
+            item.toggleAttribute('force-custom', hasAnyCustom);
+            item.toggleAttribute('force-action-group', hasAnyActions);
+
+            // Propagate custom width if specified
+            if (this.customWidth) {
+                item.style.setProperty('--ds-rich-list-custom-width', this.customWidth);
+            } else {
+                item.style.removeProperty('--ds-rich-list-custom-width');
+            }
+        });
+    }
+
+    _handleFocusIn = (e) => {
+        // Track which item is focused for arrow key navigation
+        const items = this._getItems();
+        const index = items.indexOf(e.target);
+        if (index !== -1) {
+            this._focusedIndex = index;
+        }
+    }
+
+    _handleKeydown = (e) => {
+        const items = this._getItems();
+        if (!items.length) return;
+
+        // Interactive elements inside items should not trigger navigation
+        const path = e.composedPath();
+        const targetTag = path[0]?.tagName;
+        if (['INPUT', 'TEXTAREA', 'SELECT'].includes(targetTag)) return;
+
+        if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {
+            e.preventDefault();
+
+            const interactiveItems = items.filter(item => item._isInteractive && item._isInteractive());
+            if (!interactiveItems.length) return;
+
+            // Find current focused index in interactive items
+            const currentFocused = items[this._focusedIndex ?? 0];
+            let currentInteractiveIndex = interactiveItems.indexOf(currentFocused);
+            if (currentInteractiveIndex === -1) currentInteractiveIndex = 0;
+
+            if (e.key === 'ArrowDown') {
+                currentInteractiveIndex = Math.min(interactiveItems.length - 1, currentInteractiveIndex + 1);
+            } else if (e.key === 'ArrowUp') {
+                currentInteractiveIndex = Math.max(0, currentInteractiveIndex - 1);
+            } else if (e.key === 'Home') {
+                currentInteractiveIndex = 0;
+            } else if (e.key === 'End') {
+                currentInteractiveIndex = interactiveItems.length - 1;
+            }
+
+            // Update focused index to the actual index in all items
+            this._focusedIndex = items.indexOf(interactiveItems[currentInteractiveIndex]);
+            this._manageTabindex();
+            items[this._focusedIndex].focus();
+        }
+    }
+
+    _manageTabindex() {
+        const items = this._getItems();
+
+        items.forEach((item) => {
+            // Interactive items are all tabbable, non-interactive are excluded
+            if (item._isInteractive && item._isInteractive()) {
+                item.setAttribute('tabindex', '0');
+            } else {
+                item.removeAttribute('tabindex');
+            }
+        });
+    }
+
+    _handleItemChange = (e) => {
+        // Only handle events from direct ds-rich-list-item children
+        const target = e.target;
+        if (target.tagName !== 'DS-RICH-LIST-ITEM') return;
+
+        // Stop item-level change from reaching external listeners;
+        // only the list's aggregated change event should be visible.
+        e.stopImmediatePropagation();
+
+        // For single selection, deselect siblings
+        if (this.selectable === 'single') {
+            const items = this._getItems();
+            items.forEach(item => {
+                if (item !== target && item.selected) {
+                    item.selected = false;
+                    item.setAttribute('aria-selected', 'false');
+                }
+            });
+        }
+
+        // Dispatch aggregated change event
+        this._dispatchChange();
+    };
+
+    _dispatchChange() {
+        const items = this._getItems();
+        const selectedItems = items.filter(item => item.selected);
+        const values = selectedItems.map(item => item.value);
+
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: {
+                value: values.length === 1 ? values[0] : values.length === 0 ? '' : values,
+                values
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+
+    _handleSlotChange(e) {
+        this._propagateSelectable();
+        // Re-scan layout when items are added/removed
+        if (this._layoutRequestId) cancelAnimationFrame(this._layoutRequestId);
+        this._layoutRequestId = requestAnimationFrame(() => {
+            this._propagateLayout();
+            this._layoutRequestId = null;
+        });
+    }
+
+    _handleStructureChange = (e) => {
+        // Stop the event from bubbling out of the list
+        e.stopPropagation();
+
+        // Debounce layout update
+        if (this._layoutRequestId) cancelAnimationFrame(this._layoutRequestId);
+        this._layoutRequestId = requestAnimationFrame(() => {
+            this._propagateLayout();
+            this._layoutRequestId = null;
+        });
+    }
+
+    render() {
+        const role = this.selectable !== 'none' ? 'listbox' : 'list';
+        const ariaMulti = this.selectable === 'multiple' ? 'true' : undefined;
+
+        return html`
+      <div class="list" role=${role} aria-multiselectable=${ariaMulti || nothing}>
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+    }
+}
+
+customElements.define('ds-rich-list', DsRichList);

package/src/ds-rich-list/ds-rich-list.stories.js

@@ -0,0 +1,368 @@
+import './ds-rich-list.js';
+import '../ds-rich-list-item/ds-rich-list-item.js';
+import '../ds-tag-status/ds-tag-status.js';
+import '../ds-button-group/ds-button-group.js';
+import '../ds-button/ds-button.js';
+import '../ds-icon-button/ds-icon-button.js';
+import '../ds-avatar/ds-avatar.js';
+
+export default {
+    title: 'Components/Rich List',
+    component: 'ds-rich-list',
+    argTypes: {
+        selectable: {
+            control: 'select',
+            options: ['none', 'single', 'multiple']
+        },
+        name: { control: 'text' }
+    }
+};
+
+/* ─── Helper: create a rich list item with common content ─── */
+function createItem({ title = 'Item Title', description = 'Item description text', disabled = false, clickable = false, href = '', value = '', selected = false, showMedia = true, showActions = true, showCustom = false }) {
+    const item = document.createElement('ds-rich-list-item');
+    if (disabled) item.disabled = true;
+    if (clickable) item.clickable = true;
+    if (href) item.href = href;
+    if (value) item.value = value;
+    if (selected) item.selected = true;
+
+    // Media slot (now via prop)
+    if (showMedia) {
+        // Consistent placeholder image (data URI for robustness)
+        item.setAttribute('media', 'data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22%3E%3Crect width%3D%2240%22 height%3D%2240%22 fill%3D%22%23e0e0e0%22%2F%3E%3Ctext x%3D%2250%25%22 y%3D%2250%25%22 dominant-baseline%3D%22middle%22 text-anchor%3D%22middle%22 font-family%3D%22sans-serif%22 font-size%3D%2210%22 fill%3D%22%23757575%22%3EIMG%3C%2Ftext%3E%3C%2Fsvg%3E');
+        item.setAttribute('media-alt', title);
+    }
+
+    // Title slot
+    const titleEl = document.createElement('span');
+    titleEl.setAttribute('slot', 'title');
+    titleEl.textContent = title;
+    item.appendChild(titleEl);
+
+    // Description slot
+    const descEl = document.createElement('span');
+    descEl.setAttribute('slot', 'description');
+    descEl.textContent = description;
+    item.appendChild(descEl);
+
+    // Custom slot
+    if (showCustom) {
+        const customEl = document.createElement('span');
+        customEl.setAttribute('slot', 'custom');
+        customEl.textContent = '€99.99';
+        customEl.style.font = 'var(--ds-typo-content-body-bold)';
+        customEl.style.color = 'var(--ds-color-text-default)';
+        customEl.style.whiteSpace = 'nowrap';
+        item.appendChild(customEl);
+    }
+
+    // Action group slot
+    if (showActions) {
+        const btnGroup = document.createElement('ds-button-group');
+        btnGroup.setAttribute('slot', 'action-group');
+
+        const editBtn = document.createElement('ds-icon-button');
+        editBtn.setAttribute('variant', 'action');
+        editBtn.setAttribute('icon', 'edit');
+        editBtn.setAttribute('aria-label', 'Edit');
+
+        const deleteBtn = document.createElement('ds-icon-button');
+        deleteBtn.setAttribute('variant', 'action');
+        deleteBtn.setAttribute('icon', 'delete');
+        deleteBtn.setAttribute('aria-label', 'Delete');
+
+        btnGroup.appendChild(editBtn);
+        btnGroup.appendChild(deleteBtn);
+        item.appendChild(btnGroup);
+    }
+
+    return item;
+}
+
+/* ─── Stories ─── */
+
+export const Default = {
+    render: () => {
+        const list = document.createElement('ds-rich-list');
+        list.style.maxWidth = '720px';
+
+        for (let i = 1; i <= 3; i++) {
+            list.appendChild(createItem({
+                title: `Project ${i}`,
+                description: `Description for project ${i}`,
+                clickable: true,
+                value: `project-${i}`
+            }));
+        }
+
+        return list;
+    }
+};
+
+export const WithHref = {
+    render: () => {
+        const list = document.createElement('ds-rich-list');
+        list.style.maxWidth = '720px';
+
+        list.appendChild(createItem({
+            title: 'Google',
+            description: 'Navigate to Google',
+            href: 'https://google.com',
+            value: 'google'
+        }));
+        list.appendChild(createItem({
+            title: 'GitHub',
+            description: 'Navigate to GitHub',
+            href: 'https://github.com',
+            value: 'github'
+        }));
+
+        return list;
+    }
+};
+
+export const SingleSelection = {
+    render: () => {
+        const list = document.createElement('ds-rich-list');
+        list.selectable = 'single';
+        list.name = 'plan';
+        list.style.maxWidth = '720px';
+
+        list.appendChild(createItem({
+            title: 'Free Plan',
+            description: 'Basic features for personal use',
+            value: 'free',
+            showCustom: true,
+            selected: true
+        }));
+        list.appendChild(createItem({
+            title: 'Pro Plan',
+            description: 'Advanced features for professionals',
+            value: 'pro',
+            showCustom: true
+        }));
+        list.appendChild(createItem({
+            title: 'Enterprise Plan',
+            description: 'Full platform for large teams',
+            value: 'enterprise',
+            showCustom: true
+        }));
+
+        return list;
+    }
+};
+
+export const MultipleSelection = {
+    render: () => {
+        const list = document.createElement('ds-rich-list');
+        list.selectable = 'multiple';
+        list.style.maxWidth = '720px';
+
+        list.appendChild(createItem({
+            title: 'Email Notifications',
+            description: 'Receive updates via email',
+            value: 'email',
+            selected: true,
+            showActions: false
+        }));
+        list.appendChild(createItem({
+            title: 'Push Notifications',
+            description: 'Receive push notifications on your device',
+            value: 'push',
+            showActions: false
+        }));
+        list.appendChild(createItem({
+            title: 'SMS Notifications',
+            description: 'Receive text messages',
+            value: 'sms',
+            showActions: false,
+            disabled: true
+        }));
+
+        return list;
+    }
+};
+
+export const DisabledState = {
+    render: () => {
+        const list = document.createElement('ds-rich-list');
+        list.style.maxWidth = '720px';
+
+        list.appendChild(createItem({
+            title: 'Active Item',
+            description: 'This item is interactive',
+            clickable: true,
+            value: 'active'
+        }));
+        list.appendChild(createItem({
+            title: 'Disabled Item',
+            description: 'This item is disabled',
+            disabled: true,
+            value: 'disabled'
+        }));
+
+        return list;
+    }
+};
+
+export const Multiline = {
+    render: () => {
+        const list = document.createElement('ds-rich-list');
+        list.style.maxWidth = '720px';
+
+        const item = createItem({
+            title: 'Long Content Item',
+            description: 'This is a much longer description that demonstrates how the multiline variant works. Instead of truncating the content, it allows the item to grow vertically to accommodate the full text.',
+            clickable: true,
+            value: 'long'
+        });
+        item.multiline = true;
+        list.appendChild(item);
+
+        list.appendChild(createItem({
+            title: 'Normal Item',
+            description: 'This item has the default fixed height with truncation for comparison',
+            clickable: true,
+            value: 'normal'
+        }));
+
+        return list;
+    }
+};
+
+export const NoMedia = {
+    render: () => {
+        const list = document.createElement('ds-rich-list');
+        list.selectable = 'single';
+        list.name = 'option';
+        list.style.maxWidth = '720px';
+
+        list.appendChild(createItem({
+            title: 'Option A',
+            description: 'First option without media',
+            value: 'a',
+            showMedia: false,
+            showActions: false,
+            selected: true
+        }));
+        list.appendChild(createItem({
+            title: 'Option B',
+            description: 'Second option without media',
+            value: 'b',
+            showMedia: false,
+            showActions: false
+        }));
+
+        return list;
+    }
+};
+
+export const NonInteractive = {
+    render: () => {
+        const list = document.createElement('ds-rich-list');
+        list.style.maxWidth = '720px';
+
+        list.appendChild(createItem({
+            title: 'Display-Only Item',
+            description: 'This item has no selection, click, or navigation — only internal actions work',
+            value: 'display-1',
+            showCustom: true
+        }));
+        list.appendChild(createItem({
+            title: 'Another Static Item',
+            description: 'Hover effect does not apply to the row itself',
+            value: 'display-2',
+            showCustom: true
+        }));
+        list.appendChild(createItem({
+            title: 'Info Row',
+            description: 'Tab skips the row entirely and goes straight to the Edit/Delete buttons',
+            value: 'display-3',
+            showCustom: true,
+            showActions: false
+        }));
+
+        return list;
+    }
+};
+
+export const ComplexCustom = {
+    render: () => {
+        const list = document.createElement('ds-rich-list');
+        list.style.maxWidth = '720px';
+        list.setAttribute('custom-width', '200px');
+
+        // Helper to create complex custom content
+        const createCustomContent = (tagLabel, tagVariant, date, price) => {
+            const container = document.createElement('div');
+            container.setAttribute('slot', 'custom');
+            container.style.cssText = 'display: flex; justify-content: space-between; width: 100%; gap: var(--ds-space-sm, 8px); align-items: baseline;';
+
+            // Left side: tag + date
+            const leftSide = document.createElement('div');
+            leftSide.style.cssText = 'display: flex; gap: var(--ds-space-sm, 8px); align-items: baseline;';
+
+            const tagEl = document.createElement('ds-tag-status');
+            tagEl.setAttribute('label', tagLabel);
+            tagEl.setAttribute('variant', tagVariant);
+
+            const dateEl = document.createElement('span');
+            dateEl.textContent = date;
+            dateEl.style.cssText = 'font: var(--ds-typo-content-body-regular); color: var(--ds-color-text-secondary);';
+
+            leftSide.appendChild(tagEl);
+            leftSide.appendChild(dateEl);
+
+            // Right side: price
+            const priceEl = document.createElement('span');
+            priceEl.textContent = price;
+            priceEl.style.cssText = 'font: var(--ds-typo-content-body-bold); color: var(--ds-color-text-default); white-space: nowrap;';
+
+            container.appendChild(leftSide);
+            container.appendChild(priceEl);
+
+            return container;
+        };
+
+        // Item 1: Full content
+        const item1 = createItem({
+            title: 'Project Alpha',
+            description: 'Enterprise solution with full features',
+            clickable: true,
+            value: 'alpha'
+        });
+        item1.appendChild(createCustomContent('Active', 'success', 'Jan 2026', '€99.99'));
+        list.appendChild(item1);
+
+        // Item 2: Different content, but same columns
+        const item2 = createItem({
+            title: 'Project Beta',
+            description: 'Standard package for small teams',
+            clickable: true,
+            value: 'beta'
+        });
+        item2.appendChild(createCustomContent('Pending', 'warning', 'Feb 2026', '€1,499.00'));
+        list.appendChild(item2);
+
+        // Item 3: No custom content → column is still reserved
+        list.appendChild(createItem({
+            title: 'Project Gamma',
+            description: 'This item has no custom content, but the column space is reserved',
+            clickable: true,
+            value: 'gamma'
+        }));
+
+        // Item 4: Only actions, no custom → both columns consistent
+        list.appendChild(createItem({
+            title: 'Project Delta',
+            description: 'Minimal item for demonstration',
+            clickable: true,
+            value: 'delta',
+            showMedia: false
+        }));
+
+        return list;
+    }
+};
+