Consolidate Lit repositories: figma-to-lit, figma_lit_example, lit-3d-piano, lit-calculator, lit-code-editor, lit-draggable-dom, lit-file-based-routing, lit-force-graph, lit-html-editor, lit-html-table, lit-modules, lit-native, lit-node-editor, lit-sheet-music, lit-starter-ts, lit-vscode-extension, lit-wmr, vite-lit-capacitor, vite-lit-element-starter, vite-rxdb-lit

2026-05-16 22:17:12 -07:00
parent 4dc3c8a3ff
commit 95667e3038
527 changed files with 63872 additions and 54 deletions
@@ -0,0 +1,43 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("display-output")
+export class CalcDisplay extends LitElement {
+  @property()
+  color = "black";
+
+  @property()
+  textColor = "white";
+
+  @property()
+  value = "";
+
+  static styles = css`
+    #base {
+      background-color: black;
+      text-align: end;
+      display: inline-block;
+      margin: var(--base-padding);
+      width: calc(100% - calc(var(--base-padding) * 2));
+      border-bottom: 2px solid black;
+    }
+
+    #text-display {
+      color: white;
+      margin: 0px;
+      padding-top: 40px;
+      padding-right: 10px;
+      padding-bottom: 10px;
+      font-size: 36px;
+    }
+  `;
+
+  // Render element DOM by returning a `lit-html` template.
+  render() {
+    return html`<div id="base" style="background-color: ${this.color};">
+      <div id="text-display" style="color: ${this.textColor};">
+        ${this.value || "0"}
+      </div>
+    </div>`;
+  }
+}