@valtimo/components 13.32.0 → 13.34.0

package/fesm2022/valtimo-components.mjs

@@ -4498,6 +4498,10 @@ class OverflowMenuComponent {
             return;
         this._cleanupAutoUpdate = autoUpdate(reference, menu, () => {
             computePosition(reference, menu, {
+                // The pane is rendered with `position: fixed`, so positions must be
+                // computed against the viewport. Without this the menu is offset by the
+                // trigger's page position and lands far from lower rows (unclickable).
+                strategy: 'fixed',
                 placement: this.placement,
                 middleware: [
                     offset({ mainAxis: this.offsetY, crossAxis: this.offsetX }),
@@ -8996,6 +9000,9 @@ class FormioComponent {
     set readOnly(readOnlyValue) {
         this.readOnly$.next(readOnlyValue);
     }
+    set errors(errorsValue) {
+        this.errors$.next(errorsValue ?? []);
+    }
     handleBeforeUnload() {
         this.localStorageService.clearTokenFromLocalStorage();
     }
@@ -9164,7 +9171,7 @@ class FormioComponent {
         this._overrideOptions$.next(config.formioOptions);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FormioComponent, deps: [{ token: i6$1.UserProviderService }, { token: i4.NGXLogger }, { token: FormIoStateService }, { token: i1$3.ActivatedRoute }, { token: i1.TranslateService }, { token: FormIoLocalStorageService }, { token: ValtimoModalService }, { token: i1$2.ConfigService }, { token: FormIoTagsService }, { token: i0.Injector }, { token: FormioTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FormioComponent, isStandalone: false, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change", event: "event" }, host: { listeners: { "window:beforeunload": "handleBeforeUnload($event)" } }, providers: [FormIoLocalStorageService], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenSetInLocalStorage: tokenSetInLocalStorage$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenSetInLocalStorage\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.FormioComponent, selector: "formio" }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FormioComponent, isStandalone: false, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", errors: "errors", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change", event: "event" }, host: { listeners: { "window:beforeunload": "handleBeforeUnload($event)" } }, providers: [FormIoLocalStorageService], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenSetInLocalStorage: tokenSetInLocalStorage$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenSetInLocalStorage\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.FormioComponent, selector: "formio" }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FormioComponent, decorators: [{
             type: Component,
@@ -9177,6 +9184,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], readOnly: [{
                 type: Input
+            }], errors: [{
+                type: Input
             }], formRefresh$: [{
                 type: Input
             }], submit: [{
@@ -17756,6 +17765,421 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }] } });
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Custom Muuri layout function — "beautiful" gap-free packing.
+ *
+ * Each widget occupies a whole number of grid columns (1-4) and a whole
+ * number of row units (height scales with content). The grid column count is
+ * derived from the actual item dimensions so the algorithm works identically
+ * for case widgets (320px / 200px) and dashboard widgets (275px / 220px)
+ * without hardcoding either constant.
+ *
+ * Goal (in priority order):
+ *   1. Never leave a gap trapped in the middle (a hole with a widget below it).
+ *   2. Keep the block compact (minimise height) and push any unavoidable
+ *      gaps to the bottom-right corner.
+ *   3. Respect the source order as much as the above two allow.
+ *
+ * To achieve this we treat each section as a small 2D strip-packing problem
+ * and search:
+ *   - over the number of columns to actually use (sometimes a narrower block
+ *     packs into a cleaner rectangle than spreading across every column);
+ *   - over widget orderings (reordering is allowed to fill gaps).
+ * Every candidate layout is scored and the prettiest one wins. Because the
+ * packing only depends on the column/row spans and the column count (not the
+ * exact pixel width) results are memoised and reused across resizes.
+ *
+ * Compatible with Muuri's custom layout function API (v0.9.x):
+ *   layout(grid, layoutId, items, gridWidth, gridHeight, callback)
+ */
+/** Maximum number of grid columns to consider when detecting the column count. */
+const MAX_COLS = 20;
+/** Tolerance (in pixels) for floating-point width/height comparisons. */
+const SNAP_PX = 1;
+/**
+ * How far (as a fraction of one column) an item width may deviate from a whole
+ * number of columns and still be considered an integer span. Loose enough to
+ * absorb sub-pixel column widths and widget margins, tight enough to reject a
+ * grid that does not actually fit the widths.
+ */
+const COL_SNAP_RATIO = 0.12;
+/** Above this item count we stop trying every permutation and use heuristics. */
+const FULL_PERMUTATION_LIMIT = 7;
+/** Scoring weights — tuned so each rule dominates the ones below it. */
+const W_INTERNAL_GAP = 100000; // a hole with a widget below it: avoid at all costs
+const W_BOTTOM_GAP = 1000; // an empty cell inside the full-width bounding box
+const W_HEIGHT = 50; // prefer a compact (shorter) block
+const W_GAP_NOT_RIGHT = 80; // push the bottom gaps towards the right
+const W_INVERSION = 5; // respect the original order when everything else ties
+/** Memoised packings keyed by span signature + column count. */
+const layoutCache = new Map();
+const LAYOUT_CACHE_MAX = 256;
+function muuriGapFreeLayout(grid, layoutId, items, gridWidth, _gridHeight, callback) {
+    const slots = new Float32Array(items.length * 2);
+    if (items.length === 0) {
+        callback({ id: layoutId, items, slots, width: gridWidth, height: 0, styles: { height: '0px' } });
+        return;
+    }
+    // Pre-compute outer dimensions (pixels).
+    const pxWidths = [];
+    const pxHeights = [];
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        pxWidths.push(item._width + item._marginLeft + item._marginRight);
+        pxHeights.push(item._height + item._marginTop + item._marginBottom);
+    }
+    // Detect the column count and row unit from the item dimensions.
+    const totalCols = detectTotalCols(pxWidths, gridWidth);
+    const colWidth = gridWidth / totalCols;
+    const rowHeight = detectRowHeight(pxHeights);
+    // Convert each item to column/row units.
+    const colSpans = [];
+    const rowSpans = [];
+    for (let i = 0; i < items.length; i++) {
+        colSpans.push(Math.min(totalCols, Math.max(1, Math.round(pxWidths[i] / colWidth))));
+        rowSpans.push(Math.max(1, Math.round(pxHeights[i] / rowHeight)));
+    }
+    const placement = packSection(colSpans, rowSpans, totalCols);
+    // Convert grid positions to pixel coordinates.
+    for (let i = 0; i < items.length; i++) {
+        slots[i * 2] = Math.round(placement.cols[i] * colWidth);
+        slots[i * 2 + 1] = Math.round(placement.rows[i] * rowHeight);
+    }
+    const layoutHeight = Math.round(placement.height * rowHeight);
+    const el = grid._element;
+    const isBorderBox = el ? getComputedStyle(el).boxSizing === 'border-box' : false;
+    const borderTop = grid._borderTop || 0;
+    const borderBottom = grid._borderBottom || 0;
+    const totalHeight = isBorderBox ? layoutHeight + borderTop + borderBottom : layoutHeight;
+    callback({
+        id: layoutId,
+        items,
+        slots,
+        styles: { height: totalHeight + 'px' },
+        width: gridWidth,
+        height: layoutHeight,
+    });
+}
+/**
+ * Pack one section. Searches over the number of columns to use and over item
+ * orderings, scoring every candidate, and returns the prettiest placement.
+ */
+function packSection(colSpans, rowSpans, maxCols) {
+    const key = `${colSpans.join(',')}|${rowSpans.join(',')}|${maxCols}`;
+    const cached = layoutCache.get(key);
+    if (cached)
+        return cached;
+    const n = colSpans.length;
+    let best = null;
+    let bestScore = Infinity;
+    for (let k = maxCols; k >= 1; k--) {
+        // Widgets wider than the current column count become full-width.
+        const cs = colSpans.map(c => Math.min(c, k));
+        const orders = generateOrders(n, cs, rowSpans);
+        for (const order of orders) {
+            const placed = firstFitPack(order, cs, rowSpans, k);
+            const score = scorePlacement(placed, cs, rowSpans, maxCols);
+            if (score < bestScore) {
+                bestScore = score;
+                best = placed;
+            }
+        }
+    }
+    const result = best;
+    if (layoutCache.size >= LAYOUT_CACHE_MAX)
+        layoutCache.clear();
+    layoutCache.set(key, result);
+    return result;
+}
+/**
+ * Place items (in the given order) into a `k`-column grid using top-left-first
+ * first-fit. Returns the column/row of each item indexed by its original index.
+ */
+function firstFitPack(order, colSpans, rowSpans, k) {
+    const occupied = [];
+    let gridRows = 0;
+    const cols = new Array(colSpans.length);
+    const rows = new Array(colSpans.length);
+    const ensureRows = (needed) => {
+        while (gridRows < needed) {
+            occupied.push(new Array(k).fill(false));
+            gridRows++;
+        }
+    };
+    for (const idx of order) {
+        const cw = colSpans[idx];
+        const rh = rowSpans[idx];
+        let placed = false;
+        for (let r = 0; !placed; r++) {
+            ensureRows(r + rh);
+            for (let c = 0; c <= k - cw; c++) {
+                if (canPlace(occupied, r, c, rh, cw)) {
+                    markOccupied(occupied, r, c, rh, cw);
+                    cols[idx] = c;
+                    rows[idx] = r;
+                    placed = true;
+                    break;
+                }
+            }
+        }
+    }
+    let height = 0;
+    for (let i = 0; i < colSpans.length; i++) {
+        height = Math.max(height, rows[i] + rowSpans[i]);
+    }
+    return { cols, rows, height };
+}
+/**
+ * Score a placement — lower is prettier. Encodes the priority order:
+ * no trapped gaps > compact (short) block > gaps bottom-right > original order.
+ *
+ * Waste is always measured against the full available width (`maxCols`), so a
+ * tall narrow tower that leaves whole columns empty on the right is correctly
+ * seen as gappy rather than "gap free". A narrower block is therefore only
+ * chosen when it does not add height and produces a cleaner gap placement.
+ */
+function scorePlacement(placed, colSpans, rowSpans, maxCols) {
+    const { cols, rows, height } = placed;
+    const n = colSpans.length;
+    // Build the occupancy grid across the full available width.
+    const occ = [];
+    for (let r = 0; r < height; r++)
+        occ.push(new Array(maxCols).fill(false));
+    for (let i = 0; i < n; i++) {
+        for (let r = rows[i]; r < rows[i] + rowSpans[i]; r++) {
+            for (let c = cols[i]; c < cols[i] + colSpans[i]; c++)
+                occ[r][c] = true;
+        }
+    }
+    let internalGaps = 0;
+    let bottomGaps = 0;
+    let gapNotRight = 0;
+    for (let c = 0; c < maxCols; c++) {
+        let lastFilled = -1;
+        for (let r = 0; r < height; r++)
+            if (occ[r][c])
+                lastFilled = r;
+        for (let r = 0; r < height; r++) {
+            if (occ[r][c])
+                continue;
+            if (r < lastFilled) {
+                internalGaps++;
+            }
+            else {
+                bottomGaps++;
+                gapNotRight += maxCols - 1 - c;
+            }
+        }
+    }
+    const inversions = countInversions(cols, rows, n);
+    return (internalGaps * W_INTERNAL_GAP +
+        bottomGaps * W_BOTTOM_GAP +
+        height * W_HEIGHT +
+        gapNotRight * W_GAP_NOT_RIGHT +
+        inversions * W_INVERSION);
+}
+/**
+ * Number of pairs whose reading order (top-to-bottom, left-to-right) differs
+ * from their original order. Used as a tie-breaker to respect source order.
+ */
+function countInversions(cols, rows, n) {
+    const order = Array.from({ length: n }, (_, i) => i).sort((a, b) => rows[a] !== rows[b] ? rows[a] - rows[b] : cols[a] - cols[b]);
+    const rank = new Array(n);
+    for (let pos = 0; pos < n; pos++)
+        rank[order[pos]] = pos;
+    let inversions = 0;
+    for (let i = 0; i < n; i++) {
+        for (let j = i + 1; j < n; j++)
+            if (rank[i] > rank[j])
+                inversions++;
+    }
+    return inversions;
+}
+/**
+ * Candidate orderings to try. For small sections every permutation is tried;
+ * for larger sections a handful of size-based heuristics keeps it fast.
+ */
+function generateOrders(n, colSpans, rowSpans) {
+    const identity = Array.from({ length: n }, (_, i) => i);
+    if (n <= 1)
+        return [identity];
+    if (n <= FULL_PERMUTATION_LIMIT)
+        return permutations(identity);
+    const byArea = [...identity].sort((a, b) => colSpans[b] * rowSpans[b] - colSpans[a] * rowSpans[a]);
+    const byHeight = [...identity].sort((a, b) => rowSpans[b] - rowSpans[a] || colSpans[b] - colSpans[a]);
+    const byWidth = [...identity].sort((a, b) => colSpans[b] - colSpans[a] || rowSpans[b] - rowSpans[a]);
+    return dedupeOrders([identity, byArea, byHeight, byWidth]);
+}
+/** All permutations of the given index array (used only for small sections). */
+function permutations(arr) {
+    if (arr.length <= 1)
+        return [arr];
+    const result = [];
+    for (let i = 0; i < arr.length; i++) {
+        const rest = [...arr.slice(0, i), ...arr.slice(i + 1)];
+        for (const perm of permutations(rest))
+            result.push([arr[i], ...perm]);
+    }
+    return result;
+}
+function dedupeOrders(orders) {
+    const seen = new Set();
+    const out = [];
+    for (const o of orders) {
+        const key = o.join(',');
+        if (!seen.has(key)) {
+            seen.add(key);
+            out.push(o);
+        }
+    }
+    return out;
+}
+/**
+ * Detect the number of grid columns: the *coarsest* grid (smallest column
+ * count, from 1 up to MAX_COLS) in which every item width is approximately a
+ * whole number of columns. A coarser grid is always preferred — a finer grid
+ * that merely happens to also divide the widths (e.g. describing 1x/2x widgets
+ * as 6/12 columns) yields the exact same pixel layout but destabilises the
+ * column spans and the packing search.
+ */
+function detectTotalCols(pxWidths, gridWidth) {
+    for (let n = 1; n <= MAX_COLS; n++) {
+        const unit = gridWidth / n;
+        let valid = true;
+        for (const w of pxWidths) {
+            if (w < SNAP_PX)
+                continue;
+            const ratio = w / unit;
+            if (Math.round(ratio) < 1 || Math.abs(ratio - Math.round(ratio)) > COL_SNAP_RATIO) {
+                valid = false;
+                break;
+            }
+        }
+        if (valid)
+            return n;
+    }
+    return 1;
+}
+/**
+ * Detect the base row unit as the greatest common divisor of the item heights.
+ * Heights are exact integer multiples of the base unit (e.g. 200 for case
+ * widgets, 220 for dashboard widgets); the GCD recovers that base even when a
+ * section happens to contain no single-row-tall widget.
+ */
+function detectRowHeight(pxHeights) {
+    let unit = 0;
+    for (const h of pxHeights) {
+        const rounded = Math.round(h);
+        if (rounded > SNAP_PX)
+            unit = gcd(unit, rounded);
+    }
+    return unit > SNAP_PX ? unit : 200;
+}
+function gcd(a, b) {
+    while (b > 0) {
+        const t = a % b;
+        a = b;
+        b = t;
+    }
+    return a;
+}
+/** Check if an item of size (rowSpan × colSpan) can be placed at (row, col). */
+function canPlace(occupied, row, col, rowSpan, colSpan) {
+    for (let r = row; r < row + rowSpan; r++) {
+        for (let c = col; c < col + colSpan; c++) {
+            if (occupied[r][c])
+                return false;
+        }
+    }
+    return true;
+}
+/** Mark cells as occupied for an item placed at (row, col). */
+function markOccupied(occupied, row, col, rowSpan, colSpan) {
+    for (let r = row; r < row + rowSpan; r++) {
+        for (let c = col; c < col + colSpan; c++)
+            occupied[r][c] = true;
+    }
+}
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Selectable widget layout algorithm. Persisted (optionally) per case widget
+ * tab, IKO tab and dashboard; an absent value falls back to MUURI_GAP_FREE.
+ *
+ *  - MUURI_GAP_FREE ("Default (less gaps)"): Muuri's built-in masonry with gap
+ *    filling — the behaviour from before the layout-algorithm work. Used when
+ *    nothing is configured.
+ *  - MUURI ("Default"): Muuri's plain masonry, without gap filling.
+ *  - BEAUTIFUL ("Beautiful (gap-free)"): the custom search-based gap-free packing.
+ */
+var WidgetLayout;
+(function (WidgetLayout) {
+    WidgetLayout["MUURI_GAP_FREE"] = "MUURI_GAP_FREE";
+    WidgetLayout["MUURI"] = "MUURI";
+    WidgetLayout["BEAUTIFUL"] = "BEAUTIFUL";
+})(WidgetLayout || (WidgetLayout = {}));
+/** Row-unit height used by the default and plain Muuri algorithms. */
+const WIDGET_ROW_HEIGHT_DEFAULT = 200;
+/** Finer row-unit height the beautiful gap-free algorithm packs against. */
+const WIDGET_ROW_HEIGHT_GAP_FREE = 92;
+/**
+ * Resolve a (possibly absent) layout choice to a concrete Muuri `layout` option
+ * and the row-unit height widgets should snap to. Unknown/absent falls back to
+ * MUURI_GAP_FREE (gap-filling Muuri — the pre-existing behaviour).
+ */
+function resolveWidgetLayout(layout) {
+    switch (layout) {
+        case WidgetLayout.BEAUTIFUL:
+            return { muuriLayout: muuriGapFreeLayout, rowHeightUnit: WIDGET_ROW_HEIGHT_GAP_FREE };
+        case WidgetLayout.MUURI:
+            return { muuriLayout: { fillGaps: false }, rowHeightUnit: WIDGET_ROW_HEIGHT_DEFAULT };
+        case WidgetLayout.MUURI_GAP_FREE:
+        default:
+            return { muuriLayout: { fillGaps: true }, rowHeightUnit: WIDGET_ROW_HEIGHT_DEFAULT };
+    }
+}
+/** Selectable layout values in display order, for admin dropdowns. */
+const WIDGET_LAYOUT_VALUES = [
+    WidgetLayout.MUURI_GAP_FREE,
+    WidgetLayout.MUURI,
+    WidgetLayout.BEAUTIFUL,
+];
+/** Translation keys for each layout value (under the shared `widgetLayout` namespace). */
+const WIDGET_LAYOUT_TRANSLATION_KEYS = {
+    [WidgetLayout.MUURI_GAP_FREE]: 'widgetLayout.muuriGapFree',
+    [WidgetLayout.MUURI]: 'widgetLayout.muuri',
+    [WidgetLayout.BEAUTIFUL]: 'widgetLayout.beautiful',
+};
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -17828,9 +18252,7 @@ class MuuriDirective {
             return;
         }
         this._muuriSubject$.next(new Muuri(nativeElement, {
-            layout: {
-                fillGaps: true,
-            },
+            layout: resolveWidgetLayout(this.widgetLayout).muuriLayout,
             layoutOnResize: false,
         }));
     }
@@ -17873,7 +18295,7 @@ class MuuriDirective {
                 this._muuri.refreshItems();
                 this._muuri.layout(true);
             }
-        }, 50);
+        }, 200);
     }
     observeContainerWidthChanges() {
         const nativeElement = this.elementRef.nativeElement;
@@ -17940,7 +18362,7 @@ class MuuriDirective {
         this.renderer.setStyle(el, 'margin', '-8px');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MuuriDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: MuuriDirective, isStandalone: true, selector: "[muuri]", inputs: { columnMinWidth: "columnMinWidth" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: MuuriDirective, isStandalone: true, selector: "[muuri]", inputs: { columnMinWidth: "columnMinWidth", widgetLayout: "widgetLayout" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MuuriDirective, decorators: [{
             type: Directive,
@@ -17950,6 +18372,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { columnMinWidth: [{
                 type: Input
+            }], widgetLayout: [{
+                type: Input
             }] } });
 
 /*
@@ -18021,6 +18445,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }] });
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Informational Carbon notification explaining the widget layout algorithms.
+ * Rendered next to every layout-algorithm selector (case widget tab, IKO tab
+ * and dashboard) so the trade-offs are explained consistently.
+ */
+class WidgetLayoutInfoComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetLayoutInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: WidgetLayoutInfoComponent, isStandalone: true, selector: "valtimo-widget-layout-info", ngImport: i0, template: "<cds-inline-notification\n  [notificationObj]=\"{\n    type: 'info',\n    title: 'widgetLayout.infoTitle' | translate,\n    message: 'widgetLayout.info' | translate,\n    showClose: false,\n    lowContrast: true\n  }\"\n></cds-inline-notification>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i2$3.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetLayoutInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-layout-info', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, NotificationModule], template: "<cds-inline-notification\n  [notificationObj]=\"{\n    type: 'info',\n    title: 'widgetLayout.infoTitle' | translate,\n    message: 'widgetLayout.info' | translate,\n    showClose: false,\n    lowContrast: true\n  }\"\n></cds-inline-notification>\n" }]
+        }] });
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -18675,5 +19128,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARBITRARY_AMOUNT_VALUE_TEST_IDS, AUTO_KEY_INPUT_TEST_IDS, AdminSettingsService, Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, AssignmentComponent, AutoKeyInputComponent, BOOLEAN_CONVERTER_VALUES, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, BreadcrumbService, CARBON_CONSTANTS, CARBON_THEME, CASES_WITHOUT_STATUS_KEY, COLOR_PICKER_TEST_IDS, CONFIRMATION_MODAL_TEST_IDS, CamundaFormComponent, CamundaFormModule, CarbonListComponent, CarbonListFilterPipe, CarbonListModule, CarbonMultiInputComponent, CarbonMultiInputModule, CarbonNoResultsComponent, CaseCountPipe, CaseTagsSelectorComponent, CdsThemeService, ChoiceFieldService, ColorPickerComponent, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, ContextMenuDirective, CtrlClickDirective, CurrentCarbonTheme, DEFAULT_LIST_TRANSLATIONS, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, DataListComponent, DataListModule, DatePickerComponent, DatePickerModule, DateTimePickerComponent, DigitOnlyDirective, DropzoneComponent, DropzoneModule, EditorComponent, EditorModule, EllipsisPipe, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FitPageDirective, FormComponent, FormIoCurrencyComponent, FormIoCurrentUserComponent, FormIoDomService, FormIoIbanComponent, FormIoModule, FormIoStateService, FormIoTagsService, FormIoUploaderComponent, FormModule, FormioBuilderComponent, FormioComponent, FormioDummyComponent, FormioOptionsImpl, FormioValueResolverSelectorComponent, InputComponent, InputLabelComponent, InputLabelModule, InputModule, IsArrayPipe, JSON_EDITOR_TEST_IDS, JsonEditorComponent, KEY_DROPDOWN_VALUE_TEST_IDS, KEY_VALUE_PATH_SELECTOR_TEST_IDS, KEY_VALUE_TEST_IDS, KeyGeneratorService, LeftSidebarComponent, LeftSidebarModule, ListColumnViewComponent, MdiIconSelectorComponent, MdiIconViewerComponent, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MonacoTheme, MoveRowDirection, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, MuuriDirective, MuuriDirectiveModule, MuuriItemComponent, ObserveSizeDirective, OverflowMenuComponent, OverflowMenuModule, OverflowMenuOptionComponent, OverflowMenuTriggerComponent, POPULAR_MDI_ICONS, PageHeaderComponent, PageHeaderModule, PageHeaderService, PageSubtitleService, PageTitleComponent, PageTitleModule, PageTitleService, ParagraphComponent, ParagraphModule, PendingChangesComponent, PendingChangesService, ProgressBarComponent, ProgressBarModule, PromptComponent, PromptModule, PromptService, QUICK_SEARCH_SERVICE, QuickSearchComponent, QuickSearchStateService, RIGHT_SIDEBAR_TEST_IDS, RadioComponent, RadioModule, ReadOnlyDirective, RemoveClassnamesDirective, RenderInBodyComponent, RenderInPageHeaderDirective, RenderPageHeaderDirective, RightSidebarComponent, RightSidebarModule, SINGLE_VALUE_TEST_IDS, STEPPER_FOOTER_STEP_TEST_IDS, SchemaEditorComponent, SearchFieldsComponent, SearchFieldsModule, SelectComponent, SelectModule, SelectableCarbonTheme, ShellService, SpinnerComponent, SpinnerModule, StatusSelectorComponent, StepperContainerComponent, StepperContentComponent, StepperFooterComponent, StepperFooterStepComponent, StepperHeaderComponent, StepperModule, StepperService, StepperStepComponent, TAG_ELLIPSIS_LIMIT, TableComponent, TableModule, TimelineComponent, TimelineItemImpl, TimelineModule, TooltipComponent, TooltipDirective, TooltipIconComponent, TooltipIconModule, TooltipModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, UserInterfaceService, VALUE_PATH_SELECTOR_DROPDOWN_VALUE_TEST_IDS, VALUE_PATH_SELECTOR_TEST_IDS, VALUE_PATH_SELECTOR_VALUE_TEST_IDS, VModalComponent, VModalModule, ValtimoCdsModalDirective, ValtimoModalService, ValuePathSelectorComponent, ValuePathSelectorInputMode, ValuePathSelectorPrefix, ValuePathSelectorService, ValuePathType, ViewContentService, ViewType, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, applyDataGridPatch, collectObjectLevels, createCustomFormioComponent, customUploaderType, enableCustomFormioComponents, menuInitializer, pendingChangesGuard, registerCustomFormioComponent, registerCustomTag, registerFormioCurrencyComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioIbanComponent, registerFormioUploadComponent, registerFormioValueResolverSelectorComponent, runAfterCarbonModalClosed, setRequiredOnSchema };
+export { ARBITRARY_AMOUNT_VALUE_TEST_IDS, AUTO_KEY_INPUT_TEST_IDS, AdminSettingsService, Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, AssignmentComponent, AutoKeyInputComponent, BOOLEAN_CONVERTER_VALUES, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, BreadcrumbService, CARBON_CONSTANTS, CARBON_THEME, CASES_WITHOUT_STATUS_KEY, COLOR_PICKER_TEST_IDS, CONFIRMATION_MODAL_TEST_IDS, CamundaFormComponent, CamundaFormModule, CarbonListComponent, CarbonListFilterPipe, CarbonListModule, CarbonMultiInputComponent, CarbonMultiInputModule, CarbonNoResultsComponent, CaseCountPipe, CaseTagsSelectorComponent, CdsThemeService, ChoiceFieldService, ColorPickerComponent, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, ContextMenuDirective, CtrlClickDirective, CurrentCarbonTheme, DEFAULT_LIST_TRANSLATIONS, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, DataListComponent, DataListModule, DatePickerComponent, DatePickerModule, DateTimePickerComponent, DigitOnlyDirective, DropzoneComponent, DropzoneModule, EditorComponent, EditorModule, EllipsisPipe, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FitPageDirective, FormComponent, FormIoCurrencyComponent, FormIoCurrentUserComponent, FormIoDomService, FormIoIbanComponent, FormIoModule, FormIoStateService, FormIoTagsService, FormIoUploaderComponent, FormModule, FormioBuilderComponent, FormioComponent, FormioDummyComponent, FormioOptionsImpl, FormioValueResolverSelectorComponent, InputComponent, InputLabelComponent, InputLabelModule, InputModule, IsArrayPipe, JSON_EDITOR_TEST_IDS, JsonEditorComponent, KEY_DROPDOWN_VALUE_TEST_IDS, KEY_VALUE_PATH_SELECTOR_TEST_IDS, KEY_VALUE_TEST_IDS, KeyGeneratorService, LeftSidebarComponent, LeftSidebarModule, ListColumnViewComponent, MdiIconSelectorComponent, MdiIconViewerComponent, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MonacoTheme, MoveRowDirection, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, MuuriDirective, MuuriDirectiveModule, MuuriItemComponent, ObserveSizeDirective, OverflowMenuComponent, OverflowMenuModule, OverflowMenuOptionComponent, OverflowMenuTriggerComponent, POPULAR_MDI_ICONS, PageHeaderComponent, PageHeaderModule, PageHeaderService, PageSubtitleService, PageTitleComponent, PageTitleModule, PageTitleService, ParagraphComponent, ParagraphModule, PendingChangesComponent, PendingChangesService, ProgressBarComponent, ProgressBarModule, PromptComponent, PromptModule, PromptService, QUICK_SEARCH_SERVICE, QuickSearchComponent, QuickSearchStateService, RIGHT_SIDEBAR_TEST_IDS, RadioComponent, RadioModule, ReadOnlyDirective, RemoveClassnamesDirective, RenderInBodyComponent, RenderInPageHeaderDirective, RenderPageHeaderDirective, RightSidebarComponent, RightSidebarModule, SINGLE_VALUE_TEST_IDS, STEPPER_FOOTER_STEP_TEST_IDS, SchemaEditorComponent, SearchFieldsComponent, SearchFieldsModule, SelectComponent, SelectModule, SelectableCarbonTheme, ShellService, SpinnerComponent, SpinnerModule, StatusSelectorComponent, StepperContainerComponent, StepperContentComponent, StepperFooterComponent, StepperFooterStepComponent, StepperHeaderComponent, StepperModule, StepperService, StepperStepComponent, TAG_ELLIPSIS_LIMIT, TableComponent, TableModule, TimelineComponent, TimelineItemImpl, TimelineModule, TooltipComponent, TooltipDirective, TooltipIconComponent, TooltipIconModule, TooltipModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, UserInterfaceService, VALUE_PATH_SELECTOR_DROPDOWN_VALUE_TEST_IDS, VALUE_PATH_SELECTOR_TEST_IDS, VALUE_PATH_SELECTOR_VALUE_TEST_IDS, VModalComponent, VModalModule, ValtimoCdsModalDirective, ValtimoModalService, ValuePathSelectorComponent, ValuePathSelectorInputMode, ValuePathSelectorPrefix, ValuePathSelectorService, ValuePathType, ViewContentService, ViewType, WIDGET_LAYOUT_TRANSLATION_KEYS, WIDGET_LAYOUT_VALUES, WIDGET_ROW_HEIGHT_DEFAULT, WIDGET_ROW_HEIGHT_GAP_FREE, WebcamComponent, WebcamModule, WidgetComponent, WidgetLayout, WidgetLayoutInfoComponent, WidgetModule, applyDataGridPatch, collectObjectLevels, createCustomFormioComponent, customUploaderType, enableCustomFormioComponents, menuInitializer, muuriGapFreeLayout, pendingChangesGuard, registerCustomFormioComponent, registerCustomTag, registerFormioCurrencyComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioIbanComponent, registerFormioUploadComponent, registerFormioValueResolverSelectorComponent, resolveWidgetLayout, runAfterCarbonModalClosed, setRequiredOnSchema };
 //# sourceMappingURL=valtimo-components.mjs.map