@aquera/nile-elements 1.7.6 → 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.6",
+  "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,7 +149,7 @@ export const styles = css`
     padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
 
-  .detail__content:not(:has(*)) {
+  .detail__content--empty {
     display: none;
     padding: 0;
   }

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

@@ -180,6 +180,8 @@ export class NileDetail extends NileElement {
 
   @state() private _detailOpen = false;
 
+  @state() private _hasSlottedContent = false;
+
   @state() private _searchTerm = '';
 
   @state() private _selectedSet: Set<string> = new Set();
@@ -708,6 +710,16 @@ export class NileDetail extends NileElement {
     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();
   }
@@ -1043,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\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  * `_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`} - ",
+      "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",