@fieldia/viewer 0.19.1 → 0.20.0

package/src/lib/rich-button.mjs

@@ -0,0 +1,183 @@
+import { drawIcon } from '@fieldia/widgets';
+import { nothingToUndo, onlyResets } from './button-parts.mjs';
+import { setAttr, setHidden, setText } from './dom.mjs';
+import { installHeadStyles } from './head-styles.mjs';
+import { hotkeyOn } from './hotkeys.mjs';
+/**
+ * A button of the record's head, or one anywhere asking for the same: its
+ * icon alone (named by its label, which is its tooltip too); a toggle,
+ * pressed while its condition holds and showing its pressed words meanwhile;
+ * a split button — its press, then a chevron (or its own icon, Follow's gear)
+ * opening a menu of more; a menu button when it has nothing of its own to
+ * run; the primary look while the record has changes, quiet but usable
+ * otherwise — with nothing changed, Save and Close simply closes.
+ */
+export function richButton(context, node) {
+    const { el, form, labels } = context;
+    installHeadStyles(context.doc);
+    const own = !!node.steps?.length || node.action !== undefined;
+    const menu = node.menu?.length ? node.menu : null;
+    const look = () => (node.primaryWhenChanged ? (form.getState().dirty.length ? 'primary' : 'subtle') : node.style ?? 'secondary');
+    const words = el('bdi', { class: 'fd-button-words' }, node.label);
+    const icon = drawIcon(context.doc, node.icon, context.icons);
+    const main = el('button', { type: 'button', class: 'fd-button', 'data-node': menu && own ? undefined : node.id });
+    if (icon)
+        main.append(icon);
+    if (node.iconOnly) {
+        main.classList.add('fd-button-icon-only');
+        main.setAttribute('aria-label', node.label);
+        main.title = node.label;
+    }
+    else
+        main.append(words);
+    if (node.hotkey)
+        hotkeyOn(main, node.hotkey, node.label);
+    /** What a press of the button itself does: its steps and action — Save and Close with nothing to save only closes. */
+    const run = () => {
+        const state = form.getState();
+        if (node.primaryWhenChanged && !state.dirty.length && state.recordId != null && node.steps?.some((step) => step.do === 'save')) {
+            const steps = [...(node.steps ?? []).filter((step) => step.do !== 'save'), ...(node.action !== undefined ? [{ do: 'call', action: node.action, ...(node.params ? { params: node.params } : {}) }] : [])];
+            return form.run(steps, { id: node.id });
+        }
+        return form.runAction(node.id);
+    };
+    if (!menu) {
+        main.classList.add(`fd-button-${look()}`);
+        main.addEventListener('click', () => {
+            if (!nothingToUndo(node, form, context.say, labels))
+                void context.press(main, run);
+        });
+        context.watch(() => paint(main));
+        return main;
+    }
+    // ---- a menu beside it, or a menu alone ----
+    const id = context.uid(`${node.id}-menu`);
+    const chevron = drawIcon(context.doc, node.menuIcon ?? 'chevron-down', context.icons);
+    const opener = own ? el('button', { type: 'button', class: 'fd-button fd-split-more', id: `${id}-button`, 'aria-haspopup': 'menu', 'aria-expanded': 'false', 'aria-controls': id }) : main;
+    // Its own name, never the button's: a reader hears two buttons, not one twice.
+    const menuName = node.menuLabel ?? labels.optionsFor.replace('{label}', node.label);
+    if (own) {
+        opener.setAttribute('aria-label', menuName);
+        opener.title = menuName;
+    }
+    else {
+        opener.id = `${id}-button`;
+        for (const [name, value] of Object.entries({ 'aria-haspopup': 'menu', 'aria-expanded': 'false', 'aria-controls': id }))
+            opener.setAttribute(name, value);
+    }
+    if (chevron) {
+        chevron.classList.add('fd-split-icon');
+        opener.append(chevron);
+    }
+    const list = el('div', { class: 'fd-record-menu fd-button-menu', role: 'menu', id, 'aria-labelledby': opener.id, hidden: '' });
+    const items = menu.map((item) => {
+        const button = el('button', { type: 'button', role: 'menuitem', tabindex: '-1', class: 'fd-record-menu-item', 'data-node': item.id }, ...context.withIcon(item.icon, item.label ?? item.id));
+        button.addEventListener('click', () => {
+            close(true);
+            void context.press(opener, () => form.runAction(item.id));
+        });
+        return { item, button };
+    });
+    list.append(...items.map((i) => i.button));
+    const parts = own ? [main, el('span', { class: 'fd-split-rule', 'aria-hidden': 'true' }), opener] : [main];
+    const box = el('div', { class: `fd-split${own ? '' : ' fd-split-alone'}`, 'data-node': node.id, role: own ? 'group' : undefined, 'aria-label': own ? node.label : undefined }, ...parts, list);
+    const shown = () => items.filter((i) => !i.button.hidden).map((i) => i.button);
+    const outside = (event) => {
+        if (!box.contains(event.target))
+            close(false);
+    };
+    function open(at) {
+        if (!list.hidden)
+            return;
+        list.hidden = false;
+        // Under the button's start, unless that runs past the window: then from its end.
+        list.removeAttribute('data-end');
+        const room = list.getBoundingClientRect();
+        if (room.right > context.doc.documentElement.clientWidth - 4 || room.left < 4)
+            list.setAttribute('data-end', '');
+        opener.setAttribute('aria-expanded', 'true');
+        context.doc.addEventListener('pointerdown', outside, true);
+        const found = shown();
+        (at === 'first' ? found[0] : found[found.length - 1])?.focus();
+    }
+    function close(refocus) {
+        if (list.hidden)
+            return;
+        list.hidden = true;
+        opener.setAttribute('aria-expanded', 'false');
+        context.doc.removeEventListener('pointerdown', outside, true);
+        if (refocus)
+            opener.focus();
+    }
+    context.cleanups.push(() => context.doc.removeEventListener('pointerdown', outside, true));
+    opener.addEventListener('click', () => (list.hidden ? open('first') : close(false)));
+    opener.addEventListener('keydown', (event) => {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
+            return;
+        event.preventDefault();
+        open(event.key === 'ArrowDown' ? 'first' : 'last');
+    });
+    if (own) {
+        main.addEventListener('click', () => {
+            if (!nothingToUndo(node, form, context.say, labels))
+                void context.press(main, run);
+        });
+    }
+    list.addEventListener('keydown', (event) => {
+        const found = shown();
+        const at = found.indexOf(context.doc.activeElement);
+        const to = { ArrowDown: at + 1, ArrowUp: at - 1, Home: 0, End: found.length - 1 }[event.key];
+        if (to !== undefined) {
+            event.preventDefault();
+            found[(to + found.length) % found.length]?.focus();
+        }
+        else if (event.key === 'Escape') {
+            // Escape closes the menu, not the dialog round the form.
+            event.preventDefault();
+            event.stopPropagation();
+            close(true);
+        }
+        else if (event.key === 'Tab')
+            close(false);
+    });
+    context.watch(() => {
+        paint(main);
+        if (own)
+            paint(opener);
+        box.setAttribute('data-look', look());
+        for (const { item, button } of items)
+            setHidden(button, form.node(item.id).invisible);
+        // A menu with nothing in it shows no chevron.
+        setHidden(opener, !items.some((i) => !i.button.hidden) && own);
+    });
+    return box;
+    /**
+     * Its look and its words now: primary or quiet, pressed or not, hidden by its condition. Undo with nothing changed is
+     * drawn idle, its tooltip saying why, and a press says it too: still a button, never greyed out without a reason.
+     */
+    function paint(button) {
+        const at = form.node(node.id);
+        if (button === main || !own)
+            setHidden(menu ? box : button, at.invisible);
+        for (const one of ['primary', 'secondary', 'subtle', 'danger', 'link'])
+            button.classList.toggle(`fd-button-${one}`, one === look());
+        if (button === main && onlyResets(node.steps, node.action)) {
+            const idle = !form.getState().dirty.length;
+            setAttr(main, 'data-idle', idle ? '' : null);
+            if (node.iconOnly)
+                main.title = idle ? `${node.label} — ${labels.nothingChanged}` : node.label;
+        }
+        if (node.pressed === undefined || button !== main)
+            return;
+        const pressed = at.pressed === true;
+        setAttr(main, 'aria-pressed', String(pressed));
+        const said = pressed && node.pressedLabel ? node.pressedLabel : node.label;
+        if (node.iconOnly) {
+            setAttr(main, 'aria-label', said);
+            main.title = said;
+        }
+        else
+            setText(words, said);
+    }
+}
+//# sourceMappingURL=rich-button.mjs.map

package/src/lib/rich-button.mjs.map

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

package/src/lib/section-head.d.mts

@@ -0,0 +1,26 @@
+import type { SectionNode, TextNode } from '@fieldia/core';
+import { type IconSet, type Widget, type WidgetLabels } from '@fieldia/widgets';
+/** A field's own tools, kept by its wrapper for the group round it to take. */
+export declare function keepTools(wrapper: HTMLElement, widget: Widget): void;
+/** Whether a group draws the work item's heading: its fold control at the end, or a ⤢. */
+export declare const workHeading: (node: SectionNode) => boolean;
+/**
+ * The tools of the one field a group holds, its label out of sight, for the
+ * group's heading: the field says what the group is, so its tools are the
+ * group's too.
+ */
+export declare function loneFieldTools(node: SectionNode, content: HTMLElement): HTMLElement[];
+/** A group's own column widths and the room between them, worn by its grid (from a tablet's width up). */
+export declare function applyTracks(grid: HTMLElement, node: SectionNode): void;
+export interface HeadKit {
+    doc: Document;
+    labels: WidgetLabels;
+    icons?: IconSet;
+    /** The words with the icon a page names before them. */
+    withIcon(name: string | undefined, text: string): (Node | string)[];
+    el<K extends keyof HTMLElementTagNameMap>(tag: K, attrs?: Record<string, string | undefined>, ...children: (Node | string)[]): HTMLElementTagNameMap[K];
+}
+/** Words with `[words](address)` links among them, each text part of a text's words. */
+export declare function wordsWithLinks(doc: Document, nodes: (Node | string)[]): (Node | string)[];
+/** A text's help box: room for an icon at its start, the words in a paragraph beside it. */
+export declare function helpBox(kit: HeadKit, node: TextNode, words: (Node | string)[]): HTMLElement;

package/src/lib/section-head.d.ts

@@ -0,0 +1,26 @@
+import type { SectionNode, TextNode } from '@fieldia/core';
+import { type IconSet, type Widget, type WidgetLabels } from '@fieldia/widgets';
+/** A field's own tools, kept by its wrapper for the group round it to take. */
+export declare function keepTools(wrapper: HTMLElement, widget: Widget): void;
+/** Whether a group draws the work item's heading: its fold control at the end, or a ⤢. */
+export declare const workHeading: (node: SectionNode) => boolean;
+/**
+ * The tools of the one field a group holds, its label out of sight, for the
+ * group's heading: the field says what the group is, so its tools are the
+ * group's too.
+ */
+export declare function loneFieldTools(node: SectionNode, content: HTMLElement): HTMLElement[];
+/** A group's own column widths and the room between them, worn by its grid (from a tablet's width up). */
+export declare function applyTracks(grid: HTMLElement, node: SectionNode): void;
+export interface HeadKit {
+    doc: Document;
+    labels: WidgetLabels;
+    icons?: IconSet;
+    /** The words with the icon a page names before them. */
+    withIcon(name: string | undefined, text: string): (Node | string)[];
+    el<K extends keyof HTMLElementTagNameMap>(tag: K, attrs?: Record<string, string | undefined>, ...children: (Node | string)[]): HTMLElementTagNameMap[K];
+}
+/** Words with `[words](address)` links among them, each text part of a text's words. */
+export declare function wordsWithLinks(doc: Document, nodes: (Node | string)[]): (Node | string)[];
+/** A text's help box: room for an icon at its start, the words in a paragraph beside it. */
+export declare function helpBox(kit: HeadKit, node: TextNode, words: (Node | string)[]): HTMLElement;

package/src/lib/section-head.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.workHeading = void 0;
+exports.keepTools = keepTools;
+exports.loneFieldTools = loneFieldTools;
+exports.applyTracks = applyTracks;
+exports.wordsWithLinks = wordsWithLinks;
+exports.helpBox = helpBox;
+const widgets_1 = require("@fieldia/widgets");
+/**
+ * A group drawn as a work item draws one: its heading's words, then its tools
+ * at the heading's end — ⤢ that shows the group alone over the record's body,
+ * ^ and ⌄ that fold it, and the tools of a field it holds alone (a Markdown
+ * text's Edit and Done) — its columns of their own widths and gap, and help
+ * in a light box with links in its words.
+ *
+ * The tools show while the group is pointed at or worked in, always while it
+ * is folded or maximised, and always where nothing can point (the
+ * stylesheet's part). Each is a named button with a tooltip. The heading with
+ * its tools is the head part's (section-tools.ts), loaded the first time a
+ * page draws one; what is here every page has.
+ */
+const fieldTools = new WeakMap();
+/** A field's own tools, kept by its wrapper for the group round it to take. */
+function keepTools(wrapper, widget) {
+    if (widget.tools?.length)
+        fieldTools.set(wrapper, widget.tools);
+}
+/** Whether a group draws the work item's heading: its fold control at the end, or a ⤢. */
+const workHeading = (node) => !!node.title && node.style !== 'inline' && (node.foldAt === 'end' || node.maximise === true);
+exports.workHeading = workHeading;
+/**
+ * The tools of the one field a group holds, its label out of sight, for the
+ * group's heading: the field says what the group is, so its tools are the
+ * group's too.
+ */
+function loneFieldTools(node, content) {
+    if (!node.title || node.children.length !== 1 || node.children[0].type !== 'field')
+        return [];
+    const wrapper = content.firstElementChild;
+    if (!wrapper || wrapper.getAttribute('data-labels') !== 'hidden')
+        return [];
+    return fieldTools.get(wrapper) ?? [];
+}
+/** A group's own column widths and the room between them, worn by its grid (from a tablet's width up). */
+function applyTracks(grid, node) {
+    if (node.tracks?.length) {
+        grid.setAttribute('data-tracks', '');
+        // A share of what is left never pushes past it: a long word wraps instead.
+        grid.style.setProperty('--fd-track-list', node.tracks.map((track) => (track.endsWith('fr') ? `minmax(0, ${track})` : track)).join(' '));
+    }
+    if (node.gap !== undefined)
+        grid.style.columnGap = `${node.gap}px`;
+}
+/** Words with `[words](address)` links among them, each text part of a text's words. */
+function wordsWithLinks(doc, nodes) {
+    return nodes.flatMap((node) => (typeof node === 'string' ? (0, widgets_1.linkedWords)(doc, node) : [node]));
+}
+/** A text's help box: room for an icon at its start, the words in a paragraph beside it. */
+function helpBox(kit, node, words) {
+    const icon = node.icon ? (0, widgets_1.drawIcon)(kit.doc, node.icon, kit.icons) : null;
+    icon?.classList.add('fd-help-box-icon');
+    return kit.el('div', { class: 'fd-help-box fd-text-help', 'data-node': node.id }, ...(icon ? [icon] : []), kit.el('p', {}, ...words));
+}
+//# sourceMappingURL=section-head.js.map

package/src/lib/section-head.js.map

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

package/src/lib/section-head.mjs

@@ -0,0 +1,56 @@
+import { drawIcon, linkedWords } from '@fieldia/widgets';
+/**
+ * A group drawn as a work item draws one: its heading's words, then its tools
+ * at the heading's end — ⤢ that shows the group alone over the record's body,
+ * ^ and ⌄ that fold it, and the tools of a field it holds alone (a Markdown
+ * text's Edit and Done) — its columns of their own widths and gap, and help
+ * in a light box with links in its words.
+ *
+ * The tools show while the group is pointed at or worked in, always while it
+ * is folded or maximised, and always where nothing can point (the
+ * stylesheet's part). Each is a named button with a tooltip. The heading with
+ * its tools is the head part's (section-tools.ts), loaded the first time a
+ * page draws one; what is here every page has.
+ */
+const fieldTools = new WeakMap();
+/** A field's own tools, kept by its wrapper for the group round it to take. */
+export function keepTools(wrapper, widget) {
+    if (widget.tools?.length)
+        fieldTools.set(wrapper, widget.tools);
+}
+/** Whether a group draws the work item's heading: its fold control at the end, or a ⤢. */
+export const workHeading = (node) => !!node.title && node.style !== 'inline' && (node.foldAt === 'end' || node.maximise === true);
+/**
+ * The tools of the one field a group holds, its label out of sight, for the
+ * group's heading: the field says what the group is, so its tools are the
+ * group's too.
+ */
+export function loneFieldTools(node, content) {
+    if (!node.title || node.children.length !== 1 || node.children[0].type !== 'field')
+        return [];
+    const wrapper = content.firstElementChild;
+    if (!wrapper || wrapper.getAttribute('data-labels') !== 'hidden')
+        return [];
+    return fieldTools.get(wrapper) ?? [];
+}
+/** A group's own column widths and the room between them, worn by its grid (from a tablet's width up). */
+export function applyTracks(grid, node) {
+    if (node.tracks?.length) {
+        grid.setAttribute('data-tracks', '');
+        // A share of what is left never pushes past it: a long word wraps instead.
+        grid.style.setProperty('--fd-track-list', node.tracks.map((track) => (track.endsWith('fr') ? `minmax(0, ${track})` : track)).join(' '));
+    }
+    if (node.gap !== undefined)
+        grid.style.columnGap = `${node.gap}px`;
+}
+/** Words with `[words](address)` links among them, each text part of a text's words. */
+export function wordsWithLinks(doc, nodes) {
+    return nodes.flatMap((node) => (typeof node === 'string' ? linkedWords(doc, node) : [node]));
+}
+/** A text's help box: room for an icon at its start, the words in a paragraph beside it. */
+export function helpBox(kit, node, words) {
+    const icon = node.icon ? drawIcon(kit.doc, node.icon, kit.icons) : null;
+    icon?.classList.add('fd-help-box-icon');
+    return kit.el('div', { class: 'fd-help-box fd-text-help', 'data-node': node.id }, ...(icon ? [icon] : []), kit.el('p', {}, ...words));
+}
+//# sourceMappingURL=section-head.mjs.map

package/src/lib/section-head.mjs.map

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

package/src/lib/section-tools.d.mts

@@ -0,0 +1,12 @@
+import type { SectionNode } from '@fieldia/core';
+import type { HeadKit } from './section-head.mjs';
+/**
+ * The heading of a group with tools at its end. `show` folds and unfolds it;
+ * the section is marked folded (`fd-section-folded`) and maximised
+ * (`data-maximised`) for the stylesheet.
+ */
+export declare function sectionHeading(kit: HeadKit, node: SectionNode, section: HTMLElement, content: HTMLElement, description: HTMLElement | null, own: HTMLElement[]): {
+    legend: HTMLLegendElement;
+    show: (next: boolean) => void;
+    isOpen: () => boolean;
+};

package/src/lib/section-tools.d.ts

@@ -0,0 +1,12 @@
+import type { SectionNode } from '@fieldia/core';
+import type { HeadKit } from './section-head';
+/**
+ * The heading of a group with tools at its end. `show` folds and unfolds it;
+ * the section is marked folded (`fd-section-folded`) and maximised
+ * (`data-maximised`) for the stylesheet.
+ */
+export declare function sectionHeading(kit: HeadKit, node: SectionNode, section: HTMLElement, content: HTMLElement, description: HTMLElement | null, own: HTMLElement[]): {
+    legend: HTMLLegendElement;
+    show: (next: boolean) => void;
+    isOpen: () => boolean;
+};

package/src/lib/section-tools.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sectionHeading = sectionHeading;
+const widgets_1 = require("@fieldia/widgets");
+const group_styles_1 = require("./group-styles");
+/**
+ * A group's heading as a work item draws it, with its tools at its end: ⤢ that
+ * shows the group alone over the record's body, ^ and ⌄ that fold it, and the
+ * tools of a field it holds alone. The head part's (head-part.ts).
+ */
+const fill = (template, values) => template.replace(/\{(\w+)\}/g, (_, key) => values[key] ?? '');
+/**
+ * The heading of a group with tools at its end. `show` folds and unfolds it;
+ * the section is marked folded (`fd-section-folded`) and maximised
+ * (`data-maximised`) for the stylesheet.
+ */
+function sectionHeading(kit, node, section, content, description, own) {
+    const { el, doc, labels } = kit;
+    (0, group_styles_1.installGroupStyles)(doc);
+    const title = node.title ?? '';
+    const tools = el('span', { class: 'fd-section-tools' });
+    const legend = el('legend', { class: 'fd-section-title fd-section-head' }, el('span', { class: 'fd-section-name' }, ...kit.withIcon(node.icon, title)), tools);
+    section.setAttribute('data-head', '');
+    const icon = (name) => (0, widgets_1.drawIcon)(doc, name, kit.icons) ?? '';
+    const tool = (name, words) => {
+        const button = el('button', { type: 'button', class: 'fd-section-tool', 'data-tool': name, 'aria-label': words, title: words });
+        return button;
+    };
+    // ⤢: the group alone over the record's body, until pressed again or Escape.
+    let undo = null;
+    const big = node.maximise ? tool('maximise', fill(labels.maximiseNamed, { name: title })) : null;
+    const restore = () => {
+        undo?.();
+        undo = null;
+        if (!big)
+            return;
+        big.setAttribute('aria-pressed', 'false');
+        big.replaceChildren(icon('maximise'));
+    };
+    if (big) {
+        big.setAttribute('aria-pressed', 'false');
+        big.append(icon('maximise'));
+        big.addEventListener('click', () => {
+            if (undo)
+                return restore();
+            undo = maximise(section);
+            big.setAttribute('aria-pressed', 'true');
+            big.replaceChildren(icon('restore'));
+            big.focus();
+        });
+        section.addEventListener('keydown', (event) => {
+            if (event.key !== 'Escape' || !undo || event.defaultPrevented)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            restore();
+            big.focus();
+        });
+        tools.append(big);
+    }
+    // ^ and ⌄: the group folded and unfolded from its heading's end.
+    let open = node.collapsed !== true;
+    const fold = node.collapsible ? tool('fold', '') : null;
+    const show = (next) => {
+        open = next;
+        if (fold) {
+            const words = fill(open ? labels.foldNamed : labels.unfoldNamed, { name: title });
+            fold.setAttribute('aria-label', words);
+            fold.title = words;
+            fold.setAttribute('aria-expanded', String(open));
+            fold.replaceChildren(icon(open ? 'chevron-up' : 'chevron-down'));
+        }
+        content.hidden = !open;
+        if (description)
+            description.hidden = !open;
+        section.classList.toggle('fd-section-folded', !open);
+        if (!open && undo)
+            restore();
+    };
+    if (fold) {
+        fold.setAttribute('aria-controls', content.id);
+        fold.addEventListener('click', () => show(!open));
+        tools.append(fold);
+    }
+    // The tools of the field it holds alone, last.
+    tools.append(...own);
+    show(open);
+    return { legend, show, isOpen: () => open };
+}
+/**
+ * The group alone over the record's body: every part beside it, and beside
+ * each part round it up to the body, out of sight; the grids round it give it
+ * their whole width. Returns how to put it all back.
+ */
+function maximise(section) {
+    const host = section.closest('.fd-tabpanel') ?? section.closest('.fd-content') ?? section.closest('.fd-form');
+    const unshown = [];
+    const grids = [];
+    let at = section;
+    while (at !== host && at.parentElement) {
+        const parent = at.parentElement;
+        for (const sibling of [...parent.children]) {
+            if (sibling === at || sibling.tagName === 'LEGEND' || sibling.hasAttribute('data-unshown'))
+                continue;
+            sibling.setAttribute('data-unshown', '');
+            unshown.push(sibling);
+        }
+        if (parent.classList.contains('fd-grid')) {
+            parent.setAttribute('data-maximising', '');
+            grids.push(parent);
+        }
+        at = parent;
+    }
+    section.setAttribute('data-maximised', '');
+    section.scrollIntoView?.({ block: 'nearest' });
+    return () => {
+        for (const part of unshown)
+            part.removeAttribute('data-unshown');
+        for (const grid of grids)
+            grid.removeAttribute('data-maximising');
+        section.removeAttribute('data-maximised');
+    };
+}
+//# sourceMappingURL=section-tools.js.map

package/src/lib/section-tools.js.map

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