@magmonium/one 0.2.79 → 0.2.81

package/fesm2022/{magmonium-one-magmonium-one-CVuP1oHe.mjs → magmonium-one-magmonium-one-CWtMvVOS.mjs}

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Injectable, signal, computed, DestroyRef, DOCUMENT, ApplicationRef, RendererFactory2, createComponent, EnvironmentInjector, Pipe, ChangeDetectorRef, untracked, ElementRef, afterNextRender, input, ChangeDetectionStrategy, Component, effect, Injector, reflectComponentType, model, HostListener, Renderer2, Directive, output, viewChild, ViewEncapsulation, forwardRef, contentChild, TemplateRef, ViewContainerRef, inputBinding, outputBinding, linkedSignal, afterRenderEffect, runInInjectionContext, Input, booleanAttribute, HostAttributeToken, EventEmitter, Output, ViewChild, ContentChild, provideZonelessChangeDetection, makeEnvironmentProviders, HostBinding, provideAppInitializer, provideBrowserGlobalErrorListeners, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { HttpClient, HttpParams, provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
-import { firstValueFrom, of, tap, catchError, throwError, shareReplay, finalize, map, forkJoin, Observable, pipe, interval, fromEvent, switchMap as switchMap$1, filter, EMPTY, Subject, combineLatest, race, take, from } from 'rxjs';
+import { firstValueFrom, of, tap, catchError, throwError, shareReplay, finalize, map, forkJoin, Observable, pipe, interval, fromEvent, switchMap as switchMap$1, filter, EMPTY, Subject, combineLatest, race, take, from, startWith } from 'rxjs';
 import { rxResource, toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { signalStore, withState, withMethods, patchState, withHooks, withComputed, withProps } from '@ngrx/signals';
 import { rxMethod } from '@ngrx/signals/rxjs-interop';
@@ -10,7 +10,7 @@ import { io } from 'socket.io-client';
 import { DefaultUrlSerializer, UrlSerializer, Router, NavigationEnd, RouterModule, RouterLink, provideRouter, withComponentInputBinding, withRouterConfig, RouterOutlet } from '@angular/router';
 import * as i1 from '@angular/common';
 import { APP_BASE_HREF, Location, NgOptimizedImage, IMAGE_LOADER, NgTemplateOutlet, CommonModule, NgComponentOutlet, DecimalPipe, NgClass, DatePipe, NgStyle } from '@angular/common';
-import { FormField, email, required, minLength, maxLength, min, max, validate, apply, form } from '@angular/forms/signals';
+import { FormField, email, required, validate, minLength, maxLength, min, max, apply, form } from '@angular/forms/signals';
 import { createCustomElement } from '@angular/elements';
 import { bootstrapApplication, DomSanitizer } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
@@ -3479,6 +3479,9 @@ function isNavRowsConfig(entry) {
 function isNavInstanceConfig(entry) {
     return typeof entry === 'object' && 'navInstance' in entry;
 }
+function isNavVisibilityConfig(entry) {
+    return typeof entry === 'object' && 'navVisible' in entry;
+}
 /**
  * Multi-provided, and resolved **last-wins**: the library provides its own
  * Platform Nav panels first so an app registering at the same NavId replaces
@@ -3696,6 +3699,13 @@ const unfetchedPlatformNav = (navId) => {
         : undefined;
 };
 
+/**
+ * No Nav hidden — the shape every caller predating [NavVisibilityConfig] still
+ * has. Frozen and shared rather than minted per call: the default sits on four
+ * signatures, and a fresh Set on each would make two calls with the same
+ * arguments produce values a memo could not tell apart.
+ */
+const EMPTY_HIDDEN = new Set();
 const emptyResult = () => ({
     breadcrumb: { header: { label: '', id: '' }, trail: [] },
     navMenus: [],
@@ -3824,9 +3834,20 @@ const drawsRows = (childId, dynamicRows) => {
     const resolved = dynamicRows[childId];
     return !!resolved && (resolved.rows.length > 0 || !!resolved.loading);
 };
-const menuChildIds = (navId, navMap, dynamicRows = {}, instances = {}) => childIdsOf(navId, navMap).flatMap((childId) => {
+const menuChildIds = (navId, navMap, dynamicRows = {}, instances = {}, 
+// NavIds a NavVisibilityConfig answered no — or has not answered yet — for.
+// A set rather than a predicate: the answers are resolved once per read of
+// the widget maps, and this walk is called from four places that would
+// otherwise each resolve them again.
+hidden = EMPTY_HIDDEN) => childIdsOf(navId, navMap).flatMap((childId) => {
+    // Hidden first, and before the Default Nav descent: a hidden parent takes
+    // its children with it, which is the same cascade the route guard walks —
+    // a row spliced out of a panel whose children still listed beneath it
+    // would be the panel that looks correct and is not.
+    if (hidden.has(childId))
+        return [];
     if (isDefaultNav(childId))
-        return menuChildIds(childId, navMap, dynamicRows, instances);
+        return menuChildIds(childId, navMap, dynamicRows, instances, hidden);
     if (navMap[childId]?.presentation === 'dynamic') {
         if (drawsRows(childId, dynamicRows))
             return [childId];
@@ -3847,10 +3868,10 @@ const menuChildIds = (navId, navMap, dynamicRows = {}, instances = {}) => childI
  * list the User moved through and the row they are on is the one marked
  * active. Root is the floor: its own children are the last list there is.
  */
-const navMenuOwnerId = (navId, navMap, hasOwnContent = false, dynamicRows = {}, instances = {}) => {
+const navMenuOwnerId = (navId, navMap, hasOwnContent = false, dynamicRows = {}, instances = {}, hidden = EMPTY_HIDDEN) => {
     const visible = visibleNavId(navId);
     if (visible === ROOT_NAV$1 ||
-        menuChildIds(visible, navMap, dynamicRows, instances).length) {
+        menuChildIds(visible, navMap, dynamicRows, instances, hidden).length) {
         return visible;
     }
     // A panel that answers with a widget of its own keeps its own title —
@@ -3865,7 +3886,7 @@ const navMenuOwnerId = (navId, navMap, hasOwnContent = false, dynamicRows = {},
     // than the one we are on — a mistitled empty panel is worse than a titled one.
     for (let ancestor = parentNavId(visible); ancestor; ancestor = parentNavId(ancestor)) {
         const owner = visibleNavId(ancestor);
-        if (menuChildIds(owner, navMap, dynamicRows, instances).length)
+        if (menuChildIds(owner, navMap, dynamicRows, instances, hidden).length)
             return owner;
         if (owner === ROOT_NAV$1)
             break;
@@ -3885,7 +3906,7 @@ const navMenuOwnerId = (navId, navMap, hasOwnContent = false, dynamicRows = {},
  * falling through to the static siblings around it would show a panel that
  * looks correct and is not.
  */
-const buildNavMenus = (navId, navMap, anchor, dynamicRows = {}, routeParams, instances = {}) => menuChildIds(navId, navMap, dynamicRows, instances).flatMap((childId) => {
+const buildNavMenus = (navId, navMap, anchor, dynamicRows = {}, routeParams, instances = {}, hidden = EMPTY_HIDDEN) => menuChildIds(navId, navMap, dynamicRows, instances, hidden).flatMap((childId) => {
     const nav = navMap[childId];
     const resolved = nav && dynamicRows[childId];
     // The instances above this row, whether it is a row of its own or one of
@@ -3913,7 +3934,7 @@ const mergeTrail = (derived, override, derivedHeader) => {
     return { trail, header: override.header ?? derivedHeader };
 };
 function deriveBreadcrumb(params) {
-    const { navId, navMap, anchor, breadcrumb, navMenu, hasOwnContent, dynamicRows, routeParams, instances, } = params;
+    const { navId, navMap, anchor, breadcrumb, navMenu, hasOwnContent, dynamicRows, routeParams, instances, hidden = EMPTY_HIDDEN, } = params;
     if (!navId)
         return emptyResult();
     /**
@@ -3962,7 +3983,7 @@ function deriveBreadcrumb(params) {
     // The header and the trail belong to whichever Nav owns the menu below them:
     // on a leaf that is the parent, so the User reads the list they are in with
     // their own row marked, rather than a title over an empty panel.
-    const ownerId = navMenuOwnerId(navId, navMap, hasOwnContent, dynamicRows, instances);
+    const ownerId = navMenuOwnerId(navId, navMap, hasOwnContent, dynamicRows, instances, hidden);
     // An emitted breadcrumb names the panel it was emitted for. Once the panel
     // has been handed up to an ancestor it is no longer that panel, so the
     // override would title the ancestor's list after the leaf we left.
@@ -3992,7 +4013,7 @@ function deriveBreadcrumb(params) {
         breadcrumb: { trail, header },
         navMenus: navMenu?.length && ownPanel
             ? navMenu
-            : buildNavMenus(ownerId, navMap, anchor, dynamicRows, routeParams, instances),
+            : buildNavMenus(ownerId, navMap, anchor, dynamicRows, routeParams, instances, hidden),
     };
 }
 
@@ -4100,6 +4121,7 @@ const initialState$3 = {
     keepPanelOnPathChange: false,
     panelPushed: false,
     navScrolledDown: false,
+    visibilityAnswers: {},
     remoteWidgets: {},
     navMap: createPlatformNavMap(),
     wcConfigMap: {},
@@ -4130,6 +4152,18 @@ const routeParamsOf = (root) => {
     }
     return params;
 };
+/**
+ * A gate's answer is remembered against the parameters it was asked with, not
+ * against the NavId alone: one gate asked about book `a` and book `b` is two
+ * questions, and remembering only the last would carry `a`'s answer into `b`'s
+ * panel. Sorted so two records with the same pairs key alike whatever order the
+ * Router built them in.
+ */
+const visibilityKey = (navId, params) => `${navId}|${Object.keys(params)
+    .sort()
+    .map((name) => `${name}=${params[name]}`)
+    .join('&')}`;
+const isPromise$1 = (value) => typeof value?.then === 'function';
 const murlOf = (root) => {
     const raw = root.queryParams?.[MURL_PARAM];
     return typeof raw === 'string' ? raw.split(MURL_SEP).filter(Boolean) : [];
@@ -4268,6 +4302,94 @@ const NavStore = signalStore({ providedIn: 'root' }, withState(initialState$3),
         }
         return out;
     }, ...(ngDevMode ? [{ debugName: "dynamicInstances" }] : /* istanbul ignore next */ []));
+    /**
+     * Every registered gate, asked once, with the answer left exactly as it
+     * came back — boolean, `undefined`, or a promise.
+     *
+     * One computed rather than one per consumer: `navVisible` is called here
+     * and nowhere else, so an async gate mints one promise per change of the
+     * signals it reads rather than one per reader.
+     *
+     * Walks the whole map for the reason `dynamicRows` does: a gate may sit on
+     * a Nav the open panel never descends into, and reading each registration
+     * here is what makes the menu recompute when the store behind it fills.
+     */
+    const visibilityReads = computed(() => {
+        const params = store.routeParams();
+        const out = [];
+        for (const nav of Object.values(store.navMap())) {
+            const hit = entryAt(nav.navId);
+            if (!hit || !isNavVisibilityConfig(hit.entry))
+                continue;
+            out.push({
+                navId: nav.navId,
+                key: visibilityKey(nav.navId, params),
+                answer: hit.entry.navVisible(params),
+            });
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "visibilityReads" }] : /* istanbul ignore next */ []));
+    /**
+     * The load each registered gate offers, paired with the key it answers
+     * under. Exposed rather than fired here for the reason `instanceLoaders`
+     * is: calling a store method from inside a `computed` writes state during a
+     * read.
+     *
+     * Every gate with a load is listed, not only the ones currently answering
+     * `undefined`. What it names is a CacheMethod — state first, HTTP on a miss
+     * — so firing it warm costs a state read, where gating on the answer being
+     * missing would make the trigger depend on the thing it triggers.
+     */
+    const visibilityLoaders = computed(() => {
+        const params = store.routeParams();
+        const out = [];
+        for (const nav of Object.values(store.navMap())) {
+            const hit = entryAt(nav.navId);
+            if (!hit || !isNavVisibilityConfig(hit.entry))
+                continue;
+            const load = hit.entry.navVisibleLoad;
+            if (!load)
+                continue;
+            out.push({ key: visibilityKey(nav.navId, params), params, load });
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "visibilityLoaders" }] : /* istanbul ignore next */ []));
+    /**
+     * The promises nothing has resolved yet. Exposed rather than awaited here:
+     * awaiting inside a `computed` would write state during a read, which is
+     * the same reason `instanceLoaders` hands its calls out instead of firing
+     * them. The hook below settles them.
+     */
+    const visibilityPending = computed(() => {
+        const settled = store.visibilityAnswers();
+        return visibilityReads()
+            .filter((read) => isPromise$1(read.answer) && !(read.key in settled))
+            .map((read) => ({
+            key: read.key,
+            answer: read.answer,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "visibilityPending" }] : /* istanbul ignore next */ []));
+    /**
+     * Every Nav a gate currently takes out of the menu — one that answered
+     * `false`, one that has not answered at all, and one still asking.
+     *
+     * The unresolved cases hide, which is the half that is not symmetric: a row
+     * flashed in while its gate was still asking leaks the existence of the
+     * thing the gate was written to hide, where a row that appears a tick late
+     * costs nothing. The route guard reads the same registrations and parts
+     * ways here — it *waits*, a Router being able to hold a navigation where a
+     * panel cannot hold a render (nav-visibility-guard.ts).
+     */
+    const hiddenNavIds = computed(() => {
+        const settled = store.visibilityAnswers();
+        const out = new Set();
+        for (const read of visibilityReads()) {
+            const answer = isPromise$1(read.answer) ? settled[read.key] : read.answer;
+            if (answer !== true)
+                out.add(read.navId);
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "hiddenNavIds" }] : /* istanbul ignore next */ []));
     /**
      * The load each registered NavInstanceSource offers, paired with the value
      * of the parameter it resolves. Exposed rather than fired here: calling a
@@ -4342,7 +4464,8 @@ const NavStore = signalStore({ providedIn: 'root' }, withState(initialState$3),
         const map = store.navMap();
         const candidates = widgetNavIds();
         const rows = dynamicRows();
-        return (candidates.find((c) => menuChildIds(c, map, rows, dynamicInstances()).length) ??
+        return (candidates.find((c) => menuChildIds(c, map, rows, dynamicInstances(), hiddenNavIds())
+            .length) ??
             // A leaf nothing is registered for is still a Nav the tree knows, and
             // that is where the panel belongs: `|settings|app` with no widget hands
             // the panel back to *settings*, whose row it is, rather than climbing
@@ -4360,6 +4483,7 @@ const NavStore = signalStore({ providedIn: 'root' }, withState(initialState$3),
             anchor: { navId: store.routeNavId() ?? ROOT_NAV$1, path: store.path() },
             dynamicRows: dynamicRows(),
             instances: dynamicInstances(),
+            hidden: hiddenNavIds(),
             routeParams: store.routeParams(),
             breadcrumb: menuConfig?.breadcramb?.() ??
                 (typeof widgetConfig?.breadcramb === 'function'
@@ -4406,6 +4530,9 @@ const NavStore = signalStore({ providedIn: 'root' }, withState(initialState$3),
         currentWcConfig,
         resolvedNavMenuConfig,
         instanceLoaders,
+        hiddenNavIds,
+        visibilityPending,
+        visibilityLoaders,
     };
 }), withMethods((store) => {
     const getNavService = inject(GetNavService);
@@ -4632,6 +4759,61 @@ const NavStore = signalStore({ providedIn: 'root' }, withState(initialState$3),
              * would never refresh a name that has gone stale, and would make the
              * trigger depend on the thing it triggers.
              */
+            /**
+             * Settles each async gate once and remembers what it said.
+             *
+             * Keyed by NavId *and* parameters, so moving from book `a` to book `b`
+             * asks again while moving between two pages under `a` does not. In
+             * flight is tracked separately from settled: a promise that has not
+             * come back yet must not be re-asked on every recompute, and it is not
+             * in `visibilityAnswers` to say so.
+             */
+            /**
+             * Fires each gate's CacheMethod once per NavId + parameters, so a cold
+             * deep link fills the state the gate reads. Keyed the same way the
+             * answers are: moving from app `a` to app `b` loads again, moving
+             * between two pages under `a` does not.
+             */
+            const loadedFor = new Set();
+            effect(() => {
+                const loaders = store.visibilityLoaders();
+                untracked(() => {
+                    for (const { key, params, load } of loaders) {
+                        if (loadedFor.has(key))
+                            continue;
+                        loadedFor.add(key);
+                        load(params);
+                    }
+                });
+            });
+            const askedFor = new Set();
+            effect(() => {
+                const pending = store.visibilityPending();
+                untracked(() => {
+                    for (const { key, answer } of pending) {
+                        if (askedFor.has(key))
+                            continue;
+                        askedFor.add(key);
+                        answer
+                            .then((allowed) => patchState(store, (state) => ({
+                            visibilityAnswers: {
+                                ...state.visibilityAnswers,
+                                [key]: allowed === true,
+                            },
+                        })))
+                            // A gate that threw is a gate that did not say yes. Closed
+                            // rather than open: the failure mode of the other direction is
+                            // showing a row the User may not be allowed to have, which is
+                            // the thing the gate exists to prevent.
+                            .catch(() => patchState(store, (state) => ({
+                            visibilityAnswers: {
+                                ...state.visibilityAnswers,
+                                [key]: false,
+                            },
+                        })));
+                    }
+                });
+            });
             const firedFor = new Map();
             effect(() => {
                 const loaders = store.instanceLoaders();
@@ -6765,6 +6947,16 @@ class SectionFormItemComponent extends ConfigComponent {
     isCheckboxVisible = input(...(ngDevMode ? [undefined, { debugName: "isCheckboxVisible" }] : /* istanbul ignore next */ []));
     enlarge = input(...(ngDevMode ? [undefined, { debugName: "enlarge" }] : /* istanbul ignore next */ []));
     optionsAsset = input(...(ngDevMode ? [undefined, { debugName: "optionsAsset" }] : /* istanbul ignore next */ []));
+    // A `file` Field's settings. `accept` is one comma-separated scalar, the
+    // spelling the native attribute already takes, so it rides on the tag the way
+    // `patterns` does below rather than as a list (ADR 0010).
+    accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
+    maxSize = input(...(ngDevMode ? [undefined, { debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    dropZone = input(...(ngDevMode ? [undefined, { debugName: "dropZone" }] : /* istanbul ignore next */ []));
+    readAs = input(...(ngDevMode ? [undefined, { debugName: "readAs" }] : /* istanbul ignore next */ []));
+    editor = input(...(ngDevMode ? [undefined, { debugName: "editor" }] : /* istanbul ignore next */ []));
+    ratio = input(...(ngDevMode ? [undefined, { debugName: "ratio" }] : /* istanbul ignore next */ []));
+    width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
     // The shapes this Field's value may take, named on the tag the way every
     // other setting is (ADR 0010). One scalar rather than a list: the names are
     // comma-separated and resolved into rules here, so the markup says which
@@ -6819,6 +7011,13 @@ class SectionFormItemComponent extends ConfigComponent {
         put('iconOnly', toAttrBool(this.iconOnly()));
         put('isCheckboxVisible', toAttrBool(this.isCheckboxVisible()));
         put('enlarge', toAttrBool(this.enlarge()));
+        put('accept', this.accept());
+        put('maxSize', toAttrNumber(this.maxSize()));
+        put('dropZone', toAttrBool(this.dropZone()));
+        put('readAs', this.readAs());
+        put('editor', toAttrBool(this.editor()));
+        put('ratio', this.ratio());
+        put('width', toAttrNumber(this.width()));
         // An OptionsSource on the tag outranks the asset's own key, and the plain
         // attribute outranks both — same order every other key follows.
         put('optionsAsset', this.optionsAsset() ?? this.optionsSource?.name());
@@ -7033,7 +7232,7 @@ class SectionFormItemComponent extends ConfigComponent {
                     break;
                 }
                 case InputType.TOGGLE: {
-                    const { ToggleInputComponent } = await import('./magmonium-one-toggle-DBQMTJ6O.mjs');
+                    const { ToggleInputComponent } = await import('./magmonium-one-toggle-DL3lH7Xo.mjs');
                     this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                     break;
                 }
@@ -7045,12 +7244,12 @@ class SectionFormItemComponent extends ConfigComponent {
                     break;
                 }
                 case InputType.PASSWORD: {
-                    const { PasswordInputComponent } = await import('./magmonium-one-password-rGcfKu8z.mjs');
+                    const { PasswordInputComponent } = await import('./magmonium-one-password-7gmB_RWb.mjs');
                     this.createDynamicComponent(seq, PasswordInputComponent);
                     break;
                 }
                 case InputType.OTP: {
-                    const { OtpInputComponent } = await import('./magmonium-one-otp-T4eYO6SM.mjs');
+                    const { OtpInputComponent } = await import('./magmonium-one-otp-B-oUlDWY.mjs');
                     this.createDynamicComponent(seq, OtpInputComponent);
                     break;
                 }
@@ -7122,6 +7321,12 @@ class SectionFormItemComponent extends ConfigComponent {
                     ]);
                     break;
                 }
+                case InputType.FILE:
+                case InputType.FOLDER: {
+                    const { FileUploadInputComponent } = await Promise.resolve().then(function () { return fileUploadInput; });
+                    this.createDynamicComponent(seq, FileUploadInputComponent);
+                    break;
+                }
                 default: {
                     const { TextInputComponent } = await Promise.resolve().then(function () { return text; });
                     this.createDynamicComponent(seq, TextInputComponent);
@@ -7134,7 +7339,7 @@ class SectionFormItemComponent extends ConfigComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionFormItemComponent, isStandalone: true, selector: "m-section-form-item, m-one-section-form-item", inputs: { span: { classPropertyName: "span", publicName: "span", isSignal: true, isRequired: false, transformFunction: null }, labelOrientation: { classPropertyName: "labelOrientation", publicName: "labelOrientation", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, aclResolver: { classPropertyName: "aclResolver", publicName: "aclResolver", isSignal: true, isRequired: false, transformFunction: null }, formValues: { classPropertyName: "formValues", publicName: "formValues", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: false, transformFunction: null }, buttonAction: { classPropertyName: "buttonAction", publicName: "buttonAction", isSignal: true, isRequired: false, transformFunction: null }, buttonAcl: { classPropertyName: "buttonAcl", publicName: "buttonAcl", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, acl: { classPropertyName: "acl", publicName: "acl", isSignal: true, isRequired: false, transformFunction: null }, testid: { classPropertyName: "testid", publicName: "testid", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, equalWidth: { classPropertyName: "equalWidth", publicName: "equalWidth", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, isCheckboxVisible: { classPropertyName: "isCheckboxVisible", publicName: "isCheckboxVisible", isSignal: true, isRequired: false, transformFunction: null }, enlarge: { classPropertyName: "enlarge", publicName: "enlarge", isSignal: true, isRequired: false, transformFunction: null }, optionsAsset: { classPropertyName: "optionsAsset", publicName: "optionsAsset", isSignal: true, isRequired: false, transformFunction: null }, patterns: { classPropertyName: "patterns", publicName: "patterns", isSignal: true, isRequired: false, transformFunction: null }, patternMessage: { classPropertyName: "patternMessage", publicName: "patternMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", act: "act", fieldKey: "fieldKey" }, host: { properties: { "class": "spanClass()", "style.display": "isVisible() ? null : \"none\"" } }, queries: [{ propertyName: "projectedTemplate", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dynamicInput", first: true, predicate: ["dynamicInput"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionFormItemComponent, isStandalone: true, selector: "m-section-form-item, m-one-section-form-item", inputs: { span: { classPropertyName: "span", publicName: "span", isSignal: true, isRequired: false, transformFunction: null }, labelOrientation: { classPropertyName: "labelOrientation", publicName: "labelOrientation", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, aclResolver: { classPropertyName: "aclResolver", publicName: "aclResolver", isSignal: true, isRequired: false, transformFunction: null }, formValues: { classPropertyName: "formValues", publicName: "formValues", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: false, transformFunction: null }, buttonAction: { classPropertyName: "buttonAction", publicName: "buttonAction", isSignal: true, isRequired: false, transformFunction: null }, buttonAcl: { classPropertyName: "buttonAcl", publicName: "buttonAcl", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, acl: { classPropertyName: "acl", publicName: "acl", isSignal: true, isRequired: false, transformFunction: null }, testid: { classPropertyName: "testid", publicName: "testid", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, equalWidth: { classPropertyName: "equalWidth", publicName: "equalWidth", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, isCheckboxVisible: { classPropertyName: "isCheckboxVisible", publicName: "isCheckboxVisible", isSignal: true, isRequired: false, transformFunction: null }, enlarge: { classPropertyName: "enlarge", publicName: "enlarge", isSignal: true, isRequired: false, transformFunction: null }, optionsAsset: { classPropertyName: "optionsAsset", publicName: "optionsAsset", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, dropZone: { classPropertyName: "dropZone", publicName: "dropZone", isSignal: true, isRequired: false, transformFunction: null }, readAs: { classPropertyName: "readAs", publicName: "readAs", isSignal: true, isRequired: false, transformFunction: null }, editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, patterns: { classPropertyName: "patterns", publicName: "patterns", isSignal: true, isRequired: false, transformFunction: null }, patternMessage: { classPropertyName: "patternMessage", publicName: "patternMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", act: "act", fieldKey: "fieldKey" }, host: { properties: { "class": "spanClass()", "style.display": "isVisible() ? null : \"none\"" } }, queries: [{ propertyName: "projectedTemplate", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dynamicInput", first: true, predicate: ["dynamicInput"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <div
       [class]="itemClass()"
       [style.--sfi-gap.px]="gap()"
@@ -7167,7 +7372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[class]': 'spanClass()',
                         '[style.display]': 'isVisible() ? null : "none"',
                     }, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;flex:1 1 100%;min-width:0}.section-form-item{display:flex;flex-direction:column;gap:var(--sfi-gap, .5em );min-width:0;width:100%}.section-form-item.--horizontal{flex-direction:row;align-items:center}.section-form-item.--horizontal .section-form-item__input{flex:1;min-width:0}.section-form-item.--vertical{flex-direction:column}.section-form-item.--vertical .section-form-item__input{width:100%}.section-form-item__input{display:flex;flex-direction:column;min-width:0;width:100%}.section-form-item__input>*{width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { span: [{ type: i0.Input, args: [{ isSignal: true, alias: "span", required: false }] }], labelOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelOrientation", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], projectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], aclResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "aclResolver", required: false }] }], formValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "formValues", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: false }] }], buttonAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonAction", required: false }] }], buttonAcl: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonAcl", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], acl: [{ type: i0.Input, args: [{ isSignal: true, alias: "acl", required: false }] }], testid: [{ type: i0.Input, args: [{ isSignal: true, alias: "testid", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], multiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelect", required: false }] }], equalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "equalWidth", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], isCheckboxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCheckboxVisible", required: false }] }], enlarge: [{ type: i0.Input, args: [{ isSignal: true, alias: "enlarge", required: false }] }], optionsAsset: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsAsset", required: false }] }], patterns: [{ type: i0.Input, args: [{ isSignal: true, alias: "patterns", required: false }] }], patternMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "patternMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], act: [{ type: i0.Output, args: ["act"] }], fieldKey: [{ type: i0.Output, args: ["fieldKey"] }], dynamicInput: [{ type: i0.ViewChild, args: ['dynamicInput', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { span: [{ type: i0.Input, args: [{ isSignal: true, alias: "span", required: false }] }], labelOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelOrientation", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], projectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], aclResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "aclResolver", required: false }] }], formValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "formValues", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: false }] }], buttonAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonAction", required: false }] }], buttonAcl: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonAcl", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], acl: [{ type: i0.Input, args: [{ isSignal: true, alias: "acl", required: false }] }], testid: [{ type: i0.Input, args: [{ isSignal: true, alias: "testid", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], multiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelect", required: false }] }], equalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "equalWidth", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], isCheckboxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCheckboxVisible", required: false }] }], enlarge: [{ type: i0.Input, args: [{ isSignal: true, alias: "enlarge", required: false }] }], optionsAsset: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsAsset", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], dropZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropZone", required: false }] }], readAs: [{ type: i0.Input, args: [{ isSignal: true, alias: "readAs", required: false }] }], editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], patterns: [{ type: i0.Input, args: [{ isSignal: true, alias: "patterns", required: false }] }], patternMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "patternMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], act: [{ type: i0.Output, args: ["act"] }], fieldKey: [{ type: i0.Output, args: ["fieldKey"] }], dynamicInput: [{ type: i0.ViewChild, args: ['dynamicInput', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 function formatDate(date, format) {
     if (!date) {
@@ -7219,9 +7424,19 @@ function isValidDateString(dateString, format) {
 const emailValidation = (schemaPath) => email(schemaPath, {
     message: 'not-a-valid-email',
 });
-const requiredValidation = (s, paths) => paths.forEach((path) => required(s[path], {
-    message: 'this-field-is-required',
-}));
+const requiredValidation = (s, paths) => paths.forEach((path) => {
+    required(s[path], {
+        message: 'this-field-is-required',
+    });
+    // `required` counts an empty list as a value. A multiselect or a `file`
+    // Field holding `multiple` files is empty at `[]`, so that is refused too.
+    validate(s[path], (ctx) => {
+        const value = ctx.value();
+        return Array.isArray(value) && value.length === 0
+            ? { kind: 'required', message: 'this-field-is-required' }
+            : null;
+    });
+});
 const minLengthValidation = (s, paths, len) => paths.forEach((path) => minLength(s[path], len, {
     message: `min-length?len=${len}`,
 }));
@@ -16843,7 +17058,7 @@ class AuthActivityPageComponent {
         wrongPassword: this.authStore.wrongPassword,
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AuthActivityPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AuthActivityPageComponent, isStandalone: true, selector: "m-auth-activity", ngImport: i0, template: "<m-section>\n  <m-flex direction=\"column\" justify=\"center\" alignItems=\"center\" gap=\"2em\" minHeight=\"400px\">\n    <m-logo color=\"mm\" width=\"5em\" padding=\"10px\" variant=\"grained\" />\n    @if (authStore.variant().busy) {\n      <m-icon color=\"mm\" size=\"4em\" name=\"loading-bars\" [one]=\"true\" />\n    } @else if (!authStore.variant().identity_exiest && !authStore.variant().many_identifications) {\n      <m-text-output [noTranslate]=\"false\" label=\"welcome-to-app?app=Magmonium\" />\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        [data]=\"emailData!\"\n        (submitted)=\"authStore.patch({ email: $event.email }); authStore.createAuthEmail({ identity: $event.email })\"\n      >\n        <m-section-form-item\n          name=\"email\"\n          patterns=\"email\"\n          type=\"text\"\n          label=\"e-mail\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"next\"\n          icon=\"chevron-right\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"mm\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n      </m-section-form>\n    } @else if (!authStore.variant().identity_exiest && authStore.variant().many_identifications) {\n      <m-text-output [noTranslate]=\"false\" label=\"welcome-to-app?app=Magmonium\" />\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        (dataChange)=\"selectUserCard($event.user)\"\n      >\n        <m-section-form-item\n          name=\"user\"\n          [span]=\"1\"\n          patterns=\"email\"\n          type=\"selectable_card\"\n          label=\"select-user\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n          [multiSelect]=\"false\"\n          [vertical]=\"true\"\n          [isCheckboxVisible]=\"false\"\n          [data]=\"userCards()\"\n        >\n          <ng-template let-item=\"row\" let-index=\"index\">\n            <m-user [firstName]=\"item.firstName\" [lastName]=\"item.lastName\">\n              <m-text-output [label]=\"item.identity\" noTranslate />\n            </m-user>\n          </ng-template>\n        </m-section-form-item>\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"or-try-new-user\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            [fullWidth]=\"true\"\n            variant=\"primary\"\n            (clicked)=\"authStore.patch({ identity: undefined, email: undefined })\"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    } @else if (authStore.variant().with_show_term && !authStore.variant().create_new_user) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        (submitted)=\"authStore.createSignUpOtp()\"\n      >\n        <m-text-output\n          align=\"center\"\n          variant=\"footer\"\n          label=\"by-signing-in-you-agree-to-magmonium-s-terms-of-service-terms-and-acknowledge-our-privacy-policy-privacy\"\n          [params]=\"activityTranslateParams()\"\n        />\n        <m-section-form-item name=\"field_1\" type=\"checkbox\" label=\"i-agree\" placeholder=\"type-text\" [required]=\"true\" />\n        <m-button\n          label=\"confirm\"\n          icon=\"check\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"success\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"back\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"\n              authStore.patch({\n                identity: undefined,\n                otp: undefined,\n                otpCounter: undefined,\n                registerNewUser: undefined,\n                resetPassword: undefined,\n                showTerms: undefined,\n                signUp: undefined,\n              })\n            \"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    } @else if (authStore.variant().with_otp && authStore.variant().create_new_user) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        [data]=\"eMailData!\"\n        (submitted)=\"authStore.updateAuthOtp({ code: $event.otp })\"\n      >\n        <m-section-form-item\n          name=\"otp\"\n          type=\"one-time-password\"\n          label=\"one-time-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"next\"\n          icon=\"chevron-right\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"mm\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"resend\"\n            icon=\"corner-left-up\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"authStore.createAuthOtp()\"\n          />\n          <m-button\n            label=\"back\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"\n              authStore.patch({\n                identity: undefined,\n                otp: undefined,\n                otpCounter: undefined,\n                registerNewUser: undefined,\n                resetPassword: undefined,\n                showTerms: undefined,\n                signUp: undefined,\n              })\n            \"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    } @else if (\n      authStore.variant().identity_exiest && !authStore.variant().reset_password && !authStore.variant().create_new_user\n    ) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        [validation]=\"signInValidation\"\n        [data]=\"signInData!\"\n        (formInitialized)=\"authStore.patch({ wrongPassword: undefined })\"\n        (submitted)=\"authStore.updateAuthPassword({ password: btoa($event.password) })\"\n      >\n        <m-text-output label=\"signing-in-as\" [params]=\"activityTranslateParams()\" />\n        <m-section-form-item\n          name=\"password\"\n          type=\"password\"\n          label=\"password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"sign-in\"\n          icon=\"check\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"success\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"back\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"authStore.patch({ identity: undefined })\"\n          />\n          <m-button\n            label=\"reset\"\n            icon=\"chevron-right\"\n            [isRightIcon]=\"true\"\n            color=\"textSecondary\"\n            variant=\"ghost\"\n            (clicked)=\"authStore.createAuthOtp()\"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    } @else if (authStore.variant().reset_password && authStore.variant().with_otp) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        [validation]=\"passwordValidation\"\n        [data]=\"passwordData!\"\n        (submitted)=\"authStore.createAuthPassword({ password: $event.confirm, code: $event.code })\"\n      >\n        <m-section-form-item\n          name=\"code\"\n          type=\"one-time-password\"\n          label=\"one-time-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"resend\"\n            icon=\"corner-left-up\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"authStore.createAuthOtp()\"\n          />\n        </m-section-button-group>\n        <m-section-form-item\n          name=\"password\"\n          type=\"password\"\n          label=\"new-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-section-form-item\n          name=\"confirm\"\n          type=\"password\"\n          label=\"confirm-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"reset\"\n          icon=\"check\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"mm\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n      </m-section-form>\n    } @else if (authStore.variant().create_new_user && authStore.variant().identity_exiest) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        [data]=\"signupData!\"\n        (submitted)=\"\n          authStore.createAuthSignup({\n            firstName: $event.firstname,\n            lastName: $event.lastname,\n            dob: $event.dob,\n            sex: $event.sex,\n            password: btoa($event.password),\n          })\n        \"\n      >\n        <m-text-output label=\"signing-up-as\" [params]=\"activityTranslateParams()\" />\n        <m-section-form-item\n          name=\"firstname\"\n          type=\"text\"\n          label=\"first-name\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-section-form-item name=\"lastname\" type=\"text\" label=\"last-name\" placeholder=\"type-text\" [required]=\"true\" />\n        <m-section-form-item name=\"dob\" type=\"date\" label=\"date-of-birth\" placeholder=\"type-text\" [required]=\"true\" />\n        <m-section-form-item\n          name=\"sex\"\n          type=\"toggle_radio\"\n          label=\"sex\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n          value=\"male\"\n          mOptions=\"sex\"\n        />\n        <m-section-form-item\n          name=\"password\"\n          type=\"password\"\n          label=\"password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-section-form-item\n          name=\"repassword\"\n          type=\"password\"\n          label=\"confirm-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"sign-up\"\n          icon=\"check\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"success\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"back\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"\n              authStore.patch({\n                identity: undefined,\n                otp: undefined,\n                otpCounter: undefined,\n                registerNewUser: undefined,\n                resetPassword: undefined,\n                showTerms: undefined,\n                signUp: undefined,\n              })\n            \"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    }\n  </m-flex>\n</m-section>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;padding-block:clamp(1.5rem,6vh,4rem)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: FlexComponent, selector: "m-flex", inputs: ["direction", "justify", "alignItems", "variant", "gap", "padding", "paddingX", "paddingY", "wrap", "inline", "fullHeight", "minHeight", "minWidth", "maxHeight", "maxWidth"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: LogoComponent, selector: "m-logo", inputs: ["animation", "alive", "variant", "interactive", "width", "padding", "border", "color"] }, { kind: "directive", type: OptionsSourceDirective, selector: "[mOptions]", inputs: ["mOptions"] }, { kind: "component", type: SectionButtonGroupComponent, selector: "m-section-button-group", inputs: ["vertical", "align", "variant", "size", "fullWidth"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "component", type: SectionFormComponent, selector: "m-section-form, m-one-section-form", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size", "autofocus", "data", "validation", "disabled", "fieldConfigs", "fieldRenderIds"], outputs: ["dataChange", "submitted", "formInitialized"] }, { kind: "component", type: SectionFormItemComponent, selector: "m-section-form-item, m-one-section-form-item", inputs: ["span", "labelOrientation", "gap", "readonly", "focused", "form", "options", "dir", "element", "data", "template", "aclResolver", "formValues", "type", "label", "placeholder", "params", "required", "disabled", "icon", "prefix", "suffix", "button", "buttonAction", "buttonAcl", "maxWidth", "acl", "testid", "color", "variant", "min", "max", "step", "length", "debounce", "dateFormat", "searchLabel", "vertical", "multiple", "multiSelect", "equalWidth", "iconOnly", "isCheckboxVisible", "enlarge", "optionsAsset", "patterns", "patternMessage", "value"], outputs: ["valueChange", "act", "fieldKey"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "fontWeight", "label", "noTranslate", "params"], outputs: ["configChange", "clicked"] }, { kind: "component", type: UserComponent, selector: "m-user", inputs: ["id", "user", "firstName", "lastName", "profilePic"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AuthActivityPageComponent, isStandalone: true, selector: "m-auth-activity", ngImport: i0, template: "<m-section>\n  <m-flex direction=\"column\" justify=\"center\" alignItems=\"center\" gap=\"2em\" minHeight=\"400px\">\n    <m-logo color=\"mm\" width=\"5em\" padding=\"10px\" variant=\"grained\" />\n    @if (authStore.variant().busy) {\n      <m-icon color=\"mm\" size=\"4em\" name=\"loading-bars\" [one]=\"true\" />\n    } @else if (!authStore.variant().identity_exiest && !authStore.variant().many_identifications) {\n      <m-text-output [noTranslate]=\"false\" label=\"welcome-to-app?app=Magmonium\" />\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        [data]=\"emailData!\"\n        (submitted)=\"authStore.patch({ email: $event.email }); authStore.createAuthEmail({ identity: $event.email })\"\n      >\n        <m-section-form-item\n          name=\"email\"\n          patterns=\"email\"\n          type=\"text\"\n          label=\"e-mail\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"next\"\n          icon=\"chevron-right\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"mm\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n      </m-section-form>\n    } @else if (!authStore.variant().identity_exiest && authStore.variant().many_identifications) {\n      <m-text-output [noTranslate]=\"false\" label=\"welcome-to-app?app=Magmonium\" />\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        (dataChange)=\"selectUserCard($event.user)\"\n      >\n        <m-section-form-item\n          name=\"user\"\n          [span]=\"1\"\n          patterns=\"email\"\n          type=\"selectable_card\"\n          label=\"select-user\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n          [multiSelect]=\"false\"\n          [vertical]=\"true\"\n          [isCheckboxVisible]=\"false\"\n          [data]=\"userCards()\"\n        >\n          <ng-template let-item=\"row\" let-index=\"index\">\n            <m-user [firstName]=\"item.firstName\" [lastName]=\"item.lastName\">\n              <m-text-output [label]=\"item.identity\" noTranslate />\n            </m-user>\n          </ng-template>\n        </m-section-form-item>\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"or-try-new-user\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            [fullWidth]=\"true\"\n            variant=\"primary\"\n            (clicked)=\"authStore.patch({ identity: undefined, email: undefined })\"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    } @else if (authStore.variant().with_show_term && !authStore.variant().create_new_user) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        (submitted)=\"authStore.createSignUpOtp()\"\n      >\n        <m-text-output\n          align=\"center\"\n          variant=\"footer\"\n          label=\"by-signing-in-you-agree-to-magmonium-s-terms-of-service-terms-and-acknowledge-our-privacy-policy-privacy\"\n          [params]=\"activityTranslateParams()\"\n        />\n        <m-section-form-item name=\"field_1\" type=\"checkbox\" label=\"i-agree\" placeholder=\"type-text\" [required]=\"true\" />\n        <m-button\n          label=\"confirm\"\n          icon=\"check\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"success\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"back\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"\n              authStore.patch({\n                identity: undefined,\n                otp: undefined,\n                otpCounter: undefined,\n                registerNewUser: undefined,\n                resetPassword: undefined,\n                showTerms: undefined,\n                signUp: undefined,\n              })\n            \"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    } @else if (authStore.variant().with_otp && authStore.variant().create_new_user) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        [data]=\"eMailData!\"\n        (submitted)=\"authStore.updateAuthOtp({ code: $event.otp })\"\n      >\n        <m-section-form-item\n          name=\"otp\"\n          type=\"one-time-password\"\n          label=\"one-time-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"next\"\n          icon=\"chevron-right\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"mm\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"resend\"\n            icon=\"corner-left-up\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"authStore.createAuthOtp()\"\n          />\n          <m-button\n            label=\"back\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"\n              authStore.patch({\n                identity: undefined,\n                otp: undefined,\n                otpCounter: undefined,\n                registerNewUser: undefined,\n                resetPassword: undefined,\n                showTerms: undefined,\n                signUp: undefined,\n              })\n            \"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    } @else if (\n      authStore.variant().identity_exiest && !authStore.variant().reset_password && !authStore.variant().create_new_user\n    ) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        [validation]=\"signInValidation\"\n        [data]=\"signInData!\"\n        (formInitialized)=\"authStore.patch({ wrongPassword: undefined })\"\n        (submitted)=\"authStore.updateAuthPassword({ password: btoa($event.password) })\"\n      >\n        <m-text-output label=\"signing-in-as\" [params]=\"activityTranslateParams()\" />\n        <m-section-form-item\n          name=\"password\"\n          type=\"password\"\n          label=\"password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"sign-in\"\n          icon=\"check\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"success\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"back\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"authStore.patch({ identity: undefined })\"\n          />\n          <m-button\n            label=\"reset\"\n            icon=\"chevron-right\"\n            [isRightIcon]=\"true\"\n            color=\"textSecondary\"\n            variant=\"ghost\"\n            (clicked)=\"authStore.createAuthOtp()\"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    } @else if (authStore.variant().reset_password && authStore.variant().with_otp) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        [validation]=\"passwordValidation\"\n        [data]=\"passwordData!\"\n        (submitted)=\"authStore.createAuthPassword({ password: $event.confirm, code: $event.code })\"\n      >\n        <m-section-form-item\n          name=\"code\"\n          type=\"one-time-password\"\n          label=\"one-time-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"resend\"\n            icon=\"corner-left-up\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"authStore.createAuthOtp()\"\n          />\n        </m-section-button-group>\n        <m-section-form-item\n          name=\"password\"\n          type=\"password\"\n          label=\"new-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-section-form-item\n          name=\"confirm\"\n          type=\"password\"\n          label=\"confirm-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"reset\"\n          icon=\"check\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"mm\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n      </m-section-form>\n    } @else if (authStore.variant().create_new_user && authStore.variant().identity_exiest) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        [data]=\"signupData!\"\n        (submitted)=\"\n          authStore.createAuthSignup({\n            firstName: $event.firstname,\n            lastName: $event.lastname,\n            dob: $event.dob,\n            sex: $event.sex,\n            password: btoa($event.password),\n          })\n        \"\n      >\n        <m-text-output label=\"signing-up-as\" [params]=\"activityTranslateParams()\" />\n        <m-section-form-item\n          name=\"firstname\"\n          type=\"text\"\n          label=\"first-name\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-section-form-item name=\"lastname\" type=\"text\" label=\"last-name\" placeholder=\"type-text\" [required]=\"true\" />\n        <m-section-form-item name=\"dob\" type=\"date\" label=\"date-of-birth\" placeholder=\"type-text\" [required]=\"true\" />\n        <m-section-form-item\n          name=\"sex\"\n          type=\"toggle_radio\"\n          label=\"sex\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n          value=\"male\"\n          mOptions=\"sex\"\n        />\n        <m-section-form-item\n          name=\"password\"\n          type=\"password\"\n          label=\"password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-section-form-item\n          name=\"repassword\"\n          type=\"password\"\n          label=\"confirm-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"sign-up\"\n          icon=\"check\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"success\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"back\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"\n              authStore.patch({\n                identity: undefined,\n                otp: undefined,\n                otpCounter: undefined,\n                registerNewUser: undefined,\n                resetPassword: undefined,\n                showTerms: undefined,\n                signUp: undefined,\n              })\n            \"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    }\n  </m-flex>\n</m-section>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;padding-block:clamp(1.5rem,6vh,4rem)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: FlexComponent, selector: "m-flex", inputs: ["direction", "justify", "alignItems", "variant", "gap", "padding", "paddingX", "paddingY", "wrap", "inline", "fullHeight", "minHeight", "minWidth", "maxHeight", "maxWidth"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: LogoComponent, selector: "m-logo", inputs: ["animation", "alive", "variant", "interactive", "width", "padding", "border", "color"] }, { kind: "directive", type: OptionsSourceDirective, selector: "[mOptions]", inputs: ["mOptions"] }, { kind: "component", type: SectionButtonGroupComponent, selector: "m-section-button-group", inputs: ["vertical", "align", "variant", "size", "fullWidth"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "component", type: SectionFormComponent, selector: "m-section-form, m-one-section-form", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size", "autofocus", "data", "validation", "disabled", "fieldConfigs", "fieldRenderIds"], outputs: ["dataChange", "submitted", "formInitialized"] }, { kind: "component", type: SectionFormItemComponent, selector: "m-section-form-item, m-one-section-form-item", inputs: ["span", "labelOrientation", "gap", "readonly", "focused", "form", "options", "dir", "element", "data", "template", "aclResolver", "formValues", "type", "label", "placeholder", "params", "required", "disabled", "icon", "prefix", "suffix", "button", "buttonAction", "buttonAcl", "maxWidth", "acl", "testid", "color", "variant", "min", "max", "step", "length", "debounce", "dateFormat", "searchLabel", "vertical", "multiple", "multiSelect", "equalWidth", "iconOnly", "isCheckboxVisible", "enlarge", "optionsAsset", "accept", "maxSize", "dropZone", "readAs", "editor", "ratio", "width", "patterns", "patternMessage", "value"], outputs: ["valueChange", "act", "fieldKey"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "fontWeight", "label", "noTranslate", "params"], outputs: ["configChange", "clicked"] }, { kind: "component", type: UserComponent, selector: "m-user", inputs: ["id", "user", "firstName", "lastName", "profilePic"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AuthActivityPageComponent, decorators: [{
             type: Component,
@@ -20937,7 +21152,7 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.TOGGLE: {
-                const { ToggleInputComponent } = await import('./magmonium-one-toggle-DBQMTJ6O.mjs');
+                const { ToggleInputComponent } = await import('./magmonium-one-toggle-DL3lH7Xo.mjs');
                 this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                 break;
             }
@@ -20949,12 +21164,12 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.PASSWORD: {
-                const { PasswordInputComponent } = await import('./magmonium-one-password-rGcfKu8z.mjs');
+                const { PasswordInputComponent } = await import('./magmonium-one-password-7gmB_RWb.mjs');
                 this.createDynamicComponent(seq, PasswordInputComponent);
                 break;
             }
             case InputType.OTP: {
-                const { OtpInputComponent } = await import('./magmonium-one-otp-T4eYO6SM.mjs');
+                const { OtpInputComponent } = await import('./magmonium-one-otp-B-oUlDWY.mjs');
                 this.createDynamicComponent(seq, OtpInputComponent);
                 break;
             }
@@ -22120,25 +22335,365 @@ function truncateMiddlePath(path, maxLength = 48) {
     return trimmed.slice(0, headLen) + '...' + trimmed.slice(-tailLen);
 }
 
-class FileUploadInputComponent extends BaseTextInputComponent {
+/**
+ * A Field's `accept` as a list. On a tag it is one comma-separated scalar — the
+ * spelling the native `accept` attribute already uses (ADR 0010) — and in a
+ * `fields/<name>.yml` a list, so both arrive here.
+ */
+const parseAccept = (accept) => {
+    const parts = typeof accept === 'string' ? accept.split(',') : accept ?? [];
+    return parts.map((part) => part.trim().toLowerCase()).filter(Boolean);
+};
+/**
+ * A Field's `accept` as the text it shows in place of a placeholder: `.png`
+ * reads `PNG`, `image/*` reads `IMAGE`, `image/svg+xml` reads `SVG`. Entries
+ * that read alike are shown once, and the rest are joined with ` / `.
+ */
+const formatAccept = (accept) => {
+    const names = accept
+        .filter((rule) => rule !== '*' && rule !== '*/*')
+        .map((rule) => {
+        if (rule.startsWith('.'))
+            return rule.slice(1);
+        const [type, subtype = ''] = rule.split('/');
+        return subtype === '*' || !subtype ? type : subtype.split('+')[0];
+    })
+        .map((name) => name.toUpperCase());
+    return [...new Set(names)].join(' / ');
+};
+/** A file name's extension, lower-cased and without its dot; empty if none. */
+const fileExtension = (name) => {
+    const dot = name.lastIndexOf('.');
+    return dot > 0 ? name.slice(dot + 1).toLowerCase() : '';
+};
+const ICON_BY_EXTENSION = {
+    png: 'file-image',
+    jpg: 'file-image',
+    jpeg: 'file-image',
+    gif: 'file-image',
+    webp: 'file-image',
+    svg: 'file-image',
+    csv: 'file-data',
+    json: 'file-data',
+    xlsx: 'file-data',
+    html: 'file-markup',
+    xml: 'file-markup',
+    css: 'file-style',
+    sass: 'file-style',
+    scss: 'file-style',
+    js: 'file-code',
+    ts: 'file-code',
+};
+/** The `file-*` icon a tile draws for a file it has no preview of. */
+const fileIcon = (name) => ICON_BY_EXTENSION[fileExtension(name)] ?? 'file-text';
+/** Mirrors the picker's own matching: `.ext`, `type/*` or an exact MIME type. */
+const fileMatchesAccept = (file, accept) => {
+    if (!accept.length)
+        return true;
+    const name = file.name.toLowerCase();
+    const mime = (file.type ?? '').toLowerCase();
+    return accept.some((rule) => {
+        if (rule === '*' || rule === '*/*')
+            return true;
+        if (rule.startsWith('.'))
+            return name.endsWith(rule);
+        if (rule.endsWith('/*'))
+            return mime.startsWith(rule.slice(0, -1));
+        return mime === rule;
+    });
+};
+/**
+ * Splits picked or dropped files into the ones the Field keeps and the ones it
+ * reports. A drop never passes the native picker, so this is where `accept` and
+ * `maxSize` are enforced rather than merely suggested (CONTEXT.md DropZone).
+ */
+const screenFiles = (files, accept, maxSize) => {
+    const accepted = [];
+    const rejected = [];
+    for (const file of files) {
+        if (!fileMatchesAccept(file, accept)) {
+            rejected.push({ name: file.name, reason: 'type' });
+        }
+        else if (maxSize && file.size > maxSize) {
+            rejected.push({ name: file.name, reason: 'size' });
+        }
+        else {
+            accepted.push(file);
+        }
+    }
+    return { accepted, rejected };
+};
+const sameFile = (a, b) => a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+/** Appends `incoming` to `current`, skipping a file already held. */
+const mergeFiles = (current, incoming) => incoming.reduce((held, file) => held.some((existing) => sameFile(existing, file))
+    ? held
+    : [...held, file], [...current]);
+const UNITS = ['B', 'KB', 'MB', 'GB'];
+const formatFileSize = (bytes) => {
+    let size = bytes;
+    let unit = 0;
+    while (size >= 1024 && unit < UNITS.length - 1) {
+        size /= 1024;
+        unit++;
+    }
+    const figure = unit === 0 || size >= 10 ? Math.round(size) : size.toFixed(1);
+    return `${figure} ${UNITS[unit]}`;
+};
+
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 4;
+/** Only raster images a canvas decodes everywhere enter the ImageEditor. */
+const EDITABLE_TYPES = ['image/png', 'image/jpeg', 'image/webp'];
+const isEditableImage = (file) => EDITABLE_TYPES.includes(file.type.toLowerCase());
+/** `'16:9'` as `16 / 9`; undefined for anything but two positive figures. */
+const parseRatio = (ratio) => {
+    if (typeof ratio !== 'string')
+        return undefined;
+    const match = /^\s*(\d+(?:\.\d+)?)\s*:\s*(\d+(?:\.\d+)?)\s*$/.exec(ratio);
+    if (!match)
+        return undefined;
+    const width = Number(match[1]);
+    const height = Number(match[2]);
+    return width > 0 && height > 0 ? width / height : undefined;
+};
+/**
+ * The exact pixels an edited image comes out at: the Field's `width`, and the
+ * height its `ratio` derives. Undefined when either is missing or malformed —
+ * a Field without both has no ImageEditor.
+ */
+const outputSize = (ratio, width) => {
+    const aspect = parseRatio(ratio);
+    const pixels = Math.round(Number(width));
+    if (!aspect || !Number.isFinite(pixels) || pixels < 1)
+        return undefined;
+    return { width: pixels, height: Math.max(1, Math.round(pixels / aspect)) };
+};
+/** The largest box of this aspect that fits inside the image. */
+const coverCrop = (image, aspect) => image.width / image.height > aspect
+    ? { width: image.height * aspect, height: image.height }
+    : { width: image.width, height: image.width / aspect };
+const initialFraming = (image) => ({
+    cx: image.width / 2,
+    cy: image.height / 2,
+    zoom: MIN_ZOOM,
+});
+const clamp$1 = (value, min, max) => Math.min(max, Math.max(min, value));
+/**
+ * The framing pulled back inside the picture: zoom between the cover fit and
+ * MAX_ZOOM, and the centre far enough in that the box never shows past an edge.
+ */
+const clampFraming = (image, aspect, framing) => {
+    const zoom = clamp$1(framing.zoom, MIN_ZOOM, MAX_ZOOM);
+    const cover = coverCrop(image, aspect);
+    const halfW = cover.width / zoom / 2;
+    const halfH = cover.height / zoom / 2;
+    return {
+        zoom,
+        cx: clamp$1(framing.cx, halfW, image.width - halfW),
+        cy: clamp$1(framing.cy, halfH, image.height - halfH),
+    };
+};
+/** The part of the source the box holds, in source pixels. */
+const cropRect = (image, aspect, framing) => {
+    const { cx, cy, zoom } = clampFraming(image, aspect, framing);
+    const cover = coverCrop(image, aspect);
+    const width = cover.width / zoom;
+    const height = cover.height / zoom;
+    return { x: cx - width / 2, y: cy - height / 2, width, height };
+};
+/** `avatar.png` holding a WebP is `avatar.webp`. */
+const renameForType = (name, type) => {
+    const extension = type === 'image/jpeg' ? 'jpg' : type.split('/')[1] ?? 'bin';
+    const dot = name.lastIndexOf('.');
+    const base = dot > 0 ? name.slice(0, dot) : name;
+    return `${base}.${extension}`;
+};
+const createCanvas = (size) => {
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, Math.round(size.width));
+    canvas.height = Math.max(1, Math.round(size.height));
+    return canvas;
+};
+const smoothContext = (canvas) => {
+    const context = canvas.getContext('2d');
+    if (!context)
+        throw new Error('2d canvas unavailable');
+    context.imageSmoothingEnabled = true;
+    context.imageSmoothingQuality = 'high';
+    return context;
+};
+/**
+ * The crop drawn at exactly `output` pixels. A shrink past half is taken in
+ * halving steps — one pass that drops more than every other pixel aliases —
+ * and a grow is one smoothed pass.
+ */
+const drawFramed = (source, rect, output) => {
+    let from = source;
+    let area = rect;
+    while (area.width >= output.width * 2 &&
+        area.height >= output.height * 2) {
+        const step = createCanvas({
+            width: area.width / 2,
+            height: area.height / 2,
+        });
+        smoothContext(step).drawImage(from, area.x, area.y, area.width, area.height, 0, 0, step.width, step.height);
+        from = step;
+        area = { x: 0, y: 0, width: step.width, height: step.height };
+    }
+    const canvas = createCanvas(output);
+    smoothContext(canvas).drawImage(from, area.x, area.y, area.width, area.height, 0, 0, canvas.width, canvas.height);
+    return canvas;
+};
+const ENCODE_QUALITY = 0.9;
+const toBlob = (canvas, type) => new Promise((resolve) => canvas.toBlob(resolve, type, ENCODE_QUALITY));
+const hasTransparency = (canvas) => {
+    const { data } = smoothContext(canvas).getImageData(0, 0, canvas.width, canvas.height);
+    for (let i = 3; i < data.length; i += 4) {
+        if (data[i] < 255)
+            return true;
+    }
+    return false;
+};
+/**
+ * WebP, the smallest file at this quality. A browser that cannot encode WebP
+ * hands back a PNG under the WebP request without saying so, so the blob's own
+ * type is what is checked: then an opaque picture goes JPEG and one with
+ * transparency PNG, the smallest that keeps what it shows.
+ */
+const encodeFramed = async (canvas) => {
+    const webp = await toBlob(canvas, 'image/webp');
+    if (webp?.type === 'image/webp')
+        return webp;
+    const type = hasTransparency(canvas) ? 'image/png' : 'image/jpeg';
+    const fallback = await toBlob(canvas, type);
+    if (!fallback)
+        throw new Error('canvas encode failed');
+    return fallback;
+};
+
+const isTrue = (value) => value === true || value === 'true';
+class FileUploadInputComponent extends BaseInputComponent {
     config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
+    value = model();
     files = inject(FileService);
+    translate = inject(TranslateService);
     folderPickListener = inject(FOLDER_PICK_LISTENER, {
         optional: true,
     });
-    /** File name shown on the button after a file pick. */
-    pickedLabel = signal('', ...(ngDevMode ? [{ debugName: "pickedLabel" }] : /* istanbul ignore next */ []));
-    syncPickedLabel = effect(() => {
-        if (!this.value()) {
-            this.pickedLabel.set('');
-        }
-    }, ...(ngDevMode ? [{ debugName: "syncPickedLabel" }] : /* istanbul ignore next */ []));
+    modalStore = inject(MODAL_STORE_REF, { optional: true });
+    /**
+     * Names of what `readAs: text` read, and of a folder picked. The value holds
+     * the text or the folder's name, so the file names survive only here.
+     */
+    pickedNames = signal([], ...(ngDevMode ? [{ debugName: "pickedNames" }] : /* istanbul ignore next */ []));
+    rejections = signal([], ...(ngDevMode ? [{ debugName: "rejections" }] : /* istanbul ignore next */ []));
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    // A value emptied from outside — a FormReset, a model reseeded — takes the
+    // names read into it along, and the complaints about the last pick with them.
+    syncPickedNames = effect(() => {
+        if (this.isEmpty(this.value())) {
+            this.pickedNames.set([]);
+            this.rejections.set([]);
+        }
+    }, ...(ngDevMode ? [{ debugName: "syncPickedNames" }] : /* istanbul ignore next */ []));
     isFolderMode = computed(() => this.config()?.type === InputType.FOLDER ||
         this.config()?.mode === 'folder', ...(ngDevMode ? [{ debugName: "isFolderMode" }] : /* istanbul ignore next */ []));
+    isMultiple = computed(() => !this.isFolderMode() && isTrue(this.config()?.multiple), ...(ngDevMode ? [{ debugName: "isMultiple" }] : /* istanbul ignore next */ []));
+    hasDropZone = computed(() => !this.isFolderMode() && isTrue(this.config()?.dropZone), ...(ngDevMode ? [{ debugName: "hasDropZone" }] : /* istanbul ignore next */ []));
+    readsText = computed(() => this.config()?.readAs === 'text', ...(ngDevMode ? [{ debugName: "readsText" }] : /* istanbul ignore next */ []));
+    accept = computed(() => parseAccept(this.config()?.accept), ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    /**
+     * The pixels the ImageEditor frames to, or undefined when this Field has no
+     * ImageEditor: `editor` off, `ratio` or `width` missing, a text read or a
+     * folder — none of which hold a picture to frame.
+     */
+    editorSize = computed(() => {
+        const fieldConfig = this.config();
+        if (!isTrue(fieldConfig?.editor))
+            return undefined;
+        if (this.isFolderMode() || this.readsText())
+            return undefined;
+        return outputSize(fieldConfig?.ratio, fieldConfig?.width);
+    }, ...(ngDevMode ? [{ debugName: "editorSize" }] : /* istanbul ignore next */ []));
+    maxSize = computed(() => {
+        const size = Number(this.config()?.maxSize);
+        return Number.isFinite(size) && size > 0 ? size : undefined;
+    }, ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    isLocked = computed(() => {
+        const fieldConfig = this.config();
+        return (isTrue(this.disabled()) ||
+            isTrue(this.readonly()) ||
+            isTrue(fieldConfig?.disabled) ||
+            isTrue(fieldConfig?.readonly));
+    }, ...(ngDevMode ? [{ debugName: "isLocked" }] : /* istanbul ignore next */ []));
+    /** Object URLs of the previews on show, keyed by what the value holds. */
+    previews = new Map();
+    heldFiles = computed(() => {
+        const value = this.value();
+        if (this.readsText()) {
+            const texts = Array.isArray(value) ? value : [value];
+            return this.pickedNames().map((name, index) => {
+                const text = texts[index];
+                // Only an SVG's text is still an image; any other read is not.
+                const preview = typeof text === 'string' && fileExtension(name) === 'svg'
+                    ? this.previewFor(text, () => new Blob([text], { type: 'image/svg+xml' }))
+                    : undefined;
+                return this.toHeld(name, text, preview);
+            });
+        }
+        const list = Array.isArray(value) ? value : value ? [value] : [];
+        return list
+            .filter((item) => item instanceof File)
+            .map((file) => this.toHeld(file.name, file, file.type.startsWith('image/')
+            ? this.previewFor(file, () => file)
+            : undefined));
+    }, ...(ngDevMode ? [{ debugName: "heldFiles" }] : /* istanbul ignore next */ []));
+    // A preview outlives its file only until the file leaves the value.
+    releasePreviews = effect(() => {
+        const held = new Set(this.heldFiles().map((file) => file.source));
+        for (const [source, url] of this.previews) {
+            if (held.has(source))
+                continue;
+            URL.revokeObjectURL(url);
+            this.previews.delete(source);
+        }
+    }, ...(ngDevMode ? [{ debugName: "releasePreviews" }] : /* istanbul ignore next */ []));
+    releaseAllPreviews = inject(DestroyRef).onDestroy(() => {
+        this.previews.forEach((url) => URL.revokeObjectURL(url));
+        this.previews.clear();
+    });
+    /** A `file` Field has no placeholder: it names the types it takes instead. */
+    acceptLabel = computed(() => formatAccept(this.accept()), ...(ngDevMode ? [{ debugName: "acceptLabel" }] : /* istanbul ignore next */ []));
+    dropPlaceholder = computed(() => this.acceptLabel() || this.translate.translate('drop-files-or-click'), ...(ngDevMode ? [{ debugName: "dropPlaceholder" }] : /* istanbul ignore next */ []));
+    removeButton = computed(() => ({
+        label: 'remove-file',
+        icon: 'x',
+        iconOnly: true,
+        variant: 'ghost',
+        one: true,
+        type: 'button',
+        disabled: this.isLocked(),
+    }), ...(ngDevMode ? [{ debugName: "removeButton" }] : /* istanbul ignore next */ []));
+    rejectionMessages = computed(() => {
+        const max = formatFileSize(this.maxSize() ?? 0);
+        return this.rejections().map((rejection) => {
+            if (rejection.reason === 'size') {
+                return {
+                    key: 'file-too-large',
+                    params: { name: rejection.name, max },
+                };
+            }
+            if (rejection.reason === 'unreadable') {
+                return { key: 'image-not-readable', params: { name: rejection.name } };
+            }
+            return { key: 'file-type-not-allowed', params: { name: rejection.name } };
+        });
+    }, ...(ngDevMode ? [{ debugName: "rejectionMessages" }] : /* istanbul ignore next */ []));
     buttonConfig = computed(() => {
         const fieldConfig = this.config();
         if (this.isFolderMode()) {
-            const folderPath = this.value()?.trim() ?? '';
+            const value = this.value();
+            const folderPath = typeof value === 'string' ? value.trim() : '';
             const hasFolderSelection = !!folderPath;
             const placeholder = fieldConfig?.placeholder ?? 'select-folder';
             return {
@@ -22155,71 +22710,246 @@ class FileUploadInputComponent extends BaseTextInputComponent {
                 type: 'button',
                 icon: hasFolderSelection ? undefined : fieldConfig?.icon ?? 'folder',
                 fullWidth: hasFolderSelection,
-                disabled: this.disabled() === true ||
-                    this.disabled() + '' === 'true' ||
-                    fieldConfig?.disabled === true ||
-                    fieldConfig?.disabled + '' === 'true' ||
+                disabled: isTrue(this.disabled()) ||
+                    isTrue(fieldConfig?.disabled) ||
                     !this.files.folderPickSupported(),
             };
         }
-        const label = this.pickedLabel();
-        const hasFileSelection = !!this.value()?.trim();
+        // What is picked is drawn beneath the button as tiles, so the button keeps
+        // naming the types it takes.
+        const value = this.value();
+        const fallbackLabel = !this.isMultiple() &&
+            !this.heldFiles().length &&
+            typeof value === 'string' &&
+            value.trim()
+            ? value
+            : '';
+        const label = fallbackLabel || this.acceptLabel();
         return {
-            label: label || (hasFileSelection ? this.value() : fieldConfig?.placeholder),
-            noTranslate: !!label || hasFileSelection,
+            label: label || 'choose-file',
+            noTranslate: !!label,
             variant: 'secondary',
             one: true,
             // In-Field trigger, not the form's submit — otherwise it greys out
             // whenever the form is invalid.
             type: 'button',
-            icon: label || hasFileSelection ? undefined : fieldConfig?.icon ?? 'upload',
+            icon: label ? undefined : fieldConfig?.icon ?? 'upload',
             fullWidth: true,
-            disabled: this.disabled() === true ||
-                this.disabled() + '' === 'true' ||
-                fieldConfig?.disabled === true ||
-                fieldConfig?.disabled + '' === 'true',
+            disabled: isTrue(this.disabled()) || isTrue(fieldConfig?.disabled),
         };
     }, ...(ngDevMode ? [{ debugName: "buttonConfig" }] : /* istanbul ignore next */ []));
     openPicker = () => {
-        const fieldConfig = this.config();
-        const isDisabled = this.disabled() === true ||
-            this.disabled() + '' === 'true' ||
-            fieldConfig?.disabled === true ||
-            fieldConfig?.disabled + '' === 'true';
-        const isReadonly = this.readonly() === true ||
-            this.readonly() + '' === 'true' ||
-            fieldConfig?.readonly === true ||
-            fieldConfig?.readonly + '' === 'true';
-        if (isDisabled || isReadonly)
+        if (this.isLocked())
             return;
         if (this.isFolderMode()) {
             void this.pickFolder();
             return;
         }
-        void this.pickFile();
+        void this.pickFiles();
     };
-    pickFile = async () => {
-        const fieldConfig = this.config();
+    onSpace = (event) => {
+        event.preventDefault();
+        this.openPicker();
+    };
+    onDragOver = (event) => {
+        event.preventDefault();
+        if (this.isLocked())
+            return;
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'copy';
+        this.isDragging.set(true);
+    };
+    onDrop = (event) => {
+        event.preventDefault();
+        this.isDragging.set(false);
+        if (this.isLocked())
+            return;
+        const dropped = Array.from(event.dataTransfer?.files ?? []);
+        // One file for a single Field: the first dropped, the rest ignored, the way
+        // the picker itself would have refused a second selection.
+        void this.take(this.isMultiple() ? dropped : dropped.slice(0, 1));
+    };
+    removeAt = (index, event) => {
+        // Inside the DropZone the removal would otherwise also open the picker.
+        event.stopPropagation();
+        if (this.isLocked())
+            return;
+        this.rejections.set([]);
+        const value = this.value();
+        if (this.isMultiple() && Array.isArray(value)) {
+            const next = [...value];
+            next.splice(index, 1);
+            this.pickedNames.update((names) => names.filter((_, i) => i !== index));
+            this.setValue(next);
+            return;
+        }
+        this.pickedNames.set([]);
+        this.setValue(undefined);
+    };
+    pickFiles = async () => {
         const { files } = await this.files.getFiles({
-            accept: fieldConfig?.accept,
+            accept: this.accept(),
+            multiple: this.isMultiple(),
         });
-        const file = files[0];
-        if (!file)
+        await this.take(files);
+    };
+    take = async (incoming) => {
+        if (!incoming.length)
             return;
-        const text = await file.text();
-        this.pickedLabel.set(file.name);
-        this.setValue(text);
+        const { accepted, rejected } = await this.screen(incoming);
+        this.rejections.set(rejected);
+        if (!accepted.length) {
+            this.touched.set(true);
+            return;
+        }
+        if (this.readsText()) {
+            const texts = await Promise.all(accepted.map((file) => file.text()));
+            const names = accepted.map((file) => file.name);
+            if (this.isMultiple()) {
+                const current = this.value();
+                this.pickedNames.update((held) => [...held, ...names]);
+                const held = Array.isArray(current) ? current : [];
+                this.setValue([...held, ...texts]);
+            }
+            else {
+                this.pickedNames.set(names.slice(0, 1));
+                this.setValue(texts[0]);
+            }
+            return;
+        }
+        if (this.isMultiple()) {
+            const current = this.value();
+            const held = Array.isArray(current)
+                ? current.filter((item) => item instanceof File)
+                : [];
+            this.setValue(mergeFiles(held, accepted));
+        }
+        else {
+            this.setValue(accepted[0]);
+        }
+    };
+    /**
+     * The files this Field keeps. Without an ImageEditor, `accept` and `maxSize`
+     * in one pass. With one, each raster image is framed first and the size limit
+     * judged on what the framing produced, since that is what gets uploaded.
+     */
+    screen = async (incoming) => {
+        const size = this.editorSize();
+        if (!size || !this.modalStore) {
+            return screenFiles(incoming, this.accept(), this.maxSize());
+        }
+        const typed = screenFiles(incoming, this.accept(), undefined);
+        const edited = [];
+        const rejected = [...typed.rejected];
+        // One ImageEditor at a time, in pick order. A cancel drops that image only.
+        for (const file of typed.accepted) {
+            if (!isEditableImage(file)) {
+                edited.push(file);
+                continue;
+            }
+            const result = await this.openEditor(file, size);
+            if (result?.file)
+                edited.push(result.file);
+            else if (result?.unreadable) {
+                rejected.push({ name: file.name, reason: 'unreadable' });
+            }
+        }
+        const sized = screenFiles(edited, [], this.maxSize());
+        return {
+            accepted: sized.accepted,
+            rejected: [...rejected, ...sized.rejected],
+        };
+    };
+    openEditor = async (file, size) => {
+        const modalStore = this.modalStore;
+        if (!modalStore)
+            return undefined;
+        const { ImageEditorComponent } = await import('./magmonium-one-image-editor-aBl2dVEc.mjs');
+        const ratio = String(this.config()?.ratio ?? '');
+        return new Promise((resolve) => {
+            const modalRef = new ModalRef();
+            const modalId = modalStore.open({
+                component: ImageEditorComponent,
+                providers: [{ provide: MODAL_REF, useValue: modalRef }],
+                bindings: [
+                    inputBinding('file', () => file),
+                    inputBinding('ratio', () => ratio),
+                    inputBinding('width', () => size.width),
+                ],
+                // Wider than a confirm's default 440px, so the stage is big enough to
+                // frame in; the editor fills whatever width the modal gives it.
+                config: { maxWidth: '560px' },
+            });
+            modalRef.onClose((result) => {
+                resolve(result);
+                modalStore.close(modalId);
+            });
+        });
     };
     pickFolder = async () => {
         const picked = await this.files.pickFolder();
         if (!picked)
             return;
-        this.pickedLabel.set(picked.name);
+        this.pickedNames.set([picked.name]);
         this.setValue(picked.name);
         this.folderPickListener?.(picked.handle, picked.name);
     };
+    previewFor = (source, blob) => {
+        if (typeof URL.createObjectURL !== 'function')
+            return undefined;
+        let url = this.previews.get(source);
+        if (!url) {
+            url = URL.createObjectURL(blob());
+            this.previews.set(source, url);
+        }
+        return url;
+    };
+    toHeld = (name, source, preview) => ({
+        name,
+        source,
+        kind: fileExtension(name).toUpperCase() || 'FILE',
+        icon: fileIcon(name),
+        preview,
+    });
+    setValue = (value) => {
+        this.value.set(value);
+        this.touched.set(true);
+    };
+    isEmpty = (value) => value === undefined ||
+        value === null ||
+        value === '' ||
+        (Array.isArray(value) && value.length === 0);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileUploadInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FileUploadInputComponent, isStandalone: true, selector: "m-file-upload-input", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FileUploadInputComponent, isStandalone: true, selector: "m-file-upload-input", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: `
+    <ng-template #fileList>
+      <ul class="file-tiles" [class.file-tiles--below]="!hasDropZone()">
+        @for (held of heldFiles(); track $index) {
+          <li class="file-tile" [attr.title]="held.name">
+            <div class="file-tile__box">
+              @if (held.preview) {
+                <img
+                  class="file-tile__preview"
+                  [src]="held.preview"
+                  [alt]="held.name"
+                />
+              } @else {
+                <div class="file-tile__type">
+                  <m-icon [name]="held.icon" color="mm" [one]="true" />
+                  <span class="file-tile__kind">{{ held.kind }}</span>
+                </div>
+              }
+              <span class="file-tile__remove">
+                <m-button
+                  [config]="removeButton()"
+                  (click)="removeAt($index, $event)"
+                />
+              </span>
+            </div>
+            <span class="file-tile__name">{{ held.name }}</span>
+          </li>
+        }
+      </ul>
+    </ng-template>
     @if (config(); as fieldConfig) {
       @if (fieldConfig.label) {
         <m-label
@@ -22229,7 +22959,49 @@ class FileUploadInputComponent extends BaseTextInputComponent {
           [disabled]="disabled()"
         />
       }
-      <m-button (click)="openPicker()" [config]="buttonConfig()" />
+      @if (hasDropZone()) {
+        <div
+          class="drop-zone"
+          role="button"
+          [attr.tabindex]="isLocked() ? -1 : 0"
+          [attr.aria-disabled]="isLocked()"
+          [class.drop-zone--dragging]="isDragging()"
+          [class.drop-zone--locked]="isLocked()"
+          [class.error]="showErrors() || rejections().length > 0"
+          (click)="openPicker()"
+          (keydown.enter)="openPicker()"
+          (keydown.space)="onSpace($event)"
+          (dragover)="onDragOver($event)"
+          (dragleave)="isDragging.set(false)"
+          (drop)="onDrop($event)"
+        >
+          @if (heldFiles().length) {
+            <ng-container *ngTemplateOutlet="fileList" />
+          } @else {
+            <div class="drop-zone__empty">
+              <m-icon
+                [name]="fieldConfig.icon ?? 'upload'"
+                color="mm"
+                [one]="true"
+              />
+              <span>{{ dropPlaceholder() }}</span>
+            </div>
+          }
+        </div>
+      } @else {
+        <m-button (click)="openPicker()" [config]="buttonConfig()" />
+        @if (heldFiles().length) {
+          <ng-container *ngTemplateOutlet="fileList" />
+        }
+      }
+      @for (rejection of rejectionMessages(); track $index) {
+        <m-text-output
+          variant="footer"
+          color="error"
+          [label]="rejection.key"
+          [params]="rejection.params"
+        />
+      }
       @if (showErrors()) {
         @for (error of errors(); track $index) {
           <m-text-output
@@ -22240,11 +23012,40 @@ class FileUploadInputComponent extends BaseTextInputComponent {
         }
       }
     }
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "params", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "fontWeight", "label", "noTranslate", "params"], outputs: ["configChange", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block}.drop-zone{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.drop-zone:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.drop-zone:disabled{opacity:.6;cursor:not-allowed}.drop-zone{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.drop-zone:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.drop-zone:focus-visible:not(:disabled),.drop-zone:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, color-mix(in srgb, var(--m-focus) 45%, transparent));box-shadow:var(--m-text-input-shadow, none)}.drop-zone:has(.error){border-color:var(--m-error);box-shadow:none}.drop-zone:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.drop-zone input,.drop-zone textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.drop-zone input:focus,.drop-zone textarea:focus{border-color:transparent;box-shadow:none}.drop-zone{flex-direction:column;align-items:stretch;justify-content:center;width:100%;height:auto;min-height:calc(var(--m-textarea-input-height, 4.5em) + 1.5em);padding:.75em;border-style:dashed;cursor:pointer}.drop-zone--dragging{border-color:var(--m-focus);background:var(--m-focus-bg)}.drop-zone--locked{cursor:not-allowed;opacity:.6}.drop-zone.error{border-color:var(--m-error)}.drop-zone__empty{display:flex;flex-direction:column;align-items:center;gap:.5em;color:var(--m-mm);text-align:center}.file-tiles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.75em}.file-tiles--below{margin-top:.75em}.file-tile{--m-file-tile-size: 150px;display:flex;flex-direction:column;gap:.25em;width:var(--m-file-tile-size);max-width:100%}.file-tile__box{position:relative;width:100%;aspect-ratio:1;border:1px solid var(--m-border);border-radius:var(--m-input-radius, 4px);background:var(--m-background-lite);overflow:hidden}.file-tile__preview{display:block;width:100%;height:100%;object-fit:cover}.file-tile__type{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;height:100%;color:var(--m-mm);--m-icon-size: 2.5em}.file-tile__kind{font-weight:600;letter-spacing:.05em}.file-tile__remove{position:absolute;top:.25em;right:.25em;display:flex;border-radius:50%;background:var(--m-background)}.file-tile__name{text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7em;color:var(--m-text)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "params", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "fontWeight", "label", "noTranslate", "params"], outputs: ["configChange", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileUploadInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'm-file-upload-input', template: `
+    <ng-template #fileList>
+      <ul class="file-tiles" [class.file-tiles--below]="!hasDropZone()">
+        @for (held of heldFiles(); track $index) {
+          <li class="file-tile" [attr.title]="held.name">
+            <div class="file-tile__box">
+              @if (held.preview) {
+                <img
+                  class="file-tile__preview"
+                  [src]="held.preview"
+                  [alt]="held.name"
+                />
+              } @else {
+                <div class="file-tile__type">
+                  <m-icon [name]="held.icon" color="mm" [one]="true" />
+                  <span class="file-tile__kind">{{ held.kind }}</span>
+                </div>
+              }
+              <span class="file-tile__remove">
+                <m-button
+                  [config]="removeButton()"
+                  (click)="removeAt($index, $event)"
+                />
+              </span>
+            </div>
+            <span class="file-tile__name">{{ held.name }}</span>
+          </li>
+        }
+      </ul>
+    </ng-template>
     @if (config(); as fieldConfig) {
       @if (fieldConfig.label) {
         <m-label
@@ -22254,7 +23055,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           [disabled]="disabled()"
         />
       }
-      <m-button (click)="openPicker()" [config]="buttonConfig()" />
+      @if (hasDropZone()) {
+        <div
+          class="drop-zone"
+          role="button"
+          [attr.tabindex]="isLocked() ? -1 : 0"
+          [attr.aria-disabled]="isLocked()"
+          [class.drop-zone--dragging]="isDragging()"
+          [class.drop-zone--locked]="isLocked()"
+          [class.error]="showErrors() || rejections().length > 0"
+          (click)="openPicker()"
+          (keydown.enter)="openPicker()"
+          (keydown.space)="onSpace($event)"
+          (dragover)="onDragOver($event)"
+          (dragleave)="isDragging.set(false)"
+          (drop)="onDrop($event)"
+        >
+          @if (heldFiles().length) {
+            <ng-container *ngTemplateOutlet="fileList" />
+          } @else {
+            <div class="drop-zone__empty">
+              <m-icon
+                [name]="fieldConfig.icon ?? 'upload'"
+                color="mm"
+                [one]="true"
+              />
+              <span>{{ dropPlaceholder() }}</span>
+            </div>
+          }
+        </div>
+      } @else {
+        <m-button (click)="openPicker()" [config]="buttonConfig()" />
+        @if (heldFiles().length) {
+          <ng-container *ngTemplateOutlet="fileList" />
+        }
+      }
+      @for (rejection of rejectionMessages(); track $index) {
+        <m-text-output
+          variant="footer"
+          color="error"
+          [label]="rejection.key"
+          [params]="rejection.params"
+        />
+      }
       @if (showErrors()) {
         @for (error of errors(); track $index) {
           <m-text-output
@@ -22265,8 +23108,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }
       }
     }
-  `, imports: [ButtonComponent, LabelComponent, TextOutputComponent], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
-        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
+  `, imports: [
+                        NgTemplateOutlet,
+                        ButtonComponent,
+                        IconComponent,
+                        LabelComponent,
+                        TextOutputComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block}.drop-zone{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.drop-zone:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.drop-zone:disabled{opacity:.6;cursor:not-allowed}.drop-zone{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.drop-zone:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.drop-zone:focus-visible:not(:disabled),.drop-zone:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, color-mix(in srgb, var(--m-focus) 45%, transparent));box-shadow:var(--m-text-input-shadow, none)}.drop-zone:has(.error){border-color:var(--m-error);box-shadow:none}.drop-zone:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.drop-zone input,.drop-zone textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.drop-zone input:focus,.drop-zone textarea:focus{border-color:transparent;box-shadow:none}.drop-zone{flex-direction:column;align-items:stretch;justify-content:center;width:100%;height:auto;min-height:calc(var(--m-textarea-input-height, 4.5em) + 1.5em);padding:.75em;border-style:dashed;cursor:pointer}.drop-zone--dragging{border-color:var(--m-focus);background:var(--m-focus-bg)}.drop-zone--locked{cursor:not-allowed;opacity:.6}.drop-zone.error{border-color:var(--m-error)}.drop-zone__empty{display:flex;flex-direction:column;align-items:center;gap:.5em;color:var(--m-mm);text-align:center}.file-tiles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.75em}.file-tiles--below{margin-top:.75em}.file-tile{--m-file-tile-size: 150px;display:flex;flex-direction:column;gap:.25em;width:var(--m-file-tile-size);max-width:100%}.file-tile__box{position:relative;width:100%;aspect-ratio:1;border:1px solid var(--m-border);border-radius:var(--m-input-radius, 4px);background:var(--m-background-lite);overflow:hidden}.file-tile__preview{display:block;width:100%;height:100%;object-fit:cover}.file-tile__type{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;height:100%;color:var(--m-mm);--m-icon-size: 2.5em}.file-tile__kind{font-weight:600;letter-spacing:.05em}.file-tile__remove{position:absolute;top:.25em;right:.25em;display:flex;border-radius:50%;background:var(--m-background)}.file-tile__name{text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7em;color:var(--m-text)}\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 var fileUploadInput = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -29646,6 +30495,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['click', ['$event']]
             }] } });
 
+/**
+ * The route half of a [NavVisibilityRule] (m-one-ui CONTEXT.md). One guard for
+ * the whole tree rather than one per rule: every emitted route already carries
+ * `data: { navId }` (libs/one ADR 0014), and a NavId *is* its ancestry, so the
+ * guard walks up from the route it was stamped on and asks every ancestor's
+ * registration in turn.
+ *
+ * That ancestry walk is why the cascade works at all. Routes are emitted flat
+ * until a Screen draws a RouterOutletControl, so a child Nav is routinely a
+ * *sibling* route rather than a nested one — a `canActivate` on the parent
+ * entry would guard nothing below it. Walking the id covers both shapes with
+ * one stamp and no knowledge of which one the emitter chose.
+ *
+ * It **waits** where the menu hides. `navVisible` answering `undefined` means
+ * the state the gate reads has not arrived, and a Router can hold a navigation
+ * where a panel cannot hold a render: refusing on `undefined` would bounce
+ * every cold deep link into a guarded page, which is the whole case the gate's
+ * arguments are resolved before it is called for.
+ *
+ * It also **fires the loads itself, and waits for them** before it asks any
+ * gate. The nav store fires them too, but a deep link is precisely the
+ * navigation that happens before any panel has drawn — the store's own effect
+ * has not run for this address yet, and waiting for it would be waiting for the
+ * thing the wait is supposed to end. A load answers a promise that settles when
+ * its request is done, and a gate is only asked after every one has: a gate
+ * reading a map that already holds *other* keys answers `false`, not
+ * `undefined`, and believing it before the load landed would bounce a
+ * reachable page. A CacheMethod shares one in-flight request per argument set,
+ * so the two firings cost one request between them.
+ *
+ * And it **awaits** where the menu remembers. A gate may be `async` — an
+ * entitlement is routinely a call the client has to make — and awaiting it is
+ * the plainest thing a `canActivate` does. The panel cannot: it has already
+ * rendered, so the nav store settles the same promise once and keeps the
+ * answer.
+ */
+/**
+ * Every path parameter on the chain being activated, deepest last — the same
+ * merge `NavStore` does on a finished navigation, redone here because the
+ * guard runs *before* that. Two dynamic Navs on one path each contribute their
+ * own (`:id/:issueId`), and only the chain holds both.
+ */
+const paramsOf = (root) => {
+    const params = {};
+    for (let r = root; r; r = r.firstChild) {
+        for (const [key, value] of Object.entries(r.params ?? {})) {
+            if (typeof value === 'string')
+                params[key] = value;
+        }
+    }
+    return params;
+};
+/**
+ * The NavId this route was stamped with, read off the deepest entry that
+ * carries one. `data` inherits down the chain, so a child route in a Screen's
+ * own router file reads its own stamp and not its host's.
+ */
+const navIdOf = (route) => {
+    const stamped = route.data?.['navId'];
+    return typeof stamped === 'string' && stamped ? stamped : undefined;
+};
+/**
+ * Last-wins across the multi-provided maps, matching how `NavStore` resolves a
+ * registration: the library provides its Platform panels first so an app
+ * registering at the same NavId replaces them (ADR 0016).
+ */
+const entryAt = (maps, navId) => {
+    for (let i = maps.length - 1; i >= 0; i--) {
+        const entry = maps[i]()[navId];
+        if (entry !== undefined)
+            return entry;
+    }
+    return undefined;
+};
+const navVisibilityGuard = (route, state) => {
+    const router = inject(Router);
+    // Multi-provided, so the injected value is the array of maps and not one —
+    // the same cast `NavStore` makes, and last-wins for the same reason: the
+    // library provides its Platform panels first (ADR 0016).
+    const maps = inject(NAV_WIDGET_MAP, {
+        optional: true,
+    }) ?? [];
+    const navId = navIdOf(route);
+    if (!navId)
+        return of(true);
+    const params = paramsOf(state.root);
+    /**
+     * Every gate at or above, and its load. Read once and untracked: firing a
+     * store method inside the `computed` below would write state during a read,
+     * and the loads are about *starting* the fetch rather than about what the
+     * gates then say.
+     */
+    const gates = navIdChain(navId).flatMap((id) => {
+        const entry = entryAt(maps, id);
+        return entry && isNavVisibilityConfig(entry) ? [entry] : [];
+    });
+    // Fired together, awaited together: the loads are independent. A load that
+    // throws or rejects ends its wait rather than the navigation — the gate is
+    // still asked, and decides on whatever state there is.
+    const loads = gates.flatMap((gate) => {
+        try {
+            const started = gate.navVisibleLoad?.(params);
+            return isThenable(started)
+                ? [Promise.resolve(started).catch(() => undefined)]
+                : [];
+        }
+        catch {
+            return [];
+        }
+    });
+    /**
+     * Every rule at or above this route, as one answer. `false` the moment any
+     * ancestor refuses — a subtree is unreachable when its root is — and
+     * `undefined` while any of them is still unresolved, so the wait below is a
+     * wait for *all* of them rather than for the first one that happened to
+     * answer.
+     */
+    const verdict = computed(() => {
+        let unresolved = false;
+        const asked = [];
+        for (const gate of gates) {
+            const answer = gate.navVisible(params);
+            // A synchronous `false` settles it whatever the rest say, and without
+            // firing the requests the asynchronous ones would have made.
+            if (answer === false)
+                return false;
+            if (answer === undefined)
+                unresolved = true;
+            else if (isPromise(answer))
+                asked.push(answer);
+        }
+        // Still missing an argument: say nothing yet, so the wait below holds
+        // rather than the gate reading an absent value as a refusal.
+        if (unresolved)
+            return undefined;
+        if (!asked.length)
+            return true;
+        // Every gate at or above has to say yes, so the whole chain is one promise
+        // — and `all` rather than a loop of awaits, the requests being independent.
+        return Promise.all(asked).then((answers) => answers.every((answer) => answer === true));
+    }, ...(ngDevMode ? [{ debugName: "verdict" }] : /* istanbul ignore next */ []));
+    // Created here, in the guard's injection context — `toObservable` cannot be
+    // called from inside the pipe below.
+    const verdict$ = toObservable(verdict);
+    // No load to wait on asks the gate at once, as before any load could answer.
+    const loaded$ = loads.length
+        ? from(Promise.all(loads))
+        : of(undefined);
+    return loaded$.pipe(
+    // Asked fresh once the loads are done, not replayed: the observable's last
+    // value may predate the landing it was waiting for. Still `undefined` means
+    // an argument has not arrived yet, so hold for the next change.
+    switchMap$1(() => verdict$.pipe(startWith(undefined))), map(() => verdict()), filter((answer) => answer !== undefined), take(1), switchMap$1((answer) => (isPromise(answer) ? from(answer) : of(answer))), 
+    // A gate that threw is a gate that did not say yes — closed rather than
+    // open, the direction the nav store's own resolution takes and for the same
+    // reason.
+    catchError(() => of(false)), 
+    // The landing is the one address always guaranteed to exist: the nearest
+    // visible ancestor is routinely a grouping Nav that emits no route at all,
+    // and staying put strands a cold deep link on nothing (CONTEXT.md
+    // NavVisibilitySource).
+    map((allowed) => allowed || router.createUrlTree(['/'])));
+};
+const isThenable = (value) => typeof value?.then === 'function';
+const isPromise = (value) => typeof value?.then === 'function';
+
 class NavTrailComponent {
     config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     Size = Size;
@@ -35546,5 +36561,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_FILTER_RANGE_MODE as $, ACCESS_DOMAINS as A, BaseInputComponent as B, COMPONENT_INPUT_REGISTRY as C, CardComponent as D, CardWrapperComponent as E, CarouselComponent as F, ChartComponent as G, ChatBubbleComponent as H, IS_DESIGN_MODE as I, CheckboxInputComponent as J, ClearableInputComponent as K, LabelComponent as L, ColComponent as M, ColorPickerInputComponent as N, CommentItemComponent as O, CommentsApiService as P, CommentsComponent as Q, CommentsStore as R, CompactNumberPipe as S, TranslatePipe as T, ComponentInputComponent as U, ComponentStepperComponent as V, ConfigComponent as W, ConfirmComponent as X, ContextMenuComponent as Y, CustomIconClass as Z, CustomIconEditComponent as _, BaseTextInputComponent as a, MoneyPipe as a$, DEFAULT_FILTER_VARIANT as a0, DEFAULT_NAV_PARAM as a1, DEFAULT_NAV_SEGMENT as a2, DEFAULT_SIZE as a3, DashboardCardComponent as a4, DateInputComponent as a5, DatePickerComponent as a6, DeviceService as a7, DomService as a8, Domain as a9, IconComponent as aA, ImgComponent as aB, InputType as aC, InstrumentScoreComponent as aD, InterceptorObservables as aE, JumbotronComponent as aF, KeyValueComponent as aG, LAYOUT_ASSET_FOLDER as aH, LOGIN_COMPONENT as aI, LOGIN_STORE as aJ, LanguageComponent as aK, ListComponent as aL, LogoComponent as aM, MAG_SOCKET_EVENT as aN, MHeroColorDirective as aO, MHeroComponent as aP, MODAL_REF as aQ, MODAL_STORE_REF as aR, MRefDirective as aS, MStepComponent as aT, MURL_PARAM as aU, MURL_SEP as aV, ManifestEnrichmentService as aW, MenuComponent as aX, ModalDirective as aY, ModalRef as aZ, ModalStore as a_, DotGridComponent as aa, DragListDirective as ab, DragListItemDirective as ac, DraggableDirective as ad, DropdownInputComponent as ae, FILTER_GROUP_CONTEXT as af, FILTER_RANGE_MODES as ag, FILTER_VARIANTS as ah, FLEX_VARIANTS as ai, FOLDER_PICK_LISTENER as aj, FORM_ASSET_FOLDER as ak, FileService as al, FileUploadDirective as am, FileUploadInputComponent as an, FlexComponent as ao, FlexItemComponent as ap, FormGroupComponent as aq, FrameComponent as ar, FreezeService as as, GRID_BREAKPOINTS as at, GetNavService as au, HeaderComponent$1 as av, HighlightDirective as aw, HttpService as ax, ICON_SOURCE as ay, IS_SIDE_PANEL as az, TextOutputComponent as b, SearchUserPanelComponent as b$, MultiRangeInputComponent as b0, MurlUrlSerializer as b1, NAV_DEFAULT_MURL as b2, NAV_ID_SEP as b3, NAV_MAIN_BUTTONS as b4, NAV_SEGMENT_RE as b5, NAV_STORE_REF as b6, NAV_WC_COMPONENTS as b7, NAV_WIDGET_MAP as b8, NavComponent as b9, PanelComponent as bA, PercentagePipe as bB, PlaygroundComponent as bC, PositionDirective as bD, PwaInstallComponent as bE, ROOT_NAV$1 as bF, RadioGroupComponent as bG, RadioInputComponent as bH, RangeInputComponent as bI, RatingInputComponent as bJ, ReactiveElementComponent as bK, RemoteComponent as bL, RemoteLoaderService as bM, ResizeElementComponent as bN, RouteContainer as bO, RowComponent as bP, SEARCH_QUERY as bQ, SEARCH_RESULTS_EVENT as bR, SECTION_ACCORDION_GROUP as bS, SECTION_FORM_CONTEXT as bT, SHARED_ICONS as bU, SIZE_CONTEXT as bV, ScoreComponent as bW, ScrollComponent as bX, ScrollService as bY, SearchPanelComponent as bZ, SearchStore as b_, NavDetailsComponent as ba, NavHeaderComponent as bb, NavMenuComponent as bc, NavStore as bd, NavTrailComponent as be, NothingComponent as bf, NotificationElementComponent as bg, NotificationGroupComponent as bh, NotificationPopupComponent as bi, NotificationService as bj, NotificationStore as bk, NotificationType as bl, NotificationWidgetComponent as bm, ONE_ASSET_BASE_URL as bn, OPTIONS_SOURCE as bo, OVERLAY_WIDGETS as bp, OneApp as bq, OptionsSourceDirective as br, OverlayBodyComponent as bs, OverlayRef as bt, OverlayService as bu, PLATFORM_BUTTON_NAV_IDS as bv, PLATFORM_EXTENSIBLE_NAV_IDS as bw, PLATFORM_NAV_MAP as bx, PLATFORM_ROOT_CHILDREN as by, PaginationComponent as bz, ButtonComponent as c, TreeGridComponent as c$, SectionAccordionDirective as c0, SectionAccordionGroupDirective as c1, SectionBackComponent as c2, SectionBadgesComponent as c3, SectionButtonGroupComponent as c4, SectionCardComponent as c5, SectionCarouselComponent as c6, SectionComponent as c7, SectionFilterComponent as c8, SectionFilterGroupComponent as c9, StepperComponent as cA, StepsComponent as cB, StorageService as cC, StrokeLinecap as cD, StrokeLinejoin as cE, SummaryComponent as cF, SvgGeneratorComponent as cG, SvgGeneratorService as cH, SvgService as cI, TOTAL_COLUMNS as cJ, TRANSLATION_SOURCE as cK, TableComponent as cL, TechnicalMeterComponent as cM, TextInputComponent as cN, TextareaInputComponent as cO, ThemeComponent as cP, ThemeDataService as cQ, ThemeService as cR, ThemeStore as cS, TimeAgoPipe as cT, TimelineComponent as cU, ToggleButtonComponent as cV, ToggleInputComponent as cW, ToggleRadioInputComponent as cX, ToolTipDirective as cY, TooltipComponent as cZ, TranslateService as c_, SectionFilterMenuComponent as ca, SectionFilterPanelComponent as cb, SectionFilterRangePanelComponent as cc, SectionFooterComponent as cd, SectionFormComponent as ce, SectionFormItemComponent as cf, SectionHeaderComponent as cg, SectionHeroComponent as ch, SectionPaginationComponent as ci, SectionSearchComponent as cj, SectionStepperComponent as ck, SectionTabsComponent as cl, SectionToggleComponent as cm, SectionToggleItemDirective as cn, SelectableCardInputComponent as co, SelectorDirective as cp, SettingsSearchBarComponent as cq, SettingsSearchService as cr, ShapeComponent as cs, SharedStoreRegistry as ct, SidePanelDirective as cu, Size as cv, SocketStore as cw, SortComponent as cx, StatComponent as cy, StepComponent as cz, APP_CONTEXT_REF as d, getScrollParent as d$, URL_SEP as d0, USER_STORE_REF as d1, USER_TAB_MAP as d2, UniverseComponent as d3, UserApiService as d4, UserAvatarComponent as d5, UserComponent as d6, UserNavComponent as d7, UserSettingsComponent as d8, UserStore as d9, deriveContrastColor as dA, deriveOppositeColor as dB, derivePropertyName as dC, emailValidation as dD, evaluate as dE, evaluateBool as dF, filterHoldsList as dG, filterHoldsOneBound as dH, filterHoldsOptions as dI, filterHoldsRange as dJ, filterList as dK, filterNumber as dL, filterNumberList as dM, filterOne as dN, filterPanelOf as dO, filterPanelWidth as dP, filterRange as dQ, filterTreeGridRows as dR, filterValueList as dS, filterValues as dT, flattenTreeGridRows as dU, formatBadgeCount as dV, fullName as dW, generateClipPath as dX, generateTransform as dY, getClassList as dZ, getProperty as d_, WC_ROUTE_CHANGED_EVENT as da, WC_SEARCH_GROUPS as db, WIN_USER_TAB_HOOK as dc, WIN_USER_TAB_KEY as dd, WatermarkComponent as de, WcRouterStore as df, WrapperInputComponent as dg, anchorNavId as dh, applyColorsToElement as di, assetOptions as dj, bootstrapMagApp as dk, bootstrapPwaInstall as dl, buildWcBaseUrl as dm, calculateLuminance as dn, calculateRanks as dp, cellText as dq, checkFilterCondition as dr, childNavId as ds, classListSignal as dt, coerceSize as du, cornerEdge as dv, cornerSide as dw, createMap as dx, createPlatformNavMap as dy, deriveAvatarGradient as dz, ASSET_BASE_URL as e, processImageToSvg as e$, getTierFromPreviewPath as e0, getTreeGridRow as e1, getUniqueId as e2, getValue as e3, hasErrorComputed as e4, hexToRgb as e5, hslToRgb$1 as e6, initMagmoniumApp as e7, initialNotificationState as e8, initialState$2 as e9, matchFieldValidation as eA, maxLengthValidation as eB, maxValidation as eC, mergePlatformNav as eD, mergeUnique as eE, mergeUniqueBy as eF, mergeUniqueWith as eG, minAgeValidation as eH, minLengthValidation as eI, minValidation as eJ, miniMarkToHtml as eK, navIdChain as eL, navIdFor as eM, navIdSegment as eN, navIdToRoutePath as eO, navIdToSegments as eP, navParamOf as eQ, navToId as eR, normalizeAssetOptions as eS, parentNavId as eT, parseAddress as eU, parseColor as eV, parsePatternNames as eW, patternValidation as eX, patternsValidation as eY, platformNavWidgets as eZ, privateGuard as e_, initials as ea, injectAuthenticate as eb, injectInstallApp as ec, injectParentSize as ed, injectScrollSticky as ee, isButtonName as ef, isCancelledComputed as eg, isExtensiblePlatformNavId as eh, isJson as ei, isLoadingComputed as ej, isLocalhost as ek, isNavInstanceConfig as el, isNavMenuConfig as em, isNavRowsConfig as en, isPlatformNavId as eo, isSize as ep, isTierPreview as eq, isUrlLocalhost as er, isValidNavId as es, isValidNavSegment as et, isWebComponent as eu, linkToId as ev, linkToNav as ew, loadingActions as ex, mInterceptor as ey, manualValidation as ez, AccordionBodyDirective as f, provideAppContext as f0, provideMagAppConfig as f1, provideMagWcConfig as f2, provideMagWcRoutes as f3, provideModalComponents as f4, provideMurlUrlSerializer as f5, provideNavWidgets as f6, provideOverlayWidgets as f7, providePlatformNavWidgets as f8, provideSearch as f9, toHostNavId as fA, toLength$1 as fB, toLocalNavId as fC, toggleTreeGridRow as fD, unfetchedPlatformNav as fE, urlValidation as fF, provideSizeContext as fa, provideUserTabs as fb, publicGuard as fc, readFieldPatterns as fd, renderAddress as fe, requiredValidation as ff, resolveConfigAsset as fg, resolveIconSize as fh, resolvePallet as fi, resolvePatternRules as fj, resolveSize as fk, rgbToHex as fl, rgbToHsl as fm, rowHasChildren as fn, samePatterns as fo, segmentsToNavId as fp, setProperty as fq, setTreeGridChildren as fr, settingsWidgets as fs, shouldShowBadge as ft, splitNavId as fu, splitOnMatch as fv, stringToColor as fw, toAttrBool as fx, toAttrNumber as fy, toCssLength as fz, AccordionComponent as g, AccordionGroupComponent as h, ActionComponent as i, AnimatedGraphsComponent as j, AppCardComponent as k, AppRelationType as l, AppTileComponent as m, AssetStore as n, AssetUrlPipe as o, Assets as p, AuthActivityPageComponent as q, AuthApiService as r, AuthStore as s, AutosizeDirective as t, BadgeComponent as u, BandingComponent as v, BaseArrayInputComponent as w, BaseRootWebComponent as x, BaseWebComponent as y, ButtonGroupComponent as z };
-//# sourceMappingURL=magmonium-one-magmonium-one-CVuP1oHe.mjs.map
+export { ColComponent as $, ACCESS_DOMAINS as A, ButtonComponent as B, Assets as C, AuthActivityPageComponent as D, AuthApiService as E, AuthStore as F, AutosizeDirective as G, HeaderComponent$1 as H, InputType as I, BadgeComponent as J, BandingComponent as K, LabelComponent as L, MODAL_REF as M, BaseArrayInputComponent as N, BaseRootWebComponent as O, BaseWebComponent as P, ButtonGroupComponent as Q, RangeInputComponent as R, COMPONENT_INPUT_REGISTRY as S, TranslatePipe as T, CardComponent as U, CardWrapperComponent as V, CarouselComponent as W, ChartComponent as X, ChatBubbleComponent as Y, CheckboxInputComponent as Z, ClearableInputComponent as _, MIN_ZOOM as a, MHeroComponent as a$, ColorPickerInputComponent as a0, CommentItemComponent as a1, CommentsApiService as a2, CommentsComponent as a3, CommentsStore as a4, CompactNumberPipe as a5, ComponentInputComponent as a6, ComponentStepperComponent as a7, ConfigComponent as a8, ConfirmComponent as a9, FileUploadDirective as aA, FileUploadInputComponent as aB, FlexComponent as aC, FlexItemComponent as aD, FormGroupComponent as aE, FrameComponent as aF, FreezeService as aG, GRID_BREAKPOINTS as aH, GetNavService as aI, HighlightDirective as aJ, HttpService as aK, ICON_SOURCE as aL, IS_SIDE_PANEL as aM, IconComponent as aN, ImgComponent as aO, InstrumentScoreComponent as aP, InterceptorObservables as aQ, JumbotronComponent as aR, KeyValueComponent as aS, LAYOUT_ASSET_FOLDER as aT, LOGIN_COMPONENT as aU, LOGIN_STORE as aV, LanguageComponent as aW, ListComponent as aX, LogoComponent as aY, MAG_SOCKET_EVENT as aZ, MHeroColorDirective as a_, ContextMenuComponent as aa, CustomIconClass as ab, CustomIconEditComponent as ac, DEFAULT_FILTER_RANGE_MODE as ad, DEFAULT_FILTER_VARIANT as ae, DEFAULT_NAV_PARAM as af, DEFAULT_NAV_SEGMENT as ag, DEFAULT_SIZE as ah, DashboardCardComponent as ai, DateInputComponent as aj, DatePickerComponent as ak, DeviceService as al, DomService as am, Domain as an, DotGridComponent as ao, DragListDirective as ap, DragListItemDirective as aq, DraggableDirective as ar, DropdownInputComponent as as, FILTER_GROUP_CONTEXT as at, FILTER_RANGE_MODES as au, FILTER_VARIANTS as av, FLEX_VARIANTS as aw, FOLDER_PICK_LISTENER as ax, FORM_ASSET_FOLDER as ay, FileService as az, MAX_ZOOM as b, SEARCH_RESULTS_EVENT as b$, MODAL_STORE_REF as b0, MRefDirective as b1, MStepComponent as b2, MURL_PARAM as b3, MURL_SEP as b4, ManifestEnrichmentService as b5, MenuComponent as b6, ModalDirective as b7, ModalRef as b8, ModalStore as b9, OVERLAY_WIDGETS as bA, OneApp as bB, OptionsSourceDirective as bC, OverlayBodyComponent as bD, OverlayRef as bE, OverlayService as bF, PLATFORM_BUTTON_NAV_IDS as bG, PLATFORM_EXTENSIBLE_NAV_IDS as bH, PLATFORM_NAV_MAP as bI, PLATFORM_ROOT_CHILDREN as bJ, PaginationComponent as bK, PanelComponent as bL, PercentagePipe as bM, PlaygroundComponent as bN, PositionDirective as bO, PwaInstallComponent as bP, ROOT_NAV$1 as bQ, RadioGroupComponent as bR, RadioInputComponent as bS, RatingInputComponent as bT, ReactiveElementComponent as bU, RemoteComponent as bV, RemoteLoaderService as bW, ResizeElementComponent as bX, RouteContainer as bY, RowComponent as bZ, SEARCH_QUERY as b_, MoneyPipe as ba, MultiRangeInputComponent as bb, MurlUrlSerializer as bc, NAV_DEFAULT_MURL as bd, NAV_ID_SEP as be, NAV_MAIN_BUTTONS as bf, NAV_SEGMENT_RE as bg, NAV_STORE_REF as bh, NAV_WC_COMPONENTS as bi, NAV_WIDGET_MAP as bj, NavComponent as bk, NavDetailsComponent as bl, NavHeaderComponent as bm, NavMenuComponent as bn, NavStore as bo, NavTrailComponent as bp, NothingComponent as bq, NotificationElementComponent as br, NotificationGroupComponent as bs, NotificationPopupComponent as bt, NotificationService as bu, NotificationStore as bv, NotificationType as bw, NotificationWidgetComponent as bx, ONE_ASSET_BASE_URL as by, OPTIONS_SOURCE as bz, cropRect as c, ThemeService as c$, SECTION_ACCORDION_GROUP as c0, SECTION_FORM_CONTEXT as c1, SHARED_ICONS as c2, SIZE_CONTEXT as c3, ScoreComponent as c4, ScrollComponent as c5, ScrollService as c6, SearchPanelComponent as c7, SearchStore as c8, SearchUserPanelComponent as c9, SettingsSearchBarComponent as cA, SettingsSearchService as cB, ShapeComponent as cC, SharedStoreRegistry as cD, SidePanelDirective as cE, Size as cF, SocketStore as cG, SortComponent as cH, StatComponent as cI, StepComponent as cJ, StepperComponent as cK, StepsComponent as cL, StorageService as cM, StrokeLinecap as cN, StrokeLinejoin as cO, SummaryComponent as cP, SvgGeneratorComponent as cQ, SvgGeneratorService as cR, SvgService as cS, TOTAL_COLUMNS as cT, TRANSLATION_SOURCE as cU, TableComponent as cV, TechnicalMeterComponent as cW, TextInputComponent as cX, TextareaInputComponent as cY, ThemeComponent as cZ, ThemeDataService as c_, SectionAccordionDirective as ca, SectionAccordionGroupDirective as cb, SectionBackComponent as cc, SectionBadgesComponent as cd, SectionButtonGroupComponent as ce, SectionCardComponent as cf, SectionCarouselComponent as cg, SectionComponent as ch, SectionFilterComponent as ci, SectionFilterGroupComponent as cj, SectionFilterMenuComponent as ck, SectionFilterPanelComponent as cl, SectionFilterRangePanelComponent as cm, SectionFooterComponent as cn, SectionFormComponent as co, SectionFormItemComponent as cp, SectionHeaderComponent as cq, SectionHeroComponent as cr, SectionPaginationComponent as cs, SectionSearchComponent as ct, SectionStepperComponent as cu, SectionTabsComponent as cv, SectionToggleComponent as cw, SectionToggleItemDirective as cx, SelectableCardInputComponent as cy, SelectorDirective as cz, drawFramed as d, filterTreeGridRows as d$, ThemeStore as d0, TimeAgoPipe as d1, TimelineComponent as d2, ToggleButtonComponent as d3, ToggleInputComponent as d4, ToggleRadioInputComponent as d5, ToolTipDirective as d6, TooltipComponent as d7, TranslateService as d8, TreeGridComponent as d9, cellText as dA, checkFilterCondition as dB, childNavId as dC, classListSignal as dD, coerceSize as dE, cornerEdge as dF, cornerSide as dG, createMap as dH, createPlatformNavMap as dI, deriveAvatarGradient as dJ, deriveContrastColor as dK, deriveOppositeColor as dL, derivePropertyName as dM, emailValidation as dN, evaluate as dO, evaluateBool as dP, filterHoldsList as dQ, filterHoldsOneBound as dR, filterHoldsOptions as dS, filterHoldsRange as dT, filterList as dU, filterNumber as dV, filterNumberList as dW, filterOne as dX, filterPanelOf as dY, filterPanelWidth as dZ, filterRange as d_, URL_SEP as da, USER_STORE_REF as db, USER_TAB_MAP as dc, UniverseComponent as dd, UserApiService as de, UserAvatarComponent as df, UserComponent as dg, UserNavComponent as dh, UserSettingsComponent as di, UserStore as dj, WC_ROUTE_CHANGED_EVENT as dk, WC_SEARCH_GROUPS as dl, WIN_USER_TAB_HOOK as dm, WIN_USER_TAB_KEY as dn, WatermarkComponent as dp, WcRouterStore as dq, WrapperInputComponent as dr, anchorNavId as ds, applyColorsToElement as dt, assetOptions as du, bootstrapMagApp as dv, bootstrapPwaInstall as dw, buildWcBaseUrl as dx, calculateLuminance as dy, calculateRanks as dz, encodeFramed as e, navParamOf as e$, filterValueList as e0, filterValues as e1, flattenTreeGridRows as e2, formatBadgeCount as e3, fullName as e4, generateClipPath as e5, generateTransform as e6, getClassList as e7, getProperty as e8, getScrollParent as e9, isSize as eA, isTierPreview as eB, isUrlLocalhost as eC, isValidNavId as eD, isValidNavSegment as eE, isWebComponent as eF, linkToId as eG, linkToNav as eH, loadingActions as eI, mInterceptor as eJ, manualValidation as eK, matchFieldValidation as eL, maxLengthValidation as eM, maxValidation as eN, mergePlatformNav as eO, mergeUnique as eP, mergeUniqueBy as eQ, mergeUniqueWith as eR, minAgeValidation as eS, minLengthValidation as eT, minValidation as eU, miniMarkToHtml as eV, navIdChain as eW, navIdFor as eX, navIdSegment as eY, navIdToRoutePath as eZ, navIdToSegments as e_, getTierFromPreviewPath as ea, getTreeGridRow as eb, getUniqueId as ec, getValue as ed, hasErrorComputed as ee, hexToRgb as ef, hslToRgb$1 as eg, initMagmoniumApp as eh, initialNotificationState as ei, initialState$2 as ej, initials as ek, injectAuthenticate as el, injectInstallApp as em, injectParentSize as en, injectScrollSticky as eo, isButtonName as ep, isCancelledComputed as eq, isExtensiblePlatformNavId as er, isJson as es, isLoadingComputed as et, isLocalhost as eu, isNavInstanceConfig as ev, isNavMenuConfig as ew, isNavRowsConfig as ex, isNavVisibilityConfig as ey, isPlatformNavId as ez, clampFraming as f, navToId as f0, navVisibilityGuard as f1, normalizeAssetOptions as f2, parentNavId as f3, parseAddress as f4, parseColor as f5, parsePatternNames as f6, patternValidation as f7, patternsValidation as f8, platformNavWidgets as f9, samePatterns as fA, segmentsToNavId as fB, setProperty as fC, setTreeGridChildren as fD, settingsWidgets as fE, shouldShowBadge as fF, splitNavId as fG, splitOnMatch as fH, stringToColor as fI, toAttrBool as fJ, toAttrNumber as fK, toCssLength as fL, toHostNavId as fM, toLength$1 as fN, toLocalNavId as fO, toggleTreeGridRow as fP, unfetchedPlatformNav as fQ, urlValidation as fR, privateGuard as fa, processImageToSvg as fb, provideAppContext as fc, provideMagAppConfig as fd, provideMagWcConfig as fe, provideMagWcRoutes as ff, provideModalComponents as fg, provideMurlUrlSerializer as fh, provideNavWidgets as fi, provideOverlayWidgets as fj, providePlatformNavWidgets as fk, provideSearch as fl, provideSizeContext as fm, provideUserTabs as fn, publicGuard as fo, readFieldPatterns as fp, renderAddress as fq, requiredValidation as fr, resolveConfigAsset as fs, resolveIconSize as ft, resolvePallet as fu, resolvePatternRules as fv, resolveSize as fw, rgbToHex as fx, rgbToHsl as fy, rowHasChildren as fz, BaseInputComponent as g, BaseTextInputComponent as h, initialFraming as i, TextOutputComponent as j, IS_DESIGN_MODE as k, APP_CONTEXT_REF as l, ASSET_BASE_URL as m, AccordionBodyDirective as n, outputSize as o, parseRatio as p, AccordionComponent as q, renameForType as r, AccordionGroupComponent as s, ActionComponent as t, AnimatedGraphsComponent as u, AppCardComponent as v, AppRelationType as w, AppTileComponent as x, AssetStore as y, AssetUrlPipe as z };
+//# sourceMappingURL=magmonium-one-magmonium-one-CWtMvVOS.mjs.map