@yomotech/view-toolkit 1.0.29 → 1.0.30

package/fesm2022/yomotech-view-toolkit.mjs

@@ -5825,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 || '';
@@ -6173,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);
@@ -6209,8 +6207,10 @@ class SelectionControlComponent extends ControlBase {
   <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]="option.showDropdown !== false" [forceSelection]="control==='combobox'&&option.allowCustom!==true"
-    [minLength]="option.minChars ?? 1" [placeholder]="placeholder" [disabled]="disabled||readonly"
+    [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: [{
@@ -6230,8 +6230,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
   <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]="option.showDropdown !== false" [forceSelection]="control==='combobox'&&option.allowCustom!==true"
-    [minLength]="option.minChars ?? 1" [placeholder]="placeholder" [disabled]="disabled||readonly"
+    [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
@@ -6831,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);
@@ -7032,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;
@@ -7050,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?.();
@@ -7229,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,
@@ -7245,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: [{