@fieldia/widgets 0.9.1 → 0.10.0

package/src/lib/yes-no.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.yesNoWidget = void 0;
+const kind_parts_1 = require("./kind-parts");
+/**
+ * A yes or no as two buttons, "Yes" and "No" (`boolean.buttons`): a radio
+ * group with one stop for Tab, an arrow key going to the other and picking
+ * it. Nothing is picked until one is — the field starts empty, its default
+ * `null` — so a required one waits for an answer, and "No" is one.
+ * `options.yesLabel` and `noLabel` give them other words.
+ */
+const yesNoWidget = ({ form, name, node, id, document, labels, locale }) => {
+    const words = (0, kind_parts_1.wordsFor)(labels, locale);
+    const make = (0, kind_parts_1.maker)(document);
+    // The points' look: a button each, the one picked filled.
+    const group = make('div', { id, class: 'fd-points fd-yes-no', role: 'radiogroup' });
+    let readonly = false;
+    const buttons = [true, false].map((value) => {
+        const own = node.options?.[value ? 'yesLabel' : 'noLabel'];
+        const button = make('button', { type: 'button', role: 'radio' }, typeof own === 'string' && own ? own : value ? words.yes : words.no);
+        button.addEventListener('click', () => form.setValue(name, value));
+        group.append(button);
+        return button;
+    });
+    // Two of them: every arrow goes to the other one.
+    group.addEventListener('keydown', (event) => {
+        const at = buttons.indexOf(event.target);
+        if (readonly || at === -1 || !event.key.startsWith('Arrow'))
+            return;
+        event.preventDefault();
+        form.setValue(name, at === 1);
+        buttons[1 - at].focus();
+    });
+    const clear = (0, kind_parts_1.clearSelection)(document, words, () => {
+        form.setValue(name, null);
+        buttons[0].focus();
+    });
+    return {
+        element: make('div', { class: 'fd-choices-box' }, group, clear.button),
+        focus: () => (buttons.find((b) => b.getAttribute('aria-checked') === 'true') ?? buttons[0]).focus(),
+        update(state) {
+            readonly = state.readonly;
+            const picked = state.value === true ? 0 : state.value === false ? 1 : -1;
+            buttons.forEach((button, i) => {
+                (0, kind_parts_1.setAttr)(button, 'aria-checked', String(i === picked));
+                button.classList.toggle('fd-on', i === picked);
+                button.tabIndex = i === Math.max(0, picked) ? 0 : -1;
+                button.disabled = readonly;
+            });
+            (0, kind_parts_1.setAttr)(group, 'aria-required', String(state.required));
+            clear.allow(state);
+            clear.show(picked !== -1);
+            (0, kind_parts_1.describeState)(group, state);
+        },
+    };
+};
+exports.yesNoWidget = yesNoWidget;
+//# sourceMappingURL=yes-no.js.map

package/src/lib/yes-no.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"yes-no.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/yes-no.ts"],"names":[],"mappings":"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"}

package/src/lib/yes-no.mjs

@@ -0,0 +1,54 @@
+import { clearSelection, describeState, maker, setAttr, wordsFor } from './kind-parts.mjs';
+/**
+ * A yes or no as two buttons, "Yes" and "No" (`boolean.buttons`): a radio
+ * group with one stop for Tab, an arrow key going to the other and picking
+ * it. Nothing is picked until one is — the field starts empty, its default
+ * `null` — so a required one waits for an answer, and "No" is one.
+ * `options.yesLabel` and `noLabel` give them other words.
+ */
+export const yesNoWidget = ({ form, name, node, id, document, labels, locale }) => {
+    const words = wordsFor(labels, locale);
+    const make = maker(document);
+    // The points' look: a button each, the one picked filled.
+    const group = make('div', { id, class: 'fd-points fd-yes-no', role: 'radiogroup' });
+    let readonly = false;
+    const buttons = [true, false].map((value) => {
+        const own = node.options?.[value ? 'yesLabel' : 'noLabel'];
+        const button = make('button', { type: 'button', role: 'radio' }, typeof own === 'string' && own ? own : value ? words.yes : words.no);
+        button.addEventListener('click', () => form.setValue(name, value));
+        group.append(button);
+        return button;
+    });
+    // Two of them: every arrow goes to the other one.
+    group.addEventListener('keydown', (event) => {
+        const at = buttons.indexOf(event.target);
+        if (readonly || at === -1 || !event.key.startsWith('Arrow'))
+            return;
+        event.preventDefault();
+        form.setValue(name, at === 1);
+        buttons[1 - at].focus();
+    });
+    const clear = clearSelection(document, words, () => {
+        form.setValue(name, null);
+        buttons[0].focus();
+    });
+    return {
+        element: make('div', { class: 'fd-choices-box' }, group, clear.button),
+        focus: () => (buttons.find((b) => b.getAttribute('aria-checked') === 'true') ?? buttons[0]).focus(),
+        update(state) {
+            readonly = state.readonly;
+            const picked = state.value === true ? 0 : state.value === false ? 1 : -1;
+            buttons.forEach((button, i) => {
+                setAttr(button, 'aria-checked', String(i === picked));
+                button.classList.toggle('fd-on', i === picked);
+                button.tabIndex = i === Math.max(0, picked) ? 0 : -1;
+                button.disabled = readonly;
+            });
+            setAttr(group, 'aria-required', String(state.required));
+            clear.allow(state);
+            clear.show(picked !== -1);
+            describeState(group, state);
+        },
+    };
+};
+//# sourceMappingURL=yes-no.mjs.map

package/src/lib/yes-no.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"yes-no.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/yes-no.ts"],"names":[],"mappings":"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"}