@malloydata/render 0.0.135-dev240325191847 → 0.0.135-dev240326020414

package/dist/component/render.js

@@ -1,155 +0,0 @@
-"use strict";
-/*
- * Copyright 2023 Google LLC
- *
- * Permission is hereby granted, free of charge, to any person obtaining
- * a copy of this software and associated documentation files
- * (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge,
- * publish, distribute, sublicense, and/or sell copies of the Software,
- * and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be
- * included in all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
- * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
- * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
- * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
- * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MalloyRender = void 0;
-const malloy_1 = require("@malloydata/malloy");
-const lit_1 = require("lit");
-const decorators_js_1 = require("lit/decorators.js");
-require("./table");
-require("./bar-chart");
-const context_1 = require("@lit/context");
-const result_context_1 = require("./result-context");
-const render_result_metadata_1 = require("./render-result-metadata");
-// Get the first valid theme value or fallback to CSS variable
-function getThemeValue(prop, ...themes) {
-    let value;
-    for (const theme of themes) {
-        value = theme === null || theme === void 0 ? void 0 : theme.text(prop);
-        if (typeof value !== 'undefined')
-            break;
-    }
-    // If no theme overrides, convert prop name from camelCase to kebab and pull from --malloy-theme-- variable
-    return (value !== null && value !== void 0 ? value : `var(--malloy-theme--${prop
-        .replace(/([a-z])([A-Z])/g, '$1-$2')
-        .toLowerCase()})`);
-}
-let MalloyRender = class MalloyRender extends lit_1.LitElement {
-    willUpdate(changedProperties) {
-        if (changedProperties.has('result') ||
-            changedProperties.has('queryResult') ||
-            changedProperties.has('modelDef')) {
-            if (this.result)
-                this._result = this.result;
-            else if (this.queryResult && this.modelDef) {
-                this._result = new malloy_1.Result(this.queryResult, this.modelDef);
-            }
-            this.metadata = (0, render_result_metadata_1.getResultMetadata)(this._result);
-            const modelTag = this._result.modelTag;
-            const { tag: resultTag } = this._result.tagParse();
-            const modelTheme = modelTag.tag('theme');
-            const localTheme = resultTag.tag('theme');
-            this.updateTheme(modelTheme, localTheme);
-        }
-    }
-    updateTheme(modelTheme, localTheme) {
-        const tableRowHeight = getThemeValue('tableRowHeight', localTheme, modelTheme);
-        const tableBodyColor = getThemeValue('tableBodyColor', localTheme, modelTheme);
-        const tableFontSize = getThemeValue('tableFontSize', localTheme, modelTheme);
-        const tableHeaderColor = getThemeValue('tableHeaderColor', localTheme, modelTheme);
-        const tableHeaderWeight = getThemeValue('tableHeaderWeight', localTheme, modelTheme);
-        const tableBodyWeight = getThemeValue('tableBodyWeight', localTheme, modelTheme);
-        const tableBorder = getThemeValue('tableBorder', localTheme, modelTheme);
-        const tableBackground = getThemeValue('tableBackground', localTheme, modelTheme);
-        const tableGutterSize = getThemeValue('tableGutterSize', localTheme, modelTheme);
-        const tablePinnedBackground = getThemeValue('tablePinnedBackground', localTheme, modelTheme);
-        const tablePinnedBorder = getThemeValue('tablePinnedBorder', localTheme, modelTheme);
-        const fontFamily = getThemeValue('fontFamily', localTheme, modelTheme);
-        this.style.setProperty('--malloy-render--table-row-height', tableRowHeight);
-        this.style.setProperty('--malloy-render--table-body-color', tableBodyColor);
-        this.style.setProperty('--malloy-render--table-font-size', tableFontSize);
-        this.style.setProperty('--malloy-render--font-family', fontFamily);
-        this.style.setProperty('--malloy-render--table-header-color', tableHeaderColor);
-        this.style.setProperty('--malloy-render--table-header-weight', tableHeaderWeight);
-        this.style.setProperty('--malloy-render--table-body-weight', tableBodyWeight);
-        this.style.setProperty('--malloy-render--table-border', tableBorder);
-        this.style.setProperty('--malloy-render--table-background', tableBackground);
-        this.style.setProperty('--malloy-render--table-gutter-size', tableGutterSize);
-        this.style.setProperty('--malloy-render--table-pinned-background', tablePinnedBackground);
-        this.style.setProperty('--malloy-render--table-pinned-border', tablePinnedBorder);
-    }
-    render() {
-        return (0, lit_1.html) `<malloy-table
-      exportparts="table-container: container"
-      .data=${this._result.data}
-    ></malloy-table>`;
-    }
-};
-exports.MalloyRender = MalloyRender;
-MalloyRender.styles = (0, lit_1.css) `
-    :host {
-      --malloy-theme--table-row-height: 28px;
-      --malloy-theme--table-font-size: 12px;
-      --malloy-theme--table-header-color: #5d626b;
-      --malloy-theme--table-header-weight: bold;
-      --malloy-theme--table-body-color: #727883;
-      --malloy-theme--table-body-weight: 400;
-      --malloy-theme--table-border: 1px solid #e5e7eb;
-      --malloy-theme--table-background: white;
-      --malloy-theme--table-gutter-size: 15px;
-      --malloy-theme--table-pinned-background: #f5fafc;
-      --malloy-theme--table-pinned-border: 1px solid #daedf3;
-      --malloy-theme--font-family: Inter, system-ui, sans-serif;
-
-      font-family: var(--malloy-render--font-family);
-      font-size: var(--malloy-render--table-font-size);
-    }
-
-    @supports (font-variation-settings: normal) {
-      :host {
-        font-family:
-          InterVariable,
-          Inter,
-          system-ui sans-serif;
-
-        font-feature-settings:
-          'liga' 1,
-          'calt' 1;
-      }
-    }
-  `;
-__decorate([
-    (0, decorators_js_1.property)({ attribute: false })
-], MalloyRender.prototype, "result", void 0);
-__decorate([
-    (0, decorators_js_1.property)({ attribute: false })
-], MalloyRender.prototype, "queryResult", void 0);
-__decorate([
-    (0, decorators_js_1.property)({ attribute: false })
-], MalloyRender.prototype, "modelDef", void 0);
-__decorate([
-    (0, decorators_js_1.state)()
-], MalloyRender.prototype, "_result", void 0);
-__decorate([
-    (0, context_1.provide)({ context: result_context_1.resultContext })
-], MalloyRender.prototype, "metadata", void 0);
-exports.MalloyRender = MalloyRender = __decorate([
-    (0, decorators_js_1.customElement)('malloy-render')
-], MalloyRender);
-//# sourceMappingURL=render.js.map

package/dist/component/result-context.js

@@ -1,28 +0,0 @@
-"use strict";
-/*
- * Copyright 2023 Google LLC
- *
- * Permission is hereby granted, free of charge, to any person obtaining
- * a copy of this software and associated documentation files
- * (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge,
- * publish, distribute, sublicense, and/or sell copies of the Software,
- * and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be
- * included in all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
- * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
- * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
- * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
- * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.resultContext = void 0;
-const context_1 = require("@lit/context");
-exports.resultContext = (0, context_1.createContext)('malloy-render-result');
-//# sourceMappingURL=result-context.js.map

package/dist/component/table-layout.js

@@ -1,83 +0,0 @@
-"use strict";
-/*
- * Copyright 2023 Google LLC
- *
- * Permission is hereby granted, free of charge, to any person obtaining
- * a copy of this software and associated documentation files
- * (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge,
- * publish, distribute, sublicense, and/or sell copies of the Software,
- * and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be
- * included in all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
- * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
- * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
- * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
- * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTableLayout = void 0;
-const util_1 = require("./util");
-const render_numeric_field_1 = require("./render-numeric-field");
-const chart_settings_1 = require("./chart-settings");
-const MIN_COLUMN_WIDTH = 32;
-const MAX_COLUMN_WIDTH = 384;
-const COLUMN_BUFFER = 12;
-// TODO: get from theme
-const ROW_HEIGHT = 28;
-function getTableLayout(metadata) {
-    const layout = {};
-    for (const [key, fieldMeta] of Object.entries(metadata.fields)) {
-        const field = fieldMeta.field;
-        const layoutEntry = {
-            metadata: fieldMeta,
-            width: getColumnWidth(field, metadata),
-            height: null,
-            chartSettings: null,
-        };
-        const { tag } = field.tagParse();
-        if (tag.has('bar') && field.isExploreField()) {
-            layoutEntry.chartSettings = (0, chart_settings_1.getChartSettings)(field, metadata);
-            layoutEntry.width = layoutEntry.chartSettings.totalWidth;
-            layoutEntry.height = layoutEntry.chartSettings.totalHeight;
-        }
-        else if (field.isAtomicField()) {
-            layoutEntry.height = ROW_HEIGHT;
-        }
-        layout[key] = layoutEntry;
-    }
-    return layout;
-}
-exports.getTableLayout = getTableLayout;
-function getColumnWidth(f, metadata) {
-    const fieldKey = (0, util_1.getFieldKey)(f);
-    const fieldMeta = metadata.fields[fieldKey];
-    let width = 0;
-    if (f.isAtomicField()) {
-        // TODO: get font styles from theme
-        const font = '12px Inter, sans-serif';
-        const titleWidth = (0, util_1.getTextWidth)(f.name, font);
-        if (f.isAtomicField() && f.isString()) {
-            width =
-                Math.max((0, util_1.getTextWidth)(fieldMeta.maxString, font), titleWidth) +
-                    COLUMN_BUFFER;
-        }
-        else if (f.isAtomicField() && f.isNumber()) {
-            const formattedValue = fieldMeta.max === null ? '∅' : (0, render_numeric_field_1.renderNumericField)(f, fieldMeta.max);
-            width =
-                Math.max((0, util_1.getTextWidth)(formattedValue, font), titleWidth) +
-                    COLUMN_BUFFER;
-        }
-        else
-            width = 130;
-        width = (0, util_1.clamp)(MIN_COLUMN_WIDTH, MAX_COLUMN_WIDTH, width);
-    }
-    return width;
-}
-//# sourceMappingURL=table-layout.js.map

package/dist/component/table.d.ts

@@ -1,35 +0,0 @@
-import { DataArray } from '@malloydata/malloy';
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import { RenderResultMetadata } from './render-result-metadata';
-import { TableLayout } from './table-layout';
-type TableContext = {
-    root: boolean;
-    layout: TableLayout;
-};
-export declare class Table extends LitElement {
-    static styles: import("lit").CSSResult;
-    data: DataArray;
-    rowLimit: number;
-    pinnedHeader: boolean;
-    protected _scrolling: boolean;
-    parentCtx: TableContext | undefined;
-    ctx: TableContext;
-    metadata: RenderResultMetadata;
-    connectedCallback(): void;
-    private _handleScroll;
-    protected createRenderRoot(): HTMLElement | DocumentFragment;
-    private renderHeader;
-    private renderField;
-    private getColumnWidth;
-    private getContentStyle;
-    private renderCell;
-    private renderFieldContent;
-    willUpdate(changedProperties: PropertyValues<this>): void;
-    render(): TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'malloy-table': Table;
-    }
-}
-export {};

package/dist/component/table.js

@@ -1,375 +0,0 @@
-"use strict";
-/*
- * Copyright 2023 Google LLC
- *
- * Permission is hereby granted, free of charge, to any person obtaining
- * a copy of this software and associated documentation files
- * (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge,
- * publish, distribute, sublicense, and/or sell copies of the Software,
- * and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be
- * included in all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
- * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
- * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
- * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
- * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Table = void 0;
-const lit_1 = require("lit");
-const decorators_js_1 = require("lit/decorators.js");
-const class_map_js_1 = require("lit/directives/class-map.js");
-const context_1 = require("@lit/context");
-const util_1 = require("./util");
-const render_numeric_field_1 = require("./render-numeric-field");
-const result_context_1 = require("./result-context");
-const table_layout_1 = require("./table-layout");
-const tableContext = (0, context_1.createContext)('table');
-let Table = class Table extends lit_1.LitElement {
-    constructor() {
-        super(...arguments);
-        this.rowLimit = Infinity;
-        this.pinnedHeader = false;
-        this._scrolling = false;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (typeof this.parentCtx === 'undefined') {
-            this.ctx = {
-                root: true,
-                layout: {},
-            };
-        }
-        else {
-            this.ctx = {
-                root: false,
-                layout: this.parentCtx.layout,
-            };
-        }
-    }
-    _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)
-            return this;
-        return super.createRenderRoot();
-    }
-    renderHeader(f) {
-        const isFirst = (0, util_1.isFirstChild)(f);
-        const isParentFirst = (0, util_1.isFirstChild)(f.parentExplore);
-        const isParentNotAField = !f.parentExplore.isExploreField();
-        const hideStartGutter = isFirst && (isParentFirst || isParentNotAField);
-        const isLast = (0, util_1.isLastChild)(f);
-        const isParentLast = (0, util_1.isLastChild)(f.parentExplore);
-        const hideEndGutter = isLast && (isParentLast || isParentNotAField);
-        return (0, lit_1.html) `<th
-      class="column-cell ${(0, class_map_js_1.classMap)({
-            numeric: f.isAtomicField() && f.isNumber(),
-        })}"
-    >
-      ${this.renderCell(f, f.name, {
-            hideStartGutter,
-            hideEndGutter,
-            isHeader: true,
-        })}
-    </th>`;
-    }
-    renderField(row, f) {
-        return (0, lit_1.html) `<td
-      class="column-cell ${(0, class_map_js_1.classMap)({
-            numeric: f.isAtomicField() && f.isNumber(),
-        })}"
-    >
-      ${this.renderFieldContent(row, f)}
-    </td>`;
-    }
-    getColumnWidth(f) {
-        const key = (0, util_1.getFieldKey)(f);
-        return this.ctx.layout[key].width;
-    }
-    getContentStyle(f, isHeader = false) {
-        const width = this.getColumnWidth(f);
-        let style = '';
-        if (isHeader)
-            return style;
-        if (typeof width !== 'undefined') {
-            style += `width: ${width}px; min-width: ${width}px; max-width: ${width}px;`;
-        }
-        const height = this.ctx.layout[(0, util_1.getFieldKey)(f)].height;
-        if (typeof height === 'number') {
-            style += `height: ${height}px;`;
-        }
-        return style;
-    }
-    renderCell(f, value, options) {
-        return (0, lit_1.html) `<div class="cell-wrapper">
-      <div
-        class=${(0, class_map_js_1.classMap)({
-            'cell-gutter': true,
-            'hide-gutter-border': options.hideStartGutter,
-        })}
-      ></div>
-      <div
-        class="cell-content"
-        style="${this.getContentStyle(f, options.isHeader)}"
-        title="${value}"
-      >
-        ${value}
-      </div>
-      <div
-        class=${(0, class_map_js_1.classMap)({
-            'cell-gutter': true,
-            'hide-gutter-border': options.hideEndGutter,
-        })}
-      ></div>
-    </div>`;
-    }
-    renderFieldContent(row, f) {
-        var _a;
-        const renderAs = (0, util_1.shouldRenderAs)(f);
-        // Render nested tables without gutters
-        if (renderAs === 'table') {
-            return (0, lit_1.html) `<malloy-table
-        .data=${row.cell(f)}
-        .pinnedHeader=${(_a = this.pinnedHeader) !== null && _a !== void 0 ? _a : false}
-        .rowLimit=${this.pinnedHeader ? 1 : Infinity}
-      ></malloy-table>`;
-        }
-        const resultCellValue = row.cell(f).value;
-        let renderValue = '';
-        if (this.pinnedHeader)
-            renderValue = '';
-        else if (renderAs === 'bar-chart') {
-            renderValue = (0, lit_1.html) `<malloy-bar-chart
-        .data=${row.cell(f)}
-      ></malloy-bar-chart>`;
-        }
-        else if ((0, util_1.valueIsNumber)(f, resultCellValue)) {
-            // TS doesn't support typeguards for multiple parameters, so unfortunately have to assert AtomicField here. https://github.com/microsoft/TypeScript/issues/26916
-            renderValue = (0, render_numeric_field_1.renderNumericField)(f, resultCellValue);
-        }
-        else if (resultCellValue === null) {
-            renderValue = '∅';
-        }
-        else if ((0, util_1.valueIsString)(f, resultCellValue)) {
-            renderValue = resultCellValue;
-        }
-        return this.renderCell(f, renderValue, {
-            hideStartGutter: (0, util_1.isFirstChild)(f),
-            hideEndGutter: (0, util_1.isLastChild)(f),
-            isHeader: false,
-        });
-    }
-    willUpdate(changedProperties) {
-        if (this.ctx.root && changedProperties.has('data')) {
-            this.ctx.layout = (0, table_layout_1.getTableLayout)(this.metadata);
-        }
-    }
-    render() {
-        const fields = this.data.field.allFields;
-        const headers = fields.map(f => this.renderHeader(f));
-        const rows = [];
-        let i = 0;
-        for (const row of this.data) {
-            if (i >= this.rowLimit)
-                break;
-            rows.push((0, lit_1.html) `<tr>
-          ${fields.map(f => this.renderField(row, f))}
-        </tr>`);
-            i++;
-        }
-        const renderStickyHeader = () => {
-            if (this.ctx.root) {
-                return (0, lit_1.html) `<div class="sticky-header">
-          <div class="sticky-header-content">
-            <malloy-table
-              class=${(0, class_map_js_1.classMap)({
-                    'pinned-header': true,
-                    'scrolled': this._scrolling,
-                })}
-              .rowLimit=${1}
-              .data=${this.data}
-              .pinnedHeader=${true}
-            ></malloy-table>
-          </div>
-        </div>`;
-            }
-            return lit_1.nothing;
-        };
-        return (0, lit_1.html) `<div
-      @scroll=${this._handleScroll}
-      class="table-wrapper"
-      part=${this.ctx.root ? 'table-container' : lit_1.nothing}
-    >
-      ${renderStickyHeader()}
-      <table>
-        <thead>
-          <tr>
-            ${headers}
-          </tr>
-        </thead>
-        <tbody>
-          ${rows}
-        </tbody>
-      </table>
-    </div>`;
-    }
-};
-exports.Table = Table;
-Table.styles = (0, lit_1.css) `
-    .table-wrapper {
-      width: 100%;
-      height: 100%;
-      position: relative;
-      overflow: auto;
-    }
-
-    .sticky-header {
-      position: sticky;
-      top: 0px;
-      z-index: 100;
-    }
-
-    .sticky-header-content {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      pointer-events: none;
-    }
-
-    .sticky-header-content th {
-      pointer-events: all;
-    }
-
-    table {
-      border-collapse: collapse;
-      background: var(--malloy-render--table-background);
-    }
-
-    th {
-      transition: background-color 0.25s;
-    }
-
-    table * {
-      box-sizing: border-box;
-    }
-
-    .column-cell {
-      height: var(--malloy-render--table-row-height);
-      overflow: hidden;
-      white-space: nowrap;
-      text-align: left;
-      padding: 0px;
-      vertical-align: top;
-      position: relative;
-    }
-
-    td.column-cell {
-      font-weight: var(--malloy-render--table-body-weight);
-      color: var(--malloy-render--table-body-color);
-    }
-
-    th.column-cell {
-      font-weight: var(--malloy-render--table-header-weight);
-      color: var(--malloy-render--table-header-color);
-    }
-
-    .column-cell.numeric {
-      text-align: right;
-      font-variant-numeric: tabular-nums;
-    }
-
-    .cell-wrapper {
-      // height: var(--malloy-render--table-row-height);
-      display: flex;
-      align-items: start;
-      overflow: hidden;
-    }
-
-    .cell-content {
-      border-top: var(--malloy-render--table-border);
-      height: 100%;
-      line-height: var(--malloy-render--table-row-height);
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .cell-gutter {
-      border-top: var(--malloy-render--table-border);
-      height: var(--malloy-render--table-row-height);
-      width: var(--malloy-render--table-gutter-size);
-      transition: border-color 0.25s;
-    }
-
-    .cell-gutter.hide-gutter-border {
-      border-color: transparent;
-    }
-
-    .pinned-header table {
-      background: transparent;
-    }
-
-    .pinned-header th {
-      background: var(--malloy-render--table-background);
-    }
-
-    .pinned-header.scrolled th {
-      background: var(--malloy-render--table-pinned-background);
-      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
-    }
-
-    .pinned-header.scrolled {
-      .cell-content,
-      .cell-gutter,
-      .cell-gutter.hide-gutter-border {
-        border-top: var(--malloy-render--table-pinned-border);
-      }
-    }
-  `;
-__decorate([
-    (0, decorators_js_1.property)({ attribute: false })
-], Table.prototype, "data", void 0);
-__decorate([
-    (0, decorators_js_1.property)({ type: Number })
-], Table.prototype, "rowLimit", void 0);
-__decorate([
-    (0, decorators_js_1.property)({ type: Boolean })
-], Table.prototype, "pinnedHeader", void 0);
-__decorate([
-    (0, decorators_js_1.state)()
-], Table.prototype, "_scrolling", void 0);
-__decorate([
-    (0, context_1.consume)({ context: tableContext }),
-    (0, decorators_js_1.property)({ attribute: false })
-], Table.prototype, "parentCtx", void 0);
-__decorate([
-    (0, context_1.provide)({ context: tableContext })
-], Table.prototype, "ctx", void 0);
-__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.eventOptions)({ passive: true })
-], Table.prototype, "_handleScroll", null);
-exports.Table = Table = __decorate([
-    (0, decorators_js_1.customElement)('malloy-table')
-], Table);
-//# sourceMappingURL=table.js.map