@yomotech/view-toolkit 0.0.31 → 0.0.32

package/src/lib/containers/logs/logs.component.css

@@ -0,0 +1,160 @@
+/* ===============================
+   LAYOUT
+   =============================== */
+
+.network-log-wrapper {
+  padding: 12px;
+}
+
+.network-log-table {
+  width: 100%;
+  overflow-x: auto;
+}
+
+/* ===============================
+     TABLE
+     =============================== */
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  min-width: 900px;
+}
+
+thead th {
+  background: #06b6d4;
+  color: #fff;
+  padding: 8px;
+  text-align: left;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+tbody td {
+  padding: 8px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+/* ===============================
+     ROW STATES
+     =============================== */
+
+.log-row {
+  cursor: pointer;
+}
+
+.log-row:hover {
+  background: #f1f5f9;
+}
+
+.details-row {
+  background: #f8fafc;
+}
+
+/* ===============================
+     METHOD TAGS
+     =============================== */
+
+.method {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-weight: 600;
+  font-size: 11px;
+  color: #fff;
+}
+
+.method.get {
+  background: #16a34a;
+}
+
+.method.post {
+  background: #2563eb;
+}
+
+.method.put {
+  background: #d97706;
+}
+
+.method.delete {
+  background: #dc2626;
+}
+
+/* ===============================
+     STATUS
+     =============================== */
+
+td.error {
+  color: #dc2626;
+  font-weight: 700;
+}
+
+/* ===============================
+     ELLIPSIS
+     =============================== */
+
+.ellipsis {
+  max-width: 320px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ===============================
+     DETAILS GRID
+     =============================== */
+
+.details-container {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.detail-block {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  padding: 10px;
+}
+
+.detail-block h4 {
+  margin: 0 0 6px;
+  font-size: 14px;
+  color: #0f172a;
+}
+
+pre {
+  background: #020617;
+  color: #e5e7eb;
+  padding: 8px;
+  border-radius: 6px;
+  max-height: 260px;
+  overflow: auto;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ===============================
+     MOBILE
+     =============================== */
+
+@media (max-width: 768px) {
+  table {
+    min-width: 100%;
+    font-size: 12px;
+  }
+
+  .ellipsis {
+    max-width: 140px;
+  }
+
+  .details-container {
+    grid-template-columns: 1fr;
+  }
+
+  pre {
+    max-height: 200px;
+  }
+}

package/src/lib/containers/logs/logs.component.html

@@ -0,0 +1,89 @@
+<div class="network-log-wrapper">
+
+    <div class="network-log-table">
+        <table>
+            <thead>
+                <tr>
+                    <th>#</th>
+                    <th>Time</th>
+                    <th>Method</th>
+                    <th>URL</th>
+                    <th>Status</th>
+                    <th>Duration (ms)</th>
+                    <th>Size (KB)</th>
+                </tr>
+            </thead>
+
+            <tbody>
+                <ng-container *ngFor="let log of logs; let i = index">
+
+                    <!-- MAIN ROW -->
+                    <tr class="log-row" (click)="toggleRow(i)">
+                        <td>{{ i + 1 }}</td>
+                        <td>{{ log.time }}</td>
+
+                        <td>
+                            <span class="method" [class.get]="log.method === 'GET'" [class.post]="log.method === 'POST'"
+                                [class.put]="log.method === 'PUT'" [class.delete]="log.method === 'DELETE'">
+                                {{ log.method }}
+                            </span>
+                        </td>
+
+                        <td class="ellipsis" [title]="log.url">
+                            {{ log.url }}
+                        </td>
+
+                        <td [class.error]="log.status >= 400">
+                            {{ log.status }}
+                        </td>
+
+                        <td>{{ log.duration }}</td>
+
+                        <td>{{ log.size | number:'1.0-2' }}</td>
+                    </tr>
+
+                    <!-- DETAILS ROW -->
+                    <tr *ngIf="expandedRow === i" class="details-row">
+                        <td colspan="7">
+                            <div class="details-container">
+
+                                <!-- META -->
+                                <div class="detail-block">
+                                    <h4>Meta</h4>
+                                    <p><strong>Date:</strong> {{ log.date }}</p>
+                                    <p><strong>Type:</strong> {{ log.type }}</p>
+                                </div>
+
+                                <!-- REQUEST -->
+                                <div class="detail-block">
+                                    <h4>Request</h4>
+                                    <p><strong>Headers</strong></p>
+                                    <pre>{{ log.requestHeaders | json }}</pre>
+
+                                    <p><strong>Body</strong></p>
+                                    <pre>{{ log.requestBody | json }}</pre>
+                                </div>
+
+                                <!-- RESPONSE -->
+                                <div class="detail-block">
+                                    <h4>Response</h4>
+                                    <pre>{{ log.responseBody | json }}</pre>
+                                </div>
+
+                                <!-- PERFORMANCE -->
+                                <div class="detail-block">
+                                    <h4>Performance</h4>
+                                    <p><strong>Duration:</strong> {{ log.duration }} ms</p>
+                                    <p><strong>Size:</strong> {{ log.size | number:'1.0-2' }} KB</p>
+                                </div>
+
+                            </div>
+                        </td>
+                    </tr>
+
+                </ng-container>
+            </tbody>
+        </table>
+    </div>
+
+</div>

package/src/lib/containers/logs/logs.component.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { NetworkLogService } from '../../services/network-log.service';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule
+  ],
+  selector: 'vl-logs',
+  templateUrl: './logs.component.html',
+  styleUrl: './logs.component.css'
+})
+export class LogsComponent {
+  logs: any[] = [];
+  expandedRow: number | null = null;
+
+  constructor(private logService: NetworkLogService) {}
+
+  ngOnInit() {
+    const today = new Date().toISOString().split('T')[0];
+    this.logs = this.logService.getLogsByDate(today);
+    console.log('this.logs: ', this.logs);
+  }
+
+  toggleRow(index: number) {
+    this.expandedRow = this.expandedRow === index ? null : index;
+  }
+}

package/src/lib/containers/model/model.component.html

@@ -0,0 +1,351 @@
+<nz-modal [nzTitle]="modalItemInfo?.modalTitle" nzCentered [(nzVisible)]="isModalShow" [nzFooter]="null"
+    (nzOnCancel)="onCancel()">
+    <!-- Loader Spinner -->
+    <div *ngIf="isLoading" class="loader-overlay">
+        <div class="spinner"></div>
+    </div>
+    <ng-container *nzModalContent>
+        <div [style]="getStyleWithoutClasses(modalItemInfo?.layoutSchema?.style).style"
+            [class]="modalItemInfo?.layoutSchema?.style?.classes[0]">
+            <form #dynamicForm="ngForm" *ngIf="modalItemInfo?.layoutSchema?.formSections?.length > 0"
+                (submit)="$event.preventDefault()">
+                <div *ngFor="let formSection of modalItemInfo?.layoutSchema?.formSections">
+                    <div *ngIf="formSection?.label?.caption" [class]="formSection?.label?.style?.classes[0]"
+                        [style]="getStyleWithoutClasses(formSection?.label?.style).style">
+                        {{formSection.label.caption}}
+                    </div>
+                    <div [class]="formSection?.style?.classes[0]"
+                        [style]="getStyleWithoutClasses(formSection?.style).style"
+                        *ngIf="formSection.formFields?.length > 0">
+                        <div *ngFor="let formField of formSection.formFields">
+                            <div
+                                [ngSwitch]="formField?.scope?.reference && modalItemInfo.propertySchema[getScope(formField.scope?.reference)] ?
+                 modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.type : 'default'">
+
+                                <!-- image control -->
+                                <div *ngSwitchCase="'image'" [style]="getStyleWithoutClasses(formField?.style).style"
+                                    [class]="formField.style?.classes[0]">
+                                    <img [src]="formField.option.src" [alt]="'img'" />
+                                </div>
+
+                                <!-- credit card control -->
+                                <div *ngSwitchCase="'carditCard'"
+                                    [style]="getStyleWithoutClasses(formField?.style).style"
+                                    [class]="formField.style?.classes[0]">
+                                    <div id="card-element">
+                                        <!-- a Stripe element will be inserted here -->
+                                    </div>
+                                    <!-- Used to display form errors -->
+                                    <div id="card-errors"
+                                        class="displayError.textContent!=='': 'alert alert-danger mt-1'"></div>
+                                </div>
+
+                                <!-- string control -->
+                                <div *ngSwitchCase="'string'" class="form-group mb-3">
+                                    <span *ngIf="formField.option.protected"
+                                        [style]="getStyleWithoutClasses(formField?.label?.style).style"
+                                        [class]="formField?.label?.style?.classes[0]">
+                                        <vl-string [formField]="formField" [modalItemInfo]="modalItemInfo">
+                                        </vl-string>
+                                    </span>
+                                    <div *ngIf="!formField.option.protected">
+                                        <div [class]="formField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'">
+                                            <vl-label [formField]="formField" [modalItemInfo]="modalItemInfo">
+                                            </vl-label>
+                                            <vl-textbox [formField]="formField"
+                                                [modalItemInfo]="modalItemInfo"></vl-textbox>
+                                        </div>
+                                        <!-- Error Message -->
+                                        <!-- <div *ngIf="inputField?.touched && inputField?.invalid"
+                                            [style]="getStyleWithoutClasses(formField?.validation?.style).style">
+                                            <p class="text-danger" *ngIf="inputField?.errors?.['required']">
+                                                {{setErroMessage(formField, errorMessages, "required")}}</p>
+                                            <p class="text-danger" *ngIf="inputField?.errors?.['email']">
+                                                {{(formField.label?.value ?
+                                                formField.label?.value :
+                                                modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)
+                                                +
+                                                ' ' + errorMessages.pattern}}</p>
+                                        </div> -->
+                                    </div>
+                                </div>
+
+                                <!-- number control -->
+                                <div *ngSwitchCase="'number'" class="form-group mb-3">
+                                    <span *ngIf="formField.option.protected"
+                                        [style]="getStyleWithoutClasses(formField?.label?.style).style"
+                                        [class]="formField?.label?.style?.classes[0]">
+                                        <h5>{{
+                                            modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption
+                                            }} {{
+                                            modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.value
+                                            |
+                                            currency:formField.option.currency :true: formField.option?.decimalPoint}}
+                                        </h5>
+                                    </span>
+                                    <span *ngIf="!formField.option.protected">
+                                        <div [class]="formField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'">
+                                            <label [style]="getStyleWithoutClasses(formField?.label?.style).style"
+                                                [class]="formField?.label?.style?.classes[0]">{{ formField.label?.value
+                                                ?
+                                                formField.label?.value :
+                                                modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption
+                                                }}</label>
+                                            <input type="number" [class]="formField.style?.classes[0]"
+                                                [style]="getStyleWithoutClasses(formField?.style).style"
+                                                [(ngModel)]="modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value"
+                                                [name]="formField.scope?.reference"
+                                                [placeholder]="modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.placeholder" />
+                                        </div>
+                                    </span>
+                                </div>
+
+                                <!-- DateRange control -->
+                                <div *ngSwitchCase="'dateRange'" class="form-group mb-3">
+                                    <span *ngIf="formField.option.protected"
+                                        [style]="getStyleWithoutClasses(formField?.label?.style).style"
+                                        [class]="formField?.label?.style?.classes[0]">
+                                        <vl-string [formField]="formField" [modalItemInfo]="modalItemInfo">
+                                        </vl-string>
+                                    </span>
+                                    <div *ngIf="!formField.option.protected">
+                                        <div [class]="formField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'">
+                                            <label [style]="getStyleWithoutClasses(formField?.label?.style).style"
+                                                [class]="formField?.label?.style?.classes[0]">{{ formField.label?.value
+                                                ?
+                                                formField.label?.value :
+                                                modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption
+                                                }}</label>
+                                            <nz-range-picker #dateRangeField="ngModel"
+                                                [required]="formField.option.required"
+                                                [name]="formField.scope?.reference"
+                                                [style]="getStyleWithoutClasses(formField?.style).style"
+                                                [(ngModel)]="modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value"></nz-range-picker>
+                                        </div>
+                                        <!-- Error Message -->
+                                        <div *ngIf="dateRangeField?.touched && dateRangeField?.invalid"
+                                            [style]="getStyleWithoutClasses(formField?.validation?.style).style">
+                                            <p class="text-danger" *ngIf="dateRangeField?.errors?.['required']">
+                                                {{formField.label?.value ?
+                                                formField.label?.value :
+                                                modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption
+                                                +
+                                                ' ' + errorMessages.required}}</p>
+                                            <p class="text-danger" *ngIf="dateRangeField?.errors?.['email']">
+                                                {{(formField.label?.value ?
+                                                formField.label?.value :
+                                                modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)
+                                                +
+                                                ' ' + errorMessages.pattern}}</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Date control -->
+                                <div *ngSwitchCase="'date'" class="form-group mb-3">
+                                    <span *ngIf="formField.option.protected"
+                                        [style]="getStyleWithoutClasses(formField?.label?.style).style"
+                                        [class]="formField?.label?.style?.classes[0]">
+                                        <vl-string [formField]="formField" [modalItemInfo]="modalItemInfo">
+                                        </vl-string>
+                                    </span>
+                                    <div *ngIf="!formField.option.protected">
+                                        <div [class]="formField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'">
+                                            <label [style]="getStyleWithoutClasses(formField?.label?.style).style"
+                                                [class]="formField?.label?.style?.classes[0]">{{ formField.label?.value
+                                                ?
+                                                formField.label?.value : formField.label?.caption ?
+                                                formField.label?.caption :
+                                                modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption
+                                                }}</label>
+
+                                            <p-datepicker #dateField="ngModel" [required]="formField.option.required"
+                                                [name]="formField.scope?.reference" type="number" inputmode="numeric"
+                                                [disabled]="formField?.option?.disabled" [showIcon]="true"
+                                                (ngModelChange)="dateChangeEvent(formField, $event)"
+                                                (onInput)="onDateTyping($event)"
+                                                (onFocus)="forceNumericKeyboard($event)"
+                                                [dateFormat]="modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.format ? modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.format : 'yy-mm-dd'"
+                                                [(ngModel)]="modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value"
+                                                appendTo="body" [class]="formField?.scope?.style?.classes[0]"
+                                                [style]="getStyleWithoutClasses(formField?.scope?.style).style">
+                                            </p-datepicker>
+                                        </div>
+                                        <!-- Error Message -->
+                                        <div *ngIf="dateField?.touched && dateField?.invalid"
+                                            [style]="getStyleWithoutClasses(formField?.validation?.style).style">
+                                            <p class="text-danger" *ngIf="dateField?.errors?.['required']">
+                                                {{setErroMessage(formField, errorMessages, "required")}}</p>
+                                            <p class="text-danger" *ngIf="dateField?.errors?.['email']">
+                                                {{(formField.label?.value ?
+                                                formField.label?.value :
+                                                modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)
+                                                +
+                                                ' ' + errorMessages.pattern}}</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Time control -->
+                                <div *ngSwitchCase="'time'" class="form-group mb-3">
+                                    <span *ngIf="formField.option.protected"
+                                        [style]="getStyleWithoutClasses(formField?.label?.style).style"
+                                        [class]="formField?.label?.style?.classes[0]">
+                                        <vl-string [formField]="formField" [modalItemInfo]="modalItemInfo">
+                                        </vl-string>
+                                    </span>
+                                    <div *ngIf="!formField.option.protected">
+                                        <div [class]="formField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'">
+                                            <label [style]="getStyleWithoutClasses(formField?.label?.style).style"
+                                                [class]="formField?.label?.style?.classes[0]">{{ formField.label?.value
+                                                ?
+                                                formField.label?.value : formField.label?.caption ?
+                                                formField.label?.caption :
+                                                modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption
+                                                }}</label>
+                                            <p-datepicker #timeField="ngModel" [required]="formField.option.required"
+                                                [name]="formField.scope?.reference" [timeOnly]="true" hourFormat="24"
+                                                [disabled]="formField?.option?.disabled"
+                                                (onFocus)="forceNumericKeyboard($event)"
+                                                (onInput)="onTimeTyping($event)"
+                                                (ngModelChange)="timeChangeEvent(formField, $event)"
+                                                [(ngModel)]="modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value"
+                                                appendTo="body" [class]="formField?.scope?.style?.classes[0]"
+                                                [style]="getStyleWithoutClasses(formField?.style).style">
+                                            </p-datepicker>
+
+                                        </div>
+                                        <!-- Error Message -->
+                                        <div *ngIf="timeField?.touched && timeField?.invalid"
+                                            [style]="getStyleWithoutClasses(formField?.validation?.style).style">
+                                            <p class="text-danger" *ngIf="timeField?.errors?.['required']">
+                                                {{setErroMessage(formField, errorMessages, "required")}}</p>
+                                            <p class="text-danger" *ngIf="timeField?.errors?.['email']">
+                                                {{(formField.label?.value ?
+                                                formField.label?.value :
+                                                modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)
+                                                +
+                                                ' ' + errorMessages.pattern}}</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Autocomplete control -->
+                                <div *ngSwitchCase="'autocomplete'" class="form-group mb-3">
+                                    <span *ngIf="formField.option.protected"
+                                        [style]="getStyleWithoutClasses(formField?.label?.style).style"
+                                        [class]="formField?.label?.style?.classes[0]">
+                                        <vl-string [formField]="formField" [modalItemInfo]="modalItemInfo">
+                                        </vl-string>
+                                    </span>
+                                    <div *ngIf="!formField.option.protected">
+                                        <div [class]="formField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'">
+                                            <vl-label [formField]="formField" [modalItemInfo]="modalItemInfo">
+                                            </vl-label>
+
+                                            <vl-autocomplete [formField]="formField" [modalItemInfo]="modalItemInfo"
+                                                [matchData]="matchData" [selectedLanguageInfo]="selectedLanguageInfo"
+                                                [errorMessages]="errorMessages"
+                                                (autocompSelectEvent)="autocompSelectEvent($event)"
+                                                (autocompChange)="autocompChangeEvent($event)"
+                                                (autocompFocusOut)="autocompFocusOutEvent($event)">
+                                            </vl-autocomplete>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- checkBox control -->
+                                <div *ngSwitchCase="'checkbox'" class="form-group mb-3"
+                                    [style]="getStyleWithoutClasses(formField?.style).style"
+                                    [class]="formField.style?.classes[0]">
+                                    <span *ngIf="formField.option?.postfixCaption">
+                                        <label class="form-check-label"><input type="checkbox" class="form-check-input"
+                                                [(ngModel)]="modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value"
+                                                [name]="formField.scope?.reference"
+                                                (ngModelChange)="invokeSetformData()" />{{
+                                            modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption
+                                            }}</label>
+                                    </span>
+                                    <div *ngIf="!formField.option?.postfixCaption"
+                                        [class]="formField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'">
+                                        <label class="form-check-label">{{
+                                            modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption
+                                            }}
+                                            <input type="checkbox" class="form-check-input"
+                                                [(ngModel)]="modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value"
+                                                [name]="formField.scope?.reference" /></label>
+                                    </div>
+                                </div>
+
+                                <!-- dropdown control -->
+                                <div *ngSwitchCase="'dropdown'" class="form-group mb-3"
+                                    [style]="getStyleWithoutClasses(formField?.style).style"
+                                    [class]="formField.style?.classes[0]">
+                                    <span *ngIf="formField.option?.postfixCaption">
+                                        <select id="dynamic-dropdown" [class]="formField.style?.classes[0]"
+                                            #dropdownField="ngModel"
+                                            [style]="getStyleWithoutClasses(formField?.style).style"
+                                            [name]="formField.scope?.reference"
+                                            [(ngModel)]="modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value">
+                                            <option
+                                                *ngFor="let item of modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.data"
+                                                [value]="formField.option.optionValue"> {{
+                                                formField.option.optionLabel}}</option>
+                                        </select>
+                                        <label
+                                            [style]="getStyleWithoutClasses(formField?.label?.style).style">{{modalItemInfo.propertySchema[getScope(formField.scope)][formField.scope?.reference.split('/').pop()]?.caption
+                                            }}</label>
+                                    </span>
+                                    <div *ngIf="!formField.option?.postfixCaption">
+                                        <div [class]="formField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'">
+                                            <label
+                                                [style]="getStyleWithoutClasses(formField?.label?.style).style">{{modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption
+                                                }}</label>
+
+                                            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select"
+                                                #dropdownField="ngModel" [required]="formField.option.required"
+                                                [class]="formField.style?.classes[0]"
+                                                [style]="getStyleWithoutClasses(formField?.style).style"
+                                                [name]="formField.scope?.reference"
+                                                [(ngModel)]="modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value">
+                                                <nz-option
+                                                    *ngFor="let item of modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.data"
+                                                    [nzLabel]="item[formField.option.optionLabel]"
+                                                    [nzValue]="item[formField.option.optionValue]"></nz-option>
+                                            </nz-select>
+                                        </div>
+                                        <!-- Error Message -->
+                                        <div *ngIf="dropdownField?.touched && dropdownField?.invalid"
+                                            [style]="getStyleWithoutClasses(formField?.validation?.style).style">
+                                            <p class="text-danger" *ngIf="dropdownField?.errors?.['required']">
+                                                {{formField.label?.value ?
+                                                formField.label?.value :
+                                                modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption
+                                                +
+                                                ' ' + errorMessages.required}}</p>
+                                            <p class="text-danger" *ngIf="dropdownField?.errors?.['email']">
+                                                {{(formField.label?.value ?
+                                                formField.label?.value :
+                                                modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)
+                                                +
+                                                ' ' + errorMessages.pattern}}</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- button control -->
+                                <div *ngSwitchCase="'default'">
+                                    <button type="button" [style]="getStyleWithoutClasses(formField.style).style"
+                                        (click)="invokeFormBtnClick(formField.option, modalItemInfo.propertySchema, dynamicForm)"
+                                        class="btn btn-primary btn-block">
+                                        {{ formField.label?.caption }}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </ng-container>
+</nz-modal>