ngx-dynamic-entity 2.1.1 → 2.2.0

package/fesm2022/ngx-dynamic-entity.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, makeEnvironmentProviders, inject, Injectable, signal, Input, ChangeDetectionStrategy, Component, ChangeDetectorRef, DestroyRef, Injector, isDevMode, ViewContainerRef, ViewChild, forwardRef, Optional, Inject, EventEmitter, ElementRef, computed, afterNextRender, HostListener, ViewChildren, Output } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { ReactiveFormsModule, Validators, FormBuilder, FormGroup, FormArray, FormsModule } from '@angular/forms';
-import { resolveLabel, formatDisplayValue, normalizeLookupValues, lookupValuesToOptions, valuesMatch, resolveOptionLabel, resolveOptionValue, buildReferenceCacheKey, normalizeReferenceOptions, entityKeyFromCacheKey, applyCascadeFilter, resolveEffectiveMask, shouldMaskField, findTab, fileRefName, evaluateFormRules, filterRulesForTab, evaluateFieldVisibility, getTabPath, fieldRefFor, toRefToken, refOf, parseFieldRef, setTabData, setValueByPath, normalizeArrayStructures, getTabData, getValueByPath, normalizeConfigOptions, migrateRecord, ambiguousFieldIds, collectFieldScopes, applyAutoPatch, isUnsafePath, fieldsUnderTab, valuesEqual, parseCsv, deriveImportColumns, suggestMapping, applyMapping, toCsv, stripIndices, CORE_VERSION, coerceCell, buildTemplateSpec, collectLeafTargets, formatConfigProblems } from '@dynamic-entity/core';
+import { resolveLabel, formatDisplayValue, normalizeLookupValues, lookupValuesToOptions, valuesMatch, resolveOptionLabel, resolveOptionValue, buildReferenceCacheKey, normalizeReferenceOptions, entityKeyFromCacheKey, applyCascadeFilter, resolveEffectiveMask, shouldMaskField, findTab, isValidUrl, isValidPhone, fileRefName, sliderBounds, ratingScale, normalizeHexColor, normalizeTags, evaluateFormRules, filterRulesForTab, evaluateFieldVisibility, getTabPath, fieldRefFor, toRefToken, refOf, parseFieldRef, setTabData, setValueByPath, normalizeArrayStructures, getTabData, getValueByPath, normalizeConfigOptions, migrateRecord, ambiguousFieldIds, collectFieldScopes, applyAutoPatch, isUnsafePath, fieldsUnderTab, valuesEqual, parseCsv, deriveImportColumns, suggestMapping, applyMapping, toCsv, stripIndices, CORE_VERSION, coerceCell, buildTemplateSpec, collectLeafTargets, formatConfigProblems } from '@dynamic-entity/core';
 export { formatDisplayValue, normalizeConfig, normalizeOption, resolveLabel, resolveOptionLabel, resolveOptionValue, valuesMatch } from '@dynamic-entity/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Subject, isObservable, firstValueFrom } from 'rxjs';
@@ -302,6 +302,10 @@ const DEFAULT_VALIDATION_MESSAGES = {
     required: 'This field is required.',
     requiredSelection: 'Please select an option.',
     email: 'Please enter a valid email address.',
+    url: 'Please enter a full web address, starting with https://.',
+    phone: 'Please enter a valid phone number.',
+    minItems: (_lang, err) => `At least ${err?.requiredLength} required.`,
+    maxItems: (_lang, err) => `No more than ${err?.requiredLength} allowed.`,
     pattern: 'Invalid format.',
     minlength: (_lang, err) => `Minimum ${err?.requiredLength} characters required.`,
     maxlength: (_lang, err) => `Maximum ${err?.requiredLength} characters allowed.`,
@@ -318,18 +322,35 @@ const DEFAULT_VALIDATION_MESSAGES = {
  * first error actually on the control — so the shared list costs nothing and spares every
  * field component a near-identical copy of it.
  */
-const COMMON_ORDER = ['required', 'email', 'min', 'max', 'minlength', 'maxlength', 'pattern'];
+const COMMON_ORDER = [
+    'required',
+    'email',
+    'url',
+    'phone',
+    'min',
+    'max',
+    'minlength',
+    'maxlength',
+    'pattern',
+];
 /**
  * Where a field type disagrees with the common list.
  *
- * Only three do, and each for a reason about how the control reads rather than what it can
- * raise: a select says "Please select an option" where an input says "This field is
- * required"; a number that is neither required nor out of range is not "invalid", it is not a
- * number; and a control with no text in it cannot fail a length or format rule.
+ * Each for a reason about how the control reads rather than what it can raise: a select says
+ * "Please select an option" where an input says "This field is required"; a number that is
+ * neither required nor out of range is not "invalid", it is not a number; a control with no
+ * text in it cannot fail a length or format rule; and a `tags` list is counted in items, not
+ * characters, although Angular reports both as `minlength`.
  */
 const ORDER_BY_FIELD_TYPE = {
     dropdown: { order: [['required', 'requiredSelection']], fallback: 'invalidSelection' },
     number: { order: ['required', 'min', 'max'], fallback: 'invalidNumber' },
+    slider: { order: ['required', 'min', 'max'], fallback: 'invalid' },
+    rating: { order: ['required', 'min', 'max'], fallback: 'invalid' },
+    tags: {
+        order: ['required', ['minlength', 'minItems'], ['maxlength', 'maxItems'], 'pattern'],
+        fallback: 'invalid',
+    },
     boolean: { order: ['required', 'pattern'], fallback: 'invalid' },
     checkbox: { order: ['required', 'pattern'], fallback: 'invalid' },
     file: { order: ['required', 'pattern'], fallback: 'invalid' },
@@ -854,6 +875,11 @@ const DEFAULT_UI_TEXT = {
     noImage: 'No image',
     uploadImage: 'Upload',
     changeImage: 'Change',
+    // Rating, colour and tags
+    ratingValue: '{value} of {max}',
+    clearValue: 'Clear {field}',
+    addTagPlaceholder: 'Type and press Enter',
+    removeTag: 'Remove {tag}',
     // Month / year pickers
     month: 'Month',
     year: 'Year',
@@ -5195,6 +5221,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
                 type: Input
             }] } });
 
+/**
+ * A format check that, like `Validators.email`, passes an empty value.
+ *
+ * Emptiness is `required`'s question. Answering it here too would give an optional field an
+ * error the moment it was cleared.
+ */
+function formatValidator(key, test) {
+    return (control) => {
+        const value = control.value;
+        if (value === null || value === undefined || value === '')
+            return null;
+        return test(String(value)) ? null : { [key]: true };
+    };
+}
+/** The built-in web address check. The rule itself is in core, so an import applies the same one. */
+const urlValidator = formatValidator('url', isValidUrl);
+/** The built-in phone number check. The rule itself is in core, so an import applies the same one. */
+const phoneValidator = formatValidator('phone', isValidPhone);
 /**
  * ValidatorRegistryService — resolves validator configs / key strings to Angular ValidatorFns.
  */
@@ -5213,6 +5257,10 @@ class ValidatorRegistryService {
             return Validators.required;
         if (validatorKey === 'email')
             return Validators.email;
+        if (validatorKey === 'url')
+            return urlValidator;
+        if (validatorKey === 'phone')
+            return phoneValidator;
         const [name, param] = validatorKey.split(':');
         const value = parseFloat(param);
         if (name === 'min' && !isNaN(value))
@@ -5262,6 +5310,10 @@ class ValidatorRegistryService {
         }
         if (config.email)
             fnList.push(Validators.email);
+        if (config.url)
+            fnList.push(urlValidator);
+        if (config.phone)
+            fnList.push(phoneValidator);
         // Named validators from the consumer registry, so a registered validator can be named
         // from a typed schema.
         for (const key of config.custom ?? []) {
@@ -6151,12 +6203,1492 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
                 type: Input
             }] } });
 
+/**
+ * URL field: a `type="url"` input, and a link when read-only.
+ *
+ * The read-only link is rendered only for a value that passes `isValidUrl`, meaning an http or
+ * https address. A record can hold anything, including `javascript:`, and a field whose job is
+ * to show an address must not turn a stored script into something to click. Anything else is
+ * shown as plain text.
+ */
+class UrlFieldComponent {
+    /**
+     * Unique to this component instance: an `array` renders the same field once per row, and a
+     * DOM id may not repeat. See `field-dom-id.ts`.
+     */
+    instanceId = nextFieldInstanceId();
+    domId(suffix = '') {
+        return fieldDomId(this.field, this.instanceId, suffix);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    get label() {
+        return resolveLabel(this.field?.label, this.language);
+    }
+    get placeholder() {
+        return resolveLabel(this.field?.placeholder, this.language);
+    }
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** Whether the stored value is an http(s) address, and so safe to render as a link. */
+    get linkable() {
+        const value = this.control?.value;
+        return typeof value === 'string' && isValidUrl(value);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: UrlFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: UrlFieldComponent, isStandalone: true, selector: "ngx-url-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div
+      class="ngx-field ngx-field--url"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
+          @if (linkable) {
+            <a [href]="control.value" class="ngx-field__link" target="_blank" rel="noopener noreferrer">{{
+              control.value
+            }}</a>
+          } @else {
+            {{ control.value || '—' }}
+          }
+        </span>
+      } @else {
+        <input
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
+          type="url"
+          inputmode="url"
+          autocomplete="url"
+          [formControl]="$any(control)"
+          [attr.aria-invalid]="control.invalid && control.touched"
+          [attr.aria-describedby]="describedBy()"
+          [placeholder]="placeholder || 'https://example.com'"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: UrlFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'ngx-url-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div
+      class="ngx-field ngx-field--url"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
+          @if (linkable) {
+            <a [href]="control.value" class="ngx-field__link" target="_blank" rel="noopener noreferrer">{{
+              control.value
+            }}</a>
+          } @else {
+            {{ control.value || '—' }}
+          }
+        </span>
+      } @else {
+        <input
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
+          type="url"
+          inputmode="url"
+          autocomplete="url"
+          [formControl]="$any(control)"
+          [attr.aria-invalid]="control.invalid && control.touched"
+          [attr.aria-describedby]="describedBy()"
+          [placeholder]="placeholder || 'https://example.com'"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+/**
+ * Phone field: a `type="tel"` input, and a `tel:` link when read-only.
+ *
+ * The value is stored exactly as typed, spaces and brackets included. The number is shown back
+ * to people far more often than it is dialled, and `+44 20 7946 0958` is easier to read than
+ * its digits run together. Only the link target is stripped down to what a dialler needs.
+ */
+class PhoneFieldComponent {
+    /**
+     * Unique to this component instance: an `array` renders the same field once per row, and a
+     * DOM id may not repeat. See `field-dom-id.ts`.
+     */
+    instanceId = nextFieldInstanceId();
+    domId(suffix = '') {
+        return fieldDomId(this.field, this.instanceId, suffix);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    get label() {
+        return resolveLabel(this.field?.label, this.language);
+    }
+    get placeholder() {
+        return resolveLabel(this.field?.placeholder, this.language);
+    }
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** `tel:` plus the digits and a leading `+`, or null for a value that is not a phone number. */
+    get dialHref() {
+        const value = this.control?.value;
+        if (typeof value !== 'string' || !isValidPhone(value))
+            return null;
+        return `tel:${value.trim().startsWith('+') ? '+' : ''}${value.replace(/\D/g, '')}`;
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: PhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: PhoneFieldComponent, isStandalone: true, selector: "ngx-phone-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div
+      class="ngx-field ngx-field--phone"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
+          @if (dialHref) {
+            <a [href]="dialHref" class="ngx-field__link">{{ control.value }}</a>
+          } @else {
+            {{ control.value || '—' }}
+          }
+        </span>
+      } @else {
+        <input
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
+          type="tel"
+          inputmode="tel"
+          autocomplete="tel"
+          [formControl]="$any(control)"
+          [attr.aria-invalid]="control.invalid && control.touched"
+          [attr.aria-describedby]="describedBy()"
+          [placeholder]="placeholder"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: PhoneFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'ngx-phone-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div
+      class="ngx-field ngx-field--phone"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
+          @if (dialHref) {
+            <a [href]="dialHref" class="ngx-field__link">{{ control.value }}</a>
+          } @else {
+            {{ control.value || '—' }}
+          }
+        </span>
+      } @else {
+        <input
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
+          type="tel"
+          inputmode="tel"
+          autocomplete="tel"
+          [formControl]="$any(control)"
+          [attr.aria-invalid]="control.invalid && control.touched"
+          [attr.aria-describedby]="describedBy()"
+          [placeholder]="placeholder"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+/**
+ * Slider field: a range input over `validators.min`–`validators.max` in steps of `field.step`.
+ *
+ * A range input cannot show that it is empty. With no value it puts the thumb at the midpoint,
+ * which looks exactly like a chosen value. The readout beside it is therefore the value itself,
+ * and shows a dash until someone moves the thumb. Without it, a required slider nobody touched
+ * would look answered and still fail at save.
+ */
+class SliderFieldComponent {
+    /**
+     * Unique to this component instance: an `array` renders the same field once per row, and a
+     * DOM id may not repeat. See `field-dom-id.ts`.
+     */
+    instanceId = nextFieldInstanceId();
+    domId(suffix = '') {
+        return fieldDomId(this.field, this.instanceId, suffix);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    get label() {
+        return resolveLabel(this.field?.label, this.language);
+    }
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    get bounds() {
+        return sliderBounds(this.field);
+    }
+    /** Whether the control holds a number. The thumb's position cannot say. */
+    get hasValue() {
+        const value = this.control?.value;
+        return value !== null && value !== undefined && value !== '' && Number.isFinite(Number(value));
+    }
+    get display() {
+        return this.hasValue ? String(this.control.value) : '—';
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SliderFieldComponent, isStandalone: true, selector: "ngx-slider-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div
+      class="ngx-field ngx-field--slider"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ display }}</span>
+      } @else {
+        <div class="ngx-field__slider-wrap">
+          <input
+            [id]="domId()"
+            type="range"
+            class="ngx-field__slider"
+            [class.ngx-field__slider--unset]="!hasValue"
+            [attr.data-testid]="'field-' + field.id + '-input'"
+            [min]="bounds.min"
+            [max]="bounds.max"
+            [step]="bounds.step"
+            [formControl]="$any(control)"
+            [attr.aria-valuetext]="hasValue ? null : display"
+            [attr.aria-invalid]="control.invalid && control.touched"
+            [attr.aria-describedby]="describedBy()"
+            [attr.disabled]="field.disabled ? true : null"
+          />
+          <output
+            class="ngx-field__slider-value"
+            [attr.for]="domId()"
+            [attr.data-testid]="'field-' + field.id + '-readout'"
+            aria-hidden="true"
+            >{{ display }}</output
+          >
+        </div>
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SliderFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'ngx-slider-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div
+      class="ngx-field ngx-field--slider"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ display }}</span>
+      } @else {
+        <div class="ngx-field__slider-wrap">
+          <input
+            [id]="domId()"
+            type="range"
+            class="ngx-field__slider"
+            [class.ngx-field__slider--unset]="!hasValue"
+            [attr.data-testid]="'field-' + field.id + '-input'"
+            [min]="bounds.min"
+            [max]="bounds.max"
+            [step]="bounds.step"
+            [formControl]="$any(control)"
+            [attr.aria-valuetext]="hasValue ? null : display"
+            [attr.aria-invalid]="control.invalid && control.touched"
+            [attr.aria-describedby]="describedBy()"
+            [attr.disabled]="field.disabled ? true : null"
+          />
+          <output
+            class="ngx-field__slider-value"
+            [attr.for]="domId()"
+            [attr.data-testid]="'field-' + field.id + '-readout'"
+            aria-hidden="true"
+            >{{ display }}</output
+          >
+        </div>
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+/**
+ * Rating field: 1 to `validators.max` stars (default 5), stored as a number.
+ *
+ * Built from native radio inputs in a fieldset, not clickable spans. That gives it the
+ * behaviour a radio group already has: arrow keys move the choice, Tab enters and leaves the
+ * group once, and a screen reader announces "3 of 5, radio button, 3 of 5". Each star's
+ * label is text a host can translate (`ratingValue`), because a star glyph read aloud is
+ * "black star".
+ */
+class RatingFieldComponent {
+    /**
+     * Unique to this component instance: an `array` renders the same field once per row, and a
+     * DOM id may not repeat. See `field-dom-id.ts`.
+     */
+    instanceId = nextFieldInstanceId();
+    domId(suffix = '') {
+        return fieldDomId(this.field, this.instanceId, suffix);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
+    cdr = inject(ChangeDetectorRef);
+    ui = inject(UiTextService);
+    field;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    _control;
+    _controlSub;
+    /**
+     * Subscribed because the radios are not bound through a form directive. A value patched in
+     * from outside (a reset, an autoPatch) would otherwise leave an OnPush view showing the old
+     * stars.
+     */
+    set control(value) {
+        this._control = value;
+        this._controlSub?.unsubscribe();
+        this._controlSub = this._control?.valueChanges?.subscribe(() => this.cdr.markForCheck());
+    }
+    get control() {
+        return this._control;
+    }
+    ngOnDestroy() {
+        this._controlSub?.unsubscribe();
+    }
+    get label() {
+        return resolveLabel(this.field?.label, this.language);
+    }
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    get scale() {
+        return ratingScale(this.field);
+    }
+    get stars() {
+        return Array.from({ length: this.scale }, (_, i) => i + 1);
+    }
+    /** The stored rating, or null when there is none or it is not a star on this scale. */
+    get current() {
+        const value = Number(this.control?.value);
+        const raw = this.control?.value;
+        if (raw === null || raw === undefined || raw === '' || !Number.isInteger(value))
+            return null;
+        return value >= 1 && value <= this.scale ? value : null;
+    }
+    select(star) {
+        this.control?.setValue(star);
+        this.control?.markAsTouched();
+        this.control?.markAsDirty();
+    }
+    clear() {
+        this.control?.setValue(null);
+        this.control?.markAsTouched();
+        this.control?.markAsDirty();
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RatingFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: RatingFieldComponent, isStandalone: true, selector: "ngx-rating-field", inputs: { field: "field", language: "language", readonly: "readonly", masked: "masked", control: "control" }, ngImport: i0, template: `
+    <div
+      class="ngx-field ngx-field--rating"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <fieldset class="ngx-field__fieldset">
+        <legend class="ngx-field__label">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+          @if (hint) {
+            <!-- Inside the legend: a fieldset allows one legend, and it must come first. -->
+            <span class="ngx-field__hint-wrap">
+              <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+              <span
+                class="ngx-field__hint"
+                role="tooltip"
+                [attr.data-testid]="'field-' + field.id + '-hint'"
+                [id]="domId('-hint')"
+                >{{ hint }}</span
+              >
+            </span>
+          }
+        </legend>
+        @if (masked) {
+          <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+            maskedText
+          }}</span>
+        } @else if (readonly) {
+          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
+            @if (current) {
+              <span class="ngx-field__stars" aria-hidden="true">
+                @for (star of stars; track star) {
+                  <span class="ngx-field__star-glyph" [class.ngx-field__star-glyph--on]="star <= current">{{
+                    star <= current ? '★' : '☆'
+                  }}</span>
+                }
+              </span>
+              {{ ui.text('ratingValue', language, { value: current, max: scale }) }}
+            } @else {
+              —
+            }
+          </span>
+        } @else {
+          <div class="ngx-field__rating">
+            @for (star of stars; track star) {
+              <label class="ngx-field__star" [class.ngx-field__star--on]="current !== null && star <= current">
+                <input
+                  type="radio"
+                  class="ngx-field__star-input"
+                  [id]="domId('-' + star)"
+                  [name]="domId()"
+                  [value]="star"
+                  [checked]="current === star"
+                  [attr.data-testid]="'field-' + field.id + '-star-' + star"
+                  [attr.aria-describedby]="describedBy()"
+                  [attr.disabled]="field.disabled ? true : null"
+                  (change)="select(star)"
+                />
+                <!-- Filled and hollow, so the rating is readable without telling colours apart. -->
+                <span class="ngx-field__star-glyph" aria-hidden="true">{{
+                  current !== null && star <= current ? '★' : '☆'
+                }}</span>
+                <span class="ngx-field__sr-only">{{ ui.text('ratingValue', language, { value: star, max: scale }) }}</span>
+              </label>
+            }
+            @if (current !== null && !field.disabled) {
+              <button
+                type="button"
+                class="ngx-field__remove-btn"
+                [attr.data-testid]="'field-' + field.id + '-clear'"
+                [attr.aria-label]="ui.text('clearValue', language, { field: label })"
+                (click)="clear()"
+              >
+                ×
+              </button>
+            }
+          </div>
+          @if (errorMessage) {
+            <span
+              class="ngx-field__error"
+              [attr.data-testid]="'field-' + field.id + '-error'"
+              [id]="domId('-error')"
+              role="alert"
+              >{{ errorMessage }}</span
+            >
+          }
+        }
+      </fieldset>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RatingFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'ngx-rating-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div
+      class="ngx-field ngx-field--rating"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <fieldset class="ngx-field__fieldset">
+        <legend class="ngx-field__label">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+          @if (hint) {
+            <!-- Inside the legend: a fieldset allows one legend, and it must come first. -->
+            <span class="ngx-field__hint-wrap">
+              <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+              <span
+                class="ngx-field__hint"
+                role="tooltip"
+                [attr.data-testid]="'field-' + field.id + '-hint'"
+                [id]="domId('-hint')"
+                >{{ hint }}</span
+              >
+            </span>
+          }
+        </legend>
+        @if (masked) {
+          <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+            maskedText
+          }}</span>
+        } @else if (readonly) {
+          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
+            @if (current) {
+              <span class="ngx-field__stars" aria-hidden="true">
+                @for (star of stars; track star) {
+                  <span class="ngx-field__star-glyph" [class.ngx-field__star-glyph--on]="star <= current">{{
+                    star <= current ? '★' : '☆'
+                  }}</span>
+                }
+              </span>
+              {{ ui.text('ratingValue', language, { value: current, max: scale }) }}
+            } @else {
+              —
+            }
+          </span>
+        } @else {
+          <div class="ngx-field__rating">
+            @for (star of stars; track star) {
+              <label class="ngx-field__star" [class.ngx-field__star--on]="current !== null && star <= current">
+                <input
+                  type="radio"
+                  class="ngx-field__star-input"
+                  [id]="domId('-' + star)"
+                  [name]="domId()"
+                  [value]="star"
+                  [checked]="current === star"
+                  [attr.data-testid]="'field-' + field.id + '-star-' + star"
+                  [attr.aria-describedby]="describedBy()"
+                  [attr.disabled]="field.disabled ? true : null"
+                  (change)="select(star)"
+                />
+                <!-- Filled and hollow, so the rating is readable without telling colours apart. -->
+                <span class="ngx-field__star-glyph" aria-hidden="true">{{
+                  current !== null && star <= current ? '★' : '☆'
+                }}</span>
+                <span class="ngx-field__sr-only">{{ ui.text('ratingValue', language, { value: star, max: scale }) }}</span>
+              </label>
+            }
+            @if (current !== null && !field.disabled) {
+              <button
+                type="button"
+                class="ngx-field__remove-btn"
+                [attr.data-testid]="'field-' + field.id + '-clear'"
+                [attr.aria-label]="ui.text('clearValue', language, { field: label })"
+                (click)="clear()"
+              >
+                ×
+              </button>
+            }
+          </div>
+          @if (errorMessage) {
+            <span
+              class="ngx-field__error"
+              [attr.data-testid]="'field-' + field.id + '-error'"
+              [id]="domId('-error')"
+              role="alert"
+              >{{ errorMessage }}</span
+            >
+          }
+        }
+      </fieldset>
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }] } });
+
+/**
+ * Colour field: a native colour picker, storing `#rrggbb`.
+ *
+ * Like a range input, a colour input has no empty state and shows black. The code beside it is
+ * therefore the real value, a dash until a colour is chosen, and a clear button sets the value
+ * back to nothing. Without them, "no colour" and "black" would look the same.
+ *
+ * Only a value that passes `normalizeHexColor` reaches a `style` binding. A record can hold
+ * any string, and a colour swatch is no place to interpret one.
+ */
+class ColorFieldComponent {
+    /**
+     * Unique to this component instance: an `array` renders the same field once per row, and a
+     * DOM id may not repeat. See `field-dom-id.ts`.
+     */
+    instanceId = nextFieldInstanceId();
+    domId(suffix = '') {
+        return fieldDomId(this.field, this.instanceId, suffix);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
+    ui = inject(UiTextService);
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    get label() {
+        return resolveLabel(this.field?.label, this.language);
+    }
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The stored colour as `#rrggbb`, or null when there is none or it is not a colour. */
+    get hex() {
+        return normalizeHexColor(this.control?.value);
+    }
+    clear() {
+        this.control?.setValue(null);
+        this.control?.markAsTouched();
+        this.control?.markAsDirty();
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ColorFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: ColorFieldComponent, isStandalone: true, selector: "ngx-color-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div
+      class="ngx-field ngx-field--color"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value ngx-field__color-value" [attr.data-testid]="'field-' + field.id + '-value'">
+          @if (hex) {
+            <span class="ngx-field__swatch" [style.background-color]="hex" aria-hidden="true"></span>
+            {{ hex }}
+          } @else {
+            {{ control.value || '—' }}
+          }
+        </span>
+      } @else {
+        <div class="ngx-field__color-wrap">
+          <input
+            [id]="domId()"
+            type="color"
+            class="ngx-field__color"
+            [attr.data-testid]="'field-' + field.id + '-input'"
+            [formControl]="$any(control)"
+            [attr.aria-invalid]="control.invalid && control.touched"
+            [attr.aria-describedby]="describedBy()"
+            [attr.disabled]="field.disabled ? true : null"
+          />
+          <span class="ngx-field__color-code" [attr.data-testid]="'field-' + field.id + '-code'">{{ hex || '—' }}</span>
+          @if (hex && !field.disabled) {
+            <button
+              type="button"
+              class="ngx-field__remove-btn"
+              [attr.data-testid]="'field-' + field.id + '-clear'"
+              [attr.aria-label]="ui.text('clearValue', language, { field: label })"
+              (click)="clear()"
+            >
+              ×
+            </button>
+          }
+        </div>
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ColorFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'ngx-color-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div
+      class="ngx-field ngx-field--color"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value ngx-field__color-value" [attr.data-testid]="'field-' + field.id + '-value'">
+          @if (hex) {
+            <span class="ngx-field__swatch" [style.background-color]="hex" aria-hidden="true"></span>
+            {{ hex }}
+          } @else {
+            {{ control.value || '—' }}
+          }
+        </span>
+      } @else {
+        <div class="ngx-field__color-wrap">
+          <input
+            [id]="domId()"
+            type="color"
+            class="ngx-field__color"
+            [attr.data-testid]="'field-' + field.id + '-input'"
+            [formControl]="$any(control)"
+            [attr.aria-invalid]="control.invalid && control.touched"
+            [attr.aria-describedby]="describedBy()"
+            [attr.disabled]="field.disabled ? true : null"
+          />
+          <span class="ngx-field__color-code" [attr.data-testid]="'field-' + field.id + '-code'">{{ hex || '—' }}</span>
+          @if (hex && !field.disabled) {
+            <button
+              type="button"
+              class="ngx-field__remove-btn"
+              [attr.data-testid]="'field-' + field.id + '-clear'"
+              [attr.aria-label]="ui.text('clearValue', language, { field: label })"
+              (click)="clear()"
+            >
+              ×
+            </button>
+          }
+        </div>
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+/** What ends a tag while typing, or separates several in pasted text. */
+const TAG_SEPARATOR = /[,;\n]/;
+/**
+ * Tags field: free text entered as a list of chips, stored as `string[]`.
+ *
+ * Unlike `multiSelect`, the values are whatever the user types, so there is no option list to
+ * keep in step. Enter or a comma ends a tag, Backspace in an empty box removes the last one,
+ * and pasted text is split on commas, semicolons and line breaks. Leaving the box commits
+ * what is in it, so a tag someone typed and then tabbed away from is not silently lost.
+ *
+ * The control holds the array. The text box is only a draft, which is why it is not bound
+ * with a form directive.
+ */
+class TagsFieldComponent {
+    /**
+     * Unique to this component instance: an `array` renders the same field once per row, and a
+     * DOM id may not repeat. See `field-dom-id.ts`.
+     */
+    instanceId = nextFieldInstanceId();
+    domId(suffix = '') {
+        return fieldDomId(this.field, this.instanceId, suffix);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
+    cdr = inject(ChangeDetectorRef);
+    ui = inject(UiTextService);
+    field;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    _control;
+    _controlSub;
+    /** Subscribed for the same reason as the rating field: nothing here is a form directive. */
+    set control(value) {
+        this._control = value;
+        this._controlSub?.unsubscribe();
+        this._controlSub = this._control?.valueChanges?.subscribe(() => this.cdr.markForCheck());
+    }
+    get control() {
+        return this._control;
+    }
+    ngOnDestroy() {
+        this._controlSub?.unsubscribe();
+    }
+    get label() {
+        return resolveLabel(this.field?.label, this.language);
+    }
+    get placeholder() {
+        return resolveLabel(this.field?.placeholder, this.language);
+    }
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The stored tags, read leniently. A record may hold a single string or anything else. */
+    get tags() {
+        return normalizeTags(this.control?.value);
+    }
+    onKeydown(event, entry) {
+        if (event.key === 'Enter' || event.key === ',' || event.key === ';') {
+            // Enter inside a form submits it. Adding a tag is what the user meant.
+            event.preventDefault();
+            this.commit(entry);
+        }
+        else if (event.key === 'Backspace' && entry.value === '' && this.tags.length) {
+            this.remove(this.tags[this.tags.length - 1]);
+        }
+    }
+    onPaste(event, entry) {
+        const text = event.clipboardData?.getData('text') ?? '';
+        if (!TAG_SEPARATOR.test(text))
+            return;
+        event.preventDefault();
+        // Split here, not by writing the text into the box first: a single-line input strips line
+        // breaks on assignment, which would join "z\nw" into one tag.
+        const draft = entry.value;
+        entry.value = '';
+        this.add([draft, ...text.split(TAG_SEPARATOR)]);
+    }
+    onBlur(entry) {
+        this.commit(entry);
+        this.control?.markAsTouched();
+    }
+    /** Add whatever is in the draft box, split on separators, and empty it. */
+    commit(entry) {
+        const added = entry.value.split(TAG_SEPARATOR);
+        entry.value = '';
+        this.add(added);
+    }
+    add(candidates) {
+        const next = normalizeTags([...this.tags, ...candidates]);
+        if (next.length !== this.tags.length)
+            this.write(next);
+    }
+    remove(tag) {
+        this.write(this.tags.filter(t => t !== tag));
+    }
+    /**
+     * An empty list is stored as `[]`, not `null`. `required` treats both as empty, and `[]`
+     * stays the same shape as every other value this field holds.
+     */
+    write(tags) {
+        this.control?.setValue(tags);
+        this.control?.markAsTouched();
+        this.control?.markAsDirty();
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TagsFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: TagsFieldComponent, isStandalone: true, selector: "ngx-tags-field", inputs: { field: "field", language: "language", readonly: "readonly", masked: "masked", control: "control" }, ngImport: i0, template: `
+    <div
+      class="ngx-field ngx-field--tags"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
+          @if (tags.length) {
+            <span class="ngx-field__tags ngx-field__tags--readonly">
+              @for (tag of tags; track tag) {
+                <span class="ngx-field__tag">{{ tag }}</span>
+              }
+            </span>
+          } @else {
+            —
+          }
+        </span>
+      } @else {
+        <div class="ngx-field__tags" [class.ngx-field__tags--disabled]="field.disabled">
+          @for (tag of tags; track tag) {
+            <span class="ngx-field__tag" [attr.data-testid]="'field-' + field.id + '-tag'">
+              {{ tag }}
+              @if (!field.disabled) {
+                <button
+                  type="button"
+                  class="ngx-field__tag-remove"
+                  [attr.aria-label]="ui.text('removeTag', language, { tag: tag })"
+                  (click)="remove(tag)"
+                >
+                  ×
+                </button>
+              }
+            </span>
+          }
+          <input
+            #entry
+            [id]="domId()"
+            type="text"
+            class="ngx-field__tags-input"
+            [attr.data-testid]="'field-' + field.id + '-input'"
+            [attr.aria-invalid]="control.invalid && control.touched"
+            [attr.aria-describedby]="describedBy()"
+            [placeholder]="placeholder || ui.text('addTagPlaceholder', language)"
+            [attr.disabled]="field.disabled ? true : null"
+            (keydown)="onKeydown($event, entry)"
+            (paste)="onPaste($event, entry)"
+            (blur)="onBlur(entry)"
+          />
+        </div>
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TagsFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'ngx-tags-field',
+                    standalone: true,
+                    template: `
+    <div
+      class="ngx-field ngx-field--tags"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
+          @if (tags.length) {
+            <span class="ngx-field__tags ngx-field__tags--readonly">
+              @for (tag of tags; track tag) {
+                <span class="ngx-field__tag">{{ tag }}</span>
+              }
+            </span>
+          } @else {
+            —
+          }
+        </span>
+      } @else {
+        <div class="ngx-field__tags" [class.ngx-field__tags--disabled]="field.disabled">
+          @for (tag of tags; track tag) {
+            <span class="ngx-field__tag" [attr.data-testid]="'field-' + field.id + '-tag'">
+              {{ tag }}
+              @if (!field.disabled) {
+                <button
+                  type="button"
+                  class="ngx-field__tag-remove"
+                  [attr.aria-label]="ui.text('removeTag', language, { tag: tag })"
+                  (click)="remove(tag)"
+                >
+                  ×
+                </button>
+              }
+            </span>
+          }
+          <input
+            #entry
+            [id]="domId()"
+            type="text"
+            class="ngx-field__tags-input"
+            [attr.data-testid]="'field-' + field.id + '-input'"
+            [attr.aria-invalid]="control.invalid && control.touched"
+            [attr.aria-describedby]="describedBy()"
+            [placeholder]="placeholder || ui.text('addTagPlaceholder', language)"
+            [attr.disabled]="field.disabled ? true : null"
+            (keydown)="onKeydown($event, entry)"
+            (paste)="onPaste($event, entry)"
+            (blur)="onBlur(entry)"
+          />
+        </div>
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }] } });
+
 /**
  * Field-type registration — the tree-shaking seam.
  *
  * `FieldRegistryService` imports no components. Whatever you register here is what gets
  * bundled, so an app that only uses text/number/dropdown pays for three components and
- * their imports, not twenty-one.
+ * their imports, not twenty-seven.
  *
  * ```ts
  * // Everything (convenient; bundles all built-ins):
@@ -6192,6 +7724,12 @@ function builtInFieldTypes() {
         array: ArrayFieldComponent,
         image: ImageFieldComponent,
         file: FileFieldComponent,
+        url: UrlFieldComponent,
+        phone: PhoneFieldComponent,
+        slider: SliderFieldComponent,
+        rating: RatingFieldComponent,
+        color: ColorFieldComponent,
+        tags: TagsFieldComponent,
     };
 }
 /** Register a specific set of field types. Only the components you name are bundled. */
@@ -6200,7 +7738,7 @@ function provideFieldTypes(types) {
         { provide: FIELD_TYPE_SETS, useValue: types, multi: true },
     ]);
 }
-/** Register all 21 built-in field type keys. Convenience for apps that use most of them. */
+/** Register all 27 built-in field type keys. Convenience for apps that use most of them. */
 function provideBuiltInFieldTypes() {
     return provideFieldTypes(builtInFieldTypes());
 }
@@ -6716,6 +8254,12 @@ const AUTO_COL_SPAN = {
     boolean: 4,
     checkbox: 4,
     'entity-ref': 6,
+    url: 6,
+    phone: 6,
+    slider: 6,
+    rating: 4,
+    color: 4,
+    tags: 6,
     // Left at the full width deliberately — textarea, markdown, image, file, group and array
     // each hold something a half-row would crop.
 };
@@ -9972,5 +11516,5 @@ function saveBlob(blob, filename) {
  * Generated bundle index. Do not edit.
  */
 
-export { ASYNC_VALIDATOR_REGISTRY, ArrayFieldComponent, BooleanFieldComponent, COMMON_MODULES_REGISTRY, CONFIG_SOURCE, CascadeDataService, CheckboxFieldComponent, ConfigSourceService, CurrencyFieldComponent, DEFAULT_UI_TEXT, DEFAULT_VALIDATION_MESSAGES, DateFieldComponent, DateTimeFieldComponent, DropdownFieldComponent, DynamicFieldComponent, DynamicFormComponent, DynamicRecordFormComponent, ENTITY_REF_CACHE_STORE, ENTITY_REF_REGISTRY, EmailFieldComponent, EntityImportComponent, EntityRefFieldComponent, EntityRefRegistryService, EntityRefSelectionService, EntityReferenceService, FIELD_TYPE_REGISTRY, FIELD_TYPE_SETS, FieldRegistryService, FileFieldComponent, GroupFieldComponent, HOOK_REGISTRY, HookRegistryService, HttpImportTransport, IMPORT_TRANSPORT, ImageFieldComponent, ImportErrorsComponent, ImportMapperComponent, ImportPreviewComponent, ImportTemplateComponent, InMemoryEntityRefCacheStore, LOOKUP_REGISTRY, LocalImportTransport, LookupRegistryService, MARKDOWN_RENDERER, MASKED_PLACEHOLDER, MASKED_ROLES, MarkdownFieldComponent, MonthYearFieldComponent, MultiSelectFieldComponent, NumberFieldComponent, PasswordFieldComponent, RECORD_MIGRATIONS, RadioFieldComponent, RbacService, RulesEvaluationService, SHEET_PARSER, SYSTEM_DEFAULT_CAN_EDIT, TextFieldComponent, TextareaFieldComponent, TimeFieldComponent, UI_TEXT, UPLOAD_HANDLER, UiTextService, VALIDATION_MESSAGES, VALIDATOR_REGISTRY, ValidationMessagesService, ValidatorRegistryService, builtInFieldTypes, defaultSheetParser, fieldDescribedBy, fieldDomId, nextFieldInstanceId, provideBuiltInFieldTypes, provideFieldTypes, provideHttpImportTransport, provideNgxDynamicEntity, refreshChoiceOptions, resolveUiText };
+export { ASYNC_VALIDATOR_REGISTRY, ArrayFieldComponent, BooleanFieldComponent, COMMON_MODULES_REGISTRY, CONFIG_SOURCE, CascadeDataService, CheckboxFieldComponent, ColorFieldComponent, ConfigSourceService, CurrencyFieldComponent, DEFAULT_UI_TEXT, DEFAULT_VALIDATION_MESSAGES, DateFieldComponent, DateTimeFieldComponent, DropdownFieldComponent, DynamicFieldComponent, DynamicFormComponent, DynamicRecordFormComponent, ENTITY_REF_CACHE_STORE, ENTITY_REF_REGISTRY, EmailFieldComponent, EntityImportComponent, EntityRefFieldComponent, EntityRefRegistryService, EntityRefSelectionService, EntityReferenceService, FIELD_TYPE_REGISTRY, FIELD_TYPE_SETS, FieldRegistryService, FileFieldComponent, GroupFieldComponent, HOOK_REGISTRY, HookRegistryService, HttpImportTransport, IMPORT_TRANSPORT, ImageFieldComponent, ImportErrorsComponent, ImportMapperComponent, ImportPreviewComponent, ImportTemplateComponent, InMemoryEntityRefCacheStore, LOOKUP_REGISTRY, LocalImportTransport, LookupRegistryService, MARKDOWN_RENDERER, MASKED_PLACEHOLDER, MASKED_ROLES, MarkdownFieldComponent, MonthYearFieldComponent, MultiSelectFieldComponent, NumberFieldComponent, PasswordFieldComponent, PhoneFieldComponent, RECORD_MIGRATIONS, RadioFieldComponent, RatingFieldComponent, RbacService, RulesEvaluationService, SHEET_PARSER, SYSTEM_DEFAULT_CAN_EDIT, SliderFieldComponent, TagsFieldComponent, TextFieldComponent, TextareaFieldComponent, TimeFieldComponent, UI_TEXT, UPLOAD_HANDLER, UiTextService, UrlFieldComponent, VALIDATION_MESSAGES, VALIDATOR_REGISTRY, ValidationMessagesService, ValidatorRegistryService, builtInFieldTypes, defaultSheetParser, fieldDescribedBy, fieldDomId, nextFieldInstanceId, phoneValidator, provideBuiltInFieldTypes, provideFieldTypes, provideHttpImportTransport, provideNgxDynamicEntity, refreshChoiceOptions, resolveUiText, urlValidator };
 //# sourceMappingURL=ngx-dynamic-entity.mjs.map