@malloydata/render 0.0.124-dev240209232446 → 0.0.124-dev240212180839

package/dist/component/render.d.ts

@@ -12,6 +12,10 @@ export declare class MalloyRender extends LitElement {
     metadata: RenderResultMetadata;
     willUpdate(changedProperties: PropertyValues<this>): void;
     updateTheme(modelTheme?: Tag, localTheme?: Tag): void;
+    getTableScrollState(): {
+        isAtTop: boolean;
+        isAtBottom: boolean;
+    } | null;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/component/render.js

@@ -94,11 +94,23 @@ let MalloyRender = class MalloyRender extends lit_1.LitElement {
         this.style.setProperty('--malloy-render--table-pinned-background', tablePinnedBackground);
         this.style.setProperty('--malloy-render--table-pinned-border', tablePinnedBorder);
     }
+    getTableScrollState() {
+        var _a;
+        const mt = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#root > malloy-table');
+        return mt
+            ? {
+                isAtTop: mt.isAtTop,
+                isAtBottom: mt.isAtBottom,
+            }
+            : null;
+    }
     render() {
-        return (0, lit_1.html) `<malloy-table
-      exportparts="table-container: container"
-      .data=${this._result.data}
-    ></malloy-table>`;
+        return (0, lit_1.html) `<div id="root">
+      <malloy-table
+        exportparts="table-container: container"
+        .data=${this._result.data}
+      ></malloy-table>
+    </div>`;
     }
 };
 exports.MalloyRender = MalloyRender;
@@ -133,6 +145,11 @@ MalloyRender.styles = (0, lit_1.css) `
           'calt' 1;
       }
     }
+
+    #root {
+      width: 100%;
+      height: 100%;
+    }
   `;
 __decorate([
     (0, decorators_js_1.property)({ attribute: false })

package/dist/component/table.d.ts

@@ -1,5 +1,6 @@
 import { DataArray } from '@malloydata/malloy';
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
 import { RenderResultMetadata } from './render-result-metadata';
 import { TableLayout } from './table-layout';
 type TableContext = {
@@ -15,8 +16,14 @@ export declare class Table extends LitElement {
     parentCtx: TableContext | undefined;
     ctx: TableContext;
     metadata: RenderResultMetadata;
-    connectedCallback(): void;
+    isAtTop: boolean;
+    isAtBottom: boolean;
+    scrollRef: Ref<HTMLDivElement>;
+    private handleScrollCheck;
+    firstUpdated(): void;
+    private _scrollerSize;
     private _handleScroll;
+    connectedCallback(): void;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     private renderHeader;
     private renderField;

package/dist/component/table.js

@@ -31,8 +31,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = void 0;
 const lit_1 = require("lit");
 const decorators_js_1 = require("lit/decorators.js");
+const ref_js_1 = require("lit/directives/ref.js");
 const class_map_js_1 = require("lit/directives/class-map.js");
 const context_1 = require("@lit/context");
+const resize_controller_js_1 = require("@lit-labs/observers/resize-controller.js");
 const util_1 = require("./util");
 const render_numeric_field_1 = require("./render-numeric-field");
 const result_context_1 = require("./result-context");
@@ -44,6 +46,30 @@ let Table = class Table extends lit_1.LitElement {
         this.rowLimit = Infinity;
         this.pinnedHeader = false;
         this._scrolling = false;
+        this.isAtTop = true;
+        this.isAtBottom = true;
+        this.scrollRef = (0, ref_js_1.createRef)();
+        this._scrollerSize = new resize_controller_js_1.ResizeController(this, {
+            target: null,
+            callback: () => this.handleScrollCheck(),
+        });
+    }
+    handleScrollCheck() {
+        const scroller = this.scrollRef.value;
+        if (scroller) {
+            this.isAtTop = scroller.scrollTop === 0;
+            this.isAtBottom =
+                scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight;
+        }
+    }
+    firstUpdated() {
+        if (this.scrollRef.value)
+            this._scrollerSize.observe(this.scrollRef.value);
+    }
+    _handleScroll(e) {
+        const target = e.target;
+        this._scrolling = target.scrollTop > 0;
+        this.handleScrollCheck();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -60,10 +86,6 @@ let Table = class Table extends lit_1.LitElement {
             };
         }
     }
-    _handleScroll(e) {
-        const target = e.target;
-        this._scrolling = target.scrollTop > 0;
-    }
     // If rendering a pinned header, render it within the current ShadowDOM root so we can use CSS to style the nested table headers when scrolling
     createRenderRoot() {
         if (this.pinnedHeader)
@@ -216,6 +238,7 @@ let Table = class Table extends lit_1.LitElement {
       @scroll=${this._handleScroll}
       class="table-wrapper"
       part=${this.ctx.root ? 'table-container' : lit_1.nothing}
+      ref=${(0, ref_js_1.ref)(this.scrollRef)}
     >
       ${renderStickyHeader()}
       <table>
@@ -366,6 +389,12 @@ __decorate([
     (0, context_1.consume)({ context: result_context_1.resultContext }),
     (0, decorators_js_1.property)({ attribute: false })
 ], Table.prototype, "metadata", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ reflect: true, type: Boolean })
+], Table.prototype, "isAtTop", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ reflect: true, type: Boolean })
+], Table.prototype, "isAtBottom", void 0);
 __decorate([
     (0, decorators_js_1.eventOptions)({ passive: true })
 ], Table.prototype, "_handleScroll", null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.124-dev240209232446",
+  "version": "0.0.124-dev240212180839",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,8 +24,9 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@lit-labs/observers": "^2.0.2",
     "@lit/context": "^1.1.0",
-    "@malloydata/malloy": "^0.0.124-dev240209232446",
+    "@malloydata/malloy": "^0.0.124-dev240212180839",
     "@types/luxon": "^2.4.0",
     "lit": "^3.0.2",
     "lodash": "^4.17.20",