ngx-dynamic-entity 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-dynamic-entity",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Angular standalone UI library for rendering dynamic entity forms.",
   "//typings": "Local workspace resolution only: ng-packagr 21 writes types/ngx-dynamic-entity.d.ts into dist/package.json. Do NOT add a 'main' field here — ng-packagr does not generate one, so it would be copied verbatim and resolve wrongly in the published package.",
   "typings": "types/ngx-dynamic-entity.d.ts",
@@ -8,7 +8,7 @@
     "@angular/common": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
     "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
     "@angular/forms": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
-    "@dynamic-entity/core": "^2.1.1",
+    "@dynamic-entity/core": "^2.2.0",
     "rxjs": "^7.0.0"
   },
   "keywords": [

package/styles.css

@@ -43,6 +43,7 @@
   --ngx-color-info: var(--ngx-color-accent);
   --ngx-color-info-soft: var(--ngx-color-accent-soft);
   --ngx-color-disabled-bg: #eef1f4;
+  --ngx-color-rating: #a8660b;
 
   /* Metrics */
   --ngx-radius: 8px;
@@ -97,6 +98,7 @@
     --ngx-color-warning-soft: #2f2517;
     --ngx-color-success: #6fc9a8;
     --ngx-color-disabled-bg: #1c2631;
+    --ngx-color-rating: #f0c05a;
     --ngx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
   }
 }
@@ -657,6 +659,214 @@ textarea.ngx-field__input:focus {
   margin: 0;
 }
 
+/* Text for assistive technology only: announced, not drawn. */
+.ngx-field__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.ngx-field__link {
+  color: var(--ngx-color-accent);
+  overflow-wrap: anywhere;
+}
+
+/* Slider */
+.ngx-field__slider-wrap,
+.ngx-field__color-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: var(--ngx-control-height);
+}
+
+.ngx-field__slider {
+  flex: 1;
+  min-width: 0;
+  accent-color: var(--ngx-color-accent);
+}
+
+/* An untouched slider still draws a thumb; dimming it says the position is not a value. */
+.ngx-field__slider--unset {
+  opacity: 0.55;
+}
+
+.ngx-field__slider-value,
+.ngx-field__color-code {
+  min-width: 4ch;
+  font-variant-numeric: tabular-nums;
+  color: var(--ngx-color-muted);
+}
+
+/* Colour */
+.ngx-field__color {
+  inline-size: 44px;
+  block-size: 34px;
+  padding: 2px;
+  border: 1px solid var(--ngx-color-border);
+  border-radius: var(--ngx-radius-sm);
+  background: var(--ngx-color-surface);
+  cursor: pointer;
+}
+
+.ngx-field__color:focus-visible {
+  outline: var(--ngx-focus-width) solid var(--ngx-color-accent);
+  outline-offset: 2px;
+}
+
+.ngx-field__color-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ngx-field__swatch {
+  inline-size: 18px;
+  block-size: 18px;
+  border-radius: 4px;
+  border: 1px solid var(--ngx-color-border-strong);
+}
+
+/* Rating */
+.ngx-field__rating {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-height: var(--ngx-control-height);
+}
+
+/* The radio stays in the page for the keyboard and screen readers; the star is what is seen. */
+.ngx-field__star {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 32px;
+  min-block-size: 32px;
+  cursor: pointer;
+  border-radius: var(--ngx-radius-sm);
+}
+
+.ngx-field__star-input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.ngx-field__star:has(.ngx-field__star-input:focus-visible) {
+  box-shadow: var(--ngx-ring);
+}
+
+.ngx-field__star-glyph {
+  font-size: 22px;
+  line-height: 1;
+  color: var(--ngx-color-muted);
+}
+
+.ngx-field__star--on .ngx-field__star-glyph,
+.ngx-field__star-glyph--on {
+  color: var(--ngx-color-rating);
+}
+
+.ngx-field__rating .ngx-field__remove-btn {
+  margin-inline-start: 8px;
+  padding: 2px 8px;
+}
+
+.ngx-field__stars {
+  margin-inline-end: 6px;
+}
+
+/* Tags */
+.ngx-field__tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  min-height: var(--ngx-control-height);
+  padding: 4px 8px;
+  border: 1px solid var(--ngx-color-border);
+  border-radius: var(--ngx-radius);
+  background: var(--ngx-color-surface);
+}
+
+.ngx-field__tags:focus-within {
+  border-color: var(--ngx-color-accent);
+  box-shadow: var(--ngx-ring);
+}
+
+.ngx-field--invalid .ngx-field__tags {
+  border-color: var(--ngx-color-error);
+}
+
+.ngx-field__tags--readonly {
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+}
+
+.ngx-field__tags--disabled {
+  background: var(--ngx-color-disabled-bg);
+}
+
+.ngx-field__tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px 2px 10px;
+  border-radius: var(--ngx-radius-pill);
+  background: var(--ngx-color-accent-soft);
+  color: var(--ngx-color-text);
+  font-size: var(--ngx-hint-size);
+}
+
+.ngx-field__tags--readonly .ngx-field__tag {
+  padding-inline-end: 10px;
+}
+
+.ngx-field__tag-remove {
+  appearance: none;
+  border: 0;
+  background: none;
+  color: var(--ngx-color-muted);
+  font: inherit;
+  line-height: 1;
+  min-inline-size: 24px;
+  min-block-size: 24px;
+  border-radius: var(--ngx-radius-pill);
+  cursor: pointer;
+}
+
+.ngx-field__tag-remove:hover {
+  color: var(--ngx-color-accent);
+}
+
+.ngx-field__tag-remove:focus-visible {
+  outline: var(--ngx-focus-width) solid var(--ngx-color-accent);
+  outline-offset: 1px;
+}
+
+.ngx-field__tags-input {
+  flex: 1;
+  min-inline-size: 8ch;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: var(--ngx-font-size);
+  padding: 4px 2px;
+}
+
 /* Checkbox */
 .ngx-field input[type='checkbox'] {
   accent-color: var(--ngx-color-accent);

package/types/ngx-dynamic-entity.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Type, EnvironmentProviders, WritableSignal, OnInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges, Provider } from '@angular/core';
-import { ReferenceOption, LocalizedText, EntityFormConfig, FormRule, ImportLookups, MappingPlan, ImportResult, TemplateSpec, SheetData, CommonModuleEntry, EntityReferenceLoader, LookupListSource, RecordMigration, FileUploadHandler, FieldValidators, NestedFieldConfig, ReferenceLoaderContext, DropdownOption, LookupListValue, NestedTabConfig, RuleEvaluationResult, FieldScopeEntry, EvaluateFormRulesOptions, ImportColumn, UnsupportedColumn, ImportRowError } from '@dynamic-entity/core';
+import { ReferenceOption, LocalizedText, EntityFormConfig, FormRule, ImportLookups, MappingPlan, ImportResult, TemplateSpec, SheetData, CommonModuleEntry, EntityReferenceLoader, LookupListSource, RecordMigration, FileUploadHandler, FieldValidators, NestedFieldConfig, ReferenceLoaderContext, DropdownOption, LookupListValue, NestedTabConfig, RuleEvaluationResult, FieldScopeEntry, EvaluateFormRulesOptions, ImportColumn, UnsupportedColumn, ImportRowError, SliderBounds } from '@dynamic-entity/core';
 export { AutoPatchConfig, CommonModuleEntry, ComponentClass, DropdownOption, EntityFormConfig, EntityPermissions, EntityReferenceConfig, EntityReferenceLoader, FieldTableConfig, FieldValidators, FileRef, FormRule, LocalizedText, NestedFieldConfig, NestedTabConfig, PatchOnTrueMapping, RbacContext, ReferenceLoaderContext, ReferenceOption, RichFieldType, RuleAction, RuleCondition, RuleEvaluationResult, VersionedRecord, formatDisplayValue, normalizeConfig, normalizeOption, resolveLabel, resolveOptionLabel, resolveOptionValue, valuesMatch } from '@dynamic-entity/core';
 import { ValidatorFn, AsyncValidatorFn, AbstractControl, ValidationErrors, FormGroup, FormArray } from '@angular/forms';
 import * as rxjs from 'rxjs';
@@ -83,6 +83,10 @@ declare const DEFAULT_UI_TEXT: {
     noImage: string;
     uploadImage: string;
     changeImage: string;
+    ratingValue: string;
+    clearValue: string;
+    addTagPlaceholder: string;
+    removeTag: string;
     month: string;
     year: string;
     write: string;
@@ -616,7 +620,7 @@ declare const provideNgxDynamicEntity: (config?: NgxDynamicEntityConfig) => Envi
  *
  * `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):
@@ -632,7 +636,7 @@ declare const provideNgxDynamicEntity: (config?: NgxDynamicEntityConfig) => Envi
 declare function builtInFieldTypes(): Record<string, Type<any>>;
 /** Register a specific set of field types. Only the components you name are bundled. */
 declare function provideFieldTypes(types: Record<string, Type<any>>): EnvironmentProviders;
-/** 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. */
 declare function provideBuiltInFieldTypes(): EnvironmentProviders;
 
 /**
@@ -678,6 +682,10 @@ declare class HookRegistryService {
     static ɵprov: i0.ɵɵInjectableDeclaration<HookRegistryService>;
 }
 
+/** The built-in web address check. The rule itself is in core, so an import applies the same one. */
+declare const urlValidator: ValidatorFn;
+/** The built-in phone number check. The rule itself is in core, so an import applies the same one. */
+declare const phoneValidator: ValidatorFn;
 /**
  * ValidatorRegistryService — resolves validator configs / key strings to Angular ValidatorFns.
  */
@@ -3257,5 +3265,261 @@ declare class FileFieldComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<FileFieldComponent, "ngx-file-field", never, { "field": { "alias": "field"; "required": false; }; "control": { "alias": "control"; "required": false; }; "language": { "alias": "language"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "masked": { "alias": "masked"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-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 };
+/**
+ * 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.
+ */
+declare 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`.
+     */
+    private readonly instanceId;
+    protected domId(suffix?: string): string;
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    protected readonly maskedText: string;
+    private readonly messages;
+    field: NestedFieldConfig;
+    control: AbstractControl;
+    language: string;
+    readonly: boolean;
+    masked: boolean;
+    get label(): string;
+    get placeholder(): string;
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint(): string;
+    /** Whether the stored value is an http(s) address, and so safe to render as a link. */
+    get linkable(): boolean;
+    /** The ids of whatever is describing this control right now. */
+    protected describedBy(): string | null;
+    get errorMessage(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UrlFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UrlFieldComponent, "ngx-url-field", never, { "field": { "alias": "field"; "required": false; }; "control": { "alias": "control"; "required": false; }; "language": { "alias": "language"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "masked": { "alias": "masked"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare 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`.
+     */
+    private readonly instanceId;
+    protected domId(suffix?: string): string;
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    protected readonly maskedText: string;
+    private readonly messages;
+    field: NestedFieldConfig;
+    control: AbstractControl;
+    language: string;
+    readonly: boolean;
+    masked: boolean;
+    get label(): string;
+    get placeholder(): string;
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint(): string;
+    /** `tel:` plus the digits and a leading `+`, or null for a value that is not a phone number. */
+    get dialHref(): string | null;
+    /** The ids of whatever is describing this control right now. */
+    protected describedBy(): string | null;
+    get errorMessage(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PhoneFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PhoneFieldComponent, "ngx-phone-field", never, { "field": { "alias": "field"; "required": false; }; "control": { "alias": "control"; "required": false; }; "language": { "alias": "language"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "masked": { "alias": "masked"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare 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`.
+     */
+    private readonly instanceId;
+    protected domId(suffix?: string): string;
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    protected readonly maskedText: string;
+    private readonly messages;
+    field: NestedFieldConfig;
+    control: AbstractControl;
+    language: string;
+    readonly: boolean;
+    masked: boolean;
+    get label(): string;
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint(): string;
+    get bounds(): SliderBounds;
+    /** Whether the control holds a number. The thumb's position cannot say. */
+    get hasValue(): boolean;
+    get display(): string;
+    /** The ids of whatever is describing this control right now. */
+    protected describedBy(): string | null;
+    get errorMessage(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SliderFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SliderFieldComponent, "ngx-slider-field", never, { "field": { "alias": "field"; "required": false; }; "control": { "alias": "control"; "required": false; }; "language": { "alias": "language"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "masked": { "alias": "masked"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * 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".
+ */
+declare class RatingFieldComponent implements OnDestroy {
+    /**
+     * 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`.
+     */
+    private readonly instanceId;
+    protected domId(suffix?: string): string;
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    protected readonly maskedText: string;
+    private readonly messages;
+    private readonly cdr;
+    protected readonly ui: UiTextService;
+    field: NestedFieldConfig;
+    language: string;
+    readonly: boolean;
+    masked: boolean;
+    private _control;
+    private _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: AbstractControl);
+    get control(): AbstractControl;
+    ngOnDestroy(): void;
+    get label(): string;
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint(): string;
+    get scale(): number;
+    get stars(): number[];
+    /** The stored rating, or null when there is none or it is not a star on this scale. */
+    get current(): number | null;
+    select(star: number): void;
+    clear(): void;
+    /** The ids of whatever is describing this control right now. */
+    protected describedBy(): string | null;
+    get errorMessage(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RatingFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RatingFieldComponent, "ngx-rating-field", never, { "field": { "alias": "field"; "required": false; }; "language": { "alias": "language"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "masked": { "alias": "masked"; "required": false; }; "control": { "alias": "control"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare 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`.
+     */
+    private readonly instanceId;
+    protected domId(suffix?: string): string;
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    protected readonly maskedText: string;
+    private readonly messages;
+    protected readonly ui: UiTextService;
+    field: NestedFieldConfig;
+    control: AbstractControl;
+    language: string;
+    readonly: boolean;
+    masked: boolean;
+    get label(): string;
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint(): string;
+    /** The stored colour as `#rrggbb`, or null when there is none or it is not a colour. */
+    get hex(): string | null;
+    clear(): void;
+    /** The ids of whatever is describing this control right now. */
+    protected describedBy(): string | null;
+    get errorMessage(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorFieldComponent, "ngx-color-field", never, { "field": { "alias": "field"; "required": false; }; "control": { "alias": "control"; "required": false; }; "language": { "alias": "language"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "masked": { "alias": "masked"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class TagsFieldComponent implements OnDestroy {
+    /**
+     * 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`.
+     */
+    private readonly instanceId;
+    protected domId(suffix?: string): string;
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    protected readonly maskedText: string;
+    private readonly messages;
+    private readonly cdr;
+    protected readonly ui: UiTextService;
+    field: NestedFieldConfig;
+    language: string;
+    readonly: boolean;
+    masked: boolean;
+    private _control;
+    private _controlSub?;
+    /** Subscribed for the same reason as the rating field: nothing here is a form directive. */
+    set control(value: AbstractControl);
+    get control(): AbstractControl;
+    ngOnDestroy(): void;
+    get label(): string;
+    get placeholder(): string;
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint(): string;
+    /** The stored tags, read leniently. A record may hold a single string or anything else. */
+    get tags(): string[];
+    onKeydown(event: KeyboardEvent, entry: HTMLInputElement): void;
+    onPaste(event: ClipboardEvent, entry: HTMLInputElement): void;
+    onBlur(entry: HTMLInputElement): void;
+    /** Add whatever is in the draft box, split on separators, and empty it. */
+    commit(entry: HTMLInputElement): void;
+    private add;
+    remove(tag: string): void;
+    /**
+     * 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.
+     */
+    private write;
+    /** The ids of whatever is describing this control right now. */
+    protected describedBy(): string | null;
+    get errorMessage(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TagsFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TagsFieldComponent, "ngx-tags-field", never, { "field": { "alias": "field"; "required": false; }; "language": { "alias": "language"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "masked": { "alias": "masked"; "required": false; }; "control": { "alias": "control"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+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 };
 export type { ChoiceOptionHost, ConfigSourceHandler, DynamicFieldComponentContract, EntityRefCacheStore, EntityRefSelection, HookFn, HttpImportTransportOptions, ImportContext, ImportPreview, ImportTransport, InvalidField, MessageOrderEntry, NgxDynamicEntityConfig, RuleSyncContext, SheetParser, TemplateFormat, UiTextKey, UiTextOverrides, UiTextOverridesFor, UiTextParams, UiTextResolver, UiTextResolverFor, UiTextValue, ValidationMessage };