@lenne.tech/ng-base 0.3.0 → 0.3.4

package/bundles/lenne.tech-ng-base-src-lib-base.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('apollo-angular'), require('apollo-angular/http'), require('@angular/core'), require('rxjs'), require('@apollo/client/core'), require('@apollo/client/cache'), require('@apollo/client/link/ws'), require('@apollo/client/utilities'), require('@angular/platform-browser'), require('@angular/router'), require('graphql'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define('@lenne.tech/ng-base/src/lib/base', ['exports', 'apollo-angular', 'apollo-angular/http', '@angular/core', 'rxjs', '@apollo/client/core', '@apollo/client/cache', '@apollo/client/link/ws', '@apollo/client/utilities', '@angular/platform-browser', '@angular/router', 'graphql', 'rxjs/operators'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.lenne = global.lenne || {}, global.lenne.tech = global.lenne.tech || {}, global.lenne.tech["ng-base"] = global.lenne.tech["ng-base"] || {}, global.lenne.tech["ng-base"].src = global.lenne.tech["ng-base"].src || {}, global.lenne.tech["ng-base"].src.lib = global.lenne.tech["ng-base"].src.lib || {}, global.lenne.tech["ng-base"].src.lib.base = {}), global.i1$1, global.http, global.ng.core, global.rxjs, global.core, global.cache, global.ws, global.utilities, global.ng.platformBrowser, global.ng.router, global.graphql, global.rxjs.operators));
-})(this, (function (exports, i1$1, http, i0, rxjs, core, cache, ws, utilities, i1, i1$2, graphql, operators) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('apollo-angular'), require('apollo-angular/http'), require('@angular/core'), require('rxjs'), require('@apollo/client/core'), require('@apollo/client/cache'), require('@apollo/client/link/ws'), require('@apollo/client/utilities'), require('@angular/common'), require('@angular/platform-browser'), require('@angular/router'), require('graphql'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('@lenne.tech/ng-base/src/lib/base', ['exports', 'apollo-angular', 'apollo-angular/http', '@angular/core', 'rxjs', '@apollo/client/core', '@apollo/client/cache', '@apollo/client/link/ws', '@apollo/client/utilities', '@angular/common', '@angular/platform-browser', '@angular/router', 'graphql', 'rxjs/operators'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.lenne = global.lenne || {}, global.lenne.tech = global.lenne.tech || {}, global.lenne.tech["ng-base"] = global.lenne.tech["ng-base"] || {}, global.lenne.tech["ng-base"].src = global.lenne.tech["ng-base"].src || {}, global.lenne.tech["ng-base"].src.lib = global.lenne.tech["ng-base"].src.lib || {}, global.lenne.tech["ng-base"].src.lib.base = {}), global.i1$1, global.http, global.ng.core, global.rxjs, global.core, global.cache, global.ws, global.utilities, global.ng.common, global.ng.platformBrowser, global.ng.router, global.graphql, global.rxjs.operators));
+})(this, (function (exports, i1$1, http, i0, rxjs, core, cache, ws, utilities, common, i1, i1$2, graphql, operators) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -572,8 +572,9 @@
      */
     function apolloOptionsFactory(baseModuleConfig, httpLink, authService) {
         var links = [];
+        var defaultUrl = 'api.' + window.location.href + '/graphql';
         var http = httpLink.create({
-            uri: baseModuleConfig.apiUrl,
+            uri: baseModuleConfig.apiUrl ? baseModuleConfig.apiUrl : 'https://' + defaultUrl,
         });
         var authMiddleware = new core.ApolloLink(function (operation, forward) {
             var headers = {};
@@ -785,250 +786,6 @@
         src: [{ type: i0.Input }]
     };
 
-    /**
-     * Set same height (maximum) to different elements
-     */
-    var MatchHeightDirective = /** @class */ (function () {
-        function MatchHeightDirective(el) {
-            this.el = el;
-        }
-        MatchHeightDirective.prototype.onResize = function () {
-            this.matchHeight(this.el.nativeElement, this.ltMatchHeight);
-        };
-        MatchHeightDirective.prototype.ngAfterViewChecked = function () {
-            this.matchHeight(this.el.nativeElement, this.ltMatchHeight);
-        };
-        MatchHeightDirective.prototype.matchHeight = function (parent, target) {
-            if (!parent) {
-                return;
-            }
-            var classNames;
-            if (!Array.isArray(target)) {
-                classNames = [target];
-            }
-            else {
-                classNames = target;
-            }
-            classNames.forEach(function (className) {
-                // find all child structureElements with the selected class name
-                var children = parent.getElementsByClassName(className);
-                if (!children) {
-                    return;
-                }
-                // reset all children height
-                Array.from(children).forEach(function (x) {
-                    x.style.height = 'initial';
-                });
-                // get all the child structureElements heights
-                var itemHeights = Array.from(children).map(function (x) { return x.getBoundingClientRect().height; });
-                // find out the tallest one
-                var maxHeight = itemHeights.reduce(function (prev, curr) { return (curr > prev ? curr : prev); }, 0);
-                // update the child structureElements height to the tallest one
-                Array.from(children).forEach(function (x) { return (x.style.height = maxHeight + "px"); });
-            });
-        };
-        return MatchHeightDirective;
-    }());
-    MatchHeightDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[ltMatchHeight]',
-                },] }
-    ];
-    MatchHeightDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-    MatchHeightDirective.propDecorators = {
-        ltMatchHeight: [{ type: i0.Input }],
-        onResize: [{ type: i0.HostListener, args: ['window:resize',] }]
-    };
-
-    /**
-     * Reszise detection
-     * (inpsired by: https://stackblitz.com/edit/angular-resizable)
-     */
-    var ResizableDirective = /** @class */ (function () {
-        function ResizableDirective(el) {
-            this.el = el;
-            this.resizableGrabWidth = 8;
-            this.resizableMinWidth = 10;
-            this.dragging = false;
-        }
-        ResizableDirective.prototype.ngOnInit = function () {
-            this.addListenerToDocument();
-            this.addListenerToElement();
-        };
-        ResizableDirective.prototype.mouseMoveG = function (evt) {
-            if (!this.dragging) {
-                return;
-            }
-            this.newWidth(evt.clientX - this.el.nativeElement.offsetLeft);
-            evt.stopPropagation();
-        };
-        ResizableDirective.prototype.newWidth = function (wid) {
-            var result = Math.max(this.resizableMinWidth, wid);
-            this.el.nativeElement.style.width = result + 'px';
-        };
-        ResizableDirective.prototype.mouseDown = function (evt) {
-            if (this.inDragRegion(evt)) {
-                this.dragging = true;
-                this.preventGlobalMouseEvents();
-                evt.stopPropagation();
-            }
-        };
-        ResizableDirective.prototype.restoreGlobalMouseEvents = function () {
-            document.body.style['pointer-events'] = 'auto';
-        };
-        ResizableDirective.prototype.mouseUpG = function (evt) {
-            if (!this.dragging) {
-                return;
-            }
-            this.restoreGlobalMouseEvents();
-            this.dragging = false;
-            evt.stopPropagation();
-        };
-        ResizableDirective.prototype.mouseMove = function (evt) {
-            if (this.inDragRegion(evt) || this.dragging) {
-                this.el.nativeElement.style.cursor = 'col-resize';
-            }
-            else {
-                this.el.nativeElement.style.cursor = 'default';
-            }
-        };
-        ResizableDirective.prototype.preventGlobalMouseEvents = function () {
-            document.body.style['pointer-events'] = 'none';
-        };
-        ResizableDirective.prototype.inDragRegion = function (evt) {
-            return this.el.nativeElement.clientWidth - evt.clientX + this.el.nativeElement.offsetLeft < this.resizableGrabWidth;
-        };
-        ResizableDirective.prototype.addListenerToDocument = function () {
-            var _this = this;
-            document.addEventListener('mousemove', function (e) {
-                _this.mouseMoveG(e);
-            }, true);
-            document.addEventListener('mouseup', function (e) {
-                _this.mouseUpG(e);
-            }, true);
-        };
-        ResizableDirective.prototype.addListenerToElement = function () {
-            var _this = this;
-            this.el.nativeElement.addEventListener('mousedown', function (e) {
-                _this.mouseDown(e);
-            }, true);
-            this.el.nativeElement.addEventListener('mousemove', function (e) {
-                _this.mouseMove(e);
-            }, true);
-        };
-        return ResizableDirective;
-    }());
-    ResizableDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[ltResizable]',
-                },] }
-    ];
-    ResizableDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-    ResizableDirective.propDecorators = {
-        resizableGrabWidth: [{ type: i0.Input }],
-        resizableMinWidth: [{ type: i0.Input }]
-    };
-
-    /**
-     * Truncate string with ellipses
-     */
-    var EllipsesPipe = /** @class */ (function () {
-        function EllipsesPipe() {
-        }
-        EllipsesPipe.prototype.transform = function (value, limit) {
-            if (!value) {
-                return null;
-            }
-            return value.length > limit ? value.substring(0, limit) + '...' : value;
-        };
-        return EllipsesPipe;
-    }());
-    EllipsesPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'ltEllipses',
-                },] }
-    ];
-
-    /**
-     * Declarate html as safe
-     */
-    var SafeHtmlPipe = /** @class */ (function () {
-        function SafeHtmlPipe(sanitized) {
-            this.sanitized = sanitized;
-        }
-        SafeHtmlPipe.prototype.transform = function (value) {
-            return this.sanitized.bypassSecurityTrustHtml(value);
-        };
-        return SafeHtmlPipe;
-    }());
-    SafeHtmlPipe.decorators = [
-        { type: i0.Pipe, args: [{ name: 'ltSafeHtml' },] }
-    ];
-    SafeHtmlPipe.ctorParameters = function () { return [
-        { type: i1.DomSanitizer }
-    ]; };
-
-    // Imported and exported elements
-    var elements = [
-        // Directives
-        ContextMenuDirective,
-        LazyLoadDirective,
-        MatchHeightDirective,
-        ResizableDirective,
-        // Pipes
-        EllipsesPipe,
-        SafeHtmlPipe,
-    ];
-    /**
-     * Base module
-     */
-    var BaseModule = /** @class */ (function () {
-        function BaseModule() {
-        }
-        /**
-         * Set configuration of base module in root module of the app
-         */
-        BaseModule.forRoot = function (baseModuleConfig) {
-            if (baseModuleConfig === void 0) { baseModuleConfig = {}; }
-            // Default config
-            var config = Object.assign({ apiUrl: 'localhost:3000', authGuardRedirectUrl: '/auth', logging: false, version: null, prefix: null, scrollDetectionOffset: 200, scrollOffset: 100, storageType: 'local' }, baseModuleConfig);
-            // Prepare providers
-            var providers = [
-                {
-                    provide: BASE_MODULE_CONFIG,
-                    useValue: baseModuleConfig,
-                },
-            ];
-            // Add apollo features if API URL is set
-            if (baseModuleConfig.apiUrl) {
-                providers.push({
-                    provide: i1$1.APOLLO_OPTIONS,
-                    useFactory: apolloOptionsFactory,
-                    deps: [BASE_MODULE_CONFIG, http.HttpLink, AuthService],
-                });
-            }
-            else if (config.logging) {
-                console.log('apiUrl is missing, ApolloLink is not initialized');
-            }
-            // Return root module
-            return {
-                ngModule: BaseModule,
-                providers: providers,
-            };
-        };
-        return BaseModule;
-    }());
-    BaseModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: elements,
-                    exports: elements,
-                },] }
-    ];
-
     /**
      * Helper class
      */
@@ -1339,49 +1096,532 @@
                 }
                 return true;
             }
-            // Else
-            return true;
+            // Else
+            return true;
+        };
+        /**
+         * Whether parameters are equal (have equal properties)
+         * Hint: functions will be ignored
+         */
+        Helper.isEqual = function (a, b) {
+            return Helper.isSubset(a, b) && Helper.isSubset(b, a);
+        };
+        /**
+         * 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
+         */
+        Helper.getDiff = function (a, b, clone) {
+            var e_7, _d;
+            if (clone === void 0) { clone = true; }
+            var result = {};
+            var firstObject = a;
+            if (clone) {
+                firstObject = JSON.parse(JSON.stringify(a));
+            }
+            try {
+                for (var _e = __values(Object.entries(firstObject)), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var _g = __read(_f.value, 2), key = _g[0], value = _g[1];
+                    if (!Helper.isSubset(value, b[key])) {
+                        result[key] = value;
+                    }
+                }
+            }
+            catch (e_7_1) { e_7 = { error: e_7_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_d = _e.return)) _d.call(_e);
+                }
+                finally { if (e_7) throw e_7.error; }
+            }
+            return result;
+        };
+        /**
+         * Check if propertie is type of HTMLCollection or NodeList
+         * See https://stackoverflow.com/a/7238344
+         *
+         * @param nodes
+         */
+        Helper.isNodeList = function (nodes) {
+            try {
+                var 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 Helper;
+    }());
+
+    /**
+     * Image service
+     */
+    var ImageService = /** @class */ (function () {
+        function ImageService() {
+        }
+        /**
+         * Preaload images (for lazy handling)
+         *
+         * @param options
+         * @protected
+         */
+        ImageService.prototype.preLoadImages = function (options) {
+            var _this = this;
+            // Init configuration
+            var config = Object.assign({ doneFunnction: undefined, elements: document, regExp: undefined, timeout: undefined }, options);
+            return new Promise(function (resolve) {
+                var e_1, _b;
+                var _a;
+                // Init variables
+                var resolved = false;
+                var 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
+                var promises = [];
+                // Get all images
+                var images = [];
+                config.elements.forEach(function (element) {
+                    images = images.concat(Array.from(element.getElementsByTagName('img')));
+                });
+                var _loop_1 = function (image) {
+                    var 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
+                    ) {
+                        return "continue";
+                    }
+                    // Replace lazy loading image with immediately loading image
+                    var newImage = document.createElement('img');
+                    Array.from(image.attributes).forEach(function (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));
+                };
+                try {
+                    // Prepare images
+                    for (var images_1 = __values(images), images_1_1 = images_1.next(); !images_1_1.done; images_1_1 = images_1.next()) {
+                        var image = images_1_1.value;
+                        _loop_1(image);
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (images_1_1 && !images_1_1.done && (_b = images_1.return)) _b.call(images_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                if (config.timeout) {
+                    timeoutId = setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
+                        return __generator(this, function (_b) {
+                            switch (_b.label) {
+                                case 0:
+                                    resolved = true;
+                                    if (!config.doneFunnction) return [3 /*break*/, 2];
+                                    return [4 /*yield*/, config.doneFunction()];
+                                case 1:
+                                    _b.sent();
+                                    _b.label = 2;
+                                case 2:
+                                    resolve(undefined);
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                }
+                // Wait until all images loaded
+                Promise.all(promises)
+                    .catch(function (e) { return console.error('Error during image loading', e); })
+                    .finally(function () { return __awaiter(_this, void 0, void 0, function () {
+                    var result;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                // Check if already resolved
+                                if (resolved) {
+                                    return [2 /*return*/];
+                                }
+                                // Stop timeout
+                                if (timeoutId) {
+                                    clearTimeout(timeoutId);
+                                }
+                                if (!config.doneFunnction) return [3 /*break*/, 2];
+                                return [4 /*yield*/, config.doneFunction()];
+                            case 1:
+                                result = _b.sent();
+                                _b.label = 2;
+                            case 2:
+                                resolve(result);
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+            });
+        };
+        /**
+         * Load image for image element
+         *
+         * @param imageElement
+         * @param src
+         * @protected
+         */
+        ImageService.prototype.loadImage = function (imageElement, src) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    src = src || imageElement.src;
+                    return [2 /*return*/, new Promise(function (resolve, reject) {
+                            imageElement.onload = function () { return resolve(imageElement); };
+                            imageElement.onerror = reject;
+                            imageElement.src = src;
+                        })];
+                });
+            });
+        };
+        return ImageService;
+    }());
+    ImageService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ImageService_Factory() { return new ImageService(); }, token: ImageService, providedIn: "root" });
+    ImageService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+
+    /**
+     * Set same height (maximum) to different elements
+     */
+    var MatchHeightDirective = /** @class */ (function () {
+        function MatchHeightDirective(el, imageService, platformId) {
+            this.el = el;
+            this.imageService = imageService;
+            // Replace lazy loading images with immediate loading images
+            this.loadLazyImages = true;
+            this.isBrowser = common.isPlatformBrowser(platformId);
+        }
+        MatchHeightDirective.prototype.onResize = function () {
+            this.matchHeight(this.el.nativeElement, this.ltMatchHeight);
+        };
+        MatchHeightDirective.prototype.ngAfterViewChecked = function () {
+            this.matchHeight(this.el.nativeElement, this.ltMatchHeight);
+        };
+        MatchHeightDirective.prototype.matchHeight = function (parent, target) {
+            var _this = this;
+            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(function () {
+                    _this.matchHeightHelper(parent, target);
+                }, 1);
+            }
+            else {
+                this.matchHeightHelper(parent, target);
+            }
+        };
+        MatchHeightDirective.prototype.matchHeightHelper = function (parent, target) {
+            return __awaiter(this, void 0, void 0, function () {
+                var classNames, _loop_1, this_1, classNames_1, classNames_1_1, className, e_1_1;
+                var e_1, _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!parent) {
+                                return [2 /*return*/];
+                            }
+                            if (!Array.isArray(target)) {
+                                classNames = [target];
+                            }
+                            else {
+                                classNames = target;
+                            }
+                            _loop_1 = function (className) {
+                                var children, itemHeights, maxHeight;
+                                return __generator(this, function (_c) {
+                                    switch (_c.label) {
+                                        case 0:
+                                            children = parent.getElementsByClassName(className);
+                                            if (!children || children.length < 2) {
+                                                return [2 /*return*/, "continue"];
+                                            }
+                                            if (!this_1.loadLazyImages) return [3 /*break*/, 2];
+                                            return [4 /*yield*/, this_1.imageService.preLoadImages({ elements: children })];
+                                        case 1:
+                                            _c.sent();
+                                            _c.label = 2;
+                                        case 2:
+                                            // reset all children height
+                                            Array.from(children).forEach(function (element) {
+                                                element.style.height = 'initial';
+                                            });
+                                            itemHeights = Array.from(children).map(function (element) {
+                                                if (element.getBoundingClientRect) {
+                                                    return element.getBoundingClientRect().height;
+                                                }
+                                                return 0;
+                                            });
+                                            maxHeight = itemHeights.reduce(function (prev, curr) { return (curr > prev ? curr : prev); }, 0);
+                                            // update the child structureElements height to the tallest one
+                                            Array.from(children).forEach(function (element) { return (element.style.height = maxHeight + "px"); });
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            };
+                            this_1 = this;
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 6, 7, 8]);
+                            classNames_1 = __values(classNames), classNames_1_1 = classNames_1.next();
+                            _b.label = 2;
+                        case 2:
+                            if (!!classNames_1_1.done) return [3 /*break*/, 5];
+                            className = classNames_1_1.value;
+                            return [5 /*yield**/, _loop_1(className)];
+                        case 3:
+                            _b.sent();
+                            _b.label = 4;
+                        case 4:
+                            classNames_1_1 = classNames_1.next();
+                            return [3 /*break*/, 2];
+                        case 5: return [3 /*break*/, 8];
+                        case 6:
+                            e_1_1 = _b.sent();
+                            e_1 = { error: e_1_1 };
+                            return [3 /*break*/, 8];
+                        case 7:
+                            try {
+                                if (classNames_1_1 && !classNames_1_1.done && (_a = classNames_1.return)) _a.call(classNames_1);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                            return [7 /*endfinally*/];
+                        case 8: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return MatchHeightDirective;
+    }());
+    MatchHeightDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[ltMatchHeight]',
+                },] }
+    ];
+    MatchHeightDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: ImageService },
+        { type: String, decorators: [{ type: i0.Inject, args: [i0.PLATFORM_ID,] }] }
+    ]; };
+    MatchHeightDirective.propDecorators = {
+        ltMatchHeight: [{ type: i0.Input }],
+        loadLazyImages: [{ type: i0.Input }],
+        onResize: [{ type: i0.HostListener, args: ['window:resize',] }]
+    };
+
+    /**
+     * Reszise detection
+     * (inpsired by: https://stackblitz.com/edit/angular-resizable)
+     */
+    var ResizableDirective = /** @class */ (function () {
+        function ResizableDirective(el) {
+            this.el = el;
+            this.resizableGrabWidth = 8;
+            this.resizableMinWidth = 10;
+            this.dragging = false;
+        }
+        ResizableDirective.prototype.ngOnInit = function () {
+            this.addListenerToDocument();
+            this.addListenerToElement();
+        };
+        ResizableDirective.prototype.mouseMoveG = function (evt) {
+            if (!this.dragging) {
+                return;
+            }
+            this.newWidth(evt.clientX - this.el.nativeElement.offsetLeft);
+            evt.stopPropagation();
+        };
+        ResizableDirective.prototype.newWidth = function (wid) {
+            var result = Math.max(this.resizableMinWidth, wid);
+            this.el.nativeElement.style.width = result + 'px';
+        };
+        ResizableDirective.prototype.mouseDown = function (evt) {
+            if (this.inDragRegion(evt)) {
+                this.dragging = true;
+                this.preventGlobalMouseEvents();
+                evt.stopPropagation();
+            }
+        };
+        ResizableDirective.prototype.restoreGlobalMouseEvents = function () {
+            document.body.style['pointer-events'] = 'auto';
+        };
+        ResizableDirective.prototype.mouseUpG = function (evt) {
+            if (!this.dragging) {
+                return;
+            }
+            this.restoreGlobalMouseEvents();
+            this.dragging = false;
+            evt.stopPropagation();
+        };
+        ResizableDirective.prototype.mouseMove = function (evt) {
+            if (this.inDragRegion(evt) || this.dragging) {
+                this.el.nativeElement.style.cursor = 'col-resize';
+            }
+            else {
+                this.el.nativeElement.style.cursor = 'default';
+            }
+        };
+        ResizableDirective.prototype.preventGlobalMouseEvents = function () {
+            document.body.style['pointer-events'] = 'none';
+        };
+        ResizableDirective.prototype.inDragRegion = function (evt) {
+            return this.el.nativeElement.clientWidth - evt.clientX + this.el.nativeElement.offsetLeft < this.resizableGrabWidth;
+        };
+        ResizableDirective.prototype.addListenerToDocument = function () {
+            var _this = this;
+            document.addEventListener('mousemove', function (e) {
+                _this.mouseMoveG(e);
+            }, true);
+            document.addEventListener('mouseup', function (e) {
+                _this.mouseUpG(e);
+            }, true);
+        };
+        ResizableDirective.prototype.addListenerToElement = function () {
+            var _this = this;
+            this.el.nativeElement.addEventListener('mousedown', function (e) {
+                _this.mouseDown(e);
+            }, true);
+            this.el.nativeElement.addEventListener('mousemove', function (e) {
+                _this.mouseMove(e);
+            }, true);
+        };
+        return ResizableDirective;
+    }());
+    ResizableDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[ltResizable]',
+                },] }
+    ];
+    ResizableDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    ResizableDirective.propDecorators = {
+        resizableGrabWidth: [{ type: i0.Input }],
+        resizableMinWidth: [{ type: i0.Input }]
+    };
+
+    /**
+     * Truncate string with ellipses
+     */
+    var EllipsesPipe = /** @class */ (function () {
+        function EllipsesPipe() {
+        }
+        EllipsesPipe.prototype.transform = function (value, limit) {
+            if (!value) {
+                return null;
+            }
+            return value.length > limit ? value.substring(0, limit) + '...' : value;
         };
-        /**
-         * Whether parameters are equal (have equal properties)
-         * Hint: functions will be ignored
-         */
-        Helper.isEqual = function (a, b) {
-            return Helper.isSubset(a, b) && Helper.isSubset(b, a);
+        return EllipsesPipe;
+    }());
+    EllipsesPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'ltEllipses',
+                },] }
+    ];
+
+    /**
+     * Declarate html as safe
+     */
+    var SafeHtmlPipe = /** @class */ (function () {
+        function SafeHtmlPipe(sanitized) {
+            this.sanitized = sanitized;
+        }
+        SafeHtmlPipe.prototype.transform = function (value) {
+            return this.sanitized.bypassSecurityTrustHtml(value);
         };
+        return SafeHtmlPipe;
+    }());
+    SafeHtmlPipe.decorators = [
+        { type: i0.Pipe, args: [{ name: 'ltSafeHtml' },] }
+    ];
+    SafeHtmlPipe.ctorParameters = function () { return [
+        { type: i1.DomSanitizer }
+    ]; };
+
+    // Imported and exported elements
+    var elements = [
+        // Directives
+        ContextMenuDirective,
+        LazyLoadDirective,
+        MatchHeightDirective,
+        ResizableDirective,
+        // Pipes
+        EllipsesPipe,
+        SafeHtmlPipe,
+    ];
+    /**
+     * Base module
+     */
+    var BaseModule = /** @class */ (function () {
+        function 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
          */
-        Helper.getDiff = function (a, b, clone) {
-            var e_7, _d;
-            if (clone === void 0) { clone = true; }
-            var result = {};
-            var firstObject = a;
-            if (clone) {
-                firstObject = JSON.parse(JSON.stringify(a));
-            }
-            try {
-                for (var _e = __values(Object.entries(firstObject)), _f = _e.next(); !_f.done; _f = _e.next()) {
-                    var _g = __read(_f.value, 2), key = _g[0], value = _g[1];
-                    if (!Helper.isSubset(value, b[key])) {
-                        result[key] = value;
-                    }
-                }
+        BaseModule.forRoot = function (baseModuleConfig) {
+            if (baseModuleConfig === void 0) { baseModuleConfig = {}; }
+            // Default config
+            var config = Object.assign({ apiUrl: 'localhost:3000', authGuardRedirectUrl: '/auth', logging: false, version: null, prefix: null, scrollDetectionOffset: 200, scrollOffset: 100, storageType: 'local' }, baseModuleConfig);
+            // Prepare providers
+            var providers = [
+                {
+                    provide: BASE_MODULE_CONFIG,
+                    useValue: baseModuleConfig,
+                },
+            ];
+            // Add apollo features if API URL is set
+            if (baseModuleConfig.apiUrl) {
+                providers.push({
+                    provide: i1$1.APOLLO_OPTIONS,
+                    useFactory: apolloOptionsFactory,
+                    deps: [BASE_MODULE_CONFIG, http.HttpLink, AuthService],
+                });
             }
-            catch (e_7_1) { e_7 = { error: e_7_1 }; }
-            finally {
-                try {
-                    if (_f && !_f.done && (_d = _e.return)) _d.call(_e);
-                }
-                finally { if (e_7) throw e_7.error; }
+            else if (config.logging) {
+                console.log('apiUrl is missing, ApolloLink is not initialized');
             }
-            return result;
+            // Return root module
+            return {
+                ngModule: BaseModule,
+                providers: providers,
+            };
         };
-        return Helper;
+        return BaseModule;
     }());
+    BaseModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: elements,
+                    exports: elements,
+                },] }
+    ];
 
     /**
      * Standard class
@@ -2602,9 +2842,10 @@
         /**
          * Initializer
          */
-        function ScrollService(router, moduleConfig) {
+        function ScrollService(router, moduleConfig, imageService) {
             this.router = router;
             this.moduleConfig = moduleConfig;
+            this.imageService = imageService;
             /**
              * Is a scroll listener set
              *
@@ -2655,7 +2896,7 @@
                                 undoOverflowChanges = true;
                             }
                             if (!config.loadImagesBefore) return [3 /*break*/, 4];
-                            return [4 /*yield*/, this.preLoadImages()];
+                            return [4 /*yield*/, this.imageService.preLoadImages()];
                         case 3:
                             _a.sent();
                             _a.label = 4;
@@ -2785,122 +3026,9 @@
             // Return promise
             return this.scrollPromise;
         };
-        /**
-         * Preaload images (for lazy handling)
-         *
-         * @param options
-         * @protected
-         */
-        ScrollService.prototype.preLoadImages = function (options) {
-            var _this = this;
-            // Init configuration
-            var config = Object.assign({ doneFunnction: undefined, timeout: undefined }, options);
-            return new Promise(function (resolve) {
-                var e_1, _a;
-                // Init variables
-                var resolved = false;
-                var timeoutId;
-                // Init loading
-                var images = Array.from(document.getElementsByTagName('img'));
-                var promises = [];
-                var _loop_1 = function (image) {
-                    var src = image.getAttribute('src');
-                    // Check if changes are necessary and possible
-                    if ((image.complete && image.naturalHeight !== 0) || image.getAttribute('loading') !== 'lazy' || !src) {
-                        return "continue";
-                    }
-                    var newImage = document.createElement('img');
-                    Array.from(image.attributes).forEach(function (attr) {
-                        if (attr.name !== 'loading' && attr.name !== 'src') {
-                            newImage.setAttribute(attr.name, attr.value);
-                        }
-                    });
-                    image.replaceWith(newImage);
-                    promises.push(_this.loadImage(newImage, src));
-                };
-                try {
-                    // Prepare images
-                    for (var images_1 = __values(images), images_1_1 = images_1.next(); !images_1_1.done; images_1_1 = images_1.next()) {
-                        var image = images_1_1.value;
-                        _loop_1(image);
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (images_1_1 && !images_1_1.done && (_a = images_1.return)) _a.call(images_1);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-                if (config.timeout) {
-                    timeoutId = setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0:
-                                    resolved = true;
-                                    if (!config.doneFunnction) return [3 /*break*/, 2];
-                                    return [4 /*yield*/, config.doneFunction()];
-                                case 1:
-                                    _a.sent();
-                                    _a.label = 2;
-                                case 2:
-                                    resolve(undefined);
-                                    return [2 /*return*/];
-                            }
-                        });
-                    }); });
-                }
-                // Wait until all images loaded
-                Promise.all(promises)
-                    .catch(function (e) { return console.error('Error during image loading', e); })
-                    .finally(function () { return __awaiter(_this, void 0, void 0, function () {
-                    var result;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                // Check if already resolved
-                                if (resolved) {
-                                    return [2 /*return*/];
-                                }
-                                // Stop timeout
-                                if (timeoutId) {
-                                    clearTimeout(timeoutId);
-                                }
-                                if (!config.doneFunnction) return [3 /*break*/, 2];
-                                return [4 /*yield*/, config.doneFunction()];
-                            case 1:
-                                result = _a.sent();
-                                _a.label = 2;
-                            case 2:
-                                resolve(result);
-                                return [2 /*return*/];
-                        }
-                    });
-                }); });
-            });
-        };
-        /**
-         * Load image for image element
-         *
-         * @param imageElement
-         * @param src
-         * @protected
-         */
-        ScrollService.prototype.loadImage = function (imageElement, src) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    src = src || imageElement.src;
-                    return [2 /*return*/, new Promise(function (resolve, reject) {
-                            imageElement.onload = function () { return resolve(imageElement); };
-                            imageElement.onerror = reject;
-                            imageElement.src = src;
-                        })];
-                });
-            });
-        };
         return ScrollService;
     }());
-    ScrollService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ScrollService_Factory() { return new ScrollService(i0__namespace.ɵɵinject(i1__namespace$1.Router), i0__namespace.ɵɵinject(BASE_MODULE_CONFIG)); }, token: ScrollService, providedIn: "root" });
+    ScrollService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ScrollService_Factory() { return new ScrollService(i0__namespace.ɵɵinject(i1__namespace$1.Router), i0__namespace.ɵɵinject(BASE_MODULE_CONFIG), i0__namespace.ɵɵinject(ImageService)); }, token: ScrollService, providedIn: "root" });
     ScrollService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root',
@@ -2908,7 +3036,8 @@
     ];
     ScrollService.ctorParameters = function () { return [
         { type: i1$2.Router },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [BASE_MODULE_CONFIG,] }] }
+        { type: undefined, decorators: [{ type: i0.Inject, args: [BASE_MODULE_CONFIG,] }] },
+        { type: ImageService }
     ]; };
 
     /**
@@ -2919,23 +3048,79 @@
             this.titleService = titleService;
             this.metaTagService = metaTagService;
         }
-        SEOService.prototype.initPageForSEO = function (title, description, keywords) {
-            this.setPageTitle(title);
-            this.setPageDescription(description);
-            if (keywords) {
-                this.setPageKeywords(keywords);
+        SEOService.prototype.initPageForSEO = function (input) {
+            this.setGeneralData(input);
+            this.setTwitterData(input);
+            this.setTwitterData(input);
+            this.setFacebookData(input);
+            if (input.keywords) {
+                this.setPageKeywords(input.keywords);
             }
         };
-        SEOService.prototype.setPageTitle = function (title) {
-            this.titleService.setTitle(title);
-            this.metaTagService.updateTag({ property: 'og:title', content: title });
-            this.metaTagService.updateTag({ name: 'twitter:title', content: title });
+        /**
+         * Set general metadata
+         *
+         * @param data
+         * @private
+         */
+        SEOService.prototype.setGeneralData = function (data) {
+            this.titleService.setTitle(data.title);
+            this.metaTagService.updateTag({ name: 'description', content: data.description });
+        };
+        /**
+         * Set metadata for twitter
+         *
+         * @param data
+         * @private
+         */
+        SEOService.prototype.setTwitterData = function (data) {
+            this.metaTagService.updateTag({ name: 'twitter:title', content: data.title });
+            this.metaTagService.updateTag({ name: 'twitter:description', content: data.description });
+            this.metaTagService.updateTag({
+                property: 'twitter:url',
+                content: data.url ? data.url : window.location.href,
+            });
+            if (data.image) {
+                this.metaTagService.updateTag({
+                    property: 'twitter:image',
+                    content: data.image,
+                });
+                this.metaTagService.updateTag({
+                    property: 'twitter:card',
+                    content: 'summary_large_image',
+                });
+            }
         };
-        SEOService.prototype.setPageDescription = function (description) {
-            this.metaTagService.updateTag({ name: 'description', content: description });
-            this.metaTagService.updateTag({ property: 'og:description', content: description });
-            this.metaTagService.updateTag({ name: 'twitter:description', content: description });
+        /**
+         * Set metadata for facebook
+         *
+         * @param data
+         * @private
+         */
+        SEOService.prototype.setFacebookData = function (data) {
+            this.metaTagService.updateTag({ property: 'og:title', content: data.title });
+            this.metaTagService.updateTag({ property: 'og:description', content: data.description });
+            this.metaTagService.updateTag({
+                property: 'og:type',
+                content: 'website',
+            });
+            this.metaTagService.updateTag({
+                property: 'og:url',
+                content: data.url ? data.url : window.location.href,
+            });
+            if (data.image) {
+                this.metaTagService.updateTag({
+                    property: 'og:image',
+                    content: data.image,
+                });
+            }
         };
+        /**
+         * Set page keywords
+         *
+         * @param keywords
+         * @private
+         */
         SEOService.prototype.setPageKeywords = function (keywords) {
             this.metaTagService.updateTag({ name: 'keywords', content: keywords });
         };
@@ -2998,6 +3183,7 @@
     exports.GraphQLService = GraphQLService;
     exports.GraphQLType = GraphQLType;
     exports.Helper = Helper;
+    exports.ImageService = ImageService;
     exports.LazyLoadDirective = LazyLoadDirective;
     exports.LoaderService = LoaderService;
     exports.LogoutGuard = LogoutGuard;