@lenne.tech/ng-base 0.0.11 → 0.2.2

package/bundles/lenne.tech-ng-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('@angular/platform-browser'), require('@angular/router'), require('graphql'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define('@lenne.tech/ng-base', ['exports', 'apollo-angular', 'apollo-angular/http', '@angular/core', 'rxjs', '@apollo/client/core', '@apollo/client/cache', '@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.i1$1, global.http, global.ng.core, global.rxjs, global.core, global.cache, global.ng.platformBrowser, global.ng.router, global.graphql, global.rxjs.operators));
-}(this, (function (exports, i1$1, http, i0, rxjs, core, cache, 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/platform-browser'), require('@angular/router'), require('graphql'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('@lenne.tech/ng-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.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';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -13,14 +13,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -573,7 +571,8 @@
      * Factory for apollo-angular options
      */
     function apolloOptionsFactory(baseModuleConfig, httpLink, authService) {
-        var link = httpLink.create({
+        var links = [];
+        var http = httpLink.create({
             uri: baseModuleConfig.apiUrl,
         });
         var authMiddleware = new core.ApolloLink(function (operation, forward) {
@@ -587,8 +586,45 @@
             }
             return forward(operation);
         });
+        if (baseModuleConfig.wsUrl) {
+            var wsClient = void 0;
+            if (localStorage) {
+                var token = authService.token || null;
+                wsClient = new ws.WebSocketLink({
+                    uri: baseModuleConfig.wsUrl,
+                    options: {
+                        reconnect: true,
+                        connectionParams: {
+                            authToken: token,
+                        },
+                    },
+                });
+            }
+            else {
+                wsClient = new ws.WebSocketLink({
+                    uri: baseModuleConfig.wsUrl,
+                    options: {
+                        reconnect: true,
+                    },
+                });
+            }
+            // using the ability to split links, you can send data to each link
+            // depending on what kind of operation is being sent
+            links.push(core.split(
+            // split based on operation type
+            function (_a) {
+                var query = _a.query;
+                // @ts-ignore
+                var _b = utilities.getMainDefinition(query), kind = _b.kind, operation = _b.operation;
+                return kind === 'OperationDefinition' && operation === 'subscription';
+            }, wsClient, core.concat(authMiddleware, http)));
+        }
+        else {
+            links.push(http);
+            links.push(authMiddleware);
+        }
         return {
-            link: core.ApolloLink.from([authMiddleware, link]),
+            link: core.ApolloLink.from(links),
             cache: new cache.InMemoryCache(),
             defaultOptions: {
                 query: {
@@ -2070,13 +2106,29 @@
                     var documentNode = fields
                         ? i1$1.gql(config.type + '{\n' + graphql + args + fields + '\n}')
                         : i1$1.gql(config.type + '{\n' + graphql + args + '\n}');
+                    // Log
+                    if (config.log) {
+                        console.log({ documentNode: documentNode });
+                    }
                     var request = {};
                     request[config.type] = documentNode;
                     // Log
                     if (config.log) {
                         console.log({ request: request });
                     }
-                    var func = config.type === exports.GraphQLRequestType.MUTATION ? 'mutate' : config.type;
+                    var func;
+                    if (config.type === exports.GraphQLRequestType.MUTATION) {
+                        func = 'mutate';
+                        request[config.type] = documentNode;
+                    }
+                    else if (config.type === exports.GraphQLRequestType.SUBSCRIPTION) {
+                        func = 'subscribe';
+                        request.query = documentNode;
+                    }
+                    else {
+                        func = config.type;
+                        request[config.type] = documentNode;
+                    }
                     _this.apollo[func](request).subscribe(function (result) {
                         var _a;
                         var data = ((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a[graphql]) !== undefined ? result.data[graphql] : result;
@@ -2094,8 +2146,10 @@
                         else {
                             subscriber.next(config.model.map(data));
                         }
-                        // Done
-                        subscriber.complete();
+                        if (config.type !== exports.GraphQLRequestType.SUBSCRIPTION) {
+                            // Done
+                            subscriber.complete();
+                        }
                     }, function (error) {
                         subscriber.error(error);
                         subscriber.complete();
@@ -2106,19 +2160,29 @@
         /**
          * Get fields / args from IGraphQLTypeCollection
          */
-        GraphQLService.prototype.graphQLTypeCollectionToStringArray = function (collection, current, result) {
+        GraphQLService.prototype.graphQLTypeCollectionToStringArray = function (collection, current, result, cacheNode) {
             var e_1, _b;
             if (current === void 0) { current = ''; }
             if (result === void 0) { result = []; }
+            if (cacheNode === void 0) { cacheNode = []; }
             if (collection) {
                 if (collection instanceof GraphQLType) {
                     result.push(current);
                 }
                 else {
+                    if (current === null || current === void 0 ? void 0 : current.includes('.')) {
+                        cacheNode.push(current.split('.')[1]);
+                    }
+                    else if (current) {
+                        cacheNode.push(current);
+                    }
                     try {
                         for (var _c = __values(Object.keys(collection)), _d = _c.next(); !_d.done; _d = _c.next()) {
                             var key = _d.value;
-                            this.graphQLTypeCollectionToStringArray(collection[key], current ? current + '.' + key : key, result);
+                            if (current === key || cacheNode.includes(key)) {
+                                continue;
+                            }
+                            this.graphQLTypeCollectionToStringArray(collection[key], current ? current + '.' + key : key, result, cacheNode);
                         }
                     }
                     catch (e_1_1) { e_1 = { error: e_1_1 }; }
@@ -2191,6 +2255,10 @@
             }
             // Process object
             else if (typeof args === 'object') {
+                // Check object is empty
+                if (args && Object.keys(args).length === 0 && Object.getPrototypeOf(args) === Object.prototype) {
+                    return { argsString: '{}', schemaArgs: schemaArgs, usedArgs: usedArgs };
+                }
                 var _loop_1 = function (key, value) {
                     // Init data for current entry
                     var currentKey = parent + key;
@@ -2471,7 +2539,9 @@
                     }
                     subscriber.next(response);
                     _this.handleLoader('stop', options);
-                    subscriber.complete();
+                    if (options.type !== exports.GraphQLRequestType.SUBSCRIPTION) {
+                        subscriber.complete();
+                    }
                 }, function (error) {
                     if (!options.ignoreErrors) {
                         _this.handleError(error, options.excludedErrors);
@@ -2536,32 +2606,80 @@
             this.router = router;
             this.moduleConfig = moduleConfig;
             /**
-             * Scroll offset
+             * Is a scroll listener set
+             *
+             * @protected
              */
-            this.scrollOffset = 100;
+            this.scrollListener = false;
             /**
-             * Detection offset
-             * Should be >= scrollOffset
+             * Current scroll timer;
+             *
+             * @protected
              */
-            this.detectionOffset = 200;
-            var config = Object.assign({ scrollDetectionOffset: 200, scrollOffset: 100 }, moduleConfig);
+            this.scrollTimer = -1;
+            var config = Object.assign({ scrollDetectionOffset: 200, scrollOffset: 100, scrollSamplingRate: 100 }, moduleConfig);
             this.detectionOffset = config.scrollDetectionOffset;
             this.scrollOffset = config.scrollOffset;
+            this.scrollSamplingRate = config.scrollSamplingRate;
         }
         /**
          * Scroll to structureElement with specific ID
          */
         ScrollService.prototype.scrollTo = function (id, options) {
             if (options === void 0) { options = {}; }
-            options = Object.assign({ stopPropagation: true }, options);
-            if (this.router.url !== '/' && !this.router.url.startsWith('/#')) {
-                this.router.navigate(['/'], { fragment: id });
-                return options.stopPropagation ? false : true;
-            }
-            var el = document.getElementById(id);
-            var cords = el.getBoundingClientRect();
-            window.scrollBy({ top: cords.top - this.scrollOffset, behavior: 'smooth' });
-            return options.stopPropagation ? false : true;
+            return __awaiter(this, void 0, void 0, function () {
+                var config, el, body, undoOverflowChanges, scrollBodyStyles, cords;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            config = Object.assign({ checkUrl: true, loadImagesBefore: true, resetStyles: false, setOverflow: true, stopPropagation: true }, options);
+                            if (!(config.checkUrl && this.router.url !== '/' && !this.router.url.startsWith('/#'))) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.router.navigate(['/'], { fragment: id })];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/, !config.stopPropagation];
+                        case 2:
+                            el = document.getElementById(id);
+                            if (!el) {
+                                console.error('Missing scroll element with ID:', id);
+                                return [2 /*return*/, !config.stopPropagation];
+                            }
+                            body = document.querySelector('body');
+                            undoOverflowChanges = false;
+                            scrollBodyStyles = JSON.parse(JSON.stringify(window.getComputedStyle(body)));
+                            if (config.setOverflow && (scrollBodyStyles.overflowX !== 'visible' || scrollBodyStyles.overflowY !== 'visible')) {
+                                // Set body overflow to visible
+                                console.warn('Style of body element for overflowX and overflowY will be set to "visible" for scrolling!');
+                                body.style.overflowX = 'visible';
+                                body.style.overflowY = 'visible';
+                                undoOverflowChanges = true;
+                            }
+                            if (!config.loadImagesBefore) return [3 /*break*/, 4];
+                            return [4 /*yield*/, this.preLoadImages()];
+                        case 3:
+                            _a.sent();
+                            _a.label = 4;
+                        case 4:
+                            cords = el.getBoundingClientRect();
+                            // Scroll to element
+                            window.scrollBy({ top: cords.top - this.scrollOffset, behavior: 'smooth' });
+                            return [4 /*yield*/, this.scrollDone({
+                                    doneFunction: function () {
+                                        // Undo changes
+                                        if (undoOverflowChanges && config.resetStyles) {
+                                            body.style.overflowX = scrollBodyStyles.overflowX;
+                                            body.style.overflowY = scrollBodyStyles.overflowY;
+                                            console.warn('Original style of body element for overflowX and overflowY is set.');
+                                        }
+                                    },
+                                })];
+                        case 5:
+                            _a.sent();
+                            // Return stop propagation configuration
+                            return [2 /*return*/, !config.stopPropagation];
+                    }
+                });
+            });
         };
         /**
          * Get last active structureElement
@@ -2592,6 +2710,194 @@
             var lastActiveElement = this.getLastActiveElement(list);
             return id === lastActiveElement || (lastActiveElement === null && isFirst);
         };
+        /**
+         * Scroll done promise
+         */
+        ScrollService.prototype.scrollDone = function (options) {
+            var _this = this;
+            if (options === void 0) { options = {}; }
+            // Init configuration
+            var config = Object.assign({ doneFunction: undefined, timeout: undefined }, options);
+            // Return promise for scroll done
+            return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
+                var rejected, timeoutId, result;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            rejected = false;
+                            // Set timeout handling if necessary
+                            if (config.timeout) {
+                                timeoutId = window.setTimeout(function () {
+                                    rejected = true;
+                                    reject(new Error('Timeout for scrollDone after:' + config.timeout));
+                                }, config.timeout);
+                            }
+                            // Wait for scroll done
+                            return [4 /*yield*/, this.scrollDoneDetection()];
+                        case 1:
+                            // Wait for scroll done
+                            _a.sent();
+                            if (!!rejected) return [3 /*break*/, 4];
+                            // Stop timeout if set
+                            if (timeoutId) {
+                                window.clearTimeout(timeoutId);
+                            }
+                            result = void 0;
+                            if (!config.doneFunction) return [3 /*break*/, 3];
+                            return [4 /*yield*/, config.doneFunction()];
+                        case 2:
+                            result = _a.sent();
+                            _a.label = 3;
+                        case 3:
+                            // Scroll done
+                            resolve(result);
+                            _a.label = 4;
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            }); });
+        };
+        /**
+         * Scroll done detecton
+         *
+         * @protected
+         */
+        ScrollService.prototype.scrollDoneDetection = function () {
+            var _this = this;
+            // Return current scroll promise (Singelton)
+            if (this.scrollPromise) {
+                return this.scrollPromise;
+            }
+            // Create current scroll promise
+            this.scrollPromise = new Promise(function (resolve) {
+                _this.scrollPromiseResolve = resolve;
+                if (_this.scrollTimer !== -1) {
+                    window.clearTimeout(_this.scrollTimer);
+                }
+                _this.scrollTimer = window.setTimeout(function () {
+                    window.removeEventListener('scroll', _this.scrollDoneDetection.bind(_this));
+                    _this.scrollPromise = undefined;
+                    resolve();
+                }, _this.scrollSamplingRate);
+            });
+            // Lisitening to scroll event;
+            window.addEventListener('scroll', this.scrollDoneDetection.bind(this));
+            // 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" });
@@ -2709,5 +3015,5 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=lenne.tech-ng-base.umd.js.map