@design.estate/dees-catalog 3.61.2 → 3.63.0

package/dist_ts_web/elements/00group-dataview/dees-table/styles.js

@@ -113,29 +113,48 @@ export const tableStyles = [
         border-bottom-width: 0px;
       }
 
+      /* Default mode (Mode B, page sticky): horizontal scroll lives on
+         .tableScroll (so wide tables don't get clipped by an ancestor
+         overflow:hidden such as dees-tile). Vertical sticky is handled by
+         a JS-managed floating header (.floatingHeader, position:fixed),
+         which is unaffected by ancestor overflow. */
       .tableScroll {
-        /* enable horizontal scroll only when content exceeds width */
+        position: relative;
         overflow-x: auto;
-        /* prevent vertical scroll inside the table container */
-        overflow-y: hidden;
-        /* avoid reserving extra space for classic scrollbars where possible */
+        overflow-y: visible;
+        scrollbar-gutter: stable;
+      }
+      /* Mode A, internal scroll: opt-in via fixed-height attribute.
+         The table scrolls inside its own box and the header sticks via plain CSS sticky. */
+      :host([fixed-height]) .tableScroll {
+        max-height: var(--table-max-height, 360px);
+        overflow: auto;
         scrollbar-gutter: stable both-edges;
       }
-      /* Hide horizontal scrollbar entirely when not using sticky header */
-      :host(:not([sticky-header])) .tableScroll {
-        -ms-overflow-style: none; /* IE/Edge */
-        scrollbar-width: none;   /* Firefox (hides both axes) */
+      :host([fixed-height]) .tableScroll::-webkit-scrollbar:horizontal {
+        height: 0px;
       }
-      :host(:not([sticky-header])) .tableScroll::-webkit-scrollbar {
-        display: none; /* Chrome/Safari */
+
+      /* Floating header overlay (Mode B). Position is managed by JS so it
+         escapes any ancestor overflow:hidden (position:fixed is not clipped
+         by overflow ancestors). */
+      .floatingHeader {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 100;
+        visibility: hidden;
+        overflow: hidden;
+        pointer-events: none;
       }
-      /* In sticky-header mode, hide only the horizontal scrollbar in WebKit/Blink */
-      :host([sticky-header]) .tableScroll::-webkit-scrollbar:horizontal {
-        height: 0px;
+      .floatingHeader.active {
+        visibility: visible;
       }
-      :host([sticky-header]) .tableScroll {
-        max-height: var(--table-max-height, 360px);
-        overflow: auto;
+      .floatingHeader table {
+        margin: 0;
+      }
+      .floatingHeader th {
+        pointer-events: auto;
       }
 
       table {
@@ -158,11 +177,20 @@ export const tableStyles = [
         background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
         border-bottom: 1px solid var(--dees-color-border-strong);
       }
-      :host([sticky-header]) thead th {
+      /* th needs its own background so sticky cells paint over scrolled rows
+         (browsers don't paint the <thead> box behind a sticky <th>). */
+      th {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
+      }
+      /* Mode A — internal scroll sticky */
+      :host([fixed-height]) thead th {
         position: sticky;
         top: 0;
         z-index: 2;
       }
+      :host([fixed-height]) thead tr.filtersRow th {
+        top: 36px; /* matches th { height: 36px } below */
+      }
       
       tbody tr {
         transition: background-color 0.15s ease;
@@ -275,6 +303,32 @@ export const tableStyles = [
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
         letter-spacing: -0.01em;
       }
+
+      th[role='columnheader']:hover {
+        color: var(--dees-color-text-primary);
+      }
+
+      th .sortArrow {
+        display: inline-block;
+        margin-left: 6px;
+        font-size: 10px;
+        line-height: 1;
+        opacity: 0.7;
+        vertical-align: middle;
+      }
+
+      th .sortBadge {
+        display: inline-block;
+        margin-left: 3px;
+        padding: 1px 5px;
+        font-size: 10px;
+        font-weight: 600;
+        line-height: 1;
+        color: ${cssManager.bdTheme('hsl(222.2 47.4% 30%)', 'hsl(217.2 91.2% 75%)')};
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.12)', 'hsl(217.2 91.2% 59.8% / 0.18)')};
+        border-radius: 999px;
+        vertical-align: middle;
+      }
       
       :host([show-vertical-lines]) th {
         border-right: 1px solid var(--dees-color-border-default);
@@ -436,4 +490,4 @@ export const tableStyles = [
       }
   `,
 ];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtZGF0YXZpZXcvZGVlcy10YWJsZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxHQUFHLEVBQWtCLE1BQU0sNkJBQTZCLENBQUM7QUFDOUUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDdEQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFFdEQsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFnQjtJQUN0QyxrQkFBa0I7SUFDbEIsVUFBVSxDQUFDLGFBQWE7SUFDeEIsR0FBRyxDQUFBOzs7Ozs7Ozs7dUJBU2tCLGtCQUFrQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O2lCQWlDeEIsVUFBVSxDQUFDLE9BQU8sQ0FBQyx3QkFBd0IsRUFBRSxzQkFBc0IsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O2lCQXlHcEUsVUFBVSxDQUFDLE9BQU8sQ0FBQyx3QkFBd0IsRUFBRSxzQkFBc0IsQ0FBQzs7OztzQkFJL0QsVUFBVSxDQUFDLE9BQU8sQ0FBQyxvQkFBb0IsRUFBRSxjQUFjLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3NCQXNDeEQsVUFBVSxDQUFDLE9BQU8sQ0FBQywrQkFBK0IsRUFBRSwrQkFBK0IsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7O3NCQWVwRixVQUFVLENBQUMsT0FBTyxDQUFDLCtCQUErQixFQUFFLCtCQUErQixDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7c0JBbURwRixVQUFVLENBQUMsT0FBTyxDQUFDLDhCQUE4QixFQUFFLCtCQUErQixDQUFDOzs7O3NCQUluRixVQUFVLENBQUMsT0FBTyxDQUFDLDhCQUE4QixFQUFFLDhCQUE4QixDQUFDOzs7Ozs7Ozs7aUJBU3ZGLFVBQVUsQ0FBQyxPQUFPLENBQUMsd0JBQXdCLEVBQUUsc0JBQXNCLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3NCQXdEL0QsVUFBVSxDQUFDLE9BQU8sQ0FBQyxnQkFBZ0IsRUFBRSxjQUFjLENBQUM7Ozs7Ozs7Ozs7d0JBVWxELFVBQVUsQ0FBQyxPQUFPLENBQUMsd0JBQXdCLEVBQUUsd0JBQXdCLENBQUM7OztnQ0FHOUQsVUFBVSxDQUFDLE9BQU8sQ0FBQyw4QkFBOEIsRUFBRSw4QkFBOEIsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7c0JBYzVGLFVBQVUsQ0FBQyxPQUFPLENBQUMsZ0JBQWdCLEVBQUUsY0FBYyxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7O2lCQWdCekQsVUFBVSxDQUFDLE9BQU8sQ0FBQyx3QkFBd0IsRUFBRSxzQkFBc0IsQ0FBQzs7Ozs7O3NCQU0vRCxVQUFVLENBQUMsT0FBTyxDQUFDLG9CQUFvQixFQUFFLGlCQUFpQixDQUFDO2lCQUNoRSxVQUFVLENBQUMsT0FBTyxDQUFDLGNBQWMsRUFBRSxlQUFlLENBQUM7Ozs7c0JBSTlDLFVBQVUsQ0FBQyxPQUFPLENBQUMsb0JBQW9CLEVBQUUsaUJBQWlCLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztpQkFvQ2hFLFVBQVUsQ0FBQyxPQUFPLENBQUMsd0JBQXdCLEVBQUUsc0JBQXNCLENBQUM7Ozs7Ozs7O3NCQVEvRCxVQUFVLENBQUMsT0FBTyxDQUFDLGlCQUFpQixFQUFFLGlCQUFpQixDQUFDO2lCQUM3RCxVQUFVLENBQUMsT0FBTyxDQUFDLGNBQWMsRUFBRSxlQUFlLENBQUM7Ozs7Ozs7R0FPakU7Q0FDRixDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtZGF0YXZpZXcvZGVlcy10YWJsZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxHQUFHLEVBQWtCLE1BQU0sNkJBQTZCLENBQUM7QUFDOUUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDdEQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFFdEQsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFnQjtJQUN0QyxrQkFBa0I7SUFDbEIsVUFBVSxDQUFDLGFBQWE7SUFDeEIsR0FBRyxDQUFBOzs7Ozs7Ozs7dUJBU2tCLGtCQUFrQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O2lCQWlDeEIsVUFBVSxDQUFDLE9BQU8sQ0FBQyx3QkFBd0IsRUFBRSxzQkFBc0IsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztpQkE0SHBFLFVBQVUsQ0FBQyxPQUFPLENBQUMsd0JBQXdCLEVBQUUsc0JBQXNCLENBQUM7Ozs7c0JBSS9ELFVBQVUsQ0FBQyxPQUFPLENBQUMsb0JBQW9CLEVBQUUsY0FBYyxDQUFDOzs7Ozs7c0JBTXhELFVBQVUsQ0FBQyxPQUFPLENBQUMsb0JBQW9CLEVBQUUsY0FBYyxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztzQkF5Q3hELFVBQVUsQ0FBQyxPQUFPLENBQUMsK0JBQStCLEVBQUUsK0JBQStCLENBQUM7Ozs7Ozs7Ozs7Ozs7OztzQkFlcEYsVUFBVSxDQUFDLE9BQU8sQ0FBQywrQkFBK0IsRUFBRSwrQkFBK0IsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3NCQW1EcEYsVUFBVSxDQUFDLE9BQU8sQ0FBQyw4QkFBOEIsRUFBRSwrQkFBK0IsQ0FBQzs7OztzQkFJbkYsVUFBVSxDQUFDLE9BQU8sQ0FBQyw4QkFBOEIsRUFBRSw4QkFBOEIsQ0FBQzs7Ozs7Ozs7O2lCQVN2RixVQUFVLENBQUMsT0FBTyxDQUFDLHdCQUF3QixFQUFFLHNCQUFzQixDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7aUJBd0JwRSxVQUFVLENBQUMsT0FBTyxDQUFDLHNCQUFzQixFQUFFLHNCQUFzQixDQUFDO3NCQUM3RCxVQUFVLENBQUMsT0FBTyxDQUFDLCtCQUErQixFQUFFLCtCQUErQixDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7c0JBeURwRixVQUFVLENBQUMsT0FBTyxDQUFDLGdCQUFnQixFQUFFLGNBQWMsQ0FBQzs7Ozs7Ozs7Ozt3QkFVbEQsVUFBVSxDQUFDLE9BQU8sQ0FBQyx3QkFBd0IsRUFBRSx3QkFBd0IsQ0FBQzs7O2dDQUc5RCxVQUFVLENBQUMsT0FBTyxDQUFDLDhCQUE4QixFQUFFLDhCQUE4QixDQUFDOzs7Ozs7Ozs7Ozs7OztzQkFjNUYsVUFBVSxDQUFDLE9BQU8sQ0FBQyxnQkFBZ0IsRUFBRSxjQUFjLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7aUJBZ0J6RCxVQUFVLENBQUMsT0FBTyxDQUFDLHdCQUF3QixFQUFFLHNCQUFzQixDQUFDOzs7Ozs7c0JBTS9ELFVBQVUsQ0FBQyxPQUFPLENBQUMsb0JBQW9CLEVBQUUsaUJBQWlCLENBQUM7aUJBQ2hFLFVBQVUsQ0FBQyxPQUFPLENBQUMsY0FBYyxFQUFFLGVBQWUsQ0FBQzs7OztzQkFJOUMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxvQkFBb0IsRUFBRSxpQkFBaUIsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O2lCQW9DaEUsVUFBVSxDQUFDLE9BQU8sQ0FBQyx3QkFBd0IsRUFBRSxzQkFBc0IsQ0FBQzs7Ozs7Ozs7c0JBUS9ELFVBQVUsQ0FBQyxPQUFPLENBQUMsaUJBQWlCLEVBQUUsaUJBQWlCLENBQUM7aUJBQzdELFVBQVUsQ0FBQyxPQUFPLENBQUMsY0FBYyxFQUFFLGVBQWUsQ0FBQzs7Ozs7OztHQU9qRTtDQUNGLENBQUMifQ==

package/dist_ts_web/elements/00group-dataview/dees-table/types.d.ts

@@ -26,4 +26,12 @@ export interface Column<T = any> {
     filterable?: boolean;
     hidden?: boolean;
 }
+/**
+ * One entry in a multi-column sort cascade. Order in the array reflects priority:
+ * index 0 is the primary sort key, index 1 the secondary tiebreaker, and so on.
+ */
+export interface ISortDescriptor {
+    key: string;
+    dir: 'asc' | 'desc';
+}
 export type TDisplayFunction<T = any> = (itemArg: T) => Record<string, any>;