@lenne.tech/ng-base 0.3.3 → 0.3.4

package/fesm2015/lenne.tech-ng-base-src-lib-base.js

@@ -2,13 +2,14 @@ import * as i1 from 'apollo-angular';
 import { APOLLO_OPTIONS, gql, Apollo } from 'apollo-angular';
 import { HttpLink } from 'apollo-angular/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Directive, ElementRef, Input, Output, HostBinding, NgZone, HostListener, Pipe, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, Inject, Directive, ElementRef, Input, Output, HostBinding, PLATFORM_ID, HostListener, Pipe, NgModule } from '@angular/core';
 import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
 import { ApolloLink, split, concat } from '@apollo/client/core';
 import { InMemoryCache } from '@apollo/client/cache';
 import { WebSocketLink } from '@apollo/client/link/ws';
 import { getMainDefinition } from '@apollo/client/utilities';
 import { __awaiter } from 'tslib';
+import { isPlatformBrowser } from '@angular/common';
 import * as i1$2 from '@angular/platform-browser';
 import { DomSanitizer, Title, Meta } from '@angular/platform-browser';
 import * as i1$1 from '@angular/router';
@@ -419,362 +420,6 @@ LazyLoadDirective.propDecorators = {
     src: [{ type: Input }]
 };
 
-/**
- * Image service
- */
-class ImageService {
-    /**
-     * Preaload images (for lazy handling)
-     *
-     * @param options
-     * @protected
-     */
-    preLoadImages(options) {
-        // Init configuration
-        const config = Object.assign({ doneFunnction: undefined, elements: document, regExp: undefined, timeout: undefined }, options);
-        return new Promise((resolve) => {
-            var _a;
-            // Init variables
-            let resolved = false;
-            let timeoutId;
-            // HTMLCollection to array
-            if (config.elements instanceof HTMLCollection) {
-                config.elements = Array.from(config.elements);
-            }
-            // Single element to array
-            if (!Array.isArray(config.elements)) {
-                config.elements = [config.elements];
-            }
-            // Init loading
-            const promises = [];
-            // Get all images
-            let images = [];
-            config.elements.forEach((element) => {
-                images = images.concat(Array.from(element.getElementsByTagName('img')));
-            });
-            // Prepare images
-            for (const image of images) {
-                const src = image.getAttribute('src');
-                // Check if changes are necessary and possible
-                if ((image.complete && image.naturalHeight !== 0) || // already laoded
-                    image.getAttribute('loading') !== 'lazy' || // loading attribute !== lazy
-                    !src || // Image has no src
-                    ((_a = config.regExp) === null || _a === void 0 ? void 0 : _a.test(src)) // Test if src matches regular expression
-                ) {
-                    continue;
-                }
-                // Replace lazy loading image with immediately loading image
-                const newImage = document.createElement('img');
-                Array.from(image.attributes).forEach((attr) => {
-                    if (attr.name !== 'loading' && attr.name !== 'src') {
-                        newImage.setAttribute(attr.name, attr.value);
-                    }
-                });
-                image.replaceWith(newImage);
-                // Wait for laoding
-                promises.push(this.loadImage(newImage, src));
-            }
-            if (config.timeout) {
-                timeoutId = setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-                    resolved = true;
-                    if (config.doneFunnction) {
-                        yield config.doneFunction();
-                    }
-                    resolve(undefined);
-                }));
-            }
-            // Wait until all images loaded
-            Promise.all(promises)
-                .catch((e) => console.error('Error during image loading', e))
-                .finally(() => __awaiter(this, void 0, void 0, function* () {
-                // Check if already resolved
-                if (resolved) {
-                    return;
-                }
-                // Stop timeout
-                if (timeoutId) {
-                    clearTimeout(timeoutId);
-                }
-                // Return result
-                let result;
-                if (config.doneFunnction) {
-                    result = yield config.doneFunction();
-                }
-                resolve(result);
-            }));
-        });
-    }
-    /**
-     * Load image for image element
-     *
-     * @param imageElement
-     * @param src
-     * @protected
-     */
-    loadImage(imageElement, src) {
-        return __awaiter(this, void 0, void 0, function* () {
-            src = src || imageElement.src;
-            return new Promise((resolve, reject) => {
-                imageElement.onload = () => resolve(imageElement);
-                imageElement.onerror = reject;
-                imageElement.src = src;
-            });
-        });
-    }
-}
-ImageService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ImageService_Factory() { return new ImageService(); }, token: ImageService, providedIn: "root" });
-ImageService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-
-/**
- * Set same height (maximum) to different elements
- */
-class MatchHeightDirective {
-    constructor(el, imageService, zone) {
-        this.el = el;
-        this.imageService = imageService;
-        this.zone = zone;
-        this.loadLazyImages = true;
-    }
-    onResize() {
-        this.matchHeight(this.el.nativeElement, this.ltMatchHeight);
-    }
-    ngAfterViewChecked() {
-        this.matchHeight(this.el.nativeElement, this.ltMatchHeight);
-    }
-    matchHeight(parent, target) {
-        // Timeout is set to force Angular to wait for all actions and only continue once the process has run through.
-        // Otherwise, an infinite loop will occur.
-        setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-            if (!parent) {
-                return;
-            }
-            let classNames;
-            if (!Array.isArray(target)) {
-                classNames = [target];
-            }
-            else {
-                classNames = target;
-            }
-            for (const className of classNames) {
-                // find all child structureElements with the selected class name
-                const children = parent.getElementsByClassName(className);
-                if (!children || children.length < 2) {
-                    continue;
-                }
-                // Load images of children
-                if (this.loadLazyImages) {
-                    yield this.imageService.preLoadImages({ elements: children });
-                }
-                // reset all children height
-                Array.from(children).forEach((element) => {
-                    element.style.height = 'initial';
-                });
-                // get all the child structureElements heights
-                const itemHeights = Array.from(children).map((x) => x.getBoundingClientRect().height);
-                // find out the tallest one
-                const maxHeight = itemHeights.reduce((prev, curr) => (curr > prev ? curr : prev), 0);
-                // update the child structureElements height to the tallest one
-                Array.from(children).forEach((element) => (element.style.height = `${maxHeight}px`));
-            }
-        }), 1);
-    }
-}
-MatchHeightDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[ltMatchHeight]',
-            },] }
-];
-MatchHeightDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ImageService },
-    { type: NgZone }
-];
-MatchHeightDirective.propDecorators = {
-    ltMatchHeight: [{ type: Input }],
-    loadLazyImages: [{ type: Input }],
-    onResize: [{ type: HostListener, args: ['window:resize',] }]
-};
-
-/**
- * Reszise detection
- * (inpsired by: https://stackblitz.com/edit/angular-resizable)
- */
-class ResizableDirective {
-    constructor(el) {
-        this.el = el;
-        this.resizableGrabWidth = 8;
-        this.resizableMinWidth = 10;
-        this.dragging = false;
-    }
-    ngOnInit() {
-        this.addListenerToDocument();
-        this.addListenerToElement();
-    }
-    mouseMoveG(evt) {
-        if (!this.dragging) {
-            return;
-        }
-        this.newWidth(evt.clientX - this.el.nativeElement.offsetLeft);
-        evt.stopPropagation();
-    }
-    newWidth(wid) {
-        const result = Math.max(this.resizableMinWidth, wid);
-        this.el.nativeElement.style.width = result + 'px';
-    }
-    mouseDown(evt) {
-        if (this.inDragRegion(evt)) {
-            this.dragging = true;
-            this.preventGlobalMouseEvents();
-            evt.stopPropagation();
-        }
-    }
-    restoreGlobalMouseEvents() {
-        document.body.style['pointer-events'] = 'auto';
-    }
-    mouseUpG(evt) {
-        if (!this.dragging) {
-            return;
-        }
-        this.restoreGlobalMouseEvents();
-        this.dragging = false;
-        evt.stopPropagation();
-    }
-    mouseMove(evt) {
-        if (this.inDragRegion(evt) || this.dragging) {
-            this.el.nativeElement.style.cursor = 'col-resize';
-        }
-        else {
-            this.el.nativeElement.style.cursor = 'default';
-        }
-    }
-    preventGlobalMouseEvents() {
-        document.body.style['pointer-events'] = 'none';
-    }
-    inDragRegion(evt) {
-        return this.el.nativeElement.clientWidth - evt.clientX + this.el.nativeElement.offsetLeft < this.resizableGrabWidth;
-    }
-    addListenerToDocument() {
-        document.addEventListener('mousemove', (e) => {
-            this.mouseMoveG(e);
-        }, true);
-        document.addEventListener('mouseup', (e) => {
-            this.mouseUpG(e);
-        }, true);
-    }
-    addListenerToElement() {
-        this.el.nativeElement.addEventListener('mousedown', (e) => {
-            this.mouseDown(e);
-        }, true);
-        this.el.nativeElement.addEventListener('mousemove', (e) => {
-            this.mouseMove(e);
-        }, true);
-    }
-}
-ResizableDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[ltResizable]',
-            },] }
-];
-ResizableDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-ResizableDirective.propDecorators = {
-    resizableGrabWidth: [{ type: Input }],
-    resizableMinWidth: [{ type: Input }]
-};
-
-/**
- * Truncate string with ellipses
- */
-class EllipsesPipe {
-    transform(value, limit) {
-        if (!value) {
-            return null;
-        }
-        return value.length > limit ? value.substring(0, limit) + '...' : value;
-    }
-}
-EllipsesPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'ltEllipses',
-            },] }
-];
-
-/**
- * Declarate html as safe
- */
-class SafeHtmlPipe {
-    constructor(sanitized) {
-        this.sanitized = sanitized;
-    }
-    transform(value) {
-        return this.sanitized.bypassSecurityTrustHtml(value);
-    }
-}
-SafeHtmlPipe.decorators = [
-    { type: Pipe, args: [{ name: 'ltSafeHtml' },] }
-];
-SafeHtmlPipe.ctorParameters = () => [
-    { type: DomSanitizer }
-];
-
-// Imported and exported elements
-const elements = [
-    // Directives
-    ContextMenuDirective,
-    LazyLoadDirective,
-    MatchHeightDirective,
-    ResizableDirective,
-    // Pipes
-    EllipsesPipe,
-    SafeHtmlPipe,
-];
-/**
- * Base module
- */
-class BaseModule {
-    /**
-     * Set configuration of base module in root module of the app
-     */
-    static forRoot(baseModuleConfig = {}) {
-        // Default config
-        const config = Object.assign({ apiUrl: 'localhost:3000', authGuardRedirectUrl: '/auth', logging: false, version: null, prefix: null, scrollDetectionOffset: 200, scrollOffset: 100, storageType: 'local' }, baseModuleConfig);
-        // Prepare providers
-        const providers = [
-            {
-                provide: BASE_MODULE_CONFIG,
-                useValue: baseModuleConfig,
-            },
-        ];
-        // Add apollo features if API URL is set
-        if (baseModuleConfig.apiUrl) {
-            providers.push({
-                provide: APOLLO_OPTIONS,
-                useFactory: apolloOptionsFactory,
-                deps: [BASE_MODULE_CONFIG, HttpLink, AuthService],
-            });
-        }
-        else if (config.logging) {
-            console.log('apiUrl is missing, ApolloLink is not initialized');
-        }
-        // Return root module
-        return {
-            ngModule: BaseModule,
-            providers,
-        };
-    }
-}
-BaseModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: elements,
-                exports: elements,
-            },] }
-];
-
 /**
  * Helper class
  */
@@ -856,196 +501,589 @@ class Helper {
                 }
             }
         }
-        // Return target
-        return target;
+        // Return target
+        return target;
+    }
+    /**
+     * Create Object or Objects of specified type with specified data
+     */
+    static maps(data, targetClass) {
+        // Check data
+        if (!data || typeof data !== 'object') {
+            return undefined;
+        }
+        // Check array
+        if (!Array.isArray(data)) {
+            data = [data];
+        }
+        // Map
+        return data.map((item) => {
+            return targetClass.map(item);
+        });
+    }
+    /**
+     * Get plain parameter
+     */
+    static getPlainParameter(parameter) {
+        var _a, _b, _c;
+        if (!parameter) {
+            return parameter;
+        }
+        return (_c = (_b = (_a = parameter === null || parameter === void 0 ? void 0 : parameter.split('?')) === null || _a === void 0 ? void 0 : _a.shift()) === null || _b === void 0 ? void 0 : _b.split('#')) === null || _c === void 0 ? void 0 : _c.shift();
+    }
+    /**
+     * Get ID of an url parameter
+     */
+    static getParameterId(parameter) {
+        var _a;
+        if (!parameter) {
+            return parameter;
+        }
+        return (_a = Helper.getPlainParameter(parameter)) === null || _a === void 0 ? void 0 : _a.split('-').pop();
+    }
+    /**
+     * Delay
+     */
+    static delay(ms) {
+        const promise = new Promise((resolve) => setTimeout(resolve, ms));
+        return promise;
+    }
+    /**
+     * Deep freeze
+     * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze
+     */
+    static deepFreeze(object, preparedObjects = []) {
+        // Prevent infinit regress
+        if (preparedObjects.includes(object)) {
+            return object;
+        }
+        preparedObjects.push(object);
+        // Retrieve the property names defined on object
+        const propNames = Object.getOwnPropertyNames(object);
+        // Freeze properties before freezing self
+        for (const name of propNames) {
+            const value = object[name];
+            if (value && typeof value === 'object') {
+                Helper.deepFreeze(value, preparedObjects);
+            }
+        }
+        return Object.freeze(object);
+    }
+    /**
+     * Generates an unique identifier with 24 characters
+     */
+    static getUID() {
+        let dt = new Date().getTime();
+        const uuid = 'xxxxxxxxxxxxxxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+            // eslint-disable-next-line no-bitwise
+            const r = (dt + Math.random() * 16) % 16 | 0;
+            dt = Math.floor(dt / 16);
+            // eslint-disable-next-line no-bitwise
+            return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
+        });
+        return uuid;
+    }
+    /**
+     * Parse date string to date object
+     */
+    static parseDate(dateString) {
+        const reISO = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*))(?:Z|(\+|-)([\d|:]*))?$/;
+        const reMsAjax = /^\/Date\((d|-|.*)\)[\/|\\]$/;
+        if (typeof dateString === 'string') {
+            const isoExec = reISO.exec(dateString);
+            if (isoExec) {
+                return new Date(dateString);
+            }
+            const msAjaxExec = reMsAjax.exec(dateString);
+            if (msAjaxExec) {
+                const cleaned = msAjaxExec[1].split(/[-+,.]/);
+                return new Date(cleaned[0] ? +cleaned[0] : 0 - +cleaned[1]);
+            }
+        }
+        return dateString;
+    }
+    /**
+     * Get browser name and version
+     */
+    static getBrowser() {
+        const userAgent = navigator.userAgent;
+        let data = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+        let version;
+        if (/trident/i.test(data[1])) {
+            version = /\brv[ :]+(\d+)/g.exec(userAgent) || [];
+            return { name: 'IE', version: version[1] || '' };
+        }
+        if (data[1] === 'Chrome') {
+            version = userAgent.match(/\bOPR|Edge\/(\d+)/);
+            if (version != null) {
+                return { name: 'Opera', version: version[1] };
+            }
+        }
+        data = data[2] ? [data[1], data[2]] : [navigator.appName, navigator.appVersion, '-?'];
+        version = userAgent.match(/version\/(\d+)/i);
+        if (version !== null) {
+            data.splice(1, 1, version[1]);
+        }
+        return {
+            name: data[0],
+            version: data[1],
+        };
+    }
+    /**
+     * Whether first parameter is a deep subset of second parameter
+     * Hint: functions will be ignored
+     */
+    static isSubset(a, b) {
+        // Equal
+        if (a === b) {
+            return true;
+        }
+        // Different type
+        if (typeof a !== typeof b) {
+            return false;
+        }
+        // Process array
+        if (Array.isArray(a)) {
+            for (const [key, value] of Object.entries(a)) {
+                if (Helper.isSubset(value, b[key])) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        // Process object
+        if (typeof a === 'object') {
+            const plain = JSON.parse(JSON.stringify(a));
+            for (const [key, value] of Object.entries(plain)) {
+                if (Helper.isSubset(value, b[key])) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        // Else
+        return true;
     }
     /**
-     * Create Object or Objects of specified type with specified data
+     * Whether parameters are equal (have equal properties)
+     * Hint: functions will be ignored
      */
-    static maps(data, targetClass) {
-        // Check data
-        if (!data || typeof data !== 'object') {
-            return undefined;
-        }
-        // Check array
-        if (!Array.isArray(data)) {
-            data = [data];
-        }
-        // Map
-        return data.map((item) => {
-            return targetClass.map(item);
-        });
+    static isEqual(a, b) {
+        return Helper.isSubset(a, b) && Helper.isSubset(b, a);
     }
     /**
-     * Get plain parameter
+     * First level difference of two objects
+     * Hint: functions will be ignored and when an array or an object is different the hole array or object will used as property value
+     *
+     * @returns Record<string, any> Object with properties from first object
      */
-    static getPlainParameter(parameter) {
-        var _a, _b, _c;
-        if (!parameter) {
-            return parameter;
+    static getDiff(a, b, clone = true) {
+        const result = {};
+        let firstObject = a;
+        if (clone) {
+            firstObject = JSON.parse(JSON.stringify(a));
         }
-        return (_c = (_b = (_a = parameter === null || parameter === void 0 ? void 0 : parameter.split('?')) === null || _a === void 0 ? void 0 : _a.shift()) === null || _b === void 0 ? void 0 : _b.split('#')) === null || _c === void 0 ? void 0 : _c.shift();
+        for (const [key, value] of Object.entries(firstObject)) {
+            if (!Helper.isSubset(value, b[key])) {
+                result[key] = value;
+            }
+        }
+        return result;
     }
     /**
-     * Get ID of an url parameter
+     * Check if propertie is type of HTMLCollection or NodeList
+     * See https://stackoverflow.com/a/7238344
+     *
+     * @param nodes
      */
-    static getParameterId(parameter) {
-        var _a;
-        if (!parameter) {
-            return parameter;
+    static isNodeList(nodes) {
+        try {
+            const stringRepr = Object.prototype.toString.call(nodes);
+            return (typeof nodes === 'object' &&
+                /^\[object (HTMLCollection|NodeList|Object)\]$/.test(stringRepr) &&
+                typeof nodes.length === 'number' &&
+                (nodes.length === 0 || (typeof nodes[0] === 'object' && nodes[0].nodeType > 0)));
+        }
+        catch (e) {
+            return false;
         }
-        return (_a = Helper.getPlainParameter(parameter)) === null || _a === void 0 ? void 0 : _a.split('-').pop();
     }
+}
+
+/**
+ * Image service
+ */
+class ImageService {
     /**
-     * Delay
+     * Preaload images (for lazy handling)
+     *
+     * @param options
+     * @protected
      */
-    static delay(ms) {
-        const promise = new Promise((resolve) => setTimeout(resolve, ms));
-        return promise;
+    preLoadImages(options) {
+        // Init configuration
+        const config = Object.assign({ doneFunnction: undefined, elements: document, regExp: undefined, timeout: undefined }, options);
+        return new Promise((resolve) => {
+            var _a;
+            // Init variables
+            let resolved = false;
+            let timeoutId;
+            // Convert element(s) into array
+            if (!Array.isArray(config.elements)) {
+                // NodeList or HTMLCollection
+                if (Helper.isNodeList(config.elements)) {
+                    config.elements = Array.from(config.elements);
+                }
+                // Single element
+                else {
+                    config.elements = [config.elements];
+                }
+            }
+            // Init loading
+            const promises = [];
+            // Get all images
+            let images = [];
+            config.elements.forEach((element) => {
+                images = images.concat(Array.from(element.getElementsByTagName('img')));
+            });
+            // Prepare images
+            for (const image of images) {
+                const src = image.getAttribute('src');
+                // Check if changes are necessary and possible
+                if ((image.complete && image.naturalHeight !== 0) || // already laoded
+                    image.getAttribute('loading') !== 'lazy' || // loading attribute !== lazy
+                    !src || // Image has no src
+                    ((_a = config.regExp) === null || _a === void 0 ? void 0 : _a.test(src)) // Test if src matches regular expression
+                ) {
+                    continue;
+                }
+                // Replace lazy loading image with immediately loading image
+                const newImage = document.createElement('img');
+                Array.from(image.attributes).forEach((attr) => {
+                    if (attr.name !== 'loading' && attr.name !== 'src') {
+                        newImage.setAttribute(attr.name, attr.value);
+                    }
+                });
+                image.replaceWith(newImage);
+                // Wait for laoding
+                promises.push(this.loadImage(newImage, src));
+            }
+            if (config.timeout) {
+                timeoutId = setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+                    resolved = true;
+                    if (config.doneFunnction) {
+                        yield config.doneFunction();
+                    }
+                    resolve(undefined);
+                }));
+            }
+            // Wait until all images loaded
+            Promise.all(promises)
+                .catch((e) => console.error('Error during image loading', e))
+                .finally(() => __awaiter(this, void 0, void 0, function* () {
+                // Check if already resolved
+                if (resolved) {
+                    return;
+                }
+                // Stop timeout
+                if (timeoutId) {
+                    clearTimeout(timeoutId);
+                }
+                // Return result
+                let result;
+                if (config.doneFunnction) {
+                    result = yield config.doneFunction();
+                }
+                resolve(result);
+            }));
+        });
     }
     /**
-     * Deep freeze
-     * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze
+     * Load image for image element
+     *
+     * @param imageElement
+     * @param src
+     * @protected
      */
-    static deepFreeze(object, preparedObjects = []) {
-        // Prevent infinit regress
-        if (preparedObjects.includes(object)) {
-            return object;
+    loadImage(imageElement, src) {
+        return __awaiter(this, void 0, void 0, function* () {
+            src = src || imageElement.src;
+            return new Promise((resolve, reject) => {
+                imageElement.onload = () => resolve(imageElement);
+                imageElement.onerror = reject;
+                imageElement.src = src;
+            });
+        });
+    }
+}
+ImageService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ImageService_Factory() { return new ImageService(); }, token: ImageService, providedIn: "root" });
+ImageService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+
+/**
+ * Set same height (maximum) to different elements
+ */
+class MatchHeightDirective {
+    constructor(el, imageService, platformId) {
+        this.el = el;
+        this.imageService = imageService;
+        // Replace lazy loading images with immediate loading images
+        this.loadLazyImages = true;
+        this.isBrowser = isPlatformBrowser(platformId);
+    }
+    onResize() {
+        this.matchHeight(this.el.nativeElement, this.ltMatchHeight);
+    }
+    ngAfterViewChecked() {
+        this.matchHeight(this.el.nativeElement, this.ltMatchHeight);
+    }
+    matchHeight(parent, target) {
+        if (this.isBrowser) {
+            // Timeout is set to force Angular to wait for all actions and only continue once the process has run through.
+            // Otherwise, an infinite loop will occur.
+            setTimeout(() => {
+                this.matchHeightHelper(parent, target);
+            }, 1);
         }
-        preparedObjects.push(object);
-        // Retrieve the property names defined on object
-        const propNames = Object.getOwnPropertyNames(object);
-        // Freeze properties before freezing self
-        for (const name of propNames) {
-            const value = object[name];
-            if (value && typeof value === 'object') {
-                Helper.deepFreeze(value, preparedObjects);
-            }
+        else {
+            this.matchHeightHelper(parent, target);
         }
-        return Object.freeze(object);
     }
-    /**
-     * Generates an unique identifier with 24 characters
-     */
-    static getUID() {
-        let dt = new Date().getTime();
-        const uuid = 'xxxxxxxxxxxxxxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-            // eslint-disable-next-line no-bitwise
-            const r = (dt + Math.random() * 16) % 16 | 0;
-            dt = Math.floor(dt / 16);
-            // eslint-disable-next-line no-bitwise
-            return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
-        });
-        return uuid;
+    matchHeightHelper(parent, target) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!parent) {
+                return;
+            }
+            let classNames;
+            if (!Array.isArray(target)) {
+                classNames = [target];
+            }
+            else {
+                classNames = target;
+            }
+            for (const className of classNames) {
+                // find all child structureElements with the selected class name
+                const children = parent.getElementsByClassName(className);
+                if (!children || children.length < 2) {
+                    continue;
+                }
+                // Load images of children
+                if (this.loadLazyImages) {
+                    yield this.imageService.preLoadImages({ elements: children });
+                }
+                // reset all children height
+                Array.from(children).forEach((element) => {
+                    element.style.height = 'initial';
+                });
+                // get all the child structureElements heights
+                const itemHeights = Array.from(children).map((element) => {
+                    if (element.getBoundingClientRect) {
+                        return element.getBoundingClientRect().height;
+                    }
+                    return 0;
+                });
+                // find out the tallest one
+                const maxHeight = itemHeights.reduce((prev, curr) => (curr > prev ? curr : prev), 0);
+                // update the child structureElements height to the tallest one
+                Array.from(children).forEach((element) => (element.style.height = `${maxHeight}px`));
+            }
+        });
+    }
+}
+MatchHeightDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[ltMatchHeight]',
+            },] }
+];
+MatchHeightDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: ImageService },
+    { type: String, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
+];
+MatchHeightDirective.propDecorators = {
+    ltMatchHeight: [{ type: Input }],
+    loadLazyImages: [{ type: Input }],
+    onResize: [{ type: HostListener, args: ['window:resize',] }]
+};
+
+/**
+ * Reszise detection
+ * (inpsired by: https://stackblitz.com/edit/angular-resizable)
+ */
+class ResizableDirective {
+    constructor(el) {
+        this.el = el;
+        this.resizableGrabWidth = 8;
+        this.resizableMinWidth = 10;
+        this.dragging = false;
+    }
+    ngOnInit() {
+        this.addListenerToDocument();
+        this.addListenerToElement();
     }
-    /**
-     * Parse date string to date object
-     */
-    static parseDate(dateString) {
-        const reISO = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*))(?:Z|(\+|-)([\d|:]*))?$/;
-        const reMsAjax = /^\/Date\((d|-|.*)\)[\/|\\]$/;
-        if (typeof dateString === 'string') {
-            const isoExec = reISO.exec(dateString);
-            if (isoExec) {
-                return new Date(dateString);
-            }
-            const msAjaxExec = reMsAjax.exec(dateString);
-            if (msAjaxExec) {
-                const cleaned = msAjaxExec[1].split(/[-+,.]/);
-                return new Date(cleaned[0] ? +cleaned[0] : 0 - +cleaned[1]);
-            }
+    mouseMoveG(evt) {
+        if (!this.dragging) {
+            return;
         }
-        return dateString;
+        this.newWidth(evt.clientX - this.el.nativeElement.offsetLeft);
+        evt.stopPropagation();
     }
-    /**
-     * Get browser name and version
-     */
-    static getBrowser() {
-        const userAgent = navigator.userAgent;
-        let data = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
-        let version;
-        if (/trident/i.test(data[1])) {
-            version = /\brv[ :]+(\d+)/g.exec(userAgent) || [];
-            return { name: 'IE', version: version[1] || '' };
-        }
-        if (data[1] === 'Chrome') {
-            version = userAgent.match(/\bOPR|Edge\/(\d+)/);
-            if (version != null) {
-                return { name: 'Opera', version: version[1] };
-            }
-        }
-        data = data[2] ? [data[1], data[2]] : [navigator.appName, navigator.appVersion, '-?'];
-        version = userAgent.match(/version\/(\d+)/i);
-        if (version !== null) {
-            data.splice(1, 1, version[1]);
+    newWidth(wid) {
+        const result = Math.max(this.resizableMinWidth, wid);
+        this.el.nativeElement.style.width = result + 'px';
+    }
+    mouseDown(evt) {
+        if (this.inDragRegion(evt)) {
+            this.dragging = true;
+            this.preventGlobalMouseEvents();
+            evt.stopPropagation();
         }
-        return {
-            name: data[0],
-            version: data[1],
-        };
     }
-    /**
-     * Whether first parameter is a deep subset of second parameter
-     * Hint: functions will be ignored
-     */
-    static isSubset(a, b) {
-        // Equal
-        if (a === b) {
-            return true;
+    restoreGlobalMouseEvents() {
+        document.body.style['pointer-events'] = 'auto';
+    }
+    mouseUpG(evt) {
+        if (!this.dragging) {
+            return;
         }
-        // Different type
-        if (typeof a !== typeof b) {
-            return false;
+        this.restoreGlobalMouseEvents();
+        this.dragging = false;
+        evt.stopPropagation();
+    }
+    mouseMove(evt) {
+        if (this.inDragRegion(evt) || this.dragging) {
+            this.el.nativeElement.style.cursor = 'col-resize';
         }
-        // Process array
-        if (Array.isArray(a)) {
-            for (const [key, value] of Object.entries(a)) {
-                if (Helper.isSubset(value, b[key])) {
-                    return false;
-                }
-            }
-            return true;
+        else {
+            this.el.nativeElement.style.cursor = 'default';
         }
-        // Process object
-        if (typeof a === 'object') {
-            const plain = JSON.parse(JSON.stringify(a));
-            for (const [key, value] of Object.entries(plain)) {
-                if (Helper.isSubset(value, b[key])) {
-                    return false;
-                }
-            }
-            return true;
+    }
+    preventGlobalMouseEvents() {
+        document.body.style['pointer-events'] = 'none';
+    }
+    inDragRegion(evt) {
+        return this.el.nativeElement.clientWidth - evt.clientX + this.el.nativeElement.offsetLeft < this.resizableGrabWidth;
+    }
+    addListenerToDocument() {
+        document.addEventListener('mousemove', (e) => {
+            this.mouseMoveG(e);
+        }, true);
+        document.addEventListener('mouseup', (e) => {
+            this.mouseUpG(e);
+        }, true);
+    }
+    addListenerToElement() {
+        this.el.nativeElement.addEventListener('mousedown', (e) => {
+            this.mouseDown(e);
+        }, true);
+        this.el.nativeElement.addEventListener('mousemove', (e) => {
+            this.mouseMove(e);
+        }, true);
+    }
+}
+ResizableDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[ltResizable]',
+            },] }
+];
+ResizableDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+ResizableDirective.propDecorators = {
+    resizableGrabWidth: [{ type: Input }],
+    resizableMinWidth: [{ type: Input }]
+};
+
+/**
+ * Truncate string with ellipses
+ */
+class EllipsesPipe {
+    transform(value, limit) {
+        if (!value) {
+            return null;
         }
-        // Else
-        return true;
+        return value.length > limit ? value.substring(0, limit) + '...' : value;
     }
-    /**
-     * Whether parameters are equal (have equal properties)
-     * Hint: functions will be ignored
-     */
-    static isEqual(a, b) {
-        return Helper.isSubset(a, b) && Helper.isSubset(b, a);
+}
+EllipsesPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'ltEllipses',
+            },] }
+];
+
+/**
+ * Declarate html as safe
+ */
+class SafeHtmlPipe {
+    constructor(sanitized) {
+        this.sanitized = sanitized;
+    }
+    transform(value) {
+        return this.sanitized.bypassSecurityTrustHtml(value);
     }
+}
+SafeHtmlPipe.decorators = [
+    { type: Pipe, args: [{ name: 'ltSafeHtml' },] }
+];
+SafeHtmlPipe.ctorParameters = () => [
+    { type: DomSanitizer }
+];
+
+// Imported and exported elements
+const elements = [
+    // Directives
+    ContextMenuDirective,
+    LazyLoadDirective,
+    MatchHeightDirective,
+    ResizableDirective,
+    // Pipes
+    EllipsesPipe,
+    SafeHtmlPipe,
+];
+/**
+ * Base module
+ */
+class BaseModule {
     /**
-     * First level difference of two objects
-     * Hint: functions will be ignored and when an array or an object is different the hole array or object will used as property value
-     *
-     * @returns Record<string, any> Object with properties from first object
+     * Set configuration of base module in root module of the app
      */
-    static getDiff(a, b, clone = true) {
-        const result = {};
-        let firstObject = a;
-        if (clone) {
-            firstObject = JSON.parse(JSON.stringify(a));
+    static forRoot(baseModuleConfig = {}) {
+        // Default config
+        const config = Object.assign({ apiUrl: 'localhost:3000', authGuardRedirectUrl: '/auth', logging: false, version: null, prefix: null, scrollDetectionOffset: 200, scrollOffset: 100, storageType: 'local' }, baseModuleConfig);
+        // Prepare providers
+        const providers = [
+            {
+                provide: BASE_MODULE_CONFIG,
+                useValue: baseModuleConfig,
+            },
+        ];
+        // Add apollo features if API URL is set
+        if (baseModuleConfig.apiUrl) {
+            providers.push({
+                provide: APOLLO_OPTIONS,
+                useFactory: apolloOptionsFactory,
+                deps: [BASE_MODULE_CONFIG, HttpLink, AuthService],
+            });
         }
-        for (const [key, value] of Object.entries(firstObject)) {
-            if (!Helper.isSubset(value, b[key])) {
-                result[key] = value;
-            }
+        else if (config.logging) {
+            console.log('apiUrl is missing, ApolloLink is not initialized');
         }
-        return result;
+        // Return root module
+        return {
+            ngModule: BaseModule,
+            providers,
+        };
     }
 }
+BaseModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: elements,
+                exports: elements,
+            },] }
+];
 
 /**
  * Standard class