import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@customElement("setting-number")
export class SettingNumber extends LitElement {
@property() label = "Setting";
@property() description = "";
@property({ type: Number }) value = 0;
@property({ type: Number }) min = 0;
@property({ type: Number }) max = 100;
@property({ type: Boolean }) easter = false;
createRenderRoot() {
return this;
}
private handleInput(e: Event) {
const input = e.target as HTMLInputElement;
const newValue = Number(input.value);
this.value = newValue;
this.dispatchEvent(
new CustomEvent("change", {
detail: { value: newValue },
bubbles: true,
composed: true,
}),
);
}
render() {
const rainbowClass = this.easter
? "bg-[linear-gradient(270deg,#990033,#996600,#336600,#008080,#1c3f99,#5e0099,#990033)] bg-[length:1400%_1400%] animate-rainbow-bg text-white hover:bg-[linear-gradient(270deg,#990033,#996600,#336600,#008080,#1c3f99,#5e0099,#990033)]"
: "";
return html`
`;
}
}