@kms-ngx-ui/presentational 14.1.1 → 14.1.2

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, never, false>;
+}

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

@@ -1,20 +1,33 @@
 import { OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
+export declare class SimpleBreakpoint {
+    constructor(data?: Partial<SimpleBreakpoint>);
+    Number: number;
+    Name: string;
+    MaximumPixels: number;
+}
+export declare class Breakpoint {
+    constructor(data?: Partial<SimpleBreakpoint>);
+    Number: number;
+    Name: string;
+    Low: number;
+    High: number;
+}
 /**
  * Service to get viewport
  */
 export declare class ViewportService implements OnDestroy {
     private platformId;
-    readonly viewports: {
-        name: string;
-        low: number;
-        high: number;
-    }[];
+    document: Document;
+    readonly simpleBreakpoints: SimpleBreakpoint[];
+    readonly breakpoints: Breakpoint[];
     private viewportChangedSubscriber;
     private viewportResizedSubscriber;
     private currentViewport;
-    constructor(platformId: Object);
+    private currentViewportObject;
+    private isBrowser;
+    constructor(platformId: Object, document: Document);
     /**
      * Get window height
      */
@@ -36,6 +49,16 @@ export declare class ViewportService implements OnDestroy {
      * @returns string
      */
     getCurrentViewPort(): string;
+    /**
+     * Returns the current viewport MQ as object with all informations
+     * @returns string
+     */
+    getCurrentViewPortObject(): Breakpoint;
+    /**
+     * Returns the current viewport as number
+     * @returns string
+     */
+    getCurrentViewPortNumber(): number;
     /**
      * Provides mq´s as string
      */
@@ -44,6 +67,9 @@ export declare class ViewportService implements OnDestroy {
      * Provides the current window width as number
      */
     getViewportResizedObserver(): Observable<number>;
+    /**
+     * Scroll to element
+     */
     scrollToElementId(el: string, alignCenter?: boolean): void;
     /**
      * Helper function that scrolls to the given markup element.
@@ -56,7 +82,27 @@ export declare class ViewportService implements OnDestroy {
      * @param top - top position value
      */
     scrollTop(top: number): void;
-    ngOnDestroy(): void;
+    /**
+     * If orientation is portrait
+     */
+    isPortrait(): boolean;
+    /**
+     * If orientation is landscape
+     */
+    isLandscape(): boolean;
+    /**
+     * If mobile breakpoint (below tablet)
+     */
+    isMobile(): boolean;
+    /**
+     * Get height of an element
+     * @deprecated
+     */
+    calculateFullscreenElementsheight(id: string, defaultheight: string, extra: number): string;
+    /**
+     * Get height of an element
+     */
+    calculateFullscreenElementsHeight(id: string, defaultheight: string, extra: number): string;
     /**
      * If viewport changed
      * @event
@@ -67,8 +113,11 @@ export declare class ViewportService implements OnDestroy {
      * @param width Width to get the according MQ for
      */
     private convertWidthToMediaQuery;
-    isPortrait(): boolean;
-    isLandscape(): boolean;
+    /**
+     * Get the breakpoint/device name like mobile,tablet,desktop, high
+     */
+    getSimpleBreakpoint(screenSize: number): SimpleBreakpoint;
+    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

@@ -50,6 +50,7 @@ export declare class DropdownFromDataComponent extends FormControlParentComponen
 interface ITranslation {
     path: string;
     isPrefix?: boolean;
+    useKeyAsValue?: boolean;
     service: any;
 }
 export {};

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, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } 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: UntypedFormBuilder;
@@ -20,7 +20,7 @@ export declare class FileInputComponent implements ControlValueAccessor, OnInit
     form: UntypedFormGroup;
     subscriptions: Subscription[];
     newImageLoading: boolean;
-    IconSize: typeof IconSize;
+    IconSizePx: typeof IconSizePx;
     formDataChanged: EventEmitter<UntypedFormGroup>;
     /**
      * 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, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "kms-icon", never, { "icon": "icon"; "iconClass": "iconClass"; "iconStyle": "iconStyle"; "iconSize": "iconSize"; "size": "size"; "dontUseSprite": "dontUseSprite"; }, {}, never, never, false>;
 }

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/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, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "kms-radiobutton", never, { "name": "name"; "id": "id"; "radioButtonSize": "radioButtonSize"; "formControl": "formControl"; }, {}, never, ["*"], false>;
 }

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, false>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kms-ngx-ui/presentational",
-  "version": "14.1.1",
+  "version": "14.1.2",
   "peerDependencies": {
     "@angular/cdk": "14.2.7",
     "@angular/common": "14.3.0",

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/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';