ngx-dynamic-entity 1.6.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-dynamic-entity",
-  "version": "1.6.0",
+  "version": "1.8.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": "^1.6.0",
+    "@dynamic-entity/core": "^1.8.0",
     "rxjs": "^7.0.0"
   },
   "keywords": [

package/styles.css

@@ -577,3 +577,50 @@ textarea.ngx-field__input {
     grid-column: 1 / -1 !important;
   }
 }
+
+/* ─── Markdown field ────────────────────────────────────────────────────────
+   With no MARKDOWN_RENDERER the field shows its own source, so the line breaks
+   the author typed are the only structure it has: pre-wrap is what preserves
+   them. Without this rule the read-only view collapses a document to one line. */
+.ngx-field__markdown--source {
+  white-space: pre-wrap;
+}
+
+/* Rendered output is consumer HTML. Keep it inside the field's column rather
+   than letting a wide table or long code line stretch the grid. */
+.ngx-field__markdown {
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+.ngx-field__markdown > :first-child { margin-top: 0; }
+.ngx-field__markdown > :last-child { margin-bottom: 0; }
+
+.ngx-field__markdown-tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+
+.ngx-field__markdown-tab {
+  font: inherit;
+  padding: 2px 10px;
+  cursor: pointer;
+  border: 1px solid var(--ngx-border, #d1d5db);
+  border-radius: 4px;
+  background: var(--ngx-surface, #fff);
+}
+
+.ngx-field__markdown-tab[aria-pressed='true'] {
+  background: var(--ngx-accent-soft, #eef2ff);
+  border-color: var(--ngx-accent, #6366f1);
+}
+
+/* The preview replaces the textarea, so give it a comparable height — otherwise
+   switching tabs makes the whole form jump. */
+.ngx-field__markdown--preview {
+  min-height: 8.5rem;
+  padding: 8px 10px;
+  border: 1px solid var(--ngx-border, #d1d5db);
+  border-radius: 4px;
+}

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

@@ -163,6 +163,25 @@ type ConfigSourceHandler = (entityKey: string) => any;
  * Enables cross-entity field referencing (`isReferenced`, `referencedEntityKey`, `referencedFieldId`, `hasDrift`).
  */
 declare const CONFIG_SOURCE: InjectionToken<ConfigSourceHandler>;
+/**
+ * Turns the markdown a `markdown` field stores into HTML for display.
+ *
+ * Optional, and deliberately not bundled: these packages declare no runtime dependencies
+ * beyond `tslib`, and a markdown parser is a large one to force on every consumer. Without
+ * a renderer the field still works — it stores and shows the source text, with line breaks
+ * preserved and nothing interpreted.
+ *
+ * The returned HTML is bound through `[innerHTML]`, so Angular's sanitizer strips scripts
+ * and event handlers before it reaches the DOM. That is a backstop, not a licence: a
+ * renderer should still be configured to escape raw HTML in its input, because sanitizing
+ * removes the dangerous parts silently rather than telling the author their content was
+ * altered.
+ *
+ * @example
+ * import { marked } from 'marked';
+ * { provide: MARKDOWN_RENDERER, useValue: (src: string) => marked.parse(src) as string }
+ */
+declare const MARKDOWN_RENDERER: InjectionToken<(source: string) => string>;
 
 interface NgxDynamicEntityConfig {
     /** Roles that see masked field values as XXXXXXXXX */
@@ -797,6 +816,15 @@ declare class DynamicFormComponent implements OnInit, OnChanges, OnDestroy {
     get submitBlocked(): boolean;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Whether an `initialData` change represents loading a different record.
+     *
+     * Not every change does. A template binding like `[initialData]="record() || {}"` yields a
+     * fresh object literal on each evaluation, so `ngOnChanges` fires with two empty objects
+     * and nothing has actually been loaded — resetting there would drag someone back to the
+     * first tab while they were filling in a new record on the third.
+     */
+    private isRecordSwap;
     ngOnDestroy(): void;
     /**
      * `focusPanel: false` is for a caller that is about to focus something more specific.
@@ -1336,6 +1364,60 @@ declare class TextareaFieldComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<TextareaFieldComponent, "ngx-textarea-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>;
 }
 
+/**
+ * Markdown field: a long-form input that stores **markdown source**, never HTML.
+ *
+ * Storing the source rather than rendered HTML is the whole design. The record stays plain
+ * text — diffable, portable, safe to log, and impossible to turn into stored XSS by writing
+ * it into a database. Rendering happens at display time and only when a consumer asks for
+ * it, via `MARKDOWN_RENDERER`.
+ *
+ * Without a renderer this degrades to exactly what `textarea` does, plus preserved line
+ * breaks: the source is shown as text with nothing interpreted. That is the default because
+ * these packages declare no runtime dependencies beyond `tslib`, and a markdown parser is a
+ * large thing to force on a consumer who wanted a form library.
+ *
+ * With a renderer, its HTML is bound through `[innerHTML]`, which Angular sanitizes — see
+ * the token's own note on why that is a backstop rather than a licence.
+ */
+declare class MarkdownFieldComponent implements OnChanges {
+    field: NestedFieldConfig;
+    control: AbstractControl;
+    language: string;
+    readonly: boolean;
+    masked: boolean;
+    /** Optional — the field is fully usable without one. */
+    private readonly render;
+    private readonly cdr;
+    private readonly destroyRef;
+    protected readonly previewing: i0.WritableSignal<boolean>;
+    private valueSub?;
+    /**
+     * Re-render when the value changes from outside this component.
+     *
+     * `rendered()` reads `control.value`, which under OnPush is neither an input nor a
+     * template event: typing in the textarea updates through `formControl`, but a host
+     * calling `patchValue`, a rule, or an `autoPatch` mapping does not mark this component
+     * dirty. The preview and the read-only view would keep showing the previous document
+     * while the record already held a different one.
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    /** A Preview tab that can only ever show the source back is worse than no tab. */
+    protected get canPreview(): boolean;
+    get label(): string;
+    get placeholder(): string;
+    /**
+     * Rendered HTML, or null when there is no renderer or nothing to render.
+     *
+     * A renderer is consumer code and may throw on input it does not like. Letting that
+     * escape would take down the whole form over one malformed field, so it falls back to the
+     * source text — which is what the field would have shown with no renderer at all.
+     */
+    protected rendered(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MarkdownFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MarkdownFieldComponent, "ngx-markdown-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>;
+}
+
 declare class NumberFieldComponent {
     private readonly messages;
     field: NestedFieldConfig;
@@ -1737,5 +1819,5 @@ 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_VALIDATION_MESSAGES, DateFieldComponent, DateTimeFieldComponent, DropdownFieldComponent, DynamicFieldComponent, DynamicFormComponent, DynamicRecordFormComponent, ENTITY_REF_CACHE_STORE, ENTITY_REF_REGISTRY, EmailFieldComponent, EntityRefFieldComponent, EntityRefRegistryService, EntityRefSelectionService, EntityReferenceService, FIELD_TYPE_REGISTRY, FIELD_TYPE_SETS, FieldRegistryService, FileFieldComponent, GroupFieldComponent, HOOK_REGISTRY, HookRegistryService, ImageFieldComponent, InMemoryEntityRefCacheStore, LOOKUP_REGISTRY, LookupRegistryService, MASKED_ROLES, MonthYearFieldComponent, MultiSelectFieldComponent, NumberFieldComponent, PasswordFieldComponent, RECORD_MIGRATIONS, RadioFieldComponent, RbacService, RulesEvaluationService, SYSTEM_DEFAULT_CAN_EDIT, TextFieldComponent, TextareaFieldComponent, TimeFieldComponent, UPLOAD_HANDLER, VALIDATION_MESSAGES, VALIDATOR_REGISTRY, ValidationMessagesService, ValidatorRegistryService, builtInFieldTypes, provideBuiltInFieldTypes, provideFieldTypes, provideNgxDynamicEntity, refreshChoiceOptions };
+export { ASYNC_VALIDATOR_REGISTRY, ArrayFieldComponent, BooleanFieldComponent, COMMON_MODULES_REGISTRY, CONFIG_SOURCE, CascadeDataService, CheckboxFieldComponent, ConfigSourceService, CurrencyFieldComponent, DEFAULT_VALIDATION_MESSAGES, DateFieldComponent, DateTimeFieldComponent, DropdownFieldComponent, DynamicFieldComponent, DynamicFormComponent, DynamicRecordFormComponent, ENTITY_REF_CACHE_STORE, ENTITY_REF_REGISTRY, EmailFieldComponent, EntityRefFieldComponent, EntityRefRegistryService, EntityRefSelectionService, EntityReferenceService, FIELD_TYPE_REGISTRY, FIELD_TYPE_SETS, FieldRegistryService, FileFieldComponent, GroupFieldComponent, HOOK_REGISTRY, HookRegistryService, ImageFieldComponent, InMemoryEntityRefCacheStore, LOOKUP_REGISTRY, LookupRegistryService, MARKDOWN_RENDERER, MASKED_ROLES, MarkdownFieldComponent, MonthYearFieldComponent, MultiSelectFieldComponent, NumberFieldComponent, PasswordFieldComponent, RECORD_MIGRATIONS, RadioFieldComponent, RbacService, RulesEvaluationService, SYSTEM_DEFAULT_CAN_EDIT, TextFieldComponent, TextareaFieldComponent, TimeFieldComponent, UPLOAD_HANDLER, VALIDATION_MESSAGES, VALIDATOR_REGISTRY, ValidationMessagesService, ValidatorRegistryService, builtInFieldTypes, provideBuiltInFieldTypes, provideFieldTypes, provideNgxDynamicEntity, refreshChoiceOptions };
 export type { ChoiceOptionHost, ConfigSourceHandler, DynamicFieldComponentContract, EntityRefCacheStore, EntityRefSelection, HookFn, NgxDynamicEntityConfig, ValidationMessage };