@dodona/papyros
Version:
Scratchpad for multiple programming languages in the browser.
71 lines (70 loc) • 2.7 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { customElement, property } from "lit/decorators.js";
import { createRef, ref } from "lit/directives/ref.js";
import { css, html } from "lit";
import { PapyrosElement } from "../PapyrosElement";
import "@material/web/textfield/outlined-text-field";
import "@material/web/button/outlined-button";
let InteractiveInput = class InteractiveInput extends PapyrosElement {
constructor() {
super(...arguments);
this.value = "";
this.inputRef = createRef();
}
static get styles() {
return css `
:host {
width: 100%;
display: flex;
gap: 0.5rem;
}
md-outlined-text-field {
flex-grow: 1;
}
`;
}
provideInput() {
this.papyros.io.provideInput(this.value);
this.value = "";
}
updated(_changedProperties) {
super.updated(_changedProperties);
if (this.papyros.io.awaitingInput) {
this.inputRef.value.focus();
}
}
render() {
return html `
<md-outlined-text-field
type="text"
.value=${this.value}
@input=${(e) => (this.value = e.target.value)}
@keydown=${(e) => {
if (e.key === "Enter") {
e.preventDefault();
this.provideInput();
}
}}
placeholder=${this.papyros.io.prompt || this.t("Papyros.input_placeholder.interactive")}
?disabled=${!this.papyros.io.awaitingInput}
${ref(this.inputRef)}
></md-outlined-text-field>
<md-outlined-button @click=${() => this.provideInput()} ?disabled=${!this.papyros.io.awaitingInput}>
${this.t("Papyros.enter")}
</md-outlined-button>
`;
}
};
__decorate([
property({ state: true })
], InteractiveInput.prototype, "value", void 0);
InteractiveInput = __decorate([
customElement("p-interactive-input")
], InteractiveInput);
export { InteractiveInput };
//# sourceMappingURL=InteractiveInput.js.map