@yomotech/view-toolkit 1.0.28 → 1.0.30

package/fesm2022/yomotech-view-toolkit.mjs

@@ -47,6 +47,8 @@ import * as i11$1 from 'ng-zorro-antd/menu';
 import { NzMenuModule } from 'ng-zorro-antd/menu';
 import * as i4$1 from '@okta/okta-angular';
 import { OktaAuthStateService, OKTA_AUTH } from '@okta/okta-angular';
+import * as i4$2 from 'primeng/textarea';
+import { TextareaModule } from 'primeng/textarea';
 import * as i1$4 from 'primeng/dynamicdialog';
 import { DynamicDialogModule } from 'primeng/dynamicdialog';
 import { SelectModule } from 'primeng/select';
@@ -5823,16 +5825,8 @@ function keyboardFor(property, option) {
         return null;
     if (['email', 'numeric', 'alpha', 'string', 'date', 'time'].includes(option?.keyboardType))
         return option.keyboardType;
-    const type = basicType(property), control = controlFor(property, option);
-    if (control === 'email' || option?.email || property?.format === 'email')
-        return 'email';
-    if (['number', 'integer', 'bigdecimal'].includes(type))
-        return 'numeric';
-    if (type === 'time')
-        return 'time';
-    if (['date', 'datetime'].includes(type))
-        return 'date';
-    return type === 'string' ? 'string' : null;
+    // Layout-selected keyboard wins. Omitted/unknown keyboards use the project's string default.
+    return 'string';
 }
 function classes(style) {
     return Array.isArray(style?.classes) ? style.classes.filter(Boolean).join(' ') : style?.classes || '';
@@ -6026,13 +6020,13 @@ class TextControlComponent extends ControlBase {
     reveal = false;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TextControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: TextControlComponent, isStandalone: true, selector: "vl-text-control", usesInheritance: true, ngImport: i0, template: `
-    <textarea *ngIf="control === 'textArea'; else single" [id]="inputId" [ngModel]="value"
+    <textarea pTextarea *ngIf="control === 'textArea'; else single" [id]="inputId" [ngModel]="value"
       (ngModelChange)="changed.emit($event)" [ngModelOptions]="{standalone:true}" (blur)="blurred.emit()"
       [disabled]="disabled" [readOnly]="readonly" [placeholder]="placeholder" [rows]="option.rows ?? 3"
       [attr.inputmode]="inputMode" [attr.autocomplete]="option.autocompleteHint || 'off'"
       [vlCustomKeyboard]="keyboard" [ngStyle]="styles(inputStyle)" [class]="classes(inputStyle)"></textarea>
-    <ng-template #single><div class="text-wrap">
-      <input [id]="inputId" [type]="control === 'password' && !reveal ? 'password' : control === 'email' ? 'email' : 'text'"
+    <ng-template #single><div class="text-wrap" [class.text-wrap--password]="control === 'password' && option.showPasswordToggle !== false">
+      <input pInputText [id]="inputId" [type]="control === 'password' && !reveal ? 'password' : control === 'email' ? 'email' : 'text'"
         [ngModel]="value" (ngModelChange)="changed.emit($event)" [ngModelOptions]="{standalone:true}" (blur)="blurred.emit()"
         [disabled]="disabled" [readOnly]="readonly" [placeholder]="placeholder" [attr.inputmode]="inputMode"
         [attr.autocomplete]="option.autocompleteHint || (control === 'password' ? 'current-password' : 'off')"
@@ -6040,18 +6034,18 @@ class TextControlComponent extends ControlBase {
       <button *ngIf="control === 'password' && option.showPasswordToggle !== false" type="button"
         [disabled]="disabled" (click)="reveal=!reveal" [attr.aria-label]="reveal?'Hide password':'Show password'"
         [attr.aria-pressed]="reveal">{{reveal?'Hide':'Show'}}</button>
-    </div></ng-template>`, isInline: true, styles: [":host{display:block;min-width:0}input,textarea{box-sizing:border-box;width:100%;padding:8px;border:1px solid #cbd5e1;border-radius:6px;font:inherit}textarea{resize:vertical}.text-wrap{display:flex;align-items:center;gap:6px}.text-wrap input{min-width:0;flex:1}button{font:inherit;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CustomKeyboardDirective, selector: "[vlCustomKeyboard]", inputs: ["vlCustomKeyboard"] }] });
+    </div></ng-template>`, isInline: true, styles: [":host{display:block;min-width:0}.text-wrap{display:contents}.text-wrap--password{display:flex;align-items:center;gap:6px}.text-wrap--password input{min-width:0;flex:1}button{font:inherit;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CustomKeyboardDirective, selector: "[vlCustomKeyboard]", inputs: ["vlCustomKeyboard"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4$2.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TextControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-text-control', standalone: true, imports: [CommonModule, FormsModule, CustomKeyboardDirective], template: `
-    <textarea *ngIf="control === 'textArea'; else single" [id]="inputId" [ngModel]="value"
+            args: [{ selector: 'vl-text-control', standalone: true, imports: [CommonModule, FormsModule, CustomKeyboardDirective, InputTextModule, TextareaModule], template: `
+    <textarea pTextarea *ngIf="control === 'textArea'; else single" [id]="inputId" [ngModel]="value"
       (ngModelChange)="changed.emit($event)" [ngModelOptions]="{standalone:true}" (blur)="blurred.emit()"
       [disabled]="disabled" [readOnly]="readonly" [placeholder]="placeholder" [rows]="option.rows ?? 3"
       [attr.inputmode]="inputMode" [attr.autocomplete]="option.autocompleteHint || 'off'"
       [vlCustomKeyboard]="keyboard" [ngStyle]="styles(inputStyle)" [class]="classes(inputStyle)"></textarea>
-    <ng-template #single><div class="text-wrap">
-      <input [id]="inputId" [type]="control === 'password' && !reveal ? 'password' : control === 'email' ? 'email' : 'text'"
+    <ng-template #single><div class="text-wrap" [class.text-wrap--password]="control === 'password' && option.showPasswordToggle !== false">
+      <input pInputText [id]="inputId" [type]="control === 'password' && !reveal ? 'password' : control === 'email' ? 'email' : 'text'"
         [ngModel]="value" (ngModelChange)="changed.emit($event)" [ngModelOptions]="{standalone:true}" (blur)="blurred.emit()"
         [disabled]="disabled" [readOnly]="readonly" [placeholder]="placeholder" [attr.inputmode]="inputMode"
         [attr.autocomplete]="option.autocompleteHint || (control === 'password' ? 'current-password' : 'off')"
@@ -6059,7 +6053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
       <button *ngIf="control === 'password' && option.showPasswordToggle !== false" type="button"
         [disabled]="disabled" (click)="reveal=!reveal" [attr.aria-label]="reveal?'Hide password':'Show password'"
         [attr.aria-pressed]="reveal">{{reveal?'Hide':'Show'}}</button>
-    </div></ng-template>`, styles: [":host{display:block;min-width:0}input,textarea{box-sizing:border-box;width:100%;padding:8px;border:1px solid #cbd5e1;border-radius:6px;font:inherit}textarea{resize:vertical}.text-wrap{display:flex;align-items:center;gap:6px}.text-wrap input{min-width:0;flex:1}button{font:inherit;cursor:pointer}\n"] }]
+    </div></ng-template>`, styles: [":host{display:block;min-width:0}.text-wrap{display:contents}.text-wrap--password{display:flex;align-items:center;gap:6px}.text-wrap--password input{min-width:0;flex:1}button{font:inherit;cursor:pointer}\n"] }]
         }] });
 
 class NumericControlComponent extends ControlBase {
@@ -6117,9 +6111,9 @@ class NumericControlComponent extends ControlBase {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NumericControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: NumericControlComponent, isStandalone: true, selector: "vl-numeric-control", usesInheritance: true, ngImport: i0, template: `
-  <div class="numeric-wrap">
+  <div class="numeric-wrap" [class.numeric-wrap--group]="control === 'spinner' || (control === 'slider' && option.showValue) || option.unitLabel || option.unit">
     <button *ngIf="control==='spinner'" type="button" aria-label="Decrease value" [disabled]="disabled||readonly" (click)="step(-1)">−</button>
-    <input [id]="inputId" [type]="control==='slider'?'range':'text'" [value]="displayValue" [disabled]="disabled || (readonly && control==='slider')"
+    <input pInputText [id]="inputId" [type]="control==='slider'?'range':'text'" [value]="displayValue" [disabled]="disabled || (readonly && control==='slider')"
       [readOnly]="readonly" [attr.inputmode]="keyboard==='numeric'?'decimal':inputMode" [placeholder]="placeholder"
       [attr.min]="rules.minimum ?? (control==='slider'?0:null)" [attr.max]="rules.maximum ?? (control==='slider'?100:null)"
       [attr.step]="option.step ?? (integer?1:'any')" [vlCustomKeyboard]="control==='slider'?null:keyboard"
@@ -6128,14 +6122,14 @@ class NumericControlComponent extends ControlBase {
     <button *ngIf="control==='spinner'" type="button" aria-label="Increase value" [disabled]="disabled||readonly" (click)="step(1)">+</button>
     <span *ngIf="control==='slider'&&option.showValue">{{value}}</span>
     <span *ngIf="option.unitLabel || option.unit">{{option.unitLabel || option.unit}}</span>
-  </div>`, isInline: true, styles: [":host{display:block;min-width:0}.numeric-wrap{display:flex;align-items:center;gap:6px}input{min-width:0;flex:1;box-sizing:border-box;padding:8px;border:1px solid #cbd5e1;border-radius:6px;font:inherit}button{font:inherit;padding:7px 12px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CustomKeyboardDirective, selector: "[vlCustomKeyboard]", inputs: ["vlCustomKeyboard"] }] });
+  </div>`, isInline: true, styles: [":host{display:block;min-width:0}.numeric-wrap{display:contents}.numeric-wrap--group{display:flex;align-items:center;gap:6px}.numeric-wrap--group input{min-width:0;flex:1}button{font:inherit;padding:7px 12px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CustomKeyboardDirective, selector: "[vlCustomKeyboard]", inputs: ["vlCustomKeyboard"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NumericControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-numeric-control', standalone: true, imports: [CommonModule, CustomKeyboardDirective], template: `
-  <div class="numeric-wrap">
+            args: [{ selector: 'vl-numeric-control', standalone: true, imports: [CommonModule, CustomKeyboardDirective, InputTextModule], template: `
+  <div class="numeric-wrap" [class.numeric-wrap--group]="control === 'spinner' || (control === 'slider' && option.showValue) || option.unitLabel || option.unit">
     <button *ngIf="control==='spinner'" type="button" aria-label="Decrease value" [disabled]="disabled||readonly" (click)="step(-1)">−</button>
-    <input [id]="inputId" [type]="control==='slider'?'range':'text'" [value]="displayValue" [disabled]="disabled || (readonly && control==='slider')"
+    <input pInputText [id]="inputId" [type]="control==='slider'?'range':'text'" [value]="displayValue" [disabled]="disabled || (readonly && control==='slider')"
       [readOnly]="readonly" [attr.inputmode]="keyboard==='numeric'?'decimal':inputMode" [placeholder]="placeholder"
       [attr.min]="rules.minimum ?? (control==='slider'?0:null)" [attr.max]="rules.maximum ?? (control==='slider'?100:null)"
       [attr.step]="option.step ?? (integer?1:'any')" [vlCustomKeyboard]="control==='slider'?null:keyboard"
@@ -6144,7 +6138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
     <button *ngIf="control==='spinner'" type="button" aria-label="Increase value" [disabled]="disabled||readonly" (click)="step(1)">+</button>
     <span *ngIf="control==='slider'&&option.showValue">{{value}}</span>
     <span *ngIf="option.unitLabel || option.unit">{{option.unitLabel || option.unit}}</span>
-  </div>`, styles: [":host{display:block;min-width:0}.numeric-wrap{display:flex;align-items:center;gap:6px}input{min-width:0;flex:1;box-sizing:border-box;padding:8px;border:1px solid #cbd5e1;border-radius:6px;font:inherit}button{font:inherit;padding:7px 12px;cursor:pointer}\n"] }]
+  </div>`, styles: [":host{display:block;min-width:0}.numeric-wrap{display:contents}.numeric-wrap--group{display:flex;align-items:center;gap:6px}.numeric-wrap--group input{min-width:0;flex:1}button{font:inherit;padding:7px 12px;cursor:pointer}\n"] }]
         }] });
 
 class ToggleControlComponent extends ControlBase {
@@ -6171,14 +6165,20 @@ class SelectionControlComponent extends ControlBase {
     items;
     suggestions = [];
     equal = Object.is;
-    get choices() {
-        if (basicType(this.property) === 'boolean' && this.items === undefined && !this.option.values)
-            return choicesFor(this.property, { ...this.option, values: [true, false], labels: this.option.labels ?? ['Yes', 'No'] });
-        return choicesFor(this.property, this.option, this.items);
-    }
+    choices = [];
     get display() { return this.choices.find(item => Object.is(item.value, this.value)) ?? this.value ?? ''; }
-    ngOnChanges() { this.suggestions = this.choices; }
-    complete(event) { const query = `${event.query ?? ''}`.toLowerCase(); this.suggestions = this.choices.filter(item => item.label.toLowerCase().includes(query)); }
+    ngOnChanges() {
+        const next = basicType(this.property) === 'boolean' && this.items === undefined && !this.option.values
+            ? choicesFor(this.property, { ...this.option, values: [true, false], labels: this.option.labels ?? ['Yes', 'No'] })
+            : choicesFor(this.property, this.option, this.items);
+        // Keep PrimeNG's selected object stable across value/option change detection.
+        // Each component owns its suggestions; typing in one cannot replace another's list.
+        if (next.length !== this.choices.length || next.some((item, index) => !Object.is(item.value, this.choices[index]?.value) || item.label !== this.choices[index]?.label || item.original !== this.choices[index]?.original)) {
+            this.choices = next;
+            this.suggestions = next;
+        }
+    }
+    complete(event) { const query = `${event.query ?? ''}`.toLowerCase(); this.suggestions = this.choices.filter(item => this.option.filterMode === 'contains' ? item.label.toLowerCase().includes(query) : item.label.toLowerCase().startsWith(query)); }
     typed(value) {
         if (typeof value === 'string' && (this.control === 'autocomplete' || this.option.allowCustom === true) && !this.disabled && !this.readonly)
             this.changed.emit(value);
@@ -6204,12 +6204,14 @@ class SelectionControlComponent extends ControlBase {
     <label *ngFor="let item of choices;let index=index"><input type="radio" [name]="inputId" [id]="inputId+'-'+index"
       [checked]="equal(value,item.value)" [disabled]="disabled||readonly" (change)="select(item)" (blur)="blurred.emit()" />{{item.label}}</label>
   </div>
-  <p-autocomplete *ngIf="control==='combobox'||control==='autocomplete'" [inputId]="inputId" [ngModel]="display"
+  <p-autocomplete *ngIf="control==='combobox'||control==='autocomplete'" [inputId]="inputId" styleClass="custom-autocomplete" [class]="classes(inputStyle)" [ngModel]="display"
     (ngModelChange)="typed($event)" [ngModelOptions]="{standalone:true}" [suggestions]="suggestions" optionLabel="label"
     (completeMethod)="complete($event)" (onSelect)="select($event.value)" (onBlur)="blurred.emit()"
-    [dropdown]="control==='combobox'" [forceSelection]="control==='combobox'&&option.allowCustom!==true"
-    [minLength]="option.minChars ?? 1" [placeholder]="placeholder" [disabled]="disabled||readonly"
-    [vlCustomKeyboard]="keyboard" appendTo="body" [ngStyle]="styles(inputStyle)"></p-autocomplete>`, isInline: true, styles: [":host{display:block;min-width:0}select{width:100%;box-sizing:border-box;padding:8px;border:1px solid #cbd5e1;border-radius:6px;font:inherit}.radio-list{display:flex;gap:10px}.radio-list label{display:flex;gap:6px;align-items:center}::ng-deep vl-selection-control .p-autocomplete{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i18.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: CustomKeyboardDirective, selector: "[vlCustomKeyboard]", inputs: ["vlCustomKeyboard"] }] });
+    [dropdown]="option.showDropdown !== false" [forceSelection]="option.forceSelection ?? (control==='combobox'&&option.allowCustom!==true)"
+    [minLength]="option.minChars ?? 1" [delay]="option.delay ?? 300"
+    [showClear]="option.showClear ?? false" [completeOnFocus]="option.completeOnFocus ?? false"
+    [dropdownMode]="option.dropdownMode || 'blank'" [placeholder]="placeholder" [disabled]="disabled||readonly"
+    [vlCustomKeyboard]="keyboard" appendTo="body" [ngStyle]="styles(inputStyle)"></p-autocomplete>`, isInline: true, styles: [":host{display:block;min-width:0}.radio-list{display:flex;gap:10px}.radio-list label{display:flex;gap:6px;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i18.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: CustomKeyboardDirective, selector: "[vlCustomKeyboard]", inputs: ["vlCustomKeyboard"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SelectionControlComponent, decorators: [{
             type: Component,
@@ -6225,12 +6227,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
     <label *ngFor="let item of choices;let index=index"><input type="radio" [name]="inputId" [id]="inputId+'-'+index"
       [checked]="equal(value,item.value)" [disabled]="disabled||readonly" (change)="select(item)" (blur)="blurred.emit()" />{{item.label}}</label>
   </div>
-  <p-autocomplete *ngIf="control==='combobox'||control==='autocomplete'" [inputId]="inputId" [ngModel]="display"
+  <p-autocomplete *ngIf="control==='combobox'||control==='autocomplete'" [inputId]="inputId" styleClass="custom-autocomplete" [class]="classes(inputStyle)" [ngModel]="display"
     (ngModelChange)="typed($event)" [ngModelOptions]="{standalone:true}" [suggestions]="suggestions" optionLabel="label"
     (completeMethod)="complete($event)" (onSelect)="select($event.value)" (onBlur)="blurred.emit()"
-    [dropdown]="control==='combobox'" [forceSelection]="control==='combobox'&&option.allowCustom!==true"
-    [minLength]="option.minChars ?? 1" [placeholder]="placeholder" [disabled]="disabled||readonly"
-    [vlCustomKeyboard]="keyboard" appendTo="body" [ngStyle]="styles(inputStyle)"></p-autocomplete>`, styles: [":host{display:block;min-width:0}select{width:100%;box-sizing:border-box;padding:8px;border:1px solid #cbd5e1;border-radius:6px;font:inherit}.radio-list{display:flex;gap:10px}.radio-list label{display:flex;gap:6px;align-items:center}::ng-deep vl-selection-control .p-autocomplete{width:100%}\n"] }]
+    [dropdown]="option.showDropdown !== false" [forceSelection]="option.forceSelection ?? (control==='combobox'&&option.allowCustom!==true)"
+    [minLength]="option.minChars ?? 1" [delay]="option.delay ?? 300"
+    [showClear]="option.showClear ?? false" [completeOnFocus]="option.completeOnFocus ?? false"
+    [dropdownMode]="option.dropdownMode || 'blank'" [placeholder]="placeholder" [disabled]="disabled||readonly"
+    [vlCustomKeyboard]="keyboard" appendTo="body" [ngStyle]="styles(inputStyle)"></p-autocomplete>`, styles: [":host{display:block;min-width:0}.radio-list{display:flex;gap:10px}.radio-list label{display:flex;gap:6px;align-items:center}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }] } });
@@ -6326,7 +6330,7 @@ class TemporalControlComponent extends ControlBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TemporalControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: TemporalControlComponent, isStandalone: true, selector: "vl-temporal-control", usesInheritance: true, ngImport: i0, template: `
   <div class="picker-field">
-    <p-datepicker #calendar [inputId]="inputId" [ngModel]="dateValue" (ngModelChange)="choose($event)"
+    <p-datepicker #calendar styleClass="custom-datepicker" [inputId]="inputId" [ngModel]="dateValue" (ngModelChange)="choose($event)"
       [ngModelOptions]="{standalone:true}" [disabled]="disabled||readonly" [readonlyInput]="option.allowManualInput === false"
       [timeOnly]="control==='time'" [showTime]="control==='datetime'" [showSeconds]="option.showSeconds ?? false"
       [hourFormat]="option.hourFormat || '24'" [dateFormat]="displayFormat" [placeholder]="placeholder"
@@ -6341,13 +6345,13 @@ class TemporalControlComponent extends ControlBase {
     <button type="button" class="picker-field__icon" [disabled]="disabled||readonly" [attr.aria-label]="control==='time'?'Open time picker':'Open calendar'"
       (pointerdown)="picker.openFromIcon($event,calendar)" (click)="picker.blockIconClick($event)"><i [class]="control==='time'?'pi pi-clock':'pi pi-calendar'"></i></button>
   </div>
-  <small *ngIf="error" role="alert">{{error}}</small>`, isInline: true, styles: [":host{display:block;min-width:0}.picker-field{position:relative;display:flex;align-items:center}.picker-field__icon{position:absolute;right:6px;background:transparent;border:0;cursor:pointer}small{color:#b91c1c}::ng-deep vl-temporal-control .p-datepicker{width:100%}::ng-deep vl-temporal-control .p-datepicker-input{width:100%;padding-right:36px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i12.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: CustomKeyboardDirective, selector: "[vlCustomKeyboard]", inputs: ["vlCustomKeyboard"] }] });
+  <small *ngIf="error" role="alert">{{error}}</small>`, isInline: true, styles: [":host{display:block;min-width:0}.picker-field{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i12.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: CustomKeyboardDirective, selector: "[vlCustomKeyboard]", inputs: ["vlCustomKeyboard"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TemporalControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-temporal-control', standalone: true, imports: [CommonModule, FormsModule, DatePickerModule, CustomKeyboardDirective], template: `
   <div class="picker-field">
-    <p-datepicker #calendar [inputId]="inputId" [ngModel]="dateValue" (ngModelChange)="choose($event)"
+    <p-datepicker #calendar styleClass="custom-datepicker" [inputId]="inputId" [ngModel]="dateValue" (ngModelChange)="choose($event)"
       [ngModelOptions]="{standalone:true}" [disabled]="disabled||readonly" [readonlyInput]="option.allowManualInput === false"
       [timeOnly]="control==='time'" [showTime]="control==='datetime'" [showSeconds]="option.showSeconds ?? false"
       [hourFormat]="option.hourFormat || '24'" [dateFormat]="displayFormat" [placeholder]="placeholder"
@@ -6362,7 +6366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
     <button type="button" class="picker-field__icon" [disabled]="disabled||readonly" [attr.aria-label]="control==='time'?'Open time picker':'Open calendar'"
       (pointerdown)="picker.openFromIcon($event,calendar)" (click)="picker.blockIconClick($event)"><i [class]="control==='time'?'pi pi-clock':'pi pi-calendar'"></i></button>
   </div>
-  <small *ngIf="error" role="alert">{{error}}</small>`, styles: [":host{display:block;min-width:0}.picker-field{position:relative;display:flex;align-items:center}.picker-field__icon{position:absolute;right:6px;background:transparent;border:0;cursor:pointer}small{color:#b91c1c}::ng-deep vl-temporal-control .p-datepicker{width:100%}::ng-deep vl-temporal-control .p-datepicker-input{width:100%;padding-right:36px}\n"] }]
+  <small *ngIf="error" role="alert">{{error}}</small>`, styles: [":host{display:block;min-width:0}.picker-field{position:relative}\n"] }]
         }] });
 
 class MediaControlComponent extends ControlBase {
@@ -6461,9 +6465,21 @@ class FieldRendererComponent {
     }
     get afterLabel() { return ['checkbox', 'switch'].includes(this.control) && (this.option.labelPosition === 'right' || this.option.postfixCaption === true); }
     get innerStyle() {
-        if (this.field?.layout === 'horizontal')
-            return { display: 'grid', gridTemplateColumns: '80px minmax(0,1fr)', alignItems: 'center', gap: '10px', ...(this.field?.layoutStyle || {}) };
-        return { display: 'grid', gap: '6px', ...(this.field?.layoutStyle || {}) };
+        // Same layout defaults as ModelComponent.getFieldInnerLayoutStyle().
+        const layoutStyle = this.field?.layoutStyle || {};
+        if (this.field?.layout === 'horizontal') {
+            return {
+                display: 'grid',
+                gridTemplateColumns: layoutStyle.gridTemplateColumns || layoutStyle['grid-template-columns'] || '80px minmax(0, 1fr)',
+                alignItems: layoutStyle.alignItems || 'center',
+                gap: layoutStyle.gap || '10px',
+                width: '100%', minWidth: '0', boxSizing: 'border-box',
+                ...layoutStyle
+            };
+        }
+        return { display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)',
+            gap: layoutStyle.gap || '6px', width: '100%', minWidth: '0',
+            boxSizing: 'border-box', ...layoutStyle };
     }
     get resolvedOption() {
         const p = this.property;
@@ -6511,11 +6527,11 @@ class FieldRendererComponent {
     }
     blur() { this.touched = true; this.onTouched(); this.fieldBlur.emit(); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FieldRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: FieldRendererComponent, isStandalone: true, selector: "vl-field-renderer", inputs: { field: "field", property: "property", items: "items", translations: "translations", errorMessages: "errorMessages", showErrors: "showErrors" }, outputs: { itemSelected: "itemSelected", fieldBlur: "fieldBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FieldRendererComponent), multi: true }, { provide: NG_VALIDATORS, useExisting: forwardRef(() => FieldRendererComponent), multi: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"option.visible !== false\" [ngStyle]=\"innerStyle\"\n  [attr.aria-disabled]=\"disabled\">\n  <label *ngIf=\"label && !afterLabel\"\n    [attr.for]=\"control==='radiobutton'?null:inputId\"\n    [ngStyle]=\"styles(field.label?.style)\"\n    [class]=\"classes(field.label?.style)\">\n    {{label}}<span *ngIf=\"resolvedOption.required\" aria-hidden=\"true\"> *</span>\n    <span *ngIf=\"option.tooltip\" class=\"help\"\n      [matTooltip]=\"translations[option.tooltip] || option.tooltip\" tabindex=\"0\"\n      [attr.aria-label]=\"translations[option.tooltip] || option.tooltip\">\u24D8</span>\n  </label>\n  <div class=\"control-area\"\n    [attr.aria-invalid]=\"errors && (touched||showErrors)?'true':null\"\n    [attr.aria-describedby]=\"errors && (touched||showErrors)?inputId+'-error':null\">\n    <div *ngIf=\"!allowed\" role=\"alert\">{{errorText}}</div>\n    <span *ngIf=\"allowed && protectedValue && type!=='media'\"\n      [ngStyle]=\"styles(field.scope?.style)\">{{formattedValue}}</span>\n    <ng-container *ngIf=\"allowed && (!protectedValue || type==='media')\">\n      <vl-text-control\n        *ngIf=\"type==='string' && ['textInput','textArea','password','email'].includes(control)\"\n        [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n        [control]=\"control\" [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-text-control>\n      <vl-numeric-control\n        *ngIf=\"['number','integer','bigdecimal'].includes(type)\" [value]=\"value\"\n        [property]=\"property\" [option]=\"resolvedOption\" [control]=\"control\"\n        [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-numeric-control>\n      <vl-toggle-control *ngIf=\"['checkbox','switch'].includes(control)\"\n        [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n        [control]=\"control\" [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-toggle-control>\n      <vl-selection-control\n        *ngIf=\"['dropdown','combobox','autocomplete','radiobutton'].includes(control)\"\n        [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n        [control]=\"control\" [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\" [items]=\"items\"\n        (itemSelected)=\"itemSelected.emit($event)\"></vl-selection-control>\n      <vl-temporal-control *ngIf=\"['date','time','datetime'].includes(type)\"\n        [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n        [control]=\"control\" [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-temporal-control>\n      <vl-media-control *ngIf=\"type==='media'\" [value]=\"value\"\n        [property]=\"property\" [option]=\"resolvedOption\" [control]=\"control\"\n        [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-media-control>\n    </ng-container>\n    <label *ngIf=\"label && afterLabel\" [attr.for]=\"inputId\"\n      [ngStyle]=\"styles(field.label?.style)\"\n      [class]=\"classes(field.label?.style)\">{{label}}</label>\n    <small *ngIf=\"errors && (touched||showErrors)\" [id]=\"inputId+'-error'\"\n      class=\"error\" role=\"alert\"\n      [ngStyle]=\"styles(field.validation?.style)\">{{errorText}}</small>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0}.control-area{min-width:0}.error{display:block;margin-top:4px;color:#b91c1c;font-size:12px}.help{margin-inline-start:5px;color:#64748b;cursor:help}label{font:inherit}.control-area>label{margin-inline-start:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i17.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TextControlComponent, selector: "vl-text-control" }, { kind: "component", type: NumericControlComponent, selector: "vl-numeric-control" }, { kind: "component", type: ToggleControlComponent, selector: "vl-toggle-control" }, { kind: "component", type: SelectionControlComponent, selector: "vl-selection-control", inputs: ["items"] }, { kind: "component", type: TemporalControlComponent, selector: "vl-temporal-control" }, { kind: "component", type: MediaControlComponent, selector: "vl-media-control" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: FieldRendererComponent, isStandalone: true, selector: "vl-field-renderer", inputs: { field: "field", property: "property", items: "items", translations: "translations", errorMessages: "errorMessages", showErrors: "showErrors" }, outputs: { itemSelected: "itemSelected", fieldBlur: "fieldBlur" }, host: { properties: { "class.form-group": "type !== 'media'", "class.mb-3": "type !== 'media'" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FieldRendererComponent), multi: true }, { provide: NG_VALIDATORS, useExisting: forwardRef(() => FieldRendererComponent), multi: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"option.visible !== false\" [ngStyle]=\"innerStyle\"\n  [attr.aria-disabled]=\"disabled\">\n  <label *ngIf=\"label && !afterLabel\"\n    [attr.for]=\"control==='radiobutton'?null:inputId\"\n    [ngStyle]=\"styles(field.label?.style)\"\n    [class]=\"classes(field.label?.style)\">\n    {{label}}<span *ngIf=\"resolvedOption.required && option.showRequiredIndicator === true\" aria-hidden=\"true\"> *</span>\n    <span *ngIf=\"option.tooltip\" class=\"help\"\n      [matTooltip]=\"translations[option.tooltip] || option.tooltip\" tabindex=\"0\"\n      [attr.aria-label]=\"translations[option.tooltip] || option.tooltip\">\u24D8</span>\n  </label>\n  <div class=\"control-area\"\n    [attr.aria-invalid]=\"errors && (touched||showErrors)?'true':null\"\n    [attr.aria-describedby]=\"errors && (touched||showErrors)?inputId+'-error':null\">\n    <div *ngIf=\"!allowed\" role=\"alert\">{{errorText}}</div>\n    <span *ngIf=\"allowed && protectedValue && type!=='media'\"\n      [ngStyle]=\"styles(field.scope?.style)\">{{formattedValue}}</span>\n    <ng-container *ngIf=\"allowed && (!protectedValue || type==='media')\">\n      <vl-text-control\n        *ngIf=\"type==='string' && ['textInput','textArea','password','email'].includes(control)\"\n        [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n        [control]=\"control\" [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-text-control>\n      <vl-numeric-control\n        *ngIf=\"['number','integer','bigdecimal'].includes(type)\" [value]=\"value\"\n        [property]=\"property\" [option]=\"resolvedOption\" [control]=\"control\"\n        [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-numeric-control>\n      <vl-toggle-control *ngIf=\"['checkbox','switch'].includes(control)\"\n        [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n        [control]=\"control\" [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-toggle-control>\n      <vl-selection-control\n        *ngIf=\"['dropdown','combobox','autocomplete','radiobutton'].includes(control)\"\n        [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n        [control]=\"control\" [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\" [items]=\"items\"\n        (itemSelected)=\"itemSelected.emit($event)\"></vl-selection-control>\n      <vl-temporal-control *ngIf=\"['date','time','datetime'].includes(type)\"\n        [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n        [control]=\"control\" [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-temporal-control>\n      <vl-media-control *ngIf=\"type==='media'\" [value]=\"value\"\n        [property]=\"property\" [option]=\"resolvedOption\" [control]=\"control\"\n        [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-media-control>\n    </ng-container>\n    <label *ngIf=\"label && afterLabel\" [attr.for]=\"inputId\"\n      [ngStyle]=\"styles(field.label?.style)\"\n      [class]=\"classes(field.label?.style)\">{{label}}</label>\n    <small *ngIf=\"errors && (touched||showErrors)\" [id]=\"inputId+'-error'\"\n      class=\"error text-danger\" role=\"alert\"\n      [ngStyle]=\"styles(field.validation?.style)\">{{errorText}}</small>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0}.control-area{min-width:0}.error{display:block}.help{margin-inline-start:5px;cursor:help}.control-area>label{margin-inline-start:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i17.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TextControlComponent, selector: "vl-text-control" }, { kind: "component", type: NumericControlComponent, selector: "vl-numeric-control" }, { kind: "component", type: ToggleControlComponent, selector: "vl-toggle-control" }, { kind: "component", type: SelectionControlComponent, selector: "vl-selection-control", inputs: ["items"] }, { kind: "component", type: TemporalControlComponent, selector: "vl-temporal-control" }, { kind: "component", type: MediaControlComponent, selector: "vl-media-control" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FieldRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-field-renderer', standalone: true, imports: [CommonModule, MatTooltipModule, TextControlComponent, NumericControlComponent, ToggleControlComponent, SelectionControlComponent, TemporalControlComponent, MediaControlComponent], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FieldRendererComponent), multi: true }, { provide: NG_VALIDATORS, useExisting: forwardRef(() => FieldRendererComponent), multi: true }], template: "<div *ngIf=\"option.visible !== false\" [ngStyle]=\"innerStyle\"\n  [attr.aria-disabled]=\"disabled\">\n  <label *ngIf=\"label && !afterLabel\"\n    [attr.for]=\"control==='radiobutton'?null:inputId\"\n    [ngStyle]=\"styles(field.label?.style)\"\n    [class]=\"classes(field.label?.style)\">\n    {{label}}<span *ngIf=\"resolvedOption.required\" aria-hidden=\"true\"> *</span>\n    <span *ngIf=\"option.tooltip\" class=\"help\"\n      [matTooltip]=\"translations[option.tooltip] || option.tooltip\" tabindex=\"0\"\n      [attr.aria-label]=\"translations[option.tooltip] || option.tooltip\">\u24D8</span>\n  </label>\n  <div class=\"control-area\"\n    [attr.aria-invalid]=\"errors && (touched||showErrors)?'true':null\"\n    [attr.aria-describedby]=\"errors && (touched||showErrors)?inputId+'-error':null\">\n    <div *ngIf=\"!allowed\" role=\"alert\">{{errorText}}</div>\n    <span *ngIf=\"allowed && protectedValue && type!=='media'\"\n      [ngStyle]=\"styles(field.scope?.style)\">{{formattedValue}}</span>\n    <ng-container *ngIf=\"allowed && (!protectedValue || type==='media')\">\n      <vl-text-control\n        *ngIf=\"type==='string' && ['textInput','textArea','password','email'].includes(control)\"\n        [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n        [control]=\"control\" [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-text-control>\n      <vl-numeric-control\n        *ngIf=\"['number','integer','bigdecimal'].includes(type)\" [value]=\"value\"\n        [property]=\"property\" [option]=\"resolvedOption\" [control]=\"control\"\n        [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-numeric-control>\n      <vl-toggle-control *ngIf=\"['checkbox','switch'].includes(control)\"\n        [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n        [control]=\"control\" [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-toggle-control>\n      <vl-selection-control\n        *ngIf=\"['dropdown','combobox','autocomplete','radiobutton'].includes(control)\"\n        [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n        [control]=\"control\" [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\" [items]=\"items\"\n        (itemSelected)=\"itemSelected.emit($event)\"></vl-selection-control>\n      <vl-temporal-control *ngIf=\"['date','time','datetime'].includes(type)\"\n        [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n        [control]=\"control\" [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-temporal-control>\n      <vl-media-control *ngIf=\"type==='media'\" [value]=\"value\"\n        [property]=\"property\" [option]=\"resolvedOption\" [control]=\"control\"\n        [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-media-control>\n    </ng-container>\n    <label *ngIf=\"label && afterLabel\" [attr.for]=\"inputId\"\n      [ngStyle]=\"styles(field.label?.style)\"\n      [class]=\"classes(field.label?.style)\">{{label}}</label>\n    <small *ngIf=\"errors && (touched||showErrors)\" [id]=\"inputId+'-error'\"\n      class=\"error\" role=\"alert\"\n      [ngStyle]=\"styles(field.validation?.style)\">{{errorText}}</small>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0}.control-area{min-width:0}.error{display:block;margin-top:4px;color:#b91c1c;font-size:12px}.help{margin-inline-start:5px;color:#64748b;cursor:help}label{font:inherit}.control-area>label{margin-inline-start:8px}\n"] }]
+            args: [{ selector: 'vl-field-renderer', standalone: true, imports: [CommonModule, MatTooltipModule, TextControlComponent, NumericControlComponent, ToggleControlComponent, SelectionControlComponent, TemporalControlComponent, MediaControlComponent], host: { '[class.form-group]': "type !== 'media'", '[class.mb-3]': "type !== 'media'" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FieldRendererComponent), multi: true }, { provide: NG_VALIDATORS, useExisting: forwardRef(() => FieldRendererComponent), multi: true }], template: "<div *ngIf=\"option.visible !== false\" [ngStyle]=\"innerStyle\"\n  [attr.aria-disabled]=\"disabled\">\n  <label *ngIf=\"label && !afterLabel\"\n    [attr.for]=\"control==='radiobutton'?null:inputId\"\n    [ngStyle]=\"styles(field.label?.style)\"\n    [class]=\"classes(field.label?.style)\">\n    {{label}}<span *ngIf=\"resolvedOption.required && option.showRequiredIndicator === true\" aria-hidden=\"true\"> *</span>\n    <span *ngIf=\"option.tooltip\" class=\"help\"\n      [matTooltip]=\"translations[option.tooltip] || option.tooltip\" tabindex=\"0\"\n      [attr.aria-label]=\"translations[option.tooltip] || option.tooltip\">\u24D8</span>\n  </label>\n  <div class=\"control-area\"\n    [attr.aria-invalid]=\"errors && (touched||showErrors)?'true':null\"\n    [attr.aria-describedby]=\"errors && (touched||showErrors)?inputId+'-error':null\">\n    <div *ngIf=\"!allowed\" role=\"alert\">{{errorText}}</div>\n    <span *ngIf=\"allowed && protectedValue && type!=='media'\"\n      [ngStyle]=\"styles(field.scope?.style)\">{{formattedValue}}</span>\n    <ng-container *ngIf=\"allowed && (!protectedValue || type==='media')\">\n      <vl-text-control\n        *ngIf=\"type==='string' && ['textInput','textArea','password','email'].includes(control)\"\n        [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n        [control]=\"control\" [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-text-control>\n      <vl-numeric-control\n        *ngIf=\"['number','integer','bigdecimal'].includes(type)\" [value]=\"value\"\n        [property]=\"property\" [option]=\"resolvedOption\" [control]=\"control\"\n        [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-numeric-control>\n      <vl-toggle-control *ngIf=\"['checkbox','switch'].includes(control)\"\n        [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n        [control]=\"control\" [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-toggle-control>\n      <vl-selection-control\n        *ngIf=\"['dropdown','combobox','autocomplete','radiobutton'].includes(control)\"\n        [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n        [control]=\"control\" [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\" [items]=\"items\"\n        (itemSelected)=\"itemSelected.emit($event)\"></vl-selection-control>\n      <vl-temporal-control *ngIf=\"['date','time','datetime'].includes(type)\"\n        [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n        [control]=\"control\" [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-temporal-control>\n      <vl-media-control *ngIf=\"type==='media'\" [value]=\"value\"\n        [property]=\"property\" [option]=\"resolvedOption\" [control]=\"control\"\n        [inputId]=\"inputId\"\n        [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n        (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-media-control>\n    </ng-container>\n    <label *ngIf=\"label && afterLabel\" [attr.for]=\"inputId\"\n      [ngStyle]=\"styles(field.label?.style)\"\n      [class]=\"classes(field.label?.style)\">{{label}}</label>\n    <small *ngIf=\"errors && (touched||showErrors)\" [id]=\"inputId+'-error'\"\n      class=\"error text-danger\" role=\"alert\"\n      [ngStyle]=\"styles(field.validation?.style)\">{{errorText}}</small>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0}.control-area{min-width:0}.error{display:block}.help{margin-inline-start:5px;cursor:help}.control-area>label{margin-inline-start:8px}\n"] }]
         }], propDecorators: { field: [{
                 type: Input
             }], property: [{
@@ -6817,8 +6833,8 @@ class ModelComponent {
         }
     }
     autocompSelectEvent(obj, formField) {
-        const mapping = formField.option?.onSelect?.mapFields;
-        if (!mapping)
+        const mapping = formField?.option?.onSelect?.mapFields;
+        if (!mapping || obj == null)
             return;
         Object.entries(mapping).forEach(([targetProp, sourceKey]) => {
             const scope = this.getScope(formField.scope.reference);
@@ -7018,15 +7034,17 @@ class ModelComponent {
         const scope = this.getScope(formField.scope.reference);
         if (rule?.resetValue?.length > 0) {
             rule.resetValue.forEach((prop) => {
-                this.modalItemInfo.propertySchema[scope][prop].value = null;
+                if (this.modalItemInfo.propertySchema[scope]?.[prop]) {
+                    this.modalItemInfo.propertySchema[scope][prop].value = null;
+                }
             });
         }
     }
     isRuleTriggered(rule, formField) {
         if (rule.when === 'timeRangeComplete') {
             const scope = this.getScope(formField.scope.reference);
-            return (this.modalItemInfo.propertySchema[scope]?.workDayTimeFrom?.value &&
-                this.modalItemInfo.propertySchema[scope]?.workDayTimeTo?.value);
+            return (this.modalItemInfo.propertySchema[scope]?.[formField.scope.reference.split('/').pop()]?.value &&
+                this.modalItemInfo.propertySchema[scope]?.[rule.with || 'workDayTimeTo']?.value);
         }
         else if (rule.when === 'change') {
             return true;
@@ -7036,37 +7054,47 @@ class ModelComponent {
     applyDurationRule(rule, formField) {
         const scope = this.getScope(formField.scope.reference);
         const schema = this.modalItemInfo.propertySchema[scope];
-        const fromTimeVal = schema?.workDayTimeFrom?.value;
-        const toTimeVal = schema?.workDayTimeTo?.value;
-        const baseDateVal = schema?.fromDate?.value;
-        // 🔒 Guard
-        if (!fromTimeVal || !toTimeVal || !baseDateVal) {
-            schema[rule.params.durationField].value = '';
+        const currentKey = formField.scope.reference.split('/').pop();
+        // Explicit keys support other time pairs; existing work-order schemas keep their meaning.
+        const fromKey = rule.params?.fromTime || (schema.workDayTimeFrom ? 'workDayTimeFrom' : currentKey);
+        const toKey = rule.params?.toTime || (schema.workDayTimeTo ? 'workDayTimeTo' : rule.with);
+        const fromDateKey = rule.params?.fromDate || 'fromDate';
+        const toDateKey = rule.params?.toDate || 'toDate';
+        const durationKey = rule.params?.durationField;
+        if (!durationKey || !schema?.[durationKey])
+            return;
+        const fromTime = this.ruleClock(schema?.[fromKey]?.value);
+        const toTime = this.ruleClock(schema?.[toKey]?.value);
+        const baseValue = schema?.[fromDateKey]?.value;
+        const dateOnly = typeof baseValue === 'string' && /^(\d{4})-(\d{2})-(\d{2})$/.exec(baseValue);
+        const baseDate = dateOnly ? new Date(+dateOnly[1], +dateOnly[2] - 1, +dateOnly[3])
+            : baseValue == null || baseValue === '' ? null : new Date(baseValue);
+        if (!fromTime || !toTime || !baseDate || Number.isNaN(baseDate.getTime())) {
+            schema[durationKey].value = '';
             return;
         }
-        // 📅 Base date (From Date)
-        const baseDate = new Date(baseDateVal);
-        baseDate.setHours(0, 0, 0, 0);
-        // ⏱ FROM datetime
         const fromDateTime = new Date(baseDate);
-        fromDateTime.setHours(fromTimeVal.getHours(), fromTimeVal.getMinutes(), 0, 0);
-        // ⏱ TO datetime
-        let toDateTime = new Date(baseDate);
-        toDateTime.setHours(toTimeVal.getHours(), toTimeVal.getMinutes(), 0, 0);
-        // 🌙 Overnight handling
-        if (toDateTime <= fromDateTime) {
+        fromDateTime.setHours(fromTime[0], fromTime[1], 0, 0);
+        const toDateTime = new Date(baseDate);
+        toDateTime.setHours(toTime[0], toTime[1], 0, 0);
+        // Preserve the existing overnight rule, including equal times meaning next day.
+        if (toDateTime <= fromDateTime)
             toDateTime.setDate(toDateTime.getDate() + 1);
+        const totalMinutes = Math.floor((toDateTime.getTime() - fromDateTime.getTime()) / 60000);
+        schema[durationKey].value = `${Math.floor(totalMinutes / 60)}:${`${totalMinutes % 60}`.padStart(2, '0')}`;
+        if (schema[toDateKey])
+            schema[toDateKey].value = new Date(toDateTime);
+    }
+    ruleClock(value) {
+        if (value == null || value === '')
+            return null;
+        if (typeof value === 'string') {
+            const time = /^(\d{2}):(\d{2})(?::\d{2})?$/.exec(value);
+            if (time)
+                return +time[1] < 24 && +time[2] < 60 ? [+time[1], +time[2]] : null;
         }
-        // ⏳ Duration calculation
-        const diffMs = toDateTime.getTime() - fromDateTime.getTime();
-        const totalMinutes = Math.floor(diffMs / 60000);
-        const hours = Math.floor(totalMinutes / 60);
-        const minutes = totalMinutes % 60;
-        const duration = `${hours}:${minutes.toString().padStart(2, '0')}`;
-        // ✅ Set duration
-        schema[rule.params.durationField].value = duration;
-        // ✅ Auto set To Date
-        schema.toDate.value = new Date(toDateTime);
+        const date = value instanceof Date ? value : new Date(value);
+        return Number.isNaN(date.getTime()) ? null : [date.getHours(), date.getMinutes()];
     }
     invokeSetformData() {
         void this.setFormDataHandler?.();
@@ -7215,7 +7243,7 @@ class ModelComponent {
             this.invokeSetformData();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ModelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$4.DynamicDialogRef }, { token: i1$4.DynamicDialogConfig }, { token: UtilityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: ModelComponent, isStandalone: true, selector: "vl-model", inputs: { errorMessages: "errorMessages", modalItemInfo: "modalItemInfo", selectedLanguageInfo: "selectedLanguageInfo", userInfo: "userInfo", setFormDataHandler: "setFormDataHandler" }, usesOnChanges: true, ngImport: i0, template: "<!-- Faramarz Yousefian and Agent Toni (Claude Opus 5.5) 2026-10-13\n     - fix: the placeholder comes from vlPlaceholder (pipes/placeholder.pipe.ts) - empty where the\n       project defines none; it showed the text \"undefined\" -->\n<!-- Faramarz Yousefian and Agent Toni (Claude Opus 5) 2026-10-07\n     - change: number, autocomplete, date and time fields take the toolkit keyboard of their\n       attribute type (keyboardTypeFor) instead of only an explicit option.keyboardType\n     - change: the date picker docks at the bottom on the devices (model-datepicker-panel--docked);\n       the time picker stays attached to its field in a compact form (model-timepicker-panel);\n       both report which picker closed (onPickerClose(picker)) -->\n\n<!-- Shuaib 2026-09-24\n     - change: the model field switch uses renderFieldType so legacy checkbox fields render as boolean. -->\n\n<!-- Faramarz Yousefian and Agent Toni (Claude Opus 5) 2026-09-19\n     - new: a @contract comment on the widest type coverage in the toolkit, and one on the credit\n       card case recording that the rename reached this file first -->\n<!-- Loader Spinner -->\n<div *ngIf=\"isLoading\" class=\"loader-overlay\">\n    <div class=\"spinner\"></div>\n</div>\n<div [style]=\"getStyleWithoutClasses(modalItemInfo?.layoutSchema?.style).style\"\n    [class]=\"modalItemInfo?.layoutSchema?.style?.classes[0]\">\n    <form #dynamicForm=\"ngForm\"\n        *ngIf=\"modalItemInfo?.layoutSchema?.formSections?.length > 0\"\n        (submit)=\"$event.preventDefault()\">\n        <div\n            *ngFor=\"let formSection of modalItemInfo?.layoutSchema?.formSections\">\n            <div *ngIf=\"formSection?.label?.caption\"\n                [class]=\"formSection?.label?.style?.classes[0]\"\n                [style]=\"getStyleWithoutClasses(formSection?.label?.style).style\">\n                {{formSection.label.caption}}\n            </div>\n            <div *ngIf=\"formSection?.formFields?.length > 0\"\n                [class]=\"formSection?.style?.classes?.[0] || ''\"\n                [ngStyle]=\"getSectionBodyStyle(formSection)\">\n                <div *ngFor=\"let formField of formSection.formFields\"\n                    [ngStyle]=\"getFieldWrapperStyle(formField)\"\n                    [style.display]=\"usesSharedField(formField) && formField.option?.visible === false ? 'none' : null\"\n                    [class]=\"formField?.style?.classes || ''\">\n\n                    <!-- @contract decision: the widest type coverage in the toolkit\n                         reality: every field type except the grid-only quantity renders here.\n                                  When another container drops a type, this is the way out.\n                         seen: measured 2026-09-19. Note the file is model.component.html while\n                               the container is called modal in layout files - that costs a\n                               search every time -->\n                    <!-- @contract compatibility: checkbox is rendered as boolean for existing projects. -->\n                    @if (usesSharedField(formField)) {\n                      @if (sharedProperty(formField); as property) {\n                        @if (formField.option?.visible !== false) {\n                          <vl-field-renderer [field]=\"formField\" [property]=\"property\"\n                            [ngModel]=\"property.value\" (ngModelChange)=\"onSharedFieldChange(formField,$event)\"\n                            [name]=\"formField.scope.reference\" [disabled]=\"formField.option?.disabled === true\"\n                            [items]=\"formField.data ?? property.data\" [translations]=\"selectedLanguageInfo?.selectedLanguage || {}\"\n                            [errorMessages]=\"errorMessages\" [showErrors]=\"sharedErrorsVisible\"\n                            (itemSelected)=\"autocompSelectEvent($event,formField)\">\n                          </vl-field-renderer>\n                        }\n                      }\n                    } @else {\n                    <div [ngSwitch]=\"renderFieldType(\n                        formField?.scope?.reference &&\n                        modalItemInfo?.propertySchema?.[\n                            getScope(formField.scope.reference)\n                        ]\n                            ? modalItemInfo.propertySchema[\n                                getScope(formField.scope.reference)\n                              ]?.[\n                                formField.scope.reference.split('/').pop()\n                              ]?.type\n                            : 'default'\n                    )\">\n                        <!-- Media control -->\n                        \n\n                        <!-- credit card control -->\n                        <!-- @contract decision: the credit card type is spelled creditCard\n                             reality: this file was renamed on 2026-09-15, form.component.html and\n                                      utility.service.ts followed on 2026-09-19. carditCard is read\n                                      nowhere any more.\n                             failure: a data object still declaring carditCard renders empty. -->\n                        <div *ngSwitchCase=\"'creditCard'\"\n                            [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                            [class]=\"formField.style?.classes[0]\">\n                            <div id=\"card-element\">\n                                <!-- a Stripe element will be inserted here -->\n                            </div>\n                            <!-- Used to display form errors -->\n                            <div id=\"card-errors\"\n                                class=\"displayError.textContent!=='': 'alert alert-danger mt-1'\">\n                            </div>\n                        </div>\n\n                        <!-- string control -->\n                        \n\n                        <!-- number control -->\n                        \n\n                        <!-- DateRange control -->\n                        <div *ngSwitchCase=\"'dateRange'\"\n                            class=\"form-group mb-3\">\n                            <span *ngIf=\"formField.option.protected\"\n                                [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\n                                [class]=\"formField?.label?.style.classes ? formField?.label?.style?.classes[0] : ''\">\n                                <vl-string [formField]=\"formField\"\n                                    [modalItemInfo]=\"modalItemInfo\">\n                                </vl-string>\n                            </span>\n                            <div *ngIf=\"!formField.option.protected\">\n                                <div\n                                    [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\n                                    <label\n                                        [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\n                                        [class]=\"formField?.label?.style.classes ? formField?.label?.style?.classes[0] : ''\">{{\n                                        formField.label?.value\n                                        ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\n                                        }}</label>\n                                    <nz-range-picker #dateRangeField=\"ngModel\"\n                                        [required]=\"formField.option.required\"\n                                        [name]=\"formField.scope?.reference\"\n                                        [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                                        [(ngModel)]=\"modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\"></nz-range-picker>\n                                </div>\n                                <!-- Error Message -->\n                                <div\n                                    *ngIf=\"dateRangeField?.touched && dateRangeField?.invalid\"\n                                    [style]=\"getStyleWithoutClasses(formField?.validation?.style).style\">\n                                    <p class=\"text-danger\"\n                                        *ngIf=\"dateRangeField?.errors?.['required']\">\n                                        {{formField.label?.value ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\n                                        +\n                                        ' ' + errorMessages.required}}</p>\n                                    <p class=\"text-danger\"\n                                        *ngIf=\"dateRangeField?.errors?.['email']\">\n                                        {{(formField.label?.value ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)\n                                        +\n                                        ' ' + errorMessages.pattern}}</p>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- Date control -->\n                        \n\n                        <!-- Time control -->\n                        \n\n                        <!-- Autocomplete control -->\n                        <div *ngSwitchCase=\"'autocomplete'\"\n                            class=\"form-group mb-3\">\n                            <span *ngIf=\"formField.option.protected\"\n                                [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\n                                [class]=\"formField?.label?.style.classes ? formField?.label?.style?.classes[0] : ''\">\n                                <vl-string [formField]=\"formField\"\n                                    [modalItemInfo]=\"modalItemInfo\">\n                                </vl-string>\n                            </span>\n                            <div *ngIf=\"!formField.option.protected\">\n                                <div\n                                    [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\n                                    <vl-label [formField]=\"formField\"\n                                        [modalItemInfo]=\"modalItemInfo\">\n                                    </vl-label>\n\n                                    <span>\n                                        <p-autocomplete\n                                            #autocompleteField=\"ngModel\"\n                                            [required]=\"formField.option.required\"\n                                            [name]=\"formField.scope?.reference\"\n                                            styleClass=\"custom-autocomplete\"\n                                            [(ngModel)]=\"modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\"\n                                            [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\"\n                                            [class]=\"formField?.scope?.style?.classes ? formField?.scope?.style?.classes[0] : ''\"\n                                            [suggestions]=\"matchData\"\n                                            [dropdown]=\"true\"\n                                            [optionLabel]=\"formField?.option?.autocomplete?.response?.label ? formField.option.autocomplete.response.label : 'label'\"\n                                            [placeholder]=\"modalItemInfo.propertySchema | vlPlaceholder: formField.scope?.reference\"\n                                            (completeMethod)=\"autocompChangeEvent($event, formField)\"\n                                            (ngModelChange)=\"autocompFocusOutEvent($event, formField)\"\n                                            [vlCustomKeyboard]=\"keyboardTypeFor(formField)\">\n                                        </p-autocomplete>\n                                        <!-- Error Message -->\n                                        <div\n                                            *ngIf=\"autocompleteField?.touched && autocompleteField?.invalid\"\n                                            [style]=\"getStyleWithoutClasses(formField?.validation?.style).style\">\n                                            <p class=\"text-danger\"\n                                                *ngIf=\"autocompleteField?.errors?.['required']\">\n                                                {{setErroMessage(formField,\n                                                errorMessages, \"required\")}}</p>\n                                            <p class=\"text-danger\"\n                                                *ngIf=\"autocompleteField?.errors?.['email']\">\n                                                {{(formField.label?.value ?\n                                                formField.label?.value :\n                                                modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)\n                                                +\n                                                ' ' +\n                                                errorMessages.pattern}}</p>\n                                        </div>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- checkBox control -->\n                        \n\n                        <!-- dropdown control -->\n                        <div *ngSwitchCase=\"'dropdown'\" class=\"form-group mb-3\"\n                            [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                            [class]=\"formField.style?.classes ? formField.style?.classes[0] : ''\">\n                            <span *ngIf=\"formField.option?.postfixCaption\">\n                                <select id=\"dynamic-dropdown\"\n                                    [class]=\"formField.style?.classes ? formField.style?.classes[0]: ''\"\n                                    #dropdownField=\"ngModel\"\n                                    [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                                    [name]=\"formField.scope?.reference\"\n                                    [(ngModel)]=\"modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\">\n                                    <option\n                                        *ngFor=\"let item of modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.data\"\n                                        [value]=\"formField?.option?.optionValue ? formField.option.optionValue : 'value'\">\n                                        {{ formField?.option?.optionLabel ?\n                                        formField.option.optionLabel :\n                                        'label'}}</option>\n                                </select>\n                                <label\n                                    [style]=\"getStyleWithoutClasses(formField?.label?.style).style\">{{modalItemInfo.propertySchema[getScope(formField.scope)][formField.scope?.reference.split('/').pop()]?.caption\n                                    }}</label>\n                            </span>\n                            <div *ngIf=\"!formField.option?.postfixCaption\">\n                                <div\n                                    [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\n                                    <label\n                                        [style]=\"getStyleWithoutClasses(formField?.label?.style).style\">{{modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\n                                        }}</label>\n\n                                    <nz-select nzShowSearch nzAllowClear\n                                        nzPlaceHolder=\"Select\"\n                                        #dropdownField=\"ngModel\"\n                                        [required]=\"formField.option.required\"\n                                        [class]=\"formField.style?.classes ? formField.style?.classes[0]: ''\"\n                                        [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                                        [name]=\"formField.scope?.reference\"\n                                        [(ngModel)]=\"modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\">\n                                        <nz-option\n                                            *ngFor=\"let item of modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.data\"\n                                            [nzLabel]=\"item[formField?.option?.optionLabel ? formField.option.optionLabel : 'label']\"\n                                            [nzValue]=\"item[formField?.option?.optionValue ? formField.option.optionValue : 'value']\"></nz-option>\n                                    </nz-select>\n                                </div>\n                                <!-- Error Message -->\n                                <div\n                                    *ngIf=\"dropdownField?.touched && dropdownField?.invalid\"\n                                    [style]=\"getStyleWithoutClasses(formField?.validation?.style).style\">\n                                    <p class=\"text-danger\"\n                                        *ngIf=\"dropdownField?.errors?.['required']\">\n                                        {{formField.label?.value ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\n                                        +\n                                        ' ' + errorMessages.required}}</p>\n                                    <p class=\"text-danger\"\n                                        *ngIf=\"dropdownField?.errors?.['email']\">\n                                        {{(formField.label?.value ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)\n                                        +\n                                        ' ' + errorMessages.pattern}}</p>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- button control -->\n                        <div *ngSwitchCase=\"'default'\">\n                            <button type=\"button\"\n                                [ngStyle]=\"getStyleWithoutClasses(formField.style).style\"\n                                (click)=\"invokeFormBtnClick(formField.option, modalItemInfo.propertySchema, dynamicForm)\"\n                                class=\"btn btn-primary btn-block\">\n                                {{ getButtonCaption(formField) }}\n                            </button>\n                        </div>\n                    </div>\n                    }\n                </div>\n            </div>\n        </div>\n    </form>\n</div>\n", styles: [":host ::ng-deep .custom-datepicker .p-datepicker-dropdown{height:100%;border-radius:4px}:host ::ng-deep .custom-datepicker .p-datepicker-input{border-radius:4px}::ng-deep .p-autocomplete-list{background-color:#fff}:host ::ng-deep .custom-autocomplete{display:flex;width:100%}:host ::ng-deep .custom-autocomplete .p-autocomplete-input{flex:1;width:100%;min-width:0;border:none!important;outline:none!important;box-shadow:none!important;background:transparent!important}:host ::ng-deep .custom-autocomplete .p-autocomplete-dropdown{height:100%;border-radius:4px}:host ::ng-deep .custom-autocomplete .p-autocomplete-input:focus,:host ::ng-deep .custom-autocomplete .p-autocomplete-input:focus-visible,:host ::ng-deep .custom-autocomplete .p-inputtext:enabled:focus{border:none!important;outline:none!important;box-shadow:none!important}.responsive-modal-grid{width:100%;min-width:0;box-sizing:border-box}@media screen and (max-width:767px){.responsive-modal-grid{grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:10px!important}.responsive-modal-field{grid-column:1 / -1!important;width:100%!important;max-width:none!important;min-width:0!important}.responsive-modal-action:nth-last-child(2){grid-column:1 / span 6!important}.responsive-modal-action:last-child{grid-column:7 / span 6!important}.responsive-modal-action{width:100%!important;max-width:none!important;min-width:0!important;justify-self:stretch!important;box-sizing:border-box!important}.responsive-modal-action button{display:block!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;box-sizing:border-box!important}}:host{--modal-field-focus-color: var(--p-primary-color, #10b981);--modal-field-focus-shadow: 0 0 0 2px rgba(16, 185, 129, .16)}:host ::ng-deep input:not([type=checkbox]):not(:disabled):focus,:host ::ng-deep textarea:not(:disabled):focus{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .custom-autocomplete:focus-within{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .custom-autocomplete:focus-within .p-autocomplete-input{border:none!important;outline:none!important;box-shadow:none!important}:host ::ng-deep select:not(:disabled):focus{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .ant-select-focused:not(.ant-select-disabled) .ant-select-selector,:host ::ng-deep nz-select:not(.ant-select-disabled):focus-within .ant-select-selector{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .p-select:not(.p-disabled).p-focus,:host ::ng-deep .p-select:not(.p-disabled):focus-within,:host ::ng-deep .p-dropdown:not(.p-disabled).p-focus,:host ::ng-deep .p-dropdown:not(.p-disabled):focus-within{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .custom-datepicker:focus-within .p-datepicker-input{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep input:disabled,:host ::ng-deep textarea:disabled,:host ::ng-deep select:disabled,:host ::ng-deep .p-disabled,:host ::ng-deep .ant-select-disabled .ant-select-selector{box-shadow:none!important}\n"], dependencies: [{ kind: "component", type: FieldRendererComponent, selector: "vl-field-renderer", inputs: ["field", "property", "items", "translations", "errorMessages", "showErrors"], outputs: ["itemSelected", "fieldBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i3.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i3.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i4.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzInline", "nzAllowClear", "nzAutoFocus", "nzDisabled", "nzInputReadOnly", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzVariant", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "directive", type: i4.NzRangePickerComponent, selector: "nz-range-picker", exportAs: ["nzRangePicker"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i18.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: Label, selector: "vl-label", inputs: ["formField", "modalItemInfo"] }, { kind: "component", type: String$1, selector: "vl-string", inputs: ["formField", "modalItemInfo"] }, { kind: "directive", type: CustomKeyboardDirective, selector: "[vlCustomKeyboard]", inputs: ["vlCustomKeyboard"] }, { kind: "pipe", type: PlaceholderPipe, name: "vlPlaceholder" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: ModelComponent, isStandalone: true, selector: "vl-model", inputs: { errorMessages: "errorMessages", modalItemInfo: "modalItemInfo", selectedLanguageInfo: "selectedLanguageInfo", userInfo: "userInfo", setFormDataHandler: "setFormDataHandler" }, usesOnChanges: true, ngImport: i0, template: "<!-- Faramarz Yousefian and Agent Toni (Claude Opus 5.5) 2026-10-13\n     - fix: the placeholder comes from vlPlaceholder (pipes/placeholder.pipe.ts) - empty where the\n       project defines none; it showed the text \"undefined\" -->\n<!-- Faramarz Yousefian and Agent Toni (Claude Opus 5) 2026-10-07\n     - change: number, autocomplete, date and time fields take the toolkit keyboard of their\n       attribute type (keyboardTypeFor) instead of only an explicit option.keyboardType\n     - change: the date picker docks at the bottom on the devices (model-datepicker-panel--docked);\n       the time picker stays attached to its field in a compact form (model-timepicker-panel);\n       both report which picker closed (onPickerClose(picker)) -->\n\n<!-- Shuaib 2026-09-24\n     - change: the model field switch uses renderFieldType so legacy checkbox fields render as boolean. -->\n\n<!-- Faramarz Yousefian and Agent Toni (Claude Opus 5) 2026-09-19\n     - new: a @contract comment on the widest type coverage in the toolkit, and one on the credit\n       card case recording that the rename reached this file first -->\n<!-- Loader Spinner -->\n<div *ngIf=\"isLoading\" class=\"loader-overlay\">\n    <div class=\"spinner\"></div>\n</div>\n<div [style]=\"getStyleWithoutClasses(modalItemInfo?.layoutSchema?.style).style\"\n    [class]=\"modalItemInfo?.layoutSchema?.style?.classes[0]\">\n    <form #dynamicForm=\"ngForm\"\n        *ngIf=\"modalItemInfo?.layoutSchema?.formSections?.length > 0\"\n        (submit)=\"$event.preventDefault()\">\n        <div\n            *ngFor=\"let formSection of modalItemInfo?.layoutSchema?.formSections; let sectionIndex = index\">\n            <div *ngIf=\"formSection?.label?.caption\"\n                [class]=\"formSection?.label?.style?.classes[0]\"\n                [style]=\"getStyleWithoutClasses(formSection?.label?.style).style\">\n                {{formSection.label.caption}}\n            </div>\n            <div *ngIf=\"formSection?.formFields?.length > 0\"\n                [class]=\"formSection?.style?.classes?.[0] || ''\"\n                [ngStyle]=\"getSectionBodyStyle(formSection)\">\n                <div *ngFor=\"let formField of formSection.formFields; let fieldIndex = index\"\n                    [ngStyle]=\"getFieldWrapperStyle(formField)\"\n                    [style.display]=\"usesSharedField(formField) && formField.option?.visible === false ? 'none' : null\"\n                    [class]=\"formField?.style?.classes || ''\">\n\n                    <!-- @contract decision: the widest type coverage in the toolkit\n                         reality: every field type except the grid-only quantity renders here.\n                                  When another container drops a type, this is the way out.\n                         seen: measured 2026-09-19. Note the file is model.component.html while\n                               the container is called modal in layout files - that costs a\n                               search every time -->\n                    <!-- @contract compatibility: checkbox is rendered as boolean for existing projects. -->\n                    @if (usesSharedField(formField)) {\n                      @if (sharedProperty(formField); as property) {\n                        @if (formField.option?.visible !== false) {\n                          <vl-field-renderer [field]=\"formField\" [property]=\"property\"\n                            [ngModel]=\"property.value\" (ngModelChange)=\"onSharedFieldChange(formField,$event)\"\n                            [name]=\"'shared-' + sectionIndex + '-' + fieldIndex + '-' + formField.scope.reference\" [disabled]=\"formField.option?.disabled === true\"\n                            [items]=\"formField.data ?? property.data\" [translations]=\"selectedLanguageInfo?.selectedLanguage || {}\"\n                            [errorMessages]=\"errorMessages\" [showErrors]=\"sharedErrorsVisible\"\n                            (itemSelected)=\"autocompSelectEvent($event,formField)\">\n                          </vl-field-renderer>\n                        }\n                      }\n                    } @else {\n                    <div [ngSwitch]=\"renderFieldType(\n                        formField?.scope?.reference &&\n                        modalItemInfo?.propertySchema?.[\n                            getScope(formField.scope.reference)\n                        ]\n                            ? modalItemInfo.propertySchema[\n                                getScope(formField.scope.reference)\n                              ]?.[\n                                formField.scope.reference.split('/').pop()\n                              ]?.type\n                            : 'default'\n                    )\">\n                        <!-- Media control -->\n                        \n\n                        <!-- credit card control -->\n                        <!-- @contract decision: the credit card type is spelled creditCard\n                             reality: this file was renamed on 2026-09-15, form.component.html and\n                                      utility.service.ts followed on 2026-09-19. carditCard is read\n                                      nowhere any more.\n                             failure: a data object still declaring carditCard renders empty. -->\n                        <div *ngSwitchCase=\"'creditCard'\"\n                            [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                            [class]=\"formField.style?.classes[0]\">\n                            <div id=\"card-element\">\n                                <!-- a Stripe element will be inserted here -->\n                            </div>\n                            <!-- Used to display form errors -->\n                            <div id=\"card-errors\"\n                                class=\"displayError.textContent!=='': 'alert alert-danger mt-1'\">\n                            </div>\n                        </div>\n\n                        <!-- string control -->\n                        \n\n                        <!-- number control -->\n                        \n\n                        <!-- DateRange control -->\n                        <div *ngSwitchCase=\"'dateRange'\"\n                            class=\"form-group mb-3\">\n                            <span *ngIf=\"formField.option.protected\"\n                                [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\n                                [class]=\"formField?.label?.style.classes ? formField?.label?.style?.classes[0] : ''\">\n                                <vl-string [formField]=\"formField\"\n                                    [modalItemInfo]=\"modalItemInfo\">\n                                </vl-string>\n                            </span>\n                            <div *ngIf=\"!formField.option.protected\">\n                                <div\n                                    [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\n                                    <label\n                                        [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\n                                        [class]=\"formField?.label?.style.classes ? formField?.label?.style?.classes[0] : ''\">{{\n                                        formField.label?.value\n                                        ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\n                                        }}</label>\n                                    <nz-range-picker #dateRangeField=\"ngModel\"\n                                        [required]=\"formField.option.required\"\n                                        [name]=\"formField.scope?.reference\"\n                                        [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                                        [(ngModel)]=\"modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\"></nz-range-picker>\n                                </div>\n                                <!-- Error Message -->\n                                <div\n                                    *ngIf=\"dateRangeField?.touched && dateRangeField?.invalid\"\n                                    [style]=\"getStyleWithoutClasses(formField?.validation?.style).style\">\n                                    <p class=\"text-danger\"\n                                        *ngIf=\"dateRangeField?.errors?.['required']\">\n                                        {{formField.label?.value ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\n                                        +\n                                        ' ' + errorMessages.required}}</p>\n                                    <p class=\"text-danger\"\n                                        *ngIf=\"dateRangeField?.errors?.['email']\">\n                                        {{(formField.label?.value ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)\n                                        +\n                                        ' ' + errorMessages.pattern}}</p>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- Date control -->\n                        \n\n                        <!-- Time control -->\n                        \n\n                        <!-- Autocomplete control -->\n                        <div *ngSwitchCase=\"'autocomplete'\"\n                            class=\"form-group mb-3\">\n                            <span *ngIf=\"formField.option.protected\"\n                                [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\n                                [class]=\"formField?.label?.style.classes ? formField?.label?.style?.classes[0] : ''\">\n                                <vl-string [formField]=\"formField\"\n                                    [modalItemInfo]=\"modalItemInfo\">\n                                </vl-string>\n                            </span>\n                            <div *ngIf=\"!formField.option.protected\">\n                                <div\n                                    [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\n                                    <vl-label [formField]=\"formField\"\n                                        [modalItemInfo]=\"modalItemInfo\">\n                                    </vl-label>\n\n                                    <span>\n                                        <p-autocomplete\n                                            #autocompleteField=\"ngModel\"\n                                            [required]=\"formField.option.required\"\n                                            [name]=\"formField.scope?.reference\"\n                                            styleClass=\"custom-autocomplete\"\n                                            [(ngModel)]=\"modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\"\n                                            [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\"\n                                            [class]=\"formField?.scope?.style?.classes ? formField?.scope?.style?.classes[0] : ''\"\n                                            [suggestions]=\"matchData\"\n                                            [dropdown]=\"true\"\n                                            [optionLabel]=\"formField?.option?.autocomplete?.response?.label ? formField.option.autocomplete.response.label : 'label'\"\n                                            [placeholder]=\"modalItemInfo.propertySchema | vlPlaceholder: formField.scope?.reference\"\n                                            (completeMethod)=\"autocompChangeEvent($event, formField)\"\n                                            (ngModelChange)=\"autocompFocusOutEvent($event, formField)\"\n                                            [vlCustomKeyboard]=\"keyboardTypeFor(formField)\">\n                                        </p-autocomplete>\n                                        <!-- Error Message -->\n                                        <div\n                                            *ngIf=\"autocompleteField?.touched && autocompleteField?.invalid\"\n                                            [style]=\"getStyleWithoutClasses(formField?.validation?.style).style\">\n                                            <p class=\"text-danger\"\n                                                *ngIf=\"autocompleteField?.errors?.['required']\">\n                                                {{setErroMessage(formField,\n                                                errorMessages, \"required\")}}</p>\n                                            <p class=\"text-danger\"\n                                                *ngIf=\"autocompleteField?.errors?.['email']\">\n                                                {{(formField.label?.value ?\n                                                formField.label?.value :\n                                                modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)\n                                                +\n                                                ' ' +\n                                                errorMessages.pattern}}</p>\n                                        </div>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- checkBox control -->\n                        \n\n                        <!-- dropdown control -->\n                        <div *ngSwitchCase=\"'dropdown'\" class=\"form-group mb-3\"\n                            [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                            [class]=\"formField.style?.classes ? formField.style?.classes[0] : ''\">\n                            <span *ngIf=\"formField.option?.postfixCaption\">\n                                <select id=\"dynamic-dropdown\"\n                                    [class]=\"formField.style?.classes ? formField.style?.classes[0]: ''\"\n                                    #dropdownField=\"ngModel\"\n                                    [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                                    [name]=\"formField.scope?.reference\"\n                                    [(ngModel)]=\"modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\">\n                                    <option\n                                        *ngFor=\"let item of modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.data\"\n                                        [value]=\"formField?.option?.optionValue ? formField.option.optionValue : 'value'\">\n                                        {{ formField?.option?.optionLabel ?\n                                        formField.option.optionLabel :\n                                        'label'}}</option>\n                                </select>\n                                <label\n                                    [style]=\"getStyleWithoutClasses(formField?.label?.style).style\">{{modalItemInfo.propertySchema[getScope(formField.scope)][formField.scope?.reference.split('/').pop()]?.caption\n                                    }}</label>\n                            </span>\n                            <div *ngIf=\"!formField.option?.postfixCaption\">\n                                <div\n                                    [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\n                                    <label\n                                        [style]=\"getStyleWithoutClasses(formField?.label?.style).style\">{{modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\n                                        }}</label>\n\n                                    <nz-select nzShowSearch nzAllowClear\n                                        nzPlaceHolder=\"Select\"\n                                        #dropdownField=\"ngModel\"\n                                        [required]=\"formField.option.required\"\n                                        [class]=\"formField.style?.classes ? formField.style?.classes[0]: ''\"\n                                        [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                                        [name]=\"formField.scope?.reference\"\n                                        [(ngModel)]=\"modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\">\n                                        <nz-option\n                                            *ngFor=\"let item of modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.data\"\n                                            [nzLabel]=\"item[formField?.option?.optionLabel ? formField.option.optionLabel : 'label']\"\n                                            [nzValue]=\"item[formField?.option?.optionValue ? formField.option.optionValue : 'value']\"></nz-option>\n                                    </nz-select>\n                                </div>\n                                <!-- Error Message -->\n                                <div\n                                    *ngIf=\"dropdownField?.touched && dropdownField?.invalid\"\n                                    [style]=\"getStyleWithoutClasses(formField?.validation?.style).style\">\n                                    <p class=\"text-danger\"\n                                        *ngIf=\"dropdownField?.errors?.['required']\">\n                                        {{formField.label?.value ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\n                                        +\n                                        ' ' + errorMessages.required}}</p>\n                                    <p class=\"text-danger\"\n                                        *ngIf=\"dropdownField?.errors?.['email']\">\n                                        {{(formField.label?.value ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)\n                                        +\n                                        ' ' + errorMessages.pattern}}</p>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- button control -->\n                        <div *ngSwitchCase=\"'default'\">\n                            <button type=\"button\"\n                                [ngStyle]=\"getStyleWithoutClasses(formField.style).style\"\n                                (click)=\"invokeFormBtnClick(formField.option, modalItemInfo.propertySchema, dynamicForm)\"\n                                class=\"btn btn-primary btn-block\">\n                                {{ getButtonCaption(formField) }}\n                            </button>\n                        </div>\n                    </div>\n                    }\n                </div>\n            </div>\n        </div>\n    </form>\n</div>\n", styles: [":host ::ng-deep .custom-datepicker .p-datepicker-dropdown{height:100%;border-radius:4px}:host ::ng-deep .custom-datepicker .p-datepicker-input{border-radius:4px}::ng-deep .p-autocomplete-list{background-color:#fff}:host ::ng-deep .custom-autocomplete{display:flex;width:100%}:host ::ng-deep .custom-autocomplete .p-autocomplete-input{flex:1;width:100%;min-width:0;border:none!important;outline:none!important;box-shadow:none!important;background:transparent!important}:host ::ng-deep .custom-autocomplete .p-autocomplete-dropdown{height:100%;border-radius:4px}:host ::ng-deep .custom-autocomplete .p-autocomplete-input:focus,:host ::ng-deep .custom-autocomplete .p-autocomplete-input:focus-visible,:host ::ng-deep .custom-autocomplete .p-inputtext:enabled:focus{border:none!important;outline:none!important;box-shadow:none!important}.responsive-modal-grid{width:100%;min-width:0;box-sizing:border-box}@media screen and (max-width:767px){.responsive-modal-grid{grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:10px!important}.responsive-modal-field{grid-column:1 / -1!important;width:100%!important;max-width:none!important;min-width:0!important}.responsive-modal-action:nth-last-child(2){grid-column:1 / span 6!important}.responsive-modal-action:last-child{grid-column:7 / span 6!important}.responsive-modal-action{width:100%!important;max-width:none!important;min-width:0!important;justify-self:stretch!important;box-sizing:border-box!important}.responsive-modal-action button{display:block!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;box-sizing:border-box!important}}:host{--modal-field-focus-color: var(--p-primary-color, #10b981);--modal-field-focus-shadow: 0 0 0 2px rgba(16, 185, 129, .16)}:host ::ng-deep input:not([type=checkbox]):not(:disabled):focus,:host ::ng-deep textarea:not(:disabled):focus{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .custom-autocomplete:focus-within{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .custom-autocomplete:focus-within .p-autocomplete-input{border:none!important;outline:none!important;box-shadow:none!important}:host ::ng-deep select:not(:disabled):focus{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .ant-select-focused:not(.ant-select-disabled) .ant-select-selector,:host ::ng-deep nz-select:not(.ant-select-disabled):focus-within .ant-select-selector{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .p-select:not(.p-disabled).p-focus,:host ::ng-deep .p-select:not(.p-disabled):focus-within,:host ::ng-deep .p-dropdown:not(.p-disabled).p-focus,:host ::ng-deep .p-dropdown:not(.p-disabled):focus-within{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .custom-datepicker:focus-within .p-datepicker-input{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep input:disabled,:host ::ng-deep textarea:disabled,:host ::ng-deep select:disabled,:host ::ng-deep .p-disabled,:host ::ng-deep .ant-select-disabled .ant-select-selector{box-shadow:none!important}\n"], dependencies: [{ kind: "component", type: FieldRendererComponent, selector: "vl-field-renderer", inputs: ["field", "property", "items", "translations", "errorMessages", "showErrors"], outputs: ["itemSelected", "fieldBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i3.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i3.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i4.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzInline", "nzAllowClear", "nzAutoFocus", "nzDisabled", "nzInputReadOnly", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzVariant", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "directive", type: i4.NzRangePickerComponent, selector: "nz-range-picker", exportAs: ["nzRangePicker"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i18.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: Label, selector: "vl-label", inputs: ["formField", "modalItemInfo"] }, { kind: "component", type: String$1, selector: "vl-string", inputs: ["formField", "modalItemInfo"] }, { kind: "directive", type: CustomKeyboardDirective, selector: "[vlCustomKeyboard]", inputs: ["vlCustomKeyboard"] }, { kind: "pipe", type: PlaceholderPipe, name: "vlPlaceholder" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ModelComponent, decorators: [{
             type: Component,
@@ -7231,7 +7259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                         String$1,
                         Textbox,
                         CustomKeyboardDirective,
-                    ], template: "<!-- Faramarz Yousefian and Agent Toni (Claude Opus 5.5) 2026-10-13\n     - fix: the placeholder comes from vlPlaceholder (pipes/placeholder.pipe.ts) - empty where the\n       project defines none; it showed the text \"undefined\" -->\n<!-- Faramarz Yousefian and Agent Toni (Claude Opus 5) 2026-10-07\n     - change: number, autocomplete, date and time fields take the toolkit keyboard of their\n       attribute type (keyboardTypeFor) instead of only an explicit option.keyboardType\n     - change: the date picker docks at the bottom on the devices (model-datepicker-panel--docked);\n       the time picker stays attached to its field in a compact form (model-timepicker-panel);\n       both report which picker closed (onPickerClose(picker)) -->\n\n<!-- Shuaib 2026-09-24\n     - change: the model field switch uses renderFieldType so legacy checkbox fields render as boolean. -->\n\n<!-- Faramarz Yousefian and Agent Toni (Claude Opus 5) 2026-09-19\n     - new: a @contract comment on the widest type coverage in the toolkit, and one on the credit\n       card case recording that the rename reached this file first -->\n<!-- Loader Spinner -->\n<div *ngIf=\"isLoading\" class=\"loader-overlay\">\n    <div class=\"spinner\"></div>\n</div>\n<div [style]=\"getStyleWithoutClasses(modalItemInfo?.layoutSchema?.style).style\"\n    [class]=\"modalItemInfo?.layoutSchema?.style?.classes[0]\">\n    <form #dynamicForm=\"ngForm\"\n        *ngIf=\"modalItemInfo?.layoutSchema?.formSections?.length > 0\"\n        (submit)=\"$event.preventDefault()\">\n        <div\n            *ngFor=\"let formSection of modalItemInfo?.layoutSchema?.formSections\">\n            <div *ngIf=\"formSection?.label?.caption\"\n                [class]=\"formSection?.label?.style?.classes[0]\"\n                [style]=\"getStyleWithoutClasses(formSection?.label?.style).style\">\n                {{formSection.label.caption}}\n            </div>\n            <div *ngIf=\"formSection?.formFields?.length > 0\"\n                [class]=\"formSection?.style?.classes?.[0] || ''\"\n                [ngStyle]=\"getSectionBodyStyle(formSection)\">\n                <div *ngFor=\"let formField of formSection.formFields\"\n                    [ngStyle]=\"getFieldWrapperStyle(formField)\"\n                    [style.display]=\"usesSharedField(formField) && formField.option?.visible === false ? 'none' : null\"\n                    [class]=\"formField?.style?.classes || ''\">\n\n                    <!-- @contract decision: the widest type coverage in the toolkit\n                         reality: every field type except the grid-only quantity renders here.\n                                  When another container drops a type, this is the way out.\n                         seen: measured 2026-09-19. Note the file is model.component.html while\n                               the container is called modal in layout files - that costs a\n                               search every time -->\n                    <!-- @contract compatibility: checkbox is rendered as boolean for existing projects. -->\n                    @if (usesSharedField(formField)) {\n                      @if (sharedProperty(formField); as property) {\n                        @if (formField.option?.visible !== false) {\n                          <vl-field-renderer [field]=\"formField\" [property]=\"property\"\n                            [ngModel]=\"property.value\" (ngModelChange)=\"onSharedFieldChange(formField,$event)\"\n                            [name]=\"formField.scope.reference\" [disabled]=\"formField.option?.disabled === true\"\n                            [items]=\"formField.data ?? property.data\" [translations]=\"selectedLanguageInfo?.selectedLanguage || {}\"\n                            [errorMessages]=\"errorMessages\" [showErrors]=\"sharedErrorsVisible\"\n                            (itemSelected)=\"autocompSelectEvent($event,formField)\">\n                          </vl-field-renderer>\n                        }\n                      }\n                    } @else {\n                    <div [ngSwitch]=\"renderFieldType(\n                        formField?.scope?.reference &&\n                        modalItemInfo?.propertySchema?.[\n                            getScope(formField.scope.reference)\n                        ]\n                            ? modalItemInfo.propertySchema[\n                                getScope(formField.scope.reference)\n                              ]?.[\n                                formField.scope.reference.split('/').pop()\n                              ]?.type\n                            : 'default'\n                    )\">\n                        <!-- Media control -->\n                        \n\n                        <!-- credit card control -->\n                        <!-- @contract decision: the credit card type is spelled creditCard\n                             reality: this file was renamed on 2026-09-15, form.component.html and\n                                      utility.service.ts followed on 2026-09-19. carditCard is read\n                                      nowhere any more.\n                             failure: a data object still declaring carditCard renders empty. -->\n                        <div *ngSwitchCase=\"'creditCard'\"\n                            [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                            [class]=\"formField.style?.classes[0]\">\n                            <div id=\"card-element\">\n                                <!-- a Stripe element will be inserted here -->\n                            </div>\n                            <!-- Used to display form errors -->\n                            <div id=\"card-errors\"\n                                class=\"displayError.textContent!=='': 'alert alert-danger mt-1'\">\n                            </div>\n                        </div>\n\n                        <!-- string control -->\n                        \n\n                        <!-- number control -->\n                        \n\n                        <!-- DateRange control -->\n                        <div *ngSwitchCase=\"'dateRange'\"\n                            class=\"form-group mb-3\">\n                            <span *ngIf=\"formField.option.protected\"\n                                [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\n                                [class]=\"formField?.label?.style.classes ? formField?.label?.style?.classes[0] : ''\">\n                                <vl-string [formField]=\"formField\"\n                                    [modalItemInfo]=\"modalItemInfo\">\n                                </vl-string>\n                            </span>\n                            <div *ngIf=\"!formField.option.protected\">\n                                <div\n                                    [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\n                                    <label\n                                        [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\n                                        [class]=\"formField?.label?.style.classes ? formField?.label?.style?.classes[0] : ''\">{{\n                                        formField.label?.value\n                                        ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\n                                        }}</label>\n                                    <nz-range-picker #dateRangeField=\"ngModel\"\n                                        [required]=\"formField.option.required\"\n                                        [name]=\"formField.scope?.reference\"\n                                        [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                                        [(ngModel)]=\"modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\"></nz-range-picker>\n                                </div>\n                                <!-- Error Message -->\n                                <div\n                                    *ngIf=\"dateRangeField?.touched && dateRangeField?.invalid\"\n                                    [style]=\"getStyleWithoutClasses(formField?.validation?.style).style\">\n                                    <p class=\"text-danger\"\n                                        *ngIf=\"dateRangeField?.errors?.['required']\">\n                                        {{formField.label?.value ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\n                                        +\n                                        ' ' + errorMessages.required}}</p>\n                                    <p class=\"text-danger\"\n                                        *ngIf=\"dateRangeField?.errors?.['email']\">\n                                        {{(formField.label?.value ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)\n                                        +\n                                        ' ' + errorMessages.pattern}}</p>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- Date control -->\n                        \n\n                        <!-- Time control -->\n                        \n\n                        <!-- Autocomplete control -->\n                        <div *ngSwitchCase=\"'autocomplete'\"\n                            class=\"form-group mb-3\">\n                            <span *ngIf=\"formField.option.protected\"\n                                [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\n                                [class]=\"formField?.label?.style.classes ? formField?.label?.style?.classes[0] : ''\">\n                                <vl-string [formField]=\"formField\"\n                                    [modalItemInfo]=\"modalItemInfo\">\n                                </vl-string>\n                            </span>\n                            <div *ngIf=\"!formField.option.protected\">\n                                <div\n                                    [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\n                                    <vl-label [formField]=\"formField\"\n                                        [modalItemInfo]=\"modalItemInfo\">\n                                    </vl-label>\n\n                                    <span>\n                                        <p-autocomplete\n                                            #autocompleteField=\"ngModel\"\n                                            [required]=\"formField.option.required\"\n                                            [name]=\"formField.scope?.reference\"\n                                            styleClass=\"custom-autocomplete\"\n                                            [(ngModel)]=\"modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\"\n                                            [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\"\n                                            [class]=\"formField?.scope?.style?.classes ? formField?.scope?.style?.classes[0] : ''\"\n                                            [suggestions]=\"matchData\"\n                                            [dropdown]=\"true\"\n                                            [optionLabel]=\"formField?.option?.autocomplete?.response?.label ? formField.option.autocomplete.response.label : 'label'\"\n                                            [placeholder]=\"modalItemInfo.propertySchema | vlPlaceholder: formField.scope?.reference\"\n                                            (completeMethod)=\"autocompChangeEvent($event, formField)\"\n                                            (ngModelChange)=\"autocompFocusOutEvent($event, formField)\"\n                                            [vlCustomKeyboard]=\"keyboardTypeFor(formField)\">\n                                        </p-autocomplete>\n                                        <!-- Error Message -->\n                                        <div\n                                            *ngIf=\"autocompleteField?.touched && autocompleteField?.invalid\"\n                                            [style]=\"getStyleWithoutClasses(formField?.validation?.style).style\">\n                                            <p class=\"text-danger\"\n                                                *ngIf=\"autocompleteField?.errors?.['required']\">\n                                                {{setErroMessage(formField,\n                                                errorMessages, \"required\")}}</p>\n                                            <p class=\"text-danger\"\n                                                *ngIf=\"autocompleteField?.errors?.['email']\">\n                                                {{(formField.label?.value ?\n                                                formField.label?.value :\n                                                modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)\n                                                +\n                                                ' ' +\n                                                errorMessages.pattern}}</p>\n                                        </div>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- checkBox control -->\n                        \n\n                        <!-- dropdown control -->\n                        <div *ngSwitchCase=\"'dropdown'\" class=\"form-group mb-3\"\n                            [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                            [class]=\"formField.style?.classes ? formField.style?.classes[0] : ''\">\n                            <span *ngIf=\"formField.option?.postfixCaption\">\n                                <select id=\"dynamic-dropdown\"\n                                    [class]=\"formField.style?.classes ? formField.style?.classes[0]: ''\"\n                                    #dropdownField=\"ngModel\"\n                                    [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                                    [name]=\"formField.scope?.reference\"\n                                    [(ngModel)]=\"modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\">\n                                    <option\n                                        *ngFor=\"let item of modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.data\"\n                                        [value]=\"formField?.option?.optionValue ? formField.option.optionValue : 'value'\">\n                                        {{ formField?.option?.optionLabel ?\n                                        formField.option.optionLabel :\n                                        'label'}}</option>\n                                </select>\n                                <label\n                                    [style]=\"getStyleWithoutClasses(formField?.label?.style).style\">{{modalItemInfo.propertySchema[getScope(formField.scope)][formField.scope?.reference.split('/').pop()]?.caption\n                                    }}</label>\n                            </span>\n                            <div *ngIf=\"!formField.option?.postfixCaption\">\n                                <div\n                                    [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\n                                    <label\n                                        [style]=\"getStyleWithoutClasses(formField?.label?.style).style\">{{modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\n                                        }}</label>\n\n                                    <nz-select nzShowSearch nzAllowClear\n                                        nzPlaceHolder=\"Select\"\n                                        #dropdownField=\"ngModel\"\n                                        [required]=\"formField.option.required\"\n                                        [class]=\"formField.style?.classes ? formField.style?.classes[0]: ''\"\n                                        [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                                        [name]=\"formField.scope?.reference\"\n                                        [(ngModel)]=\"modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\">\n                                        <nz-option\n                                            *ngFor=\"let item of modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.data\"\n                                            [nzLabel]=\"item[formField?.option?.optionLabel ? formField.option.optionLabel : 'label']\"\n                                            [nzValue]=\"item[formField?.option?.optionValue ? formField.option.optionValue : 'value']\"></nz-option>\n                                    </nz-select>\n                                </div>\n                                <!-- Error Message -->\n                                <div\n                                    *ngIf=\"dropdownField?.touched && dropdownField?.invalid\"\n                                    [style]=\"getStyleWithoutClasses(formField?.validation?.style).style\">\n                                    <p class=\"text-danger\"\n                                        *ngIf=\"dropdownField?.errors?.['required']\">\n                                        {{formField.label?.value ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\n                                        +\n                                        ' ' + errorMessages.required}}</p>\n                                    <p class=\"text-danger\"\n                                        *ngIf=\"dropdownField?.errors?.['email']\">\n                                        {{(formField.label?.value ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)\n                                        +\n                                        ' ' + errorMessages.pattern}}</p>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- button control -->\n                        <div *ngSwitchCase=\"'default'\">\n                            <button type=\"button\"\n                                [ngStyle]=\"getStyleWithoutClasses(formField.style).style\"\n                                (click)=\"invokeFormBtnClick(formField.option, modalItemInfo.propertySchema, dynamicForm)\"\n                                class=\"btn btn-primary btn-block\">\n                                {{ getButtonCaption(formField) }}\n                            </button>\n                        </div>\n                    </div>\n                    }\n                </div>\n            </div>\n        </div>\n    </form>\n</div>\n", styles: [":host ::ng-deep .custom-datepicker .p-datepicker-dropdown{height:100%;border-radius:4px}:host ::ng-deep .custom-datepicker .p-datepicker-input{border-radius:4px}::ng-deep .p-autocomplete-list{background-color:#fff}:host ::ng-deep .custom-autocomplete{display:flex;width:100%}:host ::ng-deep .custom-autocomplete .p-autocomplete-input{flex:1;width:100%;min-width:0;border:none!important;outline:none!important;box-shadow:none!important;background:transparent!important}:host ::ng-deep .custom-autocomplete .p-autocomplete-dropdown{height:100%;border-radius:4px}:host ::ng-deep .custom-autocomplete .p-autocomplete-input:focus,:host ::ng-deep .custom-autocomplete .p-autocomplete-input:focus-visible,:host ::ng-deep .custom-autocomplete .p-inputtext:enabled:focus{border:none!important;outline:none!important;box-shadow:none!important}.responsive-modal-grid{width:100%;min-width:0;box-sizing:border-box}@media screen and (max-width:767px){.responsive-modal-grid{grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:10px!important}.responsive-modal-field{grid-column:1 / -1!important;width:100%!important;max-width:none!important;min-width:0!important}.responsive-modal-action:nth-last-child(2){grid-column:1 / span 6!important}.responsive-modal-action:last-child{grid-column:7 / span 6!important}.responsive-modal-action{width:100%!important;max-width:none!important;min-width:0!important;justify-self:stretch!important;box-sizing:border-box!important}.responsive-modal-action button{display:block!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;box-sizing:border-box!important}}:host{--modal-field-focus-color: var(--p-primary-color, #10b981);--modal-field-focus-shadow: 0 0 0 2px rgba(16, 185, 129, .16)}:host ::ng-deep input:not([type=checkbox]):not(:disabled):focus,:host ::ng-deep textarea:not(:disabled):focus{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .custom-autocomplete:focus-within{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .custom-autocomplete:focus-within .p-autocomplete-input{border:none!important;outline:none!important;box-shadow:none!important}:host ::ng-deep select:not(:disabled):focus{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .ant-select-focused:not(.ant-select-disabled) .ant-select-selector,:host ::ng-deep nz-select:not(.ant-select-disabled):focus-within .ant-select-selector{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .p-select:not(.p-disabled).p-focus,:host ::ng-deep .p-select:not(.p-disabled):focus-within,:host ::ng-deep .p-dropdown:not(.p-disabled).p-focus,:host ::ng-deep .p-dropdown:not(.p-disabled):focus-within{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .custom-datepicker:focus-within .p-datepicker-input{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep input:disabled,:host ::ng-deep textarea:disabled,:host ::ng-deep select:disabled,:host ::ng-deep .p-disabled,:host ::ng-deep .ant-select-disabled .ant-select-selector{box-shadow:none!important}\n"] }]
+                    ], template: "<!-- Faramarz Yousefian and Agent Toni (Claude Opus 5.5) 2026-10-13\n     - fix: the placeholder comes from vlPlaceholder (pipes/placeholder.pipe.ts) - empty where the\n       project defines none; it showed the text \"undefined\" -->\n<!-- Faramarz Yousefian and Agent Toni (Claude Opus 5) 2026-10-07\n     - change: number, autocomplete, date and time fields take the toolkit keyboard of their\n       attribute type (keyboardTypeFor) instead of only an explicit option.keyboardType\n     - change: the date picker docks at the bottom on the devices (model-datepicker-panel--docked);\n       the time picker stays attached to its field in a compact form (model-timepicker-panel);\n       both report which picker closed (onPickerClose(picker)) -->\n\n<!-- Shuaib 2026-09-24\n     - change: the model field switch uses renderFieldType so legacy checkbox fields render as boolean. -->\n\n<!-- Faramarz Yousefian and Agent Toni (Claude Opus 5) 2026-09-19\n     - new: a @contract comment on the widest type coverage in the toolkit, and one on the credit\n       card case recording that the rename reached this file first -->\n<!-- Loader Spinner -->\n<div *ngIf=\"isLoading\" class=\"loader-overlay\">\n    <div class=\"spinner\"></div>\n</div>\n<div [style]=\"getStyleWithoutClasses(modalItemInfo?.layoutSchema?.style).style\"\n    [class]=\"modalItemInfo?.layoutSchema?.style?.classes[0]\">\n    <form #dynamicForm=\"ngForm\"\n        *ngIf=\"modalItemInfo?.layoutSchema?.formSections?.length > 0\"\n        (submit)=\"$event.preventDefault()\">\n        <div\n            *ngFor=\"let formSection of modalItemInfo?.layoutSchema?.formSections; let sectionIndex = index\">\n            <div *ngIf=\"formSection?.label?.caption\"\n                [class]=\"formSection?.label?.style?.classes[0]\"\n                [style]=\"getStyleWithoutClasses(formSection?.label?.style).style\">\n                {{formSection.label.caption}}\n            </div>\n            <div *ngIf=\"formSection?.formFields?.length > 0\"\n                [class]=\"formSection?.style?.classes?.[0] || ''\"\n                [ngStyle]=\"getSectionBodyStyle(formSection)\">\n                <div *ngFor=\"let formField of formSection.formFields; let fieldIndex = index\"\n                    [ngStyle]=\"getFieldWrapperStyle(formField)\"\n                    [style.display]=\"usesSharedField(formField) && formField.option?.visible === false ? 'none' : null\"\n                    [class]=\"formField?.style?.classes || ''\">\n\n                    <!-- @contract decision: the widest type coverage in the toolkit\n                         reality: every field type except the grid-only quantity renders here.\n                                  When another container drops a type, this is the way out.\n                         seen: measured 2026-09-19. Note the file is model.component.html while\n                               the container is called modal in layout files - that costs a\n                               search every time -->\n                    <!-- @contract compatibility: checkbox is rendered as boolean for existing projects. -->\n                    @if (usesSharedField(formField)) {\n                      @if (sharedProperty(formField); as property) {\n                        @if (formField.option?.visible !== false) {\n                          <vl-field-renderer [field]=\"formField\" [property]=\"property\"\n                            [ngModel]=\"property.value\" (ngModelChange)=\"onSharedFieldChange(formField,$event)\"\n                            [name]=\"'shared-' + sectionIndex + '-' + fieldIndex + '-' + formField.scope.reference\" [disabled]=\"formField.option?.disabled === true\"\n                            [items]=\"formField.data ?? property.data\" [translations]=\"selectedLanguageInfo?.selectedLanguage || {}\"\n                            [errorMessages]=\"errorMessages\" [showErrors]=\"sharedErrorsVisible\"\n                            (itemSelected)=\"autocompSelectEvent($event,formField)\">\n                          </vl-field-renderer>\n                        }\n                      }\n                    } @else {\n                    <div [ngSwitch]=\"renderFieldType(\n                        formField?.scope?.reference &&\n                        modalItemInfo?.propertySchema?.[\n                            getScope(formField.scope.reference)\n                        ]\n                            ? modalItemInfo.propertySchema[\n                                getScope(formField.scope.reference)\n                              ]?.[\n                                formField.scope.reference.split('/').pop()\n                              ]?.type\n                            : 'default'\n                    )\">\n                        <!-- Media control -->\n                        \n\n                        <!-- credit card control -->\n                        <!-- @contract decision: the credit card type is spelled creditCard\n                             reality: this file was renamed on 2026-09-15, form.component.html and\n                                      utility.service.ts followed on 2026-09-19. carditCard is read\n                                      nowhere any more.\n                             failure: a data object still declaring carditCard renders empty. -->\n                        <div *ngSwitchCase=\"'creditCard'\"\n                            [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                            [class]=\"formField.style?.classes[0]\">\n                            <div id=\"card-element\">\n                                <!-- a Stripe element will be inserted here -->\n                            </div>\n                            <!-- Used to display form errors -->\n                            <div id=\"card-errors\"\n                                class=\"displayError.textContent!=='': 'alert alert-danger mt-1'\">\n                            </div>\n                        </div>\n\n                        <!-- string control -->\n                        \n\n                        <!-- number control -->\n                        \n\n                        <!-- DateRange control -->\n                        <div *ngSwitchCase=\"'dateRange'\"\n                            class=\"form-group mb-3\">\n                            <span *ngIf=\"formField.option.protected\"\n                                [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\n                                [class]=\"formField?.label?.style.classes ? formField?.label?.style?.classes[0] : ''\">\n                                <vl-string [formField]=\"formField\"\n                                    [modalItemInfo]=\"modalItemInfo\">\n                                </vl-string>\n                            </span>\n                            <div *ngIf=\"!formField.option.protected\">\n                                <div\n                                    [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\n                                    <label\n                                        [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\n                                        [class]=\"formField?.label?.style.classes ? formField?.label?.style?.classes[0] : ''\">{{\n                                        formField.label?.value\n                                        ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\n                                        }}</label>\n                                    <nz-range-picker #dateRangeField=\"ngModel\"\n                                        [required]=\"formField.option.required\"\n                                        [name]=\"formField.scope?.reference\"\n                                        [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                                        [(ngModel)]=\"modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\"></nz-range-picker>\n                                </div>\n                                <!-- Error Message -->\n                                <div\n                                    *ngIf=\"dateRangeField?.touched && dateRangeField?.invalid\"\n                                    [style]=\"getStyleWithoutClasses(formField?.validation?.style).style\">\n                                    <p class=\"text-danger\"\n                                        *ngIf=\"dateRangeField?.errors?.['required']\">\n                                        {{formField.label?.value ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\n                                        +\n                                        ' ' + errorMessages.required}}</p>\n                                    <p class=\"text-danger\"\n                                        *ngIf=\"dateRangeField?.errors?.['email']\">\n                                        {{(formField.label?.value ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)\n                                        +\n                                        ' ' + errorMessages.pattern}}</p>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- Date control -->\n                        \n\n                        <!-- Time control -->\n                        \n\n                        <!-- Autocomplete control -->\n                        <div *ngSwitchCase=\"'autocomplete'\"\n                            class=\"form-group mb-3\">\n                            <span *ngIf=\"formField.option.protected\"\n                                [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\n                                [class]=\"formField?.label?.style.classes ? formField?.label?.style?.classes[0] : ''\">\n                                <vl-string [formField]=\"formField\"\n                                    [modalItemInfo]=\"modalItemInfo\">\n                                </vl-string>\n                            </span>\n                            <div *ngIf=\"!formField.option.protected\">\n                                <div\n                                    [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\n                                    <vl-label [formField]=\"formField\"\n                                        [modalItemInfo]=\"modalItemInfo\">\n                                    </vl-label>\n\n                                    <span>\n                                        <p-autocomplete\n                                            #autocompleteField=\"ngModel\"\n                                            [required]=\"formField.option.required\"\n                                            [name]=\"formField.scope?.reference\"\n                                            styleClass=\"custom-autocomplete\"\n                                            [(ngModel)]=\"modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\"\n                                            [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\"\n                                            [class]=\"formField?.scope?.style?.classes ? formField?.scope?.style?.classes[0] : ''\"\n                                            [suggestions]=\"matchData\"\n                                            [dropdown]=\"true\"\n                                            [optionLabel]=\"formField?.option?.autocomplete?.response?.label ? formField.option.autocomplete.response.label : 'label'\"\n                                            [placeholder]=\"modalItemInfo.propertySchema | vlPlaceholder: formField.scope?.reference\"\n                                            (completeMethod)=\"autocompChangeEvent($event, formField)\"\n                                            (ngModelChange)=\"autocompFocusOutEvent($event, formField)\"\n                                            [vlCustomKeyboard]=\"keyboardTypeFor(formField)\">\n                                        </p-autocomplete>\n                                        <!-- Error Message -->\n                                        <div\n                                            *ngIf=\"autocompleteField?.touched && autocompleteField?.invalid\"\n                                            [style]=\"getStyleWithoutClasses(formField?.validation?.style).style\">\n                                            <p class=\"text-danger\"\n                                                *ngIf=\"autocompleteField?.errors?.['required']\">\n                                                {{setErroMessage(formField,\n                                                errorMessages, \"required\")}}</p>\n                                            <p class=\"text-danger\"\n                                                *ngIf=\"autocompleteField?.errors?.['email']\">\n                                                {{(formField.label?.value ?\n                                                formField.label?.value :\n                                                modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)\n                                                +\n                                                ' ' +\n                                                errorMessages.pattern}}</p>\n                                        </div>\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- checkBox control -->\n                        \n\n                        <!-- dropdown control -->\n                        <div *ngSwitchCase=\"'dropdown'\" class=\"form-group mb-3\"\n                            [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                            [class]=\"formField.style?.classes ? formField.style?.classes[0] : ''\">\n                            <span *ngIf=\"formField.option?.postfixCaption\">\n                                <select id=\"dynamic-dropdown\"\n                                    [class]=\"formField.style?.classes ? formField.style?.classes[0]: ''\"\n                                    #dropdownField=\"ngModel\"\n                                    [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                                    [name]=\"formField.scope?.reference\"\n                                    [(ngModel)]=\"modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\">\n                                    <option\n                                        *ngFor=\"let item of modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.data\"\n                                        [value]=\"formField?.option?.optionValue ? formField.option.optionValue : 'value'\">\n                                        {{ formField?.option?.optionLabel ?\n                                        formField.option.optionLabel :\n                                        'label'}}</option>\n                                </select>\n                                <label\n                                    [style]=\"getStyleWithoutClasses(formField?.label?.style).style\">{{modalItemInfo.propertySchema[getScope(formField.scope)][formField.scope?.reference.split('/').pop()]?.caption\n                                    }}</label>\n                            </span>\n                            <div *ngIf=\"!formField.option?.postfixCaption\">\n                                <div\n                                    [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\n                                    <label\n                                        [style]=\"getStyleWithoutClasses(formField?.label?.style).style\">{{modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\n                                        }}</label>\n\n                                    <nz-select nzShowSearch nzAllowClear\n                                        nzPlaceHolder=\"Select\"\n                                        #dropdownField=\"ngModel\"\n                                        [required]=\"formField.option.required\"\n                                        [class]=\"formField.style?.classes ? formField.style?.classes[0]: ''\"\n                                        [style]=\"getStyleWithoutClasses(formField?.style).style\"\n                                        [name]=\"formField.scope?.reference\"\n                                        [(ngModel)]=\"modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\">\n                                        <nz-option\n                                            *ngFor=\"let item of modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.data\"\n                                            [nzLabel]=\"item[formField?.option?.optionLabel ? formField.option.optionLabel : 'label']\"\n                                            [nzValue]=\"item[formField?.option?.optionValue ? formField.option.optionValue : 'value']\"></nz-option>\n                                    </nz-select>\n                                </div>\n                                <!-- Error Message -->\n                                <div\n                                    *ngIf=\"dropdownField?.touched && dropdownField?.invalid\"\n                                    [style]=\"getStyleWithoutClasses(formField?.validation?.style).style\">\n                                    <p class=\"text-danger\"\n                                        *ngIf=\"dropdownField?.errors?.['required']\">\n                                        {{formField.label?.value ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\n                                        +\n                                        ' ' + errorMessages.required}}</p>\n                                    <p class=\"text-danger\"\n                                        *ngIf=\"dropdownField?.errors?.['email']\">\n                                        {{(formField.label?.value ?\n                                        formField.label?.value :\n                                        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)\n                                        +\n                                        ' ' + errorMessages.pattern}}</p>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- button control -->\n                        <div *ngSwitchCase=\"'default'\">\n                            <button type=\"button\"\n                                [ngStyle]=\"getStyleWithoutClasses(formField.style).style\"\n                                (click)=\"invokeFormBtnClick(formField.option, modalItemInfo.propertySchema, dynamicForm)\"\n                                class=\"btn btn-primary btn-block\">\n                                {{ getButtonCaption(formField) }}\n                            </button>\n                        </div>\n                    </div>\n                    }\n                </div>\n            </div>\n        </div>\n    </form>\n</div>\n", styles: [":host ::ng-deep .custom-datepicker .p-datepicker-dropdown{height:100%;border-radius:4px}:host ::ng-deep .custom-datepicker .p-datepicker-input{border-radius:4px}::ng-deep .p-autocomplete-list{background-color:#fff}:host ::ng-deep .custom-autocomplete{display:flex;width:100%}:host ::ng-deep .custom-autocomplete .p-autocomplete-input{flex:1;width:100%;min-width:0;border:none!important;outline:none!important;box-shadow:none!important;background:transparent!important}:host ::ng-deep .custom-autocomplete .p-autocomplete-dropdown{height:100%;border-radius:4px}:host ::ng-deep .custom-autocomplete .p-autocomplete-input:focus,:host ::ng-deep .custom-autocomplete .p-autocomplete-input:focus-visible,:host ::ng-deep .custom-autocomplete .p-inputtext:enabled:focus{border:none!important;outline:none!important;box-shadow:none!important}.responsive-modal-grid{width:100%;min-width:0;box-sizing:border-box}@media screen and (max-width:767px){.responsive-modal-grid{grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:10px!important}.responsive-modal-field{grid-column:1 / -1!important;width:100%!important;max-width:none!important;min-width:0!important}.responsive-modal-action:nth-last-child(2){grid-column:1 / span 6!important}.responsive-modal-action:last-child{grid-column:7 / span 6!important}.responsive-modal-action{width:100%!important;max-width:none!important;min-width:0!important;justify-self:stretch!important;box-sizing:border-box!important}.responsive-modal-action button{display:block!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;box-sizing:border-box!important}}:host{--modal-field-focus-color: var(--p-primary-color, #10b981);--modal-field-focus-shadow: 0 0 0 2px rgba(16, 185, 129, .16)}:host ::ng-deep input:not([type=checkbox]):not(:disabled):focus,:host ::ng-deep textarea:not(:disabled):focus{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .custom-autocomplete:focus-within{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .custom-autocomplete:focus-within .p-autocomplete-input{border:none!important;outline:none!important;box-shadow:none!important}:host ::ng-deep select:not(:disabled):focus{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .ant-select-focused:not(.ant-select-disabled) .ant-select-selector,:host ::ng-deep nz-select:not(.ant-select-disabled):focus-within .ant-select-selector{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .p-select:not(.p-disabled).p-focus,:host ::ng-deep .p-select:not(.p-disabled):focus-within,:host ::ng-deep .p-dropdown:not(.p-disabled).p-focus,:host ::ng-deep .p-dropdown:not(.p-disabled):focus-within{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep .custom-datepicker:focus-within .p-datepicker-input{border-color:var(--modal-field-focus-color)!important;outline:none!important;box-shadow:var(--modal-field-focus-shadow)!important}:host ::ng-deep input:disabled,:host ::ng-deep textarea:disabled,:host ::ng-deep select:disabled,:host ::ng-deep .p-disabled,:host ::ng-deep .ant-select-disabled .ant-select-selector{box-shadow:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$4.DynamicDialogRef }, { type: i1$4.DynamicDialogConfig }, { type: UtilityService }], propDecorators: { errorMessages: [{
                 type: Input
             }], modalItemInfo: [{