@solidev/data 1.0.1 → 1.1.1

package/fesm2022/solidev-data.mjs

@@ -1,23 +1,23 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeStateKey, PLATFORM_ID, Inject, Optional, Injectable, inject, input, ViewChild, Component, signal, model, DestroyRef, Pipe, LOCALE_ID, DEFAULT_CURRENCY_CODE, output, NgZone, effect, untracked, EventEmitter, ElementRef, Directive, NgModule } from '@angular/core';
+import { InjectionToken, inject, TransferState, PLATFORM_ID, makeStateKey, Injectable, input, ViewChild, Component, signal, model, DestroyRef, Pipe, LOCALE_ID, DEFAULT_CURRENCY_CODE, output, NgZone, effect, untracked, EventEmitter, ElementRef, Directive, NgModule, computed, ApplicationRef } from '@angular/core';
 import { __decorate } from 'tslib';
-import * as i1$3 from '@angular/forms';
+import * as i1$2 from '@angular/forms';
 import { FormControl, Validators, FormGroup, ReactiveFormsModule, UntypedFormControl, NG_VALUE_ACCESSOR, UntypedFormGroup } from '@angular/forms';
 import { throwError, ReplaySubject, share, combineLatest, of, BehaviorSubject, takeUntil, NEVER, Subject, debounceTime, distinctUntilChanged, firstValueFrom, isObservable, timer, Observable, merge } from 'rxjs';
 import { tap, switchMap, map, catchError, filter, take, throttleTime, mergeMap, finalize, first } from 'rxjs/operators';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { isPlatformServer, AsyncPipe, NgTemplateOutlet, formatNumber, getCurrencySymbol, formatCurrency, DatePipe } from '@angular/common';
-import * as i1 from '@angular/common/http';
-import { HttpErrorResponse } from '@angular/common/http';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1$1 from '@angular/cdk/drag-drop';
+import * as i1 from '@angular/cdk/drag-drop';
 import { DragDropModule, CDK_DRAG_CONFIG } from '@angular/cdk/drag-drop';
-import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
+import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbOffcanvas, NgbOffcanvasModule, NgbDropdownModule, NgbTypeaheadModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
+import { DomSanitizer } from '@angular/platform-browser';
 import { jwtDecode } from 'jwt-decode';
-import * as i1$4 from '@angular/router';
+import * as i1$3 from '@angular/router';
 import { Router, ActivatedRoute, NavigationEnd, RouterModule } from '@angular/router';
-import * as i1$5 from '@angular/service-worker';
+import { SwUpdate } from '@angular/service-worker';
 
 /**
  * Base URL of the REST API every {@link Collection} builds its endpoints on.
@@ -37,7 +37,7 @@ import * as i1$5 from '@angular/service-worker';
  * // https://api.example.com/v1/path/to/things
  * ```
  */
-const DATA_API_URL = new InjectionToken("data.api.url");
+const DATA_API_URL = new InjectionToken('data.api.url');
 /**
  * Time window, in milliseconds, during which {@link DataBackend} may answer GET
  * requests from Angular's `TransferState` instead of hitting the network.
@@ -59,7 +59,7 @@ const DATA_API_URL = new InjectionToken("data.api.url");
  * providers: [{ provide: DATA_MAX_TRANSFERSTATE_TIME, useValue: 10000 }]
  * ```
  */
-const DATA_MAX_TRANSFERSTATE_TIME = new InjectionToken("data.max.transfer.state");
+const DATA_MAX_TRANSFERSTATE_TIME = new InjectionToken('data.max.transfer.state');
 /**
  * Bootstrap 5 flavour of {@link DataDisplayConfig}, and the fallback used when no
  * {@link DATA_DISPLAY_CONFIG} is provided.
@@ -69,22 +69,21 @@ const DATA_MAX_TRANSFERSTATE_TIME = new InjectionToken("data.max.transfer.state"
  */
 const BootstrapDataDisplayConfig = {
     dispEdit: {
-        defaultMode: "dd",
+        defaultMode: 'dd',
         inputClasses: {
-            "input.text": "form-control",
-            "input.email": "form-control",
-            "input.datetime": "form-control",
-            "input.date": "form-control",
-            "input.number": "form-control",
-            "input.decimal": "form-control",
-            "input.checkbox": "form-control",
-            "input.password": "form-control",
-            "textarea": "form-control",
-            "quill": "",
-            "fkselect": "form-control",
-            "select": "form-select"
+            'input.text': 'form-control',
+            'input.email': 'form-control',
+            'input.datetime': 'form-control',
+            'input.date': 'form-control',
+            'input.number': 'form-control',
+            'input.decimal': 'form-control',
+            'input.checkbox': 'form-control',
+            'input.password': 'form-control',
+            textarea: 'form-control',
+            fkselect: 'form-control',
+            select: 'form-select',
         },
-    }
+    },
 };
 /**
  * Styling contract for the generated display/edit widgets.
@@ -107,7 +106,51 @@ const BootstrapDataDisplayConfig = {
  * }]
  * ```
  */
-const DATA_DISPLAY_CONFIG = new InjectionToken("data.display.config");
+const DATA_DISPLAY_CONFIG = new InjectionToken('data.display.config');
+
+// Deliberately dependency-free: `fields/base.ts` needs this, and `data-model.ts`
+// imports from `fields/base.ts` -- putting it in either would close a cycle.
+/**
+ * A model seen as the untyped property bag it also is.
+ *
+ * Fields are declared by decorators and reached by name at runtime — `dispedit`
+ * reads `<field>_details`, filters read `filter.field` — so the data layer
+ * constantly indexes models with a string the compiler cannot resolve. This is
+ * the one sanctioned way to do it: it yields `unknown`, so the value has to be
+ * narrowed where it is used instead of silently becoming `any` and disabling
+ * type-checking for the rest of the expression.
+ *
+ * ```ts
+ * const details = fieldValues(model)[`${field}_details`] as R[] | undefined;
+ * fieldValues(model)[field] = event.id;
+ * ```
+ *
+ * @param target model (or any object) to index by field name
+ */
+function fieldValues(target) {
+    return target;
+}
+/**
+ * Renders an unknown value as display text.
+ *
+ * `String(value)` is not enough here: values read through {@link fieldValues}
+ * can be objects, and `String({})` yields `[object Object]`. Nullish becomes an
+ * empty string, objects are JSON-encoded, everything else goes through
+ * `String`.
+ *
+ * @param value value read off a model, a form or a payload
+ */
+function asText(value) {
+    if (value === null || value === undefined) {
+        return '';
+    }
+    if (typeof value === 'object') {
+        return JSON.stringify(value);
+    }
+    // Objects were handled above; what is left stringifies meaningfully.
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string
+    return String(value);
+}
 
 /**
  * Symbol under which every field's metadata is stored, directly on the model
@@ -115,6 +158,13 @@ const DATA_DISPLAY_CONFIG = new InjectionToken("data.display.config");
  * `reflect-metadata`: a plain `Map` hung off this Symbol is the whole store.
  */
 const PROPERTY_METADATA_KEY = Symbol('ngxDataMetadata');
+/**
+ * The metadata store hung off a prototype under {@link PROPERTY_METADATA_KEY}.
+ * A symbol key, so this cannot go through `fieldValues()`.
+ */
+function metadataStore(target) {
+    return target;
+}
 /**
  * Returns the metadata map owned by `target`, creating it on first use.
  *
@@ -124,8 +174,10 @@ const PROPERTY_METADATA_KEY = Symbol('ngxDataMetadata');
  */
 function getOrCreateFieldsMap(target) {
     if (!Object.prototype.hasOwnProperty.call(target, PROPERTY_METADATA_KEY)) {
-        const inherited = target[PROPERTY_METADATA_KEY];
-        const map = inherited ? new Map(inherited) : new Map();
+        const inherited = metadataStore(target)[PROPERTY_METADATA_KEY];
+        const map = inherited
+            ? new Map(inherited)
+            : new Map();
         Object.defineProperty(target, PROPERTY_METADATA_KEY, {
             value: map,
             enumerable: false,
@@ -134,7 +186,7 @@ function getOrCreateFieldsMap(target) {
         });
         return map;
     }
-    return target[PROPERTY_METADATA_KEY];
+    return metadataStore(target)[PROPERTY_METADATA_KEY];
 }
 /**
  * Reads the field metadata declared on a model, accepting either the class
@@ -145,7 +197,7 @@ function getOrCreateFieldsMap(target) {
  */
 function getFieldsMetadata(target) {
     const proto = typeof target === 'function' ? target.prototype : target;
-    return proto[PROPERTY_METADATA_KEY];
+    return metadataStore(proto)[PROPERTY_METADATA_KEY];
 }
 /**
  * Runtime behaviour of a single field: one manager instance is built per
@@ -243,7 +295,7 @@ class BaseFieldManager {
      * @param instance model whose value seeds the control
      */
     formControl(instance) {
-        return new FormControl(instance[this.fname] || this.getDefaultValue(), this.validators);
+        return new FormControl(fieldValues(instance)[this.fname] || this.getDefaultValue(), this.validators);
     }
     /**
      * Converts a raw JSON value coming from the API into the model value.
@@ -270,10 +322,10 @@ class BaseFieldManager {
      * interpolation.
      *
      * @param data value to render
-     * @param format reserved; ignored by the base implementation
+     * @param _format reserved; ignored by the base implementation
      */
-    toString(data, format = 'default') {
-        return `${data}`;
+    toString(data, _format = 'default') {
+        return String(data);
     }
     /**
      * Public accessor for this field's default value, invoking the
@@ -293,6 +345,7 @@ class BaseFieldManager {
     getValidators() {
         const v = [];
         if (this.required) {
+            // eslint-disable-next-line @typescript-eslint/unbound-method -- Validators.* are static and `this`-free
             v.push(Validators.required);
         }
         return v;
@@ -320,11 +373,6 @@ class BaseFieldManager {
         return this.defaultValue;
     }
 }
-/**
- * Lists a target's own string and symbol keys. Used to copy decorator options
- * verbatim into the stored metadata.
- */
-const ownKeys = (target) => Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target));
 /**
  * The factory behind every field decorator in the library — `charField`,
  * `foreignKeyField` and the rest are all one-line calls to it. Reach for it
@@ -349,25 +397,25 @@ function genericDataField(meta, type, manager) {
     return (target, propertyKey) => {
         // Utilisation du store symbolisé au lieu de Reflect
         const allMetadata = getOrCreateFieldsMap(target);
-        const cname = `${target.constructor.__name}`;
+        const cname = `${String(target.constructor.__name)}`;
         if ((cname === `undefined` || cname === '') && type !== 'primaryField') {
-            throw Error(`Decorator ${type} allowed only on classes with static __name field : "${cname}" found for - ${target}`);
+            throw Error(`Decorator ${type} allowed only on classes with static __name ` +
+                `field : "${cname}" found on field "${String(propertyKey)}"`);
         }
         const pk = `${cname}__${String(propertyKey)}`;
         let cm = allMetadata.get(pk);
         /* istanbul ignore if */
         if (cm) {
-            throw Error(`Field ${pk} already defined = ${cm}`);
-        }
-        cm = {};
-        for (const key of ownKeys(meta)) {
-            cm[key] = meta[key];
+            throw Error(`Field ${pk} already defined = ${JSON.stringify(cm)}`);
         }
+        cm = { ...meta };
         if (meta.name === undefined) {
             cm.name = `${String(propertyKey)}`;
         }
         cm.type = type;
         cm.self = pk;
+        // `cm` is `meta` plus the resolved name/type/self, so it is an `MD`;
+        // the copy above loses that on the way through the stored shape.
         cm.manager = new manager(cm);
         allMetadata.set(pk, cm);
         // Plus besoin de Reflect.defineMetadata : la Map est déjà stockée sur le prototype.
@@ -396,6 +444,13 @@ class PrimaryFieldManager extends BaseFieldManager {
  */
 const primaryField = (updates = {}) => genericDataField(updates, 'primaryField', PrimaryFieldManager);
 
+/**
+ * The class a prototype-chain level belongs to, as the library sees it: a
+ * constructor carrying the `__name` every model declares.
+ */
+function modelClassOf(level) {
+    return level.constructor;
+}
 /**
  * Base class for every model in the library: a plain class whose fields are
  * declared with field decorators, which turns it into something the rest of the
@@ -481,6 +536,13 @@ class DataModel {
      * @throws Error if no field metadata is reachable at all, which should be
      *   impossible since `DataModel` itself declares `id`.
      */
+    // `Collection<any>`, deliberately. `DataModelType<T>` is `new (_coll?:
+    // Collection<T>) => T`, so a subclass has to stay assignable to a
+    // constructor taking a collection *of itself*. Naming any concrete type
+    // here -- `Collection<DataModel>` included -- closes that loop and makes
+    // `new Collection(backend, url, MyModel)` stop type-checking for every
+    // model in every consumer.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     constructor(_coll) {
         this._coll = _coll;
         // Remplacement de Reflect.getMetadata par getFieldsMetadata
@@ -493,13 +555,13 @@ class DataModel {
         // Get all fields from current class and its parents
         const fields = new Map();
         let parent = Object.getPrototypeOf(this);
-        while (parent.constructor.name !== 'Object') {
+        while (modelClassOf(parent).name !== 'Object') {
             for (const f of md.keys()) {
                 const fieldName = f.split('__')[1];
                 if (fields.has(fieldName)) {
                     continue;
                 }
-                if (f.indexOf(parent.constructor.__name + '__') === 0) {
+                if (f.indexOf(`${modelClassOf(parent).__name}__`) === 0) {
                     fields.set(fieldName, md.get(f));
                 }
             }
@@ -515,9 +577,24 @@ class DataModel {
      * with "Missing collection". The getter casts away the optional, so it lies
      * about `undefined` on an unattached model.
      */
+    // `Collection<any>`, deliberately. `DataModelType<T>` is `new (_coll?:
+    // Collection<T>) => T`, so a subclass has to stay assignable to a
+    // constructor taking a collection *of itself*. Naming any concrete type
+    // here -- `Collection<DataModel>` included -- closes that loop and makes
+    // `new Collection(backend, url, MyModel)` stop type-checking for every
+    // model in every consumer.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     get _collection() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return this._coll;
     }
+    // `Collection<any>`, deliberately. `DataModelType<T>` is `new (_coll?:
+    // Collection<T>) => T`, so a subclass has to stay assignable to a
+    // constructor taking a collection *of itself*. Naming any concrete type
+    // here -- `Collection<DataModel>` included -- closes that loop and makes
+    // `new Collection(backend, url, MyModel)` stop type-checking for every
+    // model in every consumer.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     set _collection(coll) {
         this._coll = coll;
     }
@@ -571,7 +648,7 @@ class DataModel {
         let haveError = false;
         for (const f of this.FN) {
             if (!partial || (partial && Object.keys(data).indexOf(f) !== -1)) {
-                const ferr = this.setFV(f, this.FM(f).fromJson(data[f]), check);
+                const ferr = this.setFV(f, this.FM(f).fromJson(fieldValues(data)[f]), check);
                 if (ferr !== null) {
                     errors[f] = ferr;
                     haveError = true;
@@ -597,6 +674,10 @@ class DataModel {
      *
      * @param fields single field name or list of names to restrict the output to
      */
+    // The payload's shape is the model's own, which only the caller knows.
+    // Narrowing this to `Record<string, unknown>` would force every consumer
+    // reading a property off the result to cast, so it stays `any` until a major.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     toJson(fields) {
         if (fields && !Array.isArray(fields)) {
             fields = [fields];
@@ -638,6 +719,9 @@ class DataModel {
      * @returns an observable of the **raw response body**, not of this model, even
      *   when `update` is `true`
      */
+    // `T` is unused, but it comes first in the parameter list: removing it
+    // would silently change what `action<A, B>()` call sites mean.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     action(method, name, { body = undefined, update = false, updatePartial = true, updateCheck = false, 
     // updateRaise = false,
     params = {}, headers = {}, } = {}) {
@@ -676,9 +760,12 @@ class DataModel {
      */
     FM(field) {
         if (this.F.has(field)) {
+            // The map is keyed by name and holds managers of every field type; only
+            // the caller knows which one this field is.
             return this.F.get(field).manager;
         }
-        throw new Error(`${field} not found in ${Object.keys(this.F).join(',')} model ${this}`);
+        throw new Error(`${field} not found in [${[...this.FN].join(',')}] ` +
+            `on model ${this.constructor.__name}`);
     }
     /**
      * Reads a field's value by name, for code that only knows the field at runtime.
@@ -690,7 +777,7 @@ class DataModel {
      * @param field field name
      */
     FV(field) {
-        return this[field];
+        return fieldValues(this)[field];
     }
     /**
      * Writes a field's value by name, optionally validating it first.
@@ -723,7 +810,7 @@ class DataModel {
                 }
             }
         }
-        this[field] = value;
+        fieldValues(this)[field] = value;
         return null;
     }
     FC(field) {
@@ -787,7 +874,9 @@ class DataModel {
         updateModel: true,
     }) {
         if (this._coll) {
-            return this._coll.update(this, fields, { updateModel });
+            return this._coll.update(this, fields, {
+                updateModel,
+            });
         }
         return throwError(() => new Error('Missing collection'));
     }
@@ -942,11 +1031,7 @@ class Queryset {
      * receives the most recent page rather than waiting for the next `get()`.
      */
     results = this._results.asObservable().pipe(share());
-    _full = combineLatest([
-        this.results,
-        this.loading,
-        this.meta,
-    ]);
+    _full = combineLatest([this.results, this.loading, this.meta]);
     /**
      * The three streams combined into `[results, loading, meta]`, for templates
      * that would otherwise need three `async` pipes.
@@ -1045,10 +1130,10 @@ class Queryset {
      * request, so a paginator must call {@link get} afterwards.
      *
      * @param page 1-based page number
-     * @param fragment currently ignored; reserved for the URL-syncing behaviour
+     * @param _fragment currently ignored; reserved for the URL-syncing behaviour
      *   that is commented out in the implementation
      */
-    setPage(page = 1, fragment) {
+    setPage(page = 1, _fragment) {
         if (page !== this.page) {
             this.page = page;
             // if (this.options.router) {
@@ -1324,13 +1409,11 @@ class Collection {
      *   either way.
      */
     save(model, { updateModel = true } = {}) {
-        let saveMethod = model.id !== undefined
-            ? this.backend.patch.bind(this.backend)
-            : this.backend.post.bind(this.backend);
-        let url = model.id !== undefined ? this.getUrl(model.id) : this.getUrl();
+        const saveMethod = model.id !== undefined ? this.backend.patch.bind(this.backend) : this.backend.post.bind(this.backend);
+        const url = model.id !== undefined ? this.getUrl(model.id) : this.getUrl();
         return saveMethod(this, url, { body: model.toJson() }).pipe(map((res) => this.fromJson(res)), tap((res) => {
             if (updateModel) {
-                model.fromJson(res);
+                model.fromJson(fieldValues(res));
             }
         }));
     }
@@ -1347,13 +1430,11 @@ class Collection {
      * @param updateModel feed the server's response back into `model` (defaults to `true`)
      */
     update(model, fields = [], { updateModel = true } = {}) {
-        let saveMethod = model.id !== undefined
-            ? this.backend.patch.bind(this.backend)
-            : this.backend.post.bind(this.backend);
-        let url = model.id !== undefined ? this.getUrl(model.id) : this.getUrl();
+        const saveMethod = model.id !== undefined ? this.backend.patch.bind(this.backend) : this.backend.post.bind(this.backend);
+        const url = model.id !== undefined ? this.getUrl(model.id) : this.getUrl();
         return saveMethod(this, url, { body: model.toJson(fields) }).pipe(map((res) => this.fromJson(res)), tap((res) => {
             if (updateModel) {
-                model.fromJson(res);
+                model.fromJson(fieldValues(res));
             }
         }));
     }
@@ -1418,7 +1499,7 @@ class Collection {
      *   {@link action}
      * @param headers extra headers
      */
-    raw({ method = 'GET', prefix = '', suffix = '', params = {}, body = {}, headers = {}, } = {}) {
+    raw({ method = 'GET', prefix = '', suffix = '', params = {}, body: _body = {}, headers = {}, } = {}) {
         return this.backend.action(this, method, this.getUrl(null, { suffix, prefix }), {
             params,
             headers,
@@ -1438,7 +1519,10 @@ class Collection {
      *   forward it to the backend
      * @param headers extra headers
      */
-    blob({ method = 'GET', prefix = '', suffix = '', params = {}, body = {}, headers = {}, } = {}) {
+    // `RT` is unused -- `blob()` always resolves to a Blob -- but dropping it
+    // would be a breaking change for callers writing `blob<T>()`.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    blob({ method = 'GET', prefix = '', suffix = '', params = {}, body: _body = {}, headers = {}, } = {}) {
         return this.backend.blob(this, method, this.getUrl(null, { suffix, prefix }), {
             params,
             headers,
@@ -1486,6 +1570,11 @@ class Collection {
  * only when {@link DATA_MAX_TRANSFERSTATE_TIME} is provided and greater than
  * zero — see {@link _cachedGet} for the exact conditions.
  *
+ * Dependencies are resolved with `inject()`, so a subclass declares **no
+ * constructor**. To point one at a different API — a second backend alongside
+ * the main one — override {@link apiUrl} rather than passing a URL through
+ * `super()`; {@link maxTransferstateTime} is overridable the same way.
+ *
  * @example
  * ```ts
  * @Injectable({ providedIn: 'root' })
@@ -1495,6 +1584,13 @@ class Collection {
  *   }
  * }
  *
+ * @Injectable({ providedIn: 'root' })
+ * export class SupportBackend extends DataBackend {
+ *   public override get apiUrl(): string {
+ *     return 'https://support.example.com/api';
+ *   }
+ * }
+ *
  * providers: [
  *   { provide: DATA_API_URL, useValue: 'https://api.example.com' },
  *   { provide: DataBackend, useClass: AuthBackend },
@@ -1502,32 +1598,17 @@ class Collection {
  * ```
  */
 class DataBackend {
-    _http;
-    _transferState;
-    _platform;
-    _apiUrl;
-    _maxTransferstateTime;
     /**
      * Instantiation timestamp, used as the origin of the TransferState validity
      * window (see {@link _cachedGet}) — the window runs from backend creation, not
      * from each entry's insertion.
      */
     _created = new Date();
-    /**
-     * @param _http Angular HTTP client
-     * @param _transferState SSR state bridge, used to replay server GETs in the browser
-     * @param _platform platform id, used to write TransferState on the server only
-     * @param _apiUrl base API URL; required, see {@link DATA_API_URL}
-     * @param _maxTransferstateTime TransferState window in ms; optional, `0`
-     *   (the default) disables caching entirely
-     */
-    constructor(_http, _transferState, _platform, _apiUrl, _maxTransferstateTime = 0) {
-        this._http = _http;
-        this._transferState = _transferState;
-        this._platform = _platform;
-        this._apiUrl = _apiUrl;
-        this._maxTransferstateTime = _maxTransferstateTime;
-    }
+    _http = inject(HttpClient);
+    _transferState = inject(TransferState);
+    _platform = inject(PLATFORM_ID);
+    _apiUrl = inject(DATA_API_URL);
+    _maxTransferstateTime = inject(DATA_MAX_TRANSFERSTATE_TIME, { optional: true }) ?? 0;
     /**
      * Base URL every collection URL is built on, as provided via
      * {@link DATA_API_URL}. Read by `Collection.getUrl()`; exposed so custom
@@ -1536,6 +1617,13 @@ class DataBackend {
     get apiUrl() {
         return this._apiUrl;
     }
+    /**
+     * TransferState window in ms, from {@link DATA_MAX_TRANSFERSTATE_TIME}; `0`
+     * disables the cache. Overridable for the same reason as {@link apiUrl}.
+     */
+    get maxTransferstateTime() {
+        return this._maxTransferstateTime;
+    }
     /**
      * Issues an arbitrary request and returns the parsed JSON body.
      *
@@ -1562,7 +1650,6 @@ class DataBackend {
             });
         }
         else {
-            // @ts-ignore
             return this._http.request(method, url, {
                 body,
                 params,
@@ -1586,7 +1673,6 @@ class DataBackend {
      * @return an observable of the response as a `Blob`
      */
     blob(collection, method, url, { body = undefined, params = {}, headers = {} } = {}) {
-        // @ts-ignore
         return this._http.request(method, url, {
             body,
             params,
@@ -1687,16 +1773,13 @@ class DataBackend {
         const cur_headers = this.headers(headers);
         const key = makeStateKey(url + '|' + JSON.stringify(params) + '|' + JSON.stringify(cur_headers));
         if (collection.useTransferState &&
-            this._maxTransferstateTime > 0 &&
+            this.maxTransferstateTime > 0 &&
             this._transferState.hasKey(key) &&
-            new Date().getTime() - this._created.getTime() <
-                this._maxTransferstateTime) {
+            new Date().getTime() - this._created.getTime() < this.maxTransferstateTime) {
             return of(this._transferState.get(key, null));
         }
         return this._http.get(url, { headers: cur_headers, params }).pipe(tap((result) => {
-            if (collection.useTransferState &&
-                isPlatformServer(this._platform) &&
-                this._maxTransferstateTime > 0) {
+            if (collection.useTransferState && isPlatformServer(this._platform) && this.maxTransferstateTime > 0) {
                 this._transferState.set(key, result);
             }
         }));
@@ -1751,26 +1834,15 @@ class DataBackend {
     headers(headers) {
         return Object.assign({}, headers);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DataBackend, deps: [{ token: i1.HttpClient }, { token: i0.TransferState }, { token: PLATFORM_ID }, { token: DATA_API_URL }, { token: DATA_MAX_TRANSFERSTATE_TIME, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DataBackend, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DataBackend, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DataBackend, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DataBackend, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DataBackend, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i0.TransferState }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DATA_API_URL]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [DATA_MAX_TRANSFERSTATE_TIME]
-                }] }] });
+        }] });
 
 /**
  * The columns of a list: which exist, which are shown, and in what order.
@@ -1822,9 +1894,7 @@ class ModelListFields {
                 priority: c.priority || 0,
             });
         }
-        tmp.sort((b, a) => a.priority === b.priority
-            ? b.position - a.position
-            : a.priority - b.priority);
+        tmp.sort((b, a) => (a.priority === b.priority ? b.position - a.position : a.priority - b.priority));
         let pos = 0;
         for (const i of tmp) {
             i.position = pos;
@@ -1856,7 +1926,6 @@ class ModelListFields {
             }
         }
         // Set defaults
-        let out = [];
         for (const fe of defaults) {
             for (const f of tmp) {
                 if (f.name === fe) {
@@ -1895,7 +1964,7 @@ class ModelListFields {
         const disabled = filtered.filter((f) => !f.enabled);
         let ei = 0;
         let di = 0;
-        for (let i = 0; i < filtered.length; i++) {
+        while (ei + di < filtered.length) {
             if (enabled[ei] && disabled[di]) {
                 if (enabled[ei].priority > disabled[di].priority) {
                     ordered.push(enabled[ei]);
@@ -2155,7 +2224,7 @@ class ModelListPaginator {
     getPage() {
         return this._page;
     }
-    _updateOutput(from = '') {
+    _updateOutput(_from = '') {
         this._output.next({ page: this._page, page_size: this._page_size });
     }
 }
@@ -2280,7 +2349,7 @@ class ModelListSorter {
         return -1;
     }
     _updateOutput(_from = '') {
-        let out = [];
+        const out = [];
         for (const v of this._values) {
             out.push(`${v.direction === 'asc' ? '' : '-'}${v.field}`);
         }
@@ -2445,9 +2514,7 @@ class ModelListFilter {
         if (this.multi && this._mvalue.size > 0) {
             filter[this.field] = this.getMultiValue();
         }
-        else if (!this.multi &&
-            this._value !== undefined &&
-            this._value !== null) {
+        else if (!this.multi && this._value !== undefined && this._value !== null) {
             filter[this.field] = this.getValue();
         }
     }
@@ -2522,7 +2589,7 @@ class ModelListFilter {
      * meaningful for single-valued filters.
      */
     getValue() {
-        return `${this._value?.value}`;
+        return String(this._value?.value);
     }
     /**
      * The current single value with its description, or `null` when unset. Used
@@ -2533,26 +2600,26 @@ class ModelListFilter {
         return this._value;
     }
     mtoggle(value, desc, notify = true) {
-        if (this._mvalue.has(`${value}`)) {
-            this._mvalue.delete(`${value}`);
+        if (this._mvalue.has(String(value))) {
+            this._mvalue.delete(String(value));
         }
         else {
-            this._mvalue.set(`${value}`, desc);
+            this._mvalue.set(String(value), desc);
         }
         this.notify(notify);
         return true;
     }
     mset(value, desc, notify = true) {
-        if (!this._mvalue.has(`${value}`)) {
-            this._mvalue.set(`${value}`, desc);
+        if (!this._mvalue.has(String(value))) {
+            this._mvalue.set(String(value), desc);
             this.notify(notify);
             return true;
         }
         return false;
     }
     munset(value, desc, notify = true) {
-        if (this._mvalue.has(`${value}`)) {
-            this._mvalue.delete(`${value}`);
+        if (this._mvalue.has(String(value))) {
+            this._mvalue.delete(String(value));
             this.notify(notify);
             return true;
         }
@@ -2801,9 +2868,7 @@ class ModelListFilters {
         this._output$.next(filter);
         this._enabled$.next(this._enabled);
         this._available$.next(this._available);
-        this._groups$.next(this._groups
-            .filter((g) => g.allowed && g.enabled)
-            .sort((a, b) => a.position - b.position));
+        this._groups$.next(this._groups.filter((g) => g.allowed && g.enabled).sort((a, b) => a.position - b.position));
     }
 }
 
@@ -2825,6 +2890,8 @@ class ModelListFilters {
  * instance while the interceptor and `ModelListService` hold another, so `logout$`
  * would never reach the list cache and stale data would survive a logout.
  */
+// The app that provides this token specialises all three parameters; naming
+// them here would force every consumer to cast on injection.
 const DATA_AUTH_SERVICE = new InjectionToken('data.auth.service');
 /**
  * Extra origins, beyond `DATA_API_URL`, whose requests should carry the auth token.
@@ -2877,16 +2944,13 @@ class AuthInterceptor {
             return next.handle(req);
         }
         // If the request is refresh or login url, skip auth
-        if (req.url.startsWith(this._auth.refreshUrl) ||
-            req.url.startsWith(this._auth.loginUrl)) {
+        if (req.url.startsWith(this._auth.refreshUrl) || req.url.startsWith(this._auth.loginUrl)) {
             return next.handle(req);
         }
         // If the request is not for the api, and not for one of the urls specified in the
         // DATA_AUTH_URLS injection token, skip auth
         if (!req.url.startsWith(this._apiUrl) &&
-            !(this._urls &&
-                this._urls.length > 0 &&
-                this._urls.some((url) => req.url.startsWith(url)))) {
+            !(this._urls && this._urls.length > 0 && this._urls.some((url) => req.url.startsWith(url)))) {
             return next.handle(req);
         }
         if (!this._auth.isAnonymous) {
@@ -2931,15 +2995,13 @@ class AuthInterceptor {
         }
     }
     _addToken(request, token) {
-        const headers = request.headers
-            .delete('Authorization')
-            .append('Authorization', `Bearer ${token}`);
+        const headers = request.headers.delete('Authorization').append('Authorization', `Bearer ${token}`);
         return request.clone({ headers });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: AuthInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: AuthInterceptor, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: AuthInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: AuthInterceptor, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: AuthInterceptor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: AuthInterceptor, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3142,11 +3204,12 @@ class ModelList {
 class ModelListService {
     /** Kept lists, keyed by `name` only. See the class doc for what that implies. */
     _instances = new Map();
+    // Only `logout$` is used here, so the three type parameters are irrelevant.
+    // See DATA_AUTH_SERVICE: the app specialises the three parameters.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     _auth = inject(DATA_AUTH_SERVICE);
     constructor() {
-        this._auth.logout$
-            .pipe(takeUntilDestroyed())
-            .subscribe(() => this.reset());
+        this._auth.logout$.pipe(takeUntilDestroyed()).subscribe(() => this.reset());
     }
     /**
      * Tear down and forget every cached list.
@@ -3221,6 +3284,7 @@ class ModelListService {
             }
         }
         else {
+            // The cache is keyed by name and holds lists of every model type.
             ml = this._instances.get(name);
         }
         if (!ml.started) {
@@ -3240,10 +3304,10 @@ class ModelListService {
         }
         return ml;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3295,7 +3359,7 @@ class ModelListFieldsSelectorComponent {
         else {
             pos -= 1;
         }
-        this.list().fields.setPosition($event.item.data, pos);
+        this.list().fields.setPosition(String($event.item.data), pos);
     }
     /** Show or hide column `f`, depending on its current state. */
     toggle(f) {
@@ -3306,17 +3370,12 @@ class ModelListFieldsSelectorComponent {
             this.list().fields.enable(f.name);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListFieldsSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ModelListFieldsSelectorComponent, isStandalone: true, selector: "data-model-list-fields-selector", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: CDK_DRAG_CONFIG, useValue: DragConfig }], viewQueries: [{ propertyName: "ofctpl", first: true, predicate: ["selector"], descendants: true, static: true }], ngImport: i0, template: "<i class=\"bi bi-list-ul\" (click)=\"open()\" role=\"button\" aria-label=\"Choix des champs\"></i>\n<ng-template #selector let-offcanvas>\n  <div class=\"offcanvas-header\">\n    <h4 class=\"offcanvas-title\">Choix des champs</h4>\n    <button class=\"btn-close\" type=\"button\" aria-label=\"Close\" (click)=\"offcanvas.dismiss('x')\"></button>\n  </div>\n  <div class=\"offcanvas-body\" cdkScrollable>\n    @if (list().fields.fields|async; as fields) {\n      <div class=\"fields-list\" cdkDropList cdkDropListLockAxis=\"y\" (cdkDropListDropped)=\"drop($event)\">\n        @for (f of fields; track f) {\n          @if (seeMore || f.priority >= 0) {\n            <div class=\"field-box\" cdkDrag (click)=\"toggle(f)\" [cdkDragData]=\"f.name\" [class.enabled]=\"f.enabled\" [class.compact]=\"fields.length&gt;30\" [attr.arial-label]=\"f.label\" role=\"button\">{{f.label}}<span class=\"badge bg-info\"> {{f.priority}}</span></div>\n          }\n        }\n      </div>\n    }\n    <button class=\"btn btn-sm btn-link\" (click)=\"seeMore=!seeMore\">plus de champs</button>\n  </div>\n</ng-template>", styles: [".fields-list{width:100%;max-width:100%;border:var(--bs-border-style) var(--bs-border-width) var(--bs-border-color);min-height:50px;display:block;background:var(--bs-body-bg-rgb);border-radius:var(--bs-border-radius-sm);overflow:hidden}.field-box{padding:.5rem 1rem;border-bottom:solid 1px #ccc;color:var(--bs-black);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:var(--bs-body-font-size)}.field-box.compact{padding:.2rem 1rem;font-size:.9rem}.field-box.enabled{background-color:var(--bs-success);color:var(--bs-white)}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--bs-border-radius-sm);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.field-box:last-child{border:none}.fields-list.cdk-drop-list-dragging .field-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "ngmodule", type: NgbOffcanvasModule }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListFieldsSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ModelListFieldsSelectorComponent, isStandalone: true, selector: "data-model-list-fields-selector", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: CDK_DRAG_CONFIG, useValue: DragConfig }], viewQueries: [{ propertyName: "ofctpl", first: true, predicate: ["selector"], descendants: true, static: true }], ngImport: i0, template: "<i\n  class=\"bi bi-list-ul\"\n  (click)=\"open()\"\n  role=\"button\"\n  tabindex=\"0\"\n  aria-label=\"Choix des champs\"\n  (keydown.enter)=\"open()\"\n  (keydown.space)=\"$event.preventDefault(); open()\"\n></i>\n<ng-template #selector let-offcanvas>\n  <div class=\"offcanvas-header\">\n    <h4 class=\"offcanvas-title\">Choix des champs</h4>\n    <button class=\"btn-close\" type=\"button\" aria-label=\"Close\" (click)=\"offcanvas.dismiss('x')\"></button>\n  </div>\n  <div class=\"offcanvas-body\" cdkScrollable>\n    @if (list().fields.fields | async; as fields) {\n      <div class=\"fields-list\" cdkDropList cdkDropListLockAxis=\"y\" (cdkDropListDropped)=\"drop($event)\">\n        @for (f of fields; track f) {\n          @if (seeMore || f.priority >= 0) {\n            <div\n              class=\"field-box\"\n              cdkDrag\n              (click)=\"toggle(f)\"\n              (keydown.enter)=\"toggle(f)\"\n              (keydown.space)=\"$event.preventDefault(); toggle(f)\"\n              tabindex=\"0\"\n              [cdkDragData]=\"f.name\"\n              [class.enabled]=\"f.enabled\"\n              [class.compact]=\"fields.length&gt;30\"\n              [attr.arial-label]=\"f.label\"\n              role=\"button\"\n            >\n              {{ f.label }}\n              <span class=\"badge bg-info\">{{ f.priority }}</span>\n            </div>\n          }\n        }\n      </div>\n    }\n    <button class=\"btn btn-sm btn-link\" (click)=\"seeMore = !seeMore\">plus de champs</button>\n  </div>\n</ng-template>\n", styles: [".fields-list{width:100%;max-width:100%;border:var(--bs-border-style) var(--bs-border-width) var(--bs-border-color);min-height:50px;display:block;background:var(--bs-body-bg-rgb);border-radius:var(--bs-border-radius-sm);overflow:hidden}.field-box{padding:.5rem 1rem;border-bottom:solid 1px #ccc;color:var(--bs-black);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:var(--bs-body-font-size)}.field-box.compact{padding:.2rem 1rem;font-size:.9rem}.field-box.enabled{background-color:var(--bs-success);color:var(--bs-white)}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--bs-border-radius-sm);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.field-box:last-child{border:none}.fields-list.cdk-drop-list-dragging .field-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "ngmodule", type: NgbOffcanvasModule }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListFieldsSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListFieldsSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-fields-selector', imports: [
-                        AsyncPipe,
-                        DragDropModule,
-                        CdkScrollableModule,
-                        NgbOffcanvasModule,
-                    ], providers: [{ provide: CDK_DRAG_CONFIG, useValue: DragConfig }], template: "<i class=\"bi bi-list-ul\" (click)=\"open()\" role=\"button\" aria-label=\"Choix des champs\"></i>\n<ng-template #selector let-offcanvas>\n  <div class=\"offcanvas-header\">\n    <h4 class=\"offcanvas-title\">Choix des champs</h4>\n    <button class=\"btn-close\" type=\"button\" aria-label=\"Close\" (click)=\"offcanvas.dismiss('x')\"></button>\n  </div>\n  <div class=\"offcanvas-body\" cdkScrollable>\n    @if (list().fields.fields|async; as fields) {\n      <div class=\"fields-list\" cdkDropList cdkDropListLockAxis=\"y\" (cdkDropListDropped)=\"drop($event)\">\n        @for (f of fields; track f) {\n          @if (seeMore || f.priority >= 0) {\n            <div class=\"field-box\" cdkDrag (click)=\"toggle(f)\" [cdkDragData]=\"f.name\" [class.enabled]=\"f.enabled\" [class.compact]=\"fields.length&gt;30\" [attr.arial-label]=\"f.label\" role=\"button\">{{f.label}}<span class=\"badge bg-info\"> {{f.priority}}</span></div>\n          }\n        }\n      </div>\n    }\n    <button class=\"btn btn-sm btn-link\" (click)=\"seeMore=!seeMore\">plus de champs</button>\n  </div>\n</ng-template>", styles: [".fields-list{width:100%;max-width:100%;border:var(--bs-border-style) var(--bs-border-width) var(--bs-border-color);min-height:50px;display:block;background:var(--bs-body-bg-rgb);border-radius:var(--bs-border-radius-sm);overflow:hidden}.field-box{padding:.5rem 1rem;border-bottom:solid 1px #ccc;color:var(--bs-black);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:var(--bs-body-font-size)}.field-box.compact{padding:.2rem 1rem;font-size:.9rem}.field-box.enabled{background-color:var(--bs-success);color:var(--bs-white)}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--bs-border-radius-sm);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.field-box:last-child{border:none}.fields-list.cdk-drop-list-dragging .field-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'data-model-list-fields-selector', imports: [AsyncPipe, DragDropModule, CdkScrollableModule, NgbOffcanvasModule], providers: [{ provide: CDK_DRAG_CONFIG, useValue: DragConfig }], template: "<i\n  class=\"bi bi-list-ul\"\n  (click)=\"open()\"\n  role=\"button\"\n  tabindex=\"0\"\n  aria-label=\"Choix des champs\"\n  (keydown.enter)=\"open()\"\n  (keydown.space)=\"$event.preventDefault(); open()\"\n></i>\n<ng-template #selector let-offcanvas>\n  <div class=\"offcanvas-header\">\n    <h4 class=\"offcanvas-title\">Choix des champs</h4>\n    <button class=\"btn-close\" type=\"button\" aria-label=\"Close\" (click)=\"offcanvas.dismiss('x')\"></button>\n  </div>\n  <div class=\"offcanvas-body\" cdkScrollable>\n    @if (list().fields.fields | async; as fields) {\n      <div class=\"fields-list\" cdkDropList cdkDropListLockAxis=\"y\" (cdkDropListDropped)=\"drop($event)\">\n        @for (f of fields; track f) {\n          @if (seeMore || f.priority >= 0) {\n            <div\n              class=\"field-box\"\n              cdkDrag\n              (click)=\"toggle(f)\"\n              (keydown.enter)=\"toggle(f)\"\n              (keydown.space)=\"$event.preventDefault(); toggle(f)\"\n              tabindex=\"0\"\n              [cdkDragData]=\"f.name\"\n              [class.enabled]=\"f.enabled\"\n              [class.compact]=\"fields.length&gt;30\"\n              [attr.arial-label]=\"f.label\"\n              role=\"button\"\n            >\n              {{ f.label }}\n              <span class=\"badge bg-info\">{{ f.priority }}</span>\n            </div>\n          }\n        }\n      </div>\n    }\n    <button class=\"btn btn-sm btn-link\" (click)=\"seeMore = !seeMore\">plus de champs</button>\n  </div>\n</ng-template>\n", styles: [".fields-list{width:100%;max-width:100%;border:var(--bs-border-style) var(--bs-border-width) var(--bs-border-color);min-height:50px;display:block;background:var(--bs-body-bg-rgb);border-radius:var(--bs-border-radius-sm);overflow:hidden}.field-box{padding:.5rem 1rem;border-bottom:solid 1px #ccc;color:var(--bs-black);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:var(--bs-body-font-size)}.field-box.compact{padding:.2rem 1rem;font-size:.9rem}.field-box.enabled{background-color:var(--bs-success);color:var(--bs-white)}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--bs-border-radius-sm);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.field-box:last-child{border:none}.fields-list.cdk-drop-list-dragging .field-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], ofctpl: [{
                 type: ViewChild,
                 args: ['selector', { static: true }]
@@ -3357,7 +3416,9 @@ class ModelListSorterComponent {
     /** This field is sorted descending. */
     isDown = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDown" }] : /* istanbul ignore next */ []));
-    constructor() { }
+    constructor() {
+        // Dependencies are resolved with inject().
+    }
     /** Sort ascending on this field. */
     setUp() {
         this.list().sorter.set(this.field(), 'asc');
@@ -3365,9 +3426,7 @@ class ModelListSorterComponent {
     }
     /** Re-read this field's sort state from the list's sorter into the signals. */
     update() {
-        this.getCount.set(this.list().sorter.get(this.field())
-            ? this.list().sorter.getAll().length
-            : 0);
+        this.getCount.set(this.list().sorter.get(this.field()) ? this.list().sorter.getAll().length : 0);
         this.getOrder.set(this.list().sorter.getOrder(this.field()));
         this.isDown.set(this.getIsDown());
         this.isUp.set(this.getIsUp());
@@ -3396,12 +3455,12 @@ class ModelListSorterComponent {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListSorterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ModelListSorterComponent, isStandalone: true, selector: "data-model-list-sorter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<span class=\"dirs\">@if (getOrder()>=0 || getCount()>1) {\n  <span (click)=\"cancel()\" role=\"button\">@if (getCount()>1) {\n    <span class=\"count\"> {{getOrder()}}</span>\n    }<span class=\"bi bi-x\"></span></span>\n    }<span class=\"bi bi-sort-down-alt\" (click)=\"setUp()\" [class.active]=\"isUp()\" role=\"button\"></span><span class=\"bi bi-sort-down\" (click)=\"setDown()\" [class.active]=\"isDown()\" role=\"button\"></span>&nbsp;</span>\n    <ng-content></ng-content>\n", styles: [".dirs{color:#d3d3d3}.dirs .count{font-size:.7rem;margin-right:-.1rem;vertical-align:super}.active{color:#000}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListSorterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ModelListSorterComponent, isStandalone: true, selector: "data-model-list-sorter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<span class=\"dirs\">\n  @if (getOrder() >= 0 || getCount() > 1) {\n    <span\n      (click)=\"cancel()\"\n      role=\"button\"\n      tabindex=\"0\"\n      aria-label=\"Annuler le tri\"\n      (keydown.enter)=\"cancel()\"\n      (keydown.space)=\"$event.preventDefault(); cancel()\"\n    >\n      @if (getCount() > 1) {\n        <span class=\"count\">{{ getOrder() }}</span>\n      }\n      <span class=\"bi bi-x\"></span>\n    </span>\n  }\n  <span\n    class=\"bi bi-sort-down-alt\"\n    (click)=\"setUp()\"\n    [class.active]=\"isUp()\"\n    role=\"button\"\n    tabindex=\"0\"\n    aria-label=\"Trier par ordre croissant\"\n    (keydown.enter)=\"setUp()\"\n    (keydown.space)=\"$event.preventDefault(); setUp()\"\n  ></span>\n  <span\n    class=\"bi bi-sort-down\"\n    (click)=\"setDown()\"\n    [class.active]=\"isDown()\"\n    role=\"button\"\n    tabindex=\"0\"\n    aria-label=\"Trier par ordre d\u00E9croissant\"\n    (keydown.enter)=\"setDown()\"\n    (keydown.space)=\"$event.preventDefault(); setDown()\"\n  ></span>\n  &nbsp;\n</span>\n<ng-content></ng-content>\n", styles: [".dirs{color:#d3d3d3}.dirs .count{font-size:.7rem;margin-right:-.1rem;vertical-align:super}.active{color:#000}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListSorterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListSorterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-sorter', imports: [], template: "<span class=\"dirs\">@if (getOrder()>=0 || getCount()>1) {\n  <span (click)=\"cancel()\" role=\"button\">@if (getCount()>1) {\n    <span class=\"count\"> {{getOrder()}}</span>\n    }<span class=\"bi bi-x\"></span></span>\n    }<span class=\"bi bi-sort-down-alt\" (click)=\"setUp()\" [class.active]=\"isUp()\" role=\"button\"></span><span class=\"bi bi-sort-down\" (click)=\"setDown()\" [class.active]=\"isDown()\" role=\"button\"></span>&nbsp;</span>\n    <ng-content></ng-content>\n", styles: [".dirs{color:#d3d3d3}.dirs .count{font-size:.7rem;margin-right:-.1rem;vertical-align:super}.active{color:#000}\n"] }]
+            args: [{ selector: 'data-model-list-sorter', imports: [], template: "<span class=\"dirs\">\n  @if (getOrder() >= 0 || getCount() > 1) {\n    <span\n      (click)=\"cancel()\"\n      role=\"button\"\n      tabindex=\"0\"\n      aria-label=\"Annuler le tri\"\n      (keydown.enter)=\"cancel()\"\n      (keydown.space)=\"$event.preventDefault(); cancel()\"\n    >\n      @if (getCount() > 1) {\n        <span class=\"count\">{{ getOrder() }}</span>\n      }\n      <span class=\"bi bi-x\"></span>\n    </span>\n  }\n  <span\n    class=\"bi bi-sort-down-alt\"\n    (click)=\"setUp()\"\n    [class.active]=\"isUp()\"\n    role=\"button\"\n    tabindex=\"0\"\n    aria-label=\"Trier par ordre croissant\"\n    (keydown.enter)=\"setUp()\"\n    (keydown.space)=\"$event.preventDefault(); setUp()\"\n  ></span>\n  <span\n    class=\"bi bi-sort-down\"\n    (click)=\"setDown()\"\n    [class.active]=\"isDown()\"\n    role=\"button\"\n    tabindex=\"0\"\n    aria-label=\"Trier par ordre d\u00E9croissant\"\n    (keydown.enter)=\"setDown()\"\n    (keydown.space)=\"$event.preventDefault(); setDown()\"\n  ></span>\n  &nbsp;\n</span>\n<ng-content></ng-content>\n", styles: [".dirs{color:#d3d3d3}.dirs .count{font-size:.7rem;margin-right:-.1rem;vertical-align:super}.active{color:#000}\n"] }]
         }], ctorParameters: () => [], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }] } });
 
 /**
@@ -3468,12 +3527,12 @@ class ModelListFieldHeaderComponent {
         this.list().fields.move(f.name, 'after', this.field());
         this.list().fields.enable(f.name);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListFieldHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ModelListFieldHeaderComponent, isStandalone: true, selector: "data-model-list-field-header", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, menuMode: { classPropertyName: "menuMode", publicName: "menuMode", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { display: "displayChange" }, viewQueries: [{ propertyName: "mnu", first: true, predicate: ["mnu"], descendants: true }], ngImport: i0, template: "\n<ng-template #label><span #ref>\n  <ng-content></ng-content></span>@if (!ref.children.length) {\n  <span>{{list().fields.get(field())?.label||field()}}</span>\n}</ng-template>\n<div class=\"d-flex flex-row justify-content-between align-items-end slabel\">\n  <div class=\"flex-grow-1\">\n    @if (sort() && dispSortMode()==='side') {\n      <data-model-list-sorter [list]=\"list()\" [field]=\"sortField()||field()\">\n        <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n      </data-model-list-sorter>\n    }\n    @if (!sort() || dispSortMode()==='hide') {\n      <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n    }\n  </div>\n  @if (dispMenuMode()==='side') {\n    <div class=\"navicons d-flex flex-row\" [attr.aria-label]=\"'Gestion champs'\"><i class=\"bi bi-caret-left-fill\" role=\"button\" (click)=\"list().fields.move(field(), 'before')\" aria-label=\"D\u00E9placer vers la gauche\"></i>\n    <div ngbDropdown #mnu=\"ngbDropdown\" [container]=\"'body'\"><i class=\"bi bi-record\" ngbDropdownToggle aria-label=\"Ouvrir la boite de dialogue des champs\" role=\"button\"></i>\n    <div ngbDropdownMenu>\n      <button ngbDropdownItem (click)=\"disable()\"><i class=\"bi bi-trash me-2\"></i>Supprimer</button>\n      <h6 class=\"dropdown-header\">Ajouter une colonne apr\u00E8s</h6>\n      @for (f of list().fields.fields|async; track f) {\n        @if (f.allowed && !f.enabled) {\n          <button ngbDropdownItem (click)=\"enable(f)\" [attr.aria-label]=\"f.label||f.name\"><i class=\"bi bi-plus-circle me-2\"></i>{{f.label||f.name}}</button>\n        }\n      }\n    </div>\n    </div><i class=\"bi bi-caret-right-fill\" role=\"button\" (click)=\"list().fields.move(field(), 'after')\" aria-label=\"D\u00E9placer vers la droite\"></i>\n  </div>\n}\n</div>\n", styles: [".slabel .navicons{opacity:0}.slabel:hover .navicons,.slabel.active .navicons{opacity:1!important}.dropdown-toggle:after{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$2.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1$2.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "component", type: ModelListSorterComponent, selector: "data-model-list-sorter", inputs: ["list", "field"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListFieldHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ModelListFieldHeaderComponent, isStandalone: true, selector: "data-model-list-field-header", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, menuMode: { classPropertyName: "menuMode", publicName: "menuMode", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { display: "displayChange" }, viewQueries: [{ propertyName: "mnu", first: true, predicate: ["mnu"], descendants: true }], ngImport: i0, template: "<ng-template #label>\n  <span #ref><ng-content></ng-content></span>\n  @if (!ref.children.length) {\n    <span>{{ list().fields.get(field())?.label || field() }}</span>\n  }\n</ng-template>\n<div class=\"d-flex flex-row justify-content-between align-items-end slabel\">\n  <div class=\"flex-grow-1\">\n    @if (sort() && dispSortMode() === \"side\") {\n      <data-model-list-sorter [list]=\"list()\" [field]=\"sortField() || field()\">\n        <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n      </data-model-list-sorter>\n    }\n    @if (!sort() || dispSortMode() === \"hide\") {\n      <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n    }\n  </div>\n  @if (dispMenuMode() === \"side\") {\n    <div class=\"navicons d-flex flex-row\" [attr.aria-label]=\"'Gestion champs'\">\n      <i\n        class=\"bi bi-caret-left-fill\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"D\u00E9placer vers la gauche\"\n        (click)=\"list().fields.move(field(), 'before')\"\n        (keydown.enter)=\"list().fields.move(field(), 'before')\"\n        (keydown.space)=\"$event.preventDefault(); list().fields.move(field(), 'before')\"\n      ></i>\n      <div ngbDropdown #mnu=\"ngbDropdown\" [container]=\"'body'\">\n        <i class=\"bi bi-record\" ngbDropdownToggle aria-label=\"Ouvrir la boite de dialogue des champs\" role=\"button\"></i>\n        <div ngbDropdownMenu>\n          <button ngbDropdownItem (click)=\"disable()\">\n            <i class=\"bi bi-trash me-2\"></i>\n            Supprimer\n          </button>\n          <h6 class=\"dropdown-header\">Ajouter une colonne apr\u00E8s</h6>\n          @for (f of list().fields.fields | async; track f) {\n            @if (f.allowed && !f.enabled) {\n              <button ngbDropdownItem (click)=\"enable(f)\" [attr.aria-label]=\"f.label || f.name\">\n                <i class=\"bi bi-plus-circle me-2\"></i>\n                {{ f.label || f.name }}\n              </button>\n            }\n          }\n        </div>\n      </div>\n      <i\n        class=\"bi bi-caret-right-fill\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"D\u00E9placer vers la droite\"\n        (click)=\"list().fields.move(field(), 'after')\"\n        (keydown.enter)=\"list().fields.move(field(), 'after')\"\n        (keydown.space)=\"$event.preventDefault(); list().fields.move(field(), 'after')\"\n      ></i>\n    </div>\n  }\n</div>\n", styles: [".slabel .navicons{opacity:0}.slabel:hover .navicons,.slabel.active .navicons{opacity:1!important}.dropdown-toggle:after{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1$1.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "component", type: ModelListSorterComponent, selector: "data-model-list-sorter", inputs: ["list", "field"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListFieldHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListFieldHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-field-header', imports: [AsyncPipe, NgTemplateOutlet, NgbDropdownModule, ModelListSorterComponent], template: "\n<ng-template #label><span #ref>\n  <ng-content></ng-content></span>@if (!ref.children.length) {\n  <span>{{list().fields.get(field())?.label||field()}}</span>\n}</ng-template>\n<div class=\"d-flex flex-row justify-content-between align-items-end slabel\">\n  <div class=\"flex-grow-1\">\n    @if (sort() && dispSortMode()==='side') {\n      <data-model-list-sorter [list]=\"list()\" [field]=\"sortField()||field()\">\n        <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n      </data-model-list-sorter>\n    }\n    @if (!sort() || dispSortMode()==='hide') {\n      <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n    }\n  </div>\n  @if (dispMenuMode()==='side') {\n    <div class=\"navicons d-flex flex-row\" [attr.aria-label]=\"'Gestion champs'\"><i class=\"bi bi-caret-left-fill\" role=\"button\" (click)=\"list().fields.move(field(), 'before')\" aria-label=\"D\u00E9placer vers la gauche\"></i>\n    <div ngbDropdown #mnu=\"ngbDropdown\" [container]=\"'body'\"><i class=\"bi bi-record\" ngbDropdownToggle aria-label=\"Ouvrir la boite de dialogue des champs\" role=\"button\"></i>\n    <div ngbDropdownMenu>\n      <button ngbDropdownItem (click)=\"disable()\"><i class=\"bi bi-trash me-2\"></i>Supprimer</button>\n      <h6 class=\"dropdown-header\">Ajouter une colonne apr\u00E8s</h6>\n      @for (f of list().fields.fields|async; track f) {\n        @if (f.allowed && !f.enabled) {\n          <button ngbDropdownItem (click)=\"enable(f)\" [attr.aria-label]=\"f.label||f.name\"><i class=\"bi bi-plus-circle me-2\"></i>{{f.label||f.name}}</button>\n        }\n      }\n    </div>\n    </div><i class=\"bi bi-caret-right-fill\" role=\"button\" (click)=\"list().fields.move(field(), 'after')\" aria-label=\"D\u00E9placer vers la droite\"></i>\n  </div>\n}\n</div>\n", styles: [".slabel .navicons{opacity:0}.slabel:hover .navicons,.slabel.active .navicons{opacity:1!important}.dropdown-toggle:after{display:none!important}\n"] }]
+            args: [{ selector: 'data-model-list-field-header', imports: [AsyncPipe, NgTemplateOutlet, NgbDropdownModule, ModelListSorterComponent], template: "<ng-template #label>\n  <span #ref><ng-content></ng-content></span>\n  @if (!ref.children.length) {\n    <span>{{ list().fields.get(field())?.label || field() }}</span>\n  }\n</ng-template>\n<div class=\"d-flex flex-row justify-content-between align-items-end slabel\">\n  <div class=\"flex-grow-1\">\n    @if (sort() && dispSortMode() === \"side\") {\n      <data-model-list-sorter [list]=\"list()\" [field]=\"sortField() || field()\">\n        <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n      </data-model-list-sorter>\n    }\n    @if (!sort() || dispSortMode() === \"hide\") {\n      <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n    }\n  </div>\n  @if (dispMenuMode() === \"side\") {\n    <div class=\"navicons d-flex flex-row\" [attr.aria-label]=\"'Gestion champs'\">\n      <i\n        class=\"bi bi-caret-left-fill\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"D\u00E9placer vers la gauche\"\n        (click)=\"list().fields.move(field(), 'before')\"\n        (keydown.enter)=\"list().fields.move(field(), 'before')\"\n        (keydown.space)=\"$event.preventDefault(); list().fields.move(field(), 'before')\"\n      ></i>\n      <div ngbDropdown #mnu=\"ngbDropdown\" [container]=\"'body'\">\n        <i class=\"bi bi-record\" ngbDropdownToggle aria-label=\"Ouvrir la boite de dialogue des champs\" role=\"button\"></i>\n        <div ngbDropdownMenu>\n          <button ngbDropdownItem (click)=\"disable()\">\n            <i class=\"bi bi-trash me-2\"></i>\n            Supprimer\n          </button>\n          <h6 class=\"dropdown-header\">Ajouter une colonne apr\u00E8s</h6>\n          @for (f of list().fields.fields | async; track f) {\n            @if (f.allowed && !f.enabled) {\n              <button ngbDropdownItem (click)=\"enable(f)\" [attr.aria-label]=\"f.label || f.name\">\n                <i class=\"bi bi-plus-circle me-2\"></i>\n                {{ f.label || f.name }}\n              </button>\n            }\n          }\n        </div>\n      </div>\n      <i\n        class=\"bi bi-caret-right-fill\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"D\u00E9placer vers la droite\"\n        (click)=\"list().fields.move(field(), 'after')\"\n        (keydown.enter)=\"list().fields.move(field(), 'after')\"\n        (keydown.space)=\"$event.preventDefault(); list().fields.move(field(), 'after')\"\n      ></i>\n    </div>\n  }\n</div>\n", styles: [".slabel .navicons{opacity:0}.slabel:hover .navicons,.slabel.active .navicons{opacity:1!important}.dropdown-toggle:after{display:none!important}\n"] }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], sortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortField", required: false }] }], menuMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuMode", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }, { type: i0.Output, args: ["displayChange"] }], mnu: [{
                 type: ViewChild,
                 args: ['mnu', { static: false }]
@@ -3531,9 +3590,7 @@ class ModelListFiltersSelectComponent {
      */
     ngOnInit() {
         if (this.mode() === 'select') {
-            this.selectForm.valueChanges
-                .pipe(takeUntilDestroyed(this.destroy$))
-                .subscribe((f) => {
+            this.selectForm.valueChanges.pipe(takeUntilDestroyed(this.destroy$)).subscribe((f) => {
                 if (f) {
                     f.enabled = !f.enabled;
                     this.list().filters.update();
@@ -3542,14 +3599,33 @@ class ModelListFiltersSelectComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListFiltersSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ModelListFiltersSelectComponent, isStandalone: true, selector: "data-model-list-filters-select", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, containerClasses: { classPropertyName: "containerClasses", publicName: "containerClasses", isSignal: true, isRequired: false, transformFunction: null }, itemActiveClasses: { classPropertyName: "itemActiveClasses", publicName: "itemActiveClasses", isSignal: true, isRequired: false, transformFunction: null }, itemInactiveClasses: { classPropertyName: "itemInactiveClasses", publicName: "itemInactiveClasses", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n@if (mode()==='badge') {\n  @for (f of list().filters.available|async; track f) {\n    <span (click)=\"toggle(f)\" [class]=\"containerClasses()\">@if (f.enabled) {\n      <span role=\"button\" [class]=\"itemActiveClasses()\" [title]=\"f.desc\"><i class=\"bi bi-check2-square me-2\"></i><span>{{f.label}}</span></span>\n      }@if (!f.enabled) {\n      <span role=\"button\" [class]=\"itemInactiveClasses()\" [title]=\"f.desc\"><i class=\"bi bi-square me-2\"></i><span>{{f.label}}</span></span>\n    }</span>\n  }\n}\n@if (mode()==='badge_summary') {\n  @for (f of list().filters.available|async; track f) {\n    <span (click)=\"toggle(f)\" [class]=\"containerClasses()\">@if (f.enabled) {\n      <span role=\"button\" [class]=\"itemActiveClasses()\" [title]=\"f.desc\"><i class=\"bi bi-check2-square me-2\"></i><span>{{f.label}} : {{f.summary||'...'}}</span></span>\n    }</span>\n  }\n}\n@if (mode()==='select') {\n  <select class=\"form-select\" [formControl]=\"selectForm\">\n    <option [ngValue]=\"null\">-- Ajouter un filtre --</option>\n    @for (f of list().filters.available|async; track f) {\n      @if (!f.enabled && !f.group) {\n        <option [ngValue]=\"f\">{{f.label}}</option>\n      }\n    }\n    @for (g of list().filters.groups|async; track g) {\n      <optgroup [label]=\"g.label\">\n        @for (f of g.filters; track f) {\n          @if (!f.enabled && f.allowed) {\n            <option [ngValue]=\"f\">{{f.label}}</option>\n          }\n        }\n      </optgroup>\n    }\n  </select>\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListFiltersSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ModelListFiltersSelectComponent, isStandalone: true, selector: "data-model-list-filters-select", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, containerClasses: { classPropertyName: "containerClasses", publicName: "containerClasses", isSignal: true, isRequired: false, transformFunction: null }, itemActiveClasses: { classPropertyName: "itemActiveClasses", publicName: "itemActiveClasses", isSignal: true, isRequired: false, transformFunction: null }, itemInactiveClasses: { classPropertyName: "itemInactiveClasses", publicName: "itemInactiveClasses", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (mode() === \"badge\") {\n  @for (f of list().filters.available | async; track f) {\n    <span\n      (click)=\"toggle(f)\"\n      [class]=\"containerClasses()\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-pressed]=\"f.enabled\"\n      [attr.aria-label]=\"f.label\"\n      (keydown.enter)=\"toggle(f)\"\n      (keydown.space)=\"$event.preventDefault(); toggle(f)\"\n    >\n      @if (f.enabled) {\n        <span [class]=\"itemActiveClasses()\" [title]=\"f.desc\">\n          <i class=\"bi bi-check2-square me-2\"></i>\n          <span>{{ f.label }}</span>\n        </span>\n      }\n      @if (!f.enabled) {\n        <span [class]=\"itemInactiveClasses()\" [title]=\"f.desc\">\n          <i class=\"bi bi-square me-2\"></i>\n          <span>{{ f.label }}</span>\n        </span>\n      }\n    </span>\n  }\n}\n@if (mode() === \"badge_summary\") {\n  @for (f of list().filters.available | async; track f) {\n    <span\n      (click)=\"toggle(f)\"\n      [class]=\"containerClasses()\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-pressed]=\"f.enabled\"\n      [attr.aria-label]=\"f.label\"\n      (keydown.enter)=\"toggle(f)\"\n      (keydown.space)=\"$event.preventDefault(); toggle(f)\"\n    >\n      @if (f.enabled) {\n        <span [class]=\"itemActiveClasses()\" [title]=\"f.desc\">\n          <i class=\"bi bi-check2-square me-2\"></i>\n          <span>{{ f.label }} : {{ f.summary || \"...\" }}</span>\n        </span>\n      }\n    </span>\n  }\n}\n@if (mode() === \"select\") {\n  <select class=\"form-select\" [formControl]=\"selectForm\">\n    <option [ngValue]=\"null\">-- Ajouter un filtre --</option>\n    @for (f of list().filters.available | async; track f) {\n      @if (!f.enabled && !f.group) {\n        <option [ngValue]=\"f\">{{ f.label }}</option>\n      }\n    }\n    @for (g of list().filters.groups | async; track g) {\n      <optgroup [label]=\"g.label\">\n        @for (f of g.filters; track f) {\n          @if (!f.enabled && f.allowed) {\n            <option [ngValue]=\"f\">{{ f.label }}</option>\n          }\n        }\n      </optgroup>\n    }\n  </select>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListFiltersSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListFiltersSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-filters-select', imports: [AsyncPipe, ReactiveFormsModule], template: "\n@if (mode()==='badge') {\n  @for (f of list().filters.available|async; track f) {\n    <span (click)=\"toggle(f)\" [class]=\"containerClasses()\">@if (f.enabled) {\n      <span role=\"button\" [class]=\"itemActiveClasses()\" [title]=\"f.desc\"><i class=\"bi bi-check2-square me-2\"></i><span>{{f.label}}</span></span>\n      }@if (!f.enabled) {\n      <span role=\"button\" [class]=\"itemInactiveClasses()\" [title]=\"f.desc\"><i class=\"bi bi-square me-2\"></i><span>{{f.label}}</span></span>\n    }</span>\n  }\n}\n@if (mode()==='badge_summary') {\n  @for (f of list().filters.available|async; track f) {\n    <span (click)=\"toggle(f)\" [class]=\"containerClasses()\">@if (f.enabled) {\n      <span role=\"button\" [class]=\"itemActiveClasses()\" [title]=\"f.desc\"><i class=\"bi bi-check2-square me-2\"></i><span>{{f.label}} : {{f.summary||'...'}}</span></span>\n    }</span>\n  }\n}\n@if (mode()==='select') {\n  <select class=\"form-select\" [formControl]=\"selectForm\">\n    <option [ngValue]=\"null\">-- Ajouter un filtre --</option>\n    @for (f of list().filters.available|async; track f) {\n      @if (!f.enabled && !f.group) {\n        <option [ngValue]=\"f\">{{f.label}}</option>\n      }\n    }\n    @for (g of list().filters.groups|async; track g) {\n      <optgroup [label]=\"g.label\">\n        @for (f of g.filters; track f) {\n          @if (!f.enabled && f.allowed) {\n            <option [ngValue]=\"f\">{{f.label}}</option>\n          }\n        }\n      </optgroup>\n    }\n  </select>\n}" }]
+            args: [{ selector: 'data-model-list-filters-select', imports: [AsyncPipe, ReactiveFormsModule], template: "@if (mode() === \"badge\") {\n  @for (f of list().filters.available | async; track f) {\n    <span\n      (click)=\"toggle(f)\"\n      [class]=\"containerClasses()\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-pressed]=\"f.enabled\"\n      [attr.aria-label]=\"f.label\"\n      (keydown.enter)=\"toggle(f)\"\n      (keydown.space)=\"$event.preventDefault(); toggle(f)\"\n    >\n      @if (f.enabled) {\n        <span [class]=\"itemActiveClasses()\" [title]=\"f.desc\">\n          <i class=\"bi bi-check2-square me-2\"></i>\n          <span>{{ f.label }}</span>\n        </span>\n      }\n      @if (!f.enabled) {\n        <span [class]=\"itemInactiveClasses()\" [title]=\"f.desc\">\n          <i class=\"bi bi-square me-2\"></i>\n          <span>{{ f.label }}</span>\n        </span>\n      }\n    </span>\n  }\n}\n@if (mode() === \"badge_summary\") {\n  @for (f of list().filters.available | async; track f) {\n    <span\n      (click)=\"toggle(f)\"\n      [class]=\"containerClasses()\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-pressed]=\"f.enabled\"\n      [attr.aria-label]=\"f.label\"\n      (keydown.enter)=\"toggle(f)\"\n      (keydown.space)=\"$event.preventDefault(); toggle(f)\"\n    >\n      @if (f.enabled) {\n        <span [class]=\"itemActiveClasses()\" [title]=\"f.desc\">\n          <i class=\"bi bi-check2-square me-2\"></i>\n          <span>{{ f.label }} : {{ f.summary || \"...\" }}</span>\n        </span>\n      }\n    </span>\n  }\n}\n@if (mode() === \"select\") {\n  <select class=\"form-select\" [formControl]=\"selectForm\">\n    <option [ngValue]=\"null\">-- Ajouter un filtre --</option>\n    @for (f of list().filters.available | async; track f) {\n      @if (!f.enabled && !f.group) {\n        <option [ngValue]=\"f\">{{ f.label }}</option>\n      }\n    }\n    @for (g of list().filters.groups | async; track g) {\n      <optgroup [label]=\"g.label\">\n        @for (f of g.filters; track f) {\n          @if (!f.enabled && f.allowed) {\n            <option [ngValue]=\"f\">{{ f.label }}</option>\n          }\n        }\n      </optgroup>\n    }\n  </select>\n}\n" }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], containerClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerClasses", required: false }] }], itemActiveClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemActiveClasses", required: false }] }], itemInactiveClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemInactiveClasses", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
 
+let _sequence = 0;
+/**
+ * Returns a document-unique DOM id, as `<prefix>-<n>`.
+ *
+ * Used to wire a `<label [attr.for]>` to the control its template owns: the
+ * widgets in this library are instantiated repeatedly on the same page, so a
+ * hard-coded id would collide and silently break the association.
+ *
+ * The counter is module-level and starts at zero in each JS context, so a
+ * server-rendered page and its client hydration agree as long as components are
+ * created in the same order — which is what Angular does.
+ *
+ * @param prefix identifies the widget, e.g. `data-filter`
+ */
+function uniqueId(prefix) {
+    _sequence += 1;
+    return `${prefix}-${_sequence}`;
+}
+
 /**
  * Widget for {@link ModelListTextFilter}: a text input that pushes what the
  * user types into the filter, debounced by 250 ms so that a burst of keystrokes
@@ -3566,6 +3642,8 @@ class ModelListTextFilterComponent {
     /** CSS classes for the widget's container, overridden by the filter's `displayClasses`. */
     classes = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /** Id shared by the label and its control, so clicking the label focuses it. */
+    inputId = uniqueId('data-filter');
     /** Backs the text input. */
     fc = new FormControl(null);
     destroy$ = inject(DestroyRef);
@@ -3575,14 +3653,14 @@ class ModelListTextFilterComponent {
      * is debounced before updating the filter and refreshing the list.
      */
     ngOnInit() {
-        this.filter().valueChanges
-            .pipe(takeUntilDestroyed(this.destroy$))
+        this.filter()
+            .valueChanges.pipe(takeUntilDestroyed(this.destroy$))
             .subscribe((val) => {
-            this.fc.setValue(val.value, { emitEvent: false });
+            this.fc.setValue(val.value, {
+                emitEvent: false,
+            });
         });
-        this.fc.valueChanges
-            .pipe(debounceTime(250), takeUntilDestroyed(this.destroy$))
-            .subscribe((val) => {
+        this.fc.valueChanges.pipe(debounceTime(250), takeUntilDestroyed(this.destroy$)).subscribe((val) => {
             if (this.filter().set(val, val || '')) {
                 this.list().filters.update();
             }
@@ -3596,12 +3674,12 @@ class ModelListTextFilterComponent {
         this.filter().enabled = false;
         this.list().filters.update();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListTextFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: ModelListTextFilterComponent, isStandalone: true, selector: "data-model-list-text-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <input class=\"form-control\" type=\"text\" [formControl]=\"fc\" [placeholder]=\"filter().help\">\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListTextFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: ModelListTextFilterComponent, isStandalone: true, selector: "data-model-list-text-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <input [attr.id]=\"inputId\" class=\"form-control\" type=\"text\" [formControl]=\"fc\" [placeholder]=\"filter().help\" />\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListTextFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListTextFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-text-filter', imports: [ReactiveFormsModule], template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <input class=\"form-control\" type=\"text\" [formControl]=\"fc\" [placeholder]=\"filter().help\">\n</div>" }]
+            args: [{ selector: 'data-model-list-text-filter', imports: [ReactiveFormsModule], template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <input [attr.id]=\"inputId\" class=\"form-control\" type=\"text\" [formControl]=\"fc\" [placeholder]=\"filter().help\" />\n</div>\n" }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }] } });
 
 /**
@@ -3620,8 +3698,10 @@ class ModelListAutocompleteFilterComponent {
     /** CSS classes for the widget's container, overridden by the filter's `displayClasses`. */
     classes = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /** Id shared by the label and its control, so clicking the label focuses it. */
+    inputId = uniqueId('data-filter');
     /** Backs the typeahead input; its value is the selected model, not a string. */
-    fc = new UntypedFormControl();
+    fc = new FormControl(null);
     /** Bound search function handed to ngb-typeahead. */
     search = this._search.bind(this);
     /** Bound formatter handed to ngb-typeahead for both the input and the results. */
@@ -3639,9 +3719,7 @@ class ModelListAutocompleteFilterComponent {
      */
     ngOnInit() {
         this._setDisplay();
-        this.fc.valueChanges
-            .pipe(debounceTime(250), takeUntilDestroyed(this.destroy$))
-            .subscribe((val) => {
+        this.fc.valueChanges.pipe(debounceTime(250), takeUntilDestroyed(this.destroy$)).subscribe((val) => {
             if (val) {
                 if (this.filter().set(val.id, this._display(val))) {
                     this.list().filters.update();
@@ -3669,8 +3747,8 @@ class ModelListAutocompleteFilterComponent {
         if (!this.filter().scroll) {
             return;
         }
-        const elem = $event.currentTarget.nextElementSibling.getElementsByClassName('active')[0];
-        elem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        const elem = $event.currentTarget.nextElementSibling?.getElementsByClassName('active')[0];
+        elem?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }
     /**
      * Builds the labelling function from the filter's `display` option: a field
@@ -3682,7 +3760,7 @@ class ModelListAutocompleteFilterComponent {
         const display = this.filter().display;
         if (display) {
             if (typeof display === 'string') {
-                this._tpl = (model) => `${model[display]}`;
+                this._tpl = (model) => String(fieldValues(model)[display]);
             }
             else if (typeof display === 'function') {
                 this._tpl = display.bind(this);
@@ -3690,13 +3768,12 @@ class ModelListAutocompleteFilterComponent {
         }
         else {
             this._tpl = (model) => {
-                if (model._display) {
-                    return model._display;
+                const display = model._display;
+                if (display) {
+                    return display;
                 }
                 else {
-                    return `${model['name'] ||
-                        model['title'] ||
-                        model['id']}`;
+                    return String(fieldValues(model)['name'] ?? fieldValues(model)['title'] ?? fieldValues(model)['id']);
                 }
             };
         }
@@ -3722,8 +3799,7 @@ class ModelListAutocompleteFilterComponent {
             const f = {};
             // Generate filter
             for (const k of Object.keys(this.filter().filter)) {
-                if (this.filter().filter[k] !== null ||
-                    this.filter().filter[k] !== undefined) {
+                if (this.filter().filter[k] !== null || this.filter().filter[k] !== undefined) {
                     f[k] = this.filter().filter[k];
                 }
             }
@@ -3735,12 +3811,12 @@ class ModelListAutocompleteFilterComponent {
             return this.filter().queryset.get();
         }), takeUntilDestroyed(this.destroy$));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListAutocompleteFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: ModelListAutocompleteFilterComponent, isStandalone: true, selector: "data-model-list-autocomplete-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <input class=\"form-control\" [formControl]=\"fc\" [ngbTypeahead]=\"search\" [editable]=\"false\" [focusFirst]=\"true\" [inputFormatter]=\"display\" [resultFormatter]=\"display\" [placeholder]=\"filter().help\" (keyup.arrowDown)=\"scrollAction($event)\" (keyup.arrowUp)=\"scrollAction($event)\" #th=\"ngbTypeahead\" [class.tascroll]=\"filter().scroll\">\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1$2.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListAutocompleteFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: ModelListAutocompleteFilterComponent, isStandalone: true, selector: "data-model-list-autocomplete-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <input\n    [attr.id]=\"inputId\"\n    class=\"form-control\"\n    [formControl]=\"fc\"\n    [ngbTypeahead]=\"search\"\n    [editable]=\"false\"\n    [focusFirst]=\"true\"\n    [inputFormatter]=\"display\"\n    [resultFormatter]=\"display\"\n    [placeholder]=\"filter().help\"\n    (keyup.arrowDown)=\"scrollAction($event)\"\n    (keyup.arrowUp)=\"scrollAction($event)\"\n    #th=\"ngbTypeahead\"\n    [class.tascroll]=\"filter().scroll\"\n  />\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListAutocompleteFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListAutocompleteFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-autocomplete-filter', imports: [NgbTypeaheadModule, ReactiveFormsModule], template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <input class=\"form-control\" [formControl]=\"fc\" [ngbTypeahead]=\"search\" [editable]=\"false\" [focusFirst]=\"true\" [inputFormatter]=\"display\" [resultFormatter]=\"display\" [placeholder]=\"filter().help\" (keyup.arrowDown)=\"scrollAction($event)\" (keyup.arrowUp)=\"scrollAction($event)\" #th=\"ngbTypeahead\" [class.tascroll]=\"filter().scroll\">\n</div>" }]
+            args: [{ selector: 'data-model-list-autocomplete-filter', imports: [NgbTypeaheadModule, ReactiveFormsModule], template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <input\n    [attr.id]=\"inputId\"\n    class=\"form-control\"\n    [formControl]=\"fc\"\n    [ngbTypeahead]=\"search\"\n    [editable]=\"false\"\n    [focusFirst]=\"true\"\n    [inputFormatter]=\"display\"\n    [resultFormatter]=\"display\"\n    [placeholder]=\"filter().help\"\n    (keyup.arrowDown)=\"scrollAction($event)\"\n    (keyup.arrowUp)=\"scrollAction($event)\"\n    #th=\"ngbTypeahead\"\n    [class.tascroll]=\"filter().scroll\"\n  />\n</div>\n" }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }] } });
 
 /**
@@ -3767,12 +3843,12 @@ class ModelListAutocompleteMultiFilterComponent extends ModelListAutocompleteFil
         this.list().filters.update();
         this.fc.setValue(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListAutocompleteMultiFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ModelListAutocompleteMultiFilterComponent, isStandalone: true, selector: "data-model-list-autocomplete-multi-filter", usesInheritance: true, ngImport: i0, template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <input class=\"form-control\" [formControl]=\"fc\" [ngbTypeahead]=\"search\" [editable]=\"false\" [focusFirst]=\"true\" [inputFormatter]=\"display\" [resultFormatter]=\"display\" [placeholder]=\"filter().help\" (keyup.arrowDown)=\"scrollAction($event)\" (keyup.arrowUp)=\"scrollAction($event)\" #th=\"ngbTypeahead\" [class.tascroll]=\"filter().scroll\">\n  <div class=\"enabled mt-1\">\n    @for (e of filter().mcurrent$|async; track e) {\n      <div><i class=\"bi bi-trash me-2\" (click)=\"unset(e.value, e.desc)\" role=\"button\"></i>{{e.desc}}</div>\n    }\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1$2.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListAutocompleteMultiFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ModelListAutocompleteMultiFilterComponent, isStandalone: true, selector: "data-model-list-autocomplete-multi-filter", usesInheritance: true, ngImport: i0, template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <input\n    [attr.id]=\"inputId\"\n    class=\"form-control\"\n    [formControl]=\"fc\"\n    [ngbTypeahead]=\"search\"\n    [editable]=\"false\"\n    [focusFirst]=\"true\"\n    [inputFormatter]=\"display\"\n    [resultFormatter]=\"display\"\n    [placeholder]=\"filter().help\"\n    (keyup.arrowDown)=\"scrollAction($event)\"\n    (keyup.arrowUp)=\"scrollAction($event)\"\n    #th=\"ngbTypeahead\"\n    [class.tascroll]=\"filter().scroll\"\n  />\n  <div class=\"enabled mt-1\">\n    @for (e of filter().mcurrent$ | async; track e) {\n      <div>\n        <i\n          class=\"bi bi-trash me-2\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"'Retirer ' + e.desc\"\n          (click)=\"unset(e.value, e.desc)\"\n          (keydown.enter)=\"unset(e.value, e.desc)\"\n          (keydown.space)=\"$event.preventDefault(); unset(e.value, e.desc)\"\n        ></i>\n        {{ e.desc }}\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListAutocompleteMultiFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListAutocompleteMultiFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-autocomplete-multi-filter', imports: [AsyncPipe, NgbTypeaheadModule, ReactiveFormsModule], template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <input class=\"form-control\" [formControl]=\"fc\" [ngbTypeahead]=\"search\" [editable]=\"false\" [focusFirst]=\"true\" [inputFormatter]=\"display\" [resultFormatter]=\"display\" [placeholder]=\"filter().help\" (keyup.arrowDown)=\"scrollAction($event)\" (keyup.arrowUp)=\"scrollAction($event)\" #th=\"ngbTypeahead\" [class.tascroll]=\"filter().scroll\">\n  <div class=\"enabled mt-1\">\n    @for (e of filter().mcurrent$|async; track e) {\n      <div><i class=\"bi bi-trash me-2\" (click)=\"unset(e.value, e.desc)\" role=\"button\"></i>{{e.desc}}</div>\n    }\n  </div>\n</div>" }]
+            args: [{ selector: 'data-model-list-autocomplete-multi-filter', imports: [AsyncPipe, NgbTypeaheadModule, ReactiveFormsModule], template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <input\n    [attr.id]=\"inputId\"\n    class=\"form-control\"\n    [formControl]=\"fc\"\n    [ngbTypeahead]=\"search\"\n    [editable]=\"false\"\n    [focusFirst]=\"true\"\n    [inputFormatter]=\"display\"\n    [resultFormatter]=\"display\"\n    [placeholder]=\"filter().help\"\n    (keyup.arrowDown)=\"scrollAction($event)\"\n    (keyup.arrowUp)=\"scrollAction($event)\"\n    #th=\"ngbTypeahead\"\n    [class.tascroll]=\"filter().scroll\"\n  />\n  <div class=\"enabled mt-1\">\n    @for (e of filter().mcurrent$ | async; track e) {\n      <div>\n        <i\n          class=\"bi bi-trash me-2\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"'Retirer ' + e.desc\"\n          (click)=\"unset(e.value, e.desc)\"\n          (keydown.enter)=\"unset(e.value, e.desc)\"\n          (keydown.space)=\"$event.preventDefault(); unset(e.value, e.desc)\"\n        ></i>\n        {{ e.desc }}\n      </div>\n    }\n  </div>\n</div>\n" }]
         }] });
 
 /**
@@ -3790,23 +3866,25 @@ class ModelListDatetimeFilterComponent {
     /** CSS classes for the widget's container, overridden by the filter's `displayClasses`. */
     classes = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /** Id shared by the label and its control, so clicking the label focuses it. */
+    inputId = uniqueId('data-filter');
     /** Backs the date/time input. */
-    fc = new FormControl();
+    fc = new FormControl(null);
     destroy$ = inject(DestroyRef);
     /**
      * Binds the input to the filter both ways, debouncing changes by 250 ms
      * before refreshing the list.
      */
     ngOnInit() {
-        this.filter().valueChanges
-            .pipe(takeUntilDestroyed(this.destroy$))
+        this.filter()
+            .valueChanges.pipe(takeUntilDestroyed(this.destroy$))
             .subscribe((val) => {
-            this.fc.setValue(val.value, { emitEvent: false });
+            this.fc.setValue(val.value, {
+                emitEvent: false,
+            });
         });
-        this.fc.valueChanges
-            .pipe(debounceTime(250), takeUntilDestroyed(this.destroy$))
-            .subscribe((val) => {
-            if (this.filter().set(val, val)) {
+        this.fc.valueChanges.pipe(debounceTime(250), takeUntilDestroyed(this.destroy$)).subscribe((val) => {
+            if (this.filter().set(val, val ?? '')) {
                 this.list().filters.update();
             }
         });
@@ -3819,12 +3897,12 @@ class ModelListDatetimeFilterComponent {
         this.filter().enabled = false;
         this.list().filters.update();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListDatetimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: ModelListDatetimeFilterComponent, isStandalone: true, selector: "data-model-list-datetime-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <input class=\"form-control\" type=\"datetime-local\" [formControl]=\"fc\" [placeholder]=\"filter().help\">\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListDatetimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: ModelListDatetimeFilterComponent, isStandalone: true, selector: "data-model-list-datetime-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <input\n    [attr.id]=\"inputId\"\n    class=\"form-control\"\n    type=\"datetime-local\"\n    [formControl]=\"fc\"\n    [placeholder]=\"filter().help\"\n  />\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListDatetimeFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListDatetimeFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-datetime-filter', imports: [ReactiveFormsModule], template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <input class=\"form-control\" type=\"datetime-local\" [formControl]=\"fc\" [placeholder]=\"filter().help\">\n</div>" }]
+            args: [{ selector: 'data-model-list-datetime-filter', imports: [ReactiveFormsModule], template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <input\n    [attr.id]=\"inputId\"\n    class=\"form-control\"\n    type=\"datetime-local\"\n    [formControl]=\"fc\"\n    [placeholder]=\"filter().help\"\n  />\n</div>\n" }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }] } });
 
 /**
@@ -3842,6 +3920,8 @@ class ModelListDatetimeRangeFilterComponent {
     /** CSS classes for the widget's container, overridden by the filter's `displayClasses`. */
     classes = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /** Id shared by the label and its control, so clicking the label focuses it. */
+    inputId = uniqueId('data-filter');
     /** Backs the interval's start input. */
     fc1 = new FormControl();
     /** Backs the interval's end input. */
@@ -3852,12 +3932,12 @@ class ModelListDatetimeRangeFilterComponent {
      * both filled in, and splits an incoming value back across the two inputs.
      */
     ngOnInit() {
-        this.filter().valueChanges
-            .pipe(takeUntilDestroyed(this.destroy$))
+        this.filter()
+            .valueChanges.pipe(takeUntilDestroyed(this.destroy$))
             .subscribe((val) => {
             // If value is not an array, return
             if (val && !Array.isArray(val)) {
-                const [v1, v2] = val.value.split('--');
+                const [v1, v2] = String(val.value).split('--');
                 this.fc1.setValue(v1, { emitEvent: false });
                 this.fc2.setValue(v2, { emitEvent: false });
             }
@@ -3880,12 +3960,12 @@ class ModelListDatetimeRangeFilterComponent {
         this.filter().enabled = false;
         this.list().filters.update();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListDatetimeRangeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: ModelListDatetimeRangeFilterComponent, isStandalone: true, selector: "data-model-list-datetime-range-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <input class=\"form-control form-control-sm mb-1\" type=\"datetime-local\" [formControl]=\"fc1\" [placeholder]=\"filter().help\">\n  <input class=\"form-control form-control-sm\" type=\"datetime-local\" [formControl]=\"fc2\" [placeholder]=\"filter().help\">\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListDatetimeRangeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: ModelListDatetimeRangeFilterComponent, isStandalone: true, selector: "data-model-list-datetime-range-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <input\n    [attr.id]=\"inputId\"\n    class=\"form-control form-control-sm mb-1\"\n    type=\"datetime-local\"\n    [formControl]=\"fc1\"\n    [placeholder]=\"filter().help\"\n  />\n  <input class=\"form-control form-control-sm\" type=\"datetime-local\" [formControl]=\"fc2\" [placeholder]=\"filter().help\" />\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListDatetimeRangeFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListDatetimeRangeFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-datetime-range-filter', imports: [ReactiveFormsModule], template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <input class=\"form-control form-control-sm mb-1\" type=\"datetime-local\" [formControl]=\"fc1\" [placeholder]=\"filter().help\">\n  <input class=\"form-control form-control-sm\" type=\"datetime-local\" [formControl]=\"fc2\" [placeholder]=\"filter().help\">\n</div>" }]
+            args: [{ selector: 'data-model-list-datetime-range-filter', imports: [ReactiveFormsModule], template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <input\n    [attr.id]=\"inputId\"\n    class=\"form-control form-control-sm mb-1\"\n    type=\"datetime-local\"\n    [formControl]=\"fc1\"\n    [placeholder]=\"filter().help\"\n  />\n  <input class=\"form-control form-control-sm\" type=\"datetime-local\" [formControl]=\"fc2\" [placeholder]=\"filter().help\" />\n</div>\n" }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }] } });
 
 /**
@@ -3903,6 +3983,8 @@ class ModelListFlagsFilterComponent {
     /** CSS classes for the widget's container, overridden by the filter's `displayClasses`. */
     classes = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /** Id shared by the label and its control, so clicking the label focuses it. */
+    inputId = uniqueId('data-filter');
     /** Backs the dropdown; reset to `null` after each pick. */
     fc = new FormControl(null);
     /** The available flags and their counts, fetched once on init. */
@@ -3916,9 +3998,7 @@ class ModelListFlagsFilterComponent {
     ngOnInit() {
         if (this.filter().collection && this.filter().action) {
             this.flags$ = this.filter().collection.action(null, 'GET', this.filter().action);
-            this.fc.valueChanges
-                .pipe(debounceTime(250), takeUntilDestroyed(this.destroy$))
-                .subscribe((val) => {
+            this.fc.valueChanges.pipe(debounceTime(250), takeUntilDestroyed(this.destroy$)).subscribe((val) => {
                 if (val !== null) {
                     if (this.filter().set(val, val)) {
                         this.list().filters.update();
@@ -3948,12 +4028,12 @@ class ModelListFlagsFilterComponent {
         this.filter().enabled = false;
         this.list().filters.update();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListFlagsFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ModelListFlagsFilterComponent, isStandalone: true, selector: "data-model-list-flags-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <select class=\"form-select\" [formControl]=\"fc\">\n    <option [ngValue]=\"null\">-- {{filter().help}} --</option>\n    @for (c of flags$|async; track c) {\n      <option [ngValue]=\"c.flag\">{{c.flag}} ({{c.count}})</option>\n    }\n  </select>\n  <div class=\"enabled mt-1\">\n    @for (e of filter().mcurrent$|async; track e) {\n      <div><i class=\"bi bi-trash me-2\" (click)=\"unset(e.value, e.desc)\" role=\"button\"></i>{{e.desc}}</div>\n    }\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListFlagsFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ModelListFlagsFilterComponent, isStandalone: true, selector: "data-model-list-flags-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <select [attr.id]=\"inputId\" class=\"form-select\" [formControl]=\"fc\">\n    <option [ngValue]=\"null\">-- {{ filter().help }} --</option>\n    @for (c of flags$ | async; track c) {\n      <option [ngValue]=\"c.flag\">{{ c.flag }} ({{ c.count }})</option>\n    }\n  </select>\n  <div class=\"enabled mt-1\">\n    @for (e of filter().mcurrent$ | async; track e) {\n      <div>\n        <i\n          class=\"bi bi-trash me-2\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"'Retirer ' + e.desc\"\n          (click)=\"unset(e.value, e.desc)\"\n          (keydown.enter)=\"unset(e.value, e.desc)\"\n          (keydown.space)=\"$event.preventDefault(); unset(e.value, e.desc)\"\n        ></i>\n        {{ e.desc }}\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListFlagsFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListFlagsFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-flags-filter', imports: [AsyncPipe, ReactiveFormsModule], template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <select class=\"form-select\" [formControl]=\"fc\">\n    <option [ngValue]=\"null\">-- {{filter().help}} --</option>\n    @for (c of flags$|async; track c) {\n      <option [ngValue]=\"c.flag\">{{c.flag}} ({{c.count}})</option>\n    }\n  </select>\n  <div class=\"enabled mt-1\">\n    @for (e of filter().mcurrent$|async; track e) {\n      <div><i class=\"bi bi-trash me-2\" (click)=\"unset(e.value, e.desc)\" role=\"button\"></i>{{e.desc}}</div>\n    }\n  </div>\n</div>" }]
+            args: [{ selector: 'data-model-list-flags-filter', imports: [AsyncPipe, ReactiveFormsModule], template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <select [attr.id]=\"inputId\" class=\"form-select\" [formControl]=\"fc\">\n    <option [ngValue]=\"null\">-- {{ filter().help }} --</option>\n    @for (c of flags$ | async; track c) {\n      <option [ngValue]=\"c.flag\">{{ c.flag }} ({{ c.count }})</option>\n    }\n  </select>\n  <div class=\"enabled mt-1\">\n    @for (e of filter().mcurrent$ | async; track e) {\n      <div>\n        <i\n          class=\"bi bi-trash me-2\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"'Retirer ' + e.desc\"\n          (click)=\"unset(e.value, e.desc)\"\n          (keydown.enter)=\"unset(e.value, e.desc)\"\n          (keydown.space)=\"$event.preventDefault(); unset(e.value, e.desc)\"\n        ></i>\n        {{ e.desc }}\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }] } });
 
 /**
@@ -3974,8 +4054,10 @@ class ModelListGeodistanceFilterComponent {
     /** CSS classes for the widget's container, overridden by the filter's `displayClasses`. */
     classes = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /** Id shared by the label and its control, so clicking the label focuses it. */
+    inputId = uniqueId('data-filter');
     /** Backs the place typeahead; its value is a {@link GeoSearchResult}. */
-    fc = new FormControl();
+    fc = new FormControl(null);
     /** Backs the distance dropdown; its value pairs an operator and a distance, e.g. `'lte,50'`. */
     fd = new FormControl('');
     /** Bound search function handed to ngb-typeahead. */
@@ -3994,7 +4076,7 @@ class ModelListGeodistanceFilterComponent {
         combineLatest([address, distance])
             .pipe(takeUntilDestroyed(this.destroy$))
             .subscribe(([val, dist]) => {
-            if (this.filter().set(`${dist},${val.lng},${val.lat}`, val.label)) {
+            if (this.filter().set(`${String(dist)},${val.lng},${val.lat}`, val.label)) {
                 this.list().filters.update();
             }
         });
@@ -4027,15 +4109,15 @@ class ModelListGeodistanceFilterComponent {
         if (!this.filter().scroll) {
             return;
         }
-        const elem = $event.currentTarget.nextElementSibling.getElementsByClassName('active')[0];
-        elem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        const elem = $event.currentTarget.nextElementSibling?.getElementsByClassName('active')[0];
+        elem?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListGeodistanceFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: ModelListGeodistanceFilterComponent, isStandalone: true, selector: "data-model-list-geodistance-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <div class=\"row g-1\">\n    <div class=\"col-4\">\n      <select class=\"form-select\" [formControl]=\"fd\">\n        <option value=\"\">Distance</option>\n        <option value=\"lte,10\">< 10 km</option>\n        <option value=\"lte,20\">< 20 km</option>\n        <option value=\"lte,30\">< 30 km</option>\n        <option value=\"lte,50\">< 50 km</option>\n        <option value=\"lte,80\">< 80 km</option>\n        <option value=\"lte,100\">< 100 km</option>\n        <option value=\"lte,150\">< 150 km</option>\n        <option value=\"lte,200\">< 200 km</option>\n        <option value=\"lte,250\">< 250 km</option>\n        <option value=\"lte,300\">< 300 km</option>\n        <option value=\"lte,500\">< 500 km</option>\n        <option value=\"lte,1000\">< 1000 km</option>\n      </select>\n    </div>\n    <div class=\"col-8\">\n      <input class=\"form-control\" [formControl]=\"fc\" [ngbTypeahead]=\"search\" [editable]=\"false\" [focusFirst]=\"true\" [inputFormatter]=\"display\" [resultFormatter]=\"display\" [placeholder]=\"filter().help\" (keyup.arrowDown)=\"scrollAction($event)\" (keyup.arrowUp)=\"scrollAction($event)\" #th=\"ngbTypeahead\" [class.tascroll]=\"filter().scroll\">\n    </div>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1$2.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListGeodistanceFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: ModelListGeodistanceFilterComponent, isStandalone: true, selector: "data-model-list-geodistance-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <div class=\"row g-1\">\n    <div class=\"col-4\">\n      <select [attr.id]=\"inputId\" class=\"form-select\" [formControl]=\"fd\">\n        <option value=\"\">Distance</option>\n        <option value=\"lte,10\">< 10 km</option>\n        <option value=\"lte,20\">< 20 km</option>\n        <option value=\"lte,30\">< 30 km</option>\n        <option value=\"lte,50\">< 50 km</option>\n        <option value=\"lte,80\">< 80 km</option>\n        <option value=\"lte,100\">< 100 km</option>\n        <option value=\"lte,150\">< 150 km</option>\n        <option value=\"lte,200\">< 200 km</option>\n        <option value=\"lte,250\">< 250 km</option>\n        <option value=\"lte,300\">< 300 km</option>\n        <option value=\"lte,500\">< 500 km</option>\n        <option value=\"lte,1000\">< 1000 km</option>\n      </select>\n    </div>\n    <div class=\"col-8\">\n      <input\n        class=\"form-control\"\n        [formControl]=\"fc\"\n        [ngbTypeahead]=\"search\"\n        [editable]=\"false\"\n        [focusFirst]=\"true\"\n        [inputFormatter]=\"display\"\n        [resultFormatter]=\"display\"\n        [placeholder]=\"filter().help\"\n        (keyup.arrowDown)=\"scrollAction($event)\"\n        (keyup.arrowUp)=\"scrollAction($event)\"\n        #th=\"ngbTypeahead\"\n        [class.tascroll]=\"filter().scroll\"\n      />\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListGeodistanceFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListGeodistanceFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-geodistance-filter', imports: [NgbTypeaheadModule, ReactiveFormsModule], template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <div class=\"row g-1\">\n    <div class=\"col-4\">\n      <select class=\"form-select\" [formControl]=\"fd\">\n        <option value=\"\">Distance</option>\n        <option value=\"lte,10\">< 10 km</option>\n        <option value=\"lte,20\">< 20 km</option>\n        <option value=\"lte,30\">< 30 km</option>\n        <option value=\"lte,50\">< 50 km</option>\n        <option value=\"lte,80\">< 80 km</option>\n        <option value=\"lte,100\">< 100 km</option>\n        <option value=\"lte,150\">< 150 km</option>\n        <option value=\"lte,200\">< 200 km</option>\n        <option value=\"lte,250\">< 250 km</option>\n        <option value=\"lte,300\">< 300 km</option>\n        <option value=\"lte,500\">< 500 km</option>\n        <option value=\"lte,1000\">< 1000 km</option>\n      </select>\n    </div>\n    <div class=\"col-8\">\n      <input class=\"form-control\" [formControl]=\"fc\" [ngbTypeahead]=\"search\" [editable]=\"false\" [focusFirst]=\"true\" [inputFormatter]=\"display\" [resultFormatter]=\"display\" [placeholder]=\"filter().help\" (keyup.arrowDown)=\"scrollAction($event)\" (keyup.arrowUp)=\"scrollAction($event)\" #th=\"ngbTypeahead\" [class.tascroll]=\"filter().scroll\">\n    </div>\n  </div>\n</div>" }]
+            args: [{ selector: 'data-model-list-geodistance-filter', imports: [NgbTypeaheadModule, ReactiveFormsModule], template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <div class=\"row g-1\">\n    <div class=\"col-4\">\n      <select [attr.id]=\"inputId\" class=\"form-select\" [formControl]=\"fd\">\n        <option value=\"\">Distance</option>\n        <option value=\"lte,10\">< 10 km</option>\n        <option value=\"lte,20\">< 20 km</option>\n        <option value=\"lte,30\">< 30 km</option>\n        <option value=\"lte,50\">< 50 km</option>\n        <option value=\"lte,80\">< 80 km</option>\n        <option value=\"lte,100\">< 100 km</option>\n        <option value=\"lte,150\">< 150 km</option>\n        <option value=\"lte,200\">< 200 km</option>\n        <option value=\"lte,250\">< 250 km</option>\n        <option value=\"lte,300\">< 300 km</option>\n        <option value=\"lte,500\">< 500 km</option>\n        <option value=\"lte,1000\">< 1000 km</option>\n      </select>\n    </div>\n    <div class=\"col-8\">\n      <input\n        class=\"form-control\"\n        [formControl]=\"fc\"\n        [ngbTypeahead]=\"search\"\n        [editable]=\"false\"\n        [focusFirst]=\"true\"\n        [inputFormatter]=\"display\"\n        [resultFormatter]=\"display\"\n        [placeholder]=\"filter().help\"\n        (keyup.arrowDown)=\"scrollAction($event)\"\n        (keyup.arrowUp)=\"scrollAction($event)\"\n        #th=\"ngbTypeahead\"\n        [class.tascroll]=\"filter().scroll\"\n      />\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }] } });
 
 /**
@@ -4053,6 +4135,8 @@ class ModelListSelectFilterComponent {
     /** CSS classes for the widget's container, overridden by the filter's `displayClasses`. */
     classes = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /** Id shared by the label and its control, so clicking the label focuses it. */
+    inputId = uniqueId('data-filter');
     /** Backs the dropdown; `null` means no selection. */
     fc = new FormControl(null);
     destroy$ = inject(DestroyRef);
@@ -4062,17 +4146,12 @@ class ModelListSelectFilterComponent {
      * choices stream is combined in rather than merely rendered.
      */
     ngOnInit() {
-        this.filter().valueChanges
-            .pipe(takeUntilDestroyed(this.destroy$))
+        this.filter()
+            .valueChanges.pipe(takeUntilDestroyed(this.destroy$))
             .subscribe((val) => {
-            this.fc.setValue(val ? val.value : null, {
-                emitEvent: false,
-            });
+            this.fc.setValue(val ? val.value : null, { emitEvent: false });
         });
-        combineLatest([
-            this.filter().choices,
-            this.fc.valueChanges.pipe(debounceTime(250)),
-        ])
+        combineLatest([this.filter().choices, this.fc.valueChanges.pipe(debounceTime(250))])
             .pipe(takeUntilDestroyed(this.destroy$))
             .subscribe(([choices, val]) => {
             if (val === null) {
@@ -4099,12 +4178,12 @@ class ModelListSelectFilterComponent {
         this.filter().enabled = false;
         this.list().filters.update();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListSelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ModelListSelectFilterComponent, isStandalone: true, selector: "data-model-list-select-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <select class=\"form-select\" [formControl]=\"fc\">\n    <option [ngValue]=\"null\">-- {{filter().help}} --</option>\n    @for (c of filter().choices|async; track c) {\n      <option [ngValue]=\"c.value\">{{c.desc}}</option>\n    }\n  </select>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListSelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ModelListSelectFilterComponent, isStandalone: true, selector: "data-model-list-select-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <select [attr.id]=\"inputId\" class=\"form-select\" [formControl]=\"fc\">\n    <option [ngValue]=\"null\">-- {{ filter().help }} --</option>\n    @for (c of filter().choices | async; track c) {\n      <option [ngValue]=\"c.value\">{{ c.desc }}</option>\n    }\n  </select>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListSelectFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListSelectFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-select-filter', imports: [AsyncPipe, ReactiveFormsModule], template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <select class=\"form-select\" [formControl]=\"fc\">\n    <option [ngValue]=\"null\">-- {{filter().help}} --</option>\n    @for (c of filter().choices|async; track c) {\n      <option [ngValue]=\"c.value\">{{c.desc}}</option>\n    }\n  </select>\n</div>" }]
+            args: [{ selector: 'data-model-list-select-filter', imports: [AsyncPipe, ReactiveFormsModule], template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <select [attr.id]=\"inputId\" class=\"form-select\" [formControl]=\"fc\">\n    <option [ngValue]=\"null\">-- {{ filter().help }} --</option>\n    @for (c of filter().choices | async; track c) {\n      <option [ngValue]=\"c.value\">{{ c.desc }}</option>\n    }\n  </select>\n</div>\n" }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }] } });
 
 /**
@@ -4122,6 +4201,8 @@ class ModelListSelectMultiFilterComponent {
     /** CSS classes for the widget's container, overridden by the filter's `displayClasses`. */
     classes = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /** Id shared by the label and its control, so clicking the label focuses it. */
+    inputId = uniqueId('data-filter');
     /** Backs the dropdown; reset to `null` after each pick so the same option can be re-picked. */
     fc = new FormControl(null);
     destroy$ = inject(DestroyRef);
@@ -4131,10 +4212,7 @@ class ModelListSelectMultiFilterComponent {
      * the picked value's description for its chip.
      */
     ngOnInit() {
-        combineLatest([
-            this.filter().choices,
-            this.fc.valueChanges.pipe(debounceTime(250)),
-        ])
+        combineLatest([this.filter().choices, this.fc.valueChanges.pipe(debounceTime(250))])
             .pipe(takeUntilDestroyed(this.destroy$))
             .subscribe(([choices, val]) => {
             for (const ch of choices) {
@@ -4168,12 +4246,12 @@ class ModelListSelectMultiFilterComponent {
         this.filter().enabled = false;
         this.list().filters.update();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListSelectMultiFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ModelListSelectMultiFilterComponent, isStandalone: true, selector: "data-model-list-select-multi-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <select class=\"form-select\" [formControl]=\"fc\">\n    <option [ngValue]=\"null\">-- {{filter().help}} --</option>\n    @for (c of filter().choices|async; track c) {\n      <option [ngValue]=\"c.value\">{{c.desc}}</option>\n    }\n  </select>\n  <div class=\"enabled mt-1\">\n    @for (e of filter().mcurrent$|async; track e) {\n      <div><i class=\"bi bi-trash me-2\" (click)=\"unset(e.value, e.desc)\" role=\"button\"></i>{{e.desc}}</div>\n    }\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListSelectMultiFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ModelListSelectMultiFilterComponent, isStandalone: true, selector: "data-model-list-select-multi-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <select [attr.id]=\"inputId\" class=\"form-select\" [formControl]=\"fc\">\n    <option [ngValue]=\"null\">-- {{ filter().help }} --</option>\n    @for (c of filter().choices | async; track c) {\n      <option [ngValue]=\"c.value\">{{ c.desc }}</option>\n    }\n  </select>\n  <div class=\"enabled mt-1\">\n    @for (e of filter().mcurrent$ | async; track e) {\n      <div>\n        <i\n          class=\"bi bi-trash me-2\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"'Retirer ' + e.desc\"\n          (click)=\"unset(e.value, e.desc)\"\n          (keydown.enter)=\"unset(e.value, e.desc)\"\n          (keydown.space)=\"$event.preventDefault(); unset(e.value, e.desc)\"\n        ></i>\n        {{ e.desc }}\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListSelectMultiFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListSelectMultiFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-select-multi-filter', imports: [AsyncPipe, ReactiveFormsModule], template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <select class=\"form-select\" [formControl]=\"fc\">\n    <option [ngValue]=\"null\">-- {{filter().help}} --</option>\n    @for (c of filter().choices|async; track c) {\n      <option [ngValue]=\"c.value\">{{c.desc}}</option>\n    }\n  </select>\n  <div class=\"enabled mt-1\">\n    @for (e of filter().mcurrent$|async; track e) {\n      <div><i class=\"bi bi-trash me-2\" (click)=\"unset(e.value, e.desc)\" role=\"button\"></i>{{e.desc}}</div>\n    }\n  </div>\n</div>" }]
+            args: [{ selector: 'data-model-list-select-multi-filter', imports: [AsyncPipe, ReactiveFormsModule], template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <select [attr.id]=\"inputId\" class=\"form-select\" [formControl]=\"fc\">\n    <option [ngValue]=\"null\">-- {{ filter().help }} --</option>\n    @for (c of filter().choices | async; track c) {\n      <option [ngValue]=\"c.value\">{{ c.desc }}</option>\n    }\n  </select>\n  <div class=\"enabled mt-1\">\n    @for (e of filter().mcurrent$ | async; track e) {\n      <div>\n        <i\n          class=\"bi bi-trash me-2\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"'Retirer ' + e.desc\"\n          (click)=\"unset(e.value, e.desc)\"\n          (keydown.enter)=\"unset(e.value, e.desc)\"\n          (keydown.space)=\"$event.preventDefault(); unset(e.value, e.desc)\"\n        ></i>\n        {{ e.desc }}\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }] } });
 
 /**
@@ -4199,8 +4277,9 @@ class Level {
         this.fc = new FormControl('');
         this.choices = choices;
         this.subs = this.fc.valueChanges.subscribe((val) => {
-            if (this.selected !== val) {
-                this.selected = val;
+            const selected = val ? Number(val) : undefined;
+            if (this.selected !== selected) {
+                this.selected = selected;
                 this.tree.updated(this);
             }
         });
@@ -4257,9 +4336,7 @@ class Tree {
         let values = [];
         const levels = this.levels();
         if (levels.length === 0) {
-            values = await firstValueFrom(this.qs
-                .filter({ level: levels.length, parent: 'null', ...this.filter })
-                .get());
+            values = await firstValueFrom(this.qs.filter({ level: levels.length, parent: 'null', ...this.filter }).get());
         }
         else {
             const parent = fparent ? fparent : levels[levels.length - 1].selected;
@@ -4276,7 +4353,7 @@ class Tree {
         if (values.length > 0) {
             const level = new Level(this, levels.length, []);
             for (const v of values) {
-                level.choices.push({ value: v.id, desc: this.display(v) });
+                level.choices.push({ value: v.id, desc: this._label(v) });
             }
             this.levels.update((ls) => [...ls, level]);
             return level;
@@ -4300,7 +4377,7 @@ class Tree {
             }
         }
         this.levels.set(newLevels);
-        this.addLevel();
+        void this.addLevel();
         if (level.selected) {
             this.changed.next(level.selected);
         }
@@ -4323,16 +4400,26 @@ class Tree {
      *   exceeds `maxLevel` without reaching a root, which signals either a cycle
      *   or a `maxLevel` set too low.
      */
+    /** Labels one node: `[display]` as a field name, as a function, or `id`. */
+    _label(node) {
+        if (typeof this.display === 'function') {
+            return this.display(node);
+        }
+        if (typeof this.display === 'string') {
+            return String(fieldValues(node)[this.display]);
+        }
+        return String(node.id);
+    }
     async prepare(value) {
         // console.log('prepare', value);
         const levels = [];
         let cur = (await firstValueFrom(this.qs.filter({ id: value, ...this.filter }).get()))[0];
         levels.push(cur);
         let nlev = 0;
-        while (cur.parent !== null) {
+        while (fieldValues(cur)['parent'] !== null) {
             cur = (await firstValueFrom(this.qs
                 .filter({
-                id: cur.parent,
+                id: fieldValues(cur)['parent'],
                 ...this.filter,
             })
                 .get()))[0];
@@ -4354,7 +4441,9 @@ class Tree {
         }
     }
     /** Empty stub; does nothing. */
-    reset() { }
+    reset() {
+        // Nothing to reset: the tree rebuilds itself from the filter value.
+    }
 }
 /**
  * Widget for {@link ModelListTreeFilter}: a chain of dropdowns, one per level
@@ -4371,6 +4460,8 @@ class ModelListTreeFilterComponent {
     /** CSS classes for the widget's container, overridden by the filter's `displayClasses`. */
     classes = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /** Id shared by the label and its control, so clicking the label focuses it. */
+    inputId = uniqueId('data-filter');
     /** The dropdown chain rendered by the template; built on init. */
     tree;
     destroy$ = inject(DestroyRef);
@@ -4389,9 +4480,7 @@ class ModelListTreeFilterComponent {
         else {
             await this.tree.addLevel();
         }
-        this.tree.changed
-            .pipe(debounceTime(250), takeUntilDestroyed(this.destroy$))
-            .subscribe((val) => {
+        this.tree.changed.pipe(debounceTime(250), takeUntilDestroyed(this.destroy$)).subscribe((val) => {
             if (val === null) {
                 filter.clear();
                 this.list().filters.update();
@@ -4421,12 +4510,12 @@ class ModelListTreeFilterComponent {
         this.filter().enabled = false;
         this.list().filters.update();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListTreeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ModelListTreeFilterComponent, isStandalone: true, selector: "data-model-list-tree-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  @for (l of tree.levels(); track l) {\n    <div class=\"levelselect\">\n      <select class=\"form-select form-select-sm\" [formControl]=\"l.fc\">\n        <option value=\"\">{{filter().help}}</option>\n        @for (ch of l.choices; track ch) {\n          <option [value]=\"ch.value\">{{ch.desc}}</option>\n        }\n      </select>\n    </div>\n  }\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListTreeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ModelListTreeFilterComponent, isStandalone: true, selector: "data-model-list-tree-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  @for (l of tree.levels(); track l) {\n    <div class=\"levelselect\">\n      <select [attr.id]=\"$first ? inputId : null\" class=\"form-select form-select-sm\" [formControl]=\"l.fc\">\n        <option value=\"\">{{ filter().help }}</option>\n        @for (ch of l.choices; track ch) {\n          <option [value]=\"ch.value\">{{ ch.desc }}</option>\n        }\n      </select>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListTreeFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListTreeFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-tree-filter', imports: [ReactiveFormsModule], template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  @for (l of tree.levels(); track l) {\n    <div class=\"levelselect\">\n      <select class=\"form-select form-select-sm\" [formControl]=\"l.fc\">\n        <option value=\"\">{{filter().help}}</option>\n        @for (ch of l.choices; track ch) {\n          <option [value]=\"ch.value\">{{ch.desc}}</option>\n        }\n      </select>\n    </div>\n  }\n</div>" }]
+            args: [{ selector: 'data-model-list-tree-filter', imports: [ReactiveFormsModule], template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  @for (l of tree.levels(); track l) {\n    <div class=\"levelselect\">\n      <select [attr.id]=\"$first ? inputId : null\" class=\"form-select form-select-sm\" [formControl]=\"l.fc\">\n        <option value=\"\">{{ filter().help }}</option>\n        @for (ch of l.choices; track ch) {\n          <option [value]=\"ch.value\">{{ ch.desc }}</option>\n        }\n      </select>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }] } });
 
 /**
@@ -4444,23 +4533,26 @@ class ModelListNumberFilterComponent {
     /** CSS classes for the widget's container, overridden by the filter's `displayClasses`. */
     classes = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /** Id shared by the label and its control, so clicking the label focuses it. */
+    inputId = uniqueId('data-filter');
     /** Backs the number input. */
-    fc = new UntypedFormControl();
+    fc = new FormControl(null);
     destroy$ = inject(DestroyRef);
     /**
      * Binds the input to the filter both ways, debouncing the user's input by
      * 250 ms before updating the filter and refreshing the list.
      */
     ngOnInit() {
-        this.filter().valueChanges
-            .pipe(takeUntilDestroyed(this.destroy$))
+        this.filter()
+            .valueChanges.pipe(takeUntilDestroyed(this.destroy$))
             .subscribe((val) => {
-            this.fc.setValue(val.value, { emitEvent: false });
+            const value = val.value;
+            this.fc.setValue(value === null ? null : Number(value), {
+                emitEvent: false,
+            });
         });
-        this.fc.valueChanges
-            .pipe(debounceTime(250), takeUntilDestroyed(this.destroy$))
-            .subscribe((val) => {
-            if (this.filter().set(val, val)) {
+        this.fc.valueChanges.pipe(debounceTime(250), takeUntilDestroyed(this.destroy$)).subscribe((val) => {
+            if (this.filter().set(val, val === null ? '' : String(val))) {
                 this.list().filters.update();
             }
         });
@@ -4483,12 +4575,12 @@ class ModelListNumberFilterComponent {
         this.filter().setOperator(eq);
         this.list().filters.update();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListNumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ModelListNumberFilterComponent, isStandalone: true, selector: "data-model-list-number-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\">\n    <div class=\"bi bi-trash\"></div>\n  </div>\n  <label>{{filter().label}}</label>\n  <div class=\"input-group\" ngbDropdown>\n    <button class=\"btn btn-outline-secondary\" type=\"button\" ngbDropdownToggle><span class=\"me-2\">{{filter().operator.label}}</span>\n    <div class=\"dropdown-menu\" ngbDropdownMenu>\n      @for (op of filter().operations; track op) {\n        <button ngbDropdownItem (click)=\"selectOp(op.operator)\" [class.text-primary]=\"op.operator === filter().operator.operator\">{{op.label}}</button>\n      }\n    </div>\n  </button>\n  <input class=\"form-control\" type=\"number\" [formControl]=\"fc\" [placeholder]=\"filter().help\">\n</div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$2.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1$2.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListNumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ModelListNumberFilterComponent, isStandalone: true, selector: "data-model-list-number-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <div class=\"bi bi-trash\"></div>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <div class=\"input-group\" ngbDropdown>\n    <button class=\"btn btn-outline-secondary\" type=\"button\" ngbDropdownToggle>\n      <span class=\"me-2\">{{ filter().operator.label }}</span>\n      <div class=\"dropdown-menu\" ngbDropdownMenu>\n        @for (op of filter().operations; track op) {\n          <button\n            ngbDropdownItem\n            (click)=\"selectOp(op.operator)\"\n            [class.text-primary]=\"op.operator === filter().operator.operator\"\n          >\n            {{ op.label }}\n          </button>\n        }\n      </div>\n    </button>\n    <input [attr.id]=\"inputId\" class=\"form-control\" type=\"number\" [formControl]=\"fc\" [placeholder]=\"filter().help\" />\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1$1.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListNumberFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListNumberFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-number-filter', imports: [ReactiveFormsModule, NgbDropdownModule], template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\">\n    <div class=\"bi bi-trash\"></div>\n  </div>\n  <label>{{filter().label}}</label>\n  <div class=\"input-group\" ngbDropdown>\n    <button class=\"btn btn-outline-secondary\" type=\"button\" ngbDropdownToggle><span class=\"me-2\">{{filter().operator.label}}</span>\n    <div class=\"dropdown-menu\" ngbDropdownMenu>\n      @for (op of filter().operations; track op) {\n        <button ngbDropdownItem (click)=\"selectOp(op.operator)\" [class.text-primary]=\"op.operator === filter().operator.operator\">{{op.label}}</button>\n      }\n    </div>\n  </button>\n  <input class=\"form-control\" type=\"number\" [formControl]=\"fc\" [placeholder]=\"filter().help\">\n</div>\n</div>" }]
+            args: [{ selector: 'data-model-list-number-filter', imports: [ReactiveFormsModule, NgbDropdownModule], template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <div class=\"bi bi-trash\"></div>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <div class=\"input-group\" ngbDropdown>\n    <button class=\"btn btn-outline-secondary\" type=\"button\" ngbDropdownToggle>\n      <span class=\"me-2\">{{ filter().operator.label }}</span>\n      <div class=\"dropdown-menu\" ngbDropdownMenu>\n        @for (op of filter().operations; track op) {\n          <button\n            ngbDropdownItem\n            (click)=\"selectOp(op.operator)\"\n            [class.text-primary]=\"op.operator === filter().operator.operator\"\n          >\n            {{ op.label }}\n          </button>\n        }\n      </div>\n    </button>\n    <input [attr.id]=\"inputId\" class=\"form-control\" type=\"number\" [formControl]=\"fc\" [placeholder]=\"filter().help\" />\n  </div>\n</div>\n" }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }] } });
 
 /**
@@ -4506,23 +4598,25 @@ class ModelListDateFilterComponent {
     /** CSS classes for the widget's container, overridden by the filter's `displayClasses`. */
     classes = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /** Id shared by the label and its control, so clicking the label focuses it. */
+    inputId = uniqueId('data-filter');
     /** Backs the date input. */
-    fc = new FormControl();
+    fc = new FormControl(null);
     destroy$ = inject(DestroyRef);
     /**
      * Binds the input to the filter both ways, debouncing changes by 250 ms
      * before refreshing the list.
      */
     ngOnInit() {
-        this.filter().valueChanges
-            .pipe(takeUntilDestroyed(this.destroy$))
+        this.filter()
+            .valueChanges.pipe(takeUntilDestroyed(this.destroy$))
             .subscribe((val) => {
-            this.fc.setValue(val.value, { emitEvent: false });
+            this.fc.setValue(val.value, {
+                emitEvent: false,
+            });
         });
-        this.fc.valueChanges
-            .pipe(debounceTime(250), takeUntilDestroyed(this.destroy$))
-            .subscribe((val) => {
-            if (this.filter().set(val, val)) {
+        this.fc.valueChanges.pipe(debounceTime(250), takeUntilDestroyed(this.destroy$)).subscribe((val) => {
+            if (this.filter().set(val, val ?? '')) {
                 this.list().filters.update();
             }
         });
@@ -4535,12 +4629,12 @@ class ModelListDateFilterComponent {
         this.filter().enabled = false;
         this.list().filters.update();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListDateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: ModelListDateFilterComponent, isStandalone: true, selector: "data-model-list-date-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <input class=\"form-control\" type=\"date\" [formControl]=\"fc\" [placeholder]=\"filter().help\">\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListDateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: ModelListDateFilterComponent, isStandalone: true, selector: "data-model-list-date-filter", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <input [attr.id]=\"inputId\" class=\"form-control\" type=\"date\" [formControl]=\"fc\" [placeholder]=\"filter().help\" />\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListDateFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListDateFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-date-filter', imports: [ReactiveFormsModule], template: "\n<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter().label}}</label>\n  <input class=\"form-control\" type=\"date\" [formControl]=\"fc\" [placeholder]=\"filter().help\">\n</div>" }]
+            args: [{ selector: 'data-model-list-date-filter', imports: [ReactiveFormsModule], template: "<div class=\"filteritem\" [class]=\"filter().displayClasses || classes()\">\n  <div\n    class=\"trash float-end\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'D\u00E9sactiver le filtre ' + filter().label\"\n    (click)=\"disable()\"\n    (keydown.enter)=\"disable()\"\n    (keydown.space)=\"$event.preventDefault(); disable()\"\n  >\n    <i class=\"bi bi-trash\"></i>\n  </div>\n  <label [attr.for]=\"inputId\">{{ filter().label }}</label>\n  <input [attr.id]=\"inputId\" class=\"form-control\" type=\"date\" [formControl]=\"fc\" [placeholder]=\"filter().help\" />\n</div>\n" }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }] } });
 
 // SEE: register filter components and load them dynamically to allow user defined filters
@@ -4571,10 +4665,10 @@ class ModelListFiltersComponent {
      */
     itemClasses = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "itemClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ModelListFiltersComponent, isStandalone: true, selector: "data-model-list-filters", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, containerClasses: { classPropertyName: "containerClasses", publicName: "containerClasses", isSignal: true, isRequired: false, transformFunction: null }, itemClasses: { classPropertyName: "itemClasses", publicName: "itemClasses", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n<div [class]=\"containerClasses()\">\n  @for (f of list().filters.enabled|async; track f) {\n    @switch (f.type) {\n      @case ('autocomplete') {\n        <data-model-list-autocomplete-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-autocomplete-filter>\n      }\n      @case ('autocompletemulti') {\n        <data-model-list-autocomplete-multi-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-autocomplete-multi-filter>\n      }\n      @case ('datetime') {\n        <data-model-list-datetime-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-datetime-filter>\n      }\n      @case ('date') {\n        <data-model-list-date-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-date-filter>\n      }\n      @case ('datetimerange') {\n        <data-model-list-datetime-range-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-datetime-range-filter>\n      }\n      @case ('flags') {\n        <data-model-list-flags-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-flags-filter>\n      }\n      @case ('geodistance') {\n        <data-model-list-geodistance-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-geodistance-filter>\n      }\n      @case ('number') {\n        <data-model-list-number-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-number-filter>\n      }\n      @case ('select') {\n        <data-model-list-select-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-select-filter>\n      }\n      @case ('selectmulti') {\n        <data-model-list-select-multi-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-select-multi-filter>\n      }\n      @case ('text') {\n        <data-model-list-text-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-text-filter>\n      }\n      @case ('tree') {\n        <data-model-list-tree-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-tree-filter>\n      }\n    }\n  }\n</div>", styles: [""], dependencies: [{ kind: "component", type: ModelListTextFilterComponent, selector: "data-model-list-text-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListNumberFilterComponent, selector: "data-model-list-number-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListAutocompleteFilterComponent, selector: "data-model-list-autocomplete-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListAutocompleteMultiFilterComponent, selector: "data-model-list-autocomplete-multi-filter" }, { kind: "component", type: ModelListDatetimeFilterComponent, selector: "data-model-list-datetime-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListDateFilterComponent, selector: "data-model-list-date-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListDatetimeRangeFilterComponent, selector: "data-model-list-datetime-range-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListFlagsFilterComponent, selector: "data-model-list-flags-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListGeodistanceFilterComponent, selector: "data-model-list-geodistance-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListSelectFilterComponent, selector: "data-model-list-select-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListSelectMultiFilterComponent, selector: "data-model-list-select-multi-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListTreeFilterComponent, selector: "data-model-list-tree-filter", inputs: ["list", "filter", "classes"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ModelListFiltersComponent, isStandalone: true, selector: "data-model-list-filters", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, containerClasses: { classPropertyName: "containerClasses", publicName: "containerClasses", isSignal: true, isRequired: false, transformFunction: null }, itemClasses: { classPropertyName: "itemClasses", publicName: "itemClasses", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"containerClasses()\">\n  @for (f of list().filters.enabled | async; track f) {\n    @switch (f.type) {\n      @case (\"autocomplete\") {\n        <data-model-list-autocomplete-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-autocomplete-filter>\n      }\n      @case (\"autocompletemulti\") {\n        <data-model-list-autocomplete-multi-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-autocomplete-multi-filter>\n      }\n      @case (\"datetime\") {\n        <data-model-list-datetime-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-datetime-filter>\n      }\n      @case (\"date\") {\n        <data-model-list-date-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-date-filter>\n      }\n      @case (\"datetimerange\") {\n        <data-model-list-datetime-range-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-datetime-range-filter>\n      }\n      @case (\"flags\") {\n        <data-model-list-flags-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-flags-filter>\n      }\n      @case (\"geodistance\") {\n        <data-model-list-geodistance-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-geodistance-filter>\n      }\n      @case (\"number\") {\n        <data-model-list-number-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-number-filter>\n      }\n      @case (\"select\") {\n        <data-model-list-select-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-select-filter>\n      }\n      @case (\"selectmulti\") {\n        <data-model-list-select-multi-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-select-multi-filter>\n      }\n      @case (\"text\") {\n        <data-model-list-text-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-text-filter>\n      }\n      @case (\"tree\") {\n        <data-model-list-tree-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-tree-filter>\n      }\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ModelListTextFilterComponent, selector: "data-model-list-text-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListNumberFilterComponent, selector: "data-model-list-number-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListAutocompleteFilterComponent, selector: "data-model-list-autocomplete-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListAutocompleteMultiFilterComponent, selector: "data-model-list-autocomplete-multi-filter" }, { kind: "component", type: ModelListDatetimeFilterComponent, selector: "data-model-list-datetime-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListDateFilterComponent, selector: "data-model-list-date-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListDatetimeRangeFilterComponent, selector: "data-model-list-datetime-range-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListFlagsFilterComponent, selector: "data-model-list-flags-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListGeodistanceFilterComponent, selector: "data-model-list-geodistance-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListSelectFilterComponent, selector: "data-model-list-select-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListSelectMultiFilterComponent, selector: "data-model-list-select-multi-filter", inputs: ["list", "filter", "classes"] }, { kind: "component", type: ModelListTreeFilterComponent, selector: "data-model-list-tree-filter", inputs: ["list", "filter", "classes"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListFiltersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListFiltersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'data-model-list-filters', imports: [
                         AsyncPipe,
@@ -4590,7 +4684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         ModelListSelectFilterComponent,
                         ModelListSelectMultiFilterComponent,
                         ModelListTreeFilterComponent,
-                    ], template: "\n<div [class]=\"containerClasses()\">\n  @for (f of list().filters.enabled|async; track f) {\n    @switch (f.type) {\n      @case ('autocomplete') {\n        <data-model-list-autocomplete-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-autocomplete-filter>\n      }\n      @case ('autocompletemulti') {\n        <data-model-list-autocomplete-multi-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-autocomplete-multi-filter>\n      }\n      @case ('datetime') {\n        <data-model-list-datetime-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-datetime-filter>\n      }\n      @case ('date') {\n        <data-model-list-date-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-date-filter>\n      }\n      @case ('datetimerange') {\n        <data-model-list-datetime-range-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-datetime-range-filter>\n      }\n      @case ('flags') {\n        <data-model-list-flags-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-flags-filter>\n      }\n      @case ('geodistance') {\n        <data-model-list-geodistance-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-geodistance-filter>\n      }\n      @case ('number') {\n        <data-model-list-number-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-number-filter>\n      }\n      @case ('select') {\n        <data-model-list-select-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-select-filter>\n      }\n      @case ('selectmulti') {\n        <data-model-list-select-multi-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-select-multi-filter>\n      }\n      @case ('text') {\n        <data-model-list-text-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-text-filter>\n      }\n      @case ('tree') {\n        <data-model-list-tree-filter [filter]=\"$any(f)\" [list]=\"list()\" [class]=\"itemClasses()\"></data-model-list-tree-filter>\n      }\n    }\n  }\n</div>" }]
+                    ], template: "<div [class]=\"containerClasses()\">\n  @for (f of list().filters.enabled | async; track f) {\n    @switch (f.type) {\n      @case (\"autocomplete\") {\n        <data-model-list-autocomplete-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-autocomplete-filter>\n      }\n      @case (\"autocompletemulti\") {\n        <data-model-list-autocomplete-multi-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-autocomplete-multi-filter>\n      }\n      @case (\"datetime\") {\n        <data-model-list-datetime-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-datetime-filter>\n      }\n      @case (\"date\") {\n        <data-model-list-date-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-date-filter>\n      }\n      @case (\"datetimerange\") {\n        <data-model-list-datetime-range-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-datetime-range-filter>\n      }\n      @case (\"flags\") {\n        <data-model-list-flags-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-flags-filter>\n      }\n      @case (\"geodistance\") {\n        <data-model-list-geodistance-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-geodistance-filter>\n      }\n      @case (\"number\") {\n        <data-model-list-number-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-number-filter>\n      }\n      @case (\"select\") {\n        <data-model-list-select-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-select-filter>\n      }\n      @case (\"selectmulti\") {\n        <data-model-list-select-multi-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-select-multi-filter>\n      }\n      @case (\"text\") {\n        <data-model-list-text-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-text-filter>\n      }\n      @case (\"tree\") {\n        <data-model-list-tree-filter\n          [filter]=\"$any(f)\"\n          [list]=\"list()\"\n          [class]=\"itemClasses()\"\n        ></data-model-list-tree-filter>\n      }\n    }\n  }\n</div>\n" }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], containerClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerClasses", required: false }] }], itemClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClasses", required: false }] }] } });
 
 /**
@@ -4727,7 +4821,7 @@ class ModelListAutocompleteFilter extends ModelListFilter {
         this.display = params.display;
         this.searchparam = params.searchparam ? params.searchparam : 'search';
         if (!params.collection && !params.queryset) {
-            throw 'Missing related data (collection or queryset)';
+            throw new Error('Missing related data (collection or queryset)');
         }
         this.collection = params.collection;
         if (params.collection && !params.queryset) {
@@ -4809,12 +4903,12 @@ class ModelListDatetimeFilter extends ModelListFilter {
     /** Sets the filter type to `datetime`. */
     constructor(params) {
         super(params);
-        this.type = "datetime";
-        if (this.label == "") {
-            this.label = "Sélectionnez par date/heure";
+        this.type = 'datetime';
+        if (this.label == '') {
+            this.label = 'Sélectionnez par date/heure';
         }
-        if (this.help == "") {
-            this.help = "Date/heure cible";
+        if (this.help == '') {
+            this.help = 'Date/heure cible';
         }
     }
 }
@@ -4879,12 +4973,12 @@ class ModelListDatetimerangeFilter extends ModelListFilter {
     /** Sets the filter type to `datetimerange`. */
     constructor(params) {
         super(params);
-        this.type = "datetimerange";
-        if (this.label == "") {
-            this.label = "Sélectionnez par intervalle de date/heure";
+        this.type = 'datetimerange';
+        if (this.label == '') {
+            this.label = 'Sélectionnez par intervalle de date/heure';
         }
-        if (this.help == "") {
-            this.help = "Date/heure";
+        if (this.help == '') {
+            this.help = 'Date/heure';
         }
     }
 }
@@ -4940,7 +5034,7 @@ class ModelListFlagsFilter extends ModelListFilter {
             this.help = "Nom de l'étiquette";
         }
         if (!params.collection) {
-            throw 'Missing collection for flags filter';
+            throw new Error('Missing collection for flags filter');
         }
         this.collection = params.collection;
         if (params.action) {
@@ -5080,7 +5174,7 @@ class ModelListNumberFilter extends ModelListFilter {
      * {@link ModelListFilters.update} afterwards to re-run the query.
      */
     setOperator(op) {
-        for (let o of this.operations) {
+        for (const o of this.operations) {
             if (op === o.operator) {
                 this.operator = o;
             }
@@ -5163,14 +5257,14 @@ class ModelListSelectFilter extends ModelListFilter {
             this.help = 'Choix par liste déroulante';
         }
         if (!params.choices && !params.model) {
-            throw 'Missing choices for select filter';
+            throw new Error('Missing choices for select filter');
         }
         if (!params.choices && params.model) {
             const m = new params.model();
             const f = m.FM(params.mfield || params.field);
             const ch = f.choices;
             if (!ch) {
-                throw 'No choices found for model/field';
+                throw new Error('No choices found for model/field');
             }
             this.choices = of(ch);
         }
@@ -5188,7 +5282,9 @@ class ModelListSelectFilter extends ModelListFilter {
         }
     }
     /** Empty stub; the constructor applies `default` itself. Does nothing. */
-    setDefault() { }
+    setDefault() {
+        // The choices carry their own default; nothing to seed here.
+    }
 }
 
 /**
@@ -5223,15 +5319,6 @@ class ModelListSelectFilter extends ModelListFilter {
 class ModelListSelectMultiFilter extends ModelListSelectFilter {
     /** Always `true`: this filter joins its values into one query parameter. */
     multi = true;
-    // `default` is inherited from ModelListFilter (typed `any`) and set by the
-    // base constructor. We intentionally do NOT re-declare it here: under
-    // useDefineForClassFields:true a field re-declaration without initializer
-    // would clobber the base-constructor value back to undefined.
-    /**
-     * Switches the filter type to `selectmulti` and selects each `default`
-     * choice. The parent constructor has already resolved the choices and
-     * enforced the `choices`-or-`model` requirement.
-     */
     constructor(params) {
         super(params);
         this.type = 'selectmulti';
@@ -5402,9 +5489,7 @@ class BanAdapter {
      * `score` is applied.
      */
     search(text) {
-        return this._http
-            .get(`${this._baseUrl}`, { params: { q: text } })
-            .pipe(map((r) => {
+        return this._http.get(`${this._baseUrl}`, { params: { q: text } }).pipe(map((r) => {
             const out = [];
             for (const f of r.features) {
                 out.push({
@@ -5488,23 +5573,19 @@ class ModelListPaginatorComponent {
                 this.perPageControl.setValue(this.pageSize(), { emitEvent: false });
             }
         });
-        this.perPageControl.valueChanges
-            .pipe(takeUntilDestroyed(this.destroy$))
-            .subscribe((count) => {
-            list.paginator.setPageSize(count);
+        this.perPageControl.valueChanges.pipe(takeUntilDestroyed(this.destroy$)).subscribe((count) => {
+            list.paginator.setPageSize(Number(count));
         });
-        this.directAccess.valueChanges
-            .pipe(takeUntilDestroyed(this.destroy$), debounceTime(400))
-            .subscribe((count) => {
+        this.directAccess.valueChanges.pipe(takeUntilDestroyed(this.destroy$), debounceTime(400)).subscribe((count) => {
             list.paginator.setPage(+count);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ModelListPaginatorComponent, isStandalone: true, selector: "data-model-list-paginator", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, maxPages: { classPropertyName: "maxPages", publicName: "maxPages", isSignal: true, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n@if (!hide()) {\n  <div class=\"row\">\n    <div class=\"col-sm-4\">\n      <select class=\"form-select perpage\" [formControl]=\"perPageControl\">\n        @if (maxPages()>=10) {\n          <option value=\"10\">10 / page</option>\n        }\n        @if (maxPages()>=20) {\n          <option value=\"20\">20 / page</option>\n        }\n        @if (maxPages()>=50) {\n          <option value=\"50\">50 / page</option>\n        }\n        @if (maxPages()>=100) {\n          <option value=\"100\">100 / page</option>\n        }\n        @if (maxPages()>=200) {\n          <option value=\"200\">200 / page</option>\n        }\n        @if (maxPages()>=500) {\n          <option value=\"500\">500 / page</option>\n        }\n        @if (maxPages()>=1000) {\n          <option value=\"1000\">1000 / page</option>\n        }\n        @if (maxPages()>=2000) {\n          <option value=\"2000\">2000 / page</option>\n        }\n        @if (maxPages()>=5000) {\n          <option value=\"5000\">5000 / page</option>\n        }\n        @if (maxPages()>=10000) {\n          <option value=\"10000\">10000 / page</option>\n        }\n      </select>\n    </div>\n    @if (list()) {\n      <div class=\"col-sm-5 pagination\">\n        <div class=\"text-xs-center\">\n          <ngb-pagination [pageSize]=\"pageSize()\" [collectionSize]=\"curCount()\" [page]=\"curPage()\" (pageChange)=\"onPageChange($event)\" [maxSize]=\"5\" [rotate]=\"true\"></ngb-pagination>\n        </div>\n      </div>\n    }\n    <div class=\"col-sm-3 results\">\n      <div>{{curCount()}} r\u00E9sultats -<span (click)=\"showDirectAccess=!showDirectAccess\" role=\"button\">acces direct</span></div>\n      @if (showDirectAccess) {\n        <div>\n          <input class=\"form-control\" [formControl]=\"directAccess\" type=\"number\" placeholder=\"Aller \u00E0 la page\">\n        </div>\n      }\n    </div>\n  </div>\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgbPaginationModule }, { kind: "component", type: i1$2.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ModelListPaginatorComponent, isStandalone: true, selector: "data-model-list-paginator", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, maxPages: { classPropertyName: "maxPages", publicName: "maxPages", isSignal: true, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!hide()) {\n  <div class=\"row\">\n    <div class=\"col-sm-4\">\n      <select class=\"form-select perpage\" [formControl]=\"perPageControl\">\n        @if (maxPages() >= 10) {\n          <option value=\"10\">10 / page</option>\n        }\n        @if (maxPages() >= 20) {\n          <option value=\"20\">20 / page</option>\n        }\n        @if (maxPages() >= 50) {\n          <option value=\"50\">50 / page</option>\n        }\n        @if (maxPages() >= 100) {\n          <option value=\"100\">100 / page</option>\n        }\n        @if (maxPages() >= 200) {\n          <option value=\"200\">200 / page</option>\n        }\n        @if (maxPages() >= 500) {\n          <option value=\"500\">500 / page</option>\n        }\n        @if (maxPages() >= 1000) {\n          <option value=\"1000\">1000 / page</option>\n        }\n        @if (maxPages() >= 2000) {\n          <option value=\"2000\">2000 / page</option>\n        }\n        @if (maxPages() >= 5000) {\n          <option value=\"5000\">5000 / page</option>\n        }\n        @if (maxPages() >= 10000) {\n          <option value=\"10000\">10000 / page</option>\n        }\n      </select>\n    </div>\n    @if (list()) {\n      <div class=\"col-sm-5 pagination\">\n        <div class=\"text-xs-center\">\n          <ngb-pagination\n            [pageSize]=\"pageSize()\"\n            [collectionSize]=\"curCount()\"\n            [page]=\"curPage()\"\n            (pageChange)=\"onPageChange($event)\"\n            [maxSize]=\"5\"\n            [rotate]=\"true\"\n          ></ngb-pagination>\n        </div>\n      </div>\n    }\n    <div class=\"col-sm-3 results\">\n      <div>\n        {{ curCount() }} r\u00E9sultats -\n        <span\n          (click)=\"showDirectAccess = !showDirectAccess\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"showDirectAccess\"\n          (keydown.enter)=\"showDirectAccess = !showDirectAccess\"\n          (keydown.space)=\"$event.preventDefault(); showDirectAccess = !showDirectAccess\"\n        >\n          acces direct\n        </span>\n      </div>\n      @if (showDirectAccess) {\n        <div>\n          <input class=\"form-control\" [formControl]=\"directAccess\" type=\"number\" placeholder=\"Aller \u00E0 la page\" />\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgbPaginationModule }, { kind: "component", type: i1$1.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModelListPaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ModelListPaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-paginator', imports: [ReactiveFormsModule, NgbPaginationModule], template: "\n@if (!hide()) {\n  <div class=\"row\">\n    <div class=\"col-sm-4\">\n      <select class=\"form-select perpage\" [formControl]=\"perPageControl\">\n        @if (maxPages()>=10) {\n          <option value=\"10\">10 / page</option>\n        }\n        @if (maxPages()>=20) {\n          <option value=\"20\">20 / page</option>\n        }\n        @if (maxPages()>=50) {\n          <option value=\"50\">50 / page</option>\n        }\n        @if (maxPages()>=100) {\n          <option value=\"100\">100 / page</option>\n        }\n        @if (maxPages()>=200) {\n          <option value=\"200\">200 / page</option>\n        }\n        @if (maxPages()>=500) {\n          <option value=\"500\">500 / page</option>\n        }\n        @if (maxPages()>=1000) {\n          <option value=\"1000\">1000 / page</option>\n        }\n        @if (maxPages()>=2000) {\n          <option value=\"2000\">2000 / page</option>\n        }\n        @if (maxPages()>=5000) {\n          <option value=\"5000\">5000 / page</option>\n        }\n        @if (maxPages()>=10000) {\n          <option value=\"10000\">10000 / page</option>\n        }\n      </select>\n    </div>\n    @if (list()) {\n      <div class=\"col-sm-5 pagination\">\n        <div class=\"text-xs-center\">\n          <ngb-pagination [pageSize]=\"pageSize()\" [collectionSize]=\"curCount()\" [page]=\"curPage()\" (pageChange)=\"onPageChange($event)\" [maxSize]=\"5\" [rotate]=\"true\"></ngb-pagination>\n        </div>\n      </div>\n    }\n    <div class=\"col-sm-3 results\">\n      <div>{{curCount()}} r\u00E9sultats -<span (click)=\"showDirectAccess=!showDirectAccess\" role=\"button\">acces direct</span></div>\n      @if (showDirectAccess) {\n        <div>\n          <input class=\"form-control\" [formControl]=\"directAccess\" type=\"number\" placeholder=\"Aller \u00E0 la page\">\n        </div>\n      }\n    </div>\n  </div>\n}" }]
+            args: [{ selector: 'data-model-list-paginator', imports: [ReactiveFormsModule, NgbPaginationModule], template: "@if (!hide()) {\n  <div class=\"row\">\n    <div class=\"col-sm-4\">\n      <select class=\"form-select perpage\" [formControl]=\"perPageControl\">\n        @if (maxPages() >= 10) {\n          <option value=\"10\">10 / page</option>\n        }\n        @if (maxPages() >= 20) {\n          <option value=\"20\">20 / page</option>\n        }\n        @if (maxPages() >= 50) {\n          <option value=\"50\">50 / page</option>\n        }\n        @if (maxPages() >= 100) {\n          <option value=\"100\">100 / page</option>\n        }\n        @if (maxPages() >= 200) {\n          <option value=\"200\">200 / page</option>\n        }\n        @if (maxPages() >= 500) {\n          <option value=\"500\">500 / page</option>\n        }\n        @if (maxPages() >= 1000) {\n          <option value=\"1000\">1000 / page</option>\n        }\n        @if (maxPages() >= 2000) {\n          <option value=\"2000\">2000 / page</option>\n        }\n        @if (maxPages() >= 5000) {\n          <option value=\"5000\">5000 / page</option>\n        }\n        @if (maxPages() >= 10000) {\n          <option value=\"10000\">10000 / page</option>\n        }\n      </select>\n    </div>\n    @if (list()) {\n      <div class=\"col-sm-5 pagination\">\n        <div class=\"text-xs-center\">\n          <ngb-pagination\n            [pageSize]=\"pageSize()\"\n            [collectionSize]=\"curCount()\"\n            [page]=\"curPage()\"\n            (pageChange)=\"onPageChange($event)\"\n            [maxSize]=\"5\"\n            [rotate]=\"true\"\n          ></ngb-pagination>\n        </div>\n      </div>\n    }\n    <div class=\"col-sm-3 results\">\n      <div>\n        {{ curCount() }} r\u00E9sultats -\n        <span\n          (click)=\"showDirectAccess = !showDirectAccess\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"showDirectAccess\"\n          (keydown.enter)=\"showDirectAccess = !showDirectAccess\"\n          (keydown.space)=\"$event.preventDefault(); showDirectAccess = !showDirectAccess\"\n        >\n          acces direct\n        </span>\n      </div>\n      @if (showDirectAccess) {\n        <div>\n          <input class=\"form-control\" [formControl]=\"directAccess\" type=\"number\" placeholder=\"Aller \u00E0 la page\" />\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], maxPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPages", required: false }] }], hide: [{ type: i0.Input, args: [{ isSignal: true, alias: "hide", required: false }] }] } });
 
 /**
@@ -5534,14 +5615,14 @@ class ChoicePipe {
         if (!value) {
             return '-';
         }
-        const fvalue = value[field];
+        const fvalue = fieldValues(value)[field];
         if (mode === 'code') {
-            return `${fvalue}`;
+            return asText(fvalue);
         }
         const manager = value.FM(field);
         const choices = manager.choices;
         if (!choices) {
-            return `${fvalue}`;
+            return asText(fvalue);
         }
         for (const ch of choices) {
             if (ch.value === fvalue) {
@@ -5549,16 +5630,16 @@ class ChoicePipe {
                     return ch.desc;
                 }
                 else {
-                    return `[${fvalue}] ${ch.desc}`;
+                    return `[${asText(fvalue)}] ${ch.desc}`;
                 }
             }
         }
-        return `[${fvalue}] ??`;
+        return `[${asText(fvalue)}] ??`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ChoicePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: ChoicePipe, isStandalone: true, name: "choice" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ChoicePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: ChoicePipe, isStandalone: true, name: "choice" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ChoicePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ChoicePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'choice',
@@ -5594,14 +5675,14 @@ class PChoicePipe {
             return '-';
         }
         // Use value from input, not from field
-        const fvalue = value; //- (model as any)[field];
+        const fvalue = value; //- fieldValues(model)[field];
         if (mode === 'code') {
-            return `${fvalue}`;
+            return asText(fvalue);
         }
         const manager = model.FM(field);
         const choices = manager.choices;
         if (!choices) {
-            return `${fvalue}`;
+            return asText(fvalue);
         }
         for (const ch of choices) {
             if (ch.value === fvalue) {
@@ -5609,16 +5690,16 @@ class PChoicePipe {
                     return ch.desc;
                 }
                 else {
-                    return `[${fvalue}] ${ch.desc}`;
+                    return `[${asText(fvalue)}] ${ch.desc}`;
                 }
             }
         }
-        return `[${fvalue}] ??`;
+        return `[${asText(fvalue)}] ??`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PChoicePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: PChoicePipe, isStandalone: true, name: "pchoice" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: PChoicePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: PChoicePipe, isStandalone: true, name: "pchoice" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PChoicePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: PChoicePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'pchoice',
@@ -5679,7 +5760,7 @@ class FactorPipe {
             return null;
         }
         locale = locale || this._locale;
-        const fvalue = value[field];
+        const fvalue = fieldValues(value)[field];
         if (!isValue(fvalue))
             return null;
         const manager = value.FM(field);
@@ -5688,10 +5769,10 @@ class FactorPipe {
         const num = strToNumber(fvalue);
         return formatNumber(num / factor, locale, digitsInfo);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FactorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: FactorPipe, isStandalone: true, name: "factor" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FactorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: FactorPipe, isStandalone: true, name: "factor" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FactorPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FactorPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'factor',
@@ -5726,7 +5807,7 @@ class PFactorPipe {
             return null;
         locale = locale || this._locale;
         // Use value from input, not from model
-        const fvalue = value; // (model as any)[field];
+        const fvalue = value; // fieldValues(model)[field];
         if (!isValue(fvalue))
             return null;
         const manager = model.FM(field);
@@ -5735,10 +5816,10 @@ class PFactorPipe {
         const num = strToNumber(fvalue);
         return formatNumber(num / factor, locale, digitsInfo);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PFactorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: PFactorPipe, isStandalone: true, name: "pfactor" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: PFactorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: PFactorPipe, isStandalone: true, name: "pfactor" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PFactorPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: PFactorPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'pfactor',
@@ -5776,7 +5857,7 @@ class FactorcPipe {
     transform(value, field, currencyCode, display, digitsInfo, locale) {
         if (!value)
             return null;
-        const fvalue = value[field];
+        const fvalue = fieldValues(value)[field];
         if (!isValue(fvalue))
             return null;
         locale = locale || this._locale;
@@ -5797,10 +5878,10 @@ class FactorcPipe {
         const num = strToNumber(fvalue);
         return formatCurrency(num / factor, locale, currency, currencyCode, digitsInfo);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FactorcPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: FactorcPipe, isStandalone: true, name: "factorc" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FactorcPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: FactorcPipe, isStandalone: true, name: "factorc" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FactorcPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FactorcPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'factorc',
@@ -5838,7 +5919,7 @@ class PFactorcPipe {
         if (!value)
             return null;
         // Use value from input, not from model
-        const fvalue = value; // (model as any)[field];
+        const fvalue = value; // fieldValues(model)[field];
         if (!isValue(fvalue)) {
             return null;
         }
@@ -5860,10 +5941,10 @@ class PFactorcPipe {
         const num = strToNumber(fvalue);
         return formatCurrency(num / factor, locale, currency, currencyCode, digitsInfo);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PFactorcPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: PFactorcPipe, isStandalone: true, name: "pfactorc" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: PFactorcPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: PFactorcPipe, isStandalone: true, name: "pfactorc" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PFactorcPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: PFactorcPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'pfactorc',
@@ -5930,6 +6011,12 @@ class FkselectComponent {
     /** Label shown next to the control. */
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Id put on the search input, and pointed at by `[label]`'s `for`. Defaults
+     * to a generated one; dispedit passes its own so its label drives this input.
+     */
+    inputId = input(uniqueId('data-fkselect'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
     /** Placeholder for the search input. */
     placeholder = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -5963,13 +6050,14 @@ class FkselectComponent {
             this.queryset.set(this.collection().queryset());
         }
         else if (!this.queryset() && model && model._collection) {
-            this.collection.set(model._collection);
-            this.queryset.set(model._collection.queryset());
-        }
-        this.fc = new UntypedFormControl('');
-        this.fc.valueChanges
-            .pipe(takeUntilDestroyed(this.destroy$), distinctUntilChanged())
-            .subscribe((value) => {
+            // Fallback: the source model's own collection, assumed to hold the
+            // related instances. Nothing can check that assumption.
+            const coll = model._collection;
+            this.collection.set(coll);
+            this.queryset.set(coll.queryset());
+        }
+        this.fc = new FormControl(null);
+        this.fc.valueChanges.pipe(takeUntilDestroyed(this.destroy$), distinctUntilChanged()).subscribe((value) => {
             if (value) {
                 this.selected.emit(value);
             }
@@ -5977,16 +6065,14 @@ class FkselectComponent {
         const display = this.display();
         if (display) {
             if (typeof display === 'string') {
-                this._tpl = (model) => `${model[display]}`;
+                this._tpl = (model) => String(fieldValues(model)[display]);
             }
             else if (typeof display === 'function') {
                 this._tpl = display.bind(this);
             }
         }
         else {
-            this._tpl = (model) => `${model['name'] ||
-                model['title'] ||
-                model['id']}`;
+            this._tpl = (model) => String(fieldValues(model)['name'] ?? fieldValues(model)['title'] ?? fieldValues(model)['id']);
         }
     }
     /** Emit {@link cleared} so the parent can null the relation. */
@@ -5999,13 +6085,9 @@ class FkselectComponent {
      */
     _display(x) {
         if (x) {
-            if (x._display) {
-                if (x._display instanceof Function) {
-                    return x._display();
-                }
-                else {
-                    return x._display;
-                }
+            const display = x._display;
+            if (display) {
+                return typeof display === 'function' ? display() : display;
             }
             if (this._tpl) {
                 return this._tpl(x);
@@ -6034,13 +6116,13 @@ class FkselectComponent {
             return qs.get();
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FkselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FkselectComponent, isStandalone: true, selector: "data-fkselect", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, edit: { classPropertyName: "edit", publicName: "edit", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, queryset: { classPropertyName: "queryset", publicName: "queryset", isSignal: true, isRequired: false, transformFunction: null }, collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: false, transformFunction: null }, update: { classPropertyName: "update", publicName: "update", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", 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 }, inputClasses: { classPropertyName: "inputClasses", publicName: "inputClasses", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryset: "querysetChange", collection: "collectionChange", selected: "selected", cancelled: "cancelled", cleared: "cleared" }, ngImport: i0, template: "\n<div class=\"form-group\">\n  @if (label()) {\n    <label>{{label()}}</label>\n  }\n  <div class=\"input-group\">\n    <input class=\"form-control\" [formControl]=\"fc\" [placeholder]=\"placeholder()\" [ngbTypeahead]=\"searchFn\" [editable]=\"false\" [focusFirst]=\"true\" [inputFormatter]=\"displayFn\" [resultFormatter]=\"displayFn\" (keyup.escape)=\"cancelled.emit()\">\n    <div class=\"input-group-text\"><i class=\"bi bi-trash float-end pointer\" (click)=\"clearAction()\"></i></div>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1$2.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FkselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: FkselectComponent, isStandalone: true, selector: "data-fkselect", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, edit: { classPropertyName: "edit", publicName: "edit", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, queryset: { classPropertyName: "queryset", publicName: "queryset", isSignal: true, isRequired: false, transformFunction: null }, collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: false, transformFunction: null }, update: { classPropertyName: "update", publicName: "update", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputClasses: { classPropertyName: "inputClasses", publicName: "inputClasses", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryset: "querysetChange", collection: "collectionChange", selected: "selected", cancelled: "cancelled", cleared: "cleared" }, ngImport: i0, template: "<div class=\"form-group\">\n  @if (label()) {\n    <label [attr.for]=\"inputId()\">{{ label() }}</label>\n  }\n  <div class=\"input-group\">\n    <input\n      [attr.id]=\"inputId()\"\n      class=\"form-control\"\n      [formControl]=\"fc\"\n      [placeholder]=\"placeholder()\"\n      [ngbTypeahead]=\"searchFn\"\n      [editable]=\"false\"\n      [focusFirst]=\"true\"\n      [inputFormatter]=\"displayFn\"\n      [resultFormatter]=\"displayFn\"\n      (keyup.escape)=\"cancelled.emit()\"\n    />\n    <div class=\"input-group-text\">\n      <i\n        class=\"bi bi-trash float-end pointer\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"Vider la s\u00E9lection\"\n        (click)=\"clearAction()\"\n        (keydown.enter)=\"clearAction()\"\n        (keydown.space)=\"$event.preventDefault(); clearAction()\"\n      ></i>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FkselectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FkselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-fkselect', imports: [ReactiveFormsModule, NgbTypeaheadModule], template: "\n<div class=\"form-group\">\n  @if (label()) {\n    <label>{{label()}}</label>\n  }\n  <div class=\"input-group\">\n    <input class=\"form-control\" [formControl]=\"fc\" [placeholder]=\"placeholder()\" [ngbTypeahead]=\"searchFn\" [editable]=\"false\" [focusFirst]=\"true\" [inputFormatter]=\"displayFn\" [resultFormatter]=\"displayFn\" (keyup.escape)=\"cancelled.emit()\">\n    <div class=\"input-group-text\"><i class=\"bi bi-trash float-end pointer\" (click)=\"clearAction()\"></i></div>\n  </div>\n</div>" }]
-        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], edit: [{ type: i0.Input, args: [{ isSignal: true, alias: "edit", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], queryset: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryset", required: false }] }, { type: i0.Output, args: ["querysetChange"] }], collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: false }] }, { type: i0.Output, args: ["collectionChange"] }], update: [{ type: i0.Input, args: [{ isSignal: true, alias: "update", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClasses", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], cleared: [{ type: i0.Output, args: ["cleared"] }] } });
+            args: [{ selector: 'data-fkselect', imports: [ReactiveFormsModule, NgbTypeaheadModule], template: "<div class=\"form-group\">\n  @if (label()) {\n    <label [attr.for]=\"inputId()\">{{ label() }}</label>\n  }\n  <div class=\"input-group\">\n    <input\n      [attr.id]=\"inputId()\"\n      class=\"form-control\"\n      [formControl]=\"fc\"\n      [placeholder]=\"placeholder()\"\n      [ngbTypeahead]=\"searchFn\"\n      [editable]=\"false\"\n      [focusFirst]=\"true\"\n      [inputFormatter]=\"displayFn\"\n      [resultFormatter]=\"displayFn\"\n      (keyup.escape)=\"cancelled.emit()\"\n    />\n    <div class=\"input-group-text\">\n      <i\n        class=\"bi bi-trash float-end pointer\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"Vider la s\u00E9lection\"\n        (click)=\"clearAction()\"\n        (keydown.enter)=\"clearAction()\"\n        (keydown.space)=\"$event.preventDefault(); clearAction()\"\n      ></i>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], edit: [{ type: i0.Input, args: [{ isSignal: true, alias: "edit", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], queryset: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryset", required: false }] }, { type: i0.Output, args: ["querysetChange"] }], collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: false }] }, { type: i0.Output, args: ["collectionChange"] }], update: [{ type: i0.Input, args: [{ isSignal: true, alias: "update", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClasses", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], cleared: [{ type: i0.Output, args: ["cleared"] }] } });
 
 /** Default lifetime in milliseconds per severity: the more severe, the longer it stays on screen. */
 var DEFAULT_TIMEOUTS;
@@ -6065,7 +6147,7 @@ const DEFAULT_MESSAGE_TIMEOUT = 5000;
  * When not provided, messages are silent. Keys are the sound names the service uses:
  * `success`, `info`, `warning` and `error`.
  */
-const DATA_MESSAGE_SOUNDS = new InjectionToken("data.message.sounds");
+const DATA_MESSAGE_SOUNDS = new InjectionToken('data.message.sounds');
 /**
  * A single user-facing notification: a title, an optional body, an optional trace for
  * debugging, and a countdown.
@@ -6082,7 +6164,7 @@ class Message {
     ttl;
     status = STATUS[STATUS.UNDISP];
     showTrace = false;
-    constructor(title, type = 1 /* TYPE.INFO */, message = "", trace = null, ttl = DEFAULT_MESSAGE_TIMEOUT) {
+    constructor(title, type = 1 /* TYPE.INFO */, message = '', trace = null, ttl = DEFAULT_MESSAGE_TIMEOUT) {
         this.title = title;
         this.type = type;
         this.message = message;
@@ -6092,18 +6174,18 @@ class Message {
     /** Bootstrap alert classes matching this message's severity, bound by the message zone template. */
     get style() {
         if (this.type === 3 /* TYPE.DANGER */) {
-            return "alert alert-dismissible alert-danger";
+            return 'alert alert-dismissible alert-danger';
         }
         if (this.type === 1 /* TYPE.INFO */) {
-            return "alert alert-dismissible alert-info";
+            return 'alert alert-dismissible alert-info';
         }
         if (this.type === 2 /* TYPE.WARNING */) {
-            return "alert alert-dismissible alert-warning";
+            return 'alert alert-dismissible alert-warning';
         }
         if (this.type === 0 /* TYPE.SUCCESS */) {
-            return "alert alert-dismissible alert-success";
+            return 'alert alert-dismissible alert-success';
         }
-        return "alert alert-dismissible alert-success";
+        return 'alert alert-dismissible alert-success';
     }
     /** Marks the message as dismissed so it is filtered out of the next emission. Prefer {@link DataMessageService.ack}, which also refreshes the stream. */
     ack() {
@@ -6181,21 +6263,21 @@ class DataMessageService {
         this._subscription.unsubscribe();
     }
     /** Reports a completed operation. Short-lived by default (3 s) and plays the `success` sound if configured. */
-    success(title, message = "", trace = null, timeout = DEFAULT_TIMEOUTS.SUCCESS) {
+    success(title, message = '', trace = null, timeout = DEFAULT_TIMEOUTS.SUCCESS) {
         this._messages.push(new Message(title, 0 /* TYPE.SUCCESS */, message, trace, timeout));
-        this.play("success");
+        this.play('success');
         this._notify();
     }
     /** Reports neutral information the user does not have to act on. Defaults to a 4 s lifetime. */
-    info(title, message = "", trace = null, timeout = DEFAULT_TIMEOUTS.INFO) {
+    info(title, message = '', trace = null, timeout = DEFAULT_TIMEOUTS.INFO) {
         this._messages.push(new Message(title, 1 /* TYPE.INFO */, message, trace, timeout));
-        this.play("info");
+        this.play('info');
         this._notify();
     }
     /** Reports a problem the user should notice but that did not abort the operation. Stays 10 s by default. */
-    warning(title, message = "", trace = null, timeout = DEFAULT_TIMEOUTS.WARNING) {
+    warning(title, message = '', trace = null, timeout = DEFAULT_TIMEOUTS.WARNING) {
         this._messages.push(new Message(title, 2 /* TYPE.WARNING */, message, trace, timeout));
-        this.play("warning");
+        this.play('warning');
         this._notify();
     }
     /**
@@ -6204,17 +6286,17 @@ class DataMessageService {
      * Note that the `timeout` argument is currently ignored: the message is always created
      * with {@link DEFAULT_TIMEOUTS.DANGER}.
      */
-    danger(title, message = "", trace = null, timeout = DEFAULT_TIMEOUTS.DANGER) {
-        this._messages.push(new Message(title, 3 /* TYPE.DANGER */, message, trace, DEFAULT_TIMEOUTS.DANGER));
-        this.play("error");
+    danger(title, message = '', trace = null, timeout = DEFAULT_TIMEOUTS.DANGER) {
+        this._messages.push(new Message(title, 3 /* TYPE.DANGER */, message, trace, timeout));
+        this.play('error');
         this._notify();
     }
     /** Alias for {@link danger}, for callers that think in terms of "error" rather than severity. */
-    error(title, message = "", trace = null) {
+    error(title, message = '', trace = null) {
         this.danger(title, message, trace);
     }
     /** Logs to the console only — nothing is shown to the user and no message is queued. */
-    debug(title, message = "", trace = null) {
+    debug(title, message = '', trace = null) {
         console.log(title, message, trace);
     }
     /**
@@ -6231,33 +6313,76 @@ class DataMessageService {
      * nothing when the token or the key is absent. Called automatically by the severity
      * methods; call it directly only for custom cues.
      */
-    play(type = "notify") {
+    play(type = 'notify') {
         if (this.sounds && this.sounds[type]) {
             const audio = new Audio(this.sounds[type]);
-            audio.play();
+            // Rejects whenever the browser's autoplay policy blocks the sound
+            // (no user gesture yet). A missing notification cue is not worth
+            // surfacing, but the rejection must be handled all the same.
+            audio.play().catch(() => undefined);
         }
     }
     _notify() {
         const out = [];
         for (const message of this._messages) {
-            if ((message.status === STATUS[STATUS.UNDISP]) ||
-                (message.status === STATUS[STATUS.DISP])) {
+            if (message.status === STATUS[STATUS.UNDISP] || message.status === STATUS[STATUS.DISP]) {
                 message.status = STATUS[STATUS.DISP];
                 out.push(message);
             }
         }
         this._messages$.next(out);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DataMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DataMessageService, providedIn: "root" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DataMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DataMessageService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DataMessageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DataMessageService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: "root"
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Marks HTML as trusted, so `[innerHTML]` renders it as-is.
+ *
+ * Meant for the rendered half of a rich text field — the `<field>_html` column
+ * the server produces from the markdown or HTML source. Angular's sanitizer
+ * builds its allow-list from `URI_ATTRS + HTML_ATTRS + ARIA_ATTRS`, and `style`
+ * is in none of them, so a plain `[innerHTML]` silently drops every
+ * `text-align` and every colour `<data-richedit>` writes: read-only mode ends
+ * up looking nothing like the editor.
+ *
+ * **Only use it on HTML the server produced.** The value is inserted without
+ * any filtering, and trusted HTML executes scripts — pointing this at a string
+ * a user of another system can influence is an XSS vector.
+ *
+ * @example
+ * ```html
+ * <div [innerHTML]="product.description_html | safeHtml"></div>
+ * ```
+ */
+class SafeHtmlPipe {
+    _sanitizer = inject(DomSanitizer);
+    /**
+     * @param value HTML to trust; null for a nullish or empty input, which
+     *   `[innerHTML]` renders as nothing.
+     */
+    transform(value) {
+        if (!value) {
+            return null;
+        }
+        return this._sanitizer.bypassSecurityTrustHtml(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SafeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'safeHtml',
+                }]
+        }] });
+
 /**
  * Typeahead for picking several related instances (a many-to-many target).
  *
@@ -6323,6 +6448,12 @@ class M2mselectComponent {
     /** Label shown next to the control. */
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Id put on the search input, and pointed at by `[label]`'s `for`. Defaults
+     * to a generated one; dispedit passes its own so its label drives this input.
+     */
+    inputId = input(uniqueId('data-m2mselect'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
     /** Placeholder for the search input. */
     placeholder = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -6355,13 +6486,17 @@ class M2mselectComponent {
     destroy$ = inject(DestroyRef);
     /**
      * Control value accessor onChange dummy callback;
-     * @param fks
+     * @param _fks
      */
-    onChange = (fks) => { };
+    onChange = (_fks) => {
+        // Replaced by registerOnChange when used inside a form.
+    };
     /**
      * Control value accessor onTouched dummy callback;
      */
-    onTouched = () => { };
+    onTouched = () => {
+        // Replaced by registerOnTouched when used inside a form.
+    };
     /**
      * OnChange register from controlValueAccessor
      * @param onChange callback
@@ -6381,7 +6516,7 @@ class M2mselectComponent {
      * - ensures queryset is available
      * - creates form control for input
      * - creates display function
-     * - ensure values are set from any source
+     * - ensure values are set from whichever source is available
      */
     ngOnInit() {
         // Create queryset if not given
@@ -6391,17 +6526,18 @@ class M2mselectComponent {
             this.queryset.set(this.collection().queryset());
         }
         else if (!this.queryset() && model && model._collection) {
-            this.collection.set(model._collection);
-            this.queryset.set(model._collection.queryset());
+            // Fallback: the source model's own collection, assumed to hold the
+            // related instances. Nothing can check that assumption.
+            const coll = model._collection;
+            this.collection.set(coll);
+            this.queryset.set(coll.queryset());
         }
         if (!this.queryset()) {
             throw Error('queryset is mandatory for m2m select');
         }
         // Create form control for typeahead and subscribe for changes
         this.fc = new UntypedFormControl('');
-        this.fc.valueChanges
-            .pipe(takeUntilDestroyed(this.destroy$), distinctUntilChanged())
-            .subscribe((value) => {
+        this.fc.valueChanges.pipe(takeUntilDestroyed(this.destroy$), distinctUntilChanged()).subscribe((value) => {
             if (value) {
                 this.onAdd(value);
             }
@@ -6410,19 +6546,22 @@ class M2mselectComponent {
         const display = this.display();
         if (display) {
             if (typeof display === 'string') {
-                this._tpl = (m) => `${m[display]}`;
+                this._tpl = (m) => `${String(fieldValues(m)[display])}`;
             }
             else if (typeof display === 'function') {
                 this._tpl = display.bind(this);
             }
         }
         else {
-            this._tpl = (m) => `${m['name'] || m['title'] || m['id']}`;
+            this._tpl = (m) => {
+                const v = fieldValues(m);
+                return `${String(v['name'] ?? v['title'] ?? v['id'])}`;
+            };
         }
         // Get values from model if not already given
         const field = this.field();
         if (this.values() === undefined && model && field) {
-            const details = model[`${field}_details`];
+            const details = fieldValues(model)[`${field}_details`];
             if (details === undefined && model.id !== undefined) {
                 // The model comes from the API but carries no details for this
                 // relation: either the field was left out of the request's `fields=`,
@@ -6523,7 +6662,7 @@ class M2mselectComponent {
         const values = [];
         for (const k of pks) {
             let found = false;
-            for (let v of this.values() ?? []) {
+            for (const v of this.values() ?? []) {
                 if (v.id == k) {
                     values.push(v);
                     found = true;
@@ -6548,13 +6687,9 @@ class M2mselectComponent {
      */
     _display(x) {
         if (x) {
-            if (x._display) {
-                if (x._display instanceof Function) {
-                    return x._display();
-                }
-                else {
-                    return x._display;
-                }
+            const display = x._display;
+            if (display) {
+                return typeof display === 'function' ? display() : display;
             }
             if (this._tpl) {
                 return this._tpl(x);
@@ -6582,16 +6717,16 @@ class M2mselectComponent {
             return qs.get();
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: M2mselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: M2mselectComponent, isStandalone: true, selector: "data-m2mselect", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, edit: { classPropertyName: "edit", publicName: "edit", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, queryset: { classPropertyName: "queryset", publicName: "queryset", isSignal: true, isRequired: false, transformFunction: null }, collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", 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 }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, inputClasses: { classPropertyName: "inputClasses", publicName: "inputClasses", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", queryset: "querysetChange", collection: "collectionChange", added: "added", removed: "removed", cancelled: "cancelled", cleared: "cleared", detailsChanged: "detailsChanged", changed: "changed" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: M2mselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: M2mselectComponent, isStandalone: true, selector: "data-m2mselect", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, edit: { classPropertyName: "edit", publicName: "edit", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, queryset: { classPropertyName: "queryset", publicName: "queryset", isSignal: true, isRequired: false, transformFunction: null }, collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, inputClasses: { classPropertyName: "inputClasses", publicName: "inputClasses", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", queryset: "querysetChange", collection: "collectionChange", added: "added", removed: "removed", cancelled: "cancelled", cleared: "cleared", detailsChanged: "detailsChanged", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: M2mselectComponent,
             },
-        ], ngImport: i0, template: "\n<div class=\"form-group\">\n  @if (label()) {\n    <label>{{label()}}</label>\n  }\n  <div class=\"input-group\">\n    <input class=\"form-control\" [formControl]=\"fc\" [placeholder]=\"placeholder()\" [ngbTypeahead]=\"searchFn\" [editable]=\"false\" [focusFirst]=\"true\" [inputFormatter]=\"displayFn\" [resultFormatter]=\"displayFn\" (keyup.escape)=\"cancelled.emit()\">\n    <div class=\"input-group-text\"><i class=\"bi bi-trash float-end pointer\" (click)=\"cleared.emit()\"></i></div>\n  </div>\n  @for (i of values(); track i) {\n    <div><i class=\"bi bi-trash ms-2 float-end\" (click)=\"onRemove(i)\"></i>{{displayFn(i)}}</div>\n  }\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1$2.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }] });
+        ], ngImport: i0, template: "<div class=\"form-group\">\n  @if (label()) {\n    <label [attr.for]=\"inputId()\">{{ label() }}</label>\n  }\n  <div class=\"input-group\">\n    <input\n      [attr.id]=\"inputId()\"\n      class=\"form-control\"\n      [formControl]=\"fc\"\n      [placeholder]=\"placeholder()\"\n      [ngbTypeahead]=\"searchFn\"\n      [editable]=\"false\"\n      [focusFirst]=\"true\"\n      [inputFormatter]=\"displayFn\"\n      [resultFormatter]=\"displayFn\"\n      (keyup.escape)=\"cancelled.emit()\"\n    />\n    <div class=\"input-group-text\">\n      <i\n        class=\"bi bi-trash float-end pointer\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"Vider la s\u00E9lection\"\n        (click)=\"cleared.emit()\"\n        (keydown.enter)=\"cleared.emit()\"\n        (keydown.space)=\"$event.preventDefault(); cleared.emit()\"\n      ></i>\n    </div>\n  </div>\n  @for (i of values(); track i) {\n    <div>\n      <i\n        class=\"bi bi-trash ms-2 float-end\"\n        role=\"button\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"'Retirer ' + displayFn(i)\"\n        (click)=\"onRemove(i)\"\n        (keydown.enter)=\"onRemove(i)\"\n        (keydown.space)=\"$event.preventDefault(); onRemove(i)\"\n      ></i>\n      {{ displayFn(i) }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: M2mselectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: M2mselectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'data-m2mselect', providers: [
                         {
@@ -6599,8 +6734,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                             multi: true,
                             useExisting: M2mselectComponent,
                         },
-                    ], imports: [ReactiveFormsModule, NgbTypeaheadModule], template: "\n<div class=\"form-group\">\n  @if (label()) {\n    <label>{{label()}}</label>\n  }\n  <div class=\"input-group\">\n    <input class=\"form-control\" [formControl]=\"fc\" [placeholder]=\"placeholder()\" [ngbTypeahead]=\"searchFn\" [editable]=\"false\" [focusFirst]=\"true\" [inputFormatter]=\"displayFn\" [resultFormatter]=\"displayFn\" (keyup.escape)=\"cancelled.emit()\">\n    <div class=\"input-group-text\"><i class=\"bi bi-trash float-end pointer\" (click)=\"cleared.emit()\"></i></div>\n  </div>\n  @for (i of values(); track i) {\n    <div><i class=\"bi bi-trash ms-2 float-end\" (click)=\"onRemove(i)\"></i>{{displayFn(i)}}</div>\n  }\n</div>" }]
-        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], edit: [{ type: i0.Input, args: [{ isSignal: true, alias: "edit", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], queryset: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryset", required: false }] }, { type: i0.Output, args: ["querysetChange"] }], collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: false }] }, { type: i0.Output, args: ["collectionChange"] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], inputClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClasses", required: false }] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], detailsChanged: [{ type: i0.Output, args: ["detailsChanged"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+                    ], imports: [ReactiveFormsModule, NgbTypeaheadModule], template: "<div class=\"form-group\">\n  @if (label()) {\n    <label [attr.for]=\"inputId()\">{{ label() }}</label>\n  }\n  <div class=\"input-group\">\n    <input\n      [attr.id]=\"inputId()\"\n      class=\"form-control\"\n      [formControl]=\"fc\"\n      [placeholder]=\"placeholder()\"\n      [ngbTypeahead]=\"searchFn\"\n      [editable]=\"false\"\n      [focusFirst]=\"true\"\n      [inputFormatter]=\"displayFn\"\n      [resultFormatter]=\"displayFn\"\n      (keyup.escape)=\"cancelled.emit()\"\n    />\n    <div class=\"input-group-text\">\n      <i\n        class=\"bi bi-trash float-end pointer\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"Vider la s\u00E9lection\"\n        (click)=\"cleared.emit()\"\n        (keydown.enter)=\"cleared.emit()\"\n        (keydown.space)=\"$event.preventDefault(); cleared.emit()\"\n      ></i>\n    </div>\n  </div>\n  @for (i of values(); track i) {\n    <div>\n      <i\n        class=\"bi bi-trash ms-2 float-end\"\n        role=\"button\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"'Retirer ' + displayFn(i)\"\n        (click)=\"onRemove(i)\"\n        (keydown.enter)=\"onRemove(i)\"\n        (keydown.space)=\"$event.preventDefault(); onRemove(i)\"\n      ></i>\n      {{ displayFn(i) }}\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], edit: [{ type: i0.Input, args: [{ isSignal: true, alias: "edit", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], queryset: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryset", required: false }] }, { type: i0.Output, args: ["querysetChange"] }], collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: false }] }, { type: i0.Output, args: ["collectionChange"] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], inputClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClasses", required: false }] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], detailsChanged: [{ type: i0.Output, args: ["detailsChanged"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
  * Displays and edits a single model field, choosing its own widgets from the
@@ -6679,6 +6814,8 @@ class DispeditComponent {
      */
     field = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    /** Id tying the label to whichever control the editor renders. */
+    inputId = uniqueId('data-dispedit');
     /**
      * External form group, for `inline` / `form` modes.
      *
@@ -6746,8 +6883,8 @@ class DispeditComponent {
     /**
      * Forces a display renderer, bypassing the field manager's `displayType`.
      *
-     * Writable because setting `[editor]="'quill'"` without a viewer makes the
-     * component select the `quill` viewer for you.
+     * Writable so that cross-input consistency rules can settle on a renderer;
+     * see {@link _checks}.
      */
     viewer = model(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "viewer" }] : /* istanbul ignore next */ []));
@@ -6852,8 +6989,7 @@ class DispeditComponent {
      * Display config, overridable via the DATA_DISPLAY_CONFIG injection token.
      * By default, bs5 config is used.
      */
-    dconf = inject(DATA_DISPLAY_CONFIG, { optional: true }) ??
-        BootstrapDataDisplayConfig;
+    dconf = inject(DATA_DISPLAY_CONFIG, { optional: true }) ?? BootstrapDataDisplayConfig;
     _msgs = inject(DataMessageService);
     /**
      * Recompute all derived values / edit mode on any (trigger) input change.
@@ -6900,8 +7036,7 @@ class DispeditComponent {
         this.realPlaceholder.set(this.placeholder() || this.manager()?.description || '');
         this.realDefault.set(this.default());
         this.save = this.save === undefined ? this.mode() === 'dd' : this.save;
-        if ((!this.edit() && this.mode() === 'dd') ||
-            (!this.editable() && this.mode() === 'inline')) {
+        if ((!this.edit() && this.mode() === 'dd') || (!this.editable() && this.mode() === 'inline')) {
             this.enableDisplayMode();
         }
         else {
@@ -6955,10 +7090,11 @@ class DispeditComponent {
         if (fg && model && fg.valid) {
             switch (this.realEditor()) {
                 case 'input.decimal':
-                    model[this.field()] = Math.round(fg.value[this.field()] * this.manager().factor);
+                    fieldValues(model)[this.field()] = Math.round(fg.value[this.field()] *
+                        (this.manager().factor || 1));
                     break;
                 default:
-                    model[this.field()] = fg.value[this.field()];
+                    fieldValues(model)[this.field()] = fieldValues(fg.value)[this.field()];
             }
             if (this.save === true) {
                 return this._save();
@@ -6997,7 +7133,7 @@ class DispeditComponent {
     async setDefault() {
         const model = this.model();
         if (model) {
-            model[this.field()] = this.realDefault();
+            fieldValues(model)[this.field()] = this.realDefault();
             this.fg().controls[this.field()].setValue(this.realDefault(), {
                 emitEvent: false,
             });
@@ -7020,8 +7156,8 @@ class DispeditComponent {
         const form = this.form();
         if (model) {
             if ($event !== null) {
-                model[this.field()] = $event.id;
-                model[`${this.field()}_details`] = $event;
+                fieldValues(model)[this.field()] = $event.id;
+                fieldValues(model)[`${this.field()}_details`] = $event;
                 if (form) {
                     const fv = {};
                     fv[this.field()] = $event.id;
@@ -7031,8 +7167,8 @@ class DispeditComponent {
                 }
             }
             else {
-                model[this.field()] = null;
-                delete model[`${this.field()}_details`];
+                fieldValues(model)[this.field()] = null;
+                delete fieldValues(model)[`${this.field()}_details`];
                 if (form) {
                     const fv = {};
                     fv[this.field()] = null;
@@ -7055,11 +7191,15 @@ class DispeditComponent {
     onM2MValuesChanges(v) {
         this.m2mValues = v;
     }
-    /** Apply cross-input consistency rules (a quill editor implies a quill viewer). */
+    /**
+     * Apply cross-input consistency rules.
+     *
+     * Nothing to reconcile at the moment: the one rule that lived here paired the
+     * `quill` editor with the `quill` viewer, and neither exists any more. Kept
+     * as the place such rules belong, since `_init` already calls it.
+     */
     _checks() {
-        if (this.editor() === 'quill' && !this.viewer()) {
-            this.viewer.set('quill');
-        }
+        // No rules currently.
     }
     /**
      * Save value to database, only if model have an id.
@@ -7076,8 +7216,9 @@ class DispeditComponent {
                 catch (e) {
                     console.error(e);
                     let msg = '';
-                    if (e && e.error && e.error[this.field()]) {
-                        msg = `${e.error[this.field()]}`;
+                    const apiErrors = e?.error;
+                    if (apiErrors?.[this.field()]) {
+                        msg = `${String(apiErrors[this.field()])}`;
                     }
                     this._msgs.error("Erreur lors de l'enregistrement", msg, JSON.stringify(e));
                     return;
@@ -7092,13 +7233,9 @@ class DispeditComponent {
     }
     _display(x) {
         if (x) {
-            if (x._display) {
-                if (x._display instanceof Function) {
-                    return x._display();
-                }
-                else {
-                    return x._display;
-                }
+            const display = x._display;
+            if (display) {
+                return typeof display === 'function' ? display() : display;
             }
             if (this._tpl) {
                 return this._tpl(x);
@@ -7110,16 +7247,14 @@ class DispeditComponent {
         const display = this.display();
         if (display) {
             if (typeof display === 'string') {
-                this._tpl = (model) => `${model[display]}`;
+                this._tpl = (model) => String(fieldValues(model)[display]);
             }
             else if (typeof display === 'function') {
                 this._tpl = display.bind(this);
             }
         }
         else {
-            this._tpl = (model) => `${model['name'] ||
-                model['title'] ||
-                model['id']}`;
+            this._tpl = (model) => String(fieldValues(model)['name'] ?? fieldValues(model)['title'] ?? fieldValues(model)['id']);
         }
     }
     _getChoices() {
@@ -7129,8 +7264,11 @@ class DispeditComponent {
         if (inputChoices && inputChoices.length) {
             choices = inputChoices;
         }
-        else if (this.manager()?.choices) {
-            choices = this.manager()?.choices;
+        else {
+            const managerChoices = this.manager()?.choices;
+            if (managerChoices) {
+                choices = managerChoices;
+            }
         }
         // Set display value
         if (choices && choices.length > 0) {
@@ -7144,11 +7282,7 @@ class DispeditComponent {
         const viewer = this.viewer();
         const manager = this.manager();
         const realChoices = this.realChoices();
-        this.realDisplay.set(viewer
-            ? viewer
-            : manager?.displayType
-                ? manager.displayType
-                : 'text');
+        this.realDisplay.set(viewer ? viewer : manager?.displayType ? manager.displayType : 'text');
         if (realChoices && realChoices.length) {
             this.realDisplay.set('choice');
         }
@@ -7178,10 +7312,8 @@ class DispeditComponent {
         }
         this.fg.set(fg);
         if (this.mode() === 'inline') {
-            fg.valueChanges
-                .pipe(takeUntilDestroyed(this._destroyRef))
-                .subscribe(() => {
-                this.update();
+            fg.valueChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+                void this.update();
             });
         }
     }
@@ -7190,8 +7322,8 @@ class DispeditComponent {
         const field = this.field();
         const fg = this.fg();
         switch (this.realEditor()) {
-            case 'input.datetime':
-                const value = model[field];
+            case 'input.datetime': {
+                const value = fieldValues(model)[field];
                 const now = new Date();
                 const localnow = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
                 if (value === null) {
@@ -7203,17 +7335,16 @@ class DispeditComponent {
                     const localtime = new Date(time.getTime() - offset * 60000);
                     fg.controls[field].setValue(localtime.toISOString().substring(0, 16), { emitEvent: true });
                 }
-                this.realDefault.set(this.default() || this.manager()?.required
-                    ? localnow.toISOString().substring(0, 16)
-                    : null);
+                this.realDefault.set(this.default() || this.manager()?.required ? localnow.toISOString().substring(0, 16) : null);
                 break;
-            case 'input.date':
-                const dt = model.toJson([field])[field];
+            }
+            case 'input.date': {
+                const dt = fieldValues(model.toJson([field]))[field];
                 fg.controls[field].setValue(dt);
                 break;
+            }
             case 'input.decimal':
-                fg.controls[field].setValue(model[field] /
-                    (this.manager().factor || 1));
+                fg.controls[field].setValue(fieldValues(model)[field] / (this.manager().factor || 1));
         }
     }
     _setEditorClasses() {
@@ -7225,13 +7356,13 @@ class DispeditComponent {
     _getDisplayValue() {
         const model = this.model();
         const field = this.field();
-        const value = model[field];
+        const value = fieldValues(model)[field];
         this.dispValue.set(value);
         const realChoices = this.realChoices();
         if (realChoices) {
             for (const c of realChoices) {
                 if (c === value) {
-                    this.txtValue.set(c);
+                    this.txtValue.set(String(c.desc ?? c.value));
                     return;
                 }
                 else if (c.value !== undefined && c.value === value) {
@@ -7252,40 +7383,37 @@ class DispeditComponent {
         }
         else {
             switch (this.realDisplay()) {
-                case 'fkdetails':
-                    const details = model[`${field}_details`];
+                case 'fkdetails': {
+                    const details = fieldValues(model)[`${field}_details`];
                     this.txtValue.set(this._display(details));
                     break;
-                case 'm2mdetails':
-                    const m2mDetails = this.m2mValues || model[`${field}_details`];
+                }
+                case 'm2mdetails': {
+                    const m2mDetails = this.m2mValues || fieldValues(model)[`${field}_details`];
                     const tv = [];
                     for (const v of m2mDetails || []) {
                         tv.push(this._display(v));
                     }
                     this.txtValues.set(tv);
                     break;
+                }
                 case 'decimal':
-                    this.txtValue.set(`${value /
-                        (this.manager().factor || 1)}`);
+                    this.txtValue.set(`${value / (this.manager().factor || 1)}`);
                     break;
                 default:
-                    this.txtValue.set(`${value}`);
+                    this.txtValue.set(asText(value));
             }
         }
     }
-    _setDisplayClasses() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DispeditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DispeditComponent, isStandalone: true, selector: "data-dispedit", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, edit: { classPropertyName: "edit", publicName: "edit", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, choices: { classPropertyName: "choices", publicName: "choices", isSignal: true, isRequired: false, transformFunction: null }, inputClasses: { classPropertyName: "inputClasses", publicName: "inputClasses", isSignal: true, isRequired: false, transformFunction: null }, editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: false, transformFunction: null }, viewer: { classPropertyName: "viewer", publicName: "viewer", isSignal: true, isRequired: false, transformFunction: null }, default: { classPropertyName: "default", publicName: "default", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "help", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, queryset: { classPropertyName: "queryset", publicName: "queryset", isSignal: true, isRequired: false, transformFunction: null }, collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "editChange", inputClasses: "inputClassesChange", viewer: "viewerChange", changed: "changed" }, ngImport: i0, template: "<ng-template #titleTpl>\n  <ng-content></ng-content>\n</ng-template>\n\n<!-- TEMPLATE affichage  -->\n<ng-template #dispTpl>\n  @switch (realDisplay()) {\n    @case (\"text\") {\n      <span class=\"editable disp-text\" (click)=\"enableEditMode()\">{{\n        txtValue()\n      }}</span>\n    }\n    @case (\"choice\") {\n      <span class=\"editable disp-choice\" (click)=\"enableEditMode()\">{{\n        txtValue()\n      }}</span>\n    }\n    @case (\"decimal\") {\n      <span class=\"editable disp-decimal\" (click)=\"enableEditMode()\">{{\n        txtValue()\n      }}</span>\n    }\n    @case (\"boolean\") {\n      <span class=\"editable disp-boolean\" (click)=\"enableEditMode()\">{{\n        txtValue()\n      }}</span>\n    }\n    @case (\"fkdetails\") {\n      <span class=\"editable disp-fkdetails\" (click)=\"enableEditMode()\">\n        <div class=\"fkitem\">{{ txtValue() }}</div></span\n      >\n    }\n    @case (\"m2mdetails\") {\n      <span class=\"editable disp-m2mdetails\" (click)=\"enableEditMode()\">\n        @for (v of txtValues(); track v) {\n          <div class=\"m2mitem\">{{ v }}</div>\n        }\n      </span>\n    }\n    @case (\"datetime\") {\n      <span class=\"editable disp-datetime\" (click)=\"enableEditMode()\">\n        @if (dispValue()) {\n          {{ txtValue() | date: \"short\" }}\n        }\n        @if (!dispValue()) {\n          {{ txtValue() }}\n        }\n      </span>\n    }\n    @case (\"date\") {\n      <span class=\"editable disp-datetime\" (click)=\"enableEditMode()\">\n        @if (dispValue()) {\n          {{ txtValue() | date: \"shortDate\" }}\n        }\n        @if (!dispValue()) {\n          {{ txtValue() }}\n        }\n      </span>\n    }\n  }\n</ng-template>\n\n<!-- TEMPLATE \u00E9dition  -->\n<ng-template #editTpl let-form=\"form\">\n  @switch (realEditor()) {\n    @case (\"input.text\") {\n      <input\n        type=\"text\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minlength']\"\n      >\n        Trop court : {{ $any(manager()).minLength }} caract\u00E8res minimum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxlength']\"\n      >\n        Trop long : {{ $any(manager()).maxLength }} caract\u00E8res maximum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['pattern']\"\n      >\n        Format invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.email\") {\n      <input\n        type=\"email\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minlength']\"\n      >\n        Trop court : {{ $any(manager()).minLength }} caract\u00E8res minimum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxlength']\"\n      >\n        Trop long : {{ $any(manager()).maxLength }} caract\u00E8res maximum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['pattern']\"\n      >\n        Format invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['email']\"\n      >\n        Format d'email invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.password\") {\n      <input\n        type=\"password\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minlength']\"\n      >\n        Trop court : {{ $any(manager()).minLength }} caract\u00E8res minimum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxlength']\"\n      >\n        Trop long : {{ $any(manager()).maxLength }} caract\u00E8res maximum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['pattern']\"\n      >\n        Format invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.datetime\") {\n      <input\n        type=\"datetime-local\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        (keyup.enter)=\"update()\"\n      />\n      <div class=\"form-text\">{{ realHelp() }}</div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minDate']\"\n      >\n        Doit \u00EAtre post\u00E9rieur \u00E0 {{ $any(manager()).min | date: \"short\" }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxDate']\"\n      >\n        Doit \u00EAtre ant\u00E9rieur \u00E0 {{ $any(manager()).max | date: \"short\" }}...\n      </div>\n    }\n    @case (\"input.date\") {\n      <input\n        type=\"date\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        (keyup.enter)=\"update()\"\n      />\n      <div class=\"form-text\">{{ realHelp() }}</div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minDate']\"\n      >\n        Doit \u00EAtre post\u00E9rieur \u00E0 {{ $any(manager()).min | date: \"short\" }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxDate']\"\n      >\n        Doit \u00EAtre ant\u00E9rieur \u00E0 {{ $any(manager()).max | date: \"short\" }}...\n      </div>\n    }\n    @case (\"input.number\") {\n      <input\n        type=\"number\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['min']\"\n      >\n        Trop petit : minimum {{ $any(manager()).min }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['max']\"\n      >\n        Trop grand : maximum {{ $any(manager()).max }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.decimal\") {\n      <input\n        type=\"number\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['min']\"\n      >\n        Trop petit : minimum {{ $any(manager()).min }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['max']\"\n      >\n        Trop grand : maximum {{ $any(manager()).max }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.checkbox\") {\n      @let v = $any(this.model())[this.field()];\n      <div class=\"btn-group btn-group-sm\" role=\"group\">\n        <button\n          type=\"button\"\n          [class]=\"v===true ? 'btn btn-primary' : 'btn btn-outline-primary'\"\n          (click)=\"form.get(field())?.setValue(true); update()\"\n          (keyup.escape)=\"unsetEdit()\"\n        >\n          Oui\n        </button>\n        <button\n          type=\"button\"\n          [class]=\"v===false ? 'btn btn-primary' : 'btn btn-outline-primary'\"\n          (click)=\"form.get(field())?.setValue(false); update()\"\n          (keyup.escape)=\"unsetEdit()\"\n        >\n          Non\n        </button>\n      </div>\n      <div class=\"form-text\">{{ realHelp() }}</div>\n    }\n    @case (\"textarea\") {\n      <textarea\n        [formControl]=\"form.get(field())\"\n        (keyup.escape)=\"unsetEdit()\"\n        [class]=\"inputClasses()\"\n        (keyup.control.enter)=\"update()\"\n        [placeholder]=\"realPlaceholder()\"\n      ></textarea>\n      @if (mode() === \"dd\") {\n        <button\n          class=\"btn btn-sm btn-link w-100 dispedit-text-update-button\"\n          (click)=\"update()\"\n        >\n          <i class=\"bi bi-save\"></i>\n        </button>\n      }\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minlength']\"\n      >\n        Trop court : {{ $any(manager()).minLength }} caract\u00E8res minimum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxlength']\"\n      >\n        Trop long : {{ $any(manager()).maxLength }} caract\u00E8res maximum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['pattern']\"\n      >\n        Format invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"fkselect\") {\n      <data-fkselect\n        [collection]=\"collection()\"\n        [filter]=\"filter()\"\n        [display]=\"display()\"\n        (selected)=\"selectedRefItem($event)\"\n        [placeholder]=\"placeholder()\"\n        (cancelled)=\"unsetEdit()\"\n        (cleared)=\"selectedRefItem(null)\"\n      ></data-fkselect>\n    }\n    @case (\"m2mselect\") {\n      <data-m2mselect\n        [collection]=\"collection()\"\n        [filter]=\"filter()\"\n        (changed)=\"update()\"\n        [formControl]=\"form.get(field())\"\n        (detailsChanged)=\"onM2MValuesChanges($event)\"\n        [model]=\"model()\"\n        [field]=\"field()\"\n        [placeholder]=\"placeholder()\"\n      ></data-m2mselect>\n    }\n    @case (\"select\") {\n      <select\n        [formControl]=\"form.get(field())\"\n        (keyup.escape)=\"unsetEdit()\"\n        (change)=\"update()\"\n        [class]=\"inputClasses()\"\n      >\n        @for (c of realChoices(); track c) {\n          <option [ngValue]=\"c.value !== undefined ? c.value : c\">\n            {{ c.desc ? c.desc : c }}\n          </option>\n        }\n      </select>\n      <div class=\"form-text\">{{ realHelp() }}</div>\n    }\n  }\n</ng-template>\n<!-- Disp/edit toggler-->\n<ng-template #dispeditTpl>\n  @if (!edit()) {\n    <ng-container *ngTemplateOutlet=\"dispTpl\"></ng-container>\n  }\n  @if (edit()) {\n    @if (fg(); as fg) {\n      <form [formGroup]=\"fg\" (submit)=\"update()\">\n        <ng-container\n          *ngTemplateOutlet=\"editTpl; context: { form: fg }\"\n        ></ng-container>\n      </form>\n    }\n  }\n</ng-template>\n<!-- DispEdit noform-->\n<ng-template #dispeditFormTpl>\n  @if (!edit()) {\n    <ng-container *ngTemplateOutlet=\"dispTpl\"></ng-container>\n  }\n  @if (edit()) {\n    @if (form()) {\n      <ng-container\n        *ngTemplateOutlet=\"editTpl; context: { form: form() }\"\n      ></ng-container>\n    }\n  }\n</ng-template>\n<!-- Dd display-->\n@if (mode() === \"dd\") {\n  @if (!hideLabel()) {\n    <dt [class.required]=\"required()\">\n      <span class=\"editable\" (click)=\"toggleEdit()\">\n        <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container\n      ></span>\n      @if (realDefault() !== undefined && edit()) {\n        <span class=\"pointer float-end\" (click)=\"setDefault()\"\n          ><i class=\"bi bi-trash ms-2\"></i\n        ></span>\n      }\n    </dt>\n  }\n  <dd [class.mb-0]=\"hideLabel()\">\n    <ng-container *ngTemplateOutlet=\"dispeditTpl\"></ng-container>\n  </dd>\n}\n<!-- Inline display-->\n@if (mode() === \"inline\") {\n  @if (!hideLabel()) {\n    @if (realDefault() !== undefined && edit()) {\n      <span class=\"pointer float-end\" (click)=\"setDefault()\"\n        ><i class=\"bi bi-trash ms-2\"></i\n      ></span>\n    }\n    <label [class.required]=\"required()\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container *ngTemplateOutlet=\"dispeditTpl\"></ng-container>\n}\n<!-- Form display-->\n@if (mode() === \"form\") {\n  @if (!hideLabel()) {\n    @if (realDefault() !== undefined && edit()) {\n      <span class=\"pointer float-end\" (click)=\"setDefault()\"\n        ><i class=\"bi bi-trash ms-2\"></i\n      ></span>\n    }\n    <label [class.required]=\"required()\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container *ngTemplateOutlet=\"dispeditFormTpl\"></ng-container>\n}\n", styles: [".editable{cursor:pointer}form.inline{display:inline-block}.required{font-weight:700}.required:after{content:\" (*)\"}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FkselectComponent, selector: "data-fkselect", inputs: ["model", "field", "edit", "value", "queryset", "collection", "update", "filter", "mode", "display", "search", "label", "placeholder", "inputClasses"], outputs: ["querysetChange", "collectionChange", "selected", "cancelled", "cleared"] }, { kind: "component", type: M2mselectComponent, selector: "data-m2mselect", inputs: ["model", "field", "edit", "values", "queryset", "collection", "filter", "mode", "display", "search", "label", "placeholder", "emptyLabel", "inputClasses"], outputs: ["valuesChange", "querysetChange", "collectionChange", "added", "removed", "cancelled", "cleared", "detailsChanged", "changed"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
+    _setDisplayClasses() {
+        // Reserved: display classes are currently applied in the template.
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DispeditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: DispeditComponent, isStandalone: true, selector: "data-dispedit", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, edit: { classPropertyName: "edit", publicName: "edit", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, choices: { classPropertyName: "choices", publicName: "choices", isSignal: true, isRequired: false, transformFunction: null }, inputClasses: { classPropertyName: "inputClasses", publicName: "inputClasses", isSignal: true, isRequired: false, transformFunction: null }, editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: false, transformFunction: null }, viewer: { classPropertyName: "viewer", publicName: "viewer", isSignal: true, isRequired: false, transformFunction: null }, default: { classPropertyName: "default", publicName: "default", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "help", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, queryset: { classPropertyName: "queryset", publicName: "queryset", isSignal: true, isRequired: false, transformFunction: null }, collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "editChange", inputClasses: "inputClassesChange", viewer: "viewerChange", changed: "changed" }, ngImport: i0, template: "<ng-template #titleTpl>\n  <ng-content></ng-content>\n</ng-template>\n\n<!-- TEMPLATE affichage  -->\n<ng-template #dispTpl>\n  @switch (realDisplay()) {\n    @case (\"text\") {\n      <span\n        class=\"editable disp-text\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n      >\n        {{ txtValue() }}\n      </span>\n    }\n    @case (\"html\") {\n      <!--\n        Trusted, not sanitized: Angular's sanitizer strips the inline styles\n        richedit writes. See SafeHtmlPipe.\n      -->\n      <div\n        class=\"editable disp-html\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n        [innerHTML]=\"txtValue() | safeHtml\"\n      ></div>\n    }\n    @case (\"choice\") {\n      <span\n        class=\"editable disp-choice\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n      >\n        {{ txtValue() }}\n      </span>\n    }\n    @case (\"decimal\") {\n      <span\n        class=\"editable disp-decimal\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n      >\n        {{ txtValue() }}\n      </span>\n    }\n    @case (\"boolean\") {\n      <span\n        class=\"editable disp-boolean\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n      >\n        {{ txtValue() }}\n      </span>\n    }\n    @case (\"fkdetails\") {\n      <span\n        class=\"editable disp-fkdetails\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n      >\n        <div class=\"fkitem\">{{ txtValue() }}</div>\n      </span>\n    }\n    @case (\"m2mdetails\") {\n      <span\n        class=\"editable disp-m2mdetails\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n      >\n        @for (v of txtValues(); track v) {\n          <div class=\"m2mitem\">{{ v }}</div>\n        }\n      </span>\n    }\n    @case (\"datetime\") {\n      <span\n        class=\"editable disp-datetime\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n      >\n        @if (dispValue()) {\n          {{ txtValue() | date: \"short\" }}\n        }\n        @if (!dispValue()) {\n          {{ txtValue() }}\n        }\n      </span>\n    }\n    @case (\"date\") {\n      <span\n        class=\"editable disp-datetime\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n      >\n        @if (dispValue()) {\n          {{ txtValue() | date: \"shortDate\" }}\n        }\n        @if (!dispValue()) {\n          {{ txtValue() }}\n        }\n      </span>\n    }\n  }\n</ng-template>\n\n<!-- TEMPLATE \u00E9dition  -->\n<ng-template #editTpl let-form=\"form\">\n  @switch (realEditor()) {\n    @case (\"input.text\") {\n      <input\n        [attr.id]=\"inputId\"\n        type=\"text\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minlength']\"\n      >\n        Trop court : {{ $any(manager()).minLength }} caract\u00E8res minimum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxlength']\"\n      >\n        Trop long : {{ $any(manager()).maxLength }} caract\u00E8res maximum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['pattern']\"\n      >\n        Format invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.email\") {\n      <input\n        [attr.id]=\"inputId\"\n        type=\"email\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minlength']\"\n      >\n        Trop court : {{ $any(manager()).minLength }} caract\u00E8res minimum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxlength']\"\n      >\n        Trop long : {{ $any(manager()).maxLength }} caract\u00E8res maximum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['pattern']\"\n      >\n        Format invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['email']\"\n      >\n        Format d'email invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.password\") {\n      <input\n        [attr.id]=\"inputId\"\n        type=\"password\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minlength']\"\n      >\n        Trop court : {{ $any(manager()).minLength }} caract\u00E8res minimum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxlength']\"\n      >\n        Trop long : {{ $any(manager()).maxLength }} caract\u00E8res maximum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['pattern']\"\n      >\n        Format invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.datetime\") {\n      <input\n        [attr.id]=\"inputId\"\n        type=\"datetime-local\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        (keyup.enter)=\"update()\"\n      />\n      <div class=\"form-text\">{{ realHelp() }}</div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minDate']\"\n      >\n        Doit \u00EAtre post\u00E9rieur \u00E0 {{ $any(manager()).min | date: \"short\" }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxDate']\"\n      >\n        Doit \u00EAtre ant\u00E9rieur \u00E0 {{ $any(manager()).max | date: \"short\" }}...\n      </div>\n    }\n    @case (\"input.date\") {\n      <input\n        [attr.id]=\"inputId\"\n        type=\"date\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        (keyup.enter)=\"update()\"\n      />\n      <div class=\"form-text\">{{ realHelp() }}</div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minDate']\"\n      >\n        Doit \u00EAtre post\u00E9rieur \u00E0 {{ $any(manager()).min | date: \"short\" }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxDate']\"\n      >\n        Doit \u00EAtre ant\u00E9rieur \u00E0 {{ $any(manager()).max | date: \"short\" }}...\n      </div>\n    }\n    @case (\"input.number\") {\n      <input\n        [attr.id]=\"inputId\"\n        type=\"number\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['min']\"\n      >\n        Trop petit : minimum {{ $any(manager()).min }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['max']\"\n      >\n        Trop grand : maximum {{ $any(manager()).max }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.decimal\") {\n      <input\n        [attr.id]=\"inputId\"\n        type=\"number\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['min']\"\n      >\n        Trop petit : minimum {{ $any(manager()).min }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['max']\"\n      >\n        Trop grand : maximum {{ $any(manager()).max }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.checkbox\") {\n      @let v = $any(this.model())[this.field()];\n      <div class=\"btn-group btn-group-sm\" role=\"group\">\n        <button\n          type=\"button\"\n          [class]=\"v === true ? 'btn btn-primary' : 'btn btn-outline-primary'\"\n          (click)=\"form.get(field())?.setValue(true); update()\"\n          (keyup.escape)=\"unsetEdit()\"\n        >\n          Oui\n        </button>\n        <button\n          type=\"button\"\n          [class]=\"v === false ? 'btn btn-primary' : 'btn btn-outline-primary'\"\n          (click)=\"form.get(field())?.setValue(false); update()\"\n          (keyup.escape)=\"unsetEdit()\"\n        >\n          Non\n        </button>\n      </div>\n      <div class=\"form-text\">{{ realHelp() }}</div>\n    }\n    @case (\"textarea\") {\n      <textarea\n        [attr.id]=\"inputId\"\n        [formControl]=\"form.get(field())\"\n        (keyup.escape)=\"unsetEdit()\"\n        [class]=\"inputClasses()\"\n        (keyup.control.enter)=\"update()\"\n        [placeholder]=\"realPlaceholder()\"\n      ></textarea>\n      @if (mode() === \"dd\") {\n        <button class=\"btn btn-sm btn-link w-100 dispedit-text-update-button\" (click)=\"update()\">\n          <i class=\"bi bi-save\"></i>\n        </button>\n      }\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minlength']\"\n      >\n        Trop court : {{ $any(manager()).minLength }} caract\u00E8res minimum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxlength']\"\n      >\n        Trop long : {{ $any(manager()).maxLength }} caract\u00E8res maximum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['pattern']\"\n      >\n        Format invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"fkselect\") {\n      <data-fkselect\n        [inputId]=\"inputId\"\n        [collection]=\"collection()\"\n        [filter]=\"filter()\"\n        [display]=\"display()\"\n        (selected)=\"selectedRefItem($event)\"\n        [placeholder]=\"placeholder()\"\n        (cancelled)=\"unsetEdit()\"\n        (cleared)=\"selectedRefItem(null)\"\n      ></data-fkselect>\n    }\n    @case (\"m2mselect\") {\n      <data-m2mselect\n        [inputId]=\"inputId\"\n        [collection]=\"collection()\"\n        [filter]=\"filter()\"\n        (changed)=\"update()\"\n        [formControl]=\"form.get(field())\"\n        (detailsChanged)=\"onM2MValuesChanges($event)\"\n        [model]=\"model()\"\n        [field]=\"field()\"\n        [placeholder]=\"placeholder()\"\n      ></data-m2mselect>\n    }\n    @case (\"select\") {\n      <select\n        [attr.id]=\"inputId\"\n        [formControl]=\"form.get(field())\"\n        (keyup.escape)=\"unsetEdit()\"\n        (change)=\"update()\"\n        [class]=\"inputClasses()\"\n      >\n        @for (c of realChoices(); track c) {\n          <option [ngValue]=\"c.value !== undefined ? c.value : c\">\n            {{ c.desc ? c.desc : c }}\n          </option>\n        }\n      </select>\n      <div class=\"form-text\">{{ realHelp() }}</div>\n    }\n  }\n</ng-template>\n<!-- Disp/edit toggler-->\n<ng-template #dispeditTpl>\n  @if (!edit()) {\n    <ng-container *ngTemplateOutlet=\"dispTpl\"></ng-container>\n  }\n  @if (edit()) {\n    @if (fg(); as fg) {\n      <form [formGroup]=\"fg\" (submit)=\"update()\">\n        <ng-container *ngTemplateOutlet=\"editTpl; context: { form: fg }\"></ng-container>\n      </form>\n    }\n  }\n</ng-template>\n<!-- DispEdit noform-->\n<ng-template #dispeditFormTpl>\n  @if (!edit()) {\n    <ng-container *ngTemplateOutlet=\"dispTpl\"></ng-container>\n  }\n  @if (edit()) {\n    @if (form()) {\n      <ng-container *ngTemplateOutlet=\"editTpl; context: { form: form() }\"></ng-container>\n    }\n  }\n</ng-template>\n<!-- Dd display-->\n@if (mode() === \"dd\") {\n  @if (!hideLabel()) {\n    <dt [class.required]=\"required()\">\n      <span\n        class=\"editable\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"toggleEdit()\"\n        (keydown.enter)=\"toggleEdit()\"\n        (keydown.space)=\"$event.preventDefault(); toggleEdit()\"\n      >\n        <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n      </span>\n      @if (realDefault() !== undefined && edit()) {\n        <span\n          class=\"pointer float-end\"\n          role=\"button\"\n          tabindex=\"0\"\n          aria-label=\"R\u00E9tablir la valeur par d\u00E9faut\"\n          (click)=\"setDefault()\"\n          (keydown.enter)=\"setDefault()\"\n          (keydown.space)=\"$event.preventDefault(); setDefault()\"\n        >\n          <i class=\"bi bi-trash ms-2\"></i>\n        </span>\n      }\n    </dt>\n  }\n  <dd [class.mb-0]=\"hideLabel()\">\n    <ng-container *ngTemplateOutlet=\"dispeditTpl\"></ng-container>\n  </dd>\n}\n<!-- Inline display-->\n@if (mode() === \"inline\") {\n  @if (!hideLabel()) {\n    @if (realDefault() !== undefined && edit()) {\n      <span\n        class=\"pointer float-end\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"R\u00E9tablir la valeur par d\u00E9faut\"\n        (click)=\"setDefault()\"\n        (keydown.enter)=\"setDefault()\"\n        (keydown.space)=\"$event.preventDefault(); setDefault()\"\n      >\n        <i class=\"bi bi-trash ms-2\"></i>\n      </span>\n    }\n    <label [class.required]=\"required()\" [attr.for]=\"inputId\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container *ngTemplateOutlet=\"dispeditTpl\"></ng-container>\n}\n<!-- Form display-->\n@if (mode() === \"form\") {\n  @if (!hideLabel()) {\n    @if (realDefault() !== undefined && edit()) {\n      <span\n        class=\"pointer float-end\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"R\u00E9tablir la valeur par d\u00E9faut\"\n        (click)=\"setDefault()\"\n        (keydown.enter)=\"setDefault()\"\n        (keydown.space)=\"$event.preventDefault(); setDefault()\"\n      >\n        <i class=\"bi bi-trash ms-2\"></i>\n      </span>\n    }\n    <label [class.required]=\"required()\" [attr.for]=\"inputId\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container *ngTemplateOutlet=\"dispeditFormTpl\"></ng-container>\n}\n", styles: [".editable{cursor:pointer}form.inline{display:inline-block}.required{font-weight:700}.required:after{content:\" (*)\"}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FkselectComponent, selector: "data-fkselect", inputs: ["model", "field", "edit", "value", "queryset", "collection", "update", "filter", "mode", "display", "search", "label", "inputId", "placeholder", "inputClasses"], outputs: ["querysetChange", "collectionChange", "selected", "cancelled", "cleared"] }, { kind: "component", type: M2mselectComponent, selector: "data-m2mselect", inputs: ["model", "field", "edit", "values", "queryset", "collection", "filter", "mode", "display", "search", "label", "inputId", "placeholder", "emptyLabel", "inputClasses"], outputs: ["valuesChange", "querysetChange", "collectionChange", "added", "removed", "cancelled", "cleared", "detailsChanged", "changed"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DispeditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DispeditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-dispedit', imports: [
-                        DatePipe,
-                        NgTemplateOutlet,
-                        ReactiveFormsModule,
-                        FkselectComponent,
-                        M2mselectComponent,
-                    ], template: "<ng-template #titleTpl>\n  <ng-content></ng-content>\n</ng-template>\n\n<!-- TEMPLATE affichage  -->\n<ng-template #dispTpl>\n  @switch (realDisplay()) {\n    @case (\"text\") {\n      <span class=\"editable disp-text\" (click)=\"enableEditMode()\">{{\n        txtValue()\n      }}</span>\n    }\n    @case (\"choice\") {\n      <span class=\"editable disp-choice\" (click)=\"enableEditMode()\">{{\n        txtValue()\n      }}</span>\n    }\n    @case (\"decimal\") {\n      <span class=\"editable disp-decimal\" (click)=\"enableEditMode()\">{{\n        txtValue()\n      }}</span>\n    }\n    @case (\"boolean\") {\n      <span class=\"editable disp-boolean\" (click)=\"enableEditMode()\">{{\n        txtValue()\n      }}</span>\n    }\n    @case (\"fkdetails\") {\n      <span class=\"editable disp-fkdetails\" (click)=\"enableEditMode()\">\n        <div class=\"fkitem\">{{ txtValue() }}</div></span\n      >\n    }\n    @case (\"m2mdetails\") {\n      <span class=\"editable disp-m2mdetails\" (click)=\"enableEditMode()\">\n        @for (v of txtValues(); track v) {\n          <div class=\"m2mitem\">{{ v }}</div>\n        }\n      </span>\n    }\n    @case (\"datetime\") {\n      <span class=\"editable disp-datetime\" (click)=\"enableEditMode()\">\n        @if (dispValue()) {\n          {{ txtValue() | date: \"short\" }}\n        }\n        @if (!dispValue()) {\n          {{ txtValue() }}\n        }\n      </span>\n    }\n    @case (\"date\") {\n      <span class=\"editable disp-datetime\" (click)=\"enableEditMode()\">\n        @if (dispValue()) {\n          {{ txtValue() | date: \"shortDate\" }}\n        }\n        @if (!dispValue()) {\n          {{ txtValue() }}\n        }\n      </span>\n    }\n  }\n</ng-template>\n\n<!-- TEMPLATE \u00E9dition  -->\n<ng-template #editTpl let-form=\"form\">\n  @switch (realEditor()) {\n    @case (\"input.text\") {\n      <input\n        type=\"text\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minlength']\"\n      >\n        Trop court : {{ $any(manager()).minLength }} caract\u00E8res minimum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxlength']\"\n      >\n        Trop long : {{ $any(manager()).maxLength }} caract\u00E8res maximum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['pattern']\"\n      >\n        Format invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.email\") {\n      <input\n        type=\"email\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minlength']\"\n      >\n        Trop court : {{ $any(manager()).minLength }} caract\u00E8res minimum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxlength']\"\n      >\n        Trop long : {{ $any(manager()).maxLength }} caract\u00E8res maximum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['pattern']\"\n      >\n        Format invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['email']\"\n      >\n        Format d'email invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.password\") {\n      <input\n        type=\"password\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minlength']\"\n      >\n        Trop court : {{ $any(manager()).minLength }} caract\u00E8res minimum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxlength']\"\n      >\n        Trop long : {{ $any(manager()).maxLength }} caract\u00E8res maximum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['pattern']\"\n      >\n        Format invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.datetime\") {\n      <input\n        type=\"datetime-local\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        (keyup.enter)=\"update()\"\n      />\n      <div class=\"form-text\">{{ realHelp() }}</div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minDate']\"\n      >\n        Doit \u00EAtre post\u00E9rieur \u00E0 {{ $any(manager()).min | date: \"short\" }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxDate']\"\n      >\n        Doit \u00EAtre ant\u00E9rieur \u00E0 {{ $any(manager()).max | date: \"short\" }}...\n      </div>\n    }\n    @case (\"input.date\") {\n      <input\n        type=\"date\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        (keyup.enter)=\"update()\"\n      />\n      <div class=\"form-text\">{{ realHelp() }}</div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minDate']\"\n      >\n        Doit \u00EAtre post\u00E9rieur \u00E0 {{ $any(manager()).min | date: \"short\" }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxDate']\"\n      >\n        Doit \u00EAtre ant\u00E9rieur \u00E0 {{ $any(manager()).max | date: \"short\" }}...\n      </div>\n    }\n    @case (\"input.number\") {\n      <input\n        type=\"number\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['min']\"\n      >\n        Trop petit : minimum {{ $any(manager()).min }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['max']\"\n      >\n        Trop grand : maximum {{ $any(manager()).max }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.decimal\") {\n      <input\n        type=\"number\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['min']\"\n      >\n        Trop petit : minimum {{ $any(manager()).min }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['max']\"\n      >\n        Trop grand : maximum {{ $any(manager()).max }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.checkbox\") {\n      @let v = $any(this.model())[this.field()];\n      <div class=\"btn-group btn-group-sm\" role=\"group\">\n        <button\n          type=\"button\"\n          [class]=\"v===true ? 'btn btn-primary' : 'btn btn-outline-primary'\"\n          (click)=\"form.get(field())?.setValue(true); update()\"\n          (keyup.escape)=\"unsetEdit()\"\n        >\n          Oui\n        </button>\n        <button\n          type=\"button\"\n          [class]=\"v===false ? 'btn btn-primary' : 'btn btn-outline-primary'\"\n          (click)=\"form.get(field())?.setValue(false); update()\"\n          (keyup.escape)=\"unsetEdit()\"\n        >\n          Non\n        </button>\n      </div>\n      <div class=\"form-text\">{{ realHelp() }}</div>\n    }\n    @case (\"textarea\") {\n      <textarea\n        [formControl]=\"form.get(field())\"\n        (keyup.escape)=\"unsetEdit()\"\n        [class]=\"inputClasses()\"\n        (keyup.control.enter)=\"update()\"\n        [placeholder]=\"realPlaceholder()\"\n      ></textarea>\n      @if (mode() === \"dd\") {\n        <button\n          class=\"btn btn-sm btn-link w-100 dispedit-text-update-button\"\n          (click)=\"update()\"\n        >\n          <i class=\"bi bi-save\"></i>\n        </button>\n      }\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minlength']\"\n      >\n        Trop court : {{ $any(manager()).minLength }} caract\u00E8res minimum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxlength']\"\n      >\n        Trop long : {{ $any(manager()).maxLength }} caract\u00E8res maximum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['pattern']\"\n      >\n        Format invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"fkselect\") {\n      <data-fkselect\n        [collection]=\"collection()\"\n        [filter]=\"filter()\"\n        [display]=\"display()\"\n        (selected)=\"selectedRefItem($event)\"\n        [placeholder]=\"placeholder()\"\n        (cancelled)=\"unsetEdit()\"\n        (cleared)=\"selectedRefItem(null)\"\n      ></data-fkselect>\n    }\n    @case (\"m2mselect\") {\n      <data-m2mselect\n        [collection]=\"collection()\"\n        [filter]=\"filter()\"\n        (changed)=\"update()\"\n        [formControl]=\"form.get(field())\"\n        (detailsChanged)=\"onM2MValuesChanges($event)\"\n        [model]=\"model()\"\n        [field]=\"field()\"\n        [placeholder]=\"placeholder()\"\n      ></data-m2mselect>\n    }\n    @case (\"select\") {\n      <select\n        [formControl]=\"form.get(field())\"\n        (keyup.escape)=\"unsetEdit()\"\n        (change)=\"update()\"\n        [class]=\"inputClasses()\"\n      >\n        @for (c of realChoices(); track c) {\n          <option [ngValue]=\"c.value !== undefined ? c.value : c\">\n            {{ c.desc ? c.desc : c }}\n          </option>\n        }\n      </select>\n      <div class=\"form-text\">{{ realHelp() }}</div>\n    }\n  }\n</ng-template>\n<!-- Disp/edit toggler-->\n<ng-template #dispeditTpl>\n  @if (!edit()) {\n    <ng-container *ngTemplateOutlet=\"dispTpl\"></ng-container>\n  }\n  @if (edit()) {\n    @if (fg(); as fg) {\n      <form [formGroup]=\"fg\" (submit)=\"update()\">\n        <ng-container\n          *ngTemplateOutlet=\"editTpl; context: { form: fg }\"\n        ></ng-container>\n      </form>\n    }\n  }\n</ng-template>\n<!-- DispEdit noform-->\n<ng-template #dispeditFormTpl>\n  @if (!edit()) {\n    <ng-container *ngTemplateOutlet=\"dispTpl\"></ng-container>\n  }\n  @if (edit()) {\n    @if (form()) {\n      <ng-container\n        *ngTemplateOutlet=\"editTpl; context: { form: form() }\"\n      ></ng-container>\n    }\n  }\n</ng-template>\n<!-- Dd display-->\n@if (mode() === \"dd\") {\n  @if (!hideLabel()) {\n    <dt [class.required]=\"required()\">\n      <span class=\"editable\" (click)=\"toggleEdit()\">\n        <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container\n      ></span>\n      @if (realDefault() !== undefined && edit()) {\n        <span class=\"pointer float-end\" (click)=\"setDefault()\"\n          ><i class=\"bi bi-trash ms-2\"></i\n        ></span>\n      }\n    </dt>\n  }\n  <dd [class.mb-0]=\"hideLabel()\">\n    <ng-container *ngTemplateOutlet=\"dispeditTpl\"></ng-container>\n  </dd>\n}\n<!-- Inline display-->\n@if (mode() === \"inline\") {\n  @if (!hideLabel()) {\n    @if (realDefault() !== undefined && edit()) {\n      <span class=\"pointer float-end\" (click)=\"setDefault()\"\n        ><i class=\"bi bi-trash ms-2\"></i\n      ></span>\n    }\n    <label [class.required]=\"required()\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container *ngTemplateOutlet=\"dispeditTpl\"></ng-container>\n}\n<!-- Form display-->\n@if (mode() === \"form\") {\n  @if (!hideLabel()) {\n    @if (realDefault() !== undefined && edit()) {\n      <span class=\"pointer float-end\" (click)=\"setDefault()\"\n        ><i class=\"bi bi-trash ms-2\"></i\n      ></span>\n    }\n    <label [class.required]=\"required()\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container *ngTemplateOutlet=\"dispeditFormTpl\"></ng-container>\n}\n", styles: [".editable{cursor:pointer}form.inline{display:inline-block}.required{font-weight:700}.required:after{content:\" (*)\"}\n"] }]
+            args: [{ selector: 'data-dispedit', imports: [DatePipe, NgTemplateOutlet, ReactiveFormsModule, FkselectComponent, M2mselectComponent, SafeHtmlPipe], template: "<ng-template #titleTpl>\n  <ng-content></ng-content>\n</ng-template>\n\n<!-- TEMPLATE affichage  -->\n<ng-template #dispTpl>\n  @switch (realDisplay()) {\n    @case (\"text\") {\n      <span\n        class=\"editable disp-text\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n      >\n        {{ txtValue() }}\n      </span>\n    }\n    @case (\"html\") {\n      <!--\n        Trusted, not sanitized: Angular's sanitizer strips the inline styles\n        richedit writes. See SafeHtmlPipe.\n      -->\n      <div\n        class=\"editable disp-html\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n        [innerHTML]=\"txtValue() | safeHtml\"\n      ></div>\n    }\n    @case (\"choice\") {\n      <span\n        class=\"editable disp-choice\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n      >\n        {{ txtValue() }}\n      </span>\n    }\n    @case (\"decimal\") {\n      <span\n        class=\"editable disp-decimal\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n      >\n        {{ txtValue() }}\n      </span>\n    }\n    @case (\"boolean\") {\n      <span\n        class=\"editable disp-boolean\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n      >\n        {{ txtValue() }}\n      </span>\n    }\n    @case (\"fkdetails\") {\n      <span\n        class=\"editable disp-fkdetails\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n      >\n        <div class=\"fkitem\">{{ txtValue() }}</div>\n      </span>\n    }\n    @case (\"m2mdetails\") {\n      <span\n        class=\"editable disp-m2mdetails\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n      >\n        @for (v of txtValues(); track v) {\n          <div class=\"m2mitem\">{{ v }}</div>\n        }\n      </span>\n    }\n    @case (\"datetime\") {\n      <span\n        class=\"editable disp-datetime\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n      >\n        @if (dispValue()) {\n          {{ txtValue() | date: \"short\" }}\n        }\n        @if (!dispValue()) {\n          {{ txtValue() }}\n        }\n      </span>\n    }\n    @case (\"date\") {\n      <span\n        class=\"editable disp-datetime\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"enableEditMode()\"\n        (keydown.enter)=\"enableEditMode()\"\n        (keydown.space)=\"$event.preventDefault(); enableEditMode()\"\n      >\n        @if (dispValue()) {\n          {{ txtValue() | date: \"shortDate\" }}\n        }\n        @if (!dispValue()) {\n          {{ txtValue() }}\n        }\n      </span>\n    }\n  }\n</ng-template>\n\n<!-- TEMPLATE \u00E9dition  -->\n<ng-template #editTpl let-form=\"form\">\n  @switch (realEditor()) {\n    @case (\"input.text\") {\n      <input\n        [attr.id]=\"inputId\"\n        type=\"text\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minlength']\"\n      >\n        Trop court : {{ $any(manager()).minLength }} caract\u00E8res minimum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxlength']\"\n      >\n        Trop long : {{ $any(manager()).maxLength }} caract\u00E8res maximum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['pattern']\"\n      >\n        Format invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.email\") {\n      <input\n        [attr.id]=\"inputId\"\n        type=\"email\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minlength']\"\n      >\n        Trop court : {{ $any(manager()).minLength }} caract\u00E8res minimum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxlength']\"\n      >\n        Trop long : {{ $any(manager()).maxLength }} caract\u00E8res maximum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['pattern']\"\n      >\n        Format invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['email']\"\n      >\n        Format d'email invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.password\") {\n      <input\n        [attr.id]=\"inputId\"\n        type=\"password\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minlength']\"\n      >\n        Trop court : {{ $any(manager()).minLength }} caract\u00E8res minimum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxlength']\"\n      >\n        Trop long : {{ $any(manager()).maxLength }} caract\u00E8res maximum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['pattern']\"\n      >\n        Format invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.datetime\") {\n      <input\n        [attr.id]=\"inputId\"\n        type=\"datetime-local\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        (keyup.enter)=\"update()\"\n      />\n      <div class=\"form-text\">{{ realHelp() }}</div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minDate']\"\n      >\n        Doit \u00EAtre post\u00E9rieur \u00E0 {{ $any(manager()).min | date: \"short\" }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxDate']\"\n      >\n        Doit \u00EAtre ant\u00E9rieur \u00E0 {{ $any(manager()).max | date: \"short\" }}...\n      </div>\n    }\n    @case (\"input.date\") {\n      <input\n        [attr.id]=\"inputId\"\n        type=\"date\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        (keyup.enter)=\"update()\"\n      />\n      <div class=\"form-text\">{{ realHelp() }}</div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minDate']\"\n      >\n        Doit \u00EAtre post\u00E9rieur \u00E0 {{ $any(manager()).min | date: \"short\" }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxDate']\"\n      >\n        Doit \u00EAtre ant\u00E9rieur \u00E0 {{ $any(manager()).max | date: \"short\" }}...\n      </div>\n    }\n    @case (\"input.number\") {\n      <input\n        [attr.id]=\"inputId\"\n        type=\"number\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['min']\"\n      >\n        Trop petit : minimum {{ $any(manager()).min }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['max']\"\n      >\n        Trop grand : maximum {{ $any(manager()).max }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.decimal\") {\n      <input\n        [attr.id]=\"inputId\"\n        type=\"number\"\n        [formControl]=\"form.get(field())\"\n        [class]=\"inputClasses()\"\n        (keyup.escape)=\"unsetEdit()\"\n        [placeholder]=\"realPlaceholder()\"\n      />\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['min']\"\n      >\n        Trop petit : minimum {{ $any(manager()).min }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['max']\"\n      >\n        Trop grand : maximum {{ $any(manager()).max }}...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"input.checkbox\") {\n      @let v = $any(this.model())[this.field()];\n      <div class=\"btn-group btn-group-sm\" role=\"group\">\n        <button\n          type=\"button\"\n          [class]=\"v === true ? 'btn btn-primary' : 'btn btn-outline-primary'\"\n          (click)=\"form.get(field())?.setValue(true); update()\"\n          (keyup.escape)=\"unsetEdit()\"\n        >\n          Oui\n        </button>\n        <button\n          type=\"button\"\n          [class]=\"v === false ? 'btn btn-primary' : 'btn btn-outline-primary'\"\n          (click)=\"form.get(field())?.setValue(false); update()\"\n          (keyup.escape)=\"unsetEdit()\"\n        >\n          Non\n        </button>\n      </div>\n      <div class=\"form-text\">{{ realHelp() }}</div>\n    }\n    @case (\"textarea\") {\n      <textarea\n        [attr.id]=\"inputId\"\n        [formControl]=\"form.get(field())\"\n        (keyup.escape)=\"unsetEdit()\"\n        [class]=\"inputClasses()\"\n        (keyup.control.enter)=\"update()\"\n        [placeholder]=\"realPlaceholder()\"\n      ></textarea>\n      @if (mode() === \"dd\") {\n        <button class=\"btn btn-sm btn-link w-100 dispedit-text-update-button\" (click)=\"update()\">\n          <i class=\"bi bi-save\"></i>\n        </button>\n      }\n      @if (realHelp()) {\n        <div class=\"form-text\">\n          {{ realHelp() }}\n          @if (required()) {\n            <span class=\"ms-1\">(requis)</span>\n          }\n        </div>\n      }\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['minlength']\"\n      >\n        Trop court : {{ $any(manager()).minLength }} caract\u00E8res minimum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['maxlength']\"\n      >\n        Trop long : {{ $any(manager()).maxLength }} caract\u00E8res maximum...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['pattern']\"\n      >\n        Format invalide...\n      </div>\n      <div\n        class=\"invalid-feedback mt-0\"\n        [class.d-block]=\"form &amp;&amp; !form.controls[field()].pristine &amp;&amp; form.controls[field()].errors?.['required']\"\n      >\n        Ce champ est requis...\n      </div>\n    }\n    @case (\"fkselect\") {\n      <data-fkselect\n        [inputId]=\"inputId\"\n        [collection]=\"collection()\"\n        [filter]=\"filter()\"\n        [display]=\"display()\"\n        (selected)=\"selectedRefItem($event)\"\n        [placeholder]=\"placeholder()\"\n        (cancelled)=\"unsetEdit()\"\n        (cleared)=\"selectedRefItem(null)\"\n      ></data-fkselect>\n    }\n    @case (\"m2mselect\") {\n      <data-m2mselect\n        [inputId]=\"inputId\"\n        [collection]=\"collection()\"\n        [filter]=\"filter()\"\n        (changed)=\"update()\"\n        [formControl]=\"form.get(field())\"\n        (detailsChanged)=\"onM2MValuesChanges($event)\"\n        [model]=\"model()\"\n        [field]=\"field()\"\n        [placeholder]=\"placeholder()\"\n      ></data-m2mselect>\n    }\n    @case (\"select\") {\n      <select\n        [attr.id]=\"inputId\"\n        [formControl]=\"form.get(field())\"\n        (keyup.escape)=\"unsetEdit()\"\n        (change)=\"update()\"\n        [class]=\"inputClasses()\"\n      >\n        @for (c of realChoices(); track c) {\n          <option [ngValue]=\"c.value !== undefined ? c.value : c\">\n            {{ c.desc ? c.desc : c }}\n          </option>\n        }\n      </select>\n      <div class=\"form-text\">{{ realHelp() }}</div>\n    }\n  }\n</ng-template>\n<!-- Disp/edit toggler-->\n<ng-template #dispeditTpl>\n  @if (!edit()) {\n    <ng-container *ngTemplateOutlet=\"dispTpl\"></ng-container>\n  }\n  @if (edit()) {\n    @if (fg(); as fg) {\n      <form [formGroup]=\"fg\" (submit)=\"update()\">\n        <ng-container *ngTemplateOutlet=\"editTpl; context: { form: fg }\"></ng-container>\n      </form>\n    }\n  }\n</ng-template>\n<!-- DispEdit noform-->\n<ng-template #dispeditFormTpl>\n  @if (!edit()) {\n    <ng-container *ngTemplateOutlet=\"dispTpl\"></ng-container>\n  }\n  @if (edit()) {\n    @if (form()) {\n      <ng-container *ngTemplateOutlet=\"editTpl; context: { form: form() }\"></ng-container>\n    }\n  }\n</ng-template>\n<!-- Dd display-->\n@if (mode() === \"dd\") {\n  @if (!hideLabel()) {\n    <dt [class.required]=\"required()\">\n      <span\n        class=\"editable\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"toggleEdit()\"\n        (keydown.enter)=\"toggleEdit()\"\n        (keydown.space)=\"$event.preventDefault(); toggleEdit()\"\n      >\n        <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n      </span>\n      @if (realDefault() !== undefined && edit()) {\n        <span\n          class=\"pointer float-end\"\n          role=\"button\"\n          tabindex=\"0\"\n          aria-label=\"R\u00E9tablir la valeur par d\u00E9faut\"\n          (click)=\"setDefault()\"\n          (keydown.enter)=\"setDefault()\"\n          (keydown.space)=\"$event.preventDefault(); setDefault()\"\n        >\n          <i class=\"bi bi-trash ms-2\"></i>\n        </span>\n      }\n    </dt>\n  }\n  <dd [class.mb-0]=\"hideLabel()\">\n    <ng-container *ngTemplateOutlet=\"dispeditTpl\"></ng-container>\n  </dd>\n}\n<!-- Inline display-->\n@if (mode() === \"inline\") {\n  @if (!hideLabel()) {\n    @if (realDefault() !== undefined && edit()) {\n      <span\n        class=\"pointer float-end\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"R\u00E9tablir la valeur par d\u00E9faut\"\n        (click)=\"setDefault()\"\n        (keydown.enter)=\"setDefault()\"\n        (keydown.space)=\"$event.preventDefault(); setDefault()\"\n      >\n        <i class=\"bi bi-trash ms-2\"></i>\n      </span>\n    }\n    <label [class.required]=\"required()\" [attr.for]=\"inputId\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container *ngTemplateOutlet=\"dispeditTpl\"></ng-container>\n}\n<!-- Form display-->\n@if (mode() === \"form\") {\n  @if (!hideLabel()) {\n    @if (realDefault() !== undefined && edit()) {\n      <span\n        class=\"pointer float-end\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"R\u00E9tablir la valeur par d\u00E9faut\"\n        (click)=\"setDefault()\"\n        (keydown.enter)=\"setDefault()\"\n        (keydown.space)=\"$event.preventDefault(); setDefault()\"\n      >\n        <i class=\"bi bi-trash ms-2\"></i>\n      </span>\n    }\n    <label [class.required]=\"required()\" [attr.for]=\"inputId\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container *ngTemplateOutlet=\"dispeditFormTpl\"></ng-container>\n}\n", styles: [".editable{cursor:pointer}form.inline{display:inline-block}.required{font-weight:700}.required:after{content:\" (*)\"}\n"] }]
         }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], edit: [{ type: i0.Input, args: [{ isSignal: true, alias: "edit", required: false }] }, { type: i0.Output, args: ["editChange"] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], choices: [{ type: i0.Input, args: [{ isSignal: true, alias: "choices", required: false }] }], inputClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClasses", required: false }] }, { type: i0.Output, args: ["inputClassesChange"] }], editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: false }] }], viewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewer", required: false }] }, { type: i0.Output, args: ["viewerChange"] }], default: [{ type: i0.Input, args: [{ isSignal: true, alias: "default", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], help: [{ type: i0.Input, args: [{ isSignal: true, alias: "help", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], queryset: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryset", required: false }] }], collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
@@ -7375,13 +7503,14 @@ class FlagsComponent {
      * from the model field, and wire the dropdown so that selecting a value adds
      * the flag (debounced 250ms).
      */
-    async ngOnInit() {
+    ngOnInit() {
         const model = this.model();
         if (!this.flags() && model._collection) {
             this.flags.set(model._collection.action(null, 'GET', this.get_flags_endpoint()));
         }
-        if (model && this.field() && model[this.field()]) {
-            this.curflags.set(model[this.field()]);
+        const flags = model && this.field() && fieldValues(model)[this.field()];
+        if (flags) {
+            this.curflags.set(flags);
         }
         else {
             console.warn('Model or field problem in flagsfield component');
@@ -7389,17 +7518,15 @@ class FlagsComponent {
         }
         this.ft = new FormControl('');
         this.fs = new FormControl('');
-        this.fs.valueChanges
-            .pipe(takeUntilDestroyed(this.destroy$), debounceTime(250))
-            .subscribe((value) => {
+        this.fs.valueChanges.pipe(takeUntilDestroyed(this.destroy$), debounceTime(250)).subscribe((value) => {
             if (value) {
-                this.addFlag(value);
+                void this.addFlag(value);
             }
         });
     }
     /** Add the flag currently typed in the free-text input. */
     async addFreeFlag() {
-        await this.addFlag(this.ft.value);
+        await this.addFlag(this.ft.value ?? '');
     }
     /**
      * Add a flag and persist, unless it is already present.
@@ -7418,7 +7545,7 @@ class FlagsComponent {
                     this._msg.success('Flag enregistré avec succès');
                 }
                 catch (e) {
-                    this._msg.error('Erreur lors de la sauvegarde', e);
+                    this._msg.error('Erreur lors de la sauvegarde', String(e));
                 }
             }
             else {
@@ -7431,7 +7558,7 @@ class FlagsComponent {
      * both inputs. Reports success or failure through the message service.
      */
     async update() {
-        this.model()[this.field()] = this.curflags();
+        fieldValues(this.model())[this.field()] = this.curflags();
         try {
             await firstValueFrom(this.model().update([this.field()]));
             this.fs.setValue('', { emitEvent: false });
@@ -7439,7 +7566,7 @@ class FlagsComponent {
             this._msg.success('Flag enregistré avec succès');
         }
         catch (error) {
-            this._msg.error('Erreur lors de la sauvegarde', `API Return : ${error}`, error._body);
+            this._msg.error('Erreur lors de la sauvegarde', `API Return : ${String(error)}`, error._body);
         }
     }
     /**
@@ -7464,7 +7591,7 @@ class FlagsComponent {
                 this._msg.success('Removed');
             }
             catch (e) {
-                this._msg.error('Removing flag failed', e);
+                this._msg.error('Removing flag failed', String(e));
             }
         }
         else {
@@ -7492,12 +7619,12 @@ class FlagsComponent {
             this.edit.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FlagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FlagsComponent, isStandalone: true, selector: "data-flags", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, get_flags_endpoint: { classPropertyName: "get_flags_endpoint", publicName: "get_flags_endpoint", isSignal: true, isRequired: false, transformFunction: null }, edit: { classPropertyName: "edit", publicName: "edit", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, flags: { classPropertyName: "flags", publicName: "flags", isSignal: true, isRequired: false, transformFunction: null }, free: { classPropertyName: "free", publicName: "free", isSignal: true, isRequired: false, transformFunction: null }, create: { classPropertyName: "create", publicName: "create", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "editChange", flags: "flagsChange" }, ngImport: i0, template: "\n<dt (click)=\"toggleEdit()\" role=\"button\">\n  <ng-content></ng-content>\n</dt>\n@if (!edit()) {\n  <dd (click)=\"toggleEdit()\" role=\"button\">@for (flag of curflags(); track flag) {\n    <span class=\"badge bg-info me-1\">{{flag}}</span>\n  }</dd>\n}\n@if (edit()) {\n  <dd>\n    <div class=\"row\">\n      @if (!free()) {\n        <div class=\"col\">\n          <select class=\"form-select form-select-sm\" [formControl]=\"fs\">\n            @for (flag of flaglist(); track flag) {\n              <option [value]=\"flag.flag\">{{flag.flag}}@if (flag.count) {\n                <span class=\"ms-1\">({{flag.count}})</span>\n              }</option>\n            }\n          </select>\n        </div>\n        @if (create()) {\n          <div class=\"col\">\n            <input class=\"form-control form-control-sm\" placeholder=\"Nouveau flag\" [formControl]=\"ft\" (keyup.enter)=\"addFreeFlag()\">\n          </div>\n        }\n      }\n      @if (free()) {\n        <div class=\"col-12\">\n          <input class=\"form-control form-select-sm\" placeholder=\"Nouveau flag\" [formControl]=\"ft\" (keyup.enter)=\"addFreeFlag()\" (keyup.escape)=\"toggleEdit()\">\n        </div>\n      }\n    </div>\n    <div class=\"row\">\n      <div class=\"col-sm-12\">@for (flag of curflags(); track flag) {\n        <span class=\"badge bg-info me-1\" (click)=\"removeFlag(flag)\" role=\"button\"><i class=\"bi bi-trash me-1\"></i>{{flag}}</span>\n        }<i class=\"bi bi-x-lg text-muted ms-2\" role=\"button\" (click)=\"toggleEdit()\"></i></div>\n      </div>\n    </dd>\n  }", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FlagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: FlagsComponent, isStandalone: true, selector: "data-flags", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, get_flags_endpoint: { classPropertyName: "get_flags_endpoint", publicName: "get_flags_endpoint", isSignal: true, isRequired: false, transformFunction: null }, edit: { classPropertyName: "edit", publicName: "edit", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, flags: { classPropertyName: "flags", publicName: "flags", isSignal: true, isRequired: false, transformFunction: null }, free: { classPropertyName: "free", publicName: "free", isSignal: true, isRequired: false, transformFunction: null }, create: { classPropertyName: "create", publicName: "create", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "editChange", flags: "flagsChange" }, ngImport: i0, template: "<dt\n  (click)=\"toggleEdit()\"\n  role=\"button\"\n  tabindex=\"0\"\n  (keydown.enter)=\"toggleEdit()\"\n  (keydown.space)=\"$event.preventDefault(); toggleEdit()\"\n>\n  <ng-content></ng-content>\n</dt>\n@if (!edit()) {\n  <dd\n    (click)=\"toggleEdit()\"\n    role=\"button\"\n    tabindex=\"0\"\n    (keydown.enter)=\"toggleEdit()\"\n    (keydown.space)=\"$event.preventDefault(); toggleEdit()\"\n  >\n    @for (flag of curflags(); track flag) {\n      <span class=\"badge bg-info me-1\">{{ flag }}</span>\n    }\n  </dd>\n}\n@if (edit()) {\n  <dd>\n    <div class=\"row\">\n      @if (!free()) {\n        <div class=\"col\">\n          <select class=\"form-select form-select-sm\" [formControl]=\"fs\">\n            @for (flag of flaglist(); track flag) {\n              <option [value]=\"flag.flag\">\n                {{ flag.flag }}\n                @if (flag.count) {\n                  <span class=\"ms-1\">({{ flag.count }})</span>\n                }\n              </option>\n            }\n          </select>\n        </div>\n        @if (create()) {\n          <div class=\"col\">\n            <input\n              class=\"form-control form-control-sm\"\n              placeholder=\"Nouveau flag\"\n              [formControl]=\"ft\"\n              (keyup.enter)=\"addFreeFlag()\"\n            />\n          </div>\n        }\n      }\n      @if (free()) {\n        <div class=\"col-12\">\n          <input\n            class=\"form-control form-select-sm\"\n            placeholder=\"Nouveau flag\"\n            [formControl]=\"ft\"\n            (keyup.enter)=\"addFreeFlag()\"\n            (keyup.escape)=\"toggleEdit()\"\n          />\n        </div>\n      }\n    </div>\n    <div class=\"row\">\n      <div class=\"col-sm-12\">\n        @for (flag of curflags(); track flag) {\n          <span\n            class=\"badge bg-info me-1\"\n            (click)=\"removeFlag(flag)\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"'Retirer le flag ' + flag\"\n            (keydown.enter)=\"removeFlag(flag)\"\n            (keydown.space)=\"$event.preventDefault(); removeFlag(flag)\"\n          >\n            <i class=\"bi bi-trash me-1\"></i>\n            {{ flag }}\n          </span>\n        }\n        <i\n          class=\"bi bi-x-lg text-muted ms-2\"\n          role=\"button\"\n          tabindex=\"0\"\n          aria-label=\"Fermer l'\u00E9dition\"\n          (click)=\"toggleEdit()\"\n          (keydown.enter)=\"toggleEdit()\"\n          (keydown.space)=\"$event.preventDefault(); toggleEdit()\"\n        ></i>\n      </div>\n    </div>\n  </dd>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FlagsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FlagsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-flags', imports: [ReactiveFormsModule], template: "\n<dt (click)=\"toggleEdit()\" role=\"button\">\n  <ng-content></ng-content>\n</dt>\n@if (!edit()) {\n  <dd (click)=\"toggleEdit()\" role=\"button\">@for (flag of curflags(); track flag) {\n    <span class=\"badge bg-info me-1\">{{flag}}</span>\n  }</dd>\n}\n@if (edit()) {\n  <dd>\n    <div class=\"row\">\n      @if (!free()) {\n        <div class=\"col\">\n          <select class=\"form-select form-select-sm\" [formControl]=\"fs\">\n            @for (flag of flaglist(); track flag) {\n              <option [value]=\"flag.flag\">{{flag.flag}}@if (flag.count) {\n                <span class=\"ms-1\">({{flag.count}})</span>\n              }</option>\n            }\n          </select>\n        </div>\n        @if (create()) {\n          <div class=\"col\">\n            <input class=\"form-control form-control-sm\" placeholder=\"Nouveau flag\" [formControl]=\"ft\" (keyup.enter)=\"addFreeFlag()\">\n          </div>\n        }\n      }\n      @if (free()) {\n        <div class=\"col-12\">\n          <input class=\"form-control form-select-sm\" placeholder=\"Nouveau flag\" [formControl]=\"ft\" (keyup.enter)=\"addFreeFlag()\" (keyup.escape)=\"toggleEdit()\">\n        </div>\n      }\n    </div>\n    <div class=\"row\">\n      <div class=\"col-sm-12\">@for (flag of curflags(); track flag) {\n        <span class=\"badge bg-info me-1\" (click)=\"removeFlag(flag)\" role=\"button\"><i class=\"bi bi-trash me-1\"></i>{{flag}}</span>\n        }<i class=\"bi bi-x-lg text-muted ms-2\" role=\"button\" (click)=\"toggleEdit()\"></i></div>\n      </div>\n    </dd>\n  }" }]
+            args: [{ selector: 'data-flags', imports: [ReactiveFormsModule], template: "<dt\n  (click)=\"toggleEdit()\"\n  role=\"button\"\n  tabindex=\"0\"\n  (keydown.enter)=\"toggleEdit()\"\n  (keydown.space)=\"$event.preventDefault(); toggleEdit()\"\n>\n  <ng-content></ng-content>\n</dt>\n@if (!edit()) {\n  <dd\n    (click)=\"toggleEdit()\"\n    role=\"button\"\n    tabindex=\"0\"\n    (keydown.enter)=\"toggleEdit()\"\n    (keydown.space)=\"$event.preventDefault(); toggleEdit()\"\n  >\n    @for (flag of curflags(); track flag) {\n      <span class=\"badge bg-info me-1\">{{ flag }}</span>\n    }\n  </dd>\n}\n@if (edit()) {\n  <dd>\n    <div class=\"row\">\n      @if (!free()) {\n        <div class=\"col\">\n          <select class=\"form-select form-select-sm\" [formControl]=\"fs\">\n            @for (flag of flaglist(); track flag) {\n              <option [value]=\"flag.flag\">\n                {{ flag.flag }}\n                @if (flag.count) {\n                  <span class=\"ms-1\">({{ flag.count }})</span>\n                }\n              </option>\n            }\n          </select>\n        </div>\n        @if (create()) {\n          <div class=\"col\">\n            <input\n              class=\"form-control form-control-sm\"\n              placeholder=\"Nouveau flag\"\n              [formControl]=\"ft\"\n              (keyup.enter)=\"addFreeFlag()\"\n            />\n          </div>\n        }\n      }\n      @if (free()) {\n        <div class=\"col-12\">\n          <input\n            class=\"form-control form-select-sm\"\n            placeholder=\"Nouveau flag\"\n            [formControl]=\"ft\"\n            (keyup.enter)=\"addFreeFlag()\"\n            (keyup.escape)=\"toggleEdit()\"\n          />\n        </div>\n      }\n    </div>\n    <div class=\"row\">\n      <div class=\"col-sm-12\">\n        @for (flag of curflags(); track flag) {\n          <span\n            class=\"badge bg-info me-1\"\n            (click)=\"removeFlag(flag)\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"'Retirer le flag ' + flag\"\n            (keydown.enter)=\"removeFlag(flag)\"\n            (keydown.space)=\"$event.preventDefault(); removeFlag(flag)\"\n          >\n            <i class=\"bi bi-trash me-1\"></i>\n            {{ flag }}\n          </span>\n        }\n        <i\n          class=\"bi bi-x-lg text-muted ms-2\"\n          role=\"button\"\n          tabindex=\"0\"\n          aria-label=\"Fermer l'\u00E9dition\"\n          (click)=\"toggleEdit()\"\n          (keydown.enter)=\"toggleEdit()\"\n          (keydown.space)=\"$event.preventDefault(); toggleEdit()\"\n        ></i>\n      </div>\n    </div>\n  </dd>\n}\n" }]
         }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], get_flags_endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "get_flags_endpoint", required: false }] }], edit: [{ type: i0.Input, args: [{ isSignal: true, alias: "edit", required: false }] }, { type: i0.Output, args: ["editChange"] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], flags: [{ type: i0.Input, args: [{ isSignal: true, alias: "flags", required: false }] }, { type: i0.Output, args: ["flagsChange"] }], free: [{ type: i0.Input, args: [{ isSignal: true, alias: "free", required: false }] }], create: [{ type: i0.Input, args: [{ isSignal: true, alias: "create", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }] } });
 
 /**
@@ -7557,13 +7684,13 @@ class SafeDeleteComponent {
      * First step: run the dry-run delete and open the confirmation panel with its
      * result. Nothing is destroyed here.
      *
-     * @param model unused; the component always acts on its own `[model]` input.
+     * @param _model unused; the component always acts on its own `[model]` input.
      */
-    async checkDelete(model) {
+    async checkDelete(_model) {
         const service = this.service() || this.model()._collection;
         if (service) {
             try {
-                this.result.set(await firstValueFrom(service.delete(this.model(), { params: { doit: 'no' } })));
+                this.result.set((await firstValueFrom(service.delete(this.model(), { params: { doit: 'no' } }))));
                 this.ofc = this._ofc.open(this._dialogRef, {
                     position: 'end',
                 });
@@ -7602,7 +7729,7 @@ class SafeDeleteComponent {
             const service = this.service() || this.model()._collection;
             if (service) {
                 try {
-                    this.result.set(await firstValueFrom(service.delete(this.model(), { params: { doit: 'really' } })));
+                    this.result.set((await firstValueFrom(service.delete(this.model(), { params: { doit: 'really' } }))));
                     if (this.messages().success) {
                         this._msgs.success(this.messages().success);
                     }
@@ -7618,12 +7745,12 @@ class SafeDeleteComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SafeDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SafeDeleteComponent, isStandalone: true, selector: "data-safe-delete", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, actionFn: { classPropertyName: "actionFn", publicName: "actionFn", isSignal: true, isRequired: false, transformFunction: null }, checks: { classPropertyName: "checks", publicName: "checks", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted" }, viewQueries: [{ propertyName: "_dialogRef", first: true, predicate: ["dialog"], descendants: true, static: true }], ngImport: i0, template: "\n<ng-template #dialog let-offcanvas>\n  <div class=\"offcanvas-header\">\n    <h2 class=\"offcanvas-title text-danger text-center\"><i class=\"bi bi-trash me-2\"></i>Supprimer r\u00E9ellement ??</h2>\n  </div>\n  @if (result(); as result) {\n    <div class=\"offcanvas-body text-danger\">\n      <div class=\"text-center my-4 fs-1\"><i class=\"bi bi-exclamation-diamond my-5\"></i></div>\n      <div class=\"fs-4\">\n        <p>La suppression de cet \u00E9l\u00E9ment supprimera {{result.count}} \u00E9l\u00E9ments dans la base de donn\u00E9es..</p>\n      </div>\n      <table class=\"table table-sm table-striped table-danger\">\n        <thead>\n          <tr>\n            <th>Type d'\u00E9l\u00E9ment</th>\n            <th>Nombre</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (rl of result.details; track rl) {\n            <tr>\n              <td>{{checks()[rl[0]] ? checks()[rl[0]] : rl[0]}}</td>\n              <td>{{rl[1]}}</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n      <button class=\"w-100 btn btn-lg btn-danger\" (click)=\"reallyDelete()\"><i class=\"bi bi-trash me-2\"></i>Je confirme la suppression</button>\n      <button class=\"w-100 btn btn-outline-secondary my-3\" (click)=\"offcanvas.close()\"><i class=\"bi bi-door-open me-2\"></i>Je renonce \u00E0 la suppression</button>\n    </div>\n  }\n</ng-template>\n<ng-template #contentTpl>\n  <ng-content></ng-content>\n</ng-template>\n@if (display()==='button') {\n  <button class=\"btn btn-sm btn-danger\" (click)=\"checkDelete(model())\"><i class=\"bi bi-trash\"></i>\n  <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n</button>\n}\n@if (display()==='fbutton') {\n  <button class=\"btn btn-sm btn-outline-danger float-end\" (click)=\"checkDelete(model())\"><i class=\"bi bi-trash mx-2\"></i></button>\n  }@if (display()==='icon') {\n  <i class=\"bi bi-trash mx-2\" (click)=\"checkDelete(model())\" role=\"button\"></i>\n}\n@if (display()==='custom') {\n  <div (click)=\"checkDelete(model())\" role=\"button\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </div>\n}", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbOffcanvasModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SafeDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: SafeDeleteComponent, isStandalone: true, selector: "data-safe-delete", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, actionFn: { classPropertyName: "actionFn", publicName: "actionFn", isSignal: true, isRequired: false, transformFunction: null }, checks: { classPropertyName: "checks", publicName: "checks", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted" }, viewQueries: [{ propertyName: "_dialogRef", first: true, predicate: ["dialog"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #dialog let-offcanvas>\n  <div class=\"offcanvas-header\">\n    <h2 class=\"offcanvas-title text-danger text-center\">\n      <i class=\"bi bi-trash me-2\"></i>\n      Supprimer r\u00E9ellement ??\n    </h2>\n  </div>\n  @if (result(); as result) {\n    <div class=\"offcanvas-body text-danger\">\n      <div class=\"text-center my-4 fs-1\">\n        <i class=\"bi bi-exclamation-diamond my-5\"></i>\n      </div>\n      <div class=\"fs-4\">\n        <p>La suppression de cet \u00E9l\u00E9ment supprimera {{ result.count }} \u00E9l\u00E9ments dans la base de donn\u00E9es..</p>\n      </div>\n      <table class=\"table table-sm table-striped table-danger\">\n        <thead>\n          <tr>\n            <th>Type d'\u00E9l\u00E9ment</th>\n            <th>Nombre</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (rl of result.details; track rl) {\n            <tr>\n              <td>{{ checks()[rl[0]] ? checks()[rl[0]] : rl[0] }}</td>\n              <td>{{ rl[1] }}</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n      <button class=\"w-100 btn btn-lg btn-danger\" (click)=\"reallyDelete()\">\n        <i class=\"bi bi-trash me-2\"></i>\n        Je confirme la suppression\n      </button>\n      <button class=\"w-100 btn btn-outline-secondary my-3\" (click)=\"offcanvas.close()\">\n        <i class=\"bi bi-door-open me-2\"></i>\n        Je renonce \u00E0 la suppression\n      </button>\n    </div>\n  }\n</ng-template>\n<ng-template #contentTpl>\n  <ng-content></ng-content>\n</ng-template>\n@if (display() === \"button\") {\n  <button class=\"btn btn-sm btn-danger\" (click)=\"checkDelete(model())\">\n    <i class=\"bi bi-trash\"></i>\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n}\n@if (display() === \"fbutton\") {\n  <button class=\"btn btn-sm btn-outline-danger float-end\" (click)=\"checkDelete(model())\">\n    <i class=\"bi bi-trash mx-2\"></i>\n  </button>\n}\n@if (display() === \"icon\") {\n  <i\n    class=\"bi bi-trash mx-2\"\n    (click)=\"checkDelete(model())\"\n    role=\"button\"\n    tabindex=\"0\"\n    aria-label=\"Supprimer\"\n    (keydown.enter)=\"checkDelete(model())\"\n    (keydown.space)=\"$event.preventDefault(); checkDelete(model())\"\n  ></i>\n}\n@if (display() === \"custom\") {\n  <div\n    (click)=\"checkDelete(model())\"\n    role=\"button\"\n    tabindex=\"0\"\n    (keydown.enter)=\"checkDelete(model())\"\n    (keydown.space)=\"$event.preventDefault(); checkDelete(model())\"\n  >\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbOffcanvasModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SafeDeleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SafeDeleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-safe-delete', imports: [NgTemplateOutlet, NgbOffcanvasModule], template: "\n<ng-template #dialog let-offcanvas>\n  <div class=\"offcanvas-header\">\n    <h2 class=\"offcanvas-title text-danger text-center\"><i class=\"bi bi-trash me-2\"></i>Supprimer r\u00E9ellement ??</h2>\n  </div>\n  @if (result(); as result) {\n    <div class=\"offcanvas-body text-danger\">\n      <div class=\"text-center my-4 fs-1\"><i class=\"bi bi-exclamation-diamond my-5\"></i></div>\n      <div class=\"fs-4\">\n        <p>La suppression de cet \u00E9l\u00E9ment supprimera {{result.count}} \u00E9l\u00E9ments dans la base de donn\u00E9es..</p>\n      </div>\n      <table class=\"table table-sm table-striped table-danger\">\n        <thead>\n          <tr>\n            <th>Type d'\u00E9l\u00E9ment</th>\n            <th>Nombre</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (rl of result.details; track rl) {\n            <tr>\n              <td>{{checks()[rl[0]] ? checks()[rl[0]] : rl[0]}}</td>\n              <td>{{rl[1]}}</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n      <button class=\"w-100 btn btn-lg btn-danger\" (click)=\"reallyDelete()\"><i class=\"bi bi-trash me-2\"></i>Je confirme la suppression</button>\n      <button class=\"w-100 btn btn-outline-secondary my-3\" (click)=\"offcanvas.close()\"><i class=\"bi bi-door-open me-2\"></i>Je renonce \u00E0 la suppression</button>\n    </div>\n  }\n</ng-template>\n<ng-template #contentTpl>\n  <ng-content></ng-content>\n</ng-template>\n@if (display()==='button') {\n  <button class=\"btn btn-sm btn-danger\" (click)=\"checkDelete(model())\"><i class=\"bi bi-trash\"></i>\n  <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n</button>\n}\n@if (display()==='fbutton') {\n  <button class=\"btn btn-sm btn-outline-danger float-end\" (click)=\"checkDelete(model())\"><i class=\"bi bi-trash mx-2\"></i></button>\n  }@if (display()==='icon') {\n  <i class=\"bi bi-trash mx-2\" (click)=\"checkDelete(model())\" role=\"button\"></i>\n}\n@if (display()==='custom') {\n  <div (click)=\"checkDelete(model())\" role=\"button\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </div>\n}" }]
+            args: [{ selector: 'data-safe-delete', imports: [NgTemplateOutlet, NgbOffcanvasModule], template: "<ng-template #dialog let-offcanvas>\n  <div class=\"offcanvas-header\">\n    <h2 class=\"offcanvas-title text-danger text-center\">\n      <i class=\"bi bi-trash me-2\"></i>\n      Supprimer r\u00E9ellement ??\n    </h2>\n  </div>\n  @if (result(); as result) {\n    <div class=\"offcanvas-body text-danger\">\n      <div class=\"text-center my-4 fs-1\">\n        <i class=\"bi bi-exclamation-diamond my-5\"></i>\n      </div>\n      <div class=\"fs-4\">\n        <p>La suppression de cet \u00E9l\u00E9ment supprimera {{ result.count }} \u00E9l\u00E9ments dans la base de donn\u00E9es..</p>\n      </div>\n      <table class=\"table table-sm table-striped table-danger\">\n        <thead>\n          <tr>\n            <th>Type d'\u00E9l\u00E9ment</th>\n            <th>Nombre</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (rl of result.details; track rl) {\n            <tr>\n              <td>{{ checks()[rl[0]] ? checks()[rl[0]] : rl[0] }}</td>\n              <td>{{ rl[1] }}</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n      <button class=\"w-100 btn btn-lg btn-danger\" (click)=\"reallyDelete()\">\n        <i class=\"bi bi-trash me-2\"></i>\n        Je confirme la suppression\n      </button>\n      <button class=\"w-100 btn btn-outline-secondary my-3\" (click)=\"offcanvas.close()\">\n        <i class=\"bi bi-door-open me-2\"></i>\n        Je renonce \u00E0 la suppression\n      </button>\n    </div>\n  }\n</ng-template>\n<ng-template #contentTpl>\n  <ng-content></ng-content>\n</ng-template>\n@if (display() === \"button\") {\n  <button class=\"btn btn-sm btn-danger\" (click)=\"checkDelete(model())\">\n    <i class=\"bi bi-trash\"></i>\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </button>\n}\n@if (display() === \"fbutton\") {\n  <button class=\"btn btn-sm btn-outline-danger float-end\" (click)=\"checkDelete(model())\">\n    <i class=\"bi bi-trash mx-2\"></i>\n  </button>\n}\n@if (display() === \"icon\") {\n  <i\n    class=\"bi bi-trash mx-2\"\n    (click)=\"checkDelete(model())\"\n    role=\"button\"\n    tabindex=\"0\"\n    aria-label=\"Supprimer\"\n    (keydown.enter)=\"checkDelete(model())\"\n    (keydown.space)=\"$event.preventDefault(); checkDelete(model())\"\n  ></i>\n}\n@if (display() === \"custom\") {\n  <div\n    (click)=\"checkDelete(model())\"\n    role=\"button\"\n    tabindex=\"0\"\n    (keydown.enter)=\"checkDelete(model())\"\n    (keydown.space)=\"$event.preventDefault(); checkDelete(model())\"\n  >\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </div>\n}\n" }]
         }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: false }] }], actionFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionFn", required: false }] }], checks: [{ type: i0.Input, args: [{ isSignal: true, alias: "checks", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], deleted: [{ type: i0.Output, args: ["deleted"] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], _dialogRef: [{
                 type: ViewChild,
                 args: ['dialog', { static: true }]
@@ -7678,7 +7805,7 @@ class CharFieldManager extends BaseFieldManager {
         if (typeof data === 'string') {
             return data;
         }
-        return `${data}`;
+        return asText(data);
     }
 }
 /**
@@ -7712,6 +7839,7 @@ class EmailFieldManager extends CharFieldManager {
     get validators() {
         const v = super.getValidators();
         if (this.validate) {
+            // eslint-disable-next-line @typescript-eslint/unbound-method -- Validators.* are static and `this`-free
             v.push(Validators.email);
         }
         return v;
@@ -7734,7 +7862,6 @@ class PasswordFieldManager extends CharFieldManager {
     /** Renders a masked `input.password` editor. */
     editorType = 'input.password';
 }
-/* eslint-disable max-len */
 /**
  * Declares a single-line string field — the default choice for any short text
  * value. Renders a text input, or a dropdown as soon as `choices` is given.
@@ -7892,7 +8019,7 @@ class DateFieldManager extends BaseFieldManager {
             return null;
         }
         const date = new Date(data);
-        if (date instanceof Date && !isNaN(date)) {
+        if (date instanceof Date && !isNaN(date.getTime())) {
             return date;
         }
         return null;
@@ -8045,7 +8172,7 @@ class DatetimeFieldManager extends DateFieldManager {
         else {
             date = new Date(data);
         }
-        if (date instanceof Date && !isNaN(date)) {
+        if (date instanceof Date && !isNaN(date.getTime())) {
             return date;
         }
         return null;
@@ -8145,14 +8272,14 @@ class DetailsFieldManager extends BaseFieldManager {
         if (this.model) {
             if (!this.many) {
                 const d = new this.model(coll);
-                d.fromJson(data);
+                d.fromJson(fieldValues(data));
                 return d;
             }
             else {
                 const out = [];
                 for (const dt of data) {
                     const d = new this.model(coll);
-                    d.fromJson(dt);
+                    d.fromJson(fieldValues(dt));
                     out.push(d);
                 }
                 return out;
@@ -8175,7 +8302,6 @@ class ManyToManyFieldManager extends BaseFieldManager {
     /** Rendered by `m2mdetails`, which reads `<field>_details`. */
     displayType = 'm2mdetails';
 }
-/* eslint-disable max-len */
 /**
  * Declares the id half of a foreign key: the plain number the API stores.
  *
@@ -8378,7 +8504,6 @@ class DecimalFieldManager extends IntegerFieldManager {
     /** Renders an `input.decimal` editor, which multiplies back by `factor` on save. */
     editorType = 'input.decimal';
 }
-/* eslint-disable max-len */
 /**
  * Declares a whole-number field: counts, quantities, positions. Rendered as a
  * number input, with optional `min`/`max` validators.
@@ -8444,10 +8569,13 @@ class ComputedFieldManager extends BaseFieldManager {
      * Deserialises nothing: the body is empty, so the return is always
      * `undefined`. A computed field takes no value from the payload.
      *
-     * @param data ignored
-     * @param coll ignored
+     * @param _data ignored
+     * @param _coll ignored
      */
-    fromJson(data, coll) { }
+    fromJson(_data, _coll) {
+        // A computed field is derived on the client; the payload holds nothing.
+        return undefined;
+    }
 }
 /**
  * Declares a display-only field derived on the client, typically backed by a
@@ -8509,18 +8637,16 @@ class MessageZoneComponent {
     messages = inject(DataMessageService);
     destroy$ = inject(DestroyRef);
     ngOnInit() {
-        this.messages.current
-            .pipe(takeUntilDestroyed(this.destroy$))
-            .subscribe((messages) => {
+        this.messages.current.pipe(takeUntilDestroyed(this.destroy$)).subscribe((messages) => {
             this.current.set(messages);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: MessageZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: MessageZoneComponent, isStandalone: true, selector: "data-message-zone", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n<div class=\"messagezone\">\n  @for (message of current(); track message) {\n    <div class=\"alert\" animate.enter=\"fade-enter\" animate.leave=\"fade-leave\" [class]=\"message.style\" (click)=\"message.showTrace=!message.showTrace\">\n      <button class=\"btn-close\" type=\"button\" (click)=\"messages.ack(message)\" aria-label=\"Close\"></button><strong>{{message.title}}</strong>&nbsp; {{message.message}}\n      @if (message.showTrace) {\n        <div class=\"pretrace\">{{message.trace}}</div>\n      }\n    </div>\n  }\n</div>", styles: [".messagezone{position:fixed;top:30px;right:40px;width:35vw;height:auto;z-index:1050}.messagezone .pretrace{white-space:pre-wrap;font-family:monospace;font-size:.7rem}.fade-enter{animation:message-fade-in .55s ease}.fade-leave{animation:message-fade-out .55s ease}@keyframes message-fade-in{0%{opacity:0}to{opacity:1}}@keyframes message-fade-out{0%{opacity:1}to{opacity:0}}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: MessageZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: MessageZoneComponent, isStandalone: true, selector: "data-message-zone", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"messagezone\">\n  @for (message of current(); track message) {\n    <div\n      class=\"alert\"\n      animate.enter=\"fade-enter\"\n      animate.leave=\"fade-leave\"\n      [class]=\"message.style\"\n      (click)=\"message.showTrace = !message.showTrace\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-expanded]=\"message.showTrace\"\n      aria-label=\"Afficher la trace\"\n      (keydown.enter)=\"message.showTrace = !message.showTrace\"\n      (keydown.space)=\"$event.preventDefault(); message.showTrace = !message.showTrace\"\n    >\n      <button class=\"btn-close\" type=\"button\" (click)=\"messages.ack(message)\" aria-label=\"Close\"></button>\n      <strong>{{ message.title }}</strong>\n      &nbsp; {{ message.message }}\n      @if (message.showTrace) {\n        <div class=\"pretrace\">{{ message.trace }}</div>\n      }\n    </div>\n  }\n</div>\n", styles: [".messagezone{position:fixed;top:30px;right:40px;width:35vw;height:auto;z-index:1050}.messagezone .pretrace{white-space:pre-wrap;font-family:monospace;font-size:.7rem}.fade-enter{animation:message-fade-in .55s ease}.fade-leave{animation:message-fade-out .55s ease}@keyframes message-fade-in{0%{opacity:0}to{opacity:1}}@keyframes message-fade-out{0%{opacity:1}to{opacity:0}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: MessageZoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: MessageZoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-message-zone', imports: [], template: "\n<div class=\"messagezone\">\n  @for (message of current(); track message) {\n    <div class=\"alert\" animate.enter=\"fade-enter\" animate.leave=\"fade-leave\" [class]=\"message.style\" (click)=\"message.showTrace=!message.showTrace\">\n      <button class=\"btn-close\" type=\"button\" (click)=\"messages.ack(message)\" aria-label=\"Close\"></button><strong>{{message.title}}</strong>&nbsp; {{message.message}}\n      @if (message.showTrace) {\n        <div class=\"pretrace\">{{message.trace}}</div>\n      }\n    </div>\n  }\n</div>", styles: [".messagezone{position:fixed;top:30px;right:40px;width:35vw;height:auto;z-index:1050}.messagezone .pretrace{white-space:pre-wrap;font-family:monospace;font-size:.7rem}.fade-enter{animation:message-fade-in .55s ease}.fade-leave{animation:message-fade-out .55s ease}@keyframes message-fade-in{0%{opacity:0}to{opacity:1}}@keyframes message-fade-out{0%{opacity:1}to{opacity:0}}\n"] }]
+            args: [{ selector: 'data-message-zone', imports: [], template: "<div class=\"messagezone\">\n  @for (message of current(); track message) {\n    <div\n      class=\"alert\"\n      animate.enter=\"fade-enter\"\n      animate.leave=\"fade-leave\"\n      [class]=\"message.style\"\n      (click)=\"message.showTrace = !message.showTrace\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-expanded]=\"message.showTrace\"\n      aria-label=\"Afficher la trace\"\n      (keydown.enter)=\"message.showTrace = !message.showTrace\"\n      (keydown.space)=\"$event.preventDefault(); message.showTrace = !message.showTrace\"\n    >\n      <button class=\"btn-close\" type=\"button\" (click)=\"messages.ack(message)\" aria-label=\"Close\"></button>\n      <strong>{{ message.title }}</strong>\n      &nbsp; {{ message.message }}\n      @if (message.showTrace) {\n        <div class=\"pretrace\">{{ message.trace }}</div>\n      }\n    </div>\n  }\n</div>\n", styles: [".messagezone{position:fixed;top:30px;right:40px;width:35vw;height:auto;z-index:1050}.messagezone .pretrace{white-space:pre-wrap;font-family:monospace;font-size:.7rem}.fade-enter{animation:message-fade-in .55s ease}.fade-leave{animation:message-fade-out .55s ease}@keyframes message-fade-in{0%{opacity:0}to{opacity:1}}@keyframes message-fade-out{0%{opacity:1}to{opacity:0}}\n"] }]
         }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }] } });
 
 /**
@@ -8582,7 +8708,6 @@ class QuerysetMock {
      * @param _coll parent mock, used as the fallback source of rows
      * @param options recorded to match `Queryset`'s shape; no option is acted on
      */
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     constructor(_coll, options = {}) {
         this._coll = _coll;
         this.options = options;
@@ -8600,7 +8725,7 @@ class QuerysetMock {
     get meta() {
         return of({
             nav: { count: 100, next: 1, page: 1, pages: 10, prev: null, size: 10 },
-            parameters: { page: "page", page_size: "page_size" }
+            parameters: { page: 'page', page_size: 'page_size' },
         });
     }
     /** `[results, loading, meta]` combined, mirroring `Queryset.full`. */
@@ -8608,19 +8733,19 @@ class QuerysetMock {
         return combineLatest([this.results, this.loading, this.meta]);
     }
     /** No-op returning `this`; the filter is discarded. See the class-level caveat. */
-    filter(params = {}) {
+    filter(_params = {}) {
         return this;
     }
     /** No-op returning `this`; the ordering is discarded. See the class-level caveat. */
-    sort(...sorting) {
+    sort(..._sorting) {
         return this;
     }
     /** No-op returning `this`; {@link pageSize} is left untouched. */
-    paginateBy(pageSize = 20) {
+    paginateBy(_pageSize = 20) {
         return this;
     }
     /** No-op returning `this`; {@link page} is left untouched. */
-    setPage(page) {
+    setPage(_page) {
         return this;
     }
     /** Always returns `{}`, since no query state is retained. */
@@ -8690,7 +8815,7 @@ class CollectionMock {
      * id, so a test that fetches two different ids gets the same instance back.
      * Reassign `mockValue` between calls if that matters.
      */
-    fetch(id, suffix = "") {
+    fetch(_id, _suffix = '') {
         return of(this.mockValue);
     }
     /**
@@ -8698,7 +8823,7 @@ class CollectionMock {
      * the call, assert on the effects rather than on the invocation, or spy on this
      * method when you need to check what was requested.
      */
-    action(model, method, action, params) {
+    action(_model, _method, _action, _params) {
         return of(this.actionValue);
     }
     /**
@@ -8714,7 +8839,7 @@ class CollectionMock {
      * real `Collection.list()` unwraps. Arguments are ignored, so filters are not
      * applied; set {@link mockValues} to whatever the filtered result should be.
      */
-    list(query = {}, suffix = "") {
+    list(_query = {}, _suffix = '') {
         return of({ results: this.mockValues });
     }
     /**
@@ -8859,7 +8984,7 @@ class DataUploaderService {
     initInputEvents(input) {
         return input.subscribe((event) => {
             switch (event.type) {
-                case 'uploadFile':
+                case 'uploadFile': {
                     const uploadFileIndex = this.queue.findIndex((file) => file === event.file);
                     if (uploadFileIndex !== -1 && event.file) {
                         this.uploadScheduler.next({
@@ -8868,11 +8993,13 @@ class DataUploaderService {
                         });
                     }
                     break;
-                case 'uploadAll':
+                }
+                case 'uploadAll': {
                     const files = this.queue.filter((file) => file.progress.status === UploadStatus.Queue);
                     files.forEach((file) => this.uploadScheduler.next({ file: file, event: event }));
                     break;
-                case 'cancel':
+                }
+                case 'cancel': {
                     const id = event.id || null;
                     if (!id) {
                         return;
@@ -8892,6 +9019,7 @@ class DataUploaderService {
                         }
                     });
                     break;
+                }
                 case 'cancelAll':
                     this.subs.forEach((sub) => {
                         if (sub.sub) {
@@ -8904,7 +9032,7 @@ class DataUploaderService {
                         }
                     });
                     break;
-                case 'remove':
+                case 'remove': {
                     if (!event.id) {
                         return;
                     }
@@ -8915,6 +9043,7 @@ class DataUploaderService {
                         this.serviceEvents.emit({ type: 'removed', file: file });
                     }
                     break;
+                }
                 case 'removeAll':
                     if (this.queue.length) {
                         this.queue = [];
@@ -8977,9 +9106,7 @@ class DataUploaderService {
                     const percentage = Math.round((e.loaded * 100) / e.total);
                     const diff = new Date().getTime() - time;
                     speed = Math.round((e.loaded / diff) * 1000);
-                    progressStartTime =
-                        (file.progress.data && file.progress.data.startTime) ||
-                            new Date().getTime();
+                    progressStartTime = (file.progress.data && file.progress.data.startTime) || new Date().getTime();
                     eta = Math.ceil((e.total - e.loaded) / speed);
                     file.progress = {
                         status: UploadStatus.Uploading,
@@ -9019,7 +9146,7 @@ class DataUploaderService {
                     try {
                         file.response = JSON.parse(xhr.response);
                     }
-                    catch (e) {
+                    catch {
                         file.response = xhr.response;
                     }
                     file.responseHeaders = this.parseResponseHeaders(xhr.getAllResponseHeaders());
@@ -9048,7 +9175,7 @@ class DataUploaderService {
                 this.serviceEvents.emit({ type: 'start', file: file });
                 xhr.send(bodyToSend);
             }
-            catch (e) {
+            catch {
                 observer.complete();
             }
             return () => {
@@ -9093,7 +9220,7 @@ class DataUploaderService {
         if (this.allContentTypesAllowed()) {
             return true;
         }
-        return (this.contentTypes.find((type) => type === mimetype) !== undefined);
+        return this.contentTypes.find((type) => type === mimetype) !== undefined;
     }
     /** Whether a file is within {@link maxFileSize}. A falsy limit (including `0`) means no limit. */
     isFileSizeAllowed(fileSize) {
@@ -9175,7 +9302,7 @@ class NgFileDropDirective {
         this._sub = [];
         const options = this.options();
         const concurrency = (options && options.concurrency) || Number.POSITIVE_INFINITY;
-        const allowedContentTypes = (options && options.allowedContentTypes) || ["*"];
+        const allowedContentTypes = (options && options.allowedContentTypes) || ['*'];
         const maxUploads = (options && options.maxUploads) || Number.POSITIVE_INFINITY;
         const maxFileSize = (options && options.maxFileSize) || Number.POSITIVE_INFINITY;
         this.upload = new DataUploaderService(concurrency, allowedContentTypes, maxUploads, maxFileSize);
@@ -9187,13 +9314,13 @@ class NgFileDropDirective {
         if (uploadInput instanceof EventEmitter) {
             this._sub.push(this.upload.initInputEvents(uploadInput));
         }
-        this.el.addEventListener("drop", this.stopEvent, false);
-        this.el.addEventListener("dragenter", this.stopEvent, false);
-        this.el.addEventListener("dragover", this.stopEvent, false);
+        this.el.addEventListener('drop', this.stopEvent, false);
+        this.el.addEventListener('dragenter', this.stopEvent, false);
+        this.el.addEventListener('dragover', this.stopEvent, false);
     }
     ngOnDestroy() {
         if (this._sub) {
-            this._sub.forEach(sub => sub.unsubscribe());
+            this._sub.forEach((sub) => sub.unsubscribe());
         }
     }
     stopEvent = (e) => {
@@ -9204,16 +9331,18 @@ class NgFileDropDirective {
     onDrop(e) {
         e.stopPropagation();
         e.preventDefault();
-        const event = { type: "drop" };
+        const event = { type: 'drop' };
         this.uploadOutput.emit(event);
-        this.upload.handleFiles(e.dataTransfer.files);
+        if (e.dataTransfer) {
+            this.upload.handleFiles(e.dataTransfer.files);
+        }
     }
     /** Emits `dragOver` while a drag hovers the zone, for highlighting it. Bound to the host `dragover` event. */
     onDragOver(e) {
         if (!e) {
             return;
         }
-        const event = { type: "dragOver" };
+        const event = { type: 'dragOver' };
         this.uploadOutput.emit(event);
     }
     /** Emits `dragOut` when a drag leaves the zone, to clear the highlight. Bound to the host `dragleave` event. */
@@ -9221,20 +9350,20 @@ class NgFileDropDirective {
         if (!e) {
             return;
         }
-        const event = { type: "dragOut" };
+        const event = { type: 'dragOut' };
         this.uploadOutput.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFileDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: NgFileDropDirective, isStandalone: true, selector: "[dataFileDrop]", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, uploadInput: { classPropertyName: "uploadInput", publicName: "uploadInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadOutput: "uploadOutput" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NgFileDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: NgFileDropDirective, isStandalone: true, selector: "[dataFileDrop]", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, uploadInput: { classPropertyName: "uploadInput", publicName: "uploadInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadOutput: "uploadOutput" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFileDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NgFileDropDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "[dataFileDrop]",
+                    selector: '[dataFileDrop]',
                     host: {
-                        "(drop)": "onDrop($event)",
-                        "(dragover)": "onDragOver($event)",
-                        "(dragleave)": "onDragLeave($event)",
+                        '(drop)': 'onDrop($event)',
+                        '(dragover)': 'onDragOver($event)',
+                        '(dragleave)': 'onDragLeave($event)',
                     },
                 }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], uploadInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadInput", required: false }] }], uploadOutput: [{ type: i0.Output, args: ["uploadOutput"] }] } });
@@ -9268,12 +9397,12 @@ class NgFileSelectDirective {
         this._sub = [];
         const options = this.options();
         const concurrency = (options && options.concurrency) || Number.POSITIVE_INFINITY;
-        const allowedContentTypes = (options && options.allowedContentTypes) || ["*"];
+        const allowedContentTypes = (options && options.allowedContentTypes) || ['*'];
         const maxUploads = (options && options.maxUploads) || Number.POSITIVE_INFINITY;
         const maxFileSize = (options && options.maxFileSize) || Number.POSITIVE_INFINITY;
         this.upload = new DataUploaderService(concurrency, allowedContentTypes, maxUploads, maxFileSize);
         this.el = this.elementRef.nativeElement;
-        this.el.addEventListener("change", this.fileListener, false);
+        this.el.addEventListener('change', this.fileListener, false);
         this._sub.push(this.upload.serviceEvents.subscribe((event) => {
             this.uploadOutput.emit(event);
         }));
@@ -9284,8 +9413,8 @@ class NgFileSelectDirective {
     }
     ngOnDestroy() {
         if (this.el) {
-            this.el.removeEventListener("change", this.fileListener, false);
-            this._sub.forEach(sub => sub.unsubscribe());
+            this.el.removeEventListener('change', this.fileListener, false);
+            this._sub.forEach((sub) => sub.unsubscribe());
         }
     }
     fileListener = () => {
@@ -9293,13 +9422,13 @@ class NgFileSelectDirective {
             this.upload.handleFiles(this.el.files);
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFileSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: NgFileSelectDirective, isStandalone: true, selector: "[dataFileSelect]", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, uploadInput: { classPropertyName: "uploadInput", publicName: "uploadInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadOutput: "uploadOutput" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NgFileSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: NgFileSelectDirective, isStandalone: true, selector: "[dataFileSelect]", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, uploadInput: { classPropertyName: "uploadInput", publicName: "uploadInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadOutput: "uploadOutput" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFileSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NgFileSelectDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "[dataFileSelect]",
+                    selector: '[dataFileSelect]',
                 }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], uploadInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadInput", required: false }] }], uploadOutput: [{ type: i0.Output, args: ["uploadOutput"] }] } });
 
@@ -9309,11 +9438,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  * as a thin compatibility shim and will be removed in a future major version.
  */
 class NgxUploaderModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgxUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: NgxUploaderModule, imports: [NgFileDropDirective, NgFileSelectDirective], exports: [NgFileDropDirective, NgFileSelectDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgxUploaderModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NgxUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: NgxUploaderModule, imports: [NgFileDropDirective, NgFileSelectDirective], exports: [NgFileDropDirective, NgFileSelectDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NgxUploaderModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgxUploaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NgxUploaderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [NgFileDropDirective, NgFileSelectDirective],
@@ -9456,11 +9585,6 @@ const DATA_AUTH_USER_SERVICE = new InjectionToken('data.auth.user.service');
  * @typeParam UserData - the decoded JWT payload, at least an {@link IJwtBaseData}.
  */
 class AuthServiceBase {
-    userService;
-    _params;
-    _router;
-    _http;
-    _msgs;
     /**
      * Emits every time {@link logout} runs, whether triggered by the user, by a failed
      * token refresh, or by a login error.
@@ -9475,12 +9599,13 @@ class AuthServiceBase {
     _user$ = new ReplaySubject(1);
     _token;
     _fetched;
-    constructor(userService, _params, _router, _http, _msgs) {
-        this.userService = userService;
-        this._params = _params;
-        this._router = _router;
-        this._http = _http;
-        this._msgs = _msgs;
+    /** Collection used to fetch the logged-in user, from {@link DATA_AUTH_USER_SERVICE}. */
+    userService = inject(DATA_AUTH_USER_SERVICE);
+    _params = inject(DATA_AUTH_PARAMS);
+    _router = inject(Router);
+    _http = inject(HttpClient);
+    _msgs = inject(DataMessageService);
+    constructor() {
         this.autoLogin();
     }
     /** True when no access token is held, i.e. no session is active. Checked by {@link AuthInterceptor} before attaching a token. */
@@ -9513,9 +9638,7 @@ class AuthServiceBase {
     get currentUser$() {
         // Needs refresh ?
         if (!this.isAnonymous &&
-            (!this._fetched ||
-                Date.now() - this._fetched >
-                    (this._params.userFetchValiditySeconds || 3600) * 1000)) {
+            (!this._fetched || Date.now() - this._fetched > (this._params.userFetchValiditySeconds || 3600) * 1000)) {
             this._fetched = Date.now();
             return this._fetchUser().pipe(switchMap(() => {
                 return this._user$.asObservable();
@@ -9598,7 +9721,7 @@ class AuthServiceBase {
             return this._fetchUser();
         }), map(() => 'success'), tap(() => this.saveAuth()), catchError((error) => {
             this.logout();
-            const code = error.error?.code || error?.code || 'error';
+            const code = error.error?.code || error.code || 'error';
             console.error(code, error);
             return of(code);
         }));
@@ -9617,7 +9740,7 @@ class AuthServiceBase {
         });
         return this._fetchUser().pipe(map(() => 'success'), tap(() => this.saveAuth()), catchError((error) => {
             this.logout();
-            const code = error.error?.code || error?.code || 'error';
+            const code = error.error?.code || error.code || 'error';
             console.error(code, error);
             return of(code);
         }));
@@ -9633,9 +9756,7 @@ class AuthServiceBase {
         if (this._params.requestReactivateUrl) {
             const payload = {};
             payload[this._params.loginField] = username;
-            return this._http
-                .post(this._params.requestReactivateUrl, payload)
-                .pipe(map(() => true), catchError(() => of(false)));
+            return this._http.post(this._params.requestReactivateUrl, payload).pipe(map(() => true), catchError(() => of(false)));
         }
         return of(false);
     }
@@ -9664,9 +9785,7 @@ class AuthServiceBase {
             const payload = {};
             payload[this._params.loginField] = username;
             payload[this._params.tokenField] = token;
-            return this._http
-                .post(this._params.processReactivateUrl, payload)
-                .pipe(map(() => true), catchError(() => of(false)));
+            return this._http.post(this._params.processReactivateUrl, payload).pipe(map(() => true), catchError(() => of(false)));
         }
         return of(false);
     }
@@ -9730,7 +9849,7 @@ class AuthServiceBase {
             console.error('Token refresh error', err, caught);
             this.logout();
             this._msgs.warning('Vous devez vous reconnecter');
-            this._router.navigate(this._params.loginRoute);
+            void this._router.navigate(this._params.loginRoute);
             return of(null);
         }), tap((tok) => {
             console.log('Token refresh response', tok);
@@ -9774,18 +9893,12 @@ class AuthServiceBase {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: AuthServiceBase, deps: [{ token: DATA_AUTH_USER_SERVICE }, { token: DATA_AUTH_PARAMS }, { token: i1$4.Router }, { token: i1.HttpClient }, { token: DataMessageService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: AuthServiceBase });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: AuthServiceBase, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: AuthServiceBase });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: AuthServiceBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: AuthServiceBase, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DATA_AUTH_USER_SERVICE]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DATA_AUTH_PARAMS]
-                }] }, { type: i1$4.Router }, { type: i1.HttpClient }, { type: DataMessageService }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Identity helper that type-checks a route `data` literal against {@link BaseRouteParams}
@@ -9842,9 +9955,10 @@ class Link {
      * missing from `ctx` are reset to `null`, not left over from the previous context.
      */
     context(ctx) {
+        const values = fieldValues(ctx ?? {});
         for (const n of this._params) {
-            if (ctx && ctx[n]) {
-                this._cargs[n] = ctx[n];
+            if (values[n]) {
+                this._cargs[n] = values[n];
             }
             else {
                 this._cargs[n] = null;
@@ -9966,7 +10080,7 @@ class BreadcrumbComponent {
                 // Get icon
                 for (const u of p.url) {
                     url.push(u.path);
-                    let rtd = {
+                    const rtd = {
                         icon: this.getIcon(rdata, data),
                         title: this.getTitle(rdata, data, u),
                         path: url.join('/'),
@@ -9982,7 +10096,7 @@ class BreadcrumbComponent {
             }
             else {
                 url.push(p.url.join('/'));
-                let rtd = {
+                const rtd = {
                     icon: this.getIcon(rdata, data),
                     title: this.getTitle(rdata, data),
                     path: url.join('/'),
@@ -10045,12 +10159,12 @@ class BreadcrumbComponent {
         }
         return '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: BreadcrumbComponent, isStandalone: true, selector: "data-breadcrumb", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, icons: { classPropertyName: "icons", publicName: "icons", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n<nav aria-label=\"breadcrumb\">\n  <ol class=\"breadcrumb\">\n    @for (p of tree(); track p) {\n      @if (!p.current) {\n        <li class=\"breadcrumb-item\"><a class=\"breadcrumb-item\" [routerLink]=\"p.path\">\n          @if (icons() && p.icon) {\n            <i class=\"me-2\" [class]=\"p.icon\"></i>{{p.title}}\n          }\n          @if (!(icons() && p.icon)) {\n            {{p.title}}\n          }</a></li>\n        }\n        @if (p.current) {\n          <li class=\"breadcrumb-item active\" aria-current=\"page\">\n            @if (icons() && p.icon) {\n              <i class=\"me-1\" [class]=\"p.icon\"></i>{{p.title}}\n            }\n            @if (!(icons() && p.icon)) {\n              {{p.title}}\n            }\n          </li>\n        }\n      }\n    </ol>\n  </nav>", styles: [""], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: BreadcrumbComponent, isStandalone: true, selector: "data-breadcrumb", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, icons: { classPropertyName: "icons", publicName: "icons", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav aria-label=\"breadcrumb\">\n  <ol class=\"breadcrumb\">\n    @for (p of tree(); track p) {\n      @if (!p.current) {\n        <li class=\"breadcrumb-item\">\n          <a class=\"breadcrumb-item\" [routerLink]=\"p.path\">\n            @if (icons() && p.icon) {\n              <i class=\"me-2\" [class]=\"p.icon\"></i>\n              {{ p.title }}\n            }\n            @if (!(icons() && p.icon)) {\n              {{ p.title }}\n            }\n          </a>\n        </li>\n      }\n      @if (p.current) {\n        <li class=\"breadcrumb-item active\" aria-current=\"page\">\n          @if (icons() && p.icon) {\n            <i class=\"me-1\" [class]=\"p.icon\"></i>\n            {{ p.title }}\n          }\n          @if (!(icons() && p.icon)) {\n            {{ p.title }}\n          }\n        </li>\n      }\n    }\n  </ol>\n</nav>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-breadcrumb', imports: [RouterModule], template: "\n<nav aria-label=\"breadcrumb\">\n  <ol class=\"breadcrumb\">\n    @for (p of tree(); track p) {\n      @if (!p.current) {\n        <li class=\"breadcrumb-item\"><a class=\"breadcrumb-item\" [routerLink]=\"p.path\">\n          @if (icons() && p.icon) {\n            <i class=\"me-2\" [class]=\"p.icon\"></i>{{p.title}}\n          }\n          @if (!(icons() && p.icon)) {\n            {{p.title}}\n          }</a></li>\n        }\n        @if (p.current) {\n          <li class=\"breadcrumb-item active\" aria-current=\"page\">\n            @if (icons() && p.icon) {\n              <i class=\"me-1\" [class]=\"p.icon\"></i>{{p.title}}\n            }\n            @if (!(icons() && p.icon)) {\n              {{p.title}}\n            }\n          </li>\n        }\n      }\n    </ol>\n  </nav>" }]
+            args: [{ selector: 'data-breadcrumb', imports: [RouterModule], template: "<nav aria-label=\"breadcrumb\">\n  <ol class=\"breadcrumb\">\n    @for (p of tree(); track p) {\n      @if (!p.current) {\n        <li class=\"breadcrumb-item\">\n          <a class=\"breadcrumb-item\" [routerLink]=\"p.path\">\n            @if (icons() && p.icon) {\n              <i class=\"me-2\" [class]=\"p.icon\"></i>\n              {{ p.title }}\n            }\n            @if (!(icons() && p.icon)) {\n              {{ p.title }}\n            }\n          </a>\n        </li>\n      }\n      @if (p.current) {\n        <li class=\"breadcrumb-item active\" aria-current=\"page\">\n          @if (icons() && p.icon) {\n            <i class=\"me-1\" [class]=\"p.icon\"></i>\n            {{ p.title }}\n          }\n          @if (!(icons() && p.icon)) {\n            {{ p.title }}\n          }\n        </li>\n      }\n    }\n  </ol>\n</nav>\n" }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], icons: [{ type: i0.Input, args: [{ isSignal: true, alias: "icons", required: false }] }] } });
 
 /**
@@ -10117,7 +10231,7 @@ class TabMemoryService {
     static targetToString(target) {
         let out = '';
         for (const t of target) {
-            out += `/${t}`;
+            out += `/${String(t)}`;
         }
         return out;
     }
@@ -10158,16 +10272,17 @@ class TabMemoryService {
         const tm = localStorage.getItem('tabmem');
         if (tm) {
             const tmd = JSON.parse(tm);
-            if (tmd && tmd[name] && tmd[name].value) {
-                return tmd[name].value;
+            const entry = tmd[name];
+            if (entry?.value) {
+                return entry.value;
             }
         }
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabMemoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabMemoryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: TabMemoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: TabMemoryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabMemoryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: TabMemoryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -10201,6 +10316,275 @@ const slugify = (str) => {
     return str;
 };
 
+/**
+ * Teach jsdom the layout APIs CodeMirror and ProseMirror expect.
+ *
+ * Both editors measure the document to place the caret and decide what to
+ * render, and jsdom has no layout engine: `getClientRects()` returns an empty
+ * list and `elementFromPoint` does not exist at all. Zeroed rectangles are
+ * enough — nothing in a spec depends on real geometry, it just has to not throw.
+ *
+ * Call it from `beforeEach` in any spec that instantiates an editor view. It is
+ * idempotent, and only patches what is missing.
+ */
+function installEditorDomShims() {
+    const rect = () => new DOMRect(0, 0, 0, 0);
+    const rectList = () => {
+        const list = [rect()];
+        list.item = (index) => (index === 0 ? rect() : null);
+        return list;
+    };
+    if (!Range.prototype.getClientRects) {
+        Range.prototype.getClientRects = rectList;
+    }
+    if (!Range.prototype.getBoundingClientRect) {
+        Range.prototype.getBoundingClientRect = rect;
+    }
+    if (!Element.prototype.getClientRects) {
+        Element.prototype.getClientRects = rectList;
+    }
+    if (!document.elementFromPoint) {
+        document.elementFromPoint = () => null;
+    }
+    if (!document.createRange().getClientRects) {
+        // jsdom builds ranges from the prototype patched above; this is only a
+        // guard for the case where an environment overrides createRange.
+        Range.prototype.getClientRects = rectList;
+    }
+}
+
+/**
+ * The behaviour `<data-richedit>` and `<data-mdedit>` share with
+ * `<data-dispedit>`: show the value, click to edit, save explicitly.
+ *
+ * It lives in the primary entry point so both editors can extend it — they
+ * import `@solidev/data`, and the reverse would be a circular dependency
+ * between entry points. Everything here is engine-agnostic: resolving which
+ * field to read, which control to bind, when to show the editor, and how to
+ * persist. The subclass owns its template and its editor widget.
+ *
+ * ## The source / rendered pair
+ *
+ * Long text is rarely one column. A markdown field is stored as its source
+ * plus the HTML the server rendered from it, and this base follows that shape
+ * by convention: given `field="description"` it edits `description_src` and
+ * displays `description_html` **when the model declares them**, and falls back
+ * to `description` for both when it does not. `[htmlField]` overrides the
+ * display half outright. A `field` that already ends in `_src` is understood,
+ * so `field="description_src"` resolves the same pair.
+ */
+class FieldEditorBase {
+    /** Id tying the label to the editor. */
+    inputId = uniqueId('data-editor');
+    /** Id of the label element, wired to the editor through `aria-labelledby`. */
+    labelId = `${this.inputId}-label`;
+    /** Model instance holding the field. */
+    model = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "model" }] : /* istanbul ignore next */ []));
+    /**
+     * Field to edit, or the base name of a source / rendered pair.
+     *
+     * See the class description for how `<field>_src` and `<field>_html` are
+     * resolved.
+     */
+    field = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "field" }] : /* istanbul ignore next */ []));
+    /** Overrides the field read for the read-only display. */
+    htmlField = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "htmlField" }] : /* istanbul ignore next */ []));
+    /** Whether {@link toggleEdit} is allowed to reveal the editor. */
+    editable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the editor is showing, in `dd` mode.
+     *
+     * Defaults to false: the value renders and a click reveals the editor, the
+     * way `<data-dispedit>` behaves. `inline` and `form` modes ignore this and
+     * follow {@link showEditor}.
+     */
+    edit = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "edit" }] : /* istanbul ignore next */ []));
+    /**
+     * Layout, and whether {@link save} persists.
+     *
+     * `dd` renders a `<dt>`/`<dd>` block and is the only mode that saves to the
+     * API; `inline` and `form` render a label plus the editor and leave saving to
+     * the caller.
+     */
+    mode = input('dd', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Hide label (for inline forms). */
+    hideLabel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Hide the built-in save button, for callers driving persistence themselves
+     * from the {@link changed} output.
+     */
+    hideButton = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideButton" }] : /* istanbul ignore next */ []));
+    /**
+     * Form control backing the editor.
+     *
+     * When supplied, the component uses it as-is and skips its own setup — no
+     * field manager lookup, no seeding from the model, and no {@link changed}
+     * emissions. Takes precedence over `[form]`.
+     */
+    fc = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fc" }] : /* istanbul ignore next */ []));
+    /**
+     * External form group to register into, the way `<data-dispedit>` does.
+     *
+     * A control named after the resolved source field is added to it, seeded
+     * from the model. Ignored when `[fc]` is supplied.
+     */
+    form = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "form" }] : /* istanbul ignore next */ []));
+    /** Emits the value on every change. Not wired for a caller-supplied `[fc]`. */
+    changed = output();
+    /** Field manager for the source field; only resolved when `fc` is created here. */
+    manager;
+    /** Whether the manager declares the field required. */
+    required = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** The control actually in use. */
+    control;
+    /** The base name of the pair, with any trailing `_src` removed. */
+    baseField = computed(() => (this.field() ?? '').replace(/_src$/, ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "baseField" }] : /* istanbul ignore next */ []));
+    /** The field actually edited. */
+    sourceField = computed(() => {
+        const base = this.baseField();
+        return this.modelHas(`${base}_src`) ? `${base}_src` : (this.field() ?? '');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceField" }] : /* istanbul ignore next */ []));
+    /** The field actually displayed in read-only mode. */
+    displayField = computed(() => {
+        const override = this.htmlField();
+        if (override)
+            return override;
+        const base = this.baseField();
+        return this.modelHas(`${base}_html`) ? `${base}_html` : (this.field() ?? '');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayField" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the editor is showing rather than the rendered value.
+     *
+     * The rule is `<data-dispedit>`'s: `dd` follows `[edit]`, `inline` shows the
+     * editor unless the field is not editable, and `form` always shows it — a
+     * form control that renders as static text would be a surprise.
+     */
+    showEditor = computed(() => {
+        switch (this.mode()) {
+            case 'dd':
+                return this.edit();
+            case 'inline':
+                return this.editable();
+            default:
+                return true;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showEditor" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolve the control: the supplied `[fc]`, one registered into `[form]`, or
+     * one of our own seeded from the model.
+     */
+    ngOnInit() {
+        const supplied = this.fc();
+        if (supplied) {
+            this.control = supplied;
+            return;
+        }
+        this.control = new FormControl('');
+        const model = this.model();
+        const field = this.sourceField();
+        if (model && field) {
+            this.manager = model.FM(field);
+            this.required.set(this.manager?.required ?? false);
+            this.control.setValue(asText(fieldValues(model)[field]), { emitEvent: false });
+        }
+        const form = this.form();
+        if (form && field) {
+            form.setControl(field, this.control, { emitEvent: false });
+        }
+        if (this.showEditor()) {
+            this.control.enable();
+        }
+        else {
+            this.control.disable();
+        }
+    }
+    /**
+     * Switch between the rendered value and the editor.
+     * Does nothing when `[editable]` is false.
+     */
+    toggleEdit() {
+        if (!this.editable()) {
+            this.edit.set(false);
+            this.control.disable();
+            return;
+        }
+        const next = !this.edit();
+        this.edit.set(next);
+        if (next) {
+            this.control.enable();
+        }
+        else {
+            this.control.disable();
+        }
+    }
+    /**
+     * The rendered value, as stored on the display field.
+     *
+     * Templates pass it through {@link SafeHtmlPipe} to inject it — **trusted,
+     * not sanitized**, because Angular's sanitizer allow-list has no `style` and
+     * would drop the alignment and colours the rich text editor writes. Point
+     * these components at fields your own editor produced and your own API
+     * stored.
+     */
+    displayValue() {
+        const model = this.model();
+        const field = this.displayField();
+        if (!model || !field)
+            return '';
+        return asText(fieldValues(model)[field]);
+    }
+    /**
+     * Write the editor content back to the model's source field, and persist it
+     * in `dd` mode only.
+     *
+     * In `inline` / `form` modes the model is updated in memory but no request is
+     * sent, leaving the save to the surrounding form. Does nothing without both a
+     * `[model]` and a `[field]`.
+     */
+    async save() {
+        const model = this.model();
+        const field = this.sourceField();
+        if (!model || !field)
+            return;
+        model.setFV(field, this.control.value);
+        if (this.mode() === 'dd') {
+            await firstValueFrom(model.update([field], { updateModel: true }));
+            // The API re-renders the HTML twin from the source it was just sent, and
+            // `updateModel` writes the response back onto the model -- so the view
+            // this component flips to shows the new rendering, not the old one.
+            this.edit.set(false);
+            this.control.disable();
+        }
+    }
+    /** Whether the model declares a property under that name. */
+    modelHas(name) {
+        const model = this.model();
+        if (!model || !name)
+            return false;
+        return name in fieldValues(model) || !!model.F.get(name);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FieldEditorBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: FieldEditorBase, isStandalone: true, inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, htmlField: { classPropertyName: "htmlField", publicName: "htmlField", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, edit: { classPropertyName: "edit", publicName: "edit", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, hideButton: { classPropertyName: "hideButton", publicName: "hideButton", isSignal: true, isRequired: false, transformFunction: null }, fc: { classPropertyName: "fc", publicName: "fc", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "editChange", changed: "changed" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FieldEditorBase, decorators: [{
+            type: Directive
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], htmlField: [{ type: i0.Input, args: [{ isSignal: true, alias: "htmlField", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], edit: [{ type: i0.Input, args: [{ isSignal: true, alias: "edit", required: false }] }, { type: i0.Output, args: ["editChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], hideButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideButton", required: false }] }], fc: [{ type: i0.Input, args: [{ isSignal: true, alias: "fc", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
 // By default, Underscore uses ERB-style template delimiters, change the
 // following template settings to use alternative delimiters.
 const settings = {
@@ -10215,7 +10599,7 @@ const settings = {
 const noMatch = /.^/;
 // Certain characters need to be escaped so that they can be put into a
 // string literal.
-let escapes = {
+const escapes = {
     '\\': '\\',
     "'": "'",
     r: '\r',
@@ -10224,27 +10608,11 @@ let escapes = {
     u2028: '\u2028',
     u2029: '\u2029',
 };
-for (let p in escapes) {
+for (const p in escapes) {
     escapes[escapes[p]] = p;
 }
 const escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
-const unescaper = /\\(\\|'|r|n|t|u2028|u2029)/g;
-/**
- * Compiles (and optionally renders) an Underscore-style string template, using ERB
- * delimiters: `<%= expr %>` interpolates, `<% code %>` evaluates, and a `print()` helper
- * is available inside evaluated code.
- *
- * Called with `data`, it renders immediately and returns the resulting string; without
- * `data`, it returns a reusable render function carrying a `source` property with the
- * generated code. `objectName` renames the variable the data is exposed under — but note
- * it mutates module-level settings, so it persists for subsequent calls too.
- *
- * Within this library it backs route title templates (see {@link TplFn}). Two caveats:
- * compilation goes through `new Function`, so it will not run under a Content Security
- * Policy without `unsafe-eval`; and the escaping delimiter `<%- expr %>` is not usable,
- * as the code it emits calls `_.escape` while no `_` is in scope.
- */
-const tmpl = (text, data, objectName) => {
+function tmpl(text, data, objectName) {
     if (objectName) {
         settings.variable = objectName;
     }
@@ -10271,22 +10639,21 @@ const tmpl = (text, data, objectName) => {
         source = 'with(obj||{}){\n' + source + '}\n';
     }
     source =
-        "var __p='';var print=function(){__p+=Array.prototype.join.call(arguments, '')};\n" +
-            source +
-            'return __p;\n';
-    var render = new Function(settings.variable || 'obj', source);
+        "var __p='';var print=function(){__p+=Array.prototype.join.call(arguments, '')};\n" + source + 'return __p;\n';
+    // The whole point of this module: `source` is the template compiled to JS.
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
+    const render = new Function(settings.variable || 'obj', source);
     if (data) {
         return render(data);
     }
-    const template = (data) => {
-        return render.call(this, data);
-    };
+    const template = ((data) => {
+        return render(data);
+    });
     // Provide the compiled function source as a convenience for build time
     // precompilation.
-    template.source =
-        'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
+    template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
     return template;
-};
+}
 
 /**
  * Watches the service worker for a newly deployed version and exposes it as a simple
@@ -10299,12 +10666,10 @@ const tmpl = (text, data, objectName) => {
  * Harmless without a service worker: the checks fail and are logged as warnings.
  */
 class UpdateService {
-    appRef;
-    swUpdate;
     stable = false;
-    constructor(appRef, swUpdate) {
-        this.appRef = appRef;
-        this.swUpdate = swUpdate;
+    appRef = inject(ApplicationRef);
+    swUpdate = inject(SwUpdate);
+    constructor() {
         this._available$ = new ReplaySubject(1);
         this._available$.next(false);
         const appIsStable$ = this.appRef.isStable
@@ -10312,27 +10677,35 @@ class UpdateService {
             .pipe(tap(() => console.log('App is stable')));
         const checkInterval$ = timer(10 * 1000, 5 * 60 * 1000);
         const checkWhenStable$ = merge(appIsStable$, checkInterval$);
-        const updatesAvailable = swUpdate.versionUpdates.pipe(tap((evt) => console.log('Version updates event', evt)), filter((evt) => evt.type === 'VERSION_READY'), map((evt) => ({
+        const updatesAvailable = this.swUpdate.versionUpdates.pipe(tap((evt) => console.log('Version updates event', evt)), filter((evt) => evt.type === 'VERSION_READY'), map((evt) => ({
             type: 'UPDATE_AVAILABLE',
             current: evt.currentVersion,
             available: evt.latestVersion,
         })));
-        updatesAvailable.pipe(takeUntilDestroyed()).subscribe(async (evt) => {
+        updatesAvailable.pipe(takeUntilDestroyed()).subscribe(() => {
             this._available$.next(true);
         });
-        checkWhenStable$.pipe(takeUntilDestroyed()).subscribe(async () => {
+        checkWhenStable$.pipe(takeUntilDestroyed()).subscribe(() => {
             this.stable = true;
-            try {
-                console.log('Checking for update');
-                const res = await swUpdate.checkForUpdate();
-                console.log('Check for update result', res);
-            }
-            catch (e) {
-                console.warn('No service worker');
-            }
+            void this._checkForUpdate();
         });
     }
     _available$;
+    /**
+     * Asks the service worker whether a new version is available. Swallows the
+     * failure raised when no service worker is registered, which is the normal
+     * case in development.
+     */
+    async _checkForUpdate() {
+        try {
+            console.log('Checking for update');
+            const res = await this.swUpdate.checkForUpdate();
+            console.log('Check for update result', res);
+        }
+        catch {
+            console.warn('No service worker');
+        }
+    }
     /**
      * Whether a new version is ready to be activated. Starts at `false`, becomes `true` on
      * `VERSION_READY`, and returns to `false` once the user activates or dismisses it.
@@ -10356,15 +10729,15 @@ class UpdateService {
     dismiss() {
         this._available$.next(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: UpdateService, deps: [{ token: i0.ApplicationRef }, { token: i1$5.SwUpdate }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: UpdateService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UpdateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UpdateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: UpdateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UpdateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i1$5.SwUpdate }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Snackbar prompting the user to reload when {@link UpdateService} reports a new
@@ -10377,12 +10750,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 class UpdateComponent {
     /** The update service backing the prompt; also bound directly by the template. */
     update = inject(UpdateService);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: UpdateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: UpdateComponent, isStandalone: true, selector: "data-update", ngImport: i0, template: "\n@if (update.available$|async) {\n  <div class=\"snack\">\n    <p>Une nouvelle version de l'application est disponible.</p>\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <button class=\"btn btn-primary btn-block w-100\" (click)=\"update.activate()\">L'ACTIVER MAINTENANT</button>\n      </div>\n      <div class=\"col-sm-6\">\n        <button class=\"btn btn-warning btn-block w-100\" (click)=\"update.dismiss()\">Plus tard</button>\n      </div>\n    </div>\n  </div>\n}", styles: [".snack{position:fixed;bottom:0;margin-left:auto;margin-right:auto;left:auto;right:auto;background-color:#ff7a00cc;padding:20px;z-index:2000;border-top:1px solid rgb(255,122,0);font-size:1.5rem;font-weight:700;color:#8b0000;width:100%;text-align:center}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UpdateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: UpdateComponent, isStandalone: true, selector: "data-update", ngImport: i0, template: "@if (update.available$ | async) {\n  <div class=\"snack\">\n    <p>Une nouvelle version de l'application est disponible.</p>\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <button class=\"btn btn-primary btn-block w-100\" (click)=\"update.activate()\">L'ACTIVER MAINTENANT</button>\n      </div>\n      <div class=\"col-sm-6\">\n        <button class=\"btn btn-warning btn-block w-100\" (click)=\"update.dismiss()\">Plus tard</button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".snack{position:fixed;bottom:0;margin-left:auto;margin-right:auto;left:auto;right:auto;background-color:#ff7a00cc;padding:20px;z-index:2000;border-top:1px solid rgb(255,122,0);font-size:1.5rem;font-weight:700;color:#8b0000;width:100%;text-align:center}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: UpdateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UpdateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-update', imports: [AsyncPipe], template: "\n@if (update.available$|async) {\n  <div class=\"snack\">\n    <p>Une nouvelle version de l'application est disponible.</p>\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <button class=\"btn btn-primary btn-block w-100\" (click)=\"update.activate()\">L'ACTIVER MAINTENANT</button>\n      </div>\n      <div class=\"col-sm-6\">\n        <button class=\"btn btn-warning btn-block w-100\" (click)=\"update.dismiss()\">Plus tard</button>\n      </div>\n    </div>\n  </div>\n}", styles: [".snack{position:fixed;bottom:0;margin-left:auto;margin-right:auto;left:auto;right:auto;background-color:#ff7a00cc;padding:20px;z-index:2000;border-top:1px solid rgb(255,122,0);font-size:1.5rem;font-weight:700;color:#8b0000;width:100%;text-align:center}\n"] }]
+            args: [{ selector: 'data-update', imports: [AsyncPipe], template: "@if (update.available$ | async) {\n  <div class=\"snack\">\n    <p>Une nouvelle version de l'application est disponible.</p>\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <button class=\"btn btn-primary btn-block w-100\" (click)=\"update.activate()\">L'ACTIVER MAINTENANT</button>\n      </div>\n      <div class=\"col-sm-6\">\n        <button class=\"btn btn-warning btn-block w-100\" (click)=\"update.dismiss()\">Plus tard</button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".snack{position:fixed;bottom:0;margin-left:auto;margin-right:auto;left:auto;right:auto;background-color:#ff7a00cc;padding:20px;z-index:2000;border-top:1px solid rgb(255,122,0);font-size:1.5rem;font-weight:700;color:#8b0000;width:100%;text-align:center}\n"] }]
         }] });
 
 /*
@@ -10394,5 +10767,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthInterceptor, AuthServiceBase, BanAdapter, BaseFieldManager, BootstrapDataDisplayConfig, BreadcrumbComponent, ChoicePipe, Collection, CollectionMock, DATA_API_URL, DATA_AUTH_PARAMS, DATA_AUTH_SERVICE, DATA_AUTH_URLS, DATA_AUTH_USER_SERVICE, DATA_DISPLAY_CONFIG, DATA_MAX_TRANSFERSTATE_TIME, DATA_MESSAGE_SOUNDS, DEFAULT_TIMEOUTS, DataBackend, DataMessageService, DataModel, DataUploaderService, DispeditComponent, FactorPipe, FactorcPipe, FkselectComponent, FlagsComponent, Jwt, Link, M2mselectComponent, Message, MessageZoneComponent, ModelList, ModelListAutocompleteFilter, ModelListAutocompleteMultiFilter, ModelListDateFilter, ModelListDatetimeFilter, ModelListDatetimerangeFilter, ModelListFieldHeaderComponent, ModelListFieldsSelectorComponent, ModelListFilter, ModelListFilterGroup, ModelListFilters, ModelListFiltersComponent, ModelListFiltersSelectComponent, ModelListFlagsFilter, ModelListGeodistanceFilter, ModelListNumberFilter, ModelListNumberOperations, ModelListPaginatorComponent, ModelListSelectFilter, ModelListSelectMultiFilter, ModelListService, ModelListSorterComponent, ModelListTextFilter, ModelListTreeFilter, NavDriver, NgFileDropDirective, NgFileSelectDirective, NgxUploaderModule, PChoicePipe, PFactorPipe, PFactorcPipe, Queryset, RData, STATUS, SafeDeleteComponent, TabMemoryService, UpdateComponent, UpdateService, UploadStatus, booleanField, charField, computedField, dateField, datetimeField, decimalField, detailsField, emailField, floatField, foreignKeyField, humanizeBytes, integerField, isValue, manyToManyField, passwordField, primaryField, reverseForeignKeyField, slugify, strToNumber, textField, tmpl };
+export { AuthInterceptor, AuthServiceBase, BanAdapter, BaseFieldManager, BootstrapDataDisplayConfig, BreadcrumbComponent, ChoicePipe, Collection, CollectionMock, DATA_API_URL, DATA_AUTH_PARAMS, DATA_AUTH_SERVICE, DATA_AUTH_URLS, DATA_AUTH_USER_SERVICE, DATA_DISPLAY_CONFIG, DATA_MAX_TRANSFERSTATE_TIME, DATA_MESSAGE_SOUNDS, DEFAULT_TIMEOUTS, DataBackend, DataMessageService, DataModel, DataUploaderService, DispeditComponent, FactorPipe, FactorcPipe, FieldEditorBase, FkselectComponent, FlagsComponent, Jwt, Link, M2mselectComponent, Message, MessageZoneComponent, ModelList, ModelListAutocompleteFilter, ModelListAutocompleteMultiFilter, ModelListDateFilter, ModelListDatetimeFilter, ModelListDatetimerangeFilter, ModelListFieldHeaderComponent, ModelListFieldsSelectorComponent, ModelListFilter, ModelListFilterGroup, ModelListFilters, ModelListFiltersComponent, ModelListFiltersSelectComponent, ModelListFlagsFilter, ModelListGeodistanceFilter, ModelListNumberFilter, ModelListNumberOperations, ModelListPaginatorComponent, ModelListSelectFilter, ModelListSelectMultiFilter, ModelListService, ModelListSorterComponent, ModelListTextFilter, ModelListTreeFilter, NavDriver, NgFileDropDirective, NgFileSelectDirective, NgxUploaderModule, PChoicePipe, PFactorPipe, PFactorcPipe, Queryset, RData, STATUS, SafeDeleteComponent, SafeHtmlPipe, TabMemoryService, UpdateComponent, UpdateService, UploadStatus, asText, booleanField, charField, computedField, dateField, datetimeField, decimalField, detailsField, emailField, fieldValues, floatField, foreignKeyField, humanizeBytes, installEditorDomShims, integerField, isValue, manyToManyField, passwordField, primaryField, reverseForeignKeyField, slugify, strToNumber, textField, tmpl, uniqueId };
 //# sourceMappingURL=solidev-data.mjs.map