onshore-forms 0.0.1

package/src/lib/components/form-image-item/form-image-item.component.scss

@@ -0,0 +1,3 @@
+app-form-image-item {
+
+}

package/src/lib/components/form-image-item/form-image-item.component.ts

@@ -0,0 +1,155 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component, EventEmitter, Input, OnDestroy, OnInit,
+  Optional, Output,
+  Self
+} from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { DialogService } from 'primeng/dynamicdialog';
+import { TranslateService } from '@ngx-translate/core';
+import { OnshoreFormTemplateItem, OnshoreImageItemSettings } from '../../models/form.models';
+
+@Component({
+  selector: 'onshore-form-image-item',
+  templateUrl: './form-image-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OnshoreFormImageItemComponent implements ControlValueAccessor, OnInit, OnDestroy {
+  @Input() formTemplate!: OnshoreFormTemplateItem;
+  @Input() inverseColor: boolean = false;
+
+  // Image updload params
+  @Input() imageWidth: number = 400;
+  @Input() imageHeight: number = 400;
+  @Input() public containWithinAspectRatio = false;
+  @Input() public aspectRatio: number = 1 / 1;
+  @Output() imageDeleted: EventEmitter<string> = new EventEmitter();
+  @Output() imageCleared: EventEmitter<any> = new EventEmitter();
+  @Output() imageSelectedFromMedia: EventEmitter<any> = new EventEmitter();
+
+  image = '';
+  disabled = false;
+  webcamDialogVisible: boolean = false;
+  imageChooserDialogVisible: boolean = false;
+  formSettings: OnshoreImageItemSettings;
+
+  subscriptions: Array<Subscription> = [];
+
+  getFileImage(image: any) {
+    this.imageChooserDialogVisible = false;
+    if(image) {
+      this.image = image;
+      setTimeout(() => {
+        this.cdr.markForCheck();
+        this.ngControl?.control?.setValue(this.image);
+        this.ngControl?.control?.markAsDirty();
+      }, 500);
+    }
+  }
+
+  getWebcamImage(image: any) {
+    this.webcamDialogVisible = false;
+    if(image) {
+      this.image = image;
+      setTimeout(() => {
+        this.cdr.markForCheck();
+        this.ngControl?.control?.setValue(this.image);
+        this.ngControl?.control?.markAsDirty();
+      }, 500);
+    }
+  }
+
+  /*searchMedia() {
+    this.dialogService.open(SearchMediaComponent,{
+      styleClass: 'p-dialog-background-white',
+      modal: true,
+      header: this.translate.instant('search.media.dialogTitle'),
+      data: { targetType: this.formSettings.mediaType }
+    }).onClose.subscribe((result) => {
+      if(result) {
+        this.image = result.url;
+        setTimeout(() => {
+          this.cdr.markForCheck();
+          this.ngControl?.control?.setValue(this.image);
+          this.ngControl?.control?.markAsDirty();
+          this.imageSelectedFromMedia.next(result);
+        }, 500);
+      }
+    });
+  }*/
+
+  removeImage() {
+    if(this.image && !this.image.includes('base64')) {
+      this.imageDeleted.emit(this.image);
+    } else {
+      this.imageCleared.emit();
+    }
+
+    this.ngControl?.control?.setValue(null);
+    this.ngControl?.control?.markAsDirty();
+    this.image = '';
+  }
+
+  public writeValue(obj: any): void {
+    if(obj && !obj.includes('base64')) {
+      this.image = obj;
+    }
+    if(obj == null) {
+      this.image = '';
+    }
+    this.cdr.markForCheck();
+  }
+
+  public registerOnChange(fn: any): void {
+    if(this.ngControl.value) {
+      this.image = this.ngControl.value;
+      this.cdr.markForCheck();
+    }
+  }
+
+  public registerOnTouched(fn: any): void {}
+
+  public setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    this.cdr.markForCheck();
+  }
+
+  ngOnInit(): void {
+    this.ngControl.control.valueChanges.subscribe((value) => {
+      this.cdr.markForCheck();
+    });
+    this.ngControl.control.statusChanges.subscribe((status) => {
+      this.cdr.markForCheck();
+    });
+
+    if(this.ngControl.control.value == '' && this.formTemplate.default != undefined) {
+      this.ngControl.control.setValue(this.formTemplate.default);
+      this.cdr.markForCheck();
+    }
+    if(this.formTemplate.enabled) {
+      this.ngControl.control.enable();
+    } else {
+      this.ngControl.control.disable();
+    }
+    if(this.formTemplate.settings) {
+      this.formSettings = this.formTemplate.settings as OnshoreImageItemSettings;
+    }
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach((subscription: Subscription) => {
+      subscription.unsubscribe();
+    });
+    this.ngControl.control.disable();
+    this.image = null;
+  }
+
+  constructor(private cdr: ChangeDetectorRef,
+              @Self() @Optional() public ngControl: NgControl,
+              public dialogService: DialogService,
+              private translate: TranslateService) {
+    this.ngControl.valueAccessor = this;
+  }
+}

package/src/lib/components/form-input-item/form-input-item.component.html

@@ -0,0 +1,81 @@
+<div class="flex flex-column mb-3">
+  <div class="flex justify-content-between align-items-center">
+    <b [class.text-muted]="disabled" class="mb-1 white-space-nowrap">
+      {{formTemplate.label}}
+      <span *ngIf="formTemplate.required" class="tl-color-danger">*</span>
+    </b>
+    <i *ngIf="formTemplate.tooltip" class="fa fa-info-circle tl-color-black" [pTooltip]="formTemplate.tooltip" tooltipPosition="left" [escape]="false"></i>
+  </div>
+
+  <span class="p-inputgroup w-100">
+
+    <container-element [ngSwitch]="formTemplate.type" class="w-100" style="width: 100%">
+
+       <input *ngSwitchDefault
+              class="w-100"
+              type="text"
+              [name]="formTemplate.name"
+              [placeholder]="formTemplate.placeholder ?? ''"
+              pInputText
+              [formControl]="ngControl.control"
+              [class.p-invalid]="ngControl.control.touched && ngControl.control.invalid"
+              [autocomplete]="'prevent-template-' + formTemplate.name"/>
+
+      <input *ngSwitchCase="'password'"
+             class="w-100"
+             [type]="passwordVisible ? 'text' : formTemplate.type"
+             [name]="formTemplate.name"
+             [placeholder]="formTemplate.placeholder ?? ''"
+             pInputText
+             [formControl]="ngControl.control"
+             [class.p-invalid]="ngControl.control.touched && ngControl.control.invalid"
+             [autocomplete]="'prevent-template-' + formTemplate.name"/>
+
+      <p-inputNumber *ngSwitchCase="'number'"
+                     class="w-100"
+                     [name]="formTemplate.name"
+                     [placeholder]="formTemplate.placeholder ?? 0"
+                     [formControl]="ngControl.control"
+                     [class.p-invalid]="ngControl.control.touched && ngControl.control.invalid"
+                     [autocomplete]="'prevent-template-' + formTemplate.name"
+                     [step]="formTemplate.settings?.step ?? 1"
+                     [min]="formTemplate.settings?.min ?? null"
+                     [max]="formTemplate.settings?.max ?? null">
+      </p-inputNumber>
+      <!--
+                     [showButtons]="true"
+                     buttonLayout="horizontal"
+                     spinnerMode="horizontal"
+                     decrementButtonClass="p-button-outlined text-black-50"
+                     incrementButtonClass="p-button-outlined text-black-50"
+      -->
+    </container-element>
+
+    <span class="p-inputgroup-addon">
+      <i *ngIf="formTemplate.type != FormTemplateItemType.password" class="fa"
+         [class.tl-color-black]="ngControl.control.untouched"
+         [class.fa-check]="formTemplate.required && ngControl.control.valid"
+         [class.tl-color-primary1]="ngControl.control.touched && ngControl.control.valid"
+         [class.fa-exclamation-triangle]="ngControl.control.touched && ngControl.control.invalid"
+         [class.tl-color-danger]="ngControl.control.touched && ngControl.control.invalid"
+      ></i>
+      <i *ngIf="formTemplate.type == FormTemplateItemType.password" class="fa tl-color-black"
+         [class.fa-eye-slash]="passwordVisible"
+         [class.fa-eye]="!passwordVisible"
+         (click)="passwordVisible = !passwordVisible"
+      ></i>
+    </span>
+
+  </span>
+
+  <small *ngIf="formTemplate.description"><i class="fa fa-info-circle"></i> {{formTemplate.description}}</small>
+
+  <div *ngIf="ngControl.control.touched">
+    <onshore-form-validation-output
+      [validationItems]="formTemplate.validationItems"
+      [validationErrors]="ngControl.control.errors"
+      [externValidationPattern]="formTemplate.validationPatternTranslation">
+    </onshore-form-validation-output>
+  </div>
+
+</div>

package/src/lib/components/form-input-item/form-input-item.component.scss

@@ -0,0 +1,3 @@
+.p-inputtext {
+  border-color: var(--color-primary) !important;
+}

package/src/lib/components/form-input-item/form-input-item.component.ts

@@ -0,0 +1,66 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input, OnChanges, OnDestroy,
+  OnInit, Optional,
+  Self, SimpleChanges
+} from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { OnshoreFormTemplateItem } from '../../models/form.models';
+import { OnshoreFormTemplateType } from '../../enums/form.enums';
+
+@Component({
+  selector: 'onshore-form-input-item',
+  templateUrl: './form-input-item.component.html',
+  styleUrls: ['./form-input-item.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OnshoreFormInputItemComponent implements OnInit, ControlValueAccessor, OnChanges, OnDestroy {
+  @Input() formTemplate!: OnshoreFormTemplateItem;
+
+  FormTemplateItemType = OnshoreFormTemplateType;
+
+  passwordVisible: boolean = false;
+  disabled: boolean = false;
+
+  // ControlValueAccessor interface
+  writeValue(obj: any): void {}
+  registerOnChange(fn: any): void {}
+  registerOnTouched(fn: any): void {}
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+
+  ngOnInit(): void {
+    this.ngControl.control?.valueChanges.subscribe(() => {
+      this.cdr.markForCheck();
+    });
+    this.ngControl.control?.statusChanges.subscribe(() => {
+      this.cdr.markForCheck();
+    });
+    if(this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
+      this.ngControl.control?.setValue(this.formTemplate.default);
+      this.cdr.markForCheck();
+    }
+    if(this.formTemplate.enabled) {
+      this.ngControl.control?.enable();
+    } else {
+      this.ngControl.control?.disable();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.cdr.markForCheck();
+  }
+
+  ngOnDestroy() {
+    this.ngControl.control?.disable();
+  }
+
+  constructor(@Self() @Optional() public ngControl: NgControl,
+              private cdr: ChangeDetectorRef) {
+    this.ngControl.valueAccessor = this;
+  }
+}

package/src/lib/components/form-switch-item/form-switch-item.component.html

@@ -0,0 +1,8 @@
+<div class="flex flex-column pt-1">
+  <div class="flex justify-content-between align-items-center">
+    <i *ngIf="formTemplate.tooltip" class="fa fa-info-circle tl-color-black" [pTooltip]="formTemplate.tooltip" tooltipPosition="left" [escape]="false"></i>
+  </div>
+
+  <p-inputSwitch [name]="formTemplate.name" [formControl]="ngControl.control" [inputId]="formTemplate.name"></p-inputSwitch>
+
+</div>

package/src/lib/components/form-switch-item/form-switch-item.component.ts

@@ -0,0 +1,72 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component, EventEmitter,
+  Input, OnChanges, OnDestroy,
+  OnInit, Optional, Output,
+  Self, SimpleChanges
+} from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { debounceTime, distinctUntilChanged, skip } from 'rxjs';
+import { OnshoreFormTemplateItem } from '../../models/form.models';
+
+@Component({
+  selector: 'onshore-form-switch-item',
+  templateUrl: './form-switch-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OnshoreFormSwitchItemComponent implements OnInit, ControlValueAccessor, OnDestroy, OnChanges {
+  @Input() formTemplate!: OnshoreFormTemplateItem;
+  @Output() valueChange: EventEmitter<boolean> = new EventEmitter();
+
+  disabled: boolean = false;
+
+  // ControlValueAccessor interface
+  writeValue(obj: any): void {}
+  registerOnChange(fn: any): void {}
+  registerOnTouched(fn: any): void {}
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+
+  ngOnInit(): void {
+    this.ngControl.control?.valueChanges.pipe(
+      debounceTime(100),
+      distinctUntilChanged(),
+      skip(1)
+    ).subscribe(newValue => {
+      this.valueChange.emit(this.ngControl.control?.value);
+    });
+
+    this.ngControl.control?.valueChanges.subscribe(() => {
+      this.cdr.markForCheck();
+    });
+    this.ngControl.control?.statusChanges.subscribe(() => {
+      this.cdr.markForCheck();
+    });
+
+    if(this.ngControl.control?.value == undefined && this.formTemplate.default != undefined) {
+      this.ngControl.control?.setValue(this.formTemplate.default);
+      this.cdr.markForCheck();
+    }
+    if(this.formTemplate.enabled) {
+      this.ngControl.control?.enable();
+    } else {
+      this.ngControl.control?.disable();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.cdr.markForCheck();
+  }
+
+  ngOnDestroy() {
+    this.ngControl.control?.disable();
+  }
+
+  constructor(@Self() @Optional() public ngControl: NgControl,
+              private cdr: ChangeDetectorRef) {
+    this.ngControl.valueAccessor = this;
+  }
+}

package/src/lib/components/form-textarea-item/form-textarea-item.component.html

@@ -0,0 +1,39 @@
+<div class="flex flex-column mb-3">
+  <div class="flex justify-content-between align-items-center">
+    <b [class.text-muted]="disabled" class="mb-1 white-space-nowrap">
+      {{formTemplate.label}}
+      <span *ngIf="formTemplate.required" class="tl-color-danger">*</span>
+    </b>
+    <i *ngIf="formTemplate.tooltip" class="fa fa-info-circle tl-color-black" [pTooltip]="formTemplate.tooltip" tooltipPosition="left" [escape]="false"></i>
+  </div>
+
+  <span class="p-input-icon-right">
+    <i class="fa"
+       [class.tl-color-black]="ngControl.control?.untouched"
+       [class.fa-check]="ngControl.control?.touched && ngControl.control?.valid"
+       [class.text-primary]="ngControl.control?.touched && ngControl.control?.valid"
+       [class.fa-exclamation-triangle]="ngControl.control?.touched && ngControl.control?.invalid"
+       [class.tl-color-danger]="ngControl.control?.touched && ngControl.control?.invalid"
+    ></i>
+    <textarea  class="w-100"
+              [name]="formTemplate.name"
+              [placeholder]="formTemplate.label"
+              [rows]="3"
+               [cols]="30"
+               pInputTextarea
+               [autoResize]="true"
+               [formControl]="ngControl.control"
+               [class.p-invalid]="ngControl.control?.touched && ngControl.control?.invalid"></textarea>
+  </span>
+
+  <small *ngIf="formTemplate.description"><i class="fa fa-info-circle"></i> {{formTemplate.description}}</small>
+
+  <div *ngIf="ngControl.control?.touched">
+    <onshore-form-validation-output
+      [validationItems]="formTemplate.validationItems"
+      [validationErrors]="ngControl.control?.errors"
+      [externValidationPattern]="formTemplate.validationPatternTranslation">
+    </onshore-form-validation-output>
+  </div>
+
+</div>

package/src/lib/components/form-textarea-item/form-textarea-item.component.ts

@@ -0,0 +1,64 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input, OnChanges, OnDestroy,
+  OnInit, Optional,
+  Self, SimpleChanges
+} from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { OnshoreFormTemplateItem } from '../../models/form.models';
+import { OnshoreFormTemplateType } from '../../enums/form.enums';
+
+@Component({
+  selector: 'onshore-form-textarea-item',
+  templateUrl: './form-textarea-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OnshoreFormTextareaItemComponent implements OnInit, ControlValueAccessor, OnChanges, OnChanges, OnDestroy {
+  @Input() formTemplate!: OnshoreFormTemplateItem;
+
+  FormTemplateItemType = OnshoreFormTemplateType;
+
+  disabled: boolean = false;
+
+  // ControlValueAccessor interface
+  writeValue(obj: any): void {}
+  registerOnChange(fn: any): void {}
+  registerOnTouched(fn: any): void {}
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  ngOnInit(): void {
+    this.ngControl.control?.valueChanges.subscribe(() => {
+      this.cdr.markForCheck();
+    });
+    this.ngControl.control?.statusChanges.subscribe(() => {
+      this.cdr.markForCheck();
+    });
+
+    if(this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
+      this.ngControl.control?.setValue(this.formTemplate.default);
+      this.cdr.markForCheck();
+    }
+    if(this.formTemplate.enabled) {
+      this.ngControl.control?.enable();
+    } else {
+      this.ngControl.control?.disable();
+    }
+  }
+
+  ngOnDestroy() {
+    this.ngControl.control?.disable();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.cdr.markForCheck();
+  }
+
+  constructor(@Self() @Optional() public ngControl: NgControl,
+              private cdr: ChangeDetectorRef) {
+    this.ngControl.valueAccessor = this;
+  }
+}

package/src/lib/components/form-validation-output/form-validation-output.component.html

@@ -0,0 +1,2 @@
+<small *ngIf="validationErrors && validationErrors['pattern']" [innerHTML]="externValidationPattern"></small>
+<small *ngIf="validationTranslation" [innerHTML]="validationTranslation"></small>

package/src/lib/components/form-validation-output/form-validation-output.component.scss

@@ -0,0 +1 @@
+

package/src/lib/components/form-validation-output/form-validation-output.component.ts

@@ -0,0 +1,43 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input, OnChanges, SimpleChanges
+} from '@angular/core';
+import { ValidationErrors } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { OnshoreFormValidationItem } from '../../models/form.models';
+
+@Component({
+  selector: 'onshore-form-validation-output',
+  templateUrl: './form-validation-output.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OnshoreFormValidationOutputComponent implements OnChanges {
+  @Input() validationErrors!: ValidationErrors | null;
+  @Input() externValidationPattern: string = "";
+  @Input() validationItems!: OnshoreFormValidationItem[];
+
+  validationTranslation: string = '';
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.validationTranslation = '';
+    if(changes['validationErrors'].currentValue) {
+      Object.keys(this.validationErrors!).forEach(error => {
+        const exists = Object.values(this.validationItems).filter( validationItem => validationItem.key == error);
+        if(exists && exists.length > 0) {
+          this.validationTranslation += this.translate.instant('request.error.' + error) + '<br>';
+        } else {
+          const errorValues = this.validationErrors![error];
+          this.validationTranslation += this.translate.instant('form.validation.' + error, errorValues) + '<br>';
+        }
+      });
+    }
+    this.cdr.markForCheck();
+  }
+
+  constructor(private cdr: ChangeDetectorRef,
+              private translate: TranslateService,) {
+
+  }
+}

package/src/lib/enums/form.enums.ts

@@ -0,0 +1,24 @@
+export enum OnshoreFormTemplateType {
+  text = 'text',
+  textarea = 'textarea',
+  editor = 'editor',
+  password = 'password',
+  number = 'number',
+  email = 'email',
+  phone = 'phone',
+  regexp = 'regexp',
+  select = 'select',
+  check = 'check',
+  radio = 'radio',
+  image = 'image',
+  autocomplete = 'autocomplete',
+  color = 'color',
+  subform = 'subform'
+}
+
+export enum OnshoreImageError {
+  none = '',
+  fileType = 'fileType',
+  ratio = 'ratio',
+  size = 'size',
+}

package/src/lib/models/form.models.ts

@@ -0,0 +1,70 @@
+import { OnshoreFormTemplateType } from '../enums/form.enums';
+
+export interface OnshoreCountryCode {
+  id: number;
+  name: string;
+  alpha2: string;
+  alpha3: string;
+  currency?: string;
+}
+
+export interface OnshoreLanguageLocale {
+  id: number;
+  name: string;
+  code: string;
+}
+
+export interface OnshoreInputNumberOptionSettings {
+  step?: number;
+  min?: number;
+  max?: number;
+}
+
+export interface OnshoreInputTextOptionSettings {
+  minLength?: number;
+  maxLength?: number;
+}
+
+export interface OnshoreImageItemSettings {
+  disableImageSelection?: boolean;
+  disableWebcamSelection?: boolean;
+  disableMediaSelection?: boolean;
+  disableDelete?: boolean;
+  imagePlaceholder?: string;
+  mediaType?: string;
+}
+
+export interface OnshoreDropdownSettings {
+  multiple?: boolean;
+  showClear?: boolean;
+}
+
+export interface OnshoreFormTemplateItem {
+  name: string;
+  type?: OnshoreFormTemplateType;
+  required?: boolean;
+  label?: string;
+  placeholder?: string;
+  tooltip?: string;
+  enabled?: boolean;
+  options?: OnshoreFormTemplateOptions[] | void[];
+  optionDataKey?: string;
+  settings?: OnshoreInputNumberOptionSettings | OnshoreInputTextOptionSettings | OnshoreImageItemSettings | OnshoreDropdownSettings;
+  default?: any;
+  description?: string;
+  validationPatternTranslation?: string;
+  validationItems?: OnshoreFormValidationItem[];
+  validators?: any[];
+  subformArray?: OnshoreFormTemplateItem[];
+  subformObject?: OnshoreFormTemplateItem[];
+}
+
+export interface OnshoreFormTemplateOptions {
+  label: string;
+  value: any;
+}
+
+export interface OnshoreFormValidationItem {
+  key: string;
+  label: string;
+}

package/src/lib/onshore-forms.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-onshore-forms',
+  template: `
+    <p>
+      onshore-forms works 2!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class OnshoreFormsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}