98 lines
2.3 KiB
TypeScript
98 lines
2.3 KiB
TypeScript
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>`;
|
|
}
|
|
}
|