@yomotech/view-toolkit 0.0.30 → 0.0.32

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

@@ -0,0 +1,305 @@
+<div class="form-renderer" [ngClass]="getStyleWithoutClasses(form?.layoutSchema?.style)?.classes"
+  [ngStyle]="getStyleWithoutClasses(form?.layoutSchema?.style)?.style">
+  <form *ngIf="form?.layoutSchema?.formSections?.length > 0">
+    <div *ngFor="let formSection of form?.layoutSchema?.formSections; let i = index" class="section-card">
+      <div *ngIf="formSection?.label?.caption" class="section-header">
+        <div class="section-title" [ngClass]="getStyleWithoutClasses(formSection?.label?.style)?.classes"
+          [ngStyle]="getStyleWithoutClasses(formSection?.label?.style)?.style">
+          {{ formSection.label.caption }}
+        </div>
+      </div>
+
+      <div *ngIf="formSection?.formFields?.length > 0" class="section-body"
+        [ngClass]="getStyleWithoutClasses(formSection?.style)?.classes" [ngStyle]="getSectionBodyStyle(formSection)">
+        <div *ngFor="let formField of formSection.formFields" class="field-row"
+          [ngClass]="getStyleWithoutClasses(formField?.style)?.classes" [ngStyle]="getFieldWrapperStyle(formField)">
+          <div [ngSwitch]="
+              formField?.scope?.reference &&
+              form?.propertySchema?.[getScope(formField.scope?.reference)]
+                ? form.propertySchema[getScope(formField.scope?.reference)]?.[
+                    formField.scope?.reference.split('/').pop()
+                  ]?.type
+                : 'default'
+            ">
+            <!-- image control -->
+            <div *ngSwitchCase="'image'" [ngClass]="getStyleWithoutClasses(formField?.scope?.style)?.classes"
+              [ngStyle]="getStyleWithoutClasses(formField?.scope?.style)?.style">
+              <img [src]="formField?.option?.src" [alt]="'img'" />
+            </div>
+
+            <!-- credit card control -->
+            <div *ngSwitchCase="'carditCard'" [ngClass]="getStyleWithoutClasses(formField?.scope?.style)?.classes"
+              [ngStyle]="getStyleWithoutClasses(formField?.scope?.style)?.style">
+              <div id="card-element"></div>
+              <div id="card-errors" [class]="creditCardError?.textContent !== '' ? 'text-red-400 m-0' : ''"></div>
+            </div>
+
+            <!-- string control -->
+            <span *ngSwitchCase="'string'" class="form-group">
+              <span *ngIf="formField?.option?.protected">
+                <h5 style="display: flex; justify-content: space-between">
+                  <span [ngClass]="getStyleWithoutClasses(formField?.label?.style)?.classes"
+                    [ngStyle]="getStyleWithoutClasses(formField?.label?.style)?.style">
+                    {{
+                    form.propertySchema[getScope(formField.scope?.reference)]?.[
+                    formField.scope?.reference.split('/').pop()
+                    ]?.caption
+                    }}
+                  </span>
+
+                  <span>
+                    {{
+                    form.propertySchema[getScope(formField.scope?.reference)]?.[
+                    formField.scope?.reference.split('/').pop()
+                    ]?.value
+                    }}
+                  </span>
+                </h5>
+              </span>
+
+              <span *ngIf="!formField?.option?.protected">
+                <div [ngStyle]="getFieldInnerLayoutStyle(formField)">
+                  <label [ngClass]="getStyleWithoutClasses(formField?.label?.style)?.classes"
+                    [ngStyle]="getStyleWithoutClasses(formField?.label?.style)?.style">
+                    {{
+                    formField?.label?.value
+                    ? formField.label.value
+                    : formField?.label?.caption
+                    ? formField.label.caption
+                    : form.propertySchema[getScope(formField.scope?.reference)]?.[
+                    formField.scope?.reference.split('/').pop()
+                    ]?.caption
+                    }}
+                  </label>
+
+                  <div [ngStyle]="
+                      formField?.option?.password
+                        ? {
+                            position: 'relative',
+                            display: 'flex',
+                            alignItems: 'center'
+                          }
+                        : {}
+                    ">
+                    <input [type]="
+                        formField?.option?.password
+                          ? !showPassword
+                            ? 'password'
+                            : 'text'
+                          : 'text'
+                      " #inputField="ngModel" [required]="formField?.required" [attr.inputmode]="
+                        formField?.option?.email
+                          ? 'email'
+                          : formField?.option?.password
+                          ? 'numeric'
+                          : 'text'
+                      " [pattern]="formField?.email ? customEmailPattern : ''" [email]="formField?.email"
+                      [minlength]="formField?.minlength" [maxlength]="formField?.maxlength"
+                      [ngClass]="getStyleWithoutClasses(formField?.scope?.style)?.classes"
+                      [ngStyle]="getStyleWithoutClasses(formField?.scope?.style)?.style" [(ngModel)]="
+                        form.propertySchema[getScope(formField.scope?.reference)][
+                          formField.scope?.reference.split('/').pop()
+                        ].value
+                      " [name]="formField.scope?.reference" [placeholder]="
+                        form.propertySchema[getScope(formField.scope?.reference)]?.[
+                          formField.scope?.reference.split('/').pop()
+                        ]?.placeholder
+                      " />
+
+                    <i *ngIf="formField?.option?.password" class="fa"
+                      [ngClass]="showPassword ? 'fa-eye' : 'fa-eye-slash'" (click)="togglePasswordVisibility()"
+                      style="position: absolute; right: 10px; cursor: pointer"></i>
+                  </div>
+                </div>
+
+                <div *ngIf="inputField?.touched && inputField?.invalid"
+                  [ngClass]="getStyleWithoutClasses(formField?.validation?.style)?.classes"
+                  [ngStyle]="getStyleWithoutClasses(formField?.validation?.style)?.style">
+                  <p [class]="
+                      formField?.layout === 'horizontal'
+                        ? 'text-red-400 m-0 horizontal-error'
+                        : 'text-red-400 m-0'
+                    " *ngIf="inputField?.errors">
+                    {{ setErroMessage(formField, errorMessages, inputField) }}
+                  </p>
+                </div>
+              </span>
+            </span>
+
+            <!-- number control -->
+            <div *ngSwitchCase="'number'" class="form-group">
+              <span *ngIf="formField?.option?.protected"
+                [ngClass]="getStyleWithoutClasses(formField?.label?.style)?.classes"
+                [ngStyle]="getStyleWithoutClasses(formField?.label?.style)?.style">
+                <h5>
+                  {{
+                  form.propertySchema[getScope(formField.scope?.reference)]?.[
+                  formField.scope?.reference.split('/').pop()
+                  ]?.caption
+                  }}
+
+                  {{
+                  form.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 [ngStyle]="getFieldInnerLayoutStyle(formField)">
+                  <label [ngClass]="getStyleWithoutClasses(formField?.label?.style)?.classes"
+                    [ngStyle]="getStyleWithoutClasses(formField?.label?.style)?.style">
+                    {{
+                    formField?.label?.value
+                    ? formField.label.value
+                    : form.propertySchema[getScope(formField.scope?.reference)]?.[
+                    formField.scope?.reference.split('/').pop()
+                    ]?.caption
+                    }}
+                  </label>
+
+                  <input type="number" [ngClass]="getStyleWithoutClasses(formField?.scope?.style)?.classes"
+                    [ngStyle]="getStyleWithoutClasses(formField?.scope?.style)?.style" [(ngModel)]="
+                      form.propertySchema[getScope(formField.scope?.reference)][
+                        formField.scope?.reference.split('/').pop()
+                      ].value
+                    " [name]="formField.scope?.reference" [placeholder]="
+                      form.propertySchema[getScope(formField.scope?.reference)]?.[
+                        formField.scope?.reference.split('/').pop()
+                      ]?.placeholder
+                    " />
+                </div>
+              </span>
+            </div>
+
+            <!-- checkbox control -->
+            <div *ngSwitchCase="'checkbox'" class="form-group"
+              [ngClass]="getStyleWithoutClasses(formField?.scope?.style)?.classes"
+              [ngStyle]="getStyleWithoutClasses(formField?.scope?.style)?.style">
+              <span *ngIf="formField?.option?.postfixCaption">
+                <label class="form-check-label">
+                  <input type="checkbox" class="form-check-input mr-2" [(ngModel)]="
+                      form.propertySchema[getScope(formField.scope?.reference)][
+                        formField.scope?.reference.split('/').pop()
+                      ].value
+                    " [name]="formField.scope?.reference" (ngModelChange)="setformData()" />
+
+                  {{
+                  form.propertySchema[getScope(formField.scope?.reference)]?.[
+                  formField.scope?.reference.split('/').pop()
+                  ]?.caption
+                  }}
+                </label>
+              </span>
+
+              <div *ngIf="!formField?.option?.postfixCaption" [ngStyle]="getFieldInnerLayoutStyle(formField)">
+                <label class="form-check-label">
+                  {{
+                  form.propertySchema[getScope(formField.scope?.reference)]?.[
+                  formField.scope?.reference.split('/').pop()
+                  ]?.caption
+                  }}
+
+                  <input type="checkbox" class="form-check-input" [(ngModel)]="
+                      form.propertySchema[getScope(formField.scope?.reference)][
+                        formField.scope?.reference.split('/').pop()
+                      ].value
+                    " [name]="formField.scope?.reference" (ngModelChange)="setformData()" />
+                </label>
+              </div>
+            </div>
+
+            <!-- dropdown control -->
+            <div *ngSwitchCase="'dropdown'" class="form-group"
+              [ngClass]="getStyleWithoutClasses(formField?.scope?.style)?.classes"
+              [ngStyle]="getStyleWithoutClasses(formField?.scope?.style)?.style">
+              <span *ngIf="formField?.option?.postfixCaption">
+                <select id="dynamic-dropdown" #dropdownField="ngModel"
+                  [ngClass]="getStyleWithoutClasses(formField?.scope?.style)?.classes"
+                  [ngStyle]="getStyleWithoutClasses(formField?.scope?.style)?.style" [name]="formField.scope?.reference"
+                  [(ngModel)]="
+                    form.propertySchema[getScope(formField.scope?.reference)][
+                      formField.scope?.reference.split('/').pop()
+                    ].value
+                  ">
+                  <option *ngFor="
+                      let item of form.propertySchema[getScope(formField.scope?.reference)]?.[
+                        formField.scope?.reference.split('/').pop()
+                      ]?.data
+                    " [value]="item[formField?.option?.optionValue]">
+                    {{ item[formField?.option?.optionLabel] }}
+                  </option>
+                </select>
+
+                <label [ngClass]="getStyleWithoutClasses(formField?.label?.style)?.classes"
+                  [ngStyle]="getStyleWithoutClasses(formField?.label?.style)?.style">
+                  {{
+                  form.propertySchema[getScope(formField.scope?.reference)]?.[
+                  formField.scope?.reference.split('/').pop()
+                  ]?.caption
+                  }}
+                </label>
+              </span>
+
+              <div *ngIf="!formField?.option?.postfixCaption">
+                <div [ngStyle]="getFieldInnerLayoutStyle(formField)">
+                  <label [ngClass]="getStyleWithoutClasses(formField?.label?.style)?.classes"
+                    [ngStyle]="getStyleWithoutClasses(formField?.label?.style)?.style">
+                    {{
+                    form.propertySchema[getScope(formField.scope?.reference)]?.[
+                    formField.scope?.reference.split('/').pop()
+                    ]?.caption
+                    }}
+                  </label>
+
+                  <nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select" #dropdownField="ngModel"
+                    [required]="formField?.required"
+                    [ngClass]="getStyleWithoutClasses(formField?.scope?.style)?.classes"
+                    [ngStyle]="getStyleWithoutClasses(formField?.scope?.style)?.style"
+                    [name]="formField.scope?.reference" [(ngModel)]="
+                      form.propertySchema[getScope(formField.scope?.reference)][
+                        formField.scope?.reference.split('/').pop()
+                      ].value
+                    ">
+                    <nz-option *ngFor="
+                        let item of form.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>
+
+                <div *ngIf="dropdownField?.touched && dropdownField?.invalid"
+                  [ngClass]="getStyleWithoutClasses(formField?.validation?.style)?.classes"
+                  [ngStyle]="getStyleWithoutClasses(formField?.validation?.style)?.style">
+                  <p [class]="
+                      formField?.layout === 'horizontal'
+                        ? 'text-red-400 m-0 horizontal-error'
+                        : 'text-red-400 m-0'
+                    " *ngIf="dropdownField?.errors">
+                    {{ setErroMessage(formField, errorMessages, dropdownField) }}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <!-- button/default control -->
+            <div *ngSwitchCase="'default'">
+              <button type="submit" [ngClass]="getStyleWithoutClasses(formField?.style)?.classes"
+                [ngStyle]="getStyleWithoutClasses(formField?.style)?.style"
+                (click)="invokeFormBtnClick(formField?.option, form.propertySchema)">
+                {{ formField?.label?.caption }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>

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

@@ -0,0 +1,333 @@
+import {
+  AfterViewInit,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  SimpleChanges,
+  OnChanges,
+  OnInit,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, FormsModule, NzSelectModule],
+  selector: 'vl-form',
+  templateUrl: './form.component.html',
+  styleUrl: './form.component.css',
+})
+export class FormComponent implements OnInit, OnChanges, AfterViewInit {
+  customEmailPattern = '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$';
+
+  showPassword = false;
+  formCopy: any = {};
+
+  @Input() errorMessages: any = {};
+  @Input() creditCardError: any = {};
+  @Input() form: any = {};
+  @Input() selectedLanguageInfo: any = {};
+
+  @Output() formButtonClick: EventEmitter<any> = new EventEmitter();
+  @Output() checkBoxChangeEvent: EventEmitter<any> = new EventEmitter();
+
+  ngOnInit(): void { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['form'] && this.form) {
+      this.formCopy = this.safeClone(this.form);
+      this.setValidations();
+    }
+
+    if (
+      (changes['selectedLanguageInfo'] || this.selectedLanguageInfo) &&
+      this.selectedLanguageInfo?.selectedLanguage
+    ) {
+      this.applySelectedLanguage();
+      this.setValidations();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    setTimeout(() => {
+      this.setValidations();
+    });
+  }
+
+  private safeClone(value: any): any {
+    try {
+      return JSON.parse(JSON.stringify(value || {}));
+    } catch {
+      return {};
+    }
+  }
+
+  private applySelectedLanguage(): void {
+    if (this.selectedLanguageInfo?.errorMessages) {
+      this.errorMessages = this.selectedLanguageInfo.errorMessages;
+    }
+
+    if (!this.formCopy || !this.form) {
+      return;
+    }
+
+    const selectedLanguage = this.selectedLanguageInfo.selectedLanguage;
+
+    this.form.propertySchema = this.formCopy.propertySchema
+      ? this.safeClone(this.formCopy.propertySchema)
+      : {};
+
+    this.form.propertySchema = this.translateSchema(
+      this.form.propertySchema,
+      selectedLanguage
+    );
+
+    if (this.formCopy?.layoutSchema?.formSections?.length) {
+      this.formCopy.layoutSchema.formSections.forEach(
+        (formSection: any, sectionIndex: number) => {
+          if (
+            formSection?.label?.caption &&
+            selectedLanguage[formSection.label.caption]
+          ) {
+            this.form.layoutSchema.formSections[sectionIndex].label.caption =
+              selectedLanguage[formSection.label.caption];
+          }
+
+          if (formSection?.formFields?.length) {
+            formSection.formFields.forEach(
+              (formField: any, fieldIndex: number) => {
+                if (
+                  formField?.label?.caption &&
+                  selectedLanguage[formField.label.caption]
+                ) {
+                  this.form.layoutSchema.formSections[sectionIndex].formFields[
+                    fieldIndex
+                  ].label.caption = selectedLanguage[formField.label.caption];
+                }
+              }
+            );
+          }
+        }
+      );
+    }
+  }
+
+  translateSchema(schema: any, selectedLanguage: any): any {
+    if (!schema || typeof schema !== 'object' || !selectedLanguage) {
+      return schema;
+    }
+
+    Object.keys(schema).forEach((key) => {
+      const value = schema[key];
+
+      if (value && typeof value === 'object' && !Array.isArray(value)) {
+        this.translateSchema(value, selectedLanguage);
+      }
+
+      if (Array.isArray(value)) {
+        value.forEach((item) => {
+          if (item && typeof item === 'object') {
+            this.translateSchema(item, selectedLanguage);
+          }
+        });
+      }
+
+      if (
+        value &&
+        typeof value === 'object' &&
+        typeof value.caption === 'string' &&
+        value.caption.trim()
+      ) {
+        const original = value.caption.trim();
+
+        if (selectedLanguage[original]) {
+          value.caption = selectedLanguage[original];
+        }
+      }
+
+      if (
+        value &&
+        typeof value === 'object' &&
+        typeof value.placeholder === 'string' &&
+        value.placeholder.trim()
+      ) {
+        const original = value.placeholder.trim();
+
+        if (selectedLanguage[original]) {
+          value.placeholder = selectedLanguage[original];
+        }
+      }
+    });
+
+    return schema;
+  }
+
+  getStyleWithoutClasses(styleObject: any): { classes: string; style: any } {
+    if (!styleObject || typeof styleObject !== 'object') {
+      return { classes: '', style: {} };
+    }
+
+    const { classes, ...styleWithoutClasses } = styleObject;
+
+    return {
+      classes: Array.isArray(classes) ? classes.join(' ') : classes || '',
+      style: styleWithoutClasses || {},
+    };
+  }
+
+  getSectionBodyStyle(formSection: any): any {
+    const layout = formSection?.layout || {};
+    const schemaStyle = this.getStyleWithoutClasses(formSection?.style).style;
+
+    return {
+      display: schemaStyle?.display || 'grid',
+      gridTemplateColumns:
+        schemaStyle?.gridTemplateColumns ||
+        `repeat(${layout?.desktopColumns || 12}, minmax(0, 1fr))`,
+      gap: schemaStyle?.gap || layout?.gap || '10px',
+      alignItems: schemaStyle?.alignItems || 'start',
+      width: '100%',
+      boxSizing: 'border-box',
+      ...schemaStyle,
+    };
+  }
+
+  getFieldWrapperStyle(formField: any): any {
+    const schemaStyle = this.getStyleWithoutClasses(formField?.style).style;
+
+    return {
+      minWidth: 0,
+      width: '100%',
+      boxSizing: 'border-box',
+      ...schemaStyle,
+    };
+  }
+
+  getFieldInnerLayoutStyle(formField: any): any {
+    if (formField?.layout === 'horizontal') {
+      return {
+        display: 'grid',
+        gridTemplateColumns: 'minmax(110px, 30%) 1fr',
+        alignItems: 'center',
+        gap: '10px',
+      };
+    }
+
+    return {
+      display: 'block',
+    };
+  }
+
+  getScope(scope: any): string {
+    if (!scope || typeof scope !== 'string') {
+      return '';
+    }
+
+    const start = scope.indexOf('#/') + 2;
+    const end = scope.indexOf('/', start);
+
+    if (start >= 2 && end > start) {
+      return scope.substring(start, end);
+    }
+
+    return '';
+  }
+
+  togglePasswordVisibility(): void {
+    this.showPassword = !this.showPassword;
+  }
+
+  invokeFormBtnClick(option: any, propertySchema: any): void {
+    this.formButtonClick.emit({
+      option,
+      propertySchema,
+    });
+  }
+
+  setformData(): void {
+    this.checkBoxChangeEvent.emit(this.form?.propertySchema);
+  }
+
+  setErroMessage(formField: any, errorMessages: any, field: any): string {
+    let error = '';
+    let fieldName = '';
+
+    if (field?.errors?.required) {
+      error = errorMessages?.required || '';
+    } else if (field?.errors?.email || field?.errors?.pattern) {
+      error = errorMessages?.pattern || '';
+    } else if (field?.errors?.minlength) {
+      error = errorMessages?.minlength || '';
+    } else if (field?.errors?.maxlength) {
+      error = errorMessages?.maxlength || '';
+    }
+
+    if (formField?.label?.value) {
+      fieldName = formField.label.value;
+    } else {
+      const scope = this.getScope(formField?.scope?.reference);
+      const key = formField?.scope?.reference?.split('/').pop();
+      const propertySchema = this.form?.propertySchema?.[scope]?.[key];
+
+      fieldName = propertySchema?.caption || propertySchema?.placeholder || '';
+    }
+
+    if (error && error.toString().includes('{{requiredLength}}')) {
+      error = error.replace(
+        /{{\s*requiredLength\s*}}/g,
+        formField?.minlength?.toString() || ''
+      );
+    }
+
+    return error.replace(/{{\s*field\s*}}/g, fieldName);
+  }
+
+  setValidations(): void {
+    if (!this.form?.layoutSchema?.formSections?.length) {
+      return;
+    }
+
+    this.form.layoutSchema.formSections.forEach((formSection: any) => {
+      if (!formSection?.formFields?.length) {
+        return;
+      }
+
+      formSection.formFields.forEach((formField: any) => {
+        const reference = formField?.scope?.reference;
+
+        if (!reference || !this.form?.propertySchema) {
+          return;
+        }
+
+        const scope = this.getScope(reference);
+        const key = reference.split('/').pop();
+
+        const property = this.form.propertySchema?.[scope]?.[key];
+
+        if (!property?.validation?.length) {
+          return;
+        }
+
+        property.validation.forEach((validation: any) => {
+          if (validation.required) {
+            formField.required = true;
+          }
+
+          if (validation.email) {
+            formField.email = true;
+          }
+
+          if (validation.minlength) {
+            formField.minlength = validation.minlength;
+          }
+
+          if (validation.maxlength) {
+            formField.maxlength = validation.maxlength;
+          }
+        });
+      });
+    });
+  }
+}