@kms-ngx-ui/presentational 16.3.0 → 16.3.2

package/src/lib/kms-ngx-ui-presentational.module.ts

@@ -0,0 +1,124 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { KmsUiPresentationalComponent } from './kms-ngx-ui-presentational.component';
+import { ActionsParentComponent } from './parent-components/actions.component';
+import { CheckboxComponent } from './ui/checkbox/checkbox.component';
+
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatRadioModule } from '@angular/material/radio';
+import { ColorInputComponent } from './ui/color-input/color-input.component';
+import { RadioButtonComponent } from './ui/radiobutton/radiobutton.component';
+import { TimeInputComponent } from './ui/time-input/time-input.component';
+import { YesNoRadiogroupComponent } from './ui/yes-no-radiogroup/yes-no-radiogroup.component';
+import { FileInputComponent } from './ui/file-input/file-input.component';
+import { LoaderComponent } from './ui/loader/loader.component';
+import { FlyoutComponent } from './ui/flyout/flyout.component';
+import { CustomPipesModule } from './pipes/custom-pipes.module';
+import { IconComponent } from './ui/icon/icon.component';
+import { EnumRadiogroupComponent } from './ui/enum-radiogroup/enum-radiogroup.component';
+import { KMSAccordionItemComponent } from './ui/kms-accordion-item/kms-accordion-item.component';
+import { MapComponent } from './ui/map/map.component';
+import { SalutationDropdownComponent } from './ui/salutation-dropdown/salutation-dropdown.component';
+import { TooltipComponent } from './ui/tooltip/tooltip.component';
+import { TooltipIconComponent } from './ui/tooltip-icon/tooltip-icon.component';
+
+import { SalutationRadiogroupComponent } from './ui/salutation-radiogroup/salutation-radiogroup.component';
+import { BackToTopComponent } from './ui/back-to-top/back-to-top.component';
+import { ButtonWithConfirmDialogComponent } from './ui/button-with-confirm-dialog/button-with-confirm-dialog.component';
+import { GoogleMapsModule } from '@angular/google-maps';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { GenericDialogComponent } from './ui/generic-dialog/generic-dialog.component';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatSelectModule } from '@angular/material/select';
+import { MatMenuModule } from '@angular/material/menu';
+import { DropdownFromDataComponent } from './ui/dropdown-from-data/dropdown-from-data.component';
+import { ImageSliderComponent } from './ui/image-slider/image-slider.component';
+import { DirectivesModule } from './directives/directives.module';
+import { TranslateModule } from '@ngx-translate/core';
+import { ViewportService } from './services/viewport.service';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { NgxUsefulSwiperModule } from 'ngx-useful-swiper';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+
+@NgModule({
+  declarations: [
+    ActionsParentComponent,
+    BackToTopComponent,
+    ButtonWithConfirmDialogComponent,
+    CheckboxComponent,
+    ColorInputComponent,
+    DropdownFromDataComponent,
+    EnumRadiogroupComponent,
+    EnumRadiogroupComponent,
+    FileInputComponent,
+    FlyoutComponent,
+    GenericDialogComponent,
+    IconComponent,
+    ImageSliderComponent,
+    KMSAccordionItemComponent,
+    KmsUiPresentationalComponent,
+    LoaderComponent,
+    MapComponent,
+    RadioButtonComponent,
+    SalutationDropdownComponent,
+    SalutationRadiogroupComponent,
+    TimeInputComponent,
+    TooltipComponent,
+    TooltipIconComponent,
+    YesNoRadiogroupComponent,
+  ],
+  imports: [
+    CommonModule,
+    DragDropModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    MatRadioModule,
+    MatDialogModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatMenuModule,
+    CustomPipesModule,
+    GoogleMapsModule,
+    MatExpansionModule,
+    MatSelectModule,
+    MatProgressSpinnerModule,
+    DirectivesModule,
+    TranslateModule,
+    NgxUsefulSwiperModule,
+  ],
+  exports: [
+    ActionsParentComponent,
+    BackToTopComponent,
+    ButtonWithConfirmDialogComponent,
+    CheckboxComponent,
+    ColorInputComponent,
+    DropdownFromDataComponent,
+    EnumRadiogroupComponent,
+    EnumRadiogroupComponent,
+    FileInputComponent,
+    FlyoutComponent,
+    GenericDialogComponent,
+    IconComponent,
+    ImageSliderComponent,
+    KMSAccordionItemComponent,
+    KmsUiPresentationalComponent,
+    LoaderComponent,
+    MapComponent,
+    RadioButtonComponent,
+    SalutationDropdownComponent,
+    SalutationRadiogroupComponent,
+    TimeInputComponent,
+    TooltipComponent,
+    TooltipIconComponent,
+    YesNoRadiogroupComponent,
+  ],
+  providers: [ViewportService],
+})
+export class KmsUiPresentationalModule {}

package/src/lib/kms-ngx-ui-presentational.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { KmsUiPresentationalService } from './kms-ngx-ui-presentational.service';
+
+describe('KmsUiPresentationalService', () => {
+  let service: KmsUiPresentationalService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(KmsUiPresentationalService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/kms-ngx-ui-presentational.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KmsUiPresentationalService {
+
+  constructor() { }
+}

package/src/lib/models/address.model.ts

@@ -0,0 +1,16 @@
+/**
+ * @copyright KMS GmbH
+ */
+import { NullAble } from "./types/nullable.type";
+
+
+/**
+ * Typical basic address data
+ */
+export class Address {
+    public City: NullAble<string>;
+    public Name1: NullAble<string>;
+    public Name2: NullAble<string>;
+    public Street: NullAble<string>;
+    public Zip: NullAble<string>;
+}

package/src/lib/models/iconSize.enum.ts

@@ -0,0 +1,17 @@
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+export enum IconSize {
+    FULLSIZE = 'size-full',
+    TINY = 'size-16',
+    SMALLER = 'size-20',
+    SMALL = 'size-32',
+    MEDIUM = 'size-64',
+    LARGE = 'size-128',
+    XL = 'size-256',
+    XXL = 'size-512',
+    XXXL = 'size-1024',
+    NONE = 'NONE',
+}
+

package/src/lib/models/image-snippet.model.ts

@@ -0,0 +1,17 @@
+/**
+ * General Image Model
+ */
+export class ImageSnippet {
+    status = 'init';
+    constructor(
+      public src: string,
+      public fileName: string,
+      public srcType = ImageSourceType.ByteArray,
+      ) {}
+  }
+
+export enum ImageSourceType {
+  Ident = 'Idnet',
+  ByteArray = 'ByteArray',
+  URL = 'URL'
+}

package/src/lib/models/is-value.function.ts

@@ -0,0 +1,20 @@
+/**
+ * @copyright FLYACTS GmbH 2019
+ */
+
+import { NullAble } from "./types/nullable.type";
+
+
+/**
+ * Check if null or undefined
+ * @param value value that is being checked
+ */
+export function isValue<T>(value: NullAble<T>): value is T {
+    if (value === null) {
+        return false;
+    }
+    if (typeof value === 'undefined') {
+        return false;
+    }
+    return true;
+}

package/src/lib/models/salutation.enum.ts

@@ -0,0 +1,6 @@
+// TODO change values after cleaned up database
+export enum SalutationEnum {
+    NOT_SPECIFIED = 'Keine Anrede',
+    MALE = 'Herr',
+    FEMALE = 'Frau',
+}

package/{lib/models/types/attached-file-dto.model.d.ts → src/lib/models/types/attached-file-dto.model.ts}

@@ -1,7 +1,7 @@
 /**
  * Attached File DTO
  */
-export declare class AttachedFileDTO {
+export class AttachedFileDTO {
     ImageIdent?: string;
     ImageLink?: string;
     Filename?: string;

package/{lib/models/types/nullable.type.d.ts → src/lib/models/types/nullable.type.ts}

@@ -1,4 +1,5 @@
 /*!
  * @copyright FLYACTS GmbH 2019
  */
+
 export type NullAble<T> = T | null | undefined;

package/src/lib/parent-components/actions.component.ts

@@ -0,0 +1,43 @@
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'kms-actions',
+    template: '',
+})
+export class ActionsParentComponent {
+    /**
+     * Defines the disabled property
+     */
+    @Input() disabled = false;
+
+    /**
+     * Set button as selected. F.e. in multiselect component
+     */
+    @Input() checked = false;
+
+    /**
+     * Displayed label.
+     */
+    @Input() label = '';
+
+    /**
+     * Link
+     */
+    @Input() link = '';
+
+    /**
+     * Internal value that will be send if a form is submitted.
+     */
+    @Input() initialValue = '';
+
+    @Output() select = new EventEmitter();
+
+    selectAction(id: string) {
+        this.checked = !this.checked;
+        this.select.emit(id);
+    }
+}

package/src/lib/parent-components/form-control.component.ts

@@ -0,0 +1,77 @@
+import { Component, ElementRef, Input, EventEmitter, Output, ViewChild, Renderer2 } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormControl } from '@angular/forms';
+import { FormParentComponent } from './form.component';
+
+@Component({
+    selector: 'kms-formControlParent',
+    template: '',
+})
+export class FormControlParentComponent extends FormParentComponent {
+    @Input() defaultDataOverride = ''; // when we have NO form around, get default via input to set it manually
+    @Output() onSelectItemEmitter = new EventEmitter<string>();
+
+    @ViewChild('child') public child?: ElementRef<HTMLInputElement>;
+
+    public internalValue = '';
+
+    constructor(public formBuilder: UntypedFormBuilder, public renderer: Renderer2) {
+        super(formBuilder);
+    }
+
+    ngOnInit(){
+        super.ngOnInit();
+    }
+
+    change(value: string) {
+        this.onChange(value);
+        this.onTouched();
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    public onChange: any = () => {};
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouch: any = () => {};
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched: any = () => {};
+
+    get value(): string {
+        return this.internalValue;
+    }
+
+    set value(value: string) {
+        this.internalValue = value;
+        if (value !== undefined && this.internalValue !== value) {
+            if (!this.internalValue && this.defaultDataOverride) {
+                this.internalValue = this.defaultDataOverride;
+            }
+            this.onChange(value);
+            this.onTouch(value);
+        }
+    }
+
+    writeValue(value: string) {
+        this.internalValue = value;
+        this.value = value;
+    }
+
+    registerOnChange(fn: any) {
+        this.onChange = fn;
+    }
+
+    registerOnTouched(fn: any) {
+        this.onTouch = fn;
+    }
+
+    setDisabledState?(isDisabled: boolean) {
+        if (this.child) {
+            this.renderer.setProperty(this.child.nativeElement, 'disabled', isDisabled);
+        }
+    }
+
+    validate(_: UntypedFormControl) {
+        return this.form.valid ? null : false;
+    }
+
+}

package/src/lib/parent-components/form.component.ts

@@ -0,0 +1,79 @@
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+
+@Component({
+    selector: 'kms-form',
+    template: '',
+})
+export class FormParentComponent implements OnInit {
+    public form!: UntypedFormGroup;
+    public formInitialized = false;
+    private allowedCharsOnlyNumbers = new Set('0123456789'.split('').map(c => c.charCodeAt(0)));
+
+    @Output() formDataChanged: EventEmitter<UntypedFormGroup> = new EventEmitter();
+
+    @Input() disabled = false;
+
+    constructor(
+        public formBuilder: UntypedFormBuilder
+    ) {
+
+    }
+
+    // TODO make a service or make own compoennt etc.
+    /**
+     * Returns if a number was pressed
+     * @param e 
+     * @returns 
+     */
+    checkIfKeyWasNumber(e: KeyboardEvent, allowDelete = true, allowArrows = true, allowCutCopyPaste = true){
+        // returns if keycode of numbers-row or numberpad. Or if parameter set, allow delete/backspace key
+        const isNumberRow = e.keyCode >= 48 && e.keyCode <= 57;
+        const isNumberPad = e.keyCode >= 96 && e.keyCode <= 105;
+        const isArrows = e.keyCode >= 37 && e.keyCode <= 40;
+        const isDelete = e.keyCode == 8 || e.keyCode == 46;
+        const isCutCopyOrPaste = (e.ctrlKey || e.metaKey) && (e.keyCode == 86 || e.keyCode == 88 || e.keyCode == 67);
+        return (isNumberRow) || (isNumberPad) || (allowDelete && isDelete) || (allowArrows && isArrows) || (allowCutCopyPaste && isCutCopyOrPaste);
+    }
+
+    // TODO make a service or make own compoennt etc.
+    /**
+     * Prevents to input other chars than numbers in input
+     * @param event 
+     */
+    removeNumbersOnType(event: KeyboardEvent) {
+        // only allow keydown from numbers-row or numberpad of keybard and block other chars than numbers
+        if (!this.checkIfKeyWasNumber(event) && !this.allowedCharsOnlyNumbers.has(event.keyCode)) {
+            event.preventDefault();
+        }
+    }
+
+    // TODO make a service or make own compoennt etc.
+    /**
+     * Prevents input when pasting which is not number
+     * @param event
+     */
+    removeNumbersOnPaste(event: ClipboardEvent){
+        const clipboardData = event.clipboardData;
+        if(clipboardData){
+            const pastedText = clipboardData.getData('text');
+            if(pastedText){
+                const isnum = /^\d+$/.test(pastedText);
+                if(!isnum) {
+                    event.preventDefault();
+                }
+            }
+        }
+    }
+
+    ngOnInit() {
+        this.formDataChanged.emit(this.form);
+        this.form.valueChanges.subscribe(() => {
+            this.formDataChanged.emit(this.form);
+        });
+    }
+}

package/src/lib/pipes/custom-pipes.module.ts

@@ -0,0 +1,48 @@
+/**
+ * @copyright KMS GmbH
+ */
+
+ import { CommonModule, CurrencyPipe } from '@angular/common';
+ import { NgModule } from '@angular/core';
+ 
+ import { IntegerCurrency } from './integer-currency.pipe';
+ import { DecodeUriPipe } from './decode-uri.pipe';
+ import { EncodeUriPipe } from './encode-uri.pipe';
+ import { SafeHtmlPipe } from './safe-html.pipe';
+ import { SafeStylePipe } from './safe-style.pipe';
+ import { SafeUrlPipe } from './safe-url.pipe';
+ import { SafeResourceUrlPipe } from './safe-resource-url.pipe';
+ import { TypeofPipe } from './typeof.pipe';
+ import { TrimPipe } from './trim.pipe';
+ import { ToNumberPipe } from './to-number.pipe';
+ 
+ @NgModule({
+     declarations: [
+         IntegerCurrency,
+         SafeHtmlPipe,
+         SafeStylePipe,
+         SafeResourceUrlPipe,
+         SafeUrlPipe,
+         EncodeUriPipe,
+         DecodeUriPipe,
+         TypeofPipe,
+         TrimPipe,
+         ToNumberPipe,
+     ],
+     imports: [CommonModule],
+     exports: [
+         IntegerCurrency,
+         SafeHtmlPipe,
+         SafeStylePipe,
+         SafeResourceUrlPipe,
+         SafeUrlPipe,
+         EncodeUriPipe,
+         DecodeUriPipe,
+         TypeofPipe,
+         TrimPipe,
+         ToNumberPipe,
+     ],
+     providers: [CurrencyPipe],
+ })
+ export class CustomPipesModule {}
+ 

package/src/lib/pipes/decode-uri.pipe.ts

@@ -0,0 +1,15 @@
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'kmsDecodeUri',
+})
+export class DecodeUriPipe implements PipeTransform {
+
+    transform(value: any, _args?: any): any {
+        return decodeURI(value);
+    }
+}

package/src/lib/pipes/encode-uri.pipe.ts

@@ -0,0 +1,14 @@
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'kmsEncodeUri',
+})
+export class EncodeUriPipe implements PipeTransform {
+    transform(value: any, _args?: any): any {
+        return encodeURI(value);
+    }
+}

package/src/lib/pipes/integer-currency.pipe.ts

@@ -0,0 +1,22 @@
+/**
+ * @copyright KMS GmbH
+ */
+
+import { CurrencyPipe } from '@angular/common';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'kmsIntegerCurrency',
+})
+export class IntegerCurrency implements PipeTransform {
+    constructor(private cp: CurrencyPipe) {}
+    transform(value: any, currencyCode?: string, display?: boolean, digitsInfo?: string): string | null {
+        const currencyPipeValue = this.cp.transform(value, currencyCode, display, digitsInfo)
+        if (currencyPipeValue) {
+            const convertedValue = currencyPipeValue.split(',')[0] + ' ' + currencyPipeValue.slice(-1)
+            return convertedValue
+        } else {
+            throw new Error("No value provided");
+        }
+    }
+}

package/src/lib/pipes/prettyjson.pipe.ts

@@ -0,0 +1,104 @@
+import { Pipe, PipeTransform, Renderer2, SecurityContext } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({
+    name: 'kmsPrettyJson',
+    pure: true,
+})
+export class PrettyJsonPipe implements PipeTransform {
+    constructor(public sanitizer: DomSanitizer, public renderer2: Renderer2) { }
+    
+    transform(value: any, args: any[]): any {
+        let ret = '' as SafeHtml;
+        try {
+            /**
+             * check and try to parse value if it's not an object
+             * if it fails to parse which means it is an invalid JSON
+             */
+            //, args[0], args[1]
+            if(args && args[0] && args[1]){
+                //console.log(args[0], args[1]);
+            }
+            ret = '<pre>' + this.applyColors(typeof value === 'object' ? value : JSON.parse(value)) + '</pre>';
+            //return this.sanitizer.bypassSecurityTrustHtml(ret);
+        } catch (e) {
+            ret = this.applyColors({ error: 'Invalid JSON' });
+        }
+        //console.log(ret);
+        //return this.sanitizer.sanitize(SecurityContext.HTML, this.sanitizer.bypassSecurityTrustHtml('<b>test</b>')) as kmsSafeHtml;
+        return this.sanitizer.sanitize(SecurityContext.HTML, this.sanitizer.bypassSecurityTrustHtml(ret as string)) as SafeHtml;
+    }
+
+    applyColors(obj: any, showNumebrLine = false, padding = 4) {
+        // line number start from 1
+        let line = 1;
+
+        if (typeof obj != 'string') {
+            obj = JSON.stringify(obj, undefined, 3);
+        }
+
+        /**
+         * Converts special charaters like &, <, > to equivalent HTML code of it
+         */
+        obj = obj
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+        /* taken from https://stackoverflow.com/a/7220510 */
+
+        /**
+         * wraps every datatype, key for e.g
+         * numbers from json object to something like
+         * <span class="number" > 234 </span>
+         * this is why needed custom themeClass which we created in _global.css
+         * @return final bunch of span tags after all conversion
+         */
+        obj = obj.replace(
+            /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
+            (match: any) => {
+                // class to be applied inside pre tag
+                let themeClass = 'number';
+                if (/^"/.test(match)) {
+                    if (/:$/.test(match)) {
+                        themeClass = 'key';
+                    } else {
+                        themeClass = 'string';
+                    }
+                } else if (/true|false/.test(match)) {
+                    themeClass = 'boolean';
+                } else if (/null/.test(match)) {
+                    themeClass = 'null';
+                }
+                return '<span class="' + themeClass + '">' + match + '</span>';
+            },
+        );
+        obj = obj.replaceAll('[','<span class="arrayOpen">[</span>');
+        obj = obj.replaceAll(']','<span class="arrayClose">]</span>');
+        obj = obj.replaceAll(',','<span class="comma">,</span>');
+        obj = obj.replaceAll('{','<kms-branch>{</kms-branch>');
+        //obj = obj.replaceAll('{','<span class="open" (click)="console.log(\'changed\'); status=!status" [ngClass]="status ? \'show\' : \'hide\'">{</span>');
+        obj = obj.replaceAll('}','<span class="close">}</span>');
+
+
+
+        /**
+         * Regex for the start of the line, insert a number-line themeClass tag before each line
+         */
+        return showNumebrLine
+            ? obj.replace(
+                  /^/gm,
+                  () => `<span class="number-line pl-3 select-none" >${String(line++).padEnd(padding)}</span>`,
+              )
+            : obj;
+    }
+
+    toggleClass(event: any, className: string) {
+        const hasClass = event.target.classList.contains(className);
+      
+        if(hasClass) {
+          this.renderer2.removeClass(event.target, className);
+        } else {
+          this.renderer2.addClass(event.target, className);
+        }
+      }
+}

package/src/lib/pipes/safe-html.pipe.ts

@@ -0,0 +1,17 @@
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({
+    name: 'kmsSafeHtml',
+})
+export class SafeHtmlPipe implements PipeTransform {
+    constructor(private sanitizer: DomSanitizer) { }
+
+    transform(html: string): SafeHtml {
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+}