@kms-ngx-ui/presentational 0.0.5 → 0.0.7

package/bundles/kms-ngx-ui-presentational.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/checkbox'), require('@angular/material/radio'), require('@angular/animations'), require('@angular/platform-browser'), require('rxjs'), require('@angular/material/dialog'), require('subsink'), require('@angular/google-maps'), require('@angular/material/button'), require('@angular/material/expansion'), require('@angular/material/select'), require('@ngx-translate/core')) :
-    typeof define === 'function' && define.amd ? define('@kms-ngx-ui/presentational', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/checkbox', '@angular/material/radio', '@angular/animations', '@angular/platform-browser', 'rxjs', '@angular/material/dialog', 'subsink', '@angular/google-maps', '@angular/material/button', '@angular/material/expansion', '@angular/material/select', '@ngx-translate/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["kms-ngx-ui"] = global["kms-ngx-ui"] || {}, global["kms-ngx-ui"].presentational = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.checkbox, global.ng.material.radio, global.ng.animations, global.ng.platformBrowser, global.rxjs, global.ng.material.dialog, global.subsink, global.ng.googleMaps, global.ng.material.button, global.ng.material.expansion, global.ng.material.select, global.core));
-})(this, (function (exports, i0, common, forms, checkbox, radio, animations, platformBrowser, rxjs, dialog, subsink, googleMaps, button, expansion, select, core) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/checkbox'), require('@angular/material/radio'), require('@angular/animations'), require('@angular/platform-browser'), require('rxjs'), require('@angular/material/dialog'), require('subsink'), require('@angular/google-maps'), require('@angular/material/button'), require('@angular/material/expansion'), require('@angular/material/select'), require('enum-values/src/enumValues'), require('@angular/cdk/drag-drop')) :
+    typeof define === 'function' && define.amd ? define('@kms-ngx-ui/presentational', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/checkbox', '@angular/material/radio', '@angular/animations', '@angular/platform-browser', 'rxjs', '@angular/material/dialog', 'subsink', '@angular/google-maps', '@angular/material/button', '@angular/material/expansion', '@angular/material/select', 'enum-values/src/enumValues', '@angular/cdk/drag-drop'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["kms-ngx-ui"] = global["kms-ngx-ui"] || {}, global["kms-ngx-ui"].presentational = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.checkbox, global.ng.material.radio, global.ng.animations, global.ng.platformBrowser, global.rxjs, global.ng.material.dialog, global.subsink, global.ng.googleMaps, global.ng.material.button, global.ng.material.expansion, global.ng.material.select, global.enumValues, global.ng.cdk.dragDrop));
+})(this, (function (exports, i0, common, forms, checkbox, radio, animations, platformBrowser, rxjs, dialog, subsink, googleMaps, button, expansion, select, enumValues, dragDrop) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -198,7 +198,7 @@
         function step(op) {
             if (f)
                 throw new TypeError("Generator is already executing.");
-            while (_)
+            while (g && (g = 0, op[0] && (_ = 0)), _)
                 try {
                     if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
                         return t;
@@ -481,7 +481,7 @@
                             multi: true,
                         },
                     ],
-                    styles: [".test{color:#0000cd}\n"]
+                    styles: [""]
                 },] }
     ];
     CheckboxComponent.ctorParameters = function () { return []; };
@@ -699,7 +699,7 @@
                             multi: true,
                         },
                     ],
-                    styles: [".colorInput{position:relative}.colorInput input[type=color]{display:block;position:absolute;width:20px;height:20px;left:0;bottom:10px;padding:0;margin:0;border:1px solid transparent}.colorInput input.my-inValid[type=color]{border:1px dotted red}.colorInput input[type=text]{padding-left:30px}.colorInput input.my-inValid[type=text]{color:red}.colorInput kms-tooltip-icon{position:absolute;right:0;top:-10px}.colorInput .mat-form-field-label{padding-left:30px}.colorInput .mat-form-field-can-float.mat-focused .mat-form-label{padding-left:0}\n"]
+                    styles: [""]
                 },] }
     ];
     ColorInputComponent.ctorParameters = function () { return [
@@ -769,7 +769,7 @@
                             multi: true,
                         },
                     ],
-                    styles: [".wrapper{position:relative;display:inline-block;padding-left:35px;cursor:pointer}.wrapper input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.wrapper.disabled{cursor:default}\n"]
+                    styles: [""]
                 },] }
     ];
     RadioButtonComponent.ctorParameters = function () { return []; };
@@ -856,7 +856,7 @@
                             multi: true,
                         },
                     ],
-                    styles: [".timeInput{display:inline}.timeInput input{width:2em;margin-right:4px;margin-left:4px;font-size:16px}\n"]
+                    styles: [""]
                 },] }
     ];
     TimeInputComponent.ctorParameters = function () { return [
@@ -1279,7 +1279,7 @@
                             }),
                         ]),
                     ],
-                    styles: [".flyout{position:relative;display:block;padding:20px 45px}.flyout-header-more{font:normal normal normal 16px/25px var(--fontName-text03);letter-spacing:.26px;color:var(--primaryColor);cursor:pointer}.flyout-header-more kms-icon .icon{width:16px!important;height:20px!important}.flyout-header-more kms-icon .icon svg{width:16px!important;height:20px!important}.flyout-header-more kms-icon .icon svg use{fill:var(--primaryColor)}.flyout-body{padding:0;margin:0;overflow:hidden;outline:none}\n"]
+                    styles: [""]
                 },] }
     ];
     FlyoutComponent.propDecorators = {
@@ -2342,6 +2342,755 @@
         onConfirmClosed: [{ type: i0.Output }]
     };
 
+    /**
+     * Dropdown from data component {@link https://leaseplan-dev.rentoffice.de/styleguide#ui-elements}
+     */
+    var DropdownFromDataComponent = /** @class */ (function (_super) {
+        __extends(DropdownFromDataComponent, _super);
+        function DropdownFromDataComponent(formBuilder, renderer) {
+            var _this = _super.call(this, formBuilder, renderer) || this;
+            _this.formBuilder = formBuilder;
+            _this.renderer = renderer;
+            // options for the dropdown have a null value at the beginning of the array
+            _this.hasNullOption = false;
+            _this.placeholder = '';
+            _this.label = '';
+            _this.required = false;
+            _this.useEnumIndexAsValue = false;
+            _this.keys = [];
+            _this.values = [];
+            _this.Object = Object;
+            return _this;
+        }
+        /**
+         * Hook used to sync changes on set Label and Type
+         * @param changes
+         */
+        DropdownFromDataComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.optionsPlainArray) {
+                this.keys = this.optionsPlainArray;
+                this.values = this.optionsPlainArray;
+            }
+            this.setKeyValues();
+        };
+        DropdownFromDataComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.form = this.formBuilder.group({
+                dropdownData: [],
+            });
+            this.formInitialized = true;
+            this.form.valueChanges.subscribe(function (value) {
+                _this.internalValue = value.dropdownData;
+                _this.onChange(value.dropdownData);
+            });
+            _super.prototype.ngOnInit.call(this);
+        };
+        /**
+         * transofrms the data values to the correct format for be used by the template
+         * @param value
+         */
+        DropdownFromDataComponent.prototype.setKeyValues = function () {
+            var _this = this;
+            if (this.optionsObjArray && this.mapKey && this.mapValue) {
+                this.keys = this.optionsObjArray.map(function (obj) { return obj["" + _this.mapKey]; });
+                this.values = this.optionsObjArray.map(function (obj) { return obj["" + _this.mapValue]; });
+            }
+            else if (this.optionsObjArray && this.mapKey) {
+                this.keys = this.optionsObjArray.map(function (obj) { return obj["" + _this.mapKey]; });
+                this.values = this.optionsObjArray.map(function (obj) { return obj["" + _this.mapKey]; });
+            }
+            if (this.optionsEnum) {
+                this.keys = enumValues.EnumValues.getNames(this.optionsEnum);
+                if (this.optionsPlainArray) {
+                    this.values = this.optionsPlainArray;
+                }
+                else {
+                    var values = enumValues.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' }
+                    var keyValueEnum = false;
+                    for (var i = 0; i < this.keys.length; i++) {
+                        if (i !== values[i]) {
+                            keyValueEnum = true;
+                        }
+                    }
+                    if (keyValueEnum || this.useEnumIndexAsValue) {
+                        this.values = values;
+                    }
+                    else {
+                        this.values = enumValues.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
+         */
+        DropdownFromDataComponent.prototype.setDisplayKey = function (key) {
+            /*
+            if (this.translation && key !== null) {
+                if (this.translation.isPrefix) {
+                    return this.translationService.instant(this.translation.path + '.' + key);
+                } else if (this.translation.useKey) {
+                    return this.translationService.instant(this.translation.path, { key: key });
+                } else if (!this.translation?.useKey && !this.translation?.isPrefix) {
+                    return this.translationService.instant(this.translation.path);
+                }
+            } else if (key == null) {
+                return '';
+            } else if (!this.translation) {
+                return key;
+            }
+            */
+            return key;
+        };
+        DropdownFromDataComponent.prototype.valueChanged = function (value) {
+            this.form.patchValue({
+                dropdownData: value,
+            });
+            this.onSelectItemEmitter.emit(value);
+        };
+        return DropdownFromDataComponent;
+    }(FormControlParentComponent));
+    DropdownFromDataComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'kms-dropdown-from-data',
+                    template: "<form [formGroup]=\"form\">\n    <mat-form-field [attr.required]=\"required\" [floatLabel]=\"placeholder ? 'always' : 'auto'\">\n        <mat-label>{{ label }}</mat-label>\n        <mat-select\n            placeholder=\"{{ placeholder }}\"\n            disableOptionCentering\n            [(value)]=\"value\"\n            (selectionChange)=\"valueChanged($event?.value)\"\n            #child\n            [disabled]=\"disabled\"\n        >\n            <mat-option *ngFor=\"let key of keys; let i = index\" [value]=\"values[i]\">\n                <span>{{ setDisplayKey(key) }}</span>\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n</form>\n",
+                    providers: [
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: i0.forwardRef(function () { return DropdownFromDataComponent; }),
+                            multi: true,
+                        },
+                    ]
+                },] }
+    ];
+    DropdownFromDataComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder },
+        { type: i0.Renderer2 }
+    ]; };
+    DropdownFromDataComponent.propDecorators = {
+        optionsEnum: [{ type: i0.Input }],
+        optionsPlainArray: [{ type: i0.Input }],
+        optionsObjArray: [{ type: i0.Input }],
+        mapKey: [{ type: i0.Input }],
+        mapValue: [{ type: i0.Input }],
+        hasNullOption: [{ type: i0.Input }],
+        translation: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        required: [{ type: i0.Input }],
+        useEnumIndexAsValue: [{ type: i0.Input }]
+    };
+
+    /*!
+     * @copyright FLYACTS GmbH 2019
+     */
+    var ImageSliderComponent = /** @class */ (function () {
+        function ImageSliderComponent(sanitizer) {
+            this.sanitizer = sanitizer;
+            this.editMode = false;
+            this.orderChanged = new i0.EventEmitter();
+            this.deleteImageEvent = new i0.EventEmitter();
+            /**
+             * Optional: Define Swipe behaviour configuration.
+             * Default is 10% for the threshold definition until a swipe triggers next/previous slide.
+             */
+            this.swipeConfig = {
+                swipeThreshold: 5,
+                swipeThresholdType: '%',
+                swipeLocalPosition: true,
+            };
+            this.selectedSlide = 0;
+            this.isLastClickedInSliderImage = false;
+            this.config = {
+                initialSlide: 0,
+                slidesPerView: 3,
+                navigation: {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev',
+                },
+                watchOverflow: true,
+                autoHeight: true,
+                allowTouchMove: false,
+                spaceBetween: 30,
+                on: {
+                    slideChange: function () {
+                        // do something
+                    },
+                    slideChangeTransitionEnd: function () {
+                        // do something
+                    },
+                },
+            };
+        }
+        ImageSliderComponent.prototype.ngOnInit = function () {
+            if (this.slides) {
+                // TODO use Pipe safeStyle
+                this.selectedSlideImage = this.sanitizer.bypassSecurityTrustStyle('url(' + this.slides[0] + ')');
+            }
+        };
+        // !TODO
+        ImageSliderComponent.prototype.onKeydownHandler = function (event) {
+            if (event.key === 'ArrowRight') {
+                this.nextSlide();
+            }
+            if (event.key === 'ArrowLeft') {
+                this.previousSlide();
+            }
+        };
+        /**
+         * Slide follows the finger or mouse according to it´s move delta.
+         * @param event SwipeMoveEvent
+         */
+        ImageSliderComponent.prototype.handleMoveEvent = function (event) {
+            // certain move threshold needs to be reached
+            if (!event.thresholdWasReached) {
+                return;
+            }
+            this.config.direction = event.direction === 1 ? 'horizontal' : 'vertical';
+        };
+        /**
+         * Mouse up or slide container was left.
+         * @param event SwipeReleaseEvent
+         */
+        ImageSliderComponent.prototype.handleReleaseEvent = function (event) {
+            if (!event.thresholdWasReached) {
+                return;
+            }
+            // Just do if user clicked to slide on image and not on arrow or other element
+            if (!this.isLastClickedInSliderImage) {
+                return;
+            }
+            if (event.direction === 1) {
+                this.previousSlide();
+            }
+            else {
+                this.nextSlide();
+            }
+        };
+        ImageSliderComponent.prototype.lastClicked = function () {
+            this.isLastClickedInSliderImage = true;
+        };
+        ImageSliderComponent.prototype.noLastClicked = function () {
+            this.isLastClickedInSliderImage = false;
+        };
+        ImageSliderComponent.prototype.scrollLeft = function () {
+            this.previousSlide();
+        };
+        ImageSliderComponent.prototype.scrollRight = function () {
+            this.nextSlide();
+        };
+        ImageSliderComponent.prototype.nextSlide = function () {
+            if (this.slides && this.selectedSlide < this.slides.length - 1) {
+                if (this.usefulSwiper) {
+                    this.usefulSwiper.swiper.slideNext();
+                }
+                this.openSlide(this.selectedSlide + 1);
+            }
+            this.isLastClickedInSliderImage = false;
+        };
+        ImageSliderComponent.prototype.previousSlide = function () {
+            if (this.selectedSlide > 0) {
+                if (this.usefulSwiper) {
+                    this.usefulSwiper.swiper.slidePrev();
+                }
+                this.openSlide(this.selectedSlide - 1);
+            }
+            this.isLastClickedInSliderImage = false;
+        };
+        ImageSliderComponent.prototype.slideTo = function (index) {
+            if (this.usefulSwiper) {
+                this.usefulSwiper.swiper.slideTo(index);
+            }
+        };
+        ImageSliderComponent.prototype.openSlide = function (number) {
+            if (this.slides && number < this.slides.length && number >= 0) {
+                this.selectedSlide = number;
+                // TODO use Pipe safeStyle
+                this.selectedSlideImage = this.sanitizer.bypassSecurityTrustStyle('url(' + this.slides[number] || ')');
+            }
+        };
+        ImageSliderComponent.prototype.ngOnChanges = function (_changes) {
+            if (_changes.slides) {
+                if (this.slides) {
+                    // TODO use Pipe safeStyle
+                    this.selectedSlideImage = this.sanitizer.bypassSecurityTrustStyle('url(' + this.slides[0] + ')');
+                }
+            }
+        };
+        /**
+         * Re-order slides and notify parent component
+         */
+        ImageSliderComponent.prototype.drop = function (event) {
+            if (this.slides && this.imagesTOSave) {
+                dragDrop.moveItemInArray(this.slides, event.previousIndex, event.currentIndex);
+                dragDrop.moveItemInArray(this.imagesTOSave, event.previousIndex, event.currentIndex);
+                this.orderChanged.emit(this.imagesTOSave);
+            }
+        };
+        /**
+         * Send image index to parent to perform delete
+         */
+        ImageSliderComponent.prototype.deleteImage = function (index) {
+            this.deleteImageEvent.emit(index);
+        };
+        return ImageSliderComponent;
+    }());
+    ImageSliderComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'kms-image-slider',
+                    template: "<div class=\"all-wrapper\">\r\n    <!--(swiperight)=\"previousSlide()\" (swipeleft)=\"nextSlide()\"-->\r\n    <div \r\n        class=\"swiper-bigImage\"\r\n        [style.backgroundImage]=\"selectedSlideImage\"\r\n        [swipeDirective]=\"swipeConfig\"\r\n        (moveEvent)=\"handleMoveEvent($event)\"\r\n        (releaseEvent)=\"handleReleaseEvent($event)\"\r\n        (mouseup)=\"lastClicked()\"\r\n        (mouseout)=\"noLastClicked()\" >\r\n    </div>\r\n\r\n    <ng-content select=\"[description]\"></ng-content>\r\n\r\n    <div class=\"swiper-holder\">\r\n        <!--\r\n        (mouseWheelUp)=\"scrollLeft($event)\"\r\n        (mouseWheelDown)=\"scrollRight($event)\"\r\n        -->\r\n\r\n        <swiper [config]=\"config\" #usefulSwiper>\r\n            <div class=\"swiper-wrapper\" \r\n                cdkDropList (cdkDropListDropped)=\"drop($event)\" \r\n                cdkDropListOrientation=\"horizontal\">                \r\n                <div class=\"swiper-slide\" \r\n                    *ngFor=\"let slide of slides; let index = index\" \r\n                    cdkDrag [cdkDragDisabled]=\"!editMode\">\r\n                    <button mat-menu-item *ngIf=\"editMode\" (click)=\"deleteImage(index)\"> \r\n                        <kms-icon icon=\"trash\"></kms-icon>\r\n                    </button>\r\n                    <div class=\"img\" (click)=\"openSlide(index)\"\r\n                        [style.backgroundImage]=\"sanitizer.bypassSecurityTrustStyle('url(' + slide + ')')\"\r\n                        [ngClass]=\"{'active': index === selectedSlide}\">\r\n                    </div>\r\n                    \r\n                    <div class=\"default-image\">{{\"common.defaultImage\" | translate}} </div>\r\n                </div>\r\n            </div>\r\n        </swiper>\r\n\r\n        <div class=\"swiper-button-next\" *ngIf=\"slides?.length > 3\"></div>\r\n        <div class=\"swiper-button-prev\" *ngIf=\"slides?.length > 3\"></div>\r\n\r\n        <div class=\"swiper-button-next2\" *ngIf=\"slides?.length > 1\" (click)=\"nextSlide()\">\r\n            <kms-icon icon=\"chevron-right\" [iconClass]=\"{'color-disabled': selectedSlide == slides?.length - 1, 'color-primary': true}\"></kms-icon>\r\n        </div>\r\n        <div class=\"swiper-button-prev2\" *ngIf=\"slides?.length > 1\" (click)=\"previousSlide()\">\r\n            <kms-icon icon=\"chevron-left\" [iconClass]=\"{'color-disabled': selectedSlide == 0, 'color-primary': true}\"></kms-icon>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    <ng-content></ng-content>\r\n</div>",
+                    styles: [""]
+                },] }
+    ];
+    ImageSliderComponent.ctorParameters = function () { return [
+        { type: platformBrowser.DomSanitizer }
+    ]; };
+    ImageSliderComponent.propDecorators = {
+        slides: [{ type: i0.Input }],
+        editMode: [{ type: i0.Input }],
+        imagesTOSave: [{ type: i0.Input }],
+        orderChanged: [{ type: i0.Output }],
+        deleteImageEvent: [{ type: i0.Output }],
+        swipeConfig: [{ type: i0.Input }],
+        usefulSwiper: [{ type: i0.ViewChild, args: ['usefulSwiper',] }],
+        onKeydownHandler: [{ type: i0.HostListener, args: ['document:keydown', ['$event'],] }]
+    };
+
+    /*!
+     * @copyright FLYACTS GmbH 2019
+     */
+    var MouseWheelDirective = /** @class */ (function () {
+        function MouseWheelDirective() {
+            this.mouseWheelUp = new i0.EventEmitter();
+            this.mouseWheelDown = new i0.EventEmitter();
+        }
+        MouseWheelDirective.prototype.onMouseWheelChrome = function (event) {
+            this.mouseWheelFunc(event);
+        };
+        MouseWheelDirective.prototype.onMouseWheelFirefox = function (event) {
+            this.mouseWheelFunc(event);
+        };
+        MouseWheelDirective.prototype.onMouseWheelIE = function (event) {
+            this.mouseWheelFunc(event);
+        };
+        MouseWheelDirective.prototype.mouseWheelFunc = function (event) {
+            event = window.event || event; // old IE support
+            var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
+            if (delta > 0) {
+                this.mouseWheelUp.emit(event);
+            }
+            else if (delta < 0) {
+                this.mouseWheelDown.emit(event);
+            }
+            // for IE
+            event.returnValue = false;
+            // for Chrome and Firefox
+            if (event.preventDefault) {
+                event.preventDefault();
+            }
+        };
+        return MouseWheelDirective;
+    }());
+    MouseWheelDirective.decorators = [
+        { type: i0.Directive, args: [{ selector: '[mouseWheel]' },] }
+    ];
+    MouseWheelDirective.propDecorators = {
+        mouseWheelUp: [{ type: i0.Output }],
+        mouseWheelDown: [{ type: i0.Output }],
+        onMouseWheelChrome: [{ type: i0.HostListener, args: ['mousewheel', ['$event'],] }],
+        onMouseWheelFirefox: [{ type: i0.HostListener, args: ['DOMMouseScroll', ['$event'],] }],
+        onMouseWheelIE: [{ type: i0.HostListener, args: ['onmousewheel', ['$event'],] }]
+    };
+
+    /*!
+     * @copyright FLYACTS GmbH 2019
+     */
+    /**
+     * Directive to calc the height of all inner elements
+     */
+    var GetMaxHeightDirective = /** @class */ (function () {
+        function GetMaxHeightDirective(el) {
+            this.el = el;
+            /**
+             * CSS class name of the child items (markup elements) that should be checked for their height.
+             * This is mandatory.
+             */
+            this.cssClassName = '';
+            /**
+             * Event that will pass the height of the tallest child inside the container.
+             * Useful to calculate the target height of containers with different content (like accordion) for animations.
+             */
+            this.maxHeightChanged = new i0.EventEmitter();
+            /**
+             * Event that will pass the complete sum of all height values from each child.
+             * Useful to calculate the full target height of a container (like dropdown) for animations.
+             */
+            this.sumOfHeight = new i0.EventEmitter();
+        }
+        GetMaxHeightDirective.prototype.ngAfterContentChecked = function () {
+            this.checkHeightOfChildren(this.el.nativeElement, this.cssClassName);
+        };
+        GetMaxHeightDirective.prototype.checkHeightOfChildren = function (parent, cssClassName) {
+            if (!parent) {
+                return;
+            }
+            // find all the child elements with the selected class name
+            var children = parent.getElementsByClassName(cssClassName);
+            // failsafe
+            if (!children) {
+                return;
+            }
+            // get all the child elements heights
+            var itemHeights = Array.from(children).map(function (x) { return x.getBoundingClientRect().height; });
+            // failsafe
+            if (itemHeights.length === 0) {
+                return;
+            }
+            // find out the tallest element
+            var maxHeight = itemHeights.reduce(function (prev, curr) {
+                return curr > prev ? curr : prev;
+            }, 0);
+            // get sum of heights
+            var sumOfHeight = itemHeights.reduce(function (pv, cv) { return pv + cv; }, 0);
+            // inform
+            this.maxHeightChanged.emit(maxHeight);
+            this.sumOfHeight.emit(sumOfHeight);
+        };
+        return GetMaxHeightDirective;
+    }());
+    GetMaxHeightDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[getMaxHeight]',
+                },] }
+    ];
+    GetMaxHeightDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    GetMaxHeightDirective.propDecorators = {
+        cssClassName: [{ type: i0.Input, args: ['getMaxHeight',] }],
+        maxHeightChanged: [{ type: i0.Output }],
+        sumOfHeight: [{ type: i0.Output }]
+    };
+
+    /*!
+     * @copyright FLYACTS GmbH 2019
+     */
+    var SwipeDirective = /** @class */ (function () {
+        function SwipeDirective() {
+            /**
+             * Output Event that is emitted during swipe process (mouse move or touch move event).
+             * Can be used for calculation purposes.
+             */
+            this.moveEvent = new i0.EventEmitter();
+            /**
+             * Output Event that is emitted when swipe process end (mouse up or touch end event).
+             * Can be used for calculation purposes.
+             */
+            this.releaseEvent = new i0.EventEmitter();
+            this._startPosition = -1;
+            this._lastPosX = 0;
+            this._thresholdWasReached = false;
+            this._timeStart = 0;
+        }
+        Object.defineProperty(SwipeDirective.prototype, "config", {
+            /**
+             * Needed config that defines swipe behaviour.
+             * @param options SwipeOptions
+             */
+            set: function (options) {
+                if (options) {
+                    this._swipeOptions = options;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SwipeDirective.prototype.onMouseDown = function (event) {
+            this.calculateStartPosition(event);
+        };
+        SwipeDirective.prototype.onMove = function (event) {
+            this.move(event);
+        };
+        SwipeDirective.prototype.onRelease = function (event) {
+            this.release(event);
+            this.reset();
+        };
+        // ** PRIVATE ** //
+        /**
+         * Function checks if the current moving delta is inside the defined threshold.
+         * Sets the flag to true if the threshold was reached once.
+         */
+        SwipeDirective.prototype.checkThreshold = function (moveEvent) {
+            var percentage = this._swipeOptions && this._swipeOptions.swipeThresholdType === '%';
+            if (!percentage && this._swipeOptions && moveEvent.swipeDistanceTotal < this._swipeOptions.swipeThreshold) {
+                return;
+            }
+            else if (percentage &&
+                this._swipeOptions &&
+                moveEvent.swipeDistancePercentage < this._swipeOptions.swipeThreshold / 100) {
+                return;
+            }
+            else {
+                this._thresholdWasReached = true;
+            }
+        };
+        SwipeDirective.prototype.calculateStartPosition = function (event) {
+            // detect if touch or click
+            this._isMobile = event.type === 'touchstart';
+            // save start position
+            if (this._swipeOptions && this._swipeOptions.swipeLocalPosition) {
+                if (this._isMobile) {
+                    var touch = event.touches[0];
+                    this._startPosition = this._swipeOptions.swipeLocalPosition ? touch.clientX : touch.pageX;
+                }
+                else {
+                    this._startPosition = this._swipeOptions.swipeLocalPosition ? event.offsetX : event.pageX;
+                }
+            }
+            this._lastPosX = this._startPosition;
+            this._timeStart = event.timeStamp;
+            this._thresholdWasReached = false;
+        };
+        SwipeDirective.prototype.move = function (event) {
+            // failsafe
+            if (typeof event === 'undefined') {
+                return;
+            }
+            var posX = 0;
+            if (this._swipeOptions) {
+                if (this._isMobile && event.type === 'touchmove') {
+                    var touch = event.touches[0];
+                    posX = this._swipeOptions.swipeLocalPosition ? touch.clientX : touch.pageX;
+                }
+                else {
+                    posX = this._swipeOptions.swipeLocalPosition ? event.offsetX : event.pageX;
+                }
+            }
+            var offsetPerFrame = posX - this._lastPosX;
+            var swipeDistanceTotal = Math.abs(posX - this._startPosition);
+            var swipeDistancePercentage = Math.abs(swipeDistanceTotal / event.target.clientWidth);
+            var timeDuration = Math.abs(event.timeStamp - this._timeStart);
+            var direction;
+            var speed = 1 - swipeDistanceTotal / timeDuration;
+            speed = Math.max(0.1, speed);
+            if (posX - this._startPosition > 0) {
+                direction = 1; // a.k.a LTR
+            }
+            else {
+                direction = -1; // a.k.a RTL
+            }
+            this._moveEventData = {
+                position: posX,
+                offsetPerFrame: offsetPerFrame,
+                swipeDistanceTotal: swipeDistanceTotal,
+                swipeDistancePercentage: swipeDistancePercentage,
+                direction: direction,
+                speed: speed,
+                thresholdWasReached: this._thresholdWasReached,
+            };
+            this.checkThreshold(this._moveEventData);
+            // update move delta
+            this._lastPosX = posX;
+            // inform
+            this.moveEvent.emit(this._moveEventData);
+        };
+        SwipeDirective.prototype.release = function (event) {
+            // case: just a click/touch
+            if (!this._moveEventData) {
+                return;
+            }
+            var releaseEventData = {
+                thresholdWasReached: this._thresholdWasReached,
+                direction: this._moveEventData.direction,
+                speed: this._moveEventData.speed,
+                easingType: this.getEasingCurve(this._moveEventData.speed),
+                target: event.currentTarget,
+            };
+            // inform
+            this.releaseEvent.emit(releaseEventData);
+        };
+        SwipeDirective.prototype.getEasingCurve = function (speed) {
+            return speed > 0.5 ? 'ease-in' : 'ease-out';
+        };
+        SwipeDirective.prototype.reset = function () {
+            this._startPosition = -1;
+            this._thresholdWasReached = false;
+            if (this._moveEventData) {
+                this._moveEventData = undefined;
+            }
+        };
+        return SwipeDirective;
+    }());
+    SwipeDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[swipeDirective]',
+                },] }
+    ];
+    SwipeDirective.propDecorators = {
+        moveEvent: [{ type: i0.Output }],
+        releaseEvent: [{ type: i0.Output }],
+        config: [{ type: i0.Input, args: ['swipeDirective',] }],
+        onMouseDown: [{ type: i0.HostListener, args: ['mousedown', ['$event'],] }, { type: i0.HostListener, args: ['touchstart', ['$event'],] }],
+        onMove: [{ type: i0.HostListener, args: ['mousemove', ['$event'],] }, { type: i0.HostListener, args: ['touchmove', ['$event'],] }],
+        onRelease: [{ type: i0.HostListener, args: ['mouseup', ['$event'],] }, { type: i0.HostListener, args: ['mouseleave', ['$event'],] }, { type: i0.HostListener, args: ['touchend', ['$event'],] }]
+    };
+
+    var TooltipDirective = /** @class */ (function () {
+        function TooltipDirective(el, renderer) {
+            this.el = el;
+            this.renderer = renderer;
+            this.tooltipTitle = "";
+            this.tooltipText = "";
+            this.tooltipLinkText = "";
+            this.tooltipLinkUrl = "";
+            this.tooltipPlacement = "bottom";
+            this.tooltipDelay = 1000;
+            this.tooltipPlaceIntoHost = false;
+            this.tooltipOnlyonclick = false;
+            this.offset = 0;
+        }
+        TooltipDirective.prototype.onMouseEnter = function () {
+            if (!this.tooltipOnlyonclick) {
+                this.show();
+            }
+        };
+        TooltipDirective.prototype.onClick = function () {
+            if (this.tooltipOnlyonclick) {
+                this.show();
+            }
+        };
+        TooltipDirective.prototype.onMouseLeave = function () {
+            if (this.tooltipElem) {
+                this.hide();
+            }
+        };
+        TooltipDirective.prototype.show = function () {
+            if (!this.tooltipElem) {
+                this.create();
+                this.setPosition();
+            }
+            this.renderer.addClass(this.tooltipElem, 'tooltip-show');
+        };
+        TooltipDirective.prototype.hide = function () {
+            this.renderer.removeClass(this.tooltipElem, 'tooltip-show');
+            window.setTimeout(function () {
+            }, this.tooltipDelay);
+        };
+        TooltipDirective.prototype.create = function () {
+            this.tooltipElem = this.renderer.createElement('kms-tooltip-element');
+            this.tooltipTitleElem = this.renderer.createElement('b');
+            this.renderer.appendChild(this.tooltipTitleElem, this.renderer.createText(this.tooltipTitle));
+            this.renderer.appendChild(this.tooltipElem, this.tooltipTitleElem);
+            this.tooltipTextElem = this.renderer.createElement('div');
+            this.renderer.appendChild(this.tooltipTextElem, this.renderer.createText(this.tooltipText));
+            this.renderer.appendChild(this.tooltipElem, this.tooltipTextElem);
+            this.tooltipLinkElem = this.renderer.createElement('a');
+            this.renderer.setAttribute(this.tooltipLinkElem, 'href', this.tooltipLinkUrl);
+            this.renderer.appendChild(this.tooltipLinkElem, this.renderer.createText(this.tooltipLinkText));
+            this.renderer.appendChild(this.tooltipElem, this.tooltipLinkElem);
+            if (this.tooltipPlaceIntoHost) {
+                this.renderer.appendChild(this.el.nativeElement, this.tooltipElem);
+            }
+            else {
+                this.renderer.appendChild(document.body, this.tooltipElem);
+            }
+            this.renderer.addClass(this.tooltipElem, 'tooltip');
+            this.renderer.addClass(this.tooltipElem, "tooltip-" + this.tooltipPlacement);
+            this.renderer.setStyle(this.tooltipElem, '-webkit-transition', "opacity " + this.tooltipDelay + "ms");
+            this.renderer.setStyle(this.tooltipElem, '-moz-transition', "opacity " + this.tooltipDelay + "ms");
+            this.renderer.setStyle(this.tooltipElem, '-o-transition', "opacity " + this.tooltipDelay + "ms");
+            this.renderer.setStyle(this.tooltipElem, 'transition', "opacity " + this.tooltipDelay + "ms");
+        };
+        TooltipDirective.prototype.setPosition = function () {
+            if (this.tooltipElem) {
+                var hostPos = this.el.nativeElement.getBoundingClientRect();
+                var tooltipPos = this.tooltipElem.getBoundingClientRect();
+                var top = void 0, left = void 0;
+                if (this.tooltipPlaceIntoHost) {
+                    left = 0;
+                    top = hostPos.height;
+                }
+                else {
+                    var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+                    if (this.tooltipPlacement === 'top') {
+                        top = hostPos.top - tooltipPos.height - this.offset;
+                        left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+                    }
+                    if (!this.tooltipPlacement || this.tooltipPlacement === 'bottom') {
+                        top = hostPos.bottom + this.offset;
+                        left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+                    }
+                    if (this.tooltipPlacement === 'left') {
+                        top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+                        left = hostPos.left - tooltipPos.width - this.offset;
+                    }
+                    if (this.tooltipPlacement === 'right') {
+                        top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+                        left = hostPos.right + this.offset;
+                    }
+                    top += scrollPos;
+                }
+                this.renderer.setStyle(this.tooltipElem, 'top', top + "px");
+                this.renderer.setStyle(this.tooltipElem, 'left', left + "px");
+            }
+        };
+        return TooltipDirective;
+    }());
+    TooltipDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[kmsTooltip]'
+                },] }
+    ];
+    TooltipDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 }
+    ]; };
+    TooltipDirective.propDecorators = {
+        tooltipTitle: [{ type: i0.Input, args: ['tooltipTitle',] }],
+        tooltipText: [{ type: i0.Input, args: ['tooltipText',] }],
+        tooltipLinkText: [{ type: i0.Input, args: ['tooltipLinkText',] }],
+        tooltipLinkUrl: [{ type: i0.Input, args: ['tooltipLinkUrl',] }],
+        tooltipPlacement: [{ type: i0.Input, args: ['tooltipPlacement',] }],
+        tooltipDelay: [{ type: i0.Input, args: ['tooltipDelay',] }],
+        tooltipPlaceIntoHost: [{ type: i0.Input, args: ['tooltipPlaceIntoHost',] }],
+        tooltipOnlyonclick: [{ type: i0.Input, args: ['tooltipOnlyonclick',] }],
+        onMouseEnter: [{ type: i0.HostListener, args: ['mouseenter',] }],
+        onClick: [{ type: i0.HostListener, args: ['click',] }],
+        onMouseLeave: [{ type: i0.HostListener, args: ['mouseleave',] }]
+    };
+
+    /**
+     * @copyright KMS GmbH
+     */
+    var DirectivesModule = /** @class */ (function () {
+        function DirectivesModule() {
+        }
+        return DirectivesModule;
+    }());
+    DirectivesModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        SwipeDirective,
+                        MouseWheelDirective,
+                        GetMaxHeightDirective,
+                        TooltipDirective,
+                    ],
+                    imports: [common.CommonModule],
+                    exports: [
+                        SwipeDirective,
+                        MouseWheelDirective,
+                        GetMaxHeightDirective,
+                        TooltipDirective,
+                    ],
+                },] }
+    ];
+
     var KmsUiPresentationalModule = /** @class */ (function () {
         function KmsUiPresentationalModule() {
         }
@@ -2350,28 +3099,30 @@
     KmsUiPresentationalModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [
-                        KmsUiPresentationalComponent,
                         ActionsParentComponent,
+                        BackToTopComponent,
+                        ButtonWithConfirmDialogComponent,
                         CheckboxComponent,
                         ColorInputComponent,
-                        RadioButtonComponent,
-                        TimeInputComponent,
-                        YesNoRadiogroupComponent,
+                        DropdownFromDataComponent,
+                        EnumRadiogroupComponent,
+                        EnumRadiogroupComponent,
                         FileInputComponent,
-                        LoaderComponent,
                         FlyoutComponent,
+                        GenericDialogComponent,
                         IconComponent,
-                        EnumRadiogroupComponent,
+                        ImageSliderComponent,
                         KMSAccordionItemComponent,
-                        EnumRadiogroupComponent,
+                        KmsUiPresentationalComponent,
+                        LoaderComponent,
                         MapComponent,
+                        RadioButtonComponent,
                         SalutationDropdownComponent,
                         SalutationRadiogroupComponent,
+                        TimeInputComponent,
                         TooltipComponent,
                         TooltipIconComponent,
-                        BackToTopComponent,
-                        GenericDialogComponent,
-                        ButtonWithConfirmDialogComponent,
+                        YesNoRadiogroupComponent
                     ],
                     imports: [
                         common.CommonModule,
@@ -2385,31 +3136,33 @@
                         googleMaps.GoogleMapsModule,
                         expansion.MatExpansionModule,
                         select.MatSelectModule,
-                        core.TranslateModule
+                        DirectivesModule
                     ],
                     exports: [
-                        KmsUiPresentationalComponent,
                         ActionsParentComponent,
+                        BackToTopComponent,
+                        ButtonWithConfirmDialogComponent,
                         CheckboxComponent,
                         ColorInputComponent,
-                        RadioButtonComponent,
-                        TimeInputComponent,
-                        YesNoRadiogroupComponent,
+                        DropdownFromDataComponent,
+                        EnumRadiogroupComponent,
+                        EnumRadiogroupComponent,
                         FileInputComponent,
-                        LoaderComponent,
                         FlyoutComponent,
+                        GenericDialogComponent,
                         IconComponent,
-                        EnumRadiogroupComponent,
+                        ImageSliderComponent,
                         KMSAccordionItemComponent,
-                        EnumRadiogroupComponent,
+                        KmsUiPresentationalComponent,
+                        LoaderComponent,
                         MapComponent,
+                        RadioButtonComponent,
                         SalutationDropdownComponent,
                         SalutationRadiogroupComponent,
+                        TimeInputComponent,
                         TooltipComponent,
                         TooltipIconComponent,
-                        BackToTopComponent,
-                        GenericDialogComponent,
-                        ButtonWithConfirmDialogComponent
+                        YesNoRadiogroupComponent
                     ]
                 },] }
     ];
@@ -2423,41 +3176,48 @@
      */
 
     exports.CustomPipesModule = CustomPipesModule;
+    exports.DirectivesModule = DirectivesModule;
     exports.GenericDialogComponent = GenericDialogComponent;
     exports.KmsUiPresentationalComponent = KmsUiPresentationalComponent;
     exports.KmsUiPresentationalModule = KmsUiPresentationalModule;
     exports.KmsUiPresentationalService = KmsUiPresentationalService;
     exports["ɵa"] = ActionsParentComponent;
-    exports["ɵb"] = CheckboxComponent;
-    exports["ɵba"] = SafeUrlPipe;
-    exports["ɵbb"] = EncodeUriPipe;
-    exports["ɵbc"] = DecodeUriPipe;
-    exports["ɵbd"] = TypeofPipe;
-    exports["ɵbe"] = TrimPipe;
-    exports["ɵbf"] = ToNumberPipe;
-    exports["ɵc"] = ColorInputComponent;
-    exports["ɵd"] = FormControlParentComponent;
-    exports["ɵe"] = FormParentComponent;
-    exports["ɵf"] = RadioButtonComponent;
-    exports["ɵg"] = TimeInputComponent;
-    exports["ɵh"] = YesNoRadiogroupComponent;
-    exports["ɵi"] = FileInputComponent;
-    exports["ɵj"] = LoaderComponent;
+    exports["ɵb"] = BackToTopComponent;
+    exports["ɵba"] = SafeHtmlPipe;
+    exports["ɵbb"] = SafeStylePipe;
+    exports["ɵbc"] = SafeUrlPipe;
+    exports["ɵbd"] = EncodeUriPipe;
+    exports["ɵbe"] = DecodeUriPipe;
+    exports["ɵbf"] = TypeofPipe;
+    exports["ɵbg"] = TrimPipe;
+    exports["ɵbh"] = ToNumberPipe;
+    exports["ɵbi"] = SwipeDirective;
+    exports["ɵbj"] = MouseWheelDirective;
+    exports["ɵbk"] = GetMaxHeightDirective;
+    exports["ɵbl"] = TooltipDirective;
+    exports["ɵc"] = ButtonWithConfirmDialogComponent;
+    exports["ɵd"] = CheckboxComponent;
+    exports["ɵe"] = ColorInputComponent;
+    exports["ɵf"] = FormControlParentComponent;
+    exports["ɵg"] = FormParentComponent;
+    exports["ɵh"] = DropdownFromDataComponent;
+    exports["ɵi"] = EnumRadiogroupComponent;
+    exports["ɵj"] = FileInputComponent;
     exports["ɵk"] = FlyoutComponent;
-    exports["ɵl"] = IconComponent;
-    exports["ɵm"] = EnumRadiogroupComponent;
-    exports["ɵn"] = KMSAccordionItemComponent;
-    exports["ɵo"] = MapComponent;
-    exports["ɵp"] = ViewportService;
-    exports["ɵq"] = SalutationDropdownComponent;
-    exports["ɵr"] = SalutationRadiogroupComponent;
-    exports["ɵs"] = TooltipComponent;
-    exports["ɵt"] = TooltipIconComponent;
-    exports["ɵu"] = BackToTopComponent;
-    exports["ɵw"] = ButtonWithConfirmDialogComponent;
-    exports["ɵx"] = IntegerCurrency;
-    exports["ɵy"] = SafeHtmlPipe;
-    exports["ɵz"] = SafeStylePipe;
+    exports["ɵm"] = IconComponent;
+    exports["ɵn"] = ImageSliderComponent;
+    exports["ɵo"] = KMSAccordionItemComponent;
+    exports["ɵp"] = LoaderComponent;
+    exports["ɵq"] = MapComponent;
+    exports["ɵr"] = ViewportService;
+    exports["ɵs"] = RadioButtonComponent;
+    exports["ɵt"] = SalutationDropdownComponent;
+    exports["ɵu"] = SalutationRadiogroupComponent;
+    exports["ɵv"] = TimeInputComponent;
+    exports["ɵw"] = TooltipComponent;
+    exports["ɵx"] = TooltipIconComponent;
+    exports["ɵy"] = YesNoRadiogroupComponent;
+    exports["ɵz"] = IntegerCurrency;
 
     Object.defineProperty(exports, '__esModule', { value: true });