@malloydata/render 0.0.116-dev240105162843 → 0.0.116

package/dist/component/render.d.ts

@@ -1,4 +1,4 @@
-import { Result } from '@malloydata/malloy';
+import { Result, Tag } from '@malloydata/malloy';
 import { LitElement, PropertyValues } from 'lit';
 import './table';
 import './bar-chart';
@@ -8,6 +8,7 @@ export declare class MalloyRender extends LitElement {
     result: Result;
     metadata: RenderResultMetadata;
     willUpdate(changedProperties: PropertyValues<this>): void;
+    updateTheme(modelTheme?: Tag, localTheme?: Tag): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/component/render.js

@@ -53,13 +53,14 @@ let MalloyRender = class MalloyRender extends lit_1.LitElement {
     willUpdate(changedProperties) {
         if (changedProperties.has('result')) {
             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);
         }
     }
-    render() {
-        const modelTag = this.result.modelTag;
-        const { tag: resultTag } = this.result.tagParse();
-        const modelTheme = modelTag.tag('theme');
-        const localTheme = resultTag.tag('theme');
+    updateTheme(modelTheme, localTheme) {
         const tableRowHeight = getThemeValue('tableRowHeight', localTheme, modelTheme);
         const tableBodyColor = getThemeValue('tableBodyColor', localTheme, modelTheme);
         const tableFontSize = getThemeValue('tableFontSize', localTheme, modelTheme);
@@ -72,26 +73,24 @@ let MalloyRender = class MalloyRender extends lit_1.LitElement {
         const tablePinnedBackground = getThemeValue('tablePinnedBackground', localTheme, modelTheme);
         const tablePinnedBorder = getThemeValue('tablePinnedBorder', localTheme, modelTheme);
         const fontFamily = getThemeValue('fontFamily', localTheme, modelTheme);
-        const dynamicStyle = (0, lit_1.html) `<style>
-      :host {
-        --malloy-render--table-row-height: ${tableRowHeight};
-        --malloy-render--table-body-color: ${tableBodyColor};
-        --malloy-render--table-font-size: ${tableFontSize};
-        --malloy-render--font-family: ${fontFamily};
-        --malloy-render--table-header-color: ${tableHeaderColor};
-        --malloy-render--table-header-weight: ${tableHeaderWeight};
-        --malloy-render--table-body-weight: ${tableBodyWeight};
-        --malloy-render--table-border: ${tableBorder};
-        --malloy-render--table-background: ${tableBackground};
-        --malloy-render--table-gutter-size: ${tableGutterSize};
-        --malloy-render--table-pinned-background: ${tablePinnedBackground};
-        --malloy-render--table-pinned-border: ${tablePinnedBorder};
-      }
-    </style>`;
-        return (0, lit_1.html) `${dynamicStyle}<malloy-table
-        exportparts="table-container: container"
-        .data=${this.result.data}
-      ></malloy-table>`;
+        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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.116-dev240105162843",
+  "version": "0.0.116",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@lit/context": "^1.1.0",
-    "@malloydata/malloy": "^0.0.116-dev240105162843",
+    "@malloydata/malloy": "^0.0.116",
     "@types/luxon": "^2.4.0",
     "lit": "^3.0.2",
     "lodash": "^4.17.20",