@a.nemreen/dga-dynamic-form 0.1.0

package/README.md

@@ -0,0 +1,93 @@
+# `@a.nemreen/dga-dynamic-form`
+
+Schema-driven dynamic forms for Angular, rendered with [`@a.nemreen/dga-ui`](https://www.npmjs.com/package/@a.nemreen/dga-ui) controls.
+
+Version **0.1.0** — API may move until freeze.
+
+## Install
+
+```bash
+npm install @a.nemreen/dga-dynamic-form @a.nemreen/dga-ui @a.nemreen/dga-tokens @platformscode/icons
+```
+
+**Peers:** `@angular/core` / `common` / `forms` ^19–22, `@a.nemreen/dga-ui` ^0.2, `@a.nemreen/dga-tokens` ^0.2.
+
+## Setup
+
+Provide adapters once in `app.config.ts`:
+
+```ts
+import { provideHttpClient } from '@angular/common/http';
+import { provideDgaDynamicForm } from '@a.nemreen/dga-dynamic-form';
+
+export const appConfig = {
+  providers: [
+    provideHttpClient(),
+    provideDgaDynamicForm({ httpSubmit: true, dgaToast: true }),
+  ],
+};
+```
+
+Ensure Tailwind scans the package:
+
+```css
+@source "../node_modules/@a.nemreen/dga-dynamic-form/**/*.{mjs,js}";
+@source "../node_modules/@a.nemreen/dga-ui/**/*.{mjs,js}";
+```
+
+## Usage
+
+```ts
+import { DgaDynamicForm, type DgaDynamicFormConfig } from '@a.nemreen/dga-dynamic-form';
+
+readonly config: DgaDynamicFormConfig = {
+  emitOnly: true,
+  submitButtonLabel: { en: 'Send', ar: 'إرسال' },
+  fields: [
+    {
+      name: 'fullName',
+      type: 'text',
+      label: { en: 'Full name', ar: 'الاسم الكامل' },
+      required: true,
+      columns: { md: 6 },
+    },
+    {
+      name: 'email',
+      type: 'email',
+      label: { en: 'Email', ar: 'البريد' },
+      required: true,
+      columns: { md: 6 },
+    },
+  ],
+};
+```
+
+```html
+<dga-dynamic-form [config]="config" (formSubmitted)="onSubmit($event)" />
+```
+
+## Adapters
+
+Override via InjectionTokens:
+
+| Token | Role |
+|-------|------|
+| `DGA_LOOKUP_ADAPTER` | Lookup / search options |
+| `DGA_SUBMIT_ADAPTER` | HTTP submit |
+| `DGA_FORM_TOAST_ADAPTER` | Success / error feedback |
+| `DGA_CAPTCHA_ADAPTER` | Optional captcha token |
+| `DGA_FORM_I18N_ADAPTER` | Label resolution |
+| `DGA_DYNAMIC_FORM_FIELD_REGISTRY` | Custom field type → component map |
+
+## Custom field types
+
+```ts
+{
+  provide: DGA_DYNAMIC_FORM_FIELD_REGISTRY,
+  useValue: [{ type: 'nationalId', component: NationalIdField }],
+}
+```
+
+## Built-in field types
+
+`text` · `email` · `textarea` · `number` · `otp` · `phone` · `select` · `multiselect` · `checkbox` · `radio` · `date` · `chips` · `toggle` · `file` · `hidden`

package/fesm2022/a.nemreen-dga-dynamic-form.mjs

@@ -0,0 +1,503 @@
+import*as i from"@angular/core";import{InjectionToken as g,inject as s,Injectable as P,input as u,booleanAttribute as ye,output as S,DestroyRef as E,signal as C,computed as d,ChangeDetectionStrategy as q,Component as z,effect as xe,makeEnvironmentProviders as Se}from"@angular/core";import{NgComponentOutlet as B}from"@angular/common";import{takeUntilDestroyed as _}from"@angular/core/rxjs-interop";import*as p from"@angular/forms";import{Validators as m,ReactiveFormsModule as k,FormsModule as G,FormBuilder as Ce}from"@angular/forms";import{switchMap as $,catchError as Ie,startWith as ke,map as De}from"rxjs/operators";import{DgaField as j,DgaInput as W,DgaSelect as H,DgaCheckbox as K,DgaRadio as U,DgaPhoneInput as Y,DgaDatePicker as J,DgaChipInput as X,DgaSwitch as Z,DgaUpload as Q,DgaNumberInput as ee,DgaOtp as te,DgaButton as oe,DgaStepper as ae,DgaToastService as Oe}from"@a.nemreen/dga-ui";import{of as h}from"rxjs";import{HttpClient as re,HttpHeaders as Le}from"@angular/common/http";const D=new g("DGA_LOOKUP_ADAPTER"),O=new g("DGA_SUBMIT_ADAPTER"),L=new g("DGA_FORM_TOAST_ADAPTER"),T=new g("DGA_CAPTCHA_ADAPTER"),N=new g("DGA_FORM_I18N_ADAPTER"),ne=new g("DGA_DYNAMIC_FORM_FIELD_REGISTRY"),ie=["checkbox","multiselect","chips","file"],Te=["toggle"];function le(a){return a.value!==void 0?a.value:ie.includes(a.type)?[]:Te.includes(a.type)?!1:""}function A(a,e){const t=[],o=a.validation;(e||a.required||o?.required)&&(ie.includes(a.type)?t.push(Ne):a.type==="toggle"?t.push(m.requiredTrue):t.push(m.required)),(a.type==="email"||o?.pattern==="email")&&t.push(m.email);const r=o?.minLength;r!=null&&t.push(m.minLength(r));const n=o?.maxLength??a.maxLength;if(n!=null&&t.push(m.maxLength(n)),o?.pattern&&o.pattern!=="email")try{t.push(m.pattern(o.pattern))}catch{}return o?.min!=null&&t.push(m.min(o.min)),o?.max!=null&&t.push(m.max(o.max)),a.maxChips!=null&&a.type==="chips"&&t.push(Ae(a.maxChips)),t}function Ne(a){const e=a.value;return Array.isArray(e)&&e.length>0?null:{required:!0}}function Ae(a){return e=>{const t=e.value;return Array.isArray(t)&&t.length>a?{maxChips:{max:a,actual:t.length}}:null}}function se(a,e,t=!0){const o=!!e.disabled;return a.control({value:le(e),disabled:o},{validators:A(e,t&&!e.requiredWhen)})}function de(a,e){const t={};for(const o of e){if(o.hidden&&o.type==="hidden"){t[o.name]=a.control(o.value??"");continue}t[o.name]=se(a,o)}return a.group(t)}function ce(a,e){return e?.length?e.flatMap(t=>t.fields):a}function ue(a,e,t){a.setValidators(A(e,t)),a.updateValueAndValidity({emitEvent:!1})}function F(a,e){return Array.isArray(a)?a.some(t=>t==e):a==e}function w(a,e,t){return a?[...t??[],...a.options??[],...a.groupedOptions?.flatMap(r=>r.options)??[]].find(r=>r.value==e):void 0}function M(a,e,t){if(a.hidden&&a.type!=="hidden"||a.type==="hidden")return!1;if(!a.dependsOn)return!0;const o=e[a.dependsOn];if(a.showOnValues?.length&&!a.showOnValues.some(r=>F(o,r)))return!1;if(a.showWhenOptionProperty){const r=t?.(a.dependsOn),n=w({name:a.dependsOn,type:"select",label:{en:"",ar:""}},o,r),l=a.showWhenOptionProperty.property;if(!n||n[l]!==a.showWhenOptionProperty.value)return!1}return!(!a.showOnValues?.length&&!a.showWhenOptionProperty&&(o==null||o===""||Array.isArray(o)&&o.length===0))}function V(a,e,t){const o=a.requiredWhen;if(!o)return!!a.required;const r=e[o.field];if(o.optionProperty!=null){const n=t?.(o.field),l=w({name:o.field,type:"select",label:{en:"",ar:""}},r,n);return!!l&&l[o.optionProperty]===o.optionPropertyValue}return o.values?.length?o.values.some(n=>F(r,n)):o.value!==void 0?F(r,o.value):r!=null&&r!==""}class v{submitAdapter=s(O,{optional:!0});captcha=s(T,{optional:!0});buildPayload(e,t,o){const r=new Set(o.filter(l=>l.excludeFromPayload).map(l=>l.name));let n={};for(const[l,x]of Object.entries(t)){if(r.has(l))continue;const c=e.fieldMapping?.[l]??l;n[c]=x}return e.payloadTransformer?e.payloadTransformer(n):n}hasFileValues(e){return Object.values(e).some(t=>t instanceof File||Array.isArray(t)&&t.some(o=>o instanceof File||o?.file instanceof File))}toFormData(e){const t=new FormData;for(const[o,r]of Object.entries(e))if(r!=null)if(r instanceof File)t.append(o,r);else if(Array.isArray(r))for(const n of r)n instanceof File?t.append(o,n):n?.file instanceof File?t.append(o,n.file,n.name):t.append(o,typeof n=="string"?n:JSON.stringify(n));else typeof r=="object"?t.append(o,JSON.stringify(r)):t.append(o,String(r));return t}submitForm(e,t,o){if(!e.endpoint||!this.submitAdapter)return h(t);const r=this.buildPayload(e,t,o),n=r instanceof FormData?r:this.hasFileValues(r)?this.toFormData(r):r,l={};return e.idempotencyKey&&(l["Idempotency-Key"]=e.idempotencyKey),(this.captcha?.getToken("submit")??h(null)).pipe($(c=>(c&&(l["X-Recaptcha-Token"]=c),h({endpoint:e.endpoint,method:e.method??"POST",body:n,headers:l})))).pipe($(c=>this.submitAdapter.submit(c)),Ie(c=>{throw c}))}saveDraft(e,t){typeof localStorage>"u"||localStorage.setItem(this.storageKey(e),JSON.stringify(t))}loadDraft(e){if(typeof localStorage>"u")return null;const t=localStorage.getItem(this.storageKey(e));if(!t)return null;try{return JSON.parse(t)}catch{return null}}clearDraft(e){typeof localStorage>"u"||localStorage.removeItem(this.storageKey(e))}storageKey(e){return`dga-dynamic-form:${e}`}static \u0275fac=i.\u0275\u0275ngDeclareFactory({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:v,deps:[],target:i.\u0275\u0275FactoryTarget.Injectable});static \u0275prov=i.\u0275\u0275ngDeclareInjectable({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:v,providedIn:"root"})}i.\u0275\u0275ngDeclareClassMetadata({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:v,decorators:[{type:P,args:[{providedIn:"root"}]}]});function b(a,e,t=""){return a?e==="en"?a.en||a.ar:a.ar||a.en:t}function pe(){return typeof document>"u"?"ar":(document.documentElement.lang||"ar").toLowerCase().startsWith("en")?"en":"ar"}class y{extras=s(ne,{optional:!0});map=new Map;constructor(){for(const e of this.extras??[])this.register(e)}register(e){this.map.set(e.type,e.component)}get(e){return this.map.get(e)??null}hasCustom(e){return this.map.has(e)}isBuiltIn(e){return Fe.has(e)}static \u0275fac=i.\u0275\u0275ngDeclareFactory({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:y,deps:[],target:i.\u0275\u0275FactoryTarget.Injectable});static \u0275prov=i.\u0275\u0275ngDeclareInjectable({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:y,providedIn:"root"})}i.\u0275\u0275ngDeclareClassMetadata({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:y,decorators:[{type:P,args:[{providedIn:"root"}]}],ctorParameters:()=>[]});const Fe=new Set(["text","email","textarea","select","multiselect","checkbox","radio","phone","file","date","chips","toggle","hidden","number","otp"]);class f{field=u.required(...ngDevMode?[{debugName:"field"}]:[]);form=u.required(...ngDevMode?[{debugName:"form"}]:[]);locale=u("ar",...ngDevMode?[{debugName:"locale"}]:[]);required=u(!1,{...ngDevMode?{debugName:"required"}:{},transform:ye});error=u("",...ngDevMode?[{debugName:"error"}]:[]);runtimeOptions=u([],...ngDevMode?[{debugName:"runtimeOptions"}]:[]);optionsLoaded=S();lookup=s(D,{optional:!0});destroyRef=s(E);loadedOptions=C([],...ngDevMode?[{debugName:"loadedOptions"}]:[]);controlId=`dga-df-${Math.random().toString(36).slice(2,9)}`;get control(){return this.form().controls[this.field().name]}labelText=d(()=>b(this.field().label,this.locale()),...ngDevMode?[{debugName:"labelText"}]:[]);hintText=d(()=>b(this.field().hint,this.locale()),...ngDevMode?[{debugName:"hintText"}]:[]);placeholderText=d(()=>b(this.field().placeholder,this.locale()),...ngDevMode?[{debugName:"placeholderText"}]:[]);resolvedOptions=d(()=>{const e=this.runtimeOptions();if(e.length)return e;const t=this.loadedOptions();return t.length?t:this.field().options??[]},...ngDevMode?[{debugName:"resolvedOptions"}]:[]);selectOptions=d(()=>this.resolvedOptions().map(e=>({value:String(e.value),label:this.optionLabel(e),disabled:!!e.disabled})),...ngDevMode?[{debugName:"selectOptions"}]:[]);ngOnInit(){const e=this.field();e.lookupDomain&&e.lookupName&&this.lookup&&!e.searchLookup&&this.lookup.lookup({domain:e.lookupDomain,name:e.lookupName}).pipe(_(this.destroyRef)).subscribe(t=>{const o=this.applyLookupFilter(t);this.loadedOptions.set(o),this.optionsLoaded.emit({name:e.name,options:o})})}optionLabel(e){return b(e.label,this.locale())}isChecked(e){const t=this.control?.value;return Array.isArray(t)&&t.some(o=>o==e)}toggleCheckbox(e,t){const o=Array.isArray(this.control.value)?[...this.control.value]:[],r=t?o.some(n=>n==e)?o:[...o,e]:o.filter(n=>n!=e);this.control.setValue(r),this.control.markAsDirty()}onSelectSearch(e){const t=this.field();!t.searchLookup||!this.lookup||!t.lookupDomain||t.lookupName}onRestrict(e){const t=this.field().inputRestriction;if(!t)return;const o=e.target;let r=o.value;t==="numbers"&&(r=r.replace(/\D+/g,"")),t==="english"&&(r=r.replace(/[^a-zA-Z0-9\s.,\-_/]/g,"")),t==="arabic"&&(r=r.replace(/[^\u0600-\u06FF0-9\s.,\-_/]/g,"")),r!==o.value&&(o.value=r,this.control.setValue(r))}applyLookupFilter(e){const t=this.field().lookupFilter;return t?e.filter(o=>o[t.property]===t.value):e}static \u0275fac=i.\u0275\u0275ngDeclareFactory({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:f,deps:[],target:i.\u0275\u0275FactoryTarget.Component});static \u0275cmp=i.\u0275\u0275ngDeclareComponent({minVersion:"17.0.0",version:"22.0.7",type:f,isStandalone:!0,selector:"dga-dynamic-form-field",inputs:{field:{classPropertyName:"field",publicName:"field",isSignal:!0,isRequired:!0,transformFunction:null},form:{classPropertyName:"form",publicName:"form",isSignal:!0,isRequired:!0,transformFunction:null},locale:{classPropertyName:"locale",publicName:"locale",isSignal:!0,isRequired:!1,transformFunction:null},required:{classPropertyName:"required",publicName:"required",isSignal:!0,isRequired:!1,transformFunction:null},error:{classPropertyName:"error",publicName:"error",isSignal:!0,isRequired:!1,transformFunction:null},runtimeOptions:{classPropertyName:"runtimeOptions",publicName:"runtimeOptions",isSignal:!0,isRequired:!1,transformFunction:null}},outputs:{optionsLoaded:"optionsLoaded"},host:{properties:{"class.hidden":'field().type === "hidden"'},classAttribute:"block w-full"},ngImport:i,template:`
+    @if (field().type !== 'hidden') {
+      <dga-field
+        [label]="labelText()"
+        [hint]="hintText()"
+        [error]="error()"
+        [required]="required()"
+        [controlId]="controlId"
+        [status]="error() ? 'error' : 'default'"
+      >
+        @switch (field().type) {
+          @case ('textarea') {
+            <textarea
+              dgaInput
+              [id]="controlId"
+              [attr.rows]="field().rows || 4"
+              [attr.placeholder]="placeholderText()"
+              [attr.maxlength]="field().maxLength || null"
+              [readonly]="field().readonly || null"
+              [formControl]="control"
+              [dgaInvalid]="!!error()"
+            ></textarea>
+          }
+          @case ('email') {
+            <input
+              dgaInput
+              type="email"
+              [id]="controlId"
+              [attr.placeholder]="placeholderText()"
+              [attr.maxlength]="field().maxLength || null"
+              [readonly]="field().readonly || null"
+              [formControl]="control"
+              [dgaInvalid]="!!error()"
+              (input)="onRestrict($event)"
+            />
+          }
+          @case ('number') {
+            <dga-number-input
+              [formControl]="control"
+              [disabled]="!!field().disabled"
+            />
+          }
+          @case ('otp') {
+            <dga-otp [formControl]="control" />
+          }
+          @case ('phone') {
+            <dga-phone-input
+              [formControl]="control"
+              [placeholder]="placeholderText()"
+              [invalid]="!!error()"
+              [disabled]="!!field().disabled"
+              [required]="required()"
+              [controlId]="controlId"
+            />
+          }
+          @case ('date') {
+            <dga-date-picker
+              [formControl]="control"
+              [placeholder]="placeholderText()"
+              [dgaInvalid]="!!error()"
+              [disabled]="!!field().disabled"
+              [locale]="locale()"
+              [mode]="field().monthPicker ? 'month' : 'day'"
+            />
+          }
+          @case ('chips') {
+            <dga-chip-input
+              [formControl]="control"
+              [placeholder]="placeholderText()"
+              [dgaInvalid]="!!error()"
+              [disabled]="!!field().disabled"
+              [label]="labelText()"
+            />
+          }
+          @case ('toggle') {
+            <dga-switch
+              [formControl]="control"
+              [label]="labelText()"
+              [disabled]="!!field().disabled"
+            />
+          }
+          @case ('file') {
+            <dga-upload
+              [formControl]="control"
+              [accept]="field().acceptedFileTypes || ''"
+              [multiple]="(field().maxFiles ?? 1) > 1"
+              [maxSize]="field().maxFileSize || 0"
+              [disabled]="!!field().disabled"
+            />
+          }
+          @case ('select') {
+            <dga-select
+              [formControl]="control"
+              [options]="selectOptions()"
+              [searchable]="!!field().searchLookup || (selectOptions().length > 8)"
+              [placeholder]="placeholderText()"
+              [label]="labelText()"
+              [dgaInvalid]="!!error()"
+              [disabled]="!!field().disabled"
+              (valueChange)="onSelectSearch($event)"
+            />
+          }
+          @case ('multiselect') {
+            <dga-select
+              multiple
+              [formControl]="control"
+              [options]="selectOptions()"
+              [searchable]="true"
+              [placeholder]="placeholderText()"
+              [label]="labelText()"
+              [dgaInvalid]="!!error()"
+              [disabled]="!!field().disabled"
+            />
+          }
+          @case ('radio') {
+            <div
+              class="flex flex-wrap gap-lg"
+              [class.flex-col]="field().optionsLayout !== 'grid'"
+              role="radiogroup"
+              [attr.aria-labelledby]="controlId"
+            >
+              @for (opt of resolvedOptions(); track opt.value) {
+                <label class="inline-flex items-center gap-sm text-body-sm text-fg">
+                  <input
+                    type="radio"
+                    dgaRadio
+                    [name]="field().name"
+                    [value]="opt.value"
+                    [formControl]="control"
+                    [dgaInvalid]="!!error()"
+                  />
+                  {{ optionLabel(opt) }}
+                </label>
+              }
+            </div>
+          }
+          @case ('checkbox') {
+            <div
+              class="flex flex-wrap gap-lg"
+              [class.flex-col]="field().optionsLayout !== 'grid'"
+            >
+              @for (opt of resolvedOptions(); track opt.value) {
+                <label class="inline-flex items-center gap-sm text-body-sm text-fg">
+                  <input
+                    type="checkbox"
+                    dgaCheckbox
+                    [checked]="isChecked(opt.value)"
+                    [disabled]="!!field().disabled"
+                    [dgaInvalid]="!!error()"
+                    (change)="toggleCheckbox(opt.value, $any($event.target).checked)"
+                  />
+                  {{ optionLabel(opt) }}
+                </label>
+              }
+            </div>
+          }
+          @default {
+            <input
+              dgaInput
+              type="text"
+              [id]="controlId"
+              [attr.placeholder]="placeholderText()"
+              [attr.maxlength]="field().maxLength || null"
+              [readonly]="field().readonly || null"
+              [formControl]="control"
+              [dgaInvalid]="!!error()"
+              (input)="onRestrict($event)"
+            />
+          }
+        }
+      </dga-field>
+    }
+  `,isInline:!0,dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:p.DefaultValueAccessor,selector:"input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"},{kind:"directive",type:p.RadioControlValueAccessor,selector:"input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]",inputs:["name","formControlName","value"]},{kind:"directive",type:p.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:p.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:p.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"ngmodule",type:G},{kind:"component",type:j,selector:"dga-field",inputs:["label","labelHint","hint","error","status","statusMessage","controlId","required"]},{kind:"directive",type:W,selector:"input[dgaInput], textarea[dgaInput]",inputs:["size","dgaInvalid","status"]},{kind:"component",type:H,selector:"dga-select",inputs:["options","value","multiple","searchable","openMode","clearable","size","status","placeholder","label","removeLabel","clearLabel","emptyLabel","disabled","dgaInvalid"],outputs:["valueChange"]},{kind:"directive",type:K,selector:'input[type="checkbox"][dgaCheckbox]',inputs:["size","dgaInvalid"]},{kind:"directive",type:U,selector:'input[type="radio"][dgaRadio]',inputs:["size","dgaInvalid"]},{kind:"component",type:Y,selector:"dga-phone-input",inputs:["countries","countryCode","nationalNumber","controlId","name","placeholder","autocomplete","codeLabel","disabled","required","invalid","value"],outputs:["countryCodeChange","nationalNumberChange","valueChange"]},{kind:"component",type:J,selector:"dga-date-picker",inputs:["value","startValue","endValue","calendar","range","format","mode","locale","minDate","maxDate","yearBefore","yearAfter","placeholder","controlId","name","size","disabled","required","clearable","editable","dgaInvalid","status","rangeSeparator","todayLabel","clearLabel","closeLabel","saveLabel","ariaLabel"],outputs:["startValueChange","endValueChange","valueChange","rangeChange"]},{kind:"component",type:X,selector:"dga-chip-input",inputs:["value","placeholder","label","removeLabel","disabled","dgaInvalid","status"],outputs:["valueChange"]},{kind:"component",type:Z,selector:"dga-switch",inputs:["checked","size","label","disabled"],outputs:["checkedChange","changed"]},{kind:"component",type:Q,selector:"dga-upload",inputs:["files","accept","multiple","appearance","hint","browseLabel","removeLabel","disabled","maxSize","dragging"],outputs:["filesChange","rejected","draggingChange"]},{kind:"component",type:ee,selector:"dga-number-input",inputs:["value","min","max","step","size","label","controlId","name","incrementLabel","decrementLabel","disabled","dgaInvalid","status"],outputs:["valueChange"]},{kind:"component",type:te,selector:"dga-otp",inputs:["length","value","label","alphanumeric","disabled","dgaInvalid"],outputs:["valueChange","completed"]}],changeDetection:i.ChangeDetectionStrategy.OnPush})}i.\u0275\u0275ngDeclareClassMetadata({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:f,decorators:[{type:z,args:[{selector:"dga-dynamic-form-field",standalone:!0,imports:[k,G,j,W,H,K,U,Y,J,X,Z,Q,ee,te],template:`
+    @if (field().type !== 'hidden') {
+      <dga-field
+        [label]="labelText()"
+        [hint]="hintText()"
+        [error]="error()"
+        [required]="required()"
+        [controlId]="controlId"
+        [status]="error() ? 'error' : 'default'"
+      >
+        @switch (field().type) {
+          @case ('textarea') {
+            <textarea
+              dgaInput
+              [id]="controlId"
+              [attr.rows]="field().rows || 4"
+              [attr.placeholder]="placeholderText()"
+              [attr.maxlength]="field().maxLength || null"
+              [readonly]="field().readonly || null"
+              [formControl]="control"
+              [dgaInvalid]="!!error()"
+            ></textarea>
+          }
+          @case ('email') {
+            <input
+              dgaInput
+              type="email"
+              [id]="controlId"
+              [attr.placeholder]="placeholderText()"
+              [attr.maxlength]="field().maxLength || null"
+              [readonly]="field().readonly || null"
+              [formControl]="control"
+              [dgaInvalid]="!!error()"
+              (input)="onRestrict($event)"
+            />
+          }
+          @case ('number') {
+            <dga-number-input
+              [formControl]="control"
+              [disabled]="!!field().disabled"
+            />
+          }
+          @case ('otp') {
+            <dga-otp [formControl]="control" />
+          }
+          @case ('phone') {
+            <dga-phone-input
+              [formControl]="control"
+              [placeholder]="placeholderText()"
+              [invalid]="!!error()"
+              [disabled]="!!field().disabled"
+              [required]="required()"
+              [controlId]="controlId"
+            />
+          }
+          @case ('date') {
+            <dga-date-picker
+              [formControl]="control"
+              [placeholder]="placeholderText()"
+              [dgaInvalid]="!!error()"
+              [disabled]="!!field().disabled"
+              [locale]="locale()"
+              [mode]="field().monthPicker ? 'month' : 'day'"
+            />
+          }
+          @case ('chips') {
+            <dga-chip-input
+              [formControl]="control"
+              [placeholder]="placeholderText()"
+              [dgaInvalid]="!!error()"
+              [disabled]="!!field().disabled"
+              [label]="labelText()"
+            />
+          }
+          @case ('toggle') {
+            <dga-switch
+              [formControl]="control"
+              [label]="labelText()"
+              [disabled]="!!field().disabled"
+            />
+          }
+          @case ('file') {
+            <dga-upload
+              [formControl]="control"
+              [accept]="field().acceptedFileTypes || ''"
+              [multiple]="(field().maxFiles ?? 1) > 1"
+              [maxSize]="field().maxFileSize || 0"
+              [disabled]="!!field().disabled"
+            />
+          }
+          @case ('select') {
+            <dga-select
+              [formControl]="control"
+              [options]="selectOptions()"
+              [searchable]="!!field().searchLookup || (selectOptions().length > 8)"
+              [placeholder]="placeholderText()"
+              [label]="labelText()"
+              [dgaInvalid]="!!error()"
+              [disabled]="!!field().disabled"
+              (valueChange)="onSelectSearch($event)"
+            />
+          }
+          @case ('multiselect') {
+            <dga-select
+              multiple
+              [formControl]="control"
+              [options]="selectOptions()"
+              [searchable]="true"
+              [placeholder]="placeholderText()"
+              [label]="labelText()"
+              [dgaInvalid]="!!error()"
+              [disabled]="!!field().disabled"
+            />
+          }
+          @case ('radio') {
+            <div
+              class="flex flex-wrap gap-lg"
+              [class.flex-col]="field().optionsLayout !== 'grid'"
+              role="radiogroup"
+              [attr.aria-labelledby]="controlId"
+            >
+              @for (opt of resolvedOptions(); track opt.value) {
+                <label class="inline-flex items-center gap-sm text-body-sm text-fg">
+                  <input
+                    type="radio"
+                    dgaRadio
+                    [name]="field().name"
+                    [value]="opt.value"
+                    [formControl]="control"
+                    [dgaInvalid]="!!error()"
+                  />
+                  {{ optionLabel(opt) }}
+                </label>
+              }
+            </div>
+          }
+          @case ('checkbox') {
+            <div
+              class="flex flex-wrap gap-lg"
+              [class.flex-col]="field().optionsLayout !== 'grid'"
+            >
+              @for (opt of resolvedOptions(); track opt.value) {
+                <label class="inline-flex items-center gap-sm text-body-sm text-fg">
+                  <input
+                    type="checkbox"
+                    dgaCheckbox
+                    [checked]="isChecked(opt.value)"
+                    [disabled]="!!field().disabled"
+                    [dgaInvalid]="!!error()"
+                    (change)="toggleCheckbox(opt.value, $any($event.target).checked)"
+                  />
+                  {{ optionLabel(opt) }}
+                </label>
+              }
+            </div>
+          }
+          @default {
+            <input
+              dgaInput
+              type="text"
+              [id]="controlId"
+              [attr.placeholder]="placeholderText()"
+              [attr.maxlength]="field().maxLength || null"
+              [readonly]="field().readonly || null"
+              [formControl]="control"
+              [dgaInvalid]="!!error()"
+              (input)="onRestrict($event)"
+            />
+          }
+        }
+      </dga-field>
+    }
+  `,changeDetection:q.OnPush,host:{class:"block w-full","[class.hidden]":'field().type === "hidden"'}}]}],propDecorators:{field:[{type:i.Input,args:[{isSignal:!0,alias:"field",required:!0}]}],form:[{type:i.Input,args:[{isSignal:!0,alias:"form",required:!0}]}],locale:[{type:i.Input,args:[{isSignal:!0,alias:"locale",required:!1}]}],required:[{type:i.Input,args:[{isSignal:!0,alias:"required",required:!1}]}],error:[{type:i.Input,args:[{isSignal:!0,alias:"error",required:!1}]}],runtimeOptions:[{type:i.Input,args:[{isSignal:!0,alias:"runtimeOptions",required:!1}]}],optionsLoaded:[{type:i.Output,args:["optionsLoaded"]}]}});const we={1:"col-span-1",2:"col-span-2",3:"col-span-3",4:"col-span-4",5:"col-span-5",6:"col-span-6",7:"col-span-7",8:"col-span-8",9:"col-span-9",10:"col-span-10",11:"col-span-11",12:"col-span-12"},Me={1:"md:col-span-1",2:"md:col-span-2",3:"md:col-span-3",4:"md:col-span-4",5:"md:col-span-5",6:"md:col-span-6",7:"md:col-span-7",8:"md:col-span-8",9:"md:col-span-9",10:"md:col-span-10",11:"md:col-span-11",12:"md:col-span-12"},Ve={1:"lg:col-span-1",2:"lg:col-span-2",3:"lg:col-span-3",4:"lg:col-span-4",5:"lg:col-span-5",6:"lg:col-span-6",7:"lg:col-span-7",8:"lg:col-span-8",9:"lg:col-span-9",10:"lg:col-span-10",11:"lg:col-span-11",12:"lg:col-span-12"};function R(a){return Number.isFinite(a)?Math.min(12,Math.max(1,Math.round(a))):12}class I{config=u.required(...ngDevMode?[{debugName:"config"}]:[]);localeInput=u(null,{...ngDevMode?{debugName:"localeInput"}:{},alias:"locale"});formSubmitted=S();formError=S();clearButtonClick=S();draftSaved=S();fb=s(Ce);formService=s(v);toast=s(L,{optional:!0});i18n=s(N,{optional:!0});destroyRef=s(E);registry=s(y);form;activeStep=C(0,...ngDevMode?[{debugName:"activeStep"}]:[]);submitting=C(!1,...ngDevMode?[{debugName:"submitting"}]:[]);optionsMap=C({},...ngDevMode?[{debugName:"optionsMap"}]:[]);formValues=C({},...ngDevMode?[{debugName:"formValues"}]:[]);locale=d(()=>this.localeInput()??pe(),...ngDevMode?[{debugName:"locale"}]:[]);wizardEnabled=d(()=>!!this.config().wizard?.enabled&&!!this.config().wizard?.steps?.length,...ngDevMode?[{debugName:"wizardEnabled"}]:[]);allFields=d(()=>ce(this.config().fields,this.config().wizard?.steps),...ngDevMode?[{debugName:"allFields"}]:[]);currentStepFields=d(()=>this.wizardEnabled()?this.config().wizard.steps[this.activeStep()]?.fields??[]:this.config().fields,...ngDevMode?[{debugName:"currentStepFields"}]:[]);visibleFields=d(()=>{const e=this.formValues(),t=this.optionsMap();return this.currentStepFields().filter(o=>M(o,e,r=>t[r]))},...ngDevMode?[{debugName:"visibleFields"}]:[]);stepperSteps=d(()=>(this.config().wizard?.steps??[]).map(t=>({label:this.labelOf(t.title),description:t.description?this.labelOf(t.description):void 0})),...ngDevMode?[{debugName:"stepperSteps"}]:[]);descriptionText=d(()=>this.labelOf(this.config().description),...ngDevMode?[{debugName:"descriptionText"}]:[]);constructor(){xe(()=>{const e=this.formValues(),t=this.optionsMap();if(this.form)for(const o of this.allFields()){const r=this.form.get(o.name);if(!r||!o.requiredWhen)continue;const n=V(o,e,l=>t[l]);ue(r,o,n)}})}ngOnInit(){this.form=de(this.fb,this.allFields());const e=this.config().formId;if(e&&this.config().enableLocalStorageSave){const t=this.formService.loadDraft(e);t&&this.form.patchValue(t,{emitEvent:!1})}this.form.valueChanges.pipe(ke(this.form.getRawValue()),_(this.destroyRef)).subscribe(t=>this.formValues.set(t))}labelOf(e){return e?this.i18n?this.i18n.resolveLabel(e,this.locale()):b(e,this.locale()):""}submitLabel(){const e=this.config();return this.wizardEnabled()?this.labelOf(e.wizard?.submitButtonText??e.submitButtonLabel)||(this.locale()==="en"?"Submit":"\u0625\u0631\u0633\u0627\u0644"):this.labelOf(e.submitButtonLabel)||(this.locale()==="en"?"Submit":"\u0625\u0631\u0633\u0627\u0644")}nextLabel(){return this.labelOf(this.config().wizard?.nextButtonText)||(this.locale()==="en"?"Next":"\u0627\u0644\u062A\u0627\u0644\u064A")}previousLabel(){return this.labelOf(this.config().wizard?.previousButtonText)||(this.locale()==="en"?"Previous":"\u0627\u0644\u0633\u0627\u0628\u0642")}clearLabel(){return this.labelOf(this.config().clearButtonLabel)}saveLabel(){return this.labelOf(this.config().saveButtonLabel??this.config().wizard?.saveButtonText)||(this.locale()==="en"?"Save":"\u062D\u0641\u0638")}showSave(){const e=this.config();return!!(e.enableLocalStorageSave||e.wizard?.showSaveButton)}isLastStep(){return this.wizardEnabled()?this.activeStep()>=this.config().wizard.steps.length-1:!0}isRequired(e){return V(e,this.formValues(),t=>this.optionsMap()[t])}fieldError(e){const t=this.form?.get(e.name);if(!t||!(t.touched||t.dirty)||!t.errors)return"";const o=t.errors,r=e.validation?.errorMessages,n=this.locale(),l=x=>r?.[x]?this.labelOf(r[x]):"";return o.required?l("required")||(n==="en"?"Required":"\u0645\u0637\u0644\u0648\u0628"):o.email?l("email")||(n==="en"?"Invalid email":"\u0628\u0631\u064A\u062F \u063A\u064A\u0631 \u0635\u0627\u0644\u062D"):o.minlength?l("minLength")||(n==="en"?"Too short":"\u0642\u0635\u064A\u0631 \u062C\u062F\u0627\u064B"):o.maxlength?l("maxLength")||(n==="en"?"Too long":"\u0637\u0648\u064A\u0644 \u062C\u062F\u0627\u064B"):o.pattern?l("pattern")||(n==="en"?"Invalid format":"\u0635\u064A\u063A\u0629 \u063A\u064A\u0631 \u0635\u0627\u0644\u062D\u0629"):o.maxChips?l("maxChips")||(n==="en"?"Too many items":"\u0639\u062F\u062F \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0643\u0628\u064A\u0631"):n==="en"?"Invalid":"\u063A\u064A\u0631 \u0635\u0627\u0644\u062D"}columnClass(e){const t=e.columns,o=R(t?.sm??t?.md??12),r=R(t?.md??o),n=R(t?.lg??r);return["w-full",we[o],Me[r],Ve[n]].join(" ")}customComponent(e){return this.registry.hasCustom(e.type)?this.registry.get(e.type):null}customInputs(e){return{field:e,form:this.form,locale:this.locale(),required:this.isRequired(e),error:this.fieldError(e)}}onOptionsLoaded(e){this.optionsMap.update(t=>({...t,[e.name]:e.options}))}previousStep(){this.activeStep()>0&&this.activeStep.update(e=>e-1)}nextStep(){this.config().wizard?.validateOnStepChange!==!1&&(this.markStepTouched(),!this.stepValid())||this.isLastStep()||this.activeStep.update(t=>t+1)}onClear(){this.form.reset();for(const t of this.allFields()){const o=this.form.get(t.name);o&&o.setValue(t.value!==void 0?t.value:["checkbox","multiselect","chips","file"].includes(t.type)?[]:t.type==="toggle"?!1:"")}this.activeStep.set(0);const e=this.config().formId;e&&this.formService.clearDraft(e),this.clearButtonClick.emit()}onSaveDraft(){const e=this.form.getRawValue(),t=this.config().formId;t&&this.formService.saveDraft(t,e),this.draftSaved.emit(e),this.toast?.show({variant:"success",message:this.locale()==="en"?"Draft saved":"\u062A\u0645 \u062D\u0641\u0638 \u0627\u0644\u0645\u0633\u0648\u062F\u0629"})}onSubmit(){if(this.wizardEnabled()&&!this.isLastStep()){this.nextStep();return}if(this.markVisibleTouched(),!this.visibleValid()){this.toast?.show({variant:"error",message:this.locale()==="en"?"Please fix the highlighted fields":"\u064A\u0631\u062C\u0649 \u062A\u0635\u062D\u064A\u062D \u0627\u0644\u062D\u0642\u0648\u0644 \u0627\u0644\u0645\u062D\u062F\u062F\u0629"});return}const e=this.config(),t=this.form.getRawValue(),o=new Set(this.collectVisibleFieldNames()),r={};for(const n of this.allFields())!o.has(n.name)&&n.type!=="hidden"||(r[n.name]=t[n.name]);if(e.emitOnly||!e.endpoint){this.formSubmitted.emit(r),this.toast?.show({variant:"success",message:this.labelOf(e.successMessage)||(this.locale()==="en"?"Submitted":"\u062A\u0645 \u0627\u0644\u0625\u0631\u0633\u0627\u0644")});return}this.submitting.set(!0),this.formService.submitForm(e,r,this.allFields()).subscribe({next:n=>{this.submitting.set(!1),this.formSubmitted.emit(n),e.formId&&this.formService.clearDraft(e.formId),this.toast?.show({variant:"success",message:this.labelOf(e.successMessage)||(this.locale()==="en"?"Submitted successfully":"\u062A\u0645 \u0627\u0644\u0625\u0631\u0633\u0627\u0644 \u0628\u0646\u062C\u0627\u062D")})},error:n=>{this.submitting.set(!1),this.formError.emit(n),this.toast?.show({variant:"error",message:this.labelOf(e.errorMessage)||(this.locale()==="en"?"Submission failed":"\u0641\u0634\u0644 \u0627\u0644\u0625\u0631\u0633\u0627\u0644")})}})}patchFormValues(e){this.form.patchValue(e)}getForm(){return this.form}markStepTouched(){for(const e of this.visibleFields())this.form.get(e.name)?.markAsTouched()}markVisibleTouched(){for(const e of this.collectVisibleFieldNames())this.form.get(e)?.markAsTouched()}stepValid(){return this.visibleFields().every(e=>{const t=this.form.get(e.name);return!t||t.disabled||t.valid})}visibleValid(){return this.collectVisibleFieldNames().every(e=>{const t=this.form.get(e);return!t||t.disabled||t.valid})}collectVisibleFieldNames(){const e=this.formValues(),t=this.optionsMap();return(this.wizardEnabled()?this.allFields():this.config().fields).filter(r=>r.type==="hidden"||M(r,e,n=>t[n])).map(r=>r.name)}static \u0275fac=i.\u0275\u0275ngDeclareFactory({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:I,deps:[],target:i.\u0275\u0275FactoryTarget.Component});static \u0275cmp=i.\u0275\u0275ngDeclareComponent({minVersion:"17.0.0",version:"22.0.7",type:I,isStandalone:!0,selector:"dga-dynamic-form",inputs:{config:{classPropertyName:"config",publicName:"config",isSignal:!0,isRequired:!0,transformFunction:null},localeInput:{classPropertyName:"localeInput",publicName:"locale",isSignal:!0,isRequired:!1,transformFunction:null}},outputs:{formSubmitted:"formSubmitted",formError:"formError",clearButtonClick:"clearButtonClick",draftSaved:"draftSaved"},host:{classAttribute:"block w-full"},ngImport:i,template:`
+    <form class="flex w-full flex-col gap-3xl" [formGroup]="form" (ngSubmit)="onSubmit()">
+      @if (descriptionText()) {
+        <p class="text-body-md text-paragraph">{{ descriptionText() }}</p>
+      }
+
+      @if (wizardEnabled()) {
+        <dga-stepper
+          [steps]="stepperSteps()"
+          [(active)]="activeStep"
+          [label]="locale() === 'en' ? 'Steps' : '\u0627\u0644\u062E\u0637\u0648\u0627\u062A'"
+        />
+      }
+
+      <div class="grid grid-cols-12 gap-xl">
+        @for (field of visibleFields(); track field.name) {
+          <div [class]="columnClass(field)">
+            @if (customComponent(field); as cmp) {
+              <ng-container *ngComponentOutlet="cmp; inputs: customInputs(field)" />
+            } @else {
+              <dga-dynamic-form-field
+                [field]="field"
+                [form]="form"
+                [locale]="locale()"
+                [required]="isRequired(field)"
+                [error]="fieldError(field)"
+                [runtimeOptions]="optionsMap()[field.name] || []"
+                (optionsLoaded)="onOptionsLoaded($event)"
+              />
+            }
+          </div>
+        }
+      </div>
+
+      <div class="flex flex-wrap items-center gap-md">
+        @if (wizardEnabled() && activeStep() > 0) {
+          <button
+            dgaButton
+            type="button"
+            variant="secondary"
+            (click)="previousStep()"
+          >
+            {{ previousLabel() }}
+          </button>
+        }
+
+        @if (wizardEnabled() && !isLastStep()) {
+          <button dgaButton type="button" (click)="nextStep()">
+            {{ nextLabel() }}
+          </button>
+        } @else {
+          <button dgaButton type="submit" [disabled]="submitting()">
+            {{ submitLabel() }}
+          </button>
+        }
+
+        @if (config().clearButtonLabel) {
+          <button
+            dgaButton
+            type="button"
+            variant="ghost"
+            (click)="onClear()"
+          >
+            {{ clearLabel() }}
+          </button>
+        }
+
+        @if (showSave()) {
+          <button
+            dgaButton
+            type="button"
+            variant="secondary"
+            (click)="onSaveDraft()"
+          >
+            {{ saveLabel() }}
+          </button>
+        }
+      </div>
+    </form>
+  `,isInline:!0,dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:p.\u0275NgNoValidate,selector:"form:not([ngNoForm]):not([ngNativeValidate])"},{kind:"directive",type:p.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:p.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"component",type:f,selector:"dga-dynamic-form-field",inputs:["field","form","locale","required","error","runtimeOptions"],outputs:["optionsLoaded"]},{kind:"directive",type:oe,selector:"button[dgaButton], a[dgaButton]",inputs:["variant","size","iconOnly","cooldownMs","loading"]},{kind:"component",type:ae,selector:"dga-stepper",inputs:["steps","active","label"],outputs:["activeChange"]},{kind:"directive",type:B,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule"],exportAs:["ngComponentOutlet"]}],changeDetection:i.ChangeDetectionStrategy.OnPush})}i.\u0275\u0275ngDeclareClassMetadata({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:I,decorators:[{type:z,args:[{selector:"dga-dynamic-form",standalone:!0,imports:[k,f,oe,ae,B],template:`
+    <form class="flex w-full flex-col gap-3xl" [formGroup]="form" (ngSubmit)="onSubmit()">
+      @if (descriptionText()) {
+        <p class="text-body-md text-paragraph">{{ descriptionText() }}</p>
+      }
+
+      @if (wizardEnabled()) {
+        <dga-stepper
+          [steps]="stepperSteps()"
+          [(active)]="activeStep"
+          [label]="locale() === 'en' ? 'Steps' : '\u0627\u0644\u062E\u0637\u0648\u0627\u062A'"
+        />
+      }
+
+      <div class="grid grid-cols-12 gap-xl">
+        @for (field of visibleFields(); track field.name) {
+          <div [class]="columnClass(field)">
+            @if (customComponent(field); as cmp) {
+              <ng-container *ngComponentOutlet="cmp; inputs: customInputs(field)" />
+            } @else {
+              <dga-dynamic-form-field
+                [field]="field"
+                [form]="form"
+                [locale]="locale()"
+                [required]="isRequired(field)"
+                [error]="fieldError(field)"
+                [runtimeOptions]="optionsMap()[field.name] || []"
+                (optionsLoaded)="onOptionsLoaded($event)"
+              />
+            }
+          </div>
+        }
+      </div>
+
+      <div class="flex flex-wrap items-center gap-md">
+        @if (wizardEnabled() && activeStep() > 0) {
+          <button
+            dgaButton
+            type="button"
+            variant="secondary"
+            (click)="previousStep()"
+          >
+            {{ previousLabel() }}
+          </button>
+        }
+
+        @if (wizardEnabled() && !isLastStep()) {
+          <button dgaButton type="button" (click)="nextStep()">
+            {{ nextLabel() }}
+          </button>
+        } @else {
+          <button dgaButton type="submit" [disabled]="submitting()">
+            {{ submitLabel() }}
+          </button>
+        }
+
+        @if (config().clearButtonLabel) {
+          <button
+            dgaButton
+            type="button"
+            variant="ghost"
+            (click)="onClear()"
+          >
+            {{ clearLabel() }}
+          </button>
+        }
+
+        @if (showSave()) {
+          <button
+            dgaButton
+            type="button"
+            variant="secondary"
+            (click)="onSaveDraft()"
+          >
+            {{ saveLabel() }}
+          </button>
+        }
+      </div>
+    </form>
+  `,changeDetection:q.OnPush,host:{class:"block w-full"}}]}],ctorParameters:()=>[],propDecorators:{config:[{type:i.Input,args:[{isSignal:!0,alias:"config",required:!0}]}],localeInput:[{type:i.Input,args:[{isSignal:!0,alias:"locale",required:!1}]}],formSubmitted:[{type:i.Output,args:["formSubmitted"]}],formError:[{type:i.Output,args:["formError"]}],clearButtonClick:[{type:i.Output,args:["clearButtonClick"]}],draftSaved:[{type:i.Output,args:["draftSaved"]}]}});const me={resolveLabel(a,e){return e==="en"?a.en:a.ar}},fe={getToken:()=>h(null)},ge={lookup:()=>h([])};function he(a=s(re)){return{lookup(e){const o=`${e.domain.replace(/\/$/,"")}/lookup/${e.name}`,r={};if(e.parentId!=null&&e.parentId!==""&&(r.parentId=String(e.parentId)),e.search){const n=e.searchParamName||"q";r[n]=e.search}return a.get(o,{params:r}).pipe(De(n=>Array.isArray(n)?n.map(Re):[]))}}}function Re(a){const e=a??{},t=e.value??e.id??e.Id??"",o=String(e.labelEn??e.titleEn??e.en??e.TitleEn??t),r=String(e.labelAr??e.titleAr??e.ar??e.TitleAr??o);return{value:t,label:{en:o,ar:r},...e}}function be(a=s(re)){return{submit(e){const t=new Le(e.headers??{}),o=e.method.toUpperCase();return o==="GET"?a.get(e.endpoint,{headers:t}):o==="DELETE"?a.delete(e.endpoint,{headers:t,body:e.body}):o==="PUT"?a.put(e.endpoint,e.body,{headers:t}):o==="PATCH"?a.patch(e.endpoint,e.body,{headers:t}):a.post(e.endpoint,e.body,{headers:t})}}}function ve(a=s(Oe)){return{show(e){a.show({title:e.title,message:e.message,variant:e.variant??"info"})}}}function Pe(a={}){const e=a.httpLookup??!1,t=a.httpSubmit??!0,o=a.dgaToast??!0;return Se([{provide:N,useValue:me},{provide:T,useValue:fe},{provide:D,useFactory:()=>e?he():ge},{provide:O,useFactory:()=>t?be():{submit:()=>h(null)}},{provide:L,useFactory:()=>o?ve():{show:()=>{}}}])}function Ee(a,e,t=""){return a?e==="en"?a.en:a.ar:t}export{T as DGA_CAPTCHA_ADAPTER,ne as DGA_DYNAMIC_FORM_FIELD_REGISTRY,N as DGA_FORM_I18N_ADAPTER,L as DGA_FORM_TOAST_ADAPTER,D as DGA_LOOKUP_ADAPTER,O as DGA_SUBMIT_ADAPTER,I as DgaDynamicForm,f as DgaDynamicFormField,y as DgaDynamicFormFieldRegistry,v as DgaDynamicFormService,ve as createDgaToastAdapter,he as createHttpLookupAdapter,be as createHttpSubmitAdapter,me as defaultFormI18nAdapter,de as dgaBuildFormGroup,A as dgaBuildValidators,ce as dgaCollectFields,se as dgaCreateControl,le as dgaDefaultValueForField,pe as dgaDetectLocale,w as dgaFindSelectedOption,M as dgaIsFieldVisible,V as dgaIsRequiredWhen,b as dgaResolveLabel,ue as dgaSetControlValidators,ge as emptyLookupAdapter,fe as noopCaptchaAdapter,Pe as provideDgaDynamicForm,Ee as resolveFormLabel};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@a.nemreen/dga-dynamic-form",
+  "version": "0.1.0",
+  "description": "Schema-driven dynamic forms for Angular, rendered with @a.nemreen/dga-ui controls",
+  "license": "MIT",
+  "author": {
+    "name": "Ahmed Nemreen",
+    "email": "a.nemreen@gmail.com",
+    "url": "https://nemreen.info"
+  },
+  "homepage": "https://nemreen.info/dga/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nemreen/dga-angular.git",
+    "directory": "projects/dga-dynamic-form"
+  },
+  "bugs": {
+    "url": "https://github.com/nemreen/dga-angular/issues"
+  },
+  "keywords": [
+    "angular",
+    "dynamic-form",
+    "schema-form",
+    "reactive-forms",
+    "dga",
+    "design-system",
+    "rtl",
+    "arabic",
+    "saudi",
+    "government",
+    "forms"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": "^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
+    "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
+    "@angular/forms": "^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
+    "@a.nemreen/dga-tokens": "^0.2.0",
+    "@a.nemreen/dga-ui": "^0.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/a.nemreen-dga-dynamic-form.mjs",
+  "typings": "types/a.nemreen-dga-dynamic-form.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/a.nemreen-dga-dynamic-form.d.ts",
+      "default": "./fesm2022/a.nemreen-dga-dynamic-form.mjs"
+    }
+  },
+  "type": "module"
+}

package/types/a.nemreen-dga-dynamic-form.d.ts

@@ -0,0 +1,381 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Type, OnInit, EnvironmentProviders } from '@angular/core';
+import { FormGroup, FormControl, FormBuilder, ValidatorFn, AbstractControl } from '@angular/forms';
+import { DgaStep, DgaSelectOption, DgaToastService } from '@a.nemreen/dga-ui';
+import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+
+/** Bilingual label used across the schema. */
+interface DgaFormLabel {
+    en: string;
+    ar: string;
+}
+interface DgaFormFieldColumns {
+    xl?: number;
+    lg?: number;
+    md?: number;
+    sm?: number;
+}
+interface DgaFormFieldOption {
+    value: string | number | boolean;
+    label: DgaFormLabel;
+    requiresTextInput?: boolean;
+    description?: DgaFormLabel;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+type DgaFormFieldType = 'text' | 'email' | 'textarea' | 'select' | 'multiselect' | 'checkbox' | 'radio' | 'phone' | 'file' | 'date' | 'chips' | 'toggle' | 'hidden' | 'number' | 'otp';
+type DgaInputRestriction = 'numbers' | 'english' | 'arabic';
+type DgaHttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+interface DgaFormField {
+    name: string;
+    type: DgaFormFieldType;
+    label: DgaFormLabel;
+    required?: boolean;
+    options?: DgaFormFieldOption[];
+    groupedOptions?: Array<{
+        groupLabel: DgaFormLabel;
+        options: DgaFormFieldOption[];
+    }>;
+    hidden?: boolean;
+    dependsOn?: string;
+    showOnValues?: unknown[];
+    showWhenOptionProperty?: {
+        property: string;
+        value: unknown;
+    };
+    lookupDomain?: string;
+    lookupName?: string;
+    lookupFilter?: {
+        property: string;
+        value: unknown;
+    };
+    useParentId?: boolean;
+    searchLookup?: boolean;
+    searchParamName?: string;
+    minSearchLength?: number;
+    maxLength?: number;
+    placeholder?: DgaFormLabel;
+    hint?: DgaFormLabel;
+    acceptedFileTypes?: string;
+    maxFileSize?: number;
+    maxFiles?: number;
+    rows?: number;
+    minDate?: string;
+    maxDate?: string;
+    monthPicker?: boolean;
+    maxChips?: number;
+    allowDuplicates?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    value?: unknown;
+    columns?: DgaFormFieldColumns;
+    optionsLayout?: 'stack' | 'grid';
+    excludeFromPayload?: boolean;
+    inputRestriction?: DgaInputRestriction;
+    requiredWhen?: {
+        field: string;
+        value?: unknown;
+        values?: unknown[];
+        optionProperty?: string;
+        optionPropertyValue?: unknown;
+    };
+    validation?: {
+        pattern?: string;
+        minLength?: number;
+        maxLength?: number;
+        required?: boolean;
+        min?: number;
+        max?: number;
+        errorMessages?: Partial<Record<'required' | 'pattern' | 'minLength' | 'maxLength' | 'email' | 'min' | 'max' | 'minDate' | 'maxDate' | 'maxChips' | 'invalidFormat', DgaFormLabel>>;
+    };
+}
+interface DgaFormStep {
+    id: string;
+    title: DgaFormLabel;
+    description?: DgaFormLabel;
+    fields: DgaFormField[];
+    optional?: boolean;
+}
+interface DgaWizardConfig {
+    enabled: boolean;
+    validateOnStepChange?: boolean;
+    allowSkipSteps?: boolean;
+    showSaveButton?: boolean;
+    autoSave?: boolean;
+    saveEndpoint?: string;
+    saveMethod?: DgaHttpMethod;
+    saveButtonText?: DgaFormLabel;
+    nextButtonText?: DgaFormLabel;
+    previousButtonText?: DgaFormLabel;
+    submitButtonText?: DgaFormLabel;
+    steps: DgaFormStep[];
+}
+type DgaDynamicFormPayloadTransformer = (data: Record<string, unknown>) => Record<string, unknown> | FormData;
+interface DgaDynamicFormConfig {
+    /** Submit URL. Optional when the consumer handles `formSubmitted` only. */
+    endpoint?: string;
+    method?: DgaHttpMethod;
+    fields: DgaFormField[];
+    description?: DgaFormLabel;
+    wizard?: DgaWizardConfig;
+    submitButtonLabel?: DgaFormLabel;
+    clearButtonLabel?: DgaFormLabel;
+    saveButtonLabel?: DgaFormLabel;
+    successMessage?: DgaFormLabel;
+    errorMessage?: DgaFormLabel;
+    fieldMapping?: Record<string, string>;
+    payloadTransformer?: DgaDynamicFormPayloadTransformer;
+    formId?: string;
+    enableLocalStorageSave?: boolean;
+    idempotencyKey?: string;
+    /** When true, HTTP submit is skipped and only `formSubmitted` is emitted. */
+    emitOnly?: boolean;
+}
+type DgaFormLocale = 'ar' | 'en';
+
+interface DgaLookupRequest {
+    domain: string;
+    name: string;
+    parentId?: string | number | null;
+    search?: string;
+    searchParamName?: string;
+}
+interface DgaLookupAdapter {
+    lookup(request: DgaLookupRequest): Observable<DgaFormFieldOption[]>;
+}
+interface DgaSubmitRequest {
+    endpoint: string;
+    method: DgaHttpMethod;
+    body: Record<string, unknown> | FormData;
+    headers?: Record<string, string>;
+}
+interface DgaSubmitAdapter {
+    submit<T = unknown>(request: DgaSubmitRequest): Observable<T>;
+}
+type DgaToastVariant = 'neutral' | 'success' | 'info' | 'warning' | 'error';
+interface DgaFormToastAdapter {
+    show(options: {
+        title?: string;
+        message?: string;
+        variant?: DgaToastVariant;
+    }): void;
+}
+interface DgaCaptchaAdapter {
+    /** Returns a captcha token (or null when captcha is disabled). */
+    getToken(action?: string): Observable<string | null>;
+}
+interface DgaFormI18nAdapter {
+    /** Resolve a bilingual label for the active locale. */
+    resolveLabel(label: {
+        en: string;
+        ar: string;
+    }, locale: DgaFormLocale): string;
+    /** Optional free-form key lookup (e.g. ngx-translate). */
+    translate?(key: string, locale: DgaFormLocale): string;
+}
+/** Custom field renderer registered via `DGA_DYNAMIC_FORM_FIELD_REGISTRY`. */
+interface DgaDynamicFieldRenderer {
+    /** Unique type id matching `DgaFormField.type` (or a custom string). */
+    type: string;
+    component: Type<unknown>;
+}
+declare const DGA_LOOKUP_ADAPTER: InjectionToken<DgaLookupAdapter>;
+declare const DGA_SUBMIT_ADAPTER: InjectionToken<DgaSubmitAdapter>;
+declare const DGA_FORM_TOAST_ADAPTER: InjectionToken<DgaFormToastAdapter>;
+declare const DGA_CAPTCHA_ADAPTER: InjectionToken<DgaCaptchaAdapter>;
+declare const DGA_FORM_I18N_ADAPTER: InjectionToken<DgaFormI18nAdapter>;
+declare const DGA_DYNAMIC_FORM_FIELD_REGISTRY: InjectionToken<DgaDynamicFieldRenderer[]>;
+/** Context passed into custom field renderer components (optional inject). */
+interface DgaDynamicFieldHostContext {
+    field: DgaFormField;
+    controlName: string;
+    locale: DgaFormLocale;
+    invalid: boolean;
+    error: string;
+}
+
+/**
+ * Resolves built-in + consumer-registered field renderers by `type`.
+ * Built-in types are rendered by `DgaDynamicFormField` directly;
+ * custom types use the registered component via `NgComponentOutlet`.
+ */
+declare class DgaDynamicFormFieldRegistry {
+    private readonly extras;
+    private readonly map;
+    constructor();
+    register(entry: DgaDynamicFieldRenderer): void;
+    get(type: string): Type<unknown> | null;
+    hasCustom(type: string): boolean;
+    isBuiltIn(type: string): type is DgaFormFieldType;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DgaDynamicFormFieldRegistry, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DgaDynamicFormFieldRegistry>;
+}
+
+declare class DgaDynamicForm implements OnInit {
+    readonly config: _angular_core.InputSignal<DgaDynamicFormConfig>;
+    readonly localeInput: _angular_core.InputSignal<DgaFormLocale | null>;
+    readonly formSubmitted: _angular_core.OutputEmitterRef<unknown>;
+    readonly formError: _angular_core.OutputEmitterRef<unknown>;
+    readonly clearButtonClick: _angular_core.OutputEmitterRef<void>;
+    readonly draftSaved: _angular_core.OutputEmitterRef<Record<string, unknown>>;
+    private readonly fb;
+    private readonly formService;
+    private readonly toast;
+    private readonly i18n;
+    private readonly destroyRef;
+    readonly registry: DgaDynamicFormFieldRegistry;
+    form: FormGroup;
+    readonly activeStep: _angular_core.WritableSignal<number>;
+    readonly submitting: _angular_core.WritableSignal<boolean>;
+    readonly optionsMap: _angular_core.WritableSignal<Record<string, DgaFormFieldOption[]>>;
+    private readonly formValues;
+    readonly locale: _angular_core.Signal<DgaFormLocale>;
+    readonly wizardEnabled: _angular_core.Signal<boolean>;
+    readonly allFields: _angular_core.Signal<DgaFormField[]>;
+    readonly currentStepFields: _angular_core.Signal<DgaFormField[]>;
+    readonly visibleFields: _angular_core.Signal<DgaFormField[]>;
+    readonly stepperSteps: _angular_core.Signal<DgaStep[]>;
+    readonly descriptionText: _angular_core.Signal<string>;
+    constructor();
+    ngOnInit(): void;
+    labelOf(label: {
+        en: string;
+        ar: string;
+    } | undefined): string;
+    submitLabel(): string;
+    nextLabel(): string;
+    previousLabel(): string;
+    clearLabel(): string;
+    saveLabel(): string;
+    showSave(): boolean;
+    isLastStep(): boolean;
+    isRequired(field: DgaFormField): boolean;
+    fieldError(field: DgaFormField): string;
+    columnClass(field: DgaFormField): string;
+    customComponent(field: DgaFormField): _angular_core.Type<unknown> | null;
+    customInputs(field: DgaFormField): Record<string, unknown>;
+    onOptionsLoaded(event: {
+        name: string;
+        options: DgaFormFieldOption[];
+    }): void;
+    previousStep(): void;
+    nextStep(): void;
+    onClear(): void;
+    onSaveDraft(): void;
+    onSubmit(): void;
+    /** Imperative helpers for host apps. */
+    patchFormValues(values: Record<string, unknown>): void;
+    getForm(): FormGroup;
+    private markStepTouched;
+    private markVisibleTouched;
+    private stepValid;
+    private visibleValid;
+    private collectVisibleFieldNames;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DgaDynamicForm, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DgaDynamicForm, "dga-dynamic-form", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; "localeInput": { "alias": "locale"; "required": false; "isSignal": true; }; }, { "formSubmitted": "formSubmitted"; "formError": "formError"; "clearButtonClick": "clearButtonClick"; "draftSaved": "draftSaved"; }, never, never, true, never>;
+}
+
+declare class DgaDynamicFormField implements OnInit {
+    readonly field: _angular_core.InputSignal<DgaFormField>;
+    readonly form: _angular_core.InputSignal<FormGroup<any>>;
+    readonly locale: _angular_core.InputSignal<DgaFormLocale>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly error: _angular_core.InputSignal<string>;
+    readonly runtimeOptions: _angular_core.InputSignal<DgaFormFieldOption[]>;
+    readonly optionsLoaded: _angular_core.OutputEmitterRef<{
+        name: string;
+        options: DgaFormFieldOption[];
+    }>;
+    private readonly lookup;
+    private readonly destroyRef;
+    readonly loadedOptions: _angular_core.WritableSignal<DgaFormFieldOption[]>;
+    readonly controlId: string;
+    get control(): FormControl;
+    readonly labelText: _angular_core.Signal<string>;
+    readonly hintText: _angular_core.Signal<string>;
+    readonly placeholderText: _angular_core.Signal<string>;
+    readonly resolvedOptions: _angular_core.Signal<DgaFormFieldOption[]>;
+    readonly selectOptions: _angular_core.Signal<DgaSelectOption[]>;
+    ngOnInit(): void;
+    optionLabel(opt: DgaFormFieldOption): string;
+    isChecked(value: unknown): boolean;
+    toggleCheckbox(value: unknown, checked: boolean): void;
+    onSelectSearch(_value: string | string[]): void;
+    onRestrict(event: Event): void;
+    private applyLookupFilter;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DgaDynamicFormField, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DgaDynamicFormField, "dga-dynamic-form-field", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "form": { "alias": "form"; "required": true; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "runtimeOptions": { "alias": "runtimeOptions"; "required": false; "isSignal": true; }; }, { "optionsLoaded": "optionsLoaded"; }, never, never, true, never>;
+}
+
+declare class DgaDynamicFormService {
+    private readonly submitAdapter;
+    private readonly captcha;
+    /**
+     * Build a JSON payload from form values, applying fieldMapping / transformer / exclusions.
+     */
+    buildPayload(config: DgaDynamicFormConfig, values: Record<string, unknown>, fields: DgaFormField[]): Record<string, unknown> | FormData;
+    hasFileValues(data: Record<string, unknown>): boolean;
+    toFormData(data: Record<string, unknown>): FormData;
+    submitForm(config: DgaDynamicFormConfig, values: Record<string, unknown>, fields: DgaFormField[]): Observable<unknown>;
+    saveDraft(formId: string, values: Record<string, unknown>): void;
+    loadDraft(formId: string): Record<string, unknown> | null;
+    clearDraft(formId: string): void;
+    private storageKey;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DgaDynamicFormService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DgaDynamicFormService>;
+}
+
+declare function dgaDefaultValueForField(field: DgaFormField): unknown;
+declare function dgaBuildValidators(field: DgaFormField, includeRequired: boolean): ValidatorFn[];
+declare function dgaCreateControl(fb: FormBuilder, field: DgaFormField, includeRequired?: boolean): FormControl;
+declare function dgaBuildFormGroup(fb: FormBuilder, fields: DgaFormField[]): FormGroup;
+declare function dgaCollectFields(fields: DgaFormField[], wizardSteps?: {
+    fields: DgaFormField[];
+}[]): DgaFormField[];
+declare function dgaSetControlValidators(control: AbstractControl, field: DgaFormField, includeRequired: boolean): void;
+
+declare function dgaFindSelectedOption(field: DgaFormField | undefined, value: unknown, runtimeOptions?: DgaFormFieldOption[]): DgaFormFieldOption | undefined;
+/**
+ * Whether a field should be visible given the current form values.
+ */
+declare function dgaIsFieldVisible(field: DgaFormField, values: Record<string, unknown>, getOptions?: (name: string) => DgaFormFieldOption[] | undefined): boolean;
+declare function dgaIsRequiredWhen(field: DgaFormField, values: Record<string, unknown>, getOptions?: (name: string) => DgaFormFieldOption[] | undefined): boolean;
+
+/** Default bilingual label resolver. */
+declare const defaultFormI18nAdapter: DgaFormI18nAdapter;
+/** No-op captcha (always null token). */
+declare const noopCaptchaAdapter: DgaCaptchaAdapter;
+/** Empty lookup (returns []). Override in the host app. */
+declare const emptyLookupAdapter: DgaLookupAdapter;
+/**
+ * HTTP lookup that expects `{domain}/lookup/{name}` JSON arrays.
+ * Maps common `{ id|value, titleEn|labelEn|en, titleAr|labelAr|ar }` shapes.
+ */
+declare function createHttpLookupAdapter(http?: HttpClient): DgaLookupAdapter;
+declare function createHttpSubmitAdapter(http?: HttpClient): DgaSubmitAdapter;
+declare function createDgaToastAdapter(toasts?: DgaToastService): DgaFormToastAdapter;
+interface ProvideDgaDynamicFormOptions {
+    /** Use HttpClient-backed lookup (default: empty). */
+    httpLookup?: boolean;
+    /** Use HttpClient-backed submit (default: true). */
+    httpSubmit?: boolean;
+    /** Wire DgaToastService (default: true). */
+    dgaToast?: boolean;
+}
+/**
+ * Registers default adapters for lookup, submit, toast, captcha, and i18n.
+ * Call from `app.config.ts` providers.
+ */
+declare function provideDgaDynamicForm(options?: ProvideDgaDynamicFormOptions): EnvironmentProviders;
+/** Helper for templates / host apps. */
+declare function resolveFormLabel(label: {
+    en: string;
+    ar: string;
+} | undefined, locale: DgaFormLocale, fallback?: string): string;
+
+declare function dgaResolveLabel(label: DgaFormLabel | undefined, locale: DgaFormLocale, fallback?: string): string;
+declare function dgaDetectLocale(): DgaFormLocale;
+
+export { DGA_CAPTCHA_ADAPTER, DGA_DYNAMIC_FORM_FIELD_REGISTRY, DGA_FORM_I18N_ADAPTER, DGA_FORM_TOAST_ADAPTER, DGA_LOOKUP_ADAPTER, DGA_SUBMIT_ADAPTER, DgaDynamicForm, DgaDynamicFormField, DgaDynamicFormFieldRegistry, DgaDynamicFormService, createDgaToastAdapter, createHttpLookupAdapter, createHttpSubmitAdapter, defaultFormI18nAdapter, dgaBuildFormGroup, dgaBuildValidators, dgaCollectFields, dgaCreateControl, dgaDefaultValueForField, dgaDetectLocale, dgaFindSelectedOption, dgaIsFieldVisible, dgaIsRequiredWhen, dgaResolveLabel, dgaSetControlValidators, emptyLookupAdapter, noopCaptchaAdapter, provideDgaDynamicForm, resolveFormLabel };
+export type { DgaCaptchaAdapter, DgaDynamicFieldHostContext, DgaDynamicFieldRenderer, DgaDynamicFormConfig, DgaDynamicFormPayloadTransformer, DgaFormField, DgaFormFieldColumns, DgaFormFieldOption, DgaFormFieldType, DgaFormI18nAdapter, DgaFormLabel, DgaFormLocale, DgaFormStep, DgaFormToastAdapter, DgaHttpMethod, DgaInputRestriction, DgaLookupAdapter, DgaLookupRequest, DgaSubmitAdapter, DgaSubmitRequest, DgaToastVariant, DgaWizardConfig, ProvideDgaDynamicFormOptions };