@webwriter/quiz 1.1.3 → 2.0.0

package/src/widgets/webwriter-task-prompt.ts

@@ -1,24 +1,49 @@
-import {html} from "lit"
-import {LitElementWw} from "@webwriter/lit"
-import {customElement} from "lit/decorators.js"
-import "@shoelace-style/shoelace/dist/themes/light.css"
-import { styleMap } from "lit/directives/style-map.js"
-
-import LOCALIZE from "../../localization/generated"
-import {msg} from "@lit/localize"
-
-declare global {interface HTMLElementTagNameMap {
-  "webwriter-task-prompt": WebwriterTaskPrompt;
-}}
-
-@customElement("webwriter-task-prompt")
-export class WebwriterTaskPrompt extends LitElementWw {
-
-  localize = LOCALIZE
-
-  render() {
-    return html`<slot style=${styleMap({"--ww-placeholder": `"${msg("Prompt")}"`})}>
-      
-    </slot>`
-  }
-}
+import { msg } from "@lit/localize";
+import { LitElementWw } from "@webwriter/lit";
+import { css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import LOCALIZE from "../../localization/generated";
+import { HintPopup } from "../lib/hint-popup";
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"webwriter-task-prompt": WebwriterTaskPrompt;
+	}
+}
+
+/**
+ * The question text of a `<webwriter-task>`.
+ *
+ * It must be assigned to the `prompt` slot of its parent element. An optional
+ * `<webwriter-quiz-hint>` may be assigned to its `hint` slot.
+ */
+@customElement("webwriter-task-prompt")
+export class WebwriterTaskPrompt extends LitElementWw {
+	/** @internal */
+	localize = LOCALIZE;
+
+	/** @internal */
+	static scopedElements = {
+		"hint-popup": HintPopup,
+	};
+
+	static styles = css`
+		:host {
+			display: block;
+			margin-bottom: var(--sl-spacing-x-small);
+		}
+
+		hint-popup {
+			float: right;
+			/* Ensure that the icon remains clickable at all times */
+			position: relative;
+			z-index: 10;
+		}
+	`;
+
+	render() {
+		return html`<hint-popup position="start"><slot name="hint"></slot></hint-popup>
+			<slot style=${styleMap({ "--ww-placeholder": `"${msg("Prompt")}"` })}></slot>`;
+	}
+}