@aquera/nile-elements 1.8.2 → 1.8.3

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-detail/nile-detail.css.ts

@@ -154,6 +154,41 @@ export const styles = css`
     padding: 0;
   }
 
+  /* ── Preview state ──────────────────────────────────────────────────────── */
+
+  .detail__body--preview {
+    position: relative;
+    cursor: pointer;
+  }
+
+  .detail__body--preview::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: var(--nile-detail-preview-fade-height, 40px);
+    background: linear-gradient(
+      to bottom,
+      transparent,
+      var(--nile-colors-white-base, var(--ng-colors-bg-primary))
+    );
+    pointer-events: none;
+  }
+
+  .detail__body--preview:focus {
+    outline: none;
+  }
+
+  .detail__body--preview:focus-visible {
+    outline: solid 3px var(--nile-colors-blue-500, var(--ng-colors-fg-brand-primary-600));
+    outline-offset: -3px;
+  }
+
+  .detail--disabled .detail__body--preview {
+    cursor: not-allowed;
+  }
+
   /* ── Selection variant ──────────────────────────────────────────────────── */
 
   .detail__selection-label {
@@ -410,7 +445,8 @@ export const styles = css`
       var(--nile-spacing-3xl, var(--ng-spacing-3xl));
   }
 
-  .detail--light.detail--open .detail__header {
+  .detail--light.detail--open .detail__header,
+  .detail--light.detail--preview .detail__header {
     border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
 

package/src/nile-detail/nile-detail.ts

@@ -12,6 +12,7 @@ import {
   hideDetail,
   handleSummaryClick,
   handleSummaryKeyDown,
+  getPreviewHeight,
 } from './nile-detail.utils';
 import '../nile-checkbox/index';
 import '../nile-input/index';
@@ -104,6 +105,10 @@ export interface NileDetailSelectionConfig {
 
   showSelectedToggle?: boolean;
 
+  // Preview state
+  preview?: boolean;
+  previewPercentage?: number;
+
   // Inherited / passthrough
   open?: boolean;
   disabled?: boolean;
@@ -128,6 +133,12 @@ export class NileDetail extends NileElement {
 
   @property({ attribute: true, type: Boolean, reflect: true }) disabled = false;
 
+  /** When set, the closed state shows a preview of the body content instead of hiding it. */
+  @property({ attribute: true, type: Boolean, reflect: true }) preview = false;
+
+  /** Percentage (0–100) of the content height shown while previewing. */
+  @property({ attribute: 'preview-percentage', type: Number, reflect: true }) previewPercentage = 30;
+
   @property({ attribute: true, type: String, reflect: true }) variant: NileDetailVariant = 'default';
 
   @property({ attribute: false, type: Array }) items: SelectionItem[] = [];
@@ -218,6 +229,16 @@ export class NileDetail extends NileElement {
     return this.variant === 'light' || this.variant === 'select-light';
   }
 
+  /** True when preview mode is on with a usable percentage. */
+  private get _previewEnabled(): boolean {
+    return this.preview && Math.min(100, Math.max(0, this.previewPercentage)) > 0;
+  }
+
+  /** True when the closed state should currently render the preview. */
+  private get _isPreviewActive(): boolean {
+    return this._previewEnabled && !this.open;
+  }
+
   private get _isInfiniteMode(): boolean {
     return (
       this._isSelectionVariant &&
@@ -308,9 +329,12 @@ export class NileDetail extends NileElement {
   }
 
   firstUpdated() {
-    this._detailOpen = this.open;
-    this.body.hidden = !this.open;
+    this._detailOpen = this.open || this._isPreviewActive;
+    this.body.hidden = !this.open && !this._isPreviewActive;
     this.body.style.height = this.open ? 'auto' : '0';
+    if (this._isPreviewActive) {
+      this._applyPreviewHeight();
+    }
     this._syncSelectedFromProperty();
     if (this._restoreDefaults === null) {
       this._restoreDefaults = [...this._selectedSet];
@@ -541,6 +565,9 @@ export class NileDetail extends NileElement {
     }
 
     if (c.showSelectedToggle !== undefined) this.showSelectedToggle = c.showSelectedToggle;
+
+    if (c.preview           !== undefined) this.preview           = c.preview;
+    if (c.previewPercentage !== undefined) this.previewPercentage = c.previewPercentage;
   }
 
   private _syncSelectedFromProperty() {
@@ -728,6 +755,9 @@ export class NileDetail extends NileElement {
       if (node.nodeType === Node.TEXT_NODE) return !!(node.textContent && node.textContent.trim());
       return false;
     });
+    if (this._isPreviewActive) {
+      this._applyPreviewHeight();
+    }
   }
 
   private _stopHeaderToggle(event: Event) {
@@ -750,10 +780,52 @@ export class NileDetail extends NileElement {
       await animateShow(this);
     } else {
       await animateHide(this);
+      // In preview mode the details element stays open so the preview remains visible.
+      this._detailOpen = this._previewEnabled;
+    }
+  }
+
+  @watch(['preview', 'previewPercentage'], { waitUntilFirstUpdate: true })
+  handlePreviewChange() {
+    if (this.open) {
+      return;
+    }
+    if (this._previewEnabled) {
+      this._detailOpen = true;
+      this._applyPreviewHeight();
+    } else {
+      this.body.hidden = true;
+      this.body.style.height = '0';
       this._detailOpen = false;
     }
   }
 
+  /** Measures the content and clamps the body to the configured preview height. */
+  private async _applyPreviewHeight() {
+    await this.updateComplete;
+    if (!this._isPreviewActive || !this.body) {
+      return;
+    }
+    this.body.hidden = false;
+    this.body.style.height = `${getPreviewHeight(this)}px`;
+  }
+
+  private _handlePreviewClick() {
+    if (this._isPreviewActive && !this.disabled) {
+      showDetail(this);
+    }
+  }
+
+  private _handlePreviewKeyDown(event: KeyboardEvent) {
+    if (!this._isPreviewActive || this.disabled) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      showDetail(this);
+    }
+  }
+
   async show() {
     return showDetail(this);
   }
@@ -1017,6 +1089,7 @@ export class NileDetail extends NileElement {
           'detail--disabled': this.disabled,
           'detail--selection': isSelection,
           'detail--light': this._isLightVariant,
+          'detail--preview': this._isPreviewActive,
         })}
       >
         <summary
@@ -1062,7 +1135,18 @@ export class NileDetail extends NileElement {
 
         </summary>
 
-        <div part="content" class="detail__body">
+        <div
+          part="content"
+          class=${classMap({
+            'detail__body': true,
+            'detail__body--preview': this._isPreviewActive,
+          })}
+          role=${this._isPreviewActive ? 'button' : nothing}
+          tabindex=${this._isPreviewActive && !this.disabled ? '0' : nothing}
+          aria-label=${this._isPreviewActive ? 'Expand to view full content' : nothing}
+          @click=${this._handlePreviewClick}
+          @keydown=${this._handlePreviewKeyDown}
+        >
           ${isSelection
             ? html`<div part="selection-content" class="detail__selection-content">${this._renderSelectionBody()}</div>`
             : ''}

package/src/nile-detail/nile-detail.utils.ts

@@ -2,9 +2,20 @@ import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/
 import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
 import { waitForEvent } from '../internal/event';
 import type { NileDetail } from './nile-detail';
+export function getPreviewHeight(component: NileDetail): number {
+  if (!component.preview) {
+    return 0;
+  }
+  const pct = Math.min(100, Math.max(0, component.previewPercentage));
+  if (pct <= 0) {
+    return 0;
+  }
+  return Math.max(1, Math.round((component.body.scrollHeight * pct) / 100));
+}
 
 /*
   Runs the show animation on the detail body.
+  In preview mode the animation starts from the preview height instead of 0.
   Emits nile-show (cancelable) before and nile-after-show after the animation.
 */
 export async function animateShow(component: NileDetail): Promise<void> {
@@ -17,8 +28,15 @@ export async function animateShow(component: NileDetail): Promise<void> {
   await stopAnimations(component.body);
   component.body.hidden = false;
 
+  const previewHeight = getPreviewHeight(component);
   const { keyframes, options } = getAnimation(component, 'detail.show', { dir: 'ltr' });
-  await animateTo(component.body, shimKeyframesHeightAuto(keyframes, component.body.scrollHeight), options);
+  const frames = previewHeight > 0
+    ? [
+        { height: `${previewHeight}px`, opacity: '1' },
+        { height: 'auto', opacity: '1' }
+      ]
+    : keyframes;
+  await animateTo(component.body, shimKeyframesHeightAuto(frames, component.body.scrollHeight), options);
   component.body.style.height = 'auto';
 
   component.emit('nile-after-show');
@@ -26,6 +44,7 @@ export async function animateShow(component: NileDetail): Promise<void> {
 
 /*
   Runs the hide animation on the detail body.
+  In preview mode the body collapses to the preview height and stays visible.
   Emits nile-hide (cancelable) before and nile-after-hide after the animation.
 */
 export async function animateHide(component: NileDetail): Promise<void> {
@@ -37,10 +56,21 @@ export async function animateHide(component: NileDetail): Promise<void> {
 
   await stopAnimations(component.body);
 
+  const previewHeight = getPreviewHeight(component);
   const { keyframes, options } = getAnimation(component, 'detail.hide', { dir: 'ltr' });
-  await animateTo(component.body, shimKeyframesHeightAuto(keyframes, component.body.scrollHeight), options);
-  component.body.hidden = true;
-  component.body.style.height = 'auto';
+
+  if (previewHeight > 0) {
+    const frames = [
+      { height: 'auto', opacity: '1' },
+      { height: `${previewHeight}px`, opacity: '1' }
+    ];
+    await animateTo(component.body, shimKeyframesHeightAuto(frames, component.body.scrollHeight), options);
+    component.body.style.height = `${previewHeight}px`;
+  } else {
+    await animateTo(component.body, shimKeyframesHeightAuto(keyframes, component.body.scrollHeight), options);
+    component.body.hidden = true;
+    component.body.style.height = 'auto';
+  }
 
   component.emit('nile-after-hide');
 }

package/vscode-html-custom-data.json

@@ -1896,7 +1896,7 @@
     },
     {
       "name": "nile-detail",
-      "description": "Events:\n\n  * `nile-page-load` {`CustomEvent<{ pageIndex: number; offset: number; limit: number; rows: any; }>`} - \n\n  * `nile-page-error` {`CustomEvent<{ pageIndex: number; offset: number; limit: number; error: any; }>`} - \n\n  * `nile-change` {`CustomEvent<{ selected: string[]; }>`} - \n\n  * `nile-search` {`CustomEvent<{ value: string; }>`} - \n\nAttributes:\n\n  * `open` {`boolean`} - \n\n  * `heading` {`string`} - \n\n  * `description` {`string`} - \n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `variant` {`NileDetailVariant`} - \n\n  * `allow-html-label` {`boolean`} - \n\n  * `disable-local-search` {`boolean`} - \n\n  * `total-count` {`number | undefined`} - \n\n  * `page-size` {`number`} - \n\n  * `placeholder-label` {`string`} - \n\n  * `search-placeholder` {`string`} - \n\n  * `items-label` {`string`} - \n\n  * `restore-label` {`string`} - \n\n  * `clear-label` {`string`} - \n\n  * `grid-rows` {`number`} - \n\n  * `grid-columns` {`number`} - \n\n  * `min-column-width` {`string`} - \n\n  * `lane-height` {`number`} - \n\n  * `orientation` {`\"vertical\" | \"horizontal\" | \"both\"`} - \n\n  * `max-height` {`string`} - \n\n  * `matrix-columns` {`number`} - \n\n  * `virtualize` {`boolean`} - \n\n  * `virtualize-threshold` {`number`} - \n\n  * `overscan` {`number`} - \n\n  * `show-selected-toggle` {`boolean`} - \n\n  * `selected-only-label` {`string`} - \n\n  * `show-all-label` {`string`} - \n\nProperties:\n\n  * `styles` - \n\n  * `detail` {`HTMLDetailsElement`} - \n\n  * `header` {`HTMLElement`} - \n\n  * `body` {`HTMLElement`} - \n\n  * `open` {`boolean`} - \n\n  * `heading` {`string`} - \n\n  * `description` {`string`} - \n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `variant` {`NileDetailVariant`} - \n\n  * `items` {`SelectionItem[]`} - \n\n  * `selected` {`string[]`} - \n\n  * `renderItemConfig` {`NileDetailRenderItemConfig | undefined`} - \n\n  * `allowHtmlLabel` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `totalCount` {`number | undefined`} - \n\n  * `pageSize` {`number`} - \n\n  * `fetchPage` - \n\n  * `placeholderLabel` {`string`} - \n\n  * `config` {`NileDetailSelectionConfig | undefined`} - \n\n  * `searchPlaceholder` {`string`} - \n\n  * `itemsLabel` {`string`} - \n\n  * `restoreLabel` {`string`} - \n\n  * `clearLabel` {`string`} - \n\n  * `gridRows` {`number`} - \n\n  * `gridColumns` {`number`} - \n\n  * `minColumnWidth` {`string`} - \n\n  * `laneHeight` {`number`} - \n\n  * `orientation` {`\"vertical\" | \"horizontal\" | \"both\"`} - \n\n  * `maxHeight` {`string`} - \n\n  * `matrixColumns` {`number`} - \n\n  * `virtualize` {`boolean`} - \n\n  * `virtualizeThreshold` {`number`} - \n\n  * `overscan` {`number`} - \n\n  * `_detailOpen` {`boolean`} - \n\n  * `_hasSlottedContent` {`boolean`} - \n\n  * `_searchTerm` {`string`} - \n\n  * `_selectedSet` {`Set<string>`} - \n\n  * `_showSelectedOnly` {`boolean`} - \n\n  * `showSelectedToggle` {`boolean`} - \n\n  * `selectedOnlyLabel` {`string`} - \n\n  * `showAllLabel` {`string`} - \n\n  * `_restoreDefaults` {`string[] | null`} - \n\n  * `_gridResizeObserver` - \n\n  * `_virtCtrl` - \n\n  * `_rowVirtCtrl` - \n\n  * `_colVirtCtrl` - \n\n  * `_pageCache` - \n\n  * `_pendingPages` - \n\n  * `_isSelectionVariant` {`boolean`} - True for any variant that renders the selection UI/behavior.\n\n  * `_isLightVariant` {`boolean`} - True for any variant that applies the light styling.\n\n  * `_isInfiniteMode` {`boolean`} - \n\n  * `_isVirtualized` {`boolean`} - \n\n  * `_columnWidthPx` {`number`} - \n\n  * `_filteredItems` {`SelectionItem[]`} - \n\n  * `_allChecked` {`boolean`} - \n\n  * `_indeterminate` {`boolean`} - \n\n  * `_countLabel` {`string`} - \n\n  * `_summaryLabel` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Events:\n\n  * `nile-page-load` {`CustomEvent<{ pageIndex: number; offset: number; limit: number; rows: any; }>`} - \n\n  * `nile-page-error` {`CustomEvent<{ pageIndex: number; offset: number; limit: number; error: any; }>`} - \n\n  * `nile-change` {`CustomEvent<{ selected: string[]; }>`} - \n\n  * `nile-search` {`CustomEvent<{ value: string; }>`} - \n\nAttributes:\n\n  * `open` {`boolean`} - \n\n  * `heading` {`string`} - \n\n  * `description` {`string`} - \n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `preview` {`boolean`} - When set, the closed state shows a preview of the body content instead of hiding it.\n\n  * `preview-percentage` {`number`} - Percentage (0–100) of the content height shown while previewing.\n\n  * `variant` {`NileDetailVariant`} - \n\n  * `allow-html-label` {`boolean`} - \n\n  * `disable-local-search` {`boolean`} - \n\n  * `total-count` {`number | undefined`} - \n\n  * `page-size` {`number`} - \n\n  * `placeholder-label` {`string`} - \n\n  * `search-placeholder` {`string`} - \n\n  * `items-label` {`string`} - \n\n  * `restore-label` {`string`} - \n\n  * `clear-label` {`string`} - \n\n  * `grid-rows` {`number`} - \n\n  * `grid-columns` {`number`} - \n\n  * `min-column-width` {`string`} - \n\n  * `lane-height` {`number`} - \n\n  * `orientation` {`\"vertical\" | \"horizontal\" | \"both\"`} - \n\n  * `max-height` {`string`} - \n\n  * `matrix-columns` {`number`} - \n\n  * `virtualize` {`boolean`} - \n\n  * `virtualize-threshold` {`number`} - \n\n  * `overscan` {`number`} - \n\n  * `show-selected-toggle` {`boolean`} - \n\n  * `selected-only-label` {`string`} - \n\n  * `show-all-label` {`string`} - \n\nProperties:\n\n  * `styles` - \n\n  * `detail` {`HTMLDetailsElement`} - \n\n  * `header` {`HTMLElement`} - \n\n  * `body` {`HTMLElement`} - \n\n  * `open` {`boolean`} - \n\n  * `heading` {`string`} - \n\n  * `description` {`string`} - \n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `preview` {`boolean`} - When set, the closed state shows a preview of the body content instead of hiding it.\n\n  * `previewPercentage` {`number`} - Percentage (0–100) of the content height shown while previewing.\n\n  * `variant` {`NileDetailVariant`} - \n\n  * `items` {`SelectionItem[]`} - \n\n  * `selected` {`string[]`} - \n\n  * `renderItemConfig` {`NileDetailRenderItemConfig | undefined`} - \n\n  * `allowHtmlLabel` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `totalCount` {`number | undefined`} - \n\n  * `pageSize` {`number`} - \n\n  * `fetchPage` - \n\n  * `placeholderLabel` {`string`} - \n\n  * `config` {`NileDetailSelectionConfig | undefined`} - \n\n  * `searchPlaceholder` {`string`} - \n\n  * `itemsLabel` {`string`} - \n\n  * `restoreLabel` {`string`} - \n\n  * `clearLabel` {`string`} - \n\n  * `gridRows` {`number`} - \n\n  * `gridColumns` {`number`} - \n\n  * `minColumnWidth` {`string`} - \n\n  * `laneHeight` {`number`} - \n\n  * `orientation` {`\"vertical\" | \"horizontal\" | \"both\"`} - \n\n  * `maxHeight` {`string`} - \n\n  * `matrixColumns` {`number`} - \n\n  * `virtualize` {`boolean`} - \n\n  * `virtualizeThreshold` {`number`} - \n\n  * `overscan` {`number`} - \n\n  * `_detailOpen` {`boolean`} - \n\n  * `_hasSlottedContent` {`boolean`} - \n\n  * `_searchTerm` {`string`} - \n\n  * `_selectedSet` {`Set<string>`} - \n\n  * `_showSelectedOnly` {`boolean`} - \n\n  * `showSelectedToggle` {`boolean`} - \n\n  * `selectedOnlyLabel` {`string`} - \n\n  * `showAllLabel` {`string`} - \n\n  * `_restoreDefaults` {`string[] | null`} - \n\n  * `_gridResizeObserver` - \n\n  * `_virtCtrl` - \n\n  * `_rowVirtCtrl` - \n\n  * `_colVirtCtrl` - \n\n  * `_pageCache` - \n\n  * `_pendingPages` - \n\n  * `_isSelectionVariant` {`boolean`} - True for any variant that renders the selection UI/behavior.\n\n  * `_isLightVariant` {`boolean`} - True for any variant that applies the light styling.\n\n  * `_previewEnabled` {`boolean`} - True when preview mode is on with a usable percentage.\n\n  * `_isPreviewActive` {`boolean`} - True when the closed state should currently render the preview.\n\n  * `_isInfiniteMode` {`boolean`} - \n\n  * `_isVirtualized` {`boolean`} - \n\n  * `_columnWidthPx` {`number`} - \n\n  * `_filteredItems` {`SelectionItem[]`} - \n\n  * `_allChecked` {`boolean`} - \n\n  * `_indeterminate` {`boolean`} - \n\n  * `_countLabel` {`string`} - \n\n  * `_summaryLabel` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "open",
@@ -1928,6 +1928,15 @@
           "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "preview",
+          "description": "`preview` {`boolean`} - When set, the closed state shows a preview of the body content instead of hiding it.\n\nProperty: preview\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "preview-percentage",
+          "description": "`preview-percentage` {`number`} - Percentage (0–100) of the content height shown while previewing.\n\nProperty: previewPercentage\n\nDefault: 30"
+        },
         {
           "name": "variant",
           "description": "`variant` {`NileDetailVariant`} - \n\nProperty: variant\n\nDefault: default",