@fieldia/widgets 0.9.2 → 0.10.0

package/src/lib/signature.js

@@ -0,0 +1,223 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.signatureWidget = void 0;
+const files_1 = require("./files");
+const kind_parts_1 = require("./kind-parts");
+/**
+ * A signature on a file field (`binary.signature`): drawn on a pad with a
+ * mouse, a finger or a pen, or — for anyone without a pointer — typed as a
+ * name and drawn as a signature, the name kept as the value's `text`. Kept
+ * as a PNG picture, the value a file upload has. A signature already kept
+ * shows as its picture until Clear. Undo takes the last stroke away.
+ *
+ * `options.color` (#rrggbb) and `options.penWidth` set the pen; the node's
+ * `placeholder` is the words on the blank pad ("Sign here"); `options.footerLabel`
+ * the words kept under it; `options.upload` lets a picture of a signature be
+ * uploaded as a third way.
+ */
+/** The pad's own size, in the picture's pixels; it is drawn at whatever width its box has. */
+const WIDTH = 600;
+const HEIGHT = 180;
+/** Blue-black ink on a clear ground, so the picture reads on any paper. */
+const INK = '#1b2a5c';
+const SCRIPT = '"Segoe Script", "Snell Roundhand", "Brush Script MT", "Apple Chancery", cursive';
+/** The bytes a base64 text holds. */
+const bytesOf = (base64) => Math.floor((base64.length * 3) / 4) - (base64.endsWith('==') ? 2 : base64.endsWith('=') ? 1 : 0);
+const keyOf = (file) => file.data ?? file.url ?? '';
+const signatureWidget = ({ form, name, field, node, id, document, labels, locale }) => {
+    const words = (0, kind_parts_1.wordsFor)(labels, locale);
+    const make = (0, kind_parts_1.maker)(document);
+    const options = node.options ?? {};
+    const color = options['color'];
+    const ink = typeof color === 'string' && /^#[\da-f]{6}$/i.test(color) ? color : INK;
+    const penWidth = options['penWidth'];
+    const width = typeof penWidth === 'number' && penWidth > 0 ? penWidth : 3;
+    const footerWords = options['footerLabel'];
+    const canvas = make('canvas', { class: 'fd-signature-pad', width: String(WIDTH), height: String(HEIGHT), role: 'img', 'aria-label': words.signaturePad });
+    const hint = make('span', { class: 'fd-signature-hint', 'aria-hidden': 'true' }, node.placeholder || words.signHere);
+    const image = make('img', { class: 'fd-signature-image', alt: field.label, hidden: '' });
+    const typed = make('input', { type: 'text', class: 'fd-input fd-signature-typed', 'aria-label': words.typeSignature, placeholder: words.typeSignature, autocomplete: 'name' });
+    const button = (words) => make('button', { type: 'button', class: 'fd-button fd-button-link', hidden: '' }, words);
+    const undo = button(words.undo);
+    const clear = button(words.clearDrawing);
+    clear.classList.add('fd-signature-clear');
+    // A picture of a signature, from this computer or a phone's camera.
+    const upload = options['upload'] === true ? button(words.uploadSignature) : null;
+    const file = make('input', { type: 'file', accept: 'image/*', class: 'fd-sr-only', tabindex: '-1', 'aria-hidden': 'true' });
+    const element = make('div', { id, class: 'fd-signature', role: 'group' }, make('div', { class: 'fd-signature-box' }, canvas, image, hint), ...(typeof footerWords === 'string' && footerWords ? [make('span', { class: 'fd-signature-footer' }, footerWords)] : []), make('div', { class: 'fd-signature-tools' }, typed, undo, ...(upload ? [upload, file] : []), clear));
+    const pen = () => {
+        const context = canvas.getContext('2d');
+        if (context) {
+            context.strokeStyle = context.fillStyle = ink;
+            context.lineWidth = width;
+            context.lineCap = context.lineJoin = 'round';
+        }
+        return context;
+    };
+    /** The picture this pad last kept: coming back from the form, it leaves the pad as it is. */
+    let mine = null;
+    let readonly = false;
+    /** What is on the pad: a typed name, and the strokes drawn, each its points. */
+    let typedName = null;
+    let strokes = [];
+    let last = null;
+    const blank = () => !strokes.length && !typedName;
+    /** The pad drawn again from what is on it: the name, then each stroke — a dot for a press that never moved. */
+    function redraw() {
+        const context = pen();
+        if (!context)
+            return;
+        context.clearRect(0, 0, WIDTH, HEIGHT);
+        if (typedName) {
+            context.font = `italic 64px ${SCRIPT}`;
+            context.textAlign = 'center';
+            context.textBaseline = 'middle';
+            context.fillText(typedName, WIDTH / 2, HEIGHT / 2, WIDTH - 40);
+        }
+        for (const stroke of strokes) {
+            context.beginPath();
+            context.arc(stroke[0].x, stroke[0].y, width / 2, 0, Math.PI * 2);
+            context.fill();
+            for (let i = 1; i < stroke.length; i++)
+                line(stroke[i - 1], stroke[i]);
+        }
+    }
+    function line(from, to) {
+        const context = pen();
+        context?.beginPath();
+        context?.moveTo(from.x, from.y);
+        context?.lineTo(to.x, to.y);
+        context?.stroke();
+    }
+    function wipe() {
+        strokes = [];
+        typedName = null;
+        redraw();
+    }
+    /** What is on the pad, as the field's value: nothing when it is blank. */
+    function keep() {
+        hint.hidden = !blank();
+        if (blank()) {
+            mine = null;
+            return form.setValue(name, null);
+        }
+        let url;
+        try {
+            url = canvas.toDataURL('image/png');
+        }
+        catch {
+            return; // a pad that cannot be read back keeps nothing
+        }
+        if (!url)
+            return;
+        const data = url.slice(url.indexOf(',') + 1);
+        mine = data;
+        form.setValue(name, { name: 'signature.png', type: 'image/png', size: bytesOf(data), data, ...(typedName && !strokes.length ? { text: typedName } : {}) });
+    }
+    /** The pad's point under the pointer: the pad is drawn smaller or larger than its own size. */
+    function at(event) {
+        const box = canvas.getBoundingClientRect();
+        return { x: ((event.clientX - box.left) * WIDTH) / (box.width || WIDTH), y: ((event.clientY - box.top) * HEIGHT) / (box.height || HEIGHT) };
+    }
+    canvas.addEventListener('pointerdown', (event) => {
+        if (readonly || event.button !== 0)
+            return;
+        event.preventDefault();
+        canvas.setPointerCapture?.(event.pointerId);
+        last = at(event);
+        strokes.push([last]);
+        hint.hidden = true;
+        redraw();
+    });
+    canvas.addEventListener('pointermove', (event) => {
+        if (!last)
+            return;
+        const next = at(event);
+        line(last, next);
+        strokes[strokes.length - 1].push(next);
+        last = next;
+    });
+    const end = () => {
+        if (!last)
+            return;
+        last = null;
+        keep();
+    };
+    canvas.addEventListener('pointerup', end);
+    canvas.addEventListener('pointercancel', end);
+    // A name typed is drawn in a hand's script, in place of whatever was drawn.
+    typed.addEventListener('input', () => {
+        showPad();
+        strokes = [];
+        typedName = typed.value.trim() || null;
+        redraw();
+        keep();
+    });
+    undo.addEventListener('click', () => {
+        strokes.pop();
+        redraw();
+        keep();
+    });
+    upload?.addEventListener('click', () => file.click());
+    file.addEventListener('change', () => {
+        const chosen = file.files?.[0];
+        file.value = '';
+        if (chosen)
+            void (0, files_1.readFile)(chosen).then((value) => form.setValue(name, value));
+    });
+    clear.addEventListener('click', () => {
+        wipe();
+        mine = null;
+        typed.value = '';
+        showPad();
+        form.setValue(name, null);
+        typed.focus();
+    });
+    function showPad() {
+        image.hidden = true;
+        canvas.hidden = false;
+    }
+    return {
+        element,
+        focus: () => (typed.hidden ? clear : typed).focus(),
+        update(state) {
+            readonly = state.readonly;
+            const value = state.value && typeof state.value === 'object' && !Array.isArray(state.value) ? state.value : null;
+            const away = document.activeElement !== typed;
+            if (value && keyOf(value) !== mine) {
+                // Kept before, uploaded, or set from outside: its picture, until Clear.
+                const src = value.data ? `data:${value.type};base64,${value.data}` : (value.url ?? '');
+                if (image.getAttribute('src') !== src)
+                    image.src = src;
+                image.hidden = false;
+                canvas.hidden = true;
+                mine = null;
+                wipe();
+                if (away)
+                    typed.value = value.text ?? '';
+            }
+            else if (!value) {
+                if (mine !== null || !image.hidden) {
+                    // Emptied from outside.
+                    mine = null;
+                    wipe();
+                    if (away)
+                        typed.value = '';
+                }
+                showPad();
+            }
+            hint.hidden = readonly || !blank() || !image.hidden;
+            typed.hidden = readonly;
+            typed.readOnly = readonly;
+            clear.hidden = readonly || !value;
+            undo.hidden = readonly || !strokes.length || !image.hidden;
+            if (upload)
+                upload.hidden = readonly;
+            canvas.classList.toggle('fd-signature-locked', readonly);
+            (0, kind_parts_1.describeState)(element, state);
+            typed.setAttribute('aria-invalid', String(state.invalid));
+        },
+    };
+};
+exports.signatureWidget = signatureWidget;
+//# sourceMappingURL=signature.js.map

package/src/lib/signature.js.map

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

package/src/lib/signature.mjs

@@ -0,0 +1,219 @@
+import { readFile } from './files.mjs';
+import { describeState, maker, wordsFor } from './kind-parts.mjs';
+/**
+ * A signature on a file field (`binary.signature`): drawn on a pad with a
+ * mouse, a finger or a pen, or — for anyone without a pointer — typed as a
+ * name and drawn as a signature, the name kept as the value's `text`. Kept
+ * as a PNG picture, the value a file upload has. A signature already kept
+ * shows as its picture until Clear. Undo takes the last stroke away.
+ *
+ * `options.color` (#rrggbb) and `options.penWidth` set the pen; the node's
+ * `placeholder` is the words on the blank pad ("Sign here"); `options.footerLabel`
+ * the words kept under it; `options.upload` lets a picture of a signature be
+ * uploaded as a third way.
+ */
+/** The pad's own size, in the picture's pixels; it is drawn at whatever width its box has. */
+const WIDTH = 600;
+const HEIGHT = 180;
+/** Blue-black ink on a clear ground, so the picture reads on any paper. */
+const INK = '#1b2a5c';
+const SCRIPT = '"Segoe Script", "Snell Roundhand", "Brush Script MT", "Apple Chancery", cursive';
+/** The bytes a base64 text holds. */
+const bytesOf = (base64) => Math.floor((base64.length * 3) / 4) - (base64.endsWith('==') ? 2 : base64.endsWith('=') ? 1 : 0);
+const keyOf = (file) => file.data ?? file.url ?? '';
+export const signatureWidget = ({ form, name, field, node, id, document, labels, locale }) => {
+    const words = wordsFor(labels, locale);
+    const make = maker(document);
+    const options = node.options ?? {};
+    const color = options['color'];
+    const ink = typeof color === 'string' && /^#[\da-f]{6}$/i.test(color) ? color : INK;
+    const penWidth = options['penWidth'];
+    const width = typeof penWidth === 'number' && penWidth > 0 ? penWidth : 3;
+    const footerWords = options['footerLabel'];
+    const canvas = make('canvas', { class: 'fd-signature-pad', width: String(WIDTH), height: String(HEIGHT), role: 'img', 'aria-label': words.signaturePad });
+    const hint = make('span', { class: 'fd-signature-hint', 'aria-hidden': 'true' }, node.placeholder || words.signHere);
+    const image = make('img', { class: 'fd-signature-image', alt: field.label, hidden: '' });
+    const typed = make('input', { type: 'text', class: 'fd-input fd-signature-typed', 'aria-label': words.typeSignature, placeholder: words.typeSignature, autocomplete: 'name' });
+    const button = (words) => make('button', { type: 'button', class: 'fd-button fd-button-link', hidden: '' }, words);
+    const undo = button(words.undo);
+    const clear = button(words.clearDrawing);
+    clear.classList.add('fd-signature-clear');
+    // A picture of a signature, from this computer or a phone's camera.
+    const upload = options['upload'] === true ? button(words.uploadSignature) : null;
+    const file = make('input', { type: 'file', accept: 'image/*', class: 'fd-sr-only', tabindex: '-1', 'aria-hidden': 'true' });
+    const element = make('div', { id, class: 'fd-signature', role: 'group' }, make('div', { class: 'fd-signature-box' }, canvas, image, hint), ...(typeof footerWords === 'string' && footerWords ? [make('span', { class: 'fd-signature-footer' }, footerWords)] : []), make('div', { class: 'fd-signature-tools' }, typed, undo, ...(upload ? [upload, file] : []), clear));
+    const pen = () => {
+        const context = canvas.getContext('2d');
+        if (context) {
+            context.strokeStyle = context.fillStyle = ink;
+            context.lineWidth = width;
+            context.lineCap = context.lineJoin = 'round';
+        }
+        return context;
+    };
+    /** The picture this pad last kept: coming back from the form, it leaves the pad as it is. */
+    let mine = null;
+    let readonly = false;
+    /** What is on the pad: a typed name, and the strokes drawn, each its points. */
+    let typedName = null;
+    let strokes = [];
+    let last = null;
+    const blank = () => !strokes.length && !typedName;
+    /** The pad drawn again from what is on it: the name, then each stroke — a dot for a press that never moved. */
+    function redraw() {
+        const context = pen();
+        if (!context)
+            return;
+        context.clearRect(0, 0, WIDTH, HEIGHT);
+        if (typedName) {
+            context.font = `italic 64px ${SCRIPT}`;
+            context.textAlign = 'center';
+            context.textBaseline = 'middle';
+            context.fillText(typedName, WIDTH / 2, HEIGHT / 2, WIDTH - 40);
+        }
+        for (const stroke of strokes) {
+            context.beginPath();
+            context.arc(stroke[0].x, stroke[0].y, width / 2, 0, Math.PI * 2);
+            context.fill();
+            for (let i = 1; i < stroke.length; i++)
+                line(stroke[i - 1], stroke[i]);
+        }
+    }
+    function line(from, to) {
+        const context = pen();
+        context?.beginPath();
+        context?.moveTo(from.x, from.y);
+        context?.lineTo(to.x, to.y);
+        context?.stroke();
+    }
+    function wipe() {
+        strokes = [];
+        typedName = null;
+        redraw();
+    }
+    /** What is on the pad, as the field's value: nothing when it is blank. */
+    function keep() {
+        hint.hidden = !blank();
+        if (blank()) {
+            mine = null;
+            return form.setValue(name, null);
+        }
+        let url;
+        try {
+            url = canvas.toDataURL('image/png');
+        }
+        catch {
+            return; // a pad that cannot be read back keeps nothing
+        }
+        if (!url)
+            return;
+        const data = url.slice(url.indexOf(',') + 1);
+        mine = data;
+        form.setValue(name, { name: 'signature.png', type: 'image/png', size: bytesOf(data), data, ...(typedName && !strokes.length ? { text: typedName } : {}) });
+    }
+    /** The pad's point under the pointer: the pad is drawn smaller or larger than its own size. */
+    function at(event) {
+        const box = canvas.getBoundingClientRect();
+        return { x: ((event.clientX - box.left) * WIDTH) / (box.width || WIDTH), y: ((event.clientY - box.top) * HEIGHT) / (box.height || HEIGHT) };
+    }
+    canvas.addEventListener('pointerdown', (event) => {
+        if (readonly || event.button !== 0)
+            return;
+        event.preventDefault();
+        canvas.setPointerCapture?.(event.pointerId);
+        last = at(event);
+        strokes.push([last]);
+        hint.hidden = true;
+        redraw();
+    });
+    canvas.addEventListener('pointermove', (event) => {
+        if (!last)
+            return;
+        const next = at(event);
+        line(last, next);
+        strokes[strokes.length - 1].push(next);
+        last = next;
+    });
+    const end = () => {
+        if (!last)
+            return;
+        last = null;
+        keep();
+    };
+    canvas.addEventListener('pointerup', end);
+    canvas.addEventListener('pointercancel', end);
+    // A name typed is drawn in a hand's script, in place of whatever was drawn.
+    typed.addEventListener('input', () => {
+        showPad();
+        strokes = [];
+        typedName = typed.value.trim() || null;
+        redraw();
+        keep();
+    });
+    undo.addEventListener('click', () => {
+        strokes.pop();
+        redraw();
+        keep();
+    });
+    upload?.addEventListener('click', () => file.click());
+    file.addEventListener('change', () => {
+        const chosen = file.files?.[0];
+        file.value = '';
+        if (chosen)
+            void readFile(chosen).then((value) => form.setValue(name, value));
+    });
+    clear.addEventListener('click', () => {
+        wipe();
+        mine = null;
+        typed.value = '';
+        showPad();
+        form.setValue(name, null);
+        typed.focus();
+    });
+    function showPad() {
+        image.hidden = true;
+        canvas.hidden = false;
+    }
+    return {
+        element,
+        focus: () => (typed.hidden ? clear : typed).focus(),
+        update(state) {
+            readonly = state.readonly;
+            const value = state.value && typeof state.value === 'object' && !Array.isArray(state.value) ? state.value : null;
+            const away = document.activeElement !== typed;
+            if (value && keyOf(value) !== mine) {
+                // Kept before, uploaded, or set from outside: its picture, until Clear.
+                const src = value.data ? `data:${value.type};base64,${value.data}` : (value.url ?? '');
+                if (image.getAttribute('src') !== src)
+                    image.src = src;
+                image.hidden = false;
+                canvas.hidden = true;
+                mine = null;
+                wipe();
+                if (away)
+                    typed.value = value.text ?? '';
+            }
+            else if (!value) {
+                if (mine !== null || !image.hidden) {
+                    // Emptied from outside.
+                    mine = null;
+                    wipe();
+                    if (away)
+                        typed.value = '';
+                }
+                showPad();
+            }
+            hint.hidden = readonly || !blank() || !image.hidden;
+            typed.hidden = readonly;
+            typed.readOnly = readonly;
+            clear.hidden = readonly || !value;
+            undo.hidden = readonly || !strokes.length || !image.hidden;
+            if (upload)
+                upload.hidden = readonly;
+            canvas.classList.toggle('fd-signature-locked', readonly);
+            describeState(element, state);
+            typed.setAttribute('aria-invalid', String(state.invalid));
+        },
+    };
+};
+//# sourceMappingURL=signature.mjs.map

package/src/lib/signature.mjs.map

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

package/src/lib/slider.d.mts

@@ -0,0 +1,10 @@
+import type { WidgetFactory } from './widgets.mjs';
+/**
+ * A number picked on a slider (`integer.slider`, `float.slider`): the field's
+ * `min` to `max` (0 to 100 when it has none), `options.step` at a time (1),
+ * the value shown beside it and the ends under it, written as the page's
+ * readers write numbers. A native range, so the arrow keys, Home and End move
+ * it, a screen reader reads it, and it runs right to left on such a page.
+ * Until it is slid it is not answered, and says so.
+ */
+export declare const sliderWidget: WidgetFactory;

package/src/lib/slider.d.ts

@@ -0,0 +1,10 @@
+import type { WidgetFactory } from './widgets';
+/**
+ * A number picked on a slider (`integer.slider`, `float.slider`): the field's
+ * `min` to `max` (0 to 100 when it has none), `options.step` at a time (1),
+ * the value shown beside it and the ends under it, written as the page's
+ * readers write numbers. A native range, so the arrow keys, Home and End move
+ * it, a screen reader reads it, and it runs right to left on such a page.
+ * Until it is slid it is not answered, and says so.
+ */
+export declare const sliderWidget: WidgetFactory;

package/src/lib/slider.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sliderWidget = void 0;
+const kind_parts_1 = require("./kind-parts");
+const numbers_1 = require("./numbers");
+/**
+ * A number picked on a slider (`integer.slider`, `float.slider`): the field's
+ * `min` to `max` (0 to 100 when it has none), `options.step` at a time (1),
+ * the value shown beside it and the ends under it, written as the page's
+ * readers write numbers. A native range, so the arrow keys, Home and End move
+ * it, a screen reader reads it, and it runs right to left on such a page.
+ * Until it is slid it is not answered, and says so.
+ */
+const sliderWidget = ({ form, name, field, node, id, document, labels, locale = 'en' }) => {
+    const words = (0, kind_parts_1.wordsFor)(labels, locale);
+    const make = (0, kind_parts_1.maker)(document);
+    const has = (key) => (key in field && typeof field[key] === 'number' ? field[key] : undefined);
+    const min = has('min') ?? 0;
+    const max = has('max') ?? 100;
+    const step = typeof node.options?.['step'] === 'number' && node.options['step'] > 0 ? node.options['step'] : 1;
+    const decimals = field.type === 'integer' ? 0 : field.type === 'float' && field.digits ? field.digits[1] : Math.max(0, -Math.floor(Math.log10(step)));
+    const written = (n) => (0, numbers_1.formatNumber)(n, decimals, locale);
+    const input = make('input', { id, type: 'range', class: 'fd-slider-input', min: String(min), max: String(max), step: String(step) });
+    const output = make('output', { class: 'fd-slider-value', for: id, 'aria-hidden': 'true' });
+    // Words under the ends' numbers, when the page has them: "Never" … "Every day".
+    const endWords = [node.options?.['startLabel'], node.options?.['endLabel']].map((v) => (typeof v === 'string' ? v : ''));
+    const end = (n, i) => make('span', { class: i ? 'fd-slider-last' : undefined }, written(n), ...(endWords[i] ? [make('span', { class: 'fd-slider-word' }, endWords[i])] : []));
+    const ends = make('div', { class: 'fd-slider-ends', 'aria-hidden': 'true' }, end(min, 0), end(max, 1));
+    const clear = (0, kind_parts_1.clearSelection)(document, words, () => {
+        form.setValue(name, null);
+        input.focus();
+    });
+    const element = make('div', { class: 'fd-slider' }, make('div', { class: 'fd-slider-track' }, input, output), ends, clear.button);
+    if (endWords.some(Boolean))
+        input.setAttribute('aria-description', endWords.filter(Boolean).join(' … '));
+    input.addEventListener('input', () => form.setValue(name, Number(input.value)));
+    return {
+        element,
+        focus: () => input.focus(),
+        update(state) {
+            const value = typeof state.value === 'number' ? state.value : null;
+            element.classList.toggle('fd-slider-empty', value === null);
+            // Not answered: the thumb waits halfway, dimmed, and says so.
+            const at = String(value ?? (min + max) / 2);
+            if (input.value !== at)
+                input.value = at;
+            output.textContent = value === null ? '–' : written(value);
+            input.setAttribute('aria-valuetext', value === null ? words.notAnswered : written(value));
+            input.disabled = state.readonly;
+            clear.allow(state);
+            clear.show(value !== null);
+            (0, kind_parts_1.describeState)(input, state);
+        },
+    };
+};
+exports.sliderWidget = sliderWidget;
+//# sourceMappingURL=slider.js.map

package/src/lib/slider.js.map

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

package/src/lib/slider.mjs

@@ -0,0 +1,53 @@
+import { clearSelection, describeState, maker, wordsFor } from './kind-parts.mjs';
+import { formatNumber } from './numbers.mjs';
+/**
+ * A number picked on a slider (`integer.slider`, `float.slider`): the field's
+ * `min` to `max` (0 to 100 when it has none), `options.step` at a time (1),
+ * the value shown beside it and the ends under it, written as the page's
+ * readers write numbers. A native range, so the arrow keys, Home and End move
+ * it, a screen reader reads it, and it runs right to left on such a page.
+ * Until it is slid it is not answered, and says so.
+ */
+export const sliderWidget = ({ form, name, field, node, id, document, labels, locale = 'en' }) => {
+    const words = wordsFor(labels, locale);
+    const make = maker(document);
+    const has = (key) => (key in field && typeof field[key] === 'number' ? field[key] : undefined);
+    const min = has('min') ?? 0;
+    const max = has('max') ?? 100;
+    const step = typeof node.options?.['step'] === 'number' && node.options['step'] > 0 ? node.options['step'] : 1;
+    const decimals = field.type === 'integer' ? 0 : field.type === 'float' && field.digits ? field.digits[1] : Math.max(0, -Math.floor(Math.log10(step)));
+    const written = (n) => formatNumber(n, decimals, locale);
+    const input = make('input', { id, type: 'range', class: 'fd-slider-input', min: String(min), max: String(max), step: String(step) });
+    const output = make('output', { class: 'fd-slider-value', for: id, 'aria-hidden': 'true' });
+    // Words under the ends' numbers, when the page has them: "Never" … "Every day".
+    const endWords = [node.options?.['startLabel'], node.options?.['endLabel']].map((v) => (typeof v === 'string' ? v : ''));
+    const end = (n, i) => make('span', { class: i ? 'fd-slider-last' : undefined }, written(n), ...(endWords[i] ? [make('span', { class: 'fd-slider-word' }, endWords[i])] : []));
+    const ends = make('div', { class: 'fd-slider-ends', 'aria-hidden': 'true' }, end(min, 0), end(max, 1));
+    const clear = clearSelection(document, words, () => {
+        form.setValue(name, null);
+        input.focus();
+    });
+    const element = make('div', { class: 'fd-slider' }, make('div', { class: 'fd-slider-track' }, input, output), ends, clear.button);
+    if (endWords.some(Boolean))
+        input.setAttribute('aria-description', endWords.filter(Boolean).join(' … '));
+    input.addEventListener('input', () => form.setValue(name, Number(input.value)));
+    return {
+        element,
+        focus: () => input.focus(),
+        update(state) {
+            const value = typeof state.value === 'number' ? state.value : null;
+            element.classList.toggle('fd-slider-empty', value === null);
+            // Not answered: the thumb waits halfway, dimmed, and says so.
+            const at = String(value ?? (min + max) / 2);
+            if (input.value !== at)
+                input.value = at;
+            output.textContent = value === null ? '–' : written(value);
+            input.setAttribute('aria-valuetext', value === null ? words.notAnswered : written(value));
+            input.disabled = state.readonly;
+            clear.allow(state);
+            clear.show(value !== null);
+            describeState(input, state);
+        },
+    };
+};
+//# sourceMappingURL=slider.mjs.map

package/src/lib/slider.mjs.map

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