@kms-ngx-ui/presentational 16.3.1 → 16.3.2

package/src/lib/ui/color-input/color-input.component.spec.ts

@@ -0,0 +1,44 @@
+/* tslint:disable:no-unused-variable */
+import { Component, Input } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { DirectivesModule } from '../../directives/directives.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { ColorInputComponent } from './color-input.component';
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+
+@Component({ selector: 'kms-tooltip-icon', template: '' })
+class TooltipIconComponentMock { @Input() public tooltipText: any; }
+
+describe('ColorInputComponent', () => {
+    let component: ColorInputComponent;
+    let fixture: ComponentFixture<ColorInputComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports : [ 
+                ReactiveFormsModule,
+                DirectivesModule,
+                MatFormFieldModule,
+                BrowserAnimationsModule,
+                MatInputModule
+            ],
+            declarations: [
+                ColorInputComponent,
+                TooltipIconComponentMock,
+            ],
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ColorInputComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/src/lib/ui/color-input/color-input.component.ts

@@ -0,0 +1,67 @@
+import { Component, forwardRef, Input, OnInit, Renderer2 } from '@angular/core';
+import { ControlValueAccessor, UntypedFormBuilder, UntypedFormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FormControlParentComponent } from './../../parent-components/form-control.component';
+
+@Component({
+    selector: 'kms-color-input',
+    templateUrl: './color-input.component.html',
+    styleUrls: ['./color-input.component.scss'],
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ColorInputComponent),
+            multi: true,
+        },
+    ],
+})
+export class ColorInputComponent extends FormControlParentComponent implements OnInit, ControlValueAccessor {
+
+    @Input() label = '';
+    @Input() tooltipText = '';
+    @Input() placeholder = '';
+    valid: boolean | null | undefined;
+
+    constructor(public formBuilder: UntypedFormBuilder, public renderer: Renderer2) {
+        super(formBuilder, renderer);
+    }
+
+    ngOnInit() {
+        this.form = this.formBuilder.group({
+            color: '',
+        });
+        
+        super.ngOnInit();
+        
+        this.formInitialized = true;
+
+        this.form.valueChanges.subscribe((value) => {
+            this.internalValue = value.color;
+            this.onChange(value.color);
+        });
+
+    }
+
+    validate(_: UntypedFormControl) {
+        // TODO fix to validate complete form
+        this.valid = this.matchesHex(this.form.value) ? null : false;
+        return this.valid && {
+            invalid: !this.valid
+        };
+    }
+
+    matchesHex(match?: string){
+        if(match){
+            const ret = match.match(/^#[0-9a-f]{6}$/i);
+            this.valid = ret && ret.length>0;
+            return ret;
+        }
+        return false;
+    }
+
+    updateSelectedColor(value: any){
+        const color = value.target.value;
+        this.value = color;
+        this.internalValue = color;
+        this.change(color);
+    }
+}

package/src/lib/ui/dropdown-from-data/dropdown-from-data.component.html

@@ -0,0 +1,23 @@
+<form [formGroup]="form">
+  <mat-form-field
+    [attr.required]="required"
+    [floatLabel]="placeholder ? 'always' : 'auto'"
+  >
+    <mat-label>{{ label }}</mat-label>
+    <mat-select
+      placeholder="{{ placeholder }}"
+      disableOptionCentering
+      [(value)]="value"
+      (selectionChange)="valueChanged($event?.value)"
+      #child
+      [disabled]="disabled"
+      [multiple]="multiple"
+    >
+      <mat-option *ngFor="let key of keys; let i = index" [value]="values[i]">
+        <span *ngIf="(hasNullOption && i != 0) || !hasNullOption">{{
+          setDisplayKey(key)
+        }}</span>
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+</form>

package/src/lib/ui/dropdown-from-data/dropdown-from-data.component.ts

@@ -0,0 +1,174 @@
+import {
+  Component,
+  forwardRef,
+  Input,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+  Renderer2,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  UntypedFormBuilder,
+  NG_VALUE_ACCESSOR,
+} from '@angular/forms';
+import { EnumValues } from 'enum-values/src/enumValues';
+import { FormControlParentComponent } from '../../parent-components/form-control.component';
+
+/**
+ * Dropdown from data component {@link https://leaseplan-dev.rentoffice.de/styleguide#ui-elements}
+ */
+@Component({
+  selector: 'kms-dropdown-from-data',
+  templateUrl: './dropdown-from-data.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DropdownFromDataComponent),
+      multi: true,
+    },
+  ],
+})
+export class DropdownFromDataComponent
+  extends FormControlParentComponent
+  implements OnInit, ControlValueAccessor, OnChanges
+{
+  // structured data as a enum set. Can be used in combination with 'optionsPlainArray' to set diferent values by index
+  @Input() optionsEnum: any;
+
+  // structured data as a simple array of elements
+  @Input() optionsPlainArray: any;
+
+  // structured data as an array of objects used in combination with the input 'mapKey' and 'mapValue'
+  @Input() optionsObjArray: any;
+  // key identifier of the obj. If mapValue doesnt exist, mapKey is also the value
+  @Input() mapKey?: any;
+  // value identifier of the obj
+  @Input() mapValue?: any;
+
+  // options for the dropdown have a null value at the beginning of the array
+  @Input() hasNullOption = false;
+
+  // translation object for the label and placeholder
+  @Input() translation?: ITranslation;
+  @Input() placeholder = '';
+  @Input() label = '';
+  @Input() required = false;
+  @Input() useEnumIndexAsValue = false;
+
+  // multiple selection
+  @Input() multiple = false;
+
+  public keys: any[] = [];
+  public values: any[] = [];
+
+  Object = Object;
+
+  constructor(
+    public formBuilder: UntypedFormBuilder,
+    public renderer: Renderer2
+  ) {
+    super(formBuilder, renderer);
+  }
+
+  /**
+   * Hook used to sync changes on set Label and Type
+   * @param changes
+   */
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.optionsPlainArray) {
+      this.values = this.optionsPlainArray;
+      this.keys = this.optionsPlainArray;
+    }
+    this.setKeyValues();
+  }
+
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      dropdownData: [],
+    });
+    this.formInitialized = true;
+
+    this.form.valueChanges.subscribe((value) => {
+      this.internalValue = value.dropdownData;
+      this.onChange(value.dropdownData);
+    });
+
+    super.ngOnInit();
+  }
+
+  /**
+   * transofrms the data values to the correct format for be used by the template
+   * @param value
+   */
+  private setKeyValues(): void {
+    if (this.optionsObjArray && this.mapKey && this.mapValue) {
+      this.keys = this.optionsObjArray.map((obj: any) => obj[`${this.mapKey}`]);
+      this.values = this.optionsObjArray.map(
+        (obj: any) => obj[`${this.mapValue}`]
+      );
+    } else if (this.optionsObjArray && this.mapKey) {
+      this.keys = this.optionsObjArray.map((obj: any) => obj[`${this.mapKey}`]);
+      this.values = this.optionsObjArray.map(
+        (obj: any) => obj[`${this.mapKey}`]
+      );
+    }
+    if (this.optionsEnum) {
+      this.keys = EnumValues.getNames(this.optionsEnum);
+      if (this.optionsPlainArray) {
+        this.values = this.optionsPlainArray;
+      } else {
+        const values = EnumValues.getValues(this.optionsEnum);
+
+        // var who defines if enum is componed just with keys or keyValues. E.g enum KeyEnum { VALUE1, VALUE2 } or enum KeyValueEnum { VALUE4 = 'V4', VALUE5 = 'V5' }
+        let keyValueEnum = false;
+
+        for (let i = 0; i < this.keys.length; i++) {
+          if (i !== values[i]) {
+            keyValueEnum = true;
+          }
+        }
+        if (keyValueEnum || this.useEnumIndexAsValue) {
+          this.values = values;
+        } else {
+          this.values = EnumValues.getNames(this.optionsEnum);
+        }
+      }
+    }
+    if (this.hasNullOption === true) this.keys.unshift(null);
+    if (this.hasNullOption === true) this.values.unshift(null);
+  }
+
+  /**
+   * set the value of the dropdown based if translation is set
+   * @param key
+   */
+  public setDisplayKey(key: any) {
+    if (this.translation) {
+      if (this.translation.isPrefix) {
+        return this.translation.service?.instant?.(
+          this.translation.path + '.' + key
+        );
+      } else {
+        return this.translation.service?.instant?.(this.translation.path);
+      }
+    }
+    return key;
+  }
+
+  valueChanged(value: any) {
+    this.form.patchValue({
+      dropdownData: value,
+    });
+    this.onSelectItemEmitter.emit(value);
+  }
+}
+
+/**
+ * Interface that defines the translation object in template
+ */
+interface ITranslation {
+  path: string;
+  isPrefix?: boolean;
+  service: any;
+}

package/src/lib/ui/enum-radiogroup/enum-radiogroup.component.html

@@ -0,0 +1,6 @@
+<form [formGroup]="form">
+    <div>{{ header }}</div>
+    <mat-radio-group [formControl]="form.controls['enumData']" [disabled]="disabled" #child>
+        <mat-radio-button [value]="choice" [checked]="value === choice" *ngFor="let choice of optionValues">{{ translationPrefix + '.' + choice | translate }}</mat-radio-button>
+    </mat-radio-group>
+</form>

package/src/lib/ui/enum-radiogroup/enum-radiogroup.component.spec.ts.BAK

@@ -0,0 +1,25 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EnumRadiogroupComponent } from './enum-radiogroup.component';
+
+describe('EnumRadiogroupComponent', () => {
+    let component: EnumRadiogroupComponent;
+    let fixture: ComponentFixture<EnumRadiogroupComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [EnumRadiogroupComponent],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(EnumRadiogroupComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/src/lib/ui/enum-radiogroup/enum-radiogroup.component.ts

@@ -0,0 +1,43 @@
+import { Component, forwardRef, Input, OnInit, Renderer2 } from '@angular/core';
+import { ControlValueAccessor, UntypedFormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NullAble } from '../../models';
+
+import { FormControlParentComponent } from './../../parent-components/form-control.component';
+
+@Component({
+    selector: 'kms-enum-radiogroup',
+    templateUrl: './enum-radiogroup.component.html',
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => EnumRadiogroupComponent),
+            multi: true,
+        },
+    ],
+})
+export class EnumRadiogroupComponent extends FormControlParentComponent implements OnInit, ControlValueAccessor {
+    @Input() header: NullAble<String>;
+    @Input() optionsEnum: any;
+    @Input() translationPrefix = '';
+
+    public optionValues: any;
+    
+    constructor(public formBuilder: UntypedFormBuilder, public renderer: Renderer2) {
+        super(formBuilder, renderer);
+    }
+
+    ngOnInit(){
+        this.optionValues = Object.keys(this.optionsEnum).filter(x => !(parseInt(x) >= 0));
+        this.form = this.formBuilder.group({
+            enumData: [],
+        });
+        this.formInitialized = true;
+
+        this.form.valueChanges.subscribe((value) => {
+            this.internalValue = value.enumData;
+            this.onChange(value.enumData);
+        });
+
+        super.ngOnInit();
+    }
+}

package/src/lib/ui/file-input/file-input.component.html

@@ -0,0 +1,45 @@
+<form [formGroup]="form" (change)="newImageLoading=true" class="fileInput"> 
+
+    <div *ngIf="form.value.Filename && previewImage">
+        <div *ngIf="newImageLoading">
+            {{ 'file-input.loading' | translate }}
+        </div>
+        <div *ngIf="!newImageLoading">
+            <div class="">
+                <div class="">
+                    <img *ngIf="form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')" [src]="form.value.ImageAsDataURL" [src]="form.value.ImageLink" style="height: 40px; width: fit-content;" />
+                    <img *ngIf="form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''" [src]="form.value.ImageAsDataURL" style="height: 40px; width: fit-content;" />
+                </div>
+                <div class="">{{form.value.Filename}}</div>
+                <div class="">
+                    <div (click)="removeFromList()" *ngIf="allowRemove">
+                        <kms-icon icon="trash" [iconSize]="IconSize.TINY" iconClass="color-black"></kms-icon> 
+                        {{ 'file-input.remove' }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div *ngIf="!previewImage">
+        <div class="">{{form.value.Filename}}</div>
+    </div>
+
+    <button (click)="selectImageOverlay()" class="button-primary-font-color" mat-stroked-button>
+        <span>{{ label }}</span>
+    </button>
+    <input
+        type="file"
+        [accept]="acceptedFileMimetypes"
+        style="display: none"
+        #fileInput
+        (click)="clearInputValue($event)"
+        (change)="selectImage($event)"
+    />
+
+    <input type="hidden" [formControl]="form.controls['ImageIdent']" />
+    <input type="hidden" [formControl]="form.controls['ImageLink']" />
+    <input type="hidden" [formControl]="form.controls['Filename']" />
+    <input type="hidden" [formControl]="form.controls['ImageAsDataURL']" />
+    <input type="hidden" [formControl]="form.controls['Text']" />
+
+</form>

package/src/lib/ui/file-input/file-input.component.spec.ts.BAK

@@ -0,0 +1,25 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileInputComponent } from './file-input.component';
+
+describe('FileInputComponent', () => {
+    let component: FileInputComponent;
+    let fixture: ComponentFixture<FileInputComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [FileInputComponent],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(FileInputComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/src/lib/ui/file-input/file-input.component.ts

@@ -0,0 +1,236 @@
+import { Component, Input, forwardRef, OnInit, ViewChild, Renderer2, EventEmitter, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
+
+import {
+    ControlValueAccessor,
+    UntypedFormBuilder,
+    UntypedFormControl,
+    UntypedFormGroup,
+    NG_VALIDATORS,
+    NG_VALUE_ACCESSOR,
+} from '@angular/forms';
+import { Subscription } from 'rxjs';
+
+//import { TranslateService } from '@ngx-translate/core';
+import { IconSize } from '../../models/iconSize.enum';
+import { AttachedFileDTO } from '../../models/types/attached-file-dto.model';
+import { isValue } from '../../models/is-value.function';
+
+// Max size in bytes of uploaded image
+const MAX_SIZE_BYTES = 2097152;
+
+@Component({
+    selector: 'kms-file-input',
+    templateUrl: './file-input.component.html',
+    styleUrls: ['./file-input.component.scss'],
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => FileInputComponent),
+            multi: true,
+        },
+        {
+            provide: NG_VALIDATORS,
+            useExisting: forwardRef(() => FileInputComponent),
+            multi: true,
+        },
+    ],
+})
+
+export class FileInputComponent implements ControlValueAccessor, OnInit {
+    
+    @ViewChild('fileInput') public fileInput: any;
+
+    @Input() label = '';
+    
+    @Input() previewImage = true; 
+    @Input() allowRemove = true; 
+    @Input() previewImageText = ''; 
+    @Input() maxSizeBytes = MAX_SIZE_BYTES; 
+    @Input() resizePixels = 0; 
+    @Input() acceptedFileMimetypes = 'image/jpeg, image/jpg, image/png'; 
+
+    form= this.formBuilder.group({
+        ImageIdent: new UntypedFormControl(''),
+        ImageLink: new UntypedFormControl(''),
+        Filename: new UntypedFormControl(''),
+        ImageAsDataURL: new UntypedFormControl(''),
+        Text: new UntypedFormControl(''),
+    });
+
+    subscriptions: Subscription[] = [];
+    newImageLoading = false
+
+    IconSize = IconSize;
+
+    @Output() formDataChanged: EventEmitter<UntypedFormGroup> = new EventEmitter();
+
+    /**
+     * Constructor
+     * @param formBuilder 
+     * @param appRef 
+     * @param cd 
+     * @param translateService 
+     * @param renderer 
+     */
+    constructor(
+        public formBuilder: UntypedFormBuilder, 
+        public appRef: ApplicationRef,
+        public cd: ChangeDetectorRef,
+        //private translateService: TranslateService,
+        public renderer: Renderer2
+    ) {
+        
+    }
+
+    /**
+     *  Click on button triggers file-input to open OS file dialog
+     */
+    selectImageOverlay() {
+        this.fileInput.nativeElement.click();
+    }
+
+    /**
+     * Function to manage the input image
+     * Returns an error if the file exceeds maximum wanted filesize (Mb). 
+     * @param ev
+     * @returns
+     */
+    selectImage(ev: any) {
+        if (ev.target.files && ev.target.files[0]) {
+            const file:File = ev.target.files[0];
+
+            if (file.size > this.maxSizeBytes) {
+                this.clearInputValue(ev);
+                //alert(this.translateService.instant('errors.fileTooBig'));
+                return;
+            } else {
+                this.newImageLoading = true;
+
+                if(this.resizePixels > 0){
+                    const logoUrl = URL.createObjectURL(file);
+                    const imgEl = document.createElement('img');
+                    imgEl.addEventListener('load', () => {
+                        const resizedLogo = this.resizeImage(imgEl, this.resizePixels);
+                        const newFile = this.generateModel(file.name, resizedLogo, this.value.ImageIdent, this.value.ImageLink, this.value.Text);
+                        this.value=newFile;
+                        this.newImageLoading = false;
+                        this.cd.markForCheck();
+                    });
+                    imgEl.src = logoUrl;
+                }else{
+                    const reader = new FileReader();
+                    reader.readAsDataURL(file);
+                    reader.onload = (e: any) => {
+                        const newFile = this.generateModel(file.name, e.target.result, this.value.ImageIdent, this.value.ImageLink, this.value.Text);
+                        this.value=newFile;
+                        this.newImageLoading = false;
+                        this.cd.markForCheck();
+                    };
+                }
+                
+            }
+        }else{
+            console.warn("No file selected");
+        }
+    }
+
+    /**
+     * Resize an image
+     * @param imgEl
+     * @param wantedWidth as number
+     * @returns string 
+     */
+     private resizeImage(imgEl: any, wantedWidth: number) {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        const aspect = imgEl.width / imgEl.height;
+        canvas.width = wantedWidth;
+        canvas.height = wantedWidth / aspect;
+        if (isValue(ctx)) ctx.drawImage(imgEl, 0, 0, canvas.width, canvas.height);
+        return canvas.toDataURL();
+    }
+
+    /**
+     * Generate default object
+     * @param name as string
+     * @param content as string
+     * @returns AttachedFileDTO
+     */
+    generateModel(name?: string, content?: string, ident?: string, imageLink?: string, text?: string){
+        return {
+            ImageIdent: ident ? ident : '',
+            Filename: name ? name : '',
+            ImageAsDataURL: content ? content : '',
+            ImageLink: imageLink ? imageLink : '',
+            Text: text ? text : ''
+        } as AttachedFileDTO;
+    }
+
+    /**
+     * Remove image 
+     */
+     removeFromList(){
+        this.value= this.generateModel('','', '', '');
+    }
+
+    /**
+     * get value
+     */
+        get value(): AttachedFileDTO {
+        return this.form.value;
+    }
+
+    /**
+     * set value
+     */
+    set value(value: AttachedFileDTO) {
+        this.form.setValue(value);
+        this.onChange(value);
+        this.formDataChanged.emit(this.form);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange: any = () => {};
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouch: any = () => {};
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    ngOnInit() {}
+
+
+    ngOnDestroy() {
+        this.subscriptions.forEach(s => s.unsubscribe());
+    }   
+
+    registerOnChange(fn: any) {
+        this.onChange = fn;
+    }
+
+    registerOnTouched(fn: any) {
+        this.onTouch = fn;
+    }
+
+    writeValue(value: AttachedFileDTO | null) {
+        if (value) {
+            this.value = value;
+        }
+
+        if (value === null) {
+            this.form.reset();
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/adjacent-overload-signatures
+    validate(_: UntypedFormControl) {
+        return this.form.valid ? null : { styles: { valid: false } };
+    }
+
+    /**
+     * OnClick event listener of input#fileInput to clear his input value
+     */
+    clearInputValue(ev: any) {
+        const element = ev.target as HTMLInputElement;
+        element.value = '';
+    }
+}