@sebgroup/green-core 3.17.0 → 3.17.1

package/components/table/table.component.d.ts

@@ -164,6 +164,7 @@ export declare class GdsTable<T extends Types.Row = Types.Row> extends GdsTable_
     private _onRowsChange;
     private _onColumnsChange;
     connectedCallback(): void;
+    private _handleLightDOMSlotsChange;
     updated(changedProperties: Map<string, unknown>): void;
     render(): any;
     /**

package/components/table/table.component.js

@@ -5,16 +5,19 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _cache, _cacheDuration, _isResponsiveStacked, isResponsiveStacked_get, _isExpandableEnabled, isExpandableEnabled_get, _isSelectableEnabled, isSelectableEnabled_get, _Density, Density_get, _expandTransitionTimers, _expandedLoadingExitDuration, _hasSelection, hasSelection_get, _isAllSelected, isAllSelected_get, _isPartialSelection, isPartialSelection_get, _expandableIndices, expandableIndices_get, _isAllExpanded, isAllExpanded_get, _getCacheKey, getCacheKey_fn, _clearExpansionTransitionTimer, clearExpansionTransitionTimer_fn, _clearExpansionLoadingState, clearExpansionLoadingState_fn, _clearAllExpansionLoadingStates, clearAllExpansionLoadingStates_fn, _scheduleExpansionContentReveal, scheduleExpansionContentReveal_fn, _isCacheValid, isCacheValid_fn, _getControlledColumnSort, getControlledColumnSort_fn, _loadData, loadData_fn, _getStickyBorderKeys, getStickyBorderKeys_fn, _updateStickyOffsets, updateStickyOffsets_fn, _getRowKey, getRowKey_fn, _renderCellWrapped, renderCellWrapped_fn, _renderMobileLabel, renderMobileLabel_fn, _renderSlotElement, renderSlotElement_fn, _renderCellContent, renderCellContent_fn, _renderSortIcon, renderSortIcon_fn, _hasHeaderContent, hasHeaderContent_fn, _renderHeaderControls, renderHeaderControls_fn, _renderColumnHeader, renderColumnHeader_fn, _renderSelectableHeader, renderSelectableHeader_fn, _renderExpandableHeader, renderExpandableHeader_fn, _getRowSubRowsSource, getRowSubRowsSource_fn, _getRowFullContentSource, getRowFullContentSource_fn, _getExpandedRows, getExpandedRows_fn, _hasAsyncSubRows, hasAsyncSubRows_fn, _hasAsyncFullContent, hasAsyncFullContent_fn, _getSubRowCount, getSubRowCount_fn, _hasExpandedFullSlot, hasExpandedFullSlot_fn, _hasExpandedFullContent, hasExpandedFullContent_fn, _isRowExpandable, isRowExpandable_fn, _getExpandedGroupId, getExpandedGroupId_fn, _getRenderedColumnCount, getRenderedColumnCount_fn, _renderColumnHeaders, renderColumnHeaders_fn, _renderTableHeader, renderTableHeader_fn, _renderTableCell, renderTableCell_fn, _renderExpandableCell, renderExpandableCell_fn, _renderSelectableCell, renderSelectableCell_fn, _renderRowCells, renderRowCells_fn, _renderFullWidthDetailsRow, renderFullWidthDetailsRow_fn, _renderExpandedLoadingRow, renderExpandedLoadingRow_fn, _renderExpandedLoadingRows, renderExpandedLoadingRows_fn, _renderExpandedFullLoadingRow, renderExpandedFullLoadingRow_fn, _getExpandedChildRowClasses, getExpandedChildRowClasses_fn, _getTableRowClasses, getTableRowClasses_fn, _getRowAriaExpanded, getRowAriaExpanded_fn, _getTableRowPresentation, getTableRowPresentation_fn, _renderExpandedChildRow, renderExpandedChildRow_fn, _getRowExpansionLoadingKind, getRowExpansionLoadingKind_fn, _getRowExpansionState, getRowExpansionState_fn, _renderExpandedRowContent, renderExpandedRowContent_fn, _renderTableRow, renderTableRow_fn, _renderCheckbox, renderCheckbox_fn, _renderSkeletonCell, renderSkeletonCell_fn, _renderSkeletonRow, renderSkeletonRow_fn, _renderTableBody, renderTableBody_fn, _renderTableFoot, renderTableFoot_fn, _renderTable, renderTable_fn, _renderErrorState, renderErrorState_fn, _renderEmptyState, renderEmptyState_fn, _renderFooter, renderFooter_fn, _renderHeadline, renderHeadline_fn, _handleSearch, handleSearch_fn, _handleSearchClear, handleSearchClear_fn, _handleSort, handleSort_fn, _handlePageChange, handlePageChange_fn, _handlePageSizeChange, handlePageSizeChange_fn, _handleColumnVisibility, handleColumnVisibility_fn, _handleSelectAll, handleSelectAll_fn, _handleRowSelect, handleRowSelect_fn, _handleExpandToggle, handleExpandToggle_fn, _handleExpandAll, handleExpandAll_fn, _emitExpandChange, emitExpandChange_fn, _resolveExpandedContent, resolveExpandedContent_fn, _setRowExpanded, setRowExpanded_fn, _selectAllInternal, selectAllInternal_fn, _clearSelectionInternal, clearSelectionInternal_fn, _emitSelectionChange, emitSelectionChange_fn, _initializeScrollTracking, initializeScrollTracking_fn, _updateVerticalScrollState, updateVerticalScrollState_fn, _updateHorizontalScrollState, updateHorizontalScrollState_fn;
+var _cache, _cacheDuration, _isResponsiveStacked, isResponsiveStacked_get, _isExpandableEnabled, isExpandableEnabled_get, _isSelectableEnabled, isSelectableEnabled_get, _Density, Density_get, _expandTransitionTimers, _expandedLoadingExitDuration, _expandedLoadingDelay, _expandedFullSlotKeys, _pendingExpandedFullSlotRefresh, _hasSelection, hasSelection_get, _isAllSelected, isAllSelected_get, _isPartialSelection, isPartialSelection_get, _expandableIndices, expandableIndices_get, _isAllExpanded, isAllExpanded_get, _getCacheKey, getCacheKey_fn, _clearExpansionTransitionTimer, clearExpansionTransitionTimer_fn, _clearExpansionLoadingState, clearExpansionLoadingState_fn, _clearAllExpansionLoadingStates, clearAllExpansionLoadingStates_fn, _scheduleExpansionContentReveal, scheduleExpansionContentReveal_fn, _isCacheValid, isCacheValid_fn, _getControlledColumnSort, getControlledColumnSort_fn, _loadData, loadData_fn, _queueExpandedFullSlotRefresh, queueExpandedFullSlotRefresh_fn, _getStickyBorderKeys, getStickyBorderKeys_fn, _updateStickyOffsets, updateStickyOffsets_fn, _getRowKey, getRowKey_fn, _renderCellWrapped, renderCellWrapped_fn, _renderMobileLabel, renderMobileLabel_fn, _renderSlotElement, renderSlotElement_fn, _renderCellContent, renderCellContent_fn, _renderSortIcon, renderSortIcon_fn, _hasHeaderContent, hasHeaderContent_fn, _renderHeaderControls, renderHeaderControls_fn, _renderColumnHeader, renderColumnHeader_fn, _renderSelectableHeader, renderSelectableHeader_fn, _renderExpandableHeader, renderExpandableHeader_fn, _getRowSubRowsSource, getRowSubRowsSource_fn, _getRowFullContentSource, getRowFullContentSource_fn, _getExpandedRows, getExpandedRows_fn, _hasAsyncSubRows, hasAsyncSubRows_fn, _hasAsyncFullContent, hasAsyncFullContent_fn, _getSubRowCount, getSubRowCount_fn, _hasExpandedFullSlot, hasExpandedFullSlot_fn, _hasExpandedFullContent, hasExpandedFullContent_fn, _refreshExpandedFullSlotKeys, refreshExpandedFullSlotKeys_fn, _isRowExpandable, isRowExpandable_fn, _getExpandedGroupId, getExpandedGroupId_fn, _getRenderedColumnCount, getRenderedColumnCount_fn, _renderColumnHeaders, renderColumnHeaders_fn, _renderTableHeader, renderTableHeader_fn, _renderTableCell, renderTableCell_fn, _renderExpandableCell, renderExpandableCell_fn, _renderSelectableCell, renderSelectableCell_fn, _renderRowCells, renderRowCells_fn, _renderFullWidthDetailsRow, renderFullWidthDetailsRow_fn, _renderExpandedLoadingRow, renderExpandedLoadingRow_fn, _renderExpandedLoadingRows, renderExpandedLoadingRows_fn, _renderExpandedFullLoadingRow, renderExpandedFullLoadingRow_fn, _getExpandedChildRowClasses, getExpandedChildRowClasses_fn, _getTableRowClasses, getTableRowClasses_fn, _getRowAriaExpanded, getRowAriaExpanded_fn, _getTableRowPresentation, getTableRowPresentation_fn, _renderExpandedChildRow, renderExpandedChildRow_fn, _getRowExpansionLoadingKind, getRowExpansionLoadingKind_fn, _getRowExpansionState, getRowExpansionState_fn, _renderExpandedRowContent, renderExpandedRowContent_fn, _renderTableRow, renderTableRow_fn, _renderCheckbox, renderCheckbox_fn, _renderSkeletonCell, renderSkeletonCell_fn, _renderSkeletonRow, renderSkeletonRow_fn, _renderTableBody, renderTableBody_fn, _renderTableFoot, renderTableFoot_fn, _renderTable, renderTable_fn, _renderErrorState, renderErrorState_fn, _renderEmptyState, renderEmptyState_fn, _renderFooter, renderFooter_fn, _renderHeadline, renderHeadline_fn, _handleSearch, handleSearch_fn, _handleSearchClear, handleSearchClear_fn, _handleSort, handleSort_fn, _handlePageChange, handlePageChange_fn, _handlePageSizeChange, handlePageSizeChange_fn, _handleColumnVisibility, handleColumnVisibility_fn, _handleSelectAll, handleSelectAll_fn, _handleRowSelect, handleRowSelect_fn, _handleExpandToggle, handleExpandToggle_fn, _handleExpandAll, handleExpandAll_fn, _emitExpandChange, emitExpandChange_fn, _resolveExpandedContent, resolveExpandedContent_fn, _setRowExpanded, setRowExpanded_fn, _selectAllInternal, selectAllInternal_fn, _clearSelectionInternal, clearSelectionInternal_fn, _emitSelectionChange, emitSelectionChange_fn, _initializeScrollTracking, initializeScrollTracking_fn, _updateVerticalScrollState, updateVerticalScrollState_fn, _updateHorizontalScrollState, updateHorizontalScrollState_fn;
 import { localized, msg } from "@lit/localize";
 import { property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { guard } from "lit/directives/guard.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 import { GdsElement } from "../../gds-element.js";
 import { watchMediaQuery } from "../../utils/decorators/index.js";
 import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
+import { observeLightDOM } from "../../utils/decorators/observe-light-dom.js";
 import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
 import { watch } from "../../utils/decorators/watch.js";
 import { forSpaceTokensAndCustomValues } from "../../utils/helpers/index.js";
@@ -55,6 +58,7 @@ let GdsTable = class extends withSizeXProps(
     __privateAdd(this, _isCacheValid);
     __privateAdd(this, _getControlledColumnSort);
     __privateAdd(this, _loadData);
+    __privateAdd(this, _queueExpandedFullSlotRefresh);
     /**
      * Returns the column keys for the rightmost sticky-left and leftmost sticky-right
      * visible columns — these are the ones that get the divider border.
@@ -99,6 +103,7 @@ let GdsTable = class extends withSizeXProps(
     __privateAdd(this, _getSubRowCount);
     __privateAdd(this, _hasExpandedFullSlot);
     __privateAdd(this, _hasExpandedFullContent);
+    __privateAdd(this, _refreshExpandedFullSlotKeys);
     __privateAdd(this, _isRowExpandable);
     __privateAdd(this, _getExpandedGroupId);
     __privateAdd(this, _getRenderedColumnCount);
@@ -241,6 +246,9 @@ let GdsTable = class extends withSizeXProps(
     this._error = null;
     __privateAdd(this, _expandTransitionTimers, /* @__PURE__ */ new Map());
     __privateAdd(this, _expandedLoadingExitDuration, 140);
+    __privateAdd(this, _expandedLoadingDelay, 100);
+    __privateAdd(this, _expandedFullSlotKeys, /* @__PURE__ */ new Set());
+    __privateAdd(this, _pendingExpandedFullSlotRefresh, false);
   }
   _handleMobile(matches) {
     this._isMobile = matches;
@@ -282,8 +290,12 @@ let GdsTable = class extends withSizeXProps(
     this.updateComplete.then(() => {
       __privateMethod(this, _initializeScrollTracking, initializeScrollTracking_fn).call(this);
       __privateMethod(this, _updateStickyOffsets, updateStickyOffsets_fn).call(this);
+      __privateMethod(this, _refreshExpandedFullSlotKeys, refreshExpandedFullSlotKeys_fn).call(this);
     });
   }
+  _handleLightDOMSlotsChange() {
+    __privateMethod(this, _queueExpandedFullSlotRefresh, queueExpandedFullSlotRefresh_fn).call(this);
+  }
   updated(changedProperties) {
     super.updated(changedProperties);
     __privateMethod(this, _updateStickyOffsets, updateStickyOffsets_fn).call(this);
@@ -399,6 +411,9 @@ Density_get = function() {
 };
 _expandTransitionTimers = new WeakMap();
 _expandedLoadingExitDuration = new WeakMap();
+_expandedLoadingDelay = new WeakMap();
+_expandedFullSlotKeys = new WeakMap();
+_pendingExpandedFullSlotRefresh = new WeakMap();
 _hasSelection = new WeakSet();
 hasSelection_get = function() {
   return this._selected.size > 0;
@@ -565,6 +580,16 @@ loadData_fn = async function() {
     this._loading = false;
   }
 };
+_queueExpandedFullSlotRefresh = new WeakSet();
+queueExpandedFullSlotRefresh_fn = function() {
+  if (__privateGet(this, _pendingExpandedFullSlotRefresh))
+    return;
+  __privateSet(this, _pendingExpandedFullSlotRefresh, true);
+  queueMicrotask(() => {
+    __privateSet(this, _pendingExpandedFullSlotRefresh, false);
+    __privateMethod(this, _refreshExpandedFullSlotKeys, refreshExpandedFullSlotKeys_fn).call(this);
+  });
+};
 _getStickyBorderKeys = new WeakSet();
 getStickyBorderKeys_fn = function() {
   const visible = this.columns.filter(
@@ -883,13 +908,35 @@ getSubRowCount_fn = function(row, index) {
 };
 _hasExpandedFullSlot = new WeakSet();
 hasExpandedFullSlot_fn = function(row, index) {
-  const rowKey = __privateMethod(this, _getRowKey, getRowKey_fn).call(this, row, index);
-  return Boolean(this.querySelector(`[slot="expand:${rowKey}:full"]`));
+  const rowKey = String(__privateMethod(this, _getRowKey, getRowKey_fn).call(this, row, index));
+  return __privateGet(this, _expandedFullSlotKeys).has(rowKey);
 };
 _hasExpandedFullContent = new WeakSet();
 hasExpandedFullContent_fn = function(row, index) {
   return __privateMethod(this, _hasExpandedFullSlot, hasExpandedFullSlot_fn).call(this, row, index);
 };
+_refreshExpandedFullSlotKeys = new WeakSet();
+refreshExpandedFullSlotKeys_fn = function() {
+  const keys = /* @__PURE__ */ new Set();
+  this.querySelectorAll(
+    '[slot^="expand:"][slot$=":full"]'
+  ).forEach((el) => {
+    const slotName = el.getAttribute("slot");
+    if (!slotName)
+      return;
+    if (!slotName.startsWith("expand:") || !slotName.endsWith(":full")) {
+      return;
+    }
+    const rowKey = slotName.slice("expand:".length, -":full".length);
+    if (rowKey)
+      keys.add(rowKey);
+  });
+  const hasChanged = keys.size !== __privateGet(this, _expandedFullSlotKeys).size || [...keys].some((key) => !__privateGet(this, _expandedFullSlotKeys).has(key));
+  if (!hasChanged)
+    return;
+  __privateSet(this, _expandedFullSlotKeys, keys);
+  this.requestUpdate();
+};
 _isRowExpandable = new WeakSet();
 isRowExpandable_fn = function(row, index) {
   if (__privateGet(this, _isResponsiveStacked, isResponsiveStacked_get))
@@ -1311,7 +1358,22 @@ renderTableBody_fn = function() {
   }
   return html`
       <tbody aria-live="polite">
-        ${this._rowsState.map((row, index) => __privateMethod(this, _renderTableRow, renderTableRow_fn).call(this, row, index))}
+        ${repeat(
+    this._rowsState,
+    (row, index) => __privateMethod(this, _getRowKey, getRowKey_fn).call(this, row, index),
+    (row, index) => guard(
+      [
+        row,
+        this._selected.has(index),
+        this._expanded.has(index),
+        this._expanding.has(index),
+        this._completingExpansion.has(index),
+        this._expandedRowsCache.get(index),
+        this._expandedFullContentResolved.has(index)
+      ],
+      () => __privateMethod(this, _renderTableRow, renderTableRow_fn).call(this, row, index)
+    )
+  )}
       </tbody>
     `;
 };
@@ -1670,10 +1732,19 @@ resolveExpandedContent_fn = async function(row, index) {
   const fullPromise = hasFullContent ? fullContentSource() : void 0;
   const hasAsyncContent = Boolean(rowsPromise || fullPromise);
   let resolved = false;
-  const nextExpanding = new Set(this._expanding);
-  nextExpanding.add(index);
-  this._expanding = nextExpanding;
-  this.requestUpdate();
+  let didShowLoading = false;
+  let loadingTimer;
+  if (hasAsyncContent) {
+    loadingTimer = window.setTimeout(() => {
+      if (!this._expanded.has(index))
+        return;
+      const nextExpanding = new Set(this._expanding);
+      nextExpanding.add(index);
+      this._expanding = nextExpanding;
+      didShowLoading = true;
+      this.requestUpdate();
+    }, __privateGet(this, _expandedLoadingDelay));
+  }
   try {
     if (rowsPromise) {
       const rows = await rowsPromise;
@@ -1696,7 +1767,10 @@ resolveExpandedContent_fn = async function(row, index) {
       this._expandedRowsCache = nextCache;
     }
   } finally {
-    if (hasAsyncContent && resolved) {
+    if (loadingTimer !== void 0) {
+      window.clearTimeout(loadingTimer);
+    }
+    if (hasAsyncContent && resolved && didShowLoading) {
       __privateMethod(this, _scheduleExpansionContentReveal, scheduleExpansionContentReveal_fn).call(this, index);
     } else {
       __privateMethod(this, _clearExpansionLoadingState, clearExpansionLoadingState_fn).call(this, index);
@@ -1940,6 +2014,14 @@ __decorateClass([
 __decorateClass([
   watch("columns")
 ], GdsTable.prototype, "_onColumnsChange", 1);
+__decorateClass([
+  observeLightDOM({
+    childList: true,
+    attributes: true,
+    attributeFilter: ["slot"],
+    attributeOldValue: true
+  })
+], GdsTable.prototype, "_handleLightDOMSlotsChange", 1);
 GdsTable = __decorateClass([
   localized(),
   gdsCustomElement("gds-table", {

package/components/table/table.imports.d.ts

@@ -1,6 +1,5 @@
 import { GdsBadge, GdsButton, GdsContextMenu, GdsDivider, GdsDropdown, GdsFlex, GdsImg, GdsInput, GdsLink, GdsMenuItem, IconCrossSmall } from '../../pure';
 import { GdsPagination } from '../pagination/pagination.component';
 export { checkboxToggle as Checkbox } from '../../shared-styles/rbcb-toggle.template';
-export { accountsFormats as FormatAccount, dateTimeFormats as FormatDate, numberFormats as FormatNumber, } from '../formatted-text/formatters';
 export declare const Styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
 export declare const Dependencies: (typeof GdsMenuItem | typeof GdsButton | typeof IconCrossSmall | typeof GdsFlex | typeof GdsBadge | typeof GdsLink | typeof GdsContextMenu | typeof GdsDropdown | typeof GdsDivider | typeof GdsImg | typeof GdsPagination | typeof GdsInput)[];

package/components/table/table.imports.js

@@ -30,11 +30,6 @@ import { tokens } from "../../tokens.style.js";
 import { GdsPagination } from "../pagination/pagination.component.js";
 import { TableStyles } from "./table.styles.js";
 import { checkboxToggle } from "../../shared-styles/rbcb-toggle.template.js";
-import {
-  accountsFormats,
-  dateTimeFormats,
-  numberFormats
-} from "../formatted-text/formatters.js";
 const Styles = [tokens, checkboxStyles, TableStyles];
 const Dependencies = [
   GdsButton,
@@ -66,8 +61,5 @@ const Dependencies = [
 export {
   checkboxToggle as Checkbox,
   Dependencies,
-  accountsFormats as FormatAccount,
-  dateTimeFormats as FormatDate,
-  numberFormats as FormatNumber,
   Styles
 };

package/components/table/table.stories.data.d.ts

@@ -40,3 +40,8 @@ export declare const ExpandableFinance: {
     SlotContent: (rows: any[]) => TemplateResult;
     TfootSlotContent: (rows: any[]) => TemplateResult;
 };
+export declare const Performance: {
+    Columns: TableColumn[];
+    Data: (rowCount: number) => (request: TableRequest) => Promise<TableResponse<any>>;
+    SlotContent: (rows: any[]) => TemplateResult;
+};