|
// retoor <retoor@molodetz.nl>
|
|
|
|
import { Component } from "./Component.js";
|
|
import { assetUrl } from "../assetVersion.js";
|
|
|
|
const CSS_ID = "ai-confirm-css";
|
|
|
|
export class AiConfirm extends Component {
|
|
static get observedAttributes() {
|
|
return ["name", "label", "help", "confirm-label", "reject-label", "default", "required", "disabled"];
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this._value = null;
|
|
}
|
|
|
|
_ensureCss() {
|
|
if (document.getElementById(CSS_ID)) return;
|
|
const link = document.createElement("link");
|
|
link.id = CSS_ID;
|
|
link.rel = "stylesheet";
|
|
link.href = assetUrl("/static/css/components/ai-confirm.css");
|
|
document.head.appendChild(link);
|
|
}
|
|
|
|
connectedCallback() {
|
|
this._ensureCss();
|
|
if (this._built) return;
|
|
this._built = true;
|
|
this.classList.add("ai-confirm");
|
|
const name = this.attr("name", "confirm");
|
|
const label = this.attr("label", "Confirm");
|
|
const yes = this.attr("confirm-label", "Yes");
|
|
const no = this.attr("reject-label", "No");
|
|
const def = this.getAttribute("default");
|
|
this._value = def === "true" ? true : def === "false" ? false : null;
|
|
this.innerHTML = "";
|
|
const title = document.createElement("div");
|
|
title.className = "ai-widget-label";
|
|
title.textContent = label;
|
|
this.appendChild(title);
|
|
if (this.attr("help")) {
|
|
const help = document.createElement("div");
|
|
help.className = "ai-widget-help";
|
|
help.textContent = this.attr("help");
|
|
this.appendChild(help);
|
|
}
|
|
const group = document.createElement("div");
|
|
group.className = "ai-confirm-options";
|
|
group.setAttribute("role", "radiogroup");
|
|
group.setAttribute("aria-label", label);
|
|
for (const [val, text] of [
|
|
[true, yes],
|
|
[false, no],
|
|
]) {
|
|
const btn = document.createElement("button");
|
|
btn.type = "button";
|
|
btn.className = "ai-confirm-option";
|
|
btn.textContent = text;
|
|
btn.dataset.value = String(val);
|
|
if (this._value === val) btn.classList.add("selected");
|
|
btn.addEventListener("click", () => {
|
|
this._value = val;
|
|
group.querySelectorAll(".ai-confirm-option").forEach((el) => el.classList.remove("selected"));
|
|
btn.classList.add("selected");
|
|
this.dispatchEvent(
|
|
new CustomEvent("ai:change", {
|
|
bubbles: true,
|
|
composed: true,
|
|
detail: { name, value: val },
|
|
})
|
|
);
|
|
const shell = this.closest("ai-interaction");
|
|
if (shell && typeof shell.submit === "function") {
|
|
const fields = shell.querySelectorAll(
|
|
"ai-confirm, ai-choice, ai-choice-multi, ai-field, ai-select"
|
|
);
|
|
if (fields.length === 1) shell.submit();
|
|
}
|
|
});
|
|
group.appendChild(btn);
|
|
}
|
|
this.appendChild(group);
|
|
}
|
|
|
|
getValue() {
|
|
return this._value;
|
|
}
|
|
|
|
validate() {
|
|
if (this.boolAttr("required") && this._value === null) {
|
|
return { valid: false, message: `${this.attr("label", "Confirm")} is required` };
|
|
}
|
|
return { valid: true };
|
|
}
|
|
}
|
|
|
|
if (!customElements.get("ai-confirm")) {
|
|
customElements.define("ai-confirm", AiConfirm);
|
|
}
|
|
|
|
export default AiConfirm;
|