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

lit-calculator/docs/keypad-input.ts

@@ -0,0 +1,64 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("keypad-input")
+export class CalcNumber extends LitElement {
+  @property()
+  number = "0";
+
+  @property()
+  color = "black";
+
+  @property()
+  textColor = "white";
+
+  static styles = css`
+    #base {
+      width: 100%;
+      height: 100%;
+      border-radius: 10px;
+      text-align: center;
+      float: left;
+    }
+
+    #base:hover {
+      box-shadow: 0 0 11px rgba(33, 33, 33, 0.2);
+    }
+
+    #base:active {
+      background-color: lightgrey;
+    }
+
+    button {
+      outline: 0 none;
+      color: white;
+      margin-top: 10px;
+      margin-bottom: 10px;
+      font-size: 20px;
+    }
+  `;
+
+  _onTap(e: Event) {
+    e.preventDefault();
+
+    const event = new CustomEvent("select-number", {
+      detail: { value: this.number } as any,
+      bubbles: true,
+      cancelable: true,
+    });
+
+    // @ts-ignore
+    window.dispatchEvent(event);
+  }
+
+  // Render element DOM by returning a `lit-html` template.
+  render() {
+    return html` <button
+      @click="${this._onTap}"
+      id="base"
+      style="background-color: ${this.color}; color: ${this.textColor};"
+    >
+      ${this.number}
+    </button>`;
+  }
+}