@ng-forge/dynamic-forms 0.10.0-next.1 → 0.10.0-next.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/{ng-forge-dynamic-forms-array-field.component-GiaVHO9N.mjs → ng-forge-dynamic-forms-array-field.component-PPh_uVVh.mjs} +99 -476
- package/fesm2022/ng-forge-dynamic-forms-array-field.component-PPh_uVVh.mjs.map +1 -0
- package/fesm2022/{ng-forge-dynamic-forms-container-field.component-C554hOxN.mjs → ng-forge-dynamic-forms-container-field.component-3dZDF3kh.mjs} +3 -14
- package/fesm2022/ng-forge-dynamic-forms-container-field.component-3dZDF3kh.mjs.map +1 -0
- package/fesm2022/ng-forge-dynamic-forms-container-utils-B7kCznbc.mjs +23 -0
- package/fesm2022/ng-forge-dynamic-forms-container-utils-B7kCznbc.mjs.map +1 -0
- package/fesm2022/{ng-forge-dynamic-forms-css-wrapper.component-CnJgFWLB.mjs → ng-forge-dynamic-forms-css-wrapper.component-DtWBauY3.mjs} +2 -22
- package/fesm2022/ng-forge-dynamic-forms-css-wrapper.component-DtWBauY3.mjs.map +1 -0
- package/fesm2022/ng-forge-dynamic-forms-emit-initialization-CbY8WZZB.mjs +17 -0
- package/fesm2022/ng-forge-dynamic-forms-emit-initialization-CbY8WZZB.mjs.map +1 -0
- package/fesm2022/{ng-forge-dynamic-forms-group-field.component-BJ8j7Sh0.mjs → ng-forge-dynamic-forms-group-field.component-Dr8Z628-.mjs} +15 -63
- package/fesm2022/ng-forge-dynamic-forms-group-field.component-Dr8Z628-.mjs.map +1 -0
- package/fesm2022/ng-forge-dynamic-forms-integration.mjs +72 -844
- package/fesm2022/ng-forge-dynamic-forms-integration.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ng-forge-dynamic-forms-ww_BnAt_.mjs +10765 -0
- package/fesm2022/ng-forge-dynamic-forms-ng-forge-dynamic-forms-ww_BnAt_.mjs.map +1 -0
- package/fesm2022/{ng-forge-dynamic-forms-page-field.component-Bz2RpleR.mjs → ng-forge-dynamic-forms-page-field.component-DoGKs3LN.mjs} +10 -38
- package/fesm2022/ng-forge-dynamic-forms-page-field.component-DoGKs3LN.mjs.map +1 -0
- package/fesm2022/ng-forge-dynamic-forms-row-wrapper.component-CFtnatYj.mjs +1 -17
- package/fesm2022/ng-forge-dynamic-forms-row-wrapper.component-CFtnatYj.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-schema.mjs +0 -73
- package/fesm2022/ng-forge-dynamic-forms-schema.mjs.map +1 -1
- package/fesm2022/{ng-forge-dynamic-forms-text-field.component-BGw6T-4h.mjs → ng-forge-dynamic-forms-text-field.component-C3TPVvj_.mjs} +2 -2
- package/fesm2022/{ng-forge-dynamic-forms-text-field.component-BGw6T-4h.mjs.map → ng-forge-dynamic-forms-text-field.component-C3TPVvj_.mjs.map} +1 -1
- package/fesm2022/ng-forge-dynamic-forms.mjs +1 -1
- package/package.json +1 -1
- package/fesm2022/ng-forge-dynamic-forms-array-field.component-GiaVHO9N.mjs.map +0 -1
- package/fesm2022/ng-forge-dynamic-forms-container-field.component-C554hOxN.mjs.map +0 -1
- package/fesm2022/ng-forge-dynamic-forms-container-utils-BS4d0cCk.mjs +0 -48
- package/fesm2022/ng-forge-dynamic-forms-container-utils-BS4d0cCk.mjs.map +0 -1
- package/fesm2022/ng-forge-dynamic-forms-css-wrapper.component-CnJgFWLB.mjs.map +0 -1
- package/fesm2022/ng-forge-dynamic-forms-emit-initialization-3PyXVwsn.mjs +0 -29
- package/fesm2022/ng-forge-dynamic-forms-emit-initialization-3PyXVwsn.mjs.map +0 -1
- package/fesm2022/ng-forge-dynamic-forms-group-field.component-BJ8j7Sh0.mjs.map +0 -1
- package/fesm2022/ng-forge-dynamic-forms-ng-forge-dynamic-forms--PuL0AKc.mjs +0 -18773
- package/fesm2022/ng-forge-dynamic-forms-ng-forge-dynamic-forms--PuL0AKc.mjs.map +0 -1
- package/fesm2022/ng-forge-dynamic-forms-page-field.component-Bz2RpleR.mjs.map +0 -1
|
@@ -1,52 +1,30 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { inject, DestroyRef, Injector, EnvironmentInjector, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import { ao as injectFieldRegistry, E as EventBus, s as DynamicFormLogger, b2 as validatePageNesting, aa as derivedFromDeferred, a4 as createFieldResolutionPipe, o as DfFieldOutlet } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms
|
|
3
|
+
import { ao as injectFieldRegistry, E as EventBus, s as DynamicFormLogger, b2 as validatePageNesting, aa as derivedFromDeferred, a4 as createFieldResolutionPipe, o as DfFieldOutlet } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-ww_BnAt_.mjs';
|
|
4
4
|
import { outputFromObservable } from '@angular/core/rxjs-interop';
|
|
5
5
|
import { explicitEffect } from 'ngxtension/explicit-effect';
|
|
6
|
-
import { c as computeContainerHostClasses, s as setupContainerInitEffect } from './ng-forge-dynamic-forms-container-utils-
|
|
6
|
+
import { c as computeContainerHostClasses, s as setupContainerInitEffect } from './ng-forge-dynamic-forms-container-utils-B7kCznbc.mjs';
|
|
7
7
|
|
|
8
|
-
/**
|
|
9
|
-
* Renders a single page in multi-page (wizard) forms.
|
|
10
|
-
*
|
|
11
|
-
* Visibility is controlled by the PageOrchestrator via the isVisible input.
|
|
12
|
-
* Pages cannot be nested within other pages - validation prevents this.
|
|
13
|
-
* Field values are flattened into the parent form (no nesting under page key).
|
|
14
|
-
*/
|
|
15
8
|
class PageFieldComponent {
|
|
16
|
-
|
|
17
|
-
// Dependencies
|
|
18
|
-
// ─────────────────────────────────────────────────────────────────────────────
|
|
19
|
-
destroyRef = inject(DestroyRef);
|
|
9
|
+
destroyRef = inject(DestroyRef);
|
|
20
10
|
fieldRegistry = injectFieldRegistry();
|
|
21
11
|
injector = inject(Injector);
|
|
22
12
|
environmentInjector = inject(EnvironmentInjector);
|
|
23
13
|
eventBus = inject(EventBus);
|
|
24
14
|
logger = inject(DynamicFormLogger);
|
|
25
|
-
|
|
26
|
-
// Inputs
|
|
27
|
-
// ─────────────────────────────────────────────────────────────────────────────
|
|
28
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
15
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
29
16
|
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
30
17
|
className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
|
|
31
18
|
pageIndex = input.required(...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
|
|
32
19
|
isVisible = input.required(...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
|
|
33
|
-
|
|
34
|
-
// Computed Signals
|
|
35
|
-
// ─────────────────────────────────────────────────────────────────────────────
|
|
36
|
-
hostClasses = computed(() => computeContainerHostClasses('page-field', this.className()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
20
|
+
hostClasses = computed(() => computeContainerHostClasses('page-field', this.className()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
37
21
|
disabled = computed(() => this.field().disabled || false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
38
22
|
isValid = computed(() => validatePageNesting(this.field()), ...(ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []));
|
|
39
23
|
rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : /* istanbul ignore next */ []));
|
|
40
|
-
|
|
41
|
-
// Outputs
|
|
42
|
-
// ─────────────────────────────────────────────────────────────────────────────
|
|
43
|
-
nextPage = outputFromObservable(this.eventBus.on('next-page'));
|
|
24
|
+
nextPage = outputFromObservable(this.eventBus.on('next-page'));
|
|
44
25
|
previousPage = outputFromObservable(this.eventBus.on('previous-page'));
|
|
45
26
|
pageChange = outputFromObservable(this.eventBus.on('page-change'));
|
|
46
|
-
|
|
47
|
-
// Field Resolution
|
|
48
|
-
// ─────────────────────────────────────────────────────────────────────────────
|
|
49
|
-
fieldsSource = computed(() => {
|
|
27
|
+
fieldsSource = computed(() => {
|
|
50
28
|
if (!this.isValid()) {
|
|
51
29
|
return [];
|
|
52
30
|
}
|
|
@@ -63,16 +41,10 @@ class PageFieldComponent {
|
|
|
63
41
|
`within page '${this.field().key}'. Ensure the field type is registered in your field registry.`, error);
|
|
64
42
|
},
|
|
65
43
|
})), { initialValue: [], injector: this.injector });
|
|
66
|
-
|
|
67
|
-
// Constructor
|
|
68
|
-
// ─────────────────────────────────────────────────────────────────────────────
|
|
69
|
-
constructor() {
|
|
44
|
+
constructor() {
|
|
70
45
|
this.setupEffects();
|
|
71
46
|
}
|
|
72
|
-
|
|
73
|
-
// Private Methods
|
|
74
|
-
// ─────────────────────────────────────────────────────────────────────────────
|
|
75
|
-
setupEffects() {
|
|
47
|
+
setupEffects() {
|
|
76
48
|
setupContainerInitEffect(this.resolvedFields, this.eventBus, 'page', () => this.field().key, this.injector);
|
|
77
49
|
explicitEffect([this.isValid, this.field], ([valid, pageField]) => {
|
|
78
50
|
if (!valid) {
|
|
@@ -111,4 +83,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
111
83
|
}], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: true }] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: true }] }], nextPage: [{ type: i0.Output, args: ["nextPage"] }], previousPage: [{ type: i0.Output, args: ["previousPage"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
|
|
112
84
|
|
|
113
85
|
export { PageFieldComponent as default };
|
|
114
|
-
//# sourceMappingURL=ng-forge-dynamic-forms-page-field.component-
|
|
86
|
+
//# sourceMappingURL=ng-forge-dynamic-forms-page-field.component-DoGKs3LN.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ng-forge-dynamic-forms-page-field.component-DoGKs3LN.mjs","mappings":";;;;;;;AA4Cc;YAKK;;AAEA;AACE;AACF;AACA;YAMjB;AACA;;AAEA;AACA;YAMS;AAEA;AAEA;AAEQ;YAMR;AACA;AACA;YAMQ;AACf;AACE;;;AAGJ;AAEmB;AAGf;AACA;;;AAGA;AACE;;;;AAOH;YAQH;;;;;AAWE;;;;;AAQA;;;AA/FiB;;;;;;AAdlB;;;;AARS;;;;;;;AAWR;AACA;AACA;AACA;AACA;AACA;AACA;AACA","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms/src/lib/fields/page/page-field.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, DestroyRef, EnvironmentInjector, inject, Injector, input } from '@angular/core';\nimport { DfFieldOutlet } from '../../directives/df-field-outlet/df-field-outlet.directive';\nimport { outputFromObservable } from '@angular/core/rxjs-interop';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { derivedFromDeferred } from '../../utils/derived-from-deferred/derived-from-deferred';\nimport { createFieldResolutionPipe, ResolvedField } from '../../utils/resolve-field/resolve-field';\nimport { computeContainerHostClasses, setupContainerInitEffect } from '../../utils/container-utils/container-utils';\nimport { PageField, validatePageNesting } from '../../definitions/default/page-field';\nimport { injectFieldRegistry } from '../../utils/inject-field-registry/inject-field-registry';\nimport { EventBus } from '../../events/event.bus';\nimport { NextPageEvent, PageChangeEvent, PreviousPageEvent } from '../../events/constants';\nimport { FieldDef } from '../../definitions/base/field-def';\nimport { DynamicFormLogger } from '../../providers/features/logger/logger.token';\n\n/**\n * Renders a single page in multi-page (wizard) forms.\n *\n * Visibility is controlled by the PageOrchestrator via the isVisible input.\n * Pages cannot be nested within other pages - validation prevents this.\n * Field values are flattened into the parent form (no nesting under page key).\n */\n@Component({\n selector: 'section[page-field]',\n imports: [DfFieldOutlet],\n template: `\n @for (field of resolvedFields(); track field.key) {\n @if (!field.hidden()) {\n <ng-container *dfFieldOutlet=\"field; environmentInjector: environmentInjector\" />\n }\n }\n `,\n styleUrl: './page-field.component.scss',\n host: {\n '[class]': 'hostClasses()',\n '[class.disabled]': 'disabled()',\n '[class.df-page-visible]': 'isVisible()',\n '[class.df-page-hidden]': '!isVisible()',\n '[attr.aria-hidden]': '!isVisible()',\n '[attr.data-page-index]': 'pageIndex()',\n '[id]': '`${key()}`',\n '[attr.data-testid]': 'key()',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class PageFieldComponent {\n // ─────────────────────────────────────────────────────────────────────────────\n // Dependencies\n // ─────────────────────────────────────────────────────────────────────────────\n\n private readonly destroyRef = inject(DestroyRef);\n private readonly fieldRegistry = injectFieldRegistry();\n private readonly injector = inject(Injector);\n protected readonly environmentInjector = inject(EnvironmentInjector);\n private readonly eventBus = inject(EventBus);\n private readonly logger = inject(DynamicFormLogger);\n\n // ─────────────────────────────────────────────────────────────────────────────\n // Inputs\n // ─────────────────────────────────────────────────────────────────────────────\n\n field = input.required<PageField>();\n key = input.required<string>();\n className = input<string>();\n pageIndex = input.required<number>();\n isVisible = input.required<boolean>();\n\n // ─────────────────────────────────────────────────────────────────────────────\n // Computed Signals\n // ─────────────────────────────────────────────────────────────────────────────\n\n readonly hostClasses = computed(() => computeContainerHostClasses('page-field', this.className()));\n\n readonly disabled = computed(() => this.field().disabled || false);\n\n readonly isValid = computed(() => validatePageNesting(this.field()));\n\n private readonly rawFieldRegistry = computed(() => this.fieldRegistry.raw);\n\n // ─────────────────────────────────────────────────────────────────────────────\n // Outputs\n // ─────────────────────────────────────────────────────────────────────────────\n\n readonly nextPage = outputFromObservable(this.eventBus.on<NextPageEvent>('next-page'));\n readonly previousPage = outputFromObservable(this.eventBus.on<PreviousPageEvent>('previous-page'));\n readonly pageChange = outputFromObservable(this.eventBus.on<PageChangeEvent>('page-change'));\n\n // ─────────────────────────────────────────────────────────────────────────────\n // Field Resolution\n // ─────────────────────────────────────────────────────────────────────────────\n\n private readonly fieldsSource = computed(() => {\n if (!this.isValid()) {\n return [];\n }\n return this.field().fields || [];\n });\n\n protected readonly resolvedFields = derivedFromDeferred(\n this.fieldsSource,\n createFieldResolutionPipe(() => ({\n loadTypeComponent: (type: string) => this.fieldRegistry.loadTypeComponent(type),\n registry: this.rawFieldRegistry(),\n injector: this.injector,\n destroyRef: this.destroyRef,\n onError: (fieldDef: FieldDef<unknown>, error: unknown) => {\n const fieldKey = fieldDef.key || '<no key>';\n this.logger.error(\n `Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}) ` +\n `within page '${this.field().key}'. Ensure the field type is registered in your field registry.`,\n error,\n );\n },\n })),\n { initialValue: [] as ResolvedField[], injector: this.injector },\n );\n\n // ─────────────────────────────────────────────────────────────────────────────\n // Constructor\n // ─────────────────────────────────────────────────────────────────────────────\n\n constructor() {\n this.setupEffects();\n }\n\n // ─────────────────────────────────────────────────────────────────────────────\n // Private Methods\n // ─────────────────────────────────────────────────────────────────────────────\n\n private setupEffects(): void {\n setupContainerInitEffect(this.resolvedFields, this.eventBus, 'page', () => this.field().key, this.injector);\n\n explicitEffect([this.isValid, this.field], ([valid, pageField]) => {\n if (!valid) {\n this.logger.error(\n `Invalid configuration: Page '${pageField.key}' contains nested page fields. ` +\n `Pages cannot contain other pages. Consider using groups or rows for nested structure.`,\n pageField,\n );\n }\n });\n }\n}\n"]}
|
|
@@ -1,25 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { viewChild, ViewContainerRef, input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
|
|
4
|
-
/**
|
|
5
|
-
* Built-in row wrapper component.
|
|
6
|
-
*
|
|
7
|
-
* Applies the grid/flex layout that `{ type: 'row' }` fields historically rendered.
|
|
8
|
-
* The `rowFieldMapper` synthesizes a `{ type: 'row' }` wrapper into the container
|
|
9
|
-
* field so the user-facing config stays `{ type: 'row', fields: [...] }` while the
|
|
10
|
-
* runtime uses the container + wrapper pipeline.
|
|
11
|
-
*
|
|
12
|
-
* Children use the shared `df-col-1`..`df-col-12` utilities on their own `col`
|
|
13
|
-
* property to size within the flex row.
|
|
14
|
-
*/
|
|
15
4
|
class RowWrapperComponent {
|
|
16
5
|
fieldComponent = viewChild.required('fieldComponent', { read: ViewContainerRef });
|
|
17
|
-
|
|
18
|
-
* Mapper outputs for the wrapped field.
|
|
19
|
-
* The row wrapper itself does not consume these — the input is accepted
|
|
20
|
-
* for contract consistency so the outlet can set it on any wrapper.
|
|
21
|
-
*/
|
|
22
|
-
fieldInputs = input(...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
|
|
6
|
+
fieldInputs = input(...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
|
|
23
7
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RowWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
24
8
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: RowWrapperComponent, isStandalone: true, selector: "df-row-wrapper", inputs: { fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "df-field df-row" }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `<ng-container #fieldComponent></ng-container>`, isInline: true, styles: [".df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap, .5rem);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-sm, .5rem)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns, 12),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-md, .5rem)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-lg, .5rem)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-xl, .5rem)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-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}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{display:flex;flex-wrap:wrap;gap:var(--df-grid-gap, .5rem);align-items:flex-start;width:100%}:host ::ng-deep>*:not([class*=df-col-]){flex:0 0 auto}:host ::ng-deep>.df-col-1{flex:0 0 calc(8.3333333333% - var(--df-grid-gap, .5rem) * .9166666667);max-width:calc(8.3333333333% - var(--df-grid-gap, .5rem) * .9166666667)}:host ::ng-deep>.df-col-2{flex:0 0 calc(16.6666666667% - var(--df-grid-gap, .5rem) * .8333333333);max-width:calc(16.6666666667% - var(--df-grid-gap, .5rem) * .8333333333)}:host ::ng-deep>.df-col-3{flex:0 0 calc(25% - var(--df-grid-gap, .5rem) * .75);max-width:calc(25% - var(--df-grid-gap, .5rem) * .75)}:host ::ng-deep>.df-col-4{flex:0 0 calc(33.3333333333% - var(--df-grid-gap, .5rem) * .6666666667);max-width:calc(33.3333333333% - var(--df-grid-gap, .5rem) * .6666666667)}:host ::ng-deep>.df-col-5{flex:0 0 calc(41.6666666667% - var(--df-grid-gap, .5rem) * .5833333333);max-width:calc(41.6666666667% - var(--df-grid-gap, .5rem) * .5833333333)}:host ::ng-deep>.df-col-6{flex:0 0 calc(50% - var(--df-grid-gap, .5rem) * .5);max-width:calc(50% - var(--df-grid-gap, .5rem) * .5)}:host ::ng-deep>.df-col-7{flex:0 0 calc(58.3333333333% - var(--df-grid-gap, .5rem) * .4166666667);max-width:calc(58.3333333333% - var(--df-grid-gap, .5rem) * .4166666667)}:host ::ng-deep>.df-col-8{flex:0 0 calc(66.6666666667% - var(--df-grid-gap, .5rem) * .3333333333);max-width:calc(66.6666666667% - var(--df-grid-gap, .5rem) * .3333333333)}:host ::ng-deep>.df-col-9{flex:0 0 calc(75% - var(--df-grid-gap, .5rem) * .25);max-width:calc(75% - var(--df-grid-gap, .5rem) * .25)}:host ::ng-deep>.df-col-10{flex:0 0 calc(83.3333333333% - var(--df-grid-gap, .5rem) * .1666666667);max-width:calc(83.3333333333% - var(--df-grid-gap, .5rem) * .1666666667)}:host ::ng-deep>.df-col-11{flex:0 0 calc(91.6666666667% - var(--df-grid-gap, .5rem) * .0833333333);max-width:calc(91.6666666667% - var(--df-grid-gap, .5rem) * .0833333333)}:host ::ng-deep>.df-col-12{flex:0 0 calc(100% - var(--df-grid-gap, .5rem) * 0);max-width:calc(100% - var(--df-grid-gap, .5rem) * 0)}:host-context(.df-gap-custom){--df-grid-gap: var(--df-row-custom-gap, 1rem)}@media(max-width:576px){:host-context(.df-row-mobile-stack) ::ng-deep>*{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:577px)and (max-width:768px){:host-context(.df-row-tablet-2col) ::ng-deep>*{flex:0 0 calc(50% - var(--df-grid-gap, .5rem) / 2);max-width:calc(50% - var(--df-grid-gap, .5rem) / 2)}}@media(max-width:576px){:host ::ng-deep>*{flex:0 0 100%!important;max-width:100%!important}:host-context(.df-row-mobile-keep-cols){flex-direction:row}:host-context(.df-row-mobile-keep-cols) ::ng-deep>*:not([class*=df-col-]){flex:0 0 auto!important;max-width:none!important}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
25
9
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-forge-dynamic-forms-row-wrapper.component-CFtnatYj.mjs","sources":["../../../../packages/dynamic-forms/src/lib/wrappers/row/row-wrapper.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, ViewContainerRef, viewChild } from '@angular/core';\nimport { FieldWrapper } from '../../models/wrapper-type';\nimport { WrapperFieldInputs } from '../wrapper-field-inputs';\n\n/**\n * Built-in row wrapper component.\n *\n * Applies the grid/flex layout that `{ type: 'row' }` fields historically rendered.\n * The `rowFieldMapper` synthesizes a `{ type: 'row' }` wrapper into the container\n * field so the user-facing config stays `{ type: 'row', fields: [...] }` while the\n * runtime uses the container + wrapper pipeline.\n *\n * Children use the shared `df-col-1`..`df-col-12` utilities on their own `col`\n * property to size within the flex row.\n */\n@Component({\n selector: 'df-row-wrapper',\n template: `<ng-container #fieldComponent></ng-container>`,\n styleUrl: './row-wrapper.component.scss',\n host: {\n class: 'df-field df-row',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class RowWrapperComponent implements FieldWrapper {\n readonly fieldComponent = viewChild.required('fieldComponent', { read: ViewContainerRef });\n\n /**\n * Mapper outputs for the wrapped field.\n * The row wrapper itself does not consume these — the input is accepted\n * for contract consistency so the outlet can set it on any wrapper.\n */\n readonly fieldInputs = input<WrapperFieldInputs>();\n}\n\nexport { RowWrapperComponent };\n"]
|
|
1
|
+
{"version":3,"file":"ng-forge-dynamic-forms-row-wrapper.component-CFtnatYj.mjs","mappings":";;;AAwBc;AACH;AAET;;;;;;;AAPE;;AAK2C","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms/src/lib/wrappers/row/row-wrapper.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, ViewContainerRef, viewChild } from '@angular/core';\nimport { FieldWrapper } from '../../models/wrapper-type';\nimport { WrapperFieldInputs } from '../wrapper-field-inputs';\n\n/**\n * Built-in row wrapper component.\n *\n * Applies the grid/flex layout that `{ type: 'row' }` fields historically rendered.\n * The `rowFieldMapper` synthesizes a `{ type: 'row' }` wrapper into the container\n * field so the user-facing config stays `{ type: 'row', fields: [...] }` while the\n * runtime uses the container + wrapper pipeline.\n *\n * Children use the shared `df-col-1`..`df-col-12` utilities on their own `col`\n * property to size within the flex row.\n */\n@Component({\n selector: 'df-row-wrapper',\n template: `<ng-container #fieldComponent></ng-container>`,\n styleUrl: './row-wrapper.component.scss',\n host: {\n class: 'df-field df-row',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class RowWrapperComponent implements FieldWrapper {\n readonly fieldComponent = viewChild.required('fieldComponent', { read: ViewContainerRef });\n\n /**\n * Mapper outputs for the wrapped field.\n * The row wrapper itself does not consume these — the input is accepted\n * for contract consistency so the outlet can set it on any wrapper.\n */\n readonly fieldInputs = input<WrapperFieldInputs>();\n}\n\nexport { RowWrapperComponent };\n"]}
|
|
@@ -1,69 +1,10 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Internal marker symbol to identify StandardSchemaMarker instances.
|
|
3
|
-
* Uses ɵ prefix following Angular's convention for internal APIs.
|
|
4
|
-
*/
|
|
5
1
|
const STANDARD_SCHEMA_KIND = 'standardSchema';
|
|
6
|
-
/**
|
|
7
|
-
* Wraps a Standard Schema compliant schema for use with dynamic forms.
|
|
8
|
-
*
|
|
9
|
-
* This function creates a marker wrapper around schemas that implement the
|
|
10
|
-
* Standard Schema spec (Zod, Valibot, ArkType, etc.), allowing the dynamic
|
|
11
|
-
* forms system to identify and use them for validation.
|
|
12
|
-
*
|
|
13
|
-
* @typeParam T - The inferred type that the schema validates to
|
|
14
|
-
* @param schema - A schema implementing the Standard Schema V1 spec
|
|
15
|
-
* @returns A wrapped schema marker that can be passed to dynamic form configuration
|
|
16
|
-
*
|
|
17
|
-
* @example
|
|
18
|
-
* ```typescript
|
|
19
|
-
* import { z } from 'zod';
|
|
20
|
-
* import { standardSchema } from '@ng-forge/dynamic-forms/schema';
|
|
21
|
-
*
|
|
22
|
-
* const loginSchema = z.object({
|
|
23
|
-
* email: z.string().email('Invalid email format'),
|
|
24
|
-
* password: z.string().min(8, 'Password must be at least 8 characters'),
|
|
25
|
-
* });
|
|
26
|
-
*
|
|
27
|
-
* // Wrap for use with dynamic forms
|
|
28
|
-
* const formSchema = standardSchema(loginSchema);
|
|
29
|
-
*
|
|
30
|
-
* // Use in form configuration
|
|
31
|
-
* const formConfig = {
|
|
32
|
-
* schema: formSchema,
|
|
33
|
-
* fields: [
|
|
34
|
-
* input({ key: 'email', label: 'Email' }),
|
|
35
|
-
* input({ key: 'password', label: 'Password', props: { type: 'password' } }),
|
|
36
|
-
* ],
|
|
37
|
-
* };
|
|
38
|
-
* ```
|
|
39
|
-
*/
|
|
40
2
|
function standardSchema(schema) {
|
|
41
3
|
return {
|
|
42
4
|
ɵkind: STANDARD_SCHEMA_KIND,
|
|
43
5
|
schema,
|
|
44
6
|
};
|
|
45
7
|
}
|
|
46
|
-
/**
|
|
47
|
-
* Type guard to check if a value is a StandardSchemaMarker.
|
|
48
|
-
*
|
|
49
|
-
* This is useful when processing form configuration to determine if a schema
|
|
50
|
-
* has been provided and should be used for validation.
|
|
51
|
-
*
|
|
52
|
-
* @param value - The value to check
|
|
53
|
-
* @returns True if the value is a StandardSchemaMarker, false otherwise
|
|
54
|
-
*
|
|
55
|
-
* @example
|
|
56
|
-
* ```typescript
|
|
57
|
-
* import { isStandardSchemaMarker } from '@ng-forge/dynamic-forms/schema';
|
|
58
|
-
*
|
|
59
|
-
* function processFormConfig(config: FormConfig) {
|
|
60
|
-
* if (config.schema && isStandardSchemaMarker(config.schema)) {
|
|
61
|
-
* // Use the schema for validation
|
|
62
|
-
* const result = config.schema.schema['~standard'].validate(formValue);
|
|
63
|
-
* }
|
|
64
|
-
* }
|
|
65
|
-
* ```
|
|
66
|
-
*/
|
|
67
8
|
function isStandardSchemaMarker(value) {
|
|
68
9
|
return (typeof value === 'object' &&
|
|
69
10
|
value !== null &&
|
|
@@ -72,21 +13,7 @@ function isStandardSchemaMarker(value) {
|
|
|
72
13
|
'schema' in value);
|
|
73
14
|
}
|
|
74
15
|
|
|
75
|
-
/**
|
|
76
|
-
* @ng-forge/dynamic-forms/schema
|
|
77
|
-
*
|
|
78
|
-
* Schema integration API for using Standard Schema compliant validation libraries
|
|
79
|
-
* (Zod, Valibot, ArkType, etc.) with dynamic forms.
|
|
80
|
-
*
|
|
81
|
-
* This entrypoint provides:
|
|
82
|
-
* - `standardSchema()` - Wrapper function to mark schemas for use with forms
|
|
83
|
-
* - `isStandardSchemaMarker()` - Type guard for schema detection
|
|
84
|
-
* - Type definitions for form schema configuration
|
|
85
|
-
*/
|
|
86
16
|
|
|
87
|
-
/**
|
|
88
|
-
* Generated bundle index. Do not edit.
|
|
89
|
-
*/
|
|
90
17
|
|
|
91
18
|
export { isStandardSchemaMarker, standardSchema };
|
|
92
19
|
//# sourceMappingURL=ng-forge-dynamic-forms-schema.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-forge-dynamic-forms-schema.mjs","
|
|
1
|
+
{"version":3,"file":"ng-forge-dynamic-forms-schema.mjs","mappings":"AAOO;AAiJD;;AAEF;;;AAGJ;AAuBM;AACJ;AAEE;AACA;;;AAIJ","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms/schema/src/standard-schema-marker.ts"],"sourcesContent":["import type { SchemaPath, SchemaPathTree } from '@angular/forms/signals';\nimport type { StandardSchemaV1 } from '@standard-schema/spec';\n\n/**\n * Internal marker symbol to identify StandardSchemaMarker instances.\n * Uses ɵ prefix following Angular's convention for internal APIs.\n */\nexport const STANDARD_SCHEMA_KIND = 'standardSchema' as const;\n\n/**\n * Angular schema callback function type.\n * This is the raw callback that Angular's schema() function accepts.\n *\n * Use this when you want to write Angular schema validation directly\n * without any wrapper. This is ideal for Angular-only projects that\n * want full access to Angular's form validation APIs.\n *\n * @typeParam T - The form value type\n *\n * @example\n * ```typescript\n * import { FormConfig } from '@ng-forge/dynamic-forms';\n * import { validateTree } from '@angular/forms/signals';\n *\n * const config = {\n * // Raw callback - no wrapper needed!\n * schema: (path) => {\n * validateTree(path, (ctx) => {\n * const { password, confirmPassword } = ctx.value();\n * if (password !== confirmPassword) {\n * return [{ kind: 'passwordMismatch', fieldTree: ctx.fieldTreeOf(path).confirmPassword }];\n * }\n * return null;\n * });\n * },\n * fields: [\n * { key: 'password', type: 'input', label: 'Password', required: true },\n * { key: 'confirmPassword', type: 'input', label: 'Confirm', required: true,\n * validationMessages: { passwordMismatch: 'Passwords must match' } },\n * ],\n * } as const satisfies FormConfig;\n * ```\n */\nexport type AngularSchemaCallback<T = unknown> = (path: SchemaPath<T> & SchemaPathTree<T>) => void;\n\n/**\n * Wrapper interface that marks a schema as implementing the Standard Schema spec.\n * This allows the dynamic forms system to identify and use standard-compliant schemas\n * for validation without coupling to any specific schema library.\n *\n * The `out` variance modifier makes this type covariant in T, meaning a\n * StandardSchemaMarker<SpecificType> is assignable to StandardSchemaMarker<BroaderType>.\n * This enables Zod/Valibot schemas to be used with FormConfig's inferred TValue.\n *\n * @typeParam T - The inferred type that the schema validates to (covariant)\n *\n * @example\n * ```typescript\n * import { z } from 'zod';\n * import { standardSchema } from '@ng-forge/dynamic-forms/schema';\n *\n * const userSchema = z.object({\n * name: z.string(),\n * email: z.string().email(),\n * });\n *\n * // Wrap the Zod schema with standardSchema marker\n * const formSchema = standardSchema(userSchema);\n * ```\n */\nexport interface StandardSchemaMarker<out T = unknown> {\n /**\n * Internal marker identifying this as a standard schema wrapper.\n * @internal\n */\n readonly ɵkind: typeof STANDARD_SCHEMA_KIND;\n\n /**\n * The underlying schema that implements the Standard Schema spec.\n */\n readonly schema: StandardSchemaV1<T>;\n}\n\n/**\n * Type alias for form schemas that can be used with dynamic forms.\n * Supports both Standard Schema compliant schemas (Zod, Valibot, ArkType)\n * and raw Angular schema callbacks.\n *\n * The covariance from StandardSchemaMarker flows through, allowing\n * schemas with specific types to be assigned to broader form value types.\n *\n * @typeParam T - The inferred type that the schema validates to\n *\n * @example Standard Schema (Zod)\n * ```typescript\n * import { z } from 'zod';\n * import { standardSchema } from '@ng-forge/dynamic-forms/schema';\n *\n * const config = {\n * schema: standardSchema(z.object({ ... })),\n * fields: [...],\n * };\n * ```\n *\n * @example Angular Schema Callback\n * ```typescript\n * import { validateTree } from '@angular/forms/signals';\n *\n * const config = {\n * schema: (path) => {\n * validateTree(path, (ctx) => { ... });\n * },\n * fields: [...],\n * };\n * ```\n */\nexport type FormSchema<T = unknown> = StandardSchemaMarker<T> | AngularSchemaCallback<T>;\n\n/**\n * Wraps a Standard Schema compliant schema for use with dynamic forms.\n *\n * This function creates a marker wrapper around schemas that implement the\n * Standard Schema spec (Zod, Valibot, ArkType, etc.), allowing the dynamic\n * forms system to identify and use them for validation.\n *\n * @typeParam T - The inferred type that the schema validates to\n * @param schema - A schema implementing the Standard Schema V1 spec\n * @returns A wrapped schema marker that can be passed to dynamic form configuration\n *\n * @example\n * ```typescript\n * import { z } from 'zod';\n * import { standardSchema } from '@ng-forge/dynamic-forms/schema';\n *\n * const loginSchema = z.object({\n * email: z.string().email('Invalid email format'),\n * password: z.string().min(8, 'Password must be at least 8 characters'),\n * });\n *\n * // Wrap for use with dynamic forms\n * const formSchema = standardSchema(loginSchema);\n *\n * // Use in form configuration\n * const formConfig = {\n * schema: formSchema,\n * fields: [\n * input({ key: 'email', label: 'Email' }),\n * input({ key: 'password', label: 'Password', props: { type: 'password' } }),\n * ],\n * };\n * ```\n */\nexport function standardSchema<T>(schema: StandardSchemaV1<T>): StandardSchemaMarker<T> {\n return {\n ɵkind: STANDARD_SCHEMA_KIND,\n schema,\n };\n}\n\n/**\n * Type guard to check if a value is a StandardSchemaMarker.\n *\n * This is useful when processing form configuration to determine if a schema\n * has been provided and should be used for validation.\n *\n * @param value - The value to check\n * @returns True if the value is a StandardSchemaMarker, false otherwise\n *\n * @example\n * ```typescript\n * import { isStandardSchemaMarker } from '@ng-forge/dynamic-forms/schema';\n *\n * function processFormConfig(config: FormConfig) {\n * if (config.schema && isStandardSchemaMarker(config.schema)) {\n * // Use the schema for validation\n * const result = config.schema.schema['~standard'].validate(formValue);\n * }\n * }\n * ```\n */\nexport function isStandardSchemaMarker(value: unknown): value is StandardSchemaMarker {\n return (\n typeof value === 'object' &&\n value !== null &&\n 'ɵkind' in value &&\n (value as StandardSchemaMarker).ɵkind === STANDARD_SCHEMA_KIND &&\n 'schema' in value\n );\n}\n\n/**\n * Extracts the output type from a Standard Schema.\n * Works with Zod, Valibot, ArkType, and other Standard Schema compliant libraries.\n */\nexport type InferSchemaOutput<T> = T extends StandardSchemaV1<infer Output> ? Output : never;\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { AsyncPipe } from '@angular/common';
|
|
4
|
-
import { t as DynamicTextPipe } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms
|
|
4
|
+
import { t as DynamicTextPipe } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-ww_BnAt_.mjs';
|
|
5
5
|
|
|
6
6
|
class TextFieldComponent {
|
|
7
7
|
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
@@ -116,4 +116,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
116
116
|
}], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
|
|
117
117
|
|
|
118
118
|
export { TextFieldComponent as default };
|
|
119
|
-
//# sourceMappingURL=ng-forge-dynamic-forms-text-field.component-
|
|
119
|
+
//# sourceMappingURL=ng-forge-dynamic-forms-text-field.component-C3TPVvj_.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-forge-dynamic-forms-text-field.component-
|
|
1
|
+
{"version":3,"file":"ng-forge-dynamic-forms-text-field.component-C3TPVvj_.mjs","sources":["../../../../packages/dynamic-forms/src/lib/fields/text/text-field.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { AsyncPipe } from '@angular/common';\nimport { DynamicTextPipe } from '../../pipes/dynamic-text/dynamic-text.pipe';\nimport { TextProps } from '../../definitions/default/text-field';\nimport { DynamicText } from '../../models/types/dynamic-text';\n\n@Component({\n selector: 'df-text',\n template: `\n @switch (elementType()) {\n @case ('p') {\n <p class=\"df-text df-text-p\" [class]=\"className() || ''\">\n {{ label() | dynamicText | async }}\n </p>\n }\n @case ('h1') {\n <h1 class=\"df-text df-text-h1\" [class]=\"className() || ''\">\n {{ label() | dynamicText | async }}\n </h1>\n }\n @case ('h2') {\n <h2 class=\"df-text df-text-h2\" [class]=\"className() || ''\">\n {{ label() | dynamicText | async }}\n </h2>\n }\n @case ('h3') {\n <h3 class=\"df-text df-text-h3\" [class]=\"className() || ''\">\n {{ label() | dynamicText | async }}\n </h3>\n }\n @case ('h4') {\n <h4 class=\"df-text df-text-h4\" [class]=\"className() || ''\">\n {{ label() | dynamicText | async }}\n </h4>\n }\n @case ('h5') {\n <h5 class=\"df-text df-text-h5\" [class]=\"className() || ''\">\n {{ label() | dynamicText | async }}\n </h5>\n }\n @case ('h6') {\n <h6 class=\"df-text df-text-h6\" [class]=\"className() || ''\">\n {{ label() | dynamicText | async }}\n </h6>\n }\n @case ('span') {\n <span class=\"df-text df-text-span\" [class]=\"className() || ''\">\n {{ label() | dynamicText | async }}\n </span>\n }\n @default {\n never;\n }\n }\n `,\n styleUrl: './text-field.component.scss',\n imports: [AsyncPipe, DynamicTextPipe],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[id]': '`${key()}`',\n '[attr.data-testid]': 'key()',\n '[attr.hidden]': 'hidden() || null',\n },\n})\nexport default class TextFieldComponent {\n readonly key = input.required<string>();\n readonly label = input.required<DynamicText>();\n readonly className = input<string>();\n readonly tabIndex = input<number>();\n readonly hidden = input<boolean>();\n readonly props = input<TextProps>();\n\n readonly elementType = computed(() => this.props()?.elementType || 'p');\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { A as ADDON_ACTION_HANDLERS, a as ADDON_ACTION_REGISTRY, b as ADDON_KIND_COMPONENT_CACHE, c as ADDON_KIND_DEFINITIONS, d as ADDON_KIND_REGISTRY, e as ARRAY_CONTEXT, f as AppendArrayItemEvent, B as BUILT_IN_FIELDS, h as ComponentAddonComponent, j as ConsoleLogger, D as DEFAULT_PROPS, k as DEFAULT_VALIDATION_MESSAGES, l as DEFAULT_WRAPPERS, m as DF_FIELD_TEMPLATES, n as DfAddonSlot, p as DfTemplate, q as DynamicForm, r as DynamicFormError, s as DynamicFormLogger, t as DynamicTextPipe, E as EventBus, u as EventDispatcher, F as FIELD_REGISTRY, v as FIELD_SIGNAL_CONTEXT, w as FORM_OPTIONS, x as FormClearEvent, y as FormResetEvent, G as GROUP_CONTEXT, I as INITIALIZATION_TIMEOUT_MS, z as InsertArrayItemEvent, M as MoveArrayItemEvent, N as NextPageEvent, H as NoopLogger, P as PageChangeEvent, J as PopArrayItemEvent, K as PrependArrayItemEvent, L as PreviousPageEvent, R as RemoveAtIndexEvent, O as RootFormRegistryService, S as ShiftArrayItemEvent, Q as SubmitEvent, T as TemplateAddonComponent, U as TextAddonComponent, V as WRAPPER_REGISTRY, X as applyMetaToElement, Y as applyValidator, Z as applyValidators, _ as arrayEvent, $ as arrayFieldMapper, a0 as baseFieldMapper, a1 as buildBaseInputs, a2 as containerFieldMapper, a3 as createField, a9 as createWrappers, ab as dynamicTextToObservable, ac as evaluateNonFieldDisabled, ad as evaluateNonFieldHidden, ae as field, af as formConfig, ag as formatAddonWarning, ah as getArrayLength, al as groupFieldMapper, am as hasFormValue, an as injectAddonKindRegistry, ap as injectFieldSignalContext, aq as injectFieldsSupportingAddons, ar as interpolateParams, as as isArrayField, at as isCheckedField, au as isContainerField, av as isContainerTypedField, aw as isDisplayOnlyField, ax as isEqual, ay as isFieldBoundContext, az as isFormStateCondition, aA as isGroupField, aB as isLeafField, aC as isPageField, aD as isRowField, aF as isSimplifiedArrayField, aG as isValueBearingField, aH as isValueField, aI as isWrapperTypeDefinition, aJ as isWrappersBundle, aK as logAddonWarnings, aM as omit, aN as pageFieldMapper, aO as provideAddonActions, aP as provideDynamicForm, aQ as resolveDynamicValue, aR as resolveNextButtonDisabled, aS as resolveNonFieldDisabled, aT as resolveNonFieldHidden, aU as resolveSubmitButtonDisabled, aV as resolveTokens, aX as rowFieldMapper, aY as runPresetAction, aZ as sanitizeFormConfig, a_ as sanitizeFormConfigPure, a$ as textFieldMapper, b0 as toReadonlyFieldTree, b1 as validateFieldAddons, b3 as walkAndValidateAddons, b4 as withCustomAddon, b5 as withEventFormValue, b6 as withLegacyStatusClasses, b7 as withLoggerConfig, b8 as withPreviousValue, b9 as withValidationExecutionDefaults, ba as withValueExclusionDefaults, bb as wrapperProps, bc as writeToFieldValue } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms
|
|
1
|
+
export { A as ADDON_ACTION_HANDLERS, a as ADDON_ACTION_REGISTRY, b as ADDON_KIND_COMPONENT_CACHE, c as ADDON_KIND_DEFINITIONS, d as ADDON_KIND_REGISTRY, e as ARRAY_CONTEXT, f as AppendArrayItemEvent, B as BUILT_IN_FIELDS, h as ComponentAddonComponent, j as ConsoleLogger, D as DEFAULT_PROPS, k as DEFAULT_VALIDATION_MESSAGES, l as DEFAULT_WRAPPERS, m as DF_FIELD_TEMPLATES, n as DfAddonSlot, p as DfTemplate, q as DynamicForm, r as DynamicFormError, s as DynamicFormLogger, t as DynamicTextPipe, E as EventBus, u as EventDispatcher, F as FIELD_REGISTRY, v as FIELD_SIGNAL_CONTEXT, w as FORM_OPTIONS, x as FormClearEvent, y as FormResetEvent, G as GROUP_CONTEXT, I as INITIALIZATION_TIMEOUT_MS, z as InsertArrayItemEvent, M as MoveArrayItemEvent, N as NextPageEvent, H as NoopLogger, P as PageChangeEvent, J as PopArrayItemEvent, K as PrependArrayItemEvent, L as PreviousPageEvent, R as RemoveAtIndexEvent, O as RootFormRegistryService, S as ShiftArrayItemEvent, Q as SubmitEvent, T as TemplateAddonComponent, U as TextAddonComponent, V as WRAPPER_REGISTRY, X as applyMetaToElement, Y as applyValidator, Z as applyValidators, _ as arrayEvent, $ as arrayFieldMapper, a0 as baseFieldMapper, a1 as buildBaseInputs, a2 as containerFieldMapper, a3 as createField, a9 as createWrappers, ab as dynamicTextToObservable, ac as evaluateNonFieldDisabled, ad as evaluateNonFieldHidden, ae as field, af as formConfig, ag as formatAddonWarning, ah as getArrayLength, al as groupFieldMapper, am as hasFormValue, an as injectAddonKindRegistry, ap as injectFieldSignalContext, aq as injectFieldsSupportingAddons, ar as interpolateParams, as as isArrayField, at as isCheckedField, au as isContainerField, av as isContainerTypedField, aw as isDisplayOnlyField, ax as isEqual, ay as isFieldBoundContext, az as isFormStateCondition, aA as isGroupField, aB as isLeafField, aC as isPageField, aD as isRowField, aF as isSimplifiedArrayField, aG as isValueBearingField, aH as isValueField, aI as isWrapperTypeDefinition, aJ as isWrappersBundle, aK as logAddonWarnings, aM as omit, aN as pageFieldMapper, aO as provideAddonActions, aP as provideDynamicForm, aQ as resolveDynamicValue, aR as resolveNextButtonDisabled, aS as resolveNonFieldDisabled, aT as resolveNonFieldHidden, aU as resolveSubmitButtonDisabled, aV as resolveTokens, aX as rowFieldMapper, aY as runPresetAction, aZ as sanitizeFormConfig, a_ as sanitizeFormConfigPure, a$ as textFieldMapper, b0 as toReadonlyFieldTree, b1 as validateFieldAddons, b3 as walkAndValidateAddons, b4 as withCustomAddon, b5 as withEventFormValue, b6 as withLegacyStatusClasses, b7 as withLoggerConfig, b8 as withPreviousValue, b9 as withValidationExecutionDefaults, ba as withValueExclusionDefaults, bb as wrapperProps, bc as writeToFieldValue } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-ww_BnAt_.mjs';
|
|
2
2
|
//# sourceMappingURL=ng-forge-dynamic-forms.mjs.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ng-forge/dynamic-forms",
|
|
3
|
-
"version": "0.10.0-next.
|
|
3
|
+
"version": "0.10.0-next.2",
|
|
4
4
|
"description": "Type-safe, signal-powered dynamic forms for Angular. Build complex forms from configuration with full TypeScript inference.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|