@kms-ngx-ui/presentational 0.0.22 → 0.0.24

package/lib/directives/directives.module.d.ts

@@ -3,9 +3,11 @@ import * as i1 from "./swipe.directive";
 import * as i2 from "./mousewheel.directive";
 import * as i3 from "./sum-of-height.directive";
 import * as i4 from "./tooltip.directive";
-import * as i5 from "@angular/common";
+import * as i5 from "./size.directive";
+import * as i6 from "@angular/common";
 export declare class DirectivesModule {
+    SizeDirective: any;
     static ɵfac: i0.ɵɵFactoryDeclaration<DirectivesModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DirectivesModule, [typeof i1.SwipeDirective, typeof i2.MouseWheelDirective, typeof i3.GetMaxHeightDirective, typeof i4.TooltipDirective], [typeof i5.CommonModule], [typeof i1.SwipeDirective, typeof i2.MouseWheelDirective, typeof i3.GetMaxHeightDirective, typeof i4.TooltipDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DirectivesModule, [typeof i1.SwipeDirective, typeof i2.MouseWheelDirective, typeof i3.GetMaxHeightDirective, typeof i4.TooltipDirective, typeof i5.SizeDirective], [typeof i6.CommonModule], [typeof i1.SwipeDirective, typeof i2.MouseWheelDirective, typeof i3.GetMaxHeightDirective, typeof i4.TooltipDirective, typeof i5.SizeDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DirectivesModule>;
 }

package/lib/directives/size.directive.d.ts

@@ -0,0 +1,10 @@
+import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SizeDirective {
+    private elementRef;
+    size: string;
+    constructor(elementRef: ElementRef);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SizeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SizeDirective, "[size]", never, { "size": "size"; }, {}, never>;
+}

package/lib/parent-components/colorable.component.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class ColorableParentComponent {
+    /**
+     * Defines the color property
+     */
+    color?: string;
+    setupColors(elementRef: HTMLElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorableParentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorableParentComponent, "ng-component", never, { "color": "color"; }, {}, never, never>;
+}

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

@@ -1,23 +1,27 @@
 /*!
  * @copyright FLYACTS GmbH 2019
  */
-import { EventEmitter, OnInit } from '@angular/core';
+import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
+import { SubSink } from 'subsink';
+import { ColorableParentComponent } from './colorable.component';
 import * as i0 from "@angular/core";
-export declare class FormParentComponent implements OnInit {
+export declare class FormParentComponent extends ColorableParentComponent implements OnInit, OnDestroy {
     formBuilder: FormBuilder;
+    disabled: boolean;
+    showRequired: boolean;
     form: FormGroup;
     formInitialized: boolean;
     private allowedCharsOnlyNumbers;
+    subs: SubSink;
     formDataChanged: EventEmitter<FormGroup>;
-    disabled: boolean;
     constructor(formBuilder: FormBuilder);
     /**
      * Returns if a number was pressed
      * @param e
      * @returns
      */
-    checkIfKeyWasNumber(e: KeyboardEvent, allowDelete?: boolean, allowArrows?: boolean, allowCutCopyPaste?: boolean): boolean;
+    checkIfKeyWasNumber(e: KeyboardEvent, allowDelete?: boolean, allowArrows?: boolean, allowCutCopyPaste?: boolean): boolean | 9;
     /**
      * Prevents to input other chars than numbers in input
      * @param event
@@ -29,6 +33,8 @@ export declare class FormParentComponent implements OnInit {
      */
     removeNumbersOnPaste(event: ClipboardEvent): void;
     ngOnInit(): void;
+    ngOnDestroy(): void;
+    initFormEvent(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormParentComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormParentComponent, "kms-form", never, { "disabled": "disabled"; }, { "formDataChanged": "formDataChanged"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormParentComponent, "kms-form", never, { "disabled": "disabled"; "showRequired": "showRequired"; }, { "formDataChanged": "formDataChanged"; }, never, never>;
 }

package/lib/services/viewport.service.d.ts

@@ -6,6 +6,7 @@ import * as i0 from "@angular/core";
  */
 export declare class ViewportService implements OnDestroy {
     private platformId;
+    document: Document;
     readonly viewports: {
         name: string;
         low: number;
@@ -14,7 +15,8 @@ export declare class ViewportService implements OnDestroy {
     private viewportChangedSubscriber;
     private viewportResizedSubscriber;
     private currentViewport;
-    constructor(platformId: Object);
+    private isBrowser;
+    constructor(platformId: Object, document: Document);
     /**
      * Get window height
      */
@@ -36,6 +38,11 @@ export declare class ViewportService implements OnDestroy {
      * @returns string
      */
     getCurrentViewPort(): string;
+    /**
+     * Returns the current viewport MQ as string
+     * @returns string
+     */
+    getCurrentViewPortNumber(): number;
     /**
      * Provides mq´s as string
      */
@@ -56,7 +63,10 @@ export declare class ViewportService implements OnDestroy {
      * @param top - top position value
      */
     scrollTop(top: number): void;
-    ngOnDestroy(): void;
+    isPortrait(): boolean;
+    isLandscape(): boolean;
+    isMobile(): boolean;
+    calculateFullscreenElementsheight(id: string, defaultheight: string, extra: number): string;
     /**
      * If viewport changed
      * @event
@@ -67,8 +77,7 @@ export declare class ViewportService implements OnDestroy {
      * @param width Width to get the according MQ for
      */
     private convertWidthToMediaQuery;
-    isPortrait(): boolean;
-    isLandscape(): boolean;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ViewportService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ViewportService>;
 }

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

@@ -19,6 +19,7 @@ export declare class DropdownFromDataComponent extends FormControlParentComponen
     label: string;
     required: boolean;
     useEnumIndexAsValue: boolean;
+    multiple: boolean;
     keys: any[];
     values: any[];
     Object: ObjectConstructor;
@@ -41,7 +42,7 @@ export declare class DropdownFromDataComponent extends FormControlParentComponen
     setDisplayKey(key: any): any;
     valueChanged(value: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropdownFromDataComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownFromDataComponent, "kms-dropdown-from-data", never, { "optionsEnum": "optionsEnum"; "optionsPlainArray": "optionsPlainArray"; "optionsObjArray": "optionsObjArray"; "mapKey": "mapKey"; "mapValue": "mapValue"; "hasNullOption": "hasNullOption"; "translation": "translation"; "placeholder": "placeholder"; "label": "label"; "required": "required"; "useEnumIndexAsValue": "useEnumIndexAsValue"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownFromDataComponent, "kms-dropdown-from-data", never, { "optionsEnum": "optionsEnum"; "optionsPlainArray": "optionsPlainArray"; "optionsObjArray": "optionsObjArray"; "mapKey": "mapKey"; "mapValue": "mapValue"; "hasNullOption": "hasNullOption"; "translation": "translation"; "placeholder": "placeholder"; "label": "label"; "required": "required"; "useEnumIndexAsValue": "useEnumIndexAsValue"; "multiple": "multiple"; }, {}, never, never>;
 }
 /**
  * Interface that defines the translation object in template

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

@@ -1,8 +1,8 @@
 import { OnInit, Renderer2, EventEmitter, ApplicationRef, ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { Subscription } from 'rxjs';
-import { IconSize } from '../../models/iconSize.enum';
 import { AttachedFileDTO } from '../../models/types/attached-file-dto.model';
+import { IconSizePx } from '../icon/iconSize.enum';
 import * as i0 from "@angular/core";
 export declare class FileInputComponent implements ControlValueAccessor, OnInit {
     formBuilder: FormBuilder;
@@ -20,7 +20,7 @@ export declare class FileInputComponent implements ControlValueAccessor, OnInit
     form: FormGroup;
     subscriptions: Subscription[];
     newImageLoading: boolean;
-    IconSize: typeof IconSize;
+    IconSizePx: typeof IconSizePx;
     formDataChanged: EventEmitter<FormGroup>;
     /**
      * Constructor

package/lib/ui/icon/icon.component.d.ts

@@ -22,8 +22,14 @@ export declare class IconComponent implements OnInit {
     iconStyle: any;
     /**
      * Optional: Different size via CSS inline style.
+     * @deprecated. Please use size instead
      */
     iconSize: IconSize;
+    /**
+     * Optional: Different size via CSS inline style.
+     * @deprecated. Please use size instead
+     */
+    size?: string;
     /**
      * Dont use icon sprite
      */
@@ -38,5 +44,5 @@ export declare class IconComponent implements OnInit {
     constructor(sanitizer: DomSanitizer);
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "kms-icon", never, { "icon": "icon"; "iconClass": "iconClass"; "iconStyle": "iconStyle"; "iconSize": "iconSize"; "dontUseSprite": "dontUseSprite"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "kms-icon", never, { "icon": "icon"; "iconClass": "iconClass"; "iconStyle": "iconStyle"; "iconSize": "iconSize"; "size": "size"; "dontUseSprite": "dontUseSprite"; }, {}, never, never>;
 }

package/lib/ui/icon/iconSize.enum.d.ts

@@ -13,3 +13,13 @@ export declare enum IconSize {
     XXXL = "size-1024",
     NONE = "NONE"
 }
+export declare enum IconSizePx {
+    TINY = 16,
+    SMALLER = 20,
+    SMALL = 32,
+    MEDIUM = 64,
+    LARGE = 128,
+    XL = 256,
+    XXL = 512,
+    XXXL = 1024
+}

package/lib/ui/map/map.component.d.ts

@@ -56,10 +56,6 @@ export declare class MapComponent implements OnInit {
      * Adds a marker to the map
      */
     addMarker(): void;
-    /**
-     * sets the width of map accodring to viewport
-     */
-    setMapWidth(val: number): void;
     /**
      * Zooms in into map
      */

package/lib/ui/radiobutton/radiobutton.component.d.ts

@@ -11,6 +11,7 @@ export declare class RadioButtonComponent extends ActionsParentComponent impleme
      * Internal description id. Will be send in the output event when the radio button is selected.
      */
     id: string;
+    radioButtonSize: number;
     formControl: any;
     selectAction(id: string): void;
     constructor();
@@ -22,5 +23,5 @@ export declare class RadioButtonComponent extends ActionsParentComponent impleme
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "kms-radiobutton", never, { "name": "name"; "id": "id"; "formControl": "formControl"; }, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "kms-radiobutton", never, { "name": "name"; "id": "id"; "radioButtonSize": "radioButtonSize"; "formControl": "formControl"; }, {}, never, ["*"]>;
 }

package/lib/ui/tooltip-icon/tooltip-icon.component.d.ts

@@ -1,4 +1,4 @@
-import { IconSize } from '../../models';
+import { IconSizePx } from '../icon/iconSize.enum';
 import * as i0 from "@angular/core";
 export declare class TooltipIconComponent {
     tooltipTitle: string;
@@ -7,7 +7,7 @@ export declare class TooltipIconComponent {
     tooltipLinkUrl: string;
     placement: string;
     delay: number;
-    IconSize: typeof IconSize;
+    IconSizePx: typeof IconSizePx;
     static ɵfac: i0.ɵɵFactoryDeclaration<TooltipIconComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TooltipIconComponent, "kms-tooltip-icon", never, { "tooltipTitle": "tooltipTitle"; "tooltipText": "tooltipText"; "tooltipLinkText": "tooltipLinkText"; "tooltipLinkUrl": "tooltipLinkUrl"; "placement": "placement"; "delay": "delay"; }, {}, never, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kms-ngx-ui/presentational",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "peerDependencies": {
     "@angular/cdk": "12.2.13",
     "@angular/common": "12.2.16",

package/public-api.d.ts

@@ -3,6 +3,7 @@ export * from './lib/kms-ngx-ui-presentational.component';
 export * from './lib/kms-ngx-ui-presentational.module';
 export * from './lib/pipes/custom-pipes.module';
 export * from './lib/directives/directives.module';
+export * from './lib/directives/size.directive';
 export * from './lib/models/iconSize.enum';
 export * from './lib/models/salutation.enum';
 export * from './lib/ui/checkbox/checkbox.component';

package/src/lib/ui/back-to-top/back-to-top.component.scss

@@ -11,15 +11,14 @@
         cursor: pointer;
         align-items: center;
         z-index: 999999;
-        background-color: white;
         border-radius: 50%;
 
         width: $size;
         height: $size;
         &-inner{
-            margin: 2px;
             border-radius: 50%;
             background-color: var(--primaryColor);
+            border: 2px solid white;
 
             width: calc(#{$size} - 4px);
             height: calc(#{$size} - 4px);
@@ -31,7 +30,7 @@
         }
        
     }
-    @media (max-width: $responsive-breakpoint) {
+    @media (max-width: $responsive-breakpoint-l) {
         .scrollToTop {
             bottom: calc(#{$size} / 2);
             right: calc(#{$size} / 2);

package/src/lib/ui/icon/icon.component.scss

@@ -62,8 +62,8 @@
             &-primary svg use{
                 fill: var(--primaryColor);
             }
-            &-secondary svg use{
-                fill: var(--primaryColor);
+            &-accent svg use{
+                fill: var(--accentColor);
             }
             &-disabled svg use{
                 fill: var(--gray04);
@@ -111,39 +111,5 @@
             pointer-events: none;
         }
 
-        &.is-rotating45 {
-            animation-name: spinanimation;
-            animation-duration: 3000ms;
-            transform: rotate(45deg);
-        }
-    
-        &.is-rotating90 {
-            animation-name: spinanimation;
-            animation-duration: 3000ms;
-            transform: rotate(90deg);
-        }
-    
-        &.is-rotating180 {
-            animation-name: spinanimation180;
-            animation-duration: 3000ms;
-        }
-    
-        &.is-rotating45Anti {
-            animation-name: spinanimation;
-            animation-duration: 3000ms;
-            transform: rotate(-45deg);
-        }
-    
-        &.is-rotating90Anti {
-            animation-name: spinanimation;
-            animation-duration: 3000ms;
-            transform: rotate(-90deg);
-        }
-    
-        &.is-rotating180Anti {
-            animation-name: spinanimation;
-            animation-duration: 3000ms;
-            transform: rotate(-180deg);
-        }
     }
 }

package/src/styles/animations.scss

@@ -0,0 +1,47 @@
+// Animations for element
+@keyframes spinanimation {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.is-rotating{
+    &45 {
+        animation-name: spinanimation;
+        animation-duration: 3000ms;
+        transform: rotate(45deg);
+    }
+
+    &90 {
+        animation-name: spinanimation;
+        animation-duration: 3000ms;
+        transform: rotate(90deg);
+    }
+
+    &180 {
+        animation-name: spinanimation180;
+        animation-duration: 3000ms;
+    }
+
+    &45Anti {
+        animation-name: spinanimation;
+        animation-duration: 3000ms;
+        transform: rotate(-45deg);
+    }
+
+    &90Anti {
+        animation-name: spinanimation;
+        animation-duration: 3000ms;
+        transform: rotate(-90deg);
+    }
+
+    &180Anti {
+        animation-name: spinanimation;
+        animation-duration: 3000ms;
+        transform: rotate(-180deg);
+    }
+}

package/src/styles/mixins.scss

@@ -1,9 +1,9 @@
-@mixin iconSize($width: 32px) {
-    width: $width;
-    height: $width;
-    use, svg, g, span{
-        width: $width;
-        height: $width;
-        font-size: $width;
-    }
+@mixin iconSize($width: 32px) {
+    width: $width;
+    height: $width;
+    use, svg, g, span{
+        width: $width;
+        height: $width;
+        font-size: $width;
+    }
 }

package/src/styles/styles.scss

@@ -1,4 +1,5 @@
 @import 'mixins.scss';
+@import 'animations.scss';
 
 @import '../lib/ui/back-to-top/back-to-top.component';
 @import '../lib/ui/button-with-confirm-dialog/button-with-confirm-dialog.component';