@nuvia-ui/components 4.0.1

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

@@ -0,0 +1,579 @@
+import { LitElement, html, css, nothing } from 'lit';
+import '../ds-checkbox/ds-checkbox.js';
+import '../ds-radio/ds-radio.js';
+import '../ds-thumbnail/ds-thumbnail.js';
+
+/**
+ * Rich List Item — a media-rich, interactive list item for complex list patterns.
+ *
+ * @element ds-rich-list-item
+ *
+ * @prop {boolean} selected - Whether the item is selected
+ * @prop {boolean} disabled - Whether the item is disabled
+ * @prop {boolean} clickable - Enables hover/active/focus interaction
+ * @prop {string} href - Makes item navigable (renders anchor behavior)
+ * @prop {string} value - Value for selection/form association
+ * @prop {boolean} multiline - If true, min-height instead of fixed height, no truncation
+ *
+ * @slot media - 1:1 aspect ratio container (40×40px)
+ * @slot title - Primary text
+ * @slot description - Secondary text
+ * @slot custom - Free-form customizable area
+ * @slot action-group - Expects ds-button-group
+ *
+ * @fires change - Fired when selection state changes
+ * @fires rich-list-item-click - Fired when a clickable item is clicked
+ *
+ * @csspart container - The main item container
+ */
+export class DsRichListItem extends LitElement {
+  static properties = {
+    selected: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    clickable: { type: Boolean, reflect: true },
+    href: { type: String, reflect: true },
+    value: { type: String },
+    multiline: { type: Boolean, reflect: true },
+    // Internal: set by parent ds-rich-list
+    _selectable: { type: String, attribute: false },
+    _name: { type: String, attribute: false },
+    // Internal: track which slots are populated
+    _hasMedia: { type: Boolean, attribute: false },
+    _hasCustom: { type: Boolean, attribute: false },
+    _hasActionGroup: { type: Boolean, attribute: false },
+    // Media helper props
+    media: { type: String, reflect: true },
+    mediaAlt: { type: String, attribute: 'media-alt' }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      outline: none;
+    }
+
+    /* ─── Container ─── */
+    .item {
+      display: flex;
+      align-items: flex-start; /* Top alignment */
+      min-height: 72px;        /* Consistent minimum height */
+      box-sizing: border-box;
+      padding: var(--ds-space-md);
+      gap: var(--ds-space-md);
+      background: var(--ds-color-bg-default);
+      border: 1px solid var(--ds-color-border-default);
+      border-radius: var(--ds-radius-container);
+      position: relative;
+      transition: box-shadow 0.2s ease, border-color 0.2s ease;
+      cursor: default;
+    }
+
+    /* Multiline: allow growth */
+    :host([multiline]) .item {
+      height: auto;
+    }
+
+    /* ─── Interactive (clickable, href, or selectable) ─── */
+    :host([interactive]) .item {
+      cursor: pointer;
+    }
+
+    :host([interactive]:not([disabled])) .item:hover {
+      box-shadow: var(--ds-elevation-floating);
+    }
+
+    /* ─── Focus ─── */
+    :host(:focus-visible) .item {
+      outline: 2px solid var(--ds-color-border-focus);
+      outline-offset: 2px;
+    }
+
+    /* ─── Selected ─── */
+    :host([selected]) .item {
+      border-color: var(--ds-color-border-selected-secondary);
+    }
+
+    /* ─── Disabled ─── */
+    :host([disabled]) .item {
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) .item:hover {
+      box-shadow: none;
+    }
+
+    :host([disabled]) .media-container {
+      opacity: 0.5;
+    }
+
+    :host([disabled]) .content ::slotted(*) {
+      color: var(--ds-color-text-disabled);
+    }
+
+    /* ─── Selection Control ─── */
+    .selection-control {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      position: relative;
+      z-index: 2;
+      width: var(--ds-size-40);      /* Explicit width for alignment */
+      height: var(--ds-size-40);     /* Explicit height for alignment */
+    }
+
+    .selection-control ds-checkbox,
+    .selection-control ds-radio {
+      pointer-events: none; /* Let the row handle click */
+    }
+
+    /* ─── Media Container ─── */
+    .media-container {
+      width: var(--ds-size-40);
+      height: var(--ds-size-40);
+      flex-shrink: 0;
+      overflow: hidden;
+      border-radius: var(--ds-radius-media);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .media-container ::slotted(*) {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    /* Fallback img rendered via media prop uses ds-thumbnail */
+    .media-container ds-thumbnail {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    /* Hide container when slot is empty AND not forced by parent */
+    :host(:not([has-media]):not([force-media])) .media-container {
+      display: none;
+    }
+
+    /* ─── Content (Title + Description) ─── */
+    .content {
+      flex: 1;
+      min-width: 0; /* Critical for truncation */
+      display: flex;
+      flex-direction: column;
+      justify-content: center; /* Center content within the 40px min-height if single line */
+      min-height: var(--ds-size-40); /* Aligns with media/checkbox */
+      gap: 0;           /* Remove gap as requested */
+    }
+
+    .content ::slotted([slot="title"]) {
+      font: var(--ds-typo-content-body-bold);
+      color: var(--ds-color-text-default);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: block;
+    }
+
+    .content ::slotted([slot="description"]) {
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-secondary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: block;
+    }
+
+    /* Multiline: disable truncation */
+    :host([multiline]) .content ::slotted([slot="title"]),
+    :host([multiline]) .content ::slotted([slot="description"]) {
+      white-space: normal;
+      overflow: visible;
+      text-overflow: clip;
+    }
+
+    /* ─── Custom Slot ─── */
+    .custom-container {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      position: relative;
+      z-index: 2;
+      min-width: var(--ds-rich-list-custom-width, auto);
+      height: var(--ds-size-40); /* Force 40px height for vertical centering alignment */
+    }
+
+    :host(:not([has-custom]):not([force-custom])) .custom-container {
+      display: none;
+    }
+
+    /* ─── Action Group ─── */
+    .action-group-container {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      position: relative;
+      z-index: 2;
+      height: var(--ds-size-40); /* Force 40px height for vertical centering alignment */
+    }
+
+    :host(:not([has-action-group]):not([force-action-group])) .action-group-container {
+      display: none;
+    }
+
+    /* ─── Link (hidden anchor for href) ─── */
+    a.item-link {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      opacity: 0;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.selected = false;
+    this.disabled = false;
+    this.clickable = false;
+    this.href = '';
+    this.value = '';
+    this.multiline = false;
+    this._selectable = 'none';
+    this._name = '';
+    this._hasMedia = false;
+    this._hasCustom = false;
+    this._hasActionGroup = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Set ARIA role based on context
+    this._updateRole();
+    // Reflect interactive state for CSS
+    this.toggleAttribute('interactive', this._isInteractive());
+    // Host-level keydown for Enter/Space activation when item has focus
+    this.addEventListener('keydown', this._handleHostKeydown);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('keydown', this._handleHostKeydown);
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('_selectable') || changedProperties.has('disabled')) {
+      this._updateRole();
+    }
+    if (changedProperties.has('disabled')) {
+      this._updateDisabledState();
+    }
+    if (changedProperties.has('clickable') || changedProperties.has('href') || changedProperties.has('_selectable') || changedProperties.has('disabled')) {
+      this.toggleAttribute('interactive', this._isInteractive());
+    }
+    if (changedProperties.has('media')) {
+      // Allow re-evaluating has-media if prop changes (though usually slotchange handles initial)
+      // We need to ensure has-media is true if media prop is set
+      this.toggleAttribute('has-media', !!this.media || this._hasMedia);
+    }
+  }
+
+  _updateRole() {
+    if (this._selectable !== 'none') {
+      this.setAttribute('role', 'option');
+      this.setAttribute('aria-selected', String(this.selected));
+    } else {
+      this.setAttribute('role', 'listitem');
+      this.removeAttribute('aria-selected');
+    }
+
+    if (this.disabled) {
+      this.setAttribute('aria-disabled', 'true');
+    } else {
+      this.removeAttribute('aria-disabled');
+    }
+  }
+
+  _updateDisabledState() {
+    const slots = ['action-group', 'custom'];
+    slots.forEach(slotName => {
+      const slot = this.shadowRoot.querySelector(`slot[name="${slotName}"]`);
+      if (slot) {
+        const assignedElements = slot.assignedElements({ flatten: true });
+        assignedElements.forEach(el => {
+          // Try to set disabled property if available
+          if ('disabled' in el) {
+            el.disabled = this.disabled;
+          }
+          // Also try looking for children that might be buttons (e.g. inside ds-button-group)
+          if (el.tagName === 'DS-BUTTON-GROUP') {
+            Array.from(el.children).forEach(child => {
+              if ('disabled' in child) {
+                child.disabled = this.disabled;
+              }
+            });
+          }
+        });
+      }
+    });
+  }
+
+  _isInteractive() {
+    if (this.disabled) return false;
+    return this.clickable || this.href || this._selectable !== 'none';
+  }
+
+  _isEventFromInteractiveChild(e) {
+    const path = e.composedPath();
+
+    for (const el of path) {
+      if (el === this) break; // Stop checking when we reach the host
+      if (el === window || el === document || el === this.shadowRoot) continue;
+      if (!el.tagName) continue;
+
+      // Allow the main item link (href overlay)
+      if (el.classList && el.classList.contains('item-link')) continue;
+
+      const tag = el.tagName.toLowerCase();
+      const interactiveTags = ['button', 'a', 'input', 'select', 'textarea', 'label'];
+
+      // Check for DS components that are interactive
+      // Exclude non-interactive ones
+      const isDsComponent = tag.startsWith('ds-') && !['ds-icon', 'ds-avatar', 'ds-badge'].includes(tag);
+
+      if (interactiveTags.includes(tag) || isDsComponent || el.hasAttribute('onclick') || el.getAttribute('role') === 'button') {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  _handleClick(e) {
+    if (this.disabled) return;
+    if (this._isEventFromInteractiveChild(e)) return;
+    const path = e.composedPath();
+
+    // Selection logic
+    if (this._selectable === 'single') {
+      if (!this.selected) {
+        this.selected = true;
+        this._dispatchChange();
+      }
+    } else if (this._selectable === 'multiple') {
+      this.selected = !this.selected;
+      this._dispatchChange();
+    }
+
+    // Clickable event
+    if (this.clickable || this.href) {
+      this.dispatchEvent(new CustomEvent('rich-list-item-click', {
+        detail: { value: this.value, href: this.href },
+        bubbles: true,
+        composed: true
+      }));
+
+      // Navigate if href
+      // Note: If the user clicked a.item-link, the browser handles navigation naturally.
+      // We only need manual navigation if the click was on the padding/div.
+      // But if specific href logic is needed (like checking meta keys), we keep it.
+      // However, verify we don't double-navigate if a.item-link was clicked.
+      const clickedLink = path.find(el => el.classList && el.classList.contains('item-link'));
+      if (this.href && !clickedLink && !e.defaultPrevented) {
+        window.open(this.href, e.metaKey || e.ctrlKey ? '_blank' : '_self');
+      }
+    }
+  }
+
+  _handleHostKeydown = (e) => {
+    if (this.disabled) return;
+    // Only handle when the host itself is the target (not bubbled from internal elements)
+    if (e.target !== this) return;
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this._activate(e);
+    }
+  }
+
+  _handleKeydown(e) {
+    if (this._isEventFromInteractiveChild(e)) return;
+
+    // This handles keydowns from within the shadow DOM (e.g. inner .item div)
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this._activate(e);
+    }
+  }
+
+  _activate(e) {
+    // Selection logic
+    if (this._selectable === 'single') {
+      if (!this.selected) {
+        this.selected = true;
+        this._dispatchChange();
+      }
+    } else if (this._selectable === 'multiple') {
+      this.selected = !this.selected;
+      this._dispatchChange();
+    }
+
+    // Clickable event
+    if (this.clickable || this.href) {
+      this.dispatchEvent(new CustomEvent('rich-list-item-click', {
+        detail: { value: this.value, href: this.href },
+        bubbles: true,
+        composed: true
+      }));
+
+      if (this.href) {
+        window.open(this.href, e.metaKey || e.ctrlKey ? '_blank' : '_self');
+      }
+    }
+  }
+
+  _dispatchChange() {
+    this.setAttribute('aria-selected', String(this.selected));
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: { selected: this.selected, value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  _handleSlotChange(slotName, e) {
+    const slot = e.target;
+    const nodes = slot.assignedNodes({ flatten: true });
+    const hasContent = this._hasVisibleContent(nodes);
+
+    let changed = false;
+
+    if (slotName === 'media') {
+      if (this._hasMedia !== hasContent) {
+        this._hasMedia = hasContent;
+        this.toggleAttribute('has-media', hasContent || !!this.media);
+        changed = true;
+      }
+    } else if (slotName === 'custom') {
+      if (this._hasCustom !== hasContent) {
+        this._hasCustom = hasContent;
+        this.toggleAttribute('has-custom', hasContent);
+        this._updateDisabledState();
+        changed = true;
+      }
+    } else if (slotName === 'action-group') {
+      if (this._hasActionGroup !== hasContent) {
+        this._hasActionGroup = hasContent;
+        this.toggleAttribute('has-action-group', hasContent);
+        this._updateDisabledState();
+        changed = true;
+      }
+    }
+
+    if (changed) {
+      this.dispatchEvent(new CustomEvent('rich-list-item-structure-change', {
+        bubbles: true,
+        composed: true
+      }));
+    }
+  }
+
+  _hasVisibleContent(nodes) {
+    if (!nodes) return false;
+    return Array.from(nodes).some(node => {
+      // Text nodes: check if they contain more than just whitespace
+      if (node.nodeType === Node.TEXT_NODE) {
+        return node.textContent.trim() !== '';
+      }
+      // Element nodes:
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        // Recursively check children of generic containers (div, span)
+        // This prevents <span slot="action-group"> </span> from counting as content
+        if (['DIV', 'SPAN'].includes(node.tagName)) {
+          // If the element has direct attributes that might make it visible (like styles or classes),
+          // we should probably consider it "visible" content.
+          // But for now, let's focus on the "empty wrapper" case.
+          // If it has children, check them.
+          if (node.childNodes.length > 0) {
+            return this._hasVisibleContent(node.childNodes);
+          }
+          // Empty div/span -> not visible
+          return false;
+        }
+        // Other elements (img, button, ds-icon, etc) are considered visible content
+        return true;
+      }
+      return false;
+    });
+  }
+
+  _renderSelectionControl() {
+    if (this._selectable === 'single') {
+      return html`
+        <div class="selection-control">
+          <ds-radio
+            standalone
+            ?checked=${this.selected}
+            ?disabled=${this.disabled}
+            name=${this._name}
+            value=${this.value}
+            tabindex="-1"
+          ></ds-radio>
+        </div>
+      `;
+    }
+
+    if (this._selectable === 'multiple') {
+      return html`
+        <div class="selection-control">
+          <ds-checkbox
+            standalone
+            ?checked=${this.selected}
+            ?disabled=${this.disabled}
+            tabindex="-1"
+          ></ds-checkbox>
+        </div>
+      `;
+    }
+
+    return nothing;
+  }
+
+  render() {
+    return html`
+      <div
+        class="item"
+        part="container"
+        @click=${this._handleClick}
+        @keydown=${this._handleKeydown}
+      >
+        ${this.href ? html`<a class="item-link" href=${this.href} tabindex="-1" aria-hidden="true"></a>` : nothing}
+
+        ${this._renderSelectionControl()}
+
+        <div class="media-container">
+          <slot name="media" @slotchange=${(e) => this._handleSlotChange('media', e)}>
+            ${this.media ? html`<ds-thumbnail src="${this.media}" alt="${this.mediaAlt || ''}" fit="cover"></ds-thumbnail>` : nothing}
+          </slot>
+        </div>
+
+        <div class="content">
+          <slot name="title"></slot>
+          <slot name="description"></slot>
+        </div>
+
+        <div class="custom-container">
+          <slot name="custom" @slotchange=${(e) => this._handleSlotChange('custom', e)}></slot>
+        </div>
+
+        <div class="action-group-container">
+          <slot name="action-group" @slotchange=${(e) => this._handleSlotChange('action-group', e)}></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('ds-rich-list-item', DsRichListItem);