@aquera/nile-elements 1.7.5 → 1.7.7

package/package.json

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

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

@@ -149,6 +149,11 @@ export const styles = css`
     padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
 
+  .detail__content--empty {
+    display: none;
+    padding: 0;
+  }
+
   /* ── Selection variant ──────────────────────────────────────────────────── */
 
   .detail__selection-label {
@@ -193,6 +198,23 @@ export const styles = css`
     min-width: 0;
   }
 
+  .detail__selection-search-slot {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .detail__selection-search-slot::slotted(*) {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .detail__selected-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
   .detail__selection-actions {
     display: flex;
     align-items: center;
@@ -206,7 +228,7 @@ export const styles = css`
     gap: 8px 24px;
     overflow-x: auto;
     overflow-y: hidden;
-    padding-bottom: 8px;
+    padding: 4px 4px 8px;
     scroll-snap-type: x proximity;
   }
 
@@ -253,7 +275,8 @@ export const styles = css`
     min-width: 0;
     display: block;
     max-width: 100%;
-    overflow: hidden;
+    overflow: visible;
+    padding-left: 4px;
   }
 
   .detail__selection-checkbox {

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

@@ -98,8 +98,12 @@ export interface NileDetailSelectionConfig {
   labels?: {
     restore?: string;
     clear?: string;
+    selectedOnly?: string;
+    showAll?: string;
   };
 
+  showSelectedToggle?: boolean;
+
   // Inherited / passthrough
   open?: boolean;
   disabled?: boolean;
@@ -176,10 +180,20 @@ export class NileDetail extends NileElement {
 
   @state() private _detailOpen = false;
 
+  @state() private _hasSlottedContent = false;
+
   @state() private _searchTerm = '';
 
   @state() private _selectedSet: Set<string> = new Set();
 
+  @state() private _showSelectedOnly = false;
+
+  @property({ attribute: 'show-selected-toggle', type: Boolean, reflect: true }) showSelectedToggle = false;
+
+  @property({ attribute: 'selected-only-label', type: String }) selectedOnlyLabel = 'Selected';
+
+  @property({ attribute: 'show-all-label', type: String }) showAllLabel = 'Show all';
+
   private _restoreDefaults: string[] | null = null;
 
   private _gridResizeObserver: ResizeObserver | null = null;
@@ -510,9 +524,13 @@ export class NileDetail extends NileElement {
     }
 
     if (c.labels) {
-      if (c.labels.restore !== undefined) this.restoreLabel = c.labels.restore;
-      if (c.labels.clear   !== undefined) this.clearLabel   = c.labels.clear;
+      if (c.labels.restore      !== undefined) this.restoreLabel      = c.labels.restore;
+      if (c.labels.clear        !== undefined) this.clearLabel        = c.labels.clear;
+      if (c.labels.selectedOnly !== undefined) this.selectedOnlyLabel = c.labels.selectedOnly;
+      if (c.labels.showAll      !== undefined) this.showAllLabel      = c.labels.showAll;
     }
+
+    if (c.showSelectedToggle !== undefined) this.showSelectedToggle = c.showSelectedToggle;
   }
 
   private _syncSelectedFromProperty() {
@@ -575,14 +593,27 @@ export class NileDetail extends NileElement {
   }
 
   private get _filteredItems(): SelectionItem[] {
-    if (this.disableLocalSearch) return this.items;
+    let source: SelectionItem[] = this.items;
+
+    if (this._showSelectedOnly) {
+      source = source.filter(item => this._selectedSet.has(this._getItemValue(item)));
+    }
+
+    if (this.disableLocalSearch) return source;
     const q = this._searchTerm.trim().toLowerCase();
-    if (!q) return this.items;
-    return this.items.filter(item =>
+    if (!q) return source;
+    return source.filter(item =>
       this._getItemSearchText(item).toLowerCase().includes(q)
     );
   }
 
+  private _onToggleSelectedOnly(event: Event) {
+    event.preventDefault();
+    const next = !this._showSelectedOnly;
+    if (next && this._selectedSet.size === 0) return;
+    this._showSelectedOnly = next;
+  }
+
   private _selectableValues(): string[] {
     const source: SelectionItem[] = this._isInfiniteMode
       ? (Array.from(this._pageCache.values()).flat() as SelectionItem[])
@@ -675,9 +706,20 @@ export class NileDetail extends NileElement {
   private _onClear(event: Event) {
     event.preventDefault();
     this._selectedSet = new Set();
+    this._showSelectedOnly = false;
     this._emitSelectionChange();
   }
 
+  private _handleDefaultSlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+    const nodes = slot.assignedNodes({ flatten: true });
+    this._hasSlottedContent = nodes.some(node => {
+      if (node.nodeType === Node.ELEMENT_NODE) return true;
+      if (node.nodeType === Node.TEXT_NODE) return !!(node.textContent && node.textContent.trim());
+      return false;
+    });
+  }
+
   private _stopHeaderToggle(event: Event) {
     event.stopPropagation();
   }
@@ -761,21 +803,38 @@ export class NileDetail extends NileElement {
 
     return html`
       <div part="selection-toolbar" class="detail__selection-toolbar">
-        <nile-input
-          part="search"
-          class="detail__selection-search"
-          placeholder=${this.searchPlaceholder}
-          clearable
-          .value=${this._searchTerm}
-          @nile-input=${this._onSearchInput}
-          @nile-clear=${this._onSearchClear}
-        >
-          <nile-icon slot="prefix" name="search" library="system"></nile-icon>
-        </nile-input>
-        <div part="selection-actions" class="detail__selection-actions">
+      <slot name="tooblar-actions-prefix"></slot>
+        <slot name="toolbar-search" class="detail__selection-search-slot">
+          <nile-input
+            part="search"
+            class="detail__selection-search"
+            placeholder=${this.searchPlaceholder}
+            clearable
+            .value=${this._searchTerm}
+            @nile-input=${this._onSearchInput}
+            @nile-clear=${this._onSearchClear}
+          >
+            <nile-icon slot="prefix" name="search" library="system"></nile-icon>
+          </nile-input>
+        </slot>
+        <slot name="toolbar-actions" class="detail__selection-actions">
+          ${this.showSelectedToggle
+            ? html`
+                <nile-link
+                  href="#"
+                  variant="subtle"
+                  class="detail__selected-toggle"
+                  @click=${this._onToggleSelectedOnly}
+                >
+                  <nile-icon slot="prefix" name="filter" library="system"></nile-icon>
+                  ${this._showSelectedOnly ? this.showAllLabel : this.selectedOnlyLabel}
+                </nile-link>
+              `
+            : nothing}
           <nile-link href="#" variant="subtle" @click=${this._onRestore}>${this.restoreLabel}</nile-link>
           <nile-link href="#" variant="subtle" @click=${this._onClear}>${this.clearLabel}</nile-link>
-        </div>
+        </slot>
+        <slot name="tooblar-actions-suffix"></slot>
       </div>
       <div
         part="selection-grid"
@@ -996,7 +1055,14 @@ export class NileDetail extends NileElement {
           ${isSelection
             ? html`<div part="selection-content" class="detail__selection-content">${this._renderSelectionBody()}</div>`
             : ''}
-          <slot id="content" class="detail__content"></slot>
+          <slot
+            id="content"
+            class=${classMap({
+              'detail__content': true,
+              'detail__content--empty': !this._hasSlottedContent,
+            })}
+            @slotchange=${this._handleDefaultSlotChange}
+          ></slot>
         </div>
       </details>
     `;

package/vscode-html-custom-data.json

@@ -1808,7 +1808,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\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  * `_searchTerm` {`string`} - \n\n  * `_selectedSet` {`Set<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  * `_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  * `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  * `_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",
@@ -1943,6 +1943,19 @@
           "name": "overscan",
           "description": "`overscan` {`number`} - \n\nProperty: overscan\n\nDefault: 4"
         },
+        {
+          "name": "show-selected-toggle",
+          "description": "`show-selected-toggle` {`boolean`} - \n\nProperty: showSelectedToggle\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "selected-only-label",
+          "description": "`selected-only-label` {`string`} - \n\nProperty: selectedOnlyLabel\n\nDefault: Selected"
+        },
+        {
+          "name": "show-all-label",
+          "description": "`show-all-label` {`string`} - \n\nProperty: showAllLabel\n\nDefault: Show all"
+        },
         {
           "name": "onnile-page-load",
           "description": "`nile-page-load` {`CustomEvent<{ pageIndex: number; offset: number; limit: number; rows: any; }>`} - "