@kms-ngx-ui/presentational 0.0.1

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

@@ -0,0 +1,23 @@
+import { ControlValueAccessor } from '@angular/forms';
+import { ActionsParentComponent } from '../../parent-components/actions.component';
+export declare class RadioButtonComponent extends ActionsParentComponent implements ControlValueAccessor {
+    /**
+     * Internal description name. All radio buttons with the same name belong to the same group.
+     * User can select exactly one of the radio buttons from the same group.
+     */
+    name: string;
+    /**
+     * Internal description id. Will be send in the output event when the radio button is selected.
+     */
+    id: string;
+    formControl: any;
+    selectAction(id: string): void;
+    constructor();
+    onChange: any;
+    onTouch: any;
+    get value(): boolean;
+    set value(value: boolean);
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+}

package/lib/ui/salutation-dropdown/salutation-dropdown.component.d.ts

@@ -0,0 +1,14 @@
+import { OnInit, Renderer2 } from '@angular/core';
+import { ControlValueAccessor, FormBuilder } from '@angular/forms';
+import { NullAble } from '../../models';
+import { SalutationEnum } from '../../models/salutation.enum';
+import { FormControlParentComponent } from './../../parent-components/form-control.component';
+export declare class SalutationDropdownComponent extends FormControlParentComponent implements OnInit, ControlValueAccessor {
+    formBuilder: FormBuilder;
+    renderer: Renderer2;
+    placeholder: NullAble<String>;
+    SalutationEnum: typeof SalutationEnum;
+    Object: ObjectConstructor;
+    constructor(formBuilder: FormBuilder, renderer: Renderer2);
+    ngOnInit(): void;
+}

package/lib/ui/salutation-radiogroup/salutation-radiogroup.component.d.ts

@@ -0,0 +1,12 @@
+import { OnInit, Renderer2 } from '@angular/core';
+import { ControlValueAccessor, FormBuilder } from '@angular/forms';
+import { SalutationEnum } from '../../models/salutation.enum';
+import { FormControlParentComponent } from '../../parent-components/form-control.component';
+export declare class SalutationRadiogroupComponent extends FormControlParentComponent implements OnInit, ControlValueAccessor {
+    formBuilder: FormBuilder;
+    renderer: Renderer2;
+    SalutationEnum: typeof SalutationEnum;
+    Object: ObjectConstructor;
+    constructor(formBuilder: FormBuilder, renderer: Renderer2);
+    ngOnInit(): void;
+}

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

@@ -0,0 +1,19 @@
+import { OnInit } from '@angular/core';
+import { ControlValueAccessor, FormBuilder, FormGroup } from '@angular/forms';
+export declare class TimeInputComponent implements OnInit, ControlValueAccessor {
+    formBuilder: FormBuilder;
+    form: FormGroup;
+    h: string;
+    m: string;
+    constructor(formBuilder: FormBuilder);
+    get value(): string;
+    set value(value: string);
+    writeValue(value: string): void;
+    ngOnInit(): void;
+    getNewOrDefault(): string;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    onChange: any;
+    onTouch: any;
+    onTouched: any;
+}

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

@@ -0,0 +1,3 @@
+export declare class TooltipComponent {
+    tooltipTitle: string;
+}

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

@@ -0,0 +1,10 @@
+import { IconSize } from '../../models';
+export declare class TooltipIconComponent {
+    tooltipTitle: string;
+    tooltipText: string;
+    tooltipLinkText: string;
+    tooltipLinkUrl: string;
+    placement: string;
+    delay: number;
+    IconSize: typeof IconSize;
+}

package/lib/ui/yes-no-radiogroup/yes-no-radiogroup.component.d.ts

@@ -0,0 +1,24 @@
+import { ElementRef, OnInit, Renderer2 } from '@angular/core';
+import { ControlValueAccessor, FormBuilder, FormGroup } from '@angular/forms';
+import { NullAble } from '../../models';
+export declare class YesNoRadiogroupComponent implements OnInit, ControlValueAccessor {
+    formBuilder: FormBuilder;
+    renderer: Renderer2;
+    header: NullAble<String>;
+    disabled: boolean;
+    textYes: string;
+    textNo: string;
+    form: FormGroup;
+    child?: ElementRef<HTMLInputElement>;
+    internalValue: NullAble<boolean>;
+    onChange: any;
+    onTouch: any;
+    get value(): NullAble<boolean>;
+    set value(value: NullAble<boolean>);
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState?(isDisabled: boolean): void;
+    constructor(formBuilder: FormBuilder, renderer: Renderer2);
+    ngOnInit(): void;
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@kms-ngx-ui/presentational",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^11.2.14",
+    "@angular/core": "^11.2.14",
+    "@angular/cdk": "~11.2.11",
+    "@angular/forms": "^11.2.14",
+    "@angular/material": "^12.2.13",
+    "@angular/google-maps": "^14.2.6"
+  },
+  "dependencies": {
+    "@angular/google-maps": "^14.2.6",
+    "ngx-translate": "0.0.1-security",
+    "tslib": "^2.0.0"
+  },
+  "main": "bundles/kms-ngx-ui-presentational.umd.js",
+  "module": "fesm2015/kms-ngx-ui-presentational.js",
+  "es2015": "fesm2015/kms-ngx-ui-presentational.js",
+  "esm2015": "esm2015/kms-ngx-ui-presentational.js",
+  "fesm2015": "fesm2015/kms-ngx-ui-presentational.js",
+  "typings": "kms-ngx-ui-presentational.d.ts",
+  "metadata": "kms-ngx-ui-presentational.metadata.json",
+  "sideEffects": false
+}

package/public-api.d.ts

@@ -0,0 +1,6 @@
+export * from './lib/kms-ngx-ui-presentational.service';
+export * from './lib/kms-ngx-ui-presentational.component';
+export * from './lib/kms-ngx-ui-presentational.module';
+export * from './lib/models/iconSize.enum';
+export * from './lib/models/salutation.enum';
+export * from './lib/ui/generic-dialog/generic-dialog.component';

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

@@ -0,0 +1,47 @@
+@mixin back-to-top-theme($theme) {
+    $size: 48px;
+
+    .scrollToTop {
+        position: fixed;
+        bottom: $size;
+        right: $size;
+
+        transition: all .2s ease-in-out;
+        text-align: center;
+        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);
+
+            width: calc(#{$size} - 4px);
+            height: calc(#{$size} - 4px);
+        }
+        &.show {
+            display: flex;
+            opacity: 0.75;
+            transition: all .2s ease-in-out;
+        }
+       
+    }
+    @media (max-width: $responsive-breakpoint) {
+        .scrollToTop {
+            bottom: calc(#{$size} / 2);
+            right: calc(#{$size} / 2);
+
+            width: calc(#{$size} / 2);
+            height: calc(#{$size} / 2);
+            &-inner{
+                width: calc(#{$size} / 2 - 2px);
+                height: calc(#{$size} / 2 - 2px);
+            }
+        }
+    } 
+}

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

@@ -0,0 +1,57 @@
+.test{
+    color: mediumblue;
+}
+@mixin checkbox-theme(){
+    .test{
+        color: mediumblue;
+    }
+    .wrapper {
+        cursor: pointer;
+        padding-left: 0px;
+        display: inline-block;
+        position: relative;
+        user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        color: aqua;
+        &:before {
+        }
+
+        &:hover:before {
+            
+        }
+
+        input {
+            display: none;
+        }
+
+        input:checked ~ .checkmark {
+            display: block;
+        }
+
+        &.disabled {
+            cursor: default;
+            pointer-events: none;
+
+            &:before {
+            }
+        }
+    }
+
+    .checkmark {
+
+        &.disabled {
+        }
+    }
+
+    .info {
+        display: block;
+        margin-top: 6px;
+        cursor: default;
+
+        &.disabled {
+            color: lightgray;
+        }
+    }
+}

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

@@ -0,0 +1,38 @@
+
+    .colorInput{
+        position: relative;
+        input[type='color']{
+            display: block;
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            left: 0;
+            bottom: 10px;
+            padding: 0;
+            margin: 0;
+            border: 1px solid transparent;
+        }
+        input.my-inValid[type='color']{
+            border: 1px dotted red;
+        }
+        input[type='text']{
+            padding-left: 30px;
+        }
+        input.my-inValid[type='text']{
+            color: red;
+        }
+        kms-tooltip-icon{
+            position: absolute;
+            right: 0;
+            top: -10px;
+        }
+
+        .mat-form-field-label{
+            padding-left: 30px;
+        }
+        .mat-form-field-can-float.mat-focused{
+            .mat-form-label{
+                padding-left: 0;
+            }
+        }
+    }

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

@@ -0,0 +1,34 @@
+
+    .flyout{
+        position: relative;
+        display: block;
+        padding: 20px 45px;
+        
+        &-header{            
+            &-more{
+                font: normal normal normal 16px/25px var(--fontName-text03);
+                letter-spacing: 0.26px;
+                color: var(--primaryColor);
+                cursor: pointer;
+                kms-icon{
+                    .icon{
+                        width: 16px !important;
+                        height: 20px !important;
+                        svg {
+                            width: 16px !important;
+                            height: 20px !important;
+                            use{
+                                fill: var(--primaryColor); 
+                            }       
+                        }
+                    }
+                }
+            }
+        }
+        &-body {
+            padding: 0;
+            margin: 0;
+            overflow: hidden;
+            outline: none;
+        }
+    }

package/src/lib/ui/generic-dialog/generic-dialog.component.scss

@@ -0,0 +1,59 @@
+@mixin generic-dialog-component-theme($theme) {
+    .mat-dialog-container {
+        padding: 44px 40px;
+        width: 560px !important;
+
+        .mat-dialog-title {
+            height: 24px !important;
+            padding-bottom: 20px;
+            padding-left: 24px;
+            padding-top: 20px;
+
+            h3 {
+                margin: 0;
+            }
+        }
+
+        .mat-dialog-content {
+            margin: 0;
+        }
+
+        .custom-dialog-actions {
+            align-items: center;
+            display: flex;
+            height: 64px;
+            justify-content: flex-end;
+            padding-right: 24px;
+
+            button:first-of-type {
+                margin-right: 8px;
+            }
+        }
+
+        .dialog-col {
+            padding-top: 0;
+        }
+    }
+    .big{
+        .mat-dialog-container {
+            width: 1084px !important;
+            height: 90vh;
+            padding: 44px 40px;
+            @media (max-width: $responsive-breakpoint) {
+                padding: 10px 10px;
+            }
+        }
+    }
+    .middle{
+        .mat-dialog-container {
+            width: 600px !important;
+            height: 95vh;
+        }
+    }
+    .small{
+        .mat-dialog-container {
+            width: 450px !important;
+            height: auto !important;
+        }
+    }
+}

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

@@ -0,0 +1,149 @@
+
+@import '../../../styles/mixins.scss';
+@mixin icon-theme($theme){
+    .icon {
+        display: inline-block;
+        height: inherit;
+        outline-color: transparent;
+        transition: transform 0.2s ease-in-out;
+        position: relative;
+        @include iconSize(100%);
+
+        &.size{
+            &-full {
+                @include iconSize(100%);
+            }
+            &-16{
+                @include iconSize(16px);
+            }
+            &-20{
+                @include iconSize(20px);
+            }
+            &-32{
+                @include iconSize(32px);
+            }
+            &-64{
+                @include iconSize(64px);
+            }
+            &-128{
+                @include iconSize(64px);
+            }
+            &-256{
+                @include iconSize(256px);
+            }
+        }
+
+        svg, use{
+            fill: black; 
+            position: relative;
+            transform: translate(0, 0) !important;
+        }
+        
+        &_hoverable {
+            cursor: pointer;
+            &:hover,
+            &:focus {
+                svg use{
+                    fill: var(--primaryColor);
+                }
+            }
+        }
+
+        &_active {
+            cursor: pointer;
+            fill: var(--primaryColor) !important;
+
+            &:hover, &:focus {
+                fill: var(--primaryColor02) !important;
+            }
+        }
+
+        &.color{
+            &-primary svg use{
+                fill: var(--primaryColor);
+            }
+            &-secondary svg use{
+                fill: var(--primaryColor);
+            }
+            &-disabled svg use{
+                fill: var(--gray04);
+            }
+            &-white svg use{
+                fill: var(--white);
+            }
+            &-blackish svg use{
+                fill: var(--gray09);
+            }
+            &-warn svg use{
+                fill: #BF2F2F;
+            }
+            &-success svg use{
+                fill: #39B948;
+            }
+            &-info svg use{
+                fill: #E5C936;
+            }
+            &-grey1 svg use{
+                fill: #646260;
+            }
+            &-grey2 svg use{
+                fill: #918F8E;
+            }
+            &-grey3 svg use{
+                fill: var(--gray04);
+            }
+            &-grey4 svg use{
+                fill: #E4E4E4;
+            }
+            &-grey5 svg use{
+                fill: #F2F2F2;
+            }
+            &-grey6 svg use{
+                fill: var(--gray07);
+            }
+            &-inactive{
+                fill: #bdbcbb;
+            }
+        }
+
+        // IE 11 with win7 fix that caused an application freeze.
+        svg use {
+            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/lib/ui/kms-accordion-item/kms-accordion-item.component.scss

@@ -0,0 +1,95 @@
+@mixin kms-accordion-item-theme($theme) {
+    .accordion-item {        
+        &.showFlat{
+            background-color: transparent;
+            box-shadow: none !important;
+            border-radius: unset !important;
+            border-top: solid rgba(189, 188, 187, 0.5);
+        }
+        &.isSmall{
+            .accordion-item-header{
+                height: 42px;
+                padding-top: 0;
+                padding-bottom: 0;
+    
+                .accordion-item-title{
+                    font-size: 16px !important;
+                    font-weight: 300;
+                }  
+            
+                .accordion-item-header-icon-wrapper{
+                    kms-icon{
+                        
+                        svg{
+                            height: 16px;
+                            width: 16px;
+                        }    
+                    }
+                }
+            }
+        }
+
+        .accordion-item-header{
+            height: auto;
+            padding-top: $base-spacing-hoz;
+            padding-bottom: $base-spacing-hoz;
+
+            .accordion-item-title{
+                text-align: left;
+                font: 600 22px/38px var(--fontName-text);
+                letter-spacing: 0.53px;
+                color: var(--gray09);
+                margin: 0px;
+                
+                @media (max-width: $responsive-breakpoint) {
+                    font: 15 18px/23px var(--fontName-text);
+                    letter-spacing: 0.29px;
+                    color: var(--gray10);
+                    //height: 3em;
+                }
+
+                span{
+                    display: inline;
+
+                    @media (max-width: $responsive-breakpoint) {
+                        display: block;
+                    }
+                }
+            }  
+        
+            .accordion-item-header-icon-wrapper{
+                align-self: center;
+                
+                kms-icon{ 
+                    svg {    
+                        height: 22px;
+                        width: 22px;
+                        use{
+                            fill: var(--primaryColor);
+                        }
+                    }
+                }
+                
+                &-desktop{
+                    display: block;
+                    @media (max-width: $responsive-breakpoint) {
+                        display: none;
+                    }
+                }
+    
+                &-mobile{
+                    display: none;
+                    @media (max-width: $responsive-breakpoint) {
+                        display: block;
+                    }
+                }
+            }
+        }
+    }
+
+    mat-expansion-panel-header{
+        @media (max-width: $responsive-breakpoint) {
+            height: auto !important;
+        }
+    }
+}

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

@@ -0,0 +1,30 @@
+    .wrapper {
+        position: relative;
+        display: inline-block;
+        padding-left: 35px;
+        cursor: pointer;
+
+        &:before {
+            
+        }
+
+        &:hover:before {
+        }
+
+        // Hide the browser's default radio button
+        input {
+            position: absolute;
+            opacity: 0;
+            cursor: pointer;
+            height: 0;
+            width: 0;
+        }
+
+        input:checked {
+
+        }
+
+        &.disabled {
+            cursor: default;
+        }
+    }

package/src/lib/ui/time-input/time-input.component.scss

@@ -0,0 +1,10 @@
+
+    .timeInput {        
+        display: inline;
+        input{
+            width: 2em;
+            margin-right: 4px;
+            margin-left: 4px;
+            font-size: 16px;
+        }
+    }