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,97 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("key-pad")
+export class CalcKeyPad extends LitElement {
+  @property()
+  accentColor = "blue";
+
+  @property()
+  textColor = "white";
+
+  @property()
+  actionColor = "black";
+
+  @property()
+  actionTextColor = "white";
+
+  static styles = css`
+    #base {
+      display: grid;
+      grid-template-columns: 33% 33% 33%;
+      padding-left: calc(var(--base-padding) / 2);
+      padding-right: calc(var(--base-padding) / 2);
+    }
+
+    keypad-input {
+      display: inline-grid;
+      margin: 5px;
+    }
+  `;
+
+  // Render element DOM by returning a `lit-html` template.
+  render() {
+    return html` <div id="base">
+      <keypad-input
+        number="7"
+        color="${this.accentColor}"
+        textColor="${this.textColor}"
+      ></keypad-input>
+      <keypad-input
+        number="8"
+        color="${this.accentColor}"
+        textColor="${this.textColor}"
+      ></keypad-input>
+      <keypad-input
+        number="9"
+        color="${this.accentColor}"
+        textColor="${this.textColor}"
+      ></keypad-input>
+      <keypad-input
+        number="4"
+        color="${this.accentColor}"
+        textColor="${this.textColor}"
+      ></keypad-input>
+      <keypad-input
+        number="5"
+        color="${this.accentColor}"
+        textColor="${this.textColor}"
+      ></keypad-input>
+      <keypad-input
+        number="6"
+        color="${this.accentColor}"
+        textColor="${this.textColor}"
+      ></keypad-input>
+      <keypad-input
+        number="1"
+        color="${this.accentColor}"
+        textColor="${this.textColor}"
+      ></keypad-input>
+      <keypad-input
+        number="2"
+        color="${this.accentColor}"
+        textColor="${this.textColor}"
+      ></keypad-input>
+      <keypad-input
+        number="3"
+        color="${this.accentColor}"
+        textColor="${this.textColor}"
+      ></keypad-input>
+      <keypad-input
+        number="0"
+        color="${this.accentColor}"
+        textColor="${this.textColor}"
+      ></keypad-input>
+      <keypad-input
+        number="."
+        color="${this.accentColor}"
+        textColor="${this.textColor}"
+      ></keypad-input>
+      <keypad-input
+        number="="
+        color="${this.actionColor}"
+        textColor="${this.actionTextColor}"
+      ></keypad-input>
+    </div>`;
+  }
+}