ngx-dynamic-entity 1.6.0 → 1.7.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;
@@ -3694,6 +3940,7 @@ function builtInFieldTypes() {
     return {
         text: TextFieldComponent,
         textarea: TextareaFieldComponent,
+        markdown: MarkdownFieldComponent,
         number: NumberFieldComponent,
         currency: CurrencyFieldComponent,
         email: EmailFieldComponent,
@@ -5371,5 +5618,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