@yomotech/view-toolkit 0.0.32 → 0.0.33

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

@@ -1,305 +0,0 @@
-<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

@@ -1,333 +0,0 @@
-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;
-          }
-        });
-      });
-    });
-  }
-}