@fieldia/widgets 0.9.2 → 0.10.0

package/src/lib/cards.mjs

@@ -0,0 +1,148 @@
+import { announcer, describeState, fillIn, maker, wordsFor } from './kind-parts.mjs';
+import { moveLineTo } from './line-moves.mjs';
+import { lineForm } from './lines.mjs';
+import { createWidget } from './widgets.mjs';
+const count = (value) => (typeof value === 'number' && Number.isInteger(value) && value >= 0 ? value : undefined);
+export const cardsWidget = ({ form, name, field, node, id, document, labels, locale, dialogs }) => {
+    const words = wordsFor(labels, locale);
+    const make = maker(document);
+    const def = field;
+    const options = node.options ?? {};
+    const min = count(options['min']) ?? 0;
+    const max = count(options['max']) ?? Infinity;
+    const itemLabel = typeof options['itemLabel'] === 'string' && options['itemLabel'].trim() ? options['itemLabel'].trim() : null;
+    const titleOf = (n) => (itemLabel ? `${itemLabel} ${n}` : fillIn(words.entry, { n }));
+    // The fields that keep the lines' order or say what a line is are not asked for.
+    const names = (node.columns ?? Object.keys(def.fields)).filter((f) => def.fields[f] && f !== def.sequenceField && f !== def.lineKinds?.field);
+    const list = make('div', { class: 'fd-repeat-list' });
+    const addButton = make('button', { type: 'button', class: 'fd-button fd-repeat-add' }, typeof options['addLabel'] === 'string' && options['addLabel'] ? options['addLabel'] : words.addAnother);
+    const voice = announcer(make);
+    const element = make('div', { id, class: 'fd-repeat', role: 'group' }, list, addButton, voice.element);
+    const cards = new Map();
+    const lines = () => form.getState().values[name] ?? [];
+    let readonly = false;
+    /** Where the cursor goes once the cards are drawn again. */
+    let focusNext = null;
+    // A new form starts with the cards it needs at least.
+    for (let have = lines().length; have < min; have++)
+        form.addLine(name);
+    addButton.addEventListener('click', () => {
+        if (readonly || lines().length >= max)
+            return;
+        const key = form.addLine(name);
+        focusNext = () => cards.get(key)?.fields[0]?.widget.focus();
+        settle();
+    });
+    function makeCard(line) {
+        const titleId = `${id}-${line.key}-title`;
+        const title = make('span', { id: titleId, class: 'fd-repeat-title' });
+        const remove = make('button', { type: 'button', class: 'fd-repeat-remove' }, '×');
+        const tool = (text, word, act) => {
+            const button = make('button', { type: 'button', class: 'fd-repeat-tool' }, text);
+            button.addEventListener('click', act);
+            return [button, word];
+        };
+        const at = () => lines().findIndex((l) => l.key === line.key);
+        const tools = [tool('↑', 'moveUp', () => move(line.key, at() - 1)), tool('↓', 'moveDown', () => move(line.key, at() + 1)), tool('⧉', 'copy', () => copy(line.key))];
+        const body = make('div', { class: 'fd-repeat-fields' });
+        const cardElement = make('div', { class: 'fd-repeat-card', role: 'group', 'aria-labelledby': titleId, 'data-line': line.key }, make('div', { class: 'fd-repeat-head' }, title, ...tools.map(([b]) => b), remove), body);
+        const fields = names.map((column) => {
+            const sub = def.fields[column];
+            const cellId = `${id}-${line.key}-${column}`;
+            const subNode = { type: 'field', id: `${node.id}.${line.key}.${column}`, field: column };
+            const widget = createWidget({ form: lineForm(form, name, line.key), name: column, field: sub, node: subNode, id: cellId, document, labels, locale, dialogs });
+            const label = make('label', { class: 'fd-repeat-label', for: cellId }, sub.label);
+            if (!['INPUT', 'SELECT', 'TEXTAREA'].includes(widget.element.tagName))
+                label.addEventListener('click', () => widget.focus());
+            const error = make('div', { class: 'fd-cell-error', hidden: '' });
+            body.append(make('div', { class: 'fd-repeat-field' }, label, widget.element, error));
+            return { name: column, def: sub, widget, error };
+        });
+        remove.addEventListener('click', () => {
+            const all = lines();
+            const at = all.findIndex((l) => l.key === line.key);
+            if (readonly || at === -1 || all.length <= min)
+                return;
+            const gone = title.textContent ?? '';
+            form.removeLine(name, line.key);
+            voice.say(fillIn(words.removed, { name: gone }));
+            // The card that took its place, else the one before, else "Add another".
+            const after = lines();
+            const next = after[Math.min(at, after.length - 1)];
+            focusNext = () => (next ? cards.get(next.key)?.fields[0]?.widget.focus() : addButton.focus());
+            settle();
+        });
+        return { element: cardElement, title, remove, tools, fields };
+    }
+    /** A card to another place, the focus kept on what had it, and where it went said aloud. */
+    function move(key, to) {
+        const from = lines().findIndex((l) => l.key === key);
+        if (readonly || to < 0 || to >= lines().length || to === from)
+            return;
+        const gone = cards.get(key)?.title.textContent ?? '';
+        moveLineTo(form, name, def, key, to);
+        // The focus stays on the button pressed; at an end, the other way takes it.
+        const way = (from > to && to > 0) || to === lines().length - 1 ? 0 : 1;
+        cards.get(key)?.tools[way][0].focus();
+        voice.say(fillIn(words.movedTo, { label: gone, n: to + 1, total: lines().length }));
+    }
+    /** A copy of a card, its answers too, right after it, the cursor in its first field. */
+    function copy(key) {
+        const all = lines();
+        const at = all.findIndex((l) => l.key === key);
+        if (readonly || at < 0 || all.length >= max)
+            return;
+        const values = { ...all[at].values };
+        if (def.sequenceField)
+            delete values[def.sequenceField];
+        const made = form.addLine(name, values);
+        moveLineTo(form, name, def, made, at + 1);
+        cards.get(made)?.fields[0]?.widget.focus();
+    }
+    function settle() {
+        const run = focusNext;
+        focusNext = null;
+        run?.();
+    }
+    return {
+        element,
+        focus: () => ([...cards.values()].find((card) => card.element === list.firstElementChild)?.fields[0]?.widget ?? addButton).focus(),
+        update(state) {
+            readonly = state.readonly;
+            const current = state.value ?? [];
+            const errors = form.getState().errors;
+            const keep = new Set(current.map((l) => l.key));
+            for (const [key, card] of cards) {
+                if (keep.has(key))
+                    continue;
+                card.element.remove();
+                for (const f of card.fields)
+                    f.widget.destroy?.();
+                cards.delete(key);
+            }
+            current.forEach((line, index) => {
+                let card = cards.get(line.key);
+                if (!card)
+                    cards.set(line.key, (card = makeCard(line)));
+                if (list.children[index] !== card.element)
+                    list.insertBefore(card.element, list.children[index] ?? null);
+                card.title.textContent = titleOf(index + 1);
+                card.remove.setAttribute('aria-label', fillIn(words.remove, { name: card.title.textContent }));
+                card.remove.hidden = readonly || current.length <= min;
+                for (const [button, word] of card.tools) {
+                    button.setAttribute('aria-label', fillIn(words[word], { label: card.title.textContent, name: card.title.textContent }));
+                    button.hidden = readonly || (word === 'moveUp' ? index === 0 : word === 'moveDown' ? index === current.length - 1 : current.length >= max);
+                }
+                for (const f of card.fields) {
+                    const message = errors[`${name}.${line.key}.${f.name}`];
+                    f.error.hidden = !message;
+                    f.error.textContent = message ?? '';
+                    f.widget.update({ value: line.values[f.name], values: line.values, readonly: readonly || f.def.readonly === true, required: f.def.required === true, invalid: !!message });
+                }
+            });
+            addButton.hidden = readonly || current.length >= max;
+            describeState(element, state);
+        },
+    };
+};
+//# sourceMappingURL=cards.mjs.map

package/src/lib/cards.mjs.map

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

package/src/lib/choice-images.d.mts

@@ -0,0 +1,2 @@
+import type { WidgetFactory } from './widgets.mjs';
+export declare const imageChoiceWidget: WidgetFactory;

package/src/lib/choice-images.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetFactory } from './widgets';
+export declare const imageChoiceWidget: WidgetFactory;

package/src/lib/choice-images.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.imageChoiceWidget = void 0;
+const choice_rules_1 = require("./choice-rules");
+const kind_parts_1 = require("./kind-parts");
+const shuffle_1 = require("./shuffle");
+/**
+ * Pictures to choose from (`selection.image-choice`): each option a card of
+ * its `image` over its words. One answer is a radio group with one stop for
+ * Tab — the arrows move and pick, going round at the ends, Home and End go to
+ * the ends, and left is forward on a right-to-left page — with "Clear
+ * selection" when it need not be answered. Several answers, when the field
+ * takes several, are checkboxes, each its own stop. "Other" is not offered:
+ * an answer of one's own has no picture. `options.shuffle` shows the cards
+ * in an order of the form's own. Each picture is described by its option's
+ * `alt`. `options.showLabels: false` keeps the words out of sight (still each
+ * card's name), `imageSize` is small, medium or large, `imageFit: "whole"`
+ * shows the whole picture rather than filling the card, and `columns` lays
+ * the cards in columns or in a row.
+ */
+/** A frame with a hill and a sun: the tile of an option without a picture. */
+const BLANK = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 16l-5-5-9 9"/></svg>';
+const imageChoiceWidget = ({ 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 multiple = field.type === 'selection' && field.multiple === true;
+    const written = field.type === 'selection' ? field.options : [];
+    const options = (0, shuffle_1.shownOptions)(written, form, name, node);
+    const look = node.options ?? {};
+    const bare = look['showLabels'] === false;
+    const group = make('div', { id, class: `fd-image-choices${bare ? ' fd-image-choices-bare' : ''}`, role: multiple ? 'group' : 'radiogroup', 'data-size': look['imageSize'], 'data-fit': look['imageFit'] });
+    (0, choice_rules_1.layOut)(group, node);
+    const limit = multiple ? (0, choice_rules_1.limiter)(make, words, node) : null;
+    const cards = options.map((option) => {
+        const picture = option.image ? make('img', { src: option.image, alt: option.alt ?? '', loading: 'lazy', draggable: 'false' }) : make('span', { class: 'fd-image-card-blank' });
+        if (!option.image)
+            picture.innerHTML = BLANK; // a constant drawing, never words from the page
+        const card = make('button', { type: 'button', class: 'fd-image-card', role: multiple ? 'checkbox' : 'radio', 'aria-checked': 'false', 'aria-label': bare ? option.label : undefined }, make('span', { class: 'fd-image-card-picture' }, picture), make('span', { class: 'fd-image-card-words' }, option.label));
+        card.addEventListener('click', () => pick(option));
+        group.append(card);
+        return card;
+    });
+    const current = () => form.getState().values[name];
+    function pick(option) {
+        if (!multiple)
+            return form.setValue(name, option.value);
+        const now = Array.isArray(current()) ? current() : [];
+        const on = new Set(now.includes(option.value) ? now.filter((v) => v !== option.value) : (0, choice_rules_1.withAlone)(written, now, option.value));
+        // In the options' own order, as checkboxes keep them, however they are shown.
+        form.setValue(name, written.filter((o) => on.has(o.value)).map((o) => o.value));
+    }
+    let readonly = false;
+    if (!multiple) {
+        group.addEventListener('keydown', (event) => {
+            if (readonly)
+                return;
+            const at = cards.indexOf(event.target);
+            if (at === -1)
+                return;
+            const back = (0, kind_parts_1.rightToLeft)(group);
+            const steps = { ArrowDown: 1, ArrowUp: -1, ArrowRight: back ? -1 : 1, ArrowLeft: back ? 1 : -1 };
+            const to = event.key === 'Home' ? 0 : event.key === 'End' ? cards.length - 1 : event.key in steps ? (at + steps[event.key] + cards.length) % cards.length : -1;
+            if (to === -1)
+                return;
+            event.preventDefault();
+            pick(options[to]);
+            cards[to].focus();
+        });
+    }
+    const clear = multiple
+        ? null
+        : (0, kind_parts_1.clearSelection)(document, words, () => {
+            form.setValue(name, null);
+            cards[0]?.focus();
+        });
+    if (limit?.element)
+        group.append(limit.element);
+    return {
+        element: clear ? make('div', { class: 'fd-choices-box' }, group, clear.button) : group,
+        focus: () => (cards.find((c) => c.getAttribute('aria-checked') === 'true') ?? cards[0])?.focus(),
+        update(state) {
+            readonly = state.readonly;
+            const chosen = new Set(Array.isArray(state.value) ? state.value : [state.value]);
+            const stop = multiple ? -1 : Math.max(0, options.findIndex((o) => chosen.has(o.value)));
+            const full = !!limit?.full(Array.isArray(state.value) ? state.value.length : 0);
+            cards.forEach((card, i) => {
+                const on = chosen.has(options[i].value);
+                card.setAttribute('aria-checked', String(on));
+                card.tabIndex = multiple || i === stop ? 0 : -1;
+                card.disabled = readonly || (full && !on && !options[i].exclusive);
+            });
+            clear?.allow(state);
+            clear?.show(options.some((o) => chosen.has(o.value)));
+            (0, kind_parts_1.describeState)(group, state);
+        },
+    };
+};
+exports.imageChoiceWidget = imageChoiceWidget;
+//# sourceMappingURL=choice-images.js.map

package/src/lib/choice-images.js.map

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

package/src/lib/choice-images.mjs

@@ -0,0 +1,95 @@
+import { layOut, limiter, withAlone } from './choice-rules.mjs';
+import { clearSelection, describeState, maker, rightToLeft, wordsFor } from './kind-parts.mjs';
+import { shownOptions } from './shuffle.mjs';
+/**
+ * Pictures to choose from (`selection.image-choice`): each option a card of
+ * its `image` over its words. One answer is a radio group with one stop for
+ * Tab — the arrows move and pick, going round at the ends, Home and End go to
+ * the ends, and left is forward on a right-to-left page — with "Clear
+ * selection" when it need not be answered. Several answers, when the field
+ * takes several, are checkboxes, each its own stop. "Other" is not offered:
+ * an answer of one's own has no picture. `options.shuffle` shows the cards
+ * in an order of the form's own. Each picture is described by its option's
+ * `alt`. `options.showLabels: false` keeps the words out of sight (still each
+ * card's name), `imageSize` is small, medium or large, `imageFit: "whole"`
+ * shows the whole picture rather than filling the card, and `columns` lays
+ * the cards in columns or in a row.
+ */
+/** A frame with a hill and a sun: the tile of an option without a picture. */
+const BLANK = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 16l-5-5-9 9"/></svg>';
+export const imageChoiceWidget = ({ form, name, field, node, id, document, labels, locale }) => {
+    const words = wordsFor(labels, locale);
+    const make = maker(document);
+    const multiple = field.type === 'selection' && field.multiple === true;
+    const written = field.type === 'selection' ? field.options : [];
+    const options = shownOptions(written, form, name, node);
+    const look = node.options ?? {};
+    const bare = look['showLabels'] === false;
+    const group = make('div', { id, class: `fd-image-choices${bare ? ' fd-image-choices-bare' : ''}`, role: multiple ? 'group' : 'radiogroup', 'data-size': look['imageSize'], 'data-fit': look['imageFit'] });
+    layOut(group, node);
+    const limit = multiple ? limiter(make, words, node) : null;
+    const cards = options.map((option) => {
+        const picture = option.image ? make('img', { src: option.image, alt: option.alt ?? '', loading: 'lazy', draggable: 'false' }) : make('span', { class: 'fd-image-card-blank' });
+        if (!option.image)
+            picture.innerHTML = BLANK; // a constant drawing, never words from the page
+        const card = make('button', { type: 'button', class: 'fd-image-card', role: multiple ? 'checkbox' : 'radio', 'aria-checked': 'false', 'aria-label': bare ? option.label : undefined }, make('span', { class: 'fd-image-card-picture' }, picture), make('span', { class: 'fd-image-card-words' }, option.label));
+        card.addEventListener('click', () => pick(option));
+        group.append(card);
+        return card;
+    });
+    const current = () => form.getState().values[name];
+    function pick(option) {
+        if (!multiple)
+            return form.setValue(name, option.value);
+        const now = Array.isArray(current()) ? current() : [];
+        const on = new Set(now.includes(option.value) ? now.filter((v) => v !== option.value) : withAlone(written, now, option.value));
+        // In the options' own order, as checkboxes keep them, however they are shown.
+        form.setValue(name, written.filter((o) => on.has(o.value)).map((o) => o.value));
+    }
+    let readonly = false;
+    if (!multiple) {
+        group.addEventListener('keydown', (event) => {
+            if (readonly)
+                return;
+            const at = cards.indexOf(event.target);
+            if (at === -1)
+                return;
+            const back = rightToLeft(group);
+            const steps = { ArrowDown: 1, ArrowUp: -1, ArrowRight: back ? -1 : 1, ArrowLeft: back ? 1 : -1 };
+            const to = event.key === 'Home' ? 0 : event.key === 'End' ? cards.length - 1 : event.key in steps ? (at + steps[event.key] + cards.length) % cards.length : -1;
+            if (to === -1)
+                return;
+            event.preventDefault();
+            pick(options[to]);
+            cards[to].focus();
+        });
+    }
+    const clear = multiple
+        ? null
+        : clearSelection(document, words, () => {
+            form.setValue(name, null);
+            cards[0]?.focus();
+        });
+    if (limit?.element)
+        group.append(limit.element);
+    return {
+        element: clear ? make('div', { class: 'fd-choices-box' }, group, clear.button) : group,
+        focus: () => (cards.find((c) => c.getAttribute('aria-checked') === 'true') ?? cards[0])?.focus(),
+        update(state) {
+            readonly = state.readonly;
+            const chosen = new Set(Array.isArray(state.value) ? state.value : [state.value]);
+            const stop = multiple ? -1 : Math.max(0, options.findIndex((o) => chosen.has(o.value)));
+            const full = !!limit?.full(Array.isArray(state.value) ? state.value.length : 0);
+            cards.forEach((card, i) => {
+                const on = chosen.has(options[i].value);
+                card.setAttribute('aria-checked', String(on));
+                card.tabIndex = multiple || i === stop ? 0 : -1;
+                card.disabled = readonly || (full && !on && !options[i].exclusive);
+            });
+            clear?.allow(state);
+            clear?.show(options.some((o) => chosen.has(o.value)));
+            describeState(group, state);
+        },
+    };
+};
+//# sourceMappingURL=choice-images.mjs.map

package/src/lib/choice-images.mjs.map

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

package/src/lib/choice-rules.d.mts

@@ -0,0 +1,22 @@
+import type { FieldNode, Option } from '@fieldia/core';
+import { type Make } from './kind-parts.mjs';
+import type { WidgetLabels } from './labels.mjs';
+/**
+ * What the choice kinds share beyond their looks: an option that goes alone
+ * ("None of these"), a limit on how many are ticked, and the options laid
+ * out in columns or in a row.
+ */
+/** The values once `value` is added: alone when it goes alone, else without those that do. */
+export declare function withAlone(options: readonly Option[], now: readonly unknown[], value: unknown): unknown[];
+/**
+ * The most a question takes, from an answer rule that always holds and stops
+ * the form: once that many are ticked the rest are turned off, and a polite
+ * "Up to 3" says why — as Form.io does, rather than complaining after.
+ */
+export declare function limiter(make: Make, words: WidgetLabels, node: FieldNode): {
+    element: HTMLSpanElement | null;
+    /** Whether `count` fills it, saying so when it does. */
+    full(count: number): boolean;
+};
+/** Columns (`options.columns`, 1 to 4) or all in a row (`"row"`); a phone stacks them again. */
+export declare function layOut(group: HTMLElement, node: FieldNode): void;

package/src/lib/choice-rules.d.ts

@@ -0,0 +1,22 @@
+import type { FieldNode, Option } from '@fieldia/core';
+import { type Make } from './kind-parts';
+import type { WidgetLabels } from './labels';
+/**
+ * What the choice kinds share beyond their looks: an option that goes alone
+ * ("None of these"), a limit on how many are ticked, and the options laid
+ * out in columns or in a row.
+ */
+/** The values once `value` is added: alone when it goes alone, else without those that do. */
+export declare function withAlone(options: readonly Option[], now: readonly unknown[], value: unknown): unknown[];
+/**
+ * The most a question takes, from an answer rule that always holds and stops
+ * the form: once that many are ticked the rest are turned off, and a polite
+ * "Up to 3" says why — as Form.io does, rather than complaining after.
+ */
+export declare function limiter(make: Make, words: WidgetLabels, node: FieldNode): {
+    element: HTMLSpanElement | null;
+    /** Whether `count` fills it, saying so when it does. */
+    full(count: number): boolean;
+};
+/** Columns (`options.columns`, 1 to 4) or all in a row (`"row"`); a phone stacks them again. */
+export declare function layOut(group: HTMLElement, node: FieldNode): void;

package/src/lib/choice-rules.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withAlone = withAlone;
+exports.limiter = limiter;
+exports.layOut = layOut;
+const kind_parts_1 = require("./kind-parts");
+/**
+ * What the choice kinds share beyond their looks: an option that goes alone
+ * ("None of these"), a limit on how many are ticked, and the options laid
+ * out in columns or in a row.
+ */
+/** The values once `value` is added: alone when it goes alone, else without those that do. */
+function withAlone(options, now, value) {
+    const alone = (v) => options.some((o) => o.exclusive && o.value === v);
+    return alone(value) ? [value] : [...now.filter((v) => !alone(v)), value];
+}
+/**
+ * The most a question takes, from an answer rule that always holds and stops
+ * the form: once that many are ticked the rest are turned off, and a polite
+ * "Up to 3" says why — as Form.io does, rather than complaining after.
+ */
+function limiter(make, words, node) {
+    const most = node.validate?.find((r) => r.atMost !== undefined && (r.when ?? true) === true && r.level !== 'warning')?.atMost;
+    const element = most ? make('span', { class: 'fd-choice-limit', role: 'status' }) : null;
+    return {
+        element,
+        /** Whether `count` fills it, saying so when it does. */
+        full(count) {
+            const full = !!most && count >= most;
+            if (element)
+                (0, kind_parts_1.setText)(element, full ? (0, kind_parts_1.fillIn)(words.upTo, { n: most }) : '');
+            return full;
+        },
+    };
+}
+/** Columns (`options.columns`, 1 to 4) or all in a row (`"row"`); a phone stacks them again. */
+function layOut(group, node) {
+    const columns = node.options?.['columns'];
+    if (columns === 'row')
+        group.classList.add('fd-choices-row');
+    else if (typeof columns === 'number' && columns >= 1) {
+        group.classList.add('fd-choices-columns');
+        group.style.setProperty('--fd-choice-columns', String(Math.min(4, Math.round(columns))));
+    }
+}
+//# sourceMappingURL=choice-rules.js.map

package/src/lib/choice-rules.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-rules.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/choice-rules.ts"],"names":[],"mappings":";;AAWA,8BAGC;AAOD,0BAYC;AAGD,wBAOC;AA1CD,6CAA0D;AAG1D;;;;GAIG;AAEH,8FAA8F;AAC9F,SAAgB,SAAS,CAAC,OAA0B,EAAE,GAAuB,EAAE,KAAc;IAC3F,MAAM,KAAK,GAAG,CAAC,CAAU,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;IAChF,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AAC3E,CAAC;AAED;;;;GAIG;AACH,SAAgB,OAAO,CAAC,IAAU,EAAE,KAAmB,EAAE,IAAe;IACtE,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,EAAE,MAAM,CAAC;IAC9H,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACzF,OAAO;QACL,OAAO;QACP,wDAAwD;QACxD,IAAI,CAAC,KAAa;YAChB,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;YACrC,IAAI,OAAO;gBAAE,IAAA,oBAAO,EAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,IAAA,mBAAM,EAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,IAAc,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACrF,OAAO,IAAI,CAAC;QACd,CAAC;KACF,CAAC;AACJ,CAAC;AAED,gGAAgG;AAChG,SAAgB,MAAM,CAAC,KAAkB,EAAE,IAAe;IACxD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,SAAS,CAAC,CAAC;IAC1C,IAAI,OAAO,KAAK,KAAK;QAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;SACxD,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,EAAE,CAAC;QACrD,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QAC1C,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3F,CAAC;AACH,CAAC"}

package/src/lib/choice-rules.mjs

@@ -0,0 +1,41 @@
+import { fillIn, setText } from './kind-parts.mjs';
+/**
+ * What the choice kinds share beyond their looks: an option that goes alone
+ * ("None of these"), a limit on how many are ticked, and the options laid
+ * out in columns or in a row.
+ */
+/** The values once `value` is added: alone when it goes alone, else without those that do. */
+export function withAlone(options, now, value) {
+    const alone = (v) => options.some((o) => o.exclusive && o.value === v);
+    return alone(value) ? [value] : [...now.filter((v) => !alone(v)), value];
+}
+/**
+ * The most a question takes, from an answer rule that always holds and stops
+ * the form: once that many are ticked the rest are turned off, and a polite
+ * "Up to 3" says why — as Form.io does, rather than complaining after.
+ */
+export function limiter(make, words, node) {
+    const most = node.validate?.find((r) => r.atMost !== undefined && (r.when ?? true) === true && r.level !== 'warning')?.atMost;
+    const element = most ? make('span', { class: 'fd-choice-limit', role: 'status' }) : null;
+    return {
+        element,
+        /** Whether `count` fills it, saying so when it does. */
+        full(count) {
+            const full = !!most && count >= most;
+            if (element)
+                setText(element, full ? fillIn(words.upTo, { n: most }) : '');
+            return full;
+        },
+    };
+}
+/** Columns (`options.columns`, 1 to 4) or all in a row (`"row"`); a phone stacks them again. */
+export function layOut(group, node) {
+    const columns = node.options?.['columns'];
+    if (columns === 'row')
+        group.classList.add('fd-choices-row');
+    else if (typeof columns === 'number' && columns >= 1) {
+        group.classList.add('fd-choices-columns');
+        group.style.setProperty('--fd-choice-columns', String(Math.min(4, Math.round(columns))));
+    }
+}
+//# sourceMappingURL=choice-rules.mjs.map

package/src/lib/choice-rules.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-rules.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/choice-rules.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAa,MAAM,cAAc,CAAC;AAG1D;;;;GAIG;AAEH,8FAA8F;AAC9F,MAAM,UAAU,SAAS,CAAC,OAA0B,EAAE,GAAuB,EAAE,KAAc;IAC3F,MAAM,KAAK,GAAG,CAAC,CAAU,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;IAChF,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AAC3E,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,IAAU,EAAE,KAAmB,EAAE,IAAe;IACtE,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,EAAE,MAAM,CAAC;IAC9H,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACzF,OAAO;QACL,OAAO;QACP,wDAAwD;QACxD,IAAI,CAAC,KAAa;YAChB,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;YACrC,IAAI,OAAO;gBAAE,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,IAAc,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACrF,OAAO,IAAI,CAAC;QACd,CAAC;KACF,CAAC;AACJ,CAAC;AAED,gGAAgG;AAChG,MAAM,UAAU,MAAM,CAAC,KAAkB,EAAE,IAAe;IACxD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,SAAS,CAAC,CAAC;IAC1C,IAAI,OAAO,KAAK,KAAK;QAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;SACxD,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,EAAE,CAAC;QACrD,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QAC1C,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3F,CAAC;AACH,CAAC"}

package/src/lib/choice-tags.d.mts

@@ -0,0 +1,17 @@
+import type { WidgetFactory } from './widgets.mjs';
+/**
+ * Several answers from a list, as tags in a box (`selection.tags`): the box
+ * is an ARIA combobox whose list holds the options not chosen yet, those whose
+ * words hold what is typed. The arrows reach one and Enter adds it — or the
+ * first match, when none is reached — as does a click. A tag goes with its ×,
+ * or the last with Backspace in the empty box. The answer keeps the order the
+ * tags were added in; a value not among the options shows as its own words.
+ * With `ownAnswers`, words that match nothing are offered as an answer of
+ * their own; "None of these" goes alone.
+ *
+ * One answer, the same box (`searchWidget`): a dropdown that searches its
+ * list — the box shows the choice, typing finds others, and a box left half
+ * typed shows the choice again; emptied, it takes the choice away.
+ */
+export declare const choiceTagsWidget: WidgetFactory;
+export declare const searchWidget: WidgetFactory;

package/src/lib/choice-tags.d.ts

@@ -0,0 +1,17 @@
+import type { WidgetFactory } from './widgets';
+/**
+ * Several answers from a list, as tags in a box (`selection.tags`): the box
+ * is an ARIA combobox whose list holds the options not chosen yet, those whose
+ * words hold what is typed. The arrows reach one and Enter adds it — or the
+ * first match, when none is reached — as does a click. A tag goes with its ×,
+ * or the last with Backspace in the empty box. The answer keeps the order the
+ * tags were added in; a value not among the options shows as its own words.
+ * With `ownAnswers`, words that match nothing are offered as an answer of
+ * their own; "None of these" goes alone.
+ *
+ * One answer, the same box (`searchWidget`): a dropdown that searches its
+ * list — the box shows the choice, typing finds others, and a box left half
+ * typed shows the choice again; emptied, it takes the choice away.
+ */
+export declare const choiceTagsWidget: WidgetFactory;
+export declare const searchWidget: WidgetFactory;