ngx-dynamic-entity 1.6.0 → 1.8.0

package/fesm2022/ngx-dynamic-entity.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, Injectable, signal, Input, ChangeDetectionStrategy, Component, DestroyRef, Injector, isDevMode, ViewContainerRef, ViewChild, forwardRef, ChangeDetectorRef, Optional, Inject, EventEmitter, computed, HostListener, ViewChildren, Output, ElementRef, afterNextRender } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, Injectable, signal, Input, ChangeDetectionStrategy, Component, ChangeDetectorRef, DestroyRef, Injector, isDevMode, ViewContainerRef, ViewChild, forwardRef, Optional, Inject, EventEmitter, computed, HostListener, ViewChildren, Output, ElementRef, afterNextRender } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { ReactiveFormsModule, Validators, FormBuilder, FormArray, FormGroup } from '@angular/forms';
 import { resolveLabel, formatDisplayValue, normalizeLookupValues, lookupValuesToOptions, valuesMatch, getOptionStoredValue, resolveOptionLabel, resolveOptionValue, buildReferenceCacheKey, normalizeReferenceOptions, entityKeyFromCacheKey, applyCascadeFilter, resolveEffectiveMask, shouldMaskField, findTab, fileRefName, evaluateFormRules, filterRulesForTab, evaluateFieldVisibility, normalizeConfigOptions, migrateRecord, getTabData, getValueByPath, setTabData, setValueByPath, normalizeArrayStructures, ambiguousFieldIds, parseFieldRef, toRefToken, collectFieldScopes, fieldRefFor, refOf, getTabPath, applyAutoPatch, applyPatchOnTrue } from '@dynamic-entity/core';
@@ -152,6 +152,25 @@ const SYSTEM_DEFAULT_CAN_EDIT = new InjectionToken('SYSTEM_DEFAULT_CAN_EDIT');
  * Enables cross-entity field referencing (`isReferenced`, `referencedEntityKey`, `referencedFieldId`, `hasDrift`).
  */
 const CONFIG_SOURCE = new InjectionToken('CONFIG_SOURCE');
+/**
+ * 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 }
+ */
+const MARKDOWN_RENDERER = new InjectionToken('MARKDOWN_RENDERER');
 
 /**
  * Provider function for ngx-dynamic-entity.
@@ -426,6 +445,233 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input
             }] } });
 
+/**
+ * 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.
+ */
+class MarkdownFieldComponent {
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    /** Optional — the field is fully usable without one. */
+    render = inject(MARKDOWN_RENDERER, { optional: true });
+    cdr = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
+    previewing = signal(false, ...(ngDevMode ? [{ debugName: "previewing" }] : /* istanbul ignore next */ []));
+    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) {
+        if (!changes['control'])
+            return;
+        this.valueSub?.unsubscribe();
+        this.valueSub = this.control?.valueChanges?.subscribe(() => this.cdr.markForCheck());
+        if (this.valueSub)
+            this.destroyRef.onDestroy(() => this.valueSub?.unsubscribe());
+    }
+    /** A Preview tab that can only ever show the source back is worse than no tab. */
+    get canPreview() {
+        return !!this.render;
+    }
+    get label() {
+        return resolveLabel(this.field?.label, this.language);
+    }
+    get placeholder() {
+        return resolveLabel(this.field?.placeholder, this.language);
+    }
+    /**
+     * 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.
+     */
+    rendered() {
+        const source = this.control?.value;
+        if (!this.render || typeof source !== 'string' || source === '')
+            return null;
+        try {
+            return this.render(source);
+        }
+        catch {
+            return null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MarkdownFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MarkdownFieldComponent, isStandalone: true, selector: "ngx-markdown-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, usesOnChanges: true, ngImport: i0, template: `
+    <div
+      class="ngx-field ngx-field--markdown"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
+
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        @if (rendered(); as html) {
+          <div class="ngx-field__value ngx-field__markdown" [attr.data-testid]="'field-' + field.id + '-value'" [innerHTML]="html"></div>
+        } @else {
+          <!-- No renderer: the source is the display. The stylesheet keeps its line
+               breaks with white-space: pre-wrap, and interpolation escapes it. -->
+          <span class="ngx-field__value ngx-field__markdown--source" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value }}</span>
+        }
+      } @else {
+        <div class="ngx-field__markdown-editor">
+          @if (canPreview) {
+            <div class="ngx-field__markdown-tabs" role="group" [attr.aria-label]="label + ' editor mode'">
+              <button
+                type="button"
+                class="ngx-field__markdown-tab"
+                [attr.data-testid]="'field-' + field.id + '-write'"
+                [attr.aria-pressed]="!previewing()"
+                (click)="previewing.set(false)"
+              >
+                Write
+              </button>
+              <button
+                type="button"
+                class="ngx-field__markdown-tab"
+                [attr.data-testid]="'field-' + field.id + '-preview'"
+                [attr.aria-pressed]="previewing()"
+                (click)="previewing.set(true)"
+              >
+                Preview
+              </button>
+            </div>
+          }
+
+          @if (previewing()) {
+            <div class="ngx-field__markdown ngx-field__markdown--preview" [attr.data-testid]="'field-' + field.id + '-preview-body'" [innerHTML]="rendered()"></div>
+          } @else {
+            <textarea
+              [id]="field.id"
+              class="ngx-field__input ngx-field__input--markdown"
+              [attr.data-testid]="'field-' + field.id + '-input'"
+              [formControl]="$any(control)"
+              [placeholder]="placeholder"
+              [attr.disabled]="field.disabled ? true : null"
+              rows="6"
+            ></textarea>
+          }
+        </div>
+
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</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.22", ngImport: i0, type: MarkdownFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'ngx-markdown-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div
+      class="ngx-field ngx-field--markdown"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
+
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        @if (rendered(); as html) {
+          <div class="ngx-field__value ngx-field__markdown" [attr.data-testid]="'field-' + field.id + '-value'" [innerHTML]="html"></div>
+        } @else {
+          <!-- No renderer: the source is the display. The stylesheet keeps its line
+               breaks with white-space: pre-wrap, and interpolation escapes it. -->
+          <span class="ngx-field__value ngx-field__markdown--source" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value }}</span>
+        }
+      } @else {
+        <div class="ngx-field__markdown-editor">
+          @if (canPreview) {
+            <div class="ngx-field__markdown-tabs" role="group" [attr.aria-label]="label + ' editor mode'">
+              <button
+                type="button"
+                class="ngx-field__markdown-tab"
+                [attr.data-testid]="'field-' + field.id + '-write'"
+                [attr.aria-pressed]="!previewing()"
+                (click)="previewing.set(false)"
+              >
+                Write
+              </button>
+              <button
+                type="button"
+                class="ngx-field__markdown-tab"
+                [attr.data-testid]="'field-' + field.id + '-preview'"
+                [attr.aria-pressed]="previewing()"
+                (click)="previewing.set(true)"
+              >
+                Preview
+              </button>
+            </div>
+          }
+
+          @if (previewing()) {
+            <div class="ngx-field__markdown ngx-field__markdown--preview" [attr.data-testid]="'field-' + field.id + '-preview-body'" [innerHTML]="rendered()"></div>
+          } @else {
+            <textarea
+              [id]="field.id"
+              class="ngx-field__input ngx-field__input--markdown"
+              [attr.data-testid]="'field-' + field.id + '-input'"
+              [formControl]="$any(control)"
+              [placeholder]="placeholder"
+              [attr.disabled]="field.disabled ? true : null"
+              rows="6"
+            ></textarea>
+          }
+        </div>
+
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
 class NumberFieldComponent {
     messages = inject(ValidationMessagesService);
     field;
@@ -1017,12 +1263,12 @@ class DateFieldComponent {
     formatDate(value) {
         if (!value)
             return '—';
-        try {
-            return new Date(value).toLocaleDateString();
-        }
-        catch {
-            return value;
-        }
+        // `new Date('nonsense')` does not throw and `toLocaleDateString()` returns the *string*
+        // "Invalid Date", so the try/catch this replaced never fired and readers saw that text
+        // instead of their data. Records outlive schemas — a field retyped from text to date can
+        // hold anything — so an unparseable value is shown as stored.
+        const parsed = new Date(value);
+        return Number.isNaN(parsed.getTime()) ? value : parsed.toLocaleDateString();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DateFieldComponent, isStandalone: true, selector: "ngx-date-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -1910,7 +2156,11 @@ class RadioFieldComponent {
      * into an id attribute.
      */
     getRadioId(option) {
-        const text = String(this.getOptVal(option) ?? 'opt');
+        // `??` cannot fire here: `resolveOptionValue` returns '' for an empty option, not null,
+        // so every valueless option produced the same id — and duplicate ids break the `for`
+        // that ties each label to its input.
+        const raw = String(this.getOptVal(option) ?? '').trim();
+        const text = raw || 'opt';
         return `${this.field.id}-${text.trim().replace(/\s+/g, '_').toLowerCase()}`;
     }
     getOptVal(option) {
@@ -3694,6 +3944,7 @@ function builtInFieldTypes() {
     return {
         text: TextFieldComponent,
         textarea: TextareaFieldComponent,
+        markdown: MarkdownFieldComponent,
         number: NumberFieldComponent,
         currency: CurrencyFieldComponent,
         email: EmailFieldComponent,
@@ -4086,11 +4337,50 @@ class DynamicFormComponent {
         }
         if (changes['config'] || changes['initialData']) {
             this.buildForm();
-            if (this.visibleTabs.length > 0 && !this.activeTab()) {
-                this.setActiveTab(this.visibleTabs[0].id);
+            // Clear *before* the guard below, not after it.
+            //
+            // The reset used to sit behind `if (visibleTabs.length === 0) return`, so a swap that
+            // arrived while no tab was visible — a config still being applied, or every tab hidden
+            // by a rule at that instant — skipped it entirely and the previous record's tab
+            // survived into the next one. Clearing is unconditional and cheap, and safe on its own
+            // because `activeTabConfig` already falls back to the first visible tab when nothing
+            // is selected. Selecting the tab is what needs tabs to exist; forgetting the old one
+            // does not.
+            if (changes['config'] || this.isRecordSwap(changes['initialData'])) {
+                this.activeTab.set('');
+                this.activeSubTab.set('');
+            }
+            if (this.visibleTabs.length === 0)
+                return;
+            // The first tab used to be chosen only when no tab was active yet, and nothing ever
+            // cleared `activeTab` — so a form that stays mounted while `initialData` is swapped
+            // opened the next record on the tab the previous one was left on. The demo escaped it
+            // by destroying the form between records; a host that keeps it mounted did not.
+            //
+            // Resetting here is consistent with what already happens: `buildForm` assigns a brand
+            // new FormGroup, so a changed `initialData` has already discarded every control and
+            // all validation state. The tab was the one thing pretending nothing had changed.
+            if (!this.activeTab()) {
+                // No focus steal: the panel gains focus when a *user* picks a tab, not when a host
+                // swaps the record underneath them.
+                this.setActiveTab(this.visibleTabs[0].id, { focusPanel: false });
             }
         }
     }
+    /**
+     * 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.
+     */
+    isRecordSwap(change) {
+        if (!change || change.isFirstChange())
+            return false;
+        const empty = (v) => v === null || v === undefined || (typeof v === 'object' && Object.keys(v).length === 0);
+        return !(empty(change.previousValue) && empty(change.currentValue));
+    }
     ngOnDestroy() {
         this.valueSub?.unsubscribe();
         this.statusSub?.unsubscribe();
@@ -5371,5 +5661,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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 };
 //# sourceMappingURL=ngx-dynamic-entity.mjs.map